Merge pull request #287 from TAMULib/1.7.3-patch

1.7.3 patch

.gitignore

@@ -54,5 +54,7 @@ package-lock.json
 yarn.lock
 src/config.json
 src/config-template.json
+src/assets/icons/*
+!src/assets/icons/tl
 
 .wvr-ud/static-assets/styles.css

package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/TAMULib/weaver-components.git"
   },
-  "version": "1.7.2",
+  "version": "1.7.3",
   "private": false,
   "license": "MIT",
   "config": {
@@ -52,15 +52,15 @@
     "test:ci": "npm run test:coverage && npm run test:audit"
   },
   "dependencies": {
-    "@angular/animations": "^11.0.3",
-    "@angular/common": "^11.0.3",
-    "@angular/compiler": "^11.0.3",
-    "@angular/core": "^11.0.3",
-    "@angular/elements": "^11.0.3",
-    "@angular/forms": "^11.0.3",
-    "@angular/platform-browser": "^11.0.3",
-    "@angular/platform-browser-dynamic": "^11.0.3",
-    "@angular/router": "^11.0.3",
+    "@angular/animations": "^11.0.4",
+    "@angular/common": "^11.0.4",
+    "@angular/compiler": "^11.0.4",
+    "@angular/core": "^11.0.4",
+    "@angular/elements": "^11.0.4",
+    "@angular/forms": "^11.0.4",
+    "@angular/platform-browser": "^11.0.4",
+    "@angular/platform-browser-dynamic": "^11.0.4",
+    "@angular/router": "^11.0.4",
     "@ng-bootstrap/ng-bootstrap": "^8.0.0",
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^10.1.0",
@@ -74,27 +74,27 @@
     "document-register-element": "^1.14.5",
     "handlebars": "^4.7.6",
     "json5": "^2.1.3",
-    "ng-lazyload-image": "^9.1.0",
+    "ng-inline-svg": "^11.0.1",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.3",
     "web-animations-js": "^2.3.2",
-    "zone.js": "~0.11.3"
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1100.3",
+    "@angular-devkit/build-angular": "^0.1100.4",
     "@angular-devkit/build-ng-packagr": "~0.1002.0",
-    "@angular-devkit/schematics": "^11.0.3",
-    "@angular/cli": "^11.0.3",
-    "@angular/compiler-cli": "^11.0.3",
-    "@angular/language-service": "^11.0.3",
-    "@angular/localize": "11.0.3",
+    "@angular-devkit/schematics": "^11.0.4",
+    "@angular/cli": "^11.0.4",
+    "@angular/compiler-cli": "^11.0.4",
+    "@angular/language-service": "^11.0.4",
+    "@angular/localize": "11.0.4",
     "@compodoc/compodoc": "^1.1.11",
     "@lhci/cli": "^0.6.1",
     "@ngrx/schematics": "^10.1.0",
     "@pickra/copy-code-block": "^1.2.0",
     "@types/jasmine": "~3.6.2",
     "@types/jasminewd2": "~2.0.8",
-    "@types/node": "^14.14.10",
+    "@types/node": "^14.14.13",
     "angular-tslint-rules": "^1.20.4",
     "chalk": "^4.1.0",
     "chrome-launcher": "^0.13.4",
@@ -122,8 +122,8 @@
     "rimraf": "^3.0.2",
     "shelljs": "^0.8.4",
     "static-server": "^2.2.1",
-    "ts-loader": "^8.0.11",
-    "ts-node": "~9.1.0",
+    "ts-loader": "^8.0.12",
+    "ts-node": "~9.1.1",
     "tslint": "~6.1.3",
     "typescript": "~4.0.5"
   }

projects/wvr-elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wvr/elements",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "Collection of angular components for Weaver's Custom Web Component UI",
   "author": "Texas A&M University Libraries",
   "private": false,

projects/wvr-elements/src/lib/core/wvr-core.module.ts

@@ -4,6 +4,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, Injector, NgModule, Optional, SkipSelf } from '
 import { createCustomElement } from '@angular/elements';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
+import { InlineSVGModule } from 'ng-inline-svg';
 import { WvrAlertComponent } from '../wvr-alert/wvr-alert.component';
 import { WvrButtonComponent } from '../wvr-button/wvr-button.component';
 import { WvrCardComponent } from '../wvr-card/wvr-card.component';
@@ -80,6 +81,10 @@ const MODULES = [
     ThemeEffects
   ]),
   HttpClientModule,
+  InlineSVGModule.forRoot({
+    clientOnly: true,
+    bypassHttpClientInterceptorChain: true
+  }),
   StoreModule.forRoot(ROOT_REDUCER, { metaReducers })
 ];
 

projects/wvr-elements/src/lib/shared/wvr-shared.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { LazyLoadImageDirective, LazyLoadImageModule } from 'ng-lazyload-image';
+import { InlineSVGModule } from 'ng-inline-svg';
 import { WvrAlertComponent } from '../wvr-alert/wvr-alert.component';
 import { WvrButtonComponent } from '../wvr-button/wvr-button.component';
 import { WvrCardComponent } from '../wvr-card/wvr-card.component';
@@ -55,12 +55,12 @@ export const WVR_PIPES = [
 @NgModule({
   imports: [
     CommonModule,
-    LazyLoadImageModule,
+    InlineSVGModule,
     NgbDropdownModule
   ],
   exports: [
     CommonModule,
-    LazyLoadImageDirective,
+    InlineSVGModule,
     ...WVR_COMPONENTS,
     ...WVR_PIPES
   ],

projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts

@@ -2,7 +2,6 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
-import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrAlertComponent } from './wvr-alert.component';
 
@@ -30,8 +29,7 @@ describe('WvrAlertComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        LazyLoadImageModule
+        BrowserAnimationsModule
       ],
       providers: [
         {

projects/wvr-elements/src/lib/wvr-button/wvr-button.component.spec.ts

@@ -2,7 +2,6 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
-import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrButtonComponent } from './wvr-button.component';
 
@@ -32,8 +31,7 @@ describe('WvrButtonComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        LazyLoadImageModule
+        BrowserAnimationsModule
       ],
       providers: [
         {

projects/wvr-elements/src/lib/wvr-card/wvr-card.component.html

@@ -34,7 +34,7 @@ <h5 class="card-title" [ngClass]="{'wvr-hidden': !hasCardTitle}">
 <!-- cardImgSrc -->
 <ng-template #cardImg>
   <div class="card-img" [ngClass]="{'wvr-hidden': !hasCardImg}">
-    <img alt="Card Image Cap" class="card-img-top" [lazyLoad]="imgSrc" />
+    <img alt="Card Image Cap" class="card-img-top" [src]="imgSrc" />
   </div>
 </ng-template>
 

projects/wvr-elements/src/lib/wvr-card/wvr-card.component.spec.ts

@@ -2,7 +2,6 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
-import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrCardComponent } from './wvr-card.component';
 
@@ -39,8 +38,7 @@ describe('WvrCardComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        LazyLoadImageModule
+        BrowserAnimationsModule
       ],
       declarations: [
         WvrCardHostComponent,

projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.spec.ts

@@ -2,7 +2,6 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
-import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrColorPreviewComponent } from './wvr-color-preview.component';
 
@@ -16,8 +15,7 @@ describe('ColorPreviewComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        LazyLoadImageModule
+        BrowserAnimationsModule
       ],
       providers: [
         {

projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.spec.ts

@@ -3,7 +3,6 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 import { provideMockStore } from '@ngrx/store/testing';
-import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrDropdownComponent } from './wvr-dropdown.component';
 
@@ -33,8 +32,7 @@ describe('WvrDropdownComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        LazyLoadImageModule
+        BrowserAnimationsModule
       ],
       providers: [
         {

projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.spec.ts

@@ -2,7 +2,6 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
-import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrFooterComponent } from './wvr-footer.component';
 
@@ -28,8 +27,7 @@ describe('WvrFooterComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        LazyLoadImageModule
+        BrowserAnimationsModule
       ],
       providers: [
         {

projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html

@@ -3,7 +3,7 @@
   <nav class="top-nav navbar navbar-expand-lg">
     <div class="container">
       <a class="navbar-brand d-flex" [href]="logoHref" [id]="logoId">
-        <img alt="Logo" class="logo-img d-inline-block align-top" [lazyLoad]='logoSrc' />
+        <img alt="Logo" class="logo-img d-inline-block align-top" [src]='logoSrc' />
         <span class="text-white align-self-center d-inline-block pl-1">{{logoText}}</span>
       </a>
       <div>

projects/wvr-elements/src/lib/wvr-header/wvr-header.component.spec.ts

@@ -2,7 +2,6 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
-import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { APP_CONFIG } from '../shared/config/app-config';
 import { testAppConfig } from '../shared/config/test-app-config';
 import { WvrHeaderComponent } from './wvr-header.component';
@@ -29,8 +28,7 @@ describe('WvrHeaderComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        LazyLoadImageModule
+        BrowserAnimationsModule
       ],
       providers: [
         {

projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.html

@@ -1,3 +1,9 @@
-<svg #animationRoot class="icon">
-  <use [attr.xlink:href]="iconSvgUrl"></use>
-</svg>
+<span #animationRoot class="icon" 
+  [inlineSVG]="iconSvgUrl"
+  [cacheSVG]="true"
+  [setSVGAttributes]="{
+    width: '100%',
+    height: '100%'
+  }"
+>
+</span>

projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.scss

@@ -7,7 +7,7 @@
   --wvr-icon-color: inherit;
   --wvr-icon-size: inherit;
 
-  svg.icon {
+  span.icon {
     display: inline-block;
     color: var(--wvr-icon-color);
     width: var(--wvr-icon-size);

projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.spec.ts

@@ -4,7 +4,6 @@ import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/t
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule } from '@ngrx/store';
 import { provideMockStore } from '@ngrx/store/testing';
-import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { metaReducers, ROOT_REDUCER } from '../core/store';
 import { APP_CONFIG } from '../shared/config/app-config';
 import { testAppConfig } from '../shared/config/test-app-config';
@@ -34,7 +33,6 @@ describe('WvrIconComponent', () => {
       imports: [
         HttpClientTestingModule,
         BrowserAnimationsModule,
-        LazyLoadImageModule,
         StoreModule.forRoot(ROOT_REDUCER, { metaReducers })
       ],
       providers: [

projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.spec.ts

@@ -2,7 +2,6 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
-import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrItWorksComponent } from './wvr-it-works.component';
 
@@ -16,8 +15,7 @@ describe('WvrItWorksComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        LazyLoadImageModule
+        BrowserAnimationsModule
       ],
       declarations: [WvrItWorksComponent],
       providers: [

projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.spec.ts

@@ -2,7 +2,6 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
-import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { APP_CONFIG, testAppConfig } from '../../shared/config';
 import { WvrListItemComponent } from './wvr-list-item.component';
 
@@ -16,8 +15,7 @@ describe('WvrListItemComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        LazyLoadImageModule
+        BrowserAnimationsModule
       ],
       declarations: [WvrListItemComponent],
       providers: [

projects/wvr-elements/src/lib/wvr-list/wvr-list.component.spec.ts

@@ -2,7 +2,6 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
-import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrListComponent } from './wvr-list.component';
 
@@ -16,8 +15,7 @@ describe('WvrListComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        LazyLoadImageModule
+        BrowserAnimationsModule
       ],
       declarations: [WvrListComponent],
       providers: [

projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest-entry/wvr-manifest-entry.component.spec.ts

@@ -2,7 +2,6 @@ import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
-import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { APP_CONFIG, testAppConfig } from '../../shared/config';
 import { WvrManifestComponent } from '../wvr-manifest.component';
 import { WvrManifestEntryComponent } from './wvr-manifest-entry.component';
@@ -32,8 +31,7 @@ describe('WvrManifestEntryComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        LazyLoadImageModule
+        BrowserAnimationsModule
       ],
       declarations: [ WvrManifestTestComponent, WvrManifestComponent, WvrManifestEntryComponent ],
       providers: [