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

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import { ItemPickerPaddingDirection, ItemPickerType } from './types';
 import { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';
 import { EventListeners } from '../../utils/event-listeners';
@@ -60,42 +60,25 @@ const DEBOUNCE_ITEM_PICKER_LISTENER = 'debounced-item-picker';
 export class SixItemPicker {
   constructor() {
     this.eventListeners = new EventListeners();
-    /** The item picker's value attribute. */
+    this.handleSixItemPickerChangeDebounced = () => {
+      this.sixChangeDebounced.emit(this.value);
+    };
     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.min = undefined;
+    this.max = undefined;
     this.roundtrip = true;
-    /** Defines how many steps should be taken when navigating */
     this.step = 1;
-    /** Defines whether the items should be padded */
+    this.items = undefined;
     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);
-    };
+    this._itemIndexes = undefined;
   }
   handleValueChange() {
     this.setup();
@@ -351,338 +334,348 @@ export class SixItemPicker {
     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"))));
+    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."
+  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": "''"
       },
-      "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"
+      "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."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type of items you want to rotate through."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "ItemPickerType.NUMBER"
       },
-      "attribute": "roundtrip",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "step": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "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
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines how many steps should be taken when navigating"
+      "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
       },
-      "attribute": "step",
-      "reflect": true,
-      "defaultValue": "1"
-    },
-    "items": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
+      "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"
       },
-      "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"
+      "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"
       },
-      "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"
-          }
+      "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"
         }
       },
-      "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."
+      "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"
       },
-      "attribute": "timeout",
-      "reflect": false,
-      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-    },
-    "interval": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "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"
       },
-      "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."
+      "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'"
       },
-      "attribute": "interval",
-      "reflect": false,
-      "defaultValue": "DEFAULT_DEBOUNCE_INSANELY_FAST"
-    },
-    "debounce": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "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"
       },
-      "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"
+      "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"
       },
-      "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"
+      "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"
       },
-      "complexType": {
-        "original": "SixItemPickerChangePayload",
-        "resolved": "number | string",
-        "references": {
-          "SixItemPickerChangePayload": {
-            "location": "local"
+      "debounce": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.\nIf you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\nis a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n(and keep pressed) and once you release"
+        },
+        "attribute": "debounce",
+        "reflect": false,
+        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_items": {},
+      "_itemIndexes": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sixChange",
+        "name": "six-item-picker-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the item picker's value changes"
+        },
+        "complexType": {
+          "original": "SixItemPickerChangePayload",
+          "resolved": "number | string",
+          "references": {
+            "SixItemPickerChangePayload": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-item-picker/six-item-picker.tsx"
+            }
           }
         }
-      }
-    }, {
-      "method": "sixChangeDebounced",
-      "name": "six-item-picker-change-debounced",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the item picker's value changes, but debounced"
-      },
-      "complexType": {
-        "original": "SixItemPickerChangePayload",
-        "resolved": "number | string",
-        "references": {
-          "SixItemPickerChangePayload": {
-            "location": "local"
+      }, {
+        "method": "sixChangeDebounced",
+        "name": "six-item-picker-change-debounced",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the item picker's value changes, but debounced"
+        },
+        "complexType": {
+          "original": "SixItemPickerChangePayload",
+          "resolved": "number | string",
+          "references": {
+            "SixItemPickerChangePayload": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-item-picker/six-item-picker.tsx"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "handleValueChange"
-    }, {
-      "propName": "debounce",
-      "methodName": "debounceChanged"
-    }, {
-      "propName": "items",
-      "methodName": "handleSetChange"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "handleValueChange"
+      }, {
+        "propName": "debounce",
+        "methodName": "debounceChanged"
+      }, {
+        "propName": "items",
+        "methodName": "handleSetChange"
+      }];
+  }
 }
+//# sourceMappingURL=six-item-picker.js.map