@vertexvis/ui 0.0.11-canary.6 → 0.0.11

package/README.template.md

@@ -40,4 +40,14 @@ async function main() {
 defineCustomElements(window).then(() => main());
 ```
 
-[web components]: https://developer.mozilla.org/en-US/docs/Web/Web_Components
+### Local development
+
+For local development, we use story book to see your components and make changes. After following the initial setup in the root of this project, in this module you are able to run the following commands:
+```
+yarn build
+yarn start
+```
+
+In your browser storybook should open up to `http://localhost:6006`
+
+[web components]: https://developer.mozilla.org/en-US/docs/Web/Web_Components

package/dist/cjs/auto-resize-textarea-6f700406.js

@@ -0,0 +1,151 @@
+'use strict';
+
+const index = require('./index-4281b6d5.js');
+
+function getFirstSlottedElement({ hostElement, slotName, selector, }) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  if (selector != null) {
+    return ((_c = (_b = (_a = hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selector)) !== null && _b !== void 0 ? _b : hostElement.querySelector(selector)) !== null && _c !== void 0 ? _c : undefined);
+  }
+  else {
+    const slotted = (_e = (_d = hostElement.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector(slotName != null ? `slot[name="${slotName}"]` : 'slot')) !== null && _e !== void 0 ? _e : undefined;
+    if ((_g = (_f = slotted === null || slotted === void 0 ? void 0 : slotted.assignedElements) === null || _f === void 0 ? void 0 : _f.call(slotted).length) !== null && _g !== void 0 ? _g : 0 > 0) {
+      return slotted === null || slotted === void 0 ? void 0 : slotted.assignedElements()[0];
+    }
+  }
+}
+
+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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The minimum number of rows that the textarea will be constrained to.
+     *
+     * Defaults to `1`.
+     */
+    this.minRows = 1;
+    this.previousScrollTop = 0;
+    this.rowCount = 0;
+    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.prepareHiddenTextElement();
+    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 (index.h(index.Host, null, index.h("textarea", { class: "hidden-text", ref: (el) => {
+        this.hiddenTextRef = el;
+      } }, this.textValue), index.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();
+    index.readTask(() => {
+      var _a;
+      if (typeof window !== 'undefined' &&
+        this.slottedElement != null &&
+        this.hiddenTextRef != null) {
+        const bounds = this.slottedElement.getBoundingClientRect();
+        const computedStyles = window.getComputedStyle(this.slottedElement);
+        const lineHeight = Math.floor(parseFloat(computedStyles.lineHeight));
+        const rowCount = Math.floor(this.hiddenTextRef.scrollHeight / lineHeight);
+        const colCount = Math.ceil(this.hiddenTextRef.scrollWidth / bounds.width);
+        const totalRows = Math.max(0, rowCount + colCount - 1);
+        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() {
+    index.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 index.getElement(this); }
+};
+AutoResizeTextArea.style = autoResizeTextareaCss;
+
+exports.AutoResizeTextArea = AutoResizeTextArea;

package/dist/cjs/{avatar-6c7b9b0d.js → avatar-1a0305f3.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-686e5bc4.js');
+const index = require('./index-4281b6d5.js');
 const index$1 = require('./index-b9715722.js');
 
 const avatarCss = ".root{width:1.875rem;height:1.875rem;font-size:var(--vertex-ui-text-xs)}.small{width:1.5rem;height:1.5rem;font-size:var(--vertex-ui-text-t)}.avatar{border-radius:50%;font-weight:var(--vertex-ui-font-weight-medium);font-family:var(--vertex-ui-font-family);color:var(--vertex-ui-blue-800);border:solid 1px var(--vertex-ui-blue-800);background-color:var(--vertex-ui-neutral-050);display:flex;align-items:center;justify-content:center;user-select:none}.avatar.value{color:var(--vertex-ui-white);border:solid 1px var(--vertex-ui-white);background-color:var(--vertex-ui-neutral-500)}.avatar.active{cursor:pointer}.avatar.active:hover{background-color:var(--vertex-ui-neutral-200)}";

package/dist/cjs/{avatar-group-b8e45ba3.js → avatar-group-3e79ca71.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-686e5bc4.js');
+const index = require('./index-4281b6d5.js');
 
 const avatarGroupCss = ".root{position:relative}.base{position:absolute;left:0;top:0}.top{position:absolute;left:0.5rem;top:0.5rem}";
 

package/dist/cjs/button-771ea5bc.js

@@ -0,0 +1,85 @@
+'use strict';
+
+const index = require('./index-4281b6d5.js');
+const index$1 = require('./index-b9715722.js');
+
+const buttonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}a{text-decoration:none;font-family:var(--vertex-ui-font-family)}:host([type]){-webkit-appearance:none !important}.btn{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;box-sizing:border-box;text-decoration:none;cursor:pointer}.btn-full{width:100%}.btn.disabled,.btn:not(.disabled):focus,.btn:not(.disabled):active{outline:none}.btn.disabled{cursor:not-allowed}.btn-sm{font-size:var(--vertex-ui-text-sm)}.btn-sm:not(.btn-plaintext){padding:0 0.25rem}.btn-md{font-size:var(--vertex-ui-text-base)}.btn-md:not(.btn-plaintext){padding:0.5rem 1rem}.btn-lg{font-size:var(--vertex-ui-text-lg)}.btn-lg:not(.btn-plaintext){padding:0.75rem 0.75rem}.btn-plaintext{color:var(--vertex-ui-neutral-800)}.btn-primary{color:white;background-color:var(--vertex-ui-blue-700)}.btn-primary:not(.disabled):hover{background-color:var(--vertex-ui-blue-500)}.btn-primary:not(.disabled):focus,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-primary:not(.disabled):active{box-shadow:none}.btn-primary.disabled{background-color:var(--vertex-ui-blue-200);cursor:not-allowed}.btn-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%)}.btn-secondary:not(.disabled):focus,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-secondary:not(.disabled):active{box-shadow:none}.btn-secondary.disabled{background-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-400)}.btn-danger{color:white;background-color:var(--vertex-ui-red-600)}.btn-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-400)}.btn-danger:not(.disabled):focus{background-color:var(--vertex-ui-red-500);box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-danger:not(.disabled):active{background-color:var(--vertex-ui-red-600);box-shadow:none}.btn-danger.disabled{background-color:var(--vertex-ui-red-200);box-shadow:none}.btn-txt-primary{color:var(--vertex-ui-blue-600)}.btn-txt-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-txt-primary:not(.disabled):focus,.btn-txt-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-txt-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-txt-primary:not(.disabled):active{box-shadow:none}.btn-txt-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-txt-secondary{color:var(--vertex-ui-neutral-700)}.btn-txt-secondary:not(.disabled):hover,.btn-txt-secondary:not(.disabled):active,.btn-txt-secondary:not(.disabled):focus{color:var(--vertex-ui-neutral-800)}.btn-txt-secondary:not(.disabled):hover{background-color:var(--vertex-ui-neutral-200)}.btn-txt-secondary:not(.disabled):focus,.btn-txt-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-300)}.btn-txt-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-txt-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-txt-danger{color:var(--vertex-ui-red-600)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active,.btn-txt-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-txt-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-txt-danger:not(.disabled):active{box-shadow:none}.btn-txt-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}";
+
+const Button = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The color of this <vertex-button>.
+     * Can be "primary", "secondary", or "danger" and defaults to "secondary".
+     */
+    this.color = 'secondary';
+    /**
+     * The variant of this <vertex-button>.
+     * Can be "solid", "text", or "plaintext" and defaults to "solid".
+     *
+     * Setting this value to "plaintext" will cause the "color"
+     * property to be ignored.
+     */
+    this.variant = 'solid';
+    /**
+     * The size of this <vertex-button>.
+     * Can be "sm", "md", or "lg" and defaults to "md".
+     */
+    this.size = 'md';
+    /**
+     * The expansion behavior of this <vertex-button>.
+     * Can be set to "full" to cause the button to stretch to fill
+     * its container, or "block" to cause the button to be sized based
+     * on its contents.
+     * Defaults to "block".
+     */
+    this.expand = 'block';
+  }
+  connectedCallback() {
+    if (this.hostElement != null && this.type === 'submit') {
+      const form = this.hostElement.closest('form');
+      if (form != null) {
+        this.fakeButton = document.createElement('button');
+        this.fakeButton.setAttribute('type', this.type);
+        this.fakeButton.setAttribute('style', 'display: none');
+        this.fakeButton.setAttribute('data-testid', 'vertex-fake-button');
+        form.appendChild(this.fakeButton);
+      }
+    }
+  }
+  disconnectedCallback() {
+    if (this.hostElement != null && this.fakeButton != null) {
+      this.fakeButton.remove();
+    }
+  }
+  render() {
+    const classes = index$1.classnames('btn', {
+      'btn-full': this.expand === 'full',
+      'btn-sm': this.size === 'sm',
+      'btn-md': this.size === 'md',
+      'btn-lg': this.size === 'lg',
+      'btn-primary': this.color === 'primary' && this.variant === 'solid',
+      'btn-secondary': this.color === 'secondary' && this.variant === 'solid',
+      'btn-danger': this.color === 'danger' && this.variant === 'solid',
+      'btn-txt-primary': this.color === 'primary' && this.variant === 'text',
+      'btn-txt-secondary': this.color === 'secondary' && this.variant === 'text',
+      'btn-txt-danger': this.color === 'danger' && this.variant === 'text',
+      'btn-plaintext': this.variant === 'plaintext',
+      disabled: this.disabled,
+    });
+    if (this.href != null && this.type != null) {
+      console.warn('The type attribute is ignored when href is provided');
+    }
+    return this.href != null && this.href !== '' ? (index.h("a", { href: this.href, target: this.target, class: classes, tabIndex: this.disabled ? -1 : 0 }, index.h("slot", null))) : (index.h("button", { class: classes, disabled: this.disabled, type: this.type, onClick: (event) => this.handleClick(event) }, index.h("slot", { name: "left" }), index.h("slot", null)));
+  }
+  handleClick(event) {
+    if (this.fakeButton != null) {
+      event.preventDefault();
+      this.fakeButton.click();
+    }
+  }
+  get hostElement() { return index.getElement(this); }
+};
+Button.style = buttonCss;
+
+exports.Button = Button;

