@vertexvis/ui 0.1.2-canary.0 → 0.1.2-canary.1

package/dist/components/icon.js

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { g as getSvg } from './icon-helper.js';
+
+const iconCss = ".container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon{display:flex;justify-content:center;align-items:center;fill:currentColor}.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)}svg{position:relative;width:100%}";
+
+const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.name = undefined;
+    this.size = 'md';
+  }
+  render() {
+    return (h("div", { class: "container" }, h("div", { class: classnames('icon', {
+        xs: this.size === 'xs',
+        sm: this.size === 'sm',
+        md: this.size === 'md',
+        lg: this.size === 'lg',
+      }) }, getSvg(this.name))));
+  }
+  static get style() { return iconCss; }
+}, [1, "vertex-icon", {
+    "name": [1],
+    "size": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Icon);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Icon as I, defineCustomElement as d };

package/dist/components/index.d.ts

@@ -0,0 +1,71 @@
+/* components custom elements */
+export { AutoResizeTextArea as VertexAutoResizeTextarea } from '../types/components/auto-resize-textarea/auto-resize-textarea';
+export { Avatar as VertexAvatar } from '../types/components/avatar/avatar';
+export { AvatarGroup as VertexAvatarGroup } from '../types/components/avatar-group/avatar-group';
+export { Badge as VertexBadge } from '../types/components/badge/badge';
+export { Banner as VertexBanner } from '../types/components/banner/banner';
+export { Button as VertexButton } from '../types/components/button/button';
+export { Card as VertexCard } from '../types/components/card/card';
+export { CardGroup as VertexCardGroup } from '../types/components/card-group/card-group';
+export { Chip as VertexChip } from '../types/components/chip/chip';
+export { ClickToEditTextField as VertexClickToEditTextfield } from '../types/components/click-to-edit-text-field/click-to-edit-text-field';
+export { Collapsible as VertexCollapsible } from '../types/components/collapsible/collapsible';
+export { ColorCirclePicker as VertexColorCirclePicker } from '../types/components/color-circle-picker/color-circle-picker';
+export { ColorPicker as VertexColorPicker } from '../types/components/color-picker/color-picker';
+export { ColorSwatch as VertexColorSwatch } from '../types/components/color-swatch/color-swatch';
+export { ContextMenu as VertexContextMenu } from '../types/components/context-menu/context-menu';
+export { Dialog as VertexDialog } from '../types/components/dialog/dialog';
+export { DraggablePopover as VertexDraggablePopover } from '../types/components/draggable-popover/draggable-popover';
+export { DropdownMenu as VertexDropdownMenu } from '../types/components/dropdown-menu/dropdown-menu';
+export { Expandable as VertexExpandable } from '../types/components/expandable/expandable';
+export { HelpTooltip as VertexHelpTooltip } from '../types/components/help-tooltip/help-tooltip';
+export { Icon as VertexIcon } from '../types/components/icon/icon';
+export { IconButton as VertexIconButton } from '../types/components/icon-button/icon-button';
+export { LogoLoading as VertexLogoLoading } from '../types/components/logo-loading/logo-loading';
+export { Menu as VertexMenu } from '../types/components/menu/menu';
+export { MenuDivider as VertexMenuDivider } from '../types/components/menu-divider/menu-divider';
+export { MenuItem as VertexMenuItem } from '../types/components/menu-item/menu-item';
+export { Popover as VertexPopover } from '../types/components/popover/popover';
+export { Radio as VertexRadio } from '../types/components/radio/radio';
+export { RadioGroup as VertexRadioGroup } from '../types/components/radio-group/radio-group';
+export { Resizable as VertexResizable } from '../types/components/resizable/resizable';
+export { ResultList as VertexResultList } from '../types/components/result-list/result-list';
+export { SearchBar as VertexSearchBar } from '../types/components/search-bar/search-bar';
+export { Select as VertexSelect } from '../types/components/select/select';
+export { Slider as VertexSlider } from '../types/components/slider/slider';
+export { Spinner as VertexSpinner } from '../types/components/spinner/spinner';
+export { Tab as VertexTab } from '../types/components/tab/tab';
+export { Tabs as VertexTabs } from '../types/components/tabs/tabs';
+export { TextField as VertexTextfield } from '../types/components/text-field/text-field';
+export { Toast as VertexToast } from '../types/components/toast/toast';
+export { Toggle as VertexToggle } from '../types/components/toggle/toggle';
+export { Tooltip as VertexTooltip } from '../types/components/tooltip/tooltip';
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1,52 @@
+export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { A as AutoResizeTextArea, d as defineCustomElement } from './auto-resize-textarea.js';
+export { A as Avatar, VertexAvatar, defineCustomElement as defineCustomElementVertexAvatar } from './vertex-avatar.js';
+export { A as AvatarGroup, VertexAvatarGroup, defineCustomElement as defineCustomElementVertexAvatarGroup } from './vertex-avatar-group.js';
+export { B as Badge, VertexBadge, defineCustomElement as defineCustomElementVertexBadge } from './vertex-badge.js';
+export { B as Banner, VertexBanner, defineCustomElement as defineCustomElementVertexBanner } from './vertex-banner.js';
+export { B as Button, VertexButton, defineCustomElement as defineCustomElementVertexButton } from './vertex-button.js';
+export { C as Card, VertexCard, defineCustomElement as defineCustomElementVertexCard } from './vertex-card.js';
+export { C as CardGroup, VertexCardGroup, defineCustomElement as defineCustomElementVertexCardGroup } from './vertex-card-group.js';
+export { C as Chip, VertexChip, defineCustomElement as defineCustomElementVertexChip } from './vertex-chip.js';
+export { C as ClickToEditTextField, VertexClickToEditTextfield, defineCustomElement as defineCustomElementVertexClickToEditTextfield } from './vertex-click-to-edit-textfield.js';
+export { C as Collapsible, VertexCollapsible, defineCustomElement as defineCustomElementVertexCollapsible } from './vertex-collapsible.js';
+export { C as ColorCirclePicker, VertexColorCirclePicker, defineCustomElement as defineCustomElementVertexColorCirclePicker } from './vertex-color-circle-picker.js';
+export { C as ColorPicker, VertexColorPicker, defineCustomElement as defineCustomElementVertexColorPicker } from './vertex-color-picker.js';
+export { C as ColorSwatch } from './color-swatch.js';
+export { C as ContextMenu, VertexContextMenu, defineCustomElement as defineCustomElementVertexContextMenu } from './vertex-context-menu.js';
+export { D as Dialog, VertexDialog, defineCustomElement as defineCustomElementVertexDialog } from './vertex-dialog.js';
+export { D as DraggablePopover, VertexDraggablePopover, defineCustomElement as defineCustomElementVertexDraggablePopover } from './vertex-draggable-popover.js';
+export { D as DropdownMenu, VertexDropdownMenu, defineCustomElement as defineCustomElementVertexDropdownMenu } from './vertex-dropdown-menu.js';
+export { E as Expandable } from './expandable.js';
+export { H as HelpTooltip, VertexHelpTooltip, defineCustomElement as defineCustomElementVertexHelpTooltip } from './vertex-help-tooltip.js';
+export { I as Icon } from './icon.js';
+export { I as IconButton } from './icon-button.js';
+export { L as LogoLoading, VertexLogoLoading, defineCustomElement as defineCustomElementVertexLogoLoading } from './vertex-logo-loading.js';
+export { M as Menu } from './menu.js';
+export { M as MenuDivider, VertexMenuDivider, defineCustomElement as defineCustomElementVertexMenuDivider } from './vertex-menu-divider.js';
+export { M as MenuItem, VertexMenuItem, defineCustomElement as defineCustomElementVertexMenuItem } from './vertex-menu-item.js';
+export { P as Popover } from './popover.js';
+export { R as Radio, VertexRadio, defineCustomElement as defineCustomElementVertexRadio } from './vertex-radio.js';
+export { R as RadioGroup, VertexRadioGroup, defineCustomElement as defineCustomElementVertexRadioGroup } from './vertex-radio-group.js';
+export { R as Resizable, VertexResizable, defineCustomElement as defineCustomElementVertexResizable } from './vertex-resizable.js';
+export { R as ResultList } from './result-list.js';
+export { S as SearchBar, VertexSearchBar, defineCustomElement as defineCustomElementVertexSearchBar } from './vertex-search-bar.js';
+export { S as Select, VertexSelect, defineCustomElement as defineCustomElementVertexSelect } from './vertex-select.js';
+export { S as Slider, VertexSlider, defineCustomElement as defineCustomElementVertexSlider } from './vertex-slider.js';
+export { S as Spinner, VertexSpinner, defineCustomElement as defineCustomElementVertexSpinner } from './vertex-spinner.js';
+export { T as Tab, VertexTab, defineCustomElement as defineCustomElementVertexTab } from './vertex-tab.js';
+export { T as Tabs, VertexTabs, defineCustomElement as defineCustomElementVertexTabs } from './vertex-tabs.js';
+export { T as TextField } from './text-field.js';
+export { T as Toast, VertexToast, defineCustomElement as defineCustomElementVertexToast } from './vertex-toast.js';
+export { T as Toggle, VertexToggle, defineCustomElement as defineCustomElementVertexToggle } from './vertex-toggle.js';
+export { T as Tooltip } from './tooltip.js';
+export { VertexAutoResizeTextarea, defineCustomElement as defineCustomElementVertexAutoResizeTextarea } from './vertex-auto-resize-textarea.js';
+export { VertexColorSwatch, defineCustomElement as defineCustomElementVertexColorSwatch } from './vertex-color-swatch.js';
+export { VertexExpandable, defineCustomElement as defineCustomElementVertexExpandable } from './vertex-expandable.js';
+export { VertexIcon, defineCustomElement as defineCustomElementVertexIcon } from './vertex-icon.js';
+export { VertexIconButton, defineCustomElement as defineCustomElementVertexIconButton } from './vertex-icon-button.js';
+export { VertexMenu, defineCustomElement as defineCustomElementVertexMenu } from './vertex-menu.js';
+export { VertexPopover, defineCustomElement as defineCustomElementVertexPopover } from './vertex-popover.js';
+export { VertexResultList, defineCustomElement as defineCustomElementVertexResultList } from './vertex-result-list.js';
+export { VertexTextfield, defineCustomElement as defineCustomElementVertexTextfield } from './vertex-textfield.js';
+export { VertexTooltip, defineCustomElement as defineCustomElementVertexTooltip } from './vertex-tooltip.js';

