ngx-opalbytes-components 1.14.0 → 1.15.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.
package/README.md
CHANGED
|
@@ -123,7 +123,9 @@ Um botão customizável com suporte a ícones, estado de loading e tooltip.
|
|
|
123
123
|
| `trailingIcon` | `string` | `undefined` | Ícone a ser exibido após o texto. |
|
|
124
124
|
| `leadingIcon` | `string` | `undefined` | Ícone a ser exibido antes do texto. |
|
|
125
125
|
| `isLucideIcon` | `boolean` | `true` | Define se o ícone é do pacote Lucide. |
|
|
126
|
+
| `iconColor` | `string` | `undefined` | Cor aplicada aos ícones SVG Lucide. |
|
|
126
127
|
| `dataCy` | `string` | `undefined` | Atributo para testes E2E com Cypress. |
|
|
128
|
+
| `strokeWidthIcon` | `number` | `1` | Define a espessura (stroke width) do ícone. |
|
|
127
129
|
|
|
128
130
|
**Eventos (Outputs)**
|
|
129
131
|
|
|
@@ -448,6 +450,8 @@ Um campo de preenchimento automático que funciona com `ngModel` ou `formControl
|
|
|
448
450
|
| `optionIcon` | `string` | `undefined` | Ícone exibido dentro de cada opção do dropdown. |
|
|
449
451
|
| `optionIConColor` | `string` | `undefined` | Cor do ícone das opções. |
|
|
450
452
|
| `isLucideOptionIcon` | `boolean` | `undefined` | Define se `optionIcon` é um ícone Lucide. |
|
|
453
|
+
| `autocompleteBgColor` | `string` | `'white'` | Cor de fundo do painel de autocomplete. |
|
|
454
|
+
| `strokeWidthIcon` | `number` | `1` | Define a espessura (stroke width) do ícone. |
|
|
451
455
|
|
|
452
456
|
**Eventos (Outputs)**
|
|
453
457
|
|
|
@@ -15,8 +15,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
|
|
|
15
15
|
import * as i4 from '@angular/material/input';
|
|
16
16
|
import { MatInputModule } from '@angular/material/input';
|
|
17
17
|
import * as i5 from '@angular/material/autocomplete';
|
|
18
|
-
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
19
|
-
import { startWith, map, Subject
|
|
18
|
+
import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
|
|
19
|
+
import { BehaviorSubject, combineLatest, startWith, map, Subject } from 'rxjs';
|
|
20
20
|
import * as i4$1 from '@angular/material/icon';
|
|
21
21
|
import { MatIconModule } from '@angular/material/icon';
|
|
22
22
|
import { Router, ActivatedRoute } from '@angular/router';
|
|
@@ -72,6 +72,7 @@ class CaoBaseButtonComponent {
|
|
|
72
72
|
isLucideIcon = true;
|
|
73
73
|
dataCy;
|
|
74
74
|
iconColor;
|
|
75
|
+
strokeWidthIcon = 1;
|
|
75
76
|
ngOnInit() {
|
|
76
77
|
if (!this.dataCy) {
|
|
77
78
|
this.dataCy = `btn-${this.buttonText.replace(/\s+/g, '-').toLowerCase()}`;
|
|
@@ -86,11 +87,11 @@ class CaoBaseButtonComponent {
|
|
|
86
87
|
}
|
|
87
88
|
}
|
|
88
89
|
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
|
+
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", strokeWidthIcon: "strokeWidthIcon" }, 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\" [strokeWidth]=\"strokeWidthIcon\"></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\" [strokeWidth]=\"strokeWidthIcon\"></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}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\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
91
|
}
|
|
91
92
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseButtonComponent, decorators: [{
|
|
92
93
|
type: Component,
|
|
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
|
+
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\" [strokeWidth]=\"strokeWidthIcon\"></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\" [strokeWidth]=\"strokeWidthIcon\"></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}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"] }]
|
|
94
95
|
}], propDecorators: { buttonClick: [{
|
|
95
96
|
type: Output
|
|
96
97
|
}], buttonText: [{
|
|
@@ -115,6 +116,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
115
116
|
type: Input
|
|
116
117
|
}], iconColor: [{
|
|
117
118
|
type: Input
|
|
119
|
+
}], strokeWidthIcon: [{
|
|
120
|
+
type: Input
|
|
118
121
|
}] } });
|
|
119
122
|
|
|
120
123
|
class CaoBaseInput {
|
|
@@ -213,7 +216,7 @@ class CaoBaseInput {
|
|
|
213
216
|
multi: true,
|
|
214
217
|
},
|
|
215
218
|
provideNgxMask(),
|
|
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]
|
|
219
|
+
], 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) { \n @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 } \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].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"] }] });
|
|
217
220
|
}
|
|
218
221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseInput, decorators: [{
|
|
219
222
|
type: Component,
|
|
@@ -224,7 +227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
224
227
|
multi: true,
|
|
225
228
|
},
|
|
226
229
|
provideNgxMask(),
|
|
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]
|
|
230
|
+
], 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) { \n @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 } \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].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"] }]
|
|
228
231
|
}], propDecorators: { type: [{
|
|
229
232
|
type: Input
|
|
230
233
|
}], placeholder: [{
|
|
@@ -362,48 +365,121 @@ class CaoAutocompleteComponent {
|
|
|
362
365
|
optionIcon;
|
|
363
366
|
optionIConColor;
|
|
364
367
|
isLucideOptionIcon;
|
|
368
|
+
autocompleteBgColor = 'white';
|
|
369
|
+
strokeWidthIcon = 1;
|
|
370
|
+
isDisabled = false;
|
|
365
371
|
itemSelected = new EventEmitter();
|
|
366
372
|
blurEvent = new EventEmitter();
|
|
367
373
|
focusEvent = new EventEmitter();
|
|
374
|
+
leadingIconClick = new EventEmitter();
|
|
375
|
+
trailingIconClick = new EventEmitter();
|
|
376
|
+
autocompleteTrigger;
|
|
368
377
|
internalControl = new FormControl("");
|
|
369
378
|
filteredOptions$;
|
|
370
379
|
isFocused = false;
|
|
371
380
|
icon = false;
|
|
381
|
+
selectedOption = null;
|
|
382
|
+
options$ = new BehaviorSubject([]);
|
|
372
383
|
el = inject(ElementRef);
|
|
373
384
|
onChange = () => { };
|
|
374
385
|
onTouched = () => { };
|
|
375
386
|
ngOnInit() {
|
|
376
|
-
this.filteredOptions$ =
|
|
387
|
+
this.filteredOptions$ = combineLatest([
|
|
388
|
+
this.internalControl.valueChanges.pipe(startWith("")),
|
|
389
|
+
this.options$,
|
|
390
|
+
]).pipe(map(([value]) => this.filter(value || "")));
|
|
377
391
|
this.control.valueChanges.subscribe((value) => {
|
|
378
392
|
const displayValue = value && typeof value === "object" ? this.displayFn(value) : value;
|
|
379
393
|
this.internalControl.setValue(displayValue, { emitEvent: false });
|
|
394
|
+
this.selectedOption = value && typeof value === "object" ? value : null;
|
|
380
395
|
});
|
|
396
|
+
this.setStyle();
|
|
397
|
+
}
|
|
398
|
+
setStyle() {
|
|
399
|
+
this.el.nativeElement.style.setProperty('--autocomplete-bg-color', this.autocompleteBgColor);
|
|
400
|
+
}
|
|
401
|
+
ngOnChanges(changes) {
|
|
402
|
+
if (changes['options']) {
|
|
403
|
+
this.options$.next(changes['options'].currentValue ?? []);
|
|
404
|
+
}
|
|
381
405
|
}
|
|
382
406
|
onFocus() {
|
|
383
407
|
this.isFocused = true;
|
|
384
408
|
this.focusEvent.emit();
|
|
385
409
|
this.onTouched();
|
|
410
|
+
const currentDisplay = this.internalControl.value;
|
|
411
|
+
this.internalControl.setValue("", { emitEvent: true });
|
|
412
|
+
if (currentDisplay) {
|
|
413
|
+
this.internalControl.setValue(currentDisplay, { emitEvent: false });
|
|
414
|
+
}
|
|
415
|
+
setTimeout(() => {
|
|
416
|
+
this.autocompleteTrigger?.openPanel();
|
|
417
|
+
}, 0);
|
|
386
418
|
}
|
|
387
419
|
onBlur() {
|
|
388
420
|
this.isFocused = false;
|
|
389
421
|
this.blurEvent.emit();
|
|
390
422
|
this.onTouched();
|
|
391
423
|
}
|
|
424
|
+
selectItem(option) {
|
|
425
|
+
this.selectedOption = option;
|
|
426
|
+
this.onChange(option);
|
|
427
|
+
this.itemSelected.emit(option);
|
|
428
|
+
}
|
|
392
429
|
onOptionSelected(event) {
|
|
393
|
-
this.
|
|
394
|
-
this.
|
|
430
|
+
this.selectItem(event.option.value);
|
|
431
|
+
this.onTouched();
|
|
432
|
+
this.closePanel();
|
|
433
|
+
}
|
|
434
|
+
selectOption(option) {
|
|
435
|
+
this.internalControl.setValue(this.displayFn(option), { emitEvent: false });
|
|
436
|
+
this.selectItem(option);
|
|
437
|
+
this.closePanel();
|
|
438
|
+
}
|
|
439
|
+
closePanel() {
|
|
440
|
+
setTimeout(() => {
|
|
441
|
+
this.autocompleteTrigger?.closePanel();
|
|
442
|
+
this.el.nativeElement.querySelector('input')?.blur();
|
|
443
|
+
}, 10);
|
|
444
|
+
}
|
|
445
|
+
clearSelection() {
|
|
446
|
+
this.selectedOption = null;
|
|
447
|
+
this.internalControl.setValue("", { emitEvent: false });
|
|
448
|
+
this.control.setValue(null, { emitEvent: true });
|
|
449
|
+
this.onChange(null);
|
|
395
450
|
this.onTouched();
|
|
451
|
+
setTimeout(() => {
|
|
452
|
+
this.autocompleteTrigger?.closePanel();
|
|
453
|
+
}, 0);
|
|
454
|
+
}
|
|
455
|
+
onLeadingIconClick(event) {
|
|
456
|
+
event.stopPropagation();
|
|
457
|
+
this.leadingIconClick.emit(event);
|
|
458
|
+
}
|
|
459
|
+
onTrailingIconClick(event) {
|
|
460
|
+
event.stopPropagation();
|
|
461
|
+
this.trailingIconClick.emit(event);
|
|
396
462
|
}
|
|
397
463
|
filter(value) {
|
|
398
464
|
const filterValue = (typeof value === "string" ? value : value?.nome)?.toLowerCase() || "";
|
|
399
|
-
|
|
465
|
+
const currentOptions = this.options$.getValue();
|
|
466
|
+
if (!currentOptions?.length) {
|
|
400
467
|
return [];
|
|
401
468
|
}
|
|
402
|
-
|
|
469
|
+
const matched = currentOptions.filter((option) => {
|
|
403
470
|
const nomeMatch = option.nome.toLowerCase().includes(filterValue);
|
|
404
471
|
const idMatch = option.id?.toString().toLowerCase().includes(filterValue);
|
|
405
472
|
return nomeMatch || idMatch;
|
|
406
473
|
});
|
|
474
|
+
if (!filterValue && this.selectedOption) {
|
|
475
|
+
const selectedId = this.selectedOption.id;
|
|
476
|
+
const selectedIndex = matched.findIndex((o) => o.id === selectedId);
|
|
477
|
+
if (selectedIndex > 0) {
|
|
478
|
+
const [selected] = matched.splice(selectedIndex, 1);
|
|
479
|
+
matched.unshift(selected);
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
return matched;
|
|
407
483
|
}
|
|
408
484
|
displayFn(option) {
|
|
409
485
|
return option && option.nome ? option.nome : "";
|
|
@@ -451,6 +527,7 @@ class CaoAutocompleteComponent {
|
|
|
451
527
|
writeValue(value) {
|
|
452
528
|
const displayValue = value && typeof value === "object" ? this.displayFn(value) : value;
|
|
453
529
|
this.internalControl.setValue(displayValue, { emitEvent: false });
|
|
530
|
+
this.selectedOption = value && typeof value === "object" ? value : null;
|
|
454
531
|
}
|
|
455
532
|
registerOnChange(fn) {
|
|
456
533
|
this.onChange = fn;
|
|
@@ -459,16 +536,16 @@ class CaoAutocompleteComponent {
|
|
|
459
536
|
this.onTouched = fn;
|
|
460
537
|
}
|
|
461
538
|
setInputHeight(height) {
|
|
462
|
-
this.el.nativeElement.style.setProperty(
|
|
539
|
+
this.el.nativeElement.style.setProperty("--form-field-height", height);
|
|
463
540
|
}
|
|
464
541
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
465
|
-
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", optionIcon: "optionIcon", optionIConColor: "optionIConColor", isLucideOptionIcon: "isLucideOptionIcon" }, outputs: { itemSelected: "itemSelected", blurEvent: "blurEvent", focusEvent: "focusEvent" }, providers: [
|
|
542
|
+
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", optionIcon: "optionIcon", optionIConColor: "optionIConColor", isLucideOptionIcon: "isLucideOptionIcon", autocompleteBgColor: "autocompleteBgColor", strokeWidthIcon: "strokeWidthIcon", isDisabled: "isDisabled" }, outputs: { itemSelected: "itemSelected", blurEvent: "blurEvent", focusEvent: "focusEvent", leadingIconClick: "leadingIconClick", trailingIconClick: "trailingIconClick" }, providers: [
|
|
466
543
|
{
|
|
467
544
|
provide: NG_VALUE_ACCESSOR,
|
|
468
545
|
useExisting: forwardRef(() => CaoAutocompleteComponent),
|
|
469
546
|
multi: true,
|
|
470
547
|
},
|
|
471
|
-
], ngImport: i0, template: "<div class=\"form-field\">\n @if (label) {\n
|
|
548
|
+
], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field\">\n @if (label) {\n <label [for]=\"internalControl\">{{ label }}</label>\n }\n <mat-form-field appearance=\"outline\" class=\"rnv-autocomplete-mat-form-field autocomplete\">\n <div\n class=\"input-wrapper\"\n [class.has-leading-icon]=\"_leadingIcon\"\n [class.has-trailing-icon]=\"_trailingIcon\"\n [class.focused]=\"isFocused\">\n\n @if (_leadingIcon) {\n @if (isLucideIcon) {\n <div class=\"icon\" \n tabindex=\"0\"\n (click)=\"onLeadingIconClick($event)\"\n (keydown.enter)=\"onLeadingIconClick($event)\"\n >\n <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\" \n tabindex=\"0\"\n (click)=\"onLeadingIconClick($event)\"\n (keydown.enter)=\"onLeadingIconClick($event)\"\n >\n <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n </div>\n }\n }\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n type=\"text\"\n matInput\n [placeholder]=\"placeholder\"\n [disabled]=\"isDisabled\"\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\n @if (_trailingIcon) {\n @if (isLucideIcon) {\n <div \n tabindex=\"0\"\n class=\"icon trailing-icon\" (click)=\"onTrailingIconClick($event)\"\n (keydown.enter)=\"onTrailingIconClick($event)\"\n >\n <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div \n tabindex=\"0\"\n class=\"icon trailing-icon\" (click)=\"onTrailingIconClick($event)\"\n (keydown.enter)=\"onTrailingIconClick($event)\"\n >\n <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n </div>\n }\n }\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 class=\"option-item\" [value]=\"option\">\n {{ option.nome }}\n @if (optionIcon) {\n @if (isLucideOptionIcon) {\n <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"optionIcon\" [style.color]=\"iconColor\"></svg>\n } @else {\n <img alt=\"\" [src]=\"optionIcon\" />\n }\n }\n </mat-option>\n }\n </mat-autocomplete>\n\n </div>\n </mat-form-field>\n</div>", styles: ["@charset \"UTF-8\";:host{--mat-form-field-container-height: stretch;--mat-autocomplete-background-color: var(--autocomplete-bg-color, white);display:block}::ng-deep .rnv-autocomplete-mat-form-field{--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent;--mat-form-field-outlined-focus-outline-color: transparent}.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}::ng-deep .rnv-autocomplete-mat-form-field .mdc-list-item__primary-text{width:100%;display:flex;align-items:center;justify-content:space-between}.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-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 });
|
|
472
549
|
}
|
|
473
550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, decorators: [{
|
|
474
551
|
type: Component,
|
|
@@ -485,7 +562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
485
562
|
useExisting: forwardRef(() => CaoAutocompleteComponent),
|
|
486
563
|
multi: true,
|
|
487
564
|
},
|
|
488
|
-
], template: "<div class=\"form-field\">\n @if (label) {\n
|
|
565
|
+
], template: "<div class=\"form-field\">\n @if (label) {\n <label [for]=\"internalControl\">{{ label }}</label>\n }\n <mat-form-field appearance=\"outline\" class=\"rnv-autocomplete-mat-form-field autocomplete\">\n <div\n class=\"input-wrapper\"\n [class.has-leading-icon]=\"_leadingIcon\"\n [class.has-trailing-icon]=\"_trailingIcon\"\n [class.focused]=\"isFocused\">\n\n @if (_leadingIcon) {\n @if (isLucideIcon) {\n <div class=\"icon\" \n tabindex=\"0\"\n (click)=\"onLeadingIconClick($event)\"\n (keydown.enter)=\"onLeadingIconClick($event)\"\n >\n <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\" \n tabindex=\"0\"\n (click)=\"onLeadingIconClick($event)\"\n (keydown.enter)=\"onLeadingIconClick($event)\"\n >\n <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n </div>\n }\n }\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n type=\"text\"\n matInput\n [placeholder]=\"placeholder\"\n [disabled]=\"isDisabled\"\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\n @if (_trailingIcon) {\n @if (isLucideIcon) {\n <div \n tabindex=\"0\"\n class=\"icon trailing-icon\" (click)=\"onTrailingIconClick($event)\"\n (keydown.enter)=\"onTrailingIconClick($event)\"\n >\n <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div \n tabindex=\"0\"\n class=\"icon trailing-icon\" (click)=\"onTrailingIconClick($event)\"\n (keydown.enter)=\"onTrailingIconClick($event)\"\n >\n <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n </div>\n }\n }\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 class=\"option-item\" [value]=\"option\">\n {{ option.nome }}\n @if (optionIcon) {\n @if (isLucideOptionIcon) {\n <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"optionIcon\" [style.color]=\"iconColor\"></svg>\n } @else {\n <img alt=\"\" [src]=\"optionIcon\" />\n }\n }\n </mat-option>\n }\n </mat-autocomplete>\n\n </div>\n </mat-form-field>\n</div>", styles: ["@charset \"UTF-8\";:host{--mat-form-field-container-height: stretch;--mat-autocomplete-background-color: var(--autocomplete-bg-color, white);display:block}::ng-deep .rnv-autocomplete-mat-form-field{--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent;--mat-form-field-outlined-focus-outline-color: transparent}.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}::ng-deep .rnv-autocomplete-mat-form-field .mdc-list-item__primary-text{width:100%;display:flex;align-items:center;justify-content:space-between}.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-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"] }]
|
|
489
566
|
}], propDecorators: { label: [{
|
|
490
567
|
type: Input
|
|
491
568
|
}], placeholder: [{
|
|
@@ -512,12 +589,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
512
589
|
type: Input
|
|
513
590
|
}], isLucideOptionIcon: [{
|
|
514
591
|
type: Input
|
|
592
|
+
}], autocompleteBgColor: [{
|
|
593
|
+
type: Input
|
|
594
|
+
}], strokeWidthIcon: [{
|
|
595
|
+
type: Input
|
|
596
|
+
}], isDisabled: [{
|
|
597
|
+
type: Input
|
|
515
598
|
}], itemSelected: [{
|
|
516
599
|
type: Output
|
|
517
600
|
}], blurEvent: [{
|
|
518
601
|
type: Output
|
|
519
602
|
}], focusEvent: [{
|
|
520
603
|
type: Output
|
|
604
|
+
}], leadingIconClick: [{
|
|
605
|
+
type: Output
|
|
606
|
+
}], trailingIconClick: [{
|
|
607
|
+
type: Output
|
|
608
|
+
}], autocompleteTrigger: [{
|
|
609
|
+
type: ViewChild,
|
|
610
|
+
args: [MatAutocompleteTrigger]
|
|
521
611
|
}] } });
|
|
522
612
|
|
|
523
613
|
class CaoDropDownComponent {
|