@stencil/angular-output-target 0.10.1 → 1.0.0

package/README.md

@@ -14,6 +14,13 @@ For a detailed guide on how to add the angular output target to a project, visit
 npm install @stencil/angular-output-target
 ```
 
+## Angular Support
+
+| **@stencil/angular-output-target** | **Angular**     |
+|------------------------------------|-----------------|
+| 0.10.2                             | v18.x and lower |
+| 1.0.0                              | v19.x and above |
+
 ## Usage
 
 In your `stencil.config.ts` add the following configuration to the `outputTargets` section:

package/dist/generate-angular-component.js

@@ -12,7 +12,7 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     let eventName = prop.name;
     if (/[-/]/.test(prop.name)) {
         // If a member name includes a dash or a forward slash, we need to wrap it in quotes.
-        // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
+        // https://github.com/stenciljs/output-targets/issues/212
         eventName = `'${prop.name}'`;
     }
     if (inlinePropertyAsSetter) {
@@ -59,8 +59,8 @@ export const createAngularComponentDefinition = (tagName, inputs, outputs, metho
         proxyCmpOptions.push(`\n  methods: [${formattedMethods}]`);
     }
     let standaloneOption = '';
-    if (standalone && includeImportCustomElements) {
-        standaloneOption = `\n  standalone: true`;
+    if (!standalone) {
+        standaloneOption = `\n  standalone: false`;
     }
     const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
     const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n  ');
@@ -139,6 +139,10 @@ const formatOutputType = (componentClassName, event) => {
                 return [p1, `I${componentClassName}${v.substring(1, v.length - 1)}`, p2].join('');
             }
             return [p1, dst, p2].join('');
+        })
+            // Capture all instances that contain sub types, e.g. `IMyComponent.SomeMoreComplexType.SubType`.
+            .replace(new RegExp(`^${src}(\.\\w+)+$`, 'g'), (type) => {
+            return `I${componentClassName}${src}.${type.split('.').slice(1).join('.')}`;
         }));
     }, event.complexType.original
         .replace(/\n/g, ' ')

package/dist/generate-value-accessors.js

@@ -36,7 +36,7 @@ export function createValueAccessor(srcFileContents, valueAccessor, outputType)
     return srcFileContents
         .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
         .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(`,${EOL}`))
-        .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType === OutputTypes.Standalone ? ',standalone: true' : '');
+        .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType !== OutputTypes.Standalone ? ',\nstandalone: false' : '');
 }
 function copyResources(config, resourcesFilesToCopy, directory) {
     if (!config.sys || !config.sys.copy) {
@@ -57,4 +57,4 @@ const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
 const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_STANDALONE = '<VALUE_ACCESSOR_STANDALONE>';
-const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
+const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'`;

package/dist/index.cjs.js

@@ -1,8 +1,14 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var path = require('path');
 var os = require('os');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
