@progressive-development/pd-dialog 0.6.23 → 0.9.1

package/dist/pd-popup-dialog.js

@@ -1,267 +1,8 @@
-import { css, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import "@progressive-development/pd-forms/pd-icon-panel-button";
-import "@progressive-development/pd-icon/pd-icon";
-import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let PdPopupDialog = class 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();
-    };
-  }
-  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-icon-panel-button
-                  data-key=${bt.key}
-                  buttonText=${bt.name}
-                  ?disabled=${bt.disabled}
-                  ?primary=${bt.primary}
-                  @button-clicked=${this._onButtonClick}
-                ></pd-icon-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) {
-    var _a;
-    const modal = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("modalId");
-    if (modal) {
-      modal.style.display = visible ? "block" : "none";
-    }
-  }
-};
-PdPopupDialog.styles = [
-  PdColorStyles,
-  PdFontStyles,
-  css`
-      :host {
-        display: block;
-      }
+import { PdPopupDialog } from './pd-popup-dialog/PdPopupDialog.js';
 
-      .modal {
-        position: fixed;
-        box-sizing: border-box;
+const tag = "pd-popup-dialog";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdPopupDialog);
+}
 
-        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-icon-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-icon-panel-button {
-          width: 90%;
-        }
-      }
-    `
-];
-__decorateClass([
-  property({ type: String })
-], PdPopupDialog.prototype, "type", 2);
-__decorateClass([
-  property({ type: String })
-], PdPopupDialog.prototype, "title", 2);
-__decorateClass([
-  property({ type: Array })
-], PdPopupDialog.prototype, "buttons", 2);
-__decorateClass([
-  property({ type: Boolean })
-], PdPopupDialog.prototype, "closeByEscape", 2);
-PdPopupDialog = __decorateClass([
-  customElement("pd-popup-dialog")
-], PdPopupDialog);
-export {
-  PdPopupDialog
-};
+export { PdPopupDialog };

package/dist/pd-popup.d.ts

@@ -1,29 +1,2 @@
-import { LitElement, CSSResultGroup } from 'lit';
-/**
- * Popup-Komponente, die bei Klick auf ein Trigger-Element (Slot `small-view`)
- * ein modales Fenster (Slot `content`) öffnet.
- *
- * @element pd-popup
- * @slot small-view - Inhalt, der das Popup triggert (z.B. Icon, Text)
- * @slot content - Inhalt, der im Popup angezeigt wird
- * @event popup-close - Wird ausgelöst, wenn das Popup geschlossen wurde
- */
-export declare class PdPopup extends LitElement {
-    closeByEscape: boolean;
-    static styles: CSSResultGroup;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /**
-     * Öffnet das Popup programmatisch
-     */
-    showPopup(): void;
-    /**
-     * Schließt das Popup programmatisch
-     */
-    hidePopup(): void;
-    protected render(): import('lit-html').TemplateResult<1>;
-    private _activatePopup;
-    private _closePopup;
-    private _handleKeyDown;
-}
-//# sourceMappingURL=pd-popup.d.ts.map
+export * from './pd-popup/pd-popup'
+export {}

package/dist/pd-popup.js

@@ -1,141 +1,8 @@
-import { css, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { pdIcons } from "@progressive-development/pd-icon";
-import { PdColorStyles } from "@progressive-development/pd-shared-styles";
-import "@progressive-development/pd-icon/pd-icon";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let PdPopup = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.closeByEscape = false;
-    this._handleKeyDown = (e) => {
-      if (e.key === "Escape") this._closePopup();
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.closeByEscape) {
-      document.addEventListener("keydown", this._handleKeyDown);
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.closeByEscape) {
-      document.removeEventListener("keydown", this._handleKeyDown);
-    }
-  }
-  /**
-   * Öffnet das Popup programmatisch
-   */
-  showPopup() {
-    this._activatePopup();
-  }
-  /**
-   * Schließt das Popup programmatisch
-   */
-  hidePopup() {
-    this._closePopup();
-  }
-  render() {
-    return html`
-      <span @click=${this._activatePopup} @keypress=${this._activatePopup}>
-        <slot name="small-view"></slot>
-      </span>
+import { PdPopup } from './pd-popup/PdPopup.js';
 
-      <div id="modalId" class="modal">
-        <div class="modal-content">
-          <pd-icon
-            icon=${pdIcons.ICON_CLOSE}
-            class="close-icon"
-            @click=${this._closePopup}
-          ></pd-icon>
-          <div class="modal-content-slot">
-            <slot name="content"></slot>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  _activatePopup() {
-    var _a;
-    const modal = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("modalId");
-    if (modal) modal.style.display = "block";
-  }
-  _closePopup() {
-    var _a;
-    const modal = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("modalId");
-    if (modal) modal.style.display = "none";
-    this.dispatchEvent(
-      new CustomEvent("popup-close", {
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-};
-PdPopup.styles = [
-  PdColorStyles,
-  css`
-      :host {
-        display: block;
-      }
+const tag = "pd-popup";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdPopup);
+}
 
