@baloise/angular-output-target 1.0.23 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.26...@baloise/angular-output-target@1.1.0) (2022-01-31)
+
+
+### Features
+
+* **angular:** add modules for each component ([e6a5cd2](https://github.com/baloise/stencil-ds-output-targets/commit/e6a5cd209dd0d61a4bcbc8855fae965b0ff6f815))
+
+
+
+
+
+## [1.0.26](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.25...@baloise/angular-output-target@1.0.26) (2022-01-24)
+
+**Note:** Version bump only for package @baloise/angular-output-target
+
+
+
+
+
+## [1.0.25](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.24...@baloise/angular-output-target@1.0.25) (2022-01-08)
+
+
+### Bug Fixes
+
+* **angular:** change checked to value to add more components than the checkbox ([ff96e74](https://github.com/baloise/stencil-ds-output-targets/commit/ff96e742f1dcb1c8427a67f3a0c96dfe4baf75c5))
+
+
+
+
+
+## [1.0.24](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.23...@baloise/angular-output-target@1.0.24) (2022-01-08)
+
+**Note:** Version bump only for package @baloise/angular-output-target
+
+
+
+
+
 ## [1.0.23](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.22...@baloise/angular-output-target@1.0.23) (2022-01-06)
 
 **Note:** Version bump only for package @baloise/angular-output-target

package/dist/generate-angular-directives-file.js

@@ -6,8 +6,8 @@ export function generateAngularDirectivesFile(compilerCtx, components, outputTar
     }
     const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
     const directives = components
-        .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
-        .map((className) => `d.${className}`)
+        .map(cmpMeta => dashToPascalCase(cmpMeta.tagName))
+        .map(className => `d.${className}`)
         .join(',\n  ');
     const c = `
 import * as d from '${proxyPath}';

package/dist/generate-angular-module.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentCompilerMeta } from '@stencil/core/internal';
+import { ComponentGroup } from './types';
+export declare const createComponentModule: (groups?: {
+    [key: string]: ComponentGroup;
+}) => (cmpMeta: ComponentCompilerMeta) => string;

package/dist/generate-angular-module.js

@@ -0,0 +1,55 @@
+import { dashToPascalCase } from './utils';
+export const createComponentModule = (groups = {}) => (cmpMeta) => {
+    const isPrivate = Object.values(groups)
+        .flat()
+        .map(o => o.components)
+        .flat()
+        .some(tag => tag === cmpMeta.tagName);
+    if (isPrivate) {
+        return '';
+    }
+    const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
+    let cmpImports = [];
+    let cmpDefines = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].components) {
+        const children = groups[cmpMeta.tagName].components;
+        if (children) {
+            cmpImports = children.map(tag => `${dashToPascalCase(tag)}`);
+            cmpDefines = children.map(tag => `     define${dashToPascalCase(tag)}();`);
+        }
+    }
+    let providers = [];
+    let providerImports = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].providers) {
+        const children = groups[cmpMeta.tagName].providers;
+        if (children) {
+            providerImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
+            providers = children.map(p => p.name);
+        }
+    }
+    let declarations = [];
+    let declarationImports = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].declarations) {
+        const children = groups[cmpMeta.tagName].declarations;
+        if (children) {
+            declarationImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
+            declarations = children.map(p => p.name);
+        }
+    }
+    const finalText = `
+${providerImports.join('\n  ')}
+${declarationImports.join('\n  ')}
+
+@NgModule({
+  declarations: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
+  exports: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
+  providers: [${providers.join(', ')}],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ${tagNameAsPascal}Module {
+  constructor() {
+${[`    define${tagNameAsPascal}();`, ...cmpDefines].join('\n')}
+  }
+}`;
+    return finalText;
+};

package/dist/index.cjs.js

@@ -15,7 +15,7 @@ const readFile = util.promisify(fs__default['default'].readFile);
 const toLowerCase = (str) => str.toLowerCase();
 const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
     .join('');
 function sortBy(array, prop) {
     return array.slice().sort((a, b) => {
@@ -167,8 +167,8 @@ function generateAngularDirectivesFile(compilerCtx, components, outputTarget) {
     }
     const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
     const directives = components
-        .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
-        .map((className) => `d.${className}`)
+        .map(cmpMeta => dashToPascalCase(cmpMeta.tagName))
+        .map(className => `d.${className}`)
         .join(',\n  ');
     const c = `
 import * as d from '${proxyPath}';
@@ -235,20 +235,77 @@ const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
 
+const createComponentModule = (groups = {}) => (cmpMeta) => {
+    const isPrivate = Object.values(groups)
+        .flat()
+        .map(o => o.components)
+        .flat()
+        .some(tag => tag === cmpMeta.tagName);
+    if (isPrivate) {
+        return '';
+    }
+    const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
+    let cmpImports = [];
+    let cmpDefines = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].components) {
+        const children = groups[cmpMeta.tagName].components;
+        if (children) {
+            cmpImports = children.map(tag => `${dashToPascalCase(tag)}`);
+            cmpDefines = children.map(tag => `     define${dashToPascalCase(tag)}();`);
+        }
+    }
+    let providers = [];
+    let providerImports = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].providers) {
+        const children = groups[cmpMeta.tagName].providers;
+        if (children) {
+            providerImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
+            providers = children.map(p => p.name);
+        }
+    }
+    let declarations = [];
+    let declarationImports = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].declarations) {
+        const children = groups[cmpMeta.tagName].declarations;
+        if (children) {
+            declarationImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
+            declarations = children.map(p => p.name);
+        }
+    }
+    const finalText = `
+${providerImports.join('\n  ')}
+${declarationImports.join('\n  ')}
+
+@NgModule({
+  declarations: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
+  exports: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
+  providers: [${providers.join(', ')}],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ${tagNameAsPascal}Module {
+  constructor() {
+${[`    define${tagNameAsPascal}();`, ...cmpDefines].join('\n')}
+  }
+}`;
+    return finalText;
+};
+
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
     const pkgData = await readPackageJson(rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
+    const allComponentModule = generateAllComponentModule(filteredComponents, outputTarget);
     await Promise.all([
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
+        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile.replace('.ts', '.module.ts'), allComponentModule),
         copyResources(config, outputTarget),
         generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
     ]);
 }
 function getFilteredComponents(excludeComponents = [], cmps) {
-    return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
+    return sortBy(cmps, cmp => cmp.tagName).filter(c => !excludeComponents.includes(c.tagName) && !c.internal);
 }
 async function copyResources(config, outputTarget) {
     if (!config.sys || !config.sys.copy || !config.sys.glob) {
@@ -265,23 +322,52 @@ async function copyResources(config, outputTarget) {
         },
     ], srcDirectory);
 }
