feat: added icon component

projects/ng-cdbangular/src/lib/components/cdb-free.module.ts

@@ -1,3 +1,4 @@
+import { IconModule } from './icon/icon.module';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
@@ -33,6 +34,7 @@ import { SpinnerModule } from './spinner/spinner.module';
 import { SwitchModule } from './switch/switch.module';
 import { TableModule } from './table/table.module';
 import { ViewModule } from './view/view.module';
+import { IconComponent } from './icon/icon.component';
 
 export {
   AccordionModule,
@@ -165,6 +167,8 @@ export {
 
 export { ViewModule, ViewComponent } from './view/index';
 
+export {IconModule, IconComponent } from './icon/index'
+
 const MODULES = [
   AccordionModule,
   AlertModule,
@@ -181,6 +185,7 @@ const MODULES = [
   CollapseModule,
   DropdownModule,
   FooterModule,
+  IconModule,
   IframeModule,
   InputModule,
   InputgroupModule,

projects/ng-cdbangular/src/lib/components/icon/icon.component.html

@@ -0,0 +1,8 @@
+<i #cdbicon class="cdb-icon {{class}} fa-{{ icon }}" [style]="style" [ngClass]="{
+    'fa-li': list,
+    'fa-fw': fixed,
+    'fa-border': border,
+    'fa-spin' : spin,
+    'fa-pulse' : pulse,
+    'fa-inverse': inverse
+}"></i>

projects/ng-cdbangular/src/lib/components/icon/icon.component.scss

@@ -0,0 +1,7 @@
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css");
+@import "../../styles/colors";
+@import "../../styles/colorStyles";
+
+.cdb-icon {
+  padding: 0px 4px;
+}

projects/ng-cdbangular/src/lib/components/icon/icon.component.ts

@@ -0,0 +1,134 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  AfterViewInit,
+  ElementRef,
+  Renderer2,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+
+@Component({
+  selector: 'CDBIcon',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class IconComponent implements OnInit, AfterViewInit {
+  @ViewChild('cdbicon', { static: false }) cdbicon: ElementRef;
+
+  @Input() border: boolean = false;
+  @Input() brand: boolean = false;
+  @Input() class: string;
+  @Input() style: string;
+  @Input() fab: boolean = false;
+  @Input() duotone: boolean = false;
+  @Input() fal: boolean = false;
+  @Input() fad: boolean = false;
+  @Input() far: boolean = false;
+  @Input() solid: boolean = false;
+  @Input() fixed: boolean = false;
+  @Input() fas: boolean = false;
+  @Input() flip: string;
+  @Input() icon: string;
+  @Input() inverse: boolean = false;
+  @Input() light: boolean = false;
+  @Input() list: boolean = false;
+  @Input() pull: string;
+  @Input() pulse: boolean = false;
+  @Input() regular: boolean = false;
+  @Input() rotate: string;
+  @Input() size: string;
+  @Input() spin: boolean = false;
+  @Input() stack: string;
+
+  iconClasses = {};
+  iconPrefix = '';
+
+  constructor(private elRef: ElementRef, private renderer: Renderer2) {}
+
+  ngOnInit(): void {
+    this.iconPrefix =
+      this.regular || this.far
+        ? 'far'
+        : this.solid || this.fas
+        ? 'fas'
+        : this.light || this.fal
+        ? 'fal'
+        : this.duotone || this.fad
+        ? 'fad'
+        : this.brand || this.fab
+        ? 'fab'
+        : 'fa';
+
+    this.renderer.removeAttribute(this.elRef.nativeElement, 'class')
+    this.renderer.removeAttribute(this.elRef.nativeElement, 'style')
+
+  }
+  ngAfterViewInit() {
+
+    this.renderer.addClass(this.cdbicon.nativeElement, this.iconPrefix);
+
+    if (this.size) {
+      this.renderer.addClass(
+        this.cdbicon.nativeElement,
+        `fa-${this.size}`
+      )
+    }
+    if (this.pull) {
+      this.renderer.addClass(
+        this.cdbicon.nativeElement,
+        `fa-pull-${this.pull}`
+      )
+    }
+    if (this.rotate) {
+      this.renderer.addClass(
+        this.cdbicon.nativeElement,
+        `fa-rotate-${this.rotate}`
+      )
+    }
+    if (this.flip) {
+      this.renderer.addClass(
+        this.cdbicon.nativeElement,
+        `fa-flip-${this.flip}`
+      )
+    }
+    if (this.stack) {
+      this.renderer.addClass(
+        this.cdbicon.nativeElement,
+        `fa-${this.stack}`
+      )
+    }
+
+
+    // let iconClasses: {} = {
+    //   // icon: this.icon ? `fa-${this.icon}` : false,
+    //   // size: this.size ? `fa-${this.size}` : false,
+    //   // pull: this.pull ? `fa-pull-${this.pull}` : false,
+    //   // rotate: this.rotate ? `fa-rotate-${this.rotate}` : false,
+    //   // flip: this.flip ? `fa-flip-${this.flip}` : false,
+    //   // stack: this.stack ? `fa-${this.stack}` : false,
+    // };
+
+    // const returnClasses = (classes) => {
+    //   const newClassesObject = Object.keys(classes).reduce(
+    //     (previousValue, currentElement) => {
+    //       if (classes[currentElement]) {
+    //         previousValue[currentElement] = classes[currentElement];
+    //       }
+    //       return previousValue;
+    //     },
+    //     {}
+    //   );
+    //   return newClassesObject;
+    // };
+    // this.iconClasses = returnClasses(iconClasses);
+    // Object.keys(this.iconClasses).forEach((iconClass) => {
+    //   this.renderer.addClass(
+    //     this.cdbicon.nativeElement,
+    //     this.iconClasses[iconClass]
+    //   );
+    // });
+  }
+}

projects/ng-cdbangular/src/lib/components/icon/icon.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from './icon.component';
+
+@NgModule({
+  declarations: [IconComponent],
+  imports: [CommonModule],
+  exports: [IconComponent],
+})
+export class IconModule {}

projects/ng-cdbangular/src/lib/components/icon/index.ts

@@ -0,0 +1,2 @@
+export { IconModule } from './icon.module';
+export { IconComponent } from './icon.component';

projects/ng-cdbangular/src/public-api.ts

@@ -36,4 +36,4 @@ export * from './lib/components/switch/index';
 export * from './lib/components/table/index';
 export * from './lib/components/view/index';
 export * from './lib/components/cdb-free.module';
-
+export * from './lib/components/icon/index'