@alaarab/ogrid-angular 2.6.0 → 2.7.0

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

@@ -0,0 +1,77 @@
+import { Directive, signal, computed, Input, Output, EventEmitter } from '@angular/core';
+import * as i0 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([], ...(ngDevMode ? [{ debugName: "_columns" }] : []));
+        this._visibleColumns = signal(new Set(), ...(ngDevMode ? [{ debugName: "_visibleColumns" }] : []));
+        this.visibilityChange = new EventEmitter();
+        // Dropdown state
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        // Computed counts (signal-backed so computed() tracks changes)
+        this.visibleCount = computed(() => this._visibleColumns().size, ...(ngDevMode ? [{ debugName: "visibleCount" }] : []));
+        this.totalCount = computed(() => this._columns().length, ...(ngDevMode ? [{ debugName: "totalCount" }] : []));
+    }
+    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 });
+            }
+        }
+    }
+    static { this.ɵfac = function BaseColumnChooserComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseColumnChooserComponent)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseColumnChooserComponent, inputs: { columns: "columns", visibleColumns: "visibleColumns" }, outputs: { visibilityChange: "visibilityChange" } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseColumnChooserComponent, [{
+        type: Directive
+    }], null, { columns: [{
+            type: Input,
+            args: [{ required: true }]
+        }], visibleColumns: [{
+            type: Input,
+            args: [{ required: true }]
+        }], visibilityChange: [{
+            type: Output
+        }] }); })();

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

@@ -0,0 +1,267 @@
+import { Directive, signal, computed, Input } from '@angular/core';
+import * as i0 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', ...(ngDevMode ? [{ debugName: "_filterType" }] : []));
+        this._selectedValues = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedValues" }] : []));
+        this._options = signal(undefined, ...(ngDevMode ? [{ debugName: "_options" }] : []));
+        this._textValue = signal('', ...(ngDevMode ? [{ debugName: "_textValue" }] : []));
+        this._selectedUser = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedUser" }] : []));
+        this._dateValue = signal(undefined, ...(ngDevMode ? [{ debugName: "_dateValue" }] : []));
+        // 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, ...(ngDevMode ? [{ debugName: "isFilterOpen" }] : []));
+        this.tempTextValue = signal('', ...(ngDevMode ? [{ debugName: "tempTextValue" }] : []));
+        this.searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+        this.tempSelected = signal(new Set(), ...(ngDevMode ? [{ debugName: "tempSelected" }] : []));
+        this.peopleSearchText = signal('', ...(ngDevMode ? [{ debugName: "peopleSearchText" }] : []));
+        this.peopleSuggestions = signal([], ...(ngDevMode ? [{ debugName: "peopleSuggestions" }] : []));
+        this.isPeopleLoading = signal(false, ...(ngDevMode ? [{ debugName: "isPeopleLoading" }] : []));
+        this.tempDateFrom = signal('', ...(ngDevMode ? [{ debugName: "tempDateFrom" }] : []));
+        this.tempDateTo = signal('', ...(ngDevMode ? [{ debugName: "tempDateTo" }] : []));
+        // Popover position
+        this.popoverTop = signal(0, ...(ngDevMode ? [{ debugName: "popoverTop" }] : []));
+        this.popoverLeft = signal(0, ...(ngDevMode ? [{ debugName: "popoverLeft" }] : []));
+        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;
+        }, ...(ngDevMode ? [{ debugName: "hasActiveFilter" }] : []));
+        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));
+        }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    }
+    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);
+        }
+    }
+    static { this.ɵfac = function BaseColumnHeaderFilterComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseColumnHeaderFilterComponent)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseColumnHeaderFilterComponent, inputs: { columnKey: "columnKey", columnName: "columnName", filterType: "filterType", selectedValues: "selectedValues", options: "options", textValue: "textValue", selectedUser: "selectedUser", dateValue: "dateValue", isSorted: "isSorted", isSortedDescending: "isSortedDescending", onSort: "onSort", onFilterChange: "onFilterChange", isLoadingOptions: "isLoadingOptions", onTextChange: "onTextChange", onUserChange: "onUserChange", peopleSearch: "peopleSearch", onDateChange: "onDateChange" } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseColumnHeaderFilterComponent, [{
+        type: Directive
+    }], null, { columnKey: [{
+            type: Input,
+            args: [{ required: true }]
+        }], columnName: [{
+            type: Input,
+            args: [{ required: true }]
+        }], filterType: [{
+            type: Input,
+            args: [{ required: true }]
+        }], selectedValues: [{
+            type: Input
+        }], options: [{
+            type: Input
+        }], textValue: [{
+            type: Input
+        }], selectedUser: [{
+            type: Input
+        }], dateValue: [{
+            type: Input
+        }], isSorted: [{
+            type: Input
+        }], isSortedDescending: [{
+            type: Input
+        }], onSort: [{
+            type: Input
+        }], onFilterChange: [{
+            type: Input
+        }], isLoadingOptions: [{
+            type: Input
+        }], onTextChange: [{
+            type: Input
+        }], onUserChange: [{
+            type: Input
+        }], peopleSearch: [{
+            type: Input
+        }], onDateChange: [{
+            type: Input
+        }] }); })();

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

