From f219dcf0f21735dd72538b0b8fc68cf56f7c98b5 Mon Sep 17 00:00:00 2001 From: Rincy Mathew Date: Sun, 27 Sep 2020 15:15:44 -0500 Subject: [PATCH 01/54] Added unit tests for dropdown and header component --- .../wvr-dropdown.component.spec.ts | 225 ++++++++++++++++++ .../wvr-dropdown/wvr-dropdown.component.ts | 2 +- .../wvr-header/wvr-header.component.spec.ts | 9 + 3 files changed, 235 insertions(+), 1 deletion(-) diff --git a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.spec.ts b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.spec.ts index 4d4b12c0b..94264c42e 100644 --- a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.spec.ts +++ b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.spec.ts @@ -173,4 +173,229 @@ describe('WvrDropdownComponent', () => { }, 251); }); + it('should have customization for button background', () => { + expect(component.btnBackground) + .toEqual('var(--wvr-btn-plain-background-default)'); + component.btnBackground = 'var(--wvr-dropdown-menu-background)'; + fixture.detectChanges(); + expect(component.btnBackground) + .toEqual('var(--wvr-dropdown-menu-background)'); + }); + + it('should have customization for active button color', () => { + expect(component.btnBackgroundActive) + .toEqual('var(--wvr-btn-plain-active-background-default)'); + component.btnBackgroundActive = 'var(--wvr-btn-warning-active-background-default)'; + fixture.detectChanges(); + expect(component.btnBackgroundActive) + .toEqual('var(--wvr-btn-warning-active-background-default)'); + + }); + + it('should have customization for hover button color', () => { + expect(component.btnBackgroundHover) + .toEqual('var(--wvr-btn-plain-hover-background-default)'); + component.btnBackgroundHover = 'var(--wvr-btn-warning-hover-background-default)'; + fixture.detectChanges(); + expect(component.btnBackgroundHover) + .toEqual('var(--wvr-btn-warning-hover-background-default)'); + + }); + + it('should have customization for button border value', () => { + expect(component.btnBorderColor) + .toEqual('var(--wvr-btn-plain-border-default)'); + component.btnBorderColor = 'var(--wvr-btn-primary-border-default)'; + fixture.detectChanges(); + expect(component.btnBorderColor) + .toEqual('var(--wvr-btn-primary-border-default)'); + + }); + + it('should have customization for button border value in active state', () => { + expect(component.btnBorderActive) + .toEqual('var(--wvr-btn-plain-active-border-default)'); + component.btnBorderActive = 'var(--wvr-btn-primary-active-border-default)'; + fixture.detectChanges(); + expect(component.btnBorderActive) + .toEqual('var(--wvr-btn-primary-active-border-default)'); + + }); + + it('should have customization for button border value in focus state', () => { + expect(component.btnBorderFocus) + .toEqual('var(--wvr-btn-plain-focus-border-default)'); + component.btnBorderFocus = 'var(--wvr-btn-primary-focus-border-default)'; + fixture.detectChanges(); + expect(component.btnBorderFocus) + .toEqual('var(--wvr-btn-primary-focus-border-default)'); + + }); + + it('should have customization for button border value in hover state', () => { + expect(component.btnBorderHover) + .toEqual('var(--wvr-btn-plain-hover-border-default)'); + component.btnBorderHover = 'var(--wvr-btn-primary-hover-border-default)'; + fixture.detectChanges(); + expect(component.btnBorderHover) + .toEqual('var(--wvr-btn-primary-hover-border-default)'); + + }); + + it('should have customization for button color in default state', () => { + expect(component.btnColor) + .toEqual('var(--wvr-btn-plain-color-default)'); + component.btnColor = 'var(--wvr-btn-primary-color-default)'; + fixture.detectChanges(); + expect(component.btnColor) + .toEqual('var(--wvr-btn-primary-color-default)'); + + }); + + it('should have customization for button color in active state', () => { + expect(component.btnColorActive) + .toEqual('var(--wvr-btn-plain-active-color-default)'); + component.btnColorActive = 'var(--wvr-btn-primary-active-color-default)'; + fixture.detectChanges(); + expect(component.btnColorActive) + .toEqual('var(--wvr-btn-primary-active-color-default)'); + + }); + + it('should have customization for button color in hover state', () => { + expect(component.btnColorHover) + .toEqual('var(--wvr-btn-plain-hover-color-default)'); + component.btnColorHover = 'var(--wvr-btn-primary-hover-color-default)'; + fixture.detectChanges(); + expect(component.btnColorHover) + .toEqual('var(--wvr-btn-primary-hover-color-default)'); + + }); + + it('should have customization for button border radius', () => { + expect(component.btnBorderRadius) + .toEqual('var(--wvr-btn-border-radius)'); + component.btnBorderRadius = '12px'; + fixture.detectChanges(); + expect(component.btnBorderRadius) + .toEqual('12px'); + }); + + it('should have customization for button border radius', () => { + expect(component.btnBoxShadowFocus) + .toEqual('var(--wvr-btn-plain-focus-box-shadow-default)'); + component.btnBoxShadowFocus = 'var(--wvr-btn-primary-focus-box-shadow-default)'; + fixture.detectChanges(); + expect(component.btnBoxShadowFocus) + .toEqual('var(--wvr-btn-primary-focus-box-shadow-default)'); + }); + + it('should have customization for button cursor', () => { + expect(component.btnCursor) + .toEqual('var(--wvr-btn-cursor-default)'); + component.btnCursor = 'pointer'; + fixture.detectChanges(); + expect(component.btnCursor) + .toEqual('pointer'); + }); + + it('should have customization for button font family', () => { + expect(component.btnFontFamily) + .toEqual('var(--wvr-btn-font-family-sans-serif-default)'); + component.btnFontFamily = 'var(--wvr-font-family-sans-serif)'; + fixture.detectChanges(); + expect(component.btnFontFamily) + .toEqual('var(--wvr-font-family-sans-serif)'); + }); + + it('should have customization for button font size', () => { + expect(component.btnFontSize) + .toEqual('var(--wvr-btn-font-size-default)'); + component.btnFontSize = 'var(--wvr-btn-font-size)'; + fixture.detectChanges(); + expect(component.btnFontSize) + .toEqual('var(--wvr-btn-font-size)'); + }); + + it('should have customization for button font weight', () => { + expect(component.btnFontWeight) + .toEqual('var(--wvr-btn-font-weight-default)'); + component.btnFontWeight = 'var(--wvr-btn-font-weight)'; + fixture.detectChanges(); + expect(component.btnFontWeight) + .toEqual('var(--wvr-btn-font-weight)'); + }); + + it('should have customization for button line height', () => { + expect(component.btnLineHeight) + .toEqual('var(--wvr-btn-line-height-default)'); + component.btnLineHeight = 'var(--wvr-btn-line-height)'; + fixture.detectChanges(); + expect(component.btnLineHeight) + .toEqual('var(--wvr-btn-line-height)'); + }); + + it('should have customization for button padding rule', () => { + expect(component.btnPadding) + .toEqual('var(--wvr-btn-padding-default)'); + component.btnPadding = 'var(--wvr-btn-padding)'; + fixture.detectChanges(); + expect(component.btnPadding) + .toEqual('var(--wvr-btn-padding)'); + }); + + it('should have customization for button text align rule', () => { + expect(component.btnTextAlign) + .toEqual('var(--wvr-btn-text-align-default)'); + component.btnTextAlign = 'var(--wvr-btn-text-align)'; + fixture.detectChanges(); + expect(component.btnTextAlign) + .toEqual('var(--wvr-btn-text-align)'); + }); + + it('should have customization for button vertical align', () => { + expect(component.btnVerticalAlign) + .toEqual('var(--wvr-btn-vertical-align-default)'); + component.btnVerticalAlign = 'var(--wvr-btn-vertical-align)'; + fixture.detectChanges(); + expect(component.btnVerticalAlign) + .toEqual('var(--wvr-btn-vertical-align)'); + }); + + it('should have customization for button text decoration', () => { + expect(component.btnTextDecoration) + .toEqual('var(--wvr-btn-plain-text-decoration-default)'); + component.btnTextDecoration = 'var(--wvr-btn-primary-text-decoration)'; + fixture.detectChanges(); + expect(component.btnTextDecoration) + .toEqual('var(--wvr-btn-primary-text-decoration)'); + }); + + it('should have customization for button text decoration in active state', () => { + expect(component.btnTextDecorationActive) + .toEqual('var(--wvr-btn-plain-active-text-decoration-default)'); + component.btnTextDecorationActive = 'var(--wvr-btn-primary-active-text-decoration)'; + fixture.detectChanges(); + expect(component.btnTextDecorationActive) + .toEqual('var(--wvr-btn-primary-active-text-decoration)'); + }); + + it('should have customization for button text decoration in focus state', () => { + expect(component.btnTextDecorationFocus) + .toEqual('var(--wvr-btn-plain-focus-text-decoration-default)'); + component.btnTextDecorationFocus = 'var(--wvr-btn-primary-focus-text-decoration)'; + fixture.detectChanges(); + expect(component.btnTextDecorationFocus) + .toEqual('var(--wvr-btn-primary-focus-text-decoration)'); + }); + + it('should have customization for button text decoration in focus state', () => { + expect(component.btnTextDecorationHover) + .toEqual('var(--wvr-btn-plain-hover-text-decoration-default)'); + component.btnTextDecorationHover = 'var(--wvr-btn-primary-hover-text-decoration)'; + fixture.detectChanges(); + expect(component.btnTextDecorationHover) + .toEqual('var(--wvr-btn-primary-hover-text-decoration)'); + }); + }); diff --git a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.ts b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.ts index 1eb6275a2..0c00b8b55 100644 --- a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.ts +++ b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.ts @@ -109,7 +109,7 @@ export class WvrDropdownComponent extends WvrBaseComponent { } get btnColor(): string { - return this._btnColor ? this._btnColor : `var(--wvr-btn-${this.btnType}-color-default`; + return this._btnColor ? this._btnColor : `var(--wvr-btn-${this.btnType}-color-default)`; } /** Allows for override the button color in active state. */ diff --git a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.spec.ts b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.spec.ts index d53c1a422..61c79b676 100644 --- a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.spec.ts +++ b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.spec.ts @@ -94,4 +94,13 @@ describe('WvrHeaderComponent', () => { }); + it('should have toggle menu', () => { + expect(component.mobileMenuClosed) + .toBeTruthy(); + component.toggleMobileMenu(); + fixture.detectChanges(); + expect(component.mobileMenuClosed) + .toBe(false); + }); + }); From c051d4207847b85371f8e36e8b707264bf2efed1 Mon Sep 17 00:00:00 2001 From: Rincy Mathew Date: Sun, 27 Sep 2020 15:47:39 -0500 Subject: [PATCH 02/54] Excluded code coverage from non wvr components --- angular.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/angular.json b/angular.json index 982219d60..83e514c01 100644 --- a/angular.json +++ b/angular.json @@ -158,7 +158,13 @@ "options": { "main": "projects/wvr-elements/src/test.ts", "tsConfig": "projects/wvr-elements/tsconfig.spec.json", - "karmaConfig": "projects/wvr-elements/karma.conf.js" + "karmaConfig": "projects/wvr-elements/karma.conf.js", + "codeCoverage": true, + "codeCoverageExclude": [ + "/projects/wvr-elements/src/lib/core/*", + "/projects/wvr-elements/src/lib/shared/*", + "/projects/wvr-elements/src/lib/shared/animation/*" + ] } }, "lint": { From 2d261845eef35c21f1aac9cb74a74ebf61921e3f Mon Sep 17 00:00:00 2001 From: Rincy Mathew Date: Tue, 29 Sep 2020 01:30:50 -0500 Subject: [PATCH 03/54] Added wvr alert component --- .../lib/wvr-alert/wvr-alert.component.html | 54 +++++ .../lib/wvr-alert/wvr-alert.component.scss | 186 ++++++++++++++++++ .../lib/wvr-alert/wvr-alert.component.spec.ts | 25 +++ .../src/lib/wvr-alert/wvr-alert.component.ts | 43 ++++ .../wvr-alert.component.ud-examples.html | 74 +++++++ .../wvr-elements/src/lib/wvr-lib.module.ts | 3 + projects/wvr-elements/src/public-api.ts | 1 + src/index.html | 33 ++++ 8 files changed, 419 insertions(+) create mode 100644 projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html create mode 100644 projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.scss create mode 100644 projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts create mode 100644 projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ts create mode 100644 projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ud-examples.html diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html new file mode 100644 index 000000000..aec3136b6 --- /dev/null +++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html @@ -0,0 +1,54 @@ + + + +
+ {{alertMessage}} + +
+ + + +
+ {{alertMessage}} +
+ + + + + + + + + diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.scss b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.scss new file mode 100644 index 000000000..d4786a299 --- /dev/null +++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.scss @@ -0,0 +1,186 @@ +@import "../shared/styles/wvr-variables.scss"; + +:host { + + // alert-primary + --wvr-alert-primary-color-default: #004085; + --wvr-alert-primary-background-default: #cce5ff; + --wvr-alert-primary-border-default: #b8daff; + + --wvr-alert-link-primary-color-default: #002752; + + // .alert-secondary + --wvr-alert-secondary-color-default: #383d41; + --wvr-alert-secondary-background-default: #e2e3e5; + --wvr-alert-secondary-border-default: #d6d8db; + + --wvr-alert-link-secondary-color-default: #202326; + + // alert-success + --wvr-alert-success-color-default: #155724; + --wvr-alert-success-background-default: #d4edda; + --wvr-alert-success-border-default: #c3e6cb; + + --wvr-alert-link-success-color-default: #0b2e13; + + // alert-danger + --wvr-alert-danger-color-default: #721c24; + --wvr-alert-danger-background-default: #f8d7da; + --wvr-alert-danger-border-default: #f5c6cb; + + --wvr-alert-link-danger-color-default: #491217; + + // alert-warning + --wvr-alert-warning-color-default: #856404; + --wvr-alert-warning-background-default: #fff3cd; + --wvr-alert-warning-border-default: #ffeeba; + + --wvr-alert-link-warning-color-default: #533f03; + + // alert-info + --wvr-alert-info-color-default: #0c5460; + --wvr-alert-info-background-default: #d1ecf1; + --wvr-alert-info-border-default: #bee5eb; + + --wvr-alert-link-info-color-default: #062c33; + + // alert-light + --wvr-alert-light-color-default: #818182; + --wvr-alert-light-background-default: #fefefe; + --wvr-alert-light-border-default: #fdfdfe; + + --wvr-alert-light-warning-color-default: #686868; + + // alert-dark + --wvr-alert-dark-color-default: #1b1e21; + --wvr-alert-dark-background-default: #d6d8d9; + --wvr-alert-dark-border-default: #c6c8ca; + + --wvr-alert-link-dark-color-default : #040505; + + .alert { + position: relative; + padding: .75rem 1.25rem; + margin-bottom: 1rem; + border: 1px solid transparent; + border-radius: .25rem; + } + + .alert-dismissible { + padding-right: 4rem; + } + + .alert-dismissible .close { + position: absolute; + top: 0; + right: 0; + padding: .75rem 1.25rem; + color: inherit; + } + + .alert-heading { + color: inherit; + } + + .btn.btn-primary, + .btn.btn-secondary, + .btn.btn-success, + .btn.btn-danger, + .btn.btn-warning, + .btn.btn-info, + .btn.btn-light, + .btn.btn-dark { + font-size: 1.2rem; + box-shadow: none; + } + + a { + text-decoration: none; + background-color: transparent; + } + + .alert-link { + font-weight: 700; + } + + .alert-primary { + color: var(--wvr-alert-primary-color-default); + background-color: var(--wvr-alert-primary-background-default); + border-color: var(--wvr-alert-primary-border-default); + } + + .alert-primary .alert-link { + color: var(--wvr-alert-link-primary-color-default); + } + + .alert-secondary { + color: var(--wvr-alert-secondary-color-default); + background-color: var(--wvr-alert-secondary-background-default); + border-color: var(--wvr-alert-secondary-border-default); + } + + .alert-secondary .alert-link { + color: var(--wvr-alert-link-secondary-color-default); + } + + .alert-success { + color: var(--wvr-alert-success-color-default); + background-color: var(--wvr-alert-success-background-default); + border-color: var(--wvr-alert-success-border-default); + } + + .alert-success .alert-link { + color: var(--wvr-alert-link-success-color-default); + } + + .alert-danger { + color: var(--wvr-alert-danger-color-default); + background-color: var(--wvr-alert-danger-background-default); + border-color: var(--wvr-alert-danger-border-default); + } + + .alert-danger .alert-link { + color: var(--wvr-alert-link-danger-color-default); + } + + .alert-warning { + color: var(--wvr-alert-warning-color-default); + background-color: var(--wvr-alert-warning-background-default); + border-color: var(--wvr-alert-warning-border-default); + } + + .alert-warning .alert-link { + color: var(--wvr-alert-link-warning-color-default); + } + + .alert-info { + color: var(--wvr-alert-info-color-default); + background-color: var(--wvr-alert-info-background-default); + border-color: var(--wvr-alert-info-border-default); + } + + .alert-info .alert-link { + color: var(--wvr-alert-link-info-color-default); + } + + .alert-light { + color: var(--wvr-alert-light-color-default); + background-color: var(--wvr-alert-light-background-default); + border-color: var(--wvr-alert-light-border-default); + } + + .alert-light .alert-link { + color: var(--wvr-alert-light-warning-color-default); + } + + .alert-dark { + color: var(--wvr-alert-dark-color-default); + background-color: var(--wvr-alert-dark-background-default); + border-color: var(--wvr-alert-dark-border-default); + } + + .alert-dark .alert-link { + color: var(--wvr-alert-link-dark-color-default); + } + +} diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts new file mode 100644 index 000000000..324bddd4d --- /dev/null +++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WvrAlertComponent } from './wvr-alert.component'; + +describe('WvrAlertComponent', () => { + let component: WvrAlertComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ WvrAlertComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(WvrAlertComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ts b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ts new file mode 100644 index 000000000..97d487dc1 --- /dev/null +++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ts @@ -0,0 +1,43 @@ +import { Component, HostListener, Injector, Input, OnInit } from '@angular/core'; +import { WvrBaseComponent } from '../shared/wvr-base.component'; + +@Component({ + selector: 'wvr-alert-element', + templateUrl: './wvr-alert.component.html', + styleUrls: ['./wvr-alert.component.scss'] +}) +export class WvrAlertComponent extends WvrBaseComponent implements OnInit { + + /** Used to define the class type of an alert component. */ + @Input() alertClass: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'; + + /** Used to define the type of alert. */ + @Input() alertType: 'basic' | 'closable' | 'self-closing' | 'custom'; + + /** Used to define the text of an alert message. */ + @Input() alertMessage: string; + + /** Used to self close the alert box. */ + alertClosed = false; + + constructor(injector: Injector) { + super(injector); + } + + /** + * An event handle method for the `document:click` event. + * Closes the alert box once the `X` is clicked. + */ + @HostListener('document:click', ['$event']) clickClose($event): void { + const closeElem = $event.target as HTMLElement; + const alertElem = closeElem.closest('.wvr-alert'); + alertElem.classList.add('wvr-hidden'); + } + + ngOnInit(): void { + setTimeout(() => { + this.alertClosed = true; + }, 8000); + } + +} diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ud-examples.html b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ud-examples.html new file mode 100644 index 000000000..e8642c445 --- /dev/null +++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ud-examples.html @@ -0,0 +1,74 @@ + + + The basic wvr-alert component with no customizations. + + + + + + + + + + + + + + + + + + + + + + + The closable wvr-alert component. + + + + + + + + + + The wvr-alert component with self closing feature. + + + + + + + + + + The wvr-alert component with custom content. + + + + +

Custom Alert Heading

+

Custom Alert Body

+
+

Custom Alert footer section.

+ + + + diff --git a/projects/wvr-elements/src/lib/wvr-lib.module.ts b/projects/wvr-elements/src/lib/wvr-lib.module.ts index e1a237f91..a7b76f66b 100644 --- a/projects/wvr-elements/src/lib/wvr-lib.module.ts +++ b/projects/wvr-elements/src/lib/wvr-lib.module.ts @@ -7,6 +7,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { IconService } from './core/icon.service'; import { MobileService } from './core/mobile.service'; +import { WvrAlertComponent } from './wvr-alert/wvr-alert.component'; import { WvrAnimationService } from './core/wvr-animation.service'; import { WvrButtonComponent } from './wvr-button/wvr-button.component'; import { WvrDropdownComponent } from './wvr-dropdown/wvr-dropdown.component'; @@ -22,6 +23,7 @@ import { WvrTextComponent } from './wvr-text/wvr-text.component'; /** This property contains a list of components and the selector tags. */ const elements = [ + { component: WvrAlertComponent, selector: 'wvr-alert'}, { component: WvrButtonComponent, selector: 'wvr-button' }, { component: WvrDropdownComponent, selector: 'wvr-dropdown' }, { component: WvrFooterComponent, selector: 'wvr-footer' }, @@ -37,6 +39,7 @@ const elements = [ /** This property contains a list of components classes. */ const components = [ + WvrAlertComponent, WvrButtonComponent, WvrDropdownComponent, WvrFooterComponent, diff --git a/projects/wvr-elements/src/public-api.ts b/projects/wvr-elements/src/public-api.ts index 1c951d39e..4086654ee 100644 --- a/projects/wvr-elements/src/public-api.ts +++ b/projects/wvr-elements/src/public-api.ts @@ -8,6 +8,7 @@ export * from './lib/shared/wvr-base.component'; export * from './lib/shared/alignment.enum'; export * from './lib/core/mobile.service'; export * from './lib/core/icon.service'; +export * from './lib/wvr-alert/wvr-alert.component'; export * from './lib/wvr-button/wvr-button.component'; export * from './lib/wvr-dropdown/wvr-dropdown.component'; export * from './lib/wvr-footer/wvr-footer.component'; diff --git a/src/index.html b/src/index.html index 42cab175b..77f049dca 100644 --- a/src/index.html +++ b/src/index.html @@ -170,6 +170,39 @@ +
+

+ + + + + + + + + + + + +

Custom Alert Heading

+

Custom Alert Body

+
+

Custom Alert footer section.

+ + + +
+

From e71236ee6928574b19d9342229fc84b88b0b4466 Mon Sep 17 00:00:00 2001 From: Rincy Mathew Date: Tue, 29 Sep 2020 11:00:05 -0500 Subject: [PATCH 04/54] Resolved self closing alert message --- .../src/lib/wvr-alert/wvr-alert.component.html | 10 ++++++++++ .../src/lib/wvr-alert/wvr-alert.component.ts | 11 +++++++++++ src/index.html | 17 +++++++++++++---- 3 files changed, 34 insertions(+), 4 deletions(-) diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html index aec3136b6..4ba94b40f 100644 --- a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html +++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html @@ -14,18 +14,22 @@
+
+
+
+
@@ -49,6 +53,12 @@ + + + {{alertLinkText}} + + + diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ts b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ts index 97d487dc1..f40944722 100644 --- a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ts +++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ts @@ -17,6 +17,12 @@ export class WvrAlertComponent extends WvrBaseComponent implements OnInit { /** Used to define the text of an alert message. */ @Input() alertMessage: string; + /** Used to define the alert link href value. */ + @Input() alertLinkUrl: string; + + /** Used to define the text value alert link href. */ + @Input() alertLinkText: string; + /** Used to self close the alert box. */ alertClosed = false; @@ -35,7 +41,12 @@ export class WvrAlertComponent extends WvrBaseComponent implements OnInit { } ngOnInit(): void { + const wvrAlertElem = this._eRef.nativeElement as HTMLElement; + const alertType = wvrAlertElem.getAttribute('alert-type'); setTimeout(() => { + if(alertType === "self-closing") { + wvrAlertElem.classList.add('wvr-hidden'); + } this.alertClosed = true; }, 8000); } diff --git a/src/index.html b/src/index.html index 77f049dca..1c33758dc 100644 --- a/src/index.html +++ b/src/index.html @@ -174,8 +174,11 @@

- + + -

Custom Alert Heading

-

Custom Alert Body

+

+ +

+

+ +

-

Custom Alert footer section.

+

+ +

From 017f6f670490fe2417965188ce58888589e63c94 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Tue, 29 Sep 2020 14:50:11 -0500 Subject: [PATCH 05/54] Added registry service and id --- .../core/component-registry.service.spec.ts | 16 ++++++++++++++++ .../src/lib/core/component-registry.service.ts | 18 ++++++++++++++++++ .../src/lib/shared/wvr-base.component.ts | 8 ++++++++ 3 files changed, 42 insertions(+) create mode 100644 projects/wvr-elements/src/lib/core/component-registry.service.spec.ts create mode 100644 projects/wvr-elements/src/lib/core/component-registry.service.ts diff --git a/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts b/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts new file mode 100644 index 000000000..58cc3b767 --- /dev/null +++ b/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ComponentRegistryService } from './component-registry.service'; + +describe('ComponentRegistryService', () => { + let service: ComponentRegistryService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ComponentRegistryService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/projects/wvr-elements/src/lib/core/component-registry.service.ts b/projects/wvr-elements/src/lib/core/component-registry.service.ts new file mode 100644 index 000000000..71b2552e1 --- /dev/null +++ b/projects/wvr-elements/src/lib/core/component-registry.service.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core'; +import { WvrBaseComponent } from '../shared/wvr-base.component'; + +@Injectable({ + providedIn: 'root' +}) +export class ComponentRegistryService { + + private readonly registry: Array = new Array(); + + register(component: WvrBaseComponent): number { + return this.registry.push(component) - 1; + } + + getComponent(id: number): WvrBaseComponent { + return this.registry[id]; + } +} diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts index c21c14f07..dc2738ed8 100644 --- a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts +++ b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts @@ -4,13 +4,17 @@ import * as JSON5 from 'json5'; import { fromEvent, Observable } from 'rxjs'; import { debounceTime, map } from 'rxjs/operators'; import { WvrAnimationService } from '../core/wvr-animation.service'; +import { ComponentRegistryService } from '../core/component-registry.service'; import { IconService } from '../core/icon.service'; import { MobileService } from '../core/mobile.service'; +import { idText } from 'typescript'; @Directive() // tslint:disable-next-line:directive-class-suffix export abstract class WvrBaseComponent implements AfterContentInit, OnInit { + readonly id: number; + @HostBinding('class.wvr-bootstrap') wvrBootstrap = true; private _animationSettings: any = {}; @@ -42,6 +46,8 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(agent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(agent.substr(0, 4))); } + protected readonly componentRegistry: ComponentRegistryService; + protected readonly _animationService: WvrAnimationService; protected readonly _domSanitizer: DomSanitizer; @@ -59,10 +65,12 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { @Output() protected readonly animationEventTrigger = new EventEmitter(); constructor(injector: Injector) { + this.componentRegistry = injector.get(ComponentRegistryService); this._animationService = injector.get(WvrAnimationService); this._domSanitizer = injector.get(DomSanitizer); this._eRef = injector.get(ElementRef); this.mobileService = injector.get(MobileService); + this.id = this.componentRegistry.register(this); } ngOnInit(): void { From c26cdd645d2a2883078e1a331fab625762dd4da6 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Tue, 29 Sep 2020 14:57:14 -0500 Subject: [PATCH 06/54] Added tests --- .../core/component-registry.service.spec.ts | 37 +++++++++++++++++-- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts b/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts index 58cc3b767..323816ea4 100644 --- a/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts +++ b/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts @@ -1,16 +1,45 @@ -import { TestBed } from '@angular/core/testing'; +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { WvrItWorksComponent } from '../wvr-it-works/wvr-it-works.component'; import { ComponentRegistryService } from './component-registry.service'; describe('ComponentRegistryService', () => { let service: ComponentRegistryService; + let component: WvrItWorksComponent; + let fixture: ComponentFixture; - beforeEach(() => { - TestBed.configureTestingModule({}); + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [BrowserAnimationsModule], + declarations: [WvrItWorksComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] + }) + .compileComponents() + .catch(err => { console.error(err); }); service = TestBed.inject(ComponentRegistryService); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WvrItWorksComponent); + component = fixture.componentInstance; + fixture.detectChanges(); }); it('should be created', () => { - expect(service).toBeTruthy(); + expect(service) + .toBeTruthy(); + }); + + it('should register a new component', () => { + expect(component.id >= 0) + .toBeTruthy(); + }); + + it('should retrieve components', () => { + expect(service.getComponent(component.id) === component) + .toBeTruthy(); }); + }); From cb38a580b47d8186a6dfd559f5085e016719dab1 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 30 Sep 2020 09:12:24 -0500 Subject: [PATCH 07/54] Changed registry to map --- .../lib/core/component-registry.service.spec.ts | 6 ++++++ .../src/lib/core/component-registry.service.ts | 15 ++++++++++++--- .../src/lib/shared/wvr-base.component.ts | 9 +++++++-- 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts b/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts index 323816ea4..363df7b28 100644 --- a/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts +++ b/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts @@ -42,4 +42,10 @@ describe('ComponentRegistryService', () => { .toBeTruthy(); }); + it('should unregister components', () => { + service.unRegisterComponent(component.id); + expect(service.getComponent(component.id)) + .toBeUndefined(); + }); + }); diff --git a/projects/wvr-elements/src/lib/core/component-registry.service.ts b/projects/wvr-elements/src/lib/core/component-registry.service.ts index 71b2552e1..a5360b59f 100644 --- a/projects/wvr-elements/src/lib/core/component-registry.service.ts +++ b/projects/wvr-elements/src/lib/core/component-registry.service.ts @@ -6,13 +6,22 @@ import { WvrBaseComponent } from '../shared/wvr-base.component'; }) export class ComponentRegistryService { - private readonly registry: Array = new Array(); + private index = -1; + private readonly registry: Map = new Map(); register(component: WvrBaseComponent): number { - return this.registry.push(component) - 1; + // tslint:disable-next-line:increment-decrement + this.registry.set(++this.index, component); + + return this.index; + } + + unRegisterComponent(id: number): void { + this.registry.delete(id); } getComponent(id: number): WvrBaseComponent { - return this.registry[id]; + return this.registry.get(id); } + } diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts index dc2738ed8..cc644622a 100644 --- a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts +++ b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts @@ -1,4 +1,4 @@ -import { AfterContentInit, Directive, ElementRef, EventEmitter, HostBinding, Injector, Input, OnInit, Output, ViewChild } from '@angular/core'; +import { AfterContentInit, Directive, ElementRef, EventEmitter, HostBinding, Injector, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import * as JSON5 from 'json5'; import { fromEvent, Observable } from 'rxjs'; @@ -11,7 +11,7 @@ import { idText } from 'typescript'; @Directive() // tslint:disable-next-line:directive-class-suffix -export abstract class WvrBaseComponent implements AfterContentInit, OnInit { +export abstract class WvrBaseComponent implements AfterContentInit, OnInit, OnDestroy { readonly id: number; @@ -71,6 +71,7 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { this._eRef = injector.get(ElementRef); this.mobileService = injector.get(MobileService); this.id = this.componentRegistry.register(this); + (this._eRef.nativeElement as HTMLElement).setAttribute('id', `wvr-component-${this.id}`); } ngOnInit(): void { @@ -95,6 +96,10 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { }, 1); } + ngOnDestroy(): void { + this.componentRegistry.unRegisterComponent(this.id); + } + triggerAnimations(animationTriggerType: string): void { const animations: Array = Array.isArray(this._animationSettings[animationTriggerType]) ? this._animationSettings[animationTriggerType] From c17082c004efd86adfe200417418e21c0040784e Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 30 Sep 2020 10:38:33 -0500 Subject: [PATCH 08/54] Added getComponentByElement --- .../src/lib/core/component-registry.service.spec.ts | 7 +++++++ .../src/lib/core/component-registry.service.ts | 13 +++++++++++++ .../src/lib/shared/wvr-base.component.ts | 11 +++++------ 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts b/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts index 363df7b28..bd0c7f267 100644 --- a/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts +++ b/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts @@ -1,6 +1,7 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { WvrBaseComponent } from '../shared/wvr-base.component'; import { WvrItWorksComponent } from '../wvr-it-works/wvr-it-works.component'; import { ComponentRegistryService } from './component-registry.service'; @@ -42,6 +43,12 @@ describe('ComponentRegistryService', () => { .toBeTruthy(); }); + it('should retrieve components by element', () => { + // tslint:disable-next-line:no-string-literal + expect(service.getComponentByElement(component['_eRef'].nativeElement as HTMLElement) === component) + .toBeTruthy(); + }); + it('should unregister components', () => { service.unRegisterComponent(component.id); expect(service.getComponent(component.id)) diff --git a/projects/wvr-elements/src/lib/core/component-registry.service.ts b/projects/wvr-elements/src/lib/core/component-registry.service.ts index a5360b59f..58a07cf34 100644 --- a/projects/wvr-elements/src/lib/core/component-registry.service.ts +++ b/projects/wvr-elements/src/lib/core/component-registry.service.ts @@ -24,4 +24,17 @@ export class ComponentRegistryService { return this.registry.get(id); } + getComponentByElement(element: HTMLElement): WvrBaseComponent { + const htmlID = element.getAttribute('id'); + + if (!htmlID) { + return; + } + + const id = htmlID.replace(WvrBaseComponent.HTML_ID_BASE, ''); + + return this.getComponent(parseInt(id, 10)); + + } + } diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts index cc644622a..a138aa433 100644 --- a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts +++ b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts @@ -1,13 +1,9 @@ import { AfterContentInit, Directive, ElementRef, EventEmitter, HostBinding, Injector, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import * as JSON5 from 'json5'; -import { fromEvent, Observable } from 'rxjs'; -import { debounceTime, map } from 'rxjs/operators'; -import { WvrAnimationService } from '../core/wvr-animation.service'; import { ComponentRegistryService } from '../core/component-registry.service'; -import { IconService } from '../core/icon.service'; import { MobileService } from '../core/mobile.service'; -import { idText } from 'typescript'; +import { WvrAnimationService } from '../core/wvr-animation.service'; @Directive() // tslint:disable-next-line:directive-class-suffix @@ -15,9 +11,12 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit, OnDe readonly id: number; + static readonly HTML_ID_BASE = 'wvr-component'; + @HostBinding('class.wvr-bootstrap') wvrBootstrap = true; private _animationSettings: any = {}; + @Input() set animate(value: string) { this._animationSettings = JSON5.parse(value); } @@ -71,7 +70,7 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit, OnDe this._eRef = injector.get(ElementRef); this.mobileService = injector.get(MobileService); this.id = this.componentRegistry.register(this); - (this._eRef.nativeElement as HTMLElement).setAttribute('id', `wvr-component-${this.id}`); + (this._eRef.nativeElement as HTMLElement).setAttribute('id', `${WvrBaseComponent.HTML_ID_BASE}-${this.id}`); } ngOnInit(): void { From 2f1fccc94859836bc2c6d680c6e264e973663965 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 30 Sep 2020 11:26:16 -0500 Subject: [PATCH 09/54] honoring native id --- .../src/lib/core/component-registry.service.ts | 15 ++++++++++----- .../src/lib/shared/wvr-base.component.ts | 5 ++++- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/projects/wvr-elements/src/lib/core/component-registry.service.ts b/projects/wvr-elements/src/lib/core/component-registry.service.ts index 58a07cf34..7c33de74a 100644 --- a/projects/wvr-elements/src/lib/core/component-registry.service.ts +++ b/projects/wvr-elements/src/lib/core/component-registry.service.ts @@ -7,25 +7,30 @@ import { WvrBaseComponent } from '../shared/wvr-base.component'; export class ComponentRegistryService { private index = -1; - private readonly registry: Map = new Map(); + private readonly registry: Map = new Map(); register(component: WvrBaseComponent): number { + + // tslint:disable-next-line:no-string-literal + const element = (component['_eRef'].nativeElement as HTMLElement); // tslint:disable-next-line:increment-decrement - this.registry.set(++this.index, component); + const id: number | string = element.hasAttribute('id') ? ++this.index : `${element.getAttribute('id')}-${++this.index}`; + + this.registry.set(id, component); return this.index; } - unRegisterComponent(id: number): void { + unRegisterComponent(id: number | string): void { this.registry.delete(id); } - getComponent(id: number): WvrBaseComponent { + getComponent(id: number | string): WvrBaseComponent { return this.registry.get(id); } getComponentByElement(element: HTMLElement): WvrBaseComponent { - const htmlID = element.getAttribute('id'); + const htmlID = element.hasAttribute('wvr-id') ? element.getAttribute('wvr-id') : element.getAttribute('id'); if (!htmlID) { return; diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts index a138aa433..697c742c8 100644 --- a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts +++ b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts @@ -70,7 +70,10 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit, OnDe this._eRef = injector.get(ElementRef); this.mobileService = injector.get(MobileService); this.id = this.componentRegistry.register(this); - (this._eRef.nativeElement as HTMLElement).setAttribute('id', `${WvrBaseComponent.HTML_ID_BASE}-${this.id}`); + + const element = (this._eRef.nativeElement as HTMLElement); + const htmlIDAttrName = element.hasAttribute('id') ? 'wvr-id' : 'id'; + element.setAttribute(htmlIDAttrName, `${WvrBaseComponent.HTML_ID_BASE}-${this.id}`); } ngOnInit(): void { From f49e6038af77e534e79225df7a6d9da0d7a06725 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 30 Sep 2020 11:34:11 -0500 Subject: [PATCH 10/54] Cleaned up getComponentByElement --- .../src/lib/core/component-registry.service.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/projects/wvr-elements/src/lib/core/component-registry.service.ts b/projects/wvr-elements/src/lib/core/component-registry.service.ts index 7c33de74a..0580a6e63 100644 --- a/projects/wvr-elements/src/lib/core/component-registry.service.ts +++ b/projects/wvr-elements/src/lib/core/component-registry.service.ts @@ -30,16 +30,14 @@ export class ComponentRegistryService { } getComponentByElement(element: HTMLElement): WvrBaseComponent { - const htmlID = element.hasAttribute('wvr-id') ? element.getAttribute('wvr-id') : element.getAttribute('id'); + const hasNativeId = element.hasAttribute('wvr-id'); + const htmlID = hasNativeId ? element.getAttribute('wvr-id') : element.getAttribute('id'); if (!htmlID) { return; } - const id = htmlID.replace(WvrBaseComponent.HTML_ID_BASE, ''); - - return this.getComponent(parseInt(id, 10)); - + return this.getComponent(hasNativeId ? htmlID : parseInt(htmlID.replace(WvrBaseComponent.HTML_ID_BASE, ''), 10)); } } From 46dcbc110b8a164f295f94104f4bda866d50c84c Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 30 Sep 2020 11:52:03 -0500 Subject: [PATCH 11/54] Fixed component registry logic --- .../src/lib/core/component-registry.service.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/wvr-elements/src/lib/core/component-registry.service.ts b/projects/wvr-elements/src/lib/core/component-registry.service.ts index 0580a6e63..7b688683c 100644 --- a/projects/wvr-elements/src/lib/core/component-registry.service.ts +++ b/projects/wvr-elements/src/lib/core/component-registry.service.ts @@ -14,9 +14,7 @@ export class ComponentRegistryService { // tslint:disable-next-line:no-string-literal const element = (component['_eRef'].nativeElement as HTMLElement); // tslint:disable-next-line:increment-decrement - const id: number | string = element.hasAttribute('id') ? ++this.index : `${element.getAttribute('id')}-${++this.index}`; - - this.registry.set(id, component); + this.registry.set(++this.index, component); return this.index; } @@ -37,7 +35,9 @@ export class ComponentRegistryService { return; } - return this.getComponent(hasNativeId ? htmlID : parseInt(htmlID.replace(WvrBaseComponent.HTML_ID_BASE, ''), 10)); + const id = parseInt(htmlID.replace(WvrBaseComponent.HTML_ID_BASE, ''), 10); + + return this.getComponent(id); } } From aec2bda6787a9d903a19067e2521c865af1e107e Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 30 Sep 2020 13:08:49 -0500 Subject: [PATCH 12/54] WIP tabs and tab --- .../lib/wvr-it-works/wvr-it-works.component.scss | 4 ++++ projects/wvr-elements/src/lib/wvr-lib.module.ts | 10 ++++++++-- projects/wvr-elements/src/public-api.ts | 2 ++ src/index.html | 13 +++++++++++++ 4 files changed, 27 insertions(+), 2 deletions(-) diff --git a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.scss b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.scss index eaa228772..48604c48d 100644 --- a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.scss +++ b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.scss @@ -6,4 +6,8 @@ div.container { .it-works { color: var(--wvr-primary); +} + +:host { + font-family: var(--wvr-font-family-sans-serif); } \ No newline at end of file diff --git a/projects/wvr-elements/src/lib/wvr-lib.module.ts b/projects/wvr-elements/src/lib/wvr-lib.module.ts index e1a237f91..e7ed7f5c3 100644 --- a/projects/wvr-elements/src/lib/wvr-lib.module.ts +++ b/projects/wvr-elements/src/lib/wvr-lib.module.ts @@ -19,6 +19,8 @@ import { WvrListComponent } from './wvr-list/wvr-list.component'; import { WvrNavLiComponent } from './wvr-nav-list/wvr-nav-li/wvr-nav-li.component'; import { WvrNavListComponent } from './wvr-nav-list/wvr-nav-list.component'; import { WvrTextComponent } from './wvr-text/wvr-text.component'; +import { WvrTabsComponent } from './wvr-tabs/wvr-tabs.component'; +import { WvrTabComponent } from './wvr-tabs/wvr-tab/wvr-tab.component'; /** This property contains a list of components and the selector tags. */ const elements = [ @@ -32,7 +34,9 @@ const elements = [ { component: WvrListItemComponent, selector: 'wvr-list-item' }, { component: WvrNavListComponent, selector: 'wvr-nav-list' }, { component: WvrNavLiComponent, selector: 'wvr-nav-li' }, - { component: WvrTextComponent, selector: 'wvr-text' } + { component: WvrTextComponent, selector: 'wvr-text' }, + { component: WvrTabsComponent, selector: 'wvr-tabs' }, + { component: WvrTabComponent, selector: 'wvr-tab' } ]; /** This property contains a list of components classes. */ @@ -47,7 +51,9 @@ const components = [ WvrItWorksComponent, WvrNavListComponent, WvrNavLiComponent, - WvrTextComponent + WvrTextComponent, + WvrTabsComponent, + WvrTabComponent ]; /** The main module for the Weaver Elements library. */ diff --git a/projects/wvr-elements/src/public-api.ts b/projects/wvr-elements/src/public-api.ts index 1c951d39e..9714c4a19 100644 --- a/projects/wvr-elements/src/public-api.ts +++ b/projects/wvr-elements/src/public-api.ts @@ -19,4 +19,6 @@ export * from './lib/wvr-list/wvr-list-item/wvr-list-item.component'; export * from './lib/wvr-lib.module'; export * from './lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component'; export * from './lib/wvr-nav-list/wvr-nav-list.component'; +export * from './lib/wvr-tabs/wvr-tabs.component'; +export * from './lib/wvr-tabs/wvr-tab/wvr-tab.component'; export * from './lib/wvr-text/wvr-text.component'; diff --git a/src/index.html b/src/index.html index 42cab175b..aa7cbc407 100644 --- a/src/index.html +++ b/src/index.html @@ -675,6 +675,19 @@ +
+ +

+ + + + + + +
+ + + From c5d02d5d39da579292132b974f3f5ed512b72ce1 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 30 Sep 2020 16:34:14 -0500 Subject: [PATCH 13/54] WIP tabs --- .../lib/core/component-registry.service.ts | 2 +- .../wvr-tabs/wvr-tab/wvr-tab.component.html | 9 +++++ .../wvr-tabs/wvr-tab/wvr-tab.component.scss | 5 +++ .../wvr-tab/wvr-tab.component.spec.ts | 26 ++++++++++++ .../lib/wvr-tabs/wvr-tab/wvr-tab.component.ts | 40 +++++++++++++++++++ .../src/lib/wvr-tabs/wvr-tabs.component.html | 10 +++++ .../src/lib/wvr-tabs/wvr-tabs.component.scss | 15 +++++++ .../lib/wvr-tabs/wvr-tabs.component.spec.ts | 26 ++++++++++++ .../src/lib/wvr-tabs/wvr-tabs.component.ts | 27 +++++++++++++ src/index.html | 10 +++-- 10 files changed, 165 insertions(+), 5 deletions(-) create mode 100644 projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.html create mode 100644 projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.scss create mode 100644 projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.spec.ts create mode 100644 projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.ts create mode 100644 projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html create mode 100644 projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.scss create mode 100644 projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.spec.ts create mode 100644 projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.ts diff --git a/projects/wvr-elements/src/lib/core/component-registry.service.ts b/projects/wvr-elements/src/lib/core/component-registry.service.ts index 7b688683c..65d9c0e57 100644 --- a/projects/wvr-elements/src/lib/core/component-registry.service.ts +++ b/projects/wvr-elements/src/lib/core/component-registry.service.ts @@ -35,7 +35,7 @@ export class ComponentRegistryService { return; } - const id = parseInt(htmlID.replace(WvrBaseComponent.HTML_ID_BASE, ''), 10); + const id = parseInt(htmlID.replace(`${WvrBaseComponent.HTML_ID_BASE}-`, ''), 10); return this.getComponent(id); } diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.html b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.html new file mode 100644 index 000000000..fd52ad150 --- /dev/null +++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.html @@ -0,0 +1,9 @@ +
  • + + {{tabTitle}} + +
    • + + \ No newline at end of file diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.scss b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.scss new file mode 100644 index 000000000..15fa92bf3 --- /dev/null +++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.scss @@ -0,0 +1,5 @@ +@import "../../shared/styles/wvr-variables.scss"; + +:host { + font-family: var(--wvr-font-family-sans-serif); +} \ No newline at end of file diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.spec.ts b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.spec.ts new file mode 100644 index 000000000..5833df32d --- /dev/null +++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WvrTabComponent } from './wvr-tab.component'; + +describe('WvrTabComponent', () => { + let component: WvrTabComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ WvrTabComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(WvrTabComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component) + .toBeTruthy(); + }); +}); diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.ts b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.ts new file mode 100644 index 000000000..c75f2e3a0 --- /dev/null +++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.ts @@ -0,0 +1,40 @@ +import { AfterViewInit, Component, Input } from '@angular/core'; +import { WvrBaseComponent } from '../../shared/wvr-base.component'; +import { WvrTabsComponent } from '../wvr-tabs.component'; + +@Component({ + selector: 'wvr-wvr-tab', + templateUrl: './wvr-tab.component.html', + styleUrls: ['./wvr-tab.component.scss'] +}) +export class WvrTabComponent extends WvrBaseComponent implements AfterViewInit { + + parent: WvrTabsComponent; + + active = false; + + @Input() tabTitle = `Tab ${this.id}`; + + clickActivation($event: MouseEvent): void { + $event.preventDefault(); + this.activate(); + } + + activate(): void { + this.parent.deactivateTabs(); + this.active = true; + const elem = (this._eRef.nativeElement as HTMLElement); + this.parent.activeTabContent = (elem.querySelector('.tab-content') as HTMLElement).innerText; + } + + deActivate(): void { + this.active = false; + } + + ngAfterViewInit(): void { + const tabsElements: HTMLElement = (this._eRef.nativeElement as HTMLElement).closest('wvr-tabs'); + this.parent = this.componentRegistry.getComponentByElement(tabsElements) as WvrTabsComponent; + this.parent.addTab(this); + } + +} diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html new file mode 100644 index 000000000..1ab670e04 --- /dev/null +++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html @@ -0,0 +1,10 @@ +
      + +
    + + + + + + + \ No newline at end of file diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.scss b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.scss new file mode 100644 index 000000000..7b9394ce4 --- /dev/null +++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.scss @@ -0,0 +1,15 @@ +@import "../shared/styles/wvr-variables.scss"; + +:host { + + --tab-content-display: block; + --tab-content-padding: 25px 0px; + + font-family: var(--wvr-font-family-sans-serif); + + tab-content { + display: var(--tab-content-display); + padding: var(--tab-content-padding); + } + +} \ No newline at end of file diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.spec.ts b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.spec.ts new file mode 100644 index 000000000..5d134b245 --- /dev/null +++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WvrTabsComponent } from './wvr-tabs.component'; + +describe('WvrTabsComponent', () => { + let component: WvrTabsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ WvrTabsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(WvrTabsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component) + .toBeTruthy(); + }); +}); diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.ts b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.ts new file mode 100644 index 000000000..74763f967 --- /dev/null +++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.ts @@ -0,0 +1,27 @@ +import { Component } from '@angular/core'; +import { WvrBaseComponent } from '../shared/wvr-base.component'; +import { WvrTabComponent } from './wvr-tab/wvr-tab.component'; + +@Component({ + selector: 'wvr-wvr-tabs-element', + templateUrl: './wvr-tabs.component.html', + styleUrls: ['./wvr-tabs.component.scss'] +}) +export class WvrTabsComponent extends WvrBaseComponent { + + private tabs = new Array(); + + activeTabContent = 'Tab Content'; + + addTab(tab: WvrTabComponent): void { + if (!this.tabs.length) { + tab.activate(); + } + this.tabs.push(tab); + } + + deactivateTabs(): void { + this.tabs.forEach(t => t.deActivate()); + } + +} diff --git a/src/index.html b/src/index.html index aa7cbc407..0eb529d48 100644 --- a/src/index.html +++ b/src/index.html @@ -680,14 +680,16 @@

    - - + + + + + + - - From 20effd31fe0cb14585658a36a068d1721f9a1d66 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 30 Sep 2020 17:00:18 -0500 Subject: [PATCH 14/54] Tabs support safehtml --- .../src/lib/wvr-tabs/wvr-tab/wvr-tab.component.html | 8 +++++--- .../src/lib/wvr-tabs/wvr-tab/wvr-tab.component.ts | 6 ++++-- .../wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html | 3 +-- .../wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.ts | 3 ++- src/index.html | 6 ++++-- 5 files changed, 16 insertions(+), 10 deletions(-) diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.html b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.html index fd52ad150..1663cbddc 100644 --- a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.html +++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.html @@ -1,9 +1,11 @@
  • - {{tabTitle}} + {{tabText}}
    • - \ No newline at end of file + diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.scss b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.scss index 15fa92bf3..be022364d 100644 --- a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.scss +++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.scss @@ -2,4 +2,4 @@ :host { font-family: var(--wvr-font-family-sans-serif); -} \ No newline at end of file +} diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.scss b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.scss index 7b9394ce4..7c8142e53 100644 --- a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.scss +++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.scss @@ -12,4 +12,4 @@ padding: var(--tab-content-padding); } -} \ No newline at end of file +} From 6e82fb1035bc1406308750a70de050bb78a9673b Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 30 Sep 2020 23:53:27 -0500 Subject: [PATCH 17/54] nl at eof --- projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html index 572a2e358..fdebcba5c 100644 --- a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html +++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html @@ -6,4 +6,4 @@ - \ No newline at end of file + From 402f8c4696a9018ba5863913390a20f272a54950 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 30 Sep 2020 23:54:23 -0500 Subject: [PATCH 18/54] nl at eof --- .../src/lib/wvr-it-works/wvr-it-works.component.html | 2 +- .../src/lib/wvr-it-works/wvr-it-works.component.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.html b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.html index 1e49b0ab0..318c1e9d0 100644 --- a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.html +++ b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.html @@ -2,4 +2,4 @@

    {{text}}!!!

    - \ No newline at end of file + diff --git a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.scss b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.scss index 48604c48d..7e3d9bd7f 100644 --- a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.scss +++ b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.scss @@ -10,4 +10,4 @@ div.container { :host { font-family: var(--wvr-font-family-sans-serif); -} \ No newline at end of file +} From f8b5ce67b136e659df9972b8f1caf689890d7e6a Mon Sep 17 00:00:00 2001 From: Rincy Mathew Date: Thu, 1 Oct 2020 11:37:32 -0500 Subject: [PATCH 19/54] Code correction made based on PR review suggestions --- .../lib/wvr-alert/wvr-alert.component.html | 34 +++++++-------- .../lib/wvr-alert/wvr-alert.component.spec.ts | 42 +++++++++++++++---- .../src/lib/wvr-alert/wvr-alert.component.ts | 36 +++++----------- .../wvr-alert.component.ud-examples.html | 27 +++++++----- src/index.html | 10 ++--- 5 files changed, 81 insertions(+), 68 deletions(-) diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html index 4ba94b40f..75b7968fc 100644 --- a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html +++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html @@ -1,4 +1,4 @@ -