@globalpayments/vega 2.28.0 → 2.29.0

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

@@ -0,0 +1,422 @@
+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 { h, Component, Element, Event, Fragment, Host, Method, Prop, Watch, Listen, State, } from '@stencil/core';
+import { flattenChildren } from '../../utils/array';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { isObjectEmpty } from '../../utils/misc';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaSidenavBackdropController } from './slimmers/controllers/vega-sidenav-backdrop-controller';
+import { VegaSidenavCollapseButtonRenderer } from './slimmers/renderers/vega-sidenav-collapse-button-renderer';
+import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
+import { VegaSidenavOpenStatusController } from './slimmers/controllers/vega-sidenav-open-status-controller';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaStateUpdate } from '../../helpers/event-manager/event-id/vega-event-id';
+/**
+ * @deprecated This component will be removed soon, please consider using `vega-left-nav` component instead.
+ * @vegaVersion 2.29.0
+ */
+export class VegaSidenav {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.openStateNotifySlimmer = createSubStateNotifySlimmer(VegaSidenav, 'openState', 'watchOpenState');
+    this.backdropController = new VegaSidenavBackdropController();
+    this.collapseButtonRenderer = new VegaSidenavCollapseButtonRenderer();
+    this.openStatusController = new VegaSidenavOpenStatusController();
+    this.stateUpdateEmitter = createEventEmitSlimmer(VegaSidenav, VegaStateUpdate);
+    this.openState = 'close';
+    /**
+     * Provides additional information or context in the form of
+     *    a footnote in the side nav footer.
+     *
+     * @vegaVersion 2.29.0
+     */
+    this.footnote = '';
+    /**
+     * Specifies the configuration for the header of the side nav,
+     *    allowing customization of the logo and headline.
+     *
+     * @vegaVersion 2.29.0
+     */
+    this.headerConfig = {};
+    /**
+     * Specifies the default open behavior for the side nav across
+     *    different screen sizes and disables collapse for
+     *    large screens.
+     *
+     * @vegaVersion 2.29.0
+     */
+    this.openByDefault = 'close';
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-sidenav-e2e-mouse-enter-and-mouse-leave-and-click}
+     */
+    /* istanbul ignore next */
+    this.attachMouseEventToContent = () => {
+      this.content.addEventListener('mouseenter', (e) => {
+        e.stopPropagation();
+        this.openStatusController.setSideNavOpenStatus('hoverOpen');
+      });
+      this.content.addEventListener('mouseleave', (e) => {
+        e.stopPropagation();
+        this.openStatusController.setSideNavOpenStatus('hoverClose');
+      });
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-sidenav-e2e-with-source-with-child}
+     * @see{module:vega-sidenav-e2e-with-source-without-child}
+     */
+    /* istanbul ignore next */
+    this.renderSideBarListBySource = () => {
+      var _a;
+      return (h(Fragment, null, (_a = this.source) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
+        if (item === null || item === void 0 ? void 0 : item.children) {
+          return (h("vega-sidenav-group", { key: index, icon: item.icon || 'globe', label: item.name }, item.children.map((child, childIndex) => (h("vega-sidenav-link", { key: `${index}_${childIndex}`, url: child.url, selected: child.selected }, child.name)))));
+        }
+        else {
+          return (h("vega-sidenav-link", { key: index, icon: item.icon || 'globe', url: item.url, selected: item.selected }, item.name));
+        }
+      })));
+    };
+  }
+  /**
+   * The method to used notify the sub state the parent state value changed
+   */
+  watchOpenState() {
+    methodPlaceholder();
+  }
+  /**
+   * clear inner content in `div.vega-nav-list` if previousSource is empty.
+   * to avoid untracked sidenav items (render by slot) keeping existed while source updated.
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-with-source-with-child}
+   */
+  /* istanbul ignore next */
+  watchSourceChange(currentSource, previousSource) {
+    if (currentSource) {
+      this.validSource();
+    }
+    if (!(previousSource === null || previousSource === void 0 ? void 0 : previousSource.length)) {
+      this.host
+        .querySelectorAll('vega-sidenav-link, vega-sidenav-group')
+        .forEach((el) => el.remove());
+    }
+  }
+  watchOpenByDefaultChange() {
+    methodPlaceholder();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-with-source-with-duplicated-selected}
+   * @see{module:vega-sidenav-e2e-with-source-without-child}
+   */
+  /* istanbul ignore next */
+  componentWillLoad() {
+    this.source && this.validSource();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop}
+   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop-to-mobile}
+   */
+  /* istanbul ignore next */
+  componentDidLoad() {
+    this.attachMouseEventToContent();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
+   */
+  /* istanbul ignore next */
+  collapseSidenavByBackDropClick(e) {
+    const target = e.target;
+    if (target.classList.contains(VegaSidenavBackdropController.backdropClassName)) {
+      this.openStatusController.setSideNavOpenStatus('clickClose');
+    }
+  }
+  /* The below method is e2e-test covered in
+   * @see{module:vega-sidenav-toggle-and-vegaStateUpdate}
+   * @see{module:vega-sidenav-phone-call-toggle-method-change-position}
+   */
+  /* istanbul ignore next */
+  /**
+   * Invoke this method to toggle the side navigation menu.
+   *
+   * @vegaVersion 2.29.0
+   */
+  async toggle() {
+    this.openStatusController.toggleSidenav();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-desktop-not-show-backdrop}
+   * @see{module:vega-sidenav-mobile-show-backdrop}
+   */
+  render() {
+    return sanitizeVegaComponent(h(Host, null,
+      h("div", { class: "vega-sidebar", ref: (el) => this.openStatusController.setSidenavRef(el) },
+        h("div", { class: "vega-sidebar-content-container", ref: (el) => (this.content = el) },
+          h(Fragment, null,
+            !isObjectEmpty(this.headerConfig) && this.renderSideBarHeader(),
+            this.renderSideBarList(),
+            this.renderSideBarFooter())),
+        this.collapseButtonRenderer.render())), this.host);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-with-source-with-duplicated-selected}
+   * @see{module:vega-sidenav-e2e-with-source-without-child}
+   */
+  /* istanbul ignore next */
+  validSource() {
+    const selectedItems = flattenChildren(this.source).filter((item) => item.selected);
+    if (selectedItems.length > 1) {
+      throw new Error('There should be only one item selected at the same time.');
+    }
+  }
+  /**
+   * The current div uses a named slot and has a sibling above it, if you skip rendering this whole element by checking a variable,
+   * it will cause the slot's position to move into the sibling.
+   * For specific examples, see the documentation of stencil_slot_bug.md
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-with-source-with-child}
+   * @see{module:vega-sidenav-e2e-with-source-without-length}
+   */
+  /* istanbul ignore next */
+  renderSideBarList() {
+    var _a;
+    return (h(Fragment, null,
+      isObjectEmpty(this.headerConfig) ? h("div", { class: "header-placeholder" }) : null,
+      h("slot", { name: "before-list-slot" }),
+      h("div", { class: "vega-nav-list" }, ((_a = this.source) === null || _a === void 0 ? void 0 : _a.length) ? this.renderSideBarListBySource() : h("slot", null))));
+  }
+  renderSideBarHeader() {
+    const { collapseLogo, expandLogo, headline } = this.headerConfig;
+    return (h("div", { class: "vega-sidebar-header" },
+      h("div", { class: "vega-sidebar-header-collapse-container" }, collapseLogo && h("img", { src: collapseLogo, alt: 'collapse logo' })),
+      h("div", { class: "vega-sidebar-header-expand-container" },
+        expandLogo && h("img", { src: expandLogo, alt: 'expand logo' }),
+        headline && h("div", { class: "vega-sidebar-headline" }, headline))));
+  }
+  renderSideBarFooter() {
+    return (this.footnote && (h("div", { class: "vega-nav-footer" },
+      h("div", { class: "vega-nav-footnote" }, this.footnote))));
+  }
+  static get is() { return "vega-sidenav"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-sidenav.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-sidenav.css"]
+  }; }
+  static get properties() { return {
+    "source": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SidebarTopLevelItem[]",
+        "resolved": "SidebarTopLevelItem[]",
+        "references": {
+          "SidebarTopLevelItem": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "Defines the data that is used to generate the items\n   in the side nav list."
+      }
+    },
+    "footnote": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "Provides additional information or context in the form of\n   a footnote in the side nav footer."
+      },
+      "attribute": "footnote",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "headerConfig": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SidebarHeaderConfig",
+        "resolved": "{ headline?: string; expandLogo?: string; collapseLogo?: string; }",
+        "references": {
+          "SidebarHeaderConfig": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "Specifies the configuration for the header of the side nav,\n   allowing customization of the logo and headline."
+      },
+      "defaultValue": "{}"
+    },
+    "openByDefault": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<OpenByDefaultType>",
+        "resolved": "\"close\" | \"disableCollapse\" | \"open\" | { S?: OpenByDefaultType; M?: OpenByDefaultType; L?: OpenByDefaultType; XL?: OpenByDefaultType; default?: OpenByDefaultType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "OpenByDefaultType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "Specifies the default open behavior for the side nav across\n   different screen sizes and disables collapse for\n   large screens."
+      },
+      "attribute": "open-by-default",
+      "reflect": false,
+      "defaultValue": "'close'"
+    }
+  }; }
+  static get states() { return {
+    "openState": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaStateUpdate",
+      "name": "vegaStateUpdate",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "An event emitter notifying the completion of a navigation menu state change (open or close)."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "stateUpdate",
+      "name": "stateUpdate",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "An event emitter notifying the completion of a navigation menu state change (open or close)."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "toggle": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to toggle the side navigation menu.",
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "openState",
+      "methodName": "watchOpenState"
+    }, {
+      "propName": "source",
+      "methodName": "watchSourceChange"
+    }, {
+      "propName": "openByDefault",
+      "methodName": "watchOpenByDefaultChange"
+    }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "collapseSidenavByBackDropClick",
+      "target": "window",
+      "capture": true,
+      "passive": false
+    }]; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaSidenav.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenav.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenav.prototype, "openStateNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenav.prototype, "backdropController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenav.prototype, "collapseButtonRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenav.prototype, "openStatusController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenav.prototype, "stateUpdateEmitter", void 0);

