@six-group/ui-library 0.0.0-insider.820700f → 0.0.0-insider.9eaaa42

package/dist/ui-library/p-02981b91.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["isValueEmpty","value","Array","isArray","length","sixSelectCss","id","SixSelect","this","inputId","labelId","helpTextId","errorTextId","touched","eventListeners","EventListeners","handleBlur","hasFocus","sixBlur","emit","handleFocus","sixFocus","handleClearClick","event","stopPropagation","clearValues","sixChange","isSelected","handleSelectAll","nonFilteredItems","getItems","filter","item","style","display","keyName","key","keyCode","code","isOpen","multiple","ctrlKey","preventDefault","hasDeselectedOptions","some","opt","disabled","checked","option","forEach","checkedItems","map","handleKeyDown","target","items","firstItem","lastItem","tagName","toLowerCase","_a","dropdown","hide","includes","_b","show","setFocus","_c","_d","menu","typeToSelect","handleLabelClick","box","focus","handleMenuSelect","detail","getValue","v","syncItemsFromValue","handleMenuShow","resizeMenu","resizeObserver","observe","host","handleMenuHide","unobserve","handleSlotChange","hasHelpTextSlot","hasSlot","hasLabelSlot","handleTagInteraction","path","composedPath","clearButton","find","el","HTMLElement","element","classList","contains","DEFAULT_DEBOUNCE_FAST","handleDisabledChange","handleLabelChange","handleMultipleChange","getValueAsArray","handleValueChange","connectedCallback","virtualScroll","options","console","error","shadowRoot","addEventListener","forward","componentWillLoad","componentDidLoad","input","ResizeObserver","requestAnimationFrame","add","debounce","enteredValue","inputDebounce","hasSelection","displayLabel","disconnectedCallback","removeEventListener","removeAll","getItemLabel","slot","querySelector","getTextContent","textContent","h","label","querySelectorAll","hasMenuItems","values","String","minWidth","clientWidth","reposition","val","push","displayTags","exportparts","type","size","pill","clearable","onClick","onKeyDown","syncValueFromItems","maxTagsVisible","total","slice","extractLabelForSelectedItem","join","selectedOption","checkedItem","checkedValues","render","FormControl","helpText","errorText","onLabelClick","required","displayError","invalid","part","ref","hoist","closeOnSelect","containingElement","disableHideOnEnterAndSpace","autocomplete","class","select","filterPlaceholder","filterDebounce","asyncFilter","select__box","line","role","tabIndex","onBlur","onFocus","select__label","placeholder","name","tabindex","select__input","select__menu","onSlotchange"],"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  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  text-overflow: ellipsis;\n}\n\n.select__label--single {\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: 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      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      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      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  }\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 === '' ? [] : [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    this.sixChange.emit({ value: this.value, isSelected: true });\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      this.sixChange.emit({ value: this.value, isSelected: true });\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    this.sixChange.emit({ value: this.value, isSelected: true });\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      this.sixChange.emit({ value: this.value, isSelected: true });\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: true, 'select__label--single': !this.displayTags.length }}>\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"],"mappings":"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"}

package/dist/ui-library/p-1256cc0a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o}from"./p-6153045b.js";import{f as i}from"./p-5654e4c7.js";const n=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;background:none;border:none;border-radius:var(--six-border-radius-medium);font-size:inherit;color:var(--six-input-icon-color);padding:var(--six-spacing-x-small);cursor:pointer;transition:var(--six-transition-medium) color;-webkit-appearance:none}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--six-input-icon-color-hover)}.icon-button:active:not(.icon-button--disabled){color:var(--six-input-icon-color)}.icon-button:focus{outline:none}.icon-button--disabled{opacity:0.5;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.focus-visible.icon-button:focus{box-shadow:var(--six-button-focus-shadow)}.icon-button ::slotted(six-badge){position:absolute;top:0;right:0;pointer-events:none}.icon-button six-icon[size=xLarge]+::slotted(six-badge){transform:translateY(40%) translateX(-35%)}.icon-button six-icon[size=large]+::slotted(six-badge){transform:translateY(20%) translateX(-20%)}.icon-button six-icon[size=medium]+::slotted(six-badge){transform:translateY(10%) translateX(50%)}.icon-button six-icon[size=xSmall]+::slotted(six-badge){transform:translateY(-25%) translateX(25%)}";const s=class{constructor(o){t(this,o);this.handleClickEvent=t=>{if(this.disabled){t.preventDefault();t.stopPropagation()}};this.name=undefined;this.size="medium";this.label=undefined;this.disabled=false;this.html=undefined}componentDidLoad(){if(this.button!=null){i.observe(this.button)}}disconnectedCallback(){if(this.button!=null){i.unobserve(this.button)}}render(){const t=this.html&&o("span",{innerHTML:this.html});return o("div",{onClick:this.handleClickEvent,class:{"icon-button-wrapper--disabled":this.disabled}},o("button",{ref:t=>this.button=t,part:"base",disabled:this.disabled,class:{"icon-button":true,"icon-button--disabled":this.disabled},type:"button","aria-label":this.label},o("six-icon",{"aria-hidden":"true",size:this.size},this.name),o("slot",null),t))}};s.style=n;export{s as six_icon_button};
-//# sourceMappingURL=p-1256cc0a.entry.js.map

package/dist/ui-library/p-1256cc0a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixIconButtonCss","SixIconButton","this","handleClickEvent","event","disabled","preventDefault","stopPropagation","componentDidLoad","button","focusVisible","observe","disconnectedCallback","unobserve","render","html","h","innerHTML","onClick","class","ref","el","part","type","label","size","name"],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--six-border-radius-medium);\n  font-size: inherit;\n  color: var(--six-input-icon-color);\n  padding: var(--six-spacing-x-small);\n  cursor: pointer;\n  transition: var(--six-transition-medium) color;\n  -webkit-appearance: none;\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.focus-visible.icon-button:focus {\n  box-shadow: var(--six-button-focus-shadow);\n}\n\n.icon-button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n  transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n  transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n  transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n  //  no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n  transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={this.disabled}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type=\"button\"\n          aria-label={this.label}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"],"mappings":"+EAAA,MAAMA,EAAmB,i0C,MCiBZC,EAAa,M,yBA2DhBC,KAAAC,iBAAoBC,IAC1B,GAAIF,KAAKG,SAAU,CACjBD,EAAME,iBACNF,EAAMG,iB,iCAvDmG,S,mCASzE,M,oBAKpC,gBAAAC,GACE,GAAIN,KAAKO,QAAU,KAAM,CACvBC,EAAaC,QAAQT,KAAKO,O,EAI9B,oBAAAG,GACE,GAAIV,KAAKO,QAAU,KAAM,CACvBC,EAAaG,UAAUX,KAAKO,O,EAIhC,MAAAK,GACE,MAAMC,EAAOb,KAAKa,MAAQC,EAAA,QAAMC,UAAWf,KAAKa,OAEhD,OACEC,EAAA,OAAKE,QAAShB,KAAKC,iBAAkBgB,MAAO,CAAE,gCAAiCjB,KAAKG,WAClFW,EAAA,UACEI,IAAMC,GAAQnB,KAAKO,OAASY,EAC5BC,KAAK,OACLjB,SAAUH,KAAKG,SACfc,MAAO,CACL,cAAe,KACf,wBAAyBjB,KAAKG,UAEhCkB,KAAK,SAAQ,aACDrB,KAAKsB,OAEjBR,EAAA,0BAAsB,OAAOS,KAAMvB,KAAKuB,MACrCvB,KAAKwB,MAERV,EAAA,aACCD,G"}

package/dist/ui-library/p-21b3b321.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as s,h as t,g as e}from"./p-6153045b.js";import{f as o}from"./p-5654e4c7.js";const r=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--hide-duration:var(--six-transition-medium);--hide-timing-function:ease;--show-duration:var(--six-transition-medium);--show-timing-function:ease;font-family:var(--six-font-family);display:block}.details{border:solid var(--six-border-width) var(--six-input-border-color);border-radius:var(--six-border-radius-medium);color:var(--six-details-color);overflow-anchor:none;font-size:var(--six-input-font-size-medium)}.details:hover:not(.details--disabled):not(.details--open){border-color:var(--six-input-border-color-hover)}.details.inline{border:none;color:var(--six-sidebar-color)}.details.inline:hover{background-color:var(--six-sidebar-hover-background-color)}.details.inline.details--open{background-color:var(--six-color-web-rock-50)}.details.inline.details--open:hover{border:none;box-shadow:none}.details.inline.details--open>.details__header{color:var(--six-sidebar-color);font-weight:var(--six-font-weight-bold);background-color:var(--six-sidebar-header-background-color)}.details--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);color:var(--six-input-color-disabled)}.details__header{display:flex;align-items:center;border-radius:inherit;padding:var(--six-spacing-medium);user-select:none;cursor:pointer}.details__header:focus{outline:none}.details--disabled .details__header{cursor:not-allowed;border-width:1px}.details--disabled .details__header:focus{outline:none;box-shadow:none}.details__summary{flex:1 1 auto;display:flex;align-items:center}.details__summary-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.2em;transition:var(--six-transition-medium) transform ease}.details--open .details__summary-icon--animate{transform:rotate(-180deg)}.details--open:hover{color:var(--six-input-color-focus)}.details__body{height:0;overflow:hidden;transition-property:height;transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.details--open .details__body{transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.details__content{padding:var(--six-spacing-medium)}";let a=0;const n=class{constructor(t){i(this,t);this.sixShow=s(this,"six-details-show",7);this.sixAfterShow=s(this,"six-details-after-show",7);this.sixHide=s(this,"six-details-hide",7);this.sixAfterHide=s(this,"six-details-after-hide",7);this.componentId=`details-${++a}`;this.isVisible=false;this.handleBodyTransitionEnd=i=>{if(this.body==null)return;const s=i.target;if(i.propertyName==="height"&&s.classList.contains("details__body")){this.body.style.overflow=this.open?"visible":"hidden";this.body.style.height=this.open?"auto":"0";this.open?this.sixAfterShow.emit():this.sixAfterHide.emit();this.body.hidden=!this.open}};this.handleSummaryClick=()=>{var i;if(!this.disabled&&(this.hasContent||this.selectableEmpty)){this.open?this.hide():this.show();(i=this.header)===null||i===void 0?void 0:i.focus()}};this.handleSummaryKeyDown=i=>{if(i.key==="Enter"||i.key===" "){i.preventDefault();this.open?this.hide():this.show()}if(i.key==="ArrowUp"||i.key==="ArrowLeft"){i.preventDefault();this.hide()}if(i.key==="ArrowDown"||i.key==="ArrowRight"){i.preventDefault();this.show()}};this.animateSummaryIcon=true;this.open=false;this.summary="";this.summaryIcon=undefined;this.summaryIconSize="inherit";this.disabled=false;this.inline=false;this.selectableEmpty=false;this.hasContent=true}handleOpenChange(){if(this.body!=null){this.open?this.show():this.hide()}}componentDidLoad(){if(this.details==null||this.body==null)return;o.observe(this.details);this.body.hidden=!this.open;if(this.open){this.show()}}disconnectedCallback(){if(this.details!=null){o.unobserve(this.details)}}async show(){if(this.isVisible||this.body==null)return;const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.body.hidden=false;if(this.body.scrollHeight===0){this.body.style.height="auto";this.body.style.overflow="visible"}else{this.body.style.height=`${this.body.scrollHeight}px`;this.body.style.overflow="hidden"}this.isVisible=true;this.open=true}async hide(){if(!this.isVisible||this.body==null)return;const i=this.body;const s=this.sixHide.emit();if(s.defaultPrevented){this.open=true;return}i.style.height=`${i.scrollHeight}px`;i.style.overflow="hidden";requestAnimationFrame((()=>{i.style.height="0"}));this.isVisible=false;this.open=false}render(){const i=this.hasContent&&(this.summaryIcon||"expand_more");return t("div",{ref:i=>this.details=i,part:"base",class:{details:true,"details--open":this.open,"details--disabled":this.disabled,inline:this.inline}},t("header",{ref:i=>this.header=i,part:"header",id:`${this.componentId}-header`,class:"details__header",role:"button","aria-expanded":this.open?"true":"false","aria-controls":`${this.componentId}-content`,"aria-disabled":this.disabled?"true":"false",tabIndex:this.disabled?-1:0,onClick:this.handleSummaryClick,onKeyDown:this.handleSummaryKeyDown},t("div",{part:"summary",class:"details__summary"},t("slot",{name:"summary"},this.summary)),t("span",{part:"summary-icon",class:{"details__summary-icon":true,"details__summary-icon--animate":this.animateSummaryIcon}},t("slot",{name:"summary-icon",onSlotchange:()=>this.animateSummaryIcon=false},i&&t("six-icon",{size:this.summaryIconSize},i)))),t("div",{ref:i=>this.body=i,class:"details__body",onTransitionEnd:this.handleBodyTransitionEnd},t("div",{part:"content",id:`${this.componentId}-content`,class:"details__content",role:"region","aria-labelledby":`${this.componentId}-header`},t("slot",null))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"]}}};n.style=r;export{n as six_details};
-//# sourceMappingURL=p-21b3b321.entry.js.map

