@alaarab/ogrid-angular-radix 2.0.4

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

@@ -0,0 +1,497 @@
+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, ChangeDetectionStrategy, viewChild, } from '@angular/core';
+/**
+ * Column header filter component for Angular Radix (lightweight styling).
+ * Standalone component with inline template and positioned popovers.
+ */
+let ColumnHeaderFilterComponent = class ColumnHeaderFilterComponent {
+    constructor() {
+        this.columnKey = input.required();
+        this.columnName = input.required();
+        this.filterType = input.required();
+        this.isSorted = input(false);
+        this.isSortedDescending = input(false);
+        this.onSort = input(undefined);
+        this.selectedValues = input([]);
+        this.onFilterChange = input(undefined);
+        this.options = input(undefined);
+        this.isLoadingOptions = input(false);
+        this.textValue = input('');
+        this.onTextChange = input(undefined);
+        this.selectedUser = input(undefined);
+        this.onUserChange = input(undefined);
+        this.peopleSearch = input(undefined);
+        this.dateValue = input(undefined);
+        this.onDateChange = input(undefined);
+        this.headerRef = viewChild('headerEl');
+        this.isFilterOpen = signal(false);
+        this.popoverTop = signal(0);
+        this.popoverLeft = signal(0);
+        // Text filter
+        this.tempTextValue = signal('');
+        // MultiSelect filter
+        this.searchText = signal('');
+        this.tempSelected = signal(new Set());
+        // Date filter
+        this.tempDateFrom = signal('');
+        this.tempDateTo = signal('');
+        this.hasActiveFilter = computed(() => {
+            const ft = this.filterType();
+            if (ft === 'text')
+                return !!this.textValue();
+            if (ft === 'multiSelect')
+                return (this.selectedValues() ?? []).length > 0;
+            if (ft === 'date') {
+                const dv = this.dateValue();
+                return !!dv && (!!dv.from || !!dv.to);
+            }
+            return false;
+        });
+        this.filteredOptions = computed(() => {
+            const search = this.searchText().toLowerCase();
+            const opts = this.options() ?? [];
+            if (!search)
+                return opts;
+            return opts.filter(o => o.toLowerCase().includes(search));
+        });
+    }
+    toggleFilter(event) {
+        event.stopPropagation();
+        if (this.isFilterOpen()) {
+            this.isFilterOpen.set(false);
+            return;
+        }
+        // Initialize temp values
+        if (this.filterType() === 'text') {
+            this.tempTextValue.set(this.textValue() ?? '');
+        }
+        else if (this.filterType() === 'multiSelect') {
+            this.tempSelected.set(new Set(this.selectedValues() ?? []));
+            this.searchText.set('');
+        }
+        else if (this.filterType() === 'date') {
+            const dv = this.dateValue();
+            this.tempDateFrom.set(dv?.from ?? '');
+            this.tempDateTo.set(dv?.to ?? '');
+        }
+        // Calculate popover position
+        const headerEl = this.headerRef()?.nativeElement;
+        if (headerEl) {
+            const rect = headerEl.getBoundingClientRect();
+            this.popoverTop.set(rect.bottom + 4);
+            this.popoverLeft.set(rect.left);
+        }
+        this.isFilterOpen.set(true);
+    }
+    onDocumentClick(event) {
+        const el = event.target;
+        if (!el.closest('column-header-filter')) {
+            this.isFilterOpen.set(false);
+        }
+    }
+    asInputValue(event) {
+        return event.target.value;
+    }
+    // Text filter handlers
+    onTextKeydown(event) {
+        if (event.key === 'Enter') {
+            this.handleTextApply();
+        }
+        else if (event.key === 'Escape') {
+            this.isFilterOpen.set(false);
+        }
+    }
+    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;
+        const newSet = new Set(this.tempSelected());
+        if (checked) {
+            newSet.add(option);
+        }
+        else {
+            newSet.delete(option);
+        }
+        this.tempSelected.set(newSet);
+    }
+    handleSelectAllFiltered() {
+        const newSet = new Set(this.tempSelected());
+        for (const opt of this.filteredOptions()) {
+            newSet.add(opt);
+        }
+        this.tempSelected.set(newSet);
+    }
+    handleClearSelection() {
+        this.tempSelected.set(new Set());
+    }
+    handleMultiSelectApply() {
+        this.onFilterChange()?.([...this.tempSelected()]);
+        this.isFilterOpen.set(false);
+    }
+    handleMultiSelectClear() {
+        this.tempSelected.set(new Set());
+        this.onFilterChange()?.([]);
+        this.isFilterOpen.set(false);
+    }
+    // Date filter handlers
+    handleDateApply() {
+        const from = this.tempDateFrom();
+        const to = this.tempDateTo();
+        if (from || to) {
+            this.onDateChange()?.({ from, to });
+        }
+        this.isFilterOpen.set(false);
+    }
+    handleDateClear() {
+        this.tempDateFrom.set('');
+        this.tempDateTo.set('');
+        this.onDateChange()?.({ from: '', to: '' });
+        this.isFilterOpen.set(false);
+    }
+};
+ColumnHeaderFilterComponent = __decorate([
+    Component({
+        selector: 'column-header-filter',
+        standalone: true,
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: `
+    <div class="ogrid-header-filter" #headerEl>
+      <div class="ogrid-header-filter__label">
+        <span class="ogrid-header-filter__name" [title]="columnName()" data-header-label>
+          {{ columnName() }}
+        </span>
+      </div>
+
+      <div class="ogrid-header-filter__actions">
+        @if (onSort()) {
+          <button
+            class="ogrid-header-filter__btn"
+            [class.ogrid-header-filter__btn--active]="isSorted()"
+            (click)="onSort()!()"
+            [attr.aria-label]="'Sort by ' + columnName()"
+            [title]="isSorted() ? (isSortedDescending() ? 'Sorted descending' : 'Sorted ascending') : 'Sort'"
+          >
+            @if (isSorted() && isSortedDescending()) {
+              ▼
+            } @else if (isSorted()) {
+              ▲
+            } @else {
+              ↕
+            }
+          </button>
+        }
+
+        @if (filterType() !== 'none') {
+          <button
+            class="ogrid-header-filter__btn"
+            [class.ogrid-header-filter__btn--active]="hasActiveFilter() || isFilterOpen()"
+            (click)="toggleFilter($event)"
+            [attr.aria-label]="'Filter ' + columnName()"
+            [title]="'Filter ' + columnName()"
+          >
+            ⏷
+            @if (hasActiveFilter()) {
+              <span class="ogrid-header-filter__dot"></span>
+            }
+          </button>
+        }
+      </div>
+    </div>
+
+    @if (isFilterOpen() && filterType() !== 'none') {
+      <div
+        class="ogrid-header-filter__popover"
+        [style.top.px]="popoverTop()"
+        [style.left.px]="popoverLeft()"
+        (click)="$event.stopPropagation()"
+      >
+        <div class="ogrid-header-filter__popover-header">
+          Filter: {{ columnName() }}
+        </div>
+
+        @switch (filterType()) {
+          @case ('text') {
+            <div class="ogrid-header-filter__popover-body" style="width: 260px;">
+              <div style="padding: 12px;">
+                <input
+                  type="text"
+                  class="ogrid-header-filter__input"
+                  placeholder="Enter search term..."
+                  [value]="tempTextValue()"
+                  (input)="tempTextValue.set(asInputValue($event))"
+                  (keydown)="onTextKeydown($event)"
+                  autocomplete="off"
+                />
+              </div>
+              <div class="ogrid-header-filter__popover-actions">
+                <button class="ogrid-header-filter__action-btn" [disabled]="!tempTextValue()" (click)="handleTextClear()">Clear</button>
+                <button class="ogrid-header-filter__action-btn ogrid-header-filter__action-btn--primary" (click)="handleTextApply()">Apply</button>
+              </div>
+            </div>
+          }
+          @case ('multiSelect') {
+            <div class="ogrid-header-filter__popover-body" style="width: 280px;">
+              <div style="padding: 12px 12px 4px;">
+                <input
+                  type="text"
+                  class="ogrid-header-filter__input"
+                  placeholder="Search..."
+                  [value]="searchText()"
+                  (input)="searchText.set(asInputValue($event))"
+                  (keydown)="$event.stopPropagation()"
+                  autocomplete="off"
+                />
+                <div class="ogrid-header-filter__options-info">
+                  {{ filteredOptions().length }} of {{ (options() ?? []).length }} options
+                </div>
+              </div>
+              <div class="ogrid-header-filter__select-actions">
+                <button class="ogrid-header-filter__action-btn" (click)="handleSelectAllFiltered()">
+                  Select All ({{ filteredOptions().length }})
+                </button>
+                <button class="ogrid-header-filter__action-btn" (click)="handleClearSelection()">Clear</button>
+              </div>
+              <div class="ogrid-header-filter__options-list">
+                @if (isLoadingOptions()) {
+                  <div class="ogrid-header-filter__loading">Loading...</div>
+                } @else if (filteredOptions().length === 0) {
+                  <div class="ogrid-header-filter__empty">No options found</div>
+                } @else {
+                  @for (option of filteredOptions(); track option) {
+                    <label class="ogrid-header-filter__option">
+                      <input
+                        type="checkbox"
+                        [checked]="tempSelected().has(option)"
+                        (change)="handleCheckboxChange(option, $event)"
+                      />
+                      <span>{{ option }}</span>
+                    </label>
+                  }
+                }
+              </div>
+              <div class="ogrid-header-filter__popover-actions" style="border-top: 1px solid var(--ogrid-border, #e0e0e0);">
+                <button class="ogrid-header-filter__action-btn" [disabled]="tempSelected().size === 0" (click)="handleMultiSelectClear()">Clear</button>
+                <button class="ogrid-header-filter__action-btn ogrid-header-filter__action-btn--primary" (click)="handleMultiSelectApply()">Apply</button>
+              </div>
+            </div>
+          }
+          @case ('date') {
+            <div class="ogrid-header-filter__popover-body" style="width: 280px;">
+              <div style="padding: 12px;">
+                <div style="margin-bottom: 8px;">
+                  <label style="display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600;">From</label>
+                  <input
+                    type="date"
+                    class="ogrid-header-filter__input"
+                    [value]="tempDateFrom()"
+                    (change)="tempDateFrom.set(asInputValue($event))"
+                  />
+                </div>
+                <div>
+                  <label style="display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600;">To</label>
+                  <input
+                    type="date"
+                    class="ogrid-header-filter__input"
+                    [value]="tempDateTo()"
+                    (change)="tempDateTo.set(asInputValue($event))"
+                  />
+                </div>
+              </div>
+              <div class="ogrid-header-filter__popover-actions">
+                <button class="ogrid-header-filter__action-btn" [disabled]="!tempDateFrom() && !tempDateTo()" (click)="handleDateClear()">Clear</button>
+                <button class="ogrid-header-filter__action-btn ogrid-header-filter__action-btn--primary" (click)="handleDateApply()">Apply</button>
+              </div>
+            </div>
+          }
+        }
+      </div>
+    }
+  `,
+        styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+    .ogrid-header-filter {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 4px;
+      height: 100%;
+      flex: 1;
+    }
+    .ogrid-header-filter__label {
+      flex: 1;
+      min-width: 0;
+    }
+    .ogrid-header-filter__name {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .ogrid-header-filter__actions {
+      display: flex;
+      gap: 2px;
+      flex-shrink: 0;
+    }
+    .ogrid-header-filter__btn {
+      position: relative;
+      min-width: 20px;
+      height: 20px;
+      padding: 0;
+      border: none;
+      border-radius: 2px;
+      background: transparent;
+      color: var(--ogrid-fg, #242424);
+      cursor: pointer;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0.6;
+      transition: all 0.15s ease;
+    }
+    .ogrid-header-filter__btn:hover {
+      opacity: 1;
+      background: var(--ogrid-hover-bg, #f0f0f0);
+    }
+    .ogrid-header-filter__btn--active {
+      opacity: 1;
+      color: var(--ogrid-active-border, #0078d4);
+      font-weight: 700;
+    }
+    .ogrid-header-filter__dot {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background: var(--ogrid-active-border, #0078d4);
+    }
+    .ogrid-header-filter__popover {
+      position: fixed;
+      z-index: 1000;
+      background: var(--ogrid-bg, #ffffff);
+      border: 1px solid var(--ogrid-border, #e0e0e0);
+      border-radius: 4px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+      min-width: 200px;
+    }
+    .ogrid-header-filter__popover-header {
+      padding: 8px 12px;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--ogrid-fg, #242424);
+      border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
+      background: var(--ogrid-header-bg, #f5f5f5);
+    }
+    .ogrid-header-filter__popover-body {
+      display: flex;
+      flex-direction: column;
+    }
+    .ogrid-header-filter__input {
+      width: 100%;
+      padding: 6px 8px;
+      border: 1px solid var(--ogrid-border, #e0e0e0);
+      border-radius: 4px;
+      font-size: 14px;
+      background: var(--ogrid-bg, #ffffff);
+      color: var(--ogrid-fg, #242424);
+    }
+    .ogrid-header-filter__input:focus {
+      outline: 2px solid var(--ogrid-active-border, #0078d4);
+      outline-offset: 1px;
+    }
+    .ogrid-header-filter__options-info {
+      margin-top: 6px;
+      font-size: 12px;
+      color: var(--ogrid-fg, #242424);
+      opacity: 0.7;
+    }
+    .ogrid-header-filter__select-actions {
+      display: flex;
+      gap: 8px;
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
+    }
+    .ogrid-header-filter__options-list {
+      max-height: 240px;
+      overflow-y: auto;
+      padding: 4px 0;
+    }
+    .ogrid-header-filter__option {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--ogrid-fg, #242424);
+      transition: background 0.15s ease;
+    }
+    .ogrid-header-filter__option:hover {
+      background: var(--ogrid-hover-bg, #f0f0f0);
+    }
+    .ogrid-header-filter__loading,
+    .ogrid-header-filter__empty {
+      padding: 16px;
+      text-align: center;
+      font-size: 14px;
+      color: var(--ogrid-fg, #242424);
+      opacity: 0.7;
+    }
+    .ogrid-header-filter__popover-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      padding: 8px 12px;
+      background: var(--ogrid-header-bg, #f5f5f5);
+    }
+    .ogrid-header-filter__action-btn {
+      padding: 6px 12px;
+      border: 1px solid var(--ogrid-border, #e0e0e0);
+      border-radius: 4px;
+      background: var(--ogrid-bg, #ffffff);
+      color: var(--ogrid-fg, #242424);
+      cursor: pointer;
+      font-size: 13px;
+      transition: all 0.15s ease;
+    }
+    .ogrid-header-filter__action-btn:hover:not(:disabled) {
+      background: var(--ogrid-hover-bg, #f0f0f0);
+    }
+    .ogrid-header-filter__action-btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    .ogrid-header-filter__action-btn--primary {
+      background: var(--ogrid-active-border, #0078d4);
+      color: #ffffff;
+      border-color: var(--ogrid-active-border, #0078d4);
+    }
+    .ogrid-header-filter__action-btn--primary:hover:not(:disabled) {
+      opacity: 0.9;
+    }
+  `],
+        host: {
+            '(document:click)': 'onDocumentClick($event)',
+        },
+    })
+], ColumnHeaderFilterComponent);
+export { ColumnHeaderFilterComponent };