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

package/dist/components/six-sidebar-item-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixSidebarItemGroup extends Components.SixSidebarItemGroup, HTMLElement {}
+export const SixSidebarItemGroup: {
+  prototype: SixSidebarItemGroup;
+  new (): SixSidebarItemGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,88 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { h as hasSlot } from './slot.js';
+import { d as defineCustomElement$3 } from './six-details2.js';
+import { d as defineCustomElement$2 } from './six-icon2.js';
+
+const sixSidebarItemGroupCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.six-sidebar-item-group--childless::part(content){padding:0 !important}.six-sidebar-item-group--subgroup::part(header){background-color:transparent !important}.six-sidebar-item-group__header-icon{margin-left:16px;transform:translate(0px, -3px)}.six-sidebar-details__header{display:flex}.six-sidebar-details__header-icon{margin-right:1em}";
+
+const SixSidebarItemGroup$1 = /*@__PURE__*/ proxyCustomElement(class SixSidebarItemGroup extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.provideSlot = (name) => {
+      if (this.summaryIconHasContent) {
+        return (h("div", { slot: name }, h("slot", { name: name })));
+      }
+      return (h("slot", { name: name, onSlotchange: () => {
+          this.summaryIconHasContent =
+            this.host.shadowRoot.querySelector(`slot[name="${name}"]`).assignedNodes().length > 0;
+        } }));
+    };
+    this.hasItems = false;
+    this.name = '';
+    this.icon = '';
+    this.value = '';
+    this.open = false;
+    this.summaryIcon = undefined;
+    this.summaryIconHasContent = undefined;
+  }
+  connectedCallback() {
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+  }
+  handleSlotChange() {
+    this.hasItems = hasSlot(this.host);
+  }
+  isSubgroup() {
+    return !!this.host.parentElement.closest('six-sidebar-item-group');
+  }
+  render() {
+    return (h("six-details", { class: {
+        'six-sidebar-item-group--childless': !this.hasItems,
+        'six-sidebar-item-group--subgroup': this.isSubgroup(),
+      }, inline: true, open: this.open, "summary-icon": this.summaryIcon, hasContent: this.hasItems }, h("div", { slot: "summary" }, h("div", { class: "six-sidebar-details__header" }, this.icon && h("six-icon", { class: "six-sidebar-details__header-icon" }, this.icon), this.name)), this.provideSlot('summary-icon'), h("slot", null)));
+  }
+  get host() { return this; }
+  static get style() { return sixSidebarItemGroupCss; }
+}, [1, "six-sidebar-item-group", {
+    "name": [1],
+    "icon": [1],
+    "value": [513],
+    "open": [516],
+    "summaryIcon": [1, "summary-icon"],
+    "hasItems": [32],
+    "summaryIconHasContent": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-sidebar-item-group", "six-details", "six-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-sidebar-item-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixSidebarItemGroup$1);
+      }
+      break;
+    case "six-details":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "six-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SixSidebarItemGroup = SixSidebarItemGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixSidebarItemGroup, defineCustomElement };
+
+//# sourceMappingURL=six-sidebar-item-group.js.map

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