-      .modal {
-        position: fixed;
-        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: var(--pd-popup-default-display, none);
-        padding-top: 100px;
-      }
-
-      .modal-content {
-        background-color: var(--pd-default-bg-col);
-        opacity: 1;
-        margin: auto;
-        padding: var(--pd-popup-modal-padding, 20px);
-        padding-bottom: 130px;
-        border: 2px solid var(--pd-default-col);
-        width: 80%;
-        max-width: 1200px;
-        position: relative;
-      }
-
-      .modal-content-slot {
-        max-width: var(--pd-popup-modal-slot-max-width, 1000px);
-        margin: var(--pd-popup-modal-slot-margin, 0 30px);
-      }
-
-      .close-icon {
-        position: absolute;
-        cursor: pointer;
-        right: 1.2em;
-        top: 1.2em;
-      }
-    `
-];
-__decorateClass([
-  property({ type: Boolean })
-], PdPopup.prototype, "closeByEscape", 2);
-PdPopup = __decorateClass([
-  customElement("pd-popup")
-], PdPopup);
-export {
-  PdPopup
-};
+export { PdPopup };

package/dist/pd-submit-dialog/PdSubmitDialog.d.ts

@@ -0,0 +1,32 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * @tagname pd-submit-dialog
+ *
+ * A submit dialog that shows progress, success or failure state.
+ *
+ * @fires submit-button-clicked - Triggered when a footer button is clicked, e.g. "Close" or "Back to Start".
+ * @slot submit-content - Content shown above the progress area
+ */
+export declare class PdSubmitDialog extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Dialog title */
+    title: string;
+    /** Dialog type: `mail`, `editDate`, `order` (default) */
+    type: "mail" | "editDate" | "order";
+    /** Current status */
+    status: number;
+    /** Optional status message shown below the progress */
+    statusMsg: string;
+    /** Confirmation email address shown inside the content */
+    confirmMail: string;
+    /** Optional map with custom progress texts */
+    progressTxtMap: Map<number, string>;
+    /** Internal list of buttons shown in the popup dialog */
+    private _buttons;
+    updated(changedProps: PropertyValues<this>): void;
+    private _updateButtonsBasedOnStatus;
+    render(): import('lit').TemplateResult<1>;
+    private _renderProgressRow;
+    private _goToStartpage;
+}
+//# sourceMappingURL=PdSubmitDialog.d.ts.map

package/dist/pd-submit-dialog/PdSubmitDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdSubmitDialog.d.ts","sourceRoot":"","sources":["../../src/pd-submit-dialog/PdSubmitDialog.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,0CAA0C,CAAC;AAKlD,OAAO,uCAAuC,CAAC;AAE/C;;;;;;;GAOG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAuDpB;IAEF,mBAAmB;IAEnB,KAAK,SAAwB;IAE7B,yDAAyD;IAEzD,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAW;IAE9C,qBAAqB;IAErB,MAAM,SAAK;IAEX,uDAAuD;IAEvD,SAAS,SAAM;IAEf,0DAA0D;IAE1D,WAAW,SAAM;IAEjB,8CAA8C;IAE9C,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAa;IAEhD,yDAAyD;IAChD,OAAO,CAAC,QAAQ,CAAwB;IAExC,OAAO,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC;IAMnD,OAAO,CAAC,2BAA2B;IAuB1B,MAAM;IAmBf,OAAO,CAAC,kBAAkB;IAiC1B,OAAO,CAAC,cAAc;CAUvB"}

package/dist/pd-submit-dialog/PdSubmitDialog.js

@@ -0,0 +1,197 @@
+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 { PdColorStyles } from '@progressive-development/pd-shared-styles';
+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 = [
+      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);
+        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 };

package/dist/pd-submit-dialog/pd-submit-dialog.d.ts

@@ -0,0 +1,3 @@
+import { PdSubmitDialog } from './PdSubmitDialog.js';
+export { PdSubmitDialog };
+//# sourceMappingURL=pd-submit-dialog.d.ts.map

package/dist/pd-submit-dialog/pd-submit-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-submit-dialog.d.ts","sourceRoot":"","sources":["../../src/pd-submit-dialog/pd-submit-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAOrD,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/{stories → pd-submit-dialog}/pd-submit-dialog.stories.d.ts

@@ -3,7 +3,7 @@ import { PdSubmitDialogStatus } from '../types.js';
 declare const meta: {
     title: string;
     component: string;
-    render: ({ title, status, statusMsg, confirmMail }: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
+    render: ({ title, status, statusMsg, confirmMail }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
     argTypes: {
         title: {
             control: "text";