import { CSSResultArray , html , PropertyValues , TemplateResult , } from '@spectrum-web-components/base' ; import { property , query , } from '@spectrum-web-components/base/src/decorators.js' ; import { ifDefined } from '@spectrum-web-components/base/src/directives.js' ; import { Textfield } from '@spectrum-web-components/textfield' ; import '@spectrum-web-components/button/sp-clear-button.js' ; import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js' ; import searchStyles from './search.css.js' ; const stopPropagation = ( event ) : void => event . stopPropagation ( ) ; element slot slot fires export class Search extends Textfield { public static get styles ( ) : CSSResultArray { return [ ... super . styles , searchStyles ] ; } @ property ( ) public action = '' ; @ property ( ) public label = 'Search' ; @ property ( ) public method ? : 'GET' | 'POST' | 'dialog' ; @ property ( ) public placeholder = 'Search' ; @ query ( '#form' ) public form ! : HTMLFormElement ; private handleSubmit ( event ) { const applyDefault = this . dispatchEvent ( new Event ( 'submit' , { cancelable : true , bubbles : true , } ) ) ; if ( ! applyDefault ) { event . preventDefault ( ) ; } } private handleKeydown ( event ) { const { code } = event ; if ( ! this . value || code !== 'Escape' ) { return ; } this . reset ( ) ; } public async reset ( ) { this . value = '' ; await this . updateComplete ; this . focusElement . dispatchEvent ( new InputEvent ( 'input' , { bubbles : true , composed : true , } ) ) ; this . focusElement . dispatchEvent ( new InputEvent ( 'change' , { bubbles : true , } ) ) ; } protected renderField ( ) { return html `
            <form
                action=${ this . action }
                id="form"
                method=${ ifDefined ( this . method ) }
                @submit=${ this . handleSubmit }
                @reset=${ this . reset }
                @keydown=${ this . handleKeydown }
            >
                <sp-icon-magnify
                    class="icon magnifier icon-workflow"
                ></sp-icon-magnify>
                ${ super . renderField ( ) }
                ${ this . value ? html `
                          <sp-clear-button
                              id="button"
                              label="Reset"
                              tabindex="-1"
                              type="reset"
                              @keydown=${ stopPropagation }
                          ></sp-clear-button>
                      ` : html `` }
            </form>
        ` ; } public firstUpdated ( changedProperties ) { super . firstUpdated ( changedProperties ) ; this . inputElement . setAttribute ( 'type' , 'search' ) ; } public updated ( changedProperties ) { super . updated ( changedProperties ) ; this . multiline = false ; } }