{"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":"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"}