docs: Include new library inclusion in the docs

Author: hramberger

CHANGELOG.md

@@ -6,9 +6,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.0.0] - 2024-11-25
+
+### Added
+
+* Added compatabilty to angular 19 (1609)
+
 ### Changed
 
 * Update build pipeline to use node 20 (#1598)
+*__BREAKING CHANGE:__ Migrated the library to use standalone components. Please see the updated inclusion documentation described in the `README.md` (1608)
 
 ## [2.1.0] - 2024-06-18
 
@@ -92,7 +99,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-* Set angular compiler option to ivy-partial (#161, #257) **Breaking Change: The minimum supported angular version is now 12.x**
+* __BREAKING CHANGE:__ Set angular compiler option to ivy-partial (#161, #257) **The minimum supported angular version is now 12.x**
 * Updated demo to Angular 13 (#294)
 * Set package version to 1.0.0-branch
 * Updated advanced-configuration-example.md (#157)

README.md

@@ -18,52 +18,38 @@ If you are not sure what you can expect from Darkbox please have a look at the c
 
 ## How?
 ### Installation
-Install npm package for Angular version 12+:
+Install npm package for Angular version 15+:
 
 ```
 npm i @failed-successfully/ngx-darkbox-gallery
 ```
 
-Import the module into your `app.module.ts`
+Since Version 3 this library is provided as a standalone component.
+To use it import the `NgxDarkboxGalleryComponent` into a component of your choice. In this example it is called AppComponent (`app.component.ts`)
 ```ts
 ...
-import { NgxDarkboxGalleryModule } from '@failed-successfully/ngx-darkbox-gallery';
-
-@NgModule({
-  ...,
-  imports: [
-    ...,
-    NgxDarkboxGalleryModule
-  ],
-  ...
-})
-export class AppModule { }
-```
-### Usage
-The simplest way of using Darkbox is to include the component with its default configuration as shown below.
-
-Inclusion in the desired `.html` file
-```ts
-<darkbox-gallery [images]="images"></darkbox-gallery>
-```
-
-View of the corresponding `.ts` file
-```ts
-import { Component } from '@angular/core';
-import { Image } from '@failed-successfully/ngx-darkbox-gallery';
+import { NgxDarkboxGalleryComponent } from '@failed-successfully/ngx-darkbox-gallery';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    imports: [NgxDarkboxGalleryComponent]
 })
 export class AppComponent {
-  images: Image[] = [{
+    images: Image[] = [{
         url: 'https://picsum.photos/seed/3000/2000',
         thumbnailUrl: 'https://picsum.photos/300/200'
   }];
 }
 ```
+### Usage
+The simplest way of using Darkbox is to include the component with its default configuration as shown below.
+
+Inclusion in the desired `.html` file
+```ts
+<darkbox-gallery [images]="images"></darkbox-gallery>
+```
 
 For an example of a more advanced Darkbox configuration have a look at [our examples](./docs/examples/advanced-configuration-example.md).
 

docs/examples/advanced-configuration-example.md

@@ -11,11 +11,13 @@ The following example shows how Darkbox can be configured. In this example all c
 ```ts
 import { Component } from '@angular/core';
 import { Image, DarkboxConfiguration } from '@failed-successfully/ngx-darkbox-gallery';
+import { NgxDarkboxGalleryComponent } from '@failed-successfully/ngx-darkbox-gallery';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  imports: [NgxDarkboxGalleryComponent]
 })
 export class AppComponent {
   configuration: Configuration = {