@progressive-development/pd-contact 1.0.3 → 1.0.4

package/dist/index.d.ts

@@ -1,4 +1,10 @@
 export { PdContact } from './pd-contact/pd-contact.js';
+export { PdGradientForm } from './pd-gradient-form/pd-gradient-form.js';
+export type { GradientValue } from './pd-gradient-form/pd-gradient-form.js';
+export { PdBgImageForm } from './pd-bg-image-form/pd-bg-image-form.js';
+export type { BgImageValue } from './pd-bg-image-form/pd-bg-image-form.js';
+export { PdBgSelectForm } from './pd-bg-select-form/pd-bg-select-form.js';
+export type { BgSelectValue, BgMode, } from './pd-bg-select-form/pd-bg-select-form.js';
 export type { PdContactData, PdContactFormOptions, PdContactMatch, SocialEntry, C_ADDITIONAL, C_BTWNR, C_CITY, C_COMPANY, C_EMAIL, C_FIRSTNAME, C_LASTNAME, C_LOGO, C_PHONE1, C_PROPERTY_DATE, C_SOCIAL_MEDIA, C_STREET, C_STREET_NR, C_TITLE_NAME, C_TYPE, C_WEBSITE, C_ZIP, } from './types.js';
 export { templates as beTemplates } from './generated/locales/be.js';
 export { templates as deTemplates } from './generated/locales/de.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,OAAO,EACP,WAAW,EACX,UAAU,EACV,MAAM,EACN,QAAQ,EACR,eAAe,EACf,cAAc,EACd,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,GACN,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,YAAY,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,YAAY,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,YAAY,EACV,aAAa,EACb,MAAM,GACP,MAAM,0CAA0C,CAAC;AAElD,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,OAAO,EACP,WAAW,EACX,UAAU,EACV,MAAM,EACN,QAAQ,EACR,eAAe,EACf,cAAc,EACd,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,GACN,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -1,5 +1,11 @@
 import './pd-contact.js';
+import './pd-gradient-form.js';
+import './pd-bg-image-form.js';
+import './pd-bg-select-form.js';
 export { templates as beTemplates } from './locales/be.js';
 export { templates as deTemplates } from './locales/de.js';
 export { templates as enTemplates } from './locales/en.js';
+export { PdBgImageForm } from './pd-bg-image-form/PdBgImageForm.js';
+export { PdBgSelectForm } from './pd-bg-select-form/PdBgSelectForm.js';
 export { PdContact } from './pd-contact/PdContact.js';
+export { PdGradientForm } from './pd-gradient-form/PdGradientForm.js';

package/dist/pd-bg-image-form/PdBgImageForm.d.ts

@@ -0,0 +1,65 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { PdBaseUIInput } from '@progressive-development/pd-forms';
+export interface BgImageValue {
+    image: string;
+    overlayColor: string;
+    overlayOpacity: number;
+    textShadow: boolean;
+    bgSize?: "cover" | "contain" | "auto";
+    bgRepeat?: "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
+}
+/**
+ * Background image configuration form combining image upload, overlay opacity, and text shadow.
+ *
+ * Value format: JSON string `{"image":"[...]","overlayOpacity":20,"textShadow":true}`
+ *
+ * @tagname pd-bg-image-form
+ * @summary Background image form with upload, darkening slider, and text shadow toggle.
+ *
+ * @event pd-form-element-change - Fired when any value changes. Detail: `{ value, name, parsedValue, state }`.
+ *
+ * @cssprop --pd-bg-image-form-preview-height - Height of the image preview. Default: `6rem`.
+ */
+export declare class PdBgImageForm extends PdBaseUIInput {
+    /** Label for the image upload. */
+    imageLabel: string;
+    /** Label for the overlay color picker. */
+    overlayColorLabel: string;
+    /** Label for the overlay opacity slider. */
+    overlayLabel: string;
+    /** Label for the text shadow checkbox. */
+    textShadowLabel: string;
+    /** Maximum overlay opacity percentage. */
+    maxOverlay: number;
+    /** Hide the live image preview. */
+    hidePreview: boolean;
+    /** Show background-size selector (cover/contain/auto). Default: hidden. */
+    showBgSize: boolean;
+    /** Show background-repeat selector. Default: hidden. */
+    showBgRepeat: boolean;
+    /** Hide the text-shadow checkbox. Default: shown (backward compat). */
+    hideTextShadow: boolean;
+    private _image;
+    private _imageSrc;
+    private _overlayColor;
+    private _overlayOpacity;
+    private _textShadow;
+    private _bgSize;
+    private _bgRepeat;
+    static styles: CSSResultGroup;
+    update(changedProps: PropertyValues<this>): void;
+    render(): import('lit').TemplateResult<1>;
+    private _renderPreview;
+    private _applyInitValue;
+    private _extractFirstSrc;
+    protected _getParsedValue(): BgImageValue;
+    private _innerStop;
+    private _onImageChange;
+    private _onOverlayColorChange;
+    private _onOverlayChange;
+    private _onTextShadowChange;
+    private _onBgSizeChange;
+    private _onBgRepeatChange;
+    private _emitValue;
+}
+//# sourceMappingURL=PdBgImageForm.d.ts.map