package/dist/cjs/card-2bccb1e2.js

@@ -0,0 +1,38 @@
+'use strict';
+
+const index = require('./index-4281b6d5.js');
+
+const cardCss = ":host{width:100%;height:100%;display:flex;position:relative;--border:1px solid var(--vertex-ui-neutral-200)}.content{display:flex;flex-direction:column;width:100%;height:100%;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);color:var(--vertex-ui-neutral-800);border:var(--border)}.header{display:flex;align-items:center;padding:0.5rem 0.5rem 0 0.5rem}.header-text{display:flex;flex-direction:column}.text{padding:0.75rem 0.5rem 0.75rem 1rem;color:var(--vertex-ui-neutral-700);white-space:pre-line}.avatar{padding-left:0.25rem;padding-right:0.75rem}.label slot::slotted(*){font-weight:var(--vertex-ui-font-weight-bold)}.timestamp slot::slotted(*){padding-top:0.125rem;font-size:var(--vertex-ui-text-sm);color:var(--vertex-ui-neutral-500)}.action{margin-left:auto;margin-bottom:auto}.actions *::slotted(*){display:flex;justify-content:flex-end;padding:0 0.5rem 0.5rem 0.5rem}";
+
+const Card = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.contentClick = index.createEvent(this, "contentClick", 7);
+    /**
+     * The visual mode of this `Card`. Can be either
+     * `editing` or `display`, and defaults to `display`.
+     *
+     * Setting this to `editing` will stop propagation of
+     * clicks on on the default slotted elements to allow
+     * for clicking in an input.
+     */
+    this.mode = 'display';
+    this.handleContentClick = (event) => {
+      this.contentClick.emit(event);
+    };
+    this.handleTextClick = (event) => {
+      if (this.mode === 'edit') {
+        event.stopImmediatePropagation();
+      }
+      else {
+        this.contentClick.emit(event);
+      }
+    };
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "content" }, index.h("div", { class: "header", onClick: this.handleContentClick }, index.h("div", { class: "avatar" }, index.h("slot", { name: "avatar" })), index.h("div", { class: "header-text" }, index.h("div", { class: "label" }, index.h("slot", { name: "label" })), index.h("div", { class: "timestamp" }, index.h("slot", { name: "timestamp" }))), index.h("div", { class: "action" }, index.h("slot", { name: "action" }))), index.h("div", { class: "text", onClick: this.handleTextClick }, index.h("slot", null)), index.h("div", { class: "actions" }, index.h("slot", { name: "actions" }))), index.h("slot", { name: "overlay" })));
+  }
+};
+Card.style = cardCss;
+
+exports.Card = Card;

