hirst-confirm-dialog.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="hirst-dialog-base.html">

<!--
`hirst-confirm-dialog` renders a confirm dialog instance based on `hirst-dialog-base`.
It gives `confirm` and `dismiss` button as default.

### Example

```html
<hirst-confirm-dialog
  title="Congratulations"
  confirm="OK"
  dismiss="Cancel">
  It works!
</hirst-confirm-dialog>
```

@demo demo/index.html
-->
<dom-module id="hirst-confirm-dialog">
  <template>
    <style>
      :host {
        display: block;
      }

      #confirmButtons {
        margin: auto;
        margin-top: 5%;
        @apply --hirst-dialog-buttons;
      }

      #confirmButtons > paper-button {
        text-transform: none;
        @apply --hirst-dialog-button;
        color: var(--hirst-dialog-button-color, --hirst-dialog-color);
        width: var(--hirst-dialog-button-width, 45%);
      }
    </style>

    <hirst-dialog-base id="dialogBase" title="{{title}}" opened="{{opened}}" attach="{{attach}}">
      <slot></slot>
      <div id="confirmButtons">
        <paper-button id="confirmButton" raised on-click="confirm">[[confirmTitle]]</paper-button>
        <paper-button id="dismissButton" raised on-click="dismiss" hidden$="[[hideDismiss]]">[[dismissTitle]]</paper-button>
      </div>
    </hirst-dialog-base>
  </template>

  <script>
    /**
     * `hirst-confirm-dialog`
     * hirst-confirm-dialog
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class HirstConfirmDialog extends Polymer.Element {
      static get is() {
        return 'hirst-confirm-dialog';
      }

      static get properties() {
        return {
          /**
           * Title of the dialog
           */
          title: {
            type: String,
            value: null
          },

          /**
           * True if dialog is opened
           */
          opened: {
            type: Boolean,
            notify: true,
            observer: '_openedChanged'
          },

          /**
           * Parent element, where the dialog is attached to, body by default
           */
          attach: {
            type: String,
            value: null
          },

          /**
           * Title of the confirm button
           */
          confirmTitle: {
            type: String,
            value: 'Confirm'
          },

          /**
           * Title of the dismiss button
           */
          dismissTitle: {
            type: String,
            value: 'Dismiss'
          },

          /**
           * Indicates whether dismiss button is hidden or not
           */
          hideDismiss: {
            type: Boolean,
            value: null
          }
        };
      }

      _openedChanged(newValue, oldValue) {
        if (newValue) {
          this.open();
        } else {
          this.close();
        }
      }

      /**
       * Open the dialog
       */
      open() {
        this.$.dialogBase.open(this);
      }

      /**
       * Close the dialog
       */
      close() {
        this.$.dialogBase.close();
      }

      /**
       * Confirm and close the dialog
       */
      confirm() {
        this.dispatchEvent(new CustomEvent('confirm'));
        this.close();
      }

      /**
       * Dismiss and close the dialog
       */
      dismiss() {
        this.dispatchEvent(new CustomEvent('dismiss'));
        this.close();
      }
    }

    window.customElements.define(HirstConfirmDialog.is, HirstConfirmDialog);
  </script>
</dom-module>