+
diff --git a/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.spec.ts b/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.spec.ts
index 47d94a00d..d58089721 100644
--- a/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.spec.ts
+++ b/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.spec.ts
@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { GoCheckboxComponent } from './go-checkbox.component';
+import { GoHintModule } from '../go-hint/go-hint.module';
describe('GoCheckboxComponent', () => {
let component: GoCheckboxComponent;
@@ -10,7 +11,11 @@ describe('GoCheckboxComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [GoCheckboxComponent],
- imports: [FormsModule, ReactiveFormsModule]
+ imports: [
+ FormsModule,
+ ReactiveFormsModule,
+ GoHintModule
+ ]
})
.compileComponents();
}));
diff --git a/projects/go-lib/src/lib/components/go-copy/go-copy.component.html b/projects/go-lib/src/lib/components/go-copy/go-copy.component.html
index 4ab1db152..18c07f732 100644
--- a/projects/go-lib/src/lib/components/go-copy/go-copy.component.html
+++ b/projects/go-lib/src/lib/components/go-copy/go-copy.component.html
@@ -1,4 +1,4 @@
-
+
{
- const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {month: style, timeZone: 'utc'});
+ const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {month: style});
const months: Array = [];
for (let i: number = 0; i < 12; i++) {
months.push(this.format(format, new Date(2017, i, 1)));
@@ -72,7 +72,7 @@ export class DateAdapter {
}
private getDateNames(): Array {
- const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {day: 'numeric', timeZone: 'utc'});
+ const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {day: 'numeric'});
const dates: Array = [];
for (let i: number = 0; i < 31; i++) {
@@ -83,7 +83,7 @@ export class DateAdapter {
}
private getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): Array {
- const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {weekday: style, timeZone: 'utc'});
+ const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {weekday: style});
const dayNames: Array = [];
for (let i: number = 0; i < 7; i++) {
diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts b/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts
new file mode 100644
index 000000000..8f5ec478d
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts
@@ -0,0 +1,41 @@
+import { Directive, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
+
+@Directive({
+ selector: '[goDragonDrop]'
+})
+export class DragonDropDirective {
+ active: boolean = false;
+ @Input() class: string = ''; // override the standard class attr with a new one.
+ @Input() activeClass: string = '';
+ @Output() dropped: EventEmitter = new EventEmitter();
+
+ @HostBinding('class')
+ get hostClasses(): string {
+ return [
+ this.class,
+ this.active ? this.activeClass : '',
+ ].join(' ');
+ }
+
+ // Dragover listener
+ @HostListener('dragover', ['$event']) onDragOver(evt: Event): void {
+ evt.preventDefault();
+ evt.stopPropagation();
+ this.active = true;
+ }
+
+ // Dragleave listener
+ @HostListener('dragleave', ['$event']) public onDragLeave(evt: Event): void {
+ evt.preventDefault();
+ evt.stopPropagation();
+ this.active = false;
+ }
+
+ // Drop listener
+ @HostListener('drop', ['$event']) public ondrop(evt: any): void {
+ evt.preventDefault();
+ evt.stopPropagation();
+ this.active = false;
+ this.dropped.emit(evt);
+ }
+}
diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html
new file mode 100644
index 000000000..8bacb9894
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html
@@ -0,0 +1,56 @@
+
+
+
+
+;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [GoFileUploadComponent],
+ imports: [
+ CommonModule,
+ FormsModule,
+ GoButtonModule,
+ GoHintModule,
+ GoIconModule,
+ GoIconButtonModule,
+ GoLoaderModule,
+ ReactiveFormsModule
+ ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(GoFileUploadComponent);
+ component = fixture.componentInstance;
+ component.control = new FormControl('');
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('removeFile', () => {
+ beforeEach(() => {
+ const file: FormGroup = new FormGroup({
+ file: new FormControl('whatever')
+ });
+ component.files = new FormArray([file]);
+ component.filePreview = ['whatever'];
+ });
+
+ it('should set state to selecting if it was previously selected', () => {
+ component.state = 'selected';
+ component.removeFile(0);
+ expect(component.state).toBe('selecting');
+ });
+
+ it('should not change the state if the state was selecting', () => {
+ component.state = 'selecting';
+ component.removeFile(0);
+ expect(component.state).toBe('selecting');
+ });
+
+ 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', () => {
+ component.removeFile(0);
+ expect(component.filePreview.length).toBe(0);
+ });
+ });
+
+ describe('ngOnInit()', () => {
+ beforeEach(() => {
+ component.id = undefined;
+ });
+
+ it('sets the id of the input to `key` if one is passed in', () => {
+ expect(component.id).toBeUndefined();
+
+ component.key = 'a-specific-id';
+ component.ngOnInit();
+
+ expect(component.id).toBe(component.key);
+ });
+
+ it('generates a semi-random id based on the label if key is undefined', () => {
+ expect(component.key).toBeUndefined();
+ expect(component.id).toBeUndefined();
+
+ component.label = 'test label';
+ component.ngOnInit();
+
+ expect(component.id).toBeDefined();
+ expect(component.id).toContain('test-label-');
+ });
+
+ it('generates a semi-random id if a label and key are undefined', () => {
+ expect(component.key).toBeUndefined();
+ expect(component.label).toBeUndefined();
+ expect(component.id).toBeUndefined();
+
+ component.ngOnInit();
+
+ expect(component.id).toBeDefined();
+ expect(component.id).toContain('file-upload-');
+ });
+ });
+});
diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts
new file mode 100644
index 000000000..222d67f0a
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts
@@ -0,0 +1,75 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+ selector: 'go-file-upload',
+ templateUrl: './go-file-upload.component.html',
+ styleUrls: ['./go-file-upload.component.scss']
+})
+export class GoFileUploadComponent implements OnInit {
+ form: FormGroup;
+ files: FormArray;
+ fb: FormBuilder;
+ filePreview: Array = [];
+ id: string;
+
+ @Input() control: FormControl;
+ @Input() hints: Array = [];
+ @Input() isLoading: boolean = false;
+ @Input() key: string;
+ @Input() label: string;
+ @Input() multiple: boolean = false;
+ @Input() state: 'selecting' | 'selected' = 'selecting';
+ @Input() theme: 'light' | 'dark' = 'light';
+
+ constructor() { }
+
+ ngOnInit(): void {
+ this.id = this.key || this.generateId(this.label);
+ this.fb = new FormBuilder();
+ this.form = this.fb.group({
+ filesArray: this.fb.array([])
+ });
+ this.files = this.form.controls['filesArray'];
+ this.files.valueChanges.subscribe( (fileChanges: any) => {
+ this.control.setValue(fileChanges);
+ });
+ }
+
+ onFilePicked(evt: any): void {
+ const files: File[] = evt.dataTransfer.files;
+ if (files.length > 0) {
+ Array.from(files).forEach((file: any) => {
+ this.files.push(this.patchValues(file));
+ this.filePreview.push(file.name);
+ });
+ if (!this.multiple) {
+ this.state = 'selected';
+ }
+ }
+ }
+
+ removeFile(index: number): void {
+ this.files.removeAt(index);
+ this.filePreview.splice(index, 1);
+ if (this.state === 'selected') {
+ this.state = 'selecting';
+ }
+ }
+
+ private patchValues(file: any): AbstractControl {
+ return this.fb.group({
+ file: [file]
+ });
+ }
+
+ private generateId(label: string): string {
+ const labelText: string = label || 'file-upload';
+ const idArray: Array = labelText.split(' ');
+
+ // NOTE: There is only a one in a million chance that this number is not unique.
+ idArray.push(String(Math.round(Math.random() * 1000000)));
+
+ return idArray.join('-');
+ }
+}
diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts
new file mode 100644
index 000000000..e38f3590d
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { GoHintModule } from '../go-hint/go-hint.module';
+import { GoFileUploadComponent } from './go-file-upload.component';
+import { GoButtonModule } from '../go-button/go-button.module';
+import { GoIconButtonModule } from '../go-icon-button/go-icon-button.module';
+import { DragonDropDirective } from './go-dragon-drop.directive';
+import { GoIconModule } from '../go-icon/go-icon.module';
+import { GoLoaderModule } from '../go-loader/go-loader.module';
+
+@NgModule({
+ declarations: [
+ DragonDropDirective,
+ GoFileUploadComponent
+ ],
+ imports: [
+ CommonModule,
+ FormsModule,
+ GoButtonModule,
+ GoHintModule,
+ GoIconModule,
+ GoIconButtonModule,
+ GoLoaderModule,
+ ReactiveFormsModule
+ ],
+ exports: [GoFileUploadComponent]
+})
+
+export class GoFileUploadModule { }
diff --git a/projects/go-lib/src/lib/components/go-footer/go-footer.component.html b/projects/go-lib/src/lib/components/go-footer/go-footer.component.html
new file mode 100644
index 000000000..f6cf67da9
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-footer/go-footer.component.html
@@ -0,0 +1,3 @@
+
diff --git a/projects/go-lib/src/lib/components/go-footer/go-footer.component.scss b/projects/go-lib/src/lib/components/go-footer/go-footer.component.scss
new file mode 100644
index 000000000..0e3b89a0a
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-footer/go-footer.component.scss
@@ -0,0 +1,4 @@
+.go-footer {
+ justify-content: center;
+ display: flex;
+}
diff --git a/projects/go-lib/src/lib/components/go-footer/go-footer.component.spec.ts b/projects/go-lib/src/lib/components/go-footer/go-footer.component.spec.ts
new file mode 100644
index 000000000..066895a2c
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-footer/go-footer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GoFooterComponent } from './go-footer.component';
+
+describe('GoFooterComponent', () => {
+ let component: GoFooterComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ GoFooterComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(GoFooterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/projects/go-lib/src/lib/components/go-footer/go-footer.component.ts b/projects/go-lib/src/lib/components/go-footer/go-footer.component.ts
new file mode 100644
index 000000000..2686c618e
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-footer/go-footer.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'go-footer',
+ styleUrls: ['./go-footer.component.scss'],
+ templateUrl: './go-footer.component.html'
+})
+export class GoFooterComponent {
+
+}
diff --git a/projects/go-lib/src/lib/components/go-footer/go-footer.module.ts b/projects/go-lib/src/lib/components/go-footer/go-footer.module.ts
new file mode 100644
index 000000000..0ce67f2fa
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-footer/go-footer.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { GoFooterComponent } from './go-footer.component';
+
+@NgModule({
+ declarations: [
+ GoFooterComponent
+ ],
+ imports: [
+ CommonModule
+ ],
+ exports: [
+ GoFooterComponent
+ ]
+})
+
+export class GoFooterModule { }
diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.html b/projects/go-lib/src/lib/components/go-header/go-header.component.html
index fe6a5e051..0e6a681a1 100644
--- a/projects/go-lib/src/lib/components/go-header/go-header.component.html
+++ b/projects/go-lib/src/lib/components/go-header/go-header.component.html
@@ -1,21 +1,22 @@
= fromEvent(window, 'resize');
- private resizeSubsciption: Subscription;
+ private resizeSubscription: Subscription;
- constructor(public sideNavService: GoSideNavService) {
+ constructor (
+ public sideNavService: GoSideNavService,
+ private configService: GoConfigService
+ ) {
this.setMobileNav();
this.setupResizeSubscription();
}
+ ngOnChanges(): void {
+ this.configService.config
+ .pipe(distinctUntilChanged())
+ .subscribe((value: GoConfigInterface) => {
+ if (value.headerBrandingEnabled) {
+ if (value.brandFontColor) {
+ this.brandColor = value.brandColor;
+ this.brandColorIsDark = value.brandFontColor === 'light';
+ } else {
+ this.handleBrandColorChange(value);
+ }
+ } else {
+ this.brandColor = '';
+ this.brandColorIsDark = false;
+ }
+ });
+ }
+
isNavCollapsed(): boolean {
return window.innerWidth <= this.minWidthBreakpoint ? true : !this.sideNavService.navOpen;
}
+ getLogoBackground(): string | null {
+ if (this.brandColor && !this.isNavCollapsed()) {
+ return this.brandColor;
+ } else {
+ return null;
+ }
+ }
+
toggleSideMenu(): void {
this.sideNavService.toggleNav();
}
@@ -37,7 +71,7 @@ export class GoHeaderComponent {
}
private setupResizeSubscription(): void {
- this.resizeSubsciption = this.resizeObservable
+ this.resizeSubscription = this.resizeObservable
.pipe(debounceTime(250))
.subscribe(event => {
this.setMobileNav();
@@ -49,4 +83,11 @@ export class GoHeaderComponent {
this.sideNavService.navOpen = false;
}
}
+
+ private handleBrandColorChange(value: GoConfigInterface): void {
+ const baseDarkHex: string = '#313536';
+ this.brandColor = value.brandColor;
+
+ this.brandColorIsDark = !this.configService.contrastIsAccessible(this.brandColor, baseDarkHex);
+ }
}
diff --git a/projects/go-lib/src/lib/components/go-header/go-header.module.ts b/projects/go-lib/src/lib/components/go-header/go-header.module.ts
index 0fb57a052..f18580700 100644
--- a/projects/go-lib/src/lib/components/go-header/go-header.module.ts
+++ b/projects/go-lib/src/lib/components/go-header/go-header.module.ts
@@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
-import { GoIconButtonModule} from '../go-icon-button/go-icon-button.module';
+import { GoIconModule} from '../go-icon/go-icon.module';
import { GoSideNavModule } from '../go-side-nav/go-side-nav.module';
import { GoSideNavService } from '../go-side-nav/go-side-nav/go-side-nav.service';
@@ -14,7 +14,7 @@ import { GoHeaderComponent } from './go-header.component';
],
imports: [
CommonModule,
- GoIconButtonModule,
+ GoIconModule,
GoSideNavModule
],
exports: [
diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss
index 6f5cc5a18..a184bcf5a 100644
--- a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss
+++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss
@@ -4,10 +4,10 @@
.go-icon-button {
@include transition(background-color);
- background: $theme-light-bg;
+ background: transparent;
border: 0;
border-radius: $global-radius--round;
- color: $base-dark;
+ color: inherit;
cursor: pointer;
display: inline-flex;
outline: none;
@@ -18,7 +18,7 @@
}
&:hover, &:focus {
- background: $theme-light-bg-hover;
+ background: $base-light-secondary;
}
&:active {
diff --git a/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss b/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss
index d3642e339..75d7d322d 100644
--- a/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss
+++ b/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss
@@ -7,10 +7,10 @@ $icon-sizes: (small: 1rem, medium: 1.5rem, large: 2rem);
// icons documentation and applied to our own bem style block class.
.go-icon {
// sass-lint:disable-block no-vendor-prefixes property-sort-order
+ display: inline-block;
font-family: 'Material Icons';
- font-weight: normal;
font-style: normal;
- display: inline-block;
+ font-weight: normal;
line-height: 1;
text-transform: none;
letter-spacing: normal;
@@ -31,24 +31,23 @@ $icon-sizes: (small: 1rem, medium: 1.5rem, large: 2rem);
font-feature-settings: 'liga';
}
-.go-icon--light {
- @include fill-text-background($color: $theme-light-border);
-}
+.go-icon--dark {
+ color: $theme-light-color;
-.go-icon--negative {
- @include fill-text-background($ui-color-negative-gradient, $ui-color-negative);
+ &.go-icon--disabled {
+ color: rgba($theme-light-color, .7);
+ }
}
+.go-icon--light,
+.go-icon--primary,
+.go-icon--negative,
.go-icon--neutral {
- @include fill-text-background($ui-color-neutral-gradient, $ui-color-neutral);
-}
+ color: $theme-dark-color;
-.go-icon--positive {
- @include fill-text-background($ui-color-positive-gradient, $ui-color-positive);
-}
-
-.go-icon--disabled {
- @include fill-text-background($color: $theme-light-border);
+ &.go-icon--disabled {
+ color: rgba($theme-dark-color, .7);
+ }
}
@each $name, $size in $icon-sizes {
@@ -58,11 +57,11 @@ $icon-sizes: (small: 1rem, medium: 1.5rem, large: 2rem);
}
.go-button__icon {
- font-size: 1.25rem;
+ font-size: 1rem;
line-height: 1rem;
margin-bottom: -.2rem;
- margin-left: -$column-gutter--half;
- margin-right: $column-gutter--quarter;
+ margin-left: -$column-gutter--quarter;
+ margin-right: $column-gutter--half;
margin-top: -.2rem;
padding: .2rem 0;
vertical-align: top;
diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.component.html b/projects/go-lib/src/lib/components/go-layout/go-layout.component.html
index b26490764..807e5245c 100644
--- a/projects/go-lib/src/lib/components/go-layout/go-layout.component.html
+++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.html
@@ -1,20 +1,27 @@
+ [formControl]="control"
+ [typeahead]="typeahead"
+ [placeholder]="placeholder">
;
@Input() theme: 'light' | 'dark' = 'light';
ngOnInit(): void {
diff --git a/projects/go-lib/src/lib/components/go-side-nav/_variables.scss b/projects/go-lib/src/lib/components/go-side-nav/_variables.scss
index 68df03c55..1cc332dfd 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/_variables.scss
+++ b/projects/go-lib/src/lib/components/go-side-nav/_variables.scss
@@ -1,6 +1,7 @@
@import "../../../styles/variables";
-$inner-side-nav-font-size: 0.875rem;
+$inner-side-nav-font-size: .875rem;
$inner-side-nav-padding: $column-gutter--half $column-gutter--three-quarters $column-gutter--half 3.2rem;
$outer-side-nav-padding: 1rem 1rem 1rem 0;
-$side-nav-letter-spacing: .02rem;
+$side-nav-base-color: rgba($theme-dark-color, .7);
+$side-nav-root-item-height: 3.2rem;
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html
index dd24126c7..b3b83a666 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html
+++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html
@@ -3,10 +3,14 @@
*ngIf="group.subRoutes && group.subRoutes.length > 0; else noSubRoutes">
-
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.scss b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.scss
index e2076c564..cbe509d19 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.scss
+++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.scss
@@ -2,43 +2,68 @@
@import '../variables';
.go-nav-group__dropdown {
+ @include transition(background, color);
+
align-items: center;
+ color: $side-nav-base-color;
+ cursor: pointer;
display: flex;
+ font-weight: $weight-light;
padding-right: .5rem;
user-select: none;
- @include transition(all);
&:hover {
background: $theme-dark-bg-hover;
+ color: $theme-dark-color;
+
+ .go-nav-group__expand-icon {
+ color: $theme-dark-color;
+ }
+ }
+}
+
+.go-nav-group__dropdown--expanded {
+ background: $theme-dark-bg-active;
+ color: $theme-dark-color;
+ font-weight: $weight-regular;
+
+ .go-nav-group__expand-icon {
+ color: $theme-dark-color;
}
}
.go-nav-group__link {
display: flex;
flex-grow: 1;
+ position: relative;
}
.go-nav-group__title {
align-items: center;
display: flex;
- font-weight: $weight-light;
- letter-spacing: $side-nav-letter-spacing;
padding: $outer-side-nav-padding;
}
.go-nav-group__icon {
+ align-self: flex-start;
font-size: 1.2rem;
+ height: $side-nav-root-item-height;
padding: 1rem;
}
+.go-nav-group__icon--external {
+ padding-left: .5rem;
+ padding-right: .75rem;
+}
+
.go-nav-group__expand-icon {
border-radius: 50%;
- color: $theme-dark-color;
+ color: $side-nav-base-color;
cursor: pointer;
font-size: 1.5rem;
- height: 2.5rem;
- padding: 0.5rem;
- width: 2.5rem;
+ height: 2rem;
+ padding: .25rem;
+ width: 2rem;
&:hover {
background: $theme-dark-bg;
@@ -58,4 +83,17 @@
.go-nav-group--expanded {
background: $theme-dark-bg-active;
+ color: $theme-dark-color;
}
+
+.go-nav-item--selected {
+ @include transition(all);
+
+ border-radius: 0 $global-radius $global-radius 0;
+ content: ' ';
+ height: 1.5rem;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 4px;
+}
\ No newline at end of file
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.ts b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.ts
index 4ff759941..222e2b608 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.ts
+++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.ts
@@ -1,26 +1,47 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnInit,
+ Output,
+ ViewEncapsulation
+} from '@angular/core';
import { NavGroup } from '../nav-group.model';
import { NavItem } from '../nav-item.model';
import { GoSideNavService } from '../go-side-nav/go-side-nav.service';
+import { GoConfigService } from '../../../go-config.service';
+import { distinctUntilKeyChanged } from 'rxjs/operators';
+import { GoConfigInterface } from '../../../go-config.model';
@Component({
selector: 'go-nav-group',
templateUrl: './go-nav-group.component.html',
styleUrls: ['./go-nav-group.component.scss'],
+ // tslint:disable-next-line: use-component-view-encapsulation
encapsulation: ViewEncapsulation.None
})
-export class GoNavGroupComponent implements OnInit {
+export class GoNavGroupComponent implements OnInit {
@Input() navItem: NavGroup | NavItem;
@Input() class: string;
- @Output() closeNavs = new EventEmitter();
+ @Input() level: number;
+ @Output() closeNavs: EventEmitter = new EventEmitter();
+ brandColor: string;
group: NavGroup;
- constructor (public navService: GoSideNavService) { }
+ constructor (
+ public navService: GoSideNavService,
+ private configService: GoConfigService
+ ) { }
ngOnInit(): void {
// Using this to do type checking between NavGroup and NavItem in the html
this.group = this.navItem as NavGroup;
+ this.configService.config
+ .pipe(distinctUntilKeyChanged('brandColor'))
+ .subscribe((value: GoConfigInterface) => {
+ this.brandColor = value.brandColor;
+ });
}
expand(navGroup: NavGroup): void {
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html
index 542f6f567..db3f6fe51 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html
+++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html
@@ -1,9 +1,13 @@
-
{{navItem.routeTitle}}
-
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss
index f76fa401a..f1daefdb9 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss
+++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss
@@ -3,64 +3,83 @@
@import '../variables';
.go-nav-item {
+ @include transition(all);
+
align-items: center;
display: flex;
- @include transition(all);
+ min-height: 2rem;
+ position: relative;
&:hover {
- background: $theme-dark-bg-hover;
+ .go-nav-item__link {
+ background: $theme-dark-bg-hover;
+ color: $theme-dark-color;
+ }
}
}
-.go-nav-item__link::before {
- background: $base-primary;
- border-radius: 0 $global-radius $global-radius 0;
- content: " ";
- height: 1.5rem;
- left: 0;
- opacity: 0;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- width: 4px;
- @include transition(all);
+.go-nav-item--collapsed {
+ min-height: 0;
}
.go-nav-item__link--active {
.go-nav-item__title {
font-weight: $weight-regular;
+ color: $theme-dark-color;
}
-}
-.go-nav-item__link--active::before {
- opacity: 1;
+ .go-nav-group__icon {
+ color: $theme-dark-color;
+ }
+
+ .go-nav-item--selected {
+ @include transition(all);
+
+ border-radius: 0 $global-radius $global-radius 0;
+ content: ' ';
+ height: 1.5rem;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 4px;
+ }
}
.go-nav-item__link,
.go-nav-item__link:visited,
.go-nav-item__link:focus,
.go-nav-item__link:active {
- color: $theme-dark-color;
+ color: $side-nav-base-color;
}
.go-nav-item__link {
+ @include transition(all);
+
align-items: center;
- border: none;
+ border: 0;
display: flex;
flex-grow: 1;
+ max-width: 100%;
position: relative;
text-decoration: none;
}
.go-nav-item__title {
+ flex-grow: 1;
font-size: $inner-side-nav-font-size;
font-weight: $weight-light;
- letter-spacing: $side-nav-letter-spacing;
+ max-height: $side-nav-root-item-height;
padding: $inner-side-nav-padding;
- flex-grow: 1;
+}
+
+.go-nav-item__title--level-2 {
+ padding-left: calc(#{$side-nav-root-item-height} + .5rem);
}
.go-nav-item__title--with-icon {
+ align-items: center;
+ display: inline-flex;
font-size: 1rem;
- padding: $outer-side-nav-padding;
+ height: $side-nav-root-item-height;
+ padding: 0 1rem 0 0;
}
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts
index 3102c194f..d5bcc7d56 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts
+++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts
@@ -1,14 +1,31 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
import { NavItem } from '../nav-item.model';
import { GoSideNavService } from '../go-side-nav/go-side-nav.service';
+import { GoConfigService } from '../../../go-config.service';
+import { GoConfigInterface } from '../../../go-config.model';
+import { distinctUntilKeyChanged } from 'rxjs/operators';
@Component({
selector: 'go-nav-item',
templateUrl: './go-nav-item.component.html',
styleUrls: ['./go-nav-item.component.scss']
})
-export class GoNavItemComponent {
+export class GoNavItemComponent implements OnInit {
+ brandColor: string;
+
@Input() navItem: NavItem;
+ @Input() level: number;
+
+ constructor (
+ public navService: GoSideNavService,
+ private configService: GoConfigService
+ ) { }
- constructor (public navService: GoSideNavService) { }
+ ngOnInit(): void {
+ this.configService.config
+ .pipe(distinctUntilKeyChanged('brandColor'))
+ .subscribe((value: GoConfigInterface) => {
+ this.brandColor = value.brandColor;
+ });
+ }
}
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts
index 3c4ca99d6..6f8520b7f 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts
+++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts
@@ -7,6 +7,7 @@ import { GoIconModule } from '../go-icon/go-icon.module';
import { GoSideNavComponent } from './go-side-nav/go-side-nav.component';
import { GoNavGroupComponent } from './go-nav-group/go-nav-group.component';
import { GoNavItemComponent } from './go-nav-item/go-nav-item.component';
+import { GoConfigService } from '../../go-config.service';
@NgModule({
declarations: [
@@ -23,6 +24,9 @@ import { GoNavItemComponent } from './go-nav-item/go-nav-item.component';
GoSideNavComponent,
GoNavGroupComponent,
GoNavItemComponent
+ ],
+ providers: [
+ GoConfigService
]
})
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.html b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.html
index 3ab0ca377..39248234f 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.html
+++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.html
@@ -2,6 +2,7 @@
[ngClass]="{ 'go-side-nav--show-mobile' : navService.navOpen, 'go-side-nav--collapsed' : !navService.navOpen }">
+ (closeNavs)="closeNavs($event)"
+ [level]="0">
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 00f81562a..7ef291ec4 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
@@ -8,6 +8,7 @@
display: flex;
flex-direction: column;
flex-grow: 1;
+ font-family: $secondary-font-stack;
height: 100%;
overflow-y: auto;
padding: 2rem 0;
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts
index 856909e68..9a5887461 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts
+++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
+import { Component, Input, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs/operators';
import { NavGroup } from '../nav-group.model';
import { NavItem } from '../nav-item.model';
@@ -13,22 +13,26 @@ import { GoSideNavService } from './go-side-nav.service';
export class GoSideNavComponent implements OnInit {
@Input() menuItems: Array;
- constructor (private router: Router, public navService: GoSideNavService) { }
+ constructor (
+ private router: Router,
+ public navService: GoSideNavService
+ ) { }
ngOnInit(): void {
+ this.navService.setMenuItems(this.menuItems);
this.router.events
.pipe(
- filter(event => event instanceof NavigationEnd)
+ filter((event: any) => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
- this.menuItems.forEach(item => {
+ this.menuItems.forEach((item: (NavGroup | NavItem)) => {
(item as NavGroup).expanded = this.setExpanded(item, event.url);
});
});
}
closeNavs(navGroup: NavGroup): void {
- this.menuItems.forEach(group => {
- const g = group as NavGroup;
+ this.menuItems.forEach((group: (NavGroup | NavItem)) => {
+ const g: NavGroup = group as NavGroup;
g.expanded = this.openAccordion(g, navGroup);
});
}
@@ -44,7 +48,7 @@ export class GoSideNavComponent implements OnInit {
}
private navGroupExpansion(group: NavGroup, url: string): boolean {
- group.expanded = group.subRoutes.some(subRoute => {
+ group.expanded = group.subRoutes.some((subRoute: (NavGroup | NavItem)) => {
return this.setExpanded(subRoute, url);
});
return group.expanded;
@@ -58,11 +62,10 @@ export class GoSideNavComponent implements OnInit {
* @param group this is the group we are trying to decide if it should be open.
* @param item this is the group that we are searching for that was clicked on and needs opened.
*/
-
private openAccordion(group: NavGroup, item: NavGroup): boolean {
if (group.subRoutes) {
if (group.routeTitle !== item.routeTitle) {
- group.expanded = group.subRoutes.some(subRoute => {
+ group.expanded = group.subRoutes.some((subRoute: (NavGroup | NavItem)) => {
return this.openAccordion((subRoute as NavGroup), item);
});
} else {
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts
index d2f2dda34..87a9da7f5 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts
+++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts
@@ -1,16 +1,66 @@
import { Injectable } from '@angular/core';
-import { Observable, of as observableOf, BehaviorSubject } from 'rxjs';
+import { NavGroup } from '../nav-group.model';
+import { NavItem } from '../nav-item.model';
+import { NavigationEnd, Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class GoSideNavService {
- public navOpen = true;
+ public navOpen: boolean = true;
+ public menuItems: (NavGroup | NavItem)[];
+ private _menuItems: Map = new Map();
+ private currentItem: NavItem | NavGroup;
- constructor() { }
+ constructor(private router: Router) {
+ this.router.events.subscribe((event: any) => {
+ if (event instanceof NavigationEnd) {
+ const obj: NavGroup | NavItem = this._menuItems.get(event.urlAfterRedirects);
+ if (obj) {
+ if (this.currentItem) {
+ this.currentItem.routeActive = false;
+ }
- toggleNav() {
+ obj.routeActive = true;
+ this.currentItem = obj;
+ }
+ }
+ });
+ }
+
+ setMenuItems(val: (NavGroup | NavItem)[]): void {
+ this.menuItems = val;
+ this.createNavMap();
+ }
+
+ toggleNav(): void {
this.navOpen = !this.navOpen;
}
+
+ private isNavGroup(item: NavGroup | NavItem): item is NavGroup {
+ return (item as NavGroup).subRoutes !== undefined;
+ }
+
+ private extractNested(group: NavGroup, base: NavGroup): void {
+ for (const route of group.subRoutes) {
+ if (this.isNavGroup(route)) {
+ this.extractNested(route, base);
+ } else {
+ this._menuItems.set('/' + route.route, base);
+ }
+ }
+ }
+
+ private createNavMap(): void {
+ let baseItem: NavGroup | NavItem;
+ for (let i: number = 0; i < this.menuItems.length; i++) {
+ baseItem = this.menuItems[i];
+ if (!this.isNavGroup(baseItem)) {
+ this._menuItems.set('/' + baseItem.route, baseItem);
+ } else {
+ this.extractNested(baseItem, baseItem);
+ }
+ }
+ }
}
diff --git a/projects/go-lib/src/lib/components/go-side-nav/nav-group.model.ts b/projects/go-lib/src/lib/components/go-side-nav/nav-group.model.ts
index dd13bde46..4014d2c2b 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/nav-group.model.ts
+++ b/projects/go-lib/src/lib/components/go-side-nav/nav-group.model.ts
@@ -3,6 +3,7 @@ import { NavItem } from './nav-item.model';
export interface NavGroup {
description?: string;
expanded?: boolean;
+ routeActive?: boolean;
routeIcon?: string;
routeTitle: string;
subRoutes: Array;
diff --git a/projects/go-lib/src/lib/components/go-side-nav/nav-item.model.ts b/projects/go-lib/src/lib/components/go-side-nav/nav-item.model.ts
index eeaa0b8cf..a3fdb7a46 100644
--- a/projects/go-lib/src/lib/components/go-side-nav/nav-item.model.ts
+++ b/projects/go-lib/src/lib/components/go-side-nav/nav-item.model.ts
@@ -3,6 +3,7 @@ export interface NavItem {
route: string;
routeIcon?: string;
routeTitle: string;
+ routeActive?: boolean;
/**
* When `isExternalLink` is true, the value passed to `route` will be used for redirection. By default, all external links will open in a
diff --git a/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.html b/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.html
index 79e4cadcb..2ac033100 100644
--- a/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.html
+++ b/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.html
@@ -1,32 +1,36 @@
-;
@ContentChild('goTableHead') goTableHead: TemplateRef;
diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.html b/projects/go-lib/src/lib/components/go-table/go-table.component.html
index c8c0e3c49..f78471d12 100644
--- a/projects/go-lib/src/lib/components/go-table/go-table.component.html
+++ b/projects/go-lib/src/lib/components/go-table/go-table.component.html
@@ -10,7 +10,7 @@ {{ tableTitle
*ngIf="hasData(); else noDataTable">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ file }}
+
+
diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss
new file mode 100644
index 000000000..f8f034dac
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss
@@ -0,0 +1,87 @@
+@import '../../../styles/variables';
+
+@mixin upload-active {
+ cursor: pointer;
+ background-color: $theme-light-bg-hover;
+ opacity: 0.8;
+}
+
+.go-file-upload__input {
+ visibility: hidden;
+}
+
+.go-file-upload {
+ height: 10rem;
+ border: 1px dashed $theme-light-border;
+ border-radius: $global-radius;
+}
+
+.go-file-upload--disabled {
+ color: lighten($theme-light-color, 40);
+ cursor: not-allowed;
+ pointer-events: none;
+ border-style: solid;
+}
+
+.go-file-upload--dark {
+ border: 1px dashed $theme-dark-border;
+ background-color: $theme-dark-bg;
+ border-radius: $global-radius;
+ color: $theme-dark-color;
+
+ .go-file-upload:hover {
+ background-color: $theme-dark-bg-hover;
+ color: $theme-dark-color-hover
+ }
+
+ .go-file-upload--active {
+ color: $theme-dark-color-hover;
+ background-color: $theme-dark-bg-hover;
+ }
+}
+
+.go-file-upload:hover {
+ @include upload-active;
+}
+
+.go-file-upload--active {
+ @include upload-active;
+ border-style: solid;
+}
+
+.go-file-upload__container {
+ justify-content: center;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+}
+
+.go-file-upload__file-list {
+ display: flex;
+ justify-content: space-between;
+}
+
+.go-file-upload__file-name {
+ margin-top: .5rem;
+ padding-right: .5rem;
+}
+
+.go-file-upload__container--loading-text {
+ padding-top: .5rem;
+}
+
+.go-file-upload__container--loading {
+ padding-top: 1rem;
+}
+
+.file-name__label {
+ padding-bottom: .25rem;
+}
+
+.go-file-upload__file-name--dark {
+ color: $theme-dark-color;
+}
+
+.go-file-upload__selected-checkmark {
+ color: $ui-color-positive;
+}
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
new file mode 100644
index 000000000..bf8a26d57
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts
@@ -0,0 +1,113 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GoFileUploadComponent } from './go-file-upload.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule, FormArray, FormGroup, FormControl } 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 { createHostListener } from '@angular/compiler/src/core';
+
+describe('GoFileUploadComponent', () => {
+ let component: GoFileUploadComponent;
+ let fixture: ComponentFixture
-
-
+ [ngClass]="{ 'go-header__left--dark': brandColorIsDark }">
+
+ [ngClass]="{ 'go-header__logo-container--collapsed': isNavCollapsed() }"
+ [ngStyle]="{ 'background': getLogoBackground() }">
![{{ altText }}]()
-
+
+
-
+
+
+ {{ header }} +
+
+ [attr.title]="group.description"
+ [ngClass]="{ 'go-nav-group__dropdown--expanded': group.expanded }">
+
@@ -23,14 +27,15 @@
+ [navItem]="item"
+ [level]="level + 1">
-
+ [attr.title]="navItem.description"
+ [ngClass]="{ 'go-nav-item--collapsed': !navService.navOpen }">
+
+ class="go-nav-group__icon go-nav-group__icon--external">
-
-
-
+
diff --git a/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.scss b/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.scss
index 49064aa79..6e31917d4 100644
--- a/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.scss
+++ b/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.scss
@@ -61,14 +61,14 @@
transform: translateX(1.125rem);
}
-.go-form__switch-toggle__wrapper {
- position: relative;
-}
-
.go-form__switch-toggle__label {
line-height: 1.125rem;
padding-bottom: 0;
padding-left: 0.75rem;
- position: absolute;
user-select: none;
}
+
+.go-form__switch-toggle__label--before {
+ padding-left: 0;
+ padding-right: 0.75rem;
+}
diff --git a/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.ts b/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.ts
index 3c9223f55..009f74f17 100644
--- a/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.ts
+++ b/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.ts
@@ -13,6 +13,7 @@ export class GoSwitchToggleComponent implements OnInit {
@Input() key: string;
@Input() hints: string[];
@Input() label: string;
+ @Input() labelPosition: 'before' | 'after' = 'after';
@Input() theme: 'light' | 'dark' = 'light';
constructor() { }
diff --git a/projects/go-lib/src/lib/components/go-table/go-table-column.component.ts b/projects/go-lib/src/lib/components/go-table/go-table-column.component.ts
index 3faad70ad..07e5815a4 100644
--- a/projects/go-lib/src/lib/components/go-table/go-table-column.component.ts
+++ b/projects/go-lib/src/lib/components/go-table/go-table-column.component.ts
@@ -9,6 +9,7 @@ export class GoTableColumnComponent {
@Input() field: string;
@Input() title: string;
@Input() width: number;
+ @Input() sortable?: boolean;
@ContentChild('goTableCell') goTableCell: TemplateRef
-
-
-
+
+
+
+
+
+
+
+
+
-
-{{ tableTitle
*ngIf="hasData(); else noDataTable">
-
@@ -18,7 +18,8 @@ {{ tableTitle
+ (click)="toggleSort(col.sortable, col.field)"
+ [ngClass]="{ 'go-table__head--sortable': col.sortable !== undefined ? col.sortable : localTableConfig.sortable }">
{{ col.title || col.field }}
@@ -58,7 +59,7 @@ {{ tableTitle
\ No newline at end of file
+
diff --git a/projects/go-tester/src/app/components/test-page-1/test-page-1.component.ts b/projects/go-tester/src/app/components/test-page-1/test-page-1.component.ts
index 6c700dc16..31fe6aaa1 100644
--- a/projects/go-tester/src/app/components/test-page-1/test-page-1.component.ts
+++ b/projects/go-tester/src/app/components/test-page-1/test-page-1.component.ts
@@ -33,7 +33,8 @@ export class TestPage1Component implements OnInit {
selectable: true,
selectBy: 'id',
tableData: data.results,
- totalCount: data.totalCount
+ totalCount: data.totalCount,
+ sortable: false
});
this.tableLoading = false;
});
diff --git a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html
index 084d96693..76e3bce22 100644
--- a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html
+++ b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html
@@ -83,11 +83,46 @@ Buttons
+
+ Button Group
+
+
+
Toasts
+
+
+
+
+
+ Branding
+
+
+
+
+
+
+
+ Update Branding Color
+
+
diff --git a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts
index 8fb533002..be9f632ae 100644
--- a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts
+++ b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts
@@ -1,9 +1,11 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import {
GoButtonComponent,
+ GoConfigService,
GoLoaderComponent,
- GoToasterService
+ GoToasterService,
} from '../../../../../go-lib/src/public_api';
+import { FormControl } from '@angular/forms';
@Component({
selector: 'app-test-page-2',
@@ -13,14 +15,20 @@ export class TestPage2Component implements OnInit {
@ViewChild('loader') loader: GoLoaderComponent;
+ brandingControl: FormControl;
title: string = 'Test 2';
shopping: boolean = false;
loaderType: string = 'neutral';
loading: boolean = true;
- constructor(private goToasterService: GoToasterService) { }
+ constructor(
+ private goToasterService: GoToasterService,
+ private goConfigService: GoConfigService
+ ) { }
ngOnInit(): void {
+ this.brandingControl = new FormControl(this.goConfigService.config.getValue().brandColor);
+
setTimeout(() => {
this.goToasterService.toastInfo({ message: 'Check this out'});
this.goToasterService.toastSuccess({message: 'Check this out' });
@@ -49,4 +57,8 @@ export class TestPage2Component implements OnInit {
openToast(): void {
this.goToasterService.toastInfo({ message: 'From the action sheet'});
}
+
+ updateColor(): void {
+ this.goConfigService.setBrandColor(this.brandingControl.value);
+ }
}
diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html
index 2fe385d79..2e2ac085d 100644
--- a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html
+++ b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html
@@ -45,6 +45,16 @@
>
+
+
bindValue="value"
bindLabel="name"
[hints]="['Select an option here, whatever you want']"
+ [loading]="loadingSelectOptions"
+ placeholder="Select Box Placeholder"
label="Select Box Here">
@@ -147,11 +159,20 @@
{
+ this.loadingSelectOptions = false;
+ }, 3000);
+ }
+
onSubmit(): void {
this.loading = true;
diff --git a/projects/go-tester/src/styles.scss b/projects/go-tester/src/styles.scss
index 928959a5d..a6c18bd67 100644
--- a/projects/go-tester/src/styles.scss
+++ b/projects/go-tester/src/styles.scss
@@ -1,5 +1,6 @@
/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
+@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* http://meyerweb.com/eric/tools/css/reset/
{{ tableTitle
{{ tableTitle
Buttons
+
+
+
Button Group
+ +Toasts
+
diff --git a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts
index 8fb533002..be9f632ae 100644
--- a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts
+++ b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts
@@ -1,9 +1,11 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import {
GoButtonComponent,
+ GoConfigService,
GoLoaderComponent,
- GoToasterService
+ GoToasterService,
} from '../../../../../go-lib/src/public_api';
+import { FormControl } from '@angular/forms';
@Component({
selector: 'app-test-page-2',
@@ -13,14 +15,20 @@ export class TestPage2Component implements OnInit {
@ViewChild('loader') loader: GoLoaderComponent;
+ brandingControl: FormControl;
title: string = 'Test 2';
shopping: boolean = false;
loaderType: string = 'neutral';
loading: boolean = true;
- constructor(private goToasterService: GoToasterService) { }
+ constructor(
+ private goToasterService: GoToasterService,
+ private goConfigService: GoConfigService
+ ) { }
ngOnInit(): void {
+ this.brandingControl = new FormControl(this.goConfigService.config.getValue().brandColor);
+
setTimeout(() => {
this.goToasterService.toastInfo({ message: 'Check this out'});
this.goToasterService.toastSuccess({message: 'Check this out' });
@@ -49,4 +57,8 @@ export class TestPage2Component implements OnInit {
openToast(): void {
this.goToasterService.toastInfo({ message: 'From the action sheet'});
}
+
+ updateColor(): void {
+ this.goConfigService.setBrandColor(this.brandingControl.value);
+ }
}
diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html
index 2fe385d79..2e2ac085d 100644
--- a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html
+++ b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html
@@ -45,6 +45,16 @@ Branding
+
+
+
+
+
+
+
+ Update Branding Color
+
+
>
+
+
bindValue="value"
bindLabel="name"
[hints]="['Select an option here, whatever you want']"
+ [loading]="loadingSelectOptions"
+ placeholder="Select Box Placeholder"
label="Select Box Here">
@@ -147,11 +159,20 @@
{
+ this.loadingSelectOptions = false;
+ }, 3000);
+ }
+
onSubmit(): void {
this.loading = true;
diff --git a/projects/go-tester/src/styles.scss b/projects/go-tester/src/styles.scss
index 928959a5d..a6c18bd67 100644
--- a/projects/go-tester/src/styles.scss
+++ b/projects/go-tester/src/styles.scss
@@ -1,5 +1,6 @@
/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
+@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* http://meyerweb.com/eric/tools/css/reset/
+
+