ngx-opalbytes-components 1.15.0 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +125 -0
  2. package/fesm2022/ngx-opalbytes-components.mjs +304 -9
  3. package/fesm2022/ngx-opalbytes-components.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/ngx-opalbytes-components.d.ts +71 -3
package/README.md CHANGED
@@ -91,6 +91,8 @@ src/
91
91
  | ├── links-button/
92
92
  | ├── paginator/
93
93
  | ├── stepper/
94
+ | ├── tab-group/
95
+ | ├── tab-panel/
94
96
  | └── time-picker/
95
97
  └── features/
96
98
  ├── base-modal/
@@ -648,6 +650,129 @@ Um menu suspenso (dropdown) com busca, que funciona com `ngModel` ou `formContro
648
650
 
649
651
  ---
650
652
 
653
+ ### `CaoTabGroup` e `CaoTabPanel`
654
+
655
+ Um sistema de abas (tabs) que permite navegar entre diferentes conteúdos organizados em painéis.
656
+
657
+ **Seletores:**
658
+ - `<cao-tab-group>` — Container de abas
659
+ - `<cao-tab-panel>` — Painel individual de conteúdo
660
+
661
+ #### Interface `ICaoTabChangeEvent`
662
+
663
+ | Propriedade | Tipo | Descrição |
664
+ | --- | --- | --- |
665
+ | `previousIndex` | `number` | Índice da aba anteriormente ativa |
666
+ | `index` | `number` | Índice da aba recém-selecionada |
667
+ | `tab` | `CaoTabPanel` | Instância do painel selecionado |
668
+
669
+ #### Atributos do `CaoTabGroup` (Inputs)
670
+
671
+ | Atributo | Tipo | Padrão | Descrição |
672
+ | --- | --- | --- | --- |
673
+ | `selectedIndex` | `number` | `0` | Índice da aba ativa |
674
+ | `labelHeight` | `string` | `'48px'` | Altura do label de cada aba |
675
+ | `labelPaddingX` | `string` | `'16px'` | Padding horizontal do label |
676
+ | `labelGap` | `string` | `'6px'` | Espaçamento entre abas |
677
+ | `colorText` | `string` | `'#6b7280'` | Cor do texto das abas inativas |
678
+ | `colorActive` | `string` | `'#4f46e5'` | Cor do texto da aba ativa |
679
+ | `colorHoverBg` | `string` | `'#f3f4f6'` | Cor de fundo ao passar o mouse |
680
+ | `colorDisabled` | `string` | `'#d1d5db'` | Cor de texto de aba desabilitada |
681
+ | `colorInkBar` | `string` | `'#4f46e5'` | Cor da barra indicadora (ink bar) |
682
+ | `colorHeaderBorder` | `string` | `'#e5e7eb'` | Cor da borda inferior do cabeçalho |
683
+ | `inkBarHeight` | `string` | `'2px'` | Altura da barra indicadora |
684
+ | `contentPaddingTop` | `string` | `'20px'` | Padding superior do conteúdo |
685
+ | `labelRadius` | `string` | `'4px'` | Border-radius do label |
686
+ | `animationDuration` | `string` | `'300ms'` | Duração da animação da ink bar |
687
+ | `dynamicHeight` | `boolean` | `false` | Altura dinâmica do conteúdo |
688
+ | `labelAlign` | `'start' \| 'center' \| 'end'` | `'start'` | Alinhamento das abas no cabeçalho |
689
+ | `iconColorActive` | `string` | `''` | Cor dos ícones na aba ativa |
690
+ | `iconColorInactive` | `string` | `''` | Cor dos ícones nas abas inativas |
691
+ | `strokeWidthIcon` | `number` | `1` | Espessura do stroke de ícones Lucide |
692
+
693
+ #### Eventos do `CaoTabGroup` (Outputs)
694
+
695
+ | Evento | Tipo | Descrição |
696
+ | --- | --- | --- |
697
+ | `selectedTabChange` | `EventEmitter<ICaoTabChangeEvent>` | Emitido quando a aba ativa muda |
698
+ | `focusChange` | `EventEmitter<number>` | Emitido quando uma aba recebe foco |
699
+
700
+ #### Atributos do `CaoTabPanel` (Inputs)
701
+
702
+ | Atributo | Tipo | Padrão | Descrição |
703
+ | --- | --- | --- | --- |
704
+ | `label` | `string` | `''` | Texto exibido no label da aba |
705
+ | `isLucideIcon` | `boolean` | `true` | Define se os ícones são do Lucide |
706
+ | `leadingIcon` | `string \| null` | `null` | Ícone exibido antes do label |
707
+ | `trailingIcon` | `string \| null` | `null` | Ícone exibido após o label |
708
+ | `isDisabled` | `boolean` | `false` | Desabilita a aba |
709
+
710
+ #### Diretivas customizadas
711
+
712
+ | Diretiva | Seletor | Descrição |
713
+ | --- | --- | --- |
714
+ | `CaoTabLabelDirective` | `[caoTabLabel]` | Template customizado para o label da aba |
715
+ | `CaoTabContentDirective` | `[caoTabContent]` | Template para conteúdo lazy (renderizado apenas quando a aba é ativada) |
716
+
717
+ #### Exemplo de uso
718
+
719
+ ```html
720
+ <cao-tab-group
721
+ [selectedIndex]="1"
722
+ (selectedTabChange)="onTabChange($event)"
723
+ labelAlign="center"
724
+ colorActive="#dc2626"
725
+ >
726
+ <cao-tab-panel label="Primeira">
727
+ <p>Conteúdo da primeira aba.</p>
728
+ </cao-tab-panel>
729
+
730
+ <cao-tab-panel label="Segunda" isDisabled>
731
+ <p>Esta aba está desabilitada.</p>
732
+ </cao-tab-panel>
733
+
734
+ <cao-tab-panel label="Com ícone" leadingIcon="home" [isLucideIcon]="true">
735
+ <p>Aba com ícone Lucide.</p>
736
+ </cao-tab-panel>
737
+
738
+ <cao-tab-panel label="Customizada">
739
+ <ng-template caoTabLabel>
740
+ <span style="font-weight: bold;">🌟 Custom</span>
741
+ </ng-template>
742
+
743
+ <ng-template caoTabContent>
744
+ <p>Conteúdo carregado sob demanda via diretiva <code>caoTabContent</code>.</p>
745
+ </ng-template>
746
+ </cao-tab-panel>
747
+ </cao-tab-group>
748
+ ```
749
+
750
+ #### CSS Custom Properties
751
+
752
+ O componente `CaoTabGroup` expõe todas as suas propriedades visuais via CSS custom properties, que podem ser sobrescritas globalmente ou por instância:
753
+
754
+ | Propriedade | Padrão | Descrição |
755
+ | --- | --- | --- |
756
+ | `--cao-tab-font-family` | `inherit` | Família da fonte dos labels |
757
+ | `--cao-tab-font-size` | `0.875rem` | Tamanho da fonte dos labels |
758
+ | `--cao-tab-font-weight` | `500` | Peso da fonte dos labels |
759
+ | `--caoTabLabelHeight` | `48px` | Altura do label |
760
+ | `--caoTabLabelPx` | `16px` | Padding horizontal do label |
761
+ | `--caoTabLabelGap` | `6px` | Espaçamento entre abas |
762
+ | `--caoTabColorText` | `#6b7280` | Cor do texto inativo |
763
+ | `--caoTabColorActive` | `#4f46e5` | Cor do texto ativo |
764
+ | `--caoTabColorHoverBg` | `#f3f4f6` | Fundo no hover |
765
+ | `--caoTabColorDisabled` | `#d1d5db` | Cor do texto desabilitado |
766
+ | `--caoTabColorInkBar` | `#4f46e5` | Cor da ink bar |
767
+ | `--caoTabColorHeaderBorder` | `#e5e7eb` | Cor da borda do header |
768
+ | `--caoTabInkBarHeight` | `2px` | Altura da ink bar |
769
+ | `--caoTabContentPt` | `20px` | Padding superior do conteúdo |
770
+ | `--caoTabRadius` | `4px` | Border-radius do label |
771
+
772
+ > **Nota:** As propriedades com prefixo `--cao-` (hífen) podem ser definidas via CSS. As propriedades com prefixo `--cao` (sem hífen) são definidas via `@Input()` no componente, mas também podem ser sobrescritas via CSS.
773
+
774
+ ---
775
+
651
776
  ### `Footer`
