ngx-column-filter-popup 1.0.0

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "ngx-column-filter-popup",
+  "version": "1.0.0",
+  "description": "A powerful, reusable Angular column filter component with support for multiple field types, advanced filtering rules, and customizable match modes",
+  "keywords": [
+    "angular",
+    "angular-library",
+    "angular-component",
+    "column-filter",
+    "filter",
+    "table-filter",
+    "data-filter",
+    "typescript",
+    "ngx",
+    "advanced-filter",
+    "multi-filter",
+    "data-grid",
+    "popup-filter"
+  ],
+  "author": "Shivam Sharma",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shivamsharma/ngx-column-filter-popup.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shivamsharma/ngx-column-filter-popup/issues"
+  },
+  "homepage": "https://github.com/shivamsharma/ngx-column-filter-popup#readme",
+  "main": "./src/app/lib/public-api.ts",
+  "types": "./src/app/lib/public-api.ts",
+  "files": [
+    "src/app/lib/**/*",
+    "src/app/components/column-filter/**/*",
+    "README.md",
+    "DOCUMENTATION.md",
+    "USAGE_EXAMPLES.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "build:lib": "ng build --configuration production",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "publish:npm": "npm publish",
+    "pack:test": "npm pack"
+  },
+  "peerDependencies": {
+    "@angular/common": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/core": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/forms": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "rxjs": "^6.0.0 || ^7.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.0.5",
+    "@angular/cli": "^21.0.5",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/compiler-cli": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "jsdom": "^27.1.0",
+    "rxjs": "~7.8.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  }
+}

package/src/app/components/column-filter/column-filter.component.html

