@six-group/ui-library 0.0.0-insider.0014c08

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

@@ -0,0 +1,204 @@
+'use strict';
+
+var index = require('./index-C8rK7OAe.js');
+var scroll = require('./scroll-BQR9FxnJ.js');
+
+const sixSidebarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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");
+        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();
+        }
+    }
+    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);
+        }
+        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) {
+        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();
+    }
+    /** 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());
+    }
+    resetTransitionVariables() {
+        this.isVisible = this.open;
+        this.willShow = false;
+        this.willHide = false;
+        this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+    }
+    render() {
+        return (index.h("host", { key: '1aae217047bea8e29e86256812a8a67a6eff4ce9', class: "six-sidebar" }, index.h("div", { key: 'd9d70f022ffaeae09003dfc130b40707ad9e3512', 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: 'd88754017cf07b12181cce2e10788291ad487257' }))));
+    }
+    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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar.entry.cjs.js","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"],"names":["scrollIntoView","h"],"mappings":"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"}

package/dist/cjs/six-stage-indicator.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-C8rK7OAe.js');
+
+const sixStageIndicatorCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** The indicators value attribute */
+        this.stage = null;
+    }
+    render() {
+        return this.stage == null || this.stage == 'PROD' ? null : (index.h("div", { class: `indicator--${this.stage.toLowerCase()}` }, index.h("div", { class: "center-content" }, index.h("six-icon", { class: "align-item", size: "small" }, "error_outline"), index.h("span", { class: 'align-item' }, index.h("slot", null)))));
+    }
+};
+SixStageIndicator.style = sixStageIndicatorCss;
+
+exports.six_stage_indicator = SixStageIndicator;
+//# sourceMappingURL=six-stage-indicator.entry.cjs.js.map
+
+//# sourceMappingURL=six-stage-indicator.cjs.entry.js.map

package/dist/cjs/six-stage-indicator.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-stage-indicator.entry.cjs.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,69BAA69B;;MCS7+B,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAc,IAAI;AAgBhC;IAdC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI,IACtDA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,WAAA,EAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAE,CAAA,EAAA,EAClDA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OAAA,CAAA,UAAA,EAAA,EAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAE9B,EAAA,eAAA,CAAA,EACXA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACH,CACH,CACF,CACP;;;;;;;","names":["h"],"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/cjs/six-stage-indicator.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-stage-indicator.entry.cjs.js","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"],"names":["h"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,69BAA69B;;MCS7+B,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAc,IAAI;AAgBhC;IAdC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI,IACtDA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,WAAA,EAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAE,CAAA,EAAA,EAClDA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OAAA,CAAA,UAAA,EAAA,EAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAE9B,EAAA,eAAA,CAAA,EACXA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACH,CACH,CACF,CACP;;;;;;;"}

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