package/dist/pd-bg-image-form/PdBgImageForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdBgImageForm.d.ts","sourceRoot":"","sources":["../../src/pd-bg-image-form/PdBgImageForm.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,kDAAkD,CAAC;AAC1D,OAAO,mDAAmD,CAAC;AAC3D,OAAO,4CAA4C,CAAC;AACpD,OAAO,+CAA+C,CAAC;AACvD,OAAO,kDAAkD,CAAC;AAI1D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;CAC7D;AAOD;;;;;;;;;;;GAWG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C,kCAAkC;IAElC,UAAU,SAAqB;IAE/B,0CAA0C;IAE1C,iBAAiB,SAAmB;IAEpC,4CAA4C;IAE5C,YAAY,SAAoB;IAEhC,0CAA0C;IAE1C,eAAe,SAAwC;IAEvD,0CAA0C;IAE1C,UAAU,SAAM;IAEhB,mCAAmC;IAEnC,WAAW,UAAS;IAEpB,2EAA2E;IAE3E,UAAU,UAAS;IAEnB,wDAAwD;IAExD,YAAY,UAAS;IAErB,uEAAuE;IAEvE,cAAc,UAAS;IAEd,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,eAAe,CAA2B;IAClD,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAyC;IACxD,OAAO,CAAC,SAAS,CACZ;IAEd,OAAgB,MAAM,EAAE,cAAc,CAuCpC;IAIO,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAehD,MAAM;IAiJf,OAAO,CAAC,cAAc;IA6BtB,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,gBAAgB;cASL,eAAe,IAAI,YAAY;IAalD,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,UAAU;CAWnB"}

package/dist/pd-bg-image-form/PdBgImageForm.js

