npm - @zywave/zui-slider - Versions diffs - 4.4.0-pre.0 → 4.4.0-pre.1 - Mend

@zywave/zui-slider 4.4.0-pre.0 → 4.4.0-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.

Files changed (10) hide show

package/dist/css/zui-slider.fouc.css +1 -1
package/dist/zui-slider-css.js +1 -1
package/dist/zui-slider-css.js.map +1 -1
package/dist/zui-slider.js +2 -2
package/dist/zui-slider.js.map +1 -1
package/package.json +2 -2
package/src/css/zui-slider.fouc.scss +5 -1
package/src/zui-slider-css.js +1 -1
package/src/zui-slider.scss +33 -3
package/src/zui-slider.ts +2 -2

package/dist/css/zui-slider.fouc.css CHANGED Viewed

	@@ -1 +1 @@
1	- zui-slider:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;--zui-slider-thumb-size: 0.875rem;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}zui-slider:not(:defined)::before{display:block;content:"";height:.25rem;background:linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-blue) var(--zui-slider-thumb-size), var(--zui-blue) 50%, var(--zui-gray-200) 50%, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)));border-radius:.1875rem}zui-slider:not(:defined)::after{position:absolute;top:50%;left:50%;content:"";width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;cursor:~~pointer~~;transform:translate(-50%, -50%)}zui-slider:not(:defined) ,zui-slider:not(:defined) ::before,zui-slider:not(:defined) ::after{box-sizing:inherit}zui-slider[range]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-slider[range]:not(:defined)::before{background:linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-blue) var(--zui-slider-thumb-size), var(--zui-blue) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))}zui-slider[range]:not(:defined)::after{display:none}zui-slider[range]:not(:defined) ,zui-slider[range]:not(:defined) ::before,zui-slider[range]:not(:defined) ::after{box-sizing:inherit}zui-slider[disabled]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;cursor:not-allowed}zui-slider[disabled]:not(:defined)::before{background:var(--zui-gray-200)}zui-slider[disabled]:not(:defined)::after{background-color:var(--zui-gray);cursor:not-allowed}zui-slider[disabled]:not(:defined) ,zui-slider[disabled]:not(:defined) ::before,zui-slider[disabled]:not(:defined) ::after{box-sizing:inherit}zui-slider[range][disabled]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-slider[range][disabled]:not(:defined)::before{background:var(--zui-gray-200)}zui-slider[range][disabled]:not(:defined) ,zui-slider[range][disabled]:not(:defined) ::before,zui-slider[range][disabled]:not(:defined) ::after{box-sizing:inherit}
1	+ zui-slider:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;--zui-slider-thumb-size: 0.875rem;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}zui-slider:not(:defined)::before{display:block;content:"";height:.25rem;background:linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-blue) var(--zui-slider-thumb-size), var(--zui-blue) 50%, var(--zui-gray-200) 50%, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)));border-radius:.1875rem}zui-slider:not(:defined)::after{position:absolute;top:50%;left:50%;content:"";width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;cursor:grab;transform:translate(-50%, -50%)}zui-slider:not(:defined):active::after{cursor:grabbing}zui-slider:not(:defined) ,zui-slider:not(:defined) ::before,zui-slider:not(:defined) ::after{box-sizing:inherit}zui-slider[range]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-slider[range]:not(:defined)::before{background:linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-blue) var(--zui-slider-thumb-size), var(--zui-blue) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))}zui-slider[range]:not(:defined)::after{display:none}zui-slider[range]:not(:defined) ,zui-slider[range]:not(:defined) ::before,zui-slider[range]:not(:defined) ::after{box-sizing:inherit}zui-slider[disabled]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;cursor:not-allowed}zui-slider[disabled]:not(:defined)::before{background:var(--zui-gray-200)}zui-slider[disabled]:not(:defined)::after{background-color:var(--zui-gray);cursor:not-allowed}zui-slider[disabled]:not(:defined) ,zui-slider[disabled]:not(:defined) ::before,zui-slider[disabled]:not(:defined) ::after{box-sizing:inherit}zui-slider[range][disabled]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-slider[range][disabled]:not(:defined)::before{background:var(--zui-gray-200)}zui-slider[range][disabled]:not(:defined) ,zui-slider[range][disabled]:not(:defined) ::before,zui-slider[range][disabled]:not(:defined) ::after{box-sizing:inherit}

package/dist/zui-slider-css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css `:host .thumb-input input[type=number]{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[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-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:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}: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:0;border-radius:50%;box-shadow:none;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]: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)}: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)}:host input[type=range]:disabled{cursor:not-allowed}:host 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))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host 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))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}: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:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-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{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)*-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:pointer;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:pointer;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)*2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([disabled]){cursor:not-allowed}:host([disabled]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;
+export const style = css `:host .thumb-input input[type=number]{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[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-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:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}: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:0;border-radius:50%;box-shadow:none;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]: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 input[type=range]:disabled{cursor:not-allowed}:host 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))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host 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))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}: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:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-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{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)*-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:active::-moz-range-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)*2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}: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]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;
 //# sourceMappingURL=zui-slider-css.js.map

package/dist/zui-slider-css.js.map CHANGED Viewed

	@@ -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,~~ggOAAggO~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .thumb-input input[type=number]{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[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-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:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:~~pointer~~;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}: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:0;border-radius:50%;box-shadow:none;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]: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)}: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)}:host input[type=range]:disabled{cursor:not-allowed}:host 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))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host 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))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}: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:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-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{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:~~pointer~~;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:~~pointer~~;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([disabled]){cursor:not-allowed}:host([disabled]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;\n"]}
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,6sPAA6sP,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .thumb-input input[type=number]{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[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-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:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}: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:0;border-radius:50%;box-shadow:none;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]: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 input[type=range]:disabled{cursor:not-allowed}:host 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))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host 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))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}: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:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-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{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:active::-moz-range-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}: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]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;\n"]}

package/dist/zui-slider.js CHANGED Viewed

@@ -331,7 +331,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           .max="${String(this.max)}"
           .step="${this.step > 0 ? String(this.step) : '1'}"
           .value="${this.#value}"
-          ?disabled="${this.disabled}"
+          ?disabled="${this.disabled || this.readOnly}"
           @input="${this.#onInput}"
           @change="${this.#onChange}"
           @pointerenter="${this.#h.thumb.show}"
@@ -376,7 +376,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         .max="${String(this.max)}"
         .step="${this.step > 0 ? String(this.step) : '1'}"
         .value="${live(val)}"
-        ?disabled="${this.disabled}"
+        ?disabled="${this.disabled || this.readOnly}"
         @input="${onInput}"
         @change="${this.#onRangeChange}"
         @pointerenter="${h.show}"

