@nuralyui/slider-input 0.0.6 → 0.0.7

package/bundle.js

@@ -1 +1,241 @@
-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};
+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 {
+    /* Component dimensions */
+    --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);
+
+    /* Size variants */
+    --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);
+
+    /* Typography */
+    --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));
+
+    /* Border radius */
+    --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%));
+
+    /* Colors - Track */
+    --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));
+
+    /* Colors - Thumb */
+    --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));
+
+    /* Colors - Disabled states */
+    --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));
+
+    /* Colors - Status states */
+    --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));
+
+    /* Shadows */
+    --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)));
+
+    /* Elevation */
+    --nuraly-slider-input-local-z-index: var(--nuraly-elevation-slider-input-z-index, var(--nuraly-z-index-base, 1));
+
+    /* Transitions */
+    --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 attribute selectors for configuration */
+  :host([disabled]) {
+    opacity: 0.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, 0px);
+    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: transparent;
+    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: transparent;
+    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: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  input:focus-visible + .range-container .range-thumb {
+    box-shadow: var(--nuraly-slider-input-local-focus-shadow);
+  }
+
+  /* Disabled state styling */
+  :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;
+  }
+
+  /* Size variants */
+  :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);
+  }
+
+  /* Error state */
+  :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);
+  }
+
+  /* Warning state */
+  :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);
+  }
+
+  /* Success state */
+  :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};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/slider-input",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "",
     "main": "index.js",
     "type": "module",