@six-group/ui-library 4.0.4 → 4.1.0

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

@@ -5,19 +5,19 @@ import { EventListeners } from "../../utils/event-listeners";
 const uppercaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 const upperAndLowercaseLetters = [...uppercaseLetters].flatMap((c) => [c, c.toLowerCase()]);
 const ALPHABET = {
-  alphabet: upperAndLowercaseLetters,
-  letterIndexes: Object.fromEntries(upperAndLowercaseLetters.map((c, i) => [c, i])),
+    alphabet: upperAndLowercaseLetters,
+    letterIndexes: Object.fromEntries(upperAndLowercaseLetters.map((c, i) => [c, i])),
 };
 const CAPITAL_ALPHABET = {
-  alphabet: [...uppercaseLetters].flatMap((c) => [c]),
-  letterIndexes: Object.fromEntries([...uppercaseLetters].map((c, i) => [c, i])),
+    alphabet: [...uppercaseLetters].flatMap((c) => [c]),
+    letterIndexes: Object.fromEntries([...uppercaseLetters].map((c, i) => [c, i])),
 };
 const LOWERCASE_ALPHABET = {
-  alphabet: [...uppercaseLetters.toLowerCase()].flatMap((c) => [c]),
-  letterIndexes: Object.fromEntries([...uppercaseLetters.toLowerCase()].map((c, i) => [c, i])),
+    alphabet: [...uppercaseLetters.toLowerCase()].flatMap((c) => [c]),
+    letterIndexes: Object.fromEntries([...uppercaseLetters.toLowerCase()].map((c, i) => [c, i])),
 };
 const createItemIndexes = (arr) => {
-  return Object.fromEntries([...arr].map((c, i) => [c, i]));
+    return Object.fromEntries([...arr].map((c, i) => [c, i]));
 };
 const TAG = `[SIX-ITEM-PICKER]`;
 const subtract = (a, b) => a - b;
@@ -33,634 +33,730 @@ const DEBOUNCE_ITEM_PICKER_LISTENER = 'debounced-item-picker';
  *
  */
 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 = {};