@@ -0,0 +1 @@
+{"file":"six-sidebar-item-group.js","mappings":";;;;;AAAA,MAAM,sBAAsB,GAAG,6cAA6c;;MCe/dA,qBAAmB;;;;;IAqC9B,gBAAW,GAAG,CAAC,IAAY;MACzB,IAAI,IAAI,CAAC,qBAAqB,EAAE;QAC9B,QACE,WAAK,IAAI,EAAE,IAAI,IACb,YAAM,IAAI,EAAE,IAAI,GAAS,CACrB,EACN;OACH;MAED,QACE,YACE,IAAI,EAAE,IAAI,EACV,YAAY,EAAE;UACZ,IAAI,CAAC,qBAAqB;YACxB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAkB,cAAc,IAAI,IAAI,CAAC,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;SAC1G,GACK,EACR;KACH,CAAC;oBApDkB,KAAK;gBAGV,EAAE;gBAGF,EAAE;iBAGgB,EAAE;gBAEH,KAAK;;;;EAKrC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC1D;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACpC;EAED,UAAU;IACR,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;GACpE;EAwBD,MAAM;IACJ,QACE,mBACE,KAAK,EAAE;QACL,mCAAmC,EAAE,CAAC,IAAI,CAAC,QAAQ;QACnD,kCAAkC,EAAE,IAAI,CAAC,UAAU,EAAE;OACtD,EACD,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,WAAW,EAC9B,UAAU,EAAE,IAAI,CAAC,QAAQ,IAEzB,WAAK,IAAI,EAAC,SAAS,IACjB,WAAK,KAAK,EAAC,6BAA6B,IACrC,IAAI,CAAC,IAAI,IAAI,gBAAU,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,IAAI,CAAY,EACtF,IAAI,CAAC,IAAI,CACN,CACF,EACL,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EACjC,eAAQ,CACI,EACd;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixSidebarItemGroup"],"sources":["./src/components/six-sidebar-item-group/six-sidebar-item-group.scss?tag=six-sidebar-item-group&encapsulation=shadow","./src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.six-sidebar-item-group--childless::part(content) {\n  padding: 0 !important;\n}\n\n.six-sidebar-item-group--subgroup::part(header) {\n  background-color: transparent !important;\n}\n\n.six-sidebar-item-group__header-icon {\n  margin-left: 16px;\n  transform: translate(0px, -3px);\n}\n\n.six-sidebar-details__header {\n  display: flex;\n}\n\n.six-sidebar-details__header-icon {\n  margin-right: 1em;\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\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-item-group',\n  styleUrl: 'six-sidebar-item-group.scss',\n  shadow: true,\n})\nexport class SixSidebarItemGroup {\n  @Element() readonly host: HTMLSixSidebarItemGroupElement;\n\n  @State() hasItems = false;\n\n  /** Title of item group */\n  @Prop() name = '';\n\n  /** Icon of the group */\n  @Prop() icon = '';\n\n  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon: string;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  isSubgroup() {\n    return !!this.host.parentElement.closest('six-sidebar-item-group');\n  }\n\n  @State() summaryIconHasContent: boolean;\n\n  provideSlot = (name: string) => {\n    if (this.summaryIconHasContent) {\n      return (\n        <div slot={name}>\n          <slot name={name}></slot>\n        </div>\n      );\n    }\n\n    return (\n      <slot\n        name={name}\n        onSlotchange={() => {\n          this.summaryIconHasContent =\n            this.host.shadowRoot.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`).assignedNodes().length > 0;\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    return (\n      <six-details\n        class={{\n          'six-sidebar-item-group--childless': !this.hasItems,\n          'six-sidebar-item-group--subgroup': this.isSubgroup(),\n        }}\n        inline={true}\n        open={this.open}\n        summary-icon={this.summaryIcon}\n        hasContent={this.hasItems}\n      >\n        <div slot=\"summary\">\n          <div class=\"six-sidebar-details__header\">\n            {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n            {this.name}\n          </div>\n        </div>\n        {this.provideSlot('summary-icon')}\n        <slot />\n      </six-details>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-sidebar-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixSidebarItem extends Components.SixSidebarItem, HTMLElement {}
+export const SixSidebarItem: {
+  prototype: SixSidebarItem;
+  new (): SixSidebarItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sixSidebarItemCss = ":host{display:block}.sidebar-item{font-size:0.9rem;color:var(--six-sidebar-color);cursor:pointer;padding:8px 8px 16px 16px;font-family:var(--six-font-family)}.sidebar-item:hover:not(.sidebar-item--disabled){color:var(--six-color-web-rock-600)}.sidebar-item.sidebar-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.sidebar-item.sidebar-item--selected{font-weight:var(--six-font-weight-bold)}";
+
+const SixSidebarItem$1 = /*@__PURE__*/ proxyCustomElement(class SixSidebarItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.value = '';
+    this.selected = false;
+    this.disabled = false;
+  }
+  render() {
+    return (h("div", { class: {
+        'sidebar-item': true,
+        'sidebar-item--selected': this.selected,
+        'sidebar-item--disabled': this.disabled,
+      }, role: "menuitem", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", null)));
+  }
+  static get style() { return sixSidebarItemCss; }
+}, [1, "six-sidebar-item", {
+    "value": [513],
+    "selected": [516],
+    "disabled": [516]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-sidebar-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-sidebar-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixSidebarItem$1);
+      }
+      break;
+  } });
+}
+
+const SixSidebarItem = SixSidebarItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixSidebarItem, defineCustomElement };
+
+//# sourceMappingURL=six-sidebar-item.js.map

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

