@progressive-development/pd-dialog/dist/pd-submit-dialog/PdSubmitDialog.js

Progressive Development dialog components.

import { LitElement, css, html } from 'lit';
import { property, state } from 'lit/decorators.js';
import { msg } from '@lit/localize';
import '@progressive-development/pd-icon/pd-icon';
import { PdSubmitDialogStatus } from '../types.js';
import '../pd-popup-dialog.js';

var __defProp = Object.defineProperty;
var __decorateClass = (decorators, target, key, kind) => {
  var result = void 0 ;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (decorator(target, key, result) ) || result;
  if (result) __defProp(target, key, result);
  return result;
};
class PdSubmitDialog extends LitElement {
  constructor() {
    super(...arguments);
    this.title = "Order Submit Title";
    this.type = "order";
    this.status = 0;
    this.statusMsg = "";
    this.confirmMail = "";
    this.progressTxtMap = /* @__PURE__ */ new Map();
    this._buttons = [];
  }
  static {
    this.styles = [
      css`
      :host {
        display: block;
      }

      .progress-container {
        padding: 20px;
      }

      .progress-row {
        display: flex;
        justify-content: start;
        align-items: center;
      }

      .first-row-tmp {
        width: 80px;
        height: 40px;
      }

      .loader {
        border: 16px solid var(--pd-default-disabled-light-col);
        border-top: 16px solid var(--pd-default-col);
        border-radius: 50%;
        width: 10px;
        height: 10px;
        animation: spin 2s linear infinite;
      }

      .success-icon {
        padding-top: 5px;
        --pd-icon-col-active: var(--pd-default-success-col);
      }

      .error-icon {
        padding-top: 5px;
        --pd-icon-col: var(--pd-default-error-col);
      }

      .progress-txt {
        font-size: 1em;
        color: var(--pd-default-dark-col);
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    `
    ];
  }
  updated(changedProps) {
    if (changedProps.has("status")) {
      this._updateButtonsBasedOnStatus();
    }
  }
  _updateButtonsBasedOnStatus() {
    if (this.status === PdSubmitDialogStatus.SUCCESS) {
      this._buttons = [{ name: "Close", key: 2 }];
    } else if (this.status === PdSubmitDialogStatus.FAILED) {
      if (this.type === "mail") {
        this._buttons = [{ name: "Close", key: 2 }];
      } else {
        this._buttons = [
          {
            name: msg("Daten bearbeiten", { id: "pd.submit.dialog.closeStay" }),
            key: 2
          },
          {
            name: msg("Zur Startseite", { id: "pd.submit.dialog.startPage" }),
            key: 1
          }
        ];
      }
    } else {
      this._buttons = [];
    }
  }
  render() {
    return html`
      <pd-popup-dialog
        class="popup-dialog"
        .title=${this.title}
        .buttons=${this._buttons}
        @submit-button-clicked=${this._goToStartpage}
      >
        <div slot="content">
          <slot name="submit-content"></slot>
          <div class="progress-container">
            <div class="progress-row">${this._renderProgressRow()}</div>
          </div>
          <p>${this.statusMsg}</p>
        </div>
      </pd-popup-dialog>
    `;
  }
  _renderProgressRow() {
    switch (this.status) {
      case PdSubmitDialogStatus.SEND:
        return html`
          <div class="first-row-tmp"><div class="loader"></div></div>
          <span class="progress-txt"
            >${this.progressTxtMap.get(PdSubmitDialogStatus.SEND)}</span
          >
        `;
      case PdSubmitDialogStatus.SUCCESS:
        return html`
          <div class="first-row-tmp">
            <pd-icon class="success-icon" icon="checkBox" activeIcon></pd-icon>
          </div>
          <span class="progress-txt"
            >${this.progressTxtMap.get(PdSubmitDialogStatus.SUCCESS)}</span
          >
        `;
      case PdSubmitDialogStatus.FAILED:
        return html`
          <div class="first-row-tmp">
            <pd-icon class="error-icon" icon="checkBox"></pd-icon>
          </div>
          <span class="progress-txt"
            >${this.progressTxtMap.get(PdSubmitDialogStatus.FAILED)}</span
          >
        `;
      default:
        console.warn("Unexpected status:", this.status);
        return "";
    }
  }
  _goToStartpage(e) {
    const clickedKey = e.detail?.button ?? this._buttons[0]?.key ?? 0;
    this.dispatchEvent(
      new CustomEvent("submit-button-clicked", {
        detail: { button: clickedKey },
        bubbles: true,
        composed: true
      })
    );
  }
}
__decorateClass([
  property({ type: String })
], PdSubmitDialog.prototype, "title");
__decorateClass([
  property({ type: String })
], PdSubmitDialog.prototype, "type");
__decorateClass([
  property({ type: Number })
], PdSubmitDialog.prototype, "status");
__decorateClass([
  property({ type: String })
], PdSubmitDialog.prototype, "statusMsg");
__decorateClass([
  property({ type: String })
], PdSubmitDialog.prototype, "confirmMail");
__decorateClass([
  property({ type: Object })
], PdSubmitDialog.prototype, "progressTxtMap");
__decorateClass([
  state()
], PdSubmitDialog.prototype, "_buttons");

export { PdSubmitDialog };