@stencil/angular-output-target 1.3.1 → 1.4.0

package/dist/generate-angular-component.js

@@ -90,7 +90,7 @@ export const createAngularComponentDefinition = (tagName, inputs, methods, inclu
         .filter((event) => !event.internal)
         .map((event) => {
         const camelCaseOutput = event.name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-        const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
+        const outputType = `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
         return `@Output() ${camelCaseOutput} = new ${outputType}();`;
     });
     const propertiesDeclarationText = [
@@ -164,8 +164,8 @@ const formatOutputType = (componentClassName, event) => {
             .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (_, p1, p2) => {
             /**
              * Replaces a complex type reference within a generic type.
-             * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
-             * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
+             * For example, remapping a type like `EventEmitter<MyComponentCustomEvent<MyEvent<T>>>` to
+             * `EventEmitter<MyComponentCustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
              */
             return [p1, prefixedTypeName, p2].join('');
         })
@@ -209,7 +209,7 @@ export const createComponentTypeDefinition = (outputType, tagNameAsPascal, event
         customElementsDir,
         outputType,
     });
-    const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
+    const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
     const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
         `${interfaceDeclaration}${eventTypes.length === 0

package/dist/generate-value-accessors.js

@@ -1,5 +1,8 @@
 import { EOL } from 'os';
 import path from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 import { OutputTypes } from './utils';
 export default async function generateValueAccessors(compilerCtx, components, outputTarget, config) {
     if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
@@ -15,10 +18,13 @@ export default async function generateValueAccessors(compilerCtx, components, ou
             allElementSelectors = allAccessors[type].elementSelectors;
             allEventTargets = allAccessors[type].eventTargets;
         }
-        return Object.assign(Object.assign({}, allAccessors), { [type]: {
+        return {
+            ...allAccessors,
+            [type]: {
                 elementSelectors: allElementSelectors.concat(elementSelectors),
                 eventTargets: allEventTargets.concat([[va.event, va.targetAttr]]),
-            } });
+            },
+        };
     }, {});
     await Promise.all(Object.keys(normalizedValueAccessors).map(async (type) => {
         const valueAccessorType = type; // Object.keys converts to string

package/dist/{index.cjs.js → index.cjs}

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var path = require('path');
+var url = require('url');
 var os = require('os');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -69,11 +70,10 @@ function relativeImport(pathFrom, pathTo, ext) {
     return normalizePath(`${relativePath}/${path__default["default"].basename(pathTo, ext)}`);
 }
 async function readPackageJson(config, rootDir) {
-    var _a;
     const pkgJsonPath = path__default["default"].join(rootDir, 'package.json');
     let pkgJson;
     try {
-        pkgJson = (await ((_a = config.sys) === null || _a === void 0 ? void 0 : _a.readFile(pkgJsonPath, 'utf8')));
+        pkgJson = (await config.sys?.readFile(pkgJsonPath, 'utf8'));
     }
     catch (e) {
         throw new Error(`Missing "package.json" file for distribution: ${pkgJsonPath}`);
@@ -127,6 +127,14 @@ const createComponentEventTypeImports = (componentTagName, events, options) => {
     const namedImports = new Set();
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
     const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
+    /**
+     * Each component's events are typed with the per-component CustomEvent type
+     * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a
+     * narrowed `target`. Import it once per component that emits public events.
+     */
+    if (events.length > 0) {
+        imports.push(`import type { ${componentTagName}CustomEvent } from '${importPathName}';`);
+    }
     events.forEach((event) => {
         Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
             if (refObject.location === 'local' || refObject.location === 'import') {
@@ -236,7 +244,7 @@ const createAngularComponentDefinition = (tagName, inputs, methods, includeImpor
         .filter((event) => !event.internal)
         .map((event) => {
         const camelCaseOutput = event.name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-        const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
+        const outputType = `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
         return `@Output() ${camelCaseOutput} = new ${outputType}();`;
     });
     const propertiesDeclarationText = [
@@ -310,8 +318,8 @@ const formatOutputType = (componentClassName, event) => {
             .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (_, p1, p2) => {
             /**
              * Replaces a complex type reference within a generic type.
-             * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
-             * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
+             * For example, remapping a type like `EventEmitter<MyComponentCustomEvent<MyEvent<T>>>` to
+             * `EventEmitter<MyComponentCustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
              */
             return [p1, prefixedTypeName, p2].join('');
         })
@@ -355,7 +363,7 @@ const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, comp
         customElementsDir,
         outputType,
     });
