ngx-opalbytes-components 1.6.1 → 1.8.0

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 +337 -20
  2. package/fesm2022/ngx-opalbytes-components.mjs +1591 -730
  3. package/fesm2022/ngx-opalbytes-components.mjs.map +1 -1
  4. package/package.json +3 -2
  5. package/types/ngx-opalbytes-components.d.ts +459 -182
package/fesm2022/ngx-opalbytes-components.mjs CHANGED
@@ -1,44 +1,44 @@
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, ChangeDetectionStrategy, NgModule, Injectable, ViewChild, forwardRef, ViewEncapsulation, inject } from '@angular/core';
5
- import * as i2 from '@angular/material/tooltip';
4
+ import { EventEmitter, Input, Output, Component, ViewChild, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, inject, NgModule, Injectable } from '@angular/core';
5
+ import * as i3 from '@angular/material/tooltip';
6
6
  import { MatTooltipModule } from '@angular/material/tooltip';
7
- import * as i3 from 'lucide-angular';
7
+ import * as i3$1 from 'lucide-angular';
8
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';
9
+ import * as i2 from '@angular/forms';
10
+ import { FormsModule, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
11
+ import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
12
+ import * as i2$1 from '@angular/material/datepicker';
13
+ import { MatDatepickerModule, MatDateRangeInput } from '@angular/material/datepicker';
14
+ import * as i1$1 from '@angular/material/form-field';
15
+ import { MatFormFieldModule } from '@angular/material/form-field';
16
+ import * as i4 from '@angular/material/input';
17
+ import { MatInputModule } from '@angular/material/input';
18
+ import * as i5 from '@angular/material/autocomplete';
20
19
  import { MatAutocompleteModule } from '@angular/material/autocomplete';
21
- import * as i3$1 from '@angular/material/button';
20
+ import { startWith, map, Subject, BehaviorSubject } from 'rxjs';
21
+ import * as i4$1 from '@angular/material/icon';
22
+ import { MatIconModule } from '@angular/material/icon';
23
+ import { Router, ActivatedRoute } from '@angular/router';
24
+ import * as i1$4 from '@angular/cdk/overlay';
25
+ import { OverlayModule } from '@angular/cdk/overlay';
26
+ import * as i2$2 from '@angular/material/button';
22
27
  import { MatButtonModule } from '@angular/material/button';
23
28
  import { MatCardModule } from '@angular/material/card';
24
- import * as i4 from '@angular/material/checkbox';
29
+ import * as i3$2 from '@angular/material/checkbox';
25
30
  import { MatCheckboxModule } from '@angular/material/checkbox';
26
31
  import { MatChipsModule } from '@angular/material/chips';
32
+ import * as i1$3 from '@angular/material/core';
27
33
  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
34
  import { MatDialogModule } from '@angular/material/dialog';
31
35
  import { MatDividerModule } from '@angular/material/divider';
32
36
  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
37
  import { MatListModule } from '@angular/material/list';
40
- import * as i6 from '@angular/material/menu';
38
+ import * as i5$1 from '@angular/material/menu';
41
39
  import { MatMenuModule } from '@angular/material/menu';
40
+ import * as i1$2 from '@angular/material/paginator';
41
+ import { MatPaginatorModule, MatPaginatorIntl, MatPaginator } from '@angular/material/paginator';
42
42
  import { MatProgressBarModule } from '@angular/material/progress-bar';
43
43
  import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
44
44
  import { MatRadioModule } from '@angular/material/radio';
@@ -47,13 +47,18 @@ import { MatSidenavModule } from '@angular/material/sidenav';
47
47
  import { MatSlideToggleModule } from '@angular/material/slide-toggle';
48
48
  import { MatSliderModule } from '@angular/material/slider';
49
49
  import { MatSnackBarModule } from '@angular/material/snack-bar';
50
+ import * as i7 from '@angular/material/sort';
51
+ import { MatSortModule, MatSort } from '@angular/material/sort';
52
+ import * as i8 from '@angular/material/table';
53
+ import { MatTableModule, MatTableDataSource } from '@angular/material/table';
50
54
  import { MatTabsModule } from '@angular/material/tabs';
55
+ import * as i4$2 from '@angular/material/timepicker';
56
+ import { MatTimepickerModule } from '@angular/material/timepicker';
51
57
  import { MatToolbarModule } from '@angular/material/toolbar';
52
58
  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';
59
+ import { ComponentPortal } from '@angular/cdk/portal';
60
+ import { LiveAnnouncer } from '@angular/cdk/a11y';
61
+ import { SelectionModel } from '@angular/cdk/collections';
57
62
 
58
63
  class BaseButton {
59
64
  buttonClick = new EventEmitter();
@@ -80,10 +85,10 @@ class BaseButton {
80
85
  this.buttonClick.emit();
81
86
  }
82
87
  }
83
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
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"] }] });
88
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
89
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseButton, isStandalone: true, selector: "cao-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: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
85
90
  }
86
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseButton, decorators: [{
91
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseButton, decorators: [{
87
92
  type: Component,
88
93
  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"] }]
89
94
  }], propDecorators: { buttonClick: [{
@@ -110,129 +115,816 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
110
115
  type: Input
111
116
  }] } });
112
117
 
113
- class BaseAlert {
114
- data;
115
- iconPath;
116
- titleClass;
117
- iconPaths = {
118
- success: "https://placehold.co/600x400",
119
- error: "https://placehold.co/600x400",
120
- info: "https://placehold.co/600x400",
121
- warning: "https://placehold.co/600x400",
122
- };
123
- ngOnInit() {
124
- this.iconPath = this.iconPaths[this.data.type];
125
- this.titleClass = `title-${this.data.type}`;
118
+ class BaseInput {
119
+ type = "text";
120
+ placeholder = "";
121
+ label = "";
122
+ inputClass = "";
123
+ value = "";
124
+ errorMessage = "";
125
+ isDisabled = false;
126
+ maxLength;
127
+ searchMode = false;
128
+ showBorder = false;
129
+ isLucideIcon = false;
130
+ mask;
131
+ control;
132
+ tooltip = "";
133
+ dataCy = "";
134
+ textareaRows = "";
135
+ decimalMarker = ",";
136
+ thousandSeparator = ".";
137
+ allowNegativeNumbers = false;
138
+ separatorLimit = "";
139
+ set leadingIcon(value) {
140
+ this._leadingIcon = this.resolveIcon(value);
141
+ this.icon = true;
142
+ }
143
+ set trailingIcon(value) {
144
+ this._trailingIcon = this.resolveIcon(value);
145
+ this.icon = true;
146
+ }
147
+ valueChange = new EventEmitter();
148
+ searchClick = new EventEmitter();
149
+ inputChange = new EventEmitter();
150
+ isFocused = false;
151
+ icon = false;
152
+ _leadingIcon;
153
+ _trailingIcon;
154
+ onChange = () => { };
155
+ onTouched = () => { };
156
+ get hasError() {
157
+ return !!this.errorMessage;
158
+ }
159
+ controlName = "";
160
+ get controlNameValue() {
161
+ return this.controlName;
162
+ }
163
+ onInput(event) {
164
+ const newValue = event.target.value;
165
+ this.value = newValue;
166
+ this.onChange(newValue);
167
+ this.valueChange.emit(newValue);
168
+ }
169
+ onInputChange(event) {
170
+ const newValue = event.target.value;
171
+ this.value = newValue;
172
+ this.inputChange.emit(newValue);
173
+ }
174
+ onFocus() {
175
+ this.isFocused = true;
176
+ this.onTouched();
177
+ }
178
+ onBlur() {
179
+ this.isFocused = false;
180
+ this.onTouched();
181
+ if (this.control?.touched && this.control?.valid && this.control?.value) {
182
+ setTimeout(() => {
183
+ const active = document.activeElement;
184
+ const current = document.querySelector(`[formcontrolname="${this.controlNameValue}"]`);
185
+ if (!current || !active || !current.contains(active)) {
186
+ this.control?.markAsUntouched();
187
+ }
188
+ });
189
+ }
190
+ }
191
+ onSearchClick() {
192
+ this.searchClick.emit();
193
+ }
194
+ writeValue(value) {
195
+ this.value = value || "";
196
+ }
197
+ registerOnChange(fn) {
198
+ this.onChange = fn;
199
+ }
200
+ registerOnTouched(fn) {
201
+ this.onTouched = fn;
126
202
  }
127
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
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 });
203
+ setDisabledState(isDisabled) {
204
+ this.isDisabled = isDisabled;
205
+ }
206
+ resolveIcon(variant) {
207
+ if (this.isLucideIcon) {
208
+ return variant;
209
+ }
210
+ const icons = {
211
+ doctor: "assets/images/svg/doctor.svg",
212
+ calendar: "assets/images/svg/calendar.svg",
213
+ time: "assets/images/svg/time.svg",
214
+ pay: "assets/images/svg/money.svg",
215
+ search: "assets/images/svg/search-icon.svg",
216
+ };
217
+ return icons[variant] || variant;
218
+ }
219
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
220
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseInput, isStandalone: true, selector: "cao-input", inputs: { type: "type", placeholder: "placeholder", label: "label", inputClass: "inputClass", value: "value", errorMessage: "errorMessage", isDisabled: "isDisabled", maxLength: "maxLength", searchMode: "searchMode", showBorder: "showBorder", isLucideIcon: "isLucideIcon", mask: "mask", control: "control", tooltip: "tooltip", dataCy: "dataCy", textareaRows: "textareaRows", decimalMarker: "decimalMarker", thousandSeparator: "thousandSeparator", allowNegativeNumbers: "allowNegativeNumbers", separatorLimit: "separatorLimit", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", controlName: "controlName" }, outputs: { valueChange: "valueChange", searchClick: "searchClick", inputChange: "inputChange" }, providers: [
221
+ {
222
+ provide: NG_VALUE_ACCESSOR,
223
+ useExisting: BaseInput,
224
+ multi: true,
225
+ },
226
+ provideNgxMask(),
227
+ ], ngImport: i0, template: "<div class=\"form-field input-component\" [class.search-mode]=\"searchMode\">\n @if (label) {\n <label for=\"{{ controlNameValue }}\">{{ label }}</label>\n }\n\n <div class=\"input-wrapper\" [class.has-leading-icon]=\"_leadingIcon\" [class.has-trailing-icon]=\"_trailingIcon\"\n [class.focused]=\"isFocused\">\n @if (_leadingIcon) { @if (isLucideIcon) {\n <lucide-angular class=\"my-icon\" [name]=\"leadingIcon\" />\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de in\u00EDcio\" [ngSrc]=\"_leadingIcon\" [fill]=\"true\" />\n </div>\n } } @switch (type) { @case ('textarea') {\n <textarea matTooltip=\"{{ tooltip }}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-arrow-tooltip\" [attr.data-cy]=\"dataCy\"\n [placeholder]=\"placeholder\" [disabled]=\"isDisabled\" [ngClass]=\"[\n inputClass,\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\" [attr.maxlength]=\"maxLength\"\n [rows]=\"textareaRows\" [mask]=\"mask\" [allowNegativeNumbers]=\"allowNegativeNumbers\" [thousandSeparator]=\"thousandSeparator\" [decimalMarker]=\"decimalMarker\" [separatorLimit]=\"separatorLimit\"\n [(ngModel)]=\"value\" (input)=\"onInput($event)\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\"></textarea>\n } @default {\n <input matTooltip=\"{{ tooltip }}\" matTooltipPosition=\"below\" matTooltipClass=\"custom-arrow-tooltip\" [attr.data-cy]=\"dataCy\" [type]=\"type\"\n [placeholder]=\"placeholder\" [disabled]=\"isDisabled\" [ngClass]=\"[\n inputClass,\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\" [attr.maxlength]=\"maxLength\"\n [mask]=\"mask\" [allowNegativeNumbers]=\"allowNegativeNumbers\" [thousandSeparator]=\"thousandSeparator\" [decimalMarker]=\"decimalMarker\" [separatorLimit]=\"separatorLimit\" [(ngModel)]=\"value\" (input)=\"onInput($event)\"\n (change)=\"onInputChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" />\n } } @if (_trailingIcon) { @if (isLucideIcon) {\n <lucide-angular class=\"my-icon\" [name]=\"leadingIcon\" />\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de fim\" [ngSrc]=\"_trailingIcon\"\n [fill]=\"true\" />\n </div>\n } } @if (searchMode) {\n <div class=\"search-icon-border\">\n <img class=\"search-icon\" alt=\"search\" aria-hidden=\"false\"\n tabindex=\"0\" \n [ngSrc]=\"'assets/images/svg/search-icon.svg'\"\n [fill]=\"true\"\n (keydown)=\"onSearchClick()\"\n (keydown.enter)=\"onSearchClick()\"\n (click)=\"onSearchClick()\" />\n </div>\n }\n </div>\n</div>", styles: [".form-field{display:flex;flex-direction:column;width:100%}label{font-size:12px;color:var(--primary);font-weight:700;text-transform:uppercase;white-space:nowrap}.input-wrapper{position:relative;width:100%}.input-wrapper input,.input-wrapper textarea{width:100%;border:none;background-color:var(--input-background);border-radius:8px;padding:14px 10px;color:var(--text-color-input);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--input-text)}.input-wrapper input:focus,.input-wrapper textarea:focus{outline:none;box-shadow:none}.input-wrapper.has-leading-icon input{padding-left:33px}.input-wrapper.has-trailing-icon input{padding-right:30px}.input-wrapper img{width:100%;height:auto}.input-wrapper .leading-icon,.input-wrapper .icon:first-child{position:absolute;top:53%;left:8px;transform:translateY(-50%);width:15px;pointer-events:none}.input-wrapper .leading-icon::placeholder,.input-wrapper .icon:first-child::placeholder{margin-left:20px}.input-wrapper .trailing-icon,.input-wrapper .icon:last-child{position:absolute;top:53%;right:14px;transform:translateY(-50%);width:15px}.input-wrapper .trailing-icon img,.input-wrapper .icon:last-child img{width:100%;height:auto}.input-wrapper .material-icons{font-size:20px;color:var(--input-text)}.input-wrapper .search-icon-border{position:absolute;top:50%;right:14px;transform:translateY(-50%);border-left:1px solid var(--line-color);padding-left:8px;height:24px;display:flex;align-items:center}.input-wrapper .search-icon{width:16px;height:24px;cursor:pointer;transition:filter .2s}.input-wrapper .search-icon:hover{filter:invert(62%) sepia(92%) saturate(747%) hue-rotate(142deg) brightness(97%) contrast(101%)}[type=date]{height:43px;padding:14px 0 14px 12px!important}[type=date]::-webkit-calendar-picker-indicator{background:url(/assets/images/svg/input-date-icon.svg) no-repeat center;cursor:pointer;border-left:1px solid var(--line-color);padding-left:12px;width:30px;height:35px}[type=date].invalid::-webkit-calendar-picker-indicator{border-left:1px solid var(--error)}[type=date].valid::-webkit-calendar-picker-indicator{border-left:1px solid var(--success)}.input-date-disabled{background:url(/assets/images/svg/icon-date-border.svg) no-repeat right 12px center;background-size:30px;border:none;border-radius:8px;background-color:var(--input-background);padding:12px 40px 12px 16px;width:100%;color:var(--input-text)}.input-date-disabled::placeholder{color:var(--input-text)}.input-secondary{width:100%;border:1px solid var(--data-bg)!important;background-color:var(--white)!important}.input-secondary.invalid{border:1px solid var(--error)!important}.input-secondary.valid{border:1px solid var(--success)!important}.input-wrapper .invalid{border:1px solid var(--error)}.input-wrapper .valid{border:1px solid var(--success)}.input-border-primary{border:1px solid var(--primary)!important;background-color:var(--white)!important}.input-border-primary.invalid{border:1px solid var(--error)!important}.input-border-primary.valid{border:1px solid var(--success)!important}::ng-deep .custom-arrow-tooltip{background-color:var(--color-tooltip);color:var(--white);padding:0 4px;border-radius:6px;font-size:12px;position:relative;text-align:center;max-width:260px;box-shadow:0 2px 10px #0000004d}::ng-deep .input-component .cdk-overlay-pane .custom-arrow-tooltip:after{content:\"\";position:absolute;top:-6px;rotate:180deg;right:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--color-tooltip)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] });
129
228
  }
130
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseAlert, decorators: [{
229
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseInput, decorators: [{
131
230
  type: Component,
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" }]
133
- }] });
231
+ args: [{ selector: "cao-input", imports: [CommonModule, FormsModule, NgxMaskDirective, MatTooltipModule, LucideAngularModule, NgOptimizedImage], providers: [
232
+ {
233
+ provide: NG_VALUE_ACCESSOR,
234
+ useExisting: BaseInput,
235
+ multi: true,
236
+ },
237
+ provideNgxMask(),
238
+ ], template: "<div class=\"form-field input-component\" [class.search-mode]=\"searchMode\">\n @if (label) {\n <label for=\"{{ controlNameValue }}\">{{ label }}</label>\n }\n\n <div class=\"input-wrapper\" [class.has-leading-icon]=\"_leadingIcon\" [class.has-trailing-icon]=\"_trailingIcon\"\n [class.focused]=\"isFocused\">\n @if (_leadingIcon) { @if (isLucideIcon) {\n <lucide-angular class=\"my-icon\" [name]=\"leadingIcon\" />\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de in\u00EDcio\" [ngSrc]=\"_leadingIcon\" [fill]=\"true\" />\n </div>\n } } @switch (type) { @case ('textarea') {\n <textarea matTooltip=\"{{ tooltip }}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-arrow-tooltip\" [attr.data-cy]=\"dataCy\"\n [placeholder]=\"placeholder\" [disabled]=\"isDisabled\" [ngClass]=\"[\n inputClass,\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\" [attr.maxlength]=\"maxLength\"\n [rows]=\"textareaRows\" [mask]=\"mask\" [allowNegativeNumbers]=\"allowNegativeNumbers\" [thousandSeparator]=\"thousandSeparator\" [decimalMarker]=\"decimalMarker\" [separatorLimit]=\"separatorLimit\"\n [(ngModel)]=\"value\" (input)=\"onInput($event)\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\"></textarea>\n } @default {\n <input matTooltip=\"{{ tooltip }}\" matTooltipPosition=\"below\" matTooltipClass=\"custom-arrow-tooltip\" [attr.data-cy]=\"dataCy\" [type]=\"type\"\n [placeholder]=\"placeholder\" [disabled]=\"isDisabled\" [ngClass]=\"[\n inputClass,\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\" [attr.maxlength]=\"maxLength\"\n [mask]=\"mask\" [allowNegativeNumbers]=\"allowNegativeNumbers\" [thousandSeparator]=\"thousandSeparator\" [decimalMarker]=\"decimalMarker\" [separatorLimit]=\"separatorLimit\" [(ngModel)]=\"value\" (input)=\"onInput($event)\"\n (change)=\"onInputChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" />\n } } @if (_trailingIcon) { @if (isLucideIcon) {\n <lucide-angular class=\"my-icon\" [name]=\"leadingIcon\" />\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de fim\" [ngSrc]=\"_trailingIcon\"\n [fill]=\"true\" />\n </div>\n } } @if (searchMode) {\n <div class=\"search-icon-border\">\n <img class=\"search-icon\" alt=\"search\" aria-hidden=\"false\"\n tabindex=\"0\" \n [ngSrc]=\"'assets/images/svg/search-icon.svg'\"\n [fill]=\"true\"\n (keydown)=\"onSearchClick()\"\n (keydown.enter)=\"onSearchClick()\"\n (click)=\"onSearchClick()\" />\n </div>\n }\n </div>\n</div>", styles: [".form-field{display:flex;flex-direction:column;width:100%}label{font-size:12px;color:var(--primary);font-weight:700;text-transform:uppercase;white-space:nowrap}.input-wrapper{position:relative;width:100%}.input-wrapper input,.input-wrapper textarea{width:100%;border:none;background-color:var(--input-background);border-radius:8px;padding:14px 10px;color:var(--text-color-input);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--input-text)}.input-wrapper input:focus,.input-wrapper textarea:focus{outline:none;box-shadow:none}.input-wrapper.has-leading-icon input{padding-left:33px}.input-wrapper.has-trailing-icon input{padding-right:30px}.input-wrapper img{width:100%;height:auto}.input-wrapper .leading-icon,.input-wrapper .icon:first-child{position:absolute;top:53%;left:8px;transform:translateY(-50%);width:15px;pointer-events:none}.input-wrapper .leading-icon::placeholder,.input-wrapper .icon:first-child::placeholder{margin-left:20px}.input-wrapper .trailing-icon,.input-wrapper .icon:last-child{position:absolute;top:53%;right:14px;transform:translateY(-50%);width:15px}.input-wrapper .trailing-icon img,.input-wrapper .icon:last-child img{width:100%;height:auto}.input-wrapper .material-icons{font-size:20px;color:var(--input-text)}.input-wrapper .search-icon-border{position:absolute;top:50%;right:14px;transform:translateY(-50%);border-left:1px solid var(--line-color);padding-left:8px;height:24px;display:flex;align-items:center}.input-wrapper .search-icon{width:16px;height:24px;cursor:pointer;transition:filter .2s}.input-wrapper .search-icon:hover{filter:invert(62%) sepia(92%) saturate(747%) hue-rotate(142deg) brightness(97%) contrast(101%)}[type=date]{height:43px;padding:14px 0 14px 12px!important}[type=date]::-webkit-calendar-picker-indicator{background:url(/assets/images/svg/input-date-icon.svg) no-repeat center;cursor:pointer;border-left:1px solid var(--line-color);padding-left:12px;width:30px;height:35px}[type=date].invalid::-webkit-calendar-picker-indicator{border-left:1px solid var(--error)}[type=date].valid::-webkit-calendar-picker-indicator{border-left:1px solid var(--success)}.input-date-disabled{background:url(/assets/images/svg/icon-date-border.svg) no-repeat right 12px center;background-size:30px;border:none;border-radius:8px;background-color:var(--input-background);padding:12px 40px 12px 16px;width:100%;color:var(--input-text)}.input-date-disabled::placeholder{color:var(--input-text)}.input-secondary{width:100%;border:1px solid var(--data-bg)!important;background-color:var(--white)!important}.input-secondary.invalid{border:1px solid var(--error)!important}.input-secondary.valid{border:1px solid var(--success)!important}.input-wrapper .invalid{border:1px solid var(--error)}.input-wrapper .valid{border:1px solid var(--success)}.input-border-primary{border:1px solid var(--primary)!important;background-color:var(--white)!important}.input-border-primary.invalid{border:1px solid var(--error)!important}.input-border-primary.valid{border:1px solid var(--success)!important}::ng-deep .custom-arrow-tooltip{background-color:var(--color-tooltip);color:var(--white);padding:0 4px;border-radius:6px;font-size:12px;position:relative;text-align:center;max-width:260px;box-shadow:0 2px 10px #0000004d}::ng-deep .input-component .cdk-overlay-pane .custom-arrow-tooltip:after{content:\"\";position:absolute;top:-6px;rotate:180deg;right:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--color-tooltip)}\n"] }]
239
+ }], propDecorators: { type: [{
240
+ type: Input
241
+ }], placeholder: [{
242
+ type: Input
243
+ }], label: [{
244
+ type: Input
245
+ }], inputClass: [{
246
+ type: Input
247
+ }], value: [{
248
+ type: Input
249
+ }], errorMessage: [{
250
+ type: Input
251
+ }], isDisabled: [{
252
+ type: Input
253
+ }], maxLength: [{
254
+ type: Input
255
+ }], searchMode: [{
256
+ type: Input
257
+ }], showBorder: [{
258
+ type: Input
259
+ }], isLucideIcon: [{
260
+ type: Input
261
+ }], mask: [{
262
+ type: Input
263
+ }], control: [{
264
+ type: Input
265
+ }], tooltip: [{
266
+ type: Input
267
+ }], dataCy: [{
268
+ type: Input
269
+ }], textareaRows: [{
270
+ type: Input
271
+ }], decimalMarker: [{
272
+ type: Input
273
+ }], thousandSeparator: [{
274
+ type: Input
275
+ }], allowNegativeNumbers: [{
276
+ type: Input
277
+ }], separatorLimit: [{
278
+ type: Input
279
+ }], leadingIcon: [{
280
+ type: Input
281
+ }], trailingIcon: [{
282
+ type: Input
283
+ }], valueChange: [{
284
+ type: Output
285
+ }], searchClick: [{
286
+ type: Output
287
+ }], inputChange: [{
288
+ type: Output
289
+ }], controlName: [{
290
+ type: Input
291
+ }] } });
134
292
 
