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

package/dist/collection/components/color-picker/color-picker.css

@@ -1,22 +1,33 @@
 :host {
+  display: flex;
+
   /*
-  Width of element indicating the color chosen.
-  Defaults to 30px
+  Width override of element indicating the color chosen.
+  Defaults to `initial` to fall back to the `size` property.
   */
-  --selected-color-width: 30px;
+  --selected-color-width: initial;
 
   /*
-  Height of element indicating the color chosen.
-  Defaults to 30px
+  Height override of element indicating the color chosen.
+  Defaults to `initial` to fall back to the `size` property.
   */
-  --selected-color-height: 30px;
+  --selected-color-height: initial;
+}
+
+.wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.wrapper.full {
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--vertex-ui-neutral-300);
+  border-radius: 4px;
 }
 
 .color-picker {
   display: inline-flex;
   position: relative;
-  background: var(--vertex-ui-neutral-200);
-  border-radius: 4px;
   cursor: pointer;
 }
 
@@ -25,21 +36,90 @@
   cursor: default;
 }
 
+.selected-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.wrapper.full .selected-wrapper {
+  gap: 0.75rem;
+}
+
 .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;
+  position: relative;
+}
+
+.wrapper.sm .selected {
+  width: var(--selected-color-width, 1rem);
+  height: var(--selected-color-height, 1rem);
+}
+
+.wrapper.md .selected {
+  width: var(--selected-color-width, 1.25rem);
+  height: var(--selected-color-height, 1.25rem);
+}
+
+.wrapper.lg .selected {
+  width: var(--selected-color-width, 1.5rem);
+  height: var(--selected-color-height, 1.5rem);
+}
+
+.text-wrapper {
+  position: relative;
+}
+
+.selected-text {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  color: var(--vertex-ui-neutral-700);
+  text-align: center;
+  font-family: var(--vertex-ui-font-family);
+}
+
+.hidden-text {
+  visibility: hidden;
+  pointer-events: none;
+  font-family: var(--vertex-ui-font-family-monospace);
 }
 
