{"version":3,"names":["customProductsPerPageCss","CustomProductsPerPageStyle0","CustomProductsPerPage","this","choiceOptions","connectedCallback","waitForAtomic","validateChoices","commerceBindings","initializeBindings","host","controller","_a","interfaceElement","type","buildSearch","_b","engine","buildProductListing","_c","selected","initial","pagination","_d","subscribe","paginationState","state","pageSize","error","_choices","choices","split","map","c","parseInt","Array","isArray","console","handleChoice","e","selectedIndex","target","paginationActions","loadPaginationActions","dispatch","selectPage","page","setPageSize","render","length","totalPages","h","Host","key","htmlFor","id","onChange","choice","value"],"sources":["src/components/custom-products-per-page/custom-products-per-page.css?tag=custom-products-per-page&encapsulation=shadow","src/components/custom-products-per-page/custom-products-per-page.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n  margin-top: 0 !important;\r\n}\r\n\r\n:host div {\r\n  display: grid;\r\n}\r\n\r\n:host div label {\r\n  font-weight: bold;\r\n}\r\n\r\n:host div select {\r\n  color: var(--main-color);\r\n  padding: 0.5rem 2.5rem 0.5rem 0.75rem;\r\n  border: 1px solid #ddd;\r\n  border-radius: 0;\r\n}\r\n","import { CommerceBindings, initializeBindings } from '@coveo/atomic';\r\nimport { Component, Host, h, Element, Prop, State } from '@stencil/core';\r\nimport { waitForAtomic } from '../../utils/atomic';\r\nimport { buildProductListing, buildSearch, loadPaginationActions, Pagination, PaginationState } from '@coveo/headless/commerce';\r\n\r\n@Component({\r\n  tag: 'custom-products-per-page',\r\n  styleUrl: 'custom-products-per-page.css',\r\n  shadow: true,\r\n})\r\nexport class CustomProductsPerPage {\r\n\r\n  @Prop({reflect: true, mutable: false}) initial:number = 32;\r\n\r\n  @Prop({reflect: true, mutable: false}) choices:any;\r\n\r\n  private choiceOptions:number[] = [16,20,32,64];\r\n\r\n  private selected?:number;\r\n\r\n  private commerceBindings?: CommerceBindings;\r\n\r\n  private pagination?: Pagination;\r\n\r\n  @State() private paginationState?: PaginationState;\r\n\r\n  @Element() private host!: Element;\r\n\r\n  public async connectedCallback() {\r\n    try {\r\n      await waitForAtomic();\r\n      this.validateChoices();\r\n      this.commerceBindings = await initializeBindings(this.host);\r\n      let controller = this.commerceBindings?.interfaceElement.type == \"search\"? \r\n                          buildSearch(this.commerceBindings?.engine) :\r\n                            buildProductListing(this.commerceBindings?.engine);\r\n      this.selected = this.initial;\r\n      this.pagination = controller.pagination();\r\n\r\n      this.pagination?.subscribe(() => {\r\n        this.paginationState = this.pagination?.state;\r\n        this.selected = this.paginationState?.pageSize;\r\n      });\r\n      \r\n    } catch (error) {\r\n      \r\n    }\r\n  }\r\n\r\n  private validateChoices() {\r\n    try {\r\n      let _choices = this.choices?.split(',').map((c: string) => parseInt(c));\r\n      if (Array.isArray(_choices)) {\r\n        this.choiceOptions = _choices;\r\n      }\r\n    } catch (error) {\r\n      console.error('CustomProductsPerPage:: specified choices invalid. Using defaults');\r\n    }\r\n  }\r\n\r\n  private handleChoice(e:Event) {\r\n    let selectedIndex = (e.target as any)?.selectedIndex;\r\n    this.selected = this.choiceOptions[selectedIndex];\r\n    const paginationActions = loadPaginationActions(this.commerceBindings?.engine!);\r\n    this.commerceBindings?.engine.dispatch(paginationActions.selectPage({ page: 0 }));\r\n    this.pagination?.setPageSize(this.selected);\r\n    // this.commerceBindings?.store.state.resultList?.focusOnFirstResultAfterNextSearch(); //since we always want to scroll to the top of the page\r\n  }\r\n\r\n  render() {\r\n    if(this.choiceOptions && this.choiceOptions?.length>0 && this.paginationState && this.paginationState.totalPages>1) {\r\n      return (\r\n        <Host>\r\n          <div>\r\n            <label htmlFor=\"products-per-page\">Page Size</label>\r\n            <select id=\"products-per-page\" onChange={(e:Event) => this.handleChoice(e)}>\r\n              {this.choiceOptions.map((choice:number) => {\r\n                return (<option value={choice} selected={this.selected == choice ? true : false}>{choice}</option>)\r\n              })}\r\n            </select>\r\n          </div>\r\n        </Host>\r\n      );  \r\n    }\r\n  }\r\n}\r\n"],"mappings":"wVAAA,MAAMA,EAA2B,2NACjC,MAAAC,EAAeD,E,MCSFE,EAAqB,M,yBAMxBC,KAAAC,cAAyB,CAAC,GAAG,GAAG,GAAG,I,aAJa,G,sDAgBjD,uBAAMC,G,YACX,UACQC,IACNH,KAAKI,kBACLJ,KAAKK,uBAAyBC,EAAmBN,KAAKO,MACtD,IAAIC,IAAaC,EAAAT,KAAKK,oBAAgB,MAAAI,SAAA,SAAAA,EAAEC,iBAAiBC,OAAQ,SAC7CC,GAAYC,EAAAb,KAAKK,oBAAgB,MAAAQ,SAAA,SAAAA,EAAEC,QACjCC,GAAoBC,EAAAhB,KAAKK,oBAAgB,MAAAW,SAAA,SAAAA,EAAEF,QACjEd,KAAKiB,SAAWjB,KAAKkB,QACrBlB,KAAKmB,WAAaX,EAAWW,cAE7BC,EAAApB,KAAKmB,cAAU,MAAAC,SAAA,SAAAA,EAAEC,WAAU,K,QACzBrB,KAAKsB,iBAAkBb,EAAAT,KAAKmB,cAAU,MAAAV,SAAA,SAAAA,EAAEc,MACxCvB,KAAKiB,UAAWJ,EAAAb,KAAKsB,mBAAe,MAAAT,SAAA,SAAAA,EAAEW,QAAQ,G,CAGhD,MAAOC,G,EAKH,eAAArB,G,MACN,IACE,IAAIsB,GAAWjB,EAAAT,KAAK2B,WAAO,MAAAlB,SAAA,SAAAA,EAAEmB,MAAM,KAAKC,KAAKC,GAAcC,SAASD,KACpE,GAAIE,MAAMC,QAAQP,GAAW,CAC3B1B,KAAKC,cAAgByB,C,EAEvB,MAAOD,GACPS,QAAQT,MAAM,oE,EAIV,YAAAU,CAAaC,G,YACnB,IAAIC,GAAgB5B,EAAC2B,EAAEE,UAAc,MAAA7B,SAAA,SAAAA,EAAE4B,cACvCrC,KAAKiB,SAAWjB,KAAKC,cAAcoC,GACnC,MAAME,EAAoBC,GAAsB3B,EAAAb,KAAKK,oBAAgB,MAAAQ,SAAA,SAAAA,EAAEC,SACvEE,EAAAhB,KAAKK,oBAAgB,MAAAW,SAAA,SAAAA,EAAEF,OAAO2B,SAASF,EAAkBG,WAAW,CAAEC,KAAM,MAC5EvB,EAAApB,KAAKmB,cAAU,MAAAC,SAAA,SAAAA,EAAEwB,YAAY5C,KAAKiB,S,CAIpC,MAAA4B,G,MACE,GAAG7C,KAAKC,iBAAiBQ,EAAAT,KAAKC,iBAAa,MAAAQ,SAAA,SAAAA,EAAEqC,QAAO,GAAK9C,KAAKsB,iBAAmBtB,KAAKsB,gBAAgByB,WAAW,EAAG,CAClH,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,4CACEF,EAAA,SAAAE,IAAA,2CAAOC,QAAQ,qBAAmB,aAClCH,EAAA,UAAAE,IAAA,2CAAQE,GAAG,oBAAoBC,SAAWjB,GAAYpC,KAAKmC,aAAaC,IACrEpC,KAAKC,cAAc4B,KAAKyB,GACfN,EAAA,UAAQO,MAAOD,EAAQrC,SAAUjB,KAAKiB,UAAYqC,EAAS,KAAO,OAAQA,O","ignoreList":[]}