-    const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
+    const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
     const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
         `${interfaceDeclaration}${eventTypes.length === 0
@@ -386,6 +394,8 @@ export const DIRECTIVES = [
     return compilerCtx.fs.writeFile(outputTarget.directivesArrayFile, c);
 }
 
+const __filename$2 = url.fileURLToPath((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT' && document.currentScript.src || new URL('index.cjs', document.baseURI).href)));
+const __dirname$2 = path__default["default"].dirname(__filename$2);
 async function generateValueAccessors(compilerCtx, components, outputTarget, config) {
     if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
         return;
@@ -400,16 +410,19 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
             allElementSelectors = allAccessors[type].elementSelectors;
             allEventTargets = allAccessors[type].eventTargets;
         }
-        return Object.assign(Object.assign({}, allAccessors), { [type]: {
+        return {
+            ...allAccessors,
+            [type]: {
                 elementSelectors: allElementSelectors.concat(elementSelectors),
                 eventTargets: allEventTargets.concat([[va.event, va.targetAttr]]),
-            } });
+            },
+        };
     }, {});
     await Promise.all(Object.keys(normalizedValueAccessors).map(async (type) => {
         const valueAccessorType = type; // Object.keys converts to string
         const targetFileName = `${type}-value-accessor.ts`;
         const targetFilePath = path__default["default"].join(targetDir, targetFileName);
-        const srcFilePath = path__default["default"].join(__dirname, '../resources/control-value-accessors/', targetFileName);
+        const srcFilePath = path__default["default"].join(__dirname$2, '../resources/control-value-accessors/', targetFileName);
         const srcFileContents = await compilerCtx.fs.readFile(srcFilePath);
         const finalText = createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType], outputTarget.outputType);
         await compilerCtx.fs.writeFile(targetFilePath, finalText);
@@ -429,7 +442,7 @@ function copyResources$1(config, resourcesFilesToCopy, directory) {
     }
     const copyTasks = resourcesFilesToCopy.map((rf) => {
         return {
-            src: path__default["default"].join(__dirname, '../resources/control-value-accessors/', rf),
+            src: path__default["default"].join(__dirname$2, '../resources/control-value-accessors/', rf),
             dest: path__default["default"].join(directory, rf),
             keepDirStructure: false,
             warn: false,
@@ -767,6 +780,8 @@ stencilSetTagTransformer(\${transformerArg});
     await compilerCtx.fs.writeFile(path__default["default"].join(scriptsDirectory, 'patch-transform-selectors.mjs'), patchSelectorsContent);
 }
 
+const __filename$1 = url.fileURLToPath((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT' && document.currentScript.src || new URL('index.cjs', document.baseURI).href)));
+const __dirname$1 = path__default["default"].dirname(__filename$1);
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -783,7 +798,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
         const proxiesDir = path__default["default"].dirname(outputTarget.directivesProxyFile);
         for (const component of filteredComponents) {
             const componentFile = path__default["default"].join(proxiesDir, `${component.tagName}.ts`);
-            const componentText = generateComponentProxy(component, pkgData, outputTarget, rootDir);
+            const componentText = generateComponentProxy(component, pkgData, outputTarget, rootDir, config);
             tasks.push(compilerCtx.fs.writeFile(componentFile, componentText));
         }
         // Generate barrel file that re-exports all components
@@ -794,7 +809,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
     }
     else {
         // Generate single file with all components (original behavior)
-        const finalText = generateProxies(filteredComponents, pkgData, outputTarget, rootDir);
+        const finalText = generateProxies(filteredComponents, pkgData, outputTarget, rootDir, config);
         tasks.push(compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText));
         tasks.push(generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget));
     }
@@ -831,7 +846,7 @@ async function copyResources(config, outputTarget) {
     if (!config.sys || !config.sys.copy || !config.sys.glob) {
         throw new Error('stencil is not properly initialized at this step. Notify the developer');
     }
-    const srcDirectory = path__default["default"].join(__dirname, '..', 'angular-component-lib');
+    const srcDirectory = path__default["default"].join(__dirname$1, '..', 'angular-component-lib');
     const destDirectory = path__default["default"].join(path__default["default"].dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
     return config.sys.copy([
         {
@@ -843,7 +858,7 @@ async function copyResources(config, outputTarget) {
         },
     ], srcDirectory);
 }
-function generateProxies(components, pkgData, outputTarget, rootDir) {
+function generateProxies(components, pkgData, outputTarget, rootDir, config) {
     const distTypesDir = path__default["default"].dirname(pkgData.types);
     const dtsFilePath = path__default["default"].join(rootDir, distTypesDir, GENERATED_DTS);
     const { outputType } = outputTarget;
@@ -879,10 +894,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
      * otherwise we risk bundlers pulling in lazy loaded imports.
      */
     const generateTypeImports = () => {
-        let importLocation = outputTarget.componentCorePackage
-            ? normalizePath(outputTarget.componentCorePackage)
+        const importLocation = outputTarget.componentCorePackage
+            ? getPathToComponentTypes(config, outputTarget)
             : normalizePath(componentsTypeFile);
-        importLocation += isCustomElementsBuild ? `/${outputTarget.customElementsDir}` : '';
         return `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
     const typeImports = generateTypeImports();
@@ -903,13 +917,10 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
     // 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 mapInputProp = (prop) => ({
+        name: prop.name,
+        required: prop.required ?? false,
+    });
     const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
@@ -948,8 +959,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
 /**
  * Generate a single component proxy file for ES modules output
  */