-.handle {
+.wrapper.sm .selected-text,
+.wrapper.sm .hidden-text {
+  font-size: var(--vertex-ui-text-xs);
+}
+
+.wrapper.md .selected-text,
+.wrapper.md .hidden-text {
+  font-size: var(--vertex-ui-text-xs);
+}
+
+.wrapper.lg .selected-text,
+.wrapper.lg .hidden-text {
+  font-size: var(--vertex-ui-text-xs);
+}
+
+.no-value {
+  width: 100%;
+  height: 100%;
+  stroke: var(--vertex-ui-red-400);
+}
+
+.right-gutter {
   display: flex;
   align-items: center;
-  padding: 0 3px;
+  margin-left: auto;
+}
+
+slot[name="right-gutter"]::slotted(*) {
+  padding: 0 ;
 }
 
 .input {
+  display: flex;
   position: absolute;
   pointer-events: none;
   height: 100%;

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

@@ -1,5 +1,6 @@
 import { h, Host, } from '@stencil/core';
 import classNames from 'classnames';
+import { isValidHexColor } from '../color-swatch/lib';
 export class ColorPicker {
   constructor() {
     this.handleInput = (event) => {
@@ -10,15 +11,23 @@ export class ColorPicker {
       this.valueChanged.emit(this.value);
     };
     this.value = undefined;
+    this.size = 'md';
+    this.variant = 'full';
     this.disabled = false;
   }
   valueChange() {
     this.valueInput.emit(this.value);
   }
   render() {
-    return (h(Host, null, h("label", { class: classNames('color-picker', { disabled: this.disabled }) }, h("input", { type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), h("div", { class: "selected", style: {
-        'background-color': this.value,
-      }, title: this.value }), h("div", { class: "handle" }, h("slot", { name: "handle-icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))))));
+    var _a;
+    return (h(Host, null, h("div", { class: classNames('wrapper', this.variant, this.size) }, h("label", { class: classNames('color-picker', { disabled: this.disabled }) }, h("input", { type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), h("div", { class: classNames('selected-wrapper', this.variant) }, h("div", { class: "selected", title: this.value }, h("vertex-color-swatch", { class: "selected-color", supplementalColor: "var(--vertex-ui-neutral-400)", color: this.value, variant: "square", size: this.size }, h("slot", { name: "overlay", slot: "overlay" }, (this.value == null || this.value === '') && (h("svg", { class: "no-value", slot: "overlay", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { d: "M16,0L0,16" })))))), this.variant === 'full' && (h("div", { class: "text-wrapper" }, h("div", { class: "hidden-text" }, "#FFFFFF"), h("div", { class: "selected-text" }, (_a = this.getDisplayedValue()) !== null && _a !== void 0 ? _a : 'Default'))))), h("div", { class: "right-gutter" }, h("slot", { name: "right-gutter" })))));
+  }
+  getDisplayedValue() {
+    var _a;
+    if (this.value != null && isValidHexColor(this.value)) {
+      return (_a = this.value) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase();
+    }
+    return undefined;
   }
   static get is() { return "vertex-color-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -51,6 +60,51 @@ export class ColorPicker {
         "attribute": "value",
         "reflect": true
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorSwatchSize",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
+          "references": {
+            "ColorSwatchSize": {
+              "location": "import",
+              "path": "../color-swatch/color-swatch"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the swatch displayed for this color picker. Can be `sm`, `md`,\n`lg`, or `xl`, and defaults to `md`. If the `variant` is `full`, this value\nwill also increase the size of the associated hexadecimal value."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'md'"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorPickerVariant",
+          "resolved": "\"full\" | \"swatch\"",
+          "references": {
+            "ColorPickerVariant": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The variant of this color picker. Can be `full` or `swatch`,\nand defaults to `full`.\n\n`full` will display both the visual color swatch and the hexadecimal\nrepresentation of the color.\n\n`swatch` will display only the visual color swatch."
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "'full'"
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/color-swatch/color-swatch.css

@@ -0,0 +1,43 @@
+:host {
+  display: flex;
+}
+
+.root {
+  position: relative;
+  border-style: solid;
+  border-color: var(--vertex-ui-neutral-300);
+  box-sizing: border-box;
+}
+
+.root.circle {
+  border-width: 2px;
+  border-radius: 100%;
+}
+
+.root.square {
+  border-width: 1px;
+  border-radius: 3px;
+}
+
+.root.sm {
+  width: 16px;
+  height: 16px;
+}
+
+.root.md {
+  width: 20px;
+  height: 20px;
+}
+
+.root.lg {
+  width: 24px;
+  height: 24px;
+}
+
+.overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+  overflow: hidden;
+}

package/dist/collection/components/{color-circle/color-circle.js → color-swatch/color-swatch.js}

@@ -1,9 +1,13 @@
 import { h, Host } from '@stencil/core';
-export class ColorCircle {
+import classNames from 'classnames';
+import { isValidHexColor } from './lib';
+export class ColorSwatch {
   constructor() {
+    this.variant = 'circle';
+    this.size = 'md';
     this.color = '#ffffff';
     this.supplementalColor = undefined;
-    this.theme = 'dark';
+    this.theme = 'none';
     this.lightenPercentage = 0.25;
     this.darkenPercentage = 0.25;
     this.lightened = this.adjustColor(this.color, -this.lightenPercentage);
@@ -20,22 +24,43 @@ export class ColorCircle {
     this.darkened = this.adjustColor(this.color, newPercentage);
   }
   render() {
-    const themeColor = this.theme === 'dark' ? this.darkened : this.lightened;
-    const supplementalColor = this.supplementalColor != null && this.supplementalColor.length > 0
-      ? this.supplementalColor
-      : themeColor;
-    return (h(Host, null, h("div", { class: "root", style: this.theme === 'dark'
-        ? {
-          backgroundColor: this.color,
-          borderColor: supplementalColor,
-        }
-        : {
+    return (h(Host, null, h("div", { class: classNames('root', this.variant, this.size), style: this.getThemeColors() }, h("div", { class: "overlay" }, h("slot", { name: "overlay" })))));
+  }
+  getThemeColors() {
+    const supplementalColor = this.getSupplementalColor();
+    switch (this.theme) {
+      case 'light':
+        return {
           backgroundColor: supplementalColor,
           borderColor: this.color,
-        } })));
+        };
+      case 'dark':
+        return {
+          backgroundColor: this.color,
+          borderColor: supplementalColor,
+        };
+      default:
+        return {
+          backgroundColor: this.color,
+          borderColor: supplementalColor !== null && supplementalColor !== void 0 ? supplementalColor : undefined,
+        };
+    }
+  }
+  getSupplementalColor() {
+    const providedSupplementalColor = this.supplementalColor != null && this.supplementalColor.length > 0
+      ? this.supplementalColor
+      : undefined;
+    switch (this.theme) {
+      case 'light':
+        return providedSupplementalColor !== null && providedSupplementalColor !== void 0 ? providedSupplementalColor : this.lightened;
+      case 'dark':
+        return providedSupplementalColor !== null && providedSupplementalColor !== void 0 ? providedSupplementalColor : this.darkened;
+      default:
+        return providedSupplementalColor;
+    }
   }
   adjustColor(color, percentage) {
-    if (color.startsWith('#') && color.length === 7) {
+    if (isValidHexColor(color)) {
       const r = Number(`0x${color.slice(1, 3)}`);
       const g = Number(`0x${color.slice(3, 5)}`);
       const b = Number(`0x${color.slice(5, 7)}`);
@@ -53,20 +78,64 @@ export class ColorCircle {
   padHexComponent(hex) {
     return `${'0'.repeat(2 - hex.length)}${hex}`;
   }
-  static get is() { return "vertex-color-circle"; }
+  static get is() { return "vertex-color-swatch"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["color-circle.css"]
+      "$": ["color-swatch.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["color-circle.css"]
+      "$": ["color-swatch.css"]
     };
   }
   static get properties() {
     return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorSwatchVariant",
+          "resolved": "\"circle\" | \"square\"",
+          "references": {
+            "ColorSwatchVariant": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The variant of this color swatch. Can be either `circle` or `square`,\nand defaults to `circle`."
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "'circle'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorSwatchSize",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
+          "references": {
+            "ColorSwatchSize": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of this color swatch. Can be `sm`, `md`, or `lg`,\nand defaults to `md`."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'md'"
+      },
       "color": {
         "type": "string",
         "mutable": false,
@@ -79,7 +148,7 @@ export class ColorCircle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The primary color of this `vertex-color-circle`.\nFor `dark` theme, this will be the background-color.\nFor `light` theme, this will be the border-color."
+          "text": "The primary color of this `vertex-color-swatch` in hexadecimal format.\nFor `dark` theme, this will be the background-color.\nFor `light` theme, this will be the border-color."
         },
         "attribute": "color",
         "reflect": true,
@@ -106,19 +175,23 @@ export class ColorCircle {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'light' | 'dark'",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {}
+          "original": "ColorSwatchTheme",
+          "resolved": "\"dark\" | \"light\" | \"none\"",
+          "references": {
+            "ColorSwatchTheme": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The theme to use for this `vertex-color-circle`.\nCan be either `light` or `dark`, and defaults to `dark`.\n\nWith the `dark` theme, the provided `color` will be used\nas the background-color, and the `darkened` color will be\nused for the border-color.\n\nWith the `light` theme, the provided `color` will be used\nas the border-color, and the `lightened` color will be used\nfor the background-color."
+          "text": "The theme to use for this `vertex-color-swatch`.\nCan be `none`, `light`, or `dark`, and defaults to `none`.\n\nWith no theme (`none`), the provided `color` will be used\nas the background-color, and the border will be a neutral color.\n\nWith the `dark` theme, the provided `color` will be used\nas the background-color, and the `darkened` color will be\nused for the border-color.\n\nWith the `light` theme, the provided `color` will be used\nas the border-color, and the `lightened` color will be used\nfor the background-color."
         },
         "attribute": "theme",
         "reflect": true,
-        "defaultValue": "'dark'"
+        "defaultValue": "'none'"
       },
       "lightenPercentage": {
         "type": "number",

package/dist/collection/components/color-swatch/lib.js

@@ -0,0 +1,5 @@
+const hexRegex = /^(#|0x)?([A-Fa-f0-9]{6})$/;
+export function isValidHexColor(color) {
+  const match = color != null ? hexRegex.exec(color) : undefined;
+  return match != null && match.length > 0;
+}

package/dist/collection/components/dialog/dialog.css

@@ -71,7 +71,6 @@
 .overlay {
   border: 1px solid var(--vertex-ui-neutral-300);
   border-radius: 6px;
-  min-width: var(--min-width, var(--vertex-ui-min-dialog-width));
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
   display: flex;
 }

package/dist/collection/components/icon/icon-helper.js

@@ -24,6 +24,7 @@ import { CaretDown } from './icons/caret-down';
 import { CaretLeft } from './icons/caret-left';
 import { CaretRight } from './icons/caret-right';
 import { CaretUp } from './icons/caret-up';
+import { Caution } from './icons/caution';
 import { Check } from './icons/check';
 import { CheckCircle } from './icons/check-circle';
 import { ChevronDown } from './icons/chevron-down';
@@ -41,15 +42,19 @@ import { CommentFilled } from './icons/comment-filled';
 import { CommentReopen } from './icons/comment-reopen';
 import { CommentResolve } from './icons/comment-resolve';
 import { CommentShow } from './icons/comment-show';
+import { Compare } from './icons/compare';
+import { Compress } from './icons/compress';
 import { Copy } from './icons/copy';
 import { CrossSection } from './icons/cross-section';
 import { CubeOrthographic } from './icons/cube-orthographic';
 import { CubePerspective } from './icons/cube-perspective';
+import { CubeStack } from './icons/cube-stack';
 import { Delete } from './icons/delete';
 import { Download } from './icons/download';
 import { DragIndicator } from './icons/drag-indicator';
 import { Ellipse } from './icons/ellipse';
 import { ErrorCircle } from './icons/error-circle';
+import { Expand } from './icons/expand';
 import { ExpandAll } from './icons/expand-all';
 import { Export } from './icons/export';
 import { File } from './icons/file';
@@ -85,7 +90,10 @@ import { PinFill } from './icons/pin-fill';
 import { PinLine } from './icons/pin-line';
 import { PinText } from './icons/pin-text';
 import { PinTextFill } from './icons/pin-text-fill';
+import { PinTextSquare } from './icons/pin-text-square';
 import { Plus } from './icons/plus';
+import { PlusWithArrow } from './icons/plus-with-arrow';
+import { PMI } from './icons/pmi';
 import { PreciseMeasurement } from './icons/precise-measurement';
 import { Rabbit } from './icons/rabbit';
 import { Reset } from './icons/reset';
@@ -101,7 +109,9 @@ import { Teleport } from './icons/teleport';
 import { TeleportAndAlign } from './icons/teleport-and-align';
 import { TeleportToward } from './icons/teleport-toward';
 import { Turtle } from './icons/turtle';
+import { Update } from './icons/update';
 import { VersionHistory } from './icons/version-history';
+import { Views } from './icons/views';
 import { VisibilityHidden } from './icons/visibility-hidden';
 import { VisibilityPartial } from './icons/visibility-partial';
 import { VisibilityVisible } from './icons/visibility-visible';
@@ -158,6 +168,8 @@ export function getSvg(name) {
       return h(CaretRight, null);
     case 'caret-up':
       return h(CaretUp, null);
+    case 'caution':
+      return h(Caution, null);
     case 'check':
       return h(Check, null);
     case 'check-circle':
@@ -192,6 +204,10 @@ export function getSvg(name) {
       return h(CommentResolve, null);
     case 'comment-show':
       return h(CommentShow, null);
+    case 'compare':
+      return h(Compare, null);
+    case 'compress':
+      return h(Compress, null);
     case 'copy':
       return h(Copy, null);
     case 'cross-section':
@@ -200,6 +216,8 @@ export function getSvg(name) {
       return h(CubeOrthographic, null);
     case 'cube-perspective':
       return h(CubePerspective, null);
+    case 'cube-stack':
+      return h(CubeStack, null);
     case 'delete':
       return h(Delete, null);
     case 'download':
@@ -210,6 +228,8 @@ export function getSvg(name) {
       return h(Ellipse, null);
     case 'error-circle':
       return h(ErrorCircle, null);
+    case 'expand':
+      return h(Expand, null);
     case 'expand-all':
       return h(ExpandAll, null);
     case 'export':
@@ -280,8 +300,14 @@ export function getSvg(name) {
       return h(PinText, null);
     case 'pin-text-fill':
       return h(PinTextFill, null);
+    case 'pin-text-square':
+      return h(PinTextSquare, null);
     case 'plus':
       return h(Plus, null);
+    case 'plus-with-arrow':
+      return h(PlusWithArrow, null);
+    case 'pmi':
+      return h(PMI, null);
     case 'precise-measurement':
       return h(PreciseMeasurement, null);
     case 'rabbit':
@@ -312,8 +338,12 @@ export function getSvg(name) {
       return h(Teleport, null);
     case 'turtle':
       return h(Turtle, null);
+    case 'update':
+      return h(Update, null);
     case 'version-history':
       return h(VersionHistory, null);
+    case 'views':
+      return h(Views, null);
     case 'visibility-hidden':
       return h(VisibilityHidden, null);
     case 'visibility-partial':

package/dist/collection/components/icon/icon.js

@@ -33,7 +33,7 @@ export class Icon {
         "mutable": false,
         "complexType": {
           "original": "IconName",
-          "resolved": "\"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"plus\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
+          "resolved": "\"compare\" | \"help\" | \"open\" | \"expand\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"caution\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"compress\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"cube-stack\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"pin-text-square\" | \"plus\" | \"plus-with-arrow\" | \"pmi\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"update\" | \"version-history\" | \"views\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
           "references": {
             "IconName": {
               "location": "import",

package/dist/collection/components/icon/icons/caution.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const Caution = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "caution" }, h("path", { d: "M8,11a.51.51,0,1,0,.35.15A.47.47,0,0,0,8,11Zm6.65,1.29ZM8,6a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,1,0v-3A.5.5,0,0,0,8,6Zm6.65,6.29L9.32,2.4h0a1.5,1.5,0,0,0-2.64,0L1.35,12.29h0a1.53,1.53,0,0,0-.18.71,1.5,1.5,0,0,0,1.5,1.5H13.33a1.5,1.5,0,0,0,1.5-1.5A1.53,1.53,0,0,0,14.65,12.29Zm-1,1.06a.47.47,0,0,1-.35.15H2.67a.47.47,0,0,1-.35-.15A.51.51,0,0,1,2.17,13l.06-.24h0L7.56,2.87h0a.5.5,0,0,1,.88,0l5.33,9.89h0l.06.24A.51.51,0,0,1,13.68,13.35Z" })));

package/dist/collection/components/icon/icons/compare.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const Compare = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "compare" }, h("path", { d: "M8.27 9.94 5.89 7.56c-.11-.11-.23-.17-.36-.17s-.25.06-.36.17c-.11.11-.16.23-.15.37 0 .13.06.25.15.34l1.74 1.74H1.5c-.14 0-.26.05-.36.14-.1.1-.14.21-.14.36s.05.26.14.36c.1.1.21.14.36.14h5.42l-1.74 1.74c-.11.11-.16.23-.16.35 0 .13.06.24.16.35.11.11.23.16.36.16.13 0 .25-.06.34-.15l2.39-2.39c.09-.09.15-.18.18-.27.04-.09.05-.19.05-.3s-.02-.21-.05-.3c-.04-.09-.1-.18-.18-.27Zm6.59-4.79c-.1-.1-.21-.14-.36-.14H9.11l1.74-1.74c.11-.11.16-.23.16-.35 0-.13-.06-.24-.16-.35a.495.495 0 0 0-.36-.16c-.13 0-.25.06-.34.15L7.76 4.95c-.09.09-.15.18-.18.27-.04.09-.05.19-.05.3s.02.21.05.3c.04.09.1.18.18.27l2.38 2.38c.11.11.23.17.36.17s.25-.06.36-.17c.11-.11.16-.23.15-.37 0-.13-.06-.25-.15-.34L9.12 6.02h5.39c.14 0 .26-.05.36-.14.1-.1.14-.21.14-.36s-.05-.26-.14-.36Z" })));

package/dist/collection/components/icon/icons/compress.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const Compress = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "compress" }, h("path", { d: "M13.49 8.47H2.5c-.14 0-.26.05-.36.14-.1.1-.14.21-.14.36s.05.26.14.36c.1.1.21.14.36.14h10.99c.14 0 .26-.05.36-.14.1-.1.14-.21.14-.36s-.05-.26-.14-.36c-.1-.1-.21-.14-.36-.14ZM2.5 7.47h10.99c.14 0 .26-.05.36-.14.1-.1.14-.21.14-.36s-.05-.26-.14-.36c-.1-.1-.21-.14-.36-.14H2.5c-.14 0-.26.05-.36.14-.1.1-.14.21-.14.36s.05.26.14.36c.1.1.21.14.36.14ZM8.35 10.62c-.2-.2-.51-.2-.71 0l-2.12 2.12c-.2.2-.2.51 0 .71.2.2.51.2.71 0l1.24-1.24v2.32c0 .28.22.5.5.5s.5-.22.5-.5v-2.38l1.29 1.29c.2.2.51.2.71 0 .2-.2.2-.51 0-.71l-2.12-2.12v.01ZM7.63 5.41c.2.2.51.2.71 0l2.12-2.12c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0L8.51 3.82V1.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5v2.38L6.22 2.59c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l2.12 2.12v-.01Z" })));

package/dist/collection/components/icon/icons/cube-stack.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const CubeStack = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "cube-stack" }, h("path", { d: "M13.72 2.52 10.22.77a.508.508 0 0 0-.45 0l-3.5 1.75a.5.5 0 0 0-.28.45v3.81c-.08 0-.15.02-.22.05l-3.5 1.75a.5.5 0 0 0-.28.45v4.08c0 .19.11.36.28.45l3.5 1.75c.07.04.15.05.22.05s.16-.02.23-.05l7.52-3.82c.15-.1.25-.25.25-.43V2.97c0-.19-.11-.36-.28-.45ZM13 6.74l-2.46 1.23V5.03L13 3.8v2.94Zm-7.46 7.33L3 12.8V9.82l2.54 1.27v2.98Zm.5-3.85-2.4-1.2 2.37-1.18 2.4 1.2-2.37 1.18ZM9 12.78l-2.46 1.25v-2.94L9 9.86v2.92Zm.54-4.77L7 6.74V3.76l2.54 1.27v2.98ZM7.63 2.96 10 1.78l2.4 1.2-2.37 1.18-2.4-1.2Zm2.91 6.13L13 7.86v2.88l-2.46 1.25v-2.9Z" })));

package/dist/collection/components/icon/icons/expand.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const Expand = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "expand" }, h("path", { d: "M13.49 13.98H2.5c-.14 0-.26.05-.36.14-.1.1-.14.21-.14.36s.05.26.14.36c.1.1.21.14.36.14h10.99c.14 0 .26-.05.36-.14.1-.1.14-.21.14-.36s-.05-.26-.14-.36c-.1-.1-.21-.14-.36-.14ZM2.5 2h10.99c.14 0 .26-.05.36-.14.1-.1.14-.21.14-.36s-.05-.26-.14-.36c-.1-.1-.21-.14-.36-.14H2.5c-.14 0-.26.05-.36.14-.1.1-.14.21-.14.36s.05.26.14.36c.1.1.21.14.36.14ZM9.76 5.97c.2.2.51.2.71 0 .2-.2.2-.51 0-.71L8.36 3.14c-.2-.2-.51-.2-.71 0L5.53 5.26c-.2.2-.2.51 0 .71.2.2.51.2.71 0l1.24-1.24v6.53l-1.24-1.24c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l2.12 2.12c.2.2.51.2.71 0l2.12-2.12c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.29 1.29V4.67l1.29 1.29-.01.01Z" })));

package/dist/collection/components/icon/icons/pin-text-square.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const PinTextSquare = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "pin-text-square" }, h("path", { d: "M13.51 14.97H2.5c-.83 0-1.5-.67-1.5-1.5V2.5C1 1.67 1.67 1 2.5 1h11.01c.83 0 1.5.67 1.5 1.5v10.97c0 .83-.67 1.5-1.5 1.5ZM2.5 2c-.28 0-.5.22-.5.5v10.97c0 .28.22.5.5.5h11.01c.28 0 .5-.22.5-.5V2.5c0-.28-.22-.5-.5-.5H2.5Z" }), h("path", { d: "m3.98 11.97 3.3-8h1.37l3.37 8h-1.04l-.88-2.01H5.9l-.91 2.01H3.98Zm4.02-7-1.76 4h3.42L8 4.97Z" })));

package/dist/collection/components/icon/icons/plus-with-arrow.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const PlusWithArrow = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "plus-with-arrow" }, h("path", { d: "M8.58 1.46c-3.58 0-6.5 2.92-6.5 6.5H.59l2 3 2-3h-1.5c0-3.03 2.47-5.5 5.5-5.5s5.5 2.47 5.5 5.5-2.47 5.5-5.5 5.5c-1.19 0-2.32-.37-3.27-1.08a.505.505 0 0 0-.7.1c-.17.22-.12.53.1.7 1.13.84 2.46 1.28 3.87 1.28 3.58 0 6.5-2.92 6.5-6.5s-2.92-6.5-6.51-6.5Z" }), h("path", { d: "M8.5 5.53c-.28 0-.5.22-.5.5v1.49H6.51c-.28 0-.5.22-.5.5s.22.5.5.5H8v1.51c0 .28.22.5.5.5s.5-.22.5-.5V8.52h1.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5H9V6.03c0-.28-.22-.5-.5-.5Z" })));

package/dist/collection/components/icon/icons/pmi.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const PMI = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "pmi" }, h("path", { d: "M14.49 6.03 4.5 6c-.28 0-.5-.22-.5-.5v-3c0-.13.05-.26.15-.35A.51.51 0 0 1 4.5 2l9.99.03c.28 0 .5.22.5.5v3c0 .13-.05.26-.15.35a.51.51 0 0 1-.35.15ZM5 5l8.99.03v-2L5 3v2Z" }), h("path", { d: "M9.5 12.01H4.55c-.28 0-.5-.22-.5-.5s.22-.5.5-.5H9V6.02c0-.28.22-.5.5-.5s.5.22.5.5v5.49c0 .28-.22.5-.5.5Z" }), h("path", { d: "M3.46 15.04c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5Zm2.01-.01h-.01c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.51.22.51.5-.22.5-.5.5Zm-3.99-.01c-.28 0-.5-.22-.5-.49 0-.29.22-.51.5-.51s.5.22.5.5-.22.5-.5.5Zm6-.01c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5Zm-6-2c-.28 0-.5-.22-.5-.5 0-.29.22-.51.5-.51s.5.22.5.5-.22.5-.5.5Zm0-2.01c-.28 0-.5-.22-.5-.5 0-.29.22-.51.5-.51s.5.22.5.5-.22.5-.5.5Zm6-1.97c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5c0 .29-.22.51-.5.51Zm-5.97-.02c-.28 0-.51-.22-.51-.5s.22-.5.5-.5h.01c.28 0 .5.22.5.5s-.22.5-.5.5ZM3.52 9c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5Zm2.01-.02c-.28 0-.51-.22-.51-.5s.22-.5.5-.5h.01c.28 0 .5.22.5.5s-.22.5-.5.5Z" }), h("circle", { cx: "4.49", cy: "11.53", r: "1.5" })));

package/dist/collection/components/icon/icons/update.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const Update = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "update" }, h("path", { d: "M11.27 12.42A5.5 5.5 0 0 1 2.5 8H4L2 5 0 8h1.5A6.5 6.5 0 0 0 8 14.5a6.42 6.42 0 0 0 3.87-1.28.5.5 0 1 0-.6-.8ZM14.5 8A6.5 6.5 0 0 0 8 1.5a6.42 6.42 0 0 0-3.87 1.28.5.5 0 0 0 .6.8A5.5 5.5 0 0 1 13.5 8H12l2 3 2-3h-1.5Z" })));

package/dist/collection/components/icon/icons/views.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const Views = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "views" }, h("path", { d: "M12.49 5.97v-.03c0-.07-.02-.13-.05-.19a.27.27 0 0 0-.07-.08.284.284 0 0 0-.1-.09c-.02-.01-.02-.03-.04-.04L8.27 3.56a.508.508 0 0 0-.45 0L3.9 5.51c-.11.03-.21.11-.28.22l-.02.02-.01.02c-.03.07-.05.13-.05.2 0 .01-.01.02-.01.04v4.63c0 .19.11.36.28.45l4 1.99h.01a.465.465 0 0 0 .42 0h.01l3.97-1.96a.5.5 0 0 0 .28-.45L12.48 6l.01-.03ZM8.04 4.55l2.84 1.42-2.83 1.45-2.88-1.44 2.87-1.43ZM4.53 6.78l3 1.5v3.52l-3-1.5V6.77v.01Zm4.01 5.02V8.29l2.96-1.51v3.55L8.54 11.8ZM1.5 5c-.28 0-.5-.22-.5-.5V1h3.5c.28 0 .5.22.5.5s-.22.5-.5.5H2v2.5c0 .28-.22.5-.5.5Zm0 5.99c-.28 0-.5.22-.5.5v3.5h3.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5H2v-2.5c0-.28-.22-.5-.5-.5ZM14.5 5c.28 0 .5-.22.5-.5V1h-3.5c-.28 0-.5.22-.5.5s.22.5.5.5H14v2.5c0 .28.22.5.5.5Zm0 5.99c.28 0 .5.22.5.5v3.5h-3.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5H14v-2.5c0-.28.22-.5.5-.5Z" })));