@zywave/zui-slider 4.4.0-pre.3 → 4.4.0-pre.4
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/dist/custom-elements.json +188 -7
- package/dist/zui-slider-css.js +1 -1
- package/dist/zui-slider-css.js.map +1 -1
- package/dist/zui-slider.d.ts +16 -21
- package/dist/zui-slider.js +372 -91
- package/dist/zui-slider.js.map +1 -1
- package/docs/demo.html +99 -78
- package/lab.html +415 -15
- package/package.json +2 -2
- package/src/zui-slider-css.js +1 -1
- package/src/zui-slider.scss +32 -7
- package/src/zui-slider.ts +380 -89
- package/test/zui-slider.test.ts +561 -131
|
@@ -72,6 +72,24 @@
|
|
|
72
72
|
},
|
|
73
73
|
"default": "'100'"
|
|
74
74
|
},
|
|
75
|
+
{
|
|
76
|
+
"kind": "field",
|
|
77
|
+
"name": "#cachedNormalizedSteps",
|
|
78
|
+
"privacy": "private",
|
|
79
|
+
"type": {
|
|
80
|
+
"text": "{ value: number | string; label: string }[] | null"
|
|
81
|
+
},
|
|
82
|
+
"default": "null"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"kind": "field",
|
|
86
|
+
"name": "#cachedNumericValues",
|
|
87
|
+
"privacy": "private",
|
|
88
|
+
"type": {
|
|
89
|
+
"text": "number[] | null"
|
|
90
|
+
},
|
|
91
|
+
"default": "null"
|
|
92
|
+
},
|
|
75
93
|
{
|
|
76
94
|
"kind": "field",
|
|
77
95
|
"name": "#thumbInputState",
|
|
@@ -127,6 +145,25 @@
|
|
|
127
145
|
},
|
|
128
146
|
"default": "{ thumb: { show: () => this.#showThumbInput('thumb'), hide: () => this.#scheduleHideThumbInput('thumb'), focus: () => this.#focusFloatingInput('thumb'), blur: () => this.#blurFloatingInput('thumb'), }, startThumb: { show: () => this.#showThumbInput('startThumb'), hide: () => this.#scheduleHideThumbInput('startThumb'), focus: () => this.#focusFloatingInput('startThumb'), blur: () => this.#blurFloatingInput('startThumb'), }, endThumb: { show: () => this.#showThumbInput('endThumb'), hide: () => this.#scheduleHideThumbInput('endThumb'), focus: () => this.#focusFloatingInput('endThumb'), blur: () => this.#blurFloatingInput('endThumb'), }, }"
|
|
129
147
|
},
|
|
148
|
+
{
|
|
149
|
+
"kind": "field",
|
|
150
|
+
"name": "steps",
|
|
151
|
+
"type": {
|
|
152
|
+
"text": "StepInput[]"
|
|
153
|
+
},
|
|
154
|
+
"default": "[]",
|
|
155
|
+
"description": "Custom step values; overrides min/max/step. Thumbs at equal visual intervals. Accepts number, string, or { value, label? }. Use { value: Infinity, label: '...' } for an unbounded overflow step. Labels with commas must be set via the property.",
|
|
156
|
+
"attribute": "steps"
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"kind": "field",
|
|
160
|
+
"name": "stepParser",
|
|
161
|
+
"type": {
|
|
162
|
+
"text": "((input: string) => number | string | null) | null"
|
|
163
|
+
},
|
|
164
|
+
"default": "null",
|
|
165
|
+
"description": "Resolves user-typed strings to a step value; returns a number (snap to nearest), a valid step label, or null to reject. Must be set via the property."
|
|
166
|
+
},
|
|
130
167
|
{
|
|
131
168
|
"kind": "method",
|
|
132
169
|
"name": "#singleInput",
|
|
@@ -169,6 +206,11 @@
|
|
|
169
206
|
"name": "#clearAllThumbInputState",
|
|
170
207
|
"privacy": "private"
|
|
171
208
|
},
|
|
209
|
+
{
|
|
210
|
+
"kind": "method",
|
|
211
|
+
"name": "#syncValuesToSteps",
|
|
212
|
+
"privacy": "private"
|
|
213
|
+
},
|
|
172
214
|
{
|
|
173
215
|
"kind": "method",
|
|
174
216
|
"name": "#clampToRange",
|
|
@@ -186,7 +228,7 @@
|
|
|
186
228
|
}
|
|
187
229
|
}
|
|
188
230
|
],
|
|
189
|
-
"description": "
|
|
231
|
+
"description": "Steps mode: snaps to nearest step. Normal mode: clamps to [min, max]. Empty string passes through."
|
|
190
232
|
},
|
|
191
233
|
{
|
|
192
234
|
"kind": "field",
|
|
@@ -270,13 +312,13 @@
|
|
|
270
312
|
},
|
|
271
313
|
{
|
|
272
314
|
"kind": "field",
|
|
273
|
-
"name": "
|
|
315
|
+
"name": "showStepLabels",
|
|
274
316
|
"type": {
|
|
275
317
|
"text": "boolean"
|
|
276
318
|
},
|
|
277
319
|
"default": "false",
|
|
278
|
-
"description": "
|
|
279
|
-
"attribute": "show-
|
|
320
|
+
"description": "When true, displays each step's label (or its value if no label was provided) beneath the corresponding dot on the track",
|
|
321
|
+
"attribute": "show-step-labels"
|
|
280
322
|
},
|
|
281
323
|
{
|
|
282
324
|
"kind": "field",
|
|
@@ -308,6 +350,118 @@
|
|
|
308
350
|
}
|
|
309
351
|
]
|
|
310
352
|
},
|
|
353
|
+
{
|
|
354
|
+
"kind": "field",
|
|
355
|
+
"name": "#stepsMode",
|
|
356
|
+
"privacy": "private",
|
|
357
|
+
"type": {
|
|
358
|
+
"text": "boolean"
|
|
359
|
+
},
|
|
360
|
+
"readonly": true
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
"kind": "field",
|
|
364
|
+
"name": "#nativeRangeAttrs",
|
|
365
|
+
"privacy": "private",
|
|
366
|
+
"type": {
|
|
367
|
+
"text": "{ nativeMin: string; nativeMax: string; nativeStep: string }"
|
|
368
|
+
},
|
|
369
|
+
"readonly": true
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
"kind": "field",
|
|
373
|
+
"name": "#normalizedSteps",
|
|
374
|
+
"privacy": "private",
|
|
375
|
+
"type": {
|
|
376
|
+
"text": "{ value: number | string; label: string }[]"
|
|
377
|
+
},
|
|
378
|
+
"description": "Normalizes each StepInput to `{ value, label }`. Cached after first access.",
|
|
379
|
+
"readonly": true
|
|
380
|
+
},
|
|
381
|
+
{
|
|
382
|
+
"kind": "method",
|
|
383
|
+
"name": "#stepsIndexOf",
|
|
384
|
+
"privacy": "private",
|
|
385
|
+
"return": {
|
|
386
|
+
"type": {
|
|
387
|
+
"text": "number"
|
|
388
|
+
}
|
|
389
|
+
},
|
|
390
|
+
"parameters": [
|
|
391
|
+
{
|
|
392
|
+
"name": "val",
|
|
393
|
+
"type": {
|
|
394
|
+
"text": "string"
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
]
|
|
398
|
+
},
|
|
399
|
+
{
|
|
400
|
+
"kind": "method",
|
|
401
|
+
"name": "#stepAt",
|
|
402
|
+
"privacy": "private",
|
|
403
|
+
"return": {
|
|
404
|
+
"type": {
|
|
405
|
+
"text": "string"
|
|
406
|
+
}
|
|
407
|
+
},
|
|
408
|
+
"parameters": [
|
|
409
|
+
{
|
|
410
|
+
"name": "index",
|
|
411
|
+
"type": {
|
|
412
|
+
"text": "number"
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
]
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
"kind": "field",
|
|
419
|
+
"name": "#stepsNumericValues",
|
|
420
|
+
"privacy": "private",
|
|
421
|
+
"type": {
|
|
422
|
+
"text": "number[]"
|
|
423
|
+
},
|
|
424
|
+
"description": "Numeric value per step for #snapToSteps. Strings parsed via parseFloat; unparseable strings map to Infinity.",
|
|
425
|
+
"readonly": true
|
|
426
|
+
},
|
|
427
|
+
{
|
|
428
|
+
"kind": "method",
|
|
429
|
+
"name": "#snapToSteps",
|
|
430
|
+
"privacy": "private",
|
|
431
|
+
"return": {
|
|
432
|
+
"type": {
|
|
433
|
+
"text": "string"
|
|
434
|
+
}
|
|
435
|
+
},
|
|
436
|
+
"parameters": [
|
|
437
|
+
{
|
|
438
|
+
"name": "n",
|
|
439
|
+
"type": {
|
|
440
|
+
"text": "number"
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
],
|
|
444
|
+
"description": "Snaps n to the nearest step by numeric value; overflow steps win only past the last finite value."
|
|
445
|
+
},
|
|
446
|
+
{
|
|
447
|
+
"kind": "method",
|
|
448
|
+
"name": "#resolveFloatingInput",
|
|
449
|
+
"privacy": "private",
|
|
450
|
+
"return": {
|
|
451
|
+
"type": {
|
|
452
|
+
"text": "string | null"
|
|
453
|
+
}
|
|
454
|
+
},
|
|
455
|
+
"parameters": [
|
|
456
|
+
{
|
|
457
|
+
"name": "raw",
|
|
458
|
+
"type": {
|
|
459
|
+
"text": "string"
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
],
|
|
463
|
+
"description": "Resolves a user-typed string to a step label; returns null if unresolvable. Steps mode only."
|
|
464
|
+
},
|
|
311
465
|
{
|
|
312
466
|
"kind": "field",
|
|
313
467
|
"name": "progress",
|
|
@@ -517,6 +671,24 @@
|
|
|
517
671
|
}
|
|
518
672
|
]
|
|
519
673
|
},
|
|
674
|
+
{
|
|
675
|
+
"kind": "method",
|
|
676
|
+
"name": "#currentValueForFlag",
|
|
677
|
+
"privacy": "private",
|
|
678
|
+
"return": {
|
|
679
|
+
"type": {
|
|
680
|
+
"text": "string"
|
|
681
|
+
}
|
|
682
|
+
},
|
|
683
|
+
"parameters": [
|
|
684
|
+
{
|
|
685
|
+
"name": "flag",
|
|
686
|
+
"type": {
|
|
687
|
+
"text": "ThumbFlag"
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
]
|
|
691
|
+
},
|
|
520
692
|
{
|
|
521
693
|
"kind": "method",
|
|
522
694
|
"name": "#makeFloatingChange",
|
|
@@ -824,14 +996,23 @@
|
|
|
824
996
|
"default": "0",
|
|
825
997
|
"fieldName": "step"
|
|
826
998
|
},
|
|
999
|
+
{
|
|
1000
|
+
"type": {
|
|
1001
|
+
"text": "StepInput[]"
|
|
1002
|
+
},
|
|
1003
|
+
"description": "Custom step values; overrides min/max/step. Thumbs at equal visual intervals. Accepts number, string, or { value, label? }. Use { value: Infinity, label: '...' } for an unbounded overflow step. Labels with commas must be set via the property.",
|
|
1004
|
+
"name": "steps",
|
|
1005
|
+
"default": "[]",
|
|
1006
|
+
"fieldName": "steps"
|
|
1007
|
+
},
|
|
827
1008
|
{
|
|
828
1009
|
"type": {
|
|
829
1010
|
"text": "boolean"
|
|
830
1011
|
},
|
|
831
|
-
"description": "
|
|
832
|
-
"name": "show-
|
|
1012
|
+
"description": "When true, displays each step's label (or its value if no label was provided) beneath the corresponding dot on the track",
|
|
1013
|
+
"name": "show-step-labels",
|
|
833
1014
|
"default": "false",
|
|
834
|
-
"fieldName": "
|
|
1015
|
+
"fieldName": "showStepLabels"
|
|
835
1016
|
}
|
|
836
1017
|
],
|
|
837
1018
|
"superclass": {
|
package/dist/zui-slider-css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const style = css `:host .thumb-input input
|
|
2
|
+
export const style = css `:host .thumb-input input{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input:hover{border-color:var(--zui-gray-400)}:host .thumb-input input:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block}:host .single-wrapper,:host .range-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:var(--zui-slider-thumb-size);margin:0;background:rgba(0,0,0,0);outline:none;cursor:grab;-webkit-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-moz-range-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-webkit-slider-thumb{transform:translateY(calc(-50% + 0.125rem));-webkit-appearance:none;appearance:none}:host input[type=range]::-moz-range-thumb{border:0}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:auto}:host .thumb-input input{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input::-webkit-inner-spin-button,:host .thumb-input input::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child,:host .step-dots .step-dot--last{width:.125rem;height:1rem;border-radius:.125rem}:host .step-dots .step-dot-label{position:absolute;top:.375rem;font-weight:600;white-space:nowrap;color:var(--zui-gray-600);transform:translateX(-50%);user-select:none}:host .step-dots .step-dot-label:nth-child(2){transform:none}:host .step-dots .step-dot-label:last-child{transform:translateX(-100%)}:host .range-wrapper{cursor:grab}:host .range-wrapper:active{cursor:grabbing}:host .range-wrapper input[type=range]{position:absolute;pointer-events:none}:host .range-wrapper input[type=range]::-webkit-slider-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .min-max-labels{display:flex;justify-content:space-between;user-select:none}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) input[type=range]:disabled{cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host([disabled]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host([disabled]) .step-dot{background-color:var(--zui-gray)}:host([disabled]) .range-wrapper{cursor:not-allowed}`;
|
|
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,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA
|
|
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,ozOAAozO,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .thumb-input input{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input:hover{border-color:var(--zui-gray-400)}:host .thumb-input input:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block}:host .single-wrapper,:host .range-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:var(--zui-slider-thumb-size);margin:0;background:rgba(0,0,0,0);outline:none;cursor:grab;-webkit-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-moz-range-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-webkit-slider-thumb{transform:translateY(calc(-50% + 0.125rem));-webkit-appearance:none;appearance:none}:host input[type=range]::-moz-range-thumb{border:0}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:auto}:host .thumb-input input{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input::-webkit-inner-spin-button,:host .thumb-input input::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child,:host .step-dots .step-dot--last{width:.125rem;height:1rem;border-radius:.125rem}:host .step-dots .step-dot-label{position:absolute;top:.375rem;font-weight:600;white-space:nowrap;color:var(--zui-gray-600);transform:translateX(-50%);user-select:none}:host .step-dots .step-dot-label:nth-child(2){transform:none}:host .step-dots .step-dot-label:last-child{transform:translateX(-100%)}:host .range-wrapper{cursor:grab}:host .range-wrapper:active{cursor:grabbing}:host .range-wrapper input[type=range]{position:absolute;pointer-events:none}:host .range-wrapper input[type=range]::-webkit-slider-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .min-max-labels{display:flex;justify-content:space-between;user-select:none}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) input[type=range]:disabled{cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host([disabled]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host([disabled]) .step-dot{background-color:var(--zui-gray)}:host([disabled]) .range-wrapper{cursor:not-allowed}`;\n"]}
|
package/dist/zui-slider.d.ts
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { ZuiFormAssociatedElement } from '@zywave/zui-base';
|
|
2
|
-
|
|
2
|
+
/** Number, string, or `{ value, label? }` object. `label` is the display value; `value` drives snapping. */
|
|
3
|
+
type StepInput = number | string | {
|
|
4
|
+
value: number | string;
|
|
5
|
+
label?: string;
|
|
6
|
+
};
|
|
3
7
|
/**
|
|
4
8
|
* A range form control for choosing values along a slider.
|
|
5
9
|
* @element zui-slider
|
|
@@ -15,8 +19,8 @@ import { TemplateResult } from 'lit';
|
|
|
15
19
|
* @attr {number} [min=0] - Represents the minimum permitted value
|
|
16
20
|
* @attr {number} [max=100] - Represents the maximum permitted value
|
|
17
21
|
* @attr {number} [step=0] - Represents the stepping interval; 0 means any value is allowed
|
|
18
|
-
* @attr {
|
|
19
|
-
*
|
|
22
|
+
* @attr {string} [steps=''] - Comma-separated step labels; overrides min/max/step. Labels containing commas must be set via the property instead.
|
|
23
|
+
* @attr {boolean} [show-step-labels=false] - When set, displays each step's label beneath its dot on the track
|
|
20
24
|
* @prop {string | null} [name=null] - The name of this element that is associated with form submission
|
|
21
25
|
* @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission
|
|
22
26
|
* @prop {boolean} [readOnly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission
|
|
@@ -32,7 +36,9 @@ import { TemplateResult } from 'lit';
|
|
|
32
36
|
* @prop {number} [min=0] - Represents the minimum permitted value
|
|
33
37
|
* @prop {number} [max=100] - Represents the maximum permitted value
|
|
34
38
|
* @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed
|
|
35
|
-
* @prop {
|
|
39
|
+
* @prop {StepInput[]} [steps=[]] - Custom step values; overrides min/max/step. Thumbs at equal visual intervals. Accepts number, string, or { value, label? }. Use { value: Infinity, label: '...' } for an unbounded overflow step. Labels with commas must be set via the property.
|
|
40
|
+
* @prop {((input: string) => number | string | null) | null} [stepParser=null] - Resolves user-typed strings to a step value; returns a number (snap to nearest), a valid step label, or null to reject. Must be set via the property.
|
|
41
|
+
* @prop {boolean} [showStepLabels=false] - When true, displays each step's label (or its value if no label was provided) beneath the corresponding dot on the track
|
|
36
42
|
*
|
|
37
43
|
* @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each slider thumb
|
|
38
44
|
*
|
|
@@ -41,6 +47,8 @@ import { TemplateResult } from 'lit';
|
|
|
41
47
|
export declare class ZuiSlider extends ZuiFormAssociatedElement {
|
|
42
48
|
#private;
|
|
43
49
|
static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
|
|
50
|
+
steps: StepInput[];
|
|
51
|
+
stepParser: ((input: string) => number | string | null) | null;
|
|
44
52
|
connectedCallback(): void;
|
|
45
53
|
disconnectedCallback(): void;
|
|
46
54
|
protected updated(changed: Map<PropertyKey, unknown>): void;
|
|
@@ -50,37 +58,24 @@ export declare class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
50
58
|
get value(): string;
|
|
51
59
|
set value(rawVal: string);
|
|
52
60
|
get valueAsNumber(): number;
|
|
53
|
-
/**
|
|
54
|
-
* Enables range mode with two thumbs for selecting a value range
|
|
55
|
-
*/
|
|
56
61
|
range: boolean;
|
|
57
62
|
get valueStart(): string;
|
|
58
63
|
set valueStart(rawVal: string);
|
|
59
64
|
get valueEnd(): string;
|
|
60
65
|
set valueEnd(rawVal: string);
|
|
61
|
-
/**
|
|
62
|
-
* Represents the minimum permitted value
|
|
63
|
-
*/
|
|
64
66
|
min: number;
|
|
65
|
-
/**
|
|
66
|
-
* Represents the maximum permitted value
|
|
67
|
-
*/
|
|
68
67
|
max: number;
|
|
69
|
-
/**
|
|
70
|
-
* Represents the stepping interval, used both for user interface and validation purposes
|
|
71
|
-
*/
|
|
72
68
|
step: number;
|
|
73
|
-
/**
|
|
74
|
-
|
|
75
|
-
*/
|
|
76
|
-
showMinMax: boolean;
|
|
69
|
+
/** Displays each step's label beneath its dot on the track. Requires `steps` to be set. */
|
|
70
|
+
showStepLabels: boolean;
|
|
77
71
|
get progress(): number;
|
|
78
72
|
get progressStart(): number;
|
|
79
73
|
get progressEnd(): number;
|
|
80
|
-
render(): TemplateResult<1>;
|
|
74
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
81
75
|
}
|
|
82
76
|
declare global {
|
|
83
77
|
interface HTMLElementTagNameMap {
|
|
84
78
|
'zui-slider': ZuiSlider;
|
|
85
79
|
}
|
|
86
80
|
}
|
|
81
|
+
export {};
|