@@ -0,0 +1 @@
+{"file":"six-sidebar-item.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,6aAA6a;;MCc1bA,gBAAc;;;;;iBAEQ,EAAE;oBAGC,KAAK;oBAGL,KAAK;;EAEzC,MAAM;IACJ,QACE,WACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;QACvC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;OACxC,EACD,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,IAE/C,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixSidebarItem"],"sources":["./src/components/six-sidebar-item/six-sidebar-item.scss?tag=six-sidebar-item&encapsulation=shadow","./src/components/six-sidebar-item/six-sidebar-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.sidebar-item {\n  font-size: 0.9rem;\n  color: var(--six-sidebar-color);\n  cursor: pointer;\n  padding: 8px 8px 16px 16px;\n  font-family: var(--six-font-family);\n\n  &:hover:not(.sidebar-item--disabled) {\n    color: var(--six-color-web-rock-600);\n  }\n\n  &.sidebar-item--disabled {\n    outline: none;\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n  }\n\n  &.sidebar-item--selected {\n    font-weight: var(--six-font-weight-bold);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested displayed text of the item.\n */\n\n@Component({\n  tag: 'six-sidebar-item',\n  styleUrl: 'six-sidebar-item.scss',\n  shadow: true,\n})\nexport class SixSidebarItem {\n  /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to draw the item in a selected state. */\n  @Prop({ reflect: true }) selected = false;\n\n  /** Set to true to draw the sidebar item in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  render() {\n    return (\n      <div\n        class={{\n          'sidebar-item': true,\n          'sidebar-item--selected': this.selected,\n          'sidebar-item--disabled': this.disabled,\n        }}\n        role=\"menuitem\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-sidebar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixSidebar extends Components.SixSidebar, HTMLElement {}
+export const SixSidebar: {
+  prototype: SixSidebar;
+  new (): SixSidebar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-sidebar.js

@@ -0,0 +1,205 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { s as scrollIntoView } from './scroll.js';
+
+const sixSidebarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;height:100%}.sidebar__container{height:100%;overflow:auto}.sidebar__container.sidebar--open{box-shadow:var(--six-elevation-1dp)}.sidebar__container:not(.sidebar--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.sidebar--left{color:var(--six-sidebar-color);background-color:var(--six-sidebar-background-color);transition:var(--six-transition-medium) margin-left;background-size:300vw 70%;background-position:bottom;background-repeat:no-repeat}.sidebar--right{transition:var(--six-transition-medium) margin-right}.sidebar--open.sidebar--left{margin-right:2px}.sidebar--open.sidebar--right{margin-left:2px}";
+
+const isSidebarItemGroup = (node) => node.tagName.toLowerCase() === 'six-sidebar-item-group';
+const SixSidebar$1 = /*@__PURE__*/ proxyCustomElement(class SixSidebar extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.sixShow = createEvent(this, "six-sidebar-show", 7);
+    this.sixAfterShow = createEvent(this, "six-sidebar-after-show", 7);
+    this.sixHide = createEvent(this, "six-sidebar-hide", 7);
+    this.sixAfterHide = createEvent(this, "six-sidebar-after-hide", 7);
+    this.sixInitialFocus = createEvent(this, "six-sidebar-initial-focus", 7);
+    this.willShow = false;
+    this.willHide = false;
+    this.handleTransitionEnd = (event) => {
+      const target = event.target;
+      // Ensure we only emit one event when the target element is no longer visible
+      if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {
+        this.resetTransitionVariables();
+      }
+    };
+    this.closeSiblingDetailsOnShow = (event) => {
+      const clickedMenuItem = event.target;
+      scrollIntoView(clickedMenuItem, this.sidebar);
+      const closeAllSiblingsBySiblingProperty = (getSibling) => {
+        let node = clickedMenuItem;
+        while (getSibling(node) !== null) {
+          node = getSibling(node);
+          if (isSidebarItemGroup(node)) {
+            node.shadowRoot.querySelector('six-details').open = false;
+          }
+        }
+      };
+      // close all previous siblings
+      closeAllSiblingsBySiblingProperty((node) => node.previousElementSibling);
+      // close all further siblings
+      closeAllSiblingsBySiblingProperty((node) => node.nextElementSibling);
+    };
+    this.isVisible = false;
+    this.position = 'left';
+    this.open = false;
+    this.width = '16rem';
+    this.toggled = false;
+  }
+  handleOpenChange() {
+    this.open ? this.show() : this.hide();
+  }
+  componentWillLoad() {
+    // Show on init if open
+    if (this.open) {
+      void this.show();
+      // if the sidebar is open by default we need to manually reset the
+      // transition variables since there will be no transition event
+      this.resetTransitionVariables();
+    }
+  }
+  componentDidRender() {
+    this.setupTogglableMenuItems();
+  }
+  disconnectedCallback() {
+    this.sidebar.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);
+  }
+  setupTogglableMenuItems() {
+    if (!this.toggled) {
+      return;
+    }
+    this.markAllMenuItemsAsSelectableEmpty();
+    this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);
+  }
+  markAllMenuItemsAsSelectableEmpty() {
+    // when you have a toggled menu you also want to close other menu items when you click on an item without children
+    // nice benefit this item will then also be highlighted
+    const slot = this.sidebar.querySelector('slot');
+    const nodes = slot.assignedElements();
+    // since we don't just want to make the top level empty menuItems selectable in toggled mode,
+    // but also nested items we need to traverse the whole menu item tree
+    const menuItems = [];
+    while (nodes.length > 0) {
+      const node = nodes.pop();
+      // collect six-details in the current shadowDOM
+      const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');
+      menuItems.push(...menuItemsForCurrentNode);
+      // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too
+      const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);
+      nodes.push(...newItemGroups);
+    }
+    menuItems.forEach((details) => (details.selectableEmpty = true));
+  }
+  /** Toggles whether the sidebar should be shown or hidden */
+  async toggle() {
+    if (this.willShow || this.willHide) {
+      return;
+    }
+    if (this.open) {
+      await this.hide();
+    }
+    else {
+      await this.show();
+    }
+  }
+  /** Shows the sidebar */
+  async show() {
+    if (this.willShow) {
+      return;
+    }
+    const sixShow = this.sixShow.emit();
+    if (sixShow.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+    this.willShow = true;
+    this.isVisible = true;
+    this.open = true;
+  }
+  /** Hides the sidebar */
+  async hide() {
+    if (this.willHide) {
+      return;
+    }
+    const sixHide = this.sixHide.emit();
+    if (sixHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+    this.willHide = true;
+    this.open = false;
+  }
+  /** Allows to select a menu item programmatically by index */
+  async selectItemByIndex(index) {
+    const slot = this.sidebar.querySelector('slot');
+    const menuItemsOnRootLevel = slot
+      .assignedElements()
+      .map((el) => el.shadowRoot.querySelector('six-details'));
+    if (index < 0 || index > menuItemsOnRootLevel.length - 1) {
+      console.error(`Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`);
+      return;
+    }
+    await menuItemsOnRootLevel[index].show();
+  }
+  /** Allows to select a menu item programmatically by name */
+  async selectItemByName(value) {
+    const slot = this.sidebar.querySelector('slot');
+    const sidebarItemGroups = slot.assignedElements();
+    const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => (el === null || el === void 0 ? void 0 : el.name) === value);
+    const selectedItem = sidebarItemGroups[indexOfSelectedElement].shadowRoot.querySelector('six-details');
+    await selectedItem.show();
+  }
+  resetTransitionVariables() {
+    this.isVisible = this.open;
+    this.willShow = false;
+    this.willHide = false;
+    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+  }
+  render() {
+    return (h("host", { class: "six-sidebar" }, h("div", { class: {
+        sidebar__container: true,
+        'sidebar--visible': this.isVisible,
+        'sidebar--open': this.open,
+        'sidebar--left': this.position === 'left',
+        'sidebar--right': this.position === 'right',
+      }, style: {
+        width: this.width,
+        [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,
+      }, ref: (el) => (this.sidebar = el), "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd }, h("slot", null))));
+  }
+  static get watchers() { return {
+    "open": ["handleOpenChange"]
+  }; }
+  static get style() { return sixSidebarCss; }
+}, [1, "six-sidebar", {
+    "position": [1],
+    "open": [1540],
+    "width": [1],
+    "toggled": [4],
+    "isVisible": [32],
+    "toggle": [64],
+    "show": [64],
+    "hide": [64],
+    "selectItemByIndex": [64],
+    "selectItemByName": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-sidebar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-sidebar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixSidebar$1);
+      }
+      break;
+  } });
+}
+
+const SixSidebar = SixSidebar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixSidebar, defineCustomElement };
+
+//# sourceMappingURL=six-sidebar.js.map

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