package/dist/ui-library/p-21b3b321.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixDetailsCss","id","SixDetails","this","componentId","isVisible","handleBodyTransitionEnd","event","body","target","propertyName","classList","contains","style","overflow","open","height","sixAfterShow","emit","sixAfterHide","hidden","handleSummaryClick","disabled","hasContent","selectableEmpty","hide","show","_a","header","focus","handleSummaryKeyDown","key","preventDefault","handleOpenChange","componentDidLoad","details","focusVisible","observe","disconnectedCallback","unobserve","sixShow","defaultPrevented","scrollHeight","sixHide","requestAnimationFrame","render","summaryIcon","h","ref","el","part","class","inline","role","tabIndex","onClick","onKeyDown","name","summary","animateSummaryIcon","onSlotchange","size","summaryIconSize","onTransitionEnd"],"sources":["src/components/six-details/six-details.scss?tag=six-details&encapsulation=shadow","src/components/six-details/six-details.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --hide-duration: The length of the hide transition.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --show-duration: The length of the show transition.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --hide-duration: var(--six-transition-medium);\n  --hide-timing-function: ease;\n  --show-duration: var(--six-transition-medium);\n  --show-timing-function: ease;\n\n  font-family: var(--six-font-family);\n  display: block;\n}\n\n.details {\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: var(--six-border-radius-medium);\n  color: var(--six-details-color);\n  overflow-anchor: none;\n  font-size: var(--six-input-font-size-medium);\n\n  &:hover:not(.details--disabled):not(.details--open) {\n    border-color: var(--six-input-border-color-hover);\n  }\n\n  &.inline {\n    border: none;\n    color: var(--six-sidebar-color);\n\n    &:hover {\n      background-color: var(--six-sidebar-hover-background-color);\n    }\n\n    &.details--open {\n      background-color: var(--six-color-web-rock-50);\n\n      &:hover {\n        border: none;\n        box-shadow: none;\n      }\n\n      & > .details__header {\n        color: var(--six-sidebar-color);\n        font-weight: var(--six-font-weight-bold);\n        background-color: var(--six-sidebar-header-background-color);\n      }\n    }\n  }\n}\n\n.details--disabled {\n  background-color: var(--six-input-background-color-disabled);\n  border-color: var(--six-input-border-color-disabled);\n  color: var(--six-input-color-disabled);\n}\n\n.details__header {\n  display: flex;\n  align-items: center;\n  border-radius: inherit;\n  padding: var(--six-spacing-medium);\n  user-select: none;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.focus-visible .details__header:focus {\n}\n\n.details--disabled .details__header {\n  cursor: not-allowed;\n  border-width: 1px;\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n.details__summary {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n}\n\n.details__summary-icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.2em;\n  transition: var(--six-transition-medium) transform ease;\n}\n\n.details--open .details__summary-icon--animate {\n  transform: rotate(-180deg);\n}\n\n.details--open:hover {\n  color: var(--six-input-color-focus);\n}\n\n.details__body {\n  height: 0;\n  overflow: hidden;\n  transition-property: height;\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n}\n\n.details--open .details__body {\n  transition-duration: var(--show-duration);\n  transition-timing-function: var(--show-timing-function);\n}\n\n.details__content {\n  padding: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { EmptyPayload } from '../../utils/types';\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 details' content.\n * @slot summary - The details' summary. Alternatively, you can use the summary prop.\n *\n * @part base - The component's base wrapper.\n * @part header - The summary header.\n * @part summary - The details summary.\n * @part summary-icon - The expand/collapse summary icon.\n * @part content - The details content.\n */\n\n@Component({\n  tag: 'six-details',\n  styleUrl: 'six-details.scss',\n  shadow: true,\n})\nexport class SixDetails {\n  @Element() readonly host!: HTMLSixDetailsElement;\n\n  @State() animateSummaryIcon = true;\n\n  private body?: HTMLElement;\n  private details?: HTMLElement;\n  private header?: HTMLElement;\n  private componentId = `details-${++id}`;\n  private isVisible = false;\n\n  /** Indicates whether the details is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */\n  @Prop() summary = '';\n\n  /** The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead. */\n  @Prop() summaryIcon?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) summaryIconSize:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** Set to true to prevent the user from toggling the details. */\n  @Prop() disabled = false;\n\n  /** Set to true when you want to use six-details inline e.g. in a sidebar */\n  @Prop() inline = false;\n\n  /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children  */\n  @Prop() selectableEmpty = false;\n\n  /** Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' */\n  @Prop() hasContent = true;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.body != null) {\n      this.open ? this.show() : this.hide();\n    }\n  }\n\n  /** Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-details-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details opens and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-details-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  componentDidLoad() {\n    if (this.details == null || this.body == null) return;\n\n    focusVisible.observe(this.details);\n    this.body.hidden = !this.open;\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.details != null) {\n      focusVisible.unobserve(this.details);\n    }\n  }\n\n  /** Shows the detail body */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.body == null) return;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.body.hidden = false;\n\n    if (this.body.scrollHeight === 0) {\n      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open\n      // initially, but not immediately visible (i.e. in a tab panel).\n      this.body.style.height = 'auto';\n      this.body.style.overflow = 'visible';\n    } else {\n      this.body.style.height = `${this.body.scrollHeight}px`;\n      this.body.style.overflow = 'hidden';\n    }\n    this.isVisible = true;\n    this.open = true;\n  }\n\n  /** Hides the detail body */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible || this.body == null) return;\n    const body = this.body;\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    // We can't transition out of `height: auto`, so let's set it to the current height first\n    body.style.height = `${body.scrollHeight}px`;\n    body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      // tslint:disable-next-line: no-unused-expression\n      body.clientWidth; // force a reflow\n      body.style.height = '0';\n    });\n\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  private handleBodyTransitionEnd = (event: TransitionEvent) => {\n    if (this.body == null) return;\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.propertyName === 'height' && target.classList.contains('details__body')) {\n      this.body.style.overflow = this.open ? 'visible' : 'hidden';\n      this.body.style.height = this.open ? 'auto' : '0';\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n      this.body.hidden = !this.open;\n    }\n  };\n\n  private handleSummaryClick = () => {\n    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {\n      this.open ? this.hide() : this.show();\n      this.header?.focus();\n    }\n  };\n\n  private handleSummaryKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.open ? this.hide() : this.show();\n    }\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.show();\n    }\n  };\n\n  render() {\n    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');\n\n    return (\n      <div\n        ref={(el) => (this.details = el)}\n        part=\"base\"\n        class={{\n          details: true,\n          'details--open': this.open,\n          'details--disabled': this.disabled,\n          inline: this.inline,\n        }}\n      >\n        <header\n          ref={(el) => (this.header = el)}\n          part=\"header\"\n          id={`${this.componentId}-header`}\n          class=\"details__header\"\n          role=\"button\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls={`${this.componentId}-content`}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleSummaryClick}\n          onKeyDown={this.handleSummaryKeyDown}\n        >\n          <div part=\"summary\" class=\"details__summary\">\n            <slot name=\"summary\">{this.summary}</slot>\n          </div>\n\n          <span\n            part=\"summary-icon\"\n            class={{\n              'details__summary-icon': true,\n              'details__summary-icon--animate': this.animateSummaryIcon,\n            }}\n          >\n            <slot name=\"summary-icon\" onSlotchange={() => (this.animateSummaryIcon = false)}>\n              {summaryIcon && <six-icon size={this.summaryIconSize}>{summaryIcon}</six-icon>}\n            </slot>\n          </span>\n        </header>\n\n        <div ref={(el) => (this.body = el)} class=\"details__body\" onTransitionEnd={this.handleBodyTransitionEnd}>\n          <div\n            part=\"content\"\n            id={`${this.componentId}-content`}\n            class=\"details__content\"\n            role=\"region\"\n            aria-labelledby={`${this.componentId}-header`}\n          >\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-29ac3d7d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as a,H as i,g as o}from"./p-6153045b.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);border-radius:4px;color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;transition:var(--six-transition-fast) box-shadow, var(--six-transition-fast) color}.tab:focus{outline:none}.tab:focus:not(.tab--disabled){color:var(--six-tab-color-active)}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}";let r=0;const l=class{constructor(a){t(this,a);this.sixClose=s(this,"six-tab-close",7);this.componentId=`tab-${++r}`;this.panel="";this.active=false;this.closable=false;this.disabled=false}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this)}async setFocus(t){var s;(s=this.tab)===null||s===void 0?void 0:s.focus(t)}async removeFocus(){var t;(t=this.tab)===null||t===void 0?void 0:t.blur()}handleCloseClick(){this.sixClose.emit()}render(){return a(i,{id:this.host.id||this.componentId},a("div",{part:"base",ref:t=>this.tab=t,class:{tab:true,"tab--active":this.active,"tab--closable":this.closable,"tab--disabled":this.disabled},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0"},a("slot",null),this.closable&&a("six-icon-button",{name:"close",size:"xSmall",exportparts:"base:close-button",class:"tab__close-button",onClick:this.handleCloseClick,tabIndex:-1,"aria-hidden":"true"})))}get host(){return o(this)}};l.style=e;export{l as six_tab};
-//# sourceMappingURL=p-29ac3d7d.entry.js.map

package/dist/ui-library/p-29ac3d7d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixTabCss","id","SixTab","this","componentId","connectedCallback","handleCloseClick","bind","setFocus","options","_a","tab","focus","removeFocus","blur","sixClose","emit","render","h","Host","host","part","ref","el","class","active","closable","disabled","role","tabindex","name","size","exportparts","onClick","tabIndex"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-semibold);\n  border-radius: 4px;\n  color: var(--six-tab-color);\n  padding: var(--six-spacing-medium) var(--six-spacing-large);\n  white-space: nowrap;\n  user-select: none;\n  cursor: pointer;\n  transition: var(--six-transition-fast) box-shadow, var(--six-transition-fast) color;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n  }\n\n  &.tab--active:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n    font-weight: var(--six-font-weight-bold);\n  }\n\n  &.tab--closable {\n    padding-right: var(--six-spacing-small);\n  }\n\n  &.tab--disabled {\n    color: var(--six-tab-color-disabled);\n    cursor: not-allowed;\n  }\n\n  &:hover:not(.tab--disabled) {\n    color: var(--six-tab-color-hover);\n  }\n}\n\n.tab__close-button {\n  font-size: var(--six-font-size-large);\n  margin-left: var(--six-spacing-xx-small);\n\n  &::part(base) {\n    padding: var(--six-spacing-xxx-small);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\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 tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  private componentId = `tab-${++id}`;\n  private tab?: HTMLElement;\n\n  @Element() host!: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab?.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab?.blur();\n  }\n\n  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,kkCCGlB,IAAIC,EAAK,E,MAmBIC,EAAM,M,iEACTC,KAAAC,YAAc,SAASH,I,WAME,G,YAGC,M,cAGf,M,cAGiB,K,CAKpC,iBAAAI,GACEF,KAAKG,iBAAmBH,KAAKG,iBAAiBC,KAAKJ,K,CAKrD,cAAMK,CAASC,G,OACbC,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEE,MAAMH,E,CAKlB,iBAAMI,G,OACJH,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEI,M,CAGJ,gBAAAR,GACNH,KAAKY,SAASC,M,CAGhB,MAAAC,GACE,OAEEC,EAACC,EAAI,CAAClB,GAAIE,KAAKiB,KAAKnB,IAAME,KAAKC,aAC7Bc,EAAA,OACEG,KAAK,OACLC,IAAMC,GAAQpB,KAAKQ,IAAMY,EACzBC,MAAO,CACLb,IAAK,KAGL,cAAeR,KAAKsB,OACpB,gBAAiBtB,KAAKuB,SACtB,gBAAiBvB,KAAKwB,UAExBC,KAAK,MAAK,gBACKzB,KAAKwB,SAAW,OAAS,QAAO,gBAChCxB,KAAKsB,OAAS,OAAS,QACtCI,SAAU1B,KAAKwB,WAAaxB,KAAKsB,OAAS,KAAO,KAEjDP,EAAA,aACCf,KAAKuB,UACJR,EAAA,mBACEY,KAAK,QACLC,KAAK,SACLC,YAAY,oBACZR,MAAM,oBACNS,QAAS9B,KAAKG,iBACd4B,UAAW,EAAC,cACA,U"}

