@stencil/angular-output-target 0.0.0-dev.11698339436.1d39048b

package/dist/output-angular.js

@@ -0,0 +1,138 @@
+import path from 'path';
+import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, createImportStatement, isOutputTypeCustomElementsBuild, OutputTypes, } from './utils';
+import { createAngularComponentDefinition, createComponentTypeDefinition } from './generate-angular-component';
+import { generateAngularDirectivesFile } from './generate-angular-directives-file';
+import generateValueAccessors from './generate-value-accessors';
+import { generateAngularModuleForComponent } from './generate-angular-modules';
+export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
+    const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
+    const rootDir = config.rootDir;
+    const pkgData = await readPackageJson(config, rootDir);
+    const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
+    await Promise.all([
+        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
+        copyResources(config, outputTarget),
+        generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
+        generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
+    ]);
+}
+function getFilteredComponents(excludeComponents = [], cmps) {
+    return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
+}
+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.join(__dirname, '..', 'angular-component-lib');
+    const destDirectory = path.join(path.dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
+    return config.sys.copy([
+        {
+            src: srcDirectory,
+            dest: destDirectory,
+            keepDirStructure: false,
+            warn: false,
+        },
+    ], srcDirectory);
+}
+export function generateProxies(components, pkgData, outputTarget, rootDir) {
+    const distTypesDir = path.dirname(pkgData.types);
+    const dtsFilePath = path.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;
+    const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
+    /**
+     * The collection of named imports from @angular/core.
+     */
+    const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef'];
+    if (includeOutputImports) {
+        angularCoreImports.push('EventEmitter');
+    }
+    angularCoreImports.push('NgZone');
+    /**
+     * The collection of named imports from the angular-component-lib/utils.
+     */
+    const componentLibImports = ['ProxyCmp'];
+    if (includeOutputImports) {
+        componentLibImports.push('proxyOutputs');
+    }
+    if (includeSingleComponentAngularModules) {
+        angularCoreImports.push('NgModule');
+    }
+    const imports = `/* tslint:disable */
+/* auto-generated angular directive proxies */
+${createImportStatement(angularCoreImports, '@angular/core')}
+
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n`;
+    /**
+     * Generate JSX import type from correct location.
+     * When using custom elements build, we need to import from
+     * either the "components" directory or customElementsDir
+     * otherwise we risk bundlers pulling in lazy loaded imports.
+     */
+    const generateTypeImports = () => {
+        let importLocation = outputTarget.componentCorePackage
+            ? normalizePath(outputTarget.componentCorePackage)
+            : normalizePath(componentsTypeFile);
+        importLocation += isCustomElementsBuild ? `/${outputTarget.customElementsDir}` : '';
+        return `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
+    };
+    const typeImports = generateTypeImports();
+    let sourceImports = '';
+    /**
+     * Build an array of Custom Elements build imports and namespace them
+     * so that they do not conflict with the Angular wrapper names. For example,
+     * IonButton would be imported as IonButtonCmp so as to not conflict with the
+     * IonButton Angular Component that takes in the Web Component as a parameter.
+     */
+    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';`;
+        });
+        sourceImports = cmpImports.join('\n');
+    }
+    const proxyFileOutput = [];
+    const filterInternalProps = (prop) => !prop.internal;
+    const mapPropName = (prop) => prop.name;
+    const { componentCorePackage, customElementsDir } = outputTarget;
+    for (let cmpMeta of components) {
+        const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
+        const inputs = [];
+        if (cmpMeta.properties) {
+            inputs.push(...cmpMeta.properties.filter(filterInternalProps).map(mapPropName));
+        }
+        if (cmpMeta.virtualProperties) {
+            inputs.push(...cmpMeta.virtualProperties.map(mapPropName));
+        }
+        inputs.sort();
+        const outputs = [];
+        if (cmpMeta.events) {
+            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
+        }
+        const methods = [];
+        if (cmpMeta.methods) {
+            methods.push(...cmpMeta.methods.filter(filterInternalProps).map(mapPropName));
+        }
+        /**
+         * For each component, we need to generate:
+         * 1. The @Component decorated class
+         * 2. Optionally the @NgModule decorated class (if includeSingleComponentAngularModules is true)
+         * 3. The component interface (using declaration merging for types).
+         */
+        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild);
+        const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
+        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
+        proxyFileOutput.push(componentDefinition, '\n');
+        if (includeSingleComponentAngularModules) {
+            proxyFileOutput.push(moduleDefinition, '\n');
+        }
+        proxyFileOutput.push(componentTypeDefinition, '\n');
+    }
+    const final = [imports, typeImports, sourceImports, ...proxyFileOutput];
+    return final.join('\n') + '\n';
+}
+const GENERATED_DTS = 'components.d.ts';
+const IMPORT_TYPES = 'Components';

