@stencil/angular-output-target 1.1.0 → 1.1.1

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

@@ -5,14 +5,14 @@ import type { ComponentInputProperty, OutputType } from './types';
  *
  * @param tagName The tag name of the component.
  * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
- * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
  * @param methods The methods of the Stencil component. (e.g. ['myMethod']).
  * @param includeImportCustomElements Whether to define the component as a custom element.
  * @param standalone Whether to define the component as a standalone component.
  * @param inlineComponentProps List of properties that should be inlined into the component definition.
+ * @param events The events of the Stencil component for generating outputs.
  * @returns The component declaration as a string.
  */
-export declare const createAngularComponentDefinition: (tagName: string, inputs: readonly ComponentInputProperty[], outputs: readonly string[], methods: readonly string[], includeImportCustomElements?: boolean, standalone?: boolean, inlineComponentProps?: readonly ComponentCompilerProperty[]) => string;
+export declare const createAngularComponentDefinition: (tagName: string, inputs: readonly ComponentInputProperty[], methods: readonly string[], includeImportCustomElements?: boolean, standalone?: boolean, inlineComponentProps?: readonly ComponentCompilerProperty[], events?: readonly ComponentCompilerEvent[]) => string;
 /**
  * Creates the component interface type definition.
  * @param outputType The output type.

package/dist/generate-angular-component.js

@@ -48,15 +48,16 @@ function formatInputs(inputs) {
  *
  * @param tagName The tag name of the component.
  * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
- * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
  * @param methods The methods of the Stencil component. (e.g. ['myMethod']).
  * @param includeImportCustomElements Whether to define the component as a custom element.
  * @param standalone Whether to define the component as a standalone component.
  * @param inlineComponentProps List of properties that should be inlined into the component definition.
+ * @param events The events of the Stencil component for generating outputs.
  * @returns The component declaration as a string.
  */
