@marcura/marcura-combobox 4.6.2 → 4.7.1

package/bundles/marcura-marcura-combobox.umd.js

@@ -4,1823 +4,1885 @@
     (global = global || self, factory((global.marcura = global.marcura || {}, global.marcura['marcura-combobox'] = {}), global.ng.core, global.ng.common, global.ng.forms, global['@marcura/marcura-tag'], global['@progress/kendo-angular-dropdowns'], global['@progress/kendo-angular-popup'], global['@marcura/marcura-common'], global.rxjs, global.rxjs.operators));
 }(this, (function (exports, core, common, forms, marcuraTag, kendoAngularDropdowns, kendoAngularPopup, marcuraCommon, rxjs, operators) { 'use strict';
 
-    var COMBOBOX_LOCALIZER = new core.InjectionToken('ComboboxModule.IDropdownLocalizer<IComboboxLocalization>');
-    var DROPDOWN_LOCALIZER = new core.InjectionToken('ComboboxModule.IDropdownLocalizer<IDropdownLocalization>');
+    var COMBOBOX_LOCALIZER = new core.InjectionToken('ComboboxModule.IDropdownLocalizer<IComboboxLocalization>');
+    var DROPDOWN_LOCALIZER = new core.InjectionToken('ComboboxModule.IDropdownLocalizer<IDropdownLocalization>');
     var MULTISELECT_LOCALIZER = new core.InjectionToken('ComboboxModule.IDropdownLocalizer<IMultiselectLocalization>');
 
-    /*! *****************************************************************************
-    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) {
-        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;
-    }
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    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 __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, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return 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) {
+        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;
+    }
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    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 __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, privateMap) {
+        if (!privateMap.has(receiver)) {
+            throw new TypeError("attempted to get private field on non-instance");
+        }
+        return privateMap.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, privateMap, value) {
+        if (!privateMap.has(receiver)) {
+            throw new TypeError("attempted to set private field on non-instance");
+        }
+        privateMap.set(receiver, value);
+        return value;
     }
 
-    var ComboboxItemTemplateDirective = /** @class */ (function () {
-        function ComboboxItemTemplateDirective() {
-        }
-        return ComboboxItemTemplateDirective;
-    }());
-    ComboboxItemTemplateDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[sgComboboxItem]',
-                },] }
+    var ComboboxItemTemplateDirective = /** @class */ (function () {
+        function ComboboxItemTemplateDirective() {
+        }
+        return ComboboxItemTemplateDirective;
+    }());
+    ComboboxItemTemplateDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[sgComboboxItem]',
+                },] }
     ];
 
-    var DropdownItemTemplateDirective = /** @class */ (function () {
-        function DropdownItemTemplateDirective() {
-        }
-        return DropdownItemTemplateDirective;
-    }());
-    DropdownItemTemplateDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[sgDropdownItem]',
-                },] }
+    var DropdownItemTemplateDirective = /** @class */ (function () {
+        function DropdownItemTemplateDirective() {
+        }
+        return DropdownItemTemplateDirective;
+    }());
+    DropdownItemTemplateDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[sgDropdownItem]',
+                },] }
     ];
 
-    var DropdownValueTemplateDirective = /** @class */ (function () {
-        function DropdownValueTemplateDirective() {
-        }
-        return DropdownValueTemplateDirective;
-    }());
-    DropdownValueTemplateDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[sgDropdownValue]',
-                },] }
+    var DropdownValueTemplateDirective = /** @class */ (function () {
+        function DropdownValueTemplateDirective() {
+        }
+        return DropdownValueTemplateDirective;
+    }());
+    DropdownValueTemplateDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[sgDropdownValue]',
+                },] }
     ];
 
-    var MultiselectItemTemplateDirective = /** @class */ (function () {
-        function MultiselectItemTemplateDirective() {
-        }
-        return MultiselectItemTemplateDirective;
-    }());
-    MultiselectItemTemplateDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[sgMultiselectItem]',
-                },] }
+    var MultiselectItemTemplateDirective = /** @class */ (function () {
+        function MultiselectItemTemplateDirective() {
+        }
+        return MultiselectItemTemplateDirective;
+    }());
+    MultiselectItemTemplateDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[sgMultiselectItem]',
+                },] }
     ];
 
-    var MultiselectTagTemplateDirective = /** @class */ (function () {
-        function MultiselectTagTemplateDirective() {
-        }
-        return MultiselectTagTemplateDirective;
-    }());
-    MultiselectTagTemplateDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[sgMultiselectTag]',
-                },] }
+    var MultiselectTagTemplateDirective = /** @class */ (function () {
+        function MultiselectTagTemplateDirective() {
+        }
+        return MultiselectTagTemplateDirective;
+    }());
+    MultiselectTagTemplateDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[sgMultiselectTag]',
+                },] }
     ];
 
-    /**
-     * Toggles CSS classes of kendo-multiselect tag wrapper (kendo-taglist li.k-button),
-     * so necessary styles could be applied when tag state changes, read only state, for example.
-     *
-     * @export
-     */
-    var MultiselectTagWrapperDirective = /** @class */ (function () {
-        function MultiselectTagWrapperDirective(_element) {
-            this._element = _element;
-            this._getTagWrapperAttempts = 0;
-            this._isReadOnly = false;
-        }
-        Object.defineProperty(MultiselectTagWrapperDirective.prototype, "isReadOnly", {
-            get: function () {
-                return this._isReadOnly;
-            },
-            set: function (isReadOnly) {
-                // Will come as undefined if not set from the outside.
-                this._isReadOnly = !!isReadOnly;
-                this._tagWrapper = this._tagWrapper || this._getTagWrapper(this._element.nativeElement);
-                this._setCssClass(this._tagWrapper);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MultiselectTagWrapperDirective.prototype._getTagWrapper = function (element) {
-            if (element.classList.contains('k-button') && element.tagName === 'LI') {
-                return element;
-            }
-            else {
-                if (this._getTagWrapperAttempts >= 5) {
-                    return null;
-                }
-                this._getTagWrapperAttempts++;
-                return this._getTagWrapper(element.parentElement);
-            }
-        };
-        MultiselectTagWrapperDirective.prototype._setCssClass = function (tagWrapper) {
-            if (!tagWrapper) {
-                return;
-            }
-            if (this.isReadOnly) {
-                tagWrapper.classList.add('sg-multiselect__tag-wrapper--is-read-only');
-            }
-            else {
-                tagWrapper.classList.remove('sg-multiselect__tag-wrapper--is-read-only');
-            }
-        };
-        return MultiselectTagWrapperDirective;
-    }());
-    MultiselectTagWrapperDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[sgMultiselectTagWrapper]',
-                    exportAs: 'multiselectTagWrapper',
-                },] }
-    ];
-    MultiselectTagWrapperDirective.ctorParameters = function () { return [
-        { type: core.ElementRef }
-    ]; };
-    MultiselectTagWrapperDirective.propDecorators = {
-        isReadOnly: [{ type: core.Input }]
+    /**
+     * Toggles CSS classes of kendo-multiselect tag wrapper (kendo-taglist li.k-button),
+     * so necessary styles could be applied when tag state changes, read only state, for example.
+     *
+     * @export
+     */
+    var MultiselectTagWrapperDirective = /** @class */ (function () {
+        function MultiselectTagWrapperDirective(_element) {
+            this._element = _element;
+            this._getTagWrapperAttempts = 0;
+            this._isReadOnly = false;
+        }
+        Object.defineProperty(MultiselectTagWrapperDirective.prototype, "isReadOnly", {
+            get: function () {
+                return this._isReadOnly;
+            },
+            set: function (isReadOnly) {
+                // Will come as undefined if not set from the outside.
+                this._isReadOnly = !!isReadOnly;
+                this._tagWrapper = this._tagWrapper || this._getTagWrapper(this._element.nativeElement);
+                this._setCssClass(this._tagWrapper);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MultiselectTagWrapperDirective.prototype._getTagWrapper = function (element) {
+            if (element.classList.contains('k-button') && element.tagName === 'LI') {
+                return element;
+            }
+            else {
+                if (this._getTagWrapperAttempts >= 5) {
+                    return null;
+                }
+                this._getTagWrapperAttempts++;
+                return this._getTagWrapper(element.parentElement);
+            }
+        };
+        MultiselectTagWrapperDirective.prototype._setCssClass = function (tagWrapper) {
+            if (!tagWrapper) {
+                return;
+            }
+            if (this.isReadOnly) {
+                tagWrapper.classList.add('sg-multiselect__tag-wrapper--is-read-only');
+            }
+            else {
+                tagWrapper.classList.remove('sg-multiselect__tag-wrapper--is-read-only');
+            }
+        };
+        return MultiselectTagWrapperDirective;
+    }());
+    MultiselectTagWrapperDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[sgMultiselectTagWrapper]',
+                    exportAs: 'multiselectTagWrapper',
+                },] }
+    ];
+    MultiselectTagWrapperDirective.ctorParameters = function () { return [
+        { type: core.ElementRef }
+    ]; };
+    MultiselectTagWrapperDirective.propDecorators = {
+        isReadOnly: [{ type: core.Input }]
     };
 
