@progressive-development/pd-content 0.5.9 → 0.6.1

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 (58) hide show
  1. package/dist/generated/locale-codes.d.ts +14 -0
  2. package/dist/generated/locale-codes.d.ts.map +1 -0
  3. package/dist/generated/locales/be.d.ts +5 -0
  4. package/dist/generated/locales/be.d.ts.map +1 -0
  5. package/dist/generated/locales/de.d.ts +5 -0
  6. package/dist/generated/locales/de.d.ts.map +1 -0
  7. package/dist/generated/locales/en.d.ts +5 -0
  8. package/dist/generated/locales/en.d.ts.map +1 -0
  9. package/dist/index.d.ts +10 -0
  10. package/dist/index.d.ts.map +1 -0
  11. package/dist/index.js +5 -5
  12. package/dist/locales/be.d.ts +2 -0
  13. package/dist/locales/de.d.ts +2 -0
  14. package/dist/locales/en.d.ts +2 -0
  15. package/dist/pd-box-view.d.ts +6 -0
  16. package/dist/pd-box-view.d.ts.map +1 -0
  17. package/dist/pd-box-view.js +33 -4
  18. package/dist/pd-collapse.d.ts +31 -0
  19. package/dist/pd-collapse.d.ts.map +1 -0
  20. package/dist/pd-collapse.js +151 -4
  21. package/dist/pd-edit-content.d.ts +29 -0
  22. package/dist/pd-edit-content.d.ts.map +1 -0
  23. package/dist/pd-edit-content.js +224 -4
  24. package/dist/pd-more-info.d.ts +23 -0
  25. package/dist/pd-more-info.d.ts.map +1 -0
  26. package/dist/pd-more-info.js +83 -4
  27. package/dist/pd-panel-viewer.d.ts +17 -0
  28. package/dist/pd-panel-viewer.d.ts.map +1 -0
  29. package/dist/pd-panel-viewer.js +207 -0
  30. package/dist/pd-panel.d.ts +6 -0
  31. package/dist/pd-panel.d.ts.map +1 -0
  32. package/dist/pd-panel.js +48 -0
  33. package/dist/pd-resize-content.d.ts +25 -0
  34. package/dist/pd-resize-content.d.ts.map +1 -0
  35. package/dist/pd-resize-content.js +64 -4
  36. package/dist/pd-tab.d.ts +19 -0
  37. package/dist/pd-tab.d.ts.map +1 -0
  38. package/dist/pd-tab.js +182 -0
  39. package/dist/stories/pd-box-view.stories.d.ts +10 -0
  40. package/dist/stories/pd-box-view.stories.d.ts.map +1 -0
  41. package/dist/stories/pd-collapse.stories.d.ts +21 -0
  42. package/dist/stories/pd-collapse.stories.d.ts.map +1 -0
  43. package/dist/stories/pd-edit-content.stories.d.ts +11 -0
  44. package/dist/stories/pd-edit-content.stories.d.ts.map +1 -0
  45. package/dist/stories/pd-more-info.stories.d.ts +6 -0
  46. package/dist/stories/pd-more-info.stories.d.ts.map +1 -0
  47. package/dist/stories/pd-resize-content.stories.d.ts +5 -0
  48. package/dist/stories/pd-resize-content.stories.d.ts.map +1 -0
  49. package/dist/stories/pd-tab.stories.d.ts +23 -0
  50. package/dist/stories/pd-tab.stories.d.ts.map +1 -0
  51. package/dist/types.d.ts +21 -0
  52. package/dist/types.d.ts.map +1 -0
  53. package/package.json +34 -45
  54. package/dist/src/PdBoxView.js +0 -24
  55. package/dist/src/PdCollapse.js +0 -135
  56. package/dist/src/PdEditContent.js +0 -223
  57. package/dist/src/PdMoreInfo.js +0 -77
  58. package/dist/src/PdResizeContent.js +0 -67
