@coveo/atomic 3.35.0-pre.c5c77d8c36 → 3.35.0-pre.c951c9bf6f

package/dist/esm/atomic-segmented-facet.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-segmented-facet.entry.js","mappings":"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","names":[],"sources":["src/components/search/facets/facet-segmented-value/facet-segmented-value.tsx","src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.pcss?tag=atomic-segmented-facet&encapsulation=shadow","src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {FacetValueProps} from '../../../common/facets/stencil-facet-common';\nimport {Button} from '../../../common/stencil-button';\n\nexport const FacetSegmentedValue: FunctionalComponent<FacetValueProps> = (\n  props\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: count,\n  });\n\n  return (\n    <li key={props.displayValue}>\n      <Button\n        style=\"square-neutral\"\n        part={`value-box${props.isSelected ? ' value-box-selected' : ''}`}\n        onClick={() => props.onClick()}\n        class={`value-box group box-border flex h-full items-center p-2 ${\n          props.isSelected\n            ? 'selected border-primary shadow-inner-primary'\n            : 'hover:border-primary-light focus-visible:border-primary-light'\n        }`}\n        ariaPressed={props.isSelected.toString()}\n        ariaLabel={ariaLabel}\n      >\n        <span\n          title={props.displayValue}\n          part=\"value-label\"\n          class={`value-label truncate ${\n            props.isSelected\n              ? 'text-primary'\n              : 'group-hover:text-primary-light group-focus:text-primary'\n          }`}\n        >\n          {props.displayValue}\n        </span>\n        <span\n          title={count}\n          part=\"value-count\"\n          class={`value-box-count mt-0 w-auto truncate pl-1 text-sm ${\n            props.isSelected\n              ? 'text-primary'\n              : 'text-neutral-dark group-hover:text-primary-light group-focus:text-primary'\n          }`}\n        >\n          {props.i18n.t('between-parentheses', {\n            text: compactCount,\n          })}\n        </span>\n      </Button>\n    </li>\n  );\n};\n","@import '../../../common/facets/facet-common.pcss';\n@import '../facet-segmented-value/facet-segmented-value.pcss';\n","import {\n  buildFacet,\n  buildFacetConditionsManager,\n  buildSearchStatus,\n  CategoryFacetValueRequest,\n  Facet,\n  FacetConditionsManager,\n  FacetOptions,\n  FacetSortCriterion,\n  FacetState,\n  FacetValue,\n  FacetValueRequest,\n  SearchStatus,\n  SearchStatusState,\n  buildTabManager,\n  TabManager,\n  TabManagerState,\n} from '@coveo/headless';\nimport {Component, h, Prop, State, VNode} from '@stencil/core';\nimport {getFieldValueCaption} from '../../../../utils/field-utils';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {ArrayProp, MapProp} from '../../../../utils/props-utils';\nimport {parseDependsOn} from '../../../common/facets/depends-on';\nimport {FacetValuesGroup} from '../../../common/facets/facet-values-group/stencil-facet-values-group';\nimport {Hidden} from '../../../common/stencil-hidden';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {FacetSegmentedValue} from '../facet-segmented-value/facet-segmented-value';\n\n/**\n * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.\n * @part segmented-container - The container that holds the segmented facets.\n * @part label - The facet value label.\n * @part values - The facet values container.\n * @part value-box - The facet value.\n * @part value-box-selected - The selected facet value.\n * @part placeholder - The placeholder displayed when the facet is loading.\n */\n@Component({\n  tag: 'atomic-segmented-facet',\n  styleUrl: 'atomic-segmented-facet.pcss',\n  shadow: true,\n})\nexport class AtomicSegmentedFacet implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  public searchStatus!: SearchStatus;\n  public tabManager!: TabManager;\n  @State()\n  public searchStatusState!: SearchStatusState;\n  @BindStateToController('tabManager')\n  @State()\n  public tabManagerState!: TabManagerState;\n  @BindStateToController('facet')\n  @State()\n  public facetState!: FacetState;\n  public facet!: Facet;\n  @State() public error!: Error;\n\n  /**\n   * Specifies a unique identifier for the facet.\n   */\n  @Prop({mutable: true, reflect: true}) public facetId?: string;\n  /**\n   * The field whose values you want to display in the facet.\n   */\n  @Prop({reflect: true}) public field!: string;\n  /**\n   * The non-localized label for the facet.\n   * Used in the `atomic-breadbox` component through the bindings store.\n   */\n  @Prop({reflect: true}) public label?: string;\n  /**\n   * The tabs on which the facet can be displayed. This property should not be used at the same time as `tabs-excluded`.\n   *\n   * Set this property as a stringified JSON array, e.g.,\n   * ```html\n   *  <atomic-timeframe-facet tabs-included='[\"tabIDA\", \"tabIDB\"]'></atomic-timeframe-facet>\n   * ```\n   * If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet can only be displayed on the specified tabs.\n   */\n  @ArrayProp()\n  @Prop({reflect: true, mutable: true})\n  public tabsIncluded: string[] | string = '[]';\n\n  /**\n   * The tabs on which this facet must not be displayed. This property should not be used at the same time as `tabs-included`.\n   *\n   * Set this property as a stringified JSON array, e.g.,\n   * ```html\n   *  <atomic-timeframe-facet tabs-excluded='[\"tabIDA\", \"tabIDB\"]'></atomic-timeframe-facet>\n   * ```\n   * If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet won't be displayed on any of the specified tabs.\n   */\n  @ArrayProp()\n  @Prop({reflect: true, mutable: true})\n  public tabsExcluded: string[] | string = '[]';\n\n  /**\n   * Whether to exclude the parents of folded results when estimating the result count for each facet value.\n   *\n   *\n   * Note: Resulting count is only an estimation, in some cases this value could be incorrect.\n   */\n  @Prop({reflect: true}) public filterFacetCount = true;\n  /**\n   * The maximum number of results to scan in the index to ensure that the facet lists all potential facet values.\n   * Note: A high injectionDepth may negatively impact the facet request performance.\n   * Minimum: `0`\n   * Default: `1000`\n   */\n  @Prop() public injectionDepth = 1000;\n  /**\n   * The number of values to request for this facet.\n   * Also determines the number of additional values to request each time more values are shown.\n   */\n  @Prop({reflect: true}) public numberOfValues = 6;\n  /**\n   * The sort criterion to apply to the returned facet values.\n   * Possible values are 'score', 'alphanumeric', 'alphanumericDescending', 'occurrences', alphanumericNatural', 'alphanumericNaturalDescending' and 'automatic'.\n   */\n  @Prop({reflect: true}) public sortCriteria: FacetSortCriterion = 'automatic';\n\n  /**\n   * The required facets and values for this facet to be displayed.\n   * Examples:\n   * ```html\n   * <atomic-segmented-facet facet-id=\"abc\" field=\"objecttype\" ...></atomic-segmented-facet>\n   *\n   * <!-- To show the facet when any value is selected in the facet with id \"abc\": -->\n   * <atomic-segmented-facet\n   *   depends-on-abc\n   *   ...\n   * ></atomic-segmented-facet>\n   *\n   * <!-- To show the facet when value \"doc\" is selected in the facet with id \"abc\": -->\n   * <atomic-facet\n   *   depends-on-abc=\"doc\"\n   *   ...\n   * ></atomic-segmented-facet>\n   * ```\n   */\n  @MapProp() @Prop() public dependsOn: Record<string, string> = {};\n  /**\n   * Specifies an explicit list of `allowedValues` in the Search API request. This list is in the form of a JSON string.\n   *\n   * If you specify a list of values for this option, the facet only uses these values (if they are available in\n   * the current result set).\n   *\n   * Example:\n   *\n   * The following facet only uses the `Contact`, `Account`, and `File` values of the `objecttype` field. Even if the\n   * current result set contains other `objecttype` values, such as `Message` or `Product`, the facet does not use\n   * them.\n   *\n   * ```html\n   * <atomic-segmented-facet field=\"objecttype\" allowed-values='[\"Contact\",\"Account\",\"File\"]'></atomic-segmented-facet>\n   * ```\n   *\n   * The maximum amount of allowed values is 25.\n   *\n   * The default value is `undefined`, and the facet uses all available values for its `field` in the current result set.\n   */\n  @ArrayProp()\n  @Prop({mutable: true})\n  public allowedValues: string[] | string = '[]';\n\n  /**\n   * Identifies the facet values that must appear at the top, in this order.\n   * This parameter can be used in conjunction with the `sortCriteria` parameter.\n   *\n   * Facet values not part of the `customSort` list will be sorted according to the `sortCriteria`.\n   *\n   * Example:\n   *\n   * The following facet will sort the `Contact`, `Account`, and `File` values at the top of the list for the `objecttype` field.\n   *\n   * If there are more than these 3 values available, the rest of the list will be sorted using `occurrences`.\n   *\n   * ```html\n   * <atomic-segmented-facet field=\"objecttype\" custom-sort='[\"Contact\",\"Account\",\"File\"]' sort-criteria='occurrences'></atomic-segmented-facet>\n   * ```\n   * The maximum amount of custom sort values is 25.\n   *\n   * The default value is `undefined`, and the facet values will be sorted using only the `sortCriteria`.\n   */\n  @ArrayProp()\n  @Prop({mutable: true})\n  public customSort: string[] | string = '[]';\n\n  private dependenciesManager!: FacetConditionsManager;\n\n  public initialize() {\n    if (\n      [...this.tabsIncluded].length > 0 &&\n      [...this.tabsExcluded].length > 0\n    ) {\n      console.warn(\n        'Values for both \"tabs-included\" and \"tabs-excluded\" have been provided. This is could lead to unexpected behaviors.'\n      );\n    }\n    this.searchStatus = buildSearchStatus(this.bindings.engine);\n    this.tabManager = buildTabManager(this.bindings.engine);\n\n    this.facet = buildFacet(this.bindings.engine, {options: this.facetOptions});\n    this.facetId = this.facet.state.facetId;\n    this.dependenciesManager = buildFacetConditionsManager(\n      this.bindings.engine,\n      {\n        facetId: this.facetId!,\n        conditions: parseDependsOn<\n          FacetValueRequest | CategoryFacetValueRequest\n        >(this.dependsOn),\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    this.dependenciesManager.stopWatching();\n  }\n\n  private renderValuesContainer(children: VNode[]) {\n    const classes = 'box-container flex h-10';\n    return (\n      <FacetValuesGroup i18n={this.bindings.i18n} label={this.label}>\n        <ul class={classes} part=\"values\">\n          {children}\n        </ul>\n      </FacetValuesGroup>\n    );\n  }\n\n  private renderValue(facetValue: FacetValue, onClick: () => void) {\n    const displayValue = getFieldValueCaption(\n      this.field,\n      facetValue.value,\n      this.bindings.i18n\n    );\n    const isSelected = facetValue.state !== 'idle';\n\n    return (\n      <FacetSegmentedValue\n        displayValue={displayValue}\n        numberOfResults={facetValue.numberOfResults}\n        isSelected={isSelected}\n        i18n={this.bindings.i18n}\n        onClick={onClick}\n        searchQuery={this.facetState.facetSearch.query}\n      ></FacetSegmentedValue>\n    );\n  }\n\n  private renderValues() {\n    return this.renderValuesContainer(\n      this.facetState.values.map((value) =>\n        this.renderValue(value, () => this.facet.toggleSingleSelect(value))\n      )\n    );\n  }\n\n  private renderLabel() {\n    if (!this.label) {\n      return;\n    }\n    return (\n      <b class=\"mr-2\" part=\"label\">\n        {this.label}:\n      </b>\n    );\n  }\n\n  private get facetOptions(): FacetOptions {\n    return {\n      facetId: this.facetId,\n      field: this.field,\n      numberOfValues: this.numberOfValues,\n      sortCriteria: this.sortCriteria,\n      facetSearch: {numberOfValues: this.numberOfValues},\n      filterFacetCount: this.filterFacetCount,\n      injectionDepth: this.injectionDepth,\n      hasBreadcrumbs: false,\n      allowedValues: this.allowedValues.length\n        ? [...this.allowedValues]\n        : undefined,\n      customSort: this.customSort.length ? [...this.customSort] : undefined,\n      tabs: {\n        included: [...this.tabsIncluded],\n        excluded: [...this.tabsExcluded],\n      },\n    };\n  }\n\n  public render() {\n    if (this.searchStatus.state.hasError || !this.facet.state.enabled) {\n      return <Hidden></Hidden>;\n    }\n\n    if (!this.searchStatus.state.firstSearchExecuted) {\n      return (\n        <div\n          part=\"placeholder\"\n          aria-hidden\n          class=\"bg-neutral h-8 w-48 animate-pulse rounded\"\n        ></div>\n      );\n    }\n\n    if (!this.facetState.values.length) {\n      return <Hidden></Hidden>;\n    }\n\n    return (\n      <div\n        part=\"segmented-container\"\n        class=\"mr-2 flex h-10 items-center whitespace-nowrap\"\n      >\n        {this.renderLabel()}\n        {this.renderValues()}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-segmented-facet.entry.js","mappings":"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","names":[],"sources":["src/components/search/facets/facet-segmented-value/facet-segmented-value.tsx","src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.pcss?tag=atomic-segmented-facet&encapsulation=shadow","src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {FacetValueProps} from '../../../common/facets/stencil-facet-common';\nimport {Button} from '../../../common/stencil-button';\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const FacetSegmentedValue: FunctionalComponent<FacetValueProps> = (\n  props\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: count,\n  });\n\n  return (\n    <li key={props.displayValue}>\n      <Button\n        style=\"square-neutral\"\n        part={`value-box${props.isSelected ? ' value-box-selected' : ''}`}\n        onClick={() => props.onClick()}\n        class={`value-box group box-border flex h-full items-center p-2 ${\n          props.isSelected\n            ? 'selected border-primary shadow-inner-primary'\n            : 'hover:border-primary-light focus-visible:border-primary-light'\n        }`}\n        ariaPressed={props.isSelected.toString()}\n        ariaLabel={ariaLabel}\n      >\n        <span\n          title={props.displayValue}\n          part=\"value-label\"\n          class={`value-label truncate ${\n            props.isSelected\n              ? 'text-primary'\n              : 'group-hover:text-primary-light group-focus:text-primary'\n          }`}\n        >\n          {props.displayValue}\n        </span>\n        <span\n          title={count}\n          part=\"value-count\"\n          class={`value-box-count mt-0 w-auto truncate pl-1 text-sm ${\n            props.isSelected\n              ? 'text-primary'\n              : 'text-neutral-dark group-hover:text-primary-light group-focus:text-primary'\n          }`}\n        >\n          {props.i18n.t('between-parentheses', {\n            text: compactCount,\n          })}\n        </span>\n      </Button>\n    </li>\n  );\n};\n","@import '../../../common/facets/facet-common.pcss';\n@import '../facet-segmented-value/facet-segmented-value.pcss';\n","import {\n  buildFacet,\n  buildFacetConditionsManager,\n  buildSearchStatus,\n  CategoryFacetValueRequest,\n  Facet,\n  FacetConditionsManager,\n  FacetOptions,\n  FacetSortCriterion,\n  FacetState,\n  FacetValue,\n  FacetValueRequest,\n  SearchStatus,\n  SearchStatusState,\n  buildTabManager,\n  TabManager,\n  TabManagerState,\n} from '@coveo/headless';\nimport {Component, h, Prop, State, VNode} from '@stencil/core';\nimport {getFieldValueCaption} from '../../../../utils/field-utils';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {ArrayProp, MapProp} from '../../../../utils/props-utils';\nimport {parseDependsOn} from '../../../common/facets/depends-on';\nimport {FacetValuesGroup} from '../../../common/facets/facet-values-group/stencil-facet-values-group';\nimport {Hidden} from '../../../common/stencil-hidden';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {FacetSegmentedValue} from '../facet-segmented-value/facet-segmented-value';\n\n/**\n * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.\n * @part segmented-container - The container that holds the segmented facets.\n * @part label - The facet value label.\n * @part values - The facet values container.\n * @part value-box - The facet value.\n * @part value-box-selected - The selected facet value.\n * @part placeholder - The placeholder displayed when the facet is loading.\n */\n@Component({\n  tag: 'atomic-segmented-facet',\n  styleUrl: 'atomic-segmented-facet.pcss',\n  shadow: true,\n})\nexport class AtomicSegmentedFacet implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  public searchStatus!: SearchStatus;\n  public tabManager!: TabManager;\n  @State()\n  public searchStatusState!: SearchStatusState;\n  @BindStateToController('tabManager')\n  @State()\n  public tabManagerState!: TabManagerState;\n  @BindStateToController('facet')\n  @State()\n  public facetState!: FacetState;\n  public facet!: Facet;\n  @State() public error!: Error;\n\n  /**\n   * Specifies a unique identifier for the facet.\n   */\n  @Prop({mutable: true, reflect: true}) public facetId?: string;\n  /**\n   * The field whose values you want to display in the facet.\n   */\n  @Prop({reflect: true}) public field!: string;\n  /**\n   * The non-localized label for the facet.\n   * Used in the `atomic-breadbox` component through the bindings store.\n   */\n  @Prop({reflect: true}) public label?: string;\n  /**\n   * The tabs on which the facet can be displayed. This property should not be used at the same time as `tabs-excluded`.\n   *\n   * Set this property as a stringified JSON array, e.g.,\n   * ```html\n   *  <atomic-timeframe-facet tabs-included='[\"tabIDA\", \"tabIDB\"]'></atomic-timeframe-facet>\n   * ```\n   * If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet can only be displayed on the specified tabs.\n   */\n  @ArrayProp()\n  @Prop({reflect: true, mutable: true})\n  public tabsIncluded: string[] | string = '[]';\n\n  /**\n   * The tabs on which this facet must not be displayed. This property should not be used at the same time as `tabs-included`.\n   *\n   * Set this property as a stringified JSON array, e.g.,\n   * ```html\n   *  <atomic-timeframe-facet tabs-excluded='[\"tabIDA\", \"tabIDB\"]'></atomic-timeframe-facet>\n   * ```\n   * If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet won't be displayed on any of the specified tabs.\n   */\n  @ArrayProp()\n  @Prop({reflect: true, mutable: true})\n  public tabsExcluded: string[] | string = '[]';\n\n  /**\n   * Whether to exclude the parents of folded results when estimating the result count for each facet value.\n   *\n   *\n   * Note: Resulting count is only an estimation, in some cases this value could be incorrect.\n   */\n  @Prop({reflect: true}) public filterFacetCount = true;\n  /**\n   * The maximum number of results to scan in the index to ensure that the facet lists all potential facet values.\n   * Note: A high injectionDepth may negatively impact the facet request performance.\n   * Minimum: `0`\n   * Default: `1000`\n   */\n  @Prop() public injectionDepth = 1000;\n  /**\n   * The number of values to request for this facet.\n   * Also determines the number of additional values to request each time more values are shown.\n   */\n  @Prop({reflect: true}) public numberOfValues = 6;\n  /**\n   * The sort criterion to apply to the returned facet values.\n   * Possible values are 'score', 'alphanumeric', 'alphanumericDescending', 'occurrences', alphanumericNatural', 'alphanumericNaturalDescending' and 'automatic'.\n   */\n  @Prop({reflect: true}) public sortCriteria: FacetSortCriterion = 'automatic';\n\n  /**\n   * The required facets and values for this facet to be displayed.\n   * Examples:\n   * ```html\n   * <atomic-segmented-facet facet-id=\"abc\" field=\"objecttype\" ...></atomic-segmented-facet>\n   *\n   * <!-- To show the facet when any value is selected in the facet with id \"abc\": -->\n   * <atomic-segmented-facet\n   *   depends-on-abc\n   *   ...\n   * ></atomic-segmented-facet>\n   *\n   * <!-- To show the facet when value \"doc\" is selected in the facet with id \"abc\": -->\n   * <atomic-facet\n   *   depends-on-abc=\"doc\"\n   *   ...\n   * ></atomic-segmented-facet>\n   * ```\n   */\n  @MapProp() @Prop() public dependsOn: Record<string, string> = {};\n  /**\n   * Specifies an explicit list of `allowedValues` in the Search API request. This list is in the form of a JSON string.\n   *\n   * If you specify a list of values for this option, the facet only uses these values (if they are available in\n   * the current result set).\n   *\n   * Example:\n   *\n   * The following facet only uses the `Contact`, `Account`, and `File` values of the `objecttype` field. Even if the\n   * current result set contains other `objecttype` values, such as `Message` or `Product`, the facet does not use\n   * them.\n   *\n   * ```html\n   * <atomic-segmented-facet field=\"objecttype\" allowed-values='[\"Contact\",\"Account\",\"File\"]'></atomic-segmented-facet>\n   * ```\n   *\n   * The maximum amount of allowed values is 25.\n   *\n   * The default value is `undefined`, and the facet uses all available values for its `field` in the current result set.\n   */\n  @ArrayProp()\n  @Prop({mutable: true})\n  public allowedValues: string[] | string = '[]';\n\n  /**\n   * Identifies the facet values that must appear at the top, in this order.\n   * This parameter can be used in conjunction with the `sortCriteria` parameter.\n   *\n   * Facet values not part of the `customSort` list will be sorted according to the `sortCriteria`.\n   *\n   * Example:\n   *\n   * The following facet will sort the `Contact`, `Account`, and `File` values at the top of the list for the `objecttype` field.\n   *\n   * If there are more than these 3 values available, the rest of the list will be sorted using `occurrences`.\n   *\n   * ```html\n   * <atomic-segmented-facet field=\"objecttype\" custom-sort='[\"Contact\",\"Account\",\"File\"]' sort-criteria='occurrences'></atomic-segmented-facet>\n   * ```\n   * The maximum amount of custom sort values is 25.\n   *\n   * The default value is `undefined`, and the facet values will be sorted using only the `sortCriteria`.\n   */\n  @ArrayProp()\n  @Prop({mutable: true})\n  public customSort: string[] | string = '[]';\n\n  private dependenciesManager!: FacetConditionsManager;\n\n  public initialize() {\n    if (\n      [...this.tabsIncluded].length > 0 &&\n      [...this.tabsExcluded].length > 0\n    ) {\n      console.warn(\n        'Values for both \"tabs-included\" and \"tabs-excluded\" have been provided. This is could lead to unexpected behaviors.'\n      );\n    }\n    this.searchStatus = buildSearchStatus(this.bindings.engine);\n    this.tabManager = buildTabManager(this.bindings.engine);\n\n    this.facet = buildFacet(this.bindings.engine, {options: this.facetOptions});\n    this.facetId = this.facet.state.facetId;\n    this.dependenciesManager = buildFacetConditionsManager(\n      this.bindings.engine,\n      {\n        facetId: this.facetId!,\n        conditions: parseDependsOn<\n          FacetValueRequest | CategoryFacetValueRequest\n        >(this.dependsOn),\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    this.dependenciesManager.stopWatching();\n  }\n\n  private renderValuesContainer(children: VNode[]) {\n    const classes = 'box-container flex h-10';\n    return (\n      <FacetValuesGroup i18n={this.bindings.i18n} label={this.label}>\n        <ul class={classes} part=\"values\">\n          {children}\n        </ul>\n      </FacetValuesGroup>\n    );\n  }\n\n  private renderValue(facetValue: FacetValue, onClick: () => void) {\n    const displayValue = getFieldValueCaption(\n      this.field,\n      facetValue.value,\n      this.bindings.i18n\n    );\n    const isSelected = facetValue.state !== 'idle';\n\n    return (\n      <FacetSegmentedValue\n        displayValue={displayValue}\n        numberOfResults={facetValue.numberOfResults}\n        isSelected={isSelected}\n        i18n={this.bindings.i18n}\n        onClick={onClick}\n        searchQuery={this.facetState.facetSearch.query}\n      ></FacetSegmentedValue>\n    );\n  }\n\n  private renderValues() {\n    return this.renderValuesContainer(\n      this.facetState.values.map((value) =>\n        this.renderValue(value, () => this.facet.toggleSingleSelect(value))\n      )\n    );\n  }\n\n  private renderLabel() {\n    if (!this.label) {\n      return;\n    }\n    return (\n      <b class=\"mr-2\" part=\"label\">\n        {this.label}:\n      </b>\n    );\n  }\n\n  private get facetOptions(): FacetOptions {\n    return {\n      facetId: this.facetId,\n      field: this.field,\n      numberOfValues: this.numberOfValues,\n      sortCriteria: this.sortCriteria,\n      facetSearch: {numberOfValues: this.numberOfValues},\n      filterFacetCount: this.filterFacetCount,\n      injectionDepth: this.injectionDepth,\n      hasBreadcrumbs: false,\n      allowedValues: this.allowedValues.length\n        ? [...this.allowedValues]\n        : undefined,\n      customSort: this.customSort.length ? [...this.customSort] : undefined,\n      tabs: {\n        included: [...this.tabsIncluded],\n        excluded: [...this.tabsExcluded],\n      },\n    };\n  }\n\n  public render() {\n    if (this.searchStatus.state.hasError || !this.facet.state.enabled) {\n      return <Hidden></Hidden>;\n    }\n\n    if (!this.searchStatus.state.firstSearchExecuted) {\n      return (\n        <div\n          part=\"placeholder\"\n          aria-hidden\n          class=\"bg-neutral h-8 w-48 animate-pulse rounded\"\n        ></div>\n      );\n    }\n\n    if (!this.facetState.values.length) {\n      return <Hidden></Hidden>;\n    }\n\n    return (\n      <div\n        part=\"segmented-container\"\n        class=\"mr-2 flex h-10 items-center whitespace-nowrap\"\n      >\n        {this.renderLabel()}\n        {this.renderValues()}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/atomic-smart-snippet-answer_2.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3f35faca.js';
 import { D as DOMPurify } from './purify-c7ebd240.js';
 import { q as sanitizeStyle } from './utils-6400ebde.js';
-import { b as bindAnalyticsToLink, L as LinkWithItemAnalytics } from './stencil-item-link-5a3f8f23.js';
+import { b as bindAnalyticsToLink, L as LinkWithItemAnalytics } from './stencil-item-link-0183987b.js';
 import { I as InitializeBindings } from './initialization-utils-ffbc4136.js';
 import './_commonjsHelpers-1789f0cf.js';
 import './xss-utils-c92f3869.js';
@@ -94,7 +94,7 @@ const AtomicSmartSnippetAnswer = class {
             }), ref: (element) => element && this.bindAnalyticsToLinks(element), part: "answer", class: "margin" })));
     }
     render() {
-        return (h(Host, { key: '8486943a3aef7c670b6aaaaf2adc99b7408538d2' }, this.renderStyle(), this.renderContent()));
+        return (h(Host, { key: 'fed2f87b6404533799bbd48578ce2901bf7fcdd4' }, this.renderStyle(), this.renderContent()));
     }
     get host() { return getElement(this); }
 };