-    var AbstractDropdownComponent = /** @class */ (function (_super) {
-        __extends(AbstractDropdownComponent, _super);
-        function AbstractDropdownComponent(_changeDetectorRef) {
-            var _this = _super.call(this) || this;
-            _this._changeDetectorRef = _changeDetectorRef;
-            _this._valueField = 'id';
-            _this._textField = 'name';
-            _this._items = [];
-            _this._isOpen = new rxjs.BehaviorSubject({
-                isOpen: false,
-                shouldEmit: false,
-            });
-            _this._isLoading = new rxjs.BehaviorSubject(false);
-            _this._type = null;
-            _this._state = null;
-            _this._isSuccessType = _this._type === marcuraCommon.ControlType.Success;
-            _this._isErrorType = _this._type === marcuraCommon.ControlType.Error;
-            _this._isWarningType = _this._type === marcuraCommon.ControlType.Warning;
-            _this._isHighlightedState = _this._state === marcuraCommon.ControlState.Highlighted;
-            _this.valueFormControl = new forms.FormControl();
-            _this.hasReset = true;
-            _this.listHeight = 200;
-            _this.isPrimitiveValue = false;
-            _this.isOutline = false;
-            _this.opened = new core.EventEmitter();
-            _this.closed = new core.EventEmitter();
-            return _this;
-        }
-        Object.defineProperty(AbstractDropdownComponent.prototype, "valueField", {
-            get: function () {
-                return this._valueField;
-            },
-            set: function (valueField) {
-                if (valueField && this._valueField !== valueField) {
-                    this._valueField = valueField;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AbstractDropdownComponent.prototype, "textField", {
-            get: function () {
-                return this._textField;
-            },
-            set: function (textField) {
-                if (textField && this._textField !== textField) {
-                    this._textField = textField;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AbstractDropdownComponent.prototype, "isLoading", {
-            get: function () {
-                return this._isLoading.value;
-            },
-            set: function (isLoading) {
-                this._isLoading.next(isLoading);
-                // Mark hasIsLoadingCssClass @HostBinding for check.
-                this._changeDetectorRef.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AbstractDropdownComponent.prototype, "state", {
-            get: function () {
-                return this._state;
-            },
-            set: function (state) {
-                if (this._state !== state) {
-                    this._state = state;
-                    this._isHighlightedState = state === marcuraCommon.ControlState.Highlighted;
-                    this._changeDetectorRef.markForCheck();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AbstractDropdownComponent.prototype, "type", {
-            get: function () {
-                return this._type;
-            },
-            set: function (type) {
-                if (this._type !== type) {
-                    this._type = type;
-                    this._isSuccessType = type === marcuraCommon.ControlType.Success;
-                    this._isErrorType = type === marcuraCommon.ControlType.Error;
-                    this._isWarningType = type === marcuraCommon.ControlType.Warning;
-                    this._changeDetectorRef.markForCheck();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AbstractDropdownComponent.prototype, "items", {
-            get: function () {
-                return this._items;
-            },
-            set: function (items) {
-                this._items = items || [];
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AbstractDropdownComponent.prototype, "isOpen", {
-            get: function () {
-                return this._isOpen.value.isOpen;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AbstractDropdownComponent.prototype._setComponent = function (component) {
-            this._component = component;
-        };
-        AbstractDropdownComponent.prototype._emitChanged = function (value) { };
-        AbstractDropdownComponent.prototype._reset = function () {
-            var hasValueChanged = this.hasValueChanged(this.defaultValue);
-            if (hasValueChanged) {
-                this.writeValue(this.defaultValue);
-                this.formControl.reset(this.defaultValue);
-                this.valueFormControl.reset(this.defaultValue);
-                this._component.reset();
-                this._emitChanged(this.defaultValue);
-            }
-            else {
-                this.formControl.markAsPristine();
-                this.formControl.markAsUntouched();
-                this.valueFormControl.reset(this.defaultValue);
-                this._component.reset();
-            }
-        };
-        AbstractDropdownComponent.prototype.init = function () {
-            var _this = this;
-            this._observer.listen(this._isDisabled, function (isDisabled) {
-                if (isDisabled) {
-                    _this.valueFormControl.disable();
-                }
-                else {
-                    _this.valueFormControl.enable();
-                }
-            });
-        };
-        AbstractDropdownComponent.prototype.open = function (shouldEmitEvent) {
-            if (shouldEmitEvent === void 0) { shouldEmitEvent = true; }
-            this._component.toggle(true);
-            this._isOpen.next({ isOpen: true, shouldEmit: shouldEmitEvent });
-        };
-        AbstractDropdownComponent.prototype.close = function (shouldEmitEvent) {
-            if (shouldEmitEvent === void 0) { shouldEmitEvent = true; }
-            this._component.toggle(false);
-            this._isOpen.next({ isOpen: false, shouldEmit: shouldEmitEvent });
-        };
-        AbstractDropdownComponent.prototype.toggle = function (shouldEmitEvent) {
-            if (shouldEmitEvent === void 0) { shouldEmitEvent = true; }
-            if (this._isOpen) {
-                this.close(shouldEmitEvent);
-            }
-            else {
-                this.open(shouldEmitEvent);
-            }
-        };
-        AbstractDropdownComponent.prototype.focus = function () {
-            this._component.focus();
-        };
-        AbstractDropdownComponent.prototype.blur = function () {
-            this._component.blur();
-        };
-        AbstractDropdownComponent.prototype.onOpened = function () {
-            this._isOpen.next({ isOpen: true, shouldEmit: true });
-        };
-        AbstractDropdownComponent.prototype.onClosed = function () {
-            this._isOpen.next({ isOpen: false, shouldEmit: true });
-        };
-        AbstractDropdownComponent.prototype.onFocused = function () {
-            this.focused.emit();
-        };
-        AbstractDropdownComponent.prototype.onBlurred = function () {
-            this.blurred.emit(new marcuraCommon.ControlBlurredEvent(this.value, this._resetedValue || this._focusedValue, this.hasValueChanged(this._resetedValue || this._focusedValue)));
-            this._resetedValue = null;
-        };
-        AbstractDropdownComponent.prototype.onChanged = function (value) {
-            value = value === undefined ? this.defaultValue : value;
-            this.value = value;
-            this.propagateChanged(value);
-            this.propagateTouched();
-            this._emitChanged(value);
-        };
-        AbstractDropdownComponent.prototype.onResetClicked = function () {
-            if (!this.hasReset) {
-                return;
-            }
-            this._resetedValue = this.value;
-            this.focus();
-            this._reset();
-            this.open();
-        };
-        AbstractDropdownComponent.prototype.writeValue = function (value) {
-            // CSS class @HostBindings aren't updated with OnPush change detection strategy,
-            // and are to be marked for check.
-            this._changeDetectorRef.markForCheck();
-            this.valueFormControl.setValue(value);
-            _super.prototype.writeValue.call(this, value);
-        };
-        AbstractDropdownComponent.prototype.setDisabledState = function (isDisabled) {
-            _super.prototype.setDisabledState.call(this, isDisabled);
-            // Mark hasIsDisabledCssClass @HostBinding for check.
-            this._changeDetectorRef.markForCheck();
-        };
-        return AbstractDropdownComponent;
-    }(marcuraCommon.AbstractControlComponent));
-    AbstractDropdownComponent.decorators = [
-        { type: core.Component, args: [{
-                    template: '',
-                    changeDetection: core.ChangeDetectionStrategy.OnPush
-                },] }
-    ];
-    AbstractDropdownComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef }
-    ]; };
-    AbstractDropdownComponent.propDecorators = {
-        valueField: [{ type: core.Input }],
-        textField: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        isLoading: [{ type: core.Input }],
-        hasReset: [{ type: core.Input }],
-        popupClass: [{ type: core.Input }],
-        state: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        items: [{ type: core.Input }],
-        listHeight: [{ type: core.Input }],
-        isPrimitiveValue: [{ type: core.Input }],
-        isOutline: [{ type: core.Input }],
-        opened: [{ type: core.Output }],
-        closed: [{ type: core.Output }]
+    var AbstractDropdownComponent = /** @class */ (function (_super) {
+        __extends(AbstractDropdownComponent, _super);
+        function AbstractDropdownComponent(_changeDetectorRef) {
+            var _this = _super.call(this) || this;
+            _this._changeDetectorRef = _changeDetectorRef;
+            _this._valueField = 'id';
+            _this._textField = 'name';
+            _this._items = [];
+            _this._isOpen = new rxjs.BehaviorSubject({
+                isOpen: false,
+                shouldEmit: false,
+            });
+            _this._isLoading = new rxjs.BehaviorSubject(false);
+            _this._type = null;
+            _this._state = null;
+            _this._isSuccessType = _this._type === marcuraCommon.ControlType.Success;
+            _this._isErrorType = _this._type === marcuraCommon.ControlType.Error;
+            _this._isWarningType = _this._type === marcuraCommon.ControlType.Warning;
+            _this._isHighlightedState = _this._state === marcuraCommon.ControlState.Highlighted;
+            _this.valueFormControl = new forms.FormControl();
+            _this.hasReset = true;
+            _this.listHeight = 200;
+            _this.isPrimitiveValue = false;
+            _this.isOutline = false;
+            _this.opened = new core.EventEmitter();
+            _this.closed = new core.EventEmitter();
+            return _this;
+        }
+        Object.defineProperty(AbstractDropdownComponent.prototype, "valueField", {
+            get: function () {
+                return this._valueField;
+            },
+            set: function (valueField) {
+                if (valueField && this._valueField !== valueField) {
+                    this._valueField = valueField;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AbstractDropdownComponent.prototype, "textField", {
+            get: function () {
+                return this._textField;
+            },
+            set: function (textField) {
+                if (textField && this._textField !== textField) {
+                    this._textField = textField;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AbstractDropdownComponent.prototype, "isLoading", {
+            get: function () {
+                return this._isLoading.value;
+            },
+            set: function (isLoading) {
+                this._isLoading.next(isLoading);
+                // Mark hasIsLoadingCssClass @HostBinding for check.
+                this._changeDetectorRef.markForCheck();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AbstractDropdownComponent.prototype, "state", {
+            get: function () {
+                return this._state;
+            },
+            set: function (state) {
+                if (this._state !== state) {
+                    this._state = state;
+                    this._isHighlightedState = state === marcuraCommon.ControlState.Highlighted;
+                    this._changeDetectorRef.markForCheck();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AbstractDropdownComponent.prototype, "type", {
+            get: function () {
+                return this._type;
+            },
+            set: function (type) {
+                if (this._type !== type) {
+                    this._type = type;
+                    this._isSuccessType = type === marcuraCommon.ControlType.Success;
+                    this._isErrorType = type === marcuraCommon.ControlType.Error;
+                    this._isWarningType = type === marcuraCommon.ControlType.Warning;
+                    this._changeDetectorRef.markForCheck();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AbstractDropdownComponent.prototype, "items", {
+            get: function () {
+                return this._items;
+            },
+            set: function (items) {
+                this._items = items || [];
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AbstractDropdownComponent.prototype, "isOpen", {
+            get: function () {
+                return this._isOpen.value.isOpen;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AbstractDropdownComponent.prototype._setComponent = function (component) {
+            this._component = component;
+        };
+        AbstractDropdownComponent.prototype._emitChanged = function (value) { };
+        AbstractDropdownComponent.prototype._reset = function () {
+            var hasValueChanged = this.hasValueChanged(this.defaultValue);
+            if (hasValueChanged) {
+                this.writeValue(this.defaultValue);
+                this.formControl.reset(this.defaultValue);
+                this.valueFormControl.reset(this.defaultValue);
+                this._component.reset();
+                this._emitChanged(this.defaultValue);
+            }
+            else {
+                this.formControl.markAsPristine();
+                this.formControl.markAsUntouched();
+                this.valueFormControl.reset(this.defaultValue);
+                this._component.reset();
+            }
+        };
+        AbstractDropdownComponent.prototype.init = function () {
+            var _this = this;
+            this._observer.listen(this._isDisabled, function (isDisabled) {
+                if (isDisabled) {
+                    _this.valueFormControl.disable();
+                }
+                else {
+                    _this.valueFormControl.enable();
+                }
+            });
+        };
+        AbstractDropdownComponent.prototype.open = function (shouldEmitEvent) {
+            if (shouldEmitEvent === void 0) { shouldEmitEvent = true; }
+            this._component.toggle(true);
+            this._isOpen.next({ isOpen: true, shouldEmit: shouldEmitEvent });
+        };
+        AbstractDropdownComponent.prototype.close = function (shouldEmitEvent) {
+            if (shouldEmitEvent === void 0) { shouldEmitEvent = true; }
+            this._component.toggle(false);
+            this._isOpen.next({ isOpen: false, shouldEmit: shouldEmitEvent });
+        };
+        AbstractDropdownComponent.prototype.toggle = function (shouldEmitEvent) {
+            if (shouldEmitEvent === void 0) { shouldEmitEvent = true; }
+            if (this._isOpen) {
+                this.close(shouldEmitEvent);
+            }
+            else {
+                this.open(shouldEmitEvent);
+            }
+        };
+        AbstractDropdownComponent.prototype.focus = function () {
+            this._component.focus();
+        };
+        AbstractDropdownComponent.prototype.blur = function () {
+            this._component.blur();
+        };
+        AbstractDropdownComponent.prototype.onOpened = function () {
+            this._isOpen.next({ isOpen: true, shouldEmit: true });
+        };
+        AbstractDropdownComponent.prototype.onClosed = function () {
+            this._isOpen.next({ isOpen: false, shouldEmit: true });
+        };
+        AbstractDropdownComponent.prototype.onFocused = function () {
+            this.focused.emit();
+        };
+        AbstractDropdownComponent.prototype.onBlurred = function () {
+            this.blurred.emit(new marcuraCommon.ControlBlurredEvent(this.value, this._resetedValue || this._focusedValue, this.hasValueChanged(this._resetedValue || this._focusedValue)));
+            this._resetedValue = null;
+        };
+        AbstractDropdownComponent.prototype.onChanged = function (value) {
+            value = value === undefined ? this.defaultValue : value;
+            this.value = value;
+            this.propagateChanged(value);
+            this.propagateTouched();
+            this._emitChanged(value);
+        };
+        AbstractDropdownComponent.prototype.onResetClicked = function () {
+            if (!this.hasReset) {
+                return;
+            }
+            this._resetedValue = this.value;
+            this.focus();
+            this._reset();
+            this.open();
+        };
+        AbstractDropdownComponent.prototype.writeValue = function (value) {
+            // CSS class @HostBindings aren't updated with OnPush change detection strategy,
+            // and are to be marked for check.
+            this._changeDetectorRef.markForCheck();
+            this.valueFormControl.setValue(value);
+            _super.prototype.writeValue.call(this, value);
+        };
+        AbstractDropdownComponent.prototype.setDisabledState = function (isDisabled) {
+            _super.prototype.setDisabledState.call(this, isDisabled);
+            // Mark hasIsDisabledCssClass @HostBinding for check.
+            this._changeDetectorRef.markForCheck();
+        };
+        return AbstractDropdownComponent;
+    }(marcuraCommon.AbstractControlComponent));
+    AbstractDropdownComponent.decorators = [
+        { type: core.Component, args: [{
+                    template: '',
+                    changeDetection: core.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    AbstractDropdownComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef }
+    ]; };
+    AbstractDropdownComponent.propDecorators = {
+        valueField: [{ type: core.Input }],
+        textField: [{ type: core.Input }],
+        placeholder: [{ type: core.Input }],
+        isLoading: [{ type: core.Input }],
+        hasReset: [{ type: core.Input }],
+        popupClass: [{ type: core.Input }],
+        state: [{ type: core.Input }],
+        type: [{ type: core.Input }],
+        items: [{ type: core.Input }],
+        listHeight: [{ type: core.Input }],
+        isPrimitiveValue: [{ type: core.Input }],
+        isOutline: [{ type: core.Input }],
+        opened: [{ type: core.Output }],
+        closed: [{ type: core.Output }]
     };
 
-    (function (ComboboxSearchSettingsOperator) {
-        ComboboxSearchSettingsOperator["Contains"] = "contains";
-        ComboboxSearchSettingsOperator["StartsWith"] = "startsWith";
+    (function (ComboboxSearchSettingsOperator) {
+        ComboboxSearchSettingsOperator["Contains"] = "contains";
+        ComboboxSearchSettingsOperator["StartsWith"] = "startsWith";
     })(exports.ComboboxSearchSettingsOperator || (exports.ComboboxSearchSettingsOperator = {}));
 
-    var AbstractComboboxComponent = /** @class */ (function (_super) {
-        __extends(AbstractComboboxComponent, _super);
-        function AbstractComboboxComponent(changeDetectorRef, _renderer) {
-            var _this = _super.call(this, changeDetectorRef) || this;
-            _this._renderer = _renderer;
-            _this._debounceTime = 500;
-            _this._debounceObserver = new marcuraCommon.Observer();
-            _this._worker = new marcuraCommon.Worker();
-            _this._additionalItems = new rxjs.BehaviorSubject([]);
-            _this._valueNormalizerItems = [];
-            _this._isSync = false;
-            _this._loadedItems = new rxjs.BehaviorSubject([]);
-            _this._hasSearched = new rxjs.BehaviorSubject(false);
-            _this._isSearching = new rxjs.BehaviorSubject(false);
-            _this._searchText = new rxjs.BehaviorSubject('');
-            _this.combinedItems = rxjs.combineLatest([_this._loadedItems, _this._additionalItems]).pipe(operators.map(function (_a) {
-                var _b = __read(_a, 2), items = _b[0], additionalItems = _b[1];
-                return __spread(items, additionalItems).filter(marcuraCommon.Is.truthy);
-            }));
-            _this.isSearchable = true;
-            _this.minSearchCharacters = 1;
-            _this.areItemsCached = false;
-            _this.searchSettings = {
-                isCaseSensitive: false,
-                operator: exports.ComboboxSearchSettingsOperator.Contains,
-            };
-            _this.isGroupable = false;
-            _this.searched = new core.EventEmitter();
-            _this.isNoItemsTextVisible = rxjs.combineLatest([
-                _this._isSearching,
-                _this._hasSearched,
-                _this._isFocused,
-                _this.combinedItems,
-            ]).pipe(operators.map(function (_a) {
-                var _b = __read(_a, 4), isSearching = _b[0], hasSearched = _b[1], isFocused = _b[2], combinedItems = _b[3];
-                return !isSearching && hasSearched && isFocused && combinedItems.length === 0;
-            }));
-            _this.isMinSearchTextVisible = rxjs.combineLatest([
-                _this._isSearching,
-                _this._hasSearched,
-                _this._isFocused,
-            ]).pipe(operators.map(function (_a) {
-                var _b = __read(_a, 3), isSearching = _b[0], hasSearched = _b[1], isFocused = _b[2];
-                return !_this._isSync && !isSearching && !hasSearched && isFocused;
-            }));
-            _this.isLoadingSpinnerVisible = rxjs.combineLatest([
-                _this._isLoading,
-                _this._isSearching,
-            ]).pipe(operators.map(function (_a) {
-                var _b = __read(_a, 2), isLoading = _b[0], isSearching = _b[1];
-                return isLoading || isSearching;
-            }));
-            // To show loading properly we are to use loadedItems as they don't include additionalItems.
-            _this.isLoadingTextVisible = rxjs.combineLatest([
-                _this.isLoadingSpinnerVisible,
-                _this._loadedItems,
-            ]).pipe(operators.map(function (_a) {
-                var _b = __read(_a, 2), isLoadingSpinnerVisible = _b[0], loadedItems = _b[1];
-                return isLoadingSpinnerVisible && loadedItems.length === 0;
-            }));
-            _this.loadItems = function (searchText) {
-                searchText = (searchText || '').trim();
-                if (_this._isSync) {
-                    _this._hasSearched.next(!!searchText);
-                    _this._loadedItems.next(_this.searchItems(searchText));
-                }
-                else {
-                    if (_this.canLoadItems(searchText)) {
-                        _this._isSearching.next(true);
-                        _this._worker.handle(_this.search(searchText), function (items) {
-                            _this._hasSearched.next(true);
-                            _this._loadedItems.next(items);
-                            _this._valueNormalizerItems = __spread(items, _this._additionalItems.value);
-                            _this._isSearching.next(false);
-                        });
-                    }
-                    else {
-                        _this._hasSearched.next(false);
-                        _this._loadedItems.next([]);
-                        _this._valueNormalizerItems = [];
-                        _this._isSearching.next(false);
-                    }
-                }
-            };
-            return _this;
-        }
-        Object.defineProperty(AbstractComboboxComponent.prototype, "debounceTime", {
-            get: function () {
-                return this._debounceTime;
-            },
-            set: function (value) {
-                this._debounceTime = value;
-                this._listenToSearched();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AbstractComboboxComponent.prototype, "items", {
-            get: function () {
-                return this._items;
-            },
-            set: function (items) {
-                this._isSync = true;
-                this._items = items || [];
-                this._listenToSearched();
-                this._loadedItems.next(this._items);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AbstractComboboxComponent.prototype, "additionalItems", {
-            get: function () {
-                return this._additionalItems.value;
-            },
-            set: function (additionalItems) {
-                this._additionalItems.next(additionalItems || []);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AbstractComboboxComponent.prototype._disableChromeAutocomplete = function () {
-            if (this._component.searchbar && this._component.searchbar.input) {
-                this._renderer.setAttribute(this._component.searchbar.input.nativeElement, 'autocomplete', 'disabled');
-            }
-        };
-        AbstractComboboxComponent.prototype._listenToSearched = function () {
-            var _this = this;
-            this._debounceObserver.clear();
-            this._debounceObserver.listen(this._searchText.pipe(operators.distinctUntilChanged(), operators.skip(1), operators.tap(function (searchText) {
-                _this.searched.emit(searchText);
-                _this._isSearching.next(_this.canLoadItems(searchText) && _this._isOpen.value.isOpen);
-            }), operators.debounceTime(this._isSync ? 0 : this.debounceTime), operators.filter(function () { return _this._isOpen.value.isOpen; })), this.loadItems);
-        };
-        AbstractComboboxComponent.prototype._filterItems = function (items, searchText) {
-            var _this = this;
-            if (!items || !items.length) {
-                return [];
-            }
-            return items.filter(function (item) {
-                var itemText = (item[_this.textField] || '').trim();
-                itemText = _this.searchSettings.isCaseSensitive ? itemText : itemText.toLowerCase();
-                return _this.searchSettings.operator === exports.ComboboxSearchSettingsOperator.Contains
-                    ? itemText.indexOf(searchText) !== -1
-                    : itemText.substring(0, searchText.length) === searchText;
-            });
-        };
-        AbstractComboboxComponent.prototype._setComponent = function (component) {
-            this._component = component;
-            this._disableChromeAutocomplete();
-        };
-        AbstractComboboxComponent.prototype.searchItems = function (searchText) {
-            var _this = this;
-            if (!this.searchSettings || !searchText || !this._items.length) {
-                return this._items;
-            }
-            searchText = this.searchSettings.isCaseSensitive ? searchText : searchText.toLowerCase();
-            if (this.isGroupable) {
-                var groups = this._items;
-                var filteredGroups = groups
-                    .map(function (group) {
-                    return {
-                        items: _this._filterItems(group.items, searchText),
-                        aggregates: group.aggregates,
-                        field: group.field,
-                        value: group.value,
-                    };
-                })
-                    .filter(function (group) { return group.items.length > 0; });
-                return filteredGroups;
-            }
-            return this._filterItems(this._items, searchText);
-        };
-        AbstractComboboxComponent.prototype.canLoadItems = function (searchText) {
-            return searchText.length >= this.minSearchCharacters && !this._isSync;
-        };
-        AbstractComboboxComponent.prototype.getItem = function (items, text) {
-            var _this = this;
-            return items.find(function (item) { return item[_this.textField].toLowerCase() === text.toLowerCase(); });
-        };
-        AbstractComboboxComponent.prototype.isItemEqual = function (item1, item2) {
-            var isItem1Empty = item1 === null || item1 === undefined;
-            var isItem2Empty = item2 === null || item2 === undefined;
-            if (isItem1Empty && isItem2Empty) {
-                return true;
-            }
-            if (isItem1Empty || isItem2Empty) {
-                return false;
-            }
-            return this.isPrimitiveValue ? item1 === item2 : item1[this.valueField] === item2[this.valueField];
-        };
-        AbstractComboboxComponent.prototype.ngOnDestroy = function () {
-            this._debounceObserver.destroy();
-            this._worker.destroy();
-        };
-        AbstractComboboxComponent.prototype.init = function () {
-            var _this = this;
-            _super.prototype.init.call(this);
-            this._listenToSearched();
-            if (this._isSync) {
-                this._loadedItems.next(this._items);
-            }
-            // Closed.
-            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return !event.isOpen; }), operators.skip(1)), function (event) {
-                if (!_this.areItemsCached && !_this._isSync) {
-                    _this._loadedItems.next([]);
-                }
-                _this._worker.cancel();
-                _this._isSearching.next(false);
-                if (event.shouldEmit) {
-                    _this.closed.emit();
-                }
-            });
-            // Blurred.
-            this._observer.listen(this._isFocused.pipe(operators.filter(marcuraCommon.isFalse)), function () {
-                // Restore original unfiltered items when the component is blurred
-                // after some search text entered. Consider a case:
-                // 1. Search with text that gives 0 items.
-                // 2. Blur and focus.
-                // 3. Search text is cleared, but items remain empty, so the list won't show up.
-                _this._loadedItems.next(_this._items);
-                _this._hasSearched.next(false);
-            });
-        };
-        AbstractComboboxComponent.prototype.onSearched = function (searchText) {
-            this._searchText.next(searchText);
-        };
-        return AbstractComboboxComponent;
-    }(AbstractDropdownComponent));
-    AbstractComboboxComponent.decorators = [
-        { type: core.Component, args: [{
-                    template: '',
-                    changeDetection: core.ChangeDetectionStrategy.OnPush
-                },] }
-    ];
-    AbstractComboboxComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: core.Renderer2 }
-    ]; };
-    AbstractComboboxComponent.propDecorators = {
-        isSearchable: [{ type: core.Input }],
-        minSearchCharacters: [{ type: core.Input }],
-        search: [{ type: core.Input }],
-        areItemsCached: [{ type: core.Input }],
-        debounceTime: [{ type: core.Input }],
-        items: [{ type: core.Input }],
-        additionalItems: [{ type: core.Input }],
-        searchSettings: [{ type: core.Input }],
-        isGroupable: [{ type: core.Input }],
-        searched: [{ type: core.Output }]
+    var AbstractComboboxComponent = /** @class */ (function (_super) {
+        __extends(AbstractComboboxComponent, _super);
+        function AbstractComboboxComponent(changeDetectorRef, _renderer) {
+            var _this = _super.call(this, changeDetectorRef) || this;
+            _this._renderer = _renderer;
+            _this._debounceTime = 500;
+            _this._debounceObserver = new marcuraCommon.Observer();
+            _this._worker = new marcuraCommon.Worker();
+            _this._additionalItems = new rxjs.BehaviorSubject([]);
+            _this._valueNormalizerItems = [];
+            _this._isSync = false;
+            _this._loadedItems = new rxjs.BehaviorSubject([]);
+            _this._hasSearched = new rxjs.BehaviorSubject(false);
+            _this._isSearching = new rxjs.BehaviorSubject(false);
+            _this._searchText = new rxjs.BehaviorSubject('');
+            _this.combinedItems = rxjs.combineLatest([_this._loadedItems, _this._additionalItems]).pipe(operators.map(function (_a) {
+                var _b = __read(_a, 2), items = _b[0], additionalItems = _b[1];
+                return __spread(items, additionalItems).filter(marcuraCommon.Is.truthy);
+            }));
+            _this.isSearchable = true;
+            _this.minSearchCharacters = 1;
+            _this.areItemsCached = false;
+            _this.searchSettings = {
+                isCaseSensitive: false,
+                operator: exports.ComboboxSearchSettingsOperator.Contains,
+            };
+            _this.isGroupable = false;
+            _this.searched = new core.EventEmitter();
+            _this.isNoItemsTextVisible = rxjs.combineLatest([
+                _this._isSearching,
+                _this._hasSearched,
+                _this._isFocused,
+                _this.combinedItems,
+            ]).pipe(operators.map(function (_a) {
+                var _b = __read(_a, 4), isSearching = _b[0], hasSearched = _b[1], isFocused = _b[2], combinedItems = _b[3];
+                return !isSearching && hasSearched && isFocused && combinedItems.length === 0;
+            }));
+            _this.isMinSearchTextVisible = rxjs.combineLatest([
+                _this._isSearching,
+                _this._hasSearched,
+                _this._isFocused,
+            ]).pipe(operators.map(function (_a) {
+                var _b = __read(_a, 3), isSearching = _b[0], hasSearched = _b[1], isFocused = _b[2];
+                return !_this._isSync && !isSearching && !hasSearched && isFocused;
+            }));
+            _this.isLoadingSpinnerVisible = rxjs.combineLatest([
+                _this._isLoading,
+                _this._isSearching,
+            ]).pipe(operators.map(function (_a) {
+                var _b = __read(_a, 2), isLoading = _b[0], isSearching = _b[1];
+                return isLoading || isSearching;
+            }));
+            // To show loading properly we are to use loadedItems as they don't include additionalItems.
+            _this.isLoadingTextVisible = rxjs.combineLatest([
+                _this.isLoadingSpinnerVisible,
+                _this._loadedItems,
+            ]).pipe(operators.map(function (_a) {
+                var _b = __read(_a, 2), isLoadingSpinnerVisible = _b[0], loadedItems = _b[1];
+                return isLoadingSpinnerVisible && loadedItems.length === 0;
+            }));
+            _this.loadItems = function (searchText) {
+                searchText = (searchText || '').trim();
+                if (_this._isSync) {
+                    _this._hasSearched.next(!!searchText);
+                    _this._loadedItems.next(_this.searchItems(searchText));
+                }
+                else {
+                    if (_this.canLoadItems(searchText)) {
+                        _this._isSearching.next(true);
+                        _this._worker.handle(_this.search(searchText), function (items) {
+                            _this._hasSearched.next(true);
+                            _this._loadedItems.next(items);
+                            _this._valueNormalizerItems = __spread(items, _this._additionalItems.value);
+                            _this._isSearching.next(false);
+                        });
+                    }
+                    else {
+                        _this._hasSearched.next(false);
+                        _this._loadedItems.next([]);
+                        _this._valueNormalizerItems = [];
+                        _this._isSearching.next(false);
+                    }
+                }
+            };
+            return _this;
+        }
+        Object.defineProperty(AbstractComboboxComponent.prototype, "debounceTime", {
+            get: function () {
+                return this._debounceTime;
+            },
+            set: function (value) {
+                this._debounceTime = value;
+                this._listenToSearched();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AbstractComboboxComponent.prototype, "items", {
+            get: function () {
+                return this._items;
+            },
+            set: function (items) {
+                this._isSync = true;
+                this._items = items || [];
+                this._listenToSearched();
+                this._loadedItems.next(this._items);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AbstractComboboxComponent.prototype, "additionalItems", {
+            get: function () {
+                return this._additionalItems.value;
+            },
+            set: function (additionalItems) {
+                this._additionalItems.next(additionalItems || []);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AbstractComboboxComponent.prototype._disableChromeAutocomplete = function () {
+            if (this._component.searchbar && this._component.searchbar.input) {
+                this._renderer.setAttribute(this._component.searchbar.input.nativeElement, 'autocomplete', 'disabled');
+            }
+        };
+        AbstractComboboxComponent.prototype._listenToSearched = function () {
+            var _this = this;
+            this._debounceObserver.clear();
+            this._debounceObserver.listen(this._searchText.pipe(operators.distinctUntilChanged(), operators.skip(1), operators.tap(function (searchText) {
+                _this.searched.emit(searchText);
+                _this._isSearching.next(_this.canLoadItems(searchText) && _this._isOpen.value.isOpen);
+            }), operators.debounceTime(this._isSync ? 0 : this.debounceTime), operators.filter(function () { return _this._isOpen.value.isOpen; })), this.loadItems);
+        };
+        AbstractComboboxComponent.prototype._filterItems = function (items, searchText) {
+            var _this = this;
+            if (!items || !items.length) {
+                return [];
+            }
+            return items.filter(function (item) {
+                var itemText = (item[_this.textField] || '').trim();
+                itemText = _this.searchSettings.isCaseSensitive ? itemText : itemText.toLowerCase();
+                return _this.searchSettings.operator === exports.ComboboxSearchSettingsOperator.Contains
+                    ? itemText.indexOf(searchText) !== -1
+                    : itemText.substring(0, searchText.length) === searchText;
+            });
+        };
+        AbstractComboboxComponent.prototype._setComponent = function (component) {
+            this._component = component;
+            this._disableChromeAutocomplete();
+        };
+        AbstractComboboxComponent.prototype.searchItems = function (searchText) {
+            var _this = this;
+            if (!this.searchSettings || !searchText || !this._items.length) {
+                return this._items;
+            }
+            searchText = this.searchSettings.isCaseSensitive ? searchText : searchText.toLowerCase();
+            if (this.isGroupable) {
+                var groups = this._items;
+                var filteredGroups = groups
+                    .map(function (group) {
+                    return {
+                        items: _this._filterItems(group.items, searchText),
+                        aggregates: group.aggregates,
+                        field: group.field,
+                        value: group.value,
+                    };
+                })
+                    .filter(function (group) { return group.items.length > 0; });
+                return filteredGroups;
+            }
+            return this._filterItems(this._items, searchText);
+        };
+        AbstractComboboxComponent.prototype.canLoadItems = function (searchText) {
+            return searchText.length >= this.minSearchCharacters && !this._isSync;
+        };
+        AbstractComboboxComponent.prototype.getItem = function (items, text) {
+            var _this = this;
+            return items.find(function (item) { return item[_this.textField].toLowerCase() === text.toLowerCase(); });
+        };
+        AbstractComboboxComponent.prototype.isItemEqual = function (item1, item2) {
+            var isItem1Empty = item1 === null || item1 === undefined;
+            var isItem2Empty = item2 === null || item2 === undefined;
+            if (isItem1Empty && isItem2Empty) {
+                return true;
+            }
+            if (isItem1Empty || isItem2Empty) {
+                return false;
+            }
+            return this.isPrimitiveValue ? item1 === item2 : item1[this.valueField] === item2[this.valueField];
+        };
+        AbstractComboboxComponent.prototype.ngOnDestroy = function () {
+            this._debounceObserver.destroy();
+            this._worker.destroy();
+        };
+        AbstractComboboxComponent.prototype.init = function () {
+            var _this = this;
+            _super.prototype.init.call(this);
+            this._listenToSearched();
+            if (this._isSync) {
+                this._loadedItems.next(this._items);
+            }
+            // Closed.
+            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return !event.isOpen; }), operators.skip(1)), function (event) {
+                if (!_this.areItemsCached && !_this._isSync) {
+                    _this._loadedItems.next([]);
+                }
+                _this._worker.cancel();
+                _this._isSearching.next(false);
+                if (event.shouldEmit) {
+                    _this.closed.emit();
+                }
+            });
+            // Blurred.
+            this._observer.listen(this._isFocused.pipe(operators.filter(marcuraCommon.isFalse)), function () {
+                // Restore original unfiltered items when the component is blurred
+                // after some search text entered. Consider a case:
+                // 1. Search with text that gives 0 items.
+                // 2. Blur and focus.
+                // 3. Search text is cleared, but items remain empty, so the list won't show up.
+                _this._loadedItems.next(_this._items);
+                _this._hasSearched.next(false);
+            });
+        };
+        AbstractComboboxComponent.prototype.onSearched = function (searchText) {
+            this._searchText.next(searchText);
+        };
+        return AbstractComboboxComponent;
+    }(AbstractDropdownComponent));
+    AbstractComboboxComponent.decorators = [
+        { type: core.Component, args: [{
+                    template: '',
+                    changeDetection: core.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    AbstractComboboxComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: core.Renderer2 }
+    ]; };
+    AbstractComboboxComponent.propDecorators = {
+        isSearchable: [{ type: core.Input }],
+        minSearchCharacters: [{ type: core.Input }],
+        search: [{ type: core.Input }],
+        areItemsCached: [{ type: core.Input }],
+        debounceTime: [{ type: core.Input }],
+        items: [{ type: core.Input }],
+        additionalItems: [{ type: core.Input }],
+        searchSettings: [{ type: core.Input }],
+        isGroupable: [{ type: core.Input }],
+        searched: [{ type: core.Output }]
     };
 
-    var ComboboxPopupFooterComponent = /** @class */ (function () {
-        function ComboboxPopupFooterComponent() {
-            this.isLoadingTextVisible = false;
-            this.isNoItemsTextVisible = false;
-            this.isMinSearchTextVisible = false;
-        }
-        ComboboxPopupFooterComponent.prototype.getMinSearchText = function () {
-            return this.minSearchText.replace('{minSearchCharacters}', this.minSearchCharacters.toString());
-        };
-        return ComboboxPopupFooterComponent;
-    }());
-    ComboboxPopupFooterComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sg-combobox-popup-footer',
-                    template: "<div\n  class=\"sg-combobox-popup-footer__inner\"\n  *ngIf=\"isLoadingTextVisible || isNoItemsTextVisible || isMinSearchTextVisible\"\n>\n  <span *ngIf=\"isLoadingTextVisible\" class=\"c-body c-body--3 u-color--text-05\">{{ loadingText }}</span>\n  <span *ngIf=\"isNoItemsTextVisible\" class=\"c-body c-body--3 u-color--text-05\">{{ noItemsText }}</span>\n  <span *ngIf=\"isMinSearchTextVisible\" class=\"c-body c-body--3 u-color--text-05\">{{ getMinSearchText() }}</span>\n</div>\n"
-                },] }
-    ];
-    ComboboxPopupFooterComponent.propDecorators = {
-        isLoadingTextVisible: [{ type: core.Input }],
-        isNoItemsTextVisible: [{ type: core.Input }],
-        isMinSearchTextVisible: [{ type: core.Input }],
-        loadingText: [{ type: core.Input }],
-        noItemsText: [{ type: core.Input }],
-        minSearchText: [{ type: core.Input }],
-        minSearchCharacters: [{ type: core.Input }]
+    var ComboboxPopupFooterComponent = /** @class */ (function () {
+        function ComboboxPopupFooterComponent() {
+            this.isLoadingTextVisible = false;
+            this.isNoItemsTextVisible = false;
+            this.isMinSearchTextVisible = false;
+        }
+        ComboboxPopupFooterComponent.prototype.getMinSearchText = function () {
+            return this.minSearchText.replace('{minSearchCharacters}', this.minSearchCharacters.toString());
+        };
+        return ComboboxPopupFooterComponent;
+    }());
+    ComboboxPopupFooterComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sg-combobox-popup-footer',
+                    template: "<div\n  class=\"sg-combobox-popup-footer__inner\"\n  *ngIf=\"isLoadingTextVisible || isNoItemsTextVisible || isMinSearchTextVisible\"\n>\n  <span *ngIf=\"isLoadingTextVisible\" class=\"c-body c-body--3\">{{ loadingText }}</span>\n  <span *ngIf=\"isNoItemsTextVisible\" class=\"c-body c-body--3\">{{ noItemsText }}</span>\n  <span *ngIf=\"isMinSearchTextVisible\" class=\"c-body c-body--3\">{{ getMinSearchText() }}</span>\n</div>\n"
+                },] }
+    ];
+    ComboboxPopupFooterComponent.propDecorators = {
+        isLoadingTextVisible: [{ type: core.Input }],
+        isNoItemsTextVisible: [{ type: core.Input }],
+        isMinSearchTextVisible: [{ type: core.Input }],
+        loadingText: [{ type: core.Input }],
+        noItemsText: [{ type: core.Input }],
+        minSearchText: [{ type: core.Input }],
+        minSearchCharacters: [{ type: core.Input }]
     };
 
-    var ComboboxChangedEvent = /** @class */ (function (_super) {
-        __extends(ComboboxChangedEvent, _super);
-        function ComboboxChangedEvent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return ComboboxChangedEvent;
+    var ComboboxChangedEvent = /** @class */ (function (_super) {
+        __extends(ComboboxChangedEvent, _super);
+        function ComboboxChangedEvent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return ComboboxChangedEvent;
     }(marcuraCommon.ControlChangedEvent));
 
-    var ComboboxComponent = /** @class */ (function (_super) {
-        __extends(ComboboxComponent, _super);
-        function ComboboxComponent(changeDetectorRef, renderer, _localizer) {
-            var _this = _super.call(this, changeDetectorRef, renderer) || this;
-            _this._localizer = _localizer;
-            _this.defaultValue = null;
-            _this._size = marcuraCommon.ControlSize.Medium;
-            _this._localization = {
-                loadingText: 'Loading...',
-                noItemsText: 'No items found.',
-                minSearchText: 'Enter {minSearchCharacters} or more characters.',
-            };
-            _this.hasCssClass = true;
-            _this.hasSmallSizeCssClass = false;
-            _this.hasMediumSizeCssClass = true;
-            _this.shouldSuggest = true;
-            _this.openOnFocus = true;
-            _this.allowCustom = false;
-            _this.changed = new core.EventEmitter();
-            /**
-             * This field contains factory method for items which will be created placing customizable values inside component. Works when allowCustom is true.
-             *
-             * @memberof ComboboxComponent
-             */
-            _this.itemFactory = function (text) {
-                var _a;
-                return _a = {}, _a[_this.valueField] = null, _a[_this.textField] = text, _a;
-            };
-            _this.valueNormalizer = function (text$) { return text$.pipe(operators.map(function () {
-                var value = null;
-                if (!_this.component) {
-                    return value;
-                }
-                // Can't use this._searchText.value here as it might be empty, consider:
-                // 1) type custom text, 2) focus out and back in 3) there's a text in searchbar,
-                // but this._searchText.value is empty.
-                // So this.component.searchbar.value is to be used.
-                var text = (_this.component.searchbar.value || '').trim();
-                if (!text) {
-                    return value;
-                }
-                if (_this.component.value && _this.component.value[_this.textField].toLowerCase() === text.toLowerCase()) {
-                    value = _this.component.value;
-                }
-                else if (_this.getItem(_this._valueNormalizerItems, text)) {
-                    // If areItemsCached is off, then this.data will be lost by this moment,
-                    // so we use a cache this.valueNormalizerItems.
-                    // This is relevant especially in IE/Edge where this.component.value is null,
-                    // so the code falls back to this condition section.
-                    value = _this.getItem(_this._valueNormalizerItems, text);
-                }
-                else if (_this.allowCustom) {
-                    value = _this.itemFactory(text);
-                    if (_this._isSync) {
-                        // Restore original items after selection, otherwise when opening the list
-                        // next time, only the selected item will appear.
-                        _this.loadItems();
-                    }
-                }
-                else {
-                    // Clears search text if suggestion hasn't been selected.
-                    // Steps to reproduce.
-                    // 1. Use Dymanic Empty sample.
-                    // 2. Type 'to', wait for the list to load, but don't select 'Tokai'. Instead hit Esc key.
-                    // 3. See that the search bar still contains 'to' text, while the value is null,
-                    // which is wrong - search bar text should be removed.
-                    // this.component.searchbar.suggestedText = ''; // This doesn't work.
-                    // As the above line doesn't work, so workaround it by setting form control value to null.
-                    _this.valueFormControl.setValue(value);
-                }
-                _this._valueNormalizerItems = [];
-                return value;
-            })); };
-            _this._localize();
-            return _this;
-        }
-        Object.defineProperty(ComboboxComponent.prototype, "hasHasValueCssClass", {
-            get: function () {
-                return this.hasValue;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "hasIsHoveredCssClass", {
-            get: function () {
-                return this._isHovered.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "hasIsFocusedCssClass", {
-            get: function () {
-                return this.isFocused;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "hasIsDisabledCssClass", {
-            get: function () {
-                return this.isDisabled;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "isSuccessType", {
-            get: function () {
-                return this._isSuccessType;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "isErrorType", {
-            get: function () {
-                return this._isErrorType;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "isWarningType", {
-            get: function () {
-                return this._isWarningType;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "isHighlightedState", {
-            get: function () {
-                return this._isHighlightedState;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "hasIsLoadingCssClass", {
-            get: function () {
-                return this.isLoading || this._isSearching.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "hasHasResetCssClass", {
-            get: function () {
-                return this.hasReset;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "hasIsOutlineCssClass", {
-            get: function () {
-                return this.isOutline;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "loadingText", {
-            get: function () {
-                return this._loadingText || this._localization.loadingText;
-            },
-            set: function (loadingText) {
-                this._loadingText = loadingText;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "noItemsText", {
-            get: function () {
-                return this._noItemsText || this._localization.noItemsText;
-            },
-            set: function (noItemsText) {
-                this._noItemsText = noItemsText;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "minSearchText", {
-            get: function () {
-                return this._minSearchText || this._localization.minSearchText;
-            },
-            set: function (minSearchText) {
-                this._minSearchText = minSearchText;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "size", {
-            get: function () {
-                return this._size;
-            },
-            set: function (size) {
-                if (size) {
-                    this._size = size;
-                }
-                this.hasSmallSizeCssClass = this._size === marcuraCommon.ControlSize.Small;
-                this.hasMediumSizeCssClass = this._size === marcuraCommon.ControlSize.Medium;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ComboboxComponent.prototype, "popupSettings", {
-            get: function () {
-                return {
-                    animate: true,
-                    popupClass: "sg-combobox-popup" + (this.isGroupable ? ' sg-combobox-popup--is-groupable' : '') + " " + (this.popupClass || ''),
-                };
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ComboboxComponent.prototype._emitChanged = function (value) {
-            this.changed.emit(new ComboboxChangedEvent(value));
-        };
-        ComboboxComponent.prototype.hasValueChanged = function (value) {
-            return !this.isItemEqual(this.value, value);
-        };
-        ComboboxComponent.prototype._localize = function () {
-            var _this = this;
-            if (!this._localizer) {
-                return;
-            }
-            this._localization = this._localizer.localization;
-            this._observer.listen(this._localizer.localizationChanged, function (localization) {
-                _this._localization = localization;
-            });
-        };
-        ComboboxComponent.prototype.onResetClicked = function () {
-            if (!this.hasReset) {
-                return;
-            }
-            this._resetedValue = this.value;
-            this.focus();
-            this._reset();
-            if (this.openOnFocus) {
-                this.open();
-            }
-        };
-        ComboboxComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this._setComponent(this.component);
-            this.init();
-            // Opened.
-            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return event.isOpen; })), function () {
-                if (!_this.areItemsCached) {
-                    _this._hasSearched.next(false);
-                }
-                if (_this.canLoadItems(_this._searchText.value) && _this._loadedItems.value.length === 0) {
-                    _this.loadItems(_this._searchText.value);
-                }
-            });
-            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return event.isOpen; }), 
-            // When clicking reset icon, opened event triggers search event with
-            // with old searchbar value instead of an empty string.
-            // So we need to give searchbar a moment before fire opened event.
-            // Steps to reproduce the bug:
-            // 1) Search for Vladivostok and select it 2) Reset value with icon
-            // 3) searchText remains "Vladivostok", but should be "".
-            operators.debounceTime(50)), function () { return _this.opened.emit(); });
-            // Focused.
-            this._observer.listen(this._isFocused.pipe(operators.filter(marcuraCommon.isTrue)), function () {
-                if (_this.openOnFocus) {
-                    _this.open();
-                }
-            });
-        };
-        ComboboxComponent.prototype.onChanged = function (value) {
-            if (!this.hasValueChanged(value)) {
-                return;
-            }
-            value = value === undefined ? this.defaultValue : value;
-            this.value = value;
-            this.component.searchbar.suggestedText = '';
-            this.propagateChanged(value);
-            this.propagateTouched();
-            this._emitChanged(value);
-            if (!value && this._isSync) {
-                // Restore original items after selection, otherwise when opening the list
-                // next time, only the previously selected item will appear.
-                // Steps to reproduce: 1) Select "Cayman Brac", 2) Focus out and focus back,
-                // 3) Delete a couple of characters with a Backspace from the end and hit Enter.
-                // 4) Open the list.
-                this.loadItems();
-            }
-        };
-        return ComboboxComponent;
-    }(AbstractComboboxComponent));
-    ComboboxComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sg-combobox',
-                    template: "<kendo-combobox\n  #component\n  [placeholder]=\"placeholder\"\n  [formControl]=\"valueFormControl\"\n  [data]=\"combinedItems | async\"\n  [filterable]=\"isSearchable\"\n  [valueField]=\"valueField\"\n  [textField]=\"textField\"\n  [loading]=\"isLoadingSpinnerVisible | async\"\n  [clearButton]=\"false\"\n  [popupSettings]=\"popupSettings\"\n  [listHeight]=\"listHeight\"\n  [valuePrimitive]=\"isPrimitiveValue\"\n  [suggest]=\"shouldSuggest\"\n  [allowCustom]=\"true\"\n  [valueNormalizer]=\"valueNormalizer\"\n  (filterChange)=\"onSearched($event)\"\n  (valueChange)=\"onChanged($event)\"\n  (open)=\"onOpened()\"\n  (close)=\"onClosed()\"\n  (focus)=\"onFocused()\"\n  (blur)=\"onBlurred()\"\n>\n  <ng-template kendoDropDownListFooterTemplate>\n    <sg-combobox-popup-footer\n      [isLoadingTextVisible]=\"isLoadingTextVisible | async\"\n      [isNoItemsTextVisible]=\"isNoItemsTextVisible | async\"\n      [isMinSearchTextVisible]=\"isMinSearchTextVisible | async\"\n      [loadingText]=\"loadingText\"\n      [noItemsText]=\"noItemsText\"\n      [minSearchText]=\"minSearchText\"\n      [minSearchCharacters]=\"minSearchCharacters\"\n    >\n    </sg-combobox-popup-footer>\n  </ng-template>\n  <ng-template kendoComboBoxNoDataTemplate></ng-template>\n  <ng-template *ngIf=\"itemTemplate\" kendoComboBoxItemTemplate let-dataItem>\n    <span [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: dataItem}\"></span>\n  </ng-template>\n</kendo-combobox>\n<div class=\"sg-combobox__reset\" *ngIf=\"!isDisabled\" (click)=\"onResetClicked()\">\n  <i class=\"far fa-times\"></i>\n</div>\n<div class=\"sg-combobox__state-line\"></div>\n",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: core.forwardRef(function () { return ComboboxComponent; }),
-                            multi: true,
-                        },
-                        {
-                            provide: marcuraCommon.ABSTRACT_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return ComboboxComponent; }),
-                        },
-                        {
-                            provide: marcuraCommon.OPENABLE_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return ComboboxComponent; }),
-                        },
-                        {
-                            provide: marcuraCommon.STATEABLE_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return ComboboxComponent; }),
-                        },
-                        {
-                            provide: marcuraCommon.TYPEABLE_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return ComboboxComponent; }),
-                        },
-                        {
-                            provide: marcuraCommon.SIZEABLE_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return ComboboxComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    ComboboxComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: core.Renderer2 },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [COMBOBOX_LOCALIZER,] }] }
-    ]; };
-    ComboboxComponent.propDecorators = {
-        component: [{ type: core.ViewChild, args: ['component', { static: true },] }],
-        itemTemplate: [{ type: core.ContentChild, args: [ComboboxItemTemplateDirective, { read: core.TemplateRef, static: true },] }],
-        hasCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox',] }],
-        hasHasValueCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--has-value',] }],
-        hasIsHoveredCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--is-hovered',] }],
-        hasIsFocusedCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--is-focused',] }],
-        hasIsDisabledCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--is-disabled',] }],
-        isSuccessType: [{ type: core.HostBinding, args: ['class.sg-combobox--type-success',] }],
-        isErrorType: [{ type: core.HostBinding, args: ['class.sg-combobox--type-error',] }],
-        isWarningType: [{ type: core.HostBinding, args: ['class.sg-combobox--type-warning',] }],
-        isHighlightedState: [{ type: core.HostBinding, args: ['class.sg-combobox--state-highlighted',] }],
-        hasIsLoadingCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--is-loading',] }],
-        hasHasResetCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--has-reset',] }],
-        hasIsOutlineCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--is-outline',] }],
-        hasSmallSizeCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--size-small',] }],
-        hasMediumSizeCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--size-medium',] }],
-        loadingText: [{ type: core.Input }],
-        noItemsText: [{ type: core.Input }],
-        minSearchText: [{ type: core.Input }],
-        shouldSuggest: [{ type: core.Input }],
-        openOnFocus: [{ type: core.Input }],
-        allowCustom: [{ type: core.Input }],
-        size: [{ type: core.Input }],
-        changed: [{ type: core.Output }],
-        itemFactory: [{ type: core.Input }]
+    var ComboboxComponent = /** @class */ (function (_super) {
+        __extends(ComboboxComponent, _super);
+        function ComboboxComponent(changeDetectorRef, renderer, _localizer) {
+            var _this = _super.call(this, changeDetectorRef, renderer) || this;
+            _this._localizer = _localizer;
+            _this.defaultValue = null;
+            _this._size = marcuraCommon.ControlSize.Medium;
+            _this._localization = {
+                loadingText: 'Loading...',
+                noItemsText: 'No items found.',
+                minSearchText: 'Enter {minSearchCharacters} or more characters.',
+            };
+            _this.hasCssClass = true;
+            _this.hasSmallSizeCssClass = false;
+            _this.hasMediumSizeCssClass = true;
+            _this.shouldSuggest = true;
+            _this.openOnFocus = true;
+            _this.allowCustom = false;
+            _this.changed = new core.EventEmitter();
+            /**
+             * This field contains factory method for items which will be created placing customizable values inside component. Works when allowCustom is true.
+             *
+             * @memberof ComboboxComponent
+             */
+            _this.itemFactory = function (text) {
+                var _a;
+                return _a = {}, _a[_this.valueField] = null, _a[_this.textField] = text, _a;
+            };
+            _this.valueNormalizer = function (text$) { return text$.pipe(operators.map(function () {
+                var value = null;
+                if (!_this.component) {
+                    return value;
+                }
+                // Can't use this._searchText.value here as it might be empty, consider:
+                // 1) type custom text, 2) focus out and back in 3) there's a text in searchbar,
+                // but this._searchText.value is empty.
+                // So this.component.searchbar.value is to be used.
+                var text = (_this.component.searchbar.value || '').trim();
+                if (!text) {
+                    return value;
+                }
+                if (_this.component.value && _this.component.value[_this.textField].toLowerCase() === text.toLowerCase()) {
+                    value = _this.component.value;
+                }
+                else if (_this.getItem(_this._valueNormalizerItems, text)) {
+                    // If areItemsCached is off, then this.data will be lost by this moment,
+                    // so we use a cache this.valueNormalizerItems.
+                    // This is relevant especially in IE/Edge where this.component.value is null,
+                    // so the code falls back to this condition section.
+                    value = _this.getItem(_this._valueNormalizerItems, text);
+                }
+                else if (_this.allowCustom) {
+                    value = _this.itemFactory(text);
+                    if (_this._isSync) {
+                        // Restore original items after selection, otherwise when opening the list
+                        // next time, only the selected item will appear.
+                        _this.loadItems();
+                    }
+                }
+                else {
+                    // Clears search text if suggestion hasn't been selected.
+                    // Steps to reproduce.
+                    // 1. Use Dymanic Empty sample.
+                    // 2. Type 'to', wait for the list to load, but don't select 'Tokai'. Instead hit Esc key.
+                    // 3. See that the search bar still contains 'to' text, while the value is null,
+                    // which is wrong - search bar text should be removed.
+                    // this.component.searchbar.suggestedText = ''; // This doesn't work.
+                    // As the above line doesn't work, so workaround it by setting form control value to null.
+                    _this.valueFormControl.setValue(value);
+                }
+                _this._valueNormalizerItems = [];
+                return value;
+            })); };
+            _this._localize();
+            return _this;
+        }
+        Object.defineProperty(ComboboxComponent.prototype, "hasHasValueCssClass", {
+            get: function () {
+                return this.hasValue;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "hasIsHoveredCssClass", {
+            get: function () {
+                return this._isHovered.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "hasIsFocusedCssClass", {
+            get: function () {
+                return this.isFocused;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "hasIsDisabledCssClass", {
+            get: function () {
+                return this.isDisabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "isSuccessType", {
+            get: function () {
+                return this._isSuccessType;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "isErrorType", {
+            get: function () {
+                return this._isErrorType;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "isWarningType", {
+            get: function () {
+                return this._isWarningType;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "isHighlightedState", {
+            get: function () {
+                return this._isHighlightedState;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "hasIsLoadingCssClass", {
+            get: function () {
+                return this.isLoading || this._isSearching.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "hasHasResetCssClass", {
+            get: function () {
+                return this.hasReset;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "hasIsOutlineCssClass", {
+            get: function () {
+                return this.isOutline;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "loadingText", {
+            get: function () {
+                return this._loadingText || this._localization.loadingText;
+            },
+            set: function (loadingText) {
+                this._loadingText = loadingText;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "noItemsText", {
+            get: function () {
+                return this._noItemsText || this._localization.noItemsText;
+            },
+            set: function (noItemsText) {
+                this._noItemsText = noItemsText;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "minSearchText", {
+            get: function () {
+                return this._minSearchText || this._localization.minSearchText;
+            },
+            set: function (minSearchText) {
+                this._minSearchText = minSearchText;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "size", {
+            get: function () {
+                return this._size;
+            },
+            set: function (size) {
+                if (size) {
+                    this._size = size;
+                }
+                this.hasSmallSizeCssClass = this._size === marcuraCommon.ControlSize.Small;
+                this.hasMediumSizeCssClass = this._size === marcuraCommon.ControlSize.Medium;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ComboboxComponent.prototype, "popupSettings", {
+            get: function () {
+                return {
+                    animate: true,
+                    popupClass: "sg-combobox-popup" + (this.isGroupable ? ' sg-combobox-popup--is-groupable' : '') + " " + (this.popupClass || ''),
+                };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ComboboxComponent.prototype._emitChanged = function (value) {
+            this.changed.emit(new ComboboxChangedEvent(value));
+        };
+        ComboboxComponent.prototype.hasValueChanged = function (value) {
+            return !this.isItemEqual(this.value, value);
+        };
+        ComboboxComponent.prototype._localize = function () {
+            var _this = this;
+            if (!this._localizer) {
+                return;
+            }
+            this._localization = this._localizer.localization;
+            this._observer.listen(this._localizer.localizationChanged, function (localization) {
+                _this._localization = localization;
+            });
+        };
+        ComboboxComponent.prototype.onResetClicked = function () {
+            if (!this.hasReset) {
+                return;
+            }
+            this._resetedValue = this.value;
+            this.focus();
+            this._reset();
+            if (this.openOnFocus) {
+                this.open();
+            }
+        };
+        ComboboxComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this._setComponent(this.component);
+            this.init();
+            // Opened.
+            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return event.isOpen; })), function () {
+                if (!_this.areItemsCached) {
+                    _this._hasSearched.next(false);
+                }
+                if (_this.canLoadItems(_this._searchText.value) && _this._loadedItems.value.length === 0) {
+                    _this.loadItems(_this._searchText.value);
+                }
+            });
+            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return event.isOpen; }), 
+            // When clicking reset icon, opened event triggers search event with
+            // with old searchbar value instead of an empty string.
+            // So we need to give searchbar a moment before fire opened event.
+            // Steps to reproduce the bug:
+            // 1) Search for Vladivostok and select it 2) Reset value with icon
+            // 3) searchText remains "Vladivostok", but should be "".
+            operators.debounceTime(50)), function () { return _this.opened.emit(); });
+            // Focused.
+            this._observer.listen(this._isFocused.pipe(operators.filter(marcuraCommon.isTrue)), function () {
+                if (_this.openOnFocus) {
+                    _this.open();
+                }
+            });
+        };
+        ComboboxComponent.prototype.onChanged = function (value) {
+            if (!this.hasValueChanged(value)) {
+                return;
+            }
+            value = value === undefined ? this.defaultValue : value;
+            this.value = value;
+            this.component.searchbar.suggestedText = '';
+            this.propagateChanged(value);
+            this.propagateTouched();
+            this._emitChanged(value);
+            if (!value && this._isSync) {
+                // Restore original items after selection, otherwise when opening the list
+                // next time, only the previously selected item will appear.
+                // Steps to reproduce: 1) Select "Cayman Brac", 2) Focus out and focus back,
+                // 3) Delete a couple of characters with a Backspace from the end and hit Enter.
+                // 4) Open the list.
+                this.loadItems();
+            }
+        };
+        return ComboboxComponent;
+    }(AbstractComboboxComponent));
+    ComboboxComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sg-combobox',
+                    template: "<kendo-combobox\n  #component\n  [placeholder]=\"placeholder\"\n  [formControl]=\"valueFormControl\"\n  [data]=\"combinedItems | async\"\n  [filterable]=\"isSearchable\"\n  [valueField]=\"valueField\"\n  [textField]=\"textField\"\n  [loading]=\"isLoadingSpinnerVisible | async\"\n  [clearButton]=\"false\"\n  [popupSettings]=\"popupSettings\"\n  [listHeight]=\"listHeight\"\n  [valuePrimitive]=\"isPrimitiveValue\"\n  [suggest]=\"shouldSuggest\"\n  [allowCustom]=\"true\"\n  [valueNormalizer]=\"valueNormalizer\"\n  (filterChange)=\"onSearched($event)\"\n  (valueChange)=\"onChanged($event)\"\n  (open)=\"onOpened()\"\n  (close)=\"onClosed()\"\n  (focus)=\"onFocused()\"\n  (blur)=\"onBlurred()\"\n>\n  <ng-template kendoDropDownListFooterTemplate>\n    <sg-combobox-popup-footer\n      [isLoadingTextVisible]=\"isLoadingTextVisible | async\"\n      [isNoItemsTextVisible]=\"isNoItemsTextVisible | async\"\n      [isMinSearchTextVisible]=\"isMinSearchTextVisible | async\"\n      [loadingText]=\"loadingText\"\n      [noItemsText]=\"noItemsText\"\n      [minSearchText]=\"minSearchText\"\n      [minSearchCharacters]=\"minSearchCharacters\"\n    >\n    </sg-combobox-popup-footer>\n  </ng-template>\n  <ng-template kendoComboBoxNoDataTemplate></ng-template>\n  <ng-template *ngIf=\"itemTemplate\" kendoComboBoxItemTemplate let-dataItem>\n    <span [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: dataItem}\"></span>\n  </ng-template>\n</kendo-combobox>\n<div class=\"sg-combobox__reset\" *ngIf=\"!isDisabled\" (click)=\"onResetClicked()\">\n  <i class=\"far fa-times\"></i>\n</div>\n<div class=\"sg-combobox__state-line\"></div>\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: core.forwardRef(function () { return ComboboxComponent; }),
+                            multi: true,
+                        },
+                        {
+                            provide: marcuraCommon.ABSTRACT_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return ComboboxComponent; }),
+                        },
+                        {
+                            provide: marcuraCommon.OPENABLE_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return ComboboxComponent; }),
+                        },
+                        {
+                            provide: marcuraCommon.STATEABLE_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return ComboboxComponent; }),
+                        },
+                        {
+                            provide: marcuraCommon.TYPEABLE_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return ComboboxComponent; }),
+                        },
+                        {
+                            provide: marcuraCommon.SIZEABLE_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return ComboboxComponent; }),
+                        },
+                    ]
+                },] }
+    ];
+    ComboboxComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: core.Renderer2 },
+        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [COMBOBOX_LOCALIZER,] }] }
+    ]; };
+    ComboboxComponent.propDecorators = {
+        component: [{ type: core.ViewChild, args: ['component', { static: true },] }],
+        itemTemplate: [{ type: core.ContentChild, args: [ComboboxItemTemplateDirective, { read: core.TemplateRef, static: true },] }],
+        hasCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox',] }],
+        hasHasValueCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--has-value',] }],
+        hasIsHoveredCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--is-hovered',] }],
+        hasIsFocusedCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--is-focused',] }],
+        hasIsDisabledCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--is-disabled',] }],
+        isSuccessType: [{ type: core.HostBinding, args: ['class.sg-combobox--type-success',] }],
+        isErrorType: [{ type: core.HostBinding, args: ['class.sg-combobox--type-error',] }],
+        isWarningType: [{ type: core.HostBinding, args: ['class.sg-combobox--type-warning',] }],
+        isHighlightedState: [{ type: core.HostBinding, args: ['class.sg-combobox--state-highlighted',] }],
+        hasIsLoadingCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--is-loading',] }],
+        hasHasResetCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--has-reset',] }],
+        hasIsOutlineCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--is-outline',] }],
+        hasSmallSizeCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--size-small',] }],
+        hasMediumSizeCssClass: [{ type: core.HostBinding, args: ['class.sg-combobox--size-medium',] }],
+        loadingText: [{ type: core.Input }],
+        noItemsText: [{ type: core.Input }],
+        minSearchText: [{ type: core.Input }],
+        shouldSuggest: [{ type: core.Input }],
+        openOnFocus: [{ type: core.Input }],
+        allowCustom: [{ type: core.Input }],
+        size: [{ type: core.Input }],
+        changed: [{ type: core.Output }],
+        itemFactory: [{ type: core.Input }]
     };
 
-    var DropdownChangedEvent = /** @class */ (function (_super) {
-        __extends(DropdownChangedEvent, _super);
-        function DropdownChangedEvent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return DropdownChangedEvent;
+    var DropdownChangedEvent = /** @class */ (function (_super) {
+        __extends(DropdownChangedEvent, _super);
+        function DropdownChangedEvent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return DropdownChangedEvent;
     }(marcuraCommon.ControlChangedEvent));
 
-    var DropdownComponent = /** @class */ (function (_super) {
-        __extends(DropdownComponent, _super);
-        function DropdownComponent(changeDetectorRef, _localizer) {
-            var _this = _super.call(this, changeDetectorRef) || this;
-            _this._localizer = _localizer;
-            _this.defaultValue = null;
-            _this._size = marcuraCommon.ControlSize.Medium;
-            _this._localization = {
-                noItemsText: 'No items found.',
-            };
-            _this.hasCssClass = true;
-            _this.hasSmallSizeCssClass = false;
-            _this.hasMediumSizeCssClass = true;
-            _this.changed = new core.EventEmitter();
-            _this._localize();
-            return _this;
-        }
-        Object.defineProperty(DropdownComponent.prototype, "hasHasValueCssClass", {
-            get: function () {
-                return this.hasValue;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "hasIsFocusedCssClass", {
-            get: function () {
-                return this.isFocused;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "hasIsHoveredCssClass", {
-            get: function () {
-                return this._isHovered.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "hasIsDisabledCssClass", {
-            get: function () {
-                return this.isDisabled;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "isSuccessType", {
-            get: function () {
-                return this._isSuccessType;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "isErrorType", {
-            get: function () {
-                return this._isErrorType;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "isWarningType", {
-            get: function () {
-                return this._isWarningType;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "isHighlightedState", {
-            get: function () {
-                return this._isHighlightedState;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "hasIsLoadingCssClass", {
-            get: function () {
-                return this.isLoading;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "hasHasResetCssClass", {
-            get: function () {
-                return this.hasReset;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "hasIsOutlineCssClass", {
-            get: function () {
-                return this.isOutline;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "noItemsText", {
-            get: function () {
-                return this._noItemsText || this._localization.noItemsText;
-            },
-            set: function (noItemsText) {
-                this._noItemsText = noItemsText;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "size", {
-            get: function () {
-                return this._size;
-            },
-            set: function (size) {
-                if (size) {
-                    this._size = size;
-                }
-                this.hasSmallSizeCssClass = this._size === marcuraCommon.ControlSize.Small;
-                this.hasMediumSizeCssClass = this._size === marcuraCommon.ControlSize.Medium;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "popupSettings", {
-            get: function () {
-                return {
-                    animate: true,
-                    popupClass: "sg-dropdown-popup " + (this.popupClass || ''),
-                };
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DropdownComponent.prototype._emitChanged = function (value) {
-            this.changed.emit(new DropdownChangedEvent(value));
-        };
-        DropdownComponent.prototype._localize = function () {
-            var _this = this;
-            if (!this._localizer) {
-                return;
-            }
-            this._localization = this._localizer.localization;
-            this._observer.listen(this._localizer.localizationChanged, function (localization) {
-                _this._localization = localization;
-            });
-        };
-        DropdownComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this._setComponent(this.component);
-            this.init();
-            // Opened.
-            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return event.isOpen; })), function () { return _this.opened.emit(); });
-            // Closed.
-            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return !event.isOpen; }), operators.skip(1)), function (event) {
-                if (event.shouldEmit) {
-                    _this.closed.emit();
-                }
-            });
-        };
-        return DropdownComponent;
-    }(AbstractDropdownComponent));
-    DropdownComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sg-dropdown',
-                    template: "<kendo-dropdownlist\n  #component\n  [formControl]=\"valueFormControl\"\n  [data]=\"items\"\n  [valueField]=\"valueField\"\n  [textField]=\"textField\"\n  [loading]=\"isLoading\"\n  [popupSettings]=\"popupSettings\"\n  [listHeight]=\"listHeight\"\n  [valuePrimitive]=\"isPrimitiveValue\"\n  (valueChange)=\"onChanged($event)\"\n  (open)=\"onOpened()\"\n  (close)=\"onClosed()\"\n  (focus)=\"onFocused()\"\n  (blur)=\"onBlurred()\"\n>\n  <ng-template *ngIf=\"itemTemplate\" kendoDropDownListItemTemplate let-dataItem>\n    <span [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: dataItem}\"></span>\n  </ng-template>\n  <ng-template kendoDropDownListValueTemplate let-dataItem>\n    <ng-container *ngIf=\"dataItem\">\n      <ng-container *ngIf=\"valueTemplate\">\n        <span [ngTemplateOutlet]=\"valueTemplate\" [ngTemplateOutletContext]=\"{value: dataItem}\"></span>\n      </ng-container>\n      <ng-container *ngIf=\"!valueTemplate\">{{ dataItem[textField] }}</ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!dataItem\">\n      <span *ngIf=\"placeholder\" class=\"k-placeholder\">{{ placeholder }}</span>\n      <ng-container *ngIf=\"!placeholder && valueTemplate\">\n        <span [ngTemplateOutlet]=\"valueTemplate\" [ngTemplateOutletContext]=\"{value: dataItem}\"></span>\n      </ng-container>\n    </ng-container>\n  </ng-template>\n  <ng-template kendoDropDownListFooterTemplate>\n    <sg-combobox-popup-footer [isNoItemsTextVisible]=\"items.length === 0\" [noItemsText]=\"noItemsText\">\n    </sg-combobox-popup-footer>\n  </ng-template>\n  <ng-template kendoDropDownListNoDataTemplate></ng-template>\n</kendo-dropdownlist>\n<div class=\"sg-dropdown__reset\" *ngIf=\"!isDisabled\" (click)=\"onResetClicked()\">\n  <i class=\"far fa-times\"></i>\n</div>\n<div class=\"sg-dropdown__state-line\"></div>\n",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: core.forwardRef(function () { return DropdownComponent; }),
-                            multi: true,
-                        },
-                        {
-                            provide: marcuraCommon.ABSTRACT_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return DropdownComponent; }),
-                        },
-                        {
-                            provide: marcuraCommon.OPENABLE_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return DropdownComponent; }),
-                        },
-                        {
-                            provide: marcuraCommon.STATEABLE_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return DropdownComponent; }),
-                        },
-                        {
-                            provide: marcuraCommon.TYPEABLE_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return DropdownComponent; }),
-                        },
-                        {
-                            provide: marcuraCommon.SIZEABLE_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return DropdownComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    DropdownComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [DROPDOWN_LOCALIZER,] }] }
-    ]; };
-    DropdownComponent.propDecorators = {
-        component: [{ type: core.ViewChild, args: ['component', { static: true },] }],
-        itemTemplate: [{ type: core.ContentChild, args: [DropdownItemTemplateDirective, { read: core.TemplateRef },] }],
-        valueTemplate: [{ type: core.ContentChild, args: [DropdownValueTemplateDirective, { read: core.TemplateRef },] }],
-        hasCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown',] }],
-        hasHasValueCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--has-value',] }],
-        hasIsFocusedCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--is-focused',] }],
-        hasIsHoveredCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--is-hovered',] }],
-        hasIsDisabledCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--is-disabled',] }],
-        isSuccessType: [{ type: core.HostBinding, args: ['class.sg-dropdown--type-success',] }],
-        isErrorType: [{ type: core.HostBinding, args: ['class.sg-dropdown--type-error',] }],
-        isWarningType: [{ type: core.HostBinding, args: ['class.sg-dropdown--type-warning',] }],
-        isHighlightedState: [{ type: core.HostBinding, args: ['class.sg-dropdown--state-highlighted',] }],
-        hasIsLoadingCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--is-loading',] }],
-        hasHasResetCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--has-reset',] }],
-        hasIsOutlineCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--is-outline',] }],
-        hasSmallSizeCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--size-small',] }],
-        hasMediumSizeCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--size-medium',] }],
-        noItemsText: [{ type: core.Input }],
-        size: [{ type: core.Input }],
-        changed: [{ type: core.Output }]
+    var DropdownComponent = /** @class */ (function (_super) {
+        __extends(DropdownComponent, _super);
+        function DropdownComponent(changeDetectorRef, _localizer) {
+            var _this = _super.call(this, changeDetectorRef) || this;
+            _this._localizer = _localizer;
+            _this.defaultValue = null;
+            _this._size = marcuraCommon.ControlSize.Medium;
+            _this._localization = {
+                noItemsText: 'No items found.',
+            };
+            _this.hasCssClass = true;
+            _this.hasSmallSizeCssClass = false;
+            _this.hasMediumSizeCssClass = true;
+            _this.changed = new core.EventEmitter();
+            _this._localize();
+            return _this;
+        }
+        Object.defineProperty(DropdownComponent.prototype, "hasHasValueCssClass", {
+            get: function () {
+                return this.hasValue;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropdownComponent.prototype, "hasIsFocusedCssClass", {
+            get: function () {
+                return this.isFocused;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropdownComponent.prototype, "hasIsHoveredCssClass", {
+            get: function () {
+                return this._isHovered.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropdownComponent.prototype, "hasIsDisabledCssClass", {
+            get: function () {
+                return this.isDisabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropdownComponent.prototype, "isSuccessType", {
+            get: function () {
+                return this._isSuccessType;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropdownComponent.prototype, "isErrorType", {
+            get: function () {
+                return this._isErrorType;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropdownComponent.prototype, "isWarningType", {
+            get: function () {
+                return this._isWarningType;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropdownComponent.prototype, "isHighlightedState", {
+            get: function () {
+                return this._isHighlightedState;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropdownComponent.prototype, "hasIsLoadingCssClass", {
+            get: function () {
+                return this.isLoading;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropdownComponent.prototype, "hasHasResetCssClass", {
+            get: function () {
+                return this.hasReset;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropdownComponent.prototype, "hasIsOutlineCssClass", {
+            get: function () {
+                return this.isOutline;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropdownComponent.prototype, "noItemsText", {
+            get: function () {
+                return this._noItemsText || this._localization.noItemsText;
+            },
+            set: function (noItemsText) {
+                this._noItemsText = noItemsText;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropdownComponent.prototype, "size", {
+            get: function () {
+                return this._size;
+            },
+            set: function (size) {
+                if (size) {
+                    this._size = size;
+                }
+                this.hasSmallSizeCssClass = this._size === marcuraCommon.ControlSize.Small;
+                this.hasMediumSizeCssClass = this._size === marcuraCommon.ControlSize.Medium;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DropdownComponent.prototype, "popupSettings", {
+            get: function () {
+                return {
+                    animate: true,
+                    popupClass: "sg-dropdown-popup " + (this.popupClass || ''),
+                };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DropdownComponent.prototype._emitChanged = function (value) {
+            this.changed.emit(new DropdownChangedEvent(value));
+        };
+        DropdownComponent.prototype._localize = function () {
+            var _this = this;
+            if (!this._localizer) {
+                return;
+            }
+            this._localization = this._localizer.localization;
+            this._observer.listen(this._localizer.localizationChanged, function (localization) {
+                _this._localization = localization;
+            });
+        };
+        DropdownComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this._setComponent(this.component);
+            this.init();
+            // Opened.
+            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return event.isOpen; })), function () { return _this.opened.emit(); });
+            // Closed.
+            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return !event.isOpen; }), operators.skip(1)), function (event) {
+                if (event.shouldEmit) {
+                    _this.closed.emit();
+                }
+            });
+        };
+        return DropdownComponent;
+    }(AbstractDropdownComponent));
+    DropdownComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sg-dropdown',
+                    template: "<kendo-dropdownlist\n  #component\n  [formControl]=\"valueFormControl\"\n  [data]=\"items\"\n  [valueField]=\"valueField\"\n  [textField]=\"textField\"\n  [loading]=\"isLoading\"\n  [popupSettings]=\"popupSettings\"\n  [listHeight]=\"listHeight\"\n  [valuePrimitive]=\"isPrimitiveValue\"\n  (valueChange)=\"onChanged($event)\"\n  (open)=\"onOpened()\"\n  (close)=\"onClosed()\"\n  (focus)=\"onFocused()\"\n  (blur)=\"onBlurred()\"\n>\n  <ng-template *ngIf=\"itemTemplate\" kendoDropDownListItemTemplate let-dataItem>\n    <span [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: dataItem}\"></span>\n  </ng-template>\n  <ng-template kendoDropDownListValueTemplate let-dataItem>\n    <ng-container *ngIf=\"dataItem\">\n      <ng-container *ngIf=\"valueTemplate\">\n        <span [ngTemplateOutlet]=\"valueTemplate\" [ngTemplateOutletContext]=\"{value: dataItem}\"></span>\n      </ng-container>\n      <ng-container *ngIf=\"!valueTemplate\">{{ dataItem[textField] }}</ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!dataItem\">\n      <span *ngIf=\"placeholder\" class=\"k-placeholder\">{{ placeholder }}</span>\n      <ng-container *ngIf=\"!placeholder && valueTemplate\">\n        <span [ngTemplateOutlet]=\"valueTemplate\" [ngTemplateOutletContext]=\"{value: dataItem}\"></span>\n      </ng-container>\n    </ng-container>\n  </ng-template>\n  <ng-template kendoDropDownListFooterTemplate>\n    <sg-combobox-popup-footer [isNoItemsTextVisible]=\"items.length === 0\" [noItemsText]=\"noItemsText\">\n    </sg-combobox-popup-footer>\n  </ng-template>\n  <ng-template kendoDropDownListNoDataTemplate></ng-template>\n</kendo-dropdownlist>\n<div class=\"sg-dropdown__reset\" *ngIf=\"!isDisabled\" (click)=\"onResetClicked()\">\n  <i class=\"far fa-times\"></i>\n</div>\n<div class=\"sg-dropdown__state-line\"></div>\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: core.forwardRef(function () { return DropdownComponent; }),
+                            multi: true,
+                        },
+                        {
+                            provide: marcuraCommon.ABSTRACT_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return DropdownComponent; }),
+                        },
+                        {
+                            provide: marcuraCommon.OPENABLE_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return DropdownComponent; }),
+                        },
+                        {
+                            provide: marcuraCommon.STATEABLE_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return DropdownComponent; }),
+                        },
+                        {
+                            provide: marcuraCommon.TYPEABLE_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return DropdownComponent; }),
+                        },
+                        {
+                            provide: marcuraCommon.SIZEABLE_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return DropdownComponent; }),
+                        },
+                    ]
+                },] }
+    ];
+    DropdownComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [DROPDOWN_LOCALIZER,] }] }
+    ]; };
+    DropdownComponent.propDecorators = {
+        component: [{ type: core.ViewChild, args: ['component', { static: true },] }],
+        itemTemplate: [{ type: core.ContentChild, args: [DropdownItemTemplateDirective, { read: core.TemplateRef },] }],
+        valueTemplate: [{ type: core.ContentChild, args: [DropdownValueTemplateDirective, { read: core.TemplateRef },] }],
+        hasCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown',] }],
+        hasHasValueCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--has-value',] }],
+        hasIsFocusedCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--is-focused',] }],
+        hasIsHoveredCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--is-hovered',] }],
+        hasIsDisabledCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--is-disabled',] }],
+        isSuccessType: [{ type: core.HostBinding, args: ['class.sg-dropdown--type-success',] }],
+        isErrorType: [{ type: core.HostBinding, args: ['class.sg-dropdown--type-error',] }],
+        isWarningType: [{ type: core.HostBinding, args: ['class.sg-dropdown--type-warning',] }],
+        isHighlightedState: [{ type: core.HostBinding, args: ['class.sg-dropdown--state-highlighted',] }],
+        hasIsLoadingCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--is-loading',] }],
+        hasHasResetCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--has-reset',] }],
+        hasIsOutlineCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--is-outline',] }],
+        hasSmallSizeCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--size-small',] }],
+        hasMediumSizeCssClass: [{ type: core.HostBinding, args: ['class.sg-dropdown--size-medium',] }],
+        noItemsText: [{ type: core.Input }],
+        size: [{ type: core.Input }],
+        changed: [{ type: core.Output }]
     };
 
-    var MultiselectChangedEvent = /** @class */ (function (_super) {
-        __extends(MultiselectChangedEvent, _super);
-        function MultiselectChangedEvent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return MultiselectChangedEvent;
+    var MultiselectChangedEvent = /** @class */ (function (_super) {
+        __extends(MultiselectChangedEvent, _super);
+        function MultiselectChangedEvent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return MultiselectChangedEvent;
     }(marcuraCommon.ControlChangedEvent));
 
-    var MultiselectComponent = /** @class */ (function (_super) {
-        __extends(MultiselectComponent, _super);
-        function MultiselectComponent(changeDetectorRef, renderer, _localizer) {
-            var _this = _super.call(this, changeDetectorRef, renderer) || this;
-            _this._localizer = _localizer;
-            _this._localization = {
-                loadingText: 'Loading...',
-                noItemsText: 'No items found.',
-                minSearchText: 'Enter {minSearchCharacters} or more characters.',
-            };
-            _this.defaultValue = [];
-            _this.hasCssClass = true;
-            _this.changed = new core.EventEmitter();
-            _this.isReadOnlyTag = null;
-            _this.isActivatedTag = function () { return false; };
-            _this.tagColor = function () { return null; };
-            _this._localize();
-            return _this;
-        }
-        Object.defineProperty(MultiselectComponent.prototype, "hasValue", {
-            get: function () {
-                return this.valueFormControl.value && this.valueFormControl.value.length > 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "hasIsFocusedCssClass", {
-            get: function () {
-                return this.isFocused;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "hasIsHoveredCssClass", {
-            get: function () {
-                return this._isHovered.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "hasIsDisabledCssClass", {
-            get: function () {
-                return this.isDisabled;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "isSuccessType", {
-            get: function () {
-                return this._isSuccessType;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "isErrorType", {
-            get: function () {
-                return this._isErrorType;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "isWarningType", {
-            get: function () {
-                return this._isWarningType;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "isHighlightedState", {
-            get: function () {
-                return this._isHighlightedState;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "hasIsLoadingCssClass", {
-            get: function () {
-                return this.isLoading || this._isSearching.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "hasHasResetCssClass", {
-            get: function () {
-                return this.hasReset;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "hasIsOutlineCssClass", {
-            get: function () {
-                return this.isOutline;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "loadingText", {
-            get: function () {
-                return this._loadingText || this._localization.loadingText;
-            },
-            set: function (loadingText) {
-                this._loadingText = loadingText;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "noItemsText", {
-            get: function () {
-                return this._noItemsText || this._localization.noItemsText;
-            },
-            set: function (noItemsText) {
-                this._noItemsText = noItemsText;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "minSearchText", {
-            get: function () {
-                return this._minSearchText || this._localization.minSearchText;
-            },
-            set: function (minSearchText) {
-                this._minSearchText = minSearchText;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MultiselectComponent.prototype, "popupSettings", {
-            get: function () {
-                return {
-                    animate: true,
-                    popupClass: "sg-multiselect-popup" + (this.isGroupable ? ' sg-multiselect-popup--is-groupable' : '') + " " + (this.popupClass || ''),
-                };
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MultiselectComponent.prototype._emitChanged = function (value) {
-            this.changed.emit(new MultiselectChangedEvent(value));
-        };
-        MultiselectComponent.prototype.hasValueChanged = function (value) {
-            var _this = this;
-            var isOldValueEmpty = this.value === null || this.value === undefined || this.value.length === 0;
-            var isNewValueEmpty = value === null || value === undefined || value.length === 0;
-            if (isOldValueEmpty && isNewValueEmpty) {
-                return false;
-            }
-            if (isOldValueEmpty || isNewValueEmpty) {
-                return true;
-            }
-            return (this.value.length !== value.length || this.value.some(function (item, index) { return !_this.isItemEqual(item, value[index]); }));
-        };
-        MultiselectComponent.prototype._localize = function () {
-            var _this = this;
-            if (!this._localizer) {
-                return;
-            }
-            this._localization = this._localizer.localization;
-            this._observer.listen(this._localizer.localizationChanged, function (localization) {
-                _this._localization = localization;
-            });
-        };
-        MultiselectComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this._setComponent(this.component);
-            this.init();
-            // Opened.
-            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return event.isOpen; })), function () {
-                _this._hasSearched.next(false);
-                if (!_this.areItemsCached && _this._loadedItems.value.length === 0) {
-                    _this.loadItems(_this._searchText.value);
-                }
-            });
-            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return event.isOpen; })), function () { return _this.opened.emit(); });
-        };
-        return MultiselectComponent;
-    }(AbstractComboboxComponent));
-    MultiselectComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sg-multiselect',
-                    template: "<kendo-multiselect\n  #component\n  [placeholder]=\"placeholder\"\n  [formControl]=\"valueFormControl\"\n  [data]=\"combinedItems | async\"\n  [filterable]=\"isSearchable\"\n  [valueField]=\"valueField\"\n  [textField]=\"textField\"\n  [loading]=\"isLoadingSpinnerVisible | async\"\n  [clearButton]=\"false\"\n  [popupSettings]=\"popupSettings\"\n  [listHeight]=\"listHeight\"\n  [valuePrimitive]=\"isPrimitiveValue\"\n  (filterChange)=\"onSearched($event)\"\n  (valueChange)=\"onChanged($event)\"\n  (open)=\"onOpened()\"\n  (close)=\"onClosed()\"\n  (focus)=\"onFocused()\"\n  (blur)=\"onBlurred()\"\n>\n  <ng-template kendoDropDownListFooterTemplate>\n    <sg-combobox-popup-footer\n      [isLoadingTextVisible]=\"isLoadingTextVisible | async\"\n      [isNoItemsTextVisible]=\"isNoItemsTextVisible | async\"\n      [isMinSearchTextVisible]=\"isMinSearchTextVisible | async\"\n      [loadingText]=\"loadingText\"\n      [noItemsText]=\"noItemsText\"\n      [minSearchText]=\"minSearchText\"\n      [minSearchCharacters]=\"minSearchCharacters\"\n    >\n    </sg-combobox-popup-footer>\n  </ng-template>\n  <ng-template kendoDropDownListNoDataTemplate></ng-template>\n  <ng-template *ngIf=\"itemTemplate\" kendoMultiSelectItemTemplate let-dataItem>\n    <span [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: dataItem}\"></span>\n  </ng-template>\n  <ng-template kendoMultiSelectTagTemplate let-dataItem>\n    <span\n      #tagWrapper=\"multiselectTagWrapper\"\n      sgMultiselectTagWrapper\n      [isReadOnly]=\"isReadOnlyTag && isReadOnlyTag(dataItem)\"\n    >\n      <sg-tag\n        [icon]=\"tagWrapper.isReadOnly ? '' : 'far fa-times'\"\n        [color]=\"tagColor(dataItem)\"\n        [isActivated]=\"isActivatedTag(dataItem)\"\n      >\n        <ng-container *ngIf=\"tagTemplate\" [ngTemplateOutlet]=\"tagTemplate\" [ngTemplateOutletContext]=\"{item: dataItem}\">\n        </ng-container>\n        <ng-container *ngIf=\"!tagTemplate\">{{ dataItem[textField] }}</ng-container>\n      </sg-tag>\n    </span>\n  </ng-template>\n</kendo-multiselect>\n<div class=\"sg-multiselect__reset\" *ngIf=\"!isDisabled\" (click)=\"onResetClicked()\">\n  <i class=\"far fa-times\"></i>\n</div>\n<div class=\"sg-multiselect__state-line\"></div>\n",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: core.forwardRef(function () { return MultiselectComponent; }),
-                            multi: true,
-                        },
-                        {
-                            provide: marcuraCommon.ABSTRACT_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return MultiselectComponent; }),
-                        },
-                        {
-                            provide: marcuraCommon.OPENABLE_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return MultiselectComponent; }),
-                        },
-                        {
-                            provide: marcuraCommon.STATEABLE_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return MultiselectComponent; }),
-                        },
-                        {
-                            provide: marcuraCommon.TYPEABLE_CONTROL_COMPONENT,
-                            useExisting: core.forwardRef(function () { return MultiselectComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    MultiselectComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: core.Renderer2 },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MULTISELECT_LOCALIZER,] }] }
-    ]; };
-    MultiselectComponent.propDecorators = {
-        component: [{ type: core.ViewChild, args: ['component', { static: true },] }],
-        itemTemplate: [{ type: core.ContentChild, args: [MultiselectItemTemplateDirective, { read: core.TemplateRef, static: true },] }],
-        tagTemplate: [{ type: core.ContentChild, args: [MultiselectTagTemplateDirective, { read: core.TemplateRef, static: true },] }],
-        hasCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect',] }],
-        hasValue: [{ type: core.HostBinding, args: ['class.sg-multiselect--has-value',] }],
-        hasIsFocusedCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect--is-focused',] }],
-        hasIsHoveredCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect--is-hovered',] }],
-        hasIsDisabledCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect--is-disabled',] }],
-        isSuccessType: [{ type: core.HostBinding, args: ['class.sg-multiselect--type-success',] }],
-        isErrorType: [{ type: core.HostBinding, args: ['class.sg-multiselect--type-error',] }],
-        isWarningType: [{ type: core.HostBinding, args: ['class.sg-multiselect--type-warning',] }],
-        isHighlightedState: [{ type: core.HostBinding, args: ['class.sg-multiselect--state-highlighted',] }],
-        hasIsLoadingCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect--is-loading',] }],
-        hasHasResetCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect--has-reset',] }],
-        hasIsOutlineCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect--is-outline',] }],
-        loadingText: [{ type: core.Input }],
-        noItemsText: [{ type: core.Input }],
-        minSearchText: [{ type: core.Input }],
-        changed: [{ type: core.Output }],
-        isReadOnlyTag: [{ type: core.Input }],
-        isActivatedTag: [{ type: core.Input }],
-        tagColor: [{ type: core.Input }]
+    var MultiselectComponent = /** @class */ (function (_super) {
+        __extends(MultiselectComponent, _super);
+        function MultiselectComponent(changeDetectorRef, renderer, _localizer) {
+            var _this = _super.call(this, changeDetectorRef, renderer) || this;
+            _this._localizer = _localizer;
+            _this._localization = {
+                loadingText: 'Loading...',
+                noItemsText: 'No items found.',
+                minSearchText: 'Enter {minSearchCharacters} or more characters.',
+            };
+            _this.defaultValue = [];
+            _this.hasCssClass = true;
+            _this.allowCustom = false;
+            _this.changed = new core.EventEmitter();
+            _this.isReadOnlyTag = null;
+            _this.isActivatedTag = function () { return false; };
+            _this.tagColor = function () { return null; };
+            /**
+             * This field contains factory method for items which will be created placing customizable values inside component. Works when allowCustom is true.
+             *
+             * @memberof MultiselectComponent
+             */
+            _this.itemFactory = function (text) {
+                var _c;
+                return _c = {}, _c[_this.valueField] = null, _c[_this.textField] = text, _c;
+            };
+            _this.valueNormalizer = function (text$) { return text$.pipe(operators.map(function () {
+                var _a, _b;
+                var value = null;
+                if (!_this.component) {
+                    return value;
+                }
+                // Can't use this._searchText.value here as it might be empty, consider:
+                // 1) type custom text, 2) focus out and back in 3) there's a text in searchbar,
+                // but this._searchText.value is empty.
+                // So this.component.searchbar.value is to be used.
+                var text = (_this.component.searchbar.value || '').trim();
+                if (!text) {
+                    return value;
+                }
+                var matchingValue = (_b = (_a = _this.component.value) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item[_this.textField].toLowerCase() === text.toLowerCase(); })) !== null && _b !== void 0 ? _b : null;
+                // Handle case when value already contains items that match the search text.
+                if (matchingValue) {
+                    value = matchingValue;
+                }
+                // If no matches found in the selected values, check if item is in cache.
+                else if (_this.getItem(_this._valueNormalizerItems, text)) {
+                    // If areItemsCached is off, then this.data will be lost by this moment,
+                    // so we use a cache this.valueNormalizerItems.
+                    // This is relevant especially in IE/Edge where this.component.value is null,
+                    // so the code falls back to this condition section.
+                    value = _this.getItem(_this._valueNormalizerItems, text);
+                }
+                // If no match is found and custom values are allowed, create a new custom item
+                else if (_this.allowCustom) {
+                    value = _this.itemFactory(text);
+                    if (_this._isSync) {
+                        // Restore original items after selection, otherwise when opening the list
+                        // next time, only the selected item will appear.
+                        _this.loadItems();
+                    }
+                }
+                else {
+                    // Clears search text if suggestion hasn't been selected.
+                    // Steps to reproduce.
+                    // 1. Use Dymanic Empty sample.
+                    // 2. Type 'to', wait for the list to load, but don't select 'Tokai'. Instead hit Esc key.
+                    // 3. See that the search bar still contains 'to' text, while the value is null,
+                    // which is wrong - search bar text should be removed.
+                    // this.component.searchbar.suggestedText = ''; // This doesn't work.
+                    // As the above line doesn't work, so workaround it by setting form control value to null.
+                    _this.valueFormControl.setValue(value);
+                }
+                _this._valueNormalizerItems = [];
+                return value;
+            })); };
+            _this._localize();
+            return _this;
+        }
+        Object.defineProperty(MultiselectComponent.prototype, "hasValue", {
+            get: function () {
+                return this.valueFormControl.value && this.valueFormControl.value.length > 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "hasIsFocusedCssClass", {
+            get: function () {
+                return this.isFocused;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "hasIsHoveredCssClass", {
+            get: function () {
+                return this._isHovered.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "hasIsDisabledCssClass", {
+            get: function () {
+                return this.isDisabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "isSuccessType", {
+            get: function () {
+                return this._isSuccessType;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "isErrorType", {
+            get: function () {
+                return this._isErrorType;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "isWarningType", {
+            get: function () {
+                return this._isWarningType;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "isHighlightedState", {
+            get: function () {
+                return this._isHighlightedState;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "hasIsLoadingCssClass", {
+            get: function () {
+                return this.isLoading || this._isSearching.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "hasHasResetCssClass", {
+            get: function () {
+                return this.hasReset;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "hasIsOutlineCssClass", {
+            get: function () {
+                return this.isOutline;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "loadingText", {
+            get: function () {
+                return this._loadingText || this._localization.loadingText;
+            },
+            set: function (loadingText) {
+                this._loadingText = loadingText;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "noItemsText", {
+            get: function () {
+                return this._noItemsText || this._localization.noItemsText;
+            },
+            set: function (noItemsText) {
+                this._noItemsText = noItemsText;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "minSearchText", {
+            get: function () {
+                return this._minSearchText || this._localization.minSearchText;
+            },
+            set: function (minSearchText) {
+                this._minSearchText = minSearchText;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MultiselectComponent.prototype, "popupSettings", {
+            get: function () {
+                return {
+                    animate: true,
+                    popupClass: "sg-multiselect-popup" + (this.isGroupable ? ' sg-multiselect-popup--is-groupable' : '') + " " + (this.popupClass || ''),
+                };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MultiselectComponent.prototype._emitChanged = function (value) {
+            this.changed.emit(new MultiselectChangedEvent(value));
+        };
+        MultiselectComponent.prototype.hasValueChanged = function (value) {
+            var _this = this;
+            var isOldValueEmpty = this.value === null || this.value === undefined || this.value.length === 0;
+            var isNewValueEmpty = value === null || value === undefined || value.length === 0;
+            if (isOldValueEmpty && isNewValueEmpty) {
+                return false;
+            }
+            if (isOldValueEmpty || isNewValueEmpty) {
+                return true;
+            }
+            return (this.value.length !== value.length || this.value.some(function (item, index) { return !_this.isItemEqual(item, value[index]); }));
+        };
+        MultiselectComponent.prototype._localize = function () {
+            var _this = this;
+            if (!this._localizer) {
+                return;
+            }
+            this._localization = this._localizer.localization;
+            this._observer.listen(this._localizer.localizationChanged, function (localization) {
+                _this._localization = localization;
+            });
+        };
+        MultiselectComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this._setComponent(this.component);
+            this.init();
+            // Opened.
+            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return event.isOpen; })), function () {
+                _this._hasSearched.next(false);
+                if (!_this.areItemsCached && _this._loadedItems.value.length === 0) {
+                    _this.loadItems(_this._searchText.value);
+                }
+            });
+            this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return event.isOpen; })), function () { return _this.opened.emit(); });
+        };
+        return MultiselectComponent;
+    }(AbstractComboboxComponent));
+    MultiselectComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sg-multiselect',
+                    template: "<kendo-multiselect\n  #component\n  [placeholder]=\"placeholder\"\n  [formControl]=\"valueFormControl\"\n  [data]=\"combinedItems | async\"\n  [filterable]=\"isSearchable\"\n  [valueField]=\"valueField\"\n  [textField]=\"textField\"\n  [loading]=\"isLoadingSpinnerVisible | async\"\n  [clearButton]=\"false\"\n  [popupSettings]=\"popupSettings\"\n  [listHeight]=\"listHeight\"\n  [valuePrimitive]=\"isPrimitiveValue\"\n  [allowCustom]=\"allowCustom\"\n  [valueNormalizer]=\"valueNormalizer\"\n  (filterChange)=\"onSearched($event)\"\n  (valueChange)=\"onChanged($event)\"\n  (open)=\"onOpened()\"\n  (close)=\"onClosed()\"\n  (focus)=\"onFocused()\"\n  (blur)=\"onBlurred()\"\n>\n  <ng-template kendoDropDownListFooterTemplate>\n    <sg-combobox-popup-footer\n      [isLoadingTextVisible]=\"isLoadingTextVisible | async\"\n      [isNoItemsTextVisible]=\"isNoItemsTextVisible | async\"\n      [isMinSearchTextVisible]=\"isMinSearchTextVisible | async\"\n      [loadingText]=\"loadingText\"\n      [noItemsText]=\"noItemsText\"\n      [minSearchText]=\"minSearchText\"\n      [minSearchCharacters]=\"minSearchCharacters\"\n    >\n    </sg-combobox-popup-footer>\n  </ng-template>\n  <ng-template kendoDropDownListNoDataTemplate></ng-template>\n  <ng-template *ngIf=\"itemTemplate\" kendoMultiSelectItemTemplate let-dataItem>\n    <span [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: dataItem}\"></span>\n  </ng-template>\n  <ng-template kendoMultiSelectTagTemplate let-dataItem>\n    <span\n      #tagWrapper=\"multiselectTagWrapper\"\n      sgMultiselectTagWrapper\n      [isReadOnly]=\"isReadOnlyTag && isReadOnlyTag(dataItem)\"\n    >\n      <sg-tag\n        [icon]=\"tagWrapper.isReadOnly ? '' : 'far fa-times'\"\n        [color]=\"tagColor(dataItem)\"\n        [isActivated]=\"isActivatedTag(dataItem)\"\n      >\n        <ng-container *ngIf=\"tagTemplate\" [ngTemplateOutlet]=\"tagTemplate\" [ngTemplateOutletContext]=\"{item: dataItem}\">\n        </ng-container>\n        <ng-container *ngIf=\"!tagTemplate\">{{ dataItem[textField] }}</ng-container>\n      </sg-tag>\n    </span>\n  </ng-template>\n</kendo-multiselect>\n<div class=\"sg-multiselect__reset\" *ngIf=\"!isDisabled\" (click)=\"onResetClicked()\">\n  <i class=\"far fa-times\"></i>\n</div>\n<div class=\"sg-multiselect__state-line\"></div>\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: core.forwardRef(function () { return MultiselectComponent; }),
+                            multi: true,
+                        },
+                        {
+                            provide: marcuraCommon.ABSTRACT_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return MultiselectComponent; }),
+                        },
+                        {
+                            provide: marcuraCommon.OPENABLE_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return MultiselectComponent; }),
+                        },
+                        {
+                            provide: marcuraCommon.STATEABLE_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return MultiselectComponent; }),
+                        },
+                        {
+                            provide: marcuraCommon.TYPEABLE_CONTROL_COMPONENT,
+                            useExisting: core.forwardRef(function () { return MultiselectComponent; }),
+                        },
+                    ]
+                },] }
+    ];
+    MultiselectComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: core.Renderer2 },
+        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MULTISELECT_LOCALIZER,] }] }
+    ]; };
+    MultiselectComponent.propDecorators = {
+        component: [{ type: core.ViewChild, args: ['component', { static: true },] }],
+        itemTemplate: [{ type: core.ContentChild, args: [MultiselectItemTemplateDirective, { read: core.TemplateRef, static: true },] }],
+        tagTemplate: [{ type: core.ContentChild, args: [MultiselectTagTemplateDirective, { read: core.TemplateRef, static: true },] }],
+        hasCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect',] }],
+        hasValue: [{ type: core.HostBinding, args: ['class.sg-multiselect--has-value',] }],
+        hasIsFocusedCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect--is-focused',] }],
+        hasIsHoveredCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect--is-hovered',] }],
+        hasIsDisabledCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect--is-disabled',] }],
+        isSuccessType: [{ type: core.HostBinding, args: ['class.sg-multiselect--type-success',] }],
+        isErrorType: [{ type: core.HostBinding, args: ['class.sg-multiselect--type-error',] }],
+        isWarningType: [{ type: core.HostBinding, args: ['class.sg-multiselect--type-warning',] }],
+        isHighlightedState: [{ type: core.HostBinding, args: ['class.sg-multiselect--state-highlighted',] }],
+        hasIsLoadingCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect--is-loading',] }],
+        hasHasResetCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect--has-reset',] }],
+        hasIsOutlineCssClass: [{ type: core.HostBinding, args: ['class.sg-multiselect--is-outline',] }],
+        loadingText: [{ type: core.Input }],
+        noItemsText: [{ type: core.Input }],
+        minSearchText: [{ type: core.Input }],
+        allowCustom: [{ type: core.Input }],
+        changed: [{ type: core.Output }],
+        isReadOnlyTag: [{ type: core.Input }],
+        isActivatedTag: [{ type: core.Input }],
+        tagColor: [{ type: core.Input }],
+        itemFactory: [{ type: core.Input }]
     };
 
-    var components = [
-        AbstractComboboxComponent,
-        AbstractDropdownComponent,
-        ComboboxComponent,
-        ComboboxPopupFooterComponent,
-        MultiselectComponent,
-        DropdownComponent,
-    ];
-    var directives = [
-        ComboboxItemTemplateDirective,
-        MultiselectItemTemplateDirective,
-        MultiselectTagTemplateDirective,
-        MultiselectTagWrapperDirective,
-        DropdownItemTemplateDirective,
-        DropdownValueTemplateDirective,
-    ];
-    function getPopupContainer() {
-        return { nativeElement: document.body };
-    }
-    var ComboboxModule = /** @class */ (function () {
-        function ComboboxModule() {
-        }
-        return ComboboxModule;
-    }());
-    ComboboxModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: __spread(components, directives),
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        kendoAngularDropdowns.ComboBoxModule,
-                        kendoAngularDropdowns.MultiSelectModule,
-                        kendoAngularPopup.PopupModule,
-                        marcuraTag.TagModule,
-                        kendoAngularDropdowns.DropDownListModule,
-                    ],
-                    exports: __spread(components, directives),
-                    providers: [
-                        {
-                            provide: kendoAngularPopup.POPUP_CONTAINER,
-                            useFactory: getPopupContainer,
-                        },
-                    ],
-                },] }
+    var components = [
+        AbstractComboboxComponent,
+        AbstractDropdownComponent,
+        ComboboxComponent,
+        ComboboxPopupFooterComponent,
+        MultiselectComponent,
+        DropdownComponent,
+    ];
+    var directives = [
+        ComboboxItemTemplateDirective,
+        MultiselectItemTemplateDirective,
+        MultiselectTagTemplateDirective,
+        MultiselectTagWrapperDirective,
+        DropdownItemTemplateDirective,
+        DropdownValueTemplateDirective,
+    ];
+    function getPopupContainer() {
+        return { nativeElement: document.body };
+    }
+    var ComboboxModule = /** @class */ (function () {
+        function ComboboxModule() {
+        }
+        return ComboboxModule;
+    }());
+    ComboboxModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: __spread(components, directives),
+                    imports: [
+                        common.CommonModule,
+                        forms.ReactiveFormsModule,
+                        kendoAngularDropdowns.ComboBoxModule,
+                        kendoAngularDropdowns.MultiSelectModule,
+                        kendoAngularPopup.PopupModule,
+                        marcuraTag.TagModule,
+                        kendoAngularDropdowns.DropDownListModule,
+                    ],
+                    exports: __spread(components, directives),
+                    providers: [
+                        {
+                            provide: kendoAngularPopup.POPUP_CONTAINER,
+                            useFactory: getPopupContainer,
+                        },
+                    ],
+                },] }
     ];
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.AbstractComboboxComponent = AbstractComboboxComponent;