ngx-opalbytes-components 1.10.0 → 1.12.0

package/README.md

@@ -1,4 +1,4 @@
-# 📦 ngx-opalbytes-components
+#  ngx-opalbytes-components
 
 Uma biblioteca de componentes de UI reutilizáveis para aplicações Angular, projetada para acelerar o desenvolvimento e manter a consistência visual.
 
@@ -44,20 +44,30 @@ Os componentes nesta biblioteca são `standalone`, o que significa que você pod
 
 ```typescript
 import { Component } from '@angular/core';
-// Importe o componente desejado
-import { BaseButton } from 'ngx-opalbytes-components';
+// Importe os componentes desejados
+import { BaseButton, CaoAutocompleteComponent } from 'ngx-opalbytes-components';
+import { FormControl, ReactiveFormsModule } from '@angular/forms'; // Adicione ReactiveFormsModule e FormControl
 
 @Component({
   selector: 'app-exemplo',
   standalone: true,
   imports: [
-    BaseButton // Adicione o componente aos imports
+    BaseButton, // Adicione o componente aos imports
+    CaoAutocompleteComponent, // Adicione o componente aos imports
+    ReactiveFormsModule // Importe ReactiveFormsModule
   ],
   template: `
     <cao-button buttonText="Clique Aqui"></cao-button>
+    <cao-autocomplete label="Selecione um Item" [options]="opcoesExemplo" [control]="meuControl"></cao-autocomplete>
   `
 })
-export class ExemploComponent { }
+export class ExemploComponent {
+  meuControl = new FormControl();
+  opcoesExemplo = [
+    { id: 1, nome: 'Opção 1' },
+    { id: 2, nome: 'Opção 2' }
+  ];
+}
 ```
 
 ---
@@ -406,7 +416,7 @@ Um componente de modal genérico que pode ser customizado.
 
 ---
 
-### `Autocomplete`
+### CaoAutocompleteComponent
 Um campo de preenchimento automático que funciona com `ngModel` ou `formControlName`.
 
 **Seletor:** `<cao-autocomplete>`
@@ -451,7 +461,7 @@ Uma tabela de dados com ordenação, paginação e seleção de linhas. A config
 
 ---
 
-### `TableLightPaginated`
+### BaseTablePaginated
 Uma tabela de dados leve com paginação no lado do cliente. Herda a maioria de suas funcionalidades do `BaseTable`.
 
 **Seletor:** `<cao-table-light-paginated>`
@@ -484,7 +494,7 @@ Uma tabela de dados leve com paginação no lado do cliente. Herda a maioria de
 ### `BaseTimeRange`
 Um seletor de intervalo de datas.
 
-**Seletor:** `<cao-time-range>`
+**Seletor:** `<cao-base-time-range>`
 
 **Atributos (Inputs)**
 
@@ -605,7 +615,7 @@ Um seletor de horário.
 
 ---
 
-## 📜 Como Contribuir
+##  Como Contribuir
 
 Para adicionar um novo componente a esta biblioteca, siga os passos abaixo:
 
@@ -620,7 +630,7 @@ Para adicionar um novo componente a esta biblioteca, siga os passos abaixo:
 
 ---
 
-## 📜 Regras e Convenções
+##  Regras e Convenções
 
 ### Prefixo
 

package/fesm2022/ngx-opalbytes-components.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, NgOptimizedImage } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Input, Output, Component, ViewChild, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, inject, NgModule, Injectable } from '@angular/core';
+import { EventEmitter, Input, Output, Component, ViewChild, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, inject, NgModule, Injectable, ContentChildren } from '@angular/core';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i3$1 from 'lucide-angular';
@@ -359,7 +359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: [MatDateRangeInput]
             }] } });
 