@@ -128,7 +128,7 @@ const AtomicSmartSnippetSource = class {
         }
     }
     render() {
-        return (h(Host, { key: '5a10a0706bf8e80386a0f8da5b879b09466f65cd' }, h(LinkWithItemAnalytics, { key: '9e829ba9801705e23ca04e971d5b16c8b143852d', title: this.source.clickUri, href: this.source.clickUri, className: "block truncate", part: "source-url", attributes: this.anchorAttributes, onSelect: () => this.selectSource.emit(), onBeginDelayedSelect: () => this.beginDelayedSelectSource.emit(), onCancelPendingSelect: () => this.cancelPendingSelectSource.emit() }, this.source.clickUri), h(LinkWithItemAnalytics, { key: 'e32f6c7a1c94f4baa3239e18c9d36796d5472827', title: this.source.title, href: this.source.clickUri, attributes: this.anchorAttributes, className: "block", part: "source-title", onSelect: () => this.selectSource.emit(), onBeginDelayedSelect: () => this.beginDelayedSelectSource.emit(), onCancelPendingSelect: () => this.cancelPendingSelectSource.emit() }, h("atomic-result-text", { field: "title", default: "no-title", key: this.source.uniqueId }))));
+        return (h(Host, { key: '62ba8670a9d92a502d5d9d4a972ba3f52a3bbaf7' }, h(LinkWithItemAnalytics, { key: 'fb96aa49bff0bc4cf7da6f39966eb32e12d4422e', title: this.source.clickUri, href: this.source.clickUri, className: "block truncate", part: "source-url", attributes: this.anchorAttributes, onSelect: () => this.selectSource.emit(), onBeginDelayedSelect: () => this.beginDelayedSelectSource.emit(), onCancelPendingSelect: () => this.cancelPendingSelectSource.emit() }, this.source.clickUri), h(LinkWithItemAnalytics, { key: '22612502b308810c8ddf816eade0213e0cf73c63', title: this.source.title, href: this.source.clickUri, attributes: this.anchorAttributes, className: "block", part: "source-title", onSelect: () => this.selectSource.emit(), onBeginDelayedSelect: () => this.beginDelayedSelectSource.emit(), onCancelPendingSelect: () => this.cancelPendingSelectSource.emit() }, h("atomic-result-text", { field: "title", default: "no-title", key: this.source.uniqueId }))));
     }
 };
 __decorate([

package/dist/esm/atomic-smart-snippet-collapse-wrapper_2.entry.js

@@ -58,11 +58,11 @@ const AtomicSmartSnippetCollapseWrapper = class {
         return (h("button", { onClick: () => (this.isExpanded = !this.isExpanded), class: "text-primary mb-4 hover:underline", part: this.isExpanded ? 'show-less-button' : 'show-more-button' }, this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more'), h("atomic-icon", { icon: ArrowDown, class: "ml-2 w-3 align-baseline" })));
     }
     render() {
-        return (h(Host, { key: 'd0d27aef50cb43927fee9d1c85fc738649d7e808', class: this.fullHeight || !this.shouldRenderButton
+        return (h(Host, { key: 'a0512bb9339aa1f67ce9ceda485a679f7bba18d7', class: this.fullHeight || !this.shouldRenderButton
                 ? this.isExpanded
                     ? 'expanded'
                     : ''
-                : 'invisible' }, h("div", { key: '86558fb96f6483ce6a188ce5c6831fd793bb87bb', part: "smart-snippet-collapse-wrapper", class: "block overflow-hidden" }, h("slot", { key: 'bcf00155844052da320e6e6e6e09c81e0c5dcd23' })), this.shouldRenderButton && this.renderButton()));
+                : 'invisible' }, h("div", { key: '3e8ebaea7dfc887b308375dfa1d0ee12b032c02a', part: "smart-snippet-collapse-wrapper", class: "block overflow-hidden" }, h("slot", { key: '5f616b655709278c42c776ecf5d868d081a33dbd' })), this.shouldRenderButton && this.renderButton()));
     }
     get host() { return getElement(this); }
 };
@@ -152,7 +152,7 @@ const AtomicSmartSnippetExpandableAnswer = class {
         return (h("button", { onClick: () => this.isExpanded ? this.collapse.emit() : this.expand.emit(), class: "text-primary mb-4 hover:underline", part: this.isExpanded ? 'show-less-button' : 'show-more-button' }, this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more'), h("atomic-icon", { icon: ArrowDown, class: "ml-2 w-3 align-baseline" })));
     }
     render() {
-        return (h("div", { key: '33e4b681dda67f25f3fc0d067b75abcf3092c39b', class: this.isExpanded ? 'expanded' : '' }, this.renderAnswer(), this.renderButton()));
+        return (h("div", { key: 'cc637ccf01537e63e0dbf57d9bf6755fc70ecebe', class: this.isExpanded ? 'expanded' : '' }, this.renderAnswer(), this.renderButton()));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/atomic-smart-snippet-feedback-modal.entry.js

@@ -1,13 +1,12 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-3f35faca.js';
 import { A as ATOMIC_MODAL_EXPORT_PARTS } from './export-parts-14a53e2c.js';
-import { S as SmartSnippetFeedbackModalFooter, a as SmartSnippetFeedbackModalBody, b as SmartSnippetFeebackModalOptions, s as smartSnippetFeedbackOptions, c as SmartSnippetFeedbackModalOption, d as SmartSnippetFeedbackModalDetails, e as SmartSnippetFeedbackModalHeader } from './smart-snippet-feedback-modal-common-835aa607.js';
+import { S as SmartSnippetFeedbackModalFooter, a as SmartSnippetFeedbackModalBody, b as SmartSnippetFeebackModalOptions, s as smartSnippetFeedbackOptions, c as SmartSnippetFeedbackModalOption, d as SmartSnippetFeedbackModalDetails, e as SmartSnippetFeedbackModalHeader } from './smart-snippet-feedback-modal-common-9d74c0b9.js';
 import { u as updateBreakpoints } from './replace-breakpoint-utils-13ff9ca5.js';
 import { r as randomID } from './utils-6400ebde.js';
 import { buildSmartSnippet } from '@coveo/headless';
 import { I as InitializeBindings } from './initialization-utils-ffbc4136.js';
-import './stencil-button-1a29a5df.js';
+import './stencil-button-49254c75.js';
 import './event-utils-8de63ec3.js';
-import './stencil-button-style-0bc80040.js';
 import './dom-utils-f6086cd3.js';
 import './purify-c7ebd240.js';
 import './_commonjsHelpers-1789f0cf.js';
@@ -49,9 +48,9 @@ const AtomicSmartSnippetFeedbackModal = class {
     }
     render() {
         updateBreakpoints(this.host);
-        return (h("atomic-modal", { key: '0ff06e629ecde723679117ea736d20e81acf4d79', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: '8edd7c00f5c17294da616e054fda8026388b411e', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: '48b08a1c1bb62763f4b00a4c0eb61bcb9fd24ba6', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: '89f7bc92f38b53cdf7243e547f17fc933b052ab0', i18n: this.bindings.i18n }, smartSnippetFeedbackOptions.map(({ id, localeKey, correspondingAnswer }) => (h(SmartSnippetFeedbackModalOption, { correspondingAnswer: correspondingAnswer, currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, id: id, localeKey: localeKey, onChange: () => {
+        return (h("atomic-modal", { key: '7632699011d0e2965a07e123b0992daaa86ad399', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: '012680182a0320466803cbd2904bc2361f3ecb31', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: 'a7aec5fa2a262d48a9a3498a6cd01a67e11d7c89', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: '9c9b1c0cda2d144d163917701d50f022e41ecec8', i18n: this.bindings.i18n }, smartSnippetFeedbackOptions.map(({ id, localeKey, correspondingAnswer }) => (h(SmartSnippetFeedbackModalOption, { correspondingAnswer: correspondingAnswer, currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, id: id, localeKey: localeKey, onChange: () => {
                 this.currentAnswer = correspondingAnswer;
-            } })))), h(SmartSnippetFeedbackModalDetails, { key: '52590220abd5d03b776ef56deb5b85add0adee6b', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: '92c8766bf0fd0becd4bce8256e7cf379b1f1c075', formId: this.formId, i18n: this.bindings.i18n, onClick: () => this.close() })));
+            } })))), h(SmartSnippetFeedbackModalDetails, { key: '94c02829d22579cdc5a5689fb799ce6bb094f761', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: 'a36ed0580623fa0f4f8c2acc918cfdd84ea86991', formId: this.formId, i18n: this.bindings.i18n, onClick: () => this.close() })));
     }
     close() {
         this.isOpen = false;

package/dist/esm/atomic-smart-snippet-feedback-modal.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-smart-snippet-feedback-modal.entry.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,kCAAkC,GAAG,iykEAAiykE,CAAC;AAC70kE,8CAAe,kCAAkC;;;;;;;;;;;;MC8DpC,+BAA+B;;;;QAQJ,WAAM,GAAG,KAAK,CAAC;QAIpC,WAAM,GAAG,QAAQ,CAChC,2CAA2C,CAC5C,CAAC;;;sBAN6C,KAAK;;;IAWpD,eAAe,CAAC,MAAe;QAC7B,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,CAAC;YACtC,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;SAChC;KACF;IAED,UAAU;QACR,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;KAC7D;IAEM,MAAM;QACX,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7B,QACE,qEACE,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,EACzB,WAAW,EAAE,yBAAyB,IAEtC,EAAC,+BAA+B,qDAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAI,EAC7D,EAAC,6BAA6B,qDAC5B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,CAAC,CAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAE5C,EAAC,+BAA+B,qDAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,IACtD,2BAA2B,CAAC,GAAG,CAC9B,CAAC,EAAC,EAAE,EAAE,SAAS,EAAE,mBAAmB,EAAC,MACnC,EAAC,+BAA+B,IAC9B,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE;gBACR,IAAI,CAAC,aAAa,GAAG,mBAAmB,CAAC;aAC1C,GACD,CACH,CACF,CAC+B,EAClC,EAAC,gCAAgC,qDAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,kBAAkB,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC,GACzD,CAC4B,EAChC,EAAC,+BAA+B,qDAC9B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,GAC3B,CACW,EACf;KACH;IAEO,KAAK;QACX,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,CAAC;KACxC;IAEO,YAAY,CAAC,CAAQ;QAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE;YAClC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,IAAI,CAAC,eAAgB,CAAC,KAAK,CAAC,CAAC;SACrE;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,YAAY,CAC5B,IAAI,CAAC,aAAqC,CAC3C,CAAC;SACH;QACD,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;QACzB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;;;;;;AA9F4B;IAA5B,kBAAkB,EAAE;iEAA4B;;;;;","names":[],"sources":["src/components/search/smart-snippets/atomic-smart-snippet-feedback-modal/atomic-smart-snippet-feedback-modal.pcss?tag=atomic-smart-snippet-feedback-modal&encapsulation=shadow","src/components/search/smart-snippets/atomic-smart-snippet-feedback-modal/atomic-smart-snippet-feedback-modal.tsx"],"sourcesContent":["@import '../../../common/smart-snippets/atomic-smart-snippet-feedback-modal/atomic-smart-snippet-feedback-modal.pcss';\n","import {ATOMIC_MODAL_EXPORT_PARTS} from '@/src/components/common/atomic-modal/export-parts';\nimport {\n  SmartSnippetFeebackModalOptions,\n  SmartSnippetFeedbackModalBody,\n  SmartSnippetFeedbackModalDetails,\n  SmartSnippetFeedbackModalFooter,\n  SmartSnippetFeedbackModalHeader,\n  SmartSnippetFeedbackModalOption,\n  smartSnippetFeedbackOptions,\n} from '@/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/smart-snippet-feedback-modal-common';\nimport {updateBreakpoints} from '@/src/utils/replace-breakpoint-utils';\nimport {randomID} from '@/src/utils/utils';\nimport {\n  buildSmartSnippet,\n  SmartSnippet,\n  SmartSnippetFeedback,\n} from '@coveo/headless';\nimport {\n  Component,\n  State,\n  Prop,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n} from '@stencil/core';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-smart-snippet-feedback-modal` is automatically created as a child of the `atomic-search-interface` when the `atomic-smart-snippet` is initialized.\n *\n * When the modal is opened, the class `atomic-modal-opened` is added to the body, allowing further customization.\n *\n * @part backdrop - The transparent backdrop hiding the content behind the modal.\n * @part container - The modal's outermost container with the outline and background.\n * @part header-wrapper - The wrapper around the header.\n * @part header - The header of the modal, containing the title.\n * @part header-ruler - The horizontal ruler underneath the header.\n * @part body-wrapper - The wrapper around the body.\n * @part body - The body of the modal, between the header and the footer.\n * @part form - The wrapper around the reason and details.\n * @part reason-title - The title above the reason radio buttons.\n * @part reason - A wrapper around the radio button and the label of a reason.\n * @part reason-radio - A radio button representing a reason.\n * @part reason-label - A label linked to a radio button representing a reason.\n * @part details-title - The title above the details input.\n * @part details-input - The input to specify additional details.\n * @part footer-wrapper - The wrapper with a shadow around the footer.\n * @part footer - The footer at the bottom of the modal.\n * @part buttons - The wrapper around the cancel and submit buttons.\n * @part cancel-button - The cancel button.\n * @part submit-button - The submit button.\n */\n@Component({\n  tag: 'atomic-smart-snippet-feedback-modal',\n  styleUrl: 'atomic-smart-snippet-feedback-modal.pcss',\n  shadow: true,\n})\nexport class AtomicSmartSnippetFeedbackModal implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  @Element() public host!: HTMLElement;\n  public smartSnippet!: SmartSnippet;\n\n  @State() public error!: Error;\n\n  @Prop({mutable: true}) source?: HTMLElement;\n  @Prop({reflect: true, mutable: true}) isOpen = false;\n\n  @State() currentAnswer?: SmartSnippetFeedback | 'other' | undefined;\n  private detailsInputRef?: HTMLTextAreaElement;\n  private readonly formId = randomID(\n    'atomic-smart-snippet-feedback-modal-form-'\n  );\n\n  @Event() feedbackSent!: EventEmitter;\n\n  @Watch('isOpen')\n  watchToggleOpen(isOpen: boolean) {\n    if (isOpen) {\n      this.smartSnippet.openFeedbackModal();\n      this.currentAnswer = undefined;\n    }\n  }\n\n  initialize() {\n    this.smartSnippet = buildSmartSnippet(this.bindings.engine);\n  }\n\n  public render() {\n    updateBreakpoints(this.host);\n\n    return (\n      <atomic-modal\n        fullscreen={false}\n        source={this.source}\n        container={this.host}\n        isOpen={this.isOpen}\n        close={() => this.close()}\n        exportparts={ATOMIC_MODAL_EXPORT_PARTS}\n      >\n        <SmartSnippetFeedbackModalHeader i18n={this.bindings.i18n} />\n        <SmartSnippetFeedbackModalBody\n          formId={this.formId}\n          onSubmit={(e: Event) => this.sendFeedback(e)}\n        >\n          <SmartSnippetFeebackModalOptions i18n={this.bindings.i18n}>\n            {smartSnippetFeedbackOptions.map(\n              ({id, localeKey, correspondingAnswer}) => (\n                <SmartSnippetFeedbackModalOption\n                  correspondingAnswer={correspondingAnswer}\n                  currentAnswer={this.currentAnswer}\n                  i18n={this.bindings.i18n}\n                  id={id}\n                  localeKey={localeKey}\n                  onChange={() => {\n                    this.currentAnswer = correspondingAnswer;\n                  }}\n                />\n              )\n            )}\n          </SmartSnippetFeebackModalOptions>\n          <SmartSnippetFeedbackModalDetails\n            currentAnswer={this.currentAnswer}\n            i18n={this.bindings.i18n}\n            setDetailsInputRef={(ref) => (this.detailsInputRef = ref)}\n          />\n        </SmartSnippetFeedbackModalBody>\n        <SmartSnippetFeedbackModalFooter\n          formId={this.formId}\n          i18n={this.bindings.i18n}\n          onClick={() => this.close()}\n        />\n      </atomic-modal>\n    );\n  }\n\n  private close() {\n    this.isOpen = false;\n    this.smartSnippet.closeFeedbackModal();\n  }\n\n  private sendFeedback(e: Event) {\n    e.preventDefault();\n\n    if (this.currentAnswer === 'other') {\n      this.smartSnippet.sendDetailedFeedback(this.detailsInputRef!.value);\n    } else {\n      this.smartSnippet.sendFeedback(\n        this.currentAnswer as SmartSnippetFeedback\n      );\n    }\n    this.feedbackSent.emit();\n    this.isOpen = false;\n  }\n}\n"],"version":3}
+{"file":"atomic-smart-snippet-feedback-modal.entry.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,kCAAkC,GAAG,iykEAAiykE,CAAC;AAC70kE,8CAAe,kCAAkC;;;;;;;;;;;;MC8DpC,+BAA+B;;;;QAQJ,WAAM,GAAG,KAAK,CAAC;QAIpC,WAAM,GAAG,QAAQ,CAChC,2CAA2C,CAC5C,CAAC;;;sBAN6C,KAAK;;;IAWpD,eAAe,CAAC,MAAe;QAC7B,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,CAAC;YACtC,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;SAChC;KACF;IAED,UAAU;QACR,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;KAC7D;IAEM,MAAM;QACX,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7B,QACE,qEACE,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,EACzB,WAAW,EAAE,yBAAyB,IAEtC,EAAC,+BAA+B,qDAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAI,EAC7D,EAAC,6BAA6B,qDAC5B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,CAAC,CAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAE5C,EAAC,+BAA+B,qDAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,IACtD,2BAA2B,CAAC,GAAG,CAC9B,CAAC,EAAC,EAAE,EAAE,SAAS,EAAE,mBAAmB,EAAC,MACnC,EAAC,+BAA+B,IAC9B,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE;gBACR,IAAI,CAAC,aAAa,GAAG,mBAAmB,CAAC;aAC1C,GACD,CACH,CACF,CAC+B,EAClC,EAAC,gCAAgC,qDAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,kBAAkB,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC,GACzD,CAC4B,EAChC,EAAC,+BAA+B,qDAC9B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,GAC3B,CACW,EACf;KACH;IAEO,KAAK;QACX,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,CAAC;KACxC;IAEO,YAAY,CAAC,CAAQ;QAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE;YAClC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,IAAI,CAAC,eAAgB,CAAC,KAAK,CAAC,CAAC;SACrE;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,YAAY,CAC5B,IAAI,CAAC,aAAqC,CAC3C,CAAC;SACH;QACD,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;QACzB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;;;;;;AA9F4B;IAA5B,kBAAkB,EAAE;iEAA4B;;;;;","names":[],"sources":["src/components/search/smart-snippets/atomic-smart-snippet-feedback-modal/atomic-smart-snippet-feedback-modal.pcss?tag=atomic-smart-snippet-feedback-modal&encapsulation=shadow","src/components/search/smart-snippets/atomic-smart-snippet-feedback-modal/atomic-smart-snippet-feedback-modal.tsx"],"sourcesContent":["@import '../../../common/smart-snippets/atomic-smart-snippet-feedback-modal/atomic-smart-snippet-feedback-modal.pcss';\n","import {ATOMIC_MODAL_EXPORT_PARTS} from '@/src/components/common/atomic-modal/export-parts';\nimport {\n  SmartSnippetFeebackModalOptions,\n  SmartSnippetFeedbackModalBody,\n  SmartSnippetFeedbackModalDetails,\n  SmartSnippetFeedbackModalFooter,\n  SmartSnippetFeedbackModalHeader,\n  SmartSnippetFeedbackModalOption,\n  smartSnippetFeedbackOptions,\n} from '@/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/smart-snippet-feedback-modal-common';\nimport {updateBreakpoints} from '@/src/utils/replace-breakpoint-utils';\nimport {randomID} from '@/src/utils/utils';\nimport {\n  buildSmartSnippet,\n  SmartSnippet,\n  SmartSnippetFeedback,\n} from '@coveo/headless';\nimport {\n  Component,\n  State,\n  Prop,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n} from '@stencil/core';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-smart-snippet-feedback-modal` is automatically created as a child of the `atomic-search-interface` when the `atomic-smart-snippet` is initialized.\n *\n * When the modal is opened, the class `atomic-modal-opened` is added to the body, allowing further customization.\n *\n * @part backdrop - The transparent backdrop hiding the content behind the modal.\n * @part container - The modal's outermost container with the outline and background.\n * @part header-wrapper - The wrapper around the header.\n * @part header - The header of the modal, containing the title.\n * @part header-ruler - The horizontal ruler underneath the header.\n * @part body-wrapper - The wrapper around the body.\n * @part body - The body of the modal, between the header and the footer.\n * @part form - The wrapper around the reason and details.\n * @part reason-title - The title above the reason radio buttons.\n * @part reason - A wrapper around the radio button and the label of a reason.\n * @part reason-radio - A radio button representing a reason.\n * @part reason-label - A label linked to a radio button representing a reason.\n * @part details-title - The title above the details input.\n * @part details-input - The input to specify additional details.\n * @part footer-wrapper - The wrapper with a shadow around the footer.\n * @part footer - The footer at the bottom of the modal.\n * @part buttons - The wrapper around the cancel and submit buttons.\n * @part cancel-button - The cancel button.\n * @part submit-button - The submit button.\n */\n@Component({\n  tag: 'atomic-smart-snippet-feedback-modal',\n  styleUrl: 'atomic-smart-snippet-feedback-modal.pcss',\n  shadow: true,\n})\nexport class AtomicSmartSnippetFeedbackModal implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  @Element() public host!: HTMLElement;\n  public smartSnippet!: SmartSnippet;\n\n  @State() public error!: Error;\n\n  @Prop({mutable: true}) source?: HTMLElement;\n  @Prop({reflect: true, mutable: true}) isOpen = false;\n\n  @State() currentAnswer?: SmartSnippetFeedback | 'other' | undefined;\n  private detailsInputRef?: HTMLTextAreaElement;\n  private readonly formId = randomID(\n    'atomic-smart-snippet-feedback-modal-form-'\n  );\n\n  @Event() feedbackSent!: EventEmitter;\n\n  @Watch('isOpen')\n  watchToggleOpen(isOpen: boolean) {\n    if (isOpen) {\n      this.smartSnippet.openFeedbackModal();\n      this.currentAnswer = undefined;\n    }\n  }\n\n  initialize() {\n    this.smartSnippet = buildSmartSnippet(this.bindings.engine);\n  }\n\n  public render() {\n    updateBreakpoints(this.host);\n\n    return (\n      <atomic-modal\n        fullscreen={false}\n        source={this.source}\n        container={this.host}\n        isOpen={this.isOpen}\n        close={() => this.close()}\n        exportparts={ATOMIC_MODAL_EXPORT_PARTS}\n      >\n        <SmartSnippetFeedbackModalHeader i18n={this.bindings.i18n} />\n        <SmartSnippetFeedbackModalBody\n          formId={this.formId}\n          onSubmit={(e: Event) => this.sendFeedback(e)}\n        >\n          <SmartSnippetFeebackModalOptions i18n={this.bindings.i18n}>\n            {smartSnippetFeedbackOptions.map(\n              ({id, localeKey, correspondingAnswer}) => (\n                <SmartSnippetFeedbackModalOption\n                  correspondingAnswer={correspondingAnswer}\n                  currentAnswer={this.currentAnswer}\n                  i18n={this.bindings.i18n}\n                  id={id}\n                  localeKey={localeKey}\n                  onChange={() => {\n                    this.currentAnswer = correspondingAnswer;\n                  }}\n                />\n              )\n            )}\n          </SmartSnippetFeebackModalOptions>\n          <SmartSnippetFeedbackModalDetails\n            currentAnswer={this.currentAnswer}\n            i18n={this.bindings.i18n}\n            setDetailsInputRef={(ref) => (this.detailsInputRef = ref)}\n          />\n        </SmartSnippetFeedbackModalBody>\n        <SmartSnippetFeedbackModalFooter\n          formId={this.formId}\n          i18n={this.bindings.i18n}\n          onClick={() => this.close()}\n        />\n      </atomic-modal>\n    );\n  }\n\n  private close() {\n    this.isOpen = false;\n    this.smartSnippet.closeFeedbackModal();\n  }\n\n  private sendFeedback(e: Event) {\n    e.preventDefault();\n\n    if (this.currentAnswer === 'other') {\n      this.smartSnippet.sendDetailedFeedback(this.detailsInputRef!.value);\n    } else {\n      this.smartSnippet.sendFeedback(\n        this.currentAnswer as SmartSnippetFeedback\n      );\n    }\n    this.feedbackSent.emit();\n    this.isOpen = false;\n  }\n}\n"],"version":3}

package/dist/esm/atomic-smart-snippet-suggestions.entry.js

@@ -1,16 +1,15 @@
 import { r as registerInstance, h, g as getElement } from './index-3f35faca.js';
 import { g as getAttributesFromLinkSlot } from './attributes-slot-cb60f29b.js';
-import { S as SmartSnippetSuggestionsWrapper, a as SmartSnippetSuggestionsQuestion, g as getQuestionPart, b as SmartSnippetSuggestionsQuestionWrapper, c as SmartSnippetSuggestionsAnswerAndSourceWrapper, d as SmartSnippetSuggestionsFooter } from './smart-snippet-suggestions-common-10bd1697.js';
+import { S as SmartSnippetSuggestionsWrapper, a as SmartSnippetSuggestionsQuestion, g as getQuestionPart, b as SmartSnippetSuggestionsQuestionWrapper, c as SmartSnippetSuggestionsAnswerAndSourceWrapper, d as SmartSnippetSuggestionsFooter } from './smart-snippet-suggestions-common-9375b247.js';
 import { I as InitializeBindings, B as BindStateToController, H as Hidden } from './initialization-utils-ffbc4136.js';
 import { r as randomID } from './utils-6400ebde.js';
 import { buildSmartSnippetQuestionsList } from '@coveo/headless';
 import { A as ArrowDown } from './arrow-down-a7ee2ae6.js';
 import { A as ArrowRight } from './arrow-right-cb365b01.js';
 import './slot-utils-dcf4fc27.js';
-import './stencil-button-1a29a5df.js';
+import './stencil-button-49254c75.js';
 import './event-utils-8de63ec3.js';
-import './stencil-button-style-0bc80040.js';
-import './stencil-heading-2b28a9b9.js';
+import './stencil-heading-c701a05a.js';
 import './dom-utils-f6086cd3.js';
 import './init-queue-fbe942c3.js';
 import './initialization-lit-stencil-common-utils-804fe146.js';

package/dist/esm/atomic-smart-snippet-suggestions.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-smart-snippet-suggestions.entry.js","mappings":";;;;;;;;;;;;;;;;;;;AAAA,MAAM,gCAAgC,GAAG,ojoEAAojoE,CAAC;AAC9loE,4CAAe,gCAAgC;;;;;;;;;;;;MCoElC,6BAA6B;;;;;;QAYV,iBAAY,GAAG,CAAC,CAAC;;4BAAF,CAAC;;;IAkBvC,UAAU;QACf,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,mCAAmC,CAAC,CAAC;QACxD,IAAI,CAAC,yBAAyB,GAAG,8BAA8B,CAC7D,IAAI,CAAC,QAAQ,CAAC,MAAM,CACrB,CAAC;KACH;IAEM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,8BAA8B,CAAC,SAAS,CAAC,MAAM,EAAE;YACzD,OAAO,EAAC,MAAM,OAAU,CAAC;SAC1B;QAED,QACE,EAAC,8BAA8B,IAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,IAEvB,IAAI,CAAC,8BAA8B,CAAC,SAAS,CAAC,GAAG,CAChD,CAAC,eAAe,EAAE,CAAC,KAAK,IAAI,CAAC,qBAAqB,CAAC,eAAe,EAAE,CAAC,CAAC,CACvE,CAC8B,EACjC;KACH;IAEO,qBAAqB,CAC3B,eAA4C,EAC5C,KAAa;QAEb,QACE,EAAC,sCAAsC,IACrC,QAAQ,EAAE,eAAe,CAAC,QAAQ,EAClC,GAAG,EAAE,eAAe,CAAC,gBAAgB,IAErC,EAAC,+BAA+B,IAC9B,YAAY,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,KAAK,EAAE,EACnC,QAAQ,EAAE,eAAe,CAAC,QAAQ,EAClC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EACnD,QAAQ,EAAE,eAAe,CAAC,QAAQ,IAElC,mBACE,IAAI,EAAE,eAAe,CAAC,QAAQ,GAAG,SAAS,GAAG,UAAU,EACvD,IAAI,EAAE,eAAe,CAAC,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,EACvD,KAAK,EAAC,0BAA0B,GACnB,CACiB,EACjC,eAAe,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAC/B,EACzC;KACH;IAEO,YAAY,CAClB,eAA4C,EAC5C,KAAa;QAEb,QACE,EAAC,6CAA6C,IAC5C,QAAQ,EAAE,eAAe,CAAC,QAAQ,EAClC,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,KAAK,EAAE,IAEzB,mCACE,WAAW,EAAC,QAAQ,EACpB,WAAW,EAAE,eAAe,CAAC,MAAM,EACnC,UAAU,EAAE,IAAI,CAAC,KAAK,EACtB,kBAAkB,EAAE,CAAC,CAAC,KACpB,IAAI,CAAC,yBAAyB,CAAC,gBAAgB,CAC7C,eAAe,CAAC,gBAAgB,EAChC,CAAC,CAAC,MAAM,CACT,EAEH,8BAA8B,EAAE,CAAC,CAAC,KAChC,IAAI,CAAC,yBAAyB,CAAC,4BAA4B,CACzD,eAAe,CAAC,gBAAgB,EAChC,CAAC,CAAC,MAAM,CACT,EAEH,+BAA+B,EAAE,CAAC,CAAC,KACjC,IAAI,CAAC,yBAAyB,CAAC,6BAA6B,CAC1D,eAAe,CAAC,gBAAgB,EAChC,CAAC,CAAC,MAAM,CACT,GAE0B,EAC9B,eAAe,CAAC,MAAM;YACrB,IAAI,CAAC,YAAY,CACf,eAAe,CAAC,gBAAgB,EAChC,eAAe,CAAC,MAAM,CACvB,CAC2C,EAChD;KACH;IAEO,YAAY,CAAC,gBAAwB,EAAE,MAAc;QAC3D,QACE,EAAC,6BAA6B,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,IACrD,mCACE,gBAAgB,EAAE,yBAAyB,CACzC,IAAI,CAAC,IAAI,EACT,0BAA0B,CAC3B,EACD,0BAA0B,EAAE,MAC1B,IAAI,CAAC,yBAAyB,CAAC,wBAAwB,CACrD,gBAAgB,CACjB,EAEH,2BAA2B,EAAE,MAC3B,IAAI,CAAC,yBAAyB,CAAC,yBAAyB,CACtD,gBAAgB,CACjB,EAEH,cAAc,EAAE,MACd,IAAI,CAAC,yBAAyB,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAE/D,MAAM,EAAE,MAAM,GACe,CACD,EAChC;KACH;IAED,IAAY,KAAK;QACf,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI;aACvB,aAAa,CAAC,UAAU,CAAC;cACxB,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO,IAAI,CAAC,YAAY,CAAC;SAC1B;QACD,OAAO,QAAQ,CAAC,SAAS,CAAC;KAC3B;IAEO,cAAc,CAAC,eAA4C;QACjE,IAAI,eAAe,CAAC,QAAQ,EAAE;YAC5B,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;SAC3E;aAAM;YACL,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;SACzE;KACF;;;AApK4B;IAA5B,kBAAkB,EAAE;+DAA4B;AAI1C;IAFN,qBAAqB,CAAC,2BAA2B,CAAC;qFAEoB;;;;;","names":[],"sources":["src/components/search/smart-snippets/atomic-smart-snippet-suggestions/atomic-smart-snippet-suggestions.pcss?tag=atomic-smart-snippet-suggestions&encapsulation=shadow","src/components/search/smart-snippets/atomic-smart-snippet-suggestions/atomic-smart-snippet-suggestions.tsx"],"sourcesContent":["@import '../../../common/smart-snippets/atomic-smart-snippet-suggestions/atomic-smart-snippet-suggestions.pcss';\n","import {getAttributesFromLinkSlot} from '@/src/components/common/item-link/attributes-slot';\nimport {\n  getQuestionPart,\n  SmartSnippetSuggestionsAnswerAndSourceWrapper,\n  SmartSnippetSuggestionsFooter,\n  SmartSnippetSuggestionsQuestion,\n  SmartSnippetSuggestionsQuestionWrapper,\n  SmartSnippetSuggestionsWrapper,\n} from '@/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common';\nimport {Hidden} from '@/src/components/common/stencil-hidden';\nimport {randomID} from '@/src/utils/utils';\nimport {\n  buildSmartSnippetQuestionsList,\n  Result,\n  SmartSnippetQuestionsList,\n  SmartSnippetQuestionsListState,\n  SmartSnippetRelatedQuestion,\n} from '@coveo/headless';\nimport {Component, Prop, State, Element, h} from '@stencil/core';\nimport ArrowDown from '../../../../images/arrow-down.svg';\nimport ArrowRight from '../../../../images/arrow-right.svg';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n  BindStateToController,\n} from '../../../../utils/initialization-utils';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-smart-snippet-suggestions-suggestions` component displays an accordion of questions related to the query with their corresponding answers.\n *\n * You can style the snippets by inserting a template element like this:\n * ```html\n * <atomic-smart-snippet-suggestions>\n *   <template>\n *     <style>\n *       b {\n *         color: blue;\n *       }\n *     </style>\n *   </template>\n * </atomic-smart-snippet-suggestions>\n * ```\n *\n * @slot source-anchor-attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to anchor elements, overriding other attributes.\n * To be used exclusively in anchor elements, such as: `<a slot=\"source-anchor-attributes\" target=\"_blank\"></a>`.\n *\n * @part container - The wrapper with a border around the entire component.\n * @part heading - The heading above the list of related questions.\n * @part questions - The list of related questions.\n * @part question-answer-expanded - An expanded related question.\n * @part question-answer-collapsed - A collapsed related question.\n * @part question-button-expanded - The button to collapse a related question.\n * @part question-button-collapsed - The button to expand a related question.\n * @part question-icon-expanded - The caret of an expanded related question.\n * @part question-icon-collapsed - The caret of a collapsed related question.\n * @part question-text-expanded - The title of an expanded related question.\n * @part question-text-collapsed - The title of a collapsed related question.\n * @part answer-and-source - The wrapper around the answer and source of a related question.\n * @part answer - The container displaying the full document excerpt of a related question's answer.\n * @part footer - The wrapper around the source of a related question's answer.\n * @part source-url - The URL to the document a related question's answer is extracted from.\n * @part source-title - The title of the document a related question's answer is extracted from.\n */\n@Component({\n  tag: 'atomic-smart-snippet-suggestions',\n  styleUrl: 'atomic-smart-snippet-suggestions.pcss',\n  shadow: true,\n})\nexport class AtomicSmartSnippetSuggestions implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  public smartSnippetQuestionsList!: SmartSnippetQuestionsList;\n  @BindStateToController('smartSnippetQuestionsList')\n  @State()\n  public smartSnippetQuestionsListState!: SmartSnippetQuestionsListState;\n  public error!: Error;\n  @Element() public host!: HTMLElement;\n\n  /**\n   * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the \"People also ask\" heading over the snippets, from 1 to 5.\n   */\n  @Prop({reflect: true}) public headingLevel = 0;\n\n  /**\n   * Sets the style of the snippets.\n   *\n   * Example:\n   * ```ts\n   * smartSnippet.snippetStyle = `\n   *   b {\n   *     color: blue;\n   *   }\n   * `;\n   * ```\n   */\n  @Prop() snippetStyle?: string;\n\n  private id!: string;\n\n  public initialize() {\n    this.id = randomID('atomic-smart-snippet-suggestions-');\n    this.smartSnippetQuestionsList = buildSmartSnippetQuestionsList(\n      this.bindings.engine\n    );\n  }\n\n  public render() {\n    if (!this.smartSnippetQuestionsListState.questions.length) {\n      return <Hidden></Hidden>;\n    }\n\n    return (\n      <SmartSnippetSuggestionsWrapper\n        headingLevel={this.headingLevel}\n        i18n={this.bindings.i18n}\n      >\n        {this.smartSnippetQuestionsListState.questions.map(\n          (relatedQuestion, i) => this.renderRelatedQuestion(relatedQuestion, i)\n        )}\n      </SmartSnippetSuggestionsWrapper>\n    );\n  }\n\n  private renderRelatedQuestion(\n    relatedQuestion: SmartSnippetRelatedQuestion,\n    index: number\n  ) {\n    return (\n      <SmartSnippetSuggestionsQuestionWrapper\n        expanded={relatedQuestion.expanded}\n        key={relatedQuestion.questionAnswerId}\n      >\n        <SmartSnippetSuggestionsQuestion\n          ariaControls={`${this.id}-${index}`}\n          expanded={relatedQuestion.expanded}\n          headingLevel={this.headingLevel}\n          onClick={() => this.toggleQuestion(relatedQuestion)}\n          question={relatedQuestion.question}\n        >\n          <atomic-icon\n            icon={relatedQuestion.expanded ? ArrowDown : ArrowRight}\n            part={getQuestionPart('icon', relatedQuestion.expanded)}\n            class=\"mr-3 w-2.5 stroke-[1.25]\"\n          ></atomic-icon>\n        </SmartSnippetSuggestionsQuestion>\n        {relatedQuestion.expanded && this.renderAnswer(relatedQuestion, index)}\n      </SmartSnippetSuggestionsQuestionWrapper>\n    );\n  }\n\n  private renderAnswer(\n    relatedQuestion: SmartSnippetRelatedQuestion,\n    index: number\n  ) {\n    return (\n      <SmartSnippetSuggestionsAnswerAndSourceWrapper\n        expanded={relatedQuestion.expanded}\n        id={`${this.id}-${index}`}\n      >\n        <atomic-smart-snippet-answer\n          exportparts=\"answer\"\n          htmlContent={relatedQuestion.answer}\n          innerStyle={this.style}\n          onSelectInlineLink={(e) =>\n            this.smartSnippetQuestionsList.selectInlineLink(\n              relatedQuestion.questionAnswerId,\n              e.detail\n            )\n          }\n          onBeginDelayedSelectInlineLink={(e) =>\n            this.smartSnippetQuestionsList.beginDelayedSelectInlineLink(\n              relatedQuestion.questionAnswerId,\n              e.detail\n            )\n          }\n          onCancelPendingSelectInlineLink={(e) =>\n            this.smartSnippetQuestionsList.cancelPendingSelectInlineLink(\n              relatedQuestion.questionAnswerId,\n              e.detail\n            )\n          }\n        ></atomic-smart-snippet-answer>\n        {relatedQuestion.source &&\n          this.renderSource(\n            relatedQuestion.questionAnswerId,\n            relatedQuestion.source\n          )}\n      </SmartSnippetSuggestionsAnswerAndSourceWrapper>\n    );\n  }\n\n  private renderSource(questionAnswerId: string, source: Result) {\n    return (\n      <SmartSnippetSuggestionsFooter i18n={this.bindings.i18n}>\n        <atomic-smart-snippet-source\n          anchorAttributes={getAttributesFromLinkSlot(\n            this.host,\n            'source-anchor-attributes'\n          )}\n          onBeginDelayedSelectSource={() =>\n            this.smartSnippetQuestionsList.beginDelayedSelectSource(\n              questionAnswerId\n            )\n          }\n          onCancelPendingSelectSource={() =>\n            this.smartSnippetQuestionsList.cancelPendingSelectSource(\n              questionAnswerId\n            )\n          }\n          onSelectSource={() =>\n            this.smartSnippetQuestionsList.selectSource(questionAnswerId)\n          }\n          source={source}\n        ></atomic-smart-snippet-source>\n      </SmartSnippetSuggestionsFooter>\n    );\n  }\n\n  private get style() {\n    const styleTag = this.host\n      .querySelector('template')\n      ?.content.querySelector('style');\n    if (!styleTag) {\n      return this.snippetStyle;\n    }\n    return styleTag.innerHTML;\n  }\n\n  private toggleQuestion(relatedQuestion: SmartSnippetRelatedQuestion) {\n    if (relatedQuestion.expanded) {\n      this.smartSnippetQuestionsList.collapse(relatedQuestion.questionAnswerId);\n    } else {\n      this.smartSnippetQuestionsList.expand(relatedQuestion.questionAnswerId);\n    }\n  }\n}\n"],"version":3}
+{"file":"atomic-smart-snippet-suggestions.entry.js","mappings":"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","names":[],"sources":["src/components/search/smart-snippets/atomic-smart-snippet-suggestions/atomic-smart-snippet-suggestions.pcss?tag=atomic-smart-snippet-suggestions&encapsulation=shadow","src/components/search/smart-snippets/atomic-smart-snippet-suggestions/atomic-smart-snippet-suggestions.tsx"],"sourcesContent":["@import '../../../common/smart-snippets/atomic-smart-snippet-suggestions/atomic-smart-snippet-suggestions.pcss';\n","import {getAttributesFromLinkSlot} from '@/src/components/common/item-link/attributes-slot';\nimport {\n  getQuestionPart,\n  SmartSnippetSuggestionsAnswerAndSourceWrapper,\n  SmartSnippetSuggestionsFooter,\n  SmartSnippetSuggestionsQuestion,\n  SmartSnippetSuggestionsQuestionWrapper,\n  SmartSnippetSuggestionsWrapper,\n} from '@/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common';\nimport {Hidden} from '@/src/components/common/stencil-hidden';\nimport {randomID} from '@/src/utils/utils';\nimport {\n  buildSmartSnippetQuestionsList,\n  Result,\n  SmartSnippetQuestionsList,\n  SmartSnippetQuestionsListState,\n  SmartSnippetRelatedQuestion,\n} from '@coveo/headless';\nimport {Component, Prop, State, Element, h} from '@stencil/core';\nimport ArrowDown from '../../../../images/arrow-down.svg';\nimport ArrowRight from '../../../../images/arrow-right.svg';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n  BindStateToController,\n} from '../../../../utils/initialization-utils';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-smart-snippet-suggestions-suggestions` component displays an accordion of questions related to the query with their corresponding answers.\n *\n * You can style the snippets by inserting a template element like this:\n * ```html\n * <atomic-smart-snippet-suggestions>\n *   <template>\n *     <style>\n *       b {\n *         color: blue;\n *       }\n *     </style>\n *   </template>\n * </atomic-smart-snippet-suggestions>\n * ```\n *\n * @slot source-anchor-attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to anchor elements, overriding other attributes.\n * To be used exclusively in anchor elements, such as: `<a slot=\"source-anchor-attributes\" target=\"_blank\"></a>`.\n *\n * @part container - The wrapper with a border around the entire component.\n * @part heading - The heading above the list of related questions.\n * @part questions - The list of related questions.\n * @part question-answer-expanded - An expanded related question.\n * @part question-answer-collapsed - A collapsed related question.\n * @part question-button-expanded - The button to collapse a related question.\n * @part question-button-collapsed - The button to expand a related question.\n * @part question-icon-expanded - The caret of an expanded related question.\n * @part question-icon-collapsed - The caret of a collapsed related question.\n * @part question-text-expanded - The title of an expanded related question.\n * @part question-text-collapsed - The title of a collapsed related question.\n * @part answer-and-source - The wrapper around the answer and source of a related question.\n * @part answer - The container displaying the full document excerpt of a related question's answer.\n * @part footer - The wrapper around the source of a related question's answer.\n * @part source-url - The URL to the document a related question's answer is extracted from.\n * @part source-title - The title of the document a related question's answer is extracted from.\n */\n@Component({\n  tag: 'atomic-smart-snippet-suggestions',\n  styleUrl: 'atomic-smart-snippet-suggestions.pcss',\n  shadow: true,\n})\nexport class AtomicSmartSnippetSuggestions implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  public smartSnippetQuestionsList!: SmartSnippetQuestionsList;\n  @BindStateToController('smartSnippetQuestionsList')\n  @State()\n  public smartSnippetQuestionsListState!: SmartSnippetQuestionsListState;\n  public error!: Error;\n  @Element() public host!: HTMLElement;\n\n  /**\n   * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the \"People also ask\" heading over the snippets, from 1 to 5.\n   */\n  @Prop({reflect: true}) public headingLevel = 0;\n\n  /**\n   * Sets the style of the snippets.\n   *\n   * Example:\n   * ```ts\n   * smartSnippet.snippetStyle = `\n   *   b {\n   *     color: blue;\n   *   }\n   * `;\n   * ```\n   */\n  @Prop() snippetStyle?: string;\n\n  private id!: string;\n\n  public initialize() {\n    this.id = randomID('atomic-smart-snippet-suggestions-');\n    this.smartSnippetQuestionsList = buildSmartSnippetQuestionsList(\n      this.bindings.engine\n    );\n  }\n\n  public render() {\n    if (!this.smartSnippetQuestionsListState.questions.length) {\n      return <Hidden></Hidden>;\n    }\n\n    return (\n      <SmartSnippetSuggestionsWrapper\n        headingLevel={this.headingLevel}\n        i18n={this.bindings.i18n}\n      >\n        {this.smartSnippetQuestionsListState.questions.map(\n          (relatedQuestion, i) => this.renderRelatedQuestion(relatedQuestion, i)\n        )}\n      </SmartSnippetSuggestionsWrapper>\n    );\n  }\n\n  private renderRelatedQuestion(\n    relatedQuestion: SmartSnippetRelatedQuestion,\n    index: number\n  ) {\n    return (\n      <SmartSnippetSuggestionsQuestionWrapper\n        expanded={relatedQuestion.expanded}\n        key={relatedQuestion.questionAnswerId}\n      >\n        <SmartSnippetSuggestionsQuestion\n          ariaControls={`${this.id}-${index}`}\n          expanded={relatedQuestion.expanded}\n          headingLevel={this.headingLevel}\n          onClick={() => this.toggleQuestion(relatedQuestion)}\n          question={relatedQuestion.question}\n        >\n          <atomic-icon\n            icon={relatedQuestion.expanded ? ArrowDown : ArrowRight}\n            part={getQuestionPart('icon', relatedQuestion.expanded)}\n            class=\"mr-3 w-2.5 stroke-[1.25]\"\n          ></atomic-icon>\n        </SmartSnippetSuggestionsQuestion>\n        {relatedQuestion.expanded && this.renderAnswer(relatedQuestion, index)}\n      </SmartSnippetSuggestionsQuestionWrapper>\n    );\n  }\n\n  private renderAnswer(\n    relatedQuestion: SmartSnippetRelatedQuestion,\n    index: number\n  ) {\n    return (\n      <SmartSnippetSuggestionsAnswerAndSourceWrapper\n        expanded={relatedQuestion.expanded}\n        id={`${this.id}-${index}`}\n      >\n        <atomic-smart-snippet-answer\n          exportparts=\"answer\"\n          htmlContent={relatedQuestion.answer}\n          innerStyle={this.style}\n          onSelectInlineLink={(e) =>\n            this.smartSnippetQuestionsList.selectInlineLink(\n              relatedQuestion.questionAnswerId,\n              e.detail\n            )\n          }\n          onBeginDelayedSelectInlineLink={(e) =>\n            this.smartSnippetQuestionsList.beginDelayedSelectInlineLink(\n              relatedQuestion.questionAnswerId,\n              e.detail\n            )\n          }\n          onCancelPendingSelectInlineLink={(e) =>\n            this.smartSnippetQuestionsList.cancelPendingSelectInlineLink(\n              relatedQuestion.questionAnswerId,\n              e.detail\n            )\n          }\n        ></atomic-smart-snippet-answer>\n        {relatedQuestion.source &&\n          this.renderSource(\n            relatedQuestion.questionAnswerId,\n            relatedQuestion.source\n          )}\n      </SmartSnippetSuggestionsAnswerAndSourceWrapper>\n    );\n  }\n\n  private renderSource(questionAnswerId: string, source: Result) {\n    return (\n      <SmartSnippetSuggestionsFooter i18n={this.bindings.i18n}>\n        <atomic-smart-snippet-source\n          anchorAttributes={getAttributesFromLinkSlot(\n            this.host,\n            'source-anchor-attributes'\n          )}\n          onBeginDelayedSelectSource={() =>\n            this.smartSnippetQuestionsList.beginDelayedSelectSource(\n              questionAnswerId\n            )\n          }\n          onCancelPendingSelectSource={() =>\n            this.smartSnippetQuestionsList.cancelPendingSelectSource(\n              questionAnswerId\n            )\n          }\n          onSelectSource={() =>\n            this.smartSnippetQuestionsList.selectSource(questionAnswerId)\n          }\n          source={source}\n        ></atomic-smart-snippet-source>\n      </SmartSnippetSuggestionsFooter>\n    );\n  }\n\n  private get style() {\n    const styleTag = this.host\n      .querySelector('template')\n      ?.content.querySelector('style');\n    if (!styleTag) {\n      return this.snippetStyle;\n    }\n    return styleTag.innerHTML;\n  }\n\n  private toggleQuestion(relatedQuestion: SmartSnippetRelatedQuestion) {\n    if (relatedQuestion.expanded) {\n      this.smartSnippetQuestionsList.collapse(relatedQuestion.questionAnswerId);\n    } else {\n      this.smartSnippetQuestionsList.expand(relatedQuestion.questionAnswerId);\n    }\n  }\n}\n"],"version":3}

package/dist/esm/atomic-smart-snippet.entry.js

@@ -1,16 +1,15 @@
 import { r as registerInstance, h, g as getElement } from './index-3f35faca.js';
-import { S as SmartSnippetQuestion, d as SmartSnippetTruncatedAnswer, a as SmartSnippetFooter, b as SmartSnippetFeedbackBanner, c as SmartSnippetWrapper } from './smart-snippet-common-5ed4bdfa.js';
+import { S as SmartSnippetQuestion, d as SmartSnippetTruncatedAnswer, a as SmartSnippetFooter, b as SmartSnippetFeedbackBanner, c as SmartSnippetWrapper } from './smart-snippet-common-bf32e4ba.js';
 import { r as randomID } from './utils-6400ebde.js';
 import { buildSmartSnippet, buildTabManager } from '@coveo/headless';
 import { I as InitializeBindings, B as BindStateToController, H as Hidden } from './initialization-utils-ffbc4136.js';
 import { A as ArrayProp } from './props-utils-6040b5d2.js';
 import { s as shouldDisplayOnCurrentTab } from './tab-utils-35886d3e.js';
 import { g as getAttributesFromLinkSlot } from './attributes-slot-cb60f29b.js';
-import './stencil-button-1a29a5df.js';
+import './stencil-button-49254c75.js';
 import './event-utils-8de63ec3.js';
-import './stencil-button-style-0bc80040.js';
-import './stencil-radio-button-cae5f40a.js';
-import './stencil-heading-2b28a9b9.js';
+import './stencil-radio-button-8d40e86f.js';
+import './stencil-heading-c701a05a.js';
 import './purify-c7ebd240.js';
 import './_commonjsHelpers-1789f0cf.js';
 import './dom-utils-f6086cd3.js';

package/dist/esm/atomic-smart-snippet.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-smart-snippet.entry.js","mappings":"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","names":[],"sources":["src/components/search/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.pcss?tag=atomic-smart-snippet&encapsulation=shadow","src/components/search/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.tsx"],"sourcesContent":["@import '../../../common/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.pcss';\n","import {SmartSnippetFeedbackBanner} from '@/src/components/common/smart-snippets/atomic-smart-snippet-feedback-banner';\nimport {\n  SmartSnippetTruncatedAnswer,\n  SmartSnippetWrapper,\n  SmartSnippetFooter,\n  SmartSnippetQuestion,\n} from '@/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common';\nimport {randomID} from '@/src/utils/utils';\nimport {\n  buildSmartSnippet,\n  buildTabManager,\n  InlineLink,\n  SmartSnippet,\n  SmartSnippetState,\n  TabManager,\n  TabManagerState,\n} from '@coveo/headless';\nimport {Component, Prop, State, Element, Listen, h} from '@stencil/core';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n  BindStateToController,\n} from '../../../../utils/initialization-utils';\nimport {ArrayProp} from '../../../../utils/props-utils';\nimport {shouldDisplayOnCurrentTab} from '../../../../utils/tab-utils';\nimport {getAttributesFromLinkSlot} from '../../../common/item-link/attributes-slot';\nimport {Hidden} from '../../../common/stencil-hidden';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-smart-snippet` component displays the excerpt of a document that would be most likely to answer a particular query.\n *\n * You can style the snippet by inserting a template element as follows:\n * ```html\n * <atomic-smart-snippet>\n *   <template>\n *     <style>\n *       b {\n *         color: blue;\n *       }\n *     </style>\n *   </template>\n * </atomic-smart-snippet>\n * ```\n *\n * @slot source-anchor-attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to anchor elements, overriding other attributes.\n * To be used exclusively in anchor elements, such as: `<a slot=\"source-anchor-attributes\" target=\"_blank\"></a>`.\n *\n * @part smart-snippet - The wrapper of the entire smart snippet.\n * @part question - The header displaying the question that is answered by the found document excerpt.\n * @part answer - The container displaying the full document excerpt.\n * @part truncated-answer - The container displaying only part of the answer.\n * @part show-more-button - The show more button.\n * @part show-less-button - The show less button.\n * @part body - The body of the smart snippet, containing the truncated answer and the show more or show less button.\n * @part footer - The footer underneath the answer.\n * @part source-url - The URL to the document the excerpt is from.\n * @part source-title - The title of the document the excerpt is from.\n * @part feedback-banner - The feedback banner underneath the source.\n * @part feedback-inquiry-and-buttons - A wrapper around the feedback inquiry and the feedback buttons.\n * @part feedback-inquiry - The message asking the end user to provide feedback on whether the excerpt was useful.\n * @part feedback-buttons - The wrapper around the buttons after the inquiry.\n * @part feedback-like-button - The button allowing the end user to signal that the excerpt was useful.\n * @part feedback-dislike-button - The button allowing the end user to signal that the excerpt wasn't useful.\n * @part feedback-thank-you-container - The wrapper around the 'thank you' message and feedback button.\n * @part feedback-thank-you - The message thanking the end user for providing feedback.\n * @part feedback-explain-why-button - The button a user can press to provide detailed feedback.\n */\n@Component({\n  tag: 'atomic-smart-snippet',\n  styleUrl: 'atomic-smart-snippet.pcss',\n  shadow: true,\n})\nexport class AtomicSmartSnippet implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  public smartSnippet!: SmartSnippet;\n  @BindStateToController('smartSnippet')\n  @State()\n  public smartSnippetState!: SmartSnippetState;\n  public tabManager!: TabManager;\n  @BindStateToController('tabManager')\n  @State()\n  public tabManagerState!: TabManagerState;\n  public error!: Error;\n\n  @Element() private host!: HTMLElement;\n  private id!: string;\n\n  connectedCallback(): void {\n    this.id ||= randomID();\n  }\n\n  private modalRef?: HTMLAtomicSmartSnippetFeedbackModalElement;\n\n  /**\n   * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the question at the top of the snippet, from 1 to 5.\n   */\n  @Prop({reflect: true}) public headingLevel = 0;\n\n  /**\n   * The maximum height (in pixels) a snippet can have before the component truncates it and displays a \"show more\" button.\n   */\n  @Prop({reflect: true}) maximumHeight = 250;\n  /**\n   * When the answer is partly hidden, how much of its height (in pixels) should be visible.\n   */\n  @Prop({reflect: true}) collapsedHeight = 180;\n\n  /**\n   * Sets the style of the snippet.\n   *\n   * Example:\n   * ```ts\n   * smartSnippet.snippetStyle = `\n   *   b {\n   *     color: blue;\n   *   }\n   * `;\n   * ```\n   */\n  @Prop({reflect: true}) snippetStyle?: string;\n\n  /**\n   * The tabs on which the smart snippet can be displayed. This property should not be used at the same time as `tabs-excluded`.\n   *\n   * Set this property as a stringified JSON array, e.g.,\n   * ```html\n   *  <atomic-smart-snippet tabs-included='[\"tabIDA\", \"tabIDB\"]'></atomic-smart-snippet snippet>\n   * ```\n   * If you don't set this property, the smart snippet can be displayed on any tab. Otherwise, the smart snippet can only be displayed on the specified tabs.\n   */\n  @ArrayProp()\n  @Prop({reflect: true, mutable: true})\n  public tabsIncluded: string[] | string = '[]';\n\n  /**\n   * The tabs on which this smart snippet must not be displayed. This property should not be used at the same time as `tabs-included`.\n   *\n   * Set this property as a stringified JSON array, e.g.,\n   * ```html\n   *  <atomic-smart-snippet tabs-excluded='[\"tabIDA\", \"tabIDB\"]'></atomic-smart-snippet>\n   * ```\n   * If you don't set this property, the smart snippet can be displayed on any tab. Otherwise, the smart snippet won't be displayed on any of the specified tabs.\n   */\n  @ArrayProp()\n  @Prop({reflect: true, mutable: true})\n  public tabsExcluded: string[] | string = '[]';\n\n  @State() feedbackSent = false;\n\n  @Prop({reflect: true}) public snippetMaximumHeight?: number;\n\n  @Prop({reflect: true}) public snippetCollapsedHeight?: number;\n\n  @Listen('selectInlineLink')\n  onSelectInlineLink(event: CustomEvent<InlineLink>) {\n    this.smartSnippet.selectInlineLink(event.detail);\n  }\n\n  @Listen('beginDelayedSelectInlineLink')\n  onBeginDelayedSelectInlineLink(event: CustomEvent<InlineLink>) {\n    this.smartSnippet.beginDelayedSelectInlineLink(event.detail);\n  }\n\n  @Listen('cancelPendingSelectInlineLink')\n  onCancelPendingSelectInlineLink(event: CustomEvent<InlineLink>) {\n    this.smartSnippet.cancelPendingSelectInlineLink(event.detail);\n  }\n\n  public initialize() {\n    this.smartSnippet = buildSmartSnippet(this.bindings.engine);\n    this.tabManager = buildTabManager(this.bindings.engine);\n  }\n\n  public componentWillUpdate() {\n    if (!(this.smartSnippetState.liked || this.smartSnippetState.disliked)) {\n      this.setFeedbackSent(false);\n    }\n  }\n\n  public render() {\n    if (\n      !shouldDisplayOnCurrentTab(\n        [...this.tabsIncluded],\n        [...this.tabsExcluded],\n        this.tabManagerState?.activeTab\n      )\n    ) {\n      return <Hidden></Hidden>;\n    }\n\n    if (!this.smartSnippetState.answerFound) {\n      return <Hidden></Hidden>;\n    }\n\n    const source = this.smartSnippetState.source;\n\n    return (\n      <SmartSnippetWrapper\n        headingLevel={this.headingLevel}\n        i18n={this.bindings.i18n}\n      >\n        <atomic-smart-snippet-collapse-wrapper\n          collapsedHeight={this.snippetCollapsedHeight}\n          maximumHeight={this.snippetMaximumHeight}\n        >\n          <SmartSnippetQuestion\n            headingLevel={this.headingLevel}\n            question={this.smartSnippetState.question}\n          />\n          {this.snippetMaximumHeight !== undefined ? (\n            <SmartSnippetTruncatedAnswer\n              answer={this.smartSnippetState.answer}\n              style={this.style}\n            />\n          ) : (\n            <atomic-smart-snippet-expandable-answer\n              collapsedHeight={this.collapsedHeight}\n              expanded={this.smartSnippetState.expanded}\n              exportparts=\"answer,show-more-button,show-less-button,truncated-answer\"\n              htmlContent={this.smartSnippetState.answer}\n              maximumHeight={this.maximumHeight}\n              onCollapse={() => this.smartSnippet.collapse()}\n              onExpand={() => this.smartSnippet.expand()}\n              part=\"body\"\n              snippetStyle={this.style}\n            ></atomic-smart-snippet-expandable-answer>\n          )}\n          <SmartSnippetFooter i18n={this.bindings.i18n}>\n            {source && (\n              <atomic-smart-snippet-source\n                anchorAttributes={getAttributesFromLinkSlot(\n                  this.host,\n                  'source-anchor-attributes'\n                )}\n                onBeginDelayedSelectSource={\n                  this.smartSnippet.beginDelayedSelectSource\n                }\n                onCancelPendingSelectSource={\n                  this.smartSnippet.cancelPendingSelectSource\n                }\n                onSelectSource={this.smartSnippet.selectSource}\n                source={source}\n              ></atomic-smart-snippet-source>\n            )}\n            <SmartSnippetFeedbackBanner\n              disliked={this.smartSnippetState.disliked}\n              explainWhyRef={(button) => {\n                if (this.modalRef) {\n                  this.modalRef.source = button;\n                }\n              }}\n              feedbackSent={this.feedbackSent}\n              id={this.id}\n              i18n={this.bindings.i18n}\n              liked={this.smartSnippetState.liked}\n              onDislike={() => {\n                this.loadModal();\n                this.smartSnippet.dislike();\n              }}\n              onLike={() => this.smartSnippet.like()}\n              onPressExplainWhy={() => (this.modalRef!.isOpen = true)}\n            ></SmartSnippetFeedbackBanner>\n          </SmartSnippetFooter>\n        </atomic-smart-snippet-collapse-wrapper>\n      </SmartSnippetWrapper>\n    );\n  }\n\n  private setModalRef(ref: HTMLElement) {\n    this.modalRef = ref as HTMLAtomicSmartSnippetFeedbackModalElement;\n  }\n\n  private setFeedbackSent(isSent: boolean) {\n    this.feedbackSent = isSent;\n  }\n\n  private get style() {\n    const styleTag = this.host\n      .querySelector('template')\n      ?.content.querySelector('style');\n    if (!styleTag) {\n      return this.snippetStyle;\n    }\n    return styleTag.innerHTML;\n  }\n\n  private loadModal() {\n    if (this.modalRef) {\n      return;\n    }\n    const modalRef = document.createElement(\n      'atomic-smart-snippet-feedback-modal'\n    );\n    modalRef.addEventListener('feedbackSent', () => {\n      this.setFeedbackSent(true);\n    });\n    this.setModalRef(modalRef);\n    this.host.insertAdjacentElement('beforebegin', modalRef);\n  }\n}\n"],"version":3}
+{"file":"atomic-smart-snippet.entry.js","mappings":"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","names":[],"sources":["src/components/search/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.pcss?tag=atomic-smart-snippet&encapsulation=shadow","src/components/search/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.tsx"],"sourcesContent":["@import '../../../common/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.pcss';\n","import {SmartSnippetFeedbackBanner} from '@/src/components/common/smart-snippets/atomic-smart-snippet-feedback-banner';\nimport {\n  SmartSnippetTruncatedAnswer,\n  SmartSnippetWrapper,\n  SmartSnippetFooter,\n  SmartSnippetQuestion,\n} from '@/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common';\nimport {randomID} from '@/src/utils/utils';\nimport {\n  buildSmartSnippet,\n  buildTabManager,\n  InlineLink,\n  SmartSnippet,\n  SmartSnippetState,\n  TabManager,\n  TabManagerState,\n} from '@coveo/headless';\nimport {Component, Prop, State, Element, Listen, h} from '@stencil/core';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n  BindStateToController,\n} from '../../../../utils/initialization-utils';\nimport {ArrayProp} from '../../../../utils/props-utils';\nimport {shouldDisplayOnCurrentTab} from '../../../../utils/tab-utils';\nimport {getAttributesFromLinkSlot} from '../../../common/item-link/attributes-slot';\nimport {Hidden} from '../../../common/stencil-hidden';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-smart-snippet` component displays the excerpt of a document that would be most likely to answer a particular query.\n *\n * You can style the snippet by inserting a template element as follows:\n * ```html\n * <atomic-smart-snippet>\n *   <template>\n *     <style>\n *       b {\n *         color: blue;\n *       }\n *     </style>\n *   </template>\n * </atomic-smart-snippet>\n * ```\n *\n * @slot source-anchor-attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to anchor elements, overriding other attributes.\n * To be used exclusively in anchor elements, such as: `<a slot=\"source-anchor-attributes\" target=\"_blank\"></a>`.\n *\n * @part smart-snippet - The wrapper of the entire smart snippet.\n * @part question - The header displaying the question that is answered by the found document excerpt.\n * @part answer - The container displaying the full document excerpt.\n * @part truncated-answer - The container displaying only part of the answer.\n * @part show-more-button - The show more button.\n * @part show-less-button - The show less button.\n * @part body - The body of the smart snippet, containing the truncated answer and the show more or show less button.\n * @part footer - The footer underneath the answer.\n * @part source-url - The URL to the document the excerpt is from.\n * @part source-title - The title of the document the excerpt is from.\n * @part feedback-banner - The feedback banner underneath the source.\n * @part feedback-inquiry-and-buttons - A wrapper around the feedback inquiry and the feedback buttons.\n * @part feedback-inquiry - The message asking the end user to provide feedback on whether the excerpt was useful.\n * @part feedback-buttons - The wrapper around the buttons after the inquiry.\n * @part feedback-like-button - The button allowing the end user to signal that the excerpt was useful.\n * @part feedback-dislike-button - The button allowing the end user to signal that the excerpt wasn't useful.\n * @part feedback-thank-you-container - The wrapper around the 'thank you' message and feedback button.\n * @part feedback-thank-you - The message thanking the end user for providing feedback.\n * @part feedback-explain-why-button - The button a user can press to provide detailed feedback.\n */\n@Component({\n  tag: 'atomic-smart-snippet',\n  styleUrl: 'atomic-smart-snippet.pcss',\n  shadow: true,\n})\nexport class AtomicSmartSnippet implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  public smartSnippet!: SmartSnippet;\n  @BindStateToController('smartSnippet')\n  @State()\n  public smartSnippetState!: SmartSnippetState;\n  public tabManager!: TabManager;\n  @BindStateToController('tabManager')\n  @State()\n  public tabManagerState!: TabManagerState;\n  public error!: Error;\n\n  @Element() private host!: HTMLElement;\n  private id!: string;\n\n  connectedCallback(): void {\n    this.id ||= randomID();\n  }\n\n  private modalRef?: HTMLAtomicSmartSnippetFeedbackModalElement;\n\n  /**\n   * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the question at the top of the snippet, from 1 to 5.\n   */\n  @Prop({reflect: true}) public headingLevel = 0;\n\n  /**\n   * The maximum height (in pixels) a snippet can have before the component truncates it and displays a \"show more\" button.\n   */\n  @Prop({reflect: true}) maximumHeight = 250;\n  /**\n   * When the answer is partly hidden, how much of its height (in pixels) should be visible.\n   */\n  @Prop({reflect: true}) collapsedHeight = 180;\n\n  /**\n   * Sets the style of the snippet.\n   *\n   * Example:\n   * ```ts\n   * smartSnippet.snippetStyle = `\n   *   b {\n   *     color: blue;\n   *   }\n   * `;\n   * ```\n   */\n  @Prop({reflect: true}) snippetStyle?: string;\n\n  /**\n   * The tabs on which the smart snippet can be displayed. This property should not be used at the same time as `tabs-excluded`.\n   *\n   * Set this property as a stringified JSON array, e.g.,\n   * ```html\n   *  <atomic-smart-snippet tabs-included='[\"tabIDA\", \"tabIDB\"]'></atomic-smart-snippet snippet>\n   * ```\n   * If you don't set this property, the smart snippet can be displayed on any tab. Otherwise, the smart snippet can only be displayed on the specified tabs.\n   */\n  @ArrayProp()\n  @Prop({reflect: true, mutable: true})\n  public tabsIncluded: string[] | string = '[]';\n\n  /**\n   * The tabs on which this smart snippet must not be displayed. This property should not be used at the same time as `tabs-included`.\n   *\n   * Set this property as a stringified JSON array, e.g.,\n   * ```html\n   *  <atomic-smart-snippet tabs-excluded='[\"tabIDA\", \"tabIDB\"]'></atomic-smart-snippet>\n   * ```\n   * If you don't set this property, the smart snippet can be displayed on any tab. Otherwise, the smart snippet won't be displayed on any of the specified tabs.\n   */\n  @ArrayProp()\n  @Prop({reflect: true, mutable: true})\n  public tabsExcluded: string[] | string = '[]';\n\n  @State() feedbackSent = false;\n\n  @Prop({reflect: true}) public snippetMaximumHeight?: number;\n\n  @Prop({reflect: true}) public snippetCollapsedHeight?: number;\n\n  @Listen('selectInlineLink')\n  onSelectInlineLink(event: CustomEvent<InlineLink>) {\n    this.smartSnippet.selectInlineLink(event.detail);\n  }\n\n  @Listen('beginDelayedSelectInlineLink')\n  onBeginDelayedSelectInlineLink(event: CustomEvent<InlineLink>) {\n    this.smartSnippet.beginDelayedSelectInlineLink(event.detail);\n  }\n\n  @Listen('cancelPendingSelectInlineLink')\n  onCancelPendingSelectInlineLink(event: CustomEvent<InlineLink>) {\n    this.smartSnippet.cancelPendingSelectInlineLink(event.detail);\n  }\n\n  public initialize() {\n    this.smartSnippet = buildSmartSnippet(this.bindings.engine);\n    this.tabManager = buildTabManager(this.bindings.engine);\n  }\n\n  public componentWillUpdate() {\n    if (!(this.smartSnippetState.liked || this.smartSnippetState.disliked)) {\n      this.setFeedbackSent(false);\n    }\n  }\n\n  public render() {\n    if (\n      !shouldDisplayOnCurrentTab(\n        [...this.tabsIncluded],\n        [...this.tabsExcluded],\n        this.tabManagerState?.activeTab\n      )\n    ) {\n      return <Hidden></Hidden>;\n    }\n\n    if (!this.smartSnippetState.answerFound) {\n      return <Hidden></Hidden>;\n    }\n\n    const source = this.smartSnippetState.source;\n\n    return (\n      <SmartSnippetWrapper\n        headingLevel={this.headingLevel}\n        i18n={this.bindings.i18n}\n      >\n        <atomic-smart-snippet-collapse-wrapper\n          collapsedHeight={this.snippetCollapsedHeight}\n          maximumHeight={this.snippetMaximumHeight}\n        >\n          <SmartSnippetQuestion\n            headingLevel={this.headingLevel}\n            question={this.smartSnippetState.question}\n          />\n          {this.snippetMaximumHeight !== undefined ? (\n            <SmartSnippetTruncatedAnswer\n              answer={this.smartSnippetState.answer}\n              style={this.style}\n            />\n          ) : (\n            <atomic-smart-snippet-expandable-answer\n              collapsedHeight={this.collapsedHeight}\n              expanded={this.smartSnippetState.expanded}\n              exportparts=\"answer,show-more-button,show-less-button,truncated-answer\"\n              htmlContent={this.smartSnippetState.answer}\n              maximumHeight={this.maximumHeight}\n              onCollapse={() => this.smartSnippet.collapse()}\n              onExpand={() => this.smartSnippet.expand()}\n              part=\"body\"\n              snippetStyle={this.style}\n            ></atomic-smart-snippet-expandable-answer>\n          )}\n          <SmartSnippetFooter i18n={this.bindings.i18n}>\n            {source && (\n              <atomic-smart-snippet-source\n                anchorAttributes={getAttributesFromLinkSlot(\n                  this.host,\n                  'source-anchor-attributes'\n                )}\n                onBeginDelayedSelectSource={\n                  this.smartSnippet.beginDelayedSelectSource\n                }\n                onCancelPendingSelectSource={\n                  this.smartSnippet.cancelPendingSelectSource\n                }\n                onSelectSource={this.smartSnippet.selectSource}\n                source={source}\n              ></atomic-smart-snippet-source>\n            )}\n            <SmartSnippetFeedbackBanner\n              disliked={this.smartSnippetState.disliked}\n              explainWhyRef={(button) => {\n                if (this.modalRef) {\n                  this.modalRef.source = button;\n                }\n              }}\n              feedbackSent={this.feedbackSent}\n              id={this.id}\n              i18n={this.bindings.i18n}\n              liked={this.smartSnippetState.liked}\n              onDislike={() => {\n                this.loadModal();\n                this.smartSnippet.dislike();\n              }}\n              onLike={() => this.smartSnippet.like()}\n              onPressExplainWhy={() => (this.modalRef!.isOpen = true)}\n            ></SmartSnippetFeedbackBanner>\n          </SmartSnippetFooter>\n        </atomic-smart-snippet-collapse-wrapper>\n      </SmartSnippetWrapper>\n    );\n  }\n\n  private setModalRef(ref: HTMLElement) {\n    this.modalRef = ref as HTMLAtomicSmartSnippetFeedbackModalElement;\n  }\n\n  private setFeedbackSent(isSent: boolean) {\n    this.feedbackSent = isSent;\n  }\n\n  private get style() {\n    const styleTag = this.host\n      .querySelector('template')\n      ?.content.querySelector('style');\n    if (!styleTag) {\n      return this.snippetStyle;\n    }\n    return styleTag.innerHTML;\n  }\n\n  private loadModal() {\n    if (this.modalRef) {\n      return;\n    }\n    const modalRef = document.createElement(\n      'atomic-smart-snippet-feedback-modal'\n    );\n    modalRef.addEventListener('feedbackSent', () => {\n      this.setFeedbackSent(true);\n    });\n    this.setModalRef(modalRef);\n    this.host.insertAdjacentElement('beforebegin', modalRef);\n  }\n}\n"],"version":3}

