@alaarab/ogrid-angular 2.0.8 → 2.0.11

package/dist/esm/components/base-column-chooser.component.js

@@ -0,0 +1,78 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { signal, computed, Input, Output, EventEmitter } from '@angular/core';
+/**
+ * Abstract base class containing all shared TypeScript logic for ColumnChooser components.
+ * Framework-specific UI packages extend this with their templates and style overrides.
+ *
+ * Subclasses must:
+ * 1. Provide a @Component decorator with template and styles
+ * 2. Handle their own click-outside behavior (host binding or effect)
+ */
+export class BaseColumnChooserComponent {
+    constructor() {
+        this._columns = signal([]);
+        this._visibleColumns = signal(new Set());
+        this.visibilityChange = new EventEmitter();
+        // Dropdown state
+        this.isOpen = signal(false);
+        // Computed counts (signal-backed so computed() tracks changes)
+        this.visibleCount = computed(() => this._visibleColumns().size);
+        this.totalCount = computed(() => this._columns().length);
+    }
+    set columns(v) { this._columns.set(v); }
+    get columns() { return this._columns(); }
+    set visibleColumns(v) { this._visibleColumns.set(v); }
+    get visibleColumns() { return this._visibleColumns(); }
+    toggle() {
+        this.isOpen.update((v) => !v);
+    }
+    onCheckboxChange(columnKey, event) {
+        const checked = event.target.checked;
+        this.visibilityChange.emit({ columnKey, visible: checked });
+    }
+    onToggle(columnKey, checked) {
+        this.visibilityChange.emit({ columnKey, visible: checked });
+    }
+    selectAll() {
+        for (const col of this.columns) {
+            if (!this.visibleColumns.has(col.columnId)) {
+                this.visibilityChange.emit({ columnKey: col.columnId, visible: true });
+            }
+        }
+    }
+    clearAll() {
+        for (const col of this.columns) {
+            if (this.visibleColumns.has(col.columnId)) {
+                this.visibilityChange.emit({ columnKey: col.columnId, visible: false });
+            }
+        }
+    }
+    onClearAll() {
+        for (const col of this.columns) {
+            if (col.required !== true && this.visibleColumns.has(col.columnId)) {
+                this.visibilityChange.emit({ columnKey: col.columnId, visible: false });
+            }
+        }
+    }
+    onSelectAll() {
+        for (const col of this.columns) {
+            if (!this.visibleColumns.has(col.columnId)) {
+                this.visibilityChange.emit({ columnKey: col.columnId, visible: true });
+            }
+        }
+    }
+}
+__decorate([
+    Input({ required: true })
+], BaseColumnChooserComponent.prototype, "columns", null);
+__decorate([
+    Input({ required: true })
+], BaseColumnChooserComponent.prototype, "visibleColumns", null);
+__decorate([
+    Output()
+], BaseColumnChooserComponent.prototype, "visibilityChange", void 0);

package/dist/esm/components/base-column-header-filter.component.js

