ng-dynaform/src/app/_mock/testfields.v1.ts

// TESTS: Generation of Modeled MetaData using field models

import { ValueTransformer } from './../dynaform/interfaces';
import * as fmd from './../dynaform/models'; // fmd = Form Meta Data

// ---------------------------------------------------------------------------------------------------------------------
// Native

const basicTextField = new fmd.TextField({
	name: 'basicTextField',
	label: 'Field One',
	placeholder: 'Type a value here'
});

const styledTextField = new fmd.TextField({
	name: 'styledTextField',
	placeholder: 'With a DOM id and CSS classes applied',
	class: ['red', 'bgPaleBlue'],
	id: 'yoyo'
});

const textareaField = new fmd.TextareaField({
	name: 'textareaField',
	placeholder: 'Type your long-winded comments here'
});

const passwordField = new fmd.PasswordField({
	name: 'passwordField',
	placeholder: 'It\'s a secret'
});

const selectField = new fmd.SelectField({
	name: 'selectField',
	options: ['', 'Apples', 'Oranges', 'Pears', 'Gorgonzola']
});

const radioField = new fmd.RadioField({
	name: 'radioField',
	options: ['Tea', 'Coffee', 'Cocoa', 'Yerba Maté']
});

const disabledTextField = new fmd.TextField({
	name: 'disabledTextField',
	placeholder: 'You can\'t touch this',
	isDisabled: true
});

const radioFieldHorizontal = new fmd.RadioField({
	name: 'radioFieldHorizontal',
	options: ['Fish', 'Fowl', 'Neither'],
		horizontal: true
});


// ---------------------------------------------------------------------------------------------------------------------
// Custom

const checkbutton = new fmd.CheckbuttonField({
	name: 'checkbutton',
	value: '456'
});

const checkbutton2 = new fmd.CheckbuttonField({
	name: 'checkbutton2',
	value: 'Yowsa'
});

const modifiers = ['Matches', 'Starts With', 'Contains'];
const transformerFunctions: ValueTransformer = {
	inputFn: val => {
		let modifier = 'Starts With';
		if (/^%.*?%$/.test(val)) {
			modifier = 'Contains';
		} else if (/^[^%].*?[^%]$/.test(val)) {
			modifier = 'Matches';
		} else if (/^%.*/.test(val)) {
			modifier = 'Starts With';
		}
		const transformedVal = val.replace(/%/g, '').trim();
		return { modifier: modifier, value: transformedVal };
	},
	outputFn: (mod, val) => {
		let transformedValue;
		switch (mod) {
			case 'Starts With':
				transformedValue = `%${val}`;
				break;
			case 'Contains':
				transformedValue = `%${val}%`;
				break;
			case 'Matches':
			default:
				transformedValue = val;
				break;
		}
		return transformedValue;
	}
};
const dropdownModifiedInput = new fmd.DropdownModifiedInputField({
	name: 'dropdownModifiedInput',
	value: 'lovely',
	modifiers,
	transform: transformerFunctions
});

const checkbuttonGroup = new fmd.CheckbuttonGroup({
	name: 'checkbuttonGroup',
	firstEnablesRest: true,
	meta: [{name: 'iMaskTheOthers'}, {name: 'groupMemberTwo'}, {name: 'groupMemberThree'}]
});

// ---------------------------------------------------------------------------------------------------------------------
// Kendo

const timepicker = new fmd.TimepickerField({
	name: 'timepicker'
});

const datepicker = new fmd.DatepickerField({
	name: 'datepicker'
});

// ---------------------------------------------------------------------------------------------------------------------
// Container

const container = new fmd.Container({
	// basicTextField,
	// styledTextField,
	// textareaField,
	// passwordField,
	// selectField,
	// radioField,
	// disabledTextField,
	// radioFieldHorizontal,
	checkbutton2,
	// dropdownModifiedInput,
	// checkbuttonGroup,
	// timepicker,
	// datepicker
});

// ---------------------------------------------------------------------------------------------------------------------

export const formMetaDataObj = {
	basicTextField,
	// styledTextField,
	// textareaField,
	// passwordField,
	// selectField,
	// radioField,
	// disabledTextField,
	// radioFieldHorizontal,
	checkbutton,
	// dropdownModifiedInput,
	// checkbuttonGroup,
	// timepicker,
	// datepicker,
	container
};

console.log(formMetaDataObj);