@six-group/ui-library 4.0.0-beta.1 → 4.0.0-beta.2

package/dist/collection/components/six-radio/test/six-radio.spec.js

@@ -0,0 +1,63 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixRadio } from "../six-radio";
+describe('six-radio', () => {
+  it('default', async () => {
+    const page = await newSpecPage({
+      components: [SixRadio],
+      html: `<six-radio></six-radio>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-radio value="on">
+        <mock:shadow-root>
+          <label class="radio" htmlfor="radio-1" part="base">
+            <span class="radio__control" part="control">
+              <span class="radio__icon" part="checked-icon">
+                <svg viewBox="0 0 16 16">
+                  <g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
+                    <g fill="currentColor">
+                      <circle cx="8" cy="8" r="5"></circle>
+                    </g>
+                  </g>
+                </svg>
+              </span>
+              <input aria-checked="false" aria-labelledby="radio-label-1" id="radio-1" role="radio" type="radio" value="on">
+            </span>
+            <span class="radio__label" id="radio-label-1" part="label">
+              <slot></slot>
+            </span>
+          </label>
+        </mock:shadow-root>
+      </six-radio>
+    `);
+  });
+  it('checked', async () => {
+    const page = await newSpecPage({
+      components: [SixRadio],
+      html: `<six-radio checked></six-radio>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-radio checked="" value="on">
+        <mock:shadow-root>
+          <label class="radio radio--checked" htmlfor="radio-2" part="base">
+            <span class="radio__control" part="control">
+              <span class="radio__icon" part="checked-icon">
+                <svg viewBox="0 0 16 16">
+                  <g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
+                    <g fill="currentColor">
+                      <circle cx="8" cy="8" r="5"></circle>
+                    </g>
+                  </g>
+                </svg>
+              </span>
+              <input aria-checked="true" aria-labelledby="radio-label-2" checked="" id="radio-2" role="radio" type="radio" value="on">
+            </span>
+            <span class="radio__label" id="radio-label-2" part="label">
+              <slot></slot>
+            </span>
+          </label>
+        </mock:shadow-root>
+      </six-radio>
+    `);
+  });
+});
+//# sourceMappingURL=six-radio.spec.js.map

package/dist/collection/components/six-radio/test/six-radio.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-radio.spec.js","sourceRoot":"","sources":["../../../../src/components/six-radio/test/six-radio.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACzB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,yBAAyB;KAChC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,iCAAiC;KACxC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixRadio } from '../six-radio';\n\ndescribe('six-radio', () => {\n  it('default', async () => {\n    const page = await newSpecPage({\n      components: [SixRadio],\n      html: `<six-radio></six-radio>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-radio value=\"on\">\n        <mock:shadow-root>\n          <label class=\"radio\" htmlfor=\"radio-1\" part=\"base\">\n            <span class=\"radio__control\" part=\"control\">\n              <span class=\"radio__icon\" part=\"checked-icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\n                    <g fill=\"currentColor\">\n                      <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n              <input aria-checked=\"false\" aria-labelledby=\"radio-label-1\" id=\"radio-1\" role=\"radio\" type=\"radio\" value=\"on\">\n            </span>\n            <span class=\"radio__label\" id=\"radio-label-1\" part=\"label\">\n              <slot></slot>\n            </span>\n          </label>\n        </mock:shadow-root>\n      </six-radio>\n    `);\n  });\n\n  it('checked', async () => {\n    const page = await newSpecPage({\n      components: [SixRadio],\n      html: `<six-radio checked></six-radio>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-radio checked=\"\" value=\"on\">\n        <mock:shadow-root>\n          <label class=\"radio radio--checked\" htmlfor=\"radio-2\" part=\"base\">\n            <span class=\"radio__control\" part=\"control\">\n              <span class=\"radio__icon\" part=\"checked-icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\n                    <g fill=\"currentColor\">\n                      <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n              <input aria-checked=\"true\" aria-labelledby=\"radio-label-2\" checked=\"\" id=\"radio-2\" role=\"radio\" type=\"radio\" value=\"on\">\n            </span>\n            <span class=\"radio__label\" id=\"radio-label-2\" part=\"label\">\n              <slot></slot>\n            </span>\n          </label>\n        </mock:shadow-root>\n      </six-radio>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-range/six-range.js

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import FormControl from '../../functional-components/form-control/form-control';
-import { hasSlot } from '../../utils/slot';
-import { EventListeners } from '../../utils/event-listeners';
+import { h } from "@stencil/core";
+import FormControl from "../../functional-components/form-control/form-control";
+import { hasSlot } from "../../utils/slot";
+import { EventListeners } from "../../utils/event-listeners";
 let id = 0;
 /**
  * @since 1.0
@@ -23,148 +23,150 @@ export class SixRange {
     this.labelId = `input-label-${id}`;
     this.helpTextId = `input-help-text-${id}`;
     this.errorTextId = `input-error-text-${id}`;
-    this.customErrorText = '';
-    this.customValidation = false;
     this.eventListeners = new EventListeners();
-    /** default value the slider will be reverted to when reset is executed */
-    this.defaultValue = 0;
+    this.handleInput = () => {
+      if (this.nativeInput != null) {
+        this.update(parseFloat(this.nativeInput.value));
+      }
+      requestAnimationFrame(() => {
+        this.sixChange.emit();
+      });
+    };
+    this.handleBlur = () => {
+      var _a;
+      this.hasFocus = false;
+      this.hasTooltip = false;
+      this.sixBlur.emit();
+      if (this.nativeInput != null) {
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.nativeInput);
+      }
+    };
+    this.handleFocus = () => {
+      var _a;
+      this.hasFocus = true;
+      this.hasTooltip = true;
+      this.sixFocus.emit();
+      if (this.nativeInput != null) {
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.nativeInput);
+      }
+    };
+    this.handleSlotChange = () => {
+      this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+      this.hasLabelSlot = hasSlot(this.host, 'label');
+    };
+    this.handleTouchStart = () => {
+      this.setFocus();
+    };
     this.hasFocus = false;
     this.hasHelpTextSlot = false;
     this.hasLabelSlot = false;
-    this.hasErrorTextSlot = false;
     this.hasTooltip = false;
     this.name = '';
-    this.value = undefined;
-    this.required = undefined;
-    this.label = '';
+    this.value = 0;
+    this.required = false;
     this.helpText = '';
-    this.errorText = '';
     this.disabled = false;
+    this.label = '';
+    this.errorText = '';
     this.invalid = false;
     this.min = 0;
     this.max = 100;
     this.step = 1;
     this.tooltip = 'top';
     this.tooltipFormatter = (value) => value.toString();
-    this.errorOnBlur = false;
   }
   handleLabelChange() {
     this.handleSlotChange();
   }
   handleValueChange() {
-    if (this.input) {
-      this.input.value = this.value;
-      this.calculateColorRunnableTrack();
-    }
-    // In rare cases, the watcher may be called before render so we need to make sure the input exists
-    this.invalid = this.input ? !this.input.checkValidity() : false;
+    this.update();
   }
   connectedCallback() {
-    this.handleInput = this.handleInput.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-    this.handleTouchStart = this.handleTouchStart.bind(this);
-    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+    var _a;
+    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
   }
   componentWillLoad() {
-    if (this.value === undefined || this.value === null)
-      this.value = this.min;
-    if (this.value < this.min)
-      this.value = this.min;
-    if (this.value > this.max)
-      this.value = this.max;
-    this.defaultValue = this.value;
+    this.update();
     this.handleSlotChange();
   }
   componentDidLoad() {
-    this.syncTooltip();
-    this.calculateColorRunnableTrack();
-    this.resizeObserver = new ResizeObserver(() => this.syncTooltip());
-    this.eventListeners.add(this.input, 'invalid', (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
-        this.customErrorText = this.input.validationMessage;
-      }
-      event.preventDefault();
-    });
+    const nativeInput = this.nativeInput;
+    if (nativeInput == null) {
+      return;
+    }
+    this.update();
+    this.resizeObserver = new ResizeObserver(() => this.update());
   }
   disconnectedCallback() {
-    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    var _a;
+    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     this.eventListeners.removeAll();
   }
   /** Sets focus on the input. */
   async setFocus(options) {
-    this.input.focus(options);
+    var _a;
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
   }
   /** Removes focus from the input. */
   async removeFocus() {
-    this.input.blur();
+    var _a;
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
   }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    this.customErrorText = '';
-    this.customValidation = message !== '';
-    this.input.setCustomValidity(message);
-    this.invalid = !this.input.checkValidity();
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    this.input.setCustomValidity('');
-    this.invalid = false;
-  }
-  handleInput() {
-    this.value = Number(this.input.value);
-    this.sixChange.emit();
-    requestAnimationFrame(() => this.syncTooltip());
-    requestAnimationFrame(() => this.calculateColorRunnableTrack());
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.hasTooltip = false;
-    this.sixBlur.emit();
-    this.resizeObserver.unobserve(this.input);
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.hasTooltip = true;
-    this.sixFocus.emit();
-    this.resizeObserver.observe(this.input);
-  }
-  handleSlotChange() {
-    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
-    this.hasLabelSlot = hasSlot(this.host, 'label');
-  }
-  handleTouchStart() {
-    this.setFocus();
-  }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
-  }
-  syncTooltip() {
-    if (this.tooltip !== 'none') {
-      const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
-      const inputWidth = this.input.offsetWidth;
+  syncTooltip(min, max, value) {
+    if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {
+      const percent = Math.max(0, (value - min) / (max - min));
+      const inputWidth = this.nativeInput.offsetWidth;
       const tooltipWidth = this.output.offsetWidth;
-      const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
+      const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');
       const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
       this.output.style.transform = `translateX(${x})`;
       this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
     }
   }
+  isFirefox() {
+    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+  }
+  update(updateValue) {
+    var _a, _b;
+    if (updateValue != null) {
+      this.value = updateValue;
+    }
+    const min = (_a = Number(this.min)) !== null && _a !== void 0 ? _a : 0;
+    const max = (_b = Number(this.max)) !== null && _b !== void 0 ? _b : 0;
+    let value;
+    const parsedValue = parseFloat(this.value);
+    if (isNaN(parsedValue)) {
+      value = this.getDefaultValue(min, max);
+    }
+    else {
+      value = parsedValue;
+    }
+    if (this.nativeInput != null) {
+      // The value may have constraints, so we set the native control's
+      // value and sync it back to ensure it adheres to min, max, and step
+      // properly.
+      this.nativeInput.value = value.toString();
+      this.value = parseFloat(this.nativeInput.value);
+    }
+    else {
+      this.value = value;
+    }
+    this.calculateColorRunnableTrack(min, max, this.value);
+    this.syncTooltip(min, max, this.value);
+  }
+  /**
+   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value
+   */
+  getDefaultValue(min, max) {
+    return max < min ? min : min + (max - min) / 2;
+  }
   /**
    * For Firefox this functionality is not needed because it is supported by standard CSS.
    */
-  calculateColorRunnableTrack() {
-    if (!this.isFirefox()) {
-      const value = parseInt(this.input.value, 10);
-      const min = parseInt(this.input.min, 10);
-      const max = parseInt(this.input.max, 10);
+  calculateColorRunnableTrack(min, max, value) {
+    if (!this.isFirefox() && this.nativeInput != null) {
       const percent = Math.ceil(((value - min) / (max - min)) * 100);
-      this.input.style.background =
+      this.nativeInput.style.background =
         '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +
           percent +
           '%, var(--six-color-web-rock-300) ' +
@@ -172,11 +174,8 @@ export class SixRange {
           '%)';
     }
   }
-  isFirefox() {
-    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-  }
   render() {
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("div", { part: "base", class: {
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { part: "base", class: {
         range: true,
         // States
         'range--disabled': this.disabled,
@@ -184,7 +183,7 @@ export class SixRange {
         'range--tooltip-visible': this.hasTooltip,
         'range--tooltip-top': this.tooltip === 'top',
         'range--tooltip-bottom': this.tooltip === 'bottom',
-      }, onTouchStart: this.handleTouchStart }, h("input", { part: "input", ref: (el) => (this.input = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+      }, onTouchStart: this.handleTouchStart }, h("input", { part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
   }
   static get is() { return "six-range"; }
   static get encapsulation() { return "shadow"; }
@@ -233,7 +232,8 @@ export class SixRange {
           "text": "The input's value attribute."
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "0"
       },
       "required": {
         "type": "boolean",
@@ -247,12 +247,13 @@ export class SixRange {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to true to make the input a required field."
+          "text": "Set to true to show an asterisk beneath the label."
         },
         "attribute": "required",
-        "reflect": true
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "label": {
+      "helpText": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -264,31 +265,31 @@ export class SixRange {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The range's label. Alternatively, you can use the label slot."
+          "text": "The range's help text. Alternatively, you can use the help-text slot."
         },
-        "attribute": "label",
+        "attribute": "help-text",
         "reflect": false,
         "defaultValue": "''"
       },
-      "helpText": {
-        "type": "string",
+      "disabled": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The range's help text. Alternatively, you can use the help-text slot."
+          "text": "Set to true to disable the input."
         },
-        "attribute": "help-text",
+        "attribute": "disabled",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "false"
       },
-      "errorText": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -300,33 +301,33 @@ export class SixRange {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The input's error text. Alternatively, you can use the error-text slot."
+          "text": "The label text."
         },
-        "attribute": "error-text",
+        "attribute": "label",
         "reflect": false,
         "defaultValue": "''"
       },
-      "disabled": {
-        "type": "boolean",
+      "errorText": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to true to disable the input."
+          "text": "The error message shown, if `invalid` is set to true."
         },
-        "attribute": "disabled",
+        "attribute": "error-text",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "''"
       },
       "invalid": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -336,7 +337,7 @@ export class SixRange {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "This will be true when the control is in an invalid state. Validity in range inputs is determined by the message\nprovided by the `setCustomValidity` method."
+          "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
         },
         "attribute": "invalid",
         "reflect": true,
@@ -429,24 +430,6 @@ export class SixRange {
           "text": "A function used to format the tooltip's value."
         },
         "defaultValue": "(value: number) => value.toString()"
-      },
-      "errorOnBlur": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to display the error text on blur and not when typing"
-        },
-        "attribute": "error-on-blur",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
@@ -455,7 +438,6 @@ export class SixRange {
       "hasFocus": {},
       "hasHelpTextSlot": {},
       "hasLabelSlot": {},
-      "hasErrorTextSlot": {},
       "hasTooltip": {}
     };
   }
@@ -476,7 +458,8 @@ export class SixRange {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -496,7 +479,8 @@ export class SixRange {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -516,7 +500,8 @@ export class SixRange {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -533,10 +518,12 @@ export class SixRange {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -552,7 +539,8 @@ export class SixRange {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -561,41 +549,6 @@ export class SixRange {
           "text": "Removes focus from the input.",
           "tags": []
         }
-      },
-      "setCustomValidity": {
-        "complexType": {
-          "signature": "(message: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
-          "tags": []
-        }
-      },
-      "reset": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Resets the formcontrol",
-          "tags": []
-        }
       }
     };
   }
@@ -613,6 +566,12 @@ export class SixRange {
       }, {
         "propName": "value",
         "methodName": "handleValueChange"
+      }, {
+        "propName": "min",
+        "methodName": "handleValueChange"
+      }, {
+        "propName": "max",
+        "methodName": "handleValueChange"
       }];
   }
 }