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

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

@@ -1,11 +1,114 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
 
-const toast = require('./toast-bee7f47b.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
+const toastCss = () => `:host{--toast-width:auto;--toast-min-width:17rem;--toast-max-width:25rem;--toast-white-space:normal}.anchor{position:fixed}.bottom-left{left:1rem;bottom:1rem}.bottom{left:50vw;bottom:1rem}.bottom-right{right:1rem;bottom:1rem}.top-left{left:1rem;top:1rem}.top{left:50vw;top:1rem}.top-right{right:1rem;top:1rem}.popover{position:fixed;--open-animation-name:open-fade-in;--close-animation-name:close-fade-out}.actions{display:flex;align-items:center;margin-left:auto}.close{cursor:pointer;padding-left:1rem}.close:hover{color:var(--vertex-ui-neutral-300)}.toast{position:relative;display:flex;align-items:center;width:var(--toast-width);min-width:var(--toast-min-width);max-width:var(--toast-max-width);padding:1rem 1rem 1rem 1.5rem;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);background-color:var(--vertex-ui-neutral-800);color:var(--vertex-ui-white);border-radius:4px;white-space:var(--toast-white-space);user-select:none}.toast.hidden{pointer-events:none}.warn{background-color:var(--vertex-ui-orange-100);color:var(--vertex-ui-neutral-800)}.error{background-color:var(--vertex-ui-red-700);color:white}`;
 
+const DEFAULT_TOAST_DURATION = 3000;
+const Toast = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.closed = index.createEvent(this, "closed");
+        /**
+         * The placement of the toast.
+         * This can be any of the following values:
+         *
+         * 'top', 'top-left', 'top-right',
+         * 'bottom', 'bottom-left', or 'bottom-right'.
+         */
+        this.placement = 'bottom-left';
+        /**
+         * The duration this toast will appear for.
+         * Can be set to `0` to display the toast until
+         * explicitly dismissed, and defaults to 3000ms.
+         */
+        this.duration = DEFAULT_TOAST_DURATION;
+        /**
+         * Whether this toast should be animated.
+         * Defaults to true.
+         */
+        this.animated = true;
+        /**
+         * Whether this toast is visible. Updating this
+         * property to `true` will restart the timer to hide
+         * the toast. Defaults to false.
+         */
+        this.open = false;
+        /**
+         * The type of toast. This will change the styling of the toast
+         */
+        this.type = 'info';
+        this.handleClose = this.handleClose.bind(this);
+        this.startCloseTimeout = this.startCloseTimeout.bind(this);
+        this.clearCloseTimeout = this.clearCloseTimeout.bind(this);
+        this.restartCloseTimeout = this.restartCloseTimeout.bind(this);
+    }
+    componentDidLoad() {
+        // This allows the component to render once initially to correctly
+        // place the popover anchor.
+        this.isOpen = this.open;
+        if (this.isOpen) {
+            this.restartCloseTimeout();
+        }
+    }
+    async handleOpenChanged(open) {
+        if (open) {
+            this.restartCloseTimeout();
+            this.isOpen = open;
+        }
+    }
+    render() {
+        return (index.h("vertex-popover", { key: '2f628b74ec3dec91f02fac1815f5d1b12870ab2d', class: "popover", open: this.isOpen, resizeBehavior: "fixed", backdrop: false, placement: this.getPopoverPlacement(), animated: this.animated }, index.h("div", { key: 'c43cdca71f2dba04b1eb59ab3a0e7ba20bd950e3', slot: "anchor", class: index$1.classNames('anchor', this.placement) }), index.h("div", { key: '0839244c1e3e325d9362de508cdc0ebcc59fa755', class: index$1.classNames('toast', {
+                hidden: !this.isOpen,
+                warn: this.type === 'warn',
+                error: this.type === 'error',
+            }) }, this.content ? index.h("div", { class: "content" }, this.content) : index.h("slot", null), index.h("div", { key: '6b95eb1f57a5eaeb5987fdb39290cc61662d4c85', class: "actions" }, index.h("slot", { key: '19d40a81a11f9a08771a7084d77d2f634c66d29d', name: "action" }), index.h("vertex-icon-button", { key: '4d19309ba602f162a77f41ac74667594dbe98544', class: "close", iconName: "close", iconSize: "sm", variant: "plain", onClick: this.handleClose })))));
+    }
+    handleClose() {
+        this.clearCloseTimeout();
+        this.isOpen = false;
+        this.closed.emit();
+    }
+    startCloseTimeout() {
+        if (this.closeTimeout == null && this.duration > 0) {
+            this.closeTimeout = setTimeout(() => {
+                this.handleClose();
+            }, this.duration);
+        }
+    }
+    clearCloseTimeout() {
+        if (this.closeTimeout != null) {
+            clearTimeout(this.closeTimeout);
+            this.closeTimeout = undefined;
+        }
+    }
+    restartCloseTimeout() {
+        this.clearCloseTimeout();
+        this.startCloseTimeout();
+    }
+    getPopoverPlacement() {
+        switch (this.placement) {
+            case 'bottom-left':
+                return 'top-start';
+            case 'bottom':
+                return 'top';
+            case 'bottom-right':
+                return 'top-end';
+            case 'top-left':
+                return 'bottom-start';
+            case 'top':
+                return 'bottom';
+            case 'top-right':
+                return 'bottom-end';
+        }
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChanged": 0
+            }]
+    }; }
+};
+Toast.style = toastCss();
 
