@progressive-development/pd-forms 0.7.1 → 0.7.3

package/dist/pd-base-ui-input.d.ts

@@ -55,6 +55,7 @@ export declare abstract class PdBaseUIInput extends PdBaseUI {
     static styles: CSSResultGroup;
     update(changedProps: PropertyValues<this>): void;
     firstUpdated(): void;
+    disconnectedCallback(): void;
     get errorMsg(): string;
     set errorMsg(msg: string);
     get value(): string;
@@ -64,6 +65,7 @@ export declare abstract class PdBaseUIInput extends PdBaseUI {
     reset(): void;
     clear(): void;
     protected _registerAtContainer(valid: boolean): void;
+    protected _unRegisterAtContainer(): void;
     private _collectValidators;
     protected _handleChangedValue(newValue: string, event: Event | undefined, dispatchEvent?: boolean, checkReturn?: boolean, callback?: () => void): void;
     protected _dispatchChange(value: string, eventName?: string): void;

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

@@ -1 +1 @@
-{"version":3,"file":"pd-base-ui-input.d.ts","sourceRoot":"","sources":["../src/pd-base-ui-input.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"pd-base-ui-input.d.ts","sourceRoot":"","sources":["../src/pd-base-ui-input.ts"],"names":[],"mappings":"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"}

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

@@ -66,6 +66,10 @@ const _PdBaseUIInput = class _PdBaseUIInput extends PdBaseUI {
       this._registerAtContainer(result);
     });
   }
+  disconnectedCallback() {
+    this._unRegisterAtContainer();
+    super.disconnectedCallback();
+  }
   get errorMsg() {
     return this._errorMsg;
   }
@@ -138,6 +142,26 @@ const _PdBaseUIInput = class _PdBaseUIInput extends PdBaseUI {
       })
     );
   }
