@progressive-development/pd-forms 0.9.2 → 1.0.1

package/dist/pd-suggestion-box/PdSuggestionPanel.js

@@ -0,0 +1,227 @@
+import { LitElement, css, nothing, html } from 'lit';
+import { msg } from '@lit/localize';
+import { property } from 'lit/decorators.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class PdSuggestionPanel extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.loading = false;
+    this.displayElements = [];
+    this.activeIndex = -1;
+  }
+  static {
+    this.styles = [
+      css`
+      :host {
+        display: block;
+        position: relative;
+        z-index: var(--pd-suggestion-panel-z-index, 1000);
+      }
+
+      ul {
+        position: absolute;
+        width: var(--pd-input-field-width);
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        background: var(
+          --pd-suggestion-panel-bg-gradient,
+          linear-gradient(
+            to right,
+            var(--pd-default-bg-light-col, #f4fcff) 50%,
+            var(--pd-suggestion-panel-bg, var(--pd-default-bg-col, white)) 100%
+          )
+        );
+
+        box-shadow: var(
+          --pd-suggestion-panel-shadow,
+          var(--pd-shadow-lg, 3px 3px 5px 0 #ccc)
+        );
+        border: var(
+          --pd-suggestion-panel-border,
+          1px solid var(--pd-default-light-col, white)
+        );
+        border-radius: var(--pd-radius-md);
+
+        overflow-y: auto;
+        max-height: var(--pd-suggestion-panel-max-height, 15em);
+      }
+
+      li {
+        margin: 0;
+        padding: var(--pd-suggestion-item-padding, 0.5em);
+      }
+
+      .select-el:hover,
+      .select-el.highlighted {
+        background-color: var(
+          --pd-suggestion-item-hover-bg,
+          var(--pd-default-hover-col)
+        );
+        border: var(
+          --pd-suggestion-item-hover-border,
+          1px solid var(--pd-default-light-col, #cadfe5)
+        );
+        cursor: pointer;
+      }
+
+      .select-el.highlighted {
+        outline: 2px solid
+          var(
+            --pd-suggestion-item-focus-outline,
+            var(--pd-default-col, #067394)
+          );
+        outline-offset: -2px;
+      }
+
+      .loader-el {
+        display: flex;
+        align-items: center;
+        color: var(
+          --pd-suggestion-item-name-color,
+          var(--pd-default-font-col, #3c3c3b)
+        );
+        font-family: var(--pd-default-font-input-family);
+        font-size: var(--pd-suggestion-item-subinfo-size, 0.875rem);
+      }
+
+      .loader {
+        border: 10px solid
+          var(--pd-suggestion-loader-color, var(--pd-default-dark-col, #0a3a48));
+        border-top: 10px solid
+          var(
+            --pd-suggestion-loader-active-color,
+            var(--pd-default-col, #067394)
+          );
+        border-radius: 50%;
+        width: 10px;
+        height: 10px;
+        animation: spin 2s linear infinite;
+        margin: 0.5em;
+      }
+
+      p {
+        margin: 0 0 0.25rem;
+        font-size: var(
+          --pd-suggestion-item-name-size,
+          var(--pd-default-font-input-size, 1.05rem)
+        );
+        font-family: var(--pd-default-font-input-family);
+        pointer-events: none;
+      }
+
+      small {
+        display: block;
+        font-size: var(--pd-suggestion-item-subinfo-size, 0.875rem);
+        color: var(
+          --pd-suggestion-item-subinfo-color,
+          var(--pd-default-font-muted-col, #666)
+        );
+        font-family: var(--pd-default-font-content-family);
+      }
+
+      b {
+        font-size: var(
+          --pd-suggestion-item-name-size,
+          var(--pd-default-font-input-size, 1.05rem)
+        );
+        color: var(
+          --pd-suggestion-item-name-color,
+          var(--pd-default-font-col, #3c3c3b)
+        );
+        font-family: var(--pd-default-font-input-family);
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    `
+    ];
+  }
+  render() {
+    return html`
+      ${this.displayElements.length > 0 || this.loading ? html`
+            <ul role="listbox">
+              ${this.displayElements.map(
+      (el, index) => html`
+                  <li
+                    class="select-el ${index === this.activeIndex ? "highlighted" : ""}"
+                    role="option"
+                    id="option-${el.id}"
+                    aria-selected="${index === this.activeIndex}"
+                    @click="${this._selectElement}"
+                    data-id="${el.id}"
+                  >
+                    <p>
+                      <b>${el.name}</b> ${el.subInfo ? html`<small>${el.subInfo}</small>` : nothing}
+                    </p>
+                  </li>
+                `
+    )}
+              ${this.loading ? html`
+                    <li class="loader-el" aria-live="polite">
+                      <div class="loader" aria-hidden="true"></div>
+                      ${msg("Daten werden geladen", {
+      id: "pd.suggestion.box.load.data"
+    })}
+                    </li>
+                  ` : nothing}
+            </ul>
+          ` : nothing}
+    `;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("activeIndex") && this.activeIndex >= 0) {
+      this._scrollActiveIntoView();
+    }
+  }
+  _scrollActiveIntoView() {
+    const option = this.shadowRoot?.querySelector(
+      `#option-${this.displayElements[this.activeIndex]?.id}`
+    );
+    option?.scrollIntoView({ block: "nearest" });
+  }
+  _selectElement(e) {
+    const target = e.target;
+    const el = this.displayElements.filter(
+      (de) => de.id === target?.dataset.id
+    )[0];
+    this.dispatchEvent(
+      new CustomEvent("element-selected", {
+        detail: el.objectValue || el,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+}
+__decorateClass([
+  property({ type: Boolean })
+], PdSuggestionPanel.prototype, "loading");
+__decorateClass([
+  property({ type: Array })
+], PdSuggestionPanel.prototype, "displayElements");
+__decorateClass([
+  property({ type: Number })
+], PdSuggestionPanel.prototype, "activeIndex");
+const tag = "pd-suggestion-panel";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdSuggestionPanel);
+}
+
+export { PdSuggestionPanel };

package/dist/pd-suggestion-box/pd-suggestion-box.d.ts

@@ -0,0 +1,3 @@
+import { PdSuggestionBox } from './PdSuggestionBox';
+export { PdSuggestionBox };
+//# sourceMappingURL=pd-suggestion-box.d.ts.map

package/dist/pd-suggestion-box/pd-suggestion-box.d.ts.map

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

package/dist/pd-suggestion-box/pd-suggestion-box.stories.d.ts

@@ -0,0 +1,79 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * Story arguments interface for pd-suggestion-box component.
+ * Defines all configurable properties available in Storybook controls.
+ */
+interface PdSuggestionBoxArgs {
+    /** Label text displayed above the input */
+    label: string;
+    /** Placeholder text for the input field */
+    placeholder: string;
+    /** Minimum characters required before triggering search */
+    minCharsToSearch: number;
+    /** Delay in milliseconds before executing search */
+    delayTime: number;
+    /** Maximum number of results to display */
+    maxResult: number;
+    /** Whether the field is required */
+    required: boolean;
+    /** Whether to show "create new" option when no results found */
+    createNewEmptyItem: boolean;
+    /** Simulated API response delay for demos */
+    timeout: number;
+}
+/**
+ * ## pd-suggestion-box
+ *
+ * An autocomplete/typeahead component that fetches suggestions from an async data source.
+ *
+ * ### Features
+ * - **Async Search**: Fetches suggestions via a configurable async function
+ * - **Debounced Input**: Configurable delay before triggering search
+ * - **Minimum Characters**: Configurable minimum input length before searching
+ * - **Local Filtering**: Filters cached results for faster subsequent searches
+ * - **Create New Option**: Optional ability to create new entries when no match found
+ * - **Loading State**: Shows loading indicator during async operations
+ * - **Error Handling**: Displays error message on search failures
+ *
+ * ### Usage
+ * ```html
+ * <pd-suggestion-box
+ *   label="Search Products"
+ *   placeholder="Type to search..."
+ *   minCharsToSearch="2"
+ *   .callFunction="${async (input) => {
+ *     const response = await fetch(`/api/search?q=${input}`);
+ *     return response.json();
+ *   }}"
+ * ></pd-suggestion-box>
+ * ```
+ */
+declare const meta: Meta<PdSuggestionBoxArgs>;
+export default meta;
+type Story = StoryObj<PdSuggestionBoxArgs>;
+/**
+ * Default suggestion box with product search.
+ * Type at least 2 characters to see suggestions.
+ */
+export declare const Default: Story;
+/**
+ * Required suggestion box -- shows the required indicator (asterisk).
+ */
+export declare const Required: Story;
+/**
+ * Suggestion box with "create new" option enabled.
+ * When no matches are found, offers to create a new entry.
+ */
+export declare const WithCreateNew: Story;
+/**
+ * Loading state (slow API) and error state side by side.
+ * Demonstrates both async feedback states in one view.
+ */
+export declare const LoadingAndError: Story;
+/**
+ * Multiple suggestion boxes in a form -- real-world usage pattern.
+ */
+export declare const FormIntegration: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-suggestion-box.stories.d.ts.map

package/dist/pd-suggestion-box/pd-suggestion-box.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-suggestion-box.stories.d.ts","sourceRoot":"","sources":["../../src/pd-suggestion-box/pd-suggestion-box.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,wBAAwB,CAAC;AAChC,OAAO,2BAA2B,CAAC;AAOnC;;;GAGG;AACH,UAAU,mBAAmB;IAC3B,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,gBAAgB,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,SAAS,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,kBAAkB,EAAE,OAAO,CAAC;IAC5B,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;CACjB;AA+FD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAkFnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAM3C;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KA6B3B,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KA0C7B,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAkD7B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA0H3B,CAAC"}

package/dist/pd-suggestion-box.d.ts

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

package/dist/pd-suggestion-box.js

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

package/dist/pd-utils/dist/position-helper.js

@@ -0,0 +1,35 @@
+function calculateFloatingPosition(options) {
+  const { anchor, floating, gap = 4, preferY = "above" } = options;
+  const viewportWidth = options.viewport?.width ?? document.documentElement.clientWidth;
+  const viewportHeight = options.viewport?.height ?? document.documentElement.clientHeight;
+  const fitsAbove = anchor.top >= floating.height + gap;
+  const fitsBelow = anchor.bottom + floating.height + gap <= viewportHeight;
+  let top;
+  if (preferY === "above") {
+    if (fitsAbove) {
+      top = anchor.top - floating.height - gap;
+    } else if (fitsBelow) {
+      top = anchor.bottom + gap;
+    } else {
+      top = gap;
+    }
+  } else {
+    if (fitsBelow) {
+      top = anchor.bottom + gap;
+    } else if (fitsAbove) {
+      top = anchor.top - floating.height - gap;
+    } else {
+      top = gap;
+    }
+  }
+  const fitsLeft = anchor.left + floating.width <= viewportWidth;
+  let left;
+  if (fitsLeft) {
+    left = anchor.left;
+  } else {
+    left = Math.max(gap, viewportWidth - floating.width - gap);
+  }
+  return { top, left };
+}
+
+export { calculateFloatingPosition };

package/dist/stories/pd-forms-overview.stories.d.ts

@@ -0,0 +1,48 @@
+import { StoryObj } from '@storybook/web-components-vite';
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj;
+/**
+ * User registration form with validation for common sign-up scenarios.
+ * Demonstrates pd-select, pd-input (text, email, phone, secret),
+ * pd-checkbox, and span-based responsive layout.
+ */
+export declare const UserRegistrationForm: Story;
+/**
+ * Contact form for customer inquiries with department/priority selection,
+ * message textarea, and optional file attachment.
+ * Demonstrates pd-input-area, pd-input-file, and pd-select.
+ */
+export declare const ContactForm: Story;
+/**
+ * Business application form with company information, contact person,
+ * experience rating, and partnership type selection.
+ * Demonstrates pd-range with optionValueMapper and pd-radio-group.
+ */
+export declare const BusinessApplicationForm: Story;
+/**
+ * Hotel booking form with check-in/out times, room selection,
+ * and guest preferences. Demonstrates pd-input-time,
+ * number inputs, and multiple checkboxes for options.
+ */
+export declare const HotelBookingForm: Story;
+/**
+ * Feedback form with satisfaction rating via pd-range,
+ * recommendation via pd-radio-group, and detailed text feedback.
+ * Demonstrates pd-range with SATISFACTION_MAPPER and optional fields.
+ */
+export declare const FeedbackSurveyForm: Story;
+/**
+ * Order form demonstrating pd-form-fieldset for structured data grouping.
+ * Shows how fieldsets aggregate child values into nested objects
+ * with billing and shipping address side-by-side using span="half".
+ */
+export declare const OrderFormWithFieldsets: Story;
+/**
+ * Three fieldsets side-by-side using span="third" for compact
+ * multi-section forms. Demonstrates column-based fieldset layout.
+ */
+export declare const ThreeColumnFieldsets: Story;
+//# sourceMappingURL=pd-forms-overview.stories.d.ts.map

package/dist/stories/pd-forms-overview.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-forms-overview.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-forms-overview.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AACvC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,2CAA2C,CAAC;AACnD,OAAO,iCAAiC,CAAC;AAmEzC,QAAA,MAAM,IAAI;;CAEM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAMtB;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KA+FlC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAgFzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAsKrC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,KA+H9B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAqFhC,CAAC;AAMF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAoLpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KA8FlC,CAAC"}

package/dist/stories/story-helpers.d.ts

@@ -0,0 +1,10 @@
+import { PdFormContainer } from '../pd-form-container/pd-form-container.js';
+/**
+ * Gets a PdFormContainer element by ID.
+ */
+export declare const getFormContainer: (id: string) => PdFormContainer | null;
+/**
+ * Renders a set of action buttons (Validate, Reset, Clear, Get Values) for form testing.
+ */
+export declare const renderActionButtons: (formId: string) => import('lit').TemplateResult<1>;
+//# sourceMappingURL=story-helpers.d.ts.map

package/dist/stories/story-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"story-helpers.d.ts","sourceRoot":"","sources":["../../src/stories/story-helpers.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAEjF,OAAO,2BAA2B,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,IAAI,MAAM,KAAG,eAAe,GAAG,IAE/D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,QAAQ,MAAM,oCAkCjD,CAAC"}

package/dist/styles/shared-input-field-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared-input-field-styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-input-field-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;GAEG;AACH,eAAO,MAAM,sBAAsB,yBAqKlC,CAAC"}
+{"version":3,"file":"shared-input-field-styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-input-field-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;GAEG;AACH,eAAO,MAAM,sBAAsB,yBAmKlC,CAAC"}

package/dist/styles/shared-input-field-styles.js

@@ -1,17 +1,14 @@
 import { css } from 'lit';
 
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
 const SharedInputFieldStyles = css`
   /* Describe input div (with icon) around input/select/area element */
   .input {
     display: inline-block;
+    width: var(--pd-input-field-width, 250px);
     /*position: relative; Prüfen: Wenn das an ist, felder über scroll-menu?
-    position: relative;    
+    position: relative;
     */
-    /* pd-icon smaller than input 
+    /* pd-icon smaller than input
     --pd-icon-computed-size: calc(var(--my-input-height) * 0.75); /* calc */
 
     /* Hack um eine Form Row (input mit Button => Booking) zu bekommen*/
@@ -59,21 +56,17 @@ const SharedInputFieldStyles = css`
       calc(var(--pd-input-field-height, 2rem) * 0.9)
     );
     --pd-icon-col-active: var(--pd-input-icon-color, var(--pd-default-col));
