Core refactor, first step

client/auth/src/auth.js

@@ -1,3 +1,2 @@
-import './ngModule';
+import './module';
-import './config';
 import './login/login';

client/auth/src/login/login.js

@@ -1,4 +1,4 @@
-import ngModule from '../ngModule';
+import ngModule from '../module';
 import './style.scss';
 
 export default class Controller {

client/auth/src/module.js

@@ -1,4 +1,8 @@
-import ngModule from './ngModule';
+import {ng} from 'vendor';
+import 'core';
+
+let ngModule = ng.module('vnAuth', ['vnCore']);
+export default ngModule;
 
 config.$inject = ['$translatePartialLoaderProvider', '$httpProvider'];
 export function config($translatePartialLoaderProvider, $httpProvider) {

client/auth/src/ngModule.js

@@ -1,5 +0,0 @@
-import {ng} from 'vendor';
-import 'core';
-
-let ngModule = ng.module('vnAuth', ['vnCore']);
-export default ngModule;

client/client/src/credit-list/credit-list.js

@@ -1,5 +1,5 @@
 import ngModule from '../module';
-import FilterClientList from '../filterClientList';
+import FilterClientList from '../filter-client-list';
 
 ngModule.component('vnClientCreditList', {
     template: require('./credit-list.html'),

client/client/src/filter-client-list.js

@@ -1,4 +1,5 @@
-import FilterList from '../../core/src/lib/filterList';
+import FilterList from 'core/src/lib/filter-list';
+
 export default class FilterClientList extends FilterList {
     constructor($scope, $timeout, $state) {
         super($scope, $timeout, $state);

client/client/src/greuge-list/greuge-list.js

@@ -1,5 +1,5 @@
 import ngModule from '../module';
-import FilterClientList from '../filterClientList';
+import FilterClientList from '../filter-client-list';
 
 ngModule.component('vnClientGreugeList', {
     template: require('./greuge-list.html'),

client/client/src/mandate/mandate.js

@@ -1,5 +1,5 @@
 import ngModule from '../module';
-import FilterClientList from '../filterClientList';
+import FilterClientList from '../filter-client-list';
 
 ngModule.component('vnClientMandate', {
     template: require('./mandate.html'),

client/core/src/button/button.js

@@ -1,18 +0,0 @@
-import {module as _module} from '../module';
-import * as resolveFactory from '../lib/resolveDefaultComponents';
-import * as util from '../lib/util';
-
-const _NAME = 'button';
-export const NAME = util.getName(_NAME);
-
-directive.$inject = [resolveFactory.NAME];
-export function directive(resolve) {
-    return {
-        restrict: 'E',
-        template: function(_, attr) {
-            return resolve.getTemplate(_NAME, attr);
-        }
-    };
-}
-
-_module.directive(NAME, directive);

client/core/src/button/button.mdl.js

@@ -1,21 +0,0 @@
-import {module as _module} from '../module';
-import * as util from '../lib/util';
-import * as constant from '../lib/constants';
-import template from './button.mdl.html';
-
-const _NAME = 'button';
-export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
-
-export function factory() {
-    return {
-        template: template,
-        default: {
-            label: 'Submit',
-            className: 'mdl-button mdl-js-button mdl-button--raised mdl-button--colored',
-            enabled: 'true',
-            typeName: 'button'
-        }
-    };
-}
-
-_module.factory(NAME, factory);

client/core/src/card/card.js

@@ -1,21 +0,0 @@
-import {module as _module} from '../module';
-import * as resolveFactory from '../lib/resolveDefaultComponents';
-import * as util from '../lib/util';
-require('./style.css');
-
-const _NAME = 'card';
-export const NAME = util.getName(_NAME);
-
-directive.$inject = [resolveFactory.NAME];
-export function directive(resolve) {
-    return {
-        restrict: 'E',
-        transclude: true,
-        template: function(_, attr) {
-            return resolve.getTemplate(_NAME, attr);
-        }
-    };
-}
-
-_module.directive(NAME, directive);
-

client/core/src/card/card.mdl.js

@@ -1,16 +0,0 @@
-import {module as _module} from '../module';
-import * as util from '../lib/util';
-import * as constant from '../lib/constants';
-import template from './card.mdl.html';
-
-const _NAME = 'card';
-
-export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
-
-export function factory() {
-    return {
-        template: template
-    };
-}
-
-_module.factory(NAME, factory);

client/core/src/check/check.js

@@ -1,29 +0,0 @@
-import {module as _module} from '../module';
-import * as resolveFactory from '../lib/resolveDefaultComponents';
-import * as normalizerFactory from '../lib/inputAttrsNormalizer';
-import * as util from '../lib/util';
-import './style.css';
-
-const _NAME = 'check';
-export const NAME = util.getName(_NAME);
-
-directive.$inject = [resolveFactory.NAME, normalizerFactory.NAME];
-export function directive(resolve, normalizer) {
-    return {
-        restrict: 'E',
-        template: function(_, attrs) {
-            normalizer.normalize(attrs);
-            return resolve.getTemplate(_NAME, attrs);
-        },
-        link: function(scope, element, attrs) {
-            scope.$watch(attrs.model, () => {
-                let mdlField = element[0].firstChild.MaterialCheckbox;
-                if (mdlField)
-                    mdlField.updateClasses_();
-            });
-            componentHandler.upgradeElement(element[0].firstChild);
-        }
-    };
-}
-
-_module.directive(NAME, directive);

client/core/src/check/check.mdl.js

@@ -1,21 +0,0 @@
-import {module as _module} from '../module';
-import * as util from '../lib/util';
-import * as constant from '../lib/constants';
-import template from './check.mdl.html';
-
-const _NAME = 'check';
-const DEFAULT_CLASS = 'mdl-checkbox__input';
-
-export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
-
-export function factory() {
-    return {
-        template: template,
-        default: {
-            enabled: 'true',
-            className: DEFAULT_CLASS
-        }
-    };
-}
-
-_module.factory(NAME, factory);

client/core/src/combo/combo.js

@@ -1,28 +0,0 @@
-import {module as _module} from '../module';
-import * as resolveFactory from '../lib/resolveDefaultComponents';
-import * as normalizerFactory from '../lib/inputAttrsNormalizer';
-import * as util from '../lib/util';
-
-const _NAME = 'combo';
-export const NAME = util.getName(_NAME);
-
-directive.$inject = [resolveFactory.NAME, normalizerFactory.NAME];
-export function directive(resolve, normalizer) {
-    return {
-        restrict: 'E',
-        transclude: true,
-        template: function(_, attrs) {
-            normalizer.normalize(attrs);
-            return resolve.getTemplate(_NAME, attrs);
-        },
-        link: function(scope, element, attrs) {
-            scope.$watch(attrs.model, () => {
-                let mdlField = element[0].firstChild.MaterialTextfield;
-                if (mdlField)
-                    mdlField.updateClasses_();
-            });
-            componentHandler.upgradeElement(element[0].firstChild);
-        }
-    };
-}
-_module.directive(NAME, directive);

client/core/src/combo/combo.mdl.js

@@ -1,14 +0,0 @@
-import {module} from '../module';
-import template from './combo.mdl.html';
-
-export const NAME = 'vnComboMdlFactory';
-export function factory() {
-    return {
-        template: template,
-        default: {
-            label: 'Label',
-            enabled: 'enabled'
-        }
-    };
-}
-module.factory(NAME, factory);

client/core/src/components.js

@@ -1,46 +0,0 @@
-import './mdl-override.css';
-import './styles/fonts/mdi-override.css';
-
-import './textfield/textfield';
-import './watcher/watcher';
-import './paging/paging';
-import './icon/icon';
-import './autocomplete/autocomplete';
-import './popover/popover';
-import './dialog/dialog';
-
-import './confirm/confirm';
-import './title/title';
-import './subtitle/subtitle';
-import './spinner/spinner';
-import './snackbar/snackbar';
-import './tooltip/tooltip';
-import './icon-menu/icon-menu';
-import './drop-down/drop-down';
-import './column-header/column-header';
-import './grid-header/grid-header';
-import './multi-check/multi-check';
-import './datePicker/datePicker';
-
-export {NAME as BUTTON, directive as ButtonDirective} from './button/button';
-export {NAME as BUTTON_MDL, factory as buttonMdl} from './button/button.mdl';
-export {NAME as CHECK, directive as CheckDirective} from './check/check';
-export {NAME as CHECK_MDL, factory as checknMdl} from './check/check.mdl';
-export {NAME as RADIO, directive as RadioDirective} from './radio/radio';
-export {NAME as RADIO_MDL, factory as radionMdl} from './radio/radio.mdl';
-export {NAME as TEXTAREA, directive as TextareaDirective} from './textarea/textarea';
-export {NAME as TEXTAREA_MDL, factory as textareaMdl} from './textarea/textarea.mdl';
-export {NAME as LABEL, directive as LabelDirective} from './label/label';
-export {NAME as LABEL_MDL, factory as labelMdl} from './label/label.mdl';
-export {NAME as ICON_BUTTON, directive as IconButtonDirective} from './icon-button/icon-button';
-
-export {NAME as SUBMIT, directive as SubmitDirective} from './submit/submit';
-export {NAME as SUBMIT_MDL, factory as submitMdl} from './submit/submit.mdl';
-export {NAME as COMBO, directive as ComboDirective} from './combo/combo';
-export {NAME as COMBO_MDL, factory as comboMdl} from './combo/combo.mdl';
-export {NAME as CARD, directive as CardDirective} from './card/card';
-export {NAME as CARD_MDL, factory as cardMdl} from './card/card.mdl';
-export {NAME as SWITCH, directive as SwitchDirective} from './switch/switch';
-export {NAME as SWITCH_MDL, factory as switchdMdl} from './switch/switch.mdl';
-export {NAME as FLOATBUTTON, directive as FloatButtonDirective} from './floatbutton/floatbutton';
-export {NAME as FLOATBUTTON_MDL, factory as floatButtondMdl} from './floatbutton/floatbutton.mdl';

client/core/src/components/autocomplete/autocomplete.js

@@ -1,6 +1,6 @@
-import {module} from '../module';
+import ngModule from '../../module';
-import Component from '../lib/component';
+import Component from '../../lib/component';
-import copyObject from '../lib/copy';
+import copyObject from '../../lib/copy';
 import './style.scss';
 
 class Autocomplete extends Component {
@@ -357,7 +357,7 @@ class Autocomplete extends Component {
 }
 Autocomplete.$inject = ['$element', '$scope', '$http', '$timeout', '$filter'];
 
-module.component('vnAutocomplete', {
+ngModule.component('vnAutocomplete', {
     template: require('./autocomplete.html'),
     controller: Autocomplete,
     bindings: {

client/core/src/components/button/button.js

@@ -0,0 +1,17 @@
+import ngModule from '../../module';
+import template from './button.html';
+
+directive.$inject = ['vnTemplate'];
+export default function directive(vnTemplate) {
+    return {
+        restrict: 'E',
+        template: (_, $attrs) =>
+            vnTemplate.get(template, $attrs, {
+                label: 'Submit',
+                className: 'mdl-button mdl-js-button mdl-button--raised mdl-button--colored',
+                enabled: 'true',
+                typeName: 'button'
+            })
+    };
+}
+ngModule.directive('vnButton', directive);

client/core/src/components/card/card.js

@@ -0,0 +1,14 @@
+import ngModule from '../../module';
+import template from './card.html';
+require('./style.css');
+
+directive.$inject = ['vnTemplate'];
+export default function directive(vnTemplate) {
+    return {
+        restrict: 'E',
+        transclude: true,
+        template: (_, $attrs) =>
+            vnTemplate.get(template, $attrs)
+    };
+}
+ngModule.directive('vnCard', directive);

client/core/src/components/check/check.js

@@ -0,0 +1,24 @@
+import ngModule from '../../module';
+import template from './check.html';
+import './style.css';
+
+directive.$inject = ['vnTemplate'];
+export default function directive(vnTemplate) {
+    return {
+        restrict: 'E',
+        template: (_, $attrs) =>
+            vnTemplate.getNormalized(template, $attrs, {
+                enabled: 'true',
+                className: 'mdl-checkbox__input'
+            }),
+        link: function(scope, element, attrs) {
+            scope.$watch(attrs.model, () => {
+                let mdlField = element[0].firstChild.MaterialCheckbox;
+                if (mdlField)
+                    mdlField.updateClasses_();
+            });
+            componentHandler.upgradeElement(element[0].firstChild);
+        }
+    };
+}
+ngModule.directive('vnCheck', directive);

client/core/src/components/column-header/column-header.js

@@ -1,4 +1,4 @@
-import {module} from '../module';
+import ngModule from '../../module';
 
 export default class ColumnHeader {
     constructor($attrs) {
@@ -40,7 +40,7 @@ export default class ColumnHeader {
 }
 ColumnHeader.$inject = ['$attrs'];
 
-module.component('vnColumnHeader', {
+ngModule.component('vnColumnHeader', {
     template: require('./column-header.html'),
     bindings: {
         field: '@?',

client/core/src/components/combo/combo.html

@@ -1,5 +1,11 @@
 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-	<select class="mdl-textfield__input" class="*[className]*" name="*[name]*" ng-model="*[model]*" rule="*[rule]*" *[enabled]* ng-transclude>
+	<select
+		class="*[className]*"
+		name="*[name]*"
+		ng-model="*[model]*"
+		rule="*[rule]*"
+		*[enabled]*
+		ng-transclude>
 	</select>
 	<label class="mdl-textfield__label" translate>*[label]*</label>
 </div>

client/core/src/components/combo/combo.js

@@ -0,0 +1,25 @@
+import ngModule from '../../module';
+import template from './combo.html';
+
+directive.$inject = ['vnTemplate'];
+export function directive(vnTemplate) {
+    return {
+        restrict: 'E',
+        transclude: true,
+        template: (_, $attrs) =>
+            vnTemplate.getNormalized(template, $attrs, {
+                label: 'Label',
+                enabled: 'enabled',
+                class: 'mdl-textfield__input'
+            }),
+        link: function(scope, element, attrs) {
+            scope.$watch(attrs.model, () => {
+                let mdlField = element[0].firstChild.MaterialTextfield;
+                if (mdlField)
+                    mdlField.updateClasses_();
+            });
+            componentHandler.upgradeElement(element[0].firstChild);
+        }
+    };
+}
+ngModule.directive('vnCombo', directive);

client/core/src/components/confirm/confirm.js

@@ -1,11 +1,11 @@
-import {module} from '../module';
+import ngModule from '../../module';
 import Dialog from '../dialog/dialog';
 import './style.css';
 
 export default class Confirm extends Dialog {}
 Dialog.$inject = ['$element'];
 
-module.component('vnConfirm', {
+ngModule.component('vnConfirm', {
     template: require('./confirm.html'),
     bindings: {
         onResponse: '&',

client/core/src/components/date-picker/date-picker.html

@@ -5,8 +5,7 @@
     ng-blur="$ctrl.hasFocus = false"
     ng-mouseenter="$ctrl.hasMouseIn = true"
 	ng-mouseleave="$ctrl.hasMouseIn = false"
-	ng-click="$ctrl.onClick()"
+	ng-click="$ctrl.onClick()">
->
     <input type="text"
 		class="mdl-textfield__input"
         name="{{::$ctrl.name}}" 
@@ -15,8 +14,18 @@
 		rule="{{::$ctrl.rule}}"/>
 		
 	<div class="mdl-chip__action">
-		<i class="material-icons" ng-if="$ctrl.isTimePicker" ng-click="$ctrl.vp.open()">query_builder</i>
+		<i
-		<i class="material-icons pointer" ng-show="$ctrl.modelView&&($ctrl.hasFocus||$ctrl.hasMouseIn)" ng-click="$ctrl.onClear()">clear</i>
+			class="material-icons"
+			ng-if="$ctrl.isTimePicker"
+			ng-click="$ctrl.vp.open()">
+			query_builder
+		</i>
+		<i
+			class="material-icons pointer"
+			ng-show="$ctrl.modelView&&($ctrl.hasFocus||$ctrl.hasMouseIn)"
+			ng-click="$ctrl.onClear()">
+			clear
+		</i>
 	</div>
 	<label class="mdl-textfield__label" translate>{{$ctrl.label}}</label>
 </div>

client/core/src/components/date-picker/date-picker.js

@@ -1,5 +1,5 @@
-import {module} from '../module';
+import ngModule from '../../module';
-import Component from '../lib/component';
+import Component from '../../lib/component';
 import Flatpickr from 'vendor/src/flatpickr';
 import './style.scss';
 
@@ -238,8 +238,8 @@ class DatePicker extends Component {
 }
 DatePicker.$inject = ['$element', '$translate', '$filter', '$timeout', '$attrs'];
 
-module.component('vnDatePicker', {
+ngModule.component('vnDatePicker', {
-    template: require('./datePicker.html'),
+    template: require('./date-picker.html'),
     bindings: {
         model: '=',
         label: '@?',

client/core/src/components/date-picker/date-picker.spec.js

@@ -1,4 +1,4 @@
-import './datePicker.js';
+import './date-picker.js';
 
 describe('Component vnDatePicker', () => {
     let $componentController;

client/core/src/components/dialog/dialog.js

@@ -1,5 +1,5 @@
-import {module} from '../module';
+import ngModule from '../../module';
-import Component from '../lib/component';
+import Component from '../../lib/component';
 import './style.scss';
 
 /**
@@ -8,6 +8,8 @@ import './style.scss';
 export default class Dialog extends Component {
     /**
      * Contructor.
+     *
+     * @param {HTMLElement} $element The HTML element object
      */
     constructor($element) {
         super($element);
@@ -100,7 +102,7 @@ export default class Dialog extends Component {
 }
 Dialog.$inject = ['$element'];
 
-module.component('vnDialog', {
+ngModule.component('vnDialog', {
     template: require('./dialog.html'),
     transclude: {
         tplBody: 'tplBody',

client/core/src/components/drop-down/drop-down.js

@@ -1,6 +1,6 @@
-import {module} from '../module';
+import ngModule from '../../module';
+import validKey from '../../lib/key-codes';
 import './style.scss';
-import validKey from '../lib/keyCodes';
 
 export default class DropDown {
     constructor($element, $filter, $timeout) {
@@ -264,7 +264,7 @@ export default class DropDown {
 
 DropDown.$inject = ['$element', '$filter', '$timeout'];
 
-module.component('vnDropDown', {
+ngModule.component('vnDropDown', {
     template: require('./drop-down.html'),
     controller: DropDown,
     bindings: {

client/core/src/components/float-button/float-button.js

@@ -0,0 +1,14 @@
+import ngModule from '../../module';
+import template from './float-button.html';
+
+directive.$inject = ['vnTemplate'];
+export function directive(vnTemplate) {
+    return {
+        restrict: 'E',
+        template: (_, $attrs) =>
+            vnTemplate.get(template, $attrs, {
+                className: 'mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored'
+            })
+    };
+}
+ngModule.directive('vnFloatButton', directive);

client/core/src/components/grid-header/grid-header.js

@@ -1,4 +1,4 @@
-import {module} from '../module';
+import ngModule from '../../module';
 import './style.scss';
 
 export default class GridHeader {
@@ -17,7 +17,7 @@ export default class GridHeader {
 
 }
 
-module.component('vnGridHeader', {
+ngModule.component('vnGridHeader', {
     template: require('./grid-header.html'),
     transclude: true,
     bindings: {

client/core/src/components/icon-button/icon-button.html

@@ -0,0 +1,5 @@
+<button
+    class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-square {{::$ctrl.className}}"
+    {{$ctrl.enabled}}>
+    <vn-icon icon="{{::$ctrl.icon}}"></vn-icon>{{::$ctrl.label}}
+</button>

client/core/src/components/icon-button/icon-button.js

@@ -1,6 +1,6 @@
-import {module as _module} from '../module';
+import ngModule from '../../module';
 
-_module.component('vnIconButton', {
+ngModule.component('vnIconButton', {
     template: require('./icon-button.html'),
     bindings: {
         icon: '@',

client/core/src/components/icon-menu/icon-menu.js

@@ -1,4 +1,4 @@
-import {module} from '../module';
+import ngModule from '../../module';
 import './style.scss';
 
 export default class IconMenu {
@@ -116,10 +116,9 @@ export default class IconMenu {
         this.$element.unbind('focusout');
     }
 }
-
 IconMenu.$inject = ['$element', '$http', '$timeout'];
 
-module.component('vnIconMenu', {
+ngModule.component('vnIconMenu', {
     template: require('./icon-menu.html'),
     bindings: {
         url: '@?',

client/core/src/components/icon/icon.js

@@ -1,7 +1,7 @@
-import {module} from '../module';
+import ngModule from '../../module';
 import './style.css';
 
-module.component('vnIcon', {
+ngModule.component('vnIcon', {
     template: '<i class="material-icons">{{::$ctrl.icon}}</i>',
     bindings: {
         icon: '@'

client/core/src/components/index.js

@@ -0,0 +1,30 @@
+import './textfield/textfield';
+import './watcher/watcher';
+import './paging/paging';
+import './icon/icon';
+import './autocomplete/autocomplete';
+import './popover/popover';
+import './dialog/dialog';
+import './confirm/confirm';
+import './title/title';
+import './subtitle/subtitle';
+import './spinner/spinner';
+import './snackbar/snackbar';
+import './tooltip/tooltip';
+import './icon-menu/icon-menu';
+import './drop-down/drop-down';
+import './column-header/column-header';
+import './grid-header/grid-header';
+import './multi-check/multi-check';
+import './date-picker/date-picker';
+import './button/button';
+import './check/check';
+import './radio/radio';
+import './textarea/textarea';
+import './label/label';
+import './icon-button/icon-button';
+import './submit/submit';
+import './combo/combo';
+import './card/card';
+import './switch/switch';
+import './float-button/float-button';

client/core/src/components/label/label.js

@@ -0,0 +1,12 @@
+import ngModule from '../../module';
+import template from './label.html';
+
+directive.$inject = ['vnTemplate'];
+export default function directive(vnTemplate) {
+    return {
+        restrict: 'E',
+        template: (_, $attrs) =>
+            vnTemplate.get(template, $attrs)
+    };
+}
+ngModule.directive('vnLabel', directive);

client/core/src/components/multi-check/multi-check.js

@@ -1,5 +1,6 @@
-import {module} from '../module';
+import ngModule from '../../module';
 import './multi-check.scss';
+
 /**
  * Draw checkbox with a drop-down and multi options
  * @param {SmallInt} checkAll Primary input-check state: 0 -> uncheck, 1 -> checked, 2 -> indeterminate checked
@@ -90,10 +91,9 @@ export default class MultiCheck {
         }, 200);
     }
 }
-
 MultiCheck.$inject = ['$timeout'];
 
-module.component('vnMultiCheck', {
+ngModule.component('vnMultiCheck', {
     template: require('./multi-check.html'),
     controller: MultiCheck,
     bindings: {

client/core/src/components/paging/paging.js

@@ -1,4 +1,4 @@
-import {module} from '../module';
+import ngModule from '../../module';
 import './style.scss';
 
 export default class Paging {
@@ -45,11 +45,9 @@ export default class Paging {
         }
     }
 }
-
 Paging.$inject = ['$http', '$scope'];
 
-export const NAME = 'vnPaging';
+ngModule.component('vnPaging', {
-export const COMPONENT = {
     template: require('./paging.html'),
     bindings: {
         index: '<',
@@ -57,6 +55,4 @@ export const COMPONENT = {
         total: '<'
     },
     controller: Paging
-};
+});
-
-module.component(NAME, COMPONENT);

client/core/src/components/popover/popover.js

@@ -1,4 +1,4 @@
-import {module} from '../module';
+import ngModule from '../../module';
 import './style.css';
 
 directive.$inject = ['vnPopover'];
@@ -13,8 +13,7 @@ export function directive(vnPopover) {
         }
     };
 }
-
+ngModule.directive('vnPopover', directive);
-module.directive('vnPopover', directive);
 
 export class Popover {
     constructor($document, $compile, $transitions) {
@@ -201,7 +200,6 @@ export class Popover {
         this.lastTarget = event.target;
     }
 }
-
 Popover.$inject = ['$document', '$compile', '$transitions'];
 
-module.service('vnPopover', Popover);
+ngModule.service('vnPopover', Popover);

client/core/src/components/radio/radio.html

@@ -0,0 +1,7 @@
+<input
+    type="radio"
+    class="*[className]*"
+    name="*[name]*"
+    ng-model="*[model]*.*[name]*"
+    *[enabled]*>
+<span class="mdl-radio__label" translate>*[text]*</span>  

client/core/src/components/radio/radio.js

@@ -0,0 +1,15 @@
+import ngModule from '../../module';
+import template from './radio.html';
+
+directive.$inject = ['vnTemplate'];
+export default function directive(vnTemplate) {
+    return {
+        restrict: 'E',
+        template: (_, $attrs) =>
+            vnTemplate.get(template, $attrs, {
+                enabled: 'true',
+                className: 'mdl-radio mdl-js-radio mdl-js-ripple-effect'
+            })
+    };
+}
+ngModule.directive('vnRadio', directive);

client/core/src/components/snackbar/snackbar.js

@@ -1,4 +1,4 @@
-import {module} from '../module';
+import ngModule from '../../module';
 
 /**
  * A simple component to show non-obstructive notifications to the user.
@@ -19,7 +19,7 @@ export default class Controller {
 }
 Controller.$inject = ['$element'];
 
-module.component('vnSnackbar', {
+ngModule.component('vnSnackbar', {
     template: require('./snackbar.html'),
     controller: Controller
 });

client/core/src/components/spinner/spinner.js

@@ -1,5 +1,5 @@
-import {module} from '../module';
+import ngModule from '../../module';
-import Component from '../lib/component';
+import Component from '../../lib/component';
 import './style.css';
 
 /**
@@ -55,4 +55,4 @@ export const component = {
     },
     controller: Spinner
 };
-module.component('vnSpinner', component);
+ngModule.component('vnSpinner', component);

client/core/src/components/submit/submit.html

@@ -0,0 +1,7 @@
+<input
+    type="submit"
+    class="*[className]*"
+    translate-attr="{value: '*[label]*'}"
+    value="*[label]*"
+    *[enabled]*>
+</input>

client/core/src/components/submit/submit.js

@@ -0,0 +1,16 @@
+import ngModule from '../../module';
+import template from './submit.html';
+
+directive.$inject = ['vnTemplate'];
+export default function directive(vnTemplate) {
+    return {
+        restrict: 'E',
+        template: (_, $attrs) =>
+            vnTemplate.get(template, $attrs, {
+                label: 'Submit',
+                className: 'mdl-button mdl-js-button mdl-button--raised mdl-button--colored',
+                enabled: 'true'
+            })
+    };
+}
+ngModule.directive('vnSubmit', directive);

client/core/src/components/subtitle/subtitle.js

@@ -0,0 +1,6 @@
+import ngModule from '../../module';
+
+ngModule.component('vnSubtitle', {
+    template: require('./subtitle.html'),
+    transclude: true
+});

client/core/src/components/switch/switch.js

@@ -0,0 +1,26 @@
+import ngModule from '../../module';
+
+directive.$inject = ['vnTemplate'];
+export default function directive(vnTemplate) {
+    return {
+        restrict: 'E',
+        template: (_, $attrs) =>
+            vnTemplate.getNormalized(template, $attrs, {
+                className: 'mdl-switch__input',
+                label: ''
+            }),
+        link: function(scope, element, attrs) {
+            scope.$watch(attrs.model, () => {
+                let mdlField = element[0].firstChild.MaterialSwitch;
+                if (mdlField)
+                    mdlField.updateClasses_();
+            });
+            componentHandler.upgradeElement(element[0].firstChild);
+        }
+    };
+}
+ngModule.directive('vnSwitch', directive);
+
+export function factory() {
+}
+ngModule.factory('vnSwitchMdlFactory', factory);

client/core/src/components/textarea/textarea.html

@@ -0,0 +1,10 @@
+<div class="mdl-textfield mdl-js-textfield">
+    <textarea
+        class="mdl-textfield__input"
+        type="text" rows= "*[rows]*"
+        ng-model="*[model]*"
+        rule="*[rule]*"
+        *[enabled]*>
+    </textarea>
+    <label class="mdl-textfield__label" translate>*[label]*</label>
+</div>

client/core/src/components/textarea/textarea.js

@@ -0,0 +1,23 @@
+import ngModule from '../../module';
+import template from './textarea.html';
+
+directive.$inject = ['vnTemplate'];
+export function directive(vnTemplate) {
+    return {
+        restrict: 'E',
+        template: (_, $attrs) =>
+            vnTemplate.getNormalized(template, $attrs, {
+                label: '',
+                rows: 3
+            }),
+        link: function(scope, element, attrs) {
+            scope.$watch(attrs.model, () => {
+                let mdlField = element[0].firstChild.MaterialTextfield;
+                if (mdlField)
+                    mdlField.updateClasses_();
+            });
+            componentHandler.upgradeElement(element[0].firstChild);
+        }
+    };
+}
+ngModule.directive('vnTextarea', directive);

client/core/src/components/textfield/textfield.js

@@ -1,12 +1,12 @@
-import {module} from '../module';
+import ngModule from '../../module';
-import Input from '../lib/input';
+import Input from '../../lib/input';
 import './style.scss';
 
 export default class Textfield extends Input {
-    constructor($element, $scope, $attrs, $timeout, normalizer) {
+    constructor($element, $scope, $attrs, $timeout, vnTemplate) {
         super($element);
 
-        normalizer.normalize($attrs);
+        vnTemplate.normalizeInputAttrs($attrs);
 
         this.$scope = $scope;
         this.$attrs = $attrs;
@@ -45,9 +45,9 @@ export default class Textfield extends Input {
         this.input.focus();
     }
 }
-Textfield.$inject = ['$element', '$scope', '$attrs', '$timeout', 'vnInputAttrsNormalizer'];
+Textfield.$inject = ['$element', '$scope', '$attrs', '$timeout', 'vnTemplate'];
 
-module.component('vnTextfield', {
+ngModule.component('vnTextfield', {
     template: require('./textfield.html'),
     controller: Textfield,
     bindings: {

client/core/src/components/title/title.js

@@ -0,0 +1,6 @@
+import ngModule from '../../module';
+
+ngModule.component('vnTitle', {
+    template: require('./title.html'),
+    transclude: true
+});

client/core/src/components/tooltip/tooltip.js

@@ -1,4 +1,4 @@
-import {module} from '../module';
+import ngModule from '../../module';
 import './style.css';
 
 tooltip.$inject = ['$document', '$compile', '$interpolate', '$sce', '$templateCache', '$http', '$q'];
@@ -122,4 +122,4 @@ function tooltip($document, $compile, $interpolate, $sce, $templateCache, $http,
     };
 }
 
-module.directive('vnTooltip', tooltip);
+ngModule.directive('vnTooltip', tooltip);