@stencil/angular-output-target 1.4.1 → 1.5.1

package/README.md

@@ -57,3 +57,92 @@ export const config: Config = {
 | `outputType`           | Specifies the type of output to be generated. It can take one of the following values: <br />1. `component`: Generates all the component wrappers to be declared on an Angular module. This option is required for Stencil projects using the `dist` hydrated output.<br /> 2. `scam`: Generates a separate Angular module for each component.<br /> 3. `standalone`: Generates standalone component wrappers.<br /> Both `scam` and `standalone` options are compatible with the `dist-custom-elements` output. <br />Note: Please choose the appropriate `outputType` based on your project's requirements and the desired output structure. Defaults to `component`. |
 | `customElementsDir`    | This is the directory where the custom elements are imported from when using the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements). Defaults to the `components` directory. Only applies for `outputType: "scam"` or `outputType: "standalone"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | `inlineProperties` | Experimental. When true, tries to inline the properties of components. This is required to enable Angular Language Service to type-check and show jsdocs when using the components in html-templates.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `booleanAttributes`    | When `true`, boolean properties are declared with an Angular input transform so they can be set by attribute presence, e.g. `<my-component disabled>` instead of `<my-component [disabled]="true">`. Type-checking the attribute form also requires `inlineProperties`. Defaults to `false`. Refer to [Boolean attributes](#boolean-attributes).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+
+## Boolean attributes
+
+Angular resolves a bare attribute to the empty string, so a boolean property has to be bound
+explicitly by default:
+
+```html
+<!-- Type 'string' is not assignable to type 'boolean' under strictTemplates -->
+<my-component disabled></my-component>
+
+<my-component [disabled]="true"></my-component>
+```
+
+Setting `booleanAttributes: true` declares boolean properties with an Angular input transform,
+which accepts the attribute form and coerces it:
+
+```html
+<my-component disabled></my-component>
+<my-component disabled="false"></my-component>
+<my-component [disabled]="isDisabled"></my-component>
+```
+
+The transform used is `nullableBooleanAttribute` rather than Angular's `booleanAttribute`. It
+coerces strings identically, but passes `null` and `undefined` through instead of coercing them to
+`false`. Components frequently treat those as a state distinct from `false`:
+
+```tsx
+// `undefined` means "decide based on the mode", which is not the same as `false`
+const showDetail = detail !== undefined ? detail : mode === 'ios';
+
+// a strict comparison also behaves differently for `null` than it does for `false`
+const showHandle = handle !== false;
+```
+
+Both values reach inputs routinely, from the `async` pipe before its first emission and from form
+control values, so coercing them would change the behavior of bindings that work today.
+
+### Type-checking requires `inlineProperties`
+
+This option changes what the Angular compiler accepts, so it only has a visible effect where the
+compiler type-checks the wrapper's inputs in the first place. That needs `inlineProperties`
+enabled as well:
+
+```ts
+angularOutputTarget({
+  // ...
+  booleanAttributes: true,
+  inlineProperties: true,
+});
+```
+
+Without `inlineProperties` the generated wrappers declare no typed members for their inputs, so
+Angular does not check these bindings at all and there is no `TS2322` for the transform to
+resolve.
+
+The transform itself still runs either way. Angular applies it from the component definition's
+input map, which does not depend on a declared class member, so enabling `booleanAttributes` on
+its own moves boolean coercion from Stencil to the transform without the compiler checking what
+you pass. The two agree on strings, booleans, `null` and `undefined`. If you bind a value outside
+those, prefer enabling `inlineProperties` too so that `ngAcceptInputType_*` rejects it at compile
+time rather than silently coercing it.
+
+Note that `inlineProperties` is itself experimental, so enabling both is opting into that. With
+`booleanAttributes` on its own you still get the attribute syntax at runtime, just without the
+compiler checking it.
+
+### Limitations
+
+A property is only transformed when Stencil reports its type as exactly `boolean`. Three kinds of
+property fall outside that, and they behave differently from each other. In all three the property
+receives the attribute's empty string rather than `true`, so bind them explicitly when you need a
+boolean.
+
+**Virtual properties** are not transformed and get no inlined class member either, so Angular has
+nothing to check the binding against and skips it. A bare attribute compiles, and the property
+receives `''`. Nothing warns you.
+
+**Properties declared as `any`** are not transformed, but they do get an inlined member typed
+`any`, so `''` is assignable. A bare attribute compiles, and the property receives `''`. Nothing
+warns you here either.
+
+**Properties whose type unions `boolean` with something else**, such as `boolean | 'auto'`, are
+reported to the output target as `any`, so they get no transform, but their inlined member keeps
+the real union type. This is the only case the compiler catches:
+
+```
+TS2322: Type '""' is not assignable to type 'boolean | "auto"'
+```

package/angular-component-lib/boolean-attribute.ts

@@ -0,0 +1,43 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Transforms a value to a boolean so that boolean properties can be set by attribute presence,
+ * e.g. `<my-component disabled>` instead of `<my-component [disabled]="true">`.
+ *
+ * Strings are coerced the same way Angular's `booleanAttribute` coerces them, so `''` (a bare
+ * attribute) becomes `true` and `'false'` becomes `false`.
+ *
+ * Unlike Angular's `booleanAttribute`, `null` and `undefined` are passed through rather than
+ * coerced to `false`. Components frequently treat them as a state distinct from `false`:
+ *
+ * ```tsx
+ * // `undefined` means "decide based on the mode", which is not the same as `false`
+ * const showDetail = detail !== undefined ? detail : mode === 'ios';
+ *
+ * // a strict comparison also behaves differently for `null` than it does for `false`
+ * const showHandle = handle !== false;
+ * ```
+ *
+ * Both values reach inputs routinely in Angular templates, from the `async` pipe before its
+ * first emission and from form control values, so coercing them would change the behavior of
+ * bindings that work today.
+ *
+ * This is implemented here rather than imported from `@angular/core` so that consumers on
+ * Angular versions without `booleanAttribute` are unaffected by this file being generated.
+ *
+ * The parameter type is what Angular derives `ngAcceptInputType_*` from, so it decides which
+ * template bindings compile. Widening it to `unknown` would let any expression through.
+ *
+ * Declared as a function rather than an arrow constant because Angular has to resolve input
+ * transforms statically when compiling a library in partial compilation mode.
+ *
+ * This lives in its own file, separate from `utils.ts`, so that it carries no runtime imports.
+ * That keeps it independently type-checkable without pulling `rxjs` in for `proxyOutputs`.
+ */
+export function nullableBooleanAttribute(value: boolean | string | null | undefined): boolean | null | undefined {
+  if (value === null || value === undefined) {
+    return value;
+  }
+  return typeof value === 'boolean' ? value : value !== 'false';
+}

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

@@ -1,5 +1,10 @@
 import type { ComponentCompilerEvent, ComponentCompilerProperty } from '@stencil/core/internal';
 import type { ComponentInputProperty, OutputType } from './types';
+/**
+ * The transform function to reference in generated code, exported from
+ * `angular-component-lib/boolean-attribute`.
+ */
+export declare const INPUT_TRANSFORM_FUNCTION = "nullableBooleanAttribute";
 /**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
  *
@@ -20,6 +25,7 @@ export declare const createAngularComponentDefinition: (tagName: string, inputs:
  * @param events The events to generate the interface properties for.
  * @param componentCorePackage The component core package.
  * @param customElementsDir The custom elements directory.
+ * @param exportMaps Import through the package's `exports` map instead of a deep path.
  * @returns The component interface type definition as a string.
  */
-export declare const createComponentTypeDefinition: (outputType: OutputType, tagNameAsPascal: string, events: readonly ComponentCompilerEvent[], componentCorePackage: string, customElementsDir?: string) => string;
+export declare const createComponentTypeDefinition: (outputType: OutputType, tagNameAsPascal: string, events: readonly ComponentCompilerEvent[], componentCorePackage: string, customElementsDir?: string, exportMaps?: boolean) => string;

package/dist/generate-angular-component.js

@@ -25,21 +25,33 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     }
 }
 /**
- * Creates a formatted inputs text with required declaration.
+ * The transform function to reference in generated code, exported from
+ * `angular-component-lib/boolean-attribute`.
+ */
+export const INPUT_TRANSFORM_FUNCTION = 'nullableBooleanAttribute';
+/**
+ * Creates a formatted inputs text with required and transform declarations.
+ *
+ * Inputs are emitted as bare strings unless they carry options, in which case Angular's object
+ * form is used (e.g. `{ name: 'myInput', required: true }`).
  *
- * @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) => {
+        const options = [];
         if (item.required) {
-            return `{ name: '${item.name}', required: true }`;
+            options.push('required: true');
+        }
+        if (item.transform) {
+            options.push(`transform: ${INPUT_TRANSFORM_FUNCTION}`);
         }
-        else {
+        if (options.length === 0) {
             return `'${item.name}'`;
         }
+        return `{ name: '${item.name}', ${options.join(', ')} }`;
     })
         .join(', ');
 }
@@ -200,14 +212,16 @@ const createDocComment = (doc) => {
  * @param events The events to generate the interface properties for.
  * @param componentCorePackage The component core package.
  * @param customElementsDir The custom elements directory.
+ * @param exportMaps Import through the package's `exports` map instead of a deep path.
  * @returns The component interface type definition as a string.
  */
-export const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
+export const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir, exportMaps = false) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         customElementsDir,
         outputType,
+        exportMaps,
     });
     const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;

package/dist/generate-transformtag-script.d.ts

@@ -5,4 +5,6 @@ import type { OutputTargetAngular } from './types';
  * This script patches component selectors in the built Angular library to use the
  * transformed tag names (e.g., 'my-component' -> 'v1-my-component').
  */
-export declare function generateTransformTagScript(compilerCtx: CompilerCtx, components: ComponentCompilerMeta[], outputTarget: OutputTargetAngular, packageName: string): Promise<void>;
+export declare function generateTransformTagScript(compilerCtx: CompilerCtx, components: ComponentCompilerMeta[], outputTarget: OutputTargetAngular, 
+/** Import through the package's `exports` map (`<pkg>/standalone`) instead of a deep path. */
+exportMaps?: boolean): Promise<void>;

package/dist/generate-transformtag-script.js

@@ -5,10 +5,14 @@ import { dashToPascalCase } from './utils';
  * This script patches component selectors in the built Angular library to use the
  * transformed tag names (e.g., 'my-component' -> 'v1-my-component').
  */
-export async function generateTransformTagScript(compilerCtx, components, outputTarget, packageName) {
+export async function generateTransformTagScript(compilerCtx, components, outputTarget, 
+/** Import through the package's `exports` map (`<pkg>/standalone`) instead of a deep path. */
+exportMaps = false) {
     const scriptsDirectory = path.join(path.dirname(outputTarget.directivesProxyFile), '../../scripts');
     const customElementsDir = outputTarget.customElementsDir || 'dist/components';
-    const stencilImportPath = `${outputTarget.componentCorePackage}/${customElementsDir}/index.js`;
+    const stencilImportPath = exportMaps
+        ? `${outputTarget.componentCorePackage}/standalone`
+        : `${outputTarget.componentCorePackage}/${customElementsDir}/index.js`;
     // Generate the mappings object
     const mappings = components
         .map((component) => {

package/dist/index.cjs

@@ -126,7 +126,9 @@ const createComponentEventTypeImports = (componentTagName, events, options) => {
     const imports = [];
     const namedImports = new Set();
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
-    const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
+    const exportMapEntry = isCustomElementsBuild ? '/standalone' : '/loader';
+    const importPathName = normalizePath(componentCorePackage) +
+        (options.exportMaps ? exportMapEntry : isCustomElementsBuild ? `/${customElementsDir}` : '');
     /**
      * Each component's events are typed with the per-component CustomEvent type
      * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a
@@ -179,21 +181,33 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     }
 }
 /**
- * Creates a formatted inputs text with required declaration.
+ * The transform function to reference in generated code, exported from
+ * `angular-component-lib/boolean-attribute`.
+ */
+const INPUT_TRANSFORM_FUNCTION = 'nullableBooleanAttribute';
+/**
+ * Creates a formatted inputs text with required and transform declarations.
+ *
+ * Inputs are emitted as bare strings unless they carry options, in which case Angular's object
+ * form is used (e.g. `{ name: 'myInput', required: true }`).
  *
- * @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) => {
+        const options = [];
         if (item.required) {
-            return `{ name: '${item.name}', required: true }`;
+            options.push('required: true');
+        }
+        if (item.transform) {
+            options.push(`transform: ${INPUT_TRANSFORM_FUNCTION}`);
         }
-        else {
+        if (options.length === 0) {
             return `'${item.name}'`;
         }
+        return `{ name: '${item.name}', ${options.join(', ')} }`;
     })
         .join(', ');
 }
@@ -354,14 +368,16 @@ const createDocComment = (doc) => {
  * @param events The events to generate the interface properties for.
  * @param componentCorePackage The component core package.
  * @param customElementsDir The custom elements directory.
+ * @param exportMaps Import through the package's `exports` map instead of a deep path.
  * @returns The component interface type definition as a string.
  */
-const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
+const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir, exportMaps = false) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         customElementsDir,
         outputType,
+        exportMaps,
     });
     const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
@@ -479,10 +495,14 @@ export class ${moduleClassName} { }`;
  * This script patches component selectors in the built Angular library to use the
  * transformed tag names (e.g., 'my-component' -> 'v1-my-component').
  */
