From a27749758b2d1ac816bed849044fe060c904129d Mon Sep 17 00:00:00 2001
From: alexandre <alexandre@verdnatura.es>
Date: Thu, 18 May 2023 14:21:42 +0200
Subject: [PATCH 1/8] refs #5633 vnAccountNumber new component

---
 .../core/components/account-number/index.html |  8 +++++
 front/core/components/account-number/index.js | 24 ++++++++++++++
 .../components/account-number/index.spec.js   | 28 ++++++++++++++++
 front/core/components/index.js                |  1 +
 .../client/front/balance/create/index.html    |  7 ++--
 modules/client/front/balance/create/index.js  |  7 ++--
 .../client/front/balance/create/index.spec.js | 32 ++++++++++++++++---
 7 files changed, 97 insertions(+), 10 deletions(-)
 create mode 100644 front/core/components/account-number/index.html
 create mode 100644 front/core/components/account-number/index.js
 create mode 100644 front/core/components/account-number/index.spec.js

diff --git a/front/core/components/account-number/index.html b/front/core/components/account-number/index.html
new file mode 100644
index 0000000000..1035dff89b
--- /dev/null
+++ b/front/core/components/account-number/index.html
@@ -0,0 +1,8 @@
+<vn-textfield
+    label="Account"
+    name="account"
+    ng-model="$ctrl.accountNumber"
+    on-change="$ctrl.accountShortToStandard(value)"
+    insertable="true"
+    max-length="10">
+</vn-textfield>
diff --git a/front/core/components/account-number/index.js b/front/core/components/account-number/index.js
new file mode 100644
index 0000000000..15f5b0c94b
--- /dev/null
+++ b/front/core/components/account-number/index.js
@@ -0,0 +1,24 @@
+import Component from '../../lib/component';
+import ngModule from '../../module';
+
+export default class AccountNumber extends Component {
+    constructor($element, $) {
+        super($element, $);
+        this.$ = $;
+    }
+
+    accountShortToStandard(value) {
+        this.accountNumber = value.replace('.', '0'.repeat(11 - value.length));
+        this.$.$emit('accountShortToStandard', this.accountNumber);
+    }
+}
+
+AccountNumber.$inject = ['$element', '$scope'];
+
+ngModule.vnComponent('vnAccountNumber', {
+    template: require('./index.html'),
+    controller: AccountNumber,
+    bindings: {
+        accountNumber: '<'
+    }
+});
diff --git a/front/core/components/account-number/index.spec.js b/front/core/components/account-number/index.spec.js
new file mode 100644
index 0000000000..c37aad96ec
--- /dev/null
+++ b/front/core/components/account-number/index.spec.js
@@ -0,0 +1,28 @@
+describe('Component vnAccountNumber', () => {
+    let controller;
+    let $element;
+
+    beforeEach(ngModule('vnCore'));
+
+    beforeEach(inject(($compile, $rootScope) => {
+        $element = $compile(`<vn-account-number></vn-account-number>`)($rootScope);
+        controller = $element.controller('vnAccountNumber');
+        controller.$ = {$emit: jest.fn()};
+    }));
+
+    afterEach(() => {
+        $element.remove();
+    });
+
+    describe('accountShortToStandard', () => {
+        it('should replace dots and emit event with account number', () => {
+            const mockValue = '41.1';
+            const expectedAccountNumber = '4100000001';
+
+            controller.accountShortToStandard(mockValue);
+
+            expect(controller.accountNumber).toBe(expectedAccountNumber);
+            expect(controller.$.$emit).toHaveBeenCalledWith('accountShortToStandard', expectedAccountNumber);
+        });
+    });
+});
diff --git a/front/core/components/index.js b/front/core/components/index.js
index 45d182121f..5cfb44203f 100644
--- a/front/core/components/index.js
+++ b/front/core/components/index.js
@@ -55,3 +55,4 @@ import './datalist';
 import './contextmenu';
 import './rating';
 import './smart-table';
+import './account-number';
diff --git a/modules/client/front/balance/create/index.html b/modules/client/front/balance/create/index.html
index 27b182c9ac..06a034e28e 100644
--- a/modules/client/front/balance/create/index.html
+++ b/modules/client/front/balance/create/index.html
@@ -54,12 +54,15 @@
     </vn-horizontal>
     <vn-vertical ng-show="$ctrl.bankSelection.accountingType.code == 'compensation'">
         <h6 translate>Compensation</h6>
-        <vn-textfield
+        <vn-account-number
+            account-number="$ctrl.receipt.compensationAccount">
+        </vn-account-number>
+        <!-- <vn-textfield
             ng-model="$ctrl.receipt.compensationAccount"
             vn-name="compensationAccount"
             label="Compensation Account"
             on-change="$ctrl.accountShortToStandard(value)">
-        </vn-textfield>
+        </vn-textfield> -->
     </vn-vertical>
     <vn-horizontal>
         <vn-textfield
