Merge pull request #381 from TAMULib/sprint22-staging

Sprint22 staging
TAMULib · Nov 2, 2021 · 6846d7c · 6846d7c
2 parents 65ff4d1 + 1c6e7a1
commit 6846d7c
Show file tree

Hide file tree

Showing 11 changed files with 127 additions and 10 deletions.
diff --git a/angular.json b/angular.json
@@ -73,8 +73,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "4.5mb",
-                  "maximumError": "5.0mb"
+                  "maximumWarning": "4.8mb",
+                  "maximumError": "5.5mb"
                 }
               ],
               "outputHashing": "none"

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/TAMULib/tamu-library-components.git"
   },
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0",
   "private": false,
   "license": "MIT",
   "config": {
@@ -67,9 +67,10 @@
     "@ngrx/entity": "^12.4.0",
     "@ngrx/store": "^12.4.0",
     "@ngrx/store-devtools": "^12.4.0",
+    "@stomp/stompjs": "^6.1.2",
     "@tinymce/tinymce-angular": "^4.2.4",
     "@ungap/custom-elements": "^1.0.0",
-    "@wvr/elements": "2.0.0-rc.4",
+    "@wvr/elements": "2.0.0",
     "bootstrap": "^4.6.0",
     "css-element-queries": "^1.2.3",
     "handlebars": "^4.7.7",
@@ -79,6 +80,7 @@
     "ng-lazyload-image": "^9.1.0",
     "ngx-build-plus": "^12.2.0",
     "rxjs": "~6.6.7",
+    "sockjs-client": "^1.5.2",
     "tinymce": "^5.9.2",
     "tslib": "^2.3.1",
     "web-animations-js": "^2.3.2",

diff --git a/projects/tl-elements/package.json b/projects/tl-elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wvr/tl-elements",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0",
   "description": "Collection of angular components for TAMU's Custom Web Component UI",
   "author": "Texas A&M University Libraries",
   "private": false,
@@ -27,7 +27,7 @@
     "@angular/common": "^12.2.7",
     "@angular/core": "^12.2.7",
     "@tinymce/tinymce-angular": "^4.2.1",
-    "@wvr/elements": "2.0.0-rc.4",
+    "@wvr/elements": "next",
     "ng-inline-svg": "^12.1.0"
   }
 }
diff --git a/projects/tl-elements/src/lib/tl-card/tl-card.component.html b/projects/tl-elements/src/lib/tl-card/tl-card.component.html
@@ -1,3 +1,3 @@
-<wvr-card-component [themeVariant]="themeVariant" [panelFormat]="panelFormat" [selectorPrefix]="'tl'">
+<wvr-card-component [themeVariant]="themeVariant" [panelFormat]="panelFormat" [selectorPrefix]="'tl'" [collapseMethod]="collapseMethod" [startCollapsed]="startCollapsed" [collapsed]="collapsed">
   <ng-content select="template" ngProjectAs="template"></ng-content>
 </wvr-card-component>