-function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir) {
-    var _a;
+function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir, config) {
     const { outputType, componentCorePackage, customElementsDir } = outputTarget;
     const distTypesDir = path__default["default"].dirname(pkgData.types);
     const dtsFilePath = path__default["default"].join(rootDir, distTypesDir, GENERATED_DTS);
@@ -958,7 +968,7 @@ function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir) {
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
     const isStandaloneBuild = outputType === OutputTypes.Standalone;
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const hasOutputs = (_a = cmpMeta.events) === null || _a === void 0 ? void 0 : _a.some((event) => !event.internal);
+    const hasOutputs = cmpMeta.events?.some((event) => !event.internal);
     // Angular core imports for this component
     const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef', 'NgZone'];
     if (hasOutputs) {
@@ -973,8 +983,9 @@ ${createImportStatement(angularCoreImports, '@angular/core')}
 
 ${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
     // Type imports
-    let importLocation = componentCorePackage ? normalizePath(componentCorePackage) : normalizePath(componentsTypeFile);
-    importLocation += isCustomElementsBuild ? `/${customElementsDir}` : '';
+    const importLocation = componentCorePackage
+        ? getPathToComponentTypes(config, outputTarget)
+        : normalizePath(componentsTypeFile);
     const typeImports = `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     // defineCustomElement import
     let sourceImport = '';
@@ -983,13 +994,10 @@ ${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
     }
     // Generate component definition
     const filterInternalProps = (prop) => !prop.internal;
-    const mapInputProp = (prop) => {
-        var _a;
-        return ({
-            name: prop.name,
-            required: (_a = prop.required) !== null && _a !== void 0 ? _a : false,
-        });
-    };
+    const mapInputProp = (prop) => ({
+        name: prop.name,
+        required: prop.required ?? false,
+    });
     const internalProps = [];
     if (cmpMeta.properties) {
         internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
@@ -1035,6 +1043,22 @@ function generateBarrelFile(components, outputTarget) {
         .join('\n');
     return header + exports + '\n';
 }
+function getPathToComponentTypes(config, outputTarget) {
+    const basePkg = outputTarget.componentCorePackage || '';
+    // in v5, all types (including components.d.ts) are generated in the dist/types directory
+    const typesTarget = config.outputTargets?.find((o) => o.type === 'types');
+    if (typesTarget) {
+        const rawDir = typesTarget.dir || 'dist/types';
+        const relDir = config.rootDir && path__default["default"].isAbsolute(rawDir) ? path__default["default"].relative(config.rootDir, rawDir) : rawDir;
+        return normalizePath(path__default["default"].join(basePkg, relDir, 'components'));
+    }
+    // v4: append customElementsDir for custom elements build, otherwise package root
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputTarget.outputType);
+    if (isCustomElementsBuild && outputTarget.customElementsDir) {
+        return normalizePath(path__default["default"].join(basePkg, outputTarget.customElementsDir));
+    }
+    return normalizePath(basePkg);
+}
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';
 
@@ -1054,8 +1078,13 @@ const angularOutputTarget = (outputTarget) => {
     };
 };
 function normalizeOutputTarget(config, outputTarget) {
-    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 });
+    const results = {
+        ...outputTarget,
+        excludeComponents: outputTarget.excludeComponents || [],
+        valueAccessorConfigs: outputTarget.valueAccessorConfigs || [],
+        customElementsDir: outputTarget.customElementsDir ?? 'components',
+        outputType: outputTarget.outputType ?? 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

@@ -1,4 +1,5 @@
 import path from 'path';
+import { fileURLToPath } from 'url';
 import { EOL } from 'os';
 
 const OutputTypes = {
@@ -61,11 +62,10 @@ function relativeImport(pathFrom, pathTo, ext) {
     return normalizePath(`${relativePath}/${path.basename(pathTo, ext)}`);
 }
 async function readPackageJson(config, rootDir) {
-    var _a;
     const pkgJsonPath = path.join(rootDir, 'package.json');
     let pkgJson;
     try {
-        pkgJson = (await ((_a = config.sys) === null || _a === void 0 ? void 0 : _a.readFile(pkgJsonPath, 'utf8')));
+        pkgJson = (await config.sys?.readFile(pkgJsonPath, 'utf8'));
     }
     catch (e) {
         throw new Error(`Missing "package.json" file for distribution: ${pkgJsonPath}`);
@@ -119,6 +119,14 @@ const createComponentEventTypeImports = (componentTagName, events, options) => {
     const namedImports = new Set();
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
     const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
+    /**
+     * Each component's events are typed with the per-component CustomEvent type
+     * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a
+     * narrowed `target`. Import it once per component that emits public events.
+     */
+    if (events.length > 0) {
+        imports.push(`import type { ${componentTagName}CustomEvent } from '${importPathName}';`);
+    }
     events.forEach((event) => {
         Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
             if (refObject.location === 'local' || refObject.location === 'import') {
@@ -228,7 +236,7 @@ const createAngularComponentDefinition = (tagName, inputs, methods, includeImpor
         .filter((event) => !event.internal)
         .map((event) => {
         const camelCaseOutput = event.name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-        const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
+        const outputType = `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
         return `@Output() ${camelCaseOutput} = new ${outputType}();`;
     });
     const propertiesDeclarationText = [
@@ -302,8 +310,8 @@ const formatOutputType = (componentClassName, event) => {
             .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (_, p1, p2) => {
             /**
              * Replaces a complex type reference within a generic type.
-             * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
-             * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
+             * For example, remapping a type like `EventEmitter<MyComponentCustomEvent<MyEvent<T>>>` to
+             * `EventEmitter<MyComponentCustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
              */
             return [p1, prefixedTypeName, p2].join('');
         })
@@ -347,7 +355,7 @@ const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, comp
         customElementsDir,
         outputType,
     });
-    const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
+    const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
     const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
         `${interfaceDeclaration}${eventTypes.length === 0
@@ -378,6 +386,8 @@ export const DIRECTIVES = [
     return compilerCtx.fs.writeFile(outputTarget.directivesArrayFile, c);
 }
 
+const __filename$1 = fileURLToPath(import.meta.url);
+const __dirname$1 = path.dirname(__filename$1);
 async function generateValueAccessors(compilerCtx, components, outputTarget, config) {
     if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
         return;
@@ -392,16 +402,19 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
             allElementSelectors = allAccessors[type].elementSelectors;
             allEventTargets = allAccessors[type].eventTargets;
         }
-        return Object.assign(Object.assign({}, allAccessors), { [type]: {
+        return {
+            ...allAccessors,
+            [type]: {
                 elementSelectors: allElementSelectors.concat(elementSelectors),
                 eventTargets: allEventTargets.concat([[va.event, va.targetAttr]]),
-            } });
+            },
+        };
     }, {});
     await Promise.all(Object.keys(normalizedValueAccessors).map(async (type) => {
         const valueAccessorType = type; // Object.keys converts to string
         const targetFileName = `${type}-value-accessor.ts`;
         const targetFilePath = path.join(targetDir, targetFileName);
-        const srcFilePath = path.join(__dirname, '../resources/control-value-accessors/', targetFileName);
+        const srcFilePath = path.join(__dirname$1, '../resources/control-value-accessors/', targetFileName);
         const srcFileContents = await compilerCtx.fs.readFile(srcFilePath);
         const finalText = createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType], outputTarget.outputType);
         await compilerCtx.fs.writeFile(targetFilePath, finalText);
@@ -421,7 +434,7 @@ function copyResources$1(config, resourcesFilesToCopy, directory) {
     }
     const copyTasks = resourcesFilesToCopy.map((rf) => {
         return {
-            src: path.join(__dirname, '../resources/control-value-accessors/', rf),
+            src: path.join(__dirname$1, '../resources/control-value-accessors/', rf),
             dest: path.join(directory, rf),
             keepDirStructure: false,
             warn: false,
@@ -759,6 +772,8 @@ stencilSetTagTransformer(\${transformerArg});
     await compilerCtx.fs.writeFile(path.join(scriptsDirectory, 'patch-transform-selectors.mjs'), patchSelectorsContent);
 }
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -775,7 +790,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
         const proxiesDir = path.dirname(outputTarget.directivesProxyFile);
         for (const component of filteredComponents) {
             const componentFile = path.join(proxiesDir, `${component.tagName}.ts`);
-            const componentText = generateComponentProxy(component, pkgData, outputTarget, rootDir);
+            const componentText = generateComponentProxy(component, pkgData, outputTarget, rootDir, config);
             tasks.push(compilerCtx.fs.writeFile(componentFile, componentText));
         }
         // Generate barrel file that re-exports all components
@@ -786,7 +801,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
     }
     else {
         // Generate single file with all components (original behavior)
-        const finalText = generateProxies(filteredComponents, pkgData, outputTarget, rootDir);
+        const finalText = generateProxies(filteredComponents, pkgData, outputTarget, rootDir, config);
         tasks.push(compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText));
         tasks.push(generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget));
     }
@@ -835,7 +850,7 @@ async function copyResources(config, outputTarget) {
         },
     ], srcDirectory);
 }
-function generateProxies(components, pkgData, outputTarget, rootDir) {
+function generateProxies(components, pkgData, outputTarget, rootDir, config) {
     const distTypesDir = path.dirname(pkgData.types);
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
     const { outputType } = outputTarget;
@@ -871,10 +886,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
      * otherwise we risk bundlers pulling in lazy loaded imports.
      */
     const generateTypeImports = () => {
-        let importLocation = outputTarget.componentCorePackage
-            ? normalizePath(outputTarget.componentCorePackage)
+        const importLocation = outputTarget.componentCorePackage
+            ? getPathToComponentTypes(config, outputTarget)
             : normalizePath(componentsTypeFile);
-        importLocation += isCustomElementsBuild ? `/${outputTarget.customElementsDir}` : '';
         return `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
     const typeImports = generateTypeImports();