-async function generateTransformTagScript(compilerCtx, components, outputTarget, packageName) {
+async function generateTransformTagScript(compilerCtx, components, outputTarget, 
+/** Import through the package's `exports` map (`<pkg>/standalone`) instead of a deep path. */
+exportMaps = false) {
     const scriptsDirectory = path__default["default"].join(path__default["default"].dirname(outputTarget.directivesProxyFile), '../../scripts');
     const customElementsDir = outputTarget.customElementsDir || 'dist/components';
-    const stencilImportPath = `${outputTarget.componentCorePackage}/${customElementsDir}/index.js`;
+    const stencilImportPath = exportMaps
+        ? `${outputTarget.componentCorePackage}/standalone`
+        : `${outputTarget.componentCorePackage}/${customElementsDir}/index.js`;
     // Generate the mappings object
     const mappings = components
         .map((component) => {
@@ -782,6 +802,73 @@ stencilSetTagTransformer(\${transformerArg});
 
 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);
+const filterInternalProps = (prop) => !prop.internal;
+/**
+ * Whether a property declares an input transform.
+ *
+ * This is the single definition of the rule. Both the generated declaration and the import that
+ * satisfies it are derived from it, so widening the rule can't leave a generated file referencing
+ * a transform it never imports.
+ *
+ * @param prop The property compiler metadata.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns `true` when the property should be transformed.
+ */
+const isTransformedProp = (prop, booleanAttributes) => booleanAttributes && prop.type === 'boolean';
+/**
+ * Maps a Stencil property to an Angular input declaration.
+ *
+ * Virtual properties are mapped with `booleanAttributes` left at its default of `false`. They
+ * carry a free-form type string and no `required` flag, so they are never transformed and always
+ * come out as optional.
+ *
+ * @param prop The property compiler metadata.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns The Angular input declaration.
+ */
+const mapInputProp = (prop, booleanAttributes = false) => ({
+    name: prop.name,
+    required: prop.required ?? false,
+    transform: isTransformedProp(prop, booleanAttributes) ? true : undefined,
+});
+/**
+ * Whether any of a component's properties will declare an input transform, which determines
+ * whether the transform needs to be imported.
+ *
+ * @param components The components in the generated file.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns `true` when at least one property is transformed.
+ */
+const usesInputTransform = (components, booleanAttributes) => components.some((cmpMeta) => (cmpMeta.properties ?? []).filter(filterInternalProps).some((prop) => isTransformedProp(prop, booleanAttributes)));
+/**
+ * Whether the Stencil project generates a package.json `exports` map. Deep `dist/` imports are
+ * blocked for consumers then, so the proxies import through the map's entries instead
+ * (`<pkg>/<tag>`, `<pkg>/loader`, `<pkg>/standalone`).
+ */
+function usesExportMaps(config) {
+    // Stencil v5 only: v4's map has no `./standalone` entry, and its root types aren't
+    // guaranteed to export the component types.
+    const isV5 = (config.outputTargets || []).some((o) => ['loader-bundle', 'standalone', 'ssr', 'types'].includes(o.type));
+    return isV5 && config.generateExportMaps === true;
+}
+/**
+ * The module specifier a proxy imports a component's `defineCustomElement` from.
+ */
+function getComponentModule(config, outputTarget, tagName) {
+    const basePkg = normalizePath(outputTarget.componentCorePackage);
+    if (usesExportMaps(config)) {
+        return `${basePkg}/${tagName}`;
+    }
+    return `${basePkg}/${outputTarget.customElementsDir}/${tagName}.js`;
+}
+/**
+ * The relative import of the project's own `components.d.ts`, for when there's no
+ * `componentCorePackage`. Only resolved when needed: package.json may have no `types` field.
+ */
+function getComponentsTypeFile(pkgData, outputTarget, rootDir) {
+    const dtsFilePath = path__default["default"].join(rootDir, path__default["default"].dirname(pkgData.types), GENERATED_DTS);
+    return relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
+}
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -815,27 +902,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
     }
     // Generate transformer script if transformTag is enabled
     if (outputTarget.transformTag) {
-        // Read the Angular library's package.json to get its name
-        // directivesProxyFile is like: projects/library/src/directives/proxies.ts
-        // We need to go up to: projects/library/package.json
-        const angularLibraryDir = path__default["default"].dirname(path__default["default"].dirname(path__default["default"].dirname(outputTarget.directivesProxyFile)));
-        const angularPkgJsonPath = path__default["default"].join(angularLibraryDir, 'package.json');
-        let angularPackageName = '';
-        try {
-            const angularPkgJson = JSON.parse(await compilerCtx.fs.readFile(angularPkgJsonPath));
-            if (angularPkgJson.name) {
-                angularPackageName = angularPkgJson.name;
-            }
-        }
-        catch (e) {
-            throw new Error(`Could not read Angular library package.json at ${angularPkgJsonPath}. ` +
-                `The package name is required to generate the transformTag patch script.`);
-        }
-        if (!angularPackageName) {
-            throw new Error(`Angular library package.json at ${angularPkgJsonPath} does not have a "name" field. ` +
-                `The package name is required to generate the transformTag patch script.`);
-        }
-        tasks.push(generateTransformTagScript(compilerCtx, filteredComponents, outputTarget));
+        tasks.push(generateTransformTagScript(compilerCtx, filteredComponents, outputTarget, usesExportMaps(config)));
     }
     await Promise.all(tasks);
 }
@@ -859,10 +926,7 @@ async function copyResources(config, outputTarget) {
     ], srcDirectory);
 }
 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;