135
- class BaseDialog {
136
- config;
137
- closeDialog = this.noop;
138
- iconPaths = {
139
- success: "https://placehold.co/600x400",
140
- error: "https://placehold.co/600x400",
141
- info: "https://placehold.co/600x400",
142
- warning: "https://placehold.co/600x400",
143
- };
144
- noop() {
145
- return;
293
+ class BaseTimeRange {
294
+ label = "";
295
+ max;
296
+ minDate;
297
+ maxDate;
298
+ startDate;
299
+ finalDate;
300
+ dataCy;
301
+ controlName = "";
302
+ rangeSelected = new EventEmitter();
303
+ dateRangeInput;
304
+ ngOnInit() {
305
+ if (!this.dataCy) {
306
+ this.dataCy = `time-range-${this.label}`;
307
+ }
146
308
  }
147
- getIconPath() {
148
- return this.iconPaths[this.config.type];
309
+ onSelectStartDate(event) {
310
+ const date = event.target.value;
311
+ this.startDate = date;
312
+ this.finalDate = undefined;
313
+ const maxDate = new Date(date);
314
+ maxDate.setDate(maxDate.getDate() + 30);
315
+ this.maxDate = maxDate;
149
316
  }
150
- handleConfirm() {
151
- this.config.onConfirm?.();
152
- this.closeDialog();
317
+ onInputMaxDate(event) {
318
+ const finalDate = event.target.value;
319
+ if (this.startDate && finalDate) {
320
+ const data = [this.startDate, finalDate];
321
+ this.rangeSelected.emit(data);
322
+ }
153
323
  }
154
- handleCancel() {
155
- this.config.onCancel?.();
156
- this.closeDialog();
324
+ clearInputs() {
325
+ this.max = undefined;
326
+ this.minDate = undefined;
327
+ this.maxDate = undefined;
328
+ this.startDate = undefined;
329
+ this.finalDate = undefined;
330
+ this.dateRangeInput._startInput.value = "";
331
+ this.dateRangeInput._endInput.value = "";
157
332
  }
158
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
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"] }] });
333
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTimeRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
334
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }] });
160
335
  }
161
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseDialog, decorators: [{
336
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTimeRange, decorators: [{
162
337
  type: Component,
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" }]
164
- }], propDecorators: { config: [{
338
+ 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"] }]
339
+ }], propDecorators: { label: [{
340
+ type: Input
341
+ }], max: [{
342
+ type: Input
343
+ }], minDate: [{
165
344
  type: Input
345
+ }], maxDate: [{
346
+ type: Input
347
+ }], startDate: [{
348
+ type: Input
349
+ }], finalDate: [{
350
+ type: Input
351
+ }], dataCy: [{
352
+ type: Input
353
+ }], controlName: [{
354
+ type: Input
355
+ }], rangeSelected: [{
356
+ type: Output
357
+ }], dateRangeInput: [{
358
+ type: ViewChild,
359
+ args: [MatDateRangeInput]
166
360
  }] } });
167
361
 
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,
362
+ class RnvAutocompleteComponent {
363
+ label = "";
364
+ placeholder = "";
365
+ options = [];
366
+ control = new FormControl();
367
+ dataCy = "";
368
+ controlName = "";
369
+ internalControl = new FormControl("");
370
+ filteredOptions$;
371
+ isFocused = false;
372
+ onChange = () => { };
373
+ onTouched = () => { };
374
+ ngOnInit() {
375
+ this.filteredOptions$ = this.internalControl.valueChanges.pipe(startWith(""), map((value) => this.filter(value || "")));
376
+ this.control.valueChanges.subscribe((value) => {
377
+ const displayValue = value && typeof value === "object" ? this.displayFn(value) : value;
378
+ this.internalControl.setValue(displayValue, { emitEvent: false });
379
+ });
380
+ }
381
+ onFocus() {
382
+ this.isFocused = true;
383
+ this.onTouched();
384
+ }
385
+ onBlur() {
386
+ this.isFocused = false;
387
+ this.onTouched();
388
+ }
389
+ filter(value) {
390
+ const filterValue = (typeof value === "string" ? value : value?.nome)?.toLowerCase() || "";
391
+ if (!this.options) {
392
+ return [];
393
+ }
394
+ return this.options.filter((option) => {
395
+ const nomeMatch = option.nome.toLowerCase().includes(filterValue);
396
+ const idMatch = option.id?.toString().toLowerCase().includes(filterValue);
397
+ return nomeMatch || idMatch;
398
+ });
399
+ }
400
+ displayFn(option) {
401
+ return option && option.nome ? option.nome : "";
402
+ }
403
+ onOptionSelected(event) {
404
+ this.onChange(event.option.value);
405
+ this.onTouched();
406
+ }
407
+ get errorText() {
408
+ if (!this.control) {
409
+ return null;
410
+ }
411
+ const isEmpty = this.control.value === null || this.control.value === "";
412
+ if (this.control.hasError("required") && isEmpty) {
413
+ return "*Campo obrigatório";
414
+ }
415
+ if (this.control.touched && this.control.invalid) {
416
+ if (this.control.hasError("cpfInvalid")) {
417
+ return "CPF inválido";
418
+ }
419
+ if (this.control.hasError("cellPhoneInvalid")) {
420
+ return "Número inválido";
421
+ }
422
+ if (this.control.hasError("emailInvalid")) {
423
+ return "Email inválido";
424
+ }
425
+ if (this.control.hasError("cnpjInvalid")) {
426
+ return "CNPJ inválido";
427
+ }
428
+ if (this.control.hasError("rgInvalid")) {
429
+ return "RG inválido";
430
+ }
431
+ if (this.control.hasError("dateInvalid")) {
432
+ return "Data inválida";
433
+ }
434
+ if (this.control.hasError("dateStartInvalid")) {
435
+ return "Data Inicial inválida";
436
+ }
437
+ if (this.control.hasError("dateEndInvalid")) {
438
+ return "Data Final inválida";
439
+ }
440
+ return "Formato inválido";
441
+ }
442
+ return null;
443
+ }
444
+ get controlNameValue() {
445
+ return this.controlName;
446
+ }
447
+ writeValue(value) {
448
+ const displayValue = value && typeof value === "object" ? this.displayFn(value) : value;
449
+ this.internalControl.setValue(displayValue, { emitEvent: false });
450
+ }
451
+ registerOnChange(fn) {
452
+ this.onChange = fn;
453
+ }
454
+ registerOnTouched(fn) {
455
+ this.onTouched = fn;
456
+ }
457
+ setDisabledState(isDisabled) {
458
+ isDisabled ? this.internalControl.disable() : this.internalControl.enable();
459
+ }
460
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RnvAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
461
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: RnvAutocompleteComponent, isStandalone: true, selector: "cao-autocomplete", inputs: { label: "label", placeholder: "placeholder", options: "options", control: "control", dataCy: "dataCy", controlName: "controlName" }, providers: [
462
+ {
463
+ provide: NG_VALUE_ACCESSOR,
464
+ useExisting: forwardRef(() => RnvAutocompleteComponent),
465
+ multi: true,
466
+ },
467
+ ], 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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.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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.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 });
468
+ }
469
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RnvAutocompleteComponent, decorators: [{
470
+ type: Component,
471
+ args: [{ selector: "cao-autocomplete", standalone: true, imports: [
472
+ CommonModule,
473
+ ReactiveFormsModule,
474
+ MatFormFieldModule,
475
+ MatInputModule,
476
+ MatAutocompleteModule,
477
+ ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
478
+ {
479
+ provide: NG_VALUE_ACCESSOR,
480
+ useExisting: forwardRef(() => RnvAutocompleteComponent),
481
+ multi: true,
482
+ },
483
+ ], 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"] }]
484
+ }], propDecorators: { label: [{
485
+ type: Input
486
+ }], placeholder: [{
487
+ type: Input
488
+ }], options: [{
489
+ type: Input
490
+ }], control: [{
491
+ type: Input
492
+ }], dataCy: [{
493
+ type: Input
494
+ }], controlName: [{
495
+ type: Input
496
+ }] } });
497
+
498
+ class DropDownComponent {
499
+ _eref;
500
+ cdr;
501
+ textHeader = "SELECIONE UM ITEM";
502
+ options = [];
503
+ dropDownClass = "";
504
+ styleDropDown = {};
505
+ control;
506
+ controlName = "";
507
+ isDisabled = false;
508
+ itemSelected = new EventEmitter();
509
+ tooltip = "";
510
+ dropDirectionInput = "down";
511
+ dataCy = "";
512
+ trackByFn;
513
+ compareWith;
514
+ ariaLabel;
515
+ ariaLabelledBy;
516
+ listAriaLabel;
517
+ isOpen = false;
518
+ selectedItem;
519
+ filteredOptions = [];
520
+ searchControl = new FormControl("");
521
+ isTouched = false;
522
+ isFocused = false;
523
+ dropDirection;
524
+ removeValidBorder = false;
525
+ focusedIndex = -1;
526
+ _handleClickOutside = this.onClickOutside.bind(this);
527
+ constructor(_eref, cdr) {
528
+ this._eref = _eref;
529
+ this.cdr = cdr;
530
+ }
531
+ ngOnInit() {
532
+ document.addEventListener("click", this._handleClickOutside, true);
533
+ this.filteredOptions = [...this.options];
534
+ this.searchControl.valueChanges.subscribe((value) => {
535
+ this.filterOptions(value || "");
536
+ this.focusedIndex = -1;
537
+ });
538
+ }
539
+ ngOnDestroy() {
540
+ document.removeEventListener("click", this._handleClickOutside, true);
541
+ }
542
+ get activeDescendant() {
543
+ if (this.isOpen && this.focusedIndex >= 0 && this.filteredOptions[this.focusedIndex]) {
544
+ return `option-${this.dataCy}-${this.focusedIndex}`;
545
+ }
546
+ return null;
547
+ }
548
+ toggleDropdown() {
549
+ if (this.isDisabled) {
550
+ return;
551
+ }
552
+ ;
553
+ this.checkAvailableSpace();
554
+ this.isOpen = !this.isOpen;
555
+ this.isFocused = this.isOpen;
556
+ this.markAsTouched();
557
+ if (this.isOpen) {
558
+ this.searchControl.setValue("");
559
+ this.filteredOptions = [...this.options];
560
+ this.removeValidBorder = false;
561
+ this.focusedIndex = -1;
562
+ setTimeout(() => {
563
+ if (this.isOpen) {
564
+ const searchInput = this._eref.nativeElement.querySelector('.dropdown-search input');
565
+ if (searchInput) {
566
+ searchInput.focus();
567
+ }
568
+ }
569
+ });
570
+ }
571
+ else {
572
+ this.focusedIndex = -1;
573
+ }
574
+ this.cdr.detectChanges();
575
+ }
576
+ selectItem(option) {
577
+ if (this.isDisabled) {
578
+ return;
579
+ }
580
+ ;
581
+ this.selectedItem = option;
582
+ this.isOpen = false;
583
+ this.focusedIndex = -1;
584
+ this.itemSelected.emit(option);
585
+ this.onChange(option);
586
+ this.markAsTouched();
587
+ this.cdr.detectChanges();
588
+ }
589
+ clear() {
590
+ this.selectedItem = undefined;
591
+ this.onChange(null);
592
+ this.cdr.detectChanges();
593
+ }
594
+ filterOptions(searchTerm) {
595
+ if (!searchTerm) {
596
+ this.filteredOptions = [...this.options];
597
+ return;
598
+ }
599
+ const lowerCaseSearchTerm = searchTerm.toLowerCase();
600
+ this.filteredOptions = this.options.filter((option) => option.nome.toLowerCase().includes(lowerCaseSearchTerm) ||
601
+ option.id?.toString().toLowerCase().includes(lowerCaseSearchTerm));
602
+ }
603
+ trackBy(index, item) {
604
+ return this.trackByFn ? this.trackByFn(index, item) : item.id;
605
+ }
606
+ onClickOutside(event) {
607
+ if (!this._eref.nativeElement.contains(event.target)) {
608
+ if (this.isOpen) {
609
+ this.isOpen = false;
610
+ }
611
+ if (this.isFocused) {
612
+ this.isFocused = false;
613
+ }
614
+ this.focusedIndex = -1;
615
+ this.markAsTouched();
616
+ this.removeValidBorder = true;
617
+ this.cdr.detectChanges();
618
+ }
619
+ }
620
+ onArrowDown(event) {
621
+ if (this.isDisabled) {
622
+ return;
623
+ }
624
+ ;
625
+ event.preventDefault();
626
+ event.stopPropagation();
627
+ if (this.filteredOptions.length === 0) {
628
+ return;
629
+ }
630
+ ;
631
+ if (this.focusedIndex === -1) {
632
+ this.focusedIndex = 0;
633
+ }
634
+ else {
635
+ this.focusedIndex = (this.focusedIndex + 1) % this.filteredOptions.length;
636
+ }
637
+ this.scrollIntoView();
638
+ this.cdr.detectChanges();
639
+ }
640
+ onArrowUp(event) {
641
+ if (this.isDisabled) {
642
+ return;
643
+ }
644
+ ;
645
+ event.preventDefault();
646
+ event.stopPropagation();
647
+ if (this.filteredOptions.length === 0) {
648
+ return;
649
+ }
650
+ ;
651
+ if (this.focusedIndex === -1) {
652
+ this.focusedIndex = this.filteredOptions.length - 1;
653
+ }
654
+ else {
655
+ this.focusedIndex = this.focusedIndex <= 0
656
+ ? this.filteredOptions.length - 1
657
+ : this.focusedIndex - 1;
658
+ }
659
+ this.scrollIntoView();
660
+ this.cdr.detectChanges();
661
+ }
662
+ onSearchEnter(event) {
663
+ event.preventDefault();
664
+ event.stopPropagation();
665
+ if (this.focusedIndex >= 0 && this.focusedIndex < this.filteredOptions.length) {
666
+ this.selectItem(this.filteredOptions[this.focusedIndex]);
667
+ }
668
+ else if (this.filteredOptions.length > 0) {
669
+ this.selectItem(this.filteredOptions[0]);
670
+ }
671
+ }
672
+ closeDropdown() {
673
+ if (this.isDisabled) {
674
+ return;
675
+ }
676
+ ;
677
+ this.isOpen = false;
678
+ this.focusedIndex = -1;
679
+ this.isFocused = false;
680
+ this.cdr.detectChanges();
681
+ }
682
+ scrollIntoView() {
683
+ if (!this.isOpen || this.focusedIndex === -1) {
684
+ return;
685
+ }
686
+ ;
687
+ setTimeout(() => {
688
+ const element = document.getElementById(`option-${this.dataCy}-${this.focusedIndex}`);
689
+ if (element) {
690
+ element.scrollIntoView({
691
+ block: 'nearest',
692
+ behavior: 'smooth'
693
+ });
694
+ }
695
+ }, 0);
696
+ }
697
+ checkAvailableSpace() {
698
+ if (this.dropDirectionInput === "up") {
699
+ this.dropDirection = "up";
700
+ return;
701
+ }
702
+ const rect = this._eref.nativeElement.getBoundingClientRect();
703
+ const windowHeight = window.innerHeight;
704
+ const dropdownHeight = 200;
705
+ const spaceBelow = windowHeight - rect.bottom;
706
+ this.dropDirection = spaceBelow < dropdownHeight ? "up" : "down";
707
+ }
708
+ writeValue(value) {
709
+ if (value !== null && value !== undefined) {
710
+ const match = this.options.find((opt) => this.compareWith
711
+ ? this.compareWith(opt, value)
712
+ : opt.id === (typeof value === "object" && value ? value.id : value));
713
+ if (match) {
714
+ this.selectedItem = match;
715
+ }
716
+ else {
717
+ const matchByName = this.options.find((opt) => opt.nome === value);
718
+ if (matchByName) {
719
+ this.selectedItem = matchByName;
720
+ }
721
+ }
722
+ }
723
+ else {
724
+ this.selectedItem = undefined;
725
+ }
726
+ this.cdr.detectChanges();
727
+ }
728
+ registerOnChange(fn) {
729
+ this.onChange = fn;
730
+ }
731
+ registerOnTouched(fn) {
732
+ this.onTouched = fn;
733
+ }
734
+ onChange = () => { };
735
+ onTouched = () => { };
736
+ get errorText() {
737
+ if (!this.control) {
738
+ return null;
739
+ }
740
+ if (this.control.hasError("required")) {
741
+ return "*Campo obrigatório";
742
+ }
743
+ return null;
744
+ }
745
+ markAsTouched() {
746
+ if (!this.isTouched) {
747
+ this.onTouched();
748
+ this.isTouched = true;
749
+ this.control?.markAsTouched();
750
+ }
751
+ }
752
+ get controlNameValue() {
753
+ return this.controlName;
754
+ }
755
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DropDownComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
756
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: [
757
+ {
758
+ provide: NG_VALUE_ACCESSOR,
759
+ useExisting: forwardRef(() => DropDownComponent),
760
+ multi: true,
761
+ },
762
+ ], 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: i4$1.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: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], encapsulation: i0.ViewEncapsulation.None });
763
+ }
764
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DropDownComponent, decorators: [{
765
+ type: Component,
766
+ args: [{ selector: "cao-drop-down", encapsulation: ViewEncapsulation.None, imports: [
767
+ MatIconModule,
768
+ CommonModule,
769
+ MatTooltipModule,
770
+ ReactiveFormsModule,
771
+ ], providers: [
772
+ {
773
+ provide: NG_VALUE_ACCESSOR,
774
+ useExisting: forwardRef(() => DropDownComponent),
775
+ multi: true,
776
+ },
777
+ ], 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"] }]
778
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { textHeader: [{
779
+ type: Input
780
+ }], options: [{
781
+ type: Input
782
+ }], dropDownClass: [{
783
+ type: Input
784
+ }], styleDropDown: [{
785
+ type: Input
786
+ }], control: [{
787
+ type: Input
788
+ }], controlName: [{
789
+ type: Input
790
+ }], isDisabled: [{
791
+ type: Input
792
+ }], itemSelected: [{
793
+ type: Output
794
+ }], tooltip: [{
795
+ type: Input
796
+ }], dropDirectionInput: [{
797
+ type: Input
798
+ }], dataCy: [{
799
+ type: Input
800
+ }], trackByFn: [{
801
+ type: Input
802
+ }], compareWith: [{
803
+ type: Input
804
+ }], ariaLabel: [{
805
+ type: Input
806
+ }], ariaLabelledBy: [{
807
+ type: Input
808
+ }], listAriaLabel: [{
809
+ type: Input
810
+ }] } });
811
+
812
+ class LinksButton {
813
+ navContent;
814
+ router = inject(Router);
815
+ route = inject(ActivatedRoute);
816
+ isValidationRequired(link) {
817
+ if (link.disabled) {
818
+ return;
819
+ }
820
+ link.directRoute ? this.directRoute(link.url) : this.navigateTo(link.url);
821
+ }
822
+ navigateTo(url) {
823
+ this.router.navigate([url], { relativeTo: this.route });
824
+ }
825
+ directRoute(url) {
826
+ this.router.navigate([url]);
827
+ }
828
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LinksButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
829
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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"] });
830
+ }
831
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LinksButton, decorators: [{
832
+ type: Component,
833
+ 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"] }]
834
+ }], propDecorators: { navContent: [{
835
+ type: Input,
836
+ args: [{ required: true }]
837
+ }] } });
838
+
839
+ class Footer {
840
+ currentYear = new Date().getFullYear();
841
+ currentRoute;
842
+ footerText;
843
+ isFixed = true;
844
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Footer, deps: [], target: i0.ɵɵFactoryTarget.Component });
845
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Footer, isStandalone: true, selector: "cao-footer", inputs: { currentRoute: "currentRoute", footerText: "footerText", isFixed: "isFixed" }, ngImport: i0, template: "<footer class=\"footer-element\" [class.fixed]=\"isFixed\">\n <div class=\"flex col\">\n <ng-content />\n @if(footerText){\n <ul class=\"footer-end\">\n <li>{{ footerText }} \u00A9 {{ currentYear }}</li>\n </ul>\n }\n </div>\n</footer>\n", styles: ["*{list-style:none;text-decoration:none}.footer-component{display:flex;align-items:end;justify-content:end;height:35px;padding:0 50px 10px 0;position:fixed;bottom:0;right:0;width:100%;z-index:100}.footer-component .flex{display:flex}.footer-component.isFixed{position:fixed}.footer-component.col{flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
846
+ }
847
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Footer, decorators: [{
848
+ type: Component,
849
+ args: [{ selector: "cao-footer", imports: [CommonModule], template: "<footer class=\"footer-element\" [class.fixed]=\"isFixed\">\n <div class=\"flex col\">\n <ng-content />\n @if(footerText){\n <ul class=\"footer-end\">\n <li>{{ footerText }} \u00A9 {{ currentYear }}</li>\n </ul>\n }\n </div>\n</footer>\n", styles: ["*{list-style:none;text-decoration:none}.footer-component{display:flex;align-items:end;justify-content:end;height:35px;padding:0 50px 10px 0;position:fixed;bottom:0;right:0;width:100%;z-index:100}.footer-component .flex{display:flex}.footer-component.isFixed{position:fixed}.footer-component.col{flex-direction:column}\n"] }]
850
+ }], propDecorators: { currentRoute: [{
851
+ type: Input
852
+ }], footerText: [{
853
+ type: Input
854
+ }], isFixed: [{
855
+ type: Input
856
+ }] } });
857
+
858
+ const modules = [
859
+ OverlayModule,
860
+ MatSnackBarModule,
861
+ MatAutocompleteModule,
862
+ MatButtonModule,
863
+ MatCardModule,
864
+ MatCheckboxModule,
865
+ MatChipsModule,
866
+ MatDatepickerModule,
867
+ MatDialogModule,
868
+ MatDividerModule,
869
+ MatExpansionModule,
870
+ MatFormFieldModule,
871
+ MatIconModule,
872
+ MatInputModule,
873
+ MatMenuModule,
874
+ MatNativeDateModule,
875
+ MatProgressBarModule,
876
+ MatProgressSpinnerModule,
877
+ MatPaginatorModule,
878
+ MatRadioModule,
879
+ MatSliderModule,
880
+ MatSlideToggleModule,
881
+ MatSortModule,
882
+ MatSelectModule,
883
+ MatTableModule,
884
+ MatTabsModule,
885
+ MatTooltipModule,
886
+ MatSidenavModule,
887
+ MatListModule,
888
+ MatToolbarModule,
889
+ MatTreeModule,
890
+ MatTimepickerModule
891
+ ];
892
+ class MaterialModule {
893
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
894
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: MaterialModule, imports: [OverlayModule,
895
+ MatSnackBarModule,
896
+ MatAutocompleteModule,
897
+ MatButtonModule,
898
+ MatCardModule,
899
+ MatCheckboxModule,
900
+ MatChipsModule,
901
+ MatDatepickerModule,
902
+ MatDialogModule,
903
+ MatDividerModule,
904
+ MatExpansionModule,
905
+ MatFormFieldModule,
906
+ MatIconModule,
907
+ MatInputModule,
908
+ MatMenuModule,
909
+ MatNativeDateModule,
910
+ MatProgressBarModule,
911
+ MatProgressSpinnerModule,
912
+ MatPaginatorModule,
913
+ MatRadioModule,
914
+ MatSliderModule,
915
+ MatSlideToggleModule,
916
+ MatSortModule,
917
+ MatSelectModule,
918
+ MatTableModule,
919
+ MatTabsModule,
920
+ MatTooltipModule,
921
+ MatSidenavModule,
922
+ MatListModule,
923
+ MatToolbarModule,
924
+ MatTreeModule,
925
+ MatTimepickerModule], exports: [OverlayModule,
926
+ MatSnackBarModule,
927
+ MatAutocompleteModule,
236
928
  MatButtonModule,
237
929
  MatCardModule,
238
930
  MatCheckboxModule,
@@ -260,8 +952,9 @@ class MaterialModule {
260
952
  MatSidenavModule,
261
953
  MatListModule,
262
954
  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,
955
+ MatTreeModule,
956
+ MatTimepickerModule] });
957
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialModule, providers: [{ provide: MAT_DATE_LOCALE, useValue: "pt-BR" }], imports: [modules, OverlayModule,
265
958
  MatSnackBarModule,
266
959
  MatAutocompleteModule,
267
960
  MatButtonModule,
@@ -291,32 +984,299 @@ class MaterialModule {
291
984
  MatSidenavModule,
292
985
  MatListModule,
293
986
  MatToolbarModule,
294
- MatTreeModule] });
987
+ MatTreeModule,
988
+ MatTimepickerModule] });
989
+ }
990
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialModule, decorators: [{
991
+ type: NgModule,
992
+ args: [{
993
+ imports: [modules],
994
+ exports: [modules],
995
+ providers: [{ provide: MAT_DATE_LOCALE, useValue: "pt-BR" }],
996
+ }]
997
+ }] });
998
+
999
+ class Paginator {
1000
+ totalItems = 0;
1001
+ pageSize = 10;
1002
+ currentPage = 1;
1003
+ pageSizeOptions = [5, 10, 20, 50];
1004
+ customClass = "";
1005
+ showFirstLastButtons = true;
1006
+ pageEvent = new EventEmitter();
1007
+ onPageEvent(event) {
1008
+ this.pageEvent.emit(event);
1009
+ }
1010
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Paginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
1011
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: Paginator, isStandalone: true, selector: "cao-paginator", inputs: { totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions", customClass: "customClass", showFirstLastButtons: "showFirstLastButtons" }, outputs: { pageEvent: "pageEvent" }, ngImport: i0, template: "<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)\" />", styles: [""], dependencies: [{ kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i1$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
295
1012
  }
296
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MaterialModule, decorators: [{
297
- type: NgModule,
1013
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Paginator, decorators: [{
1014
+ type: Component,
1015
+ args: [{ selector: 'cao-paginator', imports: [MaterialModule], template: "<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)\" />" }]
1016
+ }], propDecorators: { totalItems: [{
1017
+ type: Input
1018
+ }], pageSize: [{
1019
+ type: Input
1020
+ }], currentPage: [{
1021
+ type: Input
1022
+ }], pageSizeOptions: [{
1023
+ type: Input
1024
+ }], customClass: [{
1025
+ type: Input
1026
+ }], showFirstLastButtons: [{
1027
+ type: Input
1028
+ }], pageEvent: [{
1029
+ type: Output
1030
+ }] } });
1031
+
1032
+ class TimePicker {
1033
+ _adapter;
1034
+ control = new FormControl(null);
1035
+ isDisabled = false;
1036
+ dataCy;
1037
+ set min(v) {
1038
+ this._min = v;
1039
+ this.minInNumber = this.convertStringInNumber(v);
1040
+ this.customOptions = this.generateTimeOptions().filter((option) => option.label >= this._min);
1041
+ }
1042
+ set max(v) {
1043
+ this._max = v;
1044
+ this.maxInNumber = this.convertStringInNumber(v);
1045
+ this.customOptions = this.generateTimeOptions().filter((option) => option.label <= this._max);
1046
+ }
1047
+ minInNumber = 7;
1048
+ maxInNumber = 23;
1049
+ timeChange = new EventEmitter();
1050
+ _min = "07:00";
1051
+ _max = "23:00";
1052
+ customOptions = this.generateTimeOptions();
1053
+ constructor(_adapter) {
1054
+ this._adapter = _adapter;
1055
+ this._adapter.setLocale("pt-BR");
1056
+ }
1057
+ get errorText() {
1058
+ if (!this.control) {
1059
+ return null;
1060
+ }
1061
+ if (this.control.hasError("required") || (this.control.touched && !this.control.value)) {
1062
+ return "*Campo obrigatório";
1063
+ }
1064
+ if (this.control.hasError("quarterHour") && this.control.touched) {
1065
+ return "Formato inválido";
1066
+ }
1067
+ return null;
1068
+ }
1069
+ convertStringInNumber(hour) {
1070
+ const explodedHour = parseInt(hour.split(":")[0]);
1071
+ if (typeof explodedHour !== 'number') {
1072
+ return explodedHour;
1073
+ }
1074
+ return explodedHour;
1075
+ }
1076
+ generateTimeOptions() {
1077
+ const options = [];
1078
+ const baseDate = new Date(2025, 0, 1);
1079
+ for (let hour = this.minInNumber; hour <= this.maxInNumber; hour++) {
1080
+ for (let minute = 0; minute < 60; minute += 15) {
1081
+ if (hour === this.maxInNumber && minute > 0) {
1082
+ continue;
1083
+ }
1084
+ const date = new Date(baseDate);
1085
+ date.setHours(hour, minute, 0);
1086
+ const label = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
1087
+ options.push({ label, value: date });
1088
+ }
1089
+ }
1090
+ return options;
1091
+ }
1092
+ updateTimeOptions(options) {
1093
+ this.customOptions = options;
1094
+ }
1095
+ setDisabledState(isDisabled) {
1096
+ this.isDisabled = isDisabled;
1097
+ }
1098
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TimePicker, deps: [{ token: i1$3.DateAdapter }], target: i0.ɵɵFactoryTarget.Component });
1099
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TimePicker, isStandalone: true, selector: "cao-time-picker", inputs: { control: "control", isDisabled: "isDisabled", dataCy: "dataCy", min: "min", max: "max" }, outputs: { timeChange: "timeChange" }, ngImport: i0, template: "<div class=\"time-picker-wrapper\">\n <mat-form-field\n class=\"custom-timepicker\"\n [ngClass]=\"{\n 'invalid': control?.touched && control?.invalid,\n 'valid': control?.touched && control?.valid\n }\">\n <input\n matInput\n placeholder=\"00:00\"\n [formControl]=\"control\"\n [matTimepicker]=\"picker\"\n [min]=\"min\"\n [max]=\"max\"\n [disabled]=\"isDisabled\"\n [attr.data-cy]=\"dataCy\"\n (blur)=\"control?.markAsTouched()\" />\n <mat-timepicker-toggle matSuffix [for]=\"picker\" />\n <mat-timepicker #picker [options]=\"customOptions\" (selected)=\"timeChange.emit($event.value)\" />\n </mat-form-field>\n</div>\n", styles: [".time-picker-wrapper{width:130px;display:flex;flex-direction:column;position:relative}.custom-timepicker{width:100%}.custom-timepicker .mat-mdc-text-field-wrapper{border:1px solid transparent;border-radius:8px;padding:0;height:43px;display:flex;align-items:center;background-color:var(--input-background);box-shadow:0 1px 3px #0000001a;transition:border-color .2s ease-in-out}.custom-timepicker.invalid .mat-mdc-text-field-wrapper{border-color:var(--error)}.custom-timepicker.valid.mat-focused .mat-mdc-text-field-wrapper{border-color:var(--success)}.custom-timepicker.valid:not(.mat-focused) .mat-mdc-text-field-wrapper{border-color:transparent}.custom-timepicker .mdc-line-ripple{display:none}.custom-timepicker .mat-mdc-input-element{font-size:16px;padding-left:16px;caret-color:transparent;background:transparent}.custom-timepicker .mat-mdc-icon-button.mat-mdc-button-base{padding:0;border-left:1px solid var(--line-color);border-radius:0;margin:0;display:flex;align-items:center;justify-content:center}.custom-timepicker .mat-timepicker-toggle-default-icon{color:var(--primary)}.custom-timepicker .mat-mdc-form-field-flex{background-color:var(--input-background)}.mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{display:none}.mat-mdc-form-field-subscript-wrapper,.mat-mdc-form-field-bottom-align:before{display:none}.custom-timepicker .mat-mdc-form-field-infix{padding:18px 0!important}.custom-timepicker.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: "component", type: i4$2.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i4$2.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i4$2.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1100
+ }
1101
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TimePicker, decorators: [{
1102
+ type: Component,
1103
+ args: [{ selector: 'cao-time-picker', imports: [MaterialModule, CommonModule, ReactiveFormsModule,], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"time-picker-wrapper\">\n <mat-form-field\n class=\"custom-timepicker\"\n [ngClass]=\"{\n 'invalid': control?.touched && control?.invalid,\n 'valid': control?.touched && control?.valid\n }\">\n <input\n matInput\n placeholder=\"00:00\"\n [formControl]=\"control\"\n [matTimepicker]=\"picker\"\n [min]=\"min\"\n [max]=\"max\"\n [disabled]=\"isDisabled\"\n [attr.data-cy]=\"dataCy\"\n (blur)=\"control?.markAsTouched()\" />\n <mat-timepicker-toggle matSuffix [for]=\"picker\" />\n <mat-timepicker #picker [options]=\"customOptions\" (selected)=\"timeChange.emit($event.value)\" />\n </mat-form-field>\n</div>\n", styles: [".time-picker-wrapper{width:130px;display:flex;flex-direction:column;position:relative}.custom-timepicker{width:100%}.custom-timepicker .mat-mdc-text-field-wrapper{border:1px solid transparent;border-radius:8px;padding:0;height:43px;display:flex;align-items:center;background-color:var(--input-background);box-shadow:0 1px 3px #0000001a;transition:border-color .2s ease-in-out}.custom-timepicker.invalid .mat-mdc-text-field-wrapper{border-color:var(--error)}.custom-timepicker.valid.mat-focused .mat-mdc-text-field-wrapper{border-color:var(--success)}.custom-timepicker.valid:not(.mat-focused) .mat-mdc-text-field-wrapper{border-color:transparent}.custom-timepicker .mdc-line-ripple{display:none}.custom-timepicker .mat-mdc-input-element{font-size:16px;padding-left:16px;caret-color:transparent;background:transparent}.custom-timepicker .mat-mdc-icon-button.mat-mdc-button-base{padding:0;border-left:1px solid var(--line-color);border-radius:0;margin:0;display:flex;align-items:center;justify-content:center}.custom-timepicker .mat-timepicker-toggle-default-icon{color:var(--primary)}.custom-timepicker .mat-mdc-form-field-flex{background-color:var(--input-background)}.mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{display:none}.mat-mdc-form-field-subscript-wrapper,.mat-mdc-form-field-bottom-align:before{display:none}.custom-timepicker .mat-mdc-form-field-infix{padding:18px 0!important}.custom-timepicker.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{box-shadow:none!important}\n"] }]
1104
+ }], ctorParameters: () => [{ type: i1$3.DateAdapter }], propDecorators: { control: [{
1105
+ type: Input
1106
+ }], isDisabled: [{
1107
+ type: Input
1108
+ }], dataCy: [{
1109
+ type: Input
1110
+ }], min: [{
1111
+ type: Input
1112
+ }], max: [{
1113
+ type: Input
1114
+ }], timeChange: [{
1115
+ type: Output
1116
+ }] } });
1117
+
1118
+ class BaseModalService {
1119
+ constructor() { }
1120
+ toggleModalEvent = new EventEmitter();
1121
+ closeAllModalsEvent = new EventEmitter();
1122
+ openModal = new EventEmitter();
1123
+ modalResultSubject = new Subject();
1124
+ emitModalResult(result) {
1125
+ this.modalResultSubject.next(result);
1126
+ }
1127
+ onModalResult() {
1128
+ return this.modalResultSubject.asObservable();
1129
+ }
1130
+ toggleModal(modalInfo) {
1131
+ this.toggleModalEvent.emit(modalInfo);
1132
+ }
1133
+ closeAllModals() {
1134
+ this.closeAllModalsEvent.emit(true);
1135
+ }
1136
+ showModal(_selectedModal, data) {
1137
+ this.closeAllModals();
1138
+ const modalInfo = {
1139
+ type: _selectedModal,
1140
+ data: data,
1141
+ status: true,
1142
+ };
1143
+ this.openModal.emit(modalInfo);
1144
+ }
1145
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1146
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModalService, providedIn: "root" });
1147
+ }
1148
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModalService, decorators: [{
1149
+ type: Injectable,
298
1150
  args: [{
299
- imports: [modules],
300
- exports: [modules],
301
- providers: [{ provide: MAT_DATE_LOCALE, useValue: "pt-BR" }],
1151
+ providedIn: "root",
302
1152
  }]
303
- }] });
1153
+ }], ctorParameters: () => [], propDecorators: { toggleModalEvent: [{
1154
+ type: Output
1155
+ }], closeAllModalsEvent: [{
1156
+ type: Output
1157
+ }], openModal: [{
1158
+ type: Output
1159
+ }] } });
1160
+
1161
+ class BaseModal {
1162
+ showModal = false;
1163
+ title = "";
1164
+ data;
1165
+ modalTypeClass = "default";
1166
+ modalClass = "modal-default";
1167
+ modalSize = "w-70";
1168
+ closeOnOverlayClick = false;
1169
+ modalService = inject(BaseModalService);
1170
+ closeModals() { }
1171
+ closeModalsWithoutDialog() {
1172
+ this.modalService.closeAllModals();
1173
+ }
1174
+ onOverlayClick() {
1175
+ if (this.closeOnOverlayClick) {
1176
+ this.closeModals();
1177
+ }
1178
+ }
1179
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
1180
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BaseModal, isStandalone: true, selector: "cao-base-modal", inputs: { showModal: "showModal", title: "title", data: "data", modalTypeClass: "modalTypeClass", modalClass: "modalClass", modalSize: "modalSize", closeOnOverlayClick: "closeOnOverlayClick" }, ngImport: i0, template: "<div aria-hidden=\"true\" class=\"modal\" tabIndex=\"0\" [class.show]=\"showModal\" (keydown)=\"onOverlayClick()\"\n (click)=\"onOverlayClick()\">\n <div aria-hidden=\"true\" class=\"modal-dialog\" tabIndex=\"1\" [ngClass]=\"[modalSize, modalClass]\"\n (keydown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n <ng-content />\n </div>\n</div>", styles: [".modal{width:100vw;height:100vh;align-items:center;justify-content:center;position:fixed;transition:.5s;top:-100vh;left:0}.modal .modal-dialog{padding:24px 34px;border-radius:20px;position:relative;max-width:1444px;height:auto;top:-100vh;transition:.5s;background-color:var(--bg-card);left:0}.modal .modal-dialog.custom{padding:0}.modal .modal-dialog.w-100{width:100%}.modal .modal-dialog.w-90{width:90%}.modal .modal-dialog.w-80{width:80%}.modal .modal-dialog.w-75{width:75%}.modal .modal-dialog.w-70{width:70%}.modal .modal-dialog.w-60{width:60%}.modal .modal-dialog.w-50{width:50%}.modal .modal-dialog.w-40{width:40%}.modal .modal-dialog.w-30{width:30%}.modal .modal-dialog.w-20{width:20%}.modal .modal-dialog.w-10{width:10%}.modal.show{z-index:1000;display:flex;top:0;background-color:#00000080}.modal.show .modal-dialog{top:0}@media(max-width:768px){.modal-dialog{width:90%;max-width:90vw;margin-left:0}}@media(min-width:769px){.modal-dialog{width:75%;margin-left:250px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
1181
+ }
1182
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseModal, decorators: [{
1183
+ type: Component,
1184
+ args: [{ selector: 'cao-base-modal', imports: [CommonModule], template: "<div aria-hidden=\"true\" class=\"modal\" tabIndex=\"0\" [class.show]=\"showModal\" (keydown)=\"onOverlayClick()\"\n (click)=\"onOverlayClick()\">\n <div aria-hidden=\"true\" class=\"modal-dialog\" tabIndex=\"1\" [ngClass]=\"[modalSize, modalClass]\"\n (keydown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n <ng-content />\n </div>\n</div>", styles: [".modal{width:100vw;height:100vh;align-items:center;justify-content:center;position:fixed;transition:.5s;top:-100vh;left:0}.modal .modal-dialog{padding:24px 34px;border-radius:20px;position:relative;max-width:1444px;height:auto;top:-100vh;transition:.5s;background-color:var(--bg-card);left:0}.modal .modal-dialog.custom{padding:0}.modal .modal-dialog.w-100{width:100%}.modal .modal-dialog.w-90{width:90%}.modal .modal-dialog.w-80{width:80%}.modal .modal-dialog.w-75{width:75%}.modal .modal-dialog.w-70{width:70%}.modal .modal-dialog.w-60{width:60%}.modal .modal-dialog.w-50{width:50%}.modal .modal-dialog.w-40{width:40%}.modal .modal-dialog.w-30{width:30%}.modal .modal-dialog.w-20{width:20%}.modal .modal-dialog.w-10{width:10%}.modal.show{z-index:1000;display:flex;top:0;background-color:#00000080}.modal.show .modal-dialog{top:0}@media(max-width:768px){.modal-dialog{width:90%;max-width:90vw;margin-left:0}}@media(min-width:769px){.modal-dialog{width:75%;margin-left:250px}}\n"] }]
1185
+ }], propDecorators: { showModal: [{
1186
+ type: Input
1187
+ }], title: [{
1188
+ type: Input
1189
+ }], data: [{
1190
+ type: Input
1191
+ }], modalTypeClass: [{
1192
+ type: Input
1193
+ }], modalClass: [{
1194
+ type: Input
1195
+ }], modalSize: [{
1196
+ type: Input
1197
+ }], closeOnOverlayClick: [{
1198
+ type: Input
1199
+ }] } });
1200
+
1201
+ class BaseDialog {
1202
+ config;
1203
+ closeDialog = this.noop;
1204
+ iconPaths = {
1205
+ success: "https://placehold.co/600x400",
1206
+ error: "https://placehold.co/600x400",
1207
+ info: "https://placehold.co/600x400",
1208
+ warning: "https://placehold.co/600x400",
1209
+ };
1210
+ noop() {
1211
+ return;
1212
+ }
1213
+ getIconPath() {
1214
+ return this.iconPaths[this.config.type];
1215
+ }
1216
+ handleConfirm() {
1217
+ this.config.onConfirm?.();
1218
+ this.closeDialog();
1219
+ }
1220
+ handleCancel() {
1221
+ this.config.onCancel?.();
1222
+ this.closeDialog();
1223
+ }
1224
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
1225
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseDialog, isStandalone: true, selector: "cao-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: [":host{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1000;background:#0009}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white);max-width:90%;margin-left:250px}.dialog-content{padding:20px 30px;box-sizing:border-box}.logo{width:150px;height:24px;margin-bottom:15px}.alert-wrapper{display:flex;align-items:center;justify-content:space-between}.button-container{display:flex;gap:10px}.confirm-button,.cancel-button{padding:10px 20px;border:none;border-radius:20px;cursor:pointer;font-weight:600;transition:all .3s ease}.confirm-button{color:var(--white);background-color:var(--primary)}.cancel-button{background-color:var(--disabled-button);color:var(--white)}.confirm-button:hover,.cancel-button:hover{opacity:.9}.text-content{flex-grow:1;padding-right:20px}.text-content .title{font-weight:700;font-size:20px;color:var(--primary);margin-bottom:10px}.text-content.success .title{color:var(--primary)}.text-content.error .title{color:var(--error-color)}.text-content.error .confirm-button{background-color:var(--error-color)}.text-content.warning .title{color:var(--support-orange)}.text-content.info .title{color:var(--primary)}.text-content.info .confirm-button{background-color:var(--primary)}.message{font-weight:400;font-size:16px;color:var(--message-color);margin-bottom:15px}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){.dialog-container{width:400px;max-width:90%;margin-left:0}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}.button-container{flex-direction:column;width:100%}.confirm-button,.cancel-button{width:100%;margin-bottom:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] });
1226
+ }
1227
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialog, decorators: [{
1228
+ type: Component,
1229
+ 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", styles: [":host{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1000;background:#0009}.dialog-container{width:600px;border-radius:30px;overflow:hidden;box-shadow:0 4px 6px #0000001a;background-color:var(--white);max-width:90%;margin-left:250px}.dialog-content{padding:20px 30px;box-sizing:border-box}.logo{width:150px;height:24px;margin-bottom:15px}.alert-wrapper{display:flex;align-items:center;justify-content:space-between}.button-container{display:flex;gap:10px}.confirm-button,.cancel-button{padding:10px 20px;border:none;border-radius:20px;cursor:pointer;font-weight:600;transition:all .3s ease}.confirm-button{color:var(--white);background-color:var(--primary)}.cancel-button{background-color:var(--disabled-button);color:var(--white)}.confirm-button:hover,.cancel-button:hover{opacity:.9}.text-content{flex-grow:1;padding-right:20px}.text-content .title{font-weight:700;font-size:20px;color:var(--primary);margin-bottom:10px}.text-content.success .title{color:var(--primary)}.text-content.error .title{color:var(--error-color)}.text-content.error .confirm-button{background-color:var(--error-color)}.text-content.warning .title{color:var(--support-orange)}.text-content.info .title{color:var(--primary)}.text-content.info .confirm-button{background-color:var(--primary)}.message{font-weight:400;font-size:16px;color:var(--message-color);margin-bottom:15px}.icon-container{width:150px;height:150px;flex-shrink:0}.alert-icon{width:100%;height:100%;object-fit:contain}@media(max-width:768px){.dialog-container{width:400px;max-width:90%;margin-left:0}.alert-wrapper{flex-direction:column;text-align:center}.text-content{padding-right:0;margin-bottom:10px}.icon-container{width:100px;height:100px}.button-container{flex-direction:column;width:100%}.confirm-button,.cancel-button{width:100%;margin-bottom:10px}}\n"] }]
1230
+ }], propDecorators: { config: [{
1231
+ type: Input
1232
+ }] } });
1233
+
1234
+ class BaseDialogService {
1235
+ overlay;
1236
+ constructor(overlay) {
1237
+ this.overlay = overlay;
1238
+ }
1239
+ open(config) {
1240
+ const overlayRef = this.overlay.create({
1241
+ hasBackdrop: true,
1242
+ positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
1243
+ scrollStrategy: this.overlay.scrollStrategies.block(),
1244
+ backdropClass: "dialog-backdrop",
1245
+ });
1246
+ const dialogPortal = new ComponentPortal(BaseDialog);
1247
+ const componentRef = overlayRef.attach(dialogPortal);
1248
+ componentRef.instance.config = config;
1249
+ componentRef.instance.closeDialog = () => {
1250
+ overlayRef.dispose();
1251
+ };
1252
+ return overlayRef;
1253
+ }
1254
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
1255
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, providedIn: "root" });
1256
+ }
1257
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDialogService, decorators: [{
1258
+ type: Injectable,
1259
+ args: [{
1260
+ providedIn: "root",
1261
+ }]
1262
+ }], ctorParameters: () => [{ type: i1$4.Overlay }] });
304
1263
 