-  }
-  handleValueChange() {
-    this.setup();
-  }
-  debounceChanged() {
-    this.eventListeners.removeByIdentifier(DEBOUNCE_ITEM_PICKER_LISTENER);
-    this.eventListeners.add(this.host, 'six-item-picker-change', debounce(this.handleSixItemPickerChangeDebounced, this.debounce), DEBOUNCE_ITEM_PICKER_LISTENER);
-  }
-  handleSetChange() {
-    this.setup();
-    this.min = this._items[0];
-    this.max = this.getLastStringItem();
-  }
-  componentWillLoad() {
-    this.setup();
-  }
-  componentDidLoad() {
-    this.eventListeners.add(this.host, 'six-item-picker-change', debounce(this.handleSixItemPickerChangeDebounced, this.debounce), DEBOUNCE_ITEM_PICKER_LISTENER);
-  }
-  disconnectedCallback() {
-    this.eventListeners.removeAll();
-  }
-  setup() {
-    if (this.isNumber()) {
-      this.setupNumberItems();
-    }
-    else {
-      this.setUpStringItems();
-    }
-  }
-  setupNumberItems() {
-    var _a;
-    if (this.isInvalidNumber()) {
-      console.warn(`${TAG} Expected number but value is not a number: "${this.value}"`);
-      console.info(`${TAG} Will set value to either minimum or if not provided to zero.`);
-      this.value = (_a = this.min) !== null && _a !== void 0 ? _a : 0;
-    }
-  }
-  setUpStringItems() {
-    this._items = this.getStringItems();
-    this._itemIndexes = this.getItemIndexes();
-    const itemsMissValue = this._items.find((i) => String(i) === String(this.value)) === undefined;
-    if (itemsMissValue) {
-      console.warn(`${TAG} Expected item from item set but value was not found in set: "${this.value}"`);
-      console.info(`${TAG} Will set value to either minimum or if not provided to "${this._items[0]}".`);
-      this.value = this._items[0];
-    }
-    if (this.min === undefined) {
-      if (!this.roundtrip) {
-        console.warn(`${TAG} Expected a min value`);
-        console.info(`${TAG} Will set min value to ${this._items[0]}`);
-      }
-      this.min = this._items[0];
-    }
-    if (this.max === undefined) {
-      const maxItem = this.getLastStringItem();
-      if (!this.roundtrip) {
-        console.warn(`${TAG} Expected a min value if roundtrip is enabled`);
-        console.info(`${TAG} Will set min value to ${maxItem}`);
-      }
-      this.max = maxItem;
-    }
-  }
-  getLastStringItem() {
-    return this._items[this._items.length - 1];
-  }
-  getStringItems() {
-    switch (this.type) {
-      case ItemPickerType.NUMBER:
-        console.warn(`${TAG}: unexpected type ${this.type}`);
-        return [];
-      case ItemPickerType.LETTER:
-        return ALPHABET.alphabet;
-      case ItemPickerType.CAPITAL_LETTER:
-        return CAPITAL_ALPHABET.alphabet;
-      case ItemPickerType.LOWER_LETTER:
-        return LOWERCASE_ALPHABET.alphabet;
-      case ItemPickerType.CUSTOM:
-        if (this.items == null || this.items.length === 0) {
-          console.warn(`${TAG}: no items defined for type ${this.type}`);
-          return [];
-        }
-        return this.items;
-    }
-  }
-  getItemIndexes() {
-    switch (this.type) {
-      case ItemPickerType.NUMBER:
-        console.warn(`${TAG}: unexpected type ${this.type}`);
-        return {};
-      case ItemPickerType.LETTER:
-        return ALPHABET.letterIndexes;
-      case ItemPickerType.CAPITAL_LETTER:
-        return CAPITAL_ALPHABET.letterIndexes;
-      case ItemPickerType.LOWER_LETTER:
-        return LOWERCASE_ALPHABET.letterIndexes;
-      case ItemPickerType.CUSTOM:
-        return createItemIndexes(this._items);
-    }
-  }
-  previousItem() {
-    if (this.isNumber()) {
-      this.previousNumber();
-    }
-    else {
-      this.previousStringItem();
-    }
-    this.sixChange.emit(this.value);
-  }
-  previousNumber() {
-    this.changeValue({
-      isNextItemAllowed: () => !this.isPreviousNumberDisabled(),
-      getNextItem: () => Number(this.value) - this.step,
-      getRoundtripItem: () => Number(this.max),
-      isRoundtripPossible: () => this.max === undefined && this.roundtrip,
-    });
-  }
-  previousStringItem() {
-    const value = String(this.value);
-    const minLetter = String(this.min);
-    this.changeValue({
-      isNextItemAllowed: () => minLetter === undefined || this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),
-      getNextItem: () => this.getNextItemByOperation(subtract),
-      getRoundtripItem: () => String(this.max),
-      isRoundtripPossible: () => this.max == null && this.roundtrip,
-    });
-  }
-  nextItem() {
-    if (this.isNumber()) {
-      this.nextNumber();
-    }
-    else {
-      this.nextStringItem();
-    }
-    this.sixChange.emit(this.value);
-  }
-  nextNumber() {
-    this.changeValue({
-      isNextItemAllowed: () => !this.isNextNumberDisabled(),
-      getNextItem: () => Number(this.value) + this.step,
-      getRoundtripItem: () => Number(this.min),
-      isRoundtripPossible: () => this.min === undefined && this.roundtrip,
-    });
-  }
-  getStringItemIndex(char) {
-    return this._itemIndexes[char];
-  }
-  nextStringItem() {
-    const value = String(this.value);
-    const maxLetter = String(this.max);
-    this.changeValue({
-      isNextItemAllowed: () => maxLetter === undefined || this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),
-      getNextItem: () => this.getNextItemByOperation(add),
-      getRoundtripItem: () => String(this.min),
-      isRoundtripPossible: () => this.min === undefined && this.roundtrip,
-    });
-  }
-  getNextItemByOperation(operation) {
-    const value = String(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 {
-      return this._itemIndexes[String(this.value)] + this.step > this._itemIndexes[String(this.max)];
-    }
-  }
-  isNextNumberDisabled() {
-    var _a;
-    return Number(this.value) + this.step > Number((_a = this.max) !== null && _a !== void 0 ? _a : Infinity);
-  }
-  isPrevDisabled() {
-    if (this.roundtrip) {
-      return false;
-    }
-    if (this.isNumber()) {
-      return this.isPreviousNumberDisabled();
-    }
-    else {
-      return this._itemIndexes[String(this.value)] - this.step < this._itemIndexes[String(this.min)];
-    }
-  }
-  isPreviousNumberDisabled() {
-    var _a;
-    return Number(this.value) - this.step < Number((_a = this.min) !== null && _a !== void 0 ? _a : -Infinity);
-  }
-  onMouseDownNext() {
-    if (this.isNextDisabled()) {
-      return;
-    }
-    this.nextItem();
-    this._timeoutNext = setTimeout(() => {
-      this._intervalNext = setInterval(() => {
+    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 = {};
+    }
+    handleValueChange() {
+        this.setup();
+    }
+    debounceChanged() {
+        this.eventListeners.removeByIdentifier(DEBOUNCE_ITEM_PICKER_LISTENER);
+        this.eventListeners.add(this.host, 'six-item-picker-change', debounce(this.handleSixItemPickerChangeDebounced, this.debounce), DEBOUNCE_ITEM_PICKER_LISTENER);
+    }
+    handleSetChange() {
+        this.setup();
+        this.min = this._items[0];
+        this.max = this.getLastStringItem();
+    }
+    componentWillLoad() {
+        this.setup();
+    }
+    componentDidLoad() {
+        this.eventListeners.add(this.host, 'six-item-picker-change', debounce(this.handleSixItemPickerChangeDebounced, this.debounce), DEBOUNCE_ITEM_PICKER_LISTENER);
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    setup() {
+        if (this.isNumber()) {
+            this.setupNumberItems();
+        }
+        else {
+            this.setUpStringItems();
+        }
+    }
+    setupNumberItems() {
+        var _a;
+        if (this.isInvalidNumber()) {
+            console.warn(`${TAG} Expected number but value is not a number: "${this.value}"`);
+            console.info(`${TAG} Will set value to either minimum or if not provided to zero.`);
+            this.value = (_a = this.min) !== null && _a !== void 0 ? _a : 0;
+        }
+    }
+    setUpStringItems() {
+        this._items = this.getStringItems();
+        this._itemIndexes = this.getItemIndexes();
+        const itemsMissValue = this._items.find((i) => String(i) === String(this.value)) === undefined;
+        if (itemsMissValue) {
+            console.warn(`${TAG} Expected item from item set but value was not found in set: "${this.value}"`);
+            console.info(`${TAG} Will set value to either minimum or if not provided to "${this._items[0]}".`);
+            this.value = this._items[0];
+        }
+        if (this.min === undefined) {
+            if (!this.roundtrip) {
+                console.warn(`${TAG} Expected a min value`);
+                console.info(`${TAG} Will set min value to ${this._items[0]}`);
+            }
+            this.min = this._items[0];
+        }
+        if (this.max === undefined) {
+            const maxItem = this.getLastStringItem();
+            if (!this.roundtrip) {
+                console.warn(`${TAG} Expected a min value if roundtrip is enabled`);
+                console.info(`${TAG} Will set min value to ${maxItem}`);
+            }
+            this.max = maxItem;
+        }
+    }
+    getLastStringItem() {
+        return this._items[this._items.length - 1];
+    }
+    getStringItems() {
+        switch (this.type) {
+            case ItemPickerType.NUMBER:
+                console.warn(`${TAG}: unexpected type ${this.type}`);
+                return [];
+            case ItemPickerType.LETTER:
+                return ALPHABET.alphabet;
+            case ItemPickerType.CAPITAL_LETTER:
+                return CAPITAL_ALPHABET.alphabet;
+            case ItemPickerType.LOWER_LETTER:
+                return LOWERCASE_ALPHABET.alphabet;
+            case ItemPickerType.CUSTOM:
+                if (this.items == null || this.items.length === 0) {
+                    console.warn(`${TAG}: no items defined for type ${this.type}`);
+                    return [];
+                }
+                return this.items;
+        }
+    }
+    getItemIndexes() {
+        switch (this.type) {
+            case ItemPickerType.NUMBER:
+                console.warn(`${TAG}: unexpected type ${this.type}`);
+                return {};
+            case ItemPickerType.LETTER:
+                return ALPHABET.letterIndexes;
+            case ItemPickerType.CAPITAL_LETTER:
+                return CAPITAL_ALPHABET.letterIndexes;
+            case ItemPickerType.LOWER_LETTER:
+                return LOWERCASE_ALPHABET.letterIndexes;
+            case ItemPickerType.CUSTOM:
+                return createItemIndexes(this._items);
+        }
+    }
+    previousItem() {
+        if (this.isNumber()) {
+            this.previousNumber();
+        }
+        else {
+            this.previousStringItem();
+        }
+        this.sixChange.emit(this.value);
+    }
+    previousNumber() {
+        this.changeValue({
+            isNextItemAllowed: () => !this.isPreviousNumberDisabled(),
+            getNextItem: () => Number(this.value) - this.step,
+            getRoundtripItem: () => Number(this.max),
+            isRoundtripPossible: () => this.max === undefined && this.roundtrip,
+        });
+    }
+    previousStringItem() {
+        const value = String(this.value);
+        const minLetter = String(this.min);
+        this.changeValue({
+            isNextItemAllowed: () => minLetter === undefined || this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),
+            getNextItem: () => this.getNextItemByOperation(subtract),
+            getRoundtripItem: () => String(this.max),
+            isRoundtripPossible: () => this.max == null && this.roundtrip,
+        });
+    }
+    nextItem() {
+        if (this.isNumber()) {
+            this.nextNumber();
+        }
+        else {
+            this.nextStringItem();
+        }
+        this.sixChange.emit(this.value);
+    }
+    nextNumber() {
+        this.changeValue({
+            isNextItemAllowed: () => !this.isNextNumberDisabled(),
+            getNextItem: () => Number(this.value) + this.step,
+            getRoundtripItem: () => Number(this.min),
+            isRoundtripPossible: () => this.min === undefined && this.roundtrip,
+        });
+    }
+    getStringItemIndex(char) {
+        return this._itemIndexes[char];
+    }
+    nextStringItem() {
+        const value = String(this.value);
+        const maxLetter = String(this.max);
+        this.changeValue({
+            isNextItemAllowed: () => maxLetter === undefined || this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),
+            getNextItem: () => this.getNextItemByOperation(add),
+            getRoundtripItem: () => String(this.min),
+            isRoundtripPossible: () => this.min === undefined && this.roundtrip,
+        });
+    }
+    getNextItemByOperation(operation, increment = this.step) {
+        const value = String(this.value);
+        const nextIndexCandidate = operation(this.getStringItemIndex(value), increment);
+        const numberOfItems = this._items.length;
+        const nextIndex = ((nextIndexCandidate % numberOfItems) + numberOfItems) % numberOfItems;
+        return this._items[nextIndex];
+    }
+    changeValue(params) {
+        if (params.isNextItemAllowed()) {
+            this.value = params.getNextItem();
+            return;
+        }
+        if (params.isRoundtripPossible()) {
+            console.error(`${TAG} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`);
+            return;
+        }
+        if (this.roundtrip) {
+            this.value = params.getRoundtripItem();
+            return;
+        }
+        console.warn(`${TAG} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`);
+        this.sixChange.emit(this.value);
+    }
+    isNumber() {
+        return this.type === ItemPickerType.NUMBER;
+    }
+    isInvalidNumber() {
+        return this.value === '' || isNaN(this.value);
+    }
+    isNextDisabled() {
+        if (this.roundtrip) {
+            return false;
+        }
+        if (this.isNumber()) {
+            return this.isNextNumberDisabled();
+        }
+        else {
+            return this._itemIndexes[String(this.value)] + this.step > this._itemIndexes[String(this.max)];
+        }
+    }
+    isNextNumberDisabled() {
+        var _a;
+        return Number(this.value) + this.step > Number((_a = this.max) !== null && _a !== void 0 ? _a : Infinity);
+    }
+    isPrevDisabled() {
+        if (this.roundtrip) {
+            return false;
+        }
+        if (this.isNumber()) {
+            return this.isPreviousNumberDisabled();
+        }
+        else {
+            return this._itemIndexes[String(this.value)] - this.step < this._itemIndexes[String(this.min)];
+        }
+    }
+    isPreviousNumberDisabled() {
+        var _a;
+        return Number(this.value) - this.step < Number((_a = this.min) !== null && _a !== void 0 ? _a : -Infinity);
+    }
+    onMouseDownNext() {
+        if (this.isNextDisabled()) {
+            return;
+        }
         this.nextItem();
-      }, this.interval);
-    }, this.timeout);
-  }
-  onMouseUpNext() {
-    clearTimeout(this._timeoutNext);
-    clearInterval(this._intervalNext);
-  }
-  onMouseDownPrev() {
-    if (this.isPrevDisabled()) {
-      return;
-    }
-    this.previousItem();
-    this._timeoutPrev = setTimeout(() => {
-      this._intervalPrev = setInterval(() => {
+        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.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",
-              "id": "src/components/six-item-picker/types.ts::ItemPickerType"
-            }
-          }
-        },
-        "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 | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "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 | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "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[] | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "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",
-              "id": "src/components/six-item-picker/types.ts::ItemPickerPaddingDirection"
+        this._timeoutPrev = setTimeout(() => {
+            this._intervalPrev = setInterval(() => {
+                this.previousItem();
+            }, this.interval);
+        }, this.timeout);
+    }
+    onMouseUpPrev() {
+        clearTimeout(this._timeoutPrev);
+        clearInterval(this._intervalPrev);
+    }
+    getFormattedValue() {
+        if (this.value === undefined || this.value === null) {
+            return this.value;
+        }
+        if (!this.padded) {
+            return this.value;
+        }
+        if (this.paddingDirection === ItemPickerPaddingDirection.BEFORE) {
+            return String(this.value).padStart(this.paddingLength, this.paddingChar);
+        }
+        else if (this.paddingDirection === ItemPickerPaddingDirection.AFTER) {
+            return String(this.value).padEnd(this.paddingLength, this.paddingChar);
+        }
+        return this.value;
+    }
+    handleKeyPress(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (event.target === this.upButton) {
+                this.nextItem();
             }
-          }
-        },
-        "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": "boolean | number | string",
-          "references": {
-            "SixItemPickerChangePayload": {
-              "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-item-picker/six-item-picker.tsx",
-              "id": "src/components/six-item-picker/six-item-picker.tsx::SixItemPickerChangePayload"
+            else if (event.target === this.downButton) {
+                this.previousItem();
             }
-          }
-        }
-      }, {
-        "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": "boolean | number | string",
-          "references": {
-            "SixItemPickerChangePayload": {
-              "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-item-picker/six-item-picker.tsx",
-              "id": "src/components/six-item-picker/six-item-picker.tsx::SixItemPickerChangePayload"
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.nextItem();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.previousItem();
+        }
+        else if (event.key === 'PageUp') {
+            event.preventDefault();
+            this.pageUp();
+        }
+        else if (event.key === 'PageDown') {
+            event.preventDefault();
+            this.pageDown();
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            this.goToMin();
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            this.goToMax();
+        }
+    }
+    pageUp() {
+        if (this.isNumber()) {
+            this.changeValue({
+                isNextItemAllowed: () => !this.isNextNumberDisabled(),
+                getNextItem: () => Number(this.value) + 5 * this.step,
+                getRoundtripItem: () => Number(this.min),
+                isRoundtripPossible: () => this.min === undefined && this.roundtrip,
+            });
+        }
+        else {
+            const value = String(this.value);
+            const minLetter = String(this.min);
+            this.changeValue({
+                isNextItemAllowed: () => minLetter === undefined || this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),
+                getNextItem: () => this.getNextItemByOperation(add, 5),
+                getRoundtripItem: () => String(this.min),
+                isRoundtripPossible: () => this.min === undefined && this.roundtrip,
+            });
+        }
+    }
+    pageDown() {
+        if (this.isNumber()) {
+            this.changeValue({
+                isNextItemAllowed: () => !this.isPreviousNumberDisabled(),
+                getNextItem: () => Number(this.value) - 5 * this.step,
+                getRoundtripItem: () => Number(this.max),
+                isRoundtripPossible: () => this.max === undefined && this.roundtrip,
+            });
+        }
+        else {
+            const value = String(this.value);
+            const maxLetter = String(this.max);
+            this.changeValue({
+                isNextItemAllowed: () => maxLetter === undefined || this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),
+                getNextItem: () => this.getNextItemByOperation(subtract, 5),
+                getRoundtripItem: () => String(this.max),
+                isRoundtripPossible: () => this.max == null && this.roundtrip,
+            });
+        }
+    }
+    goToMin() {
+        var _a;
+        if (this.isNumber()) {
+            this.value = (_a = this.min) !== null && _a !== void 0 ? _a : 0;
+        }
+        else {
+            this.value = this._items[0];
+        }
+        this.sixChange.emit(this.value);
+    }
+    goToMax() {
+        var _a;
+        if (this.isNumber()) {
+            this.value = (_a = this.max) !== null && _a !== void 0 ? _a : Infinity;
+        }
+        else {
+            this.value = this.getLastStringItem();
+        }
+        this.sixChange.emit(this.value);
+    }
+    render() {
+        return (h("div", { part: "container", class: "item_picker__container", onKeyDown: (event) => this.handleKeyPress(event), tabindex: "0" }, h("div", { ref: (el) => (this.upButton = el), part: "up", class: {
+                item_picker__btn: true,
+                'item_picker__btn--disabled': this.isNextDisabled(),
+            }, onMouseDown: () => this.onMouseDownNext(), onMouseUp: () => this.onMouseUpNext(), tabindex: "-1" }, h("six-icon", { size: "large" }, "expand_less")), h("div", { part: "content", class: "item_picker__content" }, this.getFormattedValue()), h("div", { ref: (el) => (this.downButton = el), part: "down", class: {
+                item_picker__btn: true,
+                'item_picker__btn--disabled': this.isPrevDisabled(),
+            }, onMouseDown: () => this.onMouseDownPrev(), onMouseUp: () => this.onMouseUpPrev(), tabindex: "-1" }, h("six-icon", { size: "large" }, "expand_more"))));
+    }
+    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",
+                            "id": "src/components/six-item-picker/types.ts::ItemPickerType"
+                        }
+                    }
+                },
+                "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 | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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 | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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",
+                            "id": "src/components/six-item-picker/types.ts::ItemPickerPaddingDirection"
+                        }
+                    }
+                },
+                "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 elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "handleValueChange"
-      }, {
-        "propName": "debounce",
-        "methodName": "debounceChanged"
-      }, {
-        "propName": "items",
-        "methodName": "handleSetChange"
-      }];
-  }
+        };
+    }
+    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": "boolean | number | string",
+                    "references": {
+                        "SixItemPickerChangePayload": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-item-picker/six-item-picker.tsx",
+                            "id": "src/components/six-item-picker/six-item-picker.tsx::SixItemPickerChangePayload"
+                        }
+                    }
+                }
+            }, {
+                "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": "boolean | number | string",
+                    "references": {
+                        "SixItemPickerChangePayload": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-item-picker/six-item-picker.tsx",
+                            "id": "src/components/six-item-picker/six-item-picker.tsx::SixItemPickerChangePayload"
+                        }
+                    }
+                }
+            }];
+    }
+    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