fix(input-group): fix quotes

Author: didimmova

projects/igniteui-angular/src/lib/input-group/input-group.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule, DOCUMENT } from "@angular/common";
+import { CommonModule, DOCUMENT } from '@angular/common';
 import {
     Component,
     ContentChild,
@@ -12,32 +12,32 @@ import {
     Inject,
     Optional,
     AfterContentInit,
-} from "@angular/core";
-import { IgxHintDirective } from "../directives/hint/hint.directive";
+} from '@angular/core';
+import { IgxHintDirective } from '../directives/hint/hint.directive';
 import {
     IgxInputDirective,
     IgxInputState,
-} from "../directives/input/input.directive";
-import { IgxLabelDirective } from "../directives/label/label.directive";
-import { IgxPrefixModule } from "../directives/prefix/prefix.directive";
-import { IgxSuffixModule } from "../directives/suffix/suffix.directive";
+} from '../directives/input/input.directive';
+import { IgxLabelDirective } from '../directives/label/label.directive';
+import { IgxPrefixModule } from '../directives/prefix/prefix.directive';
+import { IgxSuffixModule } from '../directives/suffix/suffix.directive';
 import {
     DisplayDensity,
     IDisplayDensityOptions,
     DisplayDensityToken,
     DisplayDensityBase,
-} from "../core/displayDensity";
-import { IgxInputGroupBase } from "./input-group.common";
-import { DeprecateProperty } from "../core/deprecateDecorators";
-import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from "./inputGroupType";
+} from '../core/displayDensity';
+import { IgxInputGroupBase } from './input-group.common';
+import { DeprecateProperty } from '../core/deprecateDecorators';
+import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from './inputGroupType';
 
 let NEXT_ID = 0;
 
 enum IgxInputGroupThemeEnum {
-    "material",
-    "fluent",
-    "bootstrap",
-    "indigo-design",
+    'material',
+    'fluent',
+    'bootstrap',
+    'indigo-design',
 }
 
 /**
@@ -46,8 +46,8 @@ enum IgxInputGroupThemeEnum {
 export type IgxInputGroupTheme = keyof typeof IgxInputGroupThemeEnum;
 
 @Component({
-    selector: "igx-input-group",
-    templateUrl: "input-group.component.html",
+    selector: 'igx-input-group',
+    templateUrl: 'input-group.component.html',
     providers: [
         { provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent },
     ],
@@ -57,51 +57,51 @@ export class IgxInputGroupComponent
     implements IgxInputGroupBase, AfterContentInit {
     private _type: IgxInputGroupType = null;
     private _filled = false;
-    private _variant: IgxInputGroupTheme = "material";
+    private _variant: IgxInputGroupTheme = 'material';
 
     /**
      * An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
      * ```html
-     * <igx-input-group [id]="'igx-input-group-55'"></igx-input-group>
+     * <igx-input-group [id]=''igx-input-group-55''></igx-input-group>
      * ```
      */
-    @HostBinding("attr.id")
+    @HostBinding('attr.id')
     @Input()
     public id = `igx-input-group-${NEXT_ID++}`;
 
     /**
      * Property that enables/disables the autogenerated class of the `IgxInputGroupComponent`.
      * By default applied the class is applied.
      * ```typescript
-     *  @ViewChild("MyInputGroup")
+     *  @ViewChild('MyInputGroup')
      *  public inputGroup: IgxInputGroupComponent;
      *  ngAfterViewInit(){
      *  this.inputGroup.defaultClass = false;
      * ```
      * }
      */
-    @HostBinding("class.igx-input-group")
+    @HostBinding('class.igx-input-group')
     public defaultClass = true;
 
     /** @hidden */
-    @HostBinding("class.igx-input-group--placeholder")
+    @HostBinding('class.igx-input-group--placeholder')
     public hasPlaceholder = false;
 
     /** @hidden */
-    @HostBinding("class.igx-input-group--required")
+    @HostBinding('class.igx-input-group--required')
     public isRequired = false;
 
     /** @hidden */
-    @HostBinding("class.igx-input-group--focused")
+    @HostBinding('class.igx-input-group--focused')
     public isFocused = false;
 
     /**
      * An @Input property that disables the `IgxInputGroupComponent`.
      * ```html
-     * <igx-input-group [disabled]="'true'"></igx-input-group>
+     * <igx-input-group [disabled]=''true''></igx-input-group>
      * ```
      */
-    @HostBinding("class.igx-input-group--disabled")
+    @HostBinding('class.igx-input-group--disabled')
     @Input()
     public disabled = false;
 