+function generateAllComponentModule(components, outputTarget) {
+    const childComponent = Object.values(outputTarget.componentGroups || {})
+        .flat()
+        .map(o => o.components)
+        .flat();
+    const moduleImports = components
+        .map(c => c.tagName)
+        .filter(c => !childComponent.includes(c))
+        .map(c => `  ${dashToPascalCase(c)}Module,`);
+    return `/* tslint:disable */
+/* auto-generated angular directive proxies */
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import {
+${moduleImports.join('\n')}
+} from './proxies'
+
+const modules = [
+${moduleImports.join('\n')}
+]
+
+@NgModule({
+  imports: [...modules],
+  exports: [...modules],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class BalAllComponentModule {}
+  `;
+}
 function generateProxies(components, pkgData, outputTarget, rootDir) {
     const distTypesDir = path__default['default'].dirname(pkgData.types);
     const dtsFilePath = path__default['default'].join(rootDir, distTypesDir, GENERATED_DTS);
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
+    const componentImports = components.map(c => `import { defineCustomElement as define${dashToPascalCase(c.tagName)} } from '${normalizePath(outputTarget.componentCorePackage || '')}/dist/components/${c.tagName}';`);
     const typeImports = !outputTarget.componentCorePackage
         ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
         : `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';`;
     const final = [
         imports,
         typeImports,
-        components
-            .map(createComponentDefinition(outputTarget.componentCorePackage))
-            .join('\n'),
+        componentImports.join('\n'),
+        components.map(createComponentDefinition(outputTarget.componentCorePackage)).join('\n'),
+        components.map(createComponentModule(outputTarget.componentGroups)).join('\n'),
     ];
     return final.join('\n') + '\n';
 }

package/dist/index.js

