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

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

@@ -1,688 +1,681 @@
-import { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';
-import { ItemPickerPaddingDirection, ItemPickerType } from './types';
-import { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';
-import { EventListeners } from '../../utils/event-listeners';
-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';
-/**
- * @since 2.0.0
- * @status experimental
- * @part container - The whole component container
- * @part up - The up button
- * @part content - The content area
- * @part down - The down button
- *
- */
-export class SixItemPicker {
-  constructor() {
-    this.eventListeners = new EventListeners();
-    /** The item picker's value attribute. */
-    this.value = '';
-    /** The type of items you want to rotate through. */
-    this.type = ItemPickerType.NUMBER;
-    /** Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. */
-    this.roundtrip = true;
-    /** Defines how many steps should be taken when navigating */
-    this.step = 1;
-    /** Defines whether the items should be padded */
-    this.padded = false;
-    /** Defines the length of the padded area */
-    this.paddingLength = 2;
-    /** Defines the character used for padding */
-    this.paddingChar = '0';
-    /** Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default
-     * before is selected */
-    this.paddingDirection = ItemPickerPaddingDirection.BEFORE;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.
-     */
-    this.timeout = DEFAULT_DEBOUNCE_FAST;
-    /**
-     * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.
-     */
-    this.interval = DEFAULT_DEBOUNCE_INSANELY_FAST;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.
-     * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce
-     * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click
-     * (and keep pressed) and once you release
-     */
-    this.debounce = DEFAULT_DEBOUNCE_FAST;
-    this._items = [];
-    this.handleSixItemPickerChangeDebounced = () => {
-      this.sixChangeDebounced.emit(this.value);
-    };
-  }
-  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"))));
-  }
-  static get is() { return "six-item-picker"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-item-picker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-item-picker.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "number | string",
-        "resolved": "number | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The item picker's value attribute."
-      },
-      "attribute": "value",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ItemPickerType",
-        "resolved": "ItemPickerType.CAPITAL_LETTER | ItemPickerType.CUSTOM | ItemPickerType.LETTER | ItemPickerType.LOWER_LETTER | ItemPickerType.NUMBER",
-        "references": {
-          "ItemPickerType": {
-            "location": "import",
-            "path": "./types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The type of items you want to rotate through."
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "ItemPickerType.NUMBER"
-    },
-    "min": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "number | string",
-        "resolved": "number | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The minimum value allowed to pick."
-      },
-      "attribute": "min",
-      "reflect": true
-    },
-    "max": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "number | string",
-        "resolved": "number | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The maximum value allowed to pick."
-      },
-      "attribute": "max",
-      "reflect": true
-    },
-    "roundtrip": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa."
-      },
-      "attribute": "roundtrip",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "step": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines how many steps should be taken when navigating"
-      },
-      "attribute": "step",
-      "reflect": true,
-      "defaultValue": "1"
-    },
-    "items": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines a custom list of items you can iterate through"
-      }
-    },
-    "padded": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines whether the items should be padded"
-      },
-      "attribute": "padded",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "paddingLength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the length of the padded area"
-      },
-      "attribute": "padding-length",
-      "reflect": false,
-      "defaultValue": "2"
-    },
-    "paddingChar": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the character used for padding"
-      },
-      "attribute": "padding-char",
-      "reflect": false,
-      "defaultValue": "'0'"
-    },
-    "paddingDirection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ItemPickerPaddingDirection",
-        "resolved": "ItemPickerPaddingDirection.AFTER | ItemPickerPaddingDirection.BEFORE",
-        "references": {
-          "ItemPickerPaddingDirection": {
-            "location": "import",
-            "path": "./types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default\nbefore is selected"
-      },
-      "attribute": "padding-direction",
-      "reflect": false,
-      "defaultValue": "ItemPickerPaddingDirection.BEFORE"
-    },
-    "timeout": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the amount of time, in milliseconds, to wait to trigger faster switching between items."
-      },
-      "attribute": "timeout",
-      "reflect": false,
-      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-    },
-    "interval": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed."
-      },
-      "attribute": "interval",
-      "reflect": false,
-      "defaultValue": "DEFAULT_DEBOUNCE_INSANELY_FAST"
-    },
-    "debounce": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.\nIf you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\nis 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"
-      },
-      "attribute": "debounce",
-      "reflect": false,
-      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-    }
-  }; }
-  static get states() { return {
-    "_items": {},
-    "_itemIndexes": {}
-  }; }
-  static get events() { return [{
-      "method": "sixChange",
-      "name": "six-item-picker-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the item picker's value changes"
-      },
-      "complexType": {
-        "original": "SixItemPickerChangePayload",
-        "resolved": "number | string",
-        "references": {
-          "SixItemPickerChangePayload": {
-            "location": "local"
-          }
-        }
-      }
-    }, {
-      "method": "sixChangeDebounced",
-      "name": "six-item-picker-change-debounced",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the item picker's value changes, but debounced"
-      },
-      "complexType": {
-        "original": "SixItemPickerChangePayload",
-        "resolved": "number | string",
-        "references": {
-          "SixItemPickerChangePayload": {
-            "location": "local"
-          }
-        }
-      }
-    }]; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "handleValueChange"
-    }, {
-      "propName": "debounce",
-      "methodName": "debounceChanged"
-    }, {
-      "propName": "items",
-      "methodName": "handleSetChange"
-    }]; }
-}
+import { h } from '@stencil/core';
+import { ItemPickerPaddingDirection, ItemPickerType } from './types';
+import { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';
+import { EventListeners } from '../../utils/event-listeners';
+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';
+/**
+ * @since 2.0.0
+ * @status experimental
+ * @part container - The whole component container
+ * @part up - The up button
+ * @part content - The content area
+ * @part down - The down button
+ *
+ */
+export class SixItemPicker {
+  constructor() {
+    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"))));
+  }
+  static get is() { return "six-item-picker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-item-picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-item-picker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "number | string",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The item picker's value attribute."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ItemPickerType",
+          "resolved": "ItemPickerType.CAPITAL_LETTER | ItemPickerType.CUSTOM | ItemPickerType.LETTER | ItemPickerType.LOWER_LETTER | ItemPickerType.NUMBER",
+          "references": {
+            "ItemPickerType": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type of items you want to rotate through."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "ItemPickerType.NUMBER"
+      },
+      "min": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "number | string",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The minimum value allowed to pick."
+        },
+        "attribute": "min",
+        "reflect": true
+      },
+      "max": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "number | string",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The maximum value allowed to pick."
+        },
+        "attribute": "max",
+        "reflect": true
+      },
+      "roundtrip": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa."
+        },
+        "attribute": "roundtrip",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines how many steps should be taken when navigating"
+        },
+        "attribute": "step",
+        "reflect": true,
+        "defaultValue": "1"
+      },
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines a custom list of items you can iterate through"
+        }
+      },
+      "padded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines whether the items should be padded"
+        },
+        "attribute": "padded",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "paddingLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the length of the padded area"
+        },
+        "attribute": "padding-length",
+        "reflect": false,
+        "defaultValue": "2"
+      },
+      "paddingChar": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the character used for padding"
+        },
+        "attribute": "padding-char",
+        "reflect": false,
+        "defaultValue": "'0'"
+      },
+      "paddingDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ItemPickerPaddingDirection",
+          "resolved": "ItemPickerPaddingDirection.AFTER | ItemPickerPaddingDirection.BEFORE",
+          "references": {
+            "ItemPickerPaddingDirection": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default\nbefore is selected"
+        },
+        "attribute": "padding-direction",
+        "reflect": false,
+        "defaultValue": "ItemPickerPaddingDirection.BEFORE"
+      },
+      "timeout": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the amount of time, in milliseconds, to wait to trigger faster switching between items."
+        },
+        "attribute": "timeout",
+        "reflect": false,
+        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+      },
+      "interval": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed."
+        },
+        "attribute": "interval",
+        "reflect": false,
+        "defaultValue": "DEFAULT_DEBOUNCE_INSANELY_FAST"
+      },
+      "debounce": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.\nIf you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\nis 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"
+        },
+        "attribute": "debounce",
+        "reflect": false,
+        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_items": {},
+      "_itemIndexes": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sixChange",
+        "name": "six-item-picker-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the item picker's value changes"
+        },
+        "complexType": {
+          "original": "SixItemPickerChangePayload",
+          "resolved": "number | string",
+          "references": {
+            "SixItemPickerChangePayload": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/packages/ui-library/src/components/six-item-picker/six-item-picker.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "sixChangeDebounced",
+        "name": "six-item-picker-change-debounced",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the item picker's value changes, but debounced"
+        },
+        "complexType": {
+          "original": "SixItemPickerChangePayload",
+          "resolved": "number | string",
+          "references": {
+            "SixItemPickerChangePayload": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/packages/ui-library/src/components/six-item-picker/six-item-picker.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "handleValueChange"
+      }, {
+        "propName": "debounce",
+        "methodName": "debounceChanged"
+      }, {
+        "propName": "items",
+        "methodName": "handleSetChange"
+      }];
+  }
+}
+//# sourceMappingURL=six-item-picker.js.map