@@ -0,0 +1,14 @@
1
+ /**
2
+ * The locale code that templates in this source code are written in.
3
+ */
4
+ export declare const sourceLocale = "dev";
5
+ /**
6
+ * The other locale codes that this application is localized into. Sorted
7
+ * lexicographically.
8
+ */
9
+ export declare const targetLocales: readonly ["be", "de", "en"];
10
+ /**
11
+ * All valid project locale codes. Sorted lexicographically.
12
+ */
13
+ export declare const allLocales: readonly ["be", "de", "dev", "en"];
14
+ //# sourceMappingURL=locale-codes.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"locale-codes.d.ts","sourceRoot":"","sources":["../../src/generated/locale-codes.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,YAAY,QAAQ,CAAC;AAElC;;;GAGG;AACH,eAAO,MAAM,aAAa,6BAA8B,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,UAAU,oCAAqC,CAAC"}
@@ -0,0 +1,5 @@
1
+ export declare const templates: {
2
+ "pd.moreInfo.less": string;
3
+ "pd.moreInfo.more": string;
4
+ };
5
+ //# sourceMappingURL=be.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"be.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/be.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;CAGrB,CAAC"}
@@ -0,0 +1,5 @@
1
+ export declare const templates: {
2
+ "pd.moreInfo.more": string;
3
+ "pd.moreInfo.less": string;
4
+ };
5
+ //# sourceMappingURL=de.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"de.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/de.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;CAGrB,CAAC"}
@@ -0,0 +1,5 @@
1
+ export declare const templates: {
2
+ "pd.moreInfo.less": string;
3
+ "pd.moreInfo.more": string;
4
+ };
5
+ //# sourceMappingURL=en.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/en.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;CAGrB,CAAC"}
@@ -0,0 +1,10 @@
1
+ export { PdBoxView } from './pd-box-view.js';
2
+ export { PdCollapse } from './pd-collapse.js';
3
+ export { PdEditContent } from './pd-edit-content.js';
4
+ export { PdMoreInfo } from './pd-more-info.js';
5
+ export { PdResizeContent } from './pd-resize-content.js';
6
+ export type { PdCollapseToggleEventDetail, PdEditLink } from './types.js';
7
+ export { templates as beTemplates } from './generated/locales/be.js';
8
+ export { templates as deTemplates } from './generated/locales/de.js';
9
+ export { templates as enTemplates } from './generated/locales/en.js';
10
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,YAAY,EAAE,2BAA2B,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE1E,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,8 +1,8 @@
1
- import { PdBoxView } from "./src/PdBoxView.js";
2
- import { PdCollapse } from "./src/PdCollapse.js";
3
- import { PdEditContent } from "./src/PdEditContent.js";
4
- import { PdMoreInfo } from "./src/PdMoreInfo.js";
5
- import { PdResizeContent } from "./src/PdResizeContent.js";
1
+ import { PdBoxView } from "./pd-box-view.js";
2
+ import { PdCollapse } from "./pd-collapse.js";
3
+ import { PdEditContent } from "./pd-edit-content.js";
4
+ import { PdMoreInfo } from "./pd-more-info.js";
5
+ import { PdResizeContent } from "./pd-resize-content.js";
6
6
  import { templates } from "./locales/be.js";
7
7
  import { templates as templates2 } from "./locales/de.js";
8
8
  import { templates as templates3 } from "./locales/en.js";
