Merge branch 'main' into fix/derived-from-undefined-initial-value

.all-contributorsrc

@@ -353,6 +353,61 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "mauriziocescon",
+      "name": "Maurizio Cescon",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3672842?v=4",
+      "profile": "https://github.com/mauriziocescon",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "leonelvsc",
+      "name": "Leonel Franchelli",
+      "avatar_url": "https://avatars.githubusercontent.com/u/2332029?v=4",
+      "profile": "https://github.com/leonelvsc",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "lorenzodianni",
+      "name": "Lorenzo D'Ianni",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7217805?v=4",
+      "profile": "http://codepen.io/lorenzodianni/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "mikelgo",
+      "name": "Michael Berger",
+      "avatar_url": "https://avatars.githubusercontent.com/u/29756792?v=4",
+      "profile": "https://www.berger-engineering.io",
+      "contributions": [
+        "code",
+        "doc"
+      ]
+    },
+    {
+      "login": "illunix",
+      "name": "Maksymilian Szokalski",
+      "avatar_url": "https://avatars.githubusercontent.com/u/42069493?v=4",
+      "profile": "https://github.com/illunix",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Ostromecky",
+      "name": "Paweł Ostromecki",
+      "avatar_url": "https://avatars.githubusercontent.com/u/37908305?v=4",
+      "profile": "https://github.com/Ostromecky",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

CHANGELOG.md

@@ -1,3 +1,47 @@
+# 4.0.0 (2024-07-15)
+
+
+### Features
+
+- add deriveLoading RxJs-Operator ([#439](https://github.com/ngxtension/ngxtension-platform/pull/439))
+- add migration for self-closing tags ([#416](https://github.com/ngxtension/ngxtension-platform/pull/416))
+- add effectOnceIf helper function ([#419](https://github.com/ngxtension/ngxtension-platform/pull/419))
+- add migration for sfc components ([#420](https://github.com/ngxtension/ngxtension-platform/pull/420))
+- **create-repeat:** implement the function, docs and tests ([#380](https://github.com/ngxtension/ngxtension-platform/pull/380))
+- **explicitEffect:** addition of defer parameter; this parameter allows the computation not to execute immediately and only run on first deps change. ([#431](https://github.com/ngxtension/ngxtension-platform/pull/431))
+- **form events:** Create unified observable and signal data accessors for form events ([#391](https://github.com/ngxtension/ngxtension-platform/pull/391))
+
+### Bug Fixes
+
+- **computed-previous:** Don't return null for initial value, but return the current value of the source signal instead ([#281](https://github.com/ngxtension/ngxtension-platform/pull/281))
+- **plugin:** update all assignments ([#444](https://github.com/ngxtension/ngxtension-platform/pull/444))
+- **signal-input-migration:** preserve line endings ([#432](https://github.com/ngxtension/ngxtension-platform/pull/432))
+- ⚠️  **signal-slice:** simplify api to deal with typing issues ([#361](https://github.com/ngxtension/ngxtension-platform/pull/361))
+- **when-document-visible:** export the `whenDocumentVisible` operator… ([#425](https://github.com/ngxtension/ngxtension-platform/pull/425))
+
+### Documentation
+
+- add Kiskae as a contributor for code ([#436](https://github.com/ngxtension/ngxtension-platform/pull/436))
+- **signals:** some spanish translations ([#441](https://github.com/ngxtension/ngxtension-platform/pull/441))
+
+#### ⚠️  Breaking Changes
+
+- **signal-slice:** experimental actionEffects API has been removed from signalSlice
+
+### ❤️  Thank You
+
+- Enea Jahollari @eneajaho
+- Fabien Dehopré
+- Josh Morony
+- Kiskae @Kiskae
+- Lorenzo D'Ianni
+- Lucas Garcia @LcsGa
+- Maurizio Cescon
+- Michael Be
+- michael-small @michael-small
+- Sergi Dote Teixidor
+- Tim Deschryver @timdeschryver
+
 ## 3.5.5 (2024-06-18)
 
 

CONTRIBUTING.md

@@ -47,6 +47,7 @@ To contribute code to ngxtension, follow these steps:
 6. Create a pull request (PR) from your branch to the `main` branch of the `ngxtension-platform` repository on GitHub.
 7. Commit your changes following the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) convention.
 8. Provide a clear title and description for your PR, explaining the purpose and scope of your changes.
+9. In order that your changes are also publicly visible on our website make sure that you also add docs to the respective category in `docs/src/content/docs/utilities`.
 
 We will review your PR as soon as possible, and your contribution will be greatly appreciated!
 

README.md

@@ -7,7 +7,7 @@
 [![NPM](https://img.shields.io/npm/dw/ngxtension?logo=npm&style=flat-square)](https://npmjs.org/package/ngxtension)
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-38-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-44-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 A collection of utilities for [Angular](https://angular.dev).
@@ -105,6 +105,14 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://dafnik.me"><img src="https://avatars.githubusercontent.com/u/16242839?v=4?s=100" width="100px;" alt="Dominik"/><br /><sub><b>Dominik</b></sub></a><br /><a href="https://github.com/ngxtension/ngxtension-platform/commits?author=Dafnik" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/trong-nguyen/"><img src="https://avatars.githubusercontent.com/u/62984954?v=4?s=100" width="100px;" alt="Trong Nguyen"/><br /><sub><b>Trong Nguyen</b></sub></a><br /><a href="https://github.com/ngxtension/ngxtension-platform/commits?author=nguyenphutrong" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Kiskae"><img src="https://avatars.githubusercontent.com/u/546681?v=4?s=100" width="100px;" alt="Kiskae"/><br /><sub><b>Kiskae</b></sub></a><br /><a href="https://github.com/ngxtension/ngxtension-platform/commits?author=Kiskae" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/mauriziocescon"><img src="https://avatars.githubusercontent.com/u/3672842?v=4?s=100" width="100px;" alt="Maurizio Cescon"/><br /><sub><b>Maurizio Cescon</b></sub></a><br /><a href="https://github.com/ngxtension/ngxtension-platform/commits?author=mauriziocescon" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/leonelvsc"><img src="https://avatars.githubusercontent.com/u/2332029?v=4?s=100" width="100px;" alt="Leonel Franchelli"/><br /><sub><b>Leonel Franchelli</b></sub></a><br /><a href="https://github.com/ngxtension/ngxtension-platform/commits?author=leonelvsc" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://codepen.io/lorenzodianni/"><img src="https://avatars.githubusercontent.com/u/7217805?v=4?s=100" width="100px;" alt="Lorenzo D'Ianni"/><br /><sub><b>Lorenzo D'Ianni</b></sub></a><br /><a href="https://github.com/ngxtension/ngxtension-platform/commits?author=lorenzodianni" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.berger-engineering.io"><img src="https://avatars.githubusercontent.com/u/29756792?v=4?s=100" width="100px;" alt="Michael Berger"/><br /><sub><b>Michael Berger</b></sub></a><br /><a href="https://github.com/ngxtension/ngxtension-platform/commits?author=mikelgo" title="Code">💻</a> <a href="https://github.com/ngxtension/ngxtension-platform/commits?author=mikelgo" title="Documentation">📖</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/illunix"><img src="https://avatars.githubusercontent.com/u/42069493?v=4?s=100" width="100px;" alt="Maksymilian Szokalski"/><br /><sub><b>Maksymilian Szokalski</b></sub></a><br /><a href="https://github.com/ngxtension/ngxtension-platform/commits?author=illunix" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Ostromecky"><img src="https://avatars.githubusercontent.com/u/37908305?v=4?s=100" width="100px;" alt="Paweł Ostromecki"/><br /><sub><b>Paweł Ostromecki</b></sub></a><br /><a href="https://github.com/ngxtension/ngxtension-platform/commits?author=Ostromecky" title="Code">💻</a></td>
     </tr>
   </tbody>
   <tfoot>

apps/test-app/src/app/app.component.ts

@@ -48,6 +48,10 @@ import { RouterLink, RouterOutlet } from '@angular/router';
 			<li>
 				<a routerLink="/control-value-accessor">Control Value Accessor</a>
 			</li>
+
+			<li>
+				<a routerLink="/form-events">Form Events</a>
+			</li>
 		</ul>
 
 		<hr />

apps/test-app/src/app/app.config.ts

@@ -65,6 +65,10 @@ export const appConfig: ApplicationConfig = {
 					),
 				],
 			},
+			{
+				path: 'form-events',
+				loadComponent: () => import('./form-events/form-events.component'),
+			},
 			{
 				path: 'control-value-accessor',
 				loadComponent: () =>

apps/test-app/src/app/form-events/form-events.component.ts

@@ -0,0 +1,49 @@
+import { AsyncPipe, JsonPipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import {
+	NonNullableFormBuilder,
+	ReactiveFormsModule,
+	Validators,
+} from '@angular/forms';
+import { allEventsObservable, allEventsSignal } from 'ngxtension/form-events';
+
+@Component({
+	selector: 'ngxtension-platform-intl',
+	standalone: true,
+	imports: [ReactiveFormsModule, JsonPipe, AsyncPipe],
+	template: `
+		<form [formGroup]="form">
+			<label for="firstName">First Name</label>
+			<input formControlName="firstName" name="firstName" />
+			@if (form.controls.firstName.errors?.['required']) {
+				<p>First name is required</p>
+			}
+
+			<label for="lastName">Last Name</label>
+			<input formControlName="lastName" name="lastName" />
+
+			<br />
+
+			<button type="reset">Reset</button>
+		</form>
+		<pre>{{ $form() | json }}</pre>
+		<pre>{{ form$ | async | json }}</pre>
+	`,
+})
+export default class FormEventsComponent {
+	fb = inject(NonNullableFormBuilder);
+	form = this.fb.group({
+		firstName: this.fb.control('', Validators.required),
+		lastName: this.fb.control(''),
+	});
+
+	form$ = allEventsObservable(this.form);
+	$form = allEventsSignal(this.form);
+
+	formTyped$ = allEventsObservable<ReturnType<typeof this.form.getRawValue>>(
+		this.form,
+	);
+	$formTyped = allEventsSignal<ReturnType<typeof this.form.getRawValue>>(
+		this.form,
+	);
+}

docs/src/components/PageTitle.astro

@@ -5,8 +5,8 @@ import { Icon } from '@astrojs/starlight/components';
 
 const badge = Astro.props.entry.data.badge;
 const entryPoint = Astro.props.entry.data.entryPoint;
-const bundleJsUrl = `https://deno.bundlejs.com?q=ngxtension/${entryPoint}&treeshake=[*]&config={%22esbuild%22:{%22external%22:[%22rxjs%22,%22@angular/core%22,%22@angular/common%22,%22@angular/forms%22,%22@angular/router%22]}}`;
-const sourceCodeUrl = `https://github.com/nartc/ngxtension-platform/tree/main/libs/ngxtension/${entryPoint}`;
+const bundleJsUrl = `https://deno.bundlejs.com?q=${entryPoint}&treeshake=[*]&config={%22esbuild%22:{%22external%22:[%22rxjs%22,%22@angular/core%22,%22@angular/common%22,%22@angular/forms%22,%22@angular/router%22]}}`;
+const sourceCodeUrl = `https://github.com/ngxtension/ngxtension-platform/tree/main/libs/${entryPoint}`;
 
 const { size } = await fetch(bundleJsUrl)
 	.then((res) => {

docs/src/content/contributors/lorenzo-dianni.json

@@ -0,0 +1,6 @@
+{
+	"name": "Lorenzo D'Ianni",
+	"twitter": "https://x.com/lorenzodianni",
+	"linkedin": "https://www.linkedin.com/in/lorenzo-d-ianni-3990bba6/",
+	"github": "https://github.com/lorenzodianni"
+}

docs/src/content/contributors/lucas-garcia.json

@@ -1,3 +1,5 @@
 {
-	"name": "Lucas Garcia"
+	"name": "Lucas Garcia",
+	"twitter": "https://x.com/LcsGa_",
+	"github": "https://github.com/LcsGa"
 }

docs/src/content/contributors/michael-berger.json

@@ -0,0 +1,6 @@
+{
+	"name": "Michael Berger",
+	"twitter": "https://x.com/mikelgo812",
+	"github": "https://github.com/mikelgo",
+	"website": "https://www.berger-engineering.io/"
+}

docs/src/content/docs/es/getting-started/introduction.md

@@ -5,13 +5,13 @@ sidebar:
   order: 1
 ---
 
-`ngxtension` es una librería de utilidades para [Angular](https://angular.io). Consiste en una variedad de utilidades que facilitan el desarrollo de Angular y lo hacen más consistente.
+`ngxtension` es una librería de utilidades para [Angular](https://angular.dev). Consiste en una variedad de utilidades que facilitan el desarrollo de Angular y lo hacen más consistente.
 
 El proyecto fue iniciado por [Chau](https://github.com/nartc) junto con [Enea](https://twitter.com/Enea_Jahollari) y es completamente [de código abierto](https://github.com/nartc/ngxtension-platform). Agradecemos las contribuciones de todo tipo. Si tienes un problema o una idea, por favor [háznoslo saber](https://github.com/nartc/ngxtension-platform/issues/new).
 ¿Te encuentras agregando algo una y otra vez a cada proyecto de Angular? Eso es algo que queremos tener en `ngxtension`. Nuestra intención es que `ngxtension` sea "_todo vale_", pero también con consideración cuidadosa y código Angular de calidad para que `ngxtension` pueda convertirse en una tienda única para todos los desarrolladores de Angular.
 
 ## Consideración del tamaño del paquete(bundle)
 
-La biblioteca está compuesta enteramente por [Secondary Entry Point](https://angular.io/guide/angular-package-format#entrypoints-and-code-splitting). Aunque enviamos `ngxtension` como un solo paquete (para que sea fácil de instalar para los consumidores), el pipeline de construcción de Angular debe manejar adecuadamente la división de código y el tree-shaking para todos los puntos de entrada que `ngxtension` incluye.
+La biblioteca está compuesta enteramente por [Secondary Entry Point](https://angular.dev/tools/libraries/angular-package-format#entrypoints-and-code-splitting). Aunque enviamos `ngxtension` como un solo paquete (para que sea fácil de instalar para los consumidores), el pipeline de construcción de Angular debe manejar adecuadamente la división de código y el tree-shaking para todos los puntos de entrada que `ngxtension` incluye.
 
 El distintivo de tamaño GZIP (si está disponible) es proporcionado por [bundlejs](https://bundlejs.dev/) y se muestra como el tamaño empaquetado del punto de entrada y todas sus dependencias `ngxtension`. Por ejemplo, `ngxtension/connect` depende de `ngxtension/assert-injector` por lo que el distintivo de tamaño GZIP de `ngxtension/connect` será el tamaño empaquetado de `ngxtension/connect` y `ngxtension/assert-injector`.

docs/src/content/docs/es/utilities/Assets/svg-sprites.md

@@ -32,7 +32,7 @@ Sin `NgxSvgSpriteFragment`:
 
 ### Con la API de Composición de Directivas
 
-En tu proyecto, puedes utilizar la [API de Composición de Directivas](https://angular.io/guide/directive-composition-api) para crear sprites de svg específicos.
+En tu proyecto, puedes utilizar la [API de Composición de Directivas](https://angular.dev/guide/directives/directive-composition-api) para crear sprites de svg específicos.
 
 En este ejemplo, se crea un sprite svg de las _marcas de fontawesome_.
 

docs/src/content/docs/es/utilities/Directives/repeat.md

@@ -16,7 +16,7 @@ import { Repeat } from 'ngxtension/repeat';
 
 ### Básico
 
-Utiliza la directiva `Repeat` como una extensión de `NgFor` de Angular para iterar sobre un número fijo de iteraciones. La [`TrackByFunction`](https://angular.io/api/core/TrackByFunction) se establece automáticamente para iterar de manera eficiente.
+Utiliza la directiva `Repeat` como una extensión de `NgFor` de Angular para iterar sobre un número fijo de iteraciones. La [`TrackByFunction`](https://angular.dev/api/core/TrackByFunction) se establece automáticamente para iterar de manera eficiente.
 
 ```ts
 import { Component } from '@angular/core';

docs/src/content/docs/es/utilities/Directives/resize.mdx

@@ -19,7 +19,7 @@ El `resize` entry point expone 2 symbols:
 - `injectResize()`: un CIF que observa el evento de cambio de tamaño en el elemento Host del componente.
 - `NgxResize`: una directiva que puede observar el evento de cambio de tamaño de cualquier elemento al que esté adjunta.
 
-Ambos emiten el resultado del cambio de tamaño fuera de la [Zona Angular](https://angular.io/guide/zone) de forma predeterminada, pero ambos proporcionan una forma de configurar el comportamiento.
+Ambos emiten el resultado del cambio de tamaño fuera de la [Zona Angular](https://angular.dev/best-practices/zone-pollution) de forma predeterminada, pero ambos proporcionan una forma de configurar el comportamiento.
 
 ## Uso
 

docs/src/content/docs/es/utilities/Forms/control-value-accessor.md

@@ -6,7 +6,7 @@ badge: stable
 contributors: ['robby-rabbitman']
 ---
 
-`NgxControlValueAccessor` es una directiva para reducir la redundancia al construir componentes que implementan la interfaz [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor).
+`NgxControlValueAccessor` es una directiva para reducir la redundancia al construir componentes que implementan la interfaz [ControlValueAccessor](https://angular.dev/api/forms/ControlValueAccessor).
 
 ## Importar
 
@@ -16,7 +16,7 @@ import { NgxControlValueAccessor } from 'ngxtension/control-value-accessor';
 
 ## Uso
 
-`NgxControlValueAccessor` implementa la interfaz [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor) y expone una api _más simple_. Declara `NgxControlValueAccessor` en la sección `hostDirectives` de tu componente e inyecta la instancia para conectar tu plantilla:
+`NgxControlValueAccessor` implementa la interfaz [ControlValueAccessor](https://angular.dev/api/forms/ControlValueAccessor) y expone una api _más simple_. Declara `NgxControlValueAccessor` en la sección `hostDirectives` de tu componente e inyecta la instancia para conectar tu plantilla:
 
 - `NgxControlValueAccessor.value` para sincronizar el valor.
 - `NgxControlValueAccessor.disabled` para sincronizar el estado deshabilitado.

docs/src/content/docs/es/utilities/Injectors/assert-injector.md

@@ -6,9 +6,9 @@ entryPoint: assert-injector
 contributors: ['chau-tran']
 ---
 
-`assertInjector` es una extensión de [`assertInInjectionContext`](https://angular.io/api/core/assertInInjectionContext) que acepta una `Function` y un `Injector` personalizado opcional.
+`assertInjector` es una extensión de [`assertInInjectionContext`](https://angular.dev/api/core/assertInInjectionContext) que acepta una `Function` y un `Injector` personalizado opcional.
 
-`assertInjector` afirmará que la `Function` se invoque en un [Contexto de Inyección](https://angular.io/guide/dependency-injection-context) y devolverá un `Injector` **garantizado** ya sea el _personalizado_ que se pasa o el _predeterminado_.
+`assertInjector` afirmará que la `Function` se invoque en un [Contexto de Inyección](https://angular.dev/guide/di/dependency-injection-context) y devolverá un `Injector` **garantizado** ya sea el _personalizado_ que se pasa o el _predeterminado_.
 
 ```ts
 import { assertInjector } from 'ngxtension/assert-injector';

docs/src/content/docs/es/utilities/Injectors/create-injection-token.md

@@ -6,7 +6,7 @@ entryPoint: create-injection-token
 contributors: ['chau-tran']
 ---
 
-`createInjectionToken` es una abstacción sobre la creación de un [`InjectionToken`](https://angular.io/api/core/InjectionToken) y devuelve una tupla de `[injectFn, provideFn, TOKEN]`
+`createInjectionToken` es una abstacción sobre la creación de un [`InjectionToken`](https://angular.dev/api/core/InjectionToken) y devuelve una tupla de `[injectFn, provideFn, TOKEN]`
 
 Crear un `InjectionToken` no suele ser un gran problema, pero consumir el `InjectionToken` puede ser un poco tedioso si el proyecto utiliza `InjectionToken` mucho.
 

docs/src/content/docs/es/utilities/Intl/intl.md

@@ -10,7 +10,7 @@ Esto es una colección de pipes diseñados para aplicaciones Angular que aprovec
 
 Aunque no está pensado para reemplazar completamente los pipes estándar de Angular para `currency`, `date` y `number`, sirve como un kit de herramientas complementario para mejorar las funcionalidades existentes.
 
-El locale por defecto se determina mediante el token [`LOCALE_ID`](https://angular.io/api/core/LOCALE_ID). Al alterar esto se cambiará el locale para todos los pipes incluidos.
+El locale por defecto se determina mediante el token [`LOCALE_ID`](https://angular.dev/api/core/LOCALE_ID). Al alterar esto se cambiará el locale para todos los pipes incluidos.
 
 Como alternativa, puedes especificar el locale directamente como **último parámetro de cualquier pipe, anulando así la configuración por defecto**.