@heartlandone/vega-sandbox-pr-1457-26ca806e919492b9064caacdcb37782f4b5aeb1c 2.25.0

package/dist/collection/components/vega-chip/vega-chip.js

@@ -0,0 +1,617 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Host, Prop, Element, Event, h, State, Watch, Fragment, } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../utils/component';
+import ResponsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
+import { arrayToClassString } from '../../utils/ui';
+import { formatAndValidBackgroundColor, formatAndValidTextColor } from '../../utils/design-token';
+import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
+import { getCurrentBreakpoint } from '../../utils/breakpoints';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaClick, VegaClose } from '../../helpers/event-manager/event-id/vega-event-id';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaChipRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-chip/runtime-metrics-payload-definition';
+/**
+ * @version 1.11.0
+ */
+export class VegaChip {
+  constructor() {
+    this.globalSlimmers = {};
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      callback: /* istanbul ignore next */ () => {
+        this.setCurrentSize();
+      },
+    });
+    this.flexEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.vegaFlexRef);
+    this.closeEventEmit = createEventEmitSlimmer(VegaChip, VegaClose);
+    this.clickEventEmit = createEventEmitSlimmer(VegaChip, VegaClick);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaChipRuntimeMetricsPayloadDefinition);
+    this.currentBreakpoint = getCurrentBreakpoint();
+    /**
+     * Specifies the label or title for the chip.
+     *
+     * It provides descriptive text that helps identify
+     *    the purpose or category of the chip.
+     *
+     * @version 1.11.0
+     */
+    this.text = '';
+    /**
+     * Specifies whether the chip is clickable.
+     *
+     * @version 1.11.0
+     */
+    this.clickable = false;
+    /**
+     * Determines the rendering style for the chip.
+     *
+     * @version 1.11.0
+     */
+    this.variant = 'filled-background';
+    /**
+     * Specifies the size of the chip.
+     *
+     * @version 1.11.0
+     */
+    this.size = 'default';
+    /**
+     * Specifies the background color of the chip.
+     *
+     * This property is only applicable when using the `filled-background` variant,
+     *    which is a specific style option for the chip.
+     *
+     * @version 1.11.0
+     */
+    this.bgColor = 'bg-chip';
+    /**
+     * Specifies the color of the text displayed within the chip.
+     *
+     * @version 1.11.0
+     */
+    this.textColor = 'text-primary';
+    /**
+     * Specifies the color of the status dot when
+     *    the chip's type is set to `status`.
+     *
+     * @version 1.11.0
+     */
+    this.statusColor = 'bg-status-info';
+    /**
+     * Specifies the type of the chip,
+     *    determining its visual appearance and behavior.
+     *
+     * There are two available options: `status` and `label`:
+     * - When `chipType` is set to `status`, the chip will display a dot as a prefix.
+     *    This style is commonly used to indicate a specific status
+     *    or state associated with the chip.
+     *    The `icon` and `iconAlign` properties are disabled in this mode.
+     * - On the other hand, when `chipType` is set to `label`,
+     *    the chip allows for more flexibility in positioning the icon.
+     *    You can choose to have the icon as a prefix or a suffix to the label text.
+     *    This type is commonly used when the chip represents a label or category.
+     *
+     * @version 1.11.0
+     */
+    this.chipType = 'label';
+    /**
+     * Controls the visibility of a close button within the chip.
+     *
+     * @version 1.11.0
+     */
+    this.showCloseIcon = false;
+    /**
+     * Specifies the placement or alignment of the icon within
+     *    the chip in relation to the chip's text.
+     *
+     * @version 1.11.0
+     */
+    this.iconAlign = 'left';
+    this.closeChip = (e) => {
+      e.stopPropagation();
+      this.closeEventEmit.emit(undefined, e);
+    };
+    this.clickChip = (e) => {
+      e.stopPropagation();
+      this.clickEventEmit.emit(undefined, e);
+    };
+  }
+  watchSize() {
+    this.setCurrentSize();
+  }
+  componentWillLoad() {
+    this.setCurrentSize();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null,
+      h("vega-flex", { "align-items": "center", ref: (node) => (this.vegaFlexRef = node) }, this.renderChip())), this.host);
+  }
+  renderChip() {
+    const classes = this.getChipClasses();
+    return this.clickable ? this.renderButtonChip(classes) : this.renderLabelChip(classes);
+  }
+  renderLabelChip(classes) {
+    return (h(Fragment, null,
+      h("div", { class: classes }, this.renderContent()),
+      this.renderCloseIcon()));
+  }
+  renderButtonChip(classes) {
+    return (h(Fragment, null,
+      h("button", { type: "button", "aria-label": this.text || 'No label defined', class: classes, onClick: this.clickChip }, this.renderContent()),
+      this.renderCloseIcon()));
+  }
+  renderContent() {
+    return (h("vega-flex", { gap: this.getFlexGap(), "align-items": "center" },
+      this.renderPrefixIcon(),
+      this.renderText(),
+      this.renderSuffixIcon()));
+  }
+  renderPrefixIcon() {
+    return this.chipType === 'status'
+      ? this.renderDot()
+      : this.icon && this.iconAlign === 'left' && (h("div", { class: "vega-chip-icon" }, this.renderIcon(this.icon)));
+  }
+  renderSuffixIcon() {
+    return (this.icon &&
+      this.chipType === 'label' &&
+      this.iconAlign === 'right' && h("div", { class: "vega-chip-icon" }, this.renderIcon(this.icon)));
+  }
+  renderCloseIcon() {
+    return (this.showCloseIcon && (h("div", { class: "vega-chip-close-icon", "aria-label": "close vega chip", onClick: this.closeChip, role: "button", tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }, this.renderIcon('close'))));
+  }
+  renderIcon(icon) {
+    return (h("vega-icon", { icon: icon, size: icon === 'close'
+        ? VegaChip.closeIconSizeMap[this.currentSize]
+        : VegaChip.iconSizeMap[this.currentSize] }));
+  }
+  renderDot() {
+    const size = VegaChip.iconSizeMap[this.currentSize];
+    const classes = arrayToClassString([
+      'vega-chip-dot',
+      `v-w-${size}`,
+      `v-h-${size}`,
+      formatAndValidBackgroundColor(this.statusColor, ['dark']),
+    ]);
+    return (h("div", { class: "vega-chip-dot-container" },
+      h("div", { class: classes })));
+  }
+  renderText() {
+    return (h("span", { class: "vega-chip-text" },
+      h("vega-text", { overflow: "ellipsis", key: this.text }, this.text)));
+  }
+  setCurrentSize() {
+    this.currentSize = ResponsiveFormatFacade.formatCustom(this.size);
+  }
+  getFlexGap() {
+    let spacingToken = '0';
+    switch (this.currentSize) {
+      case 'default':
+        spacingToken = 'size-8';
+        break;
+      case 'large':
+        spacingToken = 'size-8';
+        break;
+      default:
+        spacingToken = 'size-4';
+        break;
+    }
+    return spacingToken;
+  }
+  getChipClasses() {
+    return arrayToClassString([
+      'vega-chip',
+      `vega-chip-size-${this.currentSize}`,
+      `vega-chip-${this.variant}`,
+      this.variant === 'filled-background' ? formatAndValidBackgroundColor(this.bgColor, ['dark']) : '',
+      formatAndValidTextColor(this.textColor, ['dark']),
+      this.showCloseIcon
+        ? this.clickable
+          ? 'vega-chip-clickable-with-close-icon'
+          : 'vega-chip-with-close-icon'
+        : '',
+    ]);
+  }
+  static get is() { return "vega-chip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./vega-chip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-chip.css"]
+  }; }
+  static get properties() { return {
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "Specifies the label or title for the chip.\n\nIt provides descriptive text that helps identify\n   the purpose or category of the chip."
+      },
+      "attribute": "text",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "clickable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "Specifies whether the chip is clickable."
+      },
+      "attribute": "clickable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaChipVariant",
+        "resolved": "\"filled-background\" | \"outlined\"",
+        "references": {
+          "VegaChipVariant": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "Determines the rendering style for the chip."
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'filled-background'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<VegaChipSize>",
+        "resolved": "\"default\" | \"extra-small\" | \"large\" | \"small\" | { S?: VegaChipSize; M?: VegaChipSize; L?: VegaChipSize; XL?: VegaChipSize; default?: VegaChipSize; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "VegaChipSize": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "Specifies the size of the chip."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "bgColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "BackgroundColorsTokenType",
+        "resolved": "\"bg-brand\" | \"bg-page\" | \"bg-primary\" | \"bg-secondary\" | \"bg-tertiary\" | \"bg-quaternary\" | \"bg-inverted-primary\" | \"bg-inverted-secondary\" | \"bg-inverted-tertiary\" | \"bg-inverted-quaternary\" | \"bg-action\" | \"bg-action-hover\" | \"bg-action-focus\" | \"bg-action-active\" | \"bg-action-quaternary\" | \"bg-action-quaternary-hover\" | \"bg-action-quaternary-active\" | \"bg-action-secondary\" | \"bg-action-secondary-hover\" | \"bg-action-secondary-active\" | \"bg-action-tertiary\" | \"bg-action-tertiary-hover\" | \"bg-action-tertiary-active\" | \"bg-app-header\" | \"bg-backdrop-modal\" | \"bg-backdrop-popover\" | \"bg-backdrop-sidebar\" | \"bg-chip\" | \"bg-chip-hover\" | \"bg-chip-active\" | \"bg-danger\" | \"bg-danger-hover\" | \"bg-danger-focus\" | \"bg-danger-active\" | \"bg-danger-tertiary\" | \"bg-danger-tertiary-hover\" | \"bg-danger-tertiary-active\" | \"bg-disabled\" | \"bg-divider\" | \"bg-divider-secondary\" | \"bg-keypad-btn-active\" | \"bg-loading-progress\" | \"bg-loading-track\" | \"bg-segment-hover\" | \"bg-segment-control\" | \"bg-selected\" | \"bg-sidebar\" | \"bg-sidebar-icon\" | \"bg-sidebar-icon-hover\" | \"bg-sidebar-icon-selected\" | \"bg-sidebar-item-hover\" | \"bg-sidebar-item-selected\" | \"bg-site-footer\" | \"bg-site-footer-action\" | \"bg-site-footer-action-hover\" | \"bg-site-footer-action-active\" | \"bg-site-footer-field\" | \"bg-slider-handle\" | \"bg-status-error\" | \"bg-status-info\" | \"bg-status-success\" | \"bg-status-warning\" | \"bg-tab\" | \"bg-tab-hover\" | \"bg-tab-selected\" | \"bg-table-alt-row\" | \"bg-table-header\" | \"bg-table-row-hover\" | \"bg-table-row-selected-expanded\" | \"bg-table-selected-row\" | \"bg-textarea-count\" | \"bg-tile\" | \"bg-tile-hover\" | \"bg-tile-selected\" | \"bg-tile-selected-hover\" | \"bg-toggle-switch\" | \"bg-toggle-switch-hover\" | \"bg-toggle-switch-selected-disabled\" | \"bg-transparent\" | \"bg-accent1-primary\" | \"bg-accent1-secondary\" | \"bg-accent1-tertiary\" | \"bg-accent2-primary\" | \"bg-accent2-secondary\" | \"bg-accent2-tertiary\" | \"bg-accent3-primary\" | \"bg-accent3-secondary\" | \"bg-accent3-tertiary\" | \"bg-accent4-primary\" | \"bg-accent4-secondary\" | \"bg-accent4-tertiary\" | \"bg-accent5-primary\" | \"bg-accent5-secondary\" | \"bg-accent5-tertiary\" | \"bg-accent6-primary\" | \"bg-accent6-secondary\" | \"bg-accent6-tertiary\" | \"bg-accent7-primary\" | \"bg-accent7-secondary\" | \"bg-accent7-tertiary\" | \"bg-accent8-primary\" | \"bg-accent8-secondary\" | \"bg-accent8-tertiary\" | \"bg-accent9-primary\" | \"bg-accent9-secondary\" | \"bg-accent9-tertiary\" | \"bg-accent10-primary\" | \"bg-accent10-secondary\" | \"bg-accent10-tertiary\" | \"bg-date-picker-range\"",
+        "references": {
+          "BackgroundColorsTokenType": {
+            "location": "import",
+            "path": "../../types/design-token.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "Specifies the background color of the chip.\n\nThis property is only applicable when using the `filled-background` variant,\n   which is a specific style option for the chip."
+      },
+      "attribute": "bg-color",
+      "reflect": false,
+      "defaultValue": "'bg-chip'"
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TextColorsTokenType",
+        "resolved": "\"text-primary\" | \"text-secondary\" | \"text-inverted-primary\" | \"text-inverted-secondary\" | \"text-black\" | \"text-white\" | \"text-brand\" | \"text-danger-link\" | \"text-danger-link-hover\" | \"text-danger-link-active\" | \"text-danger-link-focus\" | \"text-danger-link-visited\" | \"text-disabled\" | \"text-error\" | \"text-input-disabled\" | \"text-input-placeholder\" | \"text-link\" | \"text-link-hover\" | \"text-link-active\" | \"text-link-focus\" | \"text-link-visited\" | \"text-on-action\" | \"text-on-danger\" | \"text-on-disabled\" | \"text-sidebar-link\" | \"text-sidebar-link-hover\" | \"text-sidebar-link-selected\" | \"text-site-footer-link\" | \"text-site-footer-link-hover\" | \"text-site-footer-link-active\" | \"text-success\" | \"text-inverted-success\" | \"text-accent1-primary\" | \"text-accent2-primary\" | \"text-accent3-primary\" | \"text-accent4-primary\" | \"text-accent5-primary\" | \"text-accent6-primary\" | \"text-accent7-primary\" | \"text-accent8-primary\" | \"text-accent9-primary\" | \"text-accent10-primary\"",
+        "references": {
+          "TextColorsTokenType": {
+            "location": "import",
+            "path": "../../types/design-token.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "Specifies the color of the text displayed within the chip."
+      },
+      "attribute": "text-color",
+      "reflect": false,
+      "defaultValue": "'text-primary'"
+    },
+    "statusColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "BackgroundColorsTokenType",
+        "resolved": "\"bg-brand\" | \"bg-page\" | \"bg-primary\" | \"bg-secondary\" | \"bg-tertiary\" | \"bg-quaternary\" | \"bg-inverted-primary\" | \"bg-inverted-secondary\" | \"bg-inverted-tertiary\" | \"bg-inverted-quaternary\" | \"bg-action\" | \"bg-action-hover\" | \"bg-action-focus\" | \"bg-action-active\" | \"bg-action-quaternary\" | \"bg-action-quaternary-hover\" | \"bg-action-quaternary-active\" | \"bg-action-secondary\" | \"bg-action-secondary-hover\" | \"bg-action-secondary-active\" | \"bg-action-tertiary\" | \"bg-action-tertiary-hover\" | \"bg-action-tertiary-active\" | \"bg-app-header\" | \"bg-backdrop-modal\" | \"bg-backdrop-popover\" | \"bg-backdrop-sidebar\" | \"bg-chip\" | \"bg-chip-hover\" | \"bg-chip-active\" | \"bg-danger\" | \"bg-danger-hover\" | \"bg-danger-focus\" | \"bg-danger-active\" | \"bg-danger-tertiary\" | \"bg-danger-tertiary-hover\" | \"bg-danger-tertiary-active\" | \"bg-disabled\" | \"bg-divider\" | \"bg-divider-secondary\" | \"bg-keypad-btn-active\" | \"bg-loading-progress\" | \"bg-loading-track\" | \"bg-segment-hover\" | \"bg-segment-control\" | \"bg-selected\" | \"bg-sidebar\" | \"bg-sidebar-icon\" | \"bg-sidebar-icon-hover\" | \"bg-sidebar-icon-selected\" | \"bg-sidebar-item-hover\" | \"bg-sidebar-item-selected\" | \"bg-site-footer\" | \"bg-site-footer-action\" | \"bg-site-footer-action-hover\" | \"bg-site-footer-action-active\" | \"bg-site-footer-field\" | \"bg-slider-handle\" | \"bg-status-error\" | \"bg-status-info\" | \"bg-status-success\" | \"bg-status-warning\" | \"bg-tab\" | \"bg-tab-hover\" | \"bg-tab-selected\" | \"bg-table-alt-row\" | \"bg-table-header\" | \"bg-table-row-hover\" | \"bg-table-row-selected-expanded\" | \"bg-table-selected-row\" | \"bg-textarea-count\" | \"bg-tile\" | \"bg-tile-hover\" | \"bg-tile-selected\" | \"bg-tile-selected-hover\" | \"bg-toggle-switch\" | \"bg-toggle-switch-hover\" | \"bg-toggle-switch-selected-disabled\" | \"bg-transparent\" | \"bg-accent1-primary\" | \"bg-accent1-secondary\" | \"bg-accent1-tertiary\" | \"bg-accent2-primary\" | \"bg-accent2-secondary\" | \"bg-accent2-tertiary\" | \"bg-accent3-primary\" | \"bg-accent3-secondary\" | \"bg-accent3-tertiary\" | \"bg-accent4-primary\" | \"bg-accent4-secondary\" | \"bg-accent4-tertiary\" | \"bg-accent5-primary\" | \"bg-accent5-secondary\" | \"bg-accent5-tertiary\" | \"bg-accent6-primary\" | \"bg-accent6-secondary\" | \"bg-accent6-tertiary\" | \"bg-accent7-primary\" | \"bg-accent7-secondary\" | \"bg-accent7-tertiary\" | \"bg-accent8-primary\" | \"bg-accent8-secondary\" | \"bg-accent8-tertiary\" | \"bg-accent9-primary\" | \"bg-accent9-secondary\" | \"bg-accent9-tertiary\" | \"bg-accent10-primary\" | \"bg-accent10-secondary\" | \"bg-accent10-tertiary\" | \"bg-date-picker-range\"",
+        "references": {
+          "BackgroundColorsTokenType": {
+            "location": "import",
+            "path": "../../types/design-token.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "Specifies the color of the status dot when\n   the chip's type is set to `status`."
+      },
+      "attribute": "status-color",
+      "reflect": false,
+      "defaultValue": "'bg-status-info'"
+    },
+    "chipType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaChipType",
+        "resolved": "\"label\" | \"status\"",
+        "references": {
+          "VegaChipType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "Specifies the type of the chip,\n   determining its visual appearance and behavior.\n\nThere are two available options: `status` and `label`:\n- When `chipType` is set to `status`, the chip will display a dot as a prefix.\n   This style is commonly used to indicate a specific status\n   or state associated with the chip.\n   The `icon` and `iconAlign` properties are disabled in this mode.\n- On the other hand, when `chipType` is set to `label`,\n   the chip allows for more flexibility in positioning the icon.\n   You can choose to have the icon as a prefix or a suffix to the label text.\n   This type is commonly used when the chip represents a label or category."
+      },
+      "attribute": "chip-type",
+      "reflect": false,
+      "defaultValue": "'label'"
+    },
+    "showCloseIcon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "Controls the visibility of a close button within the chip."
+      },
+      "attribute": "show-close-icon",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "Displays an icon in the chip. This property is applicable only when\n   the chip's type is set to `label`."
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "iconAlign": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaChipIconAlign",
+        "resolved": "\"left\" | \"right\"",
+        "references": {
+          "VegaChipIconAlign": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "Specifies the placement or alignment of the icon within\n   the chip in relation to the chip's text."
+      },
+      "attribute": "icon-align",
+      "reflect": false,
+      "defaultValue": "'left'"
+    }
+  }; }
+  static get states() { return {
+    "currentBreakpoint": {},
+    "currentSize": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaClose",
+      "name": "vegaClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "An event emitter notifying the click event of the close button of the chip.\n\nThis event is only dispatched when the `showCloseIcon` property is set to `true`."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
+          }],
+        "text": "An event emitter notifying the click event of the close button of the chip."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "vegaClick",
+      "name": "vegaClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "An event emitter notifying the click event of the chip.\n\nThis event is only dispatched when the `clickable` property is set to `true`."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
+          }],
+        "text": "An event emitter notifying the click event of the chip."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "size",
+      "methodName": "watchSize"
+    }]; }
+}
+VegaChip.iconSizeMap = {
+  'extra-small': 'size-8',
+  'small': 'size-12',
+  'default': 'size-16',
+  'large': 'size-20',
+};
+VegaChip.closeIconSizeMap = {
+  'extra-small': 'size-8',
+  'small': 'size-8',
+  'default': 'size-12',
+  'large': 'size-16',
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaChip.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaChip.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaChip.prototype, "flexEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaChip.prototype, "closeEventEmit", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaChip.prototype, "clickEventEmit", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaChip.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);