@progressive-development/pd-dialog 0.9.2 → 1.0.0

package/LICENSE

@@ -1,2 +1,21 @@
-No License, all rights reserved
-@2021 - PD Progressive Development UG
+MIT License
+
+Copyright (c) 2021-present PD Progressive Development UG
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,76 +1,53 @@
-# \<pd-dialog>
+# @progressive-development/pd-dialog
 
-This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-dialog.svg)](https://www.npmjs.com/package/@progressive-development/pd-dialog)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+Dialog and popup components for modals, confirmations, and form submissions.
+
+## Features
+
+- **Lit 3 & TypeScript** – Modern, type-safe web components
+- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
+- **Themeable** – CSS Custom Properties for easy customization
+- **Localized** – Built-in i18n support (EN, DE, BE)
+- **Lightweight** – No heavy dependencies, tree-shakeable
+- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
+- **Flexible Close Strategies** – Close via Escape key, backdrop click, or programmatically
+- **Multi-State Submit Dialog** – Visual progression through send, success, and error states
+- **Configurable Buttons** – Typed button arrays with primary/disabled states and event delegation
+- **Full ARIA Support** – Proper dialog roles, modal behavior, and focus management
 
 ## Installation
 
 ```bash
-npm i pd-dialog
+npm install @progressive-development/pd-dialog
 ```
 
-## Usage
+## Quick Start
 
 ```html
 <script type="module">
-  import 'pd-dialog/pd-dialog.js';
+  import '@progressive-development/pd-dialog';
 </script>
 
-<pd-dialog></pd-dialog>
+<pd-popup-dialog title="Confirm">
+  <p>Are you sure?</p>
+</pd-popup-dialog>
 ```
 
-## Linting and formatting
+## Components
 
-To scan the project for linting and formatting errors, run
+| Component | Description |
+|-----------|-------------|
+| `<pd-popup>` | Basic popup container |
+| `<pd-popup-dialog>` | Modal dialog with header, content, and footer |
+| `<pd-submit-dialog>` | Form submission dialog with loading/success/error states |
 
-```bash
-npm run lint
-```
-
-To automatically fix linting and formatting errors, run
-
-```bash
-npm run format
-```
+## Documentation
 
-## Testing with Web Test Runner
-
-To execute a single test run:
-
-```bash
-npm run test
-```
-
-To run the tests in interactive watch mode run:
-
-```bash
-npm run test:watch
-```
+📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)
 
-## Demoing with Storybook
-
-To run a local instance of Storybook for your component, run
-
-```bash
-npm run storybook
-```
-
-To build a production version of Storybook, run
-
-```bash
-npm run storybook:build
-```
-
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.
-
-## Local Demo with `web-dev-server`
-
-```bash
-npm start
-```
+## License
 
