imng-kendo-grid-filtering/fesm2022/imng-kendo-grid-filtering.mjs

This library was generated with [Nx](https://nx.dev).

import * as i0 from '@angular/core';
import { inject, ChangeDetectorRef, ElementRef, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1$1 from '@progress/kendo-angular-grid';
import { FilterService, ColumnComponent, GridModule } from '@progress/kendo-angular-grid';
import { distinct, filterBy } from '@progress/kendo-data-query';
import { Subscriptions } from 'imng-ngrx-utils';

class MultiSelectFilterComponent {
    constructor() {
        this.filterService = inject(FilterService);
        this.changeDetectorRef = inject(ChangeDetectorRef);
        this.elementRef = inject(ElementRef);
        this.isPrimitive = false;
        this.odataState = {};
        this.data = [];
        this.textField = undefined;
        this.valueField = undefined;
        this.field = '';
        this.showTextFilter = true;
        this.currentData = [];
        this.value = [];
        this.textAccessor = (
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        dataItem) => this.isPrimitive || !this.textField ? dataItem : dataItem[this.textField];
        this.valueAccessor = (
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        dataItem) => this.isPrimitive || !this.valueField ? dataItem : dataItem[this.valueField];
    }
    ngAfterViewInit() {
        const submitButton = this.elementRef.nativeElement.parentNode.querySelector('.k-actions > button[type="submit"]');
        if (submitButton) {
            submitButton.style.display = 'none';
        }
        this.currentData = this.data;
        const tempValue = this.odataState?.filter?.filters.map((f) => f.filters
            .filter((x) => x.field === this.field)
            .map((x) => x.value));
        this.value = tempValue?.length ? tempValue?.flat() || [] : [];
        this.showTextFilter =
            this.showTextFilter &&
                typeof this.textAccessor(this.currentData[0]) === 'string';
        this.changeDetectorRef.markForCheck();
    }
    isItemSelected(item) {
        return this.value.some((x) => x === this.valueAccessor(item));
    }
    onSelectionChange(item, li) {
        if (this.value.some((x) => x === item)) {
            this.value = this.value.filter((x) => x !== item);
        }
        else {
            this.value.push(item);
        }
        const currentFilter = {
            logic: this.odataState?.filter?.logic ?? 'and',
            filters: this.odataState?.filter?.filters ?? [],
        };
        if (currentFilter.filters.some((x) => x.filters.some((f) => f.field === this.field))) {
            currentFilter.filters = currentFilter.filters.filter((x) => !x.filters.some((f) => f.field === this.field));
        }
        if (this.value.length > 0) {
            currentFilter.filters = [
                ...currentFilter.filters,
                {
                    logic: 'or',
                    filters: this.value.map((value) => ({
                        field: this.field,
                        operator: 'eq',
                        value,
                    })),
                },
            ];
        }
        this.filterService.filter(currentFilter);
        this.onFocus(li);
    }
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    onInput(e) {
        //NOSONAR
        this.currentData = distinct([
            ...this.currentData.filter((dataItem) => this.value.some((val) => val === this.valueAccessor(dataItem))),
            ...filterBy(this.data, {
                operator: 'contains',
                field: this.textField,
                value: e.target.value,
            }),
        ], this.textField);
        this.changeDetectorRef.markForCheck();
    }
    onFocus(li) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const ul = li.parentNode; //NOSONAR
        const below = ul.scrollTop + ul.offsetHeight < li.offsetTop + li.offsetHeight;
        const above = li.offsetTop < ul.scrollTop;
        // Scroll to focused checkbox
        if (below || above) {
            ul.scrollTop = li.offsetTop;
        }
        this.changeDetectorRef.markForCheck();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MultiSelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: MultiSelectFilterComponent, isStandalone: false, selector: "imng-multi-select-filter", inputs: { isPrimitive: "isPrimitive", odataState: "odataState", data: "data", textField: "textField", valueField: "valueField", field: "field", showTextFilter: "showTextFilter" }, ngImport: i0, template: `
    <ul>
      @if (showTextFilter) {
        <li>
          <input class="k-textbox" (input)="onInput($event)" />
        </li>
      }
      @for (item of currentData; track item; let i = $index) {
        <li
          #itemElement
          (click)="onSelectionChange(valueAccessor(item), itemElement)"
          [ngClass]="{ 'k-state-selected': isItemSelected(item) }">
          <input
            type="checkbox"
            id="chk-{{ valueAccessor(item) }}"
            (focus)="onFocus(itemElement)"
            class="k-checkbox"
            [checked]="isItemSelected(item)" />
          <label
            class="k-multiselect-checkbox k-checkbox-label"
            for="chk-{{ valueAccessor(item) }}">
            {{ textAccessor(item) }}
          </label>
        </li>
      }
    </ul>
  `, isInline: true, styles: ["ul{list-style-type:none;height:200px;overflow-y:scroll;padding-left:0;padding-right:12px}ul>li{padding:8px 12px;border:1px solid rgba(0,0,0,.08);border-bottom:none}ul>li:last-of-type{border-bottom:1px solid rgba(0,0,0,.08)}.k-multiselect-checkbox{pointer-events:none}.k-checkbox{width:14px;height:15px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MultiSelectFilterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'imng-multi-select-filter', template: `
    <ul>
      @if (showTextFilter) {
        <li>
          <input class="k-textbox" (input)="onInput($event)" />
        </li>
      }
      @for (item of currentData; track item; let i = $index) {
        <li
          #itemElement
          (click)="onSelectionChange(valueAccessor(item), itemElement)"
          [ngClass]="{ 'k-state-selected': isItemSelected(item) }">
          <input
            type="checkbox"
            id="chk-{{ valueAccessor(item) }}"
            (focus)="onFocus(itemElement)"
            class="k-checkbox"
            [checked]="isItemSelected(item)" />
          <label
            class="k-multiselect-checkbox k-checkbox-label"
            for="chk-{{ valueAccessor(item) }}">
            {{ textAccessor(item) }}
          </label>
        </li>
      }
    </ul>
  `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: ["ul{list-style-type:none;height:200px;overflow-y:scroll;padding-left:0;padding-right:12px}ul>li{padding:8px 12px;border:1px solid rgba(0,0,0,.08);border-bottom:none}ul>li:last-of-type{border-bottom:1px solid rgba(0,0,0,.08)}.k-multiselect-checkbox{pointer-events:none}.k-checkbox{width:14px;height:15px}\n"] }]
        }], propDecorators: { isPrimitive: [{
                type: Input
            }], odataState: [{
                type: Input
            }], data: [{
                type: Input
            }], textField: [{
                type: Input
            }], valueField: [{
                type: Input
            }], field: [{
                type: Input
            }], showTextFilter: [{
                type: Input
            }] } });

/**
 * How To Use:
 * <kendo-grid-column ...>
 *  <ng-template kendoGridFilterMenuTemplate let-filter>
      <imng-uuid-filter [filter]="filter"></imng-uuid-filter>
    </ng-template>
   <kendo-grid-column>
 */
class UuidFilterComponent {
    constructor() {
        this.filterService = inject(FilterService);
        this.column = inject(ColumnComponent);
        this.allSubscriptions = new Subscriptions();
        this.filter = null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UuidFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: UuidFilterComponent, isStandalone: false, selector: "imng-uuid-filter", inputs: { filter: "filter" }, ngImport: i0, template: `
    <kendo-grid-string-filter-menu
      [column]="column"
      [filter]="filter"
      [filterService]="filterService"
      [extra]="false"
      operator="eq">
      <kendo-filter-eq-operator />
    </kendo-grid-string-filter-menu>
  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { kind: "component", type: i1$1.StringFilterMenuComponent, selector: "kendo-grid-string-filter-menu", inputs: ["column", "filter", "extra", "filterService", "placeholder", "extraPlaceholder", "menuTabbingService"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UuidFilterComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'imng-uuid-filter',
                    template: `
    <kendo-grid-string-filter-menu
      [column]="column"
      [filter]="filter"
      [filterService]="filterService"
      [extra]="false"
      operator="eq">
      <kendo-filter-eq-operator />
    </kendo-grid-string-filter-menu>
  `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    standalone: false,
                }]
        }], ctorParameters: () => [], propDecorators: { filter: [{
                type: Input
            }] } });

class ImngKendoGridFilteringModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ImngKendoGridFilteringModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: ImngKendoGridFilteringModule, declarations: [MultiSelectFilterComponent,
            UuidFilterComponent], imports: [CommonModule, GridModule], exports: [MultiSelectFilterComponent, UuidFilterComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ImngKendoGridFilteringModule, imports: [CommonModule, GridModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ImngKendoGridFilteringModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, GridModule],
                    declarations: [
                        MultiSelectFilterComponent,
                        UuidFilterComponent
                    ],
                    exports: [MultiSelectFilterComponent, UuidFilterComponent]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { ImngKendoGridFilteringModule, MultiSelectFilterComponent, UuidFilterComponent };
//# sourceMappingURL=imng-kendo-grid-filtering.mjs.map