@empathyco/x-components 3.0.0-alpha.36 → 3.0.0-alpha.360

package/js/services/directional-focus-navigation.service.js.map

@@ -1 +1 @@
-{"version":3,"file":"directional-focus-navigation.service.js","sources":["../../../src/services/directional-focus-navigation.service.ts"],"sourcesContent":["import { ArrowKey } from '../utils/types';\nimport {\n  AbsoluteDistances,\n  Intersection,\n  Point,\n  Points,\n  SpatialNavigation\n} from './services.types';\n\n/**\n * Implementation of {@link SpatialNavigation} using directional focus.\n *\n * @public\n */\nexport class DirectionalFocusNavigationService implements SpatialNavigation {\n  /**\n   * The HTMLElement that is currently on focus and used as reference to navigateTo from.\n   */\n  private origin!: HTMLElement;\n\n  /**\n   * The DOMRect of the origin Element.\n   */\n  private originRect!: DOMRect;\n\n  /**\n   * Direction of the navigation.\n   */\n  private direction!: ArrowKey;\n\n  /**\n   * Weight of the projected intersection area weight in the\n   * {@link DirectionalFocusNavigationService.getDistanceScore | getDistanceScore} formula.\n   */\n  private readonly intersectionAreaWeight = 100;\n\n  /**\n   * Weight of the absolute distance on the orthogonal axis between to elements when navigating\n   * left or right. Used to calculate the displacement in\n   * {@link DirectionalFocusNavigationService.getDisplacementAndAlignment |\n   * getDisplacementAndAlignment}.\n   */\n  private readonly orthogonalWeightHorizontal = 30;\n\n  /**\n   * Weight of the absolute distance on the orthogonal axis between to elements when navigating\n   * up or down. Used to calculate the displacement in\n   * {@link DirectionalFocusNavigationService.getDisplacementAndAlignment |\n   * getDisplacementAndAlignment}.\n   */\n  private readonly orthogonalWeightVertical = 2;\n\n  /**\n   * Weight of the degree of alignment between two elements when calculating the alignment in\n   * {@link DirectionalFocusNavigationService.getDisplacementAndAlignment |\n   * getDisplacementAndAlignment}.\n   */\n  private readonly alignWeight = 5;\n\n  /**\n   * Set of functions to filter out candidates based on the navigation's direction.\n   */\n  private readonly filterFunction = {\n    ArrowUp: (candidateRect: DOMRect) => this.isBelow(this.originRect, candidateRect),\n    ArrowRight: (candidateRect: DOMRect) => this.isRightSide(candidateRect, this.originRect),\n    ArrowDown: (candidateRect: DOMRect) => this.isBelow(candidateRect, this.originRect),\n    ArrowLeft: (candidateRect: DOMRect) => this.isRightSide(this.originRect, candidateRect)\n  };\n\n  /**\n   * Constructor for the {@link DirectionalFocusNavigationService}.\n   *\n   * @param container - The element that contains the navigable elements.\n   * @param focusableSelectors - A comma separated string with the focusable selectors to look up.\n   */\n  public constructor(\n    /**\n     * The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement | HTMLElement} that\n     * contains the navigable elements.\n     */\n    private readonly container: HTMLElement,\n    /**\n     * Comma separated focusable selectors to look up.\n     */\n    // eslint-disable-next-line max-len\n    private readonly focusableSelectors: string = 'a, button, details, input, textarea, select, [tabindex]:not([tabindex=\"-1\"])'\n  ) {}\n\n  /**\n   * Get the element that would be the next one to be navigated to based on the direction of the\n   * arrow key pressed. If there are no possible candidates the element to focus would be the one on\n   * currently on focus or the first one in the container.\n   *\n   * @param arrowKey - The arrow key that was pressed.\n   *\n   * @returns The element to navigate to.\n   */\n  navigateTo(arrowKey: ArrowKey): HTMLElement {\n    const rawCandidates = this.getFocusableElements();\n    this.direction = arrowKey;\n    this.updateOrigin();\n\n    return this.getBestCandidate(rawCandidates);\n  }\n\n  /**\n   * Gets focusable elements within the container.\n   *\n   * @returns List of focusable elements.\n   * @internal\n   */\n  private getFocusableElements(): HTMLElement[] {\n    return Array.from(this.container.querySelectorAll(this.focusableSelectors));\n  }\n\n  /**\n   * Updates the origin with the current document active element.\n   *\n   * @remarks\n   * This also covers cases when the user might have iterated through the DOM using the TAB or\n   * SHIFT+TAB keys.\n   */\n  private updateOrigin(): void {\n    const newOrigin = document.activeElement as HTMLElement;\n    this.origin = newOrigin;\n    this.originRect = newOrigin.getBoundingClientRect();\n  }\n\n  /**\n   * Finds the closest candidate to the origin from a list of candidates.\n   *\n   * @remarks\n   * If there are no candidates the origin will be retrieved as best candidate.\n   *\n   * @param rawCandidates - List of all candidates.\n   *\n   * @returns The closest candidate to the origin or origin if there's none.\n   * @internal\n   */\n  private getBestCandidate(rawCandidates: HTMLElement[]): HTMLElement {\n    const candidates = this.filterCandidates(rawCandidates);\n    let bestCandidate = this.origin;\n\n    candidates.reduce((bestCurrentScore: number, candidate) => {\n      const bestScore = Math.min(bestCurrentScore, this.getDistanceScore(candidate));\n      if (bestScore !== bestCurrentScore) {\n        bestCandidate = candidate;\n      }\n      return bestScore;\n    }, Number.MAX_SAFE_INTEGER);\n\n    return bestCandidate;\n  }\n\n  /**\n   * Filters out candidates that can't be candidates based on the direction of the navigation and\n   * if they are visible and enabled.\n   *\n   * @param rawCandidates - List of all candidates.\n   *\n   * @returns List of filtered candidates.\n   * @internal\n   */\n  private filterCandidates(rawCandidates: HTMLElement[]): HTMLElement[] {\n    return rawCandidates.filter(candidate => this.isValidCandidate(candidate));\n  }\n\n  /**\n   * Checks if the provided candidate is not the origin, is visible, enabled  and in the correct\n   * direction to be a valid candidate.\n   *\n   * @param candidate - The candidate element.\n   * @returns If the candidate is valid for the navigation.\n   * @internal\n   */\n  private isValidCandidate(candidate: HTMLElement): boolean {\n    return (\n      candidate !== this.origin &&\n      this.isCandidateVisible(candidate) &&\n      this.hasFocusCompatibleAttributes(candidate) &&\n      this.isInNavigateDirection(candidate)\n    );\n  }\n\n  /**\n   * Checks if the provided candidate is visible.\n   *\n   * @param candidate - The candidate element.\n   * @returns If the candidate is visible.\n   * @internal\n   */\n  private isCandidateVisible(candidate: HTMLElement): boolean {\n    const candidateStyle = window.getComputedStyle(candidate, null);\n\n    return !!(\n      candidate.offsetWidth &&\n      candidate.offsetHeight &&\n      candidateStyle.visibility === 'visible'\n    );\n  }\n\n  /**\n   * Checks if the provided candidate is disabled and if the tabindex allows the element to be\n   * focused.\n   *\n   * @param candidate - The candidate element.\n   * @returns If candidate's attributes allow it to be focused.\n   * @internal\n   */\n  private hasFocusCompatibleAttributes(candidate: HTMLElement): boolean {\n    return !candidate.getAttribute('disabled') && candidate.getAttribute('tabindex') !== '-1';\n  }\n\n  /**\n   * Checks if the provided candidate is in the direction the navigation is going.\n   *\n   * @param candidate - The candidate element.\n   * @returns If the candidate is in the correct direction.\n   * @internal\n   */\n  private isInNavigateDirection(candidate: HTMLElement): boolean {\n    return this.filterFunction[this.direction](candidate.getBoundingClientRect());\n  }\n\n  /**\n   * Calculates the candidate's score for it to be the next element to navigateTo to based on a\n   * formula that takes into account euclidean distance, displacement, alignment and\n   * intersection area relative to the origin element.\n   *\n   * @param candidate - The candidate element.\n   *\n   * @returns The candidate score for best candidate.\n   * @internal\n   */\n  private getDistanceScore(candidate: HTMLElement): number {\n    const candidateRect = candidate.getBoundingClientRect();\n    const { 0: candidatePoint, 1: originPoint } = this.getComparisionPoints(candidateRect);\n    const absoluteDistances: AbsoluteDistances = {\n      x: Math.abs(candidatePoint.x - originPoint.x),\n      y: Math.abs(candidatePoint.y - originPoint.y)\n    };\n    const euclideanDistance = Math.sqrt(\n      Math.pow(absoluteDistances.x, 2) + Math.pow(absoluteDistances.y, 2)\n    );\n    const intersection = this.getIntersection(this.originRect, candidateRect);\n    const { displacement, alignment } = this.getDisplacementAndAlignment(\n      candidateRect,\n      intersection,\n      absoluteDistances\n    );\n    const projectedArea = Math.sqrt(intersection.area) / this.intersectionAreaWeight;\n\n    return euclideanDistance + displacement - alignment - projectedArea;\n  }\n\n  /**\n   * Gets the closest point to origin within the candidate and to the candidate within the origin\n   * based on the navigation direction.\n   *\n   * @param candidateRect - The DOMRect of the candidate.\n   *\n   * @returns The candidate's closest Points to the origin.\n   * @internal\n   */\n  private getComparisionPoints(candidateRect: DOMRect): Points {\n    const points: Points = [\n      { x: 0, y: 0 },\n      { x: 0, y: 0 }\n    ];\n\n    return {\n      ...this.setParallelPointValues(points, candidateRect),\n      ...this.setOrthogonalPointValues(points, candidateRect)\n    };\n  }\n\n  /**\n   * Set parallel values between candidate and origin based on the navigation direction and\n   * returns them.\n   *\n   * @param points - Current values for the candidate and origin's points.\n   * @param candidateRect - The DOMRect of the candidate.\n   *\n   * @returns Candidate and origin points with parallel values set.\n   * @internal\n   */\n  private setParallelPointValues(\n    { 0: candidatePoint, 1: originPoint }: Points,\n    candidateRect: DOMRect\n  ): Points {\n    switch (this.direction) {\n      case 'ArrowUp':\n        candidatePoint.y = Math.min(candidateRect.bottom, this.originRect.top);\n        originPoint.y = this.originRect.top;\n        break;\n      case 'ArrowDown':\n        candidatePoint.y = Math.max(candidateRect.top, this.originRect.bottom);\n        originPoint.y = this.originRect.bottom;\n        break;\n      case 'ArrowRight':\n        candidatePoint.x = Math.max(candidateRect.left, this.originRect.right);\n        originPoint.x = this.originRect.right;\n        break;\n      case 'ArrowLeft':\n        candidatePoint.x = Math.min(candidateRect.right, this.originRect.left);\n        originPoint.x = this.originRect.left;\n        break;\n    }\n\n    return [candidatePoint, originPoint];\n  }\n\n  /**\n   * Set orthogonal values between candidate and origin based on the navigation direction and\n   * returns them.\n   *\n   * @param points - Current values for the candidate and origin's points.\n   * @param candidateRect - The DOMRect of the candidate.\n   *\n   * @returns Candidate and origin points with orthogonal values set.\n   * @internal\n   */\n  private setOrthogonalPointValues(\n    { 0: candidatePoint, 1: originPoint }: Points,\n    candidateRect: DOMRect\n  ): Points {\n    switch (this.direction) {\n      case 'ArrowUp':\n      case 'ArrowDown':\n        if (this.isRightSide(this.originRect, candidateRect)) {\n          candidatePoint.x = Math.min(candidateRect.right, this.originRect.left);\n          originPoint.x = this.originRect.left;\n        } else if (this.isRightSide(candidateRect, this.originRect)) {\n          candidatePoint.x = Math.max(candidateRect.left, this.originRect.right);\n          originPoint.x = this.originRect.right;\n        } else {\n          candidatePoint.x = Math.max(this.originRect.left, candidateRect.left);\n          originPoint.x = candidatePoint.x;\n        }\n        break;\n\n      case 'ArrowRight':\n      case 'ArrowLeft':\n        if (this.isBelow(this.originRect, candidateRect)) {\n          candidatePoint.y = Math.min(candidateRect.bottom, this.originRect.top);\n          originPoint.y = this.originRect.top;\n        } else if (this.isBelow(candidateRect, this.originRect)) {\n          candidatePoint.y = Math.max(candidateRect.top, this.originRect.bottom);\n          originPoint.y = this.originRect.bottom;\n        } else {\n          candidatePoint.y = Math.max(this.originRect.top, candidateRect.top);\n          originPoint.y = candidatePoint.y;\n        }\n        break;\n    }\n\n    return [candidatePoint, originPoint];\n  }\n\n  /**\n   * Calculates the displacement and alignment values for the candidate relative to the origin.\n   *\n   * @param candidateRect - The DOMRect of the candidate.\n   * @param intersection - Projected intersection between candidate and origin.\n   * @param absoluteDistances - Absolute distances between candidate and origin points.\n   *\n   * @returns Displacement and alignment values.\n   * @internal\n   */\n  private getDisplacementAndAlignment(\n    candidateRect: DOMRect,\n    intersection: Intersection,\n    absoluteDistances: AbsoluteDistances\n  ): { displacement: number; alignment: number } {\n    const areAligned = this.areAligned(this.originRect, candidateRect);\n\n    let alignBias = 0;\n    let orthogonalBias = 0;\n    let displacement = 0;\n\n    switch (this.direction) {\n      case 'ArrowUp':\n      case 'ArrowDown':\n        if (areAligned) {\n          alignBias = Math.min(intersection.width / this.originRect.width, 1);\n        } else {\n          orthogonalBias = this.originRect.width / 2;\n        }\n\n        displacement = (absoluteDistances.x + orthogonalBias) * this.orthogonalWeightVertical;\n        break;\n\n      case 'ArrowRight':\n      case 'ArrowLeft':\n        if (areAligned) {\n          alignBias = Math.min(intersection.height / this.originRect.height, 1);\n        } else {\n          orthogonalBias = this.originRect.height / 2;\n        }\n\n        displacement = (absoluteDistances.y + orthogonalBias) * this.orthogonalWeightHorizontal;\n        break;\n    }\n\n    return { displacement, alignment: alignBias * this.alignWeight };\n  }\n\n  /**\n   * Calculates the projected intersection between two\n   * {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect | rects}.\n   *\n   * @param rect1 - First {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect | rect}.\n   * @param rect2 - Second {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect | rect}.\n   *\n   * @returns The intersection.\n   * @internal\n   */\n  private getIntersection(rect1: DOMRect, rect2: DOMRect): Intersection {\n    const intersection: Intersection = { width: 0, height: 0, area: 0 };\n\n    const topLeftPoint: Point = {\n      x: Math.max(rect1.left, rect2.left),\n      y: Math.max(rect1.top, rect2.top)\n    };\n    const bottomRightPoint: Point = {\n      x: Math.min(rect1.right, rect2.right),\n      y: Math.min(rect1.bottom, rect2.bottom)\n    };\n\n    intersection.width = Math.abs(topLeftPoint.x - bottomRightPoint.x);\n    intersection.height = Math.abs(topLeftPoint.y - bottomRightPoint.y);\n\n    if (topLeftPoint.x < bottomRightPoint.x || topLeftPoint.y < bottomRightPoint.y) {\n      intersection.area = intersection.width * intersection.height;\n    }\n\n    return intersection;\n  }\n\n  /**\n   * Checks that both DOMRect are aligned based on the provided direction.\n   *\n   * @param rect1 - The first DOMRect.\n   * @param rect2 - The DOMRect that the first one will be compared to.\n   *\n   * @returns If the DOMRect are aligned.\n   * @internal\n   */\n  private areAligned(rect1: DOMRect, rect2: DOMRect): boolean {\n    return this.direction === 'ArrowLeft' || this.direction === 'ArrowRight'\n      ? rect1.bottom > rect2.top && rect1.top < rect2.bottom\n      : rect1.right > rect2.left && rect1.left < rect2.right;\n  }\n\n  /**\n   * Checks that the first DOMRect is below the second one.\n   *\n   * @param rect1 - The first DOMRect.\n   * @param rect2 - The DOMRect that the first one will be compared to.\n   *\n   * @returns If it's below.\n   * @internal\n   */\n  private isBelow(rect1: DOMRect, rect2: DOMRect): boolean {\n    return (\n      rect1.top >= rect2.bottom ||\n      (rect1.top >= rect2.top &&\n        rect1.bottom > rect2.bottom &&\n        rect1.left < rect2.right &&\n        rect1.right > rect2.left)\n    );\n  }\n\n  /**\n   * Checks that the first DOMRect is to the right side of the second one.\n   *\n   * @param rect1 - The first DOMRect.\n   * @param rect2 - The DOMRect that the first one will be compared to.\n   *\n   * @returns If it's to the right side.\n   * @internal\n   */\n  private isRightSide(rect1: DOMRect, rect2: DOMRect): boolean {\n    return (\n      rect1.left >= rect2.right ||\n      (rect1.left >= rect2.left &&\n        rect1.right > rect2.right &&\n        rect1.bottom > rect2.top &&\n        rect1.top < rect2.bottom)\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"directional-focus-navigation.service.js","sources":["../../../src/services/directional-focus-navigation.service.ts"],"sourcesContent":["import { FOCUSABLE_SELECTORS } from '../utils/focus';\nimport { ArrowKey } from '../utils/types';\nimport {\n  AbsoluteDistances,\n  Intersection,\n  Point,\n  Points,\n  SpatialNavigation\n} from './services.types';\n\n/**\n * Implementation of {@link SpatialNavigation} using directional focus.\n *\n * @public\n */\nexport class DirectionalFocusNavigationService implements SpatialNavigation {\n  /**\n   * The HTMLElement that is currently on focus and used as reference to navigateTo from.\n   */\n  private origin!: HTMLElement;\n\n  /**\n   * The DOMRect of the origin Element.\n   */\n  private originRect!: DOMRect;\n\n  /**\n   * Direction of the navigation.\n   */\n  private direction!: ArrowKey;\n\n  /**\n   * Weight of the projected intersection area weight in the\n   * {@link DirectionalFocusNavigationService.getDistanceScore | getDistanceScore} formula.\n   */\n  private readonly intersectionAreaWeight = 100;\n\n  /**\n   * Weight of the absolute distance on the orthogonal axis between to elements when navigating\n   * left or right. Used to calculate the displacement in\n   * {@link DirectionalFocusNavigationService.getDisplacementAndAlignment |\n   * getDisplacementAndAlignment}.\n   */\n  private readonly orthogonalWeightHorizontal = 30;\n\n  /**\n   * Weight of the absolute distance on the orthogonal axis between to elements when navigating\n   * up or down. Used to calculate the displacement in\n   * {@link DirectionalFocusNavigationService.getDisplacementAndAlignment |\n   * getDisplacementAndAlignment}.\n   */\n  private readonly orthogonalWeightVertical = 2;\n\n  /**\n   * Weight of the degree of alignment between two elements when calculating the alignment in\n   * {@link DirectionalFocusNavigationService.getDisplacementAndAlignment |\n   * getDisplacementAndAlignment}.\n   */\n  private readonly alignWeight = 5;\n\n  /**\n   * Set of functions to filter out candidates based on the navigation's direction.\n   */\n  private readonly filterFunction = {\n    ArrowUp: (candidateRect: DOMRect) => this.isBelow(this.originRect, candidateRect),\n    ArrowRight: (candidateRect: DOMRect) => this.isRightSide(candidateRect, this.originRect),\n    ArrowDown: (candidateRect: DOMRect) => this.isBelow(candidateRect, this.originRect),\n    ArrowLeft: (candidateRect: DOMRect) => this.isRightSide(this.originRect, candidateRect)\n  };\n\n  /**\n   * Constructor for the {@link DirectionalFocusNavigationService}.\n   *\n   * @param container - The element that contains the navigable elements.\n   * @param focusableSelectors - A comma separated string with the focusable selectors to look up.\n   */\n  public constructor(\n    /**\n     * The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement | HTMLElement} that\n     * contains the navigable elements.\n     */\n    private readonly container: HTMLElement,\n    /**\n     * Comma separated focusable selectors to look up.\n     */\n    private readonly focusableSelectors = FOCUSABLE_SELECTORS\n  ) {}\n\n  /**\n   * Get the element that would be the next one to be navigated to based on the direction of the\n   * arrow key pressed. If there are no possible candidates the element to focus would be the one on\n   * currently on focus or the first one in the container.\n   *\n   * @param arrowKey - The arrow key that was pressed.\n   *\n   * @returns The element to navigate to.\n   */\n  navigateTo(arrowKey: ArrowKey): HTMLElement {\n    const rawCandidates = this.getFocusableElements();\n    this.direction = arrowKey;\n    this.updateOrigin();\n\n    return this.getBestCandidate(rawCandidates);\n  }\n\n  /**\n   * Gets focusable elements within the container.\n   *\n   * @returns List of focusable elements.\n   * @internal\n   */\n  private getFocusableElements(): HTMLElement[] {\n    return Array.from(this.container.querySelectorAll(this.focusableSelectors));\n  }\n\n  /**\n   * Updates the origin with the current document active element.\n   *\n   * @remarks\n   * This also covers cases when the user might have iterated through the DOM using the TAB or\n   * SHIFT+TAB keys.\n   */\n  private updateOrigin(): void {\n    const newOrigin = document.activeElement as HTMLElement;\n    this.origin = newOrigin;\n    this.originRect = newOrigin.getBoundingClientRect();\n  }\n\n  /**\n   * Finds the closest candidate to the origin from a list of candidates.\n   *\n   * @remarks\n   * If there are no candidates the origin will be retrieved as best candidate.\n   *\n   * @param rawCandidates - List of all candidates.\n   *\n   * @returns The closest candidate to the origin or origin if there's none.\n   * @internal\n   */\n  private getBestCandidate(rawCandidates: HTMLElement[]): HTMLElement {\n    const candidates = this.filterCandidates(rawCandidates);\n    let bestCandidate = this.origin;\n\n    candidates.reduce((bestCurrentScore: number, candidate) => {\n      const bestScore = Math.min(bestCurrentScore, this.getDistanceScore(candidate));\n      if (bestScore !== bestCurrentScore) {\n        bestCandidate = candidate;\n      }\n      return bestScore;\n    }, Number.MAX_SAFE_INTEGER);\n\n    return bestCandidate;\n  }\n\n  /**\n   * Filters out candidates that can't be candidates based on the direction of the navigation and\n   * if they are visible and enabled.\n   *\n   * @param rawCandidates - List of all candidates.\n   *\n   * @returns List of filtered candidates.\n   * @internal\n   */\n  private filterCandidates(rawCandidates: HTMLElement[]): HTMLElement[] {\n    return rawCandidates.filter(candidate => this.isValidCandidate(candidate));\n  }\n\n  /**\n   * Checks if the provided candidate is not the origin, is visible, enabled  and in the correct\n   * direction to be a valid candidate.\n   *\n   * @param candidate - The candidate element.\n   * @returns If the candidate is valid for the navigation.\n   * @internal\n   */\n  private isValidCandidate(candidate: HTMLElement): boolean {\n    return (\n      candidate !== this.origin &&\n      this.isCandidateVisible(candidate) &&\n      this.hasFocusCompatibleAttributes(candidate) &&\n      this.isInNavigateDirection(candidate)\n    );\n  }\n\n  /**\n   * Checks if the provided candidate is visible.\n   *\n   * @param candidate - The candidate element.\n   * @returns If the candidate is visible.\n   * @internal\n   */\n  private isCandidateVisible(candidate: HTMLElement): boolean {\n    const candidateStyle = window.getComputedStyle(candidate, null);\n\n    return !!(\n      candidate.offsetWidth &&\n      candidate.offsetHeight &&\n      candidateStyle.visibility === 'visible'\n    );\n  }\n\n  /**\n   * Checks if the provided candidate is disabled and if the tabindex allows the element to be\n   * focused.\n   *\n   * @param candidate - The candidate element.\n   * @returns If candidate's attributes allow it to be focused.\n   * @internal\n   */\n  private hasFocusCompatibleAttributes(candidate: HTMLElement): boolean {\n    return !candidate.getAttribute('disabled') && candidate.getAttribute('tabindex') !== '-1';\n  }\n\n  /**\n   * Checks if the provided candidate is in the direction the navigation is going.\n   *\n   * @param candidate - The candidate element.\n   * @returns If the candidate is in the correct direction.\n   * @internal\n   */\n  private isInNavigateDirection(candidate: HTMLElement): boolean {\n    return this.filterFunction[this.direction](candidate.getBoundingClientRect());\n  }\n\n  /**\n   * Calculates the candidate's score for it to be the next element to navigateTo to based on a\n   * formula that takes into account euclidean distance, displacement, alignment and\n   * intersection area relative to the origin element.\n   *\n   * @param candidate - The candidate element.\n   *\n   * @returns The candidate score for best candidate.\n   * @internal\n   */\n  private getDistanceScore(candidate: HTMLElement): number {\n    const candidateRect = candidate.getBoundingClientRect();\n    const { 0: candidatePoint, 1: originPoint } = this.getComparisionPoints(candidateRect);\n    const absoluteDistances: AbsoluteDistances = {\n      x: Math.abs(candidatePoint.x - originPoint.x),\n      y: Math.abs(candidatePoint.y - originPoint.y)\n    };\n    const euclideanDistance = Math.sqrt(\n      Math.pow(absoluteDistances.x, 2) + Math.pow(absoluteDistances.y, 2)\n    );\n    const intersection = this.getIntersection(this.originRect, candidateRect);\n    const { displacement, alignment } = this.getDisplacementAndAlignment(\n      candidateRect,\n      intersection,\n      absoluteDistances\n    );\n    const projectedArea = Math.sqrt(intersection.area) / this.intersectionAreaWeight;\n\n    return euclideanDistance + displacement - alignment - projectedArea;\n  }\n\n  /**\n   * Gets the closest point to origin within the candidate and to the candidate within the origin\n   * based on the navigation direction.\n   *\n   * @param candidateRect - The DOMRect of the candidate.\n   *\n   * @returns The candidate's closest Points to the origin.\n   * @internal\n   */\n  private getComparisionPoints(candidateRect: DOMRect): Points {\n    const points: Points = [\n      { x: 0, y: 0 },\n      { x: 0, y: 0 }\n    ];\n\n    return {\n      ...this.setParallelPointValues(points, candidateRect),\n      ...this.setOrthogonalPointValues(points, candidateRect)\n    };\n  }\n\n  /**\n   * Set parallel values between candidate and origin based on the navigation direction and\n   * returns them.\n   *\n   * @param points - Current values for the candidate and origin's points.\n   * @param candidateRect - The DOMRect of the candidate.\n   *\n   * @returns Candidate and origin points with parallel values set.\n   * @internal\n   */\n  private setParallelPointValues(\n    { 0: candidatePoint, 1: originPoint }: Points,\n    candidateRect: DOMRect\n  ): Points {\n    switch (this.direction) {\n      case 'ArrowUp':\n        candidatePoint.y = Math.min(candidateRect.bottom, this.originRect.top);\n        originPoint.y = this.originRect.top;\n        break;\n      case 'ArrowDown':\n        candidatePoint.y = Math.max(candidateRect.top, this.originRect.bottom);\n        originPoint.y = this.originRect.bottom;\n        break;\n      case 'ArrowRight':\n        candidatePoint.x = Math.max(candidateRect.left, this.originRect.right);\n        originPoint.x = this.originRect.right;\n        break;\n      case 'ArrowLeft':\n        candidatePoint.x = Math.min(candidateRect.right, this.originRect.left);\n        originPoint.x = this.originRect.left;\n        break;\n    }\n\n    return [candidatePoint, originPoint];\n  }\n\n  /**\n   * Set orthogonal values between candidate and origin based on the navigation direction and\n   * returns them.\n   *\n   * @param points - Current values for the candidate and origin's points.\n   * @param candidateRect - The DOMRect of the candidate.\n   *\n   * @returns Candidate and origin points with orthogonal values set.\n   * @internal\n   */\n  private setOrthogonalPointValues(\n    { 0: candidatePoint, 1: originPoint }: Points,\n    candidateRect: DOMRect\n  ): Points {\n    switch (this.direction) {\n      case 'ArrowUp':\n      case 'ArrowDown':\n        if (this.isRightSide(this.originRect, candidateRect)) {\n          candidatePoint.x = Math.min(candidateRect.right, this.originRect.left);\n          originPoint.x = this.originRect.left;\n        } else if (this.isRightSide(candidateRect, this.originRect)) {\n          candidatePoint.x = Math.max(candidateRect.left, this.originRect.right);\n          originPoint.x = this.originRect.right;\n        } else {\n          candidatePoint.x = Math.max(this.originRect.left, candidateRect.left);\n          originPoint.x = candidatePoint.x;\n        }\n        break;\n\n      case 'ArrowRight':\n      case 'ArrowLeft':\n        if (this.isBelow(this.originRect, candidateRect)) {\n          candidatePoint.y = Math.min(candidateRect.bottom, this.originRect.top);\n          originPoint.y = this.originRect.top;\n        } else if (this.isBelow(candidateRect, this.originRect)) {\n          candidatePoint.y = Math.max(candidateRect.top, this.originRect.bottom);\n          originPoint.y = this.originRect.bottom;\n        } else {\n          candidatePoint.y = Math.max(this.originRect.top, candidateRect.top);\n          originPoint.y = candidatePoint.y;\n        }\n        break;\n    }\n\n    return [candidatePoint, originPoint];\n  }\n\n  /**\n   * Calculates the displacement and alignment values for the candidate relative to the origin.\n   *\n   * @param candidateRect - The DOMRect of the candidate.\n   * @param intersection - Projected intersection between candidate and origin.\n   * @param absoluteDistances - Absolute distances between candidate and origin points.\n   *\n   * @returns Displacement and alignment values.\n   * @internal\n   */\n  private getDisplacementAndAlignment(\n    candidateRect: DOMRect,\n    intersection: Intersection,\n    absoluteDistances: AbsoluteDistances\n  ): { displacement: number; alignment: number } {\n    const areAligned = this.areAligned(this.originRect, candidateRect);\n\n    let alignBias = 0;\n    let orthogonalBias = 0;\n    let displacement = 0;\n\n    switch (this.direction) {\n      case 'ArrowUp':\n      case 'ArrowDown':\n        if (areAligned) {\n          alignBias = Math.min(intersection.width / this.originRect.width, 1);\n        } else {\n          orthogonalBias = this.originRect.width / 2;\n        }\n\n        displacement = (absoluteDistances.x + orthogonalBias) * this.orthogonalWeightVertical;\n        break;\n\n      case 'ArrowRight':\n      case 'ArrowLeft':\n        if (areAligned) {\n          alignBias = Math.min(intersection.height / this.originRect.height, 1);\n        } else {\n          orthogonalBias = this.originRect.height / 2;\n        }\n\n        displacement = (absoluteDistances.y + orthogonalBias) * this.orthogonalWeightHorizontal;\n        break;\n    }\n\n    return { displacement, alignment: alignBias * this.alignWeight };\n  }\n\n  /**\n   * Calculates the projected intersection between two\n   * {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect | rects}.\n   *\n   * @param rect1 - First {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect | rect}.\n   * @param rect2 - Second {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect | rect}.\n   *\n   * @returns The intersection.\n   * @internal\n   */\n  private getIntersection(rect1: DOMRect, rect2: DOMRect): Intersection {\n    const intersection: Intersection = { width: 0, height: 0, area: 0 };\n\n    const topLeftPoint: Point = {\n      x: Math.max(rect1.left, rect2.left),\n      y: Math.max(rect1.top, rect2.top)\n    };\n    const bottomRightPoint: Point = {\n      x: Math.min(rect1.right, rect2.right),\n      y: Math.min(rect1.bottom, rect2.bottom)\n    };\n\n    intersection.width = Math.abs(topLeftPoint.x - bottomRightPoint.x);\n    intersection.height = Math.abs(topLeftPoint.y - bottomRightPoint.y);\n\n    if (topLeftPoint.x < bottomRightPoint.x || topLeftPoint.y < bottomRightPoint.y) {\n      intersection.area = intersection.width * intersection.height;\n    }\n\n    return intersection;\n  }\n\n  /**\n   * Checks that both DOMRect are aligned based on the provided direction.\n   *\n   * @param rect1 - The first DOMRect.\n   * @param rect2 - The DOMRect that the first one will be compared to.\n   *\n   * @returns If the DOMRect are aligned.\n   * @internal\n   */\n  private areAligned(rect1: DOMRect, rect2: DOMRect): boolean {\n    return this.direction === 'ArrowLeft' || this.direction === 'ArrowRight'\n      ? rect1.bottom > rect2.top && rect1.top < rect2.bottom\n      : rect1.right > rect2.left && rect1.left < rect2.right;\n  }\n\n  /**\n   * Checks that the first DOMRect is below the second one.\n   *\n   * @param rect1 - The first DOMRect.\n   * @param rect2 - The DOMRect that the first one will be compared to.\n   *\n   * @returns If it's below.\n   * @internal\n   */\n  private isBelow(rect1: DOMRect, rect2: DOMRect): boolean {\n    return (\n      rect1.top >= rect2.bottom ||\n      (rect1.top >= rect2.top &&\n        rect1.bottom > rect2.bottom &&\n        rect1.left < rect2.right &&\n        rect1.right > rect2.left)\n    );\n  }\n\n  /**\n   * Checks that the first DOMRect is to the right side of the second one.\n   *\n   * @param rect1 - The first DOMRect.\n   * @param rect2 - The DOMRect that the first one will be compared to.\n   *\n   * @returns If it's to the right side.\n   * @internal\n   */\n  private isRightSide(rect1: DOMRect, rect2: DOMRect): boolean {\n    return (\n      rect1.left >= rect2.right ||\n      (rect1.left >= rect2.left &&\n        rect1.right > rect2.right &&\n        rect1.bottom > rect2.top &&\n        rect1.top < rect2.bottom)\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/js/services/state-machine.service.js

@@ -0,0 +1,30 @@
+/**
+ * Default implementation for the {@link StateMachine}.
+ *
+ * @public
+ */
+class StateMachine {
+    constructor(machine) {
+        this.machine = machine;
+        this.currentState = machine.initial;
+    }
+    /**
+     * Determines which state will be the next to be transitioned.
+     *
+     * @param event - The event to determine which state is the new one to be
+     * transitioned.
+     *
+     * @public
+     */
+    transition(event) {
+        const currentState = this.machine.states[this.currentState];
+        if (currentState[event]) {
+            /* Typescript is not detecting the type guard in the previous if
+            so we have to force it to be defined */
+            this.currentState = currentState[event];
+        }
+    }
+}
+
+export { StateMachine };
+//# sourceMappingURL=state-machine.service.js.map

package/js/services/state-machine.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-machine.service.js","sources":["../../../src/services/state-machine.service.ts"],"sourcesContent":["import { Machine } from './services.types';\n\n/**\n * Default implementation for the {@link StateMachine}.\n *\n * @public\n */\nexport class StateMachine<SomeStatus extends string, SomeEvent extends string> {\n  /**\n   * A {@link Machine} having the different steps transition.\n   *\n   * @internal\n   */\n  private machine: Machine<SomeStatus, SomeEvent>;\n  /**\n   * The current state of the machine.\n   *\n   * @public\n   */\n  public currentState: SomeStatus;\n\n  public constructor(machine: Machine<SomeStatus, SomeEvent>) {\n    this.machine = machine;\n    this.currentState = machine.initial;\n  }\n\n  /**\n   * Determines which state will be the next to be transitioned.\n   *\n   * @param event - The event to determine which state is the new one to be\n   * transitioned.\n   *\n   * @public\n   */\n  transition(event: SomeEvent): void {\n    const currentState = this.machine.states[this.currentState];\n    if (currentState[event]) {\n      /* Typescript is not detecting the type guard in the previous if\n      so we have to force it to be defined */\n      this.currentState = currentState[event]!;\n    }\n  }\n}\n"],"names":[],"mappings":"AAEA;;;;AAIG;MACU,YAAY,CAAA;AAcvB,IAAA,WAAA,CAAmB,OAAuC,EAAA;AACxD,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;AACvB,QAAA,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC;KACrC;AAED;;;;;;;AAOG;AACH,IAAA,UAAU,CAAC,KAAgB,EAAA;AACzB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;AAC5D,QAAA,IAAI,YAAY,CAAC,KAAK,CAAC,EAAE;AACvB;AACuC;AACvC,YAAA,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,KAAK,CAAE,CAAC;AAC1C,SAAA;KACF;AACF;;;;"}

package/js/store/utils/fetch-and-save-action.utils.js

@@ -5,12 +5,16 @@ import { cancellablePromise, CancelSymbol } from '../../utils/cancellable-promis
  * option to cancel the request at any moment. This factory provides with the standard flow
  * for requesting, cancelling, handling errors for a module, while also taking care of its status.
  *
+ * @param hooks - The {@link FetchAndSaveHooks} hooks to create the action.
+ *
  * @public
  * @returns An action to fetch and save some data, and an action to cancel the last request.
  */
-function createFetchAndSaveActions(_a) {
-    var fetch = _a.fetch, onSuccess = _a.onSuccess, onError = _a.onError, onCancel = _a.onCancel;
-    var cancelPreviousRequest;
+function createFetchAndSaveActions({ fetch, onSuccess, 
+// TODO add logger
+// eslint-disable-next-line no-console
+onError = console.error, onCancel }) {
+    let cancelPreviousRequest;
     /**
      * Called asynchronously after a response has been received.
      *
@@ -20,7 +24,7 @@ function createFetchAndSaveActions(_a) {
      * @returns A Promise that resolves after handling the response.
      */
     function handleResponse(context, response) {
-        return Promise.resolve(onSuccess(context, response)).then(function () {
+        return Promise.resolve(onSuccess(context, response)).then(() => {
             context.commit('setStatus', 'success');
         });
     }
@@ -33,7 +37,7 @@ function createFetchAndSaveActions(_a) {
     function handleCancel(context) {
         cancelPreviousRequest = undefined;
         context.commit('setStatus', 'success');
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        onCancel?.();
     }
     /**
      * Called asynchronously whenever an error happens in the fetch and save flow.
@@ -45,7 +49,7 @@ function createFetchAndSaveActions(_a) {
     function handleError(context, error) {
         if (error !== CancelSymbol) {
             context.commit('setStatus', 'error');
-            onError === null || onError === void 0 ? void 0 : onError(error);
+            onError(error);
         }
     }
     // eslint-disable-next-line
@@ -53,22 +57,22 @@ function createFetchAndSaveActions(_a) {
     function fetchAndSave(context, request) {
         cancelPrevious();
         context.commit('setStatus', 'loading');
-        var _a = cancellablePromise(fetch(context, request), function () {
+        const { promise, cancel } = cancellablePromise(fetch(context, request), () => {
             handleCancel(context);
-        }), promise = _a.promise, cancel = _a.cancel;
+        });
         cancelPreviousRequest = cancel;
         return promise
-            .then(function (response) { return handleResponse(context, response); })
-            .catch(function (error) { return handleError(context, error); });
+            .then(response => handleResponse(context, response))
+            .catch(error => handleError(context, error));
     }
     // eslint-disable-next-line
     /** @see FetchAndSaveActions.cancelPrevious */
     function cancelPrevious() {
-        cancelPreviousRequest === null || cancelPreviousRequest === void 0 ? void 0 : cancelPreviousRequest();
+        cancelPreviousRequest?.();
     }
     return {
-        fetchAndSave: fetchAndSave,
-        cancelPrevious: cancelPrevious
+        fetchAndSave,
+        cancelPrevious
     };
 }
 

package/js/store/utils/fetch-and-save-action.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"fetch-and-save-action.utils.js","sources":["../../../../src/store/utils/fetch-and-save-action.utils.ts"],"sourcesContent":["import { cancellablePromise, CancelSymbol } from '../../utils/cancellable-promise';\nimport { XActionContext } from '../actions.types';\nimport { StatusMutations, StatusState } from './status-store.utils';\n\n/**\n * Utility to create an action that requests and save some data asynchronously, with the\n * option to cancel the request at any moment. This factory provides with the standard flow\n * for requesting, cancelling, handling errors for a module, while also taking care of its status.\n *\n * @public\n * @returns An action to fetch and save some data, and an action to cancel the last request.\n */\nexport function createFetchAndSaveActions<\n  // Using `object` type to ensure no actions/getters can be used.\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  Context extends XActionContext<StatusState, object, StatusMutations, object>,\n  Request,\n  Response\n>({\n  fetch,\n  onSuccess,\n  onError,\n  onCancel\n}: FetchAndSaveHooks<Context, Request, Response>): FetchAndSaveActions<Context, Request> {\n  let cancelPreviousRequest: undefined | (() => void);\n\n  /**\n   * Called asynchronously after a response has been received.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param response - The fetch response.\n   * @returns A Promise that resolves after handling the response.\n   */\n  function handleResponse(context: Context, response: Response): Promise<void> {\n    return Promise.resolve(onSuccess(context, response)).then(() => {\n      context.commit('setStatus', 'success');\n    });\n  }\n\n  /**\n   * Called immediately after a request has been cancelled.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   */\n  function handleCancel(context: Context): void {\n    cancelPreviousRequest = undefined;\n    context.commit('setStatus', 'success');\n    onCancel?.();\n  }\n\n  /**\n   * Called asynchronously whenever an error happens in the fetch and save flow.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param error - The error information.\n   */\n  function handleError(context: Context, error: unknown): void {\n    if (error !== CancelSymbol) {\n      context.commit('setStatus', 'error');\n      onError?.(error);\n    }\n  }\n\n  // eslint-disable-next-line\n  /** @see FetchAndSaveActions.fetchAndSave */\n  function fetchAndSave(context: Context, request: Request): Promise<void> {\n    cancelPrevious();\n    context.commit('setStatus', 'loading');\n    const { promise, cancel } = cancellablePromise(fetch(context, request), () => {\n      handleCancel(context);\n    });\n\n    cancelPreviousRequest = cancel;\n    return promise\n      .then(response => handleResponse(context, response))\n      .catch(error => handleError(context, error));\n  }\n\n  // eslint-disable-next-line\n  /** @see FetchAndSaveActions.cancelPrevious */\n  function cancelPrevious(): void {\n    cancelPreviousRequest?.();\n  }\n\n  return {\n    fetchAndSave,\n    cancelPrevious\n  };\n}\n\n/**\n * Options to use with the {@link createFetchAndSaveActions} factory.\n *\n * @public\n */\nexport interface FetchAndSaveHooks<\n  // Using `object` type to ensure no actions/getters can be used.\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  Context extends XActionContext<StatusState, object, StatusMutations, object>,\n  Request,\n  Response\n> {\n  /**\n   * Retrieves and returns asynchronously some data.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param request - The request object used for fetching.\n   * @returns A Promise resolved with the response of the fetch request.\n   */\n  fetch(context: Context, request: Request): Promise<Response>;\n  /**\n   * Asynchronous callback executed when the {@link FetchAndSaveHooks.fetch} is\n   * performed successfully.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param response - The data returned by {@link FetchAndSaveHooks.fetch}.\n   */\n  onSuccess(context: Context, response: Response): void;\n  /**\n   * Asynchronous callback executed when either the {@link FetchAndSaveHooks.fetch}\n   * or {@link FetchAndSaveHooks.onSuccess} methods fail.\n   *\n   * @param error - The error that triggered this callback.\n   */\n  onError?(error: unknown): void;\n  /**\n   * Synchronous callback executed when the request is cancelled. This can happen mainly for two\n   * reasons:\n   * - The {@link FetchAndSaveActions.cancelPrevious} action is dispatched.\n   * - A new {@link FetchAndSaveActions.fetchAndSave} is dispatched before the previous one was\n   * resolved.\n   */\n  onCancel?(): void;\n}\n\n/**\n * Actions returned from the {@link createFetchAndSaveActions}.\n *\n * @public\n */\nexport interface FetchAndSaveActions<\n  // Using `object` type to ensure no actions/getters can be used.\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  Context extends XActionContext<StatusState, object, StatusMutations, object>,\n  Request\n> {\n  /**\n   * Action that requests and saves the response.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @returns A promise that resolves after saving the response.\n   */\n  fetchAndSave: (context: Context, request: Request) => void | Promise<void>;\n  /**\n   * Action that cancels the previous request call if it stills in progress.\n   */\n  cancelPrevious: () => void;\n}\n"],"names":[],"mappings":";;AAIA;;;;;;;;SAQgB,yBAAyB,CAMvC,EAK8C;QAJ9C,KAAK,WAAA,EACL,SAAS,eAAA,EACT,OAAO,aAAA,EACP,QAAQ,cAAA;IAER,IAAI,qBAA+C,CAAC;;;;;;;;;IAUpD,SAAS,cAAc,CAAC,OAAgB,EAAE,QAAkB;QAC1D,OAAO,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;YACxD,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;SACxC,CAAC,CAAC;KACJ;;;;;;;IAQD,SAAS,YAAY,CAAC,OAAgB;QACpC,qBAAqB,GAAG,SAAS,CAAC;QAClC,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACvC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;KACd;;;;;;;;IASD,SAAS,WAAW,CAAC,OAAgB,EAAE,KAAc;QACnD,IAAI,KAAK,KAAK,YAAY,EAAE;YAC1B,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;YACrC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;SAClB;KACF;;;IAID,SAAS,YAAY,CAAC,OAAgB,EAAE,OAAgB;QACtD,cAAc,EAAE,CAAC;QACjB,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACjC,IAAA,KAAsB,kBAAkB,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE;YACtE,YAAY,CAAC,OAAO,CAAC,CAAC;SACvB,CAAC,EAFM,OAAO,aAAA,EAAE,MAAM,YAErB,CAAC;QAEH,qBAAqB,GAAG,MAAM,CAAC;QAC/B,OAAO,OAAO;aACX,IAAI,CAAC,UAAA,QAAQ,IAAI,OAAA,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAA,CAAC;aACnD,KAAK,CAAC,UAAA,KAAK,IAAI,OAAA,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,GAAA,CAAC,CAAC;KAChD;;;IAID,SAAS,cAAc;QACrB,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,EAAI,CAAC;KAC3B;IAED,OAAO;QACL,YAAY,cAAA;QACZ,cAAc,gBAAA;KACf,CAAC;AACJ;;;;"}
+{"version":3,"file":"fetch-and-save-action.utils.js","sources":["../../../../src/store/utils/fetch-and-save-action.utils.ts"],"sourcesContent":["import { cancellablePromise, CancelSymbol } from '../../utils/cancellable-promise';\nimport { XActionContext } from '../actions.types';\nimport { StatusMutations, StatusState } from './status-store.utils';\n\n/**\n * Utility to create an action that requests and save some data asynchronously, with the\n * option to cancel the request at any moment. This factory provides with the standard flow\n * for requesting, cancelling, handling errors for a module, while also taking care of its status.\n *\n * @param hooks - The {@link FetchAndSaveHooks} hooks to create the action.\n *\n * @public\n * @returns An action to fetch and save some data, and an action to cancel the last request.\n */\nexport function createFetchAndSaveActions<\n  // Using `object` type to ensure no actions/getters can be used.\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  Context extends XActionContext<StatusState, object, StatusMutations, object>,\n  Request,\n  Response\n>({\n  fetch,\n  onSuccess,\n  // TODO add logger\n  // eslint-disable-next-line no-console\n  onError = console.error,\n  onCancel\n}: FetchAndSaveHooks<Context, Request, Response>): FetchAndSaveActions<Context, Request> {\n  let cancelPreviousRequest: undefined | (() => void);\n\n  /**\n   * Called asynchronously after a response has been received.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param response - The fetch response.\n   * @returns A Promise that resolves after handling the response.\n   */\n  function handleResponse(context: Context, response: Response): Promise<void> {\n    return Promise.resolve(onSuccess(context, response)).then(() => {\n      context.commit('setStatus', 'success');\n    });\n  }\n\n  /**\n   * Called immediately after a request has been cancelled.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   */\n  function handleCancel(context: Context): void {\n    cancelPreviousRequest = undefined;\n    context.commit('setStatus', 'success');\n    onCancel?.();\n  }\n\n  /**\n   * Called asynchronously whenever an error happens in the fetch and save flow.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param error - The error information.\n   */\n  function handleError(context: Context, error: unknown): void {\n    if (error !== CancelSymbol) {\n      context.commit('setStatus', 'error');\n      onError(error);\n    }\n  }\n\n  // eslint-disable-next-line\n  /** @see FetchAndSaveActions.fetchAndSave */\n  function fetchAndSave(context: Context, request: Request): Promise<void> {\n    cancelPrevious();\n    context.commit('setStatus', 'loading');\n    const { promise, cancel } = cancellablePromise(fetch(context, request), () => {\n      handleCancel(context);\n    });\n\n    cancelPreviousRequest = cancel;\n    return promise\n      .then(response => handleResponse(context, response))\n      .catch(error => handleError(context, error));\n  }\n\n  // eslint-disable-next-line\n  /** @see FetchAndSaveActions.cancelPrevious */\n  function cancelPrevious(): void {\n    cancelPreviousRequest?.();\n  }\n\n  return {\n    fetchAndSave,\n    cancelPrevious\n  };\n}\n\n/**\n * Options to use with the {@link createFetchAndSaveActions} factory.\n *\n * @public\n */\nexport interface FetchAndSaveHooks<\n  // Using `object` type to ensure no actions/getters can be used.\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  Context extends XActionContext<StatusState, object, StatusMutations, object>,\n  Request,\n  Response\n> {\n  /**\n   * Retrieves and returns asynchronously some data.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param request - The request object used for fetching.\n   * @returns A Promise resolved with the response of the fetch request.\n   */\n  fetch(context: Context, request: Request): Promise<Response>;\n  /**\n   * Asynchronous callback executed when the {@link FetchAndSaveHooks.fetch} is\n   * performed successfully.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param response - The data returned by {@link FetchAndSaveHooks.fetch}.\n   */\n  onSuccess(context: Context, response: Response): void;\n  /**\n   * Asynchronous callback executed when either the {@link FetchAndSaveHooks.fetch}\n   * or {@link FetchAndSaveHooks.onSuccess} methods fail.\n   *\n   * @param error - The error that triggered this callback.\n   */\n  onError?(error: unknown): void;\n  /**\n   * Synchronous callback executed when the request is cancelled. This can happen mainly for two\n   * reasons:\n   * - The {@link FetchAndSaveActions.cancelPrevious} action is dispatched.\n   * - A new {@link FetchAndSaveActions.fetchAndSave} is dispatched before the previous one was\n   * resolved.\n   */\n  onCancel?(): void;\n}\n\n/**\n * Actions returned from the {@link createFetchAndSaveActions}.\n *\n * @public\n */\nexport interface FetchAndSaveActions<\n  // Using `object` type to ensure no actions/getters can be used.\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  Context extends XActionContext<StatusState, object, StatusMutations, object>,\n  Request\n> {\n  /**\n   * Action that requests and saves the response.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @returns A promise that resolves after saving the response.\n   */\n  fetchAndSave: (context: Context, request: Request) => void | Promise<void>;\n  /**\n   * Action that cancels the previous request call if it stills in progress.\n   */\n  cancelPrevious: () => void;\n}\n"],"names":[],"mappings":";;AAIA;;;;;;;;;AASG;SACa,yBAAyB,CAMvC,EACA,KAAK,EACL,SAAS;AACT;AACA;AACA,OAAO,GAAG,OAAO,CAAC,KAAK,EACvB,QAAQ,EACsC,EAAA;AAC9C,IAAA,IAAI,qBAA+C,CAAC;AAEpD;;;;;;;AAOG;AACH,IAAA,SAAS,cAAc,CAAC,OAAgB,EAAE,QAAkB,EAAA;AAC1D,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAK;AAC7D,YAAA,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AACzC,SAAC,CAAC,CAAC;KACJ;AAED;;;;;AAKG;IACH,SAAS,YAAY,CAAC,OAAgB,EAAA;QACpC,qBAAqB,GAAG,SAAS,CAAC;AAClC,QAAA,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACvC,QAAQ,IAAI,CAAC;KACd;AAED;;;;;;AAMG;AACH,IAAA,SAAS,WAAW,CAAC,OAAgB,EAAE,KAAc,EAAA;QACnD,IAAI,KAAK,KAAK,YAAY,EAAE;AAC1B,YAAA,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;YACrC,OAAO,CAAC,KAAK,CAAC,CAAC;AAChB,SAAA;KACF;;;AAID,IAAA,SAAS,YAAY,CAAC,OAAgB,EAAE,OAAgB,EAAA;AACtD,QAAA,cAAc,EAAE,CAAC;AACjB,QAAA,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AACvC,QAAA,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,kBAAkB,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,MAAK;YAC3E,YAAY,CAAC,OAAO,CAAC,CAAC;AACxB,SAAC,CAAC,CAAC;QAEH,qBAAqB,GAAG,MAAM,CAAC;AAC/B,QAAA,OAAO,OAAO;aACX,IAAI,CAAC,QAAQ,IAAI,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AACnD,aAAA,KAAK,CAAC,KAAK,IAAI,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;KAChD;;;AAID,IAAA,SAAS,cAAc,GAAA;QACrB,qBAAqB,IAAI,CAAC;KAC3B;IAED,OAAO;QACL,YAAY;QACZ,cAAc;KACf,CAAC;AACJ;;;;"}

package/js/store/utils/getters-proxy.utils.js

@@ -1,6 +1,6 @@
-import { reduce } from '../../utils/object.js';
+import { reduce } from '@empathyco/x-utils';
 
-var cache = {};
+let cache = {};
 /**
  * Creates or return a proxy object of the getters of the storeModule passed.
  *
@@ -21,14 +21,12 @@ var cache = {};
  */
 function getGettersProxyFromModule(getters, moduleName, storeModule) {
     /* TODO: Review why TS is not able to exclude undefined types from the Getters cache */
-    var cachedGetter = cache[moduleName];
+    const cachedGetter = cache[moduleName];
     if (isCacheGetterDefined(cachedGetter)) {
         return cachedGetter;
     }
-    var modulePath = "x/" + moduleName + "/";
-    var safeGetters = reduce(storeModule.getters, function (safeGettersProxy, getterName) {
-        return defineGetterProxy(safeGettersProxy, getterName, "" + modulePath + getterName, getters);
-    }, {});
+    const modulePath = `x/${moduleName}/`;
+    const safeGetters = reduce(storeModule.getters, (safeGettersProxy, getterName) => defineGetterProxy(safeGettersProxy, getterName, `${modulePath}${getterName}`, getters), {});
     cache[moduleName] = safeGetters;
     return safeGetters;
 }
@@ -46,16 +44,14 @@ function getGettersProxyFromModule(getters, moduleName, storeModule) {
  */
 function getGettersProxy(getters, moduleName) {
     /* TODO: Review why TS is not able to exclude undefined types from the Getters cache */
-    var cachedGetter = cache[moduleName];
+    const cachedGetter = cache[moduleName];
     if (isCacheGetterDefined(cachedGetter)) {
         return cachedGetter;
     }
-    var modulePath = "x/" + moduleName + "/";
-    var getterKeys = Object.keys(getters).filter(function (getterKey) {
-        return getterKey.startsWith(modulePath);
-    });
-    var safeGetters = getterKeys.reduce(function (safeGettersProxy, fullPathGetterName) {
-        var getterName = fullPathGetterName.replace(modulePath, '');
+    const modulePath = `x/${moduleName}/`;
+    const getterKeys = Object.keys(getters).filter(getterKey => getterKey.startsWith(modulePath));
+    const safeGetters = getterKeys.reduce((safeGettersProxy, fullPathGetterName) => {
+        const getterName = fullPathGetterName.replace(modulePath, '');
         return defineGetterProxy(safeGettersProxy, getterName, fullPathGetterName, getters);
     }, {});
     cache[moduleName] = safeGetters;
@@ -75,7 +71,7 @@ function getGettersProxy(getters, moduleName) {
  */
 function defineGetterProxy(safeGettersProxy, getterName, fullPathGetterName, getters) {
     return Object.defineProperty(safeGettersProxy, getterName, {
-        get: function () {
+        get() {
             return getters[fullPathGetterName];
         },
         enumerable: true

package/js/store/utils/getters-proxy.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"getters-proxy.utils.js","sources":["../../../../src/store/utils/getters-proxy.utils.ts"],"sourcesContent":["import { Store } from 'vuex';\nimport { reduce } from '../../utils/object';\nimport { Dictionary } from '../../utils/types';\nimport { ExtractGetters, XModuleName } from '../../x-modules/x-modules.types';\nimport { AnyXStoreModule } from '../store.types';\n\ntype Getters = { [ModuleName in XModuleName]?: ExtractGetters<ModuleName> };\nlet cache: Getters = {};\n/**\n * Creates or return a proxy object of the getters of the storeModule passed.\n *\n * @param getters - The Vuex Store Getters.\n * @param moduleName - The name of the module.\n * @param storeModule - The store module.\n * @returns A {@link GettersTree} object with only the getters of the {@link XModule}.\n *\n * @internal\n *\n * @remarks This proxy will be used by the stateSelector, of the module. This is done to ensure that\n * a Vuex stateSelector can only access the getters of the {@link XModule} where it is registered.\n * This function task can be done with {@link getGettersProxy}, just without passing the\n * storeModule. But in that case every time we register emitters in a module, it will loop over all\n * the getters of all the store. This way, passing the moduleNeeded, it only loops over the getters\n * of that module. It is a performance question to have this two different implementations.\n *\n */\nexport function getGettersProxyFromModule<ModuleName extends XModuleName>(\n  getters: Pick<Store<any>, 'getters'>,\n  moduleName: ModuleName,\n  storeModule: AnyXStoreModule\n): ExtractGetters<ModuleName> {\n  /* TODO: Review why TS is not able to exclude undefined types from the Getters cache */\n  const cachedGetter = cache[moduleName];\n  if (isCacheGetterDefined<ModuleName>(cachedGetter)) {\n    return cachedGetter;\n  }\n  const modulePath = `x/${moduleName}/`;\n  const safeGetters = reduce(\n    storeModule.getters as Dictionary,\n    (safeGettersProxy, getterName) =>\n      defineGetterProxy(safeGettersProxy, getterName, `${modulePath}${getterName}`, getters),\n    {} as ExtractGetters<ModuleName>\n  );\n  cache[moduleName] = safeGetters as unknown as Getters[ModuleName];\n  return safeGetters;\n}\n\n/**\n * Creates or return a proxy object of the getters of the module with the moduleName passed.\n *\n * @param getters - The Vuex Store Getters.\n * @param moduleName - The name of the module.\n * @returns A {@link GettersTree} object with only the getters of the {@link XModule}.\n *\n * @internal\n *\n * @remarks This proxy will be used wireCommit to pass the module state and getters, to a function\n * that will return the payload to commit the mutation.\n */\nexport function getGettersProxy<ModuleName extends XModuleName>(\n  getters: Pick<Store<any>, 'getters'>,\n  moduleName: ModuleName\n): ExtractGetters<ModuleName> {\n  /* TODO: Review why TS is not able to exclude undefined types from the Getters cache */\n  const cachedGetter = cache[moduleName];\n  if (isCacheGetterDefined<ModuleName>(cachedGetter)) {\n    return cachedGetter;\n  }\n  const modulePath = `x/${moduleName}/`;\n  const getterKeys: string[] = Object.keys(getters).filter(getterKey =>\n    getterKey.startsWith(modulePath)\n  );\n  const safeGetters = getterKeys.reduce((safeGettersProxy, fullPathGetterName) => {\n    const getterName = fullPathGetterName.replace(modulePath, '');\n    return defineGetterProxy(safeGettersProxy, getterName, fullPathGetterName, getters);\n  }, {} as ExtractGetters<ModuleName>);\n  cache[moduleName] = safeGetters as unknown as Getters[ModuleName];\n  return safeGetters;\n}\n\n/**\n * Defines a JS getter in safeGettersProxy object that returns the Vuex getter value.\n *\n * @param safeGettersProxy - The object where the proxy will be defined.\n * @param getterName - The name of the Getter without path. For example: 'trimQuery'.\n * @param fullPathGetterName - The name of the getter to be accessed with the full path.\n * For example: 'x/searchBox/trimmedQuery'.\n * @param getters - The Vuex Store Getters.\n * @returns The same safeGetterProxy with new get defined.\n *\n * @internal\n */\nfunction defineGetterProxy<ModuleName extends XModuleName>(\n  safeGettersProxy: ExtractGetters<ModuleName>,\n  getterName: string,\n  fullPathGetterName: string,\n  getters: Dictionary\n): ExtractGetters<ModuleName> {\n  return Object.defineProperty(safeGettersProxy, getterName, {\n    get() {\n      return getters[fullPathGetterName];\n    },\n    enumerable: true\n  });\n}\n\n/** Clean the cache (This is for testing purpose).\n *\n * @internal\n * */\nexport function cleanGettersProxyCache(): void {\n  cache = {};\n}\n\n/**\n * Checks if the getter cached is defined.\n *\n * @param cachedGetter - The getter cached.\n * @returns If the getters is defined or not.\n *\n * @internal\n */\nfunction isCacheGetterDefined<ModuleName extends XModuleName>(\n  cachedGetter: ExtractGetters<ModuleName> | undefined | unknown\n): cachedGetter is ExtractGetters<ModuleName> {\n  return cachedGetter !== undefined;\n}\n"],"names":[],"mappings":";;AAOA,IAAI,KAAK,GAAY,EAAE,CAAC;AACxB;;;;;;;;;;;;;;;;;;SAkBgB,yBAAyB,CACvC,OAAoC,EACpC,UAAsB,EACtB,WAA4B;;IAG5B,IAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;IACvC,IAAI,oBAAoB,CAAa,YAAY,CAAC,EAAE;QAClD,OAAO,YAAY,CAAC;KACrB;IACD,IAAM,UAAU,GAAG,OAAK,UAAU,MAAG,CAAC;IACtC,IAAM,WAAW,GAAG,MAAM,CACxB,WAAW,CAAC,OAAqB,EACjC,UAAC,gBAAgB,EAAE,UAAU;QAC3B,OAAA,iBAAiB,CAAC,gBAAgB,EAAE,UAAU,EAAE,KAAG,UAAU,GAAG,UAAY,EAAE,OAAO,CAAC;KAAA,EACxF,EAAgC,CACjC,CAAC;IACF,KAAK,CAAC,UAAU,CAAC,GAAG,WAA6C,CAAC;IAClE,OAAO,WAAW,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;;SAYgB,eAAe,CAC7B,OAAoC,EACpC,UAAsB;;IAGtB,IAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;IACvC,IAAI,oBAAoB,CAAa,YAAY,CAAC,EAAE;QAClD,OAAO,YAAY,CAAC;KACrB;IACD,IAAM,UAAU,GAAG,OAAK,UAAU,MAAG,CAAC;IACtC,IAAM,UAAU,GAAa,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,UAAA,SAAS;QAChE,OAAA,SAAS,CAAC,UAAU,CAAC,UAAU,CAAC;KAAA,CACjC,CAAC;IACF,IAAM,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,UAAC,gBAAgB,EAAE,kBAAkB;QACzE,IAAM,UAAU,GAAG,kBAAkB,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QAC9D,OAAO,iBAAiB,CAAC,gBAAgB,EAAE,UAAU,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC;KACrF,EAAE,EAAgC,CAAC,CAAC;IACrC,KAAK,CAAC,UAAU,CAAC,GAAG,WAA6C,CAAC;IAClE,OAAO,WAAW,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;;AAYA,SAAS,iBAAiB,CACxB,gBAA4C,EAC5C,UAAkB,EAClB,kBAA0B,EAC1B,OAAmB;IAEnB,OAAO,MAAM,CAAC,cAAc,CAAC,gBAAgB,EAAE,UAAU,EAAE;QACzD,GAAG;YACD,OAAO,OAAO,CAAC,kBAAkB,CAAC,CAAC;SACpC;QACD,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;AACL,CAAC;AAED;;;;SAIgB,sBAAsB;IACpC,KAAK,GAAG,EAAE,CAAC;AACb,CAAC;AAED;;;;;;;;AAQA,SAAS,oBAAoB,CAC3B,YAA8D;IAE9D,OAAO,YAAY,KAAK,SAAS,CAAC;AACpC;;;;"}
+{"version":3,"file":"getters-proxy.utils.js","sources":["../../../../src/store/utils/getters-proxy.utils.ts"],"sourcesContent":["import { reduce, Dictionary } from '@empathyco/x-utils';\nimport { Store } from 'vuex';\nimport { ExtractGetters, XModuleName } from '../../x-modules/x-modules.types';\nimport { AnyXStoreModule } from '../store.types';\n\ntype Getters = { [ModuleName in XModuleName]?: ExtractGetters<ModuleName> };\nlet cache: Getters = {};\n/**\n * Creates or return a proxy object of the getters of the storeModule passed.\n *\n * @param getters - The Vuex Store Getters.\n * @param moduleName - The name of the module.\n * @param storeModule - The store module.\n * @returns A {@link GettersTree} object with only the getters of the {@link XModule}.\n *\n * @internal\n *\n * @remarks This proxy will be used by the stateSelector, of the module. This is done to ensure that\n * a Vuex stateSelector can only access the getters of the {@link XModule} where it is registered.\n * This function task can be done with {@link getGettersProxy}, just without passing the\n * storeModule. But in that case every time we register emitters in a module, it will loop over all\n * the getters of all the store. This way, passing the moduleNeeded, it only loops over the getters\n * of that module. It is a performance question to have this two different implementations.\n *\n */\nexport function getGettersProxyFromModule<ModuleName extends XModuleName>(\n  getters: Pick<Store<any>, 'getters'>,\n  moduleName: ModuleName,\n  storeModule: AnyXStoreModule\n): ExtractGetters<ModuleName> {\n  /* TODO: Review why TS is not able to exclude undefined types from the Getters cache */\n  const cachedGetter = cache[moduleName];\n  if (isCacheGetterDefined<ModuleName>(cachedGetter)) {\n    return cachedGetter;\n  }\n  const modulePath = `x/${moduleName}/`;\n  const safeGetters = reduce(\n    storeModule.getters as Dictionary,\n    (safeGettersProxy, getterName) =>\n      defineGetterProxy(safeGettersProxy, getterName, `${modulePath}${getterName}`, getters),\n    {} as ExtractGetters<ModuleName>\n  );\n  cache[moduleName] = safeGetters as unknown as Getters[ModuleName];\n  return safeGetters;\n}\n\n/**\n * Creates or return a proxy object of the getters of the module with the moduleName passed.\n *\n * @param getters - The Vuex Store Getters.\n * @param moduleName - The name of the module.\n * @returns A {@link GettersTree} object with only the getters of the {@link XModule}.\n *\n * @internal\n *\n * @remarks This proxy will be used wireCommit to pass the module state and getters, to a function\n * that will return the payload to commit the mutation.\n */\nexport function getGettersProxy<ModuleName extends XModuleName>(\n  getters: Pick<Store<any>, 'getters'>,\n  moduleName: ModuleName\n): ExtractGetters<ModuleName> {\n  /* TODO: Review why TS is not able to exclude undefined types from the Getters cache */\n  const cachedGetter = cache[moduleName];\n  if (isCacheGetterDefined<ModuleName>(cachedGetter)) {\n    return cachedGetter;\n  }\n  const modulePath = `x/${moduleName}/`;\n  const getterKeys: string[] = Object.keys(getters).filter(getterKey =>\n    getterKey.startsWith(modulePath)\n  );\n  const safeGetters = getterKeys.reduce((safeGettersProxy, fullPathGetterName) => {\n    const getterName = fullPathGetterName.replace(modulePath, '');\n    return defineGetterProxy(safeGettersProxy, getterName, fullPathGetterName, getters);\n  }, {} as ExtractGetters<ModuleName>);\n  cache[moduleName] = safeGetters as unknown as Getters[ModuleName];\n  return safeGetters;\n}\n\n/**\n * Defines a JS getter in safeGettersProxy object that returns the Vuex getter value.\n *\n * @param safeGettersProxy - The object where the proxy will be defined.\n * @param getterName - The name of the Getter without path. For example: 'trimQuery'.\n * @param fullPathGetterName - The name of the getter to be accessed with the full path.\n * For example: 'x/searchBox/trimmedQuery'.\n * @param getters - The Vuex Store Getters.\n * @returns The same safeGetterProxy with new get defined.\n *\n * @internal\n */\nfunction defineGetterProxy<ModuleName extends XModuleName>(\n  safeGettersProxy: ExtractGetters<ModuleName>,\n  getterName: string,\n  fullPathGetterName: string,\n  getters: Dictionary\n): ExtractGetters<ModuleName> {\n  return Object.defineProperty(safeGettersProxy, getterName, {\n    get() {\n      return getters[fullPathGetterName];\n    },\n    enumerable: true\n  });\n}\n\n/** Clean the cache (This is for testing purpose).\n *\n * @internal\n * */\nexport function cleanGettersProxyCache(): void {\n  cache = {};\n}\n\n/**\n * Checks if the getter cached is defined.\n *\n * @param cachedGetter - The getter cached.\n * @returns If the getters is defined or not.\n *\n * @internal\n */\nfunction isCacheGetterDefined<ModuleName extends XModuleName>(\n  cachedGetter: ExtractGetters<ModuleName> | undefined | unknown\n): cachedGetter is ExtractGetters<ModuleName> {\n  return cachedGetter !== undefined;\n}\n"],"names":[],"mappings":";;AAMA,IAAI,KAAK,GAAY,EAAE,CAAC;AACxB;;;;;;;;;;;;;;;;;AAiBG;SACa,yBAAyB,CACvC,OAAoC,EACpC,UAAsB,EACtB,WAA4B,EAAA;;AAG5B,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;AACvC,IAAA,IAAI,oBAAoB,CAAa,YAAY,CAAC,EAAE;AAClD,QAAA,OAAO,YAAY,CAAC;AACrB,KAAA;AACD,IAAA,MAAM,UAAU,GAAG,CAAK,EAAA,EAAA,UAAU,GAAG,CAAC;AACtC,IAAA,MAAM,WAAW,GAAG,MAAM,CACxB,WAAW,CAAC,OAAqB,EACjC,CAAC,gBAAgB,EAAE,UAAU,KAC3B,iBAAiB,CAAC,gBAAgB,EAAE,UAAU,EAAE,CAAA,EAAG,UAAU,CAAG,EAAA,UAAU,CAAE,CAAA,EAAE,OAAO,CAAC,EACxF,EAAgC,CACjC,CAAC;AACF,IAAA,KAAK,CAAC,UAAU,CAAC,GAAG,WAA6C,CAAC;AAClE,IAAA,OAAO,WAAW,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;AAWG;AACa,SAAA,eAAe,CAC7B,OAAoC,EACpC,UAAsB,EAAA;;AAGtB,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;AACvC,IAAA,IAAI,oBAAoB,CAAa,YAAY,CAAC,EAAE;AAClD,QAAA,OAAO,YAAY,CAAC;AACrB,KAAA;AACD,IAAA,MAAM,UAAU,GAAG,CAAK,EAAA,EAAA,UAAU,GAAG,CAAC;IACtC,MAAM,UAAU,GAAa,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,SAAS,IAChE,SAAS,CAAC,UAAU,CAAC,UAAU,CAAC,CACjC,CAAC;IACF,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,kBAAkB,KAAI;QAC7E,MAAM,UAAU,GAAG,kBAAkB,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QAC9D,OAAO,iBAAiB,CAAC,gBAAgB,EAAE,UAAU,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC;KACrF,EAAE,EAAgC,CAAC,CAAC;AACrC,IAAA,KAAK,CAAC,UAAU,CAAC,GAAG,WAA6C,CAAC;AAClE,IAAA,OAAO,WAAW,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;AAWG;AACH,SAAS,iBAAiB,CACxB,gBAA4C,EAC5C,UAAkB,EAClB,kBAA0B,EAC1B,OAAmB,EAAA;AAEnB,IAAA,OAAO,MAAM,CAAC,cAAc,CAAC,gBAAgB,EAAE,UAAU,EAAE;QACzD,GAAG,GAAA;AACD,YAAA,OAAO,OAAO,CAAC,kBAAkB,CAAC,CAAC;SACpC;AACD,QAAA,UAAU,EAAE,IAAI;AACjB,KAAA,CAAC,CAAC;AACL,CAAC;AAED;;;AAGK;SACW,sBAAsB,GAAA;IACpC,KAAK,GAAG,EAAE,CAAC;AACb,CAAC;AAED;;;;;;;AAOG;AACH,SAAS,oBAAoB,CAC3B,YAA8D,EAAA;IAE9D,OAAO,YAAY,KAAK,SAAS,CAAC;AACpC;;;;"}

package/js/store/utils/query.utils.js

@@ -0,0 +1,37 @@
+/**
+ * Sets the query of the module.
+ *
+ * @param state - State of the module.
+ * @param query - The new query to set.
+ * @public
+ */
+function setQuery(state, query) {
+    state.query = query;
+}
+/**
+ * Creates a getter that combines the current selected related tags and the query of the module.
+ *
+ * @param options - Options on how the getter should behave.
+ * @returns A getter that combines the selected related tags with the query.
+ * @public
+ */
+function createRelatedTagsQueryGetter({ getRelatedTags }) {
+    return function relatedTagsQuery(state, getters) {
+        const query = state.query.trim();
+        return query ? getRelatedTags(state, getters).reduce(concatRelatedTag, query).trim() : '';
+    };
+}
+/**
+ * Joins a query and a related tag respecting the tag position.
+ *
+ * @param partialQuery - The query to concatenate the related tag with.
+ * @param relatedTag - The related tag to concatenate.
+ * @returns The query and the related tag joined.
+ * @internal
+ */
+function concatRelatedTag(partialQuery, { tag, query: relatedTagQuery }) {
+    return relatedTagQuery.startsWith(tag) ? `${tag} ${partialQuery}` : `${partialQuery} ${tag}`;
+}
+
+export { createRelatedTagsQueryGetter, setQuery };
+//# sourceMappingURL=query.utils.js.map

package/js/store/utils/query.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query.utils.js","sources":["../../../../src/store/utils/query.utils.ts"],"sourcesContent":["import { RelatedTag } from '@empathyco/x-types';\n\n/**\n * Query state type, containing a property to hold the current query of the module.\n *\n * @public\n */\nexport interface QueryState {\n  /** The query of the module. Different modules may have queries that differ in value\n   * or time. */\n  query: string;\n}\n\n/**\n * The {@link QueryState} mutations.\n *\n * @public\n */\nexport interface QueryMutations {\n  /**\n   * Sets the query.\n   *\n   * @param query - The new query.\n   */\n  setQuery(query: string): void;\n}\n\n/**\n * Options to create a getter that combines the query with the selected related tags.\n *\n * @public\n */\nexport interface CreateRelatedTagsQueryGetterOptions<State, Getters> {\n  /**\n   * Retrieves the selected related tags of the module.\n   *\n   * @param state - The state of the module.\n   * @param getters - The getters of the module.\n   * @returns The list of selected related tags.\n   */\n  getRelatedTags: (state: State, getters: Getters) => RelatedTag[];\n}\n\n/**\n * Sets the query of the module.\n *\n * @param state - State of the module.\n * @param query - The new query to set.\n * @public\n */\nexport function setQuery(state: QueryState, query: string): void {\n  state.query = query;\n}\n\n/**\n * Creates a getter that combines the current selected related tags and the query of the module.\n *\n * @param options - Options on how the getter should behave.\n * @returns A getter that combines the selected related tags with the query.\n * @public\n */\nexport function createRelatedTagsQueryGetter<State extends QueryState, Getters>({\n  getRelatedTags\n}: CreateRelatedTagsQueryGetterOptions<State, Getters>): (\n  state: State,\n  getters: Getters\n) => string {\n  return function relatedTagsQuery(state, getters) {\n    const query = state.query.trim();\n    return query ? getRelatedTags(state, getters).reduce(concatRelatedTag, query).trim() : '';\n  };\n}\n\n/**\n * Joins a query and a related tag respecting the tag position.\n *\n * @param partialQuery - The query to concatenate the related tag with.\n * @param relatedTag - The related tag to concatenate.\n * @returns The query and the related tag joined.\n * @internal\n */\nfunction concatRelatedTag(\n  partialQuery: string,\n  { tag, query: relatedTagQuery }: RelatedTag\n): string {\n  return relatedTagQuery.startsWith(tag) ? `${tag} ${partialQuery}` : `${partialQuery} ${tag}`;\n}\n"],"names":[],"mappings":"AA2CA;;;;;;AAMG;AACa,SAAA,QAAQ,CAAC,KAAiB,EAAE,KAAa,EAAA;AACvD,IAAA,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;AACtB,CAAC;AAED;;;;;;AAMG;AACa,SAAA,4BAA4B,CAAoC,EAC9E,cAAc,EACsC,EAAA;AAIpD,IAAA,OAAO,SAAS,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAA;QAC7C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACjC,OAAO,KAAK,GAAG,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;AAC5F,KAAC,CAAC;AACJ,CAAC;AAED;;;;;;;AAOG;AACH,SAAS,gBAAgB,CACvB,YAAoB,EACpB,EAAE,GAAG,EAAE,KAAK,EAAE,eAAe,EAAc,EAAA;IAE3C,OAAO,eAAe,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAG,EAAA,GAAG,IAAI,YAAY,CAAA,CAAE,GAAG,GAAG,YAAY,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,CAAC;AAC/F;;;;"}

package/js/store/utils/status-store.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-store.utils.js","sources":["../../../../src/store/utils/status-store.utils.ts"],"sourcesContent":["/**\n * Status state type, containing a property to hold the status property.\n *\n * @public\n */\nexport interface StatusState {\n  /** The request status. Useful for changing the displayed component depending on whether the\n   * request has succeeded, has not been fulfilled or has failed. */\n  status: RequestStatus;\n}\n\n/**\n * Status mutations, containing a method to change the current status.\n *\n * @public\n */\nexport interface StatusMutations {\n  /**\n   * Sets the request status.\n   *\n   * @param status - The new request status.\n   */\n  setStatus(status: RequestStatus): void;\n}\n\n/**\n * The possible status of a request:\n * - Success: The request has resolved successfully.\n * - Loading: The request is in process, waiting for a response.\n * - Error: The request has failed.\n *\n * @public\n */\nexport type RequestStatus = 'success' | 'loading' | 'error' | 'initial';\n\n/**\n * Sets the request status. Can be used as a mutation.\n *\n * @param state - The {@link https://vuex.vuejs.org/guide/state.html | state} provided by Vuex.\n * @param status - The new request status.\n * @public\n */\nexport function setStatus(state: StatusState, status: RequestStatus): void {\n  state.status = status;\n}\n"],"names":[],"mappings":"AAmCA;;;;;;;SAOgB,SAAS,CAAC,KAAkB,EAAE,MAAqB;IACjE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AACxB;;;;"}
+{"version":3,"file":"status-store.utils.js","sources":["../../../../src/store/utils/status-store.utils.ts"],"sourcesContent":["/**\n * Status state type, containing a property to hold the status property.\n *\n * @public\n */\nexport interface StatusState {\n  /** The request status. Useful for changing the displayed component depending on whether the\n   * request has succeeded, has not been fulfilled or has failed. */\n  status: RequestStatus;\n}\n\n/**\n * Status mutations, containing a method to change the current status.\n *\n * @public\n */\nexport interface StatusMutations {\n  /**\n   * Sets the request status.\n   *\n   * @param status - The new request status.\n   */\n  setStatus(status: RequestStatus): void;\n}\n\n/**\n * The possible status of a request:\n * - Success: The request has resolved successfully.\n * - Loading: The request is in process, waiting for a response.\n * - Error: The request has failed.\n *\n * @public\n */\nexport type RequestStatus = 'success' | 'loading' | 'error' | 'initial';\n\n/**\n * Sets the request status. Can be used as a mutation.\n *\n * @param state - The {@link https://vuex.vuejs.org/guide/state.html | state} provided by Vuex.\n * @param status - The new request status.\n * @public\n */\nexport function setStatus(state: StatusState, status: RequestStatus): void {\n  state.status = status;\n}\n"],"names":[],"mappings":"AAmCA;;;;;;AAMG;AACa,SAAA,SAAS,CAAC,KAAkB,EAAE,MAAqB,EAAA;AACjE,IAAA,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AACxB;;;;"}

package/js/store/utils/store-emitters.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"store-emitters.utils.js","sources":["../../../../src/store/utils/store-emitters.utils.ts"],"sourcesContent":["import { WatchOptions } from 'vue';\nimport { Dictionary, Returns } from '../../utils/types';\nimport { XEvent, XEventPayload } from '../../wiring/events.types';\nimport { AnyXStoreModule } from '../store.types';\n\n/**\n * Selects a part of the store state or getters (AKA \"getter\" inside\n * {@link https://vuex.vuejs.org/ | Vuex} watchers).\n *\n * @param ReturnType - The type of the state or getters property selected.\n * @param State - The type of the state of the {@link XModule} where this selector is used.\n * @param Getters - The type of the getters of the {@link XModule} where this selector is used.\n * @public\n */\nexport type SimpleStateSelector<\n  ReturnType,\n  State extends Dictionary,\n  Getters extends Dictionary\n> = (state: State, getters: Getters) => ReturnType;\n\n/**\n * Composition type of {@link SimpleStateSelector} which allows to indicate if the state selector\n * should be executed in first instance (first assignment of values). Selector is the\n * {@link SimpleStateSelector} and immediate flags if the selector should be executed when it is\n * initialized for first time.\n *\n * @param ReturnType - The type of the state or getters property selected.\n * @param State - The type of the state of the {@link XModule} where this selector is used.\n * @param Getters - The type of the getters of the {@link XModule} where this selector is used.\n * @public\n */\nexport interface StateSelector<ReturnType, State extends Dictionary, Getters extends Dictionary>\n  extends WatchOptions {\n  selector: SimpleStateSelector<ReturnType, State, Getters>;\n  /**\n   * Checks if the value of the selector has changed.\n   *\n   * @remarks\n   * This function exist because Vue will not stop reactivity propagation if the observed variable\n   * is an `object`, an `Array`, or the `deep` mode has been enabled.\n   *\n   * @param newValue - The new value.\n   * @param oldValue - The old value.\n   * @returns True if the value has really changed.\n   */\n  filter?(newValue: ReturnType, oldValue: ReturnType): boolean;\n}\n\n/**\n * Dictionary where the key is a {@link XEvent}, and the value is {@link SimpleStateSelector} or\n * {@link StateSelector}. This {@link SimpleStateSelector} or {@link StateSelector} can only\n * access the state and getters from the {@link XStoreModule} passed as param type. This\n * dictionary is used to emits a {@link XEvent} when the part of the store selected by\n * {@link SimpleStateSelector} changes.\n *\n * @param StoreModule - The store module that these store emitters will be able to access.\n * @public\n */\nexport type StoreEmitters<StoreModule extends AnyXStoreModule> = {\n  [Event in XEvent]?:\n    | SimpleStateSelector<\n        XEventPayload<Event>,\n        ReturnType<StoreModule['state']>,\n        Returns<StoreModule['getters']>\n      >\n    | StateSelector<\n        XEventPayload<Event>,\n        ReturnType<StoreModule['state']>,\n        Returns<StoreModule['getters']>\n      >;\n};\n/**\n * Alias for any simple state selector.\n *\n * @public\n */\nexport type AnySimpleStateSelector = SimpleStateSelector<any, any, any>;\n/**\n * Alias for any state selector.\n *\n * @public\n */\nexport type AnyStateSelector = StateSelector<any, any, any>;\n/**\n * Alias for any store emitters.\n *\n * @public\n */\nexport type AnyStoreEmitters = StoreEmitters<AnyXStoreModule>;\n\n/**\n * Helper function for creating type-safe {@link StoreEmitters}.\n *\n * @param storeModule - The store module that the emitters will be associated to.\n * @param emitters - The {@link StoreEmitters} to create.\n * @returns A type-safe function for storeEmitters.\n * @public\n */\nexport function createStoreEmitters<\n  Module extends AnyXStoreModule,\n  Emitters extends StoreEmitters<Module>\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\n>(storeModule: Module, emitters: Emitters): Emitters {\n  return emitters;\n}\n"],"names":[],"mappings":"AA0FA;;;;;;;;SAQgB,mBAAmB,CAIjC,WAAmB,EAAE,QAAkB;IACvC,OAAO,QAAQ,CAAC;AAClB;;;;"}
+{"version":3,"file":"store-emitters.utils.js","sources":["../../../../src/store/utils/store-emitters.utils.ts"],"sourcesContent":["import { Dictionary } from '@empathyco/x-utils';\nimport { WatchOptions } from 'vue';\nimport { Returns } from '../../utils/types';\nimport { XEvent, XEventPayload } from '../../wiring/events.types';\nimport { AnyXStoreModule } from '../store.types';\nimport { WireMetadata } from '../../wiring/wiring.types';\n\n/**\n * Selects a part of the store state or getters (AKA \"getter\" inside\n * {@link https://vuex.vuejs.org/ | Vuex} watchers).\n *\n * @param ReturnType - The type of the state or getters property selected.\n * @param State - The type of the state of the {@link XModule} where this selector is used.\n * @param Getters - The type of the getters of the {@link XModule} where this selector is used.\n * @public\n */\nexport type SimpleStateSelector<\n  ReturnType,\n  State extends Dictionary,\n  Getters extends Dictionary\n> = (state: State, getters: Getters) => ReturnType;\n\n/**\n * Composition type of {@link SimpleStateSelector} which allows to indicate if the state selector\n * should be executed in first instance (first assignment of values). Selector is the\n * {@link SimpleStateSelector} and immediate flags if the selector should be executed when it is\n * initialized for first time.\n *\n * @param ReturnType - The type of the state or getters property selected.\n * @param State - The type of the state of the {@link XModule} where this selector is used.\n * @param Getters - The type of the getters of the {@link XModule} where this selector is used.\n * @public\n */\nexport interface StateSelector<ReturnType, State extends Dictionary, Getters extends Dictionary>\n  extends WatchOptions {\n  selector: SimpleStateSelector<ReturnType, State, Getters>;\n  /**\n   * Checks if the value of the selector has changed.\n   *\n   * @remarks\n   * This function exist because Vue will not stop reactivity propagation if the observed variable\n   * is an `object`, an `Array`, or the `deep` mode has been enabled.\n   *\n   * @param newValue - The new value.\n   * @param oldValue - The old value.\n   * @returns True if the value has really changed.\n   */\n  filter?(newValue: ReturnType, oldValue: ReturnType): boolean;\n  metadata?: Partial<WireMetadata>;\n}\n\n/**\n * Dictionary where the key is a {@link XEvent}, and the value is {@link SimpleStateSelector} or\n * {@link StateSelector}. This {@link SimpleStateSelector} or {@link StateSelector} can only\n * access the state and getters from the {@link XStoreModule} passed as param type. This\n * dictionary is used to emits a {@link XEvent} when the part of the store selected by\n * {@link SimpleStateSelector} changes.\n *\n * @param StoreModule - The store module that these store emitters will be able to access.\n * @public\n */\nexport type StoreEmitters<StoreModule extends AnyXStoreModule> = {\n  [Event in XEvent]?:\n    | SimpleStateSelector<\n        XEventPayload<Event>,\n        ReturnType<StoreModule['state']>,\n        Returns<StoreModule['getters']>\n      >\n    | StateSelector<\n        XEventPayload<Event>,\n        ReturnType<StoreModule['state']>,\n        Returns<StoreModule['getters']>\n      >;\n};\n/**\n * Alias for any simple state selector.\n *\n * @public\n */\nexport type AnySimpleStateSelector = SimpleStateSelector<any, any, any>;\n/**\n * Alias for any state selector.\n *\n * @public\n */\nexport type AnyStateSelector = StateSelector<any, any, any>;\n/**\n * Alias for any store emitters.\n *\n * @public\n */\nexport type AnyStoreEmitters = StoreEmitters<AnyXStoreModule>;\n\n/**\n * Helper function for creating type-safe {@link StoreEmitters}.\n *\n * @param storeModule - The store module that the emitters will be associated to.\n * @param emitters - The {@link StoreEmitters} to create.\n * @returns A type-safe function for storeEmitters.\n * @public\n */\nexport function createStoreEmitters<\n  Module extends AnyXStoreModule,\n  Emitters extends StoreEmitters<Module>\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n>(storeModule: Module, emitters: Emitters): Emitters {\n  return emitters;\n}\n"],"names":[],"mappings":"AA6FA;;;;;;;AAOG;AACa,SAAA,mBAAmB,CAIjC,WAAmB,EAAE,QAAkB,EAAA;AACvC,IAAA,OAAO,QAAQ,CAAC;AAClB;;;;"}

package/js/store/x.module.js

@@ -4,8 +4,8 @@
  *
  * @internal
  */
-var RootXStoreModule = {
-    state: function () { return ({
+const RootXStoreModule = {
+    state: () => ({
         device: null,
         empathize: null,
         extraParams: null,
@@ -14,6 +14,7 @@ var RootXStoreModule = {
         identifierResults: null,
         nextQueries: null,
         popularSearches: null,
+        queriesPreview: null,
         querySuggestions: null,
         recommendations: null,
         relatedTags: null,
@@ -22,7 +23,7 @@ var RootXStoreModule = {
         searchBox: null,
         tagging: null,
         url: null
-    }); },
+    }),
     namespaced: true
 };
 

package/js/store/x.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"x.module.js","sources":["../../../src/store/x.module.ts"],"sourcesContent":["import { Module } from 'vuex';\nimport { RootXStoreState } from './store.types';\n\n/**\n * The type of the x module state has a property for each other sub-module assigned to `null`,\n * so we can avoid re-executing getters every time\n * the `store.registerModule` method is called.\n *\n * @internal\n */\nexport type XModuleState = { [Key in keyof RootXStoreState['x']]: null };\n\n/**\n * The main module of the X Store. All of the other {@link XModule | XModules} will be\n * registered as a sub-module of this one.\n *\n * @internal\n */\nexport const RootXStoreModule: Module<XModuleState, any> = {\n  state: () => ({\n    device: null,\n    empathize: null,\n    extraParams: null,\n    facets: null,\n    historyQueries: null,\n    identifierResults: null,\n    nextQueries: null,\n    popularSearches: null,\n    querySuggestions: null,\n    recommendations: null,\n    relatedTags: null,\n    scroll: null,\n    search: null,\n    searchBox: null,\n    tagging: null,\n    url: null\n  }),\n  namespaced: true\n};\n"],"names":[],"mappings":"AAYA;;;;;;IAMa,gBAAgB,GAA8B;IACzD,KAAK,EAAE,cAAM,QAAC;QACZ,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,IAAI;QACZ,cAAc,EAAE,IAAI;QACpB,iBAAiB,EAAE,IAAI;QACvB,WAAW,EAAE,IAAI;QACjB,eAAe,EAAE,IAAI;QACrB,gBAAgB,EAAE,IAAI;QACtB,eAAe,EAAE,IAAI;QACrB,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,IAAI;QACZ,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;QACb,GAAG,EAAE,IAAI;KACV,IAAC;IACF,UAAU,EAAE,IAAI;;;;;"}
+{"version":3,"file":"x.module.js","sources":["../../../src/store/x.module.ts"],"sourcesContent":["import { Module } from 'vuex';\nimport { RootXStoreState } from './store.types';\n\n/**\n * The type of the x module state has a property for each other sub-module assigned to `null`,\n * so we can avoid re-executing getters every time\n * the `store.registerModule` method is called.\n *\n * @internal\n */\nexport type XModuleState = { [Key in keyof RootXStoreState['x']]: null };\n\n/**\n * The main module of the X Store. All of the other {@link XModule | XModules} will be\n * registered as a sub-module of this one.\n *\n * @internal\n */\nexport const RootXStoreModule: Module<XModuleState, any> = {\n  state: () => ({\n    device: null,\n    empathize: null,\n    extraParams: null,\n    facets: null,\n    historyQueries: null,\n    identifierResults: null,\n    nextQueries: null,\n    popularSearches: null,\n    queriesPreview: null,\n    querySuggestions: null,\n    recommendations: null,\n    relatedTags: null,\n    scroll: null,\n    search: null,\n    searchBox: null,\n    tagging: null,\n    url: null\n  }),\n  namespaced: true\n};\n"],"names":[],"mappings":"AAYA;;;;;AAKG;AACU,MAAA,gBAAgB,GAA8B;AACzD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE,IAAI;AACZ,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,MAAM,EAAE,IAAI;AACZ,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,iBAAiB,EAAE,IAAI;AACvB,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,eAAe,EAAE,IAAI;AACrB,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,gBAAgB,EAAE,IAAI;AACtB,QAAA,eAAe,EAAE,IAAI;AACrB,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,MAAM,EAAE,IAAI;AACZ,QAAA,MAAM,EAAE,IAAI;AACZ,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,GAAG,EAAE,IAAI;KACV,CAAC;AACF,IAAA,UAAU,EAAE,IAAI;;;;;"}