@progressive-development/pd-forms 0.0.27 → 0.0.29
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/pd-range.js +3 -0
- package/src/PdCheckbox.js +1 -0
- package/src/PdFormContainer.js +16 -3
- package/src/PdFormRow.js +5 -2
- package/src/PdRange.js +199 -0
- package/src/shared-input-styles.js +12 -6
- package/stories/range.stories.js +72 -0
package/package.json
CHANGED
package/pd-range.js
ADDED
package/src/PdCheckbox.js
CHANGED
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
|
+
}
|
package/src/PdRange.js
ADDED
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import { html, css } from 'lit';
|
|
7
|
+
|
|
8
|
+
import { SharedInputStyles } from './shared-input-styles.js';
|
|
9
|
+
import { PdBaseUIInput, INPUT_TYPE_RANGE } from './PdBaseUiInput.js';
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
export class PdRange extends PdBaseUIInput {
|
|
13
|
+
|
|
14
|
+
static get properties() {
|
|
15
|
+
return {
|
|
16
|
+
min: { type: String },
|
|
17
|
+
max: { type: String },
|
|
18
|
+
step: { type: Number},
|
|
19
|
+
showLegend: { type: Boolean }
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
constructor() {
|
|
24
|
+
super();
|
|
25
|
+
this._inputType = INPUT_TYPE_RANGE;
|
|
26
|
+
this.step = 0.1;
|
|
27
|
+
this.showLegend = false;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
static get styles() {
|
|
31
|
+
return [
|
|
32
|
+
SharedInputStyles,
|
|
33
|
+
css`
|
|
34
|
+
input[type=range] {
|
|
35
|
+
-webkit-appearance: none;
|
|
36
|
+
margin: 0;
|
|
37
|
+
width: 100%;
|
|
38
|
+
background-color: var(--my-background-color);
|
|
39
|
+
padding: var(--squi-input-padding, .5rem);
|
|
40
|
+
height: var(--my-input-height);
|
|
41
|
+
box-sizing: border-box;
|
|
42
|
+
}
|
|
43
|
+
input[type=range]:focus {
|
|
44
|
+
outline: none;
|
|
45
|
+
}
|
|
46
|
+
input[type=range]::-webkit-slider-runnable-track {
|
|
47
|
+
width: 100%;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
50
|
+
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
51
|
+
border-radius: 3px;
|
|
52
|
+
border: 0px solid #000101;
|
|
53
|
+
}
|
|
54
|
+
input[type=range]::-webkit-slider-thumb {
|
|
55
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
56
|
+
border: 0px solid #000000;
|
|
57
|
+
height: 20px;
|
|
58
|
+
width: 39px;
|
|
59
|
+
border-radius: 3px;
|
|
60
|
+
background: var(--my-primary-color);
|
|
61
|
+
cursor: pointer;
|
|
62
|
+
-webkit-appearance: none;
|
|
63
|
+
margin-top: -3.6px;
|
|
64
|
+
}
|
|
65
|
+
input[type=range]:focus::-webkit-slider-runnable-track {
|
|
66
|
+
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
67
|
+
}
|
|
68
|
+
input[type=range]::-moz-range-track {
|
|
69
|
+
width: 100%;
|
|
70
|
+
height: 12.8px;
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
animation: 0.2s;
|
|
73
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
74
|
+
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
75
|
+
border-radius: 3px;
|
|
76
|
+
border: 0px solid #000101;
|
|
77
|
+
}
|
|
78
|
+
input[type=range]::-moz-range-thumb {
|
|
79
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
80
|
+
border: 0px solid #000000;
|
|
81
|
+
height: 20px;
|
|
82
|
+
width: 39px;
|
|
83
|
+
border-radius: 3px;
|
|
84
|
+
background: var(--my-primary-color);
|
|
85
|
+
cursor: pointer;
|
|
86
|
+
}
|
|
87
|
+
input[type=range]::-ms-track {
|
|
88
|
+
width: 100%;
|
|
89
|
+
height: 12.8px;
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
animation: 0.2s;
|
|
92
|
+
background: transparent;
|
|
93
|
+
border-color: transparent;
|
|
94
|
+
border-width: 39px 0;
|
|
95
|
+
color: transparent;
|
|
96
|
+
}
|
|
97
|
+
input[type=range]::-ms-fill-lower {
|
|
98
|
+
background: linear-gradient(-90deg, rgba(var(---my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
99
|
+
border: 0px solid #000101;
|
|
100
|
+
border-radius: 7px;
|
|
101
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
102
|
+
}
|
|
103
|
+
input[type=range]::-ms-fill-upper {
|
|
104
|
+
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
105
|
+
border: 0px solid #000101;
|
|
106
|
+
border-radius: 7px;
|
|
107
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
108
|
+
}
|
|
109
|
+
input[type=range]::-ms-thumb {
|
|
110
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
111
|
+
border: 0px solid #000000;
|
|
112
|
+
height: 20px;
|
|
113
|
+
width: 39px;
|
|
114
|
+
border-radius: 3px;
|
|
115
|
+
background: var(--my-primary-color);
|
|
116
|
+
cursor: pointer;
|
|
117
|
+
}
|
|
118
|
+
:host label.value {
|
|
119
|
+
flex: 0 1 10%;
|
|
120
|
+
}
|
|
121
|
+
input[type=range]:focus::-ms-fill-lower {
|
|
122
|
+
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
123
|
+
}
|
|
124
|
+
input[type=range]:focus::-ms-fill-upper {
|
|
125
|
+
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
126
|
+
}
|
|
127
|
+
.legend {
|
|
128
|
+
display: flex;
|
|
129
|
+
/*margin: 0 -1rem;*/
|
|
130
|
+
}
|
|
131
|
+
.legend label {
|
|
132
|
+
text-align: center;
|
|
133
|
+
position: relative;
|
|
134
|
+
}
|
|
135
|
+
.legend label::before {
|
|
136
|
+
background-color: rgb(var(--my-lighter-background-color));
|
|
137
|
+
content: "";
|
|
138
|
+
height: .5rem;
|
|
139
|
+
position: absolute;
|
|
140
|
+
left: 50%;
|
|
141
|
+
top: -.5rem;
|
|
142
|
+
width: 1px;
|
|
143
|
+
}
|
|
144
|
+
.range_legend_label--selected {
|
|
145
|
+
color: var(--my-primary-color);
|
|
146
|
+
}
|
|
147
|
+
/* TODO remove to specific */
|
|
148
|
+
.range_legend_label--selected::after{
|
|
149
|
+
content: '';
|
|
150
|
+
position: absolute;
|
|
151
|
+
left: 20%;
|
|
152
|
+
top: 100%;
|
|
153
|
+
width: 0;
|
|
154
|
+
height: 0;
|
|
155
|
+
border-left: 20px solid transparent;
|
|
156
|
+
border-right: 20px solid transparent;
|
|
157
|
+
border-bottom: 20px solid rgb(var(--my-lighter-background-color));
|
|
158
|
+
}
|
|
159
|
+
`
|
|
160
|
+
];
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
render() {
|
|
164
|
+
// TODO: step kann hier nicht übergeben werden, wird dann initial nicht immer richtig angezeigt (bei komma rundungen)???
|
|
165
|
+
return html`
|
|
166
|
+
<label for="${this.id}Input">${this.label} ${this.showLegend ? '' : html`- ${this.value}`}</label>
|
|
167
|
+
<input ?disabled=${this.disabled} type="range" name="${this.id}Name" @change="${this._onChange}"
|
|
168
|
+
.value="${this.value}" min="${this.min}" max="${this.max}"
|
|
169
|
+
step="${this.step}" id="${this.id}Input">
|
|
170
|
+
${this.showLegend ? this._addLegend() : ''}
|
|
171
|
+
`;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
firstUpdated() {
|
|
175
|
+
// Save input reference for performance
|
|
176
|
+
this._input = this.shadowRoot.querySelector('input');
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
_addLegend() {
|
|
180
|
+
const steps = this.max - this.min;
|
|
181
|
+
const labels = [];
|
|
182
|
+
for (let i = 0; i <= steps; i+=1) {
|
|
183
|
+
labels.push(html`<label class="${i + this.step === this.value * 1 ? 'range_legend_label--selected' : ''}">${i + this.step}</label>`);
|
|
184
|
+
}
|
|
185
|
+
return html`<div class="legend">${labels}</div>`
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
_onChange() {
|
|
189
|
+
this.value = this._input.value;
|
|
190
|
+
this.dispatchEvent(new CustomEvent('changed', {
|
|
191
|
+
detail: {
|
|
192
|
+
value: this._input.value
|
|
193
|
+
},
|
|
194
|
+
composed: true,
|
|
195
|
+
bubbles: true
|
|
196
|
+
}));
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
}
|
|
@@ -25,7 +25,10 @@ export const SharedInputStyles = css`
|
|
|
25
25
|
--my-border-radius: var(--squi-border-radius, 0rem);
|
|
26
26
|
|
|
27
27
|
/* Background color input Elements Select, Input, Input Area */
|
|
28
|
+
--my-primary-color: var(--squi-primary-color, #177e89);
|
|
28
29
|
--my-background-color: var(--squi-secondary-color, #fefefe);
|
|
30
|
+
--my-lighter-background-color: var(--squi-lighter-color, #8caed8a1);
|
|
31
|
+
--my-darker-background-color: var(--squi-darker-color, #012e649f);
|
|
29
32
|
--my-background-gradient-color: var(--squi-third-color, #8caed8a1);
|
|
30
33
|
--my-error-background-color: var(--squi-error-background-color, #f6d4d4a1);
|
|
31
34
|
|
|
@@ -34,20 +37,21 @@ export const SharedInputStyles = css`
|
|
|
34
37
|
|
|
35
38
|
/* Text color input Elements Select, Input, Input Area */
|
|
36
39
|
--my-text-color: var(--squi-text-color, #000000);
|
|
37
|
-
--my-label-color: var(--squi-text-color, #
|
|
40
|
+
--my-label-color: var(--squi-text-lable-color, #58585a);
|
|
38
41
|
--my-font-family: var(--squi-display-font, 'Montserrat');
|
|
39
42
|
--my-font-size: var(--squi-font-size, 1rem);
|
|
40
43
|
|
|
41
44
|
--my-input-height: var(--squi-input-height, 2.4rem);
|
|
45
|
+
|
|
42
46
|
}
|
|
43
47
|
|
|
44
48
|
/* Describe input div (with icon) around input/select/area element */
|
|
45
49
|
.input {
|
|
46
50
|
display: inline-block;
|
|
47
|
-
/*position: relative; Prüfen:
|
|
51
|
+
/*position: relative; Prüfen: Wenn das an ist, felder über scroll-menu?*/
|
|
48
52
|
/* pd-icon smaller than input */
|
|
49
53
|
--pd-icon-computed-size: calc(var(--my-input-height) * 0.75); /* calc */
|
|
50
|
-
|
|
54
|
+
|
|
51
55
|
/* Hack um eine Form Row (input mit Button => Booking) zu bekommen*/
|
|
52
56
|
padding-top: var(--squi-input-padding, 0.5rem);
|
|
53
57
|
}
|
|
@@ -94,11 +98,12 @@ export const SharedInputStyles = css`
|
|
|
94
98
|
/* Label for input, select, area */
|
|
95
99
|
label {
|
|
96
100
|
display: block;
|
|
97
|
-
padding: 0;
|
|
101
|
+
padding: var(--pd-form-label-padding, 0 0 0 0.5rem);
|
|
98
102
|
color: var(--my-label-color);
|
|
99
103
|
text-align: left;
|
|
100
104
|
font-size: 0.9rem;
|
|
101
105
|
margin-bottom: -5px;
|
|
106
|
+
font-family: var(--pd-input-lable-font);
|
|
102
107
|
}
|
|
103
108
|
|
|
104
109
|
/* Working progress, used at the moment for radio-group, work out and adapt to others... */
|
|
@@ -111,10 +116,11 @@ export const SharedInputStyles = css`
|
|
|
111
116
|
background: var(--my-error-background-color);
|
|
112
117
|
border: 1px solid var(--my-error-color);
|
|
113
118
|
border-radius: var(--my-border-radius);
|
|
114
|
-
padding: 0.25rem;
|
|
119
|
+
padding: 0.25rem 0 0.25rem 0.5rem;
|
|
115
120
|
white-space: nowrap;
|
|
116
121
|
display: block;
|
|
117
122
|
font-size: 0.8rem;
|
|
123
|
+
margin-top:0.1rem;
|
|
118
124
|
max-width: var(--squi-input-width, 250px);
|
|
119
125
|
}
|
|
120
126
|
|
|
@@ -133,7 +139,7 @@ export const SharedInputStyles = css`
|
|
|
133
139
|
font-size: var(--my-font-size);
|
|
134
140
|
font-family: var(--my-font-family);
|
|
135
141
|
|
|
136
|
-
/* ToDo Border Angaben? (ganz, nur bottom, und variablen dazu) Hier für
|
|
142
|
+
/* ToDo Border Angaben? (ganz, nur bottom, und variablen dazu) Hier für Contact us fest eingebunden...*/
|
|
137
143
|
border: 1px solid #cacaca;
|
|
138
144
|
box-shadow: inset 0 1px 2px rgba(50, 48, 49, 0.1);
|
|
139
145
|
border-bottom: 2px solid var(--my-border-color);
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import '../pd-range.js';
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'PdForms/Range',
|
|
6
|
+
component: 'pd-range',
|
|
7
|
+
argTypes: {
|
|
8
|
+
primaryColor: { control: 'color' },
|
|
9
|
+
secondaryColor: { control: 'color' },
|
|
10
|
+
textColor: { control: 'color' },
|
|
11
|
+
highlightColor: { control: 'color' },
|
|
12
|
+
errorColor: { control: 'color' },
|
|
13
|
+
errorBackgroundColor: { control: 'color' },
|
|
14
|
+
borderRadius: { control: 'text' },
|
|
15
|
+
displayFont: { control: 'text' },
|
|
16
|
+
fontSize: { control: 'text' },
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
function Template({
|
|
21
|
+
primaryColor,
|
|
22
|
+
secondaryColor,
|
|
23
|
+
textColor,
|
|
24
|
+
highlightColor,
|
|
25
|
+
errorColor,
|
|
26
|
+
errorBackgroundColor,
|
|
27
|
+
borderRadius,
|
|
28
|
+
displayFont,
|
|
29
|
+
fontSize,
|
|
30
|
+
}) {
|
|
31
|
+
let style = '';
|
|
32
|
+
if (primaryColor) {
|
|
33
|
+
style += `--squi-primary-color:${primaryColor};`;
|
|
34
|
+
}
|
|
35
|
+
if (secondaryColor) {
|
|
36
|
+
style += `--squi-secondary-color:${secondaryColor};`;
|
|
37
|
+
}
|
|
38
|
+
if (textColor) {
|
|
39
|
+
style += `--squi-text-color:${textColor};`;
|
|
40
|
+
}
|
|
41
|
+
if (highlightColor) {
|
|
42
|
+
style += `--squi-highlight-color:${highlightColor};`;
|
|
43
|
+
}
|
|
44
|
+
if (errorColor) {
|
|
45
|
+
style += `--squi-error-color:${errorColor};`;
|
|
46
|
+
}
|
|
47
|
+
if (errorBackgroundColor) {
|
|
48
|
+
style += `--squi-error-background-color:${errorBackgroundColor};`;
|
|
49
|
+
}
|
|
50
|
+
if (borderRadius) {
|
|
51
|
+
style += `--squi-border-radius:${borderRadius};`;
|
|
52
|
+
}
|
|
53
|
+
if (displayFont) {
|
|
54
|
+
style += `--squi-display-font:${displayFont};`;
|
|
55
|
+
}
|
|
56
|
+
if (fontSize) {
|
|
57
|
+
style += `--squi-font-size:${fontSize};`;
|
|
58
|
+
}
|
|
59
|
+
return html`
|
|
60
|
+
<h3>Default Input Range</h3>
|
|
61
|
+
<pd-range id="testRangeId"
|
|
62
|
+
style="${style}"
|
|
63
|
+
label="Range auswählen"
|
|
64
|
+
min="1" max="12" step="1"
|
|
65
|
+
defaultValue="6"
|
|
66
|
+
showLegend>
|
|
67
|
+
</pd-range>
|
|
68
|
+
`;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export const Range = Template.bind({});
|
|
72
|
+
Range.args = {};
|