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

package/dist/collection/components/click-to-edit-text-field/click-to-edit-text-field.js

@@ -1,383 +1,422 @@
-import { h } from '@stencil/core';
-import classNames from 'classnames';
+import { h, } from "@stencil/core";
+import classNames from "classnames";
 export class ClickToEditTextField {
-  constructor() {
-    var _a;
-    this.handleKeyDown = (ev) => {
-      var _a, _b;
-      if (ev.detail.key === 'Enter' && !this.multiline) {
-        (_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.blurInput();
-      }
-      if (ev.detail.key === 'Escape') {
-        this.resetOnEscape();
-        (_b = this.textFieldRef) === null || _b === void 0 ? void 0 : _b.blurInput();
-      }
-    };
-    this.resetOnEscape = () => {
-      if (this.textFieldRef != null && this.defaultValue != null) {
-        this.textFieldRef.updateInput(this.defaultValue);
+    constructor() {
+        var _a;
+        /**
+         * The size of the text.
+         * Can be "standard," "sm," "md," "lg," "xl," or "2xl" and defaults to "standard".
+         */
+        this.fontSize = 'standard';
+        /**
+         * Whether this input should be displayed as a multiline input.
+         * Rows will have no minimum or maximum by default unless `min-rows`
+         * or `max-rows` are set.
+         */
+        this.multiline = false;
+        /**
+         * Value for text input.
+         */
+        this.value = '';
+        /**
+         * Whether this input is being edited.
+         */
         this.editing = false;
-      }
-    };
-    this.handleSubmit = async () => {
-      var _a;
-      const value = await ((_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.getInputValue());
-      if (value != null && value !== this.defaultValue) {
-        this.defaultValue = value;
-        this.inputSubmit.emit({ value });
-      }
-      this.editing = false;
-    };
-    this.placeholder = undefined;
-    this.fontSize = 'standard';
-    this.disabled = undefined;
-    this.multiline = false;
-    this.minRows = undefined;
-    this.maxRows = undefined;
-    this.value = '';
-    this.autoFocus = undefined;
-    this.editing = false;
-    this.hasError = undefined;
-    this.handleInputBlur = this.handleInputBlur.bind(this);
-    this.handleInputFocus = this.handleInputFocus.bind(this);
-    this.handleInputInput = this.handleInputInput.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.defaultValue = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
-  }
-  render() {
-    return (h("div", { class: "click-to-edit" }, h("div", { class: "click-to-edit-text" }, h("vertex-textfield", { ref: (element) => {
-        this.textFieldRef = element;
-      }, onInputBlur: this.handleInputBlur, onInputFocus: this.handleInputFocus, onInputInput: this.handleInputInput, onInputChange: this.handleInputChange, disabled: this.disabled, fontSize: this.fontSize, autoFocus: this.autoFocus, placeholder: this.placeholder, multiline: this.multiline, minRows: this.minRows, maxRows: this.maxRows, type: "text", value: this.value, variant: "blank", onTextFieldKeyDown: this.handleKeyDown, "data-testid": "click-to-edit-text-field", hasError: this.hasError })), this.renderIcon()));
-  }
-  renderIcon() {
-    if (this.editing) {
-      return (h("div", { class: "click-to-edit-icon-wrapper" }, h("slot", { name: "edit-icon" }, h("div", { class: "click-to-edit-button" }, h("vertex-icon-button", { iconSize: "sm", iconName: "check" })))));
-    }
-    else if (!this.disabled) {
-      return (h("div", { class: "click-to-edit-icon-wrapper" }, h("slot", { name: "pencil-icon" }, h("vertex-icon", { size: "sm", name: "pencil", class: classNames('icon-visibility', 'hover-icon') }))));
-    }
-    else {
-      return h("div", null);
-    }
-  }
-  handleInputBlur(event) {
-    event.stopPropagation();
-    this.inputBlur.emit();
-    this.handleSubmit();
-  }
-  handleInputFocus(event) {
-    var _a;
-    event.stopPropagation();
-    this.inputFocus.emit();
-    (_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.selectAll();
-    this.editing = true;
-  }
-  handleInputInput(event) {
-    event.stopPropagation();
-    this.inputInput.emit({ value: event.detail.value });
-  }
-  handleInputChange(event) {
-    event.stopPropagation();
-    this.inputChange.emit({ value: event.detail.value });
-  }
-  handleValueChanged(newValue) {
-    // If the value changed outside of edit mode, then update the default value
-    if (!this.editing) {
-      this.defaultValue = newValue === null || newValue === void 0 ? void 0 : newValue.toString();
-    }
-  }
-  static get is() { return "vertex-click-to-edit-textfield"; }
-  static get encapsulation() { return "scoped"; }
-  static get properties() {
-    return {
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Placeholder for text input."
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "fontSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "TextSize",
-          "resolved": "\"lg\" | \"md\" | \"sm\" | \"standard\" | \"xl\" | \"xxl\"",
-          "references": {
-            "TextSize": {
-              "location": "import",
-              "path": "../text-field/text-field"
+        this.handleKeyDown = (ev) => {
+            var _a, _b;
+            if (ev.detail.key === 'Enter' && !this.multiline) {
+                (_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.blurInput();
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The size of the text.\nCan be \"standard,\" \"sm,\" \"md,\" \"lg,\" \"xl,\" or \"2xl\" and defaults to \"standard\"."
-        },
-        "attribute": "font-size",
-        "reflect": false,
-        "defaultValue": "'standard'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether this input is disabled."
-        },
-        "attribute": "disabled",
-        "reflect": true
-      },
-      "multiline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether this input should be displayed as a multiline input.\nRows will have no minimum or maximum by default unless `min-rows`\nor `max-rows` are set."
-        },
-        "attribute": "multiline",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "minRows": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The minimum number of rows to display. This property has no effect\nif `multiline` is not `true`."
-        },
-        "attribute": "min-rows",
-        "reflect": false
-      },
-      "maxRows": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The minimum number of rows to display. This property has no effect\nif `multiline` is not `true`."
-        },
-        "attribute": "max-rows",
-        "reflect": false
-      },
-      "value": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "string | number | null",
-          "resolved": "null | number | string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Value for text input."
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "autoFocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Focus input when rendered"
-        },
-        "attribute": "auto-focus",
-        "reflect": false
-      },
-      "editing": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether this input is being edited."
-        },
-        "attribute": "editing",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "hasError": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether this input is in error state"
-        },
-        "attribute": "has-error",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "inputFocus",
-        "name": "inputFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when input focused"
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global"
+            if (ev.detail.key === 'Escape') {
+                this.resetOnEscape();
+                (_b = this.textFieldRef) === null || _b === void 0 ? void 0 : _b.blurInput();
             }