@@ -0,0 +1,131 @@
+<div class="column-filter-wrapper">
+  <button 
+    class="filter-trigger" 
+    [class.has-filter]="hasActiveFilter()"
+    (click)="toggleDropdown($event)"
+    [attr.aria-label]="'Filter by ' + columnName"
+    [attr.aria-expanded]="showDropdown">
+    <!-- <i class="fas fa-filter"></i> -->
+    <svg *ngIf="!hasActiveFilter()" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" data-p-icon="filter" class="ng-tns-c389539309-46 p-icon ng-star-inserted" pc164=""><g clip-path="url(#pui_id_9)"><path d="M8.64708 14H5.35296C5.18981 13.9979 5.03395 13.9321 4.91858 13.8167C4.8032 13.7014 4.73745 13.5455 4.73531 13.3824V7L0.329431 0.98C0.259794 0.889466 0.217389 0.780968 0.20718 0.667208C0.19697 0.553448 0.219379 0.439133 0.271783 0.337647C0.324282 0.236453 0.403423 0.151519 0.500663 0.0920138C0.597903 0.0325088 0.709548 0.000692754 0.823548 0H13.1765C13.2905 0.000692754 13.4021 0.0325088 13.4994 0.0920138C13.5966 0.151519 13.6758 0.236453 13.7283 0.337647C13.7807 0.439133 13.8031 0.553448 13.7929 0.667208C13.7826 0.780968 13.7402 0.889466 13.6706 0.98L9.26472 7V13.3824C9.26259 13.5455 9.19683 13.7014 9.08146 13.8167C8.96609 13.9321 8.81022 13.9979 8.64708 14ZM5.97061 12.7647H8.02943V6.79412C8.02878 6.66289 8.07229 6.53527 8.15296 6.43177L11.9412 1.23529H2.05884L5.86355 6.43177C5.94422 6.53527 5.98773 6.66289 5.98708 6.79412L5.97061 12.7647Z" fill="currentColor"></path></g><defs><clipPath id="url(#pui_id_9)"><rect width="14" height="14" fill="white"></rect></clipPath></defs></svg>
+
+    <svg *ngIf="hasActiveFilter()" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" data-p-icon="filter-fill" class="ng-tns-c389539309-50 p-icon ng-star-inserted" pc2469=""><path d="M13.7274 0.33847C13.6228 0.130941 13.4095 0 13.1764 0H0.82351C0.590451 0 0.377157 0.130941 0.272568 0.33847C0.167157 0.545999 0.187746 0.795529 0.325275 0.98247L4.73527 6.99588V13.3824C4.73527 13.7233 5.01198 14 5.35292 14H8.64704C8.98798 14 9.26469 13.7233 9.26469 13.3824V6.99588L13.6747 0.98247C13.8122 0.795529 13.8328 0.545999 13.7274 0.33847Z" fill="currentColor"></path></svg>
+  </button>
+
+
+
+  <div class="filter-dropdown" *ngIf="showDropdown">
+    <div class="filter-dropdown-content">
+      <!-- Global Match Mode Toggle (only shown when multiple rules exist) -->
+      <div class="global-match-mode-toggle" *ngIf="hasMultipleRules()">
+        <label class="match-mode-label">Combine rules:</label>
+        <div class="match-mode-switch-wrapper">
+          <div 
+            class="match-mode-switch" 
+            [class.match-all]="globalMatchMode === 'match-all-rules'"
+            (click)="toggleGlobalMatchMode()">
+            <span class="match-mode-text">{{ getGlobalMatchModeLabel() }}</span>
+            <i class="fas fa-chevron-down match-mode-arrow"></i>
+          </div>
+          <div class="match-mode-options" *ngIf="false">
+            <!-- Dropdown options if needed in future -->
+          </div>
+        </div>
+      </div>
+
+      <!-- Filter Rules -->
+      <div class="filter-rules">
+        <div *ngFor="let rule of filterRules; let i = index" class="filter-rule">
+          
+          <!-- First dropdown - Match type -->
+          <div class="dropdown-select-wrapper" [class.first-rule]="i === 0">
+            <select 
+              class="dropdown-select"
+              [(ngModel)]="rule.matchType"
+              [attr.aria-label]="'Match type for rule ' + (i + 1)">
+              <option *ngFor="let type of matchTypes" [value]="type.value">
+                {{ type.label }}
+              </option>
+            </select>
+            <i class="fas fa-chevron-down dropdown-arrow"></i>
+          </div>
+
+          <!-- Text Input -->
+          <input 
+            *ngIf="isTextField()"
+            type="text" 
+            class="filter-input"
+            [placeholder]="getPlaceholder()"
+            [(ngModel)]="rule.value"
+            [attr.aria-label]="'Filter value for rule ' + (i + 1)">
+
+          <!-- Currency Input -->
+          <div *ngIf="isCurrencyField()" class="currency-input-wrapper">
+            <span class="currency-symbol">{{ currencySymbol }}</span>
+            <input 
+              type="text" 
+              class="filter-input currency-input"
+              [placeholder]="'0.00'"
+              [value]="formatCurrency(rule.value)"
+              (input)="rule.value = parseCurrency($any($event.target).value)"
+              [attr.aria-label]="'Currency filter value for rule ' + (i + 1)">
+          </div>
+
+          <!-- Age/Number Input -->
+          <input 
+            *ngIf="isAgeField()"
+            type="number" 
+            class="filter-input age-input"
+            [placeholder]="'Enter number'"
+            [(ngModel)]="rule.value"
+            min="0"
+            step="1"
+            [attr.aria-label]="'Age/Number filter value for rule ' + (i + 1)">
+
+          <!-- Date Input -->
+          <input 
+            *ngIf="isDateField()"
+            type="date" 
+            class="filter-input date-input"
+            [placeholder]="'Select date'"
+            [(ngModel)]="rule.value"
+            [attr.aria-label]="'Date filter value for rule ' + (i + 1)">
+
+          <!-- Status Dropdown -->
+          <div *ngIf="isStatusField()" class="dropdown-select-wrapper status-dropdown-wrapper">
+            <select 
+              class="dropdown-select status-select"
+              [(ngModel)]="rule.value"
+              [attr.aria-label]="'Status filter value for rule ' + (i + 1)">
+              <option value="">Select status</option>
+              <option *ngFor="let option of statusOptions" [value]="option">
+                {{ option }}
+              </option>
+            </select>
+            <i class="fas fa-chevron-down dropdown-arrow"></i>
+          </div>
+
+          <!-- Remove Rule button (only for additional rules) -->
+          <button 
+            *ngIf="filterRules.length > 1 && i > 0"
+            class="remove-rule-btn"
+            (click)="removeRule(i)"
+            type="button"
+            [attr.aria-label]="'Remove filter rule ' + (i + 1)">
+            <i class="fas fa-trash"></i> Remove Rule
+          </button>
+        </div>
+      </div>
+
+      <!-- Add Rule button -->
+      <button class="add-rule-btn" (click)="addRule()" type="button" aria-label="Add another filter rule">
+        <span class="plus-icon">+</span> Add Rule
+      </button>
+
+      <!-- Action buttons -->
+      <div class="filter-actions">
+        <button class="btn-clear" (click)="clearFilter()" type="button">Clear</button>
+        <button class="btn-apply" (click)="applyFilter()" type="button">Apply</button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/app/components/column-filter/column-filter.component.scss

@@ -0,0 +1,426 @@
+.column-filter-wrapper {
+  font-family: Lato, sans-serif !important;
+  position: relative;
+  display: inline-block;
+  z-index: 10;
+  overflow: visible;
+}
+
+.filter-trigger {
+  background: transparent;
+  border: none;
+  padding: 4px 8px;
+  cursor: pointer;
+  color: #6c757d;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    color: #495057;
+  }
+
+  &:focus {
+    // outline: 2px solid #28a745;
+    // outline-offset: 2px;
+  }
+
+  &.has-filter {
+    // color: #28a745;
+
+    i {
+      font-weight: bold;
+    }
+  }
+
+  i {
+    font-size: 14px;
+  }
+}
+
+.filter-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+  padding: 11px;
+  min-width: 12.5rem;
+  max-width: 90vw;
+  z-index: 10000;
+  overflow: visible;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid white;
+  }
+}
+
+.filter-dropdown-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.global-match-mode-toggle {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 4px;
+}
+
+.match-mode-label {
+  font-size: 12px;
+  color: #6c757d;
+  font-weight: 500;
+  font-family: Lato, sans-serif;
+}
+
+.match-mode-switch-wrapper {
+  position: relative;
+}
+
+.match-mode-switch {
+  width: 100%;
+  padding: 10px 40px 10px 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background: white;
+  font-size: 14px;
+  color: #334155;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: Lato, sans-serif;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+
+  &:hover {
+    border-color: #28a745;
+  }
+
+  &.match-all {
+    border-color: #28a745;
+    background: #f0fdf4;
+    color: #15803d;
+
+    .match-mode-text {
+      color: #15803d;
+      font-weight: 500;
+    }
+
+    .match-mode-arrow {
+      color: #15803d;
+    }
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #28a745;
+    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
+  }
+}
+
+.match-mode-text {
+  flex: 1;
+  text-align: left;
+  color: #334155;
+}
+
+.match-mode-arrow {
+  position: absolute;
+  right: 16px;
+  color: #6c757d;
+  font-size: 12px;
+  pointer-events: none;
+  transition: transform 0.2s ease;
+}
+
+.filter-rules {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.filter-rule {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+}
+
+.dropdown-select-wrapper {
+  position: relative;
+}
+
+.dropdown-select {
+  width: 100%;
+  padding: 10px 40px 10px 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background: white;
+  font-size: 14px;
+  color: #334155;
+  appearance: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: Lato, sans-serif;
+
+  &:hover {
+    border-color: #28a745;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #28a745;
+    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
+  }
+}
+
+.dropdown-arrow {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #6c757d;
+  pointer-events: none;
+  font-size: 12px;
+}
+
+.filter-input {
+  width: 100%;
+  padding: 10px 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #334155;
+  transition: all 0.2s ease;
+  font-family: Lato, sans-serif;
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: #999;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #28a745;
+    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
+  }
+
+  // Date input specific styling
+  &.date-input {
+    &::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+      opacity: 0.6;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+// Currency input wrapper
+.currency-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  .currency-symbol {
+    position: absolute;
+    left: 16px;
+    color: #6c757d;
+    font-size: 14px;
+    font-weight: 500;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .currency-input {
+    padding-left: 32px;
+    text-align: right;
+  }
+}
+
+// Status dropdown wrapper
+.status-dropdown-wrapper {
+  width: 100%;
+
+  .status-select {
+    width: 100%;
+    appearance: none;
+    padding: 10px 40px 10px 16px;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 14px;
+    color: #334155;
+    background: white;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: Lato, sans-serif;
+
+    &:hover {
+      border-color: #28a745;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: #28a745;
+      box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
+    }
+
+    option {
+      padding: 8px;
+    }
+  }
+}
+
+.remove-rule-btn {
+  background: transparent;
+  border: none;
+  color: #dc3545;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 8px 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.2s ease;
+  font-family: Lato, sans-serif;
+
+  i {
+    font-size: 12px;
+  }
+
+  &:hover {
+    color: #c82333;
+  }
+
+  &:focus {
+    outline: 2px solid #dc3545;
+    outline-offset: 2px;
+  }
+}
+
+.add-rule-btn {
+  background: transparent;
+  border: none;
+  color: #007bff;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 10px 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  transition: all 0.2s ease;
+  font-family: Lato, sans-serif;
+
+  .plus-icon {
+    font-size: 18px;
+    font-weight: 300;
+  }
+
+  &:hover {
+    color: #0056b3;
+    background: rgba(0, 123, 255, 0.05);
+    border-radius: 4px;
+  }
+
+  &:focus {
+    outline: 2px solid #007bff;
+    outline-offset: 2px;
+  }
+}
+
+.filter-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  margin-top: 8px;
+}
+
+.btn-clear,
+.btn-apply {
+  font-family: Lato, sans-serif !important;
+  flex: 1;
+  padding: 0px 24px;
+  border-radius: 8px;
+  font-size: 12.25px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 47.6875px !important;
+  height: 27.1875px !important;
+  border: none !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:focus {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}
+
+.btn-clear {
+  background: #f1f5f9;
+  border: 1px solid #10B981;
+  color: #10b981;
+
+  &:hover {
+    background: rgba(218, 219, 219, 0.969);
+  }
+}
+
+.btn-apply {
+  background: #0cab71 !important;
+  color: white;
+
+  &:hover {
+    background: #10b981 !important;
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 480px) {
+  .filter-dropdown {
+    min-width: 320px;
+    left: 0;
+    transform: translateX(0);
+    max-width: calc(100vw - 20px);
+  }
+}
+
+// Additional positioning adjustments to prevent clipping
+@media (max-width: 768px) {
+  .filter-dropdown {
+    // Ensure dropdown stays within viewport on tablets
+    max-width: calc(100vw - 32px);
+  }
+}