@globalpayments/vega 2.28.1 → 2.30.0

package/dist/collection/helpers/slimmers/position-calculation/screen-position-calculation-strategy.js

@@ -0,0 +1,59 @@
+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 { MapToComponentField } from 'vega-slimmer/core';
+import { BasePositionCalculationStrategy } from './base-position-calculation-strategy';
+/**
+ * calculate position by screen container
+ */
+export class ScreenPositionCalculationStrategy extends BasePositionCalculationStrategy {
+  /**
+   * Get the position of the element in the container according to the target element and the placement
+   * If give a translocation, it will apply the translocation to the result.
+   *
+   * @param {boolean} usePreviousPlacement - Should keep use previous placement and alignment.
+   * @returns {ElementPositionBox} A function that takes in a container, element, target, placement, and translocation and
+   * returns an ElementPositionBox.
+   */
+  getPosition(usePreviousPlacement) {
+    const positionBox = usePreviousPlacement
+      ? this.getPositionBox([this.previousPositionBox.placement], [this.previousPositionBox.alignment])
+      : this.getPositionBox();
+    this.previousPositionBox = positionBox;
+    return positionBox;
+  }
+  /**
+   * It returns the position of an element relative to its container and also includes the scroll height of container.
+   *
+   * @returns {ElementBoundBox} An object with the properties width, height, top, and left.
+   */
+  getTargetBoundBox() {
+    const targetRect = this.showConfig.target.getBoundingClientRect();
+    return {
+      width: targetRect.width,
+      height: targetRect.height,
+      top: targetRect.top,
+      left: targetRect.left,
+    };
+  }
+  /**
+   * "Get the width and height of an element."
+   *
+   * The function takes a single parameter, a container element, and returns an object with two
+   * properties: width and height
+   *
+   * @returns {ElementScrollDimension} An object with two properties: width and height.
+   */
+  getElementScrollDimension() {
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    };
+  }
+}
+__decorate([
+  MapToComponentField()
+], ScreenPositionCalculationStrategy.prototype, "showConfig", void 0);

package/dist/collection/{utils/test/position.test.js → helpers/slimmers/position-calculation/test/body-position-calculation-strategy.test.js}

