@coveo/atomic 3.35.0-pre.e757e0d8ec → 3.35.0-pre.e78acad7b4

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-63373ffc.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-e72b213d.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: '7873f12c4d080d167e19c74e3e3d24e989084fbb', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: 'edf6c6e1462f60f000f4d008d02d59b4f1b50da6', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: '4060681aecb0f2ad490c0cd7556bfd599161343d', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: '3c57663d59c5978fbee4d2b24866d43ead6c1497', 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: 'b01ff181e25692d9a174e9cbf374e4aba8a38df7', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: 'e8168c3f2f45687cadec47c6fdf3b89de5c086dc', 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,15 +1,14 @@
 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-eff6fbfa.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-e72b213d.js';
+import './stencil-button-49254c75.js';
 import './event-utils-8de63ec3.js';
-import './stencil-button-style-0bc80040.js';
 import './stencil-heading-c701a05a.js';
 import './dom-utils-f6086cd3.js';
 import './init-queue-fbe942c3.js';

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

@@ -1 +1 @@
-{"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}
+{"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,15 +1,14 @@
 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-f2a5e84f.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-e72b213d.js';
+import './stencil-button-49254c75.js';
 import './event-utils-8de63ec3.js';
-import './stencil-button-style-0bc80040.js';
-import './stencil-radio-button-a5c62a36.js';
+import './stencil-radio-button-8d40e86f.js';
 import './stencil-heading-c701a05a.js';
 import './purify-c7ebd240.js';
 import './_commonjsHelpers-1789f0cf.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

@@ -136,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-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-e72b213d.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 })));
     }
 };
 

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