-    top: 2px;
-  }
-
-  .infield-icon:hover {
-    /* Soll nur da sein, wenn es auch eine action zu dem icon gibt
-      cursor: pointer;
-    */
+    top: 50%;
+    transform: translateY(-50%);
   }
 
-  /* 
+  /*
    * Class input style used for input, select and text-area element.
    * Not use iput here => because of own select css... => Nachtrag: Aber ein paar allgemeine Angaben rausziehen
    */
   .input-style {
     width: var(--pd-input-field-width, 250px);
+    box-sizing: border-box;
     padding: var(--pd-input-field-padding, 0.25rem);
     background-color: var(--pd-input-field-bg-col, var(--pd-default-bg-col));
     /*opacity: 80%;*/
@@ -88,7 +81,8 @@ const SharedInputFieldStyles = css`
       --pd-input-field-border-bottom,
       2px solid var(--pd-default-col)
     );
-    border-radius: var(--pd-border-radius, 0);
+    border-radius: var(--pd-radius-md);
+    outline: none;
   }
 
   /* Hover for input, area, select */
@@ -102,7 +96,7 @@ const SharedInputFieldStyles = css`
   /* Höhe soll nicht für Text Area gelten, daher ausgelagert (überschreibt sonst rows) */
   input.input-style,
   select.input-style {
-    height: var(--pd-input-field-height, 2.2rem);
+    height: var(--pd-input-field-height, 2.5rem);
   }
 
   /* Disabled for input, area => select with own css.? */
@@ -161,13 +155,13 @@ const SharedInputFieldStyles = css`
 
   /* Placeholder color for input and input-area */
   ::placeholder {
-    color: var(--pd-input-placeholder-color, #474747e4);
+    color: var(--pd-default-font-muted-col);
   }
   :-ms-input-placeholder {
-    color: var(--pd-input-placeholder-color, #474747e4);
+    color: var(--pd-default-font-muted-col);
   }
   ::-ms-input-placeholder {
-    color: var(--pd-input-placeholder-color, #474747e4);
+    color: var(--pd-default-font-muted-col);
   }
 `;
 

package/dist/styles/shared-input-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared-input-styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-input-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,yBAwD7B,CAAC"}
+{"version":3,"file":"shared-input-styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-input-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,yBAgE7B,CAAC"}

package/dist/styles/shared-input-styles.js

@@ -1,25 +1,21 @@
 import { css } from 'lit';
 
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
 const SharedInputStyles = css`
   /**
    * Label used for input, select, input-area, range and radio-group.
-   * Not used in button, button-group, checkbox (may have a label...?), form-row, form-container 
+   * Not used in button, button-group, checkbox (may have a label...?), form-row, form-container
    */
   label {
     display: block;
     padding: var(--pd-input-label-padding, 0);
-    color: var(--pd-input-lable-col, var(--pd-default-dark-col));
+    color: var(--pd-input-label-col, var(--pd-default-dark-col));
     text-align: var(--pd-input-label-align, left);
-    font-size: var(--pd-input-lable-font-size, 0.9em);
+    font-size: var(--pd-input-label-font-size, 0.9em);
     font-family: var(
-      --pd-input-lable-font-family,
+      --pd-input-label-font-family,
       var(--pd-default-font-title-family)
     );
-    max-width: var(--pd-input-field-width, 250px);
+    /* No max-width - label width is controlled by parent container */
   }
 
   /**
@@ -30,12 +26,16 @@ const SharedInputStyles = css`
     color: var(--pd-default-error-col);
     background: var(--pd-default-error-light-col);
     border: 1px solid var(--pd-default-error-col);
-    border-radius: var(--pd-border-radius, 0);
-    max-width: var(--pd-input-field-width, 350px);
+    border-radius: var(--pd-radius-md);
+    /* Width matches input field, with min-width for readability */
+    width: var(--pd-input-field-width, 250px);
+    min-width: 150px;
+    box-sizing: border-box;
   }
   .error-box p {
     margin: 0;
-    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+    padding: var(--pd-spacing-xs) var(--pd-spacing-xs) var(--pd-spacing-xs)
+      var(--pd-spacing-sm);
     font-size: 0.8rem;
   }
 