@@ -0,0 +1,394 @@
+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-input-image';
+import '@progressive-development/pd-forms/pd-color-picker';
+import '@progressive-development/pd-forms/pd-range';
+import '@progressive-development/pd-forms/pd-checkbox';
+import '@progressive-development/pd-forms/pd-radio-group';
+
+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_OVERLAY_COLOR = "#000000";
+const DEFAULT_OVERLAY_OPACITY = 0;
+class PdBgImageForm extends PdBaseUIInput {
+  constructor() {
+    super(...arguments);
+    this.imageLabel = "Hintergrundbild";
+    this.overlayColorLabel = "Overlay-Farbe";
+    this.overlayLabel = "Overlay-Stärke";
+    this.textShadowLabel = "Text-Shadow für bessere Lesbarkeit";
+    this.maxOverlay = 80;
+    this.hidePreview = false;
+    this.showBgSize = false;
+    this.showBgRepeat = false;
+    this.hideTextShadow = false;
+    this._image = "";
+    this._imageSrc = "";
+    this._overlayColor = DEFAULT_OVERLAY_COLOR;
+    this._overlayOpacity = DEFAULT_OVERLAY_OPACITY;
+    this._textShadow = false;
+    this._bgSize = "cover";
+    this._bgRepeat = "no-repeat";
+  }
+  static {
+    this.styles = [
+      PdBaseUIInput.styles,
+      css`
+      :host {
+        display: block;
+      }
+
+      .image-preview {
+        position: relative;
+        height: var(--pd-bg-image-form-preview-height, 6rem);
+        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);
+        overflow: hidden;
+      }
+
+      .image-preview .overlay {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
+
+      .image-preview .preview-text {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-size: 0.875rem;
+        pointer-events: none;
+      }
+
+      .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}BgImageForm`;
+    const errorId = `${this.id}Error`;
+    return html`
+      ${this._renderLabel(inputId)}
+      ${this.hidePreview || !this._imageSrc ? nothing : this._renderPreview()}
+
+      <div class="form-fields">
+        <pd-form-row>
+          <pd-input-image
+            label="${this.imageLabel}"
+            max="1"
+            .initValue="${this._image}"
+            ?disabled="${this.disabled}"
+            @pd-form-element-change="${this._onImageChange}"
+            @pd-form-element-register="${this._innerStop}"
+            @validate-form="${this._innerStop}"
+            @field-change="${this._innerStop}"
+          ></pd-input-image>
+        </pd-form-row>
+
+        ${this.showBgSize ? html`
+              <pd-form-row>
+                <pd-radio-group
+                  label="Bildgröße"
+                  valueName="bgSize"
+                  @pd-form-element-change="${this._onBgSizeChange}"
+                  @pd-form-element-register="${this._innerStop}"
+                  @validate-form="${this._innerStop}"
+                  @field-change="${this._innerStop}"
+                >
+                  <pd-checkbox
+                    checkType="RADIO"
+                    valueName="cover"
+                    initValue="${this._bgSize === "cover"}"
+                    >Ausfüllen</pd-checkbox
+                  >
+                  <pd-checkbox
+                    checkType="RADIO"
+                    valueName="contain"
+                    initValue="${this._bgSize === "contain"}"
+                    >Einpassen</pd-checkbox
+                  >
+                  <pd-checkbox
+                    checkType="RADIO"
+                    valueName="auto"
+                    initValue="${this._bgSize === "auto"}"
+                    >Original</pd-checkbox
+                  >
+                </pd-radio-group>
+              </pd-form-row>
+            ` : nothing}
+        ${this.showBgRepeat ? html`
+              <pd-form-row>
+                <pd-radio-group
+                  label="Wiederholung"
+                  valueName="bgRepeat"
+                  @pd-form-element-change="${this._onBgRepeatChange}"
+                  @pd-form-element-register="${this._innerStop}"
+                  @validate-form="${this._innerStop}"
+                  @field-change="${this._innerStop}"
+                >
+                  <pd-checkbox
+                    checkType="RADIO"
+                    valueName="no-repeat"
+                    initValue="${this._bgRepeat === "no-repeat"}"
+                    >Keine</pd-checkbox
+                  >
+                  <pd-checkbox
+                    checkType="RADIO"
+                    valueName="repeat"
+                    initValue="${this._bgRepeat === "repeat"}"
+                    >Kacheln</pd-checkbox
+                  >
+                  <pd-checkbox
+                    checkType="RADIO"
+                    valueName="repeat-x"
+                    initValue="${this._bgRepeat === "repeat-x"}"
+                    >Horizontal</pd-checkbox
+                  >
+                  <pd-checkbox
+                    checkType="RADIO"
+                    valueName="repeat-y"
+                    initValue="${this._bgRepeat === "repeat-y"}"
+                    >Vertikal</pd-checkbox
+                  >
+                </pd-radio-group>
+              </pd-form-row>
+            ` : nothing}
+
+        <pd-form-row>
+          <pd-color-picker
+            span="half"
+            label="${this.overlayColorLabel}"
+            .initValue="${this._overlayColor}"
+            .handleChangeForInitVal="${true}"
+            ?disabled="${this.disabled}"
+            @pd-form-element-change="${this._onOverlayColorChange}"
+            @pd-form-element-register="${this._innerStop}"
+            @validate-form="${this._innerStop}"
+            @field-change="${this._innerStop}"
+          ></pd-color-picker>
+          <pd-range
+            span="half"
+            no-ticks
+            label="${this.overlayLabel}"
+            min="0"
+            max="${this.maxOverlay}"
+            step="5"
+            .initValue="${String(this._overlayOpacity)}"
+            .handleChangeForInitVal="${true}"
+            ?disabled="${this.disabled}"
+            @pd-form-element-change="${this._onOverlayChange}"
+            @pd-form-element-register="${this._innerStop}"
+            @validate-form="${this._innerStop}"
+            @field-change="${this._innerStop}"
+          ></pd-range>
+        </pd-form-row>
+
+        ${this.hideTextShadow ? nothing : html`
+              <pd-form-row>
+                <pd-checkbox
+                  label="${this.textShadowLabel}"
+                  .initValue="${this._textShadow ? "true" : "false"}"
+                  ?disabled="${this.disabled}"
+                  @pd-form-element-change="${this._onTextShadowChange}"
+                  @pd-form-element-register="${this._innerStop}"
+                  @validate-form="${this._innerStop}"
+                  @field-change="${this._innerStop}"
+                ></pd-checkbox>
+              </pd-form-row>
+            `}
+      </div>
+
+      ${this._renderErrorMsg(errorId)}
+    `;
+  }
+  _renderPreview() {
+    const r = parseInt(this._overlayColor.slice(1, 3), 16) || 0;
+    const g = parseInt(this._overlayColor.slice(3, 5), 16) || 0;
+    const b = parseInt(this._overlayColor.slice(5, 7), 16) || 0;
+    const overlayStyle = {
+      background: `rgba(${r}, ${g}, ${b}, ${this._overlayOpacity / 100})`
+    };
+    const previewStyle = {
+      backgroundImage: `url(${this._imageSrc})`,
+      backgroundSize: this._bgSize,
+      backgroundRepeat: this._bgRepeat,
+      backgroundPosition: "center"
+    };
+    const textStyle = this._textShadow ? { textShadow: "1px 1px 3px rgba(0,0,0,0.8)" } : {};
+    return html`
+      <div class="image-preview" style="${styleMap(previewStyle)}">
+        <div class="overlay" style="${styleMap(overlayStyle)}"></div>
+        <div class="preview-text" style="${styleMap(textStyle)}">
+          Beispieltext
+        </div>
+      </div>
+    `;
+  }
+  // ── Value Parsing ──────────────────────────────────────────────────────────
+  _applyInitValue(raw) {
+    try {
+      const parsed = JSON.parse(raw);
+      this._image = parsed.image || "";
+      this._imageSrc = this._extractFirstSrc(this._image);
+      this._overlayColor = parsed.overlayColor || DEFAULT_OVERLAY_COLOR;
+      this._overlayOpacity = parsed.overlayOpacity ?? DEFAULT_OVERLAY_OPACITY;
+      this._textShadow = parsed.textShadow ?? false;
+      this._bgSize = parsed.bgSize ?? "cover";
+      this._bgRepeat = parsed.bgRepeat ?? "no-repeat";
+    } catch {
+    }
+  }
+  _extractFirstSrc(imageJson) {
+    try {
+      const arr = JSON.parse(imageJson);
+      return arr?.[0]?.src ?? "";
+    } catch {
+      return "";
+    }
+  }
+  _getParsedValue() {
+    return {
+      image: this._image,
+      overlayColor: this._overlayColor,
+      overlayOpacity: this._overlayOpacity,
+      textShadow: this._textShadow,
+      bgSize: this._bgSize,
+      bgRepeat: this._bgRepeat
+    };
+  }
+  // ── Inner Element Events (prevent leaking into parent pd-form-container) ─
+  _innerStop(e) {
+    e.stopPropagation();
+  }
+  _onImageChange(e) {
+    e.stopPropagation();
+    const images = e.detail?.value;
+    this._imageSrc = images?.[0]?.src ?? "";
+    this._image = images?.length ? JSON.stringify(images) : "";
+    this._emitValue();
+  }
+  _onOverlayColorChange(e) {
+    e.stopPropagation();
+    this._overlayColor = e.detail?.value || DEFAULT_OVERLAY_COLOR;
+    this._emitValue();
+  }
+  _onOverlayChange(e) {
+    e.stopPropagation();
+    this._overlayOpacity = parseInt(e.detail?.value ?? "", 10) || DEFAULT_OVERLAY_OPACITY;
+    this._emitValue();
+  }
+  _onTextShadowChange(e) {
+    e.stopPropagation();
+    this._textShadow = e.detail?.value === "true";
+    this._emitValue();
+  }
+  _onBgSizeChange(e) {
+    e.stopPropagation();
+    const v = e.detail?.value;
+    if (v === "cover" || v === "contain" || v === "auto") {
+      this._bgSize = v;
+      this._emitValue();
+    }
+  }
+  _onBgRepeatChange(e) {
+    e.stopPropagation();
+    const v = e.detail?.value;
+    if (v === "no-repeat" || v === "repeat" || v === "repeat-x" || v === "repeat-y") {
+      this._bgRepeat = v;
+      this._emitValue();
+    }
+  }
+  _emitValue() {
+    const val = {
+      image: this._image,
+      overlayColor: this._overlayColor,
+      overlayOpacity: this._overlayOpacity,
+      textShadow: this._textShadow,
+      bgSize: this._bgSize,
+      bgRepeat: this._bgRepeat
+    };
+    this._handleChangedValue(JSON.stringify(val), void 0, true);
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdBgImageForm.prototype, "imageLabel");
+__decorateClass([
+  property({ type: String })
+], PdBgImageForm.prototype, "overlayColorLabel");
+__decorateClass([
+  property({ type: String })
+], PdBgImageForm.prototype, "overlayLabel");
+__decorateClass([
+  property({ type: String })
+], PdBgImageForm.prototype, "textShadowLabel");
+__decorateClass([
+  property({ type: Number })
+], PdBgImageForm.prototype, "maxOverlay");
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-preview" })
+], PdBgImageForm.prototype, "hidePreview");
+__decorateClass([
+  property({ type: Boolean, attribute: "show-bg-size" })
+], PdBgImageForm.prototype, "showBgSize");
+__decorateClass([
+  property({ type: Boolean, attribute: "show-bg-repeat" })
+], PdBgImageForm.prototype, "showBgRepeat");
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-text-shadow" })
+], PdBgImageForm.prototype, "hideTextShadow");
+__decorateClass([
+  state()
+], PdBgImageForm.prototype, "_image");
+__decorateClass([
+  state()
+], PdBgImageForm.prototype, "_imageSrc");
+__decorateClass([
+  state()
+], PdBgImageForm.prototype, "_overlayColor");
+__decorateClass([
+  state()
+], PdBgImageForm.prototype, "_overlayOpacity");
+__decorateClass([
+  state()
+], PdBgImageForm.prototype, "_textShadow");
+__decorateClass([
+  state()
+], PdBgImageForm.prototype, "_bgSize");
+__decorateClass([
+  state()
+], PdBgImageForm.prototype, "_bgRepeat");
+
+export { PdBgImageForm };

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

