fabrikantencore 2.4.3 → 2.4.4

package/src/app/modules/fabrikantencore/components/fab-filter-colour/fab-filter-colour-dialog/fab-filter-colour-dialog.component.scss

@@ -0,0 +1,30 @@
+.table-wrapper {
+  max-height: 400px;
+  overflow-y: scroll;
+}
+
+.preview {
+  width: 20px;
+  height: 20px;
+  margin: auto;
+  border: 1px solid #000;
+}
+
+.select-row {
+  cursor: pointer;
+}
+
+.select-row:hover {
+  background-color: lightblue;
+}
+
+td {
+  padding: 3px;
+}
+
+.header-row {
+  background: white;
+  position: sticky;
+  top: 0;
+  font-weight: bold;
+}

package/src/app/modules/fabrikantencore/components/fab-filter-colour/fab-filter-colour-dialog/fab-filter-colour-dialog.component.spec.ts

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

package/src/app/modules/fabrikantencore/components/fab-filter-colour/fab-filter-colour-dialog/fab-filter-colour-dialog.component.ts

@@ -0,0 +1,316 @@
+import { ChangeDetectorRef, Component, Inject } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FabrikantenService } from '../../../services/fabrikanten.service';
+import { TranslateService } from '../../../services/translate.service';
+
+@Component({
+  selector: 'app-fab-filter-colour-dialog',
+  templateUrl: './fab-filter-colour-dialog.component.html',
+  styleUrls: ['./fab-filter-colour-dialog.component.scss']
+})
+export class FabFilterColourDialogComponent {
+
+  private filterId: number;
+  private filteroptionname: string;
+
+  public ShowRAL: boolean = true;
+
+  public RALColours: Array<RALColour> = new Array<RALColour>();
+
+  constructor(
+    private FabrikantenService: FabrikantenService,
+    public TranslateService: TranslateService,
+    private ChangeDetectorRef: ChangeDetectorRef,
+    public dialogRef: MatDialogRef<FabFilterColourDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+    this.filterId = data.filterid;
+    this.filteroptionname = data.filteroptionname;
+
+    this.AddColours();
+  }
+
+  public ShowNCSOriginals(): boolean {
+    if (this.FabrikantenService.FabrikantenSettingsViewModel != null) {
+      return this.FabrikantenService.FabrikantenSettingsViewModel.enableNCSOriginalColours;
+    }
+
+    return false;
+  }
+
+  public ShowCustomTopColours(): boolean {
+    if (this.FabrikantenService.FabrikantenSettingsViewModel != null) {
+      return this.FabrikantenService.FabrikantenSettingsViewModel.enableCustomTopColours;
+    }
+
+    return false;
+  }
+
+  public Select(colour: string, colourvalue: string) {
+    this.FabrikantenService.SelectColour(this.filterId, colour, colourvalue, this.ChangeDetectorRef);
+    this.dialogRef.close();
+  }
+
+  public Show(name: string) {
+    return true;
+  }
+
+  private AddColours(): void {
+    this.AddColour('RAL 1000', 'Groenbeige', 'RAL Classic', 214, 198, 148, 255);
+    this.AddColour('RAL 1001', 'Beige', 'RAL Classic', 222, 189, 140, 255);
+    this.AddColour('RAL 1002', 'Zandgeel', 'RAL Classic', 214, 181, 115, 255);
+    this.AddColour('RAL 1003', 'Signaalgeel', 'RAL Classic', 255, 165, 41, 255);
+    this.AddColour('RAL 1004', 'Goudgeel', 'RAL Classic', 231, 148, 33, 255);
+    this.AddColour('RAL 1005', 'Honinggeel', 'RAL Classic', 206, 132, 33, 255);
+    this.AddColour('RAL 1006', 'Maisgeel', 'RAL Classic', 231, 132, 24, 255);
+    this.AddColour('RAL 1007', 'Narcissengeel', 'RAL Classic', 231, 123, 24, 255);
+    this.AddColour('RAL 1011', 'Bruinbeige', 'RAL Classic', 173, 123, 74, 255);
+    this.AddColour('RAL 1012', 'Citroengeel', 'RAL Classic', 231, 189, 57, 255);
+    this.AddColour('RAL 1013', 'Parelwit', 'RAL Classic', 255, 247, 231, 255);
+    this.AddColour('RAL 1014', 'Ivoorkleurig', 'RAL Classic', 247, 214, 173, 255);
+    this.AddColour('RAL 1015', 'Licht ivoorkleurig', 'RAL Classic', 255, 239, 206, 255);
+    this.AddColour('RAL 1016', 'Zwavelgeel', 'RAL Classic', 255, 247, 66, 255);
+    this.AddColour('RAL 1017', 'Saffraangeel', 'RAL Classic', 255, 173, 90, 255);
+    this.AddColour('RAL 1018', 'Zinkgeel', 'RAL Classic', 255, 214, 74, 255);
+    this.AddColour('RAL 1019', 'Grijsbeige', 'RAL Classic', 165, 140, 123, 255);
+    this.AddColour('RAL 1020', 'Olijfgeel', 'RAL Classic', 156, 140, 99, 255);
+    this.AddColour('RAL 1021', 'Koolzaadgeel', 'RAL Classic', 255, 189, 24, 255);
+    this.AddColour('RAL 1023', 'Verkeersgeel', 'RAL Classic', 255, 189, 33, 255);
+    this.AddColour('RAL 1024', 'Okergeel', 'RAL Classic', 181, 140, 74, 255);
+    this.AddColour('RAL 1026', 'Briljantgeel', 'RAL Classic', 255, 255, 8, 255);
+    this.AddColour('RAL 1027', 'Kerriegeel', 'RAL Classic', 156, 115, 33, 255);
+    this.AddColour('RAL 1028', 'Meloengeel', 'RAL Classic', 255, 140, 24, 255);
+    this.AddColour('RAL 1032', 'Bremgeel', 'RAL Classic', 231, 165, 41, 255);
+    this.AddColour('RAL 1033', 'Dahliageel', 'RAL Classic', 255, 148, 49, 255);
+    this.AddColour('RAL 1034', 'Pastelgeel', 'RAL Classic', 247, 156, 90, 255);
+    this.AddColour('RAL 1035', 'Parelmoergrijs', 'RAL Classic', 182, 183, 103, 255);
+    this.AddColour('RAL 1036', 'Parelmoergoud', 'RAL Classic', 161, 146, 3, 255);
+    this.AddColour('RAL 1037', 'Zonnegeel', 'RAL Classic', 238, 172, 0, 255);
+    this.AddColour('RAL 2000', 'Geeloranje', 'RAL Classic', 231, 90, 24, 255);
+    this.AddColour('RAL 2001', 'Roodoranje', 'RAL Classic', 189, 41, 33, 255);
+    this.AddColour('RAL 2002', 'Vermiljoen', 'RAL Classic', 206, 33, 24, 255);
+    this.AddColour('RAL 2003', 'Pasteloranje', 'RAL Classic', 255, 99, 49, 255);
+    this.AddColour('RAL 2004', 'Zuiver oranje', 'RAL Classic', 247, 57, 24, 255);
+    this.AddColour('RAL 2005', 'Briljantoranje', 'RAL Classic', 255, 24, 16, 255);
+    this.AddColour('RAL 2007', 'Briljant lichtoranje', 'RAL Classic', 255, 115, 33, 255);
+    this.AddColour('RAL 2008', 'Licht roodoranje', 'RAL Classic', 255, 74, 41, 255);
+    this.AddColour('RAL 2009', 'Verkeersoranje', 'RAL Classic', 239, 57, 24, 255);
+    this.AddColour('RAL 2010', 'Signaaloranje', 'RAL Classic', 214, 66, 41, 255);
+    this.AddColour('RAL 2011', 'Dieporanje', 'RAL Classic', 239, 90, 41, 255);
+    this.AddColour('RAL 2012', 'Zalmoranje', 'RAL Classic', 222, 82, 66, 255);
+    this.AddColour('RAL 2013', 'Parelmoeroranje', 'RAL Classic', 170, 50, 0, 255);
+    this.AddColour('RAL 3000', 'Vuurrood', 'RAL Classic', 173, 24, 24, 255);
+    this.AddColour('RAL 3001', 'Signaalrood', 'RAL Classic', 165, 16, 24, 255);
+    this.AddColour('RAL 3002', 'Karmijnrood', 'RAL Classic', 165, 24, 24, 255);
+    this.AddColour('RAL 3003', 'Robijnrood', 'RAL Classic', 140, 16, 16, 255);
+    this.AddColour('RAL 3004', 'Purperrood', 'RAL Classic', 107, 8, 16, 255);
+    this.AddColour('RAL 3005', 'Wijnrood', 'RAL Classic', 74, 16, 24, 255);
+    this.AddColour('RAL 3007', 'Zwartrood', 'RAL Classic', 41, 16, 24, 255);
+    this.AddColour('RAL 3009', 'Oxyderood', 'RAL Classic', 90, 33, 33, 255);
+    this.AddColour('RAL 3011', 'Bruinrood', 'RAL Classic', 123, 16, 16, 255);
+    this.AddColour('RAL 3012', 'Beigerood', 'RAL Classic', 206, 132, 115, 255);
+    this.AddColour('RAL 3013', 'Tomaatrood', 'RAL Classic', 148, 24, 24, 255);
+    this.AddColour('RAL 3014', 'Oudroze', 'RAL Classic', 222, 99, 115, 255);
+    this.AddColour('RAL 3015', 'Lichtroze', 'RAL Classic', 239, 156, 181, 255);
+    this.AddColour('RAL 3016', 'Koraalrood', 'RAL Classic', 165, 33, 33, 255);
+    this.AddColour('RAL 3017', 'Bleekrood', 'RAL Classic', 214, 49, 82, 255);
+    this.AddColour('RAL 3018', 'Aardbeirood', 'RAL Classic', 206, 41, 66, 255);
+    this.AddColour('RAL 3020', 'Verkeersrood', 'RAL Classic', 198, 16, 16, 255);
+    this.AddColour('RAL 3022', 'Zalmrood', 'RAL Classic', 222, 90, 74, 255);
+    this.AddColour('RAL 3024', 'Briljantrood', 'RAL Classic', 255, 8, 24, 255);
+    this.AddColour('RAL 3026', 'Briljant lichtrood', 'RAL Classic', 255, 16, 16, 255);
+    this.AddColour('RAL 3027', 'Framboosrood', 'RAL Classic', 181, 16, 49, 255);
+    this.AddColour('RAL 3031', 'Oriëntrood', 'RAL Classic', 165, 24, 41, 255);
+    this.AddColour('RAL 3032', 'Parelmoerdonkerrood', 'RAL Classic', 129, 4, 12, 255);
+    this.AddColour('RAL 3033', 'Parelmoerlichtrood', 'RAL Classic', 203, 5, 22, 255);
+    this.AddColour('RAL 4001', 'Roodlila', 'RAL Classic', 132, 66, 132, 255);
+    this.AddColour('RAL 4002', 'Roodpaars', 'RAL Classic', 140, 33, 66, 255);
+    this.AddColour('RAL 4003', 'Heidepaars', 'RAL Classic', 206, 57, 140, 255);
+    this.AddColour('RAL 4004', 'Bordeauxpaars', 'RAL Classic', 90, 8, 41, 255);
+    this.AddColour('RAL 4005', 'Blauwlila', 'RAL Classic', 99, 57, 156, 255);
+    this.AddColour('RAL 4006', 'Verkeerspurper', 'RAL Classic', 148, 8, 99, 255);
+    this.AddColour('RAL 4007', 'Purperviolet', 'RAL Classic', 57, 8, 41, 255);
+    this.AddColour('RAL 4008', 'Signaalviolet', 'RAL Classic', 123, 24, 123, 255);
+    this.AddColour('RAL 4009', 'Pastelviolet', 'RAL Classic', 156, 115, 148, 255);
+    this.AddColour('RAL 4010', 'Telemagenta', 'RAL Classic', 189, 16, 115, 255);
+    this.AddColour('RAL 4011', 'Parelmoerdonkerviolet', 'RAL Classic', 140, 4, 106, 255);
+    this.AddColour('RAL 4012', 'Parelmoerlichtviolet', 'RAL Classic', 121, 2, 128, 255);
+    this.AddColour('RAL 5000', 'Paarsblauw', 'RAL Classic', 16, 49, 107, 255);
+    this.AddColour('RAL 5001', 'Groenblauw', 'RAL Classic', 8, 49, 82, 255);
+    this.AddColour('RAL 5002', 'Ultramarijnblauw', 'RAL Classic', 0, 8, 115, 255);
+    this.AddColour('RAL 5003', 'Saffierblauw', 'RAL Classic', 0, 16, 66, 255);
+    this.AddColour('RAL 5004', 'Zwartblauw', 'RAL Classic', 0, 8, 24, 255);
+    this.AddColour('RAL 5005', 'Signaalblauw', 'RAL Classic', 0, 41, 123, 255);
+    this.AddColour('RAL 5007', 'Briljantblauw', 'RAL Classic', 33, 74, 132, 255);
+    this.AddColour('RAL 5008', 'Grijsblauw', 'RAL Classic', 24, 41, 57, 255);
+    this.AddColour('RAL 5009', 'Azuurblauw', 'RAL Classic', 16, 66, 115, 255);
+    this.AddColour('RAL 5010', 'Gentiaanblauw', 'RAL Classic', 0, 41, 115, 255);
+    this.AddColour('RAL 5011', 'Staalblauw', 'RAL Classic', 0, 16, 41, 255);
+    this.AddColour('RAL 5012', 'Lichtblauw', 'RAL Classic', 41, 115, 189, 255);
+    this.AddColour('RAL 5013', 'Kobaltblauw', 'RAL Classic', 0, 16, 66, 255);
+    this.AddColour('RAL 5014', 'Duifblauw', 'RAL Classic', 74, 107, 156, 255);
+    this.AddColour('RAL 5015', 'Hemelsblauw', 'RAL Classic', 16, 99, 173, 255);
+    this.AddColour('RAL 5017', 'Verkeersblauw', 'RAL Classic', 0, 57, 132, 255);
+    this.AddColour('RAL 5018', 'Turkooisblauw', 'RAL Classic', 57, 148, 132, 255);
+    this.AddColour('RAL 5019', 'Capriblauw', 'RAL Classic', 8, 66, 123, 255);
+    this.AddColour('RAL 5020', 'Oceaanblauw', 'RAL Classic', 0, 49, 49, 255);
+    this.AddColour('RAL 5021', 'Waterblauw', 'RAL Classic', 24, 123, 99, 255);
+    this.AddColour('RAL 5022', 'Nachtblauw', 'RAL Classic', 0, 8, 74, 255);
+    this.AddColour('RAL 5023', 'Verblauw', 'RAL Classic', 41, 82, 140, 255);
+    this.AddColour('RAL 5024', 'Pastelblauw', 'RAL Classic', 82, 140, 181, 255);
+    this.AddColour('RAL 5025', 'Parelmoerblauw', 'RAL Classic', 6, 76, 86, 255);
+    this.AddColour('RAL 5026', 'Parelmoernachtblauw', 'RAL Classic', 3, 6, 85, 255);
+    this.AddColour('RAL 6000', 'Patinagroen', 'RAL Classic', 49, 123, 82, 255);
+    this.AddColour('RAL 6001', 'Smaragdgroen', 'RAL Classic', 33, 82, 33, 255);
+    this.AddColour('RAL 6002', 'Loofgroen', 'RAL Classic', 29, 95, 40, 255);
+    this.AddColour('RAL 6003', 'Olijfgroen', 'RAL Classic', 57, 66, 41, 255);
+    this.AddColour('RAL 6004', 'Blauwgroen', 'RAL Classic', 8, 57, 41, 255);
+    this.AddColour('RAL 6005', 'Mosgroen', 'RAL Classic', 8, 57, 24, 255);
+    this.AddColour('RAL 6006', 'Grijs olijfgroen', 'RAL Classic', 41, 41, 33, 255);
+    this.AddColour('RAL 6007', 'Flessegroen', 'RAL Classic', 24, 33, 16, 255);
+    this.AddColour('RAL 6008', 'Bruingroen', 'RAL Classic', 33, 33, 24, 255);
+    this.AddColour('RAL 6009', 'Dennegroen', 'RAL Classic', 16, 41, 24, 255);
+    this.AddColour('RAL 6010', 'Grasgroen', 'RAL Classic', 49, 107, 33, 255);
+    this.AddColour('RAL 6011', 'Resedagroen', 'RAL Classic', 90, 123, 74, 255);
+    this.AddColour('RAL 6012', 'Zwartgroen', 'RAL Classic', 24, 41, 41, 255);
+    this.AddColour('RAL 6013', 'Rietgroen', 'RAL Classic', 115, 115, 74, 255);
+    this.AddColour('RAL 6014', 'Geel olijfgroen', 'RAL Classic', 49, 49, 33, 255);
+    this.AddColour('RAL 6015', 'Zwart olijfgroen', 'RAL Classic', 41, 41, 33, 255);
+    this.AddColour('RAL 6016', 'Turkooisgroen', 'RAL Classic', 8, 115, 49, 255);
+    this.AddColour('RAL 6017', 'Meigroen', 'RAL Classic', 66, 132, 49, 255);
+    this.AddColour('RAL 6018', 'Geelgroen', 'RAL Classic', 74, 173, 49, 255);
+    this.AddColour('RAL 6019', 'Witgroen', 'RAL Classic', 189, 231, 189, 255);
+    this.AddColour('RAL 6020', 'Chroomoxydegroen', 'RAL Classic', 33, 57, 41, 255);
+    this.AddColour('RAL 6021', 'Bleekgroen', 'RAL Classic', 132, 165, 123, 255);
+    this.AddColour('RAL 6022', 'Bruin olijfgroen', 'RAL Classic', 41, 33, 24, 255);
+    this.AddColour('RAL 6024', 'Verkeersgroen', 'RAL Classic', 33, 148, 66, 255);
+    this.AddColour('RAL 6025', 'Varengroen', 'RAL Classic', 74, 107, 49, 255);
+    this.AddColour('RAL 6026', 'Opaalgroen', 'RAL Classic', 8, 90, 49, 255);
+    this.AddColour('RAL 6027', 'Lichtgroen', 'RAL Classic', 123, 206, 189, 255);
+    this.AddColour('RAL 6028', 'Pijnboomgroen', 'RAL Classic', 33, 74, 49, 255);
+    this.AddColour('RAL 6029', 'Mintgroen', 'RAL Classic', 16, 123, 33, 255);
+    this.AddColour('RAL 6032', 'Signaalgroen', 'RAL Classic', 41, 140, 66, 255);
+    this.AddColour('RAL 6033', 'Mintturquoise', 'RAL Classic', 66, 140, 123, 255);
+    this.AddColour('RAL 6034', 'Pastelturquoise', 'RAL Classic', 123, 189, 181, 255);
+    this.AddColour('RAL 6035', 'Parelmoerdonkergroen', 'RAL Classic', 25, 76, 0, 255);
+    this.AddColour('RAL 6036', 'Parelmoerlichtgroen', 'RAL Classic', 22, 108, 105, 255);
+    this.AddColour('RAL 7000', 'Pelsgrijs', 'RAL Classic', 115, 132, 148, 255);
+    this.AddColour('RAL 7001', 'Zilvergrijs', 'RAL Classic', 132, 148, 165, 255);
+    this.AddColour('RAL 7002', 'Olijfgrijs', 'RAL Classic', 123, 115, 99, 255);
+    this.AddColour('RAL 7003', 'Mosgrijs', 'RAL Classic', 115, 115, 99, 255);
+    this.AddColour('RAL 7004', 'Signaalgrijs', 'RAL Classic', 156, 156, 165, 255);
+    this.AddColour('RAL 7005', 'Muisgrijs', 'RAL Classic', 99, 107, 107, 255);
+    this.AddColour('RAL 7006', 'Beigegrijs', 'RAL Classic', 107, 99, 82, 255);
+    this.AddColour('RAL 7008', 'Kakigrijs', 'RAL Classic', 107, 82, 57, 255);
+    this.AddColour('RAL 7009', 'Groengrijs', 'RAL Classic', 74, 82, 74, 255);
+    this.AddColour('RAL 7010', 'Zeildoekgrijs', 'RAL Classic', 74, 74, 74, 255);
+    this.AddColour('RAL 7011', 'Ijzergrijs', 'RAL Classic', 66, 74, 82, 255);
+    this.AddColour('RAL 7012', 'Bazaltgrijs', 'RAL Classic', 74, 82, 90, 255);
+    this.AddColour('RAL 7013', 'Bruingrijs', 'RAL Classic', 66, 66, 57, 255);
+    this.AddColour('RAL 7015', 'Leigrijs', 'RAL Classic', 57, 66, 82, 255);
+    this.AddColour('RAL 7016', 'Antracietgrijs', 'RAL Classic', 33, 41, 57, 255);
+    this.AddColour('RAL 7021', 'Zwartgrijs', 'RAL Classic', 24, 33, 41, 255);
+    this.AddColour('RAL 7022', 'Ombergrijs', 'RAL Classic', 57, 57, 57, 255);
+    this.AddColour('RAL 7023', 'Betongrijs', 'RAL Classic', 123, 123, 115, 255);
+    this.AddColour('RAL 7024', 'Grafietgrijs', 'RAL Classic', 49, 57, 66, 255);
+    this.AddColour('RAL 7026', 'Granietgrijs', 'RAL Classic', 33, 48, 57, 255);
+    this.AddColour('RAL 7030', 'Steengrijs', 'RAL Classic', 147, 141, 131, 255);
+    this.AddColour('RAL 7031', 'Blauwgrijs', 'RAL Classic', 74, 93, 107, 255);
+    this.AddColour('RAL 7032', 'Kiezelgrijs', 'RAL Classic', 189, 186, 173, 255);
+    this.AddColour('RAL 7033', 'Cementgrijs', 'RAL Classic', 123, 130, 115, 255);
+    this.AddColour('RAL 7034', 'Geelgrijs', 'RAL Classic', 140, 134, 115, 255);
+    this.AddColour('RAL 7035', 'Lichtgrijs', 'RAL Classic', 214, 219, 222, 255);
+    this.AddColour('RAL 7036', 'Platinagrijs', 'RAL Classic', 156, 150, 156, 255);
+    this.AddColour('RAL 7037', 'Stofgrijs', 'RAL Classic', 123, 125, 132, 255);
+    this.AddColour('RAL 7038', 'Agaatgrijs', 'RAL Classic', 189, 190, 189, 255);
+    this.AddColour('RAL 7039', 'Kwartsgrijs', 'RAL Classic', 99, 93, 90, 255);
+    this.AddColour('RAL 7040', 'Venstergrijs', 'RAL Classic', 156, 162, 181, 255);
+    this.AddColour('RAL 7042', 'Verkeersgrijs A', 'RAL Classic', 140, 150, 156, 255);
+    this.AddColour('RAL 7043', 'Verkeersgrijs B', 'RAL Classic', 66, 69, 66, 255);
+    this.AddColour('RAL 7044', 'Zijdegrijs', 'RAL Classic', 198, 190, 189, 255);
+    this.AddColour('RAL 7045', 'Telegrijs 1', 'RAL Classic', 140, 150, 156, 255);
+    this.AddColour('RAL 7046', 'Telegrijs 2', 'RAL Classic', 123, 130, 140, 255);
+    this.AddColour('RAL 7047', 'Telegrijs 4', 'RAL Classic', 222, 215, 222, 255);
+    this.AddColour('RAL 7048', 'Parelmoermuisgrijs', 'RAL Classic', 121, 122, 91, 255);
+    this.AddColour('RAL 8000', 'Groenbruin', 'RAL Classic', 123, 93, 57, 255);
+    this.AddColour('RAL 8001', 'Okerbruin', 'RAL Classic', 148, 81, 41, 255);
+    this.AddColour('RAL 8002', 'Signaalbruin', 'RAL Classic', 107, 56, 49, 255);
+    this.AddColour('RAL 8003', 'Leembruin', 'RAL Classic', 115, 56, 33, 255);
+    this.AddColour('RAL 8004', 'Koperbruin', 'RAL Classic', 132, 56, 41, 255);
+    this.AddColour('RAL 8007', 'Reebruin', 'RAL Classic', 90, 48, 24, 255);
+    this.AddColour('RAL 8008', 'Olijfbruin', 'RAL Classic', 99, 60, 33, 255);
+    this.AddColour('RAL 8011', 'Notebruin', 'RAL Classic', 66, 36, 24, 255);
+    this.AddColour('RAL 8012', 'Roodbruin', 'RAL Classic', 82, 28, 24, 255);
+    this.AddColour('RAL 8014', 'Sepiabruin', 'RAL Classic', 57, 36, 24, 255);
+    this.AddColour('RAL 8015', 'Kastanjebruin', 'RAL Classic', 74, 28, 24, 255);
+    this.AddColour('RAL 8016', 'Mahoniebruin', 'RAL Classic', 57, 28, 24, 255);
+    this.AddColour('RAL 8017', 'Chocoladebruin', 'RAL Classic', 41, 28, 24, 255);
+    this.AddColour('RAL 8019', 'Grijsbruin', 'RAL Classic', 41, 36, 41, 255);
+    this.AddColour('RAL 8022', 'Zwartbruin', 'RAL Classic', 8, 8, 8, 255);
+    this.AddColour('RAL 8023', 'Oranjebruin', 'RAL Classic', 156, 69, 41, 255);
+    this.AddColour('RAL 8024', 'Beigebruin', 'RAL Classic', 107, 65, 49, 255);
+    this.AddColour('RAL 8025', 'Bleekbruin', 'RAL Classic', 99, 73, 57, 255);
+    this.AddColour('RAL 8028', 'Terrabruin', 'RAL Classic', 66, 44, 33, 255);
+    this.AddColour('RAL 8029', 'Parelmoerkoper', 'RAL Classic', 131, 39, 2, 255);
+    this.AddColour('RAL 9001', 'Crèmewit', 'RAL Classic', 255, 255, 247, 255);
+    this.AddColour('RAL 9002', 'Grijswit', 'RAL Classic', 247, 239, 231, 255);
+    this.AddColour('RAL 9003', 'Signaalwit', 'RAL Classic', 255, 255, 255, 255);
+    this.AddColour('RAL 9004', 'Signaalzwart', 'RAL Classic', 24, 28, 33, 255);
+    this.AddColour('RAL 9005', 'Gitzwart', 'RAL Classic', 0, 4, 8, 255);
+    this.AddColour('RAL 9006', 'Blank aluminiumkleurig', 'RAL Classic', 165, 170, 181, 255);
+    this.AddColour('RAL 9007', 'Grijs aluminiumkleurig', 'RAL Classic', 123, 121, 123, 255);
+    this.AddColour('RAL 9010', 'Zuiver wit', 'RAL Classic', 250, 255, 255, 255);
+    this.AddColour('RAL 9011', 'Grafietzwart', 'RAL Classic', 8, 16, 24, 255);
+    this.AddColour('RAL 9016', 'Verkeerswit', 'RAL Classic', 252, 255, 255, 255);
+    this.AddColour('RAL 9017', 'Verkeerszwart', 'RAL Classic', 16, 20, 24, 255);
+    this.AddColour('RAL 9018', 'Papyruswit', 'RAL Classic', 222, 227, 222, 255);
+    this.AddColour('RAL 9022', 'Parelmoerlichtgrijs', 'RAL Classic', 132, 132, 132, 255);
+    this.AddColour('RAL 9023', 'Parelmoerdonkergrijs', 'RAL Classic', 108, 108, 108, 255);
+    this.AddColour('RAL 3028', 'Zuiver rood', 'RAL Classic', 204, 44, 36, 255);
+    this.AddColour('RAL 6038', 'Briljantgroen', 'RAL Classic', 0, 181, 26, 255);
+    this.AddColour('RAL 6037', 'Zuiver groen', 'RAL Classic', 0, 139, 41, 255);
+  }
+
+  private AddColour(ralname: string, colourname: string, category: string, red: number, green: number, blue: number, alpha: number): void {
+    var ral = new RALColour();
+
+    ral.ralname = ralname;
+    ral.colourname = colourname;
+    ral.category = category;
+    ral.red = red;
+    ral.green = green;
+    ral.blue = blue;
+    ral.alpha = alpha;
+
+    this.RALColours.push(ral);
+  }
+}
+
+class RALColour {
+  public ralname: string;
+  public colourname: string;
+  public category: string;
+  public red: number;
+  public green: number;
+  public blue: number;
+  public alpha: number;
+
+  public GetRGBHex(): string {
+    var red = this.red.toString(16);
+    var green = this.green.toString(16);
+    var blue = this.blue.toString(16);
+
+    if (red.length == 1) {
+      red = "0" + red;
+    }
+
+    if (green.length == 1) {
+      green = "0" + green;
+    }
+
+    if (blue.length == 1) {
+      blue = "0" + blue;
+    }
+
+    return "#" + red + green + blue;
+  }
+}

