@aiandralves/ai-ui 1.0.0

package/esm2022/lib/components/stepper/stepper.variants.js

@@ -0,0 +1,64 @@
+import { cva } from "class-variance-authority";
+export const stepperVariants = cva("flex flex-col w-full", {
+    variants: {
+        orientation: {
+            horizontal: "",
+            vertical: "",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+export const stepperHeaderVariants = cva("flex w-full", {
+    variants: {
+        orientation: {
+            horizontal: "flex-row items-center mb-6",
+            vertical: "flex-col items-start gap-1",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+export const stepCircleVariants = cva("flex items-center justify-center rounded-full text-sm font-medium transition-colors size-8 shrink-0", {
+    variants: {
+        state: {
+            active: "bg-primary text-primary-foreground",
+            completed: "bg-primary text-primary-foreground",
+            inactive: "bg-muted text-muted-foreground border border-border",
+        },
+    },
+    defaultVariants: {
+        state: "inactive",
+    },
+});
+export const stepLabelVariants = cva("text-sm font-medium transition-colors whitespace-nowrap", {
+    variants: {
+        state: {
+            active: "text-foreground",
+            completed: "text-foreground",
+            inactive: "text-muted-foreground",
+        },
+    },
+    defaultVariants: {
+        state: "inactive",
+    },
+});
+export const stepConnectorVariants = cva("transition-colors shrink-0", {
+    variants: {
+        completed: {
+            true: "bg-primary",
+            false: "bg-border",
+        },
+        orientation: {
+            horizontal: "flex-1 h-0.5 mx-2",
+            vertical: "w-0.5 grow my-1",
+        },
+    },
+    defaultVariants: {
+        completed: false,
+        orientation: "horizontal",
+    },
+});
+//# sourceMappingURL=stepper.variants.js.map

package/esm2022/lib/components/stepper/stepper.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.variants.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/stepper/stepper.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,sBAAsB,EAAE;IACvD,QAAQ,EAAE;QACN,WAAW,EAAE;YACT,UAAU,EAAE,EAAE;YACd,QAAQ,EAAE,EAAE;SACf;KACJ;IACD,eAAe,EAAE;QACb,WAAW,EAAE,YAAY;KAC5B;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC,aAAa,EAAE;IACpD,QAAQ,EAAE;QACN,WAAW,EAAE;YACT,UAAU,EAAE,4BAA4B;YACxC,QAAQ,EAAE,4BAA4B;SACzC;KACJ;IACD,eAAe,EAAE;QACb,WAAW,EAAE,YAAY;KAC5B;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAC,qGAAqG,EAAE;IACzI,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,MAAM,EAAE,oCAAoC;YAC5C,SAAS,EAAE,oCAAoC;YAC/C,QAAQ,EAAE,qDAAqD;SAClE;KACJ;IACD,eAAe,EAAE;QACb,KAAK,EAAE,UAAU;KACpB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC,yDAAyD,EAAE;IAC5F,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,MAAM,EAAE,iBAAiB;YACzB,SAAS,EAAE,iBAAiB;YAC5B,QAAQ,EAAE,uBAAuB;SACpC;KACJ;IACD,eAAe,EAAE;QACb,KAAK,EAAE,UAAU;KACpB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC,4BAA4B,EAAE;IACnE,QAAQ,EAAE;QACN,SAAS,EAAE;YACP,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,WAAW;SACrB;QACD,WAAW,EAAE;YACT,UAAU,EAAE,mBAAmB;YAC/B,QAAQ,EAAE,iBAAiB;SAC9B;KACJ;IACD,eAAe,EAAE;QACb,SAAS,EAAE,KAAK;QAChB,WAAW,EAAE,YAAY;KAC5B;CACJ,CAAC,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nexport const stepperVariants = cva(\"flex flex-col w-full\", {\r\n    variants: {\r\n        orientation: {\r\n            horizontal: \"\",\r\n            vertical: \"\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        orientation: \"horizontal\",\r\n    },\r\n});\r\n\r\nexport const stepperHeaderVariants = cva(\"flex w-full\", {\r\n    variants: {\r\n        orientation: {\r\n            horizontal: \"flex-row items-center mb-6\",\r\n            vertical: \"flex-col items-start gap-1\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        orientation: \"horizontal\",\r\n    },\r\n});\r\n\r\nexport const stepCircleVariants = cva(\"flex items-center justify-center rounded-full text-sm font-medium transition-colors size-8 shrink-0\", {\r\n    variants: {\r\n        state: {\r\n            active: \"bg-primary text-primary-foreground\",\r\n            completed: \"bg-primary text-primary-foreground\",\r\n            inactive: \"bg-muted text-muted-foreground border border-border\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        state: \"inactive\",\r\n    },\r\n});\r\n\r\nexport const stepLabelVariants = cva(\"text-sm font-medium transition-colors whitespace-nowrap\", {\r\n    variants: {\r\n        state: {\r\n            active: \"text-foreground\",\r\n            completed: \"text-foreground\",\r\n            inactive: \"text-muted-foreground\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        state: \"inactive\",\r\n    },\r\n});\r\n\r\nexport const stepConnectorVariants = cva(\"transition-colors shrink-0\", {\r\n    variants: {\r\n        completed: {\r\n            true: \"bg-primary\",\r\n            false: \"bg-border\",\r\n        },\r\n        orientation: {\r\n            horizontal: \"flex-1 h-0.5 mx-2\",\r\n            vertical: \"w-0.5 grow my-1\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        completed: false,\r\n        orientation: \"horizontal\",\r\n    },\r\n});\r\n\r\nexport type StepperVariants = VariantProps<typeof stepperVariants>;\r\nexport type StepCircleVariants = VariantProps<typeof stepCircleVariants>;\r\n"]}

package/esm2022/lib/components/table/cell-template.directive.js

@@ -0,0 +1,18 @@
+import { Directive, inject, Input, TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+export class AiCellTemplateDirective {
+    key;
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: AiCellTemplateDirective, isStandalone: true, selector: "ng-template[aiCellTemplate]", inputs: { key: ["aiCellTemplate", "key"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[aiCellTemplate]",
+                }]
+        }], propDecorators: { key: [{
+                type: Input,
+                args: ["aiCellTemplate"]
+            }] } });
+//# sourceMappingURL=cell-template.directive.js.map

package/esm2022/lib/components/table/cell-template.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell-template.directive.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/table/cell-template.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAKtE,MAAM,OAAO,uBAAuB;IACP,GAAG,CAAU;IAEtC,QAAQ,GAAG,MAAM,CAAC,CAAA,WAA6B,CAAA,CAAC,CAAC;uGAHxC,uBAAuB;2FAAvB,uBAAuB;;2FAAvB,uBAAuB;kBAHnC,SAAS;mBAAC;oBACP,QAAQ,EAAE,6BAA6B;iBAC1C;;sBAEI,KAAK;uBAAC,gBAAgB","sourcesContent":["import { Directive, inject, Input, TemplateRef } from \"@angular/core\";\r\n\r\n@Directive({\r\n    selector: \"ng-template[aiCellTemplate]\",\r\n})\r\nexport class AiCellTemplateDirective<T = unknown> {\r\n    @Input(\"aiCellTemplate\") key!: string;\r\n\r\n    template = inject(TemplateRef<{ $implicit: T }>);\r\n}\r\n"]}

package/esm2022/lib/components/table/demo/border.js

@@ -0,0 +1,30 @@
+import { Component, computed, signal } from "@angular/core";
+import { AiTable } from "../table";
+import { COLUMNS, USERS } from "./user";
+import * as i0 from "@angular/core";
+export class DemoTableBorderComponent {
+    columns = signal(COLUMNS, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    data = USERS;
+    config = computed(() => ({ columns: this.columns(), data: this.data }), ...(ngDevMode ? [{ debugName: "config" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTableBorderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoTableBorderComponent, isStandalone: true, selector: "ai-demo-table-border", ngImport: i0, template: `
+        <div class="flex flex-col gap-8 w-full max-w-2xl">
+            <ai-table [config]="config()" [border]="'outline'" />
+            <ai-table [config]="config()" [border]="'simple'" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTable, selector: "ai-table", inputs: ["config", "size", "border", "class", "selectable", "pagination"], outputs: ["selectionChange", "rowClick", "pageChange", "pageSizeChange", "sortChange"], exportAs: ["aiTable"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTableBorderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-demo-table-border",
+                    imports: [AiTable],
+                    template: `
+        <div class="flex flex-col gap-8 w-full max-w-2xl">
+            <ai-table [config]="config()" [border]="'outline'" />
+            <ai-table [config]="config()" [border]="'simple'" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=border.js.map

package/esm2022/lib/components/table/demo/border.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"border.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/table/demo/border.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAS,KAAK,EAAE,MAAM,QAAQ,CAAC;;AAY/C,MAAM,OAAO,wBAAwB;IACjC,OAAO,GAAG,MAAM,CAAyB,OAAO,mDAAC,CAAC;IAClD,IAAI,GAAG,KAAK,CAAC;IAEb,MAAM,GAAG,QAAQ,CAAuB,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,kDAAC,CAAC;uGAJrF,wBAAwB;2FAAxB,wBAAwB,gFAPvB;;;;;KAKT,4DANS,OAAO;;2FAQR,wBAAwB;kBAVpC,SAAS;mBAAC;oBACP,QAAQ,EAAE,sBAAsB;oBAChC,OAAO,EAAE,CAAC,OAAO,CAAC;oBAClB,QAAQ,EAAE;;;;;KAKT;iBACJ","sourcesContent":["import { Component, computed, signal } from \"@angular/core\";\r\n\r\nimport { AiTable } from \"../table\";\r\nimport { AiTableColumn, AiTableConfig } from \"../table.config\";\r\nimport { COLUMNS, iUser, USERS } from \"./user\";\r\n\r\n@Component({\r\n    selector: \"ai-demo-table-border\",\r\n    imports: [AiTable],\r\n    template: `\r\n        <div class=\"flex flex-col gap-8 w-full max-w-2xl\">\r\n            <ai-table [config]=\"config()\" [border]=\"'outline'\" />\r\n            <ai-table [config]=\"config()\" [border]=\"'simple'\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTableBorderComponent {\r\n    columns = signal<AiTableColumn<iUser>[]>(COLUMNS);\r\n    data = USERS;\r\n\r\n    config = computed<AiTableConfig<iUser>>(() => ({ columns: this.columns(), data: this.data }));\r\n}\r\n"]}

package/esm2022/lib/components/table/demo/default.js

@@ -0,0 +1,48 @@
+import { Component, computed, signal } from "@angular/core";
+import { AiBadge } from "../../badge";
+import { AiCellTemplateDirective } from "../cell-template.directive";
+import { AiTable } from "../table";
+import { COLUMNS, USERS } from "./user";
+import * as i0 from "@angular/core";
+export class DemoTableDefaultComponent {
+    columns = signal(COLUMNS, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    data = USERS;
+    clicked = signal(null, ...(ngDevMode ? [{ debugName: "clicked" }] : []));
+    config = computed(() => ({ columns: this.columns(), data: this.data }), ...(ngDevMode ? [{ debugName: "config" }] : []));
+    onRowClick(row) {
+        this.clicked.set(row);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTableDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoTableDefaultComponent, isStandalone: true, selector: "ai-demo-table", ngImport: i0, template: `
+        <div class="flex flex-col gap-8 w-full max-w-2xl">
+            <ai-table [config]="config()" (rowClick)="onRowClick($event)">
+                <ng-template aiCellTemplate="age" let-item>
+                    <ai-badge shape="circle">{{ item.age }} anos</ai-badge>
+                </ng-template>
+            </ai-table>
+            @if (clicked()) {
+                <p class="text-xs text-muted-foreground">Clicou em: {{ clicked()?.name }}</p>
+            }
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTable, selector: "ai-table", inputs: ["config", "size", "border", "class", "selectable", "pagination"], outputs: ["selectionChange", "rowClick", "pageChange", "pageSizeChange", "sortChange"], exportAs: ["aiTable"] }, { kind: "component", type: AiBadge, selector: "ai-badge", inputs: ["variant", "shape", "fill", "icon", "disabled", "close", "class"], outputs: ["closed"], exportAs: ["aiBadge"] }, { kind: "directive", type: AiCellTemplateDirective, selector: "ng-template[aiCellTemplate]", inputs: ["aiCellTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTableDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-demo-table",
+                    imports: [AiTable, AiBadge, AiCellTemplateDirective],
+                    template: `
+        <div class="flex flex-col gap-8 w-full max-w-2xl">
+            <ai-table [config]="config()" (rowClick)="onRowClick($event)">
+                <ng-template aiCellTemplate="age" let-item>
+                    <ai-badge shape="circle">{{ item.age }} anos</ai-badge>
+                </ng-template>
+            </ai-table>
+            @if (clicked()) {
+                <p class="text-xs text-muted-foreground">Clicou em: {{ clicked()?.name }}</p>
+            }
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

package/esm2022/lib/components/table/demo/default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/table/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAS,KAAK,EAAE,MAAM,QAAQ,CAAC;;AAkB/C,MAAM,OAAO,yBAAyB;IAClC,OAAO,GAAG,MAAM,CAAyB,OAAO,mDAAC,CAAC;IAClD,IAAI,GAAG,KAAK,CAAC;IACb,OAAO,GAAG,MAAM,CAAe,IAAI,mDAAC,CAAC;IAErC,MAAM,GAAG,QAAQ,CAAuB,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,kDAAC,CAAC;IAE9F,UAAU,CAAC,GAAU;QACjB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;uGATQ,yBAAyB;2FAAzB,yBAAyB,yEAbxB;;;;;;;;;;;KAWT,4DAZS,OAAO,+OAAE,OAAO,6KAAE,uBAAuB;;2FAc1C,yBAAyB;kBAhBrC,SAAS;mBAAC;oBACP,QAAQ,EAAE,eAAe;oBACzB,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,uBAAuB,CAAC;oBACpD,QAAQ,EAAE;;;;;;;;;;;KAWT;iBACJ","sourcesContent":["import { Component, computed, signal } from \"@angular/core\";\r\n\r\nimport { AiBadge } from \"../../badge\";\r\nimport { AiCellTemplateDirective } from \"../cell-template.directive\";\r\nimport { AiTable } from \"../table\";\r\nimport { AiTableColumn, AiTableConfig } from \"../table.config\";\r\nimport { COLUMNS, iUser, USERS } from \"./user\";\r\n\r\n@Component({\r\n    selector: \"ai-demo-table\",\r\n    imports: [AiTable, AiBadge, AiCellTemplateDirective],\r\n    template: `\r\n        <div class=\"flex flex-col gap-8 w-full max-w-2xl\">\r\n            <ai-table [config]=\"config()\" (rowClick)=\"onRowClick($event)\">\r\n                <ng-template aiCellTemplate=\"age\" let-item>\r\n                    <ai-badge shape=\"circle\">{{ item.age }} anos</ai-badge>\r\n                </ng-template>\r\n            </ai-table>\r\n            @if (clicked()) {\r\n                <p class=\"text-xs text-muted-foreground\">Clicou em: {{ clicked()?.name }}</p>\r\n            }\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTableDefaultComponent {\r\n    columns = signal<AiTableColumn<iUser>[]>(COLUMNS);\r\n    data = USERS;\r\n    clicked = signal<iUser | null>(null);\r\n\r\n    config = computed<AiTableConfig<iUser>>(() => ({ columns: this.columns(), data: this.data }));\r\n\r\n    onRowClick(row: iUser) {\r\n        this.clicked.set(row);\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/table/demo/pagination.js

@@ -0,0 +1,69 @@
+import { Component, computed, signal } from "@angular/core";
+import { AiTable } from "../table";
+import { COLUMNS, USERS, userTypeEnum } from "./user";
+import * as i0 from "@angular/core";
+export class DemoTablePaginationComponent {
+    columns = signal(COLUMNS, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    data = [
+        ...USERS,
+        { id: "6", name: "Diana Prince", age: 32, type: userTypeEnum.SUPORT },
+        { id: "7", name: "Edward Davis", age: 45, type: userTypeEnum.ADMIN },
+        { id: "8", name: "Fiona Green", age: 22, type: userTypeEnum.MANAGER },
+        { id: "9", name: "George Hall", age: 38, type: userTypeEnum.SUPORT },
+        { id: "10", name: "Hannah Lee", age: 27, type: userTypeEnum.MANAGER },
+        { id: "11", name: "Ivan Martin", age: 33, type: userTypeEnum.ADMIN },
+        { id: "12", name: "Julia Clark", age: 29, type: userTypeEnum.SUPORT },
+        { id: "13", name: "Kevin White", age: 42, type: userTypeEnum.MANAGER },
+        { id: "14", name: "Laura Harris", age: 26, type: userTypeEnum.ADMIN },
+        { id: "15", name: "Michael Scott", age: 48, type: userTypeEnum.ADMIN },
+        { id: "16", name: "Nancy Lewis", age: 31, type: userTypeEnum.MANAGER },
+        { id: "17", name: "Oscar Young", age: 36, type: userTypeEnum.SUPORT },
+        { id: "18", name: "Patricia King", age: 24, type: userTypeEnum.MANAGER },
+        { id: "19", name: "Quinn Adams", age: 39, type: userTypeEnum.ADMIN },
+        { id: "20", name: "Rachel Moore", age: 23, type: userTypeEnum.SUPORT },
+    ];
+    pageIndex = signal(1, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
+    pageSize = signal(5, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    pagedData = computed(() => {
+        const start = (this.pageIndex() - 1) * this.pageSize();
+        return this.data.slice(start, start + this.pageSize());
+    }, ...(ngDevMode ? [{ debugName: "pagedData" }] : []));
+    config = computed(() => ({
+        columns: this.columns(),
+        data: this.pagedData(),
+    }), ...(ngDevMode ? [{ debugName: "config" }] : []));
+    paginationConfig = computed(() => ({
+        pageIndex: this.pageIndex(),
+        pageSize: this.pageSize(),
+        totalItems: this.data.length,
+        showInfo: true,
+        showPageSize: true,
+        pageSizeOptions: [5, 10, 20],
+    }), ...(ngDevMode ? [{ debugName: "paginationConfig" }] : []));
+    onPageChange(page) {
+        this.pageIndex.set(page);
+    }
+    onPageSizeChange(size) {
+        this.pageSize.set(size);
+        this.pageIndex.set(1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoTablePaginationComponent, isStandalone: true, selector: "ai-demo-table-pagination", ngImport: i0, template: `
+        <div class="flex flex-col gap-4 w-full">
+            <ai-table [config]="config()" [pagination]="paginationConfig()" (pageChange)="onPageChange($event)" (pageSizeChange)="onPageSizeChange($event)" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTable, selector: "ai-table", inputs: ["config", "size", "border", "class", "selectable", "pagination"], outputs: ["selectionChange", "rowClick", "pageChange", "pageSizeChange", "sortChange"], exportAs: ["aiTable"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTablePaginationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-demo-table-pagination",
+                    imports: [AiTable],
+                    template: `
+        <div class="flex flex-col gap-4 w-full">
+            <ai-table [config]="config()" [pagination]="paginationConfig()" (pageChange)="onPageChange($event)" (pageSizeChange)="onPageSizeChange($event)" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=pagination.js.map

package/esm2022/lib/components/table/demo/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/table/demo/pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, computed, signal } from \"@angular/core\";\r\n\r\nimport { AiTable } from \"../table\";\r\nimport { AiTableColumn, AiTableConfig, AiTablePagination } from \"../table.config\";\r\nimport { COLUMNS, iUser, USERS, userTypeEnum } from \"./user\";\r\n\r\n@Component({\r\n    selector: \"ai-demo-table-pagination\",\r\n    imports: [AiTable],\r\n    template: `\r\n        <div class=\"flex flex-col gap-4 w-full\">\r\n            <ai-table [config]=\"config()\" [pagination]=\"paginationConfig()\" (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTablePaginationComponent {\r\n    columns = signal<AiTableColumn<iUser>[]>(COLUMNS);\r\n    data = [\r\n        ...USERS,\r\n        { id: \"6\", name: \"Diana Prince\", age: 32, type: userTypeEnum.SUPORT },\r\n        { id: \"7\", name: \"Edward Davis\", age: 45, type: userTypeEnum.ADMIN },\r\n        { id: \"8\", name: \"Fiona Green\", age: 22, type: userTypeEnum.MANAGER },\r\n        { id: \"9\", name: \"George Hall\", age: 38, type: userTypeEnum.SUPORT },\r\n        { id: \"10\", name: \"Hannah Lee\", age: 27, type: userTypeEnum.MANAGER },\r\n        { id: \"11\", name: \"Ivan Martin\", age: 33, type: userTypeEnum.ADMIN },\r\n        { id: \"12\", name: \"Julia Clark\", age: 29, type: userTypeEnum.SUPORT },\r\n        { id: \"13\", name: \"Kevin White\", age: 42, type: userTypeEnum.MANAGER },\r\n        { id: \"14\", name: \"Laura Harris\", age: 26, type: userTypeEnum.ADMIN },\r\n        { id: \"15\", name: \"Michael Scott\", age: 48, type: userTypeEnum.ADMIN },\r\n        { id: \"16\", name: \"Nancy Lewis\", age: 31, type: userTypeEnum.MANAGER },\r\n        { id: \"17\", name: \"Oscar Young\", age: 36, type: userTypeEnum.SUPORT },\r\n        { id: \"18\", name: \"Patricia King\", age: 24, type: userTypeEnum.MANAGER },\r\n        { id: \"19\", name: \"Quinn Adams\", age: 39, type: userTypeEnum.ADMIN },\r\n        { id: \"20\", name: \"Rachel Moore\", age: 23, type: userTypeEnum.SUPORT },\r\n    ];\r\n\r\n    readonly pageIndex = signal(1);\r\n    readonly pageSize = signal(5);\r\n\r\n    readonly pagedData = computed(() => {\r\n        const start = (this.pageIndex() - 1) * this.pageSize();\r\n        return this.data.slice(start, start + this.pageSize());\r\n    });\r\n\r\n    readonly config = computed<AiTableConfig<iUser>>(() => ({\r\n        columns: this.columns(),\r\n        data: this.pagedData(),\r\n    }));\r\n\r\n    readonly paginationConfig = computed<AiTablePagination>(() => ({\r\n        pageIndex: this.pageIndex(),\r\n        pageSize: this.pageSize(),\r\n        totalItems: this.data.length,\r\n        showInfo: true,\r\n        showPageSize: true,\r\n        pageSizeOptions: [5, 10, 20],\r\n    }));\r\n\r\n    onPageChange(page: number): void {\r\n        this.pageIndex.set(page);\r\n    }\r\n\r\n    onPageSizeChange(size: number): void {\r\n        this.pageSize.set(size);\r\n        this.pageIndex.set(1);\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/table/demo/selected.js

@@ -0,0 +1,34 @@
+import { Component, computed, signal } from "@angular/core";
+import { AiTable } from "../table";
+import { COLUMNS, USERS } from "./user";
+import * as i0 from "@angular/core";
+export class DemoTableSelectedComponent {
+    columns = signal(COLUMNS, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    data = USERS;
+    selected = signal([], ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    config = computed(() => ({ columns: this.columns(), data: this.data }), ...(ngDevMode ? [{ debugName: "config" }] : []));
+    onSelected(selected) {
+        this.selected.set(selected);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTableSelectedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoTableSelectedComponent, isStandalone: true, selector: "ai-demo-table-selected", ngImport: i0, template: `
+        <div class="flex flex-col gap-8 w-full max-w-2xl">
+            <ai-table [config]="config()" selectable (selectionChange)="onSelected($event)" />
+            <p class="text-xs text-muted-foreground">Selecionados: {{ selected().length }}</p>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTable, selector: "ai-table", inputs: ["config", "size", "border", "class", "selectable", "pagination"], outputs: ["selectionChange", "rowClick", "pageChange", "pageSizeChange", "sortChange"], exportAs: ["aiTable"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTableSelectedComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-demo-table-selected",
+                    imports: [AiTable],
+                    template: `
+        <div class="flex flex-col gap-8 w-full max-w-2xl">
+            <ai-table [config]="config()" selectable (selectionChange)="onSelected($event)" />
+            <p class="text-xs text-muted-foreground">Selecionados: {{ selected().length }}</p>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=selected.js.map

package/esm2022/lib/components/table/demo/selected.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selected.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/table/demo/selected.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAS,KAAK,EAAE,MAAM,QAAQ,CAAC;;AAY/C,MAAM,OAAO,0BAA0B;IACnC,OAAO,GAAG,MAAM,CAAyB,OAAO,mDAAC,CAAC;IAClD,IAAI,GAAG,KAAK,CAAC;IACb,QAAQ,GAAG,MAAM,CAAU,EAAE,oDAAC,CAAC;IAE/B,MAAM,GAAG,QAAQ,CAAuB,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,kDAAC,CAAC;IAE9F,UAAU,CAAC,QAAiB;QACxB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAChC,CAAC;uGATQ,0BAA0B;2FAA1B,0BAA0B,kFAPzB;;;;;KAKT,4DANS,OAAO;;2FAQR,0BAA0B;kBAVtC,SAAS;mBAAC;oBACP,QAAQ,EAAE,wBAAwB;oBAClC,OAAO,EAAE,CAAC,OAAO,CAAC;oBAClB,QAAQ,EAAE;;;;;KAKT;iBACJ","sourcesContent":["import { Component, computed, signal } from \"@angular/core\";\r\n\r\nimport { AiTable } from \"../table\";\r\nimport { AiTableColumn, AiTableConfig } from \"../table.config\";\r\nimport { COLUMNS, iUser, USERS } from \"./user\";\r\n\r\n@Component({\r\n    selector: \"ai-demo-table-selected\",\r\n    imports: [AiTable],\r\n    template: `\r\n        <div class=\"flex flex-col gap-8 w-full max-w-2xl\">\r\n            <ai-table [config]=\"config()\" selectable (selectionChange)=\"onSelected($event)\" />\r\n            <p class=\"text-xs text-muted-foreground\">Selecionados: {{ selected().length }}</p>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTableSelectedComponent {\r\n    columns = signal<AiTableColumn<iUser>[]>(COLUMNS);\r\n    data = USERS;\r\n    selected = signal<iUser[]>([]);\r\n\r\n    config = computed<AiTableConfig<iUser>>(() => ({ columns: this.columns(), data: this.data }));\r\n\r\n    onSelected(selected: iUser[]) {\r\n        this.selected.set(selected);\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/table/demo/size.js

@@ -0,0 +1,55 @@
+import { Component, computed, signal } from "@angular/core";
+import { AiSeparator } from "../../separator";
+import { AiTable } from "../table";
+import { COLUMNS, USERS } from "./user";
+import * as i0 from "@angular/core";
+export class DemoTableSizeComponent {
+    columns = signal(COLUMNS, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    data = USERS;
+    config = computed(() => ({ columns: this.columns(), data: this.data }), ...(ngDevMode ? [{ debugName: "config" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTableSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoTableSizeComponent, isStandalone: true, selector: "ai-demo-table-size", ngImport: i0, template: `
+        <div class="flex flex-col gap-4 w-full max-w-2xl">
+            <div class="flex flex-col gap-y-2">
+                <h2 class="text-primary text-sm font-bold">Table Compact</h2>
+                <ai-table [config]="config()" size="compact" />
+                <ai-separator />
+            </div>
+            <div class="flex flex-col gap-y-2">
+                <h2 class="text-primary text-sm font-bold">Table Default</h2>
+                <ai-table [config]="config()" size="default" />
+                <ai-separator />
+            </div>
+            <div class="flex flex-col gap-y-2">
+                <h2 class="text-primary text-sm font-bold">Table Comfortable</h2>
+                <ai-table [config]="config()" size="comfortable" />
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTable, selector: "ai-table", inputs: ["config", "size", "border", "class", "selectable", "pagination"], outputs: ["selectionChange", "rowClick", "pageChange", "pageSizeChange", "sortChange"], exportAs: ["aiTable"] }, { kind: "component", type: AiSeparator, selector: "ai-separator", inputs: ["orientation", "class"], exportAs: ["aiSeparator"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTableSizeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-demo-table-size",
+                    imports: [AiTable, AiSeparator],
+                    template: `
+        <div class="flex flex-col gap-4 w-full max-w-2xl">
+            <div class="flex flex-col gap-y-2">
+                <h2 class="text-primary text-sm font-bold">Table Compact</h2>
+                <ai-table [config]="config()" size="compact" />
+                <ai-separator />
+            </div>
+            <div class="flex flex-col gap-y-2">
+                <h2 class="text-primary text-sm font-bold">Table Default</h2>
+                <ai-table [config]="config()" size="default" />
+                <ai-separator />
+            </div>
+            <div class="flex flex-col gap-y-2">
+                <h2 class="text-primary text-sm font-bold">Table Comfortable</h2>
+                <ai-table [config]="config()" size="comfortable" />
+            </div>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=size.js.map

package/esm2022/lib/components/table/demo/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/table/demo/size.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAS,KAAK,EAAE,MAAM,QAAQ,CAAC;;AAwB/C,MAAM,OAAO,sBAAsB;IAC/B,OAAO,GAAG,MAAM,CAAyB,OAAO,mDAAC,CAAC;IAClD,IAAI,GAAG,KAAK,CAAC;IAEb,MAAM,GAAG,QAAQ,CAAuB,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,kDAAC,CAAC;uGAJrF,sBAAsB;2FAAtB,sBAAsB,8EAnBrB;;;;;;;;;;;;;;;;;KAiBT,4DAlBS,OAAO,+OAAE,WAAW;;2FAoBrB,sBAAsB;kBAtBlC,SAAS;mBAAC;oBACP,QAAQ,EAAE,oBAAoB;oBAC9B,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC;oBAC/B,QAAQ,EAAE;;;;;;;;;;;;;;;;;KAiBT;iBACJ","sourcesContent":["import { Component, computed, signal } from \"@angular/core\";\r\n\r\nimport { AiSeparator } from \"../../separator\";\r\nimport { AiTable } from \"../table\";\r\nimport { AiTableColumn, AiTableConfig } from \"../table.config\";\r\nimport { COLUMNS, iUser, USERS } from \"./user\";\r\n\r\n@Component({\r\n    selector: \"ai-demo-table-size\",\r\n    imports: [AiTable, AiSeparator],\r\n    template: `\r\n        <div class=\"flex flex-col gap-4 w-full max-w-2xl\">\r\n            <div class=\"flex flex-col gap-y-2\">\r\n                <h2 class=\"text-primary text-sm font-bold\">Table Compact</h2>\r\n                <ai-table [config]=\"config()\" size=\"compact\" />\r\n                <ai-separator />\r\n            </div>\r\n            <div class=\"flex flex-col gap-y-2\">\r\n                <h2 class=\"text-primary text-sm font-bold\">Table Default</h2>\r\n                <ai-table [config]=\"config()\" size=\"default\" />\r\n                <ai-separator />\r\n            </div>\r\n            <div class=\"flex flex-col gap-y-2\">\r\n                <h2 class=\"text-primary text-sm font-bold\">Table Comfortable</h2>\r\n                <ai-table [config]=\"config()\" size=\"comfortable\" />\r\n            </div>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTableSizeComponent {\r\n    columns = signal<AiTableColumn<iUser>[]>(COLUMNS);\r\n    data = USERS;\r\n\r\n    config = computed<AiTableConfig<iUser>>(() => ({ columns: this.columns(), data: this.data }));\r\n}\r\n"]}

package/esm2022/lib/components/table/demo/sort.js

@@ -0,0 +1,59 @@
+import { Component, computed, signal } from "@angular/core";
+import { AiTable } from "../table";
+import { USERS } from "./user";
+import * as i0 from "@angular/core";
+const SORTABLE_COLUMNS = [
+    { key: "id", label: "ID", width: "80px" },
+    { key: "name", label: "Name", sortable: true },
+    { key: "age", label: "Age", sortable: true },
+];
+export class DemoTableSortComponent {
+    sort = signal(null, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+    sortedData = computed(() => {
+        const s = this.sort();
+        if (!s)
+            return USERS;
+        return [...USERS].sort((a, b) => {
+            const valA = a[s.field];
+            const valB = b[s.field];
+            const cmp = valA < valB ? -1 : valA > valB ? 1 : 0;
+            return s.direction === "asc" ? cmp : -cmp;
+        });
+    }, ...(ngDevMode ? [{ debugName: "sortedData" }] : []));
+    config = computed(() => ({
+        columns: SORTABLE_COLUMNS,
+        data: this.sortedData(),
+    }), ...(ngDevMode ? [{ debugName: "config" }] : []));
+    onSortChange(sort) {
+        this.sort.set(sort);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTableSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoTableSortComponent, isStandalone: true, selector: "ai-demo-table-sort", ngImport: i0, template: `
+        <div class="flex flex-col gap-4 w-full max-w-2xl">
+            <ai-table [config]="config()" (sortChange)="onSortChange($event)" />
+            @if (sort()) {
+                <p class="text-xs text-muted-foreground">
+                    Ordenando por: <strong>{{ sort()?.field }}</strong> ({{ sort()?.direction }})
+                </p>
+            }
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTable, selector: "ai-table", inputs: ["config", "size", "border", "class", "selectable", "pagination"], outputs: ["selectionChange", "rowClick", "pageChange", "pageSizeChange", "sortChange"], exportAs: ["aiTable"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTableSortComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-demo-table-sort",
+                    imports: [AiTable],
+                    template: `
+        <div class="flex flex-col gap-4 w-full max-w-2xl">
+            <ai-table [config]="config()" (sortChange)="onSortChange($event)" />
+            @if (sort()) {
+                <p class="text-xs text-muted-foreground">
+                    Ordenando por: <strong>{{ sort()?.field }}</strong> ({{ sort()?.direction }})
+                </p>
+            }
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=sort.js.map

package/esm2022/lib/components/table/demo/sort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/table/demo/sort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EAAS,KAAK,EAAE,MAAM,QAAQ,CAAC;;AAEtC,MAAM,gBAAgB,GAA2B;IAC7C,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;IACzC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;IAC9C,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE;CAC/C,CAAC;AAgBF,MAAM,OAAO,sBAAsB;IACtB,IAAI,GAAG,MAAM,CAAqB,IAAI,gDAAC,CAAC;IAExC,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE;QAChC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QACtB,IAAI,CAAC,CAAC;YAAE,OAAO,KAAK,CAAC;QACrB,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YAC5B,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,KAAoB,CAAC,CAAC;YACvC,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,KAAoB,CAAC,CAAC;YACvC,MAAM,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACnD,OAAO,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAC9C,CAAC,CAAC,CAAC;IACP,CAAC,sDAAC,CAAC;IAEM,MAAM,GAAG,QAAQ,CAAuB,GAAG,EAAE,CAAC,CAAC;QACpD,OAAO,EAAE,gBAAgB;QACzB,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE;KAC1B,CAAC,kDAAC,CAAC;IAEJ,YAAY,CAAC,IAAiB;QAC1B,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;uGArBQ,sBAAsB;2FAAtB,sBAAsB,8EAXrB;;;;;;;;;KAST,4DAVS,OAAO;;2FAYR,sBAAsB;kBAdlC,SAAS;mBAAC;oBACP,QAAQ,EAAE,oBAAoB;oBAC9B,OAAO,EAAE,CAAC,OAAO,CAAC;oBAClB,QAAQ,EAAE;;;;;;;;;KAST;iBACJ","sourcesContent":["import { Component, computed, signal } from \"@angular/core\";\r\n\r\nimport { AiTable } from \"../table\";\r\nimport { AiTableColumn, AiTableConfig, AiTableSort } from \"../table.config\";\r\nimport { iUser, USERS } from \"./user\";\r\n\r\nconst SORTABLE_COLUMNS: AiTableColumn<iUser>[] = [\r\n    { key: \"id\", label: \"ID\", width: \"80px\" },\r\n    { key: \"name\", label: \"Name\", sortable: true },\r\n    { key: \"age\", label: \"Age\", sortable: true },\r\n];\r\n\r\n@Component({\r\n    selector: \"ai-demo-table-sort\",\r\n    imports: [AiTable],\r\n    template: `\r\n        <div class=\"flex flex-col gap-4 w-full max-w-2xl\">\r\n            <ai-table [config]=\"config()\" (sortChange)=\"onSortChange($event)\" />\r\n            @if (sort()) {\r\n                <p class=\"text-xs text-muted-foreground\">\r\n                    Ordenando por: <strong>{{ sort()?.field }}</strong> ({{ sort()?.direction }})\r\n                </p>\r\n            }\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTableSortComponent {\r\n    readonly sort = signal<AiTableSort | null>(null);\r\n\r\n    readonly sortedData = computed(() => {\r\n        const s = this.sort();\r\n        if (!s) return USERS;\r\n        return [...USERS].sort((a, b) => {\r\n            const valA = a[s.field as keyof iUser];\r\n            const valB = b[s.field as keyof iUser];\r\n            const cmp = valA < valB ? -1 : valA > valB ? 1 : 0;\r\n            return s.direction === \"asc\" ? cmp : -cmp;\r\n        });\r\n    });\r\n\r\n    readonly config = computed<AiTableConfig<iUser>>(() => ({\r\n        columns: SORTABLE_COLUMNS,\r\n        data: this.sortedData(),\r\n    }));\r\n\r\n    onSortChange(sort: AiTableSort): void {\r\n        this.sort.set(sort);\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/table/demo/table.js

@@ -0,0 +1,37 @@
+import { DemoTableBorderComponent } from "./border";
+import { DemoTableDefaultComponent } from "./default";
+import { DemoTablePaginationComponent } from "./pagination";
+import { DemoTableSelectedComponent } from "./selected";
+import { DemoTableSizeComponent } from "./size";
+import { DemoTableSortComponent } from "./sort";
+export const TABLE = {
+    componentName: "table",
+    componentType: "table",
+    examples: [
+        {
+            name: "default",
+            component: DemoTableDefaultComponent,
+        },
+        {
+            name: "size",
+            component: DemoTableSizeComponent,
+        },
+        {
+            name: "border",
+            component: DemoTableBorderComponent,
+        },
+        {
+            name: "selected",
+            component: DemoTableSelectedComponent,
+        },
+        {
+            name: "pagination",
+            component: DemoTablePaginationComponent,
+        },
+        {
+            name: "sort",
+            component: DemoTableSortComponent,
+        },
+    ],
+};
+//# sourceMappingURL=table.js.map

package/esm2022/lib/components/table/demo/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/table/demo/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAEhD,MAAM,CAAC,MAAM,KAAK,GAAG;IACjB,aAAa,EAAE,OAAO;IACtB,aAAa,EAAE,OAAO;IACtB,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,yBAAyB;SACvC;QACD;YACI,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,sBAAsB;SACpC;QACD;YACI,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,wBAAwB;SACtC;QACD;YACI,IAAI,EAAE,UAAU;YAChB,SAAS,EAAE,0BAA0B;SACxC;QACD;YACI,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,4BAA4B;SAC1C;QACD;YACI,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,sBAAsB;SACpC;KACJ;CACJ,CAAC","sourcesContent":["import { DemoTableBorderComponent } from \"./border\";\r\nimport { DemoTableDefaultComponent } from \"./default\";\r\nimport { DemoTablePaginationComponent } from \"./pagination\";\r\nimport { DemoTableSelectedComponent } from \"./selected\";\r\nimport { DemoTableSizeComponent } from \"./size\";\r\nimport { DemoTableSortComponent } from \"./sort\";\r\n\r\nexport const TABLE = {\r\n    componentName: \"table\",\r\n    componentType: \"table\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoTableDefaultComponent,\r\n        },\r\n        {\r\n            name: \"size\",\r\n            component: DemoTableSizeComponent,\r\n        },\r\n        {\r\n            name: \"border\",\r\n            component: DemoTableBorderComponent,\r\n        },\r\n        {\r\n            name: \"selected\",\r\n            component: DemoTableSelectedComponent,\r\n        },\r\n        {\r\n            name: \"pagination\",\r\n            component: DemoTablePaginationComponent,\r\n        },\r\n        {\r\n            name: \"sort\",\r\n            component: DemoTableSortComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

package/esm2022/lib/components/table/demo/user.js

@@ -0,0 +1,25 @@
+export var userTypeEnum;
+(function (userTypeEnum) {
+    userTypeEnum[userTypeEnum["ADMIN"] = 1] = "ADMIN";
+    userTypeEnum[userTypeEnum["MANAGER"] = 2] = "MANAGER";
+    userTypeEnum[userTypeEnum["SUPORT"] = 3] = "SUPORT";
+})(userTypeEnum || (userTypeEnum = {}));
+export const userTypeMap = new Map([
+    [userTypeEnum.ADMIN, "Admin"],
+    [userTypeEnum.MANAGER, "Manager"],
+    [userTypeEnum.SUPORT, "Suport"],
+]);
+export const USERS = [
+    { id: "1", name: "John Doe", age: 30, type: userTypeEnum.ADMIN },
+    { id: "2", name: "Jane Smith", age: 25, type: userTypeEnum.MANAGER },
+    { id: "3", name: "Bob Johnson", age: 40, type: userTypeEnum.SUPORT },
+    { id: "4", name: "Alice Brown", age: 28, type: userTypeEnum.MANAGER },
+    { id: "5", name: "Charlie Wilson", age: 35, type: userTypeEnum.ADMIN },
+];
+export const COLUMNS = [
+    { key: "id", label: "ID", width: "80px" },
+    { key: "name", label: "Name" },
+    { key: "age", label: "Age" },
+    { key: "type", label: "Type", cell: (row) => userTypeMap.get(row.type) || "" },
+];
+//# sourceMappingURL=user.js.map

package/esm2022/lib/components/table/demo/user.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/table/demo/user.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,YAIX;AAJD,WAAY,YAAY;IACpB,iDAAS,CAAA;IACT,qDAAW,CAAA;IACX,mDAAU,CAAA;AACd,CAAC,EAJW,YAAY,KAAZ,YAAY,QAIvB;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,GAAG,CAAuB;IACrD,CAAC,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC;IAC7B,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC;IACjC,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;CAClC,CAAC,CAAC;AASH,MAAM,CAAC,MAAM,KAAK,GAAY;IAC1B,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,CAAC,KAAK,EAAE;IAChE,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE;IACpE,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,CAAC,MAAM,EAAE;IACpE,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE;IACrE,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,CAAC,KAAK,EAAE;CACzE,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA2B;IAC3C,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;IACzC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAC9B,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;IAC5B,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,GAAU,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE;CACxF,CAAC","sourcesContent":["import { AiTableColumn } from \"../table.config\";\r\n\r\nexport enum userTypeEnum {\r\n    ADMIN = 1,\r\n    MANAGER = 2,\r\n    SUPORT = 3,\r\n}\r\n\r\nexport const userTypeMap = new Map<userTypeEnum, string>([\r\n    [userTypeEnum.ADMIN, \"Admin\"],\r\n    [userTypeEnum.MANAGER, \"Manager\"],\r\n    [userTypeEnum.SUPORT, \"Suport\"],\r\n]);\r\n\r\nexport interface iUser {\r\n    id: string;\r\n    name: string;\r\n    age: number;\r\n    type: userTypeEnum;\r\n}\r\n\r\nexport const USERS: iUser[] = [\r\n    { id: \"1\", name: \"John Doe\", age: 30, type: userTypeEnum.ADMIN },\r\n    { id: \"2\", name: \"Jane Smith\", age: 25, type: userTypeEnum.MANAGER },\r\n    { id: \"3\", name: \"Bob Johnson\", age: 40, type: userTypeEnum.SUPORT },\r\n    { id: \"4\", name: \"Alice Brown\", age: 28, type: userTypeEnum.MANAGER },\r\n    { id: \"5\", name: \"Charlie Wilson\", age: 35, type: userTypeEnum.ADMIN },\r\n];\r\n\r\nexport const COLUMNS: AiTableColumn<iUser>[] = [\r\n    { key: \"id\", label: \"ID\", width: \"80px\" },\r\n    { key: \"name\", label: \"Name\" },\r\n    { key: \"age\", label: \"Age\" },\r\n    { key: \"type\", label: \"Type\", cell: (row: iUser) => userTypeMap.get(row.type) || \"\" },\r\n];\r\n"]}

package/esm2022/lib/components/table/index.js

@@ -0,0 +1,5 @@
+export * from "./cell-template.directive";
+export * from "./demo/table";
+export * from "./table";
+export * from "./table.config";
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC","sourcesContent":["export * from \"./cell-template.directive\";\r\nexport * from \"./demo/table\";\r\nexport * from \"./table\";\r\nexport * from \"./table.config\";\r\n"]}

package/esm2022/lib/components/table/table.config.js

@@ -0,0 +1 @@
+//# sourceMappingURL=table.config.js.map

package/esm2022/lib/components/table/table.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.config.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/table/table.config.ts"],"names":[],"mappings":"","sourcesContent":["export type AiTableSize = \"compact\" | \"default\" | \"comfortable\";\r\nexport type AiTableBorder = \"simple\" | \"outline\";\r\n\r\nexport interface AiTableColumn<T> {\r\n    key: string;\r\n    label: string;\r\n    width?: string;\r\n    sortable?: boolean;\r\n    align?: \"left\" | \"center\" | \"right\";\r\n    cell?: (row: T) => string;\r\n}\r\n\r\nexport interface AiTableConfig<T> {\r\n    columns: AiTableColumn<T>[];\r\n    data: T[];\r\n}\r\n\r\nexport interface AiTableSort {\r\n    field: string;\r\n    direction: \"asc\" | \"desc\";\r\n}\r\n\r\nexport interface AiTablePagination {\r\n    pageIndex?: number;\r\n    pageSize?: number;\r\n    totalItems?: number;\r\n    pageSizeOptions?: number[];\r\n    showInfo?: boolean;\r\n    showPageSize?: boolean;\r\n    siblingCount?: number;\r\n    size?: \"default\" | \"lg\" | \"sm\" | \"xs\";\r\n    disabled?: boolean;\r\n}\r\n"]}