@progressive-development/pd-dialog 0.5.7 → 0.6.0

package/dist/generated/locale-codes.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The locale code that templates in this source code are written in.
+ */
+export declare const sourceLocale = "dev";
+/**
+ * The other locale codes that this application is localized into. Sorted
+ * lexicographically.
+ */
+export declare const targetLocales: readonly ["be", "de", "en"];
+/**
+ * All valid project locale codes. Sorted lexicographically.
+ */
+export declare const allLocales: readonly ["be", "de", "dev", "en"];
+//# sourceMappingURL=locale-codes.d.ts.map

package/dist/generated/locale-codes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale-codes.d.ts","sourceRoot":"","sources":["../../src/generated/locale-codes.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,YAAY,QAAQ,CAAC;AAElC;;;GAGG;AACH,eAAO,MAAM,aAAa,6BAA8B,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,UAAU,oCAAqC,CAAC"}

package/dist/generated/locales/be.d.ts

@@ -0,0 +1,5 @@
+export declare const templates: {
+    "pd.submit.dialog.closeStay": string;
+    "pd.submit.dialog.startPage": string;
+};
+//# sourceMappingURL=be.d.ts.map

package/dist/generated/locales/be.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"be.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/be.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;CAGrB,CAAC"}

package/dist/generated/locales/de.d.ts

@@ -0,0 +1,5 @@
+export declare const templates: {
+    "pd.submit.dialog.closeStay": string;
+    "pd.submit.dialog.startPage": string;
+};
+//# sourceMappingURL=de.d.ts.map

package/dist/generated/locales/de.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"de.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/de.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;CAGrB,CAAC"}

package/dist/generated/locales/en.d.ts

@@ -0,0 +1,5 @@
+export declare const templates: {
+    "pd.submit.dialog.closeStay": string;
+    "pd.submit.dialog.startPage": string;
+};
+//# sourceMappingURL=en.d.ts.map

package/dist/generated/locales/en.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/en.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;CAGrB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { PdPopup } from './pd-popup.js';
+export { PdPopupDialog } from './pd-popup-dialog.js';
+export { PdSubmitDialog } from './pd-submit-dialog.js';
+export type { PdDialogButton, PdSubmitDialogProps, PdSubmitDialogStatus, } from './types.js';
+export { templates as beTemplates } from './generated/locales/be.js';
+export { templates as deTemplates } from './generated/locales/de.js';
+export { templates as enTemplates } from './generated/locales/en.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
-import { PdPopup } from "./src/PdPopup.js";
-import { PdPopupDialog } from "./src/PdPopupDialog.js";
-import { PdSubmitDialog, STATUS_SEND, STATUS_SEND_FAILED, STATUS_SEND_SUCCESS } from "./src/PdSubmitDialog.js";
+import { PdPopup } from "./pd-popup.js";
+import { PdPopupDialog } from "./pd-popup-dialog.js";
+import { PdSubmitDialog } from "./pd-submit-dialog.js";
 import { templates } from "./locales/be.js";
 import { templates as templates2 } from "./locales/de.js";
 import { templates as templates3 } from "./locales/en.js";
