@coveo/atomic 3.32.2-pre.1ab0f91cdc → 3.32.2-pre.71dd71287c

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

@@ -4,7 +4,7 @@ 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, loadConfigurationActions, loadContextActions, } from '@coveo/headless/commerce';
+import { buildContext, VERSION as HEADLESS_VERSION, loadConfigurationActions, loadContextActions, } from '@coveo/headless/commerce';
 import { provide } from '@lit/context';
 import i18next from 'i18next';
 import { css, html, LitElement } from 'lit';
@@ -22,14 +22,16 @@ import { createCommerceRecommendationStore, } from './store.js';
 /**
  * The `atomic-commerce-recommendation-interface` component is meant to be used
  * as the parent of one or more `atomic-commerce-recommendation-list`
- * components. It handles the headless search engine and localization
+ * components. It handles the headless engine and localization
  * configurations.
+ *
+ * @slot default - The default slot where you can add child components to the interface.
  */
 let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationInterface extends ChildrenUpdateCompleteMixin(LitElement) {
     constructor() {
         super();
         this.bindings = {};
-        this.interfaceController = new InterfaceController(this, 'CoveoAtomic');
+        this.interfaceController = new InterfaceController(this, 'CoveoAtomic', HEADLESS_VERSION);
         /**
          * The CSS selector for the container the interface will scroll back to.
          */

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

@@ -32,7 +32,6 @@ import { randomID } from "../../../utils/utils";
 import styles from './atomic-commerce-recommendation-list.tw.css';
 /**
  * The `atomic-commerce-recommendation-list` component displays a list of product recommendations by applying one or more product templates.
- * @alpha
  *
  * @part result-list - The element containing the list of product recommendations.
  * @part result-list-grid-clickable-container - The parent of a recommended product and the clickable link encompassing it.

package/dist/atomic/components/components/commerce/atomic-commerce-refine-toggle/atomic-commerce-refine-toggle.js

@@ -21,8 +21,6 @@ import { refineToggleGuard } from '../../common/refine-modal/guard';
  *
  * @part button - The refine toggle button.
  * @part placeholder - The placeholder shown while the first request is being executed.
- *
- * @alpha
  */
 let AtomicCommerceRefineToggle = class AtomicCommerceRefineToggle extends LitElement {
     initialize() {

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

@@ -73,8 +73,6 @@ import '../atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-
  * @part instant-results-show-all-button - The button inside the clickable suggestion from the `atomic-commerce-search-box-instant-products` component.
  *
  * @event redirect - Event that is emitted when a standalone search box redirection is triggered. By default, the search box will directly change the URL and redirect accordingly, so if you want to handle the redirection differently, use this event.
- *
- * @alpha
  */
 let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
     constructor() {

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

@@ -15,9 +15,7 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js"
 import { encodeForDomAttribute } from "../../../utils/string-utils";
 import { ProductTemplateProvider } from '../product-list/product-template-provider';
 /**
- * The `atomic-commerce-search-box-instant-products` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of instant products behavior.
- *
- * This component does not support accessibility out-of-the-box. To do so, see [Instant Results Accessibility](https://docs.coveo.com/en/atomic/latest/usage/accessibility/#instant-results-accessibility).
+ * The `atomic-commerce-search-box-instant-products` component can be added as a child of an `atomic-commerce-search-box` component, allowing for the configuration of instant products behavior.
  *
  * This component is not supported on mobile.
  *
@@ -25,7 +23,6 @@ import { ProductTemplateProvider } from '../product-list/product-template-provid
  * @part instant-results-item - The individual instant product item.
  *
  * @slot default - The default slot where the instant products are rendered.
- * @alpha
  */
 let AtomicCommerceSearchBoxInstantProducts = class AtomicCommerceSearchBoxInstantProducts extends LitElement {
     constructor() {

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

@@ -12,8 +12,7 @@ import { dispatchSearchBoxSuggestionsEvent, } from "../../common/suggestions/sug
 import { errorGuard } from "../../../decorators/error-guard";
 const SearchIcon = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.4 0c3.5 0 6.4 2.9 6.4 6.4 0 1.4-.4 2.7-1.2 3.7l4 4c.4.4.4 1 .1 1.5l-.1.1c-.2.2-.5.3-.8.3s-.6-.1-.8-.3l-4-4c-1 .7-2.3 1.2-3.7 1.2-3.4-.1-6.3-3-6.3-6.5s2.9-6.4 6.4-6.4zm0 2.1c-2.3 0-4.3 1.9-4.3 4.3s1.9 4.3 4.3 4.3 4.3-1.9 4.3-4.3-1.9-4.3-4.3-4.3z\"/></svg>";
 /**
- * The `atomic-commerce-search-box-query-suggestions` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of query suggestion behavior.
- * @alpha
+ * The `atomic-commerce-search-box-query-suggestions` component can be added as a child of an `atomic-commerce-search-box` component, allowing for the configuration of query suggestion behavior.
  */
 let AtomicCommerceSearchBoxQuerySuggestions = class AtomicCommerceSearchBoxQuerySuggestions extends LitElement {
     constructor() {

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

@@ -15,8 +15,6 @@ import { getPartialRecentQueryClearElement, getPartialRecentQueryElement, render
 import { dispatchSearchBoxSuggestionsEvent, } from '../../common/suggestions/suggestions-common';
 /**
  * The `atomic-commerce-search-box-recent-queries` component can be added as a child of an `atomic-commerce-search-box` component, allowing for the configuration of recent query suggestions.
- *
- * @alpha
  */
 let AtomicCommerceSearchBoxRecentQueries = class AtomicCommerceSearchBoxRecentQueries extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-sort-dropdown/atomic-commerce-sort-dropdown.js

@@ -27,8 +27,6 @@ import { getSortByLabel, renderCommerceSortOption } from '../sort/option';
  * @part select - The `<select>` element of the dropdown list.
  * @part select-separator - The element separating the select from the icon.
  * @part placeholder - The dropdown placeholder for while the interface is initializing.
- *
- * @alpha
  */
 let AtomicCommerceSortDropdown = class AtomicCommerceSortDropdown extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet.js

@@ -42,8 +42,6 @@ import styles from './atomic-commerce-timeframe-facet.tw.css';
  * @part input-start - The start date input field.
  * @part input-end - The end date input field.
  * @part input-apply-button - The button to apply date range selection.
- *
- * @internal
  */
 let AtomicCommerceTimeframeFacet = class AtomicCommerceTimeframeFacet extends InitializeBindingsMixin(LitElement) {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-product-field-condition/atomic-product-field-condition.js

@@ -16,8 +16,6 @@ import { makeDefinedConditions, makeMatchConditions, } from '../../common/produc
  * The condition properties can be based on any top-level product property of the `product` object, not restricted to fields (e.g., `ec_name`).
  *
  * @slot default - The content to render if the conditions are met.
- *
- * @alpha
  */
 let AtomicProductFieldCondition = class AtomicProductFieldCondition extends LitElement {
     constructor() {

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

@@ -22,7 +22,8 @@ import '../atomic-product-text/atomic-product-text';
 import { SlotsForNoShadowDOMMixin, } from "../../../mixins/slots-for-no-shadow-dom-mixin";
 import styles from './atomic-product-link.tw.css';
 /**
- * The `atomic-product-link` component automatically transforms a search product title into a clickable link that points to the original item.
+ * The `atomic-product-link` component automatically transforms a product `ec_name` into a clickable link that points to the original item.
+ *
  * @slot default - The content to display inside the link.
  * @slot attributes - Use `<a slot="attributes" target="_blank"></a>` to pass custom attributes to the generated link.
  */

package/dist/atomic/components/components/commerce/atomic-product-multi-value-text/atomic-product-multi-value-text.js

@@ -15,8 +15,6 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
 import { getFieldValueCaption } from '../../../utils/field-utils';
 import { titleToKebab } from '../../../utils/utils';
 /**
- * @alpha
- *
  * The `atomic-product-multi-value-text` component renders the values of a multi-value string field.
  *
  * @part product-multi-value-text-list - The list of field values.

package/dist/atomic/components/components/commerce/atomic-product-numeric-field-value/atomic-product-numeric-field-value.js

@@ -18,7 +18,6 @@ import { parseValue } from '../product-template-component-utils/product-utils.js
  * The `atomic-product-numeric-field-value` component renders the value of a number product field.
  *
  * The number can be formatted by adding a `atomic-format-number`, `atomic-format-currency` or `atomic-format-unit` component into this component.
- * @alpha
  */
 let AtomicProductNumericFieldValue = class AtomicProductNumericFieldValue extends LitElement {
     constructor() {

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

@@ -20,7 +20,6 @@ import { defaultCurrencyFormatter } from '../../common/formats/format-common.js'
 import { parseValue } from '../product-template-component-utils/product-utils.js';
 /**
  * The `atomic-product-price` component renders the price of a product.
- * @alpha
  */
 let AtomicProductPrice = class AtomicProductPrice extends LitElement {
     constructor() {

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

@@ -24,8 +24,6 @@ import { computeNumberOfStars, renderRating, } from '../../common/atomic-rating/
  * @cssprop --atomic-rating-icon-active-color - Color of the icon when active.
  * @cssprop --atomic-rating-icon-inactive-color - Color of the icon when inactive.
  * @cssprop --atomic-rating-icon-outline - Outline color of the icon.
- *
- * @alpha
  */
 let AtomicProductRating = class AtomicProductRating extends LitElement {
     constructor() {

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

@@ -33,8 +33,6 @@ import '../atomic-product-rating/atomic-product-rating';
  * @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that must not be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
  * @slot default - The default slot where to insert the template element.
  * @slot link - A `template` element that contains a single `atomic-product-link` component.
- *
- * @alpha
  */
 let AtomicProductTemplate = class AtomicProductTemplate extends LitElement {
     constructor() {

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

@@ -1,4 +1,4 @@
-import { getAtomicEnvironment } from '../../../global/environment';
+import { getAtomicVersion } from '../../../global/environment';
 export function augmentWithExternalMiddleware(event, payload, config) {
     if (config.analytics?.analyticsClientMiddleware) {
         return config.analytics.analyticsClientMiddleware(event, payload);
@@ -7,7 +7,7 @@ export function augmentWithExternalMiddleware(event, payload, config) {
 }
 export function augmentAnalyticsWithAtomicVersion(payload) {
     if (payload.customData) {
-        payload.customData.coveoAtomicVersion = getAtomicEnvironment().version;
+        payload.customData.coveoAtomicVersion = getAtomicVersion();
     }
     return payload;
 }
@@ -21,7 +21,7 @@ const versionMatcher = /^(\d+\.\d+\.\d+)/;
 export function augmentAnalyticsConfigWithAtomicVersion() {
     return {
         source: {
-            '@coveo/atomic': versionMatcher.exec(getAtomicEnvironment().version)?.[0] || '0.0.0',
+            '@coveo/atomic': versionMatcher.exec(getAtomicVersion())?.[0] || '0.0.0',
         },
     };
 }

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

@@ -3,11 +3,11 @@ import { setCoveoGlobal } from "../../../global/environment";
 import { loadDayjsLocale } from "../../../utils/dayjs-locales";
 import { i18nBackendOptions, i18nTranslationNamespace, init18n } from './i18n';
 export class InterfaceController {
-    constructor(host, globalVariableName) {
+    constructor(host, globalVariableName, headlessVersion) {
         this.hangingComponentsInitialization = [];
         this.host = host;
         this.host.addController(this);
-        setCoveoGlobal(globalVariableName);
+        setCoveoGlobal(globalVariableName, headlessVersion);
     }
     hostConnected() {
         this.i18nPromise = init18n(this.host);

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

@@ -1,2 +1 @@
-// Auto-generated file
-export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';
+export {};

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

@@ -1,4 +1,2 @@
 // Auto-generated file
-export default {
-    'atomic-results-per-page': async () => await import('./atomic-results-per-page/atomic-results-per-page.js'),
-};
+export default {};

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

@@ -1,16 +1,18 @@
-import { VERSION } from '@coveo/headless';
 function getWindow() {
     return window;
 }
-export function getAtomicEnvironment() {
+export function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.32.2-pre.1ab0f91cdc",
-        headlessVersion: VERSION,
+        version: "3.32.2-pre.71dd71287c",
+        headlessVersion,
     };
 }
-export function setCoveoGlobal(globalVariableName) {
+export function getAtomicVersion() {
+    return getAtomicEnvironment('').version;
+}
+export function setCoveoGlobal(globalVariableName, headlessVersion) {
     if (getWindow()[globalVariableName]) {
         return;
     }
-    getWindow()[globalVariableName] = getAtomicEnvironment();
+    getWindow()[globalVariableName] = getAtomicEnvironment(headlessVersion);
 }

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

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA;;;;;;;;;;;;SAYgB,cAAc,CAAoB,OAAgB;IAChE,OAAO,WAAW,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACnD;;MCjCa,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/commerce/product-template-component-utils/stencil-product-template-decorators.tsx","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 {Product} from '@coveo/headless/commerce';\nimport {\n  InteractiveItemContext,\n  InteractiveItemContextEvent,\n  ItemContext,\n  ItemContextEvent,\n  itemContext,\n} from '../../common/item-list/stencil-item-decorators';\n\n/**\n * A [StencilJS property decorator](https://stenciljs.com/) to be used for product template components.\n * This allows the Stencil component to fetch the current product from its rendered parent, the `atomic-product` component.\n *\n * Example:\n * ```\n * @ProductContext() private product!: Product;\n * ```\n *\n * For more information and examples, view the [Utilities section](https://github.com/coveo/ui-kit/tree/master/packages/atomic#utilities) of the Coveo Atomic README.\n *\n * @deprecated should only be used for Stencil components. For Lit components, use `createProductContextController` from \\@/src/decorators/commerce/product-template-decorators.ts\n */\nexport function ProductContext(opts: {folded: boolean} = {folded: false}) {\n  return ItemContext({parentName: 'atomic-product', folded: opts.folded});\n}\n\nexport function InteractiveProductContext() {\n  return InteractiveItemContext();\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent = InteractiveItemContextEvent;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This method 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 method 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 *\n * @deprecated should only be used for Stencil components. For Lit components, use `fetchProductContext` from \\@/src/decorators/commerce/product-template-decorators.ts\n */\nexport function productContext<T extends Product>(element: Element) {\n  return itemContext<T>(element, 'atomic-product');\n}\n","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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA;;;;;;;;;;;;SAYgB,cAAc,CAAoB,OAAgB;IAChE,OAAO,WAAW,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACnD;;MCjCa,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/commerce/product-template-component-utils/stencil-product-template-decorators.tsx","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 {Product} from '@coveo/headless/commerce';\nimport {\n  InteractiveItemContext,\n  InteractiveItemContextEvent,\n  ItemContext,\n  ItemContextEvent,\n  itemContext,\n} from '../../common/item-list/stencil-item-decorators';\n\n/**\n * A [StencilJS property decorator](https://stenciljs.com/) to be used for product template components.\n * This allows the Stencil component to fetch the current product from its rendered parent, the `atomic-product` component.\n *\n * Example:\n * ```\n * @ProductContext() private product!: Product;\n * ```\n *\n * For more information and examples, view the [Utilities section](https://github.com/coveo/ui-kit/tree/master/packages/atomic#utilities) of the Coveo Atomic README.\n *\n * @deprecated should only be used for Stencil components. For Lit components, use `createProductContextController` from \\@/src/decorators/commerce/product-template-decorators.ts\n */\nexport function ProductContext(opts: {folded: boolean} = {folded: false}) {\n  return ItemContext({parentName: 'atomic-product', folded: opts.folded});\n}\n\nexport function InteractiveProductContext() {\n  return InteractiveItemContext();\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent = InteractiveItemContextEvent;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This method 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 method 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 *\n * @deprecated should only be used for Stencil components. For Lit components, use `fetchProductContext` from \\@/src/decorators/commerce/product-template-decorators.ts\n */\nexport function productContext<T extends Product>(element: Element) {\n  return itemContext<T>(element, 'atomic-product');\n}\n","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/ripple.js

@@ -0,0 +1,45 @@
+import { l as listenOnce } from './event-utils.js';
+
+const RIPPLE = 'ripple';
+function getAnimationDurationInMilliseconds(radiusPixels) {
+    // A 318px wide button has a duration of 700ms.
+    return Math.cbrt(radiusPixels) * 129.21;
+}
+function setPositionRelativeIfStatic(element) {
+    if (getComputedStyle(element).position === 'static') {
+        element.classList.add('ripple-relative');
+    }
+}
+async function createRipple(event, options) {
+    const button = options.parent ?? event.currentTarget;
+    const existingRipple = button.getElementsByClassName(RIPPLE)[0];
+    existingRipple?.remove();
+    button.classList.add('ripple-parent');
+    setPositionRelativeIfStatic(button);
+    Array.from(button.children).forEach(setPositionRelativeIfStatic);
+    const ripple = document.createElement('span');
+    ripple.classList.add(RIPPLE);
+    ripple.style.backgroundColor = `var(--atomic-${options.color})`;
+    ripple.setAttribute('part', RIPPLE);
+    const diameter = Math.max(button.clientWidth, button.clientHeight);
+    const radius = diameter / 2;
+    const animationDuration = getAnimationDurationInMilliseconds(radius);
+    const { top, left } = button.getBoundingClientRect();
+    ripple.style.width = ripple.style.height = `${diameter}px`;
+    ripple.style.left = `${event.clientX - (left + radius)}px`;
+    ripple.style.top = `${event.clientY - (top + radius)}px`;
+    ripple.style.setProperty('--animation-duration', `${animationDuration}ms`);
+    button.prepend(ripple);
+    await cleanupAnimationOnFinish(ripple, animationDuration);
+}
+async function cleanupAnimationOnFinish(ripple, animationDuration) {
+    listenOnce(ripple, 'animationend', () => {
+        ripple?.remove();
+    });
+    // Backup in case the button gets hidden or unmounted and the ripple hasn't been cleaned up.
+    setTimeout(() => ripple?.remove(), animationDuration + animationDuration * 0.1);
+}
+
+export { createRipple as c };
+
+//# sourceMappingURL=ripple.js.map

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

@@ -0,0 +1 @@
+{"file":"ripple.js","mappings":";;AAUA,MAAM,MAAM,GAAG,QAAQ,CAAC;AAExB,SAAS,kCAAkC,CAAC,YAAoB;;IAE9D,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,MAAM,CAAC;AAC1C,CAAC;AAED,SAAS,2BAA2B,CAAC,OAAgB;IACnD,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAK,QAAQ,EAAE;QACnD,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;KAC1C;AACH,CAAC;AAEM,eAAe,YAAY,CAAC,KAAiB,EAAE,OAAsB;IAC1E,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAK,KAAK,CAAC,aAAyB,CAAC;IAClE,MAAM,cAAc,GAAG,MAAM,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAChE,cAAc,EAAE,MAAM,EAAE,CAAC;IAEzB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACtC,2BAA2B,CAAC,MAAM,CAAC,CAAC;IACpC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC;IAEjE,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9C,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,gBAAgB,OAAO,CAAC,KAAK,GAAG,CAAC;IAChE,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEpC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IACnE,MAAM,MAAM,GAAG,QAAQ,GAAG,CAAC,CAAC;IAC5B,MAAM,iBAAiB,GAAG,kCAAkC,CAAC,MAAM,CAAC,CAAC;IACrE,MAAM,EAAC,GAAG,EAAE,IAAI,EAAC,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;IACnD,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,QAAQ,IAAI,CAAC;IAC3D,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,KAAK,CAAC,OAAO,IAAI,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;IAC3D,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC,OAAO,IAAI,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC;IACzD,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,GAAG,iBAAiB,IAAI,CAAC,CAAC;IAC3E,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACvB,MAAM,wBAAwB,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;AAC5D,CAAC;AAED,eAAe,wBAAwB,CACrC,MAAuB,EACvB,iBAAyB;IAEzB,UAAU,CAAC,MAAM,EAAE,cAAc,EAAE;QACjC,MAAM,EAAE,MAAM,EAAE,CAAC;KAClB,CAAC,CAAC;;IAEH,UAAU,CACR,MAAM,MAAM,EAAE,MAAM,EAAE,EACtB,iBAAiB,GAAG,iBAAiB,GAAG,GAAG,CAC5C,CAAC;AACJ;;;;","names":[],"sources":["src/utils/ripple.ts"],"sourcesContent":["import {listenOnce} from './event-utils';\n\ninterface RippleOptions {\n  color: string;\n  /**\n   * When the ripple's parent is not the event's origin\n   */\n  parent?: Element;\n}\n\nconst RIPPLE = 'ripple';\n\nfunction getAnimationDurationInMilliseconds(radiusPixels: number) {\n  // A 318px wide button has a duration of 700ms.\n  return Math.cbrt(radiusPixels) * 129.21;\n}\n\nfunction setPositionRelativeIfStatic(element: Element) {\n  if (getComputedStyle(element).position === 'static') {\n    element.classList.add('ripple-relative');\n  }\n}\n\nexport async function createRipple(event: MouseEvent, options: RippleOptions) {\n  const button = options.parent ?? (event.currentTarget as Element);\n  const existingRipple = button.getElementsByClassName(RIPPLE)[0];\n  existingRipple?.remove();\n\n  button.classList.add('ripple-parent');\n  setPositionRelativeIfStatic(button);\n  Array.from(button.children).forEach(setPositionRelativeIfStatic);\n\n  const ripple = document.createElement('span');\n  ripple.classList.add(RIPPLE);\n  ripple.style.backgroundColor = `var(--atomic-${options.color})`;\n  ripple.setAttribute('part', RIPPLE);\n\n  const diameter = Math.max(button.clientWidth, button.clientHeight);\n  const radius = diameter / 2;\n  const animationDuration = getAnimationDurationInMilliseconds(radius);\n  const {top, left} = button.getBoundingClientRect();\n  ripple.style.width = ripple.style.height = `${diameter}px`;\n  ripple.style.left = `${event.clientX - (left + radius)}px`;\n  ripple.style.top = `${event.clientY - (top + radius)}px`;\n  ripple.style.setProperty('--animation-duration', `${animationDuration}ms`);\n  button.prepend(ripple);\n  await cleanupAnimationOnFinish(ripple, animationDuration);\n}\n\nasync function cleanupAnimationOnFinish(\n  ripple: HTMLSpanElement,\n  animationDuration: number\n) {\n  listenOnce(ripple, 'animationend', () => {\n    ripple?.remove();\n  });\n  // Backup in case the button gets hidden or unmounted and the ripple hasn't been cleaned up.\n  setTimeout(\n    () => ripple?.remove(),\n    animationDuration + animationDuration * 0.1\n  );\n}\n"],"version":3}

package/dist/atomic/components/stencil-button.js

@@ -1,47 +1,7 @@
 import { h } from '@stencil/core/internal/client';
-import { l as listenOnce } from './event-utils.js';
+import { c as createRipple } from './ripple.js';
 import { a as getRippleColorForButtonStyle, g as getClassNameForButtonStyle } from './stencil-button-style.js';
 
-const RIPPLE = 'ripple';
-function getAnimationDurationInMilliseconds(radiusPixels) {
-    // A 318px wide button has a duration of 700ms.
-    return Math.cbrt(radiusPixels) * 129.21;
-}
-function setPositionRelativeIfStatic(element) {
-    if (getComputedStyle(element).position === 'static') {
-        element.classList.add('ripple-relative');
-    }
-}
-async function createRipple(event, options) {
-    const button = options.parent ?? event.currentTarget;
-    const existingRipple = button.getElementsByClassName(RIPPLE)[0];
-    existingRipple?.remove();
-    button.classList.add('ripple-parent');
-    setPositionRelativeIfStatic(button);
-    Array.from(button.children).forEach(setPositionRelativeIfStatic);
-    const ripple = document.createElement('span');
-    ripple.classList.add(RIPPLE);
-    ripple.style.backgroundColor = `var(--atomic-${options.color})`;
-    ripple.setAttribute('part', RIPPLE);
-    const diameter = Math.max(button.clientWidth, button.clientHeight);
-    const radius = diameter / 2;
-    const animationDuration = getAnimationDurationInMilliseconds(radius);
-    const { top, left } = button.getBoundingClientRect();
-    ripple.style.width = ripple.style.height = `${diameter}px`;
-    ripple.style.left = `${event.clientX - (left + radius)}px`;
-    ripple.style.top = `${event.clientY - (top + radius)}px`;
-    ripple.style.setProperty('--animation-duration', `${animationDuration}ms`);
-    button.prepend(ripple);
-    await cleanupAnimationOnFinish(ripple, animationDuration);
-}
-async function cleanupAnimationOnFinish(ripple, animationDuration) {
-    listenOnce(ripple, 'animationend', () => {
-        ripple?.remove();
-    });
-    // Backup in case the button gets hidden or unmounted and the ripple hasn't been cleaned up.
-    setTimeout(() => ripple?.remove(), animationDuration + animationDuration * 0.1);
-}
-
 /**
  * @deprecated Should only be used for Stencil components; for Lit components, use the button.ts file instead
  */
@@ -81,6 +41,6 @@ const Button = (props, children) => {
         children));
 };
 
-export { Button as B, createRipple as c };
+export { Button as B };
 
 //# sourceMappingURL=stencil-button.js.map

package/dist/atomic/components/stencil-button.js.map

@@ -1 +1 @@
-{"file":"stencil-button.js","mappings":"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","names":[],"sources":["src/utils/ripple.ts","src/components/common/stencil-button.tsx"],"sourcesContent":["import {listenOnce} from './event-utils';\n\ninterface RippleOptions {\n  color: string;\n  /**\n   * When the ripple's parent is not the event's origin\n   */\n  parent?: Element;\n}\n\nconst RIPPLE = 'ripple';\n\nfunction getAnimationDurationInMilliseconds(radiusPixels: number) {\n  // A 318px wide button has a duration of 700ms.\n  return Math.cbrt(radiusPixels) * 129.21;\n}\n\nfunction setPositionRelativeIfStatic(element: Element) {\n  if (getComputedStyle(element).position === 'static') {\n    element.classList.add('ripple-relative');\n  }\n}\n\nexport async function createRipple(event: MouseEvent, options: RippleOptions) {\n  const button = options.parent ?? (event.currentTarget as Element);\n  const existingRipple = button.getElementsByClassName(RIPPLE)[0];\n  existingRipple?.remove();\n\n  button.classList.add('ripple-parent');\n  setPositionRelativeIfStatic(button);\n  Array.from(button.children).forEach(setPositionRelativeIfStatic);\n\n  const ripple = document.createElement('span');\n  ripple.classList.add(RIPPLE);\n  ripple.style.backgroundColor = `var(--atomic-${options.color})`;\n  ripple.setAttribute('part', RIPPLE);\n\n  const diameter = Math.max(button.clientWidth, button.clientHeight);\n  const radius = diameter / 2;\n  const animationDuration = getAnimationDurationInMilliseconds(radius);\n  const {top, left} = button.getBoundingClientRect();\n  ripple.style.width = ripple.style.height = `${diameter}px`;\n  ripple.style.left = `${event.clientX - (left + radius)}px`;\n  ripple.style.top = `${event.clientY - (top + radius)}px`;\n  ripple.style.setProperty('--animation-duration', `${animationDuration}ms`);\n  button.prepend(ripple);\n  await cleanupAnimationOnFinish(ripple, animationDuration);\n}\n\nasync function cleanupAnimationOnFinish(\n  ripple: HTMLSpanElement,\n  animationDuration: number\n) {\n  listenOnce(ripple, 'animationend', () => {\n    ripple?.remove();\n  });\n  // Backup in case the button gets hidden or unmounted and the ripple hasn't been cleaned up.\n  setTimeout(\n    () => ripple?.remove(),\n    animationDuration + animationDuration * 0.1\n  );\n}\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {createRipple} from '../../utils/ripple';\nimport {\n  ButtonStyle,\n  getRippleColorForButtonStyle,\n  getClassNameForButtonStyle,\n} from './stencil-button-style';\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use ButtonProps interface instead\n */\nexport interface StencilButtonProps {\n  style: ButtonStyle;\n  onClick?(event?: MouseEvent): void;\n  class?: string;\n  text?: string;\n  part?: string;\n  type?: string;\n  form?: string;\n  role?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  ariaExpanded?: string;\n  ariaPressed?: string;\n  ariaChecked?: string;\n  ariaCurrent?: string;\n  ariaControls?: string;\n  ariaHidden?: string;\n  tabIndex?: string;\n  title?: string;\n  ref?(element?: HTMLButtonElement): void;\n}\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use the button.ts file instead\n */\nexport const Button: FunctionalComponent<StencilButtonProps> = (\n  props,\n  children\n) => {\n  const rippleColor = getRippleColorForButtonStyle(props.style);\n  const className = getClassNameForButtonStyle(props.style);\n\n  const attributes = {\n    class: props.class ? `${className} ${props.class}` : className,\n    part: props.part,\n    onClick: props.onClick,\n    title: props.title,\n    type: props.type,\n    role: props.role,\n    'aria-label': props.ariaLabel,\n    'aria-expanded': props.ariaExpanded,\n    'aria-pressed': props.ariaPressed,\n    'aria-checked': props.ariaChecked,\n    'aria-current': props.ariaCurrent,\n    'aria-controls': props.ariaControls,\n    'aria-hidden': props.ariaHidden,\n    disabled: props.disabled,\n    ref(buttonEl?: HTMLButtonElement) {\n      if (props.form) {\n        buttonEl?.setAttribute('form', props.form);\n      }\n      if (props.ariaHidden) {\n        buttonEl?.setAttribute('aria-hidden', props.ariaHidden);\n      }\n      if (props.tabIndex) {\n        buttonEl?.setAttribute('tabindex', props.tabIndex);\n      }\n      props.ref?.(buttonEl);\n    },\n  };\n\n  return (\n    <button\n      {...attributes}\n      onMouseDown={(e) => createRipple(e, {color: rippleColor})}\n    >\n      {props.text ? <span class=\"truncate\">{props.text}</span> : null}\n      {children}\n    </button>\n  );\n};\n"],"version":3}
+{"file":"stencil-button.js","mappings":";;;;AAiCA;;;MAGa,MAAM,GAA4C,CAC7D,KAAK,EACL,QAAQ;IAER,MAAM,WAAW,GAAG,4BAA4B,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,0BAA0B,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,UAAU,GAAG;QACjB,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,GAAG,SAAS,IAAI,KAAK,CAAC,KAAK,EAAE,GAAG,SAAS;QAC9D,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,YAAY,EAAE,KAAK,CAAC,SAAS;QAC7B,eAAe,EAAE,KAAK,CAAC,YAAY;QACnC,cAAc,EAAE,KAAK,CAAC,WAAW;QACjC,cAAc,EAAE,KAAK,CAAC,WAAW;QACjC,cAAc,EAAE,KAAK,CAAC,WAAW;QACjC,eAAe,EAAE,KAAK,CAAC,YAAY;QACnC,aAAa,EAAE,KAAK,CAAC,UAAU;QAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,GAAG,CAAC,QAA4B;YAC9B,IAAI,KAAK,CAAC,IAAI,EAAE;gBACd,QAAQ,EAAE,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;aAC5C;YACD,IAAI,KAAK,CAAC,UAAU,EAAE;gBACpB,QAAQ,EAAE,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;aACzD;YACD,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,QAAQ,EAAE,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;aACpD;YACD,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,CAAC;SACvB;KACF,CAAC;IAEF,QACE,iBACM,UAAU,EACd,WAAW,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,EAAE,EAAC,KAAK,EAAE,WAAW,EAAC,CAAC;QAExD,KAAK,CAAC,IAAI,GAAG,YAAM,KAAK,EAAC,UAAU,IAAE,KAAK,CAAC,IAAI,CAAQ,GAAG,IAAI;QAC9D,QAAQ,CACF,EACT;AACJ;;;;","names":[],"sources":["src/components/common/stencil-button.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {createRipple} from '../../utils/ripple';\nimport {\n  ButtonStyle,\n  getRippleColorForButtonStyle,\n  getClassNameForButtonStyle,\n} from './stencil-button-style';\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use ButtonProps interface instead\n */\nexport interface StencilButtonProps {\n  style: ButtonStyle;\n  onClick?(event?: MouseEvent): void;\n  class?: string;\n  text?: string;\n  part?: string;\n  type?: string;\n  form?: string;\n  role?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  ariaExpanded?: string;\n  ariaPressed?: string;\n  ariaChecked?: string;\n  ariaCurrent?: string;\n  ariaControls?: string;\n  ariaHidden?: string;\n  tabIndex?: string;\n  title?: string;\n  ref?(element?: HTMLButtonElement): void;\n}\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use the button.ts file instead\n */\nexport const Button: FunctionalComponent<StencilButtonProps> = (\n  props,\n  children\n) => {\n  const rippleColor = getRippleColorForButtonStyle(props.style);\n  const className = getClassNameForButtonStyle(props.style);\n\n  const attributes = {\n    class: props.class ? `${className} ${props.class}` : className,\n    part: props.part,\n    onClick: props.onClick,\n    title: props.title,\n    type: props.type,\n    role: props.role,\n    'aria-label': props.ariaLabel,\n    'aria-expanded': props.ariaExpanded,\n    'aria-pressed': props.ariaPressed,\n    'aria-checked': props.ariaChecked,\n    'aria-current': props.ariaCurrent,\n    'aria-controls': props.ariaControls,\n    'aria-hidden': props.ariaHidden,\n    disabled: props.disabled,\n    ref(buttonEl?: HTMLButtonElement) {\n      if (props.form) {\n        buttonEl?.setAttribute('form', props.form);\n      }\n      if (props.ariaHidden) {\n        buttonEl?.setAttribute('aria-hidden', props.ariaHidden);\n      }\n      if (props.tabIndex) {\n        buttonEl?.setAttribute('tabindex', props.tabIndex);\n      }\n      props.ref?.(buttonEl);\n    },\n  };\n\n  return (\n    <button\n      {...attributes}\n      onMouseDown={(e) => createRipple(e, {color: rippleColor})}\n    >\n      {props.text ? <span class=\"truncate\">{props.text}</span> : null}\n      {children}\n    </button>\n  );\n};\n"],"version":3}

package/dist/atomic/components/stencil-facet-value-checkbox.js

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core/internal/client';
-import { c as createRipple } from './stencil-button.js';
+import { c as createRipple } from './ripple.js';
 import { r as randomID } from './utils.js';
 import { T as Tick$1, S as StencilCheckbox } from './stencil-checkbox.js';
 import { C as CloseIcon } from './close.js';

package/dist/atomic/components/stencil-pager-guard.js

@@ -0,0 +1,16 @@
+import { h, Fragment } from '@stencil/core/internal/client';
+import { H as Hidden } from './initialization-utils.js';
+
+/**
+ * @deprecated use the lit equivalent
+ */
+const PagerGuard = (props, children) => {
+    if (props.hasError || !props.isAppLoaded || !props.hasItems) {
+        return h(Hidden, null);
+    }
+    return h(Fragment, null, ...children);
+};
+
+export { PagerGuard as P };
+
+//# sourceMappingURL=stencil-pager-guard.js.map

package/dist/atomic/components/stencil-pager-guard.js.map

@@ -0,0 +1 @@
+{"file":"stencil-pager-guard.js","mappings":";;;AAYA;;;MAGa,UAAU,GAAyC,CAC9D,KAAK,EACL,QAAQ;IAER,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;QAC3D,OAAO,EAAC,MAAM,OAAG,CAAC;KACnB;IACD,OAAO,EAAC,QAAQ,WAAK,QAAQ,CAAY,CAAC;AAC5C;;;;","names":[],"sources":["src/components/common/pager/stencil-pager-guard.tsx"],"sourcesContent":["import {FunctionalComponent, h, Fragment} from '@stencil/core';\nimport {Hidden} from '../stencil-hidden';\n\n/**\n * @deprecated use the lit equivalent\n */\nexport interface PagerGuardProps {\n  hasError: boolean;\n  isAppLoaded: boolean;\n  hasItems: boolean;\n}\n\n/**\n * @deprecated use the lit equivalent\n */\nexport const PagerGuard: FunctionalComponent<PagerGuardProps> = (\n  props,\n  children\n) => {\n  if (props.hasError || !props.isAppLoaded || !props.hasItems) {\n    return <Hidden />;\n  }\n  return <Fragment>{...children}</Fragment>;\n};\n"],"version":3}

package/dist/atomic/components/stencil-radio-button.js

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core/internal/client';
-import { c as createRipple } from './stencil-button.js';
+import { c as createRipple } from './ripple.js';
 import { a as getRippleColorForButtonStyle, g as getClassNameForButtonStyle } from './stencil-button-style.js';
 
 /**