{"version":3,"names":["CloseIcon","h","xmlns","width","height","viewBox","fill","stroke","x1","y1","x2","y2","NextIcon","points","PrevIcon","SearchIcon","class","cx","cy","r","prestoSearchBarUiCss","PrestoSearchBarUiStyle0","PrestoSearchBarUi","handleSearch","e","preventDefault","this","value","target","handleFocus","focused","handleBlur","componentDidLoad","handlePlaceholderSize","setTimeout","placeholderWidth","placeholderElement","offsetWidth","handleValueChange","search","emit","watchPropHandler","focus","focusChange","handleClick","input","handleClear","stopImmediatePropagation","handleNext","nextNav","handlePrevious","previousNav","render","key","hasNavigation","onClick","ref","el","placeholder","type","style","onInput","onFocus","onBlur"],"sources":["src/components/core/features/presto-search-bar/ui/icons.tsx","src/components/core/features/presto-search-bar/ui/presto-search-bar-ui.scss?tag=presto-search-bar-ui&encapsulation=shadow","src/components/core/features/presto-search-bar/ui/presto-search-bar-ui.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nexport const CloseIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n  >\n    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n  </svg>\n);\nexport const NextIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n  >\n    <polyline points=\"9 18 15 12 9 6\"></polyline>\n  </svg>\n);\n\nexport const PrevIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n  >\n    <polyline points=\"15 18 9 12 15 6\"></polyline>\n  </svg>\n);\n\nexport const SearchIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    class=\"search-bar-icon\"\n  >\n    <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n  </svg>\n);\n",":host {\n  display: block;\n}\n\n.search-bar {\n  position: relative;\n  font-family: var(\n    --plyr-font-family,\n    'San Francisco',\n    -apple-system,\n    BlinkMacSystemFont,\n    '.SFNSText-Regular',\n    Avenir,\n    'Avenir Next',\n    'Helvetica Neue',\n    'Segoe UI',\n    Helvetica,\n    Arial,\n    sans-serif\n  );\n  font-size: 16px;\n  color: #ddd;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  > * {\n    height: 41px;\n  }\n\n  &__controls {\n    display: flex;\n    align-items: stretch;\n    position: absolute;\n    right: 0;\n\n    svg {\n      display: block;\n      width: 25px;\n      height: 25px;\n    }\n  }\n\n  &__placeholder {\n    height: 0;\n    font-weight: bold;\n    visibility: hidden;\n    position: absolute;\n    transition: none;\n    white-space: nowrap;\n  }\n\n  input {\n    z-index: 1;\n    box-sizing: border-box;\n    background: transparent;\n    border: none;\n    color: #fff;\n    font-size: 16px;\n    transition: width 0.25s ease;\n    outline: none;\n    padding: 0;\n\n    &::placeholder {\n      color: #fff;\n    }\n  }\n\n  &__control-prev,\n  &__control-next,\n  &__control-clear {\n    opacity: 0;\n    visibility: hidden;\n    transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);\n    transform-origin: center center;\n    padding: 0;\n    border: 0;\n    background: 0;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    z-index: 1;\n  }\n\n  &__control-clear {\n    transform: scale(0.5);\n  }\n\n  &--is-active {\n    input {\n      width: 300px !important;\n      padding-right: 26px;\n    }\n\n    &.search-bar--has-navigation {\n      .search-bar__control-prev,\n      .search-bar__control-next {\n        opacity: 1;\n        visibility: visible;\n      }\n      input {\n        padding-right: 80px;\n      }\n    }\n\n    .search-bar__control-clear {\n      transform: scale(1);\n      opacity: 1;\n      visibility: visible;\n      cursor: pointer;\n    }\n  }\n\n  &__icon {\n    width: 20px;\n    height: 20px;\n    flex-grow: 0;\n    flex-shrink: 0;\n    cursor: pointer;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { CloseIcon, PrevIcon, NextIcon, SearchIcon } from './icons';\n\n@Component({\n  tag: 'presto-search-bar-ui',\n  styleUrl: 'presto-search-bar-ui.scss',\n  shadow: true,\n})\nexport class PrestoSearchBarUi {\n  private placeholderElement: HTMLDivElement;\n  private input: HTMLInputElement;\n\n  /** The value for the search. */\n  @Prop({ mutable: true }) value: string;\n  /** The placeholder. */\n  @Prop() placeholder: string;\n  /** Has results */\n  @Prop() hasNavigation: boolean;\n\n  /** Is this focused */\n  @State() focused: boolean;\n  /** The placeholder width. */\n  @State() placeholderWidth: number;\n\n  /** Previous is navigated.*/\n  @Event() previousNav: EventEmitter<void>;\n  /** Next is navigated */\n  @Event() nextNav: EventEmitter<void>;\n  /** Search is performed */\n  @Event() search: EventEmitter<string>;\n  /** Search is performed */\n  @Event() focusChange: EventEmitter<boolean>;\n\n  /** Handle the search */\n  handleSearch(e) {\n    e.preventDefault();\n    this.value = e.target.value;\n  }\n\n  /** Handle the focus of the input. */\n  handleFocus() {\n    this.focused = true;\n  }\n\n  handleBlur() {\n    if (!this.value) {\n      this.focused = false;\n    }\n  }\n\n  componentDidLoad() {\n    this.handlePlaceholderSize();\n  }\n\n  @Watch('placeholder')\n  handlePlaceholderSize() {\n    setTimeout(() => {\n      this.placeholderWidth = this.placeholderElement.offsetWidth;\n    }, 50);\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.search.emit(this.value);\n  }\n\n  @Watch('focused')\n  watchPropHandler(focus: boolean) {\n    this.focusChange.emit(focus);\n  }\n\n  handleClick() {\n    this.focused = true;\n    setTimeout(() => {\n      this.input.focus();\n    }, 50);\n  }\n\n  handleClear(e) {\n    e.preventDefault();\n    e.stopImmediatePropagation();\n    this.value = '';\n    this.focused = false;\n    return false;\n  }\n\n  handleNext(e) {\n    e.stopImmediatePropagation();\n    e.preventDefault();\n    this.nextNav.emit();\n  }\n\n  handlePrevious(e) {\n    e.stopImmediatePropagation();\n    e.preventDefault();\n    this.previousNav.emit();\n  }\n\n  /**\n   * Rendering the component\n   */\n  render() {\n    return (\n      <div\n        class={{\n          'search-bar': true,\n          'search-bar--is-active': this.focused || !!this.value,\n          'search-bar--has-navigation': this.hasNavigation,\n        }}\n        onClick={() => this.handleClick()}\n      >\n        <span class=\"search-bar__search-icon search-bar__icon\">\n          <SearchIcon />\n        </span>\n\n        <div class=\"search-bar__placeholder\" ref={el => (this.placeholderElement = el as HTMLDivElement)} aria-hidden>\n          {this.placeholder}\n        </div>\n\n        <input\n          type=\"text\"\n          value={this.value}\n          placeholder={this.placeholder}\n          ref={el => (this.input = el as HTMLInputElement)}\n          style={{ width: (this.placeholderWidth || 0) + 'px' }}\n          onInput={e => this.handleSearch(e)}\n          onFocus={() => this.handleFocus()}\n          onBlur={() => this.handleBlur()}\n        />\n\n        <span class=\"search-bar__controls\">\n          <span class=\"search-bar__control-prev\" onClick={e => this.handlePrevious(e)}>\n            <PrevIcon />\n          </span>\n          <span class=\"search-bar__control-next\" onClick={e => this.handleNext(e)}>\n            <NextIcon />\n          </span>\n          <div class=\"search-bar__control-clear\" onClick={e => this.handleClear(e)}>\n            <CloseIcon />\n          </div>\n        </span>\n      </div>\n    );\n  }\n}\n"],"mappings":"kDACO,MAAMA,EAAY,IACvBC,EAAA,OACEC,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,kBACN,SAEhBN,EAAA,QAAMO,GAAG,KAAKC,GAAG,IAAIC,GAAG,IAAIC,GAAG,OAC/BV,EAAA,QAAMO,GAAG,IAAIC,GAAG,IAAIC,GAAG,KAAKC,GAAG,QAG5B,MAAMC,EAAW,IACtBX,EAAA,OACEC,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,kBACN,SAEhBN,EAAA,YAAUY,OAAO,oBAId,MAAMC,EAAW,IACtBb,EAAA,OACEC,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,kBACN,SAEhBN,EAAA,YAAUY,OAAO,qBAId,MAAME,EAAa,IACxBd,EAAA,OACEC,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,kBACN,QAChBS,MAAM,mBAENf,EAAA,UAAQgB,GAAG,KAAKC,GAAG,KAAKC,EAAE,MAC1BlB,EAAA,QAAMO,GAAG,KAAKC,GAAG,KAAKC,GAAG,QAAQC,GAAG,WC/DxC,MAAMS,EAAuB,ysDAC7B,MAAAC,EAAeD,E,MCOFE,EAAiB,M,+SA0B5B,YAAAC,CAAaC,GACXA,EAAEC,iBACFC,KAAKC,MAAQH,EAAEI,OAAOD,K,CAIxB,WAAAE,GACEH,KAAKI,QAAU,I,CAGjB,UAAAC,GACE,IAAKL,KAAKC,MAAO,CACfD,KAAKI,QAAU,K,EAInB,gBAAAE,GACEN,KAAKO,uB,CAIP,qBAAAA,GACEC,YAAW,KACTR,KAAKS,iBAAmBT,KAAKU,mBAAmBC,WAAW,GAC1D,G,CAIL,iBAAAC,GACEZ,KAAKa,OAAOC,KAAKd,KAAKC,M,CAIxB,gBAAAc,CAAiBC,GACfhB,KAAKiB,YAAYH,KAAKE,E,CAGxB,WAAAE,GACElB,KAAKI,QAAU,KACfI,YAAW,KACTR,KAAKmB,MAAMH,OAAO,GACjB,G,CAGL,WAAAI,CAAYtB,GACVA,EAAEC,iBACFD,EAAEuB,2BACFrB,KAAKC,MAAQ,GACbD,KAAKI,QAAU,MACf,OAAO,K,CAGT,UAAAkB,CAAWxB,GACTA,EAAEuB,2BACFvB,EAAEC,iBACFC,KAAKuB,QAAQT,M,CAGf,cAAAU,CAAe1B,GACbA,EAAEuB,2BACFvB,EAAEC,iBACFC,KAAKyB,YAAYX,M,CAMnB,MAAAY,GACE,OACEnD,EAAA,OAAAoD,IAAA,2CACErC,MAAO,CACL,aAAc,KACd,wBAAyBU,KAAKI,WAAaJ,KAAKC,MAChD,6BAA8BD,KAAK4B,eAErCC,QAAS,IAAM7B,KAAKkB,eAEpB3C,EAAA,QAAAoD,IAAA,2CAAMrC,MAAM,4CACVf,EAACc,EAAU,CAAAsC,IAAA,8CAGbpD,EAAA,OAAAoD,IAAA,2CAAKrC,MAAM,0BAA0BwC,IAAKC,GAAO/B,KAAKU,mBAAqBqB,EAAqB,oBAC7F/B,KAAKgC,aAGRzD,EAAA,SAAAoD,IAAA,2CACEM,KAAK,OACLhC,MAAOD,KAAKC,MACZ+B,YAAahC,KAAKgC,YAClBF,IAAKC,GAAO/B,KAAKmB,MAAQY,EACzBG,MAAO,CAAEzD,OAAQuB,KAAKS,kBAAoB,GAAK,MAC/C0B,QAASrC,GAAKE,KAAKH,aAAaC,GAChCsC,QAAS,IAAMpC,KAAKG,cACpBkC,OAAQ,IAAMrC,KAAKK,eAGrB9B,EAAA,QAAAoD,IAAA,2CAAMrC,MAAM,wBACVf,EAAA,QAAAoD,IAAA,2CAAMrC,MAAM,2BAA2BuC,QAAS/B,GAAKE,KAAKwB,eAAe1B,IACvEvB,EAACa,EAAQ,CAAAuC,IAAA,8CAEXpD,EAAA,QAAAoD,IAAA,2CAAMrC,MAAM,2BAA2BuC,QAAS/B,GAAKE,KAAKsB,WAAWxB,IACnEvB,EAACW,EAAQ,CAAAyC,IAAA,8CAEXpD,EAAA,OAAAoD,IAAA,2CAAKrC,MAAM,4BAA4BuC,QAAS/B,GAAKE,KAAKoB,YAAYtB,IACpEvB,EAACD,EAAS,CAAAqD,IAAA,+C"}