@baloise/angular-output-target 1.0.5 → 1.0.15

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md CHANGED
@@ -3,3 +3,69 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [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)
7
+
8
+ **Note:** Version bump only for package @baloise/angular-output-target
9
+
10
+
11
+
12
+
13
+
14
+ ## [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)
15
+
16
+ **Note:** Version bump only for package @baloise/angular-output-target
17
+
18
+
19
+
20
+
21
+
22
+ ## [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)
23
+
24
+
25
+ ### Bug Fixes
26
+
27
+ * remove ui-library and use variable instead ([f86568a](https://github.com/baloise/stencil-ds-output-targets/commit/f86568a27f9e2c80b35d1e201ab7822cc5e58d03))
28
+
29
+
30
+
31
+
32
+
33
+ ## [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)
34
+
35
+ **Note:** Version bump only for package @baloise/angular-output-target
36
+
37
+
38
+
39
+
40
+
41
+ ## [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)
42
+
43
+ **Note:** Version bump only for package @baloise/angular-output-target
44
+
45
+
46
+
47
+
48
+
49
+ ## [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)
50
+
51
+ **Note:** Version bump only for package @baloise/angular-output-target
52
+
53
+
54
+
55
+
56
+
57
+ ## [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)
58
+
59
+
60
+ ### Bug Fixes
61
+
62
+ * **angular:** remove unused interfaces ([e21f4fa](https://github.com/baloise/stencil-ds-output-targets/commit/e21f4fadf8e0f0ed7da8a52276162c374785a2b2))
63
+ * **angular:** remove unused interfaces ([bb19a4b](https://github.com/baloise/stencil-ds-output-targets/commit/bb19a4b1d48460d1f854692490804132427fcd63))
64
+
65
+
66
+
67
+
68
+
69
+ ## [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)
70
+
71
+ **Note:** Version bump only for package @baloise/angular-output-target
@@ -1,13 +1,12 @@
1
- import path from 'path';
2
- import { dashToPascalCase, normalizePath } from './utils';
1
+ import { dashToPascalCase } from './utils';
3
2
  export const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
4
3
  // Collect component meta
5
4
  const inputs = [
6
- ...cmpMeta.properties.filter((prop) => !prop.internal).map((prop) => prop.name),
7
- ...cmpMeta.virtualProperties.map((prop) => prop.name),
5
+ ...cmpMeta.properties.filter(prop => !prop.internal).map(prop => prop.name),
6
+ ...cmpMeta.virtualProperties.map(prop => prop.name),
8
7
  ].sort();
9
- const outputs = cmpMeta.events.filter((ev) => !ev.internal).map((prop) => prop);
10
- const methods = cmpMeta.methods.filter((method) => !method.internal).map((prop) => prop.name);
8
+ const outputs = cmpMeta.events.filter(ev => !ev.internal).map(prop => prop);
9
+ const methods = cmpMeta.methods.filter(method => !method.internal).map(prop => prop.name);
11
10
  // Process meta
12
11
  const hasOutputs = outputs.length > 0;
13
12
  // Generate Angular @Directive
@@ -20,28 +19,22 @@ export const createComponentDefinition = (componentCorePackage, distTypesDir, ro
20
19
  directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
21
20
  }
22
21
  if (outputs.length > 0) {
23
- directiveOpts.push(`outputs: ['${outputs.map((output) => output.name).join(`', '`)}']`);
22
+ directiveOpts.push(`outputs: ['${outputs.map(output => output.name).join(`', '`)}']`);
24
23
  }
25
24
  const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
26
- const typePath = path.parse(path.join(componentCorePackage, path.join(cmpMeta.sourceFilePath, '').replace(path.join(rootDir, 'src'), distTypesDir)));
27
- const importPath = normalizePath(path.join(typePath.dir, typePath.name));
28
- const outputsInterface = outputs.length > 0
29
- ? `import { ${cmpMeta.componentClassName} as I${cmpMeta.componentClassName} } from '${importPath}';`
30
- : '';
31
25
  let outputsTypes = outputs
32
- .filter((output) => !!output.complexType.references &&
26
+ .filter(output => !!output.complexType.references &&
33
27
  Object.prototype.hasOwnProperty.call(output.complexType.references, output.complexType.original) &&
34
28
  output.complexType.references[output.complexType.original].location === 'import')
35
- .map((output) => output.complexType.resolved)
29
+ .map(output => output.complexType.original)
36
30
  .filter((item, pos, self) => self.indexOf(item) === pos)
37
31
  .join(', ');
38
32
  if (outputsTypes.length > 0) {
39
- outputsTypes = `import { ${outputsTypes} } from '@baloise/ui-library';`;
33
+ outputsTypes = `import { ${outputsTypes} } from '${componentCorePackage}';`;
40
34
  }
41
35
  const lines = [
42
36
  `
43
37
  ${outputsTypes}
44
- ${outputsInterface}
45
38
  export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {}
46
39
  ${getProxyCmp(inputs, methods)}
47
40
  @Component({
@@ -50,8 +43,8 @@ ${getProxyCmp(inputs, methods)}
50
43
  export class ${tagNameAsPascal} {`,
51
44
  ];
52
45
  // Generate outputs
53
- outputs.forEach((output) => {
54
- lines.push(` /** ${output.docs.text} ${output.docs.tags.map((tag) => `@${tag.name} ${tag.text}`)}*/`);
46
+ outputs.forEach(output => {
47
+ lines.push(` /** ${output.docs.text} ${output.docs.tags.map(tag => `@${tag.name} ${tag.text}`)}*/`);
55
48
  lines.push(` ${output.name}!: EventEmitter<CustomEvent<${output.complexType.resolved}>>;`);
56
49
  });
57
50
  lines.push(' protected el: HTMLElement;');
@@ -59,7 +52,7 @@ export class ${tagNameAsPascal} {`,
59
52
  c.detach();
60
53
  this.el = r.nativeElement;`);
61
54
  if (hasOutputs) {
62
- lines.push(` proxyOutputs(this, this.el, ['${outputs.map((output) => output.name).join(`', '`)}']);`);
55
+ lines.push(` proxyOutputs(this, this.el, ['${outputs.map(output => output.name).join(`', '`)}']);`);
63
56
  }
64
57
  lines.push(` }`);
65
58
  lines.push(`}`);
@@ -1,14 +1,11 @@
1
1
  import path from 'path';
2
2
  export default async function generateValueAccessors(compilerCtx, components, outputTarget, config) {
3
- if (!Array.isArray(outputTarget.valueAccessorConfigs) ||
4
- outputTarget.valueAccessorConfigs.length === 0) {
3
+ if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
5
4
  return;
6
5
  }
7
6
  const targetDir = path.dirname(outputTarget.directivesProxyFile);
8
7
  const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
9
- const elementSelectors = Array.isArray(va.elementSelectors)
10
- ? va.elementSelectors
11
- : [va.elementSelectors];
8
+ const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
12
9
  const type = va.type;
13
10
  let allElementSelectors = [];
14
11
  let allEventTargets = [];
@@ -33,7 +30,7 @@ export default async function generateValueAccessors(compilerCtx, components, ou
33
30
  await copyResources(config, ['value-accessor.ts'], targetDir);
34
31
  }
35
32
  function createValueAccessor(srcFileContents, valueAccessor) {
36
- const hostContents = valueAccessor.eventTargets.map((listItem) => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
33
+ const hostContents = valueAccessor.eventTargets.map(listItem => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
37
34
  return srcFileContents
38
35
  .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
39
36
  .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(',\n'));
@@ -42,7 +39,7 @@ function copyResources(config, resourcesFilesToCopy, directory) {
42
39
  if (!config.sys || !config.sys.copy) {
43
40
  throw new Error('stencil is not properly intialized at this step. Notify the developer');
44
41
  }
45
- const copyTasks = resourcesFilesToCopy.map((rf) => {
42
+ const copyTasks = resourcesFilesToCopy.map(rf => {
46
43
  return {
47
44
  src: path.join(__dirname, '../resources/control-value-accessors/', rf),
48
45
  dest: path.join(directory, rf),
@@ -55,4 +52,4 @@ function copyResources(config, resourcesFilesToCopy, directory) {
55
52
  const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
56
53
  const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
57
54
  const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
58
- const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
55
+ const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
package/dist/index.cjs.js CHANGED
@@ -90,11 +90,11 @@ const SLASH_REGEX = /\\/g;
90
90
  const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
91
91
  // Collect component meta
92
92
  const inputs = [
93
- ...cmpMeta.properties.filter((prop) => !prop.internal).map((prop) => prop.name),
94
- ...cmpMeta.virtualProperties.map((prop) => prop.name),
93
+ ...cmpMeta.properties.filter(prop => !prop.internal).map(prop => prop.name),
94
+ ...cmpMeta.virtualProperties.map(prop => prop.name),
95
95
  ].sort();
96
- const outputs = cmpMeta.events.filter((ev) => !ev.internal).map((prop) => prop);
97
- const methods = cmpMeta.methods.filter((method) => !method.internal).map((prop) => prop.name);
96
+ const outputs = cmpMeta.events.filter(ev => !ev.internal).map(prop => prop);
97
+ const methods = cmpMeta.methods.filter(method => !method.internal).map(prop => prop.name);
98
98
  // Process meta
99
99
  const hasOutputs = outputs.length > 0;
100
100
  // Generate Angular @Directive
@@ -107,28 +107,22 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir)
107
107
  directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
108
108
  }
109
109
  if (outputs.length > 0) {
110
- directiveOpts.push(`outputs: ['${outputs.map((output) => output.name).join(`', '`)}']`);
110
+ directiveOpts.push(`outputs: ['${outputs.map(output => output.name).join(`', '`)}']`);
111
111
  }
112
112
  const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
113
- 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)));
114
- const importPath = normalizePath(path__default['default'].join(typePath.dir, typePath.name));
115
- const outputsInterface = outputs.length > 0
116
- ? `import { ${cmpMeta.componentClassName} as I${cmpMeta.componentClassName} } from '${importPath}';`
117
- : '';
118
113
  let outputsTypes = outputs
119
- .filter((output) => !!output.complexType.references &&
114
+ .filter(output => !!output.complexType.references &&
120
115
  Object.prototype.hasOwnProperty.call(output.complexType.references, output.complexType.original) &&
121
116
  output.complexType.references[output.complexType.original].location === 'import')
122
- .map((output) => output.complexType.resolved)
117
+ .map(output => output.complexType.original)
123
118
  .filter((item, pos, self) => self.indexOf(item) === pos)
124
119
  .join(', ');
125
120
  if (outputsTypes.length > 0) {
126
- outputsTypes = `import { ${outputsTypes} } from '@baloise/ui-library';`;
121
+ outputsTypes = `import { ${outputsTypes} } from '${componentCorePackage}';`;
127
122
  }
128
123
  const lines = [
129
124
  `
130
125
  ${outputsTypes}
131
- ${outputsInterface}
132
126
  export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {}
133
127
  ${getProxyCmp(inputs, methods)}
134
128
  @Component({
@@ -137,8 +131,8 @@ ${getProxyCmp(inputs, methods)}
137
131
  export class ${tagNameAsPascal} {`,
138
132
  ];
139
133
  // Generate outputs
140
- outputs.forEach((output) => {
141
- lines.push(` /** ${output.docs.text} ${output.docs.tags.map((tag) => `@${tag.name} ${tag.text}`)}*/`);
134
+ outputs.forEach(output => {
135
+ lines.push(` /** ${output.docs.text} ${output.docs.tags.map(tag => `@${tag.name} ${tag.text}`)}*/`);
142
136
  lines.push(` ${output.name}!: EventEmitter<CustomEvent<${output.complexType.resolved}>>;`);
143
137
  });
144
138
  lines.push(' protected el: HTMLElement;');
@@ -146,7 +140,7 @@ export class ${tagNameAsPascal} {`,
146
140
  c.detach();
147
141
  this.el = r.nativeElement;`);
148
142
  if (hasOutputs) {
149
- lines.push(` proxyOutputs(this, this.el, ['${outputs.map((output) => output.name).join(`', '`)}']);`);
143
+ lines.push(` proxyOutputs(this, this.el, ['${outputs.map(output => output.name).join(`', '`)}']);`);
150
144
  }
151
145
  lines.push(` }`);
152
146
  lines.push(`}`);
@@ -187,15 +181,12 @@ ${directives}
187
181
  }
188
182
 
189
183
  async function generateValueAccessors(compilerCtx, components, outputTarget, config) {
190
- if (!Array.isArray(outputTarget.valueAccessorConfigs) ||
191
- outputTarget.valueAccessorConfigs.length === 0) {
184
+ if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
192
185
  return;
193
186
  }
194
187
  const targetDir = path__default['default'].dirname(outputTarget.directivesProxyFile);
195
188
  const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
196
- const elementSelectors = Array.isArray(va.elementSelectors)
197
- ? va.elementSelectors
198
- : [va.elementSelectors];
189
+ const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
199
190
  const type = va.type;
200
191
  let allElementSelectors = [];
201
192
  let allEventTargets = [];
@@ -217,19 +208,19 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
217
208
  const finalText = createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType]);
218
209
  await compilerCtx.fs.writeFile(targetFilePath, finalText);
219
210
  }));
220
- await copyResources(config, ['value-accessor.ts'], targetDir);
211
+ await copyResources$1(config, ['value-accessor.ts'], targetDir);
221
212
  }
222
213
  function createValueAccessor(srcFileContents, valueAccessor) {
223
- const hostContents = valueAccessor.eventTargets.map((listItem) => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
214
+ const hostContents = valueAccessor.eventTargets.map(listItem => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
224
215
  return srcFileContents
225
216
  .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
226
217
  .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(',\n'));
227
218
  }
228
- function copyResources(config, resourcesFilesToCopy, directory) {
219
+ function copyResources$1(config, resourcesFilesToCopy, directory) {
229
220
  if (!config.sys || !config.sys.copy) {
230
221
  throw new Error('stencil is not properly intialized at this step. Notify the developer');
231
222
  }
232
- const copyTasks = resourcesFilesToCopy.map((rf) => {
223
+ const copyTasks = resourcesFilesToCopy.map(rf => {
233
224
  return {
234
225
  src: path__default['default'].join(__dirname, '../resources/control-value-accessors/', rf),
235
226
  dest: path__default['default'].join(directory, rf),
@@ -242,7 +233,7 @@ function copyResources(config, resourcesFilesToCopy, directory) {
242
233
  const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
243
234
  const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
244
235
  const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
245
- const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
236
+ const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
246
237
 
247
238
  async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
248
239
  const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
@@ -251,7 +242,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
251
242
  const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
252
243
  await Promise.all([
253
244
  compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
254
- copyResources$1(config, outputTarget),
245
+ copyResources(config, outputTarget),
255
246
  generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
256
247
  generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
257
248
  ]);
@@ -259,7 +250,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
259
250
  function getFilteredComponents(excludeComponents = [], cmps) {
260
251
  return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
261
252
  }
262
- async function copyResources$1(config, outputTarget) {
253
+ async function copyResources(config, outputTarget) {
263
254
  if (!config.sys || !config.sys.copy || !config.sys.glob) {
264
255
  throw new Error('stencil is not properly initialized at this step. Notify the developer');
265
256
  }
@@ -289,7 +280,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
289
280
  imports,
290
281
  typeImports,
291
282
  components
292
- .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir))
283
+ .map(createComponentDefinition(outputTarget.componentCorePackage))
293
284
  .join('\n'),
294
285
  ];
295
286
  return final.join('\n') + '\n';
package/dist/index.js CHANGED
@@ -81,11 +81,11 @@ const SLASH_REGEX = /\\/g;
81
81
  const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
82
82
  // Collect component meta
83
83
  const inputs = [
84
- ...cmpMeta.properties.filter((prop) => !prop.internal).map((prop) => prop.name),
85
- ...cmpMeta.virtualProperties.map((prop) => prop.name),
84
+ ...cmpMeta.properties.filter(prop => !prop.internal).map(prop => prop.name),
85
+ ...cmpMeta.virtualProperties.map(prop => prop.name),
86
86
  ].sort();
87
- const outputs = cmpMeta.events.filter((ev) => !ev.internal).map((prop) => prop);
88
- const methods = cmpMeta.methods.filter((method) => !method.internal).map((prop) => prop.name);
87
+ const outputs = cmpMeta.events.filter(ev => !ev.internal).map(prop => prop);
88
+ const methods = cmpMeta.methods.filter(method => !method.internal).map(prop => prop.name);
89
89
  // Process meta
90
90
  const hasOutputs = outputs.length > 0;
91
91
  // Generate Angular @Directive
@@ -98,28 +98,22 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir)
98
98
  directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
99
99
  }
100
100
  if (outputs.length > 0) {
101
- directiveOpts.push(`outputs: ['${outputs.map((output) => output.name).join(`', '`)}']`);
101
+ directiveOpts.push(`outputs: ['${outputs.map(output => output.name).join(`', '`)}']`);
102
102
  }
103
103
  const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
104
- const typePath = path.parse(path.join(componentCorePackage, path.join(cmpMeta.sourceFilePath, '').replace(path.join(rootDir, 'src'), distTypesDir)));
105
- const importPath = normalizePath(path.join(typePath.dir, typePath.name));
106
- const outputsInterface = outputs.length > 0
107
- ? `import { ${cmpMeta.componentClassName} as I${cmpMeta.componentClassName} } from '${importPath}';`
108
- : '';
109
104
  let outputsTypes = outputs
110
- .filter((output) => !!output.complexType.references &&
105
+ .filter(output => !!output.complexType.references &&
111
106
  Object.prototype.hasOwnProperty.call(output.complexType.references, output.complexType.original) &&
112
107
  output.complexType.references[output.complexType.original].location === 'import')
113
- .map((output) => output.complexType.resolved)
108
+ .map(output => output.complexType.original)
114
109
  .filter((item, pos, self) => self.indexOf(item) === pos)
115
110
  .join(', ');
116
111
  if (outputsTypes.length > 0) {
117
- outputsTypes = `import { ${outputsTypes} } from '@baloise/ui-library';`;
112
+ outputsTypes = `import { ${outputsTypes} } from '${componentCorePackage}';`;
118
113
  }
119
114
  const lines = [
120
115
  `
121
116
  ${outputsTypes}
122
- ${outputsInterface}
123
117
  export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {}
124
118
  ${getProxyCmp(inputs, methods)}
125
119
  @Component({
@@ -128,8 +122,8 @@ ${getProxyCmp(inputs, methods)}
128
122
  export class ${tagNameAsPascal} {`,
129
123
  ];
130
124
  // Generate outputs
131
- outputs.forEach((output) => {
132
- lines.push(` /** ${output.docs.text} ${output.docs.tags.map((tag) => `@${tag.name} ${tag.text}`)}*/`);
125
+ outputs.forEach(output => {
126
+ lines.push(` /** ${output.docs.text} ${output.docs.tags.map(tag => `@${tag.name} ${tag.text}`)}*/`);
133
127
  lines.push(` ${output.name}!: EventEmitter<CustomEvent<${output.complexType.resolved}>>;`);
134
128
  });
135
129
  lines.push(' protected el: HTMLElement;');
@@ -137,7 +131,7 @@ export class ${tagNameAsPascal} {`,
137
131
  c.detach();
138
132
  this.el = r.nativeElement;`);
139
133
  if (hasOutputs) {
140
- lines.push(` proxyOutputs(this, this.el, ['${outputs.map((output) => output.name).join(`', '`)}']);`);
134
+ lines.push(` proxyOutputs(this, this.el, ['${outputs.map(output => output.name).join(`', '`)}']);`);
141
135
  }
142
136
  lines.push(` }`);
143
137
  lines.push(`}`);
@@ -178,15 +172,12 @@ ${directives}
178
172
  }
179
173
 
180
174
  async function generateValueAccessors(compilerCtx, components, outputTarget, config) {
181
- if (!Array.isArray(outputTarget.valueAccessorConfigs) ||
182
- outputTarget.valueAccessorConfigs.length === 0) {
175
+ if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
183
176
  return;
184
177
  }
185
178
  const targetDir = path.dirname(outputTarget.directivesProxyFile);
186
179
  const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
187
- const elementSelectors = Array.isArray(va.elementSelectors)
188
- ? va.elementSelectors
189
- : [va.elementSelectors];
180
+ const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
190
181
  const type = va.type;
191
182
  let allElementSelectors = [];
192
183
  let allEventTargets = [];
@@ -208,19 +199,19 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
208
199
  const finalText = createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType]);
209
200
  await compilerCtx.fs.writeFile(targetFilePath, finalText);
210
201
  }));
211
- await copyResources(config, ['value-accessor.ts'], targetDir);
202
+ await copyResources$1(config, ['value-accessor.ts'], targetDir);
212
203
  }
213
204
  function createValueAccessor(srcFileContents, valueAccessor) {
214
- const hostContents = valueAccessor.eventTargets.map((listItem) => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
205
+ const hostContents = valueAccessor.eventTargets.map(listItem => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
215
206
  return srcFileContents
216
207
  .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
217
208
  .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(',\n'));
218
209
  }
219
- function copyResources(config, resourcesFilesToCopy, directory) {
210
+ function copyResources$1(config, resourcesFilesToCopy, directory) {
220
211
  if (!config.sys || !config.sys.copy) {
221
212
  throw new Error('stencil is not properly intialized at this step. Notify the developer');
222
213
  }
223
- const copyTasks = resourcesFilesToCopy.map((rf) => {
214
+ const copyTasks = resourcesFilesToCopy.map(rf => {
224
215
  return {
225
216
  src: path.join(__dirname, '../resources/control-value-accessors/', rf),
226
217
  dest: path.join(directory, rf),
@@ -233,7 +224,7 @@ function copyResources(config, resourcesFilesToCopy, directory) {
233
224
  const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
234
225
  const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
235
226
  const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
236
- const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
227
+ const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
237
228
 
238
229
  async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
239
230
  const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
@@ -242,7 +233,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
242
233
  const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
243
234
  await Promise.all([
244
235
  compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
245
- copyResources$1(config, outputTarget),
236
+ copyResources(config, outputTarget),
246
237
  generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
247
238
  generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
248
239
  ]);
@@ -250,7 +241,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
250
241
  function getFilteredComponents(excludeComponents = [], cmps) {
251
242
  return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
252
243
  }
253
- async function copyResources$1(config, outputTarget) {
244
+ async function copyResources(config, outputTarget) {
254
245
  if (!config.sys || !config.sys.copy || !config.sys.glob) {
255
246
  throw new Error('stencil is not properly initialized at this step. Notify the developer');
256
247
  }
@@ -280,7 +271,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
280
271
  imports,
281
272
  typeImports,
282
273
  components
283
- .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir))
274
+ .map(createComponentDefinition(outputTarget.componentCorePackage))
284
275
  .join('\n'),
285
276
  ];
286
277
  return final.join('\n') + '\n';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@baloise/angular-output-target",
3
- "version": "1.0.5",
3
+ "version": "1.0.15",
4
4
  "description": "Angular output target for @stencil/core components.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -37,8 +37,15 @@
37
37
  "url": "https://github.com/baloise/stencil-ds-output-targets/issues"
38
38
  },
39
39
  "devDependencies": {
40
- "@angular/core": "8.2.14",
41
- "@angular/forms": "8.2.14"
40
+ "@angular/common": "^10.2.5",
41
+ "@angular/core": "^10.2.5",
42
+ "@angular/forms": "^10.2.5",
43
+ "@angular/platform-browser": "^10.2.5",
44
+ "jest": "^26.6.3",
45
+ "rollup": "^2.56.3",
46
+ "rxjs": "^6.6.7",
47
+ "typescript": "^4.0.8",
48
+ "zone.js": "^0.10.3"
42
49
  },
43
50
  "jest": {
44
51
  "transform": {
@@ -54,5 +61,5 @@
54
61
  ],
55
62
  "testURL": "http://localhost"
56
63
  },
57
- "gitHead": "d2bc71202af63b1a96db98f33556e050f949ecb7"
64
+ "gitHead": "5a5a9d8ff993f69679bbc03087ad1a94cd3851b0"
58
65
  }
@@ -1,27 +1,27 @@
1
- import { Directive, ElementRef } from '@angular/core';
2
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
1
+ import { Directive, ElementRef } from '@angular/core'
2
+ import { NG_VALUE_ACCESSOR } from '@angular/forms'
3
3
 
4
- import { ValueAccessor } from './value-accessor';
4
+ import { ValueAccessor } from './value-accessor'
5
5
 
6
6
  @Directive({
7
7
  /* tslint:disable-next-line:directive-selector */
8
8
  selector: '<VALUE_ACCESSOR_SELECTORS>',
9
9
  host: {
10
- '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
10
+ '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
11
11
  },
12
12
  providers: [
13
13
  {
14
14
  provide: NG_VALUE_ACCESSOR,
15
15
  useExisting: BooleanValueAccessor,
16
- multi: true
17
- }
18
- ]
16
+ multi: true,
17
+ },
18
+ ],
19
19
  })
20
20
  export class BooleanValueAccessor extends ValueAccessor {
21
21
  constructor(el: ElementRef) {
22
- super(el);
22
+ super(el)
23
23
  }
24
24
  writeValue(value: any) {
25
- this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
25
+ this.el.nativeElement.checked = this.lastValue = value == null ? false : value
26
26
  }
27
27
  }
@@ -1,29 +1,29 @@
1
- import { Directive, ElementRef } from '@angular/core';
2
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
1
+ import { Directive, ElementRef } from '@angular/core'
2
+ import { NG_VALUE_ACCESSOR } from '@angular/forms'
3
3
 
4
- import { ValueAccessor } from './value-accessor';
4
+ import { ValueAccessor } from './value-accessor'
5
5
 
6
6
  @Directive({
7
7
  /* tslint:disable-next-line:directive-selector */
8
8
  selector: '<VALUE_ACCESSOR_SELECTORS>',
9
9
  host: {
10
- '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
10
+ '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
11
11
  },
12
12
  providers: [
13
13
  {
14
14
  provide: NG_VALUE_ACCESSOR,
15
15
  useExisting: NumericValueAccessor,
16
- multi: true
17
- }
18
- ]
16
+ multi: true,
17
+ },
18
+ ],
19
19
  })
20
20
  export class NumericValueAccessor extends ValueAccessor {
21
21
  constructor(el: ElementRef) {
22
- super(el);
22
+ super(el)
23
23
  }
24
24
  registerOnChange(fn: (_: number | null) => void) {
25
25
  super.registerOnChange(value => {
26
- fn(value === '' ? null : parseFloat(value));
27
- });
26
+ fn(value === '' ? null : parseFloat(value))
27
+ })
28
28
  }
29
29
  }
@@ -1,24 +1,24 @@
1
- import { Directive, ElementRef } from '@angular/core';
2
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
1
+ import { Directive, ElementRef } from '@angular/core'
2
+ import { NG_VALUE_ACCESSOR } from '@angular/forms'
3
3
 
4
- import { ValueAccessor } from './value-accessor';
4
+ import { ValueAccessor } from './value-accessor'
5
5
 
6
6
  @Directive({
7
7
  /* tslint:disable-next-line:directive-selector */
8
8
  selector: '<VALUE_ACCESSOR_SELECTORS>',
9
9
  host: {
10
- '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
10
+ '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
11
11
  },
12
12
  providers: [
13
13
  {
14
14
  provide: NG_VALUE_ACCESSOR,
15
15
  useExisting: RadioValueAccessor,
16
- multi: true
17
- }
18
- ]
16
+ multi: true,
17
+ },
18
+ ],
19
19
  })
20
20
  export class RadioValueAccessor extends ValueAccessor {
21
21
  constructor(el: ElementRef) {
22
- super(el);
22
+ super(el)
23
23
  }
24
24
  }
@@ -1,24 +1,24 @@
1
- import { Directive, ElementRef } from '@angular/core';
2
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
1
+ import { Directive, ElementRef } from '@angular/core'
2
+ import { NG_VALUE_ACCESSOR } from '@angular/forms'
3
3
 
4
- import { ValueAccessor } from './value-accessor';
4
+ import { ValueAccessor } from './value-accessor'
5
5
 
6
6
  @Directive({
7
7
  /* tslint:disable-next-line:directive-selector */
8
8
  selector: '<VALUE_ACCESSOR_SELECTORS>',
9
9
  host: {
10
- '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
10
+ '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
11
11
  },
12
12
  providers: [
13
13
  {
14
14
  provide: NG_VALUE_ACCESSOR,
15
15
  useExisting: SelectValueAccessor,
16
- multi: true
17
- }
18
- ]
16
+ multi: true,
17
+ },
18
+ ],
19
19
  })
20
20
  export class SelectValueAccessor extends ValueAccessor {
21
21
  constructor(el: ElementRef) {
22
- super(el);
22
+ super(el)
23
23
  }
24
24
  }
@@ -1,24 +1,24 @@
1
- import { Directive, ElementRef } from '@angular/core';
2
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
1
+ import { Directive, ElementRef } from '@angular/core'
2
+ import { NG_VALUE_ACCESSOR } from '@angular/forms'
3
3
 
4
- import { ValueAccessor } from './value-accessor';
4
+ import { ValueAccessor } from './value-accessor'
5
5
 
6
6
  @Directive({
7
7
  /* tslint:disable-next-line:directive-selector */
8
8
  selector: '<VALUE_ACCESSOR_SELECTORS>',
9
9
  host: {
10
- '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
10
+ '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
11
11
  },
12
12
  providers: [
13
13
  {
14
14
  provide: NG_VALUE_ACCESSOR,
15
15
  useExisting: TextValueAccessor,
16
- multi: true
17
- }
18
- ]
16
+ multi: true,
17
+ },
18
+ ],
19
19
  })
20
20
  export class TextValueAccessor extends ValueAccessor {
21
21
  constructor(el: ElementRef) {
22
- super(el);
22
+ super(el)
23
23
  }
24
24
  }