@heartlandone/vega-sandbox-pr-1479-67b1af6617cd7ddd88b398d2d9e81f66e06d5403 2.27.0

package/dist/esm/vega-carousel.entry.js

@@ -0,0 +1,511 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-187f71d1.js';
+import { S as SynchronizeTaskQueue } from './synchronize-task-queue-8f5fbbd9.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { r as reflow, e as executeAfterTransition } from './effect-8efd2c3c.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-5a1329a7.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-b3f6ac79.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-994c1e1b.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-eee9fd41.js';
+import { i as VegaPageUpdate } from './vega-event-id-7465a011.js';
+import { c as createDeprecatedPropertySlimmer } from './deprecated-property-slimmer-43d184b3.js';
+import './type-guard-63caf78b.js';
+import './breakpoints-36a3ed69.js';
+import './ui-8424715a.js';
+import './regex-dfe11abf.js';
+import './typography-a8fc4764.js';
+import './number-e2519d1c.js';
+import './pixel-f32c07ce.js';
+import './dynamic-slimmer-90b8af32.js';
+import './change-manager-6a7eb88c.js';
+import './dom-node-subject-observer-factory-9461cd67.js';
+import './observer-3959f9dd.js';
+import './ui-0132dbb5.js';
+import './internal-vega-event-manager-722461c1.js';
+import './object-261e7344.js';
+
+var TouchDirection;
+(function (TouchDirection) {
+  TouchDirection["RIGHT"] = "TOUCH_DIR_RIGHT";
+  TouchDirection["LEFT"] = "TOUCH_DIR_LEFT";
+  TouchDirection["UP"] = "TOUCH_DIR_UP";
+  TouchDirection["DOWN"] = "TOUCH_DIR_DOWN";
+})(TouchDirection || (TouchDirection = {}));
+/**
+ * The TouchListener class is a class that listens for touch events on a touchable element
+ * and calls a callback function when a touch event occurs
+ *
+ * @property {TouchListenerInitParams} TouchListenerInitParams params for create touch listener
+ * @property {{ x: number; y: number }} touchStartState state object to record start touch coordinate
+ */
+class TouchListener {
+  /**
+   * Create a new instance of the TouchListener class
+   *
+   * @param {TouchListenerInitParams} params - TouchListenerInitParams
+   */
+  constructor(params) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.touchStart = this.onTouchStart.bind(this);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.touchMove = this.onTouchMove.bind(this);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.touchEnd = this.onTouchEnd.bind(this);
+    this.touchableParams = params;
+    this.attachListeners();
+  }
+  /**
+   * It creates a new instance of the TouchListener class
+   *
+   * @param {TouchListenerInitParams} params - TouchListenerInitParams
+   * @returns {TouchListener} A new instance of the TouchListener class.
+   */
+  static init(params) {
+    return new TouchListener(params);
+  }
+  /**
+   * Given the start and end coordinates of a touch event, return the direction and distance of the touch
+   *
+   * @param {number} startX - The x coordinate of the touch start event.
+   * @param {number} startY - The y-coordinate of the touch start event.
+   * @param {number} endX - The x coordinate of the touch end event.
+   * @param {number} endY - the y coordinate of the touch event.
+   * @returns {{ direction: TouchDirection; distance: number }} The direction and distance of the touch.
+   */
+  static getTouchDirectionAndDistance(startX, startY, endX, endY) {
+    const delX = endX - startX;
+    const delY = endY - startY;
+    if (Math.abs(delX) > Math.abs(delY)) {
+      return {
+        direction: delX > 0 ? TouchDirection.RIGHT : TouchDirection.LEFT,
+        distance: Math.abs(delX),
+      };
+    }
+    else {
+      return {
+        direction: delY > 0 ? TouchDirection.UP : TouchDirection.DOWN,
+        distance: Math.abs(delY),
+      };
+    }
+  }
+  /**
+   * Get the coordinates of a touch event
+   *
+   * @param {TouchEvent} event - The event object that was passed to the handler.
+   * @returns {{ x: number; y: number }} The coordinates of the touch event.
+   */
+  static getTouchEventCoordinates(event) {
+    return { x: event.changedTouches[0].screenX, y: event.changedTouches[0].screenY };
+  }
+  /**
+   * It removes the touchable events from the touchable.
+   */
+  destroy() {
+    this.touchableParams.touchable.removeEventListener('touchstart', this.touchStart);
+    this.touchableParams.touchable.removeEventListener('touchmove', this.touchMove);
+    this.touchableParams.touchable.removeEventListener('touchend', this.touchEnd);
+  }
+  /**
+   * Attach the touchstart, touchmove, and touchend listeners to the touchable element.
+   * The bind() method returns a copy of the given function with the provided this value and initial arguments,
+   * which causes remove event listeners to fail.
+   */
+  attachListeners() {
+    this.touchableParams.touchable.addEventListener('touchstart', this.touchStart);
+    this.touchableParams.touchable.addEventListener('touchmove', this.touchMove);
+    this.touchableParams.touchable.addEventListener('touchend', this.touchEnd);
+  }
+  /**
+   * It prevents the default behavior of the touch event and stores the coordinates of the touch event in the
+   * touchStartState variable.
+   *
+   * @param {TouchEvent} event - The event object that was triggered.
+   */
+  onTouchStart(event) {
+    var _a, _b;
+    this.touchStartState = TouchListener.getTouchEventCoordinates(event);
+    (_b = (_a = this.touchableParams).onTouchStart) === null || _b === void 0 ? void 0 : _b.call(_a, this.touchStartState.x, this.touchStartState.y);
+  }
+  /**
+   * It prevents the default behavior of the event, and then it gets the coordinates of the touch event, and then it gets
+   * the direction and distance of the touch event.
+   *
+   * @param {TouchEvent} event - The native event object.
+   */
+  onTouchMove(event) {
+    var _a, _b;
+    const { x, y } = TouchListener.getTouchEventCoordinates(event);
+    const { direction, distance } = TouchListener.getTouchDirectionAndDistance(this.touchStartState.x, this.touchStartState.y, x, y);
+    (_b = (_a = this.touchableParams).onTouchMove) === null || _b === void 0 ? void 0 : _b.call(_a, direction, distance);
+  }
+  /**
+   * It calls the onTouchEnd function of the touchableParams object.
+   *
+   * @param {TouchEvent} event - The event object that was passed to the onTouchStart or onTouchEnd callback.
+   */
+  onTouchEnd(event) {
+    var _a, _b;
+    const { x, y } = TouchListener.getTouchEventCoordinates(event);
+    const { direction } = TouchListener.getTouchDirectionAndDistance(this.touchStartState.x, this.touchStartState.y, x, y);
+    (_b = (_a = this.touchableParams).onTouchEnd) === null || _b === void 0 ? void 0 : _b.call(_a, direction);
+    this.resetStartState();
+  }
+  /**
+   * Reset the start state
+   */
+  resetStartState() {
+    this.touchStartState = { x: 0, y: 0 };
+  }
+}
+
+const VegaCarouselRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'PER_PAGE_IS_ONE',
+    payloadDescription: '@deprecated Specifies the number of elements displayed per page in the carousel.',
+    /**
+     * The function checks if the `perPage` property of the `host` element is equal to '1'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.perPage === 1,
+  },
+  {
+    payloadKey: 'PER_PAGE_IS_NOT_ONE',
+    payloadDescription: '@deprecated Specifies the number of elements displayed per page in the carousel.',
+    /**
+     * The function checks if the `perPage` property of the `host` element is not equal to '1'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.perPage !== 1,
+  },
+];
+
+const vegaCarouselCss = ":host{display:block}:host .vega-carousel-indicators-container{display:flex;justify-content:center;align-items:center;margin-top:24px}:host .vega-carousel-indicators-container>div{border-radius:9999px;width:16px;height:16px;border-width:2px;border-style:solid;margin-right:24px;cursor:pointer;border:2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1))}:host .vega-carousel-indicators-container>div:focus{border:2px solid rgba(var(--v-border-secondary-btn-hover, 4, 112, 236, 1));background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25))}:host .vega-carousel-indicators-container>div:hover{border:2px solid rgba(var(--v-border-secondary-btn-hover, 4, 112, 236, 1));background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host .vega-carousel-indicators-container>div.vega-carousel-indicator-active{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host .vega-carousel-indicators-container>div.vega-carousel-indicator-active:hover{border:2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1))}:host .vega-carousel-indicators-container>div:last-child{margin-right:0px}:host .carousel-inner{position:relative;width:100%;overflow:hidden}:host .carousel-inner.carousel-stop-swipe{pointer-events:none}:host ::slotted(.carousel-item){width:100%;position:relative;display:none;float:left;transition:transform 0.6s ease;margin-right:-100%}:host ::slotted(.carousel-item.active),:host ::slotted(.carousel-item-next),:host ::slotted(.carousel-item-prev){display:block}:host ::slotted(.carousel-item-next:not(.carousel-item-start)),:host ::slotted(.active.carousel-item-end){transform:translateX(100%)}:host ::slotted(.carousel-item-prev:not(.carousel-item-end)),:host ::slotted(.active.carousel-item-start){transform:translateX(-100%)}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaCarousel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaPageUpdate = createEvent(this, "vegaPageUpdate", 7);
+    this.pageUpdate = createEvent(this, "pageUpdate", 7);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaCarouselRuntimeMetricsPayloadDefinition);
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      callback: /* istanbul ignore next */ () => {
+        if (this.getCarouselItemsPerPage() !== this.currentItemsPerPage) {
+          this.updatePageLayout();
+        }
+      },
+    });
+    this.pageUpdateEventEmitter = createEventEmitSlimmer(VegaCarousel, VegaPageUpdate);
+    this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaCarousel, 'itemsPerPage', 'perPage', 1);
+    this.carouselContentElements = [];
+    this.slideTaskQueue = new SynchronizeTaskQueue();
+    this.currentItemsPerPage = 1;
+    this.page = 1;
+    /**
+     * Specifies the number of elements displayed per page in the carousel.
+     * @deprecated This property will be removed soon and replaced by prop itemsPerPage
+     *
+     * @vegaVersion 1.0.2
+     */
+    this.perPage = 1;
+    /**
+     * Specifies the number of items displayed per page in the carousel.
+     *
+     * @vegaVersion 2.1.0
+     */
+    this.itemsPerPage = 1;
+    /**
+     * Specifies whether to show the navigational buttons
+     *    at the bottom of the carousel.
+     *
+     * @vegaVersion 1.0.2
+     */
+    this.showSlider = true;
+    /**
+     * Controls the amount of space between the elements in the carousel
+     *    when more than one element is displayed on each page
+     *    using the `itemsPerPage` property.
+     *
+     * @vegaVersion 1.0.2
+     */
+    this.spacing = 'size-16';
+    /**
+     * Indicates whether the carousel can be swiped
+     *    to navigate between pages on a mobile device.
+     *
+     * @vegaVersion 1.18.0
+     */
+    this.canSwipe = true;
+    this.onClickIndicators = async (e) => {
+      const target = e.currentTarget;
+      const targetPage = Number(target.dataset.page);
+      await this.goToPage(targetPage);
+    };
+    /**
+     * Get the total page that will be shown in carousel.
+     */
+    this.getTotalPage = () => {
+      const count = this.carouselContentElements.length;
+      return Math.ceil(count / this.currentItemsPerPage);
+    };
+    this.updatePageLayout = () => {
+      this.currentItemsPerPage = this.getCarouselItemsPerPage();
+      this.totalPages = this.getTotalPage();
+      this.page = 1;
+      this.wrapChildContentAsCarouselItem();
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-carousel-call-observe-method}
+     */
+    /* istanbul ignore next */
+    this.initMutationObserver = () => {
+      this.mutationObserver = new MutationObserver(async () => {
+        await this.updateContentByObserverSlotChange();
+      });
+      this.mutationObserver.observe(this.host, { childList: true });
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-carousel-with-touch-event}
+     */
+    /* istanbul ignore next */
+    this.initTouchEvent = () => {
+      this.touchListener = TouchListener.init({
+        touchable: this.listContainer,
+        onTouchEnd: async (direction) => {
+          const pageDelta = direction === TouchDirection.RIGHT ? -1 : direction === TouchDirection.LEFT ? 1 : 0;
+          const nextPage = this.page + pageDelta;
+          await this.goToPage(nextPage);
+        },
+      });
+    };
+  }
+  watchPage() {
+    this.pageUpdateEventEmitter.emit(this.page);
+  }
+  watchPerPage() {
+    this.updatePageLayout();
+  }
+  watchItemsPerPage() {
+    this.updatePageLayout();
+  }
+  onSpacingPropsChange() {
+    const carouselItems = this.host.querySelectorAll('vega-grid');
+    carouselItems.forEach((item) => {
+      item.gap = this.spacing;
+    });
+  }
+  async disconnectedCallback() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+    if (this.touchListener) {
+      this.touchListener.destroy();
+    }
+  }
+  componentDidLoad() {
+    this.carouselContentElements = Array.from(this.host.children);
+    this.updatePageLayout();
+    this.initMutationObserver();
+    this.initTouchEvent();
+  }
+  /**
+   * Invoke this method to transition the carousel to the next available page,
+   *    if it exists.
+   *
+   * @vegaVersion 1.0.2
+   */
+  async nextPage() {
+    const nextPage = this.page < this.totalPages ? this.page + 1 : this.page;
+    await this.goToPage(nextPage);
+  }
+  /**
+   * Invoke this method to transition the carousel to the previous page,
+   *    if it exists.
+   *
+   * @vegaVersion 1.0.2
+   */
+  async prevPage() {
+    const nextPage = this.page > 1 ? this.page - 1 : this.page;
+    await this.goToPage(nextPage);
+  }
+  /**
+   * Invoke this method to navigate the carousel to the specified page number.
+   *
+   * @param nextPage
+   * @returns {Promise<void>}
+   * @vegaVersion 1.0.6
+   */
+  async goToPage(nextPage) {
+    await this.goToPageInternal(nextPage);
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, h("div", { class: {
+        'carousel-inner': true,
+        'carousel-stop-swipe': !this.canSwipe,
+      }, ref: (el) => (this.listContainer = el) }, h("slot", null)), this.renderIndicatorDom()), this.host);
+  }
+  /**
+   * The function `goToPageInternal` is used to navigate to a specific page in a slideshow, with an optional animation.
+   *
+   * @param {number} nextPage - The `nextPage` parameter is the page number that you want to navigate to. It should be a number between 1 and the total number of pages (`this.totalPages`).
+   * @param {boolean} [needsAnimation=true] - The `needsAnimation` parameter is a boolean value that
+   * indicates whether or not the slide animation should be performed when navigating to the next page.
+   * If `needsAnimation` is `true`, the slide animation will be performed. If `needsAnimation` is
+   * `false`, the slide animation will be disabled
+   */
+  async goToPageInternal(nextPage, needsAnimation = true) {
+    if (nextPage >= 1 && nextPage <= this.totalPages) {
+      if (nextPage !== this.page) {
+        this.page = nextPage;
+        await this.slideTaskQueue.enqueue({
+          run: () => {
+            return this.doSlide(nextPage, needsAnimation);
+          },
+        });
+      }
+    }
+  }
+  renderIndicatorDom() {
+    return (this.showSlider && (h("div", { class: "vega-carousel-indicators-container" }, new Array(this.totalPages).fill('').map((_, index) => {
+      return (h("div", { key: index, class: {
+          'vega-carousel-indicator-active': index + 1 === this.page,
+        }, "data-page": index + 1, role: 'button', "aria-label": "No label defined", tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), onClick: this.onClickIndicators }));
+    }))));
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-carousel-call-observe-method}
+   */
+  /* istanbul ignore next */
+  async updateContentByObserverSlotChange() {
+    const initPage = this.page;
+    const unManagedContentElements = Array.from(this.host.children).filter((element) => !element.classList.contains('carousel-item'));
+    const currentCarouselContentElements = Array.from(this.host.querySelectorAll('.carousel-item vega-grid > div > *'));
+    if (currentCarouselContentElements.length !== this.carouselContentElements.length ||
+      unManagedContentElements.length > 0) {
+      this.carouselContentElements = currentCarouselContentElements.concat(unManagedContentElements);
+      this.updatePageLayout();
+    }
+    await this.goToPageInternal(initPage, false);
+  }
+  wrapChildContentAsCarouselItem() {
+    const carouselItemWrapperList = [];
+    const carouselContentElementArray = this.carouselContentElements;
+    for (let j = 0; j < this.totalPages; j++) {
+      const carouselItemWrapper = document.createElement('vega-grid');
+      carouselItemWrapper.setAttribute('gap', this.spacing);
+      carouselItemWrapper.setAttribute('column', this.currentItemsPerPage.toString());
+      carouselItemWrapper.setAttribute('row', '1');
+      for (let i = j * this.currentItemsPerPage; i < carouselContentElementArray.length && i < this.currentItemsPerPage * (j + 1); i++) {
+        const divInner = document.createElement('div');
+        divInner.appendChild(carouselContentElementArray[i]);
+        carouselItemWrapper.appendChild(divInner);
+      }
+      const divOuter = document.createElement('div');
+      divOuter.classList.add('carousel-item');
+      j === 0 && divOuter.classList.add('active');
+      divOuter.appendChild(carouselItemWrapper);
+      carouselItemWrapperList.push(divOuter);
+    }
+    this.host.replaceChildren(...carouselItemWrapperList);
+  }
+  /**
+   * 1.make targetItem from translateX(-/+100%) to translateX(0).
+   * 2.make activeItem from translateX(0) to translateX(-/+100%).
+   * 3.clear up the added class and mark the current visible item as active.
+   * The below method is e2e-test covered in
+   * @see{module:vega-carousel-do-slide}
+   * @see{module:vega-carousel-do-slide-in-order}
+   */
+  /* istanbul ignore next */
+  doSlide(nextPage, needsAnimation) {
+    return new Promise((resolve, reject) => {
+      const activeItem = this.host.querySelector('.active');
+      const isNext = nextPage - 1 > Array.from(this.host.children).indexOf(activeItem);
+      const targetItem = this.host.children[nextPage - 1];
+      const directionalClassName = isNext ? 'carousel-item-start' : 'carousel-item-end';
+      const orderClassName = isNext ? 'carousel-item-next' : 'carousel-item-prev';
+      if (activeItem && targetItem) {
+        if (needsAnimation) {
+          targetItem.classList.add(orderClassName);
+          reflow(targetItem);
+          targetItem.classList.add(directionalClassName);
+          activeItem.classList.add(directionalClassName);
+          executeAfterTransition(() => {
+            targetItem.classList.remove(directionalClassName, orderClassName);
+            activeItem.classList.remove('active', directionalClassName);
+            targetItem.classList.add('active');
+            resolve();
+          }, activeItem, 600);
+        }
+        else {
+          activeItem.classList.remove('active');
+          reflow(targetItem);
+          targetItem.classList.add('active');
+          resolve();
+        }
+      }
+      else {
+        reject('Cannot find active and target item in carousel list');
+      }
+    });
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-carousel-with-screen-switch-mobile}
+   */
+  /* istanbul ignore next */
+  getCarouselItemsPerPage() {
+    const itemsPerPage = ResponsiveFormatFacade.formatCustom(this.deprecatedPropertySlimmer.getValue());
+    if (itemsPerPage) {
+      return Math.max(1, Math.min(4, itemsPerPage, this.carouselContentElements.length));
+    }
+    else {
+      return 1;
+    }
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "page": ["watchPage"],
+    "perPage": ["watchPerPage"],
+    "itemsPerPage": ["watchItemsPerPage"],
+    "spacing": ["onSpacingPropsChange"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaCarousel.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCarousel.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCarousel.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCarousel.prototype, "pageUpdateEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCarousel.prototype, "deprecatedPropertySlimmer", void 0);
+VegaCarousel.style = vegaCarouselCss;
+
+export { VegaCarousel as vega_carousel };