package/src/app/modules/fabrikantencore/components/fab-filter-colour/fab-filter-colour.component.html

@@ -0,0 +1,10 @@
+<button class="select-button" mat-stroked-button (click)="OpenDialog()">
+  {{ TranslateService.GetActiveValueFilter(filter.id) }}
+  <ng-container *ngIf="filter.selectedColour != null">
+    <span>
+      ({{ filter.selectedColour }})
+    </span>
+    <span class='preview' [style.background-color]="filter.selectedColourValue">
+    </span>
+  </ng-container>
+</button>

package/src/app/modules/fabrikantencore/components/fab-filter-colour/fab-filter-colour.component.scss

@@ -0,0 +1,11 @@
+.select-button {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.preview {
+  padding: 4px;
+  padding-left: 15px;
+  margin: 5px;
+  border: 1px solid #000;
+}

package/src/app/modules/fabrikantencore/components/fab-filter-colour/fab-filter-colour.component.spec.ts

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

package/src/app/modules/fabrikantencore/components/fab-filter-colour/fab-filter-colour.component.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectorRef, Component, Input } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { FabrikantenService } from '../../services/fabrikanten.service';
+import { TranslateService } from '../../services/translate.service';
+import { FabrikantenFilterViewModel } from '../../swagger/SwaggerClient';
+import { FabFilterColourDialogComponent } from './fab-filter-colour-dialog/fab-filter-colour-dialog.component';
+
+@Component({
+  selector: 'app-fab-filter-colour',
+  templateUrl: './fab-filter-colour.component.html',
+  styleUrls: ['./fab-filter-colour.component.scss']
+})
+export class FabFilterColourComponent {
+
+  public SelectedOptionId: number;
+
+  _filter: FabrikantenFilterViewModel;
+  get filter(): FabrikantenFilterViewModel {
+    return this._filter;
+  }
+
+  @Input() set filter(value: FabrikantenFilterViewModel) {
+    this._filter = value;
+
+    this.SelectedOptionId = 1;
+
+    //if (this.SelectedOptionId == 0) {
+    //  var options = this._filter.options;
+    //  if (options != null && options.length == 1) {
+    //    this.SelectedOptionId = options[0].id;
+    //  }
+    //}
+  }
+
+  constructor(
+    private FabrikantenService: FabrikantenService,
+    public TranslateService: TranslateService,
+    private ChangeDetectorRef: ChangeDetectorRef,
+    public dialog: MatDialog) { }
+
+  public OpenDialog(): void {
+
+    var filteroptionname = "";
+
+    if (this.filter != null && this.filter.options != null && this.filter.options.length > 0) {
+      filteroptionname = this.filter.options[0].name + "";
+    }
+
+    var dialogRef = this.dialog.open(FabFilterColourDialogComponent, {
+      data: {
+        filterid: this.filter.id,
+        filteroptionname: filteroptionname
+      }
+    });
+  }
+}

