@progressive-development/pd-dialog 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -4
- package/dist/pd-confirm-dialog/pd-confirm-dialog.stories.d.ts +0 -107
- package/dist/pd-confirm-dialog/pd-confirm-dialog.stories.d.ts.map +0 -1
- package/dist/pd-form-dialog/pd-form-dialog.stories.d.ts +0 -118
- package/dist/pd-form-dialog/pd-form-dialog.stories.d.ts.map +0 -1
- package/dist/pd-popup/pd-popup.stories.d.ts +0 -58
- package/dist/pd-popup/pd-popup.stories.d.ts.map +0 -1
- package/dist/pd-popup-dialog/pd-popup-dialog.stories.d.ts +0 -55
- package/dist/pd-popup-dialog/pd-popup-dialog.stories.d.ts.map +0 -1
- package/dist/pd-submit-dialog/pd-submit-dialog.stories.d.ts +0 -50
- package/dist/pd-submit-dialog/pd-submit-dialog.stories.d.ts.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progressive-development/pd-dialog",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Progressive Development dialog components.",
|
|
5
5
|
"author": "PD Progressive Development",
|
|
6
6
|
"license": "MIT",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
"@lit/localize": "^0.12.2",
|
|
32
32
|
"tslib": "^2.8.1",
|
|
33
33
|
"@progressive-development/pd-shared-styles": "0.3.2",
|
|
34
|
-
"@progressive-development/pd-icon": "1.0.
|
|
35
|
-
"@progressive-development/pd-
|
|
36
|
-
"@progressive-development/pd-
|
|
34
|
+
"@progressive-development/pd-icon": "1.0.2",
|
|
35
|
+
"@progressive-development/pd-price": "1.0.1",
|
|
36
|
+
"@progressive-development/pd-forms": "1.0.3"
|
|
37
37
|
},
|
|
38
38
|
"customElements": "custom-elements.json",
|
|
39
39
|
"keywords": [
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import { HTMLTemplateResult, CSSResultGroup } from 'lit';
|
|
2
|
-
import { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
3
|
-
import { PdConfirmDialog, PdDialogType } from './PdConfirmDialog.js';
|
|
4
|
-
/**
|
|
5
|
-
* Example: Simple confirm dialog with warning
|
|
6
|
-
*/
|
|
7
|
-
declare class ExampleDeleteConfirm extends PdConfirmDialog {
|
|
8
|
-
protected _dialogTitle: string;
|
|
9
|
-
protected _dialogType: PdDialogType;
|
|
10
|
-
protected _singleButton: boolean;
|
|
11
|
-
itemName: string;
|
|
12
|
-
protected _renderContent(): HTMLTemplateResult;
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* Example: Info dialog with single button
|
|
16
|
-
*/
|
|
17
|
-
declare class ExampleInfoDialog extends PdConfirmDialog {
|
|
18
|
-
protected _dialogTitle: string;
|
|
19
|
-
protected _dialogType: PdDialogType;
|
|
20
|
-
protected _singleButton: boolean;
|
|
21
|
-
message: string;
|
|
22
|
-
protected _renderContent(): HTMLTemplateResult;
|
|
23
|
-
}
|
|
24
|
-
/**
|
|
25
|
-
* Example: Error dialog with custom content
|
|
26
|
-
*/
|
|
27
|
-
declare class ExampleErrorDialog extends PdConfirmDialog {
|
|
28
|
-
protected _dialogTitle: string;
|
|
29
|
-
protected _dialogType: PdDialogType;
|
|
30
|
-
protected _singleButton: boolean;
|
|
31
|
-
errorCode: string;
|
|
32
|
-
errorMessage: string;
|
|
33
|
-
static styles: CSSResultGroup;
|
|
34
|
-
protected _renderContent(): HTMLTemplateResult;
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* Example: Help dialog with formatted content
|
|
38
|
-
*/
|
|
39
|
-
declare class ExampleHelpDialog extends PdConfirmDialog {
|
|
40
|
-
protected _dialogTitle: string;
|
|
41
|
-
protected _dialogType: PdDialogType;
|
|
42
|
-
protected _singleButton: boolean;
|
|
43
|
-
static styles: CSSResultGroup;
|
|
44
|
-
protected _renderContent(): HTMLTemplateResult;
|
|
45
|
-
}
|
|
46
|
-
declare global {
|
|
47
|
-
interface HTMLElementTagNameMap {
|
|
48
|
-
"example-delete-confirm": ExampleDeleteConfirm;
|
|
49
|
-
"example-info-dialog": ExampleInfoDialog;
|
|
50
|
-
"example-error-dialog": ExampleErrorDialog;
|
|
51
|
-
"example-help-dialog": ExampleHelpDialog;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
/**
|
|
55
|
-
* Story arguments interface for pd-confirm-dialog examples.
|
|
56
|
-
* Maps to the example components' properties.
|
|
57
|
-
*/
|
|
58
|
-
interface PdConfirmDialogArgs {
|
|
59
|
-
/** Item name for delete confirmation */
|
|
60
|
-
itemName: string;
|
|
61
|
-
/** Confirm button text */
|
|
62
|
-
confirmButtonText: string;
|
|
63
|
-
/** Cancel button text */
|
|
64
|
-
cancelButtonText: string;
|
|
65
|
-
/** Enable closing with Escape key */
|
|
66
|
-
closeByEscape: boolean;
|
|
67
|
-
/** Enable closing by clicking the backdrop */
|
|
68
|
-
closeByBackdrop: boolean;
|
|
69
|
-
}
|
|
70
|
-
/**
|
|
71
|
-
* ## PdConfirmDialog (Abstract Base Class)
|
|
72
|
-
*
|
|
73
|
-
* Abstract base class for creating standardized confirmation dialogs.
|
|
74
|
-
* Not used directly -- extend it and implement the required abstract members.
|
|
75
|
-
*
|
|
76
|
-
* ### Features
|
|
77
|
-
* - Dialog types: info, warn, error, help with corresponding icons
|
|
78
|
-
* - Two-button mode (confirm + cancel) or single-button mode
|
|
79
|
-
* - Configurable button text via properties
|
|
80
|
-
* - Escape key and backdrop click close support
|
|
81
|
-
* - Standardized events: `pd-dialog-confirm` and `pd-dialog-cancel`
|
|
82
|
-
*
|
|
83
|
-
* ### How to Extend
|
|
84
|
-
* Implement these abstract members:
|
|
85
|
-
* - `_dialogTitle`: Dialog title string
|
|
86
|
-
* - `_dialogType`: One of `"info" | "warn" | "error" | "help"`
|
|
87
|
-
* - `_singleButton`: `true` for single confirm button, `false` for confirm + cancel
|
|
88
|
-
* - `_renderContent()`: Returns the dialog body as `HTMLTemplateResult`
|
|
89
|
-
*
|
|
90
|
-
* ### Exported Constants
|
|
91
|
-
* - `BUTTON_KEY_CONFIRM` / `BUTTON_KEY_CANCEL`: Button key identifiers
|
|
92
|
-
* - `EVENT_CONFIRM` / `EVENT_CANCEL`: Event name constants
|
|
93
|
-
*/
|
|
94
|
-
declare const meta: Meta<PdConfirmDialogArgs>;
|
|
95
|
-
export default meta;
|
|
96
|
-
type Story = StoryObj<PdConfirmDialogArgs>;
|
|
97
|
-
/** Warning dialog with confirm and cancel buttons. Typical use case: Delete confirmation. */
|
|
98
|
-
export declare const Default: Story;
|
|
99
|
-
/** Overview of all four dialog types: warning, info, error, and help. */
|
|
100
|
-
export declare const AllTypes: Story;
|
|
101
|
-
/** Info dialog with single button -- typical success notification. */
|
|
102
|
-
export declare const InfoNotification: Story;
|
|
103
|
-
/** Error dialog with styled error details section. */
|
|
104
|
-
export declare const ErrorWithDetails: Story;
|
|
105
|
-
/** Help dialog with formatted keyboard shortcuts list. */
|
|
106
|
-
export declare const HelpDialog: Story;
|
|
107
|
-
//# sourceMappingURL=pd-confirm-dialog.stories.d.ts.map
|
|
@@ -1 +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"}
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import { HTMLTemplateResult, CSSResultGroup } from 'lit';
|
|
2
|
-
import { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
3
|
-
import { PdFormDialog } from './PdFormDialog.js';
|
|
4
|
-
/**
|
|
5
|
-
* Example: Contact form data interface
|
|
6
|
-
*/
|
|
7
|
-
interface ContactFormData {
|
|
8
|
-
name: string;
|
|
9
|
-
email: string;
|
|
10
|
-
message: string;
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* Example: Contact form dialog
|
|
14
|
-
*/
|
|
15
|
-
declare class ExampleContactForm extends PdFormDialog<ContactFormData> {
|
|
16
|
-
protected _dialogTitle: string;
|
|
17
|
-
protected _formData: ContactFormData;
|
|
18
|
-
static styles: CSSResultGroup;
|
|
19
|
-
protected _isValidFormData(): boolean;
|
|
20
|
-
protected _renderContent(): HTMLTemplateResult;
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* Example: User profile form data interface
|
|
24
|
-
*/
|
|
25
|
-
interface ProfileFormData {
|
|
26
|
-
displayName: string;
|
|
27
|
-
bio: string;
|
|
28
|
-
language: string;
|
|
29
|
-
}
|
|
30
|
-
/**
|
|
31
|
-
* Example: User profile form dialog
|
|
32
|
-
*/
|
|
33
|
-
declare class ExampleProfileForm extends PdFormDialog<ProfileFormData> {
|
|
34
|
-
protected _dialogTitle: string;
|
|
35
|
-
protected _formData: ProfileFormData;
|
|
36
|
-
static styles: CSSResultGroup;
|
|
37
|
-
protected _isValidFormData(): boolean;
|
|
38
|
-
protected _renderContent(): HTMLTemplateResult;
|
|
39
|
-
}
|
|
40
|
-
/**
|
|
41
|
-
* Example: Simple feedback form data interface
|
|
42
|
-
*/
|
|
43
|
-
interface FeedbackFormData {
|
|
44
|
-
rating: string;
|
|
45
|
-
feedback: string;
|
|
46
|
-
}
|
|
47
|
-
/**
|
|
48
|
-
* Example: Feedback form dialog with custom rating UI
|
|
49
|
-
*/
|
|
50
|
-
declare class ExampleFeedbackForm extends PdFormDialog<FeedbackFormData> {
|
|
51
|
-
protected _dialogTitle: string;
|
|
52
|
-
protected _formData: FeedbackFormData;
|
|
53
|
-
static styles: CSSResultGroup;
|
|
54
|
-
protected _isValidFormData(): boolean;
|
|
55
|
-
private _selectRating;
|
|
56
|
-
protected _renderContent(): HTMLTemplateResult;
|
|
57
|
-
}
|
|
58
|
-
declare global {
|
|
59
|
-
interface HTMLElementTagNameMap {
|
|
60
|
-
"example-contact-form": ExampleContactForm;
|
|
61
|
-
"example-profile-form": ExampleProfileForm;
|
|
62
|
-
"example-feedback-form": ExampleFeedbackForm;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* Story arguments interface for pd-form-dialog examples.
|
|
67
|
-
* Maps to the example components' properties.
|
|
68
|
-
*/
|
|
69
|
-
interface PdFormDialogArgs {
|
|
70
|
-
/** Save button text */
|
|
71
|
-
saveButtonText: string;
|
|
72
|
-
/** Cancel button text */
|
|
73
|
-
cancelButtonText: string;
|
|
74
|
-
/** Show required field info text */
|
|
75
|
-
showRequiredFieldInfo: boolean;
|
|
76
|
-
/** Double-submit prevention timeout in ms */
|
|
77
|
-
submitDisableTimeout: number;
|
|
78
|
-
}
|
|
79
|
-
/**
|
|
80
|
-
* ## PdFormDialog<T> (Abstract Base Class)
|
|
81
|
-
*
|
|
82
|
-
* Generic abstract base class for form dialogs with integrated validation.
|
|
83
|
-
* Not used directly -- extend it with a type parameter for your form data.
|
|
84
|
-
*
|
|
85
|
-
* ### Features
|
|
86
|
-
* - Integrated form validation via `pd-form-container`
|
|
87
|
-
* - Save button automatically disabled until form is valid
|
|
88
|
-
* - Double-submit prevention with configurable timeout
|
|
89
|
-
* - Type-safe form data handling via generic `T` parameter
|
|
90
|
-
* - Standardized events: `pd-form-submit` (with typed payload) and `pd-dialog-cancel`
|
|
91
|
-
* - Required field info display (optional)
|
|
92
|
-
*
|
|
93
|
-
* ### How to Extend
|
|
94
|
-
* Implement these abstract members:
|
|
95
|
-
* - `_dialogTitle`: Dialog title string
|
|
96
|
-
* - `_formData`: Your typed form data object
|
|
97
|
-
* - `_isValidFormData()`: Additional validation beyond field-level validation
|
|
98
|
-
* - `_renderContent()`: Returns form fields as `HTMLTemplateResult`
|
|
99
|
-
*
|
|
100
|
-
* ### Validation Flow
|
|
101
|
-
* 1. Each form field validates individually (via pd-form-container)
|
|
102
|
-
* 2. `_isValidFormData()` runs additional cross-field validation
|
|
103
|
-
* 3. Save button enables only when both pass
|
|
104
|
-
*/
|
|
105
|
-
declare const meta: Meta<PdFormDialogArgs>;
|
|
106
|
-
export default meta;
|
|
107
|
-
type Story = StoryObj<PdFormDialogArgs>;
|
|
108
|
-
/** Contact form dialog with name, email, and message fields. Interactive via Controls panel. */
|
|
109
|
-
export declare const Default: Story;
|
|
110
|
-
/** User profile form with display name, bio, and language selection. */
|
|
111
|
-
export declare const ProfileForm: Story;
|
|
112
|
-
/** Feedback form with custom rating buttons and optional text area. */
|
|
113
|
-
export declare const FeedbackForm: Story;
|
|
114
|
-
/** Overview of all three form dialog implementations side by side. */
|
|
115
|
-
export declare const AllForms: Story;
|
|
116
|
-
/** Demonstrates the validation flow: Save button is disabled until form is valid. */
|
|
117
|
-
export declare const ValidationBehavior: Story;
|
|
118
|
-
//# sourceMappingURL=pd-form-dialog.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pd-form-dialog.stories.d.ts","sourceRoot":"","sources":["../../src/pd-form-dialog/pd-form-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,4CAA4C,CAAC;AACpD,OAAO,iDAAiD,CAAC;AACzD,OAAO,6CAA6C,CAAC;AAErD,OAAO,EAAE,YAAY,EAAqB,MAAM,mBAAmB,CAAC;AAOpE;;GAEG;AACH,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,cACM,kBAAmB,SAAQ,YAAY,CAAC,eAAe,CAAC;IAC5D,SAAS,CAAC,YAAY,SAAgB;IAGtC,SAAS,CAAC,SAAS,EAAE,eAAe,CAIlC;IAEF,MAAM,CAAC,MAAM,EASR,cAAc,CAAC;IAEpB,SAAS,CAAC,gBAAgB,IAAI,OAAO;IAIrC,SAAS,CAAC,cAAc,IAAI,kBAAkB;CA4B/C;AAED;;GAEG;AACH,UAAU,eAAe;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,cACM,kBAAmB,SAAQ,YAAY,CAAC,eAAe,CAAC;IAC5D,SAAS,CAAC,YAAY,SAAkB;IAGxC,SAAS,CAAC,SAAS,EAAE,eAAe,CAIlC;IAEF,MAAM,CAAC,MAAM,EASR,cAAc,CAAC;IAEpB,SAAS,CAAC,gBAAgB,IAAI,OAAO;IAIrC,SAAS,CAAC,cAAc,IAAI,kBAAkB;CAgC/C;AAED;;GAEG;AACH,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,cACM,mBAAoB,SAAQ,YAAY,CAAC,gBAAgB,CAAC;IAC9D,SAAS,CAAC,YAAY,SAAqB;IAG3C,SAAS,CAAC,SAAS,EAAE,gBAAgB,CAGnC;IAEF,MAAM,CAAC,MAAM,EA6BR,cAAc,CAAC;IAEpB,SAAS,CAAC,gBAAgB,IAAI,OAAO;IAIrC,OAAO,CAAC,aAAa;IAKrB,SAAS,CAAC,cAAc,IAAI,kBAAkB;CAiC/C;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;QAC3C,sBAAsB,EAAE,kBAAkB,CAAC;QAC3C,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF;AAMD;;;GAGG;AACH,UAAU,gBAAgB;IACxB,uBAAuB;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,6CAA6C;IAC7C,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CA0GhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAMxC,gGAAgG;AAChG,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAMF,wEAAwE;AACxE,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC;AAMF,uEAAuE;AACvE,eAAO,MAAM,YAAY,EAAE,KAqB1B,CAAC;AAMF,sEAAsE;AACtE,eAAO,MAAM,QAAQ,EAAE,KAwCtB,CAAC;AAMF,qFAAqF;AACrF,eAAO,MAAM,kBAAkB,EAAE,KA6BhC,CAAC"}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
/**
|
|
3
|
-
* Story arguments interface for pd-popup component.
|
|
4
|
-
* Maps to the component's public API.
|
|
5
|
-
*/
|
|
6
|
-
interface PdPopupArgs {
|
|
7
|
-
/** Content for the trigger slot */
|
|
8
|
-
smallViewSlot: string;
|
|
9
|
-
/** Content displayed in the popup */
|
|
10
|
-
contentSlot: string;
|
|
11
|
-
/** Enable closing with Escape key */
|
|
12
|
-
closeByEscape: boolean;
|
|
13
|
-
/** Enable closing by clicking the backdrop overlay */
|
|
14
|
-
closeByBackdrop: boolean;
|
|
15
|
-
/** Hide the built-in close icon */
|
|
16
|
-
hideCloseIcon: boolean;
|
|
17
|
-
/** Block body scroll when popup is open */
|
|
18
|
-
blockScroll: boolean;
|
|
19
|
-
/** Accessible label for the popup */
|
|
20
|
-
popupLabel: string;
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* ## pd-popup
|
|
24
|
-
*
|
|
25
|
-
* A modal popup component triggered by clicking a slot element.
|
|
26
|
-
*
|
|
27
|
-
* ### Features
|
|
28
|
-
* - Trigger element via `small-view` slot (click to open)
|
|
29
|
-
* - Full-screen modal overlay with centered content
|
|
30
|
-
* - Built-in close icon (keyboard accessible, can be hidden)
|
|
31
|
-
* - Optional close on Escape key press (`closeByEscape`)
|
|
32
|
-
* - Optional close on backdrop click (`closeByBackdrop`)
|
|
33
|
-
* - Programmatic control via `showPopup()` and `hidePopup()` methods
|
|
34
|
-
* - Body scroll blocking when open (`blockScroll`)
|
|
35
|
-
* - Accessibility: `role="dialog"`, `aria-modal="true"`, `aria-label`
|
|
36
|
-
*
|
|
37
|
-
* ### Accessibility
|
|
38
|
-
* - Uses `role="dialog"` and `aria-modal="true"` on the modal container
|
|
39
|
-
* - `aria-label` set via `popupLabel` property
|
|
40
|
-
* - Close icon is keyboard focusable with `role="button"` and `aria-label`
|
|
41
|
-
* - Supports Escape key and backdrop click for closing
|
|
42
|
-
*/
|
|
43
|
-
declare const meta: Meta<PdPopupArgs>;
|
|
44
|
-
export default meta;
|
|
45
|
-
type Story = StoryObj<PdPopupArgs>;
|
|
46
|
-
/** Default popup with simple text content. Interactive via Controls panel. */
|
|
47
|
-
export declare const Default: Story;
|
|
48
|
-
/** Popup with structured HTML content including headings, text, and lists. */
|
|
49
|
-
export declare const RichContent: Story;
|
|
50
|
-
/** Demonstrates the three closing mechanisms: close icon, Escape key, and backdrop click. */
|
|
51
|
-
export declare const ClosingOptions: Story;
|
|
52
|
-
/** Popup with the built-in close icon hidden. Content provides its own close mechanism. */
|
|
53
|
-
export declare const HiddenCloseIcon: Story;
|
|
54
|
-
/** Demonstrates opening and closing the popup programmatically via `showPopup()` / `hidePopup()`. */
|
|
55
|
-
export declare const ProgrammaticControl: Story;
|
|
56
|
-
/** CSS Custom Properties -- Branded and Redesigned variants. */
|
|
57
|
-
export declare const CustomStyling: Story;
|
|
58
|
-
//# sourceMappingURL=pd-popup.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pd-popup.stories.d.ts","sourceRoot":"","sources":["../../src/pd-popup/pd-popup.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,eAAe,CAAC;AAMvB;;;GAGG;AACH,UAAU,WAAW;IACnB,mCAAmC;IACnC,aAAa,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,aAAa,EAAE,OAAO,CAAC;IACvB,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;IACzB,mCAAmC;IACnC,aAAa,EAAE,OAAO,CAAC;IACvB,2CAA2C;IAC3C,WAAW,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,UAAU,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CA8F3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAMnC,8EAA8E;AAC9E,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,8EAA8E;AAC9E,eAAO,MAAM,WAAW,EAAE,KA8BzB,CAAC;AAMF,6FAA6F;AAC7F,eAAO,MAAM,cAAc,EAAE,KAiE5B,CAAC;AAMF,2FAA2F;AAC3F,eAAO,MAAM,eAAe,EAAE,KA6B7B,CAAC;AAMF,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,EAAE,KA6CjC,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAyG3B,CAAC"}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
import { PdDialogButton } from '../types.js';
|
|
3
|
-
/**
|
|
4
|
-
* Story arguments interface for pd-popup-dialog component.
|
|
5
|
-
* Maps to the component's public API.
|
|
6
|
-
*/
|
|
7
|
-
interface PdPopupDialogArgs {
|
|
8
|
-
/** Dialog title text */
|
|
9
|
-
title: string;
|
|
10
|
-
/** Dialog type: info, warn, error, help */
|
|
11
|
-
type: "info" | "warn" | "error" | "help";
|
|
12
|
-
/** Footer button configurations */
|
|
13
|
-
buttons: PdDialogButton[];
|
|
14
|
-
/** Enable closing with Escape key */
|
|
15
|
-
closeByEscape: boolean;
|
|
16
|
-
/** Enable closing by clicking the backdrop overlay */
|
|
17
|
-
closeByBackdrop: boolean;
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* ## pd-popup-dialog
|
|
21
|
-
*
|
|
22
|
-
* A structured modal dialog with colored header, content slot, and configurable footer buttons.
|
|
23
|
-
*
|
|
24
|
-
* ### Features
|
|
25
|
-
* - Dialog types: info, warn, error, help (each with corresponding icon)
|
|
26
|
-
* - Colored header with icon and title text
|
|
27
|
-
* - Content area via `content` slot
|
|
28
|
-
* - Configurable footer buttons via `buttons` array property
|
|
29
|
-
* - Optional close on Escape key (`closeByEscape`)
|
|
30
|
-
* - Optional close on backdrop click (`closeByBackdrop`)
|
|
31
|
-
* - Programmatic control via `showPopup()` / `hidePopup()` methods
|
|
32
|
-
* - Mobile-responsive: buttons stack vertically on small screens
|
|
33
|
-
*
|
|
34
|
-
* ### Accessibility
|
|
35
|
-
* - Uses `role="dialog"` and `aria-modal="true"`
|
|
36
|
-
* - Title linked via `aria-labelledby` for screen readers
|
|
37
|
-
* - Footer buttons use native `<pd-button>` with keyboard support
|
|
38
|
-
* - Escape key close support
|
|
39
|
-
*/
|
|
40
|
-
declare const meta: Meta<PdPopupDialogArgs>;
|
|
41
|
-
export default meta;
|
|
42
|
-
type Story = StoryObj<PdPopupDialogArgs>;
|
|
43
|
-
/** Default info dialog with OK and Cancel buttons. Interactive via Controls panel. */
|
|
44
|
-
export declare const Default: Story;
|
|
45
|
-
/** All four dialog types with their corresponding icons side by side. */
|
|
46
|
-
export declare const AllTypes: Story;
|
|
47
|
-
/** Different footer button configurations: single, two, and three buttons. */
|
|
48
|
-
export declare const ButtonConfigurations: Story;
|
|
49
|
-
/** Demonstrates opening/closing the dialog programmatically via `showPopup()` / `hidePopup()`. */
|
|
50
|
-
export declare const ProgrammaticControl: Story;
|
|
51
|
-
/** Dialog with a long title that wraps to multiple lines. */
|
|
52
|
-
export declare const LongTitle: Story;
|
|
53
|
-
/** CSS Custom Properties -- Branded and Redesigned variants. */
|
|
54
|
-
export declare const CustomStyling: Story;
|
|
55
|
-
//# sourceMappingURL=pd-popup-dialog.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pd-popup-dialog.stories.d.ts","sourceRoot":"","sources":["../../src/pd-popup-dialog/pd-popup-dialog.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,sBAAsB,CAAC;AAM9B;;;GAGG;AACH,UAAU,iBAAiB;IACzB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACzC,mCAAmC;IACnC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,qCAAqC;IACrC,aAAa,EAAE,OAAO,CAAC;IACvB,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;CAC1B;AAyBD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CA+FjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,sFAAsF;AACtF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,yEAAyE;AACzE,eAAO,MAAM,QAAQ,EAAE,KA0DtB,CAAC;AAMF,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,EAAE,KA+DlC,CAAC;AAMF,kGAAkG;AAClG,eAAO,MAAM,mBAAmB,EAAE,KAyDjC,CAAC;AAMF,6DAA6D;AAC7D,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA4H3B,CAAC"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
import { PdSubmitDialogStatus } from '../types.js';
|
|
3
|
-
/**
|
|
4
|
-
* Story arguments interface for pd-submit-dialog component.
|
|
5
|
-
* Maps to the component's public API.
|
|
6
|
-
*/
|
|
7
|
-
interface PdSubmitDialogArgs {
|
|
8
|
-
/** Dialog title text */
|
|
9
|
-
title: string;
|
|
10
|
-
/** Current status: SEND (1), SUCCESS (2), or FAILED (3) */
|
|
11
|
-
status: PdSubmitDialogStatus;
|
|
12
|
-
/** Optional status message text */
|
|
13
|
-
statusMsg: string;
|
|
14
|
-
/** Confirmation email address */
|
|
15
|
-
confirmMail: string;
|
|
16
|
-
/** Custom progress text map */
|
|
17
|
-
progressTxtMap: Map<number, string>;
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* ## pd-submit-dialog
|
|
21
|
-
*
|
|
22
|
-
* A progress dialog that shows loading, success, and failure states during async operations.
|
|
23
|
-
*
|
|
24
|
-
* ### Features
|
|
25
|
-
* - Three progress states: SEND (loading spinner), SUCCESS (check icon), FAILED (error icon)
|
|
26
|
-
* - Custom progress text per state via `progressTxtMap`
|
|
27
|
-
* - Optional status message below the progress indicator
|
|
28
|
-
* - Dynamic footer buttons based on current status (no buttons while loading)
|
|
29
|
-
* - Content slot for additional information above the progress area
|
|
30
|
-
* - Built on top of `pd-popup-dialog`
|
|
31
|
-
*
|
|
32
|
-
* ### Status Flow
|
|
33
|
-
* 1. `PdSubmitDialogStatus.SEND` (1) -- Loading spinner, no buttons
|
|
34
|
-
* 2. `PdSubmitDialogStatus.SUCCESS` (2) -- Success icon, "Close" button
|
|
35
|
-
* 3. `PdSubmitDialogStatus.FAILED` (3) -- Error icon, action buttons
|
|
36
|
-
*/
|
|
37
|
-
declare const meta: Meta<PdSubmitDialogArgs>;
|
|
38
|
-
export default meta;
|
|
39
|
-
type Story = StoryObj<PdSubmitDialogArgs>;
|
|
40
|
-
/** Default submit dialog in sending state with loading spinner. Interactive via Controls panel. */
|
|
41
|
-
export declare const Default: Story;
|
|
42
|
-
/** All three progress states side by side: Sending, Success, and Failed. */
|
|
43
|
-
export declare const AllStates: Story;
|
|
44
|
-
/** Dialog in success state with check icon and Close button. */
|
|
45
|
-
export declare const SuccessState: Story;
|
|
46
|
-
/** Dialog in failed state with error icon, status message, and action buttons. */
|
|
47
|
-
export declare const FailedState: Story;
|
|
48
|
-
/** Demonstrates the `submit-content` slot with rich HTML content above the progress area. */
|
|
49
|
-
export declare const WithSlotContent: Story;
|
|
50
|
-
//# sourceMappingURL=pd-submit-dialog.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pd-submit-dialog.stories.d.ts","sourceRoot":"","sources":["../../src/pd-submit-dialog/pd-submit-dialog.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,uBAAuB,CAAC;AAM/B;;;GAGG;AACH,UAAU,kBAAkB;IAC1B,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,MAAM,EAAE,oBAAoB,CAAC;IAC7B,mCAAmC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACrC;AAsBD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,CA0FlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAM1C,mGAAmG;AACnG,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,4EAA4E;AAC5E,eAAO,MAAM,SAAS,EAAE,KA0DvB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC;AAMF,kFAAkF;AAClF,eAAO,MAAM,WAAW,EAAE,KA2BzB,CAAC;AAMF,6FAA6F;AAC7F,eAAO,MAAM,eAAe,EAAE,KAoC7B,CAAC"}
|