@empathyco/x-components 6.0.0-alpha.99 → 6.0.0

package/js/x-installer/x-installer.js

@@ -0,0 +1,285 @@
+import { isFunction, forEach } from '@empathyco/x-utils';
+import { reactive, createApp } from 'vue';
+import { bus } from '../plugins/x-bus.js';
+import { XPlugin } from '../plugins/x-plugin.js';
+import { BaseXAPI } from './api/base-api.js';
+
+/**
+ * The purpose of this class is to offer a quick way to initialize the XComponents in a setup
+ * project. It allows to receive all the options in {@link InstallXOptions} which is an extension
+ * of {@link XPluginOptions} with all the options for the plugin and some options more.
+ *
+ * This class does multiple things:
+ * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.
+ * 2. Creates the public {@link XAPI} and add it to global window.
+ * 3. Creates the Vue Application for the customer project.
+ *
+ * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.
+ *
+ * @example The way to use this class is the next:
+ *    1. Create the installer passing in the {@link InstallXOptions}. This only save the options:
+ *
+ * ```
+ *        const installer = new XInstaller(installXOptions)
+ * ```
+ *
+ *    2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.
+ *       There are 3 different ways to do this:
+ *
+ *        2.1 Using the created installer:
+ *
+ * ```
+ *            installer.init(snippetConfig)
+ * ```
+ *
+ *        2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or
+ *            is not present as the default value is `true`) then this init step can be done with
+ *            the Public API:
+ *
+ * ```
+ *            window.InterfaceX.init(snippetConfig)
+ * ```
+ *
+ *        2.3 When the script of the project build is loaded it searches for a global `initX`
+ *            variable that the customer must have in their website. This variable can be a
+ *            function that returns the {@link SnippetConfig} or an object that contains the
+ *            {@link SnippetConfig} itself:
+ *
+ * ```
+ *            window.initX = function() {
+ *                 return {
+ *                   instance,
+ *                   env,
+ *                   scope,
+ *                   lang,
+ *                   uiLang,
+ *                   currency,
+ *                   consent,
+ *                   documentDirection
+ *                 };
+ *              };
+ * ```
+ *
+ * ```
+ *            window.initX = {
+ *                 instance,
+ *                 env,
+ *                 scope,
+ *                 lang,
+ *                 uiLang,
+ *                 currency,
+ *                 consent,
+ *                 documentDirection
+ *               };
+ * ```
+ *
+ * @public
+ */
+class XInstaller {
+    /**
+     * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also
+     * creates the public {@link XAPI}.
+     *
+     * @remarks Auto initializes the Vue application if window.initX is defined as a function or
+     * object specifying the {@link SnippetConfig | snippet config}.
+     *
+     *
+     * @param options - The {@link InstallXOptions}.
+     *
+     * @public
+     */
+    constructor(options) {
+        this.options = options;
+        this.createAPI();
+    }
+    /**
+     * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this
+     * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API
+     * creation the value `false` must be passed in the `api` option.
+     *
+     * @internal
+     */
+    createAPI() {
+        const { api } = this.options;
+        if (api !== false) {
+            this.api = api ?? new BaseXAPI();
+            // eslint-disable-next-line ts/no-misused-promises
+            this.api.setInitCallback(this.init.bind(this));
+            this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));
+            this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this));
+            window.InterfaceX = this.api;
+        }
+    }
+    /**
+     * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.
+     *
+     * @returns The snippet config if it is defined or undefined otherwise.
+     *
+     * @internal
+     */
+    retrieveSnippetConfig() {
+        if (typeof window.initX === 'function') {
+            return window.initX();
+        }
+        else if (typeof window.initX === 'object') {
+            return window.initX;
+        }
+    }
+    async init(snippetConfig = this.retrieveSnippetConfig()) {
+        if (snippetConfig) {
+            this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig));
+            this.createApp();
+            const bus = this.createBus();
+            const pluginOptions = this.getPluginOptions();
+            const plugin = this.installPlugin(pluginOptions, bus);
+            await this.installExtraPlugins(bus);
+            this.api?.setBus(bus);
+            this.app.mount(this.getMountingTarget(this.options.domElement));
+            return {
+                api: this.api,
+                app: this.app,
+                bus,
+                plugin,
+            };
+        }
+        return Promise.resolve();
+    }
+    /**
+     * Creates the {@link XPluginOptions} object.
+     *
+     * @returns The {@link XPluginOptions} object.
+     *
+     * @internal
+     */
+    getPluginOptions() {
+        const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;
+        return {
+            adapter,
+            store,
+            xModules,
+            initialXModules,
+            __PRIVATE__xModules,
+        };
+    }
+    /**
+     * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.
+     * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then
+     * creates a new instance of {@link @empathyco/x-bus#XPriorityBus | bus}.
+     *
+     * @returns XBus - The bus instance.
+     *
+     * @internal
+     */
+    createBus() {
+        return this.options.bus ?? bus;
+    }
+    /**
+     * Creates and install the Vue Plugin. If `plugin` parameter is passed in the
+     * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is
+     * created and installed.
+     *
+     * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method
+     * of the plugin.
+     * @param bus - The XBus to be used to create the XPlugin.
+     *
+     * @returns Plugin<XPluginOption> - The plugin instance.
+     * @internal
+     */
+    installPlugin(pluginOptions, bus) {
+        const plugin = this.options.plugin ?? new XPlugin(bus);
+        this.app.use(plugin, pluginOptions);
+        return plugin;
+    }
+    /**
+     * Runs the installExtraPlugins callback defined in the {@link InstallXOptions}
+     * to allow the user to install more plugins to the App.
+     *
+     * @param bus - The events bus used in the application.
+     * @returns An empty promise.
+     * @internal
+     */
+    async installExtraPlugins(bus) {
+        return Promise.resolve(this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig, bus }));
+    }
+    /**
+     * In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},
+     * then a new Vue application is created using that component as root.
+     *
+     * @internal
+     */
+    createApp() {
+        if (this.options.rootComponent !== undefined) {
+            this.app = createApp(this.options.rootComponent);
+            this.app.provide('snippetConfig', this.snippetConfig);
+            this.options.onCreateApp?.(this.app);
+        }
+    }
+    /**
+     * Transforms the snippet configuration.
+     * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.
+     *
+     * @param snippetConfig - The snippet config to normalise.
+     * @returns The normalised version of the given snippet config.
+     * @internal
+     */
+    normaliseSnippetConfig(snippetConfig) {
+        if (snippetConfig.lang) {
+            snippetConfig.uiLang ?? (snippetConfig.uiLang = snippetConfig.lang);
+        }
+        return snippetConfig;
+    }
+    /**
+     * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in
+     * the {@link InstallXOptions} is an Element or an element selector, then this will be used.
+     * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which
+     * returns an Element or element selector to use.
+     * If it is not present, a new <div> Element is created and appended to the body.
+     *
+     * @param domElement - {@link InstallXOptions.domElement} Element, ShadowRoot, string or function
+     * used to mount the Vue Application.
+     *
+     * @returns The Element or ShadowRoot to use as mounting target for the Vue Application.
+     * @internal
+     */
+    getMountingTarget(domElement) {
+        if (isFunction(domElement)) {
+            domElement = domElement(this.snippetConfig);
+        }
+        if (typeof domElement === 'string') {
+            const target = document.querySelector(domElement);
+            if (!target) {
+                throw new Error(`XComponents app couldn't be mounted: Element "${domElement}" couldn't be found`);
+            }
+            return target;
+        }
+        return domElement ?? document.body.appendChild(document.createElement('div'));
+    }
+    /**
+     * It updates all the provided properties from the current snippet config.
+     *
+     * @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.
+     *
+     * @internal
+     */
+    updateSnippetConfig(newSnippetConfig) {
+        if (!this.snippetConfig) {
+            return;
+        }
+        forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {
+            this.snippetConfig[name] = value;
+        });
+    }
+    /**
+     * Getter for the snippet config object.
+     *
+     * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.
+     *
+     * @public
+     */
+    getSnippetConfig() {
+        return this.snippetConfig;
+    }
+}
+
+export { XInstaller };
+//# sourceMappingURL=x-installer.js.map