-    const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     const includeSingleComponentAngularModules = outputType === OutputTypes.Scam;
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
     const isStandaloneBuild = outputType === OutputTypes.Standalone;
@@ -879,6 +943,14 @@ function generateProxies(components, pkgData, outputTarget, rootDir, config) {
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp'];
+    /**
+     * The input transform lives in its own module so that it carries no runtime imports.
+     */
+    let transformImport = '';
+    const booleanAttributes = outputTarget.booleanAttributes === true;
+    if (usesInputTransform(components, booleanAttributes)) {
+        transformImport = `\n${createImportStatement([INPUT_TRANSFORM_FUNCTION], './angular-component-lib/boolean-attribute')}`;
+    }
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
@@ -886,7 +958,7 @@ function generateProxies(components, pkgData, outputTarget, rootDir, config) {
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
 
-${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n`;
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}${transformImport}\n`;
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -896,7 +968,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     const generateTypeImports = () => {
         const importLocation = outputTarget.componentCorePackage
             ? getPathToComponentTypes(config, outputTarget)
-            : normalizePath(componentsTypeFile);
+            : normalizePath(getComponentsTypeFile(pkgData, outputTarget, rootDir));
         return `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
     const typeImports = generateTypeImports();
@@ -910,17 +982,11 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     if (isCustomElementsBuild && outputTarget.componentCorePackage !== undefined) {
         const cmpImports = components.map((component) => {
             const pascalImport = dashToPascalCase(component.tagName);
-            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir}/${component.tagName}.js';`;
+            return `import { defineCustomElement as define${pascalImport} } from '${getComponentModule(config, outputTarget, component.tagName)}';`;
         });
         sourceImports = cmpImports.join('\n');
     }
     const proxyFileOutput = [];
-    const filterInternalProps = (prop) => !prop.internal;
-    // Ensure that virtual properties has required as 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);
@@ -928,9 +994,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         if (cmpMeta.properties) {
             internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
         }
-        const inputs = internalProps.map(mapInputProp);
+        const inputs = internalProps.map((prop) => mapInputProp(prop, booleanAttributes));
         if (cmpMeta.virtualProperties) {
-            inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+            inputs.push(...cmpMeta.virtualProperties.map((prop) => mapInputProp(prop)));
         }
         const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const methods = [];
@@ -946,7 +1012,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          */
         const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
+        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, usesExportMaps(config));
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -961,9 +1027,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
  */
 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);
