chore: use strict templates for better type inference

daelmaak · Aug 4, 2023 · ab75712 · ab75712
1 parent 290633a
commit ab75712
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 22 deletions.
diff --git a/projects/demo/src/app/components/demo-whole-config/demo-whole-config.component.html b/projects/demo/src/app/components/demo-whole-config/demo-whole-config.component.html
@@ -109,9 +109,10 @@ <h4>Gallery viewer properties</h4>
         <label>Selected index</label>
         <input
           name="selectedIndex"
+          type="number"
           matInput
-          [(ngModel)]="galleryConfig.selectedIndex"
-          (change)="reloadGallery()"
+          [value]="galleryConfig.selectedIndex"
+          (input)="onConfigChange('selectedIndex', getInputValue($event))"
         />
       </mat-form-field>
     </section>
@@ -196,7 +197,6 @@ <h4>Auxiliary</h4>
   <gallery
     *ngIf="displayGallery"
     [items]="items | async"
-    [selectedIndex]="+galleryConfig.selectedIndex"
     [arrows]="galleryConfig.arrows"
     [descriptions]="galleryConfig.descriptions"
     [mouseGestures]="galleryConfig.mouseGestures"
@@ -208,6 +208,7 @@ <h4>Auxiliary</h4>
     [loading]="galleryConfig.loading"
     [loop]="galleryConfig.loop"
     [isRtl]="galleryConfig.rtl"
+    [selectedIndex]="galleryConfig.selectedIndex"
     [thumbs]="galleryConfig.thumbs"
     [thumbsAutoScroll]="galleryConfig.thumbsAutoScroll"
     [thumbsOrientation]="galleryConfig.thumbsOrientation"

