change!: use standalone components everywhere

Standalone brings better treeshaking and easier integration with the
host applications.

projects/demo/src/app/app.module.ts

@@ -18,7 +18,7 @@ import { ShowcaseComponent } from './components/showcase/showcase.component';
 import { DemoThumbsOrientationComponent } from './components/demo-thumbs-orientation/demo-thumbs-orientation.component';
 import { DemoMultipleItemsComponent } from './components/demo-multiple-items/demo-multiple-items.component';
 import { DemoCustomTemplatesComponent } from './components/demo-custom-templates/demo-custom-templates.component';
-import { GalleryModule } from '@daelmaak/ngx-gallery';
+import { GalleryComponent } from '@daelmaak/ngx-gallery';
 
 const materialModules = [
   MatButtonModule,
@@ -46,7 +46,7 @@ const materialModules = [
     BrowserAnimationsModule,
     CommonModule,
     FormsModule,
-    GalleryModule,
+    GalleryComponent,
   ],
   providers: [],
   bootstrap: [AppComponent],

projects/gallery/src/lib/components/counter/counter.component.spec.ts

@@ -1,17 +1,11 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CounterComponent } from './counter.component';
 
 describe('CounterComponent', () => {
   let component: CounterComponent;
   let fixture: ComponentFixture<CounterComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [CounterComponent],
-    }).compileComponents();
-  }));
-
   beforeEach(() => {
     fixture = TestBed.createComponent(CounterComponent);
     component = fixture.componentInstance;

projects/gallery/src/lib/components/counter/counter.component.ts

@@ -16,6 +16,7 @@ import { VerticalOrientation } from '../../core';
   `,
   styleUrls: ['./counter.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class CounterComponent {
   @Input()

projects/gallery/src/lib/components/gallery/gallery.component.spec.ts

@@ -1,38 +1,24 @@
 import { DebugElement } from '@angular/core';
 import {
-  async,
   ComponentFixture,
   fakeAsync,
   TestBed,
   tick,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { SafePipe } from '../../pipes/safe.pipe';
-import { CounterComponent } from '../counter/counter.component';
-import { ChevronIconComponent } from '../icons/chevron/chevron-icon.component';
-import { ThumbsComponent } from '../thumbs/thumbs.component';
-import { ViewerComponent } from '../viewer/viewer.component';
 import { GalleryComponent } from './gallery.component';
 
 describe('GalleryComponent', () => {
   let component: GalleryComponent;
   let fixture: ComponentFixture<GalleryComponent>;
   let de: DebugElement;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
-      declarations: [
-        GalleryComponent,
-        ViewerComponent,
-        ThumbsComponent,
-        ChevronIconComponent,
-        CounterComponent,
-        SafePipe,
-      ],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(GalleryComponent);

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

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -33,6 +34,8 @@ import { ViewerComponent } from '../viewer/viewer.component';
   templateUrl: './gallery.component.html',
   styleUrls: ['./gallery.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ThumbsComponent, ViewerComponent],
 })
 export class GalleryComponent {
   @Input() items: GalleryItem[];

projects/gallery/src/lib/components/icons/chevron/chevron-icon.component.ts

@@ -5,5 +5,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   templateUrl: './chevron-icon.component.html',
   styleUrls: ['./chevron-icon.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class ChevronIconComponent {}

projects/gallery/src/lib/components/thumbs/thumbs.component.spec.ts

@@ -6,30 +6,26 @@ import {
 import {
   ComponentFixture,
   TestBed,
-  async,
   fakeAsync,
   flush,
   tick,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { GalleryItem, SUPPORT } from '../../core';
-import { ChevronIconComponent } from '../icons/chevron/chevron-icon.component';
 import { ThumbsComponent } from './thumbs.component';
 
 describe('ThumbnailsComponent', () => {
   let component: ThumbsComponent;
   let fixture: ComponentFixture<ThumbsComponent>;
   let de: DebugElement;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ThumbsComponent, ChevronIconComponent],
-    })
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({})
       .overrideComponent(ThumbsComponent, {
         set: { changeDetection: ChangeDetectionStrategy.Default },
       })
       .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ThumbsComponent);

projects/gallery/src/lib/components/thumbs/thumbs.component.ts

@@ -23,12 +23,16 @@ import {
 } from '../../core';
 import { Aria } from '../../core/aria';
 import { GalleryItemEvent, GalleryItemInternal } from '../../core/gallery-item';
+import { ChevronIconComponent } from '../icons/chevron/chevron-icon.component';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'thumbs',
   templateUrl: './thumbs.component.html',
   styleUrls: ['./thumbs.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ChevronIconComponent],
 })
 export class ThumbsComponent implements OnChanges, OnDestroy {
   @Input() items: GalleryItemInternal[] = [];

projects/gallery/src/lib/components/viewer/viewer.component.spec.ts

@@ -19,9 +19,6 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { OrientationFlag } from '../../core';
 import { GalleryItemInternal } from '../../core/gallery-item';
-import { SafePipe } from '../../pipes/safe.pipe';
-import { CounterComponent } from '../counter/counter.component';
-import { ChevronIconComponent } from '../icons/chevron/chevron-icon.component';
 import { ViewerComponent } from './viewer.component';
 
 describe('ViewerComponent', () => {
@@ -32,13 +29,6 @@ describe('ViewerComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
-      declarations: [
-        ViewerComponent,
-        ChevronIconComponent,
-        CounterComponent,
-        SafePipe,
-        TestCustomTemplatesComponent,
-      ],
     })
       .overrideComponent(ViewerComponent, {
         set: { changeDetection: ChangeDetectionStrategy.Default },

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

@@ -33,6 +33,11 @@ import {
   VerticalOrientation,
 } from '../../core';
 import { GalleryItemInternal } from '../../core/gallery-item';
+import { CounterComponent } from '../counter/counter.component';
+import { ChevronIconComponent } from '../icons/chevron/chevron-icon.component';
+import { SafePipe } from '../../pipes/safe.pipe';
+import { CommonModule } from '@angular/common';
+import { MediaDirective } from '../../directives/media.directive';
 
 const passiveEventListenerOpts = {
   passive: true,
@@ -52,6 +57,14 @@ const passiveEventListenerOpts = {
       ]),
     ]),
   ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    CounterComponent,
+    ChevronIconComponent,
+    MediaDirective,
+    SafePipe,
+  ],
 })
 export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
   @Input() items: GalleryItemInternal[];

projects/gallery/src/lib/directives/media.directive.ts

@@ -9,6 +9,7 @@ import {
 
 @Directive({
   selector: '[media]',
+  standalone: true,
 })
 export class MediaDirective implements OnInit, OnDestroy {
   @Output()

projects/gallery/src/lib/pipes/safe.pipe.ts

@@ -3,6 +3,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 
 @Pipe({
   name: 'safe',
+  standalone: true,
 })
 export class SafePipe implements PipeTransform {
   constructor(private sanitizer: DomSanitizer) {}

projects/gallery/src/public-api.ts

@@ -2,5 +2,4 @@
  * Public API Surface of the gallery
  */
 export * from './lib/components/gallery/gallery.component';
-export * from './lib/gallery.module';
 export * from './lib/core';