@progressive-development/pd-order 0.1.130 → 0.5.0
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/dist/index.js +12 -0
- package/dist/locales/be.js +10 -0
- package/dist/locales/de.js +14 -4
- package/dist/locales/en.js +10 -0
- package/dist/pd-order-contacts.js +3 -1
- package/dist/pd-order-summary.js +3 -1
- package/dist/src/PdOrderContacts.js +155 -33
- package/dist/src/PdOrderSummary.js +8 -8
- package/package.json +18 -16
- package/dist/node_modules/@progressive-development/pd-contact/pd-contact.js +0 -2
- package/dist/node_modules/@progressive-development/pd-contact/src/PdContact.js +0 -566
- package/dist/node_modules/@progressive-development/pd-content/pd-collapse.js +0 -2
- package/dist/node_modules/@progressive-development/pd-content/pd-edit-content.js +0 -2
- package/dist/node_modules/@progressive-development/pd-content/src/PdCollapse.js +0 -135
- package/dist/node_modules/@progressive-development/pd-content/src/PdEditContent.js +0 -223
- package/dist/node_modules/@progressive-development/pd-dialog/pd-popup.js +0 -2
- package/dist/node_modules/@progressive-development/pd-dialog/src/PdPopup.js +0 -112
- package/dist/node_modules/@progressive-development/pd-forms/pd-checkbox.js +0 -2
- package/dist/node_modules/@progressive-development/pd-forms/pd-form-container.js +0 -2
- package/dist/node_modules/@progressive-development/pd-forms/pd-form-row.js +0 -2
- package/dist/node_modules/@progressive-development/pd-forms/pd-hover-box.js +0 -2
- package/dist/node_modules/@progressive-development/pd-forms/pd-input.js +0 -2
- package/dist/node_modules/@progressive-development/pd-forms/pd-radio-group.js +0 -2
- package/dist/node_modules/@progressive-development/pd-forms/src/PdBaseInputElement.js +0 -86
- package/dist/node_modules/@progressive-development/pd-forms/src/PdBaseUi.js +0 -33
- package/dist/node_modules/@progressive-development/pd-forms/src/PdBaseUiInput.js +0 -229
- package/dist/node_modules/@progressive-development/pd-forms/src/PdCheckbox.js +0 -230
- package/dist/node_modules/@progressive-development/pd-forms/src/PdFormContainer.js +0 -167
- package/dist/node_modules/@progressive-development/pd-forms/src/PdFormRow.js +0 -92
- package/dist/node_modules/@progressive-development/pd-forms/src/PdHoverBox.js +0 -108
- package/dist/node_modules/@progressive-development/pd-forms/src/PdInput.js +0 -79
- package/dist/node_modules/@progressive-development/pd-forms/src/PdRadioGroup.js +0 -72
- package/dist/node_modules/@progressive-development/pd-forms/src/shared-input-field-styles.js +0 -152
- package/dist/node_modules/@progressive-development/pd-forms/src/shared-input-styles.js +0 -64
- package/dist/node_modules/@progressive-development/pd-icon/pd-icon.js +0 -4
- package/dist/node_modules/@progressive-development/pd-icon/src/PdIcon.js +0 -595
- package/dist/node_modules/@progressive-development/pd-price/pd-pricetable.js +0 -2
- package/dist/node_modules/@progressive-development/pd-price/src/PdPricetable.js +0 -149
- package/dist/node_modules/fecha/lib/fecha.js +0 -200
- package/dist/node_modules/lit/node_modules/lit-html/directive.js +0 -27
- package/dist/node_modules/lit/node_modules/lit-html/directives/class-map.js +0 -36
- package/dist/node_modules/lit/node_modules/lit-html/lit-html.js +0 -242
|
@@ -1,223 +0,0 @@
|
|
|
1
|
-
import { html, LitElement, css } from "lit";
|
|
2
|
-
import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
|
|
3
|
-
/**
|
|
4
|
-
* @license
|
|
5
|
-
* Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
|
|
6
|
-
*/
|
|
7
|
-
const editIcon = html`<svg
|
|
8
|
-
class="edit"
|
|
9
|
-
id="Layer_1"
|
|
10
|
-
version="1.1"
|
|
11
|
-
viewBox="0 0 19 19"
|
|
12
|
-
xml:space="preserve"
|
|
13
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
14
|
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
15
|
-
>
|
|
16
|
-
<g>
|
|
17
|
-
<path
|
|
18
|
-
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"
|
|
19
|
-
fill="var(--edit-fill-color)"
|
|
20
|
-
/>
|
|
21
|
-
<path
|
|
22
|
-
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"
|
|
23
|
-
fill="var(--edit-fill-color)"
|
|
24
|
-
/>
|
|
25
|
-
<path
|
|
26
|
-
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"
|
|
27
|
-
fill="var(--edit-fill-color)"
|
|
28
|
-
/>
|
|
29
|
-
</g>
|
|
30
|
-
</svg>`;
|
|
31
|
-
class PdEditContent extends LitElement {
|
|
32
|
-
/**
|
|
33
|
-
* @event edit-content
|
|
34
|
-
*/
|
|
35
|
-
static get styles() {
|
|
36
|
-
return [
|
|
37
|
-
PDColorStyles,
|
|
38
|
-
PDFontStyles,
|
|
39
|
-
css`
|
|
40
|
-
:host {
|
|
41
|
-
display: block;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
h4 {
|
|
45
|
-
font-family: var(--pd-default-font-title-family);
|
|
46
|
-
font-size: var(--pd-ec-font-title-size, 1.2em);
|
|
47
|
-
margin-top: 0px;
|
|
48
|
-
margin-bottom: 2px;
|
|
49
|
-
line-height: 40px;
|
|
50
|
-
color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
|
|
51
|
-
padding-left: 5px;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.header {
|
|
55
|
-
display: flex;
|
|
56
|
-
gap: 5px;
|
|
57
|
-
background-color: var(--pd-ec-bg-col, var(--pd-default-col));
|
|
58
|
-
align-items: center;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.circle {
|
|
62
|
-
margin-left: 5px;
|
|
63
|
-
display: flex;
|
|
64
|
-
align-items: center;
|
|
65
|
-
justify-content: center;
|
|
66
|
-
width: 27px;
|
|
67
|
-
height: 27px;
|
|
68
|
-
border-radius: 50%;
|
|
69
|
-
background-color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.step-number {
|
|
73
|
-
font-family: var(--pd-default-font-title-family);
|
|
74
|
-
font-size: var(--pd-ec-font-title-size, 1.2em);
|
|
75
|
-
font-weight: var(--pd-ec-nr-font-weight, bold); ;
|
|
76
|
-
color: var(--pd-ec-bg-col, var(--pd-default-col));
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
/* Temporär? Hier noch sehr aufwendig mit div/span? */
|
|
80
|
-
|
|
81
|
-
.label {
|
|
82
|
-
display: inline-block;
|
|
83
|
-
font-weight: bold;
|
|
84
|
-
width: 200px;
|
|
85
|
-
padding-top: 10px;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
/* Temporär */
|
|
89
|
-
a {
|
|
90
|
-
cursor: pointer;
|
|
91
|
-
font-family: var(--pd-default-font-link-family);
|
|
92
|
-
font-size: var(--pd-default-font-link-size);
|
|
93
|
-
color: var(--pd-default-font-link-col);
|
|
94
|
-
--edit-fill-color: var(--pd-default-font-link-col);
|
|
95
|
-
}
|
|
96
|
-
a:hover {
|
|
97
|
-
color: var(--pd-default-font-link-col-hover);
|
|
98
|
-
--edit-fill-color: var(--pd-default-font-link-col-hover);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.edit {
|
|
102
|
-
width: 1.1em;
|
|
103
|
-
}
|
|
104
|
-
/*
|
|
105
|
-
could used as class for given svg icons, workaround class
|
|
106
|
-
hard coded for specific icon => maybe use custom properties here, but not for that hack...
|
|
107
|
-
*/
|
|
108
|
-
.own-edit-icon {
|
|
109
|
-
width: 2em;
|
|
110
|
-
margin-top: -10px;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.link-row {
|
|
114
|
-
padding-top: 5px;
|
|
115
|
-
padding-bottom: 5px;
|
|
116
|
-
display: flex;
|
|
117
|
-
flex-wrap: wrap;
|
|
118
|
-
gap: 15px;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.link-item {
|
|
122
|
-
display: flex;
|
|
123
|
-
gap: 2px;
|
|
124
|
-
white-space: nowrap;
|
|
125
|
-
align-items: center;
|
|
126
|
-
pointer-events: none;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.param-data {
|
|
130
|
-
padding-bottom: 10px;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
@media (max-width: 360px) {
|
|
134
|
-
.label {
|
|
135
|
-
width: 130px;
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
`
|
|
139
|
-
];
|
|
140
|
-
}
|
|
141
|
-
static get properties() {
|
|
142
|
-
return {
|
|
143
|
-
stepNumber: { type: Number },
|
|
144
|
-
contentTitle: { type: String },
|
|
145
|
-
data: { type: Array },
|
|
146
|
-
editLinks: { type: Array },
|
|
147
|
-
// TODO: [TIM-37] Put together with edit icon/editDisabled
|
|
148
|
-
editDisabled: { type: Boolean }
|
|
149
|
-
};
|
|
150
|
-
}
|
|
151
|
-
constructor() {
|
|
152
|
-
super();
|
|
153
|
-
this.stepNumber = void 0;
|
|
154
|
-
this.contentTitle = "";
|
|
155
|
-
this.data = [];
|
|
156
|
-
this.editLinks = [];
|
|
157
|
-
this.editDisabled = false;
|
|
158
|
-
}
|
|
159
|
-
render() {
|
|
160
|
-
return html`
|
|
161
|
-
<div class="header">
|
|
162
|
-
${this.stepNumber ? html`
|
|
163
|
-
<div class="circle">
|
|
164
|
-
<span class="step-number">${this.stepNumber}</span>
|
|
165
|
-
</div>
|
|
166
|
-
` : ""}
|
|
167
|
-
<h4>${this.contentTitle}</h4>
|
|
168
|
-
</div>
|
|
169
|
-
<div>
|
|
170
|
-
${this.data ? html`
|
|
171
|
-
<div class="param-data">
|
|
172
|
-
${this.data.map(
|
|
173
|
-
(dataEntry) => html`
|
|
174
|
-
<div>
|
|
175
|
-
<span class="label">${dataEntry.name}</span>
|
|
176
|
-
<span class="value">${dataEntry.val}</span>
|
|
177
|
-
</div>
|
|
178
|
-
`
|
|
179
|
-
)}
|
|
180
|
-
</div>` : ""}
|
|
181
|
-
<slot></slot>
|
|
182
|
-
<div class="link-row">
|
|
183
|
-
${this.editDisabled ? "" : html`
|
|
184
|
-
<a @click="${this._editContent}">
|
|
185
|
-
<div class="link-item">${editIcon} Bewerk ${this.contentTitle}</div>
|
|
186
|
-
</a>
|
|
187
|
-
`}
|
|
188
|
-
${this.editLinks.map(
|
|
189
|
-
(link) => html`
|
|
190
|
-
<a data-link="${link.key}" @click="${this._editContent}">
|
|
191
|
-
<div class="link-item">${PdEditContent._getLinkLogo(link)} ${link.txt}</div>
|
|
192
|
-
</a>`
|
|
193
|
-
)}
|
|
194
|
-
</div>
|
|
195
|
-
</div>
|
|
196
|
-
`;
|
|
197
|
-
}
|
|
198
|
-
static _getLinkLogo(link) {
|
|
199
|
-
if (link.icon) {
|
|
200
|
-
return link.icon;
|
|
201
|
-
}
|
|
202
|
-
if (link.defaultIcon) {
|
|
203
|
-
return editIcon;
|
|
204
|
-
}
|
|
205
|
-
return "";
|
|
206
|
-
}
|
|
207
|
-
_editContent(e) {
|
|
208
|
-
const { link } = e.target.dataset;
|
|
209
|
-
this.dispatchEvent(
|
|
210
|
-
new CustomEvent("edit-content", {
|
|
211
|
-
detail: {
|
|
212
|
-
step: this.stepNumber,
|
|
213
|
-
link
|
|
214
|
-
},
|
|
215
|
-
bubbles: true,
|
|
216
|
-
composed: true
|
|
217
|
-
})
|
|
218
|
-
);
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
export {
|
|
222
|
-
PdEditContent
|
|
223
|
-
};
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import { LitElement, css, html } from "lit";
|
|
2
|
-
import { ICON_CLOSE } from "../../pd-icon/src/PdIcon.js";
|
|
3
|
-
import "../../pd-icon/pd-icon.js";
|
|
4
|
-
import { PDColorStyles } from "@progressive-development/pd-shared-styles";
|
|
5
|
-
/**
|
|
6
|
-
* @license
|
|
7
|
-
* Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
|
|
8
|
-
*/
|
|
9
|
-
class PdPopup extends LitElement {
|
|
10
|
-
static get styles() {
|
|
11
|
-
return [
|
|
12
|
-
PDColorStyles,
|
|
13
|
-
css`
|
|
14
|
-
:host {
|
|
15
|
-
display: block;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
/* The Modal (background) */
|
|
19
|
-
.modal {
|
|
20
|
-
position: fixed; /* Stay in place */
|
|
21
|
-
z-index: 100; /* Sit on top */
|
|
22
|
-
left: 0;
|
|
23
|
-
top: 0;
|
|
24
|
-
width: 100%; /* Full width */
|
|
25
|
-
height: 100%; /* Full height */
|
|
26
|
-
overflow: auto; /* Enable scroll if needed */
|
|
27
|
-
/* RGBA Wert muss hier verwendet werden #AFC1D2 to rgba for opacity */
|
|
28
|
-
background-color: var(--pd-popup-modal-bg-rgba, rgba(175, 193, 210, 0.8));
|
|
29
|
-
|
|
30
|
-
/* specific for PdPopup, abobe also used for PdPopupDialog */
|
|
31
|
-
display: var(--pd-popup-default-display, none); /* Hidden by default */
|
|
32
|
-
padding-top: 100px; /* Location of the box */
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/* Modal Content */
|
|
36
|
-
.modal-content {
|
|
37
|
-
background-color: var(--pd-default-bg-col);
|
|
38
|
-
opacity: 1;
|
|
39
|
-
margin: auto;
|
|
40
|
-
padding: var(--pd-popup-modal-padding, 20px);
|
|
41
|
-
padding-bottom: 130px;
|
|
42
|
-
border: 2px solid var(--pd-default-col);
|
|
43
|
-
width: 80%;
|
|
44
|
-
max-width: 1200px;
|
|
45
|
-
position: relative;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.modal-content-slot {
|
|
49
|
-
max-width: var(--pd-popup-modal-slot-max-width, 1000px);
|
|
50
|
-
margin: var(--pd-popup-modal-slot-margin, 0 30px);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.close-icon {
|
|
54
|
-
position: absolute;
|
|
55
|
-
cursor: pointer;
|
|
56
|
-
right: 1.2em;
|
|
57
|
-
top: 1.2em;
|
|
58
|
-
}`
|
|
59
|
-
];
|
|
60
|
-
}
|
|
61
|
-
render() {
|
|
62
|
-
return html`
|
|
63
|
-
<!-- Trigger/Open The Modal -->
|
|
64
|
-
<span @click="${this._activatePopup}" @keypress="${this._activatePopup}"
|
|
65
|
-
><slot name="small-view"></slot
|
|
66
|
-
></span>
|
|
67
|
-
|
|
68
|
-
<!-- The Modal -->
|
|
69
|
-
<div id="modalId" class="modal">
|
|
70
|
-
<!-- Modal content -->
|
|
71
|
-
<div class="modal-content">
|
|
72
|
-
<pd-icon icon="${ICON_CLOSE}" class="close-icon"
|
|
73
|
-
@click="${this._closePopup}"></pd-icon>
|
|
74
|
-
<div class="modal-content-slot">
|
|
75
|
-
<slot name="content"></slot>
|
|
76
|
-
</div>
|
|
77
|
-
</div>
|
|
78
|
-
</div>
|
|
79
|
-
`;
|
|
80
|
-
}
|
|
81
|
-
showPopup() {
|
|
82
|
-
this._activatePopup();
|
|
83
|
-
}
|
|
84
|
-
hidePopup() {
|
|
85
|
-
this._closePopup();
|
|
86
|
-
}
|
|
87
|
-
_activatePopup() {
|
|
88
|
-
const modal = this.shadowRoot.getElementById("modalId");
|
|
89
|
-
modal.style.display = "block";
|
|
90
|
-
}
|
|
91
|
-
_closePopup() {
|
|
92
|
-
const modal = this.shadowRoot.getElementById("modalId");
|
|
93
|
-
modal.style.display = "none";
|
|
94
|
-
this.dispatchEvent(
|
|
95
|
-
new CustomEvent("popup-close", {
|
|
96
|
-
bubbles: true,
|
|
97
|
-
composed: true
|
|
98
|
-
})
|
|
99
|
-
);
|
|
100
|
-
}
|
|
101
|
-
/*
|
|
102
|
-
// When the user clicks anywhere outside of the modal, close it
|
|
103
|
-
window.onclick = function(event) {
|
|
104
|
-
if (event.target == modal) {
|
|
105
|
-
modal.style.display = "none";
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
*/
|
|
109
|
-
}
|
|
110
|
-
export {
|
|
111
|
-
PdPopup
|
|
112
|
-
};
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
import { PdBaseUIInput, INPUT_TYPE_DATE, INPUT_TYPE_TEXT, INPUT_TYPE_FILE, INPUT_TYPE_SELECT, INPUT_TYPE_AREA } from "./PdBaseUiInput.js";
|
|
2
|
-
import { SharedInputFieldStyles } from "./shared-input-field-styles.js";
|
|
3
|
-
/**
|
|
4
|
-
* @license
|
|
5
|
-
* Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
|
|
6
|
-
*
|
|
7
|
-
* Abstract base lit class for pd-input elements.
|
|
8
|
-
*
|
|
9
|
-
* Used from:
|
|
10
|
-
* - pd-input
|
|
11
|
-
* - pd-input-area
|
|
12
|
-
* - pd-select
|
|
13
|
-
*
|
|
14
|
-
* Used to:
|
|
15
|
-
* - define element specific css
|
|
16
|
-
* - handle auto completion
|
|
17
|
-
*
|
|
18
|
-
* Events:
|
|
19
|
-
* - TODO
|
|
20
|
-
*
|
|
21
|
-
* Custom Properties (shared-input-field-styles):
|
|
22
|
-
* ... TODO
|
|
23
|
-
*
|
|
24
|
-
*/
|
|
25
|
-
class PdBaseInputElement extends PdBaseUIInput {
|
|
26
|
-
/**
|
|
27
|
-
* Fire when the `pd-input` loses focus.
|
|
28
|
-
* @event focus-lost
|
|
29
|
-
*/
|
|
30
|
-
static get styles() {
|
|
31
|
-
return [PdBaseUIInput.styles, SharedInputFieldStyles];
|
|
32
|
-
}
|
|
33
|
-
static get properties() {
|
|
34
|
-
return {
|
|
35
|
-
placeHolder: { type: String },
|
|
36
|
-
/* not used at the moment */
|
|
37
|
-
name: { type: String },
|
|
38
|
-
autoCompleteName: { type: String }
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
constructor() {
|
|
42
|
-
super();
|
|
43
|
-
this.placeHolder = "";
|
|
44
|
-
this.name = "";
|
|
45
|
-
this._input = {};
|
|
46
|
-
}
|
|
47
|
-
firstUpdated() {
|
|
48
|
-
this._input = this.shadowRoot.querySelector(this._getElementName());
|
|
49
|
-
}
|
|
50
|
-
focus() {
|
|
51
|
-
this._input.focus();
|
|
52
|
-
}
|
|
53
|
-
_onBlur(event) {
|
|
54
|
-
this.dispatchEvent(
|
|
55
|
-
new CustomEvent("focus-lost", {
|
|
56
|
-
detail: {
|
|
57
|
-
value: this._input.value
|
|
58
|
-
},
|
|
59
|
-
composed: true,
|
|
60
|
-
bubbles: true
|
|
61
|
-
})
|
|
62
|
-
);
|
|
63
|
-
this._handleChangedValue(this._input.value, event, true, true);
|
|
64
|
-
}
|
|
65
|
-
_onKeyUp(event) {
|
|
66
|
-
this._handleChangedValue(this._input.value, event, true);
|
|
67
|
-
}
|
|
68
|
-
_getElementName() {
|
|
69
|
-
switch (this._inputType) {
|
|
70
|
-
case INPUT_TYPE_AREA:
|
|
71
|
-
return "textarea";
|
|
72
|
-
case INPUT_TYPE_SELECT:
|
|
73
|
-
return "select";
|
|
74
|
-
case INPUT_TYPE_FILE:
|
|
75
|
-
case INPUT_TYPE_TEXT:
|
|
76
|
-
return "input";
|
|
77
|
-
case INPUT_TYPE_DATE:
|
|
78
|
-
return "pd-input";
|
|
79
|
-
default:
|
|
80
|
-
return "";
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
export {
|
|
85
|
-
PdBaseInputElement
|
|
86
|
-
};
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
import { updateWhenLocaleChanges } from "@lit/localize";
|
|
3
|
-
import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
|
|
4
|
-
/**
|
|
5
|
-
* @license
|
|
6
|
-
* Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
|
|
7
|
-
*
|
|
8
|
-
* Abstract base lit class for all pd-form elements.
|
|
9
|
-
* Import shared-global-style to make common custom properties available to all components.
|
|
10
|
-
*
|
|
11
|
-
* Used from:
|
|
12
|
-
* - pd-base-ui-input
|
|
13
|
-
*
|
|
14
|
-
* Used to:
|
|
15
|
-
* - define css (import shared-global-styles.js)
|
|
16
|
-
* - define common properties (detailieren, aktuell keine)
|
|
17
|
-
* - define updateWhenLocaleChanges for all pd-elements (check, aktuell nur für pd-form-container benötigt)
|
|
18
|
-
*
|
|
19
|
-
* Custom Properties (shared-global-styles):
|
|
20
|
-
* ... TODO
|
|
21
|
-
*/
|
|
22
|
-
class PdBaseUI extends LitElement {
|
|
23
|
-
static get styles() {
|
|
24
|
-
return [PDColorStyles, PDFontStyles];
|
|
25
|
-
}
|
|
26
|
-
constructor() {
|
|
27
|
-
super();
|
|
28
|
-
updateWhenLocaleChanges(this);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
export {
|
|
32
|
-
PdBaseUI
|
|
33
|
-
};
|