@zywave/zui-slider 4.0.6 → 4.0.8-pre.1
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/CHANGELOG.md +8 -0
- package/demo/index.html +2 -2
- package/dist/custom-elements.json +55 -30
- package/dist/zui-slider-css.d.ts +1 -1
- package/dist/zui-slider-css.js +2 -2
- package/dist/zui-slider-css.js.map +1 -1
- package/dist/zui-slider.d.ts +2 -2
- package/dist/zui-slider.js +6 -9
- package/dist/zui-slider.js.map +1 -1
- package/lab.html +1 -1
- package/package.json +3 -13
- package/src/zui-slider-css.js +2 -2
- package/src/zui-slider.ts +8 -7
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [4.0.7](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-slider@4.0.7-pre.0...@zywave/zui-slider@4.0.7) (2021-10-29)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @zywave/zui-slider
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [4.0.6](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-slider@4.0.6-pre.0...@zywave/zui-slider@4.0.6) (2021-09-30)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @zywave/zui-slider
|
package/demo/index.html
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
<link rel="stylesheet" href="../../../../node_modules/@zywave/zui-base-styles/dist/zui-base-styles.css" />
|
|
3
3
|
|
|
4
4
|
<script type="module" defer>
|
|
5
|
-
if (!
|
|
5
|
+
if (!customElements.get("zui-slider")) {
|
|
6
6
|
import("../dist/index.js");
|
|
7
7
|
}
|
|
8
|
-
if (!
|
|
8
|
+
if (!customElements.get("zui-button")) {
|
|
9
9
|
import("../../zui-button/dist/index.js");
|
|
10
10
|
}
|
|
11
11
|
import("../../../../scripts/demo/demo.js");
|
|
@@ -14,43 +14,35 @@
|
|
|
14
14
|
{
|
|
15
15
|
"kind": "field",
|
|
16
16
|
"name": "_formControlSelector",
|
|
17
|
-
"type": {
|
|
18
|
-
"text": "string"
|
|
19
|
-
},
|
|
20
17
|
"privacy": "protected"
|
|
21
18
|
},
|
|
22
19
|
{
|
|
23
20
|
"kind": "field",
|
|
24
21
|
"name": "_formValue",
|
|
25
|
-
"type": {
|
|
26
|
-
"text": "string"
|
|
27
|
-
},
|
|
28
22
|
"privacy": "protected"
|
|
29
23
|
},
|
|
30
24
|
{
|
|
31
25
|
"kind": "method",
|
|
32
26
|
"name": "formResetCallback",
|
|
33
|
-
"privacy": "protected"
|
|
34
|
-
"return": {
|
|
35
|
-
"type": {
|
|
36
|
-
"text": "void"
|
|
37
|
-
}
|
|
38
|
-
}
|
|
27
|
+
"privacy": "protected"
|
|
39
28
|
},
|
|
40
29
|
{
|
|
41
30
|
"kind": "field",
|
|
42
31
|
"name": "#defaultValue",
|
|
43
|
-
"privacy": "private"
|
|
32
|
+
"privacy": "private",
|
|
33
|
+
"default": "`${DEFAULT_MAX / 2}`"
|
|
44
34
|
},
|
|
45
35
|
{
|
|
46
36
|
"kind": "field",
|
|
47
37
|
"name": "#value",
|
|
48
|
-
"privacy": "private"
|
|
38
|
+
"privacy": "private",
|
|
39
|
+
"default": "`${DEFAULT_MAX / 2}`"
|
|
49
40
|
},
|
|
50
41
|
{
|
|
51
42
|
"kind": "field",
|
|
52
43
|
"name": "value",
|
|
53
|
-
"description": "Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control"
|
|
44
|
+
"description": "Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control",
|
|
45
|
+
"attribute": "value"
|
|
54
46
|
},
|
|
55
47
|
{
|
|
56
48
|
"kind": "field",
|
|
@@ -60,24 +52,42 @@
|
|
|
60
52
|
{
|
|
61
53
|
"kind": "field",
|
|
62
54
|
"name": "min",
|
|
55
|
+
"type": {
|
|
56
|
+
"text": "number"
|
|
57
|
+
},
|
|
58
|
+
"default": "0",
|
|
63
59
|
"description": "Represents the minimum permitted value",
|
|
64
|
-
"
|
|
60
|
+
"attribute": "min"
|
|
65
61
|
},
|
|
66
62
|
{
|
|
67
63
|
"kind": "field",
|
|
68
64
|
"name": "max",
|
|
69
|
-
"
|
|
65
|
+
"default": "100",
|
|
66
|
+
"description": "Represents the maximum permitted value",
|
|
67
|
+
"attribute": "max",
|
|
68
|
+
"type": {
|
|
69
|
+
"text": "number"
|
|
70
|
+
}
|
|
70
71
|
},
|
|
71
72
|
{
|
|
72
73
|
"kind": "field",
|
|
73
74
|
"name": "step",
|
|
75
|
+
"type": {
|
|
76
|
+
"text": "number"
|
|
77
|
+
},
|
|
78
|
+
"default": "0",
|
|
74
79
|
"description": "Represents the stepping interval, used both for user interface and validation purposes",
|
|
75
|
-
"
|
|
80
|
+
"attribute": "step"
|
|
76
81
|
},
|
|
77
82
|
{
|
|
78
83
|
"kind": "field",
|
|
79
84
|
"name": "noText",
|
|
80
|
-
"
|
|
85
|
+
"type": {
|
|
86
|
+
"text": "boolean"
|
|
87
|
+
},
|
|
88
|
+
"default": "false",
|
|
89
|
+
"description": "Represents that this control must be filled in for form submission",
|
|
90
|
+
"attribute": "no-text"
|
|
81
91
|
},
|
|
82
92
|
{
|
|
83
93
|
"kind": "field",
|
|
@@ -137,7 +147,7 @@
|
|
|
137
147
|
"type": {
|
|
138
148
|
"text": "string"
|
|
139
149
|
},
|
|
140
|
-
"description": "
|
|
150
|
+
"description": "The name of this element that is associated with form submission",
|
|
141
151
|
"name": "name",
|
|
142
152
|
"kind": "field"
|
|
143
153
|
},
|
|
@@ -145,7 +155,7 @@
|
|
|
145
155
|
"type": {
|
|
146
156
|
"text": "boolean"
|
|
147
157
|
},
|
|
148
|
-
"description": "
|
|
158
|
+
"description": "Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission",
|
|
149
159
|
"name": "disabled",
|
|
150
160
|
"kind": "field"
|
|
151
161
|
},
|
|
@@ -153,7 +163,7 @@
|
|
|
153
163
|
"type": {
|
|
154
164
|
"text": "boolean"
|
|
155
165
|
},
|
|
156
|
-
"description": "
|
|
166
|
+
"description": "Represents whether a user can make changes to this element; the value of this element will still be included in the form submission",
|
|
157
167
|
"name": "readOnly",
|
|
158
168
|
"kind": "field"
|
|
159
169
|
},
|
|
@@ -161,7 +171,7 @@
|
|
|
161
171
|
"type": {
|
|
162
172
|
"text": "boolean"
|
|
163
173
|
},
|
|
164
|
-
"description": "
|
|
174
|
+
"description": "If true, this element will be focused when connected to the document",
|
|
165
175
|
"name": "autofocus",
|
|
166
176
|
"kind": "field"
|
|
167
177
|
}
|
|
@@ -179,28 +189,28 @@
|
|
|
179
189
|
"type": {
|
|
180
190
|
"text": "string"
|
|
181
191
|
},
|
|
182
|
-
"description": "
|
|
192
|
+
"description": "The name of this element that is associated with form submission",
|
|
183
193
|
"name": "name"
|
|
184
194
|
},
|
|
185
195
|
{
|
|
186
196
|
"type": {
|
|
187
197
|
"text": "boolean"
|
|
188
198
|
},
|
|
189
|
-
"description": "
|
|
199
|
+
"description": "Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission",
|
|
190
200
|
"name": "disabled"
|
|
191
201
|
},
|
|
192
202
|
{
|
|
193
203
|
"type": {
|
|
194
204
|
"text": "boolean"
|
|
195
205
|
},
|
|
196
|
-
"description": "
|
|
206
|
+
"description": "Represents whether a user can make changes to this element; the value of this element will still be included in the form submission",
|
|
197
207
|
"name": "readonly"
|
|
198
208
|
},
|
|
199
209
|
{
|
|
200
210
|
"type": {
|
|
201
211
|
"text": "boolean"
|
|
202
212
|
},
|
|
203
|
-
"description": "
|
|
213
|
+
"description": "If true, this element will be focused when connected to the document",
|
|
204
214
|
"name": "autofocus"
|
|
205
215
|
},
|
|
206
216
|
{
|
|
@@ -210,29 +220,44 @@
|
|
|
210
220
|
},
|
|
211
221
|
{
|
|
212
222
|
"name": "min",
|
|
213
|
-
"
|
|
223
|
+
"type": {
|
|
224
|
+
"text": "number"
|
|
225
|
+
},
|
|
214
226
|
"default": "0",
|
|
227
|
+
"description": "Represents the minimum permitted value",
|
|
215
228
|
"fieldName": "min"
|
|
216
229
|
},
|
|
217
230
|
{
|
|
218
231
|
"name": "max",
|
|
232
|
+
"default": "DEFAULT_MAX",
|
|
219
233
|
"description": "Represents the maximum permitted value",
|
|
234
|
+
"resolveInitializer": {
|
|
235
|
+
"module": "src/zui-slider.ts"
|
|
236
|
+
},
|
|
220
237
|
"fieldName": "max"
|
|
221
238
|
},
|
|
222
239
|
{
|
|
223
240
|
"name": "step",
|
|
224
|
-
"
|
|
241
|
+
"type": {
|
|
242
|
+
"text": "number"
|
|
243
|
+
},
|
|
225
244
|
"default": "0",
|
|
245
|
+
"description": "Represents the stepping interval, used both for user interface and validation purposes",
|
|
226
246
|
"fieldName": "step"
|
|
227
247
|
},
|
|
228
248
|
{
|
|
229
249
|
"name": "no-text",
|
|
250
|
+
"type": {
|
|
251
|
+
"text": "boolean"
|
|
252
|
+
},
|
|
253
|
+
"default": "false",
|
|
230
254
|
"description": "Represents that this control must be filled in for form submission",
|
|
231
255
|
"fieldName": "noText"
|
|
232
256
|
}
|
|
233
257
|
],
|
|
234
258
|
"superclass": {
|
|
235
|
-
"name": "ZuiFormAssociatedElement"
|
|
259
|
+
"name": "ZuiFormAssociatedElement",
|
|
260
|
+
"package": "@zywave/zui-base"
|
|
236
261
|
},
|
|
237
262
|
"tagName": "zui-slider",
|
|
238
263
|
"customElement": true
|
package/dist/zui-slider-css.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const style: import("lit
|
|
1
|
+
export const style: import("lit").CSSResult;
|
package/dist/zui-slider-css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { css } from 'lit
|
|
2
|
-
export const style = css `:host{--zui-slider-thumb-size: 1.875rem;display:block;padding:calc(var(--zui-slider-thumb-size)
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `:host{--zui-slider-thumb-size: 1.875rem;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host input{width:100%;height:.25rem;vertical-align:middle;background:var(--zui-gray-200);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none}:host input:disabled{cursor:not-allowed}:host input::-webkit-slider-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;-webkit-appearance:none}:host input:disabled::-webkit-slider-thumb{background-color:var(--zui-gray)}:host input::-moz-range-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border:0;border-radius:50%;-moz-appearance:none}:host input:disabled::-moz-range-thumb{background-color:var(--zui-gray)}:host span{position:absolute;top:.0625rem;display:flex;width:var(--zui-slider-thumb-size);height:100%;justify-content:center;align-items:center;font-weight:600;color:#fff;pointer-events:none}`;
|
|
3
3
|
//# sourceMappingURL=zui-slider-css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-slider-css.js","sourceRoot":"","sources":["../src/zui-slider-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"zui-slider-css.js","sourceRoot":"","sources":["../src/zui-slider-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,igCAAigC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{--zui-slider-thumb-size: 1.875rem;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host input{width:100%;height:.25rem;vertical-align:middle;background:var(--zui-gray-200);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none}:host input:disabled{cursor:not-allowed}:host input::-webkit-slider-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;-webkit-appearance:none}:host input:disabled::-webkit-slider-thumb{background-color:var(--zui-gray)}:host input::-moz-range-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border:0;border-radius:50%;-moz-appearance:none}:host input:disabled::-moz-range-thumb{background-color:var(--zui-gray)}:host span{position:absolute;top:.0625rem;display:flex;width:var(--zui-slider-thumb-size);height:100%;justify-content:center;align-items:center;font-weight:600;color:#fff;pointer-events:none}`;\n"]}
|
package/dist/zui-slider.d.ts
CHANGED
|
@@ -45,9 +45,9 @@ export declare class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
45
45
|
*/
|
|
46
46
|
noText: boolean;
|
|
47
47
|
get progress(): number;
|
|
48
|
-
static get styles(): (import("lit
|
|
48
|
+
static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
|
|
49
49
|
connectedCallback(): void;
|
|
50
|
-
render(): import("lit-
|
|
50
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
51
51
|
private _renderText;
|
|
52
52
|
private _onInput;
|
|
53
53
|
private _onChange;
|
package/dist/zui-slider.js
CHANGED
|
@@ -17,9 +17,9 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
|
|
|
17
17
|
};
|
|
18
18
|
var _ZuiSlider_defaultValue, _ZuiSlider_value;
|
|
19
19
|
import { ZuiFormAssociatedElement } from '@zywave/zui-base';
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
20
|
+
import { html } from 'lit';
|
|
21
|
+
import { property } from 'lit/decorators.js';
|
|
22
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
23
23
|
import { style } from './zui-slider-css.js';
|
|
24
24
|
const DEFAULT_MAX = 100;
|
|
25
25
|
/**
|
|
@@ -35,7 +35,7 @@ const DEFAULT_MAX = 100;
|
|
|
35
35
|
* @prop {boolean} readOnly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission
|
|
36
36
|
* @prop {boolean} autofocus - If true, this element will be focused when connected to the document
|
|
37
37
|
*/
|
|
38
|
-
|
|
38
|
+
export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
39
39
|
constructor() {
|
|
40
40
|
super(...arguments);
|
|
41
41
|
_ZuiSlider_defaultValue.set(this, `${DEFAULT_MAX / 2}`);
|
|
@@ -160,7 +160,7 @@ let ZuiSlider = class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
160
160
|
}
|
|
161
161
|
return value.toString();
|
|
162
162
|
}
|
|
163
|
-
}
|
|
163
|
+
}
|
|
164
164
|
_ZuiSlider_defaultValue = new WeakMap(), _ZuiSlider_value = new WeakMap();
|
|
165
165
|
__decorate([
|
|
166
166
|
property()
|
|
@@ -177,8 +177,5 @@ __decorate([
|
|
|
177
177
|
__decorate([
|
|
178
178
|
property({ type: Boolean, attribute: 'no-text' })
|
|
179
179
|
], ZuiSlider.prototype, "noText", void 0);
|
|
180
|
-
ZuiSlider
|
|
181
|
-
customElement('zui-slider')
|
|
182
|
-
], ZuiSlider);
|
|
183
|
-
export { ZuiSlider };
|
|
180
|
+
window.customElements.define('zui-slider', ZuiSlider);
|
|
184
181
|
//# sourceMappingURL=zui-slider.js.map
|
package/dist/zui-slider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiFormAssociatedElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\nconst DEFAULT_MAX = 100;\n\n/**\n * @element zui-slider\n *\n * @attr {string} name - The name of this element that is associated with form submission\n * @attr {boolean} disabled - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @attr {boolean} readonly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @attr {boolean} autofocus - If true, this element will be focused when connected to the document\n *\n * @prop {string} name - The name of this element that is associated with form submission\n * @prop {boolean} disabled - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @prop {boolean} readOnly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @prop {boolean} autofocus - If true, this element will be focused when connected to the document\n */\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n protected get _formControlSelector() {\n return 'input';\n }\n\n protected get _formValue() {\n return this.value;\n }\n\n protected formResetCallback() {\n this.value = this.#defaultValue;\n }\n\n #defaultValue = `${DEFAULT_MAX / 2}`;\n\n #value = `${DEFAULT_MAX / 2}`;\n\n /**\n * Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n */\n @property()\n get value() {\n return this.#value;\n }\n\n set value(val) {\n const oldVal = this.#value;\n val = this._ensureValidValue(val);\n this.#value = val;\n this._setFormValue(this.#value);\n this.requestUpdate('value', oldVal);\n }\n\n /**\n * Returns the value of the element, interpreted as one of the following, in order:\n A number\n NaN if conversion is impossible\n */\n get valueAsNumber() {\n return parseFloat(this.#value);\n }\n\n /**\n * Represents the minimum permitted value\n */\n @property({ type: Number }) min = 0;\n\n /**\n * Represents the maximum permitted value\n */\n @property({ type: Number }) max = DEFAULT_MAX;\n\n /**\n * Represents the stepping interval, used both for user interface and validation purposes\n */\n @property({ type: Number }) step = 0;\n\n /**\n * Represents that this control must be filled in for form submission\n */\n @property({ type: Boolean, attribute: 'no-text' }) noText = false;\n\n get progress() {\n return ((this.valueAsNumber - this.min) / (this.max - this.min)) * 100;\n }\n\n static get styles() {\n return [super.styles, style];\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // we want to go a little faster than LitElement and behave more like native HTML Form Associated Elements\n let value = this.getAttribute('value') ?? this.value;\n const max = this.getAttribute('max') ?? this.max;\n const min = this.getAttribute('min') ?? this.min;\n\n value = this._ensureValidValue(value, min, max);\n\n this.#defaultValue = value;\n this._setFormValue(value.toString());\n }\n\n render() {\n const progressColor = this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n const styles = {\n background: `linear-gradient(to right, ${progressColor} 0%, ${progressColor} ${this.progress}%, var(--zui-gray-200) ${this.progress}%, var(--zui-gray-200) 100%)`,\n };\n return html`<input\n style=${styleMap(styles)}\n type=\"range\"\n .value=\"${this.value}\"\n .min=\"${this.min}\"\n .max=\"${this.max}\"\n .step=\"${this.step}\"\n ?disabled=\"${this.disabled}\"\n @input=\"${this._onInput}\"\n @change=\"${this._onChange}\"\n />${this._renderText()}`;\n }\n\n private _renderText() {\n if (this.noText) {\n return html``;\n }\n const thumbOffset = `var(--zui-slider-thumb-size) * ${this.progress / 100}`;\n const styles = {\n left: `calc(${this.progress}% - ${thumbOffset} + 0.125rem)`,\n };\n return html`<span style=${styleMap(styles)}>${this.value}</span>`;\n }\n\n private _onInput(e: Event) {\n this.value = (e.target as HTMLInputElement).value;\n }\n\n private _onChange() {\n this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true }));\n }\n\n private _ensureValidValue(value: string | number, min?: number | string | null, max?: number | string | null) {\n if (value === '') {\n return value;\n }\n min = min ?? this.min;\n max = max ?? this.max;\n\n if (typeof value === 'string') {\n value = parseFloat(value);\n }\n if (typeof min === 'string') {\n min = parseFloat(min);\n }\n if (typeof max === 'string') {\n max = parseFloat(max);\n }\n\n if (value < min) {\n value = min;\n } else if (value > max) {\n value = max;\n }\n\n return value.toString();\n }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-slider': ZuiSlider;\n }\n}\n"]}
|
package/lab.html
CHANGED
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
// window.zui.importCustomStyles();
|
|
62
62
|
|
|
63
63
|
// Uncomment to test FOUC styling
|
|
64
|
-
//
|
|
64
|
+
// customElements.define = function () { };
|
|
65
65
|
|
|
66
66
|
document.querySelectorAll('zui-slider').forEach(el => el.addEventListener('change', (e) => {
|
|
67
67
|
console.log(`id: ${e.target.id}, value: ${e.target.value}`);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zywave/zui-slider",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.8-pre.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -16,22 +16,12 @@
|
|
|
16
16
|
"watcher:start": "node ../../../scripts/node/watcher.mjs",
|
|
17
17
|
"analyze": "cem analyze --globs src/zui-*.ts --litelement --outdir dist"
|
|
18
18
|
},
|
|
19
|
-
"devDependencies": {
|
|
20
|
-
"autoprefixer": "^8.2.0",
|
|
21
|
-
"browser-sync": "^2.23.7",
|
|
22
|
-
"del": "^3.0.0",
|
|
23
|
-
"node-sass": "^4.14.0",
|
|
24
|
-
"polyserve": "^0.27.8",
|
|
25
|
-
"postcss": "^6.0.21",
|
|
26
|
-
"rollup": "^0.58.2",
|
|
27
|
-
"rollup-plugin-babel": "^4.0.0-beta.4"
|
|
28
|
-
},
|
|
29
19
|
"publishConfig": {
|
|
30
20
|
"access": "public"
|
|
31
21
|
},
|
|
32
22
|
"dependencies": {
|
|
33
|
-
"@zywave/zui-base": "^4.1.
|
|
23
|
+
"@zywave/zui-base": "^4.1.19-pre.1"
|
|
34
24
|
},
|
|
35
25
|
"customElements": "dist/custom-elements.json",
|
|
36
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "f84f16138879b6b119b1198f302646b6e0cc31e2"
|
|
37
27
|
}
|
package/src/zui-slider-css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { css } from 'lit
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
export const style = css`:host{--zui-slider-thumb-size: 1.875rem;display:block;padding:calc(var(--zui-slider-thumb-size)
|
|
3
|
+
export const style = css`:host{--zui-slider-thumb-size: 1.875rem;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host input{width:100%;height:.25rem;vertical-align:middle;background:var(--zui-gray-200);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none}:host input:disabled{cursor:not-allowed}:host input::-webkit-slider-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;-webkit-appearance:none}:host input:disabled::-webkit-slider-thumb{background-color:var(--zui-gray)}:host input::-moz-range-thumb{width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border:0;border-radius:50%;-moz-appearance:none}:host input:disabled::-moz-range-thumb{background-color:var(--zui-gray)}:host span{position:absolute;top:.0625rem;display:flex;width:var(--zui-slider-thumb-size);height:100%;justify-content:center;align-items:center;font-weight:600;color:#fff;pointer-events:none}`;
|
package/src/zui-slider.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ZuiFormAssociatedElement } from '@zywave/zui-base';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
5
5
|
import { style } from './zui-slider-css.js';
|
|
6
6
|
|
|
7
7
|
const DEFAULT_MAX = 100;
|
|
@@ -19,17 +19,16 @@ const DEFAULT_MAX = 100;
|
|
|
19
19
|
* @prop {boolean} readOnly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission
|
|
20
20
|
* @prop {boolean} autofocus - If true, this element will be focused when connected to the document
|
|
21
21
|
*/
|
|
22
|
-
@customElement('zui-slider')
|
|
23
22
|
export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
24
|
-
protected get _formControlSelector()
|
|
23
|
+
protected get _formControlSelector() {
|
|
25
24
|
return 'input';
|
|
26
25
|
}
|
|
27
26
|
|
|
28
|
-
protected get _formValue()
|
|
27
|
+
protected get _formValue() {
|
|
29
28
|
return this.value;
|
|
30
29
|
}
|
|
31
30
|
|
|
32
|
-
protected formResetCallback()
|
|
31
|
+
protected formResetCallback() {
|
|
33
32
|
this.value = this.#defaultValue;
|
|
34
33
|
}
|
|
35
34
|
|
|
@@ -168,6 +167,8 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
168
167
|
}
|
|
169
168
|
}
|
|
170
169
|
|
|
170
|
+
window.customElements.define('zui-slider', ZuiSlider);
|
|
171
|
+
|
|
171
172
|
declare global {
|
|
172
173
|
interface HTMLElementTagNameMap {
|
|
173
174
|
'zui-slider': ZuiSlider;
|