@nuralyui/slider-input 0.0.2 → 0.0.4

package/demo/slider-input-demo.js

@@ -1,219 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let SliderInputDemi = class SliderInputDemi extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._sliderChangeViaTextboxValue = 15;
-        this._sliderDisabled = false;
-        this._sliderMinMaxNotMultipleOfStepValue = 45678;
-        this._sliderWithChangeHandlerValue = 0;
-        this.min = 0;
-        this.max = 0;
-    }
-    /**
-     * Sets the slider's disabled prop.
-     */
-    _toggleDisabled() {
-        this._sliderDisabled = !this._sliderDisabled;
-    }
-    /**
-     * Updates the slider prop's value.
-     * @param {EventObject} e The event object.
-     */
-    _updateValue(e) {
-        const [element] = e.composedPath();
-        const { format, prop } = element.dataset;
-        const propToUpdate = `_${(prop)}Value`;
-        const value = format
-            ? (element.value, JSON.parse(format))
-            : element.value;
-        this[propToUpdate] = value;
-    }
-    render() {
-        return html `
-          <fieldset>
-        <legend>Default</legend>
-        <hy-slider-input
-          id="slider-default"
-          .min=${0}
-          .max=${100}
-          .value=${20}
-        ></hy-slider-input>
-      </fieldset>
-      <fieldset>
-        <legend>With Change Handler</legend>
-        <hy-slider-input
-          id="slider-with-change-handler"
-          data-prop="slider-with-change-handler"
-          data-format=${JSON.stringify({
-            options: {
-                style: 'currency',
-                currency: 'USD',
-            },
-        })}
-          .min=${0}
-          .max=${1000000}
-          .step=${100000}
-          .value=${400000}
-          @change=${this._updateValue}
-        ></hy-slider-input>
-        <p class="slider-value">${this._sliderWithChangeHandlerValue}</p>
-      </fieldset>
-      <fieldset>
-        <legend>Custom Styles</legend>
-        <hy-slider-input
-          id="slider-custom-styles"
-          .min=${0}
-          .max=${100}
-          .value=${50}
-        ></hy-slider-input>
-      </fieldset>
-      <fieldset id="toggle-disabled">
-        <legend>Toggle Disabled Status</legend>
-        <label for="chk-toggle-disabled">
-          <input
-            id="chk-toggle-disabled"
-            type="checkbox"
-            .checked=${this._sliderDisabled}
-            @input=${this._toggleDisabled}
-          />
-          Disable Slider
-        </label>
-        <hy-slider-input
-          id="slider-toggle-disabled"
-          .disabled=${this._sliderDisabled}
-          .min=${0}
-          .max=${100}
-          .value=${75}
-        ></hy-slider-input>
-      </fieldset>
-      <fieldset id="change-via-textbox">
-        <legend>Change via Textbox</legend>
-        <input
-          id="txt-change-via-textbox"
-          data-prop="slider-change-via-textbox"
-          max="100"
-          min="0"
-          type="number"
-          .value=${this._sliderChangeViaTextboxValue}
-          @input=${this._updateValue}
-        />
-        <hy-slider-input
-          id="slider-change-via-textbox"
-          data-prop="slider-change-via-textbox"
-          .min=${0}
-          .max=${100}
-          .value=${this._sliderChangeViaTextboxValue}
-          @change=${this._updateValue}
-        ></hy-slider-input>
-      </fieldset>
-      <fieldset id="not-multiple-of-step">
-        <legend>Not Multiple of Step</legend>
-        <p>${(this._sliderMinMaxNotMultipleOfStepValue)}</p>
-        <hy-slider-input
-          id="slider-min-max-not-multiple-of-step"
-          data-prop="slider-min-max-not-multiple-of-step"
-          .min=${this.min}
-          .max=${this.max}
-          .step=${10000}
-          .value=${this._sliderMinMaxNotMultipleOfStepValue}
-          @change=${this._updateValue}
-        ></hy-slider-input>
-        <div class="slider-limits">
-          <span>${(this.min)}</span>
-          <span>${(this.max)}</span>
-        </div>
-      </fieldset>;`;
-    }
-};
-SliderInputDemi.styles = [
-    css `
-           :host {
-        --hy-slider-width: 129px;
-
-        font: normal 14px/1.4 Helvetica, Arial, sans-serif;
-      }
-
-      fieldset {
-        border: 0;
-        display: flex;
-        flex-direction: column;
-        margin: 10px 0;
-        padding: 10px;
-      }
-
-      legend {
-        font-size: 20px;
-        font-weight: 600;
-        padding: 0;
-      }
-
-      range-slider {
-        width: var(--hy-slider-width);
-      }
-
-      #slider-custom-styles {
-        --hy-slider-height: 15px;
-        --hy-slider-background: orange;
-        --hy-slider-value-color: green;
-        --hy-slider-thumb-color: pink;
-        --hy-slider-thumb-diameter: 30px;
-      }
-
-      label {
-        align-items: center;
-        display: flex;
-        margin: 0 0 10px;
-      }
-
-      p {
-        margin: 0;
-      }
-
-      #chk-toggle-disabled {
-        margin: 0 10px 0 0;
-      }
-
-      #txt-change-via-textbox,
-      #slider-change-via-textbox,
-      #slider-toggle-disabled {
-        margin: 0 0 20px;
-        width: var(--hy-slider-width);
-      }
-
-      .slider-limits {
-        display: flex;
-        justify-content: space-between;
-        width: var(--hy-slider-width);
-      }
-        `
-];
-__decorate([
-    property({ type: Number })
-], SliderInputDemi.prototype, "_sliderChangeViaTextboxValue", void 0);
-__decorate([
-    property({ type: Boolean })
-], SliderInputDemi.prototype, "_sliderDisabled", void 0);
-__decorate([
-    property({ type: Number })
-], SliderInputDemi.prototype, "_sliderMinMaxNotMultipleOfStepValue", void 0);
-__decorate([
-    property({ type: Number })
-], SliderInputDemi.prototype, "_sliderWithChangeHandlerValue", void 0);
-__decorate([
-    property({ type: Number })
-], SliderInputDemi.prototype, "min", void 0);
-__decorate([
-    property({ type: Number })
-], SliderInputDemi.prototype, "max", void 0);
-SliderInputDemi = __decorate([
-    customElement('hy-slider-input-demo')
-], SliderInputDemi);
-export { SliderInputDemi };
-//# sourceMappingURL=slider-input-demo.js.map