package/dist/cjs/card-group-268041cb.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const index = require('./index-4281b6d5.js');
+const index$1 = require('./index-b9715722.js');
+
+const cardGroupCss = ":host{width:100%;height:100%;position:relative;display:inline-block;--selected-color:var(--vertex-ui-blue-700)}.root{position:relative}.root.selected,.root:hover{box-shadow:0 2px 4px rgba(0, 0, 0, 0.25)}.content{cursor:pointer}.selected::after{content:\" \";position:absolute;width:0.1875rem;height:100%;left:0;top:0;background-color:var(--selected-color)}.expand-target{font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);color:var(--vertex-ui-neutral-700);cursor:pointer}.expand-target slot::slotted(*){padding:0.5rem 0.5rem 0.5rem 0.75rem}.hidden{display:none}";
+
+const CardGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Whether this card should be displayed with a selected state.
+     */
+    this.selected = false;
+    /**
+     * Whether this card's expandable content is expanded or not.
+     */
+    this.expanded = false;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: index$1.classnames('root', {
+        selected: this.selected,
+      }) }, index.h("div", { class: "content" }, index.h("slot", { name: "primary" })), index.h("div", { class: index$1.classnames({
+        hidden: !this.selected,
+      }) }, index.h("slot", null), index.h("div", { "data-testid": "expanded-content-wrapper", class: index$1.classnames({
+        hidden: !this.expanded,
+      }) }, index.h("slot", { name: "expanded-content" })), index.h("div", { "data-testid": "expanded-target-wrapper", class: index$1.classnames({
+        hidden: this.expanded,
+      }) }, index.h("div", { class: "expand-target" }, index.h("slot", { name: "expand-target" })))), index.h("div", { class: "action" }, index.h("slot", { name: "action" }))), index.h("slot", { name: "overlay" })));
+  }
+};
+CardGroup.style = cardGroupCss;
+
+exports.CardGroup = CardGroup;

