@stencil/angular-output-target 0.10.2 → 1.1.0

package/README.md

@@ -14,6 +14,13 @@ For a detailed guide on how to add the angular output target to a project, visit
 npm install @stencil/angular-output-target
 ```
 
+## Angular Support
+
+| **@stencil/angular-output-target** | **Angular**     |
+|------------------------------------|-----------------|
+| 0.10.2                             | v18.x and lower |
+| 1.0.0                              | v19.x and above |
+
 ## Usage
 
 In your `stencil.config.ts` add the following configuration to the `outputTargets` section:

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

@@ -1,10 +1,10 @@
 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 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.
@@ -12,7 +12,7 @@ import type { OutputType } from './types';
  * @param inlineComponentProps List of properties that should be inlined into the component definition.
  * @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[], outputs: readonly string[], methods: readonly string[], includeImportCustomElements?: boolean, standalone?: boolean, inlineComponentProps?: readonly ComponentCompilerProperty[]) => 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.
  *
@@ -12,7 +12,7 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     let eventName = prop.name;
     if (/[-/]/.test(prop.name)) {
         // If a member name includes a dash or a forward slash, we need to wrap it in quotes.
-        // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
+        // https://github.com/stenciljs/output-targets/issues/212
         eventName = `'${prop.name}'`;
     }
     if (inlinePropertyAsSetter) {
@@ -24,11 +24,30 @@ 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 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.
@@ -42,7 +61,10 @@ export const createAngularComponentDefinition = (tagName, inputs, outputs, metho
     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,14 +75,14 @@ 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}]`);
     }
     let standaloneOption = '';
