@progressive-development/pd-order 0.7.11 → 1.0.0

package/dist/pd-order-contacts/PdOrderContacts.js

@@ -0,0 +1,383 @@
+import { css, LitElement, nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { localized, msg } from '@lit/localize';
+import '@progressive-development/pd-content/pd-collapse-group';
+import '@progressive-development/pd-content/pd-collapse';
+import '@progressive-development/pd-contact/pd-contact';
+import '@progressive-development/pd-forms/pd-checkbox';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdOrderContacts = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.summary = false;
+    this.contactTitle = {};
+    this.requiredFields = [];
+    this.withPayment = false;
+    this.withPropertyOwner = false;
+    this.withPropertyDate = false;
+    this._ownBillingContact = false;
+    this._ownAdminContact = false;
+    this._isPropertyOwner = false;
+  }
+  update(changedProps) {
+    if (changedProps.has("billingContact")) {
+      this._ownBillingContact = !!this.billingContact;
+    }
+    if (changedProps.has("adminContact")) {
+      this._ownAdminContact = !!this.adminContact;
+    }
+    if (changedProps.has("propertyContact")) {
+      this._isPropertyOwner = !!this.propertyContact;
+    }
+    super.update(changedProps);
+  }
+  render() {
+    return this.summary ? this._renderSummary() : this._renderEditContacts();
+  }
+  _renderEditContacts() {
+    return html`
+      <pd-collapse-group>
+        <pd-collapse id="orderContactCollapseId">
+          <div slot="header">
+            ${this.contactTitle.orderInputContact ?? msg("Adresse", {
+      id: "pd.order.contacts.orderContact.inputHeader"
+    })}
+          </div>
+          <pd-contact
+            id="orderContactId"
+            class="collapse-contact"
+            slot="content"
+            .requiredFields="${this.requiredFields}"
+            .contact="${this.orderContact}"
+            .match="${this.match}"
+            ?withPropertyDate="${!this._isPropertyOwner && this.withPropertyDate}"
+          ></pd-contact>
+        </pd-collapse>
+
+        ${this.withPayment ? html`
+              <pd-collapse id="billingContactCollapseId">
+                <div slot="header">
+                  ${this.contactTitle.billingInputContact ?? msg("Rechnungsadresse (optional)", {
+      id: "pd.order.contacts.billingContact.inputHeader"
+    })}
+                </div>
+                <div slot="content">
+                  ${this._ownBillingContact ? html`
+                        <p>
+                          <a @click="${() => this._ownBillingContact = false}"
+                            >${msg(
+      "Kundenadresse als Rechnungsadresse verwenden"
+    )}</a
+                          >
+                        </p>
+                        <pd-contact
+                          id="billingContactId"
+                          class="collapse-contact"
+                          .requiredFields="${this.requiredFields}"
+                          .contact="${this.billingContact}"
+                        ></pd-contact>
+                      ` : html`
+                        <p>
+                          ${msg(
+      "Rechnungsadresse entspricht der Kundenadresse."
+    )}
+                        </p>
+                        <p>
+                          <a @click=${() => this._ownBillingContact = true}
+                            >${msg("Neue Rechnungsadresse hinzufügen")}</a
+                          >
+                        </p>
+                      `}
+                </div>
+              </pd-collapse>
+            ` : nothing}
+        ${this.withPropertyOwner ? html`
+              <div class="property-owner-box">
+                <pd-checkbox
+                  id="isPropertyOwnerId"
+                  initValue="${this._isPropertyOwner}"
+                  @pd-form-element-change="${(e) => {
+      this._isPropertyOwner = e.detail.value === "true";
+    }}"
+                >
+                  ${msg("Ist der Kunde Vermieter?", {
+      id: "pd.order.contacts.propertyContact.checkBox"
+    })}
+                </pd-checkbox>
+
+                ${this._isPropertyOwner ? html`
+                      <pd-collapse
+                        id="propertyContactCollapseId"
+                        style="padding-top: 20px;"
+                      >
+                        <div slot="header">
+                          ${this.contactTitle.propertyInputContact ?? msg("Adresse der Immobilie")}
+                        </div>
+                        <div slot="content">
+                          <pd-contact
+                            id="propertyContactId"
+                            class="collapse-contact"
+                            .requiredFields="${[
+      "street",
+      "streetNr",
+      "zip",
+      "city"
+    ]}"
+                            .inputFields="${[
+      "street",
+      "city",
+      "additionalHint"
+    ]}"
+                            .contact="${this.propertyContact}"
+                            ?withPropertyDate="${this.withPropertyDate}"
+                          ></pd-contact>
+                        </div>
+                      </pd-collapse>
+
+                      <pd-collapse id="adminContactCollapseId">
+                        <div slot="header">
+                          ${this.contactTitle.adminInputContact ?? msg("Adresse der Verwaltung (optional)")}
+                        </div>
+                        <div slot="content">
+                          ${this._ownAdminContact ? html`
+                                <p>
+                                  <a
+                                    @click="${() => this._ownAdminContact = false}"
+                                    >${msg(
+      "Kundenadresse als Verwaltungsadresse verwenden"
+    )}</a
+                                  >
+                                </p>
+                                <pd-contact
+                                  id="adminContactId"
+                                  class="collapse-contact"
+                                  .requiredFields="${this.requiredFields}"
+                                  .contact="${this.adminContact}"
+                                ></pd-contact>
+                              ` : html`
+                                <p>
+                                  ${msg(
+      "Verwaltungsadresse entspricht der Kundenadresse."
+    )}
+                                </p>
+                                <p>
+                                  <a
+                                    @click="${() => this._ownAdminContact = true}"
+                                    >${msg(
+      "Neue Verwaltungsadresse hinzufügen"
+    )}</a
+                                  >
+                                </p>
+                              `}
+                        </div>
+                      </pd-collapse>
+                    ` : nothing}
+              </div>
+            ` : nothing}
+      </pd-collapse-group>
+    `;
+  }
+  _renderSummary() {
+    return html`
+      <div class="summary-box">
+        ${this.orderContact ? html`
+              <pd-contact
+                addressTitle="${this.contactTitle.orderSummaryContact ?? msg("Adresse")}"
+                .contact="${this.orderContact}"
+                summary
+              ></pd-contact>
+            ` : nothing}
+        ${this.billingContact ? html`
+              <pd-contact
+                addressTitle="${this.contactTitle.billingSummaryContact ?? msg("Rechnungsadresse")}"
+                .contact="${this.billingContact}"
+                summary
+              ></pd-contact>
+            ` : nothing}
+        ${this.propertyContact ? html`
+              <pd-contact
+                addressTitle="${this.contactTitle.propertySummaryContact ?? msg("Immobilie")}"
+                .contact="${this.propertyContact}"
+                summary
+              ></pd-contact>
+            ` : nothing}
+        ${this.adminContact ? html`
+              <pd-contact
+                addressTitle="${this.contactTitle.adminSummaryContact ?? msg("Verwaltung")}"
+                .contact="${this.adminContact}"
+                summary
+              ></pd-contact>
+            ` : nothing}
+      </div>
+    `;
+  }
+  get valid() {
+    for (const { id, condition = true } of this._getCollapseMap()) {
+      if (!condition) continue;
+      const element = this.shadowRoot?.getElementById(id);
+      if (!element?.valid) {
+        return false;
+      }
+    }
+    return true;
+  }
+  async triggerValidate() {
+    let firstInvalidCollapseId = null;
+    const collapseMap = this._getCollapseMap();
+    console.log("Map: ", collapseMap);
+    for (const { id, collapse, condition = true } of collapseMap) {
+      if (!condition) continue;
+      const element = this.shadowRoot?.getElementById(id);
+      if (!element) continue;
+      const result = await element.triggerValidate();
+      console.log("PdContact triggerValidate: ", result);
+      if (!result && !firstInvalidCollapseId) {
+        firstInvalidCollapseId = collapse;
+      }
+    }
+    if (firstInvalidCollapseId) {
+      console.log("PdContact open failed: ", firstInvalidCollapseId);
+      const collapseEl = this.shadowRoot?.getElementById(
+        firstInvalidCollapseId
+      );
+      if (collapseEl) {
+        collapseEl.active = true;
+      }
+      return false;
+    }
+    return true;
+  }
+  getValues() {
+    const contactValues = {};
+    for (const { id, condition = true } of this._getCollapseMap()) {
+      if (!condition) continue;
+      contactValues[id] = this.shadowRoot?.getElementById(id)?.getValues();
+    }
+    return contactValues;
+  }
+  _getCollapseMap() {
+    return [
+      { id: "orderContactId", collapse: "orderContactCollapseId" },
+      {
+        id: "billingContactId",
+        collapse: "billingContactCollapseId",
+        condition: this._ownBillingContact
+      },
+      {
+        id: "propertyContactId",
+        collapse: "propertyContactCollapseId",
+        condition: this._isPropertyOwner
+      },
+      {
+        id: "adminContactId",
+        collapse: "adminContactCollapseId",
+        condition: this._isPropertyOwner && this._ownAdminContact
+      }
+    ];
+  }
+};
+PdOrderContacts.styles = [
+  css`
+      :host {
+        display: block;
+      }
+
+      p {
+        color: var(--pd-default-font-content-col);
+        font-size: var(--pd-default-font-content-size);
+        font-family: var(--pd-default-font-content-family);
+        max-width: 1000px;
+      }
+
+      a {
+        cursor: pointer;
+        font-family: var(--pd-default-font-link-family);
+        font-size: var(--pd-default-font-link-size);
+        color: var(--pd-default-font-link-col);
+      }
+
+      a:hover {
+        color: var(--pd-default-font-link-col-hover);
+      }
+
+      .collapse-contact {
+        padding: 10px;
+      }
+
+      .summary-box {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+      }
+
+      .summary-box pd-contact {
+        min-width: 150px;
+      }
+
+      .property-owner-box {
+        border: 2px solid var(--pd-default-col);
+        border-radius: var(--pd-radius-lg);
+        padding: var(--pd-spacing-lg);
+        margin: var(--pd-spacing-lg) 0;
+        background-color: var(--pd-default-bg-light-col);
+        box-shadow: var(--pd-shadow-md);
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean })
+], PdOrderContacts.prototype, "summary", 2);
+__decorateClass([
+  property({ type: Object })
+], PdOrderContacts.prototype, "contactTitle", 2);
+__decorateClass([
+  property({ type: Array })
+], PdOrderContacts.prototype, "requiredFields", 2);
+__decorateClass([
+  property({ type: Object })
+], PdOrderContacts.prototype, "orderContact", 2);
+__decorateClass([
+  property({ type: Object })
+], PdOrderContacts.prototype, "billingContact", 2);
+__decorateClass([
+  property({ type: Object })
+], PdOrderContacts.prototype, "adminContact", 2);
+__decorateClass([
+  property({ type: Object })
+], PdOrderContacts.prototype, "propertyContact", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdOrderContacts.prototype, "withPayment", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdOrderContacts.prototype, "withPropertyOwner", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdOrderContacts.prototype, "withPropertyDate", 2);
+__decorateClass([
+  property({ type: Object })
+], PdOrderContacts.prototype, "match", 2);
+__decorateClass([
+  state()
+], PdOrderContacts.prototype, "_ownBillingContact", 2);
+__decorateClass([
+  state()
+], PdOrderContacts.prototype, "_ownAdminContact", 2);
+__decorateClass([
+  state()
+], PdOrderContacts.prototype, "_isPropertyOwner", 2);
+PdOrderContacts = __decorateClass([
+  localized()
+], PdOrderContacts);
+
+export { PdOrderContacts };

package/dist/pd-order-contacts/pd-order-contacts.d.ts

@@ -0,0 +1,3 @@
+import { PdOrderContacts } from './PdOrderContacts.js';
+export { PdOrderContacts };
+//# sourceMappingURL=pd-order-contacts.d.ts.map

package/dist/pd-order-contacts/pd-order-contacts.d.ts.map

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

package/dist/pd-order-contacts/pd-order-contacts.stories.d.ts

@@ -0,0 +1,65 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdContactData } from '@progressive-development/pd-contact';
+/**
+ * Story arguments interface for pd-order-contacts component.
+ * Maps to the component's public API for multi-contact order forms.
+ */
+interface PdOrderContactsArgs {
+    /** Show read-only summary mode */
+    summary: boolean;
+    /** Enable billing address option */
+    withPayment: boolean;
+    /** Enable property owner/landlord options */
+    withPropertyOwner: boolean;
+    /** Enable property date field */
+    withPropertyDate: boolean;
+    /** Required field names per contact */
+    requiredFields: string[];
+    /** Primary order contact data */
+    orderContact?: PdContactData;
+    /** Optional billing contact data */
+    billingContact?: PdContactData;
+    /** Optional admin contact data */
+    adminContact?: PdContactData;
+    /** Optional property address data */
+    propertyContact?: PdContactData;
+}
+/**
+ * ## pd-order-contacts
+ *
+ * Multi-contact management component for order workflows with collapsible
+ * address sections for order, billing, property, and admin contacts.
+ *
+ * ### Features
+ * - Primary order contact form (always visible)
+ * - Optional billing address section with toggle
+ * - Optional property owner section with landlord checkbox
+ * - Optional property date field
+ * - Admin/management contact for property owners
+ * - Summary mode for read-only display of all contacts
+ * - Form validation with required field support across all contacts
+ * - Collapsible sections via pd-collapse-group
+ *
+ * ### Form Methods
+ * - `triggerValidate()` — validates all visible contacts, opens first invalid section
+ * - `getValues()` — returns all visible contact data
+ * - `valid` — getter for current validation state
+ */
+declare const meta: Meta<PdOrderContactsArgs>;
+export default meta;
+type Story = StoryObj<PdOrderContactsArgs>;
+/** Default empty order contacts form with a single address section. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Form with pre-populated order contact data. */
+export declare const Prepopulated: Story;
+/** Form with billing address section enabled — shows toggle to add separate billing address. */
+export declare const WithBilling: Story;
+/** Form with property owner section — includes landlord checkbox, property address, and admin contact. */
+export declare const WithPropertyOwner: Story;
+/** All features enabled with pre-populated data across all contact sections. */
+export declare const FullyConfigured: Story;
+/** Read-only summary showing all configured contacts side by side. */
+export declare const SummaryMode: Story;
+/** Form with all fields marked as required — triggers validation on submit. */
+export declare const RequiredFields: Story;
+//# sourceMappingURL=pd-order-contacts.stories.d.ts.map

package/dist/pd-order-contacts/pd-order-contacts.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-order-contacts.stories.d.ts","sourceRoot":"","sources":["../../src/pd-order-contacts/pd-order-contacts.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,6CAA6C,CAAC;AAGrD,OAAO,wBAAwB,CAAC;AAMhC;;;GAGG;AACH,UAAU,mBAAmB;IAC3B,kCAAkC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,iBAAiB,EAAE,OAAO,CAAC;IAC3B,iCAAiC;IACjC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,uCAAuC;IACvC,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iCAAiC;IACjC,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,oCAAoC;IACpC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,kCAAkC;IAClC,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,qCAAqC;IACrC,eAAe,CAAC,EAAE,aAAa,CAAC;CACjC;AA0FD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAkGnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAM3C,uGAAuG;AACvG,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,kDAAkD;AAClD,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAMF,gGAAgG;AAChG,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAMF,0GAA0G;AAC1G,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC;AAMF,gFAAgF;AAChF,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAC;AAMF,sEAAsE;AACtE,eAAO,MAAM,WAAW,EAAE,KA8CzB,CAAC;AAMF,+EAA+E;AAC/E,eAAO,MAAM,cAAc,EAAE,KAI5B,CAAC"}

package/dist/pd-order-contacts.d.ts

@@ -1,45 +1,2 @@
-import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
-import { PdContactData, PdContactMatch } from '@progressive-development/pd-contact';
-/**
- * Renders and manages contact input sections for order processing.
- * Supports optional billing address, property owner info and admin contact.
- *
- * @fires validate-form - Triggers validation of embedded contact components.
- * @slot - General slot
- */
-export declare class PdOrderContacts extends LitElement {
-    /** Zeigt die Komponente im Zusammenfassungsmodus (read-only) */
-    summary: boolean;
-    /** Überschriften für die einzelnen Kontaktsektionen */
-    contactTitle: Record<string, string>;
-    /** Liste erforderlicher Eingabefelder je Kontakt (z.B. ['street', 'zip']) */
-    requiredFields: string[];
-    /** Kontaktadresse des Auftraggebers */
-    orderContact?: PdContactData;
-    /** Optionale separate Rechnungsadresse */
-    billingContact?: PdContactData;
-    /** Optionale Verwaltungsadresse */
-    adminContact?: PdContactData;
-    /** Adresse der Immobilie, falls abweichend */
-    propertyContact?: PdContactData;
-    /** Aktiviert die Option zur separaten Rechnungsadresse */
-    withPayment: boolean;
-    /** Aktiviert die Option zur Verwaltung von Vermieterinformationen */
-    withPropertyOwner: boolean;
-    withPropertyDate: boolean;
-    /** Optionaler Match-Parameter zur Feldvalidierung oder Mapping-Zwecken */
-    match?: PdContactMatch;
-    private _ownBillingContact;
-    private _ownAdminContact;
-    private _isPropertyOwner;
-    static styles: CSSResultGroup;
-    update(changedProps: PropertyValues<this>): void;
-    protected render(): import('lit-html').TemplateResult<1>;
-    private _renderEditContacts;
-    private _renderSummary;
-    get valid(): boolean;
-    triggerValidate(): Promise<boolean>;
-    getValues(): any;
-    private _getCollapseMap;
-}
-//# sourceMappingURL=pd-order-contacts.d.ts.map
+export * from './pd-order-contacts/pd-order-contacts'
+export {}