@zywave/zui-slider 4.0.9-pre.1 → 4.0.9-pre.2

package/dist/custom-elements.json

@@ -8,8 +8,15 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A range form control for choosing values along a slider.",
           "name": "ZuiSlider",
+          "cssProperties": [
+            {
+              "description": "Point of contact to grab and slide to change value",
+              "name": "--zui-slider-thumb-size",
+              "default": "1.875rem (30px)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -41,13 +48,21 @@
             {
               "kind": "field",
               "name": "value",
+              "type": {
+                "text": "string"
+              },
               "description": "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",
+              "default": "'50'",
               "attribute": "value"
             },
             {
               "kind": "field",
               "name": "valueAsNumber",
-              "description": "Returns the value of the element, interpreted as one of the following, in order:\nA number\nNaN if conversion is impossible"
+              "type": {
+                "text": "number"
+              },
+              "description": "Returns the value of the element, interpreted as one of the following, in order: A number, NaN if conversion is impossible",
+              "default": "50"
             },
             {
               "kind": "field",
@@ -56,18 +71,18 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "Represents the minimum permitted value",
+              "description": "Represents the maximum permitted value",
               "attribute": "min"
             },
             {
               "kind": "field",
               "name": "max",
-              "default": "100",
-              "description": "Represents the maximum permitted value",
-              "attribute": "max",
               "type": {
                 "text": "number"
-              }
+              },
+              "default": "100",
+              "description": "Represents the maximum permitted value",
+              "attribute": "max"
             },
             {
               "kind": "field",
@@ -91,7 +106,12 @@
             },
             {
               "kind": "field",
-              "name": "progress"
+              "name": "progress",
+              "type": {
+                "text": "number"
+              },
+              "description": "Determines visual placement of the slider thumb along the line",
+              "default": "50"
             },
             {
               "kind": "method",
@@ -145,10 +165,11 @@
             },
             {
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
               "description": "The name of this element that is associated with form submission",
               "name": "name",
+              "default": "null",
               "kind": "field"
             },
             {
@@ -157,6 +178,7 @@
               },
               "description": "Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission",
               "name": "disabled",
+              "default": "false",
               "kind": "field"
             },
             {
@@ -165,6 +187,7 @@
               },
               "description": "Represents whether a user can make changes to this element; the value of this element will still be included in the form submission",
               "name": "readOnly",
+              "default": "false",
               "kind": "field"
             },
             {
@@ -173,6 +196,7 @@
               },
               "description": "If true, this element will be focused when connected to the document",
               "name": "autofocus",
+              "default": "false",
               "kind": "field"
             }
           ],