package/dist/plugin.d.ts

@@ -0,0 +1,4 @@
+import type { Config, OutputTargetCustom } from '@stencil/core/internal';
+import type { OutputTargetAngular } from './types';
+export declare const angularOutputTarget: (outputTarget: OutputTargetAngular) => OutputTargetCustom;
+export declare function normalizeOutputTarget(config: Config, outputTarget: OutputTargetAngular): OutputTargetAngular;

package/dist/plugin.js

@@ -0,0 +1,37 @@
+import { OutputTypes, normalizePath } from './utils';
+import { angularDirectiveProxyOutput } from './output-angular';
+import path from 'path';
+export const angularOutputTarget = (outputTarget) => {
+    let validatedOutputTarget;
+    return {
+        type: 'custom',
+        name: 'angular-library',
+        validate(config) {
+            validatedOutputTarget = normalizeOutputTarget(config, outputTarget);
+        },
+        async generator(config, compilerCtx, buildCtx) {
+            const timespan = buildCtx.createTimeSpan(`generate angular proxies started`, true);
+            await angularDirectiveProxyOutput(compilerCtx, validatedOutputTarget, buildCtx.components, config);
+            timespan.finish(`generate angular proxies finished`);
+        },
+    };
+};
+export function normalizeOutputTarget(config, outputTarget) {
+    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: outputTarget.customElementsDir || 'components', outputType: outputTarget.outputType || OutputTypes.Component });
+    if (config.rootDir == null) {
+        throw new Error('rootDir is not set and it should be set by stencil itself');
+    }
+    if (outputTarget.directivesProxyFile == null) {
+        throw new Error('directivesProxyFile is required. Please set it in the Stencil config.');
+    }
+    if (outputTarget.directivesProxyFile && !path.isAbsolute(outputTarget.directivesProxyFile)) {
+        results.directivesProxyFile = normalizePath(path.join(config.rootDir, outputTarget.directivesProxyFile));
+    }
+    if (outputTarget.directivesArrayFile && !path.isAbsolute(outputTarget.directivesArrayFile)) {
+        results.directivesArrayFile = normalizePath(path.join(config.rootDir, outputTarget.directivesArrayFile));
+    }
+    if (outputTarget.includeSingleComponentAngularModules !== undefined) {
+        throw new Error("The 'includeSingleComponentAngularModules' option has been removed. Please use 'outputType' instead.");
+    }
+    return results;
+}

package/dist/types.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The type of output that can be generated with the Angular output target.
+ * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
+ * - `scam` - Generate a Single Component Angular Module for each component.
+ * - `standalone` - Generate a component with the `standalone` flag set to `true`.
+ */
+export declare type OutputType = 'component' | 'scam' | 'standalone';
+export interface OutputTargetAngular {
+    /**
+     * The package name of the component library.
+     * This is used to generate the import statements.
+     */
+    componentCorePackage: string;
+    /**
+     * The path to the proxy file that will be generated. This can be an absolute path
+     * or a relative path from the root directory of the Stencil library.
+     */
+    directivesProxyFile: string;
+    directivesArrayFile?: string;
+    valueAccessorConfigs?: ValueAccessorConfig[];
+    excludeComponents?: string[];
+    customElementsDir?: string;
+    /**
+     * The type of output that should be generated.
+     * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
+     * - `scam` - Generate a Single Component Angular Module for each component.
+     * - `standalone` - Generate a component with the `standalone` flag set to `true`.
+     */
+    outputType?: OutputType;
+}
+export declare type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';
+export interface ValueAccessorConfig {
+    elementSelectors: string | string[];
+    event: string;
+    targetAttr: string;
+    type: ValueAccessorTypes;
+}
+export interface PackageJSON {
+    types: string;
+}

package/dist/utils.d.ts

