@breadstone-infrastructure/nx-tasks 0.0.256 → 0.0.258

package/src/executors/ng-proxy-transform/executor.task.ts

@@ -0,0 +1,675 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+/* eslint-disable max-depth */
+/* eslint-disable no-await-in-loop */
+/* eslint-disable complexity */
+// path: src/tasks/NgProxyTransformTask.ts
+
+// #region Imports
+
+import { blue, ConsoleLogger, CustomElementManifest, File, gray, green, type IFileCacheOptions, logSeparator, Path, StringExtensions } from '@breadstone-infrastructure/utilities';
+import prettier from 'prettier';
+import type { PackageJson, TsConfigJson } from 'type-fest';
+import { withCaching } from '../../utils/withCaching';
+
+// #endregion
+
+export namespace NgProxyTransformTask {
+
+    export const DEFAULT_OPTIONS = {
+        standalone: false,
+        verbose: false,
+        cleanOut: false,
+        aliases: {},
+        controlValueAccessors: [],
+        intlProviders: [],
+        ignore: [],
+        additionalExports: [],
+        prettier: {
+            arrowParens: 'always',
+            bracketSameLine: false,
+            bracketSpacing: true,
+            semi: true,
+            experimentalTernaries: true,
+            singleQuote: true,
+            jsxSingleQuote: false,
+            quoteProps: 'as-needed',
+            trailingComma: 'none',
+            singleAttributePerLine: false,
+            proseWrap: 'never',
+            insertPragma: false,
+            requirePragma: false,
+            tabWidth: 4,
+            useTabs: false,
+            embeddedLanguageFormatting: 'auto',
+            printWidth: 1200
+        } satisfies prettier.Config
+    };
+
+    export interface INgProxyTransformTaskOptions {
+        cwd: string;
+        path: string;
+        out: string;
+        cleanOut?: boolean;
+        packageJson: PackageJson;
+        tsConfigJson: TsConfigJson;
+        standalone?: boolean;
+        verbose?: boolean;
+        aliases?: Record<string, string>;
+        ignore?: Array<string>;
+        controlValueAccessors?: Array<string>;
+        intlProviders?: Array<string>;
+        additionalExports?: Array<string>;
+        cache?: IFileCacheOptions;
+    }
+
+    export async function run(options: INgProxyTransformTaskOptions): Promise<void> {
+        const logger = new ConsoleLogger();
+        logSeparator(logger, 'Ng Proxy Transform');
+
+        const fileCache = withCaching(options.cache);
+
+        const textFiles = File.glob(Path.combine(options.cwd, options.path, '**/*.txt'));
+        textFiles.forEach((file) => {
+            const content = File.readAllText(file);
+            File.writeAllText(file.replace('.txt', '.json'), content);
+            File.delete(file);
+        });
+
+        const filesPath = Path.combine(options.cwd, options.path, '**/*.json');
+        const files = File.glob(filesPath);
+        const createdFiles = new Array<string>();
+
+        if (options.verbose) {
+            logger.log(gray(`    Search for: ${filesPath}`));
+        }
+
+        if (files.length) {
+            if (options.verbose) {
+                logger.log(gray(`    ${files.length} files to transform`));
+            }
+
+            for (const file of files) {
+                if (!await fileCache.isFileCached(file)) {
+                    try {
+                        const doc = File.readAllJson(file) as unknown as CustomElementManifest.PackageDoc;
+                        const def = CustomElementManifest.readDefinition(doc);
+                        const attributes = CustomElementManifest.readAttributes(doc);
+                        const properties = CustomElementManifest.readProperties(doc);
+                        const methods = CustomElementManifest.readMethods(doc);
+                        const events = CustomElementManifest.readEvents(doc);
+                        const slots = CustomElementManifest.readSlots(doc);
+
+                        // extreme import here is to merge the properties with attributes and set a attribute marker property to true
+                        // attributes will handled differently in the generated code
+                        const xxx = properties.map((property) => {
+                            let hasAttribute = false;
+                            if (attributes.find((x) => x.name === property.name)) {
+                                hasAttribute = true;
+                            }
+
+                            return {
+                                ...property,
+                                isAttribute: hasAttribute
+                            };
+                        });
+
+                        const out = getOutPathAndFile(def.declaration.module ?? '');
+                        const tsFile = Path.combine(options.cwd, '../', doc.modules[0].path.replace('./../../../', ''));
+
+                        if (!File.exists(tsFile)) {
+                            logger.error(`    File ${tsFile} does not exist.`);
+                            continue;
+                        }
+
+                        if (options.ignore?.includes(def.name)) {
+                            logger.log(gray(`    [IGNORE] ${Path.relative(options.cwd, file)}`));
+                            continue;
+                        }
+
+                        const outPath = Path.combine(options.cwd, options.out, out ?? '');
+                        const rootPath = Path.combine(options.cwd, 'src/');
+                        const relativeRootPath = Path.relative(Path.getDirectoryName(outPath), rootPath);
+
+                        let result = createComponentDefinition(
+                            relativeRootPath,
+                            def.name,
+                            slots,
+                            xxx.map((x) => ({
+                                name: x.name,
+                                isAttribute: x.isAttribute
+                            })),
+                            events.map((x) => x.name),
+                            methods.map((x) => x.name),
+                            options.standalone ?? false,
+                            options.controlValueAccessors ?? [],
+                            options.intlProviders ?? [],
+                            options.aliases ?? {}
+                        );
+
+                        result += StringExtensions.newLine;
+                        result += StringExtensions.newLine;
+                        result += createAngularMethodsType(def.name, options.aliases ?? {}, methods.map((x) => x.name));
+                        result += StringExtensions.newLine;
+                        result += StringExtensions.newLine;
+                        result += createAngularProviderForComponent(def.name, options.aliases ?? {}, options.intlProviders ?? []);
+                        result += StringExtensions.newLine;
+                        result += StringExtensions.newLine;
+                        result += createAngularModuleForComponent(def.name, options.standalone ?? false, options.aliases ?? {});
+
+                        const formatted = await formatTypeScript(result);
+                        const outFileExists = File.exists(outPath);
+
+                        File.writeAllText(outPath, formatted);
+                        createdFiles.push(Path.relative(options.cwd, outPath));
+
+                        if (outFileExists) {
+                            logger.log(`    ${blue('[UPDATE]')} ${out}`);
+                        } else {
+                            logger.log(`    ${green('[CREATE]')} ${out}`);
+                        }
+                    } catch (error) {
+                        logger.error('    Error while transforming.');
+                        logger.error(`${error}`);
+                    }
+                } else if (options.verbose) {
+                    logger.log(gray(`    File ${Path.relative(options.cwd, file)} is up to date.`));
+                }
+            }
+
+            try {
+                const indexExports = createIndexExports(createdFiles, options.additionalExports ?? []);
+                const outPath = Path.combine(options.cwd, options.out, 'Index.ts');
+                const formatted = await formatTypeScript(indexExports);
+                File.writeAllText(outPath, formatted);
+                logger.log(`    ${blue('[CREATE]')} Index.ts`);
+            } catch (error) {
+                logger.error('Error while transforming.');
+                logger.error(`${error}`);
+            }
+        } else {
+            logger.log(gray('\tFile or Folder is up to date.'));
+        }
+
+        logSeparator(logger);
+    }
+
+    function createComponentDefinition(
+        rootPath: string,
+        tagName: string,
+        slots: Array<CustomElementManifest.SlotDoc>,
+        inputs: Array<{
+            name: string;
+            isAttribute: boolean;
+        }>,
+        outputs: Array<string>,
+        methods: Array<string>,
+        standalone: boolean,
+        controlValueAccessors: Array<string>,
+        intlProviders: Array<string>,
+        aliases: Record<string, string>
+    ): string {
+        const pascalName = dashToPascalCase(tagName);
+        const lookupName = aliases[tagName] ?? null;
+        const controlValueAccessor = controlValueAccessors.includes(tagName);
+        const intlProvider = intlProviders.includes(tagName);
+        const controlName = lookupName ?? pascalName.replace('Mosaik', '');
+        const className = `${controlName.replace('Mosaik', '')}Component`;
+
+        const parts = [
+            generateHeader(),
+            generateImports(rootPath, controlName, controlValueAccessor, standalone, intlProvider),
+            generatePropsToken(controlName, 'Mosaik', intlProvider),
+            generateDocs(slots),
+            generateProxyCmpDecorator(tagName, inputs.map((x) => x.name), methods, controlName),
+            generateComponentDecorator(tagName, inputs.map((x) => x.name), outputs, standalone, controlValueAccessor, className), `export class ${className} ${controlValueAccessor ? 'implements ControlValueAccessor' : ''} {`,
+            generateClassFields(controlName, outputs, controlValueAccessor),
+            generateConstructor(controlName, outputs, controlValueAccessor, intlProvider),
+            generateInputProperties(inputs, controlName, intlProvider),
+            generateOutputProperties(outputs),
+            controlValueAccessor ? generateControlValueAccessorMethods() : '',
+            generateInvokeMethod(controlName),
+            '',
+            '}'
+        ];
+
+        return parts.filter(Boolean).join('\n\n');
+    }
+
+    function createAngularMethodsType(tagName: string, aliases: Record<string, string>, methods: ReadonlyArray<string>): string {
+        const pascalName = dashToPascalCase(tagName);
+        const lookupName = aliases[tagName] ?? null;
+        const controlName = lookupName ?? pascalName.replace('Mosaik', '');
+        const methodNamesUnion = methods.map((method) => `'${method}'`).join(' | ');
+
+        return `
+/**
+ * Declares the methods available on ${controlName}Component.
+ */
+export type ${controlName}MethodNames = ${methodNamesUnion};
+
+/**
+ * Declares the methods interface for ${controlName}Component.
+ */
+export type ${controlName}ComponentMethods = MethodMap<${controlName}MethodNames>;
+        `.trim();
+    }
+
+    function createIndexExports(componentTagNames: Array<string>, additionalExports: Array<string>): string {
+        return componentTagNames
+            .map((x) => Path.combine(Path.getDirectoryName(x), Path.getFileNameWithoutExtension(x)))
+            .map((x) => x.split('src/').pop())
+            .map((x) => `export * from './${x}';`)
+            .join('\n')
+            .concat('\n', additionalExports.map((x) => `export * from './${x}';`).join('\n'));
+    }
+
+    function createAngularProviderForComponent(componentTagName: string, aliases: Record<string, string>, intlProviders: Array<string>): string {
+        const pascalName = dashToPascalCase(componentTagName);
+        const lookupName: string | null = Object.keys(aliases).includes(componentTagName) ? aliases[componentTagName] : null;
+        const controlName = lookupName ?? pascalName.replace('Mosaik', '');
+        const controlNameWithoutSuffix = lookupName ?? pascalName.replace('Mosaik', '');
+        const intlProvider = intlProviders.includes(componentTagName);
+        const intlTokenName = `${StringExtensions.toSnakeCase(controlNameWithoutSuffix).toUpperCase()}_INTL`;
+
+        const intlParam = intlProvider ? `, intl?: Partial<${controlNameWithoutSuffix}Element['intl']> | Type<Partial<${controlNameWithoutSuffix}Element['intl']>>` : '';
+        const intlProviderBlock = intlProvider ? `
+    if (intl) {
+        if (typeof intl === 'function') {
+            providers.push({ provide: ${intlTokenName}, useClass: intl });
+        } else {
+            providers.push({ provide: ${intlTokenName}, useValue: intl });
+        }
+    }` : '';
+
+        return `
+/**
+ * @public
+ */
+export function provide${controlName}Component(config?: Partial<${controlNameWithoutSuffix}Element.Props>${intlParam}): EnvironmentProviders {
+    const providers: Array<Provider> = [];
+
+    if (config) {
+        providers.push({
+            provide: ${StringExtensions.toSnakeCase(controlNameWithoutSuffix).toUpperCase()}_DEFAULT_PROPS,
+            useValue: config,
+        });
+    }
+${intlProviderBlock}
+
+    return makeEnvironmentProviders(providers);
+}`.trim();
+    }
+
+    function createAngularModuleForComponent(componentTagName: string, standalone: boolean, aliases: Record<string, string>): string {
+        if (!standalone) {
+            const tagNameAsPascal = dashToPascalCase(componentTagName);
+            const componentClassName = `${tagNameAsPascal.replace('Mosaik', '')}Component`;
+            const moduleClassName = `${tagNameAsPascal}Module`;
+            const lookupName: string | null = Object.keys(aliases).includes(componentTagName) ? aliases[componentTagName] : null;
+            const controlNameWithoutSuffix = lookupName ?? tagNameAsPascal.replace('Mosaik', '');
+
+            return `
+/**
+ * @public
+ */
+@NgModule({
+  declarations: [${componentClassName}],
+  exports: [${componentClassName}]
+})
+export class ${moduleClassName} {
+    public static forRoot(config: Partial<${controlNameWithoutSuffix}Element.Props>): ModuleWithProviders<${moduleClassName}> {
+        return {
+            ngModule: ${moduleClassName},
+            providers: [{
+                provide: ${controlNameWithoutSuffix.toUpperCase()}_DEFAULT_PROPS,
+                useValue: config,
+            }]
+        };
+    }
+}`.trim();
+        }
+        return '';
+    }
+
+    function generateHeader(): string {
+        return `
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+`;
+    }
+
+    function generateImports(rootPath: string, controlName: string, controlValueAccessor: boolean, standalone: boolean, intlProvider: boolean): string {
+        return [
+            `import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, ElementRef, EnvironmentProviders, effect, inject, InjectionToken, input, InputSignal, makeEnvironmentProviders, ${!standalone ? 'ModuleWithProviders, NgModule,' : ''} output, OutputEmitterRef, Provider${controlValueAccessor ? ', forwardRef' : ''}${intlProvider ? ', Type' : ''} } from '@angular/core';`,
+            controlValueAccessor ? 'import { ControlValueAccessor, NG_VALUE_ACCESSOR } from \'@angular/forms\';' : '',
+            `import { ${controlName}Element${controlValueAccessor ? `, IElementValueAccessor, ${StringExtensions.firstCharToLowerCase(controlName)}ElementValueAccessor` : ''} } from '@breadstone/mosaik-elements-foundation';`,
+            `import { applyDefaults, ProxyCmp, MethodMap } from '${Path.combine(rootPath, 'Utils/Proxy')}';`,
+            controlValueAccessor ? `import { FORM_STATUS_HOST, FormStatusHostDirective, FormFieldStatusHostDirective } from \'${Path.combine(rootPath, 'Cdk/Cdk')}\';` : ''
+        ].filter(Boolean).join('\n');
+    }
+
+    function generatePropsToken(controlName: string, prefix: string, intlProvider: boolean): string {
+        const propsToken = `
+/**
+ * @public
+ *
+ * Injection token for the default properties of the ${controlName}Component.
+ * Use this token to provide default properties for the ${controlName}Component.
+ * The properties will be applied to the component when it is created.
+ * This is useful for setting default values for properties that are not set by the user.
+ */
+export const ${StringExtensions.toSnakeCase(controlName).toUpperCase()}_DEFAULT_PROPS = new InjectionToken<Partial<${controlName}Element.Props>>('${StringExtensions.toSnakeCase(prefix, controlName).toUpperCase()}_DEFAULT_PROPS');
+`;
+
+        const intlToken = intlProvider ? `
+/**
+ * @public
+ *
+ * Injection token for the intl configuration of the ${controlName}Component.
+ * Provide a partial intl object or an injectable class that resolves translations.
+ * This allows third-party applications to override the default intl labels
+ * globally, per route, or per component via Angular's dependency injection.
+ *
+ * Merge order: Foundation defaults → DI intl → [intl] input binding.
+ */
+export const ${StringExtensions.toSnakeCase(controlName).toUpperCase()}_INTL = new InjectionToken<Partial<${controlName}Element['intl']>>('${StringExtensions.toSnakeCase(prefix, controlName).toUpperCase()}_INTL');
+` : '';
+
+        return propsToken + intlToken;
+    }
+
+    function generateDocs(slots: Array<CustomElementManifest.SlotDoc>): string {
+        return `
+/**
+ * @public
+ *
+ * ${slots.length ? slots.map((slot) => `@slot ${slot.name} - ${slot.description}`).join('\n * ') : ''}
+ */
+`.trim();
+    }
+
+    function generateProxyCmpDecorator(tagName: string, inputs: Array<string>, methods: Array<string>, controlName: string): string {
+        const formattedInputs = inputs.map((i) => `'${i}'`).join(', ');
+        const formattedMethods = methods.map((m) => `'${m}'`).join(', ');
+
+        return `
+@ProxyCmp({
+  defineCustomElementFn: () => customElements.define('${tagName}', ${controlName}Element),
+  ${inputs.length ? `inputs: [${formattedInputs}],` : ''}
+  ${methods.length ? `methods: [${formattedMethods}],` : ''}
+})
+`.trim();
+    }
+
+    function generateComponentDecorator(tagName: string, inputs: Array<string>, outputs: Array<string>, standalone: boolean, controlValueAccessor: boolean, className: string): string {
+        const providers = `
+[
+    {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: forwardRef(() => ${className}),
+        multi: true
+    },
+    {
+        provide: FORM_STATUS_HOST,
+        useExisting: forwardRef(() => ${className})
+    }
+]
+`.trim();
+
+        return `
+@Component({
+  selector: '${tagName}',
+  standalone: ${standalone},
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  ${controlValueAccessor ? 'hostDirectives: [FormStatusHostDirective, FormFieldStatusHostDirective],' : ''}
+  ${controlValueAccessor ? `providers: ${providers}` : ''}
+})
+`.trim();
+    }
+
+    function generateClassFields(controlName: string, outputs: Array<string>, controlValueAccessor: boolean): string {
+        return `
+// #region Fields
+
+private readonly _element: ${controlName}Element;
+private readonly _destroyRef: DestroyRef;
+${controlValueAccessor ? 'private readonly _accessor: IElementValueAccessor;' : ''}
+
+// #endregion
+`.trim();
+    }
+
+    function generateConstructor(controlName: string, outputs: Array<string>, controlValueAccessor: boolean, intlProvider: boolean): string {
+        const intlInjection = intlProvider ? `
+  // Apply injected intl configuration (from provideXxxComponent or direct token provision)
+  const injectedIntl = inject(${StringExtensions.toSnakeCase(controlName).toUpperCase()}_INTL, { optional: true });
+  if (injectedIntl) {
+    Object.assign(this._element.intl, injectedIntl);
+  }` : '';
+
+        const mergeKeysArg = intlProvider ? `, ['intl']` : '';
+
+        return `
+// #region Ctor
+
+public constructor() {
+  inject(ChangeDetectorRef).detach();
+
+  this._element = inject(ElementRef).nativeElement;
+  this._destroyRef = inject(DestroyRef);
+  ${controlValueAccessor ? `this._accessor = ${StringExtensions.firstCharToLowerCase(controlName)}ElementValueAccessor(this._element); this._element.addController(this._accessor);` : ''}
+
+  // Wire up output events from the native element
+  ${outputs.map((eventName) => `this._element.on('${eventName}', (e) => this.${eventName}.emit(e instanceof CustomEvent ? e.detail : undefined));`).join('\n  ')}
+
+  // Initialize input synchronization effect
+  this.initInputSyncEffect();
+
+  applyDefaults(this._element, inject(${StringExtensions.toSnakeCase(controlName).toUpperCase()}_DEFAULT_PROPS, { optional: true }) ?? {}${mergeKeysArg});
+${intlInjection}
+}
+
+// #endregion
+`.trim();
+    }
+
+    function generateInputProperties(inputs: Array<{
+        name: string;
+        isAttribute: boolean;
+    }>, controlName: string, intlProvider: boolean): string {
+        // Filter out readonly/private properties by checking common patterns
+        // Properties that should not be settable typically include computed values
+        const writableInputs = inputs.filter((prop) => {
+            // Skip common readonly property patterns
+            const readonlyPatterns = [
+                'items', 'selectedItem', 'selectedItems', 'isFirstStep', 'isLastStep',
+                'activeIndex', 'intl', 'animationTarget', 'control', 'index', 'displayText',
+                'hasBadge', 'hasSrc', 'isSupported', 'isEmpty', 'percent', 'segments',
+                'effectiveRadius', 'tiles', 'maximizedTile', 'validity', 'willValidate',
+                'internals', 'labels', 'portal', 'projection', 'attached', 'detached',
+                'isProjected', 'isResizing', 'isDragging', 'isDraggable', 'isResizable',
+                'fullscreen', 'tileManager', 'resizeMode', 'resizeDisabled', 'headerRef',
+                'tileContentRef', 'cssContainer', 'positionPercentage', 'positionInPixels',
+                'hasPanels', 'sortChanged', 'kind', 'ticks', 'canPrev', 'canNext', 'length',
+                'highlightedIndex', 'shouldRenderSuggestions', 'hasSuggestions', 'activeDescendantId',
+                'shouldShowNoResultsMessage', 'shouldShowLoadingState', 'inputId', 'listboxId',
+                'filterInputId', 'attachmentRejected', 'attachmentAdded', 'attachmentRemoved',
+                'submitted', 'dismissed', 'sorted', 'sortedSource', 'drawer',
+                'totalWidth', 'visibleStart', 'visibleEnd', 'isNow', 'root', 'layoutChangeEvent',
+                'tileFullscreenEvent', 'tileMaximizeEvent', 'tileDragStartEvent', 'tileDragEndEvent',
+                'tileDragCancelEvent', 'tileResizeStartEvent', 'tileResizeEndEvent', 'tileResizeCancelEvent',
+                'isRecorderSupported', 'leftPanned', 'rightPanned', 'canScrollToStart', 'canScrollToEnd',
+                'hasScrollableContent', 'isAtScrollTop', 'isAtScrollBottom', 'selectedIndex'
+            ];
+
+            return !readonlyPatterns.includes(prop.name);
+        });
+
+        const inputSignals = inputs.map((prop) => {
+            const isIntlProp = prop.name === 'intl' && intlProvider;
+            const typeExpr = isIntlProp
+                ? `Partial<${controlName}Element['${prop.name}']>`
+                : `${controlName}Element['${prop.name}']`;
+
+            return `
+/**
+ * Signal input for the \`${prop.name}\` property.
+ *
+ * @public
+ */
+public readonly ${prop.name}: InputSignal<${typeExpr} | undefined> = input<${typeExpr}>();
+`;
+        }).join('\n');
+
+        // Generate a single effect that syncs only writable inputs to the native element
+        // IMPORTANT: Always use direct property assignment for Lit web components.
+        // Using setAttribute() does NOT work correctly because:
+        // 1. setAttribute() converts all values to strings (breaks booleans, objects, etc.)
+        // 2. Lit components reflect properties to attributes, not the other way around
+        // 3. Property setters may have logic that attributes bypass
+        const effectBody = writableInputs.map((prop) => {
+            return `
+    const ${prop.name}Value = this.${prop.name}();
+    if (${prop.name}Value !== undefined) {
+      (this._element as any).${prop.name} = ${prop.name}Value;
+    }`;
+        }).join('\n');
+
+        // Generate intl sync block for intlProvider components
+        const intlSyncBlock = intlProvider ? `
+    const intlValue = this.intl();
+    if (intlValue !== undefined) {
+      Object.assign(this._element.intl, intlValue);
+    }` : '';
+
+        // Generate the initInputSyncEffect method that creates the effect with proper cleanup
+        const initEffectMethod = `
+/**
+ * Initializes the effect that synchronizes all signal inputs to the native element.
+ * Called from constructor after _element is initialized.
+ * The effect is automatically cleaned up when the component is destroyed via DestroyRef.
+ *
+ * @private
+ */
+private initInputSyncEffect(): void {
+  effect(() => {${effectBody}${intlSyncBlock}
+  }, { injector: undefined });
+}
+`;
+
+        return `
+// #region Properties
+
+${inputSignals}
+
+${initEffectMethod}
+
+// #endregion
+`.trim();
+    }
+
+    function generateOutputProperties(outputs: Array<string>): string {
+        return `
+// #region Outputs
+
+${outputs.map((o) => `
+/**
+ * Output signal for the \`${o}\` event.
+ *
+ * @public
+ */
+public readonly ${o}: OutputEmitterRef<unknown> = output<unknown>();
+`).join('\n')}
+
+// #endregion
+`.trim();
+    }
+
+    function generateControlValueAccessorMethods(): string {
+        return `
+// #region ControlValueAccessor
+
+public writeValue(obj: unknown): void {
+  this._accessor.writeValue(obj);
+}
+
+public registerOnChange(fn: unknown): void {
+  this._accessor.registerOnChange(fn);
+}
+
+public registerOnTouched(fn: unknown): void {
+  this._accessor.registerOnTouched(fn);
+}
+
+public setDisabledState?(isDisabled: boolean): void {
+  this._accessor.setDisabled?.(isDisabled);
+}
+
+// #endregion
+`.trim();
+    }
+
+    function generateInvokeMethod(controlName: string): string {
+        return `
+// #region Methods
+
+/**
+ * Invokes a method on the underlying native element.
+ *
+ * @public
+ * @param method - The method name to invoke.
+ * @param args - The arguments to pass to the method.
+ * @returns The return value of the method.
+ */
+public invoke<TMethod extends ${controlName}MethodNames>(
+  method: TMethod,
+  ...args: Parameters<${controlName}ComponentMethods[TMethod]>
+): ReturnType<${controlName}ComponentMethods[TMethod]> {
+  return (this._element as any)[method](...args);
+}
+
+/**
+ * Sets a property value on the underlying native element.
+ * This is useful for CDK behaviors and directives that need to modify element properties
+ * without going through the signal input (which would cause a one-way binding).
+ *
+ * @public
+ * @param property - The property name to set.
+ * @param value - The value to set.
+ */
+public setInput<TProperty extends keyof ${controlName}Element>(
+  property: TProperty,
+  value: ${controlName}Element[TProperty]
+): void {
+  (this._element as any)[property] = value;
+}
+
+// #endregion
+`.trim();
+    }
+
+    function formatTypeScript(code: string): Promise<string> {
+        return prettier.format(code, {
+            parser: 'typescript',
+            ...DEFAULT_OPTIONS.prettier
+        });
+    }
+
+    function dashToPascalCase(str: string): string {
+        return str.toLowerCase()
+            .split('-')
+            .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+            .join('');
+    }
+
+    function getOutPathAndFile(original: string): string | undefined {
+        return original.split('/src').pop()
+            ?.replace('Element.ts', 'Component.ts');
+    }
+
+}