diff --git a/projects/tl-elements/src/lib/tl-card/tl-card.component.ts b/projects/tl-elements/src/lib/tl-card/tl-card.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Injector, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Injector, Input } from '@angular/core';
 import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 @Component({
@@ -15,6 +15,15 @@ export class TlCardComponent extends TamuAbstractBaseComponent {
   /** Used to describe the format of card. */
   @Input() panelFormat: 'solid' | 'outlined' | 'mixed';
 
+ /** Designate how to expand/collapse. */
+  @Input() collapseMethod: 'click' | 'none';
+
+  /** Designate the initial expanded/collapsed state. */
+  @Input() startCollapsed: boolean;
+
+  /** Designate the actual expanded/collapsed state. */
+  @Input() collapsed: 'true' | 'false';
+
   // tslint:disable-next-line:unnecessary-constructor
   constructor(injector: Injector) {
     super(injector);

diff --git a/projects/tl-elements/src/lib/tl-card/tl-card.component.ud-examples.html b/projects/tl-elements/src/lib/tl-card/tl-card.component.ud-examples.html
@@ -69,3 +69,25 @@
     </tl-card>
   </snippet>
 </example>
+
+<example name="Collapsible TL Card Panel">
+  <desciption>
+    The <code>tl-card</code> component implemented as collapsible and is collapsed by default.
+  </desciption>
+  <snippet>
+    <tl-card text-center collapse-method="click" start-collapsed="true" collapsed="true">
+      <template card-header>
+        <wvre-text value="Collapsible Card Header"></wvre-text>
+      </template>
+      <template card-title>
+        <wvre-text value="Collapsible Card Title"></wvre-text>
+      </template>
+      <template card-text>
+        <wvre-text value="This is a basic card body"></wvre-text>
+      </template>
+      <template card-footer>
+        <wvre-text value="Collapsible Card Footer"></wvre-text>
+      </template>
+    </tl-card>
+  </snippet>
+</example>
diff --git a/projects/tl-elements/src/lib/tl-mega-menu/tl-mega-menu.component.scss b/projects/tl-elements/src/lib/tl-mega-menu/tl-mega-menu.component.scss
@@ -16,6 +16,10 @@
 
   wvr-dropdown-component {
     ::ng-deep {
+      @import "~@wvr/elements/styles/variables";
+      @import "~bootstrap/scss/bootstrap";
+      @import "~@wvr/elements/styles/mixins";
+      @import "~@wvr/elements/styles/overrides";
       .wvr-dropdown .dropdown {
         .btn.btn-link.dropdown-toggle,
         .btn.btn-link:not(:disabled):not(.disabled).active,
@@ -199,5 +203,4 @@
       }
     }
   }
-
 }
diff --git a/projects/tl-elements/src/lib/tl-tabs/tl-tabs.component.scss b/projects/tl-elements/src/lib/tl-tabs/tl-tabs.component.scss
@@ -0,0 +1,59 @@
+@import '~@wvr/elements/styles/variables';
+
+:host {
+
+  & ::ng-deep wvr-tabs-component .nav-tabs .nav-item {
+    .nav-link {
+      border-width: 5px 1px 1px 1px;
+      border-radius: 0px;
+    }
+
+    .nav-link:not(.active) {
+      border-color: var(--secondaryNeutral);
+      border-bottom-color: transparent;
+    }
+
+    .nav-link.active,
+    .nav-link:not(.active):hover {
+      border-color: var(--primary);
+      border-bottom-color: transparent;
+    }
+  }
+
+  @each $color, $value in $theme-colors {
+    &:is([inactive-tab-theme="#{$color}"]) ::ng-deep wvr-tabs-component .nav-tabs .nav-item {
+      .nav-link:not(.active):is([inactive-tab-theme=""]),
+      .nav-link:not(.active):is([inactive-tab-theme=""]):active,
+      .nav-link:not(.active):is([inactive-tab-theme=""]):focus,
+      .nav-link:not(.active):is([inactive-tab-theme=""]):hover {
+        border-color: var(--#{$color}) !important;
+        border-bottom-color: transparent !important;
+      }
+    }
+
+    &:is([active-tab-theme="#{$color}"]) ::ng-deep wvr-tabs-component .nav-tabs .nav-item {
+      .nav-link.active:is([active-tab-theme=""]),
+      .nav-link.active:is([active-tab-theme=""]):active,
+      .nav-link.active:is([active-tab-theme=""]):focus,
+      .nav-link.active:is([active-tab-theme=""]):hover {
+        border-color: var(--#{$color}) !important;
+        border-bottom-color: transparent !important;
+      }
+    }
+
+    & ::ng-deep wvr-tabs-component .nav-tabs .nav-item {
+      .nav-link:is([inactive-tab-theme="#{$color}"]):not(.active),
+      .nav-link:is([inactive-tab-theme="#{$color}"]):not(.active):active,
+      .nav-link:is([inactive-tab-theme="#{$color}"]):not(.active):focus,
+      .nav-link:is([inactive-tab-theme="#{$color}"]):not(.active):hover,
+      .nav-link.active:is([active-tab-theme="#{$color}"]),
+      .nav-link.active:is([active-tab-theme="#{$color}"]):active,
+      .nav-link.active:is([active-tab-theme="#{$color}"]):focus,
+      .nav-link.active:is([active-tab-theme="#{$color}"]):hover {
+        border-color: var(--#{$color}) !important;
+        border-bottom-color: transparent !important;
+      }
+    }
+  }
+
+}
diff --git a/projects/tl-elements/src/lib/tl-wysiwyg/tl-wysiwyg.component.html b/projects/tl-elements/src/lib/tl-wysiwyg/tl-wysiwyg.component.html
@@ -1,3 +1,3 @@
 <tl-wysiwyg-wrapper #animationRoot>
-  <wvr-wysiwyg-component [skin]="skin" [initialValue]="initialValue" [emitSaveEvent]="emitEvent"></wvr-wysiwyg-component>
+  <wvr-wysiwyg-component [skin]="skin" [initialValue]="initialValue" [emitSaveEvent]="emitEvent" [toolbar]="toolbar" [height]="height"></wvr-wysiwyg-component>
 </tl-wysiwyg-wrapper>
diff --git a/projects/tl-elements/src/lib/tl-wysiwyg/tl-wysiwyg.component.ts b/projects/tl-elements/src/lib/tl-wysiwyg/tl-wysiwyg.component.ts
@@ -12,8 +12,15 @@ export class TlWysiwygComponent extends TamuAbstractBaseComponent {
 
   @Input() emitEvent = '';
 
+  /** Provide customization of WYSIWYG skin theme. */
   skin = 'oxide';
 
+  /** Provide customization of WYSIWYG toolbar buttons. */
+  toolbar = 'undo redo | bold italic removeformat | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | help cancel save';
+
+  /** Provide custom height. */
+  @Input() height = '500';
+
   // tslint:disable-next-line:unnecessary-constructor
   constructor(injector: Injector) {
     super(injector);

diff --git a/src/index.html b/src/index.html
@@ -853,6 +853,21 @@
       </template>
     </tl-card>
 
+    <br>
+    <tl-card text-center collapse-method="click" start-collapsed="true">
+      <template card-header>
+        <wvre-text value="Collapsible Card Header"></wvre-text>
+      </template>
+      <template card-title>
+        <wvre-text value="Collapsible Card Title"></wvre-text>
+      </template>
+      <template card-text>
+        <wvre-text value="With supporting text below as a natural lead-in to additional content."></wvre-text>
+      </template>
+      <template card-footer>
+        <wvre-text value="Collapsible Card Footer"></wvre-text>
+      </template>
+    </tl-card>
   </div>
 
   <hr><br><br><br>