@alaarab/ogrid-angular-radix 2.0.4

package/src/__tests__/pagination-controls.component.spec.ts.skip

@@ -0,0 +1,190 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { PaginationControlsComponent } from '../pagination-controls/pagination-controls.component';
+
+describe('PaginationControlsComponent', () => {
+  let component: PaginationControlsComponent;
+  let fixture: ComponentFixture<PaginationControlsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PaginationControlsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PaginationControlsComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should return null when totalCount is 0', () => {
+    fixture.componentRef.setInput('currentPage', 1);
+    fixture.componentRef.setInput('pageSize', 10);
+    fixture.componentRef.setInput('totalCount', 0);
+    fixture.detectChanges();
+
+    const nav = fixture.debugElement.query(By.css('nav'));
+    expect(nav).toBeNull();
+  });
+
+  it('should render summary text and page buttons', () => {
+    fixture.componentRef.setInput('currentPage', 2);
+    fixture.componentRef.setInput('pageSize', 10);
+    fixture.componentRef.setInput('totalCount', 50);
+    fixture.detectChanges();
+
+    const summaryText = fixture.nativeElement.querySelector('.ogrid-pagination__info');
+    expect(summaryText.textContent).toContain('Showing 11 to 20 of 50 items');
+
+    const activeButton = fixture.debugElement.query(
+      By.css('button[aria-current="page"]')
+    );
+    expect(activeButton).toBeTruthy();
+    expect(activeButton.nativeElement.getAttribute('aria-label')).toBe('Page 2');
+  });
+
+  it('should disable first and previous on first page', () => {
+    fixture.componentRef.setInput('currentPage', 1);
+    fixture.componentRef.setInput('pageSize', 10);
+    fixture.componentRef.setInput('totalCount', 50);
+    fixture.detectChanges();
+
+    const firstButton = fixture.debugElement.query(
+      By.css('button[aria-label="First page"]')
+    );
+    const prevButton = fixture.debugElement.query(
+      By.css('button[aria-label="Previous page"]')
+    );
+
+    expect(firstButton.nativeElement.disabled).toBe(true);
+    expect(prevButton.nativeElement.disabled).toBe(true);
+  });
+
+  it('should disable last and next on last page', () => {
+    fixture.componentRef.setInput('currentPage', 5);
+    fixture.componentRef.setInput('pageSize', 10);
+    fixture.componentRef.setInput('totalCount', 50);
+    fixture.detectChanges();
+
+    const lastButton = fixture.debugElement.query(
+      By.css('button[aria-label="Last page"]')
+    );
+    const nextButton = fixture.debugElement.query(
+      By.css('button[aria-label="Next page"]')
+    );
+
+    expect(lastButton.nativeElement.disabled).toBe(true);
+    expect(nextButton.nativeElement.disabled).toBe(true);
+  });
+
+  it('should emit pageChange for navigation buttons', () => {
+    fixture.componentRef.setInput('currentPage', 2);
+    fixture.componentRef.setInput('pageSize', 10);
+    fixture.componentRef.setInput('totalCount', 50);
+    fixture.detectChanges();
+
+    const pageChangeSpy = jest.fn();
+    component.pageChange.subscribe(pageChangeSpy);
+
+    // Click next
+    const nextButton = fixture.debugElement.query(
+      By.css('button[aria-label="Next page"]')
+    );
+    nextButton.nativeElement.click();
+    expect(pageChangeSpy).toHaveBeenCalledWith(3);
+
+    // Click previous
+    const prevButton = fixture.debugElement.query(
+      By.css('button[aria-label="Previous page"]')
+    );
+    prevButton.nativeElement.click();
+    expect(pageChangeSpy).toHaveBeenCalledWith(1);
+  });
+
+  it('should emit pageChange when clicking page number buttons', () => {
+    fixture.componentRef.setInput('currentPage', 2);
+    fixture.componentRef.setInput('pageSize', 10);
+    fixture.componentRef.setInput('totalCount', 50);
+    fixture.detectChanges();
+
+    const pageChangeSpy = jest.fn();
+    component.pageChange.subscribe(pageChangeSpy);
+
+    const page3Button = fixture.debugElement.query(
+      By.css('button[aria-label="Page 3"]')
+    );
+    page3Button.nativeElement.click();
+    expect(pageChangeSpy).toHaveBeenCalledWith(3);
+  });
+
+  it('should emit pageChange for first and last buttons', () => {
+    fixture.componentRef.setInput('currentPage', 3);
+    fixture.componentRef.setInput('pageSize', 10);
+    fixture.componentRef.setInput('totalCount', 50);
+    fixture.detectChanges();
+
+    const pageChangeSpy = jest.fn();
+    component.pageChange.subscribe(pageChangeSpy);
+
+    // Click first
+    const firstButton = fixture.debugElement.query(
+      By.css('button[aria-label="First page"]')
+    );
+    firstButton.nativeElement.click();
+    expect(pageChangeSpy).toHaveBeenCalledWith(1);
+
+    // Click last
+    const lastButton = fixture.debugElement.query(
+      By.css('button[aria-label="Last page"]')
+    );
+    lastButton.nativeElement.click();
+    expect(pageChangeSpy).toHaveBeenCalledWith(5);
+  });
+
+  it('should emit pageSizeChange when page size is changed', () => {
+    fixture.componentRef.setInput('currentPage', 1);
+    fixture.componentRef.setInput('pageSize', 10);
+    fixture.componentRef.setInput('totalCount', 50);
+    fixture.detectChanges();
+
+    const pageSizeChangeSpy = jest.fn();
+    component.pageSizeChange.subscribe(pageSizeChangeSpy);
+
+    const select = fixture.debugElement.query(
+      By.css('select[aria-label="Rows per page"]')
+    );
+    select.nativeElement.value = '25';
+    select.nativeElement.dispatchEvent(new Event('change'));
+    fixture.detectChanges();
+
+    expect(pageSizeChangeSpy).toHaveBeenCalledWith(25);
+  });
+
+  it('should use custom entityLabelPlural when provided', () => {
+    fixture.componentRef.setInput('currentPage', 1);
+    fixture.componentRef.setInput('pageSize', 10);
+    fixture.componentRef.setInput('totalCount', 50);
+    fixture.componentRef.setInput('entityLabelPlural', 'projects');
+    fixture.detectChanges();
+
+    const summaryText = fixture.nativeElement.querySelector('.ogrid-pagination__info');
+    expect(summaryText.textContent).toContain('projects');
+  });
+
+  it('should render custom page size options', () => {
+    fixture.componentRef.setInput('currentPage', 1);
+    fixture.componentRef.setInput('pageSize', 20);
+    fixture.componentRef.setInput('totalCount', 100);
+    fixture.componentRef.setInput('pageSizeOptions', [20, 50, 100]);
+    fixture.detectChanges();
+
+    const options = fixture.debugElement.queryAll(By.css('select option'));
+    expect(options.length).toBe(3);
+    expect(options[0].nativeElement.value).toBe('20');
+    expect(options[1].nativeElement.value).toBe('50');
+    expect(options[2].nativeElement.value).toBe('100');
+  });
+});

