@heartlandone/vega 2.0.0-temp-test-0.2 → 2.0.0

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

@@ -1,9 +1,17 @@
+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, h, Element, Prop } from '@stencil/core';
 import { formatAndValidResponsiveToken } from '../../utils/designToken';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { arrayToClassString } from '../../utils/ui';
+import { InjectVegaGlobalSlimmer } from 'vega-slimmer/core';
 export class VegaGrid {
   constructor() {
+    this.globalSlimmers = {};
     /**
      * Determines the configuration of the grid columns.
      *    It can be provided as an integer, string, or a responsive map
@@ -53,8 +61,9 @@ export class VegaGrid {
       h("slot", null)), this.host);
   }
   static get is() { return "vega-grid"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["vega-grid.css"]
+    "$": ["vega-grid.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["vega-grid.css"]
@@ -65,7 +74,7 @@ export class VegaGrid {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<GridColumnType>",
-        "resolved": "2 | 9 | 4 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 2 | 9 | 4 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 2 | 9 | 4 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 2 | 9 | 4 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 2 | 9 | 4 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 2 | 9 | 4 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
+        "resolved": "2 | 4 | 9 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 2 | 4 | 9 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 2 | 4 | 9 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 2 | 4 | 9 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 2 | 4 | 9 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 2 | 4 | 9 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -92,7 +101,7 @@ export class VegaGrid {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<GridRowType>",
-        "resolved": "2 | 9 | 4 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 2 | 9 | 4 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 2 | 9 | 4 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 2 | 9 | 4 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 2 | 9 | 4 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 2 | 9 | 4 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
+        "resolved": "2 | 4 | 9 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 2 | 4 | 9 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 2 | 4 | 9 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 2 | 4 | 9 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 2 | 4 | 9 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 2 | 4 | 9 | 3 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -143,3 +152,6 @@ export class VegaGrid {
   }; }
   static get elementRef() { return "host"; }
 }
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaGrid.prototype, "globalSlimmers", void 0);

package/dist/collection/components/vega-icon/vega-icon.css

@@ -0,0 +1,382 @@
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+:host(.v-text-primary),
+.v-text-primary {
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+}
+
+:host(.v-text-secondary),
+.v-text-secondary {
+  color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
+}
+
+:host(.v-text-inverted-primary),
+.v-text-inverted-primary {
+  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
+}
+
+:host(.v-text-inverted-secondary),
+.v-text-inverted-secondary {
+  color: rgba(var(--v-text-inverted-secondary, 188, 186, 213, 1));
+}
+
+:host(.v-text-link),
+.v-text-link {
+  color: rgba(var(--v-text-link, 19, 98, 226, 1));
+}
+
+:host(.v-text-link-hover),
+.v-text-link-hover {
+  color: rgba(var(--v-text-link-hover, 4, 112, 236, 1));
+}
+
+:host(.v-text-link-active),
+.v-text-link-active {
+  color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
+}
+
+:host(.v-text-link-focus),
+.v-text-link-focus {
+  color: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
+}
+
+:host(.v-text-link-visited),
+.v-text-link-visited {
+  color: rgba(var(--v-text-link-visited, 95, 56, 206, 1));
+}
+
+:host(.v-text-danger-link),
+.v-text-danger-link {
+  color: rgba(var(--v-text-danger-link, 230, 50, 87, 1));
+}
+
+:host(.v-text-danger-link-hover),
+.v-text-danger-link-hover {
+  color: rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1));
+}
+
+:host(.v-text-danger-link-active),
+.v-text-danger-link-active {
+  color: rgba(var(--v-text-danger-link-active, 189, 41, 71, 1));
+}
+
+:host(.v-text-danger-link-focus),
+.v-text-danger-link-focus {
+  color: rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1));
+}
+
+:host(.v-text-danger-link-visited),
+.v-text-danger-link-visited {
+  color: rgba(var(--v-text-danger-link-visited, 230, 50, 87, 1));
+}
+
+:host(.v-text-success),
+.v-text-success {
+  color: rgba(var(--v-text-success, 1, 128, 31, 1));
+}
+
+:host(.v-text-error),
+.v-text-error {
+  color: rgba(var(--v-text-error, 189, 41, 71, 1));
+}
+
+:host(.v-text-black),
+.v-text-black {
+  color: rgba(var(--v-text-black, 32, 54, 69, 1));
+}
+
+:host(.v-text-white),
+.v-text-white {
+  color: rgba(var(--v-text-white, 252, 252, 252, 1));
+}
+
+:host(.v-text-disabled),
+.v-text-disabled {
+  color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
+}
+
+:host(.v-text-input-disabled),
+.v-text-input-disabled {
+  color: rgba(var(--v-text-input-disabled, 107, 116, 125, 1));
+}
+
+:host(.v-text-sidebar-link),
+.v-text-sidebar-link {
+  color: rgba(var(--v-text-sidebar-link, 188, 186, 213, 1));
+}
+
+:host(.v-text-sidebar-link-hover),
+.v-text-sidebar-link-hover {
+  color: rgba(var(--v-text-sidebar-link-hover, 18, 18, 39, 1));
+}
+
+:host(.v-text-sidebar-link-selected),
+.v-text-sidebar-link-selected {
+  color: rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1));
+}
+
+:host(.v-text-input-placeholder),
+.v-text-input-placeholder {
+  color: rgba(var(--v-text-input-placeholder, 176, 180, 181, 1));
+}
+
+:host(.v-text-accent1-primary),
+.v-text-accent1-primary {
+  color: rgba(var(--v-text-accent1-primary, 115, 230, 220, 1));
+}
+
+:host(.v-text-accent2-primary),
+.v-text-accent2-primary {
+  color: rgba(var(--v-text-accent2-primary, 128, 107, 255, 1));
+}
+
+:host(.v-text-accent3-primary),
+.v-text-accent3-primary {
+  color: rgba(var(--v-text-accent3-primary, 255, 220, 131, 1));
+}
+
+:host(.v-text-accent4-primary),
+.v-text-accent4-primary {
+  color: rgba(var(--v-text-accent4-primary, 255, 149, 113, 1));
+}
+
+:host(.v-text-accent5-primary),
+.v-text-accent5-primary {
+  color: rgba(var(--v-text-accent5-primary, 0, 187, 255, 1));
+}
+
+:host(.v-text-accent6-primary),
+.v-text-accent6-primary {
+  color: rgba(var(--v-text-accent6-primary, 240, 52, 91, 1));
+}
+
+:host(.v-text-accent7-primary),
+.v-text-accent7-primary {
+  color: rgba(var(--v-text-accent7-primary, 37, 159, 159, 1));
+}
+
+:host(.v-text-accent8-primary),
+.v-text-accent8-primary {
+  color: rgba(var(--v-text-accent8-primary, 86, 61, 130, 1));
+}
+
+:host(.v-text-accent9-primary),
+.v-text-accent9-primary {
+  color: rgba(var(--v-text-accent9-primary, 255, 191, 63, 1));
+}
+
+:host(.v-text-accent10-primary),
+.v-text-accent10-primary {
+  color: rgba(var(--v-text-accent10-primary, 237, 122, 35, 1));
+}
+
+:host(.v-text-site-footer-link),
+.v-text-site-footer-link {
+  color: rgba(var(--v-text-site-footer-link, 171, 198, 216, 1));
+}
+
+:host(.v-text-site-footer-link-hover),
+.v-text-site-footer-link-hover {
+  color: rgba(var(--v-text-site-footer-link-hover, 199, 217, 229, 1));
+}
+
+:host(.v-text-site-footer-link-active),
+.v-text-site-footer-link-active {
+  color: rgba(var(--v-text-site-footer-link-active, 143, 179, 203, 1));
+}
+
+:host(.v-text-brand),
+.v-text-brand {
+  color: rgba(var(--v-text-brand, 89, 96, 99, 1));
+}
+
+:host(.v-text-on-action),
+.v-text-on-action {
+  color: rgba(var(--v-text-on-action, 252, 252, 252, 1));
+}
+
+:host(.v-text-on-danger),
+.v-text-on-danger {
+  color: rgba(var(--v-text-on-danger, 252, 252, 252, 1));
+}
+
+:host(.v-text-on-disabled),
+.v-text-on-disabled {
+  color: rgba(var(--v-text-on-disabled, 252, 252, 252, 1));
+}
+
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+:host(.v-w-0),
+.v-w-0 {
+  width: 0px;
+}
+
+:host(.v-w-size-0),
+.v-w-size-0 {
+  width: 0px;
+}
+
+:host(.v-w-size-4),
+.v-w-size-4 {
+  width: 4px;
+}
+
+:host(.v-w-size-8),
+.v-w-size-8 {
+  width: 8px;
+}
+
+:host(.v-w-size-12),
+.v-w-size-12 {
+  width: 12px;
+}
+
+:host(.v-w-size-16),
+.v-w-size-16 {
+  width: 16px;
+}
+
+:host(.v-w-size-20),
+.v-w-size-20 {
+  width: 20px;
+}
+
+:host(.v-w-size-24),
+.v-w-size-24 {
+  width: 24px;
+}
+
+:host(.v-w-size-32),
+.v-w-size-32 {
+  width: 32px;
+}
+
+:host(.v-w-size-40),
+.v-w-size-40 {
+  width: 40px;
+}
+
+:host(.v-w-size-48),
+.v-w-size-48 {
+  width: 48px;
+}
+
+:host(.v-w-size-64),
+.v-w-size-64 {
+  width: 64px;
+}
+
+:host(.v-w-size-72),
+.v-w-size-72 {
+  width: 72px;
+}
+
+:host(.v-w-size-80),
+.v-w-size-80 {
+  width: 80px;
+}
+
+:host(.v-w-size-112),
+.v-w-size-112 {
+  width: 112px;
+}
+
+:host(.v-w-size-2),
+.v-w-size-2 {
+  width: 2px;
+}
+
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+:host(.v-h-0),
+.v-h-0 {
+  height: 0px;
+}
+
+:host(.v-h-size-0),
+.v-h-size-0 {
+  height: 0px;
+}
+
+:host(.v-h-size-4),
+.v-h-size-4 {
+  height: 4px;
+}
+
+:host(.v-h-size-8),
+.v-h-size-8 {
+  height: 8px;
+}
+
+:host(.v-h-size-12),
+.v-h-size-12 {
+  height: 12px;
+}
+
+:host(.v-h-size-16),
+.v-h-size-16 {
+  height: 16px;
+}
+
+:host(.v-h-size-20),
+.v-h-size-20 {
+  height: 20px;
+}
+
+:host(.v-h-size-24),
+.v-h-size-24 {
+  height: 24px;
+}
+
+:host(.v-h-size-32),
+.v-h-size-32 {
+  height: 32px;
+}
+
+:host(.v-h-size-40),
+.v-h-size-40 {
+  height: 40px;
+}
+
+:host(.v-h-size-48),
+.v-h-size-48 {
+  height: 48px;
+}
+
+:host(.v-h-size-64),
+.v-h-size-64 {
+  height: 64px;
+}
+
+:host(.v-h-size-72),
+.v-h-size-72 {
+  height: 72px;
+}
+
+:host(.v-h-size-80),
+.v-h-size-80 {
+  height: 80px;
+}
+
+:host(.v-h-size-112),
+.v-h-size-112 {
+  height: 112px;
+}
+
+:host(.v-h-size-2),
+.v-h-size-2 {
+  height: 2px;
+}
+
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+:host {
+  display: inline-flex;
+  user-select: none;
+}
+
+i {
+  line-height: 1;
+}
+
+:host(:not(.vega-auto-size)) ::slotted(svg) {
+  width: 100%;
+  height: 100%;
+}

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

@@ -1,59 +1,192 @@
-import { Component, Host, Prop, h, Element } from '@stencil/core';
+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, h, Element, Watch } from '@stencil/core';
 import { getIconFromToken, Icons } from '../../constants/tokens/icons';
 import { Spacing } from '../../constants/tokens/spacing';
-import { FeatureFlag } from '../../helpers/publicApi';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { formatAndValidTextColor } from '../../utils/designToken';
 import { arrayToClassString } from '../../utils/ui';
+import { VegaIconManager } from '../../helpers/icon/iconManager';
+import { InjectVegaGlobalSlimmer } from 'vega-slimmer/core';
 export class VegaIcon {
   constructor() {
+    this.globalSlimmers = {};
     /**
      * Specifies the width and height of the icon.
      *    For Third Party Icons (e.g., Font Awesome),
      *    it sets the icon's font-size.
      */
     this.size = 'size-16';
+    /**
+     * The below method is e2e-test covered in
+     * @see {module:console-warn-when-load-fa-lib-timeout}
+     */
+    /* istanbul ignore next */
+    this.cloneFAIconStyles = () => {
+      const isFAIcon = !Icons.find((icon) => icon === this.icon);
+      if (isFAIcon) {
+        const iconStyleHTML = this.getIconStyleHTML();
+        if (iconStyleHTML) {
+          this.appendStyles(iconStyleHTML);
+        }
+        let count = 0;
+        const timerId = window.setInterval(() => {
+          if (count < 10) {
+            count++;
+            const iconStyleHTML = this.getIconStyleHTML();
+            if (iconStyleHTML) {
+              this.appendStyles(iconStyleHTML);
+              clearInterval(timerId);
+              return;
+            }
+          }
+          else {
+            console.warn('[Vega] Loading Font Awesome timeout.');
+            clearInterval(timerId);
+            return;
+          }
+        }, 300);
+      }
+    };
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see {module:icon-changed-from-vega-icon-to-fa-icon-class}
+   */
+  /* istanbul ignore next */
+  watchIcon() {
+    this.cloneFAIconStyles();
+  }
+  componentWillLoad() {
+    this.cloneFAIconStyles();
   }
   render() {
     const iconFromTokenIndex = Icons.findIndex((icon) => {
       return icon === this.icon;
     });
-    if (iconFromTokenIndex > -1) {
-      return this.renderForVegaIconToken();
+    if (VegaIconManager.hasIcon(this.icon)) {
+      const { icon, autoSize } = VegaIconManager.getIcon(this.icon);
+      const iconSize = autoSize ? null : this.size;
+      return this.renderForVegaIconToken(icon, iconSize, autoSize);
+    }
+    else if (iconFromTokenIndex > -1) {
+      return this.renderForVegaIconToken(getIconFromToken(this.icon), this.size);
     }
     else {
+      /**
+       * The below method is e2e-test covered in
+       * @see {module:render-correct-size-with-fa-icon}
+       * @see {module:append-fa-icon-styles-to-shadow-dom}
+       */
+      /* istanbul ignore next */
       return this.renderForThirdPartyIcon();
     }
   }
-  renderForVegaIconToken() {
+  renderForVegaIconToken(icon, size, isAutoSize = false) {
+    const sizeClassName = size ? this.formatAndValidSize(this.size) : null;
     return sanitizeVegaComponent(h(Host, { class: arrayToClassString([
-        this.formatAndValidSize(this.size),
+        sizeClassName,
         this.color && formatAndValidTextColor(this.color),
-      ]), innerHTML: this.getIcon() }), this.host);
+        isAutoSize && 'vega-auto-size',
+      ]), innerHTML: icon },
+      h("slot", null)), this.host);
   }
