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

package/dist/esm/six-item-picker.entry.js

@@ -1,368 +1,368 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.js';
-import { I as ItemPickerType, a as ItemPickerPaddingDirection } from './types-a37c1695.js';
-import { D as DEFAULT_DEBOUNCE_FAST, b as DEFAULT_DEBOUNCE_INSANELY_FAST, a as debounce } from './execution-control-235f5126.js';
-import { E as EventListeners } from './event-listeners-1bef934e.js';
+import { I as ItemPickerType, a as ItemPickerPaddingDirection } from './types-4b10b413.js';
+import { D as DEFAULT_DEBOUNCE_FAST, b as DEFAULT_DEBOUNCE_INSANELY_FAST, a as debounce } from './execution-control-1a60d709.js';
+import { E as EventListeners } from './event-listeners-570a24ea.js';
 
 const sixItemPickerCss = ".item_picker__container{width:2.5em;display:flex;flex-wrap:wrap;justify-content:center}.item_picker__content{font-size:1.5rem}.item_picker__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--six-color-web-rock-500)}.item_picker__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.item_picker__btn:active{color:var(--six-color-web-rock-400)}.item_picker__btn--disabled{color:var(--six-color-web-rock-300);cursor:not-allowed}.item_picker__btn--disabled:hover{background-color:initial}.item_picker__btn--disabled:active{color:var(--six-color-web-rock-300)}";
 
-const A_CHARCODE = 65;
-const NUMBER_OF_LETTERS = 26;
-const CAPITAL_ALPHABET = (() => {
-  const alphabetCodes = Array.from(Array(NUMBER_OF_LETTERS)).map((_, i) => i + A_CHARCODE);
-  const letterIndexes = {};
-  const alphabet = alphabetCodes.map((charCode, index) => {
-    const character = String.fromCharCode(charCode);
-    letterIndexes[character] = index;
-    return character;
-  });
-  return { alphabet, letterIndexes };
-})();
-const LOWERCASE_ALPHABET = (() => {
-  const alphabet = [];
-  const letterIndexes = {};
-  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {
-    const lowercaseCharacter = CAPITAL_ALPHABET.alphabet[i].toLowerCase();
-    letterIndexes[lowercaseCharacter] = alphabet.length;
-    alphabet.push(lowercaseCharacter);
-  }
-  return { alphabet, letterIndexes };
-})();
-const ALPHABET = (() => {
-  const alphabet = [];
-  const letterIndexes = {};
-  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {
-    const capitalCharacter = CAPITAL_ALPHABET.alphabet[i];
-    letterIndexes[capitalCharacter] = alphabet.length;
-    alphabet.push(capitalCharacter);
-    const lowerCharacter = LOWERCASE_ALPHABET.alphabet[i];
-    letterIndexes[lowerCharacter] = alphabet.length;
-    alphabet.push(lowerCharacter);
-  }
-  return { alphabet, letterIndexes };
-})();
-const createItemIndexes = (arr) => {
-  const itemIndexes = {};
-  for (let i = 0; i < (arr === null || arr === void 0 ? void 0 : arr.length); i++) {
-    itemIndexes[arr[i]] = i;
-  }
-  return itemIndexes;
-};
-const TAG = `[SIX-ITEM-PICKER]`;
-const subtract = (a, b) => a - b;
-const add = (a, b) => a + b;
-const DEBOUNCE_ITEM_PICKER_LISTENER = 'debounced-item-picker';
-let SixItemPicker = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sixChange = createEvent(this, "six-item-picker-change", 7);
-    this.sixChangeDebounced = createEvent(this, "six-item-picker-change-debounced", 7);
-    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"))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["handleValueChange"],
-    "debounce": ["debounceChanged"],
-    "items": ["handleSetChange"]
-  }; }
-};
+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';
+let SixItemPicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixChange = createEvent(this, "six-item-picker-change", 7);
+    this.sixChangeDebounced = createEvent(this, "six-item-picker-change-debounced", 7);
+    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"))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["handleValueChange"],
+    "debounce": ["debounceChanged"],
+    "items": ["handleSetChange"]
+  }; }
+};
 SixItemPicker.style = sixItemPickerCss;
 
 export { SixItemPicker as six_item_picker };