@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

package/dist/cjs/six-range.cjs.entry.js

@@ -2,208 +2,197 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-341df120.js');
-const formControl = require('./form-control-9e4dffd1.js');
-const slot = require('./slot-8abe833c.js');
-const eventListeners = require('./event-listeners-4a8d66d5.js');
+const index = require('./index-b3257a77.js');
+const formControl = require('./form-control-8e2ae807.js');
+const slot = require('./slot-ad537f24.js');
+const eventListeners = require('./event-listeners-74715e62.js');
 
 const sixRangeCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--thumb-size:14px;--tooltip-offset-y:10px;--track-color:var(--six-color-web-rock-900);--thumb-color:var(--six-color-web-rock-900);--track-height:3px;display:block}.range{position:relative}.range .range__control{-webkit-appearance:none;width:100%;height:var(--six-input-height-medium);background:transparent;line-height:var(--six-input-height-medium);vertical-align:middle}.range .range__control::-webkit-slider-runnable-track{width:100%;height:var(--track-height);border-radius:3px;border:none}.range .range__control::-webkit-slider-thumb{border:none;width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background-color:var(--thumb-color);-webkit-appearance:none;margin-top:calc(var(--thumb-size) / -2 + var(--track-height) / 2);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-webkit-slider-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-webkit-slider-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-webkit-slider-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control::-moz-focus-outer{border:0}.range .range__control::-moz-range-track{width:100%;height:var(--track-height);background-color:var(--six-progress-track-color);border-radius:3px;border:none}.range .range__control::-moz-range-progress{height:var(--track-height);border-radius:3px;background-color:var(--track-color);border:none}.range .range__control::-moz-range-thumb{border:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background-color:var(--thumb-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-moz-range-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-moz-range-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-moz-range-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control:focus{outline:none}.range .range__control:disabled::-webkit-slider-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range .range__control:disabled::-moz-range-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range__tooltip{position:absolute;z-index:var(--six-z-index-tooltip);left:1px;border-radius:var(--six-border-radius-medium);background-color:var(--six-color-web-rock-900);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-color-white);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-xx-small);transition:var(--six-transition-fast) opacity;pointer-events:none}.range__tooltip::after{content:\"\";position:absolute;width:0;height:0;left:50%;margin-left:calc(-1 * var(--six-tooltip-arrow-size))}.range--tooltip-visible .range__tooltip{opacity:1}.range--tooltip-top .range__tooltip{top:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-top .range__tooltip::after{border-top:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;top:100%}.range--tooltip-bottom .range__tooltip{bottom:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-bottom .range__tooltip::after{border-bottom:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;bottom:100%}";
 
-let id = 0;
-let SixRange = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixChange = index.createEvent(this, "six-range-change", 7);
-    this.sixBlur = index.createEvent(this, "six-range-blur", 7);
-    this.sixFocus = index.createEvent(this, "six-range-focus", 7);
-    this.inputId = `input-${++id}`;
-    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.EventListeners();
-    this.hasFocus = false;
-    this.hasHelpTextSlot = false;
-    this.hasLabelSlot = false;
-    this.hasErrorTextSlot = false;
-    this.hasTooltip = false;
-    /** The input's name attribute. */
-    this.name = '';
-    /** The range's label. Alternatively, you can use the label slot. */
-    this.label = '';
-    /** The range's help text. Alternatively, you can use the help-text slot. */
-    this.helpText = '';
-    /** The input's error text. Alternatively, you can use the error-text slot. */
-    this.errorText = '';
-    /** Set to true to disable the input. */
-    this.disabled = false;
-    /**
-     * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
-     * provided by the `setCustomValidity` method.
-     */
-    this.invalid = false;
-    /** The input's min attribute. */
-    this.min = 0;
-    /** The input's max attribute. */
-    this.max = 100;
-    /** The input's step attribute. */
-    this.step = 1;
-    /** The preferred placedment of the tooltip. */
-    this.tooltip = 'top';
-    /** A function used to format the tooltip's value. */
-    this.tooltipFormatter = (value) => value.toString();
-    /** Set to display the error text on blur and not when typing */
-    this.errorOnBlur = false;
-    /** default value the slider will be reverted to when reset is executed */
-    this.defaultValue = 0;
-  }
-  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;
-  }
-  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);
-  }
-  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.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();
-    });
-  }
-  disconnectedCallback() {
-    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
-    this.eventListeners.removeAll();
-  }
-  /** Sets focus on the input. */
-  async setFocus(options) {
-    this.input.focus(options);
-  }
-  /** Removes focus from the input. */
-  async removeFocus() {
-    this.input.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 = slot.hasSlot(this.host, 'help-text');
-    this.hasErrorTextSlot = slot.hasSlot(this.host, 'error-text');
-    this.hasLabelSlot = slot.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;
-      const tooltipWidth = this.output.offsetWidth;
-      const thumbSize = getComputedStyle(this.input).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`;
-    }
-  }
-  /**
-   * 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);
-      const percent = Math.ceil(((value - min) / (max - min)) * 100);
-      this.input.style.background =
-        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +
-          percent +
-          '%, var(--six-color-web-rock-300) ' +
-          percent +
-          '%)';
-    }
-  }
-  isFirefox() {
-    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-  }
-  render() {
-    return (index.h(formControl.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() }, index.h("div", { part: "base", class: {
-        range: true,
-        // States
-        'range--disabled': this.disabled,
-        'range--focused': this.hasFocus,
-        'range--tooltip-visible': this.hasTooltip,
-        'range--tooltip-top': this.tooltip === 'top',
-        'range--tooltip-bottom': this.tooltip === 'bottom',
-      }, onTouchStart: this.handleTouchStart }, index.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' && (index.h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "label": ["handleLabelChange"],
-    "errorText": ["handleLabelChange"],
-    "helpText": ["handleLabelChange"],
-    "value": ["handleValueChange"]
-  }; }
-};
+let id = 0;
+const SixRange = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixChange = index.createEvent(this, "six-range-change", 7);
+    this.sixBlur = index.createEvent(this, "six-range-blur", 7);
+    this.sixFocus = index.createEvent(this, "six-range-focus", 7);
+    this.inputId = `input-${++id}`;
+    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.EventListeners();
+    /** default value the slider will be reverted to when reset is executed */
+    this.defaultValue = 0;
+    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.helpText = '';
+    this.errorText = '';
+    this.disabled = false;
+    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;
+  }
+  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);
+  }
+  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.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();
+    });
+  }
+  disconnectedCallback() {
+    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    this.eventListeners.removeAll();
+  }
+  /** Sets focus on the input. */
+  async setFocus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the input. */
+  async removeFocus() {
+    this.input.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 = slot.hasSlot(this.host, 'help-text');
+    this.hasErrorTextSlot = slot.hasSlot(this.host, 'error-text');
+    this.hasLabelSlot = slot.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;
+      const tooltipWidth = this.output.offsetWidth;
+      const thumbSize = getComputedStyle(this.input).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`;
+    }
+  }
+  /**
+   * 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);
+      const percent = Math.ceil(((value - min) / (max - min)) * 100);
+      this.input.style.background =
+        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +
+          percent +
+          '%, var(--six-color-web-rock-300) ' +
+          percent +
+          '%)';
+    }
+  }
+  isFirefox() {
+    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+  }
+  render() {
+    return (index.h(formControl.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() }, index.h("div", { part: "base", class: {
+        range: true,
+        // States
+        'range--disabled': this.disabled,
+        'range--focused': this.hasFocus,
+        'range--tooltip-visible': this.hasTooltip,
+        'range--tooltip-top': this.tooltip === 'top',
+        'range--tooltip-bottom': this.tooltip === 'bottom',
+      }, onTouchStart: this.handleTouchStart }, index.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' && (index.h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "label": ["handleLabelChange"],
+    "errorText": ["handleLabelChange"],
+    "helpText": ["handleLabelChange"],
+    "value": ["handleValueChange"]
+  }; }
+};
 SixRange.style = sixRangeCss;
 
 exports.six_range = SixRange;
+
+//# sourceMappingURL=six-range.cjs.entry.js.map

package/dist/cjs/six-range.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-range.entry.cjs.js","mappings":"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","names":["EventListeners","hasSlot","h","FormControl"],"sources":["./src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","./src/components/six-range/six-range.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  --thumb-size: 14px;\n  --tooltip-offset-y: 10px;\n  --track-color: var(--six-color-web-rock-900);\n  --thumb-color: var(--six-color-web-rock-900);\n  --track-height: 3px;\n\n  display: block;\n}\n\n.range {\n  position: relative;\n\n  .range__control {\n    -webkit-appearance: none;\n    width: 100%;\n    height: var(--six-input-height-medium);\n    background: transparent;\n    line-height: var(--six-input-height-medium);\n    vertical-align: middle;\n\n    &::-webkit-slider-runnable-track {\n      width: 100%;\n      height: var(--track-height);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-webkit-slider-thumb {\n      border: none;\n      width: var(--thumb-size);\n      height: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      -webkit-appearance: none;\n      margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-webkit-slider-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  Firefox\n    &::-moz-focus-outer {\n      border: 0;\n    }\n\n    &::-moz-range-track {\n      width: 100%;\n      height: var(--track-height);\n      background-color: var(--six-progress-track-color);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-moz-range-progress {\n      height: var(--track-height);\n      border-radius: 3px;\n      background-color: var(--track-color);\n      border: none;\n    }\n\n    &::-moz-range-thumb {\n      border: none;\n      height: var(--thumb-size);\n      width: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-moz-range-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-moz-range-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-moz-range-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  States\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      &::-webkit-slider-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n\n      &::-moz-range-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n    }\n  }\n}\n\n// Tooltip\n.range__tooltip {\n  position: absolute;\n  z-index: var(--six-z-index-tooltip);\n  left: 1px;\n  border-radius: var(--six-border-radius-medium);\n  background-color: var(--six-color-web-rock-900);\n  font-family: var(--six-font-family);\n  font-size: var(--six-tooltip-font-size);\n  font-weight: var(--six-tooltip-font-weight);\n  line-height: var(--six-tooltip-line-height);\n  color: var(--six-color-white);\n  opacity: 0;\n  padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n  transition: var(--six-transition-fast) opacity;\n  pointer-events: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    left: 50%;\n    margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n  }\n}\n\n.range--tooltip-visible .range__tooltip {\n  opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n  top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    top: 100%;\n  }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n  bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    bottom: 100%;\n  }\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } 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  inputId = `input-${++id}`;\n  labelId = `input-label-${id}`;\n  helpTextId = `input-help-text-${id}`;\n  errorTextId = `input-error-text-${id}`;\n  resizeObserver: ResizeObserver;\n\n  output: HTMLElement;\n  input: HTMLInputElement;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\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: number;\n\n  /** Set to true to make the input a required field. */\n  @Prop({ reflect: true }) required: boolean;\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  handleValueChange() {\n    if (this.input) {\n      this.input.value = this.value as any;\n      this.calculateColorRunnableTrack();\n    }\n    // In rare cases, the watcher may be called before render so we need to make sure the input exists\n    this.invalid = this.input ? !this.input.checkValidity() : false;\n  }\n\n  connectedCallback() {\n    this.handleInput = this.handleInput.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n    this.handleTouchStart = this.handleTouchStart.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    if (this.value === undefined || this.value === null) this.value = this.min;\n    if (this.value < this.min) this.value = this.min;\n    if (this.value > this.max) this.value = this.max;\n    this.defaultValue = this.value;\n\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.syncTooltip();\n    this.calculateColorRunnableTrack();\n    this.resizeObserver = new ResizeObserver(() => this.syncTooltip());\n    this.eventListeners.add(this.input, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = this.input.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.input.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.input.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    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\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.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleInput() {\n    this.value = Number(this.input.value);\n    this.sixChange.emit();\n\n    requestAnimationFrame(() => this.syncTooltip());\n    requestAnimationFrame(() => this.calculateColorRunnableTrack());\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.hasTooltip = false;\n    this.sixBlur.emit();\n    this.resizeObserver.unobserve(this.input);\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.hasTooltip = true;\n    this.sixFocus.emit();\n    this.resizeObserver.observe(this.input);\n  }\n\n  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  handleTouchStart() {\n    this.setFocus();\n  }\n\n  displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  syncTooltip() {\n    if (this.tooltip !== 'none') {\n      const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));\n      const inputWidth = this.input.offsetWidth;\n      const tooltipWidth = this.output.offsetWidth;\n      const thumbSize = getComputedStyle(this.input).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  /**\n   * For Firefox this functionality is not needed because it is supported by standard CSS.\n   */\n  calculateColorRunnableTrack() {\n    if (!this.isFirefox()) {\n      const value = parseInt(this.input.value, 10);\n      const min = parseInt(this.input.min, 10);\n      const max = parseInt(this.input.max, 10);\n      const percent = Math.ceil(((value - min) / (max - min)) * 100);\n      this.input.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  isFirefox() {\n    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\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 ? 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.input = 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}

package/dist/cjs/six-root.cjs.entry.js

@@ -2,44 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-341df120.js');
+const index = require('./index-b3257a77.js');
 
 const sixRootCss = ":host{display:block;overflow:hidden;height:inherit}.six-root{display:grid;grid-template:auto 1fr auto/auto 1fr auto;height:100%}.six-root__container--padded{padding:var(--six-spacing-xxx-large)}.six-root__left-sidebar{height:100%;overflow:scroll;grid-column:1/2}.six-root__right-sidebar{height:100%;overflow:scroll;grid-column:3/4}.six-root nav{overflow:hidden}header{grid-column:1/4;position:sticky;top:0;z-index:var(--six-z-index-header);margin-right:2px}main{height:100%;display:flex;flex-direction:column;justify-content:space-between;grid-column:2/3;overflow:auto}footer{grid-column:1/4}";
 
-let SixRoot = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.collapsedEvent = index.createEvent(this, "six-root-collapsed", 7);
-    /** Breakpoint for smaller screens when the right sidebar is collapsed by default. */
-    this.breakpoint = 1024;
-    /** Defines whether the content section should be padded */
-    this.padded = true;
-    /** Defines the stage of the application*/
-    this.stage = null;
-    /** Defines the version of the application*/
-    this.version = '';
-    this.resizeObserver = new ResizeObserver(([host]) => {
-      const { width } = host.contentRect;
-      this.collapse = width < this.breakpoint;
-    });
-  }
-  handleCollapsed(collapsed) {
-    this.collapsedEvent.emit({ collapsed });
-  }
-  componentWillLoad() {
-    this.resizeObserver.observe(this.host);
-  }
-  disconnectedCallback() {
-    this.resizeObserver.disconnect();
-  }
-  render() {
-    return (index.h("host", { class: "six-root" }, index.h("header", { part: "header" }, this.stage && index.h("six-stage-indicator", { stage: this.stage }, this.version), index.h("slot", { name: "header" })), index.h("nav", { class: "six-root__left-sidebar", part: "left-sidebar" }, index.h("set-attributes", { value: { open: !this.collapse } }, index.h("slot", { name: "left-sidebar" }))), index.h("main", { part: "main" }, index.h("div", { class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, index.h("slot", { name: "main" })), index.h("div", { class: "six-root__footer" }, index.h("slot", { name: "footer" }))), index.h("nav", { class: "six-root__right-sidebar", part: "right-sidebar" }, index.h("slot", { name: "right-sidebar" }))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "collapse": ["handleCollapsed"]
-  }; }
-};
+const SixRoot = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.collapsedEvent = index.createEvent(this, "six-root-collapsed", 7);
+    this.resizeObserver = new ResizeObserver(([host]) => {
+      const { width } = host.contentRect;
+      this.collapse = width < this.breakpoint;
+    });
+    this.breakpoint = 1024;
+    this.padded = true;
+    this.stage = null;
+    this.version = '';
+    this.collapse = undefined;
+  }
+  handleCollapsed(collapsed) {
+    this.collapsedEvent.emit({ collapsed });
+  }
+  componentWillLoad() {
+    this.resizeObserver.observe(this.host);
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  render() {
+    return (index.h("host", { class: "six-root" }, index.h("header", { part: "header" }, this.stage && index.h("six-stage-indicator", { stage: this.stage }, this.version), index.h("slot", { name: "header" })), index.h("nav", { class: "six-root__left-sidebar", part: "left-sidebar" }, index.h("set-attributes", { value: { open: !this.collapse } }, index.h("slot", { name: "left-sidebar" }))), index.h("main", { part: "main" }, index.h("div", { class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, index.h("slot", { name: "main" })), index.h("div", { class: "six-root__footer" }, index.h("slot", { name: "footer" }))), index.h("nav", { class: "six-root__right-sidebar", part: "right-sidebar" }, index.h("slot", { name: "right-sidebar" }))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "collapse": ["handleCollapsed"]
+  }; }
+};
 SixRoot.style = sixRootCss;
 
 exports.six_root = SixRoot;
+
+//# sourceMappingURL=six-root.cjs.entry.js.map

package/dist/cjs/six-root.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-root.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,klBAAklB;;MCuBxlB,OAAO;;;;IAoBlB,mBAAc,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC;MACzC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;MACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;KACzC,CAAC,CAAC;sBAnBkB,IAAI;kBAGR,IAAI;iBAGM,IAAI;mBAGb,EAAE;;;EAapB,eAAe,CAAC,SAAkB;IAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;GACzC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACxC;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;GAClC;EAED,MAAM;IACJ,QACEA,kBAAM,KAAK,EAAC,UAAU,IACpBA,oBAAQ,IAAI,EAAC,QAAQ,IAClB,IAAI,CAAC,KAAK,IAAIA,iCAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB,EAC3FA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CACf,EACTA,iBAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc,IACrDA,4BAAgB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,IAC7CA,kBAAM,IAAI,EAAC,cAAc,GAAG,CACb,CACb,EACNA,kBAAM,IAAI,EAAC,MAAM,IACfA,iBAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW,IACvGA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EACNA,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACPA,iBAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe,IACvDA,kBAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,EACP;GACH;;;;;;;;;;","names":["h"],"sources":["./src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","./src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: block;\n  overflow: hidden;\n  height: inherit;\n}\n\n.six-root {\n  display: grid;\n  grid-template: auto 1fr auto / auto 1fr auto;\n  height: 100%;\n\n  &__container {\n    &--padded {\n      padding: var(--six-spacing-xxx-large);\n    }\n  }\n\n  &__left-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 1 / 2;\n  }\n\n  &__right-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 3 / 4;\n  }\n\n  nav {\n    overflow: hidden;\n  }\n}\n\nheader {\n  grid-column: 1 / 4;\n  position: sticky;\n  top: 0;\n  z-index: var(--six-z-index-header);\n  // border fix\n  margin-right: 2px;\n}\n\nmain {\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  grid-column: 2 / 3;\n  overflow: auto;\n}\n\nfooter {\n  grid-column: 1 / 4;\n}\n","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 side bar on the left side.\n * @slot right-sidebar - Used to define the side bar 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: boolean;\n\n  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}