@six-group/ui-library 0.0.0-insider.e5360cd → 0.0.0-insider.e8b5a11

package/dist/cjs/six-sidebar-item-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-sidebar-item-group.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,sBAAsB,GAAG,qhBAAqhB;;MCeviB,mBAAmB;;;IAsCtB,gBAAW,GAAG,CAAC,IAAY;MACjC,IAAI,IAAI,CAAC,qBAAqB,EAAE;QAC9B,QACEA,iBAAK,IAAI,EAAE,IAAI,IACbA,kBAAM,IAAI,EAAE,IAAI,GAAS,CACrB,EACN;OACH;MAED,QACEA,kBACE,IAAI,EAAE,IAAI,EACV,YAAY,EAAE;;UACZ,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAkB,cAAc,IAAI,IAAI,CAAC,CAAC;UAC1F,IAAI,IAAI,IAAI,IAAI,EAAE;YAChB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;WAC9D;SACF,GACK,EACR;KACH,CAAC;oBAvDkB,KAAK;gBAGV,EAAE;gBAGF,EAAE;iBAGgB,EAAE;gBAGH,KAAK;;iCAKJ,KAAK;;EAEtC,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;EAEO,gBAAgB;IACtB,IAAI,CAAC,QAAQ,GAAGC,YAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACpC;EAEO,UAAU;;IAChB,OAAO,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,wBAAwB,CAAC,KAAI,IAAI,CAAC;GAC3E;EAwBD,MAAM;IACJ,QACED,yBACE,KAAK,EAAE;QACL,wBAAwB,EAAE,IAAI;QAC9B,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,IAEzBA,iBAAK,IAAI,EAAC,SAAS,IACjBA,iBAAK,KAAK,EAAC,6BAA6B,IACrC,IAAI,CAAC,IAAI,IAAIA,sBAAU,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,IAAI,CAAY,EACtF,IAAI,CAAC,IAAI,CACN,CACF,EACL,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EACjCA,qBAAQ,CACI,EACd;GACH;;;;;;;","names":["h","hasSlot"],"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 {\n  --horizontal-padding: var(--six-spacing-x-large);\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 sidebar [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  /** Indicates whether the sidebar is shown */\n  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon?: string;\n\n  @State() summaryIconHasContent = false;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  private isSubgroup() {\n    return this.host.parentElement?.closest('six-sidebar-item-group') != null;\n  }\n\n  private 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          const slot = this.host.shadowRoot?.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`);\n          if (slot != null) {\n            this.summaryIconHasContent = slot.assignedNodes().length > 0;\n          }\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    return (\n      <six-details\n        class={{\n          'six-sidebar-item-group': true,\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}
+{"file":"six-sidebar-item-group.entry.cjs.js","mappings":"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","names":["h","hasSlot"],"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 {\n  --horizontal-padding: var(--six-spacing-x-large);\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  overflow-wrap: anywhere;\n}\n\n.six-sidebar-details__header-icon {\n  margin-right: 1em;\n}\n\n.six-sidebar-details__link {\n  text-decoration: none;\n  display: block;\n  color: inherit;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: calc(-1 * var(--six-focus-ring-offset));\n  }\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 sidebar [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  /** Indicates whether the sidebar is shown */\n  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon?: string;\n\n  @State() summaryIconHasContent = false;\n\n  /**\n   * Provide if the item should be rendered as anchor tag.\n   * Note, that the href is added automatically when using routerLink in Angular.\n   */\n  @Prop({ reflect: true }) href: string | undefined;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  private isSubgroup() {\n    return this.host.parentElement?.closest('six-sidebar-item-group') != null;\n  }\n\n  private renderAsHref(): boolean {\n    return this.href != null && !this.hasItems;\n  }\n\n  private 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          const slot = this.host.shadowRoot?.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`);\n          if (slot != null) {\n            this.summaryIconHasContent = slot.assignedNodes().length > 0;\n          }\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    const element = (\n      <six-details\n        class={{\n          'six-sidebar-item-group': true,\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        tabindex={this.renderAsHref() ? -1 : undefined}\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    if (this.renderAsHref()) {\n      return (\n        <a class=\"six-sidebar-details__link\" href={this.href}>\n          {element}\n        </a>\n      );\n    } else {\n      return element;\n    }\n  }\n}\n"],"version":3}

package/dist/cjs/six-sidebar-item-group.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar-item-group.entry.cjs.js","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 {\n  --horizontal-padding: var(--six-spacing-x-large);\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  overflow-wrap: anywhere;\n}\n\n.six-sidebar-details__header-icon {\n  margin-right: 1em;\n}\n\n.six-sidebar-details__link {\n  text-decoration: none;\n  display: block;\n  color: inherit;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: calc(-1 * var(--six-focus-ring-offset));\n  }\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 sidebar [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  /** Indicates whether the sidebar is shown */\n  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon?: string;\n\n  @State() summaryIconHasContent = false;\n\n  /**\n   * Provide if the item should be rendered as anchor tag.\n   * Note, that the href is added automatically when using routerLink in Angular.\n   */\n  @Prop({ reflect: true }) href: string | undefined;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  private isSubgroup() {\n    return this.host.parentElement?.closest('six-sidebar-item-group') != null;\n  }\n\n  private renderAsHref(): boolean {\n    return this.href != null && !this.hasItems;\n  }\n\n  private 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          const slot = this.host.shadowRoot?.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`);\n          if (slot != null) {\n            this.summaryIconHasContent = slot.assignedNodes().length > 0;\n          }\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    const element = (\n      <six-details\n        class={{\n          'six-sidebar-item-group': true,\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        tabindex={this.renderAsHref() ? -1 : undefined}\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    if (this.renderAsHref()) {\n      return (\n        <a class=\"six-sidebar-details__link\" href={this.href}>\n          {element}\n        </a>\n      );\n    } else {\n      return element;\n    }\n  }\n}\n"],"names":["h","hasSlot"],"mappings":"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"}

package/dist/cjs/six-sidebar-item.cjs.entry.js

@@ -1,28 +1,31 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-B_stPhJp.js');
 
-const index = require('./index-900437fc.js');
-
-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 sixSidebarItemCss = ":host{display:block}a{text-decoration:none;display:block}.sidebar-item{padding:8px 8px 16px 16px;font-size:0.9rem;color:var(--six-sidebar-color);cursor:pointer;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)}.sidebar-item:focus{outline:none}.sidebar-item:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}";
 
 const SixSidebarItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.value = '';
-    this.selected = false;
-    this.disabled = false;
-  }
-  render() {
-    return (index.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' }, index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */
+        this.value = '';
+        /** Set to true to draw the item in a selected state. */
+        this.selected = false;
+        /** Set to true to draw the sidebar item in a disabled state. */
+        this.disabled = false;
+    }
+    render() {
+        const Tag = this.href != null ? 'a' : 'div';
+        return (index.h(Tag, { key: '736f21a96467e588533da0c2c9cb248f6bde0ee4', class: {
+                'sidebar-item': true,
+                'sidebar-item--selected': this.selected,
+                'sidebar-item--disabled': this.disabled,
+            }, role: "menuitem", href: this.href, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("slot", { key: '8348dff85296fdbabc3b180b3338072031c201ee' })));
+    }
 };
 SixSidebarItem.style = sixSidebarItemCss;
 
 exports.six_sidebar_item = SixSidebarItem;
+//# sourceMappingURL=six-sidebar-item.entry.cjs.js.map
 
 //# sourceMappingURL=six-sidebar-item.cjs.entry.js.map

package/dist/cjs/six-sidebar-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-sidebar-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,6aAA6a;;MCc1b,cAAc;;;iBAEQ,EAAE;oBAGC,KAAK;oBAGL,KAAK;;EAEzC,MAAM;IACJ,QACEA,iBACE,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/CA,qBAAa,CACT,EACN;GACH;;;;;;","names":["h"],"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}
+{"file":"six-sidebar-item.entry.cjs.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,ylBAAylB;;MCctmB,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAGV,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA0B1C;IAlBC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,KAAK;QAC3C,QACEA,OAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;gBACvC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;aACxC,EACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACA,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,EAE/CA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;","names":["h"],"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\na {\n  text-decoration: none;\n  display: block;\n}\n\n.sidebar-item {\n  padding: 8px 8px 16px 16px;\n  font-size: 0.9rem;\n  color: var(--six-sidebar-color);\n  cursor: pointer;\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  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\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  /**\n   * Provide if the item should be rendered as anchor tag.\n   * Note, that the href is added automatically when using routerLink in Angular.\n   */\n  @Prop({ reflect: true }) href: string | undefined;\n\n  render() {\n    const Tag = this.href != null ? 'a' : 'div';\n    return (\n      <Tag\n        class={{\n          'sidebar-item': true,\n          'sidebar-item--selected': this.selected,\n          'sidebar-item--disabled': this.disabled,\n        }}\n        role=\"menuitem\"\n        href={this.href}\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </Tag>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/six-sidebar-item.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar-item.entry.cjs.js","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\na {\n  text-decoration: none;\n  display: block;\n}\n\n.sidebar-item {\n  padding: 8px 8px 16px 16px;\n  font-size: 0.9rem;\n  color: var(--six-sidebar-color);\n  cursor: pointer;\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  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\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  /**\n   * Provide if the item should be rendered as anchor tag.\n   * Note, that the href is added automatically when using routerLink in Angular.\n   */\n  @Prop({ reflect: true }) href: string | undefined;\n\n  render() {\n    const Tag = this.href != null ? 'a' : 'div';\n    return (\n      <Tag\n        class={{\n          'sidebar-item': true,\n          'sidebar-item--selected': this.selected,\n          'sidebar-item--disabled': this.disabled,\n        }}\n        role=\"menuitem\"\n        href={this.href}\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </Tag>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,ylBAAylB;;MCctmB,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAGV,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA0B1C;IAlBC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,KAAK;QAC3C,QACEA,OAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;gBACvC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;aACxC,EACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACA,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,EAE/CA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;"}

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

@@ -1,201 +1,204 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-B_stPhJp.js');
+var scroll = require('./scroll-BQR9FxnJ.js');
 
-const index = require('./index-900437fc.js');
-const scroll = require('./scroll-2c4200dc.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 sixSidebarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;height:100%}.sidebar__container{height:100%;overflow:auto}.sidebar__container.sidebar--open{border-right:1px solid var(--six-color-web-rock-300)}.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) => { 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'; };
 const SixSidebar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixShow = index.createEvent(this, "six-sidebar-show", 7);
-    this.sixAfterShow = index.createEvent(this, "six-sidebar-after-show", 7);
-    this.sixHide = index.createEvent(this, "six-sidebar-hide", 7);
-    this.sixAfterHide = index.createEvent(this, "six-sidebar-after-hide", 7);
-    this.sixInitialFocus = index.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;
-      if (this.sidebar != null) {
-        scroll.scrollIntoView(clickedMenuItem, this.sidebar);
-      }
-      const closeAllSiblingsBySiblingProperty = (getSibling) => {
-        var _a;
-        let node = clickedMenuItem;
-        while (getSibling(node) != null) {
-          node = getSibling(node);
-          if (isSidebarItemGroup(node)) {
-            const detailsElement = (_a = node === null || node === void 0 ? void 0 : node.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('six-details');
-            if (detailsElement != null) {
-              detailsElement.open = false;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sixShow = index.createEvent(this, "six-sidebar-show");
+        this.sixAfterShow = index.createEvent(this, "six-sidebar-after-show");
+        this.sixHide = index.createEvent(this, "six-sidebar-hide");
+        this.sixAfterHide = index.createEvent(this, "six-sidebar-after-hide");
+        this.sixInitialFocus = index.createEvent(this, "six-sidebar-initial-focus");
+        this.willShow = false;
+        this.willHide = false;
+        this.isVisible = false;
+        /** Sidebar position */
+        this.position = 'left';
+        /** Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /** Sidebar width */
+        this.width = '16rem';
+        /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/
+        this.toggled = 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;
+            if (this.sidebar != null) {
+                scroll.scrollIntoView(clickedMenuItem, this.sidebar);
             }
-          }
+            const closeAllSiblingsBySiblingProperty = (getSibling) => {
+                var _a;
+                let node = clickedMenuItem;
+                while (getSibling(node) != null) {
+                    node = getSibling(node);
+                    if (isSidebarItemGroup(node)) {
+                        const detailsElement = (_a = node === null || node === void 0 ? void 0 : node.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('six-details');
+                        if (detailsElement != null) {
+                            detailsElement.open = false;
+                        }
+                    }
+                }
+            };
+            // close all previous siblings
+            closeAllSiblingsBySiblingProperty((node) => node === null || node === void 0 ? void 0 : node.previousElementSibling);
+            // close all further siblings
+            closeAllSiblingsBySiblingProperty((node) => node === null || node === void 0 ? void 0 : node.nextElementSibling);
+        };
+    }
+    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();
         }
-      };
-      // close all previous siblings
-      closeAllSiblingsBySiblingProperty((node) => node === null || node === void 0 ? void 0 : node.previousElementSibling);
-      // close all further siblings
-      closeAllSiblingsBySiblingProperty((node) => node === null || node === void 0 ? void 0 : 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() {
-    var _a;
-    (_a = this.sidebar) === null || _a === void 0 ? void 0 : _a.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);
-  }
-  setupTogglableMenuItems() {
-    if (!this.toggled || this.sidebar == null)
-      return;
-    this.markAllMenuItemsAsSelectableEmpty();
-    this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);
-  }
-  markAllMenuItemsAsSelectableEmpty() {
-    var _a;
-    // 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 = (_a = this.sidebar) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-    const nodes = (slot === null || slot === void 0 ? void 0 : 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();
-      if ((node === null || node === void 0 ? void 0 : node.shadowRoot) == null) {
-        continue;
-      }
-      // 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);
+    componentDidRender() {
+        this.setupTogglableMenuItems();
     }
-    menuItems.forEach((details) => (details.selectableEmpty = true));
-  }
-  /** Toggles whether the sidebar should be shown or hidden */
-  async toggle() {
-    if (this.willShow || this.willHide) {
-      return;
+    disconnectedCallback() {
+        var _a;
+        (_a = this.sidebar) === null || _a === void 0 ? void 0 : _a.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);
+    }
+    setupTogglableMenuItems() {
+        if (!this.toggled || this.sidebar == null)
+            return;
+        this.markAllMenuItemsAsSelectableEmpty();
+        this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);
     }
-    if (this.open) {
-      await this.hide();
+    markAllMenuItemsAsSelectableEmpty() {
+        var _a;
+        // 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 = (_a = this.sidebar) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const nodes = (slot === null || slot === void 0 ? void 0 : 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();
+            if ((node === null || node === void 0 ? void 0 : node.shadowRoot) == null) {
+                continue;
+            }
+            // 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));
     }
-    else {
-      await this.show();
+    /** 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;
+    /** 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;
     }
-    const sixShow = this.sixShow.emit();
-    if (sixShow.defaultPrevented) {
-      this.open = false;
-      return;
+    /** 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;
     }
-    this.willShow = true;
-    this.isVisible = true;
-    this.open = true;
-  }
-  /** Hides the sidebar */
-  async hide() {
-    if (this.willHide) {
-      return;
+    /** Allows to select a menu item programmatically by index */
+    async selectItemByIndex(index) {
+        if (this.sidebar == null)
+            return;
+        const slot = this.sidebar.querySelector('slot');
+        const menuItemsOnRootLevel = ((slot === null || slot === void 0 ? void 0 : slot.assignedElements()) || []).flatMap((el) => {
+            var _a;
+            const detailsElement = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('six-details');
+            if (detailsElement == null) {
+                return [];
+            }
+            return [detailsElement];
+        });
+        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();
     }
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      return;
+    /** Allows to select a menu item programmatically by name */
+    async selectItemByName(value) {
+        var _a, _b, _c;
+        const slot = (_a = this.sidebar) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const sidebarItemGroups = slot === null || slot === void 0 ? void 0 : slot.assignedElements();
+        if (sidebarItemGroups == null) {
+            return;
+        }
+        const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => (el === null || el === void 0 ? void 0 : el.name) === value);
+        const selectedItem = (_c = (_b = sidebarItemGroups.at(indexOfSelectedElement)) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('six-details');
+        await (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.show());
     }
-    this.willHide = true;
-    this.open = false;
-  }
-  /** Allows to select a menu item programmatically by index */
-  async selectItemByIndex(index) {
-    if (this.sidebar == null)
-      return;
-    const slot = this.sidebar.querySelector('slot');
-    const menuItemsOnRootLevel = ((slot === null || slot === void 0 ? void 0 : slot.assignedElements()) || []).flatMap((el) => {
-      var _a;
-      const detailsElement = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('six-details');
-      if (detailsElement == null) {
-        return [];
-      }
-      return [detailsElement];
-    });
-    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;
+    resetTransitionVariables() {
+        this.isVisible = this.open;
+        this.willShow = false;
+        this.willHide = false;
+        this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
     }
-    await menuItemsOnRootLevel[index].show();
-  }
-  /** Allows to select a menu item programmatically by name */
-  async selectItemByName(value) {
-    var _a, _b, _c;
-    const slot = (_a = this.sidebar) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-    const sidebarItemGroups = slot === null || slot === void 0 ? void 0 : slot.assignedElements();
-    if (sidebarItemGroups == null) {
-      return;
+    render() {
+        return (index.h("host", { key: '135012c9a302e71981f04fe589969a40c1a45225', class: "six-sidebar" }, index.h("div", { key: 'd4bee36555274ef7d73bbe992a4cead918cea066', 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 }, index.h("slot", { key: '7c06aeeed3d4b999f4b4fc229ad9a5c4e380c3df' }))));
     }
-    const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => (el === null || el === void 0 ? void 0 : el.name) === value);
-    const selectedItem = (_c = (_b = sidebarItemGroups.at(indexOfSelectedElement)) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('six-details');
-    await (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.show());
-  }
-  resetTransitionVariables() {
-    this.isVisible = this.open;
-    this.willShow = false;
-    this.willHide = false;
-    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
-  }
-  render() {
-    return (index.h("host", { class: "six-sidebar" }, index.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 }, index.h("slot", null))));
-  }
-  static get watchers() { return {
-    "open": ["handleOpenChange"]
-  }; }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
 };
 SixSidebar.style = sixSidebarCss;
 
 exports.six_sidebar = SixSidebar;
+//# sourceMappingURL=six-sidebar.entry.cjs.js.map
 
 //# sourceMappingURL=six-sidebar.cjs.entry.js.map

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

@@ -1 +1 @@
-{"file":"six-sidebar.entry.cjs.js","mappings":"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","names":["scrollIntoView","h"],"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 | 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.entry.cjs.js","mappings":"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","names":["scrollIntoView","h"],"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      border-right: 1px solid var(--six-color-web-rock-300);\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 | 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}