package/dist/cjs/chip-63de5487.js

@@ -0,0 +1,33 @@
+'use strict';
+
+const index = require('./index-4281b6d5.js');
+const index$1 = require('./index-b9715722.js');
+
+const chipCss = ".root{display:flex;align-items:center;width:fit-content;border-radius:16px;font-size:var(--vertex-ui-text-base);padding:0.5rem;padding-left:0.25rem;max-height:1rem}.filled{color:white}.chip-primary{color:white}.chip-secondary{color:var(--vertex-ui-neutral-800)}.filled.chip-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.filled.chip-primary{background-color:var(--vertex-ui-blue-700)}.outlined.chip-primary{border:1px solid var(--vertex-ui-blue-700);color:var(--vertex-ui-blue-700)}.outlined.chip-secondary{border:1px solid var(--vertex-ui-neutral-300);color:var(--vertex-ui-neutral-700)}.avatar{margin-right:0.25rem}";
+
+const Chip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The variant of this <vertex-chip>.
+     * Can be "filled" or "outlined" and defaults to "filled".
+     */
+    this.variant = 'filled';
+    /**
+     * The color of this <vertex-chip>.
+     * Can be "primary" or "secondary" and defaults to "secondary".
+     */
+    this.color = 'secondary';
+  }
+  render() {
+    return (index.h("div", { class: index$1.classnames('root', {
+        filled: this.variant === 'filled',
+        outlined: this.variant === 'outlined',
+        'chip-primary': this.color === 'primary',
+        'chip-secondary': this.color === 'secondary',
+      }) }, index.h("div", { class: "avatar" }, index.h("slot", { name: "avatar" })), index.h("slot", null), index.h("slot", { name: "icon" })));
+  }
+};
+Chip.style = chipCss;
+
+exports.Chip = Chip;

