@nuralyui/slider-input 0.0.6 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.js +241 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
- package/slider-input.component.d.ts +1 -1
- package/slider-input.component.js.map +1 -1
- package/slider-input.style.js.map +1 -1
- package/slider-input.style.variables.js.map +1 -1
- package/slider-input.types.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -1 +1,241 @@
|
|
|
1
|
-
import{css as r,LitElement as l,html as a}from"lit";import{property as i,state as t}from"lit/decorators.js";var n=r`${r`:host{--nuraly-slider-input-local-width:var(--nuraly-size-slider-input-width, 100%);--nuraly-slider-input-local-track-height:var(--nuraly-size-slider-input-track-height, 8px);--nuraly-slider-input-local-thumb-diameter:var(--nuraly-size-slider-input-thumb-diameter, 20px);--nuraly-slider-input-local-border-width:var(--nuraly-border-slider-input-width, 1px);--nuraly-slider-input-local-small-height:var(--nuraly-size-slider-input-small-height, 6px);--nuraly-slider-input-local-small-thumb-diameter:var(--nuraly-size-slider-input-small-thumb-diameter, 16px);--nuraly-slider-input-local-large-height:var(--nuraly-size-slider-input-large-height, 10px);--nuraly-slider-input-local-large-thumb-diameter:var(--nuraly-size-slider-input-large-thumb-diameter, 24px);--nuraly-slider-input-local-font-family:var(--nuraly-typograpnr-slider-input-font-family, var(--nuraly-font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif));--nuraly-slider-input-local-font-size:var(--nuraly-typograpnr-slider-input-font-size, var(--nuraly-font-size-base, 14px));--nuraly-slider-input-local-font-weight:var(--nuraly-typograpnr-slider-input-font-weight, var(--nuraly-font-weight-normal, 400));--nuraly-slider-input-local-border-radius:var(--nuraly-border-slider-input-radius, var(--nuraly-border-radius-base, 6px));--nuraly-slider-input-local-thumb-border-radius:var(--nuraly-border-slider-input-thumb-radius, var(--nuraly-border-radius-round, 50%));--nuraly-slider-input-local-track-color:var(--nuraly-color-slider-input-track, var(--nuraly-color-neutral-200, #e5e7eb));--nuraly-slider-input-local-track-filled-color:var(--nuraly-color-slider-input-track-filled, var(--nuraly-color-primary-500, #3b82f6));--nuraly-slider-input-local-border-color:var(--nuraly-color-slider-input-border, var(--nuraly-color-neutral-300, #d1d5db));--nuraly-slider-input-local-thumb-color:var(--nuraly-color-slider-input-thumb, var(--nuraly-color-white, #ffffff));--nuraly-slider-input-local-thumb-border-color:var(--nuraly-color-slider-input-thumb-border, var(--nuraly-color-primary-500, #3b82f6));--nuraly-slider-input-local-thumb-hover-color:var(--nuraly-color-slider-input-thumb-hover, var(--nuraly-color-primary-50, #eff6ff));--nuraly-slider-input-local-thumb-active-color:var(--nuraly-color-slider-input-thumb-active, var(--nuraly-color-primary-100, #dbeafe));--nuraly-slider-input-local-disabled-track-color:var(--nuraly-color-slider-input-disabled-track, var(--nuraly-color-neutral-100, #f5f5f5));--nuraly-slider-input-local-disabled-color:var(--nuraly-color-slider-input-disabled, var(--nuraly-color-neutral-300, #d1d5db));--nuraly-slider-input-local-disabled-thumb-color:var(--nuraly-color-slider-input-disabled-thumb, var(--nuraly-color-neutral-200, #e5e7eb));--nuraly-slider-input-local-disabled-border-color:var(--nuraly-color-slider-input-disabled-border, var(--nuraly-color-neutral-200, #e5e7eb));--nuraly-slider-input-local-error-color:var(--nuraly-color-slider-input-error, var(--nuraly-color-error-500, #ef4444));--nuraly-slider-input-local-warning-color:var(--nuraly-color-slider-input-warning, var(--nuraly-color-warning-500, #f59e0b));--nuraly-slider-input-local-success-color:var(--nuraly-color-slider-input-success, var(--nuraly-color-success-500, #10b981));--nuraly-slider-input-local-thumb-shadow:var(--nuraly-shadow-slider-input-thumb, var(--nuraly-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)));--nuraly-slider-input-local-focus-shadow:var(--nuraly-shadow-slider-input-focus, var(--nuraly-shadow-focus, 0 0 0 3px rgba(59, 130, 246, 0.15)));--nuraly-slider-input-local-z-index:var(--nuraly-elevation-slider-input-z-index, var(--nuraly-z-index-base, 1));--nuraly-slider-input-local-transition-duration:var(--nuraly-transition-slider-input-duration, var(--nuraly-transition-duration-base, 150ms));--nuraly-slider-input-local-transition-timing:var(--nuraly-transition-slider-input-timing, var(--nuraly-transition-timing-ease, ease))}`}:host{display:inline-block;width:var(--nuraly-slider-input-local-width);font-family:var(--nuraly-slider-input-local-font-family);font-size:var(--nuraly-slider-input-local-font-size);font-weight:var(--nuraly-slider-input-local-font-weight)}:host([disabled]){opacity:.6;pointer-events:none}.slider-wrapper{position:relative;padding:calc(var(--nuraly-slider-input-local-thumb-diameter)/ 2) 0}.range-container{position:relative;width:100%}.range-slider,.range-slider-value{border-radius:var(--nuraly-slider-input-local-border-radius);height:var(--nuraly-slider-input-local-track-height);position:absolute;top:calc((var(--nuraly-slider-input-local-thumb-diameter) - var(--nuraly-slider-input-local-track-height))/ 2);transition:all var(--nuraly-slider-input-local-transition-duration) var(--nuraly-slider-input-local-transition-timing)}.range-slider{background:var(--nuraly-slider-input-local-track-color);width:100%;border:var(--nuraly-slider-input-local-border-width) solid var(--nuraly-slider-input-local-border-color)}.range-slider-value{background:var(--nuraly-slider-input-local-track-filled-color);width:var(--nr-slider-value-width,0%);z-index:calc(var(--nuraly-slider-input-local-z-index) + 1)}.range-thumb{background:var(--nuraly-slider-input-local-thumb-color);border:2px solid var(--nuraly-slider-input-local-thumb-border-color);border-radius:var(--nuraly-slider-input-local-thumb-border-radius);height:var(--nuraly-slider-input-local-thumb-diameter);width:var(--nuraly-slider-input-local-thumb-diameter);position:absolute;top:calc((var(--nuraly-slider-input-local-track-height) - var(--nuraly-slider-input-local-thumb-diameter))/ 2);left:var(--nr-slider-thumb-offset,0);cursor:pointer;z-index:calc(var(--nuraly-slider-input-local-z-index) + 2);box-shadow:var(--nuraly-slider-input-local-thumb-shadow);transition:all var(--nuraly-slider-input-local-transition-duration) var(--nuraly-slider-input-local-transition-timing)}.range-thumb:hover{background:var(--nuraly-slider-input-local-thumb-hover-color);box-shadow:var(--nuraly-slider-input-local-focus-shadow)}.range-thumb:active{background:var(--nuraly-slider-input-local-thumb-active-color);box-shadow:var(--nuraly-slider-input-local-focus-shadow)}input{position:absolute;top:0;left:0;height:100%;margin:0;opacity:0;width:100%;cursor:pointer;z-index:calc(var(--nuraly-slider-input-local-z-index) + 3);appearance:none;background:0 0;pointer-events:auto}input::-webkit-slider-thumb{appearance:none;width:var(--nuraly-slider-input-local-thumb-diameter);height:var(--nuraly-slider-input-local-thumb-diameter);background:0 0;cursor:pointer}input::-moz-range-thumb{appearance:none;width:var(--nuraly-slider-input-local-thumb-diameter);height:var(--nuraly-slider-input-local-thumb-diameter);background:0 0;border:none;cursor:pointer}input:focus-visible+.range-container .range-thumb{box-shadow:var(--nuraly-slider-input-local-focus-shadow)}:host([disabled]) .range-slider{background:var(--nuraly-slider-input-local-disabled-track-color);border-color:var(--nuraly-slider-input-local-disabled-border-color)}:host([disabled]) .range-slider-value{background:var(--nuraly-slider-input-local-disabled-color)}:host([disabled]) .range-thumb{background:var(--nuraly-slider-input-local-disabled-thumb-color);border-color:var(--nuraly-slider-input-local-disabled-border-color);cursor:not-allowed;box-shadow:none}:host([disabled]) input{cursor:not-allowed}:host([size=small]){--nuraly-slider-input-local-track-height:var(--nuraly-slider-input-local-small-height);--nuraly-slider-input-local-thumb-diameter:var(--nuraly-slider-input-local-small-thumb-diameter)}:host([size=large]){--nuraly-slider-input-local-track-height:var(--nuraly-slider-input-local-large-height);--nuraly-slider-input-local-thumb-diameter:var(--nuraly-slider-input-local-large-thumb-diameter)}:host([error]) .range-slider-value{background:var(--nuraly-slider-input-local-error-color)}:host([error]) .range-thumb{border-color:var(--nuraly-slider-input-local-error-color)}:host([warning]) .range-slider-value{background:var(--nuraly-slider-input-local-warning-color)}:host([warning]) .range-thumb{border-color:var(--nuraly-slider-input-local-warning-color)}:host([success]) .range-slider-value{background:var(--nuraly-slider-input-local-success-color)}:host([success]) .range-thumb{border-color:var(--nuraly-slider-input-local-success-color)}`;var e=function(r,l,a,i){for(var t,n=arguments.length,e=n<3?l:null===i?i=Object.getOwnPropertyDescriptor(l,a):i,o=r.length-1;o>=0;o--)(t=r[o])&&(e=(n<3?t(e):n>3?t(l,a,e):t(l,a))||e);return n>3&&e&&Object.defineProperty(l,a,e),e},o=function(r,l,a,i){return new(a||(a=Promise))((function(t,n){function e(r){try{u(i.next(r))}catch(r){n(r)}}function o(r){try{u(i.throw(r))}catch(r){n(r)}}function u(r){var l;r.done?t(r.value):(l=r.value,l instanceof a?l:new a((function(r){r(l)}))).then(e,o)}u((i=i.apply(r,l||[])).next())}))};class u extends l{constructor(){super(...arguments),this.disabled=!1,this.max=100,this.min=0,this.step=1,this.value=0,this._actualMin=0,this._actualMax=0,this._dispatchChangeEvents=function(r,l=100){let a;return function(...i){clearTimeout(a),a=setTimeout((()=>r.apply(this,i)),l)}}((()=>{this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("changed",{detail:{value:Number(this.value)}}))}),50)}firstUpdated(){return o(this,void 0,void 0,(function*(){if(yield this.updateComplete,this._input=this.shadowRoot.querySelector("input"),this._slider=this.shadowRoot.querySelector(".range-slider"),this._thumb=this.shadowRoot.querySelector(".range-thumb"),this._actualMin=this.min,this._actualMax=this.max,this.step){const r=this.min%this.step,l=this.max%this.step;0!==r&&(this.min=this.min-r),0!==l&&(this.max=this.max+this.step-l)}requestAnimationFrame((()=>{this._updateSliderVisuals()}))}))}render(){return a`<div class="slider-wrapper"><input max="${this.max}" min="${this.min}" step="${this.step}" type="range" value="${this.value}" ?disabled="${this.disabled}" @input="${this._inputHandler}" @change="${this._changeHandler}"><div class="range-container"><div class="range-slider"></div><div class="range-slider-value"></div><div class="range-thumb"></div></div></div>`}updated(r){(r.has("value")||r.has("min")||r.has("max"))&&requestAnimationFrame((()=>{this._updateSliderVisuals()}))}_inputHandler(r){r.stopPropagation();const l=r.target,a=Number(l.value);this.value=a>this._actualMax?this._actualMax:a<this._actualMin?this._actualMin:a,this._updateSliderVisuals(),this.requestUpdate()}_changeHandler(r){r.stopPropagation();const l=r.target,a=Number(l.value);this.value=a>this._actualMax?this._actualMax:a<this._actualMin?this._actualMin:a,this._dispatchChangeEvents(),this.requestUpdate()}_updateSliderVisuals(){if(!this._thumb||!this._slider)return;const r=this.min<this._actualMin?this._actualMin:this.min,l=(this.max>this._actualMax?this._actualMax:this.max)-r;if(0===l)return;const a=Math.max(0,Math.min(1,(this.value-r)/l)),i=this._thumb.offsetWidth||20,t=100*a+"%",n=(this._slider.offsetWidth||200)-i,e=`${Math.max(0,Math.min(n,n*a))}px`;this.style.setProperty("--nr-slider-value-width",t),this.style.setProperty("--nr-slider-thumb-offset",e)}_updateSlider(){this._updateSliderVisuals(),this._dispatchChangeEvents(),this.requestUpdate()}}u.styles=n,e([i({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),e([i({type:Number})],u.prototype,"max",void 0),e([i({type:Number})],u.prototype,"min",void 0),e([i({type:Number})],u.prototype,"step",void 0),e([i({type:Number})],u.prototype,"value",void 0),e([t()],u.prototype,"_actualMin",void 0),e([t()],u.prototype,"_actualMax",void 0),e([t()],u.prototype,"_input",void 0),e([t()],u.prototype,"_slider",void 0),e([t()],u.prototype,"_thumb",void 0),customElements.define("nr-slider-input",u);export{u as SliderInput};
|
|
1
|
+
import{css as r,LitElement as l,html as a}from"lit";import{property as i,state as t}from"lit/decorators.js";var n=r`
|
|
2
|
+
${r`
|
|
3
|
+
:host {
|
|
4
|
+
/* Component dimensions */
|
|
5
|
+
--nuraly-slider-input-local-width: var(--nuraly-size-slider-input-width, 100%);
|
|
6
|
+
--nuraly-slider-input-local-track-height: var(--nuraly-size-slider-input-track-height, 8px);
|
|
7
|
+
--nuraly-slider-input-local-thumb-diameter: var(--nuraly-size-slider-input-thumb-diameter, 20px);
|
|
8
|
+
--nuraly-slider-input-local-border-width: var(--nuraly-border-slider-input-width, 1px);
|
|
9
|
+
|
|
10
|
+
/* Size variants */
|
|
11
|
+
--nuraly-slider-input-local-small-height: var(--nuraly-size-slider-input-small-height, 6px);
|
|
12
|
+
--nuraly-slider-input-local-small-thumb-diameter: var(--nuraly-size-slider-input-small-thumb-diameter, 16px);
|
|
13
|
+
--nuraly-slider-input-local-large-height: var(--nuraly-size-slider-input-large-height, 10px);
|
|
14
|
+
--nuraly-slider-input-local-large-thumb-diameter: var(--nuraly-size-slider-input-large-thumb-diameter, 24px);
|
|
15
|
+
|
|
16
|
+
/* Typography */
|
|
17
|
+
--nuraly-slider-input-local-font-family: var(--nuraly-typograpnr-slider-input-font-family, var(--nuraly-font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif));
|
|
18
|
+
--nuraly-slider-input-local-font-size: var(--nuraly-typograpnr-slider-input-font-size, var(--nuraly-font-size-base, 14px));
|
|
19
|
+
--nuraly-slider-input-local-font-weight: var(--nuraly-typograpnr-slider-input-font-weight, var(--nuraly-font-weight-normal, 400));
|
|
20
|
+
|
|
21
|
+
/* Border radius */
|
|
22
|
+
--nuraly-slider-input-local-border-radius: var(--nuraly-border-slider-input-radius, var(--nuraly-border-radius-base, 6px));
|
|
23
|
+
--nuraly-slider-input-local-thumb-border-radius: var(--nuraly-border-slider-input-thumb-radius, var(--nuraly-border-radius-round, 50%));
|
|
24
|
+
|
|
25
|
+
/* Colors - Track */
|
|
26
|
+
--nuraly-slider-input-local-track-color: var(--nuraly-color-slider-input-track, var(--nuraly-color-neutral-200, #e5e7eb));
|
|
27
|
+
--nuraly-slider-input-local-track-filled-color: var(--nuraly-color-slider-input-track-filled, var(--nuraly-color-primary-500, #3b82f6));
|
|
28
|
+
--nuraly-slider-input-local-border-color: var(--nuraly-color-slider-input-border, var(--nuraly-color-neutral-300, #d1d5db));
|
|
29
|
+
|
|
30
|
+
/* Colors - Thumb */
|
|
31
|
+
--nuraly-slider-input-local-thumb-color: var(--nuraly-color-slider-input-thumb, var(--nuraly-color-white, #ffffff));
|
|
32
|
+
--nuraly-slider-input-local-thumb-border-color: var(--nuraly-color-slider-input-thumb-border, var(--nuraly-color-primary-500, #3b82f6));
|
|
33
|
+
--nuraly-slider-input-local-thumb-hover-color: var(--nuraly-color-slider-input-thumb-hover, var(--nuraly-color-primary-50, #eff6ff));
|
|
34
|
+
--nuraly-slider-input-local-thumb-active-color: var(--nuraly-color-slider-input-thumb-active, var(--nuraly-color-primary-100, #dbeafe));
|
|
35
|
+
|
|
36
|
+
/* Colors - Disabled states */
|
|
37
|
+
--nuraly-slider-input-local-disabled-track-color: var(--nuraly-color-slider-input-disabled-track, var(--nuraly-color-neutral-100, #f5f5f5));
|
|
38
|
+
--nuraly-slider-input-local-disabled-color: var(--nuraly-color-slider-input-disabled, var(--nuraly-color-neutral-300, #d1d5db));
|
|
39
|
+
--nuraly-slider-input-local-disabled-thumb-color: var(--nuraly-color-slider-input-disabled-thumb, var(--nuraly-color-neutral-200, #e5e7eb));
|
|
40
|
+
--nuraly-slider-input-local-disabled-border-color: var(--nuraly-color-slider-input-disabled-border, var(--nuraly-color-neutral-200, #e5e7eb));
|
|
41
|
+
|
|
42
|
+
/* Colors - Status states */
|
|
43
|
+
--nuraly-slider-input-local-error-color: var(--nuraly-color-slider-input-error, var(--nuraly-color-error-500, #ef4444));
|
|
44
|
+
--nuraly-slider-input-local-warning-color: var(--nuraly-color-slider-input-warning, var(--nuraly-color-warning-500, #f59e0b));
|
|
45
|
+
--nuraly-slider-input-local-success-color: var(--nuraly-color-slider-input-success, var(--nuraly-color-success-500, #10b981));
|
|
46
|
+
|
|
47
|
+
/* Shadows */
|
|
48
|
+
--nuraly-slider-input-local-thumb-shadow: var(--nuraly-shadow-slider-input-thumb, var(--nuraly-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)));
|
|
49
|
+
--nuraly-slider-input-local-focus-shadow: var(--nuraly-shadow-slider-input-focus, var(--nuraly-shadow-focus, 0 0 0 3px rgba(59, 130, 246, 0.15)));
|
|
50
|
+
|
|
51
|
+
/* Elevation */
|
|
52
|
+
--nuraly-slider-input-local-z-index: var(--nuraly-elevation-slider-input-z-index, var(--nuraly-z-index-base, 1));
|
|
53
|
+
|
|
54
|
+
/* Transitions */
|
|
55
|
+
--nuraly-slider-input-local-transition-duration: var(--nuraly-transition-slider-input-duration, var(--nuraly-transition-duration-base, 150ms));
|
|
56
|
+
--nuraly-slider-input-local-transition-timing: var(--nuraly-transition-slider-input-timing, var(--nuraly-transition-timing-ease, ease));
|
|
57
|
+
}
|
|
58
|
+
`}
|
|
59
|
+
|
|
60
|
+
:host {
|
|
61
|
+
display: inline-block;
|
|
62
|
+
width: var(--nuraly-slider-input-local-width);
|
|
63
|
+
font-family: var(--nuraly-slider-input-local-font-family);
|
|
64
|
+
font-size: var(--nuraly-slider-input-local-font-size);
|
|
65
|
+
font-weight: var(--nuraly-slider-input-local-font-weight);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Host attribute selectors for configuration */
|
|
69
|
+
:host([disabled]) {
|
|
70
|
+
opacity: 0.6;
|
|
71
|
+
pointer-events: none;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.slider-wrapper {
|
|
75
|
+
position: relative;
|
|
76
|
+
padding: calc(var(--nuraly-slider-input-local-thumb-diameter) / 2) 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.range-container {
|
|
80
|
+
position: relative;
|
|
81
|
+
width: 100%;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.range-slider,
|
|
85
|
+
.range-slider-value {
|
|
86
|
+
border-radius: var(--nuraly-slider-input-local-border-radius);
|
|
87
|
+
height: var(--nuraly-slider-input-local-track-height);
|
|
88
|
+
position: absolute;
|
|
89
|
+
top: calc((var(--nuraly-slider-input-local-thumb-diameter) - var(--nuraly-slider-input-local-track-height)) / 2);
|
|
90
|
+
transition: all var(--nuraly-slider-input-local-transition-duration) var(--nuraly-slider-input-local-transition-timing);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.range-slider {
|
|
94
|
+
background: var(--nuraly-slider-input-local-track-color);
|
|
95
|
+
width: 100%;
|
|
96
|
+
border: var(--nuraly-slider-input-local-border-width) solid var(--nuraly-slider-input-local-border-color);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.range-slider-value {
|
|
100
|
+
background: var(--nuraly-slider-input-local-track-filled-color);
|
|
101
|
+
width: var(--nr-slider-value-width, 0%);
|
|
102
|
+
z-index: calc(var(--nuraly-slider-input-local-z-index) + 1);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.range-thumb {
|
|
106
|
+
background: var(--nuraly-slider-input-local-thumb-color);
|
|
107
|
+
border: 2px solid var(--nuraly-slider-input-local-thumb-border-color);
|
|
108
|
+
border-radius: var(--nuraly-slider-input-local-thumb-border-radius);
|
|
109
|
+
height: var(--nuraly-slider-input-local-thumb-diameter);
|
|
110
|
+
width: var(--nuraly-slider-input-local-thumb-diameter);
|
|
111
|
+
position: absolute;
|
|
112
|
+
top: calc((var(--nuraly-slider-input-local-track-height) - var(--nuraly-slider-input-local-thumb-diameter)) / 2);
|
|
113
|
+
left: var(--nr-slider-thumb-offset, 0px);
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
z-index: calc(var(--nuraly-slider-input-local-z-index) + 2);
|
|
116
|
+
box-shadow: var(--nuraly-slider-input-local-thumb-shadow);
|
|
117
|
+
transition: all var(--nuraly-slider-input-local-transition-duration) var(--nuraly-slider-input-local-transition-timing);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.range-thumb:hover {
|
|
121
|
+
background: var(--nuraly-slider-input-local-thumb-hover-color);
|
|
122
|
+
box-shadow: var(--nuraly-slider-input-local-focus-shadow);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.range-thumb:active {
|
|
126
|
+
background: var(--nuraly-slider-input-local-thumb-active-color);
|
|
127
|
+
box-shadow: var(--nuraly-slider-input-local-focus-shadow);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
input {
|
|
131
|
+
position: absolute;
|
|
132
|
+
top: 0;
|
|
133
|
+
left: 0;
|
|
134
|
+
height: 100%;
|
|
135
|
+
margin: 0;
|
|
136
|
+
opacity: 0;
|
|
137
|
+
width: 100%;
|
|
138
|
+
cursor: pointer;
|
|
139
|
+
z-index: calc(var(--nuraly-slider-input-local-z-index) + 3);
|
|
140
|
+
appearance: none;
|
|
141
|
+
background: transparent;
|
|
142
|
+
pointer-events: auto;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
input::-webkit-slider-thumb {
|
|
146
|
+
appearance: none;
|
|
147
|
+
width: var(--nuraly-slider-input-local-thumb-diameter);
|
|
148
|
+
height: var(--nuraly-slider-input-local-thumb-diameter);
|
|
149
|
+
background: transparent;
|
|
150
|
+
cursor: pointer;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
input::-moz-range-thumb {
|
|
154
|
+
appearance: none;
|
|
155
|
+
width: var(--nuraly-slider-input-local-thumb-diameter);
|
|
156
|
+
height: var(--nuraly-slider-input-local-thumb-diameter);
|
|
157
|
+
background: transparent;
|
|
158
|
+
border: none;
|
|
159
|
+
cursor: pointer;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
input:focus-visible + .range-container .range-thumb {
|
|
163
|
+
box-shadow: var(--nuraly-slider-input-local-focus-shadow);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
/* Disabled state styling */
|
|
167
|
+
:host([disabled]) .range-slider {
|
|
168
|
+
background: var(--nuraly-slider-input-local-disabled-track-color);
|
|
169
|
+
border-color: var(--nuraly-slider-input-local-disabled-border-color);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
:host([disabled]) .range-slider-value {
|
|
173
|
+
background: var(--nuraly-slider-input-local-disabled-color);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
:host([disabled]) .range-thumb {
|
|
177
|
+
background: var(--nuraly-slider-input-local-disabled-thumb-color);
|
|
178
|
+
border-color: var(--nuraly-slider-input-local-disabled-border-color);
|
|
179
|
+
cursor: not-allowed;
|
|
180
|
+
box-shadow: none;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
:host([disabled]) input {
|
|
184
|
+
cursor: not-allowed;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* Size variants */
|
|
188
|
+
:host([size="small"]) {
|
|
189
|
+
--nuraly-slider-input-local-track-height: var(--nuraly-slider-input-local-small-height);
|
|
190
|
+
--nuraly-slider-input-local-thumb-diameter: var(--nuraly-slider-input-local-small-thumb-diameter);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
:host([size="large"]) {
|
|
194
|
+
--nuraly-slider-input-local-track-height: var(--nuraly-slider-input-local-large-height);
|
|
195
|
+
--nuraly-slider-input-local-thumb-diameter: var(--nuraly-slider-input-local-large-thumb-diameter);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* Error state */
|
|
199
|
+
:host([error]) .range-slider-value {
|
|
200
|
+
background: var(--nuraly-slider-input-local-error-color);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
:host([error]) .range-thumb {
|
|
204
|
+
border-color: var(--nuraly-slider-input-local-error-color);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/* Warning state */
|
|
208
|
+
:host([warning]) .range-slider-value {
|
|
209
|
+
background: var(--nuraly-slider-input-local-warning-color);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
:host([warning]) .range-thumb {
|
|
213
|
+
border-color: var(--nuraly-slider-input-local-warning-color);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* Success state */
|
|
217
|
+
:host([success]) .range-slider-value {
|
|
218
|
+
background: var(--nuraly-slider-input-local-success-color);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
:host([success]) .range-thumb {
|
|
222
|
+
border-color: var(--nuraly-slider-input-local-success-color);
|
|
223
|
+
}
|
|
224
|
+
`;var e=function(r,l,a,i){for(var t,n=arguments.length,e=n<3?l:null===i?i=Object.getOwnPropertyDescriptor(l,a):i,o=r.length-1;o>=0;o--)(t=r[o])&&(e=(n<3?t(e):n>3?t(l,a,e):t(l,a))||e);return n>3&&e&&Object.defineProperty(l,a,e),e},o=function(r,l,a,i){return new(a||(a=Promise))(function(t,n){function e(r){try{u(i.next(r))}catch(r){n(r)}}function o(r){try{u(i.throw(r))}catch(r){n(r)}}function u(r){var l;r.done?t(r.value):(l=r.value,l instanceof a?l:new a(function(r){r(l)})).then(e,o)}u((i=i.apply(r,l||[])).next())})};class u extends l{constructor(){super(...arguments),this.disabled=!1,this.max=100,this.min=0,this.step=1,this.value=0,this._actualMin=0,this._actualMax=0,this._dispatchChangeEvents=function(r,l=100){let a;return function(...i){clearTimeout(a),a=setTimeout(()=>r.apply(this,i),l)}}(()=>{this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("changed",{detail:{value:Number(this.value)}}))},50)}firstUpdated(){return o(this,void 0,void 0,function*(){if(yield this.updateComplete,this._input=this.shadowRoot.querySelector("input"),this._slider=this.shadowRoot.querySelector(".range-slider"),this._thumb=this.shadowRoot.querySelector(".range-thumb"),this._actualMin=this.min,this._actualMax=this.max,this.step){const r=this.min%this.step,l=this.max%this.step;0!==r&&(this.min=this.min-r),0!==l&&(this.max=this.max+this.step-l)}requestAnimationFrame(()=>{this._updateSliderVisuals()})})}render(){return a`
|
|
225
|
+
<div class="slider-wrapper">
|
|
226
|
+
<input
|
|
227
|
+
max=${this.max}
|
|
228
|
+
min=${this.min}
|
|
229
|
+
step=${this.step}
|
|
230
|
+
type="range"
|
|
231
|
+
value=${this.value}
|
|
232
|
+
?disabled=${this.disabled}
|
|
233
|
+
@input=${this._inputHandler}
|
|
234
|
+
@change=${this._changeHandler}
|
|
235
|
+
/>
|
|
236
|
+
<div class="range-container">
|
|
237
|
+
<div class="range-slider"></div>
|
|
238
|
+
<div class="range-slider-value"></div>
|
|
239
|
+
<div class="range-thumb"></div>
|
|
240
|
+
</div>
|
|
241
|
+
</div>`}updated(r){(r.has("value")||r.has("min")||r.has("max"))&&requestAnimationFrame(()=>{this._updateSliderVisuals()})}_inputHandler(r){r.stopPropagation();const l=r.target,a=Number(l.value);this.value=a>this._actualMax?this._actualMax:a<this._actualMin?this._actualMin:a,this._updateSliderVisuals(),this.requestUpdate()}_changeHandler(r){r.stopPropagation();const l=r.target,a=Number(l.value);this.value=a>this._actualMax?this._actualMax:a<this._actualMin?this._actualMin:a,this._dispatchChangeEvents(),this.requestUpdate()}_updateSliderVisuals(){if(!this._thumb||!this._slider)return;const r=this.min<this._actualMin?this._actualMin:this.min,l=(this.max>this._actualMax?this._actualMax:this.max)-r;if(0===l)return;const a=Math.max(0,Math.min(1,(this.value-r)/l)),i=this._thumb.offsetWidth||20,t=100*a+"%",n=(this._slider.offsetWidth||200)-i,e=`${Math.max(0,Math.min(n,n*a))}px`;this.style.setProperty("--nr-slider-value-width",t),this.style.setProperty("--nr-slider-thumb-offset",e)}_updateSlider(){this._updateSliderVisuals(),this._dispatchChangeEvents(),this.requestUpdate()}}u.styles=n,e([i({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),e([i({type:Number})],u.prototype,"max",void 0),e([i({type:Number})],u.prototype,"min",void 0),e([i({type:Number})],u.prototype,"step",void 0),e([i({type:Number})],u.prototype,"value",void 0),e([t()],u.prototype,"_actualMin",void 0),e([t()],u.prototype,"_actualMax",void 0),e([t()],u.prototype,"_input",void 0),e([t()],u.prototype,"_slider",void 0),e([t()],u.prototype,"_thumb",void 0),customElements.define("nr-slider-input",u);export{u as SliderInput};
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/slider-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './slider-input.component.js';\nexport * from './slider-input.types.js';"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/slider-input/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;IAC3C,OAAO,EAAE,iBAAiB;IAC1B,YAAY,EAAE,KAAM,SAAQ,WAAW;KAAG;IAC1C,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\n\nexport const HySliderInput = createComponent({\n tagName: 'nr-slider-input',\n elementClass: class extends HTMLElement {},\n react: React,\n events: {\n change: 'change',\n input: 'input',\n },\n});\n"]}
|
|
@@ -12,7 +12,7 @@ export declare class SliderInput extends LitElement {
|
|
|
12
12
|
_thumb: HTMLInputElement | null;
|
|
13
13
|
static styles: import("lit").CSSResult;
|
|
14
14
|
firstUpdated(): Promise<void>;
|
|
15
|
-
render(): import("lit").TemplateResult<1>;
|
|
15
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
16
16
|
updated(changedProps: PropertyValueMap<any>): void;
|
|
17
17
|
/**
|
|
18
18
|
* Handles input events for immediate visual feedback during dragging.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider-input.component.js","sourceRoot":"","sources":["../../../src/components/slider-input/slider-input.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, PropertyValueMap } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './slider-input.style.js';\nimport { debounce } from './utils/index.js';\n\nexport class SliderInput extends LitElement {\n\t\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false;\n\n\t@property({ type: Number })\n\tmax = 100;\n\n\t@property({ type: Number })\n\tmin = 0;\n\n\t@property({ type: Number })\n\tstep = 1;\n\n\t@property({ type: Number })\n\tvalue = 0;\n\n\t@state()\n\t_actualMin = 0;\n\n\t@state()\n\t_actualMax = 0;\n\n\n\t@state()\n\t_input!: HTMLInputElement | null;\n\t@state()\n\t_slider! : HTMLInputElement | null;\n\t@state()\n\t_thumb! : HTMLInputElement | null;\n\n\tstatic override styles = styles;\n\n\n\toverride async firstUpdated() {\n\t\tawait this.updateComplete;\n\t\t\n\t\tthis._input = this.shadowRoot!.querySelector('input');\n\t\tthis._slider = this.shadowRoot!.querySelector('.range-slider');\n\t\tthis._thumb = this.shadowRoot!.querySelector('.range-thumb');\n\t\tthis._actualMin = this.min;\n\t\tthis._actualMax = this.max;\n\n\t\tif (this.step) {\n\t\t\tconst minRemainder = this.min % this.step;\n\t\t\tconst maxRemainder = this.max % this.step;\n\t\t\tif (minRemainder !== 0) {\n\t\t\t\tthis.min = this.min - minRemainder;\n\t\t\t}\n\t\t\tif (maxRemainder !== 0) {\n\t\t\t\tthis.max = this.max + this.step - maxRemainder;\n\t\t\t}\n\t\t}\n\n\t\t// Initial visual update\n\t\trequestAnimationFrame(() => {\n\t\t\tthis._updateSliderVisuals();\n\t\t});\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t <div class=\"slider-wrapper\">\n\t <input\n\t max=${this.max}\n\t min=${this.min}\n\t step=${this.step}\n\t type=\"range\"\n\t value=${this.value}\n\t ?disabled=${this.disabled}\n\t @input=${this._inputHandler}\n\t @change=${this._changeHandler}\n\t />\n <div class=\"range-container\">\n\t <div class=\"range-slider\"></div>\n\t <div class=\"range-slider-value\"></div>\n\t <div class=\"range-thumb\"></div>\n\t </div>\n\t </div>`;\n\t}\n\n\n\toverride updated(changedProps: PropertyValueMap<any>) {\n\t\tif (changedProps.has('value') || changedProps.has('min') || changedProps.has('max')) {\n\t\t\t// Use requestAnimationFrame to ensure DOM is updated before calculating positions\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tthis._updateSliderVisuals();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Handles input events for immediate visual feedback during dragging.\n\t */\n\t_inputHandler(event: Event) {\n\t\tevent.stopPropagation();\n\t\tconst input = event.target as HTMLInputElement;\n\t\tconst newValue = Number(input.value);\n\t\t\n\t\t// Clamp value to actual min/max bounds\n\t\tthis.value = newValue > this._actualMax\n\t\t\t? this._actualMax\n\t\t\t: newValue < this._actualMin\n\t\t\t\t? this._actualMin\n\t\t\t\t: newValue;\n\t\t\n\t\t// Update visuals immediately for smooth dragging\n\t\tthis._updateSliderVisuals();\n\t\tthis.requestUpdate();\n\t}\n\n\t/**\n\t * Handles change events when dragging is complete.\n\t */\n\t_changeHandler(event: Event) {\n\t\tevent.stopPropagation();\n\t\tconst input = event.target as HTMLInputElement;\n\t\tconst newValue = Number(input.value);\n\t\t\n\t\t// Clamp value to actual min/max bounds\n\t\tthis.value = newValue > this._actualMax\n\t\t\t? this._actualMax\n\t\t\t: newValue < this._actualMin\n\t\t\t\t? this._actualMin\n\t\t\t\t: newValue;\n\t\t\n\t\t// Dispatch events when dragging is complete\n\t\tthis._dispatchChangeEvents();\n\t\tthis.requestUpdate();\n\t}\n\n\t/**\n\t * Updates the slider's visual appearance immediately (no debounce for smooth dragging).\n\t */\n\t_updateSliderVisuals() {\n\t\tif (!this._thumb || !this._slider) return;\n\t\t\n\t\tconst min = this.min < this._actualMin ? this._actualMin : this.min;\n\t\tconst max = this.max > this._actualMax ? this._actualMax : this.max;\n\t\tconst range = max - min;\n\t\t\n\t\tif (range === 0) return; // Avoid division by zero\n\t\t\n\t\tconst percentage = Math.max(0, Math.min(1, (this.value - min) / range));\n\t\tconst thumbWidth = this._thumb.offsetWidth || 20; // Fallback if not measured yet\n\t\tconst sliderWidth = this._slider.offsetWidth || 200; // Fallback if not measured yet\n\t\t\n\t\tconst sliderValueWidth = `${percentage * 100}%`;\n\t\t// Calculate thumb position so it stays within track bounds\n\t\tconst maxThumbOffset = sliderWidth - thumbWidth;\n\t\tconst thumbOffset = `${Math.max(0, Math.min(maxThumbOffset, maxThumbOffset * percentage))}px`;\n\n\t\tthis.style.setProperty('--nr-slider-value-width', sliderValueWidth);\n\t\tthis.style.setProperty('--nr-slider-thumb-offset', thumbOffset);\n\t}\n\n\t/**\n\t * Dispatches change events (debounced to avoid excessive event firing).\n\t */\n\t_dispatchChangeEvents = debounce(() => {\n\t\t// Dispatch the change event for range-slider. (For event handlers.)\n\t\tthis.dispatchEvent(new Event('change'));\n\t\tthis.dispatchEvent(new CustomEvent('changed' , {\n\t\t\tdetail: {\n\t\t\t\tvalue: Number(this.value)\n\t\t\t}\n\t\t}));\n\t}, 50); // Reduced debounce time for more responsive events\n\n\t/**\n\t * Updates the slider's value width and thumb position (UI) and dispatches events.\n\t */\n\t_updateSlider() {\n\t\tthis._updateSliderVisuals();\n\t\tthis._dispatchChangeEvents();\n\t\tthis.requestUpdate();\n\t}\n}\ncustomElements.define('nr-slider-input', SliderInput);\n"]}
|
|
1
|
+
{"version":3,"file":"slider-input.component.js","sourceRoot":"","sources":["../../../../src/components/slider-input/slider-input.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, PropertyValueMap } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './slider-input.style.js';\nimport { debounce } from './utils/index.js';\n\nexport class SliderInput extends LitElement {\n\t\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false;\n\n\t@property({ type: Number })\n\tmax = 100;\n\n\t@property({ type: Number })\n\tmin = 0;\n\n\t@property({ type: Number })\n\tstep = 1;\n\n\t@property({ type: Number })\n\tvalue = 0;\n\n\t@state()\n\t_actualMin = 0;\n\n\t@state()\n\t_actualMax = 0;\n\n\n\t@state()\n\t_input!: HTMLInputElement | null;\n\t@state()\n\t_slider! : HTMLInputElement | null;\n\t@state()\n\t_thumb! : HTMLInputElement | null;\n\n\tstatic override styles = styles;\n\n\n\toverride async firstUpdated() {\n\t\tawait this.updateComplete;\n\t\t\n\t\tthis._input = this.shadowRoot!.querySelector('input');\n\t\tthis._slider = this.shadowRoot!.querySelector('.range-slider');\n\t\tthis._thumb = this.shadowRoot!.querySelector('.range-thumb');\n\t\tthis._actualMin = this.min;\n\t\tthis._actualMax = this.max;\n\n\t\tif (this.step) {\n\t\t\tconst minRemainder = this.min % this.step;\n\t\t\tconst maxRemainder = this.max % this.step;\n\t\t\tif (minRemainder !== 0) {\n\t\t\t\tthis.min = this.min - minRemainder;\n\t\t\t}\n\t\t\tif (maxRemainder !== 0) {\n\t\t\t\tthis.max = this.max + this.step - maxRemainder;\n\t\t\t}\n\t\t}\n\n\t\t// Initial visual update\n\t\trequestAnimationFrame(() => {\n\t\t\tthis._updateSliderVisuals();\n\t\t});\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t <div class=\"slider-wrapper\">\n\t <input\n\t max=${this.max}\n\t min=${this.min}\n\t step=${this.step}\n\t type=\"range\"\n\t value=${this.value}\n\t ?disabled=${this.disabled}\n\t @input=${this._inputHandler}\n\t @change=${this._changeHandler}\n\t />\n <div class=\"range-container\">\n\t <div class=\"range-slider\"></div>\n\t <div class=\"range-slider-value\"></div>\n\t <div class=\"range-thumb\"></div>\n\t </div>\n\t </div>`;\n\t}\n\n\n\toverride updated(changedProps: PropertyValueMap<any>) {\n\t\tif (changedProps.has('value') || changedProps.has('min') || changedProps.has('max')) {\n\t\t\t// Use requestAnimationFrame to ensure DOM is updated before calculating positions\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tthis._updateSliderVisuals();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Handles input events for immediate visual feedback during dragging.\n\t */\n\t_inputHandler(event: Event) {\n\t\tevent.stopPropagation();\n\t\tconst input = event.target as HTMLInputElement;\n\t\tconst newValue = Number(input.value);\n\t\t\n\t\t// Clamp value to actual min/max bounds\n\t\tthis.value = newValue > this._actualMax\n\t\t\t? this._actualMax\n\t\t\t: newValue < this._actualMin\n\t\t\t\t? this._actualMin\n\t\t\t\t: newValue;\n\t\t\n\t\t// Update visuals immediately for smooth dragging\n\t\tthis._updateSliderVisuals();\n\t\tthis.requestUpdate();\n\t}\n\n\t/**\n\t * Handles change events when dragging is complete.\n\t */\n\t_changeHandler(event: Event) {\n\t\tevent.stopPropagation();\n\t\tconst input = event.target as HTMLInputElement;\n\t\tconst newValue = Number(input.value);\n\t\t\n\t\t// Clamp value to actual min/max bounds\n\t\tthis.value = newValue > this._actualMax\n\t\t\t? this._actualMax\n\t\t\t: newValue < this._actualMin\n\t\t\t\t? this._actualMin\n\t\t\t\t: newValue;\n\t\t\n\t\t// Dispatch events when dragging is complete\n\t\tthis._dispatchChangeEvents();\n\t\tthis.requestUpdate();\n\t}\n\n\t/**\n\t * Updates the slider's visual appearance immediately (no debounce for smooth dragging).\n\t */\n\t_updateSliderVisuals() {\n\t\tif (!this._thumb || !this._slider) return;\n\t\t\n\t\tconst min = this.min < this._actualMin ? this._actualMin : this.min;\n\t\tconst max = this.max > this._actualMax ? this._actualMax : this.max;\n\t\tconst range = max - min;\n\t\t\n\t\tif (range === 0) return; // Avoid division by zero\n\t\t\n\t\tconst percentage = Math.max(0, Math.min(1, (this.value - min) / range));\n\t\tconst thumbWidth = this._thumb.offsetWidth || 20; // Fallback if not measured yet\n\t\tconst sliderWidth = this._slider.offsetWidth || 200; // Fallback if not measured yet\n\t\t\n\t\tconst sliderValueWidth = `${percentage * 100}%`;\n\t\t// Calculate thumb position so it stays within track bounds\n\t\tconst maxThumbOffset = sliderWidth - thumbWidth;\n\t\tconst thumbOffset = `${Math.max(0, Math.min(maxThumbOffset, maxThumbOffset * percentage))}px`;\n\n\t\tthis.style.setProperty('--nr-slider-value-width', sliderValueWidth);\n\t\tthis.style.setProperty('--nr-slider-thumb-offset', thumbOffset);\n\t}\n\n\t/**\n\t * Dispatches change events (debounced to avoid excessive event firing).\n\t */\n\t_dispatchChangeEvents = debounce(() => {\n\t\t// Dispatch the change event for range-slider. (For event handlers.)\n\t\tthis.dispatchEvent(new Event('change'));\n\t\tthis.dispatchEvent(new CustomEvent('changed' , {\n\t\t\tdetail: {\n\t\t\t\tvalue: Number(this.value)\n\t\t\t}\n\t\t}));\n\t}, 50); // Reduced debounce time for more responsive events\n\n\t/**\n\t * Updates the slider's value width and thumb position (UI) and dispatches events.\n\t */\n\t_updateSlider() {\n\t\tthis._updateSliderVisuals();\n\t\tthis._dispatchChangeEvents();\n\t\tthis.requestUpdate();\n\t}\n}\ncustomElements.define('nr-slider-input', SliderInput);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider-input.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"slider-input.style.js","sourceRoot":"","sources":["../../../../src/components/slider-input/slider-input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,eAAe,GAAG,CAAA;IACd,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKjB,CAAC","sourcesContent":["import { css } from \"lit\";\nimport { styleVariables } from './slider-input.style.variables.js';\n\nexport default css`\n ${styleVariables}\n\n :host {\n display: inline-block;\n width: var(--nuraly-slider-input-local-width);\n font-family: var(--nuraly-slider-input-local-font-family);\n font-size: var(--nuraly-slider-input-local-font-size);\n font-weight: var(--nuraly-slider-input-local-font-weight);\n }\n\n /* Host attribute selectors for configuration */\n :host([disabled]) {\n opacity: 0.6;\n pointer-events: none;\n }\n\n .slider-wrapper {\n position: relative;\n padding: calc(var(--nuraly-slider-input-local-thumb-diameter) / 2) 0;\n }\n\n .range-container {\n position: relative;\n width: 100%;\n }\n\n .range-slider,\n .range-slider-value {\n border-radius: var(--nuraly-slider-input-local-border-radius);\n height: var(--nuraly-slider-input-local-track-height);\n position: absolute;\n top: calc((var(--nuraly-slider-input-local-thumb-diameter) - var(--nuraly-slider-input-local-track-height)) / 2);\n transition: all var(--nuraly-slider-input-local-transition-duration) var(--nuraly-slider-input-local-transition-timing);\n }\n\n .range-slider {\n background: var(--nuraly-slider-input-local-track-color);\n width: 100%;\n border: var(--nuraly-slider-input-local-border-width) solid var(--nuraly-slider-input-local-border-color);\n }\n\n .range-slider-value {\n background: var(--nuraly-slider-input-local-track-filled-color);\n width: var(--nr-slider-value-width, 0%);\n z-index: calc(var(--nuraly-slider-input-local-z-index) + 1);\n }\n\n .range-thumb {\n background: var(--nuraly-slider-input-local-thumb-color);\n border: 2px solid var(--nuraly-slider-input-local-thumb-border-color);\n border-radius: var(--nuraly-slider-input-local-thumb-border-radius);\n height: var(--nuraly-slider-input-local-thumb-diameter);\n width: var(--nuraly-slider-input-local-thumb-diameter);\n position: absolute;\n top: calc((var(--nuraly-slider-input-local-track-height) - var(--nuraly-slider-input-local-thumb-diameter)) / 2);\n left: var(--nr-slider-thumb-offset, 0px);\n cursor: pointer;\n z-index: calc(var(--nuraly-slider-input-local-z-index) + 2);\n box-shadow: var(--nuraly-slider-input-local-thumb-shadow);\n transition: all var(--nuraly-slider-input-local-transition-duration) var(--nuraly-slider-input-local-transition-timing);\n }\n\n .range-thumb:hover {\n background: var(--nuraly-slider-input-local-thumb-hover-color);\n box-shadow: var(--nuraly-slider-input-local-focus-shadow);\n }\n\n .range-thumb:active {\n background: var(--nuraly-slider-input-local-thumb-active-color);\n box-shadow: var(--nuraly-slider-input-local-focus-shadow);\n }\n\n input {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n margin: 0;\n opacity: 0;\n width: 100%;\n cursor: pointer;\n z-index: calc(var(--nuraly-slider-input-local-z-index) + 3);\n appearance: none;\n background: transparent;\n pointer-events: auto;\n }\n\n input::-webkit-slider-thumb {\n appearance: none;\n width: var(--nuraly-slider-input-local-thumb-diameter);\n height: var(--nuraly-slider-input-local-thumb-diameter);\n background: transparent;\n cursor: pointer;\n }\n\n input::-moz-range-thumb {\n appearance: none;\n width: var(--nuraly-slider-input-local-thumb-diameter);\n height: var(--nuraly-slider-input-local-thumb-diameter);\n background: transparent;\n border: none;\n cursor: pointer;\n }\n\n input:focus-visible + .range-container .range-thumb {\n box-shadow: var(--nuraly-slider-input-local-focus-shadow);\n }\n\n /* Disabled state styling */\n :host([disabled]) .range-slider {\n background: var(--nuraly-slider-input-local-disabled-track-color);\n border-color: var(--nuraly-slider-input-local-disabled-border-color);\n }\n\n :host([disabled]) .range-slider-value {\n background: var(--nuraly-slider-input-local-disabled-color);\n }\n\n :host([disabled]) .range-thumb {\n background: var(--nuraly-slider-input-local-disabled-thumb-color);\n border-color: var(--nuraly-slider-input-local-disabled-border-color);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n :host([disabled]) input {\n cursor: not-allowed;\n }\n\n /* Size variants */\n :host([size=\"small\"]) {\n --nuraly-slider-input-local-track-height: var(--nuraly-slider-input-local-small-height);\n --nuraly-slider-input-local-thumb-diameter: var(--nuraly-slider-input-local-small-thumb-diameter);\n }\n\n :host([size=\"large\"]) {\n --nuraly-slider-input-local-track-height: var(--nuraly-slider-input-local-large-height);\n --nuraly-slider-input-local-thumb-diameter: var(--nuraly-slider-input-local-large-thumb-diameter);\n }\n\n /* Error state */\n :host([error]) .range-slider-value {\n background: var(--nuraly-slider-input-local-error-color);\n }\n\n :host([error]) .range-thumb {\n border-color: var(--nuraly-slider-input-local-error-color);\n }\n\n /* Warning state */\n :host([warning]) .range-slider-value {\n background: var(--nuraly-slider-input-local-warning-color);\n }\n\n :host([warning]) .range-thumb {\n border-color: var(--nuraly-slider-input-local-warning-color);\n }\n\n /* Success state */\n :host([success]) .range-slider-value {\n background: var(--nuraly-slider-input-local-success-color);\n }\n\n :host([success]) .range-thumb {\n border-color: var(--nuraly-slider-input-local-success-color);\n }\n`;"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider-input.style.variables.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"slider-input.style.variables.js","sourceRoot":"","sources":["../../../../src/components/slider-input/slider-input.style.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styleVariables = css`\n :host {\n /* Component dimensions */\n --nuraly-slider-input-local-width: var(--nuraly-size-slider-input-width, 100%);\n --nuraly-slider-input-local-track-height: var(--nuraly-size-slider-input-track-height, 8px);\n --nuraly-slider-input-local-thumb-diameter: var(--nuraly-size-slider-input-thumb-diameter, 20px);\n --nuraly-slider-input-local-border-width: var(--nuraly-border-slider-input-width, 1px);\n\n /* Size variants */\n --nuraly-slider-input-local-small-height: var(--nuraly-size-slider-input-small-height, 6px);\n --nuraly-slider-input-local-small-thumb-diameter: var(--nuraly-size-slider-input-small-thumb-diameter, 16px);\n --nuraly-slider-input-local-large-height: var(--nuraly-size-slider-input-large-height, 10px);\n --nuraly-slider-input-local-large-thumb-diameter: var(--nuraly-size-slider-input-large-thumb-diameter, 24px);\n\n /* Typography */\n --nuraly-slider-input-local-font-family: var(--nuraly-typograpnr-slider-input-font-family, var(--nuraly-font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif));\n --nuraly-slider-input-local-font-size: var(--nuraly-typograpnr-slider-input-font-size, var(--nuraly-font-size-base, 14px));\n --nuraly-slider-input-local-font-weight: var(--nuraly-typograpnr-slider-input-font-weight, var(--nuraly-font-weight-normal, 400));\n\n /* Border radius */\n --nuraly-slider-input-local-border-radius: var(--nuraly-border-slider-input-radius, var(--nuraly-border-radius-base, 6px));\n --nuraly-slider-input-local-thumb-border-radius: var(--nuraly-border-slider-input-thumb-radius, var(--nuraly-border-radius-round, 50%));\n\n /* Colors - Track */\n --nuraly-slider-input-local-track-color: var(--nuraly-color-slider-input-track, var(--nuraly-color-neutral-200, #e5e7eb));\n --nuraly-slider-input-local-track-filled-color: var(--nuraly-color-slider-input-track-filled, var(--nuraly-color-primary-500, #3b82f6));\n --nuraly-slider-input-local-border-color: var(--nuraly-color-slider-input-border, var(--nuraly-color-neutral-300, #d1d5db));\n\n /* Colors - Thumb */\n --nuraly-slider-input-local-thumb-color: var(--nuraly-color-slider-input-thumb, var(--nuraly-color-white, #ffffff));\n --nuraly-slider-input-local-thumb-border-color: var(--nuraly-color-slider-input-thumb-border, var(--nuraly-color-primary-500, #3b82f6));\n --nuraly-slider-input-local-thumb-hover-color: var(--nuraly-color-slider-input-thumb-hover, var(--nuraly-color-primary-50, #eff6ff));\n --nuraly-slider-input-local-thumb-active-color: var(--nuraly-color-slider-input-thumb-active, var(--nuraly-color-primary-100, #dbeafe));\n\n /* Colors - Disabled states */\n --nuraly-slider-input-local-disabled-track-color: var(--nuraly-color-slider-input-disabled-track, var(--nuraly-color-neutral-100, #f5f5f5));\n --nuraly-slider-input-local-disabled-color: var(--nuraly-color-slider-input-disabled, var(--nuraly-color-neutral-300, #d1d5db));\n --nuraly-slider-input-local-disabled-thumb-color: var(--nuraly-color-slider-input-disabled-thumb, var(--nuraly-color-neutral-200, #e5e7eb));\n --nuraly-slider-input-local-disabled-border-color: var(--nuraly-color-slider-input-disabled-border, var(--nuraly-color-neutral-200, #e5e7eb));\n\n /* Colors - Status states */\n --nuraly-slider-input-local-error-color: var(--nuraly-color-slider-input-error, var(--nuraly-color-error-500, #ef4444));\n --nuraly-slider-input-local-warning-color: var(--nuraly-color-slider-input-warning, var(--nuraly-color-warning-500, #f59e0b));\n --nuraly-slider-input-local-success-color: var(--nuraly-color-slider-input-success, var(--nuraly-color-success-500, #10b981));\n\n /* Shadows */\n --nuraly-slider-input-local-thumb-shadow: var(--nuraly-shadow-slider-input-thumb, var(--nuraly-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)));\n --nuraly-slider-input-local-focus-shadow: var(--nuraly-shadow-slider-input-focus, var(--nuraly-shadow-focus, 0 0 0 3px rgba(59, 130, 246, 0.15)));\n\n /* Elevation */\n --nuraly-slider-input-local-z-index: var(--nuraly-elevation-slider-input-z-index, var(--nuraly-z-index-base, 1));\n\n /* Transitions */\n --nuraly-slider-input-local-transition-duration: var(--nuraly-transition-slider-input-duration, var(--nuraly-transition-duration-base, 150ms));\n --nuraly-slider-input-local-transition-timing: var(--nuraly-transition-slider-input-timing, var(--nuraly-transition-timing-ease, ease));\n }\n`;"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider-input.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"slider-input.types.js","sourceRoot":"","sources":["../../../../src/components/slider-input/slider-input.types.ts"],"names":[],"mappings":"AAAA;;;GAGG","sourcesContent":["/**\n * Slider Input Types\n * Type definitions for the slider input component\n */\n\nexport interface SliderInputChangeEvent extends CustomEvent {\n detail: {\n value: number;\n min: number;\n max: number;\n };\n}\n\nexport interface SliderInputOptions {\n min?: number;\n max?: number;\n step?: number;\n value?: number;\n disabled?: boolean;\n}\n\nexport type SliderInputSize = 'small' | 'medium' | 'large';\n\nexport type SliderInputVariant = 'default' | 'primary' | 'success' | 'warning' | 'error';"]}
|