@progressive-development/pd-dialog/dist/pd-popup-dialog/PdPopupDialog.js

Progressive Development dialog components.

import { LitElement, css, html } from 'lit';
import { property } from 'lit/decorators.js';
import '@progressive-development/pd-forms/pd-panel-button';
import '@progressive-development/pd-icon/pd-icon';

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 PdPopupDialog extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "info";
    this.title = "Popup Title";
    this.buttons = [];
    this.closeByEscape = false;
    this._handleKeyDown = (e) => {
      if (e.key === "Escape") this.hidePopup();
    };
  }
  static {
    this.styles = [
      css`
      :host {
        display: block;
      }

      .modal {
        position: fixed;
        box-sizing: border-box;

        z-index: 100;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: var(
          --pd-popup-modal-bg-rgba,
          rgba(175, 193, 210, 0.8)
        );
        display: block;
        padding: 1rem;

        max-width: 100vw;
        overflow-x: hidden;
      }

      .modal-content {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 auto;
        padding: 0;
        width: 100%;
        max-width: var(--pd-popup-max-width, 700px);
        border-radius: var(--pd-border-radius, 8px);
        border: 1px solid var(--pd-default-light-col);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
        background: white;
      }

      .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: 0.5rem;

        border-top-left-radius: var(--pd-border-radius, 8px);
        border-top-right-radius: var(--pd-border-radius, 8px);
      }

      .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: var(--pd-default-error-col);
      }

      .info,
      .help {
        --pd-icon-col: #6b86ff;
      }

      .warn {
        --pd-icon-col: #ffbf00;
      }

      .content {
        padding: 1em;
        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%
        );
        align-items: center;
        justify-content: space-around;

        padding: 1em;

        border-bottom-left-radius: var(--pd-border-radius, 8px);
        border-bottom-right-radius: var(--pd-border-radius, 8px);

        --pd-icon-button-width: 100%;
      }

      .footer pd-panel-button {
        width: 38%;
      }

      @media (max-width: 640px) {
        .footer {
          --pd-icon-button-font-size: 100%;
        }
      }

      @media (max-width: 500px) {
        .footer {
          flex-direction: column;
          gap: 0.5rem;
          padding: 1rem;
        }

        .footer pd-panel-button {
          width: 90%;
        }
      }
    `
    ];
  }
  connectedCallback() {
    super.connectedCallback();
    if (this.closeByEscape) {
      document.addEventListener("keydown", this._handleKeyDown);
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    if (this.closeByEscape) {
      document.removeEventListener("keydown", this._handleKeyDown);
    }
  }
  render() {
    return html`
      <div id="modalId" class="modal">
        <div class="modal-content">
          <div class="header">
            ${this._renderIcon()}
            <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-panel-button
                  data-key=${bt.key}
                  buttonText=${bt.name}
                  ?disabled=${bt.disabled}
                  ?primary=${bt.primary}
                  @button-clicked=${this._onButtonClick}
                ></pd-panel-button>
              `
    )}
          </div>
        </div>
      </div>
    `;
  }
  _onButtonClick(e) {
    const key = e.target.dataset.key;
    this.dispatchEvent(
      new CustomEvent("submit-button-clicked", {
        detail: { button: key },
        bubbles: true,
        composed: true
      })
    );
  }
  _renderIcon() {
    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>`;
      case "info":
      default:
        return html`<pd-icon
          icon="infoIconFld"
          class="info-logo info"
        ></pd-icon>`;
    }
  }
  /**
   * Öffnet das Popup-Dialog manuell
   */
  showPopup() {
    this._setModalDisplay(true);
  }
  /**
   * Schließt das Popup-Dialog manuell
   */
  hidePopup() {
    this._setModalDisplay(false);
  }
  _setModalDisplay(visible) {
    const modal = this.shadowRoot?.getElementById("modalId");
    if (modal) {
      modal.style.display = visible ? "block" : "none";
    }
  }
}
__decorateClass([
  property({ type: String })
], PdPopupDialog.prototype, "type");
__decorateClass([
  property({ type: String })
], PdPopupDialog.prototype, "title");
__decorateClass([
  property({ type: Array })
], PdPopupDialog.prototype, "buttons");
__decorateClass([
  property({ type: Boolean })
], PdPopupDialog.prototype, "closeByEscape");

export { PdPopupDialog };