@six-group/ui-library 0.0.0-insider.cd0cd0d → 0.0.0-insider.d82aaa2

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

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { scrollIntoView } from '../../utils/scroll';
+import { h } from "@stencil/core";
+import { scrollIntoView } from "../../utils/scroll";
 const isSidebarItemGroup = (node) => { var _a; return ((_a = node === null || node === void 0 ? void 0 : node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'six-sidebar-item-group'; };
 /**
  * @since 1.0
@@ -293,7 +293,8 @@ export class SixSidebar {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -313,7 +314,8 @@ export class SixSidebar {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -333,7 +335,8 @@ export class SixSidebar {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -353,7 +356,8 @@ export class SixSidebar {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -373,7 +377,8 @@ export class SixSidebar {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -387,7 +392,8 @@ export class SixSidebar {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -403,7 +409,8 @@ export class SixSidebar {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -419,7 +426,8 @@ export class SixSidebar {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -438,10 +446,12 @@ export class SixSidebar {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "HTMLSixDetailsElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLSixDetailsElement"
             }
           },
           "return": "Promise<void>"
@@ -460,10 +470,12 @@ export class SixSidebar {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "HTMLSixSidebarItemGroupElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLSixSidebarItemGroupElement"
             }
           },
           "return": "Promise<void>"

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

@@ -1 +1 @@
-{"version":3,"file":"six-sidebar.js","sourceRoot":"","sources":["../../../src/components/six-sidebar/six-sidebar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { scrollIntoView } from '../../utils/scroll';\n\nconst isSidebarItemGroup = (node?: Element | null): boolean =>\n  node?.tagName?.toLowerCase() === 'six-sidebar-item-group';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested side bar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar',\n  styleUrl: 'six-sidebar.scss',\n  shadow: true,\n})\nexport class SixSidebar {\n  private willShow = false;\n  private willHide = false;\n\n  private sidebar?: HTMLElement;\n\n  @State() isVisible = false;\n\n  /** Sidebar position */\n  @Prop() position: 'left' | 'right' = 'left';\n\n  /** Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Sidebar width */\n  @Prop() width = '16rem';\n\n  /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/\n  @Prop() toggled = false;\n\n  /** Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-sidebar-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the sidebar opens and all transitions are complete. */\n  @Event({ eventName: 'six-sidebar-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-sidebar-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the sidebar closes and all transitions are complete. */\n  @Event({ eventName: 'six-sidebar-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the sidebar, such as an input or button.\n   */\n  @Event({ eventName: 'six-sidebar-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {\n      this.resetTransitionVariables();\n    }\n  };\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      void this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  componentDidRender() {\n    this.setupTogglableMenuItems();\n  }\n\n  disconnectedCallback() {\n    this.sidebar?.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n  }\n\n  private closeSiblingDetailsOnShow = (event: Event) => {\n    const clickedMenuItem = event.target as HTMLElement;\n    if (this.sidebar != null) {\n      scrollIntoView(clickedMenuItem, this.sidebar);\n    }\n\n    const closeAllSiblingsBySiblingProperty = (\n      getSibling: (node: Element | null | undefined) => Element | null | undefined\n    ) => {\n      let node: Element | null | undefined = clickedMenuItem;\n      while (getSibling(node) != null) {\n        node = getSibling(node);\n        if (isSidebarItemGroup(node)) {\n          const detailsElement = node?.shadowRoot?.querySelector('six-details');\n          if (detailsElement != null) {\n            detailsElement.open = false;\n          }\n        }\n      }\n    };\n\n    // close all previous siblings\n    closeAllSiblingsBySiblingProperty((node) => node?.previousElementSibling);\n    // close all further siblings\n    closeAllSiblingsBySiblingProperty((node) => node?.nextElementSibling);\n  };\n\n  private setupTogglableMenuItems() {\n    if (!this.toggled || this.sidebar == null) return;\n    this.markAllMenuItemsAsSelectableEmpty();\n    this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n  }\n\n  private markAllMenuItemsAsSelectableEmpty() {\n    // when you have a toggled menu you also want to close other menu items when you click on an item without children\n    // nice benefit this item will then also be highlighted\n    const slot = this.sidebar?.querySelector('slot');\n    const nodes = slot?.assignedElements() || [];\n\n    // since we don't just want to make the top level empty menuItems selectable in toggled mode,\n    // but also nested items we need to traverse the whole menu item tree\n    const menuItems = [];\n    while (nodes.length > 0) {\n      const node = nodes.pop();\n      if (node?.shadowRoot == null) {\n        continue;\n      }\n\n      // collect six-details in the current shadowDOM\n      const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');\n      menuItems.push(...menuItemsForCurrentNode);\n\n      // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too\n      const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);\n      nodes.push(...newItemGroups);\n    }\n\n    menuItems.forEach((details) => (details.selectableEmpty = true));\n  }\n\n  /** Toggles whether the sidebar should be shown or hidden */\n  @Method()\n  async toggle() {\n    if (this.willShow || this.willHide) {\n      return;\n    }\n\n    if (this.open) {\n      await this.hide();\n    } else {\n      await this.show();\n    }\n  }\n\n  /** Shows the sidebar */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n  }\n\n  /** Hides the sidebar */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n  }\n\n  /** Allows to select a menu item programmatically by index */\n  @Method()\n  async selectItemByIndex(index: number) {\n    if (this.sidebar == null) return;\n\n    const slot = this.sidebar.querySelector('slot');\n    const menuItemsOnRootLevel: HTMLSixDetailsElement[] = (slot?.assignedElements() || []).flatMap((el) => {\n      const detailsElement = el.shadowRoot?.querySelector('six-details');\n      if (detailsElement == null) {\n        return [];\n      }\n      return [detailsElement];\n    });\n    if (index < 0 || index > menuItemsOnRootLevel.length - 1) {\n      console.error(\n        `Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`\n      );\n      return;\n    }\n    await menuItemsOnRootLevel[index].show();\n  }\n\n  /** Allows to select a menu item programmatically by name */\n  @Method()\n  async selectItemByName(value: string) {\n    const slot = this.sidebar?.querySelector('slot');\n    const sidebarItemGroups = slot?.assignedElements() as HTMLSixSidebarItemGroupElement[];\n    if (sidebarItemGroups == null) {\n      return;\n    }\n\n    const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => el?.name === value);\n    const selectedItem = sidebarItemGroups.at(indexOfSelectedElement)?.shadowRoot?.querySelector('six-details');\n    await selectedItem?.show();\n  }\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <host class=\"six-sidebar\">\n        <div\n          class={{\n            sidebar__container: true,\n            'sidebar--visible': this.isVisible,\n            'sidebar--open': this.open,\n            'sidebar--left': this.position === 'left',\n            'sidebar--right': this.position === 'right',\n          }}\n          style={{\n            width: this.width,\n            [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,\n          }}\n          ref={(el) => (this.sidebar = el)}\n          aria-hidden={this.open ? 'false' : 'true'}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <slot />\n        </div>\n      </host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-sidebar.js","sourceRoot":"","sources":["../../../src/components/six-sidebar/six-sidebar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { scrollIntoView } from '../../utils/scroll';\n\nconst isSidebarItemGroup = (node?: Element | null): boolean =>\n  node?.tagName?.toLowerCase() === 'six-sidebar-item-group';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested side bar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar',\n  styleUrl: 'six-sidebar.scss',\n  shadow: true,\n})\nexport class SixSidebar {\n  private willShow = false;\n  private willHide = false;\n\n  private sidebar?: HTMLElement;\n\n  @State() isVisible = false;\n\n  /** Sidebar position */\n  @Prop() position: 'left' | 'right' = 'left';\n\n  /** Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Sidebar width */\n  @Prop() width = '16rem';\n\n  /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/\n  @Prop() toggled = false;\n\n  /** Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-sidebar-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the sidebar opens and all transitions are complete. */\n  @Event({ eventName: 'six-sidebar-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-sidebar-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the sidebar closes and all transitions are complete. */\n  @Event({ eventName: 'six-sidebar-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the sidebar, such as an input or button.\n   */\n  @Event({ eventName: 'six-sidebar-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {\n      this.resetTransitionVariables();\n    }\n  };\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      void this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  componentDidRender() {\n    this.setupTogglableMenuItems();\n  }\n\n  disconnectedCallback() {\n    this.sidebar?.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n  }\n\n  private closeSiblingDetailsOnShow = (event: Event) => {\n    const clickedMenuItem = event.target as HTMLElement;\n    if (this.sidebar != null) {\n      scrollIntoView(clickedMenuItem, this.sidebar);\n    }\n\n    const closeAllSiblingsBySiblingProperty = (\n      getSibling: (node: Element | null | undefined) => Element | null | undefined\n    ) => {\n      let node: Element | null | undefined = clickedMenuItem;\n      while (getSibling(node) != null) {\n        node = getSibling(node);\n        if (isSidebarItemGroup(node)) {\n          const detailsElement = node?.shadowRoot?.querySelector('six-details');\n          if (detailsElement != null) {\n            detailsElement.open = false;\n          }\n        }\n      }\n    };\n\n    // close all previous siblings\n    closeAllSiblingsBySiblingProperty((node) => node?.previousElementSibling);\n    // close all further siblings\n    closeAllSiblingsBySiblingProperty((node) => node?.nextElementSibling);\n  };\n\n  private setupTogglableMenuItems() {\n    if (!this.toggled || this.sidebar == null) return;\n    this.markAllMenuItemsAsSelectableEmpty();\n    this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n  }\n\n  private markAllMenuItemsAsSelectableEmpty() {\n    // when you have a toggled menu you also want to close other menu items when you click on an item without children\n    // nice benefit this item will then also be highlighted\n    const slot = this.sidebar?.querySelector('slot');\n    const nodes = slot?.assignedElements() || [];\n\n    // since we don't just want to make the top level empty menuItems selectable in toggled mode,\n    // but also nested items we need to traverse the whole menu item tree\n    const menuItems = [];\n    while (nodes.length > 0) {\n      const node = nodes.pop();\n      if (node?.shadowRoot == null) {\n        continue;\n      }\n\n      // collect six-details in the current shadowDOM\n      const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');\n      menuItems.push(...menuItemsForCurrentNode);\n\n      // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too\n      const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);\n      nodes.push(...newItemGroups);\n    }\n\n    menuItems.forEach((details) => (details.selectableEmpty = true));\n  }\n\n  /** Toggles whether the sidebar should be shown or hidden */\n  @Method()\n  async toggle() {\n    if (this.willShow || this.willHide) {\n      return;\n    }\n\n    if (this.open) {\n      await this.hide();\n    } else {\n      await this.show();\n    }\n  }\n\n  /** Shows the sidebar */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n  }\n\n  /** Hides the sidebar */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n  }\n\n  /** Allows to select a menu item programmatically by index */\n  @Method()\n  async selectItemByIndex(index: number) {\n    if (this.sidebar == null) return;\n\n    const slot = this.sidebar.querySelector('slot');\n    const menuItemsOnRootLevel: HTMLSixDetailsElement[] = (slot?.assignedElements() || []).flatMap((el) => {\n      const detailsElement = el.shadowRoot?.querySelector('six-details');\n      if (detailsElement == null) {\n        return [];\n      }\n      return [detailsElement];\n    });\n    if (index < 0 || index > menuItemsOnRootLevel.length - 1) {\n      console.error(\n        `Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`\n      );\n      return;\n    }\n    await menuItemsOnRootLevel[index].show();\n  }\n\n  /** Allows to select a menu item programmatically by name */\n  @Method()\n  async selectItemByName(value: string) {\n    const slot = this.sidebar?.querySelector('slot');\n    const sidebarItemGroups = slot?.assignedElements() as HTMLSixSidebarItemGroupElement[];\n    if (sidebarItemGroups == null) {\n      return;\n    }\n\n    const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => el?.name === value);\n    const selectedItem = sidebarItemGroups.at(indexOfSelectedElement)?.shadowRoot?.querySelector('six-details');\n    await selectedItem?.show();\n  }\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <host class=\"six-sidebar\">\n        <div\n          class={{\n            sidebar__container: true,\n            'sidebar--visible': this.isVisible,\n            'sidebar--open': this.open,\n            'sidebar--left': this.position === 'left',\n            'sidebar--right': this.position === 'right',\n          }}\n          style={{\n            width: this.width,\n            [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,\n          }}\n          ref={(el) => (this.sidebar = el)}\n          aria-hidden={this.open ? 'false' : 'true'}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <slot />\n        </div>\n      </host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixSidebar } from "../six-sidebar";
+describe('six-sidebar', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixSidebar],
+      html: `<six-sidebar></six-sidebar>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-sidebar>
+        <mock:shadow-root>
+          <host class="six-sidebar">
+            <div aria-hidden="true" class="sidebar--left sidebar__container" style="width: 16rem; margin-left: calc(1rem - 16rem);">
+              <slot></slot>
+            </div>
+          </host>
+        </mock:shadow-root>
+      </six-sidebar>
+    `);
+  });
+});
+//# sourceMappingURL=six-sidebar.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar.spec.js","sourceRoot":"","sources":["../../../../src/components/six-sidebar/test/six-sidebar.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,6BAA6B;KACpC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixSidebar } from '../six-sidebar';\n\ndescribe('six-sidebar', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebar],\n      html: `<six-sidebar></six-sidebar>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-sidebar>\n        <mock:shadow-root>\n          <host class=\"six-sidebar\">\n            <div aria-hidden=\"true\" class=\"sidebar--left sidebar__container\" style=\"width: 16rem; margin-left: calc(1rem - 16rem);\">\n              <slot></slot>\n            </div>\n          </host>\n        </mock:shadow-root>\n      </six-sidebar>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-sidebar-item/six-sidebar-item.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 1.0
  * @status stable

package/dist/collection/components/six-sidebar-item/test/six-sidebar-item.spec.js

@@ -0,0 +1,50 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixSidebarItem } from "../six-sidebar-item";
+describe('six-sidebar-item', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixSidebarItem],
+      html: `<six-sidebar-item></six-sidebar-item>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-sidebar-item value="">
+        <mock:shadow-root>
+          <div aria-disabled="false" aria-selected="false" class="sidebar-item" role="menuitem">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </six-sidebar-item>
+    `);
+  });
+  it('render disabled attribute', async () => {
+    const page = await newSpecPage({
+      components: [SixSidebarItem],
+      html: `<six-sidebar-item disabled></six-sidebar-item>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-sidebar-item disabled="" value="">
+        <mock:shadow-root>
+          <div aria-disabled="true" aria-selected="false" class="sidebar-item sidebar-item--disabled" role="menuitem">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </six-sidebar-item>
+    `);
+  });
+  it('render selected attribute', async () => {
+    const page = await newSpecPage({
+      components: [SixSidebarItem],
+      html: `<six-sidebar-item selected></six-sidebar-item>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-sidebar-item selected="" value="">
+        <mock:shadow-root>
+          <div aria-disabled="false" aria-selected="true" class="sidebar-item sidebar-item--selected" role="menuitem">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </six-sidebar-item>
+    `);
+  });
+});
+//# sourceMappingURL=six-sidebar-item.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar-item.spec.js","sourceRoot":"","sources":["../../../../src/components/six-sidebar-item/test/six-sidebar-item.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,uCAAuC;KAC9C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,gDAAgD;KACvD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,gDAAgD;KACvD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixSidebarItem } from '../six-sidebar-item';\n\ndescribe('six-sidebar-item', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItem],\n      html: `<six-sidebar-item></six-sidebar-item>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item value=\"\">\n        <mock:shadow-root>\n          <div aria-disabled=\"false\" aria-selected=\"false\" class=\"sidebar-item\" role=\"menuitem\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </six-sidebar-item>\n    `);\n  });\n\n  it('render disabled attribute', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItem],\n      html: `<six-sidebar-item disabled></six-sidebar-item>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item disabled=\"\" value=\"\">\n        <mock:shadow-root>\n          <div aria-disabled=\"true\" aria-selected=\"false\" class=\"sidebar-item sidebar-item--disabled\" role=\"menuitem\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </six-sidebar-item>\n    `);\n  });\n\n  it('render selected attribute', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItem],\n      html: `<six-sidebar-item selected></six-sidebar-item>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item selected=\"\" value=\"\">\n        <mock:shadow-root>\n          <div aria-disabled=\"false\" aria-selected=\"true\" class=\"sidebar-item sidebar-item--selected\" role=\"menuitem\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </six-sidebar-item>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-sidebar-item-group/six-sidebar-item-group.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { hasSlot } from '../../utils/slot';
+import { h } from "@stencil/core";
+import { hasSlot } from "../../utils/slot";
 /**
  * @since 1.0
  * @status stable

package/dist/collection/components/six-sidebar-item-group/test/six-sidebar-item-group.spec.js

@@ -0,0 +1,53 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixSidebarItemGroup } from "../six-sidebar-item-group";
+import { SixSidebarItem } from "../../six-sidebar-item/six-sidebar-item";
+describe('six-sidebar-item-group', () => {
+  it('renders empty group', async () => {
+    const page = await newSpecPage({
+      components: [SixSidebarItemGroup],
+      html: `<six-sidebar-item-group></six-sidebar-item-group>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-sidebar-item-group value="">
+        <mock:shadow-root>
+          <six-details class="six-sidebar-item-group--childless" inline="">
+            <div slot="summary">
+              <div class="six-sidebar-details__header"></div>
+            </div>
+            <slot name="summary-icon"></slot>
+            <slot></slot>
+          </six-details>
+        </mock:shadow-root>
+      </six-sidebar-item-group>
+    `);
+  });
+  it('renders group with item', async () => {
+    const page = await newSpecPage({
+      components: [SixSidebarItemGroup, SixSidebarItem],
+      html: `<six-sidebar-item-group><six-sidebar-item value="data">Data</six-sidebar-item></six-sidebar-item-group>`,
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <six-sidebar-item-group value="">
+        <mock:shadow-root>
+          <six-details class="six-sidebar-item-group--childless" inline="">
+            <div slot="summary">
+              <div class="six-sidebar-details__header"></div>
+            </div>
+            <slot name="summary-icon"></slot>
+            <slot></slot>
+          </six-details>
+        </mock:shadow-root>
+        <six-sidebar-item value="data">
+          <mock:shadow-root>
+            <div aria-disabled="false" aria-selected="false" class="sidebar-item" role="menuitem">
+              <slot></slot>
+            </div>
+          </mock:shadow-root>
+          Data
+        </six-sidebar-item>
+      </six-sidebar-item-group>
+    `);
+  });
+});
+//# sourceMappingURL=six-sidebar-item-group.spec.js.map

package/dist/collection/components/six-sidebar-item-group/test/six-sidebar-item-group.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar-item-group.spec.js","sourceRoot":"","sources":["../../../../src/components/six-sidebar-item-group/test/six-sidebar-item-group.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAEzE,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;EACtC,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;IACnC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,CAAC;MACjC,IAAI,EAAE,mDAAmD;KAC1D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;IACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,EAAE,cAAc,CAAC;MACjD,IAAI,EAAE,yGAAyG;KAChH,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;KAoB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixSidebarItemGroup } from '../six-sidebar-item-group';\nimport { SixSidebarItem } from '../../six-sidebar-item/six-sidebar-item';\n\ndescribe('six-sidebar-item-group', () => {\n  it('renders empty group', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItemGroup],\n      html: `<six-sidebar-item-group></six-sidebar-item-group>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item-group value=\"\">\n        <mock:shadow-root>\n          <six-details class=\"six-sidebar-item-group--childless\" inline=\"\">\n            <div slot=\"summary\">\n              <div class=\"six-sidebar-details__header\"></div>\n            </div>\n            <slot name=\"summary-icon\"></slot>\n            <slot></slot>\n          </six-details>\n        </mock:shadow-root>\n      </six-sidebar-item-group>\n    `);\n  });\n\n  it('renders group with item', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItemGroup, SixSidebarItem],\n      html: `<six-sidebar-item-group><six-sidebar-item value=\"data\">Data</six-sidebar-item></six-sidebar-item-group>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item-group value=\"\">\n        <mock:shadow-root>\n          <six-details class=\"six-sidebar-item-group--childless\" inline=\"\">\n            <div slot=\"summary\">\n              <div class=\"six-sidebar-details__header\"></div>\n            </div>\n            <slot name=\"summary-icon\"></slot>\n            <slot></slot>\n          </six-details>\n        </mock:shadow-root>\n        <six-sidebar-item value=\"data\">\n          <mock:shadow-root>\n            <div aria-disabled=\"false\" aria-selected=\"false\" class=\"sidebar-item\" role=\"menuitem\">\n              <slot></slot>\n            </div>\n          </mock:shadow-root>\n          Data\n        </six-sidebar-item>\n      </six-sidebar-item-group>\n    `);\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 1.0
  * @status stable

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

@@ -0,0 +1,37 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixSpinner } from "../six-spinner";
+describe('six-spinner', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixSpinner],
+      html: `<six-spinner></six-spinner>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-spinner>
+        <mock:shadow-root>
+          <span aria-busy="true" aria-live="polite" class="spinner" part="base"></span>
+        </mock:shadow-root>
+      </six-spinner>
+    `);
+  });
+  it('renders as SIX logo when set', async () => {
+    const page = await newSpecPage({
+      components: [SixSpinner],
+      html: `<six-spinner six="true"></six-spinner>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-spinner six="true">
+        <mock:shadow-root>
+          <span aria-busy="true" aria-live="polite" class="six-spinner">
+            <div class="six-spinner__container">
+              <svg viewBox="0 0 40 40">
+                <path d="M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" fill="none" stroke="#de3919" stroke-linecap="round" stroke-width="5"></path>
+              </svg>
+            </div>
+          </span>
+        </mock:shadow-root>
+      </six-spinner>
+    `);
+  });
+});
+//# sourceMappingURL=six-spinner.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-spinner.spec.js","sourceRoot":"","sources":["../../../../src/components/six-spinner/test/six-spinner.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,6BAA6B;KACpC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,wCAAwC;KAC/C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixSpinner } from '../six-spinner';\n\ndescribe('six-spinner', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixSpinner],\n      html: `<six-spinner></six-spinner>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-spinner>\n        <mock:shadow-root>\n          <span aria-busy=\"true\" aria-live=\"polite\" class=\"spinner\" part=\"base\"></span>\n        </mock:shadow-root>\n      </six-spinner>\n    `);\n  });\n\n  it('renders as SIX logo when set', async () => {\n    const page = await newSpecPage({\n      components: [SixSpinner],\n      html: `<six-spinner six=\"true\"></six-spinner>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-spinner six=\"true\">\n        <mock:shadow-root>\n          <span aria-busy=\"true\" aria-live=\"polite\" class=\"six-spinner\">\n            <div class=\"six-spinner__container\">\n              <svg viewBox=\"0 0 40 40\">\n                <path d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\" fill=\"none\" stroke=\"#de3919\" stroke-linecap=\"round\" stroke-width=\"5\"></path>\n              </svg>\n            </div>\n          </span>\n        </mock:shadow-root>\n      </six-spinner>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-stage-indicator/six-stage-indicator.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class SixStageIndicator {
   constructor() {
     this.stage = null;
@@ -29,7 +29,8 @@ export class SixStageIndicator {
           "references": {
             "StageType": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-stage-indicator/six-stage-indicator.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-stage-indicator/six-stage-indicator.tsx",
+              "id": "src/components/six-stage-indicator/six-stage-indicator.tsx::StageType"
             }
           }
         },

package/dist/collection/components/six-stage-indicator/six-stage-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-stage-indicator.js","sourceRoot":"","sources":["../../../src/components/six-stage-indicator/six-stage-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,iBAAiB;;iBAED,IAAI;;EAE/B,MAAM;IACJ,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACzD,WAAK,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE;MAClD,WAAK,KAAK,EAAC,gBAAgB;QACzB,gBAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,oBAE9B;QACX,YAAM,KAAK,EAAE,YAAY;UACvB,eAAQ,CACH,CACH,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nexport type StageType = 'DEV' | 'ITU' | 'ETU' | 'ACCEPTANCE' | 'PROD' | null;\n\n@Component({\n  tag: 'six-stage-indicator',\n  styleUrl: 'six-stage-indicator.scss',\n  shadow: true,\n})\nexport class SixStageIndicator {\n  /** The indicators value attribute */\n  @Prop() stage: StageType = null;\n\n  render() {\n    return this.stage == null || this.stage == 'PROD' ? null : (\n      <div class={`indicator--${this.stage.toLowerCase()}`}>\n        <div class=\"center-content\">\n          <six-icon class=\"align-item\" size=\"small\">\n            error_outline\n          </six-icon>\n          <span class={'align-item'}>\n            <slot />\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-stage-indicator.js","sourceRoot":"","sources":["../../../src/components/six-stage-indicator/six-stage-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,iBAAiB;;iBAED,IAAI;;EAE/B,MAAM;IACJ,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACzD,WAAK,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE;MAClD,WAAK,KAAK,EAAC,gBAAgB;QACzB,gBAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,oBAE9B;QACX,YAAM,KAAK,EAAE,YAAY;UACvB,eAAQ,CACH,CACH,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nexport type StageType = 'DEV' | 'ITU' | 'ETU' | 'ACCEPTANCE' | 'PROD' | null;\n\n@Component({\n  tag: 'six-stage-indicator',\n  styleUrl: 'six-stage-indicator.scss',\n  shadow: true,\n})\nexport class SixStageIndicator {\n  /** The indicators value attribute */\n  @Prop() stage: StageType = null;\n\n  render() {\n    return this.stage == null || this.stage == 'PROD' ? null : (\n      <div class={`indicator--${this.stage.toLowerCase()}`}>\n        <div class=\"center-content\">\n          <six-icon class=\"align-item\" size=\"small\">\n            error_outline\n          </six-icon>\n          <span class={'align-item'}>\n            <slot />\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-stage-indicator/test/six-stage-indicator.spec.js

@@ -0,0 +1,117 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixStageIndicator } from "../six-stage-indicator";
+describe('six-stage-indicator', () => {
+  it('default', async () => {
+    const page = await newSpecPage({
+      components: [SixStageIndicator],
+      html: `<six-stage-indicator></six-stage-indicator>`,
+    });
+    expect(page.root).toEqualHtml(`
+       <six-stage-indicator>
+        <mock:shadow-root>
+        </mock:shadow-root>
+      </six-stage-indicator>
+    `);
+  });
+  it('prod', async () => {
+    const page = await newSpecPage({
+      components: [SixStageIndicator],
+      html: `<six-stage-indicator stage="PROD"></six-stage-indicator>`,
+    });
+    expect(page.root).toEqualHtml(`
+       <six-stage-indicator stage="PROD">
+        <mock:shadow-root>
+        </mock:shadow-root>
+      </six-stage-indicator>
+    `);
+  });
+  it('itu', async () => {
+    const page = await newSpecPage({
+      components: [SixStageIndicator],
+      html: `<six-stage-indicator stage="ITU"></six-stage-indicator>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-stage-indicator stage="ITU">
+        <mock:shadow-root>
+        <div class=indicator--itu>
+          <div class='center-content'>
+            <six-icon class='align-item' size="small">
+              error_outline
+            </six-icon>
+            <span class='align-item'>
+              <slot />
+            </span>
+          </div>
+        </div>
+        </mock:shadow-root>
+      </six-stage-indicator>
+    `);
+  });
+  it('etu', async () => {
+    const page = await newSpecPage({
+      components: [SixStageIndicator],
+      html: `<six-stage-indicator stage="ETU"></six-stage-indicator>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-stage-indicator stage="ETU">
+        <mock:shadow-root>
+        <div class=indicator--etu>
+          <div class='center-content'>
+            <six-icon class='align-item' size="small">
+              error_outline
+            </six-icon>
+            <span class='align-item'>
+              <slot />
+            </span>
+          </div>
+        </div>
+        </mock:shadow-root>
+      </six-stage-indicator>
+    `);
+  });
+  it('dev', async () => {
+    const page = await newSpecPage({
+      components: [SixStageIndicator],
+      html: `<six-stage-indicator stage="DEV"></six-stage-indicator>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-stage-indicator stage="DEV">
+        <mock:shadow-root>
+        <div class=indicator--dev>
+          <div class='center-content'>
+            <six-icon class='align-item' size="small">
+              error_outline
+            </six-icon>
+            <span class='align-item'>
+              <slot />
+            </span>
+          </div>
+        </div>
+        </mock:shadow-root>
+      </six-stage-indicator>
+    `);
+  });
+  it('acceptance', async () => {
+    const page = await newSpecPage({
+      components: [SixStageIndicator],
+      html: `<six-stage-indicator stage="ACCEPTANCE"></six-stage-indicator>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-stage-indicator stage="ACCEPTANCE">
+        <mock:shadow-root>
+        <div class=indicator--acceptance>
+          <div class='center-content'>
+            <six-icon class='align-item' size="small">
+              error_outline
+            </six-icon>
+            <span class='align-item'>
+              <slot />
+            </span>
+          </div>
+        </div>
+        </mock:shadow-root>
+      </six-stage-indicator>
+    `);
+  });
+});
+//# sourceMappingURL=six-stage-indicator.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-stage-indicator.spec.js","sourceRoot":"","sources":["../../../../src/components/six-stage-indicator/test/six-stage-indicator.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;EACnC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,6CAA6C;KACpD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;KAK7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE;IACpB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,0DAA0D;KACjE,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;KAK7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE;IACnB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE;IACnB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE;IACnB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE;IAC1B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,gEAAgE;KACvE,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixStageIndicator } from '../six-stage-indicator';\n\ndescribe('six-stage-indicator', () => {\n  it('default', async () => {\n    const page = await newSpecPage({\n      components: [SixStageIndicator],\n      html: `<six-stage-indicator></six-stage-indicator>`,\n    });\n    expect(page.root).toEqualHtml(`\n       <six-stage-indicator>\n        <mock:shadow-root>\n        </mock:shadow-root>\n      </six-stage-indicator>\n    `);\n  });\n\n  it('prod', async () => {\n    const page = await newSpecPage({\n      components: [SixStageIndicator],\n      html: `<six-stage-indicator stage=\"PROD\"></six-stage-indicator>`,\n    });\n    expect(page.root).toEqualHtml(`\n       <six-stage-indicator stage=\"PROD\">\n        <mock:shadow-root>\n        </mock:shadow-root>\n      </six-stage-indicator>\n    `);\n  });\n\n  it('itu', async () => {\n    const page = await newSpecPage({\n      components: [SixStageIndicator],\n      html: `<six-stage-indicator stage=\"ITU\"></six-stage-indicator>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-stage-indicator stage=\"ITU\">\n        <mock:shadow-root>\n        <div class=indicator--itu>\n          <div class='center-content'>\n            <six-icon class='align-item' size=\"small\">\n              error_outline\n            </six-icon>\n            <span class='align-item'>\n              <slot />\n            </span>\n          </div>\n        </div>\n        </mock:shadow-root>\n      </six-stage-indicator>\n    `);\n  });\n\n  it('etu', async () => {\n    const page = await newSpecPage({\n      components: [SixStageIndicator],\n      html: `<six-stage-indicator stage=\"ETU\"></six-stage-indicator>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-stage-indicator stage=\"ETU\">\n        <mock:shadow-root>\n        <div class=indicator--etu>\n          <div class='center-content'>\n            <six-icon class='align-item' size=\"small\">\n              error_outline\n            </six-icon>\n            <span class='align-item'>\n              <slot />\n            </span>\n          </div>\n        </div>\n        </mock:shadow-root>\n      </six-stage-indicator>\n    `);\n  });\n\n  it('dev', async () => {\n    const page = await newSpecPage({\n      components: [SixStageIndicator],\n      html: `<six-stage-indicator stage=\"DEV\"></six-stage-indicator>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-stage-indicator stage=\"DEV\">\n        <mock:shadow-root>\n        <div class=indicator--dev>\n          <div class='center-content'>\n            <six-icon class='align-item' size=\"small\">\n              error_outline\n            </six-icon>\n            <span class='align-item'>\n              <slot />\n            </span>\n          </div>\n        </div>\n        </mock:shadow-root>\n      </six-stage-indicator>\n    `);\n  });\n\n  it('acceptance', async () => {\n    const page = await newSpecPage({\n      components: [SixStageIndicator],\n      html: `<six-stage-indicator stage=\"ACCEPTANCE\"></six-stage-indicator>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-stage-indicator stage=\"ACCEPTANCE\">\n        <mock:shadow-root>\n        <div class=indicator--acceptance>\n          <div class='center-content'>\n            <six-icon class='align-item' size=\"small\">\n              error_outline\n            </six-icon>\n            <span class='align-item'>\n              <slot />\n            </span>\n          </div>\n        </div>\n        </mock:shadow-root>\n      </six-stage-indicator>\n    `);\n  });\n});\n"]}