ngx-opalbytes-components 1.13.0 → 1.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -85,6 +85,7 @@ src/
|
|
|
85
85
|
| ├── base-button/
|
|
86
86
|
| ├── base-input/
|
|
87
87
|
| ├── base-time-range/
|
|
88
|
+
| ├── base-toggle/
|
|
88
89
|
| ├── drop-down/
|
|
89
90
|
| ├── footer/
|
|
90
91
|
| ├── links-button/
|
|
@@ -122,7 +123,9 @@ Um botão customizável com suporte a ícones, estado de loading e tooltip.
|
|
|
122
123
|
| `trailingIcon` | `string` | `undefined` | Ícone a ser exibido após o texto. |
|
|
123
124
|
| `leadingIcon` | `string` | `undefined` | Ícone a ser exibido antes do texto. |
|
|
124
125
|
| `isLucideIcon` | `boolean` | `true` | Define se o ícone é do pacote Lucide. |
|
|
126
|
+
| `iconColor` | `string` | `undefined` | Cor aplicada aos ícones SVG Lucide. |
|
|
125
127
|
| `dataCy` | `string` | `undefined` | Atributo para testes E2E com Cypress. |
|
|
128
|
+
| `strokeWidthIcon` | `number` | `1` | Define a espessura (stroke width) do ícone. |
|
|
126
129
|
|
|
127
130
|
**Eventos (Outputs)**
|
|
128
131
|
|
|
@@ -421,16 +424,54 @@ Um campo de preenchimento automático que funciona com `ngModel` ou `formControl
|
|
|
421
424
|
|
|
422
425
|
**Seletor:** `<cao-autocomplete>`
|
|
423
426
|
|
|
427
|
+
**Interface `ICaoAutoCompleteOption`**
|
|
428
|
+
|
|
429
|
+
| Propriedade | Tipo | Descrição |
|
|
430
|
+
| --- | --- | --- |
|
|
431
|
+
| `id` | `string \| number` | (Opcional) Identificador único da opção. |
|
|
432
|
+
| `nome` | `string` | Texto exibido (usado para filtro e exibição). |
|
|
433
|
+
| `icon` | `string` | (Opcional) Caminho ou nome do ícone. |
|
|
434
|
+
| `iconPosition` | `string` | (Opcional) Posição do ícone na opção. |
|
|
435
|
+
|
|
424
436
|
**Atributos (Inputs)**
|
|
425
437
|
|
|
426
|
-
| Atributo | Tipo | Descrição |
|
|
438
|
+
| Atributo | Tipo | Padrão | Descrição |
|
|
439
|
+
| --- | --- | --- | --- |
|
|
440
|
+
| `label` | `string` | `''` | O rótulo do campo. |
|
|
441
|
+
| `placeholder` | `string` | `''` | O texto de placeholder. |
|
|
442
|
+
| `options` | `ICaoAutoCompleteOption[]` | `[]` | A lista de opções para o autocomplete. |
|
|
443
|
+
| `control` | `AbstractControl` | `new FormControl()` | O `FormControl` associado. |
|
|
444
|
+
| `controlName` | `string` | `''` | O nome do controle de formulário. |
|
|
445
|
+
| `dataCy` | `string` | `''` | Atributo para testes E2E. |
|
|
446
|
+
| `isLucideIcon` | `boolean` | `false` | Define se `leadingIcon`/`trailingIcon` são ícones Lucide. |
|
|
447
|
+
| `iconColor` | `string` | `''` | Cor aplicada aos ícones SVG Lucide. |
|
|
448
|
+
| `leadingIcon` | `string` | `undefined` | Ícone exibido antes do texto. |
|
|
449
|
+
| `trailingIcon` | `string` | `undefined` | Ícone exibido após o texto. |
|
|
450
|
+
| `optionIcon` | `string` | `undefined` | Ícone exibido dentro de cada opção do dropdown. |
|
|
451
|
+
| `optionIConColor` | `string` | `undefined` | Cor do ícone das opções. |
|
|
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. |
|
|
455
|
+
|
|
456
|
+
**Eventos (Outputs)**
|
|
457
|
+
|
|
458
|
+
| Evento | Tipo | Descrição |
|
|
427
459
|
| --- | --- | --- |
|
|
428
|
-
| `
|
|
429
|
-
| `
|
|
430
|
-
| `
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
460
|
+
| `OnItemSelected` | `EventEmitter<ICaoAutoCompleteOption>` | Emitido quando uma opção é selecionada. |
|
|
461
|
+
| `OnBlur` | `EventEmitter<void>` | Emitido quando o campo perde o foco. |
|
|
462
|
+
| `OnFocus` | `EventEmitter<void>` | Emitido quando o campo recebe o foco. |
|
|
463
|
+
|
|
464
|
+
**Métodos**
|
|
465
|
+
|
|
466
|
+
| Método | Descrição |
|
|
467
|
+
| --- | --- |
|
|
468
|
+
| `setInputHeight(height: string)` | Define a altura do campo via CSS custom property `--form-field-height`. |
|
|
469
|
+
|
|
470
|
+
**Getter**
|
|
471
|
+
|
|
472
|
+
| Getter | Tipo | Descrição |
|
|
473
|
+
| --- | --- | --- |
|
|
474
|
+
| `errorText` | `string \| null` | Retorna mensagens de erro de validação (requerido, CPF, CNPJ, email, etc). |
|
|
434
475
|
|
|
435
476
|
---
|
|
436
477
|
|
|
@@ -517,27 +558,93 @@ Um seletor de intervalo de datas.
|
|
|
517
558
|
|
|
518
559
|
---
|
|
519
560
|
|
|
561
|
+
### `BaseToggle`
|
|
562
|
+
Um componente de alternância (toggle switch) que funciona com `ngModel` ou `formControlName`, com suporte a ícones, máscaras e validação.
|
|
563
|
+
|
|
564
|
+
**Seletor:** `<cao-base-toggle>`
|
|
565
|
+
|
|
566
|
+
**Atributos (Inputs)**
|
|
567
|
+
|
|
568
|
+
| Atributo | Tipo | Padrão | Descrição |
|
|
569
|
+
| --- | --- | --- | --- |
|
|
570
|
+
| `type` | `string` | `'text'` | O tipo de input. |
|
|
571
|
+
| `placeholder` | `string` | `''` | O texto de placeholder. |
|
|
572
|
+
| `inputClass` | `string` | `''` | Classes CSS customizadas para o input. |
|
|
573
|
+
| `value` | `string \| number \| boolean \| Date` | `''` | O valor do componente. |
|
|
574
|
+
| `errorMessage` | `string` | `''` | Mensagem de erro a ser exibida. |
|
|
575
|
+
| `isDisabled` | `boolean` | `false` | Desabilita o toggle. |
|
|
576
|
+
| `maxLength` | `number` | `undefined` | Número máximo de caracteres. |
|
|
577
|
+
| `searchMode` | `boolean` | `false` | Ativa o modo de busca. |
|
|
578
|
+
| `showBorder` | `boolean` | `false` | Exibe uma borda no input. |
|
|
579
|
+
| `isLucideIcon` | `boolean` | `false` | Define se o ícone é do pacote Lucide. |
|
|
580
|
+
| `iconColor` | `string` | `''` | Cor do ícone. |
|
|
581
|
+
| `mask` | `string` | `undefined` | Máscara a ser aplicada ao input. |
|
|
582
|
+
| `control` | `AbstractControl \| null` | `undefined` | O `FormControl` associado. |
|
|
583
|
+
| `tooltip` | `string` | `''` | Texto a ser exibido em uma tooltip. |
|
|
584
|
+
| `dataCy` | `string` | `''` | Atributo para testes E2E com Cypress. |
|
|
585
|
+
| `textareaRows` | `string` | `''` | Número de linhas para um textarea. |
|
|
586
|
+
| `decimalMarker` | `'.' \| ',' \| ['.', ',']` | `','` | Marcador decimal para números. |
|
|
587
|
+
| `thousandSeparator` | `string` | `'.'` | Separador de milhares para números. |
|
|
588
|
+
| `allowNegativeNumbers` | `boolean` | `false` | Permite números negativos. |
|
|
589
|
+
| `separatorLimit` | `string` | `''` | Limite do separador. |
|
|
590
|
+
| `controlName` | `string` | `''` | O nome do controle de formulário. |
|
|
591
|
+
| `isChecked` | `boolean` | `false` | Define se o toggle está ativado. |
|
|
592
|
+
| `checkedTextPlaceholder` | `string` | `''` | Texto exibido quando o toggle está ativado. |
|
|
593
|
+
| `uncheckedTextPlaceholder` | `string` | `''` | Texto exibido quando o toggle está desativado. |
|
|
594
|
+
| `leadingIcon` | `string` | `undefined` | Ícone exibido antes do texto. |
|
|
595
|
+
| `trailingIcon` | `string` | `undefined` | Ícone exibido após o texto. |
|
|
596
|
+
|
|
597
|
+
**Eventos (Outputs)**
|
|
598
|
+
|
|
599
|
+
| Evento | Tipo | Descrição |
|
|
600
|
+
| --- | --- | --- |
|
|
601
|
+
| `valueChange` | `EventEmitter<string>` | Emitido quando o valor do input muda. |
|
|
602
|
+
| `searchClick` | `EventEmitter<void>` | Emitido quando o ícone de busca é clicado. |
|
|
603
|
+
| `inputChange` | `EventEmitter<string>` | Emitido a cada mudança no input. |
|
|
604
|
+
| `statusChanged` | `EventEmitter<CaoBaseToggleComponent>` | Emitido quando o toggle é alternado. |
|
|
605
|
+
|
|
606
|
+
---
|
|
607
|
+
|
|
520
608
|
### `DropDown`
|
|
521
609
|
Um menu suspenso (dropdown) com busca, que funciona com `ngModel` ou `formControlName`.
|
|
522
610
|
|
|
523
611
|
**Seletor:** `<cao-drop-down>`
|
|
524
612
|
|
|
525
|
-
**
|
|
613
|
+
**Interface `ICaoDropDownOption`**
|
|
526
614
|
|
|
527
|
-
|
|
|
615
|
+
| Propriedade | Tipo | Descrição |
|
|
528
616
|
| --- | --- | --- |
|
|
529
|
-
| `
|
|
530
|
-
| `
|
|
531
|
-
| `
|
|
532
|
-
| `
|
|
533
|
-
| `
|
|
534
|
-
|
|
617
|
+
| `id` | `string \| number` | (Opcional) Identificador único da opção. |
|
|
618
|
+
| `nome` | `string` | Texto exibido da opção. |
|
|
619
|
+
| `icon` | `string` | (Opcional) Caminho ou nome do ícone. |
|
|
620
|
+
| `iconPosition` | `string` | (Opcional) Posição do ícone (`left` ou `right`). |
|
|
621
|
+
| `dataCy` | `string` | (Opcional) Atributo para testes E2E. |
|
|
622
|
+
|
|
623
|
+
**Atributos (Inputs)**
|
|
624
|
+
|
|
625
|
+
| Atributo | Tipo | Padrão | Descrição |
|
|
626
|
+
| --- | --- | --- | --- |
|
|
627
|
+
| `textHeader` | `string` | `'SELECIONE UM ITEM'` | Texto do cabeçalho do dropdown. |
|
|
628
|
+
| `options` | `ICaoDropDownOption[]` | `[]` | Lista de opções. |
|
|
629
|
+
| `dropDownClass` | `string` | `''` | Classe CSS para o container do dropdown. |
|
|
630
|
+
| `styleDropDown` | `{ [klass: string]: unknown }` | `{}` | Estilos inline para o container. |
|
|
631
|
+
| `control` | `AbstractControl \| null` | `undefined` | O `FormControl` associado. |
|
|
632
|
+
| `controlName` | `string` | `''` | O nome do controle de formulário. |
|
|
633
|
+
| `isDisabled` | `boolean` | `false` | Desabilita o componente. |
|
|
634
|
+
| `tooltip` | `string` | `''` | Texto para a tooltip. |
|
|
635
|
+
| `dropDirectionInput`| `'up' \| 'down'` | `'down'` | Direção em que o dropdown abrirá. |
|
|
636
|
+
| `dataCy` | `string` | `''` | Atributo para testes E2E. |
|
|
637
|
+
| `trackByFn` | `(index: number, item: ICaoDropDownOption) => unknown` | `undefined` | Função personalizada de `trackBy`. |
|
|
638
|
+
| `compareWith` | `(option: unknown, value: unknown) => boolean` | `undefined` | Função comparadora personalizada. |
|
|
639
|
+
| `ariaLabel` | `string` | `undefined` | Atributo `aria-label` do combobox. |
|
|
640
|
+
| `ariaLabelledBy` | `string` | `undefined` | Atributo `aria-labelledby` do combobox. |
|
|
641
|
+
| `listAriaLabel` | `string` | `undefined` | Atributo `aria-label` da lista de opções. |
|
|
535
642
|
|
|
536
643
|
**Eventos (Outputs)**
|
|
537
644
|
|
|
538
645
|
| Evento | Tipo | Descrição |
|
|
539
646
|
| --- | --- | --- |
|
|
540
|
-
| `itemSelected`| `EventEmitter<
|
|
647
|
+
| `itemSelected`| `EventEmitter<ICaoDropDownOption>` | Emitido quando um item é selecionado. |
|
|
541
648
|
|
|
542
649
|
---
|
|
543
650
|
|
|
@@ -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 {
|
|
@@ -359,46 +362,96 @@ class CaoAutocompleteComponent {
|
|
|
359
362
|
iconColor = "";
|
|
360
363
|
_leadingIcon;
|
|
361
364
|
_trailingIcon;
|
|
365
|
+
optionIcon;
|
|
366
|
+
optionIConColor;
|
|
367
|
+
isLucideOptionIcon;
|
|
368
|
+
autocompleteBgColor = 'white';
|
|
369
|
+
strokeWidthIcon = 1;
|
|
370
|
+
itemSelected = new EventEmitter();
|
|
371
|
+
blurEvent = new EventEmitter();
|
|
372
|
+
focusEvent = new EventEmitter();
|
|
373
|
+
autocompleteTrigger;
|
|
362
374
|
internalControl = new FormControl("");
|
|
363
375
|
filteredOptions$;
|
|
364
376
|
isFocused = false;
|
|
365
377
|
icon = false;
|
|
378
|
+
selectedOption = null;
|
|
379
|
+
options$ = new BehaviorSubject([]);
|
|
366
380
|
el = inject(ElementRef);
|
|
367
381
|
onChange = () => { };
|
|
368
382
|
onTouched = () => { };
|
|
369
383
|
ngOnInit() {
|
|
370
|
-
this.filteredOptions$ =
|
|
384
|
+
this.filteredOptions$ = combineLatest([
|
|
385
|
+
this.internalControl.valueChanges.pipe(startWith("")),
|
|
386
|
+
this.options$,
|
|
387
|
+
]).pipe(map(([value]) => this.filter(value || "")));
|
|
371
388
|
this.control.valueChanges.subscribe((value) => {
|
|
372
389
|
const displayValue = value && typeof value === "object" ? this.displayFn(value) : value;
|
|
373
390
|
this.internalControl.setValue(displayValue, { emitEvent: false });
|
|
391
|
+
this.selectedOption = value && typeof value === "object" ? value : null;
|
|
374
392
|
});
|
|
393
|
+
this.setStyle();
|
|
394
|
+
}
|
|
395
|
+
setStyle() {
|
|
396
|
+
this.el.nativeElement.style.setProperty('--autocomplete-bg-color', this.autocompleteBgColor);
|
|
397
|
+
}
|
|
398
|
+
ngOnChanges(changes) {
|
|
399
|
+
if (changes['options']) {
|
|
400
|
+
this.options$.next(changes['options'].currentValue ?? []);
|
|
401
|
+
}
|
|
375
402
|
}
|
|
376
403
|
onFocus() {
|
|
377
404
|
this.isFocused = true;
|
|
405
|
+
this.focusEvent.emit();
|
|
378
406
|
this.onTouched();
|
|
407
|
+
const currentDisplay = this.internalControl.value;
|
|
408
|
+
this.internalControl.setValue("", { emitEvent: true });
|
|
409
|
+
if (currentDisplay) {
|
|
410
|
+
this.internalControl.setValue(currentDisplay, { emitEvent: false });
|
|
411
|
+
}
|
|
412
|
+
setTimeout(() => {
|
|
413
|
+
this.autocompleteTrigger?.openPanel();
|
|
414
|
+
}, 0);
|
|
379
415
|
}
|
|
380
416
|
onBlur() {
|
|
381
417
|
this.isFocused = false;
|
|
418
|
+
this.blurEvent.emit();
|
|
419
|
+
this.onTouched();
|
|
420
|
+
}
|
|
421
|
+
onOptionSelected(event) {
|
|
422
|
+
this.selectedOption = event.option.value;
|
|
423
|
+
this.onChange(event.option.value);
|
|
424
|
+
this.itemSelected.emit(event.option.value);
|
|
382
425
|
this.onTouched();
|
|
426
|
+
setTimeout(() => {
|
|
427
|
+
this.autocompleteTrigger?.closePanel();
|
|
428
|
+
this.el.nativeElement.querySelector('input')?.blur();
|
|
429
|
+
}, 10);
|
|
383
430
|
}
|
|
384
431
|
filter(value) {
|
|
385
432
|
const filterValue = (typeof value === "string" ? value : value?.nome)?.toLowerCase() || "";
|
|
386
|
-
|
|
433
|
+
const currentOptions = this.options$.getValue();
|
|
434
|
+
if (!currentOptions?.length) {
|
|
387
435
|
return [];
|
|
388
436
|
}
|
|
389
|
-
|
|
437
|
+
const matched = currentOptions.filter((option) => {
|
|
390
438
|
const nomeMatch = option.nome.toLowerCase().includes(filterValue);
|
|
391
439
|
const idMatch = option.id?.toString().toLowerCase().includes(filterValue);
|
|
392
440
|
return nomeMatch || idMatch;
|
|
393
441
|
});
|
|
442
|
+
if (!filterValue && this.selectedOption) {
|
|
443
|
+
const selectedId = this.selectedOption.id;
|
|
444
|
+
const selectedIndex = matched.findIndex((o) => o.id === selectedId);
|
|
445
|
+
if (selectedIndex > 0) {
|
|
446
|
+
const [selected] = matched.splice(selectedIndex, 1);
|
|
447
|
+
matched.unshift(selected);
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
return matched;
|
|
394
451
|
}
|
|
395
452
|
displayFn(option) {
|
|
396
453
|
return option && option.nome ? option.nome : "";
|
|
397
454
|
}
|
|
398
|
-
onOptionSelected(event) {
|
|
399
|
-
this.onChange(event.option.value);
|
|
400
|
-
this.onTouched();
|
|
401
|
-
}
|
|
402
455
|
get errorText() {
|
|
403
456
|
if (!this.control) {
|
|
404
457
|
return null;
|
|
@@ -442,6 +495,7 @@ class CaoAutocompleteComponent {
|
|
|
442
495
|
writeValue(value) {
|
|
443
496
|
const displayValue = value && typeof value === "object" ? this.displayFn(value) : value;
|
|
444
497
|
this.internalControl.setValue(displayValue, { emitEvent: false });
|
|
498
|
+
this.selectedOption = value && typeof value === "object" ? value : null;
|
|
445
499
|
}
|
|
446
500
|
registerOnChange(fn) {
|
|
447
501
|
this.onChange = fn;
|
|
@@ -450,16 +504,16 @@ class CaoAutocompleteComponent {
|
|
|
450
504
|
this.onTouched = fn;
|
|
451
505
|
}
|
|
452
506
|
setInputHeight(height) {
|
|
453
|
-
this.el.nativeElement.style.setProperty(
|
|
507
|
+
this.el.nativeElement.style.setProperty("--form-field-height", height);
|
|
454
508
|
}
|
|
455
509
|
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: [
|
|
510
|
+
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" }, outputs: { itemSelected: "itemSelected", blurEvent: "blurEvent", focusEvent: "focusEvent" }, providers: [
|
|
457
511
|
{
|
|
458
512
|
provide: NG_VALUE_ACCESSOR,
|
|
459
513
|
useExisting: forwardRef(() => CaoAutocompleteComponent),
|
|
460
514
|
multi: true,
|
|
461
515
|
},
|
|
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-
|
|
516
|
+
], 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\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 [strokeWidth]=\"strokeWidthIcon\" [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 #trigger=\"matAutocompleteTrigger\"\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 [strokeWidth]=\"strokeWidthIcon\" [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 class=\"option-item\" [value]=\"option\">{{ 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 </div>\n </mat-form-field>\n</div>\n", 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 });
|
|
463
517
|
}
|
|
464
518
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, decorators: [{
|
|
465
519
|
type: Component,
|
|
@@ -476,7 +530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
476
530
|
useExisting: forwardRef(() => CaoAutocompleteComponent),
|
|
477
531
|
multi: true,
|
|
478
532
|
},
|
|
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-
|
|
533
|
+
], 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 [strokeWidth]=\"strokeWidthIcon\" [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 #trigger=\"matAutocompleteTrigger\"\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 [strokeWidth]=\"strokeWidthIcon\" [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 class=\"option-item\" [value]=\"option\">{{ 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 </div>\n </mat-form-field>\n</div>\n", 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"] }]
|
|
480
534
|
}], propDecorators: { label: [{
|
|
481
535
|
type: Input
|
|
482
536
|
}], placeholder: [{
|
|
@@ -497,6 +551,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
497
551
|
type: Input
|
|
498
552
|
}], _trailingIcon: [{
|
|
499
553
|
type: Input
|
|
554
|
+
}], optionIcon: [{
|
|
555
|
+
type: Input
|
|
556
|
+
}], optionIConColor: [{
|
|
557
|
+
type: Input
|
|
558
|
+
}], isLucideOptionIcon: [{
|
|
559
|
+
type: Input
|
|
560
|
+
}], autocompleteBgColor: [{
|
|
561
|
+
type: Input
|
|
562
|
+
}], strokeWidthIcon: [{
|
|
563
|
+
type: Input
|
|
564
|
+
}], itemSelected: [{
|
|
565
|
+
type: Output
|
|
566
|
+
}], blurEvent: [{
|
|
567
|
+
type: Output
|
|
568
|
+
}], focusEvent: [{
|
|
569
|
+
type: Output
|
|
570
|
+
}], autocompleteTrigger: [{
|
|
571
|
+
type: ViewChild,
|
|
572
|
+
args: [MatAutocompleteTrigger]
|
|
500
573
|
}] } });
|
|
501
574
|
|
|
502
575
|
class CaoDropDownComponent {
|
|
@@ -509,7 +582,6 @@ class CaoDropDownComponent {
|
|
|
509
582
|
control;
|
|
510
583
|
controlName = "";
|
|
511
584
|
isDisabled = false;
|
|
512
|
-
itemSelected = new EventEmitter();
|
|
513
585
|
tooltip = "";
|
|
514
586
|
dropDirectionInput = "down";
|
|
515
587
|
dataCy = "";
|
|
@@ -518,6 +590,7 @@ class CaoDropDownComponent {
|
|
|
518
590
|
ariaLabel;
|
|
519
591
|
ariaLabelledBy;
|
|
520
592
|
listAriaLabel;
|
|
593
|
+
itemSelected = new EventEmitter();
|
|
521
594
|
isOpen = false;
|
|
522
595
|
selectedItem;
|
|
523
596
|
filteredOptions = [];
|
|
@@ -793,8 +866,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
793
866
|
type: Input
|
|
794
867
|
}], isDisabled: [{
|
|
795
868
|
type: Input
|
|
796
|
-
}], itemSelected: [{
|
|
797
|
-
type: Output
|
|
798
869
|
}], tooltip: [{
|
|
799
870
|
type: Input
|
|
800
871
|
}], dropDirectionInput: [{
|
|
@@ -811,6 +882,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
811
882
|
type: Input
|
|
812
883
|
}], listAriaLabel: [{
|
|
813
884
|
type: Input
|
|
885
|
+
}], itemSelected: [{
|
|
886
|
+
type: Output
|
|
814
887
|
}] } });
|
|
815
888
|
|
|
816
889
|
class LinksButton {
|