Merge branch 'dev' of http://git.verdnatura.es/salix into dev

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/login/style.scss

@@ -12,7 +12,7 @@ vn-login > div {
 
 	.box-wrapper {
 		position: relative;
-		max-width: 22em;
+		max-width: 19em;
 		margin: auto;
 		height: inherit;
 	}

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/billing-data/locale/es.yml

@@ -4,8 +4,6 @@ No: No
 Yes, notify: Sí, notificar
 Notification sent!: ¡Notificación enviada!
 Notification error: Error al enviar notificación
-You changes the equivalent tax: Has cambiado el recargo de equivalencia
-Do you want to spread the change to their consignees?: ¿Deseas propagar el cambio a sus consignatarios?
 Yes, propagate: Si, propagar
 Equivalent tax spreaded: Recargo de equivalencia propagado
 Invoice by address: Facturar por consignatario

client/client/src/card/card.html

@@ -6,7 +6,7 @@
     </mg-ajax>
     <vn-horizontal>
         <vn-auto class="left-block">
-            <vn-descriptor client="$ctrl.client"></vn-descriptor>
+            <vn-client-descriptor client="$ctrl.client"></vn-client-descriptor>
             <vn-left-menu></vn-left-menu>
         </vn-auto>
         <vn-one>

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/descriptor/descriptor.html

@@ -1,18 +1,20 @@
 <vn-card margin-medium-v>
-    <vn-vertical>
+    <div class="descriptor-header pointer" ui-sref="clients">
-        <vn-auto class="descriptor-header pointer" ui-sref="clients">
+        <i class="material-icons">person</i>
-            <i class="material-icons">person</i>
+    </div>
-        </vn-auto>
+    <div pad-medium class="data">
-        <vn-auto pad-medium>
+        <h6>{{$ctrl.client.name}}</h6>
-            <vn-vertical>
+        <div>
-                <vn-horizontal ng-repeat="(field, title) in $ctrl.fieldsToShow">
+            <span translate>Id</span> {{$ctrl.client.id}}
-                    <strong vn-auto>{{::title}}:</strong>
+        </div>
-                    <vn-auto margin-small-left>
+        <div>
-                        <span ng-if="field.includes('credit')">{{$ctrl.client[field] || 0 | number:2}} €</span>
+            <span translate>Phone</span> {{$ctrl.client.phone | phone}}
-                        <span ng-if="!field.includes('credit')">{{$ctrl.client[field]}}</span>
+        </div>
-                    </vn-auto>
+        <div>
-                </vn-horizontal>
+            <span translate>Credit</span> {{$ctrl.client.credit | number:2}}€
-            </vn-vertical>
+        </div>
-        </vn-auto>
+        <div>
-    </vn-vertical>
+            <span translate>Secured credit</span> {{$ctrl.client.creditInsurance || 0 | number:2}}€
+        </div>
+    </div>
 </vn-card>

client/client/src/descriptor/descriptor.js

@@ -1,32 +1,9 @@
 import ngModule from '../module';
+import './style.scss';
 
-export default class Controller {
+ngModule.component('vnClientDescriptor', {
-    constructor($translate) {
-        this.$translate = $translate;
-        // CLient fields to display
-        this.fields = ['id', 'name', 'phone', 'credit', 'creditInsurance'];
-        this.fieldsToShow = {};
-    }
-
-    // concat 2 Arrays without duplicates
-    _concatFields(a, b) {
-        return a.concat(b.filter(item => a.indexOf(item) < 0));
-    }
-
-    $onInit() {
-        let fields = (this.moreFields && this.moreFields instanceof Array) ? this._concatFields(this.fields, this.moreFields) : this.fields;
-        fields.forEach(field => {
-            this.fieldsToShow[field] = this.$translate.instant(field);
-        });
-    }
-}
-Controller.$inject = ['$translate'];
-
-ngModule.component('vnDescriptor', {
     template: require('./descriptor.html'),
-    controller: Controller,
     bindings: {
-        client: '<',
+        client: '<'
-        moreFields: '<?'
     }
 });

client/client/src/descriptor/descriptor.spec.js

@@ -1,35 +0,0 @@
-import './descriptor.js';
-
-describe('Client', () => {
-    describe('Component vnDescriptor', () => {
-        let $componentController;
-        let $translate;
-        let controller;
-
-        beforeEach(() => {
-            angular.mock.module('client');
-        });
-
-        beforeEach(angular.mock.inject((_$componentController_, _$translate_) => {
-            $componentController = _$componentController_;
-            $translate = _$translate_;
-            controller = $componentController('vnDescriptor', {$translate: $translate});
-        }));
-
-        describe('onInit()', () => {
-            it('should create Object with basic fields', () => {
-                controller.client = {
-                    id: 1,
-                    name: "Peter Parker",
-                    phone: null,
-                    mobile: "666666",
-                    credit: 300,
-                    creditInsurance: null
-                };
-                controller.$onInit();
-
-                expect(controller.fieldsToShow.id).toBe('id');
-            });
-        });
-    });
-});

client/client/src/descriptor/style.scss

@@ -0,0 +1,6 @@
+vn-client-descriptor {
+    .data span {
+        font-size: .9em;
+        color: #666;
+    }
+}

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/fiscal-data/fiscal-data.html

@@ -10,17 +10,49 @@
         <vn-vertical pad-large>
             <vn-title>Fiscal data</vn-title>
             <vn-horizontal>
-                <vn-textfield autofocus vn-two label="Social name" field="$ctrl.client.socialName" vn-acl="administrative"></vn-textfield>
+                <vn-textfield
-                <vn-textfield vn-one label="Tax number" field="$ctrl.client.fi" vn-acl="administrative"></vn-textfield>
+                    vn-two
-                <vn-check vn-one label="Is equalizated" field="$ctrl.client.isEqualizated" vn-acl="administrative"></vn-check>
+                    vn-focus
+                    label="Social name"
+                    field="$ctrl.client.socialName"
+                    vn-acl="administrative">
+                </vn-textfield>
+                <vn-textfield
+                    vn-one
+                    label="Tax number"
+                    field="$ctrl.client.fi"
+                    vn-acl="administrative">
+                </vn-textfield>
+                <vn-check
+                    vn-one
+                    label="Is equalizated"
+                    field="$ctrl.client.isEqualizated"
+                    vn-acl="administrative">
+                </vn-check>
             </vn-horizontal>
             <vn-horizontal>
-                <vn-textfield vn-two label="Street" field="$ctrl.client.street" vn-focus vn-acl="administrative"></vn-textfield>
+                <vn-textfield
-                <vn-textfield vn-one label="City" field="$ctrl.client.city" vn-acl="administrative"></vn-textfield> 
+                    vn-two
+                    label="Street"
+                    field="$ctrl.client.street"
+                    vn-acl="administrative">
+                </vn-textfield>
+                <vn-textfield
+                    vn-one
+                    label="City"
+                    field="$ctrl.client.city"
+                    vn-acl="administrative">
+                </vn-textfield> 
             </vn-horizontal>
             <vn-horizontal>
-                <vn-textfield vn-one label="Postcode" field="$ctrl.client.postcode" vn-acl="administrative"></vn-textfield>
+                <vn-textfield
-                <vn-autocomplete vn-one
+                    vn-one
+                    label="Postcode"
+                    field="$ctrl.client.postcode"
+                    vn-acl="administrative">
+                </vn-textfield>
+                <vn-autocomplete
+                    vn-one
                     initial-data="$ctrl.client.province"
                     field="$ctrl.client.provinceFk"
                     url="/client/api/Provinces"
@@ -29,7 +61,8 @@
                     label="Province"
                     vn-acl="administrative">
                 </vn-autocomplete>
-                <vn-autocomplete vn-one
+                <vn-autocomplete
+                    vn-one
                     initial-data="$ctrl.client.country"
                     field="$ctrl.client.countryFk"
                     url="/client/api/Countries"
@@ -41,24 +74,48 @@
             </vn-horizontal>
             <vn-horizontal margin-small-bottom>
                 <vn-one>
-                    <vn-check label="Active" field="$ctrl.client.isActive" vn-acl="administrative"></vn-check>
+                    <vn-check
+                        label="Active"
+                        field="$ctrl.client.isActive"
+                        vn-acl="administrative">
+                    </vn-check>
                 </vn-one>
                 <vn-one>
-                    <vn-check label="Invoice by address" field="$ctrl.client.hasToInvoiceByAddress" vn-acl="administrative"></vn-check>
+                    <vn-check
+                        label="Invoice by address"
+                        field="$ctrl.client.hasToInvoiceByAddress"
+                        vn-acl="administrative">
+                    </vn-check>
                 </vn-one>
                 <vn-one>
-                    <vn-check label="Verified data" field="$ctrl.client.isTaxDataChecked" vn-acl="administrative"></vn-check>
+                    <vn-check
+                        label="Verified data"
+                        field="$ctrl.client.isTaxDataChecked"
+                        vn-acl="administrative">
+                    </vn-check>
                 </vn-one>
             </vn-horizontal>
             <vn-horizontal>
                 <vn-one>                    
-                    <vn-check label="Has to invoice" field="$ctrl.client.hasToInvoice" vn-acl="administrative"></vn-check>
+                    <vn-check
+                        label="Has to invoice"
+                        field="$ctrl.client.hasToInvoice"
+                        vn-acl="administrative">
+                    </vn-check>
                 </vn-one>
                 <vn-one>
-                    <vn-check vn-one label="Invoice by mail" field="$ctrl.client.isToBeMailed" vn-acl="administrative"></vn-check>
+                    <vn-check
+                        label="Invoice by mail"
+                        field="$ctrl.client.isToBeMailed"
+                        vn-acl="administrative">
+                    </vn-check>
                 </vn-one>
                 <vn-one>
-                    <vn-check vn-one label="Vies" field="$ctrl.client.isVies" vn-acl="administrative"></vn-check>
+                    <vn-check
+                        label="Vies"
+                        field="$ctrl.client.isVies"
+                        vn-acl="administrative">
+                    </vn-check>
                 </vn-one>
             </vn-horizontal>
         </vn-vertical>
@@ -67,17 +124,9 @@
         <vn-submit label="Save" vn-acl="administrative"></vn-submit>
     </vn-button-bar>
 </form>
-<vn-dialog
+<vn-confirm 
     vn-id="propagate-isEqualizated"
+    question="You changed the equalization tax"
+    message="Do you want to spread the change?"
     on-response="$ctrl.returnDialogEt(response)">
-    <tpl-body>
+</vn-confirm>
-        <vn-vertical>
-            <vn-one text-center translate>You changes the equivalen
-            <vn-one text-center translate>Do you want to spread the change to their consig
-        </vn-vertical>
-    </tpl-body>
-    <tpl-buttons>
-        <button response="CANCEL" translate>No</button>
-        <button response="ACCEPT" translate>Yes, propagate</button>
-    </tpl-buttons>
-</vn-dialog>

client/client/src/fiscal-data/locale/es.yml

@@ -0,0 +1,4 @@
+No: No
+Yes, notify: Sí, notificar
+You changed the equalization tax: Has cambiado el recargo de equivalencia
+Do you want to spread the change: ¿Deseas propagar el cambio a sus consignatarios?

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/index/index.html

@@ -1,6 +1,6 @@
 <mg-ajax path="/client/api/Clients/filter" options="mgIndex"></mg-ajax>
 <div margin-medium>
-    <div style="max-width: 40em; margin: 0 auto;">
+    <div style="max-width: 36em; margin: 0 auto;">
         <vn-card>
             <vn-horizontal pad-medium>
                 <vn-searchbar vn-one
@@ -8,13 +8,16 @@
                     on-search="$ctrl.search(index)"
                     advanced="true"
                     popover="vn-client-search-panel"
-                    ignore-keys = "['page', 'size', 'search']"
+                    ignore-keys = "['page', 'size', 'search']">
-                    >
                 </vn-searchbar>
             </vn-horizontal>
         </vn-card>
         <vn-card margin-medium-top>
-            <vn-item-client ng-repeat="client in index.model.instances" title="View client" client="client"></vn-item-client>
+            <vn-item-client
+                ng-repeat="client in index.model.instances"
+                title="View client"
+                client="client">
+            </vn-item-client>
         </vn-card>
         <vn-paging index="index" total="index.model.count"></vn-paging>
     </div>

client/client/src/index/index.js

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

client/client/src/index/item-client.html

@@ -1,7 +1,7 @@
 <a ui-sref="clientCard.basicData({ id: {{::$ctrl.client.id}} })" pad-medium border-solid-bottom>
-    <div class="vn-item-client-name">{{::$ctrl.client.name}}</div>
+    <h6>{{::$ctrl.client.name}}</h6>
-    <div><span translate>Client id</span>: <b>{{::$ctrl.client.id}}</b></div>
+    <div><span translate>Id</span> {{::$ctrl.client.id}}</div>
-    <div><span translate>Phone</span>: <b>{{::$ctrl.client.phone | phone}}</b></div>
+    <div><span translate>Phone</span> {{::$ctrl.client.phone | phone}}</div>
-    <div><span translate>Town/City</span>: <b>{{::$ctrl.client.city}}</b></div>
+    <div><span translate>Town/City</span> {{::$ctrl.client.city}}</div>
-    <div><span translate>Email</span>: <b>{{::$ctrl.client.email}}</b></div>
+    <div><span translate>Email</span> {{::$ctrl.client.email}}</div>
 </a>

client/client/src/index/style.css

@@ -1,16 +0,0 @@
-vn-item-client {
-    display: block;
-}
-vn-item-client a {
-    display: block;
-    text-decoration: none;
-    color: inherit;
-}
-vn-item-client a:hover {
-    color: white;
-    background-color: #424242;
-}
-
-.vn-item-client-name {
-    font-family: vn-font-bold;
-}

client/client/src/index/style.scss

@@ -0,0 +1,20 @@
+vn-item-client {
+    display: block;
+
+    a {
+        display: block;
+        text-decoration: none;
+        color: inherit;
+    }
+    a:hover {
+        color: white;
+        background-color: #424242;
+    }
+    span {
+        font-size: .9em;
+        color: #666;
+    }
+    a:hover span {
+        color: #aaa;
+    }
+}

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/client/src/notes/notes.html

@@ -5,13 +5,13 @@
             ng-repeat="n in $ctrl.observations" 
             pad-small border-solid
             border-radius
-            margin-small-bottom style="align-items: center;">
+            margin-small-bottom>
-            <vn-horizontal>
+            <vn-horizontal margin-small-bottom style="color: #666">
-                <vn-one >{{::n.worker.firstName}} {{::n.worker.name}}</vn-one>
+                <vn-one>{{::n.worker.firstName}} {{::n.worker.name}}</vn-one>
                 <vn-auto>{{::n.created | date:'dd/MM/yyyy HH:mm'}}</vn-auto>
             </vn-horizontal>   
             <vn-horizontal>
-                <b>{{::n.text}}</b> 
+                {{::n.text}}
             </vn-horizontal>
         </vn-one>
     </vn-vertical>

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.html

@@ -1,4 +0,0 @@
-<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
-	<input type="checkbox" name="*[name]*" class="*[className]*" name="*[name]*" ng-model="*[model]*" rule="*[rule]*" *[enabled]*>
-	<span class="mdl-checkbox__label" translate>*[label]*</span>
-</label>

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.html

@@ -0,0 +1,4 @@
+<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+	<input type="checkbox" class="mdl-checkbox__input"/>
+	<span class="mdl-checkbox__label" translate>{{::$ctrl.label}}</span>
+</label>

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

@@ -0,0 +1,50 @@
+import ngModule from '../../module';
+import Input from '../../lib/input';
+import './style.scss';
+
+export default class Controller extends Input {
+    constructor($element, $scope) {
+        super($element, $scope);
+        componentHandler.upgradeElement(this.element.firstChild);
+        this.mdlElement = this.element.firstChild.MaterialCheckbox;
+        this.input.addEventListener('change', () => this.onChange());
+    }
+    set field(value) {
+        this.input.checked = value == true;
+        this.mdlUpdate();
+    }
+    get field() {
+        return this.input.checked == true;
+    }
+    $onInit() {
+        if (this.model) {
+            this.model.$render = () => {
+                this.input.checked = this.model.$viewValue || false;
+                this.mdlUpdate();
+            };
+            this.$element.on('blur keyup change', () => {
+                this.$.$evalAsync(() => {
+                    this.model.$setViewValue(this.input.checked);
+                });
+            });
+        }
+    }
+    onChange() {
+        this.$.$applyAsync();
+    }
+}
+Controller.$inject = ['$element', '$scope', '$injector'];
+
+ngModule.component('vnCheck', {
+    template: require('./check.html'),
+    controller: Controller,
+    require: {
+        model: '?ngModel'
+    },
+    bindings: {
+        field: '=?',
+        label: '@?',
+        disabled: '<?',
+        rule: '@?'
+    }
+});

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.html

@@ -6,11 +6,11 @@
         <div>
             <tpl-body>
                 <h6 class="dialog-title" translate>
-                    {{$ctrl.question}}
+                    {{::$ctrl.question}}
-                </h6>
-                <h6 translate>
-                    {{$ctrl.message}}
                 </h6>
+                <span translate>
+                    {{::$ctrl.message}}
+                </span>
             </tpl-body>
         </div>
         <div class="button-bar" ng-click="$ctrl.onButtonClick($event)">

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

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

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);