+  _unRegisterAtContainer() {
+    this.dispatchEvent(
+      new CustomEvent("pd-form-element-unregister", {
+        detail: {
+          name: this.valueName || this.id || "field",
+          value: this._getInitialValue(),
+          state: {
+            pristine: this._pristine,
+            dirty: this._dirty,
+            touched: this._touched,
+            focused: this._focused,
+            valid: this._valid,
+            invalid: this._invalid
+          }
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
   _collectValidators() {
     const validators = [];
     if (this.required) {

package/dist/pd-form-container.d.ts

@@ -21,6 +21,7 @@ export declare class PdFormContainer extends PdBaseUI {
     render(): TemplateResult;
     private _renderValidationInfo;
     private _onRegister;
+    private _onUnRegister;
     private _onChange;
     private _onBlur;
     private _onFocus;

package/dist/pd-form-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-form-container.d.ts","sourceRoot":"","sources":["../src/pd-form-container.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,qBACa,eAAgB,SAAQ,QAAQ;IAC3C;;OAEG;IAEH,iBAAiB,UAAS;IAE1B;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,SAAM;IAGjB,OAAO,CAAC,OAAO,CAA+C;IAE9D,OAAgB,MAAM,EAAE,cAAc,CAgCpC;IAEO,iBAAiB,IAAI,IAAI;IAoBzB,oBAAoB,IAAI,IAAI;IAoB5B,MAAM,IAAI,cAAc;IASjC,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,WAAW,CAqBjB;IAEF,OAAO,CAAC,SAAS,CA0Bf;IAEF,OAAO,CAAC,OAAO,CAQb;IAEF,OAAO,CAAC,QAAQ,CAOd;IAEF,OAAO,CAAC,mBAAmB;IASd,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAYzC,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAYhC,KAAK,IAAI,IAAI;IAMb,SAAS,IAAI,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAIpD,IAAI,KAAK,YAER;CACF"}
+{"version":3,"file":"pd-form-container.d.ts","sourceRoot":"","sources":["../src/pd-form-container.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,qBACa,eAAgB,SAAQ,QAAQ;IAC3C;;OAEG;IAEH,iBAAiB,UAAS;IAE1B;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,SAAM;IAGjB,OAAO,CAAC,OAAO,CAA+C;IAE9D,OAAgB,MAAM,EAAE,cAAc,CAgCpC;IAEO,iBAAiB,IAAI,IAAI;IAwBzB,oBAAoB,IAAI,IAAI;IAwB5B,MAAM,IAAI,cAAc;IAWjC,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,WAAW,CA6BjB;IAEF,OAAO,CAAC,aAAa,CAkBnB;IAEF,OAAO,CAAC,SAAS,CA0Bf;IAEF,OAAO,CAAC,OAAO,CAQb;IAEF,OAAO,CAAC,QAAQ,CAOd;IAEF,OAAO,CAAC,mBAAmB;IAad,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAYzC,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAYhC,KAAK,IAAI,IAAI;IAMb,SAAS,IAAI,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAIpD,IAAI,KAAK,YAER;CACF"}

package/dist/pd-form-container.js

@@ -36,6 +36,29 @@ let PdFormContainer = class extends PdBaseUI {
           element: e.target
         });
         this.requestUpdate();
+        this.dispatchEvent(
+          new CustomEvent("pd-form-change", {
+            detail: {
+              overallValidity: this._getOverallValidity()
+            }
+          })
+        );
+      }
+      e.stopPropagation();
+    };
+    this._onUnRegister = (e) => {
+      const { name, value, state: state2 } = e.detail;
+      console.debug("###### _onUnRegister", name, value, state2);
+      if (this._fields.has(name)) {
+        this._fields.delete(name);
+        this.requestUpdate();
+        this.dispatchEvent(
+          new CustomEvent("pd-form-change", {
+            detail: {
+              overallValidity: this._getOverallValidity()
+            }
+          })
+        );
       }
       e.stopPropagation();
     };
@@ -89,6 +112,10 @@ let PdFormContainer = class extends PdBaseUI {
       "pd-form-element-register",
       this._onRegister
     );
+    this.addEventListener(
+      "pd-form-element-unregister",
+      this._onUnRegister
+    );
     this.addEventListener(
       "pd-form-element-change",
       this._onChange
@@ -108,6 +135,10 @@ let PdFormContainer = class extends PdBaseUI {
       "pd-form-element-register",
       this._onRegister
     );
+    this.removeEventListener(
+      "pd-form-element-unregister",
+      this._onUnRegister
+    );
     this.removeEventListener(
       "pd-form-element-change",
       this._onChange
@@ -125,7 +156,7 @@ let PdFormContainer = class extends PdBaseUI {
     return html`
       <form>
         <slot></slot>
-        ${this.requiredFieldInfo ? this._renderValidationInfo() : ""}
+        ${this.requiredFieldInfo || this.commonError ? this._renderValidationInfo() : ""}
       </form>
     `;
   }
@@ -140,6 +171,9 @@ let PdFormContainer = class extends PdBaseUI {
     `;
   }
   _getOverallValidity() {
+    if (this._fields.size === 0) {
+      return false;
+    }
     for (const field of this._fields.values()) {
       if (field.invalid) {
         return false;

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

@@ -5,6 +5,9 @@ export declare class PdIconPanelButton extends PdBaseUI {
     buttonText: string;
     value?: string;
     panelButton: boolean;
+    loading: boolean;
+    disableOnClickTime: number;
+    private _timerDisabled;
     private _panelOpen;
     static styles: CSSResultGroup;
     connectedCallback(): void;

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;AAExC,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,CAAC,UAAU,CAAkB;IAEpC,OAAgB,MAAM,EAAE,cAAc,CAuIpC;IAEF,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,WAAW,CAEjB;IAGF,MAAM;IAgCN,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,cAAc;IActB,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;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"}

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

@@ -2,6 +2,7 @@ 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";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -17,6 +18,9 @@ let PdIconPanelButton = class extends PdBaseUI {
     super(...arguments);
     this.buttonText = "Ok";
     this.panelButton = false;
+    this.loading = false;
+    this.disableOnClickTime = -1;
+    this._timerDisabled = false;
     this._panelOpen = false;
     this._closePanel = () => {
       this._panelOpen = false;
@@ -40,13 +44,13 @@ let PdIconPanelButton = class extends PdBaseUI {
         @click="${this._buttonClicked}"
         @keydown="${this._onKeyDown}"
       >
-        ${this.pdButtonIcon ? html`
-              <pd-icon
-                class="icon action-icon-color"
-                icon="${this.pdButtonIcon}"
-                activeIcon
-              ></pd-icon>
-            ` : ""}
+        ${this.loading ? html`<div class="loader"></div>` : this.pdButtonIcon ? html`
+                <pd-icon
+                  class="icon action-icon-color"
+                  icon="${this.pdButtonIcon}"
+                  activeIcon
+                ></pd-icon>
+              ` : ""}
         <span>${this.buttonText}</span>
       </div>
 
@@ -70,6 +74,12 @@ let PdIconPanelButton = class extends PdBaseUI {
     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,
@@ -89,14 +99,18 @@ let PdIconPanelButton = class extends PdBaseUI {
   }
 };
 PdIconPanelButton.styles = [
+  PdColorStyles,
+  PdFontStyles,
   css`
       :host {
         display: inline-block; /* Verhindert, dass :host die volle Breite bekommt */
         position: relative;
         width: var(--pd-icon-button-width, auto);
+        font-family: var(--pd-default-font-title-family);
       }
 
-      :host([disabled]) {
+      :host([disabled]),
+      :host([_timerDisabled]) {
         pointer-events: none;
       }
 
@@ -106,14 +120,15 @@ PdIconPanelButton.styles = [
           --pd-icon-button-bg,
           #58a linear-gradient(hsla(0, 0%, 100%, 0.2), transparent)
         );
-        background-color: var(--pd-icon-button-bgcol, #0c6fc5);
+        background-color: var(--pd-icon-button-bgcol, var(--pd-default-col));
         padding: 0.3em 0.8em;
-        border: 1px solid var(--pd-icon-button-bordercol, rgba(0, 0, 0, 0.5));
+        border: 1px solid
+          var(--pd-icon-button-bordercol, var(--pd-default-dark-col));
         border-radius: var(--pd-icon-button-border-radius, 0.2em);
         transition: background-color 0.3s ease;
-        --pd-icon-size: 20px;
+        --pd-icon-size: 24px;
         color: var(--pd-icon-button-txtcol, white);
-        text-shadow: 0 - 0.05em 0.05em rgba(0, 0, 0, 0.5);
+        text-shadow: 0 -0.05em 0.05em rgba(0, 0, 0, 0.5);
         font-size: var(--pd-icon-button-font-size, 125%);
         line-height: var(--pd-icon-button-line-height, 1.5);
         height: var(--pd-icon-button-height, auto);
@@ -123,31 +138,43 @@ PdIconPanelButton.styles = [
         text-align: center;
       }
 
-      :host(:not([disabled])) .icon-button-style:hover {
-        background-color: var(--pd-icon-button-bgcol-hover, #fdae03f3);
+      :host(:not([disabled]):not([_timerDisabled])) .icon-button-style:hover {
+        background-color: var(
+          --pd-icon-button-bgcol-hover,
+          var(--pd-default-hover-col)
+        );
         cursor: pointer;
       }
 
-      :host([disabled]) .icon-button-style {
+      :host([disabled]) .icon-button-style,
+      :host([_timerDisabled]) .icon-button-style {
         background: linear-gradient(
           to bottom,
           #e0e0e0,
           #c4c4c4
         ); /* Matte, deaktivierte Optik */
-        color: #696868; /* Text weniger dominant */
-        border-color: #b0b0b0; /* Weniger Kontrast */
+        color: var(--pd-default-disabled-dark-col);
+        border-color: var(--pd-default-disabled-col);
         cursor: not-allowed;
         opacity: 0.6; /* Leichter "inaktiv"-Effekt */
-        text-shadow: none; /* Kein 3D-Effekt */
+        text-shadow: none;
       }
 
-      :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]):not([_timerDisabled])[primary])
+        .icon-button-style {
+        background-color: var(
+          --pd-icon-button-primary-bgcol,
+          var(--pd-secondary-col)
+        );
+        color: var(
+          --pd-icon-button-primary-txtcol,
+          var(--pd-default-darkest-col)
+        );
       }
 
-      :host(:not([disabled])[primary]) .icon-button-style:hover {
-        background-color: var(--pd-icon-button-primary-bgcol-hover, #fdae03f3);
+      :host(:not([disabled]):not([_timerDisabled])[primary])
+        .icon-button-style:hover {
+        background-color: var(--pd-secondary-dark-col);
         cursor: pointer;
       }
 
@@ -157,7 +184,10 @@ PdIconPanelButton.styles = [
         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);
+        background: var(
+          --pd-icon-button-panel-bg-col,
+          var(--pd-default-bg-col)
+        );
         border-radius: 5px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         transition:
@@ -183,7 +213,7 @@ PdIconPanelButton.styles = [
         right: 5px;
         background: transparent;
         border: none;
-        color: #555;
+        color: var(--pd-default-dark-col);
         font-size: 1.2rem;
         cursor: pointer;
         padding: 5px;
@@ -192,7 +222,7 @@ PdIconPanelButton.styles = [
       }
 
       .close-button:hover {
-        color: black;
+        color: var(--pd-default-darkest-col);
       }
 
       /* Standard (nach unten öffnend, linksbündig) */
@@ -222,6 +252,26 @@ PdIconPanelButton.styles = [
         bottom: 100%; /* Panel öffnet sich nach oben */
         transform-origin: bottom right;
       }
+
+      .loader {
+        border: 12px solid var(--pd-secondary-col);
+        border-top: 12px solid var(--pd-secondary-light-col);
+        border-radius: 50%;
+        width: 12px;
+        height: 12px;
+        animation: spin 2s linear infinite;
+
+        margin-right: 1rem;
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
     `
 ];
 __decorateClass([
@@ -236,6 +286,15 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], PdIconPanelButton.prototype, "panelButton", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdIconPanelButton.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Number })
+], PdIconPanelButton.prototype, "disableOnClickTime", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdIconPanelButton.prototype, "_timerDisabled", 2);
 __decorateClass([
   state()
 ], PdIconPanelButton.prototype, "_panelOpen", 2);

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

@@ -8,5 +8,6 @@ export declare class PdRadioGroup extends PdBaseUIInput {
     private _onInternalFocus;
     private _onInternalChange;
     private _onInternalRegister;
+    private _onInternalUnRegister;
 }
 //# sourceMappingURL=pd-radio-group.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-radio-group.d.ts","sourceRoot":"","sources":["../src/pd-radio-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,qBACa,YAAa,SAAQ,aAAa;IAC7C,OAAgB,MAAM,EAAE,cAAc,CAmBpC;IAEO,YAAY,IAAI,IAAI;IAuBpB,MAAM;IAmBf,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,mBAAmB;CAsB5B"}
+{"version":3,"file":"pd-radio-group.d.ts","sourceRoot":"","sources":["../src/pd-radio-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,qBACa,YAAa,SAAQ,aAAa;IAC7C,OAAgB,MAAM,EAAE,cAAc,CAmBpC;IAEO,YAAY,IAAI,IAAI;IA2BpB,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.js

@@ -13,6 +13,10 @@ var __decorateClass = (decorators, target, key, kind) => {
 let PdRadioGroup = class extends PdBaseUIInput {
   firstUpdated() {
     this.addEventListener("pd-form-element-register", this._onInternalRegister);
+    this.addEventListener(
+      "pd-form-element-unregister",
+      this._onInternalUnRegister
+    );
     this.addEventListener("pd-form-element-change", this._onInternalChange);
     this.addEventListener("pd-form-element-focus", this._onInternalFocus);
     this.addEventListener("pd-form-element-blur", this._onInternalBlur);
@@ -67,6 +71,11 @@ let PdRadioGroup = class extends PdBaseUIInput {
       }
     }
   }
+  _onInternalUnRegister(e) {
+    if (e.target !== this) {
+      e.stopPropagation();
+    }
+  }
   /*
     public reset(): void {
       const checkboxes = this.querySelectorAll("pd-checkbox");

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

@@ -13,12 +13,15 @@ declare const meta: {
             control: "boolean";
         };
     };
+    tags: string[];
 };
 export default meta;
 type Story = StoryObj;
 export declare const DefaultButton: Story;
 export declare const DefaulIcontButton: Story;
 export declare const DefaulIcontButtonDisabled: Story;
+export declare const DefaulIcontButtonTimerDisabled: Story;
+export declare const DefaulIcontButtonLoading: Story;
 export declare const DefaulIcontButtonPrimary: Story;
 export declare const DefaulIcontButtonPrimaryDisabled: Story;
 export declare const DefaulTextIcontButton: Story;

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;;;;;;;;;;;;;;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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-forms",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "Webcomponent pd-forms for rendering form input elements.",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",