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

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

@@ -1,316 +1,402 @@
-import { h, Host, } from '@stencil/core';
-import classNames from 'classnames';
+import { h, Host, } from "@stencil/core";
+import classNames from "classnames";
 export class ColorCirclePicker {
-  constructor() {
-    this.handleClick = (event) => {
-      const circle = event.target;
-      this.selectionChanged.emit({
-        color: circle.color,
-        lightened: circle.lightened,
-        darkened: circle.darkened,
-      });
-    };
-    this.parseJsonProp = (prop) => {
-      if (typeof prop === 'string') {
-        return JSON.parse(prop);
-      }
-      return prop;
-    };
-    this.colors = [
-      '#4c87be',
-      '#f3d336',
-      '#6fbb29',
-      '#e38826',
-      '#c72e16',
-      '#8c3681',
-      '#000000',
-      '#ffffff',
-    ];
-    this.labels = {};
-    this.labelPlacement = 'bottom';
-    this.size = 'lg';
-    this.supplementalColors = [];
-    this.theme = 'dark';
-    this.lightenPercentage = 0.25;
-    this.darkenPercentage = 0.25;
-    this.selected = undefined;
-    this.direction = 'horizontal';
-    this.colorArray = [];
-    this.supplementaryColorArray = [];
-    this.labelMap = {};
-  }
-  componentWillLoad() {
-    this.handleColorsChange(this.colors);
-    this.handleSupplementalColorsChange(this.supplementalColors);
-    this.handleLabelsChange(this.labels);
-  }
-  handleColorsChange(newValue) {
-    this.colorArray = this.parseJsonProp(newValue);
-  }
-  handleSupplementalColorsChange(newValue) {
-    this.supplementaryColorArray = this.parseJsonProp(newValue);
-  }
-  handleLabelsChange(newValue) {
-    this.labelMap = this.parseJsonProp(newValue);
-  }
-  render() {
-    return (h(Host, null, h("div", { class: classNames('container', {
-        vertical: this.direction === 'vertical',
-      }) }, this.colorArray.map((c, i) => {
-      const label = this.labelMap[c];
-      const swatch = (h("vertex-color-swatch", { class: classNames('circle', {
-          selected: this.selected === c,
-        }), variant: "circle", size: this.size, color: c, supplementalColor: this.supplementaryColorArray[i], onClick: this.handleClick, lightenPercentage: this.lightenPercentage, darkenPercentage: this.darkenPercentage, theme: this.theme }));
-      return label != null ? (h("vertex-tooltip", { placement: this.labelPlacement, content: label }, swatch)) : (swatch);
-    }))));
-  }
-  static get is() { return "vertex-color-circle-picker"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["color-circle-picker.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["color-circle-picker.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "colors": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string[] | string",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The colors to show in this `vertex-color-circle-picker`.\nThese values will map to the `color` property of the underlying\n`vertex-color-swatch`."
-        },
-        "attribute": "colors",
-        "reflect": false,
-        "defaultValue": "[\n    '#4c87be',\n    '#f3d336',\n    '#6fbb29',\n    '#e38826',\n    '#c72e16',\n    '#8c3681',\n    '#000000',\n    '#ffffff',\n  ]"
-      },
-      "labels": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Record<string, string> | string",
-          "resolved": "string | { [x: string]: string; }",
-          "references": {
-            "Record": {
-              "location": "global"
+    constructor() {
+        /**
+         * The colors to show in this `vertex-color-circle-picker`.
+         * These values will map to the `color` property of the underlying
+         * `vertex-color-swatch`.
+         */
+        this.colors = [
+            '#4c87be',
+            '#f3d336',
+            '#6fbb29',
+            '#e38826',
+            '#c72e16',
+            '#8c3681',
+            '#000000',
+            '#ffffff',
+        ];
+        /**
+         * Optional labels that will be displayed as a tooltip on
+         * the underlying `vertex-color-swatch` elements for associated
+         * colors in the `colors` array.
+         */
+        this.labels = {};
+        /**
+         * The placement of the tooltip around the swatch elements.
+         * This can be any of the following values:
+         *
+         * 'top', 'top-start', 'top-end',
+         * 'bottom', 'bottom-start', 'bottom-end',
+         * 'right', 'right-start', 'right-end',
+         * 'left', 'left-start', 'left-end',
+         * 'auto', 'auto-start', or 'auto-end', and
+         * defaults to 'bottom'.
+         *
+         * Note: placement will adjust based on the amount
+         * of available space, so tooltips close to screen
+         * edges may appear in a different location.
+         */
+        this.labelPlacement = 'bottom';
+        /**
+         * The size of this color picker. Can be `sm`, `md`, or `lg`,
+         * and defaults to `lg`.
+         */
+        this.size = 'lg';
+        /**
+         * Optional supplemental colors that will be provided to the
+         * underlying `vertex-color-swatch` elements for associated
+         * indices in the `colors` array.
+         */
+        this.supplementalColors = [];
+        /**
+         * The theme to use for this `vertex-color-circle-picker`.
+         * Can be either `light` or `dark`, and defaults to `dark`.
+         *
+         * With the `dark` theme, the provided `colors` will be used
+         * as the background-colors for `vertex-color-swatch` elements,
+         * and a `darkened` color will be used for the border-colors.
+         *
+         * With the `light` theme, the provided `colors` will be used
+         * as the background-colors for `vertex-color-swatch` elements,
+         * and a `lightened` color will be used for the border-colors.
+         */
+        this.theme = 'dark';
+        /**
+         * The percentage lighter color to use to compute the `lightened`
+         * color for the underlying `vertex-color-swatch`. This will be
+         * used when the `theme` is set to `light`.
+         */
+        this.lightenPercentage = 0.25;
+        /**
+         * The percentage darker color to use to compute the `darkened`
+         * color for the underlying `vertex-color-swatch`. This will be
+         * used when the `theme` is set to `dark`.
+         */
+        this.darkenPercentage = 0.25;
+        /**
+         * The orientation of this color picker. Can be either `vertical`
+         * or `horizontal`, and defaults to `horizontal`.
+         */
+        this.direction = 'horizontal';
+        this.colorArray = [];
+        this.supplementaryColorArray = [];
+        this.labelMap = {};
+        this.handleClick = (event) => {
+            const circle = event.target;
+            this.selectionChanged.emit({
+                color: circle.color,
+                lightened: circle.lightened,
+                darkened: circle.darkened,
+            });
+        };
+        this.parseJsonProp = (prop) => {
+            if (typeof prop === 'string') {
+                return JSON.parse(prop);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Optional labels that will be displayed as a tooltip on\nthe underlying `vertex-color-swatch` elements for associated\ncolors in the `colors` array."
-        },
-        "attribute": "labels",
-        "reflect": false,
-        "defaultValue": "{}"
-      },
-      "labelPlacement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "PopoverPlacement",
-          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "PopoverPlacement": {
-              "location": "import",
-              "path": "../popover/popover"
+            return prop;
+        };
+    }
+    componentWillLoad() {
+        this.handleColorsChange(this.colors);
+        this.handleSupplementalColorsChange(this.supplementalColors);
+        this.handleLabelsChange(this.labels);
+    }
+    handleColorsChange(newValue) {
+        this.colorArray = this.parseJsonProp(newValue);
+    }
+    handleSupplementalColorsChange(newValue) {
+        this.supplementaryColorArray = this.parseJsonProp(newValue);
+    }
+    handleLabelsChange(newValue) {
+        this.labelMap = this.parseJsonProp(newValue);
+    }
+    render() {
+        return (h(Host, { key: 'b59004b3fd9e0bf28a80bb0481ea2807ea137cad' }, h("div", { key: '7b6498a4aefb2ae0fda2154854d860ef4d711df8', class: classNames('container', {
+                vertical: this.direction === 'vertical',
+            }) }, this.colorArray.map((c, i) => {
+            const label = this.labelMap[c];
+            const swatch = (h("vertex-color-swatch", { class: classNames('circle', {
+                    selected: this.selected === c,
+                }), variant: "circle", size: this.size, color: c, supplementalColor: this.supplementaryColorArray[i], onClick: this.handleClick, lightenPercentage: this.lightenPercentage, darkenPercentage: this.darkenPercentage, theme: this.theme }));
+            return label != null ? (h("vertex-tooltip", { placement: this.labelPlacement, content: label }, swatch)) : (swatch);
+        }))));
+    }
+    static get is() { return "vertex-color-circle-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["color-circle-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["color-circle-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "colors": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The colors to show in this `vertex-color-circle-picker`.\nThese values will map to the `color` property of the underlying\n`vertex-color-swatch`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "colors",
+                "defaultValue": "[\n    '#4c87be',\n    '#f3d336',\n    '#6fbb29',\n    '#e38826',\n    '#c72e16',\n    '#8c3681',\n    '#000000',\n    '#ffffff',\n  ]"
+            },
+            "labels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, string> | string",
+                    "resolved": "string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional labels that will be displayed as a tooltip on\nthe underlying `vertex-color-swatch` elements for associated\ncolors in the `colors` array."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "labels",
+                "defaultValue": "{}"
+            },
+            "labelPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverPlacement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "PopoverPlacement": {
+                            "location": "import",
+                            "path": "../popover/popover",
+                            "id": "src/components/popover/popover.tsx::PopoverPlacement",
+                            "referenceLocation": "PopoverPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the tooltip around the swatch elements.\nThis can be any of the following values:\n\n'top', 'top-start', 'top-end',\n'bottom', 'bottom-start', 'bottom-end',\n'right', 'right-start', 'right-end',\n'left', 'left-start', 'left-end',\n'auto', 'auto-start', or 'auto-end', and\ndefaults to 'bottom'.\n\nNote: placement will adjust based on the amount\nof available space, so tooltips close to screen\nedges may appear in a different location."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-placement",
+                "defaultValue": "'bottom'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorPickerSizeSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ColorPickerSizeSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/vertex-web-ui/vertex-web-ui/packages/ui/src/components/color-circle-picker/color-circle-picker.tsx",
+                            "id": "src/components/color-circle-picker/color-circle-picker.tsx::ColorPickerSizeSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of this color picker. Can be `sm`, `md`, or `lg`,\nand defaults to `lg`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'lg'"
+            },
+            "supplementalColors": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional supplemental colors that will be provided to the\nunderlying `vertex-color-swatch` elements for associated\nindices in the `colors` array."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "supplemental-colors",
+                "defaultValue": "[]"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme to use for this `vertex-color-circle-picker`.\nCan be either `light` or `dark`, and defaults to `dark`.\n\nWith the `dark` theme, the provided `colors` will be used\nas the background-colors for `vertex-color-swatch` elements,\nand a `darkened` color will be used for the border-colors.\n\nWith the `light` theme, the provided `colors` will be used\nas the background-colors for `vertex-color-swatch` elements,\nand a `lightened` color will be used for the border-colors."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "theme",
+                "defaultValue": "'dark'"
+            },
+            "lightenPercentage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The percentage lighter color to use to compute the `lightened`\ncolor for the underlying `vertex-color-swatch`. This will be\nused when the `theme` is set to `light`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lighten-percentage",
+                "defaultValue": "0.25"
+            },
+            "darkenPercentage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The percentage darker color to use to compute the `darkened`\ncolor for the underlying `vertex-color-swatch`. This will be\nused when the `theme` is set to `dark`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "darken-percentage",
+                "defaultValue": "0.25"
+            },
+            "selected": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional selected color. This will also be updated internally\nby the component when individual `vertex-color-swatch` elements\nare clicked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The orientation of this color picker. Can be either `vertical`\nor `horizontal`, and defaults to `horizontal`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placement of the tooltip around the swatch elements.\nThis can be any of the following values:\n\n'top', 'top-start', 'top-end',\n'bottom', 'bottom-start', 'bottom-end',\n'right', 'right-start', 'right-end',\n'left', 'left-start', 'left-end',\n'auto', 'auto-start', or 'auto-end', and\ndefaults to 'bottom'.\n\nNote: placement will adjust based on the amount\nof available space, so tooltips close to screen\nedges may appear in a different location."
-        },
-        "attribute": "label-placement",
-        "reflect": false,
-        "defaultValue": "'bottom'"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ColorPickerSizeSize",
-          "resolved": "\"lg\" | \"md\" | \"sm\"",
-          "references": {
-            "ColorPickerSizeSize": {
-              "location": "local"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The size of this color picker. Can be `sm`, `md`, or `lg`,\nand defaults to `lg`."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      },
-      "supplementalColors": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string[] | string",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Optional supplemental colors that will be provided to the\nunderlying `vertex-color-swatch` elements for associated\nindices in the `colors` array."
-        },
-        "attribute": "supplemental-colors",
-        "reflect": false,
-        "defaultValue": "[]"
-      },
-      "theme": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'light' | 'dark'",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The theme to use for this `vertex-color-circle-picker`.\nCan be either `light` or `dark`, and defaults to `dark`.\n\nWith the `dark` theme, the provided `colors` will be used\nas the background-colors for `vertex-color-swatch` elements,\nand a `darkened` color will be used for the border-colors.\n\nWith the `light` theme, the provided `colors` will be used\nas the background-colors for `vertex-color-swatch` elements,\nand a `lightened` color will be used for the border-colors."
-        },
-        "attribute": "theme",
-        "reflect": true,
-        "defaultValue": "'dark'"
-      },
-      "lightenPercentage": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The percentage lighter color to use to compute the `lightened`\ncolor for the underlying `vertex-color-swatch`. This will be\nused when the `theme` is set to `light`."
-        },
-        "attribute": "lighten-percentage",
-        "reflect": false,
-        "defaultValue": "0.25"
-      },
-      "darkenPercentage": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The percentage darker color to use to compute the `darkened`\ncolor for the underlying `vertex-color-swatch`. This will be\nused when the `theme` is set to `dark`."
-        },
-        "attribute": "darken-percentage",
-        "reflect": false,
-        "defaultValue": "0.25"
-      },
-      "selected": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "An optional selected color. This will also be updated internally\nby the component when individual `vertex-color-swatch` elements\nare clicked."
-        },
-        "attribute": "selected",
-        "reflect": true
-      },
-      "direction": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'vertical' | 'horizontal'",
-          "resolved": "\"horizontal\" | \"vertical\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The orientation of this color picker. Can be either `vertical`\nor `horizontal`, and defaults to `horizontal`."
-        },
-        "attribute": "direction",
-        "reflect": false,
-        "defaultValue": "'horizontal'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "colorArray": {},
-      "supplementaryColorArray": {},
-      "labelMap": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "selectionChanged",
-        "name": "selectionChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "SelectionChangedDetails",
-          "resolved": "SelectionChangedDetails",
-          "references": {
-            "SelectionChangedDetails": {
-              "location": "local"
-            }
-          }
-        }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "colors",
-        "methodName": "handleColorsChange"
-      }, {
-        "propName": "supplementalColors",
-        "methodName": "handleSupplementalColorsChange"
-      }, {
-        "propName": "labels",
-        "methodName": "handleLabelsChange"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "colorArray": {},
+            "supplementaryColorArray": {},
+            "labelMap": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectionChanged",
+                "name": "selectionChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SelectionChangedDetails",
+                    "resolved": "SelectionChangedDetails",
+                    "references": {
+                        "SelectionChangedDetails": {
+                            "location": "local",
+                            "path": "/home/runner/work/vertex-web-ui/vertex-web-ui/packages/ui/src/components/color-circle-picker/color-circle-picker.tsx",
+                            "id": "src/components/color-circle-picker/color-circle-picker.tsx::SelectionChangedDetails"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "colors",
+                "methodName": "handleColorsChange"
+            }, {
+                "propName": "supplementalColors",
+                "methodName": "handleSupplementalColorsChange"
+            }, {
+                "propName": "labels",
+                "methodName": "handleLabelsChange"
+            }];
+    }
 }