-    if (standalone && includeImportCustomElements) {
-        standaloneOption = `\n  standalone: true`;
+    if (!standalone) {
+        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  ');

package/dist/generate-value-accessors.js

@@ -36,7 +36,7 @@ export function createValueAccessor(srcFileContents, valueAccessor, outputType)
     return srcFileContents
         .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
         .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(`,${EOL}`))
-        .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType === OutputTypes.Standalone ? ',standalone: true' : '');
+        .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType !== OutputTypes.Standalone ? ',\nstandalone: false' : '');
 }
 function copyResources(config, resourcesFilesToCopy, directory) {
     if (!config.sys || !config.sys.copy) {
@@ -57,4 +57,4 @@ const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
 const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_STANDALONE = '<VALUE_ACCESSOR_STANDALONE>';
-const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
+const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'`;

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))
@@ -157,7 +158,7 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     let eventName = prop.name;
     if (/[-/]/.test(prop.name)) {
         // If a member name includes a dash or a forward slash, we need to wrap it in quotes.
-        // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
+        // https://github.com/stenciljs/output-targets/issues/212
         eventName = `'${prop.name}'`;
     }
     if (inlinePropertyAsSetter) {
@@ -169,11 +170,30 @@ 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 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.
@@ -187,7 +207,10 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
     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,14 +221,14 @@ 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}]`);
     }
     let standaloneOption = '';
-    if (standalone && includeImportCustomElements) {
-        standaloneOption = `\n  standalone: true`;
+    if (!standalone) {
+        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  ');
@@ -389,7 +412,7 @@ function createValueAccessor(srcFileContents, valueAccessor, outputType) {
     return srcFileContents
         .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
         .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(`,${os.EOL}`))
-        .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType === OutputTypes.Standalone ? ',standalone: true' : '');
+        .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType !== OutputTypes.Standalone ? ',\nstandalone: false' : '');
 }
 function copyResources$1(config, resourcesFilesToCopy, directory) {
     if (!config.sys || !config.sys.copy) {
@@ -410,7 +433,7 @@ const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
 const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_STANDALONE = '<VALUE_ACCESSOR_STANDALONE>';
-const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
+const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'`;
 
 /**
  * Creates an Angular module declaration for a component wrapper.
@@ -522,7 +545,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,11 +560,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.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
-        inputs.sort();
+        const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const outputs = [];
         if (cmpMeta.events) {
             outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
@@ -550,7 +580,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, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
         const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
@@ -581,7 +611,8 @@ const angularOutputTarget = (outputTarget) => {
     };
 };
 function normalizeOutputTarget(config, outputTarget) {
-    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: outputTarget.customElementsDir || 'components', outputType: outputTarget.outputType || OutputTypes.Component });
+    var _a, _b;
+    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: (_a = outputTarget.customElementsDir) !== null && _a !== void 0 ? _a : 'components', outputType: (_b = outputTarget.outputType) !== null && _b !== void 0 ? _b : OutputTypes.Standalone });
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }

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))
@@ -149,7 +150,7 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     let eventName = prop.name;
     if (/[-/]/.test(prop.name)) {
         // If a member name includes a dash or a forward slash, we need to wrap it in quotes.
-        // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
+        // https://github.com/stenciljs/output-targets/issues/212
         eventName = `'${prop.name}'`;
     }
     if (inlinePropertyAsSetter) {
@@ -161,11 +162,30 @@ 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 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.
@@ -179,7 +199,10 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
     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,14 +213,14 @@ 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}]`);
     }
     let standaloneOption = '';
-    if (standalone && includeImportCustomElements) {
-        standaloneOption = `\n  standalone: true`;
+    if (!standalone) {
+        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  ');
@@ -381,7 +404,7 @@ function createValueAccessor(srcFileContents, valueAccessor, outputType) {
     return srcFileContents
         .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
         .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(`,${EOL}`))
-        .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType === OutputTypes.Standalone ? ',standalone: true' : '');
+        .replace(VALUE_ACCESSOR_STANDALONE, outputType && outputType !== OutputTypes.Standalone ? ',\nstandalone: false' : '');
 }
 function copyResources$1(config, resourcesFilesToCopy, directory) {
     if (!config.sys || !config.sys.copy) {
@@ -402,7 +425,7 @@ const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
 const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_STANDALONE = '<VALUE_ACCESSOR_STANDALONE>';
-const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
+const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'`;
 
 /**
  * Creates an Angular module declaration for a component wrapper.
@@ -514,7 +537,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,11 +552,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.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
-        inputs.sort();
+        const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const outputs = [];
         if (cmpMeta.events) {
             outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
@@ -542,7 +572,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, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
         const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
@@ -573,7 +603,8 @@ const angularOutputTarget = (outputTarget) => {
     };
 };
 function normalizeOutputTarget(config, outputTarget) {
-    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: outputTarget.customElementsDir || 'components', outputType: outputTarget.outputType || OutputTypes.Component });
+    var _a, _b;
+    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: (_a = outputTarget.customElementsDir) !== null && _a !== void 0 ? _a : 'components', outputType: (_b = outputTarget.outputType) !== null && _b !== void 0 ? _b : OutputTypes.Standalone });
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }

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';
@@ -97,7 +97,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,11 +112,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.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
-        inputs.sort();
+        const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const outputs = [];
         if (cmpMeta.events) {
             outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
@@ -125,7 +132,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, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
         const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');

package/dist/plugin.js

@@ -17,7 +17,8 @@ export const angularOutputTarget = (outputTarget) => {
     };
 };
 export function normalizeOutputTarget(config, outputTarget) {
-    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: outputTarget.customElementsDir || 'components', outputType: outputTarget.outputType || OutputTypes.Component });
+    var _a, _b;
+    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: (_a = outputTarget.customElementsDir) !== null && _a !== void 0 ? _a : 'components', outputType: (_b = outputTarget.outputType) !== null && _b !== void 0 ? _b : OutputTypes.Standalone });
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }

package/dist/types.d.ts

@@ -2,7 +2,7 @@
  * The type of output that can be generated with the Angular output target.
  * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
  * - `scam` - Generate a Single Component Angular Module for each component.
- * - `standalone` - Generate a component with the `standalone` flag set to `true`.
+ * - `standalone` - Generates standalone components.
  */
 export type OutputType = 'component' | 'scam' | 'standalone';
 export interface OutputTargetAngular {
@@ -24,7 +24,7 @@ export interface OutputTargetAngular {
      * The type of output that should be generated.
      * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
      * - `scam` - Generate a Single Component Angular Module for each component.
-     * - `standalone` - Generate a component with the `standalone` flag set to `true`.
+     * - `standalone` - (default) Generates standalone components.
      */
     outputType?: OutputType;
     /**
@@ -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": "0.10.2",
+  "version": "1.1.0",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -39,17 +39,18 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ionic-team/stencil-ds-output-targets.git"
+    "url": "git+https://github.com/stenciljs/output-targets.git"
   },
   "author": "Ionic Team",
   "homepage": "https://stenciljs.com/",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues"
+    "url": "https://github.com/stenciljs/output-targets/issues"
   },
   "devDependencies": {
     "@angular/core": "8.2.14",
     "@angular/forms": "8.2.14",
+    "@stencil/core": "4.35.1",
     "@types/node": "^18.0.0",
     "npm-run-all2": "^6.2.4",
     "rimraf": "^5.0.0",

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

@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
   },
   providers: [
     {

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

@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
   },
   providers: [
     {

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

@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
   },
   providers: [
     {

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

@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
   },
   providers: [
     {

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

@@ -7,7 +7,7 @@ import { ValueAccessor } from './value-accessor';
   /* tslint:disable-next-line:directive-selector */
   selector: '<VALUE_ACCESSOR_SELECTORS>',
   host: {
-    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target?.["<VALUE_ACCESSOR_TARGETATTR>"])'
   },
   providers: [
     {