diff --git a/modules/client/front/balance/create/index.js b/modules/client/front/balance/create/index.js
index 9113d76058..62b942ca33 100644
--- a/modules/client/front/balance/create/index.js
+++ b/modules/client/front/balance/create/index.js
@@ -7,6 +7,7 @@ class Controller extends Dialog {
         this.vnReport = vnReport;
         this.vnEmail = vnEmail;
         this.receipt = {};
+        $.$on('accountShortToStandard', (event, value) => this.getClientOrSupplierReference(value));
     }
 
     set payed(value) {
@@ -127,9 +128,9 @@ class Controller extends Dialog {
         this.receipt.bankFk = value;
     }
 
-    accountShortToStandard(value) {
-        if (value) {
-            this.receipt.compensationAccount = value.replace('.', '0'.repeat(11 - value.length));
+    getClientOrSupplierReference(value) {
+        this.receipt.compensationAccount = value;
+        if (this.receipt.compensationAccount) {
             const params = {bankAccount: this.receipt.compensationAccount};
             this.$http.get(`Clients/getClientOrSupplierReference`, {params})
                 .then(res => {
diff --git a/modules/client/front/balance/create/index.spec.js b/modules/client/front/balance/create/index.spec.js
index fa6b48ea42..f9c11affc5 100644
--- a/modules/client/front/balance/create/index.spec.js
+++ b/modules/client/front/balance/create/index.spec.js
@@ -112,12 +112,34 @@ describe('Client', () => {
             });
         });
 
-        describe('accountShortToStandard()', () => {
-            it('should get de account in stardard format', () => {
-                const shortAccount = '4.3';
-                controller.accountShortToStandard(shortAccount);
+        describe('getClientOrSupplierReference', () => {
+            it('should update receipt description when compensation account is provided', async() => {
+                jest.spyOn(controller, '$t');
+                const mockValue = '4100000001';
+                const mockResponse = {
+                    clientId: '1',
+                    clientName: 'Client mocked'
+                };
 
-                expect(controller.receipt.compensationAccount).toEqual('4000000003');
+                $httpBackend
+                    .expectGET(`Clients/getClientOrSupplierReference?bankAccount=${mockValue}`)
+                    .respond(mockResponse);
+                controller.getClientOrSupplierReference(mockValue);
+                $httpBackend.flush();
+
+                expect(controller.receipt.compensationAccount).toBe(mockValue);
+                expect(controller.receipt.description).toBe('Client Compensation Reference');
+                expect(controller.$t).toHaveBeenCalledWith('Client Compensation Reference', {
+                    clientId: mockResponse.clientId,
+                    clientName: mockResponse.clientName
+                });
+            });
+
+            it('should update receipt description to empty string if compensation account is not provided', async() => {
+                controller.getClientOrSupplierReference('');
+
+                expect(controller.receipt.compensationAccount).toBe('');
+                expect(controller.receipt.description).toBe('');
             });
         });
 
-- 
2.40.1


From 04116642a458b450ee14f557793c12ba6a52f7df Mon Sep 17 00:00:00 2001
From: alexandre <alexandre@verdnatura.es>
Date: Thu, 18 May 2023 14:26:58 +0200
Subject: [PATCH 2/8] refs #5633 minor fixes

---
 modules/client/front/balance/create/index.html | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/modules/client/front/balance/create/index.html b/modules/client/front/balance/create/index.html
index 06a034e28e..63129882ed 100644
--- a/modules/client/front/balance/create/index.html
+++ b/modules/client/front/balance/create/index.html
@@ -57,12 +57,6 @@
         <vn-account-number
             account-number="$ctrl.receipt.compensationAccount">
         </vn-account-number>
-        <!-- <vn-textfield
-            ng-model="$ctrl.receipt.compensationAccount"
-            vn-name="compensationAccount"
-            label="Compensation Account"
-            on-change="$ctrl.accountShortToStandard(value)">
-        </vn-textfield> -->
     </vn-vertical>
     <vn-horizontal>
         <vn-textfield
-- 
2.40.1


From f6e27add6ff617c5a09bb1080631390ab153d72e Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 5 Jul 2023 11:33:30 +0200
Subject: [PATCH 3/8] refs #5633 move component

---
 modules/supplier/front/fiscal-data/index.html | 1 +
 modules/supplier/front/fiscal-data/index.js   | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/modules/supplier/front/fiscal-data/index.html b/modules/supplier/front/fiscal-data/index.html
index 218fe284db..dbd45d09b1 100644
--- a/modules/supplier/front/fiscal-data/index.html
+++ b/modules/supplier/front/fiscal-data/index.html
@@ -63,6 +63,7 @@
                 label="Account"
                 vn-name="account"
                 ng-model="$ctrl.supplier.account"
+                on-change="ctrl.accountShortToStandard(value)"
                 insertable="true"
                 max-length="10"
                 rule>
diff --git a/modules/supplier/front/fiscal-data/index.js b/modules/supplier/front/fiscal-data/index.js
index 8a6a51249f..c4fc250b0d 100644
--- a/modules/supplier/front/fiscal-data/index.js
+++ b/modules/supplier/front/fiscal-data/index.js
@@ -75,6 +75,11 @@ export default class Controller extends Section {
         this.supplier.provinceFk = response.provinceFk;
         this.supplier.countryFk = response.countryFk;
     }
+
+    accountShortToStandard(value) {
+        this.accountNumber = value.replace('.', '0'.repeat(11 - value.length));
+        this.$.$emit('accountShortToStandard', this.accountNumber);
+    }
 }
 
 ngModule.vnComponent('vnSupplierFiscalData', {
-- 
2.40.1


From 90d144d588eb250801ce1e6670f9f33d6def7593 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 5 Jul 2023 13:52:56 +0200
Subject: [PATCH 4/8] refs #5633 fix account-number component

---
 .../core/components/account-number/index.html |   5 +-
 front/core/components/account-number/index.js |  14 +-
 .../core/components/account-number/style.scss | 356 ++++++++++++++++++
 modules/supplier/front/fiscal-data/index.html |  10 +-
 modules/supplier/front/fiscal-data/index.js   |   5 -
 5 files changed, 366 insertions(+), 24 deletions(-)
 create mode 100644 front/core/components/account-number/style.scss

diff --git a/front/core/components/account-number/index.html b/front/core/components/account-number/index.html
index 1035dff89b..ff8bd763af 100644
--- a/front/core/components/account-number/index.html
+++ b/front/core/components/account-number/index.html
@@ -1,8 +1,5 @@
 <vn-textfield
-    label="Account"
-    name="account"
-    ng-model="$ctrl.accountNumber"
-    on-change="$ctrl.accountShortToStandard(value)"
+    on-change="$ctrl.accountShortToStandard()"
     insertable="true"
     max-length="10">
 </vn-textfield>
diff --git a/front/core/components/account-number/index.js b/front/core/components/account-number/index.js
index 15f5b0c94b..54380372ca 100644
--- a/front/core/components/account-number/index.js
+++ b/front/core/components/account-number/index.js
@@ -1,15 +1,16 @@
-import Component from '../../lib/component';
+import Textfield from '../textfield/textfield';
+import './style.scss';
 import ngModule from '../../module';
 
-export default class AccountNumber extends Component {
+export default class AccountNumber extends Textfield {
     constructor($element, $) {
         super($element, $);
         this.$ = $;
     }
 
-    accountShortToStandard(value) {
-        this.accountNumber = value.replace('.', '0'.repeat(11 - value.length));
-        this.$.$emit('accountShortToStandard', this.accountNumber);
+    accountShortToStandard() {
+        this.field = this.field.replace('.', '0'.repeat(11 - this.field.length));
+        this.$.$emit('accountShortToStandard', this.field);
     }
 }
 
@@ -18,7 +19,4 @@ AccountNumber.$inject = ['$element', '$scope'];
 ngModule.vnComponent('vnAccountNumber', {
     template: require('./index.html'),
     controller: AccountNumber,
-    bindings: {
-        accountNumber: '<'
-    }
 });
diff --git a/front/core/components/account-number/style.scss b/front/core/components/account-number/style.scss
new file mode 100644
index 0000000000..d4dcd19ec0
--- /dev/null
+++ b/front/core/components/account-number/style.scss
@@ -0,0 +1,356 @@
+@import "variables";
+
+.vn-field {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 100%;
+
+    & > .container {
+        display: flex;
+        align-items: stretch;
+        position: relative;
+        outline: none;
+
+        & > .infix {
+            position: relative;
+            display: flex;
+            flex: auto;
+            width: 100%;
+            min-width: 0;
+
+            & > label {
+                position: absolute;
+                left: 0;
+                top: 18px;
+                line-height: 20px;
+                pointer-events: none;
+                color: $color-font-bg-marginal;
+                transition-property: top, color, font-size;
+                transition-duration: 400ms;
+                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+
+                & > .required {
+                    display: none;
+                }
+            }
+            & > .fix {
+                padding-top: 24px;
+                line-height: 24px;
+                font-size: 1rem;
+                opacity: 0;
+                transition: opacity 200ms ease-in-out;
+
+                &.prefix {
+                    padding-right: 5px;
+                }
+                &.suffix {
+                    padding-left: 5px;
+                }
+            }
+            & > .control {
+                height: 100%;
+                flex: auto;
+
+                & > * {
+                    padding-top: 24px;
+                    padding-bottom: 8px;
+                    height: inherit;
+                    outline: none;
+                    border: none;
+                    font-family: Arial, sans-serif;
+                    display: block;
+                    font-size: 1rem;
+                    width: 100%;
+                    background: 0;
+                    color: inherit;
+                    box-sizing: border-box;
+                    min-height: 56px;
+                }
+                & > input {
+                    position: relative;
+                    color: $color-font;
+
+                    &::placeholder {
+                        color: $color-font-bg-marginal;
+                    }
+                    &[type=time],
+                    &[type=date],
+                    &[type=password] {
+                        opacity: 0;
+                        transition: opacity 200ms ease-in-out;
+                        cursor: pointer;
+                    }
+                    &[type=time],
+                    &[type=date] {
+                        &::-webkit-inner-spin-button,
+                        &::-webkit-clear-button {
+                            display: none;
+                            -webkit-appearance: none;
+                        }
+                        &::-webkit-calendar-picker-indicator {
+                            position: absolute;
+                            height: 100%;
+                            width: 100%;
+                            opacity: 0;
+                            cursor: pointer;
+                        }
+                    }
+                    &[type=number] {
+                        -moz-appearance: textfield;
+
+                        &::-webkit-outer-spin-button,
+                        &::-webkit-inner-spin-button {
+                            -webkit-appearance: none;
+                            margin: 0;
+                        }
+                    }
+                    &:invalid {
+                        box-shadow: none;
+                    }
+                    &:-internal-autofill-selected {
+                        &,
+                        &:hover,
+                        &:focus,
+                        &:active,
+                        &:valid {
+                            box-shadow: 0 0 0 40px $color-bg-panel inset;
+                            -webkit-text-fill-color: $color-primary-medium
+                        }
+                    }
+                }
+            }
+        }
+        & > .prepend,
+        & > .append,
+        & > .icons {
+            display: flex;
+            align-items: center;
+            color: $color-font-bg-marginal;
+        }
+        & > .prepend > prepend,
+        & > .append > append,
+        & > .icons {
+            display: flex;
+            align-items: center;
+
+            & > vn-icon {
+                font-size: 1.5rem;
+            }
+        }
+        & > .prepend > prepend {
+            padding-right: 12px;
+        }
+        & > .icons {
+            &.pre {
+                padding-left: 12px;
+            }
+            & > vn-icon {
+                cursor: pointer;
+            }
+            & > vn-icon[icon=clear] {
+                display: none;
+            }
+        }
+        & > .icons.pre.clearable {
+            min-width: 22px
+        }
+        & > .underline {
+            position: absolute;
+            bottom: 0;
+            content: ' ';
+            pointer-events: none;
+            width: 100%;
+
+            &.blur {
+                border-bottom: 1px solid $color-input-underline;
+                transition: border-color 200ms ease-in-out;
+            }
+            &.focus {
+                height: 2px;
+                background-color: $color-primary;
+                left: 50%;
+                width: 0;
+                transition-property: width, left, background-color;
+                transition-duration: 300ms;
+                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+            }
+        }
+    }
+    &.dense {
+        & > .hint {
+            display: none;
+        }
+        & > .container > .infix {
+            & > label {
+                top: 8px;
+            }
+            & > .control > * {
+                padding-top: 8px;
+                min-height: 40px;
+            }
+        }
+        &.not-empty,
+        &.focused,
+        &.invalid {
+            & > .container > .infix > label {
+                top: 0;
+                line-height: 8px;
+            }
+        }
+    }
+    &.standout {
+        border-radius: 1px;
+        background-color: rgba(161, 161, 161, 0.1);
+        padding: 0 12px;
+        transition-property: background-color, color;
+        transition-duration: 200ms;
+        transition-timing-function: ease-in-out;
+
+        & > .container {
+            & > .underline {
+                display: none;
+            }
+            & > .infix > .control > input {
+                &:-internal-autofill-selected {
+                    &,
+                    &:hover,
+                    &:active,
+                    &:valid {
+                        box-shadow: 0 0 0 40px #474747 inset;
+                        -webkit-text-fill-color: $color-font-dark
+                    }
+                }
+            }
+            & > .infix > .control > * {
+                color: $color-font-dark;
+
+                &::placeholder {
+                    color: $color-font-bg-dark;
+                }
+            }
+            & > .prepend,
+            & > .append,
+            & > .icons {
+                color: $color-font-bg-dark-marginal;
+            }
+        }
+        &.focused {
+            background-color: $color-font-dark;
+
+            & > .container {
+                & > .infix > .control > input {
+                    &:-internal-autofill-selected {
+                        &,
+                        &:hover,
+                        &:active,
+                        &:valid {
+                            box-shadow: 0 0 0 40px $color-font-dark inset;
+                            -webkit-text-fill-color: $color-font-bg
+                        }
+                    }
+                }
+                & > .infix > .control > * {
+                    color: $color-marginal;
+
+                    &::placeholder {
+                        color: $color-font-bg;
+                    }
+                }
+                & > .prepend,
+                & > .append,
+                & > .icons {
+                    color: $color-marginal;
+                }
+            }
+        }
+    }
+    &.not-empty,
+    &.focused,
+    &.invalid {
+        & > .container > .infix {
+            & > label {
+                top: 5px;
+                color: $color-primary;
+                padding: 0;
+                font-size: .75rem;
+            }
+            & > .control > * {
+                &[type=time],
+                &[type=date],
+                &[type=password] {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+    &.has-icons,
+    &.not-empty:hover,
+    &.not-empty.focused {
+        & > .container {
+            & > .append > append {
+                padding-left: 0;
+            }
+            & > .icons.pre {
+                padding-left: 12px;
+            }
+        }
+    }
+    &:not(.disabled):not(.readonly) {
+        &.focused > .container > .underline.focus {
+            left: 0;
+            width: 100%;
+        }
+        & > .container:hover > .underline.blur {
+            border-color: $color-input-underline-hover;
+        }
+        &.not-empty:hover,
+        &.not-empty.focused {
+            & > .container > .icons > vn-icon[icon=clear] {
+                display: initial;
+            }
+        }
+    }
+    &.readonly > .container {
+        & > .infix > .control > * {
+            caret-color: transparent;
+        }
+        & > .underline.blur {
+            border-bottom-style: dashed;
+        }
+    }
+    & > .hint {
+        padding: 4px 0;
+        height: 12px;
+        color: rgba(0, 0, 0, .4);
+        font-size: .75rem;
+        transform: translateY(-12px);
+        transition-property: opacity, transform, color;
+        transition-duration: 200ms;
+        transition-timing-function: ease-in-out;
+        opacity: 0;
+        visibility: hidden;
+
+        &.filled {
+            opacity: 1;
+            transform: translateY(0);
+            visibility: visible;
+        }
+    }
+    &.invalid {
+        & > .container {
+            & > .infix > label {
+                color: $color-alert;
+            }
+            & > .underline.focus {
+                background-color: $color-alert;
+            }
+            & > .underline.blur {
+                border-bottom-color: $color-alert;
+                opacity: 1;
+            }
+        }
+        & > .hint {
+            color: $color-alert;
+        }
+    }
+}
diff --git a/modules/supplier/front/fiscal-data/index.html b/modules/supplier/front/fiscal-data/index.html
index dbd45d09b1..3fe60a99a9 100644
--- a/modules/supplier/front/fiscal-data/index.html
+++ b/modules/supplier/front/fiscal-data/index.html
@@ -58,16 +58,12 @@
             </vn-textfield>
         </vn-horizontal>
         <vn-horizontal>
-            <vn-textfield
+            <vn-account-number
                 vn-one
                 label="Account"
                 vn-name="account"
-                ng-model="$ctrl.supplier.account"
-                on-change="ctrl.accountShortToStandard(value)"
-                insertable="true"
-                max-length="10"
-                rule>
-            </vn-textfield>
+                ng-model="$ctrl.supplier.account">
+            </vn-account-number>
             <vn-autocomplete
                 vn-one
                 label="Sage tax type"
diff --git a/modules/supplier/front/fiscal-data/index.js b/modules/supplier/front/fiscal-data/index.js
index c4fc250b0d..8a6a51249f 100644
--- a/modules/supplier/front/fiscal-data/index.js
+++ b/modules/supplier/front/fiscal-data/index.js
@@ -75,11 +75,6 @@ export default class Controller extends Section {
         this.supplier.provinceFk = response.provinceFk;
         this.supplier.countryFk = response.countryFk;
     }
-
-    accountShortToStandard(value) {
-        this.accountNumber = value.replace('.', '0'.repeat(11 - value.length));
-        this.$.$emit('accountShortToStandard', this.accountNumber);
-    }
 }
 
 ngModule.vnComponent('vnSupplierFiscalData', {
-- 
2.40.1


From dba79e007f849904289fe5c0985089c9a753e1c6 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 6 Jul 2023 09:21:31 +0200
Subject: [PATCH 5/8] refs #5633 component fix remove html scss

---
 .../core/components/account-number/index.html |   5 -
 front/core/components/account-number/index.js |   5 +-
 .../core/components/account-number/style.scss | 356 ------------------
 3 files changed, 3 insertions(+), 363 deletions(-)
 delete mode 100644 front/core/components/account-number/index.html
 delete mode 100644 front/core/components/account-number/style.scss

diff --git a/front/core/components/account-number/index.html b/front/core/components/account-number/index.html
deleted file mode 100644
index ff8bd763af..0000000000
--- a/front/core/components/account-number/index.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<vn-textfield
-    on-change="$ctrl.accountShortToStandard()"
-    insertable="true"
-    max-length="10">
-</vn-textfield>
diff --git a/front/core/components/account-number/index.js b/front/core/components/account-number/index.js
index 54380372ca..f27ff90884 100644
--- a/front/core/components/account-number/index.js
+++ b/front/core/components/account-number/index.js
@@ -1,11 +1,13 @@
 import Textfield from '../textfield/textfield';
-import './style.scss';
 import ngModule from '../../module';
 
 export default class AccountNumber extends Textfield {
     constructor($element, $) {
         super($element, $);
         this.$ = $;
+        super.insertable = true;
+        super.maxLength = 10;
+        this.element.addEventListener('change', () => this.accountShortToStandard());
     }
 
     accountShortToStandard() {
@@ -17,6 +19,5 @@ export default class AccountNumber extends Textfield {
 AccountNumber.$inject = ['$element', '$scope'];
 
 ngModule.vnComponent('vnAccountNumber', {
-    template: require('./index.html'),
     controller: AccountNumber,
 });
diff --git a/front/core/components/account-number/style.scss b/front/core/components/account-number/style.scss
deleted file mode 100644
index d4dcd19ec0..0000000000
--- a/front/core/components/account-number/style.scss
+++ /dev/null
@@ -1,356 +0,0 @@
-@import "variables";
-
-.vn-field {
-    display: inline-block;
-    box-sizing: border-box;
-    width: 100%;
-
-    & > .container {
-        display: flex;
-        align-items: stretch;
-        position: relative;
-        outline: none;
-
-        & > .infix {
-            position: relative;
-            display: flex;
-            flex: auto;
-            width: 100%;
-            min-width: 0;
-
-            & > label {
-                position: absolute;
-                left: 0;
-                top: 18px;
-                line-height: 20px;
-                pointer-events: none;
-                color: $color-font-bg-marginal;
-                transition-property: top, color, font-size;
-                transition-duration: 400ms;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-
-                & > .required {
-                    display: none;
-                }
-            }
-            & > .fix {
-                padding-top: 24px;
-                line-height: 24px;
-                font-size: 1rem;
-                opacity: 0;
-                transition: opacity 200ms ease-in-out;
-
-                &.prefix {
-                    padding-right: 5px;
-                }
-                &.suffix {
-                    padding-left: 5px;
-                }
-            }
-            & > .control {
-                height: 100%;
-                flex: auto;
-
-                & > * {
-                    padding-top: 24px;
-                    padding-bottom: 8px;
-                    height: inherit;
-                    outline: none;
-                    border: none;
-                    font-family: Arial, sans-serif;
-                    display: block;
-                    font-size: 1rem;
-                    width: 100%;
-                    background: 0;
-                    color: inherit;
-                    box-sizing: border-box;
-                    min-height: 56px;
-                }
-                & > input {
-                    position: relative;
-                    color: $color-font;
-
-                    &::placeholder {
-                        color: $color-font-bg-marginal;
-                    }
-                    &[type=time],
-                    &[type=date],
-                    &[type=password] {
-                        opacity: 0;
-                        transition: opacity 200ms ease-in-out;
-                        cursor: pointer;
-                    }
-                    &[type=time],
-                    &[type=date] {
-                        &::-webkit-inner-spin-button,
-                        &::-webkit-clear-button {
-                            display: none;
-                            -webkit-appearance: none;
-                        }
-                        &::-webkit-calendar-picker-indicator {
-                            position: absolute;
-                            height: 100%;
-                            width: 100%;
-                            opacity: 0;
-                            cursor: pointer;
-                        }
-                    }
-                    &[type=number] {
-                        -moz-appearance: textfield;
-
-                        &::-webkit-outer-spin-button,
-                        &::-webkit-inner-spin-button {
-                            -webkit-appearance: none;
-                            margin: 0;
-                        }
-                    }
-                    &:invalid {
-                        box-shadow: none;
-                    }
-                    &:-internal-autofill-selected {
-                        &,
-                        &:hover,
-                        &:focus,
-                        &:active,
-                        &:valid {
-                            box-shadow: 0 0 0 40px $color-bg-panel inset;
-                            -webkit-text-fill-color: $color-primary-medium
-                        }
-                    }
-                }
-            }
-        }
-        & > .prepend,
-        & > .append,
-        & > .icons {
-            display: flex;
-            align-items: center;
-            color: $color-font-bg-marginal;
-        }
-        & > .prepend > prepend,
-        & > .append > append,
-        & > .icons {
-            display: flex;
-            align-items: center;
-
-            & > vn-icon {
-                font-size: 1.5rem;
-            }
-        }
-        & > .prepend > prepend {
-            padding-right: 12px;
-        }
-        & > .icons {
-            &.pre {
-                padding-left: 12px;
-            }
-            & > vn-icon {
-                cursor: pointer;
-            }
-            & > vn-icon[icon=clear] {
-                display: none;
-            }
-        }
-        & > .icons.pre.clearable {
-            min-width: 22px
-        }
-        & > .underline {
-            position: absolute;
-            bottom: 0;
-            content: ' ';
-            pointer-events: none;
-            width: 100%;
-
-            &.blur {
-                border-bottom: 1px solid $color-input-underline;
-                transition: border-color 200ms ease-in-out;
-            }
-            &.focus {
-                height: 2px;
-                background-color: $color-primary;
-                left: 50%;
-                width: 0;
-                transition-property: width, left, background-color;
-                transition-duration: 300ms;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-            }
-        }
-    }
-    &.dense {
-        & > .hint {
-            display: none;
-        }
-        & > .container > .infix {
-            & > label {
-                top: 8px;
-            }
-            & > .control > * {
-                padding-top: 8px;
-                min-height: 40px;
-            }
-        }
-        &.not-empty,
-        &.focused,
-        &.invalid {
-            & > .container > .infix > label {
-                top: 0;
-                line-height: 8px;
-            }
-        }
-    }
-    &.standout {
-        border-radius: 1px;
-        background-color: rgba(161, 161, 161, 0.1);
-        padding: 0 12px;
-        transition-property: background-color, color;
-        transition-duration: 200ms;
-        transition-timing-function: ease-in-out;
-
-        & > .container {
-            & > .underline {
-                display: none;
-            }
-            & > .infix > .control > input {
-                &:-internal-autofill-selected {
-                    &,
-                    &:hover,
-                    &:active,
-                    &:valid {
-                        box-shadow: 0 0 0 40px #474747 inset;
-                        -webkit-text-fill-color: $color-font-dark
-                    }
-                }
-            }
-            & > .infix > .control > * {
-                color: $color-font-dark;
-
-                &::placeholder {
-                    color: $color-font-bg-dark;
-                }
-            }
-            & > .prepend,
-            & > .append,
-            & > .icons {
-                color: $color-font-bg-dark-marginal;
-            }
-        }
-        &.focused {
-            background-color: $color-font-dark;
-
-            & > .container {
-                & > .infix > .control > input {
-                    &:-internal-autofill-selected {
-                        &,
-                        &:hover,
-                        &:active,
-                        &:valid {
-                            box-shadow: 0 0 0 40px $color-font-dark inset;
-                            -webkit-text-fill-color: $color-font-bg
-                        }
-                    }
-                }
-                & > .infix > .control > * {
-                    color: $color-marginal;
-
-                    &::placeholder {
-                        color: $color-font-bg;
-                    }
-                }
-                & > .prepend,
-                & > .append,
-                & > .icons {
-                    color: $color-marginal;
-                }
-            }
-        }
-    }
-    &.not-empty,
-    &.focused,
-    &.invalid {
-        & > .container > .infix {
-            & > label {
-                top: 5px;
-                color: $color-primary;
-                padding: 0;
-                font-size: .75rem;
-            }
-            & > .control > * {
-                &[type=time],
-                &[type=date],
-                &[type=password] {
-                    opacity: 1;
-                }
-            }
-        }
-    }
-    &.has-icons,
-    &.not-empty:hover,
-    &.not-empty.focused {
-        & > .container {
-            & > .append > append {
-                padding-left: 0;
-            }
-            & > .icons.pre {
-                padding-left: 12px;
-            }
-        }
-    }
-    &:not(.disabled):not(.readonly) {
-        &.focused > .container > .underline.focus {
-            left: 0;
-            width: 100%;
-        }
-        & > .container:hover > .underline.blur {
-            border-color: $color-input-underline-hover;
-        }
-        &.not-empty:hover,
-        &.not-empty.focused {
-            & > .container > .icons > vn-icon[icon=clear] {
-                display: initial;
-            }
-        }
-    }
-    &.readonly > .container {
-        & > .infix > .control > * {
-            caret-color: transparent;
-        }
-        & > .underline.blur {
-            border-bottom-style: dashed;
-        }
-    }
-    & > .hint {
-        padding: 4px 0;
-        height: 12px;
-        color: rgba(0, 0, 0, .4);
-        font-size: .75rem;
-        transform: translateY(-12px);
-        transition-property: opacity, transform, color;
-        transition-duration: 200ms;
-        transition-timing-function: ease-in-out;
-        opacity: 0;
-        visibility: hidden;
-
-        &.filled {
-            opacity: 1;
-            transform: translateY(0);
-            visibility: visible;
-        }
-    }
-    &.invalid {
-        & > .container {
-            & > .infix > label {
-                color: $color-alert;
-            }
-            & > .underline.focus {
-                background-color: $color-alert;
-            }
-            & > .underline.blur {
-                border-bottom-color: $color-alert;
-                opacity: 1;
-            }
-        }
-        & > .hint {
-            color: $color-alert;
-        }
-    }
-}
-- 
2.40.1


From 27f806e607ab3ab9204272dc392a74c6b48ef7bc Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 6 Jul 2023 10:31:17 +0200
Subject: [PATCH 6/8] refs #5633 fix test front

---
 front/core/components/account-number/index.spec.js | 5 ++---
 modules/supplier/front/fiscal-data/index.html      | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/front/core/components/account-number/index.spec.js b/front/core/components/account-number/index.spec.js
index c37aad96ec..da9a98d6c5 100644
--- a/front/core/components/account-number/index.spec.js
+++ b/front/core/components/account-number/index.spec.js
@@ -16,12 +16,11 @@ describe('Component vnAccountNumber', () => {
 
     describe('accountShortToStandard', () => {
         it('should replace dots and emit event with account number', () => {
-            const mockValue = '41.1';
+            controller.field = '41.1';
             const expectedAccountNumber = '4100000001';
 
-            controller.accountShortToStandard(mockValue);
+            controller.accountShortToStandard();
 
-            expect(controller.accountNumber).toBe(expectedAccountNumber);
             expect(controller.$.$emit).toHaveBeenCalledWith('accountShortToStandard', expectedAccountNumber);
         });
     });
diff --git a/modules/supplier/front/fiscal-data/index.html b/modules/supplier/front/fiscal-data/index.html
index 3fe60a99a9..c016238b3a 100644
--- a/modules/supplier/front/fiscal-data/index.html
+++ b/modules/supplier/front/fiscal-data/index.html
@@ -61,7 +61,7 @@
             <vn-account-number
                 vn-one
                 label="Account"
-                vn-name="account"
+                name="account"
                 ng-model="$ctrl.supplier.account">
             </vn-account-number>
             <vn-autocomplete
-- 
2.40.1


From 6c5767ae7cced7a2a4018b5a0b2ee43bb72f273d Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 6 Jul 2023 13:15:54 +0200
Subject: [PATCH 7/8] refs #5633 arreglo e2e, selectors, seccion

---
 e2e/helpers/extensions.js                      | 2 ++
 e2e/paths/13-supplier/03_fiscal_data.spec.js   | 1 +
 modules/client/front/balance/create/index.html | 5 ++++-
 modules/client/front/balance/create/index.js   | 1 -
 modules/supplier/front/fiscal-data/index.html  | 2 +-
 5 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/e2e/helpers/extensions.js b/e2e/helpers/extensions.js
index fe3ef08bd6..1cfba9600e 100644
--- a/e2e/helpers/extensions.js
+++ b/e2e/helpers/extensions.js
@@ -625,6 +625,7 @@ let actions = {
 
         switch (tagName) {
         case 'vn-textfield':
+        case 'vn-account-number':
         case 'vn-datalist':
         case 'vn-input-number':
             await this.clearInput(selector);
@@ -666,6 +667,7 @@ let actions = {
 
         switch (tagName) {
         case 'vn-textfield':
+        case 'vn-account-number':
         case 'vn-autocomplete':
         case 'vn-input-time':
         case 'vn-datalist':
diff --git a/e2e/paths/13-supplier/03_fiscal_data.spec.js b/e2e/paths/13-supplier/03_fiscal_data.spec.js
index 891b769c92..48a667b648 100644
--- a/e2e/paths/13-supplier/03_fiscal_data.spec.js
+++ b/e2e/paths/13-supplier/03_fiscal_data.spec.js
@@ -52,6 +52,7 @@ describe('Supplier fiscal data path', () => {
         });
 
         await page.reloadSection('supplier.card.fiscalData');
+
         const formValues = await page.fetchForm(form, Object.keys(values));
 
         expect(errorMessage.text).toContain('Invalid Tax number');
diff --git a/modules/client/front/balance/create/index.html b/modules/client/front/balance/create/index.html
index 63129882ed..058cda4790 100644
--- a/modules/client/front/balance/create/index.html
+++ b/modules/client/front/balance/create/index.html
@@ -55,7 +55,10 @@
     <vn-vertical ng-show="$ctrl.bankSelection.accountingType.code == 'compensation'">
         <h6 translate>Compensation</h6>
         <vn-account-number
-            account-number="$ctrl.receipt.compensationAccount">
+            vn-one
+            label="Compensation Account"
+            vn-name="compensationAccount"
+            ng-model="$ctrl.receipt.compensationAccount">
         </vn-account-number>
     </vn-vertical>
     <vn-horizontal>
diff --git a/modules/client/front/balance/create/index.js b/modules/client/front/balance/create/index.js
index 62b942ca33..19a52bb6d0 100644
--- a/modules/client/front/balance/create/index.js
+++ b/modules/client/front/balance/create/index.js
@@ -7,7 +7,6 @@ class Controller extends Dialog {
         this.vnReport = vnReport;
         this.vnEmail = vnEmail;
         this.receipt = {};
-        $.$on('accountShortToStandard', (event, value) => this.getClientOrSupplierReference(value));
     }
 
     set payed(value) {
diff --git a/modules/supplier/front/fiscal-data/index.html b/modules/supplier/front/fiscal-data/index.html
index c016238b3a..3fe60a99a9 100644
--- a/modules/supplier/front/fiscal-data/index.html
+++ b/modules/supplier/front/fiscal-data/index.html
@@ -61,7 +61,7 @@
             <vn-account-number
                 vn-one
                 label="Account"
-                name="account"
+                vn-name="account"
                 ng-model="$ctrl.supplier.account">
             </vn-account-number>
             <vn-autocomplete
-- 
2.40.1


From 7c27fb6a2a8844a6342fba629c78f2babeb79f51 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 12 Sep 2023 11:36:57 +0200
Subject: [PATCH 8/8] refs #5633 quit $

---
 front/core/components/account-number/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/core/components/account-number/index.js b/front/core/components/account-number/index.js
index f27ff90884..00ac5ac1df 100644
--- a/front/core/components/account-number/index.js
+++ b/front/core/components/account-number/index.js
@@ -4,7 +4,6 @@ import ngModule from '../../module';
 export default class AccountNumber extends Textfield {
     constructor($element, $) {
         super($element, $);
-        this.$ = $;
         super.insertable = true;
         super.maxLength = 10;
         this.element.addEventListener('change', () => this.accountShortToStandard());
-- 
2.40.1