package/dist/zui-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
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, nothing, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\ntype ThumbFlag = 'thumb' \| 'startThumb' \| 'endThumb';\n\n/*\n A range form control for choosing values along a slider.\n * @element zui-slider\n \n @attr {string \| null} [name=null] - The name of this element that is associated with form submission\n * @attr {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\n * @attr {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\n * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @attr {number} [value=50] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @attr {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @attr {number} [value-start=0] - Represents the start (lower) value in range mode\n * @attr {number} [value-end=100] - Represents the end (upper) value in range mode\n * @attr {number} [min=0] - Represents the minimum permitted value\n * @attr {number} [max=100] - Represents the maximum permitted value\n * @attr {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @attr {boolean} [show-min-max=false] - Shows the min and max values beneath the slider\n \n @prop {string \| null} [name=null] - The name of this element that is associated with form submission\n * @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\n * @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\n * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @prop {number} [valueAsNumber=50] - Returns the value as a number. Invalid or non-numeric values are clamped to min; empty string (representing an in-progress edit) returns NaN\n * @prop {string} [value='50'] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line (single mode)\n * @prop {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @prop {string} [valueStart='0'] - Represents the start (lower) value in range mode\n * @prop {string} [valueEnd='100'] - Represents the end (upper) value in range mode\n * @prop {number} [progressStart=0] - Determines visual placement of the start thumb in range mode\n * @prop {number} [progressEnd=100] - Determines visual placement of the end thumb in range mode\n * @prop {number} [min=0] - Represents the minimum permitted value\n * @prop {number} [max=100] - Represents the maximum permitted value\n * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider\n \n @cssprop [--zui-slider-thumb-size=0.875rem (14px)] - Controls the visual dot size and thumb hit-area (hit area is 3× this value)\n * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each thumb\n \n @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }\n /\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n #defaultValue: string = '50';\n #defaultValueStart: string = '0';\n #defaultValueEnd: string = '100';\n\n #value: string = '50';\n #valueStart: string = '0';\n #valueEnd: string = '100';\n\n #thumbInputState = new Map<\n ThumbFlag,\n {\n visible: boolean;\n focused: boolean;\n timer?: ReturnType<typeof setTimeout>;\n debounceTimer?: ReturnType<typeof setTimeout>;\n }\n >([\n ['thumb', { visible: false, focused: false }],\n ['startThumb', { visible: false, focused: false }],\n ['endThumb', { visible: false, focused: false }],\n ]);\n\n // Pre-bound floating input handlers cached to avoid new function references on every render\n #onThumbFloatingInput = this.#onFloatingInput('thumb', (v) => (this.value = v));\n #onStartThumbFloatingInput = this.#onFloatingInput('startThumb', (v) => (this.valueStart = v));\n #onEndThumbFloatingInput = this.#onFloatingInput('endThumb', (v) => (this.valueEnd = v));\n\n // Cached floating input change handlers — flush debounce and dispatch immediately on commit (Enter/blur)\n #onThumbFloatingChange = this.#makeFloatingChange(\n 'thumb',\n (v) => (this.value = v),\n () => this.#onChange()\n );\n #onStartThumbFloatingChange = this.#makeFloatingChange(\n 'startThumb',\n (v) => (this.valueStart = v),\n () => this.#onRangeChange()\n );\n #onEndThumbFloatingChange = this.#makeFloatingChange(\n 'endThumb',\n (v) => (this.valueEnd = v),\n () => this.#onRangeChange()\n );\n\n // Cached range drag input handlers\n #onRangeStartInput = this.#onRangeInput('start');\n #onRangeEndInput = this.#onRangeInput('end');\n\n // Cached pointer/focus handlers per thumb — prevents new closures on every render\n #h: Record<ThumbFlag, { show: () => void; hide: () => void; focus: () => void; blur: () => void }> = {\n thumb: {\n show: () => this.#showThumbInput('thumb'),\n hide: () => this.#scheduleHideThumbInput('thumb'),\n focus: () => this.#focusFloatingInput('thumb'),\n blur: () => this.#blurFloatingInput('thumb'),\n },\n startThumb: {\n show: () => this.#showThumbInput('startThumb'),\n hide: () => this.#scheduleHideThumbInput('startThumb'),\n focus: () => this.#focusFloatingInput('startThumb'),\n blur: () => this.#blurFloatingInput('startThumb'),\n },\n endThumb: {\n show: () => this.#showThumbInput('endThumb'),\n hide: () => this.#scheduleHideThumbInput('endThumb'),\n focus: () => this.#focusFloatingInput('endThumb'),\n blur: () => this.#blurFloatingInput('endThumb'),\n },\n };\n\n static get styles() {\n return [super.styles, style];\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.updateComplete.then(() => {\n if (this.range) {\n const [startInput, endInput] = this.#rangeInputs();\n this.#valueStart = startInput.value;\n this.#valueEnd = endInput.value;\n this.#defaultValueStart = startInput.value;\n this.#defaultValueEnd = endInput.value;\n this._setFormValue(`${startInput.value},${endInput.value}`);\n } else {\n const input = this.#singleInput();\n this.#value = input.value;\n this.#defaultValue = input.value;\n this._setFormValue(input.value);\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#clearAllThumbInputState();\n // Schedule a re-render so the cleared visibility state is reflected in the DOM.\n // Lit defers this render until the element reconnects if it is currently disconnected.\n this.requestUpdate();\n }\n\n protected updated(changed: Map<PropertyKey, unknown>) {\n if (changed.has('disabled') && this.disabled) {\n this.#clearAllThumbInputState();\n }\n if (changed.has('min') \|\| changed.has('max')) {\n // The native inputs have already clamped (and step-snapped) their values to the new bounds.\n // Read them back and sync internal state + form value. If the value changed, request a\n // re-render so the floating input (which binds to #value/#valueStart/#valueEnd) stays in sync.\n if (this.range) {\n const [startInput, endInput] = this.#rangeInputs();\n const newStart = startInput.value;\n const newEnd = endInput.value;\n if (newStart !== this.#valueStart \|\| newEnd !== this.#valueEnd) {\n this.#valueStart = newStart;\n this.#valueEnd = newEnd;\n this.requestUpdate();\n }\n this._setFormValue(`${this.#valueStart},${this.#valueEnd}`);\n } else {\n const newValue = this.#singleInput().value;\n if (newValue !== this.#value) {\n this.#value = newValue;\n this.requestUpdate();\n }\n this._setFormValue(this.#value);\n }\n }\n }\n\n #singleInput(): HTMLInputElement {\n return this.shadowRoot!.querySelector<HTMLInputElement>('input[type=\"range\"]')!;\n }\n\n #rangeInputs(): [HTMLInputElement, HTMLInputElement] {\n const inputs = this.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type=\"range\"]');\n return [inputs[0], inputs[1]];\n }\n\n protected get _focusControlSelector() {\n return 'input';\n }\n\n protected get _formValue() {\n return this.range ? `${this.#valueStart},${this.#valueEnd}` : this.#value;\n }\n\n protected formResetCallback() {\n this.#clearAllThumbInputState();\n // Always request a re-render so the cleared thumb visibility is reflected even when the\n // reset value equals the current value (the named setter requestUpdate would be a no-op).\n this.requestUpdate();\n if (this.range) {\n this.valueStart = this.#defaultValueStart;\n this.valueEnd = this.#defaultValueEnd;\n } else {\n this.value = this.#defaultValue;\n }\n }\n\n #clearAllThumbInputState() {\n for (const entry of this.#thumbInputState.values()) {\n clearTimeout(entry.timer);\n clearTimeout(entry.debounceTimer);\n entry.timer = undefined;\n entry.debounceTimer = undefined;\n entry.visible = false;\n entry.focused = false;\n }\n }\n\n /\n Clamps a raw string value to the current [min, max] range.\n * Empty string is passed through unchanged (represents an in-progress floating input edit).\n * Non-numeric strings are passed through unchanged.\n /\n #clampToRange(rawVal: string): string {\n if (rawVal === '') {\n return rawVal;\n }\n const num = parseFloat(rawVal);\n if (isNaN(num)) {\n return rawVal;\n }\n return String(Math.min(this.max, Math.max(this.min, num)));\n }\n\n @property()\n get value() {\n return this.#value;\n }\n\n set value(rawVal: string) {\n rawVal = this.#clampToRange(rawVal);\n const oldVal = this.#value;\n this.#value = rawVal;\n this._setFormValue(rawVal);\n this.requestUpdate('value', oldVal);\n }\n\n get valueAsNumber() {\n return parseFloat(this.#value);\n }\n\n /\n Enables range mode with two thumbs for selecting a value range\n /\n @property({ type: Boolean }) range = false;\n\n @property({ attribute: 'value-start' })\n get valueStart() {\n return this.#valueStart;\n }\n\n set valueStart(rawVal: string) {\n rawVal = this.#clampToRange(rawVal);\n const oldVal = this.#valueStart;\n this.#valueStart = rawVal;\n this._setFormValue(`${rawVal},${this.#valueEnd}`);\n this.requestUpdate('valueStart', oldVal);\n }\n\n @property({ attribute: 'value-end' })\n get valueEnd() {\n return this.#valueEnd;\n }\n\n set valueEnd(rawVal: string) {\n rawVal = this.#clampToRange(rawVal);\n const oldVal = this.#valueEnd;\n this.#valueEnd = rawVal;\n this._setFormValue(`${this.#valueStart},${rawVal}`);\n this.requestUpdate('valueEnd', oldVal);\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 = 100;\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 Shows the min and max values beneath the slider\n /\n @property({ type: Boolean, attribute: 'show-min-max' }) showMinMax = false;\n\n get #range() {\n return this.max - this.min;\n }\n\n get #progressColor() {\n return this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n }\n\n #isVisible(flag: ThumbFlag): boolean {\n return this.#thumbInputState.get(flag)!.visible && !this.disabled;\n }\n\n get progress() {\n return this.#computeProgress(this.#value);\n }\n\n get progressStart() {\n return this.#computeProgress(this.#valueStart);\n }\n\n get progressEnd() {\n return this.#computeProgress(this.#valueEnd);\n }\n\n #computeProgress(rawValue: string): number {\n if (this.#range === 0) {\n return 0;\n }\n const num = parseFloat(rawValue);\n return isNaN(num) ? 0 : parseFloat((((num - this.min) / this.#range) 100).toFixed(4));\n }\n\n #singleTrackBackground(progress: number): string {\n const c = this.#progressColor;\n const stop = ZuiSlider.#thumbPositionCSS(progress);\n return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), ${c} var(--zui-slider-thumb-size), ${c} ${stop}, var(--zui-gray-200) ${stop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n }\n\n #rangeTrackBackground(progressStart: number, progressEnd: number): string {\n const c = this.#progressColor;\n const startStop = ZuiSlider.#thumbPositionCSS(progressStart);\n const endStop = ZuiSlider.#thumbPositionCSS(progressEnd);\n return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-gray-200) var(--zui-slider-thumb-size), var(--zui-gray-200) ${startStop}, ${c} ${startStop}, ${c} ${endStop}, var(--zui-gray-200) ${endStop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n }\n\n render() {\n return html`${this.range ? this.#renderRange() : this.#renderSingle()}${this.#renderMinMaxLabels()}`;\n }\n\n #renderSingle() {\n const progress = this.progress;\n return html`\n <div class=\"single-wrapper\">\n <input\n aria-label=\"Slider value\"\n style=${styleMap({ background: this.#singleTrackBackground(progress) })}\n type=\"range\"\n .min=\"${String(this.min)}\"\n .max=\"${String(this.max)}\"\n .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n .value=\"${this.#value}\"\n ?disabled=\"${this.disabled}\"\n @input=\"${this.#onInput}\"\n @change=\"${this.#onChange}\"\n @pointerenter=\"${this.#h.thumb.show}\"\n @pointerleave=\"${this.#h.thumb.hide}\"\n @focus=\"${this.#h.thumb.show}\"\n @blur=\"${this.#h.thumb.hide}\"\n />\n ${this.#renderStepDots()}\n ${this.#renderFloatingInput(\n this.#value,\n this.#onThumbFloatingInput,\n this.#onThumbFloatingChange,\n 'thumb',\n this.#isVisible('thumb'),\n progress\n )}\n </div>\n `;\n }\n\n #renderRange() {\n const progressStart = this.progressStart;\n const progressEnd = this.progressEnd;\n return html`\n <div\n class=\"range-wrapper\"\n style=${styleMap({ background: this.#rangeTrackBackground(progressStart, progressEnd) })}\n >\n ${this.#renderStepDots()}${this.#renderRangeInput('start')}\n ${this.#renderFloatingInput(\n this.#valueStart,\n this.#onStartThumbFloatingInput,\n this.#onStartThumbFloatingChange,\n 'startThumb',\n this.#isVisible('startThumb'),\n progressStart\n )}\n ${this.#renderRangeInput('end')}\n ${this.#renderFloatingInput(\n this.#valueEnd,\n this.#onEndThumbFloatingInput,\n this.#onEndThumbFloatingChange,\n 'endThumb',\n this.#isVisible('endThumb'),\n progressEnd\n )}\n </div>\n `;\n }\n\n #renderRangeInput(which: 'start' \| 'end') {\n const flag: ThumbFlag = which === 'start' ? 'startThumb' : 'endThumb';\n const val = which === 'start' ? this.#valueStart : this.#valueEnd;\n const onInput = which === 'start' ? this.#onRangeStartInput : this.#onRangeEndInput;\n const h = this.#h[flag];\n // live() is required: when #onRangeInput snaps the DOM value back via direct input.value\n // assignment (drag past the other thumb), there is no state change → no re-render. live()\n // forces Lit to re-read the current DOM value and re-sync it on every render.\n return html`\n <input\n aria-label=\"${which === 'start' ? 'Range start' : 'Range end'}\"\n class=\"range-${which}\"\n type=\"range\"\n .min=\"${String(this.min)}\"\n .max=\"${String(this.max)}\"\n .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n .value=\"${live(val)}\"\n ?disabled=\"${this.disabled}\"\n @input=\"${onInput}\"\n @change=\"${this.#onRangeChange}\"\n @pointerenter=\"${h.show}\"\n @pointerleave=\"${h.hide}\"\n @focus=\"${h.show}\"\n @blur=\"${h.hide}\"\n />\n `;\n }\n\n #renderFloatingInput(\n val: string,\n onInput: (e: Event) => void,\n onFloatingChange: (e: Event) => void,\n flag: ThumbFlag,\n visible: boolean,\n progress: number\n ) {\n const h = this.#h[flag];\n // live() is required on the number input: when the debounced setter clamps a value to the\n // same string it already holds (e.g. typing 150 when max=100 clamps back to '100'), no\n // reactive property change occurs and Lit skips the DOM update. live() forces a re-read.\n return html`\n <div\n class=${classMap({ 'thumb-input': true, 'thumb-input--visible': visible })}\n style=${styleMap({ left: ZuiSlider.#thumbPositionCSS(progress) })}\n @pointerenter=\"${h.show}\"\n @pointerleave=\"${h.hide}\"\n >\n <input\n aria-label=\"${flag === 'startThumb'\n ? 'Range start value'\n : flag === 'endThumb'\n ? 'Range end value'\n : 'Slider value'}\"\n type=\"number\"\n .value=\"${live(val)}\"\n .min=\"${String(this.min)}\"\n .max=\"${String(this.max)}\"\n .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n ?disabled=\"${this.disabled}\"\n ?readonly=\"${this.readOnly}\"\n @input=\"${onInput}\"\n @change=\"${onFloatingChange}\"\n @focus=\"${h.focus}\"\n @blur=\"${h.blur}\"\n />\n </div>\n `;\n }\n\n #renderStepDots() {\n if (this.step <= 0 \|\| this.#range === 0) {\n return nothing;\n }\n const count = Math.round(this.#range / this.step);\n if (count > 100) {\n return nothing;\n }\n const dots: TemplateResult[] = [];\n for (let i = 0; i <= count; i++) {\n let left: string;\n if (i === 0) {\n left = 'var(--zui-slider-thumb-size)';\n } else if (i === count) {\n left = 'calc(100% - var(--zui-slider-thumb-size))';\n } else {\n const pos = parseFloat((((i * this.step) / this.#range) * 100).toFixed(4));\n left = ZuiSlider.#thumbPositionCSS(pos);\n }\n dots.push(html`<span class=\"step-dot\" style=\"left: ${left}\"></span>`);\n }\n return html`<div class=\"step-dots\">${dots}</div>`;\n }\n\n #renderMinMaxLabels() {\n if (!this.showMinMax) {\n return nothing;\n }\n return html`\n <div class=\"min-max-labels\">\n <span class=\"min-max-label\">${this.min}</span>\n <span class=\"min-max-label\">${this.max}</span>\n </div>\n `;\n }\n\n #onInput(e: Event) {\n if (this.readOnly) {\n return;\n }\n this.value = (e.target as HTMLInputElement).value;\n }\n\n #onChange() {\n this.dispatchEvent(new CustomEvent('change', { detail: this.#value, bubbles: true }));\n }\n\n #processFloatingValue(raw: number): string {\n const stepDecimals = this.step > 0 ? (String(this.step).split('.')[1] ?? '').length : 0;\n const stepped = this.step > 0 ? Math.round((raw - this.min) / this.step) * this.step + this.min : raw;\n const clamped = Math.min(this.max, Math.max(this.min, stepped));\n return stepDecimals > 0 ? clamped.toFixed(stepDecimals) : String(Math.round(clamped));\n }\n\n #makeFloatingChange(flag: ThumbFlag, setter: (val: string) => void, dispatch: () => void) {\n return (e: Event) => {\n if (this.readOnly) {\n return;\n }\n const input = e.target as HTMLInputElement;\n if (input.value === '') {\n return;\n }\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.debounceTimer);\n entry.debounceTimer = undefined;\n setter(this.#processFloatingValue(parseFloat(input.value)));\n dispatch();\n };\n }\n\n #onFloatingInput(flag: ThumbFlag, setter: (val: string) => void) {\n return (e: Event) => {\n if (this.readOnly) {\n return;\n }\n const input = e.target as HTMLInputElement;\n if (input.value === '') {\n return;\n }\n const raw = parseFloat(input.value);\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.debounceTimer);\n entry.debounceTimer = setTimeout(() => setter(this.#processFloatingValue(raw)), 300);\n };\n }\n\n #onRangeInput(which: 'start' \| 'end') {\n return (e: Event) => {\n if (this.readOnly) {\n return;\n }\n const input = e.target as HTMLInputElement;\n if (which === 'start') {\n if (parseFloat(input.value) >= parseFloat(this.#valueEnd)) {\n input.value = this.#valueStart;\n return;\n }\n this.valueStart = input.value;\n } else {\n if (parseFloat(input.value) <= parseFloat(this.#valueStart)) {\n input.value = this.#valueEnd;\n return;\n }\n this.valueEnd = input.value;\n }\n };\n }\n\n #onRangeChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: { valueStart: this.#valueStart, valueEnd: this.#valueEnd },\n bubbles: true,\n })\n );\n }\n\n #showThumbInput(flag: ThumbFlag) {\n if (this.disabled) {\n return;\n }\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.timer);\n entry.timer = undefined;\n entry.visible = true;\n this.requestUpdate();\n }\n\n #scheduleHideThumbInput(flag: ThumbFlag) {\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.timer);\n entry.timer = setTimeout(() => {\n if (!entry.focused) {\n entry.visible = false;\n this.requestUpdate();\n }\n }, 100);\n }\n\n #focusFloatingInput(flag: ThumbFlag) {\n if (this.disabled) {\n return;\n }\n this.#showThumbInput(flag);\n this.#thumbInputState.get(flag)!.focused = true;\n }\n\n #blurFloatingInput(flag: ThumbFlag) {\n const entry = this.#thumbInputState.get(flag)!;\n entry.focused = false;\n this.#scheduleHideThumbInput(flag);\n }\n\n // Maps a 0–100 progress value to a CSS multiplier for --zui-slider-thumb-size so that\n // `progress% + thumbSize * offset` lands on the thumb center within the inset wrapper.\n // At 0%: offset=1.5 → thumbSize1.5 (thumb center at min). At 100%: offset=-1.5 → -thumbSize1.5 (thumb center at max).\n static #thumbCenterOffset(progress: number): number {\n return 1.5 - (3 * progress) / 100;\n }\n\n static #thumbPositionCSS(progress: number): string {\n return `calc(${progress}% + var(--zui-slider-thumb-size) * ${ZuiSlider.#thumbCenterOffset(progress)})`;\n }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-slider': ZuiSlider;\n }\n}\n"]}
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,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAI5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,OAAO,SAAU,SAAQ,wBAAwB;IAAvD;;QACE,kBAAa,GAAW,IAAI,CAAC;QAC7B,uBAAkB,GAAW,GAAG,CAAC;QACjC,qBAAgB,GAAW,KAAK,CAAC;QAEjC,WAAM,GAAW,IAAI,CAAC;QACtB,gBAAW,GAAW,GAAG,CAAC;QAC1B,cAAS,GAAW,KAAK,CAAC;QAE1B,qBAAgB,GAAG,IAAI,GAAG,CAQxB;YACA,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;YAC7C,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;YAClD,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;SACjD,CAAC,CAAC;QAEH,4FAA4F;QAC5F,0BAAqB,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;QAChF,+BAA0B,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;QAC/F,6BAAwB,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC;QAEzF,yGAAyG;QACzG,2BAAsB,GAAG,IAAI,CAAC,mBAAmB,CAC/C,OAAO,EACP,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,EACvB,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CACvB,CAAC;QACF,gCAA2B,GAAG,IAAI,CAAC,mBAAmB,CACpD,YAAY,EACZ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,EAC5B,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAC5B,CAAC;QACF,8BAAyB,GAAG,IAAI,CAAC,mBAAmB,CAClD,UAAU,EACV,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,EAC1B,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAC5B,CAAC;QAEF,mCAAmC;QACnC,uBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACjD,qBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7C,kFAAkF;QAClF,OAAE,GAAmG;YACnG,KAAK,EAAE;gBACL,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC;gBACzC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC;gBACjD,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC;gBAC9C,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC;aAC7C;YACD,UAAU,EAAE;gBACV,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC;gBAC9C,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,CAAC,YAAY,CAAC;gBACtD,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC;gBACnD,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC;aAClD;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC;gBAC5C,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,CAAC,UAAU,CAAC;gBACpD,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC;gBACjD,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC;aAChD;SACF,CAAC;QAwIF;;WAEG;QAC0B,UAAK,GAAG,KAAK,CAAC;QA4B3C;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;QAEpC;;WAEG;QACyB,QAAG,GAAG,GAAG,CAAC;QAEtC;;WAEG;QACyB,SAAI,GAAG,CAAC,CAAC;QAErC;;WAEG;QACqD,eAAU,GAAG,KAAK,CAAC;IA2V7E,CAAC;IAxlBC,aAAa,CAAgB;IAC7B,kBAAkB,CAAe;IACjC,gBAAgB,CAAiB;IAEjC,MAAM,CAAgB;IACtB,WAAW,CAAe;IAC1B,SAAS,CAAiB;IAE1B,gBAAgB,CAYb;IAEH,4FAA4F;IAC5F,qBAAqB,CAA2D;IAChF,0BAA0B,CAAqE;IAC/F,wBAAwB,CAAiE;IAEzF,yGAAyG;IACzG,sBAAsB,CAIpB;IACF,2BAA2B,CAIzB;IACF,yBAAyB,CAIvB;IAEF,mCAAmC;IACnC,kBAAkB,CAA+B;IACjD,gBAAgB,CAA6B;IAE7C,kFAAkF;IAClF,EAAE,CAmBA;IAEF,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;gBACnD,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC;gBACpC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC;gBAChC,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC,KAAK,CAAC;gBAC3C,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACvC,IAAI,CAAC,aAAa,CAAC,GAAG,UAAU,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;YAC9D,CAAC;iBAAM,CAAC;gBACN,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;gBAC1B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC;gBACjC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAClC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,gFAAgF;QAChF,uFAAuF;QACvF,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAES,OAAO,CAAC,OAAkC;QAClD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7C,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YAC7C,4FAA4F;YAC5F,uFAAuF;YACvF,+FAA+F;YAC/F,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;gBACnD,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC;gBAClC,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC;gBAC9B,IAAI,QAAQ,KAAK,IAAI,CAAC,WAAW,IAAI,MAAM,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;oBAC/D,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;oBAC5B,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;oBACxB,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,CAAC;gBACD,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;YAC9D,CAAC;iBAAM,CAAC;gBACN,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC;gBAC3C,IAAI,QAAQ,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;oBAC7B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;oBACvB,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,CAAC;gBACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;IACH,CAAC;IAED,YAAY;QACV,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAmB,qBAAqB,CAAE,CAAC;IAClF,CAAC;IAED,YAAY;QACV,MAAM,MAAM,GAAG,IAAI,CAAC,UAAW,CAAC,gBAAgB,CAAmB,qBAAqB,CAAC,CAAC;QAC1F,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;IAED,IAAc,qBAAqB;QACjC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;IAC5E,CAAC;IAES,iBAAiB;QACzB,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,wFAAwF;QACxF,0FAA0F;QAC1F,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC;YAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;QAClC,CAAC;IACH,CAAC;IAED,wBAAwB;QACtB,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,EAAE,CAAC;YACnD,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC1B,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;YAClC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;YACxB,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;YAChC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;YACtB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QACxB,CAAC;IACH,CAAC;IAED;;;;OAIG;IACH,aAAa,CAAC,MAAc;QAC1B,IAAI,MAAM,KAAK,EAAE,EAAE,CAAC;YAClB,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;QAC/B,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;YACf,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IAC7D,CAAC;IAGD,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,MAAc;QACtB,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3B,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,IAAI,aAAa;QACf,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;IAQD,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,UAAU,CAAC,MAAc;QAC3B,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;QAChC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,GAAG,MAAM,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;IAGD,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,IAAI,QAAQ,CAAC,MAAc;QACzB,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,MAAM,EAAE,CAAC,CAAC;QACpD,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IACzC,CAAC;IAsBD,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;IAC7B,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAC/D,CAAC;IAED,UAAU,CAAC,IAAe;QACxB,OAAO,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IACpE,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACjD,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/C,CAAC;IAED,gBAAgB,CAAC,QAAgB;QAC/B,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACtB,OAAO,CAAC,CAAC;QACX,CAAC;QACD,MAAM,GAAG,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;QACjC,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1F,CAAC;IAED,sBAAsB,CAAC,QAAgB;QACrC,MAAM,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC;QAC9B,MAAM,IAAI,GAAG,EAAS,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QACnD,OAAO,uEAAuE,CAAC,kCAAkC,CAAC,IAAI,IAAI,yBAAyB,IAAI,yHAAyH,CAAC;IACnR,CAAC;IAED,qBAAqB,CAAC,aAAqB,EAAE,WAAmB;QAC9D,MAAM,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC;QAC9B,MAAM,SAAS,GAAG,EAAS,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC;QAC7D,MAAM,OAAO,GAAG,EAAS,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;QACzD,OAAO,6IAA6I,SAAS,KAAK,CAAC,IAAI,SAAS,KAAK,CAAC,IAAI,OAAO,yBAAyB,OAAO,yHAAyH,CAAC;IAC7V,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC;IACvG,CAAC;IAED,aAAa;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,OAAO,IAAI,CAAA;;;;kBAIG,QAAQ,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,CAAC;;kBAE/D,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;kBAChB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;mBACf,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;oBACtC,IAAI,CAAC,MAAM;uBACR,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;oBACjC,IAAI,CAAC,QAAQ;qBACZ,IAAI,CAAC,SAAS;2BACR,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;2BAClB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;oBACzB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;mBACnB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;;UAE3B,IAAI,CAAC,eAAe,EAAE;UACtB,IAAI,CAAC,oBAAoB,CACzB,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,qBAAqB,EAC1B,IAAI,CAAC,sBAAsB,EAC3B,OAAO,EACP,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EACxB,QAAQ,CACT;;KAEJ,CAAC;IACJ,CAAC;IAED,YAAY;QACV,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACzC,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,aAAa,EAAE,WAAW,CAAC,EAAE,CAAC;;UAEtF,IAAI,CAAC,eAAe,EAAE,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC;UACxD,IAAI,CAAC,oBAAoB,CACzB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,0BAA0B,EAC/B,IAAI,CAAC,2BAA2B,EAChC,YAAY,EACZ,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,EAC7B,aAAa,CACd;UACC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;UAC7B,IAAI,CAAC,oBAAoB,CACzB,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,wBAAwB,EAC7B,IAAI,CAAC,yBAAyB,EAC9B,UAAU,EACV,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAC3B,WAAW,CACZ;;KAEJ,CAAC;IACJ,CAAC;IAED,iBAAiB,CAAC,KAAsB;QACtC,MAAM,IAAI,GAAc,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;QACtE,MAAM,GAAG,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QAClE,MAAM,OAAO,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;QACpF,MAAM,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QACxB,yFAAyF;QACzF,0FAA0F;QAC1F,8EAA8E;QAC9E,OAAO,IAAI,CAAA;;sBAEO,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW;uBAC9C,KAAK;;gBAEZ,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;gBAChB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;iBACf,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;kBACtC,IAAI,CAAC,GAAG,CAAC;qBACN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;kBACjC,OAAO;mBACN,IAAI,CAAC,cAAc;yBACb,CAAC,CAAC,IAAI;yBACN,CAAC,CAAC,IAAI;kBACb,CAAC,CAAC,IAAI;iBACP,CAAC,CAAC,IAAI;;KAElB,CAAC;IACJ,CAAC;IAED,oBAAoB,CAClB,GAAW,EACX,OAA2B,EAC3B,gBAAoC,EACpC,IAAe,EACf,OAAgB,EAChB,QAAgB;QAEhB,MAAM,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QACxB,0FAA0F;QAC1F,uFAAuF;QACvF,yFAAyF;QACzF,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,CAAC;gBAClE,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAS,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC;yBAChD,CAAC,CAAC,IAAI;yBACN,CAAC,CAAC,IAAI;;;wBAGP,IAAI,KAAK,YAAY;YACjC,CAAC,CAAC,mBAAmB;YACrB,CAAC,CAAC,IAAI,KAAK,UAAU;gBACrB,CAAC,CAAC,iBAAiB;gBACnB,CAAC,CAAC,cAAc;;oBAER,IAAI,CAAC,GAAG,CAAC;kBACX,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;kBAChB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;mBACf,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;uBACnC,IAAI,CAAC,QAAQ;uBACb,IAAI,CAAC,QAAQ;oBAChB,OAAO;qBACN,gBAAgB;oBACjB,CAAC,CAAC,KAAK;mBACR,CAAC,CAAC,IAAI;;;KAGpB,CAAC;IACJ,CAAC;IAED,eAAe;QACb,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACxC,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAClD,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YAChB,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,MAAM,IAAI,GAAqB,EAAE,CAAC;QAClC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;YAChC,IAAI,IAAY,CAAC;YACjB,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBACZ,IAAI,GAAG,8BAA8B,CAAC;YACxC,CAAC;iBAAM,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;gBACvB,IAAI,GAAG,2CAA2C,CAAC;YACrD,CAAC;iBAAM,CAAC;gBACN,MAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC3E,IAAI,GAAG,EAAS,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;YAC1C,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAuC,IAAI,WAAW,CAAC,CAAC;QACxE,CAAC;QACD,OAAO,IAAI,CAAA,0BAA0B,IAAI,QAAQ,CAAC;IACpD,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,OAAO,IAAI,CAAA;;sCAEuB,IAAI,CAAC,GAAG;sCACR,IAAI,CAAC,GAAG;;KAEzC,CAAC;IACJ,CAAC;IAED,QAAQ,CAAC,CAAQ;QACf,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;IACpD,CAAC;IAED,SAAS;QACP,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,qBAAqB,CAAC,GAAW;QAC/B,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACxF,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QACtG,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;QAChE,OAAO,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,mBAAmB,CAAC,IAAe,EAAE,MAA6B,EAAE,QAAoB;QACtF,OAAO,CAAC,CAAQ,EAAE,EAAE;YAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;YAC/C,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;YAClC,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;YAChC,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC5D,QAAQ,EAAE,CAAC;QACb,CAAC,CAAC;IACJ,CAAC;IAED,gBAAgB,CAAC,IAAe,EAAE,MAA6B;QAC7D,OAAO,CAAC,CAAQ,EAAE,EAAE;YAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACpC,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;YAC/C,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;YAClC,KAAK,CAAC,aAAa,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QACvF,CAAC,CAAC;IACJ,CAAC;IAED,aAAa,CAAC,KAAsB;QAClC,OAAO,CAAC,CAAQ,EAAE,EAAE;YAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;gBACtB,IAAI,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;oBAC1D,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;oBAC/B,OAAO;gBACT,CAAC;gBACD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;YAChC,CAAC;iBAAM,CAAC;gBACN,IAAI,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;oBAC5D,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;oBAC7B,OAAO;gBACT,CAAC;gBACD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE;YAClE,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;IACJ,CAAC;IAED,eAAe,CAAC,IAAe;QAC7B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;QAC/C,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1B,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;QACxB,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,uBAAuB,CAAC,IAAe;QACrC,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;QAC/C,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1B,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACnB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;gBACtB,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED,mBAAmB,CAAC,IAAe;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC,OAAO,GAAG,IAAI,CAAC;IAClD,CAAC;IAED,kBAAkB,CAAC,IAAe;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;QAC/C,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAED,sFAAsF;IACtF,uFAAuF;IACvF,wHAAwH;IACxH,MAAM,CAAC,kBAAkB,CAAC,QAAgB;QACxC,OAAO,GAAG,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IACpC,CAAC;IAED,MAAM,CAAC,iBAAiB,CAAC,QAAgB;QACvC,OAAO,QAAQ,QAAQ,sCAAsC,EAAS,CAAC,kBAAkB,CAAC,QAAQ,CAAC,GAAG,CAAC;IACzG,CAAC;CACF;;AA5ZC;IADC,QAAQ,EAAE;sCAGV;AAiB4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAe;AAG3C;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;2CAGtC;AAWD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;yCAGpC;AAa2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAS;AAKR;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAW;AAKV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAU;AAKmB;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;6CAAoB;AA6V7E,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import { ZuiFormAssociatedElement } from '@zywave/zui-base';\nimport { html, nothing, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\ntype ThumbFlag = 'thumb' \| 'startThumb' \| 'endThumb';\n\n/*\n A range form control for choosing values along a slider.\n * @element zui-slider\n \n @attr {string \| null} [name=null] - The name of this element that is associated with form submission\n * @attr {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\n * @attr {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\n * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @attr {number} [value=50] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @attr {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @attr {number} [value-start=0] - Represents the start (lower) value in range mode\n * @attr {number} [value-end=100] - Represents the end (upper) value in range mode\n * @attr {number} [min=0] - Represents the minimum permitted value\n * @attr {number} [max=100] - Represents the maximum permitted value\n * @attr {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @attr {boolean} [show-min-max=false] - Shows the min and max values beneath the slider\n \n @prop {string \| null} [name=null] - The name of this element that is associated with form submission\n * @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\n * @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\n * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @prop {number} [valueAsNumber=50] - Returns the value as a number. Invalid or non-numeric values are clamped to min; empty string (representing an in-progress edit) returns NaN\n * @prop {string} [value='50'] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line (single mode)\n * @prop {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @prop {string} [valueStart='0'] - Represents the start (lower) value in range mode\n * @prop {string} [valueEnd='100'] - Represents the end (upper) value in range mode\n * @prop {number} [progressStart=0] - Determines visual placement of the start thumb in range mode\n * @prop {number} [progressEnd=100] - Determines visual placement of the end thumb in range mode\n * @prop {number} [min=0] - Represents the minimum permitted value\n * @prop {number} [max=100] - Represents the maximum permitted value\n * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider\n \n @cssprop [--zui-slider-thumb-size=0.875rem (14px)] - Controls the visual dot size and thumb hit-area (hit area is 3× this value)\n * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each thumb\n \n @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }\n /\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n #defaultValue: string = '50';\n #defaultValueStart: string = '0';\n #defaultValueEnd: string = '100';\n\n #value: string = '50';\n #valueStart: string = '0';\n #valueEnd: string = '100';\n\n #thumbInputState = new Map<\n ThumbFlag,\n {\n visible: boolean;\n focused: boolean;\n timer?: ReturnType<typeof setTimeout>;\n debounceTimer?: ReturnType<typeof setTimeout>;\n }\n >([\n ['thumb', { visible: false, focused: false }],\n ['startThumb', { visible: false, focused: false }],\n ['endThumb', { visible: false, focused: false }],\n ]);\n\n // Pre-bound floating input handlers cached to avoid new function references on every render\n #onThumbFloatingInput = this.#onFloatingInput('thumb', (v) => (this.value = v));\n #onStartThumbFloatingInput = this.#onFloatingInput('startThumb', (v) => (this.valueStart = v));\n #onEndThumbFloatingInput = this.#onFloatingInput('endThumb', (v) => (this.valueEnd = v));\n\n // Cached floating input change handlers — flush debounce and dispatch immediately on commit (Enter/blur)\n #onThumbFloatingChange = this.#makeFloatingChange(\n 'thumb',\n (v) => (this.value = v),\n () => this.#onChange()\n );\n #onStartThumbFloatingChange = this.#makeFloatingChange(\n 'startThumb',\n (v) => (this.valueStart = v),\n () => this.#onRangeChange()\n );\n #onEndThumbFloatingChange = this.#makeFloatingChange(\n 'endThumb',\n (v) => (this.valueEnd = v),\n () => this.#onRangeChange()\n );\n\n // Cached range drag input handlers\n #onRangeStartInput = this.#onRangeInput('start');\n #onRangeEndInput = this.#onRangeInput('end');\n\n // Cached pointer/focus handlers per thumb — prevents new closures on every render\n #h: Record<ThumbFlag, { show: () => void; hide: () => void; focus: () => void; blur: () => void }> = {\n thumb: {\n show: () => this.#showThumbInput('thumb'),\n hide: () => this.#scheduleHideThumbInput('thumb'),\n focus: () => this.#focusFloatingInput('thumb'),\n blur: () => this.#blurFloatingInput('thumb'),\n },\n startThumb: {\n show: () => this.#showThumbInput('startThumb'),\n hide: () => this.#scheduleHideThumbInput('startThumb'),\n focus: () => this.#focusFloatingInput('startThumb'),\n blur: () => this.#blurFloatingInput('startThumb'),\n },\n endThumb: {\n show: () => this.#showThumbInput('endThumb'),\n hide: () => this.#scheduleHideThumbInput('endThumb'),\n focus: () => this.#focusFloatingInput('endThumb'),\n blur: () => this.#blurFloatingInput('endThumb'),\n },\n };\n\n static get styles() {\n return [super.styles, style];\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.updateComplete.then(() => {\n if (this.range) {\n const [startInput, endInput] = this.#rangeInputs();\n this.#valueStart = startInput.value;\n this.#valueEnd = endInput.value;\n this.#defaultValueStart = startInput.value;\n this.#defaultValueEnd = endInput.value;\n this._setFormValue(`${startInput.value},${endInput.value}`);\n } else {\n const input = this.#singleInput();\n this.#value = input.value;\n this.#defaultValue = input.value;\n this._setFormValue(input.value);\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#clearAllThumbInputState();\n // Schedule a re-render so the cleared visibility state is reflected in the DOM.\n // Lit defers this render until the element reconnects if it is currently disconnected.\n this.requestUpdate();\n }\n\n protected updated(changed: Map<PropertyKey, unknown>) {\n if (changed.has('disabled') && this.disabled) {\n this.#clearAllThumbInputState();\n }\n if (changed.has('min') \|\| changed.has('max')) {\n // The native inputs have already clamped (and step-snapped) their values to the new bounds.\n // Read them back and sync internal state + form value. If the value changed, request a\n // re-render so the floating input (which binds to #value/#valueStart/#valueEnd) stays in sync.\n if (this.range) {\n const [startInput, endInput] = this.#rangeInputs();\n const newStart = startInput.value;\n const newEnd = endInput.value;\n if (newStart !== this.#valueStart \|\| newEnd !== this.#valueEnd) {\n this.#valueStart = newStart;\n this.#valueEnd = newEnd;\n this.requestUpdate();\n }\n this._setFormValue(`${this.#valueStart},${this.#valueEnd}`);\n } else {\n const newValue = this.#singleInput().value;\n if (newValue !== this.#value) {\n this.#value = newValue;\n this.requestUpdate();\n }\n this._setFormValue(this.#value);\n }\n }\n }\n\n #singleInput(): HTMLInputElement {\n return this.shadowRoot!.querySelector<HTMLInputElement>('input[type=\"range\"]')!;\n }\n\n #rangeInputs(): [HTMLInputElement, HTMLInputElement] {\n const inputs = this.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type=\"range\"]');\n return [inputs[0], inputs[1]];\n }\n\n protected get _focusControlSelector() {\n return 'input';\n }\n\n protected get _formValue() {\n return this.range ? `${this.#valueStart},${this.#valueEnd}` : this.#value;\n }\n\n protected formResetCallback() {\n this.#clearAllThumbInputState();\n // Always request a re-render so the cleared thumb visibility is reflected even when the\n // reset value equals the current value (the named setter requestUpdate would be a no-op).\n this.requestUpdate();\n if (this.range) {\n this.valueStart = this.#defaultValueStart;\n this.valueEnd = this.#defaultValueEnd;\n } else {\n this.value = this.#defaultValue;\n }\n }\n\n #clearAllThumbInputState() {\n for (const entry of this.#thumbInputState.values()) {\n clearTimeout(entry.timer);\n clearTimeout(entry.debounceTimer);\n entry.timer = undefined;\n entry.debounceTimer = undefined;\n entry.visible = false;\n entry.focused = false;\n }\n }\n\n /\n Clamps a raw string value to the current [min, max] range.\n * Empty string is passed through unchanged (represents an in-progress floating input edit).\n * Non-numeric strings are passed through unchanged.\n /\n #clampToRange(rawVal: string): string {\n if (rawVal === '') {\n return rawVal;\n }\n const num = parseFloat(rawVal);\n if (isNaN(num)) {\n return rawVal;\n }\n return String(Math.min(this.max, Math.max(this.min, num)));\n }\n\n @property()\n get value() {\n return this.#value;\n }\n\n set value(rawVal: string) {\n rawVal = this.#clampToRange(rawVal);\n const oldVal = this.#value;\n this.#value = rawVal;\n this._setFormValue(rawVal);\n this.requestUpdate('value', oldVal);\n }\n\n get valueAsNumber() {\n return parseFloat(this.#value);\n }\n\n /\n Enables range mode with two thumbs for selecting a value range\n /\n @property({ type: Boolean }) range = false;\n\n @property({ attribute: 'value-start' })\n get valueStart() {\n return this.#valueStart;\n }\n\n set valueStart(rawVal: string) {\n rawVal = this.#clampToRange(rawVal);\n const oldVal = this.#valueStart;\n this.#valueStart = rawVal;\n this._setFormValue(`${rawVal},${this.#valueEnd}`);\n this.requestUpdate('valueStart', oldVal);\n }\n\n @property({ attribute: 'value-end' })\n get valueEnd() {\n return this.#valueEnd;\n }\n\n set valueEnd(rawVal: string) {\n rawVal = this.#clampToRange(rawVal);\n const oldVal = this.#valueEnd;\n this.#valueEnd = rawVal;\n this._setFormValue(`${this.#valueStart},${rawVal}`);\n this.requestUpdate('valueEnd', oldVal);\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 = 100;\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 Shows the min and max values beneath the slider\n /\n @property({ type: Boolean, attribute: 'show-min-max' }) showMinMax = false;\n\n get #range() {\n return this.max - this.min;\n }\n\n get #progressColor() {\n return this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n }\n\n #isVisible(flag: ThumbFlag): boolean {\n return this.#thumbInputState.get(flag)!.visible && !this.disabled;\n }\n\n get progress() {\n return this.#computeProgress(this.#value);\n }\n\n get progressStart() {\n return this.#computeProgress(this.#valueStart);\n }\n\n get progressEnd() {\n return this.#computeProgress(this.#valueEnd);\n }\n\n #computeProgress(rawValue: string): number {\n if (this.#range === 0) {\n return 0;\n }\n const num = parseFloat(rawValue);\n return isNaN(num) ? 0 : parseFloat((((num - this.min) / this.#range) 100).toFixed(4));\n }\n\n #singleTrackBackground(progress: number): string {\n const c = this.#progressColor;\n const stop = ZuiSlider.#thumbPositionCSS(progress);\n return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), ${c} var(--zui-slider-thumb-size), ${c} ${stop}, var(--zui-gray-200) ${stop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n }\n\n #rangeTrackBackground(progressStart: number, progressEnd: number): string {\n const c = this.#progressColor;\n const startStop = ZuiSlider.#thumbPositionCSS(progressStart);\n const endStop = ZuiSlider.#thumbPositionCSS(progressEnd);\n return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-gray-200) var(--zui-slider-thumb-size), var(--zui-gray-200) ${startStop}, ${c} ${startStop}, ${c} ${endStop}, var(--zui-gray-200) ${endStop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n }\n\n render() {\n return html`${this.range ? this.#renderRange() : this.#renderSingle()}${this.#renderMinMaxLabels()}`;\n }\n\n #renderSingle() {\n const progress = this.progress;\n return html`\n <div class=\"single-wrapper\">\n <input\n aria-label=\"Slider value\"\n style=${styleMap({ background: this.#singleTrackBackground(progress) })}\n type=\"range\"\n .min=\"${String(this.min)}\"\n .max=\"${String(this.max)}\"\n .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n .value=\"${this.#value}\"\n ?disabled=\"${this.disabled \|\| this.readOnly}\"\n @input=\"${this.#onInput}\"\n @change=\"${this.#onChange}\"\n @pointerenter=\"${this.#h.thumb.show}\"\n @pointerleave=\"${this.#h.thumb.hide}\"\n @focus=\"${this.#h.thumb.show}\"\n @blur=\"${this.#h.thumb.hide}\"\n />\n ${this.#renderStepDots()}\n ${this.#renderFloatingInput(\n this.#value,\n this.#onThumbFloatingInput,\n this.#onThumbFloatingChange,\n 'thumb',\n this.#isVisible('thumb'),\n progress\n )}\n </div>\n `;\n }\n\n #renderRange() {\n const progressStart = this.progressStart;\n const progressEnd = this.progressEnd;\n return html`\n <div\n class=\"range-wrapper\"\n style=${styleMap({ background: this.#rangeTrackBackground(progressStart, progressEnd) })}\n >\n ${this.#renderStepDots()}${this.#renderRangeInput('start')}\n ${this.#renderFloatingInput(\n this.#valueStart,\n this.#onStartThumbFloatingInput,\n this.#onStartThumbFloatingChange,\n 'startThumb',\n this.#isVisible('startThumb'),\n progressStart\n )}\n ${this.#renderRangeInput('end')}\n ${this.#renderFloatingInput(\n this.#valueEnd,\n this.#onEndThumbFloatingInput,\n this.#onEndThumbFloatingChange,\n 'endThumb',\n this.#isVisible('endThumb'),\n progressEnd\n )}\n </div>\n `;\n }\n\n #renderRangeInput(which: 'start' \| 'end') {\n const flag: ThumbFlag = which === 'start' ? 'startThumb' : 'endThumb';\n const val = which === 'start' ? this.#valueStart : this.#valueEnd;\n const onInput = which === 'start' ? this.#onRangeStartInput : this.#onRangeEndInput;\n const h = this.#h[flag];\n // live() is required: when #onRangeInput snaps the DOM value back via direct input.value\n // assignment (drag past the other thumb), there is no state change → no re-render. live()\n // forces Lit to re-read the current DOM value and re-sync it on every render.\n return html`\n <input\n aria-label=\"${which === 'start' ? 'Range start' : 'Range end'}\"\n class=\"range-${which}\"\n type=\"range\"\n .min=\"${String(this.min)}\"\n .max=\"${String(this.max)}\"\n .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n .value=\"${live(val)}\"\n ?disabled=\"${this.disabled \|\| this.readOnly}\"\n @input=\"${onInput}\"\n @change=\"${this.#onRangeChange}\"\n @pointerenter=\"${h.show}\"\n @pointerleave=\"${h.hide}\"\n @focus=\"${h.show}\"\n @blur=\"${h.hide}\"\n />\n `;\n }\n\n #renderFloatingInput(\n val: string,\n onInput: (e: Event) => void,\n onFloatingChange: (e: Event) => void,\n flag: ThumbFlag,\n visible: boolean,\n progress: number\n ) {\n const h = this.#h[flag];\n // live() is required on the number input: when the debounced setter clamps a value to the\n // same string it already holds (e.g. typing 150 when max=100 clamps back to '100'), no\n // reactive property change occurs and Lit skips the DOM update. live() forces a re-read.\n return html`\n <div\n class=${classMap({ 'thumb-input': true, 'thumb-input--visible': visible })}\n style=${styleMap({ left: ZuiSlider.#thumbPositionCSS(progress) })}\n @pointerenter=\"${h.show}\"\n @pointerleave=\"${h.hide}\"\n >\n <input\n aria-label=\"${flag === 'startThumb'\n ? 'Range start value'\n : flag === 'endThumb'\n ? 'Range end value'\n : 'Slider value'}\"\n type=\"number\"\n .value=\"${live(val)}\"\n .min=\"${String(this.min)}\"\n .max=\"${String(this.max)}\"\n .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n ?disabled=\"${this.disabled}\"\n ?readonly=\"${this.readOnly}\"\n @input=\"${onInput}\"\n @change=\"${onFloatingChange}\"\n @focus=\"${h.focus}\"\n @blur=\"${h.blur}\"\n />\n </div>\n `;\n }\n\n #renderStepDots() {\n if (this.step <= 0 \|\| this.#range === 0) {\n return nothing;\n }\n const count = Math.round(this.#range / this.step);\n if (count > 100) {\n return nothing;\n }\n const dots: TemplateResult[] = [];\n for (let i = 0; i <= count; i++) {\n let left: string;\n if (i === 0) {\n left = 'var(--zui-slider-thumb-size)';\n } else if (i === count) {\n left = 'calc(100% - var(--zui-slider-thumb-size))';\n } else {\n const pos = parseFloat((((i * this.step) / this.#range) * 100).toFixed(4));\n left = ZuiSlider.#thumbPositionCSS(pos);\n }\n dots.push(html`<span class=\"step-dot\" style=\"left: ${left}\"></span>`);\n }\n return html`<div class=\"step-dots\">${dots}</div>`;\n }\n\n #renderMinMaxLabels() {\n if (!this.showMinMax) {\n return nothing;\n }\n return html`\n <div class=\"min-max-labels\">\n <span class=\"min-max-label\">${this.min}</span>\n <span class=\"min-max-label\">${this.max}</span>\n </div>\n `;\n }\n\n #onInput(e: Event) {\n if (this.readOnly) {\n return;\n }\n this.value = (e.target as HTMLInputElement).value;\n }\n\n #onChange() {\n this.dispatchEvent(new CustomEvent('change', { detail: this.#value, bubbles: true }));\n }\n\n #processFloatingValue(raw: number): string {\n const stepDecimals = this.step > 0 ? (String(this.step).split('.')[1] ?? '').length : 0;\n const stepped = this.step > 0 ? Math.round((raw - this.min) / this.step) * this.step + this.min : raw;\n const clamped = Math.min(this.max, Math.max(this.min, stepped));\n return stepDecimals > 0 ? clamped.toFixed(stepDecimals) : String(Math.round(clamped));\n }\n\n #makeFloatingChange(flag: ThumbFlag, setter: (val: string) => void, dispatch: () => void) {\n return (e: Event) => {\n if (this.readOnly) {\n return;\n }\n const input = e.target as HTMLInputElement;\n if (input.value === '') {\n return;\n }\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.debounceTimer);\n entry.debounceTimer = undefined;\n setter(this.#processFloatingValue(parseFloat(input.value)));\n dispatch();\n };\n }\n\n #onFloatingInput(flag: ThumbFlag, setter: (val: string) => void) {\n return (e: Event) => {\n if (this.readOnly) {\n return;\n }\n const input = e.target as HTMLInputElement;\n if (input.value === '') {\n return;\n }\n const raw = parseFloat(input.value);\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.debounceTimer);\n entry.debounceTimer = setTimeout(() => setter(this.#processFloatingValue(raw)), 300);\n };\n }\n\n #onRangeInput(which: 'start' \| 'end') {\n return (e: Event) => {\n if (this.readOnly) {\n return;\n }\n const input = e.target as HTMLInputElement;\n if (which === 'start') {\n if (parseFloat(input.value) >= parseFloat(this.#valueEnd)) {\n input.value = this.#valueStart;\n return;\n }\n this.valueStart = input.value;\n } else {\n if (parseFloat(input.value) <= parseFloat(this.#valueStart)) {\n input.value = this.#valueEnd;\n return;\n }\n this.valueEnd = input.value;\n }\n };\n }\n\n #onRangeChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: { valueStart: this.#valueStart, valueEnd: this.#valueEnd },\n bubbles: true,\n })\n );\n }\n\n #showThumbInput(flag: ThumbFlag) {\n if (this.disabled) {\n return;\n }\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.timer);\n entry.timer = undefined;\n entry.visible = true;\n this.requestUpdate();\n }\n\n #scheduleHideThumbInput(flag: ThumbFlag) {\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.timer);\n entry.timer = setTimeout(() => {\n if (!entry.focused) {\n entry.visible = false;\n this.requestUpdate();\n }\n }, 100);\n }\n\n #focusFloatingInput(flag: ThumbFlag) {\n if (this.disabled) {\n return;\n }\n this.#showThumbInput(flag);\n this.#thumbInputState.get(flag)!.focused = true;\n }\n\n #blurFloatingInput(flag: ThumbFlag) {\n const entry = this.#thumbInputState.get(flag)!;\n entry.focused = false;\n this.#scheduleHideThumbInput(flag);\n }\n\n // Maps a 0–100 progress value to a CSS multiplier for --zui-slider-thumb-size so that\n // `progress% + thumbSize * offset` lands on the thumb center within the inset wrapper.\n // At 0%: offset=1.5 → thumbSize1.5 (thumb center at min). At 100%: offset=-1.5 → -thumbSize1.5 (thumb center at max).\n static #thumbCenterOffset(progress: number): number {\n return 1.5 - (3 * progress) / 100;\n }\n\n static #thumbPositionCSS(progress: number): string {\n return `calc(${progress}% + var(--zui-slider-thumb-size) * ${ZuiSlider.#thumbCenterOffset(progress)})`;\n }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-slider': ZuiSlider;\n }\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@zywave/zui-slider",
-  "version": "4.4.0-pre.0",
+  "version": "4.4.0-pre.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
@@ -27,5 +27,5 @@
   "devDependencies": {
     "@zywave/zui-input": "^4.2.3"
   },
-  "gitHead": "bfb39a7f1add66395af991389c24b1774bf8b97c"
+  "gitHead": "db515ad35b2532f6e15d6414f6fdf132df38ee09"
 }

package/src/css/zui-slider.fouc.scss CHANGED Viewed

@@ -33,9 +33,13 @@ zui-slider {
       height: var(--zui-slider-thumb-size);
       background-color: var(--zui-blue);
       border-radius: 50%;
-      cursor: pointer;
+      cursor: grab;
       transform: translate(-50%, -50%);
     }
+    &:active::after {
+      cursor: grabbing;
+    }
   }
 }

package/src/zui-slider-css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css`:host .thumb-input input[type=number]{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[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-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:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}: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:0;border-radius:50%;box-shadow:none;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]: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)}: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)}:host input[type=range]:disabled{cursor:not-allowed}:host 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))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host 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))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}: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:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-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{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)*-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:pointer;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:pointer;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)*2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([disabled]){cursor:not-allowed}:host([disabled]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;
+export const style = css`:host .thumb-input input[type=number]{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[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-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:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}: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:0;border-radius:50%;box-shadow:none;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]: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 input[type=range]:disabled{cursor:not-allowed}:host 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))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host 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))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}: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:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-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{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)*-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:active::-moz-range-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)*2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}: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]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;

package/src/zui-slider.scss CHANGED Viewed

@@ -30,7 +30,7 @@
     background: var(--zui-gray-200);
     border-radius: rem(3);
     outline: none;
-    cursor: pointer;
+    cursor: grab;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
@@ -88,11 +88,13 @@
       &::-webkit-slider-thumb {
         background: radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
         box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
+        cursor: grabbing;
       }
       &::-moz-range-thumb {
         background: radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
         box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
+        cursor: grabbing;
       }
     }
@@ -203,7 +205,7 @@
       &::-webkit-slider-thumb {
         margin-top: rem(2);
-        cursor: pointer;
+        cursor: grab;
         pointer-events: all;
       }
@@ -217,10 +219,20 @@
       }
       &::-moz-range-thumb {
-        cursor: pointer;
+        cursor: grab;
         pointer-events: all;
       }
+      &:active {
+        &::-webkit-slider-thumb {
+          cursor: grabbing;
+        }
+        &::-moz-range-thumb {
+          cursor: grabbing;
+        }
+      }
       &:disabled {
         &::-webkit-slider-thumb {
           cursor: not-allowed;
@@ -258,6 +270,24 @@
   }
 }
+:host([readonly]) {
+  // The native range input is set to disabled to block dragging, since input[type=range]
+  // ignores the readonly attribute. Override the disabled appearance to look normal.
+  input[type='range']:disabled {
+    cursor: default;
+    &::-webkit-slider-thumb {
+      background: radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
+      cursor: default;
+    }
+    &::-moz-range-thumb {
+      background: radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
+      cursor: default;
+    }
+  }
+}
 :host([disabled]) {
   cursor: not-allowed;

package/src/zui-slider.ts CHANGED Viewed

@@ -364,7 +364,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           .max="${String(this.max)}"
           .step="${this.step > 0 ? String(this.step) : '1'}"
           .value="${this.#value}"
-          ?disabled="${this.disabled}"
+          ?disabled="${this.disabled || this.readOnly}"
           @input="${this.#onInput}"
           @change="${this.#onChange}"
           @pointerenter="${this.#h.thumb.show}"
@@ -432,7 +432,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         .max="${String(this.max)}"
         .step="${this.step > 0 ? String(this.step) : '1'}"
         .value="${live(val)}"
-        ?disabled="${this.disabled}"
+        ?disabled="${this.disabled || this.readOnly}"
         @input="${onInput}"
         @change="${this.#onRangeChange}"
         @pointerenter="${h.show}"