@@ -111,48 +111,48 @@ export class IgxInputGroupComponent
      *
      * @example
      * ```html
-     * <igx-input-group [suppressInputAutofocus]="true"></igx-input-group>
+     * <igx-input-group [suppressInputAutofocus]='true'></igx-input-group>
      * ```
      */
     @Input()
     public suppressInputAutofocus = false;
 
     /** @hidden */
-    @HostBinding("class.igx-input-group--valid")
+    @HostBinding('class.igx-input-group--valid')
     public get validClass(): boolean {
         return this.input.valid === IgxInputState.VALID;
     }
 
     /** @hidden */
-    @HostBinding("class.igx-input-group--invalid")
+    @HostBinding('class.igx-input-group--invalid')
     public get invalidClass(): boolean {
         return this.input.valid === IgxInputState.INVALID;
     }
 
     /** @hidden */
-    @HostBinding("class.igx-input-group--warning")
+    @HostBinding('class.igx-input-group--warning')
     public hasWarning = false;
 
     /** @hidden */
-    @HostBinding("class.igx-input-group--filled")
+    @HostBinding('class.igx-input-group--filled')
     public get isFilled() {
         return this._filled || (this.input && this.input.value);
     }
 
     /** @hidden */
-    @HostBinding("class.igx-input-group--cosy")
+    @HostBinding('class.igx-input-group--cosy')
     public get isDisplayDensityCosy() {
         return this.displayDensity === DisplayDensity.cosy;
     }
 
     /** @hidden */
-    @HostBinding("class.igx-input-group--comfortable")
+    @HostBinding('class.igx-input-group--comfortable')
     public get isDisplayDensityComfortable() {
         return this.displayDensity === DisplayDensity.comfortable;
     }
 
     /** @hidden */
-    @HostBinding("class.igx-input-group--compact")
+    @HostBinding('class.igx-input-group--compact')
     public get isDisplayDensityCompact() {
         return this.displayDensity === DisplayDensity.compact;
     }
@@ -166,7 +166,7 @@ export class IgxInputGroupComponent
     protected input: IgxInputDirective;
 
     /** @hidden */