@@ -1 +1 @@
-{"file":"atomic-stencil-facet-date-input.entry.js","mappings":"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","names":[],"sources":["src/components/common/facets/stencil-facet-date-input/stencil-facet-date-input.tsx"],"sourcesContent":["import {\n  buildDateRange,\n  DateFilterRange,\n  DateRangeRequest,\n} from '@coveo/headless';\nimport {Component, h, State, Prop, Event, EventEmitter} from '@stencil/core';\nimport {parseDate} from '../../../../utils/date-utils';\nimport {Button} from '../../../common/stencil-button';\nimport {AnyBindings} from '../../interface/bindings';\n\n/**\n * @deprecated\n * Use `atomic-facet-date-input` instead. This component is meant to be used with Stencil components only.\n * Internal component made to be integrated in a TimeframeFacet.\n * @internal\n */\n@Component({\n  tag: 'atomic-stencil-facet-date-input',\n  shadow: false,\n})\nexport class FacetDateInput {\n  @State() private start?: Date;\n  @State() private end?: Date;\n  private startRef!: HTMLInputElement;\n  private endRef!: HTMLInputElement;\n\n  @Prop() public bindings!: AnyBindings;\n  @Prop() public rangeGetter!: () => DateFilterRange | undefined;\n  @Prop() public rangeSetter!: (range: DateRangeRequest) => void;\n  @Prop() public facetId!: string;\n  @Prop() public label!: string;\n  @Prop() public min?: string;\n  @Prop() public max?: string = '9999-12-31';\n\n  @Event({\n    eventName: 'atomic/dateInputApply',\n  })\n  private applyInput!: EventEmitter;\n\n  public connectedCallback() {\n    const range = this.rangeGetter();\n    this.start = range ? parseDate(range.start).toDate() : undefined;\n    this.end = range ? parseDate(range.end).toDate() : undefined;\n  }\n  public componentDidUpdate() {\n    if (!this.startRef.value && !this.endRef.value) {\n      this.startRef.min = this.min || this.formattedDateValue('1401-01-01');\n      this.endRef.max = this.max || '';\n      this.startRef.max = this.max || '';\n      this.endRef.min = this.min || '';\n    }\n  }\n\n  private apply() {\n    if (!this.startRef.validity.valid || !this.endRef.validity.valid) {\n      return;\n    }\n\n    this.applyInput.emit({\n      start: this.start,\n      end: this.end,\n    });\n\n    const rangeRequest = buildDateRange({\n      start: this.start!,\n      end: this.end!.setHours(23, 59, 59, 999),\n    });\n\n    this.rangeSetter(rangeRequest);\n  }\n\n  private formattedDateValue(date?: string | Date) {\n    if (!date) {\n      return '';\n    }\n    return parseDate(date).format('YYYY-MM-DD');\n  }\n\n  render() {\n    const label = this.bindings.i18n.t(this.label);\n    const startLabel = this.bindings.i18n.t('start');\n    const endLabel = this.bindings.i18n.t('end');\n    const startAria = this.bindings.i18n.t('date-input-start', {label});\n    const endAria = this.bindings.i18n.t('date-input-end', {label});\n    const apply = this.bindings.i18n.t('apply');\n    const applyAria = this.bindings.i18n.t('date-input-apply', {label});\n\n    const inputClasses = 'input-primary p-2.5';\n    const labelClasses = 'text-neutral-dark self-center';\n\n    const placeholder = 'yyyy-mm-dd';\n    // Fallback for Safari < 14.1, date with format yyyy-mm-dd over 1400 (API limit)\n    const pattern =\n      '^(1[4-9]\\\\d{2}|2\\\\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\\\\d|3[01])$';\n\n    const range = this.rangeGetter();\n\n    return (\n      <form\n        class=\"mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2\"\n        onSubmit={(e) => {\n          e.preventDefault();\n          this.apply();\n          return false;\n        }}\n      >\n        <label\n          part=\"input-label\"\n          class={labelClasses}\n          htmlFor={`${this.facetId}_start`}\n        >\n          {startLabel}:\n        </label>\n        <input\n          id={`${this.facetId}_start`}\n          part=\"input-start\"\n          type=\"date\"\n          ref={(ref) => (this.startRef = ref!)}\n          class={inputClasses}\n          aria-label={startAria}\n          placeholder={placeholder}\n          pattern={pattern}\n          required\n          // API/Index minimum supported date\n          min={this.min || this.formattedDateValue('1401-01-01')}\n          max={this.end ? this.formattedDateValue(this.end) : this.max}\n          value={this.formattedDateValue(range?.start)}\n          onInput={(e) =>\n            (this.start = parseDate(\n              (e.target as HTMLInputElement).value\n            ).toDate())\n          }\n        />\n        <label\n          part=\"input-label\"\n          class={labelClasses}\n          htmlFor={`${this.facetId}_end`}\n        >\n          {endLabel}:\n        </label>\n        <input\n          id={`${this.facetId}_end`}\n          part=\"input-end\"\n          type=\"date\"\n          ref={(ref) => (this.endRef = ref!)}\n          class={inputClasses}\n          aria-label={endAria}\n          placeholder={placeholder}\n          pattern={pattern}\n          required\n          min={this.formattedDateValue(this.start) || this.min}\n          max={this.max}\n          value={this.formattedDateValue(range?.end)}\n          onInput={(e) =>\n            (this.end = parseDate(\n              (e.target as HTMLInputElement).value\n            ).toDate())\n          }\n        />\n        <Button\n          style=\"outline-primary\"\n          type=\"submit\"\n          part=\"input-apply-button\"\n          class=\"col-span-2 truncate p-2.5\"\n          ariaLabel={applyAria}\n          text={apply}\n        ></Button>\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-stencil-facet-date-input.entry.js","mappings":"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","names":[],"sources":["src/components/common/facets/stencil-facet-date-input/stencil-facet-date-input.tsx"],"sourcesContent":["import {\n  buildDateRange,\n  DateFilterRange,\n  DateRangeRequest,\n} from '@coveo/headless';\nimport {Component, h, State, Prop, Event, EventEmitter} from '@stencil/core';\nimport {parseDate} from '../../../../utils/date-utils';\nimport {Button} from '../../../common/stencil-button';\nimport {AnyBindings} from '../../interface/bindings';\n\n/**\n * @deprecated\n * Use `atomic-facet-date-input` instead. This component is meant to be used with Stencil components only.\n * Internal component made to be integrated in a TimeframeFacet.\n * @internal\n */\n@Component({\n  tag: 'atomic-stencil-facet-date-input',\n  shadow: false,\n})\nexport class FacetDateInput {\n  @State() private start?: Date;\n  @State() private end?: Date;\n  private startRef!: HTMLInputElement;\n  private endRef!: HTMLInputElement;\n\n  @Prop() public bindings!: AnyBindings;\n  @Prop() public rangeGetter!: () => DateFilterRange | undefined;\n  @Prop() public rangeSetter!: (range: DateRangeRequest) => void;\n  @Prop() public facetId!: string;\n  @Prop() public label!: string;\n  @Prop() public min?: string;\n  @Prop() public max?: string = '9999-12-31';\n\n  @Event({\n    eventName: 'atomic/dateInputApply',\n  })\n  private applyInput!: EventEmitter;\n\n  public connectedCallback() {\n    const range = this.rangeGetter();\n    this.start = range ? parseDate(range.start).toDate() : undefined;\n    this.end = range ? parseDate(range.end).toDate() : undefined;\n  }\n  public componentDidUpdate() {\n    if (!this.startRef.value && !this.endRef.value) {\n      this.startRef.min = this.min || this.formattedDateValue('1401-01-01');\n      this.endRef.max = this.max || '';\n      this.startRef.max = this.max || '';\n      this.endRef.min = this.min || '';\n    }\n  }\n\n  private apply() {\n    if (!this.startRef.validity.valid || !this.endRef.validity.valid) {\n      return;\n    }\n\n    this.applyInput.emit({\n      start: this.start,\n      end: this.end,\n    });\n\n    const rangeRequest = buildDateRange({\n      start: this.start!,\n      end: this.end!.setHours(23, 59, 59, 999),\n    });\n\n    this.rangeSetter(rangeRequest);\n  }\n\n  private formattedDateValue(date?: string | Date) {\n    if (!date) {\n      return '';\n    }\n    return parseDate(date).format('YYYY-MM-DD');\n  }\n\n  render() {\n    const label = this.bindings.i18n.t(this.label);\n    const startLabel = this.bindings.i18n.t('start');\n    const endLabel = this.bindings.i18n.t('end');\n    const startAria = this.bindings.i18n.t('date-input-start', {label});\n    const endAria = this.bindings.i18n.t('date-input-end', {label});\n    const apply = this.bindings.i18n.t('apply');\n    const applyAria = this.bindings.i18n.t('date-input-apply', {label});\n\n    const inputClasses = 'input-primary p-2.5';\n    const labelClasses = 'text-neutral-dark self-center';\n\n    const placeholder = 'yyyy-mm-dd';\n    // Fallback for Safari < 14.1, date with format yyyy-mm-dd over 1400 (API limit)\n    const pattern =\n      '^(1[4-9]\\\\d{2}|2\\\\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\\\\d|3[01])$';\n\n    const range = this.rangeGetter();\n\n    return (\n      <form\n        class=\"mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2\"\n        onSubmit={(e) => {\n          e.preventDefault();\n          this.apply();\n          return false;\n        }}\n      >\n        <label\n          part=\"input-label\"\n          class={labelClasses}\n          htmlFor={`${this.facetId}_start`}\n        >\n          {startLabel}:\n        </label>\n        <input\n          id={`${this.facetId}_start`}\n          part=\"input-start\"\n          type=\"date\"\n          ref={(ref) => (this.startRef = ref!)}\n          class={inputClasses}\n          aria-label={startAria}\n          placeholder={placeholder}\n          pattern={pattern}\n          required\n          // API/Index minimum supported date\n          min={this.min || this.formattedDateValue('1401-01-01')}\n          max={this.end ? this.formattedDateValue(this.end) : this.max}\n          value={this.formattedDateValue(range?.start)}\n          onInput={(e) =>\n            (this.start = parseDate(\n              (e.target as HTMLInputElement).value\n            ).toDate())\n          }\n        />\n        <label\n          part=\"input-label\"\n          class={labelClasses}\n          htmlFor={`${this.facetId}_end`}\n        >\n          {endLabel}:\n        </label>\n        <input\n          id={`${this.facetId}_end`}\n          part=\"input-end\"\n          type=\"date\"\n          ref={(ref) => (this.endRef = ref!)}\n          class={inputClasses}\n          aria-label={endAria}\n          placeholder={placeholder}\n          pattern={pattern}\n          required\n          min={this.formattedDateValue(this.start) || this.min}\n          max={this.max}\n          value={this.formattedDateValue(range?.end)}\n          onInput={(e) =>\n            (this.end = parseDate(\n              (e.target as HTMLInputElement).value\n            ).toDate())\n          }\n        />\n        <Button\n          style=\"outline-primary\"\n          type=\"submit\"\n          part=\"input-apply-button\"\n          class=\"col-span-2 truncate p-2.5\"\n          ariaLabel={applyAria}\n          text={apply}\n        ></Button>\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/atomic-suggestion-renderer.entry.js

@@ -72,7 +72,7 @@ const AtomicSuggestionRenderer = class {
     }
     render() {
         const isButton = !!(this.suggestion.onSelect || this.suggestion.query);
-        return (h(Host, { key: '7dffaca3c750d3d48a18b9c068cfd0d03b9604f8', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
+        return (h(Host, { key: '83ce9e46bdd66a524a1d8ef0478097fc3dab6e4d', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
                 if (!el) {
                     return;
                 }

package/dist/esm/atomic-tab-bar_2.entry.js

@@ -1,11 +1,10 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-3f35faca.js';
-import { B as Button } from './stencil-button-e72b213d.js';
+import { B as Button } from './stencil-button-49254c75.js';
 import { A as ArrowBottomIcon } from './arrow-bottom-rounded-043572da.js';
 import { I as InitializeBindings } from './initialization-utils-ffbc4136.js';
 import { c as createPopper } from './popper-lite-2035100c.js';
 import { y as preventOverflow } from './createPopper-a633eb88.js';
 import './event-utils-8de63ec3.js';
-import './stencil-button-style-0bc80040.js';
 import './dom-utils-f6086cd3.js';
 import './init-queue-fbe942c3.js';
 import './initialization-lit-stencil-common-utils-804fe146.js';
@@ -279,7 +278,7 @@ const TabPopover = class {
         this.popperInstance?.forceUpdate();
     }
     render() {
-        return (h(Host, { key: '9a47ca862fc969092a25a799083a358e547c6c64', onFocusout: (event) => this.closePopoverOnFocusOut(event), class: this.show ? '' : 'visibility-hidden', "aria-hidden": !this.show }, this.renderPopover(), this.isOpen && this.renderBackdrop()));
+        return (h(Host, { key: 'd3f0574698ec0b27d20e57a5278345a192f25e95', onFocusout: (event) => this.closePopoverOnFocusOut(event), class: this.show ? '' : 'visibility-hidden', "aria-hidden": !this.show }, this.renderPopover(), this.isOpen && this.renderBackdrop()));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/atomic-tab-bar_2.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-tab-bar.atomic-tab-popover.entry.js","mappings":"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","names":[],"sources":["src/components/common/tabs/tab-bar.pcss?tag=atomic-tab-bar&encapsulation=shadow","src/components/common/tabs/tab-bar.tsx","src/components/common/tabs/tab-popover.pcss?tag=atomic-tab-popover&encapsulation=shadow","src/components/common/tabs/tab-popover.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n\n:host {\n  white-space: nowrap;\n  width: 100%;\n  overflow-x: visible;\n  display: flex;\n  position: relative;\n}\n","import {h, Component, Element, Host, State, Listen} from '@stencil/core';\nimport {Button} from '../stencil-button';\nimport {TabCommonElement} from './tab-common';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'atomic-tab-bar',\n  shadow: true,\n  styleUrl: 'tab-bar.pcss',\n})\nexport class TabBar {\n  @Element() private host!: HTMLElement;\n\n  @State()\n  private popoverTabs: (typeof Button)[] = [];\n\n  private resizeObserver: ResizeObserver | undefined;\n\n  private get tabsFromSlot(): TabCommonElement[] {\n    const isTab = (tagName: string) =>\n      /atomic-.+-tab$/i.test(tagName) || /tab-button$/i.test(tagName);\n    return Array.from(this.host.querySelectorAll<TabCommonElement>('*')).filter(\n      (element) => isTab(element.tagName)\n    );\n  }\n\n  private get selectedTab() {\n    return this.tabsFromSlot.find((tab) => tab.active);\n  }\n\n  private get slotContentWidth() {\n    return this.tabsFromSlot.reduce(\n      (total, el) =>\n        total +\n        parseFloat(window.getComputedStyle(el).getPropertyValue('width')),\n      0\n    );\n  }\n\n  private get containerWidth() {\n    return parseFloat(\n      window.getComputedStyle(this.host).getPropertyValue('width')\n    );\n  }\n\n  private get isOverflow() {\n    return this.slotContentWidth > this.containerWidth;\n  }\n\n  private get tabPopover() {\n    return this.host.shadowRoot?.querySelector('atomic-tab-popover');\n  }\n\n  private get popoverWidth() {\n    return this.tabPopover ? this.getElementWidth(this.tabPopover) : 0;\n  }\n\n  private get overflowingTabs() {\n    const containerRelativeRightPosition =\n      this.host.getBoundingClientRect().right;\n    const selectedTabRelativeRightPosition =\n      this.selectedTab?.getBoundingClientRect().right;\n\n    return this.tabsFromSlot.filter((element) => {\n      const isBeforeSelectedTab = selectedTabRelativeRightPosition\n        ? selectedTabRelativeRightPosition >\n          element.getBoundingClientRect().right\n        : false;\n\n      const minimumWidthNeeded = isBeforeSelectedTab\n        ? this.popoverWidth + this.getElementWidth(this.selectedTab)\n        : this.popoverWidth;\n\n      const rightPositionLimit = !this.isOverflow\n        ? containerRelativeRightPosition\n        : containerRelativeRightPosition - minimumWidthNeeded;\n\n      return (\n        element.getBoundingClientRect().right > rightPositionLimit &&\n        !element.active\n      );\n    });\n  }\n\n  private get displayedTabs() {\n    return this.tabsFromSlot.filter((el) => !this.overflowingTabs.includes(el));\n  }\n\n  private get lastDisplayedTab() {\n    const displayedTabs = this.displayedTabs;\n    return displayedTabs[displayedTabs.length - 1];\n  }\n\n  private get lastDisplayedTabRightPosition() {\n    return (\n      this.lastDisplayedTab.getBoundingClientRect().right -\n      this.host.getBoundingClientRect().left\n    );\n  }\n\n  private updatePopoverPosition() {\n    this.tabPopover?.style.setProperty(\n      'left',\n      `${this.displayedTabs.length ? this.lastDisplayedTabRightPosition : 0}px`\n    );\n  }\n\n  private getElementWidth = (element?: Element) => {\n    return element\n      ? parseFloat(window.getComputedStyle(element).getPropertyValue('width'))\n      : 0;\n  };\n\n  private hideElement = (el: HTMLElement) => {\n    el.style.visibility = 'hidden';\n    el.ariaHidden = 'true';\n  };\n\n  private showElement = (el: HTMLElement) => {\n    el.style.visibility = 'visible';\n    el.ariaHidden = 'false';\n  };\n\n  private updateTabVisibility = (\n    tabs: TabCommonElement[],\n    isVisible: boolean\n  ) => {\n    const tabCount = this.tabsFromSlot.length;\n\n    tabs.forEach((tab, index) => {\n      tab.style.setProperty(\n        'order',\n        String(isVisible ? index + 1 : tabCount - tabs.length + index + 1)\n      );\n      if (isVisible) {\n        this.showElement(tab);\n      } else {\n        this.hideElement(tab);\n      }\n    });\n  };\n\n  private updatePopoverTabs = () => {\n    this.popoverTabs = this.overflowingTabs.map((tab) => (\n      <li>\n        <Button\n          part=\"popover-tab\"\n          style=\"text-transparent\"\n          class=\"w-full truncate rounded px-4 py-2 text-left font-semibold\"\n          ariaLabel={tab.label}\n          title={tab.label}\n          onClick={() => {\n            tab.select();\n            this.updatePopoverTabs();\n            this.tabPopover?.toggle();\n          }}\n        >\n          {tab.label}\n        </Button>\n      </li>\n    ));\n  };\n\n  private setTabButtonMaxWidth = () => {\n    this.displayedTabs.forEach((tab) => {\n      tab.style.setProperty('max-width', `calc(100% - ${this.popoverWidth}px)`);\n    });\n  };\n\n  private updateTabsDisplay = () => {\n    this.updateTabVisibility(this.overflowingTabs, false);\n    this.updateTabVisibility(this.displayedTabs, true);\n    this.setTabButtonMaxWidth();\n    this.updatePopoverPosition();\n    this.updatePopoverTabs();\n    this.tabPopover?.setButtonVisibility(!!this.overflowingTabs.length);\n  };\n\n  @Listen('atomic/tabRendered')\n  public resolveResult(event: CustomEvent<{}>) {\n    event.stopPropagation();\n    this.updatePopoverTabs();\n  }\n  public componentWillUpdate() {\n    this.updateTabsDisplay();\n  }\n\n  public componentDidLoad() {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.updateTabsDisplay();\n    });\n    this.resizeObserver.observe(this.host);\n  }\n\n  public disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  public render = () => {\n    return (\n      <Host class=\"overflow-x-clip overflow-y-visible\">\n        <slot></slot>\n        <atomic-tab-popover exportparts=\"popover-button, value-label, arrow-icon, backdrop overflow-tabs\">\n          {this.popoverTabs}\n        </atomic-tab-popover>\n      </Host>\n    );\n  };\n}\n","@import '../../../global/global.pcss';\n\n:host {\n  position: absolute;\n}\n\n:host(.visibility-hidden) {\n  visibility: hidden;\n}\n\n[part='overflow-tabs'] {\n  flex-direction: column;\n  max-width: 150px;\n\n  button {\n    text-align: start;\n  }\n}\n","import {\n  createPopperLite as createPopper,\n  preventOverflow,\n  Instance as PopperInstance,\n} from '@popperjs/core';\nimport {\n  Component,\n  h,\n  Listen,\n  State,\n  Element,\n  Host,\n  Method,\n} from '@stencil/core';\nimport ArrowBottomIcon from '../../../images/arrow-bottom-rounded.svg';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {Bindings} from '../../search/atomic-search-interface/atomic-search-interface';\nimport {Button} from '../stencil-button';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'atomic-tab-popover',\n  shadow: true,\n  styleUrl: 'tab-popover.pcss',\n})\nexport class TabPopover implements InitializableComponent {\n  @Element() private host!: HTMLElement;\n\n  @InitializeBindings() public bindings!: Bindings;\n\n  @State()\n  public show = false;\n\n  @State()\n  public error!: Error;\n\n  @State()\n  private isOpen = false;\n\n  private buttonRef!: HTMLElement;\n  private popupRef!: HTMLElement;\n  private popperInstance?: PopperInstance;\n  public popoverId = 'atomic-tab-popover';\n\n  public initialize() {}\n\n  private initializePopover() {\n    this.popupRef.classList.add('popover-nested');\n  }\n\n  @Listen('keydown')\n  public handleKeyDown(e: KeyboardEvent) {\n    if (!this.isOpen) {\n      return;\n    }\n\n    if (e.key === 'Escape') {\n      this.toggle();\n    } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      this.navigatePopover(e.key);\n    }\n  }\n\n  private getTabButtons(): HTMLButtonElement[] {\n    const slot = this.popupRef.children[0] as HTMLSlotElement;\n    return Array.from(slot.assignedElements())\n      .map((el) => (el as HTMLElement).querySelector('button'))\n      .filter((el): el is HTMLButtonElement => el !== null);\n  }\n\n  private getCurrentTabIndex(elements: HTMLButtonElement[]): number {\n    const MAX_SHADOW_DEPTH = 3;\n    let currentElement = document.activeElement;\n    let depth = 0;\n\n    while (currentElement?.shadowRoot && depth < MAX_SHADOW_DEPTH) {\n      currentElement = currentElement.shadowRoot.activeElement;\n      depth++;\n    }\n\n    if (!(currentElement instanceof HTMLButtonElement)) {\n      return -1;\n    }\n\n    return elements.indexOf(currentElement);\n  }\n\n  private navigatePopover(key: string): void {\n    const tabButtons = this.getTabButtons();\n    if (!tabButtons.length) {\n      return;\n    }\n\n    const currentIndex = this.getCurrentTabIndex(tabButtons);\n\n    const startIndex = currentIndex > -1 ? currentIndex : -1;\n\n    let nextIndex;\n    if (currentIndex === -1) {\n      nextIndex = key === 'ArrowDown' ? 0 : tabButtons.length - 1;\n    } else {\n      nextIndex =\n        key === 'ArrowDown'\n          ? (startIndex + 1) % tabButtons.length\n          : (startIndex - 1 + tabButtons.length) % tabButtons.length;\n    }\n\n    tabButtons[nextIndex]?.focus();\n  }\n\n  get slotElements() {\n    return this.host.children;\n  }\n\n  get hasTabs() {\n    return !!this.popupRef.children.length;\n  }\n\n  @Method()\n  public async toggle() {\n    this.isOpen = !this.isOpen;\n  }\n\n  @Method()\n  public async setButtonVisibility(isVisible: boolean) {\n    this.show = isVisible;\n  }\n\n  @Method()\n  public async closePopoverOnFocusOut(event: FocusEvent) {\n    const slot = this.popupRef.children[0] as HTMLSlotElement;\n    const assignedElements = slot.assignedElements() as HTMLElement[];\n\n    const isMovingToSlottedElement = assignedElements.some(\n      (element) =>\n        element === event.relatedTarget ||\n        element.contains(event.relatedTarget as Node)\n    );\n\n    if (isMovingToSlottedElement) {\n      return;\n    }\n\n    if (!this.popupRef.contains(event.relatedTarget as Node)) {\n      this.closePopover();\n    }\n  }\n\n  private closePopover() {\n    this.isOpen = false;\n  }\n\n  private renderDropdownButton() {\n    const label = this.bindings?.i18n.t('more');\n    const ariaLabel = this.bindings?.i18n.t('tab-popover', {label});\n    const buttonClasses = [\n      'relative',\n      'pb-1',\n      'mt-1',\n      'group',\n      'mr-6',\n      'font-semibold',\n    ];\n\n    return (\n      <Button\n        ref={(el) => (this.buttonRef = el!)}\n        style=\"text-transparent\"\n        onClick={() => this.toggle()}\n        part=\"popover-button\"\n        ariaExpanded={`${this.isOpen}`}\n        ariaLabel={ariaLabel}\n        ariaControls={this.popoverId}\n        class={`${buttonClasses.join(' ')}`}\n      >\n        <span\n          title={label}\n          part=\"value-label\"\n          class={\n            'group-hover:text-primary-light group-focus:text-primary mr-1.5 truncate'\n          }\n        >\n          {label}\n        </span>\n        <atomic-icon\n          part=\"arrow-icon\"\n          class={`group-hover:text-primary-light group-focus:text-primary ml-auto w-2 ${\n            this.isOpen ? 'rotate-180' : ''\n          }`}\n          icon={ArrowBottomIcon}\n        ></atomic-icon>\n      </Button>\n    );\n  }\n\n  private renderBackdrop() {\n    return (\n      <div\n        part=\"backdrop\"\n        class=\"fixed top-0 right-0 bottom-0 left-0 z-9998 cursor-pointer bg-transparent\"\n        onClick={() => this.toggle()}\n      ></div>\n    );\n  }\n\n  private renderPopover() {\n    return (\n      <div class={`relative ${this.isOpen ? 'z-9999' : ''}`}>\n        {this.renderDropdownButton()}\n        <ul\n          id={this.popoverId}\n          ref={(el) => (this.popupRef = el!)}\n          part=\"overflow-tabs\"\n          class={`bg-background border-neutral absolute rounded-lg border py-2 shadow-lg ${\n            this.isOpen ? 'flex' : 'hidden'\n          }`}\n        >\n          <slot></slot>\n        </ul>\n      </div>\n    );\n  }\n\n  public componentDidRender() {\n    if (this.popperInstance || !this.buttonRef || !this.popupRef) {\n      return;\n    }\n\n    this.popperInstance = createPopper(this.buttonRef, this.popupRef, {\n      placement: 'bottom-end',\n      modifiers: [preventOverflow],\n    });\n    this.initializePopover();\n  }\n\n  public componentDidUpdate() {\n    this.popperInstance?.forceUpdate();\n  }\n\n  public render() {\n    return (\n      <Host\n        onFocusout={(event: FocusEvent) => this.closePopoverOnFocusOut(event)}\n        class={this.show ? '' : 'visibility-hidden'}\n        aria-hidden={!this.show}\n      >\n        {this.renderPopover()}\n        {this.isOpen && this.renderBackdrop()}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-tab-bar.atomic-tab-popover.entry.js","mappings":"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","names":[],"sources":["src/components/common/tabs/tab-bar.pcss?tag=atomic-tab-bar&encapsulation=shadow","src/components/common/tabs/tab-bar.tsx","src/components/common/tabs/tab-popover.pcss?tag=atomic-tab-popover&encapsulation=shadow","src/components/common/tabs/tab-popover.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n\n:host {\n  white-space: nowrap;\n  width: 100%;\n  overflow-x: visible;\n  display: flex;\n  position: relative;\n}\n","import {h, Component, Element, Host, State, Listen} from '@stencil/core';\nimport {Button} from '../stencil-button';\nimport {TabCommonElement} from './tab-common';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'atomic-tab-bar',\n  shadow: true,\n  styleUrl: 'tab-bar.pcss',\n})\nexport class TabBar {\n  @Element() private host!: HTMLElement;\n\n  @State()\n  private popoverTabs: (typeof Button)[] = [];\n\n  private resizeObserver: ResizeObserver | undefined;\n\n  private get tabsFromSlot(): TabCommonElement[] {\n    const isTab = (tagName: string) =>\n      /atomic-.+-tab$/i.test(tagName) || /tab-button$/i.test(tagName);\n    return Array.from(this.host.querySelectorAll<TabCommonElement>('*')).filter(\n      (element) => isTab(element.tagName)\n    );\n  }\n\n  private get selectedTab() {\n    return this.tabsFromSlot.find((tab) => tab.active);\n  }\n\n  private get slotContentWidth() {\n    return this.tabsFromSlot.reduce(\n      (total, el) =>\n        total +\n        parseFloat(window.getComputedStyle(el).getPropertyValue('width')),\n      0\n    );\n  }\n\n  private get containerWidth() {\n    return parseFloat(\n      window.getComputedStyle(this.host).getPropertyValue('width')\n    );\n  }\n\n  private get isOverflow() {\n    return this.slotContentWidth > this.containerWidth;\n  }\n\n  private get tabPopover() {\n    return this.host.shadowRoot?.querySelector('atomic-tab-popover');\n  }\n\n  private get popoverWidth() {\n    return this.tabPopover ? this.getElementWidth(this.tabPopover) : 0;\n  }\n\n  private get overflowingTabs() {\n    const containerRelativeRightPosition =\n      this.host.getBoundingClientRect().right;\n    const selectedTabRelativeRightPosition =\n      this.selectedTab?.getBoundingClientRect().right;\n\n    return this.tabsFromSlot.filter((element) => {\n      const isBeforeSelectedTab = selectedTabRelativeRightPosition\n        ? selectedTabRelativeRightPosition >\n          element.getBoundingClientRect().right\n        : false;\n\n      const minimumWidthNeeded = isBeforeSelectedTab\n        ? this.popoverWidth + this.getElementWidth(this.selectedTab)\n        : this.popoverWidth;\n\n      const rightPositionLimit = !this.isOverflow\n        ? containerRelativeRightPosition\n        : containerRelativeRightPosition - minimumWidthNeeded;\n\n      return (\n        element.getBoundingClientRect().right > rightPositionLimit &&\n        !element.active\n      );\n    });\n  }\n\n  private get displayedTabs() {\n    return this.tabsFromSlot.filter((el) => !this.overflowingTabs.includes(el));\n  }\n\n  private get lastDisplayedTab() {\n    const displayedTabs = this.displayedTabs;\n    return displayedTabs[displayedTabs.length - 1];\n  }\n\n  private get lastDisplayedTabRightPosition() {\n    return (\n      this.lastDisplayedTab.getBoundingClientRect().right -\n      this.host.getBoundingClientRect().left\n    );\n  }\n\n  private updatePopoverPosition() {\n    this.tabPopover?.style.setProperty(\n      'left',\n      `${this.displayedTabs.length ? this.lastDisplayedTabRightPosition : 0}px`\n    );\n  }\n\n  private getElementWidth = (element?: Element) => {\n    return element\n      ? parseFloat(window.getComputedStyle(element).getPropertyValue('width'))\n      : 0;\n  };\n\n  private hideElement = (el: HTMLElement) => {\n    el.style.visibility = 'hidden';\n    el.ariaHidden = 'true';\n  };\n\n  private showElement = (el: HTMLElement) => {\n    el.style.visibility = 'visible';\n    el.ariaHidden = 'false';\n  };\n\n  private updateTabVisibility = (\n    tabs: TabCommonElement[],\n    isVisible: boolean\n  ) => {\n    const tabCount = this.tabsFromSlot.length;\n\n    tabs.forEach((tab, index) => {\n      tab.style.setProperty(\n        'order',\n        String(isVisible ? index + 1 : tabCount - tabs.length + index + 1)\n      );\n      if (isVisible) {\n        this.showElement(tab);\n      } else {\n        this.hideElement(tab);\n      }\n    });\n  };\n\n  private updatePopoverTabs = () => {\n    this.popoverTabs = this.overflowingTabs.map((tab) => (\n      <li>\n        <Button\n          part=\"popover-tab\"\n          style=\"text-transparent\"\n          class=\"w-full truncate rounded px-4 py-2 text-left font-semibold\"\n          ariaLabel={tab.label}\n          title={tab.label}\n          onClick={() => {\n            tab.select();\n            this.updatePopoverTabs();\n            this.tabPopover?.toggle();\n          }}\n        >\n          {tab.label}\n        </Button>\n      </li>\n    ));\n  };\n\n  private setTabButtonMaxWidth = () => {\n    this.displayedTabs.forEach((tab) => {\n      tab.style.setProperty('max-width', `calc(100% - ${this.popoverWidth}px)`);\n    });\n  };\n\n  private updateTabsDisplay = () => {\n    this.updateTabVisibility(this.overflowingTabs, false);\n    this.updateTabVisibility(this.displayedTabs, true);\n    this.setTabButtonMaxWidth();\n    this.updatePopoverPosition();\n    this.updatePopoverTabs();\n    this.tabPopover?.setButtonVisibility(!!this.overflowingTabs.length);\n  };\n\n  @Listen('atomic/tabRendered')\n  public resolveResult(event: CustomEvent<{}>) {\n    event.stopPropagation();\n    this.updatePopoverTabs();\n  }\n  public componentWillUpdate() {\n    this.updateTabsDisplay();\n  }\n\n  public componentDidLoad() {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.updateTabsDisplay();\n    });\n    this.resizeObserver.observe(this.host);\n  }\n\n  public disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  public render = () => {\n    return (\n      <Host class=\"overflow-x-clip overflow-y-visible\">\n        <slot></slot>\n        <atomic-tab-popover exportparts=\"popover-button, value-label, arrow-icon, backdrop overflow-tabs\">\n          {this.popoverTabs}\n        </atomic-tab-popover>\n      </Host>\n    );\n  };\n}\n","@import '../../../global/global.pcss';\n\n:host {\n  position: absolute;\n}\n\n:host(.visibility-hidden) {\n  visibility: hidden;\n}\n\n[part='overflow-tabs'] {\n  flex-direction: column;\n  max-width: 150px;\n\n  button {\n    text-align: start;\n  }\n}\n","import {\n  createPopperLite as createPopper,\n  preventOverflow,\n  Instance as PopperInstance,\n} from '@popperjs/core';\nimport {\n  Component,\n  h,\n  Listen,\n  State,\n  Element,\n  Host,\n  Method,\n} from '@stencil/core';\nimport ArrowBottomIcon from '../../../images/arrow-bottom-rounded.svg';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {Bindings} from '../../search/atomic-search-interface/atomic-search-interface';\nimport {Button} from '../stencil-button';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'atomic-tab-popover',\n  shadow: true,\n  styleUrl: 'tab-popover.pcss',\n})\nexport class TabPopover implements InitializableComponent {\n  @Element() private host!: HTMLElement;\n\n  @InitializeBindings() public bindings!: Bindings;\n\n  @State()\n  public show = false;\n\n  @State()\n  public error!: Error;\n\n  @State()\n  private isOpen = false;\n\n  private buttonRef!: HTMLElement;\n  private popupRef!: HTMLElement;\n  private popperInstance?: PopperInstance;\n  public popoverId = 'atomic-tab-popover';\n\n  public initialize() {}\n\n  private initializePopover() {\n    this.popupRef.classList.add('popover-nested');\n  }\n\n  @Listen('keydown')\n  public handleKeyDown(e: KeyboardEvent) {\n    if (!this.isOpen) {\n      return;\n    }\n\n    if (e.key === 'Escape') {\n      this.toggle();\n    } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      this.navigatePopover(e.key);\n    }\n  }\n\n  private getTabButtons(): HTMLButtonElement[] {\n    const slot = this.popupRef.children[0] as HTMLSlotElement;\n    return Array.from(slot.assignedElements())\n      .map((el) => (el as HTMLElement).querySelector('button'))\n      .filter((el): el is HTMLButtonElement => el !== null);\n  }\n\n  private getCurrentTabIndex(elements: HTMLButtonElement[]): number {\n    const MAX_SHADOW_DEPTH = 3;\n    let currentElement = document.activeElement;\n    let depth = 0;\n\n    while (currentElement?.shadowRoot && depth < MAX_SHADOW_DEPTH) {\n      currentElement = currentElement.shadowRoot.activeElement;\n      depth++;\n    }\n\n    if (!(currentElement instanceof HTMLButtonElement)) {\n      return -1;\n    }\n\n    return elements.indexOf(currentElement);\n  }\n\n  private navigatePopover(key: string): void {\n    const tabButtons = this.getTabButtons();\n    if (!tabButtons.length) {\n      return;\n    }\n\n    const currentIndex = this.getCurrentTabIndex(tabButtons);\n\n    const startIndex = currentIndex > -1 ? currentIndex : -1;\n\n    let nextIndex;\n    if (currentIndex === -1) {\n      nextIndex = key === 'ArrowDown' ? 0 : tabButtons.length - 1;\n    } else {\n      nextIndex =\n        key === 'ArrowDown'\n          ? (startIndex + 1) % tabButtons.length\n          : (startIndex - 1 + tabButtons.length) % tabButtons.length;\n    }\n\n    tabButtons[nextIndex]?.focus();\n  }\n\n  get slotElements() {\n    return this.host.children;\n  }\n\n  get hasTabs() {\n    return !!this.popupRef.children.length;\n  }\n\n  @Method()\n  public async toggle() {\n    this.isOpen = !this.isOpen;\n  }\n\n  @Method()\n  public async setButtonVisibility(isVisible: boolean) {\n    this.show = isVisible;\n  }\n\n  @Method()\n  public async closePopoverOnFocusOut(event: FocusEvent) {\n    const slot = this.popupRef.children[0] as HTMLSlotElement;\n    const assignedElements = slot.assignedElements() as HTMLElement[];\n\n    const isMovingToSlottedElement = assignedElements.some(\n      (element) =>\n        element === event.relatedTarget ||\n        element.contains(event.relatedTarget as Node)\n    );\n\n    if (isMovingToSlottedElement) {\n      return;\n    }\n\n    if (!this.popupRef.contains(event.relatedTarget as Node)) {\n      this.closePopover();\n    }\n  }\n\n  private closePopover() {\n    this.isOpen = false;\n  }\n\n  private renderDropdownButton() {\n    const label = this.bindings?.i18n.t('more');\n    const ariaLabel = this.bindings?.i18n.t('tab-popover', {label});\n    const buttonClasses = [\n      'relative',\n      'pb-1',\n      'mt-1',\n      'group',\n      'mr-6',\n      'font-semibold',\n    ];\n\n    return (\n      <Button\n        ref={(el) => (this.buttonRef = el!)}\n        style=\"text-transparent\"\n        onClick={() => this.toggle()}\n        part=\"popover-button\"\n        ariaExpanded={`${this.isOpen}`}\n        ariaLabel={ariaLabel}\n        ariaControls={this.popoverId}\n        class={`${buttonClasses.join(' ')}`}\n      >\n        <span\n          title={label}\n          part=\"value-label\"\n          class={\n            'group-hover:text-primary-light group-focus:text-primary mr-1.5 truncate'\n          }\n        >\n          {label}\n        </span>\n        <atomic-icon\n          part=\"arrow-icon\"\n          class={`group-hover:text-primary-light group-focus:text-primary ml-auto w-2 ${\n            this.isOpen ? 'rotate-180' : ''\n          }`}\n          icon={ArrowBottomIcon}\n        ></atomic-icon>\n      </Button>\n    );\n  }\n\n  private renderBackdrop() {\n    return (\n      <div\n        part=\"backdrop\"\n        class=\"fixed top-0 right-0 bottom-0 left-0 z-9998 cursor-pointer bg-transparent\"\n        onClick={() => this.toggle()}\n      ></div>\n    );\n  }\n\n  private renderPopover() {\n    return (\n      <div class={`relative ${this.isOpen ? 'z-9999' : ''}`}>\n        {this.renderDropdownButton()}\n        <ul\n          id={this.popoverId}\n          ref={(el) => (this.popupRef = el!)}\n          part=\"overflow-tabs\"\n          class={`bg-background border-neutral absolute rounded-lg border py-2 shadow-lg ${\n            this.isOpen ? 'flex' : 'hidden'\n          }`}\n        >\n          <slot></slot>\n        </ul>\n      </div>\n    );\n  }\n\n  public componentDidRender() {\n    if (this.popperInstance || !this.buttonRef || !this.popupRef) {\n      return;\n    }\n\n    this.popperInstance = createPopper(this.buttonRef, this.popupRef, {\n      placement: 'bottom-end',\n      modifiers: [preventOverflow],\n    });\n    this.initializePopover();\n  }\n\n  public componentDidUpdate() {\n    this.popperInstance?.forceUpdate();\n  }\n\n  public render() {\n    return (\n      <Host\n        onFocusout={(event: FocusEvent) => this.closePopoverOnFocusOut(event)}\n        class={this.show ? '' : 'visibility-hidden'}\n        aria-hidden={!this.show}\n      >\n        {this.renderPopover()}\n        {this.isOpen && this.renderBackdrop()}\n      </Host>\n    );\n  }\n}\n"],"version":3}