@stencil/angular-output-target 1.0.0 → 1.1.0

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.
  *
@@ -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,7 +75,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}]`);

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,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,7 +221,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}]`);
@@ -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');

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,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,7 +213,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}]`);
@@ -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');

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/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.0",
   "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",