@nuralyui/slider-input 0.0.7 → 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 +2 -2
- 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
|
@@ -221,7 +221,7 @@ import{css as r,LitElement as l,html as a}from"lit";import{property as i,state a
|
|
|
221
221
|
:host([success]) .range-thumb {
|
|
222
222
|
border-color: var(--nuraly-slider-input-local-success-color);
|
|
223
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))(
|
|
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
225
|
<div class="slider-wrapper">
|
|
226
226
|
<input
|
|
227
227
|
max=${this.max}
|
|
@@ -238,4 +238,4 @@ import{css as r,LitElement as l,html as a}from"lit";import{property as i,state a
|
|
|
238
238
|
<div class="range-slider-value"></div>
|
|
239
239
|
<div class="range-thumb"></div>
|
|
240
240
|
</div>
|
|
241
|
-
</div>`}updated(r){(r.has("value")||r.has("min")||r.has("max"))&&requestAnimationFrame((
|
|
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';"]}
|