@progressive-development/pd-forms 0.8.6 → 0.9.1

package/dist/pd-input.js

@@ -1,126 +1,8 @@
-import { css, html } from "lit";
-import { msg, str } from "@lit/localize";
-import { property, customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import "@progressive-development/pd-icon/pd-icon";
-import { INPUT_TYPE_TEXT } from "./pd-base-ui-input.js";
-import { PdBaseInputElement } from "./pd-base-input-element.js";
-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;
-};
-const onlyContainsNumbers = (str2) => /^\d+$/.test(str2);
-let PdInput = class extends PdBaseInputElement {
-  constructor() {
-    super();
-    this.icon = "";
-    this.secret = false;
-    this.maxlength = 500;
-    this.onlyNumbers = false;
-    this._inputType = INPUT_TYPE_TEXT;
-  }
-  connectedCallback() {
-    this._setupValidators();
-    super.connectedCallback();
-  }
-  _setupValidators() {
-    const validators = [];
-    if (this.minlength !== void 0) {
-      validators.push(
-        (value) => value.length < this.minlength ? msg(str`Mindestens ${this.minlength} Zeichen`) : null
-      );
-    }
-    if (this.maxlength !== void 0) {
-      validators.push(
-        (value) => value.length > this.maxlength ? msg(str`Maximal ${this.maxlength} Zeichen`) : null
-      );
-    }
-    this._validators = validators;
-  }
-  render() {
-    const inputId = `${this.id}Input`;
-    return html`
-      ${this._renderLabel(inputId)}
-      <div
-        class="${classMap(
-      this.getClassmap({
-        input: true
-      })
-    )}"
-      >
-        ${this.icon ? html`
-              <pd-icon
-                icon=${this.icon}
-                activeIcon
-                @click=${this._iconClicked}
-                class="infield-icon"
-              ></pd-icon>
-            ` : ""}
-        <input
-          id=${inputId}
-          name=${this.name || this.valueName || this.autoCompleteName}
-          autocomplete=${this.autoCompleteName ?? "off"}
-          class="input-style ${this.gradient ? "gradient" : ""}"
-          type=${this.secret ? "password" : "text"}
-          placeholder=${this.placeHolder}
-          .value=${this._value}
-          minlength=${this.minlength ?? ""}
-          maxlength=${this.maxlength ?? ""}
-          ?readonly=${this.readonly}
-          ?disabled=${this.disabled}
-          @keyup=${this._onKeyUp}
-          @blur=${this._onBlur}
-          @focus=${this._onFocus}
-        />
-      </div>
-      ${this._renderErrorMsg()}
-    `;
-  }
-  _onKeyUp(e) {
-    var _a;
-    if (this.onlyNumbers && ((_a = this._input) == null ? void 0 : _a.value) && !onlyContainsNumbers(this._input.value)) {
-      this._input.value = this._input.value.replace(/\D/g, "");
-    }
-    super._onKeyUp(e);
-  }
-  _iconClicked() {
-    this.dispatchEvent(
-      new CustomEvent("input-icon-click", { bubbles: true, composed: true })
-    );
-  }
-};
-PdInput.styles = [
-  PdBaseInputElement.styles,
-  css`
-      * {
-        box-sizing: border-box;
-      }
-    `
-];
-__decorateClass([
-  property({ type: String })
-], PdInput.prototype, "icon", 2);
-__decorateClass([
-  property({ type: Boolean })
-], PdInput.prototype, "secret", 2);
-__decorateClass([
-  property({ type: Number })
-], PdInput.prototype, "minlength", 2);
-__decorateClass([
-  property({ type: Number })
-], PdInput.prototype, "maxlength", 2);
-__decorateClass([
-  property({ type: Boolean })
-], PdInput.prototype, "onlyNumbers", 2);
-PdInput = __decorateClass([
-  customElement("pd-input")
-], PdInput);
-export {
-  PdInput
-};
+import { PdInput } from './pd-input/PdInput.js';
+
+const tag = "pd-input";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdInput);
+}
+
+export { PdInput };

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