package/demo/slider-input-demo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"slider-input-demo.js","sourceRoot":"","sources":["../../../../src/components/slider-input/demo/slider-input-demo.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n@customElement('hy-slider-input-demo')\nexport class SliderInputDemi extends LitElement {\n    static override styles = [\n        css`\n           :host {\n        --hy-slider-width: 129px;\n\n        font: normal 14px/1.4 Helvetica, Arial, sans-serif;\n      }\n\n      fieldset {\n        border: 0;\n        display: flex;\n        flex-direction: column;\n        margin: 10px 0;\n        padding: 10px;\n      }\n\n      legend {\n        font-size: 20px;\n        font-weight: 600;\n        padding: 0;\n      }\n\n      range-slider {\n        width: var(--hy-slider-width);\n      }\n\n      #slider-custom-styles {\n        --hy-slider-height: 15px;\n        --hy-slider-background: orange;\n        --hy-slider-value-color: green;\n        --hy-slider-thumb-color: pink;\n        --hy-slider-thumb-diameter: 30px;\n      }\n\n      label {\n        align-items: center;\n        display: flex;\n        margin: 0 0 10px;\n      }\n\n      p {\n        margin: 0;\n      }\n\n      #chk-toggle-disabled {\n        margin: 0 10px 0 0;\n      }\n\n      #txt-change-via-textbox,\n      #slider-change-via-textbox,\n      #slider-toggle-disabled {\n        margin: 0 0 20px;\n        width: var(--hy-slider-width);\n      }\n\n      .slider-limits {\n        display: flex;\n        justify-content: space-between;\n        width: var(--hy-slider-width);\n      }\n        `\n    ];\n      @property({ type: Number }) _sliderChangeViaTextboxValue = 15;\n  @property({ type: Boolean }) _sliderDisabled = false;\n  @property({ type: Number }) _sliderMinMaxNotMultipleOfStepValue = 45678;\n  @property({ type: Number }) _sliderWithChangeHandlerValue = 0;\n  @property({ type: Number }) min = 0;\n  @property({ type: Number }) max = 0;\n\n\n  /**\n   * Sets the slider's disabled prop.\n   */\n  _toggleDisabled() {\n    this._sliderDisabled = !this._sliderDisabled;\n  }\n\n  /**\n   * Updates the slider prop's value.\n   * @param {EventObject} e The event object.\n   */\n   _updateValue(e :any) {\n    const [element] = e.composedPath();\n    const { format, prop } = element.dataset;\n    const propToUpdate = `_${(prop)}Value`;\n    const value = format\n      ? (element.value, JSON.parse(format))\n      : element.value;\n\n    (this as any)[propToUpdate] = value;\n  }\n\n    override render() {\n        return html`\n          <fieldset>\n        <legend>Default</legend>\n        <hy-slider-input\n          id=\"slider-default\"\n          .min=${0}\n          .max=${100}\n          .value=${20}\n        ></hy-slider-input>\n      </fieldset>\n      <fieldset>\n        <legend>With Change Handler</legend>\n        <hy-slider-input\n          id=\"slider-with-change-handler\"\n          data-prop=\"slider-with-change-handler\"\n          data-format=${JSON.stringify({\n            options: {\n              style: 'currency',\n              currency: 'USD',\n            },\n          })}\n          .min=${0}\n          .max=${1000000}\n          .step=${100000}\n          .value=${400000}\n          @change=${this._updateValue}\n        ></hy-slider-input>\n        <p class=\"slider-value\">${this._sliderWithChangeHandlerValue}</p>\n      </fieldset>\n      <fieldset>\n        <legend>Custom Styles</legend>\n        <hy-slider-input\n          id=\"slider-custom-styles\"\n          .min=${0}\n          .max=${100}\n          .value=${50}\n        ></hy-slider-input>\n      </fieldset>\n      <fieldset id=\"toggle-disabled\">\n        <legend>Toggle Disabled Status</legend>\n        <label for=\"chk-toggle-disabled\">\n          <input\n            id=\"chk-toggle-disabled\"\n            type=\"checkbox\"\n            .checked=${this._sliderDisabled}\n            @input=${this._toggleDisabled}\n          />\n          Disable Slider\n        </label>\n        <hy-slider-input\n          id=\"slider-toggle-disabled\"\n          .disabled=${this._sliderDisabled}\n          .min=${0}\n          .max=${100}\n          .value=${75}\n        ></hy-slider-input>\n      </fieldset>\n      <fieldset id=\"change-via-textbox\">\n        <legend>Change via Textbox</legend>\n        <input\n          id=\"txt-change-via-textbox\"\n          data-prop=\"slider-change-via-textbox\"\n          max=\"100\"\n          min=\"0\"\n          type=\"number\"\n          .value=${this._sliderChangeViaTextboxValue}\n          @input=${this._updateValue}\n        />\n        <hy-slider-input\n          id=\"slider-change-via-textbox\"\n          data-prop=\"slider-change-via-textbox\"\n          .min=${0}\n          .max=${100}\n          .value=${this._sliderChangeViaTextboxValue}\n          @change=${this._updateValue}\n        ></hy-slider-input>\n      </fieldset>\n      <fieldset id=\"not-multiple-of-step\">\n        <legend>Not Multiple of Step</legend>\n        <p>${(this._sliderMinMaxNotMultipleOfStepValue)}</p>\n        <hy-slider-input\n          id=\"slider-min-max-not-multiple-of-step\"\n          data-prop=\"slider-min-max-not-multiple-of-step\"\n          .min=${this.min}\n          .max=${this.max}\n          .step=${10000}\n          .value=${this._sliderMinMaxNotMultipleOfStepValue}\n          @change=${this._updateValue}\n        ></hy-slider-input>\n        <div class=\"slider-limits\">\n          <span>${(this.min)}</span>\n          <span>${(this.max)}</span>\n        </div>\n      </fieldset>;`\n          }\n}\n"]}

