@progressive-development/pd-order 1.0.0 → 1.1.0

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { PdOrderContacts } from './pd-order-contacts/pd-order-contacts.js';
 export { PdOrderSummary } from './pd-order-summary/pd-order-summary.js';
+export { PdOrderAgreement } from './pd-order-agreement/pd-order-agreement.js';
 export type { PdOrderContactData, PdOrderStep } from './types.js';
+export type { PdOrderAgreementChangeDetail, PdOrderAgreementChangeEvent, } from './pd-order-agreement/types.js';
 export { templates as beTemplates } from './generated/locales/be.js';
 export { templates as deTemplates } from './generated/locales/de.js';
 export { templates as enTemplates } from './generated/locales/en.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,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAExE,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAElE,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,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAE9E,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAClE,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,+BAA+B,CAAC;AAEvC,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,7 +1,9 @@
 import './pd-order-contacts.js';
 import './pd-order-summary.js';
+import './pd-order-agreement.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 { PdOrderAgreement } from './pd-order-agreement/PdOrderAgreement.js';
 export { PdOrderContacts } from './pd-order-contacts/PdOrderContacts.js';
 export { PdOrderSummary } from './pd-order-summary/PdOrderSummary.js';

package/dist/pd-order-agreement/PdOrderAgreement.d.ts

@@ -0,0 +1,32 @@
+import { LitElement, CSSResultGroup } from 'lit';
+/**
+ * Agreement component for terms and conditions acceptance with validation.
+ *
+ * @tagname pd-order-agreement
+ * @summary Terms and conditions agreement checkbox with popup and validation.
+ *
+ * @event pd-agreement-change - Fired when checkbox status changes. Detail: `{ agreed: boolean }`.
+ *
+ * @slot legal - Terms and conditions content displayed in the popup.
+ *
+ * @cssprop --pd-order-agreement-link-col - Link color override. Default: `var(--pd-default-font-link-col)`.
+ */
+export declare class PdOrderAgreement extends LitElement {
+    /** Whether agreement is required for form validation. */
+    required: boolean;
+    /** Current agreement state (readonly — controlled internally via checkbox). */
+    agreed: boolean;
+    /** @ignore */
+    private _agreeForm;
+    /** @ignore */
+    private _agreePopup;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+    /** Whether the agreement is valid (not required, or checkbox is checked). */
+    get valid(): boolean;
+    /** Triggers form validation and returns validity state. */
+    triggerValidate(): Promise<boolean>;
+    private _onCheckboxChange;
+    private _openTermsAndConditions;
+}
+//# sourceMappingURL=PdOrderAgreement.d.ts.map

package/dist/pd-order-agreement/PdOrderAgreement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdOrderAgreement.d.ts","sourceRoot":"","sources":["../../src/pd-order-agreement/PdOrderAgreement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,+CAA+C,CAAC;AACvD,OAAO,6CAA6C,CAAC;AAQrD;;;;;;;;;;;GAWG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,yDAAyD;IAEzD,QAAQ,UAAQ;IAEhB,+EAA+E;IAE/E,MAAM,UAAS;IAEf,cAAc;IAEd,OAAO,CAAC,UAAU,CAAmB;IAErC,cAAc;IAEd,OAAO,CAAC,WAAW,CAAW;IAE9B,OAAgB,MAAM,EAAE,cAAc,CAAY;IAEzC,MAAM;IAmCf,6EAA6E;IAC7E,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,2DAA2D;IAC9C,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAIhD,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,uBAAuB;CAIhC"}

package/dist/pd-order-agreement/PdOrderAgreement.js

