@progressive-development/pd-dialog 0.6.24 → 0.9.2

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.
Files changed (41) hide show
  1. package/dist/index.d.ts +3 -3
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +9 -14
  4. package/dist/locales/be.js +2 -3
  5. package/dist/locales/de.js +2 -3
  6. package/dist/locales/en.js +2 -3
  7. package/dist/pd-popup/PdPopup.d.ts +31 -0
  8. package/dist/pd-popup/PdPopup.d.ts.map +1 -0
  9. package/dist/pd-popup/PdPopup.js +135 -0
  10. package/dist/pd-popup/pd-popup.d.ts +3 -0
  11. package/dist/pd-popup/pd-popup.d.ts.map +1 -0
  12. package/dist/{stories → pd-popup}/pd-popup.stories.d.ts +1 -1
  13. package/dist/pd-popup/pd-popup.stories.d.ts.map +1 -0
  14. package/dist/pd-popup-dialog/PdPopupDialog.d.ts +37 -0
  15. package/dist/pd-popup-dialog/PdPopupDialog.d.ts.map +1 -0
  16. package/dist/pd-popup-dialog/PdPopupDialog.js +261 -0
  17. package/dist/pd-popup-dialog/pd-popup-dialog.d.ts +3 -0
  18. package/dist/pd-popup-dialog/pd-popup-dialog.d.ts.map +1 -0
  19. package/dist/{stories → pd-popup-dialog}/pd-popup-dialog.stories.d.ts +1 -1
  20. package/dist/pd-popup-dialog/pd-popup-dialog.stories.d.ts.map +1 -0
  21. package/dist/pd-popup-dialog.d.ts +2 -34
  22. package/dist/pd-popup-dialog.js +6 -265
  23. package/dist/pd-popup.d.ts +2 -29
  24. package/dist/pd-popup.js +6 -139
  25. package/dist/pd-submit-dialog/PdSubmitDialog.d.ts +32 -0
  26. package/dist/pd-submit-dialog/PdSubmitDialog.d.ts.map +1 -0
  27. package/dist/pd-submit-dialog/PdSubmitDialog.js +195 -0
  28. package/dist/pd-submit-dialog/pd-submit-dialog.d.ts +3 -0
  29. package/dist/pd-submit-dialog/pd-submit-dialog.d.ts.map +1 -0
  30. package/dist/{stories → pd-submit-dialog}/pd-submit-dialog.stories.d.ts +1 -1
  31. package/dist/pd-submit-dialog/pd-submit-dialog.stories.d.ts.map +1 -0
  32. package/dist/pd-submit-dialog.d.ts +2 -30
  33. package/dist/pd-submit-dialog.js +6 -198
  34. package/dist/types.js +2 -3
  35. package/package.json +28 -48
  36. package/dist/pd-popup-dialog.d.ts.map +0 -1
  37. package/dist/pd-popup.d.ts.map +0 -1
  38. package/dist/pd-submit-dialog.d.ts.map +0 -1
  39. package/dist/stories/pd-popup-dialog.stories.d.ts.map +0 -1
  40. package/dist/stories/pd-popup.stories.d.ts.map +0 -1
  41. package/dist/stories/pd-submit-dialog.stories.d.ts.map +0 -1
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- export { PdPopup } from './pd-popup.js';
2
- export { PdPopupDialog } from './pd-popup-dialog.js';
3
- export { PdSubmitDialog } from './pd-submit-dialog.js';
1
+ export { PdPopup } from './pd-popup/pd-popup.js';
2
+ export { PdPopupDialog } from './pd-popup-dialog/pd-popup-dialog.js';
3
+ export { PdSubmitDialog } from './pd-submit-dialog/pd-submit-dialog.js';
4
4
  export type { PdDialogButton, PdSubmitDialogProps, PdSubmitDialogStatus, } from './types.js';
5
5
  export { templates as beTemplates } from './generated/locales/be.js';
