@heartlandone/vega-angular 2.5.0 → 2.6.0

package/dist/lib/stencil-generated/components.d.ts

@@ -259,7 +259,7 @@ export declare class VegaCheckboxGroup {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<VegaCheckboxGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VegaCheckboxGroup, "vega-checkbox-group", never, { "disabled": "disabled"; "hint": "hint"; "isValid": "isValid"; "label": "label"; "required": "required"; "value": "value"; "vegaFlexProp": "vegaFlexProp"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VegaCheckboxGroup, "vega-checkbox-group", never, { "autoValidation": "autoValidation"; "disabled": "disabled"; "hint": "hint"; "isValid": "isValid"; "label": "label"; "required": "required"; "validationRules": "validationRules"; "value": "value"; "vegaFlexProp": "vegaFlexProp"; }, {}, never, ["*"]>;
 }
 export declare interface VegaChip extends Components.VegaChip {
     /**
@@ -535,7 +535,7 @@ export declare class VegaFlex {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<VegaFlex, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VegaFlex, "vega-flex", never, { "alignItems": "alignItems"; "breakpoint": "breakpoint"; "direction": "direction"; "gap": "gap"; "justifyContent": "justifyContent"; "margin": "margin"; "useNativeFlex": "useNativeFlex"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VegaFlex, "vega-flex", never, { "alignItems": "alignItems"; "breakpoint": "breakpoint"; "direction": "direction"; "flexWrap": "flexWrap"; "gap": "gap"; "justifyContent": "justifyContent"; "margin": "margin"; "useNativeFlex": "useNativeFlex"; }, {}, never, ["*"]>;
 }
 export declare interface VegaFont extends Components.VegaFont {
 }
@@ -1033,7 +1033,7 @@ export declare class VegaRadioGroup {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<VegaRadioGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VegaRadioGroup, "vega-radio-group", never, { "disabled": "disabled"; "hint": "hint"; "isValid": "isValid"; "label": "label"; "name": "name"; "required": "required"; "value": "value"; "vegaFlexProp": "vegaFlexProp"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VegaRadioGroup, "vega-radio-group", never, { "autoValidation": "autoValidation"; "disabled": "disabled"; "hint": "hint"; "isValid": "isValid"; "label": "label"; "name": "name"; "required": "required"; "validationRules": "validationRules"; "value": "value"; "vegaFlexProp": "vegaFlexProp"; }, {}, never, ["*"]>;
 }
 export declare interface VegaSectionTitle extends Components.VegaSectionTitle {
 }

package/dist/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@heartlandone/vega-angular",
   "sideEffects": false,
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Angular specific wrapper for @heartlandone/vega",
   "peerDependencies": {
     "@angular/common": ">=12.0.0",
@@ -18,7 +18,7 @@
     "url": "https://github.com/heartlandpayments/Vega/tree/main/vega-angular-workspace/projects/vega-angular"
   },
   "dependencies": {
-    "@heartlandone/vega": "2.4.0",
+    "@heartlandone/vega": "2.5.0",
     "tslib": "^2.3.0",
     "@juggle/resize-observer": "^3.4.0"
   },
@@ -36,6 +36,14 @@
       "es2015": "./fesm2015/heartlandone-vega-angular.mjs",
       "node": "./fesm2015/heartlandone-vega-angular.mjs",
       "default": "./fesm2020/heartlandone-vega-angular.mjs"
+    },
+    "./testing": {
+      "types": "./testing/heartlandone-vega-angular-testing.d.ts",
+      "esm2020": "./esm2020/testing/heartlandone-vega-angular-testing.mjs",
+      "es2020": "./fesm2020/heartlandone-vega-angular-testing.mjs",
+      "es2015": "./fesm2015/heartlandone-vega-angular-testing.mjs",
+      "node": "./fesm2015/heartlandone-vega-angular-testing.mjs",
+      "default": "./fesm2020/heartlandone-vega-angular-testing.mjs"
     }
   }
 }

package/dist/testing/heartlandone-vega-angular-testing.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@heartlandone/vega-angular/testing" />
+export * from './public-api';

package/dist/testing/index.d.ts

@@ -0,0 +1,7 @@
+import type { RenderResult } from '@testing-library/angular';
+export declare function waitForVegaReady(renderResult: RenderResult<unknown, unknown>, delay?: number): Promise<RenderResult<unknown, unknown>>;
+export declare type MockedResizeObserverController = {
+    hide: (selector: string, container?: HTMLElement) => void;
+    show: (selector: string, container?: HTMLElement) => void;
+};
+export declare function mockResizeObserver(): MockedResizeObserverController;

package/dist/testing/package.json

@@ -0,0 +1,10 @@
+{
+  "module": "../fesm2015/heartlandone-vega-angular-testing.mjs",
+  "es2020": "../fesm2020/heartlandone-vega-angular-testing.mjs",
+  "esm2020": "../esm2020/testing/heartlandone-vega-angular-testing.mjs",
+  "fesm2020": "../fesm2020/heartlandone-vega-angular-testing.mjs",
+  "fesm2015": "../fesm2015/heartlandone-vega-angular-testing.mjs",
+  "typings": "heartlandone-vega-angular-testing.d.ts",
+  "sideEffects": false,
+  "name": "@heartlandone/vega-angular/testing"
+}

package/dist/testing/public-api.d.ts

@@ -0,0 +1 @@
+export * from './index';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@heartlandone/vega-angular",
   "sideEffects": false,
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Angular specific wrapper for @heartlandone/vega",
   "peerDependencies": {
     "@angular/common": ">=12.0.0",
@@ -25,7 +25,7 @@
     "url": "https://github.com/heartlandpayments/Vega/tree/main/vega-angular-workspace/projects/vega-angular"
   },
   "dependencies": {
-    "@heartlandone/vega": "2.5.0",
+    "@heartlandone/vega": "2.6.0",
     "tslib": "^2.3.0",
     "@juggle/resize-observer": "^3.4.0"
   },

package/src/lib/stencil-generated/components.ts

@@ -466,13 +466,13 @@ export declare interface VegaCheckboxGroup extends Components.VegaCheckboxGroup
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['disabled', 'hint', 'isValid', 'label', 'required', 'value', 'vegaFlexProp']
+  inputs: ['autoValidation', 'disabled', 'hint', 'isValid', 'label', 'required', 'validationRules', 'value', 'vegaFlexProp']
 })
 @Component({
   selector: 'vega-checkbox-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['disabled', 'hint', 'isValid', 'label', 'required', 'value', 'vegaFlexProp']
+  inputs: ['autoValidation', 'disabled', 'hint', 'isValid', 'label', 'required', 'validationRules', 'value', 'vegaFlexProp']
 })
 export class VegaCheckboxGroup {
   protected el: HTMLElement;
@@ -931,13 +931,13 @@ export declare interface VegaFlex extends Components.VegaFlex {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['alignItems', 'breakpoint', 'direction', 'gap', 'justifyContent', 'margin', 'useNativeFlex']
+  inputs: ['alignItems', 'breakpoint', 'direction', 'flexWrap', 'gap', 'justifyContent', 'margin', 'useNativeFlex']
 })
 @Component({
   selector: 'vega-flex',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['alignItems', 'breakpoint', 'direction', 'gap', 'justifyContent', 'margin', 'useNativeFlex']
+  inputs: ['alignItems', 'breakpoint', 'direction', 'flexWrap', 'gap', 'justifyContent', 'margin', 'useNativeFlex']
 })
 export class VegaFlex {
   protected el: HTMLElement;
@@ -1818,13 +1818,13 @@ export declare interface VegaRadioGroup extends Components.VegaRadioGroup {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['disabled', 'hint', 'isValid', 'label', 'name', 'required', 'value', 'vegaFlexProp']
+  inputs: ['autoValidation', 'disabled', 'hint', 'isValid', 'label', 'name', 'required', 'validationRules', 'value', 'vegaFlexProp']
 })
 @Component({
   selector: 'vega-radio-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['disabled', 'hint', 'isValid', 'label', 'name', 'required', 'value', 'vegaFlexProp']
+  inputs: ['autoValidation', 'disabled', 'hint', 'isValid', 'label', 'name', 'required', 'validationRules', 'value', 'vegaFlexProp']
 })
 export class VegaRadioGroup {
   protected el: HTMLElement;

package/testing/index.ts

@@ -0,0 +1,123 @@
+import { FeatureFlag } from '@heartlandone/vega';
+import { waitFor } from '@testing-library/angular';
+import type { RenderResult } from '@testing-library/angular';
+
+type Nullable<T> = T | undefined | null;
+
+export async function waitForVegaReady(
+  renderResult: RenderResult<unknown, unknown>,
+  delay: number = 300,
+): Promise<RenderResult<unknown, unknown>> {
+  await waitFor(() => {
+    renderResult.container
+      .querySelectorAll('*:not(.hydrated)')
+      // eslint-disable-next-line unicorn/no-array-for-each
+      .forEach((element: Element) => {
+        if (element.tagName.startsWith('VEGA')) {
+          throw new Error('Vega component is not rendered yet, retrying...');
+        }
+      });
+  });
+  /*
+     * The following code is added to load the vega component, and the attribute value is set after each component is loaded.
+     * To determine whether there is a hydrated style that cannot meet the requirements after the component is loaded,
+     * It need to set the sleep time to ensure that each attribute of the vega component is fully loaded
+     *
+     code link: ./node_modules/@heartlandone/vega-react/dist/react-component-lib/utils/attachProps.js(line 28-33)}
+    */
+  await sleep(delay);
+  return renderResult;
+}
+
+export type MockedResizeObserverController = {
+  hide: (selector: string, container?: HTMLElement) => void;
+  show: (selector: string, container?: HTMLElement) => void;
+};
+
+export function mockResizeObserver(): MockedResizeObserverController {
+  type MockedResizeObserver = ResizeObserver & {
+    show: () => void;
+    hide: () => void;
+  };
+  FeatureFlag.disable('VEGA_ANGULAR.USE_JUGGLE_RESIZE_OBSERVER');
+  const resizeObserverElementMap: Map<HTMLElement, MockedResizeObserver> = new Map();
+  const VegaResizeObserver: unknown = class {
+    private readonly callback: ResizeObserverCallback;
+    private observedElements: HTMLElement[] = [];
+    constructor(callback: ResizeObserverCallback) {
+      this.callback = callback;
+    }
+
+    observe(element: HTMLElement): void {
+      if (!this.isObserved(element)) {
+        resizeObserverElementMap.set(element, this);
+        this.observedElements.push(element);
+      }
+    }
+
+    unobserve(element: HTMLElement): void {
+      if (this.isObserved(element)) {
+        resizeObserverElementMap.delete(element);
+        this.observedElements = this.observedElements.filter(
+          (observedElement: HTMLElement) => observedElement !== element,
+        );
+      }
+    }
+
+    disconnect(): void {
+      for (const element of this.observedElements) {
+        resizeObserverElementMap.delete(element);
+      }
+      this.observedElements = [];
+    }
+
+    show(): void {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      this.callback([{ contentRect: { height: 100 } }] as any, this);
+    }
+
+    hide(): void {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      this.callback([{ contentRect: { height: 0 } }] as any, this);
+    }
+
+    private isObserved(element: HTMLElement): boolean {
+      return this.observedElements.includes(element);
+    }
+  };
+  Object.assign(window, { VegaResizeObserver });
+  return {
+    show: (selector: string, container?: HTMLElement): void => {
+      (container || document)
+        .querySelectorAll(selector)
+        // eslint-disable-next-line unicorn/no-array-for-each
+        .forEach((el: Element) => {
+          const resizeObserver: Nullable<MockedResizeObserver> = resizeObserverElementMap.get(
+            el as HTMLElement,
+          );
+          if (resizeObserver) {
+            resizeObserver.show();
+          }
+        });
+    },
+    hide: (selector: string, container?: HTMLElement): void => {
+      (container || document)
+        .querySelectorAll(selector)
+        // eslint-disable-next-line unicorn/no-array-for-each
+        .forEach((el: Element) => {
+          const resizeObserver: Nullable<MockedResizeObserver> = resizeObserverElementMap.get(
+            el as HTMLElement,
+          );
+          if (resizeObserver) {
+            resizeObserver.hide();
+          }
+        });
+    },
+  };
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve: () => void) => {
+    setTimeout(resolve, ms);
+  });
+}

package/testing/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist",
+  "lib": {
+    "entryFile": "./public-api.ts"
+  },
+  "allowedNonPeerDependencies": ["@testing-library/angular", "@heartlandone/vega"]
+}

package/testing/public-api.ts

@@ -0,0 +1,4 @@
+/*
+ * Public API Surface of vega-angular
+ */
+export * from './index';