package/dist/cjs/{click-to-edit-text-field-1052edd3.js → click-to-edit-text-field-57f9ad64.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-686e5bc4.js');
+const index = require('./index-4281b6d5.js');
 
 const ClickToEditTextField = class {
   constructor(hostRef) {

package/dist/cjs/collapsible-fca4d66d.js

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

package/dist/cjs/{color-picker-277978d9.js → color-picker-6954e944.js}

@@ -1,14 +1,19 @@
 'use strict';
 
-const index = require('./index-686e5bc4.js');
+const index = require('./index-4281b6d5.js');
+const index$1 = require('./index-b9715722.js');
 
-const colorPickerCss = ":host{--selected-color-width:30px;--selected-color-height:30px}.color-picker{display:inline-flex;position:relative;background:var(--vertex-ui-neutral-200);border-radius:4px;cursor:pointer}.selected{height:var(--selected-color-height);width:var(--selected-color-width);box-sizing:content-box;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.handle{display:flex;align-items:center;padding:0 3px}.input{position:absolute;height:0;width:100%;left:0;bottom:0;visibility:hidden}";
+const colorPickerCss = ":host{--selected-color-width:30px;--selected-color-height:30px}.color-picker{display:inline-flex;position:relative;background:var(--vertex-ui-neutral-200);border-radius:4px;cursor:pointer}.color-picker.disabled{opacity:0.5;cursor:default}.selected{height:var(--selected-color-height);width:var(--selected-color-width);box-sizing:content-box;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.handle{display:flex;align-items:center;padding:0 3px}.input{position:absolute;height:0;width:100%;left:0;bottom:0;visibility:hidden}";
 
 const ColorPicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.valueInput = index.createEvent(this, "valueInput", 7);
     this.valueChanged = index.createEvent(this, "valueChanged", 7);
+    /**
+     * Whether this color picker is disabled.
+     */
+    this.disabled = false;
     this.handleInput = (event) => {
       const input = event.target;
       this.value = input.value || '';
@@ -21,7 +26,7 @@ const ColorPicker = class {
     this.valueInput.emit(this.value);
   }
   render() {
-    return (index.h(index.Host, null, index.h("label", { class: "color-picker" }, index.h("input", { type: "color", class: "input", "data-testid": "input", value: this.value, onInput: this.handleInput, onChange: this.handleChange }), index.h("div", { class: "selected", style: {
+    return (index.h(index.Host, null, index.h("label", { class: index$1.classnames('color-picker', { disabled: this.disabled }) }, index.h("input", { type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), index.h("div", { class: "selected", style: {
         'background-color': this.value,
       }, title: this.value }), index.h("div", { class: "handle" }, index.h("vertex-icon", { name: "chevron-down", size: "sm" })))));
   }

package/dist/cjs/components.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-686e5bc4.js');
+const index = require('./index-4281b6d5.js');
 
 /*
  Stencil Client Patch Browser v2.5.2 | MIT Licensed | https://stenciljs.com
@@ -65,5 +65,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["vertex-card-group.cjs",[[1,"vertex-card-group",{"selected":[1540],"expanded":[1540]}]]],["vertex-context-menu.cjs",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dropdown-menu.cjs",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-select.cjs",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-click-to-edit-textfield.cjs",[[2,"vertex-click-to-edit-textfield",{"placeholder":[1],"disabled":[516],"value":[1032],"autoFocus":[4,"auto-focus"]}]]],["vertex-color-picker.cjs",[[1,"vertex-color-picker",{"value":[1537]}]]],["vertex-dialog.cjs",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4]},[[4,"keydown","keyDownListener"]]]]],["vertex-toggle.cjs",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-tooltip.cjs",[[1,"vertex-tooltip",{"content":[1],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-avatar.cjs",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group.cjs",[[1,"vertex-avatar-group"]]],["vertex-button.cjs",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card.cjs",[[1,"vertex-card"]]],["vertex-logo-loading.cjs",[[1,"vertex-logo-loading"]]],["vertex-menu-divider.cjs",[[1,"vertex-menu-divider"]]],["vertex-menu-item.cjs",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio.cjs",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group.cjs",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable.cjs",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-spinner.cjs",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-collapsible.cjs",[[1,"vertex-collapsible",{"label":[1],"open":[1540],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-icon-button.cjs",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconSize":[1,"icon-size"]}]]],["vertex-textfield.cjs",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"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]}]]],["vertex-menu.cjs",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"position":[1040]}]]],["vertex-icon.cjs",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-popover.cjs",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"resizeBehavior":[1,"resize-behavior"]}]]]], options);
+  return index.bootstrapLazy([["vertex-collapsible.cjs",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-click-to-edit-textfield.cjs",[[2,"vertex-click-to-edit-textfield",{"placeholder":[1],"disabled":[516],"value":[1032],"autoFocus":[4,"auto-focus"]}]]],["vertex-context-menu.cjs",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-draggable-popover.cjs",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu.cjs",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip.cjs",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar.cjs",[[6,"vertex-search-bar",{"variant":[1],"resultItems":[16],"triggerCharacters":[16],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"debounce":[2],"placement":[1],"cursorPosition":[32],"open":[32],"triggerKey":[32],"triggerRange":[32],"replaceTriggeredValue":[64],"getEditableContent":[64]}]]],["vertex-select.cjs",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-toast.cjs",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-picker.cjs",[[1,"vertex-color-picker",{"value":[1537],"disabled":[4]}]]],["vertex-dialog.cjs",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4]},[[4,"keydown","keyDownListener"]]]]],["vertex-toggle.cjs",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-tooltip.cjs",[[1,"vertex-tooltip",{"content":[1],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-avatar.cjs",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group.cjs",[[1,"vertex-avatar-group"]]],["vertex-button.cjs",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card.cjs",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group.cjs",[[1,"vertex-card-group",{"selected":[516],"expanded":[516]}]]],["vertex-chip.cjs",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading.cjs",[[1,"vertex-logo-loading"]]],["vertex-menu-divider.cjs",[[1,"vertex-menu-divider"]]],["vertex-menu-item.cjs",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio.cjs",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group.cjs",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable.cjs",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-slider.cjs",[[1,"vertex-slider",{"min":[2],"max":[2],"step":[8],"value":[1026],"disabled":[4]}]]],["vertex-spinner.cjs",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-expandable.cjs",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list.cjs",[[1,"vertex-result-list",{"items":[16],"itemsJson":[1,"items"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"resultHeight":[1026,"result-height"],"overScanCount":[2,"over-scan-count"],"placement":[1],"position":[1],"open":[4],"listHeight":[32],"parsedResults":[32],"scrollTop":[32],"lastStartIndex":[32],"lastFocusedIndex":[32],"stateMap":[32]}]]],["vertex-auto-resize-textarea.cjs",[[1,"vertex-auto-resize-textarea",{"textareaSelector":[1,"textarea-selector"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-textfield.cjs",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"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]}]]],["vertex-menu.cjs",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"position":[1040]}]]],["vertex-icon-button.cjs",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon.cjs",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-popover.cjs",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16]}]]]], options);
 });

package/dist/cjs/{context-menu-214891e9.js → context-menu-56ac1c58.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-686e5bc4.js');
+const index = require('./index-4281b6d5.js');
 
 const ContextMenu = class {
   constructor(hostRef) {

package/dist/cjs/{dialog-0e0d74df.js → dialog-401b43d0.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-686e5bc4.js');
+const index = require('./index-4281b6d5.js');
 const index$1 = require('./index-b9715722.js');
 
 const dialogCss = ":host{--min-width:21.875rem}.hidden>.dialog{opacity:0;width:0;height:0;visibility:hidden}.hidden{pointer-events:none;display:none}.close{margin-left:auto}.header{width:100%;display:flex;font-size:1.125rem;height:2rem;margin-bottom:1rem}.dialog-backdrop{position:fixed;z-index:var(--vertex-ui-dialog-layer);left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.4)}.dialog{background-color:var(--vertex-ui-white);position:absolute;align-items:center;color:var(--vertex-ui-neutral-800);font-family:var(--vertex-ui-font-family)}.overlay{top:50%;left:50%;transform:translate(-50%, -50%);border:1px solid var(--vertex-ui-neutral-300);border-radius:6px;min-width:var(--min-width);box-shadow:0 1px 2px rgba(0, 0, 0, 0.15)}.fullscreen{height:100vh;width:100vw}.contents{padding:1.5rem}.close:hover,.close:focus{color:black;text-decoration:none;cursor:pointer}.footer{display:flex}";

package/dist/cjs/draggable-popover-9713af9a.js

@@ -0,0 +1,84 @@
+'use strict';
+
+const index = require('./index-4281b6d5.js');
+const index$1 = require('./index-b9715722.js');
+
+const draggablePopoverCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{position:fixed;top:0;left:0;white-space:nowrap;--background-color:var(--vertex-ui-white);--color:var(--vertex-ui-neutral-700);--font-family:var(--vertex-ui-font-family);--font-size:var(--vertex-ui-text-base);--drag-icon:all-scroll;--dragging-icon:all-scroll}.container{display:flex;column-gap:0.5rem;padding:0.8125rem 0.5625rem 1rem 0.625rem;background-color:var(--background-color);opacity:0.95;border-radius:0.5rem;box-shadow:0 0 5px rgba(0, 0, 0, 0.25);color:var(--color);font-family:var(--font-family);font-size:var(--font-size)}.container:not(.dragging) .icon{cursor:var(--drag-icon)}.container.dragging{cursor:var(--dragging-icon)}.container.dragging *{user-select:none}.icon-container{display:flex;flex-direction:column}.icon-button{display:flex;align-items:center}";
+
+const DraggablePopover = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.anchorPosition = { x: 0, y: 0 };
+    this.lastPosition = { x: 0, y: 0 };
+    this.dragging = false;
+    this.handlePointerDown = (event) => {
+      this.updateAnchorPosition();
+      this.lastPosition = { x: event.clientX, y: event.clientY };
+      this.dragging = true;
+      window.addEventListener('pointermove', this.handlePointerMove);
+      window.addEventListener('pointerup', this.handlePointerUp);
+    };
+    this.handlePointerMove = (event) => {
+      const currentPosition = {
+        x: event.clientX,
+        y: event.clientY,
+      };
+      const deltaX = currentPosition.x - this.lastPosition.x;
+      const deltaY = currentPosition.y - this.lastPosition.y;
+      this.anchorPosition = {
+        x: this.anchorPosition.x + deltaX,
+        y: this.anchorPosition.y + deltaY,
+      };
+      this.lastPosition = currentPosition;
+    };
+    this.handlePointerUp = (event) => {
+      this.updateAnchorPosition();
+      this.lastPosition = this.anchorPosition;
+      this.dragging = false;
+      window.removeEventListener('pointermove', this.handlePointerMove);
+      window.removeEventListener('pointerup', this.handlePointerUp);
+    };
+    this.updateAnchorPosition = () => {
+      index.readTask(() => {
+        if (this.containerEl != null) {
+          const rect = this.containerEl.getBoundingClientRect();
+          this.anchorPosition = { x: rect.x, y: rect.y };
+        }
+      });
+    };
+  }
+  connectedCallback() {
+    this.updatePosition(this.position);
+  }
+  updatePosition(position) {
+    if (position != null) {
+      this.anchorPosition =
+        typeof position === 'object' ? position : JSON.parse(position);
+      this.lastPosition = this.anchorPosition;
+    }
+  }
+  render() {
+    return (index.h("vertex-popover", { position: this.anchorPosition, boundarySelector: this.boundarySelector, backdrop: false, open: true, resizeBehavior: "fixed", overflowBehavior: {
+        options: {
+          altAxis: true,
+          tether: false,
+          padding: this.boundaryPadding,
+        },
+      }, flipBehavior: {
+        enabled: false,
+        options: {
+          flipVariations: false,
+        },
+      } }, index.h("div", { ref: (el) => {
+        this.containerEl = el;
+      }, class: index$1.classnames('container', {
+        dragging: this.dragging,
+      }) }, index.h("div", { class: "icon-container" }, index.h("div", { class: "icon", onPointerDown: this.handlePointerDown }, index.h("slot", { name: "drag-icon" }, index.h("vertex-icon", { size: "sm", name: "drag-indicator" })))), index.h("slot", null))));
+  }
+  static get watchers() { return {
+    "position": ["updatePosition"]
+  }; }
+};
+DraggablePopover.style = draggablePopoverCss;
+
+exports.DraggablePopover = DraggablePopover;

package/dist/cjs/{dropdown-menu-e387d409.js → dropdown-menu-0f605871.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-686e5bc4.js');
+const index = require('./index-4281b6d5.js');
 
 const DropdownMenu = class {
   constructor(hostRef) {