-
+
-
-
-
-
+ (dragonDropleave)="onDragLeave()"
+ >
+
+
Drag and Drop File or Click to Browse
+ class="go-file-upload__container go-file-upload__container--selected"
+ >
+ iconClass="go-icon--large"
+ >
File Selected
@@ -45,35 +47,53 @@
#filePicker
class="go-file-upload__input"
(change)="onFilePicked($event)"
- [attr.multiple]="multiple ? true : null">
-
+ [attr.multiple]="multiple ? true : null"
+ />
-
-
-
+
+
Uploading File...
-
-
Files
-
File Name
-
- {{ file }}
- Files
+ File Name
+
+ {{ file }}
+
-
-
-
+
+
diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts
index 5d491fd0a..dbfb809a5 100644
--- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts
+++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts
@@ -1,17 +1,24 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { GoFileUploadComponent } from './go-file-upload.component';
-import { CommonModule } from '@angular/common';
-import { FormArray, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { GoButtonModule } from '../go-button/go-button.module';
-import { GoHintModule } from '../go-hint/go-hint.module';
-import { GoIconButtonModule } from '../go-icon-button/go-icon-button.module';
-import { GoIconModule } from '../go-icon/go-icon.module';
-import { GoLoaderModule } from '../go-loader/go-loader.module';
-import { GoRequiredTextModule } from '../go-required-text/go-required-text.module';
-import { GoFormErrorsModule } from '../go-form-errors/go-form-errors.module';
-
-describe('GoFileUploadComponent', () => {
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { GoFileUploadComponent } from "./go-file-upload.component";
+import { CommonModule } from "@angular/common";
+import {
+ FormArray,
+ FormControl,
+ FormGroup,
+ FormsModule,
+ ReactiveFormsModule,
+} from "@angular/forms";
+import { GoButtonModule } from "../go-button/go-button.module";
+import { GoHintModule } from "../go-hint/go-hint.module";
+import { GoIconButtonModule } from "../go-icon-button/go-icon-button.module";
+import { GoIconModule } from "../go-icon/go-icon.module";
+import { GoLoaderModule } from "../go-loader/go-loader.module";
+import { GoRequiredTextModule } from "../go-required-text/go-required-text.module";
+import { GoFormErrorsModule } from "../go-form-errors/go-form-errors.module";
+import { By } from "@angular/platform-browser";
+
+describe("GoFileUploadComponent", () => {
let component: GoFileUploadComponent;
let fixture: ComponentFixture;
@@ -28,67 +35,66 @@ describe('GoFileUploadComponent', () => {
GoIconButtonModule,
GoLoaderModule,
GoRequiredTextModule,
- ReactiveFormsModule
- ]
- })
- .compileComponents();
+ ReactiveFormsModule,
+ ],
+ }).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(GoFileUploadComponent);
component = fixture.componentInstance;
- component.control = new FormControl('');
+ component.control = new FormControl("");
fixture.detectChanges();
});
- it('should create', () => {
+ it("should create", () => {
expect(component).toBeTruthy();
});
- describe('onDragOver', () => {
+ describe("onDragOver", () => {
it('should set state to "selecting" if it\'s not loading', () => {
- component.state = 'selected';
+ component.state = "selected";
component.isLoading = false;
component.onDragOver();
- expect(component.state).toEqual('selecting');
+ expect(component.state).toEqual("selecting");
});
});
- describe('onDragLeave', () => {
+ describe("onDragLeave", () => {
it('should set state to "selected" if any files are uploaded', () => {
const file: FormGroup = new FormGroup({
- file: new FormControl('whatever')
+ file: new FormControl("whatever"),
});
component.files = new FormArray([file]);
- component.state = 'selecting';
+ component.state = "selecting";
component.onDragLeave();
- expect(component.state).toEqual('selected');
+ expect(component.state).toEqual("selected");
});
});
- describe('reset', () => {
- it('calls clear on files', () => {
- spyOn(component.files, 'clear').and.callThrough();
+ describe("reset", () => {
+ it("calls clear on files", () => {
+ spyOn(component.files, "clear").and.callThrough();
component.reset();
expect(component.files.clear).toHaveBeenCalled();
});
- it('sets filePreview to empty array', () => {
- component.filePreview = ['whatever'];
+ it("sets filePreview to empty array", () => {
+ component.filePreview = ["whatever"];
component.reset();
expect(component.filePreview).toEqual([]);
});
- it('sets isLoading to false', () => {
+ it("sets isLoading to false", () => {
component.isLoading = true;
component.reset();
@@ -97,79 +103,101 @@ describe('GoFileUploadComponent', () => {
});
it('sets state to "selecting"', () => {
- component.state = 'selected';
+ component.state = "selected";
component.reset();
- expect(component.state).toEqual('selecting');
+ expect(component.state).toEqual("selecting");
});
});
- describe('removeFile', () => {
+ describe("removeFile", () => {
beforeEach(() => {
const file: FormGroup = new FormGroup({
- file: new FormControl('whatever')
+ file: new FormControl("whatever"),
});
component.files = new FormArray([file]);
- component.filePreview = ['whatever'];
+ component.filePreview = ["whatever"];
});
- it('should set state to selecting if it was previously selected', () => {
- component.state = 'selected';
+ it("should set state to selecting if it was previously selected", () => {
+ component.state = "selected";
component.removeFile(0);
- expect(component.state).toBe('selecting');
+ expect(component.state).toBe("selecting");
});
- it('should not change the state if the state was selecting', () => {
- component.state = 'selecting';
+ it("should not change the state if the state was selecting", () => {
+ component.state = "selecting";
component.removeFile(0);
- expect(component.state).toBe('selecting');
+ expect(component.state).toBe("selecting");
});
- it('should remove the file at the given index from the form control', () => {
+ it("should remove the file at the given index from the form control", () => {
component.removeFile(0);
expect(component.control.value.length).toBe(0);
});
- it('should remove the file at the given index from our file Preview Array', () => {
+ it("should remove the file at the given index from our file Preview Array", () => {
component.removeFile(0);
expect(component.filePreview.length).toBe(0);
});
});
- describe('onFilePicked', () => {
- const files: Object[] = [{
- id: 1,
- name: 'file'
- }];
+ describe("onFilePicked", () => {
+ const files: Object[] = [
+ {
+ id: 1,
+ name: "file",
+ },
+ ];
afterEach(() => {
component.files = component.fb.array([]);
component.filePreview = [];
});
- it('doesn\'t error when dropping a file', () => {
+ it("doesn't error when dropping a file", () => {
component.onFilePicked({
dataTransfer: {
- files: files
- }
+ files: files,
+ },
});
expect(component.files.length).toBe(1);
expect(component.filePreview.length).toBe(1);
- expect(component.filePreview[0]).toBe('file');
+ expect(component.filePreview[0]).toBe("file");
});
- it('doesn\t error when clicking on the file upload', () => {
+ it("doesn\t error when clicking on the file upload", () => {
component.onFilePicked({
target: {
- files: files
- }
+ files: files,
+ },
});
expect(component.files.length).toBe(1);
expect(component.filePreview.length).toBe(1);
- expect(component.filePreview[0]).toBe('file');
+ expect(component.filePreview[0]).toBe("file");
});
});
+ it("component should not render go-form-errors if hideFieldError property is true ", () => {
+ component.hideFieldError = true;
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(0);
+ });
+ it("component should render go-form-errors if hideFieldError property is false ", () => {
+ component.hideFieldError = false;
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(1);
+ });
+ it("component should render go-form-errors if hideFieldError is not set ", () => {
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(1);
+ });
});
diff --git a/projects/go-lib/src/lib/components/go-form-base/go-form-base.component.ts b/projects/go-lib/src/lib/components/go-form-base/go-form-base.component.ts
index b25329b5c..3767d51b1 100644
--- a/projects/go-lib/src/lib/components/go-form-base/go-form-base.component.ts
+++ b/projects/go-lib/src/lib/components/go-form-base/go-form-base.component.ts
@@ -3,7 +3,7 @@ import { AbstractControl, FormControl } from '@angular/forms';
import { GoFormService } from '../../services/form.service';
@Component({
- template: ''
+ template: '',
})
export class GoFormBaseComponent {
/**
@@ -41,6 +41,11 @@ export class GoFormBaseComponent {
*/
@Input() theme: 'light' | 'dark' = 'light';
+ /**
+ * Property to control the visibility of go-form-errors under form field.
+ */
+ @Input() hideFieldError: boolean;
+
/**
* Returns an object for ngClass generated by the GoFormService for inputs
*/
diff --git a/projects/go-lib/src/lib/components/go-input/go-input.component.html b/projects/go-lib/src/lib/components/go-input/go-input.component.html
index fe4c492c9..1682b028e 100644
--- a/projects/go-lib/src/lib/components/go-input/go-input.component.html
+++ b/projects/go-lib/src/lib/components/go-input/go-input.component.html
@@ -6,16 +6,23 @@
{{ label }}
+
;
@@ -18,40 +19,59 @@ describe('GoInputComponent', () => {
GoFormErrorsModule,
GoHintModule,
GoRequiredTextModule,
- ReactiveFormsModule
- ]
- })
- .compileComponents();
+ ReactiveFormsModule,
+ ],
+ }).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(GoInputComponent);
component = fixture.componentInstance;
- component.control = new FormControl('Some Value');
+ component.control = new FormControl("Some Value");
fixture.detectChanges();
});
- it('should create', () => {
+ it("should create", () => {
expect(component).toBeTruthy();
});
- describe('ngOnInit()', () => {
- it('sets minlength to 0 if minlength is greater than maxlength', () => {
+ describe("ngOnInit()", () => {
+ it("sets minlength to 0 if minlength is greater than maxlength", () => {
component.minlength = 10;
component.maxlength = 8;
component.ngOnInit();
expect(component.minlength).toBe(0);
- })
-
- it('sets maxlength to 524288 if maxlength is greater than 524288', () => {
+ });
+
+ it("sets maxlength to 524288 if maxlength is greater than 524288", () => {
component.maxlength = 524290;
component.ngOnInit();
expect(component.maxlength).toBe(524288);
- })
+ });
+ it("component should not render go-form-errors if hideFieldError property is true ", () => {
+ component.hideFieldError = true;
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(0);
+ });
+ it("component should render go-form-errors if hideFieldError property is false ", () => {
+ component.hideFieldError = false;
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(1);
+ });
+ it("component should render go-form-errors if hideFieldError is not set ", () => {
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(1);
+ });
});
});
diff --git a/projects/go-lib/src/lib/components/go-radio/go-radio-group.component.html b/projects/go-lib/src/lib/components/go-radio/go-radio-group.component.html
index a29a09f3d..9f00f2be3 100644
--- a/projects/go-lib/src/lib/components/go-radio/go-radio-group.component.html
+++ b/projects/go-lib/src/lib/components/go-radio/go-radio-group.component.html
@@ -1,17 +1,21 @@
-
+
+ *ngIf="enableLegend"
+ >
{{ legend }}
+
diff --git a/projects/go-lib/src/lib/components/go-radio/go-radio-group.component.spec.ts b/projects/go-lib/src/lib/components/go-radio/go-radio-group.component.spec.ts
index 5f87d3e87..45bb5bcda 100644
--- a/projects/go-lib/src/lib/components/go-radio/go-radio-group.component.spec.ts
+++ b/projects/go-lib/src/lib/components/go-radio/go-radio-group.component.spec.ts
@@ -1,31 +1,40 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component } from '@angular/core';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { Component } from "@angular/core";
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { GoHintModule } from '../go-hint/go-hint.module';
-import { GoRadioGroupComponent } from './go-radio-group.component';
-import { GoRadioButtonComponent } from './go-radio-button.component';
-import { GoRequiredTextModule } from '../go-required-text/go-required-text.module';
-import { GoFormErrorsModule } from '../go-form-errors/go-form-errors.module';
+import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { GoHintModule } from "../go-hint/go-hint.module";
+import { GoRadioGroupComponent } from "./go-radio-group.component";
+import { GoRadioButtonComponent } from "./go-radio-button.component";
+import { GoRequiredTextModule } from "../go-required-text/go-required-text.module";
+import { GoFormErrorsModule } from "../go-form-errors/go-form-errors.module";
+import { By } from "@angular/platform-browser";
@Component({
- selector: 'go-test',
+ selector: "go-test",
template: `
-
-
- `
+ `,
})
class GoTestRadioGroupComponent {
- radioControl: FormControl = new FormControl('');
+ radioControl: FormControl = new FormControl("");
}
-describe('GoRadioGroupComponent', () => {
+describe("GoRadioGroupComponent", () => {
let component: GoRadioGroupComponent;
let fixture: ComponentFixture;
let buttonOne: GoRadioButtonComponent;
@@ -33,16 +42,19 @@ describe('GoRadioGroupComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [GoRadioButtonComponent, GoRadioGroupComponent, GoTestRadioGroupComponent],
+ declarations: [
+ GoRadioButtonComponent,
+ GoRadioGroupComponent,
+ GoTestRadioGroupComponent,
+ ],
imports: [
FormsModule,
GoFormErrorsModule,
GoHintModule,
GoRequiredTextModule,
- ReactiveFormsModule
- ]
- })
- .compileComponents();
+ ReactiveFormsModule,
+ ],
+ }).compileComponents();
}));
beforeEach(() => {
@@ -51,16 +63,17 @@ describe('GoRadioGroupComponent', () => {
fixture.detectChanges();
- const buttonArray: GoRadioButtonComponent[] = component.radioButtons.toArray();
+ const buttonArray: GoRadioButtonComponent[] =
+ component.radioButtons.toArray();
buttonOne = buttonArray[0];
buttonTwo = buttonArray[1];
});
- it('should create', () => {
+ it("should create", () => {
expect(component).toBeTruthy();
});
- describe('ngAfterContentChecked', () => {
+ describe("ngAfterContentChecked", () => {
beforeEach(() => {
buttonOne.theme = null;
buttonTwo.theme = null;
@@ -71,44 +84,44 @@ describe('GoRadioGroupComponent', () => {
component.radioButtonCount = 0;
});
- it('should set a theme on each child component', () => {
- component.theme = 'dark';
+ it("should set a theme on each child component", () => {
+ component.theme = "dark";
component.ngAfterContentChecked();
- expect(buttonOne.theme).toBe('dark');
- expect(buttonTwo.theme).toBe('dark');
+ expect(buttonOne.theme).toBe("dark");
+ expect(buttonTwo.theme).toBe("dark");
});
- it('should set a name on each child component when legend is provided', () => {
- component.legend = 'Random Name';
+ it("should set a name on each child component when legend is provided", () => {
+ component.legend = "Random Name";
component.ngAfterContentChecked();
- expect(buttonOne.name).toContain('Random-Name-');
- expect(buttonTwo.name).toContain('Random-Name-');
+ expect(buttonOne.name).toContain("Random-Name-");
+ expect(buttonTwo.name).toContain("Random-Name-");
});
- it('should have enableLegend set to true by default on page load', () => {
+ it("should have enableLegend set to true by default on page load", () => {
component.ngAfterContentChecked();
expect(component.enableLegend).toBeTruthy();
});
- it('should have enableFieldset set to true by default on page load', () => {
+ it("should have enableFieldset set to true by default on page load", () => {
component.ngAfterContentChecked();
expect(component.enableFieldset).toBeTruthy();
});
-
- it('should set a name on each child component when legend is NOT provided', () => {
+
+ it("should set a name on each child component when legend is NOT provided", () => {
component.legend = undefined;
component.ngAfterContentChecked();
- expect(buttonOne.name).toContain('radio-group-');
- expect(buttonTwo.name).toContain('radio-group-');
+ expect(buttonOne.name).toContain("radio-group-");
+ expect(buttonTwo.name).toContain("radio-group-");
});
- it('should set a control on each child component', () => {
- const newControl: FormControl = new FormControl('option1');
+ it("should set a control on each child component", () => {
+ const newControl: FormControl = new FormControl("option1");
component.control = newControl;
component.ngAfterContentChecked();
@@ -117,4 +130,24 @@ describe('GoRadioGroupComponent', () => {
expect(buttonTwo.control).toBe(newControl);
});
});
+ it("component should not render go-form-errors if hideFieldError property is true ", () => {
+ component.hideFieldError = true;
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(0);
+ });
+ it("component should render go-form-errors if hideFieldError property is false ", () => {
+ component.hideFieldError = false;
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(1);
+ });
+ it("component should render go-form-errors if hideFieldError is not set ", () => {
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(1);
+ });
});
diff --git a/projects/go-lib/src/lib/components/go-select/go-select.component.html b/projects/go-lib/src/lib/components/go-select/go-select.component.html
index c3ac2862b..3ee97e67a 100644
--- a/projects/go-lib/src/lib/components/go-select/go-select.component.html
+++ b/projects/go-lib/src/lib/components/go-select/go-select.component.html
@@ -2,7 +2,8 @@
*ngIf="label"
class="go-form__label"
[attr.for]="_id"
- [ngClass]="{'go-form__label--dark': theme === 'dark'}">
+ [ngClass]="{ 'go-form__label--dark': theme === 'dark' }"
+>
{{ label }}
+
- Select {{!select.searchTerm || typeahead ? items.length : refinedItems.length}} Result(s)
+ Select
+ {{ !select.searchTerm || typeahead ? items.length : refinedItems.length }}
+ Result(s)
- Remove All
+ [ngClass]="{ 'go-select__select-all-button--dark': theme === 'dark' }"
+ *ngIf="control.value?.length"
+ >
+ Remove All
-
-
-
-
-
-
-
-
+
+
diff --git a/projects/go-lib/src/lib/components/go-select/go-select.component.scss b/projects/go-lib/src/lib/components/go-select/go-select.component.scss
index 0648faec8..2861d208c 100644
--- a/projects/go-lib/src/lib/components/go-select/go-select.component.scss
+++ b/projects/go-lib/src/lib/components/go-select/go-select.component.scss
@@ -28,6 +28,10 @@
min-height: auto;
}
+.ng-select.ng-select-disabled>.ng-select-container {
+ background-color: $theme-light-app-bg;
+}
+
.ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container,
.ng-select.ng-select-single .ng-select-container .ng-value-container {
align-items: flex-start;
diff --git a/projects/go-lib/src/lib/components/go-select/go-select.component.spec.ts b/projects/go-lib/src/lib/components/go-select/go-select.component.spec.ts
index ab68c1bb9..671beea94 100644
--- a/projects/go-lib/src/lib/components/go-select/go-select.component.spec.ts
+++ b/projects/go-lib/src/lib/components/go-select/go-select.component.spec.ts
@@ -1,15 +1,16 @@
-import { CommonModule } from '@angular/common';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { GoButtonModule } from '../go-button/go-button.module';
-import { GoFormErrorsModule } from '../go-form-errors/go-form-errors.module';
-import { GoHintModule } from '../go-hint/go-hint.module';
-import { GoRequiredTextModule } from '../go-required-text/go-required-text.module';
-import { GoSelectComponent } from './go-select.component';
-import { Subject } from 'rxjs';
-
-describe('GoSelectComponent', () => {
+import { CommonModule } from "@angular/common";
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { NgSelectModule } from "@ng-select/ng-select";
+import { GoButtonModule } from "../go-button/go-button.module";
+import { GoFormErrorsModule } from "../go-form-errors/go-form-errors.module";
+import { GoHintModule } from "../go-hint/go-hint.module";
+import { GoRequiredTextModule } from "../go-required-text/go-required-text.module";
+import { GoSelectComponent } from "./go-select.component";
+import { Subject } from "rxjs";
+import { By } from "@angular/platform-browser";
+
+describe("GoSelectComponent", () => {
let component: GoSelectComponent;
let fixture: ComponentFixture;
@@ -24,7 +25,7 @@ describe('GoSelectComponent', () => {
GoRequiredTextModule,
NgSelectModule,
FormsModule,
- ReactiveFormsModule
+ ReactiveFormsModule,
]
}).compileComponents();
}));
@@ -32,26 +33,25 @@ describe('GoSelectComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(GoSelectComponent);
component = fixture.componentInstance;
- component.control = new FormControl('Some Value');
+ component.control = new FormControl("Some Value");
fixture.detectChanges();
});
- it('should create', () => {
+ it("should create", () => {
expect(component).toBeTruthy();
});
- describe('onSelectAll()', () => {
-
+ describe("onSelectAll()", () => {
beforeEach(() => {
component.multiple = true;
});
- it('adds all of the available items to the form control value', () => {
+ it("adds all of the available items to the form control value", () => {
component.bindValue = undefined;
component.items = [
- { value: 1, label: 'Label 1' },
- { value: 2, label: 'Label 2' },
- { value: 3, label: 'Label 3' }
+ { value: 1, label: "Label 1" },
+ { value: 2, label: "Label 2" },
+ { value: 3, label: "Label 3" },
];
component.onSelectAll();
@@ -59,12 +59,12 @@ describe('GoSelectComponent', () => {
expect(component.control.value).toEqual(component.items);
});
- it('uses bindValue to get value if bindValue exists', () => {
- component.bindValue = 'id';
+ it("uses bindValue to get value if bindValue exists", () => {
+ component.bindValue = "id";
component.items = [
- { id: 1, label: 'Label 1' },
- { id: 2, label: 'Label 2' },
- { id: 3, label: 'Label 3' }
+ { id: 1, label: "Label 1" },
+ { id: 2, label: "Label 2" },
+ { id: 3, label: "Label 3" },
];
component.onSelectAll();
@@ -72,110 +72,148 @@ describe('GoSelectComponent', () => {
expect(component.control.value).toEqual([1, 2, 3]);
});
- it('should select only filtered list, when filtered and selectAll', () => {
- component.bindValue = 'id';
+ it("should select only filtered list, when filtered and selectAll", () => {
+ component.bindValue = "id";
component.items = [
- { id: 1, label: 'banana' },
- { id: 2, label: 'apple' },
- { id: 3, label: 'green apple' }
+ { id: 1, label: "banana" },
+ { id: 2, label: "apple" },
+ { id: 3, label: "green apple" },
];
const filteredItems: any[] = [
- { id: 2, label: 'apple' },
- { id: 3, label: 'green apple' }
+ { id: 2, label: "apple" },
+ { id: 3, label: "green apple" },
];
- component.ngSelect.searchTerm = 'apple';
- component.handleInput({ items: filteredItems, term: 'apple' });
+ component.ngSelect.searchTerm = "apple";
+ component.handleInput({ items: filteredItems, term: "apple" });
component.onSelectAll();
expect(component.control.value).toEqual([2, 3]);
});
- it('should select filtered list with existing items in control value, when filtered and selectAll', () => {
- component.bindValue = 'id';
+ it("should select filtered list with existing items in control value, when filtered and selectAll", () => {
+ component.bindValue = "id";
component.control.patchValue([4]);
component.items = [
- { id: 1, label: 'banana' },
- { id: 2, label: 'apple' },
- { id: 3, label: 'green apple' },
- { id: 4, label: 'grapes' }
+ { id: 1, label: "banana" },
+ { id: 2, label: "apple" },
+ { id: 3, label: "green apple" },
+ { id: 4, label: "grapes" },
];
const filteredItems: any[] = [
- { id: 2, label: 'apple' },
- { id: 3, label: 'green apple' }
+ { id: 2, label: "apple" },
+ { id: 3, label: "green apple" },
];
- component.ngSelect.searchTerm = 'apple';
- component.handleInput({ items: filteredItems, term: 'apple' });
+ component.ngSelect.searchTerm = "apple";
+ component.handleInput({ items: filteredItems, term: "apple" });
component.onSelectAll();
expect(component.control.value.length).toEqual(3);
});
});
- describe('onSelectAll() with typeahead', () => {
+ describe("onSelectAll() with typeahead", () => {
beforeEach(() => {
component.typeahead = new Subject();
component.multiple = true;
});
- it('should store items in previousSelectedItems', () => {
+ it("should store items in previousSelectedItems", () => {
const initialItems: any[] = [
- { id: 1, label: 'banana' },
- { id: 2, label: 'apple' },
+ { id: 1, label: "banana" },
+ { id: 2, label: "apple" },
];
component.items = initialItems;
- component['handleTypeAheadSelectAll']();
- expect(component['previousSelectedItems']).toEqual(initialItems);
+ component["handleTypeAheadSelectAll"]();
+ expect(component["previousSelectedItems"]).toEqual(initialItems);
});
- it('should add items in previousSelectedItems', () => {
- component.handleItemAdd({ id: 1, label: 'banana' });
- expect(component['previousSelectedItems']).toEqual([
- { id: 1, label: 'banana' },
+ it("should add items in previousSelectedItems", () => {
+ component.handleItemAdd({ id: 1, label: "banana" });
+ expect(component["previousSelectedItems"]).toEqual([
+ { id: 1, label: "banana" },
]);
});
- it('should remove items from previousSelectedItems', () => {
- component['previousSelectedItems'] = [{ id: 1, label: 'banana' }];
- component.handleItemRemove({ value: { id: 1, label: 'banana' } });
- expect(component['previousSelectedItems']).toEqual([]);
+ it("should set background color when disabled", () => {
+ component.control.disable();
+ fixture.detectChanges();
+
+ const ngSelectContainer = fixture.nativeElement.querySelector(
+ ".ng-select-container"
+ );
+
+ // Get the computed background color
+ const computedBgColor =
+ getComputedStyle(ngSelectContainer).backgroundColor;
+
+ // Assuming $theme-light-app-bg is a valid CSS color value
+ const expectedBgColor = "rgb(240, 240, 240)";
+
+ // Assert that the computed background color matches the expected value
+ expect(computedBgColor).toBe(expectedBgColor);
+ });
+
+ it("set background color when not disabled", () => {
+ component.control.enable();
+ fixture.detectChanges();
+
+ const ngSelectContainer = fixture.nativeElement.querySelector(
+ ".ng-select-container"
+ );
+
+ // Get the computed background color
+ const computedBgColor =
+ getComputedStyle(ngSelectContainer).backgroundColor;
+
+ // Assuming an empty string because no background color is set when not disabled
+ const expectedBgColor = "rgb(255, 255, 255)";
+
+ // Assert that the computed background color matches the expected value
+ expect(computedBgColor).toBe(expectedBgColor);
});
- it('handleControlInitialValue(), should assign previousSelectedItems', () => {
+ it("should remove items from previousSelectedItems", () => {
+ component["previousSelectedItems"] = [{ id: 1, label: "banana" }];
+ component.handleItemRemove({ value: { id: 1, label: "banana" } });
+ expect(component["previousSelectedItems"]).toEqual([]);
+ });
+
+ it("handleControlInitialValue(), should assign previousSelectedItems", () => {
component.control.patchValue([1]);
- component.bindValue = 'id';
+ component.bindValue = "id";
component.items = [
- { id: 1, label: 'banana' },
- { id: 2, label: 'apple' },
+ { id: 1, label: "banana" },
+ { id: 2, label: "apple" },
];
- component['handleControlInitialValue']();
- expect(component['previousSelectedItems']).toEqual([
- { id: 1, label: 'banana' },
+ component["handleControlInitialValue"]();
+ expect(component["previousSelectedItems"]).toEqual([
+ { id: 1, label: "banana" },
]);
});
});
- describe('processSelectAll', () => {
- it('process select all and patch value in form', () => {
- component.bindValue = 'id';
+ describe("processSelectAll", () => {
+ it("process select all and patch value in form", () => {
+ component.bindValue = "id";
const items: any[] = [
- { id: 1, label: 'banana' },
- { id: 2, label: 'apple' },
- { id: 3, label: 'green apple' },
- { id: 4, label: 'grapes' },
+ { id: 1, label: "banana" },
+ { id: 2, label: "apple" },
+ { id: 3, label: "green apple" },
+ { id: 4, label: "grapes" },
];
- component['processSelectAll'](items);
+ component["processSelectAll"](items);
expect(component.control.value).toEqual([1, 2, 3, 4]);
});
});
- describe('onRemoveAll', () => {
- it('uses removed the selected values', () => {
- component.bindValue = 'id';
- spyOn(component, 'resetTypeAheadItems');
+ describe("onRemoveAll", () => {
+ it("uses removed the selected values", () => {
+ component.bindValue = "id";
+ spyOn(component, "resetTypeAheadItems");
component.items = [
- { id: 1, label: 'Label 1' },
- { id: 2, label: 'Label 2' },
- { id: 3, label: 'Label 3' },
+ { id: 1, label: "Label 1" },
+ { id: 2, label: "Label 2" },
+ { id: 3, label: "Label 3" },
];
component.onSelectAll();
@@ -183,7 +221,29 @@ describe('GoSelectComponent', () => {
component.onRemoveAll();
expect(component.control.value).toBeNull();
- expect(component['resetTypeAheadItems']).toHaveBeenCalled();
+ expect(component["resetTypeAheadItems"]).toHaveBeenCalled();
});
});
+
+ it("component should not render go-form-errors if hideFieldError property is true ", () => {
+ component.hideFieldError = true;
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(0);
+ });
+
+ it("component should render go-form-errors if hideFieldError property is false ", () => {
+ component.hideFieldError = false;
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(1);
+ });
+ it("component should render go-form-errors if hideFieldError is not set ", () => {
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(1);
+ });
});
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss
index 0e7ec9df0..1f0fccc62 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss
+++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss
@@ -93,9 +93,11 @@
}
&--launch {
- color: $base-light-secondary;
+ color: $app-launch-color-secondary;
cursor: default;
- font-size: .6875rem;
+ font-family: 'Nunito';
+ font-size: 0.875rem;
+ font-weight: lighter;
padding: .75rem;
width: 100%;
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.spec.ts b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.spec.ts
index 566ef34e4..cd88c5653 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.spec.ts
+++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.spec.ts
@@ -75,6 +75,34 @@ describe('GoSideNavComponent', () => {
]
}
];
+
+ component.navAppDrawer = {
+ currentAppIcon: 'power_settings_new',
+ currentAppDisplayName: 'go-design',
+ appDrawerConfig: [
+ {
+ displayName: 'GitHub',
+ icon: 'code',
+ url: 'https://github.com/',
+ target: 'github'
+ },
+ {
+ displayName: 'Go Design',
+ icon: 'power_settings_new',
+ url: 'https://tangoe.design/getting-started'
+ },
+ {
+ displayName: 'Google',
+ icon: 'search',
+ url: 'https://www.google.com/'
+ },
+ {
+ displayName: 'Stack Overflow',
+ icon: 'contact_support',
+ url: 'https://stackoverflow.com/'
+ }
+ ]
+ };
fixture.detectChanges();
});
diff --git a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html
index 741651ca6..7541de85f 100644
--- a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html
+++ b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html
@@ -3,7 +3,7 @@
*ngIf="label"
class="go-form__label"
[attr.for]="_id"
- [ngClass]="{'go-form__label--dark': theme === 'dark'}"
+ [ngClass]="{ 'go-form__label--dark': theme === 'dark' }"
>
{{ label }}
+
diff --git a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.spec.ts b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.spec.ts
index a03b90a5d..6fb53bb21 100644
--- a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.spec.ts
+++ b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.spec.ts
@@ -1,12 +1,13 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
-import { GoTextAreaComponent } from './go-text-area.component';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { GoHintModule } from '../go-hint/go-hint.module';
-import { GoRequiredTextModule } from '../go-required-text/go-required-text.module';
-import { GoFormErrorsModule } from '../go-form-errors/go-form-errors.module';
+import { GoTextAreaComponent } from "./go-text-area.component";
+import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { GoHintModule } from "../go-hint/go-hint.module";
+import { GoRequiredTextModule } from "../go-required-text/go-required-text.module";
+import { GoFormErrorsModule } from "../go-form-errors/go-form-errors.module";
+import { By } from "@angular/platform-browser";
-describe('GoTextAreaComponent', () => {
+describe("GoTextAreaComponent", () => {
let component: GoTextAreaComponent;
let fixture: ComponentFixture
;
@@ -18,27 +19,25 @@ describe('GoTextAreaComponent', () => {
GoFormErrorsModule,
GoHintModule,
GoRequiredTextModule,
- ReactiveFormsModule
- ]
- })
- .compileComponents();
+ ReactiveFormsModule,
+ ],
+ }).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(GoTextAreaComponent);
component = fixture.componentInstance;
- component.control = new FormControl('');
+ component.control = new FormControl("");
fixture.detectChanges();
});
- it('should create', () => {
+ it("should create", () => {
expect(component).toBeTruthy();
});
- describe('ngOnInit()', () => {
-
- it('doesn\'n error if no minlength passed in', () => {
+ describe("ngOnInit()", () => {
+ it("doesn'n error if no minlength passed in", () => {
component.minlength = undefined;
component.maxlength = 20;
@@ -48,7 +47,7 @@ describe('GoTextAreaComponent', () => {
expect(component.maxlength).toBe(20);
});
- it('doesn\'n error if no maxlength passed in', () => {
+ it("doesn'n error if no maxlength passed in", () => {
component.minlength = 20;
component.maxlength = undefined;
@@ -58,7 +57,7 @@ describe('GoTextAreaComponent', () => {
expect(component.maxlength).toBe(undefined);
});
- it('sets minlength to 0 if minlength is greater than maxlength', () => {
+ it("sets minlength to 0 if minlength is greater than maxlength", () => {
component.minlength = 150;
component.maxlength = 100;
@@ -68,4 +67,24 @@ describe('GoTextAreaComponent', () => {
expect(component.maxlength).toBe(100);
});
});
+ it("component should not render go-form-errors if hideFieldError property is true ", () => {
+ component.hideFieldError = true;
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(0);
+ });
+ it("component should render go-form-errors if hideFieldError property is false ", () => {
+ component.hideFieldError = false;
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(1);
+ });
+ it("component should render go-form-errors if hideFieldError is not set ", () => {
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(1);
+ });
});
diff --git a/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.html b/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.html
index 3aab190a2..3d1269146 100644
--- a/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.html
+++ b/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.html
@@ -25,18 +25,18 @@
(click)="toggleTimepicker($event)"
>
;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [
- GoTimeComponent,
- GoTimepickerComponent
- ],
+ declarations: [GoTimeComponent, GoTimepickerComponent],
imports: [
GoFormErrorsModule,
GoIconButtonModule,
@@ -35,107 +33,121 @@ describe('GoTimepickerComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(GoTimepickerComponent);
component = fixture.componentInstance;
- component.control = new FormControl('');
+ component.control = new FormControl("");
});
- it('should create', () => {
+ it("should create", () => {
component.ngOnInit();
expect(component).toBeTruthy();
});
- describe('ngOnInit', () => {
+ describe("ngOnInit", () => {
afterEach(() => {
component.selectedTime = null;
});
- it('check with date object', () => {
- const time: string = '05:15 AM';
- component.control.setValue(new Date('2017-04-30 05:15:00'));
+ it("check with date object", () => {
+ const time: string = "05:15 AM";
+ component.control.setValue(new Date("2017-04-30 05:15:00"));
component.ngOnInit();
expect(component.changeTimeFormat(component.selectedTime)).toBe(time);
});
- it('change the time format 24hr to 12hr', () => {
- component.control.setValue('18:15:00');
- const time: string = '06:15 PM';
+ it("change the time format 24hr to 12hr", () => {
+ component.control.setValue("18:15:00");
+ const time: string = "06:15 PM";
component.ngOnInit();
expect(component.selectedTime).toEqual(time);
});
});
- describe('ngAfterViewInit', () => {
+ describe("ngAfterViewInit", () => {
afterEach(() => {
component.selectedTime = null;
});
- it('after change the value of time', () => {
- const time: string = '06:15 PM';
+ it("after change the value of time", () => {
+ const time: string = "06:15 PM";
component.ngAfterViewInit();
- component.control.setValue('18:15:00');
+ component.control.setValue("18:15:00");
expect(component.selectedTime).toEqual(time);
});
});
- describe('timePicked', () => {
+ describe("timePicked", () => {
afterEach(() => {
component.selectedTime = null;
});
- it('set the time with AM', () => {
- const time: string = '10:20 AM';
+ it("set the time with AM", () => {
+ const time: string = "10:20 AM";
const goTimeFormat: GoTimeFormat = {
- hours: '10',
- minutes: '20',
- ampm: 'AM',
+ hours: "10",
+ minutes: "20",
+ ampm: "AM",
};
component.timePicked(goTimeFormat);
expect(component.selectedTime).toEqual(time);
});
- it('set the time with PM', () => {
- const time: string = '10:20 PM';
+ it("set the time with PM", () => {
+ const time: string = "10:20 PM";
const goTimeFormat: GoTimeFormat = {
- hours: '10',
- minutes: '20',
- ampm: 'PM',
+ hours: "10",
+ minutes: "20",
+ ampm: "PM",
};
component.timePicked(goTimeFormat);
expect(component.selectedTime).toEqual(time);
});
- it('clear selected time', () => {
- const time: string = '';
+ it("clear selected time", () => {
+ const time: string = "";
component.timePicked(null);
expect(component.selectedTime).toEqual(time);
});
});
- describe('toggleTimepicker', () => {
+ describe("toggleTimepicker", () => {
afterEach(() => {
component.selectedTime = null;
});
- it('should not open timepicker if control is disabled', () => {
+ it("should not open timepicker if control is disabled", () => {
component.control.disable();
- component.toggleTimepicker(new Event('click'));
+ component.toggleTimepicker(new Event("click"));
expect(component.timeOpen).toBe(false);
});
- it('change selected time format to 24H', () => {
- component.selectedTime = '05:42 PM';
- const convertTime: string = '17:42';
+ it("change selected time format to 24H", () => {
+ component.selectedTime = "05:42 PM";
+ const convertTime: string = "17:42";
- component.toggleTimepicker(new Event('click'));
+ component.toggleTimepicker(new Event("click"));
expect(component.openTimeValue).toBe(convertTime);
});
});
+ it("component should not render go-form-errors if hideFieldError property is true ", () => {
+ component.hideFieldError = true;
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(0);
+ });
+ it("component should render go-form-errors if hideFieldError property is false ", () => {
+ component.hideFieldError = false;
+ fixture.detectChanges();
+ expect(
+ fixture.debugElement.queryAll(By.css("go-form-errors"))?.length
+ ).toBe(1);
+ });
});
diff --git a/projects/go-lib/styles/_variables.scss b/projects/go-lib/styles/_variables.scss
index 63f79b9d1..8bbe9f284 100644
--- a/projects/go-lib/styles/_variables.scss
+++ b/projects/go-lib/styles/_variables.scss
@@ -149,3 +149,6 @@ $form-border-neutral: transparentize($ui-color-neutral, .25);
$form-shadow-neutral: 0 0 0 3px transparentize($ui-color-neutral, .75);
$form-shadow-hover: 0 0 0 3px transparentize($base-light-tertiary, .5);
+
+//App launch
+$app-launch-color-secondary: #6c757d;
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.html
index 4f5c46ddd..456fe9ba3 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.html
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.html
@@ -5,25 +5,28 @@ Reactive Forms
-
+
- Reactive forms use an explicit and immutable approach to
- managing the state of a form at a given point in time.
- Each change to the form state returns a new state, which
- maintains the integrity of the model between changes.
- Reactive forms are built around observable streams, where
- form inputs and values are provided as streams of input
- values, which can be accessed synchronously.
+ Reactive forms use an explicit and immutable approach to managing the
+ state of a form at a given point in time. Each change to the form state
+ returns a new state, which maintains the integrity of the model between
+ changes. Reactive forms are built around observable streams, where form
+ inputs and values are provided as streams of input values, which can be
+ accessed synchronously.
- Reactive forms differ from template-driven forms in distinct
- ways. Reactive forms provide more predictability with
- synchronous access to the data model, immutability with
- observable operators, and change tracking through observable
- streams. If you prefer direct access to modify data in your
- template, template-driven forms are less explicit because they
- rely on directives embedded in the template, along with mutable
- data to track changes asynchronously.
+ Reactive forms differ from template-driven forms in distinct ways.
+ Reactive forms provide more predictability with synchronous access to
+ the data model, immutability with observable operators, and change
+ tracking through observable streams. If you prefer direct access to
+ modify data in your template, template-driven forms are less explicit
+ because they rely on directives embedded in the template, along with
+ mutable data to track changes asynchronously.
@@ -34,15 +37,22 @@ Required Inputs
-
+
- Form controls have the ability to pass in Validators. In the case of every form input in Goponents we pass a control
- thus you may specify on the control passed in to any form input a Validators.required validator on the control. Adding this validator
- to any control in Goponents will render a red asterisk next to the label automatically.
+ Form controls have the ability to pass in Validators. In the case of
+ every form input in Goponents we pass a control thus you may specify on
+ the control passed in to any form input a Validators.required validator
+ on the control. Adding this validator to any control in Goponents will
+ render a red asterisk next to the label automatically.
-
+
@@ -53,40 +63,62 @@ Validation Errors
-
+
- Form controls have the ability to hold a set of ValidationErrors. In the case of every form input in Goponents we automatically look for these
- ValidationErrors and render error text beneath the form element dynamically. This is how form error handling should be done within Goponents.
+ Form controls have the ability to hold a set of
+ ValidationErrors. In the case of
+ every form input in Goponents we automatically look for these
+ ValidationErrors and render
+ error text beneath the form element dynamically. These errors are
+ displayed by default, but they can be hidden by setting
+ hideFieldError input property to
+ true. This is how form error handling should be done within Goponents.
+
+ placeholder="Try typing something..."
+ >
- Angular provides some ValidationErrors out of the box, Goponents provides default error messages for:
- email, max, maxlength,
- min, minlength, required, and requiredtrue.
- These will automatically render error messages if the matching Angular Validators are set for the control. If desired, these can be overridden by
- passing a key/value validator with the same name of the Angular one and a custom string as the value.
+ Angular provides some
+ ValidationErrors out of the box,
+ Goponents provides default error messages for:
+ email,
+ max,
+ maxlength,
+ min,
+ minlength,
+ required, and
+ requiredtrue. These will
+ automatically render error messages if the matching Angular Validators
+ are set for the control. If desired, these can be overridden by passing
+ a key/value validator with the same name of the Angular one and a custom
+ string as the value.
-
- Form Elements Example
-
+ Form Elements Example
@@ -98,84 +130,95 @@
label="Form Theme"
[clearable]="false"
[control]="themeSelect"
- [items]="['light', 'dark']">
+ [items]="['light', 'dark']"
+ >
-