@coveo/atomic 3.31.2-pre.8be4e70346 → 3.31.2-pre.8c3f1d1fa1

package/dist/atomic/components/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.js

@@ -4,16 +4,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { buildContext, loadContextActions, } from '@coveo/headless/commerce';
+import { buildContext, loadConfigurationActions, loadContextActions, } from '@coveo/headless/commerce';
 import { provide } from '@lit/context';
 import i18next from 'i18next';
 import { html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { booleanConverter } from "../../../converters/boolean-converter.js";
+import { errorGuard } from "../../../decorators/error-guard.js";
 import { watch } from "../../../decorators/watch";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin.js";
 import { markParentAsReady } from "../../../utils/init-queue";
-import { CommonAtomicInterfaceHelper, } from '../../common/interface/interface-common.js';
+import { augmentAnalyticsConfigWithAtomicVersion } from '../../common/interface/analytics-config.js';
+import { InterfaceController, } from '../../common/interface/interface-controller.js';
 import { bindingsContext } from '../../context/bindings-context.js';
 import styles from './atomic-commerce-recommendation-interface.tw.css';
 import { createCommerceRecommendationStore, } from './store.js';
@@ -27,6 +30,7 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
     constructor() {
         super();
         this.bindings = {};
+        this.interfaceController = new InterfaceController(this, 'CoveoAtomic');
         /**
          * The CSS selector for the container the interface will scroll back to.
          */
@@ -50,9 +54,8 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
          */
         this.analytics = true;
         this.handleInitialization = (event) => {
-            this.commonInterfaceHelper.onComponentInitializing(event);
+            this.interfaceController.onComponentInitializing(event);
         };
-        this.commonInterfaceHelper = new CommonAtomicInterfaceHelper(this, 'CoveoAtomic');
         this.store = createCommerceRecommendationStore();
         const { promise, resolve } = Promise.withResolvers();
         this.i18Initialized = promise;
@@ -67,6 +70,10 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
      * Initializes the connection with an already preconfigured [headless commerce engine](https://docs.coveo.com/en/headless/latest/reference/commerce/).
      */
     initializeWithEngine(engine) {
+        engine.dispatch(loadConfigurationActions(engine).updateAnalyticsConfiguration({
+            trackingId: engine.configuration.analytics.trackingId,
+            ...augmentAnalyticsConfigWithAtomicVersion(),
+        }));
         return this.internalInitialization(() => {
             this.engine = engine;
         });
@@ -91,11 +98,11 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
      * ```
      */
     updateLocale(language, country, currency) {
-        if (!this.commonInterfaceHelper.engineIsCreated(this.engine) ||
+        if (!this.interfaceController.engineIsCreated(this.engine) ||
             !this.context) {
             return;
         }
-        language && this.commonInterfaceHelper.onLanguageChange(language);
+        language && this.interfaceController.onLanguageChange(language);
         const { setContext } = loadContextActions(this.engine);
         this.engine.dispatch(setContext({
             ...this.context.state,
@@ -105,29 +112,25 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
         }));
     }
     toggleAnalytics() {
-        this.commonInterfaceHelper.onAnalyticsChange();
+        this.interfaceController.onAnalyticsChange();
     }
     updateIconAssetsPath() {
         this.store.state.iconAssetsPath = this.iconAssetsPath;
     }
     async updateLanguage() {
-        if (!this.commonInterfaceHelper.engineIsCreated(this.engine) ||
+        if (!this.interfaceController.engineIsCreated(this.engine) ||
             !this.language ||
             !this.context) {
             return;
         }
         this.engine.logger.warn('The `language` property will be removed in the next major version of Atomic (v4). Rather than using this property, set the initial language through the engine configuration when calling `initializeWithEngine`, and update the language as needed using the `updateLocale` method.');
         this.context.setLanguage(this.language);
-        return this.commonInterfaceHelper.onLanguageChange();
+        return this.interfaceController.onLanguageChange();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('atomic/initializeComponent', this.handleInitialization);
         this.removeEventListener('atomic/scrollToTop', this.scrollToTop);
-        const ariaLive = this.querySelector('atomic-aria-live');
-        if (ariaLive) {
-            ariaLive.remove();
-        }
     }
     render() {
         return html `<slot></slot>`;
@@ -142,23 +145,15 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
     }
     async internalInitialization(initEngine) {
         await Promise.all([
-            this.commonInterfaceHelper.onInitialization(initEngine),
+            this.interfaceController.onInitialization(initEngine),
             this.i18Initialized,
         ]);
-        this.initAriaLive();
         this.initContext();
         this.language && this.updateLanguage();
         this.bindings = this.getBindings();
         markParentAsReady(this);
         this.initLanguage();
     }
-    initAriaLive() {
-        if (Array.from(this.children).some((element) => element.tagName === 'ATOMIC-ARIA-LIVE')) {
-            return;
-        }
-        const ariaLive = document.createElement('atomic-aria-live');
-        this.prepend(ariaLive);
-    }
     initContext() {
         this.context = buildContext(this.engine);
     }
@@ -168,21 +163,11 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
             i18n: this.i18n,
             store: this.store,
             interfaceElement: this,
-            addAdoptedStyleSheets: (stylesheet) => {
-                const parent = this.getRootNode();
-                const styleSheet = stylesheet;
-                const isDocumentOrShadowRoot = parent instanceof Document || parent instanceof ShadowRoot;
-                if (styleSheet &&
-                    isDocumentOrShadowRoot &&
-                    !parent.adoptedStyleSheets.includes(styleSheet)) {
-                    parent.adoptedStyleSheets.push(styleSheet);
-                }
-            },
         };
     }
     initLanguage() {
         if (!this.language) {
-            this.commonInterfaceHelper.onLanguageChange(this.context.state.language);
+            this.interfaceController.onLanguageChange(this.context.state.language);
         }
     }
 };
@@ -215,9 +200,7 @@ __decorate([
 __decorate([
     property({
         type: Boolean,
-        converter: {
-            fromAttribute: (value) => value !== 'false',
-        },
+        converter: booleanConverter,
         reflect: true,
     })
 ], AtomicCommerceRecommendationInterface.prototype, "analytics", void 0);
@@ -230,6 +213,9 @@ __decorate([
 __decorate([
     watch('language')
 ], AtomicCommerceRecommendationInterface.prototype, "updateLanguage", null);
+__decorate([
+    errorGuard()
+], AtomicCommerceRecommendationInterface.prototype, "render", null);
 AtomicCommerceRecommendationInterface = __decorate([
     customElement('atomic-commerce-recommendation-interface'),
     withTailwindStyles

package/dist/atomic/components/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.js

@@ -27,6 +27,9 @@ import { renderSubmitButton } from '../../common/search-box/submit-button';
 import { SuggestionManager } from '../../common/suggestions/suggestion-manager';
 import { elementHasQuery, } from '../../common/suggestions/suggestions-common';
 import styles from './atomic-commerce-search-box.tw.css';
+import '../atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products';
+import '../atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions';
+import '../atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries';
 /**
  * The `atomic-commerce-search-box` component enables users to perform product searches with built-in query suggestions and optional redirection to a search results page.
  *

package/dist/atomic/components/components/commerce/atomic-product-description/atomic-product-description.js

@@ -0,0 +1,149 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Schema, StringValue } from '@coveo/bueno';
+import { html, LitElement, nothing, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { createRef } from 'lit/directives/ref.js';
+import { booleanConverter } from "../../../converters/boolean-converter.js";
+import { bindingGuard } from "../../../decorators/binding-guard.js";
+import { bindings } from "../../../decorators/bindings.js";
+import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
+import { errorGuard } from "../../../decorators/error-guard.js";
+import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom.js";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { renderExpandableText, } from '../../common/expandable-text/expandable-text.js';
+import styles from './atomic-product-description.tw.css';
+import '../atomic-product-text/atomic-product-text.js';
+/**
+ * The `atomic-product-description` component renders the description of a product.
+ *
+ * @part expandable-text - The part that contains the product description text.
+ */
+let AtomicProductDescription = class AtomicProductDescription extends LitElement {
+    initialize() { }
+    constructor() {
+        super();
+        this.productController = createProductContextController(this);
+        this.isExpanded = false;
+        this.isTruncated = false;
+        this.descriptionRef = createRef();
+        /**
+         * The number of lines after which the product description should be truncated. A value of "none" will disable truncation.
+         */
+        this.truncateAfter = '2';
+        /**
+         * The name of the description field to use.
+         */
+        this.field = 'ec_shortdesc';
+        /**
+         * Whether the description should be collapsible after being expanded.
+         */
+        this.isCollapsible = true;
+        this.onToggleExpand = (e) => {
+            if (e) {
+                e.stopPropagation();
+            }
+            this.isExpanded = !this.isExpanded;
+        };
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.descriptionRef.value) {
+                this.isTruncated =
+                    this.descriptionRef.value.scrollHeight >
+                        this.descriptionRef.value.clientHeight;
+            }
+        });
+    }
+    validateProps() {
+        new Schema({
+            truncateAfter: new StringValue({
+                constrainTo: ['none', '1', '2', '3', '4'],
+            }),
+            field: new StringValue({
+                constrainTo: ['ec_shortdesc', 'ec_description'],
+            }),
+        }).validate({
+            truncateAfter: this.truncateAfter,
+            field: this.field,
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('truncateAfter') ||
+            changedProperties.has('field')) {
+            this.validateProps();
+        }
+    }
+    firstUpdated() {
+        if (this.descriptionRef.value) {
+            this.resizeObserver.observe(this.descriptionRef.value);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver.disconnect();
+    }
+    get product() {
+        return this.productController.item;
+    }
+    render() {
+        const productDescription = this.product?.[this.field] ?? null;
+        if (!productDescription) {
+            return html `${nothing}`;
+        }
+        return html `${renderExpandableText({
+            props: {
+                isExpanded: this.isExpanded,
+                isTruncated: this.isTruncated,
+                truncateAfter: this.truncateAfter,
+                onToggleExpand: this.onToggleExpand,
+                showMoreLabel: this.bindings.i18n.t('show-more'),
+                showLessLabel: this.bindings.i18n.t('show-less'),
+                isCollapsible: this.isCollapsible,
+                textRef: this.descriptionRef,
+            },
+        })(html `
+      <atomic-product-text field=${this.field}></atomic-product-text>
+    `)}`;
+    }
+};
+AtomicProductDescription.styles = unsafeCSS(styles);
+__decorate([
+    state()
+], AtomicProductDescription.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicProductDescription.prototype, "isExpanded", void 0);
+__decorate([
+    state()
+], AtomicProductDescription.prototype, "isTruncated", void 0);
+__decorate([
+    property({
+        type: String,
+        attribute: 'truncate-after',
+    })
+], AtomicProductDescription.prototype, "truncateAfter", void 0);
+__decorate([
+    property()
+], AtomicProductDescription.prototype, "field", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        converter: booleanConverter,
+        attribute: 'is-collapsible',
+    })
+], AtomicProductDescription.prototype, "isCollapsible", void 0);
+__decorate([
+    errorGuard(),
+    bindingGuard()
+], AtomicProductDescription.prototype, "render", null);
+AtomicProductDescription = __decorate([
+    customElement('atomic-product-description'),
+    withTailwindStyles,
+    injectStylesForNoShadowDOM,
+    bindings()
+], AtomicProductDescription);
+export { AtomicProductDescription };

package/dist/atomic/components/components/commerce/atomic-product-description/atomic-product-description.tw.css.js

@@ -0,0 +1,3 @@
+const css = `/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.expandable-text{line-height:var(--line-height)}.min-lines-1{min-height:calc(var(--line-height)*1)}.min-lines-2{min-height:calc(var(--line-height)*2)}.min-lines-3{min-height:calc(var(--line-height)*3)}.min-lines-4{min-height:calc(var(--line-height)*4)}`;
+export default [css];

package/dist/atomic/components/components/commerce/atomic-product-template/atomic-product-template.js

@@ -19,6 +19,7 @@ import '../atomic-product-children/atomic-product-children';
 import '../atomic-product-multi-value-text/atomic-product-multi-value-text';
 import '../atomic-product-price/atomic-product-price';
 import '../atomic-product-numeric-field-value/atomic-product-numeric-field-value';
+import '../atomic-product-description/atomic-product-description';
 /**
  * * A product template determines the format of the query results, depending on the conditions that are defined for each template.
  *

package/dist/atomic/components/components/commerce/index.js

@@ -22,6 +22,7 @@ export { AtomicCommerceSortDropdown } from './atomic-commerce-sort-dropdown/atom
 export { AtomicCommerceText } from './atomic-commerce-text/atomic-commerce-text.js';
 export { AtomicProduct } from './atomic-product/atomic-product.js';
 export { AtomicProductChildren } from './atomic-product-children/atomic-product-children.js';
+export { AtomicProductDescription } from './atomic-product-description/atomic-product-description.js';
 export { AtomicProductExcerpt } from './atomic-product-excerpt/atomic-product-excerpt.js';
 export { AtomicProductLink } from './atomic-product-link/atomic-product-link.js';
 export { AtomicProductMultiValueText } from './atomic-product-multi-value-text/atomic-product-multi-value-text.js';

package/dist/atomic/components/components/commerce/lazy-index.js

@@ -23,6 +23,7 @@ export default {
     'atomic-commerce-text': async () => await import('./atomic-commerce-text/atomic-commerce-text.js'),
     'atomic-product': async () => await import('./atomic-product/atomic-product.js'),
     'atomic-product-children': async () => await import('./atomic-product-children/atomic-product-children.js'),
+    'atomic-product-description': async () => await import('./atomic-product-description/atomic-product-description.js'),
     'atomic-product-excerpt': async () => await import('./atomic-product-excerpt/atomic-product-excerpt.js'),
     'atomic-product-link': async () => await import('./atomic-product-link/atomic-product-link.js'),
     'atomic-product-multi-value-text': async () => await import('./atomic-product-multi-value-text/atomic-product-multi-value-text.js'),

package/dist/atomic/components/components/common/interface/analytics-config.js

@@ -0,0 +1,38 @@
+import { getAtomicEnvironment } from '../../../global/environment';
+export function augmentWithExternalMiddleware(event, payload, config) {
+    if (config.analytics?.analyticsClientMiddleware) {
+        return config.analytics.analyticsClientMiddleware(event, payload);
+    }
+    return payload;
+}
+export function augmentAnalyticsWithAtomicVersion(payload) {
+    if (payload.customData) {
+        payload.customData.coveoAtomicVersion = getAtomicEnvironment().version;
+    }
+    return payload;
+}
+export function augmentAnalyticsConfigWithDocument() {
+    return {
+        documentLocation: document.location.href,
+        ...(document.referrer && { originLevel3: document.referrer }),
+    };
+}
+const versionMatcher = /^(\d+\.\d+\.\d+)/;
+export function augmentAnalyticsConfigWithAtomicVersion() {
+    return {
+        source: {
+            '@coveo/atomic': versionMatcher.exec(getAtomicEnvironment().version)?.[0] || '0.0.0',
+        },
+    };
+}
+export function getNextAnalyticsConfig(searchEngineConfig, enabled) {
+    const configuration = {
+        enabled,
+        documentLocation: document.location.href,
+        ...(document.referrer && { originLevel3: document.referrer }),
+    };
+    const analyticsConfiguration = searchEngineConfig.analytics ?? {};
+    Object.assign(analyticsConfiguration, augmentAnalyticsConfigWithAtomicVersion());
+    Object.assign(configuration, analyticsConfiguration);
+    return configuration;
+}

package/dist/atomic/components/components/common/interface/interface-controller.js

@@ -0,0 +1,89 @@
+import Backend from 'i18next-http-backend';
+import { setCoveoGlobal } from "../../../global/environment";
+import { loadDayjsLocale } from "../../../utils/dayjs-locales";
+import { i18nBackendOptions, i18nTranslationNamespace, init18n } from './i18n';
+export class InterfaceController {
+    constructor(host, globalVariableName) {
+        this.hangingComponentsInitialization = [];
+        this.host = host;
+        this.host.addController(this);
+        setCoveoGlobal(globalVariableName);
+    }
+    hostConnected() {
+        this.i18nPromise = init18n(this.host);
+        this.initAriaLive();
+    }
+    hostDisconnected() {
+        this.removeAriaLive();
+    }
+    onComponentInitializing(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.host.engine) {
+            event.detail(this.host.bindings);
+            return;
+        }
+        this.hangingComponentsInitialization.push(event);
+    }
+    async onInitialization(initEngine) {
+        if (this.host.engine) {
+            this.host.engine.logger.warn(`The ${this.interfaceTagname} component "initialize" has already been called.`, this.host);
+            return;
+        }
+        this.host.updateIconAssetsPath();
+        initEngine();
+        if (this.host.registerFieldsToInclude) {
+            this.host.registerFieldsToInclude();
+        }
+        loadDayjsLocale(this.host.language || 'en');
+        await this.i18nPromise;
+        this.initComponents();
+    }
+    onAnalyticsChange() {
+        const { engine, analytics } = this.host;
+        if (!this.engineIsCreated(engine)) {
+            return;
+        }
+        if (!analytics) {
+            engine.disableAnalytics();
+            return;
+        }
+        engine.enableAnalytics();
+    }
+    onLanguageChange(newLanguage) {
+        const language = newLanguage ?? this.host.language;
+        const languageWithFallback = language ?? 'en';
+        const { i18n } = this.host;
+        loadDayjsLocale(languageWithFallback);
+        new Backend(i18n.services, i18nBackendOptions(this.host)).read(languageWithFallback.split('-')[0], i18nTranslationNamespace, (_, data) => {
+            i18n.addResourceBundle(languageWithFallback.split('-')[0], i18nTranslationNamespace, data, true, false);
+            i18n.changeLanguage(language);
+        });
+    }
+    engineIsCreated(engine) {
+        if (!engine) {
+            console.error(`You have to call "initialize" on the ${this.interfaceTagname} component before modifying the props or calling other public methods.`, this.host);
+            return false;
+        }
+        return true;
+    }
+    get interfaceTagname() {
+        return this.host.tagName.toLowerCase();
+    }
+    initComponents() {
+        this.hangingComponentsInitialization.forEach((event) => event.detail(this.host.bindings));
+    }
+    initAriaLive() {
+        if (Array.from(this.host.children).some((element) => element.tagName === 'ATOMIC-ARIA-LIVE')) {
+            return;
+        }
+        const ariaLive = document.createElement('atomic-aria-live');
+        this.host.prepend(ariaLive);
+    }
+    removeAriaLive() {
+        const ariaLive = this.host.querySelector('atomic-aria-live');
+        if (ariaLive) {
+            ariaLive.remove();
+        }
+    }
+}

package/dist/atomic/components/global/environment.js

@@ -4,7 +4,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment() {
     return {
-        version: "3.31.2-pre.8be4e70346".VERSION,
+        version: "3.31.2-pre.8c3f1d1fa1",
         headlessVersion: VERSION,
     };
 }

package/dist/atomic/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAca,kBAAmB,SAAQ,KAAK;IAC3C,YAAY,WAAmB,EAAE,UAAkB;QACjD,KAAK,CACH,QAAQ,WAAW,sCAAsC,UAAU,YAAY,CAChF,CAAC;KACH;;;ACfH,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;SAIpC,gBAAgB,CAAI,OAAgB,EAAE,UAAkB;IACtE,OAAO,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,MAAM;QACpC,MAAM,KAAK,GAAG,gBAAgB,CAC5B,oBAAoB,EACpB,CAAC,IAAO;YACN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;SACtB,CACF,CAAC;QACF,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACjC,MAAM,CACJ,IAAI,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,CACnE,CAAC;SACH;KACF,CAAC,CAAC;AACL;;ACoDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/decorators/commerce/product-template-decorators.ts"],"sourcesContent":["import type {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\nimport type {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\n\ntype LitElementWithError = Omit<\n  Pick<InitializableComponent, 'error'>,\n  'error'\n> &\n  LitElement & {\n    error: Error | null;\n  };\n\nconst itemContextEventName = 'atomic/resolveResult';\n\nexport class MissingParentError extends Error {\n  constructor(elementName: string, parentName: string) {\n    super(\n      `The \"${elementName}\" element must be the child of an \"${parentName}\" element.`\n    );\n  }\n}\n\nfunction extractFolded<T = Record<string, unknown>>(\n  item: Record<string, unknown>,\n  returnFolded: boolean\n): T {\n  if (returnFolded) {\n    if ('children' in item) {\n      return item as T;\n    } else {\n      return {children: [], result: item} as T;\n    }\n  }\n\n  if ('children' in item && 'result' in item) {\n    return item.result as T;\n  }\n  return item as T;\n}\n\n/**\n * A reactive controller that manages item context data from parent components.\n * Handles fetching item data via custom events and manages error states.\n */\nexport class ItemContextController<T = Record<string, unknown>>\n  implements ReactiveController\n{\n  private host: ReactiveControllerHost & LitElementWithError;\n  private parentName: string;\n  private folded: boolean;\n  private _item: T | null = null;\n  private _error: MissingParentError | null = null;\n\n  constructor(\n    host: ReactiveControllerHost & LitElementWithError,\n    options: {parentName?: string; folded?: boolean} = {}\n  ) {\n    this.host = host;\n    this.parentName = options.parentName ?? 'atomic-result';\n    this.folded = options.folded ?? false;\n    host.addController(this);\n  }\n\n  get item(): T | null {\n    return this._error ? null : this._item;\n  }\n\n  get error(): MissingParentError | null {\n    return this._error;\n  }\n\n  get hasError(): boolean {\n    return this._error !== null;\n  }\n\n  hostConnected(): void {\n    this._resolveItemContext();\n  }\n\n  private _resolveItemContext(): void {\n    const event = buildCustomEvent(\n      itemContextEventName,\n      (item: Record<string, unknown>) => {\n        this._item = extractFolded<T>(item, this.folded);\n        this._error = null;\n        this.host.error = null;\n        this.host.requestUpdate();\n      }\n    );\n\n    const canceled = this.host.dispatchEvent(event);\n    if (canceled) {\n      const elementName = (this.host as Element).nodeName.toLowerCase();\n      this._error = new MissingParentError(elementName, this.parentName);\n      this._item = null;\n      this.host.error = this._error;\n      this.host.requestUpdate();\n    }\n  }\n}\n\ntype ItemContextEventHandler<T> = (item: T) => void;\nexport type ItemContextEvent<T> = CustomEvent<ItemContextEventHandler<T>>;\n","import {closest} from '../../../utils/dom-utils.js';\nimport {buildCustomEvent} from '../../../utils/event-utils.js';\nimport {MissingParentError} from './context/item-context-controller.js';\n\nconst itemContextEventName = 'atomic/resolveResult';\n\ntype ItemContextEventHandler<T> = (item: T) => void;\n\nexport function fetchItemContext<T>(element: Element, parentName: string) {\n  return new Promise<T>((resolve, reject) => {\n    const event = buildCustomEvent<ItemContextEventHandler<T>>(\n      itemContextEventName,\n      (item: T) => {\n        return resolve(item);\n      }\n    );\n    element.dispatchEvent(event);\n\n    if (!closest(element, parentName)) {\n      reject(\n        new MissingParentError(element.nodeName.toLowerCase(), parentName)\n      );\n    }\n  });\n}\n","import type {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport type {LitElement} from 'lit';\nimport {\n  InteractiveItemContextController,\n  type InteractiveItemContextEvent,\n} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  type ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.\n *\n * @param host - The Lit component instance\n * @param options - Configuration options\n * @returns ItemContextController instance configured for atomic-product\n *\n * @example\n * ```typescript\n * @customElement('my-product-component')\n * export class MyProductComponent extends LitElement {\n *   private productController = createProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.productController.item;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createProductContextController(\n  host: LitElement & {error: Error | null},\n  options: {folded?: boolean} = {}\n): ItemContextController<Product> {\n  return new ItemContextController<Product>(host, {\n    parentName: 'atomic-product',\n    folded: options.folded ?? false,\n  });\n}\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.\n *\n * @param host - The Lit component instance\n * @returns InteractiveItemContextController instance\n *\n * @example\n * ```typescript\n * @customElement('my-interactive-product-component')\n * export class MyInteractiveProductComponent extends LitElement {\n *   private interactiveProductController = createInteractiveProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.interactiveProductController.interactiveItem;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createInteractiveProductContextController(\n  host: LitElement & {error: Error}\n): InteractiveItemContextController<InteractiveProduct> {\n  return new InteractiveItemContextController<InteractiveProduct>(host);\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent<\n  T extends InteractiveProduct = InteractiveProduct,\n> = InteractiveItemContextEvent<T>;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This utility function is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the utility function in the [`connectedCallback` lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered `atomic-product`.\n * @returns A promise that resolves on initialization of the parent `atomic-product` element, or rejects when there is no parent `atomic-product` element.\n */\nexport function fetchProductContext<T extends Product>(element: Element) {\n  return fetchItemContext<T>(element, 'atomic-product');\n}\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAca,kBAAmB,SAAQ,KAAK;IAC3C,YAAY,WAAmB,EAAE,UAAkB;QACjD,KAAK,CACH,QAAQ,WAAW,sCAAsC,UAAU,YAAY,CAChF,CAAC;KACH;;;ACfH,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;SAIpC,gBAAgB,CAAI,OAAgB,EAAE,UAAkB;IACtE,OAAO,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,MAAM;QACpC,MAAM,KAAK,GAAG,gBAAgB,CAC5B,oBAAoB,EACpB,CAAC,IAAO;YACN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;SACtB,CACF,CAAC;QACF,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACjC,MAAM,CACJ,IAAI,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,CACnE,CAAC;SACH;KACF,CAAC,CAAC;AACL;;ACoDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/decorators/commerce/product-template-decorators.ts"],"sourcesContent":["import type {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\nimport type {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\n\ntype LitElementWithError = Omit<\n  Pick<InitializableComponent, 'error'>,\n  'error'\n> &\n  LitElement & {\n    error: Error | null;\n  };\n\nconst itemContextEventName = 'atomic/resolveResult';\n\nexport class MissingParentError extends Error {\n  constructor(elementName: string, parentName: string) {\n    super(\n      `The \"${elementName}\" element must be the child of an \"${parentName}\" element.`\n    );\n  }\n}\n\nfunction extractFolded<T = Record<string, unknown>>(\n  item: Record<string, unknown>,\n  returnFolded: boolean\n): T {\n  if (returnFolded) {\n    if ('children' in item) {\n      return item as T;\n    } else {\n      return {children: [], result: item} as T;\n    }\n  }\n\n  if ('children' in item && 'result' in item) {\n    return item.result as T;\n  }\n  return item as T;\n}\n\n/**\n * A reactive controller that manages item context data from parent components.\n * Handles fetching item data via custom events and manages error states.\n */\nexport class ItemContextController<T = Record<string, unknown>>\n  implements ReactiveController\n{\n  private host: ReactiveControllerHost & LitElementWithError;\n  private parentName: string;\n  private folded: boolean;\n  private _item: T | null = null;\n  private _error: MissingParentError | null = null;\n\n  constructor(\n    host: ReactiveControllerHost & LitElementWithError,\n    options: {parentName?: string; folded?: boolean} = {}\n  ) {\n    this.host = host;\n    this.parentName = options.parentName ?? 'atomic-result';\n    this.folded = options.folded ?? false;\n    host.addController(this);\n  }\n\n  get item(): T | null {\n    return this._error ? null : this._item;\n  }\n\n  get error(): MissingParentError | null {\n    return this._error;\n  }\n\n  get hasError(): boolean {\n    return this._error !== null;\n  }\n\n  hostConnected(): void {\n    this._resolveItemContext();\n  }\n\n  private _resolveItemContext(): void {\n    const event = buildCustomEvent(\n      itemContextEventName,\n      (item: Record<string, unknown>) => {\n        this._item = extractFolded<T>(item, this.folded);\n        this._error = null;\n        this.host.error = null;\n        this.host.requestUpdate();\n      }\n    );\n\n    const canceled = this.host.dispatchEvent(event);\n    if (canceled) {\n      const elementName = (this.host as Element).nodeName.toLowerCase();\n      this._error = new MissingParentError(elementName, this.parentName);\n      this._item = null;\n      this.host.error = this._error;\n      this.host.requestUpdate();\n    }\n  }\n}\n\ntype ItemContextEventHandler<T> = (item: T) => void;\nexport type ItemContextEvent<T> = CustomEvent<ItemContextEventHandler<T>>;\n","import {closest} from '../../../utils/dom-utils.js';\nimport {buildCustomEvent} from '../../../utils/event-utils.js';\nimport {MissingParentError} from './context/item-context-controller.js';\n\nconst itemContextEventName = 'atomic/resolveResult';\n\ntype ItemContextEventHandler<T> = (item: T) => void;\n\nexport function fetchItemContext<T>(element: Element, parentName: string) {\n  return new Promise<T>((resolve, reject) => {\n    const event = buildCustomEvent<ItemContextEventHandler<T>>(\n      itemContextEventName,\n      (item: T) => {\n        return resolve(item);\n      }\n    );\n    element.dispatchEvent(event);\n\n    if (!closest(element, parentName)) {\n      reject(\n        new MissingParentError(element.nodeName.toLowerCase(), parentName)\n      );\n    }\n  });\n}\n","import type {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport type {LitElement} from 'lit';\nimport {\n  InteractiveItemContextController,\n  type InteractiveItemContextEvent,\n} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  type ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.\n *\n * @param host - The Lit component instance\n * @param options - Configuration options\n * @returns ItemContextController instance configured for atomic-product\n *\n * @example\n * ```typescript\n * @customElement('my-product-component')\n * export class MyProductComponent extends LitElement {\n *   private productController = createProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.productController.item;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createProductContextController(\n  host: LitElement & {error: Error | null},\n  options: {folded?: boolean} = {}\n): ItemContextController<Product> {\n  return new ItemContextController<Product>(host, {\n    parentName: 'atomic-product',\n    folded: options.folded ?? false,\n  });\n}\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.\n *\n * @param host - The Lit component instance\n * @returns InteractiveItemContextController instance\n *\n * @example\n * ```typescript\n * @customElement('my-interactive-product-component')\n * export class MyInteractiveProductComponent extends LitElement {\n *   private interactiveProductController = createInteractiveProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.interactiveProductController.interactiveItem;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createInteractiveProductContextController(\n  host: LitElement & {error: Error}\n): InteractiveItemContextController<InteractiveProduct> {\n  return new InteractiveItemContextController<InteractiveProduct>(host);\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent<\n  T extends InteractiveProduct = InteractiveProduct,\n> = InteractiveItemContextEvent<T>;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This utility function is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the utility function in the [`connectedCallback` lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered `atomic-product`.\n * @returns A promise that resolves on initialization of the parent `atomic-product` element, or rejects when there is no parent `atomic-product` element.\n */\nexport function fetchProductContext<T extends Product>(element: Element) {\n  return fetchItemContext<T>(element, 'atomic-product');\n}\n"],"version":3}

package/dist/atomic/components/stencil-facet-show-more-less.js

@@ -1,6 +1,5 @@
 import { s as shouldUpdateFacetSearchComponent } from './stencil-facet-value-label-highlight.js';
 import { h } from '@stencil/core/internal/client';
-import { M as MinusIcon, P as PlusIcon } from './plus.js';
 import { B as Button } from './stencil-button.js';
 
 function announceFacetSearchResultsWithAriaLive(facet, label, setAriaLive, i18n) {
@@ -17,6 +16,13 @@ function announceFacetSearchResultsWithAriaLive(facet, label, setAriaLive, i18n)
     });
 }
 
