@progress/kendo-angular-filter 0.1.0

package/dist/es2015/filter-expression.component.js

@@ -0,0 +1,160 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { FilterService } from './filter.service';
+import { defaultOperators, getKeyByValue, isFilterEditor } from './util';
+/**
+ * @hidden
+ */
+let FilterExpressionComponent = class FilterExpressionComponent {
+    constructor(filterService, localization) {
+        this.filterService = filterService;
+        this.localization = localization;
+        this.valueChange = new EventEmitter();
+        this.operators = [];
+        this.filters = [];
+        this.isBoolean = false;
+        this.isEditorDisabled = false;
+    }
+    ngOnInit() {
+        this.filters = this.filterService.filters;
+        if (this.currentItem.field) {
+            const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
+            this.setOperators(foundFilter);
+        }
+        if (!this.currentItem.field) {
+            this.currentItem.field = this.filterService.filters[0].field;
+            const defaultFilter = this.getFilterExpressionByField(this.filterService.filters[0].field);
+            this.setOperators(defaultFilter);
+        }
+    }
+    normalizeOperators(filterEditor, operators) {
+        let result = [];
+        for (let j = 0; j < operators.length; j++) {
+            if (isFilterEditor(filterEditor)) {
+                result.push({
+                    value: operators[j],
+                    text: this.localization.get(getKeyByValue(defaultOperators[filterEditor], operators[j]))
+                });
+            }
+        }
+        return result;
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    getFilterExpressionByField(name) {
+        const foundFilter = this.filterService.filters.find(filter => filter.field === name);
+        if (foundFilter) {
+            return foundFilter;
+        }
+        return null;
+    }
+    filterValueChange(value) {
+        this.currentItem.value = null;
+        this.currentItem.field = value;
+        const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
+        this.setOperators(foundFilter);
+        this.valueChange.emit();
+    }
+    getDefaultOperators(operatorsType) {
+        switch (operatorsType) {
+            case 'string':
+                return this.filterService.defaultStringOperators;
+            case 'number':
+                return this.filterService.defaultNumericOperators;
+            case 'date':
+                return this.filterService.defaultDateOperators;
+            default:
+                break;
+        }
+    }
+    getEditorType() {
+        let item = this.filterService.filters.find((filterExpression) => filterExpression.field === this.currentItem.field);
+        return item.editor;
+    }
+    removeFilterExpression() {
+        this.filterService.remove(this.currentItem, this.index);
+        this.valueChange.emit();
+    }
+    setOperators(filter) {
+        this.isBoolean = filter.editor === 'boolean';
+        if (this.isBoolean) {
+            return;
+        }
+        if (filter.operators) {
+            const localizedOperators = this.normalizeOperators(filter.editor, filter.operators);
+            this.operators = localizedOperators;
+            this.currentItem.operator = localizedOperators[0].value;
+        }
+        else {
+            this.operators = this.getDefaultOperators(filter.editor);
+            this.currentItem.operator = this.operators[0].value;
+        }
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Number)
+], FilterExpressionComponent.prototype, "index", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], FilterExpressionComponent.prototype, "currentItem", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], FilterExpressionComponent.prototype, "valueChange", void 0);
+FilterExpressionComponent = tslib_1.__decorate([
+    Component({
+        selector: 'kendo-filter-expression',
+        template: `
+        <div class="k-filter-toolbar" role="group" [attr.aria-label]="messageFor('filterAriaLabel')">
+            <div class="k-toolbar">
+                <div class="k-filter-toolbar-item k-filter-field">
+                    <kendo-dropdownlist
+                        [kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
+                        [title]="messageFor('filterExpressionFilters')"
+                        [data]="filters"
+                        textField="title"
+                        valueField="field"
+                        [value]="currentItem.field"
+                        [valuePrimitive]="true"
+                        (valueChange)="filterValueChange($event)">
+                    </kendo-dropdownlist>
+                </div>
+                <div *ngIf="!isBoolean" class="k-filter-toolbar-item k-filter-operator">
+                    <kendo-filter-expression-operators
+                        [currentItem]="currentItem"
+                        [operators]="operators"
+                        (valueChange)="valueChange.emit();">
+                    </kendo-filter-expression-operators>
+                </div>
+
+                <ng-container [ngSwitch]="getEditorType()">
+                    <kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
+                    <kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
+                    <kendo-filter-boolean-editor *ngSwitchCase="'boolean'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-boolean-editor>
+                    <kendo-filter-date-editor *ngSwitchCase="'date'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
+                </ng-container>
+
+                <div class="k-filter-toolbar-item">
+                    <button
+                        kendoButton
+                        icon="close"
+                        look="flat"
+                        [title]="messageFor('remove')"
+                        (click)="removeFilterExpression()">
+                    </button>
+                </div>
+            </div>
+        </div>
+  `
+    }),
+    tslib_1.__metadata("design:paramtypes", [FilterService, LocalizationService])
+], FilterExpressionComponent);
+export { FilterExpressionComponent };

package/dist/es2015/filter-group.component.d.ts

@@ -0,0 +1,29 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter, OnInit } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
+import { FilterService } from './filter.service';
+/**
+ * @hidden
+ */
+export declare class FilterGroupComponent implements OnInit {
+    private filterService;
+    localization: LocalizationService;
+    index: number;
+    currentItem: CompositeFilterDescriptor;
+    valueChange: EventEmitter<void>;
+    logicOperators: {
+        text: string;
+        value: string;
+    }[];
+    constructor(filterService: FilterService, localization: LocalizationService);
+    ngOnInit(): void;
+    messageFor(key: string): string;
+    selectedChange(logicOperator: 'or' | 'and'): void;
+    addFilterExpression(): void;
+    addFilterGroup(): void;
+    removeFilterGroup(): void;
+}