@@ -0,0 +1,2 @@
1
+ export * from '../generated/locales/be'
2
+ export {}
@@ -0,0 +1,2 @@
1
+ export * from '../generated/locales/de'
2
+ export {}
@@ -0,0 +1,2 @@
1
+ export * from '../generated/locales/en'
2
+ export {}
@@ -0,0 +1,6 @@
1
+ import { LitElement, CSSResultGroup } from 'lit';
2
+ export declare class PdBoxView extends LitElement {
3
+ static styles: CSSResultGroup;
4
+ render(): import('lit-html').TemplateResult<1>;
5
+ }
6
+ //# sourceMappingURL=pd-box-view.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-box-view.d.ts","sourceRoot":"","sources":["../src/pd-box-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,EAAE,cAAc,CAWpC;IAEO,MAAM;CAGhB"}
@@ -1,4 +1,33 @@
1
- import { PdBoxView } from "./src/PdBoxView.js";
2
- if (!customElements.get("pd-box-view")) {
3
- window.customElements.define("pd-box-view", PdBoxView);
4
- }
1
+ import { css, LitElement, html } from "lit";
2
+ import { customElement } from "lit/decorators.js";
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __decorateClass = (decorators, target, key, kind) => {
5
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
6
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
7
+ if (decorator = decorators[i])
8
+ result = decorator(result) || result;
9
+ return result;
10
+ };
11
+ let PdBoxView = class extends LitElement {
12
+ render() {
13
+ return html` <slot></slot> `;
14
+ }
15
+ };
16
+ PdBoxView.styles = [
17
+ css`
18
+ :host {
19
+ display: grid;
20
+ grid-template-columns: repeat(
21
+ var(--pd-box-columns, 4),
22
+ minmax(var(--pd-box-min-width, 100px), 1fr)
23
+ );
24
+ gap: var(--pd-box-gap, 25px);
25
+ }
26
+ `
27
+ ];
28
+ PdBoxView = __decorateClass([
29
+ customElement("pd-box-view")
30
+ ], PdBoxView);
31
+ export {
32
+ PdBoxView
33
+ };
@@ -0,0 +1,31 @@
1
+ import { CSSResultGroup, LitElement } from 'lit';
2
+ /**
3
+ * Ein auf- und zuklappbarer Bereich mit Header und Inhalt.
4
+ *
5
+ * @fires toggle-accordion - Wird ausgelöst, wenn der Zustand gewechselt wird (true/false).
6
+ *
7
+ * @slot header - Slot für den sichtbaren Headerbereich
8
+ * @slot content - Slot für den Inhalt, der ein- und ausgeklappt wird
9
+ */
10
+ export declare class PdCollapse extends LitElement {
11
+ /**
12
+ * Gibt an, ob der Bereich geöffnet ist.
13
+ */
14
+ active: boolean;
15
+ /**
16
+ * Optionales Icon für den Toggle Button (standardmäßig `ICON_TOGGLE_COLLAPSE`)
17
+ */
18
+ icon: string;
19
+ static styles: CSSResultGroup;
20
+ /**
21
+ * Öffnet den Collapse-Bereich
22
+ */
23
+ open(): void;
24
+ /**
25
+ * Schließt den Collapse-Bereich
26
+ */
27
+ close(): void;
28
+ private _onClick;
29
+ render(): import('lit-html').TemplateResult<1>;
30
+ }
31
+ //# sourceMappingURL=pd-collapse.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-collapse.d.ts","sourceRoot":"","sources":["../src/pd-collapse.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,0CAA0C,CAAC;AAOlD;;;;;;;GAOG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAgC;IAE5C,OAAgB,MAAM,EAAE,cAAc,CA4EpC;IAEF;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,QAAQ;IAWP,MAAM;CAkBhB"}
@@ -1,4 +1,151 @@
1
- import { PdCollapse } from "./src/PdCollapse.js";
2
- if (!customElements.get("pd-collapse")) {
3
- window.customElements.define("pd-collapse", PdCollapse);
4
- }
1
+ import { css, LitElement, html } from "lit";
2
+ import { property, customElement } from "lit/decorators.js";
3
+ import { pdIcons } from "@progressive-development/pd-icon";
4
+ import "@progressive-development/pd-icon/pd-icon";
5
+ import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
6
+ var __defProp = Object.defineProperty;
7
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
8
+ var __decorateClass = (decorators, target, key, kind) => {
9
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
10
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
11
+ if (decorator = decorators[i])
12
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
13
+ if (kind && result) __defProp(target, key, result);
14
+ return result;
15
+ };
16
+ let PdCollapse = class extends LitElement {
17
+ constructor() {
18
+ super(...arguments);
19
+ this.active = false;
20
+ this.icon = pdIcons.ICON_TOGGLE_COLLAPSE;
21
+ }
22
+ /**
23
+ * Öffnet den Collapse-Bereich
24
+ */
25
+ open() {
26
+ this.active = true;
27
+ }
28
+ /**
29
+ * Schließt den Collapse-Bereich
30
+ */
31
+ close() {
32
+ this.active = false;
33
+ }
34
+ _onClick() {
35
+ this.active = !this.active;
36
+ this.dispatchEvent(
37
+ new CustomEvent("toggle-accordion", {
38
+ bubbles: true,
39
+ composed: true,
40
+ detail: this.active
41
+ })
42
+ );
43
+ }
44
+ render() {
45
+ return html`
46
+ <div
47
+ class="trigger ${this.active ? "open" : "closed"}"
48
+ @click=${this._onClick}
49
+ >
50
+ <slot name="header"></slot>
51
+ <pd-icon
52
+ icon=${this.icon}
53
+ ?activeIcon=${this.active}
54
+ class="small primary"
55
+ ></pd-icon>
56
+ </div>
57
+ <div class="content ${this.active ? "open" : "closed"}">
58
+ <slot name="content"></slot>
59
+ </div>
60
+ `;
61
+ }
62
+ };
63
+ PdCollapse.styles = [
64
+ PdColorStyles,
65
+ PdFontStyles,
66
+ css`
67
+ :host {
68
+ display: block;
69
+ width: 100%;
70
+ position: relative;
71
+ overflow: visible;
72
+ }
73
+
74
+ :host .content.open {
75
+ border: 2px solid var(--pd-default-light-col);
76
+ background: var(--pd-collapse-content-bg-col, var(--pd-default-bg-col));
77
+ margin-bottom: 1rem;
78
+ position: relative;
79
+ overflow: visible;
80
+ }
81
+
82
+ pd-icon {
83
+ --pd-icon-stroke-col-active: var(--pd-default-bg-col);
84
+ --pd-icon-col-active: var(--pd-default-dark-col);
85
+ --pd-icon-col-hover: var(--pd-default-dark-col);
86
+ --pd-icon-stroke-col-hover: var(--pd-default-hover-col);
87
+ --pd-icon-col-active-hover: var(--pd-default-dark-col);
88
+ --pd-icon-stroke-col-active-hover: var(--pd-default-hover-col);
89
+ }
90
+
91
+ .trigger {
92
+ background: var(--pd-collapse-bg-col, var(--pd-default-col));
93
+ font-family: var(--pd-default-font-title-family);
94
+ font-weight: bold;
95
+ color: var(--pd-collapse-font-col, var(--pd-default-bg-col));
96
+ transition-property: box-shadow, background;
97
+ transition: 0.2s ease-in;
98
+ cursor: pointer;
99
+ font-size: var(--pd-collapse-header-font-size, 1rem);
100
+ padding: 0.5rem;
101
+ display: flex;
102
+ justify-content: space-between;
103
+ box-sizing: border-box;
104
+ position: relative;
105
+ }
106
+
107
+ ::slotted(.header) {
108
+ display: flex;
109
+ align-items: center;
110
+ }
111
+
112
+ .trigger:hover {
113
+ background: var(--pd-collapse-hover-col, var(--pd-default-dark-col));
114
+ }
115
+
116
+ .trigger.closed {
117
+ margin-bottom: 1rem;
118
+ }
119
+
120
+ .content {
121
+ will-change: transform;
122
+ height: 0;
123
+ overflow: hidden;
124
+ transition-property: visibility, transform;
125
+ transition-duration: 0.2s;
126
+ visibility: hidden;
127
+ transform: translate3d(0, -100%, 0);
128
+ box-sizing: border-box;
129
+ padding: 0.5em;
130
+ }
131
+
132
+ .content.open {
133
+ visibility: visible;
134
+ height: auto;
135
+ transform: translate3d(0, 0, 0);
136
+ overflow-y: auto;
137
+ }
138
+ `
139
+ ];
140
+ __decorateClass([
141
+ property({ type: Boolean })
142
+ ], PdCollapse.prototype, "active", 2);
143
+ __decorateClass([
144
+ property({ type: String })
145
+ ], PdCollapse.prototype, "icon", 2);
146
+ PdCollapse = __decorateClass([
147
+ customElement("pd-collapse")
148
+ ], PdCollapse);
149
+ export {
150
+ PdCollapse
151
+ };
@@ -0,0 +1,29 @@
1
+ import { LitElement, CSSResultGroup } from 'lit';
2
+ import { PdEditContentDataEntry, PdEditLink } from './types';
3
+ export declare class PdEditContent extends LitElement {
4
+ /**
5
+ * Aktuelle Schritt-Nummer (z.B. im Wizard)
6
+ */
7
+ stepNumber?: number;
8
+ /**
9
+ * Titel des Abschnitts
10
+ */
11
+ contentTitle: string;
12
+ /**
13
+ * Datenobjekte mit Label + Wert
14
+ */
15
+ data: Array<PdEditContentDataEntry>;
16
+ /**
17
+ * Liste an editierbaren Links mit Icons
18
+ */
19
+ editLinks: PdEditLink[];
20
+ /**
21
+ * Bearbeitung generell deaktivieren
22
+ */
23
+ editDisabled: boolean;
24
+ static styles: CSSResultGroup;
25
+ render(): import('lit-html').TemplateResult<1>;
26
+ private static _getLinkLogo;
27
+ private _editContent;
28
+ }
29
+ //# sourceMappingURL=pd-edit-content.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-edit-content.d.ts","sourceRoot":"","sources":["../src/pd-edit-content.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5D,OAAO,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAuB7D,qBACa,aAAc,SAAQ,UAAU;IAC3C;;OAEG;IAEH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,IAAI,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAM;IAEzC;;OAEG;IAEH,SAAS,EAAE,UAAU,EAAE,CAAM;IAE7B;;OAEG;IAEH,YAAY,UAAS;IAErB,OAAgB,MAAM,EAAE,cAAc,CAoGpC;IAEO,MAAM;IAmDf,OAAO,CAAC,MAAM,CAAC,YAAY;IAM3B,OAAO,CAAC,YAAY;CAUrB"}
@@ -1,4 +1,224 @@
1
- import { PdEditContent } from "./src/PdEditContent.js";
2
- if (!customElements.get("pd-edit-content")) {
3
- window.customElements.define("pd-edit-content", PdEditContent);
4
- }
1
+ import { html, css, LitElement } from "lit";
2
+ import { property, customElement } from "lit/decorators.js";
3
+ import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __decorateClass = (decorators, target, key, kind) => {
7
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
8
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
9
+ if (decorator = decorators[i])
10
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
11
+ if (kind && result) __defProp(target, key, result);
12
+ return result;
13
+ };
14
+ const editIcon = html`<svg
15
+ class="edit"
16
+ viewBox="0 0 19 19"
17
+ xmlns="http://www.w3.org/2000/svg"
18
+ >
19
+ <g>
20
+ <path
21
+ d="M8.44,7.25C8.348,7.342,8.277,7.447,8.215,7.557L8.174,7.516L8.149,7.69 C8.049,7.925,8.014,8.183,8.042,8.442l-0.399,2.796l2.797-0.399c0.259,0.028,0.517-0.007,0.752-0.107l0.174-0.024l-0.041-0.041 c0.109-0.062,0.215-0.133,0.307-0.225l5.053-5.053l-3.191-3.191L8.44,7.25z"
22
+ fill="var(--edit-fill-color)"
23
+ />
24
+ <path
25
+ d="M18.183,1.568l-0.87-0.87c-0.641-0.641-1.637-0.684-2.225-0.097l-0.797,0.797l3.191,3.191l0.797-0.798 C18.867,3.205,18.824,2.209,18.183,1.568z"
26
+ fill="var(--edit-fill-color)"
27
+ />
28
+ <path
29
+ d="M15,9.696V17H2V2h8.953l1.523-1.42c0.162-0.161,0.353-0.221,0.555-0.293 c0.043-0.119,0.104-0.18,0.176-0.287H0v19h17V7.928L15,9.696z"
30
+ fill="var(--edit-fill-color)"
31
+ />
32
+ </g>
33
+ </svg>`;
34
+ let PdEditContent = class extends LitElement {
35
+ constructor() {
36
+ super(...arguments);
37
+ this.contentTitle = "";
38
+ this.data = [];
39
+ this.editLinks = [];
40
+ this.editDisabled = false;
41
+ }
42
+ render() {
43
+ var _a;
44
+ return html`
45
+ <div class="header">
46
+ ${this.stepNumber ? html`
47
+ <div class="circle">
48
+ <span class="step-number">${this.stepNumber}</span>
49
+ </div>
50
+ ` : null}
51
+ <h4>${this.contentTitle}</h4>
52
+ </div>
53
+ <div>
54
+ ${((_a = this.data) == null ? void 0 : _a.length) ? html`
55
+ <div class="param-data">
56
+ ${this.data.map(
57
+ (entry) => html`<div>
58
+ <span class="label">${entry.name}</span>
59
+ <span class="value">${entry.val}</span>
60
+ </div>`
61
+ )}
62
+ </div>
63
+ ` : null}
64
+ <slot></slot>
65
+ <div class="link-row">
66
+ ${!this.editDisabled ? html`
67
+ <a @click="${this._editContent}">
68
+ <div class="link-item">
69
+ ${editIcon} Bewerk ${this.contentTitle}
70
+ </div>
71
+ </a>
72
+ ` : null}
73
+ ${this.editLinks.map(
74
+ (link) => html`
75
+ <a data-link="${link.key}" @click="${this._editContent}">
76
+ <div class="link-item">
77
+ ${PdEditContent._getLinkLogo(link)} ${link.txt}
78
+ </div>
79
+ </a>
80
+ `
81
+ )}
82
+ </div>
83
+ </div>
84
+ `;
85
+ }
86
+ static _getLinkLogo(link) {
87
+ if (link.icon) return link.icon;
88
+ if (link.defaultIcon) return editIcon;
89
+ return "";
90
+ }
91
+ _editContent(e) {
92
+ var _a, _b;
93
+ const link = (_b = (_a = e.currentTarget) == null ? void 0 : _a.dataset) == null ? void 0 : _b.link;
94
+ this.dispatchEvent(
95
+ new CustomEvent("edit-content", {
96
+ detail: { step: this.stepNumber, link },
97
+ bubbles: true,
98
+ composed: true
99
+ })
100
+ );
101
+ }
102
+ };
103
+ PdEditContent.styles = [
104
+ PdColorStyles,
105
+ PdFontStyles,
106
+ css`
107
+ :host {
108
+ display: block;
109
+ }
110
+
111
+ h4 {
112
+ font-family: var(--pd-default-font-title-family);
113
+ font-size: var(--pd-ec-font-title-size, 1.2em);
114
+ margin: 0 0 2px 0;
115
+ line-height: 40px;
116
+ color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
117
+ padding-left: 5px;
118
+ }
119
+
120
+ .header {
121
+ display: flex;
122
+ gap: 5px;
123
+ background-color: var(--pd-ec-bg-col, var(--pd-default-col));
124
+ align-items: center;
125
+ }
126
+
127
+ .circle {
128
+ margin-left: 5px;
129
+ display: flex;
130
+ align-items: center;
131
+ justify-content: center;
132
+ width: 27px;
133
+ height: 27px;
134
+ border-radius: 50%;
135
+ background-color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
136
+ }
137
+
138
+ .step-number {
139
+ font-family: var(--pd-default-font-title-family);
140
+ font-size: var(--pd-ec-font-title-size, 1.2em);
141
+ font-weight: var(--pd-ec-nr-font-weight, bold);
142
+ color: var(--pd-ec-bg-col, var(--pd-default-col));
143
+ }
144
+
145
+ .label {
146
+ display: inline-block;
147
+ font-weight: bold;
148
+ width: 200px;
149
+ padding-top: 10px;
150
+ }
151
+
152
+ a {
153
+ cursor: pointer;
154
+ font-family: var(--pd-default-font-link-family);
155
+ font-size: var(--pd-default-font-link-size);
156
+ color: var(--pd-default-font-link-col);
157
+ --edit-fill-color: var(--pd-default-font-link-col);
158
+ }
159
+
160
+ a:hover {
161
+ color: var(--pd-default-font-link-col-hover);
162
+ --edit-fill-color: var(--pd-default-font-link-col-hover);
163
+ }
164
+
165
+ .edit {
166
+ width: 1.1em;
167
+ }
168
+
169
+ /*
170
+ could used as class for given svg icons, workaround class
171
+ hard coded for specific icon => maybe use custom properties here, but not for that hack...
172
+ */
173
+ .own-edit-icon {
174
+ width: 2em;
175
+ margin-top: -10px;
176
+ }
177
+
178
+ .link-row {
179
+ padding: 5px 0;
180
+ display: flex;
181
+ flex-wrap: wrap;
182
+ gap: 15px;
183
+ }
184
+
185
+ .link-item {
186
+ display: flex;
187
+ gap: 2px;
188
+ white-space: nowrap;
189
+ align-items: center;
190
+ pointer-events: none;
191
+ }
192
+
193
+ .param-data {
194
+ padding-bottom: 10px;
195
+ }
196
+
197
+ @media (max-width: 360px) {
198
+ .label {
199
+ width: 130px;
200
+ }
201
+ }
202
+ `
203
+ ];
204
+ __decorateClass([
205
+ property({ type: Number })
206
+ ], PdEditContent.prototype, "stepNumber", 2);
207
+ __decorateClass([
208
+ property({ type: String })
209
+ ], PdEditContent.prototype, "contentTitle", 2);
210
+ __decorateClass([
211
+ property({ type: Array })
212
+ ], PdEditContent.prototype, "data", 2);
213
+ __decorateClass([
214
+ property({ type: Array })
215
+ ], PdEditContent.prototype, "editLinks", 2);
216
+ __decorateClass([
217
+ property({ type: Boolean })
218
+ ], PdEditContent.prototype, "editDisabled", 2);
219
+ PdEditContent = __decorateClass([
220
+ customElement("pd-edit-content")
221
+ ], PdEditContent);
222
+ export {
223
+ PdEditContent
224
+ };
@@ -0,0 +1,23 @@
1
+ import { LitElement, CSSResultGroup } from 'lit';
2
+ /**
3
+ * `pd-more-info` Komponente zeigt zuerst einen kompakten Text (Slot `small-view`)
4
+ * und erlaubt es dem Nutzer, bei Klick weitere Informationen (Slot `large-view`) einzublenden.
5
+ *
6
+ * @slot small-view - Der kompakte Textblock für die erste Ansicht
7
+ * @slot large-view - Der erweiterte Textblock nach Klick auf "Mehr Informationen"
8
+ *
9
+ * @cssprop --pd-default-font-content-col - Textfarbe
10
+ * @cssprop --pd-default-font-content-size - Textgröße
11
+ * @cssprop --pd-default-font-link-family - Schriftart für Link
12
+ * @cssprop --pd-default-font-link-size - Schriftgröße für Link
13
+ * @cssprop --pd-default-font-link-col - Linkfarbe
14
+ * @cssprop --pd-default-font-link-col-hover - Hoverfarbe für Link
15
+ */
16
+ export declare class PdMoreInfo extends LitElement {
17
+ private _lessInfo;
18
+ static styles: CSSResultGroup;
19
+ render(): import('lit-html').TemplateResult<1>;
20
+ private _showMoreInfo;
21
+ private _showLessInfo;
22
+ }
23
+ //# sourceMappingURL=pd-more-info.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-more-info.d.ts","sourceRoot":"","sources":["../src/pd-more-info.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5D;;;;;;;;;;;;;GAaG;AACH,qBAEa,UAAW,SAAQ,UAAU;IAExC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAuBpC;IAEO,MAAM;IAoBf,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,aAAa;CAWtB"}