@progressive-development/pd-forms 0.7.8 → 0.7.10-t

package/dist/index.d.ts

@@ -8,7 +8,8 @@ export { PdInputArea } from './pd-input-area.js';
 export { PdInputFile } from './pd-input-file.js';
 export { PdRadioGroup } from './pd-radio-group.js';
 export { PdBaseInputElement } from './pd-base-input-element.js';
-export type { PdAutocomplete, PdSelectOption, PdFieldType, PdFormElementStatus, PdFormValidatorFn, UNDEF, } from './types.js';
+export type { PdAutocomplete, PdSelectOption, PdFieldType, PdFormElementStatus, PdFormValidatorFn, ButtonData, } from './types.js';
+export { UNDEF } from './types.js';
 export * as pdValidator from './validators.js';
 export { templates as beTemplates } from './generated/locales/be.js';
 export { templates as deTemplates } from './generated/locales/de.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,KAAK,GACN,MAAM,YAAY,CAAC;AAEpB,OAAO,KAAK,WAAW,MAAM,iBAAiB,CAAC;AAE/C,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,GACX,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,KAAK,WAAW,MAAM,iBAAiB,CAAC;AAE/C,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

@@ -8,6 +8,7 @@ import { PdInputArea } from "./pd-input-area.js";
 import { PdInputFile } from "./pd-input-file.js";
 import { PdRadioGroup } from "./pd-radio-group.js";
 import { PdBaseInputElement } from "./pd-base-input-element.js";
+import { UNDEF } from "./types.js";
 import * as validators from "./validators.js";
 import { templates } from "./locales/be.js";
 import { templates as templates2 } from "./locales/de.js";
