@vertexvis/ui 0.1.1 → 0.1.2-canary.1

package/dist/components/vertex-menu-divider.d.ts

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

package/dist/components/vertex-menu-divider.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const menuDividerCss = ":host{--color:var(--vertex-ui-neutral-300)}.root{margin:0.12em 0;border-top:1px solid var(--color)}";
+
+const MenuDivider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return h("div", { class: "root" });
+  }
+  static get style() { return menuDividerCss; }
+}, [1, "vertex-menu-divider"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-menu-divider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-menu-divider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuDivider);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexMenuDivider = MenuDivider;
+const defineCustomElement = defineCustomElement$1;
+
+export { MenuDivider as M, VertexMenuDivider, defineCustomElement };

package/dist/components/vertex-menu-item.d.ts

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

package/dist/components/vertex-menu-item.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const menuItemCss = ":host{--background-color:var(--vertex-ui-white);--color:var(--vertex-ui-neutral-700);--hover-background-color:var(--vertex-ui-neutral-200)}.root{font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);line-height:1.1;display:flex;align-items:center;color:var(--color);margin:0.075em 0;padding:0.5rem 0.75rem;background-color:var(--background-color);transition:background-color;transition-duration:0.5s;user-select:none}.root:not(.disabled):hover{cursor:pointer;background-color:var(--hover-background-color)}.root.disabled{opacity:0.5}slot[name='icon']::slotted(*){padding-right:0.8125rem}";
+
+const MenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.disabled = false;
+  }
+  render() {
+    return (h("div", { class: classnames('root', {
+        disabled: this.disabled,
+      }), onClick: (e) => {
+        if (this.disabled) {
+          e.stopPropagation();
+        }
+      } }, h("slot", { name: "icon" }), h("slot", null)));
+  }
+  static get style() { return menuItemCss; }
+}, [1, "vertex-menu-item", {
+    "disabled": [516]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-menu-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-menu-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuItem);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexMenuItem = MenuItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { MenuItem as M, VertexMenuItem, defineCustomElement };

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

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

package/dist/components/vertex-menu.js

@@ -0,0 +1,6 @@
+import { M as Menu, d as defineCustomElement$1 } from './menu.js';
+
+const VertexMenu = Menu;
+const defineCustomElement = defineCustomElement$1;
+
+export { VertexMenu, defineCustomElement };

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

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

package/dist/components/vertex-popover.js

@@ -0,0 +1,6 @@
+import { P as Popover, d as defineCustomElement$1 } from './popover.js';
+
+const VertexPopover = Popover;
+const defineCustomElement = defineCustomElement$1;
+
+export { VertexPopover, defineCustomElement };

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

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

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

@@ -0,0 +1,88 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const radioGroupCss = ".radio-group{display:flex;flex-direction:column}";
+
+const RadioGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.name = undefined;
+    this.value = undefined;
+    this.handleListenOnRadioButtonChange =
+      this.handleListenOnRadioButtonChange.bind(this);
+  }
+  updateValue() {
+    if (this.value != null) {
+      this.valueChanged.emit(this.value);
+    }
+  }
+  connectedCallback() {
+    this.getVertexRadioButtons();
+    this.addEventListeners();
+  }
+  disconnectedCallback() {
+    this.removeEventListeners();
+  }
+  render() {
+    return (h("div", { class: "radio-group" }, h("slot", null)));
+  }
+  getVertexRadioButtons() {
+    var _a, _b;
+    this.radioButtons =
+      ((_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('vertex-radio')) || undefined;
+    (_b = this.radioButtons) === null || _b === void 0 ? void 0 : _b.forEach((radio) => {
+      radio.name = this.name;
+      if (this.value === radio.value) {
+        radio.checked = true;
+      }
+    });
+  }
+  removeEventListeners() {
+    var _a;
+    (_a = this.radioButtons) === null || _a === void 0 ? void 0 : _a.forEach((radioButton) => {
+      radioButton.removeEventListener('valueChanged', this.handleListenOnRadioButtonChange);
+    });
+  }
+  addEventListeners() {
+    var _a;
+    (_a = this.radioButtons) === null || _a === void 0 ? void 0 : _a.forEach((radioButton) => {
+      radioButton.addEventListener('valueChanged', this.handleListenOnRadioButtonChange);
+    });
+  }
+  handleListenOnRadioButtonChange(ev) {
+    const event = ev;
+    event.stopPropagation();
+    if (event.detail.checked) {
+      this.value = event.detail.value;
+    }
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "value": ["updateValue"]
+  }; }
+  static get style() { return radioGroupCss; }
+}, [1, "vertex-radio-group", {
+    "name": [513],
+    "value": [1537]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-radio-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-radio-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, RadioGroup);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexRadioGroup = RadioGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { RadioGroup as R, VertexRadioGroup, defineCustomElement };

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

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

package/dist/components/vertex-radio.js

@@ -0,0 +1,56 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const radioCss = ".radio.sc-vertex-radio{display:inline-flex;position:relative;font-family:var(--vertex-ui-font-family);color:var( --vertex-ui-neutral-700);margin:4px 0px;white-space:nowrap}.radio.sc-vertex-radio:not(.disabled):hover{color:var( --vertex-ui-neutral-800)}.radio.sc-vertex-radio input.sc-vertex-radio{position:absolute;opacity:0;cursor:pointer}.radio.sc-vertex-radio:not(.disabled){cursor:pointer}.radio.disabled.sc-vertex-radio input.sc-vertex-radio{cursor:not-allowed}.checkmark.sc-vertex-radio{display:flex;position:relative;margin:auto;margin-right:0.75rem;height:16px;width:16px;background-color:var(--vertex-ui-white);border-radius:50%;border:1px solid var(--vertex-ui-neutral-400)}.checkmark.disabled.sc-vertex-radio{cursor:not-allowed}.radio.sc-vertex-radio:not(.disabled):hover input.sc-vertex-radio~.checkmark.sc-vertex-radio{border:1px solid var(--vertex-ui-neutral-500);cursor:pointer}.radio.sc-vertex-radio input.sc-vertex-radio:checked~.checkmark.sc-vertex-radio{border:1px solid  var(--vertex-ui-blue-700)}.radio.disabled.sc-vertex-radio input.sc-vertex-radio:checked~.checkmark.sc-vertex-radio{border:1px solid var( --vertex-ui-neutral-400)}.radio.sc-vertex-radio:not(.disabled):hover input.sc-vertex-radio:checked~.checkmark.sc-vertex-radio{border:1px solid  var(--vertex-ui-blue-500);cursor:pointer}.checkmark.sc-vertex-radio:after{content:\"\";position:absolute;display:none}.radio.sc-vertex-radio input.sc-vertex-radio:checked~.checkmark.sc-vertex-radio:after{display:flex}.radio.sc-vertex-radio .checkmark.sc-vertex-radio:after{position:relative;margin:auto;width:12px;height:12px;border-radius:50%;background:var(--vertex-ui-blue-700)}.radio.sc-vertex-radio:hover .checkmark.sc-vertex-radio:after{background:var(--vertex-ui-blue-500);cursor:pointer}.radio.disabled.sc-vertex-radio .checkmark.sc-vertex-radio:after{background:var( --vertex-ui-neutral-400)}.disabled.sc-vertex-radio{color:var( --vertex-ui-neutral-400)}";
+
+const Radio = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.disabled = false;
+    this.value = undefined;
+    this.label = undefined;
+    this.name = undefined;
+    this.checked = undefined;
+  }
+  render() {
+    return (h("label", { class: classnames('radio', {
+        disabled: this.disabled,
+      }) }, h("input", { disabled: this.disabled, onChange: (event) => {
+        const radioValue = event.target;
+        this.valueChanged.emit({
+          checked: radioValue.checked,
+          value: radioValue.value,
+        });
+      }, type: "radio", id: `vertex-radio-${this.name}-${this.value}`, name: this.name, value: this.value, checked: this.checked }), h("span", { class: classnames('checkmark', {
+        disabled: this.disabled,
+      }) }), this.label));
+  }
+  static get style() { return radioCss; }
+}, [2, "vertex-radio", {
+    "disabled": [516],
+    "value": [513],
+    "label": [513],
+    "name": [513],
+    "checked": [516]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-radio"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-radio":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Radio);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexRadio = Radio;
+const defineCustomElement = defineCustomElement$1;
+
+export { Radio as R, VertexRadio, defineCustomElement };

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

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