package/dist/ui-library/p-2a141e10.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as s,h as t}from"./p-6153045b.js";import{s as e}from"./p-1f18768a.js";const o=":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);padding:0 var(--six-spacing-small)}.sidebar__container:not(.sidebar--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.sidebar--left{color:var(--six-sidebar-color);background-color:var(--six-sidebar-background-color);transition:var(--six-transition-medium) margin-left;background-size:300vw 70%;background-position:bottom;background-repeat:no-repeat}.sidebar--right{transition:var(--six-transition-medium) margin-right}.sidebar--open.sidebar--left{margin-right:2px}.sidebar--open.sidebar--right{margin-left:2px}";const n=i=>{var s;return((s=i===null||i===void 0?void 0:i.tagName)===null||s===void 0?void 0:s.toLowerCase())==="six-sidebar-item-group"};const r=class{constructor(t){i(this,t);this.sixShow=s(this,"six-sidebar-show",7);this.sixAfterShow=s(this,"six-sidebar-after-show",7);this.sixHide=s(this,"six-sidebar-hide",7);this.sixAfterHide=s(this,"six-sidebar-after-hide",7);this.sixInitialFocus=s(this,"six-sidebar-initial-focus",7);this.willShow=false;this.willHide=false;this.handleTransitionEnd=i=>{const s=i.target;if(i.type==="transitionend"&&s.classList.contains("sidebar__container")){this.resetTransitionVariables()}};this.closeSiblingDetailsOnShow=i=>{const s=i.target;if(this.sidebar!=null){e(s,this.sidebar)}const t=i=>{var t;let e=s;while(i(e)!=null){e=i(e);if(n(e)){const i=(t=e===null||e===void 0?void 0:e.shadowRoot)===null||t===void 0?void 0:t.querySelector("six-details");if(i!=null){i.open=false}}}};t((i=>i===null||i===void 0?void 0:i.previousElementSibling));t((i=>i===null||i===void 0?void 0:i.nextElementSibling))};this.isVisible=false;this.position="left";this.open=false;this.width="16rem";this.toggled=false}handleOpenChange(){this.open?this.show():this.hide()}componentWillLoad(){if(this.open){void this.show();this.resetTransitionVariables()}}componentDidRender(){this.setupTogglableMenuItems()}disconnectedCallback(){var i;(i=this.sidebar)===null||i===void 0?void 0:i.removeEventListener("six-details-show",this.closeSiblingDetailsOnShow)}setupTogglableMenuItems(){if(!this.toggled||this.sidebar==null)return;this.markAllMenuItemsAsSelectableEmpty();this.sidebar.addEventListener("six-details-show",this.closeSiblingDetailsOnShow)}markAllMenuItemsAsSelectableEmpty(){var i;const s=(i=this.sidebar)===null||i===void 0?void 0:i.querySelector("slot");const t=(s===null||s===void 0?void 0:s.assignedElements())||[];const e=[];while(t.length>0){const i=t.pop();if((i===null||i===void 0?void 0:i.shadowRoot)==null){continue}const s=i.shadowRoot.querySelectorAll("six-details");e.push(...s);const o=Array.from(i.children).filter(n);t.push(...o)}e.forEach((i=>i.selectableEmpty=true))}async toggle(){if(this.willShow||this.willHide){return}if(this.open){await this.hide()}else{await this.show()}}async show(){if(this.willShow){return}const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true}async hide(){if(this.willHide){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false}async selectItemByIndex(i){if(this.sidebar==null)return;const s=this.sidebar.querySelector("slot");const t=((s===null||s===void 0?void 0:s.assignedElements())||[]).flatMap((i=>{var s;const t=(s=i.shadowRoot)===null||s===void 0?void 0:s.querySelector("six-details");if(t==null){return[]}return[t]}));if(i<0||i>t.length-1){console.error(`Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${i}`);return}await t[i].show()}async selectItemByName(i){var s,t,e;const o=(s=this.sidebar)===null||s===void 0?void 0:s.querySelector("slot");const n=o===null||o===void 0?void 0:o.assignedElements();if(n==null){return}const r=n.findIndex((s=>(s===null||s===void 0?void 0:s.name)===i));const a=(e=(t=n.at(r))===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector("six-details");await(a===null||a===void 0?void 0:a.show())}resetTransitionVariables(){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}render(){return t("host",{class:"six-sidebar"},t("div",{class:{sidebar__container:true,"sidebar--visible":this.isVisible,"sidebar--open":this.open,"sidebar--left":this.position==="left","sidebar--right":this.position==="right"},style:{width:this.width,[`margin-${this.position}`]:this.open?"0":`calc(1rem - ${this.width})`},ref:i=>this.sidebar=i,"aria-hidden":this.open?"false":"true",onTransitionEnd:this.handleTransitionEnd},t("slot",null)))}static get watchers(){return{open:["handleOpenChange"]}}};r.style=o;export{r as six_sidebar};
-//# sourceMappingURL=p-2a141e10.entry.js.map

package/dist/ui-library/p-2a141e10.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixSidebarCss","isSidebarItemGroup","node","_a","tagName","toLowerCase","SixSidebar","this","willShow","willHide","handleTransitionEnd","event","target","type","classList","contains","resetTransitionVariables","closeSiblingDetailsOnShow","clickedMenuItem","sidebar","scrollIntoView","closeAllSiblingsBySiblingProperty","getSibling","detailsElement","shadowRoot","querySelector","open","previousElementSibling","nextElementSibling","handleOpenChange","show","hide","componentWillLoad","componentDidRender","setupTogglableMenuItems","disconnectedCallback","removeEventListener","toggled","markAllMenuItemsAsSelectableEmpty","addEventListener","slot","nodes","assignedElements","menuItems","length","pop","menuItemsForCurrentNode","querySelectorAll","push","newItemGroups","Array","from","children","filter","forEach","details","selectableEmpty","toggle","sixShow","emit","defaultPrevented","isVisible","sixHide","selectItemByIndex","index","menuItemsOnRootLevel","flatMap","el","console","error","selectItemByName","value","sidebarItemGroups","indexOfSelectedElement","findIndex","name","selectedItem","_c","_b","at","sixAfterShow","sixAfterHide","render","h","class","sidebar__container","position","style","width","ref","onTransitionEnd"],"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      padding: 0 var(--six-spacing-small);\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"],"mappings":"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"}

package/dist/ui-library/p-3d9de119.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as r,g as i}from"./p-6153045b.js";import{E as s}from"./p-7d95def3.js";import{F as e}from"./p-d42c2025.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--height:var(--six-selection-control-toggle-size);--thumb-size:calc(var(--six-selection-control-toggle-size) - 4px);--width:calc(var(--height) * 2);display:inline-block}.switch{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.switch__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--width);height:var(--height);background-color:var(--six-selection-control-color-disabled);border-radius:var(--height);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color}.switch__control .switch__thumb{width:var(--thumb-size);height:var(--thumb-size);background-color:var(--six-input-background-color);border-radius:50%;transform:translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color, var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow}.switch__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-hover)}.switch--checked .switch__control{background-color:var(--six-selection-control-color)}.switch--checked .switch__control .switch__thumb{background-color:var(--six-color-white);transform:translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2))}.switch.switch--checked:not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-focus)}.switch--disabled{cursor:not-allowed;color:var(--six-selection-control-color-disabled)}.switch--disabled .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch--disabled.switch--checked .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch__label{line-height:var(--height);margin-left:0.5em;user-select:none}';let a=0;const n=class{constructor(r){t(this,r);this.sixBlur=o(this,"six-switch-blur",7);this.sixChange=o(this,"six-switch-change",7);this.sixFocus=o(this,"six-switch-focus",7);this.switchId=`switch-${++a}`;this.labelId=`switch-label-${a}`;this.errorTextId=`input-error-text-${a}`;this.eventListeners=new s;this.handleClick=()=>{if(this.inputElement!=null){this.checked=this.inputElement.checked;this.sixChange.emit(this.checked)}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit(this.checked)};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleKeyDown=t=>{if(t.key==="ArrowLeft"){t.preventDefault();this.checked=false;this.sixChange.emit(this.checked)}if(t.key==="ArrowRight"){t.preventDefault();this.checked=true;this.sixChange.emit(this.checked)}};this.handleMouseDown=t=>{var o;t.preventDefault();(o=this.inputElement)===null||o===void 0?void 0:o.focus()};this.hasFocus=false;this.name="";this.value="on";this.disabled=false;this.required=false;this.checked=false;this.label="";this.errorText="";this.invalid=false}handleCheckedChange(){if(this.inputElement!=null){this.inputElement.checked=this.checked;this.checked=this.inputElement.checked}}connectedCallback(){this.eventListeners.forward("six-switch-change","change",this.host);this.eventListeners.forward("six-switch-blur","blur",this.host);this.eventListeners.forward("six-switch-focus","focus",this.host)}disconnectedCallback(){this.eventListeners.removeAll()}async setFocus(t){var o;(o=this.inputElement)===null||o===void 0?void 0:o.focus(t)}async removeFocus(){var t;(t=this.inputElement)===null||t===void 0?void 0:t.blur()}render(){return r(e,{inputId:this.switchId,label:this.label,labelId:this.labelId,hasLabelSlot:false,errorTextId:this.errorTextId,errorText:this.errorText,size:"medium",disabled:this.disabled,required:this.required,displayError:this.invalid},r("label",{part:"base",htmlFor:this.switchId,class:{switch:true,"switch--checked":this.checked,"switch--disabled":this.disabled,"switch--focused":this.hasFocus},onMouseDown:this.handleMouseDown},r("span",{part:"control",class:"switch__control"},r("span",{part:"thumb",class:"switch__thumb"}),r("input",{ref:t=>this.inputElement=t,id:this.switchId,type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,role:"switch","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onClick:this.handleClick,onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyDown:this.handleKeyDown})),r("span",{part:"label",id:this.labelId,class:"switch__label"},r("slot",null))))}get host(){return i(this)}static get watchers(){return{checked:["handleCheckedChange"]}}};n.style=l;export{n as six_switch};
-//# sourceMappingURL=p-3d9de119.entry.js.map

