@six-group/ui-library 3.0.0-beta.1.8 → 4.0.0-beta.0

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  &.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: var(--six-input-font-size-medium);\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, Method, Prop, State, Watch, h } 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';\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 for validation errors. 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, 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 */\n\n@Component({\n  tag: 'six-input',\n  styleUrl: 'six-input.scss',\n  shadow: true,\n})\nexport class SixInput {\n  inputId = `input-${++id}`;\n  labelId = `input-label-${id}`;\n  helpTextId = `input-help-text-${id}`;\n  errorTextId = `input-error-text-${id}`;\n  input: HTMLInputElement;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixInputElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = 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 label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The input's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The input's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\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  /** Set to true to make the input a required field. */\n  @Prop({ reflect: true }) required: boolean;\n\n  /** The input's autocaptialize attribute. */\n  @Prop() autocapitalize: string;\n\n  /** The input's autocorrect attribute. */\n  @Prop() autocorrect: string;\n\n  /** The input's autocomplete attribute. */\n  @Prop() autocomplete: string;\n\n  /** The input's autofocus attribute. */\n  @Prop() autofocus: boolean;\n\n  /** Enables spell checking on the input. */\n  @Prop() spellcheck: boolean;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n   * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.\n   */\n  @Prop({ mutable: true, 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  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.input) {\n      return;\n    }\n    this.input.value = this.value;\n    this.invalid = !this.input.checkValidity();\n    this.sixValueChange.emit();\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  /**\n   * Emitted whenever the value changes. Access the new value via event.target.value.\n   * six-input-value-change will emit whenever the value changes.\n   * So be it on input or when dynamically set. six-input-input will only be emitted when the user enters data,\n   * but not when a value is dynamically set. six-input-change will only be emitted when the user either presses enter\n   * or leaves the input field after entering some data.\n   * */\n  @Event({ eventName: 'six-input-value-change' }) sixValueChange: EventEmitter<EmptyPayload>;\n\n  /** defaultValue which the input will be reverted to when executing reset */\n  private defaultValue = '';\n\n  connectedCallback() {\n    this.handleChange = this.handleChange.bind(this);\n    this.handleInput = this.handleInput.bind(this);\n    this.handleInvalid = this.handleInvalid.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleClearClick = this.handleClearClick.bind(this);\n    this.handlePasswordToggle = this.handlePasswordToggle.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.defaultValue = this.value;\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.eventListeners.add(this.input, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = this.input.validationMessage;\n      }\n      event.preventDefault();\n    });\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.input.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.input.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.input.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.input.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    this.input.setRangeText(replacement, start, end, selectMode);\n\n    if (this.value !== this.input.value) {\n      this.value = this.input.value;\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.input.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  /** Returns the native input's validity */\n  @Method()\n  async getValidity() {\n    return this.input.validity;\n  }\n\n  /** Returns the native input's validity */\n  @Method()\n  async isValid() {\n    return this.input.validity.valid;\n  }\n\n  /** Returns the native input's validationMessage */\n  @Method()\n  async getValidationMessage() {\n    return this.input.validationMessage;\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleChange() {\n    this.value = this.input.value;\n    this.sixChange.emit();\n  }\n\n  handleInput() {\n    this.value = this.input.value;\n    this.sixInput.emit();\n  }\n\n  handleInvalid() {\n    this.invalid = true;\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  }\n\n  handleClearClick(event: MouseEvent) {\n    this.value = '';\n    this.sixClear.emit();\n    this.sixInput.emit();\n    this.sixChange.emit();\n    this.input.focus();\n\n    event.stopPropagation();\n  }\n\n  handlePasswordToggle() {\n    this.isPasswordVisible = !this.isPasswordVisible;\n  }\n\n  handleSlotChange() {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  }\n\n  displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\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.customErrorText ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\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--focused': this.hasFocus,\n            'input--empty': this.value?.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.input = 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.value}\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            onInvalid={this.handleInvalid}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\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,404 @@
+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';
+
+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 = {}));
+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__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)}";
+
+const A_CHARCODE = 65;
+const NUMBER_OF_LETTERS = 26;
+const CAPITAL_ALPHABET = (() => {
+  const alphabetCodes = Array.from(Array(NUMBER_OF_LETTERS)).map((_, i) => i + A_CHARCODE);
+  const letterIndexes = {};
+  const alphabet = alphabetCodes.map((charCode, index) => {
+    const character = String.fromCharCode(charCode);
+    letterIndexes[character] = index;
+    return character;
+  });
+  return { alphabet, letterIndexes };
+})();
+const LOWERCASE_ALPHABET = (() => {
+  const alphabet = [];
+  const letterIndexes = {};
+  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {
+    const lowercaseCharacter = CAPITAL_ALPHABET.alphabet[i].toLowerCase();
+    letterIndexes[lowercaseCharacter] = alphabet.length;
+    alphabet.push(lowercaseCharacter);
+  }
+  return { alphabet, letterIndexes };
+})();
+const ALPHABET = (() => {
+  const alphabet = [];
+  const letterIndexes = {};
+  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {
+    const capitalCharacter = CAPITAL_ALPHABET.alphabet[i];
+    letterIndexes[capitalCharacter] = alphabet.length;
+    alphabet.push(capitalCharacter);
+    const lowerCharacter = LOWERCASE_ALPHABET.alphabet[i];
+    letterIndexes[lowerCharacter] = alphabet.length;
+    alphabet.push(lowerCharacter);
+  }
+  return { alphabet, letterIndexes };
+})();
+const createItemIndexes = (arr) => {
+  const itemIndexes = {};
+  for (let i = 0; i < (arr === null || arr === void 0 ? void 0 : arr.length); i++) {
+    itemIndexes[arr[i]] = i;
+  }
+  return itemIndexes;
+};
+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 = undefined;
+  }
+  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.getItems();
+    if (!this._items) {
+      console.warn(`${TAG}: abort setup because no items were found.`);
+      return;
+    }
+    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];
+  }
+  getItems() {
+    return {
+      [ItemPickerType.LETTER]: ALPHABET.alphabet,
+      [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.alphabet,
+      [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.alphabet,
+      [ItemPickerType.CUSTOM]: this.items,
+    }[this.type];
+  }
+  getItemIndexes() {
+    if (this.type === ItemPickerType.CUSTOM) {
+      return createItemIndexes(this.items);
+    }
+    return {
+      [ItemPickerType.LETTER]: ALPHABET.letterIndexes,
+      [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.letterIndexes,
+      [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.letterIndexes,
+    }[this.type];
+  }
+  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 = this.value;
+    const minLetter = this.min;
+    this.changeValue({
+      isNextItemAllowed: () => minLetter === undefined || this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),
+      getNextItem: () => this.getNextItemByOperation(subtract),
+      getRoundtripItem: () => this.max,
+      isRoundtripPossible: () => this.max === undefined && 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 = this.value;
+    const maxLetter = this.max;
+    this.changeValue({
+      isNextItemAllowed: () => maxLetter === undefined || this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),
+      getNextItem: () => this.getNextItemByOperation(add),
+      getRoundtripItem: () => this.min,
+      isRoundtripPossible: () => this.min === undefined && this.roundtrip,
+    });
+  }
+  getNextItemByOperation(operation) {
+    const value = this.value;
+    const nextIndexCandidate = operation(this.getStringItemIndex(value), this.step);
+    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`);
+  }
+  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 {
+      if (!this._itemIndexes) {
+        return true;
+      }
+      return this._itemIndexes[String(this.value)] + this.step > this._itemIndexes[String(this.max)];
+    }
+  }
+  isNextNumberDisabled() {
+    var _a;
+    return Number(this.value) + this.step > ((_a = this.max) !== null && _a !== void 0 ? _a : Infinity);
+  }
+  isPrevDisabled() {
+    if (this.roundtrip) {
+      return false;
+    }
+    if (this.isNumber()) {
+      return this.isPreviousNumberDisabled();
+    }
+    else {
+      if (!this._itemIndexes) {
+        return true;
+      }
+      return this._itemIndexes[String(this.value)] - this.step < this._itemIndexes[String(this.min)];
+    }
+  }
+  isPreviousNumberDisabled() {
+    var _a;
+    return Number(this.value) - this.step < ((_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;
+  }
+  render() {
+    return (h("div", { part: "container", class: "item_picker__container" }, h("div", { part: "up", class: {
+        item_picker__btn: true,
+        'item_picker__btn--disabled': this.isNextDisabled(),
+      }, onMouseDown: () => this.onMouseDownNext(), onMouseUp: () => this.onMouseUpNext() }, h("six-icon", { size: "large" }, "expand_less")), h("div", { part: "content", class: "item_picker__content" }, this.getFormattedValue()), h("div", { part: "down", class: {
+        item_picker__btn: true,
+        'item_picker__btn--disabled': this.isPrevDisabled(),
+      }, onMouseDown: () => this.onMouseDownPrev(), onMouseUp: () => this.onMouseUpPrev() }, 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]
+  }]);
+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

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

@@ -0,0 +1 @@
+{"file":"six-item-picker2.js","mappings":"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","names":[],"sources":["./src/components/six-item-picker/types.ts","./src/components/six-item-picker/six-item-picker.scss?tag=six-item-picker&encapsulation=shadow","./src/components/six-item-picker/six-item-picker.tsx"],"sourcesContent":["export enum ItemPickerType {\n  NUMBER = 'number',\n  LETTER = 'letter',\n  CAPITAL_LETTER = 'capital-letter',\n  LOWER_LETTER = 'lower-letter',\n  CUSTOM = 'custom',\n}\n\nexport enum ItemPickerPaddingDirection {\n  BEFORE = 'before',\n  AFTER = 'after',\n}\n",".item_picker {\n  &__container {\n    width: 2.5em;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  &__content {\n    font-size: 1.5rem;\n  }\n\n  &__btn {\n    cursor: pointer;\n    width: 2.5em;\n    height: 2.5em;\n    display: flex;\n    vertical-align: middle;\n    align-items: center;\n    justify-content: center;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    color: var(--six-color-web-rock-500);\n\n    &:hover {\n      background-color: var(--six-color-web-rock-100);\n      border-radius: 100%;\n    }\n\n    &:active {\n      color: var(--six-color-web-rock-400);\n    }\n\n    &--disabled {\n      color: var(--six-color-web-rock-300);\n      cursor: not-allowed;\n\n      &:hover {\n        background-color: initial;\n      }\n\n      &:active {\n        color: var(--six-color-web-rock-300);\n      }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerPaddingDirection, ItemPickerType } from './types';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\ntype StringItemIndex = { [key: string]: number };\n\ninterface Alphabet {\n  alphabet: string[];\n  letterIndexes: StringItemIndex;\n}\n\nconst A_CHARCODE = 65;\nconst NUMBER_OF_LETTERS = 26;\n\nconst CAPITAL_ALPHABET: Alphabet = (() => {\n  const alphabetCodes = Array.from(Array(NUMBER_OF_LETTERS)).map((_, i) => i + A_CHARCODE);\n  const letterIndexes = {};\n  const alphabet = alphabetCodes.map((charCode, index) => {\n    const character = String.fromCharCode(charCode);\n    letterIndexes[character] = index;\n    return character;\n  });\n  return { alphabet, letterIndexes };\n})();\n\nconst LOWERCASE_ALPHABET: Alphabet = (() => {\n  const alphabet = [];\n  const letterIndexes = {};\n\n  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {\n    const lowercaseCharacter = CAPITAL_ALPHABET.alphabet[i].toLowerCase();\n    letterIndexes[lowercaseCharacter] = alphabet.length;\n    alphabet.push(lowercaseCharacter);\n  }\n\n  return { alphabet, letterIndexes };\n})();\n\nconst ALPHABET: Alphabet = (() => {\n  const alphabet = [];\n  const letterIndexes = {};\n\n  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {\n    const capitalCharacter = CAPITAL_ALPHABET.alphabet[i];\n    letterIndexes[capitalCharacter] = alphabet.length;\n    alphabet.push(capitalCharacter);\n\n    const lowerCharacter = LOWERCASE_ALPHABET.alphabet[i];\n    letterIndexes[lowerCharacter] = alphabet.length;\n    alphabet.push(lowerCharacter);\n  }\n\n  return { alphabet, letterIndexes };\n})();\n\nconst createItemIndexes = (arr: string[]): StringItemIndex => {\n  const itemIndexes = {};\n\n  for (let i = 0; i < arr?.length; i++) {\n    itemIndexes[arr[i]] = i;\n  }\n\n  return itemIndexes;\n};\n\nconst TAG = `[SIX-ITEM-PICKER]`;\n\nconst subtract = (a: number, b: number) => a - b;\nconst add = (a: number, b: number) => a + b;\n\nexport type SixItemPickerChangePayload = number | string;\n\nconst DEBOUNCE_ITEM_PICKER_LISTENER = 'debounced-item-picker';\n\n/**\n * @since 2.0.0\n * @status experimental\n * @part container - The whole component container\n * @part up - The up button\n * @part content - The content area\n * @part down - The down button\n *\n */\n@Component({\n  tag: 'six-item-picker',\n  styleUrl: 'six-item-picker.scss',\n  shadow: true,\n})\nexport class SixItemPicker {\n  private readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixItemPickerElement;\n\n  /** The item picker's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value: number | string = '';\n\n  /** The type of items you want to rotate through. */\n  @Prop() type: ItemPickerType = ItemPickerType.NUMBER;\n\n  /** The minimum value allowed to pick. */\n  @Prop({ reflect: true, mutable: true }) min: number | string;\n\n  /** The maximum value allowed to pick. */\n  @Prop({ reflect: true, mutable: true }) max: number | string;\n\n  /** Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. */\n  @Prop({ reflect: true }) roundtrip = true;\n\n  /** Defines how many steps should be taken when navigating */\n  @Prop({ reflect: true }) step: number = 1;\n\n  /** Defines a custom list of items you can iterate through */\n  @Prop() items: string[];\n\n  /** Defines whether the items should be padded */\n  @Prop() padded = false;\n\n  /** Defines the length of the padded area */\n  @Prop() paddingLength = 2;\n\n  /** Defines the character used for padding */\n  @Prop() paddingChar = '0';\n\n  /** Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default\n   * before is selected */\n  @Prop() paddingDirection: ItemPickerPaddingDirection = ItemPickerPaddingDirection.BEFORE;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.\n   */\n  @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.\n   */\n  @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n  /**\n   * Emitted when the item picker's value changes\n   */\n  @Event({ eventName: 'six-item-picker-change' }) sixChange: EventEmitter<SixItemPickerChangePayload>;\n\n  /**\n   * Emitted when the item picker's value changes, but debounced\n   */\n  @Event({ eventName: 'six-item-picker-change-debounced' })\n  sixChangeDebounced: EventEmitter<SixItemPickerChangePayload>;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-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  @Watch('value')\n  handleValueChange() {\n    this.setup();\n  }\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.eventListeners.removeByIdentifier(DEBOUNCE_ITEM_PICKER_LISTENER);\n    this.eventListeners.add(\n      this.host,\n      'six-item-picker-change',\n      debounce(this.handleSixItemPickerChangeDebounced, this.debounce),\n      DEBOUNCE_ITEM_PICKER_LISTENER\n    );\n  }\n\n  @Watch('items')\n  handleSetChange() {\n    this.setup();\n    this.min = this._items[0];\n    this.max = this.getLastStringItem();\n  }\n\n  @State() _items: string[] = [];\n  @State() _itemIndexes: StringItemIndex;\n\n  // used for fast increasing when keeping the mouse button held down\n  _timeoutNext: ReturnType<typeof setTimeout>;\n  _intervalNext: ReturnType<typeof setInterval>;\n\n  _timeoutPrev: ReturnType<typeof setTimeout>;\n  _intervalPrev: ReturnType<typeof setInterval>;\n\n  componentWillLoad() {\n    this.setup();\n  }\n\n  componentDidLoad() {\n    this.eventListeners.add(\n      this.host,\n      'six-item-picker-change',\n      debounce(this.handleSixItemPickerChangeDebounced, this.debounce),\n      DEBOUNCE_ITEM_PICKER_LISTENER\n    );\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  handleSixItemPickerChangeDebounced = () => {\n    this.sixChangeDebounced.emit(this.value);\n  };\n\n  private setup() {\n    if (this.isNumber()) {\n      this.setupNumberItems();\n    } else {\n      this.setUpStringItems();\n    }\n  }\n\n  private setupNumberItems() {\n    if (this.isInvalidNumber()) {\n      console.warn(`${TAG} Expected number but value is not a number: \"${this.value}\"`);\n      console.info(`${TAG} Will set value to either minimum or if not provided to zero.`);\n      this.value = this.min ?? 0;\n    }\n  }\n\n  private setUpStringItems() {\n    this._items = this.getItems();\n\n    if (!this._items) {\n      console.warn(`${TAG}: abort setup because no items were found.`);\n      return;\n    }\n\n    this._itemIndexes = this.getItemIndexes();\n    const itemsMissValue = this._items.find((i) => String(i) === String(this.value)) === undefined;\n    if (itemsMissValue) {\n      console.warn(`${TAG} Expected item from item set but value was not found in set: \"${this.value}\"`);\n      console.info(`${TAG} Will set value to either minimum or if not provided to \"${this._items[0]}\".`);\n      this.value = this._items[0];\n    }\n\n    if (this.min === undefined) {\n      if (!this.roundtrip) {\n        console.warn(`${TAG} Expected a min value`);\n        console.info(`${TAG} Will set min value to ${this._items[0]}`);\n      }\n      this.min = this._items[0];\n    }\n\n    if (this.max === undefined) {\n      const maxItem = this.getLastStringItem();\n      if (!this.roundtrip) {\n        console.warn(`${TAG} Expected a min value if roundtrip is enabled`);\n        console.info(`${TAG} Will set min value to ${maxItem}`);\n      }\n      this.max = maxItem;\n    }\n  }\n\n  private getLastStringItem() {\n    return this._items[this._items.length - 1];\n  }\n\n  private getItems() {\n    return {\n      [ItemPickerType.LETTER]: ALPHABET.alphabet,\n      [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.alphabet,\n      [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.alphabet,\n      [ItemPickerType.CUSTOM]: this.items,\n    }[this.type];\n  }\n\n  private getItemIndexes() {\n    if (this.type === ItemPickerType.CUSTOM) {\n      return createItemIndexes(this.items);\n    }\n\n    return {\n      [ItemPickerType.LETTER]: ALPHABET.letterIndexes,\n      [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.letterIndexes,\n      [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.letterIndexes,\n    }[this.type];\n  }\n\n  private previousItem() {\n    if (this.isNumber()) {\n      this.previousNumber();\n    } else {\n      this.previousStringItem();\n    }\n\n    this.sixChange.emit(this.value);\n  }\n\n  private previousNumber() {\n    this.changeValue({\n      isNextItemAllowed: () => !this.isPreviousNumberDisabled(),\n      getNextItem: () => Number(this.value) - this.step,\n      getRoundtripItem: () => Number(this.max),\n      isRoundtripPossible: () => this.max === undefined && this.roundtrip,\n    });\n  }\n\n  private previousStringItem() {\n    const value = this.value as string;\n    const minLetter = this.min as string;\n\n    this.changeValue({\n      isNextItemAllowed: () =>\n        minLetter === undefined || this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),\n      getNextItem: () => this.getNextItemByOperation(subtract),\n      getRoundtripItem: () => this.max,\n      isRoundtripPossible: () => this.max === undefined && this.roundtrip,\n    });\n  }\n\n  private nextItem() {\n    if (this.isNumber()) {\n      this.nextNumber();\n    } else {\n      this.nextStringItem();\n    }\n\n    this.sixChange.emit(this.value);\n  }\n\n  private nextNumber() {\n    this.changeValue({\n      isNextItemAllowed: () => !this.isNextNumberDisabled(),\n      getNextItem: () => Number(this.value) + this.step,\n      getRoundtripItem: () => Number(this.min),\n      isRoundtripPossible: () => this.min === undefined && this.roundtrip,\n    });\n  }\n\n  private getStringItemIndex(char: string): number {\n    return this._itemIndexes[char];\n  }\n\n  private nextStringItem() {\n    const value = this.value as string;\n    const maxLetter = this.max as string;\n\n    this.changeValue({\n      isNextItemAllowed: () =>\n        maxLetter === undefined || this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),\n      getNextItem: () => this.getNextItemByOperation(add),\n      getRoundtripItem: () => this.min,\n      isRoundtripPossible: () => this.min === undefined && this.roundtrip,\n    });\n  }\n\n  private getNextItemByOperation(operation: (a: number, b: number) => number) {\n    const value = this.value as string;\n    const nextIndexCandidate = operation(this.getStringItemIndex(value), this.step);\n    const numberOfItems = this._items.length;\n    const nextIndex = ((nextIndexCandidate % numberOfItems) + numberOfItems) % numberOfItems;\n    return this._items[nextIndex];\n  }\n\n  private changeValue(params: {\n    getNextItem: () => any;\n    isNextItemAllowed: () => boolean;\n    getRoundtripItem: () => number | string;\n    isRoundtripPossible: () => boolean;\n  }) {\n    if (params.isNextItemAllowed()) {\n      this.value = params.getNextItem();\n      return;\n    }\n\n    if (params.isRoundtripPossible()) {\n      console.error(\n        `${TAG} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`\n      );\n      return;\n    }\n\n    if (this.roundtrip) {\n      this.value = params.getRoundtripItem();\n      return;\n    }\n\n    console.warn(\n      `${TAG} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`\n    );\n  }\n\n  private isNumber() {\n    return this.type === ItemPickerType.NUMBER;\n  }\n\n  private isInvalidNumber() {\n    return this.value === '' || !!isNaN(this.value as number);\n  }\n\n  private isNextDisabled() {\n    if (this.roundtrip) {\n      return false;\n    }\n\n    if (this.isNumber()) {\n      return this.isNextNumberDisabled();\n    } else {\n      if (!this._itemIndexes) {\n        return true;\n      }\n\n      return this._itemIndexes[String(this.value)] + this.step > this._itemIndexes[String(this.max)];\n    }\n  }\n\n  private isNextNumberDisabled() {\n    return Number(this.value) + this.step > (this.max ?? Infinity);\n  }\n\n  private isPrevDisabled() {\n    if (this.roundtrip) {\n      return false;\n    }\n\n    if (this.isNumber()) {\n      return this.isPreviousNumberDisabled();\n    } else {\n      if (!this._itemIndexes) {\n        return true;\n      }\n\n      return this._itemIndexes[String(this.value)] - this.step < this._itemIndexes[String(this.min)];\n    }\n  }\n\n  private isPreviousNumberDisabled() {\n    return Number(this.value) - this.step < (this.min ?? -Infinity);\n  }\n\n  private onMouseDownNext() {\n    if (this.isNextDisabled()) {\n      return;\n    }\n\n    this.nextItem();\n\n    this._timeoutNext = setTimeout(() => {\n      this._intervalNext = setInterval(() => {\n        this.nextItem();\n      }, this.interval);\n    }, this.timeout);\n  }\n\n  private onMouseUpNext() {\n    clearTimeout(this._timeoutNext);\n    clearInterval(this._intervalNext);\n  }\n\n  private onMouseDownPrev() {\n    if (this.isPrevDisabled()) {\n      return;\n    }\n\n    this.previousItem();\n\n    this._timeoutPrev = setTimeout(() => {\n      this._intervalPrev = setInterval(() => {\n        this.previousItem();\n      }, this.interval);\n    }, this.timeout);\n  }\n\n  private onMouseUpPrev() {\n    clearTimeout(this._timeoutPrev);\n    clearInterval(this._intervalPrev);\n  }\n\n  private getFormattedValue() {\n    if (this.value === undefined || this.value === null) {\n      return this.value;\n    }\n\n    if (!this.padded) {\n      return this.value;\n    }\n\n    if (this.paddingDirection === ItemPickerPaddingDirection.BEFORE) {\n      return String(this.value).padStart(this.paddingLength, this.paddingChar);\n    } else if (this.paddingDirection === ItemPickerPaddingDirection.AFTER) {\n      return String(this.value).padEnd(this.paddingLength, this.paddingChar);\n    }\n\n    return this.value;\n  }\n\n  render() {\n    return (\n      <div part=\"container\" class=\"item_picker__container\">\n        <div\n          part=\"up\"\n          class={{\n            item_picker__btn: true,\n            'item_picker__btn--disabled': this.isNextDisabled(),\n          }}\n          onMouseDown={() => this.onMouseDownNext()}\n          onMouseUp={() => this.onMouseUpNext()}\n        >\n          <six-icon size=\"large\">expand_less</six-icon>\n        </div>\n        <div part=\"content\" class=\"item_picker__content\">\n          {this.getFormattedValue()}\n        </div>\n        <div\n          part=\"down\"\n          class={{\n            item_picker__btn: true,\n            'item_picker__btn--disabled': this.isPrevDisabled(),\n          }}\n          onMouseDown={() => this.onMouseDownPrev()}\n          onMouseUp={() => this.onMouseUpPrev()}\n        >\n          <six-icon size=\"large\">expand_more</six-icon>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-language-switcher.d.ts

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