@progressive-development/pd-spa-helper 0.5.18 → 0.5.20

package/dist/pd-icon-panel-button.js

@@ -17,6 +17,17 @@ let PdIconPanelButton = class extends LitElement {
     this.buttonText = "Ok";
     this.panelButton = false;
     this._panelOpen = false;
+    this._closePanel = () => {
+      this._panelOpen = false;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("close-button-panel-event", this._closePanel);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("close-button-panel-event", this._closePanel);
+    super.disconnectedCallback();
   }
   // ${this._daySyncDisabled ? "element-hint" : ""} => for div class
   render() {
@@ -72,10 +83,11 @@ PdIconPanelButton.styles = [
       :host {
         display: inline-block; /* Verhindert, dass :host die volle Breite bekommt */
         position: relative;
+        width: var(--pd-icon-button-width, auto);
       }
 
       .icon-button-style {
-        z-index: 2;
+        z-index: 6;
         background: #58a linear-gradient(hsla(0, 0%, 100%, 0.2), transparent);
         background-color: var(--pd-icon-button-bgcol, #0c6fc5);
         padding: 0.3em 0.8em;
@@ -85,7 +97,7 @@ PdIconPanelButton.styles = [
         --pd-icon-size: 20px;
         color: var(--pd-icon-button-txtcol, white);
         text-shadow: 0 - 0.05em 0.05em rgba(0, 0, 0, 0.5);
-        font-size: 125%;
+        font-size: var(--pd-icon-button-font-size, 125%);
         line-height: 1.5;        
       }   
 
@@ -124,8 +136,8 @@ PdIconPanelButton.styles = [
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         transition: transform 0.2s ease-out, opacity 0.2s ease-out;
         opacity: 0;
-        z-index: 1;
-      }      
+        z-index: 5;
+      }
 
       .panel.open {
         transform: scaleY(1);

package/dist/tmpown/pd-icon-panel-button.d.ts

@@ -6,6 +6,9 @@ export declare class PdIconPanelButton extends LitElement {
     panelButton: boolean;
     private _panelOpen;
     static styles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _closePanel;
     render(): import('lit-html').TemplateResult<1>;
     private _onKeyDown;
     private _buttonClicked;

package/dist/tmpown/pd-icon-panel-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-icon-panel-button.d.ts","sourceRoot":"","sources":["../../src/tmpown/pd-icon-panel-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5D,OAAO,0CAA0C,CAAC;AAElD,qBACa,iBAAkB,SAAQ,UAAU;IAG/C,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,UAAU,EAAE,MAAM,CAAQ;IAG1B,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,WAAW,EAAE,OAAO,CAAS;IAG7B,OAAO,CAAC,UAAU,CAAkB;IAEpC,MAAM,CAAC,MAAM,iBAuHO;IAGpB,MAAM;IA0BN,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;CAOrB"}
+{"version":3,"file":"pd-icon-panel-button.d.ts","sourceRoot":"","sources":["../../src/tmpown/pd-icon-panel-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5D,OAAO,0CAA0C,CAAC;AAElD,qBACa,iBAAkB,SAAQ,UAAU;IAG/C,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,UAAU,EAAE,MAAM,CAAQ;IAG1B,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,WAAW,EAAE,OAAO,CAAS;IAG7B,OAAO,CAAC,UAAU,CAAkB;IAEpC,MAAM,CAAC,MAAM,iBAwHO;IAEpB,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,WAAW,CAEjB;IAGF,MAAM;IA0BN,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;CAOrB"}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent pd-spa-helper following open-wc recommendations",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.5.18",
+  "version": "0.5.20",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",