652
777
  Um rodapé simples para a aplicação.
653
778
 
package/fesm2022/ngx-opalbytes-components.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as i1 from '@angular/common';
2
- import { CommonModule, NgOptimizedImage } from '@angular/common';
2
+ import { CommonModule, NgOptimizedImage, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, NgModule, Injectable, ContentChildren } from '@angular/core';
4
+ import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, NgModule, Injectable, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding } from '@angular/core';
5
5
  import * as i3 from '@angular/material/tooltip';
6
6
  import { MatTooltipModule } from '@angular/material/tooltip';
7
7
  import { LucideDynamicIcon } from '@lucide/angular';
@@ -16,7 +16,7 @@ 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
18
  import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
19
- import { BehaviorSubject, combineLatest, startWith, map, Subject } from 'rxjs';
19
+ import { BehaviorSubject, combineLatest, startWith, map, Subject, Subscription } 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';
@@ -87,11 +87,11 @@ class CaoBaseButtonComponent {
87
87
  }
88
88
  }
89
89
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
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
+ 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;width:100%;align-items:center;justify-content:center;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"] }] });
91
91
  }
92
92
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseButtonComponent, decorators: [{
93
93
  type: Component,
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
+ 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;width:100%;align-items:center;justify-content:center;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"] }]
95
95
  }], propDecorators: { buttonClick: [{
96
96
  type: Output
97
97
  }], buttonText: [{
@@ -420,9 +420,13 @@ class CaoAutocompleteComponent {
420
420
  this.isFocused = false;
421
421
  this.blurEvent.emit();
422
422
  this.onTouched();
423
+ if (this.selectedOption) {
424
+ this.internalControl.setValue(this.displayFn(this.selectedOption), { emitEvent: false });
425
+ }
423
426
  }
424
427
  selectItem(option) {
425
428
  this.selectedOption = option;
429
+ this.internalControl.setValue(this.displayFn(option), { emitEvent: false });
426
430
  this.onChange(option);
427
431
  this.itemSelected.emit(option);
428
432
  }
@@ -432,7 +436,6 @@ class CaoAutocompleteComponent {
432
436
  this.closePanel();
433
437
  }
434
438
  selectOption(option) {
435
- this.internalControl.setValue(this.displayFn(option), { emitEvent: false });
436
439
  this.selectItem(option);
437
440
  this.closePanel();
438
441
  }
@@ -545,7 +548,7 @@ class CaoAutocompleteComponent {
545
548
  useExisting: forwardRef(() => CaoAutocompleteComponent),
546
549
  multi: true,
547
550
  },
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 });
551
+ ], 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 (keydown.escape)=\"clearSelection()\" />\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 });
549
552
  }
