@alaarab/ogrid-angular-radix 2.0.4

package/README.md

@@ -0,0 +1,76 @@
+# @alaarab/ogrid-angular-radix
+
+Lightweight Angular data grid with sorting, filtering, pagination, column chooser, and CSV export. Built with Angular CDK for overlays.
+
+## Installation
+
+```bash
+npm install @alaarab/ogrid-angular-radix
+```
+
+## Features
+
+- ✅ **Lightweight**: Uses Angular CDK only - no heavy UI framework dependency
+- ✅ **Full-featured**: Sorting, filtering, pagination, column management
+- ✅ **Cell Selection**: Excel-like spreadsheet selection and editing
+- ✅ **Keyboard Navigation**: Arrow keys, Enter, Escape, Tab
+- ✅ **Copy/Paste**: Clipboard integration with Excel-compatible formats
+- ✅ **Fill Handle**: Drag to fill cells like Excel
+- ✅ **Undo/Redo**: Full edit history support
+- ✅ **Context Menu**: Right-click menu for common operations
+- ✅ **Column Resize**: Drag column borders to resize
+- ✅ **Column Reorder**: Drag column headers to reorder
+- ✅ **Customizable**: CSS variables for theming
+
+## Quick Start
+
+```typescript
+import { Component } from '@angular/core';
+import { OGridComponent } from '@alaarab/ogrid-angular-radix';
+
+interface Employee {
+  id: number;
+  name: string;
+  department: string;
+  salary: number;
+}
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [OGridComponent],
+  template: `
+    <ogrid
+      [props]="{
+        columns: columns,
+        data: data,
+        cellSelection: true,
+        editable: true,
+        statusBar: true
+      }"
+    />
+  `
+})
+export class AppComponent {
+  columns = [
+    { columnId: 'id', name: 'ID', type: 'numeric' as const },
+    { columnId: 'name', name: 'Name', type: 'text' as const },
+    { columnId: 'department', name: 'Department', type: 'text' as const, filterable: { type: 'multiSelect' as const } },
+    { columnId: 'salary', name: 'Salary', type: 'numeric' as const, editable: true }
+  ];
+
+  data: Employee[] = [
+    { id: 1, name: 'Alice', department: 'Engineering', salary: 120000 },
+    { id: 2, name: 'Bob', department: 'Marketing', salary: 90000 },
+    { id: 3, name: 'Carol', department: 'Engineering', salary: 115000 }
+  ];
+}
+```
+
+## Documentation
+
+Full documentation available at: https://alaarab.github.io/ogrid
+
+## License
+
+MIT © Ala Arab

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

@@ -0,0 +1,199 @@
+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, ChangeDetectionStrategy } from '@angular/core';
+/**
+ * Column visibility chooser dropdown for Angular Radix (lightweight styling).
+ * Standalone component with inline template and CSS variables for theming.
+ */
+let ColumnChooserComponent = class ColumnChooserComponent {
+    constructor() {
+        this.columns = input.required();
+        this.visibleColumns = input.required();
+        this.visibilityChange = output();
+        this.isOpen = signal(false);
+        this.visibleCount = computed(() => this.visibleColumns().size);
+        this.totalCount = computed(() => this.columns().length);
+    }
+    toggle() {
+        this.isOpen.update((v) => !v);
+    }
+    onCheckboxChange(columnKey, event) {
+        const checked = event.target.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 });
+            }
+        }
+    }
+    onDocumentClick(event) {
+        // Close dropdown when clicking outside
+        const el = event.target;
+        if (!el.closest('ogrid-column-chooser')) {
+            this.isOpen.set(false);
+        }
+    }
+};
+ColumnChooserComponent = __decorate([
+    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)',
+        },
+    })
+], ColumnChooserComponent);
+export { ColumnChooserComponent };