feat(lib): added mat-select-icon.component the main component of the library

Author: AnthonyNahas

projects/angular-material-extensions/select-icon/src/lib/mat-select-icon.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { MatSelectIconComponent } from './mat-select-icon/mat-select-icon.component';
+
+
+@NgModule({
+  declarations: [MatSelectIconComponent],
+  imports: [],
+  exports: [MatSelectIconComponent]
+})
+export class MatSelectIconModule {
+}

projects/angular-material-extensions/select-icon/src/lib/mat-select-icon/mat-select-icon.component.html

@@ -0,0 +1,12 @@
+<div class="dep-img" fxLayout="row wrap">
+  <button (click)="select(icon)"
+          *ngFor="let icon of this.icons"
+          [color]="icon?.color ? icon.color : 'accent'"
+          class="dep-img"
+          mat-icon-button
+          type="button">
+    <img [ngClass]="{'gray': this.value && this.value !== icon}"
+         [src]="icon?.url"
+         class="mat-icon">
+  </button>
+</div>

projects/angular-material-extensions/select-icon/src/lib/mat-select-icon/mat-select-icon.component.scss

@@ -0,0 +1,16 @@
+.dep-img {
+  .mat-icon-button {
+    width: 80px;
+    height: 80px;
+  }
+
+  img.gray {
+    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+    filter: grayscale(100%);
+  }
+
+  img.mat-icon {
+    width: 48px;
+    height: 48px;
+  }
+}

projects/angular-material-extensions/select-icon/src/lib/mat-select-icon/mat-select-icon.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatSelectIconComponent } from './mat-select-icon.component';
+
+describe('MatSelectIconComponent', () => {
+  let component: MatSelectIconComponent;
+  let fixture: ComponentFixture<MatSelectIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatSelectIconComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatSelectIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/angular-material-extensions/select-icon/src/lib/mat-select-icon/mat-select-icon.component.ts

@@ -0,0 +1,75 @@
+import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ThemePalette } from '@angular/material/core';
+
+export interface MatSelectIcon {
+  url: string;
+  selected?: boolean;
+  color?: ThemePalette;
+  tags?: string[];
+}
+
+@Component({
+  selector: 'mat-select-icon',
+  templateUrl: './mat-select-icon.component.html',
+  styleUrls: ['./mat-select-icon.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MatSelectIconComponent),
+      multi: true
+    }
+  ]
+})
+export class MatSelectIconComponent implements OnInit, ControlValueAccessor {
+
+  propagateChange = (_: any) => {
+  };
+
+  @Input()
+  icons: MatSelectIcon[];
+
+  @Output()
+  onIconSelected: EventEmitter<MatSelectIcon> = new EventEmitter<MatSelectIcon>();
+
+
+  constructor() {
+  }
+
+  private _value: MatSelectIcon;
+
+  get value(): MatSelectIcon {
+    return this._value;
+  }
+
+  @Input()
+  set value(value: MatSelectIcon) {
+    this._value = value;
+    this.propagateChange(this._value);
+  }
+
+  ngOnInit(): void {
+  }
+
+  select(icon: MatSelectIcon) {
+    this.value = icon;
+    this.onIconSelected.next(this.value);
+  }
+
+  writeValue(value: MatSelectIcon) {
+    if (value !== undefined) {
+      this.value = value;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+  }
+
+}

projects/angular-material-extensions/select-icon/src/lib/select-icon.component.spec.ts

@@ -2,6 +2,5 @@
  * Public API Surface of select-icon
  */
 
-export * from './lib/select-icon.service';
-export * from './lib/select-icon.component';
-export * from './lib/select-icon.module';
+export * from './lib/mat-select-icon/mat-select-icon.component';
+export * from './lib/mat-select-icon.module';

projects/angular-material-extensions/select-icon/src/lib/select-icon.component.ts

@@ -4,13 +4,13 @@
     "directive-selector": [
       true,
       "attribute",
-      "lib",
+      "mat",
       "camelCase"
     ],
     "component-selector": [
       true,
       "element",
-      "lib",
+      "mat",
       "kebab-case"
     ]
   }