ngx-opalbytes-components 1.5.0 → 1.6.1

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.
Files changed (5) hide show
  1. package/README.md +14 -1
  2. package/fesm2022/ngx-opalbytes-components.mjs +1219 -16
  3. package/fesm2022/ngx-opalbytes-components.mjs.map +1 -1
  4. package/package.json +3 -2
  5. package/types/ngx-opalbytes-components.d.ts +297 -8
package/fesm2022/ngx-opalbytes-components.mjs CHANGED
@@ -1,9 +1,59 @@
1
1
  import * as i1 from '@angular/common';
2
2
  import { CommonModule, NgOptimizedImage } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { EventEmitter, Input, Output, Component } from '@angular/core';
4
+ import { EventEmitter, Input, Output, Component, ChangeDetectionStrategy, NgModule, Injectable, ViewChild, forwardRef, ViewEncapsulation, inject } from '@angular/core';
5
5
  import * as i2 from '@angular/material/tooltip';
6
6
  import { MatTooltipModule } from '@angular/material/tooltip';
7
+ import * as i3 from 'lucide-angular';
8
+ import { LucideAngularModule } from 'lucide-angular';
9
+ import { SelectionModel } from '@angular/cdk/collections';
10
+ import * as i7 from '@angular/material/paginator';
11
+ import { MatPaginatorModule, MatPaginatorIntl, MatPaginator } from '@angular/material/paginator';
12
+ import * as i8 from '@angular/material/sort';
13
+ import { MatSortModule, MatSort } from '@angular/material/sort';
14
+ import * as i9 from '@angular/material/table';
15
+ import { MatTableModule, MatTableDataSource } from '@angular/material/table';
16
+ import { Subject, BehaviorSubject, startWith, map as map$1 } from 'rxjs';
17
+ import { map } from 'rxjs/operators';
18
+ import { OverlayModule } from '@angular/cdk/overlay';
19
+ import * as i5$1 from '@angular/material/autocomplete';
20
+ import { MatAutocompleteModule } from '@angular/material/autocomplete';
21
+ import * as i3$1 from '@angular/material/button';
22
+ import { MatButtonModule } from '@angular/material/button';
23
+ import { MatCardModule } from '@angular/material/card';
24
+ import * as i4 from '@angular/material/checkbox';
25
+ import { MatCheckboxModule } from '@angular/material/checkbox';
26
+ import { MatChipsModule } from '@angular/material/chips';
27
+ import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
28
+ import * as i2$2 from '@angular/material/datepicker';
29
+ import { MatDatepickerModule, MatDateRangeInput } from '@angular/material/datepicker';
30
+ import { MatDialogModule } from '@angular/material/dialog';
31
+ import { MatDividerModule } from '@angular/material/divider';
32
+ import { MatExpansionModule } from '@angular/material/expansion';
33
+ import * as i1$2 from '@angular/material/form-field';
34
+ import { MatFormFieldModule } from '@angular/material/form-field';
35
+ import * as i5 from '@angular/material/icon';
36
+ import { MatIconModule } from '@angular/material/icon';
37
+ import * as i4$1 from '@angular/material/input';
38
+ import { MatInputModule } from '@angular/material/input';
39
+ import { MatListModule } from '@angular/material/list';
40
+ import * as i6 from '@angular/material/menu';
41
+ import { MatMenuModule } from '@angular/material/menu';
42
+ import { MatProgressBarModule } from '@angular/material/progress-bar';
43
+ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
44
+ import { MatRadioModule } from '@angular/material/radio';
45
+ import { MatSelectModule } from '@angular/material/select';
46
+ import { MatSidenavModule } from '@angular/material/sidenav';
47
+ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
48
+ import { MatSliderModule } from '@angular/material/slider';
49
+ import { MatSnackBarModule } from '@angular/material/snack-bar';
50
+ import { MatTabsModule } from '@angular/material/tabs';
51
+ import { MatToolbarModule } from '@angular/material/toolbar';
52
+ import { MatTreeModule } from '@angular/material/tree';
53
+ import * as i1$1 from '@angular/cdk/a11y';
54
+ import * as i2$1 from '@angular/forms';
55
+ import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
56
+ import { Router, ActivatedRoute } from '@angular/router';
7
57
 
8
58
  class BaseButton {
9
59
  buttonClick = new EventEmitter();
@@ -11,11 +61,11 @@ class BaseButton {
11
61
  isDarkMode = false;
12
62
  isDisabled = false;
13
63
  isLoading = false;
14
- useMaterialIcons = false;
15
64
  btnClass = "";
16
65
  tooltip;
17
66
  trailingIcon;
18
67
  leadingIcon;
68
+ isLucideIcon = true;
19
69
  dataCy;
20
70
  ngOnInit() {
21
71
  if (!this.dataCy) {
@@ -31,11 +81,11 @@ class BaseButton {
31
81
  }
32
82
  }
33
83
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
34
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: BaseButton, isStandalone: true, selector: "cao-base-button", inputs: { buttonText: "buttonText", isDarkMode: "isDarkMode", isDisabled: "isDisabled", isLoading: "isLoading", useMaterialIcons: "useMaterialIcons", btnClass: "btnClass", tooltip: "tooltip", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", 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 @if (leadingIcon) {\n <span [class]=\"useMaterialIcons ? 'material-icons leading-icon' : 'leading-icon'\">\n @if(useMaterialIcons) { {{ leadingIcon }} } @else {\n <img alt=\"icon\" [ngSrc]=\"leadingIcon\" />\n }\n </span>\n } {{ buttonText }} @if (trailingIcon) {\n <span [class]=\"useMaterialIcons ? 'material-icons trailing-icon' : 'trailing-icon'\">\n @if(useMaterialIcons){ {{ trailingIcon }} } @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: i2.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"] }] });
84
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: BaseButton, isStandalone: true, selector: "cao-base-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: i2.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.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
35
85
  }
36
86
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseButton, decorators: [{
37
87
  type: Component,
38
- args: [{ selector: 'cao-base-button', imports: [CommonModule, MatTooltipModule, NgOptimizedImage], 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 @if (leadingIcon) {\n <span [class]=\"useMaterialIcons ? 'material-icons leading-icon' : 'leading-icon'\">\n @if(useMaterialIcons) { {{ leadingIcon }} } @else {\n <img alt=\"icon\" [ngSrc]=\"leadingIcon\" />\n }\n </span>\n } {{ buttonText }} @if (trailingIcon) {\n <span [class]=\"useMaterialIcons ? 'material-icons trailing-icon' : 'trailing-icon'\">\n @if(useMaterialIcons){ {{ trailingIcon }} } @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"] }]
88
+ args: [{ selector: 'cao-base-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"] }]
39
89
  }], propDecorators: { buttonClick: [{
40
90
  type: Output
41
91
  }], buttonText: [{
@@ -46,8 +96,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
46
96
  type: Input
47
97
  }], isLoading: [{
48
98
  type: Input
49
- }], useMaterialIcons: [{
50
- type: Input
51
99
  }], btnClass: [{
52
100
  type: Input
53
101
  }], tooltip: [{
@@ -56,30 +104,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
56
104
  type: Input
57
105
  }], leadingIcon: [{
58
106
  type: Input
107
+ }], isLucideIcon: [{
108
+ type: Input
59
109
  }], dataCy: [{
60
110
  type: Input
61
111
  }] } });
62
112
 
63
113
  class BaseAlert {
64
114
  data;
115
+ iconPath;
116
+ titleClass;
65
117
  iconPaths = {
66
118
  success: "https://placehold.co/600x400",
67
119
  error: "https://placehold.co/600x400",
68
120
  info: "https://placehold.co/600x400",
69
121
  warning: "https://placehold.co/600x400",
70
122
  };
71
- getIconPath(type) {
72
- return this.iconPaths[type];
73
- }
74
- getTitleClass(type) {
75
- return `title-${type}`;
123
+ ngOnInit() {
124
+ this.iconPath = this.iconPaths[this.data.type];
125
+ this.titleClass = `title-${this.data.type}`;
76
126
  }
77
127
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
78
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: BaseAlert, isStandalone: true, selector: "cao-base-alert", ngImport: i0, template: "<div class=\"dialog-container\">\n <div class=\"dialog-content\">\n <img alt=\"R-Clinicas 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]=\"getTitleClass(data.type)\">{{ 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]=\"getIconPath(data.type)\" [fill]=\"true\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [""], 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"] }] });
128
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: BaseAlert, isStandalone: true, selector: "cao-base-alert", ngImport: i0, template: "<div class=\"dialog-container\">\n <div class=\"dialog-content\">\n <img alt=\"R-Clinicas 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: [""], 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 });
79
129
  }
80
130
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseAlert, decorators: [{
81
131
  type: Component,
82
- args: [{ selector: 'cao-base-alert', imports: [CommonModule, NgOptimizedImage], template: "<div class=\"dialog-container\">\n <div class=\"dialog-content\">\n <img alt=\"R-Clinicas 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]=\"getTitleClass(data.type)\">{{ 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]=\"getIconPath(data.type)\" [fill]=\"true\" />\n </div>\n </div>\n </div>\n</div>\n" }]
132
+ args: [{ selector: 'cao-base-alert', imports: [CommonModule, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dialog-container\">\n <div class=\"dialog-content\">\n <img alt=\"R-Clinicas 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" }]
83
133
  }] });
84
134
 