package/dist/esm/atomic-sort-dropdown.entry.js

@@ -12,10 +12,16 @@ import './initialization-lit-stencil-common-utils-804fe146.js';
 import './purify-c7ebd240.js';
 import './_commonjsHelpers-1789f0cf.js';
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const SortContainer = (_, children) => {
     return (h("div", { class: "text-on-background flex flex-wrap items-center" }, children));
 };
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const SortGuard = ({ hasError, firstSearchExecuted, hasResults }, children) => {
     if (hasError) {
         return;
@@ -29,16 +35,25 @@ const SortGuard = ({ hasError, firstSearchExecuted, hasResults }, children) => {
     return h(Fragment, null, children);
 };
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const SortLabel = ({ id, i18n }) => {
     return (h("label", { class: "m-2 cursor-pointer text-sm font-bold", part: "label", htmlFor: id }, i18n.t('with-colon', {
         text: i18n.t('sort-by'),
     })));
 };
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const SortOption = ({ value, selected, i18n, label, }) => {
     return (h("option", { value: value, selected: selected }, i18n.t(label)));
 };
 
+/**
+ * @deprecated should only be used for Stencil components.
+ */
 const SortSelect = ({ i18n, id, onSelect }, children) => {
     return (h("div", { class: "relative", part: "select-parent" },
         h("select", { id: id, class: "btn-outline-neutral h-10 grow cursor-pointer appearance-none pr-24 pl-3", part: "select", "aria-label": i18n.t('sort-by'), onChange: (option) => onSelect(option) }, children),
@@ -121,8 +136,8 @@ const AtomicSortDropdown = class {
         const { hasError, hasResults, firstSearchExecuted } = this.searchStatusState;
         const { bindings: { i18n }, id, } = this;
         return [
-            h(SortGuard, { key: 'c14d93cfa2d9e670f7695cfd1af4cf737311f11e', firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: hasResults }, h(SortContainer, { key: '500c808e2989e6d5426140821d86d4e15cd6bf59' }, h(SortLabel, { key: '803c794be2f089df9453802d1bbb5968be65abd6', i18n: i18n, id: id }), h(SortSelect, { key: '1deba64980b3a927b77ad9c558144681f92bac8e', i18n: i18n, id: id, onSelect: (evt) => this.select(evt) }, this.options.map(({ label, criteria, expression }) => (h(SortOption, { i18n: i18n, label: label, selected: this.sort.isSortedBy(criteria), value: expression })))))),
-            h("slot", { key: 'e238e6a9339f38c5c36665ebd787e43d4c5e011e' }),
+            h(SortGuard, { key: '5a12892995b080d720a1f2886efeeda944798e16', firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: hasResults }, h(SortContainer, { key: 'e2115d8ba125cb8d9a43fb8b6a11fd552d7043ad' }, h(SortLabel, { key: '9bf8a8c8c5ba65b76ce9712344bea372bd565323', i18n: i18n, id: id }), h(SortSelect, { key: 'e8cb391bd22c61a395b60408a890736a568b61d8', i18n: i18n, id: id, onSelect: (evt) => this.select(evt) }, this.options.map(({ label, criteria, expression }) => (h(SortOption, { i18n: i18n, label: label, selected: this.sort.isSortedBy(criteria), value: expression })))))),
+            h("slot", { key: '881c74dbdda02eb75dbfb9c01b6ce9ca6e956883' }),
         ];
     }
     get host() { return getElement(this); }

package/dist/esm/atomic-sort-dropdown.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-sort-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/common/sort/container.tsx","src/components/common/sort/stencil-guard.tsx","src/components/common/sort/stencil-label.tsx","src/components/common/sort/stencil-option.tsx","src/components/common/sort/stencil-select.tsx","src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.pcss?tag=atomic-sort-dropdown&encapsulation=shadow","src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\n\nexport const SortContainer: FunctionalComponent = (_, children) => {\n  return (\n    <div class=\"text-on-background flex flex-wrap items-center\">{children}</div>\n  );\n};\n","import {Fragment, FunctionalComponent, h} from '@stencil/core';\n\ninterface SortGuardProps {\n  hasError: boolean;\n  firstSearchExecuted: boolean;\n  hasResults: boolean;\n}\nexport const SortGuard: FunctionalComponent<SortGuardProps> = (\n  {hasError, firstSearchExecuted, hasResults},\n  children\n) => {\n  if (hasError) {\n    return;\n  }\n\n  if (!firstSearchExecuted) {\n    return (\n      <div\n        part=\"placeholder\"\n        aria-hidden\n        class=\"bg-neutral my-2 h-6 w-44 animate-pulse rounded\"\n      ></div>\n    );\n  }\n\n  if (!hasResults) {\n    return;\n  }\n\n  return <Fragment>{children}</Fragment>;\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\n\ninterface SortLabelProps {\n  id: string;\n  i18n: i18n;\n}\n\nexport const SortLabel: FunctionalComponent<SortLabelProps> = ({id, i18n}) => {\n  return (\n    <label\n      class=\"m-2 cursor-pointer text-sm font-bold\"\n      part=\"label\"\n      htmlFor={id}\n    >\n      {i18n.t('with-colon', {\n        text: i18n.t('sort-by'),\n      })}\n    </label>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\n\nexport interface SortOptionProps {\n  value: string;\n  selected: boolean;\n  i18n: i18n;\n  label: string;\n}\nexport const SortOption: FunctionalComponent<SortOptionProps> = ({\n  value,\n  selected,\n  i18n,\n  label,\n}) => {\n  return (\n    <option value={value} selected={selected}>\n      {i18n.t(label)}\n    </option>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport ArrowBottomIcon from '../../../images/arrow-bottom-rounded.svg';\n\ninterface SortSelectProps {\n  id: string;\n  i18n: i18n;\n  onSelect: (opt: Event) => void;\n}\nexport const SortSelect: FunctionalComponent<SortSelectProps> = (\n  {i18n, id, onSelect},\n  children\n) => {\n  return (\n    <div class=\"relative\" part=\"select-parent\">\n      <select\n        id={id}\n        class=\"btn-outline-neutral h-10 grow cursor-pointer appearance-none pr-24 pl-3\"\n        part=\"select\"\n        aria-label={i18n.t('sort-by')}\n        onChange={(option) => onSelect(option)}\n      >\n        {children}\n      </select>\n      <div\n        part=\"select-separator\"\n        class=\"border-neutral pointer-events-none absolute top-px right-0 bottom-px flex w-10 items-center justify-center border-l\"\n      >\n        <atomic-icon class=\"w-2.5\" icon={ArrowBottomIcon}></atomic-icon>\n      </div>\n    </div>\n  );\n};\n","@import '../../../global/global.pcss';\n\nselect:hover + div,\nselect:focus-visible + div {\n  @apply border-primary-light text-primary-light;\n}\n","import {Schema, StringValue} from '@coveo/bueno';\nimport {\n  Sort,\n  buildSort,\n  SortState,\n  parseCriterionExpression,\n  buildSearchStatus,\n  SearchStatus,\n  SearchStatusState,\n  TabManager,\n  TabManagerState,\n  buildTabManager,\n  loadSortCriteriaActions,\n} from '@coveo/headless';\nimport {Component, h, State, Element} from '@stencil/core';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {shouldDisplayOnCurrentTab} from '../../../utils/tab-utils';\nimport {randomID} from '../../../utils/utils';\nimport {SortContainer} from '../../common/sort/container';\nimport {SortGuard} from '../../common/sort/stencil-guard';\nimport {SortLabel} from '../../common/sort/stencil-label';\nimport {SortOption} from '../../common/sort/stencil-option';\nimport {SortSelect} from '../../common/sort/stencil-select';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-sort-dropdown` component renders a dropdown that the end user can interact with to select the criteria to use when sorting query results.\n *\n * @slot default - The `atomic-sort-expression` of the dropdown are slotted in.\n *\n * @part label - The \"Sort by\" label of the `<select>` element.\n * @part select-parent - The `<select>` element parent.\n * @part select - The `<select>` element of the dropdown list.\n * @part select-separator - The element separating the select from the icon.\n * @part placeholder - The dropdown placeholder for while the search interface is initializing.\n */\n@Component({\n  tag: 'atomic-sort-dropdown',\n  styleUrl: 'atomic-sort-dropdown.pcss',\n  shadow: true,\n})\nexport class AtomicSortDropdown implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  private sort!: Sort;\n  public searchStatus!: SearchStatus;\n  private id!: string;\n\n  @Element() host!: HTMLElement;\n\n  @State() @BindStateToController('sort') public sortState!: SortState;\n  @BindStateToController('searchStatus')\n  @State()\n  private searchStatusState!: SearchStatusState;\n  public tabManager!: TabManager;\n  @BindStateToController('tabManager')\n  @State()\n  public tabManagerState!: TabManagerState;\n  @State() public error!: Error;\n\n  connectedCallback(): void {\n    this.id ||= randomID('atomic-sort-dropdown-');\n  }\n\n  public initialize() {\n    this.buildOptions();\n    this.searchStatus = buildSearchStatus(this.bindings.engine);\n    this.sort = buildSort(this.bindings.engine, {\n      initialState: {\n        criterion: this.bindings.store.state.sortOptions[0]?.criteria,\n      },\n    });\n    this.tabManager = buildTabManager(this.bindings.engine);\n  }\n\n  private buildOptions() {\n    const sortExpressionElements = Array.from(\n      this.host.querySelectorAll('atomic-sort-expression')\n    );\n\n    if (!sortExpressionElements.length) {\n      this.error = new Error(\n        'The \"atomic-sort-dropdown\" element requires at least one \"atomic-sort-expression\" child.'\n      );\n      return;\n    }\n\n    this.bindings.store.state.sortOptions = sortExpressionElements.map(\n      ({expression, label, tabsIncluded, tabsExcluded}) => {\n        new Schema({\n          label: new StringValue({emptyAllowed: false, required: true}),\n        }).validate({label});\n\n        return {\n          tabs: {\n            included: tabsIncluded,\n            excluded: tabsExcluded,\n          },\n          criteria: parseCriterionExpression(expression),\n          expression,\n          label,\n        };\n      }\n    );\n  }\n\n  private get options() {\n    return this.bindings.store.state.sortOptions.filter(({tabs}) =>\n      shouldDisplayOnCurrentTab(\n        [...tabs.included],\n        [...tabs.excluded],\n        this.tabManagerState?.activeTab\n      )\n    );\n  }\n\n  private select(e: Event) {\n    const select = e.composedPath()[0] as HTMLSelectElement;\n    const option = this.options.find(\n      (option) => option.expression === select.value\n    );\n    option && this.sort.sortBy(option.criteria);\n  }\n\n  public componentShouldUpdate(): void {\n    if (\n      this.options.some(\n        (option) =>\n          option.expression.trim().replace(/\\s*,\\s*/g, ',') ===\n          this.sortState.sortCriteria.replace(/@/g, '')\n      )\n    ) {\n      return;\n    }\n\n    const action = loadSortCriteriaActions(\n      this.bindings.engine\n    ).updateSortCriterion(this.options[0]?.criteria);\n\n    this.bindings.engine.dispatch(action);\n  }\n\n  public render() {\n    const {hasError, hasResults, firstSearchExecuted} = this.searchStatusState;\n    const {\n      bindings: {i18n},\n      id,\n    } = this;\n\n    return [\n      <SortGuard\n        firstSearchExecuted={firstSearchExecuted}\n        hasError={hasError}\n        hasResults={hasResults}\n      >\n        <SortContainer>\n          <SortLabel i18n={i18n} id={id} />\n          <SortSelect i18n={i18n} id={id} onSelect={(evt) => this.select(evt)}>\n            {this.options.map(({label, criteria, expression}) => (\n              <SortOption\n                i18n={i18n}\n                label={label}\n                selected={this.sort.isSortedBy(criteria)}\n                value={expression}\n              />\n            ))}\n          </SortSelect>\n        </SortContainer>\n      </SortGuard>,\n      <slot></slot>,\n    ];\n  }\n}\n"],"version":3}
+{"file":"atomic-sort-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/common/sort/container.tsx","src/components/common/sort/stencil-guard.tsx","src/components/common/sort/stencil-label.tsx","src/components/common/sort/stencil-option.tsx","src/components/common/sort/stencil-select.tsx","src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.pcss?tag=atomic-sort-dropdown&encapsulation=shadow","src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const SortContainer: FunctionalComponent = (_, children) => {\n  return (\n    <div class=\"text-on-background flex flex-wrap items-center\">{children}</div>\n  );\n};\n","import {Fragment, FunctionalComponent, h} from '@stencil/core';\n\ninterface SortGuardProps {\n  hasError: boolean;\n  firstSearchExecuted: boolean;\n  hasResults: boolean;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const SortGuard: FunctionalComponent<SortGuardProps> = (\n  {hasError, firstSearchExecuted, hasResults},\n  children\n) => {\n  if (hasError) {\n    return;\n  }\n\n  if (!firstSearchExecuted) {\n    return (\n      <div\n        part=\"placeholder\"\n        aria-hidden\n        class=\"bg-neutral my-2 h-6 w-44 animate-pulse rounded\"\n      ></div>\n    );\n  }\n\n  if (!hasResults) {\n    return;\n  }\n\n  return <Fragment>{children}</Fragment>;\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\n\ninterface SortLabelProps {\n  id: string;\n  i18n: i18n;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const SortLabel: FunctionalComponent<SortLabelProps> = ({id, i18n}) => {\n  return (\n    <label\n      class=\"m-2 cursor-pointer text-sm font-bold\"\n      part=\"label\"\n      htmlFor={id}\n    >\n      {i18n.t('with-colon', {\n        text: i18n.t('sort-by'),\n      })}\n    </label>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\n\ninterface SortOptionProps {\n  value: string;\n  selected: boolean;\n  i18n: i18n;\n  label: string;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const SortOption: FunctionalComponent<SortOptionProps> = ({\n  value,\n  selected,\n  i18n,\n  label,\n}) => {\n  return (\n    <option value={value} selected={selected}>\n      {i18n.t(label)}\n    </option>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport ArrowBottomIcon from '../../../images/arrow-bottom-rounded.svg';\n\ninterface SortSelectProps {\n  id: string;\n  i18n: i18n;\n  onSelect: (opt: Event) => void;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const SortSelect: FunctionalComponent<SortSelectProps> = (\n  {i18n, id, onSelect},\n  children\n) => {\n  return (\n    <div class=\"relative\" part=\"select-parent\">\n      <select\n        id={id}\n        class=\"btn-outline-neutral h-10 grow cursor-pointer appearance-none pr-24 pl-3\"\n        part=\"select\"\n        aria-label={i18n.t('sort-by')}\n        onChange={(option) => onSelect(option)}\n      >\n        {children}\n      </select>\n      <div\n        part=\"select-separator\"\n        class=\"border-neutral pointer-events-none absolute top-px right-0 bottom-px flex w-10 items-center justify-center border-l\"\n      >\n        <atomic-icon class=\"w-2.5\" icon={ArrowBottomIcon}></atomic-icon>\n      </div>\n    </div>\n  );\n};\n","@import '../../../global/global.pcss';\n\nselect:hover + div,\nselect:focus-visible + div {\n  @apply border-primary-light text-primary-light;\n}\n","import {Schema, StringValue} from '@coveo/bueno';\nimport {\n  Sort,\n  buildSort,\n  SortState,\n  parseCriterionExpression,\n  buildSearchStatus,\n  SearchStatus,\n  SearchStatusState,\n  TabManager,\n  TabManagerState,\n  buildTabManager,\n  loadSortCriteriaActions,\n} from '@coveo/headless';\nimport {Component, h, State, Element} from '@stencil/core';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {shouldDisplayOnCurrentTab} from '../../../utils/tab-utils';\nimport {randomID} from '../../../utils/utils';\nimport {SortContainer} from '../../common/sort/container';\nimport {SortGuard} from '../../common/sort/stencil-guard';\nimport {SortLabel} from '../../common/sort/stencil-label';\nimport {SortOption} from '../../common/sort/stencil-option';\nimport {SortSelect} from '../../common/sort/stencil-select';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-sort-dropdown` component renders a dropdown that the end user can interact with to select the criteria to use when sorting query results.\n *\n * @slot default - The `atomic-sort-expression` of the dropdown are slotted in.\n *\n * @part label - The \"Sort by\" label of the `<select>` element.\n * @part select-parent - The `<select>` element parent.\n * @part select - The `<select>` element of the dropdown list.\n * @part select-separator - The element separating the select from the icon.\n * @part placeholder - The dropdown placeholder for while the search interface is initializing.\n */\n@Component({\n  tag: 'atomic-sort-dropdown',\n  styleUrl: 'atomic-sort-dropdown.pcss',\n  shadow: true,\n})\nexport class AtomicSortDropdown implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  private sort!: Sort;\n  public searchStatus!: SearchStatus;\n  private id!: string;\n\n  @Element() host!: HTMLElement;\n\n  @State() @BindStateToController('sort') public sortState!: SortState;\n  @BindStateToController('searchStatus')\n  @State()\n  private searchStatusState!: SearchStatusState;\n  public tabManager!: TabManager;\n  @BindStateToController('tabManager')\n  @State()\n  public tabManagerState!: TabManagerState;\n  @State() public error!: Error;\n\n  connectedCallback(): void {\n    this.id ||= randomID('atomic-sort-dropdown-');\n  }\n\n  public initialize() {\n    this.buildOptions();\n    this.searchStatus = buildSearchStatus(this.bindings.engine);\n    this.sort = buildSort(this.bindings.engine, {\n      initialState: {\n        criterion: this.bindings.store.state.sortOptions[0]?.criteria,\n      },\n    });\n    this.tabManager = buildTabManager(this.bindings.engine);\n  }\n\n  private buildOptions() {\n    const sortExpressionElements = Array.from(\n      this.host.querySelectorAll('atomic-sort-expression')\n    );\n\n    if (!sortExpressionElements.length) {\n      this.error = new Error(\n        'The \"atomic-sort-dropdown\" element requires at least one \"atomic-sort-expression\" child.'\n      );\n      return;\n    }\n\n    this.bindings.store.state.sortOptions = sortExpressionElements.map(\n      ({expression, label, tabsIncluded, tabsExcluded}) => {\n        new Schema({\n          label: new StringValue({emptyAllowed: false, required: true}),\n        }).validate({label});\n\n        return {\n          tabs: {\n            included: tabsIncluded,\n            excluded: tabsExcluded,\n          },\n          criteria: parseCriterionExpression(expression),\n          expression,\n          label,\n        };\n      }\n    );\n  }\n\n  private get options() {\n    return this.bindings.store.state.sortOptions.filter(({tabs}) =>\n      shouldDisplayOnCurrentTab(\n        [...tabs.included],\n        [...tabs.excluded],\n        this.tabManagerState?.activeTab\n      )\n    );\n  }\n\n  private select(e: Event) {\n    const select = e.composedPath()[0] as HTMLSelectElement;\n    const option = this.options.find(\n      (option) => option.expression === select.value\n    );\n    option && this.sort.sortBy(option.criteria);\n  }\n\n  public componentShouldUpdate(): void {\n    if (\n      this.options.some(\n        (option) =>\n          option.expression.trim().replace(/\\s*,\\s*/g, ',') ===\n          this.sortState.sortCriteria.replace(/@/g, '')\n      )\n    ) {\n      return;\n    }\n\n    const action = loadSortCriteriaActions(\n      this.bindings.engine\n    ).updateSortCriterion(this.options[0]?.criteria);\n\n    this.bindings.engine.dispatch(action);\n  }\n\n  public render() {\n    const {hasError, hasResults, firstSearchExecuted} = this.searchStatusState;\n    const {\n      bindings: {i18n},\n      id,\n    } = this;\n\n    return [\n      <SortGuard\n        firstSearchExecuted={firstSearchExecuted}\n        hasError={hasError}\n        hasResults={hasResults}\n      >\n        <SortContainer>\n          <SortLabel i18n={i18n} id={id} />\n          <SortSelect i18n={i18n} id={id} onSelect={(evt) => this.select(evt)}>\n            {this.options.map(({label, criteria, expression}) => (\n              <SortOption\n                i18n={i18n}\n                label={label}\n                selected={this.sort.isSortedBy(criteria)}\n                value={expression}\n              />\n            ))}\n          </SortSelect>\n        </SortContainer>\n      </SortGuard>,\n      <slot></slot>,\n    ];\n  }\n}\n"],"version":3}

package/dist/esm/atomic-sort-expression.entry.js

@@ -50,7 +50,7 @@ const AtomicSortExpression = class {
         const dropdownComponent = 'atomic-sort-dropdown';
         if (!this.host.closest(dropdownComponent)) {
             const error = new Error(`The "${this.host.nodeName.toLowerCase()}" component has to be used inside an ${dropdownComponent} element.`);
-            return (h("atomic-component-error", { key: '2e02e5bfb81dbf81e48bf860248f6252d9b611f1', element: this.host, error: error }));
+            return (h("atomic-component-error", { key: '6f29f3caf5b093f373f77cd291bc3858ff54dcb2', element: this.host, error: error }));
         }
     }
     get host() { return getElement(this); }

package/dist/esm/atomic-stencil-facet-date-input.entry.js

@@ -1,11 +1,10 @@
 import { r as registerInstance, c as createEvent, h } from './index-3f35faca.js';
 import { buildDateRange } from '@coveo/headless';
 import { p as parseDate } from './date-utils-e07b72d6.js';
-import { B as Button } from './stencil-button-1a29a5df.js';
+import { B as Button } from './stencil-button-49254c75.js';
 import './dayjs.min-d04628c6.js';
 import './_commonjsHelpers-1789f0cf.js';
 import './event-utils-8de63ec3.js';
-import './stencil-button-style-0bc80040.js';
 
 const FacetDateInput = class {
     constructor(hostRef) {
@@ -69,13 +68,13 @@ const FacetDateInput = class {
         // Fallback for Safari < 14.1, date with format yyyy-mm-dd over 1400 (API limit)
         const pattern = '^(1[4-9]\\d{2}|2\\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$';
         const range = this.rangeGetter();
-        return (h("form", { key: 'a6dac71a63ec89c9d2db4a2193c314457e7259e3', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
+        return (h("form", { key: 'd9fc67d163660a176c24226115d16076ac68b8c8', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: '0245d6a038e4c839d6589fdef9605c8d0cd89266', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: 'f1d063272bb432fe5f3d1d0868df4a11f0d9cb5e', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
+            } }, h("label", { key: '0fda92c848f6761d3e49fb4fd16b2f14b4249f1a', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: '1f7f66eb3f959a5965d33f9b69ca2e7ac10a76ab', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
             // API/Index minimum supported date
-            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: 'e99a0845acd01318f12fab4a0769071ea2cb0a22', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: '184d0c3a6517439f943709b5d27936ab8f3fb0f7', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: '7ac776c5c63e63a141ab9d89d493ba1d50fec2eb', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: '238abcfe17e443c1a37b4eea867d17a4ba37db13', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: 'f4f110b74dc1355e01acdc7ec0520e8c9db291e7', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: '89097bd85e1d62db77fcf1cd2ba95886870294e4', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
     }
 };