@vertexvis/ui 0.1.0-canary.2 → 0.1.0-canary.20

package/dist/cjs/tabs-ece62a01.js

@@ -0,0 +1,111 @@
+'use strict';
+
+const index = require('./index-6a92256c.js');
+const index$1 = require('./index-e1b40fa6.js');
+const dom = require('./dom-b6c5fbf4.js');
+
+function isTabElement(element) {
+  return element.tagName === 'VERTEX-TAB';
+}
+
+const tabsCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{display:flex;position:relative;width:100%;height:100%}.wrapper{display:flex;flex-direction:column;position:relative;height:100%;width:100%}.labels{display:flex;position:relative;border-bottom:solid 1px var(--vertex-ui-neutral-300)}.indicator{position:absolute;bottom:0;height:3px;background-color:var(--vertex-ui-blue-700);transition:left 0.2s ease-in-out}.label{position:relative;cursor:pointer;color:var(--vertex-ui-neutral-700);white-space:nowrap;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-md);padding:0.75rem 1.25rem}.label:not(.active):hover{color:var(--vertex-ui-neutral-800)}.label.active{color:var(--vertex-ui-blue-700);font-weight:var(--vertex-ui-font-weight-bold)}.hidden-label-text{font-weight:bold;visibility:hidden;height:0px}.tab-content{display:flex;height:5%;flex-grow:1}";
+
+const Tabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectedTabChanged = index.createEvent(this, "selectedTabChanged", 7);
+    this.indicatorInitialized = false;
+    this.handleLabelClick = (label) => {
+      if (this.active != null) {
+        this.updateActiveOnTab(this.active, false);
+      }
+      this.active = label;
+      this.updateActiveOnTab(this.active, true);
+      this.selectedTabChanged.emit(label);
+    };
+    this.updateActiveOnTab = (label, active) => {
+      const activeTab = this.findTabByLabel(label);
+      if (activeTab != null) {
+        activeTab.active = active;
+      }
+    };
+    this.findTabByLabel = (label) => {
+      var _a;
+      const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
+      const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
+      const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
+        ? Array.from(slotAssignedElements[0].children)
+        : undefined;
+      return slotChildren != null
+        ? slotChildren.filter(isTabElement).find((el) => el.label === label)
+        : undefined;
+    };
+    this.updateTabLabels = () => {
+      var _a;
+      const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
+      const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
+      const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
+        ? Array.from(slotAssignedElements[0].children)
+        : undefined;
+      this.labels =
+        slotChildren != null
+          ? slotChildren.filter(isTabElement).map((t) => t.label)
+          : [];
+    };
+    this.active = undefined;
+    this.labels = [];
+    this.activeBounds = undefined;
+    this.activeButtonEl = undefined;
+  }
+  componentWillLoad() {
+    this.updateTabLabels();
+  }
+  componentDidLoad() {
+    if (this.active != null) {
+      this.updateActiveOnTab(this.active, true);
+    }
+    this.indicatorInitialized = false;
+    this.handleActiveButtonChange();
+  }
+  componentDidUpdate() {
+    // Place the indicator if it hasn't been initialized yet
+    if (!this.indicatorInitialized) {
+      this.handleActiveButtonChange();
+    }
+  }
+  handleActiveButtonChange() {
+    const button = this.activeButtonEl;
+    if (button != null) {
+      dom.readDOM(() => {
+        const hostElBounds = dom.getBoundingClientRect(this.hostEl);
+        const activeBounds = dom.getBoundingClientRect(button);
+        this.activeBounds = {
+          x: activeBounds.x - hostElBounds.x,
+          width: activeBounds.width,
+        };
+        if (this.activeBounds.width !== 0) {
+          this.indicatorInitialized = true;
+        }
+      });
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "wrapper" }, index.h("div", { class: "labels" }, this.labels.map((label) => (index.h("button", { class: index$1.classnames('label', {
+        active: this.active === label,
+      }), "data-label": label, ref: (el) => {
+        if (this.active === label) {
+          this.activeButtonEl = el;
+        }
+      }, onClick: () => this.handleLabelClick(label) }, label, index.h("div", { class: "hidden-label-text" }, label)))), index.h("slot", { name: "label-header" }), this.activeBounds && (index.h("div", { class: "indicator", style: {
+        left: `${this.activeBounds.x}px`,
+        width: `${this.activeBounds.width}px`,
+      } }))), index.h("div", { class: "tab-content" }, index.h("slot", { onSlotchange: this.updateTabLabels })))));
+  }
+  get hostEl() { return index.getElement(this); }
+  static get watchers() { return {
+    "activeButtonEl": ["handleActiveButtonChange"]
+  }; }
+};
+Tabs.style = tabsCss;
+
+exports.Tabs = Tabs;

