#1060 añadir al componente check la popiedad intermediate

e2e/helpers/extensions.js

@@ -441,6 +441,31 @@ let actions = {
             .waitToClick(`vn-left-menu li > a[ui-sref="${sectionRoute}"]`)
             .then(done)
             .catch(done);
+    },
+
+    checkboxState: function(selector, done) {
+        this.wait(selector)
+            .evaluate(checkboxSelector => {
+                return document.querySelector(checkboxSelector).getAttribute('class');
+            }, selector)
+            .then(elementClass => {
+                let classList = elementClass.split(' ');
+                let className;
+
+                if (classList.includes('md-checked'))
+                    className = 'checked';
+                if (classList.includes('md-intermediate'))
+                    className = 'intermediate';
+                if (!classList.includes('md-intermediate') && !classList.includes('md-checked'))
+                    className = 'unchecked';
+
+                if (!className)
+                    throw new Error(`selector: ${selector} is not a md-checkbox`);
+
+                done(null, className);
+            })
+            .then(done)
+            .catch(done);
     }
 };
 

e2e/helpers/selectors.js

@@ -57,34 +57,29 @@ export default {
         fiscalDataButton: `vn-left-menu a[ui-sref="client.card.fiscalData"]`,
         socialNameInput: `${components.vnTextfield}[name="socialName"]`,
         fiscalIdInput: `${components.vnTextfield}[name="fi"]`,
-        equalizationTaxCheckboxLabel: `vn-check[label='Is equalizated'] > label > input`,
+        equalizationTaxCheckbox: `vn-check[label='Is equalizated'] md-checkbox`,
         acceptPropagationButton: `vn-client-fiscal-data > vn-confirm button[response=ACCEPT]`,
         addressInput: `${components.vnTextfield}[name="street"]`,
         cityInput: `${components.vnTextfield}[name="city"]`,
         postcodeInput: `${components.vnTextfield}[name="postcode"]`,
         provinceAutocomplete: `vn-autocomplete[field="$ctrl.client.provinceFk"]`,
         countryAutocomplete: `vn-autocomplete[field="$ctrl.client.countryFk"]`,
-        activeCheckboxLabel: `vn-check[label="Active"] > label`,
+        activeCheckbox: `vn-check[label="Active"] md-checkbox`,
-        activeCheckboxInput: `vn-check[label="Active"] input`,
+        frozenCheckbox: `vn-check[label="Frozen"] md-checkbox`,
-        frozenCheckboxLabel: `vn-check[label="Frozen"] > label`,
+        invoiceByAddressCheckbox: `vn-check[label='Invoice by address'] md-checkbox`,
-        frozenCheckboxInput: `vn-check[label="Frozen"] input`,
+        verifiedDataCheckbox: `vn-check[label="Verified data"] md-checkbox`,
-        invoiceByAddressCheckboxInput: `vn-check[label='Invoice by address'] > label > input`,
+        hasToInvoiceCheckbox: `vn-check[label='Has to invoice'] md-checkbox`,
-        verifiedDataCheckbox: `vn-check[label="Verified data"] input`,
+        invoiceByMailCheckbox: `vn-check[label='Invoice by mail'] md-checkbox`,
-        verifiedDataCheckboxInput: `vn-check[label="Verified data"] > label > input`,
+        viesCheckbox: `vn-check[label='Vies'] md-checkbox`,
-        hasToInvoiceCheckboxLabel: `vn-check[label='Has to invoice'] > label`,
-        hasToInvoiceCheckboxInput: `vn-check[label='Has to invoice'] input`,
-        invoiceByMailCheckboxLabel: `vn-check[label='Invoice by mail'] > label`,
-        invoiceByMailCheckboxInput: `vn-check[label='Invoice by mail'] input`,
-        viesCheckboxInput: `vn-check[label='Vies'] > label > input`,
         saveButton: `${components.vnSubmit}`
     },
     clientPayMethod: {
         payMethodAutocomplete: `vn-autocomplete[field="$ctrl.client.payMethodFk"]`,
         IBANInput: `${components.vnTextfield}[name="iban"]`,
         dueDayInput: `${components.vnTextfield}[name="dueDay"]`,
-        receivedCoreLCRCheckbox: `vn-check[label='Received LCR'] > label > input`,
+        receivedCoreLCRCheckbox: `vn-check[label='Received LCR'] md-checkbox`,
-        receivedCoreVNLCheckbox: `vn-check[label='Received core VNL'] > label > input`,
+        receivedCoreVNLCheckbox: `vn-check[label='Received core VNL'] md-checkbox`,
-        receivedB2BVNLCheckbox: `vn-check[label='Received B2B VNL'] > label > input`,
+        receivedB2BVNLCheckbox: `vn-check[label='Received B2B VNL'] md-checkbox`,
         swiftBicAutocomplete: 'vn-client-billing-data vn-autocomplete[field="$ctrl.client.bankEntityFk"]',
         clearswiftBicButton: `vn-client-billing-data vn-autocomplete[field="$ctrl.client.bankEntityFk"] > div > div > div > vn-icon > i`,
         newBankEntityButton: 'vn-client-billing-data vn-icon-button[vn-tooltip="New bank entity"] > button',
@@ -96,7 +91,7 @@ export default {
     clientAddresses: {
         addressesButton: `vn-left-menu a[ui-sref="client.card.address.index"]`,
         createAddress: `vn-client-address-index ${components.vnFloatButton}`,
-        defaultCheckboxInput: `vn-check[label='Default'] > label > input`,
+        defaultCheckboxInput: `vn-check[label='Default'] md-checkbox`,
         consigneeInput: `${components.vnTextfield}[name="nickname"]`,
         streetAddressInput: `${components.vnTextfield}[name="street"]`,
         postcodeInput: `${components.vnTextfield}[name="postalCode"]`,
@@ -109,8 +104,8 @@ export default {
         secondMakeDefaultStar: 'vn-client-address-index vn-card vn-horizontal:nth-child(2) vn-icon-button[icon="star_border"]',
         firstEditButton: `vn-client-address-index vn-icon-button[icon='edit']`,
         secondEditButton: `vn-client-address-index vn-horizontal:nth-child(2) vn-icon-button[icon='edit']`,
-        activeCheckbox: `vn-check[label='Enabled'] > label > input`,
+        activeCheckbox: `vn-check[label='Enabled'] md-checkbox`,
-        equalizationTaxCheckboxLabel: `vn-client-address-edit vn-check[label='Is equalizated'] > label > input`,
+        equalizationTaxCheckbox: `vn-client-address-edit vn-check[label="Is equalizated"] md-checkbox`,
         firstObservationTypeAutocomplete: `vn-client-address-edit [name=observations] :nth-child(1) [field="observation.observationTypeFk"]`,
         firstObservationDescriptionInput: `vn-client-address-edit [name=observations] :nth-child(1) [model="observation.description"] input`,
         secondObservationTypeAutocomplete: `vn-client-address-edit [name=observations] :nth-child(2) [field="observation.observationTypeFk"]`,
@@ -122,7 +117,7 @@ export default {
     },
     clientWebAccess: {
         webAccessButton: `vn-left-menu a[ui-sref="client.card.webAccess"]`,
-        enableWebAccessCheckbox: `vn-check[label='Enable web access'] > label > input`,
+        enableWebAccessCheckbox: `vn-check[label='Enable web access'] md-checkbox`,
         userNameInput: `${components.vnTextfield}[name="name"]`,
         saveButton: `${components.vnSubmit}`
     },
@@ -205,7 +200,7 @@ export default {
         originAutocomplete: `vn-autocomplete[field="$ctrl.item.originFk"]`,
         expenceAutocomplete: `vn-autocomplete[field="$ctrl.item.expenceFk"]`,
         longNameInput: `vn-textfield[field="$ctrl.item.longName"] input`,
-        isActiveCheckbox: `vn-check[label='Active'] > label > input`,
+        isActiveCheckbox: `vn-check[label='Active'] md-checkbox`,
         submitBasicDataButton: `${components.vnSubmit}`
     },
     itemTags: {
@@ -350,7 +345,7 @@ export default {
         firstSaleReservedIcon: 'vn-ticket-sale vn-tr:nth-child(1) > vn-td:nth-child(2) > vn-icon:nth-child(3)',
         firstSaleColour: `vn-ticket-sale vn-tr:nth-child(1) vn-td:nth-child(5) section:nth-child(1)`,
         firstSaleLength: `vn-ticket-sale vn-tr:nth-child(1) vn-td:nth-child(5) section:nth-child(3)`,
-        firstSaleCheckbox: `vn-ticket-sale vn-tr:nth-child(1) vn-check[field="sale.checked"] label`,
+        firstSaleCheckbox: `vn-ticket-sale vn-tr:nth-child(1) vn-check[field="sale.checked"] md-checkbox`,
         secondSaleClaimIcon: 'vn-ticket-sale > vn-vertical > vn-card > div > vn-vertical > vn-table > div > vn-tbody > vn-tr:nth-child(2) > vn-td:nth-child(2) > a > vn-icon',
         secondSaleColour: `vn-ticket-sale vn-tr:nth-child(2) vn-td:nth-child(5) section:nth-child(5)`,
         secondSalePrice: `vn-ticket-sale vn-tr:nth-child(2) vn-td:nth-child(7)`,
@@ -358,9 +353,9 @@ export default {
         secondSaleImport: `vn-ticket-sale vn-tr:nth-child(2) vn-td:nth-child(9)`,
         secondSaleText: `vn-table div > vn-tbody > vn-tr:nth-child(2)`,
         totalImport: 'vn-ticket-sale > vn-vertical > vn-card > div > vn-vertical > vn-horizontal > vn-one > p:nth-child(3) > strong',
-        selectAllSalesCheckbox: `vn-ticket-sale vn-thead vn-check label`,
+        selectAllSalesCheckbox: `vn-ticket-sale vn-thead vn-check md-checkbox`,
-        secondSaleCheckbox: `vn-ticket-sale vn-tr:nth-child(2) vn-check[field="sale.checked"] label`,
+        secondSaleCheckbox: `vn-ticket-sale vn-tr:nth-child(2) vn-check[field="sale.checked"] md-checkbox`,
-        thirdSaleCheckbox: `vn-ticket-sale vn-tr:nth-child(3) vn-check[field="sale.checked"] label`,
+        thirdSaleCheckbox: `vn-ticket-sale vn-tr:nth-child(3) vn-check[field="sale.checked"] md-checkbox`,
         deleteSaleButton: 'vn-ticket-sale vn-tool-bar > vn-button[icon="delete"]',
         transferSaleButton: 'vn-ticket-sale vn-tool-bar > vn-button[icon="call_split"]',
         moveToTicketInput: 'vn-ticket-sale vn-popover.transfer vn-textfield[model="$ctrl.moveToTicketFk"] input',
@@ -441,7 +436,7 @@ export default {
     },
     claimBasicData: {
         claimStateAutocomplete: 'vn-claim-basic-data vn-autocomplete[field="$ctrl.claim.claimStateFk"]',
-        isPaidWithManaCheckbox: 'vn-check[field="$ctrl.claim.isChargedToMana"] > label > input',
+        isPaidWithManaCheckbox: 'vn-check[field="$ctrl.claim.isChargedToMana"] md-checkbox',
         responsabilityInputRange: `vn-input-range`,
         observationInput: `vn-textarea[label="Observation"] textarea`,
         saveButton: `${components.vnSubmit}`

e2e/paths/claim-module/01_edit_basic_data.spec.js

@@ -33,12 +33,10 @@ describe('Claim edit basic data path', () => {
     });
 
     it('should confirm the Is paid with mana checkbox is checked', async() => {
-        const value = await nightmare
+        const result = await nightmare
-            .evaluate(selector => {
+            .checkboxState(selectors.claimBasicData.isPaidWithManaCheckbox);
-                return document.querySelector(selector).checked;
-            }, selectors.claimBasicData.isPaidWithManaCheckbox);
 
-        expect(value).toBeTruthy();
+        expect(result).toBe('checked');
     });
 
     it('should confirm the claim observation was edited', async() => {

e2e/paths/client-module/03_edit_fiscal_data.spec.js

@@ -15,12 +15,9 @@ describe('Client Edit fiscalData path', () => {
         it(`should click on the 1st edit icon to check EQtax isnt checked`, async() => {
             const result = await nightmare
                 .waitToClick(selectors.clientAddresses.firstEditButton)
-                .wait(selectors.clientAddresses.equalizationTaxCheckboxLabel)
+                .checkboxState(selectors.clientAddresses.equalizationTaxCheckbox);
-                .evaluate(selector => {
-                    return document.querySelector(selector).checked;
-                }, selectors.clientAddresses.equalizationTaxCheckboxLabel);
 
-            expect(result).toBeFalsy();
+            expect(result).toBe('unchecked');
         });
 
         // Confirms all addresses have EQtax false for future propagation test step 2
@@ -28,12 +25,9 @@ describe('Client Edit fiscalData path', () => {
             const result = await nightmare
                 .waitToClick(selectors.clientAddresses.addressesButton)
                 .waitToClick(selectors.clientAddresses.secondEditButton)
-                .wait(selectors.clientAddresses.equalizationTaxCheckboxLabel)
+                .checkboxState(selectors.clientAddresses.equalizationTaxCheckbox);
-                .evaluate(selector => {
-                    return document.querySelector(selector).checked;
-                }, selectors.clientAddresses.equalizationTaxCheckboxLabel);
 
-            expect(result).toBeFalsy();
+            expect(result).toBe('unchecked');
         });
 
         it(`should click on the fiscal data button`, async() => {
@@ -47,9 +41,10 @@ describe('Client Edit fiscalData path', () => {
 
         it('should not be able to edit the verified data checkbox', async() => {
             const result = await nightmare
+                .wait(selectors.clientFiscalData.verifiedDataCheckbox)
                 .evaluate(selector => {
-                    return document.querySelector(selector).disabled;
+                    return document.querySelector(selector).getAttribute('disabled');
-                }, selectors.clientFiscalData.verifiedDataCheckboxInput);
+                }, selectors.clientFiscalData.verifiedDataCheckbox);
 
             expect(result).toBeTruthy();
         });
@@ -78,14 +73,14 @@ describe('Client Edit fiscalData path', () => {
                 .write(selectors.clientFiscalData.cityInput, 'N/A')
                 .autocompleteSearch(selectors.clientFiscalData.countryAutocomplete, 'Francia')
                 .autocompleteSearch(selectors.clientFiscalData.provinceAutocomplete, 'Province two')
-                .waitToClick(selectors.clientFiscalData.activeCheckboxLabel)
+                .waitToClick(selectors.clientFiscalData.activeCheckbox)
-                .waitToClick(selectors.clientFiscalData.frozenCheckboxLabel)
+                .waitToClick(selectors.clientFiscalData.frozenCheckbox)
-                .waitToClick(selectors.clientFiscalData.hasToInvoiceCheckboxLabel)
+                .waitToClick(selectors.clientFiscalData.hasToInvoiceCheckbox)
-                .waitToClick(selectors.clientFiscalData.viesCheckboxInput)
+                .waitToClick(selectors.clientFiscalData.viesCheckbox)
-                .waitToClick(selectors.clientFiscalData.invoiceByMailCheckboxLabel)
+                .waitToClick(selectors.clientFiscalData.invoiceByMailCheckbox)
-                .waitToClick(selectors.clientFiscalData.invoiceByAddressCheckboxInput)
+                .waitToClick(selectors.clientFiscalData.invoiceByAddressCheckbox)
-                .waitToClick(selectors.clientFiscalData.equalizationTaxCheckboxLabel)
+                .waitToClick(selectors.clientFiscalData.equalizationTaxCheckbox)
-                .waitToClick(selectors.clientFiscalData.verifiedDataCheckboxInput)
+                .waitToClick(selectors.clientFiscalData.verifiedDataCheckbox)
                 .waitToClick(selectors.clientFiscalData.saveButton)
                 .waitForLastSnackbar();
 
@@ -94,7 +89,7 @@ describe('Client Edit fiscalData path', () => {
 
         it('should receive an error if the fiscal id contains A or B at the beginning', async() => {
             const result = await nightmare
-                .waitToClick(selectors.clientFiscalData.viesCheckboxInput)
+                .waitToClick(selectors.clientFiscalData.viesCheckbox)
                 .clearInput(selectors.clientFiscalData.fiscalIdInput)
                 .write(selectors.clientFiscalData.fiscalIdInput, 'A94980061C')
                 .waitToClick(selectors.clientFiscalData.saveButton)
@@ -135,12 +130,9 @@ describe('Client Edit fiscalData path', () => {
         it(`should click on the 1st edit icon to confirm EQtax is checked`, async() => {
             const result = await nightmare
                 .waitToClick(selectors.clientAddresses.firstEditButton)
-                .wait(selectors.clientAddresses.equalizationTaxCheckboxLabel)
+                .checkboxState(selectors.clientAddresses.equalizationTaxCheckbox);
-                .evaluate(selector => {
-                    return document.querySelector(selector).checked;
-                }, selectors.clientAddresses.equalizationTaxCheckboxLabel);
 
-            expect(result).toBeTruthy();
+            expect(result).toBe('checked');
         });
 
         // confirm all addresses have now EQtax checked step 3
@@ -148,19 +140,16 @@ describe('Client Edit fiscalData path', () => {
             const result = await nightmare
                 .waitToClick(selectors.clientAddresses.addressesButton)
                 .waitToClick(selectors.clientAddresses.secondEditButton)
-                .wait(selectors.clientAddresses.equalizationTaxCheckboxLabel)
+                .checkboxState(selectors.clientAddresses.equalizationTaxCheckbox);
-                .evaluate(selector => {
-                    return document.querySelector(selector).checked;
-                }, selectors.clientAddresses.equalizationTaxCheckboxLabel);
 
-            expect(result).toBeTruthy();
+            expect(result).toBe('checked');
         });
 
         it('should navigate back to fiscal data and uncheck EQtax then check VIES', async() => {
             const result = await nightmare
                 .waitToClick(selectors.clientFiscalData.fiscalDataButton)
-                .waitToClick(selectors.clientFiscalData.viesCheckboxInput)
+                .waitToClick(selectors.clientFiscalData.viesCheckbox)
-                .waitToClick(selectors.clientFiscalData.equalizationTaxCheckboxLabel)
+                .waitToClick(selectors.clientFiscalData.equalizationTaxCheckbox)
                 .waitToClick(selectors.clientFiscalData.saveButton)
                 .waitForLastSnackbar();
 
@@ -227,74 +216,58 @@ describe('Client Edit fiscalData path', () => {
 
         it('should confirm active checkbox is unchecked', async() => {
             const result = await nightmare
-                .evaluate(selector => {
+                .checkboxState(selectors.clientFiscalData.activeCheckbox);
-                    return document.querySelector(selector).checked;
-                }, selectors.clientFiscalData.activeCheckboxLabel);
 
-            expect(result).toBeFalsy();
+            expect(result).toBe('unchecked');
         });
 
         it('should confirm frozen checkbox is unchecked', async() => {
             const result = await nightmare
-                .evaluate(selector => {
+                .checkboxState(selectors.clientFiscalData.frozenCheckbox);
-                    return document.querySelector(selector).checked;
-                }, selectors.clientFiscalData.frozenCheckboxLabel);
 
-            expect(result).toBeFalsy();
+            expect(result).toBe('unchecked');
         });
 
         it('should confirm Has to invoice checkbox is unchecked', async() => {
             const result = await nightmare
-                .evaluate(selector => {
+                .checkboxState(selectors.clientFiscalData.hasToInvoiceCheckbox);
-                    return document.querySelector(selector).checked;
-                }, selectors.clientFiscalData.hasToInvoiceCheckboxLabel);
 
-            expect(result).toBeFalsy();
+            expect(result).toBe('unchecked');
         });
 
         it('should confirm Vies checkbox is checked', async() => {
             const result = await nightmare
-                .evaluate(selector => {
+                .checkboxState(selectors.clientFiscalData.viesCheckbox);
-                    return document.querySelector(selector).checked;
-                }, selectors.clientFiscalData.viesCheckboxInput);
 
-            expect(result).toBeTruthy();
+            expect(result).toBe('checked');
         });
 
         it('should confirm Invoice by mail checkbox is unchecked', async() => {
             const result = await nightmare
-                .evaluate(selector => {
+                .checkboxState(selectors.clientFiscalData.invoiceByMailCheckbox);
-                    return document.querySelector(selector).checked;
-                }, selectors.clientFiscalData.invoiceByMailCheckboxLabel);
 
-            expect(result).toBeFalsy();
+            expect(result).toBe('unchecked');
         });
 
         it('should confirm invoice by address checkbox is unchecked', async() => {
             const result = await nightmare
-                .evaluate(selector => {
+                .checkboxState(selectors.clientFiscalData.invoiceByAddressCheckbox);
-                    return document.querySelector(selector).checked;
-                }, selectors.clientFiscalData.invoiceByAddressCheckboxInput);
 
-            expect(result).toBeFalsy();
+            expect(result).toBe('unchecked');
         });
 
         it('should confirm Equalization tax checkbox is unchecked', async() => {
             const result = await nightmare
-                .evaluate(selector => {
+                .checkboxState(selectors.clientFiscalData.equalizationTaxCheckbox);
-                    return document.querySelector(selector).checked;
-                }, selectors.clientFiscalData.equalizationTaxCheckboxLabel);
 
-            expect(result).toBeFalsy();
+            expect(result).toBe('unchecked');
         });
 
         it('should confirm Verified data checkbox is checked', async() => {
             const result = await nightmare
-                .evaluate(selector => {
+                .checkboxState(selectors.clientFiscalData.verifiedDataCheckbox);
-                    return document.querySelector(selector).checked;
-                }, selectors.clientFiscalData.verifiedDataCheckboxInput);
 
-            expect(result).toBeTruthy();
+            expect(result).toBe('checked');
         });
 
         // confirm invoice by address checkbox gets checked if the EQtax differs between addresses step 1
@@ -311,7 +284,7 @@ describe('Client Edit fiscalData path', () => {
         it(`should click on the 1st edit icon to access the address details and uncheck EQtax checkbox`, async() => {
             const result = await nightmare
                 .waitToClick(selectors.clientAddresses.firstEditButton)
-                .waitToClick(selectors.clientAddresses.equalizationTaxCheckboxLabel)
+                .waitToClick(selectors.clientAddresses.equalizationTaxCheckbox)
                 .waitToClick(selectors.clientAddresses.saveButton)
                 .waitForLastSnackbar();
 
@@ -322,12 +295,9 @@ describe('Client Edit fiscalData path', () => {
         it('should navigate back to fiscal data to confirm invoice by address is now checked', async() => {
             const result = await nightmare
                 .waitToClick(selectors.clientFiscalData.fiscalDataButton)
-                .wait(selectors.clientFiscalData.invoiceByAddressCheckboxInput)
+                .checkboxState(selectors.clientFiscalData.invoiceByAddressCheckbox);
-                .evaluate(selector => {
-                    return document.querySelector(selector).checked;
-                }, selectors.clientFiscalData.invoiceByAddressCheckboxInput);
 
-            expect(result).toBeTruthy();
+            expect(result).toBe('checked');
         });
     });
 });

e2e/paths/client-module/04_edit_pay_method.spec.js

@@ -98,29 +98,23 @@ describe('Client Edit pay method path', () => {
     });
 
     it('should confirm Received LCR checkbox is checked', async() => {
-        const checkedBox = await nightmare
+        const result = await nightmare
-            .evaluate(selector => {
+            .checkboxState(selectors.clientPayMethod.receivedCoreLCRCheckbox);
-                return document.querySelector(selector).checked;
-            }, selectors.clientPayMethod.receivedCoreLCRCheckbox);
 
-        expect(checkedBox).toBeTruthy();
+        expect(result).toBe('checked');
     });
 
     it('should confirm Received core VNL checkbox is unchecked', async() => {
-        const checkedBox = await nightmare
+        const result = await nightmare
-            .evaluate(selector => {
+            .checkboxState(selectors.clientPayMethod.receivedCoreVNLCheckbox);
-                return document.querySelector(selector).checked;
-            }, selectors.clientPayMethod.receivedCoreVNLCheckbox);
 
-        expect(checkedBox).toBeFalsy();
+        expect(result).toBe('unchecked');
     });
 
     it('should confirm Received B2B VNL checkbox is unchecked', async() => {
-        const checkedBox = await nightmare
+        const result = await nightmare
-            .evaluate(selector => {
+            .checkboxState(selectors.clientPayMethod.receivedB2BVNLCheckbox);
-                return document.querySelector(selector).checked;
-            }, selectors.clientPayMethod.receivedB2BVNLCheckbox);
 
-        expect(checkedBox).toBeFalsy();
+        expect(result).toBe('unchecked');
     });
 });

e2e/paths/client-module/07_edit_web_access.spec.js

@@ -28,12 +28,9 @@ describe('Client Edit web access path', () => {
             .wait(selectors.clientBasicData.nameInput)
             .waitToClick(selectors.clientsIndex.othersButton)
             .waitToClick(selectors.clientWebAccess.webAccessButton)
-            .wait(selectors.clientWebAccess.enableWebAccessCheckbox)
+            .checkboxState(selectors.clientWebAccess.enableWebAccessCheckbox);
-            .evaluate(selector => {
-                return document.querySelector(selector).checked;
-            }, selectors.clientWebAccess.enableWebAccessCheckbox);
 
-        expect(result).toBeFalsy();
+        expect(result).toBe('unchecked');
     });
 
     it('should confirm web access name have been updated', async() => {

e2e/paths/client-module/12_lock_of_verified_data.spec.js

@@ -15,9 +15,9 @@ describe('Client lock verified data path', () => {
         it('should confirm verified data button is disabled for salesPerson', async() => {
             const result = await nightmare
                 .wait(200)
-                .wait(selectors.clientFiscalData.verifiedDataCheckboxInput)
+                .wait(selectors.clientFiscalData.verifiedDataCheckbox)
                 .evaluate(selector => {
-                    return document.querySelector(selector).disabled;
+                    return document.querySelector(selector).getAttribute('disabled');
                 }, selectors.clientFiscalData.verifiedDataCheckbox);
 
             expect(result).toBeTruthy();
@@ -92,17 +92,17 @@ describe('Client lock verified data path', () => {
 
         it('should confirm verified data button is enabled for administrative', async() => {
             const result = await nightmare
-                .wait(selectors.clientFiscalData.verifiedDataCheckboxInput)
+                .wait(selectors.clientFiscalData.verifiedDataCheckbox)
                 .evaluate(selector => {
                     return document.querySelector(selector).disabled;
                 }, selectors.clientFiscalData.verifiedDataCheckbox);
 
-            expect(result).not.toBeTruthy();
+            expect(result).toBeFalsy();
         });
 
         it('should check the Verified data checkbox', async() => {
             const result = await nightmare
-                .waitToClick(selectors.clientFiscalData.verifiedDataCheckboxInput)
+                .waitToClick(selectors.clientFiscalData.verifiedDataCheckbox)
                 .waitToClick(selectors.clientFiscalData.saveButton)
                 .waitForLastSnackbar();
 
@@ -112,12 +112,9 @@ describe('Client lock verified data path', () => {
         it('should confirm Verified data checkbox is checked', async() => {
             const result = await nightmare
                 .reloadSection('client.card.fiscalData')
-                .wait(selectors.clientFiscalData.verifiedDataCheckboxInput)
+                .checkboxState(selectors.clientFiscalData.verifiedDataCheckbox);
-                .evaluate(selector => {
-                    return document.querySelector(selector).checked;
-                }, selectors.clientFiscalData.verifiedDataCheckboxInput);
 
-            expect(result).toBeTruthy();
+            expect(result).toBe('checked');
         });
 
         it('should again edit the social name', async() => {
@@ -189,12 +186,12 @@ describe('Client lock verified data path', () => {
 
         it('should confirm verified data button is disabled once again for salesPerson', async() => {
             const result = await nightmare
-                .wait(selectors.clientFiscalData.verifiedDataCheckboxInput)
+                .wait(selectors.clientFiscalData.verifiedDataCheckbox)
                 .evaluate(selector => {
-                    return document.querySelector(selector).disabled;
+                    return document.querySelector(selector).getAttribute('disabled');
                 }, selectors.clientFiscalData.verifiedDataCheckbox);
 
-            expect(result).toBe(true);
+            expect(result).toBeTruthy();
         });
 
         it('should not be able to save change throwing a verified data error', async() => {
@@ -258,9 +255,9 @@ describe('Client lock verified data path', () => {
 
         it('should confirm verified data button is enabled for salesAssistant', async() => {
             const result = await nightmare
-                .wait(selectors.clientFiscalData.verifiedDataCheckboxInput)
+                .wait(selectors.clientFiscalData.verifiedDataCheckbox)
                 .evaluate(selector => {
-                    return document.querySelector(selector).disabled;
+                    return document.querySelector(selector).getAttribute('disabled');
                 }, selectors.clientFiscalData.verifiedDataCheckbox);
 
             expect(result).toBeFalsy();
@@ -334,12 +331,12 @@ describe('Client lock verified data path', () => {
 
         it('should confirm verified data button is enabled once again', async() => {
             const result = await nightmare
-                .wait(selectors.clientFiscalData.verifiedDataCheckboxInput)
+                .wait(selectors.clientFiscalData.verifiedDataCheckbox)
                 .evaluate(selector => {
-                    return document.querySelector(selector).disabled;
+                    return document.querySelector(selector).getAttribute('disabled');
                 }, selectors.clientFiscalData.verifiedDataCheckbox);
 
-            expect(result).toBe(true);
+            expect(result).toBeTruthy();
         });
 
         it('should confirm the form is enabled for salesPerson', async() => {
@@ -349,7 +346,7 @@ describe('Client lock verified data path', () => {
                     return document.querySelector(selector).disabled;
                 }, 'vn-textfield[field="$ctrl.client.socialName"] > div');
 
-            expect(result).not.toBe(true);
+            expect(result).toBeFalsy();
         });
     });
 });

e2e/paths/item-module/02_edit_item_basic_data.spec.js

@@ -89,10 +89,8 @@ describe('Item Edit basic data path', () => {
 
     it('should confirm isActive checkbox is unchecked', async() => {
         const result = await nightmare
-            .evaluate(selector => {
+            .checkboxState(selectors.itemBasicData.isActiveCheckbox);
-                return document.querySelector(selector).checked;
-            }, selectors.itemBasicData.isActiveCheckbox);
 
-        expect(result).toBeFalsy();
+        expect(result).toBe('unchecked');
     });
 });

front/core/components/check/check.html

@@ -1,7 +1,11 @@
-<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+<md-checkbox 
-	<input type="checkbox" class="mdl-checkbox__input"/>
+	aria-label="Checkbox 1"
-	<span class="mdl-checkbox__label" translate>{{::$ctrl.label}}</span>
+	md-indeterminate="$ctrl.isIntermediate"
-</label>
+	ng-disabled="$ctrl.disabled"
+	ng-checked="$ctrl.checkValue"
+	ng-model="$ctrl.checkValue">
+	<span translate>{{::$ctrl.label}}</span>
+</md-checkbox>
 <i class="material-icons"
 	ng-if="$ctrl.hasInfo"
 	vn-tooltip="{{$ctrl.info}}">

front/core/components/check/check.js

@@ -1,44 +1,46 @@
 import ngModule from '../../module';
-import Input from '../../lib/input';
 import './style.scss';
 
-export default class Controller extends Input {
+export default class Controller {
-    constructor($element, $scope, $attrs) {
+    constructor($attrs) {
-        super($element, $scope);
-        componentHandler.upgradeElement(this.element.firstChild);
-        this.mdlElement = this.element.firstChild.MaterialCheckbox;
-        this.input.addEventListener('change', () => this.onChange());
         this.hasInfo = Boolean($attrs.info);
         this.info = $attrs.info || null;
     }
-    set field(value) {
+
+    set checkValue(value) {
+        this.checkIntermediate();
+        if (this.isIntermediate)
+            value = false;
+
         this._field = value;
-        this.input.checked = value == true;
+        this._checkValue = value;
-        this.mdlUpdate();
     }
+
+    get checkValue() {
+        return this._checkValue;
+    }
+
+    set field(value) {
+        this.checkValue = value;
+    }
+
     get field() {
+        if (!this._field && this.isIntermediate)
+            return null;
+
         return this._field;
     }
-    $onInit() {
+
-        if (this.model) {
+    checkIntermediate() {
-            this.model.$render = () => {
+        if ((this.intermediate || (this._field === false && this.tripleState)) && !this.isIntermediate) {
-                this.input.checked = this.model.$viewValue || false;
+            this.isIntermediate = true;
-                this.mdlUpdate();
+            return;
-            };
+        }
-            this.$element.on('blur keyup change', () => {
+
-                this.$.$evalAsync(() => {
+        this.isIntermediate = false;
-                    this.model.$setViewValue(this.input.checked);
-                });
-            });
     }
 }
-    onChange() {
+Controller.$inject = ['$attrs'];
-        this._field = this.input.checked == true;
-        this.$.$applyAsync();
-        this.emit('change');
-    }
-}
-Controller.$inject = ['$element', '$scope', '$attrs'];
 
 ngModule.component('vnCheck', {
     template: require('./check.html'),
@@ -48,9 +50,10 @@ ngModule.component('vnCheck', {
     },
     bindings: {
         field: '=?',
-        onChange: '&?',
         label: '@?',
         disabled: '<?',
-        rule: '@?'
+        checked: '<?',
+        tripleState: '<?',
+        intermediate: '<?'
     }
 });

front/core/directives/acl.js

@@ -40,7 +40,7 @@ function vnAcl(aclService, $timeout) {
         if (!aclService.hasAny(acls)) {
             if (action === 'disabled') {
                 let input = $element[0];
-                let selector = 'input, textarea, button, submit';
+                let selector = 'input, textarea, button, submit, md-checkbox';
 
                 if (!input.matches(selector))
                     input = input.querySelector(selector);

front/core/vendor.js

@@ -8,12 +8,15 @@ import 'angular-translate-loader-partial';
 import '@uirouter/angularjs';
 import 'mg-crud';
 import 'oclazyload';
+import 'angular-material';
+import 'angular-material/modules/scss/angular-material.scss';
 
 export const ngDeps = [
     'pascalprecht.translate',
     'ui.router',
     'mgCrud',
-    'oc.lazyLoad'
+    'oc.lazyLoad',
+    'ngMaterial'
 ];
 
 import 'material-design-lite';

front/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "salix-client",
+  "name": "salix-front",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -31,6 +31,21 @@
       "resolved": "https://registry.npmjs.org/angular/-/angular-1.7.5.tgz",
       "integrity": "sha512-760183yxtGzni740IBTieNuWLtPNAoMqvmC0Z62UoU0I3nqk+VJuO3JbQAXOyvo3Oy/ZsdNQwrSTh/B0OQZjNw=="
     },
+    "angular-animate": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/angular-animate/-/angular-animate-1.7.7.tgz",
+      "integrity": "sha512-KLbU9gtgCyNSaMZKnNe9Yi6UTlDMN2EWyokQ06TG5fbDWOePm+kv2xqeUg1S2h+ZLjK0NnoVDIvwDhVQ+AWAag=="
+    },
+    "angular-aria": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/angular-aria/-/angular-aria-1.7.7.tgz",
+      "integrity": "sha512-Jju0VudfKVp+6FUtfzpDBuOJE8+8cGPSM10nRicXvJRX/Nx/YOu38f2aL3HQwThrRK+3E5jfo7yRwVNYoSmSxg=="
+    },
+    "angular-material": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/angular-material/-/angular-material-1.1.12.tgz",
+      "integrity": "sha512-hvYgVSAxmXy+ozm+FcdGrTrBKm/TLubCgJ8xZR3LNYYmLfsIfzh4Eyk87inmTCXS02KYL0EX2dUeiVmanHlIaQ=="
+    },
     "angular-translate": {
       "version": "2.18.1",
       "resolved": "https://registry.npmjs.org/angular-translate/-/angular-translate-2.18.1.tgz",

front/package.json

@@ -12,6 +12,9 @@
 		"@babel/polyfill": "^7.2.5",
 		"@uirouter/angularjs": "^1.0.20",
 		"angular": "^1.7.5",
+		"angular-animate": "^1.7.7",
+		"angular-aria": "^1.7.7",
+		"angular-material": "^1.1.12",
 		"angular-translate": "^2.18.1",
 		"angular-translate-loader-partial": "^2.18.1",
 		"flatpickr": "^4.5.2",