#1024 td-editable component created

front/core/components/td-editable/index.html

@@ -0,0 +1,4 @@
+<vn-horizontal class="text-container">
+        <span class="text" ng-transclude="text" vn-one></span>
+</vn-horizontal>
+<div class="field"></div>

front/core/components/td-editable/index.js

@@ -0,0 +1,44 @@
+import ngModule from '../../module';
+import Component from '../../lib/component';
+import './style.scss';
+
+export default class Controller extends Component {
+    constructor($element, $scope, $transclude) {
+        super($element, $scope);
+        let element = $element[0];
+        element.tabIndex = 0;
+
+        element.addEventListener('focus', () => {
+            $transclude((tClone, tScope) => {
+                this.field = tClone;
+                this.tScope = tScope;
+                this.element.querySelector('.field').appendChild(this.field[0]);
+            }, null, 'field');
+            element.classList.add('selected');
+        });
+
+        element.addEventListener('focusout', event => {
+            this.lastEvent = event;
+            let target = event.relatedTarget;
+            while (target && target.parentNode != element)
+                target = target.parentNode;
+
+            if (!target) {
+                this.tScope.$destroy();
+                this.field.remove();
+                element.classList.remove('selected');
+            }
+        });
+    }
+}
+
+Controller.$inject = ['$element', '$scope', '$transclude'];
+
+ngModule.component('vnTdEditable', {
+    template: require('./index.html'),
+    controller: Controller,
+    transclude: {
+        text: 'text',
+        field: '?field'
+    }
+});

front/core/components/td-editable/style.scss

@@ -0,0 +1,16 @@
+vn-td-editable {
+    cursor: pointer;
+    & > div.text-container{
+        width: 100%;
+    }
+
+    &.selected {
+        & > .text-container{
+            display: none;
+        }
+    }
+
+    vn-icon {
+        font-size: 1em;
+    }
+}