@six-group/ui-library 0.0.0-insider.012ddb2

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

@@ -0,0 +1 @@
+{"file":"six-input2.js","mappings":"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","names":[],"sources":["src/components/six-input/six-input.scss?tag=six-input&encapsulation=shadow","src/components/six-input/six-input.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n\n.input {\n  display: inline-flex;\n  align-items: stretch;\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  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  overflow: hidden;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: text;\n\n  &--line {\n    border: none;\n    border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n  }\n\n  &:hover:not(.input--disabled) {\n    background-color: var(--six-input-background-color-hover);\n    border-color: var(--six-input-border-color-hover);\n\n    .input__control {\n      color: var(--six-input-color-hover);\n    }\n  }\n\n  &:hover.input--dropdown-search {\n    border-color: transparent;\n  }\n\n  &--dropdown-search {\n    border-color: transparent;\n  }\n\n  &--dropdown-search.input--focused {\n    border-color: var(--six-input-border-color);\n  }\n\n  &.input--focused:not(.input--disabled) {\n    background-color: var(--six-input-background-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(.input--line) {\n      border-color: var(--six-input-border-color-focus);\n      box-shadow: var(--six-input-focus-shadow);\n    }\n\n    .input__control {\n      color: var(--six-input-color-focus);\n    }\n  }\n\n  &.input--disabled {\n    background-color: var(--six-input-background-color-disabled);\n    border-color: var(--six-input-border-color-disabled);\n    cursor: not-allowed;\n\n    .input__control {\n      color: var(--six-input-color-disabled);\n\n      &::placeholder {\n        color: var(--six-input-placeholder-color-disabled);\n      }\n    }\n  }\n\n  &.input--invalid:not(.input--disabled):not(.input--focused) {\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.input__control {\n  flex: 1 1 auto;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  min-width: 0;\n  color: var(--six-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  padding: 0;\n  margin: 0;\n  cursor: inherit;\n  -webkit-appearance: none;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    box-shadow: 0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;\n    -webkit-text-fill-color: var(--six-color-primary-500);\n  }\n\n  &::placeholder {\n    color: var(--six-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-ms-reveal {\n    display: none;\n  }\n}\n\n.input__prefix,\n.input__suffix {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  cursor: default;\n\n  ::slotted(six-icon) {\n    color: var(--six-input-icon-color);\n  }\n}\n\n.input {\n  &.input--disabled {\n    ::slotted(six-icon) {\n      cursor: not-allowed;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--small {\n  border-radius: var(--six-input-border-radius-small);\n  font-size: var(--six-input-font-size-small);\n  height: var(--six-height-small);\n\n  .input__control {\n    height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-small);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-small);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-small);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-small);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-small);\n  }\n}\n\n.input--medium {\n  border-radius: var(--six-input-border-radius-medium);\n  font-size: var(--six-input-font-size-medium);\n  height: var(--six-height-medium);\n\n  .input__control {\n    height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-medium);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-medium);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-medium);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-medium);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-medium);\n  }\n}\n\n.input--large {\n  border-radius: var(--six-input-border-radius-large);\n  font-size: var(--six-input-font-size-large);\n  height: var(--six-height-large);\n\n  .input__control {\n    height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-large);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-large);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-large);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-large);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--pill {\n  &.input--small {\n    border-radius: var(--six-height-small);\n  }\n\n  &.input--medium {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.input--large {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Clearable + Password Toggle\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input__clear,\n.input__password-toggle {\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\n.input--empty .input__clear {\n  visibility: hidden;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { submitForm } from '../../utils/form';\n\nconst ICON_SIZES: Record<'small' | 'medium' | 'large', 'xSmall' | 'small' | 'medium'> = {\n  large: 'medium',\n  medium: 'small',\n  small: 'xSmall',\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 label - The input's label. Alternatively, you can use the label prop.\n * @slot prefix - Used to prepend an icon or similar element to the input.\n * @slot suffix - Used to append an icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, input, error-text and help-text.\n * @part label - The input label.\n * @part input - The input control.\n * @part prefix - The input prefix container.\n * @part clear-button - The clear button.\n * @part password-toggle-button - The password toggle button.\n * @part suffix - The input suffix container.\n * @part help-text - The input help text.\n * @part error-text - The input error text.\n */\n\n@Component({\n  tag: 'six-input',\n  styleUrl: 'six-input.scss',\n  shadow: true,\n})\nexport class SixInput {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixInputElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorSlot = false;\n  @State() isPasswordVisible = false;\n\n  /** The input's type. */\n  @Prop({ reflect: true }) type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' = 'text';\n\n  /** The input's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The input's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Set to true to draw a pill-style input with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** The input's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to make the input readonly. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength?: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength?: number;\n\n  /** The input's minimum value. */\n  @Prop({ reflect: true }) min?: number;\n\n  /** The input's maximum value. */\n  @Prop({ reflect: true }) max?: number;\n\n  /** The input's step attribute. */\n  @Prop({ reflect: true }) step?: number;\n\n  /** A pattern to validate input against. */\n  @Prop({ reflect: true }) pattern?: string;\n\n  /**\n   * Internal: Styles the input for the dropdown filter search.\n   */\n  @Prop() dropdownSearch = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The input's autocaptialize attribute. */\n  @Prop() autocapitalize = 'off';\n\n  /** The input's autocorrect attribute. */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /** The input's autocomplete attribute. */\n  @Prop() autocomplete = 'off';\n\n  /** The input's autofocus attribute. */\n  @Prop() autofocus = false;\n\n  /** Enables spell checking on the input. */\n  @Prop() spellcheck = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Set to true to add a password toggle button for password inputs. */\n  @Prop() togglePassword = false;\n\n  /** The input's inputmode attribute. */\n  @Prop() inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Set to render as line */\n  @Prop() line = false;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.value = this.getValue();\n    if (this.nativeInput != null && this.nativeInput.value !== this.value) {\n      this.nativeInput.value = this.value;\n    }\n  }\n\n  /** Emitted when the control's value changes. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-input-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-input-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value.  */\n  @Event({ eventName: 'six-input-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-input-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-input-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-input-input', 'input', this.host);\n    this.eventListeners.forward('six-input-change', 'change', this.host);\n    this.eventListeners.forward('six-input-focus', 'focus', this.host);\n    this.eventListeners.forward('six-input-blur', 'blur', this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.nativeInput?.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.nativeInput?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    if (this.nativeInput == null) {\n      return;\n    }\n    this.nativeInput.setRangeText(replacement, start, end, selectMode);\n    if (this.getValue() !== this.nativeInput.value) {\n      this.value = this.nativeInput.value;\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  private handleChange = (event: Event) => {\n    event.stopPropagation();\n    if (this.nativeInput != null) {\n      this.value = this.nativeInput.value;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    event.stopPropagation();\n    if (this.nativeInput != null) {\n      this.value = this.nativeInput.value;\n      this.sixInput.emit();\n    }\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    this.value = '';\n    this.sixClear.emit();\n    this.sixInput.emit();\n    this.sixChange.emit();\n    if (this.nativeInput != null) {\n      this.nativeInput.focus();\n    }\n    event.stopPropagation();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        if (!event.defaultPrevented && !event.isComposing) {\n          submitForm(this.host);\n        }\n      });\n    }\n  };\n\n  private handlePasswordToggle = () => {\n    this.isPasswordVisible = !this.isPasswordVisible;\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private getValue(): string {\n    return (this.value ?? '').toString();\n  }\n\n  render() {\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        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            input: true,\n\n            // Sizes\n            'input--small': this.size === 'small',\n            'input--medium': this.size === 'medium',\n            'input--large': this.size === 'large',\n\n            // States\n            'input--line': this.line,\n            'input--pill': this.pill,\n            'input--disabled': this.disabled,\n            'input--dropdown-search': this.dropdownSearch,\n            'input--focused': this.hasFocus,\n            'input--empty': this.getValue().length === 0,\n            'input--invalid': this.invalid,\n          }}\n        >\n          <span part=\"prefix\" class=\"input__prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            id={this.inputId}\n            size={1} // needed for firefox to overrule the default of 20\n            class={{\n              input__control: true,\n              input__control__prefix: hasSlot(this.host, 'prefix'),\n            }}\n            type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readonly={this.readonly}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.getValue()}\n            autoCapitalize={this.autocapitalize}\n            autoComplete={this.autocomplete}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            pattern={this.pattern}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            aria-describedby={this.helpTextId}\n            aria-invalid={this.invalid ? 'true' : 'false'}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n            onKeyDown={this.handleKeyDown}\n            data-testid=\"input-control\"\n          />\n\n          {this.clearable && (\n            <button\n              part=\"clear-button\"\n              class=\"input__clear\"\n              type=\"button\"\n              onClick={this.handleClearClick}\n              tabindex=\"-1\"\n              data-testid=\"input-clear-button\"\n            >\n              <slot name=\"clear-icon\">\n                <six-icon size={ICON_SIZES[this.size]}>clear</six-icon>\n              </slot>\n            </button>\n          )}\n\n          {this.togglePassword && (\n            <button\n              part=\"password-toggle-button\"\n              class=\"input__password-toggle\"\n              type=\"button\"\n              onClick={this.handlePasswordToggle}\n              tabindex=\"-1\"\n            >\n              {this.isPasswordVisible ? (\n                <slot name=\"show-password-icon\">\n                  <six-icon size={ICON_SIZES[this.size]}>visibility_off</six-icon>\n                </slot>\n              ) : (\n                <slot name=\"hide-password-icon\">\n                  <six-icon size={ICON_SIZES[this.size]}>visibility</six-icon>\n                </slot>\n              )}\n            </button>\n          )}\n\n          <span part=\"suffix\" class=\"input__suffix\">\n            <slot name=\"suffix\" />\n          </span>\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"version":3}

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

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

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

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

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

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

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

@@ -0,0 +1,487 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { D as DEFAULT_DEBOUNCE_FAST, b as DEFAULT_DEBOUNCE_INSANELY_FAST, a as debounce } from './execution-control.js';
+import { E as EventListeners } from './event-listeners.js';
+import { d as defineCustomElement$1 } from './six-icon2.js';
+
+// eslint-disable-next-line @stencil-community/ban-exported-const-enums
+var ItemPickerType;
+(function (ItemPickerType) {
+    ItemPickerType["NUMBER"] = "number";
+    ItemPickerType["LETTER"] = "letter";
+    ItemPickerType["CAPITAL_LETTER"] = "capital-letter";
+    ItemPickerType["LOWER_LETTER"] = "lower-letter";
+    ItemPickerType["CUSTOM"] = "custom";
+})(ItemPickerType || (ItemPickerType = {}));
+// eslint-disable-next-line @stencil-community/ban-exported-const-enums
+var ItemPickerPaddingDirection;
+(function (ItemPickerPaddingDirection) {
+    ItemPickerPaddingDirection["BEFORE"] = "before";
+    ItemPickerPaddingDirection["AFTER"] = "after";
+})(ItemPickerPaddingDirection || (ItemPickerPaddingDirection = {}));
+
+const sixItemPickerCss = ".item_picker__container{width:2.5em;display:flex;flex-wrap:wrap;justify-content:center}.item_picker__container:focus-visible{outline:var(--six-focus-ring);outline-offset:0}.item_picker__content{font-size:1.5rem}.item_picker__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--six-color-web-rock-500)}.item_picker__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.item_picker__btn:active{color:var(--six-color-web-rock-400)}.item_picker__btn--disabled{color:var(--six-color-web-rock-300);cursor:not-allowed}.item_picker__btn--disabled:hover{background-color:initial}.item_picker__btn--disabled:active{color:var(--six-color-web-rock-300)}.item_picker__btn:focus-visible{outline:var(--six-focus-ring);outline-offset:0}";
+
+const uppercaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+const upperAndLowercaseLetters = [...uppercaseLetters].flatMap((c) => [c, c.toLowerCase()]);
+const ALPHABET = {
+    alphabet: upperAndLowercaseLetters,
+    letterIndexes: Object.fromEntries(upperAndLowercaseLetters.map((c, i) => [c, i])),
+};
+const CAPITAL_ALPHABET = {
+    alphabet: [...uppercaseLetters].flatMap((c) => [c]),
+    letterIndexes: Object.fromEntries([...uppercaseLetters].map((c, i) => [c, i])),
+};
+const LOWERCASE_ALPHABET = {
+    alphabet: [...uppercaseLetters.toLowerCase()].flatMap((c) => [c]),
+    letterIndexes: Object.fromEntries([...uppercaseLetters.toLowerCase()].map((c, i) => [c, i])),
+};
+const createItemIndexes = (arr) => {
+    return Object.fromEntries([...arr].map((c, i) => [c, i]));
+};
+const TAG = `[SIX-ITEM-PICKER]`;
+const subtract = (a, b) => a - b;
+const add = (a, b) => a + b;
+const DEBOUNCE_ITEM_PICKER_LISTENER = 'debounced-item-picker';
+const SixItemPicker = /*@__PURE__*/ proxyCustomElement(class SixItemPicker extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixChange = createEvent(this, "six-item-picker-change", 7);
+        this.sixChangeDebounced = createEvent(this, "six-item-picker-change-debounced", 7);
+        this.eventListeners = new EventListeners();
+        this.handleSixItemPickerChangeDebounced = () => {
+            this.sixChangeDebounced.emit(this.value);
+        };
+        this.value = '';
+        this.type = ItemPickerType.NUMBER;
+        this.min = undefined;
+        this.max = undefined;
+        this.roundtrip = true;
+        this.step = 1;
+        this.items = undefined;
+        this.padded = false;
+        this.paddingLength = 2;
+        this.paddingChar = '0';
+        this.paddingDirection = ItemPickerPaddingDirection.BEFORE;
+        this.timeout = DEFAULT_DEBOUNCE_FAST;
+        this.interval = DEFAULT_DEBOUNCE_INSANELY_FAST;
+        this.debounce = DEFAULT_DEBOUNCE_FAST;
+        this._items = [];
+        this._itemIndexes = {};
+    }
+    handleValueChange() {
+        this.setup();
+    }
+    debounceChanged() {
+        this.eventListeners.removeByIdentifier(DEBOUNCE_ITEM_PICKER_LISTENER);
+        this.eventListeners.add(this.host, 'six-item-picker-change', debounce(this.handleSixItemPickerChangeDebounced, this.debounce), DEBOUNCE_ITEM_PICKER_LISTENER);
+    }
+    handleSetChange() {
+        this.setup();
+        this.min = this._items[0];
+        this.max = this.getLastStringItem();
+    }
+    componentWillLoad() {
+        this.setup();
+    }
+    componentDidLoad() {
+        this.eventListeners.add(this.host, 'six-item-picker-change', debounce(this.handleSixItemPickerChangeDebounced, this.debounce), DEBOUNCE_ITEM_PICKER_LISTENER);
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    setup() {
+        if (this.isNumber()) {
+            this.setupNumberItems();
+        }
+        else {
+            this.setUpStringItems();
+        }
+    }
+    setupNumberItems() {
+        var _a;
+        if (this.isInvalidNumber()) {
+            console.warn(`${TAG} Expected number but value is not a number: "${this.value}"`);
+            console.info(`${TAG} Will set value to either minimum or if not provided to zero.`);
+            this.value = (_a = this.min) !== null && _a !== void 0 ? _a : 0;
+        }
+    }
+    setUpStringItems() {
+        this._items = this.getStringItems();
+        this._itemIndexes = this.getItemIndexes();
+        const itemsMissValue = this._items.find((i) => String(i) === String(this.value)) === undefined;
+        if (itemsMissValue) {
+            console.warn(`${TAG} Expected item from item set but value was not found in set: "${this.value}"`);
+            console.info(`${TAG} Will set value to either minimum or if not provided to "${this._items[0]}".`);
+            this.value = this._items[0];
+        }
+        if (this.min === undefined) {
+            if (!this.roundtrip) {
+                console.warn(`${TAG} Expected a min value`);
+                console.info(`${TAG} Will set min value to ${this._items[0]}`);
+            }
+            this.min = this._items[0];
+        }
+        if (this.max === undefined) {
+            const maxItem = this.getLastStringItem();
+            if (!this.roundtrip) {
+                console.warn(`${TAG} Expected a min value if roundtrip is enabled`);
+                console.info(`${TAG} Will set min value to ${maxItem}`);
+            }
+            this.max = maxItem;
+        }
+    }
+    getLastStringItem() {
+        return this._items[this._items.length - 1];
+    }
+    getStringItems() {
+        switch (this.type) {
+            case ItemPickerType.NUMBER:
+                console.warn(`${TAG}: unexpected type ${this.type}`);
+                return [];
+            case ItemPickerType.LETTER:
+                return ALPHABET.alphabet;
+            case ItemPickerType.CAPITAL_LETTER:
+                return CAPITAL_ALPHABET.alphabet;
+            case ItemPickerType.LOWER_LETTER:
+                return LOWERCASE_ALPHABET.alphabet;
+            case ItemPickerType.CUSTOM:
+                if (this.items == null || this.items.length === 0) {
+                    console.warn(`${TAG}: no items defined for type ${this.type}`);
+                    return [];
+                }
+                return this.items;
+        }
+    }
+    getItemIndexes() {
+        switch (this.type) {
+            case ItemPickerType.NUMBER:
+                console.warn(`${TAG}: unexpected type ${this.type}`);
+                return {};
+            case ItemPickerType.LETTER:
+                return ALPHABET.letterIndexes;
+            case ItemPickerType.CAPITAL_LETTER:
+                return CAPITAL_ALPHABET.letterIndexes;
+            case ItemPickerType.LOWER_LETTER:
+                return LOWERCASE_ALPHABET.letterIndexes;
+            case ItemPickerType.CUSTOM:
+                return createItemIndexes(this._items);
+        }
+    }
+    previousItem() {
+        if (this.isNumber()) {
+            this.previousNumber();
+        }
+        else {
+            this.previousStringItem();
+        }
+        this.sixChange.emit(this.value);
+    }
+    previousNumber() {
+        this.changeValue({
+            isNextItemAllowed: () => !this.isPreviousNumberDisabled(),
+            getNextItem: () => Number(this.value) - this.step,
+            getRoundtripItem: () => Number(this.max),
+            isRoundtripPossible: () => this.max === undefined && this.roundtrip,
+        });
+    }
+    previousStringItem() {
+        const value = String(this.value);
+        const minLetter = String(this.min);
+        this.changeValue({
+            isNextItemAllowed: () => minLetter === undefined || this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),
+            getNextItem: () => this.getNextItemByOperation(subtract),
+            getRoundtripItem: () => String(this.max),
+            isRoundtripPossible: () => this.max == null && this.roundtrip,
+        });
+    }
+    nextItem() {
+        if (this.isNumber()) {
+            this.nextNumber();
+        }
+        else {
+            this.nextStringItem();
+        }
+        this.sixChange.emit(this.value);
+    }
+    nextNumber() {
+        this.changeValue({
+            isNextItemAllowed: () => !this.isNextNumberDisabled(),
+            getNextItem: () => Number(this.value) + this.step,
+            getRoundtripItem: () => Number(this.min),
+            isRoundtripPossible: () => this.min === undefined && this.roundtrip,
+        });
+    }
+    getStringItemIndex(char) {
+        return this._itemIndexes[char];
+    }
+    nextStringItem() {
+        const value = String(this.value);
+        const maxLetter = String(this.max);
+        this.changeValue({
+            isNextItemAllowed: () => maxLetter === undefined || this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),
+            getNextItem: () => this.getNextItemByOperation(add),
+            getRoundtripItem: () => String(this.min),
+            isRoundtripPossible: () => this.min === undefined && this.roundtrip,
+        });
+    }
+    getNextItemByOperation(operation, increment = this.step) {
+        const value = String(this.value);
+        const nextIndexCandidate = operation(this.getStringItemIndex(value), increment);
+        const numberOfItems = this._items.length;
+        const nextIndex = ((nextIndexCandidate % numberOfItems) + numberOfItems) % numberOfItems;
+        return this._items[nextIndex];
+    }
+    changeValue(params) {
+        if (params.isNextItemAllowed()) {
+            this.value = params.getNextItem();
+            return;
+        }
+        if (params.isRoundtripPossible()) {
+            console.error(`${TAG} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`);
+            return;
+        }
+        if (this.roundtrip) {
+            this.value = params.getRoundtripItem();
+            return;
+        }
+        console.warn(`${TAG} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`);
+        this.sixChange.emit(this.value);
+    }
+    isNumber() {
+        return this.type === ItemPickerType.NUMBER;
+    }
+    isInvalidNumber() {
+        return this.value === '' || isNaN(this.value);
+    }
+    isNextDisabled() {
+        if (this.roundtrip) {
+            return false;
+        }
+        if (this.isNumber()) {
+            return this.isNextNumberDisabled();
+        }
+        else {
+            return this._itemIndexes[String(this.value)] + this.step > this._itemIndexes[String(this.max)];
+        }
+    }
+    isNextNumberDisabled() {
+        var _a;
+        return Number(this.value) + this.step > Number((_a = this.max) !== null && _a !== void 0 ? _a : Infinity);
+    }
+    isPrevDisabled() {
+        if (this.roundtrip) {
+            return false;
+        }
+        if (this.isNumber()) {
+            return this.isPreviousNumberDisabled();
+        }
+        else {
+            return this._itemIndexes[String(this.value)] - this.step < this._itemIndexes[String(this.min)];
+        }
+    }
+    isPreviousNumberDisabled() {
+        var _a;
+        return Number(this.value) - this.step < Number((_a = this.min) !== null && _a !== void 0 ? _a : -Infinity);
+    }
+    onMouseDownNext() {
+        if (this.isNextDisabled()) {
+            return;
+        }
+        this.nextItem();
+        this._timeoutNext = setTimeout(() => {
+            this._intervalNext = setInterval(() => {
+                this.nextItem();
+            }, this.interval);
+        }, this.timeout);
+    }
+    onMouseUpNext() {
+        clearTimeout(this._timeoutNext);
+        clearInterval(this._intervalNext);
+    }
+    onMouseDownPrev() {
+        if (this.isPrevDisabled()) {
+            return;
+        }
+        this.previousItem();
+        this._timeoutPrev = setTimeout(() => {
+            this._intervalPrev = setInterval(() => {
+                this.previousItem();
+            }, this.interval);
+        }, this.timeout);
+    }
+    onMouseUpPrev() {
+        clearTimeout(this._timeoutPrev);
+        clearInterval(this._intervalPrev);
+    }
+    getFormattedValue() {
+        if (this.value === undefined || this.value === null) {
+            return this.value;
+        }
+        if (!this.padded) {
+            return this.value;
+        }
+        if (this.paddingDirection === ItemPickerPaddingDirection.BEFORE) {
+            return String(this.value).padStart(this.paddingLength, this.paddingChar);
+        }
+        else if (this.paddingDirection === ItemPickerPaddingDirection.AFTER) {
+            return String(this.value).padEnd(this.paddingLength, this.paddingChar);
+        }
+        return this.value;
+    }
+    handleKeyPress(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (event.target === this.upButton) {
+                this.nextItem();
+            }
+            else if (event.target === this.downButton) {
+                this.previousItem();
+            }
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.nextItem();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.previousItem();
+        }
+        else if (event.key === 'PageUp') {
+            event.preventDefault();
+            this.pageUp();
+        }
+        else if (event.key === 'PageDown') {
+            event.preventDefault();
+            this.pageDown();
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            this.goToMin();
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            this.goToMax();
+        }
+    }
+    pageUp() {
+        if (this.isNumber()) {
+            this.changeValue({
+                isNextItemAllowed: () => !this.isNextNumberDisabled(),
+                getNextItem: () => Number(this.value) + 5 * this.step,
+                getRoundtripItem: () => Number(this.min),
+                isRoundtripPossible: () => this.min === undefined && this.roundtrip,
+            });
+        }
+        else {
+            const value = String(this.value);
+            const minLetter = String(this.min);
+            this.changeValue({
+                isNextItemAllowed: () => minLetter === undefined || this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),
+                getNextItem: () => this.getNextItemByOperation(add, 5),
+                getRoundtripItem: () => String(this.min),
+                isRoundtripPossible: () => this.min === undefined && this.roundtrip,
+            });
+        }
+    }
+    pageDown() {
+        if (this.isNumber()) {
+            this.changeValue({
+                isNextItemAllowed: () => !this.isPreviousNumberDisabled(),
+                getNextItem: () => Number(this.value) - 5 * this.step,
+                getRoundtripItem: () => Number(this.max),
+                isRoundtripPossible: () => this.max === undefined && this.roundtrip,
+            });
+        }
+        else {
+            const value = String(this.value);
+            const maxLetter = String(this.max);
+            this.changeValue({
+                isNextItemAllowed: () => maxLetter === undefined || this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),
+                getNextItem: () => this.getNextItemByOperation(subtract, 5),
+                getRoundtripItem: () => String(this.max),
+                isRoundtripPossible: () => this.max == null && this.roundtrip,
+            });
+        }
+    }
+    goToMin() {
+        var _a;
+        if (this.isNumber()) {
+            this.value = (_a = this.min) !== null && _a !== void 0 ? _a : 0;
+        }
+        else {
+            this.value = this._items[0];
+        }
+        this.sixChange.emit(this.value);
+    }
+    goToMax() {
+        var _a;
+        if (this.isNumber()) {
+            this.value = (_a = this.max) !== null && _a !== void 0 ? _a : Infinity;
+        }
+        else {
+            this.value = this.getLastStringItem();
+        }
+        this.sixChange.emit(this.value);
+    }
+    render() {
+        return (h("div", { part: "container", class: "item_picker__container", onKeyDown: (event) => this.handleKeyPress(event), tabindex: "0" }, h("div", { ref: (el) => (this.upButton = el), part: "up", class: {
+                item_picker__btn: true,
+                'item_picker__btn--disabled': this.isNextDisabled(),
+            }, onMouseDown: () => this.onMouseDownNext(), onMouseUp: () => this.onMouseUpNext(), tabindex: "-1" }, h("six-icon", { size: "large" }, "expand_less")), h("div", { part: "content", class: "item_picker__content" }, this.getFormattedValue()), h("div", { ref: (el) => (this.downButton = el), part: "down", class: {
+                item_picker__btn: true,
+                'item_picker__btn--disabled': this.isPrevDisabled(),
+            }, onMouseDown: () => this.onMouseDownPrev(), onMouseUp: () => this.onMouseUpPrev(), tabindex: "-1" }, h("six-icon", { size: "large" }, "expand_more"))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "debounce": ["debounceChanged"],
+        "items": ["handleSetChange"]
+    }; }
+    static get style() { return sixItemPickerCss; }
+}, [1, "six-item-picker", {
+        "value": [1544],
+        "type": [1],
+        "min": [1544],
+        "max": [1544],
+        "roundtrip": [516],
+        "step": [514],
+        "items": [16],
+        "padded": [4],
+        "paddingLength": [2, "padding-length"],
+        "paddingChar": [1, "padding-char"],
+        "paddingDirection": [1, "padding-direction"],
+        "timeout": [2],
+        "interval": [2],
+        "debounce": [2],
+        "_items": [32],
+        "_itemIndexes": [32]
+    }, undefined, {
+        "value": ["handleValueChange"],
+        "debounce": ["debounceChanged"],
+        "items": ["handleSetChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-item-picker", "six-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-item-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixItemPicker);
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ItemPickerType as I, SixItemPicker as S, defineCustomElement as d };
+
+//# sourceMappingURL=six-item-picker2.js.map