@progressive-development/pd-forms 0.1.13 → 0.1.14
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/PdBaseUiInput.js +2 -2
- package/src/PdRange copy.js +197 -0
- package/src/PdRange.js +146 -115
- package/stories/range.stories.js +2 -41
package/package.json
CHANGED
package/src/PdBaseUiInput.js
CHANGED
|
@@ -203,9 +203,9 @@ import { SharedInputStyles } from './shared-input-styles.js';
|
|
|
203
203
|
` : '';
|
|
204
204
|
}
|
|
205
205
|
|
|
206
|
-
_renderLabel(forParam) {
|
|
206
|
+
_renderLabel(forParam, additionalValue) {
|
|
207
207
|
return html`
|
|
208
|
-
<label for="${forParam}">${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}</label>
|
|
208
|
+
<label for="${forParam}">${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}${additionalValue ? ` - ${additionalValue}` : ''}</label>
|
|
209
209
|
`;
|
|
210
210
|
}
|
|
211
211
|
|
|
@@ -0,0 +1,197 @@
|
|
|
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 { PdBaseUIInput, INPUT_TYPE_RANGE } from './PdBaseUiInput.js';
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
export class PdRange extends PdBaseUIInput {
|
|
12
|
+
|
|
13
|
+
static get properties() {
|
|
14
|
+
return {
|
|
15
|
+
min: { type: String },
|
|
16
|
+
max: { type: String },
|
|
17
|
+
step: { type: Number},
|
|
18
|
+
showLegend: { type: Boolean }
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
constructor() {
|
|
23
|
+
super();
|
|
24
|
+
this._inputType = INPUT_TYPE_RANGE;
|
|
25
|
+
this.step = 0.1;
|
|
26
|
+
this.showLegend = false;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
static get styles() {
|
|
30
|
+
return [
|
|
31
|
+
css`
|
|
32
|
+
input[type=range] {
|
|
33
|
+
-webkit-appearance: none;
|
|
34
|
+
margin: 0;
|
|
35
|
+
width: 100%;
|
|
36
|
+
background-color: var(--my-background-color);
|
|
37
|
+
padding: var(--squi-input-padding, .5rem);
|
|
38
|
+
height: var(--my-input-height);
|
|
39
|
+
box-sizing: border-box;
|
|
40
|
+
}
|
|
41
|
+
input[type=range]:focus {
|
|
42
|
+
outline: none;
|
|
43
|
+
}
|
|
44
|
+
input[type=range]::-webkit-slider-runnable-track {
|
|
45
|
+
width: 100%;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
48
|
+
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
49
|
+
border-radius: 3px;
|
|
50
|
+
border: 0px solid #000101;
|
|
51
|
+
}
|
|
52
|
+
input[type=range]::-webkit-slider-thumb {
|
|
53
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
54
|
+
border: 0px solid #000000;
|
|
55
|
+
height: 20px;
|
|
56
|
+
width: 39px;
|
|
57
|
+
border-radius: 3px;
|
|
58
|
+
background: var(--my-primary-color);
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
-webkit-appearance: none;
|
|
61
|
+
margin-top: -3.6px;
|
|
62
|
+
}
|
|
63
|
+
input[type=range]:focus::-webkit-slider-runnable-track {
|
|
64
|
+
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
65
|
+
}
|
|
66
|
+
input[type=range]::-moz-range-track {
|
|
67
|
+
width: 100%;
|
|
68
|
+
height: 12.8px;
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
animation: 0.2s;
|
|
71
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
72
|
+
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
73
|
+
border-radius: 3px;
|
|
74
|
+
border: 0px solid #000101;
|
|
75
|
+
}
|
|
76
|
+
input[type=range]::-moz-range-thumb {
|
|
77
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
78
|
+
border: 0px solid #000000;
|
|
79
|
+
height: 20px;
|
|
80
|
+
width: 39px;
|
|
81
|
+
border-radius: 3px;
|
|
82
|
+
background: var(--my-primary-color);
|
|
83
|
+
cursor: pointer;
|
|
84
|
+
}
|
|
85
|
+
input[type=range]::-ms-track {
|
|
86
|
+
width: 100%;
|
|
87
|
+
height: 12.8px;
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
animation: 0.2s;
|
|
90
|
+
background: transparent;
|
|
91
|
+
border-color: transparent;
|
|
92
|
+
border-width: 39px 0;
|
|
93
|
+
color: transparent;
|
|
94
|
+
}
|
|
95
|
+
input[type=range]::-ms-fill-lower {
|
|
96
|
+
background: linear-gradient(-90deg, rgba(var(---my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
97
|
+
border: 0px solid #000101;
|
|
98
|
+
border-radius: 7px;
|
|
99
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
100
|
+
}
|
|
101
|
+
input[type=range]::-ms-fill-upper {
|
|
102
|
+
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
103
|
+
border: 0px solid #000101;
|
|
104
|
+
border-radius: 7px;
|
|
105
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
106
|
+
}
|
|
107
|
+
input[type=range]::-ms-thumb {
|
|
108
|
+
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
109
|
+
border: 0px solid #000000;
|
|
110
|
+
height: 20px;
|
|
111
|
+
width: 39px;
|
|
112
|
+
border-radius: 3px;
|
|
113
|
+
background: var(--my-primary-color);
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
}
|
|
116
|
+
:host label.value {
|
|
117
|
+
flex: 0 1 10%;
|
|
118
|
+
}
|
|
119
|
+
input[type=range]:focus::-ms-fill-lower {
|
|
120
|
+
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
121
|
+
}
|
|
122
|
+
input[type=range]:focus::-ms-fill-upper {
|
|
123
|
+
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
124
|
+
}
|
|
125
|
+
.legend {
|
|
126
|
+
display: flex;
|
|
127
|
+
/*margin: 0 -1rem;*/
|
|
128
|
+
}
|
|
129
|
+
.legend label {
|
|
130
|
+
text-align: center;
|
|
131
|
+
position: relative;
|
|
132
|
+
}
|
|
133
|
+
.legend label::before {
|
|
134
|
+
background-color: rgb(var(--my-lighter-background-color));
|
|
135
|
+
content: "";
|
|
136
|
+
height: .5rem;
|
|
137
|
+
position: absolute;
|
|
138
|
+
left: 50%;
|
|
139
|
+
top: -.5rem;
|
|
140
|
+
width: 1px;
|
|
141
|
+
}
|
|
142
|
+
.range_legend_label--selected {
|
|
143
|
+
color: var(--my-primary-color);
|
|
144
|
+
}
|
|
145
|
+
/* TODO remove to specific */
|
|
146
|
+
.range_legend_label--selected::after{
|
|
147
|
+
content: '';
|
|
148
|
+
position: absolute;
|
|
149
|
+
left: 20%;
|
|
150
|
+
top: 100%;
|
|
151
|
+
width: 0;
|
|
152
|
+
height: 0;
|
|
153
|
+
border-left: 20px solid transparent;
|
|
154
|
+
border-right: 20px solid transparent;
|
|
155
|
+
border-bottom: 20px solid rgb(var(--my-lighter-background-color));
|
|
156
|
+
}
|
|
157
|
+
`
|
|
158
|
+
];
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
render() {
|
|
162
|
+
// TODO: step kann hier nicht übergeben werden, wird dann initial nicht immer richtig angezeigt (bei komma rundungen)???
|
|
163
|
+
return html`
|
|
164
|
+
<label for="${this.id}Input">${this.label} ${this.showLegend ? '' : html`- ${this.value}`}</label>
|
|
165
|
+
<input ?disabled=${this.disabled} type="range" name="${this.id}Name" @change="${this._onChange}"
|
|
166
|
+
.value="${this.value}" min="${this.min}" max="${this.max}"
|
|
167
|
+
step="${this.step}" id="${this.id}Input">
|
|
168
|
+
${this.showLegend ? this._addLegend() : ''}
|
|
169
|
+
`;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
firstUpdated() {
|
|
173
|
+
// Save input reference for performance
|
|
174
|
+
this._input = this.shadowRoot.querySelector('input');
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
_addLegend() {
|
|
178
|
+
const steps = this.max - this.min;
|
|
179
|
+
const labels = [];
|
|
180
|
+
for (let i = 0; i <= steps; i+=1) {
|
|
181
|
+
labels.push(html`<label class="${i + this.step === this.value * 1 ? 'range_legend_label--selected' : ''}">${i + this.step}</label>`);
|
|
182
|
+
}
|
|
183
|
+
return html`<div class="legend">${labels}</div>`
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
_onChange() {
|
|
187
|
+
this.value = this._input.value;
|
|
188
|
+
this.dispatchEvent(new CustomEvent('changed', {
|
|
189
|
+
detail: {
|
|
190
|
+
value: this._input.value
|
|
191
|
+
},
|
|
192
|
+
composed: true,
|
|
193
|
+
bubbles: true
|
|
194
|
+
}));
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
}
|
package/src/PdRange.js
CHANGED
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { html, css } from 'lit';
|
|
7
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
7
8
|
|
|
8
9
|
import { PdBaseUIInput, INPUT_TYPE_RANGE } from './PdBaseUiInput.js';
|
|
9
10
|
|
|
10
|
-
|
|
11
11
|
export class PdRange extends PdBaseUIInput {
|
|
12
12
|
|
|
13
13
|
static get properties() {
|
|
@@ -15,7 +15,6 @@ export class PdRange extends PdBaseUIInput {
|
|
|
15
15
|
min: { type: String },
|
|
16
16
|
max: { type: String },
|
|
17
17
|
step: { type: Number},
|
|
18
|
-
showLegend: { type: Boolean }
|
|
19
18
|
};
|
|
20
19
|
}
|
|
21
20
|
|
|
@@ -23,149 +22,190 @@ export class PdRange extends PdBaseUIInput {
|
|
|
23
22
|
super();
|
|
24
23
|
this._inputType = INPUT_TYPE_RANGE;
|
|
25
24
|
this.step = 0.1;
|
|
26
|
-
this.showLegend = false;
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
static get styles() {
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
return [
|
|
29
|
+
PdBaseUIInput.styles,
|
|
30
|
+
css`
|
|
31
|
+
|
|
32
|
+
/* Link:
|
|
33
|
+
* css styling: - https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
|
|
34
|
+
* no-empty-default - https://stackoverflow.com/questions/40302515/is-there-a-way-to-set-default-value-of-range-input-to-be-empty
|
|
35
|
+
* => Könnte ich vlt. mit dummy element lösen => Kein Wert => Dummy wird angezeigt => Bei Klick wird Wert gesetzt und PdRange angezeigt.
|
|
36
|
+
*/
|
|
37
|
+
|
|
38
|
+
/****************************************************
|
|
39
|
+
* Style for SLIDER *
|
|
40
|
+
****************************************************/
|
|
41
|
+
|
|
32
42
|
input[type=range] {
|
|
33
|
-
-webkit-appearance: none;
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
43
|
+
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
|
|
44
|
+
width: var(--pd-input-field-width, 250px); /* Specific width is required for Firefox. */
|
|
45
|
+
background: transparent; /* Otherwise white in Chrome */
|
|
46
|
+
|
|
47
|
+
background-color: var(--pd-range-bg-col, var(--pd-default-col));
|
|
48
|
+
padding: 0.5rem;
|
|
49
|
+
height: var(--pd-input-field-height, 2.2rem);
|
|
39
50
|
box-sizing: border-box;
|
|
40
51
|
}
|
|
52
|
+
|
|
41
53
|
input[type=range]:focus {
|
|
42
|
-
|
|
54
|
+
/* Removes the blue border.
|
|
55
|
+
* You should probably do some kind of focus styling for accessibility reasons though. */
|
|
56
|
+
outline: none;
|
|
43
57
|
}
|
|
44
|
-
|
|
45
|
-
|
|
58
|
+
|
|
59
|
+
/****************************************************
|
|
60
|
+
* Style for THUMBS specific for different browser *
|
|
61
|
+
* Check: Possible to extract common definitions? *
|
|
62
|
+
* => Note that while we’re repeating code here, *
|
|
63
|
+
* that’s necessary as you can’t comma-separate *
|
|
64
|
+
* these type of selectors. Browsers will drop *
|
|
65
|
+
* the entire selector if it doesn’t understand *
|
|
66
|
+
* a part of it. *
|
|
67
|
+
****************************************************/
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Standard/Chrome thumb definition.
|
|
71
|
+
*/
|
|
72
|
+
input[type=range]::-webkit-slider-thumb {
|
|
73
|
+
/* Hide the standard thumb element */
|
|
74
|
+
-webkit-appearance: none;
|
|
75
|
+
/*margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
|
|
76
|
+
margin-top: -6px; /* squi.cards value */
|
|
77
|
+
|
|
78
|
+
/* redundant, check if it is possible to extract common definitions */
|
|
46
79
|
cursor: pointer;
|
|
47
|
-
|
|
48
|
-
|
|
80
|
+
height: 20px;
|
|
81
|
+
width: 39px;
|
|
82
|
+
background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
|
|
83
|
+
border: 1px solid var(--pd-default-dark-col);
|
|
49
84
|
border-radius: 3px;
|
|
50
|
-
|
|
85
|
+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
51
86
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Firefox thumb definition.
|
|
90
|
+
*/
|
|
91
|
+
input[type=range]::-moz-range-thumb {
|
|
92
|
+
/* redundant, check if it is possible to extract common definitions */
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
height: 20px;
|
|
95
|
+
width: 39px;
|
|
96
|
+
background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
|
|
97
|
+
border: 1px solid var(--pd-default-dark-col);
|
|
98
|
+
border-radius: 3px;
|
|
99
|
+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* IE Thum definiton.
|
|
104
|
+
*/
|
|
105
|
+
input[type=range]::-ms-thumb {
|
|
106
|
+
/* redundant, check if it is possible to extract common definitions */
|
|
107
|
+
cursor: pointer;
|
|
55
108
|
height: 20px;
|
|
56
109
|
width: 39px;
|
|
110
|
+
background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
|
|
111
|
+
border: 1px solid var(--pd-default-dark-col);
|
|
57
112
|
border-radius: 3px;
|
|
58
|
-
|
|
113
|
+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
/****************************************************
|
|
118
|
+
* Style for TRACK specific for different browser *
|
|
119
|
+
* (see thumbs styles) *
|
|
120
|
+
****************************************************/
|
|
121
|
+
|
|
122
|
+
/**
|
|
123
|
+
* Standard/Chrome track definition.
|
|
124
|
+
*/
|
|
125
|
+
input[type=range]::-webkit-slider-runnable-track {
|
|
126
|
+
width: 100%;
|
|
127
|
+
height: 8.4px;
|
|
59
128
|
cursor: pointer;
|
|
60
|
-
-
|
|
61
|
-
|
|
129
|
+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
130
|
+
background: var(--pd-range-track-col, var(--pd-default-light-col));
|
|
131
|
+
border-radius: 1.3px;
|
|
132
|
+
border: 0.2px solid #010101;
|
|
62
133
|
}
|
|
134
|
+
|
|
63
135
|
input[type=range]:focus::-webkit-slider-runnable-track {
|
|
64
|
-
background:
|
|
136
|
+
background: var(--pd-range-track-hover-col, var(--pd-default-light-col));
|
|
137
|
+
border: 0.2px solid var(--pd-default-hover-col);
|
|
65
138
|
}
|
|
139
|
+
|
|
140
|
+
/**
|
|
141
|
+
* Firefox track definition.
|
|
142
|
+
*/
|
|
66
143
|
input[type=range]::-moz-range-track {
|
|
67
144
|
width: 100%;
|
|
68
|
-
height:
|
|
69
|
-
cursor: pointer;
|
|
70
|
-
animation: 0.2s;
|
|
71
|
-
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
72
|
-
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
73
|
-
border-radius: 3px;
|
|
74
|
-
border: 0px solid #000101;
|
|
75
|
-
}
|
|
76
|
-
input[type=range]::-moz-range-thumb {
|
|
77
|
-
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
78
|
-
border: 0px solid #000000;
|
|
79
|
-
height: 20px;
|
|
80
|
-
width: 39px;
|
|
81
|
-
border-radius: 3px;
|
|
82
|
-
background: var(--my-primary-color);
|
|
145
|
+
height: 8.4px;
|
|
83
146
|
cursor: pointer;
|
|
147
|
+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
148
|
+
background: var(--pd-range-track-col, var(--pd-default-light-col));
|
|
149
|
+
border-radius: 1.3px;
|
|
150
|
+
border: 0.2px solid #010101;
|
|
84
151
|
}
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
* IE track definition.
|
|
155
|
+
* Check: Why are they different.
|
|
156
|
+
*/
|
|
85
157
|
input[type=range]::-ms-track {
|
|
158
|
+
|
|
159
|
+
height: 8.4px;
|
|
86
160
|
width: 100%;
|
|
87
|
-
height: 12.8px;
|
|
88
161
|
cursor: pointer;
|
|
89
|
-
|
|
90
|
-
|
|
162
|
+
|
|
163
|
+
/* Hides the slider so custom styles can be added */
|
|
164
|
+
background: transparent;
|
|
91
165
|
border-color: transparent;
|
|
92
|
-
border-width: 39px 0;
|
|
93
166
|
color: transparent;
|
|
167
|
+
|
|
168
|
+
border-width: 16px 0;
|
|
94
169
|
}
|
|
95
170
|
input[type=range]::-ms-fill-lower {
|
|
96
|
-
background:
|
|
97
|
-
border:
|
|
98
|
-
border-radius:
|
|
99
|
-
box-shadow:
|
|
100
|
-
}
|
|
101
|
-
input[type=range]::-ms-fill-upper {
|
|
102
|
-
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
103
|
-
border: 0px solid #000101;
|
|
104
|
-
border-radius: 7px;
|
|
105
|
-
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
106
|
-
}
|
|
107
|
-
input[type=range]::-ms-thumb {
|
|
108
|
-
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
109
|
-
border: 0px solid #000000;
|
|
110
|
-
height: 20px;
|
|
111
|
-
width: 39px;
|
|
112
|
-
border-radius: 3px;
|
|
113
|
-
background: var(--my-primary-color);
|
|
114
|
-
cursor: pointer;
|
|
115
|
-
}
|
|
116
|
-
:host label.value {
|
|
117
|
-
flex: 0 1 10%;
|
|
171
|
+
background: var(--pd-range-track-col, var(--pd-default-light-col));
|
|
172
|
+
border: 0.2px solid #010101;
|
|
173
|
+
border-radius: 2.6px;
|
|
174
|
+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
118
175
|
}
|
|
119
176
|
input[type=range]:focus::-ms-fill-lower {
|
|
120
|
-
background:
|
|
121
|
-
}
|
|
122
|
-
input[type=range]:focus::-ms-fill-upper {
|
|
123
|
-
background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
|
|
177
|
+
background: #3071a9;
|
|
124
178
|
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
text-align: center;
|
|
131
|
-
position: relative;
|
|
132
|
-
}
|
|
133
|
-
.legend label::before {
|
|
134
|
-
background-color: rgb(var(--my-lighter-background-color));
|
|
135
|
-
content: "";
|
|
136
|
-
height: .5rem;
|
|
137
|
-
position: absolute;
|
|
138
|
-
left: 50%;
|
|
139
|
-
top: -.5rem;
|
|
140
|
-
width: 1px;
|
|
141
|
-
}
|
|
142
|
-
.range_legend_label--selected {
|
|
143
|
-
color: var(--my-primary-color);
|
|
179
|
+
input[type=range]::-ms-fill-upper {
|
|
180
|
+
background: var(--pd-range-track-col, var(--pd-default-light-col));
|
|
181
|
+
border: 0.2px solid #010101;
|
|
182
|
+
border-radius: 2.6px;
|
|
183
|
+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
144
184
|
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
content: '';
|
|
148
|
-
position: absolute;
|
|
149
|
-
left: 20%;
|
|
150
|
-
top: 100%;
|
|
151
|
-
width: 0;
|
|
152
|
-
height: 0;
|
|
153
|
-
border-left: 20px solid transparent;
|
|
154
|
-
border-right: 20px solid transparent;
|
|
155
|
-
border-bottom: 20px solid rgb(var(--my-lighter-background-color));
|
|
185
|
+
input[type=range]:focus::-ms-fill-upper {
|
|
186
|
+
background: #367ebd;
|
|
156
187
|
}
|
|
157
188
|
`
|
|
158
189
|
];
|
|
159
190
|
}
|
|
160
191
|
|
|
161
192
|
render() {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
${
|
|
193
|
+
const inputId = `${this.id}Range`;
|
|
194
|
+
// TODO: step kann hier nicht übergeben werden, wird dann initial nicht immer richtig angezeigt (bei komma rundungen)???
|
|
195
|
+
return html`
|
|
196
|
+
${this._renderLabel(inputId, this.value)}
|
|
197
|
+
<div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
|
|
198
|
+
<input
|
|
199
|
+
id="${inputId}"
|
|
200
|
+
?disabled=${this.disabled}
|
|
201
|
+
type="range"
|
|
202
|
+
name="${this.name || this.valueName}"
|
|
203
|
+
@change="${this._onChange}"
|
|
204
|
+
min="${this.min}" max="${this.max}" step="${this.step}"
|
|
205
|
+
.value="${this.value}"
|
|
206
|
+
/>
|
|
207
|
+
</div>
|
|
208
|
+
${this._renderErrorMsg()}
|
|
169
209
|
`;
|
|
170
210
|
}
|
|
171
211
|
|
|
@@ -174,15 +214,6 @@ export class PdRange extends PdBaseUIInput {
|
|
|
174
214
|
this._input = this.shadowRoot.querySelector('input');
|
|
175
215
|
}
|
|
176
216
|
|
|
177
|
-
_addLegend() {
|
|
178
|
-
const steps = this.max - this.min;
|
|
179
|
-
const labels = [];
|
|
180
|
-
for (let i = 0; i <= steps; i+=1) {
|
|
181
|
-
labels.push(html`<label class="${i + this.step === this.value * 1 ? 'range_legend_label--selected' : ''}">${i + this.step}</label>`);
|
|
182
|
-
}
|
|
183
|
-
return html`<div class="legend">${labels}</div>`
|
|
184
|
-
}
|
|
185
|
-
|
|
186
217
|
_onChange() {
|
|
187
218
|
this.value = this._input.value;
|
|
188
219
|
this.dispatchEvent(new CustomEvent('changed', {
|
package/stories/range.stories.js
CHANGED
|
@@ -17,50 +17,11 @@ export default {
|
|
|
17
17
|
},
|
|
18
18
|
};
|
|
19
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
|
-
}
|
|
20
|
+
function Template() {
|
|
59
21
|
return html`
|
|
60
22
|
<h3>Default Input Range</h3>
|
|
61
23
|
<pd-range id="testRangeId"
|
|
62
|
-
|
|
63
|
-
label="Range auswählen"
|
|
24
|
+
label="Range Label"
|
|
64
25
|
min="1" max="12" step="1"
|
|
65
26
|
defaultValue="6"
|
|
66
27
|
showLegend>
|