@zywave/zui-slider 4.3.2 → 4.3.3-pre.0

package/dist/custom-elements.json

@@ -119,12 +119,12 @@
             },
             {
               "kind": "method",
-              "name": "_renderText",
+              "name": "#renderText",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_onInput",
+              "name": "#onInput",
               "privacy": "private",
               "parameters": [
                 {
@@ -137,12 +137,12 @@
             },
             {
               "kind": "method",
-              "name": "_onChange",
+              "name": "#onChange",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_ensureValidValue",
+              "name": "#ensureValidValue",
               "privacy": "private",
               "parameters": [
                 {

package/dist/zui-slider.d.ts

@@ -49,10 +49,6 @@ export declare class ZuiSlider extends ZuiFormAssociatedElement {
     static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    private _renderText;
-    private _onInput;
-    private _onChange;
-    private _ensureValidValue;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/zui-slider.js

@@ -70,7 +70,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     }
     set value(val) {
         const oldVal = this.#value;
-        val = this._ensureValidValue(val);
+        val = this.#ensureValidValue(val);
         this.#value = val;
         this._setFormValue(this.#value);
         this.requestUpdate('value', oldVal);
@@ -90,7 +90,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         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);
+        value = this.#ensureValidValue(value, min, max);
         this.#defaultValue = value;
         this._setFormValue(value.toString());
     }
@@ -103,15 +103,15 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         style=${styleMap(styles)}
         type="range"
         .value="${this.value}"
-        .min="${this.min}"
-        .max="${this.max}"
-        .step="${this.step}"
+        .min="${String(this.min)}"
+        .max="${String(this.max)}"
+        .step="${String(this.step)}"
         ?disabled="${this.disabled}"
-        @input="${this._onInput}"
-        @change="${this._onChange}"
-      />${this._renderText()}`;
+        @input="${this.#onInput}"
+        @change="${this.#onChange}"
+      />${this.#renderText()}`;
     }
-    _renderText() {
+    #renderText() {
         if (this.noText) {
             return html ``;
         }
@@ -121,13 +121,13 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         };
         return html `<span style=${styleMap(styles)}>${this.value}</span>`;
     }
-    _onInput(e) {
+    #onInput(e) {
         this.value = e.target.value;
     }
-    _onChange() {
+    #onChange() {
         this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true }));
     }
-    _ensureValidValue(value, min, max) {
+    #ensureValidValue(value, min, max) {
         if (value === '') {
             return value;
         }

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 _focusControlSelector() {\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":"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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 _focusControlSelector() {\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=\"${String(this.min)}\"\n        .max=\"${String(this.max)}\"\n        .step=\"${String(this.step)}\"\n        ?disabled=\"${this.disabled}\"\n        @input=\"${this.#onInput}\"\n        @change=\"${this.#onChange}\"\n      />${this.#renderText()}`;\n  }\n\n  #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  #onInput(e: Event) {\n    this.value = (e.target as HTMLInputElement).value;\n  }\n\n  #onChange() {\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true }));\n  }\n\n  #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.3.2",
+  "version": "4.3.3-pre.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
@@ -24,5 +24,5 @@
     "@zywave/zui-base": "^4.6.1"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "6ccacba5d09f8f9b2548272f06482a8c392af6c9"
+  "gitHead": "8130717d40462a72e3d695ce04263b6b8d874cb2"
 }

package/src/zui-slider.ts

@@ -52,7 +52,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
 
   set value(val) {
     const oldVal = this.#value;
-    val = this._ensureValidValue(val);
+    val = this.#ensureValidValue(val);
     this.#value = val;
     this._setFormValue(this.#value);
     this.requestUpdate('value', oldVal);
@@ -98,7 +98,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     const max = this.getAttribute('max') ?? this.max;
     const min = this.getAttribute('min') ?? this.min;
 
-    value = this._ensureValidValue(value, min, max);
+    value = this.#ensureValidValue(value, min, max);
 
     this.#defaultValue = value;
     this._setFormValue(value.toString());
@@ -113,16 +113,16 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         style=${styleMap(styles)}
         type="range"
         .value="${this.value}"
-        .min="${this.min}"
-        .max="${this.max}"
-        .step="${this.step}"
+        .min="${String(this.min)}"
+        .max="${String(this.max)}"
+        .step="${String(this.step)}"
         ?disabled="${this.disabled}"
-        @input="${this._onInput}"
-        @change="${this._onChange}"
-      />${this._renderText()}`;
+        @input="${this.#onInput}"
+        @change="${this.#onChange}"
+      />${this.#renderText()}`;
   }
 
-  private _renderText() {
+  #renderText() {
     if (this.noText) {
       return html``;
     }
@@ -133,15 +133,15 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     return html`<span style=${styleMap(styles)}>${this.value}</span>`;
   }
 
-  private _onInput(e: Event) {
+  #onInput(e: Event) {
     this.value = (e.target as HTMLInputElement).value;
   }
 
-  private _onChange() {
+  #onChange() {
     this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true }));
   }
 
-  private _ensureValidValue(value: string | number, min?: number | string | null, max?: number | string | null) {
+  #ensureValidValue(value: string | number, min?: number | string | null, max?: number | string | null) {
     if (value === '') {
       return value;
     }