@progressive-development/pd-forms 0.9.2 → 1.0.1

package/dist/pd-form-row/PdFormRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdFormRow.d.ts","sourceRoot":"","sources":["../../src/pd-form-row/PdFormRow.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;;;;GAOG;AACH,qBAAa,SAAU,SAAQ,QAAQ;IACrC,OAAgB,MAAM,EAAE,cAAc,CA6FpC;IAEF,MAAM;CAGP"}
+{"version":3,"file":"PdFormRow.d.ts","sourceRoot":"","sources":["../../src/pd-form-row/PdFormRow.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAsB,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzE,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,iCAAiC,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBAAa,SAAU,SAAQ,QAAQ;IACrC;;;OAGG;IAEH,UAAU,EAAE,MAAM,CAAM;IAExB,OAAgB,MAAM,EAAE,cAAc,CA8HpC;IAEO,MAAM,IAAI,cAAc;CAsBlC"}

package/dist/pd-form-row/PdFormRow.js

@@ -1,110 +1,176 @@
-import { css, html } from 'lit';
+import { css, nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { pdIcons } from '@progressive-development/pd-icon';
+import '@progressive-development/pd-icon/pd-icon';
 import { PdBaseUI } from '../base/pd-base-ui.js';
+import '../pd-hover-box.js';
 
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
+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 PdFormRow extends PdBaseUI {
+  constructor() {
+    super(...arguments);
+    this.helperText = "";
+  }
   static {
     this.styles = [
       PdBaseUI.styles,
       css`
       :host {
-        /* Define size for row, depends on media queries */
-        --my-row-width: var(--pd-form-row-base-width, 800px);
-        --my-gap: var(--pd-form-row-gap, 20px);
-        display: flex;
-        flex: 1 1 100%;
-        /*margin: 0 0 .5rem 0;*/
-        box-sizing: border-box;
+        --_gap: var(--pd-form-row-gap, 20px);
+        --_align: var(--pd-form-row-align-items, flex-start);
+        --_helper-width: var(--pd-form-row-helper-width, 0);
+
+        display: grid;
+        grid-template-columns: repeat(12, 1fr) var(--_helper-width);
+        column-gap: var(--_gap);
+        row-gap: 0;
+        align-items: var(--_align);
         width: 100%;
-        gap: var(--my-gap);
-        align-items: var(--pd-form-row-align-item, flex-start);
-        justify-content: var(--pd-form-row-justify-content, flex-start);
-        padding-top: var(--pd-form-row-padding-top, 0.8rem);
+        box-sizing: border-box;
+        container-type: inline-size;
+        container-name: form-row;
       }
 
-      ::slotted(.full-size) {
-        --pd-input-field-width: 100%;
+      /* Reserve space for helper icon column (for consistent alignment across rows) */
+      :host([with-helper-space]) {
+        --_helper-width: var(--pd-form-row-helper-width, 32px);
       }
 
-      ::slotted(.quarter1) {
-        --pd-input-field-width: calc(
-          var(--my-row-width) * 0.25 - (var(--my-gap) * 0.75)
-        );
+      /* Extra top margin for visually separating sections (e.g. button rows) */
+      :host([gap-top]) {
+        margin-top: var(--pd-form-row-gap-top, 1.2rem);
       }
 
-      ::slotted(.quarter1-area) {
-        --pd-input-field-width: calc(
-          (var(--my-row-width) - 5px) * 0.25 - (var(--my-gap) * 0.75)
-        );
+      /* Default: full width (12 columns) */
+      ::slotted(*) {
+        grid-column: span 12;
+        /* Override fixed width from pd-input etc. to fill grid cell */
+        --pd-input-field-width: 100%;
       }
 
-      ::slotted(.quarter2) {
-        --pd-input-field-width: calc(
-          (var(--my-row-width) * 0.5) - (var(--my-gap) / 2)
-        );
+      /* Semantic span values */
+      ::slotted([span="quarter"]) {
+        grid-column: span 3;
       }
-
-      ::slotted(.quarter2-area) {
-        --pd-input-field-width: calc(
-          ((var(--my-row-width) - 8px) * 0.5) - (var(--my-gap) / 2)
-        );
+      ::slotted([span="third"]) {
+        grid-column: span 4;
       }
-
-      ::slotted(.quarter3) {
-        --pd-input-field-width: calc(
-          var(--my-row-width) * 0.75 - (var(--my-gap) * 0.25)
-        );
+      ::slotted([span="half"]) {
+        grid-column: span 6;
       }
-
-      ::slotted(.quarter3-area) {
-        --pd-input-field-width: calc(
-          (var(--my-row-width) - 10px) * 0.75 - (var(--my-gap) * 0.25)
-        );
+      ::slotted([span="two-thirds"]) {
+        grid-column: span 8;
       }
-
-      ::slotted(.quarter4) {
-        --pd-input-field-width: var(--my-row-width);
+      ::slotted([span="three-quarters"]) {
+        grid-column: span 9;
+      }
+      ::slotted([span="full"]) {
+        grid-column: span 12;
       }
 
-      ::slotted(.quarter4-area) {
-        --pd-input-field-width: calc(var(--my-row-width) - 15px);
+      /* Numeric span values */
+      ::slotted([span="1"]) {
+        grid-column: span 1;
+      }
+      ::slotted([span="2"]) {
+        grid-column: span 2;
+      }
+      ::slotted([span="3"]) {
+        grid-column: span 3;
+      }
+      ::slotted([span="4"]) {
+        grid-column: span 4;
+      }
+      ::slotted([span="5"]) {
+        grid-column: span 5;
+      }
+      ::slotted([span="6"]) {
+        grid-column: span 6;
+      }
+      ::slotted([span="7"]) {
+        grid-column: span 7;
+      }
+      ::slotted([span="8"]) {
+        grid-column: span 8;
+      }
+      ::slotted([span="9"]) {
+        grid-column: span 9;
+      }
+      ::slotted([span="10"]) {
+        grid-column: span 10;
+      }
+      ::slotted([span="11"]) {
+        grid-column: span 11;
+      }
+      ::slotted([span="12"]) {
+        grid-column: span 12;
       }
 
-      @media (max-width: 930px) {
-        :host {
-          --my-row-width: 600px;
-        }
+      /* Helper column - always present for consistent alignment */
+      .helper-column {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-self: stretch;
+        min-height: 1px;
+        /* Offset to align with input field (below label) */
+        padding-top: 1.2em;
       }
 
-      @media (max-width: 665px) {
-        :host {
-          --my-row-width: 400px;
-          --my-gap: 10px;
-        }
+      .help-icon {
+        --pd-icon-size: 20px;
+        cursor: help;
       }
 
-      @media (max-width: 465px) {
-        :host {
-          --my-row-width: 320px;
-          --my-gap: 8px;
+      /* Responsive stacking: when row width < 400px, stack all elements vertically */
+      @container form-row (max-width: 400px) {
+        ::slotted(*) {
+          grid-column: 1 / -2 !important;
+          margin-top: 0.3em;
+        }
+        ::slotted(*:first-child) {
+          margin-top: 0;
         }
       }
 
-      @media (max-width: 390px) {
-        :host {
-          --my-row-width: 260px;
-          --my-gap: 8px;
-        }
+      /* Disable stacking behavior - elements keep their span values regardless of container width */
+      :host([no-stack]) {
+        container-type: normal;
       }
     `
     ];
   }
   render() {
-    return html`<slot></slot>`;
+    return html`
+      <slot></slot>
+      <div class="helper-column">
+        ${this.helperText ? html`
+              <pd-hover-box>
+                <pd-icon
+                  slot="normal-view"
+                  icon="${pdIcons.ICON_HELP}"
+                  ?activeIcon="${true}"
+                  class="help-icon"
+                  aria-label="Help"
+                  role="img"
+                ></pd-icon>
+                <p slot="info-view">${this.helperText}</p>
+              </pd-hover-box>
+            ` : nothing}
+      </div>
+    `;
   }
 }
+__decorateClass([
+  property({ type: String, attribute: "helper-text" })
+], PdFormRow.prototype, "helperText");
 
 export { PdFormRow };

package/dist/pd-form-row/pd-form-row.stories.d.ts

@@ -1,27 +1,43 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    argTypes: {
-        backgroundColor: {
-            control: "color";
-        };
-        onClick: {
-            action: string;
-        };
-        size: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-        };
-        parameters: {
-            actions: {
-                handles: string[];
-            };
-        };
-    };
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+interface PdFormRowArgs {
+    "helper-text": string;
+    "no-stack": boolean;
+}
+/**
+ * ## pd-form-row
+ *
+ * Responsive 12-column grid container for form elements.
+ *
+ * ### Features
+ * - CSS Grid with 12 columns for precise layout control
+ * - Container Query based responsive behavior (stacks below 400px)
+ * - `no-stack` attribute to disable stacking
+ * - Optional helper text with hover icon
+ * - Configurable gap and alignment
+ *
+ * ### Span Values
+ * Semantic: `quarter` (25%), `third` (33%), `half` (50%), `two-thirds` (66%), `three-quarters` (75%), `full` (100%)
+ * Numeric: `1` through `12` for fine-grained control
+ */
+declare const meta: Meta<PdFormRowArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const FormRow: Story;
+type Story = StoryObj<PdFormRowArgs>;
+/** Default form row with a single full-width input. */
+export declare const Default: Story;
+/** Overview of all semantic span values. */
+export declare const AllSpanValues: Story;
+/** Common layout patterns with mixed span values. */
+export declare const CommonPatterns: Story;
+/** Rows with helper text hover icons. */
+export declare const WithHelperText: Story;
+/** Disable responsive stacking with no-stack attribute. */
+export declare const NoStack: Story;
+/** Buttons alongside inputs in the same row. */
+export declare const ButtonWithInput: Story;
+/** Using pd-form-field wrapper for custom content in the grid. */
+export declare const WithFormFieldWrapper: Story;
+/** Complete address form as a real-world pattern. */
+export declare const AddressFormExample: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-form-row.stories.d.ts.map

package/dist/pd-form-row/pd-form-row.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-form-row.stories.d.ts","sourceRoot":"","sources":["../../src/pd-form-row/pd-form-row.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,kBAAkB,CAAC;AAG1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAeM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}
+{"version":3,"file":"pd-form-row.stories.d.ts","sourceRoot":"","sources":["../../src/pd-form-row/pd-form-row.stories.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,2BAA2B,CAAC;AACnC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yCAAyC,CAAC;AACjD,OAAO,2BAA2B,CAAC;AAMnC,UAAU,aAAa;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;CACrB;AAgBD;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,CA2E7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAMrC,uDAAuD;AACvD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAMF,4CAA4C;AAC5C,eAAO,MAAM,aAAa,EAAE,KAgD3B,CAAC;AAMF,qDAAqD;AACrD,eAAO,MAAM,cAAc,EAAE,KAyD5B,CAAC;AAMF,yCAAyC;AACzC,eAAO,MAAM,cAAc,EAAE,KAwB5B,CAAC;AAMF,2DAA2D;AAC3D,eAAO,MAAM,OAAO,EAAE,KAwCrB,CAAC;AAMF,gDAAgD;AAChD,eAAO,MAAM,eAAe,EAAE,KAgD7B,CAAC;AAMF,kEAAkE;AAClE,eAAO,MAAM,oBAAoB,EAAE,KAwBlC,CAAC;AAMF,qDAAqD;AACrD,eAAO,MAAM,kBAAkB,EAAE,KA8BhC,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAuD3B,CAAC"}

package/dist/pd-generic-form/PdGenericForm.d.ts

@@ -0,0 +1,50 @@
+import { LitElement, CSSResultGroup, TemplateResult } from 'lit';
+import { pdSchema } from '@progressive-development/pd-model';
+type SchemaEntry = pdSchema.SchemaEntry;
+type SchemaFieldData = pdSchema.SchemaFieldData;
+export declare class PdGenericForm extends LitElement {
+    /** Schema definition of the form fields. */
+    schema: SchemaEntry[];
+    /** Current data (Key = fieldId). */
+    data: SchemaFieldData;
+    /** Display mode: 'view' = data display, 'edit' = form. */
+    mode: "view" | "edit";
+    /** Disables all fields in edit mode. */
+    disabled: boolean;
+    /** Tracked form values for conditional visibility (showWhen). */
+    private _formValues;
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onFieldChange;
+    private _isVisible;
+    /**
+     * Extracts schema fields from raw form values
+     * and converts them into typed SchemaFieldData.
+     *
+     * @param formValues - Raw values from pd-form-container.getValues().origin
+     */
+    extractFormData(formValues: Record<string, unknown>): SchemaFieldData;
+    private _extractField;
+    protected render(): TemplateResult;
+    private _renderView;
+    private _renderViewField;
+    private _formatForView;
+    private _renderEdit;
+    /** InputType → pd-input fieldType mapping */
+    private static _fieldTypeMap;
+    /** Single field wrapped in its own pd-form-row. */
+    private _renderFieldInRow;
+    /** Multiple fields in a single pd-form-row. */
+    private _renderRow;
+    /** Fieldset with nested pd-form-rows per row entry. */
+    private _renderFieldset;
+    /** Renders a field control (without pd-form-row wrapper), respecting field.span. */
+    private _renderFieldControl;
+    private _renderBooleanControl;
+    private _renderTextareaControl;
+    private _renderSelectControl;
+    private _renderInputControl;
+}
+export {};
+//# sourceMappingURL=PdGenericForm.d.ts.map

package/dist/pd-generic-form/PdGenericForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdGenericForm.d.ts","sourceRoot":"","sources":["../../src/pd-generic-form/PdGenericForm.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAM7D,KAAK,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC;AACxC,KAAK,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC;AAIhD,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AAInC,qBAAa,aAAc,SAAQ,UAAU;IAC3C,4CAA4C;IAE5C,MAAM,EAAE,WAAW,EAAE,CAAM;IAE3B,oCAAoC;IAEpC,IAAI,EAAE,eAAe,CAAM;IAE3B,0DAA0D;IAE1D,IAAI,EAAE,MAAM,GAAG,MAAM,CAAU;IAE/B,wCAAwC;IAExC,QAAQ,EAAE,OAAO,CAAS;IAE1B,iEAAiE;IAEjE,OAAO,CAAC,WAAW,CAA+B;IAElD,OAAgB,MAAM,EAAE,cAAc,CAAyB;IAEtD,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAQrC,OAAO,CAAC,cAAc,CAKpB;IAEF,OAAO,CAAC,UAAU;IAclB;;;;;OAKG;IACI,eAAe,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,eAAe;IAyB5E,OAAO,CAAC,aAAa;cAqBF,MAAM,IAAI,cAAc;IAM3C,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,WAAW;IAYnB,6CAA6C;IAC7C,OAAO,CAAC,MAAM,CAAC,aAAa,CAM1B;IAEF,mDAAmD;IACnD,OAAO,CAAC,iBAAiB;IAMzB,+CAA+C;IAC/C,OAAO,CAAC,UAAU;IAQlB,uDAAuD;IACvD,OAAO,CAAC,eAAe;IAoBvB,oFAAoF;IACpF,OAAO,CAAC,mBAAmB;IAsB3B,OAAO,CAAC,qBAAqB;IAwB7B,OAAO,CAAC,sBAAsB;IAoB9B,OAAO,CAAC,oBAAoB;IAkB5B,OAAO,CAAC,mBAAmB;CAsB5B"}