@@ -895,13 +909,10 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
     // 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 mapInputProp = (prop) => ({
+        name: prop.name,
+        required: prop.required ?? false,
+    });
     const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
@@ -940,8 +951,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
 /**
  * Generate a single component proxy file for ES modules output
  */
-function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir) {
-    var _a;
+function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir, config) {
     const { outputType, componentCorePackage, customElementsDir } = outputTarget;
     const distTypesDir = path.dirname(pkgData.types);
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
@@ -950,7 +960,7 @@ function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir) {
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
     const isStandaloneBuild = outputType === OutputTypes.Standalone;
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const hasOutputs = (_a = cmpMeta.events) === null || _a === void 0 ? void 0 : _a.some((event) => !event.internal);
+    const hasOutputs = cmpMeta.events?.some((event) => !event.internal);
     // Angular core imports for this component
     const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef', 'NgZone'];
     if (hasOutputs) {
@@ -965,8 +975,9 @@ ${createImportStatement(angularCoreImports, '@angular/core')}
 
 ${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
     // Type imports
-    let importLocation = componentCorePackage ? normalizePath(componentCorePackage) : normalizePath(componentsTypeFile);
-    importLocation += isCustomElementsBuild ? `/${customElementsDir}` : '';
+    const importLocation = componentCorePackage
+        ? getPathToComponentTypes(config, outputTarget)
+        : normalizePath(componentsTypeFile);
     const typeImports = `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     // defineCustomElement import
     let sourceImport = '';
@@ -975,13 +986,10 @@ ${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
     }
     // Generate component definition
     const filterInternalProps = (prop) => !prop.internal;
-    const mapInputProp = (prop) => {
-        var _a;
-        return ({
-            name: prop.name,
-            required: (_a = prop.required) !== null && _a !== void 0 ? _a : false,
-        });
-    };
+    const mapInputProp = (prop) => ({
+        name: prop.name,
+        required: prop.required ?? false,
+    });
     const internalProps = [];
     if (cmpMeta.properties) {
         internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
@@ -1027,6 +1035,22 @@ function generateBarrelFile(components, outputTarget) {
         .join('\n');
     return header + exports + '\n';
 }
+function getPathToComponentTypes(config, outputTarget) {
+    const basePkg = outputTarget.componentCorePackage || '';
+    // in v5, all types (including components.d.ts) are generated in the dist/types directory
+    const typesTarget = config.outputTargets?.find((o) => o.type === 'types');
+    if (typesTarget) {
+        const rawDir = typesTarget.dir || 'dist/types';
+        const relDir = config.rootDir && path.isAbsolute(rawDir) ? path.relative(config.rootDir, rawDir) : rawDir;
+        return normalizePath(path.join(basePkg, relDir, 'components'));
+    }
+    // v4: append customElementsDir for custom elements build, otherwise package root
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputTarget.outputType);
+    if (isCustomElementsBuild && outputTarget.customElementsDir) {
+        return normalizePath(path.join(basePkg, outputTarget.customElementsDir));
+    }
+    return normalizePath(basePkg);
+}
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';
 
@@ -1046,8 +1070,13 @@ const angularOutputTarget = (outputTarget) => {
     };
 };
 function normalizeOutputTarget(config, outputTarget) {
-    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 });
+    const results = {
+        ...outputTarget,
+        excludeComponents: outputTarget.excludeComponents || [],
+        valueAccessorConfigs: outputTarget.valueAccessorConfigs || [],
+        customElementsDir: outputTarget.customElementsDir ?? 'components',
+        outputType: outputTarget.outputType ?? 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.d.ts

@@ -1,12 +1,13 @@
 import type { CompilerCtx, ComponentCompilerMeta, Config } from '@stencil/core/internal';
 import type { OutputTargetAngular, PackageJSON } from './types';
 export declare function angularDirectiveProxyOutput(compilerCtx: CompilerCtx, outputTarget: OutputTargetAngular, components: ComponentCompilerMeta[], config: Config): Promise<void>;
-export declare function generateProxies(components: ComponentCompilerMeta[], pkgData: PackageJSON, outputTarget: OutputTargetAngular, rootDir: string): string;
+export declare function generateProxies(components: ComponentCompilerMeta[], pkgData: PackageJSON, outputTarget: OutputTargetAngular, rootDir: string, config: Config): string;
 /**
  * Generate a single component proxy file for ES modules output
  */
-export declare function generateComponentProxy(cmpMeta: ComponentCompilerMeta, pkgData: PackageJSON, outputTarget: OutputTargetAngular, rootDir: string): string;
+export declare function generateComponentProxy(cmpMeta: ComponentCompilerMeta, pkgData: PackageJSON, outputTarget: OutputTargetAngular, rootDir: string, config: Config): string;
 /**
  * Generate a barrel file that re-exports all components
  */
 export declare function generateBarrelFile(components: ComponentCompilerMeta[], outputTarget: OutputTargetAngular): string;
+export declare function getPathToComponentTypes(config: Config, outputTarget: OutputTargetAngular): string;

package/dist/output-angular.js

@@ -1,4 +1,7 @@
 import path from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 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';
@@ -21,7 +24,7 @@ export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, com
         const proxiesDir = path.dirname(outputTarget.directivesProxyFile);
         for (const component of filteredComponents) {
             const componentFile = path.join(proxiesDir, `${component.tagName}.ts`);
-            const componentText = generateComponentProxy(component, pkgData, outputTarget, rootDir);
+            const componentText = generateComponentProxy(component, pkgData, outputTarget, rootDir, config);
             tasks.push(compilerCtx.fs.writeFile(componentFile, componentText));
         }
         // Generate barrel file that re-exports all components
@@ -32,7 +35,7 @@ export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, com
     }
     else {
         // Generate single file with all components (original behavior)
-        const finalText = generateProxies(filteredComponents, pkgData, outputTarget, rootDir);
+        const finalText = generateProxies(filteredComponents, pkgData, outputTarget, rootDir, config);
         tasks.push(compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText));
         tasks.push(generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget));
     }
@@ -81,7 +84,7 @@ async function copyResources(config, outputTarget) {
         },
     ], srcDirectory);
 }
-export function generateProxies(components, pkgData, outputTarget, rootDir) {
+export function generateProxies(components, pkgData, outputTarget, rootDir, config) {
     const distTypesDir = path.dirname(pkgData.types);
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
     const { outputType } = outputTarget;
@@ -117,10 +120,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
      * otherwise we risk bundlers pulling in lazy loaded imports.
      */
     const generateTypeImports = () => {
-        let importLocation = outputTarget.componentCorePackage
-            ? normalizePath(outputTarget.componentCorePackage)
+        const importLocation = outputTarget.componentCorePackage
+            ? getPathToComponentTypes(config, outputTarget)
             : normalizePath(componentsTypeFile);
-        importLocation += isCustomElementsBuild ? `/${outputTarget.customElementsDir}` : '';
         return `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
     const typeImports = generateTypeImports();
@@ -141,13 +143,10 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
     // 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 mapInputProp = (prop) => ({
+        name: prop.name,
+        required: prop.required ?? false,
+    });
     const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
@@ -186,8 +185,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
 /**
  * Generate a single component proxy file for ES modules output
  */
-export function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir) {
-    var _a;
+export function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir, config) {
     const { outputType, componentCorePackage, customElementsDir } = outputTarget;
     const distTypesDir = path.dirname(pkgData.types);
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
@@ -196,7 +194,7 @@ export function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir)
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
     const isStandaloneBuild = outputType === OutputTypes.Standalone;
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const hasOutputs = (_a = cmpMeta.events) === null || _a === void 0 ? void 0 : _a.some((event) => !event.internal);
+    const hasOutputs = cmpMeta.events?.some((event) => !event.internal);
     // Angular core imports for this component
     const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef', 'NgZone'];
     if (hasOutputs) {
@@ -211,8 +209,9 @@ ${createImportStatement(angularCoreImports, '@angular/core')}
 
 ${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
     // Type imports
-    let importLocation = componentCorePackage ? normalizePath(componentCorePackage) : normalizePath(componentsTypeFile);
-    importLocation += isCustomElementsBuild ? `/${customElementsDir}` : '';
+    const importLocation = componentCorePackage
+        ? getPathToComponentTypes(config, outputTarget)
+        : normalizePath(componentsTypeFile);
     const typeImports = `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     // defineCustomElement import
     let sourceImport = '';
@@ -221,13 +220,10 @@ ${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
     }
     // Generate component definition
     const filterInternalProps = (prop) => !prop.internal;
-    const mapInputProp = (prop) => {
-        var _a;
-        return ({
-            name: prop.name,
-            required: (_a = prop.required) !== null && _a !== void 0 ? _a : false,
-        });
-    };
+    const mapInputProp = (prop) => ({
+        name: prop.name,
+        required: prop.required ?? false,
+    });
     const internalProps = [];
     if (cmpMeta.properties) {
         internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
@@ -273,5 +269,21 @@ export function generateBarrelFile(components, outputTarget) {
         .join('\n');
     return header + exports + '\n';
 }
+export function getPathToComponentTypes(config, outputTarget) {
+    const basePkg = outputTarget.componentCorePackage || '';
+    // in v5, all types (including components.d.ts) are generated in the dist/types directory
+    const typesTarget = config.outputTargets?.find((o) => o.type === 'types');
+    if (typesTarget) {
+        const rawDir = typesTarget.dir || 'dist/types';
+        const relDir = config.rootDir && path.isAbsolute(rawDir) ? path.relative(config.rootDir, rawDir) : rawDir;
+        return normalizePath(path.join(basePkg, relDir, 'components'));
+    }
+    // v4: append customElementsDir for custom elements build, otherwise package root
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputTarget.outputType);
+    if (isCustomElementsBuild && outputTarget.customElementsDir) {
+        return normalizePath(path.join(basePkg, outputTarget.customElementsDir));
+    }
+    return normalizePath(basePkg);
+}
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';

package/dist/plugin.js

@@ -17,8 +17,13 @@ export const angularOutputTarget = (outputTarget) => {
     };
 };
 export function normalizeOutputTarget(config, outputTarget) {
-    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 });
+    const results = {
+        ...outputTarget,
+        excludeComponents: outputTarget.excludeComponents || [],
+        valueAccessorConfigs: outputTarget.valueAccessorConfigs || [],
+        customElementsDir: outputTarget.customElementsDir ?? 'components',
+        outputType: outputTarget.outputType ?? OutputTypes.Standalone,
+    };
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }

package/dist/utils.js

@@ -62,11 +62,10 @@ export function isRelativePath(path) {
     return path && path.startsWith('.');
 }
 export async function readPackageJson(config, rootDir) {
-    var _a;
     const pkgJsonPath = path.join(rootDir, 'package.json');
     let pkgJson;
     try {
-        pkgJson = (await ((_a = config.sys) === null || _a === void 0 ? void 0 : _a.readFile(pkgJsonPath, 'utf8')));
+        pkgJson = (await config.sys?.readFile(pkgJsonPath, 'utf8'));
     }
     catch (e) {
         throw new Error(`Missing "package.json" file for distribution: ${pkgJsonPath}`);
@@ -120,6 +119,14 @@ export const createComponentEventTypeImports = (componentTagName, events, option
     const namedImports = new Set();
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
     const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
+    /**
+     * Each component's events are typed with the per-component CustomEvent type
+     * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a
+     * narrowed `target`. Import it once per component that emits public events.
+     */
+    if (events.length > 0) {
+        imports.push(`import type { ${componentTagName}CustomEvent } from '${importPathName}';`);
+    }
     events.forEach((event) => {
         Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
             if (refObject.location === 'local' || refObject.location === 'import') {

package/dist/wizard.d.ts

@@ -0,0 +1,9 @@
+import type { WizardContext } from '@stencil/cli';
+export declare const wizard: {
+    init: {
+        id: string;
+        displayName: string;
+        description: string;
+        run({ config, workspaceRoot, prompts, nypm }: WizardContext): Promise<void>;
+    };
+};

package/dist/wizard.js

@@ -0,0 +1,334 @@
+import { Project, SyntaxKind } from 'ts-morph';
+import { access, mkdir, readFile, writeFile } from 'node:fs/promises';
+import { join, relative, dirname } from 'node:path';
+// ---------------------------------------------------------------------------
+// ts-morph helpers
+// ---------------------------------------------------------------------------
+function amendStencilConfig(configPath, targetCode) {
+    const project = new Project({ skipAddingFilesFromTsConfig: true });
+    const src = project.addSourceFileAtPath(configPath);
+    if (!src.getImportDeclaration('@stencil/angular-output-target')) {
+        src.addImportDeclaration({
+            moduleSpecifier: '@stencil/angular-output-target',
+            namedImports: ['angularOutputTarget'],
+        });
+    }
+    const existingProp = src
+        .getDescendantsOfKind(SyntaxKind.PropertyAssignment)
+        .find((p) => p.getName() === 'outputTargets');
+    if (!existingProp) {
+        const configObj = src.getVariableDeclaration('config')?.getInitializerIfKind(SyntaxKind.ObjectLiteralExpression) ??
+            src
+                .getDescendantsOfKind(SyntaxKind.ObjectLiteralExpression)
+                .find((obj) => obj.getProperty('namespace') !== undefined);
+        if (!configObj)
+            throw new Error('Could not find Stencil config object in stencil.config.ts');
+        configObj.addPropertyAssignment({ name: 'outputTargets', initializer: '[]' });
+    }
+    const prop = src.getDescendantsOfKind(SyntaxKind.PropertyAssignment).find((p) => p.getName() === 'outputTargets');
+    const arr = prop.getInitializerIfKind(SyntaxKind.ArrayLiteralExpression);
+    if (!arr)
+        throw new Error('outputTargets is not an array literal in stencil.config.ts');
+    const existing = arr.getText();
+    const alreadyAdded = existing.includes('angularOutputTarget(');
+    // Filter out any existing angularOutputTarget call so it can be replaced cleanly
+    const elements = arr
+        .getElements()
+        .map((e) => e.getText().trim())
+        .filter((e) => !e.includes('angularOutputTarget('));
+    const hasStandalone = existing.includes("type: 'standalone'") ||
+        existing.includes('type: "standalone"') ||
+        existing.includes("type: 'dist-custom-elements'") ||
+        existing.includes('type: "dist-custom-elements"');
+    if (!hasStandalone)
+        elements.push("{ type: 'standalone' }");
+    elements.push(targetCode);
+    prop.setInitializer(`[\n${elements.map((e) => `  ${e}`).join(',\n')},\n]`);
+    src.formatText();
+    src.saveSync();
+    return !alreadyAdded;
+}
+// ---------------------------------------------------------------------------
+// pnpm build approval
+// ---------------------------------------------------------------------------
+async function allowPnpmBuild(pkg, rootDir, workspaceRoot) {
+    const base = workspaceRoot ?? rootDir;
+    const workspaceYaml = join(base, 'pnpm-workspace.yaml');
+    if (await pathExists(workspaceYaml)) {
+        let content = await readFile(workspaceYaml, 'utf8');
+        // onlyBuiltDependencies (list form)
+        if (!content.includes(`- '${pkg}'`) && !content.includes(`- "${pkg}"`) && !content.includes(`- ${pkg}\n`)) {
+            if (content.includes('onlyBuiltDependencies:')) {
+                content = content.replace(/^(onlyBuiltDependencies:[ \t]*\n)/m, `$1  - ${pkg}\n`);
+            }
+            else {
+                content += `\nonlyBuiltDependencies:\n  - ${pkg}\n`;
+            }
+        }
+        // allowBuilds (map form, pnpm 11+)
+        if (!content.includes(`${pkg}: true`)) {
+            if (content.includes('allowBuilds:')) {
+                content = content.replace(/^(allowBuilds:[ \t]*\n)/m, `$1  ${pkg}: true\n`);
+            }
+            else {
+                content += `\nallowBuilds:\n  ${pkg}: true\n`;
+            }
+        }
+        await writeFile(workspaceYaml, content, 'utf8');
+        return;
+    }
+    // Non-workspace: amend root package.json pnpm field
+    const rootPkgPath = join(base, 'package.json');
+    try {
+        const rootPkg = JSON.parse(await readFile(rootPkgPath, 'utf8'));
+        const existingList = rootPkg?.pnpm?.onlyBuiltDependencies ?? [];
+        const existingMap = rootPkg?.pnpm?.allowBuilds ?? {};
+        rootPkg.pnpm = {
+            ...rootPkg.pnpm,
+            onlyBuiltDependencies: existingList.includes(pkg) ? existingList : [...existingList, pkg],
+            allowBuilds: { ...existingMap, [pkg]: true },
+        };
+        await writeFile(rootPkgPath, JSON.stringify(rootPkg, null, 2) + '\n', 'utf8');
+    }
+    catch {
+        // no root package.json — nothing to amend
+    }
+}
+// ---------------------------------------------------------------------------
+// Wrapper package scaffolding
+// ---------------------------------------------------------------------------
+async function pathExists(p) {
+    try {
+        await access(p);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+function toPascalCase(s) {
+    return s
+        .split(/[-_]/)
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
+async function scaffoldWrapperPackage(wrapperDir, packageName, corePackageName, corePkgVersion, namespace, outputType) {
+    const libDir = join(wrapperDir, 'src', 'lib');
+    await mkdir(libDir, { recursive: true });
+    const className = toPascalCase(namespace);
+    const pkgJson = {
+        name: packageName,
+        version: '0.0.1',
+        scripts: { build: 'ng-packagr -p ng-package.json' },
+        peerDependencies: {
+            '@angular/common': '>=19',
+            '@angular/core': '>=19',
+        },
+        dependencies: { [corePackageName]: corePkgVersion },
+        devDependencies: {
+            '@angular/common': '>=19',
+            '@angular/core': '>=19',
+            '@angular/compiler': '>=19',
+            '@angular/compiler-cli': '>=19',
+            'ng-packagr': '>=19',
+            rxjs: '>=6',
+            tslib: '>=2',
+            typescript: '>=4 <7',
+        },
+    };
+    const ngPackage = {
+        lib: { entryFile: 'src/index.ts' },
+        deleteDestPath: false,
+        allowedNonPeerDependencies: [corePackageName],
+    };
+    const tsConfig = {
+        compilerOptions: {
+            target: 'ES2022',
+            module: 'ES2022',
+            moduleResolution: 'bundler',
+            experimentalDecorators: true,
+            strict: true,
+            skipLibCheck: true,
+        },
+        include: ['src/**/*.ts'],
+    };
+    const tsConfigLib = {
+        extends: './tsconfig.json',
+        compilerOptions: { declaration: false, inlineSources: true },
+        angularCompilerOptions: { compilationMode: 'partial' },
+    };
+    // NgModule file — only needed for 'component' outputType
+    let ngModuleTs;
+    if (outputType === 'component') {
+        ngModuleTs =
+            `import { NgModule } from '@angular/core';\n` +
+                `import { DIRECTIVES } from './directives.array';\n\n` +
+                `@NgModule({\n` +
+                `  declarations: [...DIRECTIVES],\n` +
+                `  exports: [...DIRECTIVES],\n` +
+                `})\n` +
+                `export class ${className}Module {}\n`;
+    }
+    // src/index.ts — public API surface
+    // directives.ts (the directivesProxyFile) sits at src/lib/directives.ts
+    let indexTs = `// Public API — re-exports generated by @stencil/angular-output-target.\n`;
+    indexTs += `export * from './lib/directives';\n`;
+    if (outputType === 'component') {
+        indexTs += `export * from './lib/${namespace}.module';\n`;
+    }
+    await Promise.all([
+        writeFile(join(wrapperDir, '.gitignore'), 'dist/\nnode_modules/\n.angular/\n', 'utf8'),
+        writeFile(join(wrapperDir, 'package.json'), JSON.stringify(pkgJson, null, 2) + '\n', 'utf8'),
+        writeFile(join(wrapperDir, 'ng-package.json'), JSON.stringify(ngPackage, null, 2) + '\n', 'utf8'),
+        writeFile(join(wrapperDir, 'tsconfig.json'), JSON.stringify(tsConfig, null, 2) + '\n', 'utf8'),
+        writeFile(join(wrapperDir, 'tsconfig.lib.json'), JSON.stringify(tsConfigLib, null, 2) + '\n', 'utf8'),
+        writeFile(join(wrapperDir, 'src', 'index.ts'), indexTs, 'utf8'),
+        ...(ngModuleTs ? [writeFile(join(libDir, `${namespace}.module.ts`), ngModuleTs, 'utf8')] : []),
+    ]);
+}
+// ---------------------------------------------------------------------------
+// Wizard
+// ---------------------------------------------------------------------------
+export const wizard = {
+    init: {
+        id: '@stencil/angular-output-target',
+        displayName: 'Angular',
+        description: 'Angular component wrappers for your Stencil components',
+        async run({ config, workspaceRoot, prompts, nypm }) {
+            const { intro, outro, text, select, confirm, spinner, isCancel, cancel, log } = prompts;
+            intro('Angular output target');
+            const stencilConfigPath = join(config.rootDir, 'stencil.config.ts');
+            // Guard: already configured?
+            const guardProject = new Project({ skipAddingFilesFromTsConfig: true });
+            const alreadyConfigured = guardProject
+                .addSourceFileAtPath(stencilConfigPath)
+                .getDescendantsOfKind(SyntaxKind.PropertyAssignment)
+                .find((p) => p.getName() === 'outputTargets')
+                ?.getInitializerIfKind(SyntaxKind.ArrayLiteralExpression)
+                ?.getText()
+                .includes('angularOutputTarget(');
+            if (alreadyConfigured) {
+                const redo = await confirm({
+                    message: 'angularOutputTarget is already in stencil.config.ts — reconfigure?',
+                    initialValue: false,
+                });
+                if (isCancel(redo) || !redo) {
+                    cancel('Skipping Angular setup.');
+                    return;
+                }
+            }
+            // Where should the wrapper package live?
+            let wrapperDir;
+            const defaultName = `${config.fsNamespace}-angular`;
+            if (workspaceRoot) {
+                const rawName = await text({
+                    message: 'Wrapper package name?',
+                    placeholder: defaultName,
+                    defaultValue: defaultName,
+                });
+                if (isCancel(rawName)) {
+                    cancel('Setup cancelled.');
+                    return;
+                }
+                wrapperDir = join(dirname(config.rootDir), rawName);
+            }
+            else {
+                const defaultRel = `../${config.fsNamespace}-angular`;
+                const rawDir = await text({
+                    message: 'Wrapper package directory? (relative to stencil.config.ts)',
+                    placeholder: defaultRel,
+                    defaultValue: defaultRel,
+                });
+                if (isCancel(rawDir)) {
+                    cancel('Setup cancelled.');
+                    return;
+                }
+                wrapperDir = join(config.rootDir, rawDir);
+            }
+            // Angular component type — drives what we scaffold
+            const outputType = await select({
+                message: 'Angular component type?',
+                options: [
+                    { value: 'standalone', label: 'Standalone', hint: 'Modern Angular (v19+) — no NgModule' },
+                    { value: 'component', label: 'NgModule', hint: 'Classic — all components in one module' },
+                    { value: 'scam', label: 'SCAM', hint: 'One NgModule per component' },
+                ],
+            });
+            if (isCancel(outputType)) {
+                cancel('Setup cancelled.');
+                return;
+            }
+            const selectedOutputType = outputType;
+            // Derive stencil.config-relative paths from the wrapper location
+            const directivesProxyFile = relative(config.rootDir, join(wrapperDir, 'src', 'lib', 'directives.ts')).replace(/\\/g, '/');
+            const directivesArrayFile = selectedOutputType === 'component'
+                ? relative(config.rootDir, join(wrapperDir, 'src', 'lib', 'directives.array.ts')).replace(/\\/g, '/')
+                : undefined;
+            const componentCorePackage = config.fsNamespace;
+            // Scaffold wrapper package if the directory doesn't exist yet
+            const shouldScaffold = !(await pathExists(wrapperDir));
+            if (shouldScaffold) {
+                const s = spinner();
+                s.start(`Scaffolding wrapper package at ${relative(workspaceRoot ?? config.rootDir, wrapperDir)}`);
+                try {
+                    const corePkgVersion = workspaceRoot ? 'workspace:*' : `file:${relative(wrapperDir, config.rootDir)}`;
+                    await scaffoldWrapperPackage(wrapperDir, `${config.fsNamespace}-angular`, componentCorePackage, corePkgVersion, config.fsNamespace, selectedOutputType);
+                    s.stop('Wrapper package scaffolded');
+                }
+                catch (e) {
+                    s.stop('Scaffolding failed — continuing');
+                    log.warn(`Could not scaffold wrapper package: ${e}`);
+                }
+            }
+            // Ensure esbuild (used by ng-packagr) is allowed to run install scripts in pnpm workspaces
+            try {
+                await allowPnpmBuild('esbuild', config.rootDir, workspaceRoot);
+            }
+            catch {
+                // non-fatal — user can run `pnpm approve-builds` manually
+            }
+            // Derive customElementsDir from an existing standalone target, or use the v5 default
+            const standaloneTarget = config.outputTargets?.find((o) => o.type === 'standalone');
+            const customElementsDir = standaloneTarget?.dir
+                ? relative(config.rootDir, standaloneTarget.dir).replace(/\\/g, '/')
+                : 'dist/standalone';
+            // Build target config
+            const lines = [
+                `componentCorePackage: '${componentCorePackage}'`,
+                `customElementsDir: '${customElementsDir}'`,
+                `directivesProxyFile: '${directivesProxyFile}'`,
+                ...(directivesArrayFile ? [`directivesArrayFile: '${directivesArrayFile}'`] : []),
+                ...(selectedOutputType !== 'standalone' ? [`outputType: '${selectedOutputType}'`] : []),
+            ];
+            const targetCode = `angularOutputTarget({\n  ${lines.join(',\n  ')},\n})`;
+            // Amend stencil.config.ts in one pass so formatText() sees the final array
+            try {
+                const added = amendStencilConfig(stencilConfigPath, targetCode);
+                log.success(added ? 'stencil.config.ts updated' : 'angularOutputTarget already present — no changes made');
+            }
+            catch (e) {
+                log.warn(`Could not automatically update stencil.config.ts (${e}). Add manually:\n\n` +
+                    `import { angularOutputTarget } from '@stencil/angular-output-target';\n` +
+                    `// in outputTargets:\n${targetCode}`);
+            }
+            // Install @stencil/angular-output-target as a devDep of the core package
+            log.info('Installing @stencil/angular-output-target...');
+            await nypm.addDependency(['@stencil/angular-output-target'], { cwd: config.rootDir, dev: true });
+            log.success('Installed @stencil/angular-output-target');
+            if (shouldScaffold && (await pathExists(wrapperDir))) {
+                log.info('Installing Angular dependencies in wrapper package...');
+                await nypm.addDependency([
+                    '@angular/core',
+                    '@angular/common',
+                    '@angular/compiler',
+                    '@angular/compiler-cli',
+                    'ng-packagr',
+                    'rxjs',
+                    'tslib',
+                ], { cwd: wrapperDir, dev: true });
+                log.success('Angular dependencies installed');
+            }
+            outro('Angular output target configured');
+        },
+    },
+};

package/package.json

@@ -1,14 +1,22 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Angular output target for @stencil/core components.",
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.cjs",
   "module": "dist/index.js",
+  "type": "module",
+  "stencil": {
+    "wizard": "./dist/wizard.js"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs.js"
+      "require": "./dist/index.cjs"
+    },
+    "./wizard": {
+      "types": "./dist/wizard.d.ts",
+      "import": "./dist/wizard.js"
     }
   },
   "types": "dist/index.d.ts",
@@ -47,7 +55,11 @@
   "bugs": {
     "url": "https://github.com/stenciljs/output-targets/issues"
   },
+  "dependencies": {
+    "ts-morph": "^28.0.0"
+  },
   "devDependencies": {
+    "@stencil/cli": "^5.0.0 || >=5.0.0-alpha.0 <5.0.0-next.0",
     "@angular/core": "8.2.14",
     "@angular/forms": "8.2.14",
     "@stencil/core": "4.41.0",
@@ -59,7 +71,7 @@
     "vitest": "^2.1.4"
   },
   "peerDependencies": {
-    "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
+    "@stencil/core": ">=2.0.0 || >=3 || >=4.0.0 || ^5.0.0 || >=5.0.0-alpha.0 <5.0.0-next.0"
   },
   "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0"
 }