@@ -181,41 +205,50 @@
               "name": "change",
               "type": {
                 "text": "CustomEvent"
-              }
+              },
+              "description": "Fires when value changes, details contain `value`"
             }
           ],
           "attributes": [
             {
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
               "description": "The name of this element that is associated with form submission",
-              "name": "name"
+              "name": "name",
+              "default": "null"
             },
             {
               "type": {
                 "text": "boolean"
               },
               "description": "Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission",
-              "name": "disabled"
+              "name": "disabled",
+              "default": "false"
             },
             {
               "type": {
                 "text": "boolean"
               },
               "description": "Represents whether a user can make changes to this element; the value of this element will still be included in the form submission",
-              "name": "readonly"
+              "name": "readonly",
+              "default": "false"
             },
             {
               "type": {
                 "text": "boolean"
               },
               "description": "If true, this element will be focused when connected to the document",
-              "name": "autofocus"
+              "name": "autofocus",
+              "default": "false"
             },
             {
-              "name": "value",
+              "type": {
+                "text": "string"
+              },
               "description": "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",
+              "name": "value",
+              "default": "'50'",
               "fieldName": "value"
             },
             {
@@ -224,16 +257,16 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "Represents the minimum permitted value",
+              "description": "Represents the maximum permitted value",
               "fieldName": "min"
             },
             {
               "name": "max",
-              "default": "DEFAULT_MAX",
-              "description": "Represents the maximum permitted value",
-              "resolveInitializer": {
-                "module": "src/zui-slider.ts"
+              "type": {
+                "text": "number"
               },
+              "default": "100",
+              "description": "Represents the maximum permitted value",
               "fieldName": "max"
             },
             {

package/dist/zui-slider.d.ts

@@ -1,35 +1,36 @@
 import { ZuiFormAssociatedElement } from '@zywave/zui-base';
 /**
+ * A range form control for choosing values along a slider.
  * @element zui-slider
  *
- * @attr {string} name - The name of this element that is associated with form submission
- * @attr {boolean} disabled - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission
- * @attr {boolean} readonly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission
- * @attr {boolean} autofocus - If true, this element will be focused when connected to the document
+ * @attr {string | null} [name=null] - The name of this element that is associated with form submission
+ * @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
+ * @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
+ * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document
+ * @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
  *
- * @prop {string} name - The name of this element that is associated with form submission
- * @prop {boolean} disabled - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission
- * @prop {boolean} readOnly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission
- * @prop {boolean} autofocus - If true, this element will be focused when connected to the document
+ * @prop {string | null} [name=null] - The name of this element that is associated with form submission
+ * @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
+ * @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
+ * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document
+ * @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
+ * @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
+ * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line
+ *
+ * @cssprop [--zui-slider-thumb-size=1.875rem (30px)] - Point of contact to grab and slide to change value
+ *
+ * @event {CustomEvent} change - Fires when value changes, details contain `value`
  */
 export declare class ZuiSlider extends ZuiFormAssociatedElement {
     #private;
     protected get _formControlSelector(): string;
     protected get _formValue(): string;
     protected formResetCallback(): void;
-    /**
-     * 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
-     */
     get value(): string;
     set value(val: string);
-    /**
-     * Returns the value of the element, interpreted as one of the following, in order:
-      A number
-      NaN if conversion is impossible
-     */
     get valueAsNumber(): number;
     /**
-     * Represents the minimum permitted value
+     * Represents the maximum permitted value
      */
     min: number;
     /**

package/dist/zui-slider.js

@@ -23,17 +23,26 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { style } from './zui-slider-css.js';
 const DEFAULT_MAX = 100;
 /**
+ * A range form control for choosing values along a slider.
  * @element zui-slider
  *
- * @attr {string} name - The name of this element that is associated with form submission
- * @attr {boolean} disabled - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission
- * @attr {boolean} readonly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission
- * @attr {boolean} autofocus - If true, this element will be focused when connected to the document
+ * @attr {string | null} [name=null] - The name of this element that is associated with form submission
+ * @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
+ * @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
+ * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document
+ * @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
  *
- * @prop {string} name - The name of this element that is associated with form submission
- * @prop {boolean} disabled - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission
- * @prop {boolean} readOnly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission
- * @prop {boolean} autofocus - If true, this element will be focused when connected to the document
+ * @prop {string | null} [name=null] - The name of this element that is associated with form submission
+ * @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
+ * @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
+ * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document
+ * @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
+ * @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
+ * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line
+ *
+ * @cssprop [--zui-slider-thumb-size=1.875rem (30px)] - Point of contact to grab and slide to change value
+ *
+ * @event {CustomEvent} change - Fires when value changes, details contain `value`
  */
 export class ZuiSlider extends ZuiFormAssociatedElement {
     constructor() {
@@ -41,13 +50,13 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         _ZuiSlider_defaultValue.set(this, `${DEFAULT_MAX / 2}`);
         _ZuiSlider_value.set(this, `${DEFAULT_MAX / 2}`);
         /**
-         * Represents the minimum permitted value
+         * Represents the maximum permitted value
          */
         this.min = 0;
         /**
          * Represents the maximum permitted value
          */
-        this.max = DEFAULT_MAX;
+        this.max = 100;
         /**
          * Represents the stepping interval, used both for user interface and validation purposes
          */
@@ -66,9 +75,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     formResetCallback() {
         this.value = __classPrivateFieldGet(this, _ZuiSlider_defaultValue, "f");
     }
-    /**
-     * 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
-     */
     get value() {
         return __classPrivateFieldGet(this, _ZuiSlider_value, "f");
     }
@@ -79,11 +85,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         this._setFormValue(__classPrivateFieldGet(this, _ZuiSlider_value, "f"));
         this.requestUpdate('value', oldVal);
     }
-    /**
-     * Returns the value of the element, interpreted as one of the following, in order:
-      A number
-      NaN if conversion is impossible
-     */
     get valueAsNumber() {
         return parseFloat(__classPrivateFieldGet(this, _ZuiSlider_value, "f"));
     }
@@ -169,7 +170,7 @@ __decorate([
     property({ type: Number })
 ], ZuiSlider.prototype, "min", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, attribute: 'max' })
 ], ZuiSlider.prototype, "max", void 0);
 __decorate([
     property({ type: Number })

package/dist/zui-slider.js.map

@@ -1 +1 @@
-{"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;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,SAAU,SAAQ,wBAAwB;IAAvD;;QAaE,kCAAgB,GAAG,WAAW,GAAG,CAAC,EAAE,EAAC;QAErC,2BAAS,GAAG,WAAW,GAAG,CAAC,EAAE,EAAC;QA2B9B;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;QAEpC;;WAEG;QACyB,QAAG,GAAG,WAAW,CAAC;QAE9C;;WAEG;QACyB,SAAI,GAAG,CAAC,CAAC;QAErC;;WAEG;QACgD,WAAM,GAAG,KAAK,CAAC;IAsFpE,CAAC;IAjJC,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,uBAAA,IAAI,+BAAc,CAAC;IAClC,CAAC;IAMD;;OAEG;IAEH,IAAI,KAAK;QACP,OAAO,uBAAA,IAAI,wBAAO,CAAC;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,GAAG;QACX,MAAM,MAAM,GAAG,uBAAA,IAAI,wBAAO,CAAC;QAC3B,GAAG,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;QAClC,uBAAA,IAAI,oBAAU,GAAG,MAAA,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,uBAAA,IAAI,wBAAO,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAED;;;;OAIG;IACH,IAAI,aAAa;QACf,OAAO,UAAU,CAAC,uBAAA,IAAI,wBAAO,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,MAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,mCAAI,IAAI,CAAC,KAAK,CAAC;QACrD,MAAM,GAAG,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,mCAAI,IAAI,CAAC,GAAG,CAAC;QACjD,MAAM,GAAG,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,mCAAI,IAAI,CAAC,GAAG,CAAC;QAEjD,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAEhD,uBAAA,IAAI,2BAAiB,KAAK,MAAA,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;YACf,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;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;YAChB,OAAO,KAAK,CAAC;SACd;QACD,GAAG,GAAG,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,IAAI,CAAC,GAAG,CAAC;QACtB,GAAG,GAAG,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,IAAI,CAAC,GAAG,CAAC;QAEtB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;SAC3B;QACD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YAC3B,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;SACvB;QACD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YAC3B,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;SACvB;QAED,IAAI,KAAK,GAAG,GAAG,EAAE;YACf,KAAK,GAAG,GAAG,CAAC;SACb;aAAM,IAAI,KAAK,GAAG,GAAG,EAAE;YACtB,KAAK,GAAG,GAAG,CAAC;SACb;QAED,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;IAC1B,CAAC;CACF;;AA7HC;IADC,QAAQ,EAAE;sCAGV;AAsB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAS;AAKR;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAmB;AAKlB;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 * @element zui-slider\n *\n * @attr {string} name - The name of this element that is associated with form submission\n * @attr {boolean} disabled - 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 - 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 - If true, this element will be focused when connected to the document\n *\n * @prop {string} name - The name of this element that is associated with form submission\n * @prop {boolean} disabled - 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 - 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 - If true, this element will be focused when connected to the document\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  /**\n   * 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  @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  /**\n   * Returns the value of the element, interpreted as one of the following, in order:\n    A number\n    NaN if conversion is impossible\n   */\n  get valueAsNumber() {\n    return parseFloat(this.#value);\n  }\n\n  /**\n   * Represents the minimum permitted value\n   */\n  @property({ type: Number }) min = 0;\n\n  /**\n   * Represents the maximum permitted value\n   */\n  @property({ type: Number }) max = DEFAULT_MAX;\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 _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/docs/customelement-manifest-element.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="ZUI Web Component Skeleton" />
+    <title>zui-slider CEM Demo</title>
+    <script src="https://cdn.zywave.com/@zywave/customelement-manifest-element@latest/index.bundle.js" type="module"></script>
+    <link rel="stylesheet" href="../../../../node_modules/@zywave/zui-base-styles/dist/zui-base-styles.css" />
+    <style>
+        body {
+            margin: 2rem;
+        }
+
+        @media (min-width: 56.25rem){
+            /* 900px */
+            body {
+                margin: 2rem auto;
+                width: 52%; /* approx width to CEM in Booster API tab */
+            }
+        }
+    </style>
+</head>
+<body>
+    <customelement-manifest-element src="../dist/custom-elements.json" initialelementname="zui-slider"></customelement-manifest-element>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zywave/zui-slider",
-  "version": "4.0.9-pre.1",
+  "version": "4.0.9-pre.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
@@ -9,7 +9,8 @@
     "build:clean": "node ../../../scripts/node/remove-build-files.mjs && yarn run build",
     "build:scss": "node ../../../scripts/node/sass.mjs",
     "build:ts": "tsc -p tsconfig.build.json",
-    "launch-server:demo": "es-dev-server --root-dir ../../../ --app-index packages/components/zui-slider/demo/index.html --open --node-resolve --watch",
+    "launch-server:cem": "es-dev-server --root-dir ../../../ --app-index packages/components/zui-slider/docs/customelement-manifest-element.html --open --node-resolve --watch",
+    "launch-server:demo": "es-dev-server --root-dir ../../../ --app-index packages/components/zui-slider/docs/demo.html --open --node-resolve --watch",
     "launch-server:lab": "es-dev-server --root-dir ../../../ --app-index packages/components/zui-slider/lab.html --open --node-resolve --watch",
     "demo": "npm-run-all build --parallel watcher:start launch-server:demo",
     "watch": "npm-run-all build --parallel watcher:start launch-server:lab",
@@ -20,8 +21,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@zywave/zui-base": "^4.1.20-pre.1"
+    "@zywave/zui-base": "^4.1.20-pre.2"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "dd490b9f8950f89af878ff1435f6b1582491ab31"
+  "gitHead": "957ede57ae7125aa5f34137d1dd502260968055b"
 }

package/src/zui-slider.ts

@@ -7,17 +7,26 @@ import { style } from './zui-slider-css.js';
 const DEFAULT_MAX = 100;
 
 /**
+ * A range form control for choosing values along a slider.
  * @element zui-slider
  *
- * @attr {string} name - The name of this element that is associated with form submission
- * @attr {boolean} disabled - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission
- * @attr {boolean} readonly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission
- * @attr {boolean} autofocus - If true, this element will be focused when connected to the document
+ * @attr {string | null} [name=null] - The name of this element that is associated with form submission
+ * @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
+ * @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
+ * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document
+ * @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
  *
- * @prop {string} name - The name of this element that is associated with form submission
- * @prop {boolean} disabled - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission
- * @prop {boolean} readOnly - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission
- * @prop {boolean} autofocus - If true, this element will be focused when connected to the document
+ * @prop {string | null} [name=null] - The name of this element that is associated with form submission
+ * @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
+ * @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
+ * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document
+ * @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
+ * @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
+ * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line
+ *
+ * @cssprop [--zui-slider-thumb-size=1.875rem (30px)] - Point of contact to grab and slide to change value
+ *
+ * @event {CustomEvent} change - Fires when value changes, details contain `value`
  */
 export class ZuiSlider extends ZuiFormAssociatedElement {
   protected get _formControlSelector() {
@@ -36,9 +45,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
 
   #value = `${DEFAULT_MAX / 2}`;
 
-  /**
-   * 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
-   */
   @property()
   get value() {
     return this.#value;
@@ -52,24 +58,19 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     this.requestUpdate('value', oldVal);
   }
 
-  /**
-   * Returns the value of the element, interpreted as one of the following, in order:
-    A number
-    NaN if conversion is impossible
-   */
   get valueAsNumber() {
     return parseFloat(this.#value);
   }
 
   /**
-   * Represents the minimum permitted value
+   * Represents the maximum permitted value
    */
   @property({ type: Number }) min = 0;
 
   /**
    * Represents the maximum permitted value
    */
-  @property({ type: Number }) max = DEFAULT_MAX;
+  @property({ type: Number, attribute: 'max' }) max = 100;
 
   /**
    * Represents the stepping interval, used both for user interface and validation purposes