@@ -0,0 +1,44 @@
+import { ComponentCompilerEvent, Config } from '@stencil/core/internal';
+import { OutputType, PackageJSON } from './types';
+export declare const OutputTypes: {
+    [key: string]: OutputType;
+};
+export declare const toLowerCase: (str: string) => string;
+export declare const dashToPascalCase: (str: string) => string;
+export declare function sortBy<T>(array: T[], prop: (item: T) => string): T[];
+export declare function normalizePath(str: string): string;
+export declare function relativeImport(pathFrom: string, pathTo: string, ext?: string): string;
+export declare function isRelativePath(path: string): boolean | "";
+export declare function readPackageJson(config: Config, rootDir: string): Promise<PackageJSON>;
+/**
+ * Formats an array of strings to a string of quoted, comma separated values.
+ * @param list The list of unformatted strings to format
+ * @returns The formatted array of strings. (e.g. ['foo', 'bar']) => `'foo', 'bar'`
+ */
+export declare const formatToQuotedList: (list: readonly string[]) => string;
+/**
+ * Creates an import statement for a list of named imports from a module.
+ * @param imports The list of named imports.
+ * @param module The module to import from.
+ *
+ * @returns The import statement as a string.
+ */
+export declare const createImportStatement: (imports: string[], module: string) => string;
+/**
+ * Checks if the outputType is for the custom elements build.
+ * @param outputType The output type.
+ * @returns `true` if the output type is for the custom elements build.
+ */
+export declare const isOutputTypeCustomElementsBuild: (outputType: OutputType) => boolean;
+/**
+ * Creates the collection of import statements for a component based on the component's events type dependencies.
+ * @param componentTagName The tag name of the component (pascal case).
+ * @param events The events compiler metadata.
+ * @param options The options for generating the import statements (e.g. whether to import from the custom elements directory).
+ * @returns The import statements as an array of strings.
+ */
+export declare const createComponentEventTypeImports: (componentTagName: string, events: readonly ComponentCompilerEvent[], options: {
+    componentCorePackage: string;
+    customElementsDir?: string;
+    outputType: OutputType;
+}) => string;

package/dist/utils.js

@@ -0,0 +1,138 @@
+import path from 'path';
+export const OutputTypes = {
+    Component: 'component',
+    Scam: 'scam',
+    Standalone: 'standalone',
+};
+export const toLowerCase = (str) => str.toLowerCase();
+export const dashToPascalCase = (str) => toLowerCase(str)
+    .split('-')
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join('');
+export function sortBy(array, prop) {
+    return array.slice().sort((a, b) => {
+        const nameA = prop(a);
+        const nameB = prop(b);
+        if (nameA < nameB)
+            return -1;
+        if (nameA > nameB)
+            return 1;
+        return 0;
+    });
+}
+export function normalizePath(str) {
+    // Convert Windows backslash paths to slash paths: foo\\bar ➔ foo/bar
+    // https://github.com/sindresorhus/slash MIT
+    // By Sindre Sorhus
+    if (typeof str !== 'string') {
+        throw new Error(`invalid path to normalize`);
+    }
+    str = str.trim();
+    if (EXTENDED_PATH_REGEX.test(str) || NON_ASCII_REGEX.test(str)) {
+        return str;
+    }
+    str = str.replace(SLASH_REGEX, '/');
+    // always remove the trailing /
+    // this makes our file cache look ups consistent
+    if (str.charAt(str.length - 1) === '/') {
+        const colonIndex = str.indexOf(':');
+        if (colonIndex > -1) {
+            if (colonIndex < str.length - 2) {
+                str = str.substring(0, str.length - 1);
+            }
+        }
+        else if (str.length > 1) {
+            str = str.substring(0, str.length - 1);
+        }
+    }
+    return str;
+}
+export function relativeImport(pathFrom, pathTo, ext) {
+    let relativePath = path.relative(path.dirname(pathFrom), path.dirname(pathTo));
+    if (relativePath === '') {
+        relativePath = '.';
+    }
+    else if (relativePath[0] !== '.') {
+        relativePath = './' + relativePath;
+    }
+    return normalizePath(`${relativePath}/${path.basename(pathTo, ext)}`);
+}
+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')));
+    }
+    catch (e) {
+        throw new Error(`Missing "package.json" file for distribution: ${pkgJsonPath}`);
+    }
+    let pkgData;
+    try {
+        pkgData = JSON.parse(pkgJson);
+    }
+    catch (e) {
+        throw new Error(`Error parsing package.json: ${pkgJsonPath}, ${e}`);
+    }
+    return pkgData;
+}
+/**
+ * Formats an array of strings to a string of quoted, comma separated values.
+ * @param list The list of unformatted strings to format
+ * @returns The formatted array of strings. (e.g. ['foo', 'bar']) => `'foo', 'bar'`
+ */
+export const formatToQuotedList = (list) => list.map((item) => `'${item}'`).join(', ');
+/**
+ * Creates an import statement for a list of named imports from a module.
+ * @param imports The list of named imports.
+ * @param module The module to import from.
+ *
+ * @returns The import statement as a string.
+ */
+export const createImportStatement = (imports, module) => {
+    if (imports.length === 0) {
+        return '';
+    }
+    return `import { ${imports.join(', ')} } from '${module}';`;
+};
+/**
+ * Checks if the outputType is for the custom elements build.
+ * @param outputType The output type.
+ * @returns `true` if the output type is for the custom elements build.
+ */
+export const isOutputTypeCustomElementsBuild = (outputType) => {
+    return outputType === OutputTypes.Standalone || outputType === OutputTypes.Scam;
+};
+/**
+ * Creates the collection of import statements for a component based on the component's events type dependencies.
+ * @param componentTagName The tag name of the component (pascal case).
+ * @param events The events compiler metadata.
+ * @param options The options for generating the import statements (e.g. whether to import from the custom elements directory).
+ * @returns The import statements as an array of strings.
+ */
+export const createComponentEventTypeImports = (componentTagName, events, options) => {
+    const { componentCorePackage, customElementsDir } = options;
+    const imports = [];
+    const namedImports = new Set();
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
+    const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
+    events.forEach((event) => {
+        Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
+            if (refObject.location === 'local' || refObject.location === 'import') {
+                const newTypeName = `I${componentTagName}${typeName}`;
+                // Prevents duplicate imports for the same type.
+                if (!namedImports.has(newTypeName)) {
+                    imports.push(`import type { ${typeName} as ${newTypeName} } from '${importPathName}';`);
+                    namedImports.add(newTypeName);
+                }
+            }
+        });
+    });
+    return imports.join('\n');
+};
+const EXTENDED_PATH_REGEX = /^\\\\\?\\/;
+const NON_ASCII_REGEX = /[^\x00-\x80]+/;
+const SLASH_REGEX = /\\/g;

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@stencil/angular-output-target",
+  "version": "0.0.0-dev.11698339436.1d39048b",
+  "description": "Angular output target for @stencil/core components.",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "resources/",
+    "angular-component-lib/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "prebuild": "rimraf ./dist && npm run test",
+    "build": "tsc && npm run rollup",
+    "watch": "tsc --watch",
+    "rollup": "rollup -c",
+    "version": "npm run build",
+    "prettier": "npm run prettier.base -- --write",
+    "prettier.base": "prettier \"./({angular-component-lib,src,test,__tests__}/**/*.{ts,tsx,js,jsx})|*.{ts,tsx,js,jsx}\"",
+    "prettier.dry-run": "npm run prettier.base -- --list-different",
+    "release": "np",
+    "test": "jest --passWithNoTests",
+    "test.watch": "jest --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ionic-team/stencil-ds-output-targets.git"
+  },
+  "author": "Ionic Team",
+  "homepage": "https://stenciljs.com/",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues"
+  },
+  "devDependencies": {
+    "@angular/core": "8.2.14",
+    "@angular/forms": "8.2.14"
+  },
+  "peerDependencies": {
+    "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.(js|ts|tsx)$": "<rootDir>/test/jest.preprocessor.js"
+    },
+    "testRegex": "(\\.(test|spec))\\.(ts?|tsx?|jsx?)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "json",
+      "jsx"
+    ],
+    "testURL": "http://localhost"
+  },
+  "gitHead": "d39048b3fa0fd6757b016ff0c7a23e76c4e2a438",
+  "volta": {
+    "extends": "../../package.json"
+  }
+}

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

