@sonny-ui/core 0.1.0-alpha.23 → 0.1.0-alpha.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonny-ui/core",
-  "version": "0.1.0-alpha.23",
+  "version": "0.1.0-alpha.24",
   "description": "Angular UI component library inspired by shadcn/ui — signals, zoneless, Tailwind CSS v4",
   "peerDependencies": {
     "@angular/common": "^21.0.0",

package/src/lib/data-table/data-table.component.ts

@@ -42,6 +42,7 @@ import {
 } from './data-table.directives';
 import type {
   DataTableColumn,
+  DataTableLabels,
   DataTablePaginationConfig,
   SortState,
   SortDirection,
@@ -52,6 +53,12 @@ const DEFAULT_PAGINATION: DataTablePaginationConfig = {
   pageSizeOptions: [5, 10, 25, 50],
 };
 
+const DEFAULT_LABELS: Required<DataTableLabels> = {
+  rowsPerPage: 'Rows per page',
+  rowsSelected: (selected, total) => `${selected} of ${total} row(s) selected`,
+  totalRows: (total) => `${total} row(s)`,
+};
+
 @Component({
   selector: 'sny-data-table',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -292,14 +299,14 @@ const DEFAULT_PAGINATION: DataTablePaginationConfig = {
       <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-4 gap-3 sm:gap-4">
         <span class="text-sm text-muted-foreground">
           @if (selectable()) {
-            {{ selectedRows().length }} of {{ filteredData().length }} row(s) selected
+            {{ resolvedLabels().rowsSelected(selectedRows().length, filteredData().length) }}
           } @else {
-            {{ filteredData().length }} row(s)
+            {{ resolvedLabels().totalRows(filteredData().length) }}
           }
         </span>
         <div class="flex items-center gap-3 sm:gap-4 flex-wrap">
           <div class="flex items-center gap-2">
-            <span class="hidden sm:inline text-sm text-muted-foreground whitespace-nowrap">Rows per page</span>
+            <span class="hidden sm:inline text-sm text-muted-foreground whitespace-nowrap">{{ resolvedLabels().rowsPerPage }}</span>
             <sny-select
               [options]="pageSizeOptions()"
               [value]="pageSizeValue()"
@@ -337,6 +344,7 @@ export class SnyDataTableComponent {
   readonly paginationConfig = input<DataTablePaginationConfig>(DEFAULT_PAGINATION);
   readonly trackBy = input('');
   readonly noDataText = input('No data available');
+  readonly labels = input<DataTableLabels>({});
 
   // Model
   readonly selectedRows = model<Record<string, unknown>[]>([]);
@@ -352,6 +360,9 @@ export class SnyDataTableComponent {
   readonly bulkActionsDef = contentChild(SnyBulkActionsDefDirective);
   readonly rowExpandDef = contentChild(SnyRowExpandDefDirective);
 
+  // Resolved labels
+  readonly resolvedLabels = computed(() => ({ ...DEFAULT_LABELS, ...this.labels() }));
+
   // Internal state
   readonly sortState = signal<SortState>({ key: '', direction: null });
   readonly filterText = signal('');
@@ -478,8 +489,17 @@ export class SnyDataTableComponent {
     effect(() => {
       this.filterText();
       this.pageSize();
-      this.data();
-      untracked(() => this.currentPage.set(1));
+      const data = this.data();
+      untracked(() => {
+        this.currentPage.set(1);
+        const selected = this.selectedRows();
+        if (selected.length) {
+          const cleaned = selected.filter((row) => this.isRowInList(row, data));
+          if (cleaned.length !== selected.length) {
+            this.selectedRows.set(cleaned);
+          }
+        }
+      });
     });
   }
 

package/src/lib/data-table/data-table.types.ts

@@ -18,3 +18,9 @@ export interface DataTablePaginationConfig {
   pageSize: number;
   pageSizeOptions: number[];
 }
+
+export interface DataTableLabels {
+  rowsPerPage?: string;
+  rowsSelected?: (selected: number, total: number) => string;
+  totalRows?: (total: number) => string;
+}

package/src/lib/data-table/index.ts

@@ -9,5 +9,6 @@ export type {
   DataTableColumn,
   SortState,
   SortDirection,
+  DataTableLabels,
   DataTablePaginationConfig,
 } from './data-table.types';

package/types/sonny-ui-core.d.ts

@@ -759,6 +759,11 @@ interface DataTablePaginationConfig {
     pageSize: number;
     pageSizeOptions: number[];
 }
+interface DataTableLabels {
+    rowsPerPage?: string;
+    rowsSelected?: (selected: number, total: number) => string;
+    totalRows?: (total: number) => string;
+}
 
 declare class SnyDataTableComponent {
     readonly columns: _angular_core.InputSignal<DataTableColumn[]>;
@@ -778,6 +783,7 @@ declare class SnyDataTableComponent {
     readonly paginationConfig: _angular_core.InputSignal<DataTablePaginationConfig>;
     readonly trackBy: _angular_core.InputSignal<string>;
     readonly noDataText: _angular_core.InputSignal<string>;
+    readonly labels: _angular_core.InputSignal<DataTableLabels>;
     readonly selectedRows: _angular_core.ModelSignal<Record<string, unknown>[]>;
     readonly sortChanged: _angular_core.OutputEmitterRef<SortState>;
     readonly rowClicked: _angular_core.OutputEmitterRef<Record<string, unknown>>;
@@ -786,6 +792,11 @@ declare class SnyDataTableComponent {
     readonly headerCellDefs: _angular_core.Signal<readonly SnyHeaderCellDefDirective[]>;
     readonly bulkActionsDef: _angular_core.Signal<SnyBulkActionsDefDirective | undefined>;
     readonly rowExpandDef: _angular_core.Signal<SnyRowExpandDefDirective | undefined>;
+    readonly resolvedLabels: _angular_core.Signal<{
+        rowsPerPage: string;
+        rowsSelected: (selected: number, total: number) => string;
+        totalRows: (total: number) => string;
+    }>;
     readonly sortState: _angular_core.WritableSignal<SortState>;
     readonly filterText: _angular_core.WritableSignal<string>;
     readonly currentPage: _angular_core.WritableSignal<number>;
@@ -822,7 +833,7 @@ declare class SnyDataTableComponent {
     private isRowInList;
     private rowsEqual;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnyDataTableComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SnyDataTableComponent, "sny-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "paginated": { "alias": "paginated"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "showExport": { "alias": "showExport"; "required": false; "isSignal": true; }; "showColumnToggle": { "alias": "showColumnToggle"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingRows": { "alias": "loadingRows"; "required": false; "isSignal": true; }; "paginationConfig": { "alias": "paginationConfig"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "noDataText": { "alias": "noDataText"; "required": false; "isSignal": true; }; "selectedRows": { "alias": "selectedRows"; "required": false; "isSignal": true; }; }, { "selectedRows": "selectedRowsChange"; "sortChanged": "sortChanged"; "rowClicked": "rowClicked"; "dataExported": "dataExported"; }, ["cellDefs", "headerCellDefs", "bulkActionsDef", "rowExpandDef"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SnyDataTableComponent, "sny-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "paginated": { "alias": "paginated"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "showExport": { "alias": "showExport"; "required": false; "isSignal": true; }; "showColumnToggle": { "alias": "showColumnToggle"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingRows": { "alias": "loadingRows"; "required": false; "isSignal": true; }; "paginationConfig": { "alias": "paginationConfig"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "noDataText": { "alias": "noDataText"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "selectedRows": { "alias": "selectedRows"; "required": false; "isSignal": true; }; }, { "selectedRows": "selectedRowsChange"; "sortChanged": "sortChanged"; "rowClicked": "rowClicked"; "dataExported": "dataExported"; }, ["cellDefs", "headerCellDefs", "bulkActionsDef", "rowExpandDef"], never, true, never>;
 }
 
 interface CdkDialogRefLike<R> {
@@ -2165,4 +2176,4 @@ declare class SnyValidatorHintDirective {
 }
 
 export { SNY_ACCORDION, SNY_ACCORDION_ITEM, SNY_CAROUSEL, SNY_CHAT_BUBBLE, SNY_CONFIG, SNY_DIALOG_DATA, SNY_DRAWER, SNY_DROPDOWN, SNY_FAB, SNY_POPOVER, SNY_SHEET_DATA, SNY_STEPS, SNY_TABLE, SNY_TABS, SNY_TIMELINE, SnyAccordionContentDirective, SnyAccordionDirective, SnyAccordionItemDirective, SnyAccordionTriggerDirective, SnyAlertDescriptionDirective, SnyAlertDirective, SnyAlertTitleDirective, SnyAvatarComponent, SnyAvatarGroupComponent, SnyBadgeDirective, SnyBreadcrumbDirective, SnyBreadcrumbItemDirective, SnyBreadcrumbLinkDirective, SnyBreadcrumbListDirective, SnyBreadcrumbPageDirective, SnyBreadcrumbSeparatorDirective, SnyBulkActionsDefDirective, SnyButtonDirective, SnyButtonGroupDirective, SnyCalendarComponent, SnyCardContentDirective, SnyCardDescriptionDirective, SnyCardDirective, SnyCardFooterDirective, SnyCardHeaderDirective, SnyCardTitleDirective, SnyCarouselContentDirective, SnyCarouselDirective, SnyCarouselItemDirective, SnyCarouselNextDirective, SnyCarouselPrevDirective, SnyCellDefDirective, SnyChatBubbleAvatarDirective, SnyChatBubbleBodyDirective, SnyChatBubbleContentDirective, SnyChatBubbleDirective, SnyChatBubbleFooterDirective, SnyChatBubbleHeaderDirective, SnyCheckboxDirective, SnyColorPickerComponent, SnyComboboxComponent, SnyCommandPaletteComponent, SnyCommandPaletteService, SnyDataTableComponent, SnyDatePickerComponent, SnyDateRangePickerComponent, SnyDialogCloseDirective, SnyDialogContentDirective, SnyDialogDescriptionDirective, SnyDialogFooterDirective, SnyDialogHeaderDirective, SnyDialogRef, SnyDialogService, SnyDialogTitleDirective, SnyDiffComponent, SnyDividerComponent, SnyDockDirective, SnyDockItemDirective, SnyDrawerContentDirective, SnyDrawerLayoutComponent, SnyDrawerLayoutDirective, SnyDrawerSideDirective, SnyDropdownContentDirective, SnyDropdownDirective, SnyDropdownTriggerDirective, SnyFabActionDirective, SnyFabDirective, SnyFabTriggerDirective, SnyFieldsetContentDirective, SnyFieldsetDirective, SnyFieldsetLegendDirective, SnyFileInputComponent, SnyHeaderCellDefDirective, SnyIndicatorBadgeDirective, SnyIndicatorDirective, SnyInputDirective, SnyKbdDirective, SnyLabelDirective, SnyLinkDirective, SnyListDirective, SnyListItemActionDirective, SnyListItemContentDirective, SnyListItemDirective, SnyListItemIconDirective, SnyLoaderComponent, SnyMenuContentDirective, SnyMenuItemDirective, SnyMenuLabelDirective, SnyMenuSeparatorDirective, SnyNavbarBrandDirective, SnyNavbarContentDirective, SnyNavbarDirective, SnyNavbarEndDirective, SnyNumberInputComponent, SnyOtpInputComponent, SnyPaginationComponent, SnyPopoverContentDirective, SnyPopoverDirective, SnyPopoverTriggerDirective, SnyProgressComponent, SnyRadialProgressComponent, SnyRadioDirective, SnyRatingComponent, SnyRowExpandDefDirective, SnySelectComponent, SnySheetCloseDirective, SnySheetContentDirective, SnySheetDescriptionDirective, SnySheetHeaderDirective, SnySheetRef, SnySheetService, SnySheetTitleDirective, SnySkeletonDirective, SnySliderComponent, SnyStatDescriptionDirective, SnyStatDirective, SnyStatFigureDirective, SnyStatTitleDirective, SnyStatValueDirective, SnyStatusDirective, SnyStepDirective, SnyStepsDirective, SnySwitchComponent, SnyTableBodyDirective, SnyTableCaptionDirective, SnyTableCellDirective, SnyTableDirective, SnyTableFooterDirective, SnyTableHeadDirective, SnyTableHeaderDirective, SnyTableRowDirective, SnyTabsContentDirective, SnyTabsDirective, SnyTabsListDirective, SnyTabsTriggerDirective, SnyTagInputComponent, SnyTextareaDirective, SnyTimelineDirective, SnyTimelineEndDirective, SnyTimelineItemDirective, SnyTimelineMiddleDirective, SnyTimelineStartDirective, SnyToastService, SnyToasterComponent, SnyToggleDirective, SnyTooltipDirective, SnyValidatorDirective, SnyValidatorHintDirective, ThemeService, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxVariants, cn, colorPickerTriggerVariants, comboboxTriggerVariants, datePickerTriggerVariants, dividerVariants, dropdownContentVariants, dropdownItemVariants, fieldsetVariants, fileInputVariants, formatColor, hexToRgb, hslToRgb, hsvToRgb, inputVariants, isValidColor, kbdVariants, labelVariants, linkVariants, loaderVariants, numberInputVariants, otpCellVariants, paginationItemVariants, parseColor, progressBarVariants, progressTrackVariants, provideSonnyUI, radioVariants, ratingVariants, rgbToHex, rgbToHsl, rgbToHsv, selectTriggerVariants, skeletonVariants, sliderTrackVariants, statusVariants, switchTrackVariants, tableCellVariants, tableVariants, tabsListVariants, tabsTriggerVariants, tagInputContainerVariants, tagVariants, textareaVariants, toastVariants, toggleVariants, tooltipVariants };
-export type { AlertVariant, AvatarGroupItem, AvatarGroupSize, AvatarGroupSpacing, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, ButtonGroupOrientation, ButtonSize, ButtonVariant, CalendarDay, CalendarMode, CardPadding, CardVariant, ChatBubbleAlign, ChatBubbleContentVariant, CheckboxSize, ColorFormat, ColorPickerPreset, ColorPickerSize, ComboboxOption, ComboboxSize, Command, CommandGroup, CommandPaletteConfig, DataTableColumn, DataTablePaginationConfig, DatePickerPreset, DatePickerSize, DateRange, DividerOrientation, DividerVariant, DockPosition, DrawerSide, DropdownItemVariant, FabDirection, FabPosition, FieldsetVariant, FileInputSize, FileInputVariant, HSL, HSV, IndicatorPosition, IndicatorVariant, InputSize, InputVariant, KbdSize, LinkVariant, ListVariant, LoaderSize, LoaderVariant, NavbarVariant, NumberInputSize, OtpInputSize, OtpInputType, PaginationSize, PaginationVariant, ProgressSize, ProgressVariant, RGB, RadialProgressSize, RadialProgressVariant, RadioSize, RatingSize, RatingVariant, SelectOption, SelectSize, SheetSide, SkeletonSize, SkeletonVariant, SliderSize, SnyDialogConfig, SnySheetConfig, SonnyConfig, SortDirection, SortState, StatDescriptionVariant, StatusSize, StatusVariant, StepStatus, StepsOrientation, StepsSize, SwitchSize, TableDensity, TableVariant, TagInputSize, TextareaResize, TextareaSize, TextareaVariant, Theme, TimelineConnect, TimelineMiddleVariant, TimelineOrientation, ToastAction, ToastConfig, ToastData, ToastPosition, ToastVariant, ToggleSize, ToggleVariant, TooltipPosition, ValidatorHintVariant };
+export type { AlertVariant, AvatarGroupItem, AvatarGroupSize, AvatarGroupSpacing, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, ButtonGroupOrientation, ButtonSize, ButtonVariant, CalendarDay, CalendarMode, CardPadding, CardVariant, ChatBubbleAlign, ChatBubbleContentVariant, CheckboxSize, ColorFormat, ColorPickerPreset, ColorPickerSize, ComboboxOption, ComboboxSize, Command, CommandGroup, CommandPaletteConfig, DataTableColumn, DataTableLabels, DataTablePaginationConfig, DatePickerPreset, DatePickerSize, DateRange, DividerOrientation, DividerVariant, DockPosition, DrawerSide, DropdownItemVariant, FabDirection, FabPosition, FieldsetVariant, FileInputSize, FileInputVariant, HSL, HSV, IndicatorPosition, IndicatorVariant, InputSize, InputVariant, KbdSize, LinkVariant, ListVariant, LoaderSize, LoaderVariant, NavbarVariant, NumberInputSize, OtpInputSize, OtpInputType, PaginationSize, PaginationVariant, ProgressSize, ProgressVariant, RGB, RadialProgressSize, RadialProgressVariant, RadioSize, RatingSize, RatingVariant, SelectOption, SelectSize, SheetSide, SkeletonSize, SkeletonVariant, SliderSize, SnyDialogConfig, SnySheetConfig, SonnyConfig, SortDirection, SortState, StatDescriptionVariant, StatusSize, StatusVariant, StepStatus, StepsOrientation, StepsSize, SwitchSize, TableDensity, TableVariant, TagInputSize, TextareaResize, TextareaSize, TextareaVariant, Theme, TimelineConnect, TimelineMiddleVariant, TimelineOrientation, ToastAction, ToastConfig, ToastData, ToastPosition, ToastVariant, ToggleSize, ToggleVariant, TooltipPosition, ValidatorHintVariant };