@coveo/atomic 3.28.1-pre.86ce689cb5 → 3.28.1-pre.ae49fae5bb

package/dist/cjs/stencil-button-aa4c0879.js

@@ -0,0 +1,48 @@
+'use strict';
+
+const index = require('./index-757bc886.js');
+const ripple = require('./ripple-4070d750.js');
+const stencilButtonStyle = require('./stencil-button-style-ba779fe2.js');
+
+/**
+ * @deprecated Should only be used for Stencil components; for Lit components, use the button.ts file instead
+ */
+const Button = (props, children) => {
+    const rippleColor = stencilButtonStyle.getRippleColorForButtonStyle(props.style);
+    const className = stencilButtonStyle.getClassNameForButtonStyle(props.style);
+    const attributes = {
+        class: props.class ? `${className} ${props.class}` : className,
+        part: props.part,
+        onClick: props.onClick,
+        title: props.title,
+        type: props.type,
+        role: props.role,
+        'aria-label': props.ariaLabel,
+        'aria-expanded': props.ariaExpanded,
+        'aria-pressed': props.ariaPressed,
+        'aria-checked': props.ariaChecked,
+        'aria-current': props.ariaCurrent,
+        'aria-controls': props.ariaControls,
+        'aria-hidden': props.ariaHidden,
+        disabled: props.disabled,
+        ref(buttonEl) {
+            if (props.form) {
+                buttonEl?.setAttribute('form', props.form);
+            }
+            if (props.ariaHidden) {
+                buttonEl?.setAttribute('aria-hidden', props.ariaHidden);
+            }
+            if (props.tabIndex) {
+                buttonEl?.setAttribute('tabindex', props.tabIndex);
+            }
+            props.ref?.(buttonEl);
+        },
+    };
+    return (index.h("button", { ...attributes, onMouseDown: (e) => ripple.createRipple(e, { color: rippleColor }) },
+        props.text ? index.h("span", { class: "truncate" }, props.text) : null,
+        children));
+};
+
+exports.Button = Button;
+
+//# sourceMappingURL=stencil-button-aa4c0879.js.map

package/dist/cjs/stencil-button-aa4c0879.js.map