@@ -0,0 +1 @@
+{"file":"six-sidebar.js","mappings":"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","names":["SixSidebar"],"sources":["./src/components/six-sidebar/six-sidebar.scss?tag=six-sidebar&encapsulation=shadow","./src/components/six-sidebar/six-sidebar.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: block;\n  height: 100%;\n}\n\n.sidebar {\n  &__container {\n    // scroll\n    height: 100%;\n    overflow: auto;\n\n    &.sidebar--open {\n      box-shadow: var(--six-elevation-1dp);\n    }\n\n    &:not(.sidebar--visible) {\n      @include hidden;\n    }\n  }\n\n  &--left {\n    color: var(--six-sidebar-color);\n    background-color: var(--six-sidebar-background-color);\n    // collapse\n    transition: var(--six-transition-medium) margin-left;\n    // six background\n    background-size: 300vw 70%;\n    background-position: bottom;\n    background-repeat: no-repeat;\n  }\n\n  &--right {\n    // collapse\n    transition: var(--six-transition-medium) margin-right;\n  }\n\n  // if the sidebar is embedded within six-root it cuts-off the border styling, for thus we need to guarante a margin\n  &--open {\n    &.sidebar--left {\n      margin-right: 2px;\n    }\n\n    &.sidebar--right {\n      margin-left: 2px;\n    }\n  }\n}\n","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) => 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  willShow = false;\n  willHide = false;\n\n  sidebar: HTMLElement;\n\n  @State() isVisible = false;\n\n  /** Sidebar position */\n  @Prop() position: 'left' | 'right' = 'left';\n\n  /** Indicates whether or not 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: string = '16rem';\n\n  /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/\n  @Prop() toggled: boolean = 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  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: CustomEvent<EmptyPayload>) => {\n    const clickedMenuItem = event.target as HTMLElement;\n    scrollIntoView(clickedMenuItem, this.sidebar);\n\n    const closeAllSiblingsBySiblingProperty = (getSibling: (node: Element) => Element) => {\n      let node: Element = clickedMenuItem;\n\n      while (getSibling(node) !== null) {\n        node = getSibling(node);\n        if (isSidebarItemGroup(node)) {\n          node.shadowRoot.querySelector('six-details').open = false;\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) {\n      return;\n    }\n\n    this.markAllMenuItemsAsSelectableEmpty();\n\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\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    const slot = this.sidebar.querySelector('slot');\n    const menuItemsOnRootLevel: HTMLSixDetailsElement[] = slot\n      .assignedElements()\n      .map((el) => el.shadowRoot.querySelector('six-details'));\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\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    const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => el?.name === value);\n    const selectedItem = sidebarItemGroups[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}

package/dist/components/six-spinner.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixSpinner extends Components.SixSpinner, HTMLElement {}
+export const SixSpinner: {
+  prototype: SixSpinner;
+  new (): SixSpinner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-spinner.js

@@ -0,0 +1,8 @@
+import { S as SixSpinner$1, d as defineCustomElement$1 } from './six-spinner2.js';
+
+const SixSpinner = SixSpinner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixSpinner, defineCustomElement };
+
+//# sourceMappingURL=six-spinner.js.map

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

@@ -0,0 +1 @@
+{"file":"six-spinner.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/six-spinner2.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sixSpinnerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--stroke-width:2px;display:inline-flex}.spinner{display:inline-block;width:1em;height:1em;border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.six-spinner{width:auto;height:auto;position:relative}.six-spinner .six-spinner__container{margin:0;transform:translateX(0)}.six-spinner .six-spinner__container svg{transform:translateX(0)}.six-spinner__container{position:relative;margin:0 auto;top:calc(50% - 20px);z-index:1}.six-spinner__container,.six-spinner__container svg{width:40px;height:40px;display:block;transform:translateX(40px)}.six-spinner path{stroke-dashoffset:70px;stroke-dasharray:70, 444;-webkit-animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite}@-webkit-keyframes six-spinner{to{stroke-dashoffset:-444}}@keyframes six-spinner{to{stroke-dashoffset:-444}}";
+
+const SixSpinner = /*@__PURE__*/ proxyCustomElement(class SixSpinner extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.six = false;
+  }
+  renderSIXLogo() {
+    return (h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { class: "six-spinner__container" }, h("svg", { viewBox: "0 0 40 40" }, h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", 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" })))));
+  }
+  renderSimple() {
+    return h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
+  }
+  render() {
+    return this.six ? this.renderSIXLogo() : this.renderSimple();
+  }
+  static get style() { return sixSpinnerCss; }
+}, [1, "six-spinner", {
+    "six": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixSpinner);
+      }
+      break;
+  } });
+}
+
+export { SixSpinner as S, defineCustomElement as d };
+
+//# sourceMappingURL=six-spinner2.js.map

