@progressive-development/pd-contact 1.0.2 → 1.0.4

package/dist/pd-bg-select-form/PdBgSelectForm.js

@@ -0,0 +1,338 @@
+import { css, nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { PdBaseUIInput } from '@progressive-development/pd-forms';
+import '@progressive-development/pd-forms/pd-form-row';
+import '@progressive-development/pd-forms/pd-radio-group';
+import '@progressive-development/pd-forms/pd-checkbox';
+import '@progressive-development/pd-forms/pd-color-picker';
+import '../pd-gradient-form.js';
+import '../pd-bg-image-form.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;
+};
+const DEFAULT_MODE = "color";
+const DEFAULT_COLOR = "#333333";
+const DEFAULT_GRADIENT_ANGLE = 135;
+class PdBgSelectForm extends PdBaseUIInput {
+  constructor() {
+    super(...arguments);
+    this.colorLabel = "Hintergrundfarbe";
+    this.defaultColor = DEFAULT_COLOR;
+    this.hidePreview = false;
+    this.showBgSize = false;
+    this.showBgRepeat = false;
+    this.hideTextShadow = false;
+    this._mode = DEFAULT_MODE;
+    /** Stable init value for radio — only changes on restore, not on user clicks. */
+    this._modeInit = DEFAULT_MODE;
+    this._color = DEFAULT_COLOR;
+    this._gradientColor1 = "";
+    this._gradientColor2 = "";
+    this._gradientAngle = DEFAULT_GRADIENT_ANGLE;
+    this._gradientStop1 = 0;
+    this._gradientStop2 = 100;
+    this._bgImage = "";
+    this._overlayColor = "#000000";
+    this._overlayOpacity = 0;
+    this._textShadow = false;
+    this._bgSize = "cover";
+    this._bgRepeat = "no-repeat";
+  }
+  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));
+      }
+    `
+    ];
+  }
+  // ── 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}BgSelectForm`;
+    const errorId = `${this.id}Error`;
+    return html`
+      ${this._renderLabel(inputId)}
+
+      <div class="form-fields">
+        <pd-form-row>
+          <pd-radio-group
+            label="Hintergrund-Typ"
+            valueName="bgMode"
+            @pd-form-element-change="${this._onModeChange}"
+            @pd-form-element-register="${this._innerStop}"
+            @validate-form="${this._innerStop}"
+            @field-change="${this._innerStop}"
+          >
+            <pd-checkbox
+              checkType="RADIO"
+              valueName="color"
+              initValue="${this._modeInit === "color"}"
+              >Farbe</pd-checkbox
+            >
+            <pd-checkbox
+              checkType="RADIO"
+              valueName="gradient"
+              initValue="${this._modeInit === "gradient"}"
+              >Gradient</pd-checkbox
+            >
+            <pd-checkbox
+              checkType="RADIO"
+              valueName="image"
+              initValue="${this._modeInit === "image"}"
+              >Bild</pd-checkbox
+            >
+          </pd-radio-group>
+        </pd-form-row>
+
+        ${this._mode === "color" ? html`
+              <pd-form-row>
+                <pd-color-picker
+                  span="half"
+                  label="${this.colorLabel}"
+                  .initValue="${this._color}"
+                  .handleChangeForInitVal="${true}"
+                  ?disabled="${this.disabled}"
+                  @pd-form-element-change="${this._onColorChange}"
+                  @pd-form-element-register="${this._innerStop}"
+                  @validate-form="${this._innerStop}"
+                  @field-change="${this._innerStop}"
+                ></pd-color-picker>
+              </pd-form-row>
+            ` : nothing}
+        ${this._mode === "gradient" ? html`
+              <pd-gradient-form
+                ?hide-preview="${this.hidePreview}"
+                label="Gradient"
+                valueName="gradient"
+                .initValue="${this._gradientInitValue}"
+                .handleChangeForInitVal="${true}"
+                ?disabled="${this.disabled}"
+                @pd-form-element-change="${this._onGradientChange}"
+                @pd-form-element-register="${this._innerStop}"
+                @validate-form="${this._innerStop}"
+                @field-change="${this._innerStop}"
+              ></pd-gradient-form>
+            ` : nothing}
+        ${this._mode === "image" ? html`
+              <pd-bg-image-form
+                ?hide-preview="${this.hidePreview}"
+                ?show-bg-size="${this.showBgSize}"
+                ?show-bg-repeat="${this.showBgRepeat}"
+                ?hide-text-shadow="${this.hideTextShadow}"
+                label="Hintergrundbild"
+                valueName="bgImage"
+                .initValue="${this._bgImageInitValue}"
+                .handleChangeForInitVal="${true}"
+                ?disabled="${this.disabled}"
+                @pd-form-element-change="${this._onBgImageChange}"
+                @pd-form-element-register="${this._innerStop}"
+                @validate-form="${this._innerStop}"
+                @field-change="${this._innerStop}"
+              ></pd-bg-image-form>
+            ` : nothing}
+      </div>
+
+      ${this._renderErrorMsg(errorId)}
+    `;
+  }
+  // ── Value Parsing ──────────────────────────────────────────────────────────
+  _applyInitValue(raw) {
+    try {
+      const parsed = JSON.parse(raw);
+      this._mode = parsed.mode || DEFAULT_MODE;
+      this._modeInit = this._mode;
+      this._color = parsed.color || this.defaultColor;
+      this._gradientColor1 = parsed.gradientColor1 ?? "";
+      this._gradientColor2 = parsed.gradientColor2 ?? "";
+      this._gradientAngle = parsed.gradientAngle ?? DEFAULT_GRADIENT_ANGLE;
+      this._gradientStop1 = parsed.gradientStop1 ?? 0;
+      this._gradientStop2 = parsed.gradientStop2 ?? 100;
+      this._bgImage = parsed.bgImage ?? "";
+      this._overlayColor = parsed.overlayColor ?? "#000000";
+      this._overlayOpacity = parsed.overlayOpacity ?? 0;
+      this._textShadow = parsed.textShadow ?? false;
+      this._bgSize = parsed.bgSize ?? "cover";
+      this._bgRepeat = parsed.bgRepeat ?? "no-repeat";
+    } catch {
+    }
+  }
+  get _gradientInitValue() {
+    return JSON.stringify({
+      color1: this._gradientColor1 || this._color || "#333",
+      color2: this._gradientColor2 || "#666",
+      angle: this._gradientAngle,
+      stop1: this._gradientStop1,
+      stop2: this._gradientStop2
+    });
+  }
+  get _bgImageInitValue() {
+    return JSON.stringify({
+      image: this._bgImage,
+      overlayColor: this._overlayColor,
+      overlayOpacity: this._overlayOpacity,
+      textShadow: this._textShadow,
+      bgSize: this._bgSize,
+      bgRepeat: this._bgRepeat
+    });
+  }
+  _getParsedValue() {
+    return this._buildValue();
+  }
+  _buildValue() {
+    const val = { mode: this._mode };
+    if (this._mode === "color") {
+      val.color = this._color;
+    }
+    if (this._mode === "gradient") {
+      val.gradientColor1 = this._gradientColor1;
+      val.gradientColor2 = this._gradientColor2;
+      val.gradientAngle = this._gradientAngle;
+      val.gradientStop1 = this._gradientStop1;
+      val.gradientStop2 = this._gradientStop2;
+    }
+    if (this._mode === "image") {
+      val.bgImage = this._bgImage;
+      val.overlayColor = this._overlayColor;
+      val.overlayOpacity = this._overlayOpacity;
+      val.textShadow = this._textShadow;
+      val.bgSize = this._bgSize;
+      val.bgRepeat = this._bgRepeat;
+    }
+    return val;
+  }
+  // ── Inner Element Events ───────────────────────────────────────────────────
+  _innerStop(e) {
+    e.stopPropagation();
+  }
+  _onModeChange(e) {
+    e.stopPropagation();
+    const v = e.detail?.value;
+    if (v === "color" || v === "gradient" || v === "image") {
+      this._mode = v;
+      this._emitValue();
+    }
+  }
+  _onColorChange(e) {
+    e.stopPropagation();
+    this._color = e.detail?.value ?? this._color;
+    this._emitValue();
+  }
+  _onGradientChange(e) {
+    e.stopPropagation();
+    try {
+      const val = JSON.parse(e.detail?.value ?? "{}");
+      this._gradientColor1 = val.color1 ?? "";
+      this._gradientColor2 = val.color2 ?? "";
+      this._gradientAngle = val.angle ?? DEFAULT_GRADIENT_ANGLE;
+      this._gradientStop1 = val.stop1 ?? 0;
+      this._gradientStop2 = val.stop2 ?? 100;
+    } catch {
+    }
+    this._emitValue();
+  }
+  _onBgImageChange(e) {
+    e.stopPropagation();
+    try {
+      const val = JSON.parse(e.detail?.value ?? "{}");
+      this._bgImage = val.image ?? "";
+      this._overlayColor = val.overlayColor ?? "#000000";
+      this._overlayOpacity = val.overlayOpacity ?? 0;
+      this._textShadow = val.textShadow ?? false;
+      this._bgSize = val.bgSize ?? "cover";
+      this._bgRepeat = val.bgRepeat ?? "no-repeat";
+    } catch {
+    }
+    this._emitValue();
+  }
+  _emitValue() {
+    const val = this._buildValue();
+    this._handleChangedValue(JSON.stringify(val), void 0, true);
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdBgSelectForm.prototype, "colorLabel");
+__decorateClass([
+  property({ type: String })
+], PdBgSelectForm.prototype, "defaultColor");
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-preview" })
+], PdBgSelectForm.prototype, "hidePreview");
+__decorateClass([
+  property({ type: Boolean, attribute: "show-bg-size" })
+], PdBgSelectForm.prototype, "showBgSize");
+__decorateClass([
+  property({ type: Boolean, attribute: "show-bg-repeat" })
+], PdBgSelectForm.prototype, "showBgRepeat");
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-text-shadow" })
+], PdBgSelectForm.prototype, "hideTextShadow");
+__decorateClass([
+  state()
+], PdBgSelectForm.prototype, "_mode");
+__decorateClass([
+  state()
+], PdBgSelectForm.prototype, "_color");
+__decorateClass([
+  state()
+], PdBgSelectForm.prototype, "_gradientColor1");
+__decorateClass([
+  state()
+], PdBgSelectForm.prototype, "_gradientColor2");
+__decorateClass([
+  state()
+], PdBgSelectForm.prototype, "_gradientAngle");
+__decorateClass([
+  state()
+], PdBgSelectForm.prototype, "_gradientStop1");
+__decorateClass([
+  state()
+], PdBgSelectForm.prototype, "_gradientStop2");
+__decorateClass([
+  state()
+], PdBgSelectForm.prototype, "_bgImage");
+__decorateClass([
+  state()
+], PdBgSelectForm.prototype, "_overlayColor");
+__decorateClass([
+  state()
+], PdBgSelectForm.prototype, "_overlayOpacity");
+__decorateClass([
+  state()
+], PdBgSelectForm.prototype, "_textShadow");
+__decorateClass([
+  state()
+], PdBgSelectForm.prototype, "_bgSize");
+__decorateClass([
+  state()
+], PdBgSelectForm.prototype, "_bgRepeat");
+
+export { PdBgSelectForm };