package/dist/components/index2.js

@@ -0,0 +1,89 @@
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+var classnames = createCommonjsModule(function (module) {
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames () {
+		var classes = '';
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (arg) {
+				classes = appendClass(classes, parseValue(arg));
+			}
+		}
+
+		return classes;
+	}
+
+	function parseValue (arg) {
+		if (typeof arg === 'string' || typeof arg === 'number') {
+			return arg;
+		}
+
+		if (typeof arg !== 'object') {
+			return '';
+		}
+
+		if (Array.isArray(arg)) {
+			return classNames.apply(null, arg);
+		}
+
+		if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+			return arg.toString();
+		}
+
+		var classes = '';
+
+		for (var key in arg) {
+			if (hasOwn.call(arg, key) && arg[key]) {
+				classes = appendClass(classes, key);
+			}
+		}
+
+		return classes;
+	}
+
+	function appendClass (value, newClass) {
+		if (!newClass) {
+			return value;
+		}
+	
+		if (value) {
+			return value + ' ' + newClass;
+		}
+	
+		return value + newClass;
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+});
+
+export { classnames as c };

package/dist/components/menu.js

@@ -0,0 +1,89 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$1 } from './popover.js';
+
+const menuCss = ":host{--background-color:var(--vertex-ui-white);--menu-padding:0.19em 0}.root{padding:var(--menu-padding);border:1px solid var(--vertex-ui-neutral-400);border-radius:0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n    0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);background-color:var(--background-color);z-index:var(--vertex-ui-context-menu-layer)}.has-header{padding-top:0}";
+
+const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.menuClosed = createEvent(this, "menuClosed", 7);
+    this.animated = true;
+    this.open = false;
+    this.placement = undefined;
+    this.fallbackPlacements = undefined;
+    this.backdrop = true;
+    this.position = undefined;
+    this.popoverProps = undefined;
+    this.handlePopoverDismiss = this.handlePopoverDismiss.bind(this);
+  }
+  componentDidLoad() {
+    var _a;
+    this.addEventListeners();
+    this.headerSlot =
+      ((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="header"]')) ||
+        undefined;
+  }
+  disconnectedCallback() {
+    this.removeEventListeners();
+  }
+  render() {
+    return (h("vertex-popover", Object.assign({ ref: (element) => {
+        this.popoverRef = element;
+      }, open: this.open, animated: this.animated, position: this.position, placement: this.placement, backdrop: this.backdrop, flipBehavior: this.fallbackPlacements != null
+        ? {
+          fallbackPlacements: this.fallbackPlacements,
+        }
+        : undefined }, this.popoverProps), this.position == null && (h("div", { slot: "anchor" }, h("slot", { name: "anchor" }))), h("div", { onClick: () => {
+        this.open = false;
+        this.menuClosed.emit();
+      }, class: classnames('root', {
+        'has-header': this.headerSlot != null,
+      }) }, h("slot", { name: "header" }), h("slot", null))));
+  }
+  addEventListeners() {
+    var _a;
+    (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.addEventListener('dismissed', this.handlePopoverDismiss);
+  }
+  removeEventListeners() {
+    var _a;
+    (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('dismissed', this.handlePopoverDismiss);
+  }
+  handlePopoverDismiss() {
+    this.open = false;
+    this.menuClosed.emit();
+  }
+  get hostElement() { return this; }
+  static get style() { return menuCss; }
+}, [1, "vertex-menu", {
+    "animated": [4],
+    "open": [1540],
+    "placement": [1],
+    "fallbackPlacements": [16],
+    "backdrop": [4],
+    "position": [1040],
+    "popoverProps": [16]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-menu", "vertex-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Menu);
+      }
+      break;
+    case "vertex-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Menu as M, defineCustomElement as d };