package/dist/es2015/filter-group.component.js

@@ -0,0 +1,131 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { FilterService } from './filter.service';
+/**
+ * @hidden
+ */
+let FilterGroupComponent = class FilterGroupComponent {
+    constructor(filterService, localization) {
+        this.filterService = filterService;
+        this.localization = localization;
+        this.index = 0;
+        this.currentItem = {
+            logic: 'or',
+            filters: []
+        };
+        this.valueChange = new EventEmitter();
+        this.logicOperators = [];
+    }
+    ngOnInit() {
+        this.logicOperators = this.filterService.logicOperators;
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    selectedChange(logicOperator) {
+        if (this.currentItem.logic !== logicOperator) {
+            this.currentItem.logic = logicOperator;
+            this.valueChange.emit();
+        }
+    }
+    addFilterExpression() {
+        this.filterService.addFilterExpression(this.currentItem);
+        this.valueChange.emit();
+    }
+    addFilterGroup() {
+        this.filterService.addFilterGroup(this.currentItem);
+        this.valueChange.emit();
+    }
+    removeFilterGroup() {
+        this.filterService.remove(this.currentItem, this.index);
+        this.valueChange.emit();
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Number)
+], FilterGroupComponent.prototype, "index", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], FilterGroupComponent.prototype, "currentItem", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], FilterGroupComponent.prototype, "valueChange", void 0);
+FilterGroupComponent = tslib_1.__decorate([
+    Component({
+        selector: 'kendo-filter-group',
+        template: `
+        <div class="k-filter-toolbar" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')">
+          <div class="k-toolbar">
+            <div class="k-filter-toolbar-item">
+              <div class="k-widget k-button-group" role="group">
+              <button
+                    *ngFor="let operator of logicOperators"
+                    kendoButton
+                    [ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
+                    [selected]="currentItem.logic === operator.value"
+                    [title]="operator.text"
+                    (click)="selectedChange(operator.value)"
+                    >
+                    {{operator.text}}
+                  </button>
+              </div>
+            </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                [title]="messageFor('addExpression')"
+                icon="filter-add-expression"
+                (click)="addFilterExpression()">
+                {{messageFor('addExpression')}}
+            </button>
+          </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                [title]="messageFor('addGroup')"
+                icon="filter-add-group"
+                (click)="addFilterGroup()">
+                {{messageFor('addGroup')}}
+            </button>
+          </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                icon="close"
+                look="flat"
+                [title]="messageFor('remove')"
+                (click)="removeFilterGroup()">
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <ul class="k-filter-lines" *ngIf="currentItem.filters">
+        <ng-container *ngFor="let item of currentItem.filters; let i = index;">
+          <li class="k-filter-item" *ngIf="!item.filters">
+            <kendo-filter-expression (valueChange)="valueChange.emit()" [currentItem]="item" [index]="i">
+            </kendo-filter-expression>
+          </li>
+          <li class="k-filter-item" *ngIf="item.filters" >
+            <kendo-filter-group
+                (valueChange)="valueChange.emit()"
+                [currentItem]="item"
+                [index]="i"
+                >
+            </kendo-filter-group>
+          </li>
+        </ng-container>
+      </ul>
+  `
+    }),
+    tslib_1.__metadata("design:paramtypes", [FilterService, LocalizationService])
+], FilterGroupComponent);
+export { FilterGroupComponent };

package/dist/es2015/filter.component.d.ts

@@ -0,0 +1,80 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OnInit, EventEmitter } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { FilterService } from './filter.service';
+import { CompositeFilterDescriptor, FilterDescriptor } from '@progress/kendo-data-query';
+import { FilterExpression } from './model/filter-expression';
+import { Direction } from './util';
+import { ChangeDetectorRef } from '@angular/core';
+import { OnDestroy } from '@angular/core';
+/**
+ * Represents the [Kendo UI Filter component for Angular]({% slug overview_filter %}).
+ * The Filter component can be used to apply any user defined filter criteria.
+ * @example
+ * ```
+ *   @Component({
+ *       selector: 'my-app',
+ *       template: `
+ *          <kendo-filter [filters]="filters" (valueChange)="onValueChange($event)"></kendo-filter>
+ *       `
+ *   })
+ *   export class AppComponent {
+ *
+ *      public filters: FilterExpression[] = [
+ *          {
+ *              name: 'country',
+ *              label: 'Country',
+ *              filter: 'string',
+ *              operators: ['eq', 'neq'],
+ *          },
+ *          {
+ *              name: 'budget',
+ *              filter: 'number'
+ *          }
+ *      ];
+ *
+ *      onValueChange(e: CompositeFilterDescriptor){
+ *          console.log(e)
+ *      }
+ *  }
+ * ```
+ */
+export declare class FilterComponent implements OnInit, OnDestroy {
+    private filterService;
+    private localization;
+    private cdr;
+    direction: Direction;
+    /**
+     * Specifies the available user-defined filters. At least one filter should be provided.
+     */
+    filters: FilterExpression[];
+    /**
+     * Sets the initial `value` of the Filter component.
+     */
+    value: CompositeFilterDescriptor;
+    /**
+     * Fires every time the Filter component value is updated.
+     * That is each time a Filter Group or Filter Expression is added, removed, or updated.
+     */
+    valueChange: EventEmitter<CompositeFilterDescriptor>;
+    constructor(filterService: FilterService, localization: LocalizationService, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    getCurrentFilter(): CompositeFilterDescriptor;
+    /**
+     * @hidden
+     */
+    getCurrentFilterChildren(): (CompositeFilterDescriptor | FilterDescriptor)[];
+    /**
+     * @hidden
+     */
+    onValueChange(): void;
+    private normalizeFilter;
+    private normalizeValue;
+}