+
 const OutputTypes = {
     Component: 'component',
     Scam: 'scam',
@@ -52,18 +58,18 @@ function normalizePath(str) {
     return str;
 }
 function relativeImport(pathFrom, pathTo, ext) {
-    let relativePath = path.relative(path.dirname(pathFrom), path.dirname(pathTo));
+    let relativePath = path__default["default"].relative(path__default["default"].dirname(pathFrom), path__default["default"].dirname(pathTo));
     if (relativePath === '') {
         relativePath = '.';
     }
     else if (relativePath[0] !== '.') {
         relativePath = './' + relativePath;
     }
-    return normalizePath(`${relativePath}/${path.basename(pathTo, ext)}`);
+    return normalizePath(`${relativePath}/${path__default["default"].basename(pathTo, ext)}`);
 }
 async function readPackageJson(config, rootDir) {
     var _a;
-    const pkgJsonPath = path.join(rootDir, 'package.json');
+    const pkgJsonPath = path__default["default"].join(rootDir, 'package.json');
     let pkgJson;
     try {
         pkgJson = (await ((_a = config.sys) === null || _a === void 0 ? void 0 : _a.readFile(pkgJsonPath, 'utf8')));
@@ -151,7 +157,7 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     let eventName = prop.name;
     if (/[-/]/.test(prop.name)) {
         // If a member name includes a dash or a forward slash, we need to wrap it in quotes.
-        // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
+        // https://github.com/stenciljs/output-targets/issues/212
         eventName = `'${prop.name}'`;
     }
     if (inlinePropertyAsSetter) {
@@ -198,8 +204,8 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
         proxyCmpOptions.push(`\n  methods: [${formattedMethods}]`);
     }
     let standaloneOption = '';
-    if (standalone && includeImportCustomElements) {
-        standaloneOption = `\n  standalone: true`;
+    if (!standalone) {
+        standaloneOption = `\n  standalone: false`;
     }
     const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
     const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n  ');
@@ -278,6 +284,10 @@ const formatOutputType = (componentClassName, event) => {
                 return [p1, `I${componentClassName}${v.substring(1, v.length - 1)}`, p2].join('');
             }
             return [p1, dst, p2].join('');
+        })
+            // Capture all instances that contain sub types, e.g. `IMyComponent.SomeMoreComplexType.SubType`.
+            .replace(new RegExp(`^${src}(\.\\w+)+$`, 'g'), (type) => {
+            return `I${componentClassName}${src}.${type.split('.').slice(1).join('.')}`;
         }));
     }, event.complexType.original
         .replace(/\n/g, ' ')
@@ -348,7 +358,7 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
     if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
         return;
     }
-    const targetDir = path.dirname(outputTarget.directivesProxyFile);
+    const targetDir = path__default["default"].dirname(outputTarget.directivesProxyFile);
     const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
         const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
         const type = va.type;
