@gp-grid/angular 0.22.0 → 0.23.1

package/dist/styles.css

@@ -1 +1 @@
-.gp-grid-container{--gp-grid-bg:#fff;--gp-grid-bg-alt:#f8f9fa;--gp-grid-text:#212529;--gp-grid-text-secondary:#6c757d;--gp-grid-text-muted:#adb5bd;--gp-grid-border:#dee2e6;--gp-grid-border-light:#e9ecef;--gp-grid-header-bg:#f1f3f5;--gp-grid-header-text:#212529;--gp-grid-header-z-index:10;--gp-grid-primary:#228be6;--gp-grid-primary-light:#e7f5ff;--gp-grid-primary-border:#74c0fc;--gp-grid-hover:#f1f3f5;--gp-grid-filter-bg:#f8f9fa;--gp-grid-input-bg:#fff;--gp-grid-input-border:#ced4da;--gp-grid-error-bg:#fff5f5;--gp-grid-error-text:#c92a2a;--gp-grid-loading-bg:#fffffff2;--gp-grid-loading-text:#495057;--gp-grid-scrollbar-track:#f1f3f5;--gp-grid-scrollbar-thumb:#ced4da;--gp-grid-scrollbar-thumb-hover:#adb5bd}.gp-grid-container--dark{--gp-grid-bg:#1a1b1e;--gp-grid-bg-alt:#25262b;--gp-grid-text:#c1c2c5;--gp-grid-text-secondary:#909296;--gp-grid-text-muted:#5c5f66;--gp-grid-border:#373a40;--gp-grid-border-light:#2c2e33;--gp-grid-header-bg:#25262b;--gp-grid-header-text:#c1c2c5;--gp-grid-header-z-index:10;--gp-grid-primary:#339af0;--gp-grid-primary-light:#1c3d5a;--gp-grid-primary-border:#1c7ed6;--gp-grid-hover:#2c2e33;--gp-grid-filter-bg:#25262b;--gp-grid-input-bg:#1a1b1e;--gp-grid-input-border:#373a40;--gp-grid-error-bg:#2c1a1a;--gp-grid-error-text:#ff6b6b;--gp-grid-loading-bg:#1a1b1ef2;--gp-grid-loading-text:#c1c2c5;--gp-grid-scrollbar-track:#25262b;--gp-grid-scrollbar-thumb:#373a40;--gp-grid-scrollbar-thumb-hover:#4a4d52}.gp-grid-container{-webkit-user-select:none;user-select:none;outline:none}:where(.gp-grid-container){color:var(--gp-grid-text);background-color:var(--gp-grid-bg);border:1px solid var(--gp-grid-border);border-radius:6px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:13px;line-height:1.5}.gp-grid-container:focus{outline:none}:where(.gp-grid-container:focus){border-color:var(--gp-grid-primary)}.gp-grid-header{z-index:11;flex-shrink:0;position:sticky;top:0;left:0;overflow:hidden}:where(.gp-grid-header){background-color:var(--gp-grid-header-bg);border-bottom:1px solid var(--gp-grid-border)}.gp-grid-container .gp-grid-header-cell{box-sizing:border-box;user-select:none;touch-action:none;display:flex;position:absolute;top:0}:where(.gp-grid-header-cell){border-right:1px solid var(--gp-grid-border);letter-spacing:.5px;color:var(--gp-grid-header-text);cursor:pointer;background-color:#0000;align-items:center;padding:0 12px;font-size:12px;font-weight:600;transition:background-color .1s}:where(.gp-grid-header-cell:hover){background-color:var(--gp-grid-hover)}:where(.gp-grid-header-cell:active){background-color:var(--gp-grid-border-light)}.gp-grid-container .gp-grid-header-text{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}:where(.gp-grid-header-text){color:var(--gp-grid-header-text)}.gp-grid-header-icons{align-items:center;gap:4px;margin-left:auto;display:flex}.gp-grid-sort-arrows{flex-direction:row;align-items:center;gap:2px;margin-left:6px;display:flex}.gp-grid-sort-arrows-stack{flex-direction:column;align-items:center;gap:2px;display:flex}:where(.gp-grid-sort-arrow-up),:where(.gp-grid-sort-arrow-down){opacity:.35;color:var(--gp-grid-text);transition:opacity .15s,color .15s}:where(.gp-grid-sort-arrow-up.active),:where(.gp-grid-sort-arrow-down.active){opacity:1;color:var(--gp-grid-primary)}:where(.gp-grid-sort-index){color:var(--gp-grid-primary);font-size:9px;font-weight:600}.gp-grid-filter-icon{justify-content:center;align-items:center;width:20px;height:20px;display:flex}:where(.gp-grid-filter-icon){cursor:pointer;color:var(--gp-grid-text-secondary);border-radius:4px;margin-left:2px;transition:background-color .15s,color .15s}:where(.gp-grid-filter-icon:hover){background-color:var(--gp-grid-hover);color:var(--gp-grid-primary)}:where(.gp-grid-filter-icon.active){color:var(--gp-grid-primary);background-color:var(--gp-grid-primary-light)}@media (pointer:coarse) and (hover:none) and (width<=768px){.gp-grid-filter-icon{width:44px;min-width:44px;height:44px;min-height:44px}:where(.gp-grid-filter-icon){margin-left:0}.gp-grid-filter-icon svg{width:20px;height:20px}}.gp-grid-header--loading .gp-grid-header-cell{pointer-events:none}:where(.gp-grid-header--loading .gp-grid-header-cell){opacity:.6;cursor:default}.gp-grid-header-resize-handle{cursor:col-resize;z-index:10;touch-action:none;width:6px;height:100%;position:absolute;top:0;right:-3px}:where(.gp-grid-header-resize-handle:hover),:where(.gp-grid-header-resize-handle--active){background-color:var(--gp-grid-primary);opacity:.4}@media (pointer:coarse) and (hover:none) and (width<=768px){.gp-grid-header-resize-handle{width:24px;right:-12px}}.gp-grid-column-resize-line{z-index:1000;pointer-events:none;width:2px;height:100%;position:absolute;top:0}:where(.gp-grid-column-resize-line){background-color:var(--gp-grid-primary)}.gp-grid-column-move-ghost{pointer-events:none;z-index:2000;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;align-items:center;display:flex;position:fixed;overflow:hidden}:where(.gp-grid-column-move-ghost){opacity:.7;background-color:var(--gp-grid-header-bg);border:2px solid var(--gp-grid-primary);letter-spacing:.5px;color:var(--gp-grid-header-text);border-radius:4px;padding:0 12px;font-size:12px;font-weight:600;box-shadow:0 4px 12px #00000026}.gp-grid-column-drop-indicator{z-index:1000;pointer-events:none;width:3px;height:100%;position:absolute;top:0;left:0}:where(.gp-grid-column-drop-indicator){background-color:var(--gp-grid-primary);border-radius:2px}.gp-grid-rows-wrapper{z-index:1;will-change:transform;position:absolute;top:0;left:0}.gp-grid-row{position:absolute;top:0;left:0}:where(.gp-grid-row){background-color:var(--gp-grid-bg)}.gp-grid-cell{box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none;display:flex;position:absolute;top:0;overflow:hidden}.gp-grid-cell-content{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.gp-grid-cell--wrap{align-items:flex-start}.gp-grid-cell--wrap .gp-grid-cell-content{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}:where(.gp-grid-cell){cursor:cell;color:var(--gp-grid-text);border-right:1px solid var(--gp-grid-border-light);border-bottom:1px solid var(--gp-grid-border-light);background-color:#0000;align-items:center;padding:0 12px}.gp-grid-cell--active{z-index:5;outline:none}:where(.gp-grid-cell--active){background-color:var(--gp-grid-primary-light);border:2px solid var(--gp-grid-primary);padding:0 11px}:where(.gp-grid-cell--selected){background-color:var(--gp-grid-primary-light)}.gp-grid-cell--editing{z-index:10}:where(.gp-grid-cell--editing){background-color:var(--gp-grid-bg);border:2px solid var(--gp-grid-primary);padding:0}.gp-grid-fill-handle{z-index:11;pointer-events:auto;box-sizing:border-box;touch-action:none;width:8px;height:8px;position:absolute}:where(.gp-grid-fill-handle){background-color:var(--gp-grid-primary);border:2px solid var(--gp-grid-bg);cursor:crosshair;border-radius:1px}:where(.gp-grid-fill-handle:hover){transform:scale(1.2)}@media (pointer:coarse) and (hover:none) and (width<=768px){.gp-grid-fill-handle{width:24px;height:24px}:where(.gp-grid-fill-handle){border-width:3px;border-radius:3px}}:where(.gp-grid-cell.gp-grid-cell--fill-preview){background-color:var(--gp-grid-primary-light);border:1px dashed var(--gp-grid-primary)}.gp-grid-edit-input{width:100%;height:100%}:where(.gp-grid-edit-input){font-family:inherit;font-size:inherit;color:var(--gp-grid-text);background-color:#0000;border:none;padding:0 11px}.gp-grid-edit-input:focus{outline:none}.gp-grid-cell-peek{z-index:20;box-sizing:border-box;max-height:320px;position:absolute;overflow:auto}:where(.gp-grid-cell-peek){background-color:var(--gp-grid-bg);color:var(--gp-grid-text);border:2px solid var(--gp-grid-primary);font-family:inherit;font-size:inherit;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;-webkit-user-select:text;user-select:text;border-radius:3px;padding:8px 11px;line-height:1.4;box-shadow:0 4px 12px #00000026}.gp-grid-cell-peek .gp-grid-cell-content{white-space:inherit;text-overflow:clip;overflow:visible}.gp-grid-loading-anchor{z-index:900;pointer-events:none;height:0;position:sticky;top:0;left:0;overflow:visible}.gp-grid-loading-overlay{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}:where(.gp-grid-loading-overlay){background-color:var(--gp-grid-loading-overlay-bg,#fff6)}:where(.gp-grid-container--dark .gp-grid-loading-overlay){background-color:var(--gp-grid-loading-overlay-bg,#0000004d)}.gp-grid-loading{z-index:1000;pointer-events:auto;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:where(.gp-grid-loading){background-color:var(--gp-grid-loading-bg);color:var(--gp-grid-loading-text);border:1px solid var(--gp-grid-border);border-radius:6px;align-items:center;gap:10px;padding:12px 20px;font-size:13px;font-weight:500}.gp-grid-loading-spinner{width:16px;height:16px;animation:.7s linear infinite gp-grid-spin}:where(.gp-grid-loading-spinner){border:2px solid var(--gp-grid-border);border-top-color:var(--gp-grid-primary);border-radius:50%}@keyframes gp-grid-spin{to{transform:rotate(360deg)}}.gp-grid-error{z-index:1000;-webkit-user-select:text;user-select:text;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:where(.gp-grid-error){background-color:var(--gp-grid-error-bg);color:var(--gp-grid-error-text);border:1px solid var(--gp-grid-error-text);text-align:center;cursor:text;border-radius:6px;max-width:80%;padding:12px 20px;font-size:13px;font-weight:500}.gp-grid-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:where(.gp-grid-empty){color:var(--gp-grid-text-muted);text-align:center;font-size:14px}.gp-grid-container::-webkit-scrollbar{width:8px;height:8px}:where(.gp-grid-container)::-webkit-scrollbar-track{background-color:var(--gp-grid-scrollbar-track)}:where(.gp-grid-container)::-webkit-scrollbar-thumb{background-color:var(--gp-grid-scrollbar-thumb);border-radius:4px}:where(.gp-grid-container)::-webkit-scrollbar-thumb:hover{background-color:var(--gp-grid-scrollbar-thumb-hover)}:where(.gp-grid-container)::-webkit-scrollbar-corner{background-color:var(--gp-grid-scrollbar-track)}.gp-grid-filter-popup{flex-direction:column;max-width:min(360px,100vw - 16px);max-height:400px;display:flex}:where(.gp-grid-filter-popup){background-color:var(--gp-grid-bg);border:1px solid var(--gp-grid-border);border-radius:6px;font-size:13px;box-shadow:0 4px 12px #00000026}:where(.gp-grid-filter-header){border-bottom:1px solid var(--gp-grid-border-light);color:var(--gp-grid-header-text);padding:10px 12px;font-weight:600}.gp-grid-filter-content{flex-direction:column;min-height:0;display:flex;overflow-y:auto}:where(.gp-grid-filter-content){gap:10px;padding:10px 12px}.gp-grid-filter-mode-toggle{display:flex}:where(.gp-grid-filter-mode-toggle){background-color:var(--gp-grid-bg-alt);border-radius:4px;gap:4px;padding:2px}.gp-grid-filter-mode-toggle button{flex:1}:where(.gp-grid-filter-mode-toggle button){color:var(--gp-grid-text-secondary);cursor:pointer;background-color:#0000;border:none;border-radius:3px;padding:6px 10px;font-family:inherit;font-size:11px;transition:background-color .15s,color .15s}:where(.gp-grid-filter-mode-toggle button:hover){color:var(--gp-grid-text)}:where(.gp-grid-filter-mode-toggle button.active){background-color:var(--gp-grid-bg);color:var(--gp-grid-text);box-shadow:0 1px 2px #0000001a}:where(.gp-grid-filter-info){color:var(--gp-grid-text-secondary);background-color:var(--gp-grid-bg-alt);border-radius:4px;padding:6px 8px;font-size:11px}.gp-grid-filter-search{box-sizing:border-box;width:100%;height:30px}:where(.gp-grid-filter-search){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-input-bg);color:var(--gp-grid-text);border-radius:4px;padding:0 10px;font-family:inherit;font-size:12px}:where(.gp-grid-filter-search:focus){border-color:var(--gp-grid-primary);outline:none}.gp-grid-filter-actions{display:flex}:where(.gp-grid-filter-actions){gap:8px}.gp-grid-filter-actions button{flex:1}:where(.gp-grid-filter-actions button){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-bg);color:var(--gp-grid-text);cursor:pointer;border-radius:3px;padding:4px 8px;font-family:inherit;font-size:11px}:where(.gp-grid-filter-actions button:hover:not(:disabled)){background-color:var(--gp-grid-hover)}:where(.gp-grid-filter-actions button:disabled){opacity:.5;cursor:not-allowed}.gp-grid-filter-list{flex-direction:column;max-height:200px;display:flex;overflow-y:auto}:where(.gp-grid-filter-list){border:1px solid var(--gp-grid-border-light);border-radius:4px;gap:4px;padding:6px}.gp-grid-filter-option{align-items:center;display:flex}:where(.gp-grid-filter-option){cursor:pointer;border-radius:3px;gap:8px;padding:4px 6px}:where(.gp-grid-filter-option:hover){background-color:var(--gp-grid-hover)}.gp-grid-filter-option input[type=checkbox]{margin:0}:where(.gp-grid-filter-option input[type=checkbox]){cursor:pointer}.gp-grid-filter-option span{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}:where(.gp-grid-filter-blank){color:var(--gp-grid-text-muted);font-style:italic}.gp-grid-filter-condition{flex-direction:column;display:flex}:where(.gp-grid-filter-condition){gap:6px}.gp-grid-filter-row{align-items:center;display:flex}:where(.gp-grid-filter-row){gap:6px}.gp-grid-filter-row select{height:30px}:where(.gp-grid-filter-row select){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-input-bg);color:var(--gp-grid-text);cursor:pointer;border-radius:4px;padding:0 6px;font-family:inherit;font-size:12px}.gp-grid-filter-row input[type=number],.gp-grid-filter-row input[type=date],.gp-grid-filter-row input[type=text],.gp-grid-filter-text-input{box-sizing:border-box;flex:1;min-width:0;height:30px}:where(.gp-grid-filter-row input[type=number]),:where(.gp-grid-filter-row input[type=date]),:where(.gp-grid-filter-row input[type=text]),:where(.gp-grid-filter-text-input){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-input-bg);color:var(--gp-grid-text);border-radius:4px;padding:0 8px;font-family:inherit;font-size:12px}:where(.gp-grid-filter-row input:focus){border-color:var(--gp-grid-primary);outline:none}:where(.gp-grid-filter-to){color:var(--gp-grid-text-secondary);font-size:11px}.gp-grid-filter-remove{width:24px;height:24px}:where(.gp-grid-filter-remove){color:var(--gp-grid-text-muted);cursor:pointer;background-color:#0000;border:none;border-radius:3px;padding:0;font-size:16px;line-height:1}:where(.gp-grid-filter-remove:hover){background-color:var(--gp-grid-error-bg);color:var(--gp-grid-error-text)}.gp-grid-filter-combination{display:flex}:where(.gp-grid-filter-combination){gap:4px;margin-bottom:4px}.gp-grid-filter-combination button{flex:1}:where(.gp-grid-filter-combination button){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-bg);color:var(--gp-grid-text-secondary);cursor:pointer;border-radius:3px;padding:4px 8px;font-family:inherit;font-size:10px}:where(.gp-grid-filter-combination button.active){background-color:var(--gp-grid-primary);border-color:var(--gp-grid-primary);color:#fff}.gp-grid-filter-add{width:100%}:where(.gp-grid-filter-add){border:1px dashed var(--gp-grid-border);color:var(--gp-grid-text-secondary);cursor:pointer;background-color:#0000;border-radius:4px;padding:6px;font-family:inherit;font-size:11px}:where(.gp-grid-filter-add:hover){background-color:var(--gp-grid-hover);border-color:var(--gp-grid-primary);color:var(--gp-grid-primary)}.gp-grid-filter-buttons{display:flex}:where(.gp-grid-filter-buttons){border-top:1px solid var(--gp-grid-border-light);gap:8px;padding-top:8px}.gp-grid-filter-btn-clear,.gp-grid-filter-btn-apply{flex:1}:where(.gp-grid-filter-btn-clear),:where(.gp-grid-filter-btn-apply){cursor:pointer;border-radius:4px;padding:8px 12px;font-family:inherit;font-size:12px}:where(.gp-grid-filter-btn-clear){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-bg);color:var(--gp-grid-text)}:where(.gp-grid-filter-btn-clear:hover){background-color:var(--gp-grid-hover)}:where(.gp-grid-filter-btn-apply){border:1px solid var(--gp-grid-primary);background-color:var(--gp-grid-primary);color:#fff}:where(.gp-grid-filter-btn-apply:hover){opacity:.9}.gp-grid-cell--row-drag-handle{touch-action:none}:where(.gp-grid-cell--row-drag-handle){cursor:grab}:where(.gp-grid-cell--row-drag-handle:active){cursor:grabbing}.gp-grid-row-drag-icon{justify-content:center;align-items:center;width:100%;height:100%;display:flex}:where(.gp-grid-row-drag-icon){color:var(--gp-grid-text-secondary)}.gp-grid-row-drag-icon svg{width:16px;height:16px}.gp-grid-row-drag-ghost{pointer-events:none;z-index:2000;box-sizing:border-box;position:fixed;overflow:hidden}:where(.gp-grid-row-drag-ghost){opacity:.8;background-color:var(--gp-grid-bg,#fff);border:2px solid var(--gp-grid-primary);border-radius:4px;box-shadow:0 4px 12px #00000026}.gp-grid-row-drop-indicator{z-index:1000;pointer-events:none;width:100%;height:3px;position:absolute;left:0}:where(.gp-grid-row-drop-indicator){background-color:var(--gp-grid-primary);border-radius:2px}
+.gp-grid-container{--gp-grid-bg:#fff;--gp-grid-bg-alt:#f8f9fa;--gp-grid-text:#212529;--gp-grid-text-secondary:#6c757d;--gp-grid-text-muted:#adb5bd;--gp-grid-border:#dee2e6;--gp-grid-border-light:#e9ecef;--gp-grid-header-bg:#f1f3f5;--gp-grid-header-text:#212529;--gp-grid-header-z-index:10;--gp-grid-primary:#228be6;--gp-grid-primary-light:#e7f5ff;--gp-grid-primary-border:#74c0fc;--gp-grid-hover:#f1f3f5;--gp-grid-filter-bg:#f8f9fa;--gp-grid-input-bg:#fff;--gp-grid-input-border:#ced4da;--gp-grid-error-bg:#fff5f5;--gp-grid-error-text:#c92a2a;--gp-grid-loading-bg:#fffffff2;--gp-grid-loading-text:#495057;--gp-grid-scrollbar-track:#f1f3f5;--gp-grid-scrollbar-thumb:#ced4da;--gp-grid-scrollbar-thumb-hover:#adb5bd}.gp-grid-container--dark{--gp-grid-bg:#1a1b1e;--gp-grid-bg-alt:#25262b;--gp-grid-text:#c1c2c5;--gp-grid-text-secondary:#909296;--gp-grid-text-muted:#5c5f66;--gp-grid-border:#373a40;--gp-grid-border-light:#2c2e33;--gp-grid-header-bg:#25262b;--gp-grid-header-text:#c1c2c5;--gp-grid-header-z-index:10;--gp-grid-primary:#339af0;--gp-grid-primary-light:#1c3d5a;--gp-grid-primary-border:#1c7ed6;--gp-grid-hover:#2c2e33;--gp-grid-filter-bg:#25262b;--gp-grid-input-bg:#1a1b1e;--gp-grid-input-border:#373a40;--gp-grid-error-bg:#2c1a1a;--gp-grid-error-text:#ff6b6b;--gp-grid-loading-bg:#1a1b1ef2;--gp-grid-loading-text:#c1c2c5;--gp-grid-scrollbar-track:#25262b;--gp-grid-scrollbar-thumb:#373a40;--gp-grid-scrollbar-thumb-hover:#4a4d52}.gp-grid-container{-webkit-user-select:none;user-select:none;outline:none}:where(.gp-grid-container){color:var(--gp-grid-text);background-color:var(--gp-grid-bg);border:1px solid var(--gp-grid-border);border-radius:6px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:13px;line-height:1.5}.gp-grid-container:focus{outline:none}:where(.gp-grid-container:focus){border-color:var(--gp-grid-primary)}.gp-grid-header{z-index:11;flex-shrink:0;position:sticky;top:0;left:0;overflow:hidden}:where(.gp-grid-header){background-color:var(--gp-grid-header-bg);border-bottom:1px solid var(--gp-grid-border)}.gp-grid-container .gp-grid-header-cell{box-sizing:border-box;user-select:none;touch-action:none;display:flex;position:absolute;top:0}:where(.gp-grid-header-cell){border-right:1px solid var(--gp-grid-border);letter-spacing:.5px;color:var(--gp-grid-header-text);cursor:pointer;background-color:#0000;align-items:center;padding:0 12px;font-size:12px;font-weight:600;transition:background-color .1s}:where(.gp-grid-header-cell:hover){background-color:var(--gp-grid-hover)}:where(.gp-grid-header-cell:active){background-color:var(--gp-grid-border-light)}.gp-grid-container .gp-grid-header-text{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}:where(.gp-grid-header-text){color:var(--gp-grid-header-text)}.gp-grid-header-icons{align-items:center;gap:4px;margin-left:auto;display:flex}.gp-grid-sort-arrows{flex-direction:row;align-items:center;gap:2px;margin-left:6px;display:flex}.gp-grid-sort-arrows-stack{flex-direction:column;align-items:center;gap:2px;display:flex}:where(.gp-grid-sort-arrow-up),:where(.gp-grid-sort-arrow-down){opacity:.35;color:var(--gp-grid-text);transition:opacity .15s,color .15s}:where(.gp-grid-sort-arrow-up.active),:where(.gp-grid-sort-arrow-down.active){opacity:1;color:var(--gp-grid-primary)}:where(.gp-grid-sort-index){color:var(--gp-grid-primary);font-size:9px;font-weight:600}.gp-grid-filter-icon{justify-content:center;align-items:center;width:20px;height:20px;display:flex}:where(.gp-grid-filter-icon){cursor:pointer;color:var(--gp-grid-text-secondary);border-radius:4px;margin-left:2px;transition:background-color .15s,color .15s}:where(.gp-grid-filter-icon:hover){background-color:var(--gp-grid-hover);color:var(--gp-grid-primary)}:where(.gp-grid-filter-icon.active){color:var(--gp-grid-primary);background-color:var(--gp-grid-primary-light)}@media (pointer:coarse) and (hover:none) and (width<=768px){.gp-grid-filter-icon{width:44px;min-width:44px;height:44px;min-height:44px}:where(.gp-grid-filter-icon){margin-left:0}.gp-grid-filter-icon svg{width:20px;height:20px}}.gp-grid-header--loading .gp-grid-header-cell{pointer-events:none}:where(.gp-grid-header--loading .gp-grid-header-cell){opacity:.6;cursor:default}.gp-grid-header-resize-handle{cursor:col-resize;z-index:10;touch-action:none;width:6px;height:100%;position:absolute;top:0;right:-3px}:where(.gp-grid-header-resize-handle:hover),:where(.gp-grid-header-resize-handle--active){background-color:var(--gp-grid-primary);opacity:.4}@media (pointer:coarse) and (hover:none) and (width<=768px){.gp-grid-header-resize-handle{width:24px;right:-12px}}.gp-grid-column-resize-line{z-index:1000;pointer-events:none;width:2px;height:100%;position:absolute;top:0}:where(.gp-grid-column-resize-line){background-color:var(--gp-grid-primary)}.gp-grid-column-move-ghost{pointer-events:none;z-index:2000;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;align-items:center;display:flex;position:fixed;overflow:hidden}:where(.gp-grid-column-move-ghost){opacity:.7;background-color:var(--gp-grid-header-bg);border:2px solid var(--gp-grid-primary);letter-spacing:.5px;color:var(--gp-grid-header-text);border-radius:4px;padding:0 12px;font-size:12px;font-weight:600;box-shadow:0 4px 12px #00000026}.gp-grid-column-drop-indicator{z-index:1000;pointer-events:none;width:3px;height:100%;position:absolute;top:0;left:0}:where(.gp-grid-column-drop-indicator){background-color:var(--gp-grid-primary);border-radius:2px}.gp-grid-rows-wrapper{z-index:1;will-change:transform;position:absolute;top:0;left:0}.gp-grid-row{position:absolute;top:0;left:0}:where(.gp-grid-row){background-color:var(--gp-grid-bg)}.gp-grid-cell{box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none;display:flex;position:absolute;top:0;overflow:hidden}.gp-grid-cell-content{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.gp-grid-cell--wrap{align-items:flex-start}.gp-grid-cell--wrap .gp-grid-cell-content{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}:where(.gp-grid-cell){cursor:cell;color:var(--gp-grid-text);border-right:1px solid var(--gp-grid-border-light);border-bottom:1px solid var(--gp-grid-border-light);background-color:#0000;align-items:center;padding:0 12px}.gp-grid-cell--active{z-index:5;outline:none}:where(.gp-grid-cell--active){background-color:var(--gp-grid-primary-light);border:2px solid var(--gp-grid-primary);padding:0 11px}:where(.gp-grid-cell--selected){background-color:var(--gp-grid-primary-light)}.gp-grid-cell--editing{z-index:10}:where(.gp-grid-cell--editing){background-color:var(--gp-grid-bg);border:2px solid var(--gp-grid-primary);padding:0}.gp-grid-fill-handle{z-index:11;pointer-events:auto;box-sizing:border-box;touch-action:none;width:8px;height:8px;position:absolute}:where(.gp-grid-fill-handle){background-color:var(--gp-grid-primary);border:2px solid var(--gp-grid-bg);cursor:crosshair;border-radius:1px}:where(.gp-grid-fill-handle:hover){transform:scale(1.2)}@media (pointer:coarse) and (hover:none) and (width<=768px){.gp-grid-fill-handle{width:24px;height:24px}:where(.gp-grid-fill-handle){border-width:3px;border-radius:3px}}:where(.gp-grid-cell.gp-grid-cell--fill-preview){background-color:var(--gp-grid-primary-light);border:1px dashed var(--gp-grid-primary)}.gp-grid-edit-input{width:100%;height:100%}:where(.gp-grid-edit-input){font-family:inherit;font-size:inherit;color:var(--gp-grid-text);background-color:#0000;border:none;padding:0 11px}.gp-grid-edit-input:focus{outline:none}.gp-grid-cell-peek{z-index:20;box-sizing:border-box;max-height:320px;position:absolute;overflow:auto}:where(.gp-grid-cell-peek){background-color:var(--gp-grid-bg);color:var(--gp-grid-text);border:2px solid var(--gp-grid-primary);font-family:inherit;font-size:inherit;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;-webkit-user-select:text;user-select:text;border-radius:3px;padding:8px 11px;line-height:1.4;box-shadow:0 4px 12px #00000026}.gp-grid-cell-peek .gp-grid-cell-content{white-space:inherit;text-overflow:clip;overflow:visible}.gp-grid-loading-anchor{z-index:900;pointer-events:none;height:0;position:sticky;top:0;left:0;overflow:visible}.gp-grid-loading-overlay{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}:where(.gp-grid-loading-overlay){background-color:var(--gp-grid-loading-overlay-bg,#fff6)}:where(.gp-grid-container--dark .gp-grid-loading-overlay){background-color:var(--gp-grid-loading-overlay-bg,#0000004d)}.gp-grid-loading{z-index:1000;pointer-events:auto;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:where(.gp-grid-loading){background-color:var(--gp-grid-loading-bg);color:var(--gp-grid-loading-text);border:1px solid var(--gp-grid-border);border-radius:6px;align-items:center;gap:10px;padding:12px 20px;font-size:13px;font-weight:500}.gp-grid-loading-spinner{width:16px;height:16px;animation:.7s linear infinite gp-grid-spin}:where(.gp-grid-loading-spinner){border:2px solid var(--gp-grid-border);border-top-color:var(--gp-grid-primary);border-radius:50%}@keyframes gp-grid-spin{to{transform:rotate(360deg)}}.gp-grid-error{z-index:1000;-webkit-user-select:text;user-select:text;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:where(.gp-grid-error){background-color:var(--gp-grid-error-bg);color:var(--gp-grid-error-text);border:1px solid var(--gp-grid-error-text);text-align:center;cursor:text;border-radius:6px;max-width:80%;padding:12px 20px;font-size:13px;font-weight:500}.gp-grid-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:where(.gp-grid-empty){color:var(--gp-grid-text-muted);text-align:center;font-size:14px}.gp-grid-container::-webkit-scrollbar{width:8px;height:8px}:where(.gp-grid-container)::-webkit-scrollbar-track{background-color:var(--gp-grid-scrollbar-track)}:where(.gp-grid-container)::-webkit-scrollbar-thumb{background-color:var(--gp-grid-scrollbar-thumb);border-radius:4px}:where(.gp-grid-container)::-webkit-scrollbar-thumb:hover{background-color:var(--gp-grid-scrollbar-thumb-hover)}:where(.gp-grid-container)::-webkit-scrollbar-corner{background-color:var(--gp-grid-scrollbar-track)}.gp-grid-filter-popup{flex-direction:column;max-width:min(360px,100vw - 16px);max-height:400px;display:flex}:where(.gp-grid-filter-popup){background-color:var(--gp-grid-bg);border:1px solid var(--gp-grid-border);border-radius:6px;font-size:13px;box-shadow:0 4px 12px #00000026}:where(.gp-grid-filter-header){border-bottom:1px solid var(--gp-grid-border-light);color:var(--gp-grid-header-text);padding:10px 12px;font-weight:600}.gp-grid-filter-content{flex-direction:column;min-height:0;display:flex;overflow-y:auto}:where(.gp-grid-filter-content){gap:10px;padding:10px 12px}.gp-grid-filter-mode-toggle{display:flex}:where(.gp-grid-filter-mode-toggle){gap:4px}.gp-grid-filter-mode-toggle button{flex:1}:where(.gp-grid-filter-mode-toggle button){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-bg);color:var(--gp-grid-text-secondary);cursor:pointer;border-radius:3px;padding:6px 10px;font-family:inherit;font-size:11px;transition:background-color .15s,color .15s}:where(.gp-grid-filter-mode-toggle button:hover){color:var(--gp-grid-text)}.gp-grid-filter-mode-toggle button.active{background-color:var(--gp-grid-primary);border-color:var(--gp-grid-primary);color:#fff}:where(.gp-grid-filter-info){color:var(--gp-grid-text-secondary);background-color:var(--gp-grid-bg-alt);border-radius:4px;padding:6px 8px;font-size:11px}.gp-grid-filter-search{box-sizing:border-box;width:100%;height:30px}:where(.gp-grid-filter-search){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-input-bg);color:var(--gp-grid-text);border-radius:4px;padding:0 10px;font-family:inherit;font-size:12px}:where(.gp-grid-filter-search:focus){border-color:var(--gp-grid-primary);outline:none}.gp-grid-filter-actions{display:flex}:where(.gp-grid-filter-actions){gap:8px}.gp-grid-filter-actions button{flex:1}:where(.gp-grid-filter-actions button){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-bg);color:var(--gp-grid-text);cursor:pointer;border-radius:3px;padding:4px 8px;font-family:inherit;font-size:11px}:where(.gp-grid-filter-actions button:hover:not(:disabled)){background-color:var(--gp-grid-hover)}:where(.gp-grid-filter-actions button:disabled){opacity:.5;cursor:not-allowed}.gp-grid-filter-list{flex-direction:column;max-height:200px;display:flex;overflow-y:auto}:where(.gp-grid-filter-list){border:1px solid var(--gp-grid-border-light);border-radius:4px;gap:4px;padding:6px}.gp-grid-filter-option{align-items:center;display:flex}:where(.gp-grid-filter-option){cursor:pointer;border-radius:3px;gap:8px;padding:4px 6px}:where(.gp-grid-filter-option:hover){background-color:var(--gp-grid-hover)}.gp-grid-filter-option input[type=checkbox]{margin:0}:where(.gp-grid-filter-option input[type=checkbox]){cursor:pointer}.gp-grid-filter-option span{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}:where(.gp-grid-filter-blank){color:var(--gp-grid-text-muted);font-style:italic}.gp-grid-filter-groups,.gp-grid-filter-group{flex-direction:column;display:flex}:where(.gp-grid-filter-groups){gap:8px}:where(.gp-grid-filter-group){border:1px solid var(--gp-grid-border-light);background-color:var(--gp-grid-bg-alt);border-radius:5px;gap:6px;padding:8px}.gp-grid-filter-group-actions{justify-content:flex-end;align-items:center;display:flex}:where(.gp-grid-filter-group-actions){gap:6px}:where(.gp-grid-filter-group-actions .gp-grid-filter-combination){flex:1;margin-bottom:0}:where(.gp-grid-filter-group-remove){margin-bottom:-2px}:where(.gp-grid-filter-add-group){margin-top:2px}.gp-grid-filter-condition{flex-direction:column;display:flex}:where(.gp-grid-filter-condition){gap:6px}.gp-grid-filter-row{align-items:center;display:flex}:where(.gp-grid-filter-row){gap:6px}.gp-grid-filter-row select{height:30px}:where(.gp-grid-filter-row select){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-input-bg);color:var(--gp-grid-text);cursor:pointer;border-radius:4px;padding:0 6px;font-family:inherit;font-size:12px}.gp-grid-filter-row input[type=number],.gp-grid-filter-row input[type=date],.gp-grid-filter-row input[type=text],.gp-grid-filter-text-input{box-sizing:border-box;flex:1;min-width:0;height:30px}:where(.gp-grid-filter-row input[type=number]),:where(.gp-grid-filter-row input[type=date]),:where(.gp-grid-filter-row input[type=text]),:where(.gp-grid-filter-text-input){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-input-bg);color:var(--gp-grid-text);border-radius:4px;padding:0 8px;font-family:inherit;font-size:12px}:where(.gp-grid-filter-row input:focus){border-color:var(--gp-grid-primary);outline:none}:where(.gp-grid-filter-to){color:var(--gp-grid-text-secondary);font-size:11px}.gp-grid-filter-remove{flex:none;justify-content:center;align-items:center;width:24px;height:24px;display:inline-flex}:where(.gp-grid-filter-remove){color:var(--gp-grid-text-muted);cursor:pointer;background-color:#0000;border:none;border-radius:3px;padding:0;font-size:16px;line-height:1}:where(.gp-grid-filter-remove:hover){background-color:var(--gp-grid-error-bg);color:var(--gp-grid-error-text)}.gp-grid-filter-combination{display:flex}:where(.gp-grid-filter-combination){gap:4px;margin-bottom:4px}.gp-grid-filter-combination button{flex:1}:where(.gp-grid-filter-combination button){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-bg);color:var(--gp-grid-text-secondary);cursor:pointer;border-radius:3px;padding:4px 8px;font-family:inherit;font-size:10px}.gp-grid-filter-combination button.active{background-color:var(--gp-grid-primary);border-color:var(--gp-grid-primary);color:#fff}.gp-grid-filter-content button:focus-visible,.gp-grid-filter-content select:focus-visible,.gp-grid-filter-content input:focus-visible{outline:2px solid var(--gp-grid-primary);outline-offset:2px}.gp-grid-filter-mode-toggle button:focus-visible{outline-offset:-2px}.gp-grid-filter-add{width:100%}:where(.gp-grid-filter-add){border:1px dashed var(--gp-grid-border);color:var(--gp-grid-text-secondary);cursor:pointer;background-color:#0000;border-radius:4px;padding:6px;font-family:inherit;font-size:11px}:where(.gp-grid-filter-add:hover){background-color:var(--gp-grid-hover);border-color:var(--gp-grid-primary);color:var(--gp-grid-primary)}.gp-grid-filter-buttons{display:flex}:where(.gp-grid-filter-buttons){border-top:1px solid var(--gp-grid-border-light);gap:8px;padding-top:8px}.gp-grid-filter-btn-clear,.gp-grid-filter-btn-apply{flex:1}:where(.gp-grid-filter-btn-clear),:where(.gp-grid-filter-btn-apply){cursor:pointer;border-radius:4px;padding:8px 12px;font-family:inherit;font-size:12px}:where(.gp-grid-filter-btn-clear){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-bg);color:var(--gp-grid-text)}:where(.gp-grid-filter-btn-clear:hover){background-color:var(--gp-grid-hover)}:where(.gp-grid-filter-btn-apply){border:1px solid var(--gp-grid-primary);background-color:var(--gp-grid-primary);color:#fff}:where(.gp-grid-filter-btn-apply:hover){opacity:.9}.gp-grid-cell--row-drag-handle{touch-action:none}:where(.gp-grid-cell--row-drag-handle){cursor:grab}:where(.gp-grid-cell--row-drag-handle:active){cursor:grabbing}.gp-grid-row-drag-icon{justify-content:center;align-items:center;width:100%;height:100%;display:flex}:where(.gp-grid-row-drag-icon){color:var(--gp-grid-text-secondary)}.gp-grid-row-drag-icon svg{width:16px;height:16px}.gp-grid-row-drag-ghost{pointer-events:none;z-index:2000;box-sizing:border-box;position:fixed;overflow:hidden}:where(.gp-grid-row-drag-ghost){opacity:.8;background-color:var(--gp-grid-bg,#fff);border:2px solid var(--gp-grid-primary);border-radius:4px;box-shadow:0 4px 12px #00000026}.gp-grid-row-drop-indicator{z-index:1000;pointer-events:none;width:100%;height:3px;position:absolute;left:0}:where(.gp-grid-row-drop-indicator){background-color:var(--gp-grid-primary);border-radius:2px}

package/fesm2022/gp-grid-angular.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, output, computed, TemplateRef, ChangeDetectionStrategy, Component, ViewChild, signal, effect, HostListener, inject, PLATFORM_ID, InjectionToken, Injectable } from '@angular/core';
 import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import { defaultGridLabels, getFieldValue, isCellSelected, isCellActive, formatCellValue, isCellInFillPreview, isCellEditing, buildCellClasses, labelsForSelectedValues, rawValuesForLabels, getTextOperatorOptions, getNumberOperatorOptions, formatLabel, groupDistinctValues, isBlankCellValue, calculateFilterPopupPosition, bindPeekSelectAll, calculateScaledColumnPositions, getTotalWidth, calculateFillHandlePosition, DataSourceOwner, AutoScrollDriver, PendingRowDragController, PendingCellTapController, TouchScrollController, InputEventAdapter, applyBatchInstructions, scrollCellIntoView, GridCore, resolveGridLabels, createMutableClientDataSource } from '@gp-grid/core';
-export { GridCore, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource } from '@gp-grid/core';
+export { GridCore, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource, isLegacyColumnFilterModel, normalizeColumnFilterModel } from '@gp-grid/core';
 
 const TEMPLATE$2 = `
   <div
@@ -463,158 +463,258 @@ const FILTER_POPUP_TEMPLATE = `
 
   <div [class]="'gp-grid-filter-content ' + (isNumberColumn() ? 'gp-grid-filter-number' : 'gp-grid-filter-text')">
   @if (isNumberColumn()) {
-      @for (cond of numberConditions; track $index; let i = $index) {
-        <div class="gp-grid-filter-condition">
-          @if (i > 0) {
-            <div class="gp-grid-filter-combination">
-              <button
-                type="button"
-                [class.active]="numberConditions[i - 1]?.nextOperator === 'and'"
-                (click)="setNumberNextOp(i - 1, 'and')">
-                {{ labels().and }}
-              </button>
-              <button
-                type="button"
-                [class.active]="numberConditions[i - 1]?.nextOperator === 'or'"
-                (click)="setNumberNextOp(i - 1, 'or')">
-                {{ labels().or }}
-              </button>
-            </div>
-          }
-          <div class="gp-grid-filter-row">
-            <select
-              [value]="cond.operator"
-              (change)="onNumberOperatorChange(i, $any($event.target).value)">
-              @for (op of numberOperators(); track op.value) {
-                <option [value]="op.value">{{ op.label }}</option>
-              }
-            </select>
-            @if (!isValueLessNumberOp(cond.operator)) {
-              <input
-                type="number"
-                [value]="cond.value"
-                (input)="cond.value = $any($event.target).value"
-                [placeholder]="labels().valuePlaceholder" />
-              @if (cond.operator === 'between') {
-                <span class="gp-grid-filter-to">{{ labels().betweenSeparator }}</span>
-                <input
-                  type="number"
-                  [value]="cond.valueTo"
-                  (input)="cond.valueTo = $any($event.target).value"
-                  [placeholder]="labels().valuePlaceholder" />
-              }
-            }
-            @if (numberConditions.length > 1) {
-              <button
-                type="button"
-                class="gp-grid-filter-remove"
-                (click)="removeNumberCondition(i)">{{ labels().removeCondition }}</button>
-            }
-          </div>
-        </div>
-      }
-      <button type="button" class="gp-grid-filter-add" (click)="addNumberCondition()">
-        {{ labels().addCondition }}
-      </button>
-  } @else {
-      @if (showValuesMode()) {
-        <div class="gp-grid-filter-mode-toggle">
+    <div class="gp-grid-filter-groups">
+      @if (numberGroups.length > 1) {
+        <div class="gp-grid-filter-combination">
           <button
             type="button"
-            [class.active]="filterMode === 'values'"
-            (click)="filterMode = 'values'">
-            {{ labels().valuesMode }}
+            [class.active]="groupCombination === 'and'"
+            [attr.aria-pressed]="groupCombination === 'and'"
+            (click)="setGroupCombination('and')">
+            {{ labels().and }}
           </button>
           <button
             type="button"
-            [class.active]="filterMode === 'condition'"
-            (click)="filterMode = 'condition'">
-            {{ labels().conditionMode }}
+            [class.active]="groupCombination === 'or'"
+            [attr.aria-pressed]="groupCombination === 'or'"
+            (click)="setGroupCombination('or')">
+            {{ labels().or }}
           </button>
         </div>
       }
-
-      @if (filterMode === 'values' && showValuesMode()) {
-        <input
-          class="gp-grid-filter-search"
-          type="text"
-          [value]="searchText"
-          (input)="searchText = $any($event.target).value"
-          [placeholder]="labels().searchPlaceholder" />
-        <div class="gp-grid-filter-actions">
-          <button type="button" (click)="selectAll()">{{ labels().selectAll }}</button>
-          <button type="button" (click)="deselectAll()">{{ labels().deselectAll }}</button>
-        </div>
-        <div class="gp-grid-filter-list">
-          @if (hasBlanks()) {
-            <label class="gp-grid-filter-option">
-              <input
-                type="checkbox"
-                [checked]="includeBlanks"
-                (change)="includeBlanks = $any($event.target).checked" />
-              <span class="gp-grid-filter-blank">{{ labels().blanks }}</span>
-            </label>
+      @for (group of numberGroups; track $index; let groupIndex = $index) {
+        <div class="gp-grid-filter-group">
+          @if (group.conditions.length > 1 || numberGroups.length > 1) {
+            <div class="gp-grid-filter-group-actions">
+              @if (group.conditions.length > 1) {
+                <div class="gp-grid-filter-combination">
+                  <button
+                    type="button"
+                    [class.active]="group.combination === 'and'"
+                    [attr.aria-pressed]="group.combination === 'and'"
+                    (click)="setNumberGroupCombination(groupIndex, 'and')">
+                    {{ labels().and }}
+                  </button>
+                  <button
+                    type="button"
+                    [class.active]="group.combination === 'or'"
+                    [attr.aria-pressed]="group.combination === 'or'"
+                    (click)="setNumberGroupCombination(groupIndex, 'or')">
+                    {{ labels().or }}
+                  </button>
+                </div>
+              }
+              @if (numberGroups.length > 1) {
+                <button
+                  type="button"
+                  class="gp-grid-filter-remove gp-grid-filter-group-remove"
+                  (click)="removeNumberGroup(groupIndex)">
+                  {{ labels().removeGroup }}
+                </button>
+              }
+            </div>
           }
-          @for (entry of filteredUniqueEntries(); track entry.label) {
-            <label class="gp-grid-filter-option">
-              <input
-                type="checkbox"
-                [checked]="selectedLabels.has(entry.label)"
-                (change)="toggleValue(entry.label, $any($event.target).checked)" />
-              <span>{{ entry.label }}</span>
-            </label>
+          @for (cond of group.conditions; track $index; let i = $index) {
+            <div class="gp-grid-filter-condition">
+              <div class="gp-grid-filter-row">
+                <select
+                  [value]="cond.operator"
+                  (change)="onNumberOperatorChange(groupIndex, i, $any($event.target).value)">
+                  @for (op of numberOperators(); track op.value) {
+                    <option [value]="op.value">{{ op.label }}</option>
+                  }
+                </select>
+                @if (!isValueLessNumberOp(cond.operator)) {
+                  <input
+                    type="number"
+                    [value]="cond.value"
+                    (input)="cond.value = $any($event.target).value"
+                    [placeholder]="labels().valuePlaceholder" />
+                  @if (cond.operator === 'between') {
+                    <span class="gp-grid-filter-to">{{ labels().betweenSeparator }}</span>
+                    <input
+                      type="number"
+                      [value]="cond.valueTo"
+                      (input)="cond.valueTo = $any($event.target).value"
+                      [placeholder]="labels().valuePlaceholder" />
+                  }
+                }
+                @if (group.conditions.length > 1) {
+                  <button
+                    type="button"
+                    class="gp-grid-filter-remove"
+                    (click)="removeNumberCondition(groupIndex, i)">
+                    {{ labels().removeCondition }}
+                  </button>
+                }
+              </div>
+            </div>
           }
+          <button
+            type="button"
+            class="gp-grid-filter-add"
+            (click)="addNumberCondition(groupIndex)">
+            {{ labels().addCondition }}
+          </button>
         </div>
       }
+      <button
+        type="button"
+        class="gp-grid-filter-add gp-grid-filter-add-group"
+        (click)="addNumberGroup()">
+        {{ labels().addGroup }}
+      </button>
+    </div>
+  } @else {
+    @if (showValuesMode()) {
+      <div class="gp-grid-filter-mode-toggle">
+        <button
+          type="button"
+          [class.active]="filterMode === 'values'"
+          [attr.aria-pressed]="filterMode === 'values'"
+          (click)="filterMode = 'values'">
+          {{ labels().valuesMode }}
+        </button>
+        <button
+          type="button"
+          [class.active]="filterMode === 'condition'"
+          [attr.aria-pressed]="filterMode === 'condition'"
+          (click)="filterMode = 'condition'">
+          {{ labels().conditionMode }}
+        </button>
+      </div>
+    }
 
-      @if (filterMode === 'condition') {
-        @for (cond of textConditions; track $index; let i = $index) {
-          <div class="gp-grid-filter-condition">
-            @if (i > 0) {
-              <div class="gp-grid-filter-combination">
-                <button
-                  type="button"
-                  [class.active]="textConditions[i - 1]?.nextOperator === 'and'"
-                  (click)="setTextNextOp(i - 1, 'and')">
-                  {{ labels().and }}
-                </button>
-                <button
-                  type="button"
-                  [class.active]="textConditions[i - 1]?.nextOperator === 'or'"
-                  (click)="setTextNextOp(i - 1, 'or')">
-                  {{ labels().or }}
-                </button>
+    @if (filterMode === 'values' && showValuesMode()) {
+      <input
+        class="gp-grid-filter-search"
+        type="text"
+        [value]="searchText"
+        (input)="searchText = $any($event.target).value"
+        [placeholder]="labels().searchPlaceholder" />
+      <div class="gp-grid-filter-actions">
+        <button type="button" (click)="selectAll()">{{ labels().selectAll }}</button>
+        <button type="button" (click)="deselectAll()">{{ labels().deselectAll }}</button>
+      </div>
+      <div class="gp-grid-filter-list">
+        @if (hasBlanks()) {
+          <label class="gp-grid-filter-option">
+            <input
+              type="checkbox"
+              [checked]="includeBlanks"
+              (change)="includeBlanks = $any($event.target).checked" />
+            <span class="gp-grid-filter-blank">{{ labels().blanks }}</span>
+          </label>
+        }
+        @for (entry of filteredUniqueEntries(); track entry.label) {
+          <label class="gp-grid-filter-option">
+            <input
+              type="checkbox"
+              [checked]="selectedLabels.has(entry.label)"
+              (change)="toggleValue(entry.label, $any($event.target).checked)" />
+            <span>{{ entry.label }}</span>
+          </label>
+        }
+      </div>
+    }
+
+    @if (filterMode === 'condition') {
+      <div class="gp-grid-filter-groups">
+        @if (textGroups.length > 1) {
+          <div class="gp-grid-filter-combination">
+            <button
+              type="button"
+              [class.active]="groupCombination === 'and'"
+              [attr.aria-pressed]="groupCombination === 'and'"
+              (click)="setGroupCombination('and')">
+              {{ labels().and }}
+            </button>
+            <button
+              type="button"
+              [class.active]="groupCombination === 'or'"
+              [attr.aria-pressed]="groupCombination === 'or'"
+              (click)="setGroupCombination('or')">
+              {{ labels().or }}
+            </button>
+          </div>
+        }
+        @for (group of textGroups; track $index; let groupIndex = $index) {
+          <div class="gp-grid-filter-group">
+            @if (group.conditions.length > 1 || textGroups.length > 1) {
+              <div class="gp-grid-filter-group-actions">
+                @if (group.conditions.length > 1) {
+                  <div class="gp-grid-filter-combination">
+                    <button
+                      type="button"
+                      [class.active]="group.combination === 'and'"
+                      [attr.aria-pressed]="group.combination === 'and'"
+                      (click)="setTextGroupCombination(groupIndex, 'and')">
+                      {{ labels().and }}
+                    </button>
+                    <button
+                      type="button"
+                      [class.active]="group.combination === 'or'"
+                      [attr.aria-pressed]="group.combination === 'or'"
+                      (click)="setTextGroupCombination(groupIndex, 'or')">
+                      {{ labels().or }}
+                    </button>
+                  </div>
+                }
+                @if (textGroups.length > 1) {
+                  <button
+                    type="button"
+                    class="gp-grid-filter-remove gp-grid-filter-group-remove"
+                    (click)="removeTextGroup(groupIndex)">
+                    {{ labels().removeGroup }}
+                  </button>
+                }
               </div>
             }
-            <div class="gp-grid-filter-row">
-              <select
-                [value]="cond.operator"
-                (change)="onTextOperatorChange(i, $any($event.target).value)">
-                @for (op of textOperators(); track op.value) {
-                  <option [value]="op.value">{{ op.label }}</option>
-                }
-              </select>
-              @if (!isValueLessTextOp(cond.operator)) {
-                <input
-                  class="gp-grid-filter-text-input"
-                  type="text"
-                  [value]="cond.value"
-                  (input)="cond.value = $any($event.target).value"
-                  [placeholder]="labels().valuePlaceholder" />
-              }
-              @if (textConditions.length > 1) {
-                <button
-                  type="button"
-                  class="gp-grid-filter-remove"
-                  (click)="removeTextCondition(i)">{{ labels().removeCondition }}</button>
-              }
-            </div>
+            @for (cond of group.conditions; track $index; let i = $index) {
+              <div class="gp-grid-filter-condition">
+                <div class="gp-grid-filter-row">
+                  <select
+                    [value]="cond.operator"
+                    (change)="onTextOperatorChange(groupIndex, i, $any($event.target).value)">
+                    @for (op of textOperators(); track op.value) {
+                      <option [value]="op.value">{{ op.label }}</option>
+                    }
+                  </select>
+                  @if (!isValueLessTextOp(cond.operator)) {
+                    <input
+                      class="gp-grid-filter-text-input"
+                      type="text"
+                      [value]="cond.value"
+                      (input)="cond.value = $any($event.target).value"
+                      [placeholder]="labels().valuePlaceholder" />
+                  }
+                  @if (group.conditions.length > 1) {
+                    <button
+                      type="button"
+                      class="gp-grid-filter-remove"
+                      (click)="removeTextCondition(groupIndex, i)">
+                      {{ labels().removeCondition }}
+                    </button>
+                  }
+                </div>
+              </div>
+            }
+            <button
+              type="button"
+              class="gp-grid-filter-add"
+              (click)="addTextCondition(groupIndex)">
+              {{ labels().addCondition }}
+            </button>
           </div>
         }
-        <button type="button" class="gp-grid-filter-add" (click)="addTextCondition()">
-          {{ labels().addCondition }}
+        <button
+          type="button"
+          class="gp-grid-filter-add gp-grid-filter-add-group"
+          (click)="addTextGroup()">
+          {{ labels().addGroup }}
         </button>
-      }
+      </div>
+    }
   }
 
     <div class="gp-grid-filter-buttons">
@@ -637,131 +737,151 @@ const isValueLessNumberOp = (operator) => VALUE_LESS_NUMBER_OPERATORS.includes(o
 const defaultTextCondition = () => ({
     operator: 'contains',
     value: '',
-    nextOperator: 'and',
 });
 const defaultNumberCondition = () => ({
     operator: '=',
     value: '',
     valueTo: '',
-    nextOperator: 'and',
+});
+const defaultTextGroup = () => ({
+    conditions: [defaultTextCondition()],
+    combination: 'and',
+});
+const defaultNumberGroup = () => ({
+    conditions: [defaultNumberCondition()],
+    combination: 'and',
+});
+const defaultTextState = (entries) => ({
+    filterMode: 'values',
+    selectedLabels: new Set(entries.map(entry => entry.label)),
+    includeBlanks: true,
+    textGroups: [defaultTextGroup()],
+    combination: 'and',
 });
 const initTextState = (filter, entries) => {
     if (!filter)
         return defaultTextState(entries);
-    const textConds = filter.conditions.filter((c) => c.type === 'text');
-    if (textConds.length === 0)
-        return defaultTextState(entries);
-    const firstCond = textConds[0];
-    if (firstCond?.selectedValues !== undefined) {
+    const firstCondition = filter.groups[0]?.conditions[0];
+    if (firstCondition?.type === 'text' && firstCondition.selectedValues !== undefined) {
         return {
             filterMode: 'values',
-            selectedLabels: labelsForSelectedValues(entries, firstCond.selectedValues),
-            includeBlanks: firstCond.includeBlank ?? true,
-            textConditions: [defaultTextCondition()],
+            selectedLabels: labelsForSelectedValues(entries, firstCondition.selectedValues),
+            includeBlanks: firstCondition.includeBlank ?? true,
+            textGroups: [defaultTextGroup()],
+            combination: 'and',
         };
     }
+    const textGroups = filter.groups.flatMap((group) => {
+        const conditions = group.conditions.flatMap((condition) => {
+            if (condition.type !== 'text')
+                return [];
+            return [{ operator: condition.operator, value: condition.value ?? '' }];
+        });
+        if (conditions.length === 0)
+            return [];
+        return [{ conditions, combination: group.combination }];
+    });
+    if (textGroups.length === 0)
+        return defaultTextState(entries);
     return {
         filterMode: 'condition',
-        selectedLabels: new Set(entries.map(e => e.label)),
+        selectedLabels: new Set(entries.map(entry => entry.label)),
         includeBlanks: true,
-        textConditions: textConds.map((c, i) => ({
-            operator: c.operator,
-            value: c.value ?? '',
-            nextOperator: textConds[i]?.nextOperator ?? 'and',
-        })),
+        textGroups,
+        combination: filter.combination,
     };
 };
-const defaultTextState = (entries) => ({
-    filterMode: 'values',
-    selectedLabels: new Set(entries.map(e => e.label)),
-    includeBlanks: true,
-    textConditions: [defaultTextCondition()],
-});
-const initNumberConditions = (filter) => {
-    if (!filter)
-        return [defaultNumberCondition()];
-    const numConds = filter.conditions.filter((c) => c.type === 'number');
-    if (numConds.length === 0)
-        return [defaultNumberCondition()];
-    return numConds.map((c, i) => ({
-        operator: c.operator,
-        value: c.value !== undefined ? String(c.value) : '',
-        valueTo: c.valueTo !== undefined ? String(c.valueTo) : '',
-        nextOperator: numConds[i]?.nextOperator ?? 'and',
-    }));
+const initNumberState = (filter) => {
+    if (!filter) {
+        return { numberGroups: [defaultNumberGroup()], combination: 'and' };
+    }
+    const numberGroups = filter.groups.flatMap((group) => {
+        const conditions = group.conditions.flatMap((condition) => {
+            if (condition.type !== 'number')
+                return [];
+            return [{
+                    operator: condition.operator,
+                    value: condition.value !== undefined ? String(condition.value) : '',
+                    valueTo: condition.valueTo !== undefined ? String(condition.valueTo) : '',
+                }];
+        });
+        if (conditions.length === 0)
+            return [];
+        return [{ conditions, combination: group.combination }];
+    });
+    if (numberGroups.length === 0) {
+        return { numberGroups: [defaultNumberGroup()], combination: 'and' };
+    }
+    return { numberGroups, combination: filter.combination };
 };
 const buildTextFilter = (input) => {
-    if (input.filterMode === 'values') {
+    if (input.filterMode === 'values')
         return buildValuesFilter(input);
-    }
-    return buildConditionTextFilter(input.textConditions);
+    const groups = buildTextGroups(input.textGroups);
+    if (groups.length === 0)
+        return null;
+    return { groups, combination: input.combination };
 };
 const buildValuesFilter = (input) => {
-    const allSelected = input.entries.every(e => input.selectedLabels.has(e.label));
+    const allSelected = input.entries.every(entry => input.selectedLabels.has(entry.label));
     if (allSelected && input.includeBlanks)
         return null;
     return {
-        conditions: [{
-                type: 'text',
-                operator: 'equals',
-                selectedValues: rawValuesForLabels(input.entries, input.selectedLabels),
-                includeBlank: input.includeBlanks,
+        groups: [{
+                conditions: [{
+                        type: 'text',
+                        operator: 'equals',
+                        selectedValues: rawValuesForLabels(input.entries, input.selectedLabels),
+                        includeBlank: input.includeBlanks,
+                    }],
+                combination: 'and',
             }],
-        combination: 'or',
+        combination: 'and',
     };
 };
-const buildConditionTextFilter = (textConditions) => {
+const buildTextGroups = (sourceGroups) => sourceGroups.flatMap((group) => {
     const conditions = [];
-    for (let i = 0; i < textConditions.length; i++) {
-        const cond = textConditions[i];
-        if (!cond)
-            continue;
-        if (!isValueLessTextOp(cond.operator) && !cond.value)
+    for (const condition of group.conditions) {
+        if (!isValueLessTextOp(condition.operator) && !condition.value)
             continue;
-        const out = {
+        const builtCondition = {
             type: 'text',
-            operator: cond.operator,
+            operator: condition.operator,
         };
-        if (!isValueLessTextOp(cond.operator))
-            out.value = cond.value;
-        linkNextOperator(conditions, i, textConditions);
-        conditions.push(out);
+        if (!isValueLessTextOp(condition.operator)) {
+            builtCondition.value = condition.value;
+        }
+        conditions.push(builtCondition);
     }
     if (conditions.length === 0)
-        return null;
-    return { conditions, combination: textConditions[0]?.nextOperator ?? 'and' };
-};
-const buildNumberFilter = (numberConditions) => {
-    const conditions = [];
-    for (let i = 0; i < numberConditions.length; i++) {
-        const cond = numberConditions[i];
-        if (!cond)
-            continue;
-        if (!isValueLessNumberOp(cond.operator) && !cond.value)
-            continue;
-        const out = {
-            type: 'number',
-            operator: cond.operator,
-        };
-        if (!isValueLessNumberOp(cond.operator)) {
-            out.value = parseFloat(cond.value);
-            if (cond.operator === 'between' && cond.valueTo) {
-                out.valueTo = parseFloat(cond.valueTo);
+        return [];
+    return [{ conditions, combination: group.combination }];
+});
+const buildNumberFilter = (numberGroups, combination) => {
+    const groups = numberGroups.flatMap((group) => {
+        const conditions = [];
+        for (const condition of group.conditions) {
+            if (!isValueLessNumberOp(condition.operator) && !condition.value)
+                continue;
+            const builtCondition = {
+                type: 'number',
+                operator: condition.operator,
+            };
+            if (!isValueLessNumberOp(condition.operator)) {
+                builtCondition.value = Number.parseFloat(condition.value);
+                if (condition.operator === 'between' && condition.valueTo) {
+                    builtCondition.valueTo = Number.parseFloat(condition.valueTo);
+                }
             }
+            conditions.push(builtCondition);
         }
-        linkNextOperator(conditions, i, numberConditions);
-        conditions.push(out);
-    }
-    if (conditions.length === 0)
+        if (conditions.length === 0)
+            return [];
+        return [{ conditions, combination: group.combination }];
+    });
+    if (groups.length === 0)
         return null;
-    return { conditions, combination: numberConditions[0]?.nextOperator ?? 'and' };
-};
-const linkNextOperator = (built, currentIndex, source) => {
-    const prev = built[built.length - 1];
-    if (prev === undefined || currentIndex === 0)
-        return;
-    const prevSource = source[currentIndex - 1];
-    prev.nextOperator = prevSource?.nextOperator ?? 'and';
+    return { groups, combination };
 };
 const resolveColId = (column) => column.colId ?? column.field;
 const isNumberColumn = (column) => column.cellDataType === 'number';
@@ -785,8 +905,9 @@ class FilterPopupComponent {
     // Ticked display labels; raw values are resolved on apply (buildTextFilter).
     selectedLabels = new Set();
     includeBlanks = true;
-    textConditions = [defaultTextCondition()];
-    numberConditions = [defaultNumberCondition()];
+    textGroups = [defaultTextGroup()];
+    numberGroups = [defaultNumberGroup()];
+    groupCombination = 'and';
     textOperators() {
         return getTextOperatorOptions(this.labels());
     }
@@ -872,29 +993,52 @@ class FilterPopupComponent {
         this.includeBlanks = false;
         this.selectedLabels.clear();
     }
-    onTextOperatorChange(index, value) {
-        setField(this.textConditions, index, 'operator', value);
+    onTextOperatorChange(groupIndex, index, value) {
+        const group = this.textGroups[groupIndex];
+        if (group)
+            setField(group.conditions, index, 'operator', value);
+    }
+    onNumberOperatorChange(groupIndex, index, value) {
+        const group = this.numberGroups[groupIndex];
+        if (group)
+            setField(group.conditions, index, 'operator', value);
     }
-    onNumberOperatorChange(index, value) {
-        setField(this.numberConditions, index, 'operator', value);
+    addTextCondition(groupIndex) {
+        this.textGroups[groupIndex]?.conditions.push(defaultTextCondition());
     }
-    addTextCondition() {
-        this.textConditions.push(defaultTextCondition());
+    addNumberCondition(groupIndex) {
+        this.numberGroups[groupIndex]?.conditions.push(defaultNumberCondition());
     }
-    addNumberCondition() {
-        this.numberConditions.push(defaultNumberCondition());
+    removeTextCondition(groupIndex, index) {
+        this.textGroups[groupIndex]?.conditions.splice(index, 1);
     }
-    removeTextCondition(index) {
-        this.textConditions.splice(index, 1);
+    removeNumberCondition(groupIndex, index) {
+        this.numberGroups[groupIndex]?.conditions.splice(index, 1);
     }
-    removeNumberCondition(index) {
-        this.numberConditions.splice(index, 1);
+    addTextGroup() {
+        this.textGroups.push(defaultTextGroup());
     }
-    setTextNextOp(index, value) {
-        setField(this.textConditions, index, 'nextOperator', value);
+    addNumberGroup() {
+        this.numberGroups.push(defaultNumberGroup());
     }
-    setNumberNextOp(index, value) {
-        setField(this.numberConditions, index, 'nextOperator', value);
+    removeTextGroup(groupIndex) {
+        this.textGroups.splice(groupIndex, 1);
+    }
+    removeNumberGroup(groupIndex) {
+        this.numberGroups.splice(groupIndex, 1);
+    }
+    setTextGroupCombination(groupIndex, value) {
+        const group = this.textGroups[groupIndex];
+        if (group)
+            group.combination = value;
+    }
+    setNumberGroupCombination(groupIndex, value) {
+        const group = this.numberGroups[groupIndex];
+        if (group)
+            group.combination = value;
+    }
+    setGroupCombination(value) {
+        this.groupCombination = value;
     }
     handleApply() {
         this.apply.emit({
@@ -906,27 +1050,32 @@ class FilterPopupComponent {
         this.apply.emit({ colId: resolveColId(this.column()), filter: null });
     }
     buildFilter() {
-        if (this.isNumberColumn())
-            return buildNumberFilter(this.numberConditions);
+        if (this.isNumberColumn()) {
+            return buildNumberFilter(this.numberGroups, this.groupCombination);
+        }
         return buildTextFilter({
             filterMode: this.filterMode,
             entries: this.uniqueEntries(),
             selectedLabels: this.selectedLabels,
             includeBlanks: this.includeBlanks,
-            textConditions: this.textConditions,
+            textGroups: this.textGroups,
+            combination: this.groupCombination,
         });
     }
     initFromCurrentFilter() {
         const filter = this.currentFilter();
         if (this.isNumberColumn()) {
-            this.numberConditions = initNumberConditions(filter);
+            const state = initNumberState(filter);
+            this.numberGroups = state.numberGroups;
+            this.groupCombination = state.combination;
             return;
         }
         const state = initTextState(filter, this.uniqueEntries());
         this.filterMode = state.filterMode;
         this.selectedLabels = state.selectedLabels;
         this.includeBlanks = state.includeBlanks;
-        this.textConditions = state.textConditions;
+        this.textGroups = state.textGroups;
+        this.groupCombination = state.combination;
     }
     updatePosition() {
         if (!this.popupEl?.nativeElement)
@@ -955,7 +1104,7 @@ class FilterPopupComponent {
         });
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FilterPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FilterPopupComponent, isStandalone: true, selector: "gp-grid-filter-popup", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, distinctValues: { classPropertyName: "distinctValues", publicName: "distinctValues", isSignal: true, isRequired: true, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", close: "close" }, host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "popupEl", first: true, predicate: ["popupEl"], descendants: true }], ngImport: i0, template: "\n<div\n  #popupEl\n  class=\"gp-grid-filter-popup\"\n  [style.position]=\"'fixed'\"\n  [style.zIndex]=\"10000\"\n  [style.top.px]=\"popupTop()\"\n  [style.left.px]=\"popupLeft()\"\n  [style.minWidth.px]=\"popupMinWidth()\"\n  [style.visibility]=\"positioned() ? 'visible' : 'hidden'\"\n  (keydown.escape)=\"close.emit()\"\n  (click)=\"$event.stopPropagation()\">\n\n  <div class=\"gp-grid-filter-header\">\n    {{ filterTitle() }}\n  </div>\n\n  <div [class]=\"'gp-grid-filter-content ' + (isNumberColumn() ? 'gp-grid-filter-number' : 'gp-grid-filter-text')\">\n  @if (isNumberColumn()) {\n      @for (cond of numberConditions; track $index; let i = $index) {\n        <div class=\"gp-grid-filter-condition\">\n          @if (i > 0) {\n            <div class=\"gp-grid-filter-combination\">\n              <button\n                type=\"button\"\n                [class.active]=\"numberConditions[i - 1]?.nextOperator === 'and'\"\n                (click)=\"setNumberNextOp(i - 1, 'and')\">\n                {{ labels().and }}\n              </button>\n              <button\n                type=\"button\"\n                [class.active]=\"numberConditions[i - 1]?.nextOperator === 'or'\"\n                (click)=\"setNumberNextOp(i - 1, 'or')\">\n                {{ labels().or }}\n              </button>\n            </div>\n          }\n          <div class=\"gp-grid-filter-row\">\n            <select\n              [value]=\"cond.operator\"\n              (change)=\"onNumberOperatorChange(i, $any($event.target).value)\">\n              @for (op of numberOperators(); track op.value) {\n                <option [value]=\"op.value\">{{ op.label }}</option>\n              }\n            </select>\n            @if (!isValueLessNumberOp(cond.operator)) {\n              <input\n                type=\"number\"\n                [value]=\"cond.value\"\n                (input)=\"cond.value = $any($event.target).value\"\n                [placeholder]=\"labels().valuePlaceholder\" />\n              @if (cond.operator === 'between') {\n                <span class=\"gp-grid-filter-to\">{{ labels().betweenSeparator }}</span>\n                <input\n                  type=\"number\"\n                  [value]=\"cond.valueTo\"\n                  (input)=\"cond.valueTo = $any($event.target).value\"\n                  [placeholder]=\"labels().valuePlaceholder\" />\n              }\n            }\n            @if (numberConditions.length > 1) {\n              <button\n                type=\"button\"\n                class=\"gp-grid-filter-remove\"\n                (click)=\"removeNumberCondition(i)\">{{ labels().removeCondition }}</button>\n            }\n          </div>\n        </div>\n      }\n      <button type=\"button\" class=\"gp-grid-filter-add\" (click)=\"addNumberCondition()\">\n        {{ labels().addCondition }}\n      </button>\n  } @else {\n      @if (showValuesMode()) {\n        <div class=\"gp-grid-filter-mode-toggle\">\n          <button\n            type=\"button\"\n            [class.active]=\"filterMode === 'values'\"\n            (click)=\"filterMode = 'values'\">\n            {{ labels().valuesMode }}\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterMode === 'condition'\"\n            (click)=\"filterMode = 'condition'\">\n            {{ labels().conditionMode }}\n          </button>\n        </div>\n      }\n\n      @if (filterMode === 'values' && showValuesMode()) {\n        <input\n          class=\"gp-grid-filter-search\"\n          type=\"text\"\n          [value]=\"searchText\"\n          (input)=\"searchText = $any($event.target).value\"\n          [placeholder]=\"labels().searchPlaceholder\" />\n        <div class=\"gp-grid-filter-actions\">\n          <button type=\"button\" (click)=\"selectAll()\">{{ labels().selectAll }}</button>\n          <button type=\"button\" (click)=\"deselectAll()\">{{ labels().deselectAll }}</button>\n        </div>\n        <div class=\"gp-grid-filter-list\">\n          @if (hasBlanks()) {\n            <label class=\"gp-grid-filter-option\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"includeBlanks\"\n                (change)=\"includeBlanks = $any($event.target).checked\" />\n              <span class=\"gp-grid-filter-blank\">{{ labels().blanks }}</span>\n            </label>\n          }\n          @for (entry of filteredUniqueEntries(); track entry.label) {\n            <label class=\"gp-grid-filter-option\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedLabels.has(entry.label)\"\n                (change)=\"toggleValue(entry.label, $any($event.target).checked)\" />\n              <span>{{ entry.label }}</span>\n            </label>\n          }\n        </div>\n      }\n\n      @if (filterMode === 'condition') {\n        @for (cond of textConditions; track $index; let i = $index) {\n          <div class=\"gp-grid-filter-condition\">\n            @if (i > 0) {\n              <div class=\"gp-grid-filter-combination\">\n                <button\n                  type=\"button\"\n                  [class.active]=\"textConditions[i - 1]?.nextOperator === 'and'\"\n                  (click)=\"setTextNextOp(i - 1, 'and')\">\n                  {{ labels().and }}\n                </button>\n                <button\n                  type=\"button\"\n                  [class.active]=\"textConditions[i - 1]?.nextOperator === 'or'\"\n                  (click)=\"setTextNextOp(i - 1, 'or')\">\n                  {{ labels().or }}\n                </button>\n              </div>\n            }\n            <div class=\"gp-grid-filter-row\">\n              <select\n                [value]=\"cond.operator\"\n                (change)=\"onTextOperatorChange(i, $any($event.target).value)\">\n                @for (op of textOperators(); track op.value) {\n                  <option [value]=\"op.value\">{{ op.label }}</option>\n                }\n              </select>\n              @if (!isValueLessTextOp(cond.operator)) {\n                <input\n                  class=\"gp-grid-filter-text-input\"\n                  type=\"text\"\n                  [value]=\"cond.value\"\n                  (input)=\"cond.value = $any($event.target).value\"\n                  [placeholder]=\"labels().valuePlaceholder\" />\n              }\n              @if (textConditions.length > 1) {\n                <button\n                  type=\"button\"\n                  class=\"gp-grid-filter-remove\"\n                  (click)=\"removeTextCondition(i)\">{{ labels().removeCondition }}</button>\n              }\n            </div>\n          </div>\n        }\n        <button type=\"button\" class=\"gp-grid-filter-add\" (click)=\"addTextCondition()\">\n          {{ labels().addCondition }}\n        </button>\n      }\n  }\n\n    <div class=\"gp-grid-filter-buttons\">\n      <button type=\"button\" class=\"gp-grid-filter-btn-clear\" (click)=\"handleClear()\">\n        {{ labels().clear }}\n      </button>\n      <button type=\"button\" class=\"gp-grid-filter-btn-apply\" (click)=\"handleApply()\">\n        {{ labels().apply }}\n      </button>\n    </div>\n  </div>\n</div>\n", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FilterPopupComponent, isStandalone: true, selector: "gp-grid-filter-popup", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, distinctValues: { classPropertyName: "distinctValues", publicName: "distinctValues", isSignal: true, isRequired: true, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", close: "close" }, host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "popupEl", first: true, predicate: ["popupEl"], descendants: true }], ngImport: i0, template: "\n<div\n  #popupEl\n  class=\"gp-grid-filter-popup\"\n  [style.position]=\"'fixed'\"\n  [style.zIndex]=\"10000\"\n  [style.top.px]=\"popupTop()\"\n  [style.left.px]=\"popupLeft()\"\n  [style.minWidth.px]=\"popupMinWidth()\"\n  [style.visibility]=\"positioned() ? 'visible' : 'hidden'\"\n  (keydown.escape)=\"close.emit()\"\n  (click)=\"$event.stopPropagation()\">\n\n  <div class=\"gp-grid-filter-header\">\n    {{ filterTitle() }}\n  </div>\n\n  <div [class]=\"'gp-grid-filter-content ' + (isNumberColumn() ? 'gp-grid-filter-number' : 'gp-grid-filter-text')\">\n  @if (isNumberColumn()) {\n    <div class=\"gp-grid-filter-groups\">\n      @if (numberGroups.length > 1) {\n        <div class=\"gp-grid-filter-combination\">\n          <button\n            type=\"button\"\n            [class.active]=\"groupCombination === 'and'\"\n            [attr.aria-pressed]=\"groupCombination === 'and'\"\n            (click)=\"setGroupCombination('and')\">\n            {{ labels().and }}\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"groupCombination === 'or'\"\n            [attr.aria-pressed]=\"groupCombination === 'or'\"\n            (click)=\"setGroupCombination('or')\">\n            {{ labels().or }}\n          </button>\n        </div>\n      }\n      @for (group of numberGroups; track $index; let groupIndex = $index) {\n        <div class=\"gp-grid-filter-group\">\n          @if (group.conditions.length > 1 || numberGroups.length > 1) {\n            <div class=\"gp-grid-filter-group-actions\">\n              @if (group.conditions.length > 1) {\n                <div class=\"gp-grid-filter-combination\">\n                  <button\n                    type=\"button\"\n                    [class.active]=\"group.combination === 'and'\"\n                    [attr.aria-pressed]=\"group.combination === 'and'\"\n                    (click)=\"setNumberGroupCombination(groupIndex, 'and')\">\n                    {{ labels().and }}\n                  </button>\n                  <button\n                    type=\"button\"\n                    [class.active]=\"group.combination === 'or'\"\n                    [attr.aria-pressed]=\"group.combination === 'or'\"\n                    (click)=\"setNumberGroupCombination(groupIndex, 'or')\">\n                    {{ labels().or }}\n                  </button>\n                </div>\n              }\n              @if (numberGroups.length > 1) {\n                <button\n                  type=\"button\"\n                  class=\"gp-grid-filter-remove gp-grid-filter-group-remove\"\n                  (click)=\"removeNumberGroup(groupIndex)\">\n                  {{ labels().removeGroup }}\n                </button>\n              }\n            </div>\n          }\n          @for (cond of group.conditions; track $index; let i = $index) {\n            <div class=\"gp-grid-filter-condition\">\n              <div class=\"gp-grid-filter-row\">\n                <select\n                  [value]=\"cond.operator\"\n                  (change)=\"onNumberOperatorChange(groupIndex, i, $any($event.target).value)\">\n                  @for (op of numberOperators(); track op.value) {\n                    <option [value]=\"op.value\">{{ op.label }}</option>\n                  }\n                </select>\n                @if (!isValueLessNumberOp(cond.operator)) {\n                  <input\n                    type=\"number\"\n                    [value]=\"cond.value\"\n                    (input)=\"cond.value = $any($event.target).value\"\n                    [placeholder]=\"labels().valuePlaceholder\" />\n                  @if (cond.operator === 'between') {\n                    <span class=\"gp-grid-filter-to\">{{ labels().betweenSeparator }}</span>\n                    <input\n                      type=\"number\"\n                      [value]=\"cond.valueTo\"\n                      (input)=\"cond.valueTo = $any($event.target).value\"\n                      [placeholder]=\"labels().valuePlaceholder\" />\n                  }\n                }\n                @if (group.conditions.length > 1) {\n                  <button\n                    type=\"button\"\n                    class=\"gp-grid-filter-remove\"\n                    (click)=\"removeNumberCondition(groupIndex, i)\">\n                    {{ labels().removeCondition }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n          <button\n            type=\"button\"\n            class=\"gp-grid-filter-add\"\n            (click)=\"addNumberCondition(groupIndex)\">\n            {{ labels().addCondition }}\n          </button>\n        </div>\n      }\n      <button\n        type=\"button\"\n        class=\"gp-grid-filter-add gp-grid-filter-add-group\"\n        (click)=\"addNumberGroup()\">\n        {{ labels().addGroup }}\n      </button>\n    </div>\n  } @else {\n    @if (showValuesMode()) {\n      <div class=\"gp-grid-filter-mode-toggle\">\n        <button\n          type=\"button\"\n          [class.active]=\"filterMode === 'values'\"\n          [attr.aria-pressed]=\"filterMode === 'values'\"\n          (click)=\"filterMode = 'values'\">\n          {{ labels().valuesMode }}\n        </button>\n        <button\n          type=\"button\"\n          [class.active]=\"filterMode === 'condition'\"\n          [attr.aria-pressed]=\"filterMode === 'condition'\"\n          (click)=\"filterMode = 'condition'\">\n          {{ labels().conditionMode }}\n        </button>\n      </div>\n    }\n\n    @if (filterMode === 'values' && showValuesMode()) {\n      <input\n        class=\"gp-grid-filter-search\"\n        type=\"text\"\n        [value]=\"searchText\"\n        (input)=\"searchText = $any($event.target).value\"\n        [placeholder]=\"labels().searchPlaceholder\" />\n      <div class=\"gp-grid-filter-actions\">\n        <button type=\"button\" (click)=\"selectAll()\">{{ labels().selectAll }}</button>\n        <button type=\"button\" (click)=\"deselectAll()\">{{ labels().deselectAll }}</button>\n      </div>\n      <div class=\"gp-grid-filter-list\">\n        @if (hasBlanks()) {\n          <label class=\"gp-grid-filter-option\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"includeBlanks\"\n              (change)=\"includeBlanks = $any($event.target).checked\" />\n            <span class=\"gp-grid-filter-blank\">{{ labels().blanks }}</span>\n          </label>\n        }\n        @for (entry of filteredUniqueEntries(); track entry.label) {\n          <label class=\"gp-grid-filter-option\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"selectedLabels.has(entry.label)\"\n              (change)=\"toggleValue(entry.label, $any($event.target).checked)\" />\n            <span>{{ entry.label }}</span>\n          </label>\n        }\n      </div>\n    }\n\n    @if (filterMode === 'condition') {\n      <div class=\"gp-grid-filter-groups\">\n        @if (textGroups.length > 1) {\n          <div class=\"gp-grid-filter-combination\">\n            <button\n              type=\"button\"\n              [class.active]=\"groupCombination === 'and'\"\n              [attr.aria-pressed]=\"groupCombination === 'and'\"\n              (click)=\"setGroupCombination('and')\">\n              {{ labels().and }}\n            </button>\n            <button\n              type=\"button\"\n              [class.active]=\"groupCombination === 'or'\"\n              [attr.aria-pressed]=\"groupCombination === 'or'\"\n              (click)=\"setGroupCombination('or')\">\n              {{ labels().or }}\n            </button>\n          </div>\n        }\n        @for (group of textGroups; track $index; let groupIndex = $index) {\n          <div class=\"gp-grid-filter-group\">\n            @if (group.conditions.length > 1 || textGroups.length > 1) {\n              <div class=\"gp-grid-filter-group-actions\">\n                @if (group.conditions.length > 1) {\n                  <div class=\"gp-grid-filter-combination\">\n                    <button\n                      type=\"button\"\n                      [class.active]=\"group.combination === 'and'\"\n                      [attr.aria-pressed]=\"group.combination === 'and'\"\n                      (click)=\"setTextGroupCombination(groupIndex, 'and')\">\n                      {{ labels().and }}\n                    </button>\n                    <button\n                      type=\"button\"\n                      [class.active]=\"group.combination === 'or'\"\n                      [attr.aria-pressed]=\"group.combination === 'or'\"\n                      (click)=\"setTextGroupCombination(groupIndex, 'or')\">\n                      {{ labels().or }}\n                    </button>\n                  </div>\n                }\n                @if (textGroups.length > 1) {\n                  <button\n                    type=\"button\"\n                    class=\"gp-grid-filter-remove gp-grid-filter-group-remove\"\n                    (click)=\"removeTextGroup(groupIndex)\">\n                    {{ labels().removeGroup }}\n                  </button>\n                }\n              </div>\n            }\n            @for (cond of group.conditions; track $index; let i = $index) {\n              <div class=\"gp-grid-filter-condition\">\n                <div class=\"gp-grid-filter-row\">\n                  <select\n                    [value]=\"cond.operator\"\n                    (change)=\"onTextOperatorChange(groupIndex, i, $any($event.target).value)\">\n                    @for (op of textOperators(); track op.value) {\n                      <option [value]=\"op.value\">{{ op.label }}</option>\n                    }\n                  </select>\n                  @if (!isValueLessTextOp(cond.operator)) {\n                    <input\n                      class=\"gp-grid-filter-text-input\"\n                      type=\"text\"\n                      [value]=\"cond.value\"\n                      (input)=\"cond.value = $any($event.target).value\"\n                      [placeholder]=\"labels().valuePlaceholder\" />\n                  }\n                  @if (group.conditions.length > 1) {\n                    <button\n                      type=\"button\"\n                      class=\"gp-grid-filter-remove\"\n                      (click)=\"removeTextCondition(groupIndex, i)\">\n                      {{ labels().removeCondition }}\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n            <button\n              type=\"button\"\n              class=\"gp-grid-filter-add\"\n              (click)=\"addTextCondition(groupIndex)\">\n              {{ labels().addCondition }}\n            </button>\n          </div>\n        }\n        <button\n          type=\"button\"\n          class=\"gp-grid-filter-add gp-grid-filter-add-group\"\n          (click)=\"addTextGroup()\">\n          {{ labels().addGroup }}\n        </button>\n      </div>\n    }\n  }\n\n    <div class=\"gp-grid-filter-buttons\">\n      <button type=\"button\" class=\"gp-grid-filter-btn-clear\" (click)=\"handleClear()\">\n        {{ labels().clear }}\n      </button>\n      <button type=\"button\" class=\"gp-grid-filter-btn-apply\" (click)=\"handleApply()\">\n        {{ labels().apply }}\n      </button>\n    </div>\n  </div>\n</div>\n", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FilterPopupComponent, decorators: [{
             type: Component,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gp-grid/angular",
   "description": "A high-performance Angular data grid component with virtual scrolling, cell selection, sorting, filtering, and Excel-like editing",
-  "version": "0.22.0",
+  "version": "0.23.1",
   "license": "Apache-2.0",
   "module": "fesm2022/gp-grid-angular.mjs",
   "typings": "types/gp-grid-angular.d.ts",
@@ -51,7 +51,7 @@
     "@angular/core": ">=18.0.0"
   },
   "dependencies": {
-    "@gp-grid/core": "0.22.0",
+    "@gp-grid/core": "0.23.1",
     "tslib": "^2.8.1"
   },
   "sideEffects": false,

package/types/gp-grid-angular.d.ts

@@ -1,6 +1,6 @@
 import * as _gp_grid_core from '@gp-grid/core';
-import { HeaderRendererParams, SortDirection, VisibleColumnInfo, HeaderData, ColumnDefinition, SlotData, CellPosition, CellRange, CellValue, CellRendererParams, EditRendererParams, FillHandlePosition, DragState, GridLabels, ColumnFilterModel, getTextOperatorOptions, getNumberOperatorOptions, DistinctValueEntry, BatchChangeSetters, DataSource, RowId, HighlightingOptions, RowLoadingOptions, CellValueChangedEvent, ParallelSortOptions, MutableDataSource } from '@gp-grid/core';
-export { CellDataType, CellPosition, CellRange, CellRendererParams, CellValue, CellValueChangedEvent, ColumnDefinition, ColumnFilterModel, DataSource, DataSourceLoadMode, DataSourceRange, DataSourceRequest, DataSourceResponse, EditRendererParams, FilterCondition, FilterModel, GridCore, GridFilterOperatorLabels, GridInstruction, GridLabels, HeaderRendererParams, HighlightContext, HighlightingOptions, MutableDataSource, RowCacheEviction, RowCacheOptions, RowId, RowLoadingMode, RowLoadingOptions, SortDirection, SortModel, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource } from '@gp-grid/core';
+import { HeaderRendererParams, SortDirection, VisibleColumnInfo, HeaderData, ColumnDefinition, SlotData, CellPosition, CellRange, CellValue, CellRendererParams, EditRendererParams, FillHandlePosition, DragState, GridLabels, FilterCombination, ColumnFilterModel, getTextOperatorOptions, getNumberOperatorOptions, DistinctValueEntry, BatchChangeSetters, DataSource, RowId, HighlightingOptions, RowLoadingOptions, CellValueChangedEvent, GridLabelOverrides, ParallelSortOptions, MutableDataSource } from '@gp-grid/core';
+export { CellDataType, CellPosition, CellRange, CellRendererParams, CellValue, CellValueChangedEvent, ColumnDefinition, ColumnFilterInput, ColumnFilterModel, DataSource, DataSourceLoadMode, DataSourceRange, DataSourceRequest, DataSourceResponse, EditRendererParams, FilterCombination, FilterCondition, FilterConditionGroup, FilterModel, GridCore, GridFilterOperatorLabels, GridInstruction, GridLabelOverrides, GridLabels, HeaderRendererParams, HighlightContext, HighlightingOptions, LegacyColumnFilterModel, LegacyFilterCondition, MutableDataSource, RowCacheEviction, RowCacheOptions, RowId, RowLoadingMode, RowLoadingOptions, SortDirection, SortModel, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource, isLegacyColumnFilterModel, normalizeColumnFilterModel } from '@gp-grid/core';
 import * as _angular_core from '@angular/core';
 import { TemplateRef, ElementRef, AfterViewInit, OnDestroy, Signal, OnInit, InjectionToken, Provider } from '@angular/core';
 
@@ -148,14 +148,18 @@ declare class GridBodyComponent {
 interface TextConditionState {
     operator: string;
     value: string;
-    nextOperator: 'and' | 'or';
 }
 interface NumberConditionState {
     operator: string;
     value: string;
     valueTo: string;
-    nextOperator: 'and' | 'or';
 }
+interface ConditionGroupState<TCondition> {
+    conditions: TCondition[];
+    combination: FilterCombination;
+}
+type TextConditionGroupState = ConditionGroupState<TextConditionState>;
+type NumberConditionGroupState = ConditionGroupState<NumberConditionState>;
 type FilterMode = 'values' | 'condition';
 
 declare class FilterPopupComponent implements AfterViewInit, OnDestroy {
@@ -179,8 +183,9 @@ declare class FilterPopupComponent implements AfterViewInit, OnDestroy {
     searchText: string;
     selectedLabels: Set<string>;
     includeBlanks: boolean;
-    textConditions: TextConditionState[];
-    numberConditions: NumberConditionState[];
+    textGroups: TextConditionGroupState[];
+    numberGroups: NumberConditionGroupState[];
+    groupCombination: FilterCombination;
     protected textOperators(): ReturnType<typeof getTextOperatorOptions>;
     protected numberOperators(): ReturnType<typeof getNumberOperatorOptions>;
     protected filterTitle(): string;
@@ -198,14 +203,19 @@ declare class FilterPopupComponent implements AfterViewInit, OnDestroy {
     toggleValue(label: string, checked: boolean): void;
     selectAll(): void;
     deselectAll(): void;
-    onTextOperatorChange(index: number, value: string): void;
-    onNumberOperatorChange(index: number, value: string): void;
-    addTextCondition(): void;
-    addNumberCondition(): void;
-    removeTextCondition(index: number): void;
-    removeNumberCondition(index: number): void;
-    setTextNextOp(index: number, value: 'and' | 'or'): void;
-    setNumberNextOp(index: number, value: 'and' | 'or'): void;
+    onTextOperatorChange(groupIndex: number, index: number, value: string): void;
+    onNumberOperatorChange(groupIndex: number, index: number, value: string): void;
+    addTextCondition(groupIndex: number): void;
+    addNumberCondition(groupIndex: number): void;
+    removeTextCondition(groupIndex: number, index: number): void;
+    removeNumberCondition(groupIndex: number, index: number): void;
+    addTextGroup(): void;
+    addNumberGroup(): void;
+    removeTextGroup(groupIndex: number): void;
+    removeNumberGroup(groupIndex: number): void;
+    setTextGroupCombination(groupIndex: number, value: FilterCombination): void;
+    setNumberGroupCombination(groupIndex: number, value: FilterCombination): void;
+    setGroupCombination(value: FilterCombination): void;
     handleApply(): void;
     handleClear(): void;
     private buildFilter;
@@ -390,8 +400,8 @@ declare class GpGridComponent implements OnInit, AfterViewInit, OnDestroy {
         fromIndex: number;
         toIndex: number;
     }>;
-    labels: _angular_core.InputSignal<Partial<GridLabels>>;
-    protected readonly resolvedLabels: _angular_core.Signal<GridLabels>;
+    labels: _angular_core.InputSignal<GridLabelOverrides>;
+    protected readonly resolvedLabels: _angular_core.Signal<_gp_grid_core.GridLabels>;
     protected readonly vm: GpGridViewModel;
     private readonly bindings;
     constructor();