@coveo/atomic 3.33.9-pre.f222963b65 → 3.33.9-pre.f81b55a35b

package/dist/atomic/{p-8f69b018.entry.js.map → p-5606819d.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["atomicSegmentedFacetScrollableCss","AtomicSegmentedFacetScrollableStyle0","AtomicSegmentedFacetScrollable","this","hideLeftArrow","hideRightArrow","initialize","searchStatus","buildSearchStatus","bindings","engine","componentDidLoad","observer","ResizeObserver","handleScroll","Array","from","host","children","forEach","el","observe","horizontalScrollRef","disconnectedCallback","disconnect","container","isScrollable","clientWidth","scrollWidth","isLeftEdge","Math","floor","scrollLeft","isRightEdge","ceil","slideHorizontally","direction","arrowsWidth","arrowRef","pixelsToScroll","renderArrow","hide","hiddenClass","transitionClass","h","part","class","Button","style","ariaHidden","tabIndex","onClick","ref","icon","ArrowLeftIcon","ArrowRightIcon","render","state","hasError","Hidden","__decorate","InitializeBindings","BindStateToController"],"sources":["src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.pcss?tag=atomic-segmented-facet-scrollable&encapsulation=shadow","src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@reference '../../../../utils/tailwind-utilities/hide-scrollbar.css';\n\n.wrapper-segmented {\n  @apply hide-scrollbar;\n}\n","import {\n  buildSearchStatus,\n  SearchStatus,\n  SearchStatusState,\n} from '@coveo/headless';\nimport {Component, Element, h, Listen, State} from '@stencil/core';\nimport {Bindings} from '../../../..';\nimport ArrowLeftIcon from '../../../../images/arrow-left-rounded.svg';\nimport ArrowRightIcon from '../../../../images/arrow-right-rounded.svg';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {Button} from '../../../common/stencil-button';\nimport {Hidden} from '../../../common/stencil-hidden';\n\ntype ArrowDirection = 'right' | 'left';\n\n/**\n * The 'atomic-segmented-facet-scrollable' component wraps around one or several 'atomic-segmented-facet' to provide horizontal scrolling capabilities.\n *\n * @slot default - One or multiple atomic-segmented-facet components\n *\n * @part scrollable-container - The wrapper for the entire component including the horizontal-scroll container and the arrow buttons.\n * @part horizontal-scroll - The scrollable container for the segmented facets.\n * @part left-arrow-wrapper - The wrapper for the arrow button & fade on the left.\n * @part right-arrow-wrapper - The wrapper for the arrow button & fade on the right.\n * @part left-arrow-button - The arrow button used to scroll on the left.\n * @part right-arrow-button - The arrow button used to scroll on the right.\n * @part left-arrow-icon - The arrow icon on the left.\n * @part right-arrow-icon - The arrow icon on the right.\n * @part left-fade - The white to transparent gradient on the left.\n * @part right-fade - The white to transparent gradient on the right.\n */\n@Component({\n  tag: 'atomic-segmented-facet-scrollable',\n  styleUrl: 'atomic-segmented-facet-scrollable.pcss',\n  shadow: true,\n})\nexport class AtomicSegmentedFacetScrollable implements InitializableComponent {\n  @Element() private host!: HTMLElement;\n  private horizontalScrollRef?: HTMLElement;\n  private arrowRef?: HTMLElement;\n  private observer!: ResizeObserver;\n\n  @InitializeBindings()\n  public bindings!: Bindings;\n  public searchStatus!: SearchStatus;\n  @BindStateToController('searchStatus')\n  @State()\n  public searchStatusState!: SearchStatusState;\n  @State()\n  public error!: Error;\n  @State() private hideLeftArrow = true;\n  @State() private hideRightArrow = true;\n\n  public initialize() {\n    this.searchStatus = buildSearchStatus(this.bindings.engine);\n  }\n\n  public componentDidLoad() {\n    this.observer = new ResizeObserver(() => {\n      this.handleScroll();\n    });\n\n    Array.from(this.host.children).forEach((el) => this.observer.observe(el));\n    this.observer.observe(this.horizontalScrollRef!);\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  @Listen('wheel')\n  @Listen('touchmove')\n  @Listen('keydown')\n  public handleScroll() {\n    if (!this.horizontalScrollRef) {\n      return;\n    }\n    const container = this.horizontalScrollRef;\n    const isScrollable = container.clientWidth < container.scrollWidth;\n\n    const isLeftEdge = Math.floor(container.scrollLeft) <= 0;\n    const isRightEdge =\n      Math.ceil(container.scrollLeft) >=\n      container.scrollWidth - container.clientWidth;\n\n    this.hideLeftArrow = !isScrollable || isLeftEdge;\n    this.hideRightArrow = !isScrollable || isRightEdge;\n  }\n\n  private slideHorizontally(direction: ArrowDirection) {\n    const container = this.horizontalScrollRef!;\n    const arrowsWidth = this.arrowRef!.clientWidth * 2;\n\n    const pixelsToScroll = (container.clientWidth - arrowsWidth) * 0.7;\n\n    const isLeftEdge = Math.floor(container.scrollLeft - pixelsToScroll) <= 0;\n    const isRightEdge =\n      Math.ceil(container.scrollLeft + pixelsToScroll) >=\n      container.scrollWidth - container.clientWidth;\n\n    this.hideLeftArrow = false;\n    this.hideRightArrow = false;\n\n    if (direction === 'left') {\n      container.scrollLeft -= pixelsToScroll;\n      this.hideLeftArrow = isLeftEdge;\n      return;\n    }\n\n    container.scrollLeft += pixelsToScroll;\n    this.hideRightArrow = isRightEdge;\n  }\n\n  private renderArrow(direction: ArrowDirection) {\n    const hide =\n      (direction === 'left' && this.hideLeftArrow) ||\n      (direction === 'right' && this.hideRightArrow);\n    const hiddenClass = hide ? 'invisible opacity-0' : '';\n    const transitionClass =\n      'transition-opacity transition-[visibility] ease-in-out duration-300';\n\n    return (\n      <div\n        part={`${direction}-arrow-wrapper`}\n        class={`${hiddenClass} ${transitionClass}`}\n      >\n        <Button\n          part={`${direction}-arrow-button`}\n          style=\"square-neutral\"\n          class={`absolute top-0 bottom-0 z-1 flex h-10 w-10 shrink-0 basis-8 items-center justify-center rounded ${\n            direction === 'left' ? 'left-0' : 'right-0'\n          }`}\n          ariaHidden=\"true\"\n          tabIndex=\"-1\"\n          onClick={() => this.slideHorizontally(direction)}\n          ref={(el) => (this.arrowRef = el)}\n        >\n          <atomic-icon\n            part={`${direction}-arrow-icon`}\n            class=\"w-3.5\"\n            icon={direction === 'left' ? ArrowLeftIcon : ArrowRightIcon}\n          ></atomic-icon>\n        </Button>\n        <div\n          part={`${direction}-fade`}\n          class={`from-background/60 pointer-events-none absolute top-0 z-0 h-10 w-20 ${\n            direction === 'left'\n              ? 'left-0 bg-linear-to-r'\n              : 'right-0 bg-linear-to-l'\n          }`}\n        ></div>\n      </div>\n    );\n  }\n\n  public render() {\n    if (this.searchStatus.state.hasError) {\n      return <Hidden></Hidden>;\n    }\n\n    return (\n      <div part=\"scrollable-container\" class=\"relative flex\">\n        {this.renderArrow('left')}\n        <div\n          part=\"horizontal-scroll\"\n          class=\"wrapper-segmented flex flex-row overflow-x-scroll scroll-smooth\"\n          ref={(el) => (this.horizontalScrollRef = el)}\n        >\n          <slot></slot>\n        </div>\n        {this.renderArrow('right')}\n      </div>\n    );\n  }\n}\n"],"mappings":"oWAAA,MAAMA,EAAoC,ytjEAC1C,MAAAC,EAAeD,E,iXCuCFE,EAA8B,M,yBAcxBC,KAAAC,cAAgB,KAChBD,KAAAE,eAAiB,K,yEADD,K,oBACC,I,CAE3B,UAAAC,GACLH,KAAKI,aAAeC,EAAkBL,KAAKM,SAASC,O,CAG/C,gBAAAC,GACLR,KAAKS,SAAW,IAAIC,gBAAe,KACjCV,KAAKW,cAAc,IAGrBC,MAAMC,KAAKb,KAAKc,KAAKC,UAAUC,SAASC,GAAOjB,KAAKS,SAASS,QAAQD,KACrEjB,KAAKS,SAASS,QAAQlB,KAAKmB,oB,CAG7B,oBAAAC,GACEpB,KAAKS,SAASY,Y,CAMT,YAAAV,GACL,IAAKX,KAAKmB,oBAAqB,CAC7B,M,CAEF,MAAMG,EAAYtB,KAAKmB,oBACvB,MAAMI,EAAeD,EAAUE,YAAcF,EAAUG,YAEvD,MAAMC,EAAaC,KAAKC,MAAMN,EAAUO,aAAe,EACvD,MAAMC,EACJH,KAAKI,KAAKT,EAAUO,aACpBP,EAAUG,YAAcH,EAAUE,YAEpCxB,KAAKC,eAAiBsB,GAAgBG,EACtC1B,KAAKE,gBAAkBqB,GAAgBO,C,CAGjC,iBAAAE,CAAkBC,GACxB,MAAMX,EAAYtB,KAAKmB,oBACvB,MAAMe,EAAclC,KAAKmC,SAAUX,YAAc,EAEjD,MAAMY,GAAkBd,EAAUE,YAAcU,GAAe,GAE/D,MAAMR,EAAaC,KAAKC,MAAMN,EAAUO,WAAaO,IAAmB,EACxE,MAAMN,EACJH,KAAKI,KAAKT,EAAUO,WAAaO,IACjCd,EAAUG,YAAcH,EAAUE,YAEpCxB,KAAKC,cAAgB,MACrBD,KAAKE,eAAiB,MAEtB,GAAI+B,IAAc,OAAQ,CACxBX,EAAUO,YAAcO,EACxBpC,KAAKC,cAAgByB,EACrB,M,CAGFJ,EAAUO,YAAcO,EACxBpC,KAAKE,eAAiB4B,C,CAGhB,WAAAO,CAAYJ,GAClB,MAAMK,EACHL,IAAc,QAAUjC,KAAKC,eAC7BgC,IAAc,SAAWjC,KAAKE,eACjC,MAAMqC,EAAcD,EAAO,sBAAwB,GACnD,MAAME,EACJ,sEAEF,OACEC,EAAA,OACEC,KAAM,GAAGT,kBACTU,MAAO,GAAGJ,KAAeC,KAEzBC,EAACG,EAAM,CACLF,KAAM,GAAGT,iBACTY,MAAM,iBACNF,MAAO,mGACLV,IAAc,OAAS,SAAW,YAEpCa,WAAW,OACXC,SAAS,KACTC,QAAS,IAAMhD,KAAKgC,kBAAkBC,GACtCgB,IAAMhC,GAAQjB,KAAKmC,SAAWlB,GAE9BwB,EAAA,eACEC,KAAM,GAAGT,eACTU,MAAM,QACNO,KAAMjB,IAAc,OAASkB,EAAgBC,KAGjDX,EAAA,OACEC,KAAM,GAAGT,SACTU,MAAO,uEACLV,IAAc,OACV,wBACA,6B,CAOP,MAAAoB,GACL,GAAIrD,KAAKI,aAAakD,MAAMC,SAAU,CACpC,OAAOd,EAACe,EAAM,K,CAGhB,OACEf,EAAA,OAAKC,KAAK,uBAAuBC,MAAM,iBACpC3C,KAAKqC,YAAY,QAClBI,EAAA,OACEC,KAAK,oBACLC,MAAM,kEACNM,IAAMhC,GAAQjB,KAAKmB,oBAAsBF,GAEzCwB,EAAA,cAEDzC,KAAKqC,YAAY,S,6BA/HjBoB,EAAA,CADNC,K,+BAKMD,EAAA,CAFNE,EAAsB,iB","ignoreList":[]}
+{"version":3,"names":["atomicSegmentedFacetScrollableCss","AtomicSegmentedFacetScrollableStyle0","AtomicSegmentedFacetScrollable","this","hideLeftArrow","hideRightArrow","initialize","searchStatus","buildSearchStatus","bindings","engine","componentDidLoad","observer","ResizeObserver","handleScroll","Array","from","host","children","forEach","el","observe","horizontalScrollRef","disconnectedCallback","disconnect","container","isScrollable","clientWidth","scrollWidth","isLeftEdge","Math","floor","scrollLeft","isRightEdge","ceil","slideHorizontally","direction","arrowsWidth","arrowRef","pixelsToScroll","renderArrow","hide","hiddenClass","transitionClass","h","part","class","Button","style","ariaHidden","tabIndex","onClick","ref","icon","ArrowLeftIcon","ArrowRightIcon","render","state","hasError","Hidden","__decorate","InitializeBindings","BindStateToController"],"sources":["src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.pcss?tag=atomic-segmented-facet-scrollable&encapsulation=shadow","src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx"],"sourcesContent":["@import '../../../../global/global.pcss';\n@reference '../../../../utils/tailwind-utilities/hide-scrollbar.css';\n\n.wrapper-segmented {\n  @apply hide-scrollbar;\n}\n","import {\n  buildSearchStatus,\n  SearchStatus,\n  SearchStatusState,\n} from '@coveo/headless';\nimport {Component, Element, h, Listen, State} from '@stencil/core';\nimport {Bindings} from '../../../..';\nimport ArrowLeftIcon from '../../../../images/arrow-left-rounded.svg';\nimport ArrowRightIcon from '../../../../images/arrow-right-rounded.svg';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {Button} from '../../../common/stencil-button';\nimport {Hidden} from '../../../common/stencil-hidden';\n\ntype ArrowDirection = 'right' | 'left';\n\n/**\n * The 'atomic-segmented-facet-scrollable' component wraps around one or several 'atomic-segmented-facet' to provide horizontal scrolling capabilities.\n *\n * @slot default - One or multiple atomic-segmented-facet components\n *\n * @part scrollable-container - The wrapper for the entire component including the horizontal-scroll container and the arrow buttons.\n * @part horizontal-scroll - The scrollable container for the segmented facets.\n * @part left-arrow-wrapper - The wrapper for the arrow button & fade on the left.\n * @part right-arrow-wrapper - The wrapper for the arrow button & fade on the right.\n * @part left-arrow-button - The arrow button used to scroll on the left.\n * @part right-arrow-button - The arrow button used to scroll on the right.\n * @part left-arrow-icon - The arrow icon on the left.\n * @part right-arrow-icon - The arrow icon on the right.\n * @part left-fade - The white to transparent gradient on the left.\n * @part right-fade - The white to transparent gradient on the right.\n */\n@Component({\n  tag: 'atomic-segmented-facet-scrollable',\n  styleUrl: 'atomic-segmented-facet-scrollable.pcss',\n  shadow: true,\n})\nexport class AtomicSegmentedFacetScrollable implements InitializableComponent {\n  @Element() private host!: HTMLElement;\n  private horizontalScrollRef?: HTMLElement;\n  private arrowRef?: HTMLElement;\n  private observer!: ResizeObserver;\n\n  @InitializeBindings()\n  public bindings!: Bindings;\n  public searchStatus!: SearchStatus;\n  @BindStateToController('searchStatus')\n  @State()\n  public searchStatusState!: SearchStatusState;\n  @State()\n  public error!: Error;\n  @State() private hideLeftArrow = true;\n  @State() private hideRightArrow = true;\n\n  public initialize() {\n    this.searchStatus = buildSearchStatus(this.bindings.engine);\n  }\n\n  public componentDidLoad() {\n    this.observer = new ResizeObserver(() => {\n      this.handleScroll();\n    });\n\n    Array.from(this.host.children).forEach((el) => this.observer.observe(el));\n    this.observer.observe(this.horizontalScrollRef!);\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  @Listen('wheel')\n  @Listen('touchmove')\n  @Listen('keydown')\n  public handleScroll() {\n    if (!this.horizontalScrollRef) {\n      return;\n    }\n    const container = this.horizontalScrollRef;\n    const isScrollable = container.clientWidth < container.scrollWidth;\n\n    const isLeftEdge = Math.floor(container.scrollLeft) <= 0;\n    const isRightEdge =\n      Math.ceil(container.scrollLeft) >=\n      container.scrollWidth - container.clientWidth;\n\n    this.hideLeftArrow = !isScrollable || isLeftEdge;\n    this.hideRightArrow = !isScrollable || isRightEdge;\n  }\n\n  private slideHorizontally(direction: ArrowDirection) {\n    const container = this.horizontalScrollRef!;\n    const arrowsWidth = this.arrowRef!.clientWidth * 2;\n\n    const pixelsToScroll = (container.clientWidth - arrowsWidth) * 0.7;\n\n    const isLeftEdge = Math.floor(container.scrollLeft - pixelsToScroll) <= 0;\n    const isRightEdge =\n      Math.ceil(container.scrollLeft + pixelsToScroll) >=\n      container.scrollWidth - container.clientWidth;\n\n    this.hideLeftArrow = false;\n    this.hideRightArrow = false;\n\n    if (direction === 'left') {\n      container.scrollLeft -= pixelsToScroll;\n      this.hideLeftArrow = isLeftEdge;\n      return;\n    }\n\n    container.scrollLeft += pixelsToScroll;\n    this.hideRightArrow = isRightEdge;\n  }\n\n  private renderArrow(direction: ArrowDirection) {\n    const hide =\n      (direction === 'left' && this.hideLeftArrow) ||\n      (direction === 'right' && this.hideRightArrow);\n    const hiddenClass = hide ? 'invisible opacity-0' : '';\n    const transitionClass =\n      'transition-opacity transition-[visibility] ease-in-out duration-300';\n\n    return (\n      <div\n        part={`${direction}-arrow-wrapper`}\n        class={`${hiddenClass} ${transitionClass}`}\n      >\n        <Button\n          part={`${direction}-arrow-button`}\n          style=\"square-neutral\"\n          class={`absolute top-0 bottom-0 z-1 flex h-10 w-10 shrink-0 basis-8 items-center justify-center rounded ${\n            direction === 'left' ? 'left-0' : 'right-0'\n          }`}\n          ariaHidden=\"true\"\n          tabIndex=\"-1\"\n          onClick={() => this.slideHorizontally(direction)}\n          ref={(el) => (this.arrowRef = el)}\n        >\n          <atomic-icon\n            part={`${direction}-arrow-icon`}\n            class=\"w-3.5\"\n            icon={direction === 'left' ? ArrowLeftIcon : ArrowRightIcon}\n          ></atomic-icon>\n        </Button>\n        <div\n          part={`${direction}-fade`}\n          class={`from-background/60 pointer-events-none absolute top-0 z-0 h-10 w-20 ${\n            direction === 'left'\n              ? 'left-0 bg-linear-to-r'\n              : 'right-0 bg-linear-to-l'\n          }`}\n        ></div>\n      </div>\n    );\n  }\n\n  public render() {\n    if (this.searchStatus.state.hasError) {\n      return <Hidden></Hidden>;\n    }\n\n    return (\n      <div part=\"scrollable-container\" class=\"relative flex\">\n        {this.renderArrow('left')}\n        <div\n          part=\"horizontal-scroll\"\n          class=\"wrapper-segmented flex flex-row overflow-x-scroll scroll-smooth\"\n          ref={(el) => (this.horizontalScrollRef = el)}\n        >\n          <slot></slot>\n        </div>\n        {this.renderArrow('right')}\n      </div>\n    );\n  }\n}\n"],"mappings":"4XAAA,MAAMA,EAAoC,ytjEAC1C,MAAAC,EAAeD,E,iXCuCFE,EAA8B,M,yBAcxBC,KAAAC,cAAgB,KAChBD,KAAAE,eAAiB,K,yEADD,K,oBACC,I,CAE3B,UAAAC,GACLH,KAAKI,aAAeC,EAAkBL,KAAKM,SAASC,O,CAG/C,gBAAAC,GACLR,KAAKS,SAAW,IAAIC,gBAAe,KACjCV,KAAKW,cAAc,IAGrBC,MAAMC,KAAKb,KAAKc,KAAKC,UAAUC,SAASC,GAAOjB,KAAKS,SAASS,QAAQD,KACrEjB,KAAKS,SAASS,QAAQlB,KAAKmB,oB,CAG7B,oBAAAC,GACEpB,KAAKS,SAASY,Y,CAMT,YAAAV,GACL,IAAKX,KAAKmB,oBAAqB,CAC7B,M,CAEF,MAAMG,EAAYtB,KAAKmB,oBACvB,MAAMI,EAAeD,EAAUE,YAAcF,EAAUG,YAEvD,MAAMC,EAAaC,KAAKC,MAAMN,EAAUO,aAAe,EACvD,MAAMC,EACJH,KAAKI,KAAKT,EAAUO,aACpBP,EAAUG,YAAcH,EAAUE,YAEpCxB,KAAKC,eAAiBsB,GAAgBG,EACtC1B,KAAKE,gBAAkBqB,GAAgBO,C,CAGjC,iBAAAE,CAAkBC,GACxB,MAAMX,EAAYtB,KAAKmB,oBACvB,MAAMe,EAAclC,KAAKmC,SAAUX,YAAc,EAEjD,MAAMY,GAAkBd,EAAUE,YAAcU,GAAe,GAE/D,MAAMR,EAAaC,KAAKC,MAAMN,EAAUO,WAAaO,IAAmB,EACxE,MAAMN,EACJH,KAAKI,KAAKT,EAAUO,WAAaO,IACjCd,EAAUG,YAAcH,EAAUE,YAEpCxB,KAAKC,cAAgB,MACrBD,KAAKE,eAAiB,MAEtB,GAAI+B,IAAc,OAAQ,CACxBX,EAAUO,YAAcO,EACxBpC,KAAKC,cAAgByB,EACrB,M,CAGFJ,EAAUO,YAAcO,EACxBpC,KAAKE,eAAiB4B,C,CAGhB,WAAAO,CAAYJ,GAClB,MAAMK,EACHL,IAAc,QAAUjC,KAAKC,eAC7BgC,IAAc,SAAWjC,KAAKE,eACjC,MAAMqC,EAAcD,EAAO,sBAAwB,GACnD,MAAME,EACJ,sEAEF,OACEC,EAAA,OACEC,KAAM,GAAGT,kBACTU,MAAO,GAAGJ,KAAeC,KAEzBC,EAACG,EAAM,CACLF,KAAM,GAAGT,iBACTY,MAAM,iBACNF,MAAO,mGACLV,IAAc,OAAS,SAAW,YAEpCa,WAAW,OACXC,SAAS,KACTC,QAAS,IAAMhD,KAAKgC,kBAAkBC,GACtCgB,IAAMhC,GAAQjB,KAAKmC,SAAWlB,GAE9BwB,EAAA,eACEC,KAAM,GAAGT,eACTU,MAAM,QACNO,KAAMjB,IAAc,OAASkB,EAAgBC,KAGjDX,EAAA,OACEC,KAAM,GAAGT,SACTU,MAAO,uEACLV,IAAc,OACV,wBACA,6B,CAOP,MAAAoB,GACL,GAAIrD,KAAKI,aAAakD,MAAMC,SAAU,CACpC,OAAOd,EAACe,EAAM,K,CAGhB,OACEf,EAAA,OAAKC,KAAK,uBAAuBC,MAAM,iBACpC3C,KAAKqC,YAAY,QAClBI,EAAA,OACEC,KAAK,oBACLC,MAAM,kEACNM,IAAMhC,GAAQjB,KAAKmB,oBAAsBF,GAEzCwB,EAAA,cAEDzC,KAAKqC,YAAY,S,6BA/HjBoB,EAAA,CADNC,K,+BAKMD,EAAA,CAFNE,EAAsB,iB","ignoreList":[]}