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

package/dist/cjs/vertex-click-to-edit-textfield.cjs.entry.js

@@ -1,11 +1,116 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
 
-const clickToEditTextField = require('./click-to-edit-text-field-2c87ee66.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
+const ClickToEditTextField = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.inputFocus = index.createEvent(this, "inputFocus");
+        this.inputBlur = index.createEvent(this, "inputBlur");
+        this.inputInput = index.createEvent(this, "inputInput");
+        this.inputChange = index.createEvent(this, "inputChange");
+        this.inputSubmit = index.createEvent(this, "inputSubmit");
+        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.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);
+                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.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 (index.h("div", { key: 'd6c9d6921060ed1aadaf9f8a86b38cf55094d1f9', class: "click-to-edit" }, index.h("div", { key: '8c57b870ff66e5a298a36e660c46e6aab774ad45', class: "click-to-edit-text" }, index.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 (index.h("div", { class: "click-to-edit-icon-wrapper" }, index.h("slot", { name: "edit-icon" }, index.h("div", { class: "click-to-edit-button" }, index.h("vertex-icon-button", { iconSize: "sm", iconName: "check" })))));
+        }
+        else if (!this.disabled) {
+            return (index.h("div", { class: "click-to-edit-icon-wrapper" }, index.h("slot", { name: "pencil-icon" }, index.h("vertex-icon", { size: "sm", name: "pencil", class: index$1.classNames('icon-visibility', 'hover-icon') }))));
+        }
+        else {
+            return index.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 watchers() { return {
+        "value": [{
+                "handleValueChanged": 0
+            }]
+    }; }
+};
 
-
-
-exports.vertex_click_to_edit_textfield = clickToEditTextField.ClickToEditTextField;
+exports.vertex_click_to_edit_textfield = ClickToEditTextField;

package/dist/cjs/vertex-collapsible.cjs.entry.js

@@ -1,11 +1,27 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
 
-const collapsible = require('./collapsible-50ea984c.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
+const collapsibleCss = () => `button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--hover-color:var(--vertex-ui-blue-700)}.collapsible-target{width:100%;display:flex;align-items:center;cursor:pointer;padding:0.75rem 0.25rem;outline:none}.collapsible-target:focus-visible{border-radius:0.25rem;box-shadow:0 0 0 1px var(--hover-color, var(--vertex-ui-blue-700))}.collapsible-target:focus-visible,.collapsible-target:hover{color:var(--hover-color, var(--vertex-ui-blue-700))}.collapsible-expand{display:flex;justify-content:center;align-items:center;transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;margin-left:auto}.rotated{transform:rotateZ(90deg)}.collapsible-content{font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);box-sizing:border-box}`;
 
+const Collapsible = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Whether this collapsible is expanded.
+         */
+        this.open = false;
+    }
+    render() {
+        return (index.h("vertex-expandable", { key: '6e8ccc6a3ceef9dfbfd64515b35abcfc4095ee36', controlled: true, expanded: this.open }, index.h("button", { key: '0223887a424477b8cc9c01b18169b94135094338', slot: "header", "data-testid": "expand-click-target", class: "collapsible-target", onClick: () => this.setOpen(!this.open), onSubmit: () => this.setOpen(!this.open) }, this.label != null ? (index.h("span", null, this.label)) : (index.h("slot", { name: "label" })), index.h("div", { key: 'a42dc00b416fa6d62fb3ec4e832875154452a605', class: index$1.classNames('collapsible-expand', {
+                rotated: this.open,
+            }) }, index.h("slot", { key: 'e048381a445b35bdd39a2fea25864e15497f9654', name: "expand-icon" }, index.h("vertex-icon", { key: '6b19696b80c6386130c9f151bad804fa26ffb347', name: "caret-right" })))), index.h("div", { key: '0f1198fd37c961e8b86da7ba4e7037d70d6c5d8f', class: "collapsible-content-container" }, index.h("slot", { key: '0db71de24cc3bcddc11bc6b8a535da3b17b490a4' }))));
+    }
+    setOpen(open) {
+        this.open = open;
+    }
+};
+Collapsible.style = collapsibleCss();
 
-
-exports.vertex_collapsible = collapsible.Collapsible;
+exports.vertex_collapsible = Collapsible;

package/dist/cjs/vertex-color-circle-picker.cjs.entry.js

@@ -1,11 +1,147 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
 
-const colorCirclePicker = require('./color-circle-picker-b0927289.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
+const colorCirclePickerCss = () => `:host{display:flex;--color-circle-spacing:1rem;--color-circle-hovered-outline:2px solid var(--vertex-ui-neutral-400);--color-circle-selected-outline:var(--color-circle-hovered-outline)}.container{display:flex;gap:var(--color-circle-spacing)}.container.vertical{flex-direction:column;justify-content:center}.container.horizontal{align-items:center}.circle{cursor:pointer;outline-offset:3px;border-radius:100%}.circle.selected{outline:var(--color-circle-selected-outline)}.circle:hover{outline:var(--color-circle-hovered-outline)}`;
 
+const ColorCirclePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.selectionChanged = index.createEvent(this, "selectionChanged");
+        /**
+         * 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);
+            }
+            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 (index.h(index.Host, { key: 'b59004b3fd9e0bf28a80bb0481ea2807ea137cad' }, index.h("div", { key: '7b6498a4aefb2ae0fda2154854d860ef4d711df8', class: index$1.classNames('container', {
+                vertical: this.direction === 'vertical',
+            }) }, this.colorArray.map((c, i) => {
+            const label = this.labelMap[c];
+            const swatch = (index.h("vertex-color-swatch", { class: index$1.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 ? (index.h("vertex-tooltip", { placement: this.labelPlacement, content: label }, swatch)) : (swatch);
+        }))));
+    }
+    static get watchers() { return {
+        "colors": [{
+                "handleColorsChange": 0
+            }],
+        "supplementalColors": [{
+                "handleSupplementalColorsChange": 0
+            }],
+        "labels": [{
+                "handleLabelsChange": 0
+            }]
+    }; }
+};
+ColorCirclePicker.style = colorCirclePickerCss();
 
-
-exports.vertex_color_circle_picker = colorCirclePicker.ColorCirclePicker;
+exports.vertex_color_circle_picker = ColorCirclePicker;

package/dist/cjs/vertex-color-picker.cjs.entry.js

@@ -1,12 +1,72 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
+var lib = require('./lib-CCXuRx1c.js');
 
-const colorPicker = require('./color-picker-6aa97d3b.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
-require('./lib-1bd1e383.js');
+const colorPickerCss = () => `:host{display:flex;--selected-color-width:initial;--selected-color-height:initial}.wrapper{display:inline-flex;align-items:center}.wrapper.expand-full{width:100%}.wrapper.full{padding:0.375rem 0.5rem;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.color-picker{width:100%;display:inline-flex;position:relative;cursor:pointer}.color-picker.disabled{opacity:0.5;cursor:default}.selected-wrapper{position:relative;display:flex;align-items:center}.wrapper.full .selected-wrapper{gap:0.75rem}.selected{position:relative}.wrapper.sm .selected{width:var(--selected-color-width, 1rem);height:var(--selected-color-height, 1rem)}.wrapper.md .selected{width:var(--selected-color-width, 1.25rem);height:var(--selected-color-height, 1.25rem)}.wrapper.lg .selected{width:var(--selected-color-width, 1.5rem);height:var(--selected-color-height, 1.5rem)}.text-wrapper{position:relative;min-width:3.6rem}.selected-text{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;color:var(--vertex-ui-neutral-700);text-align:center;font-family:var(--vertex-ui-font-family)}.hidden-text{visibility:hidden;pointer-events:none;font-family:var(--vertex-ui-font-family-monospace)}.wrapper.sm .selected-text,.wrapper.sm .hidden-text{font-size:var(--vertex-ui-text-xs)}.wrapper.md .selected-text,.wrapper.md .hidden-text{font-size:var(--vertex-ui-text-xs)}.wrapper.lg .selected-text,.wrapper.lg .hidden-text{font-size:var(--vertex-ui-text-xs)}.no-value{width:100%;height:100%;stroke:var(--vertex-ui-red-400)}.right-gutter{display:flex;align-items:center;margin-left:auto}slot[name="right-gutter"]::slotted(*){padding:0}.input{display:flex;position:absolute;pointer-events:none;height:100%;width:100%;left:0;top:0;opacity:0}`;
 
+const ColorPicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueInput = index.createEvent(this, "valueInput");
+        this.valueChanged = index.createEvent(this, "valueChanged");
+        /**
+         * 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);
+        };
+    }
+    valueChange() {
+        this.valueInput.emit(this.value);
+    }
+    render() {
+        var _a;
+        return (index.h(index.Host, { key: '88b31c336ea401f00f223cfb6665770b29f3c711' }, index.h("div", { key: 'ac9ce86e39ecbd741279921aa30516643ad48207', class: index$1.classNames('wrapper', this.variant, this.size, `expand-${this.expand}`) }, index.h("label", { key: '1332bed2d4e57d862a50d1724736f4ddca38fad9', class: index$1.classNames('color-picker', { disabled: this.disabled }) }, index.h("input", { key: 'df8035f1e3ca35d376ca7d6d3a6994a2a5510eca', type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), index.h("div", { key: 'caf37bc3d51b427f5965df4c60a6cc7b878712e7', class: index$1.classNames('selected-wrapper', this.variant) }, index.h("div", { key: '8f79f6a2f1c71a2857f0679099ad02443bd92d9d', class: "selected", title: this.value }, index.h("vertex-color-swatch", { key: '78740fb1826e06fa370889ff6c8c0ec3a3428f3d', class: "selected-color", supplementalColor: "var(--vertex-ui-neutral-400)", color: this.value, variant: "square", size: this.size }, index.h("slot", { key: '83134302cf540ebb134171ee8b24c7300dcb360a', name: "overlay", slot: "overlay" }, (this.value == null || this.value === '') && (index.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" }, index.h("path", { key: 'f620697f4296232560923e5b72fbb5625588e3e0', d: "M16,0L0,16" })))))), this.variant === 'full' && (index.h("div", { key: '9df94ff8660ef30d02d0a545cb44ee15ca04a9c1', class: "text-wrapper" }, index.h("div", { key: '5cc516c55bc4800be318a3832332e7dc2111aa63', class: "hidden-text" }, "#FFFFFF"), index.h("div", { key: '8fdf4e46cc4da0ae138fcb2321cf7865b38e878a', class: "selected-text" }, (_a = this.getDisplayedValue()) !== null && _a !== void 0 ? _a : 'Default')))), index.h("div", { key: 'a5ad876e6ecb96c912cac49caf1c33cadb871bc1', class: "right-gutter" }, index.h("slot", { key: 'e4402a6bb8c182ff7979897ae77538e303767ae6', name: "right-gutter" }))))));
+    }
+    getDisplayedValue() {
+        var _a;
+        if (this.value != null && lib.isValidHexColor(this.value)) {
+            return (_a = this.value) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase();
+        }
+        return undefined;
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChange": 0
+            }]
+    }; }
+};
+ColorPicker.style = colorPickerCss();
 
-
-exports.vertex_color_picker = colorPicker.ColorPicker;
+exports.vertex_color_picker = ColorPicker;

package/dist/cjs/vertex-color-swatch.cjs.entry.js

@@ -1,12 +1,146 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
+var lib = require('./lib-CCXuRx1c.js');
 
-const colorSwatch = require('./color-swatch-6d98da5f.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
-require('./lib-1bd1e383.js');
+const colorSwatchCss = () => `:host{display:flex}.root{position:relative;border-style:solid;border-color:var(--vertex-ui-neutral-300);box-sizing:border-box}.root.circle{border-width:2px;border-radius:100%}.root.circle.sm{border-width:1px}.root.square{border-width:1px;border-radius:3px}.root.sm{width:16px;height:16px}.root.md{width:20px;height:20px}.root.lg{width:24px;height:24px}.overlay{position:absolute;width:100%;height:100%;border-radius:2px;overflow:hidden}`;
 
+const ColorSwatch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The variant of this color swatch. Can be either `circle` or `square`,
+         * and defaults to `circle`.
+         */
+        this.variant = 'circle';
+        /**
+         * The size of this color swatch. Can be `sm`, `md`, or `lg`,
+         * and defaults to `md`.
+         */
+        this.size = 'md';
+        /**
+         * The primary color of this `vertex-color-swatch` in hexadecimal format.
+         * For `dark` theme, this will be the background-color.
+         * For `light` theme, this will be the border-color.
+         */
+        this.color = '#ffffff';
+        /**
+         * The theme to use for this `vertex-color-swatch`.
+         * Can be `none`, `light`, or `dark`, and defaults to `none`.
+         *
+         * With no theme (`none`), the provided `color` will be used
+         * as the background-color, and the border will be a neutral color.
+         *
+         * With the `dark` theme, the provided `color` will be used
+         * as the background-color, and the `darkened` color will be
+         * used for the border-color.
+         *
+         * With the `light` theme, the provided `color` will be used
+         * as the border-color, and the `lightened` color will be used
+         * for the background-color.
+         */
+        this.theme = 'none';
+        /**
+         * The percentage lighter color to use to compute the `lightened`
+         * color. 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. This will be used when the `theme` is set to `dark`.
+         */
+        this.darkenPercentage = 0.25;
+        /**
+         * The computed lighter color based on the provided `color` and
+         * `lightenPercentage`. This will be used when the `theme` is
+         * set to `light`.
+         */
+        this.lightened = this.adjustColor(this.color, -this.lightenPercentage);
+        /**
+         * The computed darker color based on the provided `color` and
+         * `darkenPercentage`. This will be used when the `theme` is
+         * set to `dark`.
+         */
+        this.darkened = this.adjustColor(this.color, this.darkenPercentage);
+    }
+    handleColorChanged(newColor) {
+        this.lightened = this.adjustColor(newColor, -this.lightenPercentage);
+        this.darkened = this.adjustColor(newColor, this.darkenPercentage);
+    }
+    handleLightenPercentageChanged(newPercentage) {
+        this.lightened = this.adjustColor(this.color, -newPercentage);
+    }
+    handleDarkenPercentageChanged(newPercentage) {
+        this.darkened = this.adjustColor(this.color, newPercentage);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e59b4d55aae6299c1a1c1980a1051d33bdddfd33' }, index.h("div", { key: '9c0444df12194b3107532c6bd56da84eb99c7062', class: index$1.classNames('root', this.variant, this.size), style: this.getThemeColors() }, index.h("div", { key: '22c8a26764ca64206a80dbc4b09d6fd3ea42e1aa', class: "overlay" }, index.h("slot", { key: '32cae671003f5f0d7d06c9495a41e0be6750510a', name: "overlay" })))));
+    }
+    getThemeColors() {
+        const supplementalColor = this.getSupplementalColor();
+        switch (this.theme) {
+            case 'light':
+                return {
+                    backgroundColor: supplementalColor,
+                    borderColor: this.color,
+                };
+            case 'dark':
+                return {
+                    backgroundColor: this.color,
+                    borderColor: supplementalColor,
+                };
+            default:
+                return {
+                    backgroundColor: this.color,
+                    borderColor: supplementalColor !== null && supplementalColor !== void 0 ? supplementalColor : undefined,
+                };
+        }
+    }
+    getSupplementalColor() {
+        const providedSupplementalColor = this.supplementalColor != null && this.supplementalColor.length > 0
+            ? this.supplementalColor
+            : undefined;
+        switch (this.theme) {
+            case 'light':
+                return providedSupplementalColor !== null && providedSupplementalColor !== void 0 ? providedSupplementalColor : this.lightened;
+            case 'dark':
+                return providedSupplementalColor !== null && providedSupplementalColor !== void 0 ? providedSupplementalColor : this.darkened;
+            default:
+                return providedSupplementalColor;
+        }
+    }
+    adjustColor(color, percentage) {
+        if (lib.isValidHexColor(color)) {
+            const r = Number(`0x${color.slice(1, 3)}`);
+            const g = Number(`0x${color.slice(3, 5)}`);
+            const b = Number(`0x${color.slice(5, 7)}`);
+            const rPadded = this.padHexComponent(this.adjustComponent(r, percentage).toString(16));
+            const gPadded = this.padHexComponent(this.adjustComponent(g, percentage).toString(16));
+            const bPadded = this.padHexComponent(this.adjustComponent(b, percentage).toString(16));
+            return `#${rPadded}${gPadded}${bPadded}`;
+        }
+        return color;
+    }
+    adjustComponent(component, percentage) {
+        const scalar = percentage < 0 ? 0xff - component : 0xff;
+        return Math.max(0x00, Math.min(0xff, Math.floor(component - Math.floor(scalar * percentage))));
+    }
+    padHexComponent(hex) {
+        return `${'0'.repeat(2 - hex.length)}${hex}`;
+    }
+    static get watchers() { return {
+        "color": [{
+                "handleColorChanged": 0
+            }],
+        "lightenPercentage": [{
+                "handleLightenPercentageChanged": 0
+            }],
+        "darkenPercentage": [{
+                "handleDarkenPercentageChanged": 0
+            }]
+    }; }
+};
+ColorSwatch.style = colorSwatchCss();
 
