Update

package.json

@@ -5,6 +5,8 @@
     "start-demo": "ng serve ng-gallery-demo --host 0.0.0.0",
     "build-demo": "ng build ng-gallery-demo --configuration production",
     "build-lib": "ng build ng-gallery --configuration production",
+    "test-lib": "ng test ng-gallery",
+    "test-lib-headless": "ng test ng-gallery --watch=false --no-progress --browsers=ChromeHeadless --code-coverage",
     "publish-lib": "npm publish ./dist/ng-gallery",
     "storybook": "ng run ng-gallery:storybook",
     "build-storybook": "ng run ng-gallery:build-storybook",
@@ -68,6 +70,7 @@
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "^2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "ng-packagr": "^18.2.1",

projects/ng-gallery-demo/src/app/pages/lab/lab.component.html

@@ -8,6 +8,7 @@ <h1 fxLayout>
   <div *ngIf="show$ | async" class="gallery-container">
     <gallery #gallery id="lab"
              [items]="photos$ | async"
+             [centralized]="config.centralized"
              [autoHeight]="config.autoHeight"
              [itemAutosize]="config.itemAutosize"
              [thumbAutosize]="config.thumbAutosize"
@@ -222,6 +223,9 @@ <h1 fxLayout>
           <div>
             <mat-checkbox [(ngModel)]="config.thumbs">Show thumbnails</mat-checkbox>
           </div>
+          <div>
+            <mat-checkbox [(ngModel)]="config.centralized">Centralize Slider</mat-checkbox>
+          </div>
           <div>
             <mat-checkbox [(ngModel)]="config.thumbCentralized">Centralize Thumbnails</mat-checkbox>
           </div>

projects/ng-gallery-demo/src/app/pages/lab/lab.component.ts

@@ -74,6 +74,7 @@ export class LabComponent implements OnInit {
       disableThumbScroll: false,
       disableMouseScroll: false,
       disableThumbMouseScroll: false,
+      centralized: false,
       thumbWidth: 120,
       thumbHeight: 90,
       imageSize: 'contain',

projects/ng-gallery/karma.conf.js

@@ -9,24 +9,39 @@ module.exports = function (config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+      require('karma-coverage'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
       dir: require('path').join(__dirname, '../../coverage/ng-gallery'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' },
+        { type: 'cobertura' },
+        { type: 'lcov' }
+      ]
     },
     reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
+    browsers: ["MyChromeWithoutSearchSelect"],
+    customLaunchers: {
+      MyChromeWithoutSearchSelect: {
+        base: "Chrome",
+        flags: ["-disable-search-engine-choice-screen"],
+      },
+    },
     restartOnFileChange: true
   });
 };

projects/ng-gallery/src/lib/components/adapters/base-adapter.ts

@@ -10,7 +10,7 @@ export abstract class SliderAdapter {
 
   abstract get isContentLessThanContainer(): boolean;
 
-  abstract getScrollToValue(el: Element, behavior: ScrollBehavior): ScrollToOptions;
+  abstract getScrollToValue(target: Element, behavior: ScrollBehavior): ScrollToOptions;
 
   abstract getCentralizerStartSize(): number;
 

projects/ng-gallery/src/lib/components/adapters/main-adapters.ts

@@ -31,16 +31,17 @@ export class HorizontalAdapter implements SliderAdapter {
   constructor(public slider: HTMLElement, public config: GalleryConfig) {
   }
 
-  getScrollToValue(el: HTMLElement, behavior: ScrollBehavior): SmoothScrollOptions {
-    const position: number = el.offsetLeft - ((this.clientSize - el.clientWidth) / 2);
+  getScrollToValue(target: HTMLElement, behavior: ScrollBehavior): SmoothScrollOptions {
+    const position: number = target.offsetLeft - ((this.clientSize - target.clientWidth) / 2);
     return {
       behavior,
       start: position
     };
   }
 
   getRootMargin(): string {
-    return `1000px 1px 1000px 1px`;
+    // return `1000px 1px 1000px 1px`;
+    return `1000px 0px 1000px 0px`;
   }
 
   getElementRootMargin(viewport: HTMLElement, el: HTMLElement): string {
@@ -108,16 +109,16 @@ export class VerticalAdapter implements SliderAdapter {
   constructor(public slider: HTMLElement, public config: GalleryConfig) {
   }
 
-  getScrollToValue(el: HTMLElement, behavior: ScrollBehavior): SmoothScrollOptions {
-    const position: number = el.offsetTop - ((this.clientSize - el.clientHeight) / 2);
+  getScrollToValue(target: HTMLElement, behavior: ScrollBehavior): SmoothScrollOptions {
+    const position: number = target.offsetTop - ((this.clientSize - target.clientHeight) / 2);
     return {
       behavior,
       top: position
     };
   }
 
   getRootMargin(): string {
-    return `1px 1000px 1px 1000px`;
+    return `0px 1000px 0px 1000px`;
   }
 
   getElementRootMargin(viewport: HTMLElement, el: HTMLElement): string {

projects/ng-gallery/src/lib/components/gallery-item.component.ts

@@ -139,7 +139,6 @@ export class GalleryItemComponent implements AfterViewInit {
 
 
   imageContext: Signal<GalleryItemContext<ImageItemData>> = computed(() => {
-    console.log('imageContext')
     return {
       $implicit: this.imageData,
       index: this.index(),
@@ -152,7 +151,6 @@ export class GalleryItemComponent implements AfterViewInit {
   });
 
   itemContext: Signal<GalleryItemContext<ImageItemData>> = computed(() => {
-    console.log('itemContext')
     return {
       $implicit: this.data(),
       index: this.index(),

projects/ng-gallery/src/lib/components/gallery-nav.component.ts

@@ -26,9 +26,9 @@ import { GalleryRef } from '../services/gallery-ref';
 })
 export class GalleryNavComponent {
 
-  private _sanitizer: DomSanitizer = inject(DomSanitizer);
+  private readonly _sanitizer: DomSanitizer = inject(DomSanitizer);
 
-  galleryRef: GalleryRef = inject(GalleryRef);
+  readonly galleryRef: GalleryRef = inject(GalleryRef);
 
   navIcon: Signal<SafeHtml> = computed(() =>
     this._sanitizer.bypassSecurityTrustHtml(this.galleryRef.config().navIcon)