@@ -1,13 +1,69 @@
-import { getPositionBox } from '../../utils/position';
-import { LogUtility } from '../log';
-describe('getPositionBox', () => {
-  const innerHTML = `
-	<vega-modal>
-		<div class='target'> test target </div>
-	</vega-modal>
-	<div class='element'>test element</div>
-	`;
-  document.body.innerHTML = innerHTML;
+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 { InjectVegaSlimmer } from 'vega-slimmer/core';
+import { LogUtility } from '../../../../utils/log';
+import { PositionCalculationController } from '../position-calculation-controller';
+import { ElementAppenderContainerController } from '../../element-appender-container/element-appender-container-controller';
+export class PositionCalculationMockedComponent {
+  constructor() {
+    this.elementAppenderContainerController = new ElementAppenderContainerController();
+    this.positionCalculationController = new PositionCalculationController();
+    this.isScreenPosition = false;
+    this.setHtml();
+  }
+  setIsScreenPosition(isScreenPosition) {
+    this.isScreenPosition = isScreenPosition;
+  }
+  getPositionBox(container, element, target, placement, alignment, translocation = { X: 0, Y: 0 }) {
+    this.container = container;
+    this.showConfig = {
+      target: target,
+      appendableElement: element,
+      placement: placement,
+      alignment: alignment,
+      translocation: translocation,
+      isScreenPosition: this.isScreenPosition,
+    };
+    this.positionCalculationController.setCalculationStrategy();
+    this.positionCalculationController.adjustPosition();
+    let placementResult;
+    let alignmentResult;
+    element.className.split(' ').forEach((item) => {
+      if (item.includes('vega-placement')) {
+        placementResult = item.replace('vega-placement-', '');
+      }
+      if (item.includes('vega-alignment')) {
+        alignmentResult = item.replace('vega-alignment-', '');
+      }
+    });
+    return {
+      top: Number(element.style.top.replace('px', '')),
+      left: Number(element.style.left.replace('px', '')),
+      placement: placementResult,
+      alignment: alignmentResult,
+    };
+  }
+  setHtml() {
+    document.body.innerHTML = `
+            <vega-modal>
+                <div class='target'> test target </div>
+            </vega-modal>
+            <div class='element'>test element</div>
+        `;
+  }
+}
+__decorate([
+  InjectVegaSlimmer()
+], PositionCalculationMockedComponent.prototype, "elementAppenderContainerController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], PositionCalculationMockedComponent.prototype, "positionCalculationController", void 0);
+describe('component.getPositionBox', () => {
+  const component = new PositionCalculationMockedComponent();
   const element = document.querySelector('.element');
   const target = document.querySelector('.target');
   const container = document.querySelector('vega-modal');
@@ -32,7 +88,7 @@ describe('getPositionBox', () => {
       width: 100,
       height: 100,
     });
-    getPositionBox(container, element, target);
+    component.getPositionBox(container, element, target);
     expect(LogUtility.warn).toHaveBeenCalledWith(`Calculate position should make container as 'position: relative', otherwise the result might not be accurate.`);
   });
   describe('directions', () => {
@@ -48,7 +104,7 @@ describe('getPositionBox', () => {
         top: 100,
         left: 100,
       });
-      const positionBox = getPositionBox(container, element, target, [
+      const positionBox = component.getPositionBox(container, element, target, [
         'left',
         'bottom',
         'right',
@@ -63,7 +119,7 @@ describe('getPositionBox', () => {
         top: 100,
         left: 100,
       });
-      const positionBox = getPositionBox(container, element, target);
+      const positionBox = component.getPositionBox(container, element, target);
       expect(positionBox).toEqual({ top: 50, left: 100, placement: 'top', alignment: 'start' });
     });
     test('return result as expected when with single placement', () => {
@@ -75,13 +131,13 @@ describe('getPositionBox', () => {
         left: 100,
       });
       let positionBox;
-      positionBox = getPositionBox(container, element, target, 'left');
+      positionBox = component.getPositionBox(container, element, target, 'left');
       expect(positionBox).toEqual({ top: 100, left: 50, placement: 'left', alignment: 'start' });
-      positionBox = getPositionBox(container, element, target, 'top');
+      positionBox = component.getPositionBox(container, element, target, 'top');
       expect(positionBox).toEqual({ top: 50, left: 100, placement: 'top', alignment: 'start' });
-      positionBox = getPositionBox(container, element, target, 'right');
+      positionBox = component.getPositionBox(container, element, target, 'right');
       expect(positionBox).toEqual({ top: 100, left: 200, placement: 'right', alignment: 'start' });
-      positionBox = getPositionBox(container, element, target, 'bottom');
+      positionBox = component.getPositionBox(container, element, target, 'bottom');
       expect(positionBox).toEqual({ top: 200, left: 100, placement: 'bottom', alignment: 'start' });
     });
     test('return result as expected when container scroll', () => {
@@ -95,13 +151,13 @@ describe('getPositionBox', () => {
       let positionBox;
       container.scrollTop = 20;
       container.scrollLeft = 20;
-      positionBox = getPositionBox(container, element, target, 'left');
+      positionBox = component.getPositionBox(container, element, target, 'left');
       expect(positionBox).toEqual({ top: 100, left: 50, placement: 'left', alignment: 'start' });
-      positionBox = getPositionBox(container, element, target, 'top');
+      positionBox = component.getPositionBox(container, element, target, 'top');
       expect(positionBox).toEqual({ top: 50, left: 100, placement: 'top', alignment: 'start' });
-      positionBox = getPositionBox(container, element, target, 'right');
+      positionBox = component.getPositionBox(container, element, target, 'right');
       expect(positionBox).toEqual({ top: 100, left: 200, placement: 'right', alignment: 'start' });
-      positionBox = getPositionBox(container, element, target, 'bottom');
+      positionBox = component.getPositionBox(container, element, target, 'bottom');
       expect(positionBox).toEqual({ top: 200, left: 100, placement: 'bottom', alignment: 'start' });
     });
     test('return result as expected when top have not enough placement', () => {
@@ -112,7 +168,7 @@ describe('getPositionBox', () => {
         top: 100,
         left: 100,
       });
-      const positionBox = getPositionBox(container, element, target, 'top');
+      const positionBox = component.getPositionBox(container, element, target, 'top');
       expect(positionBox).toEqual({ top: 100, left: 50, placement: 'left', alignment: 'start' });
     });
     test('return result as expected when top have not enough placement and with translocation', () => {
@@ -123,7 +179,7 @@ describe('getPositionBox', () => {
         top: 100,
         left: 100,
       });
-      const positionBox = getPositionBox(container, element, target, 'top', undefined, {
+      const positionBox = component.getPositionBox(container, element, target, 'top', undefined, {
         X: 10,
         Y: 20,
       });
@@ -137,7 +193,7 @@ describe('getPositionBox', () => {
         top: 100,
         left: 100,
       });
-      const positionBox = getPositionBox(container, element, target, 'top');
+      const positionBox = component.getPositionBox(container, element, target, 'top');
       expect(positionBox).toEqual({ top: 200, left: 100, placement: 'bottom', alignment: 'start' });
     });
     test('return result as expected when top, left and bottom have not enough placement', () => {
@@ -148,7 +204,7 @@ describe('getPositionBox', () => {
         top: 100,
         left: 100,
       });
-      const positionBox = getPositionBox(container, element, target, 'top');
+      const positionBox = component.getPositionBox(container, element, target, 'top');
       expect(positionBox).toEqual({ top: 100, left: 200, placement: 'right', alignment: 'start' });
     });
     test('return result as expected when container scrollHeight/scrollWidth is big than body scrollHeight/scrollWidth', () => {
@@ -161,12 +217,12 @@ describe('getPositionBox', () => {
         top: 200,
         left: 200,
       });
-      const positionBox = getPositionBox(container, element, target, [
+      const positionBox = component.getPositionBox(container, element, target, [
         'bottom',
         'top',
       ]);
       expect(positionBox).toEqual({ top: 400, left: 200, placement: 'bottom', alignment: 'start' });
-      const positionBox1 = getPositionBox(container, element, target, [
+      const positionBox1 = component.getPositionBox(container, element, target, [
         'right',
         'left',
       ]);
@@ -182,9 +238,43 @@ describe('getPositionBox', () => {
       Object.assign(target, { offsetTop: 0 });
       Object.assign(target, { offsetLeft: 0 });
       spyOn(LogUtility, 'warn');
-      getPositionBox(container, target, element);
+      component.getPositionBox(container, target, element);
       expect(LogUtility.warn).toBeCalled();
     });
+    test('return result as expected when top center have enough placement', () => {
+      Object.assign(container, { scrollHeight: 530 });
+      Object.assign(container, { scrollWidth: 530 });
+      mockElementReturn(element, 'getBoundingClientRect', { width: 200, height: 200 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 100,
+        top: 300,
+        left: 80,
+      });
+      expect(component.getPositionBox(container, element, target, ['top', 'left'], ['center', 'start'])).toEqual({
+        top: 100,
+        left: 30,
+        placement: 'top',
+        alignment: 'center',
+      });
+    });
+    test('return result as expected when left center have enough placement', () => {
+      Object.assign(container, { scrollHeight: 530 });
+      Object.assign(container, { scrollWidth: 530 });
+      mockElementReturn(element, 'getBoundingClientRect', { width: 200, height: 200 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 100,
+        top: 80,
+        left: 300,
+      });
+      expect(component.getPositionBox(container, element, target, ['left', 'top'], ['center', 'start'])).toEqual({
+        top: 30,
+        left: 100,
+        placement: 'left',
+        alignment: 'center',
+      });
+    });
   });
   describe('with translocation', () => {
     beforeAll(() => {
@@ -197,17 +287,17 @@ describe('getPositionBox', () => {
       });
     });
     test('return result as expected when container not scrolled', () => {
-      const positionBox = getPositionBox(container, element, target, 'top', undefined, {
+      const positionBox = component.getPositionBox(container, element, target, 'top', undefined, {
         X: 100,
         Y: 100,
       });
       expect(positionBox).toEqual({ top: -60, left: 200, placement: 'top', alignment: 'start' });
-      const positionBox1 = getPositionBox(container, element, target, 'right', undefined, {
+      const positionBox1 = component.getPositionBox(container, element, target, 'right', undefined, {
         X: 100,
         Y: 100,
       });
       expect(positionBox1).toEqual({ top: 200, left: 300, placement: 'right', alignment: 'start' });
-      const positionBox2 = getPositionBox(container, element, target, 'left', undefined, {
+      const positionBox2 = component.getPositionBox(container, element, target, 'left', undefined, {
         X: 100,
         Y: 100,
       });
@@ -216,46 +306,46 @@ describe('getPositionBox', () => {
     test('return result as expected when container scrolled', () => {
       container.scrollTop = 20;
       container.scrollLeft = 20;
-      const positionBox = getPositionBox(container, element, target, 'top', undefined, {
+      const positionBox = component.getPositionBox(container, element, target, 'top', undefined, {
         X: 100,
         Y: 100,
       });
       expect(positionBox).toEqual({ top: -40, left: 220, placement: 'top', alignment: 'start' });
-      const positionBox1 = getPositionBox(container, element, target, 'right', undefined, {
+      const positionBox1 = component.getPositionBox(container, element, target, 'right', undefined, {
         X: 100,
         Y: 100,
       });
       expect(positionBox1).toEqual({ top: 220, left: 320, placement: 'right', alignment: 'start' });
     });
     test('return result as expected when alignment set', () => {
-      const positionBox1 = getPositionBox(container, element, target, 'bottom', 'start');
+      const positionBox1 = component.getPositionBox(container, element, target, 'bottom', 'start');
       expect(positionBox1).toEqual({ top: 200, left: 100, placement: 'bottom', alignment: 'start' });
-      const positionBox2 = getPositionBox(container, element, target, 'bottom', 'center');
+      const positionBox2 = component.getPositionBox(container, element, target, 'bottom', 'center');
       expect(positionBox2).toEqual({
         top: 200,
         left: 120,
         placement: 'bottom',
         alignment: 'center',
       });
-      const positionBox3 = getPositionBox(container, element, target, 'bottom', 'end');
+      const positionBox3 = component.getPositionBox(container, element, target, 'bottom', 'end');
       expect(positionBox3).toEqual({ top: 200, left: 140, placement: 'bottom', alignment: 'end' });
-      const positionBox4 = getPositionBox(container, element, target, 'top', 'start');
+      const positionBox4 = component.getPositionBox(container, element, target, 'top', 'start');
       expect(positionBox4).toEqual({ top: 40, left: 100, placement: 'top', alignment: 'start' });
-      const positionBox5 = getPositionBox(container, element, target, 'top', 'center');
+      const positionBox5 = component.getPositionBox(container, element, target, 'top', 'center');
       expect(positionBox5).toEqual({ top: 40, left: 120, placement: 'top', alignment: 'center' });
-      const positionBox6 = getPositionBox(container, element, target, 'top', 'end');
+      const positionBox6 = component.getPositionBox(container, element, target, 'top', 'end');
       expect(positionBox6).toEqual({ top: 40, left: 140, placement: 'top', alignment: 'end' });
-      const positionBox7 = getPositionBox(container, element, target, 'left', 'start');
+      const positionBox7 = component.getPositionBox(container, element, target, 'left', 'start');
       expect(positionBox7).toEqual({ top: 100, left: 40, placement: 'left', alignment: 'start' });
-      const positionBox8 = getPositionBox(container, element, target, 'left', 'center');
+      const positionBox8 = component.getPositionBox(container, element, target, 'left', 'center');
       expect(positionBox8).toEqual({ top: 120, left: 40, placement: 'left', alignment: 'center' });
-      const positionBox9 = getPositionBox(container, element, target, 'left', 'end', undefined);
+      const positionBox9 = component.getPositionBox(container, element, target, 'left', 'end', undefined);
       expect(positionBox9).toEqual({ top: 140, left: 40, placement: 'left', alignment: 'end' });
-      const positionBox10 = getPositionBox(container, element, target, 'right', 'start');
+      const positionBox10 = component.getPositionBox(container, element, target, 'right', 'start');
       expect(positionBox10).toEqual({ top: 100, left: 200, placement: 'right', alignment: 'start' });
-      const positionBox11 = getPositionBox(container, element, target, 'right', 'center');
+      const positionBox11 = component.getPositionBox(container, element, target, 'right', 'center');
       expect(positionBox11).toEqual({ top: 120, left: 200, placement: 'right', alignment: 'center' });
-      const positionBox12 = getPositionBox(container, element, target, 'right', 'end');
+      const positionBox12 = component.getPositionBox(container, element, target, 'right', 'end');
       expect(positionBox12).toEqual({ top: 140, left: 200, placement: 'right', alignment: 'end' });
     });
   });

package/dist/collection/helpers/slimmers/position-calculation/test/screen-position-calculation-strategy.test.js

@@ -0,0 +1,113 @@
+import { PositionCalculationMockedComponent } from './body-position-calculation-strategy.test';
+describe('BodyPositionCalculationStrategy.getPositionBox', () => {
+  const component = new PositionCalculationMockedComponent();
+  component.setIsScreenPosition(true);
+  const innerHTML = `
+	<div class='container'>
+        <div class='target'> test target </div>
+	    <div class='element'>test element</div>
+    </div>
+	`;
+  document.body.innerHTML = innerHTML;
+  const element = document.querySelector('.element');
+  const target = document.querySelector('.target');
+  const container = document.querySelector('.container');
+  function mockElementReturn(element, method, value) {
+    spyOn(element, method).and.returnValue(value);
+  }
+  beforeAll(() => {
+    Object.assign(window, { innerWidth: 500 });
+    Object.assign(window, { innerHeight: 500 });
+  });
+  describe('directions', () => {
+    beforeAll(() => {
+      mockElementReturn(element, 'getBoundingClientRect', { width: 50, height: 50 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 100,
+        top: 100,
+        left: 100,
+      });
+    });
+    test('return result as expected in top', () => {
+      expect(component.getPositionBox(container, element, target, ['top'], ['start'])).toEqual({
+        top: 50,
+        left: 100,
+        placement: 'top',
+        alignment: 'start',
+      });
+      expect(component.getPositionBox(container, element, target, ['top'], ['center'])).toEqual({
+        top: 50,
+        left: 125,
+        placement: 'top',
+        alignment: 'center',
+      });
+      expect(component.getPositionBox(container, element, target, ['top'], ['end'])).toEqual({
+        top: 50,
+        left: 150,
+        placement: 'top',
+        alignment: 'end',
+      });
+    });
+    test('return result as expected in left', () => {
+      expect(component.getPositionBox(container, element, target, ['left'], ['start'])).toEqual({
+        top: 100,
+        left: 50,
+        placement: 'left',
+        alignment: 'start',
+      });
+      expect(component.getPositionBox(container, element, target, ['left'], ['center'])).toEqual({
+        top: 125,
+        left: 50,
+        placement: 'left',
+        alignment: 'center',
+      });
+      expect(component.getPositionBox(container, element, target, ['left'], ['end'])).toEqual({
+        top: 150,
+        left: 50,
+        placement: 'left',
+        alignment: 'end',
+      });
+    });
+    test('return result as expected in bottom', () => {
+      expect(component.getPositionBox(container, element, target, ['bottom'], ['start'])).toEqual({
+        top: 200,
+        left: 100,
+        placement: 'bottom',
+        alignment: 'start',
+      });
+      expect(component.getPositionBox(container, element, target, ['bottom'], ['center'])).toEqual({
+        top: 200,
+        left: 125,
+        placement: 'bottom',
+        alignment: 'center',
+      });
+      expect(component.getPositionBox(container, element, target, ['bottom'], ['end'])).toEqual({
+        top: 200,
+        left: 150,
+        placement: 'bottom',
+        alignment: 'end',
+      });
+    });
+    test('return result as expected in right', () => {
+      expect(component.getPositionBox(container, element, target, ['right'], ['start'])).toEqual({
+        top: 100,
+        left: 200,
+        placement: 'right',
+        alignment: 'start',
+      });
+      expect(component.getPositionBox(container, element, target, ['right'], ['center'])).toEqual({
+        top: 125,
+        left: 200,
+        placement: 'right',
+        alignment: 'center',
+      });
+      expect(component.getPositionBox(container, element, target, ['right'], ['end'])).toEqual({
+        top: 150,
+        left: 200,
+        placement: 'right',
+        alignment: 'end',
+      });
+    });
+  });
+});

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);
+  });
 });