@progressive-development/pd-contact 1.0.2 → 1.0.4

package/dist/pd-gradient-form/PdGradientForm.js

@@ -0,0 +1,259 @@
+import { css, nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { PdBaseUIInput } from '@progressive-development/pd-forms';
+import '@progressive-development/pd-forms/pd-form-row';
+import '@progressive-development/pd-forms/pd-color-picker';
+import '@progressive-development/pd-forms/pd-range';
+
+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;
+};
+const DEFAULT_ANGLE = 135;
+const DEFAULT_STOP1 = 0;
+const DEFAULT_STOP2 = 100;
+class PdGradientForm extends PdBaseUIInput {
+  constructor() {
+    super(...arguments);
+    this.color1Label = "Farbe 1";
+    this.color2Label = "Farbe 2";
+    this.angleLabel = "Winkel";
+    this.defaultAngle = DEFAULT_ANGLE;
+    this.hidePreview = false;
+    this._color1 = "#333333";
+    this._color2 = "#666666";
+    this._angle = DEFAULT_ANGLE;
+    this._stop1 = DEFAULT_STOP1;
+    this._stop2 = DEFAULT_STOP2;
+  }
+  static {
+    this.styles = [
+      PdBaseUIInput.styles,
+      css`
+      :host {
+        display: block;
+      }
+
+      .form-fields {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-form-container-row-gap, var(--pd-spacing-md));
+      }
+
+      .gradient-preview {
+        height: var(--pd-gradient-form-preview-height, 2rem);
+        border-radius: var(--pd-radius-md, 0.375rem);
+        border: 1px solid var(--pd-default-light-col, #cbd5e1);
+        margin-bottom: var(--pd-spacing-sm, 0.5rem);
+      }
+    `
+    ];
+  }
+  // ── Lifecycle ──────────────────────────────────────────────────────────────
+  update(changedProps) {
+    if (changedProps.has("initValue") && this.initValue) {
+      this._applyInitValue(this.initValue);
+      if (this.handleChangeForInitVal) {
+        this._handleChangedValue(this.initValue, void 0, true);
+      } else {
+        this._value = this.initValue;
+      }
+      changedProps.delete("initValue");
+    }
+    super.update(changedProps);
+  }
+  // ── Rendering ──────────────────────────────────────────────────────────────
+  render() {
+    const inputId = `${this.id}GradientForm`;
+    const errorId = `${this.id}Error`;
+    const previewStyle = {
+      background: `linear-gradient(${this._angle}deg, ${this._color1} ${this._stop1}%, ${this._color2} ${this._stop2}%)`
+    };
+    return html`
+      ${this._renderLabel(inputId)}
+      ${this.hidePreview ? nothing : html`
+            <div
+              class="gradient-preview"
+              style="${styleMap(previewStyle)}"
+            ></div>
+          `}
+
+      <div class="form-fields">
+        <pd-form-row>
+          <pd-color-picker
+            span="half"
+            label="${this.color1Label}"
+            .initValue="${this._color1}"
+            .handleChangeForInitVal="${true}"
+            ?disabled="${this.disabled}"
+            @pd-form-element-change="${this._onColor1Change}"
+            @pd-form-element-register="${this._innerStop}"
+            @validate-form="${this._innerStop}"
+            @field-change="${this._innerStop}"
+          ></pd-color-picker>
+          <pd-color-picker
+            span="half"
+            label="${this.color2Label}"
+            .initValue="${this._color2}"
+            .handleChangeForInitVal="${true}"
+            ?disabled="${this.disabled}"
+            @pd-form-element-change="${this._onColor2Change}"
+            @pd-form-element-register="${this._innerStop}"
+            @validate-form="${this._innerStop}"
+            @field-change="${this._innerStop}"
+          ></pd-color-picker>
+        </pd-form-row>
+
+        <pd-form-row>
+          <pd-range
+            span="half"
+            no-ticks
+            label="Position ${this.color1Label}"
+            min="0"
+            max="100"
+            step="1"
+            .initValue="${String(this._stop1)}"
+            .handleChangeForInitVal="${true}"
+            ?disabled="${this.disabled}"
+            @pd-form-element-change="${this._onStop1Change}"
+            @pd-form-element-register="${this._innerStop}"
+            @validate-form="${this._innerStop}"
+            @field-change="${this._innerStop}"
+          ></pd-range>
+          <pd-range
+            span="half"
+            no-ticks
+            label="Position ${this.color2Label}"
+            min="0"
+            max="100"
+            step="1"
+            .initValue="${String(this._stop2)}"
+            .handleChangeForInitVal="${true}"
+            ?disabled="${this.disabled}"
+            @pd-form-element-change="${this._onStop2Change}"
+            @pd-form-element-register="${this._innerStop}"
+            @validate-form="${this._innerStop}"
+            @field-change="${this._innerStop}"
+          ></pd-range>
+        </pd-form-row>
+
+        <pd-form-row>
+          <pd-range
+            no-ticks
+            label="${this.angleLabel}"
+            min="0"
+            max="360"
+            step="5"
+            .initValue="${String(this._angle)}"
+            .handleChangeForInitVal="${true}"
+            ?disabled="${this.disabled}"
+            @pd-form-element-change="${this._onAngleChange}"
+            @pd-form-element-register="${this._innerStop}"
+            @validate-form="${this._innerStop}"
+            @field-change="${this._innerStop}"
+          ></pd-range>
+        </pd-form-row>
+      </div>
+
+      ${this._renderErrorMsg(errorId)}
+    `;
+  }
+  // ── Value Parsing ──────────────────────────────────────────────────────────
+  _applyInitValue(raw) {
+    try {
+      const parsed = JSON.parse(raw);
+      this._color1 = parsed.color1 || "#333333";
+      this._color2 = parsed.color2 || "#666666";
+      this._angle = parsed.angle ?? this.defaultAngle;
+      this._stop1 = parsed.stop1 ?? DEFAULT_STOP1;
+      this._stop2 = parsed.stop2 ?? DEFAULT_STOP2;
+    } catch {
+    }
+  }
+  _getParsedValue() {
+    return {
+      color1: this._color1,
+      color2: this._color2,
+      angle: this._angle,
+      stop1: this._stop1,
+      stop2: this._stop2
+    };
+  }
+  // ── Inner Element Events (prevent leaking into parent pd-form-container) ─
+  _innerStop(e) {
+    e.stopPropagation();
+  }
+  _onColor1Change(e) {
+    e.stopPropagation();
+    this._color1 = e.detail?.value ?? this._color1;
+    this._emitGradientValue();
+  }
+  _onColor2Change(e) {
+    e.stopPropagation();
+    this._color2 = e.detail?.value ?? this._color2;
+    this._emitGradientValue();
+  }
+  _onStop1Change(e) {
+    e.stopPropagation();
+    this._stop1 = parseInt(e.detail?.value ?? "", 10) || DEFAULT_STOP1;
+    this._emitGradientValue();
+  }
+  _onStop2Change(e) {
+    e.stopPropagation();
+    this._stop2 = parseInt(e.detail?.value ?? "", 10) || DEFAULT_STOP2;
+    this._emitGradientValue();
+  }
+  _onAngleChange(e) {
+    e.stopPropagation();
+    this._angle = parseInt(e.detail?.value ?? "", 10) || this.defaultAngle;
+    this._emitGradientValue();
+  }
+  _emitGradientValue() {
+    const val = {
+      color1: this._color1,
+      color2: this._color2,
+      angle: this._angle,
+      stop1: this._stop1,
+      stop2: this._stop2
+    };
+    this._handleChangedValue(JSON.stringify(val), void 0, true);
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdGradientForm.prototype, "color1Label");
+__decorateClass([
+  property({ type: String })
+], PdGradientForm.prototype, "color2Label");
+__decorateClass([
+  property({ type: String })
+], PdGradientForm.prototype, "angleLabel");
+__decorateClass([
+  property({ type: Number })
+], PdGradientForm.prototype, "defaultAngle");
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-preview" })
+], PdGradientForm.prototype, "hidePreview");
+__decorateClass([
+  state()
+], PdGradientForm.prototype, "_color1");
+__decorateClass([
+  state()
+], PdGradientForm.prototype, "_color2");
+__decorateClass([
+  state()
+], PdGradientForm.prototype, "_angle");
+__decorateClass([
+  state()
+], PdGradientForm.prototype, "_stop1");
+__decorateClass([
+  state()
+], PdGradientForm.prototype, "_stop2");
+
+export { PdGradientForm };

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

