From b9012fe2badfd8e6cb93dfe8e1e56ba2002cd9d7 Mon Sep 17 00:00:00 2001
From: Thomas Allmer <d4kmor@gmail.com>
Date: Sun, 14 Jul 2019 21:28:10 +0200
Subject: [PATCH] fix(validate): remove deprecated CssClassMixin

---
 packages/validate/src/ValidateMixin.js | 29 ++++++++++++++++----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/validate/src/ValidateMixin.js b/packages/validate/src/ValidateMixin.js
index 0de305129..a3c322566 100644
--- a/packages/validate/src/ValidateMixin.js
+++ b/packages/validate/src/ValidateMixin.js
@@ -2,7 +2,6 @@
 
 import { dedupeMixin, SlotMixin } from '@lion/core';
 import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
-import { CssClassMixin } from '@lion/core/src/CssClassMixin.js';
 import { localize, LocalizeMixin } from '@lion/localize';
 import { Unparseable } from './Unparseable.js';
 import { randomOk } from './validators.js';
@@ -15,7 +14,7 @@ const pascalCase = str => str.charAt(0).toUpperCase() + str.slice(1);
 export const ValidateMixin = dedupeMixin(
   superclass =>
     // eslint-disable-next-line no-unused-vars, no-shadow, max-len
-    class ValidateMixin extends CssClassMixin(ObserverMixin(LocalizeMixin(SlotMixin(superclass)))) {
+    class ValidateMixin extends ObserverMixin(LocalizeMixin(SlotMixin(superclass))) {
       /* * * * * * * * * *
     Configuration  */
 
@@ -120,11 +119,9 @@ export const ValidateMixin = dedupeMixin(
           },
           errorState: {
             type: Boolean,
-            nonEmptyToClass: 'state-error',
           },
           errorShow: {
             type: Boolean,
-            nonEmptyToClass: 'state-error-show',
           },
           warningValidators: {
             type: Object,
@@ -134,11 +131,9 @@ export const ValidateMixin = dedupeMixin(
           },
           warningState: {
             type: Boolean,
-            nonEmptyToClass: 'state-warning',
           },
           warningShow: {
             type: Boolean,
-            nonEmptyToClass: 'state-warning-show',
           },
           infoValidators: {
             type: Object,
@@ -148,11 +143,9 @@ export const ValidateMixin = dedupeMixin(
           },
           infoState: {
             type: Boolean,
-            nonEmptyToClass: 'state-info',
           },
           infoShow: {
             type: Boolean,
-            nonEmptyToClass: 'state-info-show',
           },
           successValidators: {
             type: Object,
@@ -162,15 +155,12 @@ export const ValidateMixin = dedupeMixin(
           },
           successState: {
             type: Boolean,
-            nonEmptyToClass: 'state-success',
           },
           successShow: {
             type: Boolean,
-            nonEmptyToClass: 'state-success-show',
           },
           invalid: {
             type: Boolean,
-            nonEmptyToClass: 'state-invalid',
           },
           message: {
             type: Boolean,
@@ -236,6 +226,23 @@ export const ValidateMixin = dedupeMixin(
         return (this.$$slot && this.$$slot('feedback')) || this.querySelector('[slot="feedback"]');
       }
 
+      updated(changedProperties) {
+        super.updated(changedProperties);
+
+        // @deprecated adding css classes for backwards compatibility
+        this.constructor.validationTypes.forEach(name => {
+          if (changedProperties.has(`${name}State`)) {
+            this.classList[this[`${name}State`] ? 'add' : 'remove'](`state-${name}`);
+          }
+          if (changedProperties.has(`${name}Show`)) {
+            this.classList[this[`${name}Show`] ? 'add' : 'remove'](`state-${name}-show`);
+          }
+        });
+        if (changedProperties.has('invalid')) {
+          this.classList[this.invalid ? 'add' : 'remove'](`state-invalid`);
+        }
+      }
+
       getFieldName(validatorParams) {
         const label =
           this.label || (this.$$slot && this.$$slot('label') && this.$$slot('label').textContent);