Feature/390 standalone support (#471)

#close [390](#390)

---------

Co-authored-by: Mateusz Stefańczyk <[email protected]>

README.md

@@ -5,7 +5,9 @@
 [![npm version](https://badge.fury.io/js/%40ngu%2Fcarousel.svg)](https://badge.fury.io/js/%40ngu%2Fcarousel)
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-15-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Angular Universal carousel
@@ -34,13 +36,13 @@ Demo available [Here](https://ngu-carousel.netlify.app)
 
 ## Usage
 
-1. Include CarouselModule in your app module:
+1. Include Carousel needed parts in your module or component (all carousel components and directives are standalone):
 
 ```typescript
 import { NguCarouselModule } from '@ngu/carousel';
 
 @NgModule({
-  imports: [NguCarouselModule]
+  imports: [NguCarousel, NguTileComponent, NguCarouselDefDirective]
 })
 export class AppModule {}
 ```

apps/ngu-carousel-example/src/app/app.component.ts

@@ -2,8 +2,7 @@ import {
   AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component,
-  OnInit
+  Component
 } from '@angular/core';
 import { NguCarouselConfig } from '@ngu/carousel';
 import { interval, Observable } from 'rxjs';

apps/ngu-carousel-example/src/app/app.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NguCarouselModule } from '@ngu/carousel';
 
 import { LayoutModule } from '@angular/cdk/layout';
 import { MatButtonModule } from '@angular/material/button';
@@ -13,14 +12,15 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { GettingStartedComponent } from './getting-started/getting-started.component';
 import { MainNavComponent } from './main-nav/main-nav.component';
+import { NguCarousel } from '@ngu/carousel';
 
 @NgModule({
   declarations: [AppComponent, MainNavComponent, GettingStartedComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    NguCarouselModule,
+    NguCarousel,
     LayoutModule,
     MatToolbarModule,
     MatButtonModule,

apps/ngu-carousel-example/src/app/banner-vertical/banner-vertical.module.ts

@@ -1,12 +1,26 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NguCarouselModule } from '@ngu/carousel';
+import {
+  NguCarousel,
+  NguCarouselDefDirective,
+  NguCarouselNextDirective,
+  NguCarouselPrevDirective,
+  NguItemComponent
+} from '@ngu/carousel';
 
 import { BannerVerticalRoutingModule } from './banner-vertical-routing.module';
 import { BannerVerticalComponent } from './banner-vertical.component';
 
 @NgModule({
   declarations: [BannerVerticalComponent],
-  imports: [CommonModule, BannerVerticalRoutingModule, NguCarouselModule]
+  imports: [
+    CommonModule,
+    BannerVerticalRoutingModule,
+    NguCarousel,
+    NguItemComponent,
+    NguCarouselDefDirective,
+    NguCarouselNextDirective,
+    NguCarouselPrevDirective
+  ]
 })
 export class BannerVerticalModule {}

apps/ngu-carousel-example/src/app/banner/banner.module.ts

@@ -1,11 +1,25 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NguCarouselModule } from '@ngu/carousel';
 import { BannerRoutingModule } from './banner-routing.module';
 import { BannerComponent } from './banner.component';
+import {
+  NguCarousel,
+  NguCarouselDefDirective,
+  NguCarouselNextDirective,
+  NguCarouselPrevDirective,
+  NguItemComponent
+} from '@ngu/carousel';
 
 @NgModule({
   declarations: [BannerComponent],
-  imports: [CommonModule, BannerRoutingModule, NguCarouselModule]
+  imports: [
+    CommonModule,
+    BannerRoutingModule,
+    NguCarousel,
+    NguItemComponent,
+    NguCarouselDefDirective,
+    NguCarouselNextDirective,
+    NguCarouselPrevDirective
+  ]
 })
 export class BannerModule {}

apps/ngu-carousel-example/src/app/tile-2-images/tile-2-images.module.ts

@@ -1,12 +1,28 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NguCarouselModule } from '@ngu/carousel';
+import {
+  NguCarousel,
+  NguCarouselDefDirective,
+  NguCarouselNextDirective,
+  NguCarouselPrevDirective,
+  NguItemComponent,
+  NguTileComponent
+} from '@ngu/carousel';
 
 import { Tile2RoutingModule } from './tile-routing.module';
 import { Tile2ImagesComponent } from './tile-2-images.component';
 
 @NgModule({
   declarations: [Tile2ImagesComponent],
-  imports: [CommonModule, Tile2RoutingModule, NguCarouselModule]
+  imports: [
+    CommonModule,
+    Tile2RoutingModule,
+    NguCarousel,
+    NguCarouselDefDirective,
+    NguCarouselNextDirective,
+    NguCarouselPrevDirective,
+    NguItemComponent,
+    NguTileComponent
+  ]
 })
 export class Tile2ImagesModule {}

apps/ngu-carousel-example/src/app/tile/tile.module.ts

@@ -1,12 +1,28 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NguCarouselModule } from '@ngu/carousel';
+import {
+  NguCarousel,
+  NguCarouselDefDirective,
+  NguCarouselNextDirective,
+  NguCarouselPrevDirective,
+  NguTileComponent,
+  NguCarouselPointDirective
+} from '@ngu/carousel';
 
 import { TileRoutingModule } from './tile-routing.module';
 import { TileComponent } from './tile.component';
 
 @NgModule({
   declarations: [TileComponent],
-  imports: [CommonModule, TileRoutingModule, NguCarouselModule]
+  imports: [
+    CommonModule,
+    TileRoutingModule,
+    NguCarousel,
+    NguTileComponent,
+    NguCarouselDefDirective,
+    NguCarouselNextDirective,
+    NguCarouselPrevDirective,
+    NguCarouselPointDirective
+  ]
 })
 export class TileModule {}

apps/ngu-carousel-example/src/app/wrapped/wrapped.module.ts

@@ -1,13 +1,30 @@
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
-import { NguCarouselModule } from '@ngu/carousel';
+import {
+  NguCarousel,
+  NguCarouselDefDirective,
+  NguCarouselNextDirective,
+  NguCarouselPrevDirective,
+  NguItemComponent,
+  NguTileComponent
+} from '@ngu/carousel';
 import { WrappedComponent } from './wrapped.component';
 import { WrappedCarouselComponent } from './wrapped-carousel/wrapped-carousel.component';
 import { WrappedRoutingModule } from './wrapped-routing.module';
 import { CommonModule } from '@angular/common';
 
 @NgModule({
-  imports: [WrappedRoutingModule, CommonModule, NguCarouselModule, HttpClientModule],
+  imports: [
+    WrappedRoutingModule,
+    CommonModule,
+    NguCarousel,
+    NguCarouselDefDirective,
+    NguCarouselNextDirective,
+    NguCarouselPrevDirective,
+    NguItemComponent,
+    NguTileComponent,
+    HttpClientModule
+  ],
   exports: [],
   declarations: [WrappedComponent, WrappedCarouselComponent],
   providers: []

libs/ngu/carousel/src/lib/ngu-carousel.directive.ts

@@ -1,12 +1,14 @@
 import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
 
 @Directive({
-  selector: '[NguCarouselItem]'
+  selector: '[NguCarouselItem]',
+  standalone: true
 })
 export class NguCarouselItemDirective {}
 
 @Directive({
-  selector: '[NguCarouselNext]'
+  selector: '[NguCarouselNext]',
+  standalone: true
 })
 export class NguCarouselNextDirective {
   // @HostBinding('disabled') disabled: boolean;
@@ -17,21 +19,24 @@ export class NguCarouselNextDirective {
 }
 
 @Directive({
-  selector: '[NguCarouselPrev]'
+  selector: '[NguCarouselPrev]',
+  standalone: true
 })
 export class NguCarouselPrevDirective {
   // @HostBinding('disabled') disabled: boolean;
   // @HostBinding('style.display') display = 'block';
 }
 
 @Directive({
-  selector: '[NguCarouselPoint]'
+  selector: '[NguCarouselPoint]',
+  standalone: true
 })
 export class NguCarouselPointDirective {}
 
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: '[nguCarouselDef]'
+  selector: '[nguCarouselDef]',
+  standalone: true
 })
 export class NguCarouselDefDirective<T> {
   when?: (index: number, nodeData: T) => boolean;
@@ -41,7 +46,8 @@ export class NguCarouselDefDirective<T> {
 
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: '[nguCarouselOutlet]'
+  selector: '[nguCarouselOutlet]',
+  standalone: true
 })
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 export class NguCarouselOutlet {

libs/ngu/carousel/src/lib/ngu-carousel/ngu-carousel.component.ts

@@ -59,7 +59,9 @@ const NG_DEV_MODE = typeof ngDevMode === 'undefined' || ngDevMode;
   templateUrl: 'ngu-carousel.component.html',
   styleUrls: ['ngu-carousel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [NguCarouselHammerManager]
+  providers: [NguCarouselHammerManager],
+  imports: [NguCarouselOutlet],
+  standalone: true
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class NguCarousel<T, U extends NgIterable<T> = NgIterable<T>>

libs/ngu/carousel/src/lib/ngu-item/ngu-item.component.ts

@@ -2,7 +2,8 @@ import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'ngu-item',
-  templateUrl: 'ngu-item.component.html'
+  templateUrl: 'ngu-item.component.html',
+  standalone: true
 })
 export class NguItemComponent {
   @HostBinding('class.item') classes = true;

libs/ngu/carousel/src/lib/ngu-tile/ngu-tile.component.ts

@@ -3,7 +3,8 @@ import { Component, HostBinding } from '@angular/core';
 @Component({
   selector: 'ngu-tile',
   templateUrl: 'ngu-tile.component.html',
-  styleUrls: ['ngu-tile.component.scss']
+  styleUrls: ['ngu-tile.component.scss'],
+  standalone: true
 })
 export class NguTileComponent {
   @HostBinding('class.item') classes = true;

libs/ngu/carousel/src/public-api.ts

@@ -8,8 +8,6 @@ export { NguCarouselStore } from './lib/ngu-carousel/ngu-carousel';
 
 export { NguCarousel } from './lib/ngu-carousel/ngu-carousel.component';
 
-export { NguCarouselModule } from './lib/ngu-carousel.module';
-
 export { NguItemComponent } from './lib/ngu-item/ngu-item.component';
 
 export { NguTileComponent } from './lib/ngu-tile/ngu-tile.component';