@vertexvis/ui 0.1.5-testing.0 → 1.0.0-testing.1

package/dist/collection/components/select/select.js

@@ -1,318 +1,347 @@
-import { h, readTask, } from '@stencil/core';
-import classNames from 'classnames';
+import { h, readTask, } from "@stencil/core";
+import classNames from "classnames";
 const GET_BOUNDS_DEBOUNCE_THRESHOLD = 200;
 export class Select {
-  constructor() {
-    this.removeListeners = [];
-    this.controlled = false;
-    this.value = undefined;
-    this.placeholder = 'Select an option...';
-    this.disabled = false;
-    this.animated = true;
-    this.hideSelected = true;
-    this.open = false;
-    this.position = undefined;
-    this.displayValue = undefined;
-    this.resizeObserverFactory = (cb) => new ResizeObserver(cb);
-    this.handleOpen = this.handleOpen.bind(this);
-    this.handleDismiss = this.handleDismiss.bind(this);
-    this.getBounds = this.getBounds.bind(this);
-  }
-  componentDidLoad() {
-    var _a;
-    this.resizeObserver = this.resizeObserverFactory(() => this.getBounds());
-    if (this.rootRef != null) {
-      this.resizeObserver.observe(this.rootRef);
+    constructor() {
+        /**
+         * A placeholder to use when no option has been
+         * selected. Defaults to "Select an option...".
+         */
+        this.placeholder = 'Select an option...';
+        /**
+         * Whether this select is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether this select is animated when opening
+         * or closing.
+         */
+        this.animated = true;
+        /**
+         * Whether this select will omit the currently selected
+         * value in the dropdown list.
+         */
+        this.hideSelected = true;
+        this.open = false;
+        this.removeListeners = [];
+        this.controlled = false;
+        /**
+         * @internal
+         */
+        this.resizeObserverFactory = (cb) => new ResizeObserver(cb);
+        this.handleOpen = this.handleOpen.bind(this);
+        this.handleDismiss = this.handleDismiss.bind(this);
+        this.getBounds = this.getBounds.bind(this);
     }
-    this.slotElement =
-      ((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) || undefined;
-    if (this.value != null) {
-      this.handleUpdateValue(this.value);
+    componentDidLoad() {
+        var _a;
+        this.resizeObserver = this.resizeObserverFactory(() => this.getBounds());
+        if (this.rootRef != null) {
+            this.resizeObserver.observe(this.rootRef);
+        }
+        this.slotElement =
+            ((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) || undefined;
+        if (this.value != null) {
+            this.handleUpdateValue(this.value);
+        }
+        else {
+            this.handleUpdateDisplayValue();
+        }
     }
-    else {
-      this.handleUpdateDisplayValue();
+    connectedCallback() {
+        window.addEventListener('resize', this.getBounds);
     }
-  }
-  connectedCallback() {
-    window.addEventListener('resize', this.getBounds);
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    window.removeEventListener('resize', this.getBounds);
-    this.removeOptionListeners();
-  }
-  handleUpdateValue(value) {
-    if (value != null &&
-      (value !== this.internalValue || this.displayValue == null)) {
-      this.internalValue = value;
-      this.updateDisplayValue(value);
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        window.removeEventListener('resize', this.getBounds);
+        this.removeOptionListeners();
     }
-    this.controlled = value != null;
-  }
-  handleUpdateDisplayValue() {
-    var _a;
-    this.clearSelectedOptionFlag();
-    if (this.hideSelected) {
-      (_a = this.getSelectedOption()) === null || _a === void 0 ? void 0 : _a.setAttribute('data-selected', 'true');
+    handleUpdateValue(value) {
+        if (value != null &&
+            (value !== this.internalValue || this.displayValue == null)) {
+            this.internalValue = value;
+            this.updateDisplayValue(value);
+        }
+        this.controlled = value != null;
     }
-  }
-  render() {
-    var _a;
-    return (h("div", { class: classNames('root', {
-        disabled: this.disabled,
-      }), ref: (element) => {
-        this.rootRef = element;
-      }, onClick: !this.open && !this.disabled ? this.handleOpen : undefined }, h("div", { class: classNames('target', {
-        hidden: this.open,
-        disabled: this.disabled,
-      }) }, h("div", { class: "text" }, (_a = this.displayValue) !== null && _a !== void 0 ? _a : this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("vertex-popover", { position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, h("div", { class: classNames('options', {
-        hidden: !this.open,
-        visible: this.open,
-        animated: this.animated,
-      }), style: {
-        minWidth: this.width != null ? `${this.width}px` : 'var(--select-width)',
-      } }, h("div", { class: classNames('selected-option', {
-        disabled: this.disabled,
-      }), onClick: this.handleDismiss }, h("div", { class: "text" }, this.displayValue || this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("slot", null)))));
-  }
-  handleOpen() {
-    var _a, _b;
-    (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).forEach((e) => {
-      const listener = () => {
+    handleUpdateDisplayValue() {
         var _a;
-        const updatedValue = e.getAttribute('data-value') || e.innerHTML;
-        const valueChanged = updatedValue !== this.internalValue;
-        this.handleDismiss();
-        if (!this.controlled) {
-          this.displayValue = e.innerHTML;
-          this.internalValue = updatedValue;
-        }
-        if (valueChanged) {
-          (_a = this.optionChanged) === null || _a === void 0 ? void 0 : _a.emit(updatedValue);
+        this.clearSelectedOptionFlag();
+        if (this.hideSelected) {
+            (_a = this.getSelectedOption()) === null || _a === void 0 ? void 0 : _a.setAttribute('data-selected', 'true');
         }
-      };
-      e.addEventListener('click', listener);
-      this.removeListeners = [
-        ...this.removeListeners,
-        () => e.removeEventListener('click', listener),
-      ];
-    });
-    this.open = true;
-  }
-  handleDismiss() {
-    this.removeOptionListeners();
-    this.open = false;
-  }
-  updateDisplayValue(value) {
-    var _a, _b;
-    const option = (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).find((e) => e.getAttribute('data-value') === value || e.innerHTML === value);
-    this.displayValue = option === null || option === void 0 ? void 0 : option.innerHTML;
-  }
-  removeOptionListeners() {
-    this.removeListeners.forEach((l) => l());
-    this.removeListeners = [];
-  }
-  clearSelectedOptionFlag() {
-    var _a, _b;
-    (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).forEach((e) => e.removeAttribute('data-selected'));
-  }
-  getSelectedOption() {
-    var _a, _b, _c;
-    const value = (_a = this.displayValue) !== null && _a !== void 0 ? _a : this.placeholder;
-    return (_c = (_b = this.slotElement) === null || _b === void 0 ? void 0 : _b.assignedElements) === null || _c === void 0 ? void 0 : _c.call(_b).find((e) => e.getAttribute('data-value') === value || e.innerHTML === value);
-  }
-  getBounds() {
-    if (this.getBoundsTimeout != null) {
-      clearTimeout(this.getBoundsTimeout);
-      this.getBoundsTimeout = undefined;
     }
-    this.getBoundsTimeout = setTimeout(() => {
-      this.getBoundsTimeout = undefined;
-      readTask(() => {
+    render() {
         var _a;
-        const bounds = (_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (bounds != null) {
-          const position = {
-            x: bounds.x,
-            y: bounds.y,
-          };
-          this.position = position;
-          this.width = bounds.width;
+        return (h("div", { key: 'e7d997d0bca63def6307e4ecf9af68a4982b705c', class: classNames('root', {
+                disabled: this.disabled,
+            }), ref: (element) => {
+                this.rootRef = element;
+            }, onClick: !this.open && !this.disabled ? this.handleOpen : undefined }, h("div", { key: '32a326a6d566e44105844bc737bf6ff6edcaa7ac', class: classNames('target', {
+                hidden: this.open,
+                disabled: this.disabled,
+            }) }, h("div", { key: '0a820cad9319ef045399db7ba0f605ba570b4bb3', class: "text" }, (_a = this.displayValue) !== null && _a !== void 0 ? _a : this.placeholder), h("div", { key: 'f3048ab23ba5071644989eb987aadd0b78185dfa', class: "icon" }, h("vertex-icon", { key: '25fe817ad7541aca936d89fdf8d725ccca3c0dfc', name: "chevron-down", size: "sm" }))), h("vertex-popover", { key: 'ee766bc71cc7dbda2b31db7d768f77d32aee47bd', position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, h("div", { key: 'cca515839ee2e1b237148ccfbe061e8034e9718c', class: classNames('options', {
+                hidden: !this.open,
+                visible: this.open,
+                animated: this.animated,
+            }), style: {
+                minWidth: this.width != null ? `${this.width}px` : 'var(--select-width)',
+            } }, h("div", { key: '2f31c5f29bcccb6cd91c4ecab251d0ca164a425f', class: classNames('selected-option', {
+                disabled: this.disabled,
+            }), onClick: this.handleDismiss }, h("div", { key: 'e4ed9ef2c767e135b1ee13571c42dc813c6e7518', class: "text" }, this.displayValue || this.placeholder), h("div", { key: '5c29be97e3a69d8db6baa785b925bb0c3acc8010', class: "icon" }, h("vertex-icon", { key: 'fb0c8fb0e4d4ce7380cd333c2618ec280081273b', name: "chevron-down", size: "sm" }))), h("slot", { key: '0c6d345e32ffbe7797f3ad9a3bbdfc8202a91bff' })))));
+    }
+    handleOpen() {
+        var _a, _b;
+        (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).forEach((e) => {
+            const listener = () => {
+                var _a;
+                const updatedValue = e.getAttribute('data-value') || e.innerHTML;
+                const valueChanged = updatedValue !== this.internalValue;
+                this.handleDismiss();
+                if (!this.controlled) {
+                    this.displayValue = e.innerHTML;
+                    this.internalValue = updatedValue;
+                }
+                if (valueChanged) {
+                    (_a = this.optionChanged) === null || _a === void 0 ? void 0 : _a.emit(updatedValue);
+                }
+            };
+            e.addEventListener('click', listener);
+            this.removeListeners = [
+                ...this.removeListeners,
+                () => e.removeEventListener('click', listener),
+            ];
+        });
+        this.open = true;
+    }
+    handleDismiss() {
+        this.removeOptionListeners();
+        this.open = false;
+    }
+    updateDisplayValue(value) {
+        var _a, _b;
+        const option = (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).find((e) => e.getAttribute('data-value') === value || e.innerHTML === value);
+        this.displayValue = option === null || option === void 0 ? void 0 : option.innerHTML;
+    }
+    removeOptionListeners() {
+        this.removeListeners.forEach((l) => l());
+        this.removeListeners = [];
+    }
+    clearSelectedOptionFlag() {
+        var _a, _b;
+        (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).forEach((e) => e.removeAttribute('data-selected'));
+    }
+    getSelectedOption() {
+        var _a, _b, _c;
+        const value = (_a = this.displayValue) !== null && _a !== void 0 ? _a : this.placeholder;
+        return (_c = (_b = this.slotElement) === null || _b === void 0 ? void 0 : _b.assignedElements) === null || _c === void 0 ? void 0 : _c.call(_b).find((e) => e.getAttribute('data-value') === value || e.innerHTML === value);
+    }
+    getBounds() {
+        if (this.getBoundsTimeout != null) {
+            clearTimeout(this.getBoundsTimeout);
+            this.getBoundsTimeout = undefined;
         }
-      });
-    }, GET_BOUNDS_DEBOUNCE_THRESHOLD);
-  }
-  static get is() { return "vertex-select"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["select.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["select.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Optional value property to control this select\nexternally.\n\nIf set, this select control will no longer update\nthe current value, and will rely on the consuming\napp to update the value based on the\n`optionChanged` events."
-        },
-        "attribute": "value",
-        "reflect": true
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A placeholder to use when no option has been\nselected. Defaults to \"Select an option...\"."
-        },
-        "attribute": "placeholder",
-        "reflect": true,
-        "defaultValue": "'Select an option...'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether this select is disabled."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "animated": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether this select is animated when opening\nor closing."
-        },
-        "attribute": "animated",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "hideSelected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether this select will omit the currently selected\nvalue in the dropdown list."
-        },
-        "attribute": "hide-selected",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "resizeObserverFactory": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(\n    cb: (entries: ResizeObserverEntry[]) => void\n  ) => ResizeObserver",
-          "resolved": "(cb: (entries: ResizeObserverEntry[]) => void) => ResizeObserver",
-          "references": {
-            "ResizeObserverEntry": {
-              "location": "global"
+        this.getBoundsTimeout = setTimeout(() => {
+            this.getBoundsTimeout = undefined;
+            readTask(() => {
+                var _a;
+                const bounds = (_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                if (bounds != null) {
+                    const position = {
+                        x: bounds.x,
+                        y: bounds.y,
+                    };
+                    this.position = position;
+                    this.width = bounds.width;
+                }
+            });
+        }, GET_BOUNDS_DEBOUNCE_THRESHOLD);
+    }
+    static get is() { return "vertex-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional value property to control this select\nexternally.\n\nIf set, this select control will no longer update\nthe current value, and will rely on the consuming\napp to update the value based on the\n`optionChanged` events."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A placeholder to use when no option has been\nselected. Defaults to \"Select an option...\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placeholder",
+                "defaultValue": "'Select an option...'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this select is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this select is animated when opening\nor closing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "true"
             },
-            "ResizeObserver": {
-              "location": "global"
+            "hideSelected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this select will omit the currently selected\nvalue in the dropdown list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-selected",
+                "defaultValue": "true"
+            },
+            "resizeObserverFactory": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(\n    cb: (entries: ResizeObserverEntry[]) => void\n  ) => ResizeObserver",
+                    "resolved": "(cb: (entries: ResizeObserverEntry[]) => void) => ResizeObserver",
+                    "references": {
+                        "ResizeObserverEntry": {
+                            "location": "global",
+                            "id": "global::ResizeObserverEntry"
+                        },
+                        "ResizeObserver": {
+                            "location": "global",
+                            "id": "global::ResizeObserver"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "(cb) => new ResizeObserver(cb)"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": ""
-        },
-        "defaultValue": "(cb) => new ResizeObserver(cb)"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "open": {},
-      "position": {},
-      "displayValue": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "optionChanged",
-        "name": "optionChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the selected option of this element\nchanges, and contains the value that it has been\nchanged to."
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "handleUpdateValue"
-      }, {
-        "propName": "displayValue",
-        "methodName": "handleUpdateDisplayValue"
-      }, {
-        "propName": "hideSelected",
-        "methodName": "handleUpdateDisplayValue"
-      }, {
-        "propName": "placeholder",
-        "methodName": "handleUpdateDisplayValue"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "position": {},
+            "displayValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "optionChanged",
+                "name": "optionChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected option of this element\nchanges, and contains the value that it has been\nchanged to."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleUpdateValue"
+            }, {
+                "propName": "displayValue",
+                "methodName": "handleUpdateDisplayValue"
+            }, {
+                "propName": "hideSelected",
+                "methodName": "handleUpdateDisplayValue"
+            }, {
+                "propName": "placeholder",
+                "methodName": "handleUpdateDisplayValue"
+            }];
+    }
 }