package/dist/pd-bg-select-form/pd-bg-select-form.d.ts

@@ -0,0 +1,4 @@
+import { PdBgSelectForm } from './PdBgSelectForm.js';
+export { PdBgSelectForm };
+export type { BgSelectValue, BgMode } from './PdBgSelectForm.js';
+//# sourceMappingURL=pd-bg-select-form.d.ts.map

package/dist/pd-bg-select-form/pd-bg-select-form.d.ts.map

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

package/dist/pd-bg-select-form.d.ts

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

package/dist/pd-bg-select-form.js

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

package/dist/pd-contact/PdContact.d.ts

@@ -38,6 +38,8 @@ export declare class PdContact extends LitElement {
     requiredFields: string[];
     /** List of fields to be rendered (empty = all fields). */
     inputFields: string[];
+    /** Show 'required fields' info hint below the form. */
+    requiredFieldInfo: boolean;
     /** Contact data object to show or edit. */
     contact?: PdContactData;
     /** Optional location match data for auto-fill. */
@@ -47,7 +49,11 @@ export declare class PdContact extends LitElement {
      * @ignore */
     private _business;
     /** @ignore */
+    private _socialMediaItems;
+    /** @ignore */
     private _contactForm;
+    /** @ignore */
+    private _socialMediaEl?;
     static styles: CSSResultGroup;
     willUpdate(changedProps: PropertyValues<this>): void;
     render(): import('lit').TemplateResult<1>;
@@ -67,6 +73,7 @@ export declare class PdContact extends LitElement {
     triggerValidate(): Promise<boolean>;
     getValues(): PdContactData;
     private _switchAddressType;
+    private _onSocialMediaChange;
     private _isRequired;
     private _showInput;
     private _setFormData;

package/dist/pd-contact/PdContact.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdContact.d.ts","sourceRoot":"","sources":["../../src/pd-contact/PdContact.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E,OAAO,0CAA0C,CAAC;AAClD,OAAO,iDAAiD,CAAC;AAGzD,OAAO,+CAA+C,CAAC;AACvD,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,4CAA4C,CAAC;AACpD,OAAO,6CAA6C,CAAC;AACrD,OAAO,kDAAkD,CAAC;AAE1D,OAAO,EAaL,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,UAAU,CAAC;AAmClB;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,uCAAuC;IAEvC,YAAY,SAAsD;IAElE,4DAA4D;IAE5D,aAAa,UAAS;IAEtB,8DAA8D;IAE9D,OAAO,UAAS;IAEhB,+EAA+E;IAE/E,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAY;IAEvC,iCAAiC;IAEjC,UAAU,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,CAAU;IAExD;;OAEG;IAEH,gBAAgB,UAAS;IAEzB,yCAAyC;IAEzC,cAAc,EAAE,MAAM,EAAE,CAAM;IAE9B,0DAA0D;IAE1D,WAAW,EAAE,MAAM,EAAE,CAAM;IAE3B,2CAA2C;IAE3C,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB,kDAAkD;IAElD,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;iBAEa;IAEb,OAAO,CAAC,SAAS,CAAS;IAE1B,cAAc;IAEd,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAgB,MAAM,EAAE,cAAc,CAuYpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,MAAM;IAYf,OAAO,CAAC,kBAAkB;IAwO1B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAgI1B,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,sBAAsB;IAoD9B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,qBAAqB;IAQ7B,IAAI,KAAK,YAER;IAEY,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAIzC,SAAS,IAAI,aAAa;IAgCjC,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,MAAM,CAAC,WAAW;CAG3B"}
+{"version":3,"file":"PdContact.d.ts","sourceRoot":"","sources":["../../src/pd-contact/PdContact.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E,OAAO,0CAA0C,CAAC;AAClD,OAAO,iDAAiD,CAAC;AAGzD,OAAO,+CAA+C,CAAC;AACvD,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,4CAA4C,CAAC;AACpD,OAAO,6CAA6C,CAAC;AACrD,OAAO,kDAAkD,CAAC;AAE1D,OAAO,EAeL,KAAK,aAAa,EAClB,KAAK,cAAc,EAEpB,MAAM,UAAU,CAAC;AAuClB;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,uCAAuC;IAEvC,YAAY,SAAsD;IAElE,4DAA4D;IAE5D,aAAa,UAAS;IAEtB,8DAA8D;IAE9D,OAAO,UAAS;IAEhB,+EAA+E;IAE/E,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAY;IAEvC,iCAAiC;IAEjC,UAAU,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,CAAU;IAExD;;OAEG;IAEH,gBAAgB,UAAS;IAEzB,yCAAyC;IAEzC,cAAc,EAAE,MAAM,EAAE,CAAM;IAE9B,0DAA0D;IAE1D,WAAW,EAAE,MAAM,EAAE,CAAM;IAE3B,uDAAuD;IAEvD,iBAAiB,UAAQ;IAEzB,2CAA2C;IAE3C,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB,kDAAkD;IAElD,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;iBAEa;IAEb,OAAO,CAAC,SAAS,CAAS;IAE1B,cAAc;IAEd,OAAO,CAAC,iBAAiB,CAAqB;IAE9C,cAAc;IAEd,OAAO,CAAC,YAAY,CAAmB;IAEvC,cAAc;IAEd,OAAO,CAAC,cAAc,CAAC,CAAqB;IAE5C,OAAgB,MAAM,EAAE,cAAc,CAuYpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOpD,MAAM;IAYf,OAAO,CAAC,kBAAkB;IAmQ1B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAgI1B,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,sBAAsB;IAoD9B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,qBAAqB;IAQ7B,IAAI,KAAK,YAER;IAEY,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAIzC,SAAS,IAAI,aAAa;IAgCjC,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,MAAM,CAAC,WAAW;CAG3B"}

package/dist/pd-contact/PdContact.js

@@ -9,7 +9,7 @@ import '@progressive-development/pd-forms/pd-form-row';
 import '@progressive-development/pd-forms/pd-input';
 import '@progressive-development/pd-forms/pd-select';
 import '@progressive-development/pd-forms/pd-radio-group';
-import { C_TYPE, C_COMPANY, C_BTWNR, C_FIRSTNAME, C_LASTNAME, C_STREET, C_CITY, C_ZIP, C_ADDITIONAL, C_PROPERTY_DATE, C_PHONE1, C_EMAIL } from '../types.js';
+import { C_TYPE, C_COMPANY, C_BTWNR, C_FIRSTNAME, C_LASTNAME, C_STREET, C_CITY, C_ZIP, C_ADDITIONAL, C_PROPERTY_DATE, C_PHONE1, C_EMAIL, C_WEBSITE, C_SOCIAL_MEDIA } from '../types.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -65,7 +65,9 @@ const _PdContact = class _PdContact extends LitElement {
     this.withPropertyDate = false;
     this.requiredFields = [];
     this.inputFields = [];
+    this.requiredFieldInfo = true;
     this._business = false;
+    this._socialMediaItems = [];
   }
   static {
     this.styles = [
@@ -464,6 +466,7 @@ const _PdContact = class _PdContact extends LitElement {
   willUpdate(changedProps) {
     if (changedProps.has("contact") && this.contact) {
       this._business = this.contact.business ?? false;
+      this._socialMediaItems = this.contact.socialMedia ?? [];
     }
   }
   render() {
@@ -475,7 +478,11 @@ const _PdContact = class _PdContact extends LitElement {
   }
   _renderEditContact() {
     return html`
-      <pd-form-container id="contactContainerId" requiredFieldInfo autoTrimm>
+      <pd-form-container
+        id="contactContainerId"
+        ?requiredFieldInfo="${this.requiredFieldInfo}"
+        autoTrimm
+      >
         ${this.inputFields.length === 0 || this._showInput(C_TYPE) ? html`
               <pd-form-row>
                 <pd-radio-group
@@ -673,6 +680,25 @@ const _PdContact = class _PdContact extends LitElement {
                 ></pd-input>
               </pd-form-row>
             ` : ""}
+        ${this._showInput(C_WEBSITE) ? html`
+              <pd-form-row class="contact-form">
+                <pd-input
+                  id="websiteId"
+                  label="${msg("Website", { id: "pd.contact.label.website" })}"
+                  fieldType="url"
+                  valueName="website"
+                  initValue="${this.contact?.website || ""}"
+                  autoCompleteName="url"
+                  ?required="${this._isRequired(C_WEBSITE)}"
+                ></pd-input>
+              </pd-form-row>
+            ` : ""}
+        ${this._showInput(C_SOCIAL_MEDIA) ? html`
+              <pd-socialmedia
+                .initItems="${this._socialMediaItems}"
+                @items-change="${this._onSocialMediaChange}"
+              ></pd-socialmedia>
+            ` : ""}
       </pd-form-container>
     `;
   }
@@ -883,6 +909,7 @@ const _PdContact = class _PdContact extends LitElement {
   }
   getValues() {
     const contactFormValues = this._contactForm?.getValues().origin;
+    const socialItems = this._socialMediaEl?.value ?? this._socialMediaItems;
     const commonValues = {
       business: this._business,
       street: contactFormValues.street,
@@ -892,12 +919,9 @@ const _PdContact = class _PdContact extends LitElement {
       additionalHint: contactFormValues.additionalHint,
       propertyDate: contactFormValues.propertyDate,
       phone1: contactFormValues.phone1,
-      email: contactFormValues.email
-      // No input fields for following values
-      //country?: string;
-      //btw?: string;
-      //kbc?: string;
-      //bank?: string;
+      email: contactFormValues.email,
+      ...contactFormValues.website ? { website: contactFormValues.website } : {},
+      ...socialItems.length ? { socialMedia: socialItems } : {}
     };
     return this._business ? {
       ...commonValues,
@@ -915,6 +939,10 @@ const _PdContact = class _PdContact extends LitElement {
     }
     e.stopPropagation();
   }
+  _onSocialMediaChange(e) {
+    this._socialMediaItems = e.detail?.items ?? [];
+    e.stopPropagation();
+  }
   _isRequired(field) {
     return this.requiredFields.length > 0 ? this.requiredFields.includes(field) : false;
   }
@@ -979,6 +1007,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Array })
 ], _PdContact.prototype, "inputFields");
+__decorateClass([
+  property({ type: Boolean })
+], _PdContact.prototype, "requiredFieldInfo");
 __decorateClass([
   property({ type: Object })
 ], _PdContact.prototype, "contact");
@@ -988,9 +1019,15 @@ __decorateClass([
 __decorateClass([
   state()
 ], _PdContact.prototype, "_business");
+__decorateClass([
+  state()
+], _PdContact.prototype, "_socialMediaItems");
 __decorateClass([
   query("#contactContainerId")
 ], _PdContact.prototype, "_contactForm");
+__decorateClass([
+  query("pd-socialmedia")
+], _PdContact.prototype, "_socialMediaEl");
 let PdContact = _PdContact;
 
 export { PdContact };

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

@@ -0,0 +1,49 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { PdBaseUIInput } from '@progressive-development/pd-forms';
+export interface GradientValue {
+    color1: string;
+    color2: string;
+    angle: number;
+    stop1: number;
+    stop2: number;
+}
+/**
+ * Gradient configuration form combining two color pickers and an angle slider.
+ *
+ * Value format: JSON string `{"color1":"#hex","color2":"#hex","angle":135}`
+ *
+ * @tagname pd-gradient-form
+ * @summary Gradient form with two color pickers, angle slider, and live preview.
+ *
+ * @event pd-form-element-change - Fired when any gradient value changes. Detail: `{ value, name, parsedValue, state }`.
+ */
+export declare class PdGradientForm extends PdBaseUIInput {
+    /** Label for the first color picker. */
+    color1Label: string;
+    /** Label for the second color picker. */
+    color2Label: string;
+    /** Label for the angle slider. */
+    angleLabel: string;
+    /** Default angle when no value is set. */
+    defaultAngle: number;
+    /** Hide the live gradient preview strip. */
+    hidePreview: boolean;
+    private _color1;
+    private _color2;
+    private _angle;
+    private _stop1;
+    private _stop2;
+    static styles: CSSResultGroup;
+    update(changedProps: PropertyValues<this>): void;
+    render(): import('lit').TemplateResult<1>;
+    private _applyInitValue;
+    protected _getParsedValue(): GradientValue;
+    private _innerStop;
+    private _onColor1Change;
+    private _onColor2Change;
+    private _onStop1Change;
+    private _onStop2Change;
+    private _onAngleChange;
+    private _emitGradientValue;
+}
+//# sourceMappingURL=PdGradientForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdGradientForm.d.ts","sourceRoot":"","sources":["../../src/pd-gradient-form/PdGradientForm.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAsB,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI9E,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,+CAA+C,CAAC;AACvD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,4CAA4C,CAAC;AAIpD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAQD;;;;;;;;;GASG;AACH,qBAAa,cAAe,SAAQ,aAAa;IAC/C,wCAAwC;IAExC,WAAW,SAAa;IAExB,yCAAyC;IAEzC,WAAW,SAAa;IAExB,kCAAkC;IAElC,UAAU,SAAY;IAEtB,0CAA0C;IAE1C,YAAY,SAAiB;IAE7B,4CAA4C;IAE5C,WAAW,UAAS;IAEX,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,MAAM,CAAiB;IAExC,OAAgB,MAAM,EAAE,cAAc,CAoBpC;IAIO,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgBhD,MAAM;IAsGf,OAAO,CAAC,eAAe;cAaJ,eAAe,IAAI,aAAa;IAYnD,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,kBAAkB;CAU3B"}