@@ -53,12 +53,16 @@ const SharedInputStyles = css`
     background: linear-gradient(
       to bottom,
       var(--my-background-gradient-color) 10%,
-      #f5979b 100%
+      var(--pd-default-error-light-col) 100%
     );
   }
 
   .gradient[disabled] {
-    background: linear-gradient(to bottom, #ebebeb 0%, #999 100%);
+    background: linear-gradient(
+      to bottom,
+      var(--pd-default-disabled-light-col) 0%,
+      var(--pd-default-disabled-col) 100%
+    );
   }
 `;
 

package/dist/types.d.ts

@@ -20,8 +20,19 @@ export type PdFieldType = "text" | "number" | "mail" | "vat" | "phone";
 export declare const UNDEF = "UNDEF";
 export interface ButtonData {
     text?: string;
+    /** Short/compact text for responsive display (e.g., mobile mode). */
+    shortText?: string;
     pdIcon?: string;
     disabled?: boolean;
+    /** Optional value for selection tracking (e.g., locale code "de", "en"). */
+    value?: string;
+}
+export interface SuggestedElement<T> {
+    id: string;
+    name: string;
+    subInfo?: string;
+    objectValue?: T;
+    createNew?: string;
 }
 /**
  * MDN-konforme Autocomplete-Werte.

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,WAAW,EAAE,GAAG,CAAC;IACjB,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;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;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"}
+{"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,WAAW,EAAE,GAAG,CAAC;IACjB,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,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,CAAC,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;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,9 +1,12 @@
 {
   "name": "@progressive-development/pd-forms",
-  "version": "0.9.2",
+  "version": "1.0.1",
   "description": "Webcomponents library 'pd-forms' for form input elements.",
   "author": "PD Progressive Development",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",
@@ -16,6 +19,7 @@
     "./pd-button-select-group": "./dist/pd-button-select-group.js",
     "./pd-checkbox": "./dist/pd-checkbox.js",
     "./pd-form-container": "./dist/pd-form-container.js",
+    "./pd-form-field": "./dist/pd-form-field.js",
     "./pd-form-row": "./dist/pd-form-row.js",
     "./pd-hover-box": "./dist/pd-hover-box.js",
     "./pd-input-area": "./dist/pd-input-area.js",
@@ -25,6 +29,8 @@
     "./pd-radio-group": "./dist/pd-radio-group.js",
     "./pd-range": "./dist/pd-range.js",
     "./pd-select": "./dist/pd-select.js",
+    "./pd-suggestion-box": "./dist/pd-suggestion-box.js",
+    "./pd-generic-form": "./dist/pd-generic-form.js",
     "./locales/be": "./dist/locales/be.js",
     "./locales/de": "./dist/locales/de.js",
     "./locales/en": "./dist/locales/en.js"
@@ -40,8 +46,9 @@
     "@lit/localize": "^0.12.2",
     "@lit-labs/motion": "^1.0.8",
     "tslib": "^2.8.1",
-    "@progressive-development/pd-icon": "0.9.2",
-    "@progressive-development/pd-shared-styles": "0.3.0"
+    "@progressive-development/pd-icon": "1.0.1",
+    "@progressive-development/pd-model": "1.1.0",
+    "@progressive-development/pd-shared-styles": "0.3.2"
   },
   "customElements": "custom-elements.json",
   "scripts": {