@zywave/zui-slider 4.0.15 → 4.1.0-pre.0

package/dist/zui-slider.js

@@ -4,18 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _ZuiSlider_defaultValue, _ZuiSlider_value;
 import { ZuiFormAssociatedElement } from '@zywave/zui-base';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -47,8 +35,8 @@ const DEFAULT_MAX = 100;
 export class ZuiSlider extends ZuiFormAssociatedElement {
     constructor() {
         super(...arguments);
-        _ZuiSlider_defaultValue.set(this, `${DEFAULT_MAX / 2}`);
-        _ZuiSlider_value.set(this, `${DEFAULT_MAX / 2}`);
+        this.#defaultValue = `${DEFAULT_MAX / 2}`;
+        this.#value = `${DEFAULT_MAX / 2}`;
         /**
          * Represents the maximum permitted value
          */
@@ -73,20 +61,22 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         return this.value;
     }
     formResetCallback() {
-        this.value = __classPrivateFieldGet(this, _ZuiSlider_defaultValue, "f");
+        this.value = this.#defaultValue;
     }
+    #defaultValue;
+    #value;
     get value() {
-        return __classPrivateFieldGet(this, _ZuiSlider_value, "f");
+        return this.#value;
     }
     set value(val) {
-        const oldVal = __classPrivateFieldGet(this, _ZuiSlider_value, "f");
+        const oldVal = this.#value;
         val = this._ensureValidValue(val);
-        __classPrivateFieldSet(this, _ZuiSlider_value, val, "f");
-        this._setFormValue(__classPrivateFieldGet(this, _ZuiSlider_value, "f"));
+        this.#value = val;
+        this._setFormValue(this.#value);
         this.requestUpdate('value', oldVal);
     }
     get valueAsNumber() {
-        return parseFloat(__classPrivateFieldGet(this, _ZuiSlider_value, "f"));
+        return parseFloat(this.#value);
     }
     get progress() {
         return ((this.valueAsNumber - this.min) / (this.max - this.min)) * 100;
@@ -95,14 +85,13 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         return [super.styles, style];
     }
     connectedCallback() {
-        var _a, _b, _c;
         super.connectedCallback();
         // we want to go a little faster than LitElement and behave more like native HTML Form Associated Elements
-        let value = (_a = this.getAttribute('value')) !== null && _a !== void 0 ? _a : this.value;
-        const max = (_b = this.getAttribute('max')) !== null && _b !== void 0 ? _b : this.max;
-        const min = (_c = this.getAttribute('min')) !== null && _c !== void 0 ? _c : this.min;
+        let value = this.getAttribute('value') ?? this.value;
+        const max = this.getAttribute('max') ?? this.max;
+        const min = this.getAttribute('min') ?? this.min;
         value = this._ensureValidValue(value, min, max);
-        __classPrivateFieldSet(this, _ZuiSlider_defaultValue, value, "f");
+        this.#defaultValue = value;
         this._setFormValue(value.toString());
     }
     render() {
@@ -142,8 +131,8 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         if (value === '') {
             return value;
         }
-        min = min !== null && min !== void 0 ? min : this.min;
-        max = max !== null && max !== void 0 ? max : this.max;
+        min = min ?? this.min;
+        max = max ?? this.max;
         if (typeof value === 'string') {
             value = parseFloat(value);
         }
@@ -162,7 +151,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         return value.toString();
     }
 }
-_ZuiSlider_defaultValue = new WeakMap(), _ZuiSlider_value = new WeakMap();
 __decorate([
     property()
 ], ZuiSlider.prototype, "value", null);

package/dist/zui-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiFormAssociatedElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\nconst DEFAULT_MAX = 100;\n\n/**\n * A range form control for choosing values along a slider.\n * @element zui-slider\n *\n * @attr {string | null} [name=null] - The name of this element that is associated with form submission\n * @attr {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @attr {boolean} [readonly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @attr {number} [value=50] - Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n *\n * @prop {string | null} [name=null] - The name of this element that is associated with form submission\n * @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @prop {boolean} [readOnly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @prop {number} [valueAsNumber=50] - Returns the value of the element, interpreted as one of the following, in order: A number, NaN if conversion is impossible\n * @prop {string} [value='50'] - Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line\n *\n * @cssprop [--zui-slider-thumb-size=1.875rem (30px)] - Point of contact to grab and slide to change value\n *\n * @event {CustomEvent} change - Fires when value changes, details contain `value`\n */\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n  protected get _formControlSelector() {\n    return 'input';\n  }\n\n  protected get _formValue() {\n    return this.value;\n  }\n\n  protected formResetCallback() {\n    this.value = this.#defaultValue;\n  }\n\n  #defaultValue = `${DEFAULT_MAX / 2}`;\n\n  #value = `${DEFAULT_MAX / 2}`;\n\n  @property()\n  get value() {\n    return this.#value;\n  }\n\n  set value(val) {\n    const oldVal = this.#value;\n    val = this._ensureValidValue(val);\n    this.#value = val;\n    this._setFormValue(this.#value);\n    this.requestUpdate('value', oldVal);\n  }\n\n  get valueAsNumber() {\n    return parseFloat(this.#value);\n  }\n\n  /**\n   * Represents the maximum permitted value\n   */\n  @property({ type: Number }) min = 0;\n\n  /**\n   * Represents the maximum permitted value\n   */\n  @property({ type: Number, attribute: 'max' }) max = 100;\n\n  /**\n   * Represents the stepping interval, used both for user interface and validation purposes\n   */\n  @property({ type: Number }) step = 0;\n\n  /**\n   * Represents that this control must be filled in for form submission\n   */\n  @property({ type: Boolean, attribute: 'no-text' }) noText = false;\n\n  get progress() {\n    return ((this.valueAsNumber - this.min) / (this.max - this.min)) * 100;\n  }\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // we want to go a little faster than LitElement and behave more like native HTML Form Associated Elements\n    let value = this.getAttribute('value') ?? this.value;\n    const max = this.getAttribute('max') ?? this.max;\n    const min = this.getAttribute('min') ?? this.min;\n\n    value = this._ensureValidValue(value, min, max);\n\n    this.#defaultValue = value;\n    this._setFormValue(value.toString());\n  }\n\n  render() {\n    const progressColor = this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n    const styles = {\n      background: `linear-gradient(to right, ${progressColor} 0%, ${progressColor} ${this.progress}%, var(--zui-gray-200) ${this.progress}%, var(--zui-gray-200) 100%)`,\n    };\n    return html`<input\n        style=${styleMap(styles)}\n        type=\"range\"\n        .value=\"${this.value}\"\n        .min=\"${this.min}\"\n        .max=\"${this.max}\"\n        .step=\"${this.step}\"\n        ?disabled=\"${this.disabled}\"\n        @input=\"${this._onInput}\"\n        @change=\"${this._onChange}\"\n      />${this._renderText()}`;\n  }\n\n  private _renderText() {\n    if (this.noText) {\n      return html``;\n    }\n    const thumbOffset = `var(--zui-slider-thumb-size) * ${this.progress / 100}`;\n    const styles = {\n      left: `calc(${this.progress}% - ${thumbOffset} + 0.125rem)`,\n    };\n    return html`<span style=${styleMap(styles)}>${this.value}</span>`;\n  }\n\n  private _onInput(e: Event) {\n    this.value = (e.target as HTMLInputElement).value;\n  }\n\n  private _onChange() {\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true }));\n  }\n\n  private _ensureValidValue(value: string | number, min?: number | string | null, max?: number | string | null) {\n    if (value === '') {\n      return value;\n    }\n    min = min ?? this.min;\n    max = max ?? this.max;\n\n    if (typeof value === 'string') {\n      value = parseFloat(value);\n    }\n    if (typeof min === 'string') {\n      min = parseFloat(min);\n    }\n    if (typeof max === 'string') {\n      max = parseFloat(max);\n    }\n\n    if (value < min) {\n      value = min;\n    } else if (value > max) {\n      value = max;\n    }\n\n    return value.toString();\n  }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-slider': ZuiSlider;\n  }\n}\n"]}
+{"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,OAAO,SAAU,SAAQ,wBAAwB;IAAvD;;QAaE,kBAAa,GAAG,GAAG,WAAW,GAAG,CAAC,EAAE,CAAC;QAErC,WAAM,GAAG,GAAG,WAAW,GAAG,CAAC,EAAE,CAAC;QAmB9B;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;QAEpC;;WAEG;QAC2C,QAAG,GAAG,GAAG,CAAC;QAExD;;WAEG;QACyB,SAAI,GAAG,CAAC,CAAC;QAErC;;WAEG;QACgD,WAAM,GAAG,KAAK,CAAC;IAsFpE,CAAC;IAzIC,IAAc,oBAAoB;QAChC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAES,iBAAiB;QACzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;IAClC,CAAC;IAED,aAAa,CAAwB;IAErC,MAAM,CAAwB;IAG9B,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,GAAG;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,GAAG,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,IAAI,aAAa;QACf,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;IAsBD,IAAI,QAAQ;QACV,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IACzE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,0GAA0G;QAC1G,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;QACrD,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC;QACjD,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC;QAEjD,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAEhD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IACvC,CAAC;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC;QAC5E,MAAM,MAAM,GAAG;YACb,UAAU,EAAE,6BAA6B,aAAa,QAAQ,aAAa,IAAI,IAAI,CAAC,QAAQ,0BAA0B,IAAI,CAAC,QAAQ,8BAA8B;SAClK,CAAC;QACF,OAAO,IAAI,CAAA;gBACC,QAAQ,CAAC,MAAM,CAAC;;kBAEd,IAAI,CAAC,KAAK;gBACZ,IAAI,CAAC,GAAG;gBACR,IAAI,CAAC,GAAG;iBACP,IAAI,CAAC,IAAI;qBACL,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAC,QAAQ;mBACZ,IAAI,CAAC,SAAS;UACvB,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IAC7B,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,CAAA,EAAE,CAAC;QAChB,CAAC;QACD,MAAM,WAAW,GAAG,kCAAkC,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC;QAC5E,MAAM,MAAM,GAAG;YACb,IAAI,EAAE,QAAQ,IAAI,CAAC,QAAQ,OAAO,WAAW,cAAc;SAC5D,CAAC;QACF,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,SAAS,CAAC;IACpE,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;IACpD,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACvF,CAAC;IAEO,iBAAiB,CAAC,KAAsB,EAAE,GAA4B,EAAE,GAA4B;QAC1G,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YACjB,OAAO,KAAK,CAAC;QACf,CAAC;QACD,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC;QACtB,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC;QAEtB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;QACD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QACxB,CAAC;QACD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QACxB,CAAC;QAED,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YAChB,KAAK,GAAG,GAAG,CAAC;QACd,CAAC;aAAM,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YACvB,KAAK,GAAG,GAAG,CAAC;QACd,CAAC;QAED,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;IAC1B,CAAC;CACF;AAxHC;IADC,QAAQ,EAAE;sCAGV;AAiB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAS;AAKU;IAA7C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sCAAW;AAK5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAU;AAKc;IAAlD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;yCAAgB;AAwFpE,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import { ZuiFormAssociatedElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\nconst DEFAULT_MAX = 100;\n\n/**\n * A range form control for choosing values along a slider.\n * @element zui-slider\n *\n * @attr {string | null} [name=null] - The name of this element that is associated with form submission\n * @attr {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @attr {boolean} [readonly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @attr {number} [value=50] - Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n *\n * @prop {string | null} [name=null] - The name of this element that is associated with form submission\n * @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @prop {boolean} [readOnly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @prop {number} [valueAsNumber=50] - Returns the value of the element, interpreted as one of the following, in order: A number, NaN if conversion is impossible\n * @prop {string} [value='50'] - Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line\n *\n * @cssprop [--zui-slider-thumb-size=1.875rem (30px)] - Point of contact to grab and slide to change value\n *\n * @event {CustomEvent} change - Fires when value changes, details contain `value`\n */\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n  protected get _formControlSelector() {\n    return 'input';\n  }\n\n  protected get _formValue() {\n    return this.value;\n  }\n\n  protected formResetCallback() {\n    this.value = this.#defaultValue;\n  }\n\n  #defaultValue = `${DEFAULT_MAX / 2}`;\n\n  #value = `${DEFAULT_MAX / 2}`;\n\n  @property()\n  get value() {\n    return this.#value;\n  }\n\n  set value(val) {\n    const oldVal = this.#value;\n    val = this._ensureValidValue(val);\n    this.#value = val;\n    this._setFormValue(this.#value);\n    this.requestUpdate('value', oldVal);\n  }\n\n  get valueAsNumber() {\n    return parseFloat(this.#value);\n  }\n\n  /**\n   * Represents the maximum permitted value\n   */\n  @property({ type: Number }) min = 0;\n\n  /**\n   * Represents the maximum permitted value\n   */\n  @property({ type: Number, attribute: 'max' }) max = 100;\n\n  /**\n   * Represents the stepping interval, used both for user interface and validation purposes\n   */\n  @property({ type: Number }) step = 0;\n\n  /**\n   * Represents that this control must be filled in for form submission\n   */\n  @property({ type: Boolean, attribute: 'no-text' }) noText = false;\n\n  get progress() {\n    return ((this.valueAsNumber - this.min) / (this.max - this.min)) * 100;\n  }\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // we want to go a little faster than LitElement and behave more like native HTML Form Associated Elements\n    let value = this.getAttribute('value') ?? this.value;\n    const max = this.getAttribute('max') ?? this.max;\n    const min = this.getAttribute('min') ?? this.min;\n\n    value = this._ensureValidValue(value, min, max);\n\n    this.#defaultValue = value;\n    this._setFormValue(value.toString());\n  }\n\n  render() {\n    const progressColor = this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n    const styles = {\n      background: `linear-gradient(to right, ${progressColor} 0%, ${progressColor} ${this.progress}%, var(--zui-gray-200) ${this.progress}%, var(--zui-gray-200) 100%)`,\n    };\n    return html`<input\n        style=${styleMap(styles)}\n        type=\"range\"\n        .value=\"${this.value}\"\n        .min=\"${this.min}\"\n        .max=\"${this.max}\"\n        .step=\"${this.step}\"\n        ?disabled=\"${this.disabled}\"\n        @input=\"${this._onInput}\"\n        @change=\"${this._onChange}\"\n      />${this._renderText()}`;\n  }\n\n  private _renderText() {\n    if (this.noText) {\n      return html``;\n    }\n    const thumbOffset = `var(--zui-slider-thumb-size) * ${this.progress / 100}`;\n    const styles = {\n      left: `calc(${this.progress}% - ${thumbOffset} + 0.125rem)`,\n    };\n    return html`<span style=${styleMap(styles)}>${this.value}</span>`;\n  }\n\n  private _onInput(e: Event) {\n    this.value = (e.target as HTMLInputElement).value;\n  }\n\n  private _onChange() {\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true }));\n  }\n\n  private _ensureValidValue(value: string | number, min?: number | string | null, max?: number | string | null) {\n    if (value === '') {\n      return value;\n    }\n    min = min ?? this.min;\n    max = max ?? this.max;\n\n    if (typeof value === 'string') {\n      value = parseFloat(value);\n    }\n    if (typeof min === 'string') {\n      min = parseFloat(min);\n    }\n    if (typeof max === 'string') {\n      max = parseFloat(max);\n    }\n\n    if (value < min) {\n      value = min;\n    } else if (value > max) {\n      value = max;\n    }\n\n    return value.toString();\n  }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-slider': ZuiSlider;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zywave/zui-slider",
-  "version": "4.0.15",
+  "version": "4.1.0-pre.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
@@ -21,8 +21,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@zywave/zui-base": "^4.1.26"
+    "@zywave/zui-base": "^4.2.0-pre.0"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "b76f4a701cd957f56f3a7915765dd53a50b7144c"
+  "gitHead": "1d65fd119122e053cfb26ec6779084a5a61657c5"
 }

package/test/zui-slider.test.ts

@@ -5,8 +5,6 @@ import { ZuiSlider } from '@zywave/zui-slider';
 import { assert } from '@esm-bundle/chai';
 import { buildForm } from '../../../../test/src/util/form-helpers';
 import { randString, randNumber } from '../../../../test/src/util/helpers';
-import { conditionalTest } from '../../../../test/src/util/mocha-helpers';
-import { SUPPORTS_FORMDATA_EVENT } from '@zywave/zui-base';
 import { faceTests } from '../../../../test/src/util/face-tests';
 
 suite('zui-slider', () => {
@@ -39,7 +37,7 @@ suite('zui-slider', () => {
     assert.equal(element.disabled, false);
   });
 
-  conditionalTest(SUPPORTS_FORMDATA_EVENT, 'init slider associates with form properly', () => {
+  test('init slider associates with form properly', () => {
     const value = randNumber(50);
     const name = randString();
     element.setAttribute('name', name);
@@ -50,23 +48,19 @@ suite('zui-slider', () => {
     assert.equal(formVal, value.toString());
   });
 
-  conditionalTest(
-    SUPPORTS_FORMDATA_EVENT,
-    'init slider with max and value overrides associates with form properly',
-    () => {
-      const max = randNumber();
-      const val = max + 1;
-      const name = randString();
-      element.setAttribute('name', name);
-      element.setAttribute('max', max.toString());
-      element.setAttribute('value', val.toString());
+  test('init slider with max and value overrides associates with form properly', () => {
+    const max = randNumber();
+    const val = max + 1;
+    const name = randString();
+    element.setAttribute('name', name);
+    element.setAttribute('max', max.toString());
+    element.setAttribute('value', val.toString());
 
-      const formData = new FormData(form);
-      const formVal = formData.get(name);
-      assert.exists(formVal);
-      assert.equal(formVal, max.toString());
-    }
-  );
+    const formData = new FormData(form);
+    const formVal = formData.get(name);
+    assert.exists(formVal);
+    assert.equal(formVal, max.toString());
+  });
 });
 
 faceTests<ZuiSlider>('zui-slider', {