+const MinusIcon = `<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m64 208h384v96h-384z"/></svg>`;
+
+const PlusIcon = `<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <path d="M496 208H304V16h-96v192H16v96h192v192h96V304h192"/>
+</svg>
+`;
+
 const FacetShowMoreLess = (props) => {
     const label = props.i18n.t(props.label);
     const showMore = props.i18n.t('show-more');

package/dist/atomic/components/stencil-facet-show-more-less.js.map

@@ -1 +1 @@
-{"file":"stencil-facet-show-more-less.js","mappings":";;;;;SAIgB,sCAAsC,CACpD,KAA0E,EAC1E,KAAa,EACb,WAAkC,EAClC,IAAU;IAEV,IAAI,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;IACxC,KAAK,CAAC,SAAS,CAAC;QACd,IACE,gCAAgC,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,SAAS,CAAC;YACpE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,EAC7B;YACA,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;YAEpC,WAAW,CACT,IAAI,CAAC,CAAC,CAAC,4BAA4B,EAAE;gBACnC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM;gBAC5C,KAAK;aACN,CAAC,CACH,CAAC;SACH;KACF,CAAC,CAAC;AACL;;MCTa,iBAAiB,GAA4C,CACxE,KAAK;IAEL,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC3C,MAAM,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAwB,EAAE;QACjE,KAAK;KACN,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC3C,MAAM,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAwB,EAAE;QACjE,KAAK;KACN,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,sDAAsD,CAAC;IAC1E,MAAM,WAAW,GAAG,cAAc,CAAC;IACnC,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE;QACxD,OAAO;KACR;IAED,QACE,WAAK,KAAK,EAAC,MAAM;QACf,EAAC,MAAM,IACL,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,GAAG,UAAU,IAAI,KAAK,CAAC,iBAAiB,GAAG,EAAE,GAAG,QAAQ,EAAE,EACjE,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,MAAM,KAAK,CAAC,UAAU,EAAE,EACjC,GAAG,EAAE,KAAK,CAAC,WAAW;YAEtB,mBACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,SAAS,GACF;YACf,YAAM,KAAK,EAAC,UAAU,IAAE,QAAQ,CAAQ,CACjC;QACT,EAAC,MAAM,IACL,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,GAAG,UAAU,IAAI,KAAK,CAAC,iBAAiB,GAAG,EAAE,GAAG,QAAQ,EAAE,EACjE,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,MAAM,KAAK,CAAC,UAAU,EAAE,EACjC,GAAG,EAAE,KAAK,CAAC,WAAW;YAEtB,mBACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,QAAQ,GACD;YACf,YAAM,KAAK,EAAC,UAAU,IAAE,QAAQ,CAAQ,CACjC,CACL,EACN;AACJ;;;;","names":[],"sources":["src/components/common/facets/facet-search/facet-search-aria-live.ts","src/components/common/facets/facet-show-more-less/stencil-facet-show-more-less.tsx"],"sourcesContent":["import type {Facet, FacetSearchState} from '@coveo/headless';\nimport type {i18n} from 'i18next';\nimport {shouldUpdateFacetSearchComponent} from './facet-search-utils';\n\nexport function announceFacetSearchResultsWithAriaLive(\n  facet: Pick<Facet, 'subscribe'> & {state: {facetSearch: FacetSearchState}},\n  label: string,\n  setAriaLive: (msg: string) => void,\n  i18n: i18n\n) {\n  let prevState = facet.state.facetSearch;\n  facet.subscribe(() => {\n    if (\n      shouldUpdateFacetSearchComponent(facet.state.facetSearch, prevState) &&\n      facet.state.facetSearch.query\n    ) {\n      prevState = facet.state.facetSearch;\n\n      setAriaLive(\n        i18n.t('facet-search-results-count', {\n          count: facet.state.facetSearch.values.length,\n          label,\n        })\n      );\n    }\n  });\n}\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport MinusIcon from '../../../../images/minus.svg';\nimport PlusIcon from '../../../../images/plus.svg';\nimport {Button} from '../../stencil-button';\n\ninterface FacetShowMoreProps {\n  label: string;\n  i18n: i18n;\n  canShowLessValues: boolean;\n  canShowMoreValues: boolean;\n  onShowMore(): void;\n  onShowLess(): void;\n  showMoreRef?: (element?: HTMLButtonElement) => void;\n  showLessRef?: (element?: HTMLButtonElement) => void;\n}\n\nexport const FacetShowMoreLess: FunctionalComponent<FacetShowMoreProps> = (\n  props\n) => {\n  const label = props.i18n.t(props.label);\n  const showMore = props.i18n.t('show-more');\n  const showMoreFacetValues = props.i18n.t('show-more-facet-values', {\n    label,\n  });\n  const showLess = props.i18n.t('show-less');\n  const showLessFacetValues = props.i18n.t('show-less-facet-values', {\n    label,\n  });\n  const btnClasses = 'flex items-baseline text-left p-2 text-sm max-w-full';\n  const iconClasses = 'w-2 h-2 mr-1';\n  if (!props.canShowLessValues && !props.canShowMoreValues) {\n    return;\n  }\n\n  return (\n    <div class=\"mt-2\">\n      <Button\n        style=\"text-primary\"\n        part=\"show-less\"\n        class={`${btnClasses} ${props.canShowLessValues ? '' : 'hidden'}`}\n        ariaLabel={showLessFacetValues}\n        onClick={() => props.onShowLess()}\n        ref={props.showLessRef}\n      >\n        <atomic-icon\n          part=\"show-more-less-icon\"\n          class={iconClasses}\n          icon={MinusIcon}\n        ></atomic-icon>\n        <span class=\"truncate\">{showLess}</span>\n      </Button>\n      <Button\n        style=\"text-primary\"\n        part=\"show-more\"\n        class={`${btnClasses} ${props.canShowMoreValues ? '' : 'hidden'}`}\n        ariaLabel={showMoreFacetValues}\n        onClick={() => props.onShowMore()}\n        ref={props.showMoreRef}\n      >\n        <atomic-icon\n          part=\"show-more-less-icon\"\n          class={iconClasses}\n          icon={PlusIcon}\n        ></atomic-icon>\n        <span class=\"truncate\">{showMore}</span>\n      </Button>\n    </div>\n  );\n};\n"],"version":3}
+{"file":"stencil-facet-show-more-less.js","mappings":";;;;SAIgB,sCAAsC,CACpD,KAA0E,EAC1E,KAAa,EACb,WAAkC,EAClC,IAAU;IAEV,IAAI,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;IACxC,KAAK,CAAC,SAAS,CAAC;QACd,IACE,gCAAgC,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,SAAS,CAAC;YACpE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,EAC7B;YACA,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;YAEpC,WAAW,CACT,IAAI,CAAC,CAAC,CAAC,4BAA4B,EAAE;gBACnC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM;gBAC5C,KAAK;aACN,CAAC,CACH,CAAC;SACH;KACF,CAAC,CAAC;AACL;;;;;;;;;MCTa,iBAAiB,GAA4C,CACxE,KAAK;IAEL,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC3C,MAAM,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAwB,EAAE;QACjE,KAAK;KACN,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC3C,MAAM,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAwB,EAAE;QACjE,KAAK;KACN,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,sDAAsD,CAAC;IAC1E,MAAM,WAAW,GAAG,cAAc,CAAC;IACnC,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE;QACxD,OAAO;KACR;IAED,QACE,WAAK,KAAK,EAAC,MAAM;QACf,EAAC,MAAM,IACL,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,GAAG,UAAU,IAAI,KAAK,CAAC,iBAAiB,GAAG,EAAE,GAAG,QAAQ,EAAE,EACjE,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,MAAM,KAAK,CAAC,UAAU,EAAE,EACjC,GAAG,EAAE,KAAK,CAAC,WAAW;YAEtB,mBACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,SAAS,GACF;YACf,YAAM,KAAK,EAAC,UAAU,IAAE,QAAQ,CAAQ,CACjC;QACT,EAAC,MAAM,IACL,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,GAAG,UAAU,IAAI,KAAK,CAAC,iBAAiB,GAAG,EAAE,GAAG,QAAQ,EAAE,EACjE,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,MAAM,KAAK,CAAC,UAAU,EAAE,EACjC,GAAG,EAAE,KAAK,CAAC,WAAW;YAEtB,mBACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,QAAQ,GACD;YACf,YAAM,KAAK,EAAC,UAAU,IAAE,QAAQ,CAAQ,CACjC,CACL,EACN;AACJ;;;;","names":[],"sources":["src/components/common/facets/facet-search/facet-search-aria-live.ts","src/components/common/facets/facet-show-more-less/stencil-facet-show-more-less.tsx"],"sourcesContent":["import type {Facet, FacetSearchState} from '@coveo/headless';\nimport type {i18n} from 'i18next';\nimport {shouldUpdateFacetSearchComponent} from './facet-search-utils';\n\nexport function announceFacetSearchResultsWithAriaLive(\n  facet: Pick<Facet, 'subscribe'> & {state: {facetSearch: FacetSearchState}},\n  label: string,\n  setAriaLive: (msg: string) => void,\n  i18n: i18n\n) {\n  let prevState = facet.state.facetSearch;\n  facet.subscribe(() => {\n    if (\n      shouldUpdateFacetSearchComponent(facet.state.facetSearch, prevState) &&\n      facet.state.facetSearch.query\n    ) {\n      prevState = facet.state.facetSearch;\n\n      setAriaLive(\n        i18n.t('facet-search-results-count', {\n          count: facet.state.facetSearch.values.length,\n          label,\n        })\n      );\n    }\n  });\n}\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport MinusIcon from '../../../../images/minus.svg';\nimport PlusIcon from '../../../../images/plus.svg';\nimport {Button} from '../../stencil-button';\n\ninterface FacetShowMoreProps {\n  label: string;\n  i18n: i18n;\n  canShowLessValues: boolean;\n  canShowMoreValues: boolean;\n  onShowMore(): void;\n  onShowLess(): void;\n  showMoreRef?: (element?: HTMLButtonElement) => void;\n  showLessRef?: (element?: HTMLButtonElement) => void;\n}\n\nexport const FacetShowMoreLess: FunctionalComponent<FacetShowMoreProps> = (\n  props\n) => {\n  const label = props.i18n.t(props.label);\n  const showMore = props.i18n.t('show-more');\n  const showMoreFacetValues = props.i18n.t('show-more-facet-values', {\n    label,\n  });\n  const showLess = props.i18n.t('show-less');\n  const showLessFacetValues = props.i18n.t('show-less-facet-values', {\n    label,\n  });\n  const btnClasses = 'flex items-baseline text-left p-2 text-sm max-w-full';\n  const iconClasses = 'w-2 h-2 mr-1';\n  if (!props.canShowLessValues && !props.canShowMoreValues) {\n    return;\n  }\n\n  return (\n    <div class=\"mt-2\">\n      <Button\n        style=\"text-primary\"\n        part=\"show-less\"\n        class={`${btnClasses} ${props.canShowLessValues ? '' : 'hidden'}`}\n        ariaLabel={showLessFacetValues}\n        onClick={() => props.onShowLess()}\n        ref={props.showLessRef}\n      >\n        <atomic-icon\n          part=\"show-more-less-icon\"\n          class={iconClasses}\n          icon={MinusIcon}\n        ></atomic-icon>\n        <span class=\"truncate\">{showLess}</span>\n      </Button>\n      <Button\n        style=\"text-primary\"\n        part=\"show-more\"\n        class={`${btnClasses} ${props.canShowMoreValues ? '' : 'hidden'}`}\n        ariaLabel={showMoreFacetValues}\n        onClick={() => props.onShowMore()}\n        ref={props.showMoreRef}\n      >\n        <atomic-icon\n          part=\"show-more-less-icon\"\n          class={iconClasses}\n          icon={PlusIcon}\n        ></atomic-icon>\n        <span class=\"truncate\">{showMore}</span>\n      </Button>\n    </div>\n  );\n};\n"],"version":3}