ngx-opalbytes-components 1.8.1 → 1.9.1

package/README.md

@@ -179,6 +179,81 @@ Um componente para exibir alertas de sucesso, erro, informação ou aviso. Geral
 
 ---
 
+### `AlertService`
+O `AlertService` é responsável por exibir os alertas na tela. Por padrão, ele utiliza o componente `BaseAlert`.
+
+**Como estender o `AlertService` para usar um componente de alerta customizado:**
+
+Para personalizar a aparência ou o comportamento dos alertas, você pode estender o `AlertService` e sobrescrever o método `generateComponentPortal()`. Este método deve retornar o seu componente customizado, que **DEVE** estender o `BaseAlert`.
+
+**Exemplo:**
+
+1.  **Crie seu componente de alerta customizado** (ex: `CustomAlertComponent`):
+
+    ```typescript
+    // custom-alert.component.ts
+    import { Component } from '@angular/core';
+    import { BaseAlert } from 'ngx-opalbytes-components';
+
+    @Component({
+      selector: 'app-custom-alert',
+      template: `
+        <div class="custom-alert-container" [ngClass]="data.type">
+          <img *ngIf="data.alertIcon" [src]="data.alertIcon" alt="Alert Icon" class="alert-icon">
+          <div class="content">
+            <h3 class="title">{{ data.title }}</h3>
+            <p class="message">{{ data.message }}</p>
+          </div>
+        </div>
+      `,
+      styles: [`
+        .custom-alert-container {
+          /* seus estilos personalizados */
+        }
+      `]
+    })
+    export class CustomAlertComponent extends BaseAlert {
+      // Você pode adicionar lógica específica aqui se precisar
+    }
+    ```
+
+2.  **Crie um serviço que estende o `AlertService`**:
+
+    ```typescript
+    // custom-alert.service.ts
+    import { Injectable } from '@angular/core';
+    import { AlertService } from 'ngx-opalbytes-components';
+    import { CustomAlertComponent } from './custom-alert.component'; // Importe seu componente customizado
+
+    @Injectable({
+      providedIn: 'root'
+    })
+    export class CustomAlertService extends AlertService {
+      override generateComponentPortal(): typeof CustomAlertComponent {
+        return CustomAlertComponent;
+      }
+    }
+    ```
+
+3.  **No seu `app.module.ts` ou onde seu serviço é provido, use o `CustomAlertService`**:
+
+    ```typescript
+    // app.module.ts ou o módulo onde você quer usar o serviço customizado
+    import { NgModule } from '@angular/core';
+    import { AlertService } from 'ngx-opalbytes-components'; // Importe o serviço original
+    import { CustomAlertService } from './custom-alert.service'; // Importe seu serviço customizado
+
+    @NgModule({
+      providers: [
+        { provide: AlertService, useClass: CustomAlertService } // Prover seu serviço customizado no lugar do original
+      ]
+    })
+    export class AppModule { }
+    ```
+    Dessa forma, toda vez que você injetar e usar o `AlertService` em sua aplicação, na verdade estará utilizando o `CustomAlertService` que exibirá seu `CustomAlertComponent` personalizado.
+
+---
+
 ### `BaseDialog`
 Exibe uma caixa de diálogo modal para interações que exigem confirmação do usuário.
 

package/fesm2022/ngx-opalbytes-components.mjs

@@ -1277,7 +1277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
-class TableService {
+class BaseTableService {
     tableConfigSubject = new BehaviorSubject(null);
     dataSubject = new BehaviorSubject([]);
     columnsSubject = new BehaviorSubject([]);
@@ -1388,10 +1388,10 @@ class TableService {
     updateTableData(data) {
         this.setData(data);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableService, providedIn: "root" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTableService, providedIn: "root" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTableService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
@@ -1445,7 +1445,7 @@ class BaseTable {
     getAllColumns() {
         return ["select", ...this.displayedColumns];
     }
-    tableService = inject(TableService);
+    tableService = inject(BaseTableService);
     liveAnnouncer = inject(LiveAnnouncer);
     filterTableService = inject(BaseFilterTableService);
     constructor() {
@@ -1714,23 +1714,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: [MatPaginator]
             }] } });
 
-class FilterTablePaginatedService {
+class BaseFilterTablePaginatedService {
     filterSubject = new Subject();
     filter$ = this.filterSubject.asObservable();
     updateFilter(filterValue) {
         this.filterSubject.next(filterValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterTablePaginatedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterTablePaginatedService, providedIn: "root" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTablePaginatedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTablePaginatedService, providedIn: "root" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterTablePaginatedService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTablePaginatedService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
                 }]
         }] });
 