+  /**
+   * The below method is e2e-test covered in
+   * @see {module:render-correct-size-with-fa-icon}
+   * @see {module:append-fa-icon-styles-to-shadow-dom}
+   */
+  /* istanbul ignore next */
   renderForThirdPartyIcon() {
-    return sanitizeVegaComponent(h(Host, { class: arrayToClassString([this.color && formatAndValidTextColor(this.color)]), style: FeatureFlag.isEnabled('VEGA_ICON.USE_SIZE_PROP_FOR_THIRD_PARTY_ICONS')
-        ? this.formatThirdPartyIconSize(this.size)
-        : null, innerHTML: this.getIcon() }), this.host);
-  }
-  getIcon() {
-    if (this.icon) {
-      const svgIconString = getIconFromToken(this.icon);
-      if (svgIconString) {
-        return svgIconString;
-      }
-      else {
-        return `<i class="${this.icon}"></i>`;
-      }
-    }
+    return sanitizeVegaComponent(h(Host, { class: arrayToClassString([this.color && formatAndValidTextColor(this.color)]), style: this.formatThirdPartyIconSize(this.size) },
+      h("i", { part: "icon", class: this.icon })), this.host);
   }
   formatAndValidSize(size) {
     return `v-w-${size} v-h-${size}`;
   }