-To run a local development server that serves the basic demo located in `demo/index.html`
+MIT © [PD Progressive Development UG](https://progressive-development.com)

package/dist/index.d.ts

@@ -1,6 +1,11 @@
 export { PdPopup } from './pd-popup/pd-popup.js';
 export { PdPopupDialog } from './pd-popup-dialog/pd-popup-dialog.js';
 export { PdSubmitDialog } from './pd-submit-dialog/pd-submit-dialog.js';
+export { PdConfirmDialog } from './pd-confirm-dialog/pd-confirm-dialog.js';
+export { BUTTON_KEY_CANCEL, BUTTON_KEY_CONFIRM, EVENT_CONFIRM, EVENT_CANCEL, } from './pd-confirm-dialog/pd-confirm-dialog.js';
+export type { PdDialogType } from './pd-confirm-dialog/pd-confirm-dialog.js';
+export { PdFormDialog } from './pd-form-dialog/pd-form-dialog.js';
+export { EVENT_FORM_SUBMIT } from './pd-form-dialog/pd-form-dialog.js';
 export type { PdDialogButton, PdSubmitDialogProps, PdSubmitDialogStatus, } 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,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAExE,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,oBAAoB,GACrB,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":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAGxE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,YAAY,GACb,MAAM,0CAA0C,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAGvE,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,YAAY,CAAC;AAGpB,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,6 +1,8 @@
 import './pd-popup.js';
 import './pd-popup-dialog.js';
 import './pd-submit-dialog.js';
+export { BUTTON_KEY_CANCEL, BUTTON_KEY_CONFIRM, EVENT_CANCEL, EVENT_CONFIRM, PdConfirmDialog } from './pd-confirm-dialog/PdConfirmDialog.js';
+export { EVENT_FORM_SUBMIT, PdFormDialog } from './pd-form-dialog/PdFormDialog.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';

package/dist/pd-confirm-dialog/PdConfirmDialog.d.ts

@@ -0,0 +1,40 @@
+import { LitElement, CSSResultGroup, HTMLTemplateResult } from 'lit';
+/** Button key for cancel/abort action */
+export declare const BUTTON_KEY_CANCEL = "cancel";
+/** Button key for confirm/ok action */
+export declare const BUTTON_KEY_CONFIRM = "confirm";
+/** Event name fired when dialog is confirmed */
+export declare const EVENT_CONFIRM = "pd-dialog-confirm";
+/** Event name fired when dialog is cancelled */
+export declare const EVENT_CANCEL = "pd-dialog-cancel";
+/** Available dialog types with corresponding icons */
+export type PdDialogType = "info" | "help" | "warn" | "error";
+export declare abstract class PdConfirmDialog extends LitElement {
+    /** Dialog title text */
+    protected abstract _dialogTitle: string;
+    /** Dialog type for icon display */
+    protected abstract _dialogType: PdDialogType;
+    /** Whether to show only a single confirm button (no cancel) */
+    protected abstract _singleButton: boolean;
+    /** Text for the confirm/OK button */
+    confirmButtonText: string;
+    /** Text for the cancel button */
+    cancelButtonText: string;
+    /** Enable closing with Escape key */
+    closeByEscape: boolean;
+    /** Enable closing by clicking the backdrop */
+    closeByBackdrop: boolean;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+    /** Render the dialog content */
+    protected abstract _renderContent(): HTMLTemplateResult;
+    /**
+     * Handle button click events.
+     * Override to customize behavior.
+     */
+    protected _handleButtonClick(e: CustomEvent<{
+        button: string;
+    }>): void;
+    private _generateButtons;
+}
+//# sourceMappingURL=PdConfirmDialog.d.ts.map

package/dist/pd-confirm-dialog/PdConfirmDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdConfirmDialog.d.ts","sourceRoot":"","sources":["../../src/pd-confirm-dialog/PdConfirmDialog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAGhF,OAAO,uCAAuC,CAAC;AAM/C,yCAAyC;AACzC,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAE1C,uCAAuC;AACvC,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAE5C,gDAAgD;AAChD,eAAO,MAAM,aAAa,sBAAsB,CAAC;AAEjD,gDAAgD;AAChD,eAAO,MAAM,YAAY,qBAAqB,CAAC;AAM/C,sDAAsD;AACtD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAM9D,8BAAsB,eAAgB,SAAQ,UAAU;IAKtD,wBAAwB;IACxB,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAExC,mCAAmC;IACnC,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,YAAY,CAAC;IAE7C,+DAA+D;IAC/D,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;IAM1C,qCAAqC;IAErC,iBAAiB,SAAQ;IAEzB,iCAAiC;IAEjC,gBAAgB,SAAY;IAE5B,qCAAqC;IAErC,aAAa,UAAS;IAEtB,8CAA8C;IAE9C,eAAe,UAAS;IAMxB,MAAM,CAAC,MAAM,EAWR,cAAc,CAAC;IAMpB,MAAM;IAmBN,gCAAgC;IAChC,SAAS,CAAC,QAAQ,CAAC,cAAc,IAAI,kBAAkB;IAMvD;;;OAGG;IACH,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,WAAW,CAAC;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAc/D,OAAO,CAAC,gBAAgB;CAezB"}

package/dist/pd-confirm-dialog/PdConfirmDialog.js

@@ -0,0 +1,108 @@
+import { LitElement, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import '../pd-popup-dialog.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 BUTTON_KEY_CANCEL = "cancel";
+const BUTTON_KEY_CONFIRM = "confirm";
+const EVENT_CONFIRM = "pd-dialog-confirm";
+const EVENT_CANCEL = "pd-dialog-cancel";
+class PdConfirmDialog extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.confirmButtonText = "Ok";
+    this.cancelButtonText = "Cancel";
+    this.closeByEscape = false;
+    this.closeByBackdrop = false;
+  }
+  static {
+    // ---------------------------------------------------------------------------
+    // Styles
+    // ---------------------------------------------------------------------------
+    this.styles = css`
+    :host {
+      display: block;
+      --pd-popup-max-width: var(--pd-confirm-dialog-max-width, 600px);
+    }
+
+    @media (max-width: 767px) {
+      :host {
+        --pd-popup-max-width: 90%;
+      }
+    }
+  `;
+  }
+  // ---------------------------------------------------------------------------
+  // Render
+  // ---------------------------------------------------------------------------
+  render() {
+    return html`
+      <pd-popup-dialog
+        @submit-button-clicked="${this._handleButtonClick}"
+        title="${this._dialogTitle}"
+        .buttons="${this._generateButtons()}"
+        type="${this._dialogType}"
+        ?closeByEscape="${this.closeByEscape}"
+        ?closeByBackdrop="${this.closeByBackdrop}"
+      >
+        <div slot="content">${this._renderContent()}</div>
+      </pd-popup-dialog>
+    `;
+  }
+  // ---------------------------------------------------------------------------
+  // Protected Methods (can be overridden)
+  // ---------------------------------------------------------------------------
+  /**
+   * Handle button click events.
+   * Override to customize behavior.
+   */
+  _handleButtonClick(e) {
+    const isConfirm = e.detail.button === BUTTON_KEY_CONFIRM;
+    this.dispatchEvent(
+      new CustomEvent(isConfirm ? EVENT_CONFIRM : EVENT_CANCEL, {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // ---------------------------------------------------------------------------
+  // Private Methods
+  // ---------------------------------------------------------------------------
+  _generateButtons() {
+    if (this._singleButton) {
+      return [
+        {
+          key: BUTTON_KEY_CONFIRM,
+          name: this.confirmButtonText,
+          primary: true
+        }
+      ];
+    }
+    return [
+      { key: BUTTON_KEY_CANCEL, name: this.cancelButtonText },
+      { key: BUTTON_KEY_CONFIRM, name: this.confirmButtonText, primary: true }
+    ];
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdConfirmDialog.prototype, "confirmButtonText");
+__decorateClass([
+  property({ type: String })
+], PdConfirmDialog.prototype, "cancelButtonText");
+__decorateClass([
+  property({ type: Boolean })
+], PdConfirmDialog.prototype, "closeByEscape");
+__decorateClass([
+  property({ type: Boolean })
+], PdConfirmDialog.prototype, "closeByBackdrop");
+
+export { BUTTON_KEY_CANCEL, BUTTON_KEY_CONFIRM, EVENT_CANCEL, EVENT_CONFIRM, PdConfirmDialog };

package/dist/pd-confirm-dialog/pd-confirm-dialog.d.ts

@@ -0,0 +1,7 @@
+/**
+ * PdConfirmDialog barrel export
+ */
+export { PdConfirmDialog } from './PdConfirmDialog.js';
+export { BUTTON_KEY_CANCEL, BUTTON_KEY_CONFIRM, EVENT_CONFIRM, EVENT_CANCEL, } from './PdConfirmDialog.js';
+export type { PdDialogType } from './PdConfirmDialog.js';
+//# sourceMappingURL=pd-confirm-dialog.d.ts.map

package/dist/pd-confirm-dialog/pd-confirm-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-confirm-dialog.d.ts","sourceRoot":"","sources":["../../src/pd-confirm-dialog/pd-confirm-dialog.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,YAAY,GACb,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/pd-confirm-dialog/pd-confirm-dialog.stories.d.ts

@@ -0,0 +1,107 @@
+import { HTMLTemplateResult, CSSResultGroup } from 'lit';
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdConfirmDialog, PdDialogType } from './PdConfirmDialog.js';
+/**
+ * Example: Simple confirm dialog with warning
+ */
+declare class ExampleDeleteConfirm extends PdConfirmDialog {
+    protected _dialogTitle: string;
+    protected _dialogType: PdDialogType;
+    protected _singleButton: boolean;
+    itemName: string;
+    protected _renderContent(): HTMLTemplateResult;
+}
+/**
+ * Example: Info dialog with single button
+ */
+declare class ExampleInfoDialog extends PdConfirmDialog {
+    protected _dialogTitle: string;
+    protected _dialogType: PdDialogType;
+    protected _singleButton: boolean;
+    message: string;
+    protected _renderContent(): HTMLTemplateResult;
+}
+/**
+ * Example: Error dialog with custom content
+ */
+declare class ExampleErrorDialog extends PdConfirmDialog {
+    protected _dialogTitle: string;
+    protected _dialogType: PdDialogType;
+    protected _singleButton: boolean;
+    errorCode: string;
+    errorMessage: string;
+    static styles: CSSResultGroup;
+    protected _renderContent(): HTMLTemplateResult;
+}
+/**
+ * Example: Help dialog with formatted content
+ */
+declare class ExampleHelpDialog extends PdConfirmDialog {
+    protected _dialogTitle: string;
+    protected _dialogType: PdDialogType;
+    protected _singleButton: boolean;
+    static styles: CSSResultGroup;
+    protected _renderContent(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "example-delete-confirm": ExampleDeleteConfirm;
+        "example-info-dialog": ExampleInfoDialog;
+        "example-error-dialog": ExampleErrorDialog;
+        "example-help-dialog": ExampleHelpDialog;
+    }
+}
+/**
+ * Story arguments interface for pd-confirm-dialog examples.
+ * Maps to the example components' properties.
+ */
+interface PdConfirmDialogArgs {
+    /** Item name for delete confirmation */
+    itemName: string;
+    /** Confirm button text */
+    confirmButtonText: string;
+    /** Cancel button text */
+    cancelButtonText: string;
+    /** Enable closing with Escape key */
+    closeByEscape: boolean;
+    /** Enable closing by clicking the backdrop */
+    closeByBackdrop: boolean;
+}
+/**
+ * ## PdConfirmDialog (Abstract Base Class)
+ *
+ * Abstract base class for creating standardized confirmation dialogs.
+ * Not used directly -- extend it and implement the required abstract members.
+ *
+ * ### Features
+ * - Dialog types: info, warn, error, help with corresponding icons
+ * - Two-button mode (confirm + cancel) or single-button mode
+ * - Configurable button text via properties
+ * - Escape key and backdrop click close support
+ * - Standardized events: `pd-dialog-confirm` and `pd-dialog-cancel`
+ *
+ * ### How to Extend
+ * Implement these abstract members:
+ * - `_dialogTitle`: Dialog title string
+ * - `_dialogType`: One of `"info" | "warn" | "error" | "help"`
+ * - `_singleButton`: `true` for single confirm button, `false` for confirm + cancel
+ * - `_renderContent()`: Returns the dialog body as `HTMLTemplateResult`
+ *
+ * ### Exported Constants
+ * - `BUTTON_KEY_CONFIRM` / `BUTTON_KEY_CANCEL`: Button key identifiers
+ * - `EVENT_CONFIRM` / `EVENT_CANCEL`: Event name constants
+ */
+declare const meta: Meta<PdConfirmDialogArgs>;
+export default meta;
+type Story = StoryObj<PdConfirmDialogArgs>;
+/** Warning dialog with confirm and cancel buttons. Typical use case: Delete confirmation. */
+export declare const Default: Story;
+/** Overview of all four dialog types: warning, info, error, and help. */
+export declare const AllTypes: Story;
+/** Info dialog with single button -- typical success notification. */
+export declare const InfoNotification: Story;
+/** Error dialog with styled error details section. */
+export declare const ErrorWithDetails: Story;
+/** Help dialog with formatted keyboard shortcuts list. */
+export declare const HelpDialog: Story;
+//# sourceMappingURL=pd-confirm-dialog.stories.d.ts.map

package/dist/pd-confirm-dialog/pd-confirm-dialog.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-confirm-dialog.stories.d.ts","sourceRoot":"","sources":["../../src/pd-confirm-dialog/pd-confirm-dialog.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,kBAAkB,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAEpE,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EACL,eAAe,EACf,YAAY,EAGb,MAAM,sBAAsB,CAAC;AAM9B;;GAEG;AACH,cACM,oBAAqB,SAAQ,eAAe;IAChD,SAAS,CAAC,YAAY,SAAiB;IACvC,SAAS,CAAC,WAAW,EAAE,YAAY,CAAU;IAC7C,SAAS,CAAC,aAAa,UAAS;IAGhC,QAAQ,SAAe;IAEvB,SAAS,CAAC,cAAc,IAAI,kBAAkB;CAM/C;AAED;;GAEG;AACH,cACM,iBAAkB,SAAQ,eAAe;IAC7C,SAAS,CAAC,YAAY,SAAiB;IACvC,SAAS,CAAC,WAAW,EAAE,YAAY,CAAU;IAC7C,SAAS,CAAC,aAAa,UAAQ;IAG/B,OAAO,SAAuC;IAE9C,SAAS,CAAC,cAAc,IAAI,kBAAkB;CAG/C;AAED;;GAEG;AACH,cACM,kBAAmB,SAAQ,eAAe;IAC9C,SAAS,CAAC,YAAY,SAAoB;IAC1C,SAAS,CAAC,WAAW,EAAE,YAAY,CAAW;IAC9C,SAAS,CAAC,aAAa,UAAQ;IAG/B,SAAS,SAAU;IAGnB,YAAY,SAAmC;IAE/C,MAAM,CAAC,MAAM,EAaR,cAAc,CAAC;IAEpB,SAAS,CAAC,cAAc,IAAI,kBAAkB;CAM/C;AAED;;GAEG;AACH,cACM,iBAAkB,SAAQ,eAAe;IAC7C,SAAS,CAAC,YAAY,SAAwB;IAC9C,SAAS,CAAC,WAAW,EAAE,YAAY,CAAU;IAC7C,SAAS,CAAC,aAAa,UAAQ;IAE/B,MAAM,CAAC,MAAM,EAoBR,cAAc,CAAC;IAEpB,SAAS,CAAC,cAAc,IAAI,kBAAkB;CAY/C;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;QAC/C,qBAAqB,EAAE,iBAAiB,CAAC;QACzC,sBAAsB,EAAE,kBAAkB,CAAC;QAC3C,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF;AAMD;;;GAGG;AACH,UAAU,mBAAmB;IAC3B,wCAAwC;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yBAAyB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,qCAAqC;IACrC,aAAa,EAAE,OAAO,CAAC;IACvB,8CAA8C;IAC9C,eAAe,EAAE,OAAO,CAAC;CAC1B;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAgFnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAM3C,6FAA6F;AAC7F,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAMF,yEAAyE;AACzE,eAAO,MAAM,QAAQ,EAAE,KAmDtB,CAAC;AAMF,sEAAsE;AACtE,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC;AAMF,sDAAsD;AACtD,eAAO,MAAM,gBAAgB,EAAE,KAqB9B,CAAC;AAMF,0DAA0D;AAC1D,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC"}

package/dist/pd-form-dialog/PdFormDialog.d.ts

@@ -0,0 +1,54 @@
+import { LitElement, CSSResultGroup, HTMLTemplateResult } from 'lit';
+/** Event name fired when form is submitted with valid data */
+export declare const EVENT_FORM_SUBMIT = "pd-form-submit";
+export declare abstract class PdFormDialog<T> extends LitElement {
+    /** Form data object - managed by subclass */
+    protected abstract _formData: T;
+    /** Dialog title text */
+    protected abstract _dialogTitle: string;
+    /** Text for the save/submit button */
+    saveButtonText: string;
+    /** Text for the cancel button */
+    cancelButtonText: string;
+    /** Whether to show required field info text */
+    showRequiredFieldInfo: boolean;
+    /** Timeout in ms to disable save button after submit (prevents double-submit) */
+    submitDisableTimeout: number;
+    /** Enable closing with Escape key */
+    closeByEscape: boolean;
+    /** Enable closing by clicking the backdrop overlay */
+    closeByBackdrop: boolean;
+    /** Block body scroll when dialog is open */
+    blockScroll: boolean;
+    /** Whether the form is currently valid */
+    protected _validForm: boolean;
+    /** Common validation error message to display */
+    protected _validationError?: string;
+    /** Internal button configuration */
+    private _buttons;
+    private _formContainer;
+    static styles: CSSResultGroup;
+    constructor();
+    render(): import('lit').TemplateResult<1>;
+    /** Render the form fields content */
+    protected abstract _renderContent(): HTMLTemplateResult;
+    /**
+     * Additional validation beyond form field validation.
+     * Return true if form data is valid.
+     */
+    protected abstract _isValidFormData(): boolean;
+    /** Reset the form to initial state */
+    reset(): void;
+    /**
+     * Handle button click events.
+     * Can be overridden for custom behavior.
+     */
+    protected _handleButtonClick(e: CustomEvent<{
+        button: string;
+    }>): void;
+    private _initializeButtons;
+    private _getButtons;
+    private _handleFormChange;
+    private _disableSaveButtonTemporarily;
+}
+//# sourceMappingURL=PdFormDialog.d.ts.map

package/dist/pd-form-dialog/PdFormDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdFormDialog.d.ts","sourceRoot":"","sources":["../../src/pd-form-dialog/PdFormDialog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAGhF,OAAO,qDAAqD,CAAC;AAE7D,OAAO,uCAAuC,CAAC;AAc/C,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,mBAAmB,CAAC;AAkBlD,8BAAsB,YAAY,CAAC,CAAC,CAAE,SAAQ,UAAU;IAKtD,6CAA6C;IAC7C,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;IAEhC,wBAAwB;IACxB,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAMxC,sCAAsC;IAEtC,cAAc,SAAU;IAExB,iCAAiC;IAEjC,gBAAgB,SAAY;IAE5B,+CAA+C;IAE/C,qBAAqB,UAAQ;IAE7B,iFAAiF;IAEjF,oBAAoB,SAAkC;IAEtD,qCAAqC;IAErC,aAAa,UAAS;IAEtB,sDAAsD;IAEtD,eAAe,UAAS;IAExB,4CAA4C;IAE5C,WAAW,UAAS;IAMpB,0CAA0C;IAE1C,SAAS,CAAC,UAAU,UAAS;IAE7B,iDAAiD;IAEjD,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEpC,oCAAoC;IAEpC,OAAO,CAAC,QAAQ,CAA0B;IAO1C,OAAO,CAAC,cAAc,CAAmD;IAMzE,MAAM,CAAC,MAAM,EAWR,cAAc,CAAC;;IAepB,MAAM;IA0BN,qCAAqC;IACrC,SAAS,CAAC,QAAQ,CAAC,cAAc,IAAI,kBAAkB;IAEvD;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,gBAAgB,IAAI,OAAO;IAM9C,sCAAsC;IAC/B,KAAK,IAAI,IAAI;IAUpB;;;OAGG;IACH,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,WAAW,CAAC;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAyB/D,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,6BAA6B;CAMtC"}