diff --git a/projects/demo/src/app/components/demo-whole-config/demo-whole-config.component.scss b/projects/demo/src/app/components/demo-whole-config/demo-whole-config.component.scss
@@ -53,7 +53,7 @@ mat-form-field {
 
 .gallery-container {
   box-sizing: border-box;
-  height: calc(100vh - 64px);
+  height: calc(80vh);
 }
 
 gallery {

diff --git a/projects/demo/src/app/components/demo-whole-config/demo-whole-config.component.ts b/projects/demo/src/app/components/demo-whole-config/demo-whole-config.component.ts
@@ -12,9 +12,34 @@ import {
   GalleryComponent,
   GalleryItem,
   GalleryItemEvent,
+  Loading,
+  ObjectFit,
+  Orientation,
+  VerticalOrientation,
 } from '@daelmaak/ngx-gallery';
 import { GalleryItemInternal } from '@daelmaak/ngx-gallery/lib/core/gallery-item';
 
+interface GalleryConfig {
+  arrows: boolean;
+  descriptions: boolean;
+  mouseGestures: boolean;
+  touchGestures: boolean;
+  counter: boolean;
+  counterOrientation: VerticalOrientation;
+  itemWidth: string;
+  objectFit: ObjectFit;
+  loading: Loading;
+  loop: boolean;
+  rtl: boolean;
+  selectedIndex: number | null;
+  thumbs: boolean;
+  thumbsAutoScroll: boolean;
+  thumbsOrientation: Orientation;
+  thumbsArrows: boolean;
+  thumbsArrowSlideByLength: number;
+  thumbsScrollBehavior: ScrollBehavior;
+}
+
 @Component({
   selector: 'app-demo-whole-config',
   templateUrl: './demo-whole-config.component.html',
@@ -30,8 +55,7 @@ export class DemoWholeConfigComponent implements OnInit {
 
   mobile = matchMedia('(max-width: 767px)').matches;
 
-  galleryConfig = {
-    selectedIndex: 0,
+  galleryConfig: GalleryConfig = {
     arrows: !this.mobile,
     descriptions: false,
     mouseGestures: true,
@@ -43,6 +67,7 @@ export class DemoWholeConfigComponent implements OnInit {
     loading: 'lazy',
     loop: false,
     rtl: false,
+    selectedIndex: 0,
     thumbs: true,
     thumbsAutoScroll: true,
     thumbsOrientation: 'bottom',
@@ -71,6 +96,17 @@ export class DemoWholeConfigComponent implements OnInit {
 
   onImageLoad() {}
 
+  onConfigChange(
+    prop: keyof GalleryConfig,
+    value: GalleryConfig[keyof GalleryConfig]
+  ) {
+    if (value === '') {
+      return;
+    }
+    this.galleryConfig[prop as any] = +value ?? value;
+    this.reloadGallery();
+  }
+
   reloadGallery() {
     this.displayGallery = false;
     this.cd.detectChanges();
@@ -81,6 +117,10 @@ export class DemoWholeConfigComponent implements OnInit {
     this.cd.detectChanges();
   }
 
+  protected getInputValue(event: Event): string | number | null {
+    return (event.target as HTMLInputElement).value;
+  }
+
   private getGalleryConfig() {
     return JSON.parse(sessionStorage.getItem('galleryConfig'));
   }

diff --git a/projects/gallery/src/lib/components/gallery/gallery.component.html b/projects/gallery/src/lib/components/gallery/gallery.component.html
@@ -22,7 +22,7 @@
 
 <viewer
   [items]="items"
-  [selectedIndex]="selectedIndex"
+  [selectedIndex]="+selectedIndex"
   [arrows]="arrows"
   [descriptions]="descriptions"
   [errorText]="errorText"

diff --git a/projects/gallery/src/lib/components/gallery/gallery.component.ts b/projects/gallery/src/lib/components/gallery/gallery.component.ts
@@ -54,8 +54,8 @@ export class GalleryComponent {
   isRtl: boolean;
   @Input() itemTemplate: TemplateRef<ItemTemplateContext>;
   @Input() loadingTemplate: TemplateRef<void>;
-  @Input() errorTemplate: TemplateRef<void>;
-  @Input() arrowTemplate: TemplateRef<void>;
+  @Input() errorTemplate: TemplateRef<any>;
+  @Input() arrowTemplate: TemplateRef<any>;
   @Input() contentTemplate: TemplateRef<ContentTemplateContext>;
   @Input() thumbs = true;
   @Input() thumbsAutoScroll = true;
@@ -64,8 +64,8 @@ export class GalleryComponent {
   @Input() thumbsArrowSlideByLength: number;
   @Input() thumbsScrollBehavior: ScrollBehavior = 'smooth';
   @Input() thumbTemplate: TemplateRef<ThumbTemplateContext>;
-  @Input() thumbsArrowTemplate: TemplateRef<void>;
-  @Input() thumbErrorTemplate: TemplateRef<void>;
+  @Input() thumbsArrowTemplate: TemplateRef<never>;
+  @Input() thumbErrorTemplate: TemplateRef<never>;
 
   @Output() imageClick = new EventEmitter<GalleryItemEvent>();
   @Output() thumbClick = new EventEmitter<GalleryItemEvent>();

diff --git a/projects/gallery/src/lib/components/thumbs/thumbs.component.ts b/projects/gallery/src/lib/components/thumbs/thumbs.component.ts
@@ -22,10 +22,7 @@ import {
   ThumbTemplateContext,
 } from '../../core';
 import { Aria } from '../../core/aria';
-import {
-  GalleryItemEvent,
-  GalleryItemInternal,
-} from '../../core/gallery-item';
+import { GalleryItemEvent, GalleryItemInternal } from '../../core/gallery-item';
 
 @Component({
   selector: 'thumbs',
@@ -42,8 +39,8 @@ export class ThumbsComponent implements OnChanges, OnDestroy {
   @Input() arrowSlideByLength: number;
   @Input() autoScroll: boolean;
   @Input() thumbTemplate: TemplateRef<ThumbTemplateContext>;
-  @Input() arrowTemplate: TemplateRef<void>;
-  @Input() errorTemplate: TemplateRef<void>;
+  @Input() arrowTemplate: TemplateRef<never>;
+  @Input() errorTemplate: TemplateRef<never>;
   @Input() scrollBehavior: ScrollBehavior;
   @Input() isRtl: boolean;
 

diff --git a/projects/gallery/src/lib/components/viewer/viewer.component.spec.ts b/projects/gallery/src/lib/components/viewer/viewer.component.spec.ts
@@ -876,6 +876,7 @@ describe('ViewerComponent', () => {
   `,
 })
 export class TestCustomTemplatesComponent {
-  @ViewChild('errorTemplate', { static: true }) errorTemplate: TemplateRef<any>;
-  @ViewChild('itemTemplate', { static: true }) itemTemplate: TemplateRef<any>;
+  @ViewChild('errorTemplate', { static: true })
+  errorTemplate: TemplateRef<never>;
+  @ViewChild('itemTemplate', { static: true }) itemTemplate: TemplateRef<never>;
 }
diff --git a/projects/gallery/src/lib/components/viewer/viewer.component.ts b/projects/gallery/src/lib/components/viewer/viewer.component.ts
@@ -67,8 +67,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
   @Input() objectFit: ObjectFit;
   @Input() itemTemplate: TemplateRef<ItemTemplateContext>;
   @Input() loadingTemplate: TemplateRef<void>;
-  @Input() errorTemplate: TemplateRef<void>;
-  @Input() arrowTemplate: TemplateRef<void>;
+  @Input() errorTemplate: TemplateRef<any>;
+  @Input() arrowTemplate: TemplateRef<any>;
   @Input() contentTemplate: TemplateRef<ContentTemplateContext>;
   @Input() thumbsOrientation: OrientationFlag;
   @Input() aria: Aria;

diff --git a/tsconfig.json b/tsconfig.json
@@ -19,6 +19,7 @@
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
+    "strictTemplates": true
   }
 }