@@ -0,0 +1,49 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseUI } from '../base/pd-base-ui';
+/**
+ * Ein kombinierter Icon-Button mit optionalem Panel (Dropdown-artig).
+ *
+ * @tag pd-panel-button
+ *
+ * @slot default - Inhalt des Panels, das unter dem Button angezeigt wird.
+ *
+ * @event button-clicked - Wird ausgelöst, wenn auf den Button geklickt wird (nur bei `panelButton = false`).
+ * @event panel-button-toggled - Wird ausgelöst, wenn das Panel geöffnet oder geschlossen wird.
+ *
+ * @cssprop --pd-icon-button-size - Größe des Icons im Button.
+ * @cssprop --pd-icon-button-bgcol - Hintergrundfarbe des Buttons.
+ * @cssprop --pd-icon-button-bordercol - Randfarbe des Buttons.
+ * @cssprop --pd-icon-button-padding - Innenabstand des Buttons.
+ * @cssprop --pd-icon-button-gap - Abstand zwischen Icon und Text.
+ * @cssprop --pd-icon-button-txtcol - Textfarbe des Buttons.
+ * @cssprop --pd-icon-button-font-size - Schriftgröße des Button-Texts.
+ * @cssprop --pd-icon-button-panel-bg-col - Hintergrundfarbe des Panels.
+ * @cssprop --pd-icon-button-panel-min-width - Mindestbreite des Panels.
+ * @cssprop --pd-icon-button-panel-max-width - Maximalbreite des Panels.
+ * @cssprop --pd-panel-button-panel-padding - Innenabstand des Panelinhalts.
+ * @cssprop --pd-icon-button-selected-bgcol - Hintergrundfarbe bei `selected`.
+ * @cssprop --pd-icon-button-selected-txtcol - Textfarbe bei `selected`.
+ * @cssprop --pd-icon-button-selected-shadow - Schatteneffekt bei `selected`.
+ */
+export declare class PdPanelButton extends PdBaseUI {
+    pdButtonIcon?: string;
+    buttonText: string;
+    value?: string;
+    panelButton: boolean;
+    loading: boolean;
+    selected: boolean;
+    primary: boolean;
+    disableOnClickTime: number;
+    hideClose: boolean;
+    private _timerDisabled;
+    private _panelOpen;
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _closePanel;
+    render(): import('lit').TemplateResult<1>;
+    private _onKeyDown;
+    private _buttonClicked;
+    private _togglePanel;
+}
+//# sourceMappingURL=PdPanelButton.d.ts.map

package/dist/pd-panel-button/PdPanelButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdPanelButton.d.ts","sourceRoot":"","sources":["../../src/pd-panel-button/PdPanelButton.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAO9C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,aAAc,SAAQ,QAAQ;IAEzC,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,UAAU,EAAE,MAAM,CAAQ;IAG1B,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,WAAW,EAAE,OAAO,CAAS;IAG7B,OAAO,EAAE,OAAO,CAAS;IAGzB,QAAQ,EAAE,OAAO,CAAS;IAG1B,OAAO,EAAE,OAAO,CAAS;IAGzB,kBAAkB,EAAE,MAAM,CAAM;IAGhC,SAAS,EAAE,OAAO,CAAS;IAI3B,OAAO,CAAC,cAAc,CAAkB;IAGxC,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAgB,MAAM,EAAE,cAAc,CA6OpC;IAEF,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,WAAW,CAEjB;IAGF,MAAM;IA8CN,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,YAAY;CAQrB"}

package/dist/{pd-icon-panel-button.js → pd-panel-button/PdPanelButton.js}

@@ -1,20 +1,20 @@
-import { css, html } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
-import "@progressive-development/pd-icon/pd-icon";
-import { PdBaseUI } from "./pd-base-ui.js";
-import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
-import { pdIcons } from "@progressive-development/pd-icon";
+import { css, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import '@progressive-development/pd-icon/pd-icon';
+import { PdBaseUI } from '../base/pd-base-ui.js';
+import { PdColorStyles, PdFontStyles } from '@progressive-development/pd-shared-styles';
+import { pdIcons } from '@progressive-development/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;
+  var result = void 0 ;
   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);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
