@heartlandone/vega-angular-sandbox-pr-2327-5b91658d7c54c195ad59a3ecd2b440a347320dd1 2.61.0

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

@@ -0,0 +1,25 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+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-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')"
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TextValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class TextValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}

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

@@ -0,0 +1,45 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { VegaEventManager } from '@heartlandone/vega';
+
+@Directive({ selector: 'vega-value-accessor' })
+export class ValueAccessor implements ControlValueAccessor {
+  private onChange: (value: any) => void = () => {
+    /**/
+  };
+  private onTouched: () => void = () => {
+    /**/
+  };
+  protected lastValue: any;
+
+  constructor(protected el: ElementRef) {}
+
+  writeValue(value: any) {
+    this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
+  }
+
+  handleChangeEvent(value: any, semantics: 'native' | 'vega') {
+    if(VegaEventManager.getSemantics(this.el.nativeElement).namespace === semantics){
+      if (value !== this.lastValue) {
+        this.lastValue = value;
+        this.onChange(value);
+      }
+    }
+  }
+
+  @HostListener('focusout')
+  _handleBlurEvent() {
+    this.onTouched();
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of vega-angular
+ */
+export * from './lib/stencil-generated/text-value-accessor';
+export * from './lib/stencil-generated/value-accessor';
+export * from './lib/stencil-generated/components';
+export * from './lib/components-module';

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

@@ -0,0 +1,132 @@
+const { execSync } = require('child_process');
+const { readFileSync, writeFileSync } = require('fs');
+const STENCIL_GENERATED_COMPONENTS_PATH = 'src/lib/stencil-generated/components.ts';
+const STENCIL_GENERATED_TEXT_VALUE_ACCESSOR_PATH = 'src/lib/stencil-generated/text-value-accessor.ts';
+
+function updateStencilGenerated(filePath, updaters) {
+  let componentsContent = readFileSync(filePath, 'utf8');
+
+  updaters.forEach(updater => {
+    componentsContent = updater(componentsContent);
+  });
+
+  writeFileSync(filePath, componentsContent);
+}
+
+function appendDefaultArrayExportInComponentsFile(componentsContent) {
+  // extract the name of export vega component classes
+  const exportedClass = Array.from(componentsContent.matchAll(/export class (Vega[a-zA-Z]+) {/g)).map(
+    matched => matched[1],
+  );
+
+  // append default export statement to the original file
+  const exportDefaultStatement = `
+export default [
+  ${exportedClass.join(',\n  ')},
+];`;
+  return componentsContent + exportDefaultStatement;
+}
+
+function resolveEventPayloadImportPath(componentsContent) {
+  const EVENT_PAYLOAD_TYPE_TO_COMPONENT_TAG_MAP = new Map([
+    ['VegaTableChangePropType', 'vega-table/interface'],
+    ['VegaTableRowClickPropType', 'vega-table/interface'],
+    ['VegaTableRowSelectProp', 'vega-table/interface'],
+    ['VegaTableSelectAllProp', 'vega-table/interface'],
+    ['VegaFileOptional', 'vega-image-uploader/types'],
+    ['SelectValueType', 'vega-input-select/types'],
+    ['SelectType', 'vega-input-select/types'],
+    ['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'],
+    ['VegaRTEContent', 'vega-rich-text-editor/dto/content-state'],
+    ['VegaCodeBlockValue', 'vega-code-block/types'],
+    ['DatePickerMonthYearTypes', 'vega-date-picker/types']
+  ]);
+
+  return componentsContent.replace(
+    /(import type { (.*) as .* } from )'@heartlandone\/vega'/g,
+    function (matched, group1, group2) {
+      const componentTypePath = EVENT_PAYLOAD_TYPE_TO_COMPONENT_TAG_MAP.get(group2);
+      return `${group1}'@heartlandone/vega/dist/types/components/${componentTypePath}'`;
+    },
+  );
+}
+
+function extraReplaces(componentsContent) {
+  const replaces = [
+    [
+      '<SelectValueType<IVegaInputSelectSelectType>>',
+      '<IVegaInputSelectSelectValueType<IVegaInputSelectSelectType>>',
+    ],
+  ];
+  replaces.forEach(item => {
+    componentsContent = componentsContent.replace(new RegExp(item[0], 'g'), item[1]);
+  });
+  return componentsContent;
+}
+
+function revertValueAccessorChangeByGit() {
+  // use git to reset the change in value-accessor made by stencil angular output,
+  // since it will make the directive annotation without any property which will causing compile error
+  execSync('git checkout -- src/lib/stencil-generated/value-accessor.ts');
+}
+
+function revertUtilsChange() {
+  execSync('git checkout -- src/lib/stencil-generated/angular-component-lib/utils.ts');
+}
+
+function addSemanticsParamToHandleChangeEvent(content) {
+  const replaces = [
+    [
+      `'(vegaChange)': 'handleChangeEvent($event.target.value)'`,
+      `'(vegaChange)': "handleChangeEvent($event.currentTarget.value, 'vega')"`,
+    ],
+    [
+      `'(change)': 'handleChangeEvent($event.target.value)'`,
+      `'(change)': "handleChangeEvent($event.currentTarget.value, 'native')"`,
+    ],
+  ];
+  replaces.forEach(item => {
+    content = content.replace(item[0], item[1]);
+  });
+  return content;
+}
+
+updateStencilGenerated(
+  STENCIL_GENERATED_COMPONENTS_PATH,
+  [
+    appendDefaultArrayExportInComponentsFile,
+    resolveEventPayloadImportPath,
+    extraReplaces,
+  ]
+);
+
+updateStencilGenerated(
+  STENCIL_GENERATED_TEXT_VALUE_ACCESSOR_PATH,
+  [
+    addSemanticsParamToHandleChangeEvent
+  ]
+);
+
+revertValueAccessorChangeByGit();
+
+revertUtilsChange();

package/src/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

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';

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}