package/dist/cjs/{text-field-0397fb34.js → text-field-bccbde1f.js}

@@ -81,6 +81,7 @@ const TextField = class {
   render() {
     var _a;
     const classes = index$1.classnames('txt-wrapper', {
+      'txt-wrapper-border': !this.multiline,
       'txt-standard': this.variant === 'standard',
       'txt-filled': this.variant === 'filled',
       'txt-underlined': this.variant === 'underlined',

package/dist/cjs/{tooltip-80a7b722.js → tooltip-9ac797a0.js}

@@ -3,6 +3,7 @@
 const index = require('./index-6a92256c.js');
 const tslib_es6 = require('./tslib.es6-838fd860.js');
 const index$1 = require('./index-e1b40fa6.js');
+const dom = require('./dom-b6c5fbf4.js');
 const slots = require('./slots-fb5ac359.js');
 
 /**
@@ -2052,16 +2053,13 @@ var uuid = /*#__PURE__*/Object.freeze({
   toMsbLsb: toMsbLsb
 });
 
-function getBoundingClientRect(el) {
-  return el.getBoundingClientRect();
-}
-
 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);
+    this.pointerEntered = false;
     this.content = undefined;
     this.disabled = undefined;
     this.placement = 'bottom';
@@ -2070,32 +2068,40 @@ const Tooltip = class {
     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 (index.h(index.Host, null, index.h("div", { class: "target", ref: (el) => {
         this.targetElement = el;
       }, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, index.h("slot", null)), index.h("div", { class: "content-hidden", ref: (el) => {
         this.contentElement = el;
-      } }, index.h("slot", { name: "content" }))));
+      } }, index.h("slot", { name: "content", onSlotchange: this.handleContentChange }))));
   }
   addElement() {
-    var _a;
     if (this.targetElement != null) {
       const popover = this.createPopoverElement(this.targetElement);
       const content = this.createContentElement();
-      this.displayedSlottedContent =
-        (_a = slots.getSlottedContent(this.contentElement)) !== null && _a !== void 0 ? _a : this.displayedSlottedContent;
-      if (this.content != null) {
-        content.innerText = this.content;
-      }
-      else if (this.displayedSlottedContent != null) {
-        content.appendChild(this.displayedSlottedContent);
-      }
+      this.updateContentElementChildren(content);
       popover.appendChild(content);
       this.hostElement.ownerDocument.body.appendChild(popover);
     }
@@ -2105,6 +2111,7 @@ const Tooltip = class {
     if (popover != null) {
       popover.remove();
     }
+    this.internalContentElement = undefined;
   }
   createPopoverElement(anchorElement) {
     const popover = this.hostElement.ownerDocument.createElement('vertex-popover');
@@ -2115,29 +2122,54 @@ const Tooltip = class {
     popover.backdrop = false;
     popover.placement = this.placement;
     popover.animated = this.animated;
-    popover.anchorBounds = getBoundingClientRect(anchorElement);
+    popover.anchorBounds = dom.getBoundingClientRect(anchorElement);
     return popover;
   }
   createContentElement() {
-    const content = this.hostElement.ownerDocument.createElement('div');
-    content.setAttribute('class', index$1.classnames('vertex-tooltip-content', {
+    this.internalContentElement =
+      this.hostElement.ownerDocument.createElement('div');
+    this.internalContentElement.setAttribute('class', index$1.classnames('vertex-tooltip-content', {
       hidden: !this.open || this.disabled,
     }));
-    return content;
+    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.openTimeout = setTimeout(() => {
-        this.open = true;
-        this.openTimeout = undefined;
-        this.addElement();
-      }, this.delay);
+      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) {
@@ -2146,6 +2178,10 @@ const Tooltip = class {
     }
   }
   get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "content": ["handleContentChange"],
+    "disabled": ["handleDisabledChange"]
+  }; }
 };
 Tooltip.style = tooltipCss;
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const colorCirclePicker = require('./color-circle-picker-13396ec4.js');
+const colorCirclePicker = require('./color-circle-picker-a8f9a80a.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

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

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const colorPicker = require('./color-picker-876ace00.js');
+const colorPicker = require('./color-picker-2a4820fa.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
+require('./lib-1bd1e383.js');
 
 
 

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const colorSwatch = require('./color-swatch-8aaf6c0b.js');
+require('./index-6a92256c.js');
+require('./index-e1b40fa6.js');
+require('./lib-1bd1e383.js');
+
+
+
+exports.vertex_color_swatch = colorSwatch.ColorSwatch;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const dialog = require('./dialog-88e2308a.js');
+const dialog = require('./dialog-34f1dd6e.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

package/dist/cjs/vertex-icon-button.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const iconButton = require('./icon-button-786427d6.js');
+const iconButton = require('./icon-button-10617d04.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-ba408f49.js');
+require('./icon-helper-e02da963.js');
 
 
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const icon = require('./icon-460fd0f5.js');
+const icon = require('./icon-2a64c9ca.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-ba408f49.js');
+require('./icon-helper-e02da963.js');
 
 
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const popover = require('./popover-d9ec8e10.js');
+const popover = require('./popover-942209b8.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

package/dist/cjs/vertex-result-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const resultList = require('./result-list-1e592c3c.js');
+const resultList = require('./result-list-241ffe8d.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 require('./templates-e7b3ffbb.js');

package/dist/cjs/vertex-search-bar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const searchBar = require('./search-bar-bb40cfa7.js');
+const searchBar = require('./search-bar-2e7ee35a.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 require('./templates-e7b3ffbb.js');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const select = require('./select-0eb7203f.js');
+const select = require('./select-2b2bdb97.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

package/dist/cjs/{vertex-color-circle.cjs.entry.js → vertex-tab.cjs.entry.js}

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const colorCircle = require('./color-circle-05be54bf.js');
+const tab = require('./tab-4335cd8f.js');
 require('./index-6a92256c.js');
+require('./index-e1b40fa6.js');
 
 
 
-exports.vertex_color_circle = colorCircle.ColorCircle;
+exports.vertex_tab = tab.Tab;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const tabs = require('./tabs-ece62a01.js');
+require('./index-6a92256c.js');
+require('./index-e1b40fa6.js');
+require('./dom-b6c5fbf4.js');
+
+
+
+exports.vertex_tabs = tabs.Tabs;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const textField = require('./text-field-0397fb34.js');
+const textField = require('./text-field-bccbde1f.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const tooltip = require('./tooltip-80a7b722.js');
+const tooltip = require('./tooltip-9ac797a0.js');
 require('./index-6a92256c.js');
 require('./tslib.es6-838fd860.js');
 require('./index-e1b40fa6.js');
+require('./dom-b6c5fbf4.js');
 require('./slots-fb5ac359.js');
 
 

package/dist/collection/collection-manifest.json

@@ -7,12 +7,13 @@
     "./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/popover/popover.js",
     "./components/expandable/expandable.js",
     "./components/icon-button/icon-button.js",
     "./components/radio/radio.js",
     "./components/resizable/resizable.js",
-    "./components/result-list/result-list.js",
     "./components/search-bar/search-bar.js",
     "./components/slider/slider.js",
     "./components/spinner/spinner.js",
@@ -23,8 +24,6 @@
     "./components/card-group/card-group.js",
     "./components/click-to-edit-text-field/click-to-edit-text-field.js",
     "./components/collapsible/collapsible.js",
-    "./components/color-circle/color-circle.js",
-    "./components/color-picker/color-picker.js",
     "./components/context-menu/context-menu.js",
     "./components/dialog/dialog.js",
     "./components/draggable-popover/draggable-popover.js",
@@ -36,7 +35,10 @@
     "./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"
   ],
   "compiler": {

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

@@ -52,7 +52,7 @@ export class ColorCirclePicker {
   render() {
     return (h(Host, null, h("div", { class: classNames('container', {
         vertical: this.direction === 'vertical',
-      }) }, this.colorArray.map((c, i) => (h("vertex-color-circle", { class: classNames('circle', {
+      }) }, this.colorArray.map((c, i) => (h("vertex-color-swatch", { class: classNames('circle', {
         selected: this.selected === c,
       }), color: c, supplementalColor: this.supplementaryColorArray[i], onClick: this.handleClick, lightenPercentage: this.lightenPercentage, darkenPercentage: this.darkenPercentage, theme: this.theme }))))));
   }
@@ -82,7 +82,7 @@ export class ColorCirclePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The colors to show in this `vertex-color-circle-picker`.\nThese values will map to the `color` property of the underlying\n`vertex-color-circle`."
+          "text": "The colors to show in this `vertex-color-circle-picker`.\nThese values will map to the `color` property of the underlying\n`vertex-color-swatch`."
         },
         "attribute": "colors",
         "reflect": false,
@@ -100,7 +100,7 @@ export class ColorCirclePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Optional supplemental colors that will be provided to the\nunderlying `vertex-color-circle` elements for associated\nindices in the `colors` array."
+          "text": "Optional supplemental colors that will be provided to the\nunderlying `vertex-color-swatch` elements for associated\nindices in the `colors` array."
         },
         "attribute": "supplemental-colors",
         "reflect": false,
@@ -118,7 +118,7 @@ export class ColorCirclePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The theme to use for this `vertex-color-circle-picker`.\nCan be either `light` or `dark`, and defaults to `dark`.\n\nWith the `dark` theme, the provided `colors` will be used\nas the background-colors for `vertex-color-circle` elements,\nand a `darkened` color will be used for the border-colors.\n\nWith the `light` theme, the provided `colors` will be used\nas the background-colors for `vertex-color-circle` elements,\nand a `lightened` color will be used for the border-colors."
+          "text": "The theme to use for this `vertex-color-circle-picker`.\nCan be either `light` or `dark`, and defaults to `dark`.\n\nWith the `dark` theme, the provided `colors` will be used\nas the background-colors for `vertex-color-swatch` elements,\nand a `darkened` color will be used for the border-colors.\n\nWith the `light` theme, the provided `colors` will be used\nas the background-colors for `vertex-color-swatch` elements,\nand a `lightened` color will be used for the border-colors."
         },
         "attribute": "theme",
         "reflect": true,
@@ -136,7 +136,7 @@ export class ColorCirclePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The percentage lighter color to use to compute the `lightened`\ncolor for the underlying `vertex-color-circle`. This will be\nused when the `theme` is set to `light`."
+          "text": "The percentage lighter color to use to compute the `lightened`\ncolor for the underlying `vertex-color-swatch`. This will be\nused when the `theme` is set to `light`."
         },
         "attribute": "lighten-percentage",
         "reflect": false,
@@ -154,7 +154,7 @@ export class ColorCirclePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The percentage darker color to use to compute the `darkened`\ncolor for the underlying `vertex-color-circle`. This will be\nused when the `theme` is set to `dark`."
+          "text": "The percentage darker color to use to compute the `darkened`\ncolor for the underlying `vertex-color-swatch`. This will be\nused when the `theme` is set to `dark`."
         },
         "attribute": "darken-percentage",
         "reflect": false,
@@ -172,7 +172,7 @@ export class ColorCirclePicker {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "An optional selected color. This will also be updated internally\nby the component when individual `vertex-color-circle` elements\nare clicked."
+          "text": "An optional selected color. This will also be updated internally\nby the component when individual `vertex-color-swatch` elements\nare clicked."
         },
         "attribute": "selected",
         "reflect": true