@progressive-development/pd-dialog 0.5.8 → 0.6.0

package/dist/src/PdPopupDialog.js

@@ -1,188 +0,0 @@
-import { LitElement, css, html } from "lit";
-import "@progressive-development/pd-forms/pd-button";
-import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdPopupDialog extends LitElement {
-  /**
-   * @event submit-button-clicked - fired if one of the configured buttons was clicked.
-   */
-  static get styles() {
-    return [
-      PDColorStyles,
-      PDFontStyles,
-      css`
-      :host {
-        display: block;
-      }
-
-      /* The Modal (background) */
-      .modal {
-        position: fixed; /* Stay in place */
-        z-index: 100; /* Sit on top */        
-        left: 0;
-        top: 0;
-        width: 100%; /* Full width */
-        height: 100%; /* Full height */
-        overflow: auto; /* Enable scroll if needed */
-        /* RGBA Wert muss hier verwendet werden #AFC1D2 to rgba for opacity */
-        background-color: var(--pd-popup-modal-bg-rgba, rgba(175, 193, 210, 0.8)); 
-
-        display: block;        
-        padding-top: 150px; /* Location of the box */
-        padding-left: 10px;
-        padding-right: 10px;
-      }      
-
-      .modal-content {        
-        margin: auto;
-        border: 1px solid var(--pd-default-light-col);
-        box-shadow: -4px 4px 10px var(--pd-default-dark-col);
-        max-width: var(--pd-popup-max-width, 700px);
-      }
-
-      .header {        
-        display: flex;
-        gap: 0.5em;
-        align-items: center;
-        background-color: var(--pd-popup-header-col, var(--pd-default-col));
-        height: var(--pd-popup-header-height, 45px);
-        padding-left: 0.5em;
-      }
-
-      .header-txt {
-        font-family: var(--pd-default-font-title-family);
-        font-size: var(--pd-popup-header-font-size, 1.3em);
-        color: var(--pd-popup-header-font-col, var(--pd-default-bg-col));
-      }
-
-      .info-logo {
-        width: 2em;
-      }
-
-      .error {
-        --pd-icon-col: #FF3232;
-        --pd-icon-stroke-width: 0;
-      }
-
-      .info, .help {
-        --pd-icon-col: #6B86FF;
-        --pd-icon-stroke-width: 0;
-      }
-
-      .warn {
-        --pd-icon-col: #FFBF00;
-        --pd-icon-stroke-width: 0;
-      }
-
-      .content {
-        padding: 0.5rem 1rem 1rem 1rem;
-        background-color: var(--pd-popup-header-font-col, var(--pd-default-bg-col));
-        height: 100%;
-      }
-
-      .footer {
-        display: flex;        
-
-        background: linear-gradient(to right, 
-          var(--pd-popup-footer-col, var(--pd-default-light-col)) 0%, var(--pd-default-disabled-light-col) 100%);
-
-        height: 70px;
-        align-items: center;
-        justify-content: space-around;
-      }
-    `
-    ];
-  }
-  static get properties() {
-    return {
-      type: { type: String },
-      title: { type: String },
-      buttons: { type: Array }
-    };
-  }
-  constructor() {
-    super();
-    this.type = "info";
-    this.title = "Popup Title";
-    this.buttons = [];
-  }
-  render() {
-    return html`
-      <!-- The Modal -->
-      <div id="modalId" class="modal">
-        <!-- Modal content -->
-        <div class="modal-content">
-          <div class="header">
-            ${this._getIconForType()}
-            <span class="header-txt">${this.title}</span>
-          </div>
-          <div class="content">
-            <slot name="content"></slot>
-          </div>
-          <div class="footer">
-            ${this.buttons.map(
-      (bt) => html`
-                <pd-button
-                  data-key="${bt.key}"
-                  @button-clicked="${this._handleButtonEvent}"
-                  ?disabled="${bt.disabled}"
-                  ?primary="${bt.primary}"
-                  text="${bt.name}"
-                ></pd-button>
-              `
-    )}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  _handleButtonEvent(e) {
-    this.dispatchEvent(
-      new CustomEvent("submit-button-clicked", {
-        detail: {
-          button: e.target.dataset.key
-        }
-      })
-    );
-  }
-  _getIconForType() {
-    if (!this.type || this.type === "") {
-      return "";
-    }
-    switch (this.type) {
-      case "warn":
-        return html`<pd-icon icon="warningIconFld" class="info-logo warn"></pd-icon>`;
-      case "error":
-        return html`<pd-icon icon="errorIconFld" class="info-logo error"></pd-icon>`;
-      case "help":
-        return html`<pd-icon icon="helpIconFld" class="info-logo help"></pd-icon>`;
-      default:
-        return html`<pd-icon icon="infoIconFld" class="info-logo info"></pd-icon>`;
-    }
-  }
-  showPopup() {
-    this._activatePopup();
-  }
-  _activatePopup() {
-    const modal = this.shadowRoot.getElementById("modalId");
-    modal.style.display = "block";
-  }
-  _closePopup() {
-    const modal = this.shadowRoot.getElementById("modalId");
-    modal.style.display = "none";
-  }
-  /*
-    // When the user clicks anywhere outside of the modal, close it
-  window.onclick = function(event) {
-    if (event.target == modal) {
-      modal.style.display = "none";
-    }
-  }
-  */
-}
-export {
-  PdPopupDialog
-};

package/dist/src/PdSubmitDialog.js

@@ -1,185 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { msg } from "@lit/localize";
-import "@progressive-development/pd-icon/pd-icon";
-import { PDColorStyles } from "@progressive-development/pd-shared-styles";
-import "../pd-popup-dialog.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-const STATUS_SEND = 1;
-const STATUS_SEND_SUCCESS = 2;
-const STATUS_SEND_FAILED = 3;
-class PdSubmitDialog extends LitElement {
-  /**
-   * @event button-clicked - navigate to start page or close popup (failure case).
-   */
-  static get styles() {
-    return [
-      PDColorStyles,
-      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); /* Blue */
-        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-light-col);
-        --pd-icon-stroke-col-active: var(--pd-default-success-col);
-      }
-
-      .error-icon {
-        padding-top: 5px;
-        --pd-icon-col: var(--pd-default-error-light-col);
-        --pd-icon-stroke-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);
-        }
-      }
-    `
-    ];
-  }
-  static get properties() {
-    return {
-      title: { type: String },
-      type: { type: String },
-      // mail, editDate, order (default)
-      status: { type: Number },
-      statusMsg: { type: String },
-      confirmMail: { type: String },
-      progressTxtMap: { type: Object },
-      _buttons: { type: Array }
-    };
-  }
-  constructor() {
-    super();
-    this.title = "Order Submit Title";
-    this.type = "order";
-    this.status = 0;
-    this.statusMsg = "";
-    this.confirmMail = "";
-    this._buttons = [];
-  }
-  updated(changedProps) {
-    if (changedProps.has("status")) {
-      if (this.status === STATUS_SEND_SUCCESS) {
-        this._buttons = [
-          { name: "Close", key: 2 }
-        ];
-      } else if (this.status === STATUS_SEND_FAILED) {
-        this._buttons = [];
-        if (this.type === "mail") {
-          this._buttons = [{ name: "Close" }];
-        } else {
-          this._buttons = [
-            { name: msg("Daten bearbeiten", { id: "pd.submit.dialog.closeStay" }), key: 2 },
-            { name: msg("Zur Startseite", { id: "pd.submit.dialog.startPage" }) }
-          ];
-        }
-      } 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() {
-    let value;
-    switch (this.status) {
-      case STATUS_SEND:
-        value = html`
-          <div class="first-row-tmp">
-            <div class="loader"></div>
-          </div>
-          <span class="progress-txt">${this.progressTxtMap.get(STATUS_SEND)}</span>`;
-        break;
-      case STATUS_SEND_SUCCESS:
-        value = html`
-          <div class="first-row-tmp">
-            <pd-icon
-              class="success-icon"
-              icon="checkBox"
-              activeIcon
-            ></pd-icon>
-          </div>
-          <span class="progress-txt">${this.progressTxtMap.get(STATUS_SEND_SUCCESS)}</span>`;
-        break;
-      case STATUS_SEND_FAILED:
-        value = html` <div class="first-row-tmp">
-            <pd-icon class="error-icon" icon="checkBox"></pd-icon>
-          </div>
-          <span class="progress-txt">${this.progressTxtMap.get(STATUS_SEND_FAILED)}</span>`;
-        break;
-      default:
-        console.warn("Unexpected value");
-    }
-    return value;
-  }
-  _goToStartpage() {
-    this.dispatchEvent(
-      new CustomEvent("submit-button-clicked", {
-        detail: {
-          // TODO: Get index from event
-          button: this._buttons[0].key
-        }
-      })
-    );
-  }
-}
-export {
-  PdSubmitDialog,
-  STATUS_SEND,
-  STATUS_SEND_FAILED,
-  STATUS_SEND_SUCCESS
-};