@progressive-development/pd-dialog 0.6.4 → 0.6.7

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

@@ -13,7 +13,10 @@ export declare class PdPopupDialog extends LitElement {
      * Konfigurierbare Buttons mit Text, Key und optionalem Status
      */
     buttons: PdDialogButton[];
+    closeByEscape: boolean;
     static styles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
     private _onButtonClick;
     private _renderIcon;
@@ -26,5 +29,6 @@ export declare class PdPopupDialog extends LitElement {
      */
     hidePopup(): void;
     private _setModalDisplay;
+    private _handleKeyDown;
 }
 //# sourceMappingURL=pd-popup-dialog.d.ts.map

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

@@ -1 +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,wDAAwD,CAAC;AAChE,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,CAkGpC;IAEO,MAAM;IA6Bf,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;IA0BnB;;OAEG;IACI,SAAS;IAIhB;;OAEG;IACI,SAAS;IAIhB,OAAO,CAAC,gBAAgB;CAMzB"}
+{"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,wDAAwD,CAAC;AAChE,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;IAG/B,aAAa,EAAE,OAAO,CAAS;IAE/B,OAAgB,MAAM,EAAE,cAAc,CA4HpC;IAEO,iBAAiB;IAOjB,oBAAoB;IAOpB,MAAM;IA6Bf,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;IA0BnB;;OAEG;IACI,SAAS;IAIhB;;OAEG;IACI,SAAS;IAIhB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,cAAc,CAEpB;CACH"}

package/dist/pd-popup-dialog.js

@@ -19,6 +19,22 @@ let PdPopupDialog = class extends LitElement {
     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`
@@ -113,6 +129,8 @@ PdPopupDialog.styles = [
 
       .modal {
         position: fixed;
+        box-sizing: border-box;
+
         z-index: 100;
         left: 0;
         top: 0;
@@ -124,16 +142,24 @@ PdPopupDialog.styles = [
           rgba(175, 193, 210, 0.8)
         );
         display: block;
-        padding-top: 150px;
-        padding-left: 10px;
-        padding-right: 10px;
+        padding: 1rem;
+
+        max-width: 100vw;
+        overflow-x: hidden;
       }
 
       .modal-content {
-        margin: auto;
-        border: 1px solid var(--pd-default-light-col);
-        box-shadow: -4px 4px 10px var(--pd-default-dark-col);
+        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 {
@@ -143,6 +169,9 @@ PdPopupDialog.styles = [
         background-color: var(--pd-popup-header-col, var(--pd-default-col));
         height: var(--pd-popup-header-height, 45px);
         padding-left: 0.5em;
+
+        border-top-left-radius: var(--pd-border-radius, 8px);
+        border-top-right-radius: var(--pd-border-radius, 8px);
       }
 
       .header-txt {
@@ -172,7 +201,7 @@ PdPopupDialog.styles = [
       }
 
       .content {
-        padding: 0.5rem 1rem 1rem 1rem;
+        padding: 1em;
         background-color: var(
           --pd-popup-header-font-col,
           var(--pd-default-bg-col)
@@ -187,10 +216,14 @@ PdPopupDialog.styles = [
           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;
 
+        padding: 1em;
+
+        border-bottom-left-radius: var(--pd-border-radius, 8px);
+        border-bottom-right-radius: var(--pd-border-radius, 8px);
+
         --pd-icon-button-width: 11em;
       }
 
@@ -200,6 +233,15 @@ PdPopupDialog.styles = [
           --pd-icon-button-font-size: 100%;
         }
       }
+
+      @media (max-width: 410px) {
+        .footer {
+          flex-direction: column;
+          gap: 0.5rem;
+          padding: 1rem;
+          --pd-icon-button-width: 100%;
+        }
+      }
     `
 ];
 __decorateClass([
@@ -211,6 +253,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Array })
 ], PdPopupDialog.prototype, "buttons", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdPopupDialog.prototype, "closeByEscape", 2);
 PdPopupDialog = __decorateClass([
   customElement("pd-popup-dialog")
 ], PdPopupDialog);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-dialog",
-  "version": "0.6.4",
+  "version": "0.6.7",
   "description": "Progressive Development dialog components.",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
@@ -41,10 +41,10 @@
   },
   "dependencies": {
     "@lit/localize": "^0.12.2",
-    "@progressive-development/pd-forms": "^0.6.14",
-    "@progressive-development/pd-icon": "^0.7.3",
-    "@progressive-development/pd-price": "^0.6.2",
-    "@progressive-development/pd-shared-styles": "^0.2.4",
+    "@progressive-development/pd-forms": "^0.7.1",
+    "@progressive-development/pd-icon": "^0.7.4",
+    "@progressive-development/pd-price": "^0.6.3",
+    "@progressive-development/pd-shared-styles": "^0.2.5",
     "lit": "^3.3.0"
   },
   "devDependencies": {