@@ -6,7 +6,7 @@ const readFile = promisify(fs.readFile);
 const toLowerCase = (str) => str.toLowerCase();
 const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
     .join('');
 function sortBy(array, prop) {
     return array.slice().sort((a, b) => {
@@ -158,8 +158,8 @@ function generateAngularDirectivesFile(compilerCtx, components, outputTarget) {
     }
     const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
     const directives = components
-        .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
-        .map((className) => `d.${className}`)
+        .map(cmpMeta => dashToPascalCase(cmpMeta.tagName))
+        .map(className => `d.${className}`)
         .join(',\n  ');
     const c = `
 import * as d from '${proxyPath}';
@@ -226,20 +226,77 @@ const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
 
+const createComponentModule = (groups = {}) => (cmpMeta) => {
+    const isPrivate = Object.values(groups)
+        .flat()
+        .map(o => o.components)
+        .flat()
+        .some(tag => tag === cmpMeta.tagName);
+    if (isPrivate) {
+        return '';
+    }
+    const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
+    let cmpImports = [];
+    let cmpDefines = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].components) {
+        const children = groups[cmpMeta.tagName].components;
+        if (children) {
+            cmpImports = children.map(tag => `${dashToPascalCase(tag)}`);
+            cmpDefines = children.map(tag => `     define${dashToPascalCase(tag)}();`);
+        }
+    }
+    let providers = [];
+    let providerImports = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].providers) {
+        const children = groups[cmpMeta.tagName].providers;
+        if (children) {
+            providerImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
+            providers = children.map(p => p.name);
+        }
+    }
+    let declarations = [];
+    let declarationImports = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].declarations) {
+        const children = groups[cmpMeta.tagName].declarations;
+        if (children) {
+            declarationImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
+            declarations = children.map(p => p.name);
+        }
+    }
+    const finalText = `
+${providerImports.join('\n  ')}
+${declarationImports.join('\n  ')}
+
+@NgModule({
+  declarations: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
+  exports: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
+  providers: [${providers.join(', ')}],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ${tagNameAsPascal}Module {
+  constructor() {
+${[`    define${tagNameAsPascal}();`, ...cmpDefines].join('\n')}
+  }
+}`;
+    return finalText;
+};
+
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
     const pkgData = await readPackageJson(rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
+    const allComponentModule = generateAllComponentModule(filteredComponents, outputTarget);
     await Promise.all([
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
+        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile.replace('.ts', '.module.ts'), allComponentModule),
         copyResources(config, outputTarget),
         generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
     ]);
 }
 function getFilteredComponents(excludeComponents = [], cmps) {
-    return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
+    return sortBy(cmps, cmp => cmp.tagName).filter(c => !excludeComponents.includes(c.tagName) && !c.internal);
 }
 async function copyResources(config, outputTarget) {
     if (!config.sys || !config.sys.copy || !config.sys.glob) {
@@ -256,23 +313,52 @@ async function copyResources(config, outputTarget) {
         },
     ], srcDirectory);
 }
+function generateAllComponentModule(components, outputTarget) {
+    const childComponent = Object.values(outputTarget.componentGroups || {})
+        .flat()
+        .map(o => o.components)
+        .flat();
+    const moduleImports = components
+        .map(c => c.tagName)
+        .filter(c => !childComponent.includes(c))
+        .map(c => `  ${dashToPascalCase(c)}Module,`);
+    return `/* tslint:disable */
+/* auto-generated angular directive proxies */
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import {
+${moduleImports.join('\n')}
+} from './proxies'
+
+const modules = [
+${moduleImports.join('\n')}
+]
+
+@NgModule({
+  imports: [...modules],
+  exports: [...modules],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class BalAllComponentModule {}
+  `;
+}
 function generateProxies(components, pkgData, outputTarget, rootDir) {
     const distTypesDir = path.dirname(pkgData.types);
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
+    const componentImports = components.map(c => `import { defineCustomElement as define${dashToPascalCase(c.tagName)} } from '${normalizePath(outputTarget.componentCorePackage || '')}/dist/components/${c.tagName}';`);
     const typeImports = !outputTarget.componentCorePackage
         ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
         : `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';`;
     const final = [
         imports,
         typeImports,
-        components
-            .map(createComponentDefinition(outputTarget.componentCorePackage))
-            .join('\n'),
+        componentImports.join('\n'),
+        components.map(createComponentDefinition(outputTarget.componentCorePackage)).join('\n'),
+        components.map(createComponentModule(outputTarget.componentGroups)).join('\n'),
     ];
     return final.join('\n') + '\n';
 }

package/dist/output-angular.d.ts

@@ -1,4 +1,5 @@
 import type { CompilerCtx, ComponentCompilerMeta, Config } from '@stencil/core/internal';
 import type { OutputTargetAngular, PackageJSON } from './types';
 export declare function angularDirectiveProxyOutput(compilerCtx: CompilerCtx, outputTarget: OutputTargetAngular, components: ComponentCompilerMeta[], config: Config): Promise<void>;
+export declare function generateAllComponentModule(components: ComponentCompilerMeta[], outputTarget: OutputTargetAngular): string;
 export declare function generateProxies(components: ComponentCompilerMeta[], pkgData: PackageJSON, outputTarget: OutputTargetAngular, rootDir: string): string;

package/dist/output-angular.js

@@ -1,22 +1,25 @@
 import path from 'path';
-import { relativeImport, normalizePath, sortBy, readPackageJson } from './utils';
+import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase } from './utils';
 import { createComponentDefinition } from './generate-angular-component';
 import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 import generateValueAccessors from './generate-value-accessors';
+import { createComponentModule } from './generate-angular-module';
 export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
     const pkgData = await readPackageJson(rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
+    const allComponentModule = generateAllComponentModule(filteredComponents, outputTarget);
     await Promise.all([
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
+        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile.replace('.ts', '.module.ts'), allComponentModule),
         copyResources(config, outputTarget),
         generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
     ]);
 }
 function getFilteredComponents(excludeComponents = [], cmps) {
-    return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
+    return sortBy(cmps, cmp => cmp.tagName).filter(c => !excludeComponents.includes(c.tagName) && !c.internal);
 }
 async function copyResources(config, outputTarget) {
     if (!config.sys || !config.sys.copy || !config.sys.glob) {
@@ -33,23 +36,52 @@ async function copyResources(config, outputTarget) {
         },
     ], srcDirectory);
 }
+export function generateAllComponentModule(components, outputTarget) {
+    const childComponent = Object.values(outputTarget.componentGroups || {})
+        .flat()
+        .map(o => o.components)
+        .flat();
+    const moduleImports = components
+        .map(c => c.tagName)
+        .filter(c => !childComponent.includes(c))
+        .map(c => `  ${dashToPascalCase(c)}Module,`);
+    return `/* tslint:disable */
+/* auto-generated angular directive proxies */
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import {
+${moduleImports.join('\n')}
+} from './proxies'
+
+const modules = [
+${moduleImports.join('\n')}
+]
+
+@NgModule({
+  imports: [...modules],
+  exports: [...modules],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class BalAllComponentModule {}
+  `;
+}
 export function generateProxies(components, pkgData, outputTarget, rootDir) {
     const distTypesDir = path.dirname(pkgData.types);
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
+    const componentImports = components.map(c => `import { defineCustomElement as define${dashToPascalCase(c.tagName)} } from '${normalizePath(outputTarget.componentCorePackage || '')}/dist/components/${c.tagName}';`);
     const typeImports = !outputTarget.componentCorePackage
         ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
         : `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';`;
     const final = [
         imports,
         typeImports,
-        components
-            .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir))
-            .join('\n'),
+        componentImports.join('\n'),
+        components.map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir)).join('\n'),
+        components.map(createComponentModule(outputTarget.componentGroups)).join('\n'),
     ];
     return final.join('\n') + '\n';
 }