@@ -0,0 +1,266 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { signal, computed, Input } from '@angular/core';
+/**
+ * Abstract base class containing all shared TypeScript logic for ColumnHeaderFilter components.
+ * Framework-specific UI packages extend this with their templates and style overrides.
+ *
+ * Subclasses must:
+ * 1. Provide a @Component decorator with template and styles
+ * 2. Implement abstract accessor for headerEl (ViewChild reference)
+ */
+export class BaseColumnHeaderFilterComponent {
+    constructor() {
+        // Signal-backed inputs used by computed() — plain @Input properties aren't tracked by computed()
+        this._filterType = signal('none');
+        this._selectedValues = signal(undefined);
+        this._options = signal(undefined);
+        this._textValue = signal('');
+        this._selectedUser = signal(undefined);
+        this._dateValue = signal(undefined);
+        // Plain inputs (not used in computed() — no signal wrapper needed)
+        this.isSorted = false;
+        this.isSortedDescending = false;
+        this.onSort = undefined;
+        this.onFilterChange = undefined;
+        this.isLoadingOptions = false;
+        this.onTextChange = undefined;
+        this.onUserChange = undefined;
+        this.peopleSearch = undefined;
+        this.onDateChange = undefined;
+        // Internal state signals
+        this.isFilterOpen = signal(false);
+        this.tempTextValue = signal('');
+        this.searchText = signal('');
+        this.tempSelected = signal(new Set());
+        this.peopleSearchText = signal('');
+        this.peopleSuggestions = signal([]);
+        this.isPeopleLoading = signal(false);
+        this.tempDateFrom = signal('');
+        this.tempDateTo = signal('');
+        // Popover position
+        this.popoverTop = signal(0);
+        this.popoverLeft = signal(0);
+        this.peopleDebounceTimer = null;
+        // Computed signals
+        this.hasActiveFilter = computed(() => {
+            const ft = this._filterType();
+            if (ft === 'text')
+                return !!this._textValue();
+            if (ft === 'multiSelect')
+                return (this._selectedValues()?.length ?? 0) > 0;
+            if (ft === 'people')
+                return this._selectedUser() != null;
+            if (ft === 'date')
+                return this._dateValue() != null;
+            return false;
+        });
+        this.filteredOptions = computed(() => {
+            const opts = this._options() ?? [];
+            const search = this.searchText().toLowerCase().trim();
+            if (!search)
+                return opts;
+            return opts.filter((o) => o.toLowerCase().includes(search));
+        });
+    }
+    set filterType(v) { this._filterType.set(v); }
+    get filterType() { return this._filterType(); }
+    set selectedValues(v) { this._selectedValues.set(v); }
+    get selectedValues() { return this._selectedValues(); }
+    set options(v) { this._options.set(v); }
+    get options() { return this._options(); }
+    set textValue(v) { this._textValue.set(v); }
+    get textValue() { return this._textValue(); }
+    set selectedUser(v) { this._selectedUser.set(v); }
+    get selectedUser() { return this._selectedUser(); }
+    set dateValue(v) { this._dateValue.set(v); }
+    get dateValue() { return this._dateValue(); }
+    // Utility methods
+    asInputValue(event) {
+        return event.target.value;
+    }
+    toggleFilter(event) {
+        event.stopPropagation();
+        if (this.isFilterOpen()) {
+            this.isFilterOpen.set(false);
+            return;
+        }
+        // Initialize temp state from current values
+        this.tempTextValue.set(this.textValue);
+        this.tempSelected.set(new Set(this.selectedValues ?? []));
+        this.searchText.set('');
+        this.peopleSearchText.set('');
+        this.peopleSuggestions.set([]);
+        const dv = this.dateValue;
+        this.tempDateFrom.set(dv?.from ?? '');
+        this.tempDateTo.set(dv?.to ?? '');
+        // Compute popover position
+        const el = this.getHeaderEl()?.nativeElement;
+        if (el) {
+            const rect = el.getBoundingClientRect();
+            this.popoverTop.set(rect.bottom + 4);
+            this.popoverLeft.set(rect.left);
+        }
+        this.isFilterOpen.set(true);
+    }
+    // --- Text filter handlers ---
+    onTextKeydown(event) {
+        event.stopPropagation();
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.handleTextApply();
+        }
+    }
+    handleTextApply() {
+        this.onTextChange(this.tempTextValue());
+        this.isFilterOpen.set(false);
+    }
+    handleTextClear() {
+        this.tempTextValue.set('');
+        this.onTextChange('');
+        this.isFilterOpen.set(false);
+    }
+    // --- MultiSelect filter handlers ---
+    handleCheckboxChange(option, event) {
+        const checked = event.target.checked;
+        this.tempSelected.update((s) => {
+            const next = new Set(s);
+            if (checked)
+                next.add(option);
+            else
+                next.delete(option);
+            return next;
+        });
+    }
+    handleSelectAllFiltered() {
+        this.tempSelected.update((s) => {
+            const next = new Set(s);
+            for (const opt of this.filteredOptions())
+                next.add(opt);
+            return next;
+        });
+    }
+    handleClearSelection() {
+        this.tempSelected.set(new Set());
+    }
+    handleApplyMultiSelect() {
+        this.onFilterChange(Array.from(this.tempSelected()));
+        this.isFilterOpen.set(false);
+    }
+    // --- People filter handlers ---
+    onPeopleSearchInput(event) {
+        const value = event.target.value;
+        this.peopleSearchText.set(value);
+        if (this.peopleDebounceTimer)
+            clearTimeout(this.peopleDebounceTimer);
+        const query = value.trim();
+        if (!query) {
+            this.peopleSuggestions.set([]);
+            this.isPeopleLoading.set(false);
+            return;
+        }
+        this.isPeopleLoading.set(true);
+        this.peopleDebounceTimer = setTimeout(() => {
+            const fn = this.peopleSearch;
+            if (!fn)
+                return;
+            fn(query)
+                .then((results) => {
+                this.peopleSuggestions.set(results);
+                this.isPeopleLoading.set(false);
+            })
+                .catch(() => {
+                this.peopleSuggestions.set([]);
+                this.isPeopleLoading.set(false);
+            });
+        }, 300);
+    }
+    handleUserSelect(user) {
+        this.onUserChange(user);
+        this.isFilterOpen.set(false);
+    }
+    handleClearUser() {
+        this.onUserChange(undefined);
+        this.isFilterOpen.set(false);
+    }
+    // --- Date filter handlers ---
+    handleDateApply() {
+        const from = this.tempDateFrom();
+        const to = this.tempDateTo();
+        if (!from && !to) {
+            this.onDateChange(undefined);
+        }
+        else {
+            this.onDateChange({ from: from || undefined, to: to || undefined });
+        }
+        this.isFilterOpen.set(false);
+    }
+    handleDateClear() {
+        this.tempDateFrom.set('');
+        this.tempDateTo.set('');
+        this.onDateChange(undefined);
+        this.isFilterOpen.set(false);
+    }
+    // --- Document click handler (for click-outside to close) ---
+    onDocumentClick(event, selectorName) {
+        const el = event.target;
+        if (!el.closest(selectorName) && !el.closest('.ogrid-header-filter__popover')) {
+            this.isFilterOpen.set(false);
+        }
+    }
+}
+__decorate([
+    Input({ required: true })
+], BaseColumnHeaderFilterComponent.prototype, "columnKey", void 0);
+__decorate([
+    Input({ required: true })
+], BaseColumnHeaderFilterComponent.prototype, "columnName", void 0);
+__decorate([
+    Input({ required: true })
+], BaseColumnHeaderFilterComponent.prototype, "filterType", null);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "selectedValues", null);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "options", null);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "textValue", null);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "selectedUser", null);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "dateValue", null);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "isSorted", void 0);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "isSortedDescending", void 0);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "onSort", void 0);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "onFilterChange", void 0);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "isLoadingOptions", void 0);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "onTextChange", void 0);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "onUserChange", void 0);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "peopleSearch", void 0);
+__decorate([
+    Input()
+], BaseColumnHeaderFilterComponent.prototype, "onDateChange", void 0);

