@progressive-development/pd-forms 0.0.28 → 0.0.30
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 +1 -1
- package/src/PdCheckbox.js +3 -2
- package/src/PdFormContainer.js +16 -3
- package/src/PdFormRow.js +5 -2
- package/src/shared-input-styles.js +2 -1
package/package.json
CHANGED
package/src/PdCheckbox.js
CHANGED
|
@@ -113,9 +113,10 @@ export class PdCheckbox extends PdBaseUIInput {
|
|
|
113
113
|
}
|
|
114
114
|
.label {
|
|
115
115
|
margin-left: .5rem;
|
|
116
|
-
color: var(--
|
|
117
|
-
font-family: var(--
|
|
116
|
+
color: var(--squi-text-lable-color);
|
|
117
|
+
font-family: var(--pd-input-lable-font);
|
|
118
118
|
text-align: left;
|
|
119
|
+
font-size: 0.9rem;
|
|
119
120
|
}
|
|
120
121
|
.disabled .label {
|
|
121
122
|
color: var(--squi-checkbox-label-disabled-color, #6e6c6c);
|
package/src/PdFormContainer.js
CHANGED
|
@@ -21,13 +21,21 @@ export class PdFormContainer extends LitElement {
|
|
|
21
21
|
align-items: left;
|
|
22
22
|
gap: 20px;
|
|
23
23
|
}
|
|
24
|
-
|
|
24
|
+
.hinweis {
|
|
25
|
+
background-color:#ffaa71;
|
|
26
|
+
padding:10px;
|
|
27
|
+
color:#58585a;
|
|
28
|
+
border-radius: 1rem;
|
|
29
|
+
-moz-border-radius: 1rem;
|
|
30
|
+
width:50%;
|
|
31
|
+
min-width:300px;
|
|
32
|
+
}
|
|
25
33
|
`;
|
|
26
34
|
}
|
|
27
35
|
|
|
28
36
|
static get properties() {
|
|
29
37
|
return {
|
|
30
|
-
|
|
38
|
+
requiredFieldInfo: { type: Boolean}
|
|
31
39
|
};
|
|
32
40
|
}
|
|
33
41
|
|
|
@@ -39,7 +47,12 @@ export class PdFormContainer extends LitElement {
|
|
|
39
47
|
render() {
|
|
40
48
|
return html`
|
|
41
49
|
<form>
|
|
42
|
-
<slot></slot>
|
|
50
|
+
<slot></slot>
|
|
51
|
+
${this.requiredFieldInfo ? html`
|
|
52
|
+
<p class="hinweis">
|
|
53
|
+
* Pflichtfelder bitte ausfüllen
|
|
54
|
+
</p>` : ''}
|
|
55
|
+
<br />
|
|
43
56
|
</form>
|
|
44
57
|
`;
|
|
45
58
|
}
|
package/src/PdFormRow.js
CHANGED
|
@@ -28,10 +28,13 @@ export class PdFormRow extends LitElement {
|
|
|
28
28
|
max-width: 100%;
|
|
29
29
|
gap: var(--my-gap);
|
|
30
30
|
align-items: flex-start;
|
|
31
|
-
|
|
32
31
|
padding-top: var(--row-padding-top, 0px);
|
|
33
32
|
}
|
|
34
33
|
|
|
34
|
+
::slotted(.full-size) {
|
|
35
|
+
--squi-input-width: 100%;
|
|
36
|
+
}
|
|
37
|
+
|
|
35
38
|
::slotted(.quarter1) {
|
|
36
39
|
--squi-input-width: calc(var(--my-row-width) * 0.25 - (var(--my-gap) * 0.75));
|
|
37
40
|
|
|
@@ -91,4 +94,4 @@ export class PdFormRow extends LitElement {
|
|
|
91
94
|
`;
|
|
92
95
|
}
|
|
93
96
|
|
|
94
|
-
}
|
|
97
|
+
}
|
|
@@ -37,7 +37,7 @@ export const SharedInputStyles = css`
|
|
|
37
37
|
|
|
38
38
|
/* Text color input Elements Select, Input, Input Area */
|
|
39
39
|
--my-text-color: var(--squi-text-color, #000000);
|
|
40
|
-
--my-label-color: var(--squi-text-color, #
|
|
40
|
+
--my-label-color: var(--squi-text-lable-color, #58585a);
|
|
41
41
|
--my-font-family: var(--squi-display-font, 'Montserrat');
|
|
42
42
|
--my-font-size: var(--squi-font-size, 1rem);
|
|
43
43
|
|
|
@@ -103,6 +103,7 @@ export const SharedInputStyles = css`
|
|
|
103
103
|
text-align: left;
|
|
104
104
|
font-size: 0.9rem;
|
|
105
105
|
margin-bottom: -5px;
|
|
106
|
+
font-family: var(--pd-input-lable-font);
|
|
106
107
|
}
|
|
107
108
|
|
|
108
109
|
/* Working progress, used at the moment for radio-group, work out and adapt to others... */
|