import '@polymer/paper-dialog/paper-dialog' ; import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn' ; import { html } from '@polymer/polymer/lib/utils/html-tag' ; export interface OutlineModalDialog extends Element { open ( title , text , buttons ) : Promise < number > ; close ( ) : void ; } Polymer ( { _template : html `
    <style include="cloud-install-styles"></style>
    <style>
      :host {
        margin: 0px;
      }
      h3 {
        margin-bottom: 0;
      }
      paper-button {
        color: var(--primary-green);
      }
    </style>
    <paper-dialog id="dialog" modal="">
      <h3 hidden\$="[[!title]]">[[title]]</h3>
      <div>[[text]]</div>
      <p class="buttons">
        <template is="dom-repeat" items="{{buttons}}">
          <paper-button dialog-dismiss="" on-tap="buttonTapped">[[item]]</paper-button>
        </template>
      </p>
    </paper-dialog>
` , is : 'outline-modal-dialog' , properties : { title : String , text : String , buttons : Array , } , open ( title , text , buttons ) { this . title = title ; this . text = text ; this . buttons = buttons ; this . $ . dialog . open ( ) ; return new Promise ( ( fulfill , reject ) => { this . fulfill = fulfill ; this . reject = reject ; } ) ; } , close ( ) { this . $ . dialog . close ( ) ; } , buttonTapped ( event ) { if ( ! this . fulfill ) { console . error ( 'outline-modal-dialog: this.fulfill not defined' ) ; return ; } this . fulfill ( event . model . index ) ; } } ) ;