feat: add clip option

I am adding "clip" so that creating the bleeding edge on both sides of
the gallery is easier to do. Without it, one would have to configure
something like 3.2 items visible and that to me looks messy.

libs/gallery/src/lib/components/gallery/gallery.component.html

@@ -28,6 +28,7 @@
   [errorText]="errorText"
   [mouseGestures]="mouseGestures"
   [touchGestures]="touchGestures"
+  [clip]="clip"
   [counter]="counter"
   [counterOrientation]="counterOrientation"
   [visibleItems]="visibleItems"

libs/gallery/src/lib/components/gallery/gallery.component.ts

@@ -45,6 +45,12 @@ export class GalleryComponent {
   @Input() errorText: string;
   @Input() mouseGestures = true;
   @Input() touchGestures = true;
+  /**
+   * Controls whether items outside gallery's scrollport should overflow it. When clip == false,
+   * items overflowing the gallery will be visible on both sides. Otherwise they will be hidden
+   * with `overflow: hidden`.
+   */
+  @Input() clip = true;
   @Input() counter = true;
   @Input() counterOrientation: VerticalOrientation = 'bottom';
   @Input() visibleItems = 1;

libs/gallery/src/lib/components/viewer/viewer.component.scss

@@ -5,14 +5,17 @@
   position: relative;
   width: 100%;
   height: 100%;
-  overflow: hidden;
   outline: none;
   // NOTE on z-index: It prevents creation of secondary layer for scrollable content (found out in Chromium dev tools in Layers) in context of the viewer DOM element.
   // This secondary layer holds a large portion of memory
   // Positive z-index prevent creation of this layer. It also causes a separate layer to be created, because it has "composited" descendants - ul element,
   // however, this layer holds much less memory.
   z-index: 1;
 
+  &.clip {
+    overflow: hidden;
+  }
+
   &.rtl {
     .viewer-arrow-next {
       right: auto;

libs/gallery/src/lib/components/viewer/viewer.component.ts

@@ -88,6 +88,10 @@ export class ViewerComponent implements OnChanges, OnInit, AfterViewInit {
   @Input() visibleItems: number;
   @Input() moveByItems: number;
 
+  @HostBinding('class.clip')
+  @Input()
+  clip: boolean;
+
   @HostBinding('class.rtl')
   @Input()
   isRtl: boolean;