@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.db2b416

package/dist/esm/six-select.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, a as H, h, g as getElement } from './index-371fb9d4.js';
-import { h as hasSlot, a as getTextContent } from './slot-2e64df19.js';
-import { F as FormControl } from './form-control-44a50dd6.js';
-import { E as EventListeners } from './event-listeners-6b434035.js';
-import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control-72cc50f4.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8a74f992.js';
+import { h as hasSlot, a as getTextContent } from './slot-ad36df3a.js';
+import { F as FormControl } from './form-control-32cb533f.js';
+import { E as EventListeners } from './event-listeners-f6e5b0ab.js';
+import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control-e0892a05.js';
 
 function isValueEmpty(value) {
   if (Array.isArray(value)) {
@@ -25,8 +25,6 @@ const SixSelect = class {
     this.helpTextId = `select-help-text-${id}`;
     this.errorTextId = `select-error-text-${id}`;
     this.touched = false;
-    this.customErrorText = '';
-    this.customValidation = false;
     this.eventListeners = new EventListeners();
     this.handleBlur = () => {
       this.hasFocus = false;
@@ -36,9 +34,6 @@ const SixSelect = class {
       this.hasFocus = true;
       this.sixFocus.emit();
     };
-    this.handleInvalid = () => {
-      this.invalid = true;
-    };
     this.handleClearClick = (event) => {
       event.stopPropagation();
       this.clearValues();
@@ -138,7 +133,6 @@ const SixSelect = class {
     };
     this.handleSlotChange = () => {
       this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-      this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
       this.hasLabelSlot = hasSlot(this.host, 'label');
       this.syncItemsFromValue();
     };
@@ -146,7 +140,7 @@ const SixSelect = class {
       // Don't toggle the menu when a tag's clear button is activated
       const path = event.composedPath();
       const clearButton = path.find((el) => {
-        if (el instanceof H) {
+        if (el instanceof HTMLElement) {
           const element = el;
           return element.classList.contains('tag__clear');
         }
@@ -157,7 +151,6 @@ const SixSelect = class {
     };
     this.hasFocus = false;
     this.hasHelpTextSlot = false;
-    this.hasErrorTextSlot = false;
     this.hasLabelSlot = false;
     this.isOpen = false;
     this.displayLabel = '';
@@ -173,21 +166,19 @@ const SixSelect = class {
     this.hoist = false;
     this.value = '';
     this.pill = false;
-    this.label = '';
     this.helpText = '';
-    this.errorText = '';
     this.required = false;
     this.clearable = false;
+    this.label = '';
+    this.errorText = '';
     this.invalid = false;
     this.line = false;
-    this.errorOnBlur = false;
     this.filter = false;
     this.asyncFilter = false;
     this.autocomplete = false;
     this.inputDebounce = DEFAULT_DEBOUNCE_FAST;
     this.options = null;
     this.virtualScroll = false;
-    this.defaultValue = this.multiple ? [] : '';
   }
   handleDisabledChange() {
     var _a;
@@ -204,14 +195,14 @@ const SixSelect = class {
     this.value = this.multiple ? value : value[0] || '';
     this.syncItemsFromValue();
   }
-  handleValueChange() {
+  async handleValueChange() {
     if (this.multiple && !Array.isArray(this.value)) {
       this.value = [];
     }
     if (!this.multiple && typeof this.value !== 'string') {
       this.value = '';
     }
-    this.syncItemsFromValue();
+    await this.syncItemsFromValue();
     if (this.input) {
       this.sixChange.emit({ value: this.value, isSelected: true });
     }
@@ -222,6 +213,9 @@ const SixSelect = class {
       console.error('Options must be defined when using virtual scrolling');
     }
     (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+    this.eventListeners.forward('six-select-change', 'change', this.host);
+    this.eventListeners.forward('six-select-blur', 'blur', this.host);
+    this.eventListeners.forward('six-select-focus', 'focus', this.host);
   }
   componentWillLoad() {
     this.handleSlotChange();
@@ -236,12 +230,6 @@ const SixSelect = class {
     this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
     // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning
     requestAnimationFrame(() => this.syncItemsFromValue());
-    this.eventListeners.add(this.input, 'invalid', async (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText == null && this.customErrorText == null)) {
-        this.customErrorText = await input.getValidationMessage();
-      }
-      event.preventDefault();
-    });
     this.eventListeners.add(input, 'six-input-input', debounce((event) => {
       const enteredValue = input.value;
       this.clearValues();
@@ -255,34 +243,11 @@ const SixSelect = class {
     (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     this.eventListeners.removeAll();
   }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    var _a;
-    return (_a = this.input) === null || _a === void 0 ? void 0 : _a.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
+  /** Sets focus on the select. */
+  async setFocus(options) {
     var _a;
-    return (_a = this.input) === null || _a === void 0 ? void 0 : _a.isValid();
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    if (this.input == null)
-      return;
-    this.customErrorText = '';
-    this.customValidation = message !== '';
-    await this.input.setCustomValidity(message);
-    this.invalid = !(await this.input.checkValidity());
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    if (this.input == null)
-      return;
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    await this.input.setCustomValidity('');
-    this.invalid = false;
+    this.hasFocus = true;
+    (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus(options);
   }
   getItemLabel(item) {
     var _a, _b;
@@ -310,8 +275,7 @@ const SixSelect = class {
     return values.map(String);
   }
   clearValues() {
-    var _a;
-    this.value = (_a = this.defaultValue) !== null && _a !== void 0 ? _a : (this.multiple ? [] : '');
+    this.value = this.multiple ? [] : '';
     this.syncItemsFromValue();
   }
   resizeMenu() {
@@ -356,7 +320,6 @@ const SixSelect = class {
     }
     if (this.touched && this.input != null) {
       this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
-      this.invalid = !(await this.input.checkValidity());
     }
   }
   extractLabelForSelectedItem(value, items) {
@@ -380,13 +343,10 @@ const SixSelect = class {
         ? checkedValues[0]
         : '';
   }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || (!this.hasFocus && !this.isOpen));
-  }
   render() {
     var _a;
     const hasSelection = this.hasSelection();
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText != null && this.customErrorText !== '' ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
         select: true,
         'select--open': this.isOpen,
         'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
@@ -408,7 +368,7 @@ const SixSelect = class {
       }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }, h("span", { class: "select__label" }, this.displayTags.length > 0 ? (h("span", { part: "tags", class: "select__tags" }, this.displayTags)) : (this.displayLabel || this.placeholder)), this.clearable && hasSelection && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), this.hasMenuItems() && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { ref: (el) => (this.input = el), class: {
         select__input: true,
         'select__hidden-select': !this.autocomplete,
-      }, "aria-hidden": "true", required: this.required, onInvalid: this.handleInvalid, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("six-menu", { ref: (el) => (this.menu = el), part: "menu", class: {
+      }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("six-menu", { ref: (el) => (this.menu = el), part: "menu", class: {
         select__menu: true,
         'select__menu--filtered': this.filter || this.asyncFilter,
         'select__menu--hidden': !this.hasMenuItems(),

package/dist/esm/six-select.entry.js.map

@@ -1 +1 @@
-{"file":"six-select.entry.js","mappings":"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","names":["HTMLElement"],"sources":["./src/components/six-select/util.ts","./src/components/six-select/six-select.scss?tag=six-select&encapsulation=shadow","./src/components/six-select/six-select.tsx"],"sourcesContent":["export interface MenuItem {\n  value: string;\n}\n\nexport function getValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): string | string[] {\n  if (multiple) {\n    if (Array.isArray(value)) {\n      return getSelectedValues(value, menuItems);\n    } else {\n      return getSelectedValuesFromString(value, menuItems);\n    }\n  }\n\n  return getSelectedMenuItem(value, menuItems)?.value ?? '';\n}\n\nexport function isValidValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): boolean {\n  if (value === '') {\n    return true;\n  }\n\n  if (multiple) {\n    if (Array.isArray(value)) {\n      if (value.length === 0) {\n        return true;\n      }\n      return getSelectedValues(value, menuItems).length === value.length;\n    }\n    return getSelectedValuesFromString(value, menuItems).length > 0;\n  }\n\n  return getSelectedMenuItem(value, menuItems) != null;\n}\n\nexport function valueEquals(a: string | string[], b: string | string[]): boolean {\n  if (Array.isArray(a) && Array.isArray(b)) {\n    return a.length === b.length && a.every((element, index) => element === b[index]);\n  } else if (typeof a === 'string' && typeof b === 'string') {\n    return a === b;\n  }\n  return false;\n}\n\nexport function isValueEmpty(value: string | string[]): boolean {\n  if (Array.isArray(value)) {\n    return value.length === 0;\n  }\n  return value === '';\n}\n\nfunction getSelectedValues(values: unknown[], menuItems: MenuItem[]): string[] {\n  return menuItems.filter((menuItem) => values.includes(menuItem.value)).map((menuItem) => menuItem.value);\n}\n\nfunction getSelectedValuesFromString(value: unknown, menuItems: MenuItem[]): string[] {\n  return menuItems.filter((menuItem) => value === menuItem.value).map((menuItem) => menuItem.value);\n}\n\nfunction getSelectedMenuItem(value: unknown, menuItems: MenuItem[]): MenuItem | undefined {\n  return menuItems.find((item) => value === item.value);\n}\n","@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host {\n  display: block;\n}\n\n.select {\n  display: block;\n}\n\n.select__box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  font-size: var(--six-input-font-size-medium);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  overflow: hidden;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: pointer;\n\n  &--line {\n    border: none;\n    border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n  }\n\n  &--autocomplete {\n    border: none;\n    overflow: initial;\n  }\n}\n\n.select:not(.select--disabled) .select__box:hover {\n  background-color: var(--six-input-background-color-hover);\n  color: var(--six-input-color-hover);\n\n  border-bottom-color: var(--six-input-border-color-hover);\n\n  &:not(.select__box--line) {\n    border-color: var(--six-input-border-color-hover);\n  }\n}\n\n.select:not(.select--disabled) .select__box:focus {\n  background-color: var(--six-input-background-color-focus);\n  outline: none;\n  color: var(--six-input-color-focus);\n\n  border-bottom-color: var(--six-input-border-color-focus);\n  box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n  &:not(.select__box--line) {\n    border-color: var(--six-input-border-color-focus);\n    box-shadow: var(--six-input-focus-shadow);\n  }\n}\n\n.select--disabled {\n  .select__box {\n    background-color: var(--six-input-background-color-disabled);\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n    outline: none;\n\n    &:not(.select__box--line) {\n      border-color: var(--six-input-border-color-disabled);\n    }\n  }\n\n  .select__tags,\n  .select__clear {\n    pointer-events: none;\n  }\n}\n\n.select--invalid:not(.select--disabled):not(.select--focused) {\n  .select__box {\n    border-bottom-color: var(--six-input-border-color-danger);\n\n    &:not(.input--line) {\n      border-color: var(--six-input-border-color-danger);\n    }\n  }\n}\n\n.select__label {\n  flex-shrink: 1;\n  flex-grow: 1;\n  align-items: center;\n  user-select: none;\n  width: 0; /* needed for firefox because due to \"white-space: nowrap\" the default is set to max-content */\n\n  @include hide-scrollbar;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\n}\n\n.select__clear {\n  flex-shrink: 0;\n  flex-grow: 0;\n  display: inline;\n}\n\n.select__icon {\n  flex-shrink: 0;\n  flex-grow: 0;\n  display: inline;\n  transition: var(--six-transition-medium) transform ease;\n}\n\n.select--open .select__icon {\n  transform: rotate(-180deg);\n}\n\n// Placeholder\n.select--placeholder-visible .select__label {\n  color: var(--six-input-placeholder-color);\n}\n\n.select--disabled.select--placeholder-visible .select__label {\n  color: var(--six-input-placeholder-color-disabled);\n}\n\n// Tags\n.select__tags {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: left;\n  margin-left: var(--six-spacing-xx-small);\n}\n\n// Hidden input (for form control validation to show)\n.select__hidden-select {\n  @include visually-hidden();\n}\n\n.select__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--small {\n  .select__box {\n    border-radius: var(--six-input-border-radius-small);\n    font-size: var(--six-input-font-size-small);\n    min-height: var(--six-height-small);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .select__label {\n    margin: 0 var(--six-input-spacing-small);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n\n  .select__tags {\n    padding-bottom: 2px;\n\n    six-tag {\n      padding-top: 2px;\n    }\n\n    six-tag:not(:last-of-type) {\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\n  }\n}\n\n.select--medium {\n  .select__box {\n    border-radius: var(--six-input-border-radius-medium);\n    font-size: var(--six-input-font-size-medium);\n    min-height: var(--six-height-medium);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .select__label {\n    margin: 0 var(--six-input-spacing-medium);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n\n  .select__tags {\n    padding-bottom: 3px;\n\n    six-tag {\n      padding-top: 3px;\n    }\n\n    six-tag:not(:last-of-type) {\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\n  }\n}\n\n.select--large {\n  .select__box {\n    border-radius: var(--six-input-border-radius-large);\n    font-size: var(--six-input-font-size-large);\n    min-height: var(--six-height-large);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .select__label {\n    margin: 0 var(--six-input-spacing-large);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n\n  .select__tags {\n    padding-bottom: 4px;\n\n    six-tag {\n      padding-top: 4px;\n    }\n\n    six-tag:not(:last-of-type) {\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--pill {\n  &.select--small .select__box {\n    border-radius: var(--six-height-small);\n  }\n\n  &.select--medium .select__box {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.select--large .select__box {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Menu\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.select {\n  &__menu {\n    max-width: 50vw;\n    width: fit-content;\n\n    &--filtered {\n      // fixes problem where when filter is enabled the popup has the width of the input field but the menu has the width\n      // of the trigger element and we thus get weird UI glitches when trigger is narrower than filter input field\n      width: 100% !important;\n    }\n\n    &--hidden {\n      // hide the menu panel if there are no menu items\n      display: none;\n    }\n  }\n}\n\n// fixes problem where six-select height changes when size=\"small\" and clearing button is visible\nsix-icon-button::part(base) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { getTextContent, hasSlot } from '../../utils/slot';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { SixMenuItemData } from '../six-menu/six-menu';\nimport { isValueEmpty } from './util';\n\nexport interface SixSelectChangePayload {\n  value: string | string[];\n  isSelected: boolean;\n}\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 select's options in the form of menu items.\n * @slot label - The select's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the select.\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 clear-button - The input's clear button, exported from six-input.\n * @part form-control - The form control that wraps the label, input, and help text.\n * @part help-text - The select's help text.\n * @part icon - The select's icon.\n * @part label - The select's label.\n * @part menu - The select menu, a six-menu element.\n * @part tag - The multiselect option, a six-tag element.\n * @part tags - The container in which multiselect options are rendered.\n */\n\n@Component({\n  tag: 'six-select',\n  styleUrl: 'six-select.scss',\n  shadow: true,\n})\nexport class SixSelect {\n  private box?: HTMLElement;\n  private dropdown?: HTMLSixDropdownElement;\n  private input?: HTMLSixInputElement;\n  private inputId = `select-${++id}`;\n  private labelId = `select-label-${id}`;\n  private helpTextId = `select-help-text-${id}`;\n  private errorTextId = `select-error-text-${id}`;\n  private menu?: HTMLSixMenuElement;\n  private resizeObserver?: ResizeObserver;\n  private touched = false;\n  private customErrorText = '';\n  private customValidation = false;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixSelectElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() isOpen = false;\n  @State() displayLabel = '';\n  @State() displayTags: HTMLSixTagElement[] = [];\n\n  /** Set to true to enable multiselect. */\n  @Prop() multiple = false;\n\n  /**\n   * The maximum number of tags to show when `multiple` is true. After the maximum, \"+n\" will be shown to indicate the\n   * number of additional items that are selected. Set to -1 to remove the limit.\n   */\n  @Prop() maxTagsVisible = 3;\n\n  /** Set to true to disable the select control. */\n  @Prop() disabled = false;\n\n  /** The select's name. */\n  @Prop() name = '';\n\n  /** The select's placeholder text. */\n  @Prop() placeholder = '';\n\n  /** The filter's placeholder text. */\n  @Prop() filterPlaceholder?: string;\n\n  /** The debounce for the filter callbacks. */\n  @Prop() filterDebounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** The select's size. */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /** The value of the control. This will be a string or an array depending on `multiple`. */\n  @Prop({ mutable: true }) value: string | string[] = '';\n\n  /** Set to true to draw a pill-style select with rounded edges. */\n  @Prop() pill = false;\n\n  /** The select's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The select's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The select's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** The select's required attribute. */\n  @Prop() required = false;\n\n  /** Set to true to add a clear button when the select is populated. */\n  @Prop() clearable = false;\n\n  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n  @Prop({ mutable: true }) invalid = false;\n\n  /** Set to render as line */\n  @Prop() line = false;\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Set to true to allow filtering for entries in the dropdown */\n  @Prop() filter = false;\n\n  /**\n   * Set to true to allow async filtering.\n   * When you enter something in the search field the component will only emit an event but not filter any elements itself.\n   * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself\n   */\n  @Prop() asyncFilter = false;\n\n  /**\n   * Set to true to turn the six-select into an autocomplete.\n   */\n  @Prop() autocomplete = false;\n\n  /** The debounce for when the input changes for autocompletes should be emitted */\n  @Prop() inputDebounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */\n  @Prop() options: SixMenuItemData[] | null = null;\n\n  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n  @Prop() virtualScroll = false;\n\n  /** The default value the select will be reverted to when reset is executed */\n  @Prop() defaultValue: string | string[] = this.multiple ? [] : '';\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    if (this.disabled && this.isOpen) {\n      this.dropdown?.hide();\n    }\n  }\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('multiple')\n  handleMultipleChange() {\n    // Cast to array | string based on `this.multiple`\n    const value = this.getValueAsArray();\n    this.value = this.multiple ? value : value[0] || '';\n    this.syncItemsFromValue();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.multiple && !Array.isArray(this.value)) {\n      this.value = [];\n    }\n\n    if (!this.multiple && typeof this.value !== 'string') {\n      this.value = '';\n    }\n\n    this.syncItemsFromValue();\n    if (this.input) {\n      this.sixChange.emit({ value: this.value, isSelected: true });\n    }\n  }\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-select-change' }) sixChange!: EventEmitter<SixSelectChangePayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-select-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-select-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    if (this.virtualScroll && this.options === null) {\n      console.error('Options must be defined when using virtual scrolling');\n    }\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    if (this.multiple && this.value != null) {\n      this.value = this.getValueAsArray();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.input == null) return;\n    const input = this.input;\n    this.resizeObserver = new ResizeObserver(() => this.resizeMenu());\n\n    // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning\n    requestAnimationFrame(() => this.syncItemsFromValue());\n\n    this.eventListeners.add(this.input, 'invalid', async (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText == null && this.customErrorText == null)) {\n        this.customErrorText = await input.getValidationMessage();\n      }\n      event.preventDefault();\n    });\n\n    this.eventListeners.add(\n      input,\n      'six-input-input',\n      debounce((event) => {\n        const enteredValue = input.value;\n        this.clearValues();\n        this.sixChange.emit({ value: enteredValue, isSelected: false });\n        event.stopPropagation();\n      }, this.inputDebounce)\n    );\n\n    input.value = this.hasSelection() ? this.displayLabel : '';\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.input?.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.input?.isValid();\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    if (this.input == null) return;\n\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    await this.input.setCustomValidity(message);\n    this.invalid = !(await this.input.checkValidity());\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    if (this.input == null) return;\n\n    this.value = this.defaultValue;\n    this.customErrorText = '';\n    this.customValidation = false;\n    await this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  private getItemLabel(item: HTMLSixMenuItemElement): string {\n    const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n    if (slot != null) {\n      return getTextContent(slot);\n    } else {\n      // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed\n      return item.textContent ?? '';\n    }\n  }\n\n  private getItems(): HTMLSixMenuItemElement[] {\n    if (this.options !== null) {\n      return this.options.map((option) => <six-menu-item value={option.value}>{option.label}</six-menu-item>);\n    }\n\n    return [...this.host.querySelectorAll('six-menu-item')];\n  }\n\n  private hasMenuItems() {\n    return this.getItems().length > 0;\n  }\n\n  private getValueAsArray() {\n    const values = Array.isArray(this.value) ? this.value : [this.value];\n    // enforce that the values are converted to 'string' before the value is compared\n    return values.map(String);\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleInvalid = () => {\n    this.invalid = true;\n  };\n\n  private handleClearClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.clearValues();\n  };\n\n  private clearValues() {\n    this.value = this.defaultValue ?? (this.multiple ? [] : '');\n    this.syncItemsFromValue();\n  }\n\n  private handleSelectAll = (event: KeyboardEvent) => {\n    const nonFilteredItems = this.getItems().filter((item) => item.style.display !== 'none');\n    const keyName = event.key;\n    const keyCode = event.code;\n\n    if (keyName === 'Control') {\n      return;\n    }\n\n    if (this.isOpen && this.multiple && keyCode === 'KeyA' && event.ctrlKey) {\n      event.preventDefault();\n      const hasDeselectedOptions = nonFilteredItems.some((opt) => !opt.disabled && !opt.checked);\n\n      nonFilteredItems\n        .filter((option) => !option.disabled)\n        .forEach((option) => (option.checked = hasDeselectedOptions));\n      const checkedItems = nonFilteredItems.filter((option) => option.checked).map((option) => option.value);\n      this.value = hasDeselectedOptions ? checkedItems : [];\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n\n    const items = this.getItems();\n    const firstItem = items[0];\n    const lastItem = items[items.length - 1];\n\n    // Ignore key presses on tags\n    if (target.tagName.toLowerCase() === 'six-tag') {\n      return;\n    }\n\n    // Tabbing out of the control closes it\n    if (event.key === 'Tab') {\n      if (this.isOpen) {\n        this.dropdown?.hide();\n      }\n      return;\n    }\n\n    // Up/down opens the menu\n    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      event.preventDefault();\n\n      // Show the menu if it's not already open\n      if (!this.isOpen) {\n        this.dropdown?.show();\n      }\n\n      // Focus on a menu item\n      if (event.key === 'ArrowDown' && firstItem) {\n        firstItem.setFocus();\n        return;\n      }\n\n      if (event.key === 'ArrowUp' && lastItem) {\n        lastItem.setFocus();\n        return;\n      }\n    }\n\n    // All other keys open the menu and initiate type to select\n    if (!this.isOpen) {\n      event.stopPropagation();\n      event.preventDefault();\n      this.dropdown?.show();\n      this.menu?.typeToSelect(event.key);\n    }\n  };\n\n  private handleLabelClick = () => {\n    this.box?.focus();\n  };\n\n  private handleMenuSelect = (event: CustomEvent) => {\n    const item = event.detail.item;\n\n    const getValue = () => {\n      if (this.multiple) {\n        return this.value.includes(item.value)\n          ? (this.value as []).filter((v) => v !== item.value)\n          : [...this.value, item.value];\n      } else {\n        return item.value;\n      }\n    };\n\n    this.value = getValue();\n\n    this.syncItemsFromValue();\n  };\n\n  private handleMenuShow = (event: CustomEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    this.resizeMenu();\n    this.resizeObserver?.observe(this.host);\n    this.isOpen = true;\n  };\n\n  private handleMenuHide = () => {\n    this.resizeObserver?.unobserve(this.host);\n    this.isOpen = false;\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.syncItemsFromValue();\n  };\n\n  private handleTagInteraction = (event: KeyboardEvent | MouseEvent) => {\n    // Don't toggle the menu when a tag's clear button is activated\n    const path = event.composedPath() as EventTarget[];\n    const clearButton = path.find((el) => {\n      if (el instanceof HTMLElement) {\n        const element = el as HTMLElement;\n        return element.classList.contains('tag__clear');\n      }\n    });\n\n    if (clearButton) {\n      event.stopPropagation();\n    }\n  };\n\n  private resizeMenu() {\n    if (this.menu == null || this.box == null) return;\n    this.menu.style.minWidth = `${this.box.clientWidth}px`;\n\n    if (this.dropdown) {\n      this.dropdown.reposition();\n    }\n  }\n\n  private async syncItemsFromValue() {\n    const items = this.getItems();\n    const value = this.getValueAsArray();\n\n    // Sync checked states\n    items.forEach((item) => (item.checked = value.includes(item.value)));\n\n    // Sync display label\n    if (this.multiple) {\n      const checkedItems: HTMLSixMenuItemElement[] = [];\n      value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));\n\n      this.displayTags = checkedItems.map((item) => {\n        return (\n          <six-tag\n            exportparts=\"base:tag\"\n            type=\"primary\"\n            size={this.size}\n            pill={this.pill}\n            clearable\n            onClick={this.handleTagInteraction}\n            onKeyDown={this.handleTagInteraction}\n            onSix-tag-clear={(event) => {\n              event.stopPropagation();\n              if (!this.disabled) {\n                item.checked = false;\n                this.syncValueFromItems();\n              }\n            }}\n          >\n            {this.getItemLabel(item)}\n          </six-tag>\n        );\n      });\n\n      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {\n        const total = this.displayTags.length;\n        this.displayLabel = '';\n        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);\n        this.displayTags.push(\n          <six-tag exportparts=\"base:tag\" type=\"info\" size={this.size}>\n            +{total - this.maxTagsVisible}\n          </six-tag>\n        );\n      }\n    } else {\n      this.displayLabel = this.extractLabelForSelectedItem(value, items);\n      this.displayTags = [];\n    }\n\n    if (!isValueEmpty(this.value)) {\n      this.touched = true;\n    }\n    if (this.touched && this.input != null) {\n      this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;\n      this.invalid = !(await this.input.checkValidity());\n    }\n  }\n\n  private extractLabelForSelectedItem(value: string[], items: HTMLSixMenuItemElement[]): string {\n    if (value.length === 0 || (value.length === 1 && value[0] === '')) {\n      return '';\n    }\n\n    if (this.options !== null) {\n      const selectedOption = this.options.find((item) => item.value === value[0]);\n      return selectedOption?.value || '';\n    }\n\n    const checkedItem = items.find((item) => item.value === value[0]);\n    return checkedItem ? this.getItemLabel(checkedItem) : '';\n  }\n\n  private syncValueFromItems() {\n    const items = this.getItems();\n    const checkedItems = items.filter((item) => item.checked);\n    const checkedValues = checkedItems.map((item) => item.value);\n    this.value = this.multiple\n      ? this.getValueAsArray().filter((val) => checkedValues.includes(val))\n      : checkedValues.length > 0\n      ? checkedValues[0]\n      : '';\n  }\n\n  private displayError() {\n    return this.invalid && (!this.errorOnBlur || (!this.hasFocus && !this.isOpen));\n  }\n\n  render() {\n    const hasSelection = this.hasSelection();\n\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText != null && this.customErrorText !== '' ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        onLabelClick={this.handleLabelClick}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <six-dropdown\n          part=\"base\"\n          ref={(el) => (this.dropdown = el)}\n          hoist={this.hoist}\n          closeOnSelect={!this.multiple}\n          containingElement={this.host}\n          disableHideOnEnterAndSpace={this.autocomplete}\n          class={{\n            select: true,\n            'select--open': this.isOpen,\n            'select--empty': this.value?.length === 0,\n            'select--focused': this.hasFocus,\n            'select--clearable': this.clearable,\n            'select--disabled': this.disabled,\n            'select--multiple': this.multiple,\n            'select--has-tags': this.multiple && hasSelection,\n            'select--placeholder-visible': this.displayLabel === '',\n            'select--small': this.size === 'small',\n            'select--medium': this.size === 'medium',\n            'select--large': this.size === 'large',\n            'select--pill': this.pill,\n            'select--invalid': this.invalid,\n          }}\n          onKeyDown={this.handleSelectAll}\n          onSix-dropdown-show={this.handleMenuShow}\n          onSix-dropdown-hide={this.handleMenuHide}\n          filterPlaceholder={this.filterPlaceholder}\n          filterDebounce={this.filterDebounce}\n          filter={this.filter}\n          asyncFilter={this.asyncFilter}\n        >\n          <div\n            slot=\"trigger\"\n            ref={(el) => (this.box = el)}\n            id={this.inputId}\n            class={{\n              select__box: true,\n              'select__box--line': this.line,\n              'select__box--autocomplete': this.autocomplete,\n            }}\n            role=\"combobox\"\n            aria-labelledby={this.labelId}\n            aria-describedby={this.helpTextId}\n            aria-haspopup=\"true\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            tabIndex={this.disabled ? -1 : 0}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onKeyDown={this.handleKeyDown}\n          >\n            <span class=\"select__label\">\n              {this.displayTags.length > 0 ? (\n                <span part=\"tags\" class=\"select__tags\">\n                  {this.displayTags}\n                </span>\n              ) : (\n                this.displayLabel || this.placeholder\n              )}\n            </span>\n\n            {this.clearable && hasSelection && (\n              <six-icon-button\n                exportparts=\"base:clear-button\"\n                class=\"select__clear\"\n                name=\"clear\"\n                size=\"small\"\n                onClick={this.handleClearClick}\n                tabindex=\"-1\"\n              />\n            )}\n\n            {this.hasMenuItems() && (\n              <span part=\"icon\" class=\"select__icon\">\n                <six-icon size=\"medium\">expand_more</six-icon>\n              </span>\n            )}\n\n            {/*\n              The hidden input tricks the browser's built-in validation so it works as expected. We use an input instead\n              of a select because, otherwise, iOS will show a list of options during validation.\n            */}\n            <six-input\n              ref={(el) => (this.input = el)}\n              class={{\n                select__input: true,\n                'select__hidden-select': !this.autocomplete,\n              }}\n              aria-hidden=\"true\"\n              required={this.required}\n              onInvalid={this.handleInvalid}\n              onFocus={this.handleFocus}\n              clearable={this.clearable}\n              placeholder={this.placeholder}\n              pill={this.pill}\n              disabled={this.disabled}\n              size={this.size}\n              tabIndex={-1}\n            />\n          </div>\n\n          <six-menu\n            ref={(el) => (this.menu = el)}\n            part=\"menu\"\n            class={{\n              select__menu: true,\n              'select__menu--filtered': this.filter || this.asyncFilter,\n              'select__menu--hidden': !this.hasMenuItems(),\n            }}\n            onSix-menu-item-selected={this.handleMenuSelect}\n            items={this.options}\n            virtualScroll={this.virtualScroll}\n            remove-box-shadow\n          >\n            <slot onSlotchange={this.handleSlotChange} />\n          </six-menu>\n        </six-dropdown>\n      </FormControl>\n    );\n  }\n\n  private hasSelection() {\n    return this.multiple ? this.value.length > 0 : this.value !== '';\n  }\n}\n"],"version":3}
+{"file":"six-select.entry.js","mappings":"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","names":[],"sources":["src/components/six-select/util.ts","src/components/six-select/six-select.scss?tag=six-select&encapsulation=shadow","src/components/six-select/six-select.tsx"],"sourcesContent":["export interface MenuItem {\n  value: string;\n}\n\nexport function getValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): string | string[] {\n  if (multiple) {\n    if (Array.isArray(value)) {\n      return getSelectedValues(value, menuItems);\n    } else {\n      return getSelectedValuesFromString(value, menuItems);\n    }\n  }\n\n  return getSelectedMenuItem(value, menuItems)?.value ?? '';\n}\n\nexport function isValidValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): boolean {\n  if (value === '') {\n    return true;\n  }\n\n  if (multiple) {\n    if (Array.isArray(value)) {\n      if (value.length === 0) {\n        return true;\n      }\n      return getSelectedValues(value, menuItems).length === value.length;\n    }\n    return getSelectedValuesFromString(value, menuItems).length > 0;\n  }\n\n  return getSelectedMenuItem(value, menuItems) != null;\n}\n\nexport function valueEquals(a: string | string[], b: string | string[]): boolean {\n  if (Array.isArray(a) && Array.isArray(b)) {\n    return a.length === b.length && a.every((element, index) => element === b[index]);\n  } else if (typeof a === 'string' && typeof b === 'string') {\n    return a === b;\n  }\n  return false;\n}\n\nexport function isValueEmpty(value: string | string[]): boolean {\n  if (Array.isArray(value)) {\n    return value.length === 0;\n  }\n  return value === '';\n}\n\nfunction getSelectedValues(values: unknown[], menuItems: MenuItem[]): string[] {\n  return menuItems.filter((menuItem) => values.includes(menuItem.value)).map((menuItem) => menuItem.value);\n}\n\nfunction getSelectedValuesFromString(value: unknown, menuItems: MenuItem[]): string[] {\n  return menuItems.filter((menuItem) => value === menuItem.value).map((menuItem) => menuItem.value);\n}\n\nfunction getSelectedMenuItem(value: unknown, menuItems: MenuItem[]): MenuItem | undefined {\n  return menuItems.find((item) => value === item.value);\n}\n","@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host {\n  display: block;\n}\n\n.select {\n  display: block;\n}\n\n.select__box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  font-size: var(--six-input-font-size-medium);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  overflow: hidden;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: pointer;\n\n  &--line {\n    border: none;\n    border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n  }\n\n  &--autocomplete {\n    border: none;\n    overflow: initial;\n  }\n}\n\n.select:not(.select--disabled) .select__box:hover {\n  background-color: var(--six-input-background-color-hover);\n  color: var(--six-input-color-hover);\n\n  border-bottom-color: var(--six-input-border-color-hover);\n\n  &:not(.select__box--line) {\n    border-color: var(--six-input-border-color-hover);\n  }\n}\n\n.select:not(.select--disabled) .select__box:focus {\n  background-color: var(--six-input-background-color-focus);\n  outline: none;\n  color: var(--six-input-color-focus);\n\n  border-bottom-color: var(--six-input-border-color-focus);\n  box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n  &:not(.select__box--line) {\n    border-color: var(--six-input-border-color-focus);\n    box-shadow: var(--six-input-focus-shadow);\n  }\n}\n\n.select--disabled {\n  .select__box {\n    background-color: var(--six-input-background-color-disabled);\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n    outline: none;\n\n    &:not(.select__box--line) {\n      border-color: var(--six-input-border-color-disabled);\n    }\n  }\n\n  .select__tags,\n  .select__clear {\n    pointer-events: none;\n  }\n}\n\n.select--invalid:not(.select--disabled):not(.select--focused) {\n  .select__box {\n    border-bottom-color: var(--six-input-border-color-danger);\n\n    &:not(.input--line) {\n      border-color: var(--six-input-border-color-danger);\n    }\n  }\n}\n\n.select__label {\n  flex-shrink: 1;\n  flex-grow: 1;\n  align-items: center;\n  user-select: none;\n  width: 0; /* needed for firefox because due to \"white-space: nowrap\" the default is set to max-content */\n\n  @include hide-scrollbar;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\n}\n\n.select__clear {\n  flex-shrink: 0;\n  flex-grow: 0;\n  display: inline;\n}\n\n.select__icon {\n  flex-shrink: 0;\n  flex-grow: 0;\n  display: inline;\n  transition: var(--six-transition-medium) transform ease;\n}\n\n.select--open .select__icon {\n  transform: rotate(-180deg);\n}\n\n// Placeholder\n.select--placeholder-visible .select__label {\n  color: var(--six-input-placeholder-color);\n}\n\n.select--disabled.select--placeholder-visible .select__label {\n  color: var(--six-input-placeholder-color-disabled);\n}\n\n// Tags\n.select__tags {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: left;\n  margin-left: var(--six-spacing-xx-small);\n}\n\n// Hidden input (for form control validation to show)\n.select__hidden-select {\n  @include visually-hidden();\n}\n\n.select__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--small {\n  .select__box {\n    border-radius: var(--six-input-border-radius-small);\n    font-size: var(--six-input-font-size-small);\n    min-height: var(--six-height-small);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .select__label {\n    margin: 0 var(--six-input-spacing-small);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n\n  .select__tags {\n    padding-bottom: 2px;\n\n    six-tag {\n      padding-top: 2px;\n    }\n\n    six-tag:not(:last-of-type) {\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\n  }\n}\n\n.select--medium {\n  .select__box {\n    border-radius: var(--six-input-border-radius-medium);\n    font-size: var(--six-input-font-size-medium);\n    min-height: var(--six-height-medium);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .select__label {\n    margin: 0 var(--six-input-spacing-medium);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n\n  .select__tags {\n    padding-bottom: 3px;\n\n    six-tag {\n      padding-top: 3px;\n    }\n\n    six-tag:not(:last-of-type) {\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\n  }\n}\n\n.select--large {\n  .select__box {\n    border-radius: var(--six-input-border-radius-large);\n    font-size: var(--six-input-font-size-large);\n    min-height: var(--six-height-large);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .select__label {\n    margin: 0 var(--six-input-spacing-large);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n\n  .select__tags {\n    padding-bottom: 4px;\n\n    six-tag {\n      padding-top: 4px;\n    }\n\n    six-tag:not(:last-of-type) {\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--pill {\n  &.select--small .select__box {\n    border-radius: var(--six-height-small);\n  }\n\n  &.select--medium .select__box {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.select--large .select__box {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Menu\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.select {\n  &__menu {\n    max-width: 50vw;\n    width: fit-content;\n\n    &--filtered {\n      // fixes problem where when filter is enabled the popup has the width of the input field but the menu has the width\n      // of the trigger element and we thus get weird UI glitches when trigger is narrower than filter input field\n      width: 100% !important;\n    }\n\n    &--hidden {\n      // hide the menu panel if there are no menu items\n      display: none;\n    }\n  }\n}\n\n// fixes problem where six-select height changes when size=\"small\" and clearing button is visible\nsix-icon-button::part(base) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { getTextContent, hasSlot } from '../../utils/slot';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { SixMenuItemData } from '../six-menu/six-menu';\nimport { isValueEmpty } from './util';\n\nexport interface SixSelectChangePayload {\n  value: string | string[];\n  isSelected: boolean;\n}\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 select's options in the form of menu items.\n * @slot label - The select's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the select.\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 clear-button - The input's clear button, exported from six-input.\n * @part form-control - The form control that wraps the label, input, and help text.\n * @part help-text - The select's help text.\n * @part icon - The select's icon.\n * @part label - The select's label.\n * @part menu - The select menu, a six-menu element.\n * @part tag - The multiselect option, a six-tag element.\n * @part tags - The container in which multiselect options are rendered.\n */\n\n@Component({\n  tag: 'six-select',\n  styleUrl: 'six-select.scss',\n  shadow: true,\n})\nexport class SixSelect {\n  private box?: HTMLElement;\n  private dropdown?: HTMLSixDropdownElement;\n  private input?: HTMLSixInputElement;\n  private inputId = `select-${++id}`;\n  private labelId = `select-label-${id}`;\n  private helpTextId = `select-help-text-${id}`;\n  private errorTextId = `select-error-text-${id}`;\n  private menu?: HTMLSixMenuElement;\n  private resizeObserver?: ResizeObserver;\n  private touched = false;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixSelectElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() isOpen = false;\n  @State() displayLabel = '';\n  @State() displayTags: HTMLSixTagElement[] = [];\n\n  /** Set to true to enable multiselect. */\n  @Prop() multiple = false;\n\n  /**\n   * The maximum number of tags to show when `multiple` is true. After the maximum, \"+n\" will be shown to indicate the\n   * number of additional items that are selected. Set to -1 to remove the limit.\n   */\n  @Prop() maxTagsVisible = 3;\n\n  /** Set to true to disable the select control. */\n  @Prop() disabled = false;\n\n  /** The select's name. */\n  @Prop() name = '';\n\n  /** The select's placeholder text. */\n  @Prop() placeholder = '';\n\n  /** The filter's placeholder text. */\n  @Prop() filterPlaceholder?: string;\n\n  /** The debounce for the filter callbacks. */\n  @Prop() filterDebounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** The select's size. */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /** The value of the control. This will be a string or an array depending on `multiple`. */\n  @Prop({ mutable: true }) value: string | string[] = '';\n\n  /** Set to true to draw a pill-style select with rounded edges. */\n  @Prop() pill = false;\n\n  /** The select's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** Set to true to add a clear button when the select is populated. */\n  @Prop() clearable = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText = '';\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  /** Set to render as line */\n  @Prop() line = false;\n\n  /** Set to true to allow filtering for entries in the dropdown */\n  @Prop() filter = false;\n\n  /**\n   * Set to true to allow async filtering.\n   * When you enter something in the search field the component will only emit an event but not filter any elements itself.\n   * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself\n   */\n  @Prop() asyncFilter = false;\n\n  /**\n   * Set to true to turn the six-select into an autocomplete.\n   */\n  @Prop() autocomplete = false;\n\n  /** The debounce for when the input changes for autocompletes should be emitted */\n  @Prop() inputDebounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */\n  @Prop() options: SixMenuItemData[] | null = null;\n\n  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n  @Prop() virtualScroll = false;\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    if (this.disabled && this.isOpen) {\n      this.dropdown?.hide();\n    }\n  }\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('multiple')\n  handleMultipleChange() {\n    // Cast to array | string based on `this.multiple`\n    const value = this.getValueAsArray();\n    this.value = this.multiple ? value : value[0] || '';\n    this.syncItemsFromValue();\n  }\n\n  @Watch('value')\n  async handleValueChange() {\n    if (this.multiple && !Array.isArray(this.value)) {\n      this.value = [];\n    }\n\n    if (!this.multiple && typeof this.value !== 'string') {\n      this.value = '';\n    }\n\n    await this.syncItemsFromValue();\n    if (this.input) {\n      this.sixChange.emit({ value: this.value, isSelected: true });\n    }\n  }\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-select-change' }) sixChange!: EventEmitter<SixSelectChangePayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-select-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-select-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    if (this.virtualScroll && this.options === null) {\n      console.error('Options must be defined when using virtual scrolling');\n    }\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-select-change', 'change', this.host);\n    this.eventListeners.forward('six-select-blur', 'blur', this.host);\n    this.eventListeners.forward('six-select-focus', 'focus', this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    if (this.multiple && this.value != null) {\n      this.value = this.getValueAsArray();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.input == null) return;\n    const input = this.input;\n    this.resizeObserver = new ResizeObserver(() => this.resizeMenu());\n\n    // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning\n    requestAnimationFrame(() => this.syncItemsFromValue());\n\n    this.eventListeners.add(\n      input,\n      'six-input-input',\n      debounce((event) => {\n        const enteredValue = input.value;\n        this.clearValues();\n        this.sixChange.emit({ value: enteredValue, isSelected: false });\n        event.stopPropagation();\n      }, this.inputDebounce)\n    );\n\n    input.value = this.hasSelection() ? this.displayLabel : '';\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the select. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.hasFocus = true;\n    this.box?.focus(options);\n  }\n\n  private getItemLabel(item: HTMLSixMenuItemElement): string {\n    const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n    if (slot != null) {\n      return getTextContent(slot);\n    } else {\n      // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed\n      return item.textContent ?? '';\n    }\n  }\n\n  private getItems(): HTMLSixMenuItemElement[] {\n    if (this.options !== null) {\n      return this.options.map((option) => <six-menu-item value={option.value}>{option.label}</six-menu-item>);\n    }\n\n    return [...this.host.querySelectorAll('six-menu-item')];\n  }\n\n  private hasMenuItems() {\n    return this.getItems().length > 0;\n  }\n\n  private getValueAsArray() {\n    const values = Array.isArray(this.value) ? this.value : [this.value];\n    // enforce that the values are converted to 'string' before the value is compared\n    return values.map(String);\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleClearClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.clearValues();\n  };\n\n  private clearValues() {\n    this.value = this.multiple ? [] : '';\n    this.syncItemsFromValue();\n  }\n\n  private handleSelectAll = (event: KeyboardEvent) => {\n    const nonFilteredItems = this.getItems().filter((item) => item.style.display !== 'none');\n    const keyName = event.key;\n    const keyCode = event.code;\n\n    if (keyName === 'Control') {\n      return;\n    }\n\n    if (this.isOpen && this.multiple && keyCode === 'KeyA' && event.ctrlKey) {\n      event.preventDefault();\n      const hasDeselectedOptions = nonFilteredItems.some((opt) => !opt.disabled && !opt.checked);\n\n      nonFilteredItems\n        .filter((option) => !option.disabled)\n        .forEach((option) => (option.checked = hasDeselectedOptions));\n      const checkedItems = nonFilteredItems.filter((option) => option.checked).map((option) => option.value);\n      this.value = hasDeselectedOptions ? checkedItems : [];\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n\n    const items = this.getItems();\n    const firstItem = items[0];\n    const lastItem = items[items.length - 1];\n\n    // Ignore key presses on tags\n    if (target.tagName.toLowerCase() === 'six-tag') {\n      return;\n    }\n\n    // Tabbing out of the control closes it\n    if (event.key === 'Tab') {\n      if (this.isOpen) {\n        this.dropdown?.hide();\n      }\n      return;\n    }\n\n    // Up/down opens the menu\n    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      event.preventDefault();\n\n      // Show the menu if it's not already open\n      if (!this.isOpen) {\n        this.dropdown?.show();\n      }\n\n      // Focus on a menu item\n      if (event.key === 'ArrowDown' && firstItem) {\n        firstItem.setFocus();\n        return;\n      }\n\n      if (event.key === 'ArrowUp' && lastItem) {\n        lastItem.setFocus();\n        return;\n      }\n    }\n\n    // All other keys open the menu and initiate type to select\n    if (!this.isOpen) {\n      event.stopPropagation();\n      event.preventDefault();\n      this.dropdown?.show();\n      this.menu?.typeToSelect(event.key);\n    }\n  };\n\n  private handleLabelClick = () => {\n    this.box?.focus();\n  };\n\n  private handleMenuSelect = (event: CustomEvent) => {\n    const item = event.detail.item;\n\n    const getValue = () => {\n      if (this.multiple) {\n        return this.value.includes(item.value)\n          ? (this.value as []).filter((v) => v !== item.value)\n          : [...this.value, item.value];\n      } else {\n        return item.value;\n      }\n    };\n\n    this.value = getValue();\n\n    this.syncItemsFromValue();\n  };\n\n  private handleMenuShow = (event: CustomEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    this.resizeMenu();\n    this.resizeObserver?.observe(this.host);\n    this.isOpen = true;\n  };\n\n  private handleMenuHide = () => {\n    this.resizeObserver?.unobserve(this.host);\n    this.isOpen = false;\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.syncItemsFromValue();\n  };\n\n  private handleTagInteraction = (event: KeyboardEvent | MouseEvent) => {\n    // Don't toggle the menu when a tag's clear button is activated\n    const path = event.composedPath() as EventTarget[];\n    const clearButton = path.find((el) => {\n      if (el instanceof HTMLElement) {\n        const element = el as HTMLElement;\n        return element.classList.contains('tag__clear');\n      }\n    });\n\n    if (clearButton) {\n      event.stopPropagation();\n    }\n  };\n\n  private resizeMenu() {\n    if (this.menu == null || this.box == null) return;\n    this.menu.style.minWidth = `${this.box.clientWidth}px`;\n\n    if (this.dropdown) {\n      this.dropdown.reposition();\n    }\n  }\n\n  private async syncItemsFromValue() {\n    const items = this.getItems();\n    const value = this.getValueAsArray();\n\n    // Sync checked states\n    items.forEach((item) => (item.checked = value.includes(item.value)));\n\n    // Sync display label\n    if (this.multiple) {\n      const checkedItems: HTMLSixMenuItemElement[] = [];\n      value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));\n\n      this.displayTags = checkedItems.map((item) => {\n        return (\n          <six-tag\n            exportparts=\"base:tag\"\n            type=\"primary\"\n            size={this.size}\n            pill={this.pill}\n            clearable\n            onClick={this.handleTagInteraction}\n            onKeyDown={this.handleTagInteraction}\n            onSix-tag-clear={(event) => {\n              event.stopPropagation();\n              if (!this.disabled) {\n                item.checked = false;\n                this.syncValueFromItems();\n              }\n            }}\n          >\n            {this.getItemLabel(item)}\n          </six-tag>\n        );\n      });\n\n      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {\n        const total = this.displayTags.length;\n        this.displayLabel = '';\n        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);\n        this.displayTags.push(\n          <six-tag exportparts=\"base:tag\" type=\"info\" size={this.size}>\n            +{total - this.maxTagsVisible}\n          </six-tag>\n        );\n      }\n    } else {\n      this.displayLabel = this.extractLabelForSelectedItem(value, items);\n      this.displayTags = [];\n    }\n\n    if (!isValueEmpty(this.value)) {\n      this.touched = true;\n    }\n    if (this.touched && this.input != null) {\n      this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;\n    }\n  }\n\n  private extractLabelForSelectedItem(value: string[], items: HTMLSixMenuItemElement[]): string {\n    if (value.length === 0 || (value.length === 1 && value[0] === '')) {\n      return '';\n    }\n\n    if (this.options !== null) {\n      const selectedOption = this.options.find((item) => item.value === value[0]);\n      return selectedOption?.value || '';\n    }\n\n    const checkedItem = items.find((item) => item.value === value[0]);\n    return checkedItem ? this.getItemLabel(checkedItem) : '';\n  }\n\n  private syncValueFromItems() {\n    const items = this.getItems();\n    const checkedItems = items.filter((item) => item.checked);\n    const checkedValues = checkedItems.map((item) => item.value);\n    this.value = this.multiple\n      ? this.getValueAsArray().filter((val) => checkedValues.includes(val))\n      : checkedValues.length > 0\n      ? checkedValues[0]\n      : '';\n  }\n\n  render() {\n    const hasSelection = this.hasSelection();\n\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        size={this.size}\n        onLabelClick={this.handleLabelClick}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <six-dropdown\n          part=\"base\"\n          ref={(el) => (this.dropdown = el)}\n          hoist={this.hoist}\n          closeOnSelect={!this.multiple}\n          containingElement={this.host}\n          disableHideOnEnterAndSpace={this.autocomplete}\n          class={{\n            select: true,\n            'select--open': this.isOpen,\n            'select--empty': this.value?.length === 0,\n            'select--focused': this.hasFocus,\n            'select--clearable': this.clearable,\n            'select--disabled': this.disabled,\n            'select--multiple': this.multiple,\n            'select--has-tags': this.multiple && hasSelection,\n            'select--placeholder-visible': this.displayLabel === '',\n            'select--small': this.size === 'small',\n            'select--medium': this.size === 'medium',\n            'select--large': this.size === 'large',\n            'select--pill': this.pill,\n            'select--invalid': this.invalid,\n          }}\n          onKeyDown={this.handleSelectAll}\n          onSix-dropdown-show={this.handleMenuShow}\n          onSix-dropdown-hide={this.handleMenuHide}\n          filterPlaceholder={this.filterPlaceholder}\n          filterDebounce={this.filterDebounce}\n          filter={this.filter}\n          asyncFilter={this.asyncFilter}\n        >\n          <div\n            slot=\"trigger\"\n            ref={(el) => (this.box = el)}\n            id={this.inputId}\n            class={{\n              select__box: true,\n              'select__box--line': this.line,\n              'select__box--autocomplete': this.autocomplete,\n            }}\n            role=\"combobox\"\n            aria-labelledby={this.labelId}\n            aria-describedby={this.helpTextId}\n            aria-haspopup=\"true\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            tabIndex={this.disabled ? -1 : 0}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onKeyDown={this.handleKeyDown}\n          >\n            <span class=\"select__label\">\n              {this.displayTags.length > 0 ? (\n                <span part=\"tags\" class=\"select__tags\">\n                  {this.displayTags}\n                </span>\n              ) : (\n                this.displayLabel || this.placeholder\n              )}\n            </span>\n\n            {this.clearable && hasSelection && (\n              <six-icon-button\n                exportparts=\"base:clear-button\"\n                class=\"select__clear\"\n                name=\"clear\"\n                size=\"small\"\n                onClick={this.handleClearClick}\n                tabindex=\"-1\"\n              />\n            )}\n\n            {this.hasMenuItems() && (\n              <span part=\"icon\" class=\"select__icon\">\n                <six-icon size=\"medium\">expand_more</six-icon>\n              </span>\n            )}\n\n            {/*\n              The hidden input tricks the browser's built-in validation so it works as expected. We use an input instead\n              of a select because, otherwise, iOS will show a list of options during validation.\n            */}\n            <six-input\n              ref={(el) => (this.input = el)}\n              class={{\n                select__input: true,\n                'select__hidden-select': !this.autocomplete,\n              }}\n              aria-hidden=\"true\"\n              required={this.required}\n              onFocus={this.handleFocus}\n              clearable={this.clearable}\n              placeholder={this.placeholder}\n              pill={this.pill}\n              disabled={this.disabled}\n              size={this.size}\n              tabIndex={-1}\n            />\n          </div>\n\n          <six-menu\n            ref={(el) => (this.menu = el)}\n            part=\"menu\"\n            class={{\n              select__menu: true,\n              'select__menu--filtered': this.filter || this.asyncFilter,\n              'select__menu--hidden': !this.hasMenuItems(),\n            }}\n            onSix-menu-item-selected={this.handleMenuSelect}\n            items={this.options}\n            virtualScroll={this.virtualScroll}\n            remove-box-shadow\n          >\n            <slot onSlotchange={this.handleSlotChange} />\n          </six-menu>\n        </six-dropdown>\n      </FormControl>\n    );\n  }\n\n  private hasSelection() {\n    return this.multiple ? this.value.length > 0 : this.value !== '';\n  }\n}\n"],"version":3}

package/dist/esm/six-sidebar-item-group.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-371fb9d4.js';
-import { h as hasSlot } from './slot-2e64df19.js';
+import { r as registerInstance, h, g as getElement } from './index-8a74f992.js';
+import { h as hasSlot } from './slot-ad36df3a.js';
 
 const sixSidebarItemGroupCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.six-sidebar-item-group--childless::part(content){padding:0 !important}.six-sidebar-item-group--subgroup::part(header){background-color:transparent !important}.six-sidebar-item-group__header-icon{margin-left:16px;transform:translate(0px, -3px)}.six-sidebar-details__header{display:flex}.six-sidebar-details__header-icon{margin-right:1em}";
 

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

@@ -1 +1 @@
-{"file":"six-sidebar-item-group.entry.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,6cAA6c;;MCe/d,mBAAmB;;;IAsCtB,gBAAW,GAAG,CAAC,IAAY;MACjC,IAAI,IAAI,CAAC,qBAAqB,EAAE;QAC9B,QACE,WAAK,IAAI,EAAE,IAAI,IACb,YAAM,IAAI,EAAE,IAAI,GAAS,CACrB,EACN;OACH;MAED,QACE,YACE,IAAI,EAAE,IAAI,EACV,YAAY,EAAE;;UACZ,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,GAAG,OAAO,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,QACE,mBACE,KAAK,EAAE;QACL,mCAAmC,EAAE,CAAC,IAAI,CAAC,QAAQ;QACnD,kCAAkC,EAAE,IAAI,CAAC,UAAU,EAAE;OACtD,EACD,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,WAAW,EAC9B,UAAU,EAAE,IAAI,CAAC,QAAQ,IAEzB,WAAK,IAAI,EAAC,SAAS,IACjB,WAAK,KAAK,EAAC,6BAA6B,IACrC,IAAI,CAAC,IAAI,IAAI,gBAAU,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,IAAI,CAAY,EACtF,IAAI,CAAC,IAAI,CACN,CACF,EACL,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EACjC,eAAQ,CACI,EACd;GACH;;;;;;;","names":[],"sources":["./src/components/six-sidebar-item-group/six-sidebar-item-group.scss?tag=six-sidebar-item-group&encapsulation=shadow","./src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.six-sidebar-item-group--childless::part(content) {\n  padding: 0 !important;\n}\n\n.six-sidebar-item-group--subgroup::part(header) {\n  background-color: transparent !important;\n}\n\n.six-sidebar-item-group__header-icon {\n  margin-left: 16px;\n  transform: translate(0px, -3px);\n}\n\n.six-sidebar-details__header {\n  display: flex;\n}\n\n.six-sidebar-details__header-icon {\n  margin-right: 1em;\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested 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--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.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,6cAA6c;;MCe/d,mBAAmB;;;IAsCtB,gBAAW,GAAG,CAAC,IAAY;MACjC,IAAI,IAAI,CAAC,qBAAqB,EAAE;QAC9B,QACE,WAAK,IAAI,EAAE,IAAI,IACb,YAAM,IAAI,EAAE,IAAI,GAAS,CACrB,EACN;OACH;MAED,QACE,YACE,IAAI,EAAE,IAAI,EACV,YAAY,EAAE;;UACZ,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,GAAG,OAAO,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,QACE,mBACE,KAAK,EAAE;QACL,mCAAmC,EAAE,CAAC,IAAI,CAAC,QAAQ;QACnD,kCAAkC,EAAE,IAAI,CAAC,UAAU,EAAE;OACtD,EACD,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,WAAW,EAC9B,UAAU,EAAE,IAAI,CAAC,QAAQ,IAEzB,WAAK,IAAI,EAAC,SAAS,IACjB,WAAK,KAAK,EAAC,6BAA6B,IACrC,IAAI,CAAC,IAAI,IAAI,gBAAU,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,IAAI,CAAY,EACtF,IAAI,CAAC,IAAI,CACN,CACF,EACL,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EACjC,eAAQ,CACI,EACd;GACH;;;;;;;","names":[],"sources":["src/components/six-sidebar-item-group/six-sidebar-item-group.scss?tag=six-sidebar-item-group&encapsulation=shadow","src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.six-sidebar-item-group--childless::part(content) {\n  padding: 0 !important;\n}\n\n.six-sidebar-item-group--subgroup::part(header) {\n  background-color: transparent !important;\n}\n\n.six-sidebar-item-group__header-icon {\n  margin-left: 16px;\n  transform: translate(0px, -3px);\n}\n\n.six-sidebar-details__header {\n  display: flex;\n}\n\n.six-sidebar-details__header-icon {\n  margin-right: 1em;\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested 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--childless': !this.hasItems,\n          'six-sidebar-item-group--subgroup': this.isSubgroup(),\n        }}\n        inline={true}\n        open={this.open}\n        summary-icon={this.summaryIcon}\n        hasContent={this.hasItems}\n      >\n        <div slot=\"summary\">\n          <div class=\"six-sidebar-details__header\">\n            {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n            {this.name}\n          </div>\n        </div>\n        {this.provideSlot('summary-icon')}\n        <slot />\n      </six-details>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-371fb9d4.js';
+import { r as registerInstance, h } from './index-8a74f992.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)}";
 

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

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

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h } from './index-371fb9d4.js';
-import { s as scrollIntoView } from './scroll-180b53fd.js';
+import { r as registerInstance, c as createEvent, h } from './index-8a74f992.js';
+import { s as scrollIntoView } from './scroll-3fb087a2.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}";
 

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

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

package/dist/esm/six-spinner.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-371fb9d4.js';
+import { r as registerInstance, h } from './index-8a74f992.js';
 
 const sixSpinnerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--stroke-width:2px;display:inline-flex}.spinner{display:inline-block;width:1em;height:1em;border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.six-spinner{width:auto;height:auto;position:relative}.six-spinner .six-spinner__container{margin:0;transform:translateX(0)}.six-spinner .six-spinner__container svg{transform:translateX(0)}.six-spinner__container{position:relative;margin:0 auto;top:calc(50% - 20px);z-index:1}.six-spinner__container,.six-spinner__container svg{width:40px;height:40px;display:block;transform:translateX(40px)}.six-spinner path{stroke-dashoffset:70px;stroke-dasharray:70, 444;-webkit-animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite}@-webkit-keyframes six-spinner{to{stroke-dashoffset:-444}}@keyframes six-spinner{to{stroke-dashoffset:-444}}";