@@ -23,6 +24,7 @@ export {
   PdInputArea,
   PdInputFile,
   PdRadioGroup,
+  UNDEF,
   templates as beTemplates,
   templates2 as deTemplates,
   templates3 as enTemplates,

package/dist/pd-base-input-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-base-input-element.d.ts","sourceRoot":"","sources":["../src/pd-base-input-element.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,OAAO,EACL,aAAa,EAOd,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKxC;;GAEG;AACH,8BAAsB,kBAAmB,SAAQ,aAAa;IAC5D;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,gBAAgB,EAAE,cAAc,CAAS;IAEzC,SAAS,CAAC,MAAM,EACZ,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,OAAO,CAAC;IAEZ,OAAO,CAAC,aAAa,CAAC,CAAS;IAE/B,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAEO,YAAY,IAAI,IAAI;IAO7B,KAAK,IAAI,IAAI;IAIb,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAuBrC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IActC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAWrC,iCAAiC,CAAC,MAAM,EAAE,OAAO;IAQ1D,SAAS,CAAC,eAAe,IAAI,MAAM;CAgBpC"}
+{"version":3,"file":"pd-base-input-element.d.ts","sourceRoot":"","sources":["../src/pd-base-input-element.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,OAAO,EACL,aAAa,EAOd,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKxC;;GAEG;AACH,8BAAsB,kBAAmB,SAAQ,aAAa;IAC5D;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,gBAAgB,EAAE,cAAc,CAAS;IAEzC,SAAS,CAAC,MAAM,EACZ,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,OAAO,CAAC;IAEZ,OAAO,CAAC,aAAa,CAAC,CAAS;IAE/B,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAEO,YAAY,IAAI,IAAI;IAO7B,KAAK,IAAI,IAAI;IAIb,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAuBrC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IActC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAWrC,iCAAiC,CAAC,MAAM,EAAE,OAAO;IAO1D,SAAS,CAAC,eAAe,IAAI,MAAM;CAgBpC"}

package/dist/pd-base-input-element.js

@@ -70,7 +70,6 @@ const _PdBaseInputElement = class _PdBaseInputElement extends PdBaseUIInput {
     );
   }
   _handleStatusForInnerInputElement(status) {
-    console.log("Override date handle:", this._input, status);
     if (this._inputType === INPUT_TYPE_DATE && this._input) {
       this._input.error = !status;
       this._input.valid = status;

package/dist/pd-base-ui-input.js

@@ -323,7 +323,7 @@ const _PdBaseUIInput = class _PdBaseUIInput extends PdBaseUI {
         return Promise.resolve(true);
       });
     }
-    if (this._inputType === INPUT_TYPE_DATE) {
+    if (this._inputType === INPUT_TYPE_DATE && !dryRun) {
       this._handleStatusForInnerInputElement(true);
     }
     return Promise.resolve(true);

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

@@ -0,0 +1,13 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseUI } from './pd-base-ui';
+import { ButtonData } from './types';
+export declare class PdButtonGroup extends PdBaseUI {
+    buttonList: ButtonData[];
+    initValue: number[];
+    private _selectedButtons;
+    static styles: CSSResultGroup;
+    willUpdate(changedProps: Map<string, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private onClick;
+}
+//# sourceMappingURL=pd-button-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-button-group.d.ts","sourceRoot":"","sources":["../src/pd-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,qBACa,aAAc,SAAQ,QAAQ;IAEzC,UAAU,EAAE,UAAU,EAAE,CAAM;IAG9B,SAAS,EAAE,MAAM,EAAE,CAAM;IAGzB,OAAO,CAAC,gBAAgB,CAAgB;IAExC,OAAgB,MAAM,EAAE,cAAc,CAgDpC;IAEO,UAAU,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMpD,MAAM;IAiBf,OAAO,CAAC,OAAO;CAYhB"}

package/dist/pd-button-group.js

@@ -0,0 +1,117 @@
+import { css, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { PdBaseUI } from "./pd-base-ui.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;
+};
+let PdButtonGroup = class extends PdBaseUI {
+  constructor() {
+    super(...arguments);
+    this.buttonList = [];
+    this.initValue = [];
+    this._selectedButtons = [];
+  }
+  willUpdate(changedProps) {
+    if (changedProps.has("initValue")) {
+      this._selectedButtons = [...this.initValue];
+    }
+  }
+  render() {
+    return html`
+      <div class="button-group">
+        ${this.buttonList.map(
+      (data, index) => html`
+            <pd-icon-panel-button
+              ?selected="${this._selectedButtons.includes(index)}"
+              buttonText="${data.text || ""}"
+              pdButtonIcon="${data.pdIcon || ""}"
+              @button-clicked="${() => this.onClick(index)}"
+            ></pd-icon-panel-button>
+          `
+    )}
+      </div>
+    `;
+  }
+  onClick(index) {
+    if (this._selectedButtons.includes(index)) return;
+    this._selectedButtons = [index];
+    this.dispatchEvent(
+      new CustomEvent("pd-button-group-change", {
+        detail: { selected: this._selectedButtons },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+PdButtonGroup.styles = [
+  PdBaseUI.styles,
+  css`
+      :host {
+        --group-direction: var(--pd-button-group-direction, row);
+        --group-border-radius: var(--pd-border-radius, 0.5rem);
+        --group-width: var(--pd-button-group-width, auto);
+        --pd-icon-button-border-radius: 0;
+      }
+
+      .button-group {
+        display: flex;
+        flex-direction: var(--group-direction);
+        width: var(--group-width);
+      }
+
+      .button-group pd-icon-panel-button {
+        flex: 1 1 auto;
+        margin: 0;
+        border-radius: 0;
+        border: none;
+      }
+
+      .button-group pd-icon-panel-button:first-child {
+        border-top-left-radius: var(--group-border-radius);
+        border-bottom-left-radius: var(--group-border-radius);
+      }
+
+      .button-group pd-icon-panel-button:last-child {
+        border-top-right-radius: var(--group-border-radius);
+        border-bottom-right-radius: var(--group-border-radiusm);
+      }
+
+      /* Optional: für vertikale Ausrichtung spezifisch abrunden */
+      :host([vertical]) .button-group pd-icon-panel-button:first-child {
+        border-top-left-radius: var(--group-border-radius);
+        border-top-right-radius: var(--group-border-radius);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      :host([vertical]) .button-group pd-icon-panel-button:last-child {
+        border-bottom-left-radius: var(--group-border-radius);
+        border-bottom-right-radius: var(--group-border-radius);
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Array })
+], PdButtonGroup.prototype, "buttonList", 2);
+__decorateClass([
+  property({ type: Array })
+], PdButtonGroup.prototype, "initValue", 2);
+__decorateClass([
+  state()
+], PdButtonGroup.prototype, "_selectedButtons", 2);
+PdButtonGroup = __decorateClass([
+  customElement("pd-button-group")
+], PdButtonGroup);
+export {
+  PdButtonGroup
+};

package/dist/pd-icon-button-select-group.d.ts

@@ -0,0 +1,12 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseUI } from './pd-base-ui';
+import { ButtonData } from './types.js';
+export declare class PdIconButtonSelectGroup extends PdBaseUI {
+    options: ButtonData[];
+    initValue: number;
+    private _selectedValue;
+    static styles: CSSResultGroup;
+    render(): import('lit-html').TemplateResult<1> | "";
+    private handleSelectionChange;
+}
+//# sourceMappingURL=pd-icon-button-select-group.d.ts.map

package/dist/pd-icon-button-select-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-icon-button-select-group.d.ts","sourceRoot":"","sources":["../src/pd-icon-button-select-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,OAAO,wBAAwB,CAAC;AAChC,OAAO,mBAAmB,CAAC;AAE3B,qBACa,uBAAwB,SAAQ,QAAQ;IAEnD,OAAO,EAAE,UAAU,EAAE,CAAM;IAG3B,SAAS,EAAE,MAAM,CAAM;IAGvB,OAAO,CAAC,cAAc,CAA0B;IAEhD,OAAgB,MAAM,EAAE,cAAc,CAapC;IAEO,MAAM;IAuBf,OAAO,CAAC,qBAAqB;CAc9B"}

package/dist/pd-icon-button-select-group.js

@@ -0,0 +1,86 @@
+import { css, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { PdBaseUI } from "./pd-base-ui.js";
+import "./pd-icon-panel-button.js";
+import "./pd-button-group.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;
+};
+let PdIconButtonSelectGroup = class extends PdBaseUI {
+  constructor() {
+    super(...arguments);
+    this.options = [];
+    this.initValue = -1;
+    this._selectedValue = this.initValue;
+  }
+  render() {
+    if (!this.options || this.options.length === 0) {
+      return "";
+    }
+    const selectedData = this.options[this._selectedValue === -1 ? 0 : this._selectedValue];
+    return html`
+      <pd-icon-panel-button
+        panelButton
+        hideClose
+        .buttonText=${(selectedData == null ? void 0 : selectedData.text) ?? ""}
+        .pdButtonIcon=${(selectedData == null ? void 0 : selectedData.pdIcon) ?? ""}
+      >
+        <pd-button-group
+          class="button-group-style"
+          .buttonList=${this.options}
+          .initValue=${[this._selectedValue]}
+          @pd-button-group-change=${this.handleSelectionChange}
+        ></pd-button-group>
+      </pd-icon-panel-button>
+    `;
+  }
+  handleSelectionChange(e) {
+    const [newIndex] = e.detail.selected;
+    this._selectedValue = newIndex;
+    e.stopPropagation();
+    window.dispatchEvent(new Event("close-button-panel-event"));
+    this.dispatchEvent(
+      new CustomEvent("pd-button-selection-changed", {
+        detail: { selected: newIndex },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+PdIconButtonSelectGroup.styles = [
+  PdBaseUI.styles,
+  css`
+      :host {
+        display: block;
+        position: relative;
+        --pd-icon-panel-button-panel-padding: 0px;
+      }
+
+      .button-group-style {
+        --pd-button-group-direction: column;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Array })
+], PdIconButtonSelectGroup.prototype, "options", 2);
+__decorateClass([
+  property({ type: Number })
+], PdIconButtonSelectGroup.prototype, "initValue", 2);
+__decorateClass([
+  state()
+], PdIconButtonSelectGroup.prototype, "_selectedValue", 2);
+PdIconButtonSelectGroup = __decorateClass([
+  customElement("pd-icon-button-select-group")
+], PdIconButtonSelectGroup);
+export {
+  PdIconButtonSelectGroup
+};

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

@@ -6,7 +6,9 @@ export declare class PdIconPanelButton extends PdBaseUI {
     value?: string;
     panelButton: boolean;
     loading: boolean;
+    selected: boolean;
     disableOnClickTime: number;
+    hideClose: boolean;
     private _timerDisabled;
     private _panelOpen;
     static styles: CSSResultGroup;

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

@@ -1 +1 @@
-{"version":3,"file":"pd-icon-panel-button.d.ts","sourceRoot":"","sources":["../src/pd-icon-panel-button.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAMxC,qBACa,iBAAkB,SAAQ,QAAQ;IAE7C,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,kBAAkB,EAAE,MAAM,CAAM;IAGhC,OAAO,CAAC,cAAc,CAAkB;IAGxC,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAgB,MAAM,EAAE,cAAc,CA+KpC;IAEF,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,WAAW,CAEjB;IAGF,MAAM;IAkCN,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,YAAY;CAQrB"}
+{"version":3,"file":"pd-icon-panel-button.d.ts","sourceRoot":"","sources":["../src/pd-icon-panel-button.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAOxC,qBACa,iBAAkB,SAAQ,QAAQ;IAE7C,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,kBAAkB,EAAE,MAAM,CAAM;IAGhC,SAAS,EAAE,OAAO,CAAS;IAI3B,OAAO,CAAC,cAAc,CAAkB;IAGxC,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAgB,MAAM,EAAE,cAAc,CA+LpC;IAEF,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,WAAW,CAEjB;IAGF,MAAM;IA6CN,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,YAAY;CAQrB"}

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

@@ -3,6 +3,7 @@ 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";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -19,7 +20,9 @@ let PdIconPanelButton = class extends PdBaseUI {
     this.buttonText = "Ok";
     this.panelButton = false;
     this.loading = false;
+    this.selected = false;
     this.disableOnClickTime = -1;
+    this.hideClose = false;
     this._timerDisabled = false;
     this._panelOpen = false;
     this._closePanel = () => {
@@ -52,12 +55,19 @@ let PdIconPanelButton = class extends PdBaseUI {
                 ></pd-icon>
               ` : ""}
         <span>${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" : ""}">
-        <button class="close-button" @click="${this._togglePanel}">
-          &times;
-        </button>
+        ${this.hideClose ? "" : html`
+              <button class="close-button" @click="${this._togglePanel}">
+                &times;
+              </button>
+            `}
         <div class="panel-content">
           <slot></slot>
         </div>
@@ -203,7 +213,7 @@ PdIconPanelButton.styles = [
       }
 
       .panel-content {
-        padding: 1rem;
+        padding: var(--pd-icon-panel-button-panel-padding, 1rem);
         min-height: 50px;
       }
 
@@ -264,6 +274,22 @@ PdIconPanelButton.styles = [
         margin-right: 1rem;
       }
 
+      :host([selected]:not([disabled]):not([_timerDisabled]))
+        .icon-button-style {
+        background-color: var(
+          --pd-icon-button-bgcol-selected,
+          var(--pd-secondary-col)
+        );
+        box-shadow:
+          inset 0 2px 6px rgba(0, 0, 0, 0.4),
+          0 0 0 2px rgba(0, 0, 0, 0.1);
+        text-shadow: none;
+      }
+
+      .toggle-button {
+        padding-left: 0.5rem;
+      }
+
       @keyframes spin {
         0% {
           transform: rotate(0deg);
@@ -289,9 +315,15 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], PdIconPanelButton.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdIconPanelButton.prototype, "selected", 2);
 __decorateClass([
   property({ type: Number })
 ], PdIconPanelButton.prototype, "disableOnClickTime", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdIconPanelButton.prototype, "hideClose", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], PdIconPanelButton.prototype, "_timerDisabled", 2);

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

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+    component: string;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj;
+export declare const DefaultHorizontal: Story;
+export declare const WithInitialSelection: Story;
+export declare const VerticalGroup: Story;
+export declare const NoInitialSelection: Story;
+export declare const EventLogging: Story;
+export declare const IconGroup: Story;
+export declare const VerticalIconGroup: Story;
+//# sourceMappingURL=pd-button-group.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-button-group.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-button-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,uBAAuB,CAAC;AAS/B,QAAA,MAAM,IAAI;;;;CAIM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAIhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAC"}

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

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+    component: string;
+    tags: string[];
+    render: (args: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
+    argTypes: {
+        initValue: {
+            control: "number";
+        };
+        options: {
+            control: "object";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const InitSelectionSecond: Story;
+//# sourceMappingURL=pd-icon-button-select-group.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-icon-button-select-group.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-icon-button-select-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,mCAAmC,CAAC;AAG3C,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAeM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAQtB,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAQjC,CAAC"}

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

@@ -30,4 +30,5 @@ export declare const PanelButtonWithContent: Story;
 export declare const PanelButtonWithContentRight: Story;
 export declare const PanelButtonWithContentUp: Story;
 export declare const PanelButtonWithContentRightUp: Story;
+export declare const ButtonSelected: Story;
 //# sourceMappingURL=pd-icon-button.stories.d.ts.map

package/dist/stories/pd-icon-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;AAGpC,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,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"}
+{"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;AAGpC,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,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"}

package/dist/types.d.ts

@@ -17,6 +17,10 @@ export interface PdFormElementStatus {
 export type PdFormValidatorFn = (value: any) => string | null | Promise<string | null>;
 export type PdFieldType = "text" | "number" | "mail" | "vat" | "phone";
 export declare const UNDEF = "UNDEF";
+export interface ButtonData {
+    text?: string;
+    pdIcon?: string;
+}
 /**
  * MDN-konforme Autocomplete-Werte.
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC9B,KAAK,EAAE,GAAG,KACP,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;AAEvE,eAAO,MAAM,KAAK,UAAU,CAAC;AAE7B;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,KAAK,GACL,MAAM,GACN,kBAAkB,GAClB,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,kBAAkB,GAClB,UAAU,GACV,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,OAAO,GACP,oBAAoB,GACpB,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,cAAc,GACd,aAAa,GACb,KAAK,GACL,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,WAAW,GACX,MAAM,GACN,UAAU,GACV,YAAY,GACZ,WAAW,GACX,KAAK,GACL,KAAK,GACL,OAAO,GACP,SAAS,GACT,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,WAAW,GACX,QAAQ,GACR,cAAc,GACd,aAAa,GACb,QAAQ,GACR,SAAS,GACT,sBAAsB,GACtB,oBAAoB,GACpB,UAAU,GACV,eAAe,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC9B,KAAK,EAAE,GAAG,KACP,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;AAEvE,eAAO,MAAM,KAAK,UAAU,CAAC;AAE7B,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,KAAK,GACL,MAAM,GACN,kBAAkB,GAClB,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,kBAAkB,GAClB,UAAU,GACV,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,OAAO,GACP,oBAAoB,GACpB,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,cAAc,GACd,aAAa,GACb,KAAK,GACL,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,WAAW,GACX,MAAM,GACN,UAAU,GACV,YAAY,GACZ,WAAW,GACX,KAAK,GACL,KAAK,GACL,OAAO,GACP,SAAS,GACT,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,WAAW,GACX,QAAQ,GACR,cAAc,GACd,aAAa,GACb,QAAQ,GACR,SAAS,GACT,sBAAsB,GACtB,oBAAoB,GACpB,UAAU,GACV,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-forms",
-  "version": "0.7.8",
+  "version": "0.7.10t",
   "description": "Webcomponent pd-forms for rendering form input elements.",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
@@ -10,7 +10,9 @@
   "exports": {
     ".": "./dist/index.js",
     "./pd-button": "./dist/pd-button.js",
+    "./pd-button-group": "./dist/pd-button-group.js",
     "./pd-icon-panel-button": "./dist/pd-icon-panel-button.js",
+    "./pd-icon-button-select-group": "./dist/pd-icon-button-select-group.js",
     "./pd-checkbox": "./dist/pd-checkbox.js",
     "./pd-form-container": "./dist/pd-form-container.js",
     "./pd-form-row": "./dist/pd-form-row.js",