ngx-opalbytes-components 1.9.0 → 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
|
}
|
|
@@ -1277,7 +1280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1277
1280
|
}]
|
|
1278
1281
|
}] });
|
|
1279
1282
|
|
|
1280
|
-
class
|
|
1283
|
+
class BaseTableService {
|
|
1281
1284
|
tableConfigSubject = new BehaviorSubject(null);
|
|
1282
1285
|
dataSubject = new BehaviorSubject([]);
|
|
1283
1286
|
columnsSubject = new BehaviorSubject([]);
|
|
@@ -1388,10 +1391,10 @@ class TableService {
|
|
|
1388
1391
|
updateTableData(data) {
|
|
1389
1392
|
this.setData(data);
|
|
1390
1393
|
}
|
|
1391
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
1392
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
1394
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1395
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTableService, providedIn: "root" });
|
|
1393
1396
|
}
|
|
1394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
1397
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTableService, decorators: [{
|
|
1395
1398
|
type: Injectable,
|
|
1396
1399
|
args: [{
|
|
1397
1400
|
providedIn: "root",
|
|
@@ -1445,7 +1448,7 @@ class BaseTable {
|
|
|
1445
1448
|
getAllColumns() {
|
|
1446
1449
|
return ["select", ...this.displayedColumns];
|
|
1447
1450
|
}
|
|
1448
|
-
tableService = inject(
|
|
1451
|
+
tableService = inject(BaseTableService);
|
|
1449
1452
|
liveAnnouncer = inject(LiveAnnouncer);
|
|
1450
1453
|
filterTableService = inject(BaseFilterTableService);
|
|
1451
1454
|
constructor() {
|
|
@@ -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: [{
|
|
@@ -1714,23 +1717,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1714
1717
|
args: [MatPaginator]
|
|
1715
1718
|
}] } });
|
|
1716
1719
|
|
|
1717
|
-
class
|
|
1720
|
+
class BaseFilterTablePaginatedService {
|
|
1718
1721
|
filterSubject = new Subject();
|
|
1719
1722
|
filter$ = this.filterSubject.asObservable();
|
|
1720
1723
|
updateFilter(filterValue) {
|
|
1721
1724
|
this.filterSubject.next(filterValue);
|
|
1722
1725
|
}
|
|
1723
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
1724
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
1726
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTablePaginatedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1727
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTablePaginatedService, providedIn: "root" });
|
|
1725
1728
|
}
|
|
1726
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
1729
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTablePaginatedService, decorators: [{
|
|
1727
1730
|
type: Injectable,
|
|
1728
1731
|
args: [{
|
|
1729
1732
|
providedIn: "root",
|
|
1730
1733
|
}]
|
|
1731
1734
|
}] });
|
|
1732
1735
|
|
|
1733
|
-
class
|
|
1736
|
+
class BasePaginationService {
|
|
1734
1737
|
pageSubject = new BehaviorSubject(1);
|
|
1735
1738
|
pageSizeSubject = new BehaviorSubject(10);
|
|
1736
1739
|
totalItemsSubject = new BehaviorSubject(0);
|
|
@@ -1791,10 +1794,10 @@ class PaginationService {
|
|
|
1791
1794
|
this.pageSizeSubject.next(10);
|
|
1792
1795
|
this.totalItemsSubject.next(0);
|
|
1793
1796
|
}
|
|
1794
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
1795
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
1797
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BasePaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1798
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BasePaginationService, providedIn: "root" });
|
|
1796
1799
|
}
|
|
1797
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
1800
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BasePaginationService, decorators: [{
|
|
1798
1801
|
type: Injectable,
|
|
1799
1802
|
args: [{
|
|
1800
1803
|
providedIn: "root",
|
|
@@ -1968,10 +1971,10 @@ class BaseTablePaginated {
|
|
|
1968
1971
|
pageSize = 10;
|
|
1969
1972
|
currentPage = 1;
|
|
1970
1973
|
previousPage = 1;
|
|
1971
|
-
paginationService = inject(
|
|
1974
|
+
paginationService = inject(BasePaginationService);
|
|
1972
1975
|
tableService = inject(TablePaginatedService);
|
|
1973
1976
|
liveAnnouncer = inject(LiveAnnouncer);
|
|
1974
|
-
filterTableService = inject(
|
|
1977
|
+
filterTableService = inject(BaseFilterTablePaginatedService);
|
|
1975
1978
|
constructor() {
|
|
1976
1979
|
this.initializeSortingAccessor();
|
|
1977
1980
|
this.initializeFilterPredicate();
|
|
@@ -2194,14 +2197,14 @@ 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
|
-
class
|
|
2207
|
+
class BaseAlertService {
|
|
2205
2208
|
overlay;
|
|
2206
2209
|
constructor(overlay) {
|
|
2207
2210
|
this.overlay = overlay;
|
|
@@ -2223,10 +2226,10 @@ class AlertService {
|
|
|
2223
2226
|
generateComponentPortal() {
|
|
2224
2227
|
return BaseAlert;
|
|
2225
2228
|
}
|
|
2226
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
2227
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
2229
|
+
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 });
|
|
2230
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, providedIn: "root" });
|
|
2228
2231
|
}
|
|
2229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
2232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseAlertService, decorators: [{
|
|
2230
2233
|
type: Injectable,
|
|
2231
2234
|
args: [{
|
|
2232
2235
|
providedIn: "root",
|
|
@@ -2241,5 +2244,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2241
2244
|
* Generated bundle index. Do not edit.
|
|
2242
2245
|
*/
|
|
2243
2246
|
|
|
2244
|
-
export {
|
|
2247
|
+
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 };
|
|
2245
2248
|
//# sourceMappingURL=ngx-opalbytes-components.mjs.map
|