feat(gallery): gallery component

*ambient backdrop,
* refactoring
* bugfixes
---
updated project site

README.md

@@ -25,4 +25,4 @@ This package is under active construction.
 
 ## Components
 1. <a href="https://github.com/garygrossgarten/component-library/tree/master/projects/ionic-material-loading"> Loading</a>
-1. <a href="https://github.com/garygrossgarten/component-library/tree/master/projects/ionic-material-dialog"> Dialogs || Alerts || Sheets</a>
+1. <a href="https://github.com/garygrossgarten/component-library/tree/master/projects/ionic-material-dialog"> Dialogs || Alerts || Sheets</a>

package.json

@@ -48,6 +48,7 @@
     "@angular/pwa": "0.13.6",
     "@angular/router": "7.2.9",
     "@angular/service-worker": "7.2.9",
+    "@ctrl/ngx-github-buttons": "^2.1.1",
     "@ionic-native/core": "5.2.0",
     "@ionic-native/google-maps": "5.0.0-beta.24",
     "@ionic-native/splash-screen": "5.2.0",
@@ -133,4 +134,4 @@
   "platforms": [
     "android"
   ]
-}
+}

projects/core/src/lib/bottom-sheet/bottom-sheet.component.ts

@@ -42,8 +42,7 @@ export class FivBottomSheet implements AfterViewInit, OnChanges {
     private _element: ElementRef,
     private _renderer: Renderer2,
     private _domCtrl: DomController,
-    private _platform: Platform,
-    private sanitizer: DomSanitizer
+    private _platform: Platform
   ) { }
 
 

projects/core/src/lib/collapsable-menu/collapsable-menu.directive.ts

@@ -11,6 +11,10 @@ export class FivCollapsableMenu {
   collapsed = false;
   hovering = false;
   @Input() hoverMenu = true;
+  @Input() width = 64;
+  @Input() minWidth = 270;
+  @Input() maxWidth = this.platform.width() * 0.28;
+
 
 
   constructor(private sanitizer: DomSanitizer, private platform: Platform) { }
@@ -21,9 +25,12 @@ export class FivCollapsableMenu {
     if (this.collapsed && (this.platform.is('tablet') || this.platform.is('electron') || this.platform.is('desktop'))) {
 
       return this.sanitizer
-        .bypassSecurityTrustStyle('min-width: 64px; max-width: 64px; --border: 0; transition: all cubic-bezier(.55,0,.1,1) 200ms;');
+        // tslint:disable-next-line:max-line-length
+        .bypassSecurityTrustStyle(`min-width: ${this.width}px; max-width: ${this.width}px; --border: 0; transition: all cubic-bezier(.55,0,.1,1) 200ms;`);
     } else {
-      return this.sanitizer.bypassSecurityTrustStyle('--border: 0; transition: all cubic-bezier(.55,0,.1,1)  250ms;');
+      return this.sanitizer
+        // tslint:disable-next-line:max-line-length
+        .bypassSecurityTrustStyle(`min-width: ${this.minWidth}px; max-width: ${this.maxWidth}px; --border: 0; transition: all cubic-bezier(.55,0,.1,1) 200ms;`);
     }
   }