feat(platform): smart filter bar

angular.json

@@ -5159,6 +5159,47 @@
             "tags": ["fdp"],
             "implicitDependencies": ["core"]
         },
+        "platform-smart-filter-bar": {
+            "projectType": "library",
+            "root": "libs/platform/src/lib/smart-filter-bar",
+            "sourceRoot": "libs/platform/src/lib/smart-filter-bar",
+            "prefix": "fdp",
+            "architect": {
+                "build": {
+                    "builder": "@nrwl/angular:package",
+                    "outputs": ["dist/libs/platform/smart-filter-bar"],
+                    "options": {
+                        "tsConfig": "libs/platform/src/lib/smart-filter-bar/tsconfig.lib.json",
+                        "project": "libs/platform/src/lib/smart-filter-bar/ng-package.json",
+                        "updateBuildableProjectDepsInPackageJson": false
+                    },
+                    "configurations": {
+                        "production": {
+                            "tsConfig": "libs/platform/src/lib/smart-filter-bar/tsconfig.lib.prod.json"
+                        }
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "libs/platform/src/lib/smart-filter-bar/test.ts",
+                        "tsConfig": "libs/platform/src/lib/smart-filter-bar/tsconfig.spec.json",
+                        "karmaConfig": "libs/platform/src/lib/smart-filter-bar/karma.conf.js"
+                    }
+                },
+                "lint": {
+                    "builder": "@nrwl/linter:eslint",
+                    "options": {
+                        "lintFilePatterns": [
+                            "libs/platform/src/lib/smart-filter-bar/**/*.ts",
+                            "libs/platform/src/lib/smart-filter-bar/**/*.html"
+                        ]
+                    }
+                }
+            },
+            "tags": ["fdp"],
+            "implicitDependencies": ["core"]
+        },
         "platform-split-menu-button": {
             "projectType": "library",
             "root": "libs/platform/src/lib/split-menu-button",

apps/docs/src/app/platform/api-files.ts

@@ -98,5 +98,15 @@ export const API_FILES = {
         'IconTabBarFilterTypeComponent',
         'IconTabBarPopoverComponent',
         'TextTypePopoverComponent'
+    ],
+    smartFilterBar: [
+        'SmartFilterBarComponent',
+        'SmartFilterBarConditionFieldComponent',
+        'SmartFilterBarConditionsDialogComponent',
+        'SmartFilterBarFieldDefinitionDirective',
+        'SmartFilterBarService',
+        'SmartFilterBarSubjectDirective',
+        'SmartFilterBarOptionsDataProvider',
+        'SmartFilterBarSettingsDialogComponent'
     ]
 };

apps/docs/src/app/platform/component-docs/platform-smart-filter-bar/platform-smart-filter-bar-docs.component.html