@@ -0,0 +1,4 @@
+import { PdGradientForm } from './PdGradientForm.js';
+export { PdGradientForm };
+export type { GradientValue } from './PdGradientForm.js';
+//# sourceMappingURL=pd-gradient-form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-gradient-form.d.ts","sourceRoot":"","sources":["../../src/pd-gradient-form/pd-gradient-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAOrD,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

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

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

package/dist/pd-gradient-form.js

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

package/dist/types.js

@@ -10,5 +10,7 @@ const C_ADDITIONAL = "additionalHint";
 const C_PROPERTY_DATE = "propertyDate";
 const C_PHONE1 = "phone1";
 const C_EMAIL = "email";
+const C_WEBSITE = "website";
+const C_SOCIAL_MEDIA = "socialMedia";
 
-export { C_ADDITIONAL, C_BTWNR, C_CITY, C_COMPANY, C_EMAIL, C_FIRSTNAME, C_LASTNAME, C_PHONE1, C_PROPERTY_DATE, C_STREET, C_TYPE, C_ZIP };
+export { C_ADDITIONAL, C_BTWNR, C_CITY, C_COMPANY, C_EMAIL, C_FIRSTNAME, C_LASTNAME, C_PHONE1, C_PROPERTY_DATE, C_SOCIAL_MEDIA, C_STREET, C_TYPE, C_WEBSITE, C_ZIP };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-contact",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Progressive Development Contact component",
   "author": "PD Progressive Development",
   "license": "MIT",