package/dist/ui-library/p-3d9de119.entry.js.map

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

package/dist/ui-library/p-4705a51e.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as r,g as i}from"./p-6153045b.js";import{s,g as a}from"./p-1f18768a.js";import{f as e}from"./p-5654e4c7.js";const l=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--tabs-border-color:var(--six-tab-border-color);display:block}.tab-group{display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:flex;position:relative}.tab-group .tab-group__active-tab-indicator{position:absolute;transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) width ease}.tab-group:not(.focus-visible) ::slotted(six-tab){--focus-ring:none}.tab-group--has-scroll-controls .tab-group__nav-container{position:relative;padding:0 var(--six-spacing-x-large)}.tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:var(--six-spacing-x-large)}.tab-group__scroll-button--left{left:0}.tab-group__scroll-button--right{right:0}.tab-group--top{flex-direction:column}.tab-group--top .tab-group__nav-container{order:1}.tab-group--top .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--top .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--top .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;border-bottom:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--top .tab-group__active-tab-indicator{bottom:-2px;border-bottom:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--top .tab-group__body{order:2}.tab-group--bottom{flex-direction:column}.tab-group--bottom .tab-group__nav-container{order:2}.tab-group--bottom .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--bottom .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--bottom .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;border-top:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--bottom .tab-group__active-tab-indicator{top:-2px;border-top:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--bottom .tab-group__body{order:1}.tab-group--left{flex-direction:row}.tab-group--left .tab-group__nav-container{order:1}.tab-group--left .tab-group__tabs{flex:0 0 auto;flex-direction:column;border-right:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--left .tab-group__active-tab-indicator{right:-2px;border-right:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--left .tab-group__body{flex:1 1 auto;order:2}.tab-group--right{flex-direction:row}.tab-group--right .tab-group__nav-container{order:2}.tab-group--right .tab-group__tabs{flex:0 0 auto;flex-direction:column;border-left:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--right .tab-group__active-tab-indicator{left:-2px;border-left:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--right .tab-group__body{flex:1 1 auto;order:1}";const n=class{constructor(r){t(this,r);this.sixTabShow=o(this,"six-tab-show",7);this.sixTabHide=o(this,"six-tab-hide",7);this.handleClick=t=>{const o=t.target;const r=o.closest("six-tab");const i=r===null||r===void 0?void 0:r.closest("six-tab-group");if(i!==this.host){return false}if(r!=null){this.setActiveTab(r)}};this.handleKeyDown=t=>{if(this.nav==null)return;const o=t.target;const r=o.closest("six-tab");const i=r===null||r===void 0?void 0:r.closest("six-tab-group");if(i!==this.host){return false}if(["Enter"," "].includes(t.key)){if(r!=null){this.setActiveTab(r);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const o=document.activeElement;if(o&&o.tagName.toLowerCase()==="six-tab"){const r=this.getAllTabs();let i=r.indexOf(o);if(t.key==="Home"){i=0}else if(t.key==="End"){i=r.length-1}else if(t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(t.key==="ArrowRight"){i=Math.min(r.length-1,i+1)}r[i].setFocus({preventScroll:true});if(["top","bottom"].includes(this.placement)){s(r[i],this.nav,"horizontal")}t.preventDefault()}}};this.handleScrollLeft=()=>{if(this.nav==null)return;this.nav.scroll({left:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})};this.handleScrollRight=()=>{if(this.nav==null)return;this.nav.scroll({left:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})};this.syncActiveTabIndicator=()=>{if(this.activeTabIndicator==null||this.nav==null)return;const t=this.getActiveTab();if(t!=null){this.activeTabIndicator.style.display="block"}else{this.activeTabIndicator.style.display="none";return}const o=t.clientWidth;const r=t.clientHeight;const i=a(t,this.nav);const s=i.top+this.nav.scrollTop;const e=i.left+this.nav.scrollLeft;switch(this.placement){case"top":case"bottom":this.activeTabIndicator.style.width=`${o}px`;this.activeTabIndicator.style.height="";this.activeTabIndicator.style.transform=`translateX(${e}px)`;break;case"left":case"right":this.activeTabIndicator.style.width="";this.activeTabIndicator.style.height=`${r}px`;this.activeTabIndicator.style.transform=`translateY(${s}px)`;break}};this.hasScrollControls=false;this.placement="top";this.noScrollControls=false}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}componentDidLoad(){if(this.tabGroup==null||this.nav==null)return;const t=new IntersectionObserver(((t,o)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab()||this.getAllTabs()[0],false);o.unobserve(t[0].target)}}));t.observe(this.host);e.observe(this.tabGroup);this.resizeObserver=new ResizeObserver((()=>this.updateScrollControls()));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()));this.mutationObserver=new MutationObserver((t=>{if(t.some((t=>{var o;return!["aria-labelledby","aria-controls"].includes((o=t.attributeName)!==null&&o!==void 0?o:"")}))){setTimeout((()=>this.setAriaLabels()))}}));this.mutationObserver.observe(this.host,{attributes:true,childList:true,subtree:true})}disconnectedCallback(){if(this.mutationObserver==null||this.tabGroup==null||this.nav==null||this.resizeObserver==null){return}this.mutationObserver.disconnect();e.unobserve(this.tabGroup);this.resizeObserver.unobserve(this.nav)}async show(t){const o=this.getAllTabs();const r=o.find((o=>o.panel===t));if(r!=null){this.setActiveTab(r)}}getAllTabs(t=false){var o;const r=(o=this.tabs)===null||o===void 0?void 0:o.querySelector("slot");if(r==null)return[];return[...r.assignedElements()].filter((o=>t?o.tagName.toLowerCase()==="six-tab":o.tagName.toLowerCase()==="six-tab"&&!o.disabled))}getAllPanels(){var t;const o=(t=this.body)===null||t===void 0?void 0:t.querySelector("slot");if(o==null)return[];return[...o.assignedElements()].filter((t=>t.tagName.toLowerCase()==="six-tab-panel"))}getActiveTab(){return this.getAllTabs().find((t=>t.active))}updateScrollControls(){if(this.nav==null)return;this.hasScrollControls=this.noScrollControls?false:["top","bottom"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth}setActiveTab(t,o=true){if(this.nav==null)return;if(t!=null&&t!==this.activeTab&&!t.disabled){const r=this.activeTab;this.activeTab=t;this.getAllTabs().map((t=>t.active=t===this.activeTab));this.getAllPanels().map((t=>{var o;return t.active=t.name===((o=this.activeTab)===null||o===void 0?void 0:o.panel)}));this.syncActiveTabIndicator();if(["top","bottom"].includes(this.placement)){s(this.activeTab,this.nav,"horizontal")}if(o){if(r!=null){this.sixTabHide.emit({name:r.panel})}this.sixTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllTabs();const o=this.getAllPanels();t.map((t=>{var r,i;const s=o.find((o=>o.name===t.panel));if(s!=null){t.setAttribute("aria-controls",(r=s.getAttribute("id"))!==null&&r!==void 0?r:"");s.setAttribute("aria-labelledby",(i=t.getAttribute("id"))!==null&&i!==void 0?i:"")}}))}render(){return r("div",{part:"base",ref:t=>this.tabGroup=t,class:{"tab-group":true,"tab-group--top":this.placement==="top","tab-group--bottom":this.placement==="bottom","tab-group--left":this.placement==="left","tab-group--right":this.placement==="right","tab-group--has-scroll-controls":this.hasScrollControls},onClick:this.handleClick,onKeyDown:this.handleKeyDown},r("div",{class:"tab-group__nav-container"},this.hasScrollControls&&r("six-icon-button",{class:"tab-group__scroll-button tab-group__scroll-button--left",exportparts:"base:scroll-button",name:"chevron_left",onClick:this.handleScrollLeft}),r("div",{ref:t=>this.nav=t,key:"nav",part:"nav",class:"tab-group__nav"},r("div",{ref:t=>this.tabs=t,part:"tabs",class:"tab-group__tabs",role:"tablist"},r("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"tab-group__active-tab-indicator"}),r("slot",{name:"nav",onSlotchange:this.syncActiveTabIndicator}))),this.hasScrollControls&&r("six-icon-button",{class:"tab-group__scroll-button tab-group__scroll-button--right",exportparts:"base:scroll-button",name:"chevron_right",onClick:this.handleScrollRight})),r("div",{ref:t=>this.body=t,part:"body",class:"tab-group__body"},r("slot",{onSlotchange:this.syncActiveTabIndicator})))}get host(){return i(this)}static get watchers(){return{placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"]}}};n.style=l;export{n as six_tab_group};
-//# sourceMappingURL=p-4705a51e.entry.js.map

package/dist/ui-library/p-4705a51e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixTabGroupCss","SixTabGroup","this","handleClick","event","target","tab","closest","tabGroup","host","setActiveTab","handleKeyDown","nav","includes","key","preventDefault","activeEl","document","activeElement","tagName","toLowerCase","tabs","getAllTabs","index","indexOf","length","Math","max","min","setFocus","preventScroll","placement","scrollIntoView","handleScrollLeft","scroll","left","scrollLeft","clientWidth","behavior","handleScrollRight","syncActiveTabIndicator","activeTabIndicator","getActiveTab","style","display","width","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","transform","handlePlacementChange","handleNoScrollControlsChange","updateScrollControls","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","setAriaLabels","unobserve","observe","focusVisible","resizeObserver","ResizeObserver","requestAnimationFrame","mutationObserver","MutationObserver","mutations","some","mutation","_a","attributeName","setTimeout","attributes","childList","subtree","disconnectedCallback","disconnect","show","panel","find","el","includeDisabled","slot","querySelector","assignedElements","filter","disabled","getAllPanels","body","active","hasScrollControls","noScrollControls","scrollWidth","emitEvents","activeTab","previousTab","map","name","sixTabHide","emit","sixTabShow","panels","setAttribute","getAttribute","_b","render","h","part","ref","class","onClick","onKeyDown","exportparts","role","onSlotchange"],"sources":["src/components/six-tab-group/six-tab-group.scss?tag=six-tab-group&encapsulation=shadow","src/components/six-tab-group/six-tab-group.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hide-scrollbar';\n\n/**\n * @prop --tabs-border-color: The color of the border that separates tabs.\n */\n:host {\n  --tabs-border-color: var(--six-tab-border-color);\n  display: block;\n}\n\n.tab-group {\n  display: flex;\n  border: solid 1px transparent;\n  border-radius: 0;\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n  }\n\n  .tab-group__active-tab-indicator {\n    position: absolute;\n    transition: var(--six-transition-fast) transform ease, var(--six-transition-fast) width ease;\n  }\n\n  // Remove the focus ring when the user isn't interacting with a keyboard\n  &:not(.focus-visible) ::slotted(six-tab) {\n    --focus-ring: none;\n  }\n}\n\n.tab-group--has-scroll-controls .tab-group__nav-container {\n  position: relative;\n  padding: 0 var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button--left {\n  left: 0;\n}\n\n.tab-group__scroll-button--right {\n  right: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Top\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--top {\n  flex-direction: column;\n\n  .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n    @include hide-scrollbar();\n  }\n\n  .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-bottom: solid var(--six-tab-border-width) var(--tabs-border-color);\n  }\n\n  .tab-group__active-tab-indicator {\n    bottom: -2px;\n    border-bottom: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n  }\n\n  .tab-group__body {\n    order: 2;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Bottom\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--bottom {\n  flex-direction: column;\n\n  .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n    @include hide-scrollbar();\n  }\n\n  .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-top: solid var(--six-tab-border-width) var(--tabs-border-color);\n  }\n\n  .tab-group__active-tab-indicator {\n    top: calc(-1 * 2px);\n    border-top: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n  }\n\n  .tab-group__body {\n    order: 1;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Left\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--left {\n  flex-direction: row;\n\n  .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-right: solid var(--six-tab-border-width) var(--tabs-border-color);\n  }\n\n  .tab-group__active-tab-indicator {\n    right: calc(-1 * 2px);\n    border-right: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n  }\n\n  .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Right\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--right {\n  flex-direction: row;\n\n  .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--six-tab-border-width) var(--tabs-border-color);\n  }\n\n  .tab-group__active-tab-indicator {\n    left: calc(-1 * 2px);\n    border-left: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n  }\n\n  .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { getOffset } from '../../utils/offset';\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\n\nexport interface SixTabShowPayload {\n  name: string;\n}\n\nexport interface SixTabHidePayload {\n  name: string;\n}\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 nav - Used for grouping tabs in the tab group.\n * @slot - Used for grouping tab panels in the tab group.\n *\n * @part base - The component's base wrapper.\n * @part nav - The tab group navigation container.\n * @part tabs - The container that wraps the slotted tabs.\n * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tab's container.\n * @part body - The tab group body where tab panels are slotted in.\n * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.\n */\n@Component({\n  tag: 'six-tab-group',\n  styleUrl: 'six-tab-group.scss',\n  shadow: true,\n})\nexport class SixTabGroup {\n  private activeTab?: HTMLSixTabElement;\n  private activeTabIndicator?: HTMLElement;\n  private body?: HTMLElement;\n  private mutationObserver?: MutationObserver;\n  private nav?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private tabGroup?: HTMLElement;\n  private tabs?: HTMLElement;\n\n  @Element() host!: HTMLSixTabGroupElement;\n\n  @State() hasScrollControls = false;\n\n  /** The placement of the tabs. */\n  @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n\n  /** Disables the scroll arrows that appear when tabs overflow. */\n  @Prop() noScrollControls = false;\n\n  @Watch('placement')\n  handlePlacementChange() {\n    this.syncActiveTabIndicator();\n  }\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event({ eventName: 'six-tab-show' }) sixTabShow!: EventEmitter<SixTabShowPayload>;\n\n  /** Emitted when a tab is hidden. */\n  @Event({ eventName: 'six-tab-hide' }) sixTabHide!: EventEmitter<SixTabHidePayload>;\n\n  componentDidLoad() {\n    if (this.tabGroup == null || this.nav == null) return;\n\n    // Set initial tab state when the tabs first become visible\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n\n    focusVisible.observe(this.tabGroup);\n\n    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n    this.resizeObserver.observe(this.nav);\n    requestAnimationFrame(() => this.updateScrollControls());\n\n    // Update aria labels if the DOM changes\n    this.mutationObserver = new MutationObserver((mutations) => {\n      if (\n        mutations.some((mutation) => {\n          return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName ?? '');\n        })\n      ) {\n        setTimeout(() => this.setAriaLabels());\n      }\n    });\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver == null || this.tabGroup == null || this.nav == null || this.resizeObserver == null) {\n      return;\n    }\n\n    this.mutationObserver.disconnect();\n    focusVisible.unobserve(this.tabGroup);\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    const tabs = this.getAllTabs();\n    const tab = tabs.find((el) => el.panel === panel);\n\n    if (tab != null) {\n      this.setActiveTab(tab);\n    }\n  }\n\n  private getAllTabs(includeDisabled = false): HTMLSixTabElement[] {\n    const slot = this.tabs?.querySelector('slot');\n    if (slot == null) return [];\n\n    return [...slot.assignedElements()].filter((el: Element) => {\n      return includeDisabled\n        ? el.tagName.toLowerCase() === 'six-tab'\n        : el.tagName.toLowerCase() === 'six-tab' && !(el as HTMLSixTabElement).disabled;\n    }) as [HTMLSixTabElement];\n  }\n\n  private getAllPanels(): HTMLSixTabPanelElement[] {\n    const slot = this.body?.querySelector('slot');\n    if (slot == null) return [];\n    return [...slot.assignedElements()].filter((el: Element) => el.tagName.toLowerCase() === 'six-tab-panel') as [\n      HTMLSixTabPanelElement\n    ];\n  }\n\n  private getActiveTab() {\n    return this.getAllTabs().find((el) => el.active);\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('six-tab');\n    const tabGroup = tab?.closest('six-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this.host) {\n      return false;\n    }\n\n    if (tab != null) {\n      this.setActiveTab(tab);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.nav == null) return;\n\n    const target = event.target as HTMLElement;\n    const tab = target.closest('six-tab');\n    const tabGroup = tab?.closest('six-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this.host) {\n      return false;\n    }\n\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      if (tab != null) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n      const activeEl = document.activeElement as HTMLSixTabElement;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {\n        const tabs = this.getAllTabs();\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (event.key === 'ArrowLeft') {\n          index = Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n\n        tabs[index].setFocus({ preventScroll: true });\n\n        if (['top', 'bottom'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal');\n        }\n\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleScrollLeft = () => {\n    if (this.nav == null) return;\n\n    this.nav.scroll({\n      left: this.nav.scrollLeft - this.nav.clientWidth,\n      behavior: 'smooth',\n    });\n  };\n\n  private handleScrollRight = () => {\n    if (this.nav == null) return;\n\n    this.nav.scroll({\n      left: this.nav.scrollLeft + this.nav.clientWidth,\n      behavior: 'smooth',\n    });\n  };\n\n  private updateScrollControls() {\n    if (this.nav == null) return;\n\n    this.hasScrollControls = this.noScrollControls\n      ? false\n      : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;\n  }\n\n  private setActiveTab(tab: HTMLSixTabElement, emitEvents = true) {\n    if (this.nav == null) return;\n\n    if (tab != null && tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync tabs and panels\n      this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels().map((el) => (el.active = el.name === this.activeTab?.panel));\n      this.syncActiveTabIndicator();\n\n      if (['top', 'bottom'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab != null) {\n          this.sixTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.sixTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllTabs();\n    const panels = this.getAllPanels();\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel != null) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id') ?? '');\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id') ?? '');\n      }\n    });\n  }\n\n  private syncActiveTabIndicator = () => {\n    if (this.activeTabIndicator == null || this.nav == null) return;\n\n    const tab = this.getActiveTab();\n\n    if (tab != null) {\n      this.activeTabIndicator.style.display = 'block';\n    } else {\n      this.activeTabIndicator.style.display = 'none';\n      return;\n    }\n\n    const width = tab.clientWidth;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.nav);\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left + this.nav.scrollLeft;\n\n    switch (this.placement) {\n      case 'top':\n      case 'bottom':\n        this.activeTabIndicator.style.width = `${width}px`;\n        this.activeTabIndicator.style.height = '';\n        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'left':\n      case 'right':\n        this.activeTabIndicator.style.width = '';\n        this.activeTabIndicator.style.height = `${height}px`;\n        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n  };\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        ref={(el) => (this.tabGroup = el)}\n        class={{\n          'tab-group': true,\n\n          // Placements\n          'tab-group--top': this.placement === 'top',\n          'tab-group--bottom': this.placement === 'bottom',\n          'tab-group--left': this.placement === 'left',\n          'tab-group--right': this.placement === 'right',\n\n          'tab-group--has-scroll-controls': this.hasScrollControls,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <div class=\"tab-group__nav-container\">\n          {this.hasScrollControls && (\n            <six-icon-button\n              class=\"tab-group__scroll-button tab-group__scroll-button--left\"\n              exportparts=\"base:scroll-button\"\n              name=\"chevron_left\"\n              onClick={this.handleScrollLeft}\n            />\n          )}\n          <div ref={(el) => (this.nav = el)} key=\"nav\" part=\"nav\" class=\"tab-group__nav\">\n            <div ref={(el) => (this.tabs = el)} part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n              <div\n                ref={(el) => (this.activeTabIndicator = el)}\n                part=\"active-tab-indicator\"\n                class=\"tab-group__active-tab-indicator\"\n              />\n              <slot name=\"nav\" onSlotchange={this.syncActiveTabIndicator} />\n            </div>\n          </div>\n          {this.hasScrollControls && (\n            <six-icon-button\n              class=\"tab-group__scroll-button tab-group__scroll-button--right\"\n              exportparts=\"base:scroll-button\"\n              name=\"chevron_right\"\n              onClick={this.handleScrollRight}\n            />\n          )}\n        </div>\n\n        <div ref={(el) => (this.body = el)} part=\"body\" class=\"tab-group__body\">\n          <slot onSlotchange={this.syncActiveTabIndicator} />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-4abed9df.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as s,g as e}from"./p-6153045b.js";import{I as r}from"./p-0f510624.js";import{D as n,b as o,a as h}from"./p-698bb2c8.js";import{E as a}from"./p-7d95def3.js";import{h as c}from"./p-15559d38.js";import{a as l,m as p}from"./p-59210f0b.js";const u=()=>{const i=new Date;return{hours:i.getHours(),minutes:i.getMinutes(),seconds:i.getSeconds(),milliseconds:i.getMilliseconds(),has24Hours:true}};const m=12;const d=i=>i>m?i-m:i;const f=()=>{const i=new Date;const t=i.getHours();return{hours:d(t),minutes:i.getMinutes(),seconds:i.getSeconds(),milliseconds:i.getMilliseconds(),has24Hours:false,period:t>=m?"PM":"AM"}};const g=(i=true)=>i?u():f();const x=(i,t)=>{const s=i.split(":");const e=t.split(":");return s.length===e.length};const k=(i,t)=>{const s=i.split(":");const e=t.split(":");if(!x(i,t)){console.error(`Timestring did not match expected format.\nExpected format: ${t}\nReceived timestring: ${i}`)}const r={};s.forEach(((i,t)=>{const s=e[t];switch(s){case"HH":r.hours=Number(i);r.has24Hours=true;break;case"hh":r.hours=Number(i);r.has24Hours=false;break;case"mm":r.minutes=Number(i);break;case"ss":r.seconds=Number(i);break;case"ms":r.milliseconds=Number(i);break;case"aa":r.period=i.toUpperCase()==="PM"?"PM":"AM"}}));return r};const b=(i,t)=>{if(i==null){return""}const s=t.split(":");return s.map((t=>{switch(t){case"HH":case"hh":return String(i.hours).padStart(2,"0");case"mm":return String(i.minutes).padStart(2,"0");case"ss":return String(i.seconds).padStart(2,"0");case"ms":return String(i.milliseconds).padStart(3,"0");case"aa":return String(i.period)}})).join(":")};const v=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.timepicker_clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.timepicker_clear:hover{color:var(--six-input-icon-color-hover)}.timepicker_clear:focus{outline:none}.timepicker_clear--right{right:0;position:absolute}.timepicker_clear--left{right:35px;position:absolute}.timepicker__container{position:relative}.timepicker__popup{display:flex;justify-content:center;min-width:min-content;min-height:145px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.timepicker__popup--is-up{bottom:100%}.timepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.timepicker__separator{display:flex;align-items:center}.timepicker__item--wide{padding-left:0.5rem;padding-right:0.5rem}.input--empty .timepicker_clear{visibility:hidden}.input--hide{display:none}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}";const _=145;const y=class{constructor(s){i(this,s);this.sixChange=t(this,"six-timepicker-change",7);this.sixChangeDebounced=t(this,"six-timepicker-change-debounced",7);this.sixClear=t(this,"six-timepicker-clear",7);this.eventListeners=new a;this.handlePickerChange=(i,t)=>{i.stopPropagation();if(this.popupValue==null){return}this.popupValue[t]=i.detail;const s=b(this.popupValue,this.format);this.value=s;this.sixChange.emit({changedProperty:t,value:this.popupValue,valueAsString:s})};this.handleDocumentMouseDown=i=>{const t=i.composedPath();if(!t.includes(this.host)){this.closePopup();return}};this.handleClearClick=i=>{i.stopPropagation();this.value="";this.sixClear.emit();this.sixChange.emit({value:{},valueAsString:""})};this.format="HH:mm:ss";this.separator=":";this.value="";this.open=false;this.inline=false;this.readonly=false;this.disabled=false;this.placement=undefined;this.size="medium";this.required=false;this.placeholder=undefined;this.errorText="";this.label="";this.invalid=false;this.name="";this.clearable=false;this.iconPosition="left";this.hoist=false;this.timeout=n;this.interval=o;this.defaultTime=undefined;this.debounce=n;this.isPopupContentUp=false;this.isDropDownContentUp=false;this.popupValue={}}async resizeHandler(){this.calcIsPopupContentUp();this.moveOpenHoistedPopup()}async scrollHandler(){this.calcIsPopupContentUp();this.moveOpenHoistedPopup()}valueChanged(){this.updateValue()}invalidChanged(i){if(this.inputElement){this.inputElement.invalid=i}}async setFocus(i){var t;(t=this.inputElement)===null||t===void 0?void 0:t.setFocus(i)}connectedCallback(){this.eventListeners.forward("six-timepicker-change","change",this.host)}componentWillLoad(){this.updateValue();if(this.inline){this.open=true}if(this.open){this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}}componentDidLoad(){if(this.inputElement==null)return;const i=this.inputElement;this.eventListeners.add(this.host,"six-timepicker-change",h((i=>this.sixChangeDebounced.emit(i.detail)),this.debounce));this.eventListeners.add(i,"six-input-input",h((t=>{t.stopPropagation();if(!x(i.value,this.format)){this.value=i.value;this.sixChange.emit({value:{},valueAsString:""});return}this.value=i.value;this.popupValue=k(i.value,this.format);this.sixChange.emit({value:this.popupValue,valueAsString:b(this.popupValue,this.format)})}),this.debounce))}componentDidRender(){l(this.hoist,this.popup,this.inputElement,this.wrapper,_,(i=>this.isDropDownContentUp=i))}disconnectedCallback(){this.eventListeners.removeAll()}updateValue(){if(typeof this.value!=="string"||!x(this.value,this.format)){this.value=""}if(this.value===""){if(this.defaultTime==null){this.popupValue=g(this.is24HourClock())}else{this.popupValue=k(this.defaultTime,this.format)}}else{this.popupValue=k(this.value,this.format)}}calcIsPopupContentUp(){if(this.inputElement==null||this.wrapper==null){return}const i=this.inputElement.getBoundingClientRect();const t=this.wrapper.getBoundingClientRect();const s=Math.max(t.height,_);const e=i.y>window.innerHeight/2;this.isPopupContentUp=e&&window.innerHeight<i.bottom+s}moveOpenHoistedPopup(){p(this.hoist,this.open,this.popup,this.inputElement,this.wrapper,_)}getSixTimeUnitPicker(i){return s("six-item-picker",{class:i.class,timeout:this.timeout,interval:this.interval,padded:true,min:i.min,max:i.max,value:this.popupValue[i.propertyName],items:i.items,type:i.type||r.NUMBER,"padding-length":i.paddingLength,"onSix-item-picker-change":t=>this.handlePickerChange(t,i.propertyName)})}getHour24Picker(){if(!this.is24HourClock()){return}return this.getSixTimeUnitPicker({min:0,max:23,propertyName:"hours"})}is24HourClock(){return this.format.includes("HH")}getHour12Picker(){if(!this.is12HourClock()){return}return this.getSixTimeUnitPicker({min:0,max:11,propertyName:"hours"})}is12HourClock(){return this.format.includes("hh")}getAmPmPicker(){if(!this.is12HourClock()){return}const i=["AM","PM"];return this.getSixTimeUnitPicker({items:i,type:r.CUSTOM,propertyName:"period"})}getMinutePicker(){if(!this.format.includes("mm")){return}return this.getSixTimeUnitPicker({min:0,max:59,propertyName:"minutes"})}getSecondsPicker(){if(!this.format.includes("ss")){return}return this.getSixTimeUnitPicker({min:0,max:59,propertyName:"seconds"})}getMillisecondsPicker(){if(!this.format.includes("ms")){return}return this.getSixTimeUnitPicker({min:0,max:999,class:"timepicker__item--wide",paddingLength:3,propertyName:"milliseconds"})}getSeparator(){return s("div",{class:"timepicker__separator"},s("span",null,this.separator))}getContent(){const i=[this.getHour24Picker(),this.getHour12Picker(),this.getMinutePicker(),this.getSecondsPicker(),this.getMillisecondsPicker()];const t=i.filter((i=>i!==undefined));return t.map(((i,s)=>{if(s===t.length-1){return[i]}return[i,this.getSeparator()]}))}openPopup(){if(!this.open&&!this.disabled){this.open=true;this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}}closePopup(){if(this.inline){return}this.open=false;this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown)}renderClearable(){return this.clearable&&s("button",{slot:"suffix",class:{timepicker_clear:true,"timepicker_clear--right":this.iconPosition==="left","timepicker_clear--left":this.iconPosition==="right"},type:"button",onClick:this.handleClearClick,tabindex:"-1"},s("six-icon",{size:"small"},"clear"))}renderCustomIcon(){const i=c(this.host,"custom-icon")?s("slot",{name:"custom-icon"}):s("six-icon",{size:this.size==="large"?"medium":this.size},"watch_later");return s("span",{slot:"prefix",part:"icon",class:{prefix:true,"prefix--right":this.iconPosition==="right"}},i)}render(){return s("div",{part:"container",ref:i=>this.wrapper=i,class:"timepicker__container"},s("six-input",{ref:i=>this.inputElement=i,part:"input",onClick:()=>this.openPopup(),value:this.value,placeholder:this.placeholder,readonly:this.readonly,disabled:this.disabled,size:this.size,name:this.name,label:this.label,required:this.required,"error-text":this.errorText,class:{"input--empty":this.value==="","input--hide":this.inline}},this.renderCustomIcon(),this.renderClearable(),c(this.host,"label")?s("span",{slot:"label"},s("slot",{name:"label"})):null),this.open&&s("div",{ref:i=>this.popup=i,part:"popup",class:{timepicker__popup:true,"timepicker__popup--is-up":this.placement==null?this.placement==="top":this.isPopupContentUp,"timepicker__popup--is-inline":this.inline}},...this.getContent(),this.getAmPmPicker()))}get host(){return e(this)}static get watchers(){return{value:["valueChanged"],invalid:["invalidChanged"]}}};y.style=v;export{y as six_timepicker};
-//# sourceMappingURL=p-4abed9df.entry.js.map

package/dist/ui-library/p-4abed9df.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getCurrentTimeIn24Hours","now","Date","hours","getHours","minutes","getMinutes","seconds","getSeconds","milliseconds","getMilliseconds","has24Hours","HOURS_IN_12_HOUR_CLOCK_FORMAT","getHoursIn12HourFormat","getCurrentTimeIn12Hours","period","getCurrentTime","isValidTimeString","timeStr","format","timeStringParts","split","timeFormatParts","length","parseTimeString","timeParts","formatParts","console","error","time","forEach","timeStringPart","i","formatStringPart","Number","toUpperCase","createTimeString","map","timeFormatPart","String","padStart","join","sixTimepickerCss","MIN_POPUP_HEIGHT","SixTimepicker","this","eventListeners","EventListeners","handlePickerChange","event","property","stopPropagation","popupValue","detail","timeString","value","sixChange","emit","changedProperty","valueAsString","handleDocumentMouseDown","path","composedPath","includes","host","closePopup","handleClearClick","sixClear","DEFAULT_DEBOUNCE_FAST","DEFAULT_DEBOUNCE_INSANELY_FAST","resizeHandler","calcIsPopupContentUp","moveOpenHoistedPopup","scrollHandler","valueChanged","updateValue","invalidChanged","invalid","inputElement","setFocus","options","_a","connectedCallback","forward","componentWillLoad","inline","open","add","document","componentDidLoad","debounce","sixChangeDebounced","componentDidRender","adjustPopupForHoisting","hoist","popup","wrapper","isUp","isDropDownContentUp","disconnectedCallback","removeAll","defaultTime","is24HourClock","inputBoundingRect","getBoundingClientRect","wrapperBoundingRect","minPopupHeight","Math","max","height","moreSpaceInTop","y","window","innerHeight","isPopupContentUp","bottom","movePopup","getSixTimeUnitPicker","params","h","class","timeout","interval","padded","min","propertyName","items","type","ItemPickerType","NUMBER","paddingLength","getHour24Picker","getHour12Picker","is12HourClock","getAmPmPicker","CUSTOM","getMinutePicker","getSecondsPicker","getMillisecondsPicker","getSeparator","separator","getContent","elementsInOrder","visibleElements","filter","el","undefined","idx","openPopup","disabled","remove","renderClearable","clearable","slot","timepicker_clear","iconPosition","onClick","tabindex","size","renderCustomIcon","icon","hasSlot","name","part","prefix","render","ref","placeholder","readonly","label","required","errorText","timepicker__popup","placement"],"sources":["src/utils/time.util.ts","src/components/six-timepicker/six-timepicker.scss?tag=six-timepicker&encapsulation=shadow","src/components/six-timepicker/six-timepicker.tsx"],"sourcesContent":["export type TimePeriod = 'AM' | 'PM';\n\nexport interface Time {\n  hours?: number;\n  minutes?: number;\n  seconds?: number;\n  milliseconds?: number;\n  has24Hours?: boolean; // true => 24h, false => 12h\n  period?: TimePeriod; // only needed for 12-hour clock\n}\n\nexport type TimeProperties = keyof Time;\n\nexport type TimeFormatChar =\n  | 'HH' // 24h\n  | 'hh' // 12h\n  | 'mm' // minutes\n  | 'ss' // seconds\n  | 'ms' // milliseconds\n  | 'aa'; // period (AM/PM)\n\n/*\n * Supported time formats\n */\nexport type TimeFormat =\n  | 'HH:mm:ss'\n  | 'hh:mm:ss:aa'\n  | 'HH:mm:ss:ms'\n  | 'hh:mm:ss:ms:aa'\n  | 'HH:mm'\n  | 'hh:mm:aa'\n  | 'HH'\n  | 'hh:aa'\n  | 'mm'\n  | 'ss'\n  | 'ms';\n\nexport const getCurrentTimeIn24Hours = (): Time => {\n  const now = new Date();\n  return {\n    hours: now.getHours(),\n    minutes: now.getMinutes(),\n    seconds: now.getSeconds(),\n    milliseconds: now.getMilliseconds(),\n    has24Hours: true,\n  };\n};\n\nconst HOURS_IN_12_HOUR_CLOCK_FORMAT = 12;\n\nexport const getHoursIn12HourFormat = (hours: number) =>\n  hours > HOURS_IN_12_HOUR_CLOCK_FORMAT ? hours - HOURS_IN_12_HOUR_CLOCK_FORMAT : hours;\n\nexport const getCurrentTimeIn12Hours = (): Time => {\n  const now = new Date();\n  const hours = now.getHours();\n  return {\n    hours: getHoursIn12HourFormat(hours),\n    minutes: now.getMinutes(),\n    seconds: now.getSeconds(),\n    milliseconds: now.getMilliseconds(),\n    has24Hours: false,\n    period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? 'PM' : 'AM',\n  };\n};\n\nexport const getCurrentTime = (has24Hours = true): Time => {\n  return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();\n};\n\nexport const isValidTimeString = (timeStr: string, format: TimeFormat) => {\n  const timeStringParts = timeStr.split(':');\n  const timeFormatParts = format.split(':');\n  return timeStringParts.length === timeFormatParts.length;\n};\n\nexport const parseTimeString = (timeStr: string, format: TimeFormat): Time => {\n  const timeParts = timeStr.split(':');\n  const formatParts = format.split(':') as TimeFormatChar[];\n\n  if (!isValidTimeString(timeStr, format)) {\n    console.error(\n      `Timestring did not match expected format.\\nExpected format: ${format}\\nReceived timestring: ${timeStr}`\n    );\n  }\n\n  const time: Time = {};\n\n  timeParts.forEach((timeStringPart, i) => {\n    const formatStringPart: TimeFormatChar = formatParts[i];\n    switch (formatStringPart) {\n      case 'HH':\n        time.hours = Number(timeStringPart);\n        time.has24Hours = true;\n        break;\n      case 'hh':\n        time.hours = Number(timeStringPart);\n        time.has24Hours = false;\n        break;\n      case 'mm':\n        time.minutes = Number(timeStringPart);\n        break;\n      case 'ss':\n        time.seconds = Number(timeStringPart);\n        break;\n      case 'ms':\n        time.milliseconds = Number(timeStringPart);\n        break;\n      case 'aa':\n        time.period = timeStringPart.toUpperCase() === 'PM' ? 'PM' : 'AM';\n    }\n  });\n  return time;\n};\n\nexport const createTimeString = (time: Time | undefined, format: TimeFormat): string => {\n  if (time == null) {\n    return '';\n  }\n\n  const formatParts = format.split(':') as TimeFormatChar[];\n\n  return formatParts\n    .map((timeFormatPart) => {\n      switch (timeFormatPart) {\n        case 'HH':\n        case 'hh':\n          return String(time.hours).padStart(2, '0');\n        case 'mm':\n          return String(time.minutes).padStart(2, '0');\n        case 'ss':\n          return String(time.seconds).padStart(2, '0');\n        case 'ms':\n          return String(time.milliseconds).padStart(3, '0');\n        case 'aa':\n          return String(time.period);\n      }\n    })\n    .join(':');\n};\n","@import 'src/global/component';\n\n:host {\n  display: block;\n  font-family: var(--six-font-family);\n}\n\n.timepicker {\n  &_clear {\n    display: inline-flex;\n    align-items: center;\n    font-size: inherit;\n    color: var(--six-input-icon-color);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: var(--six-transition-fast) color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--six-input-icon-color-hover);\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &--right {\n      right: 0;\n      position: absolute;\n    }\n\n    &--left {\n      right: 35px;\n      position: absolute;\n    }\n  }\n\n  &__container {\n    position: relative;\n  }\n\n  &__popup {\n    display: flex;\n    justify-content: center;\n    min-width: min-content;\n    min-height: 145px;\n    background-color: white;\n    padding: 0.5em 0.5em 1.5em;\n    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);\n    user-select: none;\n    position: absolute;\n    z-index: var(--six-z-index-dropdown);\n    right: 0;\n    left: 0;\n\n    &--is-up {\n      bottom: 100%;\n    }\n\n    &--is-inline {\n      position: initial;\n      box-shadow: none;\n      border: 1px solid var(--six-color-web-rock-400);\n    }\n  }\n\n  &__separator {\n    display: flex;\n    align-items: center;\n  }\n\n  &__item {\n    &--wide {\n      padding-left: 0.5rem;\n      padding-right: 0.5rem;\n    }\n  }\n}\n\n.input--empty .timepicker_clear {\n  visibility: hidden;\n}\n\n.input--hide {\n  display: none;\n}\n\n// Icon position\n.prefix {\n  cursor: pointer;\n\n  &--right {\n    right: 0;\n    display: inline-flex;\n    position: absolute;\n    font-size: inherit;\n    color: var(--six-input-icon-color);\n    border: none;\n    background: none;\n    margin-right: var(--six-input-spacing-medium);\n    transition: var(--six-transition-fast) color;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerType } from '../six-item-picker/types';\nimport {\n  createTimeString,\n  getCurrentTime,\n  isValidTimeString,\n  parseTimeString,\n  Time,\n  TimeFormat,\n  TimeProperties,\n} from '../../utils/time.util';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { SixItemPickerChangePayload } from '../six-item-picker/six-item-picker';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { adjustPopupForHoisting, movePopup } from '../../utils/popup';\n\nexport interface SixTimepickerChange {\n  value?: Time;\n  valueAsString: string;\n  changedProperty?: string;\n}\n\ninterface SixTimeUnitPickerParams {\n  min?: number;\n  max?: number;\n  items?: string[];\n  type?: ItemPickerType;\n  class?: string;\n  paddingLength?: number;\n  propertyName: TimeProperties;\n}\n\nconst MIN_POPUP_HEIGHT = 145;\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n * @part input - The input field\n * @part container - The container of whole component\n * @part popup - The popup of the timepicker component\n *\n */\n@Component({\n  tag: 'six-timepicker',\n  styleUrl: 'six-timepicker.scss',\n  shadow: true,\n})\nexport class SixTimepicker {\n  private eventListeners = new EventListeners();\n  private popup?: HTMLElement;\n  private wrapper?: HTMLElement;\n  private inputElement?: HTMLSixInputElement;\n  @Element() host!: HTMLSixTimepickerElement;\n\n  /**\n   * Define the time format. Valid formats are:\n   *\n   * HH:mm:ss\n   * hh:mm:ss:aa\n   * HH:mm:ss:ms\n   * hh:mm:ss:ms:aa\n   * HH:mm\n   * hh:mm:aa\n   * HH\n   * hh:aa\n   * mm\n   * ss\n   * ms\n   *\n   * where HH is the 24 hour format\n   * and hh is the 12 hour format\n   *\n   * Please notice that when using the 12-hour-clock (hh)\n   * you always need a period indicator (aa). So the time can be parsed as either am or pm\n   * */\n  @Prop() format: TimeFormat = 'HH:mm:ss';\n\n  /**\n   * Define the separator to be shown between the time unit pickers.\n   * Please be aware that this property will modify the displayed separator only.\n   * The separator for a timestring is always expected to be a colon (eg. '13:52:20')\n   * */\n  @Prop() separator = ':';\n\n  /**\n   * The value of the timepicker provided as a string. The string mast match the provided format (or default format)\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /** Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Indicates whether the timepicker should be shown as an inline (always open) component */\n  @Prop({ reflect: true }) inline = false;\n\n  /**\n   * If `true` the user can only select a time via the timepicker but not directly edit the input field.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * If `true` the component is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The enforced placement of the dropdown panel.\n   */\n  @Prop() placement?: 'top' | 'bottom';\n\n  /** Timepicker size. */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /**\n   * The placeholder defines what text to be shown on the input element\n   */\n  @Prop() placeholder?: string;\n\n  /** The input's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** The input's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\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  /** The input's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Set the position of the icon */\n  @Prop() iconPosition: 'left' | 'right' = 'left';\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  /**\n   * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).\n   */\n  @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.\n   */\n  @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n  /**\n   * The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.\n   */\n  @Prop() defaultTime?: string;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\n   * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n   * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n   * (and keep pressed) and once you release\n   */\n  @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /**\n   * Emitted when the timepicker's value changes\n   */\n  @Event({ eventName: 'six-timepicker-change' }) sixChange!: EventEmitter<SixTimepickerChange>;\n\n  /**\n   * Emitted when the timepicker's value changes, but debounced\n   */\n  @Event({ eventName: 'six-timepicker-change-debounced' }) sixChangeDebounced!: EventEmitter<SixTimepickerChange>;\n\n  /**\n   * Emitted when the clear button is activated.\n   */\n  @Event({ eventName: 'six-timepicker-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  @State() isPopupContentUp = false;\n\n  @State() isDropDownContentUp = false;\n\n  @Listen('resize', { target: 'window' })\n  async resizeHandler() {\n    this.calcIsPopupContentUp();\n    this.moveOpenHoistedPopup();\n  }\n\n  @Listen('scroll', { target: 'window' })\n  async scrollHandler() {\n    this.calcIsPopupContentUp();\n    this.moveOpenHoistedPopup();\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.updateValue();\n  }\n\n  @Watch('invalid')\n  protected invalidChanged(invalid: boolean) {\n    if (this.inputElement) {\n      this.inputElement.invalid = invalid;\n    }\n  }\n\n  /** Sets focus on the datepickers input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.inputElement?.setFocus(options);\n  }\n\n  /*\n   * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,\n   * when switching between formats\n   */\n  @State() private popupValue: Time = {};\n\n  connectedCallback() {\n    this.eventListeners.forward('six-timepicker-change', 'change', this.host);\n  }\n\n  componentWillLoad() {\n    this.updateValue();\n\n    if (this.inline) {\n      this.open = true;\n    }\n\n    if (this.open) {\n      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n    const inputElement = this.inputElement;\n\n    // emit debounced change event\n    this.eventListeners.add(\n      this.host,\n      'six-timepicker-change',\n      debounce((event: Event) => this.sixChangeDebounced.emit((event as CustomEvent).detail), this.debounce)\n    );\n\n    // update value and popup value based on input-element value\n    this.eventListeners.add(\n      inputElement,\n      'six-input-input',\n      debounce((event: Event) => {\n        event.stopPropagation();\n\n        // emit empty event if time string is invalid\n        if (!isValidTimeString(inputElement.value, this.format)) {\n          this.value = inputElement.value;\n          this.sixChange.emit({\n            value: {},\n            valueAsString: '',\n          });\n          return;\n        }\n\n        // update value and popup value, and emit the new value\n        this.value = inputElement.value;\n        this.popupValue = parseTimeString(inputElement.value, this.format);\n        this.sixChange.emit({\n          value: this.popupValue,\n          valueAsString: createTimeString(this.popupValue, this.format),\n        });\n      }, this.debounce)\n    );\n  }\n\n  componentDidRender() {\n    adjustPopupForHoisting(\n      this.hoist,\n      this.popup,\n      this.inputElement,\n      this.wrapper,\n      MIN_POPUP_HEIGHT,\n      (isUp) => (this.isDropDownContentUp = isUp)\n    );\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  private updateValue() {\n    // normalize value\n    if (typeof this.value !== 'string' || !isValidTimeString(this.value, this.format)) {\n      this.value = '';\n    }\n\n    // update popup value\n    if (this.value === '') {\n      if (this.defaultTime == null) {\n        this.popupValue = getCurrentTime(this.is24HourClock());\n      } else {\n        this.popupValue = parseTimeString(this.defaultTime, this.format);\n      }\n    } else {\n      this.popupValue = parseTimeString(this.value, this.format);\n    }\n  }\n\n  private calcIsPopupContentUp() {\n    if (this.inputElement == null || this.wrapper == null) {\n      return;\n    }\n\n    const inputBoundingRect = this.inputElement.getBoundingClientRect();\n    const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n    const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n    this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n  }\n\n  private moveOpenHoistedPopup() {\n    movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);\n  }\n\n  private handlePickerChange = (event: CustomEvent<SixItemPickerChangePayload>, property: TimeProperties) => {\n    // stop propagation, since the timepicker should not expose the events of the underlying item-picker\n    event.stopPropagation();\n    if (this.popupValue == null) {\n      return;\n    }\n\n    // update the internal state\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this.popupValue[property] = event.detail;\n\n    const timeString = createTimeString(this.popupValue, this.format);\n\n    // update the input value\n    this.value = timeString;\n\n    // emit change event\n    this.sixChange.emit({\n      changedProperty: property,\n      value: this.popupValue,\n      valueAsString: timeString,\n    });\n  };\n\n  private getSixTimeUnitPicker(params: SixTimeUnitPickerParams) {\n    return (\n      <six-item-picker\n        class={params.class}\n        timeout={this.timeout}\n        interval={this.interval}\n        padded\n        min={params.min}\n        max={params.max}\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        value={this.popupValue[params.propertyName]}\n        items={params.items}\n        type={params.type || ItemPickerType.NUMBER}\n        padding-length={params.paddingLength}\n        onSix-item-picker-change={(event) => this.handlePickerChange(event, params.propertyName)}\n      ></six-item-picker>\n    );\n  }\n\n  private getHour24Picker() {\n    if (!this.is24HourClock()) {\n      return;\n    }\n    return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });\n  }\n\n  private is24HourClock() {\n    return this.format.includes('HH');\n  }\n\n  private getHour12Picker() {\n    if (!this.is12HourClock()) {\n      return;\n    }\n    return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });\n  }\n\n  private is12HourClock() {\n    return this.format.includes('hh');\n  }\n\n  private getAmPmPicker() {\n    if (!this.is12HourClock()) {\n      return;\n    }\n    const items = ['AM', 'PM'];\n    return this.getSixTimeUnitPicker({\n      items,\n      type: ItemPickerType.CUSTOM,\n      propertyName: 'period',\n    });\n  }\n\n  private getMinutePicker() {\n    if (!this.format.includes('mm')) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });\n  }\n\n  private getSecondsPicker() {\n    if (!this.format.includes('ss')) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });\n  }\n\n  private getMillisecondsPicker() {\n    if (!this.format.includes('ms')) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({\n      min: 0,\n      max: 999,\n      class: 'timepicker__item--wide',\n      paddingLength: 3,\n      propertyName: 'milliseconds',\n    });\n  }\n\n  private getSeparator() {\n    return (\n      <div class=\"timepicker__separator\">\n        <span>{this.separator}</span>\n      </div>\n    );\n  }\n\n  private getContent() {\n    const elementsInOrder = [\n      this.getHour24Picker(),\n      this.getHour12Picker(),\n      this.getMinutePicker(),\n      this.getSecondsPicker(),\n      this.getMillisecondsPicker(),\n    ];\n\n    const visibleElements = elementsInOrder.filter((el) => el !== undefined);\n\n    return visibleElements.map((el, idx) => {\n      if (idx === visibleElements.length - 1) {\n        return [el];\n      }\n\n      return [el, this.getSeparator()];\n    });\n  }\n\n  private openPopup() {\n    if (!this.open && !this.disabled) {\n      this.open = true;\n      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n    }\n  }\n\n  private closePopup() {\n    if (this.inline) {\n      return;\n    }\n\n    this.open = false;\n    this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n  }\n\n  private handleDocumentMouseDown = (event: Event) => {\n    // Close when clicking outside the containing element\n    const path = event.composedPath() as EventTarget[];\n    if (!path.includes(this.host)) {\n      this.closePopup();\n      return;\n    }\n  };\n\n  private handleClearClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.value = '';\n    this.sixClear.emit();\n    this.sixChange.emit({\n      value: {},\n      valueAsString: '',\n    });\n  };\n\n  private renderClearable() {\n    return (\n      this.clearable && (\n        <button\n          slot=\"suffix\"\n          class={{\n            timepicker_clear: true,\n            'timepicker_clear--right': this.iconPosition === 'left',\n            'timepicker_clear--left': this.iconPosition === 'right',\n          }}\n          type=\"button\"\n          onClick={this.handleClearClick}\n          tabindex=\"-1\"\n        >\n          <six-icon size=\"small\">clear</six-icon>\n        </button>\n      )\n    );\n  }\n\n  private renderCustomIcon() {\n    const icon = hasSlot(this.host, 'custom-icon') ? (\n      <slot name=\"custom-icon\"></slot>\n    ) : (\n      <six-icon size={this.size === 'large' ? 'medium' : this.size}>watch_later</six-icon>\n    );\n\n    return (\n      <span\n        slot=\"prefix\"\n        part=\"icon\"\n        class={{\n          prefix: true,\n          'prefix--right': this.iconPosition === 'right',\n        }}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  render() {\n    return (\n      <div part=\"container\" ref={(el) => (this.wrapper = el)} class=\"timepicker__container\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          part=\"input\"\n          onClick={() => this.openPopup()}\n          value={this.value}\n          placeholder={this.placeholder}\n          readonly={this.readonly}\n          disabled={this.disabled}\n          size={this.size}\n          name={this.name}\n          label={this.label}\n          required={this.required}\n          error-text={this.errorText}\n          class={{\n            'input--empty': this.value === '',\n            'input--hide': this.inline,\n          }}\n        >\n          {this.renderCustomIcon()}\n          {this.renderClearable()}\n          {hasSlot(this.host, 'label') ? (\n            <span slot=\"label\">\n              <slot name=\"label\" />\n            </span>\n          ) : null}\n        </six-input>\n        {this.open && (\n          <div\n            ref={(el) => (this.popup = el)}\n            part=\"popup\"\n            class={{\n              timepicker__popup: true,\n              'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,\n              'timepicker__popup--is-inline': this.inline,\n            }}\n          >\n            {...this.getContent()}\n            {this.getAmPmPicker()}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}