package/src/column-chooser/column-chooser.component.ts

@@ -0,0 +1,204 @@
+import { Component, input, output, signal, computed, ChangeDetectionStrategy } from '@angular/core';
+import type { IColumnDefinition } from '@alaarab/ogrid-angular';
+
+export interface IColumnChooserProps {
+  columns: IColumnDefinition[];
+  visibleColumns: Set<string>;
+  onVisibilityChange: (columnKey: string, visible: boolean) => void;
+}
+
+/**
+ * Column visibility chooser dropdown for Angular Radix (lightweight styling).
+ * Standalone component with inline template and CSS variables for theming.
+ */
+@Component({
+  selector: 'ogrid-column-chooser',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="ogrid-column-chooser">
+      <button
+        class="ogrid-column-chooser__trigger"
+        (click)="toggle()"
+        [attr.aria-expanded]="isOpen()"
+        aria-haspopup="listbox"
+      >
+        ☰ Columns ({{ visibleCount() }}/{{ totalCount() }})
+        <span class="ogrid-column-chooser__caret">{{ isOpen() ? '▲' : '▼' }}</span>
+      </button>
+
+      @if (isOpen()) {
+        <div class="ogrid-column-chooser__dropdown" (click)="$event.stopPropagation()">
+          <div class="ogrid-column-chooser__header">
+            Select Columns ({{ visibleCount() }} of {{ totalCount() }})
+          </div>
+
+          <div class="ogrid-column-chooser__list">
+            @for (col of columns(); track col.columnId) {
+              <label class="ogrid-column-chooser__item">
+                <input
+                  type="checkbox"
+                  [checked]="visibleColumns().has(col.columnId)"
+                  (change)="onCheckboxChange(col.columnId, $event)"
+                />
+                <span>{{ col.name }}</span>
+              </label>
+            }
+          </div>
+
+          <div class="ogrid-column-chooser__footer">
+            <button class="ogrid-column-chooser__btn" (click)="clearAll()">Clear All</button>
+            <button class="ogrid-column-chooser__btn ogrid-column-chooser__btn--primary" (click)="selectAll()">Select All</button>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    :host { display: inline-flex; position: relative; }
+    .ogrid-column-chooser { position: relative; }
+    .ogrid-column-chooser__trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      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: 14px;
+      font-weight: 600;
+      text-transform: none;
+      white-space: nowrap;
+      transition: all 0.15s ease;
+    }
+    .ogrid-column-chooser__trigger:hover {
+      background: var(--ogrid-hover-bg, #f0f0f0);
+      border-color: var(--ogrid-active-border, #0078d4);
+    }
+    .ogrid-column-chooser__caret {
+      font-size: 10px;
+      opacity: 0.7;
+    }
+    .ogrid-column-chooser__dropdown {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      z-index: 1000;
+      min-width: 220px;
+      margin-top: 4px;
+      background: var(--ogrid-bg, #ffffff);
+      border: 1px solid var(--ogrid-border, #e0e0e0);
+      border-radius: 4px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+    .ogrid-column-chooser__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-column-chooser__list {
+      max-height: 320px;
+      overflow-y: auto;
+      padding: 4px 0;
+    }
+    .ogrid-column-chooser__item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      min-height: 32px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--ogrid-fg, #242424);
+      transition: background 0.15s ease;
+    }
+    .ogrid-column-chooser__item:hover {
+      background: var(--ogrid-hover-bg, #f0f0f0);
+    }
+    .ogrid-column-chooser__item input[type="checkbox"] {
+      cursor: pointer;
+    }
+    .ogrid-column-chooser__footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      padding: 8px 12px;
+      border-top: 1px solid var(--ogrid-border, #e0e0e0);
+      background: var(--ogrid-header-bg, #f5f5f5);
+    }
+    .ogrid-column-chooser__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;
+      text-transform: none;
+      transition: all 0.15s ease;
+    }
+    .ogrid-column-chooser__btn:hover {
+      background: var(--ogrid-hover-bg, #f0f0f0);
+    }
+    .ogrid-column-chooser__btn--primary {
+      background: var(--ogrid-active-border, #0078d4);
+      color: #ffffff;
+      border-color: var(--ogrid-active-border, #0078d4);
+    }
+    .ogrid-column-chooser__btn--primary:hover {
+      opacity: 0.9;
+    }
+  `],
+  host: {
+    '(document:click)': 'onDocumentClick($event)',
+  },
+})
+export class ColumnChooserComponent {
+  readonly columns = input.required<IColumnDefinition[]>();
+  readonly visibleColumns = input.required<Set<string>>();
+
+  readonly visibilityChange = output<{ columnKey: string; visible: boolean }>();
+
+  readonly isOpen = signal(false);
+
+  readonly visibleCount = computed(() => this.visibleColumns().size);
+  readonly totalCount = computed(() => this.columns().length);
+
+  toggle(): void {
+    this.isOpen.update((v) => !v);
+  }
+
+  onCheckboxChange(columnKey: string, event: Event): void {
+    const checked = (event.target as HTMLInputElement).checked;
+    this.visibilityChange.emit({ columnKey, visible: checked });
+  }
+
+  selectAll(): void {
+    for (const col of this.columns()) {
+      if (!this.visibleColumns().has(col.columnId)) {
+        this.visibilityChange.emit({ columnKey: col.columnId, visible: true });
+      }
+    }
+  }
+
+  clearAll(): void {
+    for (const col of this.columns()) {
+      if (this.visibleColumns().has(col.columnId)) {
+        this.visibilityChange.emit({ columnKey: col.columnId, visible: false });
+      }
+    }
+  }
+
+  onDocumentClick(event: MouseEvent): void {
+    // Close dropdown when clicking outside
+    const el = event.target as HTMLElement;
+    if (!el.closest('ogrid-column-chooser')) {
+      this.isOpen.set(false);
+    }
+  }
+}