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

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

@@ -1,190 +1,229 @@
-import { h, Host, } from '@stencil/core';
-import classNames from 'classnames';
-import { isValidHexColor } from '../color-swatch/lib';
+import { h, Host, } from "@stencil/core";
+import classNames from "classnames";
+import { isValidHexColor } from "../color-swatch/lib";
 export class ColorPicker {
-  constructor() {
-    this.handleInput = (event) => {
-      const input = event.target;
-      this.value = input.value || '';
-    };
-    this.handleChange = (event) => {
-      this.valueChanged.emit(this.value);
-    };
-    this.value = undefined;
-    this.size = 'md';
-    this.variant = 'full';
-    this.expand = 'block';
-    this.disabled = false;
-  }
-  valueChange() {
-    this.valueInput.emit(this.value);
-  }
-  render() {
-    var _a;
-    return (h(Host, null, h("div", { class: classNames('wrapper', this.variant, this.size, `expand-${this.expand}`) }, h("label", { class: classNames('color-picker', { disabled: this.disabled }) }, h("input", { type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), h("div", { class: classNames('selected-wrapper', this.variant) }, h("div", { class: "selected", title: this.value }, h("vertex-color-swatch", { class: "selected-color", supplementalColor: "var(--vertex-ui-neutral-400)", color: this.value, variant: "square", size: this.size }, h("slot", { name: "overlay", slot: "overlay" }, (this.value == null || this.value === '') && (h("svg", { class: "no-value", slot: "overlay", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { d: "M16,0L0,16" })))))), this.variant === 'full' && (h("div", { class: "text-wrapper" }, h("div", { class: "hidden-text" }, "#FFFFFF"), h("div", { class: "selected-text" }, (_a = this.getDisplayedValue()) !== null && _a !== void 0 ? _a : 'Default')))), h("div", { class: "right-gutter" }, h("slot", { name: "right-gutter" }))))));
-  }
-  getDisplayedValue() {
-    var _a;
-    if (this.value != null && isValidHexColor(this.value)) {
-      return (_a = this.value) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase();
+    constructor() {
+        /**
+         * The size of the swatch displayed for this color picker. Can be `sm`, `md`,
+         * `lg`, or `xl`, and defaults to `md`. If the `variant` is `full`, this value
+         * will also increase the size of the associated hexadecimal value.
+         */
+        this.size = 'md';
+        /**
+         * The variant of this color picker. Can be `full` or `swatch`,
+         * and defaults to `full`.
+         *
+         * `full` will display both the visual color swatch and the hexadecimal
+         * representation of the color.
+         *
+         * `swatch` will display only the visual color swatch.
+         */
+        this.variant = 'full';
+        /**
+         * The expansion behavior of this <vertex-color-picker>.
+         * Can be set to "full" to cause the color picker to stretch to fill
+         * its container, or "block" to cause the color picker to be sized based
+         * on its contents.
+         * Defaults to "block".
+         */
+        this.expand = 'block';
+        /**
+         * Whether this color picker is disabled.
+         */
+        this.disabled = false;
+        this.handleInput = (event) => {
+            const input = event.target;
+            this.value = input.value || '';
+        };
+        this.handleChange = (event) => {
+            this.valueChanged.emit(this.value);
+        };
     }
-    return undefined;
-  }
-  static get is() { return "vertex-color-picker"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["color-picker.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["color-picker.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Optional value property to set the initial\nvalue of this input."
-        },
-        "attribute": "value",
-        "reflect": true
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ColorSwatchSize",
-          "resolved": "\"lg\" | \"md\" | \"sm\"",
-          "references": {
-            "ColorSwatchSize": {
-              "location": "import",
-              "path": "../color-swatch/color-swatch"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The size of the swatch displayed for this color picker. Can be `sm`, `md`,\n`lg`, or `xl`, and defaults to `md`. If the `variant` is `full`, this value\nwill also increase the size of the associated hexadecimal value."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'md'"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ColorPickerVariant",
-          "resolved": "\"full\" | \"swatch\"",
-          "references": {
-            "ColorPickerVariant": {
-              "location": "local"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The variant of this color picker. Can be `full` or `swatch`,\nand defaults to `full`.\n\n`full` will display both the visual color swatch and the hexadecimal\nrepresentation of the color.\n\n`swatch` will display only the visual color swatch."
-        },
-        "attribute": "variant",
-        "reflect": true,
-        "defaultValue": "'full'"
-      },
-      "expand": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ColorPickerExpand",
-          "resolved": "\"block\" | \"full\"",
-          "references": {
-            "ColorPickerExpand": {
-              "location": "local"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The expansion behavior of this <vertex-color-picker>.\nCan be set to \"full\" to cause the color picker to stretch to fill\nits container, or \"block\" to cause the color picker to be sized based\non its contents.\nDefaults to \"block\"."
-        },
-        "attribute": "expand",
-        "reflect": true,
-        "defaultValue": "'block'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether this color picker is disabled."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "valueInput",
-        "name": "valueInput",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when a new value is input."
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }, {
-        "method": "valueChanged",
-        "name": "valueChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the value has changed."
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+    valueChange() {
+        this.valueInput.emit(this.value);
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '88b31c336ea401f00f223cfb6665770b29f3c711' }, h("div", { key: 'ac9ce86e39ecbd741279921aa30516643ad48207', class: classNames('wrapper', this.variant, this.size, `expand-${this.expand}`) }, h("label", { key: '1332bed2d4e57d862a50d1724736f4ddca38fad9', class: classNames('color-picker', { disabled: this.disabled }) }, h("input", { key: 'df8035f1e3ca35d376ca7d6d3a6994a2a5510eca', type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), h("div", { key: 'caf37bc3d51b427f5965df4c60a6cc7b878712e7', class: classNames('selected-wrapper', this.variant) }, h("div", { key: '8f79f6a2f1c71a2857f0679099ad02443bd92d9d', class: "selected", title: this.value }, h("vertex-color-swatch", { key: '78740fb1826e06fa370889ff6c8c0ec3a3428f3d', class: "selected-color", supplementalColor: "var(--vertex-ui-neutral-400)", color: this.value, variant: "square", size: this.size }, h("slot", { key: '83134302cf540ebb134171ee8b24c7300dcb360a', name: "overlay", slot: "overlay" }, (this.value == null || this.value === '') && (h("svg", { key: '1387e7cef5ac7c9cf91c792376b2062c8d52b41e', class: "no-value", slot: "overlay", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { key: 'f620697f4296232560923e5b72fbb5625588e3e0', d: "M16,0L0,16" })))))), this.variant === 'full' && (h("div", { key: '9df94ff8660ef30d02d0a545cb44ee15ca04a9c1', class: "text-wrapper" }, h("div", { key: '5cc516c55bc4800be318a3832332e7dc2111aa63', class: "hidden-text" }, "#FFFFFF"), h("div", { key: '8fdf4e46cc4da0ae138fcb2321cf7865b38e878a', class: "selected-text" }, (_a = this.getDisplayedValue()) !== null && _a !== void 0 ? _a : 'Default')))), h("div", { key: 'a5ad876e6ecb96c912cac49caf1c33cadb871bc1', class: "right-gutter" }, h("slot", { key: 'e4402a6bb8c182ff7979897ae77538e303767ae6', name: "right-gutter" }))))));
+    }
+    getDisplayedValue() {
+        var _a;
+        if (this.value != null && isValidHexColor(this.value)) {
+            return (_a = this.value) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase();
         }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "valueChange"
-      }];
-  }
+        return undefined;
+    }
+    static get is() { return "vertex-color-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["color-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["color-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional value property to set the initial\nvalue of this input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorSwatchSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ColorSwatchSize": {
+                            "location": "import",
+                            "path": "../color-swatch/color-swatch",
+                            "id": "src/components/color-swatch/color-swatch.tsx::ColorSwatchSize",
+                            "referenceLocation": "ColorSwatchSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the swatch displayed for this color picker. Can be `sm`, `md`,\n`lg`, or `xl`, and defaults to `md`. If the `variant` is `full`, this value\nwill also increase the size of the associated hexadecimal value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorPickerVariant",
+                    "resolved": "\"full\" | \"swatch\"",
+                    "references": {
+                        "ColorPickerVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/vertex-web-ui/vertex-web-ui/packages/ui/src/components/color-picker/color-picker.tsx",
+                            "id": "src/components/color-picker/color-picker.tsx::ColorPickerVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of this color picker. Can be `full` or `swatch`,\nand defaults to `full`.\n\n`full` will display both the visual color swatch and the hexadecimal\nrepresentation of the color.\n\n`swatch` will display only the visual color swatch."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'full'"
+            },
+            "expand": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorPickerExpand",
+                    "resolved": "\"block\" | \"full\"",
+                    "references": {
+                        "ColorPickerExpand": {
+                            "location": "local",
+                            "path": "/home/runner/work/vertex-web-ui/vertex-web-ui/packages/ui/src/components/color-picker/color-picker.tsx",
+                            "id": "src/components/color-picker/color-picker.tsx::ColorPickerExpand"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The expansion behavior of this <vertex-color-picker>.\nCan be set to \"full\" to cause the color picker to stretch to fill\nits container, or \"block\" to cause the color picker to be sized based\non its contents.\nDefaults to \"block\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expand",
+                "defaultValue": "'block'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this color picker is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueInput",
+                "name": "valueInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a new value is input."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value has changed."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChange"
+            }];
+    }
 }