package/js/x-installer/x-installer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"x-installer.js","sources":["../../../src/x-installer/x-installer.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport type { XPluginOptions } from '../plugins/x-plugin.types'\nimport type { WireMetadata, XEventsTypes } from '../wiring/index'\nimport type { XBus } from '../x-bus'\nimport type { NormalisedSnippetConfig, SnippetConfig, XAPI } from './api/api.types'\nimport type { InitWrapper, InstallXOptions } from './types'\nimport { forEach, isFunction } from '@empathyco/x-utils'\nimport { createApp, reactive } from 'vue'\nimport { bus } from '../plugins/x-bus'\nimport { XPlugin } from '../plugins/x-plugin'\nimport { BaseXAPI } from './api/base-api'\n\ndeclare global {\n  interface Window {\n    InterfaceX?: XAPI\n    initX?: (() => SnippetConfig) | SnippetConfig\n  }\n}\n\n/**\n * The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n *\n * This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n *\n * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n *\n * @example The way to use this class is the next:\n *    1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n *\n * ```\n *        const installer = new XInstaller(installXOptions)\n * ```\n *\n *    2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n *       There are 3 different ways to do this:\n *\n *        2.1 Using the created installer:\n *\n * ```\n *            installer.init(snippetConfig)\n * ```\n *\n *        2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n *            is not present as the default value is `true`) then this init step can be done with\n *            the Public API:\n *\n * ```\n *            window.InterfaceX.init(snippetConfig)\n * ```\n *\n *        2.3 When the script of the project build is loaded it searches for a global `initX`\n *            variable that the customer must have in their website. This variable can be a\n *            function that returns the {@link SnippetConfig} or an object that contains the\n *            {@link SnippetConfig} itself:\n *\n * ```\n *            window.initX = function() {\n *                 return {\n *                   instance,\n *                   env,\n *                   scope,\n *                   lang,\n *                   uiLang,\n *                   currency,\n *                   consent,\n *                   documentDirection\n *                 };\n *              };\n * ```\n *\n * ```\n *            window.initX = {\n *                 instance,\n *                 env,\n *                 scope,\n *                 lang,\n *                 uiLang,\n *                 currency,\n *                 consent,\n *                 documentDirection\n *               };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n  private app!: App\n  private api?: XAPI\n\n  /**\n   * The configuration coming from the snippet {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected snippetConfig?: NormalisedSnippetConfig\n\n  /**\n   * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n   * creates the public {@link XAPI}.\n   *\n   * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n   * object specifying the {@link SnippetConfig | snippet config}.\n   *\n   *\n   * @param options - The {@link InstallXOptions}.\n   *\n   * @public\n   */\n  public constructor(protected readonly options: InstallXOptions) {\n    this.createAPI()\n  }\n\n  /**\n   * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n   * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n   * creation the value `false` must be passed in the `api` option.\n   *\n   * @internal\n   */\n  protected createAPI(): void {\n    const { api } = this.options\n    if (api !== false) {\n      this.api = api ?? new BaseXAPI()\n      // eslint-disable-next-line ts/no-misused-promises\n      this.api.setInitCallback(this.init.bind(this))\n      this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this))\n      this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this))\n      window.InterfaceX = this.api\n    }\n  }\n\n  /**\n   * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n   *\n   * @returns The snippet config if it is defined or undefined otherwise.\n   *\n   * @internal\n   */\n  private retrieveSnippetConfig(): SnippetConfig | undefined {\n    if (typeof window.initX === 'function') {\n      return window.initX()\n    } else if (typeof window.initX === 'object') {\n      return window.initX\n    }\n  }\n\n  /**\n   * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n   * installs the plugin and initializes the Vue application.\n   *\n   * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n   *\n   * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n   * returns an object with the {@link XAPI}, the XBus, the {@link XPlugin}\n   * and the Vue application instance. Else, a rejected promise is returned.\n   *\n   * @public\n   */\n  init(snippetConfig: SnippetConfig): Promise<InitWrapper>\n  init(): Promise<InitWrapper | void>\n  async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n    if (snippetConfig) {\n      this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig))\n      this.createApp()\n      const bus = this.createBus()\n      const pluginOptions = this.getPluginOptions()\n      const plugin = this.installPlugin(pluginOptions, bus)\n      await this.installExtraPlugins(bus)\n      this.api?.setBus(bus)\n      this.app.mount(this.getMountingTarget(this.options.domElement))\n\n      return {\n        api: this.api,\n        app: this.app,\n        bus,\n        plugin,\n      }\n    }\n\n    return Promise.resolve()\n  }\n\n  /**\n   * Creates the {@link XPluginOptions} object.\n   *\n   * @returns The {@link XPluginOptions} object.\n   *\n   * @internal\n   */\n  protected getPluginOptions(): XPluginOptions {\n    const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options\n    return {\n      adapter,\n      store,\n      xModules,\n      initialXModules,\n      __PRIVATE__xModules,\n    }\n  }\n\n  /**\n   * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n   * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n   * creates a new instance of {@link @empathyco/x-bus#XPriorityBus | bus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus<XEventsTypes, WireMetadata> {\n    return this.options.bus ?? bus\n  }\n\n  /**\n   * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n   * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n   * created and installed.\n   *\n   * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n   * of the plugin.\n   * @param bus - The XBus to be used to create the XPlugin.\n   *\n   * @returns Plugin<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(\n    pluginOptions: XPluginOptions,\n    bus: XBus<XEventsTypes, WireMetadata>,\n  ): Plugin<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus)\n    this.app.use(plugin, pluginOptions)\n    return plugin\n  }\n\n  /**\n   * Runs the installExtraPlugins callback defined in the {@link InstallXOptions}\n   * to allow the user to install more plugins to the App.\n   *\n   * @param bus - The events bus used in the application.\n   * @returns An empty promise.\n   * @internal\n   */\n  protected async installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {\n    return Promise.resolve(\n      this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus }),\n    )\n  }\n\n  /**\n   * In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},\n   * then a new Vue application is created using that component as root.\n   *\n   * @internal\n   */\n  protected createApp(): void {\n    if (this.options.rootComponent !== undefined) {\n      this.app = createApp(this.options.rootComponent)\n      this.app.provide('snippetConfig', this.snippetConfig)\n      this.options.onCreateApp?.(this.app)\n    }\n  }\n\n  protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig\n  protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>\n  /**\n   * Transforms the snippet configuration.\n   * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n   *\n   * @param snippetConfig - The snippet config to normalise.\n   * @returns The normalised version of the given snippet config.\n   * @internal\n   */\n  protected normaliseSnippetConfig(\n    snippetConfig: SnippetConfig | Partial<SnippetConfig>,\n  ): NormalisedSnippetConfig | Partial<SnippetConfig> {\n    if (snippetConfig.lang) {\n      snippetConfig.uiLang ??= snippetConfig.lang\n    }\n    return snippetConfig\n  }\n\n  /**\n   * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n   * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n   * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n   * returns an Element or element selector to use.\n   * If it is not present, a new <div> Element is created and appended to the body.\n   *\n   * @param domElement - {@link InstallXOptions.domElement} Element, ShadowRoot, string or function\n   * used to mount the Vue Application.\n   *\n   * @returns The Element or ShadowRoot to use as mounting target for the Vue Application.\n   * @internal\n   */\n  protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element | ShadowRoot {\n    if (isFunction(domElement)) {\n      domElement = domElement(this.snippetConfig!)\n    }\n    if (typeof domElement === 'string') {\n      const target = document.querySelector(domElement)\n      if (!target) {\n        throw new Error(\n          `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`,\n        )\n      }\n      return target\n    }\n    return domElement ?? document.body.appendChild(document.createElement('div'))\n  }\n\n  /**\n   * It updates all the provided properties from the current snippet config.\n   *\n   * @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n    if (!this.snippetConfig) {\n      return\n    }\n    forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n      this.snippetConfig![name] = value\n    })\n  }\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  protected getSnippetConfig(): NormalisedSnippetConfig {\n    return this.snippetConfig!\n  }\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/ai/components/ai-carousel.vue.js

@@ -0,0 +1,150 @@
+import _sfc_main from './ai-carousel.vue2.js';
+import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, createVNode, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList } from 'vue';
+import './ai-carousel.vue3.js';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "x-ai-carousel"
+};
+const _hoisted_2 = ["aria-label"];
+const _hoisted_3 = { class: "x-ai-carousel-suggestion" };
+const _hoisted_4 = { class: "x-ai-carousel-suggestion-results" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_AIStarIcon = resolveComponent("AIStarIcon");
+  const _component_ChangeHeight = resolveComponent("ChangeHeight");
+  const _component_ChevronDownIcon = resolveComponent("ChevronDownIcon");
+  const _component_DisplayEmitter = resolveComponent("DisplayEmitter");
+  const _component_DisplayClickProvider = resolveComponent("DisplayClickProvider");
+  const _component_SlidingPanel = resolveComponent("SlidingPanel");
+  const _component_CollapseHeight = resolveComponent("CollapseHeight");
+  return openBlock(), createBlock(_component_CollapseHeight, null, {
+    default: withCtx(() => [
+      _ctx.suggestionsSearch.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_component_DisplayEmitter, {
+          payload: _ctx.tagging?.toolingDisplay ?? _ctx.emptyTaggingRequest,
+          "event-metadata": {
+            feature: "ai_carousel",
+            displayOriginalQuery: _ctx.query || "ai-carousel-without-query",
+            replaceable: false
+          },
+          "data-test": "ai-carousel-display-emitter"
+        }, {
+          default: withCtx(() => [
+            createElementVNode(
+              "span",
+              {
+                class: normalizeClass(["x-ai-carousel-title", { "x-ai-carousel-title--expanded": _ctx.titleExpanded }]),
+                "data-test": "ai-carousel-title",
+                onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleTitleExpansion && _ctx.toggleTitleExpansion(...args))
+              },
+              [
+                createVNode(_component_AIStarIcon, { class: "x-ai-carousel-title-icon" }),
+                createVNode(_component_ChangeHeight, null, {
+                  default: withCtx(() => [
+                    createElementVNode(
+                      "span",
+                      {
+                        ref: "titleRef",
+                        class: normalizeClass(["x-ai-carousel-title-text", { "x-ai-carousel-title-text--expanded": _ctx.titleExpanded }])
+                      },
+                      toDisplayString(_ctx.title),
+                      3
+                      /* TEXT, CLASS */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }),
+                _ctx.isTitleOverflowing ? (openBlock(), createElementBlock("button", {
+                  key: 0,
+                  class: "x-ai-carousel-title-button",
+                  "data-test": "ai-carousel-title-button",
+                  "aria-label": _ctx.titleExpanded ? "Collapse" : "Expand"
+                }, [
+                  createVNode(_component_ChevronDownIcon, {
+                    class: normalizeClass(["x-ai-carousel-title-button-icon", { "x-ai-carousel-title-button-icon--expanded": _ctx.titleExpanded }])
+                  }, null, 8, ["class"])
+                ], 8, _hoisted_2)) : createCommentVNode("v-if", true)
+              ],
+              2
+              /* CLASS */
+            )
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["payload", "event-metadata"]),
+        renderSlot(_ctx.$slots, "sliding-panel", {
+          suggestions: _ctx.suggestionsSearch,
+          tagging: _ctx.tagging
+        }, () => [
+          createVNode(_component_SlidingPanel, {
+            class: normalizeClass(_ctx.slidingPanelClasses),
+            "scroll-container-class": _ctx.slidingPanelContainerClasses,
+            "button-class": _ctx.slidingPanelButtonsClasses,
+            "reset-on-content-change": false
+          }, {
+            "sliding-panel-addons": withCtx(({ arrivedState }) => [
+              renderSlot(_ctx.$slots, "sliding-panels-addons", { arrivedState })
+            ]),
+            "sliding-panel-left-button": withCtx(() => [
+              renderSlot(_ctx.$slots, "sliding-panels-left-button")
+            ]),
+            "sliding-panel-right-button": withCtx(() => [
+              renderSlot(_ctx.$slots, "sliding-panels-right-button")
+            ]),
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_3, [
+                createElementVNode("ul", _hoisted_4, [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(_ctx.suggestionsSearch, (suggestion) => {
+                      return openBlock(), createBlock(_component_DisplayClickProvider, {
+                        key: suggestion.query,
+                        "tooling-display-tagging": _ctx.tagging?.searchQueries[suggestion.query].toolingDisplayClick,
+                        "tooling-add2-cart-tagging": _ctx.tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart,
+                        "result-feature": "ai_carousel"
+                      }, {
+                        default: withCtx(() => [
+                          (openBlock(true), createElementBlock(
+                            Fragment,
+                            null,
+                            renderList(suggestion.results, (result) => {
+                              return openBlock(), createElementBlock("li", {
+                                key: result.id,
+                                "data-test": "ai-carousel-suggestion-result"
+                              }, [
+                                renderSlot(_ctx.$slots, "result", { result })
+                              ]);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      }, 1032, ["tooling-display-tagging", "tooling-add2-cart-tagging"]);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ])
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["class", "scroll-container-class", "button-class"])
+        ]),
+        renderSlot(_ctx.$slots, "extra-content"),
+        renderSlot(_ctx.$slots, "cta-button")
+      ])) : createCommentVNode("v-if", true)
+    ]),
+    _: 3
+    /* FORWARDED */
+  });
+}
+var aiCarousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { aiCarousel as default };
+//# sourceMappingURL=ai-carousel.vue.js.map

package/js/x-modules/ai/components/ai-carousel.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-carousel.vue.js","sources":["../../../../../src/x-modules/ai/components/ai-carousel.vue"],"sourcesContent":["<template>\n  <CollapseHeight>\n    <div v-if=\"suggestionsSearch.length\" class=\"x-ai-carousel\">\n      <DisplayEmitter\n        :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n        :event-metadata=\"{\n          feature: 'ai_carousel',\n          displayOriginalQuery: query || 'ai-carousel-without-query',\n          replaceable: false,\n        }\"\n        data-test=\"ai-carousel-display-emitter\"\n      >\n        <span\n          class=\"x-ai-carousel-title\"\n          :class=\"{ 'x-ai-carousel-title--expanded': titleExpanded }\"\n          data-test=\"ai-carousel-title\"\n          @click=\"toggleTitleExpansion\"\n        >\n          <AIStarIcon class=\"x-ai-carousel-title-icon\" />\n          <ChangeHeight>\n            <span\n              ref=\"titleRef\"\n              class=\"x-ai-carousel-title-text\"\n              :class=\"{ 'x-ai-carousel-title-text--expanded': titleExpanded }\"\n            >\n              {{ title }}\n            </span>\n          </ChangeHeight>\n          <button\n            v-if=\"isTitleOverflowing\"\n            class=\"x-ai-carousel-title-button\"\n            data-test=\"ai-carousel-title-button\"\n            :aria-label=\"titleExpanded ? 'Collapse' : 'Expand'\"\n          >\n            <ChevronDownIcon\n              class=\"x-ai-carousel-title-button-icon\"\n              :class=\"{ 'x-ai-carousel-title-button-icon--expanded': titleExpanded }\"\n            />\n          </button>\n        </span>\n      </DisplayEmitter>\n      <slot name=\"sliding-panel\" :suggestions=\"suggestionsSearch\" :tagging=\"tagging\">\n        <SlidingPanel\n          :class=\"slidingPanelClasses\"\n          :scroll-container-class=\"slidingPanelContainerClasses\"\n          :button-class=\"slidingPanelButtonsClasses\"\n          :reset-on-content-change=\"false\"\n        >\n          <template #sliding-panel-addons=\"{ arrivedState }\">\n            <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n          </template>\n          <template #sliding-panel-left-button>\n            <slot name=\"sliding-panels-left-button\" />\n          </template>\n          <template #sliding-panel-right-button>\n            <slot name=\"sliding-panels-right-button\" />\n          </template>\n          <div class=\"x-ai-carousel-suggestion\">\n            <ul class=\"x-ai-carousel-suggestion-results\">\n              <DisplayClickProvider\n                v-for=\"suggestion in suggestionsSearch\"\n                :key=\"suggestion.query\"\n                :tooling-display-tagging=\"\n                  tagging?.searchQueries[suggestion.query].toolingDisplayClick\n                \"\n                :tooling-add2-cart-tagging=\"\n                  tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart\n                \"\n                result-feature=\"ai_carousel\"\n              >\n                <li\n                  v-for=\"result in suggestion.results\"\n                  :key=\"result.id\"\n                  data-test=\"ai-carousel-suggestion-result\"\n                >\n                  <!-- @slot (required) result card -->\n                  <slot name=\"result\" :result=\"result\" />\n                </li>\n              </DisplayClickProvider>\n            </ul>\n          </div>\n        </SlidingPanel>\n      </slot>\n      <slot name=\"extra-content\" />\n      <slot name=\"cta-button\" />\n    </div>\n  </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n  AIStarIcon,\n  ChangeHeight,\n  ChevronDownIcon,\n  CollapseHeight,\n  DisplayClickProvider,\n  SlidingPanel,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useState } from '../../../composables'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n  xModule: aiXModule.name,\n  components: {\n    ChangeHeight,\n    DisplayClickProvider,\n    DisplayEmitter,\n    CollapseHeight,\n    AIStarIcon,\n    ChevronDownIcon,\n    SlidingPanel,\n  },\n  props: {\n    /* The title text displayed */\n    title: {\n      type: String,\n    },\n    /* The classes added to the sliding panel. */\n    slidingPanelClasses: {\n      type: String,\n    },\n    /* The classes added to the sliding panel container. */\n    slidingPanelContainerClasses: {\n      type: String,\n    },\n    /* The classes added to the sliding panel buttons. */\n    slidingPanelButtonsClasses: {\n      type: String,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const { query, isNoResults, suggestionsSearch, queries, tagging } = useState('ai')\n    const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n    const titleRef = ref<HTMLElement | null>(null)\n    const titleExpanded = ref(false)\n    const isTitleOverflowing = ref(false)\n\n    /**\n     * Checks if the title is overflowing and updates the state.\n     */\n    function updateTitleOverflow() {\n      if (titleExpanded.value) {\n        return\n      }\n      if (titleRef.value) {\n        isTitleOverflowing.value = titleRef.value.scrollWidth > titleRef.value.clientWidth\n      }\n    }\n\n    /**\n     * Toggles the title expanded state if it is overflowing.\n     */\n    function toggleTitleExpansion() {\n      if (isTitleOverflowing.value) {\n        titleExpanded.value = !titleExpanded.value\n      }\n    }\n\n    const title = computed(() => {\n      if (!props.title) {\n        const queriesList = new Intl.ListFormat('en', {\n          style: 'long',\n          type: 'conjunction',\n        }).format(queries.value.map(({ query }) => query))\n        return `Searching for ${queriesList}`\n      }\n      return props.title\n    })\n\n    watch(queries, () => {\n      if (queries.value.length > 0) {\n        $x.emit('AiSuggestionsSearchRequestUpdated')\n      }\n    })\n\n    onMounted(() => {\n      $x.emit('AiComponentMounted', undefined, { feature: 'ai_carousel' })\n    })\n\n    useResizeObserver(titleRef, updateTitleOverflow)\n\n    return {\n      emptyTaggingRequest,\n      isNoResults,\n      isTitleOverflowing,\n      queries,\n      query,\n      suggestionsSearch,\n      tagging,\n      title,\n      titleExpanded,\n      titleRef,\n      toggleTitleExpansion,\n    }\n  },\n})\n</script>\n<style lang=\"css\">\n.x-ai-carousel {\n  --color: var(--x-ai-carousel-color, #bbc9cf);\n  --color-lighter: var(--x-ai-carousel-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n  padding: 8px 0;\n  position: relative;\n  border-radius: 1.5rem;\n  background-color: var(--color-lighter);\n}\n\n.x-ai-carousel-title {\n  display: flex;\n  font-size: 12px;\n  gap: 8px;\n  align-items: flex-start;\n  margin: 0 14px 8px;\n  cursor: pointer;\n}\n.x-ai-carousel-title-text {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.x-ai-carousel-title-text--expanded {\n  white-space: normal;\n}\n.x-ai-carousel-title-icon {\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n  color: var(--color);\n  flex-shrink: 0;\n  margin-bottom: auto;\n}\n.x-ai-carousel-title-button {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--color);\n  margin-bottom: auto;\n}\n.x-ai-carousel-title-button-icon {\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n  transition: transform 0.3s ease;\n}\n.x-ai-carousel-title-button-icon--expanded {\n  transform: rotate(180deg);\n}\n\n.x-ai-carousel-suggestion {\n  display: flex;\n  gap: 8px;\n}\n\n.x-ai-carousel-suggestion-results {\n  display: flex;\n  gap: 1rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n</style>\n"],"names":["_createBlock","_withCtx","_openBlock","_createElementBlock","_createVNode","_createElementVNode","_normalizeClass","_renderSlot","_Fragment","_renderList","_createCommentVNode"],"mappings":"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"}