@vertexvis/ui 0.1.2-canary.0 → 0.1.2-canary.1

package/dist/components/text-field.js

@@ -0,0 +1,171 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$1 } from './auto-resize-textarea.js';
+
+const TextField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.inputFocus = createEvent(this, "inputFocus", 7);
+    this.inputBlur = createEvent(this, "inputBlur", 7);
+    this.inputInput = createEvent(this, "inputInput", 7);
+    this.inputChange = createEvent(this, "inputChange", 7);
+    this.textFieldKeyDown = createEvent(this, "textFieldKeyDown", 7);
+    this.inputAutofill = createEvent(this, "inputAutofill", 7);
+    this.handleFocus = (ev) => {
+      this.inputFocus.emit(ev);
+    };
+    this.handleBlur = (ev) => {
+      this.inputBlur.emit(ev);
+    };
+    this.handleKeyDown = (ev) => {
+      if (ev.key === 'Enter' && this.nearbyForm != null) {
+        this.nearbyForm.dispatchEvent(new CustomEvent('submit', {
+          bubbles: true,
+          cancelable: true,
+        }));
+      }
+      else {
+        this.textFieldKeyDown.emit(ev);
+      }
+    };
+    this.handleChanged = () => {
+      this.inputChange.emit({ value: this.nativeInput.value });
+    };
+    this.handleInput = () => {
+      this.inputInput.emit({ value: this.nativeInput.value });
+    };
+    this.type = 'text';
+    this.name = undefined;
+    this.variant = 'standard';
+    this.fontSize = 'standard';
+    this.multiline = false;
+    this.minRows = 1;
+    this.maxRows = undefined;
+    this.placeholder = undefined;
+    this.autoFocus = undefined;
+    this.autoComplete = undefined;
+    this.autoCorrect = undefined;
+    this.value = '';
+    this.disabled = undefined;
+    this.hasError = undefined;
+  }
+  componentDidLoad() {
+    var _a;
+    if (this.autoFocus) {
+      (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }
+  /**
+   * updateInput is a method to take an input to automatically set the native input to the given input string
+   * @param input
+   */
+  async updateInput(input) {
+    if (this.nativeInput != null) {
+      this.nativeInput.value = input;
+    }
+  }
+  async blurInput() {
+    var _a;
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
+  }
+  async getInputValue() {
+    return this.nativeInput.value;
+  }
+  /**
+   * A method to select all in the input
+   */
+  async selectAll() {
+    this.nativeInput.select();
+  }
+  render() {
+    var _a;
+    const classes = classnames('txt-wrapper', {
+      'txt-wrapper-border': !this.multiline,
+      'txt-standard': this.variant === 'standard',
+      'txt-filled': this.variant === 'filled',
+      'txt-underlined': this.variant === 'underlined',
+      'txt-blank': this.variant === 'blank',
+      'txt-size-standard': this.fontSize === 'standard',
+      'txt-size-sm': this.fontSize === 'sm',
+      'txt-size-md': this.fontSize === 'md',
+      'txt-size-lg': this.fontSize === 'lg',
+      'txt-size-xl': this.fontSize === 'xl',
+      'txt-size-xxl': this.fontSize === 'xxl',
+      disabled: this.disabled,
+      'has-error': this.hasError,
+    });
+    const commonProps = {
+      class: 'txt',
+      'data-testid': 'text-field',
+      name: this.name,
+      ref: (input) => {
+        if (input != null) {
+          this.nativeInput = input;
+        }
+      },
+      autoComplete: this.autoComplete,
+      autoFocus: this.autoFocus,
+      disabled: this.disabled,
+      placeholder: this.placeholder,
+      value: this.value || '',
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onKeyDown: this.handleKeyDown,
+      onInput: this.handleInput,
+      onChange: this.handleChanged,
+      onAnimationStart: (ev) => {
+        if (['onAutoFillStart', 'onAutoFillCancel'].includes(ev.animationName)) {
+          this.inputAutofill.emit({ value: this.nativeInput.value });
+        }
+      },
+    };
+    return (h("div", { class: classes }, h("div", { class: "txt-slot" }, h("slot", { name: "left" })), this.multiline ? (h("vertex-auto-resize-textarea", { maxRows: this.maxRows, minRows: this.minRows, initialValue: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || '' }, h("textarea", Object.assign({}, commonProps, { class: classnames(commonProps.class, 'txt-textarea', classes), rows: this.minRows })))) : (h("input", Object.assign({}, commonProps, { type: this.type }))), h("div", { class: "txt-slot" }, h("slot", { name: "right" }))));
+  }
+  connectedCallback() {
+    if (this.hostElement != null) {
+      this.nearbyForm = this.hostElement.closest('form');
+    }
+  }
+  get hostElement() { return this; }
+}, [6, "vertex-textfield", {
+    "type": [1],
+    "name": [1],
+    "variant": [1],
+    "fontSize": [1, "font-size"],
+    "multiline": [4],
+    "minRows": [2, "min-rows"],
+    "maxRows": [2, "max-rows"],
+    "placeholder": [1],
+    "autoFocus": [4, "auto-focus"],
+    "autoComplete": [1, "auto-complete"],
+    "autoCorrect": [1, "auto-correct"],
+    "value": [1032],
+    "disabled": [516],
+    "hasError": [4, "has-error"],
+    "updateInput": [64],
+    "blurInput": [64],
+    "getInputValue": [64],
+    "selectAll": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-textfield", "vertex-auto-resize-textarea"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-textfield":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TextField);
+      }
+      break;
+    case "vertex-auto-resize-textarea":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { TextField as T, defineCustomElement as d };

package/dist/components/tooltip.js

@@ -0,0 +1,360 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as __extends, b as __read } from './tslib.es6.js';
+import { c as classnames } from './index2.js';
+import { g as getBoundingClientRect } from './dom.js';
+import { a as getSlottedContent } from './slots.js';
+import { d as defineCustomElement$1 } from './popover.js';
+
+/**
+ * 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) {
+    __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));
+
+// 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);
+}
+
+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
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (var i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return stringify(rnds);
+}
+
+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 = __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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.pointerEntered = false;
+    this.content = undefined;
+    this.disabled = undefined;
+    this.placement = 'bottom';
+    this.delay = TOOLTIP_OPEN_DELAY;
+    this.animated = true;
+    this.open = 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 (h(Host, null, h("div", { class: "target", ref: (el) => {
+        this.targetElement = el;
+      }, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, h("slot", null)), h("div", { class: "content-hidden", ref: (el) => {
+        this.contentElement = el;
+      } }, h("slot", { 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 = getBoundingClientRect(anchorElement);
+    return popover;
+  }
+  createContentElement() {
+    this.internalContentElement =
+      this.hostElement.ownerDocument.createElement('div');
+    this.internalContentElement.setAttribute('class', classnames('vertex-tooltip-content', {
+      hidden: !this.open || this.disabled,
+    }));
+    return this.internalContentElement;
+  }
+  updateContentElementClass(element) {
+    element.setAttribute('class', classnames('vertex-tooltip-content', {
+      hidden: !this.open || this.disabled,
+    }));
+  }
+  updateContentElementChildren(element) {
+    var _a;
+    this.displayedSlottedContent =
+      (_a = 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 this; }
+  static get watchers() { return {
+    "content": ["handleContentChange"],
+    "disabled": ["handleDisabledChange"]
+  }; }
+  static get style() { return tooltipCss; }
+}, [1, "vertex-tooltip", {
+    "content": [1],
+    "disabled": [4],
+    "placement": [1],
+    "delay": [2],
+    "animated": [4],
+    "open": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-tooltip", "vertex-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-tooltip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Tooltip);
+      }
+      break;
+    case "vertex-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Tooltip as T, defineCustomElement as d };

package/dist/components/tslib.es6.js

@@ -0,0 +1,65 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __read(o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+export { __assign as _, __extends as a, __read as b };

package/dist/components/vertex-auto-resize-textarea.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VertexAutoResizeTextarea extends Components.VertexAutoResizeTextarea, HTMLElement {}
+export const VertexAutoResizeTextarea: {
+  prototype: VertexAutoResizeTextarea;
+  new (): VertexAutoResizeTextarea;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/vertex-auto-resize-textarea.js

@@ -0,0 +1,6 @@
+import { A as AutoResizeTextArea, d as defineCustomElement$1 } from './auto-resize-textarea.js';
+
+const VertexAutoResizeTextarea = AutoResizeTextArea;
+const defineCustomElement = defineCustomElement$1;
+
+export { VertexAutoResizeTextarea, defineCustomElement };

package/dist/components/vertex-avatar-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VertexAvatarGroup extends Components.VertexAvatarGroup, HTMLElement {}
+export const VertexAvatarGroup: {
+  prototype: VertexAvatarGroup;
+  new (): VertexAvatarGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/vertex-avatar-group.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const avatarGroupCss = ".root{position:relative}.base{position:absolute;left:0;top:0}.top{position:absolute;left:0.5rem;top:0.5rem}";
+
+const AvatarGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("div", { class: "root" }, h("div", { class: "base" }, h("slot", { name: "base" })), h("div", { class: "top" }, h("slot", null))));
+  }
+  static get style() { return avatarGroupCss; }
+}, [1, "vertex-avatar-group"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-avatar-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-avatar-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AvatarGroup);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexAvatarGroup = AvatarGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { AvatarGroup as A, VertexAvatarGroup, defineCustomElement };

package/dist/components/vertex-avatar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VertexAvatar extends Components.VertexAvatar, HTMLElement {}
+export const VertexAvatar: {
+  prototype: VertexAvatar;
+  new (): VertexAvatar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;