6
6
  export { templates as deTemplates } from './generated/locales/de.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,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"}
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"}
package/dist/index.js CHANGED
@@ -1,14 +1,9 @@
1
- import { PdPopup } from "./pd-popup.js";
2
- import { PdPopupDialog } from "./pd-popup-dialog.js";
3
- import { PdSubmitDialog } from "./pd-submit-dialog.js";
4
- import { templates } from "./locales/be.js";
5
- import { templates as templates2 } from "./locales/de.js";
6
- import { templates as templates3 } from "./locales/en.js";
7
- export {
8
- PdPopup,
9
- PdPopupDialog,
10
- PdSubmitDialog,
11
- templates as beTemplates,
12
- templates2 as deTemplates,
13
- templates3 as enTemplates
14
- };
1
+ import './pd-popup.js';
2
+ import './pd-popup-dialog.js';
3
+ import './pd-submit-dialog.js';
4
+ export { templates as beTemplates } from './locales/be.js';
5
+ export { templates as deTemplates } from './locales/de.js';
6
+ export { templates as enTemplates } from './locales/en.js';
7
+ export { PdPopup } from './pd-popup/PdPopup.js';
8
+ export { PdPopupDialog } from './pd-popup-dialog/PdPopupDialog.js';
9
+ export { PdSubmitDialog } from './pd-submit-dialog/PdSubmitDialog.js';
@@ -2,6 +2,5 @@ const templates = {
2
2
  "pd.submit.dialog.closeStay": `Bewerk gegevens`,
3
3
  "pd.submit.dialog.startPage": `Naar startpagina`
4
4
  };
5
- export {
6
- templates
7
- };
5
+
6
+ export { templates };
@@ -2,6 +2,5 @@ const templates = {
2
2
  "pd.submit.dialog.closeStay": `Daten bearbeiten`,
3
3
  "pd.submit.dialog.startPage": `Zur Startseite`
4
4
  };
5
- export {
6
- templates
7
- };
5
+
6
+ export { templates };
@@ -2,6 +2,5 @@ const templates = {
2
2
  "pd.submit.dialog.closeStay": `Edit data`,
3
3
  "pd.submit.dialog.startPage": `Go to homepage`
4
4
  };
