@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.db2b416

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
@@ -22,12 +22,8 @@ export class SixRange {
     this.inputId = `input-${++id}`;
     this.labelId = `input-label-${id}`;
     this.helpTextId = `input-help-text-${id}`;
-    this.customErrorText = '';
-    this.customValidation = false;
     this.errorTextId = `input-error-text-${id}`;
     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));
@@ -56,7 +52,6 @@ export class SixRange {
     };
     this.handleSlotChange = () => {
       this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-      this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
       this.hasLabelSlot = hasSlot(this.host, 'label');
     };
     this.handleTouchStart = () => {
@@ -65,31 +60,26 @@ export class SixRange {
     this.hasFocus = false;
     this.hasHelpTextSlot = false;
     this.hasLabelSlot = false;
-    this.hasErrorTextSlot = false;
     this.hasTooltip = false;
     this.name = '';
     this.value = 0;
     this.required = false;
-    this.label = '';
     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() {
     this.update();
-    if (this.nativeInput != null) {
-      this.invalid = !this.nativeInput.checkValidity();
-    }
   }
   connectedCallback() {
     var _a;
@@ -97,7 +87,6 @@ export class SixRange {
   }
   componentWillLoad() {
     this.update();
-    this.defaultValue = this.value;
     this.handleSlotChange();
   }
   componentDidLoad() {
@@ -107,12 +96,6 @@ export class SixRange {
     }
     this.update();
     this.resizeObserver = new ResizeObserver(() => this.update());
-    this.eventListeners.add(nativeInput, 'invalid', (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {
-        this.customErrorText = nativeInput.validationMessage;
-      }
-      event.preventDefault();
-    });
   }
   disconnectedCallback() {
     var _a;
@@ -129,27 +112,6 @@ export class SixRange {
     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 !== '';
-    if (this.nativeInput != null) {
-      this.nativeInput.setCustomValidity(message);
-      this.invalid = !this.nativeInput.checkValidity();
-    }
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    var _a;
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
-    this.invalid = false;
-  }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
-  }
   syncTooltip(min, max, value) {
     if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {
       const percent = Math.max(0, (value - min) / (max - min));
@@ -213,7 +175,7 @@ export class SixRange {
     }
   }
   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 != null ? 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,
@@ -285,13 +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": {
@@ -303,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": {
@@ -339,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",
@@ -375,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,
@@ -468,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"
       }
     };
   }
@@ -494,7 +438,6 @@ export class SixRange {
       "hasFocus": {},
       "hasHelpTextSlot": {},
       "hasLabelSlot": {},
-      "hasErrorTextSlot": {},
       "hasTooltip": {}
     };
   }
