@zywave/zui-slider 4.4.0-pre.3 → 4.4.0-pre.5
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 +183 -37
- 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 +368 -115
- 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 +34 -7
- package/src/zui-slider.ts +373 -113
- package/test/zui-slider.test.ts +659 -291
|
@@ -74,38 +74,46 @@
|
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
"kind": "field",
|
|
77
|
-
"name": "#
|
|
77
|
+
"name": "#cachedNormalizedSteps",
|
|
78
78
|
"privacy": "private",
|
|
79
|
-
"
|
|
79
|
+
"type": {
|
|
80
|
+
"text": "{ value: number | string; label: string }[] | null"
|
|
81
|
+
},
|
|
82
|
+
"default": "null"
|
|
80
83
|
},
|
|
81
84
|
{
|
|
82
85
|
"kind": "field",
|
|
83
|
-
"name": "#
|
|
84
|
-
"privacy": "private"
|
|
86
|
+
"name": "#cachedNumericValues",
|
|
87
|
+
"privacy": "private",
|
|
88
|
+
"type": {
|
|
89
|
+
"text": "number[] | null"
|
|
90
|
+
},
|
|
91
|
+
"default": "null"
|
|
85
92
|
},
|
|
86
93
|
{
|
|
87
94
|
"kind": "field",
|
|
88
|
-
"name": "#
|
|
89
|
-
"privacy": "private"
|
|
95
|
+
"name": "#thumbInputState",
|
|
96
|
+
"privacy": "private",
|
|
97
|
+
"default": "new Map< ThumbFlag, { visible: boolean; focused: boolean; timer?: ReturnType<typeof setTimeout>; } >([ ['thumb', { visible: false, focused: false }], ['startThumb', { visible: false, focused: false }], ['endThumb', { visible: false, focused: false }], ])"
|
|
90
98
|
},
|
|
91
99
|
{
|
|
92
100
|
"kind": "field",
|
|
93
|
-
"name": "#
|
|
101
|
+
"name": "#onThumbFloatingChange",
|
|
94
102
|
"privacy": "private"
|
|
95
103
|
},
|
|
96
104
|
{
|
|
97
105
|
"kind": "field",
|
|
98
|
-
"name": "#
|
|
106
|
+
"name": "#onStartThumbFloatingChange",
|
|
99
107
|
"privacy": "private"
|
|
100
108
|
},
|
|
101
109
|
{
|
|
102
110
|
"kind": "field",
|
|
103
|
-
"name": "#
|
|
111
|
+
"name": "#onEndThumbFloatingChange",
|
|
104
112
|
"privacy": "private"
|
|
105
113
|
},
|
|
106
114
|
{
|
|
107
115
|
"kind": "field",
|
|
108
|
-
"name": "#
|
|
116
|
+
"name": "#onFloatingInputKeydown",
|
|
109
117
|
"privacy": "private"
|
|
110
118
|
},
|
|
111
119
|
{
|
|
@@ -127,6 +135,25 @@
|
|
|
127
135
|
},
|
|
128
136
|
"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
137
|
},
|
|
138
|
+
{
|
|
139
|
+
"kind": "field",
|
|
140
|
+
"name": "steps",
|
|
141
|
+
"type": {
|
|
142
|
+
"text": "StepInput[]"
|
|
143
|
+
},
|
|
144
|
+
"default": "[]",
|
|
145
|
+
"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.",
|
|
146
|
+
"attribute": "steps"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"kind": "field",
|
|
150
|
+
"name": "stepParser",
|
|
151
|
+
"type": {
|
|
152
|
+
"text": "((input: string) => number | string | null) | null"
|
|
153
|
+
},
|
|
154
|
+
"default": "null",
|
|
155
|
+
"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."
|
|
156
|
+
},
|
|
130
157
|
{
|
|
131
158
|
"kind": "method",
|
|
132
159
|
"name": "#singleInput",
|
|
@@ -169,6 +196,11 @@
|
|
|
169
196
|
"name": "#clearAllThumbInputState",
|
|
170
197
|
"privacy": "private"
|
|
171
198
|
},
|
|
199
|
+
{
|
|
200
|
+
"kind": "method",
|
|
201
|
+
"name": "#syncValuesToSteps",
|
|
202
|
+
"privacy": "private"
|
|
203
|
+
},
|
|
172
204
|
{
|
|
173
205
|
"kind": "method",
|
|
174
206
|
"name": "#clampToRange",
|
|
@@ -186,7 +218,7 @@
|
|
|
186
218
|
}
|
|
187
219
|
}
|
|
188
220
|
],
|
|
189
|
-
"description": "
|
|
221
|
+
"description": "Steps mode: snaps to nearest step. Normal mode: clamps to [min, max]. Empty string passes through."
|
|
190
222
|
},
|
|
191
223
|
{
|
|
192
224
|
"kind": "field",
|
|
@@ -270,13 +302,13 @@
|
|
|
270
302
|
},
|
|
271
303
|
{
|
|
272
304
|
"kind": "field",
|
|
273
|
-
"name": "
|
|
305
|
+
"name": "showStepLabels",
|
|
274
306
|
"type": {
|
|
275
307
|
"text": "boolean"
|
|
276
308
|
},
|
|
277
309
|
"default": "false",
|
|
278
|
-
"description": "
|
|
279
|
-
"attribute": "show-
|
|
310
|
+
"description": "When true, displays each step's label (or its value if no label was provided) beneath the corresponding dot on the track",
|
|
311
|
+
"attribute": "show-step-labels"
|
|
280
312
|
},
|
|
281
313
|
{
|
|
282
314
|
"kind": "field",
|
|
@@ -308,6 +340,118 @@
|
|
|
308
340
|
}
|
|
309
341
|
]
|
|
310
342
|
},
|
|
343
|
+
{
|
|
344
|
+
"kind": "field",
|
|
345
|
+
"name": "#stepsMode",
|
|
346
|
+
"privacy": "private",
|
|
347
|
+
"type": {
|
|
348
|
+
"text": "boolean"
|
|
349
|
+
},
|
|
350
|
+
"readonly": true
|
|
351
|
+
},
|
|
352
|
+
{
|
|
353
|
+
"kind": "field",
|
|
354
|
+
"name": "#nativeRangeAttrs",
|
|
355
|
+
"privacy": "private",
|
|
356
|
+
"type": {
|
|
357
|
+
"text": "{ nativeMin: string; nativeMax: string; nativeStep: string }"
|
|
358
|
+
},
|
|
359
|
+
"readonly": true
|
|
360
|
+
},
|
|
361
|
+
{
|
|
362
|
+
"kind": "field",
|
|
363
|
+
"name": "#normalizedSteps",
|
|
364
|
+
"privacy": "private",
|
|
365
|
+
"type": {
|
|
366
|
+
"text": "{ value: number | string; label: string }[]"
|
|
367
|
+
},
|
|
368
|
+
"description": "Normalizes each StepInput to `{ value, label }`. Cached after first access.",
|
|
369
|
+
"readonly": true
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
"kind": "method",
|
|
373
|
+
"name": "#stepsIndexOf",
|
|
374
|
+
"privacy": "private",
|
|
375
|
+
"return": {
|
|
376
|
+
"type": {
|
|
377
|
+
"text": "number"
|
|
378
|
+
}
|
|
379
|
+
},
|
|
380
|
+
"parameters": [
|
|
381
|
+
{
|
|
382
|
+
"name": "val",
|
|
383
|
+
"type": {
|
|
384
|
+
"text": "string"
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
]
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"kind": "method",
|
|
391
|
+
"name": "#stepAt",
|
|
392
|
+
"privacy": "private",
|
|
393
|
+
"return": {
|
|
394
|
+
"type": {
|
|
395
|
+
"text": "string"
|
|
396
|
+
}
|
|
397
|
+
},
|
|
398
|
+
"parameters": [
|
|
399
|
+
{
|
|
400
|
+
"name": "index",
|
|
401
|
+
"type": {
|
|
402
|
+
"text": "number"
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
]
|
|
406
|
+
},
|
|
407
|
+
{
|
|
408
|
+
"kind": "field",
|
|
409
|
+
"name": "#stepsNumericValues",
|
|
410
|
+
"privacy": "private",
|
|
411
|
+
"type": {
|
|
412
|
+
"text": "number[]"
|
|
413
|
+
},
|
|
414
|
+
"description": "Numeric value per step for #snapToSteps. Strings parsed via parseFloat; unparseable strings map to Infinity.",
|
|
415
|
+
"readonly": true
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
"kind": "method",
|
|
419
|
+
"name": "#snapToSteps",
|
|
420
|
+
"privacy": "private",
|
|
421
|
+
"return": {
|
|
422
|
+
"type": {
|
|
423
|
+
"text": "string"
|
|
424
|
+
}
|
|
425
|
+
},
|
|
426
|
+
"parameters": [
|
|
427
|
+
{
|
|
428
|
+
"name": "n",
|
|
429
|
+
"type": {
|
|
430
|
+
"text": "number"
|
|
431
|
+
}
|
|
432
|
+
}
|
|
433
|
+
],
|
|
434
|
+
"description": "Snaps n to the nearest step by numeric value; overflow steps win only past the last finite value."
|
|
435
|
+
},
|
|
436
|
+
{
|
|
437
|
+
"kind": "method",
|
|
438
|
+
"name": "#resolveFloatingInput",
|
|
439
|
+
"privacy": "private",
|
|
440
|
+
"return": {
|
|
441
|
+
"type": {
|
|
442
|
+
"text": "string | null"
|
|
443
|
+
}
|
|
444
|
+
},
|
|
445
|
+
"parameters": [
|
|
446
|
+
{
|
|
447
|
+
"name": "raw",
|
|
448
|
+
"type": {
|
|
449
|
+
"text": "string"
|
|
450
|
+
}
|
|
451
|
+
}
|
|
452
|
+
],
|
|
453
|
+
"description": "Resolves a user-typed string to a step label; returns null if unresolvable. Steps mode only."
|
|
454
|
+
},
|
|
311
455
|
{
|
|
312
456
|
"kind": "field",
|
|
313
457
|
"name": "progress",
|
|
@@ -439,12 +583,6 @@
|
|
|
439
583
|
"text": "string"
|
|
440
584
|
}
|
|
441
585
|
},
|
|
442
|
-
{
|
|
443
|
-
"name": "onInput",
|
|
444
|
-
"type": {
|
|
445
|
-
"text": "(e: Event) => void"
|
|
446
|
-
}
|
|
447
|
-
},
|
|
448
586
|
{
|
|
449
587
|
"name": "onFloatingChange",
|
|
450
588
|
"type": {
|
|
@@ -519,32 +657,25 @@
|
|
|
519
657
|
},
|
|
520
658
|
{
|
|
521
659
|
"kind": "method",
|
|
522
|
-
"name": "#
|
|
660
|
+
"name": "#currentValueForFlag",
|
|
523
661
|
"privacy": "private",
|
|
662
|
+
"return": {
|
|
663
|
+
"type": {
|
|
664
|
+
"text": "string"
|
|
665
|
+
}
|
|
666
|
+
},
|
|
524
667
|
"parameters": [
|
|
525
668
|
{
|
|
526
669
|
"name": "flag",
|
|
527
670
|
"type": {
|
|
528
671
|
"text": "ThumbFlag"
|
|
529
672
|
}
|
|
530
|
-
},
|
|
531
|
-
{
|
|
532
|
-
"name": "setter",
|
|
533
|
-
"type": {
|
|
534
|
-
"text": "(val: string) => void"
|
|
535
|
-
}
|
|
536
|
-
},
|
|
537
|
-
{
|
|
538
|
-
"name": "dispatch",
|
|
539
|
-
"type": {
|
|
540
|
-
"text": "() => void"
|
|
541
|
-
}
|
|
542
673
|
}
|
|
543
674
|
]
|
|
544
675
|
},
|
|
545
676
|
{
|
|
546
677
|
"kind": "method",
|
|
547
|
-
"name": "#
|
|
678
|
+
"name": "#makeFloatingChange",
|
|
548
679
|
"privacy": "private",
|
|
549
680
|
"parameters": [
|
|
550
681
|
{
|
|
@@ -558,6 +689,12 @@
|
|
|
558
689
|
"type": {
|
|
559
690
|
"text": "(val: string) => void"
|
|
560
691
|
}
|
|
692
|
+
},
|
|
693
|
+
{
|
|
694
|
+
"name": "dispatch",
|
|
695
|
+
"type": {
|
|
696
|
+
"text": "() => void"
|
|
697
|
+
}
|
|
561
698
|
}
|
|
562
699
|
]
|
|
563
700
|
},
|
|
@@ -824,14 +961,23 @@
|
|
|
824
961
|
"default": "0",
|
|
825
962
|
"fieldName": "step"
|
|
826
963
|
},
|
|
964
|
+
{
|
|
965
|
+
"type": {
|
|
966
|
+
"text": "StepInput[]"
|
|
967
|
+
},
|
|
968
|
+
"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.",
|
|
969
|
+
"name": "steps",
|
|
970
|
+
"default": "[]",
|
|
971
|
+
"fieldName": "steps"
|
|
972
|
+
},
|
|
827
973
|
{
|
|
828
974
|
"type": {
|
|
829
975
|
"text": "boolean"
|
|
830
976
|
},
|
|
831
|
-
"description": "
|
|
832
|
-
"name": "show-
|
|
977
|
+
"description": "When true, displays each step's label (or its value if no label was provided) beneath the corresponding dot on the track",
|
|
978
|
+
"name": "show-step-labels",
|
|
833
979
|
"default": "false",
|
|
834
|
-
"fieldName": "
|
|
980
|
+
"fieldName": "showStepLabels"
|
|
835
981
|
}
|
|
836
982
|
],
|
|
837
983
|
"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-size:.6875rem;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-size:.6875rem;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,01OAA01O,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-size:.6875rem;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-size:.6875rem;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 {};
|