-    const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     const includeSingleComponentAngularModules = outputType === OutputTypes.Scam;
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
     const isStandaloneBuild = outputType === OutputTypes.Standalone;
@@ -977,34 +1040,36 @@ function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir, config)
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
+    const booleanAttributes = outputTarget.booleanAttributes === true;
+    const componentLibImports = ['ProxyCmp'];
+    // The input transform lives in its own module so that it carries no runtime imports.
+    let transformImport = '';
+    if (usesInputTransform([cmpMeta], booleanAttributes)) {
+        transformImport = `\n${createImportStatement([INPUT_TRANSFORM_FUNCTION], './angular-component-lib/boolean-attribute')}`;
+    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
 
-${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}${transformImport}\n`;
     // Type imports
     const importLocation = componentCorePackage
         ? getPathToComponentTypes(config, outputTarget)
-        : normalizePath(componentsTypeFile);
+        : normalizePath(getComponentsTypeFile(pkgData, outputTarget, rootDir));
     const typeImports = `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     // defineCustomElement import
     let sourceImport = '';
     if (isCustomElementsBuild && componentCorePackage !== undefined) {
-        sourceImport = `import { defineCustomElement as define${tagNameAsPascal} } from '${normalizePath(componentCorePackage)}/${customElementsDir}/${cmpMeta.tagName}.js';\n`;
+        sourceImport = `import { defineCustomElement as define${tagNameAsPascal} } from '${getComponentModule(config, outputTarget, cmpMeta.tagName)}';\n`;
     }
     // Generate component definition
-    const filterInternalProps = (prop) => !prop.internal;
-    const mapInputProp = (prop) => ({
-        name: prop.name,
-        required: prop.required ?? false,
-    });
     const internalProps = [];
     if (cmpMeta.properties) {
         internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
     }
-    const inputs = internalProps.map(mapInputProp);
+    const inputs = internalProps.map((prop) => mapInputProp(prop, booleanAttributes));
     if (cmpMeta.virtualProperties) {
-        inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+        inputs.push(...cmpMeta.virtualProperties.map((prop) => mapInputProp(prop)));
     }
     const orderedInputs = sortBy(inputs, (cip) => cip.name);
     const methods = [];
@@ -1014,7 +1079,7 @@ ${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
     const inlineComponentProps = outputTarget.inlineProperties ? internalProps : [];
     const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
     const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-    const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
+    const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, usesExportMaps(config));
     const proxyFileOutput = [componentDefinition, '\n'];
     if (includeSingleComponentAngularModules) {
         proxyFileOutput.push(moduleDefinition, '\n');
@@ -1045,6 +1110,12 @@ function generateBarrelFile(components, outputTarget) {
 }
 function getPathToComponentTypes(config, outputTarget) {
     const basePkg = outputTarget.componentCorePackage || '';
+    // The entry of the output the proxies are built on always exports the component types - the
+    // package root only does when the project has no `src/index.ts`, or that file re-exports them
+    if (usesExportMaps(config)) {
+        const entry = isOutputTypeCustomElementsBuild(outputTarget.outputType) ? 'standalone' : 'loader';
+        return `${normalizePath(basePkg)}/${entry}`;
+    }
     // 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) {