package/src/app/modules/fabrikantencore/components/fab-filter-colour-label/fab-filter-colour-label.component.html

@@ -0,0 +1,20 @@
+<div class="displayflex">
+  <div class="filter-label">
+    {{ TranslateService.GetActiveValueFilter(filter.id) }}
+    <span *ngIf="filter.blocksProductSelect || filter.required">*</span>
+  </div>
+  <div class="filter-options">
+    <button class="select-button" mat-stroked-button (click)="OpenDialog()">
+      Selecteren
+      <ng-container *ngIf="filter.selectedColour != null">
+        <span>
+          ({{ filter.selectedColour }})
+        </span>
+        <span class='preview' [style.background-color]="filter.selectedColourValue">
+        </span>
+      </ng-container>
+    </button>
+  </div>
+</div>
+
+

package/src/app/modules/fabrikantencore/components/fab-filter-colour-label/fab-filter-colour-label.component.scss

@@ -0,0 +1,11 @@
+.select-button {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.preview {
+  padding: 4px;
+  padding-left: 15px;
+  margin: 5px;
+  border: 1px solid #000;
+}

package/src/app/modules/fabrikantencore/components/fab-filter-colour-label/fab-filter-colour-label.component.spec.ts

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

package/src/app/modules/fabrikantencore/components/fab-filter-colour-label/fab-filter-colour-label.component.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectorRef, Component, Input } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { FabrikantenService } from '../../services/fabrikanten.service';
+import { TranslateService } from '../../services/translate.service';
+import { FabrikantenFilterViewModel } from '../../swagger/SwaggerClient';
+import { FabFilterColourDialogComponent } from './../fab-filter-colour/fab-filter-colour-dialog/fab-filter-colour-dialog.component';
+
+
+@Component({
+  selector: 'app-fab-filter-colour-label',
+  templateUrl: './fab-filter-colour-label.component.html',
+  styleUrls: ['./fab-filter-colour-label.component.scss']
+})
+export class FabFilterColourLabelComponent {
+  public SelectedOptionId: number;
+
+  _filter: FabrikantenFilterViewModel;
+  get filter(): FabrikantenFilterViewModel {
+    return this._filter;
+  }
+
+  @Input() set filter(value: FabrikantenFilterViewModel) {
+    this._filter = value;
+
+    this.SelectedOptionId = 1;
+
+    //if (this.SelectedOptionId == 0) {
+    //  var options = this._filter.options;
+    //  if (options != null && options.length == 1) {
+    //    this.SelectedOptionId = options[0].id;
+    //  }
+    //}
+  }
+
+  constructor(
+    private FabrikantenService: FabrikantenService,
+    public TranslateService: TranslateService,
+    private ChangeDetectorRef: ChangeDetectorRef,
+    public dialog: MatDialog) { }
+
+  public OpenDialog(): void {
+
+    var filteroptionname = "";
+
+    if (this.filter != null && this.filter.options != null && this.filter.options.length > 0) {
+      filteroptionname = this.filter.options[0].name + "";
+    }
+
+    var dialogRef = this.dialog.open(FabFilterColourDialogComponent, {
+      data: {
+        filterid: this.filter.id,
+        filteroptionname: filteroptionname
+      }
+    });
+  }
+}