-
-exports.vertex_toast = toast.Toast;
+exports.vertex_toast = Toast;

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

@@ -1,11 +1,52 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
 
-const toggle = require('./toggle-a5dde469.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
+const toggleCss = () => `button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{display:flex}.check{border:1px solid var(--vertex-ui-neutral-400);box-shadow:0 0 2px var(--vertex-ui-neutral-400);border-radius:4px;width:1rem;height:1rem;padding:0}.check:not(.disabled){cursor:pointer}.check.disabled{border:1px solid var(--vertex-ui-neutral-200);box-shadow:0 0 2px var(--vertex-ui-neutral-200)}.check:focus-visible:not(.disabled){outline:none;border:1px solid var(--vertex-ui-neutral-600);box-shadow:0 0 2px var(--vertex-ui-neutral-600)}.check:focus-visible:not(.disabled)>.checked-content.checked{background-color:var(--vertex-ui-blue-800);box-shadow:0 0 2px var(--vertex-ui-blue-800)}.check:hover:not(.disabled){border:1px solid var(--vertex-ui-neutral-500);box-shadow:0 0 2px var(--vertex-ui-neutral-500)}.check.checked:not(.disabled){border:none;box-shadow:none}.check:hover:not(.disabled)>.checked-content.checked{background-color:var(--vertex-ui-blue-500);box-shadow:0 0 2px var(--vertex-ui-blue-500)}.checked-content{width:100%;height:100%;border-radius:4px}.checked-content.disabled{background-color:var(--vertex-ui-neutral-050);color:var(--vertex-ui-neutral-500)}.checked-content.checked:not(.disabled){background-color:var(--vertex-ui-blue-700);box-shadow:0 0 2px var(--vertex-ui-blue-700);color:var(--vertex-ui-white)}.switch{position:relative;width:2.25rem;height:1.25rem;padding:0;display:inline-block}.switch:not(.disabled){cursor:pointer}.track{position:absolute;top:0;background-color:var(--vertex-ui-neutral-300);width:2rem;padding:0 0.125rem;margin:0.1875rem 0;height:0.875rem;border-radius:7rem}.track.disabled{background-color:var(--vertex-ui-neutral-200)}.track.disabled.checked{background-color:var(--vertex-ui-blue-200)}.handle{position:absolute;top:0;left:0;background-color:var(--vertex-ui-neutral-100);box-shadow:-1px 1px rgba(0, 0, 0, 0.15);width:1.25rem;height:1.25rem;border-radius:100%;display:flex;transition:left 0.25s}.handle.disabled{box-shadow:none}.track:not(.disabled).checked{background-color:var(--vertex-ui-blue-300)}.handle.checked{left:1rem}.handle.checked:not(.disabled){background-color:var(--vertex-ui-blue-600)}.handle.checked.disabled{background-color:var(--vertex-ui-blue-300)}`;
 
+const Toggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged");
+        /**
+         * The type of toggle. This can be either 'check' or 'switch',
+         * and defaults to 'check'.
+         */
+        this.variant = 'check';
+        /**
+         * Whether this toggle is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether this toggle is checked. This prop
+         * is modified internally by the component unless
+         * the `disabled` prop is set to true.
+         */
+        this.checked = false;
+    }
+    render() {
+        const flipValue = () => {
+            if (!this.disabled) {
+                this.checked = !this.checked;
+                this.valueChanged.emit(this.checked);
+            }
+        };
+        return (index.h("button", { key: '4a73be19dfaf30d2d883bebcf2e54e408830a6bb', class: index$1.classNames(this.variant, {
+                checked: this.checked,
+                disabled: this.disabled,
+            }), onClick: flipValue, onSubmit: flipValue }, this.variant === 'check' && (index.h("div", { key: '9255fc90b4f4c7888c536fe7d521e8e06d39627a', class: index$1.classNames('checked-content', {
+                checked: this.checked,
+                disabled: this.disabled,
+            }) }, this.checked && index.h("vertex-icon", { key: 'a672019a099ac5111c3028dfce593ba8e975621b', name: "check", size: "md" }))), this.variant === 'switch' && (index.h("div", { key: '5f97ed9dc39b6bdaee0a3b7a102a8397a22be859', class: index$1.classNames('track', {
+                disabled: this.disabled,
+                checked: this.checked,
+            }) })), this.variant === 'switch' && (index.h("div", { key: '090a9ac2ecca6d0118d5580ea186697aace6ba44', class: index$1.classNames('handle', {
+                disabled: this.disabled,
+                checked: this.checked,
+            }) }))));
+    }
+};
+Toggle.style = toggleCss();
 
