ngx-opalbytes-components 1.9.1 → 1.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -54,7 +54,7 @@ import { BaseButton } from 'ngx-opalbytes-components';
|
|
|
54
54
|
BaseButton // Adicione o componente aos imports
|
|
55
55
|
],
|
|
56
56
|
template: `
|
|
57
|
-
<cao-
|
|
57
|
+
<cao-button buttonText="Clique Aqui"></cao-button>
|
|
58
58
|
`
|
|
59
59
|
})
|
|
60
60
|
export class ExemploComponent { }
|
|
@@ -96,7 +96,7 @@ src/
|
|
|
96
96
|
### `BaseButton`
|
|
97
97
|
Um botão customizável com suporte a ícones, estado de loading e tooltip.
|
|
98
98
|
|
|
99
|
-
**Seletor:** `<cao-
|
|
99
|
+
**Seletor:** `<cao-button>`
|
|
100
100
|
|
|
101
101
|
**Atributos (Inputs)**
|
|
102
102
|
|
|
@@ -166,7 +166,7 @@ Um campo de entrada de texto customizável com suporte a ícones, máscaras e va
|
|
|
166
166
|
### `BaseAlert`
|
|
167
167
|
Um componente para exibir alertas de sucesso, erro, informação ou aviso. Geralmente utilizado com um serviço de diálogo.
|
|
168
168
|
|
|
169
|
-
**Seletor:** `<cao-
|
|
169
|
+
**Seletor:** `<cao-alert>`
|
|
170
170
|
|
|
171
171
|
**Atributos (Inputs via `data`)**
|
|
172
172
|
|
|
@@ -235,29 +235,12 @@ Para personalizar a aparência ou o comportamento dos alertas, você pode estend
|
|
|
235
235
|
}
|
|
236
236
|
```
|
|
237
237
|
|
|
238
|
-
3. **No seu `app.module.ts` ou onde seu serviço é provido, use o `CustomAlertService`**:
|
|
239
|
-
|
|
240
|
-
```typescript
|
|
241
|
-
// app.module.ts ou o módulo onde você quer usar o serviço customizado
|
|
242
|
-
import { NgModule } from '@angular/core';
|
|
243
|
-
import { AlertService } from 'ngx-opalbytes-components'; // Importe o serviço original
|
|
244
|
-
import { CustomAlertService } from './custom-alert.service'; // Importe seu serviço customizado
|
|
245
|
-
|
|
246
|
-
@NgModule({
|
|
247
|
-
providers: [
|
|
248
|
-
{ provide: AlertService, useClass: CustomAlertService } // Prover seu serviço customizado no lugar do original
|
|
249
|
-
]
|
|
250
|
-
})
|
|
251
|
-
export class AppModule { }
|
|
252
|
-
```
|
|
253
|
-
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.
|
|
254
|
-
|
|
255
238
|
---
|
|
256
239
|
|
|
257
240
|
### `BaseDialog`
|
|
258
241
|
Exibe uma caixa de diálogo modal para interações que exigem confirmação do usuário.
|
|
259
242
|
|
|
260
|
-
**Seletor:** `<cao-
|
|
243
|
+
**Seletor:** `<cao-dialog>`
|
|
261
244
|
|
|
262
245
|
**Atributos (Inputs via `config`)**
|
|
263
246
|
|
|
@@ -272,6 +255,80 @@ Exibe uma caixa de diálogo modal para interações que exigem confirmação do
|
|
|
272
255
|
| `onConfirm` | `() => void` | Função a ser executada na confirmação. |
|
|
273
256
|
| `onCancel` | `() => void` | Função a ser executada no cancelamento. |
|
|
274
257
|
|
|
258
|
+
|
|
259
|
+
**Como estender o `DialogService` para usar um componente de dialoga customizado:**
|
|
260
|
+
|
|
261
|
+
Para personalizar a aparência ou o comportamento dos dialogos, você pode estender o `DialogService` e sobrescrever o método `generateComponentPortal()`. Este método deve retornar o seu componente customizado, que **DEVE** estender o `BaseDialog`.
|
|
262
|
+
|
|
263
|
+
**Exemplo:**
|
|
264
|
+
|
|
265
|
+
1. **Crie seu componente de dialoga customizado** (ex: `CustomDialogComponent`):
|
|
266
|
+
|
|
267
|
+
```typescript
|
|
268
|
+
// custom-dialog.component.ts
|
|
269
|
+
import { Component } from '@angular/core';
|
|
270
|
+
import { BaseDialog } from 'ngx-opalbytes-components';
|
|
271
|
+
|
|
272
|
+
@Component({
|
|
273
|
+
selector: 'app-custom-dialog',
|
|
274
|
+
template: `
|
|
275
|
+
<div class="custom-dialog-container" [ngClass]="data.type">
|
|
276
|
+
<img *ngIf="data.dialogIcon" [src]="data.dialogIcon" alt="Dialog Icon" class="dialog-icon">
|
|
277
|
+
<div class="content">
|
|
278
|
+
<h3 class="title">{{ data.title }}</h3>
|
|
279
|
+
<p class="message">{{ data.message }}</p>
|
|
280
|
+
@if (config.cancelButtonText) {
|
|
281
|
+
<button
|
|
282
|
+
type="button"
|
|
283
|
+
class="cancel-button"
|
|
284
|
+
[attr.data-cy]="config.cancelButtonText"
|
|
285
|
+
(keydown)="handleCancel()"
|
|
286
|
+
(click)="handleCancel()">
|
|
287
|
+
{{ config.cancelButtonText }}
|
|
288
|
+
</button>
|
|
289
|
+
} @if (config.confirmButtonText) {
|
|
290
|
+
<button
|
|
291
|
+
type="button"
|
|
292
|
+
class="confirm-button"
|
|
293
|
+
[ngClass]="config.type"
|
|
294
|
+
[attr.data-cy]="config.confirmButtonText"
|
|
295
|
+
(click)="handleConfirm()"
|
|
296
|
+
(keydown)="handleConfirm()"
|
|
297
|
+
>
|
|
298
|
+
{{ config.confirmButtonText }}
|
|
299
|
+
</button>
|
|
300
|
+
}
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
`,
|
|
304
|
+
styles: [`
|
|
305
|
+
.custom-dialog-container {
|
|
306
|
+
/* seus estilos personalizados */
|
|
307
|
+
}
|
|
308
|
+
`]
|
|
309
|
+
})
|
|
310
|
+
export class CustomDialogComponent extends BaseDialog {
|
|
311
|
+
// Você pode adicionar lógica específica aqui se precisar
|
|
312
|
+
}
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
2. **Crie um serviço que estende o `DialogService`**:
|
|
316
|
+
|
|
317
|
+
```typescript
|
|
318
|
+
// custom-dialog.service.ts
|
|
319
|
+
import { Injectable } from '@angular/core';
|
|
320
|
+
import { DialogService } from 'ngx-opalbytes-components';
|
|
321
|
+
import { CustomDialogComponent } from './custom-dialog.component'; // Importe seu componente customizado
|
|
322
|
+
|
|
323
|
+
@Injectable({
|
|
324
|
+
providedIn: 'root'
|
|
325
|
+
})
|
|
326
|
+
export class CustomDialogService extends DialogService {
|
|
327
|
+
override generateComponentPortal(): typeof CustomDialogComponent {
|
|
328
|
+
return CustomDialogComponent;
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
```
|
|
275
332
|
---
|
|
276
333
|
|
|
277
334
|
### `FeatureBaseModal`
|
|
@@ -314,7 +371,7 @@ Um campo de preenchimento automático que funciona com `ngModel` ou `formControl
|
|
|
314
371
|
### `BaseTable`
|
|
315
372
|
Uma tabela de dados com ordenação, paginação e seleção de linhas. A configuração é feita através do `TableService`.
|
|
316
373
|
|
|
317
|
-
**Seletor:** `<cao-
|
|
374
|
+
**Seletor:** `<cao-table>`
|
|
318
375
|
|
|
319
376
|
**Atributos (Inputs)**
|
|
320
377
|
|
|
@@ -371,7 +428,7 @@ Uma tabela de dados leve com paginação no lado do cliente. Herda a maioria de
|
|
|
371
428
|
### `BaseTimeRange`
|
|
372
429
|
Um seletor de intervalo de datas.
|
|
373
430
|
|
|
374
|
-
**Seletor:** `<cao-
|
|
431
|
+
**Seletor:** `<cao-time-range>`
|
|
375
432
|
|
|
376
433
|
**Atributos (Inputs)**
|
|
377
434
|
|
|
@@ -86,11 +86,11 @@ class BaseButton {
|
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
89
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseButton, isStandalone: true, selector: "cao-
|
|
89
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseButton, isStandalone: true, selector: "cao-button", inputs: { buttonText: "buttonText", isDarkMode: "isDarkMode", isDisabled: "isDisabled", isLoading: "isLoading", btnClass: "btnClass", tooltip: "tooltip", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isLucideIcon: "isLucideIcon", dataCy: "dataCy" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n type=\"button\"\n matTooltipPosition=\"below\"\n matTooltipClass=\"custom-arrow-tooltip\"\n [matTooltip]=\"tooltip\"\n [matTooltipDisabled]=\"!tooltip\"\n [disabled]=\"isDisabled || isLoading\"\n [class.darkMode]=\"isDarkMode\"\n [class.disabled]=\"isDisabled\"\n [class.loading]=\"isLoading\"\n [ngClass]=\"btnClass\"\n [attr.data-cy]=\"dataCy\"\n (click)=\"onClick()\"\n (keydown)=\"onClick()\"\n >\n @if (leadingIcon) {\n <span [class]=\"isLucideIcon ? 'lucide-icons leading-icon' : 'leading-icon'\">\n @if(isLucideIcon) { \n <lucide-angular class=\"my-icon\" [name]=\"leadingIcon\" />\n } @else {\n <img alt=\"icon\" [ngSrc]=\"leadingIcon\" />\n }\n </span>\n } {{ buttonText }} @if (trailingIcon) {\n <span [class]=\"isLucideIcon ? 'lucide-icons trailing-icon' : 'trailing-icon'\">\n @if(isLucideIcon){ \n <lucide-angular class=\"my-icon\" [name]=\"trailingIcon\" />\n } @else {\n <img alt=\"icon\" [ngSrc]=\"trailingIcon\" />\n }\n </span>\n } @if (isLoading) {\n <span class=\"loader\"></span>\n }\n</button>\n", styles: ["button:hover{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
|
|
90
90
|
}
|
|
91
91
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseButton, decorators: [{
|
|
92
92
|
type: Component,
|
|
93
|
-
args: [{ selector: 'cao-
|
|
93
|
+
args: [{ selector: 'cao-button', imports: [CommonModule, MatTooltipModule, NgOptimizedImage, LucideAngularModule], template: "<button\n type=\"button\"\n matTooltipPosition=\"below\"\n matTooltipClass=\"custom-arrow-tooltip\"\n [matTooltip]=\"tooltip\"\n [matTooltipDisabled]=\"!tooltip\"\n [disabled]=\"isDisabled || isLoading\"\n [class.darkMode]=\"isDarkMode\"\n [class.disabled]=\"isDisabled\"\n [class.loading]=\"isLoading\"\n [ngClass]=\"btnClass\"\n [attr.data-cy]=\"dataCy\"\n (click)=\"onClick()\"\n (keydown)=\"onClick()\"\n >\n @if (leadingIcon) {\n <span [class]=\"isLucideIcon ? 'lucide-icons leading-icon' : 'leading-icon'\">\n @if(isLucideIcon) { \n <lucide-angular class=\"my-icon\" [name]=\"leadingIcon\" />\n } @else {\n <img alt=\"icon\" [ngSrc]=\"leadingIcon\" />\n }\n </span>\n } {{ buttonText }} @if (trailingIcon) {\n <span [class]=\"isLucideIcon ? 'lucide-icons trailing-icon' : 'trailing-icon'\">\n @if(isLucideIcon){ \n <lucide-angular class=\"my-icon\" [name]=\"trailingIcon\" />\n } @else {\n <img alt=\"icon\" [ngSrc]=\"trailingIcon\" />\n }\n </span>\n } @if (isLoading) {\n <span class=\"loader\"></span>\n }\n</button>\n", styles: ["button:hover{cursor:pointer}\n"] }]
|
|
94
94
|
}], propDecorators: { buttonClick: [{
|
|
95
95
|
type: Output
|
|
96
96
|
}], buttonText: [{
|
|
@@ -1177,11 +1177,11 @@ class BaseModal {
|
|
|
1177
1177
|
}
|
|
1178
1178
|
}
|
|
1179
1179
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1180
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BaseModal, isStandalone: true, selector: "cao-
|
|
1180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BaseModal, isStandalone: true, selector: "cao-modal", inputs: { showModal: "showModal", title: "title", data: "data", modalTypeClass: "modalTypeClass", modalClass: "modalClass", modalSize: "modalSize", closeOnOverlayClick: "closeOnOverlayClick" }, ngImport: i0, template: "<div aria-hidden=\"true\" class=\"modal\" tabIndex=\"0\" [class.show]=\"showModal\" (keydown)=\"onOverlayClick()\"\n (click)=\"onOverlayClick()\">\n <div aria-hidden=\"true\" class=\"modal-dialog\" tabIndex=\"1\" [ngClass]=\"[modalSize, modalClass]\"\n (keydown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n <ng-content />\n </div>\n</div>", styles: [".modal{width:100vw;height:100vh;align-items:center;justify-content:center;position:fixed;transition:.5s;top:-100vh;left:0}.modal .modal-dialog{padding:24px 34px;border-radius:20px;position:relative;max-width:1444px;height:auto;top:-100vh;transition:.5s;background-color:var(--bg-card);left:0}.modal .modal-dialog.custom{padding:0}.modal .modal-dialog.w-100{width:100%}.modal .modal-dialog.w-90{width:90%}.modal .modal-dialog.w-80{width:80%}.modal .modal-dialog.w-75{width:75%}.modal .modal-dialog.w-70{width:70%}.modal .modal-dialog.w-60{width:60%}.modal .modal-dialog.w-50{width:50%}.modal .modal-dialog.w-40{width:40%}.modal .modal-dialog.w-30{width:30%}.modal .modal-dialog.w-20{width:20%}.modal .modal-dialog.w-10{width:10%}.modal.show{z-index:1000;display:flex;top:0;background-color:#00000080}.modal.show .modal-dialog{top:0}@media(max-width:768px){.modal-dialog{width:90%;max-width:90vw;margin-left:0}}@media(min-width:769px){.modal-dialog{width:75%;margin-left:250px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1181
1181
|
}
|
|
1182
1182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModal, decorators: [{
|
|
1183
1183
|
type: Component,
|
|
1184
|
-
args: [{ selector: 'cao-
|
|
1184
|
+
args: [{ selector: 'cao-modal', imports: [CommonModule], template: "<div aria-hidden=\"true\" class=\"modal\" tabIndex=\"0\" [class.show]=\"showModal\" (keydown)=\"onOverlayClick()\"\n (click)=\"onOverlayClick()\">\n <div aria-hidden=\"true\" class=\"modal-dialog\" tabIndex=\"1\" [ngClass]=\"[modalSize, modalClass]\"\n (keydown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n <ng-content />\n </div>\n</div>", styles: [".modal{width:100vw;height:100vh;align-items:center;justify-content:center;position:fixed;transition:.5s;top:-100vh;left:0}.modal .modal-dialog{padding:24px 34px;border-radius:20px;position:relative;max-width:1444px;height:auto;top:-100vh;transition:.5s;background-color:var(--bg-card);left:0}.modal .modal-dialog.custom{padding:0}.modal .modal-dialog.w-100{width:100%}.modal .modal-dialog.w-90{width:90%}.modal .modal-dialog.w-80{width:80%}.modal .modal-dialog.w-75{width:75%}.modal .modal-dialog.w-70{width:70%}.modal .modal-dialog.w-60{width:60%}.modal .modal-dialog.w-50{width:50%}.modal .modal-dialog.w-40{width:40%}.modal .modal-dialog.w-30{width:30%}.modal .modal-dialog.w-20{width:20%}.modal .modal-dialog.w-10{width:10%}.modal.show{z-index:1000;display:flex;top:0;background-color:#00000080}.modal.show .modal-dialog{top:0}@media(max-width:768px){.modal-dialog{width:90%;max-width:90vw;margin-left:0}}@media(min-width:769px){.modal-dialog{width:75%;margin-left:250px}}\n"] }]
|
|
1185
1185
|
}], propDecorators: { showModal: [{
|
|
1186
1186
|
type: Input
|
|
1187
1187
|
}], title: [{
|
|
@@ -1222,11 +1222,11 @@ class BaseDialog {
|
|
|
1222
1222
|
this.closeDialog();
|
|
1223
1223
|
}
|
|
1224
1224
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1225
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseDialog, isStandalone: true, selector: "cao-
|
|
1225
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseDialog, isStandalone: true, selector: "cao-dialog", inputs: { config: "config" }, ngImport: i0, template: "\n<div class=\"dialog-container\">\n <div class=\"dialog-content\">\n <img alt=\"Logo\" class=\"logo\" [fill]=\"true\" [ngSrc]=\"config.logoIcon ?? ''\" />\n <div class=\"alert-wrapper\">\n <div class=\"text-content\" [ngClass]=\"config.type\">\n <div class=\"title\">{{ config.title }}</div>\n <div class=\"message\">{{ config.message }}</div>\n <div class=\"button-container\">\n @if (config.cancelButtonText) {\n <button\n type=\"button\"\n class=\"cancel-button\"\n [attr.data-cy]=\"config.cancelButtonText\"\n (keydown)=\"handleCancel()\"\n (click)=\"handleCancel()\">\n {{ config.cancelButtonText }}\n </button>\n } @if (config.confirmButtonText) {\n <button\n type=\"button\"\n class=\"confirm-button\"\n [ngClass]=\"config.type\"\n [attr.data-cy]=\"config.confirmButtonText\"\n (click)=\"handleConfirm()\"\n (keydown)=\"handleConfirm()\"\n >\n {{ config.confirmButtonText }}\n </button>\n }\n </div>\n </div>\n <div class=\"icon-container\">\n <img alt=\"Dialog Icon\" class=\"alert-icon\" [fill]=\"true\" [ngSrc]=\"getIconPath()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1000;background:#0009}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white);max-width:90%;margin-left:250px}.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}.button-container{display:flex;gap:10px}.confirm-button,.cancel-button{padding:10px 20px;border:none;border-radius:20px;cursor:pointer;font-weight:600;transition:all .3s ease}.confirm-button{color:var(--white);background-color:var(--primary)}.cancel-button{background-color:var(--disabled-button);color:var(--white)}.confirm-button:hover,.cancel-button:hover{opacity:.9}.text-content{flex-grow:1;padding-right:20px}.text-content .title{font-weight:700;font-size:20px;color:var(--primary);margin-bottom:10px}.text-content.success .title{color:var(--primary)}.text-content.error .title{color:var(--error-color)}.text-content.error .confirm-button{background-color:var(--error-color)}.text-content.warning .title{color:var(--support-orange)}.text-content.info .title{color:var(--primary)}.text-content.info .confirm-button{background-color:var(--primary)}.message{font-weight:400;font-size:16px;color:var(--message-color);margin-bottom:15px}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){.dialog-container{width:400px;max-width:90%;margin-left:0}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}.button-container{flex-direction:column;width:100%}.confirm-button,.cancel-button{width:100%;margin-bottom:10px}}\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"] }] });
|
|
1226
1226
|
}
|
|
1227
1227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialog, decorators: [{
|
|
1228
1228
|
type: Component,
|
|
1229
|
-
args: [{ selector: 'cao-
|
|
1229
|
+
args: [{ selector: 'cao-dialog', imports: [CommonModule, NgOptimizedImage], template: "\n<div class=\"dialog-container\">\n <div class=\"dialog-content\">\n <img alt=\"Logo\" class=\"logo\" [fill]=\"true\" [ngSrc]=\"config.logoIcon ?? ''\" />\n <div class=\"alert-wrapper\">\n <div class=\"text-content\" [ngClass]=\"config.type\">\n <div class=\"title\">{{ config.title }}</div>\n <div class=\"message\">{{ config.message }}</div>\n <div class=\"button-container\">\n @if (config.cancelButtonText) {\n <button\n type=\"button\"\n class=\"cancel-button\"\n [attr.data-cy]=\"config.cancelButtonText\"\n (keydown)=\"handleCancel()\"\n (click)=\"handleCancel()\">\n {{ config.cancelButtonText }}\n </button>\n } @if (config.confirmButtonText) {\n <button\n type=\"button\"\n class=\"confirm-button\"\n [ngClass]=\"config.type\"\n [attr.data-cy]=\"config.confirmButtonText\"\n (click)=\"handleConfirm()\"\n (keydown)=\"handleConfirm()\"\n >\n {{ config.confirmButtonText }}\n </button>\n }\n </div>\n </div>\n <div class=\"icon-container\">\n <img alt=\"Dialog Icon\" class=\"alert-icon\" [fill]=\"true\" [ngSrc]=\"getIconPath()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1000;background:#0009}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white);max-width:90%;margin-left:250px}.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}.button-container{display:flex;gap:10px}.confirm-button,.cancel-button{padding:10px 20px;border:none;border-radius:20px;cursor:pointer;font-weight:600;transition:all .3s ease}.confirm-button{color:var(--white);background-color:var(--primary)}.cancel-button{background-color:var(--disabled-button);color:var(--white)}.confirm-button:hover,.cancel-button:hover{opacity:.9}.text-content{flex-grow:1;padding-right:20px}.text-content .title{font-weight:700;font-size:20px;color:var(--primary);margin-bottom:10px}.text-content.success .title{color:var(--primary)}.text-content.error .title{color:var(--error-color)}.text-content.error .confirm-button{background-color:var(--error-color)}.text-content.warning .title{color:var(--support-orange)}.text-content.info .title{color:var(--primary)}.text-content.info .confirm-button{background-color:var(--primary)}.message{font-weight:400;font-size:16px;color:var(--message-color);margin-bottom:15px}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){.dialog-container{width:400px;max-width:90%;margin-left:0}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}.button-container{flex-direction:column;width:100%}.confirm-button,.cancel-button{width:100%;margin-bottom:10px}}\n"] }]
|
|
1230
1230
|
}], propDecorators: { config: [{
|
|
1231
1231
|
type: Input
|
|
1232
1232
|
}] } });
|
|
@@ -1243,7 +1243,7 @@ class BaseDialogService {
|
|
|
1243
1243
|
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
1244
1244
|
backdropClass: "dialog-backdrop",
|
|
1245
1245
|
});
|
|
1246
|
-
const dialogPortal = new ComponentPortal(
|
|
1246
|
+
const dialogPortal = new ComponentPortal(this.generateComponentPortal());
|
|
1247
1247
|
const componentRef = overlayRef.attach(dialogPortal);
|
|
1248
1248
|
componentRef.instance.config = config;
|
|
1249
1249
|
componentRef.instance.closeDialog = () => {
|
|
@@ -1251,6 +1251,9 @@ class BaseDialogService {
|
|
|
1251
1251
|
};
|
|
1252
1252
|
return overlayRef;
|
|
1253
1253
|
}
|
|
1254
|
+
generateComponentPortal() {
|
|
1255
|
+
return BaseDialog;
|
|
1256
|
+
}
|
|
1254
1257
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1255
1258
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, providedIn: "root" });
|
|
1256
1259
|
}
|
|
@@ -1681,11 +1684,11 @@ class BaseTable {
|
|
|
1681
1684
|
this.totalItems = this.dataSource.data.length;
|
|
1682
1685
|
}
|
|
1683
1686
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1684
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseTable, isStandalone: true, selector: "cao-base-table", inputs: { customClass: "customClass", pageSizeOptions: "pageSizeOptions", showFirstLastButtons: "showFirstLastButtons", isPaginatedByServer: "isPaginatedByServer" }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", firstPageClicked: "firstPageClicked", lastPageClicked: "lastPageClicked", selectionChanged: "selectionChanged", pageEvent: "pageEvent" }, providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBaseTable() }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"customClass\">\n @if (tableConfig) {\n <div class=\"table-controls\">\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </div>\n\n <table\n mat-table\n matSort\n class=\"mat-elevation-z8\"\n [dataSource]=\"dataSource\"\n (matSortChange)=\"announceSortChange($event)\">\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox\n data-cy=\"checkbox-select-all\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n (change)=\"$event ? toggleAllRows() : null\" />\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-select-row-' + row.id\"\n [checked]=\"selection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\" />\n </td>\n </ng-container>\n\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th *matHeaderCellDef mat-header-cell [mat-sort-header]=\"column\">\n <span>{{ getColumnHeader(column) }}</span>\n <img\n alt=\"icone\"\n [ngSrc]=\"'.src/assets/svg/arrow-left-double.svg'\"\n [fill]=\"true\"\n [matMenuTriggerFor]=\"menuColunas\" />\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </th>\n <td *matCellDef=\"let element\" mat-cell>\n @switch (getColumnType(column)) { @case ('STRING') {\n <span>{{ element[getColumnElement(column)] }}</span>\n } @case ('BOOLEAN') {\n <mat-checkbox\n disabled\n [attr.data-cy]=\"'checkbox-value-' + column + '-' + element.id\"\n [checked]=\"element[getColumnElement(column)]\" />\n } @case ('DATE') {\n <span>{{ element[getColumnElement(column)] | date:'mediumDate' }}</span>\n } @case ('NUMBER') {\n <span>{{ element[getColumnElement(column)] | number:'1.2-2' }}</span>\n } @case ('SINGLE_BUTTON') {\n <div>\n @for (btn of getColumnButtons(column); track btn) {\n <button\n mat-icon-button\n [type]=\"'button'\" [matTooltip]=\"btn.tooltip\" (click)=\"btn.onClick(element)\">\n <mat-icon>{{ btn.icon }}</mat-icon>\n </button>\n }\n </div>\n } @default {\n <span>{{ element[getColumnElement(column)] }}</span>\n } }\n </td>\n </ng-container>\n }\n\n <ng-container matColumnDef=\"footer\">\n <td *matFooterCellDef mat-footer-cell [attr.colspan]=\"displayedColumns.length + 1\">\n Total de Registros: {{ dataSource.data.length }}\n </td>\n </ng-container>\n\n <tr *matHeaderRowDef=\"getAllColumns()\" mat-header-row></tr>\n <tr\n *matRowDef=\"let row; columns: getAllColumns();\"\n mat-row\n (click)=\"selection.toggle(row)\"></tr>\n <tr *matFooterRowDef=\"['footer']\" mat-footer-row></tr>\n </table>\n }\n</div>\n\n<mat-paginator\n #paginator\n aria-label=\"Select page\"\n [length]=\"totalItems\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageIndex]=\"currentPage - 1\"\n [hidePageSize]=\"false\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n (page)=\"onPageEvent($event)\" />\n\n@if (!tableConfig || tableConfig.data.length === 0) {\n<div class=\"no-data-container\">\n <h2 class=\"no-data-title\">{{ tableConfig?.result?.noData || 'N\u00E3o h\u00E1 dados dispon\u00EDveis' }}</h2>\n <p class=\"no-data-message\"\n >{{ tableConfig?.result?.defaultMessage || 'Adicione alguns dados' }}</p\n >\n</div>\n}\n", styles: [".table-container{border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:100%;overflow:auto hidden}.table-container .table-controls{display:flex;align-items:center;padding:20px}.table-container .table-controls .filter-field{display:flex;align-items:center;justify-content:space-between;padding:10px;flex-direction:row;border:none;border-radius:10px;background-color:var(--input-disabled-bg);width:50%;height:55px}.table-container .table-controls .filter-field input:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}.table-container .table-controls .filter-field .input-filter{width:100%;box-sizing:border-box;background-color:transparent;border:none;transition:none}.table-container .table-controls .filter-field i{color:var(--icon-collor);margin-left:8px}.table-container .mat-mdc-table{width:max-content;min-width:100%;background-color:var(--table-body-color)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{border-right:none!important}.table-container .mat-mdc-table .mat-mdc-header-cell:not(:first-child),.table-container .mat-mdc-table .mat-mdc-cell:not(:first-child){border-right:1px solid var(--primary)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{width:60px;max-width:60px;min-width:60px;border-right:none}.table-container .mat-mdc-table .mat-mdc-header-row{background-color:var(--table-header)}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell{border-right:1px solid var(--white);font-weight:600;color:var(--white);border-bottom:1px solid var(--input-background);text-transform:uppercase;font-size:.875rem}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row{transition:background-color .2s ease}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell{border-right:1px solid var(--primary);color:var(--gray-dark);border-bottom:1px solid var(--input-background)}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row:hover{background-color:#0000000a}.table-container .mat-mdc-table .mat-mdc-row.selected{background-color:#3f51b51a}.table-container .mat-mdc-table .mat-mdc-checkbox{margin-right:12px}.table-container .mat-mdc-table .mat-mdc-checkbox .mdc-checkbox{--mdc-checkbox-unselected-icon-color: var(--gray-dark);--mdc-checkbox-selected-icon-color: var(--info)}.table-container .mat-mdc-table .mat-mdc-footer-row{background-color:var(--table-background);font-weight:600;color:var(--input-disabled-bg)}.table-container .mat-mdc-table .mat-mdc-footer-row .mat-mdc-footer-cell{padding:12px;text-align:left;color:var(--gray-dark)}.table-container span,.table-container img{margin-right:10px}.table-container[_ngcontent-ng-c1530403114] .mat-mdc-table[_ngcontent-ng-c1530403114] .mat-mdc-footer-row[_ngcontent-ng-c1530403114]{display:none}.no-data-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;font-size:1.1rem}.no-data-container .no-data-title{color:var(--table-header);margin-bottom:12px}.no-data-container .no-data-message{color:var(--table-header)}@media(max-width:768px){.table-container .table-controls{flex-direction:column;align-items:stretch}.table-container .table-controls .filter-field{margin-right:0;margin-bottom:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
1687
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseTable, isStandalone: true, selector: "cao-table", inputs: { customClass: "customClass", pageSizeOptions: "pageSizeOptions", showFirstLastButtons: "showFirstLastButtons", isPaginatedByServer: "isPaginatedByServer" }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", firstPageClicked: "firstPageClicked", lastPageClicked: "lastPageClicked", selectionChanged: "selectionChanged", pageEvent: "pageEvent" }, providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBaseTable() }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"customClass\">\n @if (tableConfig) {\n <div class=\"table-controls\">\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </div>\n\n <table\n mat-table\n matSort\n class=\"mat-elevation-z8\"\n [dataSource]=\"dataSource\"\n (matSortChange)=\"announceSortChange($event)\">\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox\n data-cy=\"checkbox-select-all\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n (change)=\"$event ? toggleAllRows() : null\" />\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-select-row-' + row.id\"\n [checked]=\"selection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\" />\n </td>\n </ng-container>\n\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th *matHeaderCellDef mat-header-cell [mat-sort-header]=\"column\">\n <span>{{ getColumnHeader(column) }}</span>\n <img\n alt=\"icone\"\n [ngSrc]=\"'.src/assets/svg/arrow-left-double.svg'\"\n [fill]=\"true\"\n [matMenuTriggerFor]=\"menuColunas\" />\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </th>\n <td *matCellDef=\"let element\" mat-cell>\n @switch (getColumnType(column)) { @case ('STRING') {\n <span>{{ element[getColumnElement(column)] }}</span>\n } @case ('BOOLEAN') {\n <mat-checkbox\n disabled\n [attr.data-cy]=\"'checkbox-value-' + column + '-' + element.id\"\n [checked]=\"element[getColumnElement(column)]\" />\n } @case ('DATE') {\n <span>{{ element[getColumnElement(column)] | date:'mediumDate' }}</span>\n } @case ('NUMBER') {\n <span>{{ element[getColumnElement(column)] | number:'1.2-2' }}</span>\n } @case ('SINGLE_BUTTON') {\n <div>\n @for (btn of getColumnButtons(column); track btn) {\n <button\n mat-icon-button\n [type]=\"'button'\" [matTooltip]=\"btn.tooltip\" (click)=\"btn.onClick(element)\">\n <mat-icon>{{ btn.icon }}</mat-icon>\n </button>\n }\n </div>\n } @default {\n <span>{{ element[getColumnElement(column)] }}</span>\n } }\n </td>\n </ng-container>\n }\n\n <ng-container matColumnDef=\"footer\">\n <td *matFooterCellDef mat-footer-cell [attr.colspan]=\"displayedColumns.length + 1\">\n Total de Registros: {{ dataSource.data.length }}\n </td>\n </ng-container>\n\n <tr *matHeaderRowDef=\"getAllColumns()\" mat-header-row></tr>\n <tr\n *matRowDef=\"let row; columns: getAllColumns();\"\n mat-row\n (click)=\"selection.toggle(row)\"></tr>\n <tr *matFooterRowDef=\"['footer']\" mat-footer-row></tr>\n </table>\n }\n</div>\n\n<mat-paginator\n #paginator\n aria-label=\"Select page\"\n [length]=\"totalItems\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageIndex]=\"currentPage - 1\"\n [hidePageSize]=\"false\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n (page)=\"onPageEvent($event)\" />\n\n@if (!tableConfig || tableConfig.data.length === 0) {\n<div class=\"no-data-container\">\n <h2 class=\"no-data-title\">{{ tableConfig?.result?.noData || 'N\u00E3o h\u00E1 dados dispon\u00EDveis' }}</h2>\n <p class=\"no-data-message\"\n >{{ tableConfig?.result?.defaultMessage || 'Adicione alguns dados' }}</p\n >\n</div>\n}\n", styles: [".table-container{border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:100%;overflow:auto hidden}.table-container .table-controls{display:flex;align-items:center;padding:20px}.table-container .table-controls .filter-field{display:flex;align-items:center;justify-content:space-between;padding:10px;flex-direction:row;border:none;border-radius:10px;background-color:var(--input-disabled-bg);width:50%;height:55px}.table-container .table-controls .filter-field input:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}.table-container .table-controls .filter-field .input-filter{width:100%;box-sizing:border-box;background-color:transparent;border:none;transition:none}.table-container .table-controls .filter-field i{color:var(--icon-collor);margin-left:8px}.table-container .mat-mdc-table{width:max-content;min-width:100%;background-color:var(--table-body-color)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{border-right:none!important}.table-container .mat-mdc-table .mat-mdc-header-cell:not(:first-child),.table-container .mat-mdc-table .mat-mdc-cell:not(:first-child){border-right:1px solid var(--primary)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{width:60px;max-width:60px;min-width:60px;border-right:none}.table-container .mat-mdc-table .mat-mdc-header-row{background-color:var(--table-header)}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell{border-right:1px solid var(--white);font-weight:600;color:var(--white);border-bottom:1px solid var(--input-background);text-transform:uppercase;font-size:.875rem}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row{transition:background-color .2s ease}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell{border-right:1px solid var(--primary);color:var(--gray-dark);border-bottom:1px solid var(--input-background)}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row:hover{background-color:#0000000a}.table-container .mat-mdc-table .mat-mdc-row.selected{background-color:#3f51b51a}.table-container .mat-mdc-table .mat-mdc-checkbox{margin-right:12px}.table-container .mat-mdc-table .mat-mdc-checkbox .mdc-checkbox{--mdc-checkbox-unselected-icon-color: var(--gray-dark);--mdc-checkbox-selected-icon-color: var(--info)}.table-container .mat-mdc-table .mat-mdc-footer-row{background-color:var(--table-background);font-weight:600;color:var(--input-disabled-bg)}.table-container .mat-mdc-table .mat-mdc-footer-row .mat-mdc-footer-cell{padding:12px;text-align:left;color:var(--gray-dark)}.table-container span,.table-container img{margin-right:10px}.table-container[_ngcontent-ng-c1530403114] .mat-mdc-table[_ngcontent-ng-c1530403114] .mat-mdc-footer-row[_ngcontent-ng-c1530403114]{display:none}.no-data-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;font-size:1.1rem}.no-data-container .no-data-title{color:var(--table-header);margin-bottom:12px}.no-data-container .no-data-message{color:var(--table-header)}@media(max-width:768px){.table-container .table-controls{flex-direction:column;align-items:stretch}.table-container .table-controls .filter-field{margin-right:0;margin-bottom:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
1685
1688
|
}
|
|
1686
1689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTable, decorators: [{
|
|
1687
1690
|
type: Component,
|
|
1688
|
-
args: [{ selector: "cao-
|
|
1691
|
+
args: [{ selector: "cao-table", imports: [CommonModule, MaterialModule, NgOptimizedImage], providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBaseTable() }], template: "<div class=\"table-container\" [ngClass]=\"customClass\">\n @if (tableConfig) {\n <div class=\"table-controls\">\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </div>\n\n <table\n mat-table\n matSort\n class=\"mat-elevation-z8\"\n [dataSource]=\"dataSource\"\n (matSortChange)=\"announceSortChange($event)\">\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox\n data-cy=\"checkbox-select-all\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n (change)=\"$event ? toggleAllRows() : null\" />\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-select-row-' + row.id\"\n [checked]=\"selection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\" />\n </td>\n </ng-container>\n\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th *matHeaderCellDef mat-header-cell [mat-sort-header]=\"column\">\n <span>{{ getColumnHeader(column) }}</span>\n <img\n alt=\"icone\"\n [ngSrc]=\"'.src/assets/svg/arrow-left-double.svg'\"\n [fill]=\"true\"\n [matMenuTriggerFor]=\"menuColunas\" />\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </th>\n <td *matCellDef=\"let element\" mat-cell>\n @switch (getColumnType(column)) { @case ('STRING') {\n <span>{{ element[getColumnElement(column)] }}</span>\n } @case ('BOOLEAN') {\n <mat-checkbox\n disabled\n [attr.data-cy]=\"'checkbox-value-' + column + '-' + element.id\"\n [checked]=\"element[getColumnElement(column)]\" />\n } @case ('DATE') {\n <span>{{ element[getColumnElement(column)] | date:'mediumDate' }}</span>\n } @case ('NUMBER') {\n <span>{{ element[getColumnElement(column)] | number:'1.2-2' }}</span>\n } @case ('SINGLE_BUTTON') {\n <div>\n @for (btn of getColumnButtons(column); track btn) {\n <button\n mat-icon-button\n [type]=\"'button'\" [matTooltip]=\"btn.tooltip\" (click)=\"btn.onClick(element)\">\n <mat-icon>{{ btn.icon }}</mat-icon>\n </button>\n }\n </div>\n } @default {\n <span>{{ element[getColumnElement(column)] }}</span>\n } }\n </td>\n </ng-container>\n }\n\n <ng-container matColumnDef=\"footer\">\n <td *matFooterCellDef mat-footer-cell [attr.colspan]=\"displayedColumns.length + 1\">\n Total de Registros: {{ dataSource.data.length }}\n </td>\n </ng-container>\n\n <tr *matHeaderRowDef=\"getAllColumns()\" mat-header-row></tr>\n <tr\n *matRowDef=\"let row; columns: getAllColumns();\"\n mat-row\n (click)=\"selection.toggle(row)\"></tr>\n <tr *matFooterRowDef=\"['footer']\" mat-footer-row></tr>\n </table>\n }\n</div>\n\n<mat-paginator\n #paginator\n aria-label=\"Select page\"\n [length]=\"totalItems\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageIndex]=\"currentPage - 1\"\n [hidePageSize]=\"false\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n (page)=\"onPageEvent($event)\" />\n\n@if (!tableConfig || tableConfig.data.length === 0) {\n<div class=\"no-data-container\">\n <h2 class=\"no-data-title\">{{ tableConfig?.result?.noData || 'N\u00E3o h\u00E1 dados dispon\u00EDveis' }}</h2>\n <p class=\"no-data-message\"\n >{{ tableConfig?.result?.defaultMessage || 'Adicione alguns dados' }}</p\n >\n</div>\n}\n", styles: [".table-container{border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:100%;overflow:auto hidden}.table-container .table-controls{display:flex;align-items:center;padding:20px}.table-container .table-controls .filter-field{display:flex;align-items:center;justify-content:space-between;padding:10px;flex-direction:row;border:none;border-radius:10px;background-color:var(--input-disabled-bg);width:50%;height:55px}.table-container .table-controls .filter-field input:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}.table-container .table-controls .filter-field .input-filter{width:100%;box-sizing:border-box;background-color:transparent;border:none;transition:none}.table-container .table-controls .filter-field i{color:var(--icon-collor);margin-left:8px}.table-container .mat-mdc-table{width:max-content;min-width:100%;background-color:var(--table-body-color)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{border-right:none!important}.table-container .mat-mdc-table .mat-mdc-header-cell:not(:first-child),.table-container .mat-mdc-table .mat-mdc-cell:not(:first-child){border-right:1px solid var(--primary)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{width:60px;max-width:60px;min-width:60px;border-right:none}.table-container .mat-mdc-table .mat-mdc-header-row{background-color:var(--table-header)}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell{border-right:1px solid var(--white);font-weight:600;color:var(--white);border-bottom:1px solid var(--input-background);text-transform:uppercase;font-size:.875rem}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row{transition:background-color .2s ease}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell{border-right:1px solid var(--primary);color:var(--gray-dark);border-bottom:1px solid var(--input-background)}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row:hover{background-color:#0000000a}.table-container .mat-mdc-table .mat-mdc-row.selected{background-color:#3f51b51a}.table-container .mat-mdc-table .mat-mdc-checkbox{margin-right:12px}.table-container .mat-mdc-table .mat-mdc-checkbox .mdc-checkbox{--mdc-checkbox-unselected-icon-color: var(--gray-dark);--mdc-checkbox-selected-icon-color: var(--info)}.table-container .mat-mdc-table .mat-mdc-footer-row{background-color:var(--table-background);font-weight:600;color:var(--input-disabled-bg)}.table-container .mat-mdc-table .mat-mdc-footer-row .mat-mdc-footer-cell{padding:12px;text-align:left;color:var(--gray-dark)}.table-container span,.table-container img{margin-right:10px}.table-container[_ngcontent-ng-c1530403114] .mat-mdc-table[_ngcontent-ng-c1530403114] .mat-mdc-footer-row[_ngcontent-ng-c1530403114]{display:none}.no-data-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;font-size:1.1rem}.no-data-container .no-data-title{color:var(--table-header);margin-bottom:12px}.no-data-container .no-data-message{color:var(--table-header)}@media(max-width:768px){.table-container .table-controls{flex-direction:column;align-items:stretch}.table-container .table-controls .filter-field{margin-right:0;margin-bottom:12px}}\n"] }]
|
|
1689
1692
|
}], ctorParameters: () => [], propDecorators: { customClass: [{
|
|
1690
1693
|
type: Input
|
|
1691
1694
|
}], pageSizeOptions: [{
|
|
@@ -2194,11 +2197,11 @@ class BaseAlert {
|
|
|
2194
2197
|
this.titleClass = `title-${this.data.type}`;
|
|
2195
2198
|
}
|
|
2196
2199
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2197
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseAlert, isStandalone: true, selector: "cao-
|
|
2200
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseAlert, isStandalone: true, selector: "cao-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 });
|
|
2198
2201
|
}
|
|
2199
2202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlert, decorators: [{
|
|
2200
2203
|
type: Component,
|
|
2201
|
-
args: [{ selector: 'cao-
|
|
2204
|
+
args: [{ selector: 'cao-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"] }]
|
|
2202
2205
|
}] });
|
|
2203
2206
|
|
|
2204
2207
|
class BaseAlertService {
|