@@ -0,0 +1 @@
+{"file":"stencil-button-aa4c0879.js","mappings":";;;;;;AAiCA;;;MAGa,MAAM,GAA4C,CAC7D,KAAK,EACL,QAAQ;IAER,MAAM,WAAW,GAAGA,+CAA4B,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAGC,6CAA0B,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,QACEC,uBACM,UAAU,EACd,WAAW,EAAE,CAAC,CAAC,KAAKC,mBAAY,CAAC,CAAC,EAAE,EAAC,KAAK,EAAE,WAAW,EAAC,CAAC;QAExD,KAAK,CAAC,IAAI,GAAGD,kBAAM,KAAK,EAAC,UAAU,IAAE,KAAK,CAAC,IAAI,CAAQ,GAAG,IAAI;QAC9D,QAAQ,CACF,EACT;AACJ;;;;","names":["getRippleColorForButtonStyle","getClassNameForButtonStyle","h","createRipple"],"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/cjs/stencil-carousel-cb870e4d.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const index = require('./index-757bc886.js');
+const arrowRight = require('./arrow-right-a3be291c.js');
+const stencilButton = require('./stencil-button-aa4c0879.js');
+
+const Carousel = (props, children) => {
+    const commonPaginationClasses = 'w-10 h-10 grid justify-center items-center absolute top-1/2 -translate-y-1/2 z-1 shadow-lg group';
+    const commonArrowClasses = 'w-3.5 align-middle text-on-background group-hover:text-primary group-focus:text-primary-light';
+    function renderPreviousButton() {
+        return (index.h(stencilButton.Button, { style: "outline-primary", ariaLabel: props.bindings.i18n.t('previous'), onClick: () => props.previousPage(), part: "previous-button", class: `${commonPaginationClasses} -translate-x-1/2` },
+            index.h("atomic-icon", { icon: arrowRight.ArrowRight, class: `${commonArrowClasses} rotate-180` })));
+    }
+    function renderNextButton() {
+        return (index.h(stencilButton.Button, { style: "outline-primary", ariaLabel: props.bindings.i18n.t('next'), onClick: () => props.nextPage(), part: "next-button", class: `${commonPaginationClasses} right-0 translate-x-1/2` },
+            index.h("atomic-icon", { icon: arrowRight.ArrowRight, class: commonArrowClasses })));
+    }
+    function renderIndicators() {
+        return (index.h("ul", { part: "indicators", class: "mt-6 flex justify-center gap-2" }, Array.from({ length: props.numberOfPages }, (_, index$1) => {
+            const isActive = index$1 === props.currentPage % props.numberOfPages;
+            return (index.h("li", { part: `indicator ${isActive ? 'active-indicator' : ''}`, class: `h-1 w-12 rounded-md ${isActive ? 'bg-primary' : 'bg-neutral'} ` }));
+        })));
+    }
+    return (index.h(index.Fragment, null,
+        index.h("div", { class: "relative" },
+            renderPreviousButton(),
+            children,
+            renderNextButton()),
+        renderIndicators()));
+};
+
+exports.Carousel = Carousel;
+
+//# sourceMappingURL=stencil-carousel-cb870e4d.js.map

package/dist/cjs/stencil-carousel-cb870e4d.js.map

@@ -0,0 +1 @@
+{"file":"stencil-carousel-cb870e4d.js","mappings":";;;;;;MAca,QAAQ,GAEjB,CAAC,KAAK,EAAE,QAAQ;IAClB,MAAM,uBAAuB,GAC3B,kGAAkG,CAAC;IACrG,MAAM,kBAAkB,GACtB,+FAA+F,CAAC;IAElG,SAAS,oBAAoB;QAC3B,QACEA,QAACC,oBAAM,IACL,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,EAC5C,OAAO,EAAE,MAAM,KAAK,CAAC,YAAY,EAAE,EACnC,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,GAAG,uBAAuB,mBAAmB;YAEpDD,yBACE,IAAI,EAAEE,qBAAU,EAChB,KAAK,EAAE,GAAG,kBAAkB,aAAa,GAC5B,CACR,EACT;KACH;IAED,SAAS,gBAAgB;QACvB,QACEF,QAACC,oBAAM,IACL,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EACxC,OAAO,EAAE,MAAM,KAAK,CAAC,QAAQ,EAAE,EAC/B,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,GAAG,uBAAuB,0BAA0B;YAE3DD,yBAAa,IAAI,EAAEE,qBAAU,EAAE,KAAK,EAAE,kBAAkB,GAAgB,CACjE,EACT;KACH;IAED,SAAS,gBAAgB;QACvB,QACEF,gBAAI,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gCAAgC,IACzD,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,KAAK,CAAC,aAAa,EAAC,EAAE,CAAC,CAAC,EAAEG,OAAK;YAClD,MAAM,QAAQ,GAAGA,OAAK,KAAK,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC;YACnE,QACEH,gBACE,IAAI,EAAE,aAAa,QAAQ,GAAG,kBAAkB,GAAG,EAAE,EAAE,EACvD,KAAK,EAAE,uBACL,QAAQ,GAAG,YAAY,GAAG,YAC5B,GAAG,GACC,EACN;SACH,CAAC,CACC,EACL;KACH;IAED,QACEA,QAACI,cAAQ;QACPJ,iBAAK,KAAK,EAAC,UAAU;YAClB,oBAAoB,EAAE;YACtB,QAAQ;YACR,gBAAgB,EAAE,CACf;QACL,gBAAgB,EAAE,CACV,EACX;AACJ;;;;","names":["h","Button","ArrowRight","index","Fragment"],"sources":["src/components/common/stencil-carousel.tsx"],"sourcesContent":["import {h, FunctionalComponent, Fragment} from '@stencil/core';\nimport {JSXBase} from '@stencil/core/internal';\nimport ArrowRight from '../../images/arrow-right.svg';\nimport {AnyBindings} from './interface/bindings.js';\nimport {Button} from './stencil-button.js';\n\nexport interface CarouselProps {\n  bindings: AnyBindings;\n  previousPage(): void;\n  nextPage(): void;\n  numberOfPages: number;\n  currentPage: number;\n}\n\nexport const Carousel: FunctionalComponent<\n  CarouselProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\n> = (props, children) => {\n  const commonPaginationClasses =\n    'w-10 h-10 grid justify-center items-center absolute top-1/2 -translate-y-1/2 z-1 shadow-lg group';\n  const commonArrowClasses =\n    'w-3.5 align-middle text-on-background group-hover:text-primary group-focus:text-primary-light';\n\n  function renderPreviousButton() {\n    return (\n      <Button\n        style=\"outline-primary\"\n        ariaLabel={props.bindings.i18n.t('previous')}\n        onClick={() => props.previousPage()}\n        part=\"previous-button\"\n        class={`${commonPaginationClasses} -translate-x-1/2`}\n      >\n        <atomic-icon\n          icon={ArrowRight}\n          class={`${commonArrowClasses} rotate-180`}\n        ></atomic-icon>\n      </Button>\n    );\n  }\n\n  function renderNextButton() {\n    return (\n      <Button\n        style=\"outline-primary\"\n        ariaLabel={props.bindings.i18n.t('next')}\n        onClick={() => props.nextPage()}\n        part=\"next-button\"\n        class={`${commonPaginationClasses} right-0 translate-x-1/2`}\n      >\n        <atomic-icon icon={ArrowRight} class={commonArrowClasses}></atomic-icon>\n      </Button>\n    );\n  }\n\n  function renderIndicators() {\n    return (\n      <ul part=\"indicators\" class=\"mt-6 flex justify-center gap-2\">\n        {Array.from({length: props.numberOfPages}, (_, index) => {\n          const isActive = index === props.currentPage % props.numberOfPages;\n          return (\n            <li\n              part={`indicator ${isActive ? 'active-indicator' : ''}`}\n              class={`h-1 w-12 rounded-md ${\n                isActive ? 'bg-primary' : 'bg-neutral'\n              } `}\n            ></li>\n          );\n        })}\n      </ul>\n    );\n  }\n\n  return (\n    <Fragment>\n      <div class=\"relative\">\n        {renderPreviousButton()}\n        {children}\n        {renderNextButton()}\n      </div>\n      {renderIndicators()}\n    </Fragment>\n  );\n};\n"],"version":3}

package/dist/cjs/stencil-expandable-text-34b8f701.js

@@ -0,0 +1,38 @@
+'use strict';
+
+const index = require('./index-757bc886.js');
+const plus = require('./plus-07843914.js');
+const stencilButton = require('./stencil-button-aa4c0879.js');
+
+const getLineClampClass = (truncateAfter) => {
+    const lineClampMap = {
+        none: 'line-clamp-none',
+        1: 'line-clamp-1',
+        2: 'line-clamp-2',
+        3: 'line-clamp-3',
+        4: 'line-clamp-4',
+    };
+    return lineClampMap[truncateAfter] || 'line-clamp-2';
+};
+const renderShowHideButton = (isExpanded, isTruncated, isCollapsible, onToggleExpand, showMoreLabel, showLessLabel) => {
+    let buttonClass = 'expandable-text-button p-1 text-xs leading-[calc(1/.75)]';
+    if (!isTruncated && !isExpanded) {
+        buttonClass += ' invisible';
+    }
+    else if (!isCollapsible && !isTruncated && isExpanded) {
+        buttonClass += ' hidden';
+    }
+    const label = isExpanded ? showLessLabel : showMoreLabel;
+    return (index.h(stencilButton.Button, { style: "text-primary", class: buttonClass, title: label, onClick: onToggleExpand },
+        index.h("atomic-icon", { icon: isExpanded ? plus.MinusIcon : plus.PlusIcon, class: "mx-1 w-2 align-baseline" }),
+        label));
+};
+const ExpandableText = ({ isExpanded, isTruncated, truncateAfter, onToggleExpand, showMoreLabel, showLessLabel, isCollapsible = false, }, children) => {
+    return (index.h("div", { class: "flex flex-col items-start" },
+        index.h("div", { part: "expandable-text", class: `expandable-text ${!isExpanded ? getLineClampClass(truncateAfter) : ''} min-lines-${truncateAfter}` }, children),
+        renderShowHideButton(isExpanded, isTruncated, isCollapsible, onToggleExpand, showMoreLabel, showLessLabel)));
+};
+
+exports.ExpandableText = ExpandableText;
+
+//# sourceMappingURL=stencil-expandable-text-34b8f701.js.map

package/dist/cjs/stencil-expandable-text-34b8f701.js.map

@@ -0,0 +1 @@
+{"file":"stencil-expandable-text-34b8f701.js","mappings":";;;;;;AAiBA,MAAM,iBAAiB,GAAG,CAAC,aAA4B;IACrD,MAAM,YAAY,GAAkC;QAClD,IAAI,EAAE,iBAAiB;QACvB,CAAC,EAAE,cAAc;QACjB,CAAC,EAAE,cAAc;QACjB,CAAC,EAAE,cAAc;QACjB,CAAC,EAAE,cAAc;KAClB,CAAC;IACF,OAAO,YAAY,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC;AACvD,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAC3B,UAAmB,EACnB,WAAoB,EACpB,aAAsB,EACtB,cAAwC,EACxC,aAAqB,EACrB,aAAqB;IAErB,IAAI,WAAW,GAAG,0DAA0D,CAAC;IAC7E,IAAI,CAAC,WAAW,IAAI,CAAC,UAAU,EAAE;QAC/B,WAAW,IAAI,YAAY,CAAC;KAC7B;SAAM,IAAI,CAAC,aAAa,IAAI,CAAC,WAAW,IAAI,UAAU,EAAE;QACvD,WAAW,IAAI,SAAS,CAAC;KAC1B;IAED,MAAM,KAAK,GAAG,UAAU,GAAG,aAAa,GAAG,aAAa,CAAC;IAEzD,QACEA,QAACC,oBAAM,IACL,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,cAAc;QAEvBD,yBACE,IAAI,EAAE,UAAU,GAAGE,cAAS,GAAGC,aAAQ,EACvC,KAAK,EAAC,yBAAyB,GAClB;QACd,KAAK,CACC,EACT;AACJ,CAAC,CAAC;MAEW,cAAc,GAA6C,CACtE,EACE,UAAU,EACV,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,aAAa,EACb,aAAa,GAAG,KAAK,GACtB,EACD,QAAQ;IAER,QACEH,iBAAK,KAAK,EAAC,2BAA2B;QACpCA,iBACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,mBAAmB,CAAC,UAAU,GAAG,iBAAiB,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,aAAa,EAAE,IAEzG,QAAQ,CACL;QACL,oBAAoB,CACnB,UAAU,EACV,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,aAAa,CACd,CACG,EACN;AACJ;;;;","names":["h","Button","MinusIcon","PlusIcon"],"sources":["src/components/common/expandable-text/stencil-expandable-text.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport MinusIcon from '../../../images/minus.svg';\nimport PlusIcon from '../../../images/plus.svg';\nimport {Button} from '../stencil-button';\n\nexport type TruncateAfter = 'none' | '1' | '2' | '3' | '4';\n\ninterface ExpandableTextProps {\n  isExpanded: boolean;\n  isTruncated: boolean;\n  isCollapsible?: boolean;\n  truncateAfter: TruncateAfter;\n  onToggleExpand: (e: MouseEvent | undefined) => void;\n  showMoreLabel: string;\n  showLessLabel: string;\n}\n\nconst getLineClampClass = (truncateAfter: TruncateAfter) => {\n  const lineClampMap: Record<TruncateAfter, string> = {\n    none: 'line-clamp-none',\n    1: 'line-clamp-1',\n    2: 'line-clamp-2',\n    3: 'line-clamp-3',\n    4: 'line-clamp-4',\n  };\n  return lineClampMap[truncateAfter] || 'line-clamp-2';\n};\n\nconst renderShowHideButton = (\n  isExpanded: boolean,\n  isTruncated: boolean,\n  isCollapsible: boolean,\n  onToggleExpand: (e?: MouseEvent) => void,\n  showMoreLabel: string,\n  showLessLabel: string\n) => {\n  let buttonClass = 'expandable-text-button p-1 text-xs leading-[calc(1/.75)]';\n  if (!isTruncated && !isExpanded) {\n    buttonClass += ' invisible';\n  } else if (!isCollapsible && !isTruncated && isExpanded) {\n    buttonClass += ' hidden';\n  }\n\n  const label = isExpanded ? showLessLabel : showMoreLabel;\n\n  return (\n    <Button\n      style=\"text-primary\"\n      class={buttonClass}\n      title={label}\n      onClick={onToggleExpand}\n    >\n      <atomic-icon\n        icon={isExpanded ? MinusIcon : PlusIcon}\n        class=\"mx-1 w-2 align-baseline\"\n      ></atomic-icon>\n      {label}\n    </Button>\n  );\n};\n\nexport const ExpandableText: FunctionalComponent<ExpandableTextProps> = (\n  {\n    isExpanded,\n    isTruncated,\n    truncateAfter,\n    onToggleExpand,\n    showMoreLabel,\n    showLessLabel,\n    isCollapsible = false,\n  },\n  children\n) => {\n  return (\n    <div class=\"flex flex-col items-start\">\n      <div\n        part=\"expandable-text\"\n        class={`expandable-text ${!isExpanded ? getLineClampClass(truncateAfter) : ''} min-lines-${truncateAfter}`}\n      >\n        {children}\n      </div>\n      {renderShowHideButton(\n        isExpanded,\n        isTruncated,\n        isCollapsible,\n        onToggleExpand,\n        showMoreLabel,\n        showLessLabel\n      )}\n    </div>\n  );\n};\n"],"version":3}

package/dist/cjs/stencil-facet-header-60732c1b.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const index = require('./index-757bc886.js');
+const arrowBottomRounded = require('./arrow-bottom-rounded-705a1b2c.js');
+const arrowTopRounded = require('./arrow-top-rounded-e7a05d2f.js');
+const close = require('./close-20739950.js');
+const stencilButton = require('./stencil-button-aa4c0879.js');
+const stencilHeading = require('./stencil-heading-2faee1f7.js');
+
+const FacetContainer = (_, children) => (index.h("div", { class: "bg-background border-neutral rounded-lg border p-4", part: "facet" }, children));
+
+const FacetHeader = (props) => {
+    const label = props.i18n.t(props.label);
+    const expandFacet = props.i18n.t('expand-facet', { label });
+    const collapseFacet = props.i18n.t('collapse-facet', { label });
+    const clearFilters = props.i18n.t('clear-filters', {
+        count: props.numberOfActiveValues,
+    });
+    const clearFiltersForFacet = props.i18n.t('clear-filters-for-facet', {
+        count: props.numberOfActiveValues,
+        label,
+    });
+    return [
+        index.h(stencilButton.Button, { style: "text-transparent", part: "label-button", class: "flex w-full justify-between rounded-none px-2 py-1 text-lg font-bold", ariaLabel: props.isCollapsed ? expandFacet : collapseFacet, onClick: () => props.onToggleCollapse(), ariaExpanded: (!props.isCollapsed).toString(), ref: props.headerRef },
+            index.h(stencilHeading.Heading, { level: props.headingLevel, class: "truncate" }, label),
+            index.h("atomic-icon", { part: "label-button-icon", class: "ml-4 w-3 shrink-0 self-center", icon: props.isCollapsed ? arrowBottomRounded.ArrowBottomIcon : arrowTopRounded.ArrowUp })),
+        props.onClearFilters && props.numberOfActiveValues > 0 && (index.h(stencilButton.Button, { style: "text-primary", part: "clear-button", class: "flex max-w-full items-baseline p-2 text-sm", ariaLabel: clearFiltersForFacet, onClick: () => props.onClearFilters() },
+            index.h("atomic-icon", { part: "clear-button-icon", class: "mr-1 h-2 w-2", icon: close.CloseIcon }),
+            index.h("span", null, clearFilters))),
+    ];
+};
+
+exports.FacetContainer = FacetContainer;
+exports.FacetHeader = FacetHeader;
+
+//# sourceMappingURL=stencil-facet-header-60732c1b.js.map

package/dist/cjs/stencil-facet-header-60732c1b.js.map

@@ -0,0 +1 @@
+{"file":"stencil-facet-header-60732c1b.js","mappings":";;;;;;;;;MAEa,cAAc,GAAwB,CAAC,CAAC,EAAE,QAAQ,MAC7DA,iBAAK,KAAK,EAAC,oDAAoD,EAAC,IAAI,EAAC,OAAO,IACzE,QAAQ,CACL;;MCcK,WAAW,GAA0C,CAAC,KAAK;IACtE,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,EAAE,EAAC,KAAK,EAAC,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,EAAE,EAAC,KAAK,EAAC,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,EAAE;QACjD,KAAK,EAAE,KAAK,CAAC,oBAAoB;KAClC,CAAC,CAAC;IACH,MAAM,oBAAoB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,yBAAyB,EAAE;QACnE,KAAK,EAAE,KAAK,CAAC,oBAAoB;QACjC,KAAK;KACN,CAAC,CAAC;IAEH,OAAO;QACLA,QAACC,oBAAM,IACL,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,sEAAsE,EAC5E,SAAS,EAAE,KAAK,CAAC,WAAW,GAAG,WAAW,GAAG,aAAa,EAC1D,OAAO,EAAE,MAAM,KAAK,CAAC,gBAAgB,EAAE,EACvC,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,QAAQ,EAAE,EAC7C,GAAG,EAAE,KAAK,CAAC,SAAS;YAEpBD,QAACE,sBAAO,IAAC,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,KAAK,EAAC,UAAU,IACjD,KAAK,CACE;YACVF,yBACE,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,+BAA+B,EACrC,IAAI,EAAE,KAAK,CAAC,WAAW,GAAGG,kCAAe,GAAGC,uBAAY,GAC3C,CACR;QACT,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,oBAAoB,GAAG,CAAC,KACpDJ,QAACC,oBAAM,IACL,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,4CAA4C,EAClD,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,MAAM,KAAK,CAAC,cAAe,EAAE;YAEtCD,yBACE,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAEK,eAAS,GACF;YACfL,sBAAO,YAAY,CAAQ,CACpB,CACV;KACF,CAAC;AACJ;;;;;","names":["h","Button","Heading","ArrowBottomIcon","ArrowTopIcon","CloseIcon"],"sources":["src/components/common/facets/facet-container/stencil-facet-container.tsx","src/components/common/facets/facet-header/stencil-facet-header.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\n\nexport const FacetContainer: FunctionalComponent = (_, children) => (\n  <div class=\"bg-background border-neutral rounded-lg border p-4\" part=\"facet\">\n    {children}\n  </div>\n);\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport ArrowBottomIcon from '../../../../images/arrow-bottom-rounded.svg';\nimport ArrowTopIcon from '../../../../images/arrow-top-rounded.svg';\nimport CloseIcon from '../../../../images/close.svg';\nimport {Button} from '../../stencil-button';\nimport {Heading} from '../../stencil-heading';\n\nexport interface FacetHeaderProps {\n  i18n: i18n;\n  label: string;\n  numberOfActiveValues: number;\n  isCollapsed: boolean;\n  headingLevel: number;\n  onToggleCollapse(): void;\n  onClearFilters?(): void;\n  headerRef?: (element?: HTMLButtonElement) => void;\n}\n\nexport const FacetHeader: FunctionalComponent<FacetHeaderProps> = (props) => {\n  const label = props.i18n.t(props.label);\n  const expandFacet = props.i18n.t('expand-facet', {label});\n  const collapseFacet = props.i18n.t('collapse-facet', {label});\n  const clearFilters = props.i18n.t('clear-filters', {\n    count: props.numberOfActiveValues,\n  });\n  const clearFiltersForFacet = props.i18n.t('clear-filters-for-facet', {\n    count: props.numberOfActiveValues,\n    label,\n  });\n\n  return [\n    <Button\n      style=\"text-transparent\"\n      part=\"label-button\"\n      class=\"flex w-full justify-between rounded-none px-2 py-1 text-lg font-bold\"\n      ariaLabel={props.isCollapsed ? expandFacet : collapseFacet}\n      onClick={() => props.onToggleCollapse()}\n      ariaExpanded={(!props.isCollapsed).toString()}\n      ref={props.headerRef}\n    >\n      <Heading level={props.headingLevel} class=\"truncate\">\n        {label}\n      </Heading>\n      <atomic-icon\n        part=\"label-button-icon\"\n        class=\"ml-4 w-3 shrink-0 self-center\"\n        icon={props.isCollapsed ? ArrowBottomIcon : ArrowTopIcon}\n      ></atomic-icon>\n    </Button>,\n    props.onClearFilters && props.numberOfActiveValues > 0 && (\n      <Button\n        style=\"text-primary\"\n        part=\"clear-button\"\n        class=\"flex max-w-full items-baseline p-2 text-sm\"\n        ariaLabel={clearFiltersForFacet}\n        onClick={() => props.onClearFilters!()}\n      >\n        <atomic-icon\n          part=\"clear-button-icon\"\n          class=\"mr-1 h-2 w-2\"\n          icon={CloseIcon}\n        ></atomic-icon>\n        <span>{clearFilters}</span>\n      </Button>\n    ),\n  ];\n};\n"],"version":3}

package/dist/cjs/stencil-facet-search-matches-f2fd2b83.js

@@ -0,0 +1,59 @@
+'use strict';
+
+const index = require('./index-757bc886.js');
+const close = require('./close-20739950.js');
+const search = require('./search-a4774f02.js');
+const stencilButton = require('./stencil-button-aa4c0879.js');
+const stencilFacetValueLabelHighlight = require('./stencil-facet-value-label-highlight-c2421e8f.js');
+
+const FacetSearchInput = (props) => {
+    const label = props.i18n.t(props.label);
+    const search$1 = props.i18n.t('facet-search-input');
+    const facetSearch = props.i18n.t('facet-search', { label });
+    const clear = props.i18n.t('clear');
+    let inputRef;
+    return (index.h("div", { class: "mt-3 px-2", part: "search-wrapper" },
+        index.h("div", { class: "relative h-10" },
+            index.h("input", { part: "search-input", class: "input-primary placeholder-neutral-dark group h-full w-full px-9 text-sm", type: "text", placeholder: search$1, "aria-label": facetSearch, value: props.query, onInput: (e) => props.onChange(e.target.value), ref: (ref) => (inputRef = ref) }),
+            index.h("div", { class: "search-icon text-on-background pointer-events-none absolute left-0 inline-flex h-full w-9 items-center justify-center" },
+                index.h("atomic-icon", { part: "search-icon", icon: search.SearchIcon })),
+            props.query !== '' && (index.h(stencilButton.Button, { style: "text-transparent", title: clear, class: "search-clear-button absolute top-px right-px bottom-px inline-flex w-9 items-center justify-center", onClick: () => {
+                    props.onClear();
+                    inputRef.focus();
+                } },
+                index.h("atomic-icon", { part: "search-clear-button", icon: close.CloseIcon }))))));
+};
+
+//TODO: change to noMatchesFound & remove the key in https://coveord.atlassian.net/browse/KIT-3368
+function matchesFound(key, query, i18n) {
+    return i18n.t(key, {
+        query: `<span class="font-bold italic text-on-background" part="matches-query">${stencilFacetValueLabelHighlight.escapeHtml_1(query)}</span>`,
+        interpolation: { escapeValue: false },
+    });
+}
+function clickableMoreMatchesFound(query, i18n) {
+    return i18n.t('more-matches-for', {
+        query: `<span class="font-bold italic" part="matches-query">${stencilFacetValueLabelHighlight.escapeHtml_1(query)}</span>`,
+        interpolation: { escapeValue: false },
+    });
+}
+const FacetSearchMatches = (props) => {
+    if (!props.numberOfMatches) {
+        return (index.h("div", { class: "px-2" },
+            index.h("div", { part: "no-matches", class: "bg-neutral-light text-neutral-dark truncate rounded p-3 text-sm", innerHTML: matchesFound('no-matches-found-for', props.query, props.i18n) })));
+    }
+    if (props.hasMoreMatches) {
+        if (props.showMoreMatches) {
+            return (index.h("div", { class: "px-2" },
+                index.h(stencilButton.Button, { style: "text-primary", class: "mt-3 p-2", onClick: props.showMoreMatches },
+                    index.h("div", { part: "more-matches", class: "truncate text-sm", innerHTML: clickableMoreMatchesFound(props.query, props.i18n) }))));
+        }
+        return (index.h("div", { class: "px-2" },
+            index.h("div", { part: "more-matches", class: "text-neutral-dark mt-3 truncate text-sm", innerHTML: matchesFound('more-matches-for', props.query, props.i18n) })));
+    }
+};
+
+exports.FacetSearchInput = FacetSearchInput;
+exports.FacetSearchMatches = FacetSearchMatches;
+
+//# sourceMappingURL=stencil-facet-search-matches-f2fd2b83.js.map

package/dist/cjs/stencil-facet-search-matches-f2fd2b83.js.map

@@ -0,0 +1 @@
+{"file":"stencil-facet-search-matches-f2fd2b83.js","mappings":"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","names":["search","h","SearchIcon","Button","CloseIcon","escape"],"sources":["src/components/common/facets/facet-search/stencil-facet-search-input.tsx","src/components/common/facets/facet-search/stencil-facet-search-matches.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport CloseIcon from '../../../../images/close.svg';\nimport SearchIcon from '../../../../images/search.svg';\nimport {Button} from '../../stencil-button';\n\ninterface FacetSearchInputProps {\n  label: string;\n  query: string;\n  i18n: i18n;\n  onClear(): void;\n  onChange(value: string): void;\n}\n\nexport const FacetSearchInput: FunctionalComponent<FacetSearchInputProps> = (\n  props\n) => {\n  const label = props.i18n.t(props.label);\n  const search = props.i18n.t('facet-search-input');\n  const facetSearch = props.i18n.t('facet-search', {label});\n  const clear = props.i18n.t('clear');\n  let inputRef: HTMLInputElement | undefined;\n\n  return (\n    <div class=\"mt-3 px-2\" part=\"search-wrapper\">\n      <div class=\"relative h-10\">\n        <input\n          part=\"search-input\"\n          class=\"input-primary placeholder-neutral-dark group h-full w-full px-9 text-sm\"\n          type=\"text\"\n          placeholder={search}\n          aria-label={facetSearch}\n          value={props.query}\n          onInput={(e) => props.onChange((e.target as HTMLInputElement).value)}\n          ref={(ref) => (inputRef = ref)}\n        />\n        <div class=\"search-icon text-on-background pointer-events-none absolute left-0 inline-flex h-full w-9 items-center justify-center\">\n          <atomic-icon part=\"search-icon\" icon={SearchIcon}></atomic-icon>\n        </div>\n        {props.query !== '' && (\n          <Button\n            style=\"text-transparent\"\n            title={clear}\n            class=\"search-clear-button absolute top-px right-px bottom-px inline-flex w-9 items-center justify-center\"\n            onClick={() => {\n              props.onClear();\n              inputRef!.focus();\n            }}\n          >\n            <atomic-icon\n              part=\"search-clear-button\"\n              icon={CloseIcon}\n            ></atomic-icon>\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport escape from 'escape-html';\nimport {i18n} from 'i18next';\nimport {Button} from '../../stencil-button';\n\ninterface FacetSearchMatchesProps {\n  i18n: i18n;\n  query: string;\n  numberOfMatches: number;\n  hasMoreMatches: boolean;\n  showMoreMatches?: () => void;\n}\n\n//TODO: change to noMatchesFound & remove the key in https://coveord.atlassian.net/browse/KIT-3368\nfunction matchesFound(\n  key: 'more-matches-for' | 'no-matches-found-for',\n  query: string,\n  i18n: i18n\n) {\n  return i18n.t(key, {\n    query: `<span class=\"font-bold italic text-on-background\" part=\"matches-query\">${escape(\n      query\n    )}</span>`,\n    interpolation: {escapeValue: false},\n  });\n}\n\nfunction clickableMoreMatchesFound(query: string, i18n: i18n) {\n  return i18n.t('more-matches-for', {\n    query: `<span class=\"font-bold italic\" part=\"matches-query\">${escape(\n      query\n    )}</span>`,\n    interpolation: {escapeValue: false},\n  });\n}\n\nexport const FacetSearchMatches: FunctionalComponent<\n  FacetSearchMatchesProps\n> = (props) => {\n  if (!props.numberOfMatches) {\n    return (\n      <div class=\"px-2\">\n        <div\n          part=\"no-matches\"\n          class=\"bg-neutral-light text-neutral-dark truncate rounded p-3 text-sm\"\n          innerHTML={matchesFound(\n            'no-matches-found-for',\n            props.query,\n            props.i18n\n          )}\n        ></div>\n      </div>\n    );\n  }\n\n  if (props.hasMoreMatches) {\n    if (props.showMoreMatches) {\n      return (\n        <div class=\"px-2\">\n          <Button\n            style=\"text-primary\"\n            class=\"mt-3 p-2\"\n            onClick={props.showMoreMatches}\n          >\n            <div\n              part=\"more-matches\"\n              class=\"truncate text-sm\"\n              innerHTML={clickableMoreMatchesFound(props.query, props.i18n)}\n            ></div>\n          </Button>\n        </div>\n      );\n    }\n    return (\n      <div class=\"px-2\">\n        <div\n          part=\"more-matches\"\n          class=\"text-neutral-dark mt-3 truncate text-sm\"\n          innerHTML={matchesFound('more-matches-for', props.query, props.i18n)}\n        ></div>\n      </div>\n    );\n  }\n};\n"],"version":3}

package/dist/cjs/stencil-facet-search-value-a464968e.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const index = require('./index-757bc886.js');
+const stencilFacetValue = require('./stencil-facet-value-a4da653b.js');
+
+const MIN_VALUES_WHERE_FACET_SEARCH_IMPROVES_UX = 9;
+const FacetSearchInputGuard = ({ withSearch, canShowMoreValues, numberOfDisplayedValues }, children) => {
+    if (!withSearch) {
+        return;
+    }
+    // Hide the input if there are no more values to load from the index and there are less than 8 values to display.
+    // 8 is an arbitrary number, discussed with UX as a good compromise: A list long enough where it's worth searching.
+    if (!canShowMoreValues &&
+        numberOfDisplayedValues < MIN_VALUES_WHERE_FACET_SEARCH_IMPROVES_UX) {
+        return;
+    }
+    return index.h(index.Fragment, null, children);
+};
+
+const FacetSearchValue = (props) => {
+    return index.h(stencilFacetValue.FacetValue, { ...props, facetState: "idle" });
+};
+
+exports.FacetSearchInputGuard = FacetSearchInputGuard;
+exports.FacetSearchValue = FacetSearchValue;
+
+//# sourceMappingURL=stencil-facet-search-value-a464968e.js.map

package/dist/cjs/stencil-facet-search-value-a464968e.js.map

@@ -0,0 +1 @@
+{"file":"stencil-facet-search-value-a464968e.js","mappings":";;;;;AAEA,MAAM,yCAAyC,GAAG,CAAC,CAAC;MAQvC,qBAAqB,GAE9B,CAAC,EAAC,UAAU,EAAE,iBAAiB,EAAE,uBAAuB,EAAC,EAAE,QAAQ;IACrE,IAAI,CAAC,UAAU,EAAE;QACf,OAAO;KACR;;;IAID,IACE,CAAC,iBAAiB;QAClB,uBAAuB,GAAG,yCAAyC,EACnE;QACA,OAAO;KACR;IAED,OAAOA,QAACC,cAAQ,QAAE,QAAQ,CAAY,CAAC;AACzC;;MCxBa,gBAAgB,GAEzB,CAAC,KAAK;IACR,OAAOD,QAACE,4BAAU,OAAK,KAAK,EAAE,UAAU,EAAC,MAAM,GAAG,CAAC;AACrD;;;;;","names":["h","Fragment","FacetValue"],"sources":["src/components/common/facets/facet-search/stencil-facet-search-input-guard.tsx","src/components/common/facets/facet-search/stencil-facet-search-value.tsx"],"sourcesContent":["import {Fragment, FunctionalComponent, h} from '@stencil/core';\n\nconst MIN_VALUES_WHERE_FACET_SEARCH_IMPROVES_UX = 9;\n\ninterface FacetSearchInputGuardProps {\n  withSearch: boolean;\n  canShowMoreValues: boolean;\n  numberOfDisplayedValues: number;\n}\n\nexport const FacetSearchInputGuard: FunctionalComponent<\n  FacetSearchInputGuardProps\n> = ({withSearch, canShowMoreValues, numberOfDisplayedValues}, children) => {\n  if (!withSearch) {\n    return;\n  }\n\n  // Hide the input if there are no more values to load from the index and there are less than 8 values to display.\n  // 8 is an arbitrary number, discussed with UX as a good compromise: A list long enough where it's worth searching.\n  if (\n    !canShowMoreValues &&\n    numberOfDisplayedValues < MIN_VALUES_WHERE_FACET_SEARCH_IMPROVES_UX\n  ) {\n    return;\n  }\n\n  return <Fragment>{children}</Fragment>;\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {FacetValueProps, FacetValue} from '../facet-value/stencil-facet-value';\n\nexport const FacetSearchValue: FunctionalComponent<\n  Omit<FacetValueProps, 'facetState' | 'setRef'>\n> = (props) => {\n  return <FacetValue {...props} facetState=\"idle\" />;\n};\n"],"version":3}

package/dist/cjs/stencil-facet-show-more-less-21d22973.js

@@ -0,0 +1,49 @@
+'use strict';
+
+const stencilFacetValueLabelHighlight = require('./stencil-facet-value-label-highlight-c2421e8f.js');
+const index = require('./index-757bc886.js');
+const plus = require('./plus-07843914.js');
+const stencilButton = require('./stencil-button-aa4c0879.js');
+
+function announceFacetSearchResultsWithAriaLive(facet, label, setAriaLive, i18n) {
+    let prevState = facet.state.facetSearch;
+    facet.subscribe(() => {
+        if (stencilFacetValueLabelHighlight.shouldUpdateFacetSearchComponent(facet.state.facetSearch, prevState) &&
+            facet.state.facetSearch.query) {
+            prevState = facet.state.facetSearch;
+            setAriaLive(i18n.t('facet-search-results-count', {
+                count: facet.state.facetSearch.values.length,
+                label,
+            }));
+        }
+    });
+}
+
+const FacetShowMoreLess = (props) => {
+    const label = props.i18n.t(props.label);
+    const showMore = props.i18n.t('show-more');
+    const showMoreFacetValues = props.i18n.t('show-more-facet-values', {
+        label,
+    });
+    const showLess = props.i18n.t('show-less');
+    const showLessFacetValues = props.i18n.t('show-less-facet-values', {
+        label,
+    });
+    const btnClasses = 'flex items-baseline text-left p-2 text-sm max-w-full';
+    const iconClasses = 'w-2 h-2 mr-1';
+    if (!props.canShowLessValues && !props.canShowMoreValues) {
+        return;
+    }
+    return (index.h("div", { class: "mt-2" },
+        index.h(stencilButton.Button, { style: "text-primary", part: "show-less", class: `${btnClasses} ${props.canShowLessValues ? '' : 'hidden'}`, ariaLabel: showLessFacetValues, onClick: () => props.onShowLess(), ref: props.showLessRef },
+            index.h("atomic-icon", { part: "show-more-less-icon", class: iconClasses, icon: plus.MinusIcon }),
+            index.h("span", { class: "truncate" }, showLess)),
+        index.h(stencilButton.Button, { style: "text-primary", part: "show-more", class: `${btnClasses} ${props.canShowMoreValues ? '' : 'hidden'}`, ariaLabel: showMoreFacetValues, onClick: () => props.onShowMore(), ref: props.showMoreRef },
+            index.h("atomic-icon", { part: "show-more-less-icon", class: iconClasses, icon: plus.PlusIcon }),
+            index.h("span", { class: "truncate" }, showMore))));
+};
+
+exports.FacetShowMoreLess = FacetShowMoreLess;
+exports.announceFacetSearchResultsWithAriaLive = announceFacetSearchResultsWithAriaLive;
+
+//# sourceMappingURL=stencil-facet-show-more-less-21d22973.js.map

package/dist/cjs/stencil-facet-show-more-less-21d22973.js.map

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

package/dist/cjs/stencil-facet-value-a4da653b.js

@@ -0,0 +1,41 @@
+'use strict';
+
+const index = require('./index-757bc886.js');
+const fieldUtils = require('./field-utils-a715deca.js');
+const stencilFacetValueBox = require('./stencil-facet-value-box-2949669d.js');
+const stencilFacetValueCheckbox = require('./stencil-facet-value-checkbox-49e6843d.js');
+const stencilFacetValueLabelHighlight = require('./stencil-facet-value-label-highlight-c2421e8f.js');
+const stencilFacetValueLink = require('./stencil-facet-value-link-089a2160.js');
+
+const FacetValue = ({ facetSearchQuery, displayValuesAs, enableExclusion, facetCount, facetState, facetValue, field, i18n, onExclude, onSelect, setRef, }) => {
+    const displayValue = fieldUtils.getFieldValueCaption(field, facetValue, i18n);
+    const isSelected = facetState === 'selected';
+    const isExcluded = facetState === 'excluded';
+    const triStateProps = enableExclusion
+        ? {
+            onExclude,
+            state: facetState,
+        }
+        : {};
+    switch (displayValuesAs) {
+        case 'checkbox':
+            return (index.h(stencilFacetValueCheckbox.FacetValueCheckbox, { ...triStateProps, displayValue: displayValue, numberOfResults: facetCount, isSelected: isSelected, i18n: i18n, onClick: onSelect, searchQuery: facetSearchQuery, buttonRef: (element) => {
+                    setRef && setRef(element);
+                } },
+                index.h(stencilFacetValueLabelHighlight.FacetValueLabelHighlight, { displayValue: displayValue, isSelected: isSelected, isExcluded: isExcluded, searchQuery: facetSearchQuery })));
+        case 'link':
+            return (index.h(stencilFacetValueLink.FacetValueLink, { displayValue: displayValue, numberOfResults: facetCount, isSelected: isSelected, i18n: i18n, onClick: onSelect, searchQuery: facetSearchQuery, buttonRef: (element) => {
+                    setRef && setRef(element);
+                } },
+                index.h(stencilFacetValueLabelHighlight.FacetValueLabelHighlight, { displayValue: displayValue, isSelected: isSelected, searchQuery: facetSearchQuery })));
+        case 'box':
+            return (index.h(stencilFacetValueBox.FacetValueBox, { displayValue: displayValue, numberOfResults: facetCount, isSelected: isSelected, i18n: i18n, onClick: onSelect, searchQuery: facetSearchQuery, buttonRef: (element) => {
+                    setRef && setRef(element);
+                } },
+                index.h(stencilFacetValueLabelHighlight.FacetValueLabelHighlight, { displayValue: displayValue, isSelected: isSelected, searchQuery: facetSearchQuery })));
+    }
+};
+
+exports.FacetValue = FacetValue;
+
+//# sourceMappingURL=stencil-facet-value-a4da653b.js.map

package/dist/cjs/stencil-facet-value-a4da653b.js.map

@@ -0,0 +1 @@
+{"file":"stencil-facet-value-a4da653b.js","mappings":";;;;;;;;;MAsBa,UAAU,GAAyC,CAAC,EAC/D,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,UAAU,EACV,UAAU,EACV,UAAU,EACV,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,MAAM,GACP;IACC,MAAM,YAAY,GAAGA,+BAAoB,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,UAAU,KAAK,UAAU,CAAC;IAC7C,MAAM,UAAU,GAAG,UAAU,KAAK,UAAU,CAAC;IAC7C,MAAM,aAAa,GAAG,eAAe;UACjC;YACE,SAAS;YACT,KAAK,EAAE,UAAU;SAClB;UACD,EAAE,CAAC;IACP,QAAQ,eAAe;QACrB,KAAK,UAAU;YACb,QACEC,QAACC,4CAAkB,OACb,aAAa,EACjB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,UAAU,EAC3B,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,QAAQ,EACjB,WAAW,EAAE,gBAAgB,EAC7B,SAAS,EAAE,CAAC,OAAO;oBACjB,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC;iBAC3B;gBAEDD,QAACE,wDAAwB,IACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,gBAAgB,GACH,CACT,EACrB;QACJ,KAAK,MAAM;YACT,QACEF,QAACG,oCAAc,IACb,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,UAAU,EAC3B,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,QAAQ,EACjB,WAAW,EAAE,gBAAgB,EAC7B,SAAS,EAAE,CAAC,OAAO;oBACjB,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC;iBAC3B;gBAEDH,QAACE,wDAAwB,IACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,gBAAgB,GACH,CACb,EACjB;QACJ,KAAK,KAAK;YACR,QACEF,QAACI,kCAAa,IACZ,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,UAAU,EAC3B,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,QAAQ,EACjB,WAAW,EAAE,gBAAgB,EAC7B,SAAS,EAAE,CAAC,OAAO;oBACjB,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC;iBAC3B;gBAEDJ,QAACE,wDAAwB,IACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,gBAAgB,GACH,CACd,EAChB;KACL;AACH;;;;","names":["getFieldValueCaption","h","FacetValueCheckbox","FacetValueLabelHighlight","FacetValueLink","FacetValueBox"],"sources":["src/components/common/facets/facet-value/stencil-facet-value.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {getFieldValueCaption} from '../../../../utils/field-utils';\nimport {FacetValueBox} from '../facet-value-box/stencil-facet-value-box';\nimport {FacetValueCheckbox} from '../facet-value-checkbox/stencil-facet-value-checkbox';\nimport {FacetValueLabelHighlight} from '../facet-value-label-highlight/stencil-facet-value-label-highlight';\nimport {FacetValueLink} from '../facet-value-link/stencil-facet-value-link';\n\nexport interface FacetValueProps {\n  field: string;\n  facetValue: string;\n  facetCount: number;\n  facetState: 'idle' | 'selected' | 'excluded';\n  i18n: i18n;\n  enableExclusion: boolean;\n  onExclude: () => void;\n  onSelect: () => void;\n  displayValuesAs: 'checkbox' | 'link' | 'box';\n  facetSearchQuery: string;\n  setRef?: (btn?: HTMLButtonElement) => void;\n}\n\nexport const FacetValue: FunctionalComponent<FacetValueProps> = ({\n  facetSearchQuery,\n  displayValuesAs,\n  enableExclusion,\n  facetCount,\n  facetState,\n  facetValue,\n  field,\n  i18n,\n  onExclude,\n  onSelect,\n  setRef,\n}) => {\n  const displayValue = getFieldValueCaption(field, facetValue, i18n);\n  const isSelected = facetState === 'selected';\n  const isExcluded = facetState === 'excluded';\n  const triStateProps = enableExclusion\n    ? {\n        onExclude,\n        state: facetState,\n      }\n    : {};\n  switch (displayValuesAs) {\n    case 'checkbox':\n      return (\n        <FacetValueCheckbox\n          {...triStateProps}\n          displayValue={displayValue}\n          numberOfResults={facetCount}\n          isSelected={isSelected}\n          i18n={i18n}\n          onClick={onSelect}\n          searchQuery={facetSearchQuery}\n          buttonRef={(element) => {\n            setRef && setRef(element);\n          }}\n        >\n          <FacetValueLabelHighlight\n            displayValue={displayValue}\n            isSelected={isSelected}\n            isExcluded={isExcluded}\n            searchQuery={facetSearchQuery}\n          ></FacetValueLabelHighlight>\n        </FacetValueCheckbox>\n      );\n    case 'link':\n      return (\n        <FacetValueLink\n          displayValue={displayValue}\n          numberOfResults={facetCount}\n          isSelected={isSelected}\n          i18n={i18n}\n          onClick={onSelect}\n          searchQuery={facetSearchQuery}\n          buttonRef={(element) => {\n            setRef && setRef(element);\n          }}\n        >\n          <FacetValueLabelHighlight\n            displayValue={displayValue}\n            isSelected={isSelected}\n            searchQuery={facetSearchQuery}\n          ></FacetValueLabelHighlight>\n        </FacetValueLink>\n      );\n    case 'box':\n      return (\n        <FacetValueBox\n          displayValue={displayValue}\n          numberOfResults={facetCount}\n          isSelected={isSelected}\n          i18n={i18n}\n          onClick={onSelect}\n          searchQuery={facetSearchQuery}\n          buttonRef={(element) => {\n            setRef && setRef(element);\n          }}\n        >\n          <FacetValueLabelHighlight\n            displayValue={displayValue}\n            isSelected={isSelected}\n            searchQuery={facetSearchQuery}\n          ></FacetValueLabelHighlight>\n        </FacetValueBox>\n      );\n  }\n};\n"],"version":3}

package/dist/cjs/stencil-facet-value-box-2949669d.js

@@ -0,0 +1,26 @@
+'use strict';
+
+const index = require('./index-757bc886.js');
+const stencilButton = require('./stencil-button-aa4c0879.js');
+
+const FacetValueBox = (props, children) => {
+    const compactCount = new Intl.NumberFormat(props.i18n.language, {
+        notation: 'compact',
+    }).format(props.numberOfResults);
+    const count = props.numberOfResults.toLocaleString(props.i18n.language);
+    const ariaLabel = props.i18n.t('facet-value', {
+        value: props.displayValue,
+        count: props.numberOfResults,
+        formattedCount: compactCount,
+    });
+    return (index.h("li", { key: props.displayValue },
+        index.h(stencilButton.Button, { style: "outline-bg-neutral", part: `value-box${props.isSelected ? ' value-box-selected' : ''}`, onClick: () => props.onClick(), class: `value-box group box-border h-full w-full items-center p-2 ${props.isSelected ? 'selected' : ''}`, ariaPressed: props.isSelected.toString(), ariaLabel: ariaLabel, ref: props.buttonRef },
+            children,
+            index.h("span", { title: count, part: "value-count", class: "value-box-count text-neutral-dark mt-1 w-full truncate text-sm" }, props.i18n.t('between-parentheses', {
+                text: compactCount,
+            })))));
+};
+
+exports.FacetValueBox = FacetValueBox;
+
+//# sourceMappingURL=stencil-facet-value-box-2949669d.js.map

package/dist/cjs/stencil-facet-value-box-2949669d.js.map

@@ -0,0 +1 @@
+{"file":"stencil-facet-value-box-2949669d.js","mappings":";;;;;MAIa,aAAa,GAAyC,CACjE,KAAK,EACL,QAAQ;IAER,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE;QAC9D,QAAQ,EAAE,SAAS;KACpB,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAEjC,MAAM,KAAK,GAAG,KAAK,CAAC,eAAe,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAExE,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,EAAE;QAC5C,KAAK,EAAE,KAAK,CAAC,YAAY;QACzB,KAAK,EAAE,KAAK,CAAC,eAAe;QAC5B,cAAc,EAAE,YAAY;KAC7B,CAAC,CAAC;IAEH,QACEA,gBAAI,GAAG,EAAE,KAAK,CAAC,YAAY;QACzBA,QAACC,oBAAM,IACL,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,YAAY,KAAK,CAAC,UAAU,GAAG,qBAAqB,GAAG,EAAE,EAAE,EACjE,OAAO,EAAE,MAAM,KAAK,CAAC,OAAO,EAAE,EAC9B,KAAK,EAAE,6DACL,KAAK,CAAC,UAAU,GAAG,UAAU,GAAG,EAClC,EAAE,EACF,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ,EAAE,EACxC,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,KAAK,CAAC,SAAS;YAEnB,QAAQ;YACTD,kBACE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,gEAAgE,IAErE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAqB,EAAE;gBACnC,IAAI,EAAE,YAAY;aACnB,CAAC,CACG,CACA,CACN,EACL;AACJ;;;;","names":["h","Button"],"sources":["src/components/common/facets/facet-value-box/stencil-facet-value-box.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {Button} from '../../stencil-button';\nimport {FacetValueProps} from '../stencil-facet-common';\n\nexport const FacetValueBox: FunctionalComponent<FacetValueProps> = (\n  props,\n  children\n) => {\n  const compactCount = new Intl.NumberFormat(props.i18n.language, {\n    notation: 'compact',\n  }).format(props.numberOfResults);\n\n  const count = props.numberOfResults.toLocaleString(props.i18n.language);\n\n  const ariaLabel = props.i18n.t('facet-value', {\n    value: props.displayValue,\n    count: props.numberOfResults,\n    formattedCount: compactCount,\n  });\n\n  return (\n    <li key={props.displayValue}>\n      <Button\n        style=\"outline-bg-neutral\"\n        part={`value-box${props.isSelected ? ' value-box-selected' : ''}`}\n        onClick={() => props.onClick()}\n        class={`value-box group box-border h-full w-full items-center p-2 ${\n          props.isSelected ? 'selected' : ''\n        }`}\n        ariaPressed={props.isSelected.toString()}\n        ariaLabel={ariaLabel}\n        ref={props.buttonRef}\n      >\n        {children}\n        <span\n          title={count}\n          part=\"value-count\"\n          class=\"value-box-count text-neutral-dark mt-1 w-full truncate text-sm\"\n        >\n          {props.i18n.t('between-parentheses', {\n            text: compactCount,\n          })}\n        </span>\n      </Button>\n    </li>\n  );\n};\n"],"version":3}

package/dist/cjs/stencil-facet-value-checkbox-49e6843d.js

@@ -0,0 +1,104 @@
+'use strict';
+
+const index = require('./index-757bc886.js');
+const ripple = require('./ripple-4070d750.js');
+const utils = require('./utils-7153ae6b.js');
+const stencilCheckbox = require('./stencil-checkbox-81c51bbd.js');
+const close = require('./close-20739950.js');
+
+/**
+ * @deprecated Should only be used for Stencil components; for Lit components, use the triStateCheckbox.ts
+ * This file is required to be in a tsx file to be able to use it in Stencil components.
+ */
+const TriStateCheckbox = (props) => {
+    const isSelected = props.state === 'selected';
+    const isExcluded = props.state === 'excluded';
+    const partName = props.part ?? 'checkbox';
+    const classNames = [
+        'w-4 h-4 grid place-items-center rounded focus-visible:outline-none hover:border-primary-light focus-visible:border-primary-light',
+    ];
+    const parts = [partName];
+    if (isSelected) {
+        classNames.push('selected bg-primary hover:bg-primary-light focus-visible:bg-primary-light');
+        parts.push(`${partName}-checked`);
+    }
+    else if (isExcluded) {
+        classNames.push('excluded bg-error hover:bg-error focus-visible:bg-error hover:border-error focus-visible:border-error');
+        parts.push(`${partName}-checked`);
+    }
+    else {
+        classNames.push('border border-neutral-dark');
+    }
+    if (props.class) {
+        classNames.push(props.class);
+    }
+    const attributes = {
+        key: props.key,
+        id: props.id,
+        class: classNames.join(' '),
+        part: parts.join(' '),
+        'aria-pressed': isSelected ? 'true' : isExcluded ? 'mixed' : 'false',
+        'aria-label': props.ariaLabel ?? props.text,
+        value: props.text,
+        ref: props.ref,
+    };
+    return (index.h("button", { ...attributes, role: "button", onClick: () => props.onToggle?.(!isSelected), onMouseDown: (e) => props.onMouseDown?.(e) },
+        index.h("atomic-icon", { style: { stroke: 'white', fill: 'white' }, class: `w-3/5 ${isSelected || isExcluded ? 'block' : 'hidden'}`, icon: isSelected ? stencilCheckbox.Tick : close.CloseIcon, part: props.iconPart })));
+};
+
+const Tick = `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m18 2-1.8-2-7.1 7.1-7.1-7.1-2 2 7.1 7.1-7.1 7.1 2 1.8 7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"/></svg>`;
+
+const FacetValueExclude = (props) => {
+    return (index.h("button", { part: "value-exclude-button", "aria-label": props.ariaLabel, class: "value-exclude-button peer invisible absolute right-2 z-1 order-last ml-auto flex group-hover:visible", onClick: () => props.onClick?.() },
+        index.h("atomic-icon", { class: "bg-neutral hover:bg-error order-last w-4 rounded p-1 hover:fill-white", icon: Tick })));
+};
+
+const FacetValueCheckbox = (props, children) => {
+    const id = utils.randomID('facet-value-');
+    const count = props.numberOfResults.toLocaleString(props.i18n.language);
+    const ariaLabelAttributes = {
+        value: props.displayValue,
+        count: props.numberOfResults,
+        formattedCount: count,
+        interpolation: { escapeValue: false },
+    };
+    const selectedAriaLabel = props.i18n.t('facet-value', ariaLabelAttributes);
+    const excludedAriaLabel = props.i18n.t('facet-value-exclude', ariaLabelAttributes);
+    let labelRef;
+    const isTriStateCheckbox = (a) => {
+        return 'state' in a && 'isSelected' in a;
+    };
+    const renderCheckbox = () => {
+        const attributes = {
+            id,
+            onToggle: () => props.onClick(),
+            part: 'value-checkbox',
+            class: 'value-checkbox',
+            ariaLabel: selectedAriaLabel,
+            ref: props.buttonRef,
+            onMouseDown: (e) => ripple.createRipple(e, { color: 'neutral', parent: labelRef }),
+            iconPart: 'value-checkbox-icon',
+        };
+        if (isTriStateCheckbox(props)) {
+            return index.h(TriStateCheckbox, { ...attributes, state: props.state });
+        }
+        return index.h(stencilCheckbox.StencilCheckbox, { ...attributes, checked: props.isSelected });
+    };
+    const renderExclusion = () => {
+        if (isTriStateCheckbox(props)) {
+            return (index.h(FacetValueExclude, { onClick: () => props.onExclude?.(), ariaLabel: excludedAriaLabel }));
+        }
+    };
+    return (index.h("li", { key: props.displayValue, class: "group relative flex items-center" },
+        renderCheckbox(),
+        index.h("label", { ref: (ref) => (labelRef = ref), htmlFor: id, part: "value-checkbox-label", class: "items-center", onMouseDown: (e) => ripple.createRipple(e, { color: 'neutral' }), "aria-hidden": "true" },
+            children,
+            index.h("span", { part: "value-count", class: "value-count" }, props.i18n.t('between-parentheses', {
+                text: count,
+            }))),
+        renderExclusion()));
+};
+
+exports.FacetValueCheckbox = FacetValueCheckbox;
+
+//# sourceMappingURL=stencil-facet-value-checkbox-49e6843d.js.map

package/dist/cjs/stencil-facet-value-checkbox-49e6843d.js.map

@@ -0,0 +1 @@
+{"file":"stencil-facet-value-checkbox-49e6843d.js","mappings":"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","names":["h","Tick","Close","randomID","createRipple","StencilCheckbox"],"sources":["src/components/common/stencil-triStateCheckbox.tsx","src/components/common/facets/facet-value-exclude/stencil-facet-value-exclude.tsx","src/components/common/facets/facet-value-checkbox/stencil-facet-value-checkbox.tsx"],"sourcesContent":["import {FacetValueState} from '@coveo/headless';\nimport {FunctionalComponent, h} from '@stencil/core';\nimport Tick from '../../images/checkbox.svg';\nimport Close from '../../images/close.svg';\nimport {StencilCheckboxProps} from './stencil-checkbox';\n\nexport type TriStateCheckboxProps = Omit<StencilCheckboxProps, 'checked'> & {\n  state: FacetValueState;\n};\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use the triStateCheckbox.ts\n * This file is required to be in a tsx file to be able to use it in Stencil components.\n */\nexport const TriStateCheckbox: FunctionalComponent<TriStateCheckboxProps> = (\n  props\n) => {\n  const isSelected = props.state === 'selected';\n  const isExcluded = props.state === 'excluded';\n  const partName = props.part ?? 'checkbox';\n\n  const classNames = [\n    'w-4 h-4 grid place-items-center rounded focus-visible:outline-none hover:border-primary-light focus-visible:border-primary-light',\n  ];\n  const parts = [partName];\n  if (isSelected) {\n    classNames.push(\n      'selected bg-primary hover:bg-primary-light focus-visible:bg-primary-light'\n    );\n    parts.push(`${partName}-checked`);\n  } else if (isExcluded) {\n    classNames.push(\n      'excluded bg-error hover:bg-error focus-visible:bg-error hover:border-error focus-visible:border-error'\n    );\n    parts.push(`${partName}-checked`);\n  } else {\n    classNames.push('border border-neutral-dark');\n  }\n  if (props.class) {\n    classNames.push(props.class);\n  }\n\n  const attributes = {\n    key: props.key,\n    id: props.id,\n    class: classNames.join(' '),\n    part: parts.join(' '),\n    'aria-pressed': isSelected ? 'true' : isExcluded ? 'mixed' : 'false',\n    'aria-label': props.ariaLabel ?? props.text,\n    value: props.text,\n    ref: props.ref,\n  };\n\n  return (\n    <button\n      {...attributes}\n      role=\"button\"\n      onClick={() => props.onToggle?.(!isSelected)}\n      onMouseDown={(e) => props.onMouseDown?.(e)}\n    >\n      <atomic-icon\n        style={{stroke: 'white', fill: 'white'}}\n        class={`w-3/5 ${isSelected || isExcluded ? 'block' : 'hidden'}`}\n        icon={isSelected ? Tick : Close}\n        part={props.iconPart}\n      ></atomic-icon>\n    </button>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport Tick from '../../../../images/clear.svg';\n\nexport interface ExcludeProps {\n  onClick(): void;\n  ariaLabel?: string;\n}\n\nexport const FacetValueExclude: FunctionalComponent<ExcludeProps> = (props) => {\n  return (\n    <button\n      part=\"value-exclude-button\"\n      aria-label={props.ariaLabel}\n      class=\"value-exclude-button peer invisible absolute right-2 z-1 order-last ml-auto flex group-hover:visible\"\n      onClick={() => props.onClick?.()}\n    >\n      <atomic-icon\n        class=\"bg-neutral hover:bg-error order-last w-4 rounded p-1 hover:fill-white\"\n        icon={Tick}\n      ></atomic-icon>\n    </button>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {createRipple} from '../../../../utils/ripple';\nimport {randomID} from '../../../../utils/utils';\nimport {StencilCheckbox} from '../../stencil-checkbox';\nimport {TriStateCheckbox} from '../../stencil-triStateCheckbox';\nimport {FacetValueExclude} from '../facet-value-exclude/stencil-facet-value-exclude';\nimport {FacetValueProps} from '../stencil-facet-common';\n\ntype TriStateFacetValueProps = Omit<FacetValueProps, 'isSelected'> & {\n  state: 'idle' | 'selected' | 'excluded';\n  onExclude(): void;\n};\n\nexport const FacetValueCheckbox: FunctionalComponent<\n  FacetValueProps | TriStateFacetValueProps\n> = (props, children) => {\n  const id = randomID('facet-value-');\n  const count = props.numberOfResults.toLocaleString(props.i18n.language);\n  const ariaLabelAttributes = {\n    value: props.displayValue,\n    count: props.numberOfResults,\n    formattedCount: count,\n    interpolation: {escapeValue: false},\n  };\n  const selectedAriaLabel = props.i18n.t('facet-value', ariaLabelAttributes);\n  const excludedAriaLabel = props.i18n.t(\n    'facet-value-exclude',\n    ariaLabelAttributes\n  );\n  let labelRef: HTMLLabelElement;\n\n  const isTriStateCheckbox = (\n    a: FacetValueProps | TriStateFacetValueProps\n  ): a is TriStateFacetValueProps => {\n    return 'state' in a && 'isSelected' in a;\n  };\n\n  const renderCheckbox = () => {\n    const attributes = {\n      id,\n      onToggle: () => props.onClick(),\n      part: 'value-checkbox',\n      class: 'value-checkbox',\n      ariaLabel: selectedAriaLabel,\n      ref: props.buttonRef,\n      onMouseDown: (e: MouseEvent) =>\n        createRipple(e, {color: 'neutral', parent: labelRef}),\n      iconPart: 'value-checkbox-icon',\n    };\n\n    if (isTriStateCheckbox(props)) {\n      return <TriStateCheckbox {...attributes} state={props.state} />;\n    }\n\n    return <StencilCheckbox {...attributes} checked={props.isSelected} />;\n  };\n\n  const renderExclusion = () => {\n    if (isTriStateCheckbox(props)) {\n      return (\n        <FacetValueExclude\n          onClick={() => props.onExclude?.()}\n          ariaLabel={excludedAriaLabel}\n        ></FacetValueExclude>\n      );\n    }\n  };\n\n  return (\n    <li key={props.displayValue} class=\"group relative flex items-center\">\n      {renderCheckbox()}\n      <label\n        ref={(ref) => (labelRef = ref!)}\n        htmlFor={id}\n        part=\"value-checkbox-label\"\n        class=\"items-center\"\n        onMouseDown={(e) => createRipple(e, {color: 'neutral'})}\n        aria-hidden=\"true\"\n      >\n        {children}\n        <span part=\"value-count\" class=\"value-count\">\n          {props.i18n.t('between-parentheses', {\n            text: count,\n          })}\n        </span>\n      </label>\n      {renderExclusion()}\n    </li>\n  );\n};\n"],"version":3}