-
-exports.vertex_toggle = toggle.Toggle;
+exports.vertex_toggle = Toggle;

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

@@ -1,14 +1,349 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var tslib_es6 = require('./tslib.es6-AsLBQn5u.js');
+require('./index-D-R2lvls.js');
+var index$1 = require('./index-DihxupoM.js');
+var dom = require('./dom-v38DVhe2.js');
+var slots = require('./slots-DEdmqbtw.js');
 
-const tooltip = require('./tooltip-634eb8c9.js');
-require('./index-6a92256c.js');
-require('./tslib.es6-838fd860.js');
-require('./index-e1b40fa6.js');
-require('./dom-a2c535e3.js');
-require('./slots-fb5ac359.js');
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
+    // find the complete implementation of crypto (msCrypto) on IE11.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
 
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
 
+  return getRandomValues(rnds8);
+}
 
-exports.vertex_tooltip = tooltip.Tooltip;
+var REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
+
+function validate(uuid) {
+  return typeof uuid === 'string' && REGEX.test(uuid);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+var byteToHex = [];
+
+for (var i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).substr(1));
+}
+
+function stringify(arr) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
+  // of the following:
+  // - One or more input array values don't map to a hex octet (leading to
+  // "undefined" in the uuid)
+  // - Invalid input values for the RFC `version` or `variant` fields
+
+  if (!validate(uuid)) {
+    throw TypeError('Stringified UUID is invalid');
+  }
+
+  return uuid;
+}
+
+function v4(options, buf, offset) {
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  return stringify(rnds);
+}
+
+/**
+ * A module for defining functional schemas to map between different types. This
+ * module is useful for parsing to or from JSON/protobufs to domain types.
+ *
+ * Mappers support greedy validation, so all validation errors are aggregated
+ * and reported vs failing on the first invalid input.
+ *
+ * @example
+ *
+ * ```ts
+ * import { Mapper as M } from '@vertexvis/utils';
+ *
+ * interface Address {
+ *   address: string;
+ *   city: string;
+ *   state: string;
+ *   zip: string;
+ * }
+ *
+ * interface Person {
+ *   name: string;
+ *   addresses: Address[];
+ * }
+ *
+ * type AddressJson = Partial<Address>;
+ * type PersonJson = {
+ *   name?: string;
+ *   addresses?: AddressJson[];
+ * }
+ *
+ * const mapAddress: M.Func<AddressJson, Address> = M.defineMapper(
+ *   M.read(
+ *     M.requireProp('address'),
+ *     M.requireProp('city'),
+ *     M.requireProp('state'),
+ *     M.requireProp('zip')
+ *   ),
+ *   ([address, city, state, zip]) => ({
+ *     address, city, state, zip
+ *   })
+ * );
+ *
+ * const mapPerson: M.Func<PersonJson, Person> = M.defineMapper(
+ *   M.read(
+ *     M.requireProp('name'),
+ *     M.mapProp(
+ *       'addresses',
+ *       M.compose(M.required('addresses'), M.mapArray(mapAddress))
+ *     )
+ *   ),
+ *   ([name, addresses]) => ({ name, addresses })
+ * );
+ *
+ * const person = mapPerson({
+ *   name: 'John',
+ *   addresses: [{ address: '123', city: 'Ames', state: 'IA', zip: '50010' }]
+ * });
+ *
+ * const invalidPerson = mapPerson({
+ *   addresses: [{ city: 'Ames', state: 'IA', zip: '50010' }]
+ * });
+ * ```
+ * // {
+ * //   errors: ["Name is required.", "Address is required."]
+ * // }
+ *
+ * @module
+ */
+/**
+ * An error that is thrown when validation of a schema fails.
+ *
+ * @see {@link ifInvalidThrow} - for throwing errors on invalid input.
+ */
+/** @class */ ((function (_super) {
+    tslib_es6.__extends(MapperValidationError, _super);
+    function MapperValidationError(errors) {
+        var _this = _super.call(this, 'Validation error mapping object.') || this;
+        _this.errors = errors;
+        Object.setPrototypeOf(_this, MapperValidationError.prototype);
+        return _this;
+    }
+    return MapperValidationError;
+})(Error));
+
+function create() {
+    return v4();
+}
+function fromMsbLsb(msb, lsb) {
+    function digits(val, ds) {
+        var hi = BigInt(1) << (ds * BigInt(4));
+        return (hi | (val & (hi - BigInt(1)))).toString(16).substring(1);
+    }
+    var msbB = typeof msb === 'string' ? BigInt(msb) : msb;
+    var lsbB = typeof lsb === 'string' ? BigInt(lsb) : lsb;
+    var sec1 = digits(msbB >> BigInt(32), BigInt(8));
+    var sec2 = digits(msbB >> BigInt(16), BigInt(4));
+    var sec3 = digits(msbB, BigInt(4));
+    var sec4 = digits(lsbB >> BigInt(48), BigInt(4));
+    var sec5 = digits(lsbB, BigInt(12));
+    return "".concat(sec1, "-").concat(sec2, "-").concat(sec3, "-").concat(sec4, "-").concat(sec5);
+}
+function toMsbLsb(id) {
+    var _a = tslib_es6.__read(id.split('-'), 5), c1 = _a[0], c2 = _a[1], c3 = _a[2], c4 = _a[3], c5 = _a[4];
+    if (c1 == null || c2 == null || c3 == null || c4 == null || c5 == null) {
+        throw new Error("Invalid UUID string ".concat(id));
+    }
+    var msb = BigInt.asIntN(64, BigInt("0x".concat(c1 + c2 + c3)));
+    var lsb = BigInt.asIntN(64, BigInt("0x".concat(c4 + c5)));
+    return { msb: msb.toString(), lsb: lsb.toString() };
+}
+
+var uuid = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  create: create,
+  fromMsbLsb: fromMsbLsb,
+  toMsbLsb: toMsbLsb
+});
+
+const tooltipCss = () => `:host{--tooltip-width:auto;--tooltip-white-space:normal;display:flex}.popover{width:100%;height:100%}.target{display:flex;width:100%;height:100%}.content-hidden{display:none}.tooltip{display:flex;justify-content:center;text-align:center;width:var(--tooltip-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-xxs);background-color:var(--vertex-ui-neutral-700);color:var(--vertex-ui-white);padding:0.25rem 0.5rem;border-radius:4px;pointer-events:none;white-space:var(--tooltip-white-space);user-select:none}.tooltip.hidden{display:none}`;
+
+const TOOLTIP_OPEN_DELAY = 500;
+const Tooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The placement of the tooltip around the slotted element.
+         * 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.placement = 'bottom';
+        /**
+         * The delay before this tooltip becomes visible
+         * on hover. Defaults to 500ms.
+         */
+        this.delay = TOOLTIP_OPEN_DELAY;
+        /**
+         * Whether this tooltip should be animated.
+         * Defaults to true.
+         */
+        this.animated = true;
+        this.open = false;
+        this.pointerEntered = false;
+        this.handlePointerEnter = this.handlePointerEnter.bind(this);
+        this.handlePointerLeave = this.handlePointerLeave.bind(this);
+        this.handleContentChange = this.handleContentChange.bind(this);
+        this.handleDisabledChange = this.handleDisabledChange.bind(this);
+        this.tooltipId = `vertex-tooltip-${uuid.create()}`;
+    }
+    disconnectedCallback() {
+        this.removeElement();
+        this.clearOpenTimeout();
+        this.pointerEntered = false;
+    }
+    handleContentChange() {
+        if (this.internalContentElement != null) {
+            this.updateContentElementChildren(this.internalContentElement);
+        }
+    }
+    handleDisabledChange() {
+        if (this.internalContentElement != null) {
+            this.updateContentElementClass(this.internalContentElement);
+        }
+        if (!this.disabled && this.pointerEntered) {
+            this.handlePointerEnter();
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '52cf61786b9455c308412c74920fa13c2fbf39da' }, index.h("div", { key: 'c80ad2bc646d508cf7a24de7e30d173a0067c166', class: "target", ref: (el) => {
+                this.targetElement = el;
+            }, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, index.h("slot", { key: '30fd8fb5dd907e941dff798976be471f35db7d45' })), index.h("div", { key: '8b136bdf9305bc837c2e159d8d3c6c2543c4422f', class: "content-hidden", ref: (el) => {
+                this.contentElement = el;
+            } }, index.h("slot", { key: 'bf2a10df58687e96f3b0da3f8e9b5aa8b3babefa', name: "content", onSlotchange: this.handleContentChange }))));
+    }
+    addElement() {
+        if (this.targetElement != null) {
+            const popover = this.createPopoverElement(this.targetElement);
+            const content = this.createContentElement();
+            this.updateContentElementChildren(content);
+            popover.appendChild(content);
+            this.hostElement.ownerDocument.body.appendChild(popover);
+        }
+    }
+    removeElement() {
+        const popover = this.hostElement.ownerDocument.getElementById(this.tooltipId);
+        if (popover != null) {
+            popover.remove();
+        }
+        this.internalContentElement = undefined;
+    }
+    createPopoverElement(anchorElement) {
+        const popover = this.hostElement.ownerDocument.createElement('vertex-popover');
+        popover.id = this.tooltipId;
+        popover.setAttribute('class', 'vertex-tooltip-popover');
+        popover.open = this.open;
+        popover.resizeBehavior = 'fixed';
+        popover.backdrop = false;
+        popover.placement = this.placement;
+        popover.animated = this.animated;
+        popover.anchorBounds = dom.getBoundingClientRect(anchorElement);
+        return popover;
+    }
+    createContentElement() {
+        this.internalContentElement =
+            this.hostElement.ownerDocument.createElement('div');
+        this.internalContentElement.setAttribute('class', index$1.classNames('vertex-tooltip-content', {
+            hidden: !this.open || this.disabled,
+        }));
+        return this.internalContentElement;
+    }
+    updateContentElementClass(element) {
+        element.setAttribute('class', index$1.classNames('vertex-tooltip-content', {
+            hidden: !this.open || this.disabled,
+        }));
+    }
+    updateContentElementChildren(element) {
+        var _a;
+        this.displayedSlottedContent =
+            (_a = slots.getSlottedContent(this.contentElement)) !== null && _a !== void 0 ? _a : this.displayedSlottedContent;
+        if (this.content != null) {
+            element.innerText = this.content;
+        }
+        else if (this.displayedSlottedContent != null) {
+            element.appendChild(this.displayedSlottedContent);
+        }
+    }
+    handlePointerEnter() {
+        if (this.openTimeout == null && !this.disabled) {
+            this.createOpenTimeout();
+        }
+        else if (this.openTimeout == null) {
+            this.pointerEntered = true;
+        }
+    }
+    handlePointerLeave() {
+        this.clearOpenTimeout();
+        this.removeElement();
+        this.open = false;
+        this.pointerEntered = false;
+    }
+    createOpenTimeout() {
+        this.openTimeout = setTimeout(() => {
+            this.open = true;
+            this.openTimeout = undefined;
+            this.addElement();
+        }, this.delay);
+        this.pointerEntered = false;
+    }
+    clearOpenTimeout() {
+        if (this.openTimeout != null) {
+            clearTimeout(this.openTimeout);
+            this.openTimeout = undefined;
+        }
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "content": [{
+                "handleContentChange": 0
+            }],
+        "disabled": [{
+                "handleDisabledChange": 0
+            }]
+    }; }
+};
+Tooltip.style = tooltipCss();
+
+exports.vertex_tooltip = Tooltip;

