overview-components 1.1.181 → 1.1.182

package/dist/components/lit-data-grid-tanstack.d.ts

@@ -34,7 +34,7 @@ export interface ColumnFilterServer {
 }
 export type ColumnCustomFilter = FromSchema<typeof litDataGridTanstackColumnCustomFilterSchema>;
 export type TColumnVisibility = Record<string, boolean>;
-export type ColumnType = 'string' | 'number' | 'date' | 'range' | 'select' | 'multiselect' | 'dateTime' | 'actions' | 'dateTimeRange' | 'dateRange' | 'numberRange' | 'currency' | 'thumbnail';
+export type ColumnType = 'string' | 'number' | 'date' | 'range' | 'select' | 'multiselect' | 'includeExclude' | 'dateTime' | 'actions' | 'dateTimeRange' | 'dateRange' | 'numberRange' | 'currency' | 'thumbnail';
 export type Density = 'compact' | 'standard' | 'comfort';
 export type DateFormats = null | 'dd.MM.yyyy' | 'd.M.yyyy' | 'dd/MM/yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd';
 export interface ColumnCustomExtension {

package/dist/components/lit-data-grid-tanstack.js

@@ -34,7 +34,7 @@ import './components-settings/data-grid-settings.js';
 // utils
 import { formatDate } from '../utils/date.js';
 import { formatCurrency, formatDecimal } from '../utils/formatNumber.js';
-import { dateFilterFn, multiselectFilterFn, dateRangeFilterFn } from '../utils/custom-filters.js';
+import { dateFilterFn, multiselectFilterFn, dateRangeFilterFn, includeExcludeFilterFn, } from '../utils/custom-filters.js';
 import { setLocale, getLocale, LOCALE_LANGS } from '../utils/localization.js';
 import { getOperatorsByColumnType } from '../utils/getOperatorByType.js';
 import { tooltip, overflowTooltip } from '../shared/simple-tooltip.js';
@@ -568,6 +568,7 @@ export class LitDataGridTanstack extends LitElement {
             numberRange: filterFns.inNumberRange,
             select: filterFns.weakEquals,
             multiselect: multiselectFilterFn,
+            includeExclude: includeExcludeFilterFn,
             number: filterFns.weakEquals,
             currency: filterFns.weakEquals,
             dateRange: dateRangeFilterFn,
@@ -1097,7 +1098,9 @@ export class LitDataGridTanstack extends LitElement {
         // can actually be used. The faceted model is expensive because
         // FilterInputs requests unique values for every filterable column on
         // mount; the grouped/expanded models only matter when grouping is on.
-        const hasSelectColumn = (this.columns || []).some((c) => c.type === 'select' || c.type === 'multiselect');
+        const hasSelectColumn = (this.columns || []).some((c) => c.type === 'select' ||
+            c.type === 'multiselect' ||
+            c.type === 'includeExclude');
         const hasGroupableColumn = (this.initialGroups?.length ?? 0) > 0 ||
             ((this.enableGrouping ?? true) &&
                 (this.columns || []).some((c) => c.enableGrouping ?? true));
@@ -1142,6 +1145,7 @@ export class LitDataGridTanstack extends LitElement {
                 dateRangeFilterFn: dateRangeFilterFn,
                 dateFilterFn: dateFilterFn,
                 multiselectFilterFn: multiselectFilterFn,
+                includeExcludeFilterFn: includeExcludeFilterFn,
             },
             // debugTable: true,
             enableRowSelection: this.enableRowSelection,

package/dist/schemas/lit-data-grid-tanstack-column-array.schema.d.ts

@@ -8,7 +8,7 @@ export declare const litDataGridTanstackColumnArraySchema: {
             };
             readonly type: {
                 readonly type: "string";
-                readonly enum: readonly ["string", "number", "date", "range", "select", "multiselect", "dateTime", "actions", "dateTimeRange", "dateRange", "numberRange", "currency", "thumbnail"];
+                readonly enum: readonly ["string", "number", "date", "range", "select", "multiselect", "includeExclude", "dateTime", "actions", "dateTimeRange", "dateRange", "numberRange", "currency", "thumbnail"];
             };
             readonly headerName: {
                 readonly type: "string";

package/dist/schemas/lit-data-grid-tanstack-column.schema.d.ts

@@ -6,7 +6,7 @@ export declare const litDataGridTanstackColumnSchema: {
         };
         readonly type: {
             readonly type: "string";
-            readonly enum: readonly ["string", "number", "date", "range", "select", "multiselect", "dateTime", "actions", "dateTimeRange", "dateRange", "numberRange", "currency", "thumbnail"];
+            readonly enum: readonly ["string", "number", "date", "range", "select", "multiselect", "includeExclude", "dateTime", "actions", "dateTimeRange", "dateRange", "numberRange", "currency", "thumbnail"];
         };
         readonly headerName: {
             readonly type: "string";

package/dist/schemas/lit-data-grid-tanstack-column.schema.js

@@ -12,6 +12,7 @@ export const litDataGridTanstackColumnSchema = {
                 'range',
                 'select',
                 'multiselect',
+                'includeExclude',
                 'dateTime',
                 'actions',
                 'dateTimeRange',

package/dist/schemas/lit-data-grid-tanstack.schema.d.ts

@@ -17,7 +17,7 @@ export declare const litDataGridTanstackSchema: {
                     };
                     readonly type: {
                         readonly type: "string";
-                        readonly enum: readonly ["string", "number", "date", "range", "select", "multiselect", "dateTime", "actions", "dateTimeRange", "dateRange", "numberRange", "currency", "thumbnail"];
+                        readonly enum: readonly ["string", "number", "date", "range", "select", "multiselect", "includeExclude", "dateTime", "actions", "dateTimeRange", "dateRange", "numberRange", "currency", "thumbnail"];
                     };
                     readonly headerName: {
                         readonly type: "string";

package/dist/shared/filter-inputs.d.ts

@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
 import './lit-icon.js';
 import './lit-icon-button.js';
 import './lit-select.js';
+import './lit-include-exclude-select.js';
 import './lit-date-picker.js';
 import './lit-data-grid-operators-popover.js';
 import './lit-input.js';
@@ -28,6 +29,10 @@ export declare class FilterInputs extends LitElement {
     checkNumberOfCharacters(value: string, cf: Function): void;
     willUpdate(changedProperties: any): void;
     handleSetFilter(value: any): void;
+    handleSetIncludeExcludeFilter(value: {
+        in: string[];
+        nin: string[];
+    }): void;
     private handleSetOperator;
     handleClearFilter(): void;
     private handleDateChange;
@@ -39,6 +44,7 @@ export declare class FilterInputs extends LitElement {
     focus(): void;
     renderNumberRangeInput(): import("lit-html").TemplateResult<1>;
     renderSelectInput(multiselect?: boolean): import("lit-html").TemplateResult<1>;
+    renderIncludeExcludeInput(): import("lit-html").TemplateResult<1>;
     renderNumberInput(): import("lit-html").TemplateResult<1>;
     renderDateInput(): import("lit-html").TemplateResult<1>;
     renderDateRangeInput(): import("lit-html").TemplateResult<1>;

package/dist/shared/filter-inputs.js

@@ -12,6 +12,7 @@ import { property, state } from 'lit/decorators.js';
 import './lit-icon.js';
 import './lit-icon-button.js';
 import './lit-select.js';
+import './lit-include-exclude-select.js';
 import './lit-date-picker.js';
 import './lit-data-grid-operators-popover.js';
 import './lit-input.js';
@@ -69,7 +70,9 @@ export class FilterInputs extends LitElement {
     }
     willUpdate(changedProperties) {
         if (changedProperties.has('column')) {
-            if (this.filterVariant === 'select' || this.filterVariant === 'multiselect') {
+            if (this.filterVariant === 'select' ||
+                this.filterVariant === 'multiselect' ||
+                this.filterVariant === 'includeExclude') {
                 if (this.column?.columnDef?.meta.valueOptions || this.server) {
                     this.valueOptions = this.column?.columnDef?.meta.valueOptions || [];
                 }
@@ -103,6 +106,21 @@ export class FilterInputs extends LitElement {
             this.column?.setFilterValue();
         }
     }
+    handleSetIncludeExcludeFilter(value) {
+        const isEmpty = (value?.in?.length ?? 0) === 0 && (value?.nin?.length ?? 0) === 0;
+        this.value = isEmpty ? null : value;
+        if (isEmpty) {
+            // {in:[],nin:[]} is not lodash-empty, so clear explicitly to drop the
+            // active-filter dot (column.getIsFiltered() -> false).
+            this.column?.setFilterValue();
+        }
+        else if (this.server) {
+            this.column?.setFilterValue({ value, operator: 'includeExclude' });
+        }
+        else {
+            this.column?.setFilterValue(value);
+        }
+    }
     handleClearFilter() {
         if (this.server) {
             this.operator = this.filterOperators[0].value;
@@ -192,6 +210,11 @@ export class FilterInputs extends LitElement {
         if (selects) {
             selects.forEach((select) => elements.push(select));
         }
+        // Check for lit-include-exclude-select components
+        const includeExcludes = this.shadowRoot?.querySelectorAll('lit-include-exclude-select');
+        if (includeExcludes) {
+            includeExcludes.forEach((el) => elements.push(el));
+        }
         // Check for lit-date-picker components
         const datePickers = this.shadowRoot?.querySelectorAll('lit-date-picker');
         if (datePickers) {
@@ -200,7 +223,7 @@ export class FilterInputs extends LitElement {
         return elements;
     }
     focus() {
-        const firstFocusable = this.shadowRoot?.querySelector('lit-input, lit-select, lit-date-picker');
+        const firstFocusable = this.shadowRoot?.querySelector('lit-input, lit-select, lit-include-exclude-select, lit-date-picker');
         firstFocusable?.focus();
     }
     renderNumberRangeInput() {
@@ -266,6 +289,20 @@ export class FilterInputs extends LitElement {
             ></lit-select>
         `;
     }
+    renderIncludeExcludeInput() {
+        const current = this.value && typeof this.value === 'object' && !Array.isArray(this.value)
+            ? { in: this.value.in ?? [], nin: this.value.nin ?? [] }
+            : { in: [], nin: [] };
+        return html `
+            <lit-include-exclude-select
+                id=${this.column.id}
+                .value="${current}"
+                .options="${this.valueOptions}"
+                .onChange="${(v) => this.handleSetIncludeExcludeFilter(v)}"
+                @keydown=${(e) => this.handleKeyDown(e)}
+            ></lit-include-exclude-select>
+        `;
+    }
     renderNumberInput() {
         return html `
             <lit-input
@@ -363,6 +400,9 @@ export class FilterInputs extends LitElement {
         else if (this.filterVariant === 'multiselect') {
             return this.renderSelectInput(true);
         }
+        else if (this.filterVariant === 'includeExclude') {
+            return this.renderIncludeExcludeInput();
+        }
         else if (this.filterVariant === 'number') {
             return this.renderNumberInput();
         }

package/dist/shared/lit-checkbox.d.ts

@@ -6,6 +6,7 @@ export declare class LitCheckbox extends LitElement {
     disabled: boolean;
     checked: boolean;
     indeterminate: boolean;
+    cross: boolean;
     onChange: (e: Event) => void;
     value: string;
     label: string;

package/dist/shared/lit-checkbox.js

@@ -15,6 +15,7 @@ export class LitCheckbox extends LitElement {
         this.disabled = false;
         this.checked = false;
         this.indeterminate = false;
+        this.cross = false;
         this.onChange = () => { };
         this.value = '';
         this.label = '';
@@ -68,6 +69,7 @@ export class LitCheckbox extends LitElement {
                     id="${this.id || `checkbox-${Math.random().toString(36).substring(2, 11)}`}"
                     class=${classMap({
             indeterminate: this.indeterminate,
+            cross: this.cross,
             marginLeft: this.label !== '',
         })}
                     type="checkbox"
@@ -123,11 +125,24 @@ LitCheckbox.styles = css `
             font-size: 16px;
         }
 
+        /* Cross state: same filled-box design as :checked, but a cross glyph
+           (used by the tri-state include/exclude filter to mark exclusion). */
+        input[type='checkbox'].cross {
+            background-color: var(--color-error-main, #ca2d0a);
+            border-color: var(--color-error-main, #ca2d0a);
+        }
+
+        input[type='checkbox'].cross::after {
+            content: '✕';
+            color: var(--background-paper, #fff);
+            font-size: 13px;
+        }
+
         /* Custom checkmark */
         input[type='checkbox']::after {
             content: '✓';
             color: var(--background-paper, #111827);
-            font-size: 16px;
+            font-size: 13px;
             visible: none;
         }
 
@@ -166,6 +181,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], LitCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitCheckbox.prototype, "cross", void 0);
 __decorate([
     property({ type: Function })
 ], LitCheckbox.prototype, "onChange", void 0);

package/dist/shared/lit-include-exclude-select.d.ts

@@ -0,0 +1,59 @@
+import { LitElement } from 'lit';
+import './simple-popper.js';
+import './lit-icon.js';
+import './lit-icon-button.js';
+import './lit-checkbox.js';
+import './lit-menu-item.js';
+import './lit-menu.js';
+export type IncludeExcludeValue = {
+    in: string[];
+    nin: string[];
+};
+export type IncludeExcludeState = 'in' | 'nin' | 'default';
+export type IncludeExcludeSelectProps = {
+    id: string;
+    value?: IncludeExcludeValue;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onChange: (value: IncludeExcludeValue) => void;
+    disabled?: boolean;
+    placeholder?: string;
+};
+export declare class LitIncludeExcludeSelect extends LitElement {
+    id: string;
+    value: IncludeExcludeValue;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onChange: (value: IncludeExcludeValue) => void;
+    disabled: boolean;
+    placeholder: string;
+    private isOpen;
+    private searchQuery;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleOutsideClick;
+    private getState;
+    private cycleOption;
+    private clearValue;
+    private isEmptyValue;
+    private toggleCustomPopover;
+    private closePopover;
+    private handleInput;
+    private getFilteredOptions;
+    focus(): void;
+    private handleKeyDown;
+    private labelOf;
+    private displayValue;
+    private menuTemplate;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lit-include-exclude-select': LitIncludeExcludeSelect;
+    }
+}

package/dist/shared/lit-include-exclude-select.js

@@ -0,0 +1,293 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { msg } from '@lit/localize';
+import { classMap } from 'lit/directives/class-map.js';
+import { property, state } from 'lit/decorators.js';
+import './simple-popper.js';
+import './lit-icon.js';
+import './lit-icon-button.js';
+import './lit-checkbox.js';
+import './lit-menu-item.js';
+import './lit-menu.js';
+// Tri-state multiselect ("includeExclude") filter. Each option cycles through
+// three states on click: default -> in (include) -> nin (exclude) -> default.
+// Modeled on lit-select: input box + simple-popper + lit-menu, with the menu
+// rendered only while open to keep the closed steady-state cheap.
+export class LitIncludeExcludeSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.id = '';
+        this.value = { in: [], nin: [] };
+        this.options = [];
+        this.onChange = () => { };
+        this.disabled = false;
+        this.placeholder = '';
+        this.isOpen = false;
+        this.searchQuery = null;
+        this.handleOutsideClick = (event) => {
+            const path = event.composedPath();
+            if (!path.includes(this) &&
+                !path.some((element) => element instanceof HTMLElement && element.tagName === 'SIMPLE-POPPER')) {
+                this.closePopover();
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.handleOutsideClick);
+        this.closePopover();
+    }
+    getState(optionValue) {
+        if (this.value?.in?.includes(optionValue))
+            return 'in';
+        if (this.value?.nin?.includes(optionValue))
+            return 'nin';
+        return 'default';
+    }
+    // default -> in -> nin -> default
+    cycleOption(optionValue) {
+        const current = this.getState(optionValue);
+        const nextIn = (this.value?.in ?? []).filter((v) => v !== optionValue);
+        const nextNin = (this.value?.nin ?? []).filter((v) => v !== optionValue);
+        if (current === 'default') {
+            nextIn.push(optionValue);
+        }
+        else if (current === 'in') {
+            nextNin.push(optionValue);
+        }
+        // current === 'nin' -> default: leave the value out of both lists.
+        const newValue = { in: nextIn, nin: nextNin };
+        this.value = newValue;
+        this.onChange(newValue);
+    }
+    clearValue(e) {
+        e.stopPropagation();
+        const cleared = { in: [], nin: [] };
+        this.value = cleared;
+        this.onChange(cleared);
+        this.searchQuery = null;
+    }
+    isEmptyValue() {
+        return (this.value?.in?.length ?? 0) === 0 && (this.value?.nin?.length ?? 0) === 0;
+    }
+    toggleCustomPopover(event) {
+        event?.preventDefault();
+        this.isOpen = !this.isOpen;
+    }
+    closePopover() {
+        this.isOpen = false;
+        this.searchQuery = null;
+    }
+    handleInput(event) {
+        this.searchQuery = event.target.value;
+        this.isOpen = true;
+    }
+    getFilteredOptions() {
+        if (!this.searchQuery) {
+            return this.options;
+        }
+        const query = this.searchQuery.toLowerCase();
+        return this.options.filter((option) => option.label?.toLowerCase().includes(query));
+    }
+    focus() {
+        this.shadowRoot?.querySelector('input')?.focus();
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Tab' || event.key === 'Escape') {
+            this.closePopover();
+        }
+    }
+    labelOf(value) {
+        return this.options.find((option) => option.value == value)?.label ?? value;
+    }
+    displayValue() {
+        // Single comma-separated list of every selected option; excluded ones get
+        // a leading "!" (e.g. "Active, !Pending").
+        const include = (this.value?.in ?? []).map((v) => this.labelOf(v));
+        const exclude = (this.value?.nin ?? []).map((v) => `!${this.labelOf(v)}`);
+        return [...include, ...exclude].join(', ');
+    }
+    menuTemplate(selectOptions) {
+        return html `
+            <lit-menu tabindex="0" id="menu">
+                ${selectOptions?.length === 0
+            ? html `<lit-menu-item .disabled=${true}>${msg('Nenalezeno')}</lit-menu-item>`
+            : selectOptions?.map((option, index) => {
+                const state = this.getState(option.value);
+                return html `
+                              <lit-menu-item
+                                  id="${this.id}-${index}"
+                                  .onClick="${() => this.cycleOption(option.value)}"
+                              >
+                                  <span class="option-row">
+                                      <lit-checkbox
+                                          class="cursor"
+                                          .checked=${state === 'in'}
+                                          .cross=${state === 'nin'}
+                                      ></lit-checkbox>
+                                      ${option.label}
+                                  </span>
+                              </lit-menu-item>
+                          `;
+            })}
+            </lit-menu>
+        `;
+    }
+    render() {
+        const selectOptions = this.getFilteredOptions();
+        const dropdownIconClasses = {
+            'dropdown-icon': true,
+            'dropdown-icon--rotate': this.isOpen,
+        };
+        const display = this.isEmptyValue() ? '' : this.displayValue();
+        return html `
+            <div class="custom-icon-wrapper" slot="reference">
+                <input
+                    id="${this.id}"
+                    type="text"
+                    placeholder="${this.placeholder}"
+                    .value="${this.searchQuery ?? display ?? ''}"
+                    @input=${this.handleInput}
+                    @click="${(e) => this.toggleCustomPopover(e)}"
+                    @keydown=${this.handleKeyDown}
+                    .disabled="${this.disabled}"
+                />
+                ${!this.isEmptyValue()
+            ? html `
+                          <div class="custom-icon" @click="${this.clearValue}">
+                              <lit-icon-button
+                                  icon="close"
+                                  size="small"
+                                  variant="text"
+                                  color="secondary"
+                              ></lit-icon-button>
+                          </div>
+                      `
+            : ''}
+                <div class="${classMap(dropdownIconClasses)}">
+                    <lit-icon
+                        class="${this.disabled ? 'dropdown-icon-disabled' : null}"
+                        icon="chevrondown"
+                        size="17px"
+                    ></lit-icon>
+                </div>
+            </div>
+            <simple-popper
+                .showing=${this.isOpen}
+                placement="bottom-start"
+                @close="${this.closePopover}"
+                manualOpening=${true}
+                maxWidthAsTarget=${true}
+                @keydown=${this.handleKeyDown}
+            >
+                ${this.isOpen ? this.menuTemplate(selectOptions) : nothing}
+            </simple-popper>
+        `;
+    }
+}
+LitIncludeExcludeSelect.styles = css `
+        .custom-icon-wrapper {
+            position: relative;
+            width: 100%;
+            display: inline-block;
+            color: var(--text-primary, #111827);
+        }
+
+        input {
+            padding: 0.5rem;
+            border: 0.0625rem solid var(--color-divider, #d0d3db);
+            border-radius: 0.25rem;
+            min-width: 70px;
+            width: -webkit-fill-available;
+            width: -moz-available;
+            width: fill-available;
+            background-color: var(--background-paper, #fff);
+            color: var(--text-primary, #111827);
+        }
+
+        input:hover {
+            border: 0.0625rem solid var(--color-secondary-main, #111827);
+            cursor: pointer;
+        }
+
+        input:focus {
+            outline: none;
+            border: 0.0625rem solid var(--color-secondary-dark, #010204);
+        }
+
+        input:disabled {
+            cursor: inherit;
+        }
+
+        .custom-icon-wrapper .custom-icon {
+            display: inline-block;
+            position: absolute;
+            right: 27px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            pointer-events: auto;
+        }
+
+        .custom-icon-wrapper .dropdown-icon {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            pointer-events: none;
+            background-color: var(--background-paper, #fff);
+        }
+
+        .custom-icon-wrapper .dropdown-icon--rotate {
+            transform: translateY(-55%) rotate(180deg);
+        }
+
+        .dropdown-icon-disabled {
+            background: #f8f8f8;
+            color: #5d6371;
+        }
+
+        .option-row {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+            width: 100%;
+        }
+    `;
+__decorate([
+    property({ type: String })
+], LitIncludeExcludeSelect.prototype, "id", void 0);
+__decorate([
+    property({ type: Object })
+], LitIncludeExcludeSelect.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], LitIncludeExcludeSelect.prototype, "options", void 0);
+__decorate([
+    property({ type: Function })
+], LitIncludeExcludeSelect.prototype, "onChange", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitIncludeExcludeSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], LitIncludeExcludeSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean }),
+    state()
+], LitIncludeExcludeSelect.prototype, "isOpen", void 0);
+__decorate([
+    state()
+], LitIncludeExcludeSelect.prototype, "searchQuery", void 0);
+if (!window.customElements.get('lit-include-exclude-select')) {
+    window.customElements.define('lit-include-exclude-select', LitIncludeExcludeSelect);
+}

package/dist/utils/custom-filters.d.ts

@@ -4,3 +4,7 @@ export declare const dateRangeFilterFn: (row: any, columnId: string, filterValue
 }) => boolean;
 export declare function dateFilterFn(row: any, columnId: string, filterValue: string): boolean;
 export declare const multiselectFilterFn: (row: any, columnId: string, filterValue: any[]) => boolean;
+export declare const includeExcludeFilterFn: (row: any, columnId: string, filterValue: {
+    in?: string[];
+    nin?: string[];
+}) => boolean;

package/dist/utils/custom-filters.js

@@ -39,3 +39,23 @@ export const multiselectFilterFn = (row, columnId, filterValue) => {
     const rowValue = row.getValue(columnId);
     return !!rowValue && filterValue.includes(rowValue);
 };
+// Tri-state ("includeExclude") column filter: each option can be included (`in`),
+// excluded (`nin`) or left in the default/unset state. Semantics: exclude wins,
+// then `in` acts as a whitelist when non-empty.
+export const includeExcludeFilterFn = (row, columnId, filterValue) => {
+    const include = filterValue?.in ?? [];
+    const exclude = filterValue?.nin ?? [];
+    // Defensive: TanStack normally won't call us when the filter is cleared, but
+    // an empty selection imposes no constraint.
+    if (include.length === 0 && exclude.length === 0)
+        return true;
+    const rowValue = row.getValue(columnId);
+    // Option values are stringified for display, so compare as strings to keep
+    // numeric/boolean cell values matching their option.
+    const rowKey = rowValue == null ? null : String(rowValue);
+    if (rowKey !== null && exclude.includes(rowKey))
+        return false; // exclude wins
+    if (include.length > 0)
+        return rowKey !== null && include.includes(rowKey); // whitelist
+    return true; // only excludes specified, and this row wasn't excluded
+};

package/dist/utils/getOperatorByType.d.ts

@@ -1,4 +1,4 @@
-export type Operator = '=' | '!=' | '>' | '>=' | '<' | '<=' | 'contains' | 'doesNotContain' | 'isEmpty' | 'isNotEmpty' | 'in' | 'nin' | 'fromTo' | 'startsWith' | 'endsWith' | 'is' | 'not' | 'isAnyOfValue';
+export type Operator = '=' | '!=' | '>' | '>=' | '<' | '<=' | 'contains' | 'doesNotContain' | 'isEmpty' | 'isNotEmpty' | 'in' | 'nin' | 'fromTo' | 'startsWith' | 'endsWith' | 'is' | 'not' | 'isAnyOfValue' | 'includeExclude';
 export type FieldType = 'string' | 'select' | 'number' | 'date' | 'dateTime' | 'multiselect';
 export declare function getOperatorsByColumnType(type: FieldType): {
     value: Operator;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "overview-components",
-    "version": "1.1.181",
+    "version": "1.1.182",
     "description": "A reusable design Lit components for case overview section.",
     "license": "UNLICENSED",
     "repository": {