@craftsjs/alert 5.1.0 → 6.1.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2020 Craftsjs
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2020 Craftsjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,145 +1,160 @@
-# craftsjs alert
-
-craftsjs alert is a library for angular
-
-[See demo](http://craftsjs.com/admin/components/modals-alerts)
-
-[Example code](https://stackblitz.com/edit/angular-alert-craftsjs)
-
-## Getting Started
-To get started, let's install the package through npm:
-
-Choose the version corresponding to your Angular version:
-
- | Angular | @craftsjs/alert |
- | ------- | --------------- |
- | 15      | 5.x             |
- | 13      | 4.x             |
- | 12      | 3.x             |
- | 11      | 2.x             |
- | 10      | 1.x             |
-
-```
-npm i @craftsjs/alert --S
-```
-
-Install peer dependencies
-
-```
-npm i
-@craftsjs/core
-@ngx-translate/core
-@angular/material
-@angular/cdk
-@angular/animations --S
-```
-
-## Configuration
-
-- First, you have to configure the library @ngx-translate/core to have the translation into the alert
-
-The library is configured as follows:
-
-```typescript
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-export function createTranslateLoader(http: HttpClient) {
-    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
-}
-@NgModule({
-    imports: [
-        HttpClientModule,
-        TranslateModule.forRoot({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: (createTranslateLoader),
-                deps: [HttpClient]
-            }
-        })
-    ]
-})
-export class AppModule { }
-```
-
-## How to use
-
-- Import the module AlertModule into the AppModule
-
-```typescript
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { AlertModule } from '@craftsjs/alert';
-@NgModule({
-  imports: [
-      BrowserModule,
-      BrowserAnimationsModule,
-      AlertModule.forRoot()
-  ]
-})
-export class AppModule { }
-```
-
-```typescript
-@Component()
-export class AlertComponent {
-
-  constructor(private _alertService: AlertService) { }
-
-  openDialog() {
-    this._alertService.showSimple('Alert', 'Simple alert');
-    // this._alertService.showSuccess('Success', 'Saved successfully');
-    // this._alertService.showWarning('Warn', 'Warning');
-    // this._alertService.showInfo('Info', 'Information');
-    // this._alertService.showError('Error', 'Error');
-  }
-
-  openDialodgConfirmation(){
-    const dialog = this._alertService.showConfirmation('Confirmation', 'Are you sure delete alert?');
-    dialog.beforeClose().subscribe((result) => {
-      if (!result) { return; }
-      switch (result.result) {
-        case 'ok':
-          console.log('ok');
-          break;
-        case 'cancel':
-          console.log('cancel');
-          break;
-      }
-    });
-  }
-}
-```
-
-```html
-    <button type="button" mat-raised-button color="primary" (click)="openDialog()">Alert warning</button>
-```
-
-- Finally, it is important to import the styles to the application
-
-```scss
-@import '~@craftsjs/alert/craftsjs-alert.theme';
-@import '~@angular/material/theming';
-
-$craftsjs-app-primary: mat-palette($mat-teal, 800);
-$craftsjs-app-accent:  mat-palette($mat-pink, 800, A100, 100);
-$craftsjs-app-warn: mat-palette($mat-red);
-$craftsjs-app-theme: mat-light-theme($craftsjs-app-primary, $craftsjs-app-accent, $craftsjs-app-warn);
-$craftsjs-theme-variables: (
-    color-info: #20a9d2,
-    color-success: #5cb85c,
-    color-danger: #d43934,
-    color-warning: #e09d3d
-);
-
-@include mat-core();
-body.theme-default{
-    @include angular-material-theme($craftsjs-app-theme);
-    @include alert($craftsjs-theme-variables);
-}
-```
-
-- Don't forget to put the theme-default class in the html body
-
-```html
-<body class="theme-default"></body>
-```
+# craftsjs alert
+
+craftsjs alert is a library for angular
+
+[See demo](http://craftsjs.com/admin/components/modals-alerts)
+
+[Example code](https://stackblitz.com/edit/angular-alert-craftsjs)
+
+## Getting Started
+To get started, let's install the package through npm:
+
+Choose the version corresponding to your Angular version:
+
+ | Angular | @craftsjs/alert |
+ | ------- | --------------- |
+ | 18      | 6.x             |
+ | 15      | 5.x             |
+ | 13      | 4.x             |
+ | 12      | 3.x             |
+ | 11      | 2.x             |
+
+```
+npm i @craftsjs/alert --S
+```
+
+## Compatibility
+
+Current version: 6.1.0 (Compatible with Angular v18)
+
+Install peer dependencies
+
+```
+npm i @craftsjs/core @ngx-translate/core @angular/material @angular/cdk @angular/animations --S
+```
+
+## Configuration (i18n optional)
+
+- If you want translations, configure `@ngx-translate/core` in your app. Example (standalone):
+
+The library is configured as follows:
+
+```typescript
+// main.ts
+import { bootstrapApplication, importProvidersFrom } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideCraftsjsAlert } from '@craftsjs/alert';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { AppComponent } from './app/app.component';
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideAnimations(),
+    provideCraftsjsAlert(),
+    importProvidersFrom(
+      HttpClientModule,
+      TranslateModule.forRoot({
+        loader: { provide: TranslateLoader, useFactory: createTranslateLoader, deps: [HttpClient] }
+      })
+    )
+  ]
+});
+```
+
+## How to use (standalone service)
+
+- Inject `AlertService` anywhere and call the helpers. The dialog component is standalone and provided by the service.
+
+```typescript
+import { Component } from '@angular/core';
+import { AlertService } from '@craftsjs/alert';
+
+@Component({
+  selector: 'app-alert-demo',
+  standalone: true,
+  template: `<button type="button" mat-raised-button color="primary" (click)="openDialog()">Alert warning</button>`
+})
+export class AlertDemoComponent {
+  constructor(private _alertService: AlertService) {}
+
+  openDialog() {
+    this._alertService.showSimple('Alert', 'Simple alert');
+    // this._alertService.showSuccess('Success', 'Saved successfully');
+    // this._alertService.showWarning('Warn', 'Warning');
+    // this._alertService.showInfo('Info', 'Information');
+    // this._alertService.showError('Error', 'Error');
+  }
+}
+```
+
+```typescript
+// Confirmation example
+const dialog = this._alertService.showConfirmation('Confirmation', 'Are you sure delete alert?');
+dialog.beforeClose().subscribe((result) => {
+  if (!result) { return; }
+  switch (result.result) {
+    case 'ok':
+      console.log('ok');
+      break;
+    case 'cancel':
+      console.log('cancel');
+      break;
+  }
+});
+```
+
+```html
+    <button type="button" mat-raised-button color="primary" (click)="openDialog()">Alert warning</button>
+```
+
+- Finally, it is important to import the styles to the application
+
+```scss
+@import '~@craftsjs/alert/craftsjs-alert.theme';
+@import '~@angular/material/theming';
+
+$craftsjs-app-primary: mat-palette($mat-teal, 800);
+$craftsjs-app-accent:  mat-palette($mat-pink, 800, A100, 100);
+$craftsjs-app-warn: mat-palette($mat-red);
+$craftsjs-app-theme: mat-light-theme($craftsjs-app-primary, $craftsjs-app-accent, $craftsjs-app-warn);
+$craftsjs-theme-variables: (
+    color-info: #20a9d2,
+    color-success: #5cb85c,
+    color-danger: #d43934,
+    color-warning: #e09d3d
+);
+
+@include mat-core();
+body.theme-default{
+    @include angular-material-theme($craftsjs-app-theme);
+    @include alert($craftsjs-theme-variables);
+}
+```
+
+- Don't forget to put the theme-default class in the html body
+  and ensure Angular Material animations are provided (e.g., `provideAnimations()` in main.ts).
+
+## NgModule (compatibility)
+
+```ts
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AlertModule } from '@craftsjs/alert';
+
+@NgModule({
+  imports: [
+    BrowserAnimationsModule,
+    AlertModule.forRoot()
+  ]
+})
+export class AppModule {}
+```
+
+```html
+<body class="theme-default"></body>
+```