@@ -0,0 +1,129 @@
+'use strict';
+
+var index = require('./index-C8rK7OAe.js');
+var eventListeners = require('./event-listeners-BrSR7arL.js');
+var formControl = require('./form-control-CX8QRq9v.js');
+var slot = require('./slot-DBK7c7jH.js');
+
+const sixSwitchCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--height:var(--six-selection-control-toggle-size);--thumb-size:calc(var(--six-selection-control-toggle-size) - 4px);--width:calc(var(--height) * 2);display:inline-block}.switch{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.switch__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--width);height:var(--height);background-color:var(--six-selection-control-color-disabled);border-radius:var(--height);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color}.switch__control .switch__thumb{width:var(--thumb-size);height:var(--thumb-size);background-color:var(--six-input-background-color);border-radius:50%;transform:translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color, var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow}.switch__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-hover)}.switch--checked .switch__control{background-color:var(--six-selection-control-color)}.switch--checked .switch__control .switch__thumb{background-color:var(--six-color-white);transform:translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2))}.switch.switch--checked:not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-focus)}.switch--disabled{cursor:not-allowed;color:var(--six-selection-control-color-disabled)}.switch--disabled .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch--disabled.switch--checked .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch__label{line-height:var(--height);margin-left:0.5em;user-select:none}";
+
+let id = 0;
+const SixSwitch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sixBlur = index.createEvent(this, "six-switch-blur");
+        this.sixChange = index.createEvent(this, "six-switch-change");
+        this.sixFocus = index.createEvent(this, "six-switch-focus");
+        this.switchId = `switch-${++id}`;
+        this.labelId = `switch-label-${id}`;
+        this.errorTextId = `input-error-text-${id}`;
+        this.eventListeners = new eventListeners.EventListeners();
+        this.hasFocus = false;
+        this.hasErrorTextSlot = false;
+        /** The switch's name attribute. */
+        this.name = '';
+        /** The switch's value attribute. */
+        this.value = 'on';
+        /** Set to true to disable the switch. */
+        this.disabled = false;
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** Set to true to draw the switch in a checked state. */
+        this.checked = false;
+        /** The label text. */
+        this.label = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        this.handleSlotChange = () => {
+            this.hasErrorTextSlot = slot.hasSlot(this.host, 'error-text');
+        };
+        this.handleClick = () => {
+            if (this.inputElement != null) {
+                this.checked = this.inputElement.checked;
+                this.sixChange.emit(this.checked);
+            }
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit(this.checked);
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                this.checked = false;
+                this.sixChange.emit(this.checked);
+            }
+            if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                this.checked = true;
+                this.sixChange.emit(this.checked);
+            }
+        };
+        this.handleMouseDown = (event) => {
+            var _a;
+            // Prevent clicks on the label from briefly blurring the input
+            event.preventDefault();
+            (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    handleCheckedChange() {
+        if (this.inputElement != null) {
+            this.inputElement.checked = this.checked;
+            this.checked = this.inputElement.checked;
+        }
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.forward('six-switch-change', 'change', this.host);
+        this.eventListeners.forward('six-switch-blur', 'blur', this.host);
+        this.eventListeners.forward('six-switch-focus', 'focus', this.host);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.removeAll();
+    }
+    handleLabelChange() {
+        this.handleSlotChange();
+    }
+    /** Sets focus on the switch. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus from the switch. */
+    async removeFocus() {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    render() {
+        return (index.h(formControl.FormControl, { key: '71e5bbeaf0a8aaa048395e5141d5a5e0f280fd05', inputId: this.switchId, label: this.label, labelId: this.labelId, hasLabelSlot: false, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, index.h("label", { key: '0cbcf106597f7be0403b34f0e3d471f1f41796a7', part: "base", htmlFor: this.switchId, class: {
+                switch: true,
+                'switch--checked': this.checked,
+                'switch--disabled': this.disabled,
+                'switch--focused': this.hasFocus,
+            }, onMouseDown: this.handleMouseDown }, index.h("span", { key: 'b4540e2a6458235cf02412951aa1810bc53300e6', part: "control", class: "switch__control" }, index.h("span", { key: 'b2e8dc036a5b16fd58120f3afe48e58249cd4469', part: "thumb", class: "switch__thumb" }), index.h("input", { key: 'b0a4aba9eff684d6f2f4f523a4ca17c2d03e50bc', ref: (el) => (this.inputElement = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), index.h("span", { key: 'bd308defa59c8c4a144a67bb461309af8627a4bf', part: "label", id: this.labelId, class: "switch__label" }, index.h("slot", { key: 'a63507b9c7b7faeceb2babb993966840747d62ae' })))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["handleCheckedChange"],
+        "errorText": ["handleLabelChange"],
+        "label": ["handleLabelChange"]
+    }; }
+};
+SixSwitch.style = sixSwitchCss;
+
+exports.six_switch = SixSwitch;
+//# sourceMappingURL=six-switch.entry.cjs.js.map
+
+//# sourceMappingURL=six-switch.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"six-switch.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,YAAY,GAAG,wuJAAwuJ;;ACM7vJ,IAAI,EAAE,GAAG,CAAC;MAsBG,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAMU,QAAA,IAAA,CAAA,QAAQ,GAAG,UAAU,EAAE,EAAE,EAAE;AAC3B,QAAA,IAAA,CAAA,OAAO,GAAG,CAAgB,aAAA,EAAA,EAAE,EAAE;AAC9B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAoB,iBAAA,EAAA,EAAE,EAAE;AAGtC,QAAA,IAAA,CAAA,cAAc,GAAG,IAAIA,6BAAc,EAAE;AAIpC,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAChB,QAAA,IAAgB,CAAA,gBAAA,GAAG,KAAK;;AAGzB,QAAA,IAAI,CAAA,IAAA,GAAG,EAAE;;AAGT,QAAA,IAAK,CAAA,KAAA,GAAG,IAAI;;AAGZ,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGgB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAG/C,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAGV,QAAA,IAAS,CAAA,SAAA,GAAsB,EAAE;;AAMhB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAyChC,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YAC9B,IAAI,CAAC,gBAAgB,GAAGC,YAAO,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AAC1D,SAAC;AAcO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;gBAC7B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO;gBACxC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;AAErC,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;YACrB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AACjC,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACtB,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AAC/C,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;gBAC7B,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK;gBACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;AAGnC,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;gBAC9B,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;gBACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;AAErC,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAiB,KAAI;;;YAE9C,KAAK,CAAC,cAAc,EAAE;YACtB,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;AAC5B,SAAC;AA0DF;IApJC,iBAAiB,GAAA;QACf,IAAI,CAAC,gBAAgB,EAAE;;IAIzB,mBAAmB,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;YAC7B,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;YACxC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO;;;IAa5C,iBAAiB,GAAA;;AACf,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC3E,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,mBAAmB,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC;AACrE,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,iBAAiB,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;AACjE,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,kBAAkB,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC;;IAGrE,oBAAoB,GAAA;;AAClB,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC9E,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;;IAKjC,iBAAiB,GAAA;QACf,IAAI,CAAC,gBAAgB,EAAE;;;IASzB,MAAM,QAAQ,CAAC,OAAsB,EAAA;;QACnC,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,OAAO,CAAC;;;AAKnC,IAAA,MAAM,WAAW,GAAA;;QACf,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE;;IAwC3B,MAAM,GAAA;QACJ,QACEC,OAAA,CAACC,uBAAW,EAAA,EAAA,GAAA,EAAA,0CAAA,EACV,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,OAAO,EAAA,EAE1BD,OACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,IAAI;gBACZ,iBAAiB,EAAE,IAAI,CAAC,OAAO;gBAC/B,kBAAkB,EAAE,IAAI,CAAC,QAAQ;gBACjC,iBAAiB,EAAE,IAAI,CAAC,QAAQ;aACjC,EACD,WAAW,EAAE,IAAI,CAAC,eAAe,EAAA,EAEjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,iBAAiB,EAAA,EAC1CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAG,CAAA,EAE3CA,OACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EACC,cAAA,EAAA,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAAA,iBAAA,EAC5B,IAAI,CAAC,OAAO,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAAA,CAC7B,CACG,EAEPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,eAAe,EAAA,EACxDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACD,CACI;;;;;;;;;;;;;","names":["EventListeners","hasSlot","h","FormControl"],"sources":["src/components/six-switch/six-switch.scss?tag=six-switch&encapsulation=shadow","src/components/six-switch/six-switch.tsx"],"sourcesContent":["@import '../../../src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/**\n * @prop --width: The width of the switch.\n * @prop --height: The height of the switch.\n * @prop --thumb-size: The size of the thumb.\n */\n:host {\n  --height: var(--six-selection-control-toggle-size);\n  --thumb-size: calc(var(--six-selection-control-toggle-size) - 4px);\n  --width: calc(var(--height) * 2);\n\n  display: inline-block;\n}\n\n.switch {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.switch__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--width);\n  height: var(--height);\n  background-color: var(--six-selection-control-color-disabled);\n  border-radius: var(--height);\n  transition:\n    var(--six-transition-fast) border-color,\n    var(--six-transition-fast) background-color;\n\n  .switch__thumb {\n    width: var(--thumb-size);\n    height: var(--thumb-size);\n    background-color: var(--six-input-background-color);\n    border-radius: 50%;\n    transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));\n    transition:\n      var(--six-transition-fast) transform ease,\n      var(--six-transition-fast) background-color,\n      var(--six-transition-fast) border-color,\n      var(--six-transition-fast) box-shadow;\n  }\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n}\n\n// Hover\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n  background-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.switch--checked .switch__control {\n  background-color: var(--six-selection-control-color);\n\n  .switch__thumb {\n    background-color: var(--six-color-white);\n    transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));\n  }\n}\n\n// Checked + hover\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.switch--disabled {\n  cursor: not-allowed;\n  color: var(--six-selection-control-color-disabled);\n\n  .switch__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n\n  &.switch--checked .switch__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n.switch__label {\n  line-height: var(--height);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The switch's label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n */\n\n@Component({\n  tag: 'six-switch',\n  styleUrl: 'six-switch.scss',\n  shadow: true,\n})\nexport class SixSwitch {\n  private switchId = `switch-${++id}`;\n  private labelId = `switch-label-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n\n  private inputElement?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixSwitchElement;\n\n  @State() hasFocus = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The switch's name attribute. */\n  @Prop() name = '';\n\n  /** The switch's value attribute. */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the switch. */\n  @Prop() disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** Set to true to draw the switch in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.inputElement != null) {\n      this.inputElement.checked = this.checked;\n      this.checked = this.inputElement.checked;\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-switch-change', 'change', this.host);\n    this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n    this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  /** Sets focus on the switch. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.inputElement?.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  @Method()\n  async removeFocus() {\n    this.inputElement?.blur();\n  }\n\n  private handleClick = () => {\n    if (this.inputElement != null) {\n      this.checked = this.inputElement.checked;\n      this.sixChange.emit(this.checked);\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit(this.checked);\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.checked = false;\n      this.sixChange.emit(this.checked);\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.checked = true;\n      this.sixChange.emit(this.checked);\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.inputElement?.focus();\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.switchId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={false}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <label\n          part=\"base\"\n          htmlFor={this.switchId}\n          class={{\n            switch: true,\n            'switch--checked': this.checked,\n            'switch--disabled': this.disabled,\n            'switch--focused': this.hasFocus,\n          }}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"switch__control\">\n            <span part=\"thumb\" class=\"switch__thumb\" />\n\n            <input\n              ref={(el) => (this.inputElement = el)}\n              id={this.switchId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"switch\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onClick={this.handleClick}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n              onKeyDown={this.handleKeyDown}\n            />\n          </span>\n\n          <span part=\"label\" id={this.labelId} class=\"switch__label\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-switch.entry.cjs.js","sources":["src/components/six-switch/six-switch.scss?tag=six-switch&encapsulation=shadow","src/components/six-switch/six-switch.tsx"],"sourcesContent":["@import '../../../src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/**\n * @prop --width: The width of the switch.\n * @prop --height: The height of the switch.\n * @prop --thumb-size: The size of the thumb.\n */\n:host {\n  --height: var(--six-selection-control-toggle-size);\n  --thumb-size: calc(var(--six-selection-control-toggle-size) - 4px);\n  --width: calc(var(--height) * 2);\n\n  display: inline-block;\n}\n\n.switch {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.switch__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--width);\n  height: var(--height);\n  background-color: var(--six-selection-control-color-disabled);\n  border-radius: var(--height);\n  transition:\n    var(--six-transition-fast) border-color,\n    var(--six-transition-fast) background-color;\n\n  .switch__thumb {\n    width: var(--thumb-size);\n    height: var(--thumb-size);\n    background-color: var(--six-input-background-color);\n    border-radius: 50%;\n    transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));\n    transition:\n      var(--six-transition-fast) transform ease,\n      var(--six-transition-fast) background-color,\n      var(--six-transition-fast) border-color,\n      var(--six-transition-fast) box-shadow;\n  }\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n}\n\n// Hover\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n  background-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.switch--checked .switch__control {\n  background-color: var(--six-selection-control-color);\n\n  .switch__thumb {\n    background-color: var(--six-color-white);\n    transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));\n  }\n}\n\n// Checked + hover\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.switch--disabled {\n  cursor: not-allowed;\n  color: var(--six-selection-control-color-disabled);\n\n  .switch__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n\n  &.switch--checked .switch__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n.switch__label {\n  line-height: var(--height);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The switch's label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n */\n\n@Component({\n  tag: 'six-switch',\n  styleUrl: 'six-switch.scss',\n  shadow: true,\n})\nexport class SixSwitch {\n  private switchId = `switch-${++id}`;\n  private labelId = `switch-label-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n\n  private inputElement?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixSwitchElement;\n\n  @State() hasFocus = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The switch's name attribute. */\n  @Prop() name = '';\n\n  /** The switch's value attribute. */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the switch. */\n  @Prop() disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** Set to true to draw the switch in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.inputElement != null) {\n      this.inputElement.checked = this.checked;\n      this.checked = this.inputElement.checked;\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-switch-change', 'change', this.host);\n    this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n    this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  /** Sets focus on the switch. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.inputElement?.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  @Method()\n  async removeFocus() {\n    this.inputElement?.blur();\n  }\n\n  private handleClick = () => {\n    if (this.inputElement != null) {\n      this.checked = this.inputElement.checked;\n      this.sixChange.emit(this.checked);\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit(this.checked);\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.checked = false;\n      this.sixChange.emit(this.checked);\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.checked = true;\n      this.sixChange.emit(this.checked);\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.inputElement?.focus();\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.switchId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={false}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <label\n          part=\"base\"\n          htmlFor={this.switchId}\n          class={{\n            switch: true,\n            'switch--checked': this.checked,\n            'switch--disabled': this.disabled,\n            'switch--focused': this.hasFocus,\n          }}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"switch__control\">\n            <span part=\"thumb\" class=\"switch__thumb\" />\n\n            <input\n              ref={(el) => (this.inputElement = el)}\n              id={this.switchId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"switch\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onClick={this.handleClick}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n              onKeyDown={this.handleKeyDown}\n            />\n          </span>\n\n          <span part=\"label\" id={this.labelId} class=\"switch__label\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"],"names":["EventListeners","hasSlot","h","FormControl"],"mappings":"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"}