550
553
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, decorators: [{
551
554
  type: Component,
@@ -562,7 +565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
562
565
  useExisting: forwardRef(() => CaoAutocompleteComponent),
563
566
  multi: true,
564
567
  },
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"] }]
568
+ ], 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 (keydown.escape)=\"clearSelection()\" />\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"] }]
566
569
  }], propDecorators: { label: [{
567
570
  type: Input
568
571
  }], placeholder: [{
@@ -2422,6 +2425,298 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
2422
2425
  type: Output
2423
2426
  }] } });
2424
2427
 
2428
+ class CaoTabContentDirective {
2429
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
2430
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: CaoTabContentDirective, isStandalone: true, selector: "[caoTabContent]", ngImport: i0 });
2431
+ }
2432
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabContentDirective, decorators: [{
2433
+ type: Directive,
2434
+ args: [{
2435
+ selector: '[caoTabContent]',
2436
+ standalone: true,
2437
+ }]
2438
+ }] });
2439
+
2440
+ class CaoTabLabelDirective {
2441
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
2442
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: CaoTabLabelDirective, isStandalone: true, selector: "[caoTabLabel]", ngImport: i0 });
2443
+ }
2444
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabLabelDirective, decorators: [{
2445
+ type: Directive,
2446
+ args: [{
2447
+ selector: '[caoTabLabel]',
2448
+ standalone: true,
2449
+ }]
2450
+ }] });
2451
+
2452
+ class CaoTabPanel {
2453
+ label = '';
2454
+ isLucideIcon = true;
2455
+ trailingIcon = null;
2456
+ leadingIcon = null;
2457
+ isDisabled = false;
2458
+ labelTemplate;
2459
+ lazyContent;
2460
+ content;
2461
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
2462
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CaoTabPanel, isStandalone: true, selector: "cao-tab-panel", inputs: { label: "label", isLucideIcon: "isLucideIcon", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isDisabled: "isDisabled" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: CaoTabLabelDirective, descendants: true, read: TemplateRef }, { propertyName: "lazyContent", first: true, predicate: CaoTabContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "content", first: true, predicate: ["implicitContent"], descendants: true, static: true }], ngImport: i0, template: `
2463
+ <ng-template #implicitContent>
2464
+ <ng-content />
2465
+ </ng-template>
2466
+ `, isInline: true, styles: [""] });
2467
+ }
2468
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabPanel, decorators: [{
2469
+ type: Component,
2470
+ args: [{ selector: "cao-tab-panel", imports: [], template: `
2471
+ <ng-template #implicitContent>
2472
+ <ng-content />
2473
+ </ng-template>
2474
+ ` }]
2475
+ }], propDecorators: { label: [{
2476
+ type: Input
2477
+ }], isLucideIcon: [{
2478
+ type: Input
2479
+ }], trailingIcon: [{
2480
+ type: Input
2481
+ }], leadingIcon: [{
2482
+ type: Input
2483
+ }], isDisabled: [{
2484
+ type: Input
2485
+ }], labelTemplate: [{
2486
+ type: ContentChild,
2487
+ args: [CaoTabLabelDirective, { read: TemplateRef }]
2488
+ }], lazyContent: [{
2489
+ type: ContentChild,
2490
+ args: [CaoTabContentDirective, { read: TemplateRef }]
2491
+ }], content: [{
2492
+ type: ViewChild,
2493
+ args: ['implicitContent', { static: true }]
2494
+ }] } });
2495
+
2496
+ class CaoTabGroup {
2497
+ get _hostStyles() {
2498
+ return {
2499
+ '--caoTabLabelHeight': this.labelHeight,
2500
+ '--caoTabLabelPx': this.labelPaddingX,
2501
+ '--caoTabLabelGap': this.labelGap,
2502
+ '--caoTabColorText': this.colorText,
2503
+ '--caoTabColorActive': this.colorActive,
2504
+ '--caoTabColorHoverBg': this.colorHoverBg,
2505
+ '--caoTabColorDisabled': this.colorDisabled,
2506
+ '--caoTabColorInkBar': this.colorInkBar,
2507
+ '--caoTabColorHeaderBorder': this.colorHeaderBorder,
2508
+ '--caoTabInkBarHeight': this.inkBarHeight,
2509
+ '--caoTabContentPt': this.contentPaddingTop,
2510
+ '--caoTabRadius': this.labelRadius,
2511
+ };
2512
+ }
2513
+ set selectedIndex(val) {
2514
+ this.selectIndex(val, false);
2515
+ }
2516
+ get selectedIndex() {
2517
+ return this.activeIndex();
2518
+ }
2519
+ labelHeight = '48px';
2520
+ labelPaddingX = '16px';
2521
+ labelGap = '6px';
2522
+ colorText = '#6b7280';
2523
+ colorActive = '#4f46e5';
2524
+ colorHoverBg = '#f3f4f6';
2525
+ colorDisabled = '#d1d5db';
2526
+ colorInkBar = '#4f46e5';
2527
+ colorHeaderBorder = '#e5e7eb';
2528
+ inkBarHeight = '2px';
2529
+ contentPaddingTop = '20px';
2530
+ labelRadius = '4px';
2531
+ animationDuration = '300ms';
2532
+ dynamicHeight = false;
2533
+ labelAlign = 'start';
2534
+ iconColorActive = '';
2535
+ iconColorInactive = '';
2536
+ strokeWidthIcon = 1;
2537
+ selectedTabChange = new EventEmitter();
2538
+ focusChange = new EventEmitter();
2539
+ tabs;
2540
+ tabBtns;
2541
+ inkBar;
2542
+ activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
2543
+ activatedSet = new Set();
2544
+ tabList = [];
2545
+ subs = new Subscription();
2546
+ isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
2547
+ ngAfterContentInit() {
2548
+ this.tabList = this.tabs.toArray();
2549
+ this.activatedSet.add(this.activeIndex());
2550
+ this.subs.add(this.tabs.changes.subscribe(() => {
2551
+ this.tabList = this.tabs.toArray();
2552
+ const safe = Math.min(this.activeIndex(), this.tabList.length - 1);
2553
+ this.activeIndex.set(Math.max(0, safe));
2554
+ this.scheduleInkBar();
2555
+ }));
2556
+ this.scheduleInkBar();
2557
+ }
2558
+ ngOnDestroy() {
2559
+ this.subs.unsubscribe();
2560
+ }
2561
+ selectTab(index) {
2562
+ this.selectIndex(index, true);
2563
+ }
2564
+ get activeTab() {
2565
+ return this.tabList[this.activeIndex()] ?? null;
2566
+ }
2567
+ isActive(index) {
2568
+ return this.activeIndex() === index;
2569
+ }
2570
+ wasActivated(index) {
2571
+ return this.activatedSet.has(index);
2572
+ }
2573
+ onTabClick(index) {
2574
+ if (this.tabList[index]?.isDisabled) {
2575
+ return;
2576
+ }
2577
+ this.selectIndex(index, true);
2578
+ }
2579
+ onKeydown(event, currentIndex) {
2580
+ let next = currentIndex;
2581
+ switch (event.key) {
2582
+ case 'ArrowRight':
2583
+ next = this.nextEnabled(currentIndex, 1);
2584
+ break;
2585
+ case 'ArrowLeft':
2586
+ next = this.nextEnabled(currentIndex, -1);
2587
+ break;
2588
+ case 'Home':
2589
+ next = this.nextEnabled(-1, 1);
2590
+ break;
2591
+ case 'End':
2592
+ next = this.nextEnabled(this.tabList.length, -1);
2593
+ break;
2594
+ default: return;
2595
+ }
2596
+ event.preventDefault();
2597
+ this.selectIndex(next, true);
2598
+ this.focusTab(next);
2599
+ }
2600
+ onFocus(index) {
2601
+ this.focusChange.emit(index);
2602
+ }
2603
+ nextEnabled(from, dir) {
2604
+ const tabs = this.tabList;
2605
+ let idx = from + dir;
2606
+ while (idx >= 0 && idx < tabs.length) {
2607
+ if (!tabs[idx].isDisabled) {
2608
+ return idx;
2609
+ }
2610
+ idx += dir;
2611
+ }
2612
+ return from;
2613
+ }
2614
+ selectIndex(index, emit) {
2615
+ if (!this.tabList) {
2616
+ this.activeIndex.set(Math.max(0, index));
2617
+ return;
2618
+ }
2619
+ const clamped = Math.max(0, Math.min(index, this.tabList.length - 1));
2620
+ const previous = this.activeIndex();
2621
+ if (clamped === previous && emit) {
2622
+ return;
2623
+ }
2624
+ this.activeIndex.set(clamped);
2625
+ this.activatedSet.add(clamped);
2626
+ if (emit) {
2627
+ this.selectedTabChange.emit({
2628
+ previousIndex: previous,
2629
+ index: clamped,
2630
+ tab: this.tabList[clamped],
2631
+ });
2632
+ }
2633
+ this.scheduleInkBar();
2634
+ }
2635
+ focusTab(index) {
2636
+ this.tabBtns?.toArray()[index]?.nativeElement?.focus();
2637
+ }
2638
+ scheduleInkBar() {
2639
+ if (!this.isBrowser) {
2640
+ return;
2641
+ }
2642
+ requestAnimationFrame(() => this.updateInkBar());
2643
+ }
2644
+ updateInkBar() {
2645
+ const btns = this.tabBtns?.toArray();
2646
+ const bar = this.inkBar?.nativeElement;
2647
+ if (!btns || !bar) {
2648
+ return;
2649
+ }
2650
+ const btn = btns[this.activeIndex()]?.nativeElement;
2651
+ if (!btn) {
2652
+ return;
2653
+ }
2654
+ bar.style.width = `${btn.offsetWidth}px`;
2655
+ bar.style.transform = `translateX(${btn.offsetLeft}px)`;
2656
+ bar.style.transitionDuration = this.animationDuration;
2657
+ }
2658
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
2659
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoTabGroup, isStandalone: true, selector: "cao-tab-group", inputs: { selectedIndex: "selectedIndex", labelHeight: "labelHeight", labelPaddingX: "labelPaddingX", labelGap: "labelGap", colorText: "colorText", colorActive: "colorActive", colorHoverBg: "colorHoverBg", colorDisabled: "colorDisabled", colorInkBar: "colorInkBar", colorHeaderBorder: "colorHeaderBorder", inkBarHeight: "inkBarHeight", contentPaddingTop: "contentPaddingTop", labelRadius: "labelRadius", animationDuration: "animationDuration", dynamicHeight: "dynamicHeight", labelAlign: "labelAlign", iconColorActive: "iconColorActive", iconColorInactive: "iconColorInactive", strokeWidthIcon: "strokeWidthIcon" }, outputs: { selectedTabChange: "selectedTabChange", focusChange: "focusChange" }, host: { properties: { "style": "this._hostStyles" }, classAttribute: "cao-tab-group" }, queries: [{ propertyName: "tabs", predicate: CaoTabPanel }], viewQueries: [{ propertyName: "inkBar", first: true, predicate: ["inkBar"], descendants: true }, { propertyName: "tabBtns", predicate: ["tabBtn"], descendants: true }], ngImport: i0, template: "<div\n #header\n [class]=\"'cao-tab-header cao-tab-header--align-' + labelAlign\"\n>\n <div class=\"cao-tab-label-list\" role=\"tablist\">\n @for (tab of tabList; track $index; let i = $index) {\n <button\n #tabBtn\n role=\"tab\"\n type=\"button\"\n class=\"cao-tab-label\"\n [class.cao-tab-label--active]=\"isActive(i)\"\n [class.cao-tab-label--disabled]=\"tab.isDisabled\"\n [attr.aria-selected]=\"isActive(i)\"\n [attr.aria-disabled]=\"tab.isDisabled || null\"\n [attr.tabindex]=\"isActive(i) ? 0 : -1\"\n [attr.id]=\"'cao-tab-label-' + i\"\n [attr.aria-controls]=\"'cao-tab-content-' + i\"\n (click)=\"onTabClick(i)\"\n (keydown)=\"onKeydown($event, i)\"\n (focus)=\"onFocus(i)\"\n >\n @if (tab.leadingIcon) {\n <span class=\"leading-icon\">\n @if (tab.isLucideIcon) {\n <svg [lucideIcon]=\"tab.leadingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"tab.leadingIcon\" />\n }\n </span>\n }\n\n @if (tab.labelTemplate) {\n <ng-container [ngTemplateOutlet]=\"tab.labelTemplate\" />\n } @else {\n <span class=\"cao-tab-labeltext\">{{ tab.label }}</span>\n }\n\n @if (tab.trailingIcon) {\n <span class=\"trailing-icon\">\n @if (tab.isLucideIcon) {\n <svg [lucideIcon]=\"tab.trailingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"tab.trailingIcon\" />\n }\n </span>\n }\n </button>\n }\n </div>\n\n <!-- Ink bar animado -->\n <div class=\"cao-tab-ink-bar-track\">\n <div #inkBar class=\"cao-tab-ink-bar\"></div>\n </div>\n</div>\n\n<!-- \u2550\u2550\u2550 Tab Bodies \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div\n class=\"cao-tab-body-wrapper\"\n [class.cao-tab-body-wrapper--dynamic]=\"dynamicHeight\"\n>\n @for (tab of tabList; track $index; let i = $index) {\n <div\n role=\"tabpanel\"\n class=\"cao-tab-body\"\n [class.cao-tab-body--active]=\"isActive(i)\"\n [attr.id]=\"'cao-tab-content-' + i\"\n [attr.aria-labelledby]=\"'cao-tab-label-' + i\"\n [attr.aria-hidden]=\"!isActive(i)\"\n [style.--cao-tab-anim-duration]=\"animationDuration\"\n >\n <div class=\"cao-tab-bodycontent\">\n @if (tab.lazyContent) {\n @if (isActive(i) || wasActivated(i)) {\n <ng-container [ngTemplateOutlet]=\"tab.lazyContent\" />\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"tab.content\" />\n }\n </div>\n </div>\n }\n</div>", styles: [":host{--cao-tab-font-family: inherit;--cao-tab-font-size: .875rem;--cao-tab-font-weight: 500;--caoTabLabelHeight: 48px;--caoTabLabelPx: 16px;--caoTabLabelGap: 6px;--caoTabColorText: #6b7280;--caoTabColorActive: #4f46e5;--caoTabColorHoverBg: #f3f4f6;--caoTabColorDisabled: #d1d5db;--caoTabColorInkBar: #4f46e5;--caoTabColorHeaderBorder: #e5e7eb;--caoTabInkBarHeight: 2px;--caoTabContentPt: 20px;--caoTabRadius: 4px;display:flex;flex-direction:column;width:100%}.cao-tab-header{position:relative;border-bottom:1px solid var(--cao-tab-color-header-border);overflow-x:auto;scrollbar-width:none}.cao-tab-header::-webkit-scrollbar{display:none}.cao-tab-label-list{display:flex;align-items:center;min-width:max-content}.cao-tab-header--align-center .cao-tab-label-list{justify-content:center}.cao-tab-header--align-end .cao-tab-label-list{justify-content:flex-end}.cao-tab-header--align-start .cao-tab-label-list{justify-content:flex-start}.cao-tab-label{display:inline-flex;align-items:center;gap:var(--cao-tab-label-gap);height:var(--cao-tab-label-height);padding:0 var(--cao-tab-label-px);font-family:var(--cao-tab-font-family);font-size:var(--cao-tab-font-size);font-weight:var(--cao-tab-font-weight);color:var(--cao-tab-color-text);white-space:nowrap;background:transparent;border:none;border-radius:var(--cao-tab-radius) var(--cao-tab-radius) 0 0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .18s ease,background-color .18s ease;outline:none}.cao-tab-label:focus-visible{outline:2px solid var(--cao-tab-color-active);outline-offset:-2px}.cao-tab-label:hover:not(.cao-tab-label--disabled){background-color:var(--cao-tab-color-hover-bg);color:var(--cao-tab-color-active)}.cao-tab-label--active{color:var(--cao-tab-color-active)}.cao-tab-label--disabled{color:var(--cao-tab-color-disabled);cursor:not-allowed;pointer-events:none}.cao-tab-label__icon{flex-shrink:0;color:inherit;transition:color .18s ease}.cao-tab-ink-bar-track{position:absolute;bottom:0;left:0;right:0;height:var(--cao-tab-ink-bar-height);pointer-events:none}.cao-tab-ink-bar{position:absolute;bottom:0;left:0;height:100%;background-color:var(--cao-tab-color-ink-bar);border-radius:2px 2px 0 0;transition-property:transform,width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.cao-tab-body-wrapper{position:relative;overflow:hidden}.cao-tab-body-wrapper--dynamic{height:auto}.cao-tab-body{position:absolute;top:0;left:0;width:100%;visibility:hidden;opacity:0;pointer-events:none;transform:translate(24px);transition:opacity var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1),transform var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1)}.cao-tab-body--active{position:relative;visibility:visible;opacity:1;pointer-events:auto;transform:translate(0)}.cao-tab-body__content{padding-top:var(--cao-tab-content-pt)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
2660
+ }
2661
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabGroup, decorators: [{
2662
+ type: Component,
2663
+ args: [{ selector: 'cao-tab-group', standalone: true, imports: [NgTemplateOutlet, LucideDynamicIcon], host: { class: 'cao-tab-group' }, template: "<div\n #header\n [class]=\"'cao-tab-header cao-tab-header--align-' + labelAlign\"\n>\n <div class=\"cao-tab-label-list\" role=\"tablist\">\n @for (tab of tabList; track $index; let i = $index) {\n <button\n #tabBtn\n role=\"tab\"\n type=\"button\"\n class=\"cao-tab-label\"\n [class.cao-tab-label--active]=\"isActive(i)\"\n [class.cao-tab-label--disabled]=\"tab.isDisabled\"\n [attr.aria-selected]=\"isActive(i)\"\n [attr.aria-disabled]=\"tab.isDisabled || null\"\n [attr.tabindex]=\"isActive(i) ? 0 : -1\"\n [attr.id]=\"'cao-tab-label-' + i\"\n [attr.aria-controls]=\"'cao-tab-content-' + i\"\n (click)=\"onTabClick(i)\"\n (keydown)=\"onKeydown($event, i)\"\n (focus)=\"onFocus(i)\"\n >\n @if (tab.leadingIcon) {\n <span class=\"leading-icon\">\n @if (tab.isLucideIcon) {\n <svg [lucideIcon]=\"tab.leadingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"tab.leadingIcon\" />\n }\n </span>\n }\n\n @if (tab.labelTemplate) {\n <ng-container [ngTemplateOutlet]=\"tab.labelTemplate\" />\n } @else {\n <span class=\"cao-tab-labeltext\">{{ tab.label }}</span>\n }\n\n @if (tab.trailingIcon) {\n <span class=\"trailing-icon\">\n @if (tab.isLucideIcon) {\n <svg [lucideIcon]=\"tab.trailingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"tab.trailingIcon\" />\n }\n </span>\n }\n </button>\n }\n </div>\n\n <!-- Ink bar animado -->\n <div class=\"cao-tab-ink-bar-track\">\n <div #inkBar class=\"cao-tab-ink-bar\"></div>\n </div>\n</div>\n\n<!-- \u2550\u2550\u2550 Tab Bodies \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div\n class=\"cao-tab-body-wrapper\"\n [class.cao-tab-body-wrapper--dynamic]=\"dynamicHeight\"\n>\n @for (tab of tabList; track $index; let i = $index) {\n <div\n role=\"tabpanel\"\n class=\"cao-tab-body\"\n [class.cao-tab-body--active]=\"isActive(i)\"\n [attr.id]=\"'cao-tab-content-' + i\"\n [attr.aria-labelledby]=\"'cao-tab-label-' + i\"\n [attr.aria-hidden]=\"!isActive(i)\"\n [style.--cao-tab-anim-duration]=\"animationDuration\"\n >\n <div class=\"cao-tab-bodycontent\">\n @if (tab.lazyContent) {\n @if (isActive(i) || wasActivated(i)) {\n <ng-container [ngTemplateOutlet]=\"tab.lazyContent\" />\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"tab.content\" />\n }\n </div>\n </div>\n }\n</div>", styles: [":host{--cao-tab-font-family: inherit;--cao-tab-font-size: .875rem;--cao-tab-font-weight: 500;--caoTabLabelHeight: 48px;--caoTabLabelPx: 16px;--caoTabLabelGap: 6px;--caoTabColorText: #6b7280;--caoTabColorActive: #4f46e5;--caoTabColorHoverBg: #f3f4f6;--caoTabColorDisabled: #d1d5db;--caoTabColorInkBar: #4f46e5;--caoTabColorHeaderBorder: #e5e7eb;--caoTabInkBarHeight: 2px;--caoTabContentPt: 20px;--caoTabRadius: 4px;display:flex;flex-direction:column;width:100%}.cao-tab-header{position:relative;border-bottom:1px solid var(--cao-tab-color-header-border);overflow-x:auto;scrollbar-width:none}.cao-tab-header::-webkit-scrollbar{display:none}.cao-tab-label-list{display:flex;align-items:center;min-width:max-content}.cao-tab-header--align-center .cao-tab-label-list{justify-content:center}.cao-tab-header--align-end .cao-tab-label-list{justify-content:flex-end}.cao-tab-header--align-start .cao-tab-label-list{justify-content:flex-start}.cao-tab-label{display:inline-flex;align-items:center;gap:var(--cao-tab-label-gap);height:var(--cao-tab-label-height);padding:0 var(--cao-tab-label-px);font-family:var(--cao-tab-font-family);font-size:var(--cao-tab-font-size);font-weight:var(--cao-tab-font-weight);color:var(--cao-tab-color-text);white-space:nowrap;background:transparent;border:none;border-radius:var(--cao-tab-radius) var(--cao-tab-radius) 0 0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .18s ease,background-color .18s ease;outline:none}.cao-tab-label:focus-visible{outline:2px solid var(--cao-tab-color-active);outline-offset:-2px}.cao-tab-label:hover:not(.cao-tab-label--disabled){background-color:var(--cao-tab-color-hover-bg);color:var(--cao-tab-color-active)}.cao-tab-label--active{color:var(--cao-tab-color-active)}.cao-tab-label--disabled{color:var(--cao-tab-color-disabled);cursor:not-allowed;pointer-events:none}.cao-tab-label__icon{flex-shrink:0;color:inherit;transition:color .18s ease}.cao-tab-ink-bar-track{position:absolute;bottom:0;left:0;right:0;height:var(--cao-tab-ink-bar-height);pointer-events:none}.cao-tab-ink-bar{position:absolute;bottom:0;left:0;height:100%;background-color:var(--cao-tab-color-ink-bar);border-radius:2px 2px 0 0;transition-property:transform,width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.cao-tab-body-wrapper{position:relative;overflow:hidden}.cao-tab-body-wrapper--dynamic{height:auto}.cao-tab-body{position:absolute;top:0;left:0;width:100%;visibility:hidden;opacity:0;pointer-events:none;transform:translate(24px);transition:opacity var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1),transform var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1)}.cao-tab-body--active{position:relative;visibility:visible;opacity:1;pointer-events:auto;transform:translate(0)}.cao-tab-body__content{padding-top:var(--cao-tab-content-pt)}\n"] }]
2664
+ }], propDecorators: { _hostStyles: [{
2665
+ type: HostBinding,
2666
+ args: ['style']
2667
+ }], selectedIndex: [{
2668
+ type: Input
2669
+ }], labelHeight: [{
2670
+ type: Input
2671
+ }], labelPaddingX: [{
2672
+ type: Input
2673
+ }], labelGap: [{
2674
+ type: Input
2675
+ }], colorText: [{
2676
+ type: Input
2677
+ }], colorActive: [{
2678
+ type: Input
2679
+ }], colorHoverBg: [{
2680
+ type: Input
2681
+ }], colorDisabled: [{
2682
+ type: Input
2683
+ }], colorInkBar: [{
2684
+ type: Input
2685
+ }], colorHeaderBorder: [{
2686
+ type: Input
2687
+ }], inkBarHeight: [{
2688
+ type: Input
2689
+ }], contentPaddingTop: [{
2690
+ type: Input
2691
+ }], labelRadius: [{
2692
+ type: Input
2693
+ }], animationDuration: [{
2694
+ type: Input
2695
+ }], dynamicHeight: [{
2696
+ type: Input
2697
+ }], labelAlign: [{
2698
+ type: Input
2699
+ }], iconColorActive: [{
2700
+ type: Input
2701
+ }], iconColorInactive: [{
2702
+ type: Input
2703
+ }], strokeWidthIcon: [{
2704
+ type: Input
2705
+ }], selectedTabChange: [{
2706
+ type: Output
2707
+ }], focusChange: [{
2708
+ type: Output
2709
+ }], tabs: [{
2710
+ type: ContentChildren,
2711
+ args: [CaoTabPanel]
2712
+ }], tabBtns: [{
2713
+ type: ViewChildren,
2714
+ args: ['tabBtn']
2715
+ }], inkBar: [{
2716
+ type: ViewChild,
2717
+ args: ['inkBar']
2718
+ }] } });
2719
+
2425
2720
  /*
2426
2721
  * Public API Surface of ngx-opalbytes-components
2427
2722
  */
@@ -2430,5 +2725,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
2430
2725
  * Generated bundle index. Do not edit.
2431
2726
  */
2432
2727
 
2433
- export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseInput, CaoDropDownComponent, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
2728
+ export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseInput, CaoDropDownComponent, CaoTabGroup, CaoTabPanel, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
2434
2729
  //# sourceMappingURL=ngx-opalbytes-components.mjs.map