+  /**
+   * The below method is e2e-test covered in
+   * @see {module:render-correct-size-with-fa-icon}
+   */
+  /* istanbul ignore next */
   formatThirdPartyIconSize(size) {
     return { 'font-size': `${Spacing[size]}px` };
   }
+  /**
+   * The below method is e2e-test covered in
+   * @see {module:append-fa-icon-styles-to-shadow-dom}
+   */
+  /* istanbul ignore next */
+  appendStyles(iconStyles) {
+    var _a;
+    if (iconStyles) {
+      const styleElement = (_a = this.host.shadowRoot.querySelector('#fa-icon-styles')) !== null && _a !== void 0 ? _a : document.createElement('style');
+      styleElement.id = 'fa-icon-styles';
+      styleElement.innerHTML = iconStyles;
+      this.host.shadowRoot.appendChild(styleElement);
+    }
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see {module:append-fa-icon-styles-to-shadow-dom}
+   */
+  /* istanbul ignore next */
+  getIconStyleHTML() {
+    var _a;
+    if (VegaIcon.iconStyleCache.has(this.icon)) {
+      return VegaIcon.iconStyleCache.get(this.icon);
+    }
+    else {
+      const iconElement = document.createElement('i');
+      iconElement.className = this.icon;
+      iconElement.style.display = 'none';
+      document.body.appendChild(iconElement);
+      const computedStyle = getComputedStyle(iconElement);
+      // `fontFamily` is null in spec test. Skip it by using '?'
+      if ((_a = computedStyle.fontFamily) === null || _a === void 0 ? void 0 : _a.includes('Font Awesome')) {
+        const pseudoBeforeElementStyle = getComputedStyle(iconElement, '::before');
+        const pseudoAfterElementStyle = getComputedStyle(iconElement, '::after');
+        const styleHTML = `
+				i {
+					font-weight: ${computedStyle.fontWeight};
+					font-family: ${computedStyle.fontFamily};
+					font-style: ${computedStyle.fontStyle};
+					position: ${computedStyle.position};
+					letter-spacing: ${computedStyle.letterSpacing};
+				}
+				i::before {
+					content: ${pseudoBeforeElementStyle.content};
+					position: ${pseudoBeforeElementStyle.position};
+					opacity: ${pseudoBeforeElementStyle.opacity};
+				}
+				i::after {
+					content: ${pseudoAfterElementStyle.content};
+					position: ${pseudoAfterElementStyle.position};
+					opacity: ${pseudoAfterElementStyle.opacity};
+				}
+			`.replace(/[\n\t]/gi, '');
+        VegaIcon.iconStyleCache.set(this.icon, styleHTML);
+        document.body.removeChild(iconElement);
+        return styleHTML;
+      }
+      else {
+        document.body.removeChild(iconElement);
+        return null;
+      }
+    }
+  }
   static get is() { return "vega-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-icon.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-icon.css"]
+  }; }
   static get properties() { return {
     "icon": {
       "type": "string",
@@ -119,4 +252,12 @@ export class VegaIcon {
     }
   }; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "icon",
+      "methodName": "watchIcon"
+    }]; }
 }
+VegaIcon.iconStyleCache = new Map();
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaIcon.prototype, "globalSlimmers", void 0);

package/dist/collection/components/vega-image-uploader/slimmers/controllers/vega-image-uploader-actions-visibility-controller.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentMethod, MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import { findParent } from '../../../../utils/ui';
+import { findParent, getDeepActiveElementInShadow } from '../../../../utils/ui';
 /** The `VegaImageUploaderActionsVisibilityController` class is responsible for handling the focus and hiding of backdrop and tooltip elements in a Vega Image Uploader component. */
 export class VegaImageUploaderActionsVisibilityController extends VegaSlimmer {
   /*
@@ -29,7 +29,7 @@ export class VegaImageUploaderActionsVisibilityController extends VegaSlimmer {
    * The activeElement should be div.image-preview-container and replace button
    */
   hideBackDropAndActions() {
-    const activeElement = document.activeElement;
+    const activeElement = getDeepActiveElementInShadow();
     if (activeElement && findParent(activeElement, 'vega-image-uploader') === this.host) {
       activeElement.blur();
     }