@alaarab/ogrid-angular 2.1.2 → 2.1.4

package/dist/types/components/base-datagrid-table.component.d.ts

@@ -40,14 +40,14 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     /** Measure actual th widths from the DOM and update the measuredColumnWidths signal.
      *  Only updates the signal when values actually change, to avoid render loops. */
     private measureColumnWidths;
-    readonly state: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridStateResult<T>>;
-    protected readonly layoutState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridLayoutState<T>>;
-    protected readonly rowSelectionState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridRowSelectionState>;
-    protected readonly editingState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridEditingState<T>>;
-    protected readonly interactionState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridCellInteractionState>;
-    protected readonly contextMenuState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridContextMenuState>;
-    protected readonly viewModelsState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridViewModelState<T>>;
-    protected readonly pinningState: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridPinningState>;
+    readonly state: import("@angular/core").Signal<import("..").DataGridStateResult<T>>;
+    protected readonly layoutState: import("@angular/core").Signal<import("..").DataGridLayoutState<T>>;
+    protected readonly rowSelectionState: import("@angular/core").Signal<import("..").DataGridRowSelectionState>;
+    protected readonly editingState: import("@angular/core").Signal<import("..").DataGridEditingState<T>>;
+    protected readonly interactionState: import("@angular/core").Signal<import("..").DataGridCellInteractionState>;
+    protected readonly contextMenuState: import("@angular/core").Signal<import("..").DataGridContextMenuState>;
+    protected readonly viewModelsState: import("@angular/core").Signal<import("..").DataGridViewModelState<T>>;
+    protected readonly pinningState: import("@angular/core").Signal<import("..").DataGridPinningState>;
     readonly tableContainerEl: import("@angular/core").Signal<HTMLElement | null>;
     readonly items: import("@angular/core").Signal<T[]>;
     readonly getRowId: import("@angular/core").Signal<(item: T) => RowId>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -9,11 +9,11 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/esm/index.js"
+      "default": "./dist/esm/index.js"
     }
   },
   "scripts": {
-    "build": "rimraf dist && tsc -p tsconfig.build.json",
+    "build": "rimraf dist && tsup && tsc -p tsconfig.build.json",
     "test": "jest --passWithNoTests"
   },
   "keywords": [
@@ -35,7 +35,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.2"
+    "@alaarab/ogrid-core": "2.1.4"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",

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

@@ -1,78 +0,0 @@
-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

@@ -1,281 +0,0 @@
-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() {
-        if (this.onTextChange)
-            this.onTextChange(this.tempTextValue());
-        this.isFilterOpen.set(false);
-    }
-    handleTextClear() {
-        this.tempTextValue.set('');
-        if (this.onTextChange)
-            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() {
-        if (this.onFilterChange)
-            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) {
-        if (this.onUserChange)
-            this.onUserChange(user);
-        this.isFilterOpen.set(false);
-    }
-    handleClearUser() {
-        if (this.onUserChange)
-            this.onUserChange(undefined);
-        this.isFilterOpen.set(false);
-    }
-    // --- Date filter handlers ---
-    handleDateApply() {
-        const from = this.tempDateFrom();
-        const to = this.tempDateTo();
-        if (this.onDateChange) {
-            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('');
-        if (this.onDateChange)
-            this.onDateChange(undefined);
-        this.isFilterOpen.set(false);
-    }
-    /** Clean up debounce timer on destroy. */
-    ngOnDestroy() {
-        if (this.peopleDebounceTimer) {
-            clearTimeout(this.peopleDebounceTimer);
-            this.peopleDebounceTimer = null;
-        }
-    }
-    // --- 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);