-          }
-        }
-      }, {
-        "method": "inputBlur",
-        "name": "inputBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when input blurred"
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global"
+        };
+        this.resetOnEscape = () => {
+            if (this.textFieldRef != null && this.defaultValue != null) {
+                this.textFieldRef.updateInput(this.defaultValue);
+                this.editing = false;
             }
-          }
-        }
-      }, {
-        "method": "inputInput",
-        "name": "inputInput",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when a keyboard input occurred."
-        },
-        "complexType": {
-          "original": "InputChangeEventDetail",
-          "resolved": "InputChangeEventDetail",
-          "references": {
-            "InputChangeEventDetail": {
-              "location": "import",
-              "path": "../text-field/text-field"
+        };
+        this.handleSubmit = async () => {
+            var _a;
+            const value = await ((_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.getInputValue());
+            if (value != null && value !== this.defaultValue) {
+                this.defaultValue = value;
+                this.inputSubmit.emit({ value });
             }
-          }
+            this.editing = false;
+        };
+        this.handleInputBlur = this.handleInputBlur.bind(this);
+        this.handleInputFocus = this.handleInputFocus.bind(this);
+        this.handleInputInput = this.handleInputInput.bind(this);
+        this.handleInputChange = this.handleInputChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.defaultValue = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
+    }
+    render() {
+        return (h("div", { key: 'd6c9d6921060ed1aadaf9f8a86b38cf55094d1f9', class: "click-to-edit" }, h("div", { key: '8c57b870ff66e5a298a36e660c46e6aab774ad45', class: "click-to-edit-text" }, h("vertex-textfield", { key: '37207acc6f39f0ecf8e7d87665638a73b357a750', ref: (element) => {
+                this.textFieldRef = element;
+            }, onInputBlur: this.handleInputBlur, onInputFocus: this.handleInputFocus, onInputInput: this.handleInputInput, onInputChange: this.handleInputChange, disabled: this.disabled, fontSize: this.fontSize, autoFocus: this.autoFocus, placeholder: this.placeholder, multiline: this.multiline, minRows: this.minRows, maxRows: this.maxRows, type: "text", value: this.value, variant: "blank", onTextFieldKeyDown: this.handleKeyDown, "data-testid": "click-to-edit-text-field", hasError: this.hasError })), this.renderIcon()));
+    }
+    renderIcon() {
+        if (this.editing) {
+            return (h("div", { class: "click-to-edit-icon-wrapper" }, h("slot", { name: "edit-icon" }, h("div", { class: "click-to-edit-button" }, h("vertex-icon-button", { iconSize: "sm", iconName: "check" })))));
         }
-      }, {
-        "method": "inputChange",
-        "name": "inputChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the value has changed."
-        },
-        "complexType": {
-          "original": "InputChangeEventDetail",
-          "resolved": "InputChangeEventDetail",
-          "references": {
-            "InputChangeEventDetail": {
-              "location": "import",
-              "path": "../text-field/text-field"
-            }
-          }
+        else if (!this.disabled) {
+            return (h("div", { class: "click-to-edit-icon-wrapper" }, h("slot", { name: "pencil-icon" }, h("vertex-icon", { size: "sm", name: "pencil", class: classNames('icon-visibility', 'hover-icon') }))));
         }
-      }, {
-        "method": "inputSubmit",
-        "name": "inputSubmit",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when input submitted"
-        },
-        "complexType": {
-          "original": "InputChangeEventDetail",
-          "resolved": "InputChangeEventDetail",
-          "references": {
-            "InputChangeEventDetail": {
-              "location": "import",
-              "path": "../text-field/text-field"
-            }
-          }
+        else {
+            return h("div", null);
         }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "handleValueChanged"
-      }];
-  }
+    }
+    handleInputBlur(event) {
+        event.stopPropagation();
+        this.inputBlur.emit();
+        this.handleSubmit();
+    }
+    handleInputFocus(event) {
+        var _a;
+        event.stopPropagation();
+        this.inputFocus.emit();
+        (_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.selectAll();
+        this.editing = true;
+    }
+    handleInputInput(event) {
+        event.stopPropagation();
+        this.inputInput.emit({ value: event.detail.value });
+    }
+    handleInputChange(event) {
+        event.stopPropagation();
+        this.inputChange.emit({ value: event.detail.value });
+    }
+    handleValueChanged(newValue) {
+        // If the value changed outside of edit mode, then update the default value
+        if (!this.editing) {
+            this.defaultValue = newValue === null || newValue === void 0 ? void 0 : newValue.toString();
+        }
+    }
+    static get is() { return "vertex-click-to-edit-textfield"; }
+    static get encapsulation() { return "scoped"; }
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder for text input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "fontSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"standard\" | \"xl\" | \"xxl\"",
+                    "references": {
+                        "TextSize": {
+                            "location": "import",
+                            "path": "../text-field/text-field",
+                            "id": "src/components/text-field/text-field.tsx::TextSize",
+                            "referenceLocation": "TextSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the text.\nCan be \"standard,\" \"sm,\" \"md,\" \"lg,\" \"xl,\" or \"2xl\" and defaults to \"standard\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "font-size",
+                "defaultValue": "'standard'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this input is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled"
+            },
+            "multiline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this input should be displayed as a multiline input.\nRows will have no minimum or maximum by default unless `min-rows`\nor `max-rows` are set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiline",
+                "defaultValue": "false"
+            },
+            "minRows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum number of rows to display. This property has no effect\nif `multiline` is not `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-rows"
+            },
+            "maxRows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum number of rows to display. This property has no effect\nif `multiline` is not `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-rows"
+            },
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | number | null",
+                    "resolved": "null | number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value for text input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "autoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Focus input when rendered"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-focus"
+            },
+            "editing": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this input is being edited."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "editing",
+                "defaultValue": "false"
+            },
+            "hasError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this input is in error state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-error"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "inputFocus",
+                "name": "inputFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when input focused"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "inputBlur",
+                "name": "inputBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when input blurred"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "inputInput",
+                "name": "inputInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a keyboard input occurred."
+                },
+                "complexType": {
+                    "original": "InputChangeEventDetail",
+                    "resolved": "InputChangeEventDetail",
+                    "references": {
+                        "InputChangeEventDetail": {
+                            "location": "import",
+                            "path": "../text-field/text-field",
+                            "id": "src/components/text-field/text-field.tsx::InputChangeEventDetail",
+                            "referenceLocation": "InputChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "inputChange",
+                "name": "inputChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value has changed."
+                },
+                "complexType": {
+                    "original": "InputChangeEventDetail",
+                    "resolved": "InputChangeEventDetail",
+                    "references": {
+                        "InputChangeEventDetail": {
+                            "location": "import",
+                            "path": "../text-field/text-field",
+                            "id": "src/components/text-field/text-field.tsx::InputChangeEventDetail",
+                            "referenceLocation": "InputChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "inputSubmit",
+                "name": "inputSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when input submitted"
+                },
+                "complexType": {
+                    "original": "InputChangeEventDetail",
+                    "resolved": "InputChangeEventDetail",
+                    "references": {
+                        "InputChangeEventDetail": {
+                            "location": "import",
+                            "path": "../text-field/text-field",
+                            "id": "src/components/text-field/text-field.tsx::InputChangeEventDetail",
+                            "referenceLocation": "InputChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChanged"
+            }];
+    }
 }