@@ -0,0 +1,4 @@
+import { PdBgImageForm } from './PdBgImageForm.js';
+export { PdBgImageForm };
+export type { BgImageValue } from './PdBgImageForm.js';
+//# sourceMappingURL=pd-bg-image-form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-bg-image-form.d.ts","sourceRoot":"","sources":["../../src/pd-bg-image-form/pd-bg-image-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOnD,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

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

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

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

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

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

@@ -0,0 +1,73 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { PdBaseUIInput } from '@progressive-development/pd-forms';
+export type BgMode = "color" | "gradient" | "image";
+export interface BgSelectValue {
+    mode: BgMode;
+    color?: string;
+    gradientColor1?: string;
+    gradientColor2?: string;
+    gradientAngle?: number;
+    gradientStop1?: number;
+    gradientStop2?: number;
+    bgImage?: string;
+    overlayColor?: string;
+    overlayOpacity?: number;
+    textShadow?: boolean;
+    bgSize?: "cover" | "contain" | "auto";
+    bgRepeat?: "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
+}
+/**
+ * Background selection form combining a mode radio group (color / gradient / image)
+ * with the corresponding sub-forms.
+ *
+ * Value format: JSON string `{"mode":"color","color":"#333"}`
+ *
+ * @tagname pd-bg-select-form
+ * @summary Composite form for background type selection (color, gradient, image).
+ *
+ * @event pd-form-element-change - Fired when any value changes. Detail: `{ value, name, parsedValue, state }`.
+ */
+export declare class PdBgSelectForm extends PdBaseUIInput {
+    /** Label for the color picker in "color" mode. */
+    colorLabel: string;
+    /** Default color when no value is set. */
+    defaultColor: string;
+    /** Hide live previews of sub-forms (gradient strip, image preview). */
+    hidePreview: boolean;
+    /** Show background-size selector in image mode. */
+    showBgSize: boolean;
+    /** Show background-repeat selector in image mode. */
+    showBgRepeat: boolean;
+    /** Hide the text-shadow checkbox in image mode. */
+    hideTextShadow: boolean;
+    private _mode;
+    /** Stable init value for radio — only changes on restore, not on user clicks. */
+    private _modeInit;
+    private _color;
+    private _gradientColor1;
+    private _gradientColor2;
+    private _gradientAngle;
+    private _gradientStop1;
+    private _gradientStop2;
+    private _bgImage;
+    private _overlayColor;
+    private _overlayOpacity;
+    private _textShadow;
+    private _bgSize;
+    private _bgRepeat;
+    static styles: CSSResultGroup;
+    update(changedProps: PropertyValues<this>): void;
+    render(): import('lit').TemplateResult<1>;
+    private _applyInitValue;
+    private get _gradientInitValue();
+    private get _bgImageInitValue();
+    protected _getParsedValue(): BgSelectValue;
+    private _buildValue;
+    private _innerStop;
+    private _onModeChange;
+    private _onColorChange;
+    private _onGradientChange;
+    private _onBgImageChange;
+    private _emitValue;
+}
+//# sourceMappingURL=PdBgSelectForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdBgSelectForm.d.ts","sourceRoot":"","sources":["../../src/pd-bg-select-form/PdBgSelectForm.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAsB,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,+CAA+C,CAAC;AACvD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,+CAA+C,CAAC;AACvD,OAAO,mDAAmD,CAAC;AAE3D,OAAO,yCAAyC,CAAC;AACjD,OAAO,yCAAyC,CAAC;AAMjD,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;CAC7D;AAQD;;;;;;;;;;GAUG;AACH,qBAAa,cAAe,SAAQ,aAAa;IAC/C,kDAAkD;IAElD,UAAU,SAAsB;IAEhC,0CAA0C;IAE1C,YAAY,SAAiB;IAE7B,uEAAuE;IAEvE,WAAW,UAAS;IAEpB,mDAAmD;IAEnD,UAAU,UAAS;IAEnB,qDAAqD;IAErD,YAAY,UAAS;IAErB,mDAAmD;IAEnD,cAAc,UAAS;IAId,OAAO,CAAC,KAAK,CAAwB;IAC9C,iFAAiF;IACjF,OAAO,CAAC,SAAS,CAAwB;IAEhC,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,cAAc,CAAO;IAC7B,OAAO,CAAC,QAAQ,CAAM;IACtB,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,eAAe,CAAK;IAC5B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAyC;IACxD,OAAO,CAAC,SAAS,CACZ;IAEd,OAAgB,MAAM,EAAE,cAAc,CAapC;IAIO,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAehD,MAAM;IAkGf,OAAO,CAAC,eAAe;IAsBvB,OAAO,KAAK,kBAAkB,GAQ7B;IAED,OAAO,KAAK,iBAAiB,GAS5B;cAEkB,eAAe,IAAI,aAAa;IAInD,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,iBAAiB;IAiBzB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,UAAU;CAInB"}