305
- class FilterTableService {
1264
+ class BaseFilterTableService {
306
1265
  filterSubject = new Subject();
307
1266
  filter$ = this.filterSubject.asObservable();
308
1267
  updateFilter(filterValue) {
309
1268
  this.filterSubject.next(filterValue);
310
1269
  }
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" });
1270
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1271
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTableService, providedIn: "root" });
313
1272
  }
314
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FilterTableService, decorators: [{
1273
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseFilterTableService, decorators: [{
315
1274
  type: Injectable,
316
1275
  args: [{
317
1276
  providedIn: "root",
318
1277
  }]
319
1278
  }] });
1279
+
320
1280
  class TableService {
321
1281
  tableConfigSubject = new BehaviorSubject(null);
322
1282
  dataSubject = new BehaviorSubject([]);
@@ -428,16 +1388,17 @@ class TableService {
428
1388
  updateTableData(data) {
429
1389
  this.setData(data);
430
1390
  }
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" });
1391
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1392
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableService, providedIn: "root" });
433
1393
  }
434
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableService, decorators: [{
1394
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableService, decorators: [{
435
1395
  type: Injectable,
436
1396
  args: [{
437
1397
  providedIn: "root",
438
1398
  }]
439
1399
  }] });
440
- function getPtBrPaginatorIntl() {
1400
+
1401
+ function getPtBrPaginatorIntlBaseTable() {
441
1402
  const paginatorIntl = new MatPaginatorIntl();
442
1403
  paginatorIntl.itemsPerPageLabel = "Itens por página:";
443
1404
  paginatorIntl.nextPageLabel = "Próxima página";
@@ -454,10 +1415,7 @@ function getPtBrPaginatorIntl() {
454
1415
  };
455
1416
  return paginatorIntl;
456
1417
  }
457
- class TableComponent {
458
- tableService;
459
- liveAnnouncer;
460
- filterTableService;
1418
+ class BaseTable {
461
1419
  customClass = "";
462
1420
  pageSizeOptions = [5, 10, 20, 50];
463
1421
  showFirstLastButtons = true;
@@ -487,10 +1445,10 @@ class TableComponent {
487
1445
  getAllColumns() {
488
1446
  return ["select", ...this.displayedColumns];
489
1447
  }
490
- constructor(tableService, liveAnnouncer, filterTableService) {
491
- this.tableService = tableService;
492
- this.liveAnnouncer = liveAnnouncer;
493
- this.filterTableService = filterTableService;
1448
+ tableService = inject(TableService);
1449
+ liveAnnouncer = inject(LiveAnnouncer);
1450
+ filterTableService = inject(BaseFilterTableService);
1451
+ constructor() {
494
1452
  this.initializeSortingAccessor();
495
1453
  this.initializeFilterPredicate();
496
1454
  }
@@ -687,635 +1645,538 @@ class TableComponent {
687
1645
  }
688
1646
  else if (isLastPage) {
689
1647
  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";
1648
+ this.liveAnnouncer.announce("Última página");
836
1649
  }
837
- return "Formato inválido";
838
1650
  }
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();
1651
+ this.pageEvent.emit(event);
856
1652
  }
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}`;
1653
+ /**
1654
+ * Navigate to first page programmatically
1655
+ */
1656
+ goToFirstPage() {
1657
+ if (this.currentPage !== 1) {
1658
+ this.onPageChanged(1);
1659
+ this.firstPageClicked.emit();
1660
+ this.liveAnnouncer.announce("Primeira página");
909
1661
  }
910
1662
  }
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);
1663
+ /**
1664
+ * Navigate to last page programmatically
1665
+ */
1666
+ goToLastPage() {
1667
+ const lastPage = Math.max(1, Math.ceil(this.totalItems / this.pageSize));
1668
+ if (this.currentPage !== lastPage) {
1669
+ this.onPageChanged(lastPage);
1670
+ this.lastPageClicked.emit();
1671
+ this.liveAnnouncer.announce("Última página");
924
1672
  }
925
1673
  }
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 = "";
1674
+ /**
1675
+ * Update total items when data changes
1676
+ */
1677
+ updateTotalItems() {
1678
+ if (this.isPaginatedByServer) {
1679
+ return;
1680
+ }
1681
+ this.totalItems = this.dataSource.data.length;
934
1682
  }
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"] }] });
1683
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
1684
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseTable, isStandalone: true, selector: "cao-base-table", inputs: { customClass: "customClass", pageSizeOptions: "pageSizeOptions", showFirstLastButtons: "showFirstLastButtons", isPaginatedByServer: "isPaginatedByServer" }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", firstPageClicked: "firstPageClicked", lastPageClicked: "lastPageClicked", selectionChanged: "selectionChanged", pageEvent: "pageEvent" }, providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBaseTable() }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"customClass\">\n @if (tableConfig) {\n <div class=\"table-controls\">\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </div>\n\n <table\n mat-table\n matSort\n class=\"mat-elevation-z8\"\n [dataSource]=\"dataSource\"\n (matSortChange)=\"announceSortChange($event)\">\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox\n data-cy=\"checkbox-select-all\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n (change)=\"$event ? toggleAllRows() : null\" />\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-select-row-' + row.id\"\n [checked]=\"selection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\" />\n </td>\n </ng-container>\n\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th *matHeaderCellDef mat-header-cell [mat-sort-header]=\"column\">\n <span>{{ getColumnHeader(column) }}</span>\n <img\n alt=\"icone\"\n [ngSrc]=\"'.src/assets/svg/arrow-left-double.svg'\"\n [fill]=\"true\"\n [matMenuTriggerFor]=\"menuColunas\" />\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </th>\n <td *matCellDef=\"let element\" mat-cell>\n @switch (getColumnType(column)) { @case ('STRING') {\n <span>{{ element[getColumnElement(column)] }}</span>\n } @case ('BOOLEAN') {\n <mat-checkbox\n disabled\n [attr.data-cy]=\"'checkbox-value-' + column + '-' + element.id\"\n [checked]=\"element[getColumnElement(column)]\" />\n } @case ('DATE') {\n <span>{{ element[getColumnElement(column)] | date:'mediumDate' }}</span>\n } @case ('NUMBER') {\n <span>{{ element[getColumnElement(column)] | number:'1.2-2' }}</span>\n } @case ('SINGLE_BUTTON') {\n <div>\n @for (btn of getColumnButtons(column); track btn) {\n <button\n mat-icon-button\n [type]=\"'button'\" [matTooltip]=\"btn.tooltip\" (click)=\"btn.onClick(element)\">\n <mat-icon>{{ btn.icon }}</mat-icon>\n </button>\n }\n </div>\n } @default {\n <span>{{ element[getColumnElement(column)] }}</span>\n } }\n </td>\n </ng-container>\n }\n\n <ng-container matColumnDef=\"footer\">\n <td *matFooterCellDef mat-footer-cell [attr.colspan]=\"displayedColumns.length + 1\">\n Total de Registros: {{ dataSource.data.length }}\n </td>\n </ng-container>\n\n <tr *matHeaderRowDef=\"getAllColumns()\" mat-header-row></tr>\n <tr\n *matRowDef=\"let row; columns: getAllColumns();\"\n mat-row\n (click)=\"selection.toggle(row)\"></tr>\n <tr *matFooterRowDef=\"['footer']\" mat-footer-row></tr>\n </table>\n }\n</div>\n\n<mat-paginator\n #paginator\n aria-label=\"Select page\"\n [length]=\"totalItems\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageIndex]=\"currentPage - 1\"\n [hidePageSize]=\"false\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n (page)=\"onPageEvent($event)\" />\n\n@if (!tableConfig || tableConfig.data.length === 0) {\n<div class=\"no-data-container\">\n <h2 class=\"no-data-title\">{{ tableConfig?.result?.noData || 'N\u00E3o h\u00E1 dados dispon\u00EDveis' }}</h2>\n <p class=\"no-data-message\"\n >{{ tableConfig?.result?.defaultMessage || 'Adicione alguns dados' }}</p\n >\n</div>\n}\n", styles: [".table-container{border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:100%;overflow:auto hidden}.table-container .table-controls{display:flex;align-items:center;padding:20px}.table-container .table-controls .filter-field{display:flex;align-items:center;justify-content:space-between;padding:10px;flex-direction:row;border:none;border-radius:10px;background-color:var(--input-disabled-bg);width:50%;height:55px}.table-container .table-controls .filter-field input:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}.table-container .table-controls .filter-field .input-filter{width:100%;box-sizing:border-box;background-color:transparent;border:none;transition:none}.table-container .table-controls .filter-field i{color:var(--icon-collor);margin-left:8px}.table-container .mat-mdc-table{width:max-content;min-width:100%;background-color:var(--table-body-color)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{border-right:none!important}.table-container .mat-mdc-table .mat-mdc-header-cell:not(:first-child),.table-container .mat-mdc-table .mat-mdc-cell:not(:first-child){border-right:1px solid var(--primary)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{width:60px;max-width:60px;min-width:60px;border-right:none}.table-container .mat-mdc-table .mat-mdc-header-row{background-color:var(--table-header)}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell{border-right:1px solid var(--white);font-weight:600;color:var(--white);border-bottom:1px solid var(--input-background);text-transform:uppercase;font-size:.875rem}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row{transition:background-color .2s ease}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell{border-right:1px solid var(--primary);color:var(--gray-dark);border-bottom:1px solid var(--input-background)}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row:hover{background-color:#0000000a}.table-container .mat-mdc-table .mat-mdc-row.selected{background-color:#3f51b51a}.table-container .mat-mdc-table .mat-mdc-checkbox{margin-right:12px}.table-container .mat-mdc-table .mat-mdc-checkbox .mdc-checkbox{--mdc-checkbox-unselected-icon-color: var(--gray-dark);--mdc-checkbox-selected-icon-color: var(--info)}.table-container .mat-mdc-table .mat-mdc-footer-row{background-color:var(--table-background);font-weight:600;color:var(--input-disabled-bg)}.table-container .mat-mdc-table .mat-mdc-footer-row .mat-mdc-footer-cell{padding:12px;text-align:left;color:var(--gray-dark)}.table-container span,.table-container img{margin-right:10px}.table-container[_ngcontent-ng-c1530403114] .mat-mdc-table[_ngcontent-ng-c1530403114] .mat-mdc-footer-row[_ngcontent-ng-c1530403114]{display:none}.no-data-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;font-size:1.1rem}.no-data-container .no-data-title{color:var(--table-header);margin-bottom:12px}.no-data-container .no-data-message{color:var(--table-header)}@media(max-width:768px){.table-container .table-controls{flex-direction:column;align-items:stretch}.table-container .table-controls .filter-field{margin-right:0;margin-bottom:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
937
1685
  }
938
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseTimeRange, decorators: [{
1686
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTable, decorators: [{
939
1687
  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: [{
1688
+ args: [{ selector: "cao-base-table", imports: [CommonModule, MaterialModule, NgOptimizedImage], providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBaseTable() }], template: "<div class=\"table-container\" [ngClass]=\"customClass\">\n @if (tableConfig) {\n <div class=\"table-controls\">\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </div>\n\n <table\n mat-table\n matSort\n class=\"mat-elevation-z8\"\n [dataSource]=\"dataSource\"\n (matSortChange)=\"announceSortChange($event)\">\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox\n data-cy=\"checkbox-select-all\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n (change)=\"$event ? toggleAllRows() : null\" />\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-select-row-' + row.id\"\n [checked]=\"selection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\" />\n </td>\n </ng-container>\n\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th *matHeaderCellDef mat-header-cell [mat-sort-header]=\"column\">\n <span>{{ getColumnHeader(column) }}</span>\n <img\n alt=\"icone\"\n [ngSrc]=\"'.src/assets/svg/arrow-left-double.svg'\"\n [fill]=\"true\"\n [matMenuTriggerFor]=\"menuColunas\" />\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </th>\n <td *matCellDef=\"let element\" mat-cell>\n @switch (getColumnType(column)) { @case ('STRING') {\n <span>{{ element[getColumnElement(column)] }}</span>\n } @case ('BOOLEAN') {\n <mat-checkbox\n disabled\n [attr.data-cy]=\"'checkbox-value-' + column + '-' + element.id\"\n [checked]=\"element[getColumnElement(column)]\" />\n } @case ('DATE') {\n <span>{{ element[getColumnElement(column)] | date:'mediumDate' }}</span>\n } @case ('NUMBER') {\n <span>{{ element[getColumnElement(column)] | number:'1.2-2' }}</span>\n } @case ('SINGLE_BUTTON') {\n <div>\n @for (btn of getColumnButtons(column); track btn) {\n <button\n mat-icon-button\n [type]=\"'button'\" [matTooltip]=\"btn.tooltip\" (click)=\"btn.onClick(element)\">\n <mat-icon>{{ btn.icon }}</mat-icon>\n </button>\n }\n </div>\n } @default {\n <span>{{ element[getColumnElement(column)] }}</span>\n } }\n </td>\n </ng-container>\n }\n\n <ng-container matColumnDef=\"footer\">\n <td *matFooterCellDef mat-footer-cell [attr.colspan]=\"displayedColumns.length + 1\">\n Total de Registros: {{ dataSource.data.length }}\n </td>\n </ng-container>\n\n <tr *matHeaderRowDef=\"getAllColumns()\" mat-header-row></tr>\n <tr\n *matRowDef=\"let row; columns: getAllColumns();\"\n mat-row\n (click)=\"selection.toggle(row)\"></tr>\n <tr *matFooterRowDef=\"['footer']\" mat-footer-row></tr>\n </table>\n }\n</div>\n\n<mat-paginator\n #paginator\n aria-label=\"Select page\"\n [length]=\"totalItems\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageIndex]=\"currentPage - 1\"\n [hidePageSize]=\"false\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n (page)=\"onPageEvent($event)\" />\n\n@if (!tableConfig || tableConfig.data.length === 0) {\n<div class=\"no-data-container\">\n <h2 class=\"no-data-title\">{{ tableConfig?.result?.noData || 'N\u00E3o h\u00E1 dados dispon\u00EDveis' }}</h2>\n <p class=\"no-data-message\"\n >{{ tableConfig?.result?.defaultMessage || 'Adicione alguns dados' }}</p\n >\n</div>\n}\n", styles: [".table-container{border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:100%;overflow:auto hidden}.table-container .table-controls{display:flex;align-items:center;padding:20px}.table-container .table-controls .filter-field{display:flex;align-items:center;justify-content:space-between;padding:10px;flex-direction:row;border:none;border-radius:10px;background-color:var(--input-disabled-bg);width:50%;height:55px}.table-container .table-controls .filter-field input:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}.table-container .table-controls .filter-field .input-filter{width:100%;box-sizing:border-box;background-color:transparent;border:none;transition:none}.table-container .table-controls .filter-field i{color:var(--icon-collor);margin-left:8px}.table-container .mat-mdc-table{width:max-content;min-width:100%;background-color:var(--table-body-color)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{border-right:none!important}.table-container .mat-mdc-table .mat-mdc-header-cell:not(:first-child),.table-container .mat-mdc-table .mat-mdc-cell:not(:first-child){border-right:1px solid var(--primary)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{width:60px;max-width:60px;min-width:60px;border-right:none}.table-container .mat-mdc-table .mat-mdc-header-row{background-color:var(--table-header)}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell{border-right:1px solid var(--white);font-weight:600;color:var(--white);border-bottom:1px solid var(--input-background);text-transform:uppercase;font-size:.875rem}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row{transition:background-color .2s ease}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell{border-right:1px solid var(--primary);color:var(--gray-dark);border-bottom:1px solid var(--input-background)}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row:hover{background-color:#0000000a}.table-container .mat-mdc-table .mat-mdc-row.selected{background-color:#3f51b51a}.table-container .mat-mdc-table .mat-mdc-checkbox{margin-right:12px}.table-container .mat-mdc-table .mat-mdc-checkbox .mdc-checkbox{--mdc-checkbox-unselected-icon-color: var(--gray-dark);--mdc-checkbox-selected-icon-color: var(--info)}.table-container .mat-mdc-table .mat-mdc-footer-row{background-color:var(--table-background);font-weight:600;color:var(--input-disabled-bg)}.table-container .mat-mdc-table .mat-mdc-footer-row .mat-mdc-footer-cell{padding:12px;text-align:left;color:var(--gray-dark)}.table-container span,.table-container img{margin-right:10px}.table-container[_ngcontent-ng-c1530403114] .mat-mdc-table[_ngcontent-ng-c1530403114] .mat-mdc-footer-row[_ngcontent-ng-c1530403114]{display:none}.no-data-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;font-size:1.1rem}.no-data-container .no-data-title{color:var(--table-header);margin-bottom:12px}.no-data-container .no-data-message{color:var(--table-header)}@media(max-width:768px){.table-container .table-controls{flex-direction:column;align-items:stretch}.table-container .table-controls .filter-field{margin-right:0;margin-bottom:12px}}\n"] }]
1689
+ }], ctorParameters: () => [], propDecorators: { customClass: [{
946
1690
  type: Input
947
- }], maxDate: [{
948
- type: Input
949
- }], startDate: [{
950
- type: Input
951
- }], finalDate: [{
1691
+ }], pageSizeOptions: [{
952
1692
  type: Input
953
- }], dataCy: [{
1693
+ }], showFirstLastButtons: [{
954
1694
  type: Input
955
- }], controlName: [{
1695
+ }], isPaginatedByServer: [{
956
1696
  type: Input
957
- }], rangeSelected: [{
1697
+ }], pageChanged: [{
958
1698
  type: Output
959
- }], dateRangeInput: [{
1699
+ }], pageSizeChanged: [{
1700
+ type: Output
1701
+ }], firstPageClicked: [{
1702
+ type: Output
1703
+ }], lastPageClicked: [{
1704
+ type: Output
1705
+ }], selectionChanged: [{
1706
+ type: Output
1707
+ }], pageEvent: [{
1708
+ type: Output
1709
+ }], sort: [{
960
1710
  type: ViewChild,
961
- args: [MatDateRangeInput]
1711
+ args: [MatSort]
1712
+ }], paginator: [{
1713
+ type: ViewChild,
1714
+ args: [MatPaginator]
962
1715
  }] } });
963
1716
 
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
- });
1717
+ class FilterTablePaginatedService {
1718
+ filterSubject = new Subject();
1719
+ filter$ = this.filterSubject.asObservable();
1720
+ updateFilter(filterValue) {
1721
+ this.filterSubject.next(filterValue);
1004
1722
  }
1005
- ngOnDestroy() {
1006
- document.removeEventListener("click", this._handleClickOutside, true);
1723
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterTablePaginatedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1724
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterTablePaginatedService, providedIn: "root" });
1725
+ }
1726
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterTablePaginatedService, decorators: [{
1727
+ type: Injectable,
1728
+ args: [{
1729
+ providedIn: "root",
1730
+ }]
1731
+ }] });
1732
+
1733
+ class PaginationService {
1734
+ pageSubject = new BehaviorSubject(1);
1735
+ pageSizeSubject = new BehaviorSubject(10);
1736
+ totalItemsSubject = new BehaviorSubject(0);
1737
+ currentPage$ = this.pageSubject.asObservable();
1738
+ pageSize$ = this.pageSizeSubject.asObservable();
1739
+ totalItems$ = this.totalItemsSubject.asObservable();
1740
+ constructor() { }
1741
+ /**
1742
+ * Sets the current page number
1743
+ * @param page The page number to set
1744
+ */
1745
+ setPage(page) {
1746
+ if (page !== this.pageSubject.value) {
1747
+ this.pageSubject.next(page);
1748
+ }
1007
1749
  }
1008
- get activeDescendant() {
1009
- if (this.isOpen && this.focusedIndex >= 0 && this.filteredOptions[this.focusedIndex]) {
1010
- return `option-${this.dataCy}-${this.focusedIndex}`;
1750
+ /**
1751
+ * Sets the page size
1752
+ * @param size The page size to set
1753
+ */
1754
+ setPageSize(size) {
1755
+ if (size !== this.pageSizeSubject.value) {
1756
+ this.pageSizeSubject.next(size);
1011
1757
  }
1012
- return null;
1013
1758
  }
1014
- toggleDropdown() {
1015
- if (this.isDisabled) {
1016
- return;
1759
+ /**
1760
+ * Sets the total number of items
1761
+ * @param total The total number of items
1762
+ */
1763
+ setTotalItems(total) {
1764
+ if (total !== this.totalItemsSubject.value) {
1765
+ this.totalItemsSubject.next(total);
1017
1766
  }
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
- }
1767
+ }
1768
+ /**
1769
+ * Gets the current page
1770
+ */
1771
+ getCurrentPage() {
1772
+ return this.pageSubject.value;
1773
+ }
1774
+ /**
1775
+ * Gets the current page size
1776
+ */
1777
+ getPageSize() {
1778
+ return this.pageSizeSubject.value;
1779
+ }
1780
+ /**
1781
+ * Gets the total number of items
1782
+ */
1783
+ getTotalItems() {
1784
+ return this.totalItemsSubject.value;
1785
+ }
1786
+ /**
1787
+ * Resets pagination to default values
1788
+ */
1789
+ reset() {
1790
+ this.pageSubject.next(1);
1791
+ this.pageSizeSubject.next(10);
1792
+ this.totalItemsSubject.next(0);
1793
+ }
1794
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1795
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationService, providedIn: "root" });
1796
+ }
1797
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationService, decorators: [{
1798
+ type: Injectable,
1799
+ args: [{
1800
+ providedIn: "root",
1801
+ }]
1802
+ }], ctorParameters: () => [] });
1803
+
1804
+ class TablePaginatedService {
1805
+ tableConfigSubject = new BehaviorSubject(null);
1806
+ dataSubject = new BehaviorSubject([]);
1807
+ columnsSubject = new BehaviorSubject([]);
1808
+ tableConfig$ = this.tableConfigSubject.asObservable();
1809
+ columns$ = this.columnsSubject.asObservable();
1810
+ data$ = this.dataSubject.asObservable();
1811
+ visibleColumns$ = this.columns$.pipe(map((columns) => columns.filter((col) => col.visible).map((col) => col.key || col.element || "")));
1812
+ createTable(data, columns, customConfig) {
1813
+ const tableConfig = {
1814
+ columns: columns ? columns.map((col) => col.key || col.element || "") : [],
1815
+ data,
1816
+ columnData: {},
1817
+ result: {
1818
+ noData: "Não há dados para o filtro selecionado.",
1819
+ defaultMessage: "Nenhum resultado encontrado.",
1820
+ },
1821
+ ...customConfig,
1822
+ };
1823
+ if (data.length > 0 && columns) {
1824
+ const columnData = {};
1825
+ columns.forEach((col) => {
1826
+ columnData[col.key || col.element || ""] = {
1827
+ ...col,
1828
+ type: col.type || this.inferColumnType(data[0][col.key || col.element || ""]),
1829
+ visible: col.visible !== undefined ? col.visible : true,
1830
+ };
1035
1831
  });
1832
+ tableConfig.columnData = columnData;
1036
1833
  }
1037
- else {
1038
- this.focusedIndex = -1;
1834
+ else if (data.length === 0 && columns) {
1835
+ const columnData = {};
1836
+ columns.forEach((col) => {
1837
+ columnData[col.key || col.element || ""] = {
1838
+ ...col,
1839
+ type: col.type || "STRING",
1840
+ visible: col.visible !== undefined ? col.visible : true,
1841
+ };
1842
+ });
1843
+ tableConfig.columnData = columnData;
1039
1844
  }
1040
- this.cdr.detectChanges();
1845
+ this.tableConfigSubject.next(tableConfig);
1846
+ this.columnsSubject.next(columns || []);
1847
+ this.dataSubject.next(data);
1041
1848
  }
1042
- selectItem(option) {
1043
- if (this.isDisabled) {
1044
- return;
1849
+ inferColumnType(value) {
1850
+ if (value === null || value === undefined) {
1851
+ return "STRING";
1045
1852
  }
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;
1853
+ switch (typeof value) {
1854
+ case "boolean":
1855
+ return "BOOLEAN";
1856
+ case "number":
1857
+ return "NUMBER";
1858
+ case "string":
1859
+ return this.isValidDate(value) ? "DATE" : "STRING";
1860
+ default:
1861
+ return "STRING";
1064
1862
  }
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
1863
  }
1069
- trackBy(index, item) {
1070
- return this.trackByFn ? this.trackByFn(index, item) : item.id;
1864
+ isValidDate(value) {
1865
+ return !isNaN(Date.parse(value));
1071
1866
  }
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;
1867
+ toggleColumnVisibility(columnKey) {
1868
+ const currentColumns = this.columnsSubject.value;
1869
+ const updatedColumns = currentColumns.map((col) => col.key === columnKey || col.element === columnKey ? { ...col, visible: !col.visible } : col);
1870
+ const currentConfig = this.tableConfigSubject.value;
1871
+ if (currentConfig) {
1872
+ const updatedColumnData = { ...currentConfig.columnData };
1873
+ const columnToUpdate = Object.keys(updatedColumnData).find((key) => key === columnKey);
1874
+ if (columnToUpdate) {
1875
+ updatedColumnData[columnToUpdate].visible = !updatedColumnData[columnToUpdate].visible;
1876
+ this.tableConfigSubject.next({
1877
+ ...currentConfig,
1878
+ columnData: updatedColumnData,
1879
+ });
1079
1880
  }
1080
- this.focusedIndex = -1;
1081
- this.markAsTouched();
1082
- this.removeValidBorder = true;
1083
- this.cdr.detectChanges();
1084
1881
  }
1882
+ this.columnsSubject.next(updatedColumns);
1085
1883
  }
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();
1884
+ getVisibleColumns() {
1885
+ return this.columnsSubject.value.filter((col) => col.visible);
1105
1886
  }
1106
- onArrowUp(event) {
1107
- if (this.isDisabled) {
1108
- return;
1887
+ setColumns(columns) {
1888
+ const currentConfig = this.tableConfigSubject.value;
1889
+ if (currentConfig) {
1890
+ const columnData = {};
1891
+ columns.forEach((col) => {
1892
+ columnData[col.key || col.element || ""] = col;
1893
+ });
1894
+ this.tableConfigSubject.next({
1895
+ ...currentConfig,
1896
+ columns: columns.map((col) => col.key || col.element || ""),
1897
+ columnData,
1898
+ });
1109
1899
  }
1110
- ;
1111
- event.preventDefault();
1112
- event.stopPropagation();
1113
- if (this.filteredOptions.length === 0) {
1114
- return;
1900
+ this.columnsSubject.next(columns);
1901
+ }
1902
+ setData(data) {
1903
+ this.dataSubject.next(data);
1904
+ const currentConfig = this.tableConfigSubject.value;
1905
+ if (currentConfig) {
1906
+ this.tableConfigSubject.next({
1907
+ ...currentConfig,
1908
+ data,
1909
+ });
1115
1910
  }
1116
- ;
1117
- if (this.focusedIndex === -1) {
1118
- this.focusedIndex = this.filteredOptions.length - 1;
1911
+ }
1912
+ updateTableData(data) {
1913
+ this.setData(data);
1914
+ }
1915
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TablePaginatedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1916
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TablePaginatedService, providedIn: "root" });
1917
+ }
1918
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TablePaginatedService, decorators: [{
1919
+ type: Injectable,
1920
+ args: [{
1921
+ providedIn: "root",
1922
+ }]
1923
+ }] });
1924
+
1925
+ function getPtBrPaginatorIntlBasePaginated() {
1926
+ const paginatorIntl = new MatPaginatorIntl();
1927
+ paginatorIntl.itemsPerPageLabel = "Itens por página:";
1928
+ paginatorIntl.nextPageLabel = "Próxima página";
1929
+ paginatorIntl.previousPageLabel = "Página anterior";
1930
+ paginatorIntl.firstPageLabel = "Primeira página";
1931
+ paginatorIntl.lastPageLabel = "Última página";
1932
+ paginatorIntl.getRangeLabel = (page, pageSize, length) => {
1933
+ if (length === 0 || pageSize === 0) {
1934
+ return `0 de ${length}`;
1119
1935
  }
1120
- else {
1121
- this.focusedIndex = this.focusedIndex <= 0
1122
- ? this.filteredOptions.length - 1
1123
- : this.focusedIndex - 1;
1936
+ const startIndex = page * pageSize;
1937
+ const endIndex = Math.min(startIndex + pageSize, length);
1938
+ return `${startIndex + 1} – ${endIndex} de ${length}`;
1939
+ };
1940
+ return paginatorIntl;
1941
+ }
1942
+ class BaseTablePaginated {
1943
+ paginationSubscriptions = [];
1944
+ getColumnCssClass;
1945
+ customClass = "";
1946
+ pageSizeOptions = [5, 10, 20, 50];
1947
+ showFirstLastButtons = true;
1948
+ pageChanged = new EventEmitter();
1949
+ pageSizeChanged = new EventEmitter();
1950
+ firstPageClicked = new EventEmitter();
1951
+ lastPageClicked = new EventEmitter();
1952
+ selectionChanged = new EventEmitter();
1953
+ pageEvent = new EventEmitter();
1954
+ rowClicked = new EventEmitter();
1955
+ dataSource = new MatTableDataSource([]);
1956
+ selection = new SelectionModel(true, []);
1957
+ allColumns = [];
1958
+ displayedColumns = [];
1959
+ filterValue = "";
1960
+ configSubscription = null;
1961
+ visibleColumnsSubscription = null;
1962
+ dataSubscription = null;
1963
+ filterSubscription = null;
1964
+ tableConfig = null;
1965
+ sort;
1966
+ paginator;
1967
+ totalItems = 0;
1968
+ pageSize = 10;
1969
+ currentPage = 1;
1970
+ previousPage = 1;
1971
+ paginationService = inject(PaginationService);
1972
+ tableService = inject(TablePaginatedService);
1973
+ liveAnnouncer = inject(LiveAnnouncer);
1974
+ filterTableService = inject(FilterTablePaginatedService);
1975
+ constructor() {
1976
+ this.initializeSortingAccessor();
1977
+ this.initializeFilterPredicate();
1978
+ }
1979
+ onPageChanged(page) {
1980
+ this.currentPage = page;
1981
+ this.pageChanged.emit(page);
1982
+ if (this.paginator && this.paginator.pageIndex !== page - 1) {
1983
+ this.paginator.pageIndex = page - 1;
1124
1984
  }
1125
- this.scrollIntoView();
1126
- this.cdr.detectChanges();
1127
1985
  }
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]);
1986
+ ngOnInit() {
1987
+ this.configSubscription = this.tableService.tableConfig$.subscribe((config) => {
1988
+ if (config) {
1989
+ this.tableConfig = config;
1990
+ this.allColumns = config.columns;
1991
+ }
1992
+ });
1993
+ this.visibleColumnsSubscription = this.tableService.visibleColumns$.subscribe((visibleColumns) => {
1994
+ this.displayedColumns = visibleColumns.filter((col) => col !== "select");
1995
+ });
1996
+ this.dataSubscription = this.tableService.data$.subscribe((data) => {
1997
+ this.dataSource.data = data;
1998
+ this.updateTotalItems();
1999
+ });
2000
+ this.filterSubscription = this.filterTableService.filter$.subscribe((filterValue) => {
2001
+ this.filterValue = filterValue;
2002
+ this.applyFilter();
2003
+ });
2004
+ this.paginationSubscriptions.push(this.paginationService.currentPage$.subscribe((page) => {
2005
+ if (this.currentPage !== page) {
2006
+ this.onPageChanged(page);
2007
+ }
2008
+ }), this.paginationService.pageSize$.subscribe((size) => {
2009
+ if (this.pageSize !== size) {
2010
+ this.onPageSizeChanged(size);
2011
+ }
2012
+ }));
2013
+ }
2014
+ ngOnDestroy() {
2015
+ this.configSubscription?.unsubscribe();
2016
+ this.visibleColumnsSubscription?.unsubscribe();
2017
+ this.dataSubscription?.unsubscribe();
2018
+ this.filterSubscription?.unsubscribe();
2019
+ this.paginationSubscriptions.forEach((sub) => sub.unsubscribe());
2020
+ }
2021
+ updateTotalItems(newTotalItens) {
2022
+ this.totalItems = newTotalItens ?? this.totalItems;
2023
+ this.paginationService.setTotalItems(this.totalItems);
2024
+ const lastPage = this.pageSize > 0 ? Math.ceil(this.totalItems / this.pageSize) : 1;
2025
+ const lastValidPage = lastPage > 0 ? lastPage : 1;
2026
+ if (this.currentPage > lastValidPage) {
2027
+ this.paginationService.setPage(1);
1133
2028
  }
1134
- else if (this.filteredOptions.length > 0) {
1135
- this.selectItem(this.filteredOptions[0]);
2029
+ }
2030
+ onPageSizeChanged(pageSize) {
2031
+ this.pageSize = pageSize;
2032
+ this.pageSizeChanged.emit(pageSize);
2033
+ if (this.paginator && this.paginator.pageSize !== pageSize) {
2034
+ this.paginator.pageSize = pageSize;
1136
2035
  }
1137
2036
  }
1138
- closeDropdown() {
1139
- if (this.isDisabled) {
1140
- return;
2037
+ getColumnHeader(column) {
2038
+ if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
2039
+ return column;
1141
2040
  }
1142
- ;
1143
- this.isOpen = false;
1144
- this.focusedIndex = -1;
1145
- this.isFocused = false;
1146
- this.cdr.detectChanges();
2041
+ return this.tableConfig.columnData[column].header || column;
1147
2042
  }
1148
- scrollIntoView() {
1149
- if (!this.isOpen || this.focusedIndex === -1) {
1150
- return;
2043
+ getColumnElement(column) {
2044
+ if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
2045
+ return column;
1151
2046
  }
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);
2047
+ return this.tableConfig.columnData[column].element || column;
1162
2048
  }
1163
- checkAvailableSpace() {
1164
- if (this.dropDirectionInput === "up") {
1165
- this.dropDirection = "up";
1166
- return;
2049
+ getColumnType(column) {
2050
+ if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
2051
+ return "STRING";
1167
2052
  }
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";
2053
+ return this.tableConfig.columnData[column].type || "STRING";
1173
2054
  }
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
- }
2055
+ announceSortChange(sortState) {
2056
+ if (sortState.direction) {
2057
+ this.liveAnnouncer.announce(`Ordenado ${sortState.direction === "asc" ? "ascendente" : "descendente"}`);
1188
2058
  }
1189
2059
  else {
1190
- this.selectedItem = undefined;
2060
+ this.liveAnnouncer.announce("Ordenação removida");
1191
2061
  }
1192
- this.cdr.detectChanges();
1193
2062
  }
1194
- registerOnChange(fn) {
1195
- this.onChange = fn;
2063
+ handlePageChange(event) {
2064
+ this.pageSize = event.pageSize;
2065
+ this.paginationService.setPageSize(event.pageSize);
2066
+ this.pageChanged.emit(event.pageIndex);
1196
2067
  }
1197
- registerOnTouched(fn) {
1198
- this.onTouched = fn;
2068
+ applyFilter() {
2069
+ const normalizedFilter = this.filterValue.trim().toLowerCase();
2070
+ this.dataSource.filter = normalizedFilter;
1199
2071
  }
1200
- onChange = () => { };
1201
- onTouched = () => { };
1202
- get errorText() {
1203
- if (!this.control) {
1204
- return null;
2072
+ initializeSortingAccessor() {
2073
+ this.dataSource.sortingDataAccessor = (item, property) => {
2074
+ const value = item[property];
2075
+ if (typeof value === "string") {
2076
+ return value.toLowerCase();
2077
+ }
2078
+ else if (typeof value === "number") {
2079
+ return value;
2080
+ }
2081
+ else if (typeof value === "boolean") {
2082
+ return value ? 1 : 0;
2083
+ }
2084
+ else if (value instanceof Date) {
2085
+ return value.valueOf();
2086
+ }
2087
+ else if (value === null) {
2088
+ return "";
2089
+ }
2090
+ else if (value === undefined) {
2091
+ return undefined;
2092
+ }
2093
+ else if (typeof value === "object") {
2094
+ return value.toString();
2095
+ }
2096
+ return value;
2097
+ };
2098
+ }
2099
+ initializeFilterPredicate() {
2100
+ this.dataSource.filterPredicate = (data, filter) => {
2101
+ const searchTerms = filter.trim().toLowerCase();
2102
+ if (!searchTerms) {
2103
+ return true;
2104
+ }
2105
+ const dataStr = Object.keys(data).reduce((currentTerm, key) => {
2106
+ const value = data[key];
2107
+ return (currentTerm +
2108
+ (value !== null && value !== undefined ? value.toString().toLowerCase() : ""));
2109
+ }, "");
2110
+ return dataStr.indexOf(searchTerms) !== -1;
2111
+ };
2112
+ }
2113
+ onRowClick(row) {
2114
+ this.rowClicked.emit(row);
2115
+ }
2116
+ onPageEvent(event) {
2117
+ const newPage = event.pageIndex + 1;
2118
+ const isFirstPage = newPage === 1 && this.previousPage !== 1;
2119
+ const isLastPage = newPage === Math.ceil(this.totalItems / event.pageSize) && newPage !== this.previousPage;
2120
+ // Handle page size changes
2121
+ if (event.pageSize !== this.pageSize) {
2122
+ this.onPageSizeChanged(event.pageSize);
1205
2123
  }
1206
- if (this.control.hasError("required")) {
1207
- return "*Campo obrigatório";
2124
+ // Handle page changes
2125
+ if (newPage !== this.currentPage) {
2126
+ this.previousPage = this.currentPage; // Store previous page for first/last detection
2127
+ this.onPageChanged(newPage);
2128
+ // Emit specific events for first/last page navigation
2129
+ if (isFirstPage) {
2130
+ this.firstPageClicked.emit();
2131
+ this.liveAnnouncer.announce("Primeira página");
2132
+ }
2133
+ else if (isLastPage) {
2134
+ this.lastPageClicked.emit();
2135
+ this.liveAnnouncer.announce("Última página");
2136
+ }
1208
2137
  }
1209
- return null;
2138
+ this.pageEvent.emit(event);
1210
2139
  }
1211
- markAsTouched() {
1212
- if (!this.isTouched) {
1213
- this.onTouched();
1214
- this.isTouched = true;
1215
- this.control?.markAsTouched();
2140
+ getColumnButtons(column) {
2141
+ if (!this.tableConfig || !this.tableConfig.columnData || !this.tableConfig.columnData[column]) {
2142
+ return [];
1216
2143
  }
2144
+ return this.tableConfig.columnData[column].buttons || [];
1217
2145
  }
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 });
2146
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTablePaginated, deps: [], target: i0.ɵɵFactoryTarget.Component });
2147
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseTablePaginated, isStandalone: true, selector: "cao-table-paginated", inputs: { getColumnCssClass: "getColumnCssClass", customClass: "customClass", pageSizeOptions: "pageSizeOptions", showFirstLastButtons: "showFirstLastButtons" }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", firstPageClicked: "firstPageClicked", lastPageClicked: "lastPageClicked", selectionChanged: "selectionChanged", pageEvent: "pageEvent", rowClicked: "rowClicked" }, providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBasePaginated() }], 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 <table mat-table matSort [dataSource]=\"dataSource\" (matSortChange)=\"announceSortChange($event)\">\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th *matHeaderCellDef mat-header-cell mat-sort-header class=\"table-header\">\n {{ getColumnHeader(column) }}\n </th>\n <td *matCellDef=\"let element\" mat-cell class=\"table-cell\">\n @switch (getColumnType(column)) { @case ('STRING') { @if (getColumnCssClass &&\n getColumnCssClass(column, element[getColumnElement(column)])) {\n <span [class]=\"getColumnCssClass(column, element[getColumnElement(column)])\">\n {{ element[getColumnElement(column)] }}\n </span>\n } @else {\n <span>{{ element[getColumnElement(column)] }}</span>\n } } @case ('BOOLEAN') {\n <mat-checkbox disabled [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 type=\"button\" mat-icon-button [matTooltip]=\"btn.tooltip\" (click)=\"btn.onClick(element)\">\n <mat-icon>{{ btn.icon }}</mat-icon>\n </button>\n }\n </div>\n } }\n </td>\n </ng-container>\n }\n\n <ng-container matColumnDef=\"footer\">\n <td\n *matFooterCellDef\n mat-footer-cell\n class=\"table-cell\"\n [attr.colspan]=\"displayedColumns.length\">\n Total de Registros: {{ totalItems }}\n </td>\n </ng-container>\n\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns;\" mat-row (click)=\"onRowClick(row)\"></tr>\n <tr *matFooterRowDef=\"['footer']\" mat-footer-row class=\"mat-row-footer\"></tr>\n </table>\n @if(totalItems > 0){\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 } @else {\n <div class=\"no-data-container\">\n <h2>{{ tableConfig?.result?.noData ?? 'N\u00E3o h\u00E1 dados dispon\u00EDveis' }}</h2>\n <p>{{ tableConfig?.result?.defaultMessage ?? 'Adicione alguns dados' }}</p>\n </div>\n } }\n</div>\n", styles: [".table-container{border-radius:8px;box-shadow:0 4px 6px #0000001a;overflow:hidden}.table-container .table-controls{display:flex;align-items:center;padding:20px;justify-content:center}.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;margin:0 auto}.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;text-align:center}.table-container .table-controls .filter-field i{color:var(--icon-collor);margin-left:8px}.table-container .mat-mdc-table{width:100%}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell{border-right:1px solid var(--data-bg);font-weight:600;color:var(--message-color);border-bottom:1px solid var(--input-background);text-transform:uppercase;font-size:.875rem;text-align:center;padding:12px;vertical-align:middle}.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-header-row .mat-mdc-header-cell .mat-sort-header-container{justify-content:center}.table-container .mat-mdc-table .mat-mdc-row{transition:background-color .2s ease;background-color:transparent}.table-container .mat-mdc-table .mat-mdc-row:nth-child(2n){background-color:transparent}.table-container .mat-mdc-table .mat-mdc-row:nth-child(odd){background-color:var(--input-background)}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell{border-right:1px solid var(--border-table-ligth);color:var(--gray-dark);border-bottom:1px solid var(--input-background);text-align:center;padding:12px;vertical-align:middle}.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:0 auto;display:block}.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(--text-color)}.table-container .mat-mdc-table .mat-mdc-footer-row .mat-mdc-footer-cell{padding:12px;text-align:center}.table-container .no-data-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;background-color:var(--table-background)}.table-container .no-data-container h2{color:var(--input-disabled-bg);margin-bottom:12px}.table-container .no-data-container p{color:var(--input-disabled-bg)}@media(width<=768px){.table-container .table-controls{flex-direction:column;align-items:center}.table-container .table-controls .filter-field{width:80%;margin-right:0;margin-bottom:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
1229
2148
  }
1230
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DropDownComponent, decorators: [{
2149
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTablePaginated, decorators: [{
1231
2150
  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: [{
2151
+ args: [{ selector: "cao-table-paginated", encapsulation: ViewEncapsulation.None, imports: [CommonModule, MaterialModule], providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBasePaginated() }], template: "<div class=\"table-container\" [ngClass]=\"customClass\">\n @if (tableConfig) {\n <table mat-table matSort [dataSource]=\"dataSource\" (matSortChange)=\"announceSortChange($event)\">\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th *matHeaderCellDef mat-header-cell mat-sort-header class=\"table-header\">\n {{ getColumnHeader(column) }}\n </th>\n <td *matCellDef=\"let element\" mat-cell class=\"table-cell\">\n @switch (getColumnType(column)) { @case ('STRING') { @if (getColumnCssClass &&\n getColumnCssClass(column, element[getColumnElement(column)])) {\n <span [class]=\"getColumnCssClass(column, element[getColumnElement(column)])\">\n {{ element[getColumnElement(column)] }}\n </span>\n } @else {\n <span>{{ element[getColumnElement(column)] }}</span>\n } } @case ('BOOLEAN') {\n <mat-checkbox disabled [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 type=\"button\" mat-icon-button [matTooltip]=\"btn.tooltip\" (click)=\"btn.onClick(element)\">\n <mat-icon>{{ btn.icon }}</mat-icon>\n </button>\n }\n </div>\n } }\n </td>\n </ng-container>\n }\n\n <ng-container matColumnDef=\"footer\">\n <td\n *matFooterCellDef\n mat-footer-cell\n class=\"table-cell\"\n [attr.colspan]=\"displayedColumns.length\">\n Total de Registros: {{ totalItems }}\n </td>\n </ng-container>\n\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns;\" mat-row (click)=\"onRowClick(row)\"></tr>\n <tr *matFooterRowDef=\"['footer']\" mat-footer-row class=\"mat-row-footer\"></tr>\n </table>\n @if(totalItems > 0){\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 } @else {\n <div class=\"no-data-container\">\n <h2>{{ tableConfig?.result?.noData ?? 'N\u00E3o h\u00E1 dados dispon\u00EDveis' }}</h2>\n <p>{{ tableConfig?.result?.defaultMessage ?? 'Adicione alguns dados' }}</p>\n </div>\n } }\n</div>\n", styles: [".table-container{border-radius:8px;box-shadow:0 4px 6px #0000001a;overflow:hidden}.table-container .table-controls{display:flex;align-items:center;padding:20px;justify-content:center}.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;margin:0 auto}.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;text-align:center}.table-container .table-controls .filter-field i{color:var(--icon-collor);margin-left:8px}.table-container .mat-mdc-table{width:100%}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell{border-right:1px solid var(--data-bg);font-weight:600;color:var(--message-color);border-bottom:1px solid var(--input-background);text-transform:uppercase;font-size:.875rem;text-align:center;padding:12px;vertical-align:middle}.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-header-row .mat-mdc-header-cell .mat-sort-header-container{justify-content:center}.table-container .mat-mdc-table .mat-mdc-row{transition:background-color .2s ease;background-color:transparent}.table-container .mat-mdc-table .mat-mdc-row:nth-child(2n){background-color:transparent}.table-container .mat-mdc-table .mat-mdc-row:nth-child(odd){background-color:var(--input-background)}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell{border-right:1px solid var(--border-table-ligth);color:var(--gray-dark);border-bottom:1px solid var(--input-background);text-align:center;padding:12px;vertical-align:middle}.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:0 auto;display:block}.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(--text-color)}.table-container .mat-mdc-table .mat-mdc-footer-row .mat-mdc-footer-cell{padding:12px;text-align:center}.table-container .no-data-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;background-color:var(--table-background)}.table-container .no-data-container h2{color:var(--input-disabled-bg);margin-bottom:12px}.table-container .no-data-container p{color:var(--input-disabled-bg)}@media(width<=768px){.table-container .table-controls{flex-direction:column;align-items:center}.table-container .table-controls .filter-field{width:80%;margin-right:0;margin-bottom:12px}}\n"] }]
2152
+ }], ctorParameters: () => [], propDecorators: { getColumnCssClass: [{
1245
2153
  type: Input
1246
- }], options: [{
1247
- type: Input
1248
- }], dropDownClass: [{
1249
- type: Input
1250
- }], styleDropDown: [{
1251
- type: Input
1252
- }], control: [{
2154
+ }], customClass: [{
1253
2155
  type: Input
1254
- }], controlName: [{
2156
+ }], pageSizeOptions: [{
1255
2157
  type: Input
1256
- }], isDisabled: [{
2158
+ }], showFirstLastButtons: [{
1257
2159
  type: Input
1258
- }], itemSelected: [{
2160
+ }], pageChanged: [{
1259
2161
  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
2162
+ }], pageSizeChanged: [{
2163
+ type: Output
2164
+ }], firstPageClicked: [{
2165
+ type: Output
2166
+ }], lastPageClicked: [{
2167
+ type: Output
2168
+ }], selectionChanged: [{
2169
+ type: Output
2170
+ }], pageEvent: [{
2171
+ type: Output
2172
+ }], rowClicked: [{
2173
+ type: Output
2174
+ }], sort: [{
2175
+ type: ViewChild,
2176
+ args: [MatSort]
2177
+ }], paginator: [{
2178
+ type: ViewChild,
2179
+ args: [MatPaginator]
1319
2180
  }] } });
1320
2181
 
1321
2182
  /*
@@ -1326,5 +2187,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
1326
2187
  * Generated bundle index. Do not edit.
1327
2188
  */
1328
2189
 
1329
- export { BaseAlert, BaseButton, BaseDialog, BaseTimeRange, DropDownComponent, FilterTableService, Footer, LinksButton, RnvAutocompleteComponent, TableComponent, TableService, getPtBrPaginatorIntl };
2190
+ export { BaseButton, BaseDialog, BaseDialogService, BaseFilterTableService, BaseInput, BaseModal, BaseModalService, BaseTable, BaseTablePaginated, BaseTimeRange, DropDownComponent, FilterTablePaginatedService, Footer, LinksButton, PaginationService, Paginator, RnvAutocompleteComponent, TablePaginatedService, TableService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
1330
2191
  //# sourceMappingURL=ngx-opalbytes-components.mjs.map