package/dist/collection/collection-manifest.json

@@ -1,51 +1,52 @@
 {
   "entries": [
-    "./components/avatar/avatar.js",
-    "./components/badge/badge.js",
-    "./components/popover/popover.js",
-    "./components/banner/banner.js",
-    "./components/button/button.js",
-    "./components/card/card.js",
-    "./components/chip/chip.js",
-    "./components/text-field/text-field.js",
-    "./components/color-circle-picker/color-circle-picker.js",
-    "./components/color-swatch/color-swatch.js",
-    "./components/color-picker/color-picker.js",
-    "./components/expandable/expandable.js",
-    "./components/icon-button/icon-button.js",
-    "./components/radio/radio.js",
-    "./components/resizable/resizable.js",
-    "./components/search-bar/search-bar.js",
-    "./components/slider/slider.js",
-    "./components/spinner/spinner.js",
-    "./components/toast/toast.js",
-    "./components/toggle/toggle.js",
-    "./components/auto-resize-textarea/auto-resize-textarea.js",
-    "./components/avatar-group/avatar-group.js",
-    "./components/card-group/card-group.js",
-    "./components/click-to-edit-text-field/click-to-edit-text-field.js",
-    "./components/collapsible/collapsible.js",
-    "./components/context-menu/context-menu.js",
-    "./components/dialog/dialog.js",
-    "./components/draggable-popover/draggable-popover.js",
-    "./components/dropdown-menu/dropdown-menu.js",
-    "./components/help-tooltip/help-tooltip.js",
-    "./components/icon/icon.js",
-    "./components/logo-loading/logo-loading.js",
-    "./components/menu/menu.js",
-    "./components/menu-divider/menu-divider.js",
-    "./components/menu-item/menu-item.js",
-    "./components/radio-group/radio-group.js",
-    "./components/result-list/result-list.js",
-    "./components/select/select.js",
-    "./components/tab/tab.js",
-    "./components/tabs/tabs.js",
-    "./components/tooltip/tooltip.js"
+    "components/avatar/avatar.js",
+    "components/badge/badge.js",
+    "components/popover/popover.js",
+    "components/banner/banner.js",
+    "components/button/button.js",
+    "components/card/card.js",
+    "components/chip/chip.js",
+    "components/text-field/text-field.js",
+    "components/color-circle-picker/color-circle-picker.js",
+    "components/color-swatch/color-swatch.js",
+    "components/color-picker/color-picker.js",
+    "components/expandable/expandable.js",
+    "components/icon-button/icon-button.js",
+    "components/radio/radio.js",
+    "components/resizable/resizable.js",
+    "components/search-bar/search-bar.js",
+    "components/slider/slider.js",
+    "components/spinner/spinner.js",
+    "components/toast/toast.js",
+    "components/toggle/toggle.js",
+    "components/auto-resize-textarea/auto-resize-textarea.js",
+    "components/avatar-group/avatar-group.js",
+    "components/card-group/card-group.js",
+    "components/click-to-edit-text-field/click-to-edit-text-field.js",
+    "components/collapsible/collapsible.js",
+    "components/context-menu/context-menu.js",
+    "components/dialog/dialog.js",
+    "components/draggable-popover/draggable-popover.js",
+    "components/dropdown-menu/dropdown-menu.js",
+    "components/help-tooltip/help-tooltip.js",
+    "components/icon/icon.js",
+    "components/logo-loading/logo-loading.js",
+    "components/menu/menu.js",
+    "components/menu-divider/menu-divider.js",
+    "components/menu-item/menu-item.js",
+    "components/radio-group/radio-group.js",
+    "components/result-list/result-list.js",
+    "components/select/select.js",
+    "components/tab/tab.js",
+    "components/tabs/tabs.js",
+    "components/tooltip/tooltip.js"
   ],
+  "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.3",
-    "typescriptVersion": "4.9.4"
+    "version": "4.43.4",
+    "typescriptVersion": "5.8.3"
   },
   "collections": [],
   "bundles": []