Update

MurhafSousli · Oct 19, 2024 · 26e93d3 · 26e93d3
1 parent a20feb4
commit 26e93d3
Show file tree

Hide file tree

Showing 64 changed files with 1,913 additions and 1,399 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/projects/ng-gallery-demo/src/app/pages/gallerize-example/gallerize-example.component.ts b/projects/ng-gallery-demo/src/app/pages/gallerize-example/gallerize-example.component.ts
@@ -31,22 +31,22 @@ export class GallerizeExampleComponent implements OnInit {
   constructor(private _pixabay: Pixabay, gallery: Gallery, private _title: Title) {
     this.code = code;
     gallery.ref('lightbox').setConfig({
-      thumbPosition: 'bottom',
+      // thumbPosition: 'bottom',
       imageSize: 'cover',
       itemAutosize: false,
-      thumbAutosize: false,
-      thumbs: true
+      // thumbAutosize: false,
+      // thumbs: true
       // thumbWidth: 120,
       // thumbHeight: 90,
       // thumbView: 'contain'
     });
     gallery.ref('auto-detect').setConfig({
-      thumbPosition: 'top',
+      // thumbPosition: 'top',
       autoHeight: true,
       imageSize: 'cover',
       itemAutosize: false,
-      thumbAutosize: false,
-      thumbs: true
+      // thumbAutosize: false,
+      // thumbs: true
       // thumbView: 'contain'
     });
   }

diff --git a/projects/ng-gallery-demo/src/app/pages/gallery-example/gallery-example.component.html b/projects/ng-gallery-demo/src/app/pages/gallery-example/gallery-example.component.html
@@ -62,11 +62,11 @@ <h3>Example</h3>
     @if (media$ | async; as config) {
       <gallery id="basic"
                [items]="fruits$ | async"
-               thumbs
-               bullets
-               [thumbWidth]="config.thumbWidth"
-               [thumbHeight]="config.thumbHeight"
-               [thumbPosition]="config.thumbPosition"/>
+               bullets>
+        <gallery-thumbs [thumbWidth]="config.thumbWidth"
+                        [thumbHeight]="config.thumbHeight"
+                        [position]="config.thumbPosition"/>
+      </gallery>
     }
 
     <hl-code [code]="code.example"/>

diff --git a/projects/ng-gallery-demo/src/app/pages/gallery-example/gallery-example.component.ts b/projects/ng-gallery-demo/src/app/pages/gallery-example/gallery-example.component.ts
@@ -5,7 +5,7 @@ import { Title } from '@angular/platform-browser';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatButtonModule } from '@angular/material/button';
 import { MediaChange, MediaObserver } from '@angular/flex-layout';
-import { GalleryModule, GalleryItem, GalleryConfig, ThumbnailsPosition } from 'ng-gallery';
+import { GalleryModule, GalleryItem, GalleryConfig, ThumbnailsPosition, GalleryThumbsComponent } from 'ng-gallery';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { Observable, map } from 'rxjs';
 
@@ -24,13 +24,13 @@ import { SectionTitleComponent } from '../../shared/section-title/section-title.
   styleUrls: ['./gallery-example.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [SectionTitleComponent, NoteComponent, MatButtonModule, RouterLink, MatTabsModule, HlCodeComponent, NgIf, GalleryModule, FontAwesomeModule, FooterComponent, AsyncPipe]
+  imports: [SectionTitleComponent, NoteComponent, MatButtonModule, RouterLink, MatTabsModule, HlCodeComponent, NgIf, GalleryModule, FontAwesomeModule, FooterComponent, AsyncPipe, GalleryThumbsComponent]
 })
 export class GalleryExampleComponent implements OnInit {
 
   readonly code = code;
   readonly fruits$: Observable<GalleryItem[]>;
-  readonly media$: Observable<GalleryConfig>;
+  readonly media$: Observable<any>;
 
   constructor(pixabay: Pixabay, mediaObserver: MediaObserver, private _title: Title) {
     this.fruits$ = pixabay.getHDImages('vegetables');

diff --git a/projects/ng-gallery-demo/src/app/pages/home/home.component.html b/projects/ng-gallery-demo/src/app/pages/home/home.component.html
@@ -9,16 +9,16 @@ <h2>Simplifies the process of creating beautiful galleries.</h2>
     <gallery id="basic"
              *ngIf="media$ | async; let config"
              [items]="camel$ | async"
-             [thumbWidth]="config.thumbWidth"
-             [thumbHeight]="config.thumbHeight"
              ngStyle.lg="height: 540px"
              itemAutosize="true"
              imageSize="contain"
-             thumbPosition="top"
-             thumbs
              loop
-             thumbCentralized
-             autoplay/>
+             autoplay>
+      <gallery-thumbs position="top"
+                      centralized
+                      [thumbWidth]="config.thumbWidth"
+                      [thumbHeight]="config.thumbHeight"/>
+    </gallery>
   </div>
   <footer></footer>
 </div>
diff --git a/projects/ng-gallery-demo/src/app/pages/home/home.component.ts b/projects/ng-gallery-demo/src/app/pages/home/home.component.ts
@@ -4,7 +4,7 @@ import { Title } from '@angular/platform-browser';
 import { RouterLink } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { FlexLayoutModule, MediaChange, MediaObserver } from '@angular/flex-layout';
-import { GalleryComponent, GalleryConfig, GalleryItem } from 'ng-gallery';
+import { GalleryComponent, GalleryConfig, GalleryItem, GalleryThumbsComponent } from 'ng-gallery';
 import { Observable, map } from 'rxjs';
 import { Pixabay } from '../../service/pixabay.service';
 import { FooterComponent } from '../../shared/footer/footer.component';
@@ -19,12 +19,12 @@ import { BadgesComponent } from '../../shared/badges/badges.component';
   styleUrls: ['./home.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatButtonModule, RouterLink, BadgesComponent, NgIf, GalleryComponent, FooterComponent, AsyncPipe, FlexLayoutModule]
+  imports: [MatButtonModule, RouterLink, BadgesComponent, NgIf, GalleryComponent, FooterComponent, AsyncPipe, FlexLayoutModule, GalleryThumbsComponent]
 })
 export class HomeComponent implements OnInit {
 
   readonly camel$: Observable<GalleryItem[]>;
-  readonly media$: Observable<GalleryConfig>;
+  readonly media$: Observable<any>;
 
   constructor(pixabay: Pixabay, mediaObserver: MediaObserver, private _title: Title) {
     this.camel$ = pixabay.getHDImages('mountain');