Merge pull request #365 from TAMULib/sprint21-staging

Sprint21 staging

.gitignore

@@ -8,7 +8,7 @@
 /bazel-out
 
 # dependencies
-/node_modules
+node_modules
 
 # profiling files
 chrome-profiler-events*.json
@@ -58,5 +58,6 @@ src/config.json
 src/config-template.json
 src/assets/icons/*
 !src/assets/icons/tl
+!src/assets/icons/bootstrap
 
 .wvr-ud/static-assets/styles.css

.wvr-ud/config.json

@@ -11,6 +11,7 @@
     "dist/bundle/tl-components.js"
   ],
   "additionalAssets": [
-    "src/assets/**/*"
+    "src/assets/**/*",
+    "dist/bundle/styles.css"
   ]
 }

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.0.0] - 10-08-21
+### Resolves
+
+- tl- and wvre- Tabs should allow form elements. (#321)
+- Refactor components for consistency. (#325)
+- Fix npm link scripts between weaver-components and tamu-library-components. (#329)
+- The TAMUWYSIWYGComponent should be extended to support initial content and saving of the data. (#335)
+- Tamu Components should support the TL Dropdown within the TL Header Bottom Nav, with mobile support. (#336)
+- TAMU Header should support the suppression of the top navigation links, both complete suppression and discriminate. (#337)
+- Tamu Library Components should extract CSS to avoid the removal of deprecated style strategy. (#339)
+- TL Components should utilize the latest version of Weaver Content projection. (#348)
+- TL-Header and TL-MegaMenu should not be circularly referent. (#352)
+- TL-Components should compile using the Ivy partial compiler option. (#353)
+
 ## [1.11.0] - 06-04-21
 ### Resolves
 
@@ -11,7 +25,7 @@
 ### Resolves
 
 - ngRX actions not firing on the tl-wysiwyg component. (#285)
-- Tl Header Should Utilize the weaver default variant instead of button.. (#300)
+- Tl Header Should Utilize the weaver default variant instead of button. (#300)
 - Tl Footer Should Utilize the weaver default variant instead of button. (#301)
 - TL Header should use brand-secondary-neutral for the bottom nav background. (#306)
 
@@ -22,6 +36,7 @@
 
 ## [1.9.0] - 04-23-21
 ### Resolves
+
 - TAMU Library Component should expose the weaver modal component. (#270)
 - tl-modal should support the toggling of the modal launch button. (#290)
 - TL Components should offer a tl-themes components.(#281)
@@ -32,6 +47,7 @@
 
 ## [1.8.0] - 03-31-21
 ### Resolves
+
 - The tl-header display not accurate on iPad. (#256)
 - Tamu Library Components should expose the Weaver WYSIWYG component. (#271)
 - Links in the information for dropdown are causing 404s. (#273)

angular.json

@@ -55,9 +55,17 @@
                 }
               ],
               "buildOptimizer": true,
-              "optimization": true,
+              "optimization": {
+                "scripts": true,
+                "fonts": {
+                  "inline": true
+                },
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                }
+              },
               "sourceMap": false,
-              "extractCss": false,
               "extractLicenses": true,
               "namedChunks": false,
               "commonChunk": false,

package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/TAMULib/tamu-library-components.git"
   },
-  "version": "1.11.1-rc.0",
+  "version": "2.0.0-rc.1",
   "private": false,
   "license": "MIT",
   "config": {
@@ -23,6 +23,8 @@
     "build:docs-setup": "node scripts/build-tl-components-docs.js",
     "build:docs-usage": "wvr-ud",
     "build:docker": "node scripts/build-docker.js",
+    "build:link": "npm run build && node scripts/link-self",
+    "build:link-wvr": "node scripts/link-wvr.js",
     "build:static": "npm run build:static-docs && npm run build:static-reports",
     "build:static-setup": "node scripts/build-tl-components-static.js",
     "build:static-docs": "npm run test:audit && npm run build:static-setup && npm run build:docs-setup && npm run build:docs-development && npm run build:docs-usage",
@@ -34,7 +36,6 @@
     "publish:docker": "node scripts/docker-push.js",
     "publish:npm": "npm run build && node scripts/build-publish.js $1",
     "publish:npm-next": "npm run publish:npm next",
-    "link": "npm link @wvr/elements",
     "lint": "ng lint",
     "ng": "ng",
     "start": "node ./scripts/build-tl-components-configuration.js defaults-dev-overrides.env && ng serve --port 3000",
@@ -51,74 +52,74 @@
     "test:ci": "npm run test:audit && npm run test:coverage"
   },
   "dependencies": {
-    "@angular/animations": "^12.0.2",
-    "@angular/common": "^12.0.2",
-    "@angular/compiler": "^12.0.2",
-    "@angular/core": "^12.0.2",
-    "@angular/elements": "^12.0.2",
-    "@angular/forms": "^12.0.2",
-    "@angular/localize": "^12.0.2",
-    "@angular/platform-browser": "^12.0.2",
-    "@angular/platform-browser-dynamic": "^12.0.2",
-    "@angular/router": "^12.0.2",
-    "@ng-bootstrap/ng-bootstrap": "^9.1.1",
-    "@ngrx/effects": "^12.0.0",
-    "@ngrx/entity": "^12.0.0",
-    "@ngrx/store": "^12.0.0",
-    "@ngrx/store-devtools": "^12.0.0",
-    "@tinymce/tinymce-angular": "^4.2.3",
+    "@angular/animations": "^12.2.7",
+    "@angular/common": "^12.2.7",
+    "@angular/compiler": "^12.2.7",
+    "@angular/core": "^12.2.7",
+    "@angular/elements": "^12.2.7",
+    "@angular/forms": "^12.2.7",
+    "@angular/localize": "^12.2.7",
+    "@angular/platform-browser": "^12.2.7",
+    "@angular/platform-browser-dynamic": "^12.2.7",
+    "@angular/router": "^12.2.7",
+    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
+    "@ngrx/effects": "^12.4.0",
+    "@ngrx/entity": "^12.4.0",
+    "@ngrx/store": "^12.4.0",
+    "@ngrx/store-devtools": "^12.4.0",
+    "@tinymce/tinymce-angular": "^4.2.4",
     "@ungap/custom-elements": "^1.0.0",
-    "@wvr/elements": "^1.12.0-rc.4",
+    "@wvr/elements": "2.0.0-rc.4",
     "bootstrap": "^4.6.0",
     "css-element-queries": "^1.2.3",
     "handlebars": "^4.7.7",
-    "jsdom": "^16.6.0",
+    "jsdom": "^17.0.0",
     "karma-viewport": "^1.0.8",
     "ng-inline-svg": "^13.0.0",
     "ng-lazyload-image": "^9.1.0",
-    "ngx-build-plus": "^12.0.1",
+    "ngx-build-plus": "^12.2.0",
     "rxjs": "~6.6.7",
-    "tinymce": "^5.8.1",
-    "tslib": "^2.2.0",
+    "tinymce": "^5.9.2",
+    "tslib": "^2.3.1",
     "web-animations-js": "^2.3.2",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.0.2",
-    "@angular-devkit/schematics": "^12.0.2",
-    "@angular/cli": "^12.0.2",
-    "@angular/compiler-cli": "^12.0.2",
-    "@angular/language-service": "^12.0.2",
-    "@compodoc/compodoc": "^1.1.11",
-    "@lhci/cli": "^0.7.2",
-    "@types/jasmine": "~3.7.6",
-    "@types/jasminewd2": "~2.0.9",
-    "@types/node": "^15.6.1",
+    "@angular-devkit/build-angular": "~12.2.7",
+    "@angular-devkit/schematics": "^12.2.7",
+    "@angular/cli": "^12.2.7",
+    "@angular/compiler-cli": "^12.2.7",
+    "@angular/language-service": "^12.2.7",
+    "@compodoc/compodoc": "^1.1.15",
+    "@lhci/cli": "^0.8.1",
+    "@types/jasmine": "~3.9.1",
+    "@types/jasminewd2": "~2.0.10",
+    "@types/node": "^16.9.6",
     "angular-tslint-rules": "^1.20.4",
     "codelyzer": "^6.0.2",
     "concat": "^1.0.3",
-    "console-stamp": "^3.0.2",
-    "coveralls": "^3.1.0",
+    "console-stamp": "^3.0.3",
+    "coveralls": "^3.1.1",
     "dotenv-override-true": "^6.2.2",
-    "glob": "^7.1.7",
-    "jasmine-core": "~3.7.1",
+    "glob": "^7.2.0",
+    "jasmine-core": "~3.9.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.2",
+    "karma": "~6.3.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "^2.0.3",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "^1.6.0",
+    "karma-jasmine-html-reporter": "^1.7.0",
     "karma-ng-html2js-preprocessor": "^1.0.0",
-    "lighthouse": "^7.5.0",
-    "lighthouse-badges": "^1.1.5",
-    "ng-packagr": "^12.0.2",
+    "lighthouse": "^8.5.1",
+    "lighthouse-badges": "^1.1.13",
+    "ng-packagr": "^12.2.2",
     "protractor": "~7.0.0",
     "rimraf": "^3.0.2",
     "shelljs": "^0.8.4",
     "static-server": "^2.2.1",
-    "ts-node": "~10.0.0",
+    "ts-node": "~10.2.1",
     "tslint": "~6.1.3",
-    "typescript": "~4.2.4"
+    "typescript": "~4.3.5"
   }
 }

projects/tl-elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wvr/tl-elements",
-  "version": "1.11.1-rc.0",
+  "version": "2.0.0-rc.1",
   "description": "Collection of angular components for TAMU's Custom Web Component UI",
   "author": "Texas A&M University Libraries",
   "private": false,
@@ -21,13 +21,13 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "tslib": "^2.0.0"
+    "tslib": "^2.3.1"
   },
   "peerDependencies": {
-    "@angular/common": "^11.2.11",
-    "@angular/core": "^11.2.11",
+    "@angular/common": "^12.2.7",
+    "@angular/core": "^12.2.7",
     "@tinymce/tinymce-angular": "^4.2.1",
-    "@wvr/elements": "^1.12.0-rc.3",
+    "@wvr/elements": "2.0.0-rc.4",
     "ng-inline-svg": "^12.1.0"
   }
 }

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

@@ -3,15 +3,17 @@ import { WvrColorPreviewComponent, WvrCoreModule, WvrElementDesc, WvrListCompone
 import { TlAlertComponent } from '../tl-alert/tl-alert.component';
 import { TlButtonComponent } from '../tl-button/tl-button.component';
 import { TlCardComponent } from '../tl-card/tl-card.component';
-import { TlDropDownComponent } from '../tl-drop-down/tl-drop-down.component';
-import { TamuFooterComponent } from '../tl-footer/tl-footer.component';
-import { TamuHeaderComponent } from '../tl-header/tl-header.component';
+import { TlDropDownComponent } from '../tl-dropdown/tl-dropdown.component';
+import { TlDropDownMenuSectionComponent } from '../tl-dropdown-menu/tl-dropdown-menu-section/tl-dropdown-menu-section.component';
+import { TlDropDownMenuComponent } from '../tl-dropdown-menu/tl-dropdown-menu.component';
+import { TlFooterComponent } from '../tl-footer/tl-footer.component';
+import { TlHeaderComponent } from '../tl-header/tl-header.component';
 import { TlIconComponent } from '../tl-icon/tl-icon.component';
-import { TamuItWorksComponent } from '../tl-it-works/tl-it-works.component';
+import { TlItWorksComponent } from '../tl-it-works/tl-it-works.component';
 import { TlMegaMenuSectionComponent } from '../tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component';
 import { TlMegaMenuComponent } from '../tl-mega-menu/tl-mega-menu.component';
 import { TlModalComponent } from '../tl-modal/tl-modal.component';
-import { TamuNavListComponent } from '../tl-nav-list/tl-nav-list.component';
+import { TlNavListComponent } from '../tl-nav-list/tl-nav-list.component';
 import { TlTabComponent } from '../tl-tabs/tl-tab/tl-tab.component';
 import { TlTabsComponent } from '../tl-tabs/tl-tabs.component';
 import { TlThemesComponent } from '../tl-themes/tl-themes.component';
@@ -32,15 +34,17 @@ export const TL_ELEMENTS: Array<WvrElementDesc> = [
   { component: TlAlertComponent, selector: 'tl-alert', lazy: true },
   { component: TlButtonComponent, selector: 'tl-button', lazy: true },
   { component: TlCardComponent, selector: 'tl-card', lazy: true },
-  { component: TlDropDownComponent, selector: 'tl-drop-down', lazy: true },
-  { component: TamuFooterComponent, selector: 'tl-footer', lazy: true },
-  { component: TamuHeaderComponent, selector: 'tl-header', lazy: true },
+  { component: TlDropDownComponent, selector: 'tl-dropdown', lazy: true },
+  { component: TlDropDownMenuSectionComponent, selector: 'tl-dropdown-menu-section', lazy: true },
+  { component: TlDropDownMenuComponent, selector: 'tl-dropdown-menu', lazy: true },
+  { component: TlFooterComponent, selector: 'tl-footer', lazy: true },
+  { component: TlHeaderComponent, selector: 'tl-header', lazy: true },
   { component: TlIconComponent, selector: 'tl-icon', lazy: true },
-  { component: TamuItWorksComponent, selector: 'tl-it-works', lazy: true },
+  { component: TlItWorksComponent, selector: 'tl-it-works', lazy: true },
   { component: TlMegaMenuComponent, selector: 'tl-mega-menu', lazy: true },
-  { component: TlModalComponent, selector: 'tl-modal', lazy: true },
   { component: TlMegaMenuSectionComponent, selector: 'tl-mega-menu-section', lazy: true },
-  { component: TamuNavListComponent, selector: 'tl-nav-list', lazy: true },
+  { component: TlModalComponent, selector: 'tl-modal', lazy: true },
+  { component: TlNavListComponent, selector: 'tl-nav-list', lazy: true },
   { component: TlTabsComponent, selector: 'tl-tabs', lazy: true },
   { component: TlTabComponent, selector: 'tl-tab', lazy: true },
   { component: TlThemesComponent, selector: 'tl-themes', lazy: false },

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

@@ -7,15 +7,17 @@ import { InlineSVGModule } from 'ng-inline-svg';
 import { TlAlertComponent } from '../tl-alert/tl-alert.component';
 import { TlButtonComponent } from '../tl-button/tl-button.component';
 import { TlCardComponent } from '../tl-card/tl-card.component';
-import { TlDropDownComponent } from '../tl-drop-down/tl-drop-down.component';
-import { TamuFooterComponent } from '../tl-footer/tl-footer.component';
-import { TamuHeaderComponent } from '../tl-header/tl-header.component';
+import { TlDropDownComponent } from '../tl-dropdown/tl-dropdown.component';
+import { TlDropDownMenuSectionComponent } from '../tl-dropdown-menu/tl-dropdown-menu-section/tl-dropdown-menu-section.component';
+import { TlDropDownMenuComponent } from '../tl-dropdown-menu/tl-dropdown-menu.component';
+import { TlFooterComponent } from '../tl-footer/tl-footer.component';
+import { TlHeaderComponent } from '../tl-header/tl-header.component';
 import { TlIconComponent } from '../tl-icon/tl-icon.component';
-import { TamuItWorksComponent } from '../tl-it-works/tl-it-works.component';
+import { TlItWorksComponent } from '../tl-it-works/tl-it-works.component';
 import { TlMegaMenuSectionComponent } from '../tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component';
 import { TlMegaMenuComponent } from '../tl-mega-menu/tl-mega-menu.component';
 import { TlModalComponent } from '../tl-modal/tl-modal.component';
-import { TamuNavListComponent } from '../tl-nav-list/tl-nav-list.component';
+import { TlNavListComponent } from '../tl-nav-list/tl-nav-list.component';
 import { TlTabComponent } from '../tl-tabs/tl-tab/tl-tab.component';
 import { TlTabsComponent } from '../tl-tabs/tl-tabs.component';
 import { TlThemesComponent } from '../tl-themes/tl-themes.component';
@@ -27,14 +29,16 @@ export const TL_COMPONENTS = [
   TlButtonComponent,
   TlCardComponent,
   TlDropDownComponent,
-  TamuFooterComponent,
-  TamuHeaderComponent,
-  TamuItWorksComponent,
+  TlDropDownMenuSectionComponent,
+  TlDropDownMenuComponent,
+  TlFooterComponent,
+  TlHeaderComponent,
+  TlItWorksComponent,
   TlIconComponent,
   TlMegaMenuComponent,
   TlMegaMenuSectionComponent,
   TlModalComponent,
-  TamuNavListComponent,
+  TlNavListComponent,
   TlTabsComponent,
   TlTabComponent,
   TlThemesComponent,

projects/tl-elements/src/lib/tl-alert/tl-alert.component.html

@@ -3,6 +3,5 @@
   [themeVariant]="themeVariant"
   [closeable]="closeable"
   [closeTimer]="closeTimer">
-  <ng-content select="wvre-text, wvr-text-component" ngProjectAs="wvre-text"></ng-content>
-  <ng-content select="tl-custom-alert" ngProjectAs="wvre-custom-alert"></ng-content>
+  <ng-content select="template" ngProjectAs="template"></ng-content>
 </wvr-alert-component>

projects/tl-elements/src/lib/tl-alert/tl-alert.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Injector, Input } from '@angular/core';
-import { TamuAbstractBaseComponent } from '../utility/tl-abstract-base.component';
+import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 @Component({
   selector: 'tl-alert-component',

projects/tl-elements/src/lib/tl-alert/tl-alert.component.ud-examples.html

@@ -3,10 +3,10 @@
     The basic <code>tl-alert</code> component with no customizations.
   </desciption>
   <snippet>
-    <tl-alert
-      alert-class="primary"
-      alert-type="basic">
+    <tl-alert alert-class="primary" alert-type="basic">
+      <template alert-content>
         <wvre-text value="A simple primary alert."></wvre-text>
+      </template>
     </tl-alert>
   </snippet>
 </example>

projects/tl-elements/src/lib/tl-button/tl-button.component.html

@@ -8,7 +8,7 @@
     [dispatchActionProps]="dispatchActionProps"
     [href]="href"
     [wvrBtnType]="wvrBtnType">
-    <ng-content select="wvre-text, wvr-text-component" ngProjectAs="wvre-btn-content"></ng-content>
+    <ng-content select="template[button-content]" ngProjectAs="template[button-content]"></ng-content>
   </wvr-button-component>
   <wvr-button-component
     *ngIf="href === ''"
@@ -18,6 +18,6 @@
     [dispatchAction]="dispatchAction"
     [dispatchActionProps]="dispatchActionProps"
     [wvrBtnType]="wvrBtnType">
-    <ng-content select="wvre-text, wvr-text-component" ngProjectAs="wvre-btn-content"></ng-content>
+    <ng-content select="template[button-content]" ngProjectAs="template[button-content]"></ng-content>
   </wvr-button-component>
 </tl-button-wrapper>