85
135
  class BaseDialog {
@@ -106,15 +156,1168 @@ class BaseDialog {
106
156
  this.closeDialog();
107
157
  }
108
158
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
109
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: BaseDialog, isStandalone: true, selector: "cao-base-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 (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 {{ 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: [""], 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"] }] });
159
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: BaseDialog, isStandalone: true, selector: "cao-base-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: [""], 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"] }] });
110
160
  }
111
161
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseDialog, decorators: [{
112
162
  type: Component,
113
- args: [{ selector: 'cao-base-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 (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 {{ 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" }]
163
+ args: [{ selector: 'cao-base-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" }]
114
164
  }], propDecorators: { config: [{
115
165
  type: Input
116
166
  }] } });
117
167
 
168
+ const modules = [
169
+ OverlayModule,
170
+ MatSnackBarModule,
171
+ MatAutocompleteModule,
172
+ MatButtonModule,
173
+ MatCardModule,
174
+ MatCheckboxModule,
175
+ MatChipsModule,
176
+ MatDatepickerModule,
177
+ MatDialogModule,
178
+ MatDividerModule,
179
+ MatExpansionModule,
180
+ MatFormFieldModule,
181
+ MatIconModule,
182
+ MatInputModule,
183
+ MatMenuModule,
184
+ MatNativeDateModule,
185
+ MatProgressBarModule,
186
+ MatProgressSpinnerModule,
187
+ MatPaginatorModule,
188
+ MatRadioModule,
189
+ MatSliderModule,
190
+ MatSlideToggleModule,
191
+ MatSortModule,
192
+ MatSelectModule,
193
+ MatTableModule,
194
+ MatTabsModule,
195
+ MatTooltipModule,
196
+ MatSidenavModule,
197
+ MatListModule,
198
+ MatToolbarModule,
199
+ MatTreeModule,
200
+ ];
201
+ class MaterialModule {
202
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
203
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: MaterialModule, imports: [OverlayModule,
204
+ MatSnackBarModule,
205
+ MatAutocompleteModule,
206
+ MatButtonModule,
207
+ MatCardModule,
208
+ MatCheckboxModule,
209
+ MatChipsModule,
210
+ MatDatepickerModule,
211
+ MatDialogModule,
212
+ MatDividerModule,
213
+ MatExpansionModule,
214
+ MatFormFieldModule,
215
+ MatIconModule,
216
+ MatInputModule,
217
+ MatMenuModule,
218
+ MatNativeDateModule,
219
+ MatProgressBarModule,
220
+ MatProgressSpinnerModule,
221
+ MatPaginatorModule,
222
+ MatRadioModule,
223
+ MatSliderModule,
224
+ MatSlideToggleModule,
225
+ MatSortModule,
226
+ MatSelectModule,
227
+ MatTableModule,
228
+ MatTabsModule,
229
+ MatTooltipModule,
230
+ MatSidenavModule,
231
+ MatListModule,
232
+ MatToolbarModule,
233
+ MatTreeModule], exports: [OverlayModule,
234
+ MatSnackBarModule,
235
+ MatAutocompleteModule,
236
+ MatButtonModule,
237
+ MatCardModule,
238
+ MatCheckboxModule,
239
+ MatChipsModule,
240
+ MatDatepickerModule,
241
+ MatDialogModule,
242
+ MatDividerModule,
243
+ MatExpansionModule,
244
+ MatFormFieldModule,
245
+ MatIconModule,
246
+ MatInputModule,
247
+ MatMenuModule,
248
+ MatNativeDateModule,
249
+ MatProgressBarModule,
250
+ MatProgressSpinnerModule,
251
+ MatPaginatorModule,
252
+ MatRadioModule,
253
+ MatSliderModule,
254
+ MatSlideToggleModule,
255
+ MatSortModule,
256
+ MatSelectModule,
257
+ MatTableModule,
258
+ MatTabsModule,
259
+ MatTooltipModule,
260
+ MatSidenavModule,
261
+ MatListModule,
262
+ MatToolbarModule,
263
+ MatTreeModule] });
264
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MaterialModule, providers: [{ provide: MAT_DATE_LOCALE, useValue: "pt-BR" }], imports: [modules, OverlayModule,
265
+ MatSnackBarModule,
266
+ MatAutocompleteModule,
267
+ MatButtonModule,
268
+ MatCardModule,
269
+ MatCheckboxModule,
270
+ MatChipsModule,
271
+ MatDatepickerModule,
272
+ MatDialogModule,
273
+ MatDividerModule,
274
+ MatExpansionModule,
275
+ MatFormFieldModule,
276
+ MatIconModule,
277
+ MatInputModule,
278
+ MatMenuModule,
279
+ MatNativeDateModule,
280
+ MatProgressBarModule,
281
+ MatProgressSpinnerModule,
282
+ MatPaginatorModule,
283
+ MatRadioModule,
284
+ MatSliderModule,
285
+ MatSlideToggleModule,
286
+ MatSortModule,
287
+ MatSelectModule,
288
+ MatTableModule,
289
+ MatTabsModule,
290
+ MatTooltipModule,
291
+ MatSidenavModule,
292
+ MatListModule,
293
+ MatToolbarModule,
294
+ MatTreeModule] });
295
+ }
296
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MaterialModule, decorators: [{
297
+ type: NgModule,
298
+ args: [{
299
+ imports: [modules],
300
+ exports: [modules],
301
+ providers: [{ provide: MAT_DATE_LOCALE, useValue: "pt-BR" }],
302
+ }]
303
+ }] });
304
+
305
+ class FilterTableService {
306
+ filterSubject = new Subject();
307
+ filter$ = this.filterSubject.asObservable();
308
+ updateFilter(filterValue) {
309
+ this.filterSubject.next(filterValue);
310
+ }
311
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FilterTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
312
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FilterTableService, providedIn: "root" });
313
+ }
314
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FilterTableService, decorators: [{
315
+ type: Injectable,
316
+ args: [{
317
+ providedIn: "root",
318
+ }]
319
+ }] });
320
+ class TableService {
321
+ tableConfigSubject = new BehaviorSubject(null);
322
+ dataSubject = new BehaviorSubject([]);
323
+ columnsSubject = new BehaviorSubject([]);
324
+ tableConfig$ = this.tableConfigSubject.asObservable();
325
+ columns$ = this.columnsSubject.asObservable();
326
+ data$ = this.dataSubject.asObservable();
327
+ visibleColumns$ = this.columns$.pipe(map((columns) => columns.filter((col) => col.visible).map((col) => col.key || col.element || "")));
328
+ createTable(data, columns, customConfig) {
329
+ const tableConfig = {
330
+ columns: columns ? columns.map((col) => col.key || col.element || "") : [],
331
+ data,
332
+ columnData: {},
333
+ result: {
334
+ noData: "Não há dados para o filtro selecionado.",
335
+ defaultMessage: "Nenhum resultado encontrado.",
336
+ },
337
+ ...customConfig,
338
+ };
339
+ if (data.length > 0 && columns) {
340
+ const columnData = {};
341
+ columns.forEach((col) => {
342
+ columnData[col.key || col.element || ""] = {
343
+ ...col,
344
+ type: col.type || this.inferColumnType(data[0][col.key || col.element || ""]),
345
+ visible: col.visible !== undefined ? col.visible : true,
346
+ };
347
+ });
348
+ tableConfig.columnData = columnData;
349
+ }
350
+ else if (data.length === 0 && columns) {
351
+ const columnData = {};
352
+ columns.forEach((col) => {
353
+ columnData[col.key || col.element || ""] = {
354
+ ...col,
355
+ type: col.type || "STRING",
356
+ visible: col.visible !== undefined ? col.visible : true,
357
+ };
358
+ });
359
+ tableConfig.columnData = columnData;
360
+ }
361
+ this.tableConfigSubject.next(tableConfig);
362
+ this.columnsSubject.next(columns || []);
363
+ this.dataSubject.next(data);
364
+ }
365
+ inferColumnType(value) {
366
+ if (value === null || value === undefined) {
367
+ return "STRING";
368
+ }
369
+ switch (typeof value) {
370
+ case "boolean":
371
+ return "BOOLEAN";
372
+ case "number":
373
+ return "NUMBER";
374
+ case "string":
375
+ return this.isValidDate(value) ? "DATE" : "STRING";
376
+ default:
377
+ return "STRING";
378
+ }
379
+ }
380
+ isValidDate(value) {
381
+ return !isNaN(Date.parse(value));
382
+ }
383
+ toggleColumnVisibility(columnKey) {
384
+ const currentColumns = this.columnsSubject.value;
385
+ const updatedColumns = currentColumns.map((col) => col.key === columnKey || col.element === columnKey ? { ...col, visible: !col.visible } : col);
386
+ const currentConfig = this.tableConfigSubject.value;
387
+ if (currentConfig) {
388
+ const updatedColumnData = { ...currentConfig.columnData };
389
+ const columnToUpdate = Object.keys(updatedColumnData).find((key) => key === columnKey);
390
+ if (columnToUpdate) {
391
+ updatedColumnData[columnToUpdate].visible = !updatedColumnData[columnToUpdate].visible;
392
+ this.tableConfigSubject.next({
393
+ ...currentConfig,
394
+ columnData: updatedColumnData,
395
+ });
396
+ }
397
+ }
398
+ this.columnsSubject.next(updatedColumns);
399
+ }
400
+ getVisibleColumns() {
401
+ return this.columnsSubject.value.filter((col) => col.visible);
402
+ }
403
+ setColumns(columns) {
404
+ const currentConfig = this.tableConfigSubject.value;
405
+ if (currentConfig) {
406
+ const columnData = {};
407
+ columns.forEach((col) => {
408
+ columnData[col.key || col.element || ""] = col;
409
+ });
410
+ this.tableConfigSubject.next({
411
+ ...currentConfig,
412
+ columns: columns.map((col) => col.key || col.element || ""),
413
+ columnData,
414
+ });
415
+ }
416
+ this.columnsSubject.next(columns);
417
+ }
418
+ setData(data) {
419
+ this.dataSubject.next(data);
420
+ const currentConfig = this.tableConfigSubject.value;
421
+ if (currentConfig) {
422
+ this.tableConfigSubject.next({
423
+ ...currentConfig,
424
+ data,
425
+ });
426
+ }
427
+ }
428
+ updateTableData(data) {
429
+ this.setData(data);
430
+ }
431
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
432
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableService, providedIn: "root" });
433
+ }
434
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableService, decorators: [{
435
+ type: Injectable,
436
+ args: [{
437
+ providedIn: "root",
438
+ }]
439
+ }] });
440
+ function getPtBrPaginatorIntl() {
441
+ const paginatorIntl = new MatPaginatorIntl();
442
+ paginatorIntl.itemsPerPageLabel = "Itens por página:";
443
+ paginatorIntl.nextPageLabel = "Próxima página";
444
+ paginatorIntl.previousPageLabel = "Página anterior";
445
+ paginatorIntl.firstPageLabel = "Primeira página";
446
+ paginatorIntl.lastPageLabel = "Última página";
447
+ paginatorIntl.getRangeLabel = (page, pageSize, length) => {
448
+ if (length === 0 || pageSize === 0) {
449
+ return `0 de ${length}`;
450
+ }
451
+ const startIndex = page * pageSize;
452
+ const endIndex = Math.min(startIndex + pageSize, length);
453
+ return `${startIndex + 1} – ${endIndex} de ${length}`;
454
+ };
455
+ return paginatorIntl;
456
+ }
457
+ class TableComponent {
458
+ tableService;
459
+ liveAnnouncer;
460
+ filterTableService;
461
+ customClass = "";
462
+ pageSizeOptions = [5, 10, 20, 50];
463
+ showFirstLastButtons = true;
464
+ isPaginatedByServer = false;
465
+ pageChanged = new EventEmitter();
466
+ pageSizeChanged = new EventEmitter();
467
+ firstPageClicked = new EventEmitter();
468
+ lastPageClicked = new EventEmitter();
469
+ selectionChanged = new EventEmitter();
470
+ pageEvent = new EventEmitter();
471
+ dataSource = new MatTableDataSource([]);
472
+ selection = new SelectionModel(true, []);
473
+ allColumns = [];
474
+ displayedColumns = [];
475
+ filterValue = "";
476
+ configSubscription = null;
477
+ visibleColumnsSubscription = null;
478
+ dataSubscription = null;
479
+ filterSubscription = null;
480
+ tableConfig = null;
481
+ sort;
482
+ paginator;
483
+ totalItems = 0;
484
+ pageSize = 10;
485
+ currentPage = 1;
486
+ previousPage = 1;
487
+ getAllColumns() {
488
+ return ["select", ...this.displayedColumns];
489
+ }
490
+ constructor(tableService, liveAnnouncer, filterTableService) {
491
+ this.tableService = tableService;
492
+ this.liveAnnouncer = liveAnnouncer;
493
+ this.filterTableService = filterTableService;
494
+ this.initializeSortingAccessor();
495
+ this.initializeFilterPredicate();
496
+ }
497
+ ngOnInit() {
498
+ this.configSubscription = this.tableService.tableConfig$.subscribe((config) => {
499
+ if (config) {
500
+ this.tableConfig = config;
501
+ this.allColumns = config.columns;
502
+ }
503
+ });
504
+ this.visibleColumnsSubscription = this.tableService.visibleColumns$.subscribe((visibleColumns) => {
505
+ this.displayedColumns = visibleColumns.filter((col) => col !== "select");
506
+ });
507
+ this.dataSubscription = this.tableService.data$.subscribe((data) => {
508
+ this.dataSource.data = data;
509
+ this.updateTotalItems();
510
+ });
511
+ this.filterSubscription = this.filterTableService.filter$.subscribe((filterValue) => {
512
+ this.filterValue = filterValue;
513
+ this.applyFilter();
514
+ });
515
+ }
516
+ ngAfterViewInit() {
517
+ this.dataSource.sort = this.sort;
518
+ // Connect paginator if available
519
+ setTimeout(() => {
520
+ if (this.paginator) {
521
+ this.dataSource.paginator = this.paginator;
522
+ this.paginator.pageIndex = this.currentPage - 1;
523
+ this.paginator.pageSize = this.pageSize;
524
+ this.paginator.showFirstLastButtons = this.showFirstLastButtons;
525
+ }
526
+ });
527
+ this.selection.changed.subscribe(() => {
528
+ this.selectionChanged.emit(this.selection.selected);
529
+ });
530
+ }
531
+ ngOnDestroy() {
532
+ this.configSubscription?.unsubscribe();
533
+ this.visibleColumnsSubscription?.unsubscribe();
534
+ this.dataSubscription?.unsubscribe();
535
+ this.filterSubscription?.unsubscribe();
536
+ }
537
+ initializeSortingAccessor() {
538
+ this.dataSource.sortingDataAccessor = (item, property) => {
539
+ const value = item[property];
540
+ if (typeof value === "string") {
541
+ return value.toLowerCase();
542
+ }
543
+ else if (typeof value === "number") {
544
+ return value;
545
+ }
546
+ else if (typeof value === "boolean") {
547
+ return value ? 1 : 0;
548
+ }
549
+ else if (value instanceof Date) {
550
+ return value.valueOf();
551
+ }
552
+ else if (value === null) {
553
+ return "";
554
+ }
555
+ else if (value === undefined) {
556
+ return undefined;
557
+ }
558
+ else if (typeof value === "object") {
559
+ return value.toString();
560
+ }
561
+ return value;
562
+ };
563
+ }
564
+ initializeFilterPredicate() {
565
+ this.dataSource.filterPredicate = (data, filter) => {
566
+ const searchTerms = filter.trim().toLowerCase();
567
+ if (!searchTerms) {
568
+ return true;
569
+ }
570
+ const dataStr = Object.keys(data).reduce((currentTerm, key) => {
571
+ const value = data[key];
572
+ return (currentTerm +
573
+ (value !== null && value !== undefined ? value.toString().toLowerCase() : ""));
574
+ }, "");
575
+ return dataStr.indexOf(searchTerms) !== -1;
576
+ };
577
+ }
578
+ applyFilter() {
579
+ const normalizedFilter = this.filterValue.trim().toLowerCase();
580
+ this.dataSource.filter = normalizedFilter;
581
+ }
582
+ toggleColumnVisibility(columnKey) {
583
+ this.tableService.toggleColumnVisibility(columnKey);
584
+ }
585
+ isColumnVisible(column) {
586
+ if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
587
+ return true;
588
+ }
589
+ return this.tableConfig.columnData[column].visible !== false;
590
+ }
591
+ getColumnHeader(column) {
592
+ if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
593
+ return column;
594
+ }
595
+ return this.tableConfig.columnData[column].header || column;
596
+ }
597
+ getColumnType(column) {
598
+ if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
599
+ return "STRING";
600
+ }
601
+ return this.tableConfig.columnData[column].type || "STRING";
602
+ }
603
+ getColumnElement(column) {
604
+ if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
605
+ return column;
606
+ }
607
+ return this.tableConfig.columnData[column].element || column;
608
+ }
609
+ getColumnButtons(column) {
610
+ if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
611
+ return [];
612
+ }
613
+ return this.tableConfig.columnData[column].buttons || [];
614
+ }
615
+ isAllSelected() {
616
+ if (!this.paginator ||
617
+ !this.dataSource.filteredData ||
618
+ this.dataSource.filteredData.length === 0) {
619
+ return false;
620
+ }
621
+ const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
622
+ const endIndex = Math.min(startIndex + this.paginator.pageSize, this.dataSource.filteredData.length);
623
+ const currentPageData = this.dataSource.filteredData.slice(startIndex, endIndex);
624
+ if (currentPageData.length === 0) {
625
+ return false;
626
+ }
627
+ return currentPageData.every((row) => this.selection.isSelected(row));
628
+ }
629
+ toggleAllRows() {
630
+ if (!this.paginator || !this.dataSource.filteredData) {
631
+ return;
632
+ }
633
+ if (this.isAllSelected()) {
634
+ this.selection.clear();
635
+ }
636
+ else {
637
+ const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
638
+ const endIndex = Math.min(startIndex + this.paginator.pageSize, this.dataSource.filteredData.length);
639
+ const currentPageData = this.dataSource.filteredData.slice(startIndex, endIndex);
640
+ currentPageData.forEach((row) => this.selection.select(row));
641
+ }
642
+ }
643
+ announceSortChange(sortState) {
644
+ if (sortState.direction) {
645
+ this.liveAnnouncer.announce(`Ordenado ${sortState.direction === "asc" ? "ascendente" : "descendente"}`);
646
+ }
647
+ else {
648
+ this.liveAnnouncer.announce("Ordenação removida");
649
+ }
650
+ }
651
+ trackByFn(index, item) {
652
+ return item;
653
+ }
654
+ onPageChanged(page) {
655
+ this.currentPage = page;
656
+ this.pageChanged.emit(page);
657
+ if (this.paginator && this.paginator.pageIndex !== page - 1) {
658
+ this.paginator.pageIndex = page - 1;
659
+ }
660
+ }
661
+ onPageSizeChanged(pageSize) {
662
+ this.pageSize = pageSize;
663
+ this.pageSizeChanged.emit(pageSize);
664
+ if (this.paginator && this.paginator.pageSize !== pageSize) {
665
+ this.paginator.pageSize = pageSize;
666
+ }
667
+ }
668
+ /**
669
+ * Handle pagination events from Mat Paginator
670
+ */
671
+ onPageEvent(event) {
672
+ const newPage = event.pageIndex + 1;
673
+ const isFirstPage = newPage === 1 && this.previousPage !== 1;
674
+ const isLastPage = newPage === Math.ceil(this.totalItems / event.pageSize) && newPage !== this.previousPage;
675
+ // Handle page size changes
676
+ if (event.pageSize !== this.pageSize) {
677
+ this.onPageSizeChanged(event.pageSize);
678
+ }
679
+ // Handle page changes
680
+ if (newPage !== this.currentPage) {
681
+ this.previousPage = this.currentPage; // Store previous page for first/last detection
682
+ this.onPageChanged(newPage);
683
+ // Emit specific events for first/last page navigation
684
+ if (isFirstPage) {
685
+ this.firstPageClicked.emit();
686
+ this.liveAnnouncer.announce("Primeira página");
687
+ }
688
+ else if (isLastPage) {
689
+ this.lastPageClicked.emit();
690
+ this.liveAnnouncer.announce("Última página");
691
+ }
692
+ }
693
+ this.pageEvent.emit(event);
694
+ }
695
+ /**
696
+ * Navigate to first page programmatically
697
+ */
698
+ goToFirstPage() {
699
+ if (this.currentPage !== 1) {
700
+ this.onPageChanged(1);
701
+ this.firstPageClicked.emit();
702
+ this.liveAnnouncer.announce("Primeira página");
703
+ }
704
+ }
705
+ /**
706
+ * Navigate to last page programmatically
707
+ */
708
+ goToLastPage() {
709
+ const lastPage = Math.max(1, Math.ceil(this.totalItems / this.pageSize));
710
+ if (this.currentPage !== lastPage) {
711
+ this.onPageChanged(lastPage);
712
+ this.lastPageClicked.emit();
713
+ this.liveAnnouncer.announce("Última página");
714
+ }
715
+ }
716
+ /**
717
+ * Update total items when data changes
718
+ */
719
+ updateTotalItems() {
720
+ if (this.isPaginatedByServer) {
721
+ return;
722
+ }
723
+ this.totalItems = this.dataSource.data.length;
724
+ }
725
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableComponent, deps: [{ token: TableService }, { token: i1$1.LiveAnnouncer }, { token: FilterTableService }], target: i0.ɵɵFactoryTarget.Component });
726
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: TableComponent, 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: getPtBrPaginatorIntl() }], 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: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.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: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i9.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i9.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i2.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" }] });
727
+ }
728
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableComponent, decorators: [{
729
+ type: Component,
730
+ args: [{ selector: "cao-base-table", imports: [CommonModule, MaterialModule, NgOptimizedImage], providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntl() }], 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"] }]
731
+ }], ctorParameters: () => [{ type: TableService }, { type: i1$1.LiveAnnouncer }, { type: FilterTableService }], propDecorators: { customClass: [{
732
+ type: Input
733
+ }], pageSizeOptions: [{
734
+ type: Input
735
+ }], showFirstLastButtons: [{
736
+ type: Input
737
+ }], isPaginatedByServer: [{
738
+ type: Input
739
+ }], pageChanged: [{
740
+ type: Output
741
+ }], pageSizeChanged: [{
742
+ type: Output
743
+ }], firstPageClicked: [{
744
+ type: Output
745
+ }], lastPageClicked: [{
746
+ type: Output
747
+ }], selectionChanged: [{
748
+ type: Output
749
+ }], pageEvent: [{
750
+ type: Output
751
+ }], sort: [{
752
+ type: ViewChild,
753
+ args: [MatSort]
754
+ }], paginator: [{
755
+ type: ViewChild,
756
+ args: [MatPaginator]
757
+ }] } });
758
+
759
+ class RnvAutocompleteComponent {
760
+ label = "";
761
+ placeholder = "";
762
+ options = [];
763
+ control = new FormControl();
764
+ dataCy = "";
765
+ controlName = "";
766
+ internalControl = new FormControl("");
767
+ filteredOptions$;
768
+ isFocused = false;
769
+ onChange = () => { };
770
+ onTouched = () => { };
771
+ ngOnInit() {
772
+ this.filteredOptions$ = this.internalControl.valueChanges.pipe(startWith(""), map$1((value) => this.filter(value || "")));
773
+ this.control.valueChanges.subscribe((value) => {
774
+ const displayValue = value && typeof value === "object" ? this.displayFn(value) : value;
775
+ this.internalControl.setValue(displayValue, { emitEvent: false });
776
+ });
777
+ }
778
+ onFocus() {
779
+ this.isFocused = true;
780
+ this.onTouched();
781
+ }
782
+ onBlur() {
783
+ this.isFocused = false;
784
+ this.onTouched();
785
+ }
786
+ filter(value) {
787
+ const filterValue = (typeof value === "string" ? value : value?.nome)?.toLowerCase() || "";
788
+ if (!this.options) {
789
+ return [];
790
+ }
791
+ return this.options.filter((option) => {
792
+ const nomeMatch = option.nome.toLowerCase().includes(filterValue);
793
+ const idMatch = option.id?.toString().toLowerCase().includes(filterValue);
794
+ return nomeMatch || idMatch;
795
+ });
796
+ }
797
+ displayFn(option) {
798
+ return option && option.nome ? option.nome : "";
799
+ }
800
+ onOptionSelected(event) {
801
+ this.onChange(event.option.value);
802
+ this.onTouched();
803
+ }
804
+ get errorText() {
805
+ if (!this.control) {
806
+ return null;
807
+ }
808
+ const isEmpty = this.control.value === null || this.control.value === "";
809
+ if (this.control.hasError("required") && isEmpty) {
810
+ return "*Campo obrigatório";
811
+ }
812
+ if (this.control.touched && this.control.invalid) {
813
+ if (this.control.hasError("cpfInvalid")) {
814
+ return "CPF inválido";
815
+ }
816
+ if (this.control.hasError("cellPhoneInvalid")) {
817
+ return "Número inválido";
818
+ }
819
+ if (this.control.hasError("emailInvalid")) {
820
+ return "Email inválido";
821
+ }
822
+ if (this.control.hasError("cnpjInvalid")) {
823
+ return "CNPJ inválido";
824
+ }
825
+ if (this.control.hasError("rgInvalid")) {
826
+ return "RG inválido";
827
+ }
828
+ if (this.control.hasError("dateInvalid")) {
829
+ return "Data inválida";
830
+ }
831
+ if (this.control.hasError("dateStartInvalid")) {
832
+ return "Data Inicial inválida";
833
+ }
834
+ if (this.control.hasError("dateEndInvalid")) {
835
+ return "Data Final inválida";
836
+ }
837
+ return "Formato inválido";
838
+ }
839
+ return null;
840
+ }
841
+ get controlNameValue() {
842
+ return this.controlName;
843
+ }
844
+ writeValue(value) {
845
+ const displayValue = value && typeof value === "object" ? this.displayFn(value) : value;
846
+ this.internalControl.setValue(displayValue, { emitEvent: false });
847
+ }
848
+ registerOnChange(fn) {
849
+ this.onChange = fn;
850
+ }
851
+ registerOnTouched(fn) {
852
+ this.onTouched = fn;
853
+ }
854
+ setDisabledState(isDisabled) {
855
+ isDisabled ? this.internalControl.disable() : this.internalControl.enable();
856
+ }
857
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RnvAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
858
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: RnvAutocompleteComponent, isStandalone: true, selector: "cao-autocomplete", inputs: { label: "label", placeholder: "placeholder", options: "options", control: "control", dataCy: "dataCy", controlName: "controlName" }, providers: [
859
+ {
860
+ provide: NG_VALUE_ACCESSOR,
861
+ useExisting: forwardRef(() => RnvAutocompleteComponent),
862
+ multi: true,
863
+ },
864
+ ], ngImport: i0, template: "<div class=\"form-field\">\n @if (label) {\n <label [for]=\"internalControl\">{{ label }}</label>\n }\n\n <mat-form-field appearance=\"outline\" class=\"rnv-autocomplete-mat-form-field\">\n <div class=\"input-wrapper\" [class.focused]=\"isFocused\">\n <input\n type=\"text\"\n matInput\n [placeholder]=\"placeholder\"\n [formControl]=\"internalControl\"\n [matAutocomplete]=\"auto\"\n [attr.data-cy]=\"dataCy\"\n [ngClass]=\"[\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n autoActiveFirstOption\n [displayWith]=\"displayFn\"\n (optionSelected)=\"onOptionSelected($event)\">\n @for (option of filteredOptions$ | async; track option.id) {\n <mat-option [value]=\"option\">{{ option.nome }}</mat-option>\n }\n </mat-autocomplete>\n </div>\n </mat-form-field>\n</div>\n", styles: [".form-field{display:flex;flex-direction:column;width:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap}.rnv-autocomplete-mat-form-field{width:100%}.rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper{border-radius:8px;padding:0;height:48px}.rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{padding:0 10px;align-items:center}.rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{padding:0;min-height:0}.rnv-autocomplete-mat-form-field .mat-mdc-form-field-subscript-wrapper,.rnv-autocomplete-mat-form-field .mat-mdc-form-field-outline{display:none}.input-wrapper{position:relative;width:100%}.mat-mdc-option{font-size:1rem;padding:6px 16px;text-transform:uppercase}.mat-mdc-autocomplete-panel{border-radius:8px;padding:12px 6px;box-shadow:0 2px 10px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
865
+ }
866
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RnvAutocompleteComponent, decorators: [{
867
+ type: Component,
868
+ args: [{ selector: "cao-autocomplete", standalone: true, imports: [
869
+ CommonModule,
870
+ ReactiveFormsModule,
871
+ MatFormFieldModule,
872
+ MatInputModule,
873
+ MatAutocompleteModule,
874
+ ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
875
+ {
876
+ provide: NG_VALUE_ACCESSOR,
877
+ useExisting: forwardRef(() => RnvAutocompleteComponent),
878
+ multi: true,
879
+ },
880
+ ], template: "<div class=\"form-field\">\n @if (label) {\n <label [for]=\"internalControl\">{{ label }}</label>\n }\n\n <mat-form-field appearance=\"outline\" class=\"rnv-autocomplete-mat-form-field\">\n <div class=\"input-wrapper\" [class.focused]=\"isFocused\">\n <input\n type=\"text\"\n matInput\n [placeholder]=\"placeholder\"\n [formControl]=\"internalControl\"\n [matAutocomplete]=\"auto\"\n [attr.data-cy]=\"dataCy\"\n [ngClass]=\"[\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n autoActiveFirstOption\n [displayWith]=\"displayFn\"\n (optionSelected)=\"onOptionSelected($event)\">\n @for (option of filteredOptions$ | async; track option.id) {\n <mat-option [value]=\"option\">{{ option.nome }}</mat-option>\n }\n </mat-autocomplete>\n </div>\n </mat-form-field>\n</div>\n", styles: [".form-field{display:flex;flex-direction:column;width:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap}.rnv-autocomplete-mat-form-field{width:100%}.rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper{border-radius:8px;padding:0;height:48px}.rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{padding:0 10px;align-items:center}.rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{padding:0;min-height:0}.rnv-autocomplete-mat-form-field .mat-mdc-form-field-subscript-wrapper,.rnv-autocomplete-mat-form-field .mat-mdc-form-field-outline{display:none}.input-wrapper{position:relative;width:100%}.mat-mdc-option{font-size:1rem;padding:6px 16px;text-transform:uppercase}.mat-mdc-autocomplete-panel{border-radius:8px;padding:12px 6px;box-shadow:0 2px 10px #0000001a}\n"] }]
881
+ }], propDecorators: { label: [{
882
+ type: Input
883
+ }], placeholder: [{
884
+ type: Input
885
+ }], options: [{
886
+ type: Input
887
+ }], control: [{
888
+ type: Input
889
+ }], dataCy: [{
890
+ type: Input
891
+ }], controlName: [{
892
+ type: Input
893
+ }] } });
894
+
895
+ class BaseTimeRange {
896
+ label = "";
897
+ max;
898
+ minDate;
899
+ maxDate;
900
+ startDate;
901
+ finalDate;
902
+ dataCy;
903
+ controlName = "";
904
+ rangeSelected = new EventEmitter();
905
+ dateRangeInput;
906
+ ngOnInit() {
907
+ if (!this.dataCy) {
908
+ this.dataCy = `time-range-${this.label}`;
909
+ }
910
+ }
911
+ onSelectStartDate(event) {
912
+ const date = event.target.value;
913
+ this.startDate = date;
914
+ this.finalDate = undefined;
915
+ const maxDate = new Date(date);
916
+ maxDate.setDate(maxDate.getDate() + 30);
917
+ this.maxDate = maxDate;
918
+ }
919
+ onInputMaxDate(event) {
920
+ const finalDate = event.target.value;
921
+ if (this.startDate && finalDate) {
922
+ const data = [this.startDate, finalDate];
923
+ this.rangeSelected.emit(data);
924
+ }
925
+ }
926
+ clearInputs() {
927
+ this.max = undefined;
928
+ this.minDate = undefined;
929
+ this.maxDate = undefined;
930
+ this.startDate = undefined;
931
+ this.finalDate = undefined;
932
+ this.dateRangeInput._startInput.value = "";
933
+ this.dateRangeInput._endInput.value = "";
934
+ }
935
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseTimeRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
936
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: BaseTimeRange, isStandalone: true, selector: "cao-base-time-range", inputs: { label: "label", max: "max", minDate: "minDate", maxDate: "maxDate", startDate: "startDate", finalDate: "finalDate", dataCy: "dataCy", controlName: "controlName" }, outputs: { rangeSelected: "rangeSelected" }, viewQueries: [{ propertyName: "dateRangeInput", first: true, predicate: MatDateRangeInput, descendants: true }], ngImport: i0, template: "<label class=\"label-dropw-down\" [for]=\"controlName\">{{ label }}</label>\n<mat-form-field class=\"input-data-field\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n <mat-date-range-input [rangePicker]=\"picker\" [max]=\"maxDate\"\n [attr.dataCy]=\"this.dataCy\"\n >\n <input\n #startDateInput\n matStartDate\n placeholder=\"DATA IN\u00CDCIO\"\n [tabIndex]=\"1\"\n [value]=\"startDate\"\n (dateInput)=\"onSelectStartDate($event)\" />\n <input\n #endDateInput\n matEndDate\n placeholder=\"DATA FIM\"\n [tabIndex]=\"2\"\n [value]=\"finalDate\"\n (dateInput)=\"onInputMaxDate($event)\" />\n </mat-date-range-input>\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\" />\n <mat-date-range-picker #picker />\n</mat-form-field>\n", styles: [".input-data-field{height:44px;border-radius:8px;font-size:12px;font-weight:600}.input-data-field.mat-mdc-text-field-wrapper,.input-data-field.mat-mdc-form-field-flex{height:100%!important}.input-data-field.mat-mdc-form-field-infix{height:100%;padding:10px 0!important}.input-data-field.mat-mdc-notch-piece{border:none}.input-data-field.mat-date-range-input-container{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }] });
937
+ }
938
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseTimeRange, decorators: [{
939
+ type: Component,
940
+ args: [{ selector: 'cao-base-time-range', imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule], template: "<label class=\"label-dropw-down\" [for]=\"controlName\">{{ label }}</label>\n<mat-form-field class=\"input-data-field\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n <mat-date-range-input [rangePicker]=\"picker\" [max]=\"maxDate\"\n [attr.dataCy]=\"this.dataCy\"\n >\n <input\n #startDateInput\n matStartDate\n placeholder=\"DATA IN\u00CDCIO\"\n [tabIndex]=\"1\"\n [value]=\"startDate\"\n (dateInput)=\"onSelectStartDate($event)\" />\n <input\n #endDateInput\n matEndDate\n placeholder=\"DATA FIM\"\n [tabIndex]=\"2\"\n [value]=\"finalDate\"\n (dateInput)=\"onInputMaxDate($event)\" />\n </mat-date-range-input>\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\" />\n <mat-date-range-picker #picker />\n</mat-form-field>\n", styles: [".input-data-field{height:44px;border-radius:8px;font-size:12px;font-weight:600}.input-data-field.mat-mdc-text-field-wrapper,.input-data-field.mat-mdc-form-field-flex{height:100%!important}.input-data-field.mat-mdc-form-field-infix{height:100%;padding:10px 0!important}.input-data-field.mat-mdc-notch-piece{border:none}.input-data-field.mat-date-range-input-container{font-size:12px}\n"] }]
941
+ }], propDecorators: { label: [{
942
+ type: Input
943
+ }], max: [{
944
+ type: Input
945
+ }], minDate: [{
946
+ type: Input
947
+ }], maxDate: [{
948
+ type: Input
949
+ }], startDate: [{
950
+ type: Input
951
+ }], finalDate: [{
952
+ type: Input
953
+ }], dataCy: [{
954
+ type: Input
955
+ }], controlName: [{
956
+ type: Input
957
+ }], rangeSelected: [{
958
+ type: Output
959
+ }], dateRangeInput: [{
960
+ type: ViewChild,
961
+ args: [MatDateRangeInput]
962
+ }] } });
963
+
964
+ class DropDownComponent {
965
+ _eref;
966
+ cdr;
967
+ textHeader = "SELECIONE UM ITEM";
968
+ options = [];
969
+ dropDownClass = "";
970
+ styleDropDown = {};
971
+ control;
972
+ controlName = "";
973
+ isDisabled = false;
974
+ itemSelected = new EventEmitter();
975
+ tooltip = "";
976
+ dropDirectionInput = "down";
977
+ dataCy = "";
978
+ trackByFn;
979
+ compareWith;
980
+ ariaLabel;
981
+ ariaLabelledBy;
982
+ listAriaLabel;
983
+ isOpen = false;
984
+ selectedItem;
985
+ filteredOptions = [];
986
+ searchControl = new FormControl("");
987
+ isTouched = false;
988
+ isFocused = false;
989
+ dropDirection;
990
+ removeValidBorder = false;
991
+ focusedIndex = -1;
992
+ _handleClickOutside = this.onClickOutside.bind(this);
993
+ constructor(_eref, cdr) {
994
+ this._eref = _eref;
995
+ this.cdr = cdr;
996
+ }
997
+ ngOnInit() {
998
+ document.addEventListener("click", this._handleClickOutside, true);
999
+ this.filteredOptions = [...this.options];
1000
+ this.searchControl.valueChanges.subscribe((value) => {
1001
+ this.filterOptions(value || "");
1002
+ this.focusedIndex = -1;
1003
+ });
1004
+ }
1005
+ ngOnDestroy() {
1006
+ document.removeEventListener("click", this._handleClickOutside, true);
1007
+ }
1008
+ get activeDescendant() {
1009
+ if (this.isOpen && this.focusedIndex >= 0 && this.filteredOptions[this.focusedIndex]) {
1010
+ return `option-${this.dataCy}-${this.focusedIndex}`;
1011
+ }
1012
+ return null;
1013
+ }
1014
+ toggleDropdown() {
1015
+ if (this.isDisabled) {
1016
+ return;
1017
+ }
1018
+ ;
1019
+ this.checkAvailableSpace();
1020
+ this.isOpen = !this.isOpen;
1021
+ this.isFocused = this.isOpen;
1022
+ this.markAsTouched();
1023
+ if (this.isOpen) {
1024
+ this.searchControl.setValue("");
1025
+ this.filteredOptions = [...this.options];
1026
+ this.removeValidBorder = false;
1027
+ this.focusedIndex = -1;
1028
+ setTimeout(() => {
1029
+ if (this.isOpen) {
1030
+ const searchInput = this._eref.nativeElement.querySelector('.dropdown-search input');
1031
+ if (searchInput) {
1032
+ searchInput.focus();
1033
+ }
1034
+ }
1035
+ });
1036
+ }
1037
+ else {
1038
+ this.focusedIndex = -1;
1039
+ }
1040
+ this.cdr.detectChanges();
1041
+ }
1042
+ selectItem(option) {
1043
+ if (this.isDisabled) {
1044
+ return;
1045
+ }
1046
+ ;
1047
+ this.selectedItem = option;
1048
+ this.isOpen = false;
1049
+ this.focusedIndex = -1;
1050
+ this.itemSelected.emit(option);
1051
+ this.onChange(option);
1052
+ this.markAsTouched();
1053
+ this.cdr.detectChanges();
1054
+ }
1055
+ clear() {
1056
+ this.selectedItem = undefined;
1057
+ this.onChange(null);
1058
+ this.cdr.detectChanges();
1059
+ }
1060
+ filterOptions(searchTerm) {
1061
+ if (!searchTerm) {
1062
+ this.filteredOptions = [...this.options];
1063
+ return;
1064
+ }
1065
+ const lowerCaseSearchTerm = searchTerm.toLowerCase();
1066
+ this.filteredOptions = this.options.filter((option) => option.nome.toLowerCase().includes(lowerCaseSearchTerm) ||
1067
+ option.id?.toString().toLowerCase().includes(lowerCaseSearchTerm));
1068
+ }
1069
+ trackBy(index, item) {
1070
+ return this.trackByFn ? this.trackByFn(index, item) : item.id;
1071
+ }
1072
+ onClickOutside(event) {
1073
+ if (!this._eref.nativeElement.contains(event.target)) {
1074
+ if (this.isOpen) {
1075
+ this.isOpen = false;
1076
+ }
1077
+ if (this.isFocused) {
1078
+ this.isFocused = false;
1079
+ }
1080
+ this.focusedIndex = -1;
1081
+ this.markAsTouched();
1082
+ this.removeValidBorder = true;
1083
+ this.cdr.detectChanges();
1084
+ }
1085
+ }
1086
+ onArrowDown(event) {
1087
+ if (this.isDisabled) {
1088
+ return;
1089
+ }
1090
+ ;
1091
+ event.preventDefault();
1092
+ event.stopPropagation();
1093
+ if (this.filteredOptions.length === 0) {
1094
+ return;
1095
+ }
1096
+ ;
1097
+ if (this.focusedIndex === -1) {
1098
+ this.focusedIndex = 0;
1099
+ }
1100
+ else {
1101
+ this.focusedIndex = (this.focusedIndex + 1) % this.filteredOptions.length;
1102
+ }
1103
+ this.scrollIntoView();
1104
+ this.cdr.detectChanges();
1105
+ }
1106
+ onArrowUp(event) {
1107
+ if (this.isDisabled) {
1108
+ return;
1109
+ }
1110
+ ;
1111
+ event.preventDefault();
1112
+ event.stopPropagation();
1113
+ if (this.filteredOptions.length === 0) {
1114
+ return;
1115
+ }
1116
+ ;
1117
+ if (this.focusedIndex === -1) {
1118
+ this.focusedIndex = this.filteredOptions.length - 1;
1119
+ }
1120
+ else {
1121
+ this.focusedIndex = this.focusedIndex <= 0
1122
+ ? this.filteredOptions.length - 1
1123
+ : this.focusedIndex - 1;
1124
+ }
1125
+ this.scrollIntoView();
1126
+ this.cdr.detectChanges();
1127
+ }
1128
+ onSearchEnter(event) {
1129
+ event.preventDefault();
1130
+ event.stopPropagation();
1131
+ if (this.focusedIndex >= 0 && this.focusedIndex < this.filteredOptions.length) {
1132
+ this.selectItem(this.filteredOptions[this.focusedIndex]);
1133
+ }
1134
+ else if (this.filteredOptions.length > 0) {
1135
+ this.selectItem(this.filteredOptions[0]);
1136
+ }
1137
+ }
1138
+ closeDropdown() {
1139
+ if (this.isDisabled) {
1140
+ return;
1141
+ }
1142
+ ;
1143
+ this.isOpen = false;
1144
+ this.focusedIndex = -1;
1145
+ this.isFocused = false;
1146
+ this.cdr.detectChanges();
1147
+ }
1148
+ scrollIntoView() {
1149
+ if (!this.isOpen || this.focusedIndex === -1) {
1150
+ return;
1151
+ }
1152
+ ;
1153
+ setTimeout(() => {
1154
+ const element = document.getElementById(`option-${this.dataCy}-${this.focusedIndex}`);
1155
+ if (element) {
1156
+ element.scrollIntoView({
1157
+ block: 'nearest',
1158
+ behavior: 'smooth'
1159
+ });
1160
+ }
1161
+ }, 0);
1162
+ }
1163
+ checkAvailableSpace() {
1164
+ if (this.dropDirectionInput === "up") {
1165
+ this.dropDirection = "up";
1166
+ return;
1167
+ }
1168
+ const rect = this._eref.nativeElement.getBoundingClientRect();
1169
+ const windowHeight = window.innerHeight;
1170
+ const dropdownHeight = 200;
1171
+ const spaceBelow = windowHeight - rect.bottom;
1172
+ this.dropDirection = spaceBelow < dropdownHeight ? "up" : "down";
1173
+ }
1174
+ writeValue(value) {
1175
+ if (value !== null && value !== undefined) {
1176
+ const match = this.options.find((opt) => this.compareWith
1177
+ ? this.compareWith(opt, value)
1178
+ : opt.id === (typeof value === "object" && value ? value.id : value));
1179
+ if (match) {
1180
+ this.selectedItem = match;
1181
+ }
1182
+ else {
1183
+ const matchByName = this.options.find((opt) => opt.nome === value);
1184
+ if (matchByName) {
1185
+ this.selectedItem = matchByName;
1186
+ }
1187
+ }
1188
+ }
1189
+ else {
1190
+ this.selectedItem = undefined;
1191
+ }
1192
+ this.cdr.detectChanges();
1193
+ }
1194
+ registerOnChange(fn) {
1195
+ this.onChange = fn;
1196
+ }
1197
+ registerOnTouched(fn) {
1198
+ this.onTouched = fn;
1199
+ }
1200
+ onChange = () => { };
1201
+ onTouched = () => { };
1202
+ get errorText() {
1203
+ if (!this.control) {
1204
+ return null;
1205
+ }
1206
+ if (this.control.hasError("required")) {
1207
+ return "*Campo obrigatório";
1208
+ }
1209
+ return null;
1210
+ }
1211
+ markAsTouched() {
1212
+ if (!this.isTouched) {
1213
+ this.onTouched();
1214
+ this.isTouched = true;
1215
+ this.control?.markAsTouched();
1216
+ }
1217
+ }
1218
+ get controlNameValue() {
1219
+ return this.controlName;
1220
+ }
1221
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DropDownComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1222
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: DropDownComponent, isStandalone: true, selector: "cao-drop-down", inputs: { textHeader: "textHeader", options: "options", dropDownClass: "dropDownClass", styleDropDown: "styleDropDown", control: "control", controlName: "controlName", isDisabled: "isDisabled", tooltip: "tooltip", dropDirectionInput: "dropDirectionInput", dataCy: "dataCy", trackByFn: "trackByFn", compareWith: "compareWith", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", listAriaLabel: "listAriaLabel" }, outputs: { itemSelected: "itemSelected" }, providers: [
1223
+ {
1224
+ provide: NG_VALUE_ACCESSOR,
1225
+ useExisting: forwardRef(() => DropDownComponent),
1226
+ multi: true,
1227
+ },
1228
+ ], ngImport: i0, template: "<div\n class=\"dropdown-container\"\n role=\"combobox\"\n [ngClass]=\"[\n dropDownClass,\n isDisabled ? 'disabled' : '',\n control?.touched && control?.invalid ? 'invalid' : '',\n (control?.touched && control?.valid && selectedItem && isFocused && !removeValidBorder) ? 'valid' : ''\n ]\"\n [ngStyle]=\"styleDropDown\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen ? ('dropdown-list-' + dataCy) : null\"\n [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"isDisabled\"\n [attr.aria-activedescendant]=\"activeDescendant\"\n [attr.data-cy]=\"dataCy\">\n \n <div\n class=\"dropdown-header\"\n matTooltipPosition=\"below\"\n matTooltipClass=\"custom-arrow-tooltip\"\n tabindex=\"0\"\n role=\"button\"\n [matTooltip]=\"tooltip\"\n [attr.aria-disabled]=\"isDisabled\"\n (click)=\"!isDisabled && toggleDropdown()\"\n (keydown.enter)=\"!isDisabled && toggleDropdown()\"\n (keydown.space)=\"!isDisabled && toggleDropdown(); $event.preventDefault()\"\n (keydown.arrowdown)=\"!isDisabled && onArrowDown($event)\"\n (keydown.arrowup)=\"!isDisabled && onArrowUp($event)\"\n (keydown.escape)=\"!isDisabled && closeDropdown()\">\n <span id=\"dropdown-label-{{dataCy}}\">{{ selectedItem?.nome ?? textHeader }}</span>\n <mat-icon aria-hidden=\"true\">{{ isOpen ? 'expand_less' : 'expand_more' }}</mat-icon>\n </div>\n\n @if (isOpen) {\n <ul \n class=\"dropdown-list\" \n role=\"listbox\"\n [id]=\"'dropdown-list-' + dataCy\"\n [ngClass]=\"{ 'drop-up': dropDirection === 'up', 'dropdown-secundary': dropDownClass === 'dropdown-secundary' }\"\n [attr.aria-label]=\"listAriaLabel || 'Op\u00E7\u00F5es'\"\n [attr.aria-labelledby]=\"'dropdown-label-' + dataCy\">\n \n\n <li class=\"dropdown-search\" role=\"none\">\n <input \n type=\"text\" \n placeholder=\"Buscar por c\u00F3digo ou nome...\" \n role=\"searchbox\"\n aria-label=\"Buscar op\u00E7\u00F5es\"\n [formControl]=\"searchControl\"\n (keydown.arrowdown)=\"onArrowDown($event)\"\n (keydown.arrowup)=\"onArrowUp($event)\"\n (keydown.enter)=\"onSearchEnter($event)\"\n (keydown.escape)=\"closeDropdown()\" />\n </li>\n \n\n @for (item of filteredOptions; track $index) { \n @if(item && item.nome) {\n <li\n class=\"dropdown-item\"\n role=\"option\"\n [ngClass]=\"{\n 'icon-right': item.iconPosition === 'right',\n 'selected': item === selectedItem,\n 'focused': $index === focusedIndex\n }\"\n [attr.id]=\"'option-' + dataCy + '-' + $index\"\n [attr.aria-selected]=\"item === selectedItem\"\n [attr.tabindex]=\"$index === focusedIndex ? 0 : -1\"\n [attr.data-cy]=\"item.dataCy\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"selectItem(item)\"\n (keydown.space)=\"selectItem(item); $event.preventDefault()\"\n (mouseenter)=\"focusedIndex = $index\">\n @if (item.icon && item.iconPosition !== 'right') {\n <mat-icon class=\"dropdown-icon\" aria-hidden=\"true\">{{ item.icon }}</mat-icon>\n } \n <span>{{ item.nome }}</span>\n @if (item.icon && item.iconPosition === 'right') {\n <mat-icon class=\"dropdown-icon\" aria-hidden=\"true\">{{ item.icon }}</mat-icon>\n }\n </li>\n } \n }\n </ul>\n }\n \n @if (control?.touched && control?.invalid && errorText) {\n <div class=\"message-error\">{{ errorText }}</div>\n }\n</div>", styles: [".dropdown-header:focus{outline:2px solid var(--primary);outline-offset:2px}.dropdown-header:focus:not(:focus-visible){outline:none}.dropdown-search input:focus{outline:2px solid var(--primary);outline-offset:2px}.dropdown-item:focus{outline:2px solid var(--primary);outline-offset:-2px}.dropdown-item.focused{background-color:var(--hover-drop-down);font-weight:700}.dropdown-container.disabled{opacity:.6}.dropdown-list::-webkit-scrollbar{width:8px}.dropdown-list::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.dropdown-list::-webkit-scrollbar-thumb{background:#0003;border-radius:4px}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#0000004d}@media screen and (max-width:768px){.dropdown-list{max-height:180px}.dropdown-list.drop-up{bottom:45px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], encapsulation: i0.ViewEncapsulation.None });
1229
+ }
1230
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DropDownComponent, decorators: [{
1231
+ type: Component,
1232
+ args: [{ selector: "cao-drop-down", encapsulation: ViewEncapsulation.None, imports: [
1233
+ MatIconModule,
1234
+ CommonModule,
1235
+ MatTooltipModule,
1236
+ ReactiveFormsModule,
1237
+ ], providers: [
1238
+ {
1239
+ provide: NG_VALUE_ACCESSOR,
1240
+ useExisting: forwardRef(() => DropDownComponent),
1241
+ multi: true,
1242
+ },
1243
+ ], template: "<div\n class=\"dropdown-container\"\n role=\"combobox\"\n [ngClass]=\"[\n dropDownClass,\n isDisabled ? 'disabled' : '',\n control?.touched && control?.invalid ? 'invalid' : '',\n (control?.touched && control?.valid && selectedItem && isFocused && !removeValidBorder) ? 'valid' : ''\n ]\"\n [ngStyle]=\"styleDropDown\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen ? ('dropdown-list-' + dataCy) : null\"\n [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"isDisabled\"\n [attr.aria-activedescendant]=\"activeDescendant\"\n [attr.data-cy]=\"dataCy\">\n \n <div\n class=\"dropdown-header\"\n matTooltipPosition=\"below\"\n matTooltipClass=\"custom-arrow-tooltip\"\n tabindex=\"0\"\n role=\"button\"\n [matTooltip]=\"tooltip\"\n [attr.aria-disabled]=\"isDisabled\"\n (click)=\"!isDisabled && toggleDropdown()\"\n (keydown.enter)=\"!isDisabled && toggleDropdown()\"\n (keydown.space)=\"!isDisabled && toggleDropdown(); $event.preventDefault()\"\n (keydown.arrowdown)=\"!isDisabled && onArrowDown($event)\"\n (keydown.arrowup)=\"!isDisabled && onArrowUp($event)\"\n (keydown.escape)=\"!isDisabled && closeDropdown()\">\n <span id=\"dropdown-label-{{dataCy}}\">{{ selectedItem?.nome ?? textHeader }}</span>\n <mat-icon aria-hidden=\"true\">{{ isOpen ? 'expand_less' : 'expand_more' }}</mat-icon>\n </div>\n\n @if (isOpen) {\n <ul \n class=\"dropdown-list\" \n role=\"listbox\"\n [id]=\"'dropdown-list-' + dataCy\"\n [ngClass]=\"{ 'drop-up': dropDirection === 'up', 'dropdown-secundary': dropDownClass === 'dropdown-secundary' }\"\n [attr.aria-label]=\"listAriaLabel || 'Op\u00E7\u00F5es'\"\n [attr.aria-labelledby]=\"'dropdown-label-' + dataCy\">\n \n\n <li class=\"dropdown-search\" role=\"none\">\n <input \n type=\"text\" \n placeholder=\"Buscar por c\u00F3digo ou nome...\" \n role=\"searchbox\"\n aria-label=\"Buscar op\u00E7\u00F5es\"\n [formControl]=\"searchControl\"\n (keydown.arrowdown)=\"onArrowDown($event)\"\n (keydown.arrowup)=\"onArrowUp($event)\"\n (keydown.enter)=\"onSearchEnter($event)\"\n (keydown.escape)=\"closeDropdown()\" />\n </li>\n \n\n @for (item of filteredOptions; track $index) { \n @if(item && item.nome) {\n <li\n class=\"dropdown-item\"\n role=\"option\"\n [ngClass]=\"{\n 'icon-right': item.iconPosition === 'right',\n 'selected': item === selectedItem,\n 'focused': $index === focusedIndex\n }\"\n [attr.id]=\"'option-' + dataCy + '-' + $index\"\n [attr.aria-selected]=\"item === selectedItem\"\n [attr.tabindex]=\"$index === focusedIndex ? 0 : -1\"\n [attr.data-cy]=\"item.dataCy\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"selectItem(item)\"\n (keydown.space)=\"selectItem(item); $event.preventDefault()\"\n (mouseenter)=\"focusedIndex = $index\">\n @if (item.icon && item.iconPosition !== 'right') {\n <mat-icon class=\"dropdown-icon\" aria-hidden=\"true\">{{ item.icon }}</mat-icon>\n } \n <span>{{ item.nome }}</span>\n @if (item.icon && item.iconPosition === 'right') {\n <mat-icon class=\"dropdown-icon\" aria-hidden=\"true\">{{ item.icon }}</mat-icon>\n }\n </li>\n } \n }\n </ul>\n }\n \n @if (control?.touched && control?.invalid && errorText) {\n <div class=\"message-error\">{{ errorText }}</div>\n }\n</div>", styles: [".dropdown-header:focus{outline:2px solid var(--primary);outline-offset:2px}.dropdown-header:focus:not(:focus-visible){outline:none}.dropdown-search input:focus{outline:2px solid var(--primary);outline-offset:2px}.dropdown-item:focus{outline:2px solid var(--primary);outline-offset:-2px}.dropdown-item.focused{background-color:var(--hover-drop-down);font-weight:700}.dropdown-container.disabled{opacity:.6}.dropdown-list::-webkit-scrollbar{width:8px}.dropdown-list::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.dropdown-list::-webkit-scrollbar-thumb{background:#0003;border-radius:4px}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#0000004d}@media screen and (max-width:768px){.dropdown-list{max-height:180px}.dropdown-list.drop-up{bottom:45px}}\n"] }]
1244
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { textHeader: [{
1245
+ type: Input
1246
+ }], options: [{
1247
+ type: Input
1248
+ }], dropDownClass: [{
1249
+ type: Input
1250
+ }], styleDropDown: [{
1251
+ type: Input
1252
+ }], control: [{
1253
+ type: Input
1254
+ }], controlName: [{
1255
+ type: Input
1256
+ }], isDisabled: [{
1257
+ type: Input
1258
+ }], itemSelected: [{
1259
+ type: Output
1260
+ }], tooltip: [{
1261
+ type: Input
1262
+ }], dropDirectionInput: [{
1263
+ type: Input
1264
+ }], dataCy: [{
1265
+ type: Input
1266
+ }], trackByFn: [{
1267
+ type: Input
1268
+ }], compareWith: [{
1269
+ type: Input
1270
+ }], ariaLabel: [{
1271
+ type: Input
1272
+ }], ariaLabelledBy: [{
1273
+ type: Input
1274
+ }], listAriaLabel: [{
1275
+ type: Input
1276
+ }] } });
1277
+
1278
+ class LinksButton {
1279
+ navContent;
1280
+ router = inject(Router);
1281
+ route = inject(ActivatedRoute);
1282
+ isValidationRequired(link) {
1283
+ if (link.disabled) {
1284
+ return;
1285
+ }
1286
+ link.directRoute ? this.directRoute(link.url) : this.navigateTo(link.url);
1287
+ }
1288
+ navigateTo(url) {
1289
+ this.router.navigate([url], { relativeTo: this.route });
1290
+ }
1291
+ directRoute(url) {
1292
+ this.router.navigate([url]);
1293
+ }
1294
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: LinksButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
1295
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: LinksButton, isStandalone: true, selector: "cao-links-button", inputs: { navContent: "navContent" }, ngImport: i0, template: "<div class=\"links-info\">\n @if (navContent()) {\n <h2>{{ navContent().title }}</h2>\n <div class=\"links\">\n @for (link of navContent().links; track $index) {\n <div\n class=\"link\"\n role=\"button\"\n tabindex=\"0\"\n [tabIndex]=\"link.disabled ? -1 : 0\"\n [class.disabled]=\"link.disabled\"\n [attr.data-cy]=\"link.dataCy\"\n [attr.aria-disabled]=\"link.disabled\"\n (click)=\"isValidationRequired(link)\"\n (keydown.enter)=\"isValidationRequired(link)\"\n (keydown.space)=\"isValidationRequired(link); $event.preventDefault()\"\n >\n {{ link.text }}\n </div>\n }\n </div>\n }\n</div>", styles: ["*{text-decoration:none}.links-info{display:flex;flex-direction:column;width:280px}.links-info h2{font-size:24px;font-weight:700;text-align:center;text-transform:uppercase;color:var(--title-info);margin-bottom:12%;text-wrap:wrap;height:64px}.links-info .links{display:flex;flex-direction:column;align-items:center;gap:46px}.links-info .links .link{width:250px;height:100px;text-transform:uppercase;background-color:var(--primary);color:var(--white);font-weight:700;padding:30px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:16px;border-radius:20px;box-shadow:0 4px 4px 0 var(--shadow-black);cursor:pointer}.links-info .links .link.disabled{background-color:var(--input-disabled-bg);color:var(--black);pointer-events:none;cursor:default}.links-info .links .link:active{background-color:var(--active-success-btn)}.links-info .links .link:hover{background:linear-gradient(125.78deg,var(--primary) 7.03%,var(--confirm-color) 96.73%)}@media(max-width:768px){.links-info h2{height:0}.links-info .links{padding-bottom:20px}}\n"] });
1296
+ }
1297
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: LinksButton, decorators: [{
1298
+ type: Component,
1299
+ args: [{ standalone: true, selector: "cao-links-button", template: "<div class=\"links-info\">\n @if (navContent()) {\n <h2>{{ navContent().title }}</h2>\n <div class=\"links\">\n @for (link of navContent().links; track $index) {\n <div\n class=\"link\"\n role=\"button\"\n tabindex=\"0\"\n [tabIndex]=\"link.disabled ? -1 : 0\"\n [class.disabled]=\"link.disabled\"\n [attr.data-cy]=\"link.dataCy\"\n [attr.aria-disabled]=\"link.disabled\"\n (click)=\"isValidationRequired(link)\"\n (keydown.enter)=\"isValidationRequired(link)\"\n (keydown.space)=\"isValidationRequired(link); $event.preventDefault()\"\n >\n {{ link.text }}\n </div>\n }\n </div>\n }\n</div>", styles: ["*{text-decoration:none}.links-info{display:flex;flex-direction:column;width:280px}.links-info h2{font-size:24px;font-weight:700;text-align:center;text-transform:uppercase;color:var(--title-info);margin-bottom:12%;text-wrap:wrap;height:64px}.links-info .links{display:flex;flex-direction:column;align-items:center;gap:46px}.links-info .links .link{width:250px;height:100px;text-transform:uppercase;background-color:var(--primary);color:var(--white);font-weight:700;padding:30px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:16px;border-radius:20px;box-shadow:0 4px 4px 0 var(--shadow-black);cursor:pointer}.links-info .links .link.disabled{background-color:var(--input-disabled-bg);color:var(--black);pointer-events:none;cursor:default}.links-info .links .link:active{background-color:var(--active-success-btn)}.links-info .links .link:hover{background:linear-gradient(125.78deg,var(--primary) 7.03%,var(--confirm-color) 96.73%)}@media(max-width:768px){.links-info h2{height:0}.links-info .links{padding-bottom:20px}}\n"] }]
1300
+ }], propDecorators: { navContent: [{
1301
+ type: Input,
1302
+ args: [{ required: true }]
1303
+ }] } });
1304
+
1305
+ class Footer {
1306
+ currentYear = new Date().getFullYear();
1307
+ currentRoute = "";
1308
+ footerText = "";
1309
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: Footer, deps: [], target: i0.ɵɵFactoryTarget.Component });
1310
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: Footer, isStandalone: true, selector: "cao-footer", inputs: { currentRoute: "currentRoute", footerText: "footerText" }, ngImport: i0, template: "<footer>\n <ul>\n <li>{{ footerText }} \u00A9 {{ currentYear }}</li>\n </ul>\n</footer>\n", styles: ["*{list-style:none;text-decoration:none}footer{display:flex;align-items:end;justify-content:end;height:35px;padding:0 50px 10px 0;background-color:var(--white);border-top:2px solid var(--border-footer);position:fixed;bottom:0;right:0;width:100%;z-index:100}footer.renova-color{color:var(--accent)}footer.red{color:var(--digital-color)}\n"] });
1311
+ }
1312
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: Footer, decorators: [{
1313
+ type: Component,
1314
+ args: [{ standalone: true, selector: "cao-footer", template: "<footer>\n <ul>\n <li>{{ footerText }} \u00A9 {{ currentYear }}</li>\n </ul>\n</footer>\n", styles: ["*{list-style:none;text-decoration:none}footer{display:flex;align-items:end;justify-content:end;height:35px;padding:0 50px 10px 0;background-color:var(--white);border-top:2px solid var(--border-footer);position:fixed;bottom:0;right:0;width:100%;z-index:100}footer.renova-color{color:var(--accent)}footer.red{color:var(--digital-color)}\n"] }]
1315
+ }], propDecorators: { currentRoute: [{
1316
+ type: Input
1317
+ }], footerText: [{
1318
+ type: Input
1319
+ }] } });
1320
+
118
1321
  /*
119
1322
  * Public API Surface of ngx-opalbytes-components
120
1323
  */
@@ -123,5 +1326,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
123
1326
  * Generated bundle index. Do not edit.
124
1327
  */
125
1328
 
126
- export { BaseAlert, BaseButton, BaseDialog };
1329
+ export { BaseAlert, BaseButton, BaseDialog, BaseTimeRange, DropDownComponent, FilterTableService, Footer, LinksButton, RnvAutocompleteComponent, TableComponent, TableService, getPtBrPaginatorIntl };
127
1330
  //# sourceMappingURL=ngx-opalbytes-components.mjs.map