@kodaris/krubble-components 1.0.55 → 1.0.57

package/dist/krubble-components.bundled.js

@@ -3013,6 +3013,7 @@ const KR_OPERATORS = {
     greater_than_equal: { key: 'greater_than_equal', type: 'comparison', dataTypes: ['number', 'date'], label: 'Greater than or equal' },
     between: { key: 'between', type: 'range', dataTypes: ['number', 'date'], label: 'Between' },
     in: { key: 'in', type: 'list', dataTypes: ['string', 'number'], label: 'In' },
+    n_in: { key: 'n_in', type: 'list', dataTypes: ['string', 'number', 'date', 'boolean'], label: 'Not In' },
     empty: { key: 'empty', type: 'nil', dataTypes: ['string', 'number', 'date', 'boolean'], label: 'Empty' },
     n_empty: { key: 'n_empty', type: 'nil', dataTypes: ['string', 'number', 'date', 'boolean'], label: 'Not empty' },
 };
@@ -3345,6 +3346,14 @@ class KRQuery {
             };
             this.specificity = [getDateSpecificity(rawStart), getDateSpecificity(rawEnd)];
         }
+        else if (kql.startsWith('!(') && kql.endsWith(')')) {
+            this.operator = 'n_in';
+            this.text = kql.substring(2, kql.length - 1).trim();
+            this.value = this.text.split(',')
+                .map(v => v.trim())
+                .map(v => this._parse(v));
+            this.specificity = [getDateSpecificity(this.text)];
+        }
         else if (kql.startsWith('(') && kql.endsWith(')')) {
             this.operator = 'in';
             this.text = kql.substring(1, kql.length - 1).trim();
@@ -3391,7 +3400,7 @@ class KRQuery {
             this.value = null;
             this.text = '';
         }
-        else if (this.operator === 'in') {
+        else if (this.operator === 'in' || this.operator === 'n_in') {
             this.value = [];
             this.text = '';
         }
@@ -3409,7 +3418,7 @@ class KRQuery {
             this.value = null;
             this.text = '';
         }
-        else if (this.operator === 'in') {
+        else if (this.operator === 'in' || this.operator === 'n_in') {
             this.value = [];
             this.text = '';
         }
@@ -3476,14 +3485,14 @@ class KRQuery {
         if (this.operator === 'between') {
             return !this.value?.start && !this.value?.end;
         }
-        if (this.operator === 'in') {
+        if (this.operator === 'in' || this.operator === 'n_in') {
             return !this.value?.length;
         }
         return this.value === undefined || this.value === null || this.value === '';
     }
-    /** Returns true if the value array contains the given value. Only applies to 'in' operator. */
+    /** Returns true if the value array contains the given value. Only applies to 'in' and 'n_in' operators. */
     has(val) {
-        if (this.operator !== 'in' || !Array.isArray(this.value)) {
+        if ((this.operator !== 'in' && this.operator !== 'n_in') || !Array.isArray(this.value)) {
             return false;
         }
         // Bucket values from Solr arrive as strings ("true"/"false") but
@@ -3498,9 +3507,9 @@ class KRQuery {
         }
         return this.value.indexOf(val) >= 0;
     }
-    /** Adds or removes a value from the 'in' list and rebuilds text/kql. */
+    /** Adds or removes a value from the 'in' or 'n_in' list and rebuilds text/kql. */
     toggle(val) {
-        if (this.operator !== 'in') {
+        if (this.operator !== 'in' && this.operator !== 'n_in') {
             this.setOperator('in');
         }
         // Bucket values from Solr arrive as strings ("true"/"false") —
@@ -3539,8 +3548,8 @@ class KRQuery {
         if (this.operator === 'n_empty') {
             return true;
         }
-        // For 'in' operator, valid as long as there's at least one value (including null for empty buckets)
-        if (this.operator === 'in') {
+        // For 'in'/'n_in' operator, valid as long as there's at least one value (including null for empty buckets)
+        if (this.operator === 'in' || this.operator === 'n_in') {
             return Array.isArray(this.value) && this.value.length > 0;
         }
         if (this.type === 'date') {
@@ -3684,6 +3693,18 @@ class KRQuery {
                     data.value = termify(this.value, true);
                 }
                 break;
+            case 'n_in':
+                if (Array.isArray(this.value) && this.value.length > 0) {
+                    data.operation = 'EXPRESSION';
+                    data.not = true;
+                    data.value = `(${this.value.map((v) => termify(v, true)).join(' OR ')})`;
+                }
+                else {
+                    data.operation = 'EXPRESSION';
+                    data.not = true;
+                    data.value = termify(this.value, true);
+                }
+                break;
             default:
                 data.operation = 'EXPRESSION';
                 data.value = termify(this.value, true);
@@ -3778,6 +3799,11 @@ class KRQuery {
                 params.operation = 'IN';
                 params.values = this.value ?? [];
                 break;
+            case 'n_in':
+                params.operation = 'IN';
+                params.not = true;
+                params.values = this.value ?? [];
+                break;
             default:
                 throw Error(`${this.operator} operator not supported by db params.`);
         }
@@ -3794,7 +3820,7 @@ class KRQuery {
         if (this.operator === 'between') {
             this.text = `${this._format(this.value?.start)} - ${this._format(this.value?.end)}`;
         }
-        else if (this.operator === 'in') {
+        else if (this.operator === 'in' || this.operator === 'n_in') {
             this.text = this.value.map((v) => this._format(v)).join(',');
         }
         else {
@@ -4008,6 +4034,9 @@ class KRQuery {
             case 'in':
                 this.kql = `(${this.value.map((v) => this._format(v)).join(',')})`;
                 break;
+            case 'n_in':
+                this.kql = `!(${this.value.map((v) => this._format(v)).join(',')})`;
+                break;
             default:
                 throw Error(`Unknown operator ${this.operator}`);
         }
@@ -4059,6 +4088,7 @@ let KRTable = class KRTable extends i$2 {
         this._filterPanelTab = 'filter';
         this._buckets = new Map();
         this._filterPanelPos = { top: 0, left: 0 };
+        this._sorts = [];
         this._resizing = null;
         this._resizeObserver = null;
         this._searchPositionLocked = false;
@@ -4248,7 +4278,7 @@ let KRTable = class KRTable extends i$2 {
         const request = {
             page: this._page - 1,
             size: this._pageSize,
-            sorts: [],
+            sorts: this._sorts,
             filterFields: [],
             queryFields: [],
             facetFields: []
@@ -4258,7 +4288,7 @@ let KRTable = class KRTable extends i$2 {
                 continue;
             }
             const filterData = col.filter.toSolrData();
-            if (col.facetable && col.filter.operator === 'in') {
+            if (col.facetable && (col.filter.operator === 'in' || col.filter.operator === 'n_in')) {
                 filterData.tagged = true;
             }
             request.filterFields.push(filterData);
@@ -4288,7 +4318,7 @@ let KRTable = class KRTable extends i$2 {
         const request = {
             page: this._page - 1,
             size: this._pageSize,
-            sorts: [],
+            sorts: this._sorts,
             filterFields: [],
             queryFields: [],
             facetFields: []
@@ -4410,7 +4440,7 @@ let KRTable = class KRTable extends i$2 {
                 }
             }
             // Bucket sync: ensure selected values appear even with 0 results
-            if (col.filter && col.filter.operator === 'in' && Array.isArray(col.filter.value)) {
+            if (col.filter && (col.filter.operator === 'in' || col.filter.operator === 'n_in') && Array.isArray(col.filter.value)) {
                 for (const selectedVal of col.filter.value) {
                     if (!buckets.some(b => b.val === selectedVal)) {
                         buckets.push({
@@ -4587,6 +4617,77 @@ let KRTable = class KRTable extends i$2 {
         document.addEventListener('mouseup', this._handleResizeEnd);
     }
     // ----------------------------------------------------------------------------
+    // Sorting
+    // ----------------------------------------------------------------------------
+    _handleSortClick(e, column) {
+        if (e.shiftKey) {
+            // Multi-sort: add or cycle existing
+            const existingIndex = this._sorts.findIndex(s => s.sortBy === column.id);
+            if (existingIndex === -1) {
+                this._sorts.push({ sortBy: column.id, sortDirection: 'asc' });
+            }
+            else {
+                const existing = this._sorts[existingIndex];
+                if (existing.sortDirection === 'asc') {
+                    existing.sortDirection = 'desc';
+                }
+                else {
+                    // on third click, remove sorting for the column
+                    this._sorts.splice(existingIndex, 1);
+                }
+            }
+            this.requestUpdate();
+        }
+        else {
+            // Single sort: replace all
+            let existing = null;
+            if (this._sorts.length === 1) {
+                existing = this._sorts.find(s => s.sortBy === column.id);
+            }
+            if (!existing) {
+                this._sorts = [{ sortBy: column.id, sortDirection: 'asc' }];
+            }
+            else if (existing.sortDirection === 'asc') {
+                this._sorts = [{ sortBy: column.id, sortDirection: 'desc' }];
+            }
+            else {
+                this._sorts = [];
+            }
+        }
+        this._page = 1;
+        this._fetch();
+    }
+    _renderSortIndicator(column) {
+        if (!column.sortable) {
+            return A;
+        }
+        const sortIndex = this._sorts.findIndex(s => s.sortBy === column.id);
+        if (sortIndex === -1) {
+            // Ghost arrow: visible only on hover via CSS
+            return b `
+        <span class="header-cell__sort" @click=${(e) => this._handleSortClick(e, column)}>
+          <svg class="header-cell__sort-arrow header-cell__sort-arrow--ghost" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
+          </svg>
+        </span>
+      `;
+        }
+        let arrowStyle = {};
+        if (this._sorts[sortIndex].sortDirection === 'desc') {
+            arrowStyle = { transform: 'rotate(180deg)' };
+        }
+        return b `
+      <span class="header-cell__sort" @click=${(e) => this._handleSortClick(e, column)}>
+        <svg class="header-cell__sort-arrow" viewBox="0 0 24 24" fill="currentColor" style=${o$1(arrowStyle)}>
+          <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
+        </svg>
+        ${this._sorts.length > 1 ? b `
+          <span class="header-cell__sort-priority">${sortIndex + 1}</span>
+        ` : A}
+      </span>
+    `;
+    }
+    // ----------------------------------------------------------------------------
     // Header
     // ----------------------------------------------------------------------------
     _handleAction(action) {
@@ -4780,6 +4881,7 @@ let KRTable = class KRTable extends i$2 {
     _getHeaderCellClasses(column, index) {
         return {
             'header-cell': true,
+            'header-cell--sortable': !!column.sortable,
             'header-cell--align-center': column.align === 'center',
             'header-cell--align-right': column.align === 'right',
             'header-cell--sticky-left': column.sticky === 'left',
@@ -5012,7 +5114,7 @@ let KRTable = class KRTable extends i$2 {
         />
       `;
         }
-        else if (column.filter.operator === 'in') {
+        else if (column.filter.operator === 'in' || column.filter.operator === 'n_in') {
             valueInput = b `
         <textarea
           class="filter-panel__textarea"
@@ -5267,10 +5369,14 @@ let KRTable = class KRTable extends i$2 {
                   class=${e$1(this._getHeaderCellClasses(col, i))}
                   style=${o$1(this._getCellStyle(col, i))}
                   data-column-id=${col.id}
-                >${col.label ?? col.id}${col.resizable !== false ? b `<div
+                >
+                  <span class="header-cell__label">${col.label ?? col.id}</span>
+                  ${this._renderSortIndicator(col)}
+                  ${col.resizable !== false ? b `<div
                       class="header-cell__resize"
                       @mousedown=${(e) => this._handleResizeStart(e, col.id)}
-                    ></div>` : A}</div>
+                    ></div>` : A}
+                </div>
               `)}
             </div>
             ${this._renderFilterRow()}
@@ -5679,9 +5785,7 @@ KRTable.styles = [krBaseCSS, i$5 `
     .header-cell {
       position: sticky;
       top: 0;
-      z-index: 2;
       height: 48px;
-      line-height: 48px;
       padding: 0 16px;
       white-space: nowrap;
       box-sizing: border-box;
@@ -5691,8 +5795,8 @@ KRTable.styles = [krBaseCSS, i$5 `
       border-right: 1px solid #e5e7ebba;
       font-weight: 600;
       color: #374151;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      display: flex;
+      align-items: center;
     }
 
     .header-cell__resize {
@@ -5702,21 +5806,52 @@ KRTable.styles = [krBaseCSS, i$5 `
       bottom: 0;
       width: 14px;
       cursor: col-resize;
+      z-index: 10;
+    }
+
+    .header-cell--sortable {
+      user-select: none;
+    }
+
+    .header-cell__label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+      line-height: 48px;
+    }
+
+    .header-cell__sort {
+      flex-grow: 1;
       display: flex;
       align-items: center;
-      justify-content: center;
-      z-index: 10;
+      height: 100%;
+      margin-left: 6px;
+      cursor: pointer;
     }
 
-    .header-cell__resize::after {
-      content: '';
-      width: 2px;
-      height: 20px;
-      background: #c6c6cd;
+    .header-cell__sort-arrow {
+      width: 16px;
+      height: 16px;
+      color: #374151;
+      stroke: currentColor;
+      stroke-width: 1px;
     }
 
-    .header-cell:last-child .header-cell__resize::after {
-      display: none;
+    .header-cell__sort-arrow--ghost {
+      opacity: 0;
+      color: #374151;
+      transition: opacity 0.15s;
+    }
+
+    .header-cell--sortable:hover .header-cell__sort-arrow--ghost {
+      opacity: 0.4;
+    }
+
+    .header-cell__sort-priority {
+      font-size: 10px;
+      font-weight: 600;
+      color: #374151;
+      line-height: 1;
     }
 
     .cell {
@@ -6182,6 +6317,9 @@ __decorate$9([
 __decorate$9([
     r$1()
 ], KRTable.prototype, "_buckets", void 0);
+__decorate$9([
+    r$1()
+], KRTable.prototype, "_sorts", void 0);
 __decorate$9([
     n$1({ type: Object })
 ], KRTable.prototype, "def", void 0);