-class RnvAutocompleteComponent {
+class CaoAutocompleteComponent {
     label = "";
     placeholder = "";
     options = [];
@@ -457,16 +457,16 @@ class RnvAutocompleteComponent {
     setDisabledState(isDisabled) {
         isDisabled ? this.internalControl.disable() : this.internalControl.enable();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RnvAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: RnvAutocompleteComponent, isStandalone: true, selector: "cao-autocomplete", inputs: { label: "label", placeholder: "placeholder", options: "options", control: "control", dataCy: "dataCy", controlName: "controlName" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => RnvAutocompleteComponent),
+                useExisting: forwardRef(() => CaoAutocompleteComponent),
                 multi: true,
             },
         ], ngImport: i0, template: "<div class=\"form-field\">\n  @if (label) {\n  <label [for]=\"internalControl\">{{ label }}</label>\n  }\n\n  <mat-form-field appearance=\"outline\" class=\"rnv-autocomplete-mat-form-field\">\n    <div class=\"input-wrapper\" [class.focused]=\"isFocused\">\n      <input\n        type=\"text\"\n        matInput\n        [placeholder]=\"placeholder\"\n        [formControl]=\"internalControl\"\n        [matAutocomplete]=\"auto\"\n        [attr.data-cy]=\"dataCy\"\n        [ngClass]=\"[\n          control?.touched && control?.invalid ? 'invalid' : '',\n          control?.touched && control?.valid && control?.value ? 'valid' : ''\n        ]\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\" />\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        autoActiveFirstOption\n        [displayWith]=\"displayFn\"\n        (optionSelected)=\"onOptionSelected($event)\">\n        @for (option of filteredOptions$ | async; track option.id) {\n        <mat-option [value]=\"option\">{{ option.nome }}</mat-option>\n        }\n      </mat-autocomplete>\n    </div>\n  </mat-form-field>\n</div>\n", styles: [".form-field{display:flex;flex-direction:column;width:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap}.rnv-autocomplete-mat-form-field{width:100%}.rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper{border-radius:8px;padding:0;height:48px}.rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{padding:0 10px;align-items:center}.rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{padding:0;min-height:0}.rnv-autocomplete-mat-form-field .mat-mdc-form-field-subscript-wrapper,.rnv-autocomplete-mat-form-field .mat-mdc-form-field-outline{display:none}.input-wrapper{position:relative;width:100%}.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}\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: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RnvAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: "cao-autocomplete", standalone: true, imports: [
                         CommonModule,
@@ -477,7 +477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => RnvAutocompleteComponent),
+                            useExisting: forwardRef(() => CaoAutocompleteComponent),
                             multi: true,
                         },
                     ], template: "<div class=\"form-field\">\n  @if (label) {\n  <label [for]=\"internalControl\">{{ label }}</label>\n  }\n\n  <mat-form-field appearance=\"outline\" class=\"rnv-autocomplete-mat-form-field\">\n    <div class=\"input-wrapper\" [class.focused]=\"isFocused\">\n      <input\n        type=\"text\"\n        matInput\n        [placeholder]=\"placeholder\"\n        [formControl]=\"internalControl\"\n        [matAutocomplete]=\"auto\"\n        [attr.data-cy]=\"dataCy\"\n        [ngClass]=\"[\n          control?.touched && control?.invalid ? 'invalid' : '',\n          control?.touched && control?.valid && control?.value ? 'valid' : ''\n        ]\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\" />\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        autoActiveFirstOption\n        [displayWith]=\"displayFn\"\n        (optionSelected)=\"onOptionSelected($event)\">\n        @for (option of filteredOptions$ | async; track option.id) {\n        <mat-option [value]=\"option\">{{ option.nome }}</mat-option>\n        }\n      </mat-autocomplete>\n    </div>\n  </mat-form-field>\n</div>\n", styles: [".form-field{display:flex;flex-direction:column;width:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap}.rnv-autocomplete-mat-form-field{width:100%}.rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper{border-radius:8px;padding:0;height:48px}.rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{padding:0 10px;align-items:center}.rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{padding:0;min-height:0}.rnv-autocomplete-mat-form-field .mat-mdc-form-field-subscript-wrapper,.rnv-autocomplete-mat-form-field .mat-mdc-form-field-outline{display:none}.input-wrapper{position:relative;width:100%}.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}\n"] }]
