@aiandralves/ai-ui 1.0.0

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

@@ -0,0 +1,121 @@
+import { NgTemplateOutlet } from "@angular/common";
+import { ChangeDetectionStrategy, Component, computed, contentChildren, effect, input, output, signal, ViewEncapsulation } from "@angular/core";
+import { mergeClasses, transform } from "../../core";
+import { AiBadge } from "../badge";
+import { AiEmpty } from "../empty";
+import { AiCheckbox } from "../form-field";
+import { AiIcon } from "../icon";
+import { AiPaginationImports } from "../pagination/pagination.imports";
+import { AiCellTemplateDirective } from "./cell-template.directive";
+import { tableBodyCellVariants, tableBodyRowVariants, tableCheckboxCellVariants, tableHeadCellVariants, tableHeadRowVariants, tableWrapperVariants } from "./table.variants";
+import * as i0 from "@angular/core";
+import * as i1 from "../pagination/pagination";
+function alignClass(align) {
+    if (align === "center")
+        return "text-center";
+    if (align === "right")
+        return "text-right";
+    return "text-left";
+}
+export class AiTable {
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    border = input("simple", ...(ngDevMode ? [{ debugName: "border" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : {}), transform });
+    pagination = input(...(ngDevMode ? [undefined, { debugName: "pagination" }] : []));
+    selectionChange = output();
+    rowClick = output();
+    pageChange = output();
+    pageSizeChange = output();
+    sortChange = output();
+    cellTemplates = contentChildren(AiCellTemplateDirective, ...(ngDevMode ? [{ debugName: "cellTemplates" }] : []));
+    templateMap = new Map();
+    _sortField = signal(null, ...(ngDevMode ? [{ debugName: "_sortField" }] : []));
+    _sortDirection = signal("asc", ...(ngDevMode ? [{ debugName: "_sortDirection" }] : []));
+    sort = computed(() => {
+        const field = this._sortField();
+        return field ? { field, direction: this._sortDirection() } : null;
+    }, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+    Math = Math;
+    _selection = signal(new Set(), ...(ngDevMode ? [{ debugName: "_selection" }] : []));
+    constructor() {
+        effect(() => {
+            this.templateMap.clear();
+            for (const dir of this.cellTemplates()) {
+                this.templateMap.set(dir.key, dir.template);
+            }
+        });
+    }
+    wrapperClass = computed(() => mergeClasses(tableWrapperVariants({ border: this.border() })), ...(ngDevMode ? [{ debugName: "wrapperClass" }] : []));
+    headRowClass = computed(() => mergeClasses(tableHeadRowVariants({ border: this.border() })), ...(ngDevMode ? [{ debugName: "headRowClass" }] : []));
+    bodyRowClass = computed(() => mergeClasses(tableBodyRowVariants({ border: this.border() })), ...(ngDevMode ? [{ debugName: "bodyRowClass" }] : []));
+    checkboxCellClass = computed(() => tableCheckboxCellVariants({ size: this.size(), border: this.border() }), ...(ngDevMode ? [{ debugName: "checkboxCellClass" }] : []));
+    headCellClass(align) {
+        return mergeClasses(tableHeadCellVariants({ size: this.size(), border: this.border() }), alignClass(align));
+    }
+    bodyCellClass(align) {
+        return mergeClasses(tableBodyCellVariants({ size: this.size(), border: this.border() }), alignClass(align));
+    }
+    getCellValue(row, column) {
+        return column.cell ? column.cell(row) : row[column.key];
+    }
+    isSelected(row) {
+        return this._selection().has(row);
+    }
+    isAllSelected() {
+        const data = this.config().data;
+        return data.length > 0 && data.every(row => this._selection().has(row));
+    }
+    isIndeterminate() {
+        const data = this.config().data;
+        const count = data.filter(row => this._selection().has(row)).length;
+        return count > 0 && count < data.length;
+    }
+    toggleRow(row) {
+        const next = new Set(this._selection());
+        if (next.has(row)) {
+            next.delete(row);
+        }
+        else {
+            next.add(row);
+        }
+        this._selection.set(next);
+        this.selectionChange.emit([...next]);
+    }
+    toggleAll() {
+        const data = this.config().data;
+        const next = this.isAllSelected() ? new Set() : new Set(data);
+        this._selection.set(next);
+        this.selectionChange.emit([...next]);
+    }
+    toggleSort(column) {
+        if (!column.sortable)
+            return;
+        const currentField = this._sortField();
+        if (currentField === column.key) {
+            const next = this._sortDirection() === "asc" ? "desc" : "asc";
+            this._sortDirection.set(next);
+        }
+        else {
+            this._sortField.set(column.key);
+            this._sortDirection.set("asc");
+        }
+        this.sortChange.emit({ field: column.key, direction: this._sortDirection() });
+    }
+    isSortActive(column) {
+        return this._sortField() === column.key;
+    }
+    sortIcon(column) {
+        if (!this.isSortActive(column))
+            return "arrow-up-down";
+        return this._sortDirection() === "asc" ? "arrow-up" : "arrow-down";
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiTable, isStandalone: true, selector: "ai-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", rowClick: "rowClick", pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange" }, queries: [{ propertyName: "cellTemplates", predicate: AiCellTemplateDirective, isSignal: true }], exportAs: ["aiTable"], ngImport: i0, template: "@let columns = config().columns;\r\n@let data = config().data;\r\n\r\n<div [class]=\"wrapperClass()\">\r\n    <table class=\"w-full text-sm border-collapse\">\r\n        <thead>\r\n            <tr [class]=\"headRowClass()\">\r\n                @if (selectable()) {\r\n                    <th scope=\"col\" [class]=\"checkboxCellClass()\">\r\n                        <ai-checkbox [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\" (changeCheck)=\"toggleAll()\" />\r\n                    </th>\r\n                }\r\n                @for (column of columns; track column.key) {\r\n                    <th\r\n                        scope=\"col\"\r\n                        [attr.data-test]=\"'table-header-' + column.key\"\r\n                        [style.width]=\"column.width\"\r\n                        [class]=\"headCellClass(column.align)\"\r\n                        [class.cursor-pointer]=\"column.sortable\"\r\n                        [class.select-none]=\"column.sortable\"\r\n                        (click)=\"toggleSort(column)\"\r\n                    >\r\n                        <span class=\"inline-flex items-center gap-1\">\r\n                            {{ column.label }}\r\n                            @if (column.sortable) {\r\n                                <ai-icon [icon]=\"sortIcon(column)\" size=\"sm\" />\r\n                            }\r\n                        </span>\r\n                    </th>\r\n                }\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            @for (row of data; track $index) {\r\n                <tr [class]=\"bodyRowClass()\" (click)=\"rowClick.emit(row)\">\r\n                    @if (selectable()) {\r\n                        <td [class]=\"checkboxCellClass()\">\r\n                            <ai-checkbox [checked]=\"isSelected(row)\" (changeCheck)=\"toggleRow(row)\" />\r\n                        </td>\r\n                    }\r\n                    @for (column of columns; track column.key) {\r\n                        @let template = templateMap.get(column.key);\r\n                        @let value = getCellValue(row, column);\r\n                        <td\r\n                            [attr.data-test]=\"'table-cell-' + column.key\"\r\n                            [style.width]=\"column.width\"\r\n                            [class]=\"bodyCellClass(column.align)\"\r\n                        >\r\n                            @if (template) {\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"template\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: row }\"\r\n                                />\r\n                            } @else {\r\n                                @if (value !== null && value !== undefined && value !== \"\") {\r\n                                    {{ value }}\r\n                                } @else {\r\n                                    <ai-badge size=\"sm\" shape=\"circle\" variant=\"default\" />\r\n                                }\r\n                            }\r\n                        </td>\r\n                    }\r\n                </tr>\r\n            } @empty {\r\n                <tr>\r\n                    <td [attr.colspan]=\"selectable() ? columns.length + 1 : columns.length\">\r\n                        <ai-empty icon=\"menu-search\" title=\"Nenhum registro encontrado\" description=\"Tente ajustar sua consulta de pesquisa ou verifique a ortografia.\" />\r\n                    </td>\r\n                </tr>\r\n            }\r\n        </tbody>\r\n    </table>\r\n\r\n    @if (pagination(); as pag) {\r\n        <div class=\"w-full flex items-center justify-end py-2 px-1\">\r\n            <ai-pagination class=\"flex justify-end w-max mx-0\"\r\n                [pageIndex]=\"pag.pageIndex ?? 1\"\r\n                [total]=\"Math.ceil((pag.totalItems ?? 0) / (pag.pageSize ?? 10))\"\r\n                [totalItems]=\"pag.totalItems ?? 0\"\r\n                [pageSize]=\"pag.pageSize ?? 10\"\r\n                [pageSizeOptions]=\"pag.pageSizeOptions ?? [10, 20, 50, 100]\"\r\n                [showInfo]=\"pag.showInfo ?? false\"\r\n                [showPageSize]=\"pag.showPageSize ?? false\"\r\n                [siblingCount]=\"pag.siblingCount ?? 1\"\r\n                [size]=\"pag.size ?? 'sm'\"\r\n                [disabled]=\"pag.disabled ?? false\"\r\n                (pageIndexChange)=\"pageChange.emit($event)\"\r\n                (pageSizeChange)=\"pageSizeChange.emit($event)\"\r\n            />\r\n        </div>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AiBadge, selector: "ai-badge", inputs: ["variant", "shape", "fill", "icon", "disabled", "close", "class"], outputs: ["closed"], exportAs: ["aiBadge"] }, { kind: "component", type: AiCheckbox, selector: "ai-checkbox, [ai-checkbox]", inputs: ["variant", "size", "shape", "class", "id", "disabled", "touched", "checked", "indeterminate"], outputs: ["touchedChange", "checkedChange", "changeCheck"], exportAs: ["aiCheckbox"] }, { kind: "component", type: AiEmpty, selector: "ai-empty", inputs: ["actions", "icon", "image", "title", "description", "class"], exportAs: ["aiEmpty"] }, { kind: "component", type: AiIcon, selector: "ai-icon, [ai-icon]", inputs: ["icon", "size", "type", "disabled", "class"], exportAs: ["aiIcon"] }, { kind: "component", type: i1.AiPagination, selector: "ai-pagination", inputs: ["pageIndex", "total", "totalItems", "pageSize", "pageSizeOptions", "siblingCount", "showInfo", "showPageSize", "size", "disabled", "content", "ariaLabel", "class"], outputs: ["pageIndexChange", "pageSizeChange"], exportAs: ["aiPagination"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTable, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-table", exportAs: "aiTable", imports: [NgTemplateOutlet, AiBadge, AiCheckbox, AiEmpty, AiIcon, AiPaginationImports], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@let columns = config().columns;\r\n@let data = config().data;\r\n\r\n<div [class]=\"wrapperClass()\">\r\n    <table class=\"w-full text-sm border-collapse\">\r\n        <thead>\r\n            <tr [class]=\"headRowClass()\">\r\n                @if (selectable()) {\r\n                    <th scope=\"col\" [class]=\"checkboxCellClass()\">\r\n                        <ai-checkbox [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\" (changeCheck)=\"toggleAll()\" />\r\n                    </th>\r\n                }\r\n                @for (column of columns; track column.key) {\r\n                    <th\r\n                        scope=\"col\"\r\n                        [attr.data-test]=\"'table-header-' + column.key\"\r\n                        [style.width]=\"column.width\"\r\n                        [class]=\"headCellClass(column.align)\"\r\n                        [class.cursor-pointer]=\"column.sortable\"\r\n                        [class.select-none]=\"column.sortable\"\r\n                        (click)=\"toggleSort(column)\"\r\n                    >\r\n                        <span class=\"inline-flex items-center gap-1\">\r\n                            {{ column.label }}\r\n                            @if (column.sortable) {\r\n                                <ai-icon [icon]=\"sortIcon(column)\" size=\"sm\" />\r\n                            }\r\n                        </span>\r\n                    </th>\r\n                }\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            @for (row of data; track $index) {\r\n                <tr [class]=\"bodyRowClass()\" (click)=\"rowClick.emit(row)\">\r\n                    @if (selectable()) {\r\n                        <td [class]=\"checkboxCellClass()\">\r\n                            <ai-checkbox [checked]=\"isSelected(row)\" (changeCheck)=\"toggleRow(row)\" />\r\n                        </td>\r\n                    }\r\n                    @for (column of columns; track column.key) {\r\n                        @let template = templateMap.get(column.key);\r\n                        @let value = getCellValue(row, column);\r\n                        <td\r\n                            [attr.data-test]=\"'table-cell-' + column.key\"\r\n                            [style.width]=\"column.width\"\r\n                            [class]=\"bodyCellClass(column.align)\"\r\n                        >\r\n                            @if (template) {\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"template\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: row }\"\r\n                                />\r\n                            } @else {\r\n                                @if (value !== null && value !== undefined && value !== \"\") {\r\n                                    {{ value }}\r\n                                } @else {\r\n                                    <ai-badge size=\"sm\" shape=\"circle\" variant=\"default\" />\r\n                                }\r\n                            }\r\n                        </td>\r\n                    }\r\n                </tr>\r\n            } @empty {\r\n                <tr>\r\n                    <td [attr.colspan]=\"selectable() ? columns.length + 1 : columns.length\">\r\n                        <ai-empty icon=\"menu-search\" title=\"Nenhum registro encontrado\" description=\"Tente ajustar sua consulta de pesquisa ou verifique a ortografia.\" />\r\n                    </td>\r\n                </tr>\r\n            }\r\n        </tbody>\r\n    </table>\r\n\r\n    @if (pagination(); as pag) {\r\n        <div class=\"w-full flex items-center justify-end py-2 px-1\">\r\n            <ai-pagination class=\"flex justify-end w-max mx-0\"\r\n                [pageIndex]=\"pag.pageIndex ?? 1\"\r\n                [total]=\"Math.ceil((pag.totalItems ?? 0) / (pag.pageSize ?? 10))\"\r\n                [totalItems]=\"pag.totalItems ?? 0\"\r\n                [pageSize]=\"pag.pageSize ?? 10\"\r\n                [pageSizeOptions]=\"pag.pageSizeOptions ?? [10, 20, 50, 100]\"\r\n                [showInfo]=\"pag.showInfo ?? false\"\r\n                [showPageSize]=\"pag.showPageSize ?? false\"\r\n                [siblingCount]=\"pag.siblingCount ?? 1\"\r\n                [size]=\"pag.size ?? 'sm'\"\r\n                [disabled]=\"pag.disabled ?? false\"\r\n                (pageIndexChange)=\"pageChange.emit($event)\"\r\n                (pageSizeChange)=\"pageSizeChange.emit($event)\"\r\n            />\r\n        </div>\r\n    }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AiCellTemplateDirective), { isSignal: true }] }] } });
+//# sourceMappingURL=table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/table/table.ts","../../../../../../../libs/ai-ui/src/lib/components/table/table.html"],"names":[],"mappings":"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","sourcesContent":["import { ClassValue } from \"clsx\";\r\n\r\nimport { NgTemplateOutlet } from \"@angular/common\";\r\nimport { ChangeDetectionStrategy, Component, computed, contentChildren, effect, input, output, signal, TemplateRef, ViewEncapsulation } from \"@angular/core\";\r\n\r\nimport { mergeClasses, transform } from \"../../core\";\r\nimport { AiBadge } from \"../badge\";\r\nimport { AiEmpty } from \"../empty\";\r\nimport { AiCheckbox } from \"../form-field\";\r\nimport { AiIcon } from \"../icon\";\r\nimport { AiPaginationImports } from \"../pagination/pagination.imports\";\r\nimport { AiCellTemplateDirective } from \"./cell-template.directive\";\r\nimport { AiTableBorder, AiTableColumn, AiTableConfig, AiTablePagination, AiTableSize, AiTableSort } from \"./table.config\";\r\nimport { tableBodyCellVariants, tableBodyRowVariants, tableCheckboxCellVariants, tableHeadCellVariants, tableHeadRowVariants, tableWrapperVariants } from \"./table.variants\";\r\n\r\nfunction alignClass(align?: \"left\" | \"center\" | \"right\"): string {\r\n    if (align === \"center\") return \"text-center\";\r\n    if (align === \"right\") return \"text-right\";\r\n    return \"text-left\";\r\n}\r\n\r\n@Component({\r\n    selector: \"ai-table\",\r\n    exportAs: \"aiTable\",\r\n    imports: [NgTemplateOutlet, AiBadge, AiCheckbox, AiEmpty, AiIcon, AiPaginationImports],\r\n    templateUrl: \"./table.html\",\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class AiTable<T = unknown> {\r\n    readonly config = input.required<AiTableConfig<T>>();\r\n    readonly size = input<AiTableSize>(\"default\");\r\n    readonly border = input<AiTableBorder>(\"simple\");\r\n    readonly class = input<ClassValue>(\"\");\r\n    readonly selectable = input<boolean, boolean | string>(false, { transform });\r\n    readonly pagination = input<AiTablePagination>();\r\n\r\n    readonly selectionChange = output<T[]>();\r\n    readonly rowClick = output<T>();\r\n    readonly pageChange = output<number>();\r\n    readonly pageSizeChange = output<number>();\r\n    readonly sortChange = output<AiTableSort>();\r\n\r\n    protected readonly cellTemplates = contentChildren<AiCellTemplateDirective<T>>(AiCellTemplateDirective);\r\n    readonly templateMap = new Map<string, TemplateRef<{ $implicit: T }>>();\r\n\r\n    private readonly _sortField = signal<string | null>(null);\r\n    private readonly _sortDirection = signal<\"asc\" | \"desc\">(\"asc\");\r\n    readonly sort = computed<AiTableSort | null>(() => {\r\n        const field = this._sortField();\r\n        return field ? { field, direction: this._sortDirection() } : null;\r\n    });\r\n\r\n    readonly Math = Math;\r\n\r\n    private readonly _selection = signal<Set<T>>(new Set<T>());\r\n\r\n    constructor() {\r\n        effect(() => {\r\n            this.templateMap.clear();\r\n            for (const dir of this.cellTemplates()) {\r\n                this.templateMap.set(dir.key, dir.template);\r\n            }\r\n        });\r\n    }\r\n\r\n    protected readonly wrapperClass = computed(() => mergeClasses(tableWrapperVariants({ border: this.border() })));\r\n    protected readonly headRowClass = computed(() => mergeClasses(tableHeadRowVariants({ border: this.border() })));\r\n    protected readonly bodyRowClass = computed(() => mergeClasses(tableBodyRowVariants({ border: this.border() })));\r\n    protected readonly checkboxCellClass = computed(() => tableCheckboxCellVariants({ size: this.size(), border: this.border() }));\r\n\r\n    headCellClass(align?: AiTableColumn<T>[\"align\"]): string {\r\n        return mergeClasses(tableHeadCellVariants({ size: this.size(), border: this.border() }), alignClass(align));\r\n    }\r\n\r\n    bodyCellClass(align?: AiTableColumn<T>[\"align\"]): string {\r\n        return mergeClasses(tableBodyCellVariants({ size: this.size(), border: this.border() }), alignClass(align));\r\n    }\r\n\r\n    getCellValue(row: T, column: AiTableColumn<T>): unknown {\r\n        return column.cell ? column.cell(row) : (row as Record<string, unknown>)[column.key];\r\n    }\r\n\r\n    isSelected(row: T): boolean {\r\n        return this._selection().has(row);\r\n    }\r\n\r\n    isAllSelected(): boolean {\r\n        const data = this.config().data;\r\n        return data.length > 0 && data.every(row => this._selection().has(row));\r\n    }\r\n\r\n    isIndeterminate(): boolean {\r\n        const data = this.config().data;\r\n        const count = data.filter(row => this._selection().has(row)).length;\r\n        return count > 0 && count < data.length;\r\n    }\r\n\r\n    toggleRow(row: T): void {\r\n        const next = new Set(this._selection());\r\n        if (next.has(row)) {\r\n            next.delete(row);\r\n        } else {\r\n            next.add(row);\r\n        }\r\n        this._selection.set(next);\r\n        this.selectionChange.emit([...next]);\r\n    }\r\n\r\n    toggleAll(): void {\r\n        const data = this.config().data;\r\n        const next = this.isAllSelected() ? new Set<T>() : new Set<T>(data);\r\n        this._selection.set(next);\r\n        this.selectionChange.emit([...next]);\r\n    }\r\n\r\n    toggleSort(column: AiTableColumn<T>): void {\r\n        if (!column.sortable) return;\r\n        const currentField = this._sortField();\r\n        if (currentField === column.key) {\r\n            const next = this._sortDirection() === \"asc\" ? \"desc\" : \"asc\";\r\n            this._sortDirection.set(next);\r\n        } else {\r\n            this._sortField.set(column.key);\r\n            this._sortDirection.set(\"asc\");\r\n        }\r\n        this.sortChange.emit({ field: column.key, direction: this._sortDirection() });\r\n    }\r\n\r\n    isSortActive(column: AiTableColumn<T>): boolean {\r\n        return this._sortField() === column.key;\r\n    }\r\n\r\n    sortIcon(column: AiTableColumn<T>): \"arrow-up-down\" | \"arrow-up\" | \"arrow-down\" {\r\n        if (!this.isSortActive(column)) return \"arrow-up-down\";\r\n        return this._sortDirection() === \"asc\" ? \"arrow-up\" : \"arrow-down\";\r\n    }\r\n}\r\n","@let columns = config().columns;\r\n@let data = config().data;\r\n\r\n<div [class]=\"wrapperClass()\">\r\n    <table class=\"w-full text-sm border-collapse\">\r\n        <thead>\r\n            <tr [class]=\"headRowClass()\">\r\n                @if (selectable()) {\r\n                    <th scope=\"col\" [class]=\"checkboxCellClass()\">\r\n                        <ai-checkbox [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\" (changeCheck)=\"toggleAll()\" />\r\n                    </th>\r\n                }\r\n                @for (column of columns; track column.key) {\r\n                    <th\r\n                        scope=\"col\"\r\n                        [attr.data-test]=\"'table-header-' + column.key\"\r\n                        [style.width]=\"column.width\"\r\n                        [class]=\"headCellClass(column.align)\"\r\n                        [class.cursor-pointer]=\"column.sortable\"\r\n                        [class.select-none]=\"column.sortable\"\r\n                        (click)=\"toggleSort(column)\"\r\n                    >\r\n                        <span class=\"inline-flex items-center gap-1\">\r\n                            {{ column.label }}\r\n                            @if (column.sortable) {\r\n                                <ai-icon [icon]=\"sortIcon(column)\" size=\"sm\" />\r\n                            }\r\n                        </span>\r\n                    </th>\r\n                }\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            @for (row of data; track $index) {\r\n                <tr [class]=\"bodyRowClass()\" (click)=\"rowClick.emit(row)\">\r\n                    @if (selectable()) {\r\n                        <td [class]=\"checkboxCellClass()\">\r\n                            <ai-checkbox [checked]=\"isSelected(row)\" (changeCheck)=\"toggleRow(row)\" />\r\n                        </td>\r\n                    }\r\n                    @for (column of columns; track column.key) {\r\n                        @let template = templateMap.get(column.key);\r\n                        @let value = getCellValue(row, column);\r\n                        <td\r\n                            [attr.data-test]=\"'table-cell-' + column.key\"\r\n                            [style.width]=\"column.width\"\r\n                            [class]=\"bodyCellClass(column.align)\"\r\n                        >\r\n                            @if (template) {\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"template\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: row }\"\r\n                                />\r\n                            } @else {\r\n                                @if (value !== null && value !== undefined && value !== \"\") {\r\n                                    {{ value }}\r\n                                } @else {\r\n                                    <ai-badge size=\"sm\" shape=\"circle\" variant=\"default\" />\r\n                                }\r\n                            }\r\n                        </td>\r\n                    }\r\n                </tr>\r\n            } @empty {\r\n                <tr>\r\n                    <td [attr.colspan]=\"selectable() ? columns.length + 1 : columns.length\">\r\n                        <ai-empty icon=\"menu-search\" title=\"Nenhum registro encontrado\" description=\"Tente ajustar sua consulta de pesquisa ou verifique a ortografia.\" />\r\n                    </td>\r\n                </tr>\r\n            }\r\n        </tbody>\r\n    </table>\r\n\r\n    @if (pagination(); as pag) {\r\n        <div class=\"w-full flex items-center justify-end py-2 px-1\">\r\n            <ai-pagination class=\"flex justify-end w-max mx-0\"\r\n                [pageIndex]=\"pag.pageIndex ?? 1\"\r\n                [total]=\"Math.ceil((pag.totalItems ?? 0) / (pag.pageSize ?? 10))\"\r\n                [totalItems]=\"pag.totalItems ?? 0\"\r\n                [pageSize]=\"pag.pageSize ?? 10\"\r\n                [pageSizeOptions]=\"pag.pageSizeOptions ?? [10, 20, 50, 100]\"\r\n                [showInfo]=\"pag.showInfo ?? false\"\r\n                [showPageSize]=\"pag.showPageSize ?? false\"\r\n                [siblingCount]=\"pag.siblingCount ?? 1\"\r\n                [size]=\"pag.size ?? 'sm'\"\r\n                [disabled]=\"pag.disabled ?? false\"\r\n                (pageIndexChange)=\"pageChange.emit($event)\"\r\n                (pageSizeChange)=\"pageSizeChange.emit($event)\"\r\n            />\r\n        </div>\r\n    }\r\n</div>\r\n"]}

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

@@ -0,0 +1,86 @@
+import { cva } from "class-variance-authority";
+export const tableWrapperVariants = cva("w-full overflow-x-auto", {
+    variants: {
+        border: {
+            simple: "",
+            outline: "rounded-md border border-border",
+        },
+    },
+    defaultVariants: {
+        border: "simple",
+    },
+});
+export const tableHeadRowVariants = cva("bg-muted/40 text-muted-foreground", {
+    variants: {
+        border: {
+            simple: "border-b border-border",
+            outline: "",
+        },
+    },
+    defaultVariants: {
+        border: "simple",
+    },
+});
+export const tableHeadCellVariants = cva("text-[10px] [&_span]:text-[10px] font-bold uppercase font-title text-primary", {
+    variants: {
+        size: {
+            compact: "px-3 py-2",
+            default: "px-4 py-3",
+            comfortable: "px-6 py-4",
+        },
+        border: {
+            simple: "",
+            outline: "border border-border",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+        border: "simple",
+    },
+});
+export const tableBodyRowVariants = cva("transition-colors hover:bg-muted/50 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed", {
+    variants: {
+        border: {
+            simple: "border-b border-border last:border-b-0",
+            outline: "",
+        },
+    },
+    defaultVariants: {
+        border: "simple",
+    },
+});
+export const tableBodyCellVariants = cva("text-sm", {
+    variants: {
+        size: {
+            compact: "px-3 py-1.5",
+            default: "px-4 py-3",
+            comfortable: "px-6 py-5",
+        },
+        border: {
+            simple: "",
+            outline: "border border-border",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+        border: "simple",
+    },
+});
+export const tableCheckboxCellVariants = cva("w-10", {
+    variants: {
+        size: {
+            compact: "px-3 py-2",
+            default: "px-4 py-3",
+            comfortable: "px-6 py-5",
+        },
+        border: {
+            simple: "",
+            outline: "border border-border",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+        border: "simple",
+    },
+});
+//# sourceMappingURL=table.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.variants.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/table/table.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC,wBAAwB,EAAE;IAC9D,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,iCAAiC;SAC7C;KACJ;IACD,eAAe,EAAE;QACb,MAAM,EAAE,QAAQ;KACnB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC,mCAAmC,EAAE;IACzE,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,MAAM,EAAE,wBAAwB;YAChC,OAAO,EAAE,EAAE;SACd;KACJ;IACD,eAAe,EAAE;QACb,MAAM,EAAE,QAAQ;KACnB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC,8EAA8E,EAAE;IACrH,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,WAAW;YACpB,OAAO,EAAE,WAAW;YACpB,WAAW,EAAE,WAAW;SAC3B;QACD,MAAM,EAAE;YACJ,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,sBAAsB;SAClC;KACJ;IACD,eAAe,EAAE;QACb,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,QAAQ;KACnB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC,oGAAoG,EAAE;IAC1I,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,MAAM,EAAE,wCAAwC;YAChD,OAAO,EAAE,EAAE;SACd;KACJ;IACD,eAAe,EAAE;QACb,MAAM,EAAE,QAAQ;KACnB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC,SAAS,EAAE;IAChD,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,aAAa;YACtB,OAAO,EAAE,WAAW;YACpB,WAAW,EAAE,WAAW;SAC3B;QACD,MAAM,EAAE;YACJ,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,sBAAsB;SAClC;KACJ;IACD,eAAe,EAAE;QACb,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,QAAQ;KACnB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAC,MAAM,EAAE;IACjD,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,WAAW;YACpB,OAAO,EAAE,WAAW;YACpB,WAAW,EAAE,WAAW;SAC3B;QACD,MAAM,EAAE;YACJ,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,sBAAsB;SAClC;KACJ;IACD,eAAe,EAAE;QACb,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,QAAQ;KACnB;CACJ,CAAC,CAAC","sourcesContent":["import { cva } from \"class-variance-authority\";\r\n\r\nexport const tableWrapperVariants = cva(\"w-full overflow-x-auto\", {\r\n    variants: {\r\n        border: {\r\n            simple: \"\",\r\n            outline: \"rounded-md border border-border\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        border: \"simple\",\r\n    },\r\n});\r\n\r\nexport const tableHeadRowVariants = cva(\"bg-muted/40 text-muted-foreground\", {\r\n    variants: {\r\n        border: {\r\n            simple: \"border-b border-border\",\r\n            outline: \"\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        border: \"simple\",\r\n    },\r\n});\r\n\r\nexport const tableHeadCellVariants = cva(\"text-[10px] [&_span]:text-[10px] font-bold uppercase font-title text-primary\", {\r\n    variants: {\r\n        size: {\r\n            compact: \"px-3 py-2\",\r\n            default: \"px-4 py-3\",\r\n            comfortable: \"px-6 py-4\",\r\n        },\r\n        border: {\r\n            simple: \"\",\r\n            outline: \"border border-border\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        size: \"default\",\r\n        border: \"simple\",\r\n    },\r\n});\r\n\r\nexport const tableBodyRowVariants = cva(\"transition-colors hover:bg-muted/50 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed\", {\r\n    variants: {\r\n        border: {\r\n            simple: \"border-b border-border last:border-b-0\",\r\n            outline: \"\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        border: \"simple\",\r\n    },\r\n});\r\n\r\nexport const tableBodyCellVariants = cva(\"text-sm\", {\r\n    variants: {\r\n        size: {\r\n            compact: \"px-3 py-1.5\",\r\n            default: \"px-4 py-3\",\r\n            comfortable: \"px-6 py-5\",\r\n        },\r\n        border: {\r\n            simple: \"\",\r\n            outline: \"border border-border\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        size: \"default\",\r\n        border: \"simple\",\r\n    },\r\n});\r\n\r\nexport const tableCheckboxCellVariants = cva(\"w-10\", {\r\n    variants: {\r\n        size: {\r\n            compact: \"px-3 py-2\",\r\n            default: \"px-4 py-3\",\r\n            comfortable: \"px-6 py-5\",\r\n        },\r\n        border: {\r\n            simple: \"\",\r\n            outline: \"border border-border\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        size: \"default\",\r\n        border: \"simple\",\r\n    },\r\n});\r\n"]}

package/esm2022/lib/components/tabs/demo/align.js

@@ -0,0 +1,55 @@
+import { TitleCasePipe } from "@angular/common";
+import { Component, signal } from "@angular/core";
+import { AiButton } from "../../button";
+import { AiTab, AiTabsGroup } from "../tabs";
+import * as i0 from "@angular/core";
+export class DemoTabsAlignComponent {
+    aligns = ["start", "center", "end"];
+    align = signal("start", ...(ngDevMode ? [{ debugName: "align" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTabsAlignComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoTabsAlignComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-6 w-full">
+            <ai-tabs-group [alignTabs]="align()">
+                <ai-tab label="Tab 1">Content 1</ai-tab>
+                <ai-tab label="Tab 2">Content 2</ai-tab>
+                <ai-tab label="Tab 3">Content 3</ai-tab>
+            </ai-tabs-group>
+
+            <div class="flex items-center gap-2">
+                <span class="text-sm text-muted-foreground">AlignTabs: {{ align() }}</span>
+            </div>
+
+            <div class="flex items-center gap-2">
+                @for (a of aligns; track a) {
+                    <button ai-button variant="ghost" size="sm" (click)="align.set(a)">{{ a | titlecase }}</button>
+                }
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTabsGroup, selector: "ai-tabs-group", inputs: ["tabsPosition", "activePosition", "alignTabs", "showArrows", "class"], outputs: ["changeTab"], exportAs: ["aiTabsGroup"] }, { kind: "component", type: AiTab, selector: "ai-tab", inputs: ["label", "disabled"], exportAs: ["aiTab"] }, { kind: "component", type: AiButton, selector: "ai-button, button[ai-button], a[ai-button]", inputs: ["variant", "size", "shape", "type", "fill", "class", "icon", "full", "loading", "disabled"], exportAs: ["aiButton"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTabsAlignComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiTabsGroup, AiTab, AiButton, TitleCasePipe],
+                    template: `
+        <div class="flex flex-col gap-6 w-full">
+            <ai-tabs-group [alignTabs]="align()">
+                <ai-tab label="Tab 1">Content 1</ai-tab>
+                <ai-tab label="Tab 2">Content 2</ai-tab>
+                <ai-tab label="Tab 3">Content 3</ai-tab>
+            </ai-tabs-group>
+
+            <div class="flex items-center gap-2">
+                <span class="text-sm text-muted-foreground">AlignTabs: {{ align() }}</span>
+            </div>
+
+            <div class="flex items-center gap-2">
+                @for (a of aligns; track a) {
+                    <button ai-button variant="ghost" size="sm" (click)="align.set(a)">{{ a | titlecase }}</button>
+                }
+            </div>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=align.js.map

package/esm2022/lib/components/tabs/demo/align.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"align.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/tabs/demo/align.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;;AAyB7C,MAAM,OAAO,sBAAsB;IAC/B,MAAM,GAAe,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IAChD,KAAK,GAAG,MAAM,CAAW,OAAO,iDAAC,CAAC;uGAFzB,sBAAsB;2FAAtB,sBAAsB,wEApBrB;;;;;;;;;;;;;;;;;;KAkBT,4DAnBS,WAAW,6LAAE,KAAK,uGAAE,QAAQ,gNAAE,aAAa;;2FAqB5C,sBAAsB;kBAtBlC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,CAAC;oBACtD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;KAkBT;iBACJ","sourcesContent":["import { TitleCasePipe } from \"@angular/common\";\r\nimport { Component, signal } from \"@angular/core\";\r\n\r\nimport { AiButton } from \"../../button\";\r\nimport { AiTab, AiTabsGroup } from \"../tabs\";\r\nimport { TabAlign } from \"../tabs.variants\";\r\n\r\n@Component({\r\n    imports: [AiTabsGroup, AiTab, AiButton, TitleCasePipe],\r\n    template: `\r\n        <div class=\"flex flex-col gap-6 w-full\">\r\n            <ai-tabs-group [alignTabs]=\"align()\">\r\n                <ai-tab label=\"Tab 1\">Content 1</ai-tab>\r\n                <ai-tab label=\"Tab 2\">Content 2</ai-tab>\r\n                <ai-tab label=\"Tab 3\">Content 3</ai-tab>\r\n            </ai-tabs-group>\r\n\r\n            <div class=\"flex items-center gap-2\">\r\n                <span class=\"text-sm text-muted-foreground\">AlignTabs: {{ align() }}</span>\r\n            </div>\r\n\r\n            <div class=\"flex items-center gap-2\">\r\n                @for (a of aligns; track a) {\r\n                    <button ai-button variant=\"ghost\" size=\"sm\" (click)=\"align.set(a)\">{{ a | titlecase }}</button>\r\n                }\r\n            </div>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTabsAlignComponent {\r\n    aligns: TabAlign[] = [\"start\", \"center\", \"end\"];\r\n    align = signal<TabAlign>(\"start\");\r\n}\r\n"]}

package/esm2022/lib/components/tabs/demo/arrows.js

@@ -0,0 +1,45 @@
+import { Component, signal } from "@angular/core";
+import { AiButton } from "../../button";
+import { AiTab, AiTabsGroup } from "../tabs";
+import * as i0 from "@angular/core";
+export class DemoTabsArrowsComponent {
+    arrows = signal(true, ...(ngDevMode ? [{ debugName: "arrows" }] : []));
+    tabs = signal([
+        { label: "Tab 1", content: "Content 1" },
+        { label: "Tab 2", content: "Content 2" },
+        { label: "Tab 3", content: "Content 3" },
+        { label: "Tab 4", content: "Content 4" },
+        { label: "Tab 5", content: "Content 5" },
+        { label: "Tab 6", content: "Content 6" },
+    ], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTabsArrowsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoTabsArrowsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-6 w-full max-w-xl">
+            <button ai-button variant="ghost" size="sm" (click)="arrows.set(!arrows())">{{ arrows() ? "Hide" : "Show" }} Arrows</button>
+
+            <ai-tabs-group [showArrows]="arrows()">
+                @for (item of tabs(); track $index) {
+                    <ai-tab [label]="item.label">{{ item.content }}</ai-tab>
+                }
+            </ai-tabs-group>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTabsGroup, selector: "ai-tabs-group", inputs: ["tabsPosition", "activePosition", "alignTabs", "showArrows", "class"], outputs: ["changeTab"], exportAs: ["aiTabsGroup"] }, { kind: "component", type: AiTab, selector: "ai-tab", inputs: ["label", "disabled"], exportAs: ["aiTab"] }, { kind: "component", type: AiButton, selector: "ai-button, button[ai-button], a[ai-button]", inputs: ["variant", "size", "shape", "type", "fill", "class", "icon", "full", "loading", "disabled"], exportAs: ["aiButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTabsArrowsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiTabsGroup, AiTab, AiButton],
+                    template: `
+        <div class="flex flex-col gap-6 w-full max-w-xl">
+            <button ai-button variant="ghost" size="sm" (click)="arrows.set(!arrows())">{{ arrows() ? "Hide" : "Show" }} Arrows</button>
+
+            <ai-tabs-group [showArrows]="arrows()">
+                @for (item of tabs(); track $index) {
+                    <ai-tab [label]="item.label">{{ item.content }}</ai-tab>
+                }
+            </ai-tabs-group>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=arrows.js.map

package/esm2022/lib/components/tabs/demo/arrows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrows.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/tabs/demo/arrows.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;;AAgB7C,MAAM,OAAO,uBAAuB;IAChC,MAAM,GAAG,MAAM,CAAC,IAAI,kDAAC,CAAC;IAEtB,IAAI,GAAG,MAAM,CAAC;QACV,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE;QACxC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE;QACxC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE;QACxC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE;QACxC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE;QACxC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE;KAC3C,gDAAC,CAAC;uGAVM,uBAAuB;2FAAvB,uBAAuB,wEAZtB;;;;;;;;;;KAUT,4DAXS,WAAW,6LAAE,KAAK,uGAAE,QAAQ;;2FAa7B,uBAAuB;kBAdnC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,CAAC;oBACvC,QAAQ,EAAE;;;;;;;;;;KAUT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\n\r\nimport { AiButton } from \"../../button\";\r\nimport { AiTab, AiTabsGroup } from \"../tabs\";\r\n\r\n@Component({\r\n    imports: [AiTabsGroup, AiTab, AiButton],\r\n    template: `\r\n        <div class=\"flex flex-col gap-6 w-full max-w-xl\">\r\n            <button ai-button variant=\"ghost\" size=\"sm\" (click)=\"arrows.set(!arrows())\">{{ arrows() ? \"Hide\" : \"Show\" }} Arrows</button>\r\n\r\n            <ai-tabs-group [showArrows]=\"arrows()\">\r\n                @for (item of tabs(); track $index) {\r\n                    <ai-tab [label]=\"item.label\">{{ item.content }}</ai-tab>\r\n                }\r\n            </ai-tabs-group>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTabsArrowsComponent {\r\n    arrows = signal(true);\r\n\r\n    tabs = signal([\r\n        { label: \"Tab 1\", content: \"Content 1\" },\r\n        { label: \"Tab 2\", content: \"Content 2\" },\r\n        { label: \"Tab 3\", content: \"Content 3\" },\r\n        { label: \"Tab 4\", content: \"Content 4\" },\r\n        { label: \"Tab 5\", content: \"Content 5\" },\r\n        { label: \"Tab 6\", content: \"Content 6\" },\r\n    ]);\r\n}\r\n"]}

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

@@ -0,0 +1,27 @@
+import { Component } from "@angular/core";
+import { AiTab, AiTabsGroup } from "../tabs";
+import * as i0 from "@angular/core";
+export class DemoTabsDefaultComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTabsDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoTabsDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <ai-tabs-group>
+            <ai-tab label="Tab 1">Content 1</ai-tab>
+            <ai-tab label="Tab 2">Content 2</ai-tab>
+            <ai-tab label="Tab 3">Content 3</ai-tab>
+        </ai-tabs-group>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTabsGroup, selector: "ai-tabs-group", inputs: ["tabsPosition", "activePosition", "alignTabs", "showArrows", "class"], outputs: ["changeTab"], exportAs: ["aiTabsGroup"] }, { kind: "component", type: AiTab, selector: "ai-tab", inputs: ["label", "disabled"], exportAs: ["aiTab"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTabsDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiTabsGroup, AiTab],
+                    template: `
+        <ai-tabs-group>
+            <ai-tab label="Tab 1">Content 1</ai-tab>
+            <ai-tab label="Tab 2">Content 2</ai-tab>
+            <ai-tab label="Tab 3">Content 3</ai-tab>
+        </ai-tabs-group>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/tabs/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;;AAY7C,MAAM,OAAO,wBAAwB;uGAAxB,wBAAwB;2FAAxB,wBAAwB,wEARvB;;;;;;KAMT,4DAPS,WAAW,6LAAE,KAAK;;2FASnB,wBAAwB;kBAVpC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC;oBAC7B,QAAQ,EAAE;;;;;;KAMT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiTab, AiTabsGroup } from \"../tabs\";\r\n\r\n@Component({\r\n    imports: [AiTabsGroup, AiTab],\r\n    template: `\r\n        <ai-tabs-group>\r\n            <ai-tab label=\"Tab 1\">Content 1</ai-tab>\r\n            <ai-tab label=\"Tab 2\">Content 2</ai-tab>\r\n            <ai-tab label=\"Tab 3\">Content 3</ai-tab>\r\n        </ai-tabs-group>\r\n    `,\r\n})\r\nexport class DemoTabsDefaultComponent {}\r\n"]}

package/esm2022/lib/components/tabs/demo/position.js

@@ -0,0 +1,65 @@
+import { Component } from "@angular/core";
+import { AiButton } from "../../button";
+import { AiTab, AiTabsGroup } from "../tabs";
+import * as i0 from "@angular/core";
+export class DemoTabsPositionComponent {
+    positions = ["top", "bottom", "left", "right"];
+    tabsPosition = "top";
+    activePosition = "bottom";
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTabsPositionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoTabsPositionComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-6 w-full">
+            <ai-tabs-group [tabsPosition]="tabsPosition" [activePosition]="activePosition" class="h-[200px]">
+                <ai-tab label="Tab 1">Content 1</ai-tab>
+                <ai-tab label="Tab 2">Content 2</ai-tab>
+                <ai-tab label="Tab 3">Content 3</ai-tab>
+            </ai-tabs-group>
+
+            <div class="flex flex-col gap-y-3 text-sm">
+                <div class="flex items-center gap-2">
+                    <span class="font-medium">Tabs Position:</span>
+                    @for (pos of positions; track pos) {
+                        <button ai-button variant="ghost" size="sm" (click)="tabsPosition = pos">{{ pos }}</button>
+                    }
+                </div>
+                <div class="flex items-center gap-2">
+                    <span class="font-medium">Active Indicator:</span>
+                    @for (pos of positions; track pos) {
+                        <button ai-button variant="ghost" size="sm" (click)="activePosition = pos">{{ pos }}</button>
+                    }
+                </div>
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTabsGroup, selector: "ai-tabs-group", inputs: ["tabsPosition", "activePosition", "alignTabs", "showArrows", "class"], outputs: ["changeTab"], exportAs: ["aiTabsGroup"] }, { kind: "component", type: AiTab, selector: "ai-tab", inputs: ["label", "disabled"], exportAs: ["aiTab"] }, { kind: "component", type: AiButton, selector: "ai-button, button[ai-button], a[ai-button]", inputs: ["variant", "size", "shape", "type", "fill", "class", "icon", "full", "loading", "disabled"], exportAs: ["aiButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTabsPositionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiTabsGroup, AiTab, AiButton],
+                    template: `
+        <div class="flex flex-col gap-6 w-full">
+            <ai-tabs-group [tabsPosition]="tabsPosition" [activePosition]="activePosition" class="h-[200px]">
+                <ai-tab label="Tab 1">Content 1</ai-tab>
+                <ai-tab label="Tab 2">Content 2</ai-tab>
+                <ai-tab label="Tab 3">Content 3</ai-tab>
+            </ai-tabs-group>
+
+            <div class="flex flex-col gap-y-3 text-sm">
+                <div class="flex items-center gap-2">
+                    <span class="font-medium">Tabs Position:</span>
+                    @for (pos of positions; track pos) {
+                        <button ai-button variant="ghost" size="sm" (click)="tabsPosition = pos">{{ pos }}</button>
+                    }
+                </div>
+                <div class="flex items-center gap-2">
+                    <span class="font-medium">Active Indicator:</span>
+                    @for (pos of positions; track pos) {
+                        <button ai-button variant="ghost" size="sm" (click)="activePosition = pos">{{ pos }}</button>
+                    }
+                </div>
+            </div>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=position.js.map

package/esm2022/lib/components/tabs/demo/position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/tabs/demo/position.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;;AA8B7C,MAAM,OAAO,yBAAyB;IAClC,SAAS,GAAkB,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9D,YAAY,GAAgB,KAAK,CAAC;IAClC,cAAc,GAAsB,QAAQ,CAAC;uGAHpC,yBAAyB;2FAAzB,yBAAyB,wEAzBxB;;;;;;;;;;;;;;;;;;;;;;;KAuBT,4DAxBS,WAAW,6LAAE,KAAK,uGAAE,QAAQ;;2FA0B7B,yBAAyB;kBA3BrC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,CAAC;oBACvC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;KAuBT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiButton } from \"../../button\";\r\nimport { AiTab, AiTabsGroup } from \"../tabs\";\r\nimport { TabActivePosition, TabPosition } from \"../tabs.variants\";\r\n\r\n@Component({\r\n    imports: [AiTabsGroup, AiTab, AiButton],\r\n    template: `\r\n        <div class=\"flex flex-col gap-6 w-full\">\r\n            <ai-tabs-group [tabsPosition]=\"tabsPosition\" [activePosition]=\"activePosition\" class=\"h-[200px]\">\r\n                <ai-tab label=\"Tab 1\">Content 1</ai-tab>\r\n                <ai-tab label=\"Tab 2\">Content 2</ai-tab>\r\n                <ai-tab label=\"Tab 3\">Content 3</ai-tab>\r\n            </ai-tabs-group>\r\n\r\n            <div class=\"flex flex-col gap-y-3 text-sm\">\r\n                <div class=\"flex items-center gap-2\">\r\n                    <span class=\"font-medium\">Tabs Position:</span>\r\n                    @for (pos of positions; track pos) {\r\n                        <button ai-button variant=\"ghost\" size=\"sm\" (click)=\"tabsPosition = pos\">{{ pos }}</button>\r\n                    }\r\n                </div>\r\n                <div class=\"flex items-center gap-2\">\r\n                    <span class=\"font-medium\">Active Indicator:</span>\r\n                    @for (pos of positions; track pos) {\r\n                        <button ai-button variant=\"ghost\" size=\"sm\" (click)=\"activePosition = pos\">{{ pos }}</button>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTabsPositionComponent {\r\n    positions: TabPosition[] = [\"top\", \"bottom\", \"left\", \"right\"];\r\n    tabsPosition: TabPosition = \"top\";\r\n    activePosition: TabActivePosition = \"bottom\";\r\n}\r\n"]}

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

@@ -0,0 +1,15 @@
+import { DemoTabsAlignComponent } from "./align";
+import { DemoTabsArrowsComponent } from "./arrows";
+import { DemoTabsDefaultComponent } from "./default";
+import { DemoTabsPositionComponent } from "./position";
+export const TABS = {
+    componentName: "tabs",
+    examples: [
+        { name: "default", component: DemoTabsDefaultComponent },
+        { name: "align", component: DemoTabsAlignComponent },
+        { name: "arrows", component: DemoTabsArrowsComponent },
+        { name: "position", component: DemoTabsPositionComponent },
+    ],
+};
+export { DemoTabsAlignComponent, DemoTabsArrowsComponent, DemoTabsDefaultComponent, DemoTabsPositionComponent };
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/tabs/demo/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAEvD,MAAM,CAAC,MAAM,IAAI,GAAG;IAChB,aAAa,EAAE,MAAM;IACrB,QAAQ,EAAE;QACN,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,wBAAwB,EAAE;QACxD,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE;QACpD,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,uBAAuB,EAAE;QACtD,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,yBAAyB,EAAE;KAC7D;CACJ,CAAC;AAEF,OAAO,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,CAAC","sourcesContent":["import { DemoTabsAlignComponent } from \"./align\";\r\nimport { DemoTabsArrowsComponent } from \"./arrows\";\r\nimport { DemoTabsDefaultComponent } from \"./default\";\r\nimport { DemoTabsPositionComponent } from \"./position\";\r\n\r\nexport const TABS = {\r\n    componentName: \"tabs\",\r\n    examples: [\r\n        { name: \"default\", component: DemoTabsDefaultComponent },\r\n        { name: \"align\", component: DemoTabsAlignComponent },\r\n        { name: \"arrows\", component: DemoTabsArrowsComponent },\r\n        { name: \"position\", component: DemoTabsPositionComponent },\r\n    ],\r\n};\r\n\r\nexport { DemoTabsAlignComponent, DemoTabsArrowsComponent, DemoTabsDefaultComponent, DemoTabsPositionComponent };\r\n"]}

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

@@ -0,0 +1,3 @@
+export * from "./demo/tabs";
+export * from "./tabs";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC","sourcesContent":["export * from \"./demo/tabs\";\r\nexport * from \"./tabs\";\r\n"]}