@heartlandone/vega-angular 2.2.0 → 2.4.0-RTE-preview

package/src/lib/stencil-generated/text-value-accessor.ts

@@ -5,7 +5,7 @@ import { ValueAccessor } from './value-accessor';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
-  selector: 'vega-checkbox, vega-checkbox-group, vega-color-picker, vega-combo-box, vega-date-picker, vega-image-uploader, vega-input, vega-input-credit-card, vega-input-range, vega-input-select, vega-radio-group, vega-stepper, vega-textarea, vega-time-picker',
+  selector: 'vega-checkbox, vega-checkbox-group, vega-color-picker, vega-combo-box, vega-date-picker, vega-file-uploader, vega-image-uploader, vega-input, vega-input-credit-card, vega-input-numeric, vega-input-phone-number, vega-input-range, vega-input-select, vega-radio-group, vega-rich-text-editor, vega-selection-chip-group, vega-selection-tile-group, vega-signature-capture, vega-stepper, vega-textarea, vega-time-picker, vega-toggle-switch',
   host: {
     '(vegaChange)': "handleChangeEvent($event.currentTarget.value, 'vega')",
     '(change)': "handleChangeEvent($event.currentTarget.value, 'native')"

package/src/scripts/stencil-post-build-script.js

@@ -39,7 +39,24 @@ function resolveEventPayloadImportPath(componentsContent) {
     ['VegaBreadcrumbItemType', 'vega-breadcrumb/types'],
     ['VegaTableHeadCellClickEvent', 'vega-table/interface'],
     ['VegaTableRowClickEvent', 'vega-table/interface'],
+    ['VegaTableRowExpandEvent', 'vega-table/interface'],
     ['VegaDropdownItemClickEvent', 'vega-dropdown/vega-dropdown-item/types'],
+    ['VegaCalendarChangeEventType', 'vega-calendar/types'],
+    ['VegaCalendarEventClickInfo', 'vega-calendar/types'],
+    ['VegaCalendarDateClickInfo', 'vega-calendar/types'],
+    ['VegaCountryType', 'vega-input-phone-number/types'],
+    ['VegaBannerActionButtonType', 'vega-banner/types'],
+    ['VegaSignatureValue', 'vega-signature-capture/types'],
+    ['VegaTableRowSelectEventDetail', 'vega-table/interface'],
+    ['VegaTableRowSelectAllEventDetail', 'vega-table/interface'],
+    ['VegaTableRowExpandEventDetail', 'vega-table/interface'],
+    ['VegaFileUploaderFiles', 'vega-file-uploader/types'],
+    ['VegaFileUploaderFile', 'vega-file-uploader/types'],
+    ['VegaDropdownSearchTriggerEventDetail', 'vega-dropdown/types'],
+    ['VegaRTEContentBlock', 'vega-rich-text-editor/interface'],
+    ['VegaRichTextLinkEditorChangeDetail', 'vega-rich-text-editor/vega-rich-text-link-editor/types'],
+    ['VegaRichTextImageEditorChangeDetail', 'vega-rich-text-editor/vega-rich-text-image-editor/types'],
+    ['VegaRichTextEditorImage', 'vega-rich-text-editor/interface']
   ]);
 
   return componentsContent.replace(
@@ -92,7 +109,7 @@ function addSemanticsParamToHandleChangeEvent(content) {
 }
 
 updateStencilGenerated(
-  STENCIL_GENERATED_COMPONENTS_PATH, 
+  STENCIL_GENERATED_COMPONENTS_PATH,
   [
     appendDefaultArrayExportInComponentsFile,
     resolveEventPayloadImportPath,
@@ -103,9 +120,9 @@ updateStencilGenerated(
 updateStencilGenerated(
   STENCIL_GENERATED_TEXT_VALUE_ACCESSOR_PATH,
   [
-    addSemanticsParamToHandleChangeEvent,
+    addSemanticsParamToHandleChangeEvent
   ]
-)
+);
 
 revertValueAccessorChangeByGit();
 

package/testing/index.ts

@@ -0,0 +1,115 @@
+import { FeatureFlag } from '@heartlandone/vega';
+import { waitForVega } from '@heartlandone/vega';
+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 waitForVega();
+
+  /*
+     * 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';