@alaarab/ogrid-angular-primeng 2.0.2

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

@@ -0,0 +1,94 @@
+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 { Component, input, output, signal, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+let ColumnChooserComponent = class ColumnChooserComponent {
+    constructor() {
+        this.columns = input.required();
+        this.visibleColumns = input.required();
+        this.visibilityChange = output();
+        this.open = signal(false);
+        this.visibleCount = computed(() => this.visibleColumns().size);
+        this.totalCount = computed(() => this.columns().length);
+    }
+    onToggle(columnKey, checked) {
+        this.visibilityChange.emit({ columnKey, visible: checked });
+    }
+    onSelectAll() {
+        for (const col of this.columns()) {
+            if (!this.visibleColumns().has(col.columnId)) {
+                this.visibilityChange.emit({ columnKey: col.columnId, visible: true });
+            }
+        }
+    }
+    onClearAll() {
+        for (const col of this.columns()) {
+            if (col.required !== true && this.visibleColumns().has(col.columnId)) {
+                this.visibilityChange.emit({ columnKey: col.columnId, visible: false });
+            }
+        }
+    }
+};
+ColumnChooserComponent = __decorate([
+    Component({
+        selector: 'ogrid-primeng-column-chooser',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <div style="position:relative;display:inline-block">
+      <button
+        type="button"
+        class="p-button p-button-text p-button-sm"
+        (click)="open.set(!open())"
+        [attr.aria-expanded]="open()"
+        aria-haspopup="listbox"
+        style="display:flex;align-items:center;gap:6px;font-size:13px"
+      >
+        <span aria-hidden>&#9881;</span>
+        <span>Column Visibility ({{ visibleCount() }} of {{ totalCount() }})</span>
+        <span aria-hidden>{{ open() ? '\u25B2' : '\u25BC' }}</span>
+      </button>
+
+      @if (open()) {
+        <div
+          style="position:absolute;right:0;top:100%;z-index:100;min-width:220px;max-height:320px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);padding:8px 0"
+        >
+          <div style="padding:4px 12px;font-weight:600;font-size:12px;color:var(--ogrid-muted, #666)">
+            Select Columns ({{ visibleCount() }} of {{ totalCount() }})
+          </div>
+          @for (col of columns(); track col.columnId) {
+            <label style="display:flex;align-items:center;gap:8px;padding:4px 12px;cursor:pointer;font-size:13px">
+              <input
+                type="checkbox"
+                [checked]="visibleColumns().has(col.columnId)"
+                (change)="onToggle(col.columnId, $any($event.target).checked)"
+                [disabled]="col.required === true"
+              />
+              {{ col.name }}
+            </label>
+          }
+          <div style="display:flex;gap:4px;padding:8px 12px;border-top:1px solid var(--ogrid-border, #e0e0e0);margin-top:4px">
+            <button
+              type="button"
+              class="p-button p-button-text p-button-sm"
+              (click)="onClearAll()"
+              style="flex:1;font-size:12px"
+            >Clear All</button>
+            <button
+              type="button"
+              class="p-button p-button-text p-button-sm"
+              (click)="onSelectAll()"
+              style="flex:1;font-size:12px"
+            >Select All</button>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+    })
+], ColumnChooserComponent);
+export { ColumnChooserComponent };

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

@@ -0,0 +1,383 @@
+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 { Component, input, signal, computed, viewChild, DestroyRef, inject, effect } from '@angular/core';
+import { CommonModule } from '@angular/common';
+let ColumnHeaderFilterComponent = class ColumnHeaderFilterComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.columnKey = input.required();
+        this.columnName = input.required();
+        this.filterType = input('none');
+        this.isSorted = input(false);
+        this.isSortedDescending = input(false);
+        this.onSort = input(undefined);
+        // Multi-select filter
+        this.selectedValues = input(undefined);
+        this.onFilterChange = input(undefined);
+        this.options = input([]);
+        this.isLoadingOptions = input(false);
+        // Text filter
+        this.textValue = input('');
+        this.onTextChange = input(undefined);
+        // People filter
+        this.selectedUser = input(undefined);
+        this.onUserChange = input(undefined);
+        this.peopleSearch = input(undefined);
+        // Date filter
+        this.dateValue = input(undefined);
+        this.onDateChange = input(undefined);
+        // Internal state
+        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('');
+        this.filterTrigger = viewChild('filterTrigger');
+        this.filterPanel = viewChild('filterPanel');
+        this.peopleDebounceTimer = null;
+        this.clickOutsideHandler = (e) => {
+            const trigger = this.filterTrigger()?.nativeElement;
+            const panel = this.filterPanel()?.nativeElement;
+            if (trigger && !trigger.contains(e.target) && (!panel || !panel.contains(e.target))) {
+                this.isFilterOpen.set(false);
+            }
+        };
+        this.hasActiveFilter = computed(() => {
+            const ft = this.filterType();
+            if (ft === 'text')
+                return !!this.textValue();
+            if (ft === 'multiSelect') {
+                const sv = this.selectedValues();
+                return sv != null && sv.length > 0;
+            }
+            if (ft === 'people')
+                return this.selectedUser() != null;
+            if (ft === 'date') {
+                const dv = this.dateValue();
+                return dv != null && (dv.from != null || dv.to != null);
+            }
+            return false;
+        });
+        this.filteredOptions = computed(() => {
+            const search = this.searchText().toLowerCase();
+            const opts = this.options() ?? [];
+            return search ? opts.filter((o) => o.toLowerCase().includes(search)) : opts;
+        });
+        // Sync temp values when filter opens
+        effect(() => {
+            if (this.isFilterOpen()) {
+                this.tempTextValue.set(this.textValue() ?? '');
+                this.searchText.set('');
+                const sv = this.selectedValues();
+                this.tempSelected.set(new Set(sv ?? []));
+                const dv = this.dateValue();
+                this.tempDateFrom.set(dv?.from ?? '');
+                this.tempDateTo.set(dv?.to ?? '');
+                document.addEventListener('mousedown', this.clickOutsideHandler, true);
+            }
+            else {
+                document.removeEventListener('mousedown', this.clickOutsideHandler, true);
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            document.removeEventListener('mousedown', this.clickOutsideHandler, true);
+            if (this.peopleDebounceTimer)
+                clearTimeout(this.peopleDebounceTimer);
+        });
+    }
+    handleSortClick() {
+        this.onSort()?.();
+    }
+    toggleFilter() {
+        this.isFilterOpen.update((v) => !v);
+    }
+    // Text filter
+    handleTextApply() {
+        const value = this.tempTextValue().trim();
+        this.onTextChange()?.(value);
+        this.isFilterOpen.set(false);
+    }
+    handleTextClear() {
+        this.tempTextValue.set('');
+        this.onTextChange()?.('');
+        this.isFilterOpen.set(false);
+    }
+    // Multi-select filter
+    handleCheckboxChange(opt, checked) {
+        this.tempSelected.update((prev) => {
+            const next = new Set(prev);
+            if (checked)
+                next.add(opt);
+            else
+                next.delete(opt);
+            return next;
+        });
+    }
+    handleSelectAllOptions() {
+        this.tempSelected.set(new Set(this.filteredOptions()));
+    }
+    handleClearSelection() {
+        this.tempSelected.set(new Set());
+    }
+    handleApplyMultiSelect() {
+        this.onFilterChange()?.(Array.from(this.tempSelected()));
+        this.isFilterOpen.set(false);
+    }
+    // People filter
+    onPeopleSearchInput(value) {
+        this.peopleSearchText.set(value);
+        if (this.peopleDebounceTimer)
+            clearTimeout(this.peopleDebounceTimer);
+        const searcher = this.peopleSearch();
+        if (!searcher || !value.trim()) {
+            this.peopleSuggestions.set([]);
+            return;
+        }
+        this.isPeopleLoading.set(true);
+        this.peopleDebounceTimer = setTimeout(() => {
+            searcher(value.trim())
+                .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
+    handleDateApply() {
+        const from = this.tempDateFrom() || undefined;
+        const to = this.tempDateTo() || undefined;
+        this.onDateChange()?.(from || to ? { from, to } : undefined);
+        this.isFilterOpen.set(false);
+    }
+    handleDateClear() {
+        this.tempDateFrom.set('');
+        this.tempDateTo.set('');
+        this.onDateChange()?.(undefined);
+        this.isFilterOpen.set(false);
+    }
+};
+ColumnHeaderFilterComponent = __decorate([
+    Component({
+        selector: 'ogrid-primeng-column-header-filter',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <div style="display:flex;align-items:center;flex:1;min-width:0;gap:4px">
+      <div style="flex:1;min-width:0;overflow:hidden">
+        <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block" [title]="columnName()" data-header-label>
+          {{ columnName() }}
+        </span>
+      </div>
+      <div style="display:flex;align-items:center;gap:2px;flex-shrink:0">
+        @if (onSort()) {
+          <button
+            type="button"
+            (click)="handleSortClick()"
+            [attr.aria-label]="'Sort by ' + columnName()"
+            [title]="isSorted() ? (isSortedDescending() ? 'Sorted descending' : 'Sorted ascending') : 'Sort'"
+            style="border:none;background:transparent;cursor:pointer;padding:2px 4px;font-size:12px;color:var(--ogrid-fg, #242424)"
+            [style.font-weight]="isSorted() ? 'bold' : 'normal'"
+          >
+            {{ isSorted() ? (isSortedDescending() ? '\u2193' : '\u2191') : '\u21C5' }}
+          </button>
+        }
+
+        @if (filterType() !== 'none') {
+          <button
+            type="button"
+            #filterTrigger
+            (click)="toggleFilter()"
+            [attr.aria-label]="'Filter ' + columnName()"
+            [title]="'Filter ' + columnName()"
+            style="border:none;background:transparent;cursor:pointer;padding:2px 4px;font-size:12px;position:relative;color:var(--ogrid-fg, #242424)"
+            [style.font-weight]="hasActiveFilter() ? 'bold' : 'normal'"
+          >
+            &#9662;
+            @if (hasActiveFilter()) {
+              <span style="position:absolute;top:0;right:0;width:6px;height:6px;border-radius:50%;background:var(--ogrid-selection, #217346)"></span>
+            }
+          </button>
+
+          @if (isFilterOpen()) {
+            <div
+              #filterPanel
+              style="position:absolute;top:100%;left:0;z-index:200;min-width:200px;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);font-weight:normal"
+            >
+              <div style="padding:8px 12px;font-weight:600;font-size:12px;border-bottom:1px solid var(--ogrid-border, #e0e0e0)">
+                Filter: {{ columnName() }}
+              </div>
+
+              @if (filterType() === 'text') {
+                <div style="padding:8px 12px">
+                  <input
+                    type="text"
+                    [value]="tempTextValue()"
+                    (input)="tempTextValue.set($any($event.target).value)"
+                    placeholder="Filter text..."
+                    style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    [attr.aria-label]="'Filter ' + columnName()"
+                  />
+                </div>
+                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, #e0e0e0)">
+                  <button
+                    type="button"
+                    class="p-button p-button-text p-button-sm"
+                    (click)="handleTextClear()"
+                    [disabled]="!textValue()"
+                    style="font-size:12px"
+                  >Clear</button>
+                  <button
+                    type="button"
+                    class="p-button p-button-sm"
+                    (click)="handleTextApply()"
+                    style="font-size:12px"
+                  >Apply</button>
+                </div>
+              }
+
+              @if (filterType() === 'multiSelect') {
+                <div style="padding:8px 12px">
+                  <input
+                    type="text"
+                    [value]="searchText()"
+                    (input)="searchText.set($any($event.target).value)"
+                    placeholder="Search options..."
+                    style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;font-size:13px;margin-bottom:6px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    [attr.aria-label]="'Search ' + columnName() + ' options'"
+                  />
+                  @if (isLoadingOptions()) {
+                    <div style="padding:8px 0;color:var(--ogrid-muted, #999);font-size:12px">Loading...</div>
+                  } @else {
+                    <div style="display:flex;gap:4px;margin-bottom:6px">
+                      <button type="button" class="p-button p-button-text p-button-sm" (click)="handleSelectAllOptions()" style="font-size:11px">All</button>
+                      <button type="button" class="p-button p-button-text p-button-sm" (click)="handleClearSelection()" style="font-size:11px">None</button>
+                    </div>
+                    <div style="max-height:160px;overflow-y:auto" role="group" [attr.aria-label]="columnName() + ' filter options'">
+                      @for (opt of filteredOptions(); track opt) {
+                        <label style="display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer;font-size:13px">
+                          <input
+                            type="checkbox"
+                            [checked]="tempSelected().has(opt)"
+                            (change)="handleCheckboxChange(opt, $any($event.target).checked)"
+                          />
+                          {{ opt }}
+                        </label>
+                      }
+                    </div>
+                  }
+                </div>
+                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, #e0e0e0)">
+                  <button
+                    type="button"
+                    class="p-button p-button-sm"
+                    (click)="handleApplyMultiSelect()"
+                    style="font-size:12px"
+                  >Apply</button>
+                </div>
+              }
+
+              @if (filterType() === 'people') {
+                <div style="padding:8px 12px">
+                  @if (selectedUser()) {
+                    <div style="display:flex;align-items:center;justify-content:space-between;padding:4px 0;margin-bottom:4px">
+                      <span style="font-size:13px">{{ selectedUser()!.displayName ?? selectedUser()!.email }}</span>
+                      <button type="button" class="p-button p-button-text p-button-sm" (click)="handleClearUser()" style="font-size:11px">Clear</button>
+                    </div>
+                  }
+                  <input
+                    type="text"
+                    [value]="peopleSearchText()"
+                    (input)="onPeopleSearchInput($any($event.target).value)"
+                    placeholder="Search people..."
+                    style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    [attr.aria-label]="'Search people for ' + columnName()"
+                  />
+                  @if (isPeopleLoading()) {
+                    <div style="padding:8px 0;color:var(--ogrid-muted, #999);font-size:12px">Loading...</div>
+                  }
+                  @for (user of peopleSuggestions(); track user.email) {
+                    <button
+                      type="button"
+                      (click)="handleUserSelect(user)"
+                      style="display:block;width:100%;text-align:left;padding:6px 0;border:none;background:transparent;cursor:pointer;font-size:13px;color:var(--ogrid-fg, #242424)"
+                    >
+                      {{ user.displayName ?? user.email }}
+                    </button>
+                  }
+                </div>
+              }
+
+              @if (filterType() === 'date') {
+                <div style="padding:8px 12px;display:flex;flex-direction:column;gap:6px">
+                  <label style="display:flex;align-items:center;gap:6px;font-size:12px">
+                    From:
+                    <input
+                      type="date"
+                      [value]="tempDateFrom()"
+                      (change)="tempDateFrom.set($any($event.target).value)"
+                      style="flex:1;padding:4px 6px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    />
+                  </label>
+                  <label style="display:flex;align-items:center;gap:6px;font-size:12px">
+                    To:
+                    <input
+                      type="date"
+                      [value]="tempDateTo()"
+                      (change)="tempDateTo.set($any($event.target).value)"
+                      style="flex:1;padding:4px 6px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    />
+                  </label>
+                </div>
+                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, #e0e0e0)">
+                  <button
+                    type="button"
+                    class="p-button p-button-text p-button-sm"
+                    (click)="handleDateClear()"
+                    [disabled]="!tempDateFrom() && !tempDateTo()"
+                    style="font-size:12px"
+                  >Clear</button>
+                  <button
+                    type="button"
+                    class="p-button p-button-sm"
+                    (click)="handleDateApply()"
+                    style="font-size:12px"
+                  >Apply</button>
+                </div>
+              }
+            </div>
+          }
+        }
+      </div>
+    </div>
+  `,
+        styles: [`
+    :host {
+      display: flex;
+      position: relative;
+      flex: 1;
+      min-width: 0;
+    }
+  `],
+    })
+], ColumnHeaderFilterComponent);
+export { ColumnHeaderFilterComponent };