@limetech/lime-elements 36.0.0 → 36.1.0-dev.2

package/dist/collection/components/picker/picker.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Prop, State, Watch, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import AwesomeDebouncePromise from 'awesome-debounce-promise';
 import { isDescendant } from '../../util/dom';
 import { ARROW_DOWN, ARROW_DOWN_KEY_CODE, ARROW_UP, ARROW_UP_KEY_CODE, ENTER, ENTER_KEY_CODE, ESCAPE, ESCAPE_KEY_CODE, TAB, TAB_KEY_CODE, } from '../../util/keycodes';
@@ -16,54 +16,29 @@ const CHIP_SET_TAG_NAME = 'limel-chip-set';
  */
 export class Picker {
   constructor() {
-    /**
-     * True if the picker should be disabled
-     */
+    // Should NOT be decorated with State(), since this
+    // should not trigger a re-render by itself.
+    this.chipSetEditMode = false;
     this.disabled = false;
-    /**
-     * Set to `true` to disable adding and removing items,
-     * but allow interaction with existing items.
-     */
     this.readonly = false;
-    /**
-     * True if the control requires a value
-     */
+    this.label = undefined;
+    this.searchLabel = undefined;
+    this.helperText = undefined;
+    this.leadingIcon = undefined;
+    this.emptyResultMessage = undefined;
     this.required = false;
-    /**
-     * True if multiple values are allowed
-     */
+    this.value = undefined;
+    this.searcher = undefined;
     this.multiple = false;
-    /**
-     * Sets delimiters between chips. Works only when `multiple` is `true`.
-     */
     this.delimiter = null;
-    /**
-     * Static actions that can be clicked by the user.
-     */
     this.actions = [];
-    /**
-     * Position of the custom static actions in the picker's results dropdown.
-     * Can be set to `'top'` or `'bottom'`.
-     */
     this.actionPosition = 'bottom';
-    /**
-     * Scroll behavior of the custom static actions, when user scrolls
-     * in the picker's results dropdown. Can be set to `'scroll'` which means
-     * the action items will scroll together with the list, or `'sticky'` which
-     * retains their position at the top or bottom of the drop down while
-     * scrolling.
-     */
     this.actionScrollBehavior = 'sticky';
-    /**
-     * Whether badge icons should be used in the result list or not
-     */
     this.badgeIcons = true;
+    this.items = undefined;
     this.textValue = '';
     this.loading = false;
     this.chips = [];
-    // Should NOT be decorated with State(), since this
-    // should not trigger a re-render by itself.
-    this.chipSetEditMode = false;
     this.handleTextInput = this.handleTextInput.bind(this);
     this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
     this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);
@@ -217,8 +192,7 @@ export class Picker {
         'align-items': 'center',
         'justify-content': 'center',
         padding: '1rem 0',
-      } },
-      h("limel-spinner", { limeBranded: false })));
+      } }, h("limel-spinner", { limeBranded: false })));
   }
   renderEmptyMessage() {
     if (!this.emptyResultMessage) {
@@ -250,12 +224,11 @@ export class Picker {
   }
   renderPortal(content = []) {
     const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-    return (h("limel-portal", { visible: content.length > 0, containerId: this.portalId, inheritParentWidth: true, containerStyle: { 'z-index': dropdownZIndex } },
-      h("limel-menu-surface", { open: content.length > 0, allowClicksElement: this.host, style: {
-          '--mdc-menu-min-width': '100%',
-          'max-height': 'inherit',
-          display: 'flex',
-        }, onDismiss: this.handleCloseMenu }, content)));
+    return (h("limel-portal", { visible: content.length > 0, containerId: this.portalId, inheritParentWidth: true, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { open: content.length > 0, allowClicksElement: this.host, style: {
+        '--mdc-menu-min-width': '100%',
+        'max-height': 'inherit',
+        display: 'flex',
+      }, onDismiss: this.handleCloseMenu }, content)));
   }
   /**
    * Check if a descendant still has focus. If not, reset text value and search result.
@@ -292,7 +265,7 @@ export class Picker {
   /**
    * Change handler for the list
    *
-   * @param {CustomEvent} event event
+   * @param {LimelListCustomEvent<ListItem>} event event
    * @returns {void}
    */
   handleListChange(event) {
@@ -313,7 +286,7 @@ export class Picker {
   /**
    * Change handler for the list
    *
-   * @param {CustomEvent} event event
+   * @param {LimelChipSetCustomEvent} event event
    * @returns {void}
    */
   handleActionListChange(event) {
@@ -421,400 +394,412 @@ export class Picker {
   }
   static get is() { return "limel-picker"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["picker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["picker.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "True if the picker should be disabled"
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to disable adding and removing items,\nbut allow interaction with existing items."
-      },
-      "attribute": "readonly",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Text to display for the input field of the picker"
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "searchLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Search label to display in the input field when searching"
-      },
-      "attribute": "search-label",
-      "reflect": false
-    },
-    "helperText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Optional helper text to display below the input field when it has focus"
-      },
-      "attribute": "helper-text",
-      "reflect": true
-    },
-    "leadingIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Leading icon to show to the far left in the text field"
-      },
-      "attribute": "leading-icon",
-      "reflect": false
-    },
-    "emptyResultMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A message to display when the search returned an empty result"
-      },
-      "attribute": "empty-result-message",
-      "reflect": false
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "True if the control requires a value"
-      },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ListItem<number | string> | Array<ListItem<number | string>>",
-        "resolved": "ListItem<string | number> | ListItem<string | number>[]",
-        "references": {
-          "ListItem": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
-          },
-          "Array": {
-            "location": "global"
+  static get originalStyleUrls() {
+    return {
+      "$": ["picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["picker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if the picker should be disabled"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to disable adding and removing items,\nbut allow interaction with existing items."
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text to display for the input field of the picker"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "searchLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Search label to display in the input field when searching"
+        },
+        "attribute": "search-label",
+        "reflect": false
+      },
+      "helperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional helper text to display below the input field when it has focus"
+        },
+        "attribute": "helper-text",
+        "reflect": true
+      },
+      "leadingIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Leading icon to show to the far left in the text field"
+        },
+        "attribute": "leading-icon",
+        "reflect": false
+      },
+      "emptyResultMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A message to display when the search returned an empty result"
+        },
+        "attribute": "empty-result-message",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if the control requires a value"
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "value": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ListItem<number | string> | Array<ListItem<number | string>>",
+          "resolved": "ListItem<string | number> | ListItem<string | number>[]",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            },
+            "Array": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Currently selected value or values"
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Currently selected value or values"
-      }
-    },
-    "searcher": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Searcher",
-        "resolved": "(query: string) => Promise<ListItem<any>[]>",
-        "references": {
-          "Searcher": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      "searcher": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Searcher",
+          "resolved": "(query: string) => Promise<ListItem<any>[]>",
+          "references": {
+            "Searcher": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A search function that takes a search-string as an argument,\nand returns a promise that will eventually be resolved with\nan array of `ListItem`:s."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A search function that takes a search-string as an argument,\nand returns a promise that will eventually be resolved with\nan array of `ListItem`:s."
-      }
-    },
-    "multiple": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "True if multiple values are allowed"
-      },
-      "attribute": "multiple",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "delimiter": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets delimiters between chips. Works only when `multiple` is `true`."
-      },
-      "attribute": "delimiter",
-      "reflect": true,
-      "defaultValue": "null"
-    },
-    "actions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Array<ListItem<Action>>",
-        "resolved": "ListItem<Action>[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          },
-          "ListItem": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
-          },
-          "Action": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if multiple values are allowed"
+        },
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "delimiter": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets delimiters between chips. Works only when `multiple` is `true`."
+        },
+        "attribute": "delimiter",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "actions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<ListItem<Action>>",
+          "resolved": "ListItem<Action>[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "ListItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            },
+            "Action": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Static actions that can be clicked by the user."
-      },
-      "defaultValue": "[]"
-    },
-    "actionPosition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ActionPosition",
-        "resolved": "\"bottom\" | \"top\"",
-        "references": {
-          "ActionPosition": {
-            "location": "import",
-            "path": "./actions.types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Static actions that can be clicked by the user."
+        },
+        "defaultValue": "[]"
+      },
+      "actionPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ActionPosition",
+          "resolved": "\"bottom\" | \"top\"",
+          "references": {
+            "ActionPosition": {
+              "location": "import",
+              "path": "./actions.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Position of the custom static actions in the picker's results dropdown.\nCan be set to `'top'` or `'bottom'`."
-      },
-      "attribute": "action-position",
-      "reflect": false,
-      "defaultValue": "'bottom'"
-    },
-    "actionScrollBehavior": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ActionScrollBehavior",
-        "resolved": "\"scroll\" | \"sticky\"",
-        "references": {
-          "ActionScrollBehavior": {
-            "location": "import",
-            "path": "./actions.types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position of the custom static actions in the picker's results dropdown.\nCan be set to `'top'` or `'bottom'`."
+        },
+        "attribute": "action-position",
+        "reflect": false,
+        "defaultValue": "'bottom'"
+      },
+      "actionScrollBehavior": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ActionScrollBehavior",
+          "resolved": "\"scroll\" | \"sticky\"",
+          "references": {
+            "ActionScrollBehavior": {
+              "location": "import",
+              "path": "./actions.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Scroll behavior of the custom static actions, when user scrolls\nin the picker's results dropdown. Can be set to `'scroll'` which means\nthe action items will scroll together with the list, or `'sticky'` which\nretains their position at the top or bottom of the drop down while\nscrolling."
-      },
-      "attribute": "action-scroll-behavior",
-      "reflect": false,
-      "defaultValue": "'sticky'"
-    },
-    "badgeIcons": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether badge icons should be used in the result list or not"
-      },
-      "attribute": "badge-icons",
-      "reflect": true,
-      "defaultValue": "true"
-    }
-  }; }
-  static get states() { return {
-    "items": {},
-    "textValue": {},
-    "loading": {},
-    "chips": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fired when a new value has been selected from the picker"
-      },
-      "complexType": {
-        "original": "ListItem<number | string> | Array<ListItem<number | string>>",
-        "resolved": "ListItem<string | number> | ListItem<string | number>[]",
-        "references": {
-          "ListItem": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
-          },
-          "Array": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Scroll behavior of the custom static actions, when user scrolls\nin the picker's results dropdown. Can be set to `'scroll'` which means\nthe action items will scroll together with the list, or `'sticky'` which\nretains their position at the top or bottom of the drop down while\nscrolling."
+        },
+        "attribute": "action-scroll-behavior",
+        "reflect": false,
+        "defaultValue": "'sticky'"
+      },
+      "badgeIcons": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether badge icons should be used in the result list or not"
+        },
+        "attribute": "badge-icons",
+        "reflect": true,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "items": {},
+      "textValue": {},
+      "loading": {},
+      "chips": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a new value has been selected from the picker"
+        },
+        "complexType": {
+          "original": "ListItem<number | string> | Array<ListItem<number | string>>",
+          "resolved": "ListItem<string | number> | ListItem<string | number>[]",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            },
+            "Array": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "interact",
-      "name": "interact",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fired when clicking on a selected value"
-      },
-      "complexType": {
-        "original": "ListItem<number | string>",
-        "resolved": "ListItem<string | number>",
-        "references": {
-          "ListItem": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      }, {
+        "method": "interact",
+        "name": "interact",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when clicking on a selected value"
+        },
+        "complexType": {
+          "original": "ListItem<number | string>",
+          "resolved": "ListItem<string | number>",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
         }
-      }
-    }, {
-      "method": "action",
-      "name": "action",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the user selects an action."
-      },
-      "complexType": {
-        "original": "Action",
-        "resolved": "Action",
-        "references": {
-          "Action": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      }, {
+        "method": "action",
+        "name": "action",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the user selects an action."
+        },
+        "complexType": {
+          "original": "Action",
+          "resolved": "Action",
+          "references": {
+            "Action": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "onChangeValue"
-    }, {
-      "propName": "searcher",
-      "methodName": "createDebouncedSearcher"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "onChangeValue"
+      }, {
+        "propName": "searcher",
+        "methodName": "createDebouncedSearcher"
+      }];
+  }
 }