verben-ng-ui 1.4.2 → 1.4.3

package/fesm2022/verben-ng-ui-src-lib-components-data-filter.mjs

@@ -0,0 +1,509 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, NgModule, Injectable } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from 'verben-ng-ui/src/lib/components/svg';
+import { SvgModule } from 'verben-ng-ui/src/lib/components/svg';
+import * as i4 from 'verben-ng-ui/src/lib/components/card';
+import { CardModule } from 'verben-ng-ui/src/lib/components/card';
+import * as i5 from 'verben-ng-ui/src/lib/components/drop-down';
+import { DropDownModule } from 'verben-ng-ui/src/lib/components/drop-down';
+import { TooltipModule } from 'verben-ng-ui/src/lib/components/tooltip';
+import * as i6 from 'verben-ng-ui/src/lib/verbena-input';
+import { VerbenaInputModule } from 'verben-ng-ui/src/lib/verbena-input';
+import { ColumnValueType } from 'verben-ng-ui/src/lib/components/data-table';
+
+const STRING_OPERATORS = [
+    { label: 'Starts With', value: 'startsWith', type: 'string' },
+    { label: 'Ends With', value: 'endsWith', type: 'string' },
+    { label: 'Contains', value: 'contains', type: 'string' },
+    { label: 'Equals', value: 'equals', type: 'string' },
+    { label: 'Is Not', value: 'isNot', type: 'string' },
+];
+const NUMBER_OPERATORS = [
+    { label: 'Equal', value: 'equal', type: 'number' },
+    { label: 'Greater Than', value: 'greaterThan', type: 'number' },
+    { label: 'Less Than', value: 'lessThan', type: 'number' },
+    { label: 'Is Not', value: 'isNot', type: 'number' },
+];
+const DATE_OPERATORS = [
+    { label: 'On', value: 'on', type: 'date' },
+    { label: 'Before', value: 'before', type: 'date' },
+    { label: 'After', value: 'after', type: 'date' },
+];
+const BOOL_OPERATORS = [
+    { label: 'Is', value: 'is', type: 'bool' },
+    { label: 'Is Not', value: 'isNot', type: 'bool' },
+];
+const ENUM_OPERATORS = [
+    { label: 'Is', value: 'is', type: 'enum' },
+    { label: 'Is Not', value: 'isNot', type: 'enum' },
+];
+
+class DataFilterComponent {
+    columns;
+    data;
+    /**
+     * Optional restored filters: the panel opens pre-populated with these as
+     * selected filter chips. Applied once (the first time a non-empty value
+     * arrives) so it never clobbers the user's in-progress edits afterwards.
+     */
+    initialFilters;
+    filterApplied = new EventEmitter();
+    resetFilter = new EventEmitter();
+    filterableColumns = [];
+    availableOperators = [];
+    savedFilters = [];
+    currentFilter = {};
+    showAllFilters = false;
+    maxVisibleItems = 3;
+    currentColumnType = null;
+    /**
+     * Options for the value dropdown when the selected column is bool or enum.
+     * Always normalised to `{ label, value }` so the template binds one shape.
+     */
+    valueOptions = [];
+    /**
+     * Held as strings rather than booleans: `verben-drop-down` gates its selected
+     * label on a truthiness check, so an option valued `false` would render as
+     * though nothing were picked. Coerced back to a boolean in `addFilter`.
+     */
+    boolOptions = [
+        { label: 'Yes', value: 'true' },
+        { label: 'No', value: 'false' },
+    ];
+    // Set once the user edits the panel, so restored/host filters no longer
+    // overwrite their in-progress work.
+    userTouched = false;
+    /**
+     * The saved filter currently loaded into the operation row, if any. Held by
+     * reference rather than by index so deleting or reordering another filter
+     * cannot retarget the write-back.
+     */
+    editingFilter = null;
+    ngOnInit() {
+        this.initializeFilterableColumns();
+        this.hydrateSavedFilters();
+    }
+    ngOnChanges(changes) {
+        // Pick up filters restored asynchronously by the host after first render.
+        if (changes['initialFilters']) {
+            this.hydrateSavedFilters();
+        }
+    }
+    /**
+     * Seed the saved-filter chips from the restored filters. Skipped once the user
+     * has touched the panel so it never overwrites their in-progress edits.
+     */
+    hydrateSavedFilters() {
+        if (this.userTouched)
+            return;
+        this.savedFilters = (this.initialFilters ?? []).map((filter) => ({
+            ...filter,
+            selected: true,
+        }));
+    }
+    /** Marks the panel as user-edited (called from template interactions). */
+    markTouched() {
+        this.userTouched = true;
+    }
+    initializeFilterableColumns() {
+        this.filterableColumns = this.columns.filter((col) => col.accessorKey);
+    }
+    onColumnSelect(columnId) {
+        const column = this.filterableColumns.find((col) => col.id === columnId);
+        if (!column)
+            return;
+        this.currentFilter.columnId = columnId;
+        // Reset other values
+        this.currentFilter.operator = undefined;
+        this.currentFilter.value = undefined;
+        this.applyColumnContext(column);
+    }
+    /**
+     * Derives the value control, operators and options for a column without
+     * touching the operator or value already in the operation row — `editFilter`
+     * depends on those surviving, where `onColumnSelect` clears them first.
+     */
+    applyColumnContext(column) {
+        this.currentColumnType = this.resolveColumnType(column);
+        this.valueOptions =
+            this.currentColumnType === 'bool'
+                ? this.boolOptions
+                : this.currentColumnType === 'enum'
+                    ? this.normalizeValueOptions(column.valueOptions)
+                    : [];
+        switch (this.currentColumnType) {
+            case 'string':
+                this.availableOperators = STRING_OPERATORS;
+                break;
+            case 'number':
+                this.availableOperators = NUMBER_OPERATORS;
+                break;
+            case 'date':
+                this.availableOperators = DATE_OPERATORS;
+                break;
+            case 'bool':
+                this.availableOperators = BOOL_OPERATORS;
+                break;
+            case 'enum':
+                this.availableOperators = ENUM_OPERATORS;
+                break;
+            default:
+                this.availableOperators = [];
+        }
+    }
+    addFilter() {
+        const value = this.currentFilter.value;
+        // Checked explicitly rather than for falsiness: `false` is a valid bool
+        // filter and `0` a valid number one.
+        const hasValue = value !== undefined && value !== null && value !== '';
+        if (!this.currentFilter.columnId || !this.currentFilter.operator || !hasValue) {
+            return;
+        }
+        const condition = {
+            columnId: this.currentFilter.columnId,
+            operator: this.currentFilter.operator,
+            // Bool values round-trip through the dropdown as strings; hosts receive
+            // a real boolean.
+            value: this.currentColumnType === 'bool' ? value === 'true' : value,
+        };
+        // Written back over the filter being edited, and over the existing chip of a
+        // required column, so neither case leaves a stale duplicate behind. Updated
+        // in place rather than removed and re-added so the chip keeps its position.
+        const target = this.editingFilter ??
+            (this.isRequiredColumn(condition.columnId)
+                ? this.savedFilters.find((f) => f.columnId === condition.columnId)
+                : undefined);
+        if (target) {
+            Object.assign(target, condition);
+            target.selected = true;
+        }
+        else {
+            this.savedFilters.unshift({ ...condition, selected: true });
+        }
+        this.editingFilter = null;
+        this.userTouched = true;
+        this.resetCurrentFilter();
+    }
+    /** Loads a saved filter back into the operation row for correction. */
+    editFilter(filter) {
+        const column = this.filterableColumns.find((col) => col.id === filter.columnId);
+        if (!column)
+            return;
+        this.applyColumnContext(column);
+        this.currentFilter = {
+            columnId: filter.columnId,
+            operator: filter.operator,
+            value: this.toEditableValue(filter.value),
+        };
+        this.editingFilter = filter;
+        this.userTouched = true;
+    }
+    /**
+     * Converts a stored value back into what the value control expects: bools are
+     * held as real booleans but the dropdown's options are the strings
+     * 'true'/'false' (see `boolOptions`), and the native date input needs
+     * 'YYYY-MM-DD' rather than a `Date` a host may have restored.
+     */
+    toEditableValue(value) {
+        if (this.currentColumnType === 'bool')
+            return `${value}`;
+        if (value instanceof Date) {
+            // Built from the local parts: `toISOString` shifts to UTC and would move
+            // the date a day back west of Greenwich.
+            const month = `${value.getMonth() + 1}`.padStart(2, '0');
+            const day = `${value.getDate()}`.padStart(2, '0');
+            return `${value.getFullYear()}-${month}-${day}`;
+        }
+        return value;
+    }
+    /** Removes a saved filter. Required filters cannot be removed. */
+    deleteFilter(filter) {
+        if (this.isRequired(filter))
+            return;
+        const index = this.savedFilters.indexOf(filter);
+        if (index === -1)
+            return;
+        this.savedFilters.splice(index, 1);
+        if (this.editingFilter === filter)
+            this.clearCurrentFilter();
+        this.userTouched = true;
+    }
+    /** Empties the operation row, abandoning any edit in progress. */
+    clearCurrentFilter() {
+        this.editingFilter = null;
+        this.resetCurrentFilter();
+    }
+    /** True when the filter's column is declared `isRequiredFilter`. */
+    isRequired(filter) {
+        return this.isRequiredColumn(filter.columnId);
+    }
+    isRequiredColumn(columnId) {
+        const column = this.filterableColumns.find((col) => col.id === columnId);
+        return !!column?.isRequiredFilter;
+    }
+    isEditing(filter) {
+        return this.editingFilter === filter;
+    }
+    /**
+     * Locks the property dropdown while a required filter is being edited —
+     * switching it to another column would drop the required filter entirely.
+     */
+    get isEditingRequired() {
+        return !!this.editingFilter && this.isRequired(this.editingFilter);
+    }
+    getFilterDescription(filter) {
+        const column = this.filterableColumns.find((col) => col.id === filter.columnId);
+        if (!column)
+            return '';
+        const columnName = typeof column.header === 'function' ? column.header({}) : column.header;
+        const operator = this.getOperatorLabel(filter.operator);
+        return `${columnName} ${operator} ${this.getValueLabel(column, filter.value)}`;
+    }
+    /** Renders a stored filter value the way it was chosen, not as raw data. */
+    getValueLabel(column, value) {
+        if (value instanceof Date)
+            return value.toLocaleDateString();
+        if (typeof value === 'boolean')
+            return value ? 'Yes' : 'No';
+        // The native date input yields a 'YYYY-MM-DD' string; restored filters may
+        // carry one too. Parsed as local time — `new Date('2026-07-28')` is treated
+        // as UTC and would display as the previous day west of Greenwich.
+        if (typeof value === 'string' && this.isDateString(value)) {
+            const [year, month, day] = value.slice(0, 10).split('-').map(Number);
+            return new Date(year, month - 1, day).toLocaleDateString();
+        }
+        const option = this.normalizeValueOptions(column.valueOptions).find((candidate) => candidate.value === value);
+        return option ? option.label : `${value}`;
+    }
+    getOperatorLabel(operatorValue) {
+        const operator = [
+            ...STRING_OPERATORS,
+            ...NUMBER_OPERATORS,
+            ...DATE_OPERATORS,
+            ...BOOL_OPERATORS,
+            ...ENUM_OPERATORS,
+        ].find((op) => op.value === operatorValue);
+        return operator ? operator.label.toLowerCase() : operatorValue;
+    }
+    /**
+     * Prefers the type declared on the column, falling back to inspecting the data
+     * only when the host has not declared one.
+     */
+    resolveColumnType(column) {
+        if (column.valueType) {
+            // An Enum with no declared members has nothing to populate a dropdown
+            // with, so it degrades to a free-text filter rather than an empty select.
+            if (column.valueType === ColumnValueType.Enum &&
+                !this.normalizeValueOptions(column.valueOptions).length) {
+                return 'string';
+            }
+            return this.mapValueType(column.valueType);
+        }
+        return this.inferColumnType(column);
+    }
+    mapValueType(valueType) {
+        switch (valueType) {
+            case ColumnValueType.Date:
+                return 'date';
+            case ColumnValueType.Number:
+            case ColumnValueType.Integer:
+            case ColumnValueType.Decimal:
+            case ColumnValueType.Currency:
+                return 'number';
+            case ColumnValueType.Bool:
+                return 'bool';
+            case ColumnValueType.Enum:
+                return 'enum';
+            default:
+                return 'string';
+        }
+    }
+    /**
+     * Best-effort type detection for columns that declare no `valueType`. Falls
+     * back to 'string' rather than null so the value field always renders.
+     */
+    inferColumnType(column) {
+        const sampleValue = this.firstNonEmptyValue(column);
+        if (sampleValue instanceof Date)
+            return 'date';
+        if (typeof sampleValue === 'number')
+            return 'number';
+        if (typeof sampleValue === 'boolean')
+            return 'bool';
+        if (typeof sampleValue === 'string' && this.isDateString(sampleValue)) {
+            return 'date';
+        }
+        return 'string';
+    }
+    /**
+     * Scans rows for the first usable sample — sampling only the first row misses
+     * the type whenever that row happens to hold a null or undefined value.
+     */
+    firstNonEmptyValue(column) {
+        for (const row of this.data ?? []) {
+            const value = this.readValue(column, row);
+            if (value !== null && value !== undefined && value !== '')
+                return value;
+        }
+        return null;
+    }
+    readValue(column, row) {
+        if (column.accessorKey)
+            return row[column.accessorKey];
+        if (column.accessorFn)
+            return column.accessorFn(row);
+        return null;
+    }
+    /**
+     * Dates usually arrive from an API as ISO strings, which would otherwise be
+     * typed as plain text. Anchored to ISO-ish input so ordinary strings that
+     * `Date` happens to parse (e.g. "March") are not misread as dates.
+     */
+    isDateString(value) {
+        if (!/^\d{4}-\d{2}-\d{2}([T\s]|$)/.test(value))
+            return false;
+        return !Number.isNaN(new Date(value).getTime());
+    }
+    /** Accepts either supported `valueOptions` shape and returns one of them. */
+    normalizeValueOptions(options) {
+        if (!options?.length)
+            return [];
+        return options.map((option) => typeof option === 'string'
+            ? { label: option, value: option }
+            : option);
+    }
+    resetCurrentFilter() {
+        this.currentFilter = {};
+        this.availableOperators = [];
+        this.currentColumnType = null;
+        this.valueOptions = [];
+    }
+    resetAll() {
+        this.userTouched = true;
+        this.savedFilters = this.savedFilters.filter((filter) => this.isRequired(filter));
+        this.clearCurrentFilter();
+        // Required filters survive a reset, so the host is told what is left rather
+        // than that everything is gone — a bare `resetFilter` would leave the panel
+        // showing chips the host is no longer filtering by.
+        if (this.savedFilters.length) {
+            this.applyFilters();
+            return;
+        }
+        this.resetFilter.emit();
+    }
+    applyFilters() {
+        this.userTouched = true;
+        const activeFilters = this.savedFilters
+            // Required filters are emitted whether or not they are ticked: their
+            // checkbox is disabled, but the host must never be left without them.
+            .filter((filter) => filter.selected || this.isRequired(filter))
+            .map(({ columnId, operator, value }) => ({
+            columnId,
+            operator,
+            value,
+        }));
+        this.filterApplied.emit(activeFilters);
+    }
+    getColumnLabel(columnId) {
+        const column = this.filterableColumns.find((col) => col.id === columnId);
+        return column
+            ? typeof column.header === 'function'
+                ? column.header({})
+                : column.header
+            : columnId;
+    }
+    /**
+     * Required filters pinned to the top so the collapsed list can never hide one
+     * behind "Show More".
+     */
+    get orderedFilters() {
+        return [
+            ...this.savedFilters.filter((filter) => this.isRequired(filter)),
+            ...this.savedFilters.filter((filter) => !this.isRequired(filter)),
+        ];
+    }
+    get visibleFilters() {
+        return this.showAllFilters
+            ? this.orderedFilters
+            : this.orderedFilters.slice(0, this.maxVisibleItems);
+    }
+    get activeFilterCount() {
+        return this.savedFilters.filter((filter) => filter.selected || this.isRequired(filter)).length;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: DataFilterComponent, selector: "lib-data-filter", inputs: { columns: "columns", data: "data", initialFilters: "initialFilters" }, outputs: { filterApplied: "filterApplied", resetFilter: "resetFilter" }, usesOnChanges: true, ngImport: i0, template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid var(--vbn-color-primary)'\"\n  bgColor=\"var(--vbn-color-surface)\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">\n      Filter <sup>({{ activeFilterCount }})</sup>\n    </h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'var(--vbn-color-border-focus)'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"resetAll()\"\n    >\n      Reset\n    </button>\n  </div>\n\n  <div card-body class=\"card-body\">\n    <!-- Saved Filters Section -->\n    <section class=\"section\">\n      <div class=\"section-header\">\n        <h3 class=\"section-title\">Filters</h3>\n        <verben-svg\n          icon=\"info\"\n          [width]=\"15\"\n          [height]=\"15\"\n          fill=\"var(--vbn-color-text-muted)\"\n        ></verben-svg>\n      </div>\n\n      <div\n        *ngFor=\"let filter of visibleFilters\"\n        class=\"item\"\n        [class.item-editing]=\"isEditing(filter)\"\n      >\n        <div class=\"item-label\">\n          <!-- A required filter is always active, so its checkbox is ticked and\n               locked rather than hidden \u2014 the state stays readable. -->\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"filter.selected\"\n            [disabled]=\"isRequired(filter)\"\n            (ngModelChange)=\"markTouched()\"\n          />\n          <label>{{ getFilterDescription(filter) }}</label>\n        </div>\n\n        <div class=\"item-actions\">\n          <button\n            type=\"button\"\n            class=\"icon-button\"\n            aria-label=\"Edit filter\"\n            (click)=\"editFilter(filter)\"\n          >\n            <!-- Only `stroke` is passed: `verben-svg` resolves a single colour as\n                 `fill || stroke` and applies it to both, so also passing `fill`\n                 would paint the icon in whatever `fill` holds. -->\n            <verben-svg\n              icon=\"edit\"\n              [width]=\"15\"\n              [height]=\"15\"\n              stroke=\"var(--vbn-color-border-focus)\"\n            ></verben-svg>\n          </button>\n          <button\n            type=\"button\"\n            class=\"icon-button\"\n            aria-label=\"Delete filter\"\n            [disabled]=\"isRequired(filter)\"\n            (click)=\"deleteFilter(filter)\"\n          >\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              stroke=\"var(--vbn-color-error)\"\n            ></verben-svg>\n          </button>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"savedFilters.length > maxVisibleItems\"\n        class=\"show-more\"\n        (click)=\"showAllFilters = !showAllFilters\"\n      >\n        {{ showAllFilters ? \"Show Less\" : \"Show More\" }}\n      </div>\n    </section>\n\n    <hr class=\"divider\" />\n\n    <!-- New Filter Operation -->\n    <section class=\"section\">\n      <div class=\"section-header\">\n        <h3 class=\"section-title\">Operation</h3>\n        <verben-svg\n          icon=\"info\"\n          [width]=\"15\"\n          [height]=\"15\"\n          fill=\"var(--vbn-color-text-muted)\"\n        ></verben-svg>\n      </div>\n\n      <div class=\"operation-grid\">\n        <!-- Column Selection -->\n        <verben-drop-down\n          width=\"100%\"\n          height=\"1.025rem\"\n          placeholder=\"Select column\"\n          [options]=\"filterableColumns\"\n          optionLabel=\"header\"\n          optionValue=\"id\"\n          [disabled]=\"isEditingRequired\"\n          [(ngModel)]=\"currentFilter.columnId\"\n          (ngModelChange)=\"onColumnSelect($event)\"\n        ></verben-drop-down>\n\n        <!-- Operator Selection -->\n        <verben-drop-down\n          width=\"100%\"\n          height=\"1.025rem\"\n          placeholder=\"Select operator\"\n          [options]=\"availableOperators\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [(ngModel)]=\"currentFilter.operator\"\n        ></verben-drop-down>\n\n        <!-- Value Input based on type -->\n        <ng-container [ngSwitch]=\"currentColumnType\">\n          <!-- Date Input \u2014 native rather than the library date picker, whose\n               overlay renders off screen from this narrow panel. -->\n          <verbena-input\n            *ngSwitchCase=\"'date'\"\n            type=\"date\"\n            placeHolder=\"Select date\"\n            border=\"1px solid var(--vbn-color-border)\"\n            borderRadius=\"5px\"\n            textColor=\"var(--vbn-color-text)\"\n            width=\"100%\"\n            height=\"1.025rem\"\n            pd=\"2px 6px\"\n            [(ngModel)]=\"currentFilter.value\"\n          ></verbena-input>\n\n          <!-- Number Input -->\n          <verbena-input\n            *ngSwitchCase=\"'number'\"\n            type=\"number\"\n            placeHolder=\"Enter number\"\n            border=\"1px solid var(--vbn-color-border)\"\n            borderRadius=\"5px\"\n            textColor=\"var(--vbn-color-text)\"\n            width=\"100%\"\n            height=\"1.025rem\"\n            pd=\"2px 6px\"\n            [(ngModel)]=\"currentFilter.value\"\n          ></verbena-input>\n\n          <!-- Yes / No Selection -->\n          <verben-drop-down\n            *ngSwitchCase=\"'bool'\"\n            width=\"100%\"\n            height=\"1.025rem\"\n            placeholder=\"Select value\"\n            [options]=\"valueOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [(ngModel)]=\"currentFilter.value\"\n          ></verben-drop-down>\n\n          <!-- Enum Member Selection -->\n          <verben-drop-down\n            *ngSwitchCase=\"'enum'\"\n            width=\"100%\"\n            height=\"1.025rem\"\n            placeholder=\"Select value\"\n            [options]=\"valueOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [(ngModel)]=\"currentFilter.value\"\n          ></verben-drop-down>\n\n          <!-- Text Input (default) -->\n          <verbena-input\n            *ngSwitchDefault\n            type=\"text\"\n            placeHolder=\"Enter text\"\n            border=\"1px solid var(--vbn-color-border)\"\n            borderRadius=\"5px\"\n            textColor=\"var(--vbn-color-text)\"\n            width=\"100%\"\n            height=\"1.025rem\"\n            pd=\"2px 6px\"\n            [(ngModel)]=\"currentFilter.value\"\n          ></verbena-input>\n        </ng-container>\n      </div>\n\n      <div class=\"operation-actions\">\n        <button class=\"clear-button\" (click)=\"clearCurrentFilter()\">\n          Clear\n        </button>\n        <button class=\"add-button\" (click)=\"addFilter()\">+ Add</button>\n      </div>\n    </section>\n  </div>\n\n  <div card-footer class=\"card-footer\">\n    <button class=\"export-button\" (click)=\"applyFilters()\">Filter</button>\n  </div>\n</verben-card>\n", styles: [".export-card{font-size:.75rem;z-index:10}.card-header{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body,.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.item-editing{background-color:var(--vbn-color-surface-alt);border-radius:4px}.item-label{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.item-label label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.icon-button{display:inline-flex;align-items:center;padding:0;border:none;background-color:transparent;cursor:pointer}.icon-button[disabled]{cursor:not-allowed;opacity:.4}.show-more{display:flex;gap:.5em;align-items:center;color:var(--vbn-color-text-muted);cursor:pointer}.divider{border:none;border-top:1px solid var(--vbn-color-border)}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.operation-actions{display:flex;justify-content:flex-end;gap:.75rem}.add-button,.clear-button{margin-top:.5rem;outline:none;border:none;background-color:transparent;font-size:.75rem;font-weight:500;cursor:pointer}.add-button{color:var(--vbn-color-border-focus)}.clear-button{color:var(--vbn-color-text-muted)}.card-footer{display:flex;justify-content:flex-end;background-color:transparent}.export-button{margin-top:.5rem;outline:none;border:none;padding:.2rem 1.6rem;background-color:var(--vbn-color-primary);color:var(--vbn-color-on-primary);font-size:.75rem;font-weight:600;cursor:pointer}sup{color:var(--vbn-color-border-focus)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i4.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i6.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-data-filter', template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid var(--vbn-color-primary)'\"\n  bgColor=\"var(--vbn-color-surface)\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">\n      Filter <sup>({{ activeFilterCount }})</sup>\n    </h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'var(--vbn-color-border-focus)'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"resetAll()\"\n    >\n      Reset\n    </button>\n  </div>\n\n  <div card-body class=\"card-body\">\n    <!-- Saved Filters Section -->\n    <section class=\"section\">\n      <div class=\"section-header\">\n        <h3 class=\"section-title\">Filters</h3>\n        <verben-svg\n          icon=\"info\"\n          [width]=\"15\"\n          [height]=\"15\"\n          fill=\"var(--vbn-color-text-muted)\"\n        ></verben-svg>\n      </div>\n\n      <div\n        *ngFor=\"let filter of visibleFilters\"\n        class=\"item\"\n        [class.item-editing]=\"isEditing(filter)\"\n      >\n        <div class=\"item-label\">\n          <!-- A required filter is always active, so its checkbox is ticked and\n               locked rather than hidden \u2014 the state stays readable. -->\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"filter.selected\"\n            [disabled]=\"isRequired(filter)\"\n            (ngModelChange)=\"markTouched()\"\n          />\n          <label>{{ getFilterDescription(filter) }}</label>\n        </div>\n\n        <div class=\"item-actions\">\n          <button\n            type=\"button\"\n            class=\"icon-button\"\n            aria-label=\"Edit filter\"\n            (click)=\"editFilter(filter)\"\n          >\n            <!-- Only `stroke` is passed: `verben-svg` resolves a single colour as\n                 `fill || stroke` and applies it to both, so also passing `fill`\n                 would paint the icon in whatever `fill` holds. -->\n            <verben-svg\n              icon=\"edit\"\n              [width]=\"15\"\n              [height]=\"15\"\n              stroke=\"var(--vbn-color-border-focus)\"\n            ></verben-svg>\n          </button>\n          <button\n            type=\"button\"\n            class=\"icon-button\"\n            aria-label=\"Delete filter\"\n            [disabled]=\"isRequired(filter)\"\n            (click)=\"deleteFilter(filter)\"\n          >\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              stroke=\"var(--vbn-color-error)\"\n            ></verben-svg>\n          </button>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"savedFilters.length > maxVisibleItems\"\n        class=\"show-more\"\n        (click)=\"showAllFilters = !showAllFilters\"\n      >\n        {{ showAllFilters ? \"Show Less\" : \"Show More\" }}\n      </div>\n    </section>\n\n    <hr class=\"divider\" />\n\n    <!-- New Filter Operation -->\n    <section class=\"section\">\n      <div class=\"section-header\">\n        <h3 class=\"section-title\">Operation</h3>\n        <verben-svg\n          icon=\"info\"\n          [width]=\"15\"\n          [height]=\"15\"\n          fill=\"var(--vbn-color-text-muted)\"\n        ></verben-svg>\n      </div>\n\n      <div class=\"operation-grid\">\n        <!-- Column Selection -->\n        <verben-drop-down\n          width=\"100%\"\n          height=\"1.025rem\"\n          placeholder=\"Select column\"\n          [options]=\"filterableColumns\"\n          optionLabel=\"header\"\n          optionValue=\"id\"\n          [disabled]=\"isEditingRequired\"\n          [(ngModel)]=\"currentFilter.columnId\"\n          (ngModelChange)=\"onColumnSelect($event)\"\n        ></verben-drop-down>\n\n        <!-- Operator Selection -->\n        <verben-drop-down\n          width=\"100%\"\n          height=\"1.025rem\"\n          placeholder=\"Select operator\"\n          [options]=\"availableOperators\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [(ngModel)]=\"currentFilter.operator\"\n        ></verben-drop-down>\n\n        <!-- Value Input based on type -->\n        <ng-container [ngSwitch]=\"currentColumnType\">\n          <!-- Date Input \u2014 native rather than the library date picker, whose\n               overlay renders off screen from this narrow panel. -->\n          <verbena-input\n            *ngSwitchCase=\"'date'\"\n            type=\"date\"\n            placeHolder=\"Select date\"\n            border=\"1px solid var(--vbn-color-border)\"\n            borderRadius=\"5px\"\n            textColor=\"var(--vbn-color-text)\"\n            width=\"100%\"\n            height=\"1.025rem\"\n            pd=\"2px 6px\"\n            [(ngModel)]=\"currentFilter.value\"\n          ></verbena-input>\n\n          <!-- Number Input -->\n          <verbena-input\n            *ngSwitchCase=\"'number'\"\n            type=\"number\"\n            placeHolder=\"Enter number\"\n            border=\"1px solid var(--vbn-color-border)\"\n            borderRadius=\"5px\"\n            textColor=\"var(--vbn-color-text)\"\n            width=\"100%\"\n            height=\"1.025rem\"\n            pd=\"2px 6px\"\n            [(ngModel)]=\"currentFilter.value\"\n          ></verbena-input>\n\n          <!-- Yes / No Selection -->\n          <verben-drop-down\n            *ngSwitchCase=\"'bool'\"\n            width=\"100%\"\n            height=\"1.025rem\"\n            placeholder=\"Select value\"\n            [options]=\"valueOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [(ngModel)]=\"currentFilter.value\"\n          ></verben-drop-down>\n\n          <!-- Enum Member Selection -->\n          <verben-drop-down\n            *ngSwitchCase=\"'enum'\"\n            width=\"100%\"\n            height=\"1.025rem\"\n            placeholder=\"Select value\"\n            [options]=\"valueOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [(ngModel)]=\"currentFilter.value\"\n          ></verben-drop-down>\n\n          <!-- Text Input (default) -->\n          <verbena-input\n            *ngSwitchDefault\n            type=\"text\"\n            placeHolder=\"Enter text\"\n            border=\"1px solid var(--vbn-color-border)\"\n            borderRadius=\"5px\"\n            textColor=\"var(--vbn-color-text)\"\n            width=\"100%\"\n            height=\"1.025rem\"\n            pd=\"2px 6px\"\n            [(ngModel)]=\"currentFilter.value\"\n          ></verbena-input>\n        </ng-container>\n      </div>\n\n      <div class=\"operation-actions\">\n        <button class=\"clear-button\" (click)=\"clearCurrentFilter()\">\n          Clear\n        </button>\n        <button class=\"add-button\" (click)=\"addFilter()\">+ Add</button>\n      </div>\n    </section>\n  </div>\n\n  <div card-footer class=\"card-footer\">\n    <button class=\"export-button\" (click)=\"applyFilters()\">Filter</button>\n  </div>\n</verben-card>\n", styles: [".export-card{font-size:.75rem;z-index:10}.card-header{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body,.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.item-editing{background-color:var(--vbn-color-surface-alt);border-radius:4px}.item-label{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.item-label label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.icon-button{display:inline-flex;align-items:center;padding:0;border:none;background-color:transparent;cursor:pointer}.icon-button[disabled]{cursor:not-allowed;opacity:.4}.show-more{display:flex;gap:.5em;align-items:center;color:var(--vbn-color-text-muted);cursor:pointer}.divider{border:none;border-top:1px solid var(--vbn-color-border)}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.operation-actions{display:flex;justify-content:flex-end;gap:.75rem}.add-button,.clear-button{margin-top:.5rem;outline:none;border:none;background-color:transparent;font-size:.75rem;font-weight:500;cursor:pointer}.add-button{color:var(--vbn-color-border-focus)}.clear-button{color:var(--vbn-color-text-muted)}.card-footer{display:flex;justify-content:flex-end;background-color:transparent}.export-button{margin-top:.5rem;outline:none;border:none;padding:.2rem 1.6rem;background-color:var(--vbn-color-primary);color:var(--vbn-color-on-primary);font-size:.75rem;font-weight:600;cursor:pointer}sup{color:var(--vbn-color-border-focus)}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], initialFilters: [{
+                type: Input
+            }], filterApplied: [{
+                type: Output
+            }], resetFilter: [{
+                type: Output
+            }] } });
+
+class DataFilterModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: DataFilterModule, declarations: [DataFilterComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            SvgModule,
+            CardModule,
+            DropDownModule,
+            TooltipModule,
+            VerbenaInputModule], exports: [DataFilterComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataFilterModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            SvgModule,
+            CardModule,
+            DropDownModule,
+            TooltipModule,
+            VerbenaInputModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DataFilterComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SvgModule,
+                        CardModule,
+                        DropDownModule,
+                        TooltipModule,
+                        VerbenaInputModule,
+                    ],
+                    exports: [DataFilterComponent],
+                }]
+        }] });
+
+class DataFilterService {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataFilterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataFilterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BOOL_OPERATORS, DATE_OPERATORS, DataFilterComponent, DataFilterModule, DataFilterService, ENUM_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS };
+//# sourceMappingURL=verben-ng-ui-src-lib-components-data-filter.mjs.map