@fylib/adapter-angular 0.2.5 → 0.2.8

package/dist/components/table.component.js

@@ -1,12 +1,3 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
 import { Component, Input, Output, EventEmitter, ViewEncapsulation, inject, ContentChild, TemplateRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TableDefinition } from '@fylib/catalog';
@@ -15,7 +6,9 @@ import { BaseFyComponent } from '../base/base-component';
 import { FyIconComponent } from './icon.component';
 import { FyInputComponent } from './input.component';
 import { FyButtonComponent } from './button.component';
-let FyTableComponent = class FyTableComponent extends BaseFyComponent {
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class FyTableComponent extends BaseFyComponent {
     constructor() {
         super(inject(FyLibService), 'fy-table');
         this.data = TableDefinition.defaultProps.data;
@@ -140,130 +133,9 @@ let FyTableComponent = class FyTableComponent extends BaseFyComponent {
         event.stopPropagation();
         action.onClick?.(row);
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FyTableComponent.prototype, "data", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FyTableComponent.prototype, "columns", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyTableComponent.prototype, "title", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyTableComponent.prototype, "subtitle", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyTableComponent.prototype, "footer", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyTableComponent.prototype, "loading", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyTableComponent.prototype, "showHeader", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyTableComponent.prototype, "showFooter", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyTableComponent.prototype, "showPagination", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyTableComponent.prototype, "showSearch", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FyTableComponent.prototype, "currentPage", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FyTableComponent.prototype, "pageSize", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FyTableComponent.prototype, "totalItems", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FyTableComponent.prototype, "searchTargets", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FyTableComponent.prototype, "actions", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyTableComponent.prototype, "rowClickable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyTableComponent.prototype, "variant", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyTableComponent.prototype, "stickyHeader", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyTableComponent.prototype, "scrollable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyTableComponent.prototype, "maxHeight", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyTableComponent.prototype, "activeAnimations", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyTableComponent.prototype, "activeEffects", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyTableComponent.prototype, "customStyles", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FyTableComponent.prototype, "fySearch", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FyTableComponent.prototype, "fySort", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FyTableComponent.prototype, "fyPageChange", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FyTableComponent.prototype, "fyRowClick", void 0);
-__decorate([
-    ContentChild('cellTemplate'),
-    __metadata("design:type", TemplateRef)
-], FyTableComponent.prototype, "cellTemplate", void 0);
-FyTableComponent = __decorate([
-    Component({
-        selector: 'fy-table',
-        standalone: true,
-        imports: [
-            CommonModule,
-            FyIconComponent,
-            FyInputComponent,
-            FyButtonComponent
-        ],
-        template: `
+}
+FyTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FyTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FyTableComponent, isStandalone: true, selector: "fy-table", inputs: { data: "data", columns: "columns", title: "title", subtitle: "subtitle", footer: "footer", loading: "loading", showHeader: "showHeader", showFooter: "showFooter", showPagination: "showPagination", showSearch: "showSearch", currentPage: "currentPage", pageSize: "pageSize", totalItems: "totalItems", searchTargets: "searchTargets", actions: "actions", rowClickable: "rowClickable", variant: "variant", stickyHeader: "stickyHeader", scrollable: "scrollable", maxHeight: "maxHeight", activeAnimations: "activeAnimations", activeEffects: "activeEffects", customStyles: "customStyles" }, outputs: { fySearch: "fySearch", fySort: "fySort", fyPageChange: "fyPageChange", fyRowClick: "fyRowClick" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <div
       class="fy-table-container"
       [class.fy-table--scrollable]="scrollable"
@@ -434,210 +306,241 @@ FyTableComponent = __decorate([
         </footer>
       }
     </div>
-  `,
-        styles: [`
-    .fy-table-container {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      background: var(--fy-effects-table-background, #fff);
-      border: 1px solid var(--fy-effects-table-borderColor, rgba(0,0,0,0.08));
-      border-radius: var(--fy-borderRadius-lg, 12px);
-      overflow: hidden;
-    }
-
-    .fy-table__header {
-      padding: var(--fy-spacing-md);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-bottom: 1px solid var(--fy-effects-table-borderColor);
-      gap: 16px;
-      flex-wrap: wrap;
-    }
-
-    .fy-table__header-tools {
-      display: flex;
-      gap: 12px;
-      align-items: center;
-      flex: 1;
-      justify-content: flex-end;
-    }
-
-    .fy-table__header-tools ::ng-deep [fy-table-tools] {
-      display: flex;
-      gap: 8px;
-    }
-
-    .fy-table__actions-group {
-      display: flex;
-      gap: 6px;
-    }
-
-    @media (max-width: 640px) {
-      .fy-table__header-tools {
-        justify-content: flex-start;
-      }
+  `, isInline: true, styles: ["\n    .fy-table-container {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      background: var(--fy-effects-table-background, #fff);\n      border: 1px solid var(--fy-effects-table-borderColor, rgba(0,0,0,0.08));\n      border-radius: var(--fy-borderRadius-lg, 12px);\n      overflow: hidden;\n    }\n\n    .fy-table__header {\n      padding: var(--fy-spacing-md);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-bottom: 1px solid var(--fy-effects-table-borderColor);\n      gap: 16px;\n      flex-wrap: wrap;\n    }\n\n    .fy-table__header-tools {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex: 1;\n      justify-content: flex-end;\n    }\n\n    .fy-table__header-tools ::ng-deep [fy-table-tools] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .fy-table__actions-group {\n      display: flex;\n      gap: 6px;\n    }\n\n    @media (max-width: 640px) {\n      .fy-table__header-tools {\n        justify-content: flex-start;\n      }\n      \n      .fy-table__header-tools ::ng-deep [fy-table-tools] {\n        width: 100%;\n        overflow-x: auto;\n        padding-bottom: 4px;\n      }\n\n      .fy-table__header-tools ::ng-deep [fy-table-tools] fy-button .fy-button__label {\n        display: none;\n      }\n\n      .fy-table__header-tools ::ng-deep [fy-table-tools] fy-button .fy-button {\n        padding: var(--fy-spacing-sm);\n      }\n    }\n\n    .fy-table__title {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-lg);\n      font-weight: var(--fy-typography-fontWeight-bold);\n    }\n\n    .fy-table__subtitle {\n      margin: 4px 0 0;\n      font-size: var(--fy-typography-fontSize-sm);\n      color: var(--fy-colors-secondary);\n    }\n\n    .fy-table__header-tools {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex: 1;\n      justify-content: flex-end;\n    }\n\n    .fy-table__search {\n      max-width: 300px;\n      width: 100%;\n    }\n\n    .fy-table__content {\n      width: 100%;\n      overflow-x: auto;\n    }\n\n    .fy-table {\n      width: 100%;\n      border-collapse: collapse;\n      text-align: left;\n      font-size: var(--fy-typography-fontSize-md);\n    }\n\n    .fy-table th {\n      padding: var(--fy-spacing-md);\n      background: var(--fy-effects-table-headerBackground, rgba(0,0,0,0.02));\n      color: var(--fy-colors-text);\n      font-weight: var(--fy-typography-fontWeight-bold);\n      border-bottom: 1px solid var(--fy-effects-table-borderColor);\n      white-space: nowrap;\n    }\n\n    .fy-table td {\n      padding: var(--fy-spacing-md);\n      border-bottom: 1px solid var(--fy-effects-table-borderColor);\n      color: var(--fy-colors-text);\n    }\n\n    .fy-table__row:last-child td {\n      border-bottom: none;\n    }\n\n    .fy-table__row:hover {\n      background: var(--fy-effects-table-rowHoverBackground, rgba(0,0,0,0.01));\n    }\n\n    .fy-table__row--clickable {\n      cursor: pointer;\n    }\n\n    .fy-table--striped tbody tr:nth-child(even) {\n      background: var(--fy-effects-table-stripedBackground, rgba(0,0,0,0.005));\n    }\n\n    .fy-table--bordered td, \n    .fy-table--bordered th {\n      border: 1px solid var(--fy-effects-table-borderColor);\n    }\n\n    .fy-table--compact td,\n    .fy-table--compact th {\n      padding: var(--fy-spacing-sm);\n    }\n\n    .fy-table__th-content {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .fy-table__th--sortable {\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .fy-table__th--sortable:hover {\n      background: rgba(0,0,0,0.04);\n    }\n\n    .fy-table__footer {\n      padding: var(--fy-spacing-md);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-top: 1px solid var(--fy-effects-table-borderColor);\n      background: var(--fy-effects-table-headerBackground);\n    }\n\n    .fy-table__pagination {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .fy-table__page-info {\n      font-size: var(--fy-typography-fontSize-sm);\n      font-weight: var(--fy-typography-fontWeight-bold);\n    }\n\n    .fy-table__loader {\n      width: 24px;\n      height: 24px;\n      border: 3px solid var(--fy-colors-primary);\n      border-bottom-color: transparent;\n      border-radius: 50%;\n      margin: 24px auto;\n      animation: fy-spin 0.8s linear infinite;\n    }\n\n    @keyframes fy-spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    @media (max-width: 640px) {\n      .fy-table__header {\n        flex-direction: column;\n        align-items: stretch;\n      }\n      .fy-table__search {\n        max-width: 100%;\n      }\n      .fy-table__footer {\n        flex-direction: column;\n        gap: 16px;\n      }\n    }\n  "], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FyIconComponent, selector: "fy-icon", inputs: ["name", "size", "color", "strokeWidth", "variant", "set"] }, { kind: "component", type: FyInputComponent, selector: "fy-input", inputs: ["value", "placeholder", "type", "disabled", "readonly", "mask", "showPasswordToggle", "iconLeft", "iconRight", "iconLeftName", "iconRightName", "size", "status", "activeAnimations", "activeEffects", "customStyles", "focusAnimation", "successAnimation", "errorAnimation", "focusEffect", "successEffect", "errorEffect", "onInput", "onChange", "onFocus", "onBlur"], outputs: ["fyInput", "fyChange", "fyFocus", "fyBlur"] }, { kind: "component", type: FyButtonComponent, selector: "fy-button", inputs: ["label", "variant", "size", "disabled", "loading", "icon", "iconName", "iconSet", "activeAnimations", "activeEffects", "customStyles", "hoverAnimation", "clickAnimation", "successAnimation", "errorAnimation", "hoverEffect", "clickEffect", "successEffect", "errorEffect"], outputs: ["fyClick"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fy-table', standalone: true, imports: [
+                        CommonModule,
+                        FyIconComponent,
+                        FyInputComponent,
+                        FyButtonComponent
+                    ], template: `
+    <div
+      class="fy-table-container"
+      [class.fy-table--scrollable]="scrollable"
+      [class.fy-table--sticky]="stickyHeader"
+      [class]="composeAnimClasses(animationClassSuffix)"
+      [style]="getHostStyles(customStyles)"
       
-      .fy-table__header-tools ::ng-deep [fy-table-tools] {
-        width: 100%;
-        overflow-x: auto;
-        padding-bottom: 4px;
-      }
-
-      .fy-table__header-tools ::ng-deep [fy-table-tools] fy-button .fy-button__label {
-        display: none;
-      }
+    >
+      <!-- Header / Search / Title -->
+      @if (showHeader || title || showSearch) {
+        <header class="fy-table__header">
+          @if (title || subtitle) {
+            <div class="fy-table__header-main">
+              @if (title) { <h3 class="fy-table__title">{{ title }}</h3> }
+              @if (subtitle) { <p class="fy-table__subtitle">{{ subtitle }}</p> }
+            </div>
+          }
 
-      .fy-table__header-tools ::ng-deep [fy-table-tools] fy-button .fy-button {
-        padding: var(--fy-spacing-sm);
+          <div class="fy-table__header-tools">
+            @if (showSearch) {
+              <div class="fy-table__search">
+                <fy-input
+                  placeholder="Pesquisar..."
+                  iconLeftName="search"
+                  size="sm"
+                  (fyInput)="onSearch($event)"
+                ></fy-input>
+              </div>
+            }
+            <ng-content select="[fy-table-tools]"></ng-content>
+          </div>
+        </header>
       }
-    }
-
-    .fy-table__title {
-      margin: 0;
-      font-size: var(--fy-typography-fontSize-lg);
-      font-weight: var(--fy-typography-fontWeight-bold);
-    }
-
-    .fy-table__subtitle {
-      margin: 4px 0 0;
-      font-size: var(--fy-typography-fontSize-sm);
-      color: var(--fy-colors-secondary);
-    }
-
-    .fy-table__header-tools {
-      display: flex;
-      gap: 12px;
-      align-items: center;
-      flex: 1;
-      justify-content: flex-end;
-    }
-
-    .fy-table__search {
-      max-width: 300px;
-      width: 100%;
-    }
-
-    .fy-table__content {
-      width: 100%;
-      overflow-x: auto;
-    }
 
-    .fy-table {
-      width: 100%;
-      border-collapse: collapse;
-      text-align: left;
-      font-size: var(--fy-typography-fontSize-md);
-    }
-
-    .fy-table th {
-      padding: var(--fy-spacing-md);
-      background: var(--fy-effects-table-headerBackground, rgba(0,0,0,0.02));
-      color: var(--fy-colors-text);
-      font-weight: var(--fy-typography-fontWeight-bold);
-      border-bottom: 1px solid var(--fy-effects-table-borderColor);
-      white-space: nowrap;
-    }
-
-    .fy-table td {
-      padding: var(--fy-spacing-md);
-      border-bottom: 1px solid var(--fy-effects-table-borderColor);
-      color: var(--fy-colors-text);
-    }
-
-    .fy-table__row:last-child td {
-      border-bottom: none;
-    }
-
-    .fy-table__row:hover {
-      background: var(--fy-effects-table-rowHoverBackground, rgba(0,0,0,0.01));
-    }
-
-    .fy-table__row--clickable {
-      cursor: pointer;
-    }
-
-    .fy-table--striped tbody tr:nth-child(even) {
-      background: var(--fy-effects-table-stripedBackground, rgba(0,0,0,0.005));
-    }
-
-    .fy-table--bordered td, 
-    .fy-table--bordered th {
-      border: 1px solid var(--fy-effects-table-borderColor);
-    }
-
-    .fy-table--compact td,
-    .fy-table--compact th {
-      padding: var(--fy-spacing-sm);
-    }
-
-    .fy-table__th-content {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .fy-table__th--sortable {
-      cursor: pointer;
-      user-select: none;
-    }
-
-    .fy-table__th--sortable:hover {
-      background: rgba(0,0,0,0.04);
-    }
-
-    .fy-table__footer {
-      padding: var(--fy-spacing-md);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-top: 1px solid var(--fy-effects-table-borderColor);
-      background: var(--fy-effects-table-headerBackground);
-    }
-
-    .fy-table__pagination {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
+      <!-- Table Content -->
+      <div class="fy-table__content" [style.maxHeight]="maxHeight">
+        <table class="fy-table" [class]="'fy-table--' + variant">
+          <thead>
+            <tr>
+              @for (col of visibleColumns; track col.key) {
+                <th
+                  [style.width]="col.width"
+                  [class.fy-table__th--sortable]="col.sortable"
+                  [style.textAlign]="col.align || 'left'"
+                  (click)="onSort(col)"
+                >
+                  <div class="fy-table__th-content">
+                    @if (col.iconName) {
+                      <fy-icon
+                        [name]="col.iconName"
+                        [set]="col.iconSet"
+                        class="fy-table__th-icon"
+                      ></fy-icon>
+                    }
+                    <span>{{ col.label }}</span>
+                    @if (col.sortable) {
+                      <fy-icon
+                        [name]="getSortIcon(col)"
+                        class="fy-table__sort-icon"
+                      ></fy-icon>
+                    }
+                  </div>
+                </th>
+              }
+              @if (actions && actions.length > 0) {
+                <th class="fy-table__th--actions">
+                  Ações
+                </th>
+              }
+            </tr>
+          </thead>
+          <tbody>
+            @if (loading) {
+              <tr class="fy-table__row--loading">
+                <td [attr.colspan]="totalColumns" class="fy-table__td--loading">
+                  <div class="fy-table__loader"></div>
+                </td>
+              </tr>
+            }
+            
+            @if (!loading && (!data || data.length === 0)) {
+              <tr class="fy-table__row--empty">
+                <td [attr.colspan]="totalColumns" class="fy-table__td--empty">
+                  Nenhum registro encontrado.
+                </td>
+              </tr>
+            }
 
-    .fy-table__page-info {
-      font-size: var(--fy-typography-fontSize-sm);
-      font-weight: var(--fy-typography-fontWeight-bold);
-    }
+            @if (!loading) {
+              @for (row of paginatedData; track $index) {
+                <tr
+                  class="fy-table__row"
+                  [class.fy-table__row--clickable]="rowClickable"
+                  (click)="onRowClick(row)"
+                >
+                  @for (col of visibleColumns; track col.key) {
+                    <td
+                      [style.textAlign]="col.align || 'left'"
+                    >
+                      <!-- Custom Cell Template -->
+                      @if (cellTemplate) {
+                        <ng-container *ngTemplateOutlet="cellTemplate; context: { $implicit: row, column: col }"></ng-container>
+                      } @else {
+                        {{ row[col.key] }}
+                      }
+                    </td>
+                  }
+                  
+                  @if (actions && actions.length > 0) {
+                    <td class="fy-table__td--actions">
+                      <div class="fy-table__actions-group">
+                        @for (action of actions; track action.label) {
+                          <fy-button
+                            [iconName]="action.iconName"
+                            [label]="action.label"
+                            [variant]="action.variant || 'ghost'"
+                            size="sm"
+                            (fyClick)="onActionClick($event, action, row)"
+                          ></fy-button>
+                        }
+                      </div>
+                    </td>
+                  }
+                </tr>
+              }
+            }
+          </tbody>
+        </table>
+      </div>
 
-    .fy-table__loader {
-      width: 24px;
-      height: 24px;
-      border: 3px solid var(--fy-colors-primary);
-      border-bottom-color: transparent;
-      border-radius: 50%;
-      margin: 24px auto;
-      animation: fy-spin 0.8s linear infinite;
-    }
+      <!-- Footer / Pagination -->
+      @if (showFooter || showPagination || footer) {
+        <footer class="fy-table__footer">
+          @if (footer || showPagination) {
+            <div class="fy-table__footer-info">
+              @if (footer) { <span>{{ footer }}</span> }
+              @if (showPagination) {
+                <span class="fy-table__pagination-summary">
+                  Mostrando {{ startItem }} - {{ endItem }} de {{ displayTotal }}
+                </span>
+              }
+            </div>
+          }
 
-    @keyframes fy-spin {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-    }
+          @if (showPagination) {
+            <div class="fy-table__pagination">
+              <fy-button
+                variant="ghost"
+                size="sm"
+                iconName="caret-left"
+                [disabled]="currentPage === 1"
+                (fyClick)="onPageChange(currentPage - 1)"
+              ></fy-button>
+              
+              <div class="fy-table__pages">
+                 <span class="fy-table__page-info">{{ currentPage }} / {{ totalPages }}</span>
+              </div>
 
-    @media (max-width: 640px) {
-      .fy-table__header {
-        flex-direction: column;
-        align-items: stretch;
-      }
-      .fy-table__search {
-        max-width: 100%;
-      }
-      .fy-table__footer {
-        flex-direction: column;
-        gap: 16px;
+              <fy-button
+                variant="ghost"
+                size="sm"
+                iconName="caret-right"
+                [disabled]="currentPage === totalPages"
+                (fyClick)="onPageChange(currentPage + 1)"
+              ></fy-button>
+            </div>
+          }
+        </footer>
       }
-    }
-  `],
-        encapsulation: ViewEncapsulation.None
-    }),
-    __metadata("design:paramtypes", [])
-], FyTableComponent);
-export { FyTableComponent };
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: ["\n    .fy-table-container {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      background: var(--fy-effects-table-background, #fff);\n      border: 1px solid var(--fy-effects-table-borderColor, rgba(0,0,0,0.08));\n      border-radius: var(--fy-borderRadius-lg, 12px);\n      overflow: hidden;\n    }\n\n    .fy-table__header {\n      padding: var(--fy-spacing-md);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-bottom: 1px solid var(--fy-effects-table-borderColor);\n      gap: 16px;\n      flex-wrap: wrap;\n    }\n\n    .fy-table__header-tools {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex: 1;\n      justify-content: flex-end;\n    }\n\n    .fy-table__header-tools ::ng-deep [fy-table-tools] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .fy-table__actions-group {\n      display: flex;\n      gap: 6px;\n    }\n\n    @media (max-width: 640px) {\n      .fy-table__header-tools {\n        justify-content: flex-start;\n      }\n      \n      .fy-table__header-tools ::ng-deep [fy-table-tools] {\n        width: 100%;\n        overflow-x: auto;\n        padding-bottom: 4px;\n      }\n\n      .fy-table__header-tools ::ng-deep [fy-table-tools] fy-button .fy-button__label {\n        display: none;\n      }\n\n      .fy-table__header-tools ::ng-deep [fy-table-tools] fy-button .fy-button {\n        padding: var(--fy-spacing-sm);\n      }\n    }\n\n    .fy-table__title {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-lg);\n      font-weight: var(--fy-typography-fontWeight-bold);\n    }\n\n    .fy-table__subtitle {\n      margin: 4px 0 0;\n      font-size: var(--fy-typography-fontSize-sm);\n      color: var(--fy-colors-secondary);\n    }\n\n    .fy-table__header-tools {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex: 1;\n      justify-content: flex-end;\n    }\n\n    .fy-table__search {\n      max-width: 300px;\n      width: 100%;\n    }\n\n    .fy-table__content {\n      width: 100%;\n      overflow-x: auto;\n    }\n\n    .fy-table {\n      width: 100%;\n      border-collapse: collapse;\n      text-align: left;\n      font-size: var(--fy-typography-fontSize-md);\n    }\n\n    .fy-table th {\n      padding: var(--fy-spacing-md);\n      background: var(--fy-effects-table-headerBackground, rgba(0,0,0,0.02));\n      color: var(--fy-colors-text);\n      font-weight: var(--fy-typography-fontWeight-bold);\n      border-bottom: 1px solid var(--fy-effects-table-borderColor);\n      white-space: nowrap;\n    }\n\n    .fy-table td {\n      padding: var(--fy-spacing-md);\n      border-bottom: 1px solid var(--fy-effects-table-borderColor);\n      color: var(--fy-colors-text);\n    }\n\n    .fy-table__row:last-child td {\n      border-bottom: none;\n    }\n\n    .fy-table__row:hover {\n      background: var(--fy-effects-table-rowHoverBackground, rgba(0,0,0,0.01));\n    }\n\n    .fy-table__row--clickable {\n      cursor: pointer;\n    }\n\n    .fy-table--striped tbody tr:nth-child(even) {\n      background: var(--fy-effects-table-stripedBackground, rgba(0,0,0,0.005));\n    }\n\n    .fy-table--bordered td, \n    .fy-table--bordered th {\n      border: 1px solid var(--fy-effects-table-borderColor);\n    }\n\n    .fy-table--compact td,\n    .fy-table--compact th {\n      padding: var(--fy-spacing-sm);\n    }\n\n    .fy-table__th-content {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .fy-table__th--sortable {\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .fy-table__th--sortable:hover {\n      background: rgba(0,0,0,0.04);\n    }\n\n    .fy-table__footer {\n      padding: var(--fy-spacing-md);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-top: 1px solid var(--fy-effects-table-borderColor);\n      background: var(--fy-effects-table-headerBackground);\n    }\n\n    .fy-table__pagination {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .fy-table__page-info {\n      font-size: var(--fy-typography-fontSize-sm);\n      font-weight: var(--fy-typography-fontWeight-bold);\n    }\n\n    .fy-table__loader {\n      width: 24px;\n      height: 24px;\n      border: 3px solid var(--fy-colors-primary);\n      border-bottom-color: transparent;\n      border-radius: 50%;\n      margin: 24px auto;\n      animation: fy-spin 0.8s linear infinite;\n    }\n\n    @keyframes fy-spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    @media (max-width: 640px) {\n      .fy-table__header {\n        flex-direction: column;\n        align-items: stretch;\n      }\n      .fy-table__search {\n        max-width: 100%;\n      }\n      .fy-table__footer {\n        flex-direction: column;\n        gap: 16px;\n      }\n    }\n  "] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
+            }], showPagination: [{
+                type: Input
+            }], showSearch: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], totalItems: [{
+                type: Input
+            }], searchTargets: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], rowClickable: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], stickyHeader: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], activeAnimations: [{
+                type: Input
+            }], activeEffects: [{
+                type: Input
+            }], customStyles: [{
+                type: Input
+            }], fySearch: [{
+                type: Output
+            }], fySort: [{
+                type: Output
+            }], fyPageChange: [{
+                type: Output
+            }], fyRowClick: [{
+                type: Output
+            }], cellTemplate: [{
+                type: ContentChild,
+                args: ['cellTemplate']
+            }] } });

package/dist/components/text.component.d.ts

@@ -1,3 +1,4 @@
+import * as i0 from "@angular/core";
 export declare class FyTextComponent {
     private fylib;
     private _raw;
@@ -5,4 +6,6 @@ export declare class FyTextComponent {
     cryptoEnabled: boolean;
     value: import("@angular/core").WritableSignal<string>;
     constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<FyTextComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FyTextComponent, "fy-text", never, { "text": { "alias": "text"; "required": false; }; "cryptoEnabled": { "alias": "cryptoEnabled"; "required": false; }; }, {}, never, never, true, never>;
 }