-    @HostListener("click", ["$event"])
+    @HostListener('click', ['$event'])
     public onClick(event: MouseEvent) {
         if (
             !this.isFocused &&
@@ -178,7 +178,7 @@ export class IgxInputGroupComponent
     }
 
     /** @hidden */
-    @HostListener("pointerdown", ["$event"])
+    @HostListener('pointerdown', ['$event'])
     public onPointerDown(event: PointerEvent) {
         if (this.isFocused && event.target !== this.input.nativeElement) {
             event.preventDefault();
@@ -193,10 +193,10 @@ export class IgxInputGroupComponent
      * An @Input property that sets how the input will be styled.
      * Allowed values of type IgxInputGroupType.
      * ```html
-     * <igx-input-group [type]="'search'">
+     * <igx-input-group [type]=''search''>
      * ```
      */
-    @Input("type")
+    @Input('type')
     public set type(value: IgxInputGroupType) {
         this._type = value;
     }
@@ -205,15 +205,15 @@ export class IgxInputGroupComponent
      * Returns the type of the `IgxInputGroupComponent`. How the input is styled.
      * The default is `line`.
      * ```typescript
-     * @ViewChild("MyInputGroup")
+     * @ViewChild('MyInputGroup')
      * public inputGroup: IgxInputGroupComponent;
      * ngAfterViewInit(){
      *    let inputType = this.inputGroup.type;
      * }
      * ```
      */
     public get type() {
-        return this._type || this._inputGroupType || "line";
+        return this._type || this._inputGroupType || 'line';
     }
 
     /** @hidden @internal */
@@ -256,14 +256,14 @@ export class IgxInputGroupComponent
     ngAfterContentInit() {
         const variant = this.document.defaultView
             .getComputedStyle(this.element.nativeElement)
-            .getPropertyValue("--igx-input-group-variant")
+            .getPropertyValue('--igx-input-group-variant')
             .trim();
         this._variant = variant as IgxInputGroupTheme;
     }
     /**
      * Returns whether the `IgxInputGroupComponent` has hints.
      * ```typescript
-     * @ViewChild("MyInputGroup")
+     * @ViewChild('MyInputGroup')
      * public inputGroup: IgxInputGroupComponent;
      * ngAfterViewInit(){
      *    let inputHints = this.inputGroup.hasHints;
@@ -277,7 +277,7 @@ export class IgxInputGroupComponent
     /**
      * Returns whether the `IgxInputGroupComponent` has border.
      * ```typescript
-     * @ViewChild("MyInputGroup")
+     * @ViewChild('MyInputGroup')
      * public inputGroup: IgxInputGroupComponent;
      * ngAfterViewInit(){
      *    let inputBorder = this.inputGroup.hasBorder;
@@ -286,113 +286,113 @@ export class IgxInputGroupComponent
      */
     public get hasBorder() {
         return (
-            (this.type === "line" || this.type === "box") &&
-            this._variant === "material"
+            (this.type === 'line' || this.type === 'box') &&
+            this._variant === 'material'
         );
     }
 
     /**
      * Returns whether the `IgxInputGroupComponent` type is line.
      * ```typescript
-     * @ViewChild("MyInputGroup1")
+     * @ViewChild('MyInputGroup1')
      * public inputGroup: IgxInputGroupComponent;
      * ngAfterViewInit(){
      *    let isTypeLine = this.inputGroup.isTypeLine;
      * }
      * ```
      */
     public get isTypeLine(): boolean {
-        return this.type === "line" && this._variant === "material";
+        return this.type === 'line' && this._variant === 'material';
     }
 
     /**
      * Returns whether the `IgxInputGroupComponent` type is box.
      * ```typescript
-     * @ViewChild("MyInputGroup1")
+     * @ViewChild('MyInputGroup1')
      * public inputGroup: IgxInputGroupComponent;
      * ngAfterViewInit(){
      *    let isTypeBox = this.inputGroup.isTypeBox;
      * }
      * ```
      */
-    @HostBinding("class.igx-input-group--box")
+    @HostBinding('class.igx-input-group--box')
     public get isTypeBox() {
-        return this.type === "box" && this._variant === "material";
+        return this.type === 'box' && this._variant === 'material';
     }
 
     /**
      * Returns whether the `IgxInputGroupComponent` type is border.
      * ```typescript
-     * @ViewChild("MyInputGroup1")
+     * @ViewChild('MyInputGroup1')
      * public inputGroup: IgxInputGroupComponent;
      * ngAfterViewInit(){
      *    let isTypeBorder = this.inputGroup.isTypeBorder;
      * }
      * ```
      */
-    @HostBinding("class.igx-input-group--border")
+    @HostBinding('class.igx-input-group--border')
     public get isTypeBorder() {
-        return this.type === "border" && this._variant === "material";
+        return this.type === 'border' && this._variant === 'material';
     }
 
     /**
      * Returns true if the `IgxInputGroupComponent` theme is Fluent.
      * ```typescript
-     * @ViewChild("MyInputGroup1")
+     * @ViewChild('MyInputGroup1')
      * public inputGroup: IgxInputGroupComponent;
      * ngAfterViewInit(){
      *    let isTypeFluent = this.inputGroup.isTypeFluent;
      * }
      * ```
      */
-    @HostBinding("class.igx-input-group--fluent")
+    @HostBinding('class.igx-input-group--fluent')
     public get isTypeFluent() {
-        return this._variant === "fluent";
+        return this._variant === 'fluent';
     }
 
     /**
      * Returns true if the `IgxInputGroupComponent` theme is Bootstrap.
      * ```typescript
-     * @ViewChild("MyInputGroup1")
+     * @ViewChild('MyInputGroup1')
      * public inputGroup: IgxInputGroupComponent;
      * ngAfterViewInit(){
      *    let isTypeBootstrap = this.inputGroup.isTypeBootstrap;
      * }
      * ```
      */
-    @HostBinding("class.igx-input-group--bootstrap")
+    @HostBinding('class.igx-input-group--bootstrap')
     public get isTypeBootstrap() {
-        return this._variant === "bootstrap";
+        return this._variant === 'bootstrap';
     }
 
     /**
      * Returns true if the `IgxInputGroupComponent` theme is Indigo.
      * ```typescript
-     * @ViewChild("MyInputGroup1")
+     * @ViewChild('MyInputGroup1')
      * public inputGroup: IgxInputGroupComponent;
      * ngAfterViewInit(){
      *    let isTypeIndigo = this.inputGroup.isTypeIndigo;
      * }
      * ```
      */
-    @HostBinding("class.igx-input-group--indigo")
+    @HostBinding('class.igx-input-group--indigo')
     public get isTypeIndigo() {
-        return this._variant === "indigo-design";
+        return this._variant === 'indigo-design';
     }
 
     /**
      * Returns whether the `IgxInputGroupComponent` type is search.
      * ```typescript
-     * @ViewChild("MyInputGroup1")
+     * @ViewChild('MyInputGroup1')
      * public inputGroup: IgxInputGroupComponent;
      * ngAfterViewInit(){
      *    let isTypeSearch = this.inputGroup.isTypeSearch;
      * }
      * ```
      */
-    @HostBinding("class.igx-input-group--search")
+    @HostBinding('class.igx-input-group--search')
     public get isTypeSearch() {
-        return this.type === "search";
+        return this.type === 'search';
     }
 
     /** @hidden */