package/dist/collection/helpers/event-manager/event-id/component-event-id-map.js

@@ -27,6 +27,7 @@ const entries = [
   ['vega-image-uploader', [VegaChange, VegaRemove, VegaCancel]],
   ['vega-input', [VegaChange, VegaFocus, VegaBlur, VegaLabelButtonClick]],
   ['vega-input-credit-card', [VegaChange, VegaBlur, VegaFocus]],
+  ['vega-input-numeric', [VegaChange]],
   ['vega-input-phone-number', [VegaChange, VegaCountryChange]],
   ['vega-input-range', [VegaChange]],
   ['vega-input-select', [VegaChange, VegaSearch]],
@@ -46,6 +47,8 @@ const entries = [
   ['vega-selection-chip-group', [VegaChange]],
   ['vega-selection-tile', [VegaChange]],
   ['vega-selection-tile-group', [VegaChange]],
+  ['vega-sidenav', [VegaStateUpdate]],
+  ['vega-sidenav-link', [VegaClick]],
   ['vega-signature-capture', [VegaChange]],
   ['vega-stepper', [VegaChange]],
   ['vega-tab-group', [VegaClick]],

package/dist/collection/helpers/event-manager/event-id/vega-internal-event-id.js

@@ -31,3 +31,4 @@ export const VegaInternalTableRowSelectAll = new VegaInternalEventID('tableRowSe
 export const VegaInternalTableRowExpand = new VegaInternalEventID('tableRowExpand');
 export const VegaDropdownRenderItemInternalOverridden = new VegaInternalEventID('dropdownRenderItemInternalOverridden');
 export const VegaDropdownSearchInternalOverridden = new VegaInternalEventID('VegaDropdownSearchInternalOverridden');
+export const VegaInternalSidenavLinkClick = new VegaInternalEventID('sidenavLinkClick');

package/dist/collection/helpers/formatter/string-formatter/number-thousand-comma-strategy.js

@@ -57,9 +57,8 @@ export class NumberThousandCommaStrategy extends NumberMaskStrategy {
     if (!input.length)
       return input;
     const inputValue = input.replace(/[^\d.-]/g, '');
-    const { precision } = this.maskConfig;
     const pointIndex = inputValue.indexOf('.');
-    const decimals = precision && inputValue.length > 1 && pointIndex >= 1 ? inputValue.slice(pointIndex) : '';
+    const decimals = inputValue.length > 1 && pointIndex >= 1 ? inputValue.slice(pointIndex) : '';
     const numValue = Number(inputValue.split('.')[0]);
     if (!isNaN(numValue) && numValue <= Number.MAX_SAFE_INTEGER) {
       return numValue.toLocaleString('en-US') + decimals;

package/dist/collection/helpers/formatter/test/string-formatter/number-thousand-comma-mask-strategy.test.js

@@ -29,4 +29,12 @@ describe('NumberThousandCommaStrategy', () => {
     expect(numberStrategy.calculateCaretPosition('1,23', 4)).toBe(3);
     expect(numberStrategy.calculateCaretPosition('-123', 4)).toBe(4);
   });
+  it('format thousand comma if set property thousandComma is true and not set precision', () => {
+    const numberStrategy = new NumberThousandCommaStrategy({});
+    expect(numberStrategy.format('123')).toBe('123');
+    expect(numberStrategy.format('0.12345')).toBe('0.12345');
+    expect(numberStrategy.format('12.12')).toBe('12.12');
+    expect(numberStrategy.format('123456.012')).toBe('123,456.012');
+    expect(numberStrategy.format('-123456.012')).toBe('-123,456.012');
+  });
 });

package/dist/collection/helpers/slimmers/string-input-formatter-slimmer.js

@@ -57,7 +57,10 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
       const rawValue = target.value;
       const caretPosition = target.selectionStart; // selectionStart is nullable, link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-textarea/input-selectionstart
       if (this.inputFormatStrategy) {
-        const maskedValue = this.inputFormatStrategy.format(rawValue, caretPosition);
+        const maskedValue = this.inputFormatStrategy.format(rawValue, 
+        // Paste input is difference with type input, it can set much characters at one time,
+        // so we should make caretPosition as undefined to format all value.
+        e.inputType === 'insertFromPaste' ? null : caretPosition);
         this.updateInputValue(rawValue, maskedValue);
         this.updateInputCaretPosition(rawValue, caretPosition);
       }
@@ -68,12 +71,8 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
      * @param {ClipboardEvent} e - paste event
      */
     this.onPaste = (e) => {
-      var _a;
-      e.preventDefault();
-      const rawValue = ((_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) || '';
-      if (this.inputFormatStrategy) {
-        const maskedValue = this.inputFormatStrategy.format(rawValue);
-        this.updateInputValue(rawValue, maskedValue);
+      if (this.disableCopyPaste) {
+        e.preventDefault();
       }
     };
   }
@@ -90,9 +89,7 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
       this.onInit();
       if (this.inputFormatStrategy) {
         this.inputElement.addEventListener('input', this.onKeyDown, { capture: true });
-        if (!this.disableCopyPaste) {
-          this.inputElement.addEventListener('paste', this.onPaste, { capture: true });
-        }
+        this.inputElement.addEventListener('paste', this.onPaste, { capture: true });
       }
       if (this.blurFormatStrategy) {
         this.inputElement.addEventListener('blur', this.onBlur, { capture: true });
@@ -107,9 +104,7 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
     if (this.inputElement) {
       if (this.inputFormatStrategy) {
         this.inputElement.removeEventListener('input', this.onKeyDown, { capture: true });
-        if (!this.disableCopyPaste) {
-          this.inputElement.removeEventListener('paste', this.onPaste, { capture: true });
-        }
+        this.inputElement.removeEventListener('paste', this.onPaste, { capture: true });
       }
       if (this.blurFormatStrategy) {
         this.inputElement.removeEventListener('blur', this.onBlur, { capture: true });

package/dist/collection/helpers/slimmers/sub-state/sub-state-notify-slimmer.js

@@ -9,14 +9,17 @@ import { SubStateNotifySlimmerBase } from './sub-state-notify-slimmer-base';
  * @returns {SubStateNotifySlimmerBase} - SubState notify slimmer
  */
 export function createSubStateNotifySlimmer(mapFromClass, propName, watchMethodName) {
+  const methodsMap = [
+    { mapFrom: 'connectedCallback', mapTo: 'connectedCallback' },
+    { mapFrom: 'disconnectedCallback', mapTo: 'disconnectedCallback' },
+  ];
+  if (watchMethodName) {
+    methodsMap.push({ mapFrom: watchMethodName, mapTo: 'subStateNotify' });
+  }
   return createDynamicSlimmer(mapFromClass, SubStateNotifySlimmerBase, [
     { mapFrom: 'host', mapTo: 'host' },
     { mapFrom: propName, mapTo: 'propValue' },
-  ], [
-    { mapFrom: watchMethodName, mapTo: 'subStateNotify' },
-    { mapFrom: 'connectedCallback', mapTo: 'connectedCallback' },
-    { mapFrom: 'disconnectedCallback', mapTo: 'disconnectedCallback' },
-  ], [
+  ], methodsMap, [
     {
       propName: propName,
     },

package/dist/collection/helpers/slimmers/sub-state/test/sub-state-observer-slimmer.test.js

@@ -21,9 +21,11 @@ describe('SubStateObserverSlimmer', () => {
       this.parentState = 'parent only';
       // Mock component @State by using protected
       this.name = 'parent name';
+      this.staticState = true;
       this.nameNotifySlimmer = createSubStateNotifySlimmer(MockedParentComponent, 'name', 'watchName');
       this.ageNotifySlimmer = createSubStateNotifySlimmer(MockedParentComponent, 'age', 'watchAge');
       this.parentStateNotifySlimmer = createSubStateNotifySlimmer(MockedParentComponent, 'parentState', 'watchParentState');
+      this.staticStateNotifySlimmer = createSubStateNotifySlimmer(MockedParentComponent, 'staticState');
     }
     connectedCallback() {
       jest.fn();
@@ -53,6 +55,9 @@ describe('SubStateObserverSlimmer', () => {
   __decorate([
     InjectVegaSlimmer()
   ], MockedParentComponent.prototype, "parentStateNotifySlimmer", void 0);
+  __decorate([
+    InjectVegaSlimmer()
+  ], MockedParentComponent.prototype, "staticStateNotifySlimmer", void 0);
   class ChildStateSlimmer extends SubStateObserverSlimmer {
     constructor(entry) {
       super({
@@ -69,6 +74,10 @@ describe('SubStateObserverSlimmer', () => {
               this.age = value - 1;
             },
           },
+          {
+            subStateName: 'staticState',
+            parentStateName: 'staticState',
+          },
         ],
         pullStatesWhenReattached: entry && entry.pullStatesWhenReattached,
       });
@@ -83,6 +92,9 @@ describe('SubStateObserverSlimmer', () => {
   __decorate([
     MapToComponentField({ writable: true })
   ], ChildStateSlimmer.prototype, "age", void 0);
+  __decorate([
+    MapToComponentField({ writable: true })
+  ], ChildStateSlimmer.prototype, "staticState", void 0);
   class ChildComponent {
     constructor(childStateSlimmerEntry) {
       this.host = child;
@@ -108,6 +120,9 @@ describe('SubStateObserverSlimmer', () => {
     getChildState() {
       return this.childState;
     }
+    getStaticState() {
+      return this.staticState;
+    }
   }
   __decorate([
     InjectVegaSlimmer()
@@ -201,4 +216,13 @@ describe('SubStateObserverSlimmer', () => {
     childComponent.connectedCallback();
     expect(childComponent.getName()).toEqual('parent name');
   });
+  it('should subscribe parent static value as expected', () => {
+    const parentComponent = new MockedParentComponent();
+    const childComponent = new ChildComponent();
+    parentComponent.connectedCallback();
+    parentComponent.componentWillLoad();
+    childComponent.connectedCallback();
+    childComponent.componentWillLoad();
+    expect(childComponent.getStaticState()).toEqual(true);
+  });
 });