@six-group/ui-library 4.0.4 → 4.1.0

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

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