V1.1.0

package.json

@@ -40,9 +40,11 @@
     "@angular/platform-browser-dynamic": "~7.2.15",
     "@angular/router": "~7.2.15",
     "@tangoe/gosheets": "^1.0.0",
+    "classlist.js": "^1.1.20150312",
     "core-js": "^2.5.4",
     "npm": "^6.10.1",
     "rxjs": "~6.5.2",
+    "web-animations-js": "^2.3.2",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {

projects/go-lib/src/lib/animations/_configs.ts

@@ -0,0 +1,2 @@
+export const timing = '.5s ';
+export const easing = 'cubic-bezier(.25, .8, .25, 1)';

projects/go-lib/src/lib/animations/fade.animation.ts

@@ -6,7 +6,7 @@ import {
   trigger
 } from '@angular/animations';
 
-const timing = '.5s cubic-bezier(.25, .8, .25, 1)';
+import { easing, timing } from './_configs';
 
 export const fadeAnimation = trigger('fade', [
   state('in', style({
@@ -18,7 +18,7 @@ export const fadeAnimation = trigger('fade', [
     visibility: 'hidden'
   })),
   transition('in <=> out', [
-    animate(timing)
+    animate(timing + easing)
   ])
 ]);
 
@@ -27,13 +27,13 @@ export const fadeTemplateAnimation = trigger('fadeTemplate', [
     style({
       opacity: 0
     }),
-    animate(timing, style({
+    animate(timing + easing, style({
       opacity: 1
     }))
   ]),
   transition(':leave', [
-    animate(timing, style({
+    animate(timing + easing, style({
       opacity: 0
     }))
   ])
-])
+]);

projects/go-lib/src/lib/animations/off-canvas.animation.ts

@@ -6,6 +6,8 @@ import {
   trigger
 } from '@angular/animations';
 
+import { easing, timing } from './_configs';
+
 export const offCanvasAnimation = trigger('offCanvas', [
   state('slideIn', style({
     transform: 'translateX(-300px)'
@@ -15,6 +17,6 @@ export const offCanvasAnimation = trigger('offCanvas', [
     visibility: 'hidden'
   })),
   transition('slideIn <=> slideOut', [
-    animate('.5s cubic-bezier(.25, .8, .25, 1)')
+    animate(timing + easing)
   ])
 ]);

projects/go-lib/src/lib/animations/route.animation.ts

@@ -0,0 +1,37 @@
+import {
+  animate,
+  query,
+  style,
+  transition,
+  trigger
+} from '@angular/animations';
+
+import { easing, timing } from './_configs';
+
+export const routerAnimation =
+  trigger('routerAnimation', [
+    transition('* <=> *', [
+      query(':enter',
+        [
+          style({ opacity: 0 })
+        ],
+        { optional: true }
+      ),
+
+      query(':leave',
+        [
+          style({ opacity: 1 }),
+          animate(timing + easing, style({ opacity: 0, transform: 'scale(0.95)' }))
+        ],
+        { optional: true }
+      ),
+
+      query(':enter',
+        [
+          style({ opacity: 0, transform: 'scale(0.95)' }),
+          animate(timing + easing, style({ opacity: 1, transform: 'scale(1)' }))
+        ],
+        { optional: true }
+      )
+    ])
+  ]);

projects/go-lib/src/lib/animations/search.animation.ts

@@ -0,0 +1,59 @@
+import {
+  animate,
+  style,
+  transition,
+  trigger
+} from '@angular/animations';
+
+import { easing, timing } from './_configs';
+
+export const searchLoaderAnim = trigger('searchLoaderAnim', [
+  transition(':enter', [
+    style({
+      height: 0,
+      opacity: 0,
+      padding: 0
+    }),
+    animate(timing + ' ' + easing, style({
+      height: '*',
+      opacity: 1,
+      padding: '2rem'
+    }))
+  ]),
+  transition(':leave', [
+    style({
+      padding: '2rem'
+    }),
+    animate(timing + ' ' + easing, style({
+      height: 0,
+      opacity: 0,
+      padding: 0
+    }))
+  ])
+]);
+
+export const searchResultsAnim = trigger('searchResultsAnim', [
+  transition(':enter', [
+    style({
+      height: 0,
+      margin: 0,
+      opacity: 0
+    }),
+    animate(timing + ' .25s ' + easing, style({
+      height: '*',
+      margin: '1rem 0 0.5rem 0',
+      opacity: 1
+    }))
+  ]),
+  transition(':leave', [
+    style({
+      overflowY: 'hidden',
+      margin: '1rem 0 0.5rem 0'
+    }),
+    animate(timing + ' ' + easing, style({
+      height: 0,
+      margin: 0,
+      opacity: 0
+    }))
+  ])
+]);

projects/go-lib/src/lib/animations/toasts.ts

@@ -5,24 +5,24 @@ import {
   trigger
 } from '@angular/animations';
 
-const timing = '.5s cubic-bezier(.25, .8, .25, 1)';
+import { easing, timing } from './_configs';
 
 export const toastAnimation = trigger('toastAnimation', [
   transition(':enter', [
     style({
       height: 0,
       opacity: 0
     }),
-    animate(timing, style({
+    animate(timing + easing, style({
       height: '*',
       opacity: 1
     }))
   ]),
   transition(':leave', [
-    animate(timing, style({
+    animate(timing + easing, style({
       paddingTop: 0,
       opacity: 0,
       height: 0
     }))
   ])
-]);
+]);

projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.scss

@@ -121,6 +121,33 @@
   }
 }
 
+.go-action-sheet__go-accordion {
+  .go-accordion {
+    border: none;
+  }
+
+  .go-accordion-panel__title-bar {
+    font-size: 1rem;
+    padding: 1rem 0;
+  }
+
+  .go-accordion-panel__control-icon {
+    font-size: 1rem;
+  }
+
+  go-accordion-panel:not(:first-of-type) .go-accordion-panel__title-bar,
+  go-accordion-panel:last-of-type .go-accordion-panel__title-bar {
+    border-top: none;
+  }
+
+  .go-accordion-panel {
+    &:first-of-type::before,
+    .go-accordion-panel__title-bar {
+      border-radius: 0;
+    }
+  }
+}
+
 go-accordion-panel {
   &:last-of-type {
     .go-accordion-panel::before {
@@ -201,7 +228,11 @@ go-accordion-panel {
 
 // ----- Utility Classes
 .go-accordion--slim {
-  .go-accordion-panel__title-bar {
+  .go-accordion-panel__title-icon {
     font-size: 1rem;
   }
+
+  &:hover {
+    background: $theme-light-bg-hover;
+  }
 }

projects/go-lib/src/lib/components/go-accordion/go-accordion.component.html

@@ -1,3 +1,3 @@
-<div class="go-accordion" [ngClass]="[activeTheme]">
+<div [ngClass]="accordionClasses()">
   <ng-content></ng-content>
 </div>

projects/go-lib/src/lib/components/go-accordion/go-accordion.component.ts

@@ -11,6 +11,7 @@ export class GoAccordionComponent implements OnInit, AfterContentInit {
   @Input() expandAll: boolean = false;
   @Input() multiExpand: boolean = false;
   @Input() showIcons: boolean = false;
+  @Input() slim: boolean = false;
   @Input() theme: string = 'light';
 
   activeTheme: string;
@@ -20,7 +21,6 @@ export class GoAccordionComponent implements OnInit, AfterContentInit {
   constructor() { }
 
   ngOnInit() {
-    this.setActiveTheme();
     this.multiExpand = this.expandAll || this.multiExpand;
   }
 
@@ -57,8 +57,11 @@ export class GoAccordionComponent implements OnInit, AfterContentInit {
     panel.expanded = false;
   }
 
-  setActiveTheme() {
-    this.activeTheme = 'go-accordion--theme-' + this.theme;
+  accordionClasses(): object {
+    return {
+      'go-accordion--theme-light': this.theme === 'light' && !this.slim,
+      'go-accordion--theme-dark': this.theme === 'dark' && !this.slim,
+      'go-accordion--slim': this.slim
+    }
   }
-
 }

projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.html

@@ -0,0 +1,15 @@
+<div class="go-action-sheet">
+  <div class="go-action-sheet__button" (click)="triggerAS()">
+    <ng-content select="[go-action-sheet__button]"></ng-content>
+  </div>
+
+  <div class="go-action-sheet__content-container"
+       [ngClass]="containerClass()"
+       aria-expanded="true">
+    <div class="go-action-sheet__content">
+      <div class="go-action-sheet__scroll-container">
+        <ng-content select="[go-action-sheet-content]"></ng-content>
+      </div>
+    </div>
+  </div>
+</div>

projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss

@@ -0,0 +1,66 @@
+@import '~@tangoe/gosheets/base/_variables';
+@import '~@tangoe/gosheets/base/_mixins';
+
+.go-action-sheet {
+  position: relative;
+}
+
+go-action-sheet-button {
+  display: flex;
+}
+
+.go-action-sheet__scroll-container {
+  max-height: 375px;
+  overflow: auto;
+}
+
+.go-action-sheet__content {
+  border-radius: $global-radius;
+  overflow: hidden;
+}
+
+.go-action-sheet__content-container {
+  @include transition;
+
+  background: $theme-light-bg;
+  border: 1px solid $theme-light-border;
+  border-radius: $global-radius;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  left: 50%;
+  opacity: 0;
+  position: absolute;
+  top: calc(100% + 50px);
+  transform: translateX(-50%);
+  visibility: hidden;
+  z-index: 300;
+
+  &::before {
+    @include transition;
+
+    background: $theme-light-bg;
+    border: 1px solid $theme-light-border;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+    content: " ";
+    height: 15px;
+    left: calc(50% - 7.5px);
+    pointer-events: none;
+    position: absolute;
+    top: -7.5px;
+    transform: rotate(45deg);
+    width: 15px;
+  }
+
+  &.go-action-sheet__content-container--active {
+    opacity: 1;
+    top: calc(100% + 1rem);
+    visibility: visible;
+  }
+}
+
+.go-action-sheet__content-container--shift-left {
+  transform: translateX(-90%);
+
+  &::before {
+    left: calc(90% - 7.5px);
+  }
+}