@dev-tcloud/tcloud-ui 6.17.0 → 6.19.0-beta.1

package/docs/tcloud-ui-input.md

@@ -0,0 +1,136 @@
+# Input
+
+A diretiva **tcloudUiInput** padroniza o estilo visual de campos de formulário (`input` e `select`) com o design revitalizado do TCloud UI. Ela aplica automaticamente a classe base de controle e permite expandir o campo para largura total via input reativo.
+
+## Características
+
+- **Estilização automática**: adiciona a classe `tc-rev-input-control` ao elemento host
+- **Suporte a `input` e `select`**: funciona com `input[tcloudUiInput]` e `select[tcloudUiInput]`
+- **Largura opcional**: quando `fullWidth` é `true`, adiciona a classe `tc-rev-input-control--full-width`
+- **API simples**: possui apenas um input (`fullWidth`) para controle de layout
+- **Reatividade com Signals**: utiliza `input()` e `effect()` do Angular para reagir a mudanças do estado
+
+## Instalação
+
+```typescript
+import { TCloudUiInputDirective } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  imports: [TCloudUiInputDirective],
+  // ... resto da configuração
+})
+export class MyComponent {}
+```
+
+## Propriedades (API)
+
+### Seletor
+
+| Nome | Tipo | Descrição |
+|------|------|-----------|
+| `input[tcloudUiInput]` | Diretiva de atributo | Aplica o estilo base em campos `input` |
+| `select[tcloudUiInput]` | Diretiva de atributo | Aplica o estilo base em campos `select` |
+
+### Inputs
+
+| Nome | Tipo | Descrição | Valor Default |
+|------|------|-----------|---------------|
+| `fullWidth` | `boolean` | Quando `true`, adiciona a classe `tc-rev-input-control--full-width` para ocupar 100% da largura disponível | `false` |
+
+### Classes aplicadas
+
+| Classe CSS | Quando é aplicada |
+|-----------|-------------------|
+| `tc-rev-input-control` | Sempre que a diretiva está presente no host |
+| `tc-rev-input-control--full-width` | Quando `fullWidth` é `true` |
+
+## Exemplos de Uso
+
+### Uso Básico com Input
+
+```html
+<input tcloudUiInput type="text" placeholder="Digite seu nome" />
+```
+
+### Uso Básico com Select
+
+```html
+<select tcloudUiInput>
+  <option value="">Selecione uma opção</option>
+  <option value="1">Opção 1</option>
+  <option value="2">Opção 2</option>
+</select>
+```
+
+### Uso com Full Width
+
+```html
+<input tcloudUiInput [fullWidth]="true" type="email" placeholder="email@empresa.com" />
+```
+
+### Controle Programático de Largura
+
+```typescript
+@Component({
+  selector: 'app-form-example',
+  imports: [TCloudUiInputDirective],
+  template: `
+    <button class="tc-btn" (click)="toggleFullWidth()">
+      {{ isFullWidth ? 'Largura padrão' : 'Largura total' }}
+    </button>
+
+    <input
+      tcloudUiInput
+      [fullWidth]="isFullWidth"
+      type="text"
+      placeholder="Campo com largura controlada"
+    />
+  `
+})
+export class FormExampleComponent {
+  isFullWidth: boolean = false;
+
+  toggleFullWidth(): void {
+    this.isFullWidth = !this.isFullWidth;
+  }
+}
+```
+
+### Integração com Reactive Forms
+
+```typescript
+@Component({
+  selector: 'app-reactive-form-example',
+  imports: [ReactiveFormsModule, TCloudUiInputDirective],
+  template: `
+    <form [formGroup]="form">
+      <input
+        tcloudUiInput
+        formControlName="name"
+        [fullWidth]="true"
+        type="text"
+        placeholder="Nome completo"
+      />
+
+      <select tcloudUiInput formControlName="role">
+        <option value="">Selecione o perfil</option>
+        <option value="admin">Administrador</option>
+        <option value="user">Usuário</option>
+      </select>
+    </form>
+  `
+})
+export class ReactiveFormExampleComponent {
+  form = new FormGroup({
+    name: new FormControl(''),
+    role: new FormControl('')
+  });
+}
+```
+
+## Notas de Implementação
+
+- A diretiva utiliza `host.class` para garantir a aplicação da classe base `tc-rev-input-control`
+- O estado de `fullWidth` é definido com Angular Signals (`input<boolean>(false)`)
+- A atualização da classe adicional é acionada por um `effect()` no construtor
+- O `ElementRef` é usado para manipulação direta da lista de classes do elemento host

package/fesm2022/dev-tcloud-tcloud-ui.mjs

