Skip to content

Commit a846c90

Browse files
jonplatajonplata
authored
feat: update Angular to version 19 (#520)
Fixes #519 * remove no longer needed `standalone: true` flags * remove deprecated `allowSignalWrites: true` flag
1 parent f4e9929 commit a846c90

18 files changed

+5150
-6295
lines changed

‎README.md

+35-32
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
[![npm version](https://badge.fury.io/js/%40ngu%2Fcarousel.svg)](https://badge.fury.io/js/%40ngu%2Fcarousel)
66

77
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
8+
89
[![All Contributors](https://img.shields.io/badge/all_contributors-18-orange.svg?style=flat-square)](#contributors-)
10+
911
<!-- ALL-CONTRIBUTORS-BADGE:END -->
1012

1113
Angular Universal carousel
@@ -22,19 +24,20 @@ Demo available [Here](https://ngu-carousel.netlify.app)
2224

2325
`ngu-carousel` supports touch actions and requires `hammerjs` to be installed before the `ngu-carousel` is installed.
2426

25-
| Angular Version | ngu-carousel Version |
26-
| ------------------------ | -------------------------------------------- |
27-
| Angular >= 18 | `npm i --save @ngu/carousel@18` |
28-
| Angular >= 17 | `npm i --save @ngu/[email protected]` |
29-
| Angular >= 16 standalone | `npm i --save @ngu/[email protected]` |
30-
| Angular >= 16 | `npm i --save @ngu/[email protected]` |
31-
| Angular >= 15 | `npm i --save @ngu/[email protected]` |
32-
| Angular >= 14 | `npm i --save @ngu/[email protected]` |
33-
| Angular >= 13 | `npm i --save @ngu/[email protected]` |
34-
| Angular >= 12 | `npm i --save @ngu/[email protected]` |
35-
| Angular >= 10 | `npm i --save @ngu/[email protected]` |
36-
| Angular = 9 | `npm i --save @ngu/[email protected]` |
37-
| Angular < 9 | `npm i --save @ngu/[email protected]` |
27+
| Angular Version | ngu-carousel Version |
28+
| ------------------------ | ---------------------------------- |
29+
| Angular >= 19 | `npm i --save @ngu/carousel@19` |
30+
| Angular >= 18 | `npm i --save @ngu/carousel@18` |
31+
| Angular >= 17 | `npm i --save @ngu/[email protected]` |
32+
| Angular >= 16 standalone | `npm i --save @ngu/[email protected]` |
33+
| Angular >= 16 | `npm i --save @ngu/[email protected]` |
34+
| Angular >= 15 | `npm i --save @ngu/[email protected]` |
35+
| Angular >= 14 | `npm i --save @ngu/[email protected]` |
36+
| Angular >= 13 | `npm i --save @ngu/[email protected]` |
37+
| Angular >= 12 | `npm i --save @ngu/[email protected]` |
38+
| Angular >= 10 | `npm i --save @ngu/[email protected]` |
39+
| Angular = 9 | `npm i --save @ngu/[email protected]` |
40+
| Angular < 9 | `npm i --save @ngu/[email protected]` |
3841

3942
## Usage
4043

@@ -62,7 +65,7 @@ import {
6265
})
6366
export class AppModule {}
6467

65-
OR
68+
OR;
6669

6770
@Component({
6871
imports: [
@@ -252,24 +255,24 @@ export type Custom = 'banner';
252255
export type Animate = 'lazy';
253256
```
254257

255-
| Command | Type | Required | Description |
256-
| ------------------------- | ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
257-
| `grid` | Object | Yes | **xs** - mobile, **sm** - tablet, **md** - desktop, **lg** - large desktops, **xl** - extra large desktops, **all** - fixed width (When you use **all** make others 0 and vice versa) |
258-
| `gridBreakpoints` | Object | optional | Determines the browser width in pixels that the grid displays the intended number of tiles.<br/><br/> default: `{sm: 768, md: 992, lg: 1200, xl: 1200}` |
259-
| `slide` | number | optional | It is used to slide the number items on click |
260-
| `speed` | milliseconds | optional | It is used for time taken to slide the number items |
261-
| `interval` | milliseconds | optional | It is used to make the carousel auto slide with given value. interval defines the interval between slides |
262-
| `load` | number | optional | It is used to load the items similar to pagination. The carousel will trigger the carouselLoad function to load another set of items. It will help you to improve the performance of the app.**`(carouselLoad)="myfunc($event)"`** |
263-
| `point.visible` | boolean | optional | It is used to indicate no. of slides and also shows the current active slide. |
264-
| `point.hideOnSingleSlide` | boolean | optional | It is used to hide the point indicator when slide is less than one. |
265-
| `touch` | boolean | optional | It is used to active touch support to the carousel. |
266-
| `easing` | string | optional | It is used to define the easing style of the carousel. Only define the ease name without any timing like `ease`,`ease-in` |
267-
| `loop` | boolean | optional | It is used to loop the `ngu-item ngu-tile`. It must be true for `interval` |
268-
| `animation` | string | optional | It is used to animate the sliding items. currently it only supports `lazy`. more coming soon and also with custom CSS animation option |
269-
| `custom` | string | optional | It is you to define the purpose of the carousel. Currently, it only supports `banner`. |
270-
| `RTL` | boolean | optional | This option enables the `rtl` direction and acts as rtl. By default it is set to `ltr` |
271-
| `vertical.enabled` | boolean | optional | This option enable the `vertical` direction |
272-
| `vertical.height` | number | optional | This option is used to set the height of the carousel |
258+
| Command | Type | Required | Description |
259+
| ------------------------- | ------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
260+
| `grid` | Object | Yes | **xs** - mobile, **sm** - tablet, **md** - desktop, **lg** - large desktops, **xl** - extra large desktops, **all** - fixed width (When you use **all** make others 0 and vice versa) |
261+
| `gridBreakpoints` | Object | optional | Determines the browser width in pixels that the grid displays the intended number of tiles.<br/><br/> default: `{sm: 768, md: 992, lg: 1200, xl: 1200}` |
262+
| `slide` | number | optional | It is used to slide the number items on click |
263+
| `speed` | milliseconds | optional | It is used for time taken to slide the number items |
264+
| `interval` | milliseconds | optional | It is used to make the carousel auto slide with given value. interval defines the interval between slides |
265+
| `load` | number | optional | It is used to load the items similar to pagination. The carousel will trigger the carouselLoad function to load another set of items. It will help you to improve the performance of the app.**`(carouselLoad)="myfunc($event)"`** |
266+
| `point.visible` | boolean | optional | It is used to indicate no. of slides and also shows the current active slide. |
267+
| `point.hideOnSingleSlide` | boolean | optional | It is used to hide the point indicator when slide is less than one. |
268+
| `touch` | boolean | optional | It is used to active touch support to the carousel. |
269+
| `easing` | string | optional | It is used to define the easing style of the carousel. Only define the ease name without any timing like `ease`,`ease-in` |
270+
| `loop` | boolean | optional | It is used to loop the `ngu-item ngu-tile`. It must be true for `interval` |
271+
| `animation` | string | optional | It is used to animate the sliding items. currently it only supports `lazy`. more coming soon and also with custom CSS animation option |
272+
| `custom` | string | optional | It is you to define the purpose of the carousel. Currently, it only supports `banner`. |
273+
| `RTL` | boolean | optional | This option enables the `rtl` direction and acts as rtl. By default it is set to `ltr` |
274+
| `vertical.enabled` | boolean | optional | This option enable the `vertical` direction |
275+
| `vertical.height` | number | optional | This option is used to set the height of the carousel |
273276

274277
### Custom CSS for Point
275278

‎apps/ngu-carousel-example/server.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { APP_BASE_HREF } from '@angular/common';
2-
import { CommonEngine } from '@angular/ssr';
2+
import { CommonEngine } from '@angular/ssr/node';
33
import express from 'express';
44
import { fileURLToPath } from 'node:url';
55
import { dirname, join, resolve } from 'node:path';

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

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
22
import { MainNavComponent } from './main-nav/main-nav.component';
33

44
@Component({
5-
standalone: true,
65
selector: 'app-root',
76
templateUrl: './app.component.html',
87
styleUrls: ['./app.component.scss'],

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

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
} from '@ngu/carousel';
1111

1212
@Component({
13-
standalone: true,
1413
selector: 'app-banner-vertical',
1514
templateUrl: './banner-vertical.component.html',
1615
styleUrls: ['./banner-vertical.component.scss'],

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

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
} from '@ngu/carousel';
1111

1212
@Component({
13-
standalone: true,
1413
selector: 'app-banner',
1514
templateUrl: './banner.component.html',
1615
styleUrls: ['./banner.component.scss'],

‎apps/ngu-carousel-example/src/app/getting-started/getting-started.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
22

33
@Component({
4-
standalone: true,
54
selector: 'app-getting-started',
65
templateUrl: './getting-started.component.html',
76
styleUrls: ['./getting-started.component.scss'],

‎apps/ngu-carousel-example/src/app/main-nav/main-nav.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { MatSidenavContainer, MatSidenav, MatSidenavContent } from '@angular/mat
1010
import { map } from 'rxjs';
1111

1212
@Component({
13-
standalone: true,
1413
selector: 'app-main-nav',
1514
templateUrl: './main-nav.component.html',
1615
styleUrls: ['./main-nav.component.scss'],

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

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
} from '@ngu/carousel';
1111

1212
@Component({
13-
standalone: true,
1413
selector: 'app-tile-2-images',
1514
templateUrl: './tile-2-images.component.html',
1615
styleUrls: ['./tile-2-images.component.css'],

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

-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
} from '@ngu/carousel';
1212

1313
@Component({
14-
standalone: true,
1514
selector: 'app-tile',
1615
templateUrl: './tile.component.html',
1716
styleUrls: ['./tile.component.scss'],

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

-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
} from '@ngu/carousel';
1212

1313
@Component({
14-
standalone: true,
1514
selector: 'app-wrapped-carousel',
1615
templateUrl: 'wrapped-carousel.component.html',
1716
styleUrls: ['./wrapped-carousel.component.scss'],

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

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import data from '../../assets/mock/images.json';
33
import { WrappedCarouselComponent } from './wrapped-carousel/wrapped-carousel.component';
44

55
@Component({
6-
standalone: true,
76
selector: 'app-wrapped',
87
template: `<app-wrapped-carousel [items]="items()" [grid]="grid"></app-wrapped-carousel>`,
98
changeDetection: ChangeDetectionStrategy.OnPush,

‎libs/ngu/carousel/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "@ngu/carousel",
3-
"version": "18.0.0",
3+
"version": "19.0.0",
44
"peerDependencies": {
5-
"@angular/common": "^18.0.0",
6-
"@angular/core": "^18.0.0",
7-
"@angular/animations": "^18.0.0",
5+
"@angular/common": "^19.0.0",
6+
"@angular/core": "^19.0.0",
7+
"@angular/animations": "^19.0.0",
88
"hammerjs": "^2.0.0",
99
"rxjs": "^7.0.0"
1010
},

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

+6-12
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,28 @@
11
import { Directive, TemplateRef, ViewContainerRef, inject } from '@angular/core';
22

33
@Directive({
4-
selector: '[NguCarouselItem]',
5-
standalone: true
4+
selector: '[NguCarouselItem]'
65
})
76
export class NguCarouselItemDirective {}
87

98
@Directive({
10-
selector: '[NguCarouselNext]',
11-
standalone: true
9+
selector: '[NguCarouselNext]'
1210
})
1311
export class NguCarouselNextDirective {}
1412

1513
@Directive({
16-
selector: '[NguCarouselPrev]',
17-
standalone: true
14+
selector: '[NguCarouselPrev]'
1815
})
1916
export class NguCarouselPrevDirective {}
2017

2118
@Directive({
22-
selector: '[NguCarouselPoint]',
23-
standalone: true
19+
selector: '[NguCarouselPoint]'
2420
})
2521
export class NguCarouselPointDirective {}
2622

2723
@Directive({
2824
// eslint-disable-next-line @angular-eslint/directive-selector
29-
selector: '[nguCarouselDef]',
30-
standalone: true
25+
selector: '[nguCarouselDef]'
3126
})
3227
export class NguCarouselDefDirective<T> {
3328
template = inject(TemplateRef);
@@ -36,8 +31,7 @@ export class NguCarouselDefDirective<T> {
3631

3732
@Directive({
3833
// eslint-disable-next-line @angular-eslint/directive-selector
39-
selector: '[nguCarouselOutlet]',
40-
standalone: true
34+
selector: '[nguCarouselOutlet]'
4135
})
4236
export class NguCarouselOutlet {
4337
viewContainer = inject(ViewContainerRef);

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

+6-10
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,7 @@ const NG_DEV_MODE = typeof ngDevMode === 'undefined' || ngDevMode;
6161
styleUrls: ['ngu-carousel.component.scss'],
6262
changeDetection: ChangeDetectionStrategy.OnPush,
6363
providers: [NguCarouselHammerManager],
64-
imports: [NguCarouselOutlet],
65-
standalone: true
64+
imports: [NguCarouselOutlet]
6665
})
6766
export class NguCarousel<T, U extends NgIterable<T> = NgIterable<T>>
6867
extends NguCarouselStore
@@ -156,14 +155,11 @@ export class NguCarousel<T, U extends NgIterable<T> = NgIterable<T>>
156155
{ phase: AfterRenderPhase.EarlyRead }
157156
);
158157

159-
effect(
160-
() => {
161-
const _ = this._defDirectives();
162-
const data = this.dataSource();
163-
untracked(() => this._checkChanges(data));
164-
},
165-
{ allowSignalWrites: true }
166-
);
158+
effect(() => {
159+
const _ = this._defDirectives();
160+
const data = this.dataSource();
161+
untracked(() => this._checkChanges(data));
162+
});
167163

168164
effect(cleanup => {
169165
const prevButton = this.prevButton();

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

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Component } from '@angular/core';
22

33
@Component({
4-
standalone: true,
54
selector: 'ngu-item',
65
templateUrl: 'ngu-item.component.html',
76
host: {

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

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Component } from '@angular/core';
22

33
@Component({
4-
standalone: true,
54
selector: 'ngu-tile',
65
templateUrl: 'ngu-tile.component.html',
76
styleUrls: ['ngu-tile.component.scss'],

0 commit comments

Comments
 (0)