package/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/slider-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAA"}

package/react.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/slider-input/react.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQxB,CAAC"}

package/slider-input.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"slider-input.component.d.ts","sourceRoot":"","sources":["../../../src/components/slider-input/slider-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAKzD,qBAAa,WAAY,SAAQ,UAAU;IAG1C,QAAQ,UAAS;IAGjB,GAAG,SAAO;IAGV,GAAG,SAAK;IAGR,IAAI,SAAK;IAGT,KAAK,SAAK;IAGV,UAAU,SAAK;IAGf,UAAU,SAAK;IAIf,MAAM,EAAG,gBAAgB,GAAG,IAAI,CAAC;IAEjC,OAAO,EAAI,gBAAgB,GAAG,IAAI,CAAC;IAEnC,MAAM,EAAI,gBAAgB,GAAG,IAAI,CAAC;IAElC,OAAgB,MAAM,0BAAU;IAGjB,YAAY;IAmBlB,MAAM;IAmBN,OAAO,CAAC,YAAY,EAAE,gBAAgB,CAAC,GAAG,CAAC;IAMpD;;OAEG;IACH,cAAc;IASd;;;OAGG;IACH,aAAa,sCAoBX;CACF"}

package/slider-input.style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"slider-input.style.d.ts","sourceRoot":"","sources":["../../../src/components/slider-input/slider-input.style.ts"],"names":[],"mappings":";AAEA,wBA0EE"}

package/utils.d.ts

@@ -1,2 +0,0 @@
-export declare function debounce(func: Function, wait?: number): (this: any, ...args: any[]) => void;
-//# sourceMappingURL=utils.d.ts.map

package/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/slider-input/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,IAAI,EAAC,QAAQ,EAAE,IAAI,SAAM,UAE3B,GAAG,WAAS,GAAG,EAAE,UAIrC"}

package/utils.js

@@ -1,8 +0,0 @@
-export function debounce(func, wait = 100) {
-    let timeout;
-    return function (...args) {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => func.apply(this, args), wait);
-    };
-}
-//# sourceMappingURL=utils.js.map

package/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/slider-input/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,QAAQ,CAAC,IAAa,EAAE,IAAI,GAAG,GAAG;IACjD,IAAI,OAAsB,CAAC;IAC3B,OAAO,UAAmB,GAAG,IAAU;QACrC,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAG,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC;AACD,CAAC","sourcesContent":["export function debounce(func:Function, wait = 100) {\n\tlet timeout:NodeJS.Timeout;\n\treturn function (this:any,...args:any[]) {\n\t  clearTimeout(timeout);\n\t  timeout = setTimeout(() => func.apply(this , args), wait);\n\t};\n  }"]}