@@ -0,0 +1,107 @@
+<fd-docs-section-title id="basic" componentName="smart-filter-bar">Simple example</fd-docs-section-title>
+<description>
+    <p>The <b>Smart Filter Bar</b> component analyzes provided data source with the help of two directives:</p>
+    <ul>
+        <li>
+            <code>fdp-smart-filter-bar-subject</code> is used to define subject component which provides the data
+            source;
+        </li>
+        <li>
+            <code>fdp-smart-filter-bar-field-definition</code> is used to provide configuration metadata for the data
+            source fields.
+        </li>
+    </ul>
+    <p>
+        Default set of selected filters can be defined by using <code>[defaultSelected]="true"</code> input properties
+        for each <code>fdp-smart-filter-bar-field-definition</code> directive.
+    </p>
+    <p>
+        By default, conditions for one field are combined with <b>or</b> operator. This can be changed by providing
+        <code>conditionStrategy="and"</code> input property for
+        <code>fdp-smart-filter-bar-field-definition</code> directive
+    </p>
+</description>
+<component-example>
+    <fdp-platform-smart-filter-bar-basic-example></fdp-platform-smart-filter-bar-basic-example>
+</component-example>
+<code-example [exampleFiles]="sfbBasic"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="custom-datasource" componentName="smart-filter-bar"
+    >Custom data provider example</fd-docs-section-title
+>
+<description>
+    <p>
+        Smart Filter Bar supports custom data providers that are based on <code>TableDataProvider</code> or
+        <code>ObservableTableDataProvider</code>.
+    </p>
+    <p>
+        These base classes already implement filtering and searching, yet, developers can override those methods to
+        achieve desired behaviour.
+    </p>
+</description>
+<component-example>
+    <fdp-smart-filter-bar-observable-example></fdp-smart-filter-bar-observable-example>
+</component-example>
+<code-example [exampleFiles]="sfbCustomDataSource"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="custom-filter" componentName="smart-filter-bar">
+    Custom filters example
+</fd-docs-section-title>
+<description>
+    <p>Developers can extend Smart Filter Bar's set of filters by providing their custom components.</p>
+    <p>
+        Smart filter bar uses Form Generator component for rendering the forms, so the process of creating custom
+        filters will be similar to the creation of the custom controls for Form Generator.
+    </p>
+    <p>Developers can define following custom properties of the filter:</p>
+    <ul>
+        <li><code>conditionComponent</code>: Used in <code>Define Conditions</code> dialog.</li>
+        <li><code>conditionRenderer</code>: Used in <code>Smart filter bar</code> form.</li>
+        <li><code>filterStrategies</code>: Used in <code>Define Conditions</code> dialog.</li>
+        <li>
+            <code>valueTransformer</code>: Used for transforming raw control value into
+            <code>SmartFilterBarCondition</code> interface.
+        </li>
+        <li>
+            <code>valueRenderer</code>: Used for transforming raw control value into human-readable string which is
+            displayed in Smart Filter Bar.
+        </li>
+    </ul>
+</description>
+<component-example>
+    <fdp-platform-smart-filter-bar-custom-filter-example></fdp-platform-smart-filter-bar-custom-filter-example>
+</component-example>
+<code-example [exampleFiles]="sfbCustomFilters"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="custom-labels" componentName="smart-filter-bar">
+    Smart filter bar with custom labels
+</fd-docs-section-title>
+<description>
+    <p>
+        Developers can easily change Condition operator and Filter Visibility category labels by providing appropriate
+        input properties.
+    </p>
+</description>
+<component-example>
+    <fdp-platform-smart-filter-bar-custom-labels-example></fdp-platform-smart-filter-bar-custom-labels-example>
+</component-example>
+<code-example [exampleFiles]="sfbCustomLabels"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="dynamic-page" componentName="smart-filter-bar">
+    Smart filter bar in Dynamic Page
+</fd-docs-section-title>
+<description>
+    <p>This example shows how to embed Smart Filter Bar into Dynamic Page component.</p>
+</description>
+<component-example>
+    <fdp-platform-smart-filter-bar-dynamic-page-example></fdp-platform-smart-filter-bar-dynamic-page-example>
+</component-example>
+<code-example [exampleFiles]="sfbDynamicPage"></code-example>

apps/docs/src/app/platform/component-docs/platform-smart-filter-bar/platform-smart-filter-bar-docs.component.ts

