ngx-opalbytes-components 1.13.0 → 1.14.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
|
@@ -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/
|
|
@@ -421,16 +422,52 @@ Um campo de preenchimento automático que funciona com `ngModel` ou `formControl
|
|
|
421
422
|
|
|
422
423
|
**Seletor:** `<cao-autocomplete>`
|
|
423
424
|
|
|
425
|
+
**Interface `ICaoAutoCompleteOption`**
|
|
426
|
+
|
|
427
|
+
| Propriedade | Tipo | Descrição |
|
|
428
|
+
| --- | --- | --- |
|
|
429
|
+
| `id` | `string \| number` | (Opcional) Identificador único da opção. |
|
|
430
|
+
| `nome` | `string` | Texto exibido (usado para filtro e exibição). |
|
|
431
|
+
| `icon` | `string` | (Opcional) Caminho ou nome do ícone. |
|
|
432
|
+
| `iconPosition` | `string` | (Opcional) Posição do ícone na opção. |
|
|
433
|
+
|
|
424
434
|
**Atributos (Inputs)**
|
|
425
435
|
|
|
426
|
-
| Atributo | Tipo | Descrição |
|
|
436
|
+
| Atributo | Tipo | Padrão | Descrição |
|
|
437
|
+
| --- | --- | --- | --- |
|
|
438
|
+
| `label` | `string` | `''` | O rótulo do campo. |
|
|
439
|
+
| `placeholder` | `string` | `''` | O texto de placeholder. |
|
|
440
|
+
| `options` | `ICaoAutoCompleteOption[]` | `[]` | A lista de opções para o autocomplete. |
|
|
441
|
+
| `control` | `AbstractControl` | `new FormControl()` | O `FormControl` associado. |
|
|
442
|
+
| `controlName` | `string` | `''` | O nome do controle de formulário. |
|
|
443
|
+
| `dataCy` | `string` | `''` | Atributo para testes E2E. |
|
|
444
|
+
| `isLucideIcon` | `boolean` | `false` | Define se `leadingIcon`/`trailingIcon` são ícones Lucide. |
|
|
445
|
+
| `iconColor` | `string` | `''` | Cor aplicada aos ícones SVG Lucide. |
|
|
446
|
+
| `leadingIcon` | `string` | `undefined` | Ícone exibido antes do texto. |
|
|
447
|
+
| `trailingIcon` | `string` | `undefined` | Ícone exibido após o texto. |
|
|
448
|
+
| `optionIcon` | `string` | `undefined` | Ícone exibido dentro de cada opção do dropdown. |
|
|
449
|
+
| `optionIConColor` | `string` | `undefined` | Cor do ícone das opções. |
|
|
450
|
+
| `isLucideOptionIcon` | `boolean` | `undefined` | Define se `optionIcon` é um ícone Lucide. |
|
|
451
|
+
|
|
452
|
+
**Eventos (Outputs)**
|
|
453
|
+
|
|
454
|
+
| Evento | Tipo | Descrição |
|
|
427
455
|
| --- | --- | --- |
|
|
428
|
-
| `
|
|
429
|
-
| `
|
|
430
|
-
| `
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
456
|
+
| `OnItemSelected` | `EventEmitter<ICaoAutoCompleteOption>` | Emitido quando uma opção é selecionada. |
|
|
457
|
+
| `OnBlur` | `EventEmitter<void>` | Emitido quando o campo perde o foco. |
|
|
458
|
+
| `OnFocus` | `EventEmitter<void>` | Emitido quando o campo recebe o foco. |
|
|
459
|
+
|
|
460
|
+
**Métodos**
|
|
461
|
+
|
|
462
|
+
| Método | Descrição |
|
|
463
|
+
| --- | --- |
|
|
464
|
+
| `setInputHeight(height: string)` | Define a altura do campo via CSS custom property `--form-field-height`. |
|
|
465
|
+
|
|
466
|
+
**Getter**
|
|
467
|
+
|
|
468
|
+
| Getter | Tipo | Descrição |
|
|
469
|
+
| --- | --- | --- |
|
|
470
|
+
| `errorText` | `string \| null` | Retorna mensagens de erro de validação (requerido, CPF, CNPJ, email, etc). |
|
|
434
471
|
|
|
435
472
|
---
|
|
436
473
|
|
|
@@ -517,27 +554,93 @@ Um seletor de intervalo de datas.
|
|
|
517
554
|
|
|
518
555
|
---
|
|
519
556
|
|
|
557
|
+
### `BaseToggle`
|
|
558
|
+
Um componente de alternância (toggle switch) que funciona com `ngModel` ou `formControlName`, com suporte a ícones, máscaras e validação.
|
|
559
|
+
|
|
560
|
+
**Seletor:** `<cao-base-toggle>`
|
|
561
|
+
|
|
562
|
+
**Atributos (Inputs)**
|
|
563
|
+
|
|
564
|
+
| Atributo | Tipo | Padrão | Descrição |
|
|
565
|
+
| --- | --- | --- | --- |
|
|
566
|
+
| `type` | `string` | `'text'` | O tipo de input. |
|
|
567
|
+
| `placeholder` | `string` | `''` | O texto de placeholder. |
|
|
568
|
+
| `inputClass` | `string` | `''` | Classes CSS customizadas para o input. |
|
|
569
|
+
| `value` | `string \| number \| boolean \| Date` | `''` | O valor do componente. |
|
|
570
|
+
| `errorMessage` | `string` | `''` | Mensagem de erro a ser exibida. |
|
|
571
|
+
| `isDisabled` | `boolean` | `false` | Desabilita o toggle. |
|
|
572
|
+
| `maxLength` | `number` | `undefined` | Número máximo de caracteres. |
|
|
573
|
+
| `searchMode` | `boolean` | `false` | Ativa o modo de busca. |
|
|
574
|
+
| `showBorder` | `boolean` | `false` | Exibe uma borda no input. |
|
|
575
|
+
| `isLucideIcon` | `boolean` | `false` | Define se o ícone é do pacote Lucide. |
|
|
576
|
+
| `iconColor` | `string` | `''` | Cor do ícone. |
|
|
577
|
+
| `mask` | `string` | `undefined` | Máscara a ser aplicada ao input. |
|
|
578
|
+
| `control` | `AbstractControl \| null` | `undefined` | O `FormControl` associado. |
|
|
579
|
+
| `tooltip` | `string` | `''` | Texto a ser exibido em uma tooltip. |
|
|
580
|
+
| `dataCy` | `string` | `''` | Atributo para testes E2E com Cypress. |
|
|
581
|
+
| `textareaRows` | `string` | `''` | Número de linhas para um textarea. |
|
|
582
|
+
| `decimalMarker` | `'.' \| ',' \| ['.', ',']` | `','` | Marcador decimal para números. |
|
|
583
|
+
| `thousandSeparator` | `string` | `'.'` | Separador de milhares para números. |
|
|
584
|
+
| `allowNegativeNumbers` | `boolean` | `false` | Permite números negativos. |
|
|
585
|
+
| `separatorLimit` | `string` | `''` | Limite do separador. |
|
|
586
|
+
| `controlName` | `string` | `''` | O nome do controle de formulário. |
|
|
587
|
+
| `isChecked` | `boolean` | `false` | Define se o toggle está ativado. |
|
|
588
|
+
| `checkedTextPlaceholder` | `string` | `''` | Texto exibido quando o toggle está ativado. |
|
|
589
|
+
| `uncheckedTextPlaceholder` | `string` | `''` | Texto exibido quando o toggle está desativado. |
|
|
590
|
+
| `leadingIcon` | `string` | `undefined` | Ícone exibido antes do texto. |
|
|
591
|
+
| `trailingIcon` | `string` | `undefined` | Ícone exibido após o texto. |
|
|
592
|
+
|
|
593
|
+
**Eventos (Outputs)**
|
|
594
|
+
|
|
595
|
+
| Evento | Tipo | Descrição |
|
|
596
|
+
| --- | --- | --- |
|
|
597
|
+
| `valueChange` | `EventEmitter<string>` | Emitido quando o valor do input muda. |
|
|
598
|
+
| `searchClick` | `EventEmitter<void>` | Emitido quando o ícone de busca é clicado. |
|
|
599
|
+
| `inputChange` | `EventEmitter<string>` | Emitido a cada mudança no input. |
|
|
600
|
+
| `statusChanged` | `EventEmitter<CaoBaseToggleComponent>` | Emitido quando o toggle é alternado. |
|
|
601
|
+
|
|
602
|
+
---
|
|
603
|
+
|
|
520
604
|
### `DropDown`
|
|
521
605
|
Um menu suspenso (dropdown) com busca, que funciona com `ngModel` ou `formControlName`.
|
|
522
606
|
|
|
523
607
|
**Seletor:** `<cao-drop-down>`
|
|
524
608
|
|
|
525
|
-
**
|
|
609
|
+
**Interface `ICaoDropDownOption`**
|
|
526
610
|
|
|
527
|
-
|
|
|
611
|
+
| Propriedade | Tipo | Descrição |
|
|
528
612
|
| --- | --- | --- |
|
|
529
|
-
| `
|
|
530
|
-
| `
|
|
531
|
-
| `
|
|
532
|
-
| `
|
|
533
|
-
| `
|
|
534
|
-
|
|
613
|
+
| `id` | `string \| number` | (Opcional) Identificador único da opção. |
|
|
614
|
+
| `nome` | `string` | Texto exibido da opção. |
|
|
615
|
+
| `icon` | `string` | (Opcional) Caminho ou nome do ícone. |
|
|
616
|
+
| `iconPosition` | `string` | (Opcional) Posição do ícone (`left` ou `right`). |
|
|
617
|
+
| `dataCy` | `string` | (Opcional) Atributo para testes E2E. |
|
|
618
|
+
|
|
619
|
+
**Atributos (Inputs)**
|
|
620
|
+
|
|
621
|
+
| Atributo | Tipo | Padrão | Descrição |
|
|
622
|
+
| --- | --- | --- | --- |
|
|
623
|
+
| `textHeader` | `string` | `'SELECIONE UM ITEM'` | Texto do cabeçalho do dropdown. |
|
|
624
|
+
| `options` | `ICaoDropDownOption[]` | `[]` | Lista de opções. |
|
|
625
|
+
| `dropDownClass` | `string` | `''` | Classe CSS para o container do dropdown. |
|
|
626
|
+
| `styleDropDown` | `{ [klass: string]: unknown }` | `{}` | Estilos inline para o container. |
|
|
627
|
+
| `control` | `AbstractControl \| null` | `undefined` | O `FormControl` associado. |
|
|
628
|
+
| `controlName` | `string` | `''` | O nome do controle de formulário. |
|
|
629
|
+
| `isDisabled` | `boolean` | `false` | Desabilita o componente. |
|
|
630
|
+
| `tooltip` | `string` | `''` | Texto para a tooltip. |
|
|
631
|
+
| `dropDirectionInput`| `'up' \| 'down'` | `'down'` | Direção em que o dropdown abrirá. |
|
|
632
|
+
| `dataCy` | `string` | `''` | Atributo para testes E2E. |
|
|
633
|
+
| `trackByFn` | `(index: number, item: ICaoDropDownOption) => unknown` | `undefined` | Função personalizada de `trackBy`. |
|
|
634
|
+
| `compareWith` | `(option: unknown, value: unknown) => boolean` | `undefined` | Função comparadora personalizada. |
|
|
635
|
+
| `ariaLabel` | `string` | `undefined` | Atributo `aria-label` do combobox. |
|
|
636
|
+
| `ariaLabelledBy` | `string` | `undefined` | Atributo `aria-labelledby` do combobox. |
|
|
637
|
+
| `listAriaLabel` | `string` | `undefined` | Atributo `aria-label` da lista de opções. |
|
|
535
638
|
|
|
536
639
|
**Eventos (Outputs)**
|
|
537
640
|
|
|
538
641
|
| Evento | Tipo | Descrição |
|
|
539
642
|
| --- | --- | --- |
|
|
540
|
-
| `itemSelected`| `EventEmitter<
|
|
643
|
+
| `itemSelected`| `EventEmitter<ICaoDropDownOption>` | Emitido quando um item é selecionado. |
|
|
541
644
|
|
|
542
645
|
---
|
|
543
646
|
|
|
@@ -359,6 +359,12 @@ class CaoAutocompleteComponent {
|
|
|
359
359
|
iconColor = "";
|
|
360
360
|
_leadingIcon;
|
|
361
361
|
_trailingIcon;
|
|
362
|
+
optionIcon;
|
|
363
|
+
optionIConColor;
|
|
364
|
+
isLucideOptionIcon;
|
|
365
|
+
itemSelected = new EventEmitter();
|
|
366
|
+
blurEvent = new EventEmitter();
|
|
367
|
+
focusEvent = new EventEmitter();
|
|
362
368
|
internalControl = new FormControl("");
|
|
363
369
|
filteredOptions$;
|
|
364
370
|
isFocused = false;
|
|
@@ -375,10 +381,17 @@ class CaoAutocompleteComponent {
|
|
|
375
381
|
}
|
|
376
382
|
onFocus() {
|
|
377
383
|
this.isFocused = true;
|
|
384
|
+
this.focusEvent.emit();
|
|
378
385
|
this.onTouched();
|
|
379
386
|
}
|
|
380
387
|
onBlur() {
|
|
381
388
|
this.isFocused = false;
|
|
389
|
+
this.blurEvent.emit();
|
|
390
|
+
this.onTouched();
|
|
391
|
+
}
|
|
392
|
+
onOptionSelected(event) {
|
|
393
|
+
this.onChange(event.option.value);
|
|
394
|
+
this.itemSelected.emit(event.option.value);
|
|
382
395
|
this.onTouched();
|
|
383
396
|
}
|
|
384
397
|
filter(value) {
|
|
@@ -395,10 +408,6 @@ class CaoAutocompleteComponent {
|
|
|
395
408
|
displayFn(option) {
|
|
396
409
|
return option && option.nome ? option.nome : "";
|
|
397
410
|
}
|
|
398
|
-
onOptionSelected(event) {
|
|
399
|
-
this.onChange(event.option.value);
|
|
400
|
-
this.onTouched();
|
|
401
|
-
}
|
|
402
411
|
get errorText() {
|
|
403
412
|
if (!this.control) {
|
|
404
413
|
return null;
|
|
@@ -453,13 +462,13 @@ class CaoAutocompleteComponent {
|
|
|
453
462
|
this.el.nativeElement.style.setProperty('--form-field-height', height);
|
|
454
463
|
}
|
|
455
464
|
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: [
|
|
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: [
|
|
457
466
|
{
|
|
458
467
|
provide: NG_VALUE_ACCESSOR,
|
|
459
468
|
useExisting: forwardRef(() => CaoAutocompleteComponent),
|
|
460
469
|
multi: true,
|
|
461
470
|
},
|
|
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-
|
|
471
|
+
], 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 class=\"option-item\" [value]=\"option\">{{ option.nome }} \n @if(optionIcon){\n @if (isLucideOptionIcon) {\n <svg [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;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
472
|
}
|
|
464
473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, decorators: [{
|
|
465
474
|
type: Component,
|
|
@@ -476,7 +485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
476
485
|
useExisting: forwardRef(() => CaoAutocompleteComponent),
|
|
477
486
|
multi: true,
|
|
478
487
|
},
|
|
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-
|
|
488
|
+
], 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 class=\"option-item\" [value]=\"option\">{{ option.nome }} \n @if(optionIcon){\n @if (isLucideOptionIcon) {\n <svg [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;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
489
|
}], propDecorators: { label: [{
|
|
481
490
|
type: Input
|
|
482
491
|
}], placeholder: [{
|
|
@@ -497,6 +506,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
497
506
|
type: Input
|
|
498
507
|
}], _trailingIcon: [{
|
|
499
508
|
type: Input
|
|
509
|
+
}], optionIcon: [{
|
|
510
|
+
type: Input
|
|
511
|
+
}], optionIConColor: [{
|
|
512
|
+
type: Input
|
|
513
|
+
}], isLucideOptionIcon: [{
|
|
514
|
+
type: Input
|
|
515
|
+
}], itemSelected: [{
|
|
516
|
+
type: Output
|
|
517
|
+
}], blurEvent: [{
|
|
518
|
+
type: Output
|
|
519
|
+
}], focusEvent: [{
|
|
520
|
+
type: Output
|
|
500
521
|
}] } });
|
|
501
522
|
|
|
502
523
|
class CaoDropDownComponent {
|
|
@@ -509,7 +530,6 @@ class CaoDropDownComponent {
|
|
|
509
530
|
control;
|
|
510
531
|
controlName = "";
|
|
511
532
|
isDisabled = false;
|
|
512
|
-
itemSelected = new EventEmitter();
|
|
513
533
|
tooltip = "";
|
|
514
534
|
dropDirectionInput = "down";
|
|
515
535
|
dataCy = "";
|
|
@@ -518,6 +538,7 @@ class CaoDropDownComponent {
|
|
|
518
538
|
ariaLabel;
|
|
519
539
|
ariaLabelledBy;
|
|
520
540
|
listAriaLabel;
|
|
541
|
+
itemSelected = new EventEmitter();
|
|
521
542
|
isOpen = false;
|
|
522
543
|
selectedItem;
|
|
523
544
|
filteredOptions = [];
|
|
@@ -793,8 +814,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
793
814
|
type: Input
|
|
794
815
|
}], isDisabled: [{
|
|
795
816
|
type: Input
|
|
796
|
-
}], itemSelected: [{
|
|
797
|
-
type: Output
|
|
798
817
|
}], tooltip: [{
|
|
799
818
|
type: Input
|
|
800
819
|
}], dropDirectionInput: [{
|
|
@@ -811,6 +830,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
811
830
|
type: Input
|
|
812
831
|
}], listAriaLabel: [{
|
|
813
832
|
type: Input
|
|
833
|
+
}], itemSelected: [{
|
|
834
|
+
type: Output
|
|
814
835
|
}] } });
|
|
815
836
|
|
|
816
837
|
class LinksButton {
|