@@ -0,0 +1,101 @@
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { localized, msg } from '@lit/localize';
+import '@progressive-development/pd-forms/pd-form-container';
+import '@progressive-development/pd-forms/pd-form-row';
+import '@progressive-development/pd-forms/pd-checkbox';
+import '@progressive-development/pd-dialog/pd-popup';
+import { styles } from './pd-order-agreement.styles.js';
+
+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 PdOrderAgreement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.required = true;
+    this.agreed = false;
+  }
+  render() {
+    return html`
+      <pd-form-container id="agreementFormId">
+        <pd-form-row>
+          <pd-checkbox
+            id="agreeConditionsId"
+            valueName="agreeId"
+            class="agree-box"
+            ?required="${this.required}"
+            requiredMsg="${msg(
+      "Bitte stimmen Sie den Allgemeinen Geschäftsbedingungen zu, um fortzufahren.",
+      { id: "pd.order.summary.agree.required" }
+    )}"
+            @pd-form-element-change="${this._onCheckboxChange}"
+          >
+            ${msg("Ich akzeptiere die", {
+      id: "pd.order.summary.agree.link1"
+    })}
+            <a
+              @click="${this._openTermsAndConditions}"
+              @keypress="${this._openTermsAndConditions}"
+              >${msg("Allgemeinen Geschäftsbedingungen", {
+      id: "pd.order.summary.agree.link2"
+    })}</a
+            >
+          </pd-checkbox>
+        </pd-form-row>
+      </pd-form-container>
+
+      <pd-popup id="agreePopupId">
+        <slot name="legal"></slot>
+      </pd-popup>
+    `;
+  }
+  /** Whether the agreement is valid (not required, or checkbox is checked). */
+  get valid() {
+    return !this.required || this._agreeForm?.valid === true;
+  }
+  /** Triggers form validation and returns validity state. */
+  async triggerValidate() {
+    return this._agreeForm?.triggerValidate();
+  }
+  _onCheckboxChange(e) {
+    const parsedValue = e.detail?.parsedValue;
+    this.agreed = parsedValue === true;
+    this.dispatchEvent(
+      new CustomEvent("pd-agreement-change", {
+        detail: { agreed: this.agreed },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _openTermsAndConditions(e) {
+    e.stopPropagation();
+    this._agreePopup?.showPopup();
+  }
+};
+PdOrderAgreement.styles = [styles];
+__decorateClass([
+  property({ type: Boolean })
+], PdOrderAgreement.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdOrderAgreement.prototype, "agreed", 2);
+__decorateClass([
+  query("#agreementFormId")
+], PdOrderAgreement.prototype, "_agreeForm", 2);
+__decorateClass([
+  query("#agreePopupId")
+], PdOrderAgreement.prototype, "_agreePopup", 2);
+PdOrderAgreement = __decorateClass([
+  localized()
+], PdOrderAgreement);
+
+export { PdOrderAgreement };

package/dist/pd-order-agreement/index.d.ts

@@ -0,0 +1,3 @@
+export { PdOrderAgreement } from './pd-order-agreement.js';
+export type { PdOrderAgreementChangeDetail, PdOrderAgreementChangeEvent, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/pd-order-agreement/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pd-order-agreement/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,YAAY,CAAC"}

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

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

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

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

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

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * Story arguments interface for pd-order-agreement component.
+ * Maps to the component's public API for agreement acceptance.
+ */
+interface PdOrderAgreementArgs {
+    /** Whether agreement is required for form validation */
+    required: boolean;
+}
+/**
+ * ## pd-order-agreement
+ *
+ * Terms and conditions agreement component with checkbox validation and popup display.
+ *
+ * ### Features
+ * - Required/optional agreement checkbox with validation
+ * - Terms and conditions popup via pd-popup
+ * - Fires `pd-agreement-change` event on state change
+ * - Integrates with pd-order-summary via the `agreement` slot
+ * - Full i18n support via @lit/localize
+ *
+ * ### Accessibility
+ * - Checkbox supports keyboard navigation (Tab, Space)
+ * - Terms link is activatable via Enter/Space
+ * - Popup dialog for accessible modal viewing of terms
+ * - Validation messages announced to screen readers
+ */
+declare const meta: Meta<PdOrderAgreementArgs>;
+export default meta;
+type Story = StoryObj<PdOrderAgreementArgs>;
+/** Default agreement with required checkbox and legal content. */
+export declare const Default: Story;
+/** Agreement with rich legal content in the popup slot. */
+export declare const WithLegalContent: Story;
+/** Overview of all agreement states for comparison. */
+export declare const AllStates: Story;
+/** Integration: pd-order-agreement inside pd-order-summary via the agreement slot. */
+export declare const InOrderContext: Story;
+/** CSS Custom Properties — customize link color. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-order-agreement.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-order-agreement.stories.d.ts","sourceRoot":"","sources":["../../src/pd-order-agreement/pd-order-agreement.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,6CAA6C,CAAC;AAIrD,OAAO,yBAAyB,CAAC;AACjC,OAAO,yCAAyC,CAAC;AAEjD,OAAO,sCAAsC,CAAC;AAM9C;;;GAGG;AACH,UAAU,oBAAoB;IAC5B,wDAAwD;IACxD,QAAQ,EAAE,OAAO,CAAC;CACnB;AAqFD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAqEpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AAM5C,kEAAkE;AAClE,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAMF,2DAA2D;AAC3D,eAAO,MAAM,gBAAgB,EAAE,KAqC9B,CAAC;AAMF,uDAAuD;AACvD,eAAO,MAAM,SAAS,EAAE,KAwCvB,CAAC;AAMF,sFAAsF;AACtF,eAAO,MAAM,cAAc,EAAE,KAsB5B,CAAC;AAMF,oDAAoD;AACpD,eAAO,MAAM,aAAa,EAAE,KA6D3B,CAAC"}

package/dist/pd-order-agreement/pd-order-agreement.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import('lit').CSSResult;
+//# sourceMappingURL=pd-order-agreement.styles.d.ts.map

package/dist/pd-order-agreement/pd-order-agreement.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-order-agreement.styles.d.ts","sourceRoot":"","sources":["../../src/pd-order-agreement/pd-order-agreement.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmBlB,CAAC"}

package/dist/pd-order-agreement/pd-order-agreement.styles.js

@@ -0,0 +1,24 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: block;
+  }
+
+  .agree-box {
+    padding-top: 20px;
+  }
+
+  a {
+    cursor: pointer;
+    font-family: var(--pd-default-font-link-family);
+    font-size: var(--pd-default-font-link-size);
+    color: var(--pd-order-agreement-link-col, var(--pd-default-font-link-col));
+  }
+
+  a:hover {
+    color: var(--pd-default-font-link-col-hover);
+  }
+`;
+
+export { styles };

package/dist/pd-order-agreement/types.d.ts

@@ -0,0 +1,5 @@
+export interface PdOrderAgreementChangeDetail {
+    agreed: boolean;
+}
+export type PdOrderAgreementChangeEvent = CustomEvent<PdOrderAgreementChangeDetail>;
+//# sourceMappingURL=types.d.ts.map

package/dist/pd-order-agreement/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/pd-order-agreement/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,MAAM,2BAA2B,GACrC,WAAW,CAAC,4BAA4B,CAAC,CAAC"}

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

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

package/dist/pd-order-agreement.js

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

package/dist/pd-order-summary/PdOrderSummary.d.ts

@@ -1,14 +1,14 @@
 import { LitElement, CSSResultGroup, TemplateResult } from 'lit';
 import { PdOrderStep } from '../types.js';
 /**
- * Order summary component displaying steps, pricing, and agreement.
+ * Order summary component displaying steps and pricing.
  *
  * @tagname pd-order-summary
- * @summary Order summary with steps, pricing, and terms agreement.
+ * @summary Order summary with steps and pricing display.
  *
  * @event go-to - Fired when user clicks edit on a step. Detail: `{ step }`.
  *
- * @slot legal - Terms and conditions content.
+ * @slot agreement - Slot for pd-order-agreement or custom agreement component.
  * @slot [stepKey] - Named slots for custom step content.
  *
  * @cssprop --pd-order-summary-payment-bg-col - Payment section background. Default: `var(--pd-default-light-col)`.
@@ -18,22 +18,13 @@ export declare class PdOrderSummary extends LitElement {
     orderSteps: PdOrderStep[];
     /** Show payment/pricing section */
     withPayment: boolean;
-    /** Show terms agreement checkbox with validation */
-    withAgreement: boolean;
     /** Complete order data including zip, contacts, and pricing */
     order?: any;
-    /** @ignore */
-    private _agreeForm;
-    /** @ignore */
-    private _agreePopup;
     static styles: CSSResultGroup;
     firstUpdated(): void;
     render(): TemplateResult<1>;
-    get valid(): boolean;
-    triggerValidate(): Promise<boolean>;
     protected _mapOrderStepSummary(step: PdOrderStep, index: number): TemplateResult;
     protected _renderCustomOrderStepSummary(step: PdOrderStep, index: number): TemplateResult | null;
     protected _getContactsSummary(index: number, step: PdOrderStep): TemplateResult<1>;
-    private _openTermsAndConditions;
 }
 //# sourceMappingURL=PdOrderSummary.d.ts.map

package/dist/pd-order-summary/PdOrderSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdOrderSummary.d.ts","sourceRoot":"","sources":["../../src/pd-order-summary/PdOrderSummary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5E,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,+CAA+C,CAAC;AAEvD,OAAO,iDAAiD,CAAC;AACzD,OAAO,6CAA6C,CAAC;AAErD,OAAO,qDAAqD,CAAC;AAE7D,OAAO,EAAsB,WAAW,EAAE,MAAM,aAAa,CAAC;AAE9D,OAAO,2CAA2C,CAAC;AAGnD;;;;;;;;;;;;GAYG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,kEAAkE;IAElE,UAAU,EAAE,WAAW,EAAE,CAAM;IAE/B,mCAAmC;IAEnC,WAAW,UAAS;IAEpB,oDAAoD;IAEpD,aAAa,UAAS;IAEtB,+DAA+D;IAE/D,KAAK,CAAC,EAAE,GAAG,CAAC;IAEZ,cAAc;IAEd,OAAO,CAAC,UAAU,CAAmB;IAErC,cAAc;IAEd,OAAO,CAAC,WAAW,CAAW;IAE9B,OAAgB,MAAM,EAAE,cAAc,CAmDpC;IAEO,YAAY,IAAI,IAAI;IAYpB,MAAM;IAyDf,IAAI,KAAK,YAER;IAEY,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IA6BhD,SAAS,CAAC,oBAAoB,CAC5B,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,MAAM,GACZ,cAAc;IAkBjB,SAAS,CAAC,6BAA6B,CACrC,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,MAAM,GACZ,cAAc,GAAG,IAAI;IAUxB,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW;IAoB9D,OAAO,CAAC,uBAAuB;CAIhC"}
+{"version":3,"file":"PdOrderSummary.d.ts","sourceRoot":"","sources":["../../src/pd-order-summary/PdOrderSummary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5E,OAAO,iDAAiD,CAAC;AACzD,OAAO,qDAAqD,CAAC;AAE7D,OAAO,EAAsB,WAAW,EAAE,MAAM,aAAa,CAAC;AAE9D,OAAO,2CAA2C,CAAC;AAEnD;;;;;;;;;;;;GAYG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,kEAAkE;IAElE,UAAU,EAAE,WAAW,EAAE,CAAM;IAE/B,mCAAmC;IAEnC,WAAW,UAAS;IAEpB,+DAA+D;IAE/D,KAAK,CAAC,EAAE,GAAG,CAAC;IAEZ,OAAgB,MAAM,EAAE,cAAc,CAuCpC;IAEO,YAAY,IAAI,IAAI;IAYpB,MAAM;IA0Bf,SAAS,CAAC,oBAAoB,CAC5B,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,MAAM,GACZ,cAAc;IAkBjB,SAAS,CAAC,6BAA6B,CACrC,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,MAAM,GACZ,cAAc,GAAG,IAAI;IAUxB,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW;CAmB/D"}

package/dist/pd-order-summary/PdOrderSummary.js

@@ -1,11 +1,7 @@
 import { css, LitElement, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { localized, msg } from '@lit/localize';
-import '@progressive-development/pd-forms/pd-form-container';
-import '@progressive-development/pd-forms/pd-form-row';
-import '@progressive-development/pd-forms/pd-checkbox';
 import '@progressive-development/pd-price/pd-pricetable';
-import '@progressive-development/pd-dialog/pd-popup';
 import '@progressive-development/pd-content/pd-edit-content';
 import '../pd-order-contacts.js';
 
@@ -24,7 +20,6 @@ let PdOrderSummary = class extends LitElement {
     super(...arguments);
     this.orderSteps = [];
     this.withPayment = false;
-    this.withAgreement = false;
   }
   firstUpdated() {
     this.addEventListener("edit-content", (e) => {
@@ -55,69 +50,10 @@ let PdOrderSummary = class extends LitElement {
               ></pd-pricetable>
             </div>
           ` : ""}
-      ${this.withAgreement ? html`
-            <pd-form-container id="submitSummaryFormId">
-              <pd-form-row>
-                <pd-checkbox
-                  id="agreeConditionsId"
-                  valueName="agreeId"
-                  class="agree-box"
-                  required
-                  requiredMsg="${msg(
-      "Bitte stimmen Sie den Allgemeinen Geschäftsbedingungen zu, um fortzufahren.",
-      { id: "pd.order.summary.agree.required" }
-    )}"
-                >
-                  ${msg("Ich akzeptiere die", {
-      id: "pd.order.summary.agree.link1"
-    })}
-                  <a
-                    @click="${this._openTermsAndConditions}"
-                    @keypress="${this._openTermsAndConditions}"
-                    >${msg("Allgemeinen Geschäftsbedingungen", {
-      id: "pd.order.summary.agree.link2"
-    })}</a
-                  >
-                </pd-checkbox>
-              </pd-form-row>
-            </pd-form-container>
 
-            <pd-popup id="agreePopupId">
-              <div slot="content"><slot name="legal"></slot></div>
-            </pd-popup>
-          ` : ""}
+      <slot name="agreement"></slot>
     `;
   }
-  get valid() {
-    return !this.withAgreement || this._agreeForm?.valid === true;
-  }
-  async triggerValidate() {
-    return this._agreeForm?.triggerValidate();
-  }
-  /*
-    For Booking:
-    case "zip":
-    case "booking":
-      return this._getBookingSummary(index + 1, step);
-  
-    private _getBookingSummary(index: number, step: PdOrderStep) {
-      const date = this.order?.selectedDate
-        ? format(this.order.selectedDate, "DD/MM/YYYY")
-        : undefined;
-      const bookingData = [{ name: "Postcode:", val: this.order?.zip }];
-      if (date) {
-        bookingData.push({ name: "Datum van herstelling:", val: date });
-      }
-  
-      return html`
-        <pd-edit-content
-          contentTitle="${step.name}"
-          stepNumber="${index}"
-          .data="${bookingData}"
-        ></pd-edit-content>
-      `;
-    }
-    */
   _mapOrderStepSummary(step, index) {
     const custom = this._renderCustomOrderStepSummary(step, index);
     if (custom) {
@@ -159,10 +95,6 @@ let PdOrderSummary = class extends LitElement {
       </pd-edit-content>
     `;
   }
-  _openTermsAndConditions(e) {
-    e.stopPropagation();
-    this._agreePopup?.showPopup();
-  }
 };
 PdOrderSummary.styles = [
   css`
@@ -197,18 +129,6 @@ PdOrderSummary.styles = [
       .pricetable {
         padding-top: 20px;
       }
-      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);
-      }
-      .agree-box {
-        padding-top: 20px;
-      }
       @media (max-width: 380px) {
         .pay-logo {
           max-width: 5rem;
@@ -222,18 +142,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], PdOrderSummary.prototype, "withPayment", 2);
-__decorateClass([
-  property({ type: Boolean })
-], PdOrderSummary.prototype, "withAgreement", 2);
 __decorateClass([
   property({ type: Object })
 ], PdOrderSummary.prototype, "order", 2);
-__decorateClass([
-  query("#submitSummaryFormId")
-], PdOrderSummary.prototype, "_agreeForm", 2);
-__decorateClass([
-  query("#agreePopupId")
-], PdOrderSummary.prototype, "_agreePopup", 2);
 PdOrderSummary = __decorateClass([
   localized()
 ], PdOrderSummary);

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

@@ -8,8 +8,6 @@ import { PdOrderStep } from '../types.js';
 interface PdOrderSummaryArgs {
     /** Show payment/pricing section */
     withPayment: boolean;
-    /** Show terms agreement checkbox with validation */
-    withAgreement: boolean;
     /** Order steps to display in summary */
     orderSteps: PdOrderStep[];
     /** Primary order contact data */
@@ -20,19 +18,18 @@ interface PdOrderSummaryArgs {
 /**
  * ## pd-order-summary
  *
- * Order summary component that displays configurable steps, pricing information,
- * and an optional terms-and-conditions agreement.
+ * Order summary component that displays configurable steps and pricing information.
  *
  * ### Features
  * - Configurable order steps with edit-content integration
  * - Automatic contact summary rendering for "contacts" step key
  * - Price table with tax calculation via pd-pricetable
- * - Terms and conditions agreement checkbox with popup
- * - Named slots for custom step content and legal text
+ * - Agreement slot for pd-order-agreement integration
+ * - Named slots for custom step content
  * - Fires `go-to` event when user clicks edit on a step
  *
  * ### Slots
- * - `legal` — Terms and conditions content (shown in popup)
+ * - `agreement` — Slot for pd-order-agreement component
  * - `[stepKey]` — Named slots for custom step content
  *
  * ### Usage Note
@@ -42,16 +39,14 @@ interface PdOrderSummaryArgs {
 declare const meta: Meta<PdOrderSummaryArgs>;
 export default meta;
 type Story = StoryObj<PdOrderSummaryArgs>;
-/** Default order summary with payment and agreement enabled. Interactive via Controls panel. */
+/** Default order summary with payment enabled. Interactive via Controls panel. */
 export declare const Default: Story;
 /** Order summary showing separate billing contact alongside order contact. */
 export declare const WithBillingContact: Story;
 /** Order summary without the pricing/payment section — for non-billable orders. */
 export declare const WithoutPayment: Story;
-/** Order summary without the terms agreement checkbox — when agreement is handled elsewhere. */
-export declare const WithoutAgreement: Story;
-/** Minimal order summary without payment and agreement — just the order steps and contacts. */
-export declare const Minimal: Story;
+/** Order summary with pd-order-agreement in the agreement slot. */
+export declare const WithAgreementSlot: Story;
 /** All summary configurations side by side for comparison. */
 export declare const AllConfigurations: Story;
 /** CSS Custom Properties — Branded and Redesigned payment section variants. */

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

@@ -1 +1 @@
-{"version":3,"file":"pd-order-summary.stories.d.ts","sourceRoot":"","sources":["../../src/pd-order-summary/pd-order-summary.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;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,sCAAsC,CAAC;AAM9C;;;GAGG;AACH,UAAU,kBAAkB;IAC1B,mCAAmC;IACnC,WAAW,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,aAAa,EAAE,OAAO,CAAC;IACvB,wCAAwC;IACxC,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,iCAAiC;IACjC,YAAY,EAAE,aAAa,CAAC;IAC5B,oCAAoC;IACpC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC;AA4FD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAiGlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAM1C,gGAAgG;AAChG,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,EAAE,KAIhC,CAAC;AAMF,mFAAmF;AACnF,eAAO,MAAM,cAAc,EAAE,KAI5B,CAAC;AAMF,gGAAgG;AAChG,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAC;AAMF,+FAA+F;AAC/F,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAMF,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,EAAE,KAqD/B,CAAC;AAMF,+EAA+E;AAC/E,eAAO,MAAM,aAAa,EAAE,KAwE3B,CAAC"}
+{"version":3,"file":"pd-order-summary.stories.d.ts","sourceRoot":"","sources":["../../src/pd-order-summary/pd-order-summary.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;AAEzE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,6CAA6C,CAAC;AAMrD;;;GAGG;AACH,UAAU,kBAAkB;IAC1B,mCAAmC;IACnC,WAAW,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,iCAAiC;IACjC,YAAY,EAAE,aAAa,CAAC;IAC5B,oCAAoC;IACpC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC;AA8ED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAiFlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAM1C,kFAAkF;AAClF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,EAAE,KAIhC,CAAC;AAMF,mFAAmF;AACnF,eAAO,MAAM,cAAc,EAAE,KAI5B,CAAC;AAMF,mEAAmE;AACnE,eAAO,MAAM,iBAAiB,EAAE,KAqB/B,CAAC;AAMF,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,EAAE,KA0D/B,CAAC;AAMF,+EAA+E;AAC/E,eAAO,MAAM,aAAa,EAAE,KAwE3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-order",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Progressive Development Order Component",
   "author": "PD Progressive Development",
   "license": "MIT",
@@ -15,6 +15,7 @@
     ".": "./dist/index.js",
     "./pd-order-contacts": "./dist/pd-order-contacts.js",
     "./pd-order-summary": "./dist/pd-order-summary.js",
+    "./pd-order-agreement": "./dist/pd-order-agreement.js",
     "./locales/be": "./dist/locales/be.js",
     "./locales/de": "./dist/locales/de.js",
     "./locales/en": "./dist/locales/en.js"
@@ -30,12 +31,12 @@
     "@lit/localize": "^0.12.2",
     "fecha": "^4.2.3",
     "tslib": "^2.8.1",
-    "@progressive-development/pd-shared-styles": "0.3.1",
-    "@progressive-development/pd-contact": "1.0.0",
-    "@progressive-development/pd-content": "1.0.0",
-    "@progressive-development/pd-forms": "1.0.0",
-    "@progressive-development/pd-dialog": "1.0.0",
-    "@progressive-development/pd-price": "1.0.0"
+    "@progressive-development/pd-shared-styles": "0.3.2",
+    "@progressive-development/pd-price": "1.0.1",
+    "@progressive-development/pd-contact": "1.0.1",
+    "@progressive-development/pd-content": "1.0.1",
+    "@progressive-development/pd-forms": "1.0.1",
+    "@progressive-development/pd-dialog": "1.0.1"
   },
   "customElements": "custom-elements.json",
   "keywords": [