@@ -515,7 +458,8 @@ export class SixRange {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -535,7 +479,8 @@ export class SixRange {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -555,7 +500,8 @@ export class SixRange {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -572,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>"
@@ -591,7 +539,8 @@ export class SixRange {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -600,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": []
-        }
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"six-range.js","sourceRoot":"","sources":["../../../src/components/six-range/six-range.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n  tag: 'six-range',\n  styleUrl: 'six-range.scss',\n  shadow: true,\n})\nexport class SixRange {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private customErrorText = '';\n  private customValidation = false;\n  private errorTextId = `input-error-text-${id}`;\n  private eventListeners = new EventListeners();\n  private resizeObserver?: ResizeObserver;\n\n  private output?: HTMLElement;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() host!: HTMLSixRangeElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasTooltip = false;\n\n  /** The input's name attribute. */\n  @Prop() name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value = 0;\n\n  /** Set to true to make the input a required field. */\n  @Prop({ reflect: true }) required = false;\n\n  /** The range's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The range's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The input's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** Set to true to disable the input. */\n  @Prop() disabled = false;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message\n   * provided by the `setCustomValidity` method.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** The input's min attribute. */\n  @Prop() min = 0;\n\n  /** The input's max attribute. */\n  @Prop() max = 100;\n\n  /** The input's step attribute. */\n  @Prop() step = 1;\n\n  /** The preferred placedment of the tooltip. */\n  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n  /** A function used to format the tooltip's value. */\n  @Prop() tooltipFormatter = (value: number) => value.toString();\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** default value the slider will be reverted to when reset is executed */\n  private defaultValue = 0;\n\n  @Watch('label')\n  @Watch('errorText')\n  @Watch('helpText')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  handleValueChange() {\n    this.update();\n    if (this.nativeInput != null) {\n      this.invalid = !this.nativeInput.checkValidity();\n    }\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.update();\n    this.defaultValue = this.value;\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n    this.update();\n    this.resizeObserver = new ResizeObserver(() => this.update());\n    this.eventListeners.add(nativeInput, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n        this.customErrorText = nativeInput.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    if (this.nativeInput != null) {\n      this.nativeInput.setCustomValidity(message);\n      this.invalid = !this.nativeInput.checkValidity();\n    }\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.nativeInput?.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  private handleInput = () => {\n    if (this.nativeInput != null) {\n      this.update(parseFloat(this.nativeInput.value));\n    }\n    requestAnimationFrame(() => {\n      this.sixChange.emit();\n    });\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.hasTooltip = false;\n    this.sixBlur.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.unobserve(this.nativeInput);\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.hasTooltip = true;\n    this.sixFocus.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.observe(this.nativeInput);\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  };\n\n  private handleTouchStart = () => {\n    this.setFocus();\n  };\n\n  private displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  private syncTooltip(min: number, max: number, value: number) {\n    if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n      const percent = Math.max(0, (value - min) / (max - min));\n      const inputWidth = this.nativeInput.offsetWidth;\n      const tooltipWidth = this.output.offsetWidth;\n      const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n      this.output.style.transform = `translateX(${x})`;\n      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n    }\n  }\n\n  private isFirefox() {\n    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n  }\n\n  private update(updateValue?: number) {\n    if (updateValue != null) {\n      this.value = updateValue;\n    }\n\n    const min = Number(this.min) ?? 0;\n    const max = Number(this.max) ?? 0;\n    let value;\n    const parsedValue = parseFloat(this.value as never);\n    if (isNaN(parsedValue)) {\n      value = this.getDefaultValue(min, max);\n    } else {\n      value = parsedValue;\n    }\n\n    if (this.nativeInput != null) {\n      // The value may have constraints, so we set the native control's\n      // value and sync it back to ensure it adheres to min, max, and step\n      // properly.\n      this.nativeInput.value = value.toString();\n      this.value = parseFloat(this.nativeInput.value);\n    } else {\n      this.value = value;\n    }\n    this.calculateColorRunnableTrack(min, max, this.value);\n    this.syncTooltip(min, max, this.value);\n  }\n\n  /**\n   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n   */\n  private getDefaultValue(min: number, max: number): number {\n    return max < min ? min : min + (max - min) / 2;\n  }\n\n  /**\n   * For Firefox this functionality is not needed because it is supported by standard CSS.\n   */\n  private calculateColorRunnableTrack(min: number, max: number, value: number) {\n    if (!this.isFirefox() && this.nativeInput != null) {\n      const percent = Math.ceil(((value - min) / (max - min)) * 100);\n      this.nativeInput.style.background =\n        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n        percent +\n        '%, var(--six-color-web-rock-300) ' +\n        percent +\n        '%)';\n    }\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size=\"medium\"\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText != null ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <div\n          part=\"base\"\n          class={{\n            range: true,\n\n            // States\n            'range--disabled': this.disabled,\n            'range--focused': this.hasFocus,\n            'range--tooltip-visible': this.hasTooltip,\n            'range--tooltip-top': this.tooltip === 'top',\n            'range--tooltip-bottom': this.tooltip === 'bottom',\n          }}\n          onTouchStart={this.handleTouchStart}\n        >\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            type=\"range\"\n            class=\"range__control\"\n            name={this.name}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          {this.tooltip !== 'none' && (\n            <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n              {this.tooltipFormatter(this.value)}\n            </output>\n          )}\n        </div>\n      </FormControl>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-range.js","sourceRoot":"","sources":["../../../src/components/six-range/six-range.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n  tag: 'six-range',\n  styleUrl: 'six-range.scss',\n  shadow: true,\n})\nexport class SixRange {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private eventListeners = new EventListeners();\n  private resizeObserver?: ResizeObserver;\n\n  private output?: HTMLElement;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() host!: HTMLSixRangeElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasTooltip = false;\n\n  /** The input's name attribute. */\n  @Prop() name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value = 0;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The range's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the input. */\n  @Prop() disabled = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText = '';\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The input's min attribute. */\n  @Prop() min = 0;\n\n  /** The input's max attribute. */\n  @Prop() max = 100;\n\n  /** The input's step attribute. */\n  @Prop() step = 1;\n\n  /** The preferred placedment of the tooltip. */\n  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n  /** A function used to format the tooltip's value. */\n  @Prop() tooltipFormatter = (value: number) => value.toString();\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('label')\n  @Watch('errorText')\n  @Watch('helpText')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  handleValueChange() {\n    this.update();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.update();\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n    this.update();\n    this.resizeObserver = new ResizeObserver(() => this.update());\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleInput = () => {\n    if (this.nativeInput != null) {\n      this.update(parseFloat(this.nativeInput.value));\n    }\n    requestAnimationFrame(() => {\n      this.sixChange.emit();\n    });\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.hasTooltip = false;\n    this.sixBlur.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.unobserve(this.nativeInput);\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.hasTooltip = true;\n    this.sixFocus.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.observe(this.nativeInput);\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  };\n\n  private handleTouchStart = () => {\n    this.setFocus();\n  };\n\n  private syncTooltip(min: number, max: number, value: number) {\n    if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n      const percent = Math.max(0, (value - min) / (max - min));\n      const inputWidth = this.nativeInput.offsetWidth;\n      const tooltipWidth = this.output.offsetWidth;\n      const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n      this.output.style.transform = `translateX(${x})`;\n      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n    }\n  }\n\n  private isFirefox() {\n    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n  }\n\n  private update(updateValue?: number) {\n    if (updateValue != null) {\n      this.value = updateValue;\n    }\n\n    const min = Number(this.min) ?? 0;\n    const max = Number(this.max) ?? 0;\n    let value;\n    const parsedValue = parseFloat(this.value as never);\n    if (isNaN(parsedValue)) {\n      value = this.getDefaultValue(min, max);\n    } else {\n      value = parsedValue;\n    }\n\n    if (this.nativeInput != null) {\n      // The value may have constraints, so we set the native control's\n      // value and sync it back to ensure it adheres to min, max, and step\n      // properly.\n      this.nativeInput.value = value.toString();\n      this.value = parseFloat(this.nativeInput.value);\n    } else {\n      this.value = value;\n    }\n    this.calculateColorRunnableTrack(min, max, this.value);\n    this.syncTooltip(min, max, this.value);\n  }\n\n  /**\n   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n   */\n  private getDefaultValue(min: number, max: number): number {\n    return max < min ? min : min + (max - min) / 2;\n  }\n\n  /**\n   * For Firefox this functionality is not needed because it is supported by standard CSS.\n   */\n  private calculateColorRunnableTrack(min: number, max: number, value: number) {\n    if (!this.isFirefox() && this.nativeInput != null) {\n      const percent = Math.ceil(((value - min) / (max - min)) * 100);\n      this.nativeInput.style.background =\n        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n        percent +\n        '%, var(--six-color-web-rock-300) ' +\n        percent +\n        '%)';\n    }\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size=\"medium\"\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            range: true,\n\n            // States\n            'range--disabled': this.disabled,\n            'range--focused': this.hasFocus,\n            'range--tooltip-visible': this.hasTooltip,\n            'range--tooltip-top': this.tooltip === 'top',\n            'range--tooltip-bottom': this.tooltip === 'bottom',\n          }}\n          onTouchStart={this.handleTouchStart}\n        >\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            type=\"range\"\n            class=\"range__control\"\n            name={this.name}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          {this.tooltip !== 'none' && (\n            <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n              {this.tooltipFormatter(this.value)}\n            </output>\n          )}\n        </div>\n      </FormControl>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,32 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixRange } from "../six-range";
+describe('six-range', () => {
+  it('renders', async () => {
+    global.ResizeObserver = jest.fn();
+    const page = await newSpecPage({
+      components: [SixRange],
+      html: `<six-range tooltip="none"></six-range>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-range tooltip="none">
+       <mock:shadow-root>
+        <div class="form-control form-control--medium" part="form-control">
+         <label aria-hidden="true" class="form-control__label" htmlfor="input-1" id="input-label-1" part="label">
+          <slot name="label"></slot>
+         </label>
+         <div class="form-control__input">
+          <div class="range" part="base">
+           <input class="range__control" max="100" min="0" part="input" step="1" type="range" value="0" style="background: -webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) 0%, var(--six-color-web-rock-300) 0%);">
+          </div>
+         </div>
+         <div aria-hidden="true" class="form-control__error-text" id="input-error-text-1" part="error-text"></div>
+          <div aria-hidden="true" class="form-control__help-text" id="input-help-text-1" part="help-text">
+           <slot name="help-text"></slot>
+          </div>
+        </div>
+       </mock:shadow-root>
+      </six-range>
+    `);
+  });
+});
+//# sourceMappingURL=six-range.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-range.spec.js","sourceRoot":"","sources":["../../../../src/components/six-range/test/six-range.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,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAElC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,wCAAwC;KAC/C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixRange } from '../six-range';\n\ndescribe('six-range', () => {\n  it('renders', async () => {\n    global.ResizeObserver = jest.fn();\n\n    const page = await newSpecPage({\n      components: [SixRange],\n      html: `<six-range tooltip=\"none\"></six-range>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-range tooltip=\"none\">\n       <mock:shadow-root>\n        <div class=\"form-control form-control--medium\" part=\"form-control\">\n         <label aria-hidden=\"true\" class=\"form-control__label\" htmlfor=\"input-1\" id=\"input-label-1\" part=\"label\">\n          <slot name=\"label\"></slot>\n         </label>\n         <div class=\"form-control__input\">\n          <div class=\"range\" part=\"base\">\n           <input class=\"range__control\" max=\"100\" min=\"0\" part=\"input\" step=\"1\" type=\"range\" value=\"0\" style=\"background: -webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) 0%, var(--six-color-web-rock-300) 0%);\">\n          </div>\n         </div>\n         <div aria-hidden=\"true\" class=\"form-control__error-text\" id=\"input-error-text-1\" part=\"error-text\"></div>\n          <div aria-hidden=\"true\" class=\"form-control__help-text\" id=\"input-help-text-1\" part=\"help-text\">\n           <slot name=\"help-text\"></slot>\n          </div>\n        </div>\n       </mock:shadow-root>\n      </six-range>\n    `);\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 1.0
  * @status stable
@@ -92,7 +92,8 @@ export class SixRoot {
           "references": {
             "StageType": {
               "location": "import",
-              "path": "../six-stage-indicator/six-stage-indicator"
+              "path": "../six-stage-indicator/six-stage-indicator",
+              "id": "src/components/six-stage-indicator/six-stage-indicator.tsx::StageType"
             }
           }
         },
@@ -148,7 +149,8 @@ export class SixRoot {
           "references": {
             "SixRootCollapsedPayload": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-root/six-root.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-root/six-root.tsx",
+              "id": "src/components/six-root/six-root.tsx::SixRootCollapsedPayload"
             }
           }
         }

package/dist/collection/components/six-root/six-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-root.js","sourceRoot":"","sources":["../../../src/components/six-root/six-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO/F;;;;;;;;;GASG;AAOH,MAAM,OAAO,OAAO;;IAoBV,mBAAc,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE;MACrD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;MACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;IAC1C,CAAC,CAAC,CAAC;sBAnBkB,IAAI;kBAGR,IAAI;iBAGM,IAAI;mBAGb,EAAE;oBAKA,KAAK;;EAQzB,eAAe,CAAC,SAAkB;IAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;EAC1C,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACzC,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;EACnC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,YAAM,KAAK,EAAC,UAAU;MACpB,cAAQ,IAAI,EAAC,QAAQ;QAClB,IAAI,CAAC,KAAK,IAAI,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB;QAC3F,YAAM,IAAI,EAAC,QAAQ,GAAG,CACf;MACT,WAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc;QACrD,sBAAgB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;UAC7C,YAAM,IAAI,EAAC,cAAc,GAAG,CACb,CACb;MACN,YAAM,IAAI,EAAC,MAAM;QACf,WAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW;UACvG,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB;QACN,WAAK,KAAK,EAAC,kBAAkB;UAC3B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;MACP,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe;QACvD,YAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\nexport interface SixRootCollapsedPayload {\n  collapsed: boolean;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n  tag: 'six-root',\n  styleUrl: 'six-root.scss',\n  shadow: true,\n})\nexport class SixRoot {\n  @Element() host!: HTMLSixRootElement;\n\n  /** Breakpoint for smaller screens when the right sidebar is collapsed by default. */\n  @Prop() breakpoint = 1024;\n\n  /** Defines whether the content section should be padded */\n  @Prop() padded = true;\n\n  /** Defines the stage of the application*/\n  @Prop() stage: StageType = null;\n\n  /** Defines the version of the application*/\n  @Prop() version = '';\n\n  /** Emitted when display size is updated. */\n  @Event({ eventName: 'six-root-collapsed' }) collapsedEvent!: EventEmitter<SixRootCollapsedPayload>;\n\n  @State() collapse = false;\n\n  private resizeObserver = new ResizeObserver(([host]) => {\n    const { width } = host.contentRect;\n    this.collapse = width < this.breakpoint;\n  });\n\n  @Watch('collapse')\n  handleCollapsed(collapsed: boolean) {\n    this.collapsedEvent.emit({ collapsed });\n  }\n\n  componentWillLoad() {\n    this.resizeObserver.observe(this.host);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    return (\n      <host class=\"six-root\">\n        <header part=\"header\">\n          {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n          <slot name=\"header\" />\n        </header>\n        <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n          <set-attributes value={{ open: !this.collapse }}>\n            <slot name=\"left-sidebar\" />\n          </set-attributes>\n        </nav>\n        <main part=\"main\">\n          <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n            <slot name=\"main\" />\n          </div>\n          <div class=\"six-root__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </main>\n        <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n          <slot name=\"right-sidebar\" />\n        </nav>\n      </host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-root.js","sourceRoot":"","sources":["../../../src/components/six-root/six-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO/F;;;;;;;;;GASG;AAOH,MAAM,OAAO,OAAO;;IAoBV,mBAAc,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE;MACrD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;MACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;IAC1C,CAAC,CAAC,CAAC;sBAnBkB,IAAI;kBAGR,IAAI;iBAGM,IAAI;mBAGb,EAAE;oBAKA,KAAK;;EAQzB,eAAe,CAAC,SAAkB;IAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;EAC1C,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACzC,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;EACnC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,YAAM,KAAK,EAAC,UAAU;MACpB,cAAQ,IAAI,EAAC,QAAQ;QAClB,IAAI,CAAC,KAAK,IAAI,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB;QAC3F,YAAM,IAAI,EAAC,QAAQ,GAAG,CACf;MACT,WAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc;QACrD,sBAAgB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;UAC7C,YAAM,IAAI,EAAC,cAAc,GAAG,CACb,CACb;MACN,YAAM,IAAI,EAAC,MAAM;QACf,WAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW;UACvG,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB;QACN,WAAK,KAAK,EAAC,kBAAkB;UAC3B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;MACP,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe;QACvD,YAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\nexport interface SixRootCollapsedPayload {\n  collapsed: boolean;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n  tag: 'six-root',\n  styleUrl: 'six-root.scss',\n  shadow: true,\n})\nexport class SixRoot {\n  @Element() host!: HTMLSixRootElement;\n\n  /** Breakpoint for smaller screens when the right sidebar is collapsed by default. */\n  @Prop() breakpoint = 1024;\n\n  /** Defines whether the content section should be padded */\n  @Prop() padded = true;\n\n  /** Defines the stage of the application*/\n  @Prop() stage: StageType = null;\n\n  /** Defines the version of the application*/\n  @Prop() version = '';\n\n  /** Emitted when display size is updated. */\n  @Event({ eventName: 'six-root-collapsed' }) collapsedEvent!: EventEmitter<SixRootCollapsedPayload>;\n\n  @State() collapse = false;\n\n  private resizeObserver = new ResizeObserver(([host]) => {\n    const { width } = host.contentRect;\n    this.collapse = width < this.breakpoint;\n  });\n\n  @Watch('collapse')\n  handleCollapsed(collapsed: boolean) {\n    this.collapsedEvent.emit({ collapsed });\n  }\n\n  componentWillLoad() {\n    this.resizeObserver.observe(this.host);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    return (\n      <host class=\"six-root\">\n        <header part=\"header\">\n          {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n          <slot name=\"header\" />\n        </header>\n        <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n          <set-attributes value={{ open: !this.collapse }}>\n            <slot name=\"left-sidebar\" />\n          </set-attributes>\n        </nav>\n        <main part=\"main\">\n          <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n            <slot name=\"main\" />\n          </div>\n          <div class=\"six-root__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </main>\n        <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n          <slot name=\"right-sidebar\" />\n        </nav>\n      </host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,43 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixRoot } from "../six-root";
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+describe('six-root', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixRoot],
+      html: `<six-root></six-root>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-root>
+        <mock:shadow-root>
+          <host class="six-root">
+            <header part="header">
+              <slot name="header"></slot>
+            </header>
+            <nav class="six-root__left-sidebar" part="left-sidebar">
+              <set-attributes>
+                <slot name="left-sidebar"></slot>
+              </set-attributes>
+            </nav>
+            <main part="main">
+              <div class="six-root__container six-root__container--padded" part="container">
+                <slot name="main"></slot>
+              </div>
+              <div class="six-root__footer">
+                <slot name="footer"></slot>
+              </div>
+            </main>
+            <nav class="six-root__right-sidebar" part="right-sidebar">
+              <slot name="right-sidebar"></slot>
+            </nav>
+          </host>
+        </mock:shadow-root>
+      </six-root>
+    `);
+  });
+});
+//# sourceMappingURL=six-root.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-root.spec.js","sourceRoot":"","sources":["../../../../src/components/six-root/test/six-root.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,CAAC;EAC1D,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;EAClB,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE;EACpB,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE;CACtB,CAAC,CAAC,CAAC;AAEJ,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;MACrB,IAAI,EAAE,uBAAuB;KAC9B,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;KA0B7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixRoot } from '../six-root';\n\nglobal.ResizeObserver = jest.fn().mockImplementation(() => ({\n  observe: jest.fn(),\n  unobserve: jest.fn(),\n  disconnect: jest.fn(),\n}));\n\ndescribe('six-root', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixRoot],\n      html: `<six-root></six-root>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-root>\n        <mock:shadow-root>\n          <host class=\"six-root\">\n            <header part=\"header\">\n              <slot name=\"header\"></slot>\n            </header>\n            <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n              <set-attributes>\n                <slot name=\"left-sidebar\"></slot>\n              </set-attributes>\n            </nav>\n            <main part=\"main\">\n              <div class=\"six-root__container six-root__container--padded\" part=\"container\">\n                <slot name=\"main\"></slot>\n              </div>\n              <div class=\"six-root__footer\">\n                <slot name=\"footer\"></slot>\n              </div>\n            </main>\n            <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n              <slot name=\"right-sidebar\"></slot>\n            </nav>\n          </host>\n        </mock:shadow-root>\n      </six-root>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-search-field/six-search-field.js

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';
-import { EventListeners } from '../../utils/event-listeners';
+import { h } from "@stencil/core";
+import { debounce, DEFAULT_DEBOUNCE_FAST } from "../../utils/execution-control";
+import { EventListeners } from "../../utils/event-listeners";
 /**
  * @since 1.0
  * @status stable
@@ -166,7 +166,8 @@ export class SixSearchField {
           "references": {
             "SixSearchFieldChangePayload": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-search-field/six-search-field.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-search-field/six-search-field.tsx",
+              "id": "src/components/six-search-field/six-search-field.tsx::SixSearchFieldChangePayload"
             }
           }
         }

package/dist/collection/components/six-search-field/six-search-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-search-field.js","sourceRoot":"","sources":["../../../src/components/six-search-field/six-search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAM7D;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;IAqBjB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;IAEtC,sBAAiB,GAAG,GAAG,EAAE;MAC/B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;QAC7B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;OACjE;IACH,CAAC,CAAC;;oBAtBkC,qBAAqB;oBAGrB,KAAK;iBAGR,EAAE;qBAGf,KAAK;;EAgBzB,iBAAiB;IACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;MAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;KACtC;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;MAAE,OAAO;IAEtC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/G,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY,EAAE,EAAE;MACrE,MAAM,aAAa,GAAG,KAAsB,CAAC;MAC7C,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;QACjC,mBAAmB;QACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;EAClC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,YAAY;MACrB,iBACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS;QAEzB,gBAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD;MACZ,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-search-field.js","sourceRoot":"","sources":["../../../src/components/six-search-field/six-search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAM7D;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;IAqBjB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;IAEtC,sBAAiB,GAAG,GAAG,EAAE;MAC/B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;QAC7B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;OACjE;IACH,CAAC,CAAC;;oBAtBkC,qBAAqB;oBAGrB,KAAK;iBAGR,EAAE;qBAGf,KAAK;;EAgBzB,iBAAiB;IACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;MAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;KACtC;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;MAAE,OAAO;IAEtC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/G,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY,EAAE,EAAE;MACrE,MAAM,aAAa,GAAG,KAAsB,CAAC;MAC7C,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;QACjC,mBAAmB;QACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;EAClC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,YAAY;MACrB,iBACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS;QAEzB,gBAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD;MACZ,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"]}