Add fm-gradient-select

projects/common/src/fm/components/gradient-select/gradient-select.component.html

@@ -0,0 +1,16 @@
+<div *ngIf="gradientItems" class="form-control gradient-select" (click)="handleToggleList()">
+    <div *ngIf="selectedItem">
+        <div *ngIf="showLabel">{{selectedItem?.name}}</div>
+        <fm-gradient [gradientItem]="selectedItem"></fm-gradient>    
+    </div>
+    <div class="gradient-list" [ngClass]="{'visible':listVisible}">
+        <ul *ngIf="gradientItems">
+            <li *ngFor="let item of gradientItems" (click)="handleSelect(item)" [ngClass]="{'bg-primary':isSelected(item),'text-white':isSelected(item)} ">
+                <div>{{item?.name}}</div>
+                <div><fm-gradient [gradientItem]="item"></fm-gradient></div>
+            </li>
+        </ul>
+        <div *ngIf="showAdd" class="addGradient"><a href="#" i18n (click)="handleAdd($event)" >Add gradient</a></div>
+    </div>
+</div>
+

projects/common/src/fm/components/gradient-select/gradient-select.component.scss

@@ -0,0 +1,55 @@
+.gradient-select {
+    position: relative;
+    width:30rem;
+    height: auto;
+}
+
+.gradient-list {
+    position: absolute;
+    top:100%;
+    left:-0.15rem;
+    width:100%;
+    display: none;
+  
+    margin-left: 1px;
+    border-radius: 0.25rem;
+    border: 1px solid #ced4da;
+}
+
+.gradient-list.visible {
+    display: block;
+    background-color: white;
+   
+}
+
+li {
+    display: block;
+    overflow: hidden;
+    padding: 0.375rem .75rem;
+    border-bottom: 1px solid #ced4da;
+}
+
+li:hover {
+   background-color: #ced4da;
+   //color:white;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+    overflow: hidden;
+    overflow-y: auto;
+    max-height: 20rem;   
+}
+
+fm-gradient {
+    display: block;
+    height: 1.5rem;
+    position: relative;
+    border:1px solid white;
+}
+
+.addGradient {
+    padding: 0.375rem .75rem;
+    border-top: 1px solid #ced4da;
+}

projects/common/src/fm/components/gradient-select/gradient-select.component.spec.ts

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

projects/common/src/fm/components/gradient-select/gradient-select.component.ts

@@ -0,0 +1,54 @@
+import { Component, ChangeDetectorRef, Input,SimpleChanges,OnChanges, Output,EventEmitter } from '@angular/core';
+import { IItem } from '../../models/item';
+
+@Component({
+  selector: 'fm-gradient-select',
+  templateUrl: './gradient-select.component.html',
+  styleUrls: ['./gradient-select.component.scss']
+})
+export class GradientSelectComponent implements OnChanges {
+
+  public listVisible:boolean = false;
+  @Input() showLabel:boolean = true;
+  @Input() gradientItems:IItem[];
+  @Input() showAdd:boolean = false;
+  @Input() selectedItem:IItem;
+  @Output() onSelect:EventEmitter<any> = new EventEmitter<any>();
+  @Output() onAdd:EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+
+  constructor(private ref:ChangeDetectorRef) {   
+  }
+
+   ngOnChanges(changes:SimpleChanges) {
+      if(changes["gradientItems"]) {
+        this.gradientItems=changes["gradientItems"].currentValue;
+        this.selectedItem=this.selectedItem == null && this.gradientItems && this.gradientItems.length>0?this.gradientItems[0]:null;
+        this.ref.detectChanges();
+      }     
+  }
+
+  handleToggleList() {
+    this.listVisible=!this.listVisible;
+  }
+
+  handleSelect(item:IItem) {
+    this.selectedItem=item;
+    this.onSelect.emit(item);
+  }
+
+  handleAdd(event:MouseEvent) {
+    event.preventDefault();
+    this.onAdd.emit(event);
+  }
+
+  isSelected(item:IItem):boolean {
+    if(this.selectedItem && this.selectedItem.data  && this.selectedItem.data.gradient && item && item.data && item.data.gradient) {
+       let sid = JSON.stringify(this.selectedItem.data.gradient)+this.selectedItem.name;
+       let id = JSON.stringify( item.data.gradient) + item.name;
+       return sid == id;
+    }
+    return false;
+  }
+
+}