@pepperi-addons/ngx-lib 0.3.15-beta.60 → 0.3.15-beta.61

package/bundles/pepperi-addons-ngx-lib-smart-filters.umd.js

@@ -4,2008 +4,2008 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib']['smart-filters'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.flexLayout, global.ng.material.core, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.expansion, global.ng.material.icon, global.ng.material.formField, global.ng.material.input, global.ng.material.radio, global.ngxVirtualScroller, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].checkbox, global['pepperi-addons']['ngx-lib'].date, global['pepperi-addons']['ngx-lib'].select, global['pepperi-addons']['ngx-lib'].textbox, global['pepperi-addons']['ngx-lib'].search, global['pepperi-addons']['ngx-lib'].button, global['pepperi-addons']['ngx-lib'].icon, global['pepperi-addons']['ngx-lib']['group-buttons'], global.rxjs.operators, global.rxjs, global.translate));
 }(this, (function (exports, core, common, forms, flexLayout, core$2, checkbox, chips, expansion, icon$1, formField, input, radio, ngxVirtualScroller, ngxLib, checkbox$1, date, select, textbox, search, button, icon, groupButtons, operators, rxjs, core$1) { 'use strict';
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(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;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    /** @deprecated */
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    /** @deprecated */
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
-    };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(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;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from) {
+        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+            to[j] = from[i];
+        return to;
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var PepSmartFiltersComponent = /** @class */ (function () {
-        function PepSmartFiltersComponent(hostElement, layoutService) {
-            this.hostElement = hostElement;
-            this.layoutService = layoutService;
-            this.title = '';
-            this.filtersDataMap = new Map();
-            this._filters = [];
-            this._fields = [];
-            this._useAsWebComponent = false;
-            // @Output()
-            // filtersClear: EventEmitter<void> = new EventEmitter<void>();
-            this.filtersChange = new core.EventEmitter();
-            this.fieldToggleChange = new core.EventEmitter();
-            this.expansionPanelHeaderHeight = '*';
-        }
-        Object.defineProperty(PepSmartFiltersComponent.prototype, "filters", {
-            get: function () {
-                var _this = this;
-                this._filters = __spreadArray([], __read(this.filtersDataMap.keys())).map(function (key) {
-                    if (key) {
-                        return _this.filtersDataMap.get(key);
-                    }
-                });
-                return this._filters;
-            },
-            set: function (value) {
-                this._filters = value;
-                this.setupFilters(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepSmartFiltersComponent.prototype, "fields", {
-            get: function () {
-                return this._fields;
-            },
-            set: function (value) {
-                this._fields = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepSmartFiltersComponent.prototype, "useAsWebComponent", {
-            get: function () {
-                return this._useAsWebComponent;
-            },
-            set: function (value) {
-                if (value) {
-                    this.exportFunctionsOnHostElement();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepSmartFiltersComponent.prototype.exportFunctionsOnHostElement = function () {
-            // This is for web component usage for use those functions.
-            this.hostElement.nativeElement.clearFilters = this.clearFilters.bind(this);
-            this.hostElement.nativeElement.clearFilter = this.clearFilter.bind(this);
-            this.hostElement.nativeElement.toggleField = this.toggleField.bind(this);
-        };
-        PepSmartFiltersComponent.prototype.setupFilters = function (value) {
-            var _this = this;
-            this.filtersDataMap.clear();
-            if (value) {
-                value.forEach(function (filter) {
-                    // Validate before add the filter into the map.
-                    var currentField = null;
-                    if (_this.fields && _this.fields.length > 0) {
-                        currentField = _this.fields.find(function (field) { return field.id === filter.fieldId; });
-                    }
-                    if (currentField) {
-                        // Only if the operator is from the same type
-                        if (filter.operator.componentType.includes(currentField.componentType)) {
-                            var isOperatorUnitValid = true;
-                            if (filter.operatorUnit) {
-                                // Only if the operator unit is not from the same type
-                                if (!filter.operatorUnit.componentType.includes(currentField.componentType)) {
-                                    isOperatorUnitValid = false;
-                                }
-                            }
-                            // Add the filter.
-                            if (isOperatorUnitValid) {
-                                _this.filtersDataMap.set(filter.fieldId, filter);
-                            }
-                        }
-                    }
-                });
-            }
-        };
-        PepSmartFiltersComponent.prototype.raiseFiltersChange = function () {
-            this.filtersChange.emit(this.filters);
-        };
-        PepSmartFiltersComponent.prototype.toggleField = function (index, isOpen) {
-            this.fields[index].isOpen = isOpen;
-            this.fieldToggleChange.emit(this.fields[index]);
-        };
-        PepSmartFiltersComponent.prototype.clearFilters = function () {
-            this.filtersDataMap.clear();
-        };
-        PepSmartFiltersComponent.prototype.clearFilter = function (fieldId) {
-            this.filtersDataMap.delete(fieldId);
-        };
-        // Clear all the filters and raise event that filters has change.
-        PepSmartFiltersComponent.prototype.onFiltersClear = function () {
-            this.clearFilters();
-            this.raiseFiltersChange();
-        };
-        // Clear the filter and raise event that filters has change.
-        PepSmartFiltersComponent.prototype.onFilterClear = function (field) {
-            this.clearFilter(field.id);
-            this.raiseFiltersChange();
-        };
-        // Set the filter and raise event that filters has change.
-        PepSmartFiltersComponent.prototype.onFilterChange = function (field, filterData) {
-            this.clearFilter(field.id);
-            this.filtersDataMap.set(field.id, filterData);
-            this.raiseFiltersChange();
-        };
-        return PepSmartFiltersComponent;
-    }());
-    PepSmartFiltersComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-smart-filters',
-                    template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div *ngIf=\"fields?.length > 0\" class=\"title\">\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n        <mat-chip *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\n            class=\"clear-filter pep-button chip xs weak\">\n            <span class=\"body-xs ellipsis \">\n                {{ \"ACTIONS.CLEAR\" | translate}}\n            </span>\n        </mat-chip>\n    </div>\n\n    <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\n        <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\n            (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\n            <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\n                [expandedHeight]=\"expansionPanelHeaderHeight\">\n                <mat-panel-title class=\"pep-spacing-element-negative\">\n                    <div class=\"smart-filter-title-container\">\n                        <mat-icon class=\"pep-spacing-element\">\n                            <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\n                        </mat-icon>\n                        <span class=\"body-sm ellipsis\" [title]=\"field.name\">\n                            {{ field.name }}\n                        </span>\n                        <mat-chip *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\n                            (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\n                            <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\n                                {{ filtersDataMap.get(field.id).value?.first?.length }}\n                                <!-- {{ field.componentType === 'multi-select' ?\n                                filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\n                            </span>\n                            <mat-icon>\n                                <pep-icon name=\"system_close\"></pep-icon>\n                            </mat-icon>\n                        </mat-chip>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-content smart-filter-content\">\n                <ng-container [ngSwitch]=\"field.componentType\">\n                    <ng-container *ngSwitchCase=\"'boolean'\">\n                        <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-boolean-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'date'\">\n                        <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-date-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'multi-select'\">\n                        <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-multi-select-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'number'\">\n                        <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-number-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'text'\">\n                        <pep-text-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-text-filter>\n                    </ng-container>\n                    <!-- <div *ngSwitchDefault>\n                    </div> -->\n                </ng-container>\n            </div>\n        </mat-expansion-panel>\n    </mat-accordion>\n</div>",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".smart-filters-container .title{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center;justify-content:space-between}.smart-filters-container .title .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem);padding:0 .75rem;padding:0 var(--pep-spacing-md,.75rem)}.smart-filters-container .title .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container{display:grid;grid-auto-flow:column;grid-template-columns:auto 1fr auto;width:100%}.smart-filters-container .smart-filter-title-container>*{align-self:center}.smart-filters-container .smart-filter-title-container .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;-webkit-margin-end:.5rem;margin-inline-end:.5rem;-webkit-margin-end:var(--pep-spacing-sm,.5rem);margin-inline-end:var(--pep-spacing-sm,.5rem)}.smart-filters-container .smart-filter-title-container .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container .mat-icon pep-icon{height:.75rem;width:.75rem}", ".smart-filters-container .clear-filter.weak{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}.smart-filters-container .clear-filter.weak:hover{background:rgba(26,26,26,.16);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.16)}.smart-filters-container .clear-filter.weak:focus{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative;box-shadow:0 0 0 .25rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-xs,.25rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}.smart-filters-container .clear-filter.weak:focus:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.smart-filters-container .clear-filter.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}.smart-filters-container .clear-filter.weak:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}.smart-filters-container .clear-filter.weak:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.smart-filters-container .clear-filter.weak:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:rgba(26,26,26,.04)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)!important}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):after{border:unset}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}"]
-                },] }
-    ];
-    PepSmartFiltersComponent.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: ngxLib.PepLayoutService }
-    ]; };
-    PepSmartFiltersComponent.propDecorators = {
-        title: [{ type: core.Input }],
-        filters: [{ type: core.Input }],
-        fields: [{ type: core.Input }],
-        useAsWebComponent: [{ type: core.Input }],
-        filtersChange: [{ type: core.Output }],
-        fieldToggleChange: [{ type: core.Output }]
+    var PepSmartFiltersComponent = /** @class */ (function () {
+        function PepSmartFiltersComponent(hostElement, layoutService) {
+            this.hostElement = hostElement;
+            this.layoutService = layoutService;
+            this.title = '';
+            this.filtersDataMap = new Map();
+            this._filters = [];
+            this._fields = [];
+            this._useAsWebComponent = false;
+            // @Output()
+            // filtersClear: EventEmitter<void> = new EventEmitter<void>();
+            this.filtersChange = new core.EventEmitter();
+            this.fieldToggleChange = new core.EventEmitter();
+            this.expansionPanelHeaderHeight = '*';
+        }
+        Object.defineProperty(PepSmartFiltersComponent.prototype, "filters", {
+            get: function () {
+                var _this = this;
+                this._filters = __spreadArray([], __read(this.filtersDataMap.keys())).map(function (key) {
+                    if (key) {
+                        return _this.filtersDataMap.get(key);
+                    }
+                });
+                return this._filters;
+            },
+            set: function (value) {
+                this._filters = value;
+                this.setupFilters(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepSmartFiltersComponent.prototype, "fields", {
+            get: function () {
+                return this._fields;
+            },
+            set: function (value) {
+                this._fields = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepSmartFiltersComponent.prototype, "useAsWebComponent", {
+            get: function () {
+                return this._useAsWebComponent;
+            },
+            set: function (value) {
+                if (value) {
+                    this.exportFunctionsOnHostElement();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepSmartFiltersComponent.prototype.exportFunctionsOnHostElement = function () {
+            // This is for web component usage for use those functions.
+            this.hostElement.nativeElement.clearFilters = this.clearFilters.bind(this);
+            this.hostElement.nativeElement.clearFilter = this.clearFilter.bind(this);
+            this.hostElement.nativeElement.toggleField = this.toggleField.bind(this);
+        };
+        PepSmartFiltersComponent.prototype.setupFilters = function (value) {
+            var _this = this;
+            this.filtersDataMap.clear();
+            if (value) {
+                value.forEach(function (filter) {
+                    // Validate before add the filter into the map.
+                    var currentField = null;
+                    if (_this.fields && _this.fields.length > 0) {
+                        currentField = _this.fields.find(function (field) { return field.id === filter.fieldId; });
+                    }
+                    if (currentField) {
+                        // Only if the operator is from the same type
+                        if (filter.operator.componentType.includes(currentField.componentType)) {
+                            var isOperatorUnitValid = true;
+                            if (filter.operatorUnit) {
+                                // Only if the operator unit is not from the same type
+                                if (!filter.operatorUnit.componentType.includes(currentField.componentType)) {
+                                    isOperatorUnitValid = false;
+                                }
+                            }
+                            // Add the filter.
+                            if (isOperatorUnitValid) {
+                                _this.filtersDataMap.set(filter.fieldId, filter);
+                            }
+                        }
+                    }
+                });
+            }
+        };
+        PepSmartFiltersComponent.prototype.raiseFiltersChange = function () {
+            this.filtersChange.emit(this.filters);
+        };
+        PepSmartFiltersComponent.prototype.toggleField = function (index, isOpen) {
+            this.fields[index].isOpen = isOpen;
+            this.fieldToggleChange.emit(this.fields[index]);
+        };
+        PepSmartFiltersComponent.prototype.clearFilters = function () {
+            this.filtersDataMap.clear();
+        };
+        PepSmartFiltersComponent.prototype.clearFilter = function (fieldId) {
+            this.filtersDataMap.delete(fieldId);
+        };
+        // Clear all the filters and raise event that filters has change.
+        PepSmartFiltersComponent.prototype.onFiltersClear = function () {
+            this.clearFilters();
+            this.raiseFiltersChange();
+        };
+        // Clear the filter and raise event that filters has change.
+        PepSmartFiltersComponent.prototype.onFilterClear = function (field) {
+            this.clearFilter(field.id);
+            this.raiseFiltersChange();
+        };
+        // Set the filter and raise event that filters has change.
+        PepSmartFiltersComponent.prototype.onFilterChange = function (field, filterData) {
+            this.clearFilter(field.id);
+            this.filtersDataMap.set(field.id, filterData);
+            this.raiseFiltersChange();
+        };
+        return PepSmartFiltersComponent;
+    }());
+    PepSmartFiltersComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-smart-filters',
+                    template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div *ngIf=\"fields?.length > 0\" class=\"title\">\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n        <mat-chip *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\n            class=\"clear-filter pep-button chip xs weak\">\n            <span class=\"body-xs ellipsis \">\n                {{ \"ACTIONS.CLEAR\" | translate}}\n            </span>\n        </mat-chip>\n    </div>\n\n    <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\n        <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\n            (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\n            <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\n                [expandedHeight]=\"expansionPanelHeaderHeight\">\n                <mat-panel-title class=\"pep-spacing-element-negative\">\n                    <div class=\"smart-filter-title-container\">\n                        <mat-icon class=\"pep-spacing-element\">\n                            <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\n                        </mat-icon>\n                        <span class=\"body-sm ellipsis\" [title]=\"field.name\">\n                            {{ field.name }}\n                        </span>\n                        <mat-chip *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\n                            (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\n                            <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\n                                {{ filtersDataMap.get(field.id).value?.first?.length }}\n                                <!-- {{ field.componentType === 'multi-select' ?\n                                filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\n                            </span>\n                            <mat-icon>\n                                <pep-icon name=\"system_close\"></pep-icon>\n                            </mat-icon>\n                        </mat-chip>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-content smart-filter-content\">\n                <ng-container [ngSwitch]=\"field.componentType\">\n                    <ng-container *ngSwitchCase=\"'boolean'\">\n                        <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-boolean-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'date'\">\n                        <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-date-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'multi-select'\">\n                        <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-multi-select-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'number'\">\n                        <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-number-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'text'\">\n                        <pep-text-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-text-filter>\n                    </ng-container>\n                    <!-- <div *ngSwitchDefault>\n                    </div> -->\n                </ng-container>\n            </div>\n        </mat-expansion-panel>\n    </mat-accordion>\n</div>",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [".smart-filters-container .title{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center;justify-content:space-between}.smart-filters-container .title .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem);padding:0 .75rem;padding:0 var(--pep-spacing-md,.75rem)}.smart-filters-container .title .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container{display:grid;grid-auto-flow:column;grid-template-columns:auto 1fr auto;width:100%}.smart-filters-container .smart-filter-title-container>*{align-self:center}.smart-filters-container .smart-filter-title-container .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;-webkit-margin-end:.5rem;margin-inline-end:.5rem;-webkit-margin-end:var(--pep-spacing-sm,.5rem);margin-inline-end:var(--pep-spacing-sm,.5rem)}.smart-filters-container .smart-filter-title-container .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container .mat-icon pep-icon{height:.75rem;width:.75rem}", ".smart-filters-container .clear-filter.weak{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}.smart-filters-container .clear-filter.weak:hover{background:rgba(26,26,26,.16);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.16)}.smart-filters-container .clear-filter.weak:focus{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative;box-shadow:0 0 0 .25rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-xs,.25rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}.smart-filters-container .clear-filter.weak:focus:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.smart-filters-container .clear-filter.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}.smart-filters-container .clear-filter.weak:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}.smart-filters-container .clear-filter.weak:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.smart-filters-container .clear-filter.weak:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:rgba(26,26,26,.04)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)!important}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):after{border:unset}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}"]
+                },] }
+    ];
+    PepSmartFiltersComponent.ctorParameters = function () { return [
+        { type: core.ElementRef },
+        { type: ngxLib.PepLayoutService }
+    ]; };
+    PepSmartFiltersComponent.propDecorators = {
+        title: [{ type: core.Input }],
+        filters: [{ type: core.Input }],
+        fields: [{ type: core.Input }],
+        useAsWebComponent: [{ type: core.Input }],
+        filtersChange: [{ type: core.Output }],
+        fieldToggleChange: [{ type: core.Output }]
     };
 
-    var PepFilterActionsComponent = /** @class */ (function () {
-        function PepFilterActionsComponent() {
-            this.clearClick = new core.EventEmitter();
-            this.applyClick = new core.EventEmitter();
-        }
-        PepFilterActionsComponent.prototype.clear = function () {
-            this.clearClick.emit();
-        };
-        PepFilterActionsComponent.prototype.apply = function () {
-            this.applyClick.emit();
-        };
-        return PepFilterActionsComponent;
-    }());
-    PepFilterActionsComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-filter-actions',
-                    template: "<div [formGroup]=\"form\" class=\"filter-actions pep-spacing-element-negative\">\n    <button mat-button class=\"pep-spacing-element pep-button sm weak\" (click)=\"clear()\">\n        {{ 'ACTIONS.CLEAR' | translate }}\n    </button>\n    <button mat-button class=\"pep-spacing-element pep-button sm strong\" (click)=\"apply()\" [disabled]=\"form.invalid\">\n        {{ 'ACTIONS.APPLY' | translate }}\n    </button>\n</div>",
-                    styles: [".filter-actions{margin:1rem 0 calc(1rem / 2);margin:var(--pep-spacing-lg,1rem) 0 calc(var(--pep-spacing-lg, 1rem) / 2);display:flex;justify-content:flex-end}"]
-                },] }
-    ];
-    PepFilterActionsComponent.propDecorators = {
-        form: [{ type: core.Input }],
-        clearClick: [{ type: core.Output }],
-        applyClick: [{ type: core.Output }]
+    var PepFilterActionsComponent = /** @class */ (function () {
+        function PepFilterActionsComponent() {
+            this.clearClick = new core.EventEmitter();
+            this.applyClick = new core.EventEmitter();
+        }
+        PepFilterActionsComponent.prototype.clear = function () {
+            this.clearClick.emit();
+        };
+        PepFilterActionsComponent.prototype.apply = function () {
+            this.applyClick.emit();
+        };
+        return PepFilterActionsComponent;
+    }());
+    PepFilterActionsComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-filter-actions',
+                    template: "<div [formGroup]=\"form\" class=\"filter-actions pep-spacing-element-negative\">\n    <button mat-button class=\"pep-spacing-element pep-button sm weak\" (click)=\"clear()\">\n        {{ 'ACTIONS.CLEAR' | translate }}\n    </button>\n    <button mat-button class=\"pep-spacing-element pep-button sm strong\" (click)=\"apply()\" [disabled]=\"form.invalid\">\n        {{ 'ACTIONS.APPLY' | translate }}\n    </button>\n</div>",
+                    styles: [".filter-actions{margin:1rem 0 calc(1rem / 2);margin:var(--pep-spacing-lg,1rem) 0 calc(var(--pep-spacing-lg, 1rem) / 2);display:flex;justify-content:flex-end}"]
+                },] }
+    ];
+    PepFilterActionsComponent.propDecorators = {
+        form: [{ type: core.Input }],
+        clearClick: [{ type: core.Output }],
+        applyClick: [{ type: core.Output }]
     };
 
-    var IPepSmartFilterOperator = /** @class */ (function () {
-        function IPepSmartFilterOperator() {
-        }
-        return IPepSmartFilterOperator;
-    }());
-    var Equals = {
-        id: 'eq',
-        name: 'EQUAL',
-        short: '=',
-        componentType: [
-            'number',
-            'boolean',
-            // 'multi-select',
-            // 'date',
-            'text',
-            // 'auto-complete',
-            // 'select',
-        ],
-    };
-    var NotEqual = {
-        id: 'neq',
-        name: 'NOT_EQUAL',
-        short: '<>',
-        componentType: [
-            'number',
-            // 'multi-select',
-            // 'date',
-            'text',
-            // 'auto-complete',
-            // 'select',
-        ],
-    };
-    var LessThan = {
-        id: 'lt',
-        name: 'LESS_THEN',
-        short: '<',
-        componentType: ['number'],
-    };
-    // const LessThanOrEquals: IPepSmartFilterOperator = {
-    //     id: 'ltoe',
-    //     name: 'LESS_THEN_OR_EQUAL',
-    //     short: '<=',
-    //     type: ['number'],
-    // };
-    var GreaterThan = {
-        id: 'gt',
-        name: 'GREATER_THEN',
-        short: '>',
-        componentType: ['number'],
-    };
-    // const GreaterThanOrEquals: IPepSmartFilterOperator = {
-    //     id: 'gtoe',
-    //     name: 'GREATER_THEN_OR_EQUAL',
-    //     short: '>=',
-    //     type: ['number'],
-    // };
-    var NumberRange = {
-        id: 'numberRange',
-        name: 'NUMBER_RANGE',
-        short: 'Range',
-        componentType: ['number'],
-    };
-    var Contains = {
-        id: 'contains',
-        name: 'CONTAINS',
-        short: 'Contains',
-        componentType: ['text'],
-    };
-    var BeginsWith = {
-        id: 'beginsWith',
-        name: 'BEGINS_WITH',
-        short: 'Begins With',
-        componentType: ['text'],
-    };
-    var EndsWith = {
-        id: 'endsWith',
-        name: 'ENDS_WITH',
-        short: 'End With',
-        componentType: ['text'],
-    };
-    // const After: Operator = {
-    //     id: 'after',
-    //     name: 'After',
-    //     short: 'After',
-    //     type: ['date'],
-    // };
-    // const Before: Operator = {
-    //     id: 'before',
-    //     name: 'Before',
-    //     short: 'Before',
-    //     type: ['date'],
-    // };
-    var InTheLast = {
-        id: 'inTheLast',
-        name: 'IN_THE_LAST',
-        short: 'In the last',
-        componentType: ['date'],
-    };
-    var Today = {
-        id: 'today',
-        name: 'TODAY',
-        short: 'Today',
-        componentType: ['date'],
-    };
-    var ThisWeek = {
-        id: 'thisWeek',
-        name: 'THIS_WEEK',
-        short: 'This week',
-        componentType: ['date'],
-    };
-    var ThisMonth = {
-        id: 'thisMonth',
-        name: 'THIS_MONTH',
-        short: 'This month',
-        componentType: ['date'],
-    };
-    var DateRange = {
-        id: 'dateRange',
-        name: 'DATE_RANGE',
-        short: 'Range',
-        componentType: ['date'],
-    };
-    var DueIn = {
-        id: 'dueIn',
-        name: 'DUE_IN',
-        short: 'Due in',
-        componentType: ['date'],
-    };
-    var On = {
-        id: 'on',
-        name: 'ON',
-        short: 'On',
-        componentType: ['date'],
-    };
-    var NotInTheLast = {
-        id: 'notInTheLast',
-        name: 'NOT_IN_THE_LAST',
-        short: 'Not in the last',
-        componentType: ['date'],
-    };
-    var NotDueIn = {
-        id: 'notDueIn',
-        name: 'NOT_DUE_IN',
-        short: 'Not due in',
-        componentType: ['date'],
-    };
-    var IsEmpty = {
-        id: 'isEmpty',
-        name: 'IS_EMPTY',
-        short: 'Is empty',
-        componentType: ['date'],
-    };
-    var IsNotEmpty = {
-        id: 'isNotEmpty',
-        name: 'IS_NOT_EMPTY',
-        short: 'Is not empty',
-        componentType: ['date'],
-    };
-    var In = {
-        id: 'in',
-        name: 'IN',
-        short: 'In',
-        componentType: ['multi-select'],
-    };
-    var PepSmartFilterOperators = {
-        Equals: Equals,
-        NotEqual: NotEqual,
-        LessThan: LessThan,
-        // LessThanOrEquals: LessThanOrEquals,
-        GreaterThan: GreaterThan,
-        // GreaterThanOrEquals: GreaterThanOrEquals,
-        NumberRange: NumberRange,
-        Contains: Contains,
-        BeginsWith: BeginsWith,
-        EndsWith: EndsWith,
-        // After: After,
-        // Before: Before,
-        InTheLast: InTheLast,
-        Today: Today,
-        ThisWeek: ThisWeek,
-        ThisMonth: ThisMonth,
-        DateRange: DateRange,
-        DueIn: DueIn,
-        On: On,
-        NotInTheLast: NotInTheLast,
-        NotDueIn: NotDueIn,
-        IsEmpty: IsEmpty,
-        IsNotEmpty: IsNotEmpty,
-        In: In,
-    };
-    //additional operators to be added upon input flag
-    var InTheLastCalendar = {
-        id: 'inTheLastCalendar',
-        name: 'IN_THE_LAST_CALENDAR',
-        short: 'In the last (calendar)',
-        componentType: ['date'],
-    };
-    var NotInTheLastCalendar = {
-        id: 'notInTheLastCalendar',
-        name: 'NOT_IN_THE_LAST_CALENDAR',
-        short: 'Not in the last (calendar)',
-        componentType: ['date'],
-    };
-    var PepSmartFilterAdditionalOperators = {
-        InTheLastCalendar: InTheLastCalendar,
-        NotInTheLastCalendar: NotInTheLastCalendar
-    };
-    //additional variable operators to be added upon input variable fields
-    var EqualsToVariable = {
-        id: 'eqv',
-        name: 'EQUAL_TO_VARIABLE',
-        short: '=',
-        componentType: ['text', 'number', 'boolean', 'multi-select']
-    };
-    var NotEqualsToVariable = {
-        id: 'neqv',
-        name: 'NOT_EQUAL_TO_VARIABLE',
-        short: '<>',
-        componentType: ['boolean', 'multi-select']
-    };
-    var LessThanVariable = {
-        id: 'ltv',
-        name: 'LESS_THAN_VARIABLE',
-        short: '<',
-        componentType: ['number'],
-    };
-    var GreaterThanVariable = {
-        id: 'gtv',
-        name: 'GREATER_THAN_VARIABLE',
-        short: '>',
-        componentType: ['number'],
-    };
-    var DateRangeVariable = {
-        id: 'dateRangeVariable',
-        name: 'DATE_RANGE_VARIABLE',
-        short: 'Range Variable',
-        componentType: ['date'],
-    };
-    var PepSmartFilterVariableOperators = {
-        EqualsToVariable: EqualsToVariable,
-        NotEqualsToVariable: NotEqualsToVariable,
-        LessThanVariable: LessThanVariable,
-        GreaterThanVariable: GreaterThanVariable,
-        DateRangeVariable: DateRangeVariable
-    };
-    var IPepSmartFilterOperatorUnit = /** @class */ (function () {
-        function IPepSmartFilterOperatorUnit() {
-        }
-        return IPepSmartFilterOperatorUnit;
-    }());
-    var Days = {
-        id: 'days',
-        name: 'DAYS',
-        componentType: ['date'],
-    };
-    var Weeks = {
-        id: 'weeks',
-        name: 'WEEKS',
-        componentType: ['date'],
-    };
-    var Months = {
-        id: 'months',
-        name: 'MONTHS',
-        componentType: ['date'],
-    };
-    var Years = {
-        id: 'years',
-        name: 'YEARS',
-        componentType: ['date'],
-    };
-    var PepSmartFilterOperatorUnits = {
-        Days: Days,
-        Weeks: Weeks,
-        Months: Months,
-        Years: Years,
+    var IPepSmartFilterOperator = /** @class */ (function () {
+        function IPepSmartFilterOperator() {
+        }
+        return IPepSmartFilterOperator;
+    }());
+    var Equals = {
+        id: 'eq',
+        name: 'EQUAL',
+        short: '=',
+        componentType: [
+            'number',
+            'boolean',
+            // 'multi-select',
+            // 'date',
+            'text',
+            // 'auto-complete',
+            // 'select',
+        ],
+    };
+    var NotEqual = {
+        id: 'neq',
+        name: 'NOT_EQUAL',
+        short: '<>',
+        componentType: [
+            'number',
+            // 'multi-select',
+            // 'date',
+            'text',
+            // 'auto-complete',
+            // 'select',
+        ],
+    };
+    var LessThan = {
+        id: 'lt',
+        name: 'LESS_THEN',
+        short: '<',
+        componentType: ['number'],
+    };
+    // const LessThanOrEquals: IPepSmartFilterOperator = {
+    //     id: 'ltoe',
+    //     name: 'LESS_THEN_OR_EQUAL',
+    //     short: '<=',
+    //     type: ['number'],
+    // };
+    var GreaterThan = {
+        id: 'gt',
+        name: 'GREATER_THEN',
+        short: '>',
+        componentType: ['number'],
+    };
+    // const GreaterThanOrEquals: IPepSmartFilterOperator = {
+    //     id: 'gtoe',
+    //     name: 'GREATER_THEN_OR_EQUAL',
+    //     short: '>=',
+    //     type: ['number'],
+    // };
+    var NumberRange = {
+        id: 'numberRange',
+        name: 'NUMBER_RANGE',
+        short: 'Range',
+        componentType: ['number'],
+    };
+    var Contains = {
+        id: 'contains',
+        name: 'CONTAINS',
+        short: 'Contains',
+        componentType: ['text'],
+    };
+    var BeginsWith = {
+        id: 'beginsWith',
+        name: 'BEGINS_WITH',
+        short: 'Begins With',
+        componentType: ['text'],
+    };
+    var EndsWith = {
+        id: 'endsWith',
+        name: 'ENDS_WITH',
+        short: 'End With',
+        componentType: ['text'],
+    };
+    // const After: Operator = {
+    //     id: 'after',
+    //     name: 'After',
+    //     short: 'After',
+    //     type: ['date'],
+    // };
+    // const Before: Operator = {
+    //     id: 'before',
+    //     name: 'Before',
+    //     short: 'Before',
+    //     type: ['date'],
+    // };
+    var InTheLast = {
+        id: 'inTheLast',
+        name: 'IN_THE_LAST',
+        short: 'In the last',
+        componentType: ['date'],
+    };
+    var Today = {
+        id: 'today',
+        name: 'TODAY',
+        short: 'Today',
+        componentType: ['date'],
+    };
+    var ThisWeek = {
+        id: 'thisWeek',
+        name: 'THIS_WEEK',
+        short: 'This week',
+        componentType: ['date'],
+    };
+    var ThisMonth = {
+        id: 'thisMonth',
+        name: 'THIS_MONTH',
+        short: 'This month',
+        componentType: ['date'],
+    };
+    var DateRange = {
+        id: 'dateRange',
+        name: 'DATE_RANGE',
+        short: 'Range',
+        componentType: ['date'],
+    };
+    var DueIn = {
+        id: 'dueIn',
+        name: 'DUE_IN',
+        short: 'Due in',
+        componentType: ['date'],
+    };
+    var On = {
+        id: 'on',
+        name: 'ON',
+        short: 'On',
+        componentType: ['date'],
+    };
+    var NotInTheLast = {
+        id: 'notInTheLast',
+        name: 'NOT_IN_THE_LAST',
+        short: 'Not in the last',
+        componentType: ['date'],
+    };
+    var NotDueIn = {
+        id: 'notDueIn',
+        name: 'NOT_DUE_IN',
+        short: 'Not due in',
+        componentType: ['date'],
+    };
+    var IsEmpty = {
+        id: 'isEmpty',
+        name: 'IS_EMPTY',
+        short: 'Is empty',
+        componentType: ['date'],
+    };
+    var IsNotEmpty = {
+        id: 'isNotEmpty',
+        name: 'IS_NOT_EMPTY',
+        short: 'Is not empty',
+        componentType: ['date'],
+    };
+    var In = {
+        id: 'in',
+        name: 'IN',
+        short: 'In',
+        componentType: ['multi-select'],
+    };
+    var PepSmartFilterOperators = {
+        Equals: Equals,
+        NotEqual: NotEqual,
+        LessThan: LessThan,
+        // LessThanOrEquals: LessThanOrEquals,
+        GreaterThan: GreaterThan,
+        // GreaterThanOrEquals: GreaterThanOrEquals,
+        NumberRange: NumberRange,
+        Contains: Contains,
+        BeginsWith: BeginsWith,
+        EndsWith: EndsWith,
+        // After: After,
+        // Before: Before,
+        InTheLast: InTheLast,
+        Today: Today,
+        ThisWeek: ThisWeek,
+        ThisMonth: ThisMonth,
+        DateRange: DateRange,
+        DueIn: DueIn,
+        On: On,
+        NotInTheLast: NotInTheLast,
+        NotDueIn: NotDueIn,
+        IsEmpty: IsEmpty,
+        IsNotEmpty: IsNotEmpty,
+        In: In,
+    };
+    //additional operators to be added upon input flag
+    var InTheLastCalendar = {
+        id: 'inTheLastCalendar',
+        name: 'IN_THE_LAST_CALENDAR',
+        short: 'In the last (calendar)',
+        componentType: ['date'],
+    };
+    var NotInTheLastCalendar = {
+        id: 'notInTheLastCalendar',
+        name: 'NOT_IN_THE_LAST_CALENDAR',
+        short: 'Not in the last (calendar)',
+        componentType: ['date'],
+    };
+    var PepSmartFilterAdditionalOperators = {
+        InTheLastCalendar: InTheLastCalendar,
+        NotInTheLastCalendar: NotInTheLastCalendar
+    };
+    //additional variable operators to be added upon input variable fields
+    var EqualsToVariable = {
+        id: 'eqv',
+        name: 'EQUAL_TO_VARIABLE',
+        short: '=',
+        componentType: ['text', 'number', 'boolean', 'multi-select']
+    };
+    var NotEqualsToVariable = {
+        id: 'neqv',
+        name: 'NOT_EQUAL_TO_VARIABLE',
+        short: '<>',
+        componentType: ['boolean', 'multi-select']
+    };
+    var LessThanVariable = {
+        id: 'ltv',
+        name: 'LESS_THAN_VARIABLE',
+        short: '<',
+        componentType: ['number'],
+    };
+    var GreaterThanVariable = {
+        id: 'gtv',
+        name: 'GREATER_THAN_VARIABLE',
+        short: '>',
+        componentType: ['number'],
+    };
+    var DateRangeVariable = {
+        id: 'dateRangeVariable',
+        name: 'DATE_RANGE_VARIABLE',
+        short: 'Range Variable',
+        componentType: ['date'],
+    };
+    var PepSmartFilterVariableOperators = {
+        EqualsToVariable: EqualsToVariable,
+        NotEqualsToVariable: NotEqualsToVariable,
+        LessThanVariable: LessThanVariable,
+        GreaterThanVariable: GreaterThanVariable,
+        DateRangeVariable: DateRangeVariable
+    };
+    var IPepSmartFilterOperatorUnit = /** @class */ (function () {
+        function IPepSmartFilterOperatorUnit() {
+        }
+        return IPepSmartFilterOperatorUnit;
+    }());
+    var Days = {
+        id: 'days',
+        name: 'DAYS',
+        componentType: ['date'],
+    };
+    var Weeks = {
+        id: 'weeks',
+        name: 'WEEKS',
+        componentType: ['date'],
+    };
+    var Months = {
+        id: 'months',
+        name: 'MONTHS',
+        componentType: ['date'],
+    };
+    var Years = {
+        id: 'years',
+        name: 'YEARS',
+        componentType: ['date'],
+    };
+    var PepSmartFilterOperatorUnits = {
+        Days: Days,
+        Weeks: Weeks,
+        Months: Months,
+        Years: Years,
     };
 
-    var BaseFilterComponent = /** @class */ (function () {
-        function BaseFilterComponent(viewContainerRef, injector, resolver, builder, translate, validator, renderer) {
-            this.viewContainerRef = viewContainerRef;
-            this.injector = injector;
-            this.resolver = resolver;
-            this.builder = builder;
-            this.translate = translate;
-            this.validator = validator;
-            this.renderer = renderer;
-            this._fieldIdWithNoDots = '';
-            this.variableFieldOptions = [];
-            this.emitOnChange = false;
-            this.inline = false;
-            this.showActionButtons = true;
-            this.renderTitle = true;
-            this.showAdditionalOperators = false;
-            this.filterClear = new core.EventEmitter();
-            this.filterChange = new core.EventEmitter();
-            this.OPERATORS_TRANSLATION_PREFIX = 'SMART_FILTERS.OPERATORS';
-            this.OPERATOR_UNITS_TRANSLATION_PREFIX = 'SMART_FILTERS.OPERATOR_UNITS';
-            this._destroyed = new rxjs.Subject();
-        }
-        Object.defineProperty(BaseFilterComponent.prototype, "field", {
-            get: function () {
-                return this._field;
-            },
-            set: function (value) {
-                this._field = value;
-                this._fieldIdWithNoDots = value ? value.id.replace(/\./g, '_') : '';
-                this.setupForm();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BaseFilterComponent.prototype, "variableField", {
-            set: function (list) {
-                if (list === null || list === void 0 ? void 0 : list.length) {
-                    this.variableFieldOptions = list.map(function (item) {
-                        return {
-                            key: item,
-                            value: item
-                        };
-                    });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BaseFilterComponent.prototype, "filter", {
-            get: function () {
-                return this._filter;
-            },
-            set: function (value) {
-                this._filter = value;
-                this.setupFilter();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BaseFilterComponent.prototype, "parentForm", {
-            set: function (form) {
-                this._parentForm = form;
-                this.updateParentForm();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BaseFilterComponent.prototype, "operator", {
-            get: function () {
-                return this._operator;
-            },
-            set: function (operator) {
-                var _a;
-                if ((operator === null || operator === void 0 ? void 0 : operator.id) != ((_a = this._operator) === null || _a === void 0 ? void 0 : _a.id)) {
-                    // Validate operator
-                    var index = this.operators.findIndex(function (o) { return o.id === operator.id; });
-                    if (index >= 0) {
-                        this._operator = this.operators[index];
-                    }
-                    else {
-                        this._operator = this.operators[0];
-                    }
-                    this.form.reset();
-                    this.updateValidity();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BaseFilterComponent.prototype, "operatorUnit", {
-            get: function () {
-                return this._operatorUnit;
-            },
-            set: function (operatorUnit) {
-                // Validate operator unit
-                if (operatorUnit) {
-                    var index = this.operatorUnits.findIndex(function (ou) { return ou.id === operatorUnit.id; });
-                    if (index >= 0) {
-                        this._operatorUnit = this.operatorUnits[index];
-                    }
-                    else {
-                        this._operatorUnit = this.operatorUnits[0];
-                    }
-                }
-                else {
-                    this._operatorUnit = undefined;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BaseFilterComponent.prototype, "firstControlKey", {
-            get: function () {
-                return this.field ? this._fieldIdWithNoDots + "_first" : 'first';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BaseFilterComponent.prototype, "firstControl", {
-            get: function () {
-                return this.form.get(this.firstControlKey);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BaseFilterComponent.prototype, "secondControlKey", {
-            get: function () {
-                return this.field ? this._fieldIdWithNoDots + "_second" : 'second';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BaseFilterComponent.prototype, "secondControl", {
-            get: function () {
-                return this.form.get(this.secondControlKey);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        BaseFilterComponent.prototype.createActionsComponent = function () {
-            var _this = this;
-            var factory = this.resolver.resolveComponentFactory(PepFilterActionsComponent);
-            this.actionsContainerRef = factory.create(this.injector);
-            this.actionsContainerRef.instance.form = this.form;
-            this.actionsContainerRef.instance.applyClick.subscribe(function () { return _this.applyFilter(); });
-            this.actionsContainerRef.instance.clearClick.subscribe(function () { return _this.clearFilter(); });
-            this.viewContainerRef.insert(this.actionsContainerRef.hostView);
-        };
-        BaseFilterComponent.prototype.setupForm = function () {
-            var formValue = {};
-            formValue[this.firstControlKey] = [];
-            formValue[this.secondControlKey] = [];
-            // this.form.patchValue(formValue);        
-            this.form = this.builder.group(formValue);
-            // this.form[this.firstControlKey] = [];
-            // this.form[this.secondControlKey] = [];
-            this.setupOperators();
-            if (this.showActionButtons) {
-                this.createActionsComponent();
-            }
-        };
-        BaseFilterComponent.prototype.setupOperators = function () {
-            var _this = this;
-            var _a, _b, _c;
-            // Get the operators by componentType.
-            this.operators = Object.keys(PepSmartFilterOperators)
-                .filter(function (key) {
-                return PepSmartFilterOperators[key].componentType.includes(_this.field.componentType);
-            })
-                .map(function (key) { return PepSmartFilterOperators[key]; });
-            // Add additional operators
-            if (this.showAdditionalOperators) {
-                var additional = Object.keys(PepSmartFilterAdditionalOperators)
-                    .filter(function (key) {
-                    return PepSmartFilterAdditionalOperators[key].componentType.includes(_this.field.componentType);
-                })
-                    .map(function (key) { return PepSmartFilterAdditionalOperators[key]; });
-                this.operators = __spreadArray(__spreadArray([], __read(this.operators)), __read(additional));
-            }
-            //add variable operators
-            if ((_a = this.variableFieldOptions) === null || _a === void 0 ? void 0 : _a.length) {
-                var variables = Object.keys(PepSmartFilterVariableOperators)
-                    .filter(function (key) {
-                    return PepSmartFilterVariableOperators[key].componentType.includes(_this.field.componentType);
-                })
-                    .map(function (key) { return PepSmartFilterVariableOperators[key]; });
-                this.operators = __spreadArray(__spreadArray([], __read(this.operators)), __read(variables));
-            }
-            // Filter by from field.operators input if exist.
-            if (((_b = this.field.operators) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-                this.operators = this.operators.filter(function (o1) { return _this.field.operators.some(function (o2) { return o1.id === o2; }); });
-            }
-            // Get the operator units by componentType.
-            this.operatorUnits = Object.keys(PepSmartFilterOperatorUnits)
-                .filter(function (key) {
-                return PepSmartFilterOperatorUnits[key].componentType.includes(_this.field.componentType);
-            })
-                .map(function (key) { return PepSmartFilterOperatorUnits[key]; });
-            // Filter by from field.operatorsUnits input if exist.
-            if (((_c = this.field.operatorUnits) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-                this.operatorUnits = this.operatorUnits.filter(function (o1) { return _this.field.operatorUnits.some(function (o2) { return o1.id === o2; }); });
-            }
-            // Load translation before get the options in the children.
-            this.translate.get('SMART_FILTERS.TITLE').subscribe(function (res) {
-                _this.loadOperatorsOptions();
-            });
-        };
-        BaseFilterComponent.prototype.setupFilter = function () {
-            if (this.filter) {
-                this.operator = this.filter.operator;
-                this.operatorUnit = this.filter.operatorUnit;
-                var formValue = {};
-                formValue[this.firstControlKey] = this.filter.value.first;
-                formValue[this.secondControlKey] = this.filter.value.second;
-                this.form.patchValue(formValue);
-            }
-            else {
-                this.operator = this.getDefaultOperator();
-                this.operatorUnit = this.getDefaultOperatorUnit();
-                this.clearFilter(false);
-            }
-        };
-        BaseFilterComponent.prototype.updateParentForm = function () {
-            this._parentForm.setControl('fieldId', this.builder.control(this.field.id));
-            this._parentForm.setControl('fieldType', this.builder.control(this.field.type));
-            this._parentForm.setControl('operator', this.builder.control(this.operator));
-            this._parentForm.setControl('operatorUnit', this.builder.control(this.operatorUnit));
-            this._parentForm.setControl('values', this.builder.group({
-                first: this.firstControl,
-                second: this.secondControl
-            }));
-        };
-        BaseFilterComponent.prototype.getDestroyer = function () {
-            return operators.takeUntil(this._destroyed);
-        };
-        BaseFilterComponent.prototype.updateValidity = function () {
-            this.setFieldsStateAndValidators();
-            this.firstControl.updateValueAndValidity();
-            this.secondControl.updateValueAndValidity();
-        };
-        // Load the operators options from the translation.
-        BaseFilterComponent.prototype.loadOperatorsOptions = function () {
-            // Not implemented in the base
-        };
-        // Set default validators - some childs override this.
-        BaseFilterComponent.prototype.setFieldsStateAndValidators = function () {
-            this.firstControl.setValidators(forms.Validators.required);
-            this.secondControl.setValidators(forms.Validators.required);
-            this.secondControl.disable();
-        };
-        // Return undefined - some childs override this.
-        BaseFilterComponent.prototype.getDefaultOperatorUnit = function () {
-            return undefined;
-        };
-        BaseFilterComponent.prototype.initFilter = function () {
-            // Not implemented in the base
-        };
-        BaseFilterComponent.prototype.clearFilter = function (emitEvent) {
-            if (emitEvent === void 0) { emitEvent = true; }
-            this._filter = null;
-            this.form.reset();
-            this.initFilter();
-            if (emitEvent) {
-                this.filterClear.emit();
-            }
-        };
-        BaseFilterComponent.prototype.applyFilter = function () {
-            var filterValue = this.getFilterValue();
-            // If the filter is not null declare it, else - clear it.
-            if (filterValue) {
-                var filter = {
-                    fieldId: this.field.id,
-                    operator: this.operator,
-                    operatorUnit: this.operatorUnit,
-                    value: filterValue,
-                };
-                this._filter = filter;
-                this.filterChange.emit(filter);
-            }
-            else {
-                this.clearFilter();
-            }
-        };
-        BaseFilterComponent.prototype.ngOnInit = function () {
-            if (this.form) {
-                this.updateValidity();
-            }
-        };
-        BaseFilterComponent.prototype.ngOnChanges = function () {
-            // if (this.form) {
-            //     this.updateValidity();
-            // }
-        };
-        BaseFilterComponent.prototype.ngOnDestroy = function () {
-            this._destroyed.next();
-            this._destroyed.complete();
-            if (this.showActionButtons) {
-                this.actionsContainerRef.destroy();
-            }
-        };
-        return BaseFilterComponent;
-    }());
-    BaseFilterComponent.decorators = [
-        { type: core.Directive, args: [{},] }
-    ];
-    BaseFilterComponent.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: core.Injector },
-        { type: core.ComponentFactoryResolver },
-        { type: forms.FormBuilder },
-        { type: core$1.TranslateService },
-        { type: ngxLib.PepValidatorService },
-        { type: core.Renderer2 }
-    ]; };
-    BaseFilterComponent.propDecorators = {
-        field: [{ type: core.Input }],
-        variableField: [{ type: core.Input }],
-        filter: [{ type: core.Input }],
-        parentForm: [{ type: core.Input }],
-        emitOnChange: [{ type: core.Input }],
-        inline: [{ type: core.Input }],
-        showActionButtons: [{ type: core.Input }],
-        renderTitle: [{ type: core.Input }],
-        showAdditionalOperators: [{ type: core.Input }],
-        filterClear: [{ type: core.Output }],
-        filterChange: [{ type: core.Output }]
+    var BaseFilterComponent = /** @class */ (function () {
+        function BaseFilterComponent(viewContainerRef, injector, resolver, builder, translate, validator, renderer) {
+            this.viewContainerRef = viewContainerRef;
+            this.injector = injector;
+            this.resolver = resolver;
+            this.builder = builder;
+            this.translate = translate;
+            this.validator = validator;
+            this.renderer = renderer;
+            this._fieldIdWithNoDots = '';
+            this.variableFieldOptions = [];
+            this.emitOnChange = false;
+            this.inline = false;
+            this.showActionButtons = true;
+            this.renderTitle = true;
+            this.showAdditionalOperators = false;
+            this.filterClear = new core.EventEmitter();
+            this.filterChange = new core.EventEmitter();
+            this.OPERATORS_TRANSLATION_PREFIX = 'SMART_FILTERS.OPERATORS';
+            this.OPERATOR_UNITS_TRANSLATION_PREFIX = 'SMART_FILTERS.OPERATOR_UNITS';
+            this._destroyed = new rxjs.Subject();
+        }
+        Object.defineProperty(BaseFilterComponent.prototype, "field", {
+            get: function () {
+                return this._field;
+            },
+            set: function (value) {
+                this._field = value;
+                this._fieldIdWithNoDots = value ? value.id.replace(/\./g, '_') : '';
+                this.setupForm();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BaseFilterComponent.prototype, "variableField", {
+            set: function (list) {
+                if (list === null || list === void 0 ? void 0 : list.length) {
+                    this.variableFieldOptions = list.map(function (item) {
+                        return {
+                            key: item,
+                            value: item
+                        };
+                    });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BaseFilterComponent.prototype, "filter", {
+            get: function () {
+                return this._filter;
+            },
+            set: function (value) {
+                this._filter = value;
+                this.setupFilter();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BaseFilterComponent.prototype, "parentForm", {
+            set: function (form) {
+                this._parentForm = form;
+                this.updateParentForm();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BaseFilterComponent.prototype, "operator", {
+            get: function () {
+                return this._operator;
+            },
+            set: function (operator) {
+                var _a;
+                if ((operator === null || operator === void 0 ? void 0 : operator.id) != ((_a = this._operator) === null || _a === void 0 ? void 0 : _a.id)) {
+                    // Validate operator
+                    var index = this.operators.findIndex(function (o) { return o.id === operator.id; });
+                    if (index >= 0) {
+                        this._operator = this.operators[index];
+                    }
+                    else {
+                        this._operator = this.operators[0];
+                    }
+                    this.form.reset();
+                    this.updateValidity();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BaseFilterComponent.prototype, "operatorUnit", {
+            get: function () {
+                return this._operatorUnit;
+            },
+            set: function (operatorUnit) {
+                // Validate operator unit
+                if (operatorUnit) {
+                    var index = this.operatorUnits.findIndex(function (ou) { return ou.id === operatorUnit.id; });
+                    if (index >= 0) {
+                        this._operatorUnit = this.operatorUnits[index];
+                    }
+                    else {
+                        this._operatorUnit = this.operatorUnits[0];
+                    }
+                }
+                else {
+                    this._operatorUnit = undefined;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BaseFilterComponent.prototype, "firstControlKey", {
+            get: function () {
+                return this.field ? this._fieldIdWithNoDots + "_first" : 'first';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BaseFilterComponent.prototype, "firstControl", {
+            get: function () {
+                return this.form.get(this.firstControlKey);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BaseFilterComponent.prototype, "secondControlKey", {
+            get: function () {
+                return this.field ? this._fieldIdWithNoDots + "_second" : 'second';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BaseFilterComponent.prototype, "secondControl", {
+            get: function () {
+                return this.form.get(this.secondControlKey);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BaseFilterComponent.prototype.createActionsComponent = function () {
+            var _this = this;
+            var factory = this.resolver.resolveComponentFactory(PepFilterActionsComponent);
+            this.actionsContainerRef = factory.create(this.injector);
+            this.actionsContainerRef.instance.form = this.form;
+            this.actionsContainerRef.instance.applyClick.subscribe(function () { return _this.applyFilter(); });
+            this.actionsContainerRef.instance.clearClick.subscribe(function () { return _this.clearFilter(); });
+            this.viewContainerRef.insert(this.actionsContainerRef.hostView);
+        };
+        BaseFilterComponent.prototype.setupForm = function () {
+            var formValue = {};
+            formValue[this.firstControlKey] = [];
+            formValue[this.secondControlKey] = [];
+            // this.form.patchValue(formValue);        
+            this.form = this.builder.group(formValue);
+            // this.form[this.firstControlKey] = [];
+            // this.form[this.secondControlKey] = [];
+            this.setupOperators();
+            if (this.showActionButtons) {
+                this.createActionsComponent();
+            }
+        };
+        BaseFilterComponent.prototype.setupOperators = function () {
+            var _this = this;
+            var _a, _b, _c;
+            // Get the operators by componentType.
+            this.operators = Object.keys(PepSmartFilterOperators)
+                .filter(function (key) {
+                return PepSmartFilterOperators[key].componentType.includes(_this.field.componentType);
+            })
+                .map(function (key) { return PepSmartFilterOperators[key]; });
+            // Add additional operators
+            if (this.showAdditionalOperators) {
+                var additional = Object.keys(PepSmartFilterAdditionalOperators)
+                    .filter(function (key) {
+                    return PepSmartFilterAdditionalOperators[key].componentType.includes(_this.field.componentType);
+                })
+                    .map(function (key) { return PepSmartFilterAdditionalOperators[key]; });
+                this.operators = __spreadArray(__spreadArray([], __read(this.operators)), __read(additional));
+            }
+            //add variable operators
+            if ((_a = this.variableFieldOptions) === null || _a === void 0 ? void 0 : _a.length) {
+                var variables = Object.keys(PepSmartFilterVariableOperators)
+                    .filter(function (key) {
+                    return PepSmartFilterVariableOperators[key].componentType.includes(_this.field.componentType);
+                })
+                    .map(function (key) { return PepSmartFilterVariableOperators[key]; });
+                this.operators = __spreadArray(__spreadArray([], __read(this.operators)), __read(variables));
+            }
+            // Filter by from field.operators input if exist.
+            if (((_b = this.field.operators) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                this.operators = this.operators.filter(function (o1) { return _this.field.operators.some(function (o2) { return o1.id === o2; }); });
+            }
+            // Get the operator units by componentType.
+            this.operatorUnits = Object.keys(PepSmartFilterOperatorUnits)
+                .filter(function (key) {
+                return PepSmartFilterOperatorUnits[key].componentType.includes(_this.field.componentType);
+            })
+                .map(function (key) { return PepSmartFilterOperatorUnits[key]; });
+            // Filter by from field.operatorsUnits input if exist.
+            if (((_c = this.field.operatorUnits) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+                this.operatorUnits = this.operatorUnits.filter(function (o1) { return _this.field.operatorUnits.some(function (o2) { return o1.id === o2; }); });
+            }
+            // Load translation before get the options in the children.
+            this.translate.get('SMART_FILTERS.TITLE').subscribe(function (res) {
+                _this.loadOperatorsOptions();
+            });
+        };
+        BaseFilterComponent.prototype.setupFilter = function () {
+            if (this.filter) {
+                this.operator = this.filter.operator;
+                this.operatorUnit = this.filter.operatorUnit;
+                var formValue = {};
+                formValue[this.firstControlKey] = this.filter.value.first;
+                formValue[this.secondControlKey] = this.filter.value.second;
+                this.form.patchValue(formValue);
+            }
+            else {
+                this.operator = this.getDefaultOperator();
+                this.operatorUnit = this.getDefaultOperatorUnit();
+                this.clearFilter(false);
+            }
+        };
+        BaseFilterComponent.prototype.updateParentForm = function () {
+            this._parentForm.setControl('fieldId', this.builder.control(this.field.id));
+            this._parentForm.setControl('fieldType', this.builder.control(this.field.type));
+            this._parentForm.setControl('operator', this.builder.control(this.operator));
+            this._parentForm.setControl('operatorUnit', this.builder.control(this.operatorUnit));
+            this._parentForm.setControl('values', this.builder.group({
+                first: this.firstControl,
+                second: this.secondControl
+            }));
+        };
+        BaseFilterComponent.prototype.getDestroyer = function () {
+            return operators.takeUntil(this._destroyed);
+        };
+        BaseFilterComponent.prototype.updateValidity = function () {
+            this.setFieldsStateAndValidators();
+            this.firstControl.updateValueAndValidity();
+            this.secondControl.updateValueAndValidity();
+        };
+        // Load the operators options from the translation.
+        BaseFilterComponent.prototype.loadOperatorsOptions = function () {
+            // Not implemented in the base
+        };
+        // Set default validators - some childs override this.
+        BaseFilterComponent.prototype.setFieldsStateAndValidators = function () {
+            this.firstControl.setValidators(forms.Validators.required);
+            this.secondControl.setValidators(forms.Validators.required);
+            this.secondControl.disable();
+        };
+        // Return undefined - some childs override this.
+        BaseFilterComponent.prototype.getDefaultOperatorUnit = function () {
+            return undefined;
+        };
+        BaseFilterComponent.prototype.initFilter = function () {
+            // Not implemented in the base
+        };
+        BaseFilterComponent.prototype.clearFilter = function (emitEvent) {
+            if (emitEvent === void 0) { emitEvent = true; }
+            this._filter = null;
+            this.form.reset();
+            this.initFilter();
+            if (emitEvent) {
+                this.filterClear.emit();
+            }
+        };
+        BaseFilterComponent.prototype.applyFilter = function () {
+            var filterValue = this.getFilterValue();
+            // If the filter is not null declare it, else - clear it.
+            if (filterValue) {
+                var filter = {
+                    fieldId: this.field.id,
+                    operator: this.operator,
+                    operatorUnit: this.operatorUnit,
+                    value: filterValue,
+                };
+                this._filter = filter;
+                this.filterChange.emit(filter);
+            }
+            else {
+                this.clearFilter();
+            }
+        };
+        BaseFilterComponent.prototype.ngOnInit = function () {
+            if (this.form) {
+                this.updateValidity();
+            }
+        };
+        BaseFilterComponent.prototype.ngOnChanges = function () {
+            // if (this.form) {
+            //     this.updateValidity();
+            // }
+        };
+        BaseFilterComponent.prototype.ngOnDestroy = function () {
+            this._destroyed.next();
+            this._destroyed.complete();
+            if (this.showActionButtons) {
+                this.actionsContainerRef.destroy();
+            }
+        };
+        return BaseFilterComponent;
+    }());
+    BaseFilterComponent.decorators = [
+        { type: core.Directive, args: [{},] }
+    ];
+    BaseFilterComponent.ctorParameters = function () { return [
+        { type: core.ViewContainerRef },
+        { type: core.Injector },
+        { type: core.ComponentFactoryResolver },
+        { type: forms.FormBuilder },
+        { type: core$1.TranslateService },
+        { type: ngxLib.PepValidatorService },
+        { type: core.Renderer2 }
+    ]; };
+    BaseFilterComponent.propDecorators = {
+        field: [{ type: core.Input }],
+        variableField: [{ type: core.Input }],
+        filter: [{ type: core.Input }],
+        parentForm: [{ type: core.Input }],
+        emitOnChange: [{ type: core.Input }],
+        inline: [{ type: core.Input }],
+        showActionButtons: [{ type: core.Input }],
+        renderTitle: [{ type: core.Input }],
+        showAdditionalOperators: [{ type: core.Input }],
+        filterClear: [{ type: core.Output }],
+        filterChange: [{ type: core.Output }]
     };
 
-    var PepTextFilterComponent = /** @class */ (function (_super) {
-        __extends(PepTextFilterComponent, _super);
-        function PepTextFilterComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
-            _this.chooseTypeOptions = [];
-            _this.operatorWidth = '38%';
-            _this.firstControlWidth = '62%';
-            return _this;
-        }
-        PepTextFilterComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.firstControl.valueChanges
-                .pipe(this.getDestroyer(), operators.distinctUntilChanged())
-                .subscribe(function () {
-                _this.setFieldsStateAndValidators();
-            });
-        };
-        // Override
-        PepTextFilterComponent.prototype.getDefaultOperator = function () {
-            return PepSmartFilterOperators.Equals;
-        };
-        // Override
-        PepTextFilterComponent.prototype.getFilterValue = function () {
-            var filterValue = {
-                first: this.firstControl.value,
-            };
-            if (this.operator === PepSmartFilterOperators.NumberRange) {
-                filterValue['second'] = this.secondControl.value;
-            }
-            return filterValue;
-        };
-        // Override
-        PepTextFilterComponent.prototype.loadOperatorsOptions = function () {
-            var _this = this;
-            this.chooseTypeOptions = this.operators.map(function (operator) {
-                return {
-                    key: operator.id,
-                    value: _this.translate.instant(_this.OPERATORS_TRANSLATION_PREFIX + "." + operator.name),
-                };
-            });
-        };
-        // Override
-        PepTextFilterComponent.prototype.setFieldsStateAndValidators = function () {
-            if (this.operator === PepSmartFilterOperators.NumberRange) {
-                var firstValidators = [forms.Validators.required];
-                if (this.secondControl.value) {
-                    firstValidators.push(this.validator.isLessThan(this.secondControl));
-                }
-                this.firstControl.setValidators(firstValidators);
-            }
-            else {
-                _super.prototype.setFieldsStateAndValidators.call(this);
-            }
-        };
-        PepTextFilterComponent.prototype.onOperatorChanged = function (value) {
-            var operator = Object.values(this.operators).find(function (operator) { return operator.id === value; });
-            this.operator = operator;
-            if (this._parentForm) {
-                this.updateParentForm();
-            }
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        PepTextFilterComponent.prototype.onVariableChanged = function (value) {
-            this.firstControl.setValue(value);
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        PepTextFilterComponent.prototype.onValueChanged = function () {
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        return PepTextFilterComponent;
-    }(BaseFilterComponent));
-    PepTextFilterComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-text-filter',
-                    template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n        [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n        [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n    </pep-select>\n    <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable\">\n        <pep-textbox [fxFlex]=\"inline ? firstControlWidth : null\" [form]=\"form\" [key]=\"firstControlKey\"\n            [label]=\"'SMART_FILTERS.VALUE' | translate\" [renderError]=\"false\" [renderTitle]=\"renderTitle\"\n            [type]=\"field.type\" [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n    </ng-container>\n    <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable\">\n        <pep-select [fxFlex]=\"inline ? firstControlWidth : null\" [key]=\"firstControlKey\"\n            [value]=\"firstControl?.value || ''\" [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\"\n            [emptyOption]=\"false\" [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n        </pep-select>\n    </ng-container>\n</div>",
-                    styles: [""]
-                },] }
+    var PepTextFilterComponent = /** @class */ (function (_super) {
+        __extends(PepTextFilterComponent, _super);
+        function PepTextFilterComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
+            _this.chooseTypeOptions = [];
+            _this.operatorWidth = '38%';
+            _this.firstControlWidth = '62%';
+            return _this;
+        }
+        PepTextFilterComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.firstControl.valueChanges
+                .pipe(this.getDestroyer(), operators.distinctUntilChanged())
+                .subscribe(function () {
+                _this.setFieldsStateAndValidators();
+            });
+        };
+        // Override
+        PepTextFilterComponent.prototype.getDefaultOperator = function () {
+            return PepSmartFilterOperators.Equals;
+        };
+        // Override
+        PepTextFilterComponent.prototype.getFilterValue = function () {
+            var filterValue = {
+                first: this.firstControl.value,
+            };
+            if (this.operator === PepSmartFilterOperators.NumberRange) {
+                filterValue['second'] = this.secondControl.value;
+            }
+            return filterValue;
+        };
+        // Override
+        PepTextFilterComponent.prototype.loadOperatorsOptions = function () {
+            var _this = this;
+            this.chooseTypeOptions = this.operators.map(function (operator) {
+                return {
+                    key: operator.id,
+                    value: _this.translate.instant(_this.OPERATORS_TRANSLATION_PREFIX + "." + operator.name),
+                };
+            });
+        };
+        // Override
+        PepTextFilterComponent.prototype.setFieldsStateAndValidators = function () {
+            if (this.operator === PepSmartFilterOperators.NumberRange) {
+                var firstValidators = [forms.Validators.required];
+                if (this.secondControl.value) {
+                    firstValidators.push(this.validator.isLessThan(this.secondControl));
+                }
+                this.firstControl.setValidators(firstValidators);
+            }
+            else {
+                _super.prototype.setFieldsStateAndValidators.call(this);
+            }
+        };
+        PepTextFilterComponent.prototype.onOperatorChanged = function (value) {
+            var operator = Object.values(this.operators).find(function (operator) { return operator.id === value; });
+            this.operator = operator;
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        PepTextFilterComponent.prototype.onVariableChanged = function (value) {
+            this.firstControl.setValue(value);
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        PepTextFilterComponent.prototype.onValueChanged = function () {
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        return PepTextFilterComponent;
+    }(BaseFilterComponent));
+    PepTextFilterComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-text-filter',
+                    template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n        [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n        [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n    </pep-select>\n    <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable\">\n        <pep-textbox [fxFlex]=\"inline ? firstControlWidth : null\" [form]=\"form\" [key]=\"firstControlKey\"\n            [label]=\"'SMART_FILTERS.VALUE' | translate\" [renderError]=\"false\" [renderTitle]=\"renderTitle\"\n            [type]=\"field.type\" [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n    </ng-container>\n    <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable\">\n        <pep-select [fxFlex]=\"inline ? firstControlWidth : null\" [key]=\"firstControlKey\"\n            [value]=\"firstControl?.value || ''\" [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\"\n            [emptyOption]=\"false\" [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n        </pep-select>\n    </ng-container>\n</div>",
+                    styles: [""]
+                },] }
     ];
 
-    var PepBooleanFilterComponent = /** @class */ (function (_super) {
-        __extends(PepBooleanFilterComponent, _super);
-        function PepBooleanFilterComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.options = [];
-            _this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
-            _this.chooseTypeOptions = [];
-            return _this;
-        }
-        PepBooleanFilterComponent.prototype.ngOnInit = function () {
-            if (this.inline) {
-                this.setControlsWidth();
-            }
-        };
-        // Override
-        PepBooleanFilterComponent.prototype.getDefaultOperator = function () {
-            return PepSmartFilterOperators.Equals;
-        };
-        // Override
-        PepBooleanFilterComponent.prototype.getFilterValue = function () {
-            var filterValue = { first: this.firstControl.value || false };
-            return filterValue;
-        };
-        // Override
-        PepBooleanFilterComponent.prototype.loadOperatorsOptions = function () {
-            var _this = this;
-            this.chooseTypeOptions = this.operators.map(function (operator) {
-                return {
-                    key: operator.id,
-                    value: _this.translate.instant(_this.OPERATORS_TRANSLATION_PREFIX + "." + operator.name),
-                };
-            });
-        };
-        PepBooleanFilterComponent.prototype.setControlsWidth = function () {
-            var _a;
-            if ((_a = this.variableFieldOptions) === null || _a === void 0 ? void 0 : _a.length) {
-                this.operatorWidth = '38%';
-                this.valueWidth = '62%';
-            }
-            else {
-                this.valueWidth = '100%';
-            }
-        };
-        PepBooleanFilterComponent.prototype.onOperatorChanged = function (value) {
-            var operator = Object.values(this.operators).find(function (operator) { return operator.id === value; });
-            this.operator = operator;
-            if (this._parentForm) {
-                this.updateParentForm();
-            }
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        PepBooleanFilterComponent.prototype.onValueChanged = function (value) {
-            this.firstControl.setValue(value);
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        return PepBooleanFilterComponent;
-    }(BaseFilterComponent));
-    PepBooleanFilterComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-boolean-filter',
-                    template: "<ng-container *ngIf=\"inline\">\n    <ng-container *ngIf=\"variableFieldOptions?.length\">\n        <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n            <pep-select [fxFlex]=\"operatorWidth\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n                [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n            </pep-select>\n            <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n                operator === PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n                    [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                    [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n                </pep-select>\n            </ng-container>\n            <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n                operator !== PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [value]=\"firstControl?.value || ''\" xAlignment=\"left\"\n                    [options]=\"options\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                    (valueChange)=\"onValueChanged($event)\">\n                </pep-select>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n        <pep-select [fxFlex]=\"valueWidth\" [value]=\"firstControl?.value || ''\" xAlignment=\"left\" [options]=\"options\"\n            [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" (valueChange)=\"onValueChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"!inline\" [formGroup]=\"form\">\n        <mat-radio-group class=\"radio-group\" [formControlName]=\"firstControlKey\">\n            <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"true\">\n                {{ 'CHECKBOX.TRUE' | translate }}\n            </mat-radio-button>\n            <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"false\">\n                {{ 'CHECKBOX.FALSE' | translate }}\n            </mat-radio-button>\n        </mat-radio-group>\n    </div>",
-                    styles: [".radio-group{display:flex;flex-direction:column}.radio-group .pep-radio-button.pep-input{height:2.25rem;display:flex}"]
-                },] }
-    ];
-    PepBooleanFilterComponent.propDecorators = {
-        options: [{ type: core.Input }]
+    var PepBooleanFilterComponent = /** @class */ (function (_super) {
+        __extends(PepBooleanFilterComponent, _super);
+        function PepBooleanFilterComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.options = [];
+            _this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
+            _this.chooseTypeOptions = [];
+            return _this;
+        }
+        PepBooleanFilterComponent.prototype.ngOnInit = function () {
+            if (this.inline) {
+                this.setControlsWidth();
+            }
+        };
+        // Override
+        PepBooleanFilterComponent.prototype.getDefaultOperator = function () {
+            return PepSmartFilterOperators.Equals;
+        };
+        // Override
+        PepBooleanFilterComponent.prototype.getFilterValue = function () {
+            var filterValue = { first: this.firstControl.value || false };
+            return filterValue;
+        };
+        // Override
+        PepBooleanFilterComponent.prototype.loadOperatorsOptions = function () {
+            var _this = this;
+            this.chooseTypeOptions = this.operators.map(function (operator) {
+                return {
+                    key: operator.id,
+                    value: _this.translate.instant(_this.OPERATORS_TRANSLATION_PREFIX + "." + operator.name),
+                };
+            });
+        };
+        PepBooleanFilterComponent.prototype.setControlsWidth = function () {
+            var _a;
+            if ((_a = this.variableFieldOptions) === null || _a === void 0 ? void 0 : _a.length) {
+                this.operatorWidth = '38%';
+                this.valueWidth = '62%';
+            }
+            else {
+                this.valueWidth = '100%';
+            }
+        };
+        PepBooleanFilterComponent.prototype.onOperatorChanged = function (value) {
+            var operator = Object.values(this.operators).find(function (operator) { return operator.id === value; });
+            this.operator = operator;
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        PepBooleanFilterComponent.prototype.onValueChanged = function (value) {
+            this.firstControl.setValue(value);
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        return PepBooleanFilterComponent;
+    }(BaseFilterComponent));
+    PepBooleanFilterComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-boolean-filter',
+                    template: "<ng-container *ngIf=\"inline\">\n    <ng-container *ngIf=\"variableFieldOptions?.length\">\n        <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n            <pep-select [fxFlex]=\"operatorWidth\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n                [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n            </pep-select>\n            <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n                operator === PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n                    [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                    [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n                </pep-select>\n            </ng-container>\n            <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n                operator !== PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [value]=\"firstControl?.value || ''\" xAlignment=\"left\"\n                    [options]=\"options\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                    (valueChange)=\"onValueChanged($event)\">\n                </pep-select>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n        <pep-select [fxFlex]=\"valueWidth\" [value]=\"firstControl?.value || ''\" xAlignment=\"left\" [options]=\"options\"\n            [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" (valueChange)=\"onValueChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"!inline\" [formGroup]=\"form\">\n        <mat-radio-group class=\"radio-group\" [formControlName]=\"firstControlKey\">\n            <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"true\">\n                {{ 'CHECKBOX.TRUE' | translate }}\n            </mat-radio-button>\n            <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"false\">\n                {{ 'CHECKBOX.FALSE' | translate }}\n            </mat-radio-button>\n        </mat-radio-group>\n    </div>",
+                    styles: [".radio-group{display:flex;flex-direction:column}.radio-group .pep-radio-button.pep-input{height:2.25rem;display:flex}"]
+                },] }
+    ];
+    PepBooleanFilterComponent.propDecorators = {
+        options: [{ type: core.Input }]
     };
 
-    var PepDateFilterComponent = /** @class */ (function (_super) {
-        __extends(PepDateFilterComponent, _super);
-        function PepDateFilterComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.PepSmartFilterOperators = PepSmartFilterOperators;
-            _this.PepSmartFilterAdditionalOperators = PepSmartFilterAdditionalOperators;
-            _this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
-            _this.chooseTimeOptions = [];
-            _this.chooseTimeUnitOptions = [];
-            return _this;
-        }
-        PepDateFilterComponent.prototype.ngOnInit = function () {
-            if (this.inline) {
-                this.setControlsWidth();
-            }
-        };
-        // Override
-        PepDateFilterComponent.prototype.getDefaultOperator = function () {
-            return PepSmartFilterOperators.InTheLast;
-        };
-        // Override
-        PepDateFilterComponent.prototype.getDefaultOperatorUnit = function () {
-            if (this.operator === PepSmartFilterOperators.InTheLast ||
-                this.operator === PepSmartFilterAdditionalOperators.InTheLastCalendar ||
-                this.operator === PepSmartFilterOperators.NotInTheLast ||
-                this.operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
-                this.operator === PepSmartFilterOperators.DueIn ||
-                this.operator === PepSmartFilterOperators.NotDueIn) {
-                return PepSmartFilterOperatorUnits.Months;
-            }
-            else {
-                return undefined;
-            }
-        };
-        // Override
-        PepDateFilterComponent.prototype.getFilterValue = function () {
-            var filterValue = {
-                first: this.firstControl.value,
-            };
-            if (this.operator === PepSmartFilterOperators.DateRange ||
-                PepSmartFilterVariableOperators.DateRangeVariable) {
-                filterValue['second'] = this.secondControl.value;
-            }
-            return filterValue;
-        };
-        // Override
-        PepDateFilterComponent.prototype.loadOperatorsOptions = function () {
-            var _this = this;
-            this.chooseTimeOptions = this.operators.map(function (operator) {
-                return {
-                    key: operator.id,
-                    value: _this.translate.instant(_this.OPERATORS_TRANSLATION_PREFIX + "." + operator.name),
-                };
-            });
-            this.chooseTimeUnitOptions = this.operatorUnits.map(function (operatorUnit) {
-                return {
-                    key: operatorUnit.id,
-                    value: _this.translate.instant(_this.OPERATOR_UNITS_TRANSLATION_PREFIX + "." + operatorUnit.name),
-                };
-            });
-        };
-        // Override
-        PepDateFilterComponent.prototype.setFieldsStateAndValidators = function () {
-            this.firstControl.enable();
-            if (this.operator === PepSmartFilterOperators.DateRange ||
-                this.operator === PepSmartFilterVariableOperators.DateRangeVariable) {
-                this.firstControl.setValidators(forms.Validators.required);
-                this.secondControl.enable();
-                this.secondControl.setValidators(forms.Validators.required);
-            }
-            else if (this.operator === PepSmartFilterOperators.InTheLast ||
-                this.operator === PepSmartFilterAdditionalOperators.InTheLastCalendar ||
-                this.operator === PepSmartFilterOperators.NotInTheLast ||
-                this.operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
-                this.operator === PepSmartFilterOperators.DueIn ||
-                this.operator === PepSmartFilterOperators.NotDueIn) {
-                this.firstControl.setValidators([
-                    forms.Validators.required,
-                    this.validator.numberValidator(),
-                ]);
-                this.secondControl.disable();
-            }
-            else {
-                // Disable 'first' field.
-                if (this.operator === PepSmartFilterOperators.Today ||
-                    this.operator === PepSmartFilterOperators.ThisWeek ||
-                    this.operator === PepSmartFilterOperators.ThisMonth ||
-                    this.operator === PepSmartFilterOperators.IsEmpty ||
-                    this.operator === PepSmartFilterOperators.IsNotEmpty) {
-                    this.firstControl.disable();
-                }
-                // Default disable 'second' field.
-                _super.prototype.setFieldsStateAndValidators.call(this);
-            }
-        };
-        PepDateFilterComponent.prototype.setControlsWidth = function () {
-            if (this.operator === PepSmartFilterOperators.Today ||
-                this.operator === PepSmartFilterOperators.ThisWeek ||
-                this.operator === PepSmartFilterOperators.ThisMonth ||
-                this.operator === PepSmartFilterOperators.IsEmpty ||
-                this.operator === PepSmartFilterOperators.IsNotEmpty) {
-                this.operatorWidth = 'auto';
-                this.fieldsWidth = '0%';
-            }
-            else if (this.operator === PepSmartFilterOperators.On) {
-                this.operatorWidth = '38%';
-                this.fieldsWidth = '62%';
-            }
-            else {
-                this.operatorWidth = '30%';
-                this.fieldsWidth = '70%';
-            }
-        };
-        PepDateFilterComponent.prototype.onOperatorChanged = function (value) {
-            var operator = Object.values(this.operators).find(function (operator) { return operator.id === value; });
-            this.operator = operator;
-            this.operatorUnit = this.getDefaultOperatorUnit();
-            if (this.inline) {
-                this.setControlsWidth();
-            }
-            if (this._parentForm) {
-                this.updateParentForm();
-            }
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        PepDateFilterComponent.prototype.onTimeUnitChanged = function (value) {
-            var operatorUnit = Object.values(PepSmartFilterOperatorUnits).find(function (operatorUnit) { return operatorUnit.id === value; });
-            this.operatorUnit = operatorUnit;
-            if (this._parentForm) {
-                this.updateParentForm();
-            }
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        PepDateFilterComponent.prototype.onVariableChanged = function (value) {
-            this.firstControl.setValue(value);
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        PepDateFilterComponent.prototype.onSecondVariableChanged = function (value) {
-            this.secondControl.setValue(value);
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        PepDateFilterComponent.prototype.onDateValueChanged = function () {
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        return PepDateFilterComponent;
-    }(BaseFilterComponent));
-    PepDateFilterComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-date-filter',
-                    template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <ng-container>\n        <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\n            [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" [options]=\"chooseTimeOptions\"\n            [fxFlex]=\"inline ? operatorWidth : null\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\n                operator === PepSmartFilterAdditionalOperators.InTheLastCalendar || \n                operator === PepSmartFilterOperators.NotInTheLast ||\n                operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar || \n                operator === PepSmartFilterOperators.DueIn ||\n                operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\" [type]=\"'int'\"\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-textbox>\n        <!-- Time unit -->\n        <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\n            [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [emptyOption]=\"false\" [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\n        </pep-select>\n    </div>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Start date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl?.value || ''\"\n            [maxDateValue]=\"secondControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n        <!-- End date -->\n        <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"secondControl?.value || ''\"\n            [minDateValue]=\"firstControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </div>\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\n        <!-- Choose a date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [fxFlex]=\"inline ? fieldsWidth : null\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </ng-container>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterVariableOperators.DateRangeVariable\" fxLayout=\"row\"\n        fxLayout.xs=\"column\" fxLayoutGap=\".5rem\" fxFlex=\"fieldsWidth\">\n        <pep-select fxFlex=\"50%\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\"></pep-select>\n        <pep-select fxFlex=\"50%\" [key]=\"secondControlKey\" [value]=\"secondControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onSecondVariableChanged($event)\"></pep-select>\n    </div>\n</div>\n",
-                    styles: [""]
-                },] }
+    var PepDateFilterComponent = /** @class */ (function (_super) {
+        __extends(PepDateFilterComponent, _super);
+        function PepDateFilterComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.PepSmartFilterOperators = PepSmartFilterOperators;
+            _this.PepSmartFilterAdditionalOperators = PepSmartFilterAdditionalOperators;
+            _this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
+            _this.chooseTimeOptions = [];
+            _this.chooseTimeUnitOptions = [];
+            return _this;
+        }
+        PepDateFilterComponent.prototype.ngOnInit = function () {
+            if (this.inline) {
+                this.setControlsWidth();
+            }
+        };
+        // Override
+        PepDateFilterComponent.prototype.getDefaultOperator = function () {
+            return PepSmartFilterOperators.InTheLast;
+        };
+        // Override
+        PepDateFilterComponent.prototype.getDefaultOperatorUnit = function () {
+            if (this.operator === PepSmartFilterOperators.InTheLast ||
+                this.operator === PepSmartFilterAdditionalOperators.InTheLastCalendar ||
+                this.operator === PepSmartFilterOperators.NotInTheLast ||
+                this.operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
+                this.operator === PepSmartFilterOperators.DueIn ||
+                this.operator === PepSmartFilterOperators.NotDueIn) {
+                return PepSmartFilterOperatorUnits.Months;
+            }
+            else {
+                return undefined;
+            }
+        };
+        // Override
+        PepDateFilterComponent.prototype.getFilterValue = function () {
+            var filterValue = {
+                first: this.firstControl.value,
+            };
+            if (this.operator === PepSmartFilterOperators.DateRange ||
+                PepSmartFilterVariableOperators.DateRangeVariable) {
+                filterValue['second'] = this.secondControl.value;
+            }
+            return filterValue;
+        };
+        // Override
+        PepDateFilterComponent.prototype.loadOperatorsOptions = function () {
+            var _this = this;
+            this.chooseTimeOptions = this.operators.map(function (operator) {
+                return {
+                    key: operator.id,
+                    value: _this.translate.instant(_this.OPERATORS_TRANSLATION_PREFIX + "." + operator.name),
+                };
+            });
+            this.chooseTimeUnitOptions = this.operatorUnits.map(function (operatorUnit) {
+                return {
+                    key: operatorUnit.id,
+                    value: _this.translate.instant(_this.OPERATOR_UNITS_TRANSLATION_PREFIX + "." + operatorUnit.name),
+                };
+            });
+        };
+        // Override
+        PepDateFilterComponent.prototype.setFieldsStateAndValidators = function () {
+            this.firstControl.enable();
+            if (this.operator === PepSmartFilterOperators.DateRange ||
+                this.operator === PepSmartFilterVariableOperators.DateRangeVariable) {
+                this.firstControl.setValidators(forms.Validators.required);
+                this.secondControl.enable();
+                this.secondControl.setValidators(forms.Validators.required);
+            }
+            else if (this.operator === PepSmartFilterOperators.InTheLast ||
+                this.operator === PepSmartFilterAdditionalOperators.InTheLastCalendar ||
+                this.operator === PepSmartFilterOperators.NotInTheLast ||
+                this.operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
+                this.operator === PepSmartFilterOperators.DueIn ||
+                this.operator === PepSmartFilterOperators.NotDueIn) {
+                this.firstControl.setValidators([
+                    forms.Validators.required,
+                    this.validator.numberValidator(),
+                ]);
+                this.secondControl.disable();
+            }
+            else {
+                // Disable 'first' field.
+                if (this.operator === PepSmartFilterOperators.Today ||
+                    this.operator === PepSmartFilterOperators.ThisWeek ||
+                    this.operator === PepSmartFilterOperators.ThisMonth ||
+                    this.operator === PepSmartFilterOperators.IsEmpty ||
+                    this.operator === PepSmartFilterOperators.IsNotEmpty) {
+                    this.firstControl.disable();
+                }
+                // Default disable 'second' field.
+                _super.prototype.setFieldsStateAndValidators.call(this);
+            }
+        };
+        PepDateFilterComponent.prototype.setControlsWidth = function () {
+            if (this.operator === PepSmartFilterOperators.Today ||
+                this.operator === PepSmartFilterOperators.ThisWeek ||
+                this.operator === PepSmartFilterOperators.ThisMonth ||
+                this.operator === PepSmartFilterOperators.IsEmpty ||
+                this.operator === PepSmartFilterOperators.IsNotEmpty) {
+                this.operatorWidth = 'auto';
+                this.fieldsWidth = '0%';
+            }
+            else if (this.operator === PepSmartFilterOperators.On) {
+                this.operatorWidth = '38%';
+                this.fieldsWidth = '62%';
+            }
+            else {
+                this.operatorWidth = '30%';
+                this.fieldsWidth = '70%';
+            }
+        };
+        PepDateFilterComponent.prototype.onOperatorChanged = function (value) {
+            var operator = Object.values(this.operators).find(function (operator) { return operator.id === value; });
+            this.operator = operator;
+            this.operatorUnit = this.getDefaultOperatorUnit();
+            if (this.inline) {
+                this.setControlsWidth();
+            }
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        PepDateFilterComponent.prototype.onTimeUnitChanged = function (value) {
+            var operatorUnit = Object.values(PepSmartFilterOperatorUnits).find(function (operatorUnit) { return operatorUnit.id === value; });
+            this.operatorUnit = operatorUnit;
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        PepDateFilterComponent.prototype.onVariableChanged = function (value) {
+            this.firstControl.setValue(value);
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        PepDateFilterComponent.prototype.onSecondVariableChanged = function (value) {
+            this.secondControl.setValue(value);
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        PepDateFilterComponent.prototype.onDateValueChanged = function () {
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        return PepDateFilterComponent;
+    }(BaseFilterComponent));
+    PepDateFilterComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-date-filter',
+                    template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <ng-container>\n        <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\n            [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" [options]=\"chooseTimeOptions\"\n            [fxFlex]=\"inline ? operatorWidth : null\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\n                operator === PepSmartFilterAdditionalOperators.InTheLastCalendar || \n                operator === PepSmartFilterOperators.NotInTheLast ||\n                operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar || \n                operator === PepSmartFilterOperators.DueIn ||\n                operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\" [type]=\"'int'\"\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-textbox>\n        <!-- Time unit -->\n        <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\n            [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [emptyOption]=\"false\" [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\n        </pep-select>\n    </div>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Start date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl?.value || ''\"\n            [maxDateValue]=\"secondControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n        <!-- End date -->\n        <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"secondControl?.value || ''\"\n            [minDateValue]=\"firstControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </div>\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\n        <!-- Choose a date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [fxFlex]=\"inline ? fieldsWidth : null\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </ng-container>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterVariableOperators.DateRangeVariable\" fxLayout=\"row\"\n        fxLayout.xs=\"column\" fxLayoutGap=\".5rem\" fxFlex=\"fieldsWidth\">\n        <pep-select fxFlex=\"50%\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\"></pep-select>\n        <pep-select fxFlex=\"50%\" [key]=\"secondControlKey\" [value]=\"secondControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onSecondVariableChanged($event)\"></pep-select>\n    </div>\n</div>\n",
+                    styles: [""]
+                },] }
     ];
 
-    var PepMultiSelectFilterOption = /** @class */ (function () {
-        function PepMultiSelectFilterOption() {
-            this.selected = false;
-        }
-        return PepMultiSelectFilterOption;
-    }());
-    var PepMultiSelectFilterComponent = /** @class */ (function (_super) {
-        __extends(PepMultiSelectFilterComponent, _super);
-        function PepMultiSelectFilterComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
-            _this.options = [];
-            _this.chooseTypeOptions = [];
-            _this.searchControl = new forms.FormControl();
-            //inline props
-            _this.selected = '';
-            _this.inlineOptions = [];
-            _this.MAX_OPTIONS_TO_SHOW = 6.35;
-            _this.numberOptionsToShowSearch = 10;
-            return _this;
-        }
-        PepMultiSelectFilterComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit;
-            if (this.inline) {
-                this.inlineControlInit();
-                this.setControlsWidth();
-            }
-            else {
-                this.noneInlineControlInit();
-            }
-        };
-        PepMultiSelectFilterComponent.prototype.ngAfterViewInit = function () {
-            // Calc for the first time.
-            this.calcOptionsHeight(this.options.length);
-        };
-        PepMultiSelectFilterComponent.prototype.inlineControlInit = function () {
-            var _a, _b, _c;
-            //load options from field        
-            this.inlineOptions = ((_b = (_a = this.field) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length) > 0 ? this.field.options : [];
-            // init the selected values from first value.  
-            if (((_c = this.firstControl) === null || _c === void 0 ? void 0 : _c.value) && Array.isArray(this.firstControl.value)) {
-                this.selected = this.firstControl.value.join(';');
-            }
-        };
-        PepMultiSelectFilterComponent.prototype.noneInlineControlInit = function () {
-            var _this = this;
-            var _a;
-            if (((_a = this.field.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                this.options = this.field.options.map(function (opt) {
-                    return { value: opt.value, count: opt.count, selected: false };
-                });
-            }
-            else {
-                this.searchControl.disable();
-            }
-            // Init the selected values from first value.
-            var firstControl = this.firstControl;
-            if (firstControl.value) {
-                this.initOptionsSelectedValues(firstControl.value);
-            }
-            // Add subscription for the first value change to set the selected options.
-            firstControl.valueChanges
-                .pipe(this.getDestroyer(), operators.distinctUntilChanged())
-                .subscribe(function (selectedValues) {
-                _this.initOptionsSelectedValues(selectedValues);
-            });
-            // Filter the options by the search control.
-            this.filteredOptions$ = this.searchControl.valueChanges.pipe(this.getDestroyer(), operators.startWith(''), operators.map(function (option) { return typeof option === 'string' ? option : option && option.value; }), operators.map(function (value) { return (value ? _this.filterOptions(value) : _this.options); }));
-            // Each time the filter change.
-            this.filteredOptions$.subscribe(function (filterdOptions) {
-                _this.calcOptionsHeight(filterdOptions.length);
-                setTimeout(function () {
-                    // 8 is the padding top of the multi-select-options
-                    _this.virtualScroller.scrollToPosition(-8);
-                }, 125);
-            });
-        };
-        PepMultiSelectFilterComponent.prototype.initOptionsSelectedValues = function (selectedValues) {
-            this.options.forEach(function (opt) {
-                var isValueSelected = selectedValues && selectedValues.includes(opt.value);
-                opt.selected = isValueSelected;
-            });
-        };
-        PepMultiSelectFilterComponent.prototype.calcOptionsHeight = function (optionsCount) {
-            if (this.optionsContainer) {
-                var optionsToShow = optionsCount > this.MAX_OPTIONS_TO_SHOW
-                    ? this.MAX_OPTIONS_TO_SHOW
-                    : optionsCount;
-                // optionsToShow * 2.25 is 1 option height + 1 is the padding top & bottom of the container.
-                var optionsHeight = optionsToShow * 2.25 + 1 + 'rem';
-                this.renderer.setStyle(this.optionsContainer.nativeElement, 'height', optionsHeight);
-            }
-        };
-        PepMultiSelectFilterComponent.prototype.filterOptions = function (value) {
-            var filterValue = value.toLowerCase();
-            return this.options.filter(function (opt) { return opt.value &&
-                opt.value.toLowerCase().includes(filterValue.toLowerCase()); });
-        };
-        // Override
-        PepMultiSelectFilterComponent.prototype.getDefaultOperator = function () {
-            return PepSmartFilterOperators.In;
-        };
-        // Override
-        PepMultiSelectFilterComponent.prototype.getFilterValue = function () {
-            if (this.inline) {
-                return {
-                    first: this.firstControl.value
-                };
-            }
-            else {
-                var selectedValues = this.options
-                    .filter(function (opt) { return opt.selected; })
-                    .map(function (opt) { return opt.value; });
-                var filterValue = {
-                    first: selectedValues,
-                };
-                return selectedValues.length > 0 ? filterValue : null;
-            }
-        };
-        // Override
-        PepMultiSelectFilterComponent.prototype.loadOperatorsOptions = function () {
-            var _this = this;
-            this.chooseTypeOptions = this.operators.map(function (operator) {
-                return {
-                    key: operator.id,
-                    value: _this.translate.instant(_this.OPERATORS_TRANSLATION_PREFIX + "." + operator.name),
-                };
-            });
-        };
-        PepMultiSelectFilterComponent.prototype.setControlsWidth = function () {
-            var _a;
-            if ((_a = this.variableFieldOptions) === null || _a === void 0 ? void 0 : _a.length) {
-                this.operatorWidth = '38%';
-                this.valueWidth = '62%';
-            }
-            else {
-                this.valueWidth = '100%';
-            }
-        };
-        PepMultiSelectFilterComponent.prototype.onOperatorChanged = function (value) {
-            var operator = Object.values(this.operators).find(function (operator) { return operator.id === value; });
-            this.operator = operator;
-            if (this._parentForm) {
-                this.updateParentForm();
-            }
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        // Override
-        PepMultiSelectFilterComponent.prototype.initFilter = function () {
-            this.options.forEach(function (opt) { return (opt.selected = false); });
-            this.searchControl.setValue('');
-        };
-        PepMultiSelectFilterComponent.prototype.onOptionChange = function (option, event) {
-            option.selected = event.checked;
-            this.firstControl.setValue(this.options.filter(function (opt) { return opt.selected; }).map(function (opt) { return opt.value; }), { emitEvent: false });
-        };
-        PepMultiSelectFilterComponent.prototype.onMultiSelectChanged = function (value) {
-            if (value) {
-                var selected = value.split(';');
-                this.firstControl.setValue(selected);
-            }
-            else {
-                this.firstControl.setValue(null);
-            }
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        PepMultiSelectFilterComponent.prototype.onValueChanged = function (value) {
-            this.firstControl.setValue(value);
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        return PepMultiSelectFilterComponent;
-    }(BaseFilterComponent));
-    PepMultiSelectFilterComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-multi-select-filter',
-                    template: "<ng-container *ngIf=\"inline\">\n    <ng-container *ngIf=\"variableFieldOptions?.length\">\n        <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n            <pep-select [fxFlex]=\"operatorWidth\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n                [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n            </pep-select>\n            <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n                operator === PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n                    [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                    [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n                </pep-select>\n            </ng-container>\n            <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n                operator !== PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\"\n                    [value]=\"selected\" [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n                    (valueChange)=\"onMultiSelectChanged($event)\">\n                </pep-select>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n        <pep-select [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\" [value]=\"selected\"\n            [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n            (valueChange)=\"onMultiSelectChanged($event)\">\n        </pep-select>\n    </ng-container>\n</ng-container>\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n        [triggerOn]=\"'keydown'\" shrink=\"never\"></pep-search>\n    <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n        [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n        <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n            <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n                <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n                    class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n                    [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n                    <div class=\"title\">\n                        <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n                        <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n                    </div>\n                </mat-checkbox>\n                <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n                    <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n                        {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n                        translate }}\n                    </span>\n                </ng-container>\n            </virtual-scroller>\n        </div>\n    </div>\n</div>",
-                    styles: [".multi-select-options{margin:.5rem calc(.25rem * -1) 0;margin:var(--pep-spacing-sm,.5rem) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options.with-no-search{margin:calc(.5rem * -1) calc(.25rem * -1) 0;margin:calc(var(--pep-spacing-sm, .5rem) * -1) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options .no-options{display:flex;padding:.5rem .75rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-md,.75rem)}.multi-select-options .flip-scroll{padding:.5rem .25rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-xs,.25rem);min-height:3.25rem;max-height:34.75rem;direction:rtl}.multi-select-options .flip-scroll.rtl,.multi-select-options .flip-scroll virtual-scroller{direction:ltr}.multi-select-options .flip-scroll.rtl virtual-scroller{direction:rtl}.multi-select-options .pep-checkbox-container{height:2.25rem;-webkit-padding-end:0;padding-inline-end:0}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout{width:100%;height:100%;grid-template-columns:auto 1fr}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout .mat-checkbox-label{align-self:center}.multi-select-options .pep-checkbox-container .title{display:grid;grid-auto-flow:column;justify-content:space-between;align-items:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem)}"]
-                },] }
-    ];
-    PepMultiSelectFilterComponent.propDecorators = {
-        optionsContainer: [{ type: core.ViewChild, args: ['optionsContainer',] }],
-        virtualScroller: [{ type: core.ViewChild, args: [ngxVirtualScroller.VirtualScrollerComponent,] }]
+    var PepMultiSelectFilterOption = /** @class */ (function () {
+        function PepMultiSelectFilterOption() {
+            this.selected = false;
+        }
+        return PepMultiSelectFilterOption;
+    }());
+    var PepMultiSelectFilterComponent = /** @class */ (function (_super) {
+        __extends(PepMultiSelectFilterComponent, _super);
+        function PepMultiSelectFilterComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
+            _this.options = [];
+            _this.chooseTypeOptions = [];
+            _this.searchControl = new forms.FormControl();
+            //inline props
+            _this.selected = '';
+            _this.inlineOptions = [];
+            _this.MAX_OPTIONS_TO_SHOW = 6.35;
+            _this.numberOptionsToShowSearch = 10;
+            return _this;
+        }
+        PepMultiSelectFilterComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit;
+            if (this.inline) {
+                this.inlineControlInit();
+                this.setControlsWidth();
+            }
+            else {
+                this.noneInlineControlInit();
+            }
+        };
+        PepMultiSelectFilterComponent.prototype.ngAfterViewInit = function () {
+            // Calc for the first time.
+            this.calcOptionsHeight(this.options.length);
+        };
+        PepMultiSelectFilterComponent.prototype.inlineControlInit = function () {
+            var _a, _b, _c;
+            //load options from field        
+            this.inlineOptions = ((_b = (_a = this.field) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length) > 0 ? this.field.options : [];
+            // init the selected values from first value.  
+            if (((_c = this.firstControl) === null || _c === void 0 ? void 0 : _c.value) && Array.isArray(this.firstControl.value)) {
+                this.selected = this.firstControl.value.join(';');
+            }
+        };
+        PepMultiSelectFilterComponent.prototype.noneInlineControlInit = function () {
+            var _this = this;
+            var _a;
+            if (((_a = this.field.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                this.options = this.field.options.map(function (opt) {
+                    return { value: opt.value, count: opt.count, selected: false };
+                });
+            }
+            else {
+                this.searchControl.disable();
+            }
+            // Init the selected values from first value.
+            var firstControl = this.firstControl;
+            if (firstControl.value) {
+                this.initOptionsSelectedValues(firstControl.value);
+            }
+            // Add subscription for the first value change to set the selected options.
+            firstControl.valueChanges
+                .pipe(this.getDestroyer(), operators.distinctUntilChanged())
+                .subscribe(function (selectedValues) {
+                _this.initOptionsSelectedValues(selectedValues);
+            });
+            // Filter the options by the search control.
+            this.filteredOptions$ = this.searchControl.valueChanges.pipe(this.getDestroyer(), operators.startWith(''), operators.map(function (option) { return typeof option === 'string' ? option : option && option.value; }), operators.map(function (value) { return (value ? _this.filterOptions(value) : _this.options); }));
+            // Each time the filter change.
+            this.filteredOptions$.subscribe(function (filterdOptions) {
+                _this.calcOptionsHeight(filterdOptions.length);
+                setTimeout(function () {
+                    // 8 is the padding top of the multi-select-options
+                    _this.virtualScroller.scrollToPosition(-8);
+                }, 125);
+            });
+        };
+        PepMultiSelectFilterComponent.prototype.initOptionsSelectedValues = function (selectedValues) {
+            this.options.forEach(function (opt) {
+                var isValueSelected = selectedValues && selectedValues.includes(opt.value);
+                opt.selected = isValueSelected;
+            });
+        };
+        PepMultiSelectFilterComponent.prototype.calcOptionsHeight = function (optionsCount) {
+            if (this.optionsContainer) {
+                var optionsToShow = optionsCount > this.MAX_OPTIONS_TO_SHOW
+                    ? this.MAX_OPTIONS_TO_SHOW
+                    : optionsCount;
+                // optionsToShow * 2.25 is 1 option height + 1 is the padding top & bottom of the container.
+                var optionsHeight = optionsToShow * 2.25 + 1 + 'rem';
+                this.renderer.setStyle(this.optionsContainer.nativeElement, 'height', optionsHeight);
+            }
+        };
+        PepMultiSelectFilterComponent.prototype.filterOptions = function (value) {
+            var filterValue = value.toLowerCase();
+            return this.options.filter(function (opt) { return opt.value &&
+                opt.value.toLowerCase().includes(filterValue.toLowerCase()); });
+        };
+        // Override
+        PepMultiSelectFilterComponent.prototype.getDefaultOperator = function () {
+            return PepSmartFilterOperators.In;
+        };
+        // Override
+        PepMultiSelectFilterComponent.prototype.getFilterValue = function () {
+            if (this.inline) {
+                return {
+                    first: this.firstControl.value
+                };
+            }
+            else {
+                var selectedValues = this.options
+                    .filter(function (opt) { return opt.selected; })
+                    .map(function (opt) { return opt.value; });
+                var filterValue = {
+                    first: selectedValues,
+                };
+                return selectedValues.length > 0 ? filterValue : null;
+            }
+        };
+        // Override
+        PepMultiSelectFilterComponent.prototype.loadOperatorsOptions = function () {
+            var _this = this;
+            this.chooseTypeOptions = this.operators.map(function (operator) {
+                return {
+                    key: operator.id,
+                    value: _this.translate.instant(_this.OPERATORS_TRANSLATION_PREFIX + "." + operator.name),
+                };
+            });
+        };
+        PepMultiSelectFilterComponent.prototype.setControlsWidth = function () {
+            var _a;
+            if ((_a = this.variableFieldOptions) === null || _a === void 0 ? void 0 : _a.length) {
+                this.operatorWidth = '38%';
+                this.valueWidth = '62%';
+            }
+            else {
+                this.valueWidth = '100%';
+            }
+        };
+        PepMultiSelectFilterComponent.prototype.onOperatorChanged = function (value) {
+            var operator = Object.values(this.operators).find(function (operator) { return operator.id === value; });
+            this.operator = operator;
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        // Override
+        PepMultiSelectFilterComponent.prototype.initFilter = function () {
+            this.options.forEach(function (opt) { return (opt.selected = false); });
+            this.searchControl.setValue('');
+        };
+        PepMultiSelectFilterComponent.prototype.onOptionChange = function (option, event) {
+            option.selected = event.checked;
+            this.firstControl.setValue(this.options.filter(function (opt) { return opt.selected; }).map(function (opt) { return opt.value; }), { emitEvent: false });
+        };
+        PepMultiSelectFilterComponent.prototype.onMultiSelectChanged = function (value) {
+            if (value) {
+                var selected = value.split(';');
+                this.firstControl.setValue(selected);
+            }
+            else {
+                this.firstControl.setValue(null);
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        PepMultiSelectFilterComponent.prototype.onValueChanged = function (value) {
+            this.firstControl.setValue(value);
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        return PepMultiSelectFilterComponent;
+    }(BaseFilterComponent));
+    PepMultiSelectFilterComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-multi-select-filter',
+                    template: "<ng-container *ngIf=\"inline\">\n    <ng-container *ngIf=\"variableFieldOptions?.length\">\n        <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n            <pep-select [fxFlex]=\"operatorWidth\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n                [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n            </pep-select>\n            <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n                operator === PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n                    [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                    [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n                </pep-select>\n            </ng-container>\n            <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n                operator !== PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\"\n                    [value]=\"selected\" [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n                    (valueChange)=\"onMultiSelectChanged($event)\">\n                </pep-select>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n        <pep-select [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\" [value]=\"selected\"\n            [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n            (valueChange)=\"onMultiSelectChanged($event)\">\n        </pep-select>\n    </ng-container>\n</ng-container>\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n        [triggerOn]=\"'keydown'\" shrink=\"never\"></pep-search>\n    <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n        [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n        <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n            <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n                <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n                    class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n                    [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n                    <div class=\"title\">\n                        <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n                        <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n                    </div>\n                </mat-checkbox>\n                <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n                    <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n                        {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n                        translate }}\n                    </span>\n                </ng-container>\n            </virtual-scroller>\n        </div>\n    </div>\n</div>",
+                    styles: [".multi-select-options{margin:.5rem calc(.25rem * -1) 0;margin:var(--pep-spacing-sm,.5rem) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options.with-no-search{margin:calc(.5rem * -1) calc(.25rem * -1) 0;margin:calc(var(--pep-spacing-sm, .5rem) * -1) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options .no-options{display:flex;padding:.5rem .75rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-md,.75rem)}.multi-select-options .flip-scroll{padding:.5rem .25rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-xs,.25rem);min-height:3.25rem;max-height:34.75rem;direction:rtl}.multi-select-options .flip-scroll.rtl,.multi-select-options .flip-scroll virtual-scroller{direction:ltr}.multi-select-options .flip-scroll.rtl virtual-scroller{direction:rtl}.multi-select-options .pep-checkbox-container{height:2.25rem;-webkit-padding-end:0;padding-inline-end:0}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout{width:100%;height:100%;grid-template-columns:auto 1fr}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout .mat-checkbox-label{align-self:center}.multi-select-options .pep-checkbox-container .title{display:grid;grid-auto-flow:column;justify-content:space-between;align-items:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem)}"]
+                },] }
+    ];
+    PepMultiSelectFilterComponent.propDecorators = {
+        optionsContainer: [{ type: core.ViewChild, args: ['optionsContainer',] }],
+        virtualScroller: [{ type: core.ViewChild, args: [ngxVirtualScroller.VirtualScrollerComponent,] }]
     };
 
-    var PepNumberFilterComponent = /** @class */ (function (_super) {
-        __extends(PepNumberFilterComponent, _super);
-        function PepNumberFilterComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.PepSmartFilterOperators = PepSmartFilterOperators;
-            _this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
-            _this.chooseTypeOptions = [];
-            _this.operatorWidth = '38%';
-            _this.fieldsWidth = '70%';
-            return _this;
-        }
-        PepNumberFilterComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.firstControl.valueChanges
-                .pipe(this.getDestroyer(), operators.distinctUntilChanged())
-                .subscribe(function () {
-                _this.setFieldsStateAndValidators();
-            });
-            this.secondControl.valueChanges
-                .pipe(this.getDestroyer(), operators.distinctUntilChanged())
-                .subscribe(function () {
-                _this.setFieldsStateAndValidators();
-            });
-            this.setControlsWidth();
-        };
-        // Override
-        PepNumberFilterComponent.prototype.getDefaultOperator = function () {
-            return PepSmartFilterOperators.Equals;
-        };
-        // Override
-        PepNumberFilterComponent.prototype.getFilterValue = function () {
-            var filterValue = {
-                first: this.firstControl.value,
-            };
-            if (this.operator === PepSmartFilterOperators.NumberRange) {
-                filterValue['second'] = this.secondControl.value;
-            }
-            return filterValue;
-        };
-        // Override
-        PepNumberFilterComponent.prototype.loadOperatorsOptions = function () {
-            var _this = this;
-            this.chooseTypeOptions = this.operators.map(function (operator) {
-                return {
-                    key: operator.id,
-                    value: _this.translate.instant(_this.OPERATORS_TRANSLATION_PREFIX + "." + operator.name),
-                };
-            });
-        };
-        // Override
-        PepNumberFilterComponent.prototype.setFieldsStateAndValidators = function () {
-            if (this.operator === PepSmartFilterOperators.NumberRange) {
-                var firstValidators = [forms.Validators.required];
-                if (this.secondControl.value) {
-                    firstValidators.push(this.validator.isLessThan(this.secondControl));
-                }
-                this.firstControl.setValidators(firstValidators);
-                this.secondControl.enable();
-                var secondValidators = [forms.Validators.required];
-                if (this.firstControl.value) {
-                    secondValidators.push(this.validator.isGreaterThan(this.firstControl));
-                }
-                this.secondControl.setValidators(secondValidators);
-            }
-            else {
-                _super.prototype.setFieldsStateAndValidators.call(this);
-            }
-        };
-        PepNumberFilterComponent.prototype.setControlsWidth = function () {
-            if (this.operator === PepSmartFilterOperators.NumberRange) {
-                this.operatorWidth = '30%';
-                this.fieldsWidth = '70%';
-            }
-            else {
-                this.operatorWidth = '38%';
-                this.fieldsWidth = '62%';
-            }
-        };
-        PepNumberFilterComponent.prototype.onOperatorChanged = function (value) {
-            var operator = Object.values(this.operators).find(function (operator) { return operator.id === value; });
-            this.operator = operator;
-            if (this._parentForm) {
-                this.updateParentForm();
-            }
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-            this.setControlsWidth();
-        };
-        PepNumberFilterComponent.prototype.onVariableChanged = function (value) {
-            this.firstControl.setValue(value);
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        PepNumberFilterComponent.prototype.onValueChanged = function () {
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        };
-        return PepNumberFilterComponent;
-    }(BaseFilterComponent));
-    PepNumberFilterComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-number-filter',
-                    template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <ng-container>\n        <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.NumberRange\">\n        <div fxLayout=\"row\" fxLayout.xs=\"column\" [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\"\n            [fxFlex]=\"inline ? fieldsWidth : null\">\n            <!-- Min number -->\n            <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.MIN' | translate\"\n                [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\n                [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n                [maxValue]=\"secondControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n            </pep-textbox>\n            <!-- Max number -->\n            <pep-textbox [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.MAX' | translate\"\n                [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\n                [formattedValue]=\"secondControl?.value || ''\" [value]=\"secondControl?.value || ''\"\n                [minValue]=\"firstControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n            </pep-textbox>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.LessThanVariable || \n        operator === PepSmartFilterVariableOperators.GreaterThanVariable || \n        operator === PepSmartFilterVariableOperators.EqualsToVariable\">\n        <pep-select [fxFlex]=\"inline ? fieldsWidth : null\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <ng-container *ngIf=\"operator !== PepSmartFilterOperators.NumberRange && operator !== PepSmartFilterVariableOperators.LessThanVariable &&\n        operator !== PepSmartFilterVariableOperators.GreaterThanVariable && \n        operator !== PepSmartFilterVariableOperators.EqualsToVariable\">\n        <div [fxFlex]=\"inline ? fieldsWidth : null\">\n            <!-- Amount -->\n            <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n                [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\"\n                [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n                (valueChange)=\"onValueChanged()\">\n            </pep-textbox>\n        </div>\n    </ng-container>\n</div>",
-                    styles: [""]
-                },] }
+    var PepNumberFilterComponent = /** @class */ (function (_super) {
+        __extends(PepNumberFilterComponent, _super);
+        function PepNumberFilterComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.PepSmartFilterOperators = PepSmartFilterOperators;
+            _this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
+            _this.chooseTypeOptions = [];
+            _this.operatorWidth = '38%';
+            _this.fieldsWidth = '70%';
+            return _this;
+        }
+        PepNumberFilterComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.firstControl.valueChanges
+                .pipe(this.getDestroyer(), operators.distinctUntilChanged())
+                .subscribe(function () {
+                _this.setFieldsStateAndValidators();
+            });
+            this.secondControl.valueChanges
+                .pipe(this.getDestroyer(), operators.distinctUntilChanged())
+                .subscribe(function () {
+                _this.setFieldsStateAndValidators();
+            });
+            this.setControlsWidth();
+        };
+        // Override
+        PepNumberFilterComponent.prototype.getDefaultOperator = function () {
+            return PepSmartFilterOperators.Equals;
+        };
+        // Override
+        PepNumberFilterComponent.prototype.getFilterValue = function () {
+            var filterValue = {
+                first: this.firstControl.value,
+            };
+            if (this.operator === PepSmartFilterOperators.NumberRange) {
+                filterValue['second'] = this.secondControl.value;
+            }
+            return filterValue;
+        };
+        // Override
+        PepNumberFilterComponent.prototype.loadOperatorsOptions = function () {
+            var _this = this;
+            this.chooseTypeOptions = this.operators.map(function (operator) {
+                return {
+                    key: operator.id,
+                    value: _this.translate.instant(_this.OPERATORS_TRANSLATION_PREFIX + "." + operator.name),
+                };
+            });
+        };
+        // Override
+        PepNumberFilterComponent.prototype.setFieldsStateAndValidators = function () {
+            if (this.operator === PepSmartFilterOperators.NumberRange) {
+                var firstValidators = [forms.Validators.required];
+                if (this.secondControl.value) {
+                    firstValidators.push(this.validator.isLessThan(this.secondControl));
+                }
+                this.firstControl.setValidators(firstValidators);
+                this.secondControl.enable();
+                var secondValidators = [forms.Validators.required];
+                if (this.firstControl.value) {
+                    secondValidators.push(this.validator.isGreaterThan(this.firstControl));
+                }
+                this.secondControl.setValidators(secondValidators);
+            }
+            else {
+                _super.prototype.setFieldsStateAndValidators.call(this);
+            }
+        };
+        PepNumberFilterComponent.prototype.setControlsWidth = function () {
+            if (this.operator === PepSmartFilterOperators.NumberRange) {
+                this.operatorWidth = '30%';
+                this.fieldsWidth = '70%';
+            }
+            else {
+                this.operatorWidth = '38%';
+                this.fieldsWidth = '62%';
+            }
+        };
+        PepNumberFilterComponent.prototype.onOperatorChanged = function (value) {
+            var operator = Object.values(this.operators).find(function (operator) { return operator.id === value; });
+            this.operator = operator;
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+            this.setControlsWidth();
+        };
+        PepNumberFilterComponent.prototype.onVariableChanged = function (value) {
+            this.firstControl.setValue(value);
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        PepNumberFilterComponent.prototype.onValueChanged = function () {
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        return PepNumberFilterComponent;
+    }(BaseFilterComponent));
+    PepNumberFilterComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-number-filter',
+                    template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <ng-container>\n        <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.NumberRange\">\n        <div fxLayout=\"row\" fxLayout.xs=\"column\" [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\"\n            [fxFlex]=\"inline ? fieldsWidth : null\">\n            <!-- Min number -->\n            <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.MIN' | translate\"\n                [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\n                [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n                [maxValue]=\"secondControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n            </pep-textbox>\n            <!-- Max number -->\n            <pep-textbox [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.MAX' | translate\"\n                [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\n                [formattedValue]=\"secondControl?.value || ''\" [value]=\"secondControl?.value || ''\"\n                [minValue]=\"firstControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n            </pep-textbox>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.LessThanVariable || \n        operator === PepSmartFilterVariableOperators.GreaterThanVariable || \n        operator === PepSmartFilterVariableOperators.EqualsToVariable\">\n        <pep-select [fxFlex]=\"inline ? fieldsWidth : null\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <ng-container *ngIf=\"operator !== PepSmartFilterOperators.NumberRange && operator !== PepSmartFilterVariableOperators.LessThanVariable &&\n        operator !== PepSmartFilterVariableOperators.GreaterThanVariable && \n        operator !== PepSmartFilterVariableOperators.EqualsToVariable\">\n        <div [fxFlex]=\"inline ? fieldsWidth : null\">\n            <!-- Amount -->\n            <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n                [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\"\n                [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n                (valueChange)=\"onValueChanged()\">\n            </pep-textbox>\n        </div>\n    </ng-container>\n</div>",
+                    styles: [""]
+                },] }
     ];
 
-    var PepSmartFiltersModule = /** @class */ (function () {
-        function PepSmartFiltersModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons([
-                icon.pepIconNumberMinus,
-                icon.pepIconNumberPlus,
-            ]);
-        }
-        return PepSmartFiltersModule;
-    }());
-    PepSmartFiltersModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        flexLayout.FlexLayoutModule,
-                        // Material modules
-                        core$2.MatCommonModule,
-                        checkbox.MatCheckboxModule,
-                        chips.MatChipsModule,
-                        expansion.MatExpansionModule,
-                        icon$1.MatIconModule,
-                        formField.MatFormFieldModule,
-                        input.MatInputModule,
-                        radio.MatRadioModule,
-                        // External modules
-                        ngxVirtualScroller.VirtualScrollerModule,
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                        checkbox$1.PepCheckboxModule,
-                        date.PepDateModule,
-                        select.PepSelectModule,
-                        textbox.PepTextboxModule,
-                        search.PepSearchModule,
-                        icon.PepIconModule,
-                        button.PepButtonModule,
-                        groupButtons.PepGroupButtonsModule
-                    ],
-                    exports: [
-                        PepSmartFiltersComponent,
-                        PepTextFilterComponent,
-                        PepBooleanFilterComponent,
-                        PepDateFilterComponent,
-                        PepMultiSelectFilterComponent,
-                        PepNumberFilterComponent
-                    ],
-                    declarations: [
-                        // BaseFilterComponent,
-                        PepSmartFiltersComponent,
-                        PepFilterActionsComponent,
-                        PepTextFilterComponent,
-                        PepBooleanFilterComponent,
-                        PepDateFilterComponent,
-                        PepMultiSelectFilterComponent,
-                        PepNumberFilterComponent
-                    ],
-                },] }
-    ];
-    PepSmartFiltersModule.ctorParameters = function () { return [
-        { type: icon.PepIconRegistry }
+    var PepSmartFiltersModule = /** @class */ (function () {
+        function PepSmartFiltersModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons([
+                icon.pepIconNumberMinus,
+                icon.pepIconNumberPlus,
+            ]);
+        }
+        return PepSmartFiltersModule;
+    }());
+    PepSmartFiltersModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.ReactiveFormsModule,
+                        flexLayout.FlexLayoutModule,
+                        // Material modules
+                        core$2.MatCommonModule,
+                        checkbox.MatCheckboxModule,
+                        chips.MatChipsModule,
+                        expansion.MatExpansionModule,
+                        icon$1.MatIconModule,
+                        formField.MatFormFieldModule,
+                        input.MatInputModule,
+                        radio.MatRadioModule,
+                        // External modules
+                        ngxVirtualScroller.VirtualScrollerModule,
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                        checkbox$1.PepCheckboxModule,
+                        date.PepDateModule,
+                        select.PepSelectModule,
+                        textbox.PepTextboxModule,
+                        search.PepSearchModule,
+                        icon.PepIconModule,
+                        button.PepButtonModule,
+                        groupButtons.PepGroupButtonsModule
+                    ],
+                    exports: [
+                        PepSmartFiltersComponent,
+                        PepTextFilterComponent,
+                        PepBooleanFilterComponent,
+                        PepDateFilterComponent,
+                        PepMultiSelectFilterComponent,
+                        PepNumberFilterComponent
+                    ],
+                    declarations: [
+                        // BaseFilterComponent,
+                        PepSmartFiltersComponent,
+                        PepFilterActionsComponent,
+                        PepTextFilterComponent,
+                        PepBooleanFilterComponent,
+                        PepDateFilterComponent,
+                        PepMultiSelectFilterComponent,
+                        PepNumberFilterComponent
+                    ],
+                },] }
+    ];
+    PepSmartFiltersModule.ctorParameters = function () { return [
+        { type: icon.PepIconRegistry }
     ]; };
 
-    // Base field
-    // ------------------------------
-    var PepSmartFilterBaseField = /** @class */ (function () {
-        function PepSmartFilterBaseField(field) {
-            this.id = field.id;
-            this.name = field.name;
-            this.isOpen = field.isOpen;
-            this.options = field.options;
-            this.operators = field.operators;
-            this.operatorUnits = field.operatorUnits;
-            this._type = this.getType();
-        }
-        Object.defineProperty(PepSmartFilterBaseField.prototype, "componentType", {
-            get: function () {
-                return this._componentType;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepSmartFilterBaseField.prototype, "type", {
-            get: function () {
-                return this._type;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return PepSmartFilterBaseField;
-    }());
-    // Text field
-    // ------------------------------
-    var PepSmartFilterTextField = /** @class */ (function (_super) {
-        __extends(PepSmartFilterTextField, _super);
-        function PepSmartFilterTextField(field) {
-            var _this = _super.call(this, field) || this;
-            _this._componentType = 'text';
-            return _this;
-        }
-        PepSmartFilterTextField.prototype.getType = function () {
-            return 'text';
-        };
-        return PepSmartFilterTextField;
-    }(PepSmartFilterBaseField));
-    // Boolean field
-    // ------------------------------
-    var PepSmartFilterBooleanField = /** @class */ (function (_super) {
-        __extends(PepSmartFilterBooleanField, _super);
-        function PepSmartFilterBooleanField(field) {
-            var _this = _super.call(this, field) || this;
-            _this._componentType = 'boolean';
-            return _this;
-        }
-        PepSmartFilterBooleanField.prototype.getType = function () {
-            return 'boolean';
-        };
-        return PepSmartFilterBooleanField;
-    }(PepSmartFilterBaseField));
-    // Date fields
-    // ------------------------------
-    var PepSmartFilterDateBaseField = /** @class */ (function (_super) {
-        __extends(PepSmartFilterDateBaseField, _super);
-        function PepSmartFilterDateBaseField(field) {
-            var _this = _super.call(this, field) || this;
-            _this._componentType = 'date';
-            return _this;
-        }
-        return PepSmartFilterDateBaseField;
-    }(PepSmartFilterBaseField));
-    var PepSmartFilterDateField = /** @class */ (function (_super) {
-        __extends(PepSmartFilterDateField, _super);
-        function PepSmartFilterDateField(field) {
-            return _super.call(this, field) || this;
-        }
-        PepSmartFilterDateField.prototype.getType = function () {
-            return 'date';
-        };
-        return PepSmartFilterDateField;
-    }(PepSmartFilterDateBaseField));
-    var PepSmartFilterDateTimeField = /** @class */ (function (_super) {
-        __extends(PepSmartFilterDateTimeField, _super);
-        function PepSmartFilterDateTimeField(field) {
-            return _super.call(this, field) || this;
-        }
-        PepSmartFilterDateTimeField.prototype.getType = function () {
-            return 'date-time';
-        };
-        return PepSmartFilterDateTimeField;
-    }(PepSmartFilterDateBaseField));
-    // Multi select field
-    // ------------------------------
-    var PepSmartFilterMultiSelectField = /** @class */ (function (_super) {
-        __extends(PepSmartFilterMultiSelectField, _super);
-        function PepSmartFilterMultiSelectField(field) {
-            var _this = _super.call(this, field) || this;
-            _this._componentType = 'multi-select';
-            return _this;
-        }
-        PepSmartFilterMultiSelectField.prototype.getType = function () {
-            return 'multi-select';
-        };
-        return PepSmartFilterMultiSelectField;
-    }(PepSmartFilterBaseField));
-    // Number fields
-    // ------------------------------
-    var PepSmartFilterNumberBaseField = /** @class */ (function (_super) {
-        __extends(PepSmartFilterNumberBaseField, _super);
-        function PepSmartFilterNumberBaseField(field) {
-            var _this = _super.call(this, field) || this;
-            _this._componentType = 'number';
-            return _this;
-        }
-        return PepSmartFilterNumberBaseField;
-    }(PepSmartFilterBaseField));
-    var PepSmartFilterIntField = /** @class */ (function (_super) {
-        __extends(PepSmartFilterIntField, _super);
-        function PepSmartFilterIntField(field) {
-            return _super.call(this, field) || this;
-        }
-        PepSmartFilterIntField.prototype.getType = function () {
-            return 'int';
-        };
-        return PepSmartFilterIntField;
-    }(PepSmartFilterNumberBaseField));
-    var PepSmartFilterRealField = /** @class */ (function (_super) {
-        __extends(PepSmartFilterRealField, _super);
-        function PepSmartFilterRealField(field) {
-            return _super.call(this, field) || this;
-        }
-        PepSmartFilterRealField.prototype.getType = function () {
-            return 'real';
-        };
-        return PepSmartFilterRealField;
-    }(PepSmartFilterNumberBaseField));
-    var PepSmartFilterCurrencyField = /** @class */ (function (_super) {
-        __extends(PepSmartFilterCurrencyField, _super);
-        function PepSmartFilterCurrencyField(field) {
-            return _super.call(this, field) || this;
-        }
-        PepSmartFilterCurrencyField.prototype.getType = function () {
-            return 'currency';
-        };
-        return PepSmartFilterCurrencyField;
-    }(PepSmartFilterNumberBaseField));
-    var PepSmartFilterPercentageField = /** @class */ (function (_super) {
-        __extends(PepSmartFilterPercentageField, _super);
-        function PepSmartFilterPercentageField(field) {
-            return _super.call(this, field) || this;
-        }
-        PepSmartFilterPercentageField.prototype.getType = function () {
-            return 'percentage';
-        };
-        return PepSmartFilterPercentageField;
+    // Base field
+    // ------------------------------
+    var PepSmartFilterBaseField = /** @class */ (function () {
+        function PepSmartFilterBaseField(field) {
+            this.id = field.id;
+            this.name = field.name;
+            this.isOpen = field.isOpen;
+            this.options = field.options;
+            this.operators = field.operators;
+            this.operatorUnits = field.operatorUnits;
+            this._type = this.getType();
+        }
+        Object.defineProperty(PepSmartFilterBaseField.prototype, "componentType", {
+            get: function () {
+                return this._componentType;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepSmartFilterBaseField.prototype, "type", {
+            get: function () {
+                return this._type;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return PepSmartFilterBaseField;
+    }());
+    // Text field
+    // ------------------------------
+    var PepSmartFilterTextField = /** @class */ (function (_super) {
+        __extends(PepSmartFilterTextField, _super);
+        function PepSmartFilterTextField(field) {
+            var _this = _super.call(this, field) || this;
+            _this._componentType = 'text';
+            return _this;
+        }
+        PepSmartFilterTextField.prototype.getType = function () {
+            return 'text';
+        };
+        return PepSmartFilterTextField;
+    }(PepSmartFilterBaseField));
+    // Boolean field
+    // ------------------------------
+    var PepSmartFilterBooleanField = /** @class */ (function (_super) {
+        __extends(PepSmartFilterBooleanField, _super);
+        function PepSmartFilterBooleanField(field) {
+            var _this = _super.call(this, field) || this;
+            _this._componentType = 'boolean';
+            return _this;
+        }
+        PepSmartFilterBooleanField.prototype.getType = function () {
+            return 'boolean';
+        };
+        return PepSmartFilterBooleanField;
+    }(PepSmartFilterBaseField));
+    // Date fields
+    // ------------------------------
+    var PepSmartFilterDateBaseField = /** @class */ (function (_super) {
+        __extends(PepSmartFilterDateBaseField, _super);
+        function PepSmartFilterDateBaseField(field) {
+            var _this = _super.call(this, field) || this;
+            _this._componentType = 'date';
+            return _this;
+        }
+        return PepSmartFilterDateBaseField;
+    }(PepSmartFilterBaseField));
+    var PepSmartFilterDateField = /** @class */ (function (_super) {
+        __extends(PepSmartFilterDateField, _super);
+        function PepSmartFilterDateField(field) {
+            return _super.call(this, field) || this;
+        }
+        PepSmartFilterDateField.prototype.getType = function () {
+            return 'date';
+        };
+        return PepSmartFilterDateField;
+    }(PepSmartFilterDateBaseField));
+    var PepSmartFilterDateTimeField = /** @class */ (function (_super) {
+        __extends(PepSmartFilterDateTimeField, _super);
+        function PepSmartFilterDateTimeField(field) {
+            return _super.call(this, field) || this;
+        }
+        PepSmartFilterDateTimeField.prototype.getType = function () {
+            return 'date-time';
+        };
+        return PepSmartFilterDateTimeField;
+    }(PepSmartFilterDateBaseField));
+    // Multi select field
+    // ------------------------------
+    var PepSmartFilterMultiSelectField = /** @class */ (function (_super) {
+        __extends(PepSmartFilterMultiSelectField, _super);
+        function PepSmartFilterMultiSelectField(field) {
+            var _this = _super.call(this, field) || this;
+            _this._componentType = 'multi-select';
+            return _this;
+        }
+        PepSmartFilterMultiSelectField.prototype.getType = function () {
+            return 'multi-select';
+        };
+        return PepSmartFilterMultiSelectField;
+    }(PepSmartFilterBaseField));
+    // Number fields
+    // ------------------------------
+    var PepSmartFilterNumberBaseField = /** @class */ (function (_super) {
+        __extends(PepSmartFilterNumberBaseField, _super);
+        function PepSmartFilterNumberBaseField(field) {
+            var _this = _super.call(this, field) || this;
+            _this._componentType = 'number';
+            return _this;
+        }
+        return PepSmartFilterNumberBaseField;
+    }(PepSmartFilterBaseField));
+    var PepSmartFilterIntField = /** @class */ (function (_super) {
+        __extends(PepSmartFilterIntField, _super);
+        function PepSmartFilterIntField(field) {
+            return _super.call(this, field) || this;
+        }
+        PepSmartFilterIntField.prototype.getType = function () {
+            return 'int';
+        };
+        return PepSmartFilterIntField;
+    }(PepSmartFilterNumberBaseField));
+    var PepSmartFilterRealField = /** @class */ (function (_super) {
+        __extends(PepSmartFilterRealField, _super);
+        function PepSmartFilterRealField(field) {
+            return _super.call(this, field) || this;
+        }
+        PepSmartFilterRealField.prototype.getType = function () {
+            return 'real';
+        };
+        return PepSmartFilterRealField;
+    }(PepSmartFilterNumberBaseField));
+    var PepSmartFilterCurrencyField = /** @class */ (function (_super) {
+        __extends(PepSmartFilterCurrencyField, _super);
+        function PepSmartFilterCurrencyField(field) {
+            return _super.call(this, field) || this;
+        }
+        PepSmartFilterCurrencyField.prototype.getType = function () {
+            return 'currency';
+        };
+        return PepSmartFilterCurrencyField;
+    }(PepSmartFilterNumberBaseField));
+    var PepSmartFilterPercentageField = /** @class */ (function (_super) {
+        __extends(PepSmartFilterPercentageField, _super);
+        function PepSmartFilterPercentageField(field) {
+            return _super.call(this, field) || this;
+        }
+        PepSmartFilterPercentageField.prototype.getType = function () {
+            return 'percentage';
+        };
+        return PepSmartFilterPercentageField;
     }(PepSmartFilterNumberBaseField));
 
-    function createTextSmartFilterField(data) {
-        return new PepSmartFilterTextField(data);
-    }
-    function createBooleanSmartFilterField(data) {
-        return new PepSmartFilterBooleanField(data);
-    }
-    function createDateSmartFilterField(data) {
-        return new PepSmartFilterDateField(data);
-    }
-    function createDateTimeSmartFilterField(data) {
-        return new PepSmartFilterDateTimeField(data);
-    }
-    function createMultiSelectSmartFilterField(data) {
-        return new PepSmartFilterMultiSelectField(data);
-    }
-    function createIntSmartFilterField(data) {
-        return new PepSmartFilterIntField(data);
-    }
-    function createRealSmartFilterField(data) {
-        return new PepSmartFilterRealField(data);
-    }
-    function createCurrencySmartFilterField(data) {
-        return new PepSmartFilterCurrencyField(data);
-    }
-    function createPercentageSmartFilterField(data) {
-        return new PepSmartFilterPercentageField(data);
-    }
-    function createSmartFilterField(data, type) {
-        var field;
-        switch (type) {
-            case 'text':
-                field = createTextSmartFilterField(data);
-                break;
-            case 'boolean':
-                field = createBooleanSmartFilterField(data);
-                break;
-            case 'date':
-                field = createDateSmartFilterField(data);
-                break;
-            case 'date-time':
-                field = createDateTimeSmartFilterField(data);
-                break;
-            case 'multi-select':
-                field = createMultiSelectSmartFilterField(data);
-                break;
-            case 'int':
-                field = createIntSmartFilterField(data);
-                break;
-            case 'real':
-                field = createRealSmartFilterField(data);
-                break;
-            case 'currency':
-                field = createCurrencySmartFilterField(data);
-                break;
-            case 'percentage':
-                field = createPercentageSmartFilterField(data);
-                break;
-            default:
-                field = createMultiSelectSmartFilterField(data);
-                break;
-        }
-        return field;
-    }
-    function createSmartFilter(fieldId, operator, first, second, operatorUnit) {
-        return {
-            fieldId: fieldId,
-            operator: operator,
-            operatorUnit: operatorUnit,
-            value: {
-                first: first,
-                second: second,
-            },
-        };
+    function createTextSmartFilterField(data) {
+        return new PepSmartFilterTextField(data);
+    }
+    function createBooleanSmartFilterField(data) {
+        return new PepSmartFilterBooleanField(data);
+    }
+    function createDateSmartFilterField(data) {
+        return new PepSmartFilterDateField(data);
+    }
+    function createDateTimeSmartFilterField(data) {
+        return new PepSmartFilterDateTimeField(data);
+    }
+    function createMultiSelectSmartFilterField(data) {
+        return new PepSmartFilterMultiSelectField(data);
+    }
+    function createIntSmartFilterField(data) {
+        return new PepSmartFilterIntField(data);
+    }
+    function createRealSmartFilterField(data) {
+        return new PepSmartFilterRealField(data);
+    }
+    function createCurrencySmartFilterField(data) {
+        return new PepSmartFilterCurrencyField(data);
+    }
+    function createPercentageSmartFilterField(data) {
+        return new PepSmartFilterPercentageField(data);
+    }
+    function createSmartFilterField(data, type) {
+        var field;
+        switch (type) {
+            case 'text':
+                field = createTextSmartFilterField(data);
+                break;
+            case 'boolean':
+                field = createBooleanSmartFilterField(data);
+                break;
+            case 'date':
+                field = createDateSmartFilterField(data);
+                break;
+            case 'date-time':
+                field = createDateTimeSmartFilterField(data);
+                break;
+            case 'multi-select':
+                field = createMultiSelectSmartFilterField(data);
+                break;
+            case 'int':
+                field = createIntSmartFilterField(data);
+                break;
+            case 'real':
+                field = createRealSmartFilterField(data);
+                break;
+            case 'currency':
+                field = createCurrencySmartFilterField(data);
+                break;
+            case 'percentage':
+                field = createPercentageSmartFilterField(data);
+                break;
+            default:
+                field = createMultiSelectSmartFilterField(data);
+                break;
+        }
+        return field;
+    }
+    function createSmartFilter(fieldId, operator, first, second, operatorUnit) {
+        return {
+            fieldId: fieldId,
+            operator: operator,
+            operatorUnit: operatorUnit,
+            value: {
+                first: first,
+                second: second,
+            },
+        };
     }
 
-    /*
-     * Public API Surface of ngx-lib/smart-filters
+    /*
+     * Public API Surface of ngx-lib/smart-filters
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.BaseFilterComponent = BaseFilterComponent;