@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
525 lines (517 loc) • 35 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { input, signal, Host, ChangeDetectionStrategy, Component, output, computed, contentChild, contentChildren, effect } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
import { SelectComponent } from '@sixbell-telco/sdk/components/forms/select';
import { IconComponent } from '@sixbell-telco/sdk/components/icon';
import { matInfoOutline } from '@sixbell-telco/sdk/components/icon/material/outline';
import { PaginatorComponent } from '@sixbell-telco/sdk/components/paginator';
import { TypographyDirective } from '@sixbell-telco/sdk/directives/typography';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva, cx } from 'class-variance-authority';
import { CheckboxComponent } from '@sixbell-telco/sdk/components/forms/checkbox';
import { ButtonComponent } from '@sixbell-telco/sdk/components/button';
import { TooltipComponent } from '@sixbell-telco/sdk/components/tooltip';
/**
* Header checkbox component for the table.
*
* This component renders a checkbox within a table header row,
* allowing users to select or deselect all rows in the table.
*
* @remarks
* Utilizes Angular's dependency injection to access the parent {@link TableComponent}
* and propagate the checkbox state changes.
*
* @example
* ```html
* <tr header-checkbox></tr>
* ```
*/
class TableHeaderCheckboxComponent {
table;
/**
* Defines the variant styling of the checkbox.
*
* @defaultValue 'primary'
*/
checkboxVariant = input('primary');
/**
* Defines the size of the checkbox.
*
* @defaultValue 'md'
*/
checkboxSize = input('sm');
/**
* Signal that tracks the checked state of the header checkbox.
*
* @defaultValue false
*/
checked = signal(false);
/**
* Creates an instance of TableHeaderCheckboxComponent.
*
* @param table - Reference to the parent {@link TableComponent} to access table-level operations.
*/
constructor(table) {
this.table = table;
}
/**
* Handles the event when the header checkbox is toggled.
*
* This method notifies the parent table component to either select or deselect all rows.
*
* @param value - The new checked state (true to select all rows, false to deselect all).
*/
handleSelectAll(value) {
this.table.handleToggleAll(value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TableHeaderCheckboxComponent, deps: [{ token: TableComponent, host: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: TableHeaderCheckboxComponent, isStandalone: true, selector: "tr[header-checkbox]", inputs: { checkboxVariant: { classPropertyName: "checkboxVariant", publicName: "checkboxVariant", isSignal: true, isRequired: false, transformFunction: null }, checkboxSize: { classPropertyName: "checkboxSize", publicName: "checkboxSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<th class=\"w-6\">\n\t<st-checkbox [(value)]=\"checked\" (valueUpdated)=\"handleSelectAll($event)\" [variant]=\"checkboxVariant()\" [size]=\"checkboxSize()\" />\n</th>\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: CheckboxComponent, selector: "st-checkbox", inputs: ["variant", "size", "label", "name", "value", "disabled"], outputs: ["valueChange", "valueUpdated", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TableHeaderCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'tr[header-checkbox]', imports: [CheckboxComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<th class=\"w-6\">\n\t<st-checkbox [(value)]=\"checked\" (valueUpdated)=\"handleSelectAll($event)\" [variant]=\"checkboxVariant()\" [size]=\"checkboxSize()\" />\n</th>\n<ng-content></ng-content>\n" }]
}], ctorParameters: () => [{ type: TableComponent, decorators: [{
type: Host
}] }] });
/**
* Row checkbox component for table row selection.
*
* This component renders a checkbox within a table row,
* enabling individual row selection. It interacts with the parent
* {@link TableComponent} to update the selection state.
*
* @example
* ```html
* <tr row-checkbox [identifier]="rowId"></tr>
* ```
*/
class TableRowCheckboxComponent {
table;
/**
* Defines the variant styling of the checkbox.
*
* @defaultValue 'primary'
*/
checkboxVariant = input('primary');
/**
* Defines the size of the checkbox.
*
* @defaultValue 'md'
*/
checkboxSize = input('md');
/**
* Unique identifier for the table row.
*
* This input is required to track the specific row in the table.
*/
identifier = input.required();
/**
* Signal that tracks the checked state of the row checkbox.
*
* @defaultValue false
*/
checked = signal(false);
/**
* Creates an instance of TableRowCheckboxComponent.
*
* @param table - Reference to the parent {@link TableComponent} to access
* table-level operations for row selection.
*/
constructor(table) {
this.table = table;
}
/**
* Handles the selection event of the row checkbox.
*
* This method notifies the parent table component to update the selection state
* for the corresponding row, based on the checkbox's new value.
*
* @param value - The new checked state (true for selected, false for deselected).
*/
handleSelect(value) {
this.table.handleToggleCheckbox(value, this.identifier());
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TableRowCheckboxComponent, deps: [{ token: TableComponent, host: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: TableRowCheckboxComponent, isStandalone: true, selector: "tr[row-checkbox]", inputs: { checkboxVariant: { classPropertyName: "checkboxVariant", publicName: "checkboxVariant", isSignal: true, isRequired: false, transformFunction: null }, checkboxSize: { classPropertyName: "checkboxSize", publicName: "checkboxSize", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<td>\n\t<st-checkbox [(value)]=\"checked\" (valueUpdated)=\"handleSelect($event)\" [variant]=\"checkboxVariant()\" [size]=\"checkboxSize()\"></st-checkbox>\n</td>\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: CheckboxComponent, selector: "st-checkbox", inputs: ["variant", "size", "label", "name", "value", "disabled"], outputs: ["valueChange", "valueUpdated", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TableRowCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'tr[row-checkbox]', imports: [CheckboxComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td>\n\t<st-checkbox [(value)]=\"checked\" (valueUpdated)=\"handleSelect($event)\" [variant]=\"checkboxVariant()\" [size]=\"checkboxSize()\"></st-checkbox>\n</td>\n<ng-content></ng-content>\n" }]
}], ctorParameters: () => [{ type: TableComponent, decorators: [{
type: Host
}] }] });
/**
* @internal
* Generates base table classes with size variants
*/
const tableContent = cva([
'table',
'relative border-separate border-spacing-0',
'[&_thead]:whitespace-normal',
'[&_th]:bg-neutral [&_th]:text-neutral-content',
'[&_th]:px-4',
'[&_td]:px-4',
], {
variants: {
size: {
xs: ['table-xs', '[&_th]:leading-normal', '[&_td]:leading-tight'],
sm: ['table-sm', '[&_th]:leading-normal', '[&_td]:leading-tight'],
md: ['table-md', '[&_th]:leading-normal', '[&_td]:leading-tight'],
lg: ['table-lg', '[&_th]:leading-normal', '[&_td]:leading-tight'],
xl: ['table-lg', '[&_th]:leading-normal', '[&_td]:leading-tight'],
},
},
compoundVariants: [],
defaultVariants: {
size: 'sm',
},
});
/**
* @internal
* Generates table container classes with height variants
*/
const tableContainer = cva(['rounded-t-box', 'overflow-y-clip'], {
variants: {
containerHeight: {
auto: ['h-auto'],
full: ['h-full'],
sm: ['min-h-72 h-72 overscroll-contain overflow-y-auto'],
md: ['min-h-80 h-80 overscroll-contain overflow-y-auto'],
lg: ['min-h-96 h-lg overscroll-contain overflow-y-auto'],
xl: ['min-h-[36rem] h-[36rem] overscroll-contain overflow-y-auto'],
},
},
compoundVariants: [],
defaultVariants: {
containerHeight: 'auto',
},
});
/**
* @internal
* Combines table content and container classes
*/
const tableComponent = ({ size, containerHeight } = {}) => cx(tableContent({ size }), tableContainer({ containerHeight }));
/**
* A feature-rich data table component with sorting, pagination, and row selection
*
* @remarks
* Integrates with Tailwind CSS for styling and supports responsive layouts.
* Includes built-in pagination controls and checkbox selection functionality.
*
* @example
* ```html
* <st-table
* [data]="users"
* [totalItems]="100"
* [pagination]="{ currentPage: 1, itemsPerPage: 10 }"
* (pageChanged)="handlePageChange($event)"
* size="md"
* height="lg"
* zebra
* >
* <!-- Table columns and content -->
* </st-table>
* ```
*/
class TableComponent {
/**
* Table size variant
* @defaultValue 'sm'
*/
size = input();
/**
* Table container height preset
* @defaultValue 'auto'
*/
height = input('auto');
/**
* Enable sticky header row
* @defaultValue false
*/
pinRows = input(false);
/**
* Enable sticky first column
* @defaultValue false
*/
pinColumns = input(false);
/**
* Apply zebra-striping to rows
* @defaultValue false
*/
zebra = input(false);
/**
* Pagination control display variant
* @defaultValue 'default'
*/
paginatorType = input('default');
/** @internal Info icon reference */
infoIcon = matInfoOutline;
/**
* Array of data items to display
* @defaultValue []
*/
data = input([]);
/**
* Total number of items across all pages
* @defaultValue 0
*/
totalItems = input(0);
/**
* Pagination configuration
* @defaultValue { id: 'paginator', currentPage: 1, itemsPerPage: 10, search: '' }
*/
pagination = input({
id: 'paginator',
currentPage: 1,
itemsPerPage: 10,
search: '',
});
/**
* Maximum number of pagination buttons to display
* @defaultValue 7
*/
maxSize = input(7);
/** Event emitted when page changes */
pageChanged = output();
/** Event emitted when page size changes */
pageSizeChanged = output();
/**
* Show items per page selector
* @defaultValue true
*/
showItemsPerPage = input(true);
/**
* Show entries count display
* @defaultValue true
*/
showEntries = input(true);
/**
* Show pagination controls
* @defaultValue true
*/
showPagination = input(true);
/**
* Show footer with additional information
* @defaultValue true
*/
showFooter = input(true);
/**
* Computed display range for current page entries
* @example "1-10" of 100 entries
*/
paginationRange = computed(() => {
const start = this.pagination().currentPage * this.pagination().itemsPerPage - this.pagination().itemsPerPage + 1;
const end = Math.min(this.pagination().currentPage * this.pagination().itemsPerPage, this.totalItems());
return `${start}-${end}`;
});
/**
* Handles page navigation events
* @param page - New page number
*/
handlePageChange(page) {
this.handleToggleAll(false);
this.pageChanged.emit(page);
}
/**
* Handles page size changes
* @param size - New items per page value
*/
handlePageSizeChange(size) {
this.handleToggleAll(false);
this.pageSizeChanged.emit(size);
}
/**
* @internal
* Computes table element classes based on current configuration
*/
tableClass = computed(() => cn(tableContent({
size: this.size(),
}), {
'table-pin-rows': this.pinRows(),
'table-pin-cols': this.pinColumns(),
'table-zebra': this.zebra(),
}));
/**
* @internal
* Computes table container classes based on height input
*/
tableContainerClass = computed(() => cn(tableContainer({
containerHeight: this.height(),
})));
/**
* @internal
* Computes outer container classes based on size
*/
containerClass = computed(() => cn('flex flex-col gap-3 rounded-box border border-solid border-neutral pb-3', {
'gap-3 pb-3': this.size() === 'xs' || this.size() === 'sm' || this.size() === 'md',
'gap-4 pb-4': this.size() === 'lg',
'gap-5 pb-5': this.size() === 'xl',
}));
/**
* @internal
* Computes typography variant for paginator text based on table size
*/
paginatorTextSize = computed(() => {
switch (this.size()) {
case 'xs':
return 'body-xxs';
case 'sm':
return 'body-xs';
case 'md':
return 'body-sm';
case 'lg':
return 'body';
case 'xl':
return 'body';
default:
return 'body-xs';
}
});
/** @internal Reference to header checkbox component */
header = contentChild(TableHeaderCheckboxComponent, { descendants: true });
/** @internal List of row checkbox components */
rows = contentChildren(TableRowCheckboxComponent, { descendants: true });
/** @internal Track selected row identifiers */
identifiers = signal(new Set());
/** Event emitted with array of selected item identifiers */
checkedItems = output();
/** @internal Sync checkbox state with output */
checkEffect = effect(() => {
this.checkedItems.emit(Array.from(this.identifiers()));
});
/**
* Toggle all row checkboxes
* @param value - Whether to check or uncheck all rows
*/
handleToggleAll(value) {
if (!value) {
this.clearList();
}
this.rows().forEach((row) => {
row.checked.set(value);
if (value) {
this.identifiers.update((items) => new Set(items).add(row.identifier()));
}
});
}
/**
* Handle individual checkbox toggle
* @param value - Checkbox state
* @param identifier - Unique row identifier
*/
handleToggleCheckbox(value, identifier) {
if (value) {
this.identifiers.update((items) => new Set(items).add(identifier));
}
else {
this.header()?.checked.set(false);
this.identifiers.update((items) => {
items.delete(identifier);
return new Set(items);
});
}
}
/** @internal Clear all selections */
clearList() {
this.identifiers.set(new Set());
this.header()?.checked.set(false);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: TableComponent, isStandalone: true, selector: "st-table", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, pinRows: { classPropertyName: "pinRows", publicName: "pinRows", isSignal: true, isRequired: false, transformFunction: null }, pinColumns: { classPropertyName: "pinColumns", publicName: "pinColumns", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, paginatorType: { classPropertyName: "paginatorType", publicName: "paginatorType", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, showItemsPerPage: { classPropertyName: "showItemsPerPage", publicName: "showItemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, showEntries: { classPropertyName: "showEntries", publicName: "showEntries", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", checkedItems: "checkedItems" }, queries: [{ propertyName: "header", first: true, predicate: TableHeaderCheckboxComponent, descendants: true, isSignal: true }, { propertyName: "rows", predicate: TableRowCheckboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let total = totalItems();\n@let dataVar = data();\n@let containerClassVar = containerClass();\n@let tableContainerClassVar = tableContainerClass();\n@let tableClassVar = tableClass();\n@let paginatorTextSizeVar = paginatorTextSize();\n@let showItemsPerPageVar = showItemsPerPage();\n@let paginationVar = pagination();\n@let showPaginationVar = showPagination();\n@let paginatorTypeVar = paginatorType();\n@let maxSizeVar = maxSize();\n@let showEntriesVar = showEntries();\n@let heightVar = height();\n@let showshowFooterVar = showFooter();\n\n@if (total > 0 || dataVar.length > 0) {\n\t<div [class]=\"containerClassVar\">\n\t\t<!-- Table -->\n\t\t<div [class]=\"tableContainerClassVar\">\n\t\t\t<table [class]=\"tableClassVar\">\n\t\t\t\t<ng-content select=\"thead\" class=\"[&_tr]:\\hover\"></ng-content>\n\t\t\t\t<ng-content select=\"tbody\"></ng-content>\n\t\t\t</table>\n\t\t</div>\n\t\t@if (total > 0) {\n\t\t\t@if (heightVar !== 'auto') {\n\t\t\t\t<!-- gradient -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"after:from-base-200 relative after:absolute after:inset-x-0 after:right-0 after:bottom-0 after:left-0 after:block after:h-6 after:bg-gradient-to-t after:to-transparent after:bg-top after:content-['']\"\n\t\t\t\t></div>\n\t\t\t}\n\n\t\t\t<!-- Footer -->\n\t\t\t@if (showshowFooterVar) {\n\t\t\t\t<div class=\"flex flex-col gap-3\">\n\t\t\t\t\t<!-- Divider -->\n\t\t\t\t\t<div class=\"divider divider-neutral my-0 h-[0.0625rem] px-4 before:h-[0.0625rem] after:h-[0.0625rem]\"></div>\n\n\t\t\t\t\t<!-- Paginator -->\n\t\t\t\t\t<div class=\"gap grid min-h-[30px] grid-cols-[1fr_3fr_1fr] items-center px-4\">\n\t\t\t\t\t\t<!-- Pagination info -->\n\t\t\t\t\t\t<div class=\"flex items-center justify-self-start\">\n\t\t\t\t\t\t\t@if (showItemsPerPageVar) {\n\t\t\t\t\t\t\t\t<st-select\n\t\t\t\t\t\t\t\t\t[options]=\"[5, 10, 20, 50, 100]\"\n\t\t\t\t\t\t\t\t\t[value]=\"paginationVar.itemsPerPage\"\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t(valueUpdated)=\"handlePageSizeChange($event)\"\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t></st-select>\n\t\t\t\t\t\t\t\t<div class=\"ml-2\">\n\t\t\t\t\t\t\t\t\t<span typography [tyVariant]=\"paginatorTextSizeVar\" [tyColor]=\"'inherit'\">{{ 'sdk.table.entriesByPage' | translate }}</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"justify-self-center\">\n\t\t\t\t\t\t\t@if (showPaginationVar) {\n\t\t\t\t\t\t\t\t@if (paginatorTypeVar === 'default') {\n\t\t\t\t\t\t\t\t\t<st-paginator\n\t\t\t\t\t\t\t\t\t\t[paginatorId]=\"paginationVar.id\"\n\t\t\t\t\t\t\t\t\t\t[currentPage]=\"paginationVar.currentPage\"\n\t\t\t\t\t\t\t\t\t\t[maxSize]=\"maxSizeVar\"\n\t\t\t\t\t\t\t\t\t\t(pageChanged)=\"handlePageChange($event)\"\n\t\t\t\t\t\t\t\t\t></st-paginator>\n\t\t\t\t\t\t\t\t} @else if (paginatorTypeVar === 'dots') {\n\t\t\t\t\t\t\t\t\t<st-paginator [paginatorId]=\"paginationVar.id\" (pageChanged)=\"handlePageChange($event)\" type=\"dots\"></st-paginator>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"flex items-center justify-self-end\">\n\t\t\t\t\t\t\t@if (showEntriesVar) {\n\t\t\t\t\t\t\t\t@if (!showItemsPerPageVar && !showPaginationVar) {\n\t\t\t\t\t\t\t\t\t<span typography [tyVariant]=\"paginatorTextSizeVar\" [tyColor]=\"'inherit'\">\n\t\t\t\t\t\t\t\t\t\t{{ 'sdk.table.totalEntries' | translate: { total: total } }}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<span typography [tyVariant]=\"paginatorTextSizeVar\" [tyColor]=\"'inherit'\">\n\t\t\t\t\t\t\t\t\t\t{{ 'sdk.table.entriesRange' | translate: { range: paginationRange(), total: total } }}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n} @else {\n\t<div class=\"rounded-box border-neutral grid h-full place-content-center gap-4 border border-solid p-6\">\n\t\t<div>\n\t\t\t<div class=\"text-info grid place-content-center\">\n\t\t\t\t<st-icon [icon]=\"infoIcon\" size=\"lg\" color=\"inherit\" size=\"lg\"></st-icon>\n\t\t\t</div>\n\t\t\t<span typography [tyVariant]=\"paginatorTextSizeVar\" [tyColor]=\"'inherit'\">{{ 'sdk.table.emptyListMessage' | translate }}</span>\n\t\t</div>\n\t</div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaginatorComponent, selector: "st-paginator", inputs: ["paginatorId", "maxSize", "type", "pages", "currentPage"], outputs: ["pageChanged", "currentPageChange"] }, { kind: "directive", type: TypographyDirective, selector: "[typography]", inputs: ["tyVariant", "tyColor", "tyFontWeight", "tyTextOverflow"] }, { kind: "component", type: SelectComponent, selector: "st-select", inputs: ["variant", "size", "ghost", "name", "placeholder", "label", "value", "options", "emptyOptionText", "trackBy", "key", "parentForm", "formControlName", "disabled"], outputs: ["valueChange", "blurred", "disabledChange", "valueUpdated"] }, { kind: "component", type: IconComponent, selector: "st-icon", inputs: ["color", "size", "icon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TableComponent, decorators: [{
type: Component,
args: [{ selector: 'st-table', imports: [CommonModule, PaginatorComponent, TypographyDirective, SelectComponent, IconComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let total = totalItems();\n@let dataVar = data();\n@let containerClassVar = containerClass();\n@let tableContainerClassVar = tableContainerClass();\n@let tableClassVar = tableClass();\n@let paginatorTextSizeVar = paginatorTextSize();\n@let showItemsPerPageVar = showItemsPerPage();\n@let paginationVar = pagination();\n@let showPaginationVar = showPagination();\n@let paginatorTypeVar = paginatorType();\n@let maxSizeVar = maxSize();\n@let showEntriesVar = showEntries();\n@let heightVar = height();\n@let showshowFooterVar = showFooter();\n\n@if (total > 0 || dataVar.length > 0) {\n\t<div [class]=\"containerClassVar\">\n\t\t<!-- Table -->\n\t\t<div [class]=\"tableContainerClassVar\">\n\t\t\t<table [class]=\"tableClassVar\">\n\t\t\t\t<ng-content select=\"thead\" class=\"[&_tr]:\\hover\"></ng-content>\n\t\t\t\t<ng-content select=\"tbody\"></ng-content>\n\t\t\t</table>\n\t\t</div>\n\t\t@if (total > 0) {\n\t\t\t@if (heightVar !== 'auto') {\n\t\t\t\t<!-- gradient -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"after:from-base-200 relative after:absolute after:inset-x-0 after:right-0 after:bottom-0 after:left-0 after:block after:h-6 after:bg-gradient-to-t after:to-transparent after:bg-top after:content-['']\"\n\t\t\t\t></div>\n\t\t\t}\n\n\t\t\t<!-- Footer -->\n\t\t\t@if (showshowFooterVar) {\n\t\t\t\t<div class=\"flex flex-col gap-3\">\n\t\t\t\t\t<!-- Divider -->\n\t\t\t\t\t<div class=\"divider divider-neutral my-0 h-[0.0625rem] px-4 before:h-[0.0625rem] after:h-[0.0625rem]\"></div>\n\n\t\t\t\t\t<!-- Paginator -->\n\t\t\t\t\t<div class=\"gap grid min-h-[30px] grid-cols-[1fr_3fr_1fr] items-center px-4\">\n\t\t\t\t\t\t<!-- Pagination info -->\n\t\t\t\t\t\t<div class=\"flex items-center justify-self-start\">\n\t\t\t\t\t\t\t@if (showItemsPerPageVar) {\n\t\t\t\t\t\t\t\t<st-select\n\t\t\t\t\t\t\t\t\t[options]=\"[5, 10, 20, 50, 100]\"\n\t\t\t\t\t\t\t\t\t[value]=\"paginationVar.itemsPerPage\"\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t(valueUpdated)=\"handlePageSizeChange($event)\"\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t></st-select>\n\t\t\t\t\t\t\t\t<div class=\"ml-2\">\n\t\t\t\t\t\t\t\t\t<span typography [tyVariant]=\"paginatorTextSizeVar\" [tyColor]=\"'inherit'\">{{ 'sdk.table.entriesByPage' | translate }}</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"justify-self-center\">\n\t\t\t\t\t\t\t@if (showPaginationVar) {\n\t\t\t\t\t\t\t\t@if (paginatorTypeVar === 'default') {\n\t\t\t\t\t\t\t\t\t<st-paginator\n\t\t\t\t\t\t\t\t\t\t[paginatorId]=\"paginationVar.id\"\n\t\t\t\t\t\t\t\t\t\t[currentPage]=\"paginationVar.currentPage\"\n\t\t\t\t\t\t\t\t\t\t[maxSize]=\"maxSizeVar\"\n\t\t\t\t\t\t\t\t\t\t(pageChanged)=\"handlePageChange($event)\"\n\t\t\t\t\t\t\t\t\t></st-paginator>\n\t\t\t\t\t\t\t\t} @else if (paginatorTypeVar === 'dots') {\n\t\t\t\t\t\t\t\t\t<st-paginator [paginatorId]=\"paginationVar.id\" (pageChanged)=\"handlePageChange($event)\" type=\"dots\"></st-paginator>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"flex items-center justify-self-end\">\n\t\t\t\t\t\t\t@if (showEntriesVar) {\n\t\t\t\t\t\t\t\t@if (!showItemsPerPageVar && !showPaginationVar) {\n\t\t\t\t\t\t\t\t\t<span typography [tyVariant]=\"paginatorTextSizeVar\" [tyColor]=\"'inherit'\">\n\t\t\t\t\t\t\t\t\t\t{{ 'sdk.table.totalEntries' | translate: { total: total } }}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<span typography [tyVariant]=\"paginatorTextSizeVar\" [tyColor]=\"'inherit'\">\n\t\t\t\t\t\t\t\t\t\t{{ 'sdk.table.entriesRange' | translate: { range: paginationRange(), total: total } }}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n} @else {\n\t<div class=\"rounded-box border-neutral grid h-full place-content-center gap-4 border border-solid p-6\">\n\t\t<div>\n\t\t\t<div class=\"text-info grid place-content-center\">\n\t\t\t\t<st-icon [icon]=\"infoIcon\" size=\"lg\" color=\"inherit\" size=\"lg\"></st-icon>\n\t\t\t</div>\n\t\t\t<span typography [tyVariant]=\"paginatorTextSizeVar\" [tyColor]=\"'inherit'\">{{ 'sdk.table.emptyListMessage' | translate }}</span>\n\t\t</div>\n\t</div>\n}\n" }]
}] });
/**
* Component to render a table action, typically a button with optional tooltip.
*
* @remarks
* This component encapsulates a button within a table, allowing for consistent styling
* and easy integration with tooltips.
*
* @example
* ```html
* <st-table-action tooltip="Delete" icon="delete">
* Delete
* </st-table-action>
* ```
*/
class TableActionComponent {
/**
* Button style variant.
* @defaultValue 'primary'
*/
variant = input('primary');
/**
* Tooltip text (optional).
*/
tooltip = input();
/**
* Icon name (optional).
*/
icon = input();
/**
* Button size.
* @defaultValue 'md'
*/
size = input('md');
/**
* Computes CSS classes for the table action text size based on the current size setting.
*
* @returns A string of CSS classes determined by the component's size:
* - 'xs' size: applies 'text-[0.6875rem]' class
* - 'sm' size: applies 'text-xs' class
* - 'md' size: applies 'text-sm' class
* - 'lg' or 'xl' size: applies 'text-lg' class
*/
tableActionClass = computed(() => {
return cn({
'text-[0.6875rem]': this.size() === 'xs',
'text-xs': this.size() === 'sm',
'text-sm': this.size() === 'md',
'text-lg': this.size() === 'lg' || this.size() === 'xl',
});
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TableActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: TableActionComponent, isStandalone: true, selector: "st-table-action", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let tooltipVar = tooltip();\n@let variantVar = variant();\n@let iconVar = icon();\n@let sizeVar = size();\n\n<!-- Define the button template with content projection -->\n<ng-template #buttonTemplate>\n\t<st-button [class]=\"tableActionClass()\" [variant]=\"variantVar\" [icon]=\"iconVar\" [link]=\"true\" [size]=\"sizeVar\">\n\t\t<ng-content></ng-content>\n\t</st-button>\n</ng-template>\n\n<!-- Conditional rendering -->\n@if (tooltipVar) {\n\t<st-tooltip variant=\"secondary\" [label]=\"tooltipVar | translate\" position=\"top\">\n\t\t<ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n\t</st-tooltip>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "st-tooltip", inputs: ["variant", "position", "label"] }, { kind: "component", type: ButtonComponent, selector: "st-button", inputs: ["variant", "ghost", "outline", "link", "soft", "dash", "wide", "circle", "square", "glass", "block", "loader", "size", "shadow", "focusable", "icon", "iconPosition", "type", "disabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TableActionComponent, decorators: [{
type: Component,
args: [{ selector: 'st-table-action', imports: [CommonModule, TooltipComponent, ButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let tooltipVar = tooltip();\n@let variantVar = variant();\n@let iconVar = icon();\n@let sizeVar = size();\n\n<!-- Define the button template with content projection -->\n<ng-template #buttonTemplate>\n\t<st-button [class]=\"tableActionClass()\" [variant]=\"variantVar\" [icon]=\"iconVar\" [link]=\"true\" [size]=\"sizeVar\">\n\t\t<ng-content></ng-content>\n\t</st-button>\n</ng-template>\n\n<!-- Conditional rendering -->\n@if (tooltipVar) {\n\t<st-tooltip variant=\"secondary\" [label]=\"tooltipVar | translate\" position=\"top\">\n\t\t<ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n\t</st-tooltip>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n}\n" }]
}] });
/**
* Component to render a container for table actions.
*
* @remarks
* This component is a simple container for action buttons or other interactive elements
* within a table. It provides basic styling and layout.
*
* @example
* ```html
* <st-table-actions>
* <button>Action 1</button>
* <button>Action 2</button>
* </st-table-actions>
* ```
*/
class TableActionsComponent {
/**
* @internal
* Computed class string for the table actions container.
*/
componentClass = computed(() => cn('inline-flex items-center gap-2 grow-0 align-top justify-cente'));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: TableActionsComponent, isStandalone: true, selector: "st-table-actions", ngImport: i0, template: "<div [class]=\"componentClass()\">\n\t<ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TableActionsComponent, decorators: [{
type: Component,
args: [{ selector: 'st-table-actions', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"componentClass()\">\n\t<ng-content></ng-content>\n</div>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TableActionComponent, TableActionsComponent, TableComponent, TableHeaderCheckboxComponent, TableRowCheckboxComponent, tableComponent, tableContainer, tableContent };
//# sourceMappingURL=sixbell-telco-sdk-components-table.mjs.map