@@ -366,8 +376,8 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
     await Promise.all(Object.keys(normalizedValueAccessors).map(async (type) => {
         const valueAccessorType = type; // Object.keys converts to string
         const targetFileName = `${type}-value-accessor.ts`;
-        const targetFilePath = path.join(targetDir, targetFileName);
-        const srcFilePath = path.join(__dirname, '../resources/control-value-accessors/', targetFileName);
+        const targetFilePath = path__default["default"].join(targetDir, targetFileName);
+        const srcFilePath = path__default["default"].join(__dirname, '../resources/control-value-accessors/', targetFileName);
         const srcFileContents = await compilerCtx.fs.readFile(srcFilePath);
         const finalText = createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType], outputTarget.outputType);
         await compilerCtx.fs.writeFile(targetFilePath, finalText);
@@ -379,7 +389,7 @@ function createValueAccessor(srcFileContents, valueAccessor, outputType) {
     return srcFileContents
         .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
         .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(`,${os.EOL}`))
-        .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType === OutputTypes.Standalone ? ',standalone: true' : '');
+        .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType !== OutputTypes.Standalone ? ',\nstandalone: false' : '');
 }
 function copyResources$1(config, resourcesFilesToCopy, directory) {
     if (!config.sys || !config.sys.copy) {
@@ -387,20 +397,20 @@ function copyResources$1(config, resourcesFilesToCopy, directory) {
     }
     const copyTasks = resourcesFilesToCopy.map((rf) => {
         return {
-            src: path.join(__dirname, '../resources/control-value-accessors/', rf),
-            dest: path.join(directory, rf),
+            src: path__default["default"].join(__dirname, '../resources/control-value-accessors/', rf),
+            dest: path__default["default"].join(directory, rf),
             keepDirStructure: false,
             warn: false,
             ignore: [],
         };
     });
-    return config.sys.copy(copyTasks, path.join(directory));
+    return config.sys.copy(copyTasks, path__default["default"].join(directory));
 }
 const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
 const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_STANDALONE = '<VALUE_ACCESSOR_STANDALONE>';
-const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
+const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'`;
 
 /**
  * Creates an Angular module declaration for a component wrapper.
@@ -438,8 +448,8 @@ async function copyResources(config, outputTarget) {
     if (!config.sys || !config.sys.copy || !config.sys.glob) {
         throw new Error('stencil is not properly initialized at this step. Notify the developer');
     }
-    const srcDirectory = path.join(__dirname, '..', 'angular-component-lib');
-    const destDirectory = path.join(path.dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
+    const srcDirectory = path__default["default"].join(__dirname, '..', 'angular-component-lib');
+    const destDirectory = path__default["default"].join(path__default["default"].dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
     return config.sys.copy([
         {
             src: srcDirectory,
@@ -451,8 +461,8 @@ async function copyResources(config, outputTarget) {
     ], srcDirectory);
 }
 function generateProxies(components, pkgData, outputTarget, rootDir) {
-    const distTypesDir = path.dirname(pkgData.types);
-    const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
+    const distTypesDir = path__default["default"].dirname(pkgData.types);
+    const dtsFilePath = path__default["default"].join(rootDir, distTypesDir, GENERATED_DTS);
     const { outputType } = outputTarget;
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     const includeSingleComponentAngularModules = outputType === OutputTypes.Scam;
@@ -571,18 +581,19 @@ const angularOutputTarget = (outputTarget) => {
     };
 };
 function normalizeOutputTarget(config, outputTarget) {
-    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: outputTarget.customElementsDir || 'components', outputType: outputTarget.outputType || OutputTypes.Component });
+    var _a, _b;
+    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: (_a = outputTarget.customElementsDir) !== null && _a !== void 0 ? _a : 'components', outputType: (_b = outputTarget.outputType) !== null && _b !== void 0 ? _b : OutputTypes.Standalone });
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }
     if (outputTarget.directivesProxyFile == null) {
         throw new Error('directivesProxyFile is required. Please set it in the Stencil config.');
     }
-    if (outputTarget.directivesProxyFile && !path.isAbsolute(outputTarget.directivesProxyFile)) {
-        results.directivesProxyFile = normalizePath(path.join(config.rootDir, outputTarget.directivesProxyFile));
+    if (outputTarget.directivesProxyFile && !path__default["default"].isAbsolute(outputTarget.directivesProxyFile)) {
+        results.directivesProxyFile = normalizePath(path__default["default"].join(config.rootDir, outputTarget.directivesProxyFile));
     }
-    if (outputTarget.directivesArrayFile && !path.isAbsolute(outputTarget.directivesArrayFile)) {
-        results.directivesArrayFile = normalizePath(path.join(config.rootDir, outputTarget.directivesArrayFile));
+    if (outputTarget.directivesArrayFile && !path__default["default"].isAbsolute(outputTarget.directivesArrayFile)) {
+        results.directivesArrayFile = normalizePath(path__default["default"].join(config.rootDir, outputTarget.directivesArrayFile));
     }
     if (outputTarget.includeSingleComponentAngularModules !== undefined) {
         throw new Error("The 'includeSingleComponentAngularModules' option has been removed. Please use 'outputType' instead.");

package/dist/index.js

@@ -149,7 +149,7 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     let eventName = prop.name;
     if (/[-/]/.test(prop.name)) {
         // If a member name includes a dash or a forward slash, we need to wrap it in quotes.
-        // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
+        // https://github.com/stenciljs/output-targets/issues/212
         eventName = `'${prop.name}'`;
     }
     if (inlinePropertyAsSetter) {
@@ -196,8 +196,8 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
         proxyCmpOptions.push(`\n  methods: [${formattedMethods}]`);
     }
     let standaloneOption = '';
-    if (standalone && includeImportCustomElements) {
-        standaloneOption = `\n  standalone: true`;
+    if (!standalone) {
+        standaloneOption = `\n  standalone: false`;
     }
     const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
     const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n  ');
@@ -276,6 +276,10 @@ const formatOutputType = (componentClassName, event) => {
                 return [p1, `I${componentClassName}${v.substring(1, v.length - 1)}`, p2].join('');
             }
             return [p1, dst, p2].join('');
+        })
+            // Capture all instances that contain sub types, e.g. `IMyComponent.SomeMoreComplexType.SubType`.
+            .replace(new RegExp(`^${src}(\.\\w+)+$`, 'g'), (type) => {
+            return `I${componentClassName}${src}.${type.split('.').slice(1).join('.')}`;
         }));
     }, event.complexType.original
         .replace(/\n/g, ' ')
@@ -377,7 +381,7 @@ function createValueAccessor(srcFileContents, valueAccessor, outputType) {
     return srcFileContents
         .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
         .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(`,${EOL}`))
-        .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType === OutputTypes.Standalone ? ',standalone: true' : '');
+        .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType !== OutputTypes.Standalone ? ',\nstandalone: false' : '');
 }
 function copyResources$1(config, resourcesFilesToCopy, directory) {
     if (!config.sys || !config.sys.copy) {
@@ -398,7 +402,7 @@ const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
 const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_STANDALONE = '<VALUE_ACCESSOR_STANDALONE>';
-const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
+const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'`;
 
 /**
  * Creates an Angular module declaration for a component wrapper.
@@ -569,7 +573,8 @@ const angularOutputTarget = (outputTarget) => {
     };
 };
 function normalizeOutputTarget(config, outputTarget) {
-    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: outputTarget.customElementsDir || 'components', outputType: outputTarget.outputType || OutputTypes.Component });
+    var _a, _b;
+    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: (_a = outputTarget.customElementsDir) !== null && _a !== void 0 ? _a : 'components', outputType: (_b = outputTarget.outputType) !== null && _b !== void 0 ? _b : OutputTypes.Standalone });
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }

package/dist/plugin.js

@@ -17,7 +17,8 @@ export const angularOutputTarget = (outputTarget) => {
     };
 };
 export function normalizeOutputTarget(config, outputTarget) {
-    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: outputTarget.customElementsDir || 'components', outputType: outputTarget.outputType || OutputTypes.Component });
+    var _a, _b;
+    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: (_a = outputTarget.customElementsDir) !== null && _a !== void 0 ? _a : 'components', outputType: (_b = outputTarget.outputType) !== null && _b !== void 0 ? _b : OutputTypes.Standalone });
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }

package/dist/types.d.ts

@@ -2,7 +2,7 @@
  * The type of output that can be generated with the Angular output target.
  * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
  * - `scam` - Generate a Single Component Angular Module for each component.
- * - `standalone` - Generate a component with the `standalone` flag set to `true`.
+ * - `standalone` - Generates standalone components.
  */
 export type OutputType = 'component' | 'scam' | 'standalone';
 export interface OutputTargetAngular {
@@ -24,7 +24,7 @@ export interface OutputTargetAngular {
      * The type of output that should be generated.
      * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
      * - `scam` - Generate a Single Component Angular Module for each component.
-     * - `standalone` - Generate a component with the `standalone` flag set to `true`.
+     * - `standalone` - (default) Generates standalone components.
      */
     outputType?: OutputType;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "0.10.1",
+  "version": "1.0.0",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -22,7 +22,7 @@
   },
   "scripts": {
     "prepublishOnly": "pnpm run build",
-    "prebuild": "rimraf ./dist && pnpm run test",
+    "prebuild": "rimraf ./dist",
     "build": "tsc && pnpm run rollup",
     "dev": "run-p dev:*",
     "dev:build": "tsc --watch --preserveWatchOutput",
@@ -39,17 +39,18 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ionic-team/stencil-ds-output-targets.git"
+    "url": "git+https://github.com/stenciljs/output-targets.git"
   },
   "author": "Ionic Team",
   "homepage": "https://stenciljs.com/",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues"
+    "url": "https://github.com/stenciljs/output-targets/issues"
   },
   "devDependencies": {
     "@angular/core": "8.2.14",
     "@angular/forms": "8.2.14",
+    "@stencil/core": "4.32.0",
     "@types/node": "^18.0.0",
     "npm-run-all2": "^6.2.4",
     "rimraf": "^5.0.0",

package/resources/control-value-accessors/boolean-value-accessor.ts

@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
   },
   providers: [
     {

package/resources/control-value-accessors/number-value-accessor.ts

@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
   },
   providers: [
     {

package/resources/control-value-accessors/radio-value-accessor.ts

@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
   },
   providers: [
     {

package/resources/control-value-accessors/select-value-accessor.ts

@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
   },
   providers: [
     {

package/resources/control-value-accessors/text-value-accessor.ts

@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
   },
   providers: [
     {