@@ -14,6 +14,9 @@
   "exports": {
     ".": "./dist/index.js",
     "./pd-contact": "./dist/pd-contact.js",
+    "./pd-gradient-form": "./dist/pd-gradient-form.js",
+    "./pd-bg-image-form": "./dist/pd-bg-image-form.js",
+    "./pd-bg-select-form": "./dist/pd-bg-select-form.js",
     "./locales/be": "./dist/locales/be.js",
     "./locales/de": "./dist/locales/de.js",
     "./locales/en": "./dist/locales/en.js"
@@ -29,8 +32,8 @@
     "@lit/localize": "^0.12.2",
     "tslib": "^2.8.1",
     "@progressive-development/pd-shared-styles": "0.3.2",
-    "@progressive-development/pd-icon": "1.0.1",
-    "@progressive-development/pd-forms": "1.0.1"
+    "@progressive-development/pd-icon": "1.0.2",
+    "@progressive-development/pd-forms": "1.0.3"
   },
   "customElements": "custom-elements.json",
   "keywords": [

package/dist/pd-contact/pd-contact-edit.stories.d.ts

@@ -1,53 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components-vite';
-import { PdContactData } from '../types.js';
-/**
- * Story arguments interface for pd-contact (edit mode).
- * Maps to the component's public API when used as an editable form.
- */
-interface PdContactEditArgs {
-    /** List of input fields to display (empty = all fields) */
-    inputFields: string[];
-    /** List of required field keys for validation */
-    requiredFields: string[];
-    /** Show property date selection field */
-    withPropertyDate: boolean;
-    /** Pre-populated contact data */
-    contact?: PdContactData;
-}
-/**
- * ## pd-contact (Edit Mode)
- *
- * Contact form component for creating and editing contact information with
- * built-in validation support.
- *
- * ### Features
- * - Private/Business contact type toggle via radio group
- * - Configurable visible fields via `inputFields` array
- * - Required field validation via `requiredFields` array
- * - Optional property/building year selection
- * - Auto-complete hints for browser autofill
- * - Integration with pd-form-container for validation lifecycle
- *
- * ### Form Methods
- * - `triggerValidate()` — triggers validation and returns Promise<boolean>
- * - `getValues()` — returns current form data as PdContactData
- * - `valid` — getter for current validation state
- */
-declare const meta: Meta<PdContactEditArgs>;
-export default meta;
-type Story = StoryObj<PdContactEditArgs>;
-/** Default empty contact form with all fields visible. Interactive via Controls panel. */
-export declare const Default: Story;
-/** Contact form pre-filled with private person data (first name, last name, address). */
-export declare const PrepopulatedPrivate: Story;
-/** Contact form pre-filled with company data (company name, VAT number). */
-export declare const PrepopulatedCompany: Story;
-/** Form with all fields marked as required — shows validation indicators. */
-export declare const AllFieldsRequired: Story;
-/** Demonstrates showing only a subset of fields using the inputFields array. */
-export declare const CustomFieldSelection: Story;
-/** Form with the optional property/building year selection field enabled. */
-export declare const WithPropertyDate: Story;
-/** CSS Custom Properties — Branded and Redesigned variants. */
-export declare const CustomStyling: Story;
-//# sourceMappingURL=pd-contact-edit.stories.d.ts.map

package/dist/pd-contact/pd-contact-edit.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-contact-edit.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact/pd-contact-edit.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,EAWL,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6CAA6C,CAAC;AAMrD;;;GAGG;AACH,UAAU,iBAAiB;IACzB,2DAA2D;IAC3D,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,iDAAiD;IACjD,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,yCAAyC;IACzC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iCAAiC;IACjC,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAuED;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAmFjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,0FAA0F;AAC1F,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,yFAAyF;AACzF,eAAO,MAAM,mBAAmB,EAAE,KAIjC,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB,EAAE,KAIjC,CAAC;AAMF,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,EAAE,KAI/B,CAAC;AAMF,gFAAgF;AAChF,eAAO,MAAM,oBAAoB,EAAE,KAoClC,CAAC;AAMF,6EAA6E;AAC7E,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KAuE3B,CAAC"}

package/dist/pd-contact/pd-contact-view.stories.d.ts

@@ -1,55 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components-vite';
-import { PdContactData } from '../types.js';
-/**
- * Story arguments interface for pd-contact (view mode).
- * Maps to the component's public API when used as a read-only display.
- */
-interface PdContactViewArgs {
-    /** Show summary view (read-only display) */
-    summary: boolean;
-    /** Render phone and email as clickable links */
-    phoneMailLink: boolean;
-    /** View type: 'detail' or 'card' (business card) */
-    viewType: "detail" | "card";
-    /** Card layout mode: 'auto', 'horizontal', or 'vertical' */
-    cardLayout: "auto" | "horizontal" | "vertical";
-    /** Contact data to display */
-    contact: PdContactData;
-}
-/**
- * ## pd-contact (View Mode)
- *
- * Contact display component for showing contact information in read-only mode.
- * Supports two view types: detail (structured list) and card (business card layout).
- *
- * ### Features
- * - Detail view with structured address, phone, email, and social media display
- * - Business card view with logo, responsive layout, and social media integration
- * - Private and business contact support (company name, VAT number)
- * - Clickable phone/email links with icons
- * - Card view with container-query-based responsive layout (auto/horizontal/vertical)
- * - CSS custom properties for full visual customization
- * - CSS part `card-wrapper` for external card styling
- *
- * ### View Types
- * - `detail` — Traditional structured contact display (default)
- * - `card` — Business card layout with logo and social media
- */
-declare const meta: Meta<PdContactViewArgs>;
-export default meta;
-type Story = StoryObj<PdContactViewArgs>;
-/** Default contact view showing a private person. Interactive via Controls panel. */
-export declare const Default: Story;
-/** All detail view variants at a glance: private, company, with title/social media. */
-export declare const AllDetailVariants: Story;
-/** Detail view with titleName as header, website link, and social media integration. */
-export declare const DetailWithTitleAndSocialMedia: Story;
-/** Business card with auto-responsive layout — switches between horizontal (>500px) and vertical (<500px). */
-export declare const CardDefault: Story;
-/** Card view with all three layout modes side by side. */
-export declare const CardLayouts: Story;
-/** Card view with different content configurations: without logo, without social media, minimal. */
-export declare const CardContentVariations: Story;
-/** CSS Custom Properties — Branded and Redesigned card variants. */
-export declare const CustomStyling: Story;
-//# sourceMappingURL=pd-contact-view.stories.d.ts.map

package/dist/pd-contact/pd-contact-view.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-contact-view.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact/pd-contact-view.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,iBAAiB,CAAC;AAMzB;;;GAGG;AACH,UAAU,iBAAiB;IACzB,4CAA4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,gDAAgD;IAChD,aAAa,EAAE,OAAO,CAAC;IACvB,oDAAoD;IACpD,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,4DAA4D;IAC5D,UAAU,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;IAC/C,8BAA8B;IAC9B,OAAO,EAAE,aAAa,CAAC;CACxB;AAyED;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAgFjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,qFAAqF;AACrF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,uFAAuF;AACvF,eAAO,MAAM,iBAAiB,EAAE,KA0C/B,CAAC;AAMF,wFAAwF;AACxF,eAAO,MAAM,6BAA6B,EAAE,KAY3C,CAAC;AAMF,8GAA8G;AAC9G,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAMF,0DAA0D;AAC1D,eAAO,MAAM,WAAW,EAAE,KAwCzB,CAAC;AAMF,oGAAoG;AACpG,eAAO,MAAM,qBAAqB,EAAE,KA+CnC,CAAC;AAMF,oEAAoE;AACpE,eAAO,MAAM,aAAa,EAAE,KAuF3B,CAAC"}