@coveo/atomic 3.32.1 → 3.32.2-pre.1ab0f91cdc

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

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

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

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

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

@@ -4,7 +4,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment() {
     return {
-        version: "3.32.1",
+        version: "3.32.2-pre.1ab0f91cdc",
         headlessVersion: VERSION,
     };
 }

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/stencil-button.js

@@ -1,7 +1,47 @@
 import { h } from '@stencil/core/internal/client';
-import { c as createRipple } from './ripple.js';
+import { l as listenOnce } from './event-utils.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
  */
@@ -41,6 +81,6 @@ const Button = (props, children) => {
         children));
 };
 
-export { Button as B };
+export { Button as B, createRipple as c };
 
 //# sourceMappingURL=stencil-button.js.map

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

@@ -1 +1 @@
-{"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}
+{"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}

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 './ripple.js';
+import { c as createRipple } from './stencil-button.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-radio-button.js

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

package/dist/atomic/{p-bb5786e8.js → p-05768310.js}

@@ -1,2 +1,2 @@
-import{h as t}from"./p-dc3df5ce.js";import{B as r}from"./p-28a6dd9b.js";const a=a=>t("div",{class:"relative",part:`${a.partPrefix}-container`},t(r,{...a,class:"relative h-[2.6rem] w-[2.6rem] p-3",part:`${a.partPrefix}-button`,ref:a.buttonRef},t("atomic-icon",{icon:a.icon,class:"h-4 w-4 shrink-0",part:`${a.partPrefix}-icon`})),a.badge&&t("span",{part:`${a.partPrefix}-badge`,class:"bg-primary text-on-primary absolute -top-2 -right-2 block h-4 w-4 rounded-full text-center text-xs leading-4"},a.badge));export{a as I};
-//# sourceMappingURL=p-bb5786e8.js.map
+import{h as t}from"./p-dc3df5ce.js";import{B as r}from"./p-b389ea6d.js";const a=a=>t("div",{class:"relative",part:`${a.partPrefix}-container`},t(r,{...a,class:"relative h-[2.6rem] w-[2.6rem] p-3",part:`${a.partPrefix}-button`,ref:a.buttonRef},t("atomic-icon",{icon:a.icon,class:"h-4 w-4 shrink-0",part:`${a.partPrefix}-icon`})),a.badge&&t("span",{part:`${a.partPrefix}-badge`,class:"bg-primary text-on-primary absolute -top-2 -right-2 block h-4 w-4 rounded-full text-center text-xs leading-4"},a.badge));export{a as I};
+//# sourceMappingURL=p-05768310.js.map

package/dist/atomic/p-05ab5909.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as a}from"./p-dc3df5ce.js";import{B as i}from"./p-b389ea6d.js";import"./p-1580513b.js";import"./p-21ab6f55.js";const s="[part='input-form']{display:grid;grid-template-areas:'label-start label-end .'\n    'input-start input-end apply-button';grid-template-columns:1fr 1fr auto}[part='label-start']{grid-area:label-start}[part='label-end']{grid-area:label-end}[part='input-start']{grid-area:input-start}[part='input-end']{grid-area:input-end}[part='input-apply-button']{grid-area:apply-button}";const n=s;const r=class{constructor(a){t(this,a);this.applyInput=e(this,"atomic/numberInputApply",7);this.start=undefined;this.end=undefined;this.bindings=undefined;this.type=undefined;this.filter=undefined;this.filterState=undefined;this.label=undefined}connectedCallback(){this.start=this.filterState.range?.start;this.end=this.filterState.range?.end}apply(){if(!this.startRef.validity.valid||!this.endRef.validity.valid){return}this.applyInput.emit();this.filter.setRange({start:this.start,end:this.end})}render(){const t=this.bindings.i18n.t(this.label);const e=this.bindings.i18n.t("min");const s=this.bindings.i18n.t("max");const n=this.bindings.i18n.t("number-input-minimum",{label:t});const r=this.bindings.i18n.t("number-input-maximum",{label:t});const p=this.bindings.i18n.t("apply");const d=this.bindings.i18n.t("number-input-apply",{label:t});const l="p-2.5 input-primary placeholder-neutral-dark min-w-0 mr-1";const u="text-neutral-dark text-sm";const c=this.type==="integer"?"1":"any";return a("form",{key:"cb496200417a7ae923ed216a520d31d6a413b2e8",class:"mt-4 gap-y-0.5 px-2",part:"input-form",onSubmit:t=>{t.preventDefault();this.apply();return false}},a("label",{key:"1e48ce21159e66f154cb46bb3a83d0d973e54cd0",part:"label-start",class:u,htmlFor:`${this.filterState.facetId}_start`},e),a("input",{key:"9a2421c00463cd2f5c361553d94353a193bf2734",part:"input-start",id:`${this.filterState.facetId}_start`,type:"number",step:c,ref:t=>this.startRef=t,class:l,"aria-label":n,required:true,min:Number.MIN_SAFE_INTEGER,max:this.end,value:this.filterState.range?.start,onInput:t=>this.start=t.target.valueAsNumber}),a("label",{key:"075914740e743b2e26818d902cc903a2610b913b",part:"label-end",class:u,htmlFor:`${this.filterState.facetId}_end`},s),a("input",{key:"726e7ddaf3144b7e2d0f78e18c7d2f657d29a1dc",part:"input-end",id:`${this.filterState.facetId}_end`,type:"number",step:c,ref:t=>this.endRef=t,class:l,"aria-label":r,required:true,min:this.start,max:Number.MAX_SAFE_INTEGER,value:this.filterState.range?.end,onInput:t=>this.end=t.target.valueAsNumber}),a(i,{key:"3bc6b01792661d0ca214cba22d1a00a5acd2f003",style:"outline-primary",type:"submit",part:"input-apply-button",class:"flex-none truncate p-2.5",ariaLabel:d,text:p}))}};r.style=n;export{r as atomic_facet_number_input};
+//# sourceMappingURL=p-05ab5909.entry.js.map

package/dist/atomic/{p-3431545a.entry.js.map → p-05ab5909.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["atomicFacetNumberInputCss","AtomicFacetNumberInputStyle0","FacetNumberInput","connectedCallback","this","start","filterState","range","end","apply","startRef","validity","valid","endRef","applyInput","emit","filter","setRange","render","label","bindings","i18n","t","minText","maxText","minAria","maxAria","applyAria","inputClasses","labelClasses","step","type","h","key","class","part","onSubmit","e","preventDefault","htmlFor","facetId","id","ref","required","min","Number","MIN_SAFE_INTEGER","max","value","onInput","target","valueAsNumber","MAX_SAFE_INTEGER","Button","style","ariaLabel","text"],"sources":["src/components/common/facets/facet-number-input/atomic-facet-number-input.pcss?tag=atomic-facet-number-input","src/components/common/facets/facet-number-input/facet-number-input.tsx"],"sourcesContent":["[part='input-form'] {\n  display: grid;\n  grid-template-areas:\n    'label-start label-end .'\n    'input-start input-end apply-button';\n  grid-template-columns: 1fr 1fr auto;\n}\n\n[part='label-start'] {\n  grid-area: label-start;\n}\n[part='label-end'] {\n  grid-area: label-end;\n}\n[part='input-start'] {\n  grid-area: input-start;\n}\n[part='input-end'] {\n  grid-area: input-end;\n}\n\n[part='input-apply-button'] {\n  grid-area: apply-button;\n}\n","import {NumericFilter, NumericFilterState} from '@coveo/headless';\nimport {Component, h, State, Prop, Event, EventEmitter} from '@stencil/core';\nimport {AnyBindings} from '../../interface/bindings';\nimport {Button} from '../../stencil-button';\nimport {NumberInputType} from './number-input-type';\n\n/**\n * Internal component made to be integrated in a NumericFacet.\n * @internal\n */\n@Component({\n  tag: 'atomic-facet-number-input',\n  styleUrl: 'atomic-facet-number-input.pcss',\n  shadow: false,\n})\nexport class FacetNumberInput {\n  @State() private start?: number;\n  @State() private end?: number;\n  private startRef!: HTMLInputElement;\n  private endRef!: HTMLInputElement;\n\n  @Prop() public bindings!: AnyBindings;\n  @Prop() public type!: NumberInputType;\n  @Prop() public filter!: NumericFilter;\n  @Prop() public filterState!: NumericFilterState;\n  @Prop() public label!: string;\n\n  @Event({\n    eventName: 'atomic/numberInputApply',\n  })\n  private applyInput!: EventEmitter;\n\n  public connectedCallback() {\n    this.start = this.filterState.range?.start;\n    this.end = this.filterState.range?.end;\n  }\n\n  private apply() {\n    if (!this.startRef.validity.valid || !this.endRef.validity.valid) {\n      return;\n    }\n\n    this.applyInput.emit();\n    this.filter.setRange({\n      start: this.start!,\n      end: this.end!,\n    });\n  }\n\n  render() {\n    const label = this.bindings.i18n.t(this.label);\n    const minText = this.bindings.i18n.t('min');\n    const maxText = this.bindings.i18n.t('max');\n    const minAria = this.bindings.i18n.t('number-input-minimum', {label});\n    const maxAria = this.bindings.i18n.t('number-input-maximum', {label});\n    const apply = this.bindings.i18n.t('apply');\n    const applyAria = this.bindings.i18n.t('number-input-apply', {label});\n\n    const inputClasses =\n      'p-2.5 input-primary placeholder-neutral-dark min-w-0 mr-1';\n    const labelClasses = 'text-neutral-dark text-sm';\n\n    const step = this.type === 'integer' ? '1' : 'any';\n\n    return (\n      <form\n        class=\"mt-4 gap-y-0.5 px-2\"\n        part=\"input-form\"\n        onSubmit={(e) => {\n          e.preventDefault();\n          this.apply();\n          return false;\n        }}\n      >\n        <label\n          part=\"label-start\"\n          class={labelClasses}\n          htmlFor={`${this.filterState.facetId}_start`}\n        >\n          {minText}\n        </label>\n        <input\n          part=\"input-start\"\n          id={`${this.filterState.facetId}_start`}\n          type=\"number\"\n          step={step}\n          ref={(ref) => (this.startRef = ref!)}\n          class={inputClasses}\n          aria-label={minAria}\n          required\n          min={Number.MIN_SAFE_INTEGER}\n          max={this.end}\n          value={this.filterState.range?.start}\n          onInput={(e) =>\n            (this.start = (e.target as HTMLInputElement).valueAsNumber)\n          }\n        />\n        <label\n          part=\"label-end\"\n          class={labelClasses}\n          htmlFor={`${this.filterState.facetId}_end`}\n        >\n          {maxText}\n        </label>\n        <input\n          part=\"input-end\"\n          id={`${this.filterState.facetId}_end`}\n          type=\"number\"\n          step={step}\n          ref={(ref) => (this.endRef = ref!)}\n          class={inputClasses}\n          aria-label={maxAria}\n          required\n          min={this.start}\n          max={Number.MAX_SAFE_INTEGER}\n          value={this.filterState.range?.end}\n          onInput={(e) =>\n            (this.end = (e.target as HTMLInputElement).valueAsNumber)\n          }\n        />\n        <Button\n          style=\"outline-primary\"\n          type=\"submit\"\n          part=\"input-apply-button\"\n          class=\"flex-none truncate p-2.5\"\n          ariaLabel={applyAria}\n          text={apply}\n        ></Button>\n      </form>\n    );\n  }\n}\n"],"mappings":"8JAAA,MAAMA,EAA4B,sXAClC,MAAAC,EAAeD,E,MCcFE,EAAgB,M,uOAiBpB,iBAAAC,GACLC,KAAKC,MAAQD,KAAKE,YAAYC,OAAOF,MACrCD,KAAKI,IAAMJ,KAAKE,YAAYC,OAAOC,G,CAG7B,KAAAC,GACN,IAAKL,KAAKM,SAASC,SAASC,QAAUR,KAAKS,OAAOF,SAASC,MAAO,CAChE,M,CAGFR,KAAKU,WAAWC,OAChBX,KAAKY,OAAOC,SAAS,CACnBZ,MAAOD,KAAKC,MACZG,IAAKJ,KAAKI,K,CAId,MAAAU,GACE,MAAMC,EAAQf,KAAKgB,SAASC,KAAKC,EAAElB,KAAKe,OACxC,MAAMI,EAAUnB,KAAKgB,SAASC,KAAKC,EAAE,OACrC,MAAME,EAAUpB,KAAKgB,SAASC,KAAKC,EAAE,OACrC,MAAMG,EAAUrB,KAAKgB,SAASC,KAAKC,EAAE,uBAAwB,CAACH,UAC9D,MAAMO,EAAUtB,KAAKgB,SAASC,KAAKC,EAAE,uBAAwB,CAACH,UAC9D,MAAMV,EAAQL,KAAKgB,SAASC,KAAKC,EAAE,SACnC,MAAMK,EAAYvB,KAAKgB,SAASC,KAAKC,EAAE,qBAAsB,CAACH,UAE9D,MAAMS,EACJ,4DACF,MAAMC,EAAe,4BAErB,MAAMC,EAAO1B,KAAK2B,OAAS,UAAY,IAAM,MAE7C,OACEC,EAAA,QAAAC,IAAA,2CACEC,MAAM,sBACNC,KAAK,aACLC,SAAWC,IACTA,EAAEC,iBACFlC,KAAKK,QACL,OAAO,KAAK,GAGduB,EAAA,SAAAC,IAAA,2CACEE,KAAK,cACLD,MAAOL,EACPU,QAAS,GAAGnC,KAAKE,YAAYkC,iBAE5BjB,GAEHS,EAAA,SAAAC,IAAA,2CACEE,KAAK,cACLM,GAAI,GAAGrC,KAAKE,YAAYkC,gBACxBT,KAAK,SACLD,KAAMA,EACNY,IAAMA,GAAStC,KAAKM,SAAWgC,EAC/BR,MAAON,EAAY,aACPH,EACZkB,SAAQ,KACRC,IAAKC,OAAOC,iBACZC,IAAK3C,KAAKI,IACVwC,MAAO5C,KAAKE,YAAYC,OAAOF,MAC/B4C,QAAUZ,GACPjC,KAAKC,MAASgC,EAAEa,OAA4BC,gBAGjDnB,EAAA,SAAAC,IAAA,2CACEE,KAAK,YACLD,MAAOL,EACPU,QAAS,GAAGnC,KAAKE,YAAYkC,eAE5BhB,GAEHQ,EAAA,SAAAC,IAAA,2CACEE,KAAK,YACLM,GAAI,GAAGrC,KAAKE,YAAYkC,cACxBT,KAAK,SACLD,KAAMA,EACNY,IAAMA,GAAStC,KAAKS,OAAS6B,EAC7BR,MAAON,EAAY,aACPF,EACZiB,SAAQ,KACRC,IAAKxC,KAAKC,MACV0C,IAAKF,OAAOO,iBACZJ,MAAO5C,KAAKE,YAAYC,OAAOC,IAC/ByC,QAAUZ,GACPjC,KAAKI,IAAO6B,EAAEa,OAA4BC,gBAG/CnB,EAACqB,EAAM,CAAApB,IAAA,2CACLqB,MAAM,kBACNvB,KAAK,SACLI,KAAK,qBACLD,MAAM,2BACNqB,UAAW5B,EACX6B,KAAM/C,I","ignoreList":[]}
+{"version":3,"names":["atomicFacetNumberInputCss","AtomicFacetNumberInputStyle0","FacetNumberInput","connectedCallback","this","start","filterState","range","end","apply","startRef","validity","valid","endRef","applyInput","emit","filter","setRange","render","label","bindings","i18n","t","minText","maxText","minAria","maxAria","applyAria","inputClasses","labelClasses","step","type","h","key","class","part","onSubmit","e","preventDefault","htmlFor","facetId","id","ref","required","min","Number","MIN_SAFE_INTEGER","max","value","onInput","target","valueAsNumber","MAX_SAFE_INTEGER","Button","style","ariaLabel","text"],"sources":["src/components/common/facets/facet-number-input/atomic-facet-number-input.pcss?tag=atomic-facet-number-input","src/components/common/facets/facet-number-input/facet-number-input.tsx"],"sourcesContent":["[part='input-form'] {\n  display: grid;\n  grid-template-areas:\n    'label-start label-end .'\n    'input-start input-end apply-button';\n  grid-template-columns: 1fr 1fr auto;\n}\n\n[part='label-start'] {\n  grid-area: label-start;\n}\n[part='label-end'] {\n  grid-area: label-end;\n}\n[part='input-start'] {\n  grid-area: input-start;\n}\n[part='input-end'] {\n  grid-area: input-end;\n}\n\n[part='input-apply-button'] {\n  grid-area: apply-button;\n}\n","import {NumericFilter, NumericFilterState} from '@coveo/headless';\nimport {Component, h, State, Prop, Event, EventEmitter} from '@stencil/core';\nimport {AnyBindings} from '../../interface/bindings';\nimport {Button} from '../../stencil-button';\nimport {NumberInputType} from './number-input-type';\n\n/**\n * Internal component made to be integrated in a NumericFacet.\n * @internal\n */\n@Component({\n  tag: 'atomic-facet-number-input',\n  styleUrl: 'atomic-facet-number-input.pcss',\n  shadow: false,\n})\nexport class FacetNumberInput {\n  @State() private start?: number;\n  @State() private end?: number;\n  private startRef!: HTMLInputElement;\n  private endRef!: HTMLInputElement;\n\n  @Prop() public bindings!: AnyBindings;\n  @Prop() public type!: NumberInputType;\n  @Prop() public filter!: NumericFilter;\n  @Prop() public filterState!: NumericFilterState;\n  @Prop() public label!: string;\n\n  @Event({\n    eventName: 'atomic/numberInputApply',\n  })\n  private applyInput!: EventEmitter;\n\n  public connectedCallback() {\n    this.start = this.filterState.range?.start;\n    this.end = this.filterState.range?.end;\n  }\n\n  private apply() {\n    if (!this.startRef.validity.valid || !this.endRef.validity.valid) {\n      return;\n    }\n\n    this.applyInput.emit();\n    this.filter.setRange({\n      start: this.start!,\n      end: this.end!,\n    });\n  }\n\n  render() {\n    const label = this.bindings.i18n.t(this.label);\n    const minText = this.bindings.i18n.t('min');\n    const maxText = this.bindings.i18n.t('max');\n    const minAria = this.bindings.i18n.t('number-input-minimum', {label});\n    const maxAria = this.bindings.i18n.t('number-input-maximum', {label});\n    const apply = this.bindings.i18n.t('apply');\n    const applyAria = this.bindings.i18n.t('number-input-apply', {label});\n\n    const inputClasses =\n      'p-2.5 input-primary placeholder-neutral-dark min-w-0 mr-1';\n    const labelClasses = 'text-neutral-dark text-sm';\n\n    const step = this.type === 'integer' ? '1' : 'any';\n\n    return (\n      <form\n        class=\"mt-4 gap-y-0.5 px-2\"\n        part=\"input-form\"\n        onSubmit={(e) => {\n          e.preventDefault();\n          this.apply();\n          return false;\n        }}\n      >\n        <label\n          part=\"label-start\"\n          class={labelClasses}\n          htmlFor={`${this.filterState.facetId}_start`}\n        >\n          {minText}\n        </label>\n        <input\n          part=\"input-start\"\n          id={`${this.filterState.facetId}_start`}\n          type=\"number\"\n          step={step}\n          ref={(ref) => (this.startRef = ref!)}\n          class={inputClasses}\n          aria-label={minAria}\n          required\n          min={Number.MIN_SAFE_INTEGER}\n          max={this.end}\n          value={this.filterState.range?.start}\n          onInput={(e) =>\n            (this.start = (e.target as HTMLInputElement).valueAsNumber)\n          }\n        />\n        <label\n          part=\"label-end\"\n          class={labelClasses}\n          htmlFor={`${this.filterState.facetId}_end`}\n        >\n          {maxText}\n        </label>\n        <input\n          part=\"input-end\"\n          id={`${this.filterState.facetId}_end`}\n          type=\"number\"\n          step={step}\n          ref={(ref) => (this.endRef = ref!)}\n          class={inputClasses}\n          aria-label={maxAria}\n          required\n          min={this.start}\n          max={Number.MAX_SAFE_INTEGER}\n          value={this.filterState.range?.end}\n          onInput={(e) =>\n            (this.end = (e.target as HTMLInputElement).valueAsNumber)\n          }\n        />\n        <Button\n          style=\"outline-primary\"\n          type=\"submit\"\n          part=\"input-apply-button\"\n          class=\"flex-none truncate p-2.5\"\n          ariaLabel={applyAria}\n          text={apply}\n        ></Button>\n      </form>\n    );\n  }\n}\n"],"mappings":"sIAAA,MAAMA,EAA4B,sXAClC,MAAAC,EAAeD,E,MCcFE,EAAgB,M,uOAiBpB,iBAAAC,GACLC,KAAKC,MAAQD,KAAKE,YAAYC,OAAOF,MACrCD,KAAKI,IAAMJ,KAAKE,YAAYC,OAAOC,G,CAG7B,KAAAC,GACN,IAAKL,KAAKM,SAASC,SAASC,QAAUR,KAAKS,OAAOF,SAASC,MAAO,CAChE,M,CAGFR,KAAKU,WAAWC,OAChBX,KAAKY,OAAOC,SAAS,CACnBZ,MAAOD,KAAKC,MACZG,IAAKJ,KAAKI,K,CAId,MAAAU,GACE,MAAMC,EAAQf,KAAKgB,SAASC,KAAKC,EAAElB,KAAKe,OACxC,MAAMI,EAAUnB,KAAKgB,SAASC,KAAKC,EAAE,OACrC,MAAME,EAAUpB,KAAKgB,SAASC,KAAKC,EAAE,OACrC,MAAMG,EAAUrB,KAAKgB,SAASC,KAAKC,EAAE,uBAAwB,CAACH,UAC9D,MAAMO,EAAUtB,KAAKgB,SAASC,KAAKC,EAAE,uBAAwB,CAACH,UAC9D,MAAMV,EAAQL,KAAKgB,SAASC,KAAKC,EAAE,SACnC,MAAMK,EAAYvB,KAAKgB,SAASC,KAAKC,EAAE,qBAAsB,CAACH,UAE9D,MAAMS,EACJ,4DACF,MAAMC,EAAe,4BAErB,MAAMC,EAAO1B,KAAK2B,OAAS,UAAY,IAAM,MAE7C,OACEC,EAAA,QAAAC,IAAA,2CACEC,MAAM,sBACNC,KAAK,aACLC,SAAWC,IACTA,EAAEC,iBACFlC,KAAKK,QACL,OAAO,KAAK,GAGduB,EAAA,SAAAC,IAAA,2CACEE,KAAK,cACLD,MAAOL,EACPU,QAAS,GAAGnC,KAAKE,YAAYkC,iBAE5BjB,GAEHS,EAAA,SAAAC,IAAA,2CACEE,KAAK,cACLM,GAAI,GAAGrC,KAAKE,YAAYkC,gBACxBT,KAAK,SACLD,KAAMA,EACNY,IAAMA,GAAStC,KAAKM,SAAWgC,EAC/BR,MAAON,EAAY,aACPH,EACZkB,SAAQ,KACRC,IAAKC,OAAOC,iBACZC,IAAK3C,KAAKI,IACVwC,MAAO5C,KAAKE,YAAYC,OAAOF,MAC/B4C,QAAUZ,GACPjC,KAAKC,MAASgC,EAAEa,OAA4BC,gBAGjDnB,EAAA,SAAAC,IAAA,2CACEE,KAAK,YACLD,MAAOL,EACPU,QAAS,GAAGnC,KAAKE,YAAYkC,eAE5BhB,GAEHQ,EAAA,SAAAC,IAAA,2CACEE,KAAK,YACLM,GAAI,GAAGrC,KAAKE,YAAYkC,cACxBT,KAAK,SACLD,KAAMA,EACNY,IAAMA,GAAStC,KAAKS,OAAS6B,EAC7BR,MAAON,EAAY,aACPF,EACZiB,SAAQ,KACRC,IAAKxC,KAAKC,MACV0C,IAAKF,OAAOO,iBACZJ,MAAO5C,KAAKE,YAAYC,OAAOC,IAC/ByC,QAAUZ,GACPjC,KAAKI,IAAO6B,EAAEa,OAA4BC,gBAG/CnB,EAACqB,EAAM,CAAApB,IAAA,2CACLqB,MAAM,kBACNvB,KAAK,SACLI,KAAK,qBACLD,MAAM,2BACNqB,UAAW5B,EACX6B,KAAM/C,I","ignoreList":[]}