feat(components): add component name class

src/components/badge/badge.ts

@@ -21,19 +21,19 @@ export class Badge extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('badge', val);
+    this._setColor(val);
   }
 
   /**
    * @input {string} The mode to apply to this component.
    */
   @Input()
   set mode(val: string) {
-    this._setMode('badge', val);
+    this._setMode(val);
   }
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer);
+    super(config, elementRef, renderer, 'badge');
 
     this.mode = config.get('mode');
   }

src/components/ion.ts

@@ -26,10 +26,16 @@ export class Ion {
   /** @private */
   _mode: string;
 
-  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+  /** @private */
+  _componentName: string;
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer, componentName: string) {
     this._config = config;
     this._elementRef = elementRef;
     this._renderer = renderer;
+    this._componentName = componentName;
+
+    this._setComponentName();
   }
 
   /** @private */
@@ -48,32 +54,37 @@ export class Ion {
   }
 
   /** @private */
-  _setColor(componentName: string, newColor: string) {
+  _setColor(newColor: string) {
     if (this._color) {
-      this.setElementClass(`${componentName}-${this._mode}-${this._color}`, false);
+      this.setElementClass(`${this._componentName}-${this._mode}-${this._color}`, false);
     }
     if (newColor) {
-      this.setElementClass(`${componentName}-${this._mode}-${newColor}`, true);
+      this.setElementClass(`${this._componentName}-${this._mode}-${newColor}`, true);
       this._color = newColor;
     }
   }
 
   /** @private */
-  _setMode(componentName: string, newMode: string) {
+  _setMode(newMode: string) {
     if (this._mode) {
-      this.setElementClass(`${componentName}-${this._mode}`, false);
+      this.setElementClass(`${this._componentName}-${this._mode}`, false);
     }
     if (newMode) {
-      this.setElementClass(`${componentName}-${newMode}`, true);
+      this.setElementClass(`${this._componentName}-${newMode}`, true);
 
       // Remove the color class associated with the previous mode,
       // change the mode, then add the new color class
-      this._setColor(componentName, null);
+      this._setColor(null);
       this._mode = newMode;
-      this._setColor(componentName, this._color);
+      this._setColor(this._color);
     }
   }
 
+    /** @private */
+  _setComponentName() {
+     this.setElementClass(this._componentName, true);
+  }
+
   /** @private */
   getElementRef(): ElementRef {
     return this._elementRef;

src/components/item/item.ts

@@ -321,11 +321,11 @@ export class Item extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('item', val);
+    this._setMode(val);
   }
 
   constructor(form: Form, config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer);
+    super(config, elementRef, renderer, 'item');
 
     this.mode = config.get('mode');
     this.id = form.nextId().toString();

src/components/label/label.ts

@@ -65,15 +65,15 @@ export class Label extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('label', val);
+    this._setColor(val);
   }
 
   /**
    * @input {string} The mode to apply to this component.
    */
   @Input()
   set mode(val: string) {
-    this._setMode('label', val);
+    this._setMode(val);
   }
 
   /**
@@ -90,7 +90,7 @@ export class Label extends Ion {
     @Attribute('fixed') isFixed: string,
     @Attribute('inset') isInset: string
   ) {
-    super(config, elementRef, renderer);
+    super(config, elementRef, renderer, 'label');
 
     this.mode = config.get('mode');
     this.type = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : (isFixed === '' ? 'fixed' : (isInset === '' ? 'inset' : null))));