import './cloud-install-styles' ; import './outline-server-settings-styles' ; import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn' ; import { html } from '@polymer/polymer/lib/utils/html-tag' ; Polymer ( { _template : html `
    <style include="cloud-install-styles"></style>
    <style include="outline-server-settings-styles"></style>
    <style>
      #container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 545px;
      }

      paper-input {
        width: 60%;
      }

      paper-button {
        height: 36px;
        min-width: 83px;
        text-align: center;
      }

      paper-button[disabled] {
        color: rgba(255, 255, 255, 0.3);
      }

      #saveButton {
        background: var(--primary-green);
        color: #fff;
      }

      #cancelButton {
        color: #fff;
      }

      #saveButton[disabled] {
        background-color: rgba(255, 255, 255, 0.12);
      }

      #cancelButton[disabled] {
        background-color: rgba(0, 0, 0, 0);
      }
    </style>
    <div id="container" hidden\$="[[!visible]]">
      <!-- We use on-focus instead of on-tap to handle the case where text is selected but the tap event isn't fired. -->
      <paper-input id="input" readonly\$="[[!editable]]" allowed-pattern="[[allowedPattern]]" value="[[value]]" label="[[label]]" maxlength="[[maxLength]]" on-focus="_enterEditingState" on-keyup="_onKeyUp" always-float-label="">
      </paper-input>
      <paper-button id="cancelButton" hidden\$="[[!_showButtons]]" disabled\$="[[!_enableButtons]]" on-tap="_cancel">
        [[localize('cancel')]]
      </paper-button>
      <paper-button id="saveButton" hidden\$="[[!_showButtons]]" disabled\$="[[!_enableButtons]]" on-tap="_save">
        [[localize('save')]]
      </paper-button>
    </div>
` , is : 'outline-validated-input' , properties : { editable : { type : Boolean , value : false } , visible : { type : Boolean , value : false } , label : { type : String , value : null } , allowedPattern : { type : String , value : '.*' } , maxLength : { type : Number , value : Number . POSITIVE_INFINITY } , value : { type : String , value : null } , clientSideValidator : { type : Function , value : ( ) => { return ( ) => '' ; } , } , _showButtons : { type : Boolean , value : false } , _enableButtons : { type : Boolean , value : false } , event : { type : String , value : null } , localize : { type : Function } , } , _onKeyUp ( e ) { const input = this . $ . input ; if ( e . key === 'Escape' ) { this . _cancel ( ) ; input . blur ( ) ; return ; } else if ( e . key === 'Enter' ) { if ( ! input . invalid ) { this . _save ( ) ; input . blur ( ) ; } return ; } const validationError = this . clientSideValidator ( input . value ) ; if ( validationError ) { input . invalid = true ; this . $ . saveButton . disabled = true ; input . errorMessage = validationError ; } else { input . invalid = false ; this . $ . saveButton . disabled = false ; } } , _cancel ( ) { const input = this . $ . input ; input . value = this . value ; input . invalid = false ; this . _showButtons = false ; } , _save ( ) { const input = this . $ . input ; const value = input . value ; if ( value === this . value ) { this . _cancel ( ) ; return ; } this . $ . cancelButton . disabled = true ; this . $ . saveButton . disabled = true ; input . readonly = true ; input . invalid = false ; const numberValue = Number ( value ) ; const typedValue = Number . isNaN ( numberValue ) ? value : numberValue ; this . fire ( this . event , { validatedInput : typedValue , ui : this , } ) ; } , _enterEditingState ( ) { if ( ! this . editable ) { return ; } this . _showButtons = true ; this . $ . cancelButton . disabled = false ; this . $ . saveButton . disabled = this . $ . input . invalid ; } , enterSavedState ( ) { const input = this . $ . input ; this . value = input . value ; this . _showButtons = false ; input . readonly = false ; } , enterErrorState ( message ) { const input = this . $ . input ; this . _enableButtons = true ; input . errorMessage = message ; input . invalid = true ; input . readonly = false ; input . focus ( ) ; } } ) ;