package/dist/components/six-spinner2.js.map

@@ -0,0 +1 @@
+{"file":"six-spinner2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,2vCAA2vC;;MCepwC,UAAU;;;;;eAEP,KAAK;;EAEnB,aAAa;IACX,QACE,YAAM,KAAK,EAAC,aAAa,eAAW,MAAM,eAAW,QAAQ,IAC3D,WAAK,KAAK,EAAC,wBAAwB,IACjC,WAAK,OAAO,EAAC,WAAW,IACtB,YACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,EACtB,CAAC,EAAC,mHAAmH,GAC/G,CACJ,CACF,CACD,EACP;GACH;EAED,YAAY;IACV,OAAO,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,GAAG,CAAC;GACjF;EAED,MAAM;IACJ,OAAO,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;GAC9D;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/six-spinner/six-spinner.scss?tag=six-spinner&encapsulation=shadow","./src/components/six-spinner/six-spinner.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --stroke-width: 2px;\n\n  display: inline-flex;\n}\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 50%;\n  border: solid var(--stroke-width) var(--track-color);\n  border-top-color: var(--indicator-color);\n  border-right-color: var(--indicator-color);\n  animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n$color-six-spinner-background: rgba(255, 255, 255, 0.7);\n\n.six-spinner {\n  width: auto;\n  height: auto;\n  position: relative;\n\n  .six-spinner__container {\n    margin: 0;\n    transform: translateX(0);\n  }\n\n  .six-spinner__container svg {\n    transform: translateX(0);\n  }\n\n  &__container {\n    position: relative;\n    margin: 0 auto;\n    top: calc(50% - 20px);\n    z-index: 1;\n  }\n\n  &__container,\n  &__container svg {\n    width: 40px;\n    height: 40px;\n    display: block;\n    transform: translateX(40px);\n  }\n\n  path {\n    stroke-dashoffset: 70px;\n    stroke-dasharray: 70, 444;\n    -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n    animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n  }\n\n  @-webkit-keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n\n  @keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\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 * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */\n  @Prop() six = false;\n\n  renderSIXLogo() {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">\n          <svg viewBox=\"0 0 40 40\">\n            <path\n              fill=\"none\"\n              stroke=\"#de3919\"\n              stroke-width=\"5\"\n              stroke-linecap=\"round\"\n              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\"\n            ></path>\n          </svg>\n        </div>\n      </span>\n    );\n  }\n\n  renderSimple() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    return this.six ? this.renderSIXLogo() : this.renderSimple();\n  }\n}\n"],"version":3}

