@vertexvis/ui 0.1.1 → 0.1.2-canary.1

package/dist/components/vertex-toast.js

@@ -0,0 +1,127 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './popover.js';
+
+const toastCss = ":host{--toast-width:auto;--toast-min-width:17rem;--toast-max-width:25rem;--toast-white-space:normal}.anchor{position:fixed}.bottom-left{left:1rem;bottom:1rem}.bottom{left:50vw;bottom:1rem}.bottom-right{right:1rem;bottom:1rem}.top-left{left:1rem;top:1rem}.top{left:50vw;top:1rem}.top-right{right:1rem;top:1rem}.popover{position:fixed;--open-animation-name:open-fade-in;--close-animation-name:close-fade-out}.actions{display:flex;align-items:center;margin-left:auto}.close{cursor:pointer;padding-left:1rem}.close:hover{color:var(--vertex-ui-neutral-300)}.toast{position:relative;display:flex;align-items:center;width:var(--toast-width);min-width:var(--toast-min-width);max-width:var(--toast-max-width);padding:1rem 1rem 1rem 1.5rem;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);background-color:var(--vertex-ui-neutral-800);color:var(--vertex-ui-white);border-radius:4px;white-space:var(--toast-white-space);user-select:none}.toast.hidden{pointer-events:none}.warn{background-color:var(--vertex-ui-orange-100);color:var(--vertex-ui-neutral-800)}.error{background-color:var(--vertex-ui-red-700);color:white}";
+
+const DEFAULT_TOAST_DURATION = 3000;
+const Toast = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.closed = createEvent(this, "closed", 7);
+    this.content = undefined;
+    this.placement = 'bottom-left';
+    this.duration = DEFAULT_TOAST_DURATION;
+    this.animated = true;
+    this.open = false;
+    this.type = 'info';
+    this.isOpen = undefined;
+    this.handleClose = this.handleClose.bind(this);
+    this.startCloseTimeout = this.startCloseTimeout.bind(this);
+    this.clearCloseTimeout = this.clearCloseTimeout.bind(this);
+    this.restartCloseTimeout = this.restartCloseTimeout.bind(this);
+  }
+  componentDidLoad() {
+    // This allows the component to render once initially to correctly
+    // place the popover anchor.
+    this.isOpen = this.open;
+    if (this.isOpen) {
+      this.restartCloseTimeout();
+    }
+  }
+  async handleOpenChanged(open) {
+    if (open) {
+      this.restartCloseTimeout();
+      this.isOpen = open;
+    }
+  }
+  render() {
+    return (h("vertex-popover", { class: "popover", open: this.isOpen, resizeBehavior: "fixed", backdrop: false, placement: this.getPopoverPlacement(), animated: this.animated }, h("div", { slot: "anchor", class: classnames('anchor', this.placement) }), h("div", { class: classnames('toast', {
+        hidden: !this.isOpen,
+        warn: this.type === 'warn',
+        error: this.type === 'error',
+      }) }, this.content ? h("div", { class: "content" }, this.content) : h("slot", null), h("div", { class: "actions" }, h("slot", { name: "action" }), h("vertex-icon-button", { class: "close", iconName: "close", iconSize: "sm", variant: "plain", onClick: this.handleClose })))));
+  }
+  handleClose() {
+    this.clearCloseTimeout();
+    this.isOpen = false;
+    this.closed.emit();
+  }
+  startCloseTimeout() {
+    if (this.closeTimeout == null && this.duration > 0) {
+      this.closeTimeout = setTimeout(() => {
+        this.handleClose();
+      }, this.duration);
+    }
+  }
+  clearCloseTimeout() {
+    if (this.closeTimeout != null) {
+      clearTimeout(this.closeTimeout);
+      this.closeTimeout = undefined;
+    }
+  }
+  restartCloseTimeout() {
+    this.clearCloseTimeout();
+    this.startCloseTimeout();
+  }
+  getPopoverPlacement() {
+    switch (this.placement) {
+      case 'bottom-left':
+        return 'top-start';
+      case 'bottom':
+        return 'top';
+      case 'bottom-right':
+        return 'top-end';
+      case 'top-left':
+        return 'bottom-start';
+      case 'top':
+        return 'bottom';
+      case 'top-right':
+        return 'bottom-end';
+    }
+  }
+  static get watchers() { return {
+    "open": ["handleOpenChanged"]
+  }; }
+  static get style() { return toastCss; }
+}, [1, "vertex-toast", {
+    "content": [1],
+    "placement": [1],
+    "duration": [2],
+    "animated": [4],
+    "open": [4],
+    "type": [1],
+    "isOpen": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-toast", "vertex-icon-button", "vertex-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-toast":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Toast);
+      }
+      break;
+    case "vertex-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vertex-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexToast = Toast;
+const defineCustomElement = defineCustomElement$1;
+
+export { Toast as T, VertexToast, defineCustomElement };

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

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

package/dist/components/vertex-toggle.js

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const toggleCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{display:flex}.check{border:1px solid var(--vertex-ui-neutral-400);box-shadow:0 0 2px var(--vertex-ui-neutral-400);border-radius:4px;width:1rem;height:1rem;padding:0}.check:not(.disabled){cursor:pointer}.check.disabled{border:1px solid var(--vertex-ui-neutral-200);box-shadow:0 0 2px var(--vertex-ui-neutral-200)}.check:focus-visible:not(.disabled){outline:none;border:1px solid var(--vertex-ui-neutral-600);box-shadow:0 0 2px var(--vertex-ui-neutral-600)}.check:focus-visible:not(.disabled)>.checked-content.checked{background-color:var(--vertex-ui-blue-800);box-shadow:0 0 2px var(--vertex-ui-blue-800)}.check:hover:not(.disabled){border:1px solid var(--vertex-ui-neutral-500);box-shadow:0 0 2px var(--vertex-ui-neutral-500)}.check.checked:not(.disabled){border:none;box-shadow:none}.check:hover:not(.disabled)>.checked-content.checked{background-color:var(--vertex-ui-blue-500);box-shadow:0 0 2px var(--vertex-ui-blue-500)}.checked-content{width:100%;height:100%;border-radius:4px}.checked-content.disabled{background-color:var(--vertex-ui-neutral-050);color:var(--vertex-ui-neutral-500)}.checked-content.checked:not(.disabled){background-color:var(--vertex-ui-blue-700);box-shadow:0 0 2px var(--vertex-ui-blue-700);color:var(--vertex-ui-white)}.switch{position:relative;width:2.25rem;height:1.25rem;padding:0;display:inline-block}.switch:not(.disabled){cursor:pointer}.track{position:absolute;top:0;background-color:var(--vertex-ui-neutral-300);width:2rem;padding:0 0.125rem;margin:0.1875rem 0;height:0.875rem;border-radius:7rem}.track.disabled{background-color:var(--vertex-ui-neutral-200)}.track.disabled.checked{background-color:var(--vertex-ui-blue-200)}.handle{position:absolute;top:0;left:0;background-color:var(--vertex-ui-neutral-100);box-shadow:-1px 1px rgba(0, 0, 0, 0.15);width:1.25rem;height:1.25rem;border-radius:100%;display:flex;transition:left 0.25s}.handle.disabled{box-shadow:none}.track:not(.disabled).checked{background-color:var(--vertex-ui-blue-300)}.handle.checked{left:1rem}.handle.checked:not(.disabled){background-color:var(--vertex-ui-blue-600)}.handle.checked.disabled{background-color:var(--vertex-ui-blue-300)}";
+
+const Toggle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.variant = 'check';
+    this.disabled = false;
+    this.checked = false;
+  }
+  render() {
+    const flipValue = () => {
+      if (!this.disabled) {
+        this.checked = !this.checked;
+        this.valueChanged.emit(this.checked);
+      }
+    };
+    return (h("button", { class: classnames(this.variant, {
+        checked: this.checked,
+        disabled: this.disabled,
+      }), onClick: flipValue, onSubmit: flipValue }, this.variant === 'check' && (h("div", { class: classnames('checked-content', {
+        checked: this.checked,
+        disabled: this.disabled,
+      }) }, this.checked && h("vertex-icon", { name: "check", size: "md" }))), this.variant === 'switch' && (h("div", { class: classnames('track', {
+        disabled: this.disabled,
+        checked: this.checked,
+      }) })), this.variant === 'switch' && (h("div", { class: classnames('handle', {
+        disabled: this.disabled,
+        checked: this.checked,
+      }) }))));
+  }
+  static get style() { return toggleCss; }
+}, [1, "vertex-toggle", {
+    "variant": [1],
+    "disabled": [4],
+    "checked": [1540]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-toggle", "vertex-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-toggle":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Toggle);
+      }
+      break;
+    case "vertex-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexToggle = Toggle;
+const defineCustomElement = defineCustomElement$1;
+
+export { Toggle as T, VertexToggle, defineCustomElement };

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

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

package/dist/components/vertex-tooltip.js

@@ -0,0 +1,6 @@
+import { T as Tooltip, d as defineCustomElement$1 } from './tooltip.js';
+
+const VertexTooltip = Tooltip;
+const defineCustomElement = defineCustomElement$1;
+
+export { VertexTooltip, defineCustomElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/ui",
-  "version": "0.1.1",
+  "version": "0.1.2-canary.1",
   "description": "The Vertex UI component library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -87,5 +87,5 @@
     "@vertexvis/utils": "^0.23.2",
     "fast-deep-equal": "^3.1.3"
   },
-  "gitHead": "0ebf1efa87266ea287cab323d705a0e439bab95f"
+  "gitHead": "c20a026c205520462f54e883b08564003c8fa98e"
 }