package/dist/types.d.ts

@@ -5,6 +5,18 @@ export interface OutputTargetAngular {
     directivesUtilsFile?: string;
     valueAccessorConfigs?: ValueAccessorConfig[];
     excludeComponents?: string[];
+    componentGroups?: {
+        [key: string]: ComponentGroup;
+    };
+}
+export interface ComponentGroup {
+    components?: string[];
+    providers?: ComponentProvider[];
+    declarations?: ComponentProvider[];
+}
+export interface ComponentProvider {
+    import: string;
+    name: string;
 }
 export declare type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';
 export interface ValueAccessorConfig {

package/dist/utils.js

@@ -5,7 +5,7 @@ const readFile = promisify(fs.readFile);
 export const toLowerCase = (str) => str.toLowerCase();
 export const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
     .join('');
 export function sortBy(array, prop) {
     return array.slice().sort((a, b) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baloise/angular-output-target",
-  "version": "1.0.23",
+  "version": "1.1.0",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -61,5 +61,5 @@
     ],
     "testURL": "http://localhost"
   },
-  "gitHead": "cea66f85e82947196633b997ae0e696917cac498"
+  "gitHead": "6074bb9ab1b327fafca6ad13c5bc07366f7d27f2"
 }

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

@@ -22,6 +22,6 @@ export class BooleanValueAccessor extends ValueAccessor {
     super(el)
   }
   writeValue(value: any) {
-    this.el.nativeElement.checked = this.lastValue = value == null ? false : value
+    this.el.nativeElement.value = this.lastValue = value == null ? false : value
   }
 }