@@ -2236,6 +2236,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$4.Overlay }] });
 
+class StepComponent {
+    title = "";
+    isActive = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: StepComponent, isStandalone: true, selector: "cao-step", inputs: { title: "title", isActive: "isActive" }, ngImport: i0, template: "<div class=\"step d-flex aic jcc\" [ngClass]=\"{'active': isActive}\"> {{ title }} </div>\n", styles: [".step{width:44px;height:44px;border-radius:100%;font-size:18px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "cao-step", standalone: true, imports: [CommonModule], template: "<div class=\"step d-flex aic jcc\" [ngClass]=\"{'active': isActive}\"> {{ title }} </div>\n", styles: [".step{width:44px;height:44px;border-radius:100%;font-size:18px;font-weight:700}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], isActive: [{
+                type: Input
+            }] } });
+
+class StepperComponent {
+    constructor() { }
+    steps;
+    title;
+    activeStepIndex = 0;
+    lengthStep = 0;
+    showLine = true;
+    maxReachedEvent = new EventEmitter();
+    ngAfterContentInit() {
+        if (this.steps.length > 0) {
+            this.steps.toArray()[0].isActive = true;
+            this.lengthStep = this.steps.length;
+        }
+    }
+    nextStep() {
+        if (this.steps.length > 0) {
+            if (this.activeStepIndex < this.steps.length - 1) {
+                this.activeStepIndex++;
+                this.steps.toArray()[this.activeStepIndex].isActive = true;
+            }
+            else {
+                this.maxReachedEvent.emit(null);
+            }
+        }
+    }
+    prevStep() {
+        if (this.steps.length > 0) {
+            if (this.activeStepIndex > 0) {
+                this.steps.toArray()[this.activeStepIndex].isActive = false;
+                this.activeStepIndex--;
+                this.steps.toArray()[this.activeStepIndex].isActive = true;
+            }
+        }
+    }
+    resetStepper() {
+        this.activeStepIndex = 0;
+        this.steps.forEach((step) => (step.isActive = false));
+        if (this.steps.length > 0) {
+            this.steps.toArray()[0].isActive = true;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: StepperComponent, isStandalone: true, selector: "cao-stepper", inputs: { title: "title" }, outputs: { maxReachedEvent: "maxReachedEvent" }, queries: [{ propertyName: "steps", predicate: StepComponent }], ngImport: i0, template: "@if(title){\n<h3 class=\"stepper-title\">{{ title }}</h3>\n}\n<div class=\"d-flex step-container aic jcsb\">\n  @if (showLine) {\n  <div class=\"line\"></div>\n  }\n  <div class=\"steps d-flex aic jcsb\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".step-container{position:relative}.steps{z-index:2;gap:24px}.line{width:100%;position:absolute;top:50%;height:1.5px;background-color:var(--return-color);z-index:1}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "cao-stepper", standalone: true, template: "@if(title){\n<h3 class=\"stepper-title\">{{ title }}</h3>\n}\n<div class=\"d-flex step-container aic jcsb\">\n  @if (showLine) {\n  <div class=\"line\"></div>\n  }\n  <div class=\"steps d-flex aic jcsb\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".step-container{position:relative}.steps{z-index:2;gap:24px}.line{width:100%;position:absolute;top:50%;height:1.5px;background-color:var(--return-color);z-index:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { steps: [{
+                type: ContentChildren,
+                args: [StepComponent]
+            }], title: [{
+                type: Input
+            }], maxReachedEvent: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of ngx-opalbytes-components
  */
@@ -2244,5 +2315,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseAlert, BaseAlertService, BaseButton, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseInput, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, DropDownComponent, Footer, LinksButton, Paginator, RnvAutocompleteComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
+export { BaseAlert, BaseAlertService, BaseButton, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseInput, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, DropDownComponent, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
 //# sourceMappingURL=ngx-opalbytes-components.mjs.map