ngx-opalbytes-components 1.11.0 → 1.13.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.
|
@@ -1,11 +1,10 @@
|
|
|
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, ViewChild, forwardRef, ChangeDetectionStrategy, ViewEncapsulation,
|
|
4
|
+
import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, NgModule, Injectable, ContentChildren } from '@angular/core';
|
|
5
5
|
import * as i3 from '@angular/material/tooltip';
|
|
6
6
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
7
|
-
import
|
|
8
|
-
import { LucideAngularModule } from 'lucide-angular';
|
|
7
|
+
import { LucideDynamicIcon } from '@lucide/angular';
|
|
9
8
|
import * as i2 from '@angular/forms';
|
|
10
9
|
import { FormsModule, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
11
10
|
import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
|
|
@@ -26,7 +25,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
|
|
|
26
25
|
import * as i2$2 from '@angular/material/button';
|
|
27
26
|
import { MatButtonModule } from '@angular/material/button';
|
|
28
27
|
import { MatCardModule } from '@angular/material/card';
|
|
29
|
-
import * as i3$
|
|
28
|
+
import * as i3$1 from '@angular/material/checkbox';
|
|
30
29
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
31
30
|
import { MatChipsModule } from '@angular/material/chips';
|
|
32
31
|
import * as i1$3 from '@angular/material/core';
|
|
@@ -60,7 +59,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
|
|
|
60
59
|
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
61
60
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
62
61
|
|
|
63
|
-
class
|
|
62
|
+
class CaoBaseButtonComponent {
|
|
64
63
|
buttonClick = new EventEmitter();
|
|
65
64
|
buttonText = "Clique!";
|
|
66
65
|
isDarkMode = false;
|
|
@@ -72,6 +71,7 @@ class BaseButton {
|
|
|
72
71
|
leadingIcon;
|
|
73
72
|
isLucideIcon = true;
|
|
74
73
|
dataCy;
|
|
74
|
+
iconColor;
|
|
75
75
|
ngOnInit() {
|
|
76
76
|
if (!this.dataCy) {
|
|
77
77
|
this.dataCy = `btn-${this.buttonText.replace(/\s+/g, '-').toLowerCase()}`;
|
|
@@ -85,12 +85,12 @@ class BaseButton {
|
|
|
85
85
|
this.buttonClick.emit();
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
89
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type:
|
|
88
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
89
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBaseButtonComponent, isStandalone: true, selector: "cao-button", inputs: { buttonText: "buttonText", isDarkMode: "isDarkMode", isDisabled: "isDisabled", isLoading: "isLoading", btnClass: "btnClass", tooltip: "tooltip", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isLucideIcon: "isLucideIcon", dataCy: "dataCy", iconColor: "iconColor" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"base-button\"\n matTooltipPosition=\"below\"\n matTooltipClass=\"custom-arrow-tooltip\"\n [matTooltip]=\"tooltip\"\n [matTooltipDisabled]=\"!tooltip\"\n [class.dark-mode]=\"isDarkMode\"\n [class.disabled]=\"isDisabled\"\n [class.loading]=\"isLoading\"\n [disabled]=\"isDisabled || isLoading\"\n [attr.data-cy]=\"dataCy\"\n (click)=\"onClick()\">\n @if (leadingIcon) {\n <span class=\"leading-icon\">\n @if (isLucideIcon) {\n <svg [lucideIcon]=\"leadingIcon\" [style.color]=\"iconColor\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"leadingIcon\" />\n }\n </span>\n } {{ buttonText }} @if (trailingIcon) {\n <span class=\"trailing-icon\">\n @if (isLucideIcon) {\n <svg [lucideIcon]=\"trailingIcon\" [style.color]=\"iconColor\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"trailingIcon\" />\n }\n </span>\n } @if (isLoading) {\n <span class=\"loader\"></span>\n }\n</button>\n", styles: [".base-button{display:flex;gap:5px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
|
|
90
90
|
}
|
|
91
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
91
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseButtonComponent, decorators: [{
|
|
92
92
|
type: Component,
|
|
93
|
-
args: [{ selector:
|
|
93
|
+
args: [{ standalone: true, selector: "cao-button", imports: [CommonModule, MatTooltipModule, LucideDynamicIcon], template: "<button\n type=\"button\"\n class=\"base-button\"\n matTooltipPosition=\"below\"\n matTooltipClass=\"custom-arrow-tooltip\"\n [matTooltip]=\"tooltip\"\n [matTooltipDisabled]=\"!tooltip\"\n [class.dark-mode]=\"isDarkMode\"\n [class.disabled]=\"isDisabled\"\n [class.loading]=\"isLoading\"\n [disabled]=\"isDisabled || isLoading\"\n [attr.data-cy]=\"dataCy\"\n (click)=\"onClick()\">\n @if (leadingIcon) {\n <span class=\"leading-icon\">\n @if (isLucideIcon) {\n <svg [lucideIcon]=\"leadingIcon\" [style.color]=\"iconColor\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"leadingIcon\" />\n }\n </span>\n } {{ buttonText }} @if (trailingIcon) {\n <span class=\"trailing-icon\">\n @if (isLucideIcon) {\n <svg [lucideIcon]=\"trailingIcon\" [style.color]=\"iconColor\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"trailingIcon\" />\n }\n </span>\n } @if (isLoading) {\n <span class=\"loader\"></span>\n }\n</button>\n", styles: [".base-button{display:flex;gap:5px;cursor:pointer}\n"] }]
|
|
94
94
|
}], propDecorators: { buttonClick: [{
|
|
95
95
|
type: Output
|
|
96
96
|
}], buttonText: [{
|
|
@@ -113,12 +113,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
113
113
|
type: Input
|
|
114
114
|
}], dataCy: [{
|
|
115
115
|
type: Input
|
|
116
|
+
}], iconColor: [{
|
|
117
|
+
type: Input
|
|
116
118
|
}] } });
|
|
117
119
|
|
|
118
|
-
class
|
|
120
|
+
class CaoBaseInput {
|
|
119
121
|
type = "text";
|
|
120
122
|
placeholder = "";
|
|
121
|
-
label = "";
|
|
122
123
|
inputClass = "";
|
|
123
124
|
value = "";
|
|
124
125
|
errorMessage = "";
|
|
@@ -127,6 +128,7 @@ class BaseInput {
|
|
|
127
128
|
searchMode = false;
|
|
128
129
|
showBorder = false;
|
|
129
130
|
isLucideIcon = false;
|
|
131
|
+
iconColor = "";
|
|
130
132
|
mask;
|
|
131
133
|
control;
|
|
132
134
|
tooltip = "";
|
|
@@ -137,11 +139,11 @@ class BaseInput {
|
|
|
137
139
|
allowNegativeNumbers = false;
|
|
138
140
|
separatorLimit = "";
|
|
139
141
|
set leadingIcon(value) {
|
|
140
|
-
this._leadingIcon =
|
|
142
|
+
this._leadingIcon = value;
|
|
141
143
|
this.icon = true;
|
|
142
144
|
}
|
|
143
145
|
set trailingIcon(value) {
|
|
144
|
-
this._trailingIcon =
|
|
146
|
+
this._trailingIcon = value;
|
|
145
147
|
this.icon = true;
|
|
146
148
|
}
|
|
147
149
|
valueChange = new EventEmitter();
|
|
@@ -203,45 +205,30 @@ class BaseInput {
|
|
|
203
205
|
setDisabledState(isDisabled) {
|
|
204
206
|
this.isDisabled = isDisabled;
|
|
205
207
|
}
|
|
206
|
-
|
|
207
|
-
|
|
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: [
|
|
208
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
209
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBaseInput, isStandalone: true, selector: "cao-input", inputs: { type: "type", placeholder: "placeholder", inputClass: "inputClass", value: "value", errorMessage: "errorMessage", isDisabled: "isDisabled", maxLength: "maxLength", searchMode: "searchMode", showBorder: "showBorder", isLucideIcon: "isLucideIcon", iconColor: "iconColor", 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
210
|
{
|
|
222
211
|
provide: NG_VALUE_ACCESSOR,
|
|
223
|
-
useExisting:
|
|
212
|
+
useExisting: CaoBaseInput,
|
|
224
213
|
multi: true,
|
|
225
214
|
},
|
|
226
215
|
provideNgxMask(),
|
|
227
|
-
], ngImport: i0, template: "<div class=\"form-field input-component\" [class.search-mode]=\"searchMode\">\n
|
|
216
|
+
], ngImport: i0, template: "<div class=\"form-field input-component\" [class.search-mode]=\"searchMode\">\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 <div class=\"icon\">\n <svg [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\"/>\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 <div class=\"icon\">\n <svg [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n </div>\n } } \n </div>\n</div>", styles: [".form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;color:var(--primary);font-weight:700;text-transform:uppercase;white-space:nowrap}.input-wrapper{position:relative;width:100%;height:100%}.input-wrapper input,.input-wrapper textarea{width:100%;height: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 .icon{position:absolute;top:50%;transform:translateY(-50%);width:15px;height:15px;pointer-events:none;display:flex;align-items:center;justify-content:center}.input-wrapper.has-leading-icon .icon:first-of-type{left:8px}.input-wrapper.has-trailing-icon .icon:last-of-type{right:8px}.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: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
|
|
228
217
|
}
|
|
229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseInput, decorators: [{
|
|
230
219
|
type: Component,
|
|
231
|
-
args: [{ selector: "cao-input", imports: [CommonModule, FormsModule, NgxMaskDirective, MatTooltipModule,
|
|
220
|
+
args: [{ standalone: true, selector: "cao-input", imports: [CommonModule, FormsModule, NgxMaskDirective, MatTooltipModule, LucideDynamicIcon], providers: [
|
|
232
221
|
{
|
|
233
222
|
provide: NG_VALUE_ACCESSOR,
|
|
234
|
-
useExisting:
|
|
223
|
+
useExisting: CaoBaseInput,
|
|
235
224
|
multi: true,
|
|
236
225
|
},
|
|
237
226
|
provideNgxMask(),
|
|
238
|
-
], template: "<div class=\"form-field input-component\" [class.search-mode]=\"searchMode\">\n
|
|
227
|
+
], template: "<div class=\"form-field input-component\" [class.search-mode]=\"searchMode\">\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 <div class=\"icon\">\n <svg [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\"/>\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 <div class=\"icon\">\n <svg [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n </div>\n } } \n </div>\n</div>", styles: [".form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;color:var(--primary);font-weight:700;text-transform:uppercase;white-space:nowrap}.input-wrapper{position:relative;width:100%;height:100%}.input-wrapper input,.input-wrapper textarea{width:100%;height: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 .icon{position:absolute;top:50%;transform:translateY(-50%);width:15px;height:15px;pointer-events:none;display:flex;align-items:center;justify-content:center}.input-wrapper.has-leading-icon .icon:first-of-type{left:8px}.input-wrapper.has-trailing-icon .icon:last-of-type{right:8px}.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
228
|
}], propDecorators: { type: [{
|
|
240
229
|
type: Input
|
|
241
230
|
}], placeholder: [{
|
|
242
231
|
type: Input
|
|
243
|
-
}], label: [{
|
|
244
|
-
type: Input
|
|
245
232
|
}], inputClass: [{
|
|
246
233
|
type: Input
|
|
247
234
|
}], value: [{
|
|
@@ -258,6 +245,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
258
245
|
type: Input
|
|
259
246
|
}], isLucideIcon: [{
|
|
260
247
|
type: Input
|
|
248
|
+
}], iconColor: [{
|
|
249
|
+
type: Input
|
|
261
250
|
}], mask: [{
|
|
262
251
|
type: Input
|
|
263
252
|
}], control: [{
|
|
@@ -359,16 +348,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
359
348
|
args: [MatDateRangeInput]
|
|
360
349
|
}] } });
|
|
361
350
|
|
|
362
|
-
class
|
|
351
|
+
class CaoAutocompleteComponent {
|
|
363
352
|
label = "";
|
|
364
353
|
placeholder = "";
|
|
365
354
|
options = [];
|
|
366
355
|
control = new FormControl();
|
|
367
356
|
dataCy = "";
|
|
368
357
|
controlName = "";
|
|
358
|
+
isLucideIcon = false;
|
|
359
|
+
iconColor = "";
|
|
360
|
+
_leadingIcon;
|
|
361
|
+
_trailingIcon;
|
|
369
362
|
internalControl = new FormControl("");
|
|
370
363
|
filteredOptions$;
|
|
371
364
|
isFocused = false;
|
|
365
|
+
icon = false;
|
|
366
|
+
el = inject(ElementRef);
|
|
372
367
|
onChange = () => { };
|
|
373
368
|
onTouched = () => { };
|
|
374
369
|
ngOnInit() {
|
|
@@ -454,19 +449,19 @@ class RnvAutocompleteComponent {
|
|
|
454
449
|
registerOnTouched(fn) {
|
|
455
450
|
this.onTouched = fn;
|
|
456
451
|
}
|
|
457
|
-
|
|
458
|
-
|
|
452
|
+
setInputHeight(height) {
|
|
453
|
+
this.el.nativeElement.style.setProperty('--form-field-height', height);
|
|
459
454
|
}
|
|
460
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
461
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type:
|
|
455
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
456
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoAutocompleteComponent, isStandalone: true, selector: "cao-autocomplete", inputs: { label: "label", placeholder: "placeholder", options: "options", control: "control", dataCy: "dataCy", controlName: "controlName", isLucideIcon: "isLucideIcon", iconColor: "iconColor", _leadingIcon: "_leadingIcon", _trailingIcon: "_trailingIcon" }, providers: [
|
|
462
457
|
{
|
|
463
458
|
provide: NG_VALUE_ACCESSOR,
|
|
464
|
-
useExisting: forwardRef(() =>
|
|
459
|
+
useExisting: forwardRef(() => CaoAutocompleteComponent),
|
|
465
460
|
multi: true,
|
|
466
461
|
},
|
|
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
|
|
462
|
+
], 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 autocomplete\">\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 <div class=\"icon\">\n <svg [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n </div>\n } }\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 @if (_trailingIcon) { @if (isLucideIcon) {\n <div class=\"icon trailing-icon\">\n <svg [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon trailing-icon\">\n <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n </div>\n } }\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: ["@charset \"UTF-8\";:host{--mat-form-field-container-height: stretch;display:block}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-mat-form-field{width:100%;flex:1;min-height:0}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper{height:100%!important;flex:1;display:flex;align-items:stretch}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-flex{height:100%;display:flex;align-items:stretch}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;display:flex;align-items:center;flex:1}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-infix input{height:auto!important;flex:1;padding:12px 0}.input-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center}.input-wrapper .icon{position:absolute;top:50%;transform:translateY(-50%);width:auto;height:auto;pointer-events:none;z-index:1}.input-wrapper.has-leading-icon input{padding-left:28px}.input-wrapper.has-trailing-icon input{padding-right:28px}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-outline{display:none}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.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}.trailing-icon{right:0}\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: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
468
463
|
}
|
|
469
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
464
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, decorators: [{
|
|
470
465
|
type: Component,
|
|
471
466
|
args: [{ selector: "cao-autocomplete", standalone: true, imports: [
|
|
472
467
|
CommonModule,
|
|
@@ -474,13 +469,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
474
469
|
MatFormFieldModule,
|
|
475
470
|
MatInputModule,
|
|
476
471
|
MatAutocompleteModule,
|
|
472
|
+
LucideDynamicIcon,
|
|
477
473
|
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
478
474
|
{
|
|
479
475
|
provide: NG_VALUE_ACCESSOR,
|
|
480
|
-
useExisting: forwardRef(() =>
|
|
476
|
+
useExisting: forwardRef(() => CaoAutocompleteComponent),
|
|
481
477
|
multi: true,
|
|
482
478
|
},
|
|
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
|
|
479
|
+
], 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 autocomplete\">\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 <div class=\"icon\">\n <svg [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n </div>\n } }\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 @if (_trailingIcon) { @if (isLucideIcon) {\n <div class=\"icon trailing-icon\">\n <svg [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon trailing-icon\">\n <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n </div>\n } }\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: ["@charset \"UTF-8\";:host{--mat-form-field-container-height: stretch;display:block}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-mat-form-field{width:100%;flex:1;min-height:0}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper{height:100%!important;flex:1;display:flex;align-items:stretch}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-flex{height:100%;display:flex;align-items:stretch}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;display:flex;align-items:center;flex:1}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-infix input{height:auto!important;flex:1;padding:12px 0}.input-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center}.input-wrapper .icon{position:absolute;top:50%;transform:translateY(-50%);width:auto;height:auto;pointer-events:none;z-index:1}.input-wrapper.has-leading-icon input{padding-left:28px}.input-wrapper.has-trailing-icon input{padding-right:28px}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-outline{display:none}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.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}.trailing-icon{right:0}\n"] }]
|
|
484
480
|
}], propDecorators: { label: [{
|
|
485
481
|
type: Input
|
|
486
482
|
}], placeholder: [{
|
|
@@ -493,9 +489,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
493
489
|
type: Input
|
|
494
490
|
}], controlName: [{
|
|
495
491
|
type: Input
|
|
492
|
+
}], isLucideIcon: [{
|
|
493
|
+
type: Input
|
|
494
|
+
}], iconColor: [{
|
|
495
|
+
type: Input
|
|
496
|
+
}], _leadingIcon: [{
|
|
497
|
+
type: Input
|
|
498
|
+
}], _trailingIcon: [{
|
|
499
|
+
type: Input
|
|
496
500
|
}] } });
|
|
497
501
|
|
|
498
|
-
class
|
|
502
|
+
class CaoDropDownComponent {
|
|
499
503
|
_eref;
|
|
500
504
|
cdr;
|
|
501
505
|
textHeader = "SELECIONE UM ITEM";
|
|
@@ -752,16 +756,16 @@ class DropDownComponent {
|
|
|
752
756
|
get controlNameValue() {
|
|
753
757
|
return this.controlName;
|
|
754
758
|
}
|
|
755
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
756
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type:
|
|
759
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoDropDownComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
760
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoDropDownComponent, 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
761
|
{
|
|
758
762
|
provide: NG_VALUE_ACCESSOR,
|
|
759
|
-
useExisting: forwardRef(() =>
|
|
763
|
+
useExisting: forwardRef(() => CaoDropDownComponent),
|
|
760
764
|
multi: true,
|
|
761
765
|
},
|
|
762
766
|
], 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
767
|
}
|
|
764
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
768
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoDropDownComponent, decorators: [{
|
|
765
769
|
type: Component,
|
|
766
770
|
args: [{ selector: "cao-drop-down", encapsulation: ViewEncapsulation.None, imports: [
|
|
767
771
|
MatIconModule,
|
|
@@ -771,7 +775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
771
775
|
], providers: [
|
|
772
776
|
{
|
|
773
777
|
provide: NG_VALUE_ACCESSOR,
|
|
774
|
-
useExisting: forwardRef(() =>
|
|
778
|
+
useExisting: forwardRef(() => CaoDropDownComponent),
|
|
775
779
|
multi: true,
|
|
776
780
|
},
|
|
777
781
|
], 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"] }]
|
|
@@ -1684,7 +1688,7 @@ class BaseTable {
|
|
|
1684
1688
|
this.totalItems = this.dataSource.data.length;
|
|
1685
1689
|
}
|
|
1686
1690
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1687
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseTable, isStandalone: true, selector: "cao-table", inputs: { customClass: "customClass", pageSizeOptions: "pageSizeOptions", showFirstLastButtons: "showFirstLastButtons", isPaginatedByServer: "isPaginatedByServer" }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", firstPageClicked: "firstPageClicked", lastPageClicked: "lastPageClicked", selectionChanged: "selectionChanged", pageEvent: "pageEvent" }, providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBaseTable() }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"customClass\">\n @if (tableConfig) {\n <div class=\"table-controls\">\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </div>\n\n <table\n mat-table\n matSort\n class=\"mat-elevation-z8\"\n [dataSource]=\"dataSource\"\n (matSortChange)=\"announceSortChange($event)\">\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox\n data-cy=\"checkbox-select-all\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n (change)=\"$event ? toggleAllRows() : null\" />\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-select-row-' + row.id\"\n [checked]=\"selection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\" />\n </td>\n </ng-container>\n\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th *matHeaderCellDef mat-header-cell [mat-sort-header]=\"column\">\n <span>{{ getColumnHeader(column) }}</span>\n <img\n alt=\"icone\"\n [ngSrc]=\"'.src/assets/svg/arrow-left-double.svg'\"\n [fill]=\"true\"\n [matMenuTriggerFor]=\"menuColunas\" />\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </th>\n <td *matCellDef=\"let element\" mat-cell>\n @switch (getColumnType(column)) { @case ('STRING') {\n <span>{{ element[getColumnElement(column)] }}</span>\n } @case ('BOOLEAN') {\n <mat-checkbox\n disabled\n [attr.data-cy]=\"'checkbox-value-' + column + '-' + element.id\"\n [checked]=\"element[getColumnElement(column)]\" />\n } @case ('DATE') {\n <span>{{ element[getColumnElement(column)] | date:'mediumDate' }}</span>\n } @case ('NUMBER') {\n <span>{{ element[getColumnElement(column)] | number:'1.2-2' }}</span>\n } @case ('SINGLE_BUTTON') {\n <div>\n @for (btn of getColumnButtons(column); track btn) {\n <button\n mat-icon-button\n [type]=\"'button'\" [matTooltip]=\"btn.tooltip\" (click)=\"btn.onClick(element)\">\n <mat-icon>{{ btn.icon }}</mat-icon>\n </button>\n }\n </div>\n } @default {\n <span>{{ element[getColumnElement(column)] }}</span>\n } }\n </td>\n </ng-container>\n }\n\n <ng-container matColumnDef=\"footer\">\n <td *matFooterCellDef mat-footer-cell [attr.colspan]=\"displayedColumns.length + 1\">\n Total de Registros: {{ dataSource.data.length }}\n </td>\n </ng-container>\n\n <tr *matHeaderRowDef=\"getAllColumns()\" mat-header-row></tr>\n <tr\n *matRowDef=\"let row; columns: getAllColumns();\"\n mat-row\n (click)=\"selection.toggle(row)\"></tr>\n <tr *matFooterRowDef=\"['footer']\" mat-footer-row></tr>\n </table>\n }\n</div>\n\n<mat-paginator\n #paginator\n aria-label=\"Select page\"\n [length]=\"totalItems\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageIndex]=\"currentPage - 1\"\n [hidePageSize]=\"false\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n (page)=\"onPageEvent($event)\" />\n\n@if (!tableConfig || tableConfig.data.length === 0) {\n<div class=\"no-data-container\">\n <h2 class=\"no-data-title\">{{ tableConfig?.result?.noData || 'N\u00E3o h\u00E1 dados dispon\u00EDveis' }}</h2>\n <p class=\"no-data-message\"\n >{{ tableConfig?.result?.defaultMessage || 'Adicione alguns dados' }}</p\n >\n</div>\n}\n", styles: [".table-container{border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:100%;overflow:auto hidden}.table-container .table-controls{display:flex;align-items:center;padding:20px}.table-container .table-controls .filter-field{display:flex;align-items:center;justify-content:space-between;padding:10px;flex-direction:row;border:none;border-radius:10px;background-color:var(--input-disabled-bg);width:50%;height:55px}.table-container .table-controls .filter-field input:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}.table-container .table-controls .filter-field .input-filter{width:100%;box-sizing:border-box;background-color:transparent;border:none;transition:none}.table-container .table-controls .filter-field i{color:var(--icon-collor);margin-left:8px}.table-container .mat-mdc-table{width:max-content;min-width:100%;background-color:var(--table-body-color)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{border-right:none!important}.table-container .mat-mdc-table .mat-mdc-header-cell:not(:first-child),.table-container .mat-mdc-table .mat-mdc-cell:not(:first-child){border-right:1px solid var(--primary)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{width:60px;max-width:60px;min-width:60px;border-right:none}.table-container .mat-mdc-table .mat-mdc-header-row{background-color:var(--table-header)}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell{border-right:1px solid var(--white);font-weight:600;color:var(--white);border-bottom:1px solid var(--input-background);text-transform:uppercase;font-size:.875rem}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row{transition:background-color .2s ease}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell{border-right:1px solid var(--primary);color:var(--gray-dark);border-bottom:1px solid var(--input-background)}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row:hover{background-color:#0000000a}.table-container .mat-mdc-table .mat-mdc-row.selected{background-color:#3f51b51a}.table-container .mat-mdc-table .mat-mdc-checkbox{margin-right:12px}.table-container .mat-mdc-table .mat-mdc-checkbox .mdc-checkbox{--mdc-checkbox-unselected-icon-color: var(--gray-dark);--mdc-checkbox-selected-icon-color: var(--info)}.table-container .mat-mdc-table .mat-mdc-footer-row{background-color:var(--table-background);font-weight:600;color:var(--input-disabled-bg)}.table-container .mat-mdc-table .mat-mdc-footer-row .mat-mdc-footer-cell{padding:12px;text-align:left;color:var(--gray-dark)}.table-container span,.table-container img{margin-right:10px}.table-container[_ngcontent-ng-c1530403114] .mat-mdc-table[_ngcontent-ng-c1530403114] .mat-mdc-footer-row[_ngcontent-ng-c1530403114]{display:none}.no-data-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;font-size:1.1rem}.no-data-container .no-data-title{color:var(--table-header);margin-bottom:12px}.no-data-container .no-data-message{color:var(--table-header)}@media(max-width:768px){.table-container .table-controls{flex-direction:column;align-items:stretch}.table-container .table-controls .filter-field{margin-right:0;margin-bottom:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
1691
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BaseTable, isStandalone: true, selector: "cao-table", inputs: { customClass: "customClass", pageSizeOptions: "pageSizeOptions", showFirstLastButtons: "showFirstLastButtons", isPaginatedByServer: "isPaginatedByServer" }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", firstPageClicked: "firstPageClicked", lastPageClicked: "lastPageClicked", selectionChanged: "selectionChanged", pageEvent: "pageEvent" }, providers: [{ provide: MatPaginatorIntl, useValue: getPtBrPaginatorIntlBaseTable() }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"customClass\">\n @if (tableConfig) {\n <div class=\"table-controls\">\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </div>\n\n <table\n mat-table\n matSort\n class=\"mat-elevation-z8\"\n [dataSource]=\"dataSource\"\n (matSortChange)=\"announceSortChange($event)\">\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox\n data-cy=\"checkbox-select-all\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n (change)=\"$event ? toggleAllRows() : null\" />\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-select-row-' + row.id\"\n [checked]=\"selection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\" />\n </td>\n </ng-container>\n\n @for (column of displayedColumns; track column) {\n <ng-container [matColumnDef]=\"column\">\n <th *matHeaderCellDef mat-header-cell [mat-sort-header]=\"column\">\n <span>{{ getColumnHeader(column) }}</span>\n <img\n alt=\"icone\"\n [ngSrc]=\"'.src/assets/svg/arrow-left-double.svg'\"\n [fill]=\"true\"\n [matMenuTriggerFor]=\"menuColunas\" />\n <mat-menu #menuColunas=\"matMenu\">\n @for (column of allColumns; track column) {\n <button\n mat-menu-item\n [type]=\"'button'\" (click)=\"toggleColumnVisibility(column)\">\n <mat-checkbox\n [attr.data-cy]=\"'checkbox-toggle-column-' + column\"\n [checked]=\"isColumnVisible(column)\">\n {{ getColumnHeader(column) }}\n </mat-checkbox>\n </button>\n }\n </mat-menu>\n </th>\n <td *matCellDef=\"let element\" mat-cell>\n @switch (getColumnType(column)) { @case ('STRING') {\n <span>{{ element[getColumnElement(column)] }}</span>\n } @case ('BOOLEAN') {\n <mat-checkbox\n disabled\n [attr.data-cy]=\"'checkbox-value-' + column + '-' + element.id\"\n [checked]=\"element[getColumnElement(column)]\" />\n } @case ('DATE') {\n <span>{{ element[getColumnElement(column)] | date:'mediumDate' }}</span>\n } @case ('NUMBER') {\n <span>{{ element[getColumnElement(column)] | number:'1.2-2' }}</span>\n } @case ('SINGLE_BUTTON') {\n <div>\n @for (btn of getColumnButtons(column); track btn) {\n <button\n mat-icon-button\n [type]=\"'button'\" [matTooltip]=\"btn.tooltip\" (click)=\"btn.onClick(element)\">\n <mat-icon>{{ btn.icon }}</mat-icon>\n </button>\n }\n </div>\n } @default {\n <span>{{ element[getColumnElement(column)] }}</span>\n } }\n </td>\n </ng-container>\n }\n\n <ng-container matColumnDef=\"footer\">\n <td *matFooterCellDef mat-footer-cell [attr.colspan]=\"displayedColumns.length + 1\">\n Total de Registros: {{ dataSource.data.length }}\n </td>\n </ng-container>\n\n <tr *matHeaderRowDef=\"getAllColumns()\" mat-header-row></tr>\n <tr\n *matRowDef=\"let row; columns: getAllColumns();\"\n mat-row\n (click)=\"selection.toggle(row)\"></tr>\n <tr *matFooterRowDef=\"['footer']\" mat-footer-row></tr>\n </table>\n }\n</div>\n\n<mat-paginator\n #paginator\n aria-label=\"Select page\"\n [length]=\"totalItems\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageIndex]=\"currentPage - 1\"\n [hidePageSize]=\"false\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n (page)=\"onPageEvent($event)\" />\n\n@if (!tableConfig || tableConfig.data.length === 0) {\n<div class=\"no-data-container\">\n <h2 class=\"no-data-title\">{{ tableConfig?.result?.noData || 'N\u00E3o h\u00E1 dados dispon\u00EDveis' }}</h2>\n <p class=\"no-data-message\"\n >{{ tableConfig?.result?.defaultMessage || 'Adicione alguns dados' }}</p\n >\n</div>\n}\n", styles: [".table-container{border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:100%;overflow:auto hidden}.table-container .table-controls{display:flex;align-items:center;padding:20px}.table-container .table-controls .filter-field{display:flex;align-items:center;justify-content:space-between;padding:10px;flex-direction:row;border:none;border-radius:10px;background-color:var(--input-disabled-bg);width:50%;height:55px}.table-container .table-controls .filter-field input:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}.table-container .table-controls .filter-field .input-filter{width:100%;box-sizing:border-box;background-color:transparent;border:none;transition:none}.table-container .table-controls .filter-field i{color:var(--icon-collor);margin-left:8px}.table-container .mat-mdc-table{width:max-content;min-width:100%;background-color:var(--table-body-color)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{border-right:none!important}.table-container .mat-mdc-table .mat-mdc-header-cell:not(:first-child),.table-container .mat-mdc-table .mat-mdc-cell:not(:first-child){border-right:1px solid var(--primary)}.table-container .mat-mdc-table .mat-mdc-header-cell:first-child,.table-container .mat-mdc-table .mat-mdc-cell:first-child{width:60px;max-width:60px;min-width:60px;border-right:none}.table-container .mat-mdc-table .mat-mdc-header-row{background-color:var(--table-header)}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell{border-right:1px solid var(--white);font-weight:600;color:var(--white);border-bottom:1px solid var(--input-background);text-transform:uppercase;font-size:.875rem}.table-container .mat-mdc-table .mat-mdc-header-row .mat-mdc-header-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row{transition:background-color .2s ease}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell{border-right:1px solid var(--primary);color:var(--gray-dark);border-bottom:1px solid var(--input-background)}.table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell:last-child{border-right:none}.table-container .mat-mdc-table .mat-mdc-row:hover{background-color:#0000000a}.table-container .mat-mdc-table .mat-mdc-row.selected{background-color:#3f51b51a}.table-container .mat-mdc-table .mat-mdc-checkbox{margin-right:12px}.table-container .mat-mdc-table .mat-mdc-checkbox .mdc-checkbox{--mdc-checkbox-unselected-icon-color: var(--gray-dark);--mdc-checkbox-selected-icon-color: var(--info)}.table-container .mat-mdc-table .mat-mdc-footer-row{background-color:var(--table-background);font-weight:600;color:var(--input-disabled-bg)}.table-container .mat-mdc-table .mat-mdc-footer-row .mat-mdc-footer-cell{padding:12px;text-align:left;color:var(--gray-dark)}.table-container span,.table-container img{margin-right:10px}.table-container[_ngcontent-ng-c1530403114] .mat-mdc-table[_ngcontent-ng-c1530403114] .mat-mdc-footer-row[_ngcontent-ng-c1530403114]{display:none}.no-data-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;font-size:1.1rem}.no-data-container .no-data-title{color:var(--table-header);margin-bottom:12px}.no-data-container .no-data-message{color:var(--table-header)}@media(max-width:768px){.table-container .table-controls{flex-direction:column;align-items:stretch}.table-container .table-controls .filter-field{margin-right:0;margin-bottom:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.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" }] });
|
|
1688
1692
|
}
|
|
1689
1693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTable, decorators: [{
|
|
1690
1694
|
type: Component,
|
|
@@ -2147,7 +2151,7 @@ class BaseTablePaginated {
|
|
|
2147
2151
|
return this.tableConfig.columnData[column].buttons || [];
|
|
2148
2152
|
}
|
|
2149
2153
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTablePaginated, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2150
|
-
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 });
|
|
2154
|
+
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$1.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 });
|
|
2151
2155
|
}
|
|
2152
2156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseTablePaginated, decorators: [{
|
|
2153
2157
|
type: Component,
|
|
@@ -2236,6 +2240,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2236
2240
|
}]
|
|
2237
2241
|
}], ctorParameters: () => [{ type: i1$4.Overlay }] });
|
|
2238
2242
|
|
|
2243
|
+
class StepComponent {
|
|
2244
|
+
title = "";
|
|
2245
|
+
isActive = false;
|
|
2246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2247
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: StepComponent, isStandalone: true, selector: "cao-step", inputs: { title: "title", isActive: "isActive" }, ngImport: i0, template: "<div class=\"step d-flex aic jcc\" [ngClass]=\"{'active': isActive}\"> {{ title }} </div>\n", styles: [".step{width:44px;height:44px;border-radius:100%;font-size:18px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2248
|
+
}
|
|
2249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepComponent, decorators: [{
|
|
2250
|
+
type: Component,
|
|
2251
|
+
args: [{ selector: "cao-step", standalone: true, imports: [CommonModule], template: "<div class=\"step d-flex aic jcc\" [ngClass]=\"{'active': isActive}\"> {{ title }} </div>\n", styles: [".step{width:44px;height:44px;border-radius:100%;font-size:18px;font-weight:700}\n"] }]
|
|
2252
|
+
}], propDecorators: { title: [{
|
|
2253
|
+
type: Input
|
|
2254
|
+
}], isActive: [{
|
|
2255
|
+
type: Input
|
|
2256
|
+
}] } });
|
|
2257
|
+
|
|
2258
|
+
class StepperComponent {
|
|
2259
|
+
constructor() { }
|
|
2260
|
+
steps;
|
|
2261
|
+
title;
|
|
2262
|
+
activeStepIndex = 0;
|
|
2263
|
+
lengthStep = 0;
|
|
2264
|
+
showLine = true;
|
|
2265
|
+
maxReachedEvent = new EventEmitter();
|
|
2266
|
+
ngAfterContentInit() {
|
|
2267
|
+
if (this.steps.length > 0) {
|
|
2268
|
+
this.steps.toArray()[0].isActive = true;
|
|
2269
|
+
this.lengthStep = this.steps.length;
|
|
2270
|
+
}
|
|
2271
|
+
}
|
|
2272
|
+
nextStep() {
|
|
2273
|
+
if (this.steps.length > 0) {
|
|
2274
|
+
if (this.activeStepIndex < this.steps.length - 1) {
|
|
2275
|
+
this.activeStepIndex++;
|
|
2276
|
+
this.steps.toArray()[this.activeStepIndex].isActive = true;
|
|
2277
|
+
}
|
|
2278
|
+
else {
|
|
2279
|
+
this.maxReachedEvent.emit(null);
|
|
2280
|
+
}
|
|
2281
|
+
}
|
|
2282
|
+
}
|
|
2283
|
+
prevStep() {
|
|
2284
|
+
if (this.steps.length > 0) {
|
|
2285
|
+
if (this.activeStepIndex > 0) {
|
|
2286
|
+
this.steps.toArray()[this.activeStepIndex].isActive = false;
|
|
2287
|
+
this.activeStepIndex--;
|
|
2288
|
+
this.steps.toArray()[this.activeStepIndex].isActive = true;
|
|
2289
|
+
}
|
|
2290
|
+
}
|
|
2291
|
+
}
|
|
2292
|
+
resetStepper() {
|
|
2293
|
+
this.activeStepIndex = 0;
|
|
2294
|
+
this.steps.forEach((step) => (step.isActive = false));
|
|
2295
|
+
if (this.steps.length > 0) {
|
|
2296
|
+
this.steps.toArray()[0].isActive = true;
|
|
2297
|
+
}
|
|
2298
|
+
}
|
|
2299
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2300
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: StepperComponent, isStandalone: true, selector: "cao-stepper", inputs: { title: "title" }, outputs: { maxReachedEvent: "maxReachedEvent" }, queries: [{ propertyName: "steps", predicate: StepComponent }], ngImport: i0, template: "@if(title){\n<h3 class=\"stepper-title\">{{ title }}</h3>\n}\n<div class=\"d-flex step-container aic jcsb\">\n @if (showLine) {\n <div class=\"line\"></div>\n }\n <div class=\"steps d-flex aic jcsb\">\n <ng-content />\n </div>\n</div>\n", styles: [".step-container{position:relative}.steps{z-index:2;gap:24px}.line{width:100%;position:absolute;top:50%;height:1.5px;background-color:var(--return-color);z-index:1}\n"] });
|
|
2301
|
+
}
|
|
2302
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepperComponent, decorators: [{
|
|
2303
|
+
type: Component,
|
|
2304
|
+
args: [{ selector: "cao-stepper", standalone: true, template: "@if(title){\n<h3 class=\"stepper-title\">{{ title }}</h3>\n}\n<div class=\"d-flex step-container aic jcsb\">\n @if (showLine) {\n <div class=\"line\"></div>\n }\n <div class=\"steps d-flex aic jcsb\">\n <ng-content />\n </div>\n</div>\n", styles: [".step-container{position:relative}.steps{z-index:2;gap:24px}.line{width:100%;position:absolute;top:50%;height:1.5px;background-color:var(--return-color);z-index:1}\n"] }]
|
|
2305
|
+
}], ctorParameters: () => [], propDecorators: { steps: [{
|
|
2306
|
+
type: ContentChildren,
|
|
2307
|
+
args: [StepComponent]
|
|
2308
|
+
}], title: [{
|
|
2309
|
+
type: Input
|
|
2310
|
+
}], maxReachedEvent: [{
|
|
2311
|
+
type: Output
|
|
2312
|
+
}] } });
|
|
2313
|
+
|
|
2239
2314
|
/*
|
|
2240
2315
|
* Public API Surface of ngx-opalbytes-components
|
|
2241
2316
|
*/
|
|
@@ -2244,5 +2319,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2244
2319
|
* Generated bundle index. Do not edit.
|
|
2245
2320
|
*/
|
|
2246
2321
|
|
|
2247
|
-
export { BaseAlert, BaseAlertService,
|
|
2322
|
+
export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseInput, CaoDropDownComponent, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
|
|
2248
2323
|
//# sourceMappingURL=ngx-opalbytes-components.mjs.map
|