@@ -0,0 +1,80 @@
+import { Directive, signal, computed, Input } from '@angular/core';
+import { getColumnHeaderMenuItems, } from '@alaarab/ogrid-core';
+import * as i0 from "@angular/core";
+/**
+ * Abstract base class containing all shared TypeScript logic for ColumnHeaderMenu components.
+ * Framework-specific UI packages extend this with their templates and style overrides.
+ *
+ * Uses signal-backed @Input setters so that computed() tracks input changes reactively
+ * (plain @Input properties are not reactive in Angular signals).
+ *
+ * Subclasses must:
+ * 1. Provide a @Component decorator with template and styles
+ * 2. Implement their own menu open/close mechanism (mat-menu, p-menu, or native dropdown)
+ */
+export class BaseColumnHeaderMenuComponent {
+    constructor() {
+        // Signal-backed inputs so computed() tracks changes reactively
+        this._canPinLeft = signal(true, ...(ngDevMode ? [{ debugName: "_canPinLeft" }] : []));
+        this._canPinRight = signal(true, ...(ngDevMode ? [{ debugName: "_canPinRight" }] : []));
+        this._canUnpin = signal(false, ...(ngDevMode ? [{ debugName: "_canUnpin" }] : []));
+        this._currentSort = signal(null, ...(ngDevMode ? [{ debugName: "_currentSort" }] : []));
+        this._isSortable = signal(true, ...(ngDevMode ? [{ debugName: "_isSortable" }] : []));
+        this._isResizable = signal(true, ...(ngDevMode ? [{ debugName: "_isResizable" }] : []));
+        this.handlers = {};
+        this.menuItems = computed(() => getColumnHeaderMenuItems({
+            canPinLeft: this._canPinLeft(),
+            canPinRight: this._canPinRight(),
+            canUnpin: this._canUnpin(),
+            currentSort: this._currentSort(),
+            isSortable: this._isSortable(),
+            isResizable: this._isResizable(),
+        }), ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
+    }
+    set canPinLeft(v) { this._canPinLeft.set(v); }
+    set canPinRight(v) { this._canPinRight.set(v); }
+    set canUnpin(v) { this._canUnpin.set(v); }
+    set currentSort(v) { this._currentSort.set(v); }
+    set isSortable(v) { this._isSortable.set(v); }
+    set isResizable(v) { this._isResizable.set(v); }
+    handleMenuItemClick(itemId) {
+        const h = this.handlers;
+        const actionMap = {
+            pinLeft: h.onPinLeft,
+            pinRight: h.onPinRight,
+            unpin: h.onUnpin,
+            sortAsc: h.onSortAsc,
+            sortDesc: h.onSortDesc,
+            clearSort: h.onClearSort,
+            autosizeThis: h.onAutosizeThis,
+            autosizeAll: h.onAutosizeAll,
+        };
+        const action = actionMap[itemId];
+        if (action) {
+            action();
+            h.onClose?.();
+        }
+    }
+    static { this.ɵfac = function BaseColumnHeaderMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseColumnHeaderMenuComponent)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseColumnHeaderMenuComponent, inputs: { columnId: "columnId", canPinLeft: "canPinLeft", canPinRight: "canPinRight", canUnpin: "canUnpin", currentSort: "currentSort", isSortable: "isSortable", isResizable: "isResizable", handlers: "handlers" } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseColumnHeaderMenuComponent, [{
+        type: Directive
+    }], null, { columnId: [{
+            type: Input,
+            args: [{ required: true }]
+        }], canPinLeft: [{
+            type: Input
+        }], canPinRight: [{
+            type: Input
+        }], canUnpin: [{
+            type: Input
+        }], currentSort: [{
+            type: Input
+        }], isSortable: [{
+            type: Input
+        }], isResizable: [{
+            type: Input
+        }], handlers: [{
+            type: Input
+        }] }); })();