@@ -7588,6 +7588,7 @@ class TCloudUiPaginationComponent {
     constructor() {
         this._id = 'tcloud-ui-pagination-component-alone';
         this._currentPage = 1;
+        this._enableLoadOnDemand = false;
         this._tcloudUiPaginationService = inject(TCloudUiPaginationService);
         this._changeDetectorRef = inject(ChangeDetectorRef);
         this._lastTotalPages = 1;
@@ -7610,6 +7611,12 @@ class TCloudUiPaginationComponent {
     get currentPage() {
         return this._currentPage;
     }
+    set enableLoadOnDemand(value) {
+        this._enableLoadOnDemand = value;
+    }
+    get enableLoadOnDemand() {
+        return this._enableLoadOnDemand;
+    }
     ngOnInit() {
         this._tcloudUiPaginationService.stateTotal$.subscribe((items) => {
             let pagination = {};
@@ -7688,18 +7695,20 @@ class TCloudUiPaginationComponent {
         return page < 10 ? `0${page}` : `${page}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiPaginationComponent, isStandalone: true, selector: "tcloud-ui-pagination", inputs: { id: "id", currentPage: "currentPage" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination-container\">\n\t<button class=\"arrow\" [disabled]=\"currentPage === 1\" (click)=\"previous()\"><i class=\"fas fa-angle-left\"></i></button>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">P\u00E1gina</span>\n\n\t<div class=\"page-input-container\">\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tclass=\"page-input\"\n\t\t\t[ngClass]=\"{'error': pageInputError}\"\n\t\t\t[value]=\"formatPage(currentPage)\"\n\t\t\t(keyup.enter)=\"goToPage($event)\"\n\t\t\t(blur)=\"goToPage($event)\"\n\t\t/>\n\t</div>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">de\n\t\t{{ totalPages }}\n\t</span>\n\n\t<button class=\"arrow\" [disabled]=\"currentPage === totalPages\" (click)=\"next()\"><i class=\"fas fa-angle-right\"></i></button>\n</div>\n", styles: [":host{display:block}.pagination-container{display:flex;align-items:center;gap:8px;font-family:var(--f-family);justify-content:center}.pagination-container .label{color:var(--c-neutral-700)}.pagination-container .page-input-container{position:relative;width:48px;height:32px}.pagination-container .page-input{width:100%;height:100%;padding:var(--size-4) var(--size-8);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);font-size:var(--f-size-14);font-family:var(--f-family);font-weight:var(--f-weight-600);color:var(--c-neutral-700);text-align:center;background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.pagination-container .page-input:focus:not(.error){border-color:var(--c-primary-500)}.pagination-container .page-input.error{border-color:var(--c-danger-500)}.pagination-container .page-input.error:focus{border-color:var(--c-danger-500)}.pagination-container .arrow{background-color:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);width:32px;height:32px;font-size:var(--f-size-16);color:var(--c-neutral-300);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-container .arrow:disabled{cursor:not-allowed;opacity:.5}.pagination-container .arrow:hover:not(:disabled){background-color:var(--c-primary-100);border-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TCloudUiPaginationComponent, isStandalone: true, selector: "tcloud-ui-pagination", inputs: { id: "id", currentPage: "currentPage", enableLoadOnDemand: "enableLoadOnDemand" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination-container\">\n\t<button class=\"arrow\" [disabled]=\"currentPage === 1\" (click)=\"previous()\"><i class=\"fas fa-angle-left\"></i></button>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">P\u00E1gina</span>\n\n\t<div class=\"page-input-container\">\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tclass=\"page-input\"\n\t\t\t[ngClass]=\"{'error': pageInputError}\"\n\t\t\t[value]=\"formatPage(currentPage)\"\n\t\t\t(keyup.enter)=\"goToPage($event)\"\n\t\t\t(blur)=\"goToPage($event)\"\n\t\t/>\n\t</div>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">de\n\t\t{{ totalPages }}\n\t</span>\n\n\t<button class=\"arrow\" [disabled]=\"currentPage === totalPages && !enableLoadOnDemand\" (click)=\"next()\"><i class=\"fas fa-angle-right\"></i></button>\n</div>\n", styles: [":host{display:block}.pagination-container{display:flex;align-items:center;gap:8px;font-family:var(--f-family);justify-content:center}.pagination-container .label{color:var(--c-neutral-700)}.pagination-container .page-input-container{position:relative;width:48px;height:32px}.pagination-container .page-input{width:100%;height:100%;padding:var(--size-4) var(--size-8);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);font-size:var(--f-size-14);font-family:var(--f-family);font-weight:var(--f-weight-600);color:var(--c-neutral-700);text-align:center;background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.pagination-container .page-input:focus:not(.error){border-color:var(--c-primary-500)}.pagination-container .page-input.error{border-color:var(--c-danger-500)}.pagination-container .page-input.error:focus{border-color:var(--c-danger-500)}.pagination-container .arrow{background-color:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);width:32px;height:32px;font-size:var(--f-size-16);color:var(--c-neutral-300);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-container .arrow:disabled{cursor:not-allowed;opacity:.5}.pagination-container .arrow:hover:not(:disabled){background-color:var(--c-primary-100);border-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tcloud-ui-pagination', imports: [
                         CommonModule,
                         TCloudUiPaginationPipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"pagination-container\">\n\t<button class=\"arrow\" [disabled]=\"currentPage === 1\" (click)=\"previous()\"><i class=\"fas fa-angle-left\"></i></button>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">P\u00E1gina</span>\n\n\t<div class=\"page-input-container\">\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tclass=\"page-input\"\n\t\t\t[ngClass]=\"{'error': pageInputError}\"\n\t\t\t[value]=\"formatPage(currentPage)\"\n\t\t\t(keyup.enter)=\"goToPage($event)\"\n\t\t\t(blur)=\"goToPage($event)\"\n\t\t/>\n\t</div>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">de\n\t\t{{ totalPages }}\n\t</span>\n\n\t<button class=\"arrow\" [disabled]=\"currentPage === totalPages\" (click)=\"next()\"><i class=\"fas fa-angle-right\"></i></button>\n</div>\n", styles: [":host{display:block}.pagination-container{display:flex;align-items:center;gap:8px;font-family:var(--f-family);justify-content:center}.pagination-container .label{color:var(--c-neutral-700)}.pagination-container .page-input-container{position:relative;width:48px;height:32px}.pagination-container .page-input{width:100%;height:100%;padding:var(--size-4) var(--size-8);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);font-size:var(--f-size-14);font-family:var(--f-family);font-weight:var(--f-weight-600);color:var(--c-neutral-700);text-align:center;background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.pagination-container .page-input:focus:not(.error){border-color:var(--c-primary-500)}.pagination-container .page-input.error{border-color:var(--c-danger-500)}.pagination-container .page-input.error:focus{border-color:var(--c-danger-500)}.pagination-container .arrow{background-color:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);width:32px;height:32px;font-size:var(--f-size-16);color:var(--c-neutral-300);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-container .arrow:disabled{cursor:not-allowed;opacity:.5}.pagination-container .arrow:hover:not(:disabled){background-color:var(--c-primary-100);border-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"pagination-container\">\n\t<button class=\"arrow\" [disabled]=\"currentPage === 1\" (click)=\"previous()\"><i class=\"fas fa-angle-left\"></i></button>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">P\u00E1gina</span>\n\n\t<div class=\"page-input-container\">\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tclass=\"page-input\"\n\t\t\t[ngClass]=\"{'error': pageInputError}\"\n\t\t\t[value]=\"formatPage(currentPage)\"\n\t\t\t(keyup.enter)=\"goToPage($event)\"\n\t\t\t(blur)=\"goToPage($event)\"\n\t\t/>\n\t</div>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">de\n\t\t{{ totalPages }}\n\t</span>\n\n\t<button class=\"arrow\" [disabled]=\"currentPage === totalPages && !enableLoadOnDemand\" (click)=\"next()\"><i class=\"fas fa-angle-right\"></i></button>\n</div>\n", styles: [":host{display:block}.pagination-container{display:flex;align-items:center;gap:8px;font-family:var(--f-family);justify-content:center}.pagination-container .label{color:var(--c-neutral-700)}.pagination-container .page-input-container{position:relative;width:48px;height:32px}.pagination-container .page-input{width:100%;height:100%;padding:var(--size-4) var(--size-8);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);font-size:var(--f-size-14);font-family:var(--f-family);font-weight:var(--f-weight-600);color:var(--c-neutral-700);text-align:center;background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.pagination-container .page-input:focus:not(.error){border-color:var(--c-primary-500)}.pagination-container .page-input.error{border-color:var(--c-danger-500)}.pagination-container .page-input.error:focus{border-color:var(--c-danger-500)}.pagination-container .arrow{background-color:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);width:32px;height:32px;font-size:var(--f-size-16);color:var(--c-neutral-300);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-container .arrow:disabled{cursor:not-allowed;opacity:.5}.pagination-container .arrow:hover:not(:disabled){background-color:var(--c-primary-100);border-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], currentPage: [{
                 type: Input
+            }], enableLoadOnDemand: [{
+                type: Input
             }], pageChange: [{
                 type: Output
             }] } });