package/dist/esm/components/base-datagrid-table.component.js

@@ -2,7 +2,7 @@ import { signal, computed, effect } from '@angular/core';
 import { DataGridStateService } from '../services/datagrid-state.service';
 import { ColumnReorderService } from '../services/column-reorder.service';
 import { VirtualScrollService } from '../services/virtual-scroll.service';
-import { buildHeaderRows, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-core';
+import { buildHeaderRows, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, } from '@alaarab/ogrid-core';
 import { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, } from '../utils';
 /**
  * Abstract base class containing all shared TypeScript logic for DataGridTable components.
@@ -20,9 +20,14 @@ export class BaseDataGridTableComponent {
         this.virtualScrollService = new VirtualScrollService();
         this.lastMouseShift = false;
         this.columnSizingVersion = signal(0);
+        // Signal-backed view child elements — set from ngAfterViewInit.
+        // @ViewChild is a plain property (not a signal), so effects/computed that read it
+        // only evaluate once during construction when the ref is still undefined.
+        this.wrapperElSignal = signal(null);
+        this.tableContainerElSignal = signal(null);
         // --- Delegated state ---
         this.state = computed(() => this.stateService.getState());
-        this.tableContainerEl = computed(() => this.getTableContainerRef()?.nativeElement ?? null);
+        this.tableContainerEl = computed(() => this.tableContainerElSignal());
         this.allItems = computed(() => this.getProps()?.items ?? []);
         this.items = computed(() => this.getProps()?.items ?? []);
         this.getRowId = computed(() => this.getProps()?.getRowId ?? ((item) => item['id']));
@@ -37,6 +42,8 @@ export class BaseDataGridTableComponent {
         this.currentPage = computed(() => this.getProps()?.currentPage ?? 1);
         this.pageSize = computed(() => this.getProps()?.pageSize ?? 25);
         this.rowNumberOffset = computed(() => this.hasRowNumbersCol() ? (this.currentPage() - 1) * this.pageSize() : 0);
+        this.propsVisibleColumns = computed(() => this.getProps()?.visibleColumns);
+        this.propsColumnOrder = computed(() => this.getProps()?.columnOrder);
         // State service outputs
         this.visibleCols = computed(() => this.state().layout.visibleCols);
         this.hasCheckboxCol = computed(() => this.state().layout.hasCheckboxCol);
@@ -137,6 +144,43 @@ export class BaseDataGridTableComponent {
                 };
             });
         });
+        // Compute sticky offsets for pinned columns (cumulative left/right positions)
+        this.pinningOffsets = computed(() => {
+            const layouts = this.columnLayouts();
+            const leftOffsets = {};
+            const rightOffsets = {};
+            // Left offsets: start after checkbox and row number columns
+            let leftAcc = 0;
+            if (this.hasCheckboxCol())
+                leftAcc += CHECKBOX_COLUMN_WIDTH;
+            if (this.hasRowNumbersCol())
+                leftAcc += ROW_NUMBER_COLUMN_WIDTH;
+            for (const layout of layouts) {
+                if (layout.pinnedLeft) {
+                    leftOffsets[layout.col.columnId] = leftAcc;
+                    leftAcc += layout.width + CELL_PADDING;
+                }
+            }
+            // Right offsets: walk from the end
+            let rightAcc = 0;
+            for (let i = layouts.length - 1; i >= 0; i--) {
+                const layout = layouts[i];
+                if (layout.pinnedRight) {
+                    rightOffsets[layout.col.columnId] = rightAcc;
+                    rightAcc += layout.width + CELL_PADDING;
+                }
+            }
+            return { leftOffsets, rightOffsets };
+        });
+    }
+    /** Lifecycle hook — populate element signals from @ViewChild refs */
+    ngAfterViewInit() {
+        const wrapper = this.getWrapperRef()?.nativeElement ?? null;
+        const tableContainer = this.getTableContainerRef()?.nativeElement ?? null;
+        if (wrapper)
+            this.wrapperElSignal.set(wrapper);
+        if (tableContainer)
+            this.tableContainerElSignal.set(tableContainer);
     }
     /**
      * Initialize base wiring effects. Must be called from subclass constructor
@@ -149,9 +193,9 @@ export class BaseDataGridTableComponent {
             if (p)
                 this.stateService.props.set(p);
         });
-        // Wire wrapper element
+        // Wire wrapper element (reads from signal populated by ngAfterViewInit)
         effect(() => {
-            const el = this.getWrapperRef()?.nativeElement;
+            const el = this.wrapperElSignal();
             if (el) {
                 this.stateService.wrapperEl.set(el);
                 this.columnReorderService.wrapperEl.set(el);
@@ -184,7 +228,7 @@ export class BaseDataGridTableComponent {
         });
         // Wire wrapper element to virtual scroll for scroll events + container height
         effect(() => {
-            const el = this.getWrapperRef()?.nativeElement;
+            const el = this.wrapperElSignal();
             if (el) {
                 this.virtualScrollService.setContainer(el);
                 this.virtualScrollService.containerHeight.set(el.clientHeight);
@@ -239,6 +283,14 @@ export class BaseDataGridTableComponent {
             return '';
         return d.toISOString().split('T')[0];
     }
+    getPinnedLeftOffset(columnId) {
+        const offsets = this.pinningOffsets();
+        return offsets.leftOffsets[columnId] ?? null;
+    }
+    getPinnedRightOffset(columnId) {
+        const offsets = this.pinningOffsets();
+        return offsets.rightOffsets[columnId] ?? null;
+    }
     // --- Virtual scroll event handler ---
     onWrapperScroll(event) {
         this.virtualScrollService.onScroll(event);
@@ -373,4 +425,63 @@ export class BaseDataGridTableComponent {
             canUnpin: !!pinned,
         };
     }
+    // --- Column sorting methods ---
+    onSortAsc(columnId) {
+        const props = this.getProps();
+        props?.onColumnSort?.(columnId);
+    }
+    onSortDesc(columnId) {
+        const props = this.getProps();
+        props?.onColumnSort?.(columnId);
+    }
+    onClearSort() {
+        // Clearing sort is handled by sorting the same column again
+        // The logic in OGridService.handleSort will toggle: asc -> desc -> (clear via callback)
+        // For now, we don't have an explicit clear, so we just don't call anything
+    }
+    getSortState(columnId) {
+        const props = this.getProps();
+        if (props?.sortBy === columnId) {
+            return props.sortDirection ?? 'asc';
+        }
+        return null;
+    }
+    // --- Column autosize methods ---
+    onAutosizeColumn(columnId) {
+        const col = this.visibleCols().find((c) => c.columnId === columnId);
+        if (!col)
+            return;
+        const width = this.measureColumnContentWidth(columnId);
+        this.state().layout.setColumnSizingOverrides({
+            ...this.columnSizingOverrides(),
+            [columnId]: { widthPx: width },
+        });
+        this.state().layout.onColumnResized?.(columnId, width);
+    }
+    onAutosizeAllColumns() {
+        const overrides = {};
+        for (const col of this.visibleCols()) {
+            const width = this.measureColumnContentWidth(col.columnId);
+            overrides[col.columnId] = { widthPx: width };
+            this.state().layout.onColumnResized?.(col.columnId, width);
+        }
+        this.state().layout.setColumnSizingOverrides({
+            ...this.columnSizingOverrides(),
+            ...overrides,
+        });
+    }
+    measureColumnContentWidth(columnId) {
+        const tableEl = this.tableContainerEl();
+        if (!tableEl)
+            return DEFAULT_MIN_COLUMN_WIDTH;
+        const cells = Array.from(tableEl.querySelectorAll(`[data-column-id="${columnId}"]`));
+        if (cells.length === 0)
+            return DEFAULT_MIN_COLUMN_WIDTH;
+        let maxWidth = DEFAULT_MIN_COLUMN_WIDTH;
+        for (const cell of cells) {
+            const rect = cell.getBoundingClientRect();
+            maxWidth = Math.max(maxWidth, Math.ceil(rect.width) + CELL_PADDING);
+        }
+        return maxWidth;
+    }
 }

package/dist/esm/components/base-pagination-controls.component.js

@@ -0,0 +1,72 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { signal, computed, Input, Output, EventEmitter } from '@angular/core';
+import { getPaginationViewModel } from '@alaarab/ogrid-core';
+/**
+ * Abstract base class containing all shared TypeScript logic for PaginationControls components.
+ * Framework-specific UI packages extend this with their templates and style overrides.
+ *
+ * Subclasses must:
+ * 1. Provide a @Component decorator with template and styles
+ *
+ * Uses @Input setter + signal pattern so computed() can track dependencies.
+ * (Plain @Input properties are NOT tracked by computed() — only signals are.)
+ */
+export class BasePaginationControlsComponent {
+    constructor() {
+        this._currentPage = signal(1);
+        this._pageSize = signal(25);
+        this._totalCount = signal(0);
+        this._pageSizeOptions = signal(undefined);
+        this._entityLabelPlural = signal('items');
+        this.pageChange = new EventEmitter();
+        this.pageSizeChange = new EventEmitter();
+        this.labelPlural = computed(() => this._entityLabelPlural() ?? 'items');
+        this.vm = computed(() => {
+            const opts = this._pageSizeOptions();
+            return getPaginationViewModel(this._currentPage(), this._pageSize(), this._totalCount(), opts ? { pageSizeOptions: opts } : undefined);
+        });
+    }
+    set currentPage(v) { this._currentPage.set(v); }
+    get currentPage() { return this._currentPage(); }
+    set pageSize(v) { this._pageSize.set(v); }
+    get pageSize() { return this._pageSize(); }
+    set totalCount(v) { this._totalCount.set(v); }
+    get totalCount() { return this._totalCount(); }
+    set pageSizeOptions(v) { this._pageSizeOptions.set(v); }
+    get pageSizeOptions() { return this._pageSizeOptions(); }
+    set entityLabelPlural(v) { this._entityLabelPlural.set(v); }
+    get entityLabelPlural() { return this._entityLabelPlural(); }
+    onPageSizeSelect(event) {
+        const value = Number(event.target.value);
+        this.pageSizeChange.emit(value);
+    }
+    onPageSizeChange(value) {
+        this.pageSizeChange.emit(Number(value));
+    }
+}
+__decorate([
+    Input({ required: true })
+], BasePaginationControlsComponent.prototype, "currentPage", null);
+__decorate([
+    Input({ required: true })
+], BasePaginationControlsComponent.prototype, "pageSize", null);
+__decorate([
+    Input({ required: true })
+], BasePaginationControlsComponent.prototype, "totalCount", null);
+__decorate([
+    Input()
+], BasePaginationControlsComponent.prototype, "pageSizeOptions", null);
+__decorate([
+    Input()
+], BasePaginationControlsComponent.prototype, "entityLabelPlural", null);
+__decorate([
+    Output()
+], BasePaginationControlsComponent.prototype, "pageChange", void 0);
+__decorate([
+    Output()
+], BasePaginationControlsComponent.prototype, "pageSizeChange", void 0);

package/dist/esm/components/empty-state.component.js

@@ -4,16 +4,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, output } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
 let EmptyStateComponent = class EmptyStateComponent {
     constructor() {
-        this.message = input(undefined);
-        this.hasActiveFilters = input(false);
-        this.render = input(undefined);
-        this.clearAll = output();
+        this.message = undefined;
+        this.hasActiveFilters = false;
+        this.render = undefined;
+        this.clearAll = new EventEmitter();
     }
 };
+__decorate([
+    Input()
+], EmptyStateComponent.prototype, "message", void 0);
+__decorate([
+    Input()
+], EmptyStateComponent.prototype, "hasActiveFilters", void 0);
+__decorate([
+    Input()
+], EmptyStateComponent.prototype, "render", void 0);
+__decorate([
+    Output()
+], EmptyStateComponent.prototype, "clearAll", void 0);
 EmptyStateComponent = __decorate([
     Component({
         selector: 'ogrid-empty-state',
@@ -26,11 +38,11 @@ EmptyStateComponent = __decorate([
     }
   `],
         template: `
-    @if (render()) {
-      <ng-container [ngTemplateOutlet]="render()!"></ng-container>
-    } @else if (message()) {
-      {{ message() }}
-    } @else if (hasActiveFilters()) {
+    @if (render) {
+      <ng-container [ngTemplateOutlet]="render"></ng-container>
+    } @else if (message) {
+      {{ message }}
+    } @else if (hasActiveFilters) {
       No items match your current filters. Try adjusting your search or
       <button type="button" (click)="clearAll.emit()" class="ogrid-empty-state-clear-btn">
         clear all filters