-let PdIconPanelButton = class extends PdBaseUI {
+class PdPanelButton extends PdBaseUI {
   constructor() {
     super(...arguments);
     this.buttonText = "Ok";
@@ -30,88 +30,11 @@ let PdIconPanelButton = class extends PdBaseUI {
       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() {
-    return html`
-      <div
-        class="icon-button-style"
-        role="button"
-        tabindex="0"
-        @click="${this._buttonClicked}"
-        @keydown="${this._onKeyDown}"
-      >
-        ${this.loading ? html`<div class="loader"></div>` : this.pdButtonIcon ? html`
-                <pd-icon
-                  class="button-icon action-icon-color"
-                  icon="${this.pdButtonIcon}"
-                ></pd-icon>
-              ` : ""}
-        ${this.buttonText ? html`<span class="button-text">${this.buttonText}</span>` : ""}
-        ${this.panelButton ? html` <pd-icon
-              icon=${pdIcons.ICON_TOOGLE_ARROW}
-              ?activeIcon=${!this._panelOpen}
-              class="small toggle-button"
-            ></pd-icon>` : ""}
-      </div>
-
-      <div class="panel ${this._panelOpen ? "open" : ""}">
-        ${this.hideClose ? "" : html`
-              <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 {
-      if (this.disableOnClickTime > 0) {
-        this._timerDisabled = true;
-        window.setTimeout(() => {
-          this._timerDisabled = false;
-        }, this.disableOnClickTime);
-      }
-      this.dispatchEvent(
-        new CustomEvent("button-clicked", {
-          detail: this.value,
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  }
-  _togglePanel() {
-    this._panelOpen = !this._panelOpen;
-    this.dispatchEvent(
-      new CustomEvent("panel-button-toggled", {
-        detail: { open: this._panelOpen }
-      })
-    );
-  }
-};
-PdIconPanelButton.styles = [
-  PdColorStyles,
-  PdFontStyles,
-  css`
+  static {
+    this.styles = [
+      PdColorStyles,
+      PdFontStyles,
+      css`
       :host {
         display: inline-block; /* Verhindert, dass :host die volle Breite bekommt */
         position: relative;
@@ -267,7 +190,7 @@ PdIconPanelButton.styles = [
       }
 
       .panel-content {
-        padding: var(--pd-icon-panel-button-panel-padding, 1rem);
+        padding: var(--pd-panel-button-panel-padding, 1rem);
         min-height: 50px;
       }
 
@@ -345,43 +268,118 @@ PdIconPanelButton.styles = [
         }
       }
     `
-];
+    ];
+  }
+  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() {
+    return html`
+      <div
+        class="icon-button-style"
+        role="button"
+        tabindex="0"
+        @click="${this._buttonClicked}"
+        @keydown="${this._onKeyDown}"
+      >
+        ${this.loading ? html`<div class="loader"></div>` : this.pdButtonIcon ? html`
+                <pd-icon
+                  class="button-icon action-icon-color"
+                  icon="${this.pdButtonIcon}"
+                ></pd-icon>
+              ` : ""}
+        ${this.buttonText ? html`<span class="button-text">${this.buttonText}</span>` : ""}
+        ${this.panelButton ? html` <pd-icon
+              icon=${pdIcons.ICON_TOOGLE_ARROW}
+              ?activeIcon=${!this._panelOpen}
+              class="small toggle-button"
+            ></pd-icon>` : ""}
+      </div>
+
+      <div class="panel ${this._panelOpen ? "open" : ""}">
+        ${this.hideClose ? "" : html`
+              <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 {
+      if (this.disableOnClickTime > 0) {
+        this._timerDisabled = true;
+        window.setTimeout(() => {
+          this._timerDisabled = false;
+        }, this.disableOnClickTime);
+      }
+      this.dispatchEvent(
+        new CustomEvent("button-clicked", {
+          detail: this.value,
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  _togglePanel() {
+    this._panelOpen = !this._panelOpen;
+    this.dispatchEvent(
+      new CustomEvent("panel-button-toggled", {
+        detail: { open: this._panelOpen }
+      })
+    );
+  }
+}
 __decorateClass([
   property({ type: String })
-], PdIconPanelButton.prototype, "pdButtonIcon", 2);
+], PdPanelButton.prototype, "pdButtonIcon");
 __decorateClass([
   property({ type: String })
-], PdIconPanelButton.prototype, "buttonText", 2);
+], PdPanelButton.prototype, "buttonText");
 __decorateClass([
   property({ type: String })
-], PdIconPanelButton.prototype, "value", 2);
+], PdPanelButton.prototype, "value");
 __decorateClass([
   property({ type: Boolean })
-], PdIconPanelButton.prototype, "panelButton", 2);
+], PdPanelButton.prototype, "panelButton");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], PdIconPanelButton.prototype, "loading", 2);
+], PdPanelButton.prototype, "loading");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], PdIconPanelButton.prototype, "selected", 2);
+], PdPanelButton.prototype, "selected");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], PdIconPanelButton.prototype, "primary", 2);
+], PdPanelButton.prototype, "primary");
 __decorateClass([
   property({ type: Number })
-], PdIconPanelButton.prototype, "disableOnClickTime", 2);
+], PdPanelButton.prototype, "disableOnClickTime");
 __decorateClass([
   property({ type: Boolean })
-], PdIconPanelButton.prototype, "hideClose", 2);
+], PdPanelButton.prototype, "hideClose");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], PdIconPanelButton.prototype, "_timerDisabled", 2);
+], PdPanelButton.prototype, "_timerDisabled");
 __decorateClass([
   state()
-], PdIconPanelButton.prototype, "_panelOpen", 2);
-PdIconPanelButton = __decorateClass([
-  customElement("pd-icon-panel-button")
-], PdIconPanelButton);
-export {
-  PdIconPanelButton
-};
+], PdPanelButton.prototype, "_panelOpen");
+
+export { PdPanelButton };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-panel-button.d.ts","sourceRoot":"","sources":["../../src/pd-panel-button/pd-panel-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOnD,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/{stories/pd-icon-button.stories.d.ts → pd-panel-button/pd-panel-button.stories.d.ts}

@@ -1,18 +1,8 @@
 import { StoryObj } from '@storybook/web-components';
 declare const meta: {
     title: string;
-    render: (args: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
-    argTypes: {
-        pdButtonIcon: {
-            control: "text";
-        };
-        buttonText: {
-            control: "text";
-        };
-        panelButton: {
-            control: "boolean";
-        };
-    };
+    component: string;
+    render: (args: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
     tags: string[];
 };
 export default meta;
@@ -34,4 +24,4 @@ export declare const PanelButtonWithContentRightUp: Story;
 export declare const ButtonSelected: Story;
 export declare const ButtonSelectedWithIcon: Story;
 export declare const ButtonTransparent: Story;
-//# sourceMappingURL=pd-icon-button.stories.d.ts.map
+//# sourceMappingURL=pd-panel-button.stories.d.ts.map

package/dist/{stories/pd-icon-button.stories.d.ts.map → pd-panel-button/pd-panel-button.stories.d.ts.map}

@@ -1 +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,4BAA4B,CAAC;AAIpC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAuBM,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,8BAA8B,EAAE,KAQ5C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAQtC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAQtC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,KAQ/C,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;AAEF,eAAO,MAAM,cAAc,EAAE,KAuB5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAwBpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAgH/B,CAAC"}
+{"version":3,"file":"pd-panel-button.stories.d.ts","sourceRoot":"","sources":["../../src/pd-panel-button/pd-panel-button.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,sBAAsB,CAAC;AAI9B,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,8BAA8B,EAAE,KAQ5C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAQtC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAQtC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,KAQ/C,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;AAEF,eAAO,MAAM,cAAc,EAAE,KAuB5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAwBpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAgH/B,CAAC"}

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

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

package/dist/pd-panel-button.js

@@ -0,0 +1,8 @@
+import { PdPanelButton } from './pd-panel-button/PdPanelButton.js';
+
+const tag = "pd-panel-button";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdPanelButton);
+}
+
+export { PdPanelButton };

package/dist/pd-radio-group/PdRadioGroup.d.ts

@@ -0,0 +1,16 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseUIInput } from '../base/pd-base-ui-input.js';
+/**
+ * @tagname pd-radio-group
+ */
+export declare class PdRadioGroup extends PdBaseUIInput {
+    static styles: CSSResultGroup;
+    firstUpdated(): void;
+    render(): import('lit').TemplateResult<1>;
+    private _onInternalBlur;
+    private _onInternalFocus;
+    private _onInternalChange;
+    private _onInternalRegister;
+    private _onInternalUnRegister;
+}
+//# sourceMappingURL=PdRadioGroup.d.ts.map

package/dist/pd-radio-group/PdRadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdRadioGroup.d.ts","sourceRoot":"","sources":["../../src/pd-radio-group/PdRadioGroup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D;;GAEG;AACH,qBAAa,YAAa,SAAQ,aAAa;IAC7C,OAAgB,MAAM,EAAE,cAAc,CAmBpC;IAEO,YAAY,IAAI,IAAI;IAyBpB,MAAM;IAmBf,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,qBAAqB;CAmB9B"}

package/dist/pd-radio-group/PdRadioGroup.js

@@ -0,0 +1,114 @@
+import { css, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { PdBaseUIInput } from '../base/pd-base-ui-input.js';
+
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ *
+ * RadioGroup für pd-checkbox Elemente.
+ *
+ * - Erlaubt Auswahl genau eines Wertes aus mehreren Checkboxen
+ * - Setzt `readonly` auf die selektierte Option
+ * - Sendet `validate-form` Event nach Änderungen
+ */
+class PdRadioGroup extends PdBaseUIInput {
+  static {
+    this.styles = [
+      PdBaseUIInput.styles,
+      css`
+      .group-style {
+        display: flex;
+        gap: var(--pd-cb-group-gap, 20px);
+        flex-direction: var(--pd-cb-group-direction, row);
+        flex-wrap: wrap;
+        padding: var(--pd-input-label-padding, 0);
+        padding-top: 5px;
+      }
+
+      ::slotted(pd-checkbox) {
+        --pd-cb-border-col-readonly: var(
+          --pd-cb-border-col,
+          var(--pd-default-col)
+        );
+      }
+    `
+    ];
+  }
+  firstUpdated() {
+    this.addEventListener("pd-form-element-register", this._onInternalRegister);
+    this.addEventListener("pd-form-element-change", this._onInternalChange);
+    this.addEventListener("pd-form-element-focus", this._onInternalFocus);
+    this.addEventListener("pd-form-element-blur", this._onInternalBlur);
+    super.firstUpdated();
+  }
+  render() {
+    const radioInputId = `${this.id}RadioGroup`;
+    return html`
+      ${this._renderLabel(radioInputId)}
+      <div
+        id=${radioInputId}
+        class="${classMap(
+      this.getClassmap({
+        "group-style": true,
+        input: true
+      })
+    )}"
+      >
+        <slot></slot>
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+  _onInternalBlur(e) {
+    e.stopPropagation();
+  }
+  _onInternalFocus(e) {
+    e.stopPropagation();
+  }
+  _onInternalChange(e) {
+    if (e.target !== this) {
+      e.stopPropagation();
+      const target = e.target;
+      const checkboxes = this.querySelectorAll("pd-checkbox");
+      let newValue;
+      checkboxes.forEach((el) => {
+        const isActive = el === target;
+        el.readonly = isActive;
+        el.setCheckedState(isActive ? "true" : "false");
+        if (isActive) {
+          newValue = el.valueName;
+        }
+      });
+      this.value = newValue || "";
+    }
+  }
+  _onInternalRegister(e) {
+    if (e.target !== this) {
+      e.stopPropagation();
+      if (e.detail.value === "true") {
+        this.value = e.detail.name;
+      }
+    }
+  }
+  _onInternalUnRegister(e) {
+    if (e.target !== this) {
+      e.stopPropagation();
+    }
+  }
+  /*
+    public reset(): void {
+      const checkboxes = this.querySelectorAll("pd-checkbox");
+      checkboxes.forEach((el) => {                  
+        (el as any).reset();
+      });
+      super.reset();
+    }
+  
+    public clear(): void {
+      this.reset();
+    }
+    */
+}
+
+export { PdRadioGroup };

package/dist/pd-radio-group/pd-radio-group.d.ts

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

package/dist/pd-radio-group/pd-radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-radio-group.d.ts","sourceRoot":"","sources":["../../src/pd-radio-group/pd-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/{stories/radio-group.stories.d.ts → pd-radio-group/pd-radio-group.stories.d.ts}

@@ -6,4 +6,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj;
 export declare const RadioGroup: Story;
-//# sourceMappingURL=radio-group.stories.d.ts.map
+//# sourceMappingURL=pd-radio-group.stories.d.ts.map

package/dist/pd-radio-group/pd-radio-group.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-radio-group.stories.d.ts","sourceRoot":"","sources":["../../src/pd-radio-group/pd-radio-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,+BAA+B,CAAC;AACvC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2CAA2C,CAAC;AAGnD,QAAA,MAAM,IAAI;;;CAGM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,UAAU,EAAE,KAiDxB,CAAC"}