-export const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = []) => {
+export const createAngularComponentDefinition = (tagName, inputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = [], events = []) => {
     const tagNameAsPascal = dashToPascalCase(tagName);
+    const outputs = events.filter((event) => !event.internal).map((event) => event.name);
     const hasInputs = inputs.length > 0;
     const hasOutputs = outputs.length > 0;
     const hasMethods = methods.length > 0;
@@ -85,7 +86,18 @@ export const createAngularComponentDefinition = (tagName, inputs, outputs, metho
         standaloneOption = `\n  standalone: false`;
     }
     const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
-    const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n  ');
+    const outputDeclarations = events
+        .filter((event) => !event.internal)
+        .map((event) => {
+        const camelCaseOutput = event.name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+        const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
+        return `@Output() ${camelCaseOutput} = new ${outputType}();`;
+    });
+    const propertiesDeclarationText = [
+        `protected el: HTML${tagNameAsPascal}Element;`,
+        ...propertyDeclarations,
+        ...outputDeclarations,
+    ].join('\n  ');
     /**
      * Notes on the generated output:
      * - We disable @angular-eslint/no-inputs-metadata-property, so that
@@ -99,16 +111,13 @@ export const createAngularComponentDefinition = (tagName, inputs, outputs, metho
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [${formattedInputs}],${standaloneOption}
+  inputs: [${formattedInputs}],${hasOutputs ? `\n  outputs: [${formattedOutputs}],` : ''}${standaloneOption}
 })
 export class ${tagNameAsPascal} {
   ${propertiesDeclarationText}
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
-    this.el = r.nativeElement;${hasOutputs
-        ? `
-    proxyOutputs(this, this.el, [${formattedOutputs}]);`
-        : ''}
+    this.el = r.nativeElement;
   }
 }`;
     return output;

package/dist/index.cjs.js

@@ -194,15 +194,16 @@ function formatInputs(inputs) {
  *
  * @param tagName The tag name of the component.
  * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
- * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
  * @param methods The methods of the Stencil component. (e.g. ['myMethod']).
  * @param includeImportCustomElements Whether to define the component as a custom element.
  * @param standalone Whether to define the component as a standalone component.
  * @param inlineComponentProps List of properties that should be inlined into the component definition.
+ * @param events The events of the Stencil component for generating outputs.
  * @returns The component declaration as a string.
  */
-const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = []) => {
+const createAngularComponentDefinition = (tagName, inputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = [], events = []) => {
     const tagNameAsPascal = dashToPascalCase(tagName);
+    const outputs = events.filter((event) => !event.internal).map((event) => event.name);
     const hasInputs = inputs.length > 0;
     const hasOutputs = outputs.length > 0;
     const hasMethods = methods.length > 0;
@@ -231,7 +232,18 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
         standaloneOption = `\n  standalone: false`;
     }
     const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
-    const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n  ');
+    const outputDeclarations = events
+        .filter((event) => !event.internal)
+        .map((event) => {
+        const camelCaseOutput = event.name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+        const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
+        return `@Output() ${camelCaseOutput} = new ${outputType}();`;
+    });
+    const propertiesDeclarationText = [
+        `protected el: HTML${tagNameAsPascal}Element;`,
+        ...propertyDeclarations,
+        ...outputDeclarations,
+    ].join('\n  ');
     /**
      * Notes on the generated output:
      * - We disable @angular-eslint/no-inputs-metadata-property, so that
@@ -245,16 +257,13 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [${formattedInputs}],${standaloneOption}
+  inputs: [${formattedInputs}],${hasOutputs ? `\n  outputs: [${formattedOutputs}],` : ''}${standaloneOption}
 })
 export class ${tagNameAsPascal} {
   ${propertiesDeclarationText}
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
-    this.el = r.nativeElement;${hasOutputs
-        ? `
-    proxyOutputs(this, this.el, [${formattedOutputs}]);`
-        : ''}
+    this.el = r.nativeElement;
   }
 }`;
     return output;
@@ -497,16 +506,13 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
      */
     const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef'];
     if (includeOutputImports) {
-        angularCoreImports.push('EventEmitter');
+        angularCoreImports.push('EventEmitter', 'Output');
     }
     angularCoreImports.push('NgZone');
     /**
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp'];
-    if (includeOutputImports) {
-        componentLibImports.push('proxyOutputs');
-    }
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
@@ -565,10 +571,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
             inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
         const orderedInputs = sortBy(inputs, (cip) => cip.name);
-        const outputs = [];
-        if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
-        }
         const methods = [];
         if (cmpMeta.methods) {
             methods.push(...cmpMeta.methods.filter(filterInternalProps).map(mapPropName));
@@ -580,7 +582,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          * 2. Optionally the @NgModule decorated class (if includeSingleComponentAngularModules is true)
          * 3. The component interface (using declaration merging for types).
          */
-        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
+        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
         const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');

package/dist/index.js

@@ -186,15 +186,16 @@ function formatInputs(inputs) {
  *
  * @param tagName The tag name of the component.
  * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
- * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
  * @param methods The methods of the Stencil component. (e.g. ['myMethod']).
  * @param includeImportCustomElements Whether to define the component as a custom element.
  * @param standalone Whether to define the component as a standalone component.
  * @param inlineComponentProps List of properties that should be inlined into the component definition.
+ * @param events The events of the Stencil component for generating outputs.
  * @returns The component declaration as a string.
  */
-const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = []) => {
+const createAngularComponentDefinition = (tagName, inputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = [], events = []) => {
     const tagNameAsPascal = dashToPascalCase(tagName);
+    const outputs = events.filter((event) => !event.internal).map((event) => event.name);
     const hasInputs = inputs.length > 0;
     const hasOutputs = outputs.length > 0;
     const hasMethods = methods.length > 0;
@@ -223,7 +224,18 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
         standaloneOption = `\n  standalone: false`;
     }
     const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
-    const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n  ');
+    const outputDeclarations = events
+        .filter((event) => !event.internal)
+        .map((event) => {
+        const camelCaseOutput = event.name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+        const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
+        return `@Output() ${camelCaseOutput} = new ${outputType}();`;
+    });
+    const propertiesDeclarationText = [
+        `protected el: HTML${tagNameAsPascal}Element;`,
+        ...propertyDeclarations,
+        ...outputDeclarations,
+    ].join('\n  ');
     /**
      * Notes on the generated output:
      * - We disable @angular-eslint/no-inputs-metadata-property, so that
@@ -237,16 +249,13 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [${formattedInputs}],${standaloneOption}
+  inputs: [${formattedInputs}],${hasOutputs ? `\n  outputs: [${formattedOutputs}],` : ''}${standaloneOption}
 })
 export class ${tagNameAsPascal} {
   ${propertiesDeclarationText}
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
-    this.el = r.nativeElement;${hasOutputs
-        ? `
-    proxyOutputs(this, this.el, [${formattedOutputs}]);`
-        : ''}
+    this.el = r.nativeElement;
   }
 }`;
     return output;
@@ -489,16 +498,13 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
      */
     const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef'];
     if (includeOutputImports) {
-        angularCoreImports.push('EventEmitter');
+        angularCoreImports.push('EventEmitter', 'Output');
     }
     angularCoreImports.push('NgZone');
     /**
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp'];
-    if (includeOutputImports) {
-        componentLibImports.push('proxyOutputs');
-    }
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
@@ -557,10 +563,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
             inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
         const orderedInputs = sortBy(inputs, (cip) => cip.name);
-        const outputs = [];
-        if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
-        }
         const methods = [];
         if (cmpMeta.methods) {
             methods.push(...cmpMeta.methods.filter(filterInternalProps).map(mapPropName));
@@ -572,7 +574,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          * 2. Optionally the @NgModule decorated class (if includeSingleComponentAngularModules is true)
          * 3. The component interface (using declaration merging for types).
          */
-        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
+        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
         const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');

package/dist/output-angular.js

@@ -49,16 +49,13 @@ export function generateProxies(components, pkgData, outputTarget, rootDir) {
      */
     const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef'];
     if (includeOutputImports) {
-        angularCoreImports.push('EventEmitter');
+        angularCoreImports.push('EventEmitter', 'Output');
     }
     angularCoreImports.push('NgZone');
     /**
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp'];
-    if (includeOutputImports) {
-        componentLibImports.push('proxyOutputs');
-    }
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
@@ -117,10 +114,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
             inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
         const orderedInputs = sortBy(inputs, (cip) => cip.name);
-        const outputs = [];
-        if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
-        }
         const methods = [];
         if (cmpMeta.methods) {
             methods.push(...cmpMeta.methods.filter(filterInternalProps).map(mapPropName));
@@ -132,7 +125,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          * 2. Optionally the @NgModule decorated class (if includeSingleComponentAngularModules is true)
          * 3. The component interface (using declaration merging for types).
          */
-        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
+        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
         const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",