@progressive-development/pd-spa-helper 0.5.15 → 0.5.17

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

@@ -0,0 +1,2 @@
+export * from './tmpown/pd-icon-panel-button'
+export {}

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

@@ -0,0 +1,206 @@
+import { css, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+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 PdIconPanelButton = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.buttonText = "Ok";
+    this.panelButton = false;
+    this._panelOpen = false;
+  }
+  // ${this._daySyncDisabled ? "element-hint" : ""} => for div class
+  render() {
+    return html`
+      <div class="icon-button-style" 
+           role="button" 
+           tabindex="0"
+           @click="${this._buttonClicked}"
+           @keydown="${this._onKeyDown}">
+        ${this.pdButtonIcon ? html`
+        <pd-icon 
+          class="icon action-icon-color" 
+          icon="${this.pdButtonIcon}"  
+          activeIcon
+        ></pd-icon>
+        ` : ""}
+        <span>${this.buttonText}</span>
+      </div>
+
+      <div class="panel ${this._panelOpen ? "open" : ""}">
+        <button class="close-button" @click="${this._togglePanel}">&times;</button>
+        <div class="panel-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+  _onKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this._buttonClicked();
+    }
+  }
+  _buttonClicked() {
+    if (this.panelButton) {
+      this._togglePanel();
+    } else {
+      this.dispatchEvent(
+        new CustomEvent("button-clicked")
+      );
+    }
+  }
+  _togglePanel() {
+    this._panelOpen = !this._panelOpen;
+    this.dispatchEvent(new CustomEvent("panel-button-toggled", {
+      detail: { open: this._panelOpen }
+    }));
+  }
+};
+PdIconPanelButton.styles = [
+  css`
+
+      :host {
+        display: inline-block; /* Verhindert, dass :host die volle Breite bekommt */
+        position: relative;
+      }
+
+      .icon-button-style {
+        z-index: 2;
+        background: #58a linear-gradient(hsla(0, 0%, 100%, 0.2), transparent);
+        background-color: var(--pd-icon-button-bgcol, #0c6fc5);
+        padding: 0.3em 0.8em;
+        border: 1px solid var(--pd-icon-button-bordercol, rgba(0, 0, 0, 0.5));
+        border-radius: 0.2em;
+        transition: background-color 0.3s ease;
+        --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%;
+        line-height: 1.5;        
+      }   
+
+      :host(:not([disabled])) .icon-button-style:hover {
+        background-color: var(--pd-icon-button-bgcol-hover, #fdae03f3);
+        cursor: pointer;
+      }
+
+      :host([disabled]) .icon-button-style {
+        background: linear-gradient(to bottom, #e0e0e0, #c4c4c4); /* Matte, deaktivierte Optik */
+        color: #696868; /* Text weniger dominant */
+        border-color: #b0b0b0; /* Weniger Kontrast */
+        cursor: not-allowed;
+        opacity: 0.6; /* Leichter "inaktiv"-Effekt */
+        text-shadow: none; /* Kein 3D-Effekt */
+      }
+
+      :host(:not([disabled])[primary]) .icon-button-style {
+        background-color: var(--pd-icon-button-primary-bgcol, #044176);
+        color: var(--pd-icon-button-primary-txtcol, white);
+      }
+
+      :host(:not([disabled])[primary]) .icon-button-style:hover {        
+        background-color: var(--pd-icon-button-primary-bgcol-hover, #fdae03f3);
+        cursor: pointer;
+      }
+
+      .panel {
+        position: absolute;
+        width: max-content; /* Verhindert volle Breite */
+        min-width: 120%; /* Panel wird etwas breiter als der Button */
+        max-width: 300px; /* Optional: Maximale Breite */
+        transform: scaleY(0);
+        background: var(--pd-panel-bg, white);
+        border-radius: 5px;
+        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;
+      }      
+
+      .panel.open {
+        transform: scaleY(1);
+        opacity: 1;
+      }
+
+      .panel-content {
+        padding: 1rem;
+        min-height: 50px;
+      }
+
+      .close-button {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        background: transparent;
+        border: none;
+        color: #555;
+        font-size: 1.2rem;
+        cursor: pointer;
+        padding: 5px;
+        line-height: 1;
+        transition: color 0.2s ease-in-out;
+      }
+
+      .close-button:hover {
+        color: black;
+      }
+
+      /* Standard (nach unten öffnend, linksbündig) */
+      :host(:not([right]):not([up])) .panel {
+        left: 0; /* Panel beginnt exakt unter dem Button */
+        top: 100%; /* Panel öffnet sich nach unten */
+        transform-origin: top; /* Wächst nach unten */
+      }
+
+      /* Standard (nach unten öffnend, rechtsbündig) */
+      :host([right]:not([up])) .panel {
+        right: 0; /* Panel beginnt rechtsbündig am Button */
+        top: 100%;
+        transform-origin: top right;
+      }
+
+      /* 🔼 Panel öffnet sich nach OBEN (links ausgerichtet) */
+      :host(:not([right])[up]) .panel {
+        left: 0;
+        bottom: 100%; /* Panel öffnet sich nach oben */
+        transform-origin: bottom;
+      }
+
+      /* 🔼 Panel öffnet sich nach OBEN (rechts ausgerichtet) */
+      :host([right][up]) .panel {
+        right: 0;
+        bottom: 100%; /* Panel öffnet sich nach oben */
+        transform-origin: bottom right;
+      }
+
+      
+    `
+];
+__decorateClass([
+  property({ type: String })
+], PdIconPanelButton.prototype, "pdButtonIcon", 2);
+__decorateClass([
+  property({ type: String })
+], PdIconPanelButton.prototype, "buttonText", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdIconPanelButton.prototype, "panelButton", 2);
+__decorateClass([
+  state()
+], PdIconPanelButton.prototype, "_panelOpen", 2);
+PdIconPanelButton = __decorateClass([
+  customElement("pd-icon-panel-button")
+], PdIconPanelButton);
+export {
+  PdIconPanelButton
+};

package/dist/stories/pd-icon-button.stories.d.ts

@@ -0,0 +1,30 @@
+import { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+    render: (args: import('@storybook/csf').Args) => import('lit-html').TemplateResult<1>;
+    argTypes: {
+        pdButtonIcon: {
+            control: "text";
+        };
+        buttonText: {
+            control: "text";
+        };
+        panelButton: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const DefaultButton: Story;
+export declare const DefaulIcontButton: Story;
+export declare const DefaulIcontButtonDisabled: Story;
+export declare const DefaulIcontButtonPrimary: Story;
+export declare const DefaulIcontButtonPrimaryDisabled: Story;
+export declare const DefaulTextIcontButton: Story;
+export declare const PanelButton: Story;
+export declare const PanelButtonWithContent: Story;
+export declare const PanelButtonWithContentRight: Story;
+export declare const PanelButtonWithContentUp: Story;
+export declare const PanelButtonWithContentRightUp: Story;
+//# sourceMappingURL=pd-icon-button.stories.d.ts.map

package/dist/stories/pd-icon-button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-icon-button.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-icon-button.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,mCAAmC,CAAC;AAG3C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAoBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAGtB,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAQvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAQtC,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,KAS9C,CAAC;AAGF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAGF,eAAO,MAAM,sBAAsB,EAAE,KAgBpC,CAAC;AAGF,eAAO,MAAM,2BAA2B,EAAE,KAiBzC,CAAC;AAGF,eAAO,MAAM,wBAAwB,EAAE,KAiBtC,CAAC;AAGF,eAAO,MAAM,6BAA6B,EAAE,KAkB3C,CAAC"}

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

@@ -0,0 +1,13 @@
+import { CSSResultGroup, LitElement } from 'lit';
+export declare class PdIconPanelButton extends LitElement {
+    pdButtonIcon?: string;
+    buttonText: string;
+    panelButton: boolean;
+    private _panelOpen;
+    static styles: CSSResultGroup;
+    render(): import('lit-html').TemplateResult<1>;
+    private _onKeyDown;
+    private _buttonClicked;
+    private _togglePanel;
+}
+//# sourceMappingURL=pd-icon-panel-button.d.ts.map

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

@@ -0,0 +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,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"}

package/package.json

@@ -3,14 +3,15 @@
   "description": "Webcomponent pd-spa-helper following open-wc recommendations",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.5.15",
+  "version": "0.5.17",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./pd-panel-viewer": "./dist/pd-panel-viewer.js",
-    "./pd-panel": "./dist/pd-panel.js"
+    "./pd-panel": "./dist/pd-panel.js",
+    "./pd-pd-icon-panel-button": "./dist/pd-icon-panel-button.js"
   },
   "files": [
     "dist/",