package/dist/components/six-stage-indicator.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixStageIndicator extends Components.SixStageIndicator, HTMLElement {}
+export const SixStageIndicator: {
+  prototype: SixStageIndicator;
+  new (): SixStageIndicator;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,8 @@
+import { S as SixStageIndicator$1, d as defineCustomElement$1 } from './six-stage-indicator2.js';
+
+const SixStageIndicator = SixStageIndicator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixStageIndicator, defineCustomElement };
+
+//# sourceMappingURL=six-stage-indicator.js.map

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

@@ -0,0 +1 @@
+{"file":"six-stage-indicator.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/six-stage-indicator2.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './six-icon2.js';
+
+const sixStageIndicatorCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:grid}.center-content{display:grid;align-self:center;justify-self:center;grid-gap:5px;grid-auto-flow:column}.align-item{margin:auto}.indicator,.indicator--acceptance,.indicator--etu,.indicator--dev,.indicator--itu{font-family:var(--six-font-family);font-size:14px;font-weight:var(--six-font-weight-bold);display:grid;align-content:center;width:100%;height:24px}.indicator--itu{background-color:var(--six-color-success-600);color:var(--six-color-web-rock-900)}.indicator--dev{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.indicator--etu{background-color:var(--six-color-action-600);color:var(--six-color-white)}.indicator--acceptance{background-color:var(--six-color-warning-800);color:var(--six-color-web-rock-900)}";
+
+const SixStageIndicator = /*@__PURE__*/ proxyCustomElement(class SixStageIndicator extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.stage = null;
+  }
+  render() {
+    return this.stage == null || this.stage == 'PROD' ? null : (h("div", { class: `indicator--${this.stage.toLowerCase()}` }, h("div", { class: "center-content" }, h("six-icon", { class: "align-item", size: "small" }, "error_outline"), h("span", { class: 'align-item' }, h("slot", null)))));
+  }
+  static get style() { return sixStageIndicatorCss; }
+}, [1, "six-stage-indicator", {
+    "stage": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-stage-indicator", "six-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-stage-indicator":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixStageIndicator);
+      }
+      break;
+    case "six-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { SixStageIndicator as S, defineCustomElement as d };
+
+//# sourceMappingURL=six-stage-indicator2.js.map

package/dist/components/six-stage-indicator2.js.map

@@ -0,0 +1 @@
+{"file":"six-stage-indicator2.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,+1BAA+1B;;MCS/2B,iBAAiB;;;;;iBAED,IAAI;;EAE/B,MAAM;IACJ,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI,IACtD,WAAK,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,IAClD,WAAK,KAAK,EAAC,gBAAgB,IACzB,gBAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,oBAE9B,EACX,YAAM,KAAK,EAAE,YAAY,IACvB,eAAQ,CACH,CACH,CACF,CACP,CAAC;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/six-stage-indicator/six-stage-indicator.scss?tag=six-stage-indicator&encapsulation=shadow","./src/components/six-stage-indicator/six-stage-indicator.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: grid;\n}\n\n.center-content {\n  display: grid;\n  align-self: center;\n  justify-self: center;\n  grid-gap: 5px;\n  grid-auto-flow: column;\n}\n\n.align-item {\n  margin: auto;\n}\n\n.indicator {\n  font-family: var(--six-font-family);\n  font-size: 14px;\n  font-weight: var(--six-font-weight-bold);\n  display: grid;\n  align-content: center;\n  width: 100%;\n  height: 24px;\n\n  &--itu {\n    @extend .indicator;\n    background-color: var(--six-color-success-600);\n    color: var(--six-color-web-rock-900);\n  }\n\n  &--dev {\n    @extend .indicator;\n    background-color: var(--six-color-web-rock-900);\n    color: var(--six-color-white);\n  }\n\n  &--etu {\n    @extend .indicator;\n    background-color: var(--six-color-action-600);\n    color: var(--six-color-white);\n  }\n\n  &--acceptance {\n    @extend .indicator;\n    background-color: var(--six-color-warning-800);\n    color: var(--six-color-web-rock-900);\n  }\n}\n","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}

package/dist/components/six-switch.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixSwitch extends Components.SixSwitch, HTMLElement {}
+export const SixSwitch: {
+  prototype: SixSwitch;
+  new (): SixSwitch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;