@@ -0,0 +1,93 @@
+import { Component } from '@angular/core';
+import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
+
+import platformBasicSfbSrc from '!./platform-smart-filter-bar-examples/platform-smart-filter-bar-basic-example.component.html?raw';
+import platformBasicSfbTsCode from '!./platform-smart-filter-bar-examples/platform-smart-filter-bar-basic-example.component.ts?raw';
+
+import platformSfbCustomDataSourceSrc from '!./platform-smart-filter-bar-examples/platform-smart-filter-bar-observable-example.component.html?raw';
+import platformSfbCustomDataSourceTsCode from '!./platform-smart-filter-bar-examples/platform-smart-filter-bar-observable-example.component.ts?raw';
+
+import platformSfbCustomFiltersSrc from '!./platform-smart-filter-bar-examples/platform-smart-filter-bar-custom-filter-example.component.html?raw';
+import platformSfbCustomFiltersTsCode from '!./platform-smart-filter-bar-examples/platform-smart-filter-bar-custom-filter-example.component.ts?raw';
+
+import platformSfbCustomLabelsSrc from '!./platform-smart-filter-bar-examples/platform-smart-filter-bar-custom-labels-example.component.html?raw';
+import platformSfbCustomLabelsTsCode from '!./platform-smart-filter-bar-examples/platform-smart-filter-bar-custom-labels-example.component.ts?raw';
+
+import platformSfbDynamicPageSrc from '!./platform-smart-filter-bar-examples/platform-smart-filter-bar-dynamic-page-example.component.html?raw';
+import platformSfbDynamicPageTsCode from '!./platform-smart-filter-bar-examples/platform-smart-filter-bar-dynamic-page-example.component.ts?raw';
+
+@Component({
+    selector: 'app-smart-filter-bar',
+    templateUrl: './platform-smart-filter-bar-docs.component.html'
+})
+export class PlatformSmartFilterBarDocsComponent {
+    sfbBasic: ExampleFile[] = [
+        {
+            language: 'html',
+            code: platformBasicSfbSrc,
+            fileName: 'platform-smart-filter-bar-basic-example'
+        },
+        {
+            language: 'typescript',
+            code: platformBasicSfbTsCode,
+            fileName: 'platform-smart-filter-bar-basic-example',
+            component: 'PlatformSmartFilterBarBasicExampleComponent'
+        }
+    ];
+
+    sfbCustomDataSource: ExampleFile[] = [
+        {
+            language: 'html',
+            code: platformSfbCustomDataSourceSrc,
+            fileName: 'platform-smart-filter-bar-observable-example'
+        },
+        {
+            language: 'typescript',
+            code: platformSfbCustomDataSourceTsCode,
+            fileName: 'platform-smart-filter-bar-observable-example',
+            component: 'PlatformSmartFilterBarObservableExampleComponent'
+        }
+    ];
+
+    sfbCustomFilters: ExampleFile[] = [
+        {
+            language: 'html',
+            code: platformSfbCustomFiltersSrc,
+            fileName: 'platform-smart-filter-bar-custom-filter-example'
+        },
+        {
+            language: 'typescript',
+            code: platformSfbCustomFiltersTsCode,
+            fileName: 'platform-smart-filter-bar-custom-filter-example',
+            component: 'PlatformSmartFilterBarCustomFilterExampleComponent'
+        }
+    ];
+
+    sfbCustomLabels: ExampleFile[] = [
+        {
+            language: 'html',
+            code: platformSfbCustomLabelsSrc,
+            fileName: 'platform-smart-filter-bar-custom-labels-example'
+        },
+        {
+            language: 'typescript',
+            code: platformSfbCustomLabelsTsCode,
+            fileName: 'platform-smart-filter-bar-custom-labels-example',
+            component: 'PlatformSmartFilterBarCustomLabelsExampleComponent'
+        }
+    ];
+
+    sfbDynamicPage: ExampleFile[] = [
+        {
+            language: 'html',
+            code: platformSfbDynamicPageSrc,
+            fileName: 'platform-smart-filter-bar-dynamic-page-example'
+        },
+        {
+            language: 'typescript',
+            code: platformSfbDynamicPageTsCode,
+            fileName: 'platform-smart-filter-bar-dynamic-page-example',
+            component: 'PlatformSmartFilterBarDynamicPageExampleComponent'
+        }
+    ];
+}

apps/docs/src/app/platform/component-docs/platform-smart-filter-bar/platform-smart-filter-bar-examples/platform-smart-filter-bar-basic-example.component.html

@@ -0,0 +1,88 @@
+<fdp-smart-filter-bar [subject]="subject"></fdp-smart-filter-bar>
+<br />
+<h4 fd-title>Line Items</h4>
+<br />
+<fdp-table
+    fdp-smart-filter-bar-subject
+    #subject="fdp-smart-filter-bar-subject"
+    [dataSource]="source"
+    [trackBy]="trackBy"
+    emptyTableMessage="No data found"
+>
+    <fdp-column
+        fdp-smart-filter-bar-field-definition
+        filterable="true"
+        name="name"
+        key="name"
+        label="Name"
+        defaultSelected="true"
+        align="start"
+    >
+    </fdp-column>
+
+    <fdp-column
+        fdp-smart-filter-bar-field-definition
+        filterable="true"
+        name="description"
+        key="description"
+        defaultSelected="true"
+        label="Description"
+    >
+    </fdp-column>
+
+    <fdp-column
+        fdp-smart-filter-bar-field-definition
+        filterable="true"
+        dataType="number"
+        name="price"
+        key="price.value"
+        label="Price"
+        align="end"
+    >
+    </fdp-column>
+
+    <fdp-column
+        fdp-smart-filter-bar-field-definition
+        filterType="multi-select"
+        filterable="true"
+        name="status"
+        key="status"
+        label="Status"
+        required="true"
+        align="center"
+        hasOptions="true"
+    >
+    </fdp-column>
+
+    <fdp-column
+        fdp-smart-filter-bar-field-definition
+        filterType="single-select"
+        filterable="true"
+        name="statusColor"
+        key="statusColor"
+        label="Status color"
+        align="center"
+        hasOptions="true"
+    >
+    </fdp-column>
+
+    <fdp-column
+        fdp-smart-filter-bar-field-definition
+        filterable="true"
+        dataType="date"
+        name="date"
+        key="date"
+        label="Date"
+    ></fdp-column>
+
+    <fdp-column
+        fdp-smart-filter-bar-field-definition
+        filterable="true"
+        filterType="single-select"
+        dataType="boolean"
+        name="verified"
+        key="verified"
+        label="Verified"
+        hasOptions="true"
+    ></fdp-column>
+</fdp-table>