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

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

@@ -0,0 +1,688 @@
+import { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';
+import { ItemPickerPaddingDirection, ItemPickerType } from './types';
+import { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';
+import { EventListeners } from '../../utils/event-listeners';
+const A_CHARCODE = 65;
+const NUMBER_OF_LETTERS = 26;
+const CAPITAL_ALPHABET = (() => {
+  const alphabetCodes = Array.from(Array(NUMBER_OF_LETTERS)).map((_, i) => i + A_CHARCODE);
+  const letterIndexes = {};
+  const alphabet = alphabetCodes.map((charCode, index) => {
+    const character = String.fromCharCode(charCode);
+    letterIndexes[character] = index;
+    return character;
+  });
+  return { alphabet, letterIndexes };
+})();
+const LOWERCASE_ALPHABET = (() => {
+  const alphabet = [];
+  const letterIndexes = {};
+  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {
+    const lowercaseCharacter = CAPITAL_ALPHABET.alphabet[i].toLowerCase();
+    letterIndexes[lowercaseCharacter] = alphabet.length;
+    alphabet.push(lowercaseCharacter);
+  }
+  return { alphabet, letterIndexes };
+})();
+const ALPHABET = (() => {
+  const alphabet = [];
+  const letterIndexes = {};
+  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {
+    const capitalCharacter = CAPITAL_ALPHABET.alphabet[i];
+    letterIndexes[capitalCharacter] = alphabet.length;
+    alphabet.push(capitalCharacter);
+    const lowerCharacter = LOWERCASE_ALPHABET.alphabet[i];
+    letterIndexes[lowerCharacter] = alphabet.length;
+    alphabet.push(lowerCharacter);
+  }
+  return { alphabet, letterIndexes };
+})();
+const createItemIndexes = (arr) => {
+  const itemIndexes = {};
+  for (let i = 0; i < (arr === null || arr === void 0 ? void 0 : arr.length); i++) {
+    itemIndexes[arr[i]] = i;
+  }
+  return itemIndexes;
+};
+const TAG = `[SIX-ITEM-PICKER]`;
+const subtract = (a, b) => a - b;
+const add = (a, b) => a + b;
+const DEBOUNCE_ITEM_PICKER_LISTENER = 'debounced-item-picker';
+/**
+ * @since 2.0.0
+ * @status experimental
+ * @part container - The whole component container
+ * @part up - The up button
+ * @part content - The content area
+ * @part down - The down button
+ *
+ */
+export class SixItemPicker {
+  constructor() {
+    this.eventListeners = new EventListeners();
+    /** The item picker's value attribute. */
+    this.value = '';
+    /** The type of items you want to rotate through. */
+    this.type = ItemPickerType.NUMBER;
+    /** Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. */
+    this.roundtrip = true;
+    /** Defines how many steps should be taken when navigating */
+    this.step = 1;
+    /** Defines whether the items should be padded */
+    this.padded = false;
+    /** Defines the length of the padded area */
+    this.paddingLength = 2;
+    /** Defines the character used for padding */
+    this.paddingChar = '0';
+    /** Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default
+     * before is selected */
+    this.paddingDirection = ItemPickerPaddingDirection.BEFORE;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.
+     */
+    this.timeout = DEFAULT_DEBOUNCE_FAST;
+    /**
+     * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.
+     */
+    this.interval = DEFAULT_DEBOUNCE_INSANELY_FAST;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.
+     * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce
+     * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click
+     * (and keep pressed) and once you release
+     */
+    this.debounce = DEFAULT_DEBOUNCE_FAST;
+    this._items = [];
+    this.handleSixItemPickerChangeDebounced = () => {
+      this.sixChangeDebounced.emit(this.value);
+    };
+  }
+  handleValueChange() {
+    this.setup();
+  }
+  debounceChanged() {
+    this.eventListeners.removeByIdentifier(DEBOUNCE_ITEM_PICKER_LISTENER);
+    this.eventListeners.add(this.host, 'six-item-picker-change', debounce(this.handleSixItemPickerChangeDebounced, this.debounce), DEBOUNCE_ITEM_PICKER_LISTENER);
+  }
+  handleSetChange() {
+    this.setup();
+    this.min = this._items[0];
+    this.max = this.getLastStringItem();
+  }
+  componentWillLoad() {
+    this.setup();
+  }
+  componentDidLoad() {
+    this.eventListeners.add(this.host, 'six-item-picker-change', debounce(this.handleSixItemPickerChangeDebounced, this.debounce), DEBOUNCE_ITEM_PICKER_LISTENER);
+  }
+  disconnectedCallback() {
+    this.eventListeners.removeAll();
+  }
+  setup() {
+    if (this.isNumber()) {
+      this.setupNumberItems();
+    }
+    else {
+      this.setUpStringItems();
+    }
+  }
+  setupNumberItems() {
+    var _a;
+    if (this.isInvalidNumber()) {
+      console.warn(`${TAG} Expected number but value is not a number: "${this.value}"`);
+      console.info(`${TAG} Will set value to either minimum or if not provided to zero.`);
+      this.value = (_a = this.min) !== null && _a !== void 0 ? _a : 0;
+    }
+  }
+  setUpStringItems() {
+    this._items = this.getItems();
+    if (!this._items) {
+      console.warn(`${TAG}: abort setup because no items were found.`);
+      return;
+    }
+    this._itemIndexes = this.getItemIndexes();
+    const itemsMissValue = this._items.find((i) => String(i) === String(this.value)) === undefined;
+    if (itemsMissValue) {
+      console.warn(`${TAG} Expected item from item set but value was not found in set: "${this.value}"`);
+      console.info(`${TAG} Will set value to either minimum or if not provided to "${this._items[0]}".`);
+      this.value = this._items[0];
+    }
+    if (this.min === undefined) {
+      if (!this.roundtrip) {
+        console.warn(`${TAG} Expected a min value`);
+        console.info(`${TAG} Will set min value to ${this._items[0]}`);
+      }
+      this.min = this._items[0];
+    }
+    if (this.max === undefined) {
+      const maxItem = this.getLastStringItem();
+      if (!this.roundtrip) {
+        console.warn(`${TAG} Expected a min value if roundtrip is enabled`);
+        console.info(`${TAG} Will set min value to ${maxItem}`);
+      }
+      this.max = maxItem;
+    }
+  }
+  getLastStringItem() {
+    return this._items[this._items.length - 1];
+  }
+  getItems() {
+    return {
+      [ItemPickerType.LETTER]: ALPHABET.alphabet,
+      [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.alphabet,
+      [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.alphabet,
+      [ItemPickerType.CUSTOM]: this.items,
+    }[this.type];
+  }
+  getItemIndexes() {
+    if (this.type === ItemPickerType.CUSTOM) {
+      return createItemIndexes(this.items);
+    }
+    return {
+      [ItemPickerType.LETTER]: ALPHABET.letterIndexes,
+      [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.letterIndexes,
+      [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.letterIndexes,
+    }[this.type];
+  }
+  previousItem() {
+    if (this.isNumber()) {
+      this.previousNumber();
+    }
+    else {
+      this.previousStringItem();
+    }
+    this.sixChange.emit(this.value);
+  }
+  previousNumber() {
+    this.changeValue({
+      isNextItemAllowed: () => !this.isPreviousNumberDisabled(),
+      getNextItem: () => Number(this.value) - this.step,
+      getRoundtripItem: () => Number(this.max),
+      isRoundtripPossible: () => this.max === undefined && this.roundtrip,
+    });
+  }
+  previousStringItem() {
+    const value = this.value;
+    const minLetter = this.min;
+    this.changeValue({
+      isNextItemAllowed: () => minLetter === undefined || this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),
+      getNextItem: () => this.getNextItemByOperation(subtract),
+      getRoundtripItem: () => this.max,
+      isRoundtripPossible: () => this.max === undefined && this.roundtrip,
+    });
+  }
+  nextItem() {
+    if (this.isNumber()) {
+      this.nextNumber();
+    }
+    else {
+      this.nextStringItem();
+    }
+    this.sixChange.emit(this.value);
+  }
+  nextNumber() {
+    this.changeValue({
+      isNextItemAllowed: () => !this.isNextNumberDisabled(),
+      getNextItem: () => Number(this.value) + this.step,
+      getRoundtripItem: () => Number(this.min),
+      isRoundtripPossible: () => this.min === undefined && this.roundtrip,
+    });
+  }
+  getStringItemIndex(char) {
+    return this._itemIndexes[char];
+  }
+  nextStringItem() {
+    const value = this.value;
+    const maxLetter = this.max;
+    this.changeValue({
+      isNextItemAllowed: () => maxLetter === undefined || this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),
+      getNextItem: () => this.getNextItemByOperation(add),
+      getRoundtripItem: () => this.min,
+      isRoundtripPossible: () => this.min === undefined && this.roundtrip,
+    });
+  }
+  getNextItemByOperation(operation) {
+    const value = this.value;
+    const nextIndexCandidate = operation(this.getStringItemIndex(value), this.step);
+    const numberOfItems = this._items.length;
+    const nextIndex = ((nextIndexCandidate % numberOfItems) + numberOfItems) % numberOfItems;
+    return this._items[nextIndex];
+  }
+  changeValue(params) {
+    if (params.isNextItemAllowed()) {
+      this.value = params.getNextItem();
+      return;
+    }
+    if (params.isRoundtripPossible()) {
+      console.error(`${TAG} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`);
+      return;
+    }
+    if (this.roundtrip) {
+      this.value = params.getRoundtripItem();
+      return;
+    }
+    console.warn(`${TAG} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`);
+  }
+  isNumber() {
+    return this.type === ItemPickerType.NUMBER;
+  }
+  isInvalidNumber() {
+    return this.value === '' || !!isNaN(this.value);
+  }
+  isNextDisabled() {
+    if (this.roundtrip) {
+      return false;
+    }
+    if (this.isNumber()) {
+      return this.isNextNumberDisabled();
+    }
+    else {
+      if (!this._itemIndexes) {
+        return true;
+      }
+      return this._itemIndexes[String(this.value)] + this.step > this._itemIndexes[String(this.max)];
+    }
+  }
+  isNextNumberDisabled() {
+    var _a;
+    return Number(this.value) + this.step > ((_a = this.max) !== null && _a !== void 0 ? _a : Infinity);
+  }
+  isPrevDisabled() {
+    if (this.roundtrip) {
+      return false;
+    }
+    if (this.isNumber()) {
+      return this.isPreviousNumberDisabled();
+    }
+    else {
+      if (!this._itemIndexes) {
+        return true;
+      }
+      return this._itemIndexes[String(this.value)] - this.step < this._itemIndexes[String(this.min)];
+    }
+  }
+  isPreviousNumberDisabled() {
+    var _a;
+    return Number(this.value) - this.step < ((_a = this.min) !== null && _a !== void 0 ? _a : -Infinity);
+  }
+  onMouseDownNext() {
+    if (this.isNextDisabled()) {
+      return;
+    }
+    this.nextItem();
+    this._timeoutNext = setTimeout(() => {
+      this._intervalNext = setInterval(() => {
+        this.nextItem();
+      }, this.interval);
+    }, this.timeout);
+  }
+  onMouseUpNext() {
+    clearTimeout(this._timeoutNext);
+    clearInterval(this._intervalNext);
+  }
+  onMouseDownPrev() {
+    if (this.isPrevDisabled()) {
+      return;
+    }
+    this.previousItem();
+    this._timeoutPrev = setTimeout(() => {
+      this._intervalPrev = setInterval(() => {
+        this.previousItem();
+      }, this.interval);
+    }, this.timeout);
+  }
+  onMouseUpPrev() {
+    clearTimeout(this._timeoutPrev);
+    clearInterval(this._intervalPrev);
+  }
+  getFormattedValue() {
+    if (this.value === undefined || this.value === null) {
+      return this.value;
+    }
+    if (!this.padded) {
+      return this.value;
+    }
+    if (this.paddingDirection === ItemPickerPaddingDirection.BEFORE) {
+      return String(this.value).padStart(this.paddingLength, this.paddingChar);
+    }
+    else if (this.paddingDirection === ItemPickerPaddingDirection.AFTER) {
+      return String(this.value).padEnd(this.paddingLength, this.paddingChar);
+    }
+    return this.value;
+  }
+  render() {
+    return (h("div", { part: "container", class: "item_picker__container" },
+      h("div", { part: "up", class: {
+          item_picker__btn: true,
+          'item_picker__btn--disabled': this.isNextDisabled(),
+        }, onMouseDown: () => this.onMouseDownNext(), onMouseUp: () => this.onMouseUpNext() },
+        h("six-icon", { size: "large" }, "expand_less")),
+      h("div", { part: "content", class: "item_picker__content" }, this.getFormattedValue()),
+      h("div", { part: "down", class: {
+          item_picker__btn: true,
+          'item_picker__btn--disabled': this.isPrevDisabled(),
+        }, onMouseDown: () => this.onMouseDownPrev(), onMouseUp: () => this.onMouseUpPrev() },
+        h("six-icon", { size: "large" }, "expand_more"))));
+  }
+  static get is() { return "six-item-picker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-item-picker.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-item-picker.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "number | string",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The item picker's value attribute."
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ItemPickerType",
+        "resolved": "ItemPickerType.CAPITAL_LETTER | ItemPickerType.CUSTOM | ItemPickerType.LETTER | ItemPickerType.LOWER_LETTER | ItemPickerType.NUMBER",
+        "references": {
+          "ItemPickerType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The type of items you want to rotate through."
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "ItemPickerType.NUMBER"
+    },
+    "min": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "number | string",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The minimum value allowed to pick."
+      },
+      "attribute": "min",
+      "reflect": true
+    },
+    "max": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "number | string",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The maximum value allowed to pick."
+      },
+      "attribute": "max",
+      "reflect": true
+    },
+    "roundtrip": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa."
+      },
+      "attribute": "roundtrip",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "step": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines how many steps should be taken when navigating"
+      },
+      "attribute": "step",
+      "reflect": true,
+      "defaultValue": "1"
+    },
+    "items": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines a custom list of items you can iterate through"
+      }
+    },
+    "padded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines whether the items should be padded"
+      },
+      "attribute": "padded",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "paddingLength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the length of the padded area"
+      },
+      "attribute": "padding-length",
+      "reflect": false,
+      "defaultValue": "2"
+    },
+    "paddingChar": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the character used for padding"
+      },
+      "attribute": "padding-char",
+      "reflect": false,
+      "defaultValue": "'0'"
+    },
+    "paddingDirection": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ItemPickerPaddingDirection",
+        "resolved": "ItemPickerPaddingDirection.AFTER | ItemPickerPaddingDirection.BEFORE",
+        "references": {
+          "ItemPickerPaddingDirection": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default\nbefore is selected"
+      },
+      "attribute": "padding-direction",
+      "reflect": false,
+      "defaultValue": "ItemPickerPaddingDirection.BEFORE"
+    },
+    "timeout": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the amount of time, in milliseconds, to wait to trigger faster switching between items."
+      },
+      "attribute": "timeout",
+      "reflect": false,
+      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+    },
+    "interval": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed."
+      },
+      "attribute": "interval",
+      "reflect": false,
+      "defaultValue": "DEFAULT_DEBOUNCE_INSANELY_FAST"
+    },
+    "debounce": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.\nIf you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\nis a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n(and keep pressed) and once you release"
+      },
+      "attribute": "debounce",
+      "reflect": false,
+      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+    }
+  }; }
+  static get states() { return {
+    "_items": {},
+    "_itemIndexes": {}
+  }; }
+  static get events() { return [{
+      "method": "sixChange",
+      "name": "six-item-picker-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the item picker's value changes"
+      },
+      "complexType": {
+        "original": "SixItemPickerChangePayload",
+        "resolved": "number | string",
+        "references": {
+          "SixItemPickerChangePayload": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "sixChangeDebounced",
+      "name": "six-item-picker-change-debounced",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the item picker's value changes, but debounced"
+      },
+      "complexType": {
+        "original": "SixItemPickerChangePayload",
+        "resolved": "number | string",
+        "references": {
+          "SixItemPickerChangePayload": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "handleValueChange"
+    }, {
+      "propName": "debounce",
+      "methodName": "debounceChanged"
+    }, {
+      "propName": "items",
+      "methodName": "handleSetChange"
+    }]; }
+}

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

@@ -0,0 +1,13 @@
+export var ItemPickerType;
+(function (ItemPickerType) {
+  ItemPickerType["NUMBER"] = "number";
+  ItemPickerType["LETTER"] = "letter";
+  ItemPickerType["CAPITAL_LETTER"] = "capital-letter";
+  ItemPickerType["LOWER_LETTER"] = "lower-letter";
+  ItemPickerType["CUSTOM"] = "custom";
+})(ItemPickerType || (ItemPickerType = {}));
+export var ItemPickerPaddingDirection;
+(function (ItemPickerPaddingDirection) {
+  ItemPickerPaddingDirection["BEFORE"] = "before";
+  ItemPickerPaddingDirection["AFTER"] = "after";
+})(ItemPickerPaddingDirection || (ItemPickerPaddingDirection = {}));