import { customElement , html , internalProperty , property , query , TemplateResult , } from 'lit-element' ; import '@material/mwc-switch' ; import { Switch } from '@material/mwc-switch' ; import { Select } from '@material/mwc-select' ; /** A potentially `nullable` `Select`.
 *
 * NB: Use `maybeValue: string | null` instead of `value` if `nullable`!*/ @ customElement ( 'wizard-select' ) export class WizardSelect extends Select { /** Whether [[`maybeValue`]] may be `null` */ @ property ( { type : Boolean } ) nullable = false ; private isNull = false ; @ internalProperty ( ) private get null ( ) : boolean { return this . nullable && this . isNull ; } private set null ( value ) { if ( ! this . nullable || value === this . isNull ) return ; this . isNull = value ; if ( this . null ) this . disable ( ) ; else this . enable ( ) ; } /** Replacement for `value`, can only be `null` if [[`nullable`]]. */ @ property ( { type : String } ) get maybeValue ( ) : string | null { return this . null ? null : this . value ; } set maybeValue ( value ) { if ( value === null ) this . null = true ; else { this . null = false ; this . value = value ; } } /** The default `value` displayed if [[`maybeValue`]] is `null`. */ @ property ( { type : String } ) defaultValue = '' ; /** Additional values that cause validation to fail. */ @ property ( { type : Array } ) reservedValues : string [ ] = [ ] ; @ query ( 'mwc-switch' ) nullSwitch ? : Switch ; private nulled : string | null = null ; private enable ( ) { if ( this . nulled === null ) return ; this . value = this . nulled ; this . nulled = null ; this . disabled = false ; } private disable ( ) { if ( this . nulled !== null ) return ; this . nulled = this . value ; this . value = this . defaultValue ; this . disabled = true ; } async firstUpdated ( ) { await super . firstUpdated ( ) ; } checkValidity ( ) { if ( this . nullable && ! this . nullSwitch ?. checked ) return true ; return super . checkValidity ( ) ; } renderSwitch ( ) { if ( this . nullable ) { return html `<mwc-switch
        style="margin-left: 12px;"
        ?checked=${ ! this . null }
        @change=${ ( ) => { this . null = ! this . nullSwitch ! . checked ; } }
      ></mwc-switch>` ; } return html `` ; } render ( ) { return html `
      <div style="display: flex; flex-direction: row;">
        <div style="flex: auto;">${ super . render ( ) }</div>
        <div style="display: flex; align-items: center; height: 56px;">
          ${ this . renderSwitch ( ) }
        </div>
      </div>
    ` ; } }