-
-exports.vertex_color_swatch = colorSwatch.ColorSwatch;
+exports.vertex_color_swatch = ColorSwatch;

package/dist/cjs/vertex-context-menu.cjs.entry.js

@@ -1,10 +1,95 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
 
-const contextMenu = require('./context-menu-664922cd.js');
-require('./index-6a92256c.js');
+const ContextMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.menuOpened = index.createEvent(this, "menuOpened");
+        this.menuClosed = index.createEvent(this, "menuClosed");
+        /**
+         * Whether this context menu is animated on open
+         * and close.
+         */
+        this.animated = true;
+        this.open = false;
+        this.handlePointerDown = this.handlePointerDown.bind(this);
+        this.handlePointerUp = this.handlePointerUp.bind(this);
+        this.handleContextMenu = this.handleContextMenu.bind(this);
+        this.handleMenuClosed = this.handleMenuClosed.bind(this);
+        this.observer = new MutationObserver(() => {
+            if (this.target == null) {
+                this.addEventListeners(this.targetSelector);
+            }
+        });
+    }
+    componentDidLoad() {
+        this.addEventListeners(this.targetSelector);
+        this.observer.observe(document.body, {
+            childList: true,
+            attributes: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        this.removeEventListeners();
+        this.observer.disconnect();
+    }
+    handleTargetSelectorChange(targetSelector) {
+        if (targetSelector != null) {
+            this.removeEventListeners();
+            this.addEventListeners(targetSelector);
+        }
+    }
+    render() {
+        return (index.h("vertex-menu", { key: '93a42bf872d87dc043ab09f841d30f3923fd72b5', open: this.open, animated: this.animated, position: this.position, fallbackPlacements: [
+                'bottom-end',
+                'top-start',
+                'top-end',
+                'right',
+                'left',
+            ], onMenuClosed: this.handleMenuClosed }, index.h("slot", { key: '0845aa6e6e8f24ed2f48d38cd1844eed0a28ad70' })));
+    }
+    addEventListeners(targetSelector) {
+        this.target =
+            document.querySelector(targetSelector) || undefined;
+        if (this.target != null) {
+            this.target.addEventListener('contextmenu', this.handleContextMenu);
+            this.target.addEventListener('pointerdown', this.handlePointerDown);
+            this.target.addEventListener('pointerup', this.handlePointerUp);
+        }
+    }
+    removeEventListeners() {
+        var _a, _b, _c;
+        (_a = this.target) === null || _a === void 0 ? void 0 : _a.removeEventListener('contextmenu', this.handleContextMenu);
+        (_b = this.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('pointerdown', this.handlePointerDown);
+        (_c = this.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('pointerup', this.handlePointerUp);
+        this.target = undefined;
+    }
+    handleContextMenu(e) {
+        e.preventDefault();
+    }
+    handlePointerDown(e) {
+        if (e.buttons === 2) {
+            this.position = { x: e.clientX, y: e.clientY };
+        }
+    }
+    handlePointerUp(e) {
+        var _a;
+        if (e.clientX === ((_a = this.position) === null || _a === void 0 ? void 0 : _a.x) && e.clientY === this.position.y) {
+            this.open = true;
+            this.menuOpened.emit(e);
+        }
+    }
+    handleMenuClosed() {
+        this.open = false;
+        this.menuClosed.emit();
+    }
+    static get watchers() { return {
+        "targetSelector": [{
+                "handleTargetSelectorChange": 0
+            }]
+    }; }
+};
 
-
-
-exports.vertex_context_menu = contextMenu.ContextMenu;
+exports.vertex_context_menu = ContextMenu;