@@ -0,0 +1,27 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: '<VALUE_ACCESSOR_SELECTORS>',
+  host: {
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: BooleanValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class BooleanValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+  writeValue(value: any) {
+    this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+  }
+}

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

@@ -0,0 +1,29 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: '<VALUE_ACCESSOR_SELECTORS>',
+  host: {
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: NumericValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class NumericValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+  registerOnChange(fn: (_: number | null) => void) {
+    super.registerOnChange(value => {
+      fn(value === '' ? null : parseFloat(value));
+    });
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: '<VALUE_ACCESSOR_SELECTORS>',
+  host: {
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: RadioValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class RadioValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: '<VALUE_ACCESSOR_SELECTORS>',
+  host: {
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SelectValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class SelectValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: '<VALUE_ACCESSOR_SELECTORS>',
+  host: {
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TextValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class TextValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}

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

@@ -0,0 +1,39 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+@Directive({})
+export class ValueAccessor implements ControlValueAccessor {
+
+  private onChange: (value: any) => void = () => {/**/};
+  private onTouched: () => void = () => {/**/};
+  protected lastValue: any;
+
+  constructor(protected el: ElementRef) {}
+
+  writeValue(value: any) {
+    this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
+  }
+
+  handleChangeEvent(value: any) {
+    if (value !== this.lastValue) {
+      this.lastValue = value;
+      this.onChange(value);
+    }
+  }
+
+  @HostListener('focusout')
+  _handleBlurEvent() {
+    this.onTouched();
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+}