@progressive-development/pd-forms 0.0.27 → 0.0.28
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/PdRange.js +199 -0
- package/src/shared-input-styles.js +10 -5
- package/stories/range.stories.js +72 -0
package/package.json
CHANGED
package/pd-range.js
ADDED
package/src/PdCheckbox.js
CHANGED
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
|
|
|
@@ -39,15 +42,16 @@ export const SharedInputStyles = css`
|
|
|
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,7 +98,7 @@ 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;
|
|
@@ -111,10 +115,11 @@ export const SharedInputStyles = css`
|
|
|
111
115
|
background: var(--my-error-background-color);
|
|
112
116
|
border: 1px solid var(--my-error-color);
|
|
113
117
|
border-radius: var(--my-border-radius);
|
|
114
|
-
padding: 0.25rem;
|
|
118
|
+
padding: 0.25rem 0 0.25rem 0.5rem;
|
|
115
119
|
white-space: nowrap;
|
|
116
120
|
display: block;
|
|
117
121
|
font-size: 0.8rem;
|
|
122
|
+
margin-top:0.1rem;
|
|
118
123
|
max-width: var(--squi-input-width, 250px);
|
|
119
124
|
}
|
|
120
125
|
|
|
@@ -133,7 +138,7 @@ export const SharedInputStyles = css`
|
|
|
133
138
|
font-size: var(--my-font-size);
|
|
134
139
|
font-family: var(--my-font-family);
|
|
135
140
|
|
|
136
|
-
/* ToDo Border Angaben? (ganz, nur bottom, und variablen dazu) Hier für
|
|
141
|
+
/* ToDo Border Angaben? (ganz, nur bottom, und variablen dazu) Hier für Contact us fest eingebunden...*/
|
|
137
142
|
border: 1px solid #cacaca;
|
|
138
143
|
box-shadow: inset 0 1px 2px rgba(50, 48, 49, 0.1);
|
|
139
144
|
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 = {};
|