@stencil/angular-output-target 1.0.0 → 1.1.1

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

@@ -1,18 +1,18 @@
 import type { ComponentCompilerEvent, ComponentCompilerProperty } from '@stencil/core/internal';
-import type { OutputType } from './types';
+import type { ComponentInputProperty, OutputType } from './types';
 /**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
  *
  * @param tagName The tag name of the component.
- * @param inputs The inputs of the Stencil component (e.g. ['myInput']).
- * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
  * @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 string[], 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

@@ -1,4 +1,4 @@
-import { createComponentEventTypeImports, dashToPascalCase, formatToQuotedList } from './utils';
+import { createComponentEventTypeImports, dashToPascalCase, formatToQuotedList, mapPropName } from './utils';
 /**
  * Creates a property declaration.
  *
@@ -24,25 +24,48 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
   ${eventName}: ${type};`;
     }
 }
+/**
+ * Creates a formatted inputs text with required declaration.
+ *
+ * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
+ * @returns The inputs list declaration as a string.
+ */
+function formatInputs(inputs) {
+    return inputs
+        .map((item) => {
+        if (item.required) {
+            return `{ name: '${item.name}', required: true }`;
+        }
+        else {
+            return `'${item.name}'`;
+        }
+    })
+        .join(', ');
+}
 /**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
  *
  * @param tagName The tag name of the component.
- * @param inputs The inputs of the Stencil component (e.g. ['myInput']).
- * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
  * @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;
     // Formats the input strings into comma separated, single quoted values.
-    const formattedInputs = formatToQuotedList(inputs);
+    const proxyCmpFormattedInputs = formatToQuotedList(inputs.map(mapPropName));
+    // Formats the input strings into comma separated, single quoted values if optional.
+    // Formats the required input strings into comma separated {name, required} objects.
+    const formattedInputs = formatInputs(inputs);
     // Formats the output strings into comma separated, single quoted values.
     const formattedOutputs = formatToQuotedList(outputs);
     // Formats the method strings into comma separated, single quoted values.
@@ -53,7 +76,7 @@ export const createAngularComponentDefinition = (tagName, inputs, outputs, metho
         proxyCmpOptions.push(`\n  defineCustomElementFn: ${defineCustomElementFn}`);
     }
     if (hasInputs) {
-        proxyCmpOptions.push(`\n  inputs: [${formattedInputs}]`);
+        proxyCmpOptions.push(`\n  inputs: [${proxyCmpFormattedInputs}]`);
     }
     if (hasMethods) {
         proxyCmpOptions.push(`\n  methods: [${formattedMethods}]`);
@@ -63,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
@@ -77,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

@@ -15,6 +15,7 @@ const OutputTypes = {
     Standalone: 'standalone',
 };
 const toLowerCase = (str) => str.toLowerCase();
+const mapPropName = (prop) => prop.name;
 const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
     .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
@@ -169,25 +170,48 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
   ${eventName}: ${type};`;
     }
 }
+/**
+ * Creates a formatted inputs text with required declaration.
+ *
+ * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
+ * @returns The inputs list declaration as a string.
+ */
+function formatInputs(inputs) {
+    return inputs
+        .map((item) => {
+        if (item.required) {
+            return `{ name: '${item.name}', required: true }`;
+        }
+        else {
+            return `'${item.name}'`;
+        }
+    })
+        .join(', ');
+}
 /**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
  *
  * @param tagName The tag name of the component.
- * @param inputs The inputs of the Stencil component (e.g. ['myInput']).
- * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
  * @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;
     // Formats the input strings into comma separated, single quoted values.
-    const formattedInputs = formatToQuotedList(inputs);
+    const proxyCmpFormattedInputs = formatToQuotedList(inputs.map(mapPropName));
+    // Formats the input strings into comma separated, single quoted values if optional.
+    // Formats the required input strings into comma separated {name, required} objects.
+    const formattedInputs = formatInputs(inputs);
     // Formats the output strings into comma separated, single quoted values.
     const formattedOutputs = formatToQuotedList(outputs);
     // Formats the method strings into comma separated, single quoted values.
@@ -198,7 +222,7 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
         proxyCmpOptions.push(`\n  defineCustomElementFn: ${defineCustomElementFn}`);
     }
     if (hasInputs) {
-        proxyCmpOptions.push(`\n  inputs: [${formattedInputs}]`);
+        proxyCmpOptions.push(`\n  inputs: [${proxyCmpFormattedInputs}]`);
     }
     if (hasMethods) {
         proxyCmpOptions.push(`\n  methods: [${formattedMethods}]`);
@@ -208,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
@@ -222,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;
@@ -474,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');
     }
@@ -522,7 +551,14 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     }
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
-    const mapPropName = (prop) => prop.name;
+    // Ensure that virtual properties has required as false.
+    const mapInputProp = (prop) => {
+        var _a;
+        return ({
+            name: prop.name,
+            required: (_a = prop.required) !== null && _a !== void 0 ? _a : false,
+        });
+    };
     const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
@@ -530,15 +566,11 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         if (cmpMeta.properties) {
             internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
         }
-        const inputs = internalProps.map(mapPropName);
+        const inputs = internalProps.map(mapInputProp);
         if (cmpMeta.virtualProperties) {
-            inputs.push(...cmpMeta.virtualProperties.map(mapPropName));
-        }
-        inputs.sort();
-        const outputs = [];
-        if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
+            inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
+        const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const methods = [];
         if (cmpMeta.methods) {
             methods.push(...cmpMeta.methods.filter(filterInternalProps).map(mapPropName));
@@ -550,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, inputs, 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

@@ -7,6 +7,7 @@ const OutputTypes = {
     Standalone: 'standalone',
 };
 const toLowerCase = (str) => str.toLowerCase();
+const mapPropName = (prop) => prop.name;
 const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
     .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
@@ -161,25 +162,48 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
   ${eventName}: ${type};`;
     }
 }
+/**
+ * Creates a formatted inputs text with required declaration.
+ *
+ * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
+ * @returns The inputs list declaration as a string.
+ */
+function formatInputs(inputs) {
+    return inputs
+        .map((item) => {
+        if (item.required) {
+            return `{ name: '${item.name}', required: true }`;
+        }
+        else {
+            return `'${item.name}'`;
+        }
+    })
+        .join(', ');
+}
 /**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
  *
  * @param tagName The tag name of the component.
- * @param inputs The inputs of the Stencil component (e.g. ['myInput']).
- * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
  * @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;
     // Formats the input strings into comma separated, single quoted values.
-    const formattedInputs = formatToQuotedList(inputs);
+    const proxyCmpFormattedInputs = formatToQuotedList(inputs.map(mapPropName));
+    // Formats the input strings into comma separated, single quoted values if optional.
+    // Formats the required input strings into comma separated {name, required} objects.
+    const formattedInputs = formatInputs(inputs);
     // Formats the output strings into comma separated, single quoted values.
     const formattedOutputs = formatToQuotedList(outputs);
     // Formats the method strings into comma separated, single quoted values.
@@ -190,7 +214,7 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
         proxyCmpOptions.push(`\n  defineCustomElementFn: ${defineCustomElementFn}`);
     }
     if (hasInputs) {
-        proxyCmpOptions.push(`\n  inputs: [${formattedInputs}]`);
+        proxyCmpOptions.push(`\n  inputs: [${proxyCmpFormattedInputs}]`);
     }
     if (hasMethods) {
         proxyCmpOptions.push(`\n  methods: [${formattedMethods}]`);
@@ -200,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
@@ -214,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;
@@ -466,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');
     }
@@ -514,7 +543,14 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     }
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
-    const mapPropName = (prop) => prop.name;
+    // Ensure that virtual properties has required as false.
+    const mapInputProp = (prop) => {
+        var _a;
+        return ({
+            name: prop.name,
+            required: (_a = prop.required) !== null && _a !== void 0 ? _a : false,
+        });
+    };
     const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
@@ -522,15 +558,11 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         if (cmpMeta.properties) {
             internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
         }
-        const inputs = internalProps.map(mapPropName);
+        const inputs = internalProps.map(mapInputProp);
         if (cmpMeta.virtualProperties) {
-            inputs.push(...cmpMeta.virtualProperties.map(mapPropName));
-        }
-        inputs.sort();
-        const outputs = [];
-        if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
+            inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
+        const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const methods = [];
         if (cmpMeta.methods) {
             methods.push(...cmpMeta.methods.filter(filterInternalProps).map(mapPropName));
@@ -542,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, inputs, 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

@@ -1,5 +1,5 @@
 import path from 'path';
-import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, createImportStatement, isOutputTypeCustomElementsBuild, OutputTypes, } from './utils';
+import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, createImportStatement, isOutputTypeCustomElementsBuild, OutputTypes, mapPropName, } from './utils';
 import { createAngularComponentDefinition, createComponentTypeDefinition } from './generate-angular-component';
 import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 import generateValueAccessors from './generate-value-accessors';
@@ -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');
     }
@@ -97,7 +94,14 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     }
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
-    const mapPropName = (prop) => prop.name;
+    // Ensure that virtual properties has required as false.
+    const mapInputProp = (prop) => {
+        var _a;
+        return ({
+            name: prop.name,
+            required: (_a = prop.required) !== null && _a !== void 0 ? _a : false,
+        });
+    };
     const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
@@ -105,15 +109,11 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         if (cmpMeta.properties) {
             internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
         }
-        const inputs = internalProps.map(mapPropName);
+        const inputs = internalProps.map(mapInputProp);
         if (cmpMeta.virtualProperties) {
-            inputs.push(...cmpMeta.virtualProperties.map(mapPropName));
-        }
-        inputs.sort();
-        const outputs = [];
-        if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
+            inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
+        const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const methods = [];
         if (cmpMeta.methods) {
             methods.push(...cmpMeta.methods.filter(filterInternalProps).map(mapPropName));
@@ -125,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, inputs, 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/types.d.ts

@@ -44,3 +44,7 @@ export interface ValueAccessorConfig {
 export interface PackageJSON {
     types: string;
 }
+export interface ComponentInputProperty {
+    name: string;
+    required: boolean;
+}

package/dist/utils.d.ts

@@ -4,6 +4,9 @@ export declare const OutputTypes: {
     [key: string]: OutputType;
 };
 export declare const toLowerCase: (str: string) => string;
+export declare const mapPropName: (prop: {
+    name: string;
+}) => string;
 export declare const dashToPascalCase: (str: string) => string;
 export declare function sortBy<T>(array: T[], prop: (item: T) => string): T[];
 export declare function normalizePath(str: string): string;

package/dist/utils.js

@@ -5,6 +5,7 @@ export const OutputTypes = {
     Standalone: 'standalone',
 };
 export const toLowerCase = (str) => str.toLowerCase();
+export const mapPropName = (prop) => prop.name;
 export const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
     .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@angular/core": "8.2.14",
     "@angular/forms": "8.2.14",
-    "@stencil/core": "4.32.0",
+    "@stencil/core": "4.35.1",
     "@types/node": "^18.0.0",
     "npm-run-all2": "^6.2.4",
     "rimraf": "^5.0.0",