@baloise/angular-output-target 1.0.5 → 1.0.15

package/CHANGELOG.md

@@ -3,3 +3,69 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.13](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.12...@baloise/angular-output-target@1.0.13) (2021-06-01)
+
+**Note:** Version bump only for package @baloise/angular-output-target
+
+
+
+
+
+## [1.0.12](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.11...@baloise/angular-output-target@1.0.12) (2021-05-07)
+
+**Note:** Version bump only for package @baloise/angular-output-target
+
+
+
+
+
+## [1.0.11](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.10...@baloise/angular-output-target@1.0.11) (2021-05-07)
+
+
+### Bug Fixes
+
+* remove ui-library and use variable instead ([f86568a](https://github.com/baloise/stencil-ds-output-targets/commit/f86568a27f9e2c80b35d1e201ab7822cc5e58d03))
+
+
+
+
+
+## [1.0.10](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.9...@baloise/angular-output-target@1.0.10) (2021-04-15)
+
+**Note:** Version bump only for package @baloise/angular-output-target
+
+
+
+
+
+## [1.0.9](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.8...@baloise/angular-output-target@1.0.9) (2021-04-15)
+
+**Note:** Version bump only for package @baloise/angular-output-target
+
+
+
+
+
+## [1.0.8](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.7...@baloise/angular-output-target@1.0.8) (2021-04-13)
+
+**Note:** Version bump only for package @baloise/angular-output-target
+
+
+
+
+
+## [1.0.7](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.6...@baloise/angular-output-target@1.0.7) (2021-02-13)
+
+
+### Bug Fixes
+
+* **angular:** remove unused interfaces ([e21f4fa](https://github.com/baloise/stencil-ds-output-targets/commit/e21f4fadf8e0f0ed7da8a52276162c374785a2b2))
+* **angular:** remove unused interfaces ([bb19a4b](https://github.com/baloise/stencil-ds-output-targets/commit/bb19a4b1d48460d1f854692490804132427fcd63))
+
+
+
+
+
+## [1.0.6](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.5...@baloise/angular-output-target@1.0.6) (2021-02-03)
+
+**Note:** Version bump only for package @baloise/angular-output-target

package/dist/generate-angular-component.js

@@ -1,13 +1,12 @@
-import path from 'path';
-import { dashToPascalCase, normalizePath } from './utils';
+import { dashToPascalCase } from './utils';
 export const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
     // Collect component meta
     const inputs = [
-        ...cmpMeta.properties.filter((prop) => !prop.internal).map((prop) => prop.name),
-        ...cmpMeta.virtualProperties.map((prop) => prop.name),
+        ...cmpMeta.properties.filter(prop => !prop.internal).map(prop => prop.name),
+        ...cmpMeta.virtualProperties.map(prop => prop.name),
     ].sort();
-    const outputs = cmpMeta.events.filter((ev) => !ev.internal).map((prop) => prop);
-    const methods = cmpMeta.methods.filter((method) => !method.internal).map((prop) => prop.name);
+    const outputs = cmpMeta.events.filter(ev => !ev.internal).map(prop => prop);
+    const methods = cmpMeta.methods.filter(method => !method.internal).map(prop => prop.name);
     // Process meta
     const hasOutputs = outputs.length > 0;
     // Generate Angular @Directive
@@ -20,28 +19,22 @@ export const createComponentDefinition = (componentCorePackage, distTypesDir, ro
         directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
     }
     if (outputs.length > 0) {
-        directiveOpts.push(`outputs: ['${outputs.map((output) => output.name).join(`', '`)}']`);
+        directiveOpts.push(`outputs: ['${outputs.map(output => output.name).join(`', '`)}']`);
     }
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const typePath = path.parse(path.join(componentCorePackage, path.join(cmpMeta.sourceFilePath, '').replace(path.join(rootDir, 'src'), distTypesDir)));
-    const importPath = normalizePath(path.join(typePath.dir, typePath.name));
-    const outputsInterface = outputs.length > 0
-        ? `import { ${cmpMeta.componentClassName} as I${cmpMeta.componentClassName} } from '${importPath}';`
-        : '';
     let outputsTypes = outputs
-        .filter((output) => !!output.complexType.references &&
+        .filter(output => !!output.complexType.references &&
         Object.prototype.hasOwnProperty.call(output.complexType.references, output.complexType.original) &&
         output.complexType.references[output.complexType.original].location === 'import')
-        .map((output) => output.complexType.resolved)
+        .map(output => output.complexType.original)
         .filter((item, pos, self) => self.indexOf(item) === pos)
         .join(', ');
     if (outputsTypes.length > 0) {
-        outputsTypes = `import { ${outputsTypes} } from '@baloise/ui-library';`;
+        outputsTypes = `import { ${outputsTypes} } from '${componentCorePackage}';`;
     }
     const lines = [
         `
 ${outputsTypes}
-${outputsInterface}
 export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {}
 ${getProxyCmp(inputs, methods)}
 @Component({
@@ -50,8 +43,8 @@ ${getProxyCmp(inputs, methods)}
 export class ${tagNameAsPascal} {`,
     ];
     // Generate outputs
-    outputs.forEach((output) => {
-        lines.push(`  /** ${output.docs.text} ${output.docs.tags.map((tag) => `@${tag.name} ${tag.text}`)}*/`);
+    outputs.forEach(output => {
+        lines.push(`  /** ${output.docs.text} ${output.docs.tags.map(tag => `@${tag.name} ${tag.text}`)}*/`);
         lines.push(`  ${output.name}!: EventEmitter<CustomEvent<${output.complexType.resolved}>>;`);
     });
     lines.push('  protected el: HTMLElement;');
@@ -59,7 +52,7 @@ export class ${tagNameAsPascal} {`,
     c.detach();
     this.el = r.nativeElement;`);
     if (hasOutputs) {
-        lines.push(`    proxyOutputs(this, this.el, ['${outputs.map((output) => output.name).join(`', '`)}']);`);
+        lines.push(`    proxyOutputs(this, this.el, ['${outputs.map(output => output.name).join(`', '`)}']);`);
     }
     lines.push(`  }`);
     lines.push(`}`);

package/dist/generate-value-accessors.js

@@ -1,14 +1,11 @@
 import path from 'path';
 export default async function generateValueAccessors(compilerCtx, components, outputTarget, config) {
-    if (!Array.isArray(outputTarget.valueAccessorConfigs) ||
-        outputTarget.valueAccessorConfigs.length === 0) {
+    if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
         return;
     }
     const targetDir = path.dirname(outputTarget.directivesProxyFile);
     const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
-        const elementSelectors = Array.isArray(va.elementSelectors)
-            ? va.elementSelectors
-            : [va.elementSelectors];
+        const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
         const type = va.type;
         let allElementSelectors = [];
         let allEventTargets = [];
@@ -33,7 +30,7 @@ export default async function generateValueAccessors(compilerCtx, components, ou
     await copyResources(config, ['value-accessor.ts'], targetDir);
 }
 function createValueAccessor(srcFileContents, valueAccessor) {
-    const hostContents = valueAccessor.eventTargets.map((listItem) => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
+    const hostContents = valueAccessor.eventTargets.map(listItem => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
     return srcFileContents
         .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
         .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(',\n'));
@@ -42,7 +39,7 @@ function copyResources(config, resourcesFilesToCopy, directory) {
     if (!config.sys || !config.sys.copy) {
         throw new Error('stencil is not properly intialized at this step. Notify the developer');
     }
-    const copyTasks = resourcesFilesToCopy.map((rf) => {
+    const copyTasks = resourcesFilesToCopy.map(rf => {
         return {
             src: path.join(__dirname, '../resources/control-value-accessors/', rf),
             dest: path.join(directory, rf),
@@ -55,4 +52,4 @@ function copyResources(config, resourcesFilesToCopy, 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_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
+const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;

package/dist/index.cjs.js

@@ -90,11 +90,11 @@ const SLASH_REGEX = /\\/g;
 const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
     // Collect component meta
     const inputs = [
-        ...cmpMeta.properties.filter((prop) => !prop.internal).map((prop) => prop.name),
-        ...cmpMeta.virtualProperties.map((prop) => prop.name),
+        ...cmpMeta.properties.filter(prop => !prop.internal).map(prop => prop.name),
+        ...cmpMeta.virtualProperties.map(prop => prop.name),
     ].sort();
-    const outputs = cmpMeta.events.filter((ev) => !ev.internal).map((prop) => prop);
-    const methods = cmpMeta.methods.filter((method) => !method.internal).map((prop) => prop.name);
+    const outputs = cmpMeta.events.filter(ev => !ev.internal).map(prop => prop);
+    const methods = cmpMeta.methods.filter(method => !method.internal).map(prop => prop.name);
     // Process meta
     const hasOutputs = outputs.length > 0;
     // Generate Angular @Directive
@@ -107,28 +107,22 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir)
         directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
     }
     if (outputs.length > 0) {
-        directiveOpts.push(`outputs: ['${outputs.map((output) => output.name).join(`', '`)}']`);
+        directiveOpts.push(`outputs: ['${outputs.map(output => output.name).join(`', '`)}']`);
     }
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const typePath = path__default['default'].parse(path__default['default'].join(componentCorePackage, path__default['default'].join(cmpMeta.sourceFilePath, '').replace(path__default['default'].join(rootDir, 'src'), distTypesDir)));
-    const importPath = normalizePath(path__default['default'].join(typePath.dir, typePath.name));
-    const outputsInterface = outputs.length > 0
-        ? `import { ${cmpMeta.componentClassName} as I${cmpMeta.componentClassName} } from '${importPath}';`
-        : '';
     let outputsTypes = outputs
-        .filter((output) => !!output.complexType.references &&
+        .filter(output => !!output.complexType.references &&
         Object.prototype.hasOwnProperty.call(output.complexType.references, output.complexType.original) &&
         output.complexType.references[output.complexType.original].location === 'import')
-        .map((output) => output.complexType.resolved)
+        .map(output => output.complexType.original)
         .filter((item, pos, self) => self.indexOf(item) === pos)
         .join(', ');
     if (outputsTypes.length > 0) {
-        outputsTypes = `import { ${outputsTypes} } from '@baloise/ui-library';`;
+        outputsTypes = `import { ${outputsTypes} } from '${componentCorePackage}';`;
     }
     const lines = [
         `
 ${outputsTypes}
-${outputsInterface}
 export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {}
 ${getProxyCmp(inputs, methods)}
 @Component({
@@ -137,8 +131,8 @@ ${getProxyCmp(inputs, methods)}
 export class ${tagNameAsPascal} {`,
     ];
     // Generate outputs
-    outputs.forEach((output) => {
-        lines.push(`  /** ${output.docs.text} ${output.docs.tags.map((tag) => `@${tag.name} ${tag.text}`)}*/`);
+    outputs.forEach(output => {
+        lines.push(`  /** ${output.docs.text} ${output.docs.tags.map(tag => `@${tag.name} ${tag.text}`)}*/`);
         lines.push(`  ${output.name}!: EventEmitter<CustomEvent<${output.complexType.resolved}>>;`);
     });
     lines.push('  protected el: HTMLElement;');
@@ -146,7 +140,7 @@ export class ${tagNameAsPascal} {`,
     c.detach();
     this.el = r.nativeElement;`);
     if (hasOutputs) {
-        lines.push(`    proxyOutputs(this, this.el, ['${outputs.map((output) => output.name).join(`', '`)}']);`);
+        lines.push(`    proxyOutputs(this, this.el, ['${outputs.map(output => output.name).join(`', '`)}']);`);
     }
     lines.push(`  }`);
     lines.push(`}`);
@@ -187,15 +181,12 @@ ${directives}
 }
 
 async function generateValueAccessors(compilerCtx, components, outputTarget, config) {
-    if (!Array.isArray(outputTarget.valueAccessorConfigs) ||
-        outputTarget.valueAccessorConfigs.length === 0) {
+    if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
         return;
     }
     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 elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
         const type = va.type;
         let allElementSelectors = [];
         let allEventTargets = [];
@@ -217,19 +208,19 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
         const finalText = createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType]);
         await compilerCtx.fs.writeFile(targetFilePath, finalText);
     }));
-    await copyResources(config, ['value-accessor.ts'], targetDir);
+    await copyResources$1(config, ['value-accessor.ts'], targetDir);
 }
 function createValueAccessor(srcFileContents, valueAccessor) {
-    const hostContents = valueAccessor.eventTargets.map((listItem) => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
+    const hostContents = valueAccessor.eventTargets.map(listItem => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
     return srcFileContents
         .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
         .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(',\n'));
 }
-function copyResources(config, resourcesFilesToCopy, directory) {
+function copyResources$1(config, resourcesFilesToCopy, directory) {
     if (!config.sys || !config.sys.copy) {
         throw new Error('stencil is not properly intialized at this step. Notify the developer');
     }
-    const copyTasks = resourcesFilesToCopy.map((rf) => {
+    const copyTasks = resourcesFilesToCopy.map(rf => {
         return {
             src: path__default['default'].join(__dirname, '../resources/control-value-accessors/', rf),
             dest: path__default['default'].join(directory, rf),
@@ -242,7 +233,7 @@ function copyResources(config, resourcesFilesToCopy, 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_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
+const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
 
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
@@ -251,7 +242,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
     await Promise.all([
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
-        copyResources$1(config, outputTarget),
+        copyResources(config, outputTarget),
         generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
     ]);
@@ -259,7 +250,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
 function getFilteredComponents(excludeComponents = [], cmps) {
     return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
 }
-async function copyResources$1(config, outputTarget) {
+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');
     }
@@ -289,7 +280,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
         imports,
         typeImports,
         components
-            .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir))
+            .map(createComponentDefinition(outputTarget.componentCorePackage))
             .join('\n'),
     ];
     return final.join('\n') + '\n';

package/dist/index.js

@@ -81,11 +81,11 @@ const SLASH_REGEX = /\\/g;
 const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
     // Collect component meta
     const inputs = [
-        ...cmpMeta.properties.filter((prop) => !prop.internal).map((prop) => prop.name),
-        ...cmpMeta.virtualProperties.map((prop) => prop.name),
+        ...cmpMeta.properties.filter(prop => !prop.internal).map(prop => prop.name),
+        ...cmpMeta.virtualProperties.map(prop => prop.name),
     ].sort();
-    const outputs = cmpMeta.events.filter((ev) => !ev.internal).map((prop) => prop);
-    const methods = cmpMeta.methods.filter((method) => !method.internal).map((prop) => prop.name);
+    const outputs = cmpMeta.events.filter(ev => !ev.internal).map(prop => prop);
+    const methods = cmpMeta.methods.filter(method => !method.internal).map(prop => prop.name);
     // Process meta
     const hasOutputs = outputs.length > 0;
     // Generate Angular @Directive
@@ -98,28 +98,22 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir)
         directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
     }
     if (outputs.length > 0) {
-        directiveOpts.push(`outputs: ['${outputs.map((output) => output.name).join(`', '`)}']`);
+        directiveOpts.push(`outputs: ['${outputs.map(output => output.name).join(`', '`)}']`);
     }
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const typePath = path.parse(path.join(componentCorePackage, path.join(cmpMeta.sourceFilePath, '').replace(path.join(rootDir, 'src'), distTypesDir)));
-    const importPath = normalizePath(path.join(typePath.dir, typePath.name));
-    const outputsInterface = outputs.length > 0
-        ? `import { ${cmpMeta.componentClassName} as I${cmpMeta.componentClassName} } from '${importPath}';`
-        : '';
     let outputsTypes = outputs
-        .filter((output) => !!output.complexType.references &&
+        .filter(output => !!output.complexType.references &&
         Object.prototype.hasOwnProperty.call(output.complexType.references, output.complexType.original) &&
         output.complexType.references[output.complexType.original].location === 'import')
-        .map((output) => output.complexType.resolved)
+        .map(output => output.complexType.original)
         .filter((item, pos, self) => self.indexOf(item) === pos)
         .join(', ');
     if (outputsTypes.length > 0) {
-        outputsTypes = `import { ${outputsTypes} } from '@baloise/ui-library';`;
+        outputsTypes = `import { ${outputsTypes} } from '${componentCorePackage}';`;
     }
     const lines = [
         `
 ${outputsTypes}
-${outputsInterface}
 export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {}
 ${getProxyCmp(inputs, methods)}
 @Component({
@@ -128,8 +122,8 @@ ${getProxyCmp(inputs, methods)}
 export class ${tagNameAsPascal} {`,
     ];
     // Generate outputs
-    outputs.forEach((output) => {
-        lines.push(`  /** ${output.docs.text} ${output.docs.tags.map((tag) => `@${tag.name} ${tag.text}`)}*/`);
+    outputs.forEach(output => {
+        lines.push(`  /** ${output.docs.text} ${output.docs.tags.map(tag => `@${tag.name} ${tag.text}`)}*/`);
         lines.push(`  ${output.name}!: EventEmitter<CustomEvent<${output.complexType.resolved}>>;`);
     });
     lines.push('  protected el: HTMLElement;');
@@ -137,7 +131,7 @@ export class ${tagNameAsPascal} {`,
     c.detach();
     this.el = r.nativeElement;`);
     if (hasOutputs) {
-        lines.push(`    proxyOutputs(this, this.el, ['${outputs.map((output) => output.name).join(`', '`)}']);`);
+        lines.push(`    proxyOutputs(this, this.el, ['${outputs.map(output => output.name).join(`', '`)}']);`);
     }
     lines.push(`  }`);
     lines.push(`}`);
@@ -178,15 +172,12 @@ ${directives}
 }
 
 async function generateValueAccessors(compilerCtx, components, outputTarget, config) {
-    if (!Array.isArray(outputTarget.valueAccessorConfigs) ||
-        outputTarget.valueAccessorConfigs.length === 0) {
+    if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
         return;
     }
     const targetDir = path.dirname(outputTarget.directivesProxyFile);
     const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
-        const elementSelectors = Array.isArray(va.elementSelectors)
-            ? va.elementSelectors
-            : [va.elementSelectors];
+        const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
         const type = va.type;
         let allElementSelectors = [];
         let allEventTargets = [];
@@ -208,19 +199,19 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
         const finalText = createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType]);
         await compilerCtx.fs.writeFile(targetFilePath, finalText);
     }));
-    await copyResources(config, ['value-accessor.ts'], targetDir);
+    await copyResources$1(config, ['value-accessor.ts'], targetDir);
 }
 function createValueAccessor(srcFileContents, valueAccessor) {
-    const hostContents = valueAccessor.eventTargets.map((listItem) => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
+    const hostContents = valueAccessor.eventTargets.map(listItem => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
     return srcFileContents
         .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
         .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(',\n'));
 }
-function copyResources(config, resourcesFilesToCopy, directory) {
+function copyResources$1(config, resourcesFilesToCopy, directory) {
     if (!config.sys || !config.sys.copy) {
         throw new Error('stencil is not properly intialized at this step. Notify the developer');
     }
-    const copyTasks = resourcesFilesToCopy.map((rf) => {
+    const copyTasks = resourcesFilesToCopy.map(rf => {
         return {
             src: path.join(__dirname, '../resources/control-value-accessors/', rf),
             dest: path.join(directory, rf),
@@ -233,7 +224,7 @@ function copyResources(config, resourcesFilesToCopy, 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_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
+const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
 
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
@@ -242,7 +233,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
     await Promise.all([
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
-        copyResources$1(config, outputTarget),
+        copyResources(config, outputTarget),
         generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
     ]);
@@ -250,7 +241,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
 function getFilteredComponents(excludeComponents = [], cmps) {
     return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
 }
-async function copyResources$1(config, outputTarget) {
+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');
     }
@@ -280,7 +271,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
         imports,
         typeImports,
         components
-            .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir))
+            .map(createComponentDefinition(outputTarget.componentCorePackage))
             .join('\n'),
     ];
     return final.join('\n') + '\n';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baloise/angular-output-target",
-  "version": "1.0.5",
+  "version": "1.0.15",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -37,8 +37,15 @@
     "url": "https://github.com/baloise/stencil-ds-output-targets/issues"
   },
   "devDependencies": {
-    "@angular/core": "8.2.14",
-    "@angular/forms": "8.2.14"
+    "@angular/common": "^10.2.5",
+    "@angular/core": "^10.2.5",
+    "@angular/forms": "^10.2.5",
+    "@angular/platform-browser": "^10.2.5",
+    "jest": "^26.6.3",
+    "rollup": "^2.56.3",
+    "rxjs": "^6.6.7",
+    "typescript": "^4.0.8",
+    "zone.js": "^0.10.3"
   },
   "jest": {
     "transform": {
@@ -54,5 +61,5 @@
     ],
     "testURL": "http://localhost"
   },
-  "gitHead": "d2bc71202af63b1a96db98f33556e050f949ecb7"
+  "gitHead": "5a5a9d8ff993f69679bbc03087ad1a94cd3851b0"
 }

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

@@ -1,27 +1,27 @@
-import { Directive, ElementRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Directive, ElementRef } from '@angular/core'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
 
-import { ValueAccessor } from './value-accessor';
+import { ValueAccessor } from './value-accessor'
 
 @Directive({
   /* 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.detail)',
   },
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: BooleanValueAccessor,
-      multi: true
-    }
-  ]
+      multi: true,
+    },
+  ],
 })
 export class BooleanValueAccessor extends ValueAccessor {
   constructor(el: ElementRef) {
-    super(el);
+    super(el)
   }
   writeValue(value: any) {
-    this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+    this.el.nativeElement.checked = this.lastValue = value == null ? false : value
   }
 }

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

@@ -1,29 +1,29 @@
-import { Directive, ElementRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Directive, ElementRef } from '@angular/core'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
 
-import { ValueAccessor } from './value-accessor';
+import { ValueAccessor } from './value-accessor'
 
 @Directive({
   /* 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.detail)',
   },
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: NumericValueAccessor,
-      multi: true
-    }
-  ]
+      multi: true,
+    },
+  ],
 })
 export class NumericValueAccessor extends ValueAccessor {
   constructor(el: ElementRef) {
-    super(el);
+    super(el)
   }
   registerOnChange(fn: (_: number | null) => void) {
     super.registerOnChange(value => {
-      fn(value === '' ? null : parseFloat(value));
-    });
+      fn(value === '' ? null : parseFloat(value))
+    })
   }
 }

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

@@ -1,24 +1,24 @@
-import { Directive, ElementRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Directive, ElementRef } from '@angular/core'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
 
-import { ValueAccessor } from './value-accessor';
+import { ValueAccessor } from './value-accessor'
 
 @Directive({
   /* 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.detail)',
   },
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: RadioValueAccessor,
-      multi: true
-    }
-  ]
+      multi: true,
+    },
+  ],
 })
 export class RadioValueAccessor extends ValueAccessor {
   constructor(el: ElementRef) {
-    super(el);
+    super(el)
   }
 }

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

@@ -1,24 +1,24 @@
-import { Directive, ElementRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Directive, ElementRef } from '@angular/core'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
 
-import { ValueAccessor } from './value-accessor';
+import { ValueAccessor } from './value-accessor'
 
 @Directive({
   /* 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.detail)',
   },
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: SelectValueAccessor,
-      multi: true
-    }
-  ]
+      multi: true,
+    },
+  ],
 })
 export class SelectValueAccessor extends ValueAccessor {
   constructor(el: ElementRef) {
-    super(el);
+    super(el)
   }
 }

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

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