5
- export {
6
- templates
7
- };
5
+
6
+ export { templates };
@@ -0,0 +1,31 @@
1
+ import { LitElement, CSSResultGroup } from 'lit';
2
+ /**
3
+ * @tagname pd-popup
4
+ *
5
+ * Popup-Komponente, die bei Klick auf ein Trigger-Element (Slot `small-view`)
6
+ * ein modales Fenster (Slot `content`) öffnet.
7
+ *
8
+ * @element pd-popup
9
+ * @slot small-view - Inhalt, der das Popup triggert (z.B. Icon, Text)
10
+ * @slot content - Inhalt, der im Popup angezeigt wird
11
+ * @event popup-close - Wird ausgelöst, wenn das Popup geschlossen wurde
12
+ */
13
+ export declare class PdPopup extends LitElement {
14
+ closeByEscape: boolean;
15
+ static styles: CSSResultGroup;
16
+ connectedCallback(): void;
17
+ disconnectedCallback(): void;
18
+ /**
19
+ * Öffnet das Popup programmatisch
20
+ */
21
+ showPopup(): void;
22
+ /**
23
+ * Schließt das Popup programmatisch
24
+ */
25
+ hidePopup(): void;
26
+ protected render(): import('lit').TemplateResult<1>;
27
+ private _activatePopup;
28
+ private _closePopup;
29
+ private _handleKeyDown;
30
+ }
31
+ //# sourceMappingURL=PdPopup.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PdPopup.d.ts","sourceRoot":"","sources":["../../src/pd-popup/PdPopup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;;GAUG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IAErC,aAAa,EAAE,OAAO,CAAS;IAE/B,OAAgB,MAAM,EAAE,cAAc,CA8CpC;IAEO,iBAAiB;IAOjB,oBAAoB;IAO7B;;OAEG;IACI,SAAS,IAAI,IAAI;IAIxB;;OAEG;IACI,SAAS,IAAI,IAAI;IAIxB,SAAS,CAAC,MAAM;IAqBhB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,cAAc,CAEpB;CACH"}
@@ -0,0 +1,135 @@
1
+ import { LitElement, css, html } from 'lit';
2
+ import { property } from 'lit/decorators.js';
3
+ import { pdIcons } from '@progressive-development/pd-icon';
4
+ import '@progressive-development/pd-icon/pd-icon';
5
+
6
+ var __defProp = Object.defineProperty;
7
+ var __decorateClass = (decorators, target, key, kind) => {
8
+ var result = void 0 ;
9
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
10
+ if (decorator = decorators[i])
11
+ result = (decorator(target, key, result) ) || result;
12
+ if (result) __defProp(target, key, result);
13
+ return result;
14
+ };
15
+ class PdPopup extends LitElement {
16
+ constructor() {
17
+ super(...arguments);
18
+ this.closeByEscape = false;
19
+ this._handleKeyDown = (e) => {
20
+ if (e.key === "Escape") this._closePopup();
21
+ };
22
+ }
23
+ static {
24
+ this.styles = [
25
+ css`
26
+ :host {
27
+ display: block;
28
+ }
29
+
30
+ .modal {
31
+ position: fixed;
32
+ z-index: 100;
33
+ left: 0;
34
+ top: 0;
35
+ width: 100%;
36
+ height: 100%;
37
+ overflow: auto;
38
+ background-color: var(
39
+ --pd-popup-modal-bg-rgba,
40
+ rgba(175, 193, 210, 0.8)
41
+ );
42
+ display: var(--pd-popup-default-display, none);
43
+ padding-top: 100px;
44
+ }
45
+
46
+ .modal-content {
47
+ background-color: var(--pd-default-bg-col);
48
+ opacity: 1;
49
+ margin: auto;
50
+ padding: var(--pd-popup-modal-padding, 20px);
51
+ padding-bottom: 130px;
52
+ border: 2px solid var(--pd-default-col);
53
+ width: 80%;
54
+ max-width: 1200px;
55
+ position: relative;
56
+ }
57
+
58
+ .modal-content-slot {
59
+ max-width: var(--pd-popup-modal-slot-max-width, 1000px);
60
+ margin: var(--pd-popup-modal-slot-margin, 0 30px);
61
+ }
62
+
63
+ .close-icon {
64
+ position: absolute;
65
+ cursor: pointer;
66
+ right: 1.2em;
67
+ top: 1.2em;
68
+ }
69
+ `
70
+ ];
71
+ }
72
+ connectedCallback() {
73
+ super.connectedCallback();
74
+ if (this.closeByEscape) {
75
+ document.addEventListener("keydown", this._handleKeyDown);
76
+ }
77
+ }
78
+ disconnectedCallback() {
79
+ super.disconnectedCallback();
80
+ if (this.closeByEscape) {
81
+ document.removeEventListener("keydown", this._handleKeyDown);
82
+ }
83
+ }
84
+ /**
85
+ * Öffnet das Popup programmatisch
86
+ */
87
+ showPopup() {
88
+ this._activatePopup();
89
+ }
90
+ /**
91
+ * Schließt das Popup programmatisch
92
+ */
93
+ hidePopup() {
94
+ this._closePopup();
95
+ }
96
+ render() {
97
+ return html`
98
+ <span @click=${this._activatePopup} @keypress=${this._activatePopup}>
99
+ <slot name="small-view"></slot>
100
+ </span>
101
+
102
+ <div id="modalId" class="modal">
103
+ <div class="modal-content">
104
+ <pd-icon
105
+ icon=${pdIcons.ICON_CLOSE}
106
+ class="close-icon"
107
+ @click=${this._closePopup}
108
+ ></pd-icon>
109
+ <div class="modal-content-slot">
110
+ <slot name="content"></slot>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ `;
115
+ }
116
+ _activatePopup() {
117
+ const modal = this.shadowRoot?.getElementById("modalId");
118
+ if (modal) modal.style.display = "block";
119
+ }
120
+ _closePopup() {
121
+ const modal = this.shadowRoot?.getElementById("modalId");
122
+ if (modal) modal.style.display = "none";
123
+ this.dispatchEvent(
124
+ new CustomEvent("popup-close", {
125
+ bubbles: true,
126
+ composed: true
127
+ })
128
+ );
129
+ }
130
+ }
131
+ __decorateClass([
132
+ property({ type: Boolean })
133
+ ], PdPopup.prototype, "closeByEscape");
134
+
135
+ export { PdPopup };
@@ -0,0 +1,3 @@
1
+ import { PdPopup } from './PdPopup.js';
2
+ export { PdPopup };
3
+ //# sourceMappingURL=pd-popup.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-popup.d.ts","sourceRoot":"","sources":["../../src/pd-popup/pd-popup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOvC,OAAO,EAAE,OAAO,EAAE,CAAC"}
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/web-components';
2
2
  declare const meta: {
3
3
  title: string;
4
4
  component: string;
5
- render: ({ smallViewSlot, contentSlot }: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
5
+ render: ({ smallViewSlot, contentSlot }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
6
6
  argTypes: {
7
7
  smallViewSlot: {
8
8
  control: "text";
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-popup.stories.d.ts","sourceRoot":"","sources":["../../src/pd-popup/pd-popup.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,eAAe,CAAC;AAGvB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAqBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAUjC,CAAC"}
@@ -0,0 +1,37 @@
1
+ import { LitElement, CSSResultGroup } from 'lit';
2
+ import { PdDialogButton } from '../types';
3
+ /**
4
+ * @tagname pd-popup-dialog
5
+ */
6
+ export declare class PdPopupDialog extends LitElement {
7
+ /**
8
+ * Typ des Popups: info | warn | error | help
9
+ */
10
+ type: string;
11
+ /**
12
+ * Titel, der im Header angezeigt wird
13
+ */
14
+ title: string;
15
+ /**
16
+ * Konfigurierbare Buttons mit Text, Key und optionalem Status
17
+ */
18
+ buttons: PdDialogButton[];
19
+ closeByEscape: boolean;
20
+ static styles: CSSResultGroup;
21
+ connectedCallback(): void;
22
+ disconnectedCallback(): void;
23
+ render(): import('lit').TemplateResult<1>;
24
+ private _onButtonClick;
25
+ private _renderIcon;
26
+ /**
27
+ * Öffnet das Popup-Dialog manuell
28
+ */
29
+ showPopup(): void;
30
+ /**
31
+ * Schließt das Popup-Dialog manuell
32
+ */
33
+ hidePopup(): void;
34
+ private _setModalDisplay;
35
+ private _handleKeyDown;
36
+ }
37
+ //# sourceMappingURL=PdPopupDialog.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PdPopupDialog.d.ts","sourceRoot":"","sources":["../../src/pd-popup-dialog/PdPopupDialog.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,OAAO,mDAAmD,CAAC;AAC3D,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;GAEG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAU;IAEtB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAiB;IAE9B;;OAEG;IAEH,OAAO,EAAE,cAAc,EAAE,CAAM;IAG/B,aAAa,EAAE,OAAO,CAAS;IAE/B,OAAgB,MAAM,EAAE,cAAc,CA6HpC;IAEO,iBAAiB;IAOjB,oBAAoB;IAOpB,MAAM;IA6Bf,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;IA0BnB;;OAEG;IACI,SAAS;IAIhB;;OAEG;IACI,SAAS;IAIhB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,cAAc,CAEpB;CACH"}
@@ -0,0 +1,261 @@
1
+ import { LitElement, css, html } from 'lit';
2
+ import { property } from 'lit/decorators.js';
3
+ import '@progressive-development/pd-forms/pd-panel-button';
4
+ import '@progressive-development/pd-icon/pd-icon';
5
+
6
+ var __defProp = Object.defineProperty;
7
+ var __decorateClass = (decorators, target, key, kind) => {
8
+ var result = void 0 ;
9
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
10
+ if (decorator = decorators[i])
11
+ result = (decorator(target, key, result) ) || result;
12
+ if (result) __defProp(target, key, result);
13
+ return result;
14
+ };
15
+ class PdPopupDialog extends LitElement {
16
+ constructor() {
17
+ super(...arguments);
18
+ this.type = "info";
19
+ this.title = "Popup Title";
20
+ this.buttons = [];
21
+ this.closeByEscape = false;
22
+ this._handleKeyDown = (e) => {
23
+ if (e.key === "Escape") this.hidePopup();
24
+ };
25
+ }
26
+ static {
27
+ this.styles = [
28
+ css`
29
+ :host {
30
+ display: block;
31
+ }
32
+
33
+ .modal {
34
+ position: fixed;
35
+ box-sizing: border-box;
36
+
37
+ z-index: 100;
38
+ left: 0;
39
+ top: 0;
40
+ width: 100%;
41
+ height: 100%;
42
+ overflow: auto;
43
+ background-color: var(
44
+ --pd-popup-modal-bg-rgba,
45
+ rgba(175, 193, 210, 0.8)
46
+ );
47
+ display: block;
48
+ padding: 1rem;
49
+
50
+ max-width: 100vw;
51
+ overflow-x: hidden;
52
+ }
53
+
54
+ .modal-content {
55
+ position: relative;
56
+ top: 50%;
57
+ transform: translateY(-50%);
58
+ margin: 0 auto;
59
+ padding: 0;
60
+ width: 100%;
61
+ max-width: var(--pd-popup-max-width, 700px);
62
+ border-radius: var(--pd-border-radius, 8px);
63
+ border: 1px solid var(--pd-default-light-col);
64
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
65
+ background: white;
66
+ }
67
+
68
+ .header {
69
+ display: flex;
70
+ gap: 0.5em;
71
+ align-items: center;
72
+ background-color: var(--pd-popup-header-col, var(--pd-default-col));
73
+ height: var(--pd-popup-header-height, 45px);
74
+ padding: 0.5rem;
75
+
76
+ border-top-left-radius: var(--pd-border-radius, 8px);
77
+ border-top-right-radius: var(--pd-border-radius, 8px);
78
+ }
79
+
80
+ .header-txt {
81
+ font-family: var(--pd-default-font-title-family);
82
+ font-size: var(--pd-popup-header-font-size, 1.3em);
83
+ color: var(--pd-popup-header-font-col, var(--pd-default-bg-col));
84
+ }
85
+
86
+ .info-logo {
87
+ width: 2em;
88
+ }
89
+
90
+ .error {
91
+ --pd-icon-col: var(--pd-default-error-col);
92
+ }
93
+
94
+ .info,
95
+ .help {
96
+ --pd-icon-col: #6b86ff;
97
+ }
98
+
99
+ .warn {
100
+ --pd-icon-col: #ffbf00;
101
+ }
102
+
103
+ .content {
104
+ padding: 1em;
105
+ background-color: var(
106
+ --pd-popup-header-font-col,
107
+ var(--pd-default-bg-col)
108
+ );
109
+ height: 100%;
110
+ }
111
+
112
+ .footer {
113
+ display: flex;
114
+ background: linear-gradient(
115
+ to right,
116
+ var(--pd-popup-footer-col, var(--pd-default-light-col)) 0%,
117
+ var(--pd-default-disabled-light-col) 100%
118
+ );
119
+ align-items: center;
120
+ justify-content: space-around;
121
+
122
+ padding: 1em;
123
+
124
+ border-bottom-left-radius: var(--pd-border-radius, 8px);
125
+ border-bottom-right-radius: var(--pd-border-radius, 8px);
126
+
127
+ --pd-icon-button-width: 100%;
128
+ }
129
+
130
+ .footer pd-panel-button {
131
+ width: 38%;
132
+ }
133
+
134
+ @media (max-width: 640px) {
135
+ .footer {
136
+ --pd-icon-button-font-size: 100%;
137
+ }
138
+ }
139
+
140
+ @media (max-width: 500px) {
141
+ .footer {
142
+ flex-direction: column;
143
+ gap: 0.5rem;
144
+ padding: 1rem;
145
+ }
146
+
147
+ .footer pd-panel-button {
148
+ width: 90%;
149
+ }
150
+ }
151
+ `
152
+ ];
153
+ }
154
+ connectedCallback() {
155
+ super.connectedCallback();
156
+ if (this.closeByEscape) {
157
+ document.addEventListener("keydown", this._handleKeyDown);
158
+ }
159
+ }
160
+ disconnectedCallback() {
161
+ super.disconnectedCallback();
162
+ if (this.closeByEscape) {
163
+ document.removeEventListener("keydown", this._handleKeyDown);
164
+ }
165
+ }
166
+ render() {
167
+ return html`
168
+ <div id="modalId" class="modal">
169
+ <div class="modal-content">
170
+ <div class="header">
171
+ ${this._renderIcon()}
172
+ <span class="header-txt">${this.title}</span>
173
+ </div>
174
+ <div class="content">
175
+ <slot name="content"></slot>
176
+ </div>
177
+ <div class="footer">
178
+ ${this.buttons.map(
179
+ (bt) => html`
180
+ <pd-panel-button
181
+ data-key=${bt.key}
182
+ buttonText=${bt.name}
183
+ ?disabled=${bt.disabled}
184
+ ?primary=${bt.primary}
185
+ @button-clicked=${this._onButtonClick}
186
+ ></pd-panel-button>
187
+ `
188
+ )}
189
+ </div>
190
+ </div>
191
+ </div>
192
+ `;
193
+ }
194
+ _onButtonClick(e) {
195
+ const key = e.target.dataset.key;
196
+ this.dispatchEvent(
197
+ new CustomEvent("submit-button-clicked", {
198
+ detail: { button: key },
199
+ bubbles: true,
200
+ composed: true
201
+ })
202
+ );
203
+ }
204
+ _renderIcon() {
205
+ switch (this.type) {
206
+ case "warn":
207
+ return html`<pd-icon
208
+ icon="warningIconFld"
209
+ class="info-logo warn"
210
+ ></pd-icon>`;
211
+ case "error":
212
+ return html`<pd-icon
213
+ icon="errorIconFld"
214
+ class="info-logo error"
215
+ ></pd-icon>`;
216
+ case "help":
217
+ return html`<pd-icon
218
+ icon="helpIconFld"
219
+ class="info-logo help"
220
+ ></pd-icon>`;
221
+ case "info":
222
+ default:
223
+ return html`<pd-icon
224
+ icon="infoIconFld"
225
+ class="info-logo info"
226
+ ></pd-icon>`;
227
+ }
228
+ }
229
+ /**
230
+ * Öffnet das Popup-Dialog manuell
231
+ */
232
+ showPopup() {
233
+ this._setModalDisplay(true);
234
+ }
235
+ /**
236
+ * Schließt das Popup-Dialog manuell
237
+ */
238
+ hidePopup() {
239
+ this._setModalDisplay(false);
240
+ }
241
+ _setModalDisplay(visible) {
242
+ const modal = this.shadowRoot?.getElementById("modalId");
243
+ if (modal) {
244
+ modal.style.display = visible ? "block" : "none";
245
+ }
246
+ }
247
+ }
248
+ __decorateClass([
249
+ property({ type: String })
250
+ ], PdPopupDialog.prototype, "type");
251
+ __decorateClass([
252
+ property({ type: String })
253
+ ], PdPopupDialog.prototype, "title");
254
+ __decorateClass([
255
+ property({ type: Array })
256
+ ], PdPopupDialog.prototype, "buttons");
257
+ __decorateClass([
258
+ property({ type: Boolean })
259
+ ], PdPopupDialog.prototype, "closeByEscape");
260
+
261
+ export { PdPopupDialog };
@@ -0,0 +1,3 @@
1
+ import { PdPopupDialog } from './PdPopupDialog.js';
2
+ export { PdPopupDialog };
3
+ //# sourceMappingURL=pd-popup-dialog.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-popup-dialog.d.ts","sourceRoot":"","sources":["../../src/pd-popup-dialog/pd-popup-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOnD,OAAO,EAAE,aAAa,EAAE,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import { StoryObj } from '@storybook/web-components';
2
2
  declare const meta: {
3
3
  title: string;
4
- render: ({ title, type, buttons }: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
4
+ render: ({ title, type, buttons }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
5
5
  argTypes: {
6
6
  title: {
7
7
  control: "text";
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-popup-dialog.stories.d.ts","sourceRoot":"","sources":["../../src/pd-popup-dialog/pd-popup-dialog.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,OAAO,sBAAsB,CAAC;AAE9B,QAAA,MAAM,IAAI;;;;;;;;;;;;CAcM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAOtB,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC"}
@@ -1,34 +1,2 @@
1
- import { LitElement, CSSResultGroup } from 'lit';
2
- import { PdDialogButton } from './types';
3
- export declare class PdPopupDialog extends LitElement {
4
- /**
5
- * Typ des Popups: info | warn | error | help
6
- */
7
- type: string;
8
- /**
9
- * Titel, der im Header angezeigt wird
10
- */
11
- title: string;
12
- /**
13
- * Konfigurierbare Buttons mit Text, Key und optionalem Status
14
- */
15
- buttons: PdDialogButton[];
16
- closeByEscape: boolean;
17
- static styles: CSSResultGroup;
18
- connectedCallback(): void;
19
- disconnectedCallback(): void;
20
- render(): import('lit-html').TemplateResult<1>;
21
- private _onButtonClick;
22
- private _renderIcon;
23
- /**
24
- * Öffnet das Popup-Dialog manuell
25
- */
26
- showPopup(): void;
27
- /**
28
- * Schließt das Popup-Dialog manuell
29
- */
30
- hidePopup(): void;
31
- private _setModalDisplay;
32
- private _handleKeyDown;
33
- }
34
- //# sourceMappingURL=pd-popup-dialog.d.ts.map
1
+ export * from './pd-popup-dialog/pd-popup-dialog'
2
+ export {}