-class PaginationService {
+class BasePaginationService {
     pageSubject = new BehaviorSubject(1);
     pageSizeSubject = new BehaviorSubject(10);
     totalItemsSubject = new BehaviorSubject(0);
@@ -1791,10 +1791,10 @@ class PaginationService {
         this.pageSizeSubject.next(10);
         this.totalItemsSubject.next(0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationService, providedIn: "root" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BasePaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BasePaginationService, providedIn: "root" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BasePaginationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
@@ -1968,10 +1968,10 @@ class BaseTablePaginated {
     pageSize = 10;
     currentPage = 1;
     previousPage = 1;
-    paginationService = inject(PaginationService);
+    paginationService = inject(BasePaginationService);
     tableService = inject(TablePaginatedService);
     liveAnnouncer = inject(LiveAnnouncer);
-    filterTableService = inject(FilterTablePaginatedService);
+    filterTableService = inject(BaseFilterTablePaginatedService);
     constructor() {
         this.initializeSortingAccessor();
         this.initializeFilterPredicate();
@@ -2179,6 +2179,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: [MatPaginator]
             }] } });
 
+class BaseAlert {
+    data;
+    iconPath;
+    titleClass;
+    iconPaths = {
+        success: "https://placehold.co/600x400",
+        error: "https://placehold.co/600x400",
+        info: "https://placehold.co/600x400",
+        warning: "https://placehold.co/600x400",
+    };
+    ngOnInit() {
+        this.iconPath = this.iconPaths[this.data.type];
+        this.titleClass = `title-${this.data.type}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseAlert, isStandalone: true, selector: "cao-base-alert", ngImport: i0, template: "<div class=\"dialog-container\">\n  <div class=\"dialog-content\">\n    <img alt=\"Logo\" class=\"logo\" [ngSrc]=\"data.alertIcon ?? ''\" [fill]=\"true\" />\n    <div class=\"alert-wrapper\">\n      <div class=\"text-content\">\n        @if (data.title) {\n        <div class=\"title\" [ngClass]=\"titleClass\">{{ data.title }}</div>\n        } @if (data.title && data.message) {\n        <div class=\"message-spacer\"></div>\n        } @if (data.message) {\n        <div class=\"message\">{{ data.message }}</div>\n        }\n      </div>\n      <div class=\"icon-container\">\n        <img alt=\"Alert Icon\" class=\"alert-icon\" [ngSrc]=\"iconPath\" [fill]=\"true\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:fixed;top:10%;left:55%;transform:translate(-50%);z-index:1000;display:block;animation:slide-in .3s ease-out}@keyframes slide-in{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white)}.dialog-content{padding:20px 30px;box-sizing:border-box}.logo{width:150px;height:24px;margin-bottom:15px}.alert-wrapper{display:flex;align-items:center;justify-content:space-between}.text-content{flex-grow:1;margin:20px;padding-right:20px}.title{font-family:Lato,sans-serif;font-weight:700;font-size:24px;color:var(--primary);margin-bottom:5px}.title.success{color:var(--primary)}.title.error{color:var(--error-color)}.title.warning{color:var(--support-orange)}.title.info,.title.title-success{color:var(--primary)}.title.title-error{color:var(--error)}.title.title-warning{color:var(--support-orange)}.title.title-info{color:var(--primary)}.message-spacer{height:16px}.message{font-family:Lato,sans-serif;font-weight:400;font-size:26px;line-height:100%;color:var(--message-color)}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){:host{left:55%;max-width:95%}.dialog-container{max-width:90%;width:400px}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlert, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-base-alert', imports: [CommonModule, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dialog-container\">\n  <div class=\"dialog-content\">\n    <img alt=\"Logo\" class=\"logo\" [ngSrc]=\"data.alertIcon ?? ''\" [fill]=\"true\" />\n    <div class=\"alert-wrapper\">\n      <div class=\"text-content\">\n        @if (data.title) {\n        <div class=\"title\" [ngClass]=\"titleClass\">{{ data.title }}</div>\n        } @if (data.title && data.message) {\n        <div class=\"message-spacer\"></div>\n        } @if (data.message) {\n        <div class=\"message\">{{ data.message }}</div>\n        }\n      </div>\n      <div class=\"icon-container\">\n        <img alt=\"Alert Icon\" class=\"alert-icon\" [ngSrc]=\"iconPath\" [fill]=\"true\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{position:fixed;top:10%;left:55%;transform:translate(-50%);z-index:1000;display:block;animation:slide-in .3s ease-out}@keyframes slide-in{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white)}.dialog-content{padding:20px 30px;box-sizing:border-box}.logo{width:150px;height:24px;margin-bottom:15px}.alert-wrapper{display:flex;align-items:center;justify-content:space-between}.text-content{flex-grow:1;margin:20px;padding-right:20px}.title{font-family:Lato,sans-serif;font-weight:700;font-size:24px;color:var(--primary);margin-bottom:5px}.title.success{color:var(--primary)}.title.error{color:var(--error-color)}.title.warning{color:var(--support-orange)}.title.info,.title.title-success{color:var(--primary)}.title.title-error{color:var(--error)}.title.title-warning{color:var(--support-orange)}.title.title-info{color:var(--primary)}.message-spacer{height:16px}.message{font-family:Lato,sans-serif;font-weight:400;font-size:26px;line-height:100%;color:var(--message-color)}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){:host{left:55%;max-width:95%}.dialog-container{max-width:90%;width:400px}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}}\n"] }]
+        }] });
+
+class BaseAlertService {
+    overlay;
+    constructor(overlay) {
+        this.overlay = overlay;
+    }
+    defaultTime = 3000;
+    show(config) {
+        const overlayRef = this.overlay.create({
+            hasBackdrop: false,
+            positionStrategy: this.overlay.position().global().centerHorizontally().top("10%"),
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+        });
+        const alertPortal = new ComponentPortal(this.generateComponentPortal());
+        const componentRef = overlayRef.attach(alertPortal);
+        componentRef.instance.data = config;
+        setTimeout(() => {
+            overlayRef.dispose();
+        }, this.defaultTime);
+    }
+    generateComponentPortal() {
+        return BaseAlert;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: i1$4.Overlay }] });
+
 /*
  * Public API Surface of ngx-opalbytes-components
  */
@@ -2187,5 +2241,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseButton, BaseDialog, BaseDialogService, BaseFilterTableService, BaseInput, BaseModal, BaseModalService, BaseTable, BaseTablePaginated, BaseTimeRange, DropDownComponent, FilterTablePaginatedService, Footer, LinksButton, PaginationService, Paginator, RnvAutocompleteComponent, TablePaginatedService, TableService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
+export { BaseAlert, BaseAlertService, BaseButton, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseInput, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, DropDownComponent, Footer, LinksButton, Paginator, RnvAutocompleteComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
 //# sourceMappingURL=ngx-opalbytes-components.mjs.map