@vertexvis/ui 0.1.1 → 0.1.2-canary.1

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

@@ -0,0 +1,157 @@
+import { proxyCustomElement, HTMLElement, h, Host, readTask } from '@stencil/core/internal/client';
+import { g as getFirstSlottedElement } from './slots.js';
+
+function isTextareaElement(el) {
+  return (el === null || el === void 0 ? void 0 : el.tagName) === 'TEXTAREA';
+}
+
+const autoResizeTextareaCss = ":host{position:relative;width:100%;height:100%;font-size:0}.hidden-text{position:absolute;box-sizing:border-box;top:0;left:0;height:0;width:100%;padding:0;margin:0;border:none;visibility:hidden;pointer-events:none;overflow:hidden}";
+
+const AutoResizeTextArea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.previousScrollTop = 0;
+    this.rowCount = 0;
+    this.textareaSelector = undefined;
+    this.initialValue = undefined;
+    this.minRows = 1;
+    this.maxRows = undefined;
+    this.textValue = undefined;
+    this.prepareHiddenTextElement = this.prepareHiddenTextElement.bind(this);
+    this.updateScrollTop = this.updateScrollTop.bind(this);
+    this.computeRowHeights = this.computeRowHeights.bind(this);
+    this.updateValue = this.updateValue.bind(this);
+    this.updatePreviousScrollTop = this.updatePreviousScrollTop.bind(this);
+    this.updateOverflow = this.updateOverflow.bind(this);
+    this.resizeObserver = new ResizeObserver(this.computeRowHeights);
+  }
+  componentWillLoad() {
+    this.computeRowHeights();
+  }
+  componentDidLoad() {
+    this.slottedElement = this.getSlottedTextareaElement();
+    this.textValue = this.initialValue;
+    this.prepareHiddenTextElement();
+    this.computeRowHeights();
+    if (this.slottedElement != null) {
+      this.resizeObserver.observe(this.slottedElement);
+      this.addEventListener();
+    }
+  }
+  componentDidRender() {
+    // This re-computes the number of rows after a rerender has
+    // rendered the current value to the hidden textarea.
+    this.computeRowHeights();
+  }
+  disconnectedCallback() {
+    this.removeEventListener();
+    this.resizeObserver.disconnect();
+  }
+  render() {
+    return (h(Host, null, h("textarea", { class: "hidden-text", ref: (el) => {
+        this.hiddenTextRef = el;
+      } }, this.textValue), h("slot", null)));
+  }
+  addEventListener() {
+    var _a, _b;
+    (_a = this.slottedElement) === null || _a === void 0 ? void 0 : _a.addEventListener('input', this.updateValue);
+    (_b = this.slottedElement) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.updatePreviousScrollTop);
+  }
+  removeEventListener() {
+    var _a, _b;
+    (_a = this.slottedElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', this.updateValue);
+    (_b = this.slottedElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', this.updatePreviousScrollTop);
+  }
+  updateValue() {
+    if (this.slottedElement != null) {
+      this.textValue = this.slottedElement.value;
+      this.updateOverflow();
+    }
+  }
+  updatePreviousScrollTop() {
+    if (this.slottedElement != null) {
+      this.previousScrollTop = this.slottedElement.scrollTop;
+    }
+  }
+  updateScrollTop() {
+    if (this.slottedElement != null) {
+      // This prevents an issue where the slotted textarea auto-scrolls
+      // to a newline. This is desired behavior if we're capped at the
+      // max rows, but undesired if the component will continue to expand.
+      this.slottedElement.scrollTop =
+        this.maxRows == null || this.rowCount >= this.maxRows
+          ? this.slottedElement.scrollTop
+          : this.previousScrollTop;
+    }
+  }
+  computeRowHeights() {
+    this.updateScrollTop();
+    readTask(() => {
+      var _a;
+      if (typeof window !== 'undefined' &&
+        this.slottedElement != null &&
+        this.hiddenTextRef != null) {
+        const computedStyles = window.getComputedStyle(this.slottedElement);
+        const lineHeight = Math.floor(parseFloat(computedStyles.lineHeight));
+        const totalRows = Math.floor(this.hiddenTextRef.scrollHeight / lineHeight);
+        this.rowCount = Math.max(this.minRows, Math.min((_a = this.maxRows) !== null && _a !== void 0 ? _a : totalRows, totalRows));
+        this.slottedElement.rows = this.rowCount;
+        this.updateOverflow();
+      }
+    });
+  }
+  prepareHiddenTextElement() {
+    readTask(() => {
+      if (typeof window !== 'undefined' &&
+        this.slottedElement != null &&
+        this.hiddenTextRef != null) {
+        const computedStyles = window.getComputedStyle(this.slottedElement);
+        this.hiddenTextRef.setAttribute('style', `line-height: ${computedStyles.lineHeight}; font-size: ${computedStyles.fontSize}; font-family: ${computedStyles.fontFamily}; padding-left: ${computedStyles.paddingLeft}; padding-right: ${computedStyles.paddingRight};`);
+      }
+    });
+  }
+  getSlottedTextareaElement() {
+    const el = getFirstSlottedElement({
+      hostElement: this.hostElement,
+      selector: this.textareaSelector,
+    });
+    if (isTextareaElement(el)) {
+      return el;
+    }
+    else {
+      throw new Error('The vertex-auto-resize-textarea component is only compatible with `HTMLTextAreaElement`s');
+    }
+  }
+  updateOverflow() {
+    var _a;
+    (_a = this.slottedElement) === null || _a === void 0 ? void 0 : _a.setAttribute('style', this.maxRows && this.rowCount >= this.maxRows
+      ? 'overflow-y: auto;'
+      : 'overflow: hidden;');
+  }
+  get hostElement() { return this; }
+  static get style() { return autoResizeTextareaCss; }
+}, [1, "vertex-auto-resize-textarea", {
+    "textareaSelector": [1, "textarea-selector"],
+    "initialValue": [1, "initial-value"],
+    "minRows": [514, "min-rows"],
+    "maxRows": [514, "max-rows"],
+    "textValue": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-auto-resize-textarea"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-auto-resize-textarea":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AutoResizeTextArea);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { AutoResizeTextArea as A, defineCustomElement as d };

package/dist/components/color-swatch.js

@@ -0,0 +1,124 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const hexRegex = /^(#|0x)?([A-Fa-f0-9]{6})$/;
+function isValidHexColor(color) {
+  const match = color != null ? hexRegex.exec(color) : undefined;
+  return match != null && match.length > 0;
+}
+
+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.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.variant = 'circle';
+    this.size = 'md';
+    this.color = '#ffffff';
+    this.supplementalColor = undefined;
+    this.theme = 'none';
+    this.lightenPercentage = 0.25;
+    this.darkenPercentage = 0.25;
+    this.lightened = this.adjustColor(this.color, -this.lightenPercentage);
+    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 (h(Host, null, h("div", { class: classnames('root', this.variant, this.size), style: this.getThemeColors() }, h("div", { class: "overlay" }, h("slot", { 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 (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"],
+    "lightenPercentage": ["handleLightenPercentageChanged"],
+    "darkenPercentage": ["handleDarkenPercentageChanged"]
+  }; }
+  static get style() { return colorSwatchCss; }
+}, [1, "vertex-color-swatch", {
+    "variant": [513],
+    "size": [513],
+    "color": [513],
+    "supplementalColor": [513, "supplemental-color"],
+    "theme": [513],
+    "lightenPercentage": [2, "lighten-percentage"],
+    "darkenPercentage": [2, "darken-percentage"],
+    "lightened": [1537],
+    "darkened": [1537]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-color-swatch"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-color-swatch":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ColorSwatch);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { ColorSwatch as C, defineCustomElement as d, isValidHexColor as i };

package/dist/components/dom.js

@@ -0,0 +1,13 @@
+import { readTask } from '@stencil/core/internal/client';
+
+function readDOM(callback) {
+  readTask(callback);
+}
+function getBoundingClientRect(el) {
+  return el.getBoundingClientRect();
+}
+function blurElement(el) {
+  el.blur();
+}
+
+export { blurElement as b, getBoundingClientRect as g, readDOM as r };

package/dist/components/expandable.js

@@ -0,0 +1,100 @@
+import { proxyCustomElement, HTMLElement, createEvent, readTask, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$1 } from './icon-button.js';
+
+const expandableCss = ":host{display:flex}.content{display:flex;flex-direction:column;transition:height 1s}.icon-container{display:flex;flex-direction:column}.icon-button{display:flex;align-items:center}.expanded-content{overflow:hidden}.expanded-content.animated{transition-property:max-height;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;transform-origin:top}";
+
+const Expandable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.expand = createEvent(this, "expand", 7);
+    this.collapse = createEvent(this, "collapse", 7);
+    this.handleTransitionEnd = () => {
+      this.collapsing = false;
+      this.expanding = false;
+    };
+    this.handleExpand = () => {
+      this.expanded = !this.expanded;
+      if (this.expanded) {
+        this.expanding = true;
+        this.expand.emit();
+      }
+      else {
+        this.collapsing = true;
+        this.collapse.emit();
+      }
+    };
+    this.updateScrollHeight = () => {
+      readTask(() => {
+        var _a;
+        const scrollHeight = (_a = this.expandContainer) === null || _a === void 0 ? void 0 : _a.scrollHeight;
+        if (this.contentScrollHeight !== scrollHeight) {
+          this.contentScrollHeight = scrollHeight;
+        }
+      });
+    };
+    this.getMaxHeight = () => {
+      if (this.expanded) {
+        return `${this.contentScrollHeight}px`;
+      }
+      else if (!this.expanded) {
+        return '0';
+      }
+      return undefined;
+    };
+    this.expanded = false;
+    this.expanding = false;
+    this.collapsing = false;
+    this.controlled = false;
+    this.expandType = 'content';
+    this.animated = true;
+    this.contentScrollHeight = undefined;
+  }
+  componentDidLoad() {
+    this.updateScrollHeight();
+  }
+  componentDidRender() {
+    this.updateScrollHeight();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "content" }, this.expandType === 'content' && h("slot", { name: "header" }), h("div", { class: classnames('expanded-content', {
+        animated: this.animated,
+      }), ref: (el) => {
+        this.expandContainer = el;
+      }, style: {
+        maxHeight: this.getMaxHeight(),
+      }, onTransitionEnd: this.handleTransitionEnd }, this.expandType === 'header' ? (h("slot", { name: "header", onSlotchange: this.updateScrollHeight })) : (h("slot", { onSlotchange: this.updateScrollHeight }))), this.expandType === 'header' && h("slot", null)), !this.controlled ? (h("div", { class: "icon-container", onClick: this.handleExpand }, h("slot", { name: "expand-icon" }, h("vertex-icon-button", { class: "icon-button", variant: "plain", iconSize: "sm", iconName: this.expanded ? 'caret-down' : 'caret-up' })))) : (h("slot", { name: "expand-icon" }))));
+  }
+  static get style() { return expandableCss; }
+}, [1, "vertex-expandable", {
+    "expanded": [1540],
+    "expanding": [1540],
+    "collapsing": [1540],
+    "controlled": [516],
+    "expandType": [513, "expand-type"],
+    "animated": [4],
+    "contentScrollHeight": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-expandable", "vertex-icon-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-expandable":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Expandable);
+      }
+      break;
+    case "vertex-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Expandable as E, defineCustomElement as d };

package/dist/components/icon-button.js

@@ -0,0 +1,63 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { g as getSvg } from './icon-helper.js';
+
+const iconButtonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed;--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900);--icon-margin:0px}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:var(--enabled-cursor)}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;position:relative;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%;margin:var(--icon-margin, 0px)}.badge{position:absolute;top:0px;right:4px;justify-content:flex-end;align-items:flex-end}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:var(--disabled-cursor)}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:var(--disabled-cursor);color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";
+
+const IconButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.iconName = undefined;
+    this.disabled = undefined;
+    this.variant = 'default';
+    this.iconColor = 'default';
+    this.iconSize = 'md';
+  }
+  render() {
+    return (h(Host, { onClick: (e) => this.handleClick(e) }, h("button", { ref: (el) => (this.buttonEl = el), disabled: this.disabled, class: classnames('container', {
+        disabled: this.disabled,
+        floating: this.variant === 'floating',
+        plain: this.variant === 'plain',
+        primary: this.iconColor === 'primary',
+        secondary: this.iconColor === 'secondary',
+      }) }, h("slot", { name: "left" }), h("div", { class: classnames('icon-button', {
+        xs: this.iconSize === 'xs',
+        sm: this.iconSize === 'sm',
+        md: this.iconSize === 'md',
+        lg: this.iconSize === 'lg',
+      }) }, getSvg(this.iconName), h("div", { class: "badge" }, h("slot", { name: "badge" }))), h("slot", null))));
+  }
+  handleClick(event) {
+    var _a;
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.blur();
+  }
+  static get style() { return iconButtonCss; }
+}, [1, "vertex-icon-button", {
+    "iconName": [1, "icon-name"],
+    "disabled": [516],
+    "variant": [1],
+    "iconColor": [1, "icon-color"],
+    "iconSize": [1, "icon-size"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-icon-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-icon-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, IconButton);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { IconButton as I, defineCustomElement as d };