@@ -8,9 +8,6 @@ export {
   PdPopup,
   PdPopupDialog,
   PdSubmitDialog,
-  STATUS_SEND,
-  STATUS_SEND_FAILED,
-  STATUS_SEND_SUCCESS,
   templates as beTemplates,
   templates2 as deTemplates,
   templates3 as enTemplates

package/dist/locales/be.d.ts

@@ -0,0 +1,2 @@
+export * from '../generated/locales/be'
+export {}

package/dist/locales/de.d.ts

@@ -0,0 +1,2 @@
+export * from '../generated/locales/de'
+export {}

package/dist/locales/en.d.ts

@@ -0,0 +1,2 @@
+export * from '../generated/locales/en'
+export {}

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

@@ -0,0 +1,30 @@
+import { LitElement, CSSResultGroup } from 'lit';
+import { PdDialogButton } from './types';
+export declare class PdPopupDialog extends LitElement {
+    /**
+     * Typ des Popups: info | warn | error | help
+     */
+    type: string;
+    /**
+     * Titel, der im Header angezeigt wird
+     */
+    title: string;
+    /**
+     * Konfigurierbare Buttons mit Text, Key und optionalem Status
+     */
+    buttons: PdDialogButton[];
+    static styles: CSSResultGroup;
+    render(): import('lit-html').TemplateResult<1>;
+    private _onButtonClick;
+    private _renderIcon;
+    /**
+     * Öffnet das Popup-Dialog manuell
+     */
+    showPopup(): void;
+    /**
+     * Schließt das Popup-Dialog manuell
+     */
+    hidePopup(): void;
+    private _setModalDisplay;
+}
+//# sourceMappingURL=pd-popup-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-popup-dialog.d.ts","sourceRoot":"","sources":["../src/pd-popup-dialog.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,OAAO,6CAA6C,CAAC;AACrD,OAAO,0CAA0C,CAAC;AAMlD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,qBACa,aAAc,SAAQ,UAAU;IAC3C;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAU;IAEtB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAiB;IAE9B;;OAEG;IAEH,OAAO,EAAE,cAAc,EAAE,CAAM;IAE/B,OAAgB,MAAM,EAAE,cAAc,CAyFpC;IAEO,MAAM;IA6Bf,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;IA0BnB;;OAEG;IACI,SAAS;IAIhB;;OAEG;IACI,SAAS;IAIhB,OAAO,CAAC,gBAAgB;CAMzB"}

package/dist/pd-popup-dialog.js

@@ -1,4 +1,210 @@
-import { PdPopupDialog } from "./src/PdPopupDialog.js";
-if (!customElements.get("pd-popup-dialog")) {
-  window.customElements.define("pd-popup-dialog", PdPopupDialog);
-}
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import "@progressive-development/pd-forms/pd-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 = [];
+  }
+  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-button
+                  data-key=${bt.key}
+                  text=${bt.name}
+                  ?disabled=${bt.disabled}
+                  ?primary=${bt.primary}
+                  @button-clicked=${this._onButtonClick}
+                ></pd-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;
+      }
+
+      .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: block;
+        padding-top: 150px;
+        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;
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], PdPopupDialog.prototype, "type", 2);
+__decorateClass([
+  property({ type: String })
+], PdPopupDialog.prototype, "title", 2);
+__decorateClass([
+  property({ type: Array })
+], PdPopupDialog.prototype, "buttons", 2);
+PdPopupDialog = __decorateClass([
+  customElement("pd-popup-dialog")
+], PdPopupDialog);
+export {
+  PdPopupDialog
+};

package/dist/pd-popup.d.ts

@@ -0,0 +1,25 @@
+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 {
+    static styles: CSSResultGroup;
+    /**
+     * Öffnet das Popup programmatisch
+     */
+    showPopup(): void;
+    /**
+     * Schließt das Popup programmatisch
+     */
+    hidePopup(): void;
+    protected render(): import('lit-html').TemplateResult<1>;
+    private _activatePopup;
+    private _closePopup;
+}
+//# sourceMappingURL=pd-popup.d.ts.map

package/dist/pd-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-popup.d.ts","sourceRoot":"","sources":["../src/pd-popup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5D,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,EAAE,cAAc,CA+CpC;IAEF;;OAEG;IACI,SAAS,IAAI,IAAI;IAIxB;;OAEG;IACI,SAAS,IAAI,IAAI;IAIxB,SAAS,CAAC,MAAM;IAqBhB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;CAWpB"}

package/dist/pd-popup.js

@@ -1,4 +1,117 @@
-import { PdPopup } from "./src/PdPopup.js";
-if (!customElements.get("pd-popup")) {
-  window.customElements.define("pd-popup", PdPopup);
-}
+import { css, LitElement, html } from "lit";
+import { 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 __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 = decorator(result) || result;
+  return result;
+};
+let PdPopup = class extends LitElement {
+  /**
+   * Ö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>
+
+      <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;
+      }
+
+      .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;
+      }
+    `
+];
+PdPopup = __decorateClass([
+  customElement("pd-popup")
+], PdPopup);
+export {
+  PdPopup
+};

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

@@ -0,0 +1,30 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * 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-html').TemplateResult<1>;
+    private _renderProgressRow;
+    private _goToStartpage;
+}
+//# sourceMappingURL=pd-submit-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-submit-dialog.d.ts","sourceRoot":"","sources":["../src/pd-submit-dialog.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,0CAA0C,CAAC;AAKlD,OAAO,sBAAsB,CAAC;AAE9B;;;;;GAKG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAyDpB;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"}