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

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

@@ -0,0 +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, 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"]}

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

@@ -1,167 +1,165 @@
-import { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';
-/**
- * @since 1.0
- * @status stable
- *
- * @slot header - Used to define the header component.
- * @slot main - Used to define the components in the main area.
- * @slot left-sidebar - Used to define the side bar on the left side.
- * @slot right-sidebar - Used to define the side bar on the right side.
- * @slot footer - Used to define the footer component.
- */
-export class SixRoot {
-  constructor() {
-    /** 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 (h("host", { class: "six-root" },
-      h("header", { part: "header" },
-        this.stage && h("six-stage-indicator", { stage: this.stage }, this.version),
-        h("slot", { name: "header" })),
-      h("nav", { class: "six-root__left-sidebar", part: "left-sidebar" },
-        h("set-attributes", { value: { open: !this.collapse } },
-          h("slot", { name: "left-sidebar" }))),
-      h("main", { part: "main" },
-        h("div", { class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" },
-          h("slot", { name: "main" })),
-        h("div", { class: "six-root__footer" },
-          h("slot", { name: "footer" }))),
-      h("nav", { class: "six-root__right-sidebar", part: "right-sidebar" },
-        h("slot", { name: "right-sidebar" }))));
-  }
-  static get is() { return "six-root"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-root.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-root.css"]
-  }; }
-  static get properties() { return {
-    "breakpoint": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Breakpoint for smaller screens when the right sidebar is collapsed by default."
-      },
-      "attribute": "breakpoint",
-      "reflect": false,
-      "defaultValue": "1024"
-    },
-    "padded": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines whether the content section should be padded"
-      },
-      "attribute": "padded",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "stage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "StageType",
-        "resolved": "\"ACCEPTANCE\" | \"DEV\" | \"ETU\" | \"ITU\" | \"PROD\"",
-        "references": {
-          "StageType": {
-            "location": "import",
-            "path": "../six-stage-indicator/six-stage-indicator"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the stage of the application"
-      },
-      "attribute": "stage",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "version": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the version of the application"
-      },
-      "attribute": "version",
-      "reflect": false,
-      "defaultValue": "''"
-    }
-  }; }
-  static get states() { return {
-    "collapse": {}
-  }; }
-  static get events() { return [{
-      "method": "collapsedEvent",
-      "name": "six-root-collapsed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when display size is updated."
-      },
-      "complexType": {
-        "original": "SixRootCollapsedPayload",
-        "resolved": "SixRootCollapsedPayload",
-        "references": {
-          "SixRootCollapsedPayload": {
-            "location": "local"
-          }
-        }
-      }
-    }]; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "collapse",
-      "methodName": "handleCollapsed"
-    }]; }
-}
+import { h } from '@stencil/core';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot header - Used to define the header component.
+ * @slot main - Used to define the components in the main area.
+ * @slot left-sidebar - Used to define the side bar on the left side.
+ * @slot right-sidebar - Used to define the side bar on the right side.
+ * @slot footer - Used to define the footer component.
+ */
+export class SixRoot {
+  constructor() {
+    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 (h("host", { class: "six-root" }, h("header", { part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { name: "header" })), h("nav", { class: "six-root__left-sidebar", part: "left-sidebar" }, h("set-attributes", { value: { open: !this.collapse } }, h("slot", { name: "left-sidebar" }))), h("main", { part: "main" }, h("div", { class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { name: "main" })), h("div", { class: "six-root__footer" }, h("slot", { name: "footer" }))), h("nav", { class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { name: "right-sidebar" }))));
+  }
+  static get is() { return "six-root"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-root.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-root.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "breakpoint": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Breakpoint for smaller screens when the right sidebar is collapsed by default."
+        },
+        "attribute": "breakpoint",
+        "reflect": false,
+        "defaultValue": "1024"
+      },
+      "padded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines whether the content section should be padded"
+        },
+        "attribute": "padded",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "stage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StageType",
+          "resolved": "\"ACCEPTANCE\" | \"DEV\" | \"ETU\" | \"ITU\" | \"PROD\"",
+          "references": {
+            "StageType": {
+              "location": "import",
+              "path": "../six-stage-indicator/six-stage-indicator"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the stage of the application"
+        },
+        "attribute": "stage",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "version": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the version of the application"
+        },
+        "attribute": "version",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "collapse": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "collapsedEvent",
+        "name": "six-root-collapsed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when display size is updated."
+        },
+        "complexType": {
+          "original": "SixRootCollapsedPayload",
+          "resolved": "SixRootCollapsedPayload",
+          "references": {
+            "SixRootCollapsedPayload": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/packages/ui-library/src/components/six-root/six-root.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "collapse",
+        "methodName": "handleCollapsed"
+      }];
+  }
+}
+//# sourceMappingURL=six-root.js.map

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

@@ -0,0 +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;;IAoBlB,mBAAc,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE;MAC7C,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;;;EAapB,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 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"]}