@bnsights/bbsf-controls 1.0.46 → 1.0.49

package/bundles/bnsights-bbsf-controls.umd.js

@@ -378,6 +378,345 @@
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
 
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+
+    // here is the default text string - just adjust the strings to reflect your preferred language
+    var DefaultIntl = /** @class */ (function (_super) {
+        __extends(DefaultIntl, _super);
+        function DefaultIntl(utilityService) {
+            var _this = _super.call(this) || this;
+            _this.utilityService = utilityService;
+            /** A label for the range 'from' in picker info */
+            _this.rangeFromLabel = _this.utilityService.getResourceValue("From");
+            /** A label for the range 'to' in picker info */
+            _this.rangeToLabel = _this.utilityService.getResourceValue("To");
+            return _this;
+        }
+        return DefaultIntl;
+    }(ngPickDatetime.OwlDateTimeIntl));
+    DefaultIntl.decorators = [
+        { type: i0.Injectable }
+    ];
+    DefaultIntl.ctorParameters = function () { return [
+        { type: bbsfUtilities.UtilityService }
+    ]; };
+
     var DateInputComponent = /** @class */ (function () {
         // tslint:disable-next-line: max-line-length
         function DateInputComponent(datepipe, onChangeService, ErrorHandler, controlUtility, controlContainer, DateInputControlHost, UtilityService, translate, controlValidationService, dateTimeAdapter) {
@@ -557,6 +896,9 @@
         { type: i0.Component, args: [{
                     selector: 'BBSF-DateTimePicker',
                     template: "<div class=\"b-control b-date-picker\">\r\n    <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n            [hidden]=\"options.HideLabel\">\r\n            {{options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n                aria-required=\"true\">*</span>\r\n        </label>\r\n\r\n        <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group\">\r\n                <input autocomplete=\"off\" (dateTimeChange)=\"onDateSelect($event)\"\r\n                    dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n                    class=\"form-control bnsights-control  {{options.ExtraClasses}} \"\r\n                    [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                    formControlName=\"{{options.Name}}\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\"\r\n                    [class.is-invalid]=\"DatePickerFormControl.invalid && DatePickerFormControl.touched\"\r\n                    [min]=\"options.StartDate\" [max]=\"options.EndDate\" [hour12Timer]=\"options.Hour12Timer\" [selectMode]=\"getSelectMode(options.SelectMode)\"\r\n                    placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" #Dateinput>\r\n\r\n                <owl-date-time [pickerType]=\"getPickerType(options.PickerType)\"\r\n                    [startView]=\"getStartView(options.StartView)\" [firstDayOfWeek]=\"options.FirstDayOfWeek\"\r\n                    [hour12Timer]=\"options.Hour12Timer\" #dt1></owl-date-time>\r\n                    \r\n                <div class=\"input-group-append\">\r\n                    <span class=\"input-group-text\" [owlDateTimeTrigger]=\"dt1\">\r\n                      <span class=\"svg-icon\">\r\n                        <svg id=\"Group_356\" data-name=\"Group 356\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 48 48\">\r\n                          <path id=\"Path_6737\" data-name=\"Path 6737\" d=\"M11.583,1a1,1,0,0,0-2,0V5.7h2Z\" style=\"\"></path>\r\n                          <path id=\"Path_6738\" data-name=\"Path 6738\" d=\"M38.417,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n                          <path id=\"Path_6739\" data-name=\"Path 6739\" d=\"M0,43.146C0,45.822,1.826,48,4.07,48H43.928C46.174,48,48,45.822,48,43.146V17.121H0Z\"  fill=\"#d5d5d5\"></path>\r\n                          <path id=\"Path_6740\" data-name=\"Path 6740\" d=\"M43.929,5.7H38.417v5.512a1,1,0,1,1-2,0V5.7H11.583v5.512a1,1,0,1,1-2,0V5.7H4.07C1.826,5.7,0,7.877,0,10.555v4.566H48V10.555C48,7.877,46.174,5.7,43.929,5.7Z\" fill=\"#595959\"></path>\r\n                        </svg>\r\n                      </span>\r\n                    </span>\r\n                    <!--<span class=\"input-group-text\" *ngIf=\"options.EnableCopyToClipboard\"\r\n                        (click)=\"copyInputMessage(Dateinput)\">\r\n                        <i class=\"fas fa-copy\"></i>\r\n                    </span>-->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"text-danger Required-text\"\r\n                *ngIf=\"(DatePickerFormControl.invalid && DatePickerFormControl.touched)\">\r\n                {{getErrorValidation(DatePickerFormControl.errors|keyvalue)}}\r\n            </div>\r\n\r\n                <div class=\"control-desc\"*ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n          \r\n            <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n",
+                    providers: [
+                        { provide: ngPickDatetime.OwlDateTimeIntl, useClass: DefaultIntl }
+                    ],
                     styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
                 },] }
     ];
@@ -942,361 +1284,43 @@
                         }
                     }
                 }
-                else {
-                    this.deletedFiles = [];
-                    this.multipleFileUploadModel.RemovedFiles = [];
-                }
-                this.multipleFileUploadModel.UploadedFiles = this.multipleFileUploadModel.UploadedFiles.filter(function (Object) { return Object.NameWithExtension != item._file.name; });
-                if ((this.multipleFileUploadModel.UploadedFiles == null || this.multipleFileUploadModel.UploadedFiles == []) && this.options.IsRequired) {
-                    this.fileUploadFormControl.markAsTouched();
-                    this.fileUploadFormControl.invalid;
-                }
-                this.fileUploadFormControl.setValue(this.multipleFileUploadModel);
-                this.group.get(this.options.Name).setValue(this.multipleFileUploadModel);
-            }
-        };
-        return FileUploadComponent;
-    }());
-    FileUploadComponent.controlContainerstatic = null;
-    FileUploadComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'BBSF-FileUplaod',
-                    template: "\r\n<div class=\"b-control b-fileupload\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"col-form-label col-sm-12 mb-2\" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n           [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n            aria-required=\"true\">*</span>\r\n\r\n      <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'\r\n                   *ngIf=\"(ValidationMessage!=null&&ValidationMessage!='')\">\r\n        <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\">\r\n        </i>\r\n      </ejs-tooltip>\r\n\r\n\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <div>\r\n\r\n        <div ng2FileDrop *ngIf=\"(options.IsDropZone)&&(!((options.IsMultipleFile==false)&&(uploader.queue.length)>0))\"\r\n             [ngClass]=\"{'another-file-over-class': hasAnotherDropZoneOver}\" (onFileDrop)=\"onFileChange()\"\r\n             (fileOver)=\"fileOverAnother($event)\" [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n             class=\"well my-drop-zoneform-control bnsights-control {{options.ExtraClasses}}\"\r\n             (change)=\"onFileChange()\" id=\"{{options.Name}}\" multiple=\"{{options.IsMultipleFile?'multiple':''}}\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" type=\"file\" formControlName=\"{{options.Name}}\"\r\n             id=\"options.Name\" #fileInput\r\n             [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n\r\n\r\n          <div class=\"dragndrop text-center\">\r\n            <p class=\"drag-icon mb-3\">\r\n              <i class=\"fas fa-cloud-download-alt\"></i>\r\n            </p>\r\n            <p>\r\n              {{UtilityService.getResourceValue(\"DragAndDropHere\")}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"(!options.IsDropZone)&&!((uploader.queue.length>0)&&(!options.IsMultipleFile))\">\r\n          <button type=\"button\" class=\"btn btn-light btn-sm file-fake-input mb-3\" (click)=\"fileInput.click();\">\r\n            <i class=\"icon fa fa-cloud-upload-alt\"></i>\r\n            {{UtilityService.getResourceValue(\"Upload\")}}\r\n          </button>\r\n          <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n                 class=\"fileSelector customFileUploadPlacment hidden  v-required-multiplefiles d-none\" id=\"file\"\r\n                 multiple=\"{{options.IsMultipleFile?'multiple':''}}\" name=\"file\" type=\"file\" value=\"\"\r\n                 autocomplete=\"off\" (change)=\"onFileChange()\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n                 id=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\" type=\"file\"\r\n                 formControlName=\"{{options.Name}}\" id=\"options.Name\" #fileInput\r\n                 [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div *ngFor=\"let item of uploader.queue\">\r\n        <div class=\"fileInfoContainer ui-file btn-group mb-3\">\r\n          <a href=\"{{ item?._file?.url}}\" download>\r\n            <button type=\"button\" class=\"download-link btn btn-light btn-sm\">\r\n              <span>\r\n                <i class=\"icon fa fa-download\"></i>\r\n                <span class=\"upload-file-info\">{{ item?.file?.name }}</span>\r\n              </span>\r\n            </button>\r\n          </a>\r\n          <span class=\"removeUIFile remove-link btn btn-xs btn-danger d-flex align-items-center justify-content-center\"\r\n                (click)=\"item.remove();removeFromControlValue(item)\">\r\n            <i class=\"fa fa-times px-0\"></i>\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"text-danger Required-text\" *ngIf=\"(fileUploadFormControl.invalid && fileUploadFormControl.touched)\">\r\n        {{getErrorValidation(fileUploadFormControl.errors|keyvalue)}}\r\n      </div>\r\n\r\n\r\n\r\n      <div class=\"col-md-9 col-sm-9\">\r\n\r\n        <div>\r\n          <label>\r\n            {{options.LabelDescription}}\r\n          </label>\r\n        </div>\r\n\r\n\r\n      </div>\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
-                    styles: [".e-tip-content{background-color:#afafaf;color:#fff;padding-left:10px;padding-right:10px;padding-top:2px}.my-drop-zone{border:dotted 3px lightgray}.nv-file-over{border:dotted 3px red}.another-file-over-class{border:dotted 3px green}html,body{height:100%}\n"]
-                },] }
-    ];
-    FileUploadComponent.ctorParameters = function () { return [
-        { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
-        { type: forms.FormGroupDirective },
-        { type: ControlUtility },
-        { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.ControlValidationService },
-        { type: GlobalSettings }
-    ]; };
-    FileUploadComponent.propDecorators = {
-        fileInput: [{ type: i0.ViewChild, args: ['fileInput', { static: false },] }],
-        group: [{ type: i0.Input }],
-        options: [{ type: i0.Input }],
-        OnChange: [{ type: i0.Output }]
-    };
-
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
+                else {
+                    this.deletedFiles = [];
+                    this.multipleFileUploadModel.RemovedFiles = [];
                 }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    /** @deprecated */
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    /** @deprecated */
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __spreadArray(to, from, pack) {
-        if (pack || arguments.length === 2)
-            for (var i = 0, l = from.length, ar; i < l; i++) {
-                if (ar || !(i in from)) {
-                    if (!ar)
-                        ar = Array.prototype.slice.call(from, 0, i);
-                    ar[i] = from[i];
+                this.multipleFileUploadModel.UploadedFiles = this.multipleFileUploadModel.UploadedFiles.filter(function (Object) { return Object.NameWithExtension != item._file.name; });
+                if ((this.multipleFileUploadModel.UploadedFiles == null || this.multipleFileUploadModel.UploadedFiles == []) && this.options.IsRequired) {
+                    this.fileUploadFormControl.markAsTouched();
+                    this.fileUploadFormControl.invalid;
                 }
+                this.fileUploadFormControl.setValue(this.multipleFileUploadModel);
+                this.group.get(this.options.Name).setValue(this.multipleFileUploadModel);
             }
-        return to.concat(ar || Array.prototype.slice.call(from));
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
-    };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
+        };
+        return FileUploadComponent;
+    }());
+    FileUploadComponent.controlContainerstatic = null;
+    FileUploadComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'BBSF-FileUplaod',
+                    template: "\r\n<div class=\"b-control b-fileupload\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"col-form-label col-sm-12 mb-2\" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n           [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n            aria-required=\"true\">*</span>\r\n\r\n      <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'\r\n                   *ngIf=\"(ValidationMessage!=null&&ValidationMessage!='')\">\r\n        <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\">\r\n        </i>\r\n      </ejs-tooltip>\r\n\r\n\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <div>\r\n\r\n        <div ng2FileDrop *ngIf=\"(options.IsDropZone)&&(!((options.IsMultipleFile==false)&&(uploader.queue.length)>0))\"\r\n             [ngClass]=\"{'another-file-over-class': hasAnotherDropZoneOver}\" (onFileDrop)=\"onFileChange()\"\r\n             (fileOver)=\"fileOverAnother($event)\" [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n             class=\"well my-drop-zoneform-control bnsights-control {{options.ExtraClasses}}\"\r\n             (change)=\"onFileChange()\" id=\"{{options.Name}}\" multiple=\"{{options.IsMultipleFile?'multiple':''}}\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" type=\"file\" formControlName=\"{{options.Name}}\"\r\n             id=\"options.Name\" #fileInput\r\n             [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n\r\n\r\n          <div class=\"dragndrop text-center\">\r\n            <p class=\"drag-icon mb-3\">\r\n              <i class=\"fas fa-cloud-download-alt\"></i>\r\n            </p>\r\n            <p>\r\n              {{UtilityService.getResourceValue(\"DragAndDropHere\")}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"(!options.IsDropZone)&&!((uploader.queue.length>0)&&(!options.IsMultipleFile))\">\r\n          <button type=\"button\" class=\"btn btn-light btn-sm file-fake-input mb-3\" (click)=\"fileInput.click();\">\r\n            <i class=\"icon fa fa-cloud-upload-alt\"></i>\r\n            {{UtilityService.getResourceValue(\"Upload\")}}\r\n          </button>\r\n          <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n                 class=\"fileSelector customFileUploadPlacment hidden  v-required-multiplefiles d-none\" id=\"file\"\r\n                 multiple=\"{{options.IsMultipleFile?'multiple':''}}\" name=\"file\" type=\"file\" value=\"\"\r\n                 autocomplete=\"off\" (change)=\"onFileChange()\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n                 id=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\" type=\"file\"\r\n                 formControlName=\"{{options.Name}}\" id=\"options.Name\" #fileInput\r\n                 [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div *ngFor=\"let item of uploader.queue\">\r\n        <div class=\"fileInfoContainer ui-file btn-group mb-3\">\r\n          <a href=\"{{ item?._file?.url}}\" download>\r\n            <button type=\"button\" class=\"download-link btn btn-light btn-sm\">\r\n              <span>\r\n                <i class=\"icon fa fa-download\"></i>\r\n                <span class=\"upload-file-info\">{{ item?.file?.name }}</span>\r\n              </span>\r\n            </button>\r\n          </a>\r\n          <span class=\"removeUIFile remove-link btn btn-xs btn-danger d-flex align-items-center justify-content-center\"\r\n                (click)=\"item.remove();removeFromControlValue(item)\">\r\n            <i class=\"fa fa-times px-0\"></i>\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"text-danger Required-text\" *ngIf=\"(fileUploadFormControl.invalid && fileUploadFormControl.touched)\">\r\n        {{getErrorValidation(fileUploadFormControl.errors|keyvalue)}}\r\n      </div>\r\n\r\n\r\n\r\n      <div class=\"col-md-9 col-sm-9\">\r\n\r\n        <div>\r\n          <label>\r\n            {{options.LabelDescription}}\r\n          </label>\r\n        </div>\r\n\r\n\r\n      </div>\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
+                    styles: [".e-tip-content{background-color:#afafaf;color:#fff;padding-left:10px;padding-right:10px;padding-top:2px}.my-drop-zone{border:dotted 3px lightgray}.nv-file-over{border:dotted 3px red}.another-file-over-class{border:dotted 3px green}html,body{height:100%}\n"]
+                },] }
+    ];
+    FileUploadComponent.ctorParameters = function () { return [
+        { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
+        { type: forms.FormGroupDirective },
+        { type: ControlUtility },
+        { type: bbsfUtilities.UtilityService },
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
+    ]; };
+    FileUploadComponent.propDecorators = {
+        fileInput: [{ type: i0.ViewChild, args: ['fileInput', { static: false },] }],
+        group: [{ type: i0.Input }],
+        options: [{ type: i0.Input }],
+        OnChange: [{ type: i0.Output }]
+    };
 
     var EnglishArabicDTO = /** @class */ (function () {
         function EnglishArabicDTO() {
@@ -2787,7 +2811,7 @@
     ToggleslideComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-Toggleslide',
-                    template: "<div class=\"b-control b-toggle-slide\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n        [hidden]=\"options.HideLabel\">\r\n        {{options.LabelValue}}\r\n    </label>\r\n            <mat-slide-toggle [(ngModel)]=\"SlideValue\"  dir=\"{{options.ForceDirection==2?'rtl':''}}\" [cssClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n              formControlName=\"{{options.Name}}\" disableRipple=\"true\" disabled=\"{{options.IsDisabled}}\" (change)=\"changeValueToggle()\">\r\n        </mat-slide-toggle>\r\n        \r\n    </div>\r\n</div>\r\n",
+                    template: "<div class=\"b-control b-toggle-slide\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n        [hidden]=\"options.HideLabel\">\r\n        {{options.LabelValue}}\r\n    </label>\r\n            <mat-slide-toggle [(ngModel)]=\"SlideValue\"  dir=\"{{options.ForceDirection==2?'rtl':''}}\" [cssClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n              formControlName=\"{{options.Name}}\" disableRipple=\"true\" disabled=\"{{options.IsDisabled}}\" (change)=\"changeValueToggle()\">\r\n        </mat-slide-toggle>\r\n        <div class=\"control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    </div>\r\n</div>\r\n",
                     styles: [".mat-slide-toggle{padding-left:10px}.mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:#e3f4fe}.mat-slide-toggle-thumb-container{width:25px;height:25px;top:1px;left:-2px}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#009ef7}.mat-slide-toggle-thumb{height:25px;width:25px;border-radius:50%}.mat-slide-toggle.mat-checked .mat-ripple-element{background-color:#009ef7}.mat-slide-toggle-bar{width:55px;height:30px;border-radius:3.25rem}\n"]
                 },] }
     ];
@@ -4115,6 +4139,7 @@
         function AutocompleteDTO() {
             this.key = "";
             this.value = "";
+            this.image = "";
         }
         return AutocompleteDTO;
     }());
@@ -4144,6 +4169,7 @@
             this.validationRulesasync = [];
             this.dataList = [];
             this.SelectedValue = "";
+            this.avatarImage = "./src/assets/images/userimg.png";
             this.resetError = function () {
                 _this.controlValidationService.RemoveGlobalError();
             };
@@ -4345,7 +4371,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'BBSF-AutocompleteTextBox',
-                    template: "<div class=\"b-control b-auto-complete-textbox\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n      [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n        aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <!-- <input \r\n[(ngModel)]=\"Search\"\r\n    value=\"{{Search}}\"    \r\n    autocomplete=\"off\"\r\n    class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n    dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n    aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n    [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n    typeaheadOptionField=\"{{Value}}\"\r\n    [typeahead]=\"suggestions$\"\r\n    [typeaheadAsync]=\"true\"\r\n    placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"  (typeaheadOnSelect)=\"handleResultSelected($event)\" (blur)=\"onBlur($event.target.value)\"  /> -->\r\n      <!-- \r\n      <input ngxTypeahead autocomplete=\"off\"\r\n             value=\"{{Search}}\"\r\n             class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n             dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n             [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" [taUrl]=\"options.ActionURL\"\r\n             [taParams]=\"options.Params\" taQueryParam=\"{{QueryParam}}\" taApi=\"{{Api}}\" taListItemLabel=\"{{Value}}\"   (taSelected)=\"handleResultSelected($event)\"> -->\r\n\r\n\r\n\r\n      <ng-autocomplete *ngIf=\"!options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n        [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n        (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n        [notFoundTemplate]=\"notFoundTemplate\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n        dir=\"{{options.ForceDirection==2?'rtl':''}}\" formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\"\r\n        [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-autocomplete *ngIf=\"options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n        [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n        (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n        class=\"form-control bnsights-control {{options.ExtraClasses}}\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n        formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <a [innerHTML]=\"item.value\"></a>\r\n      </ng-template>\r\n\r\n      <ng-template #notFoundTemplate let-notFound>\r\n        <div [innerHTML]=\"notFound\"></div>\r\n      </ng-template>\r\n\r\n      <div class=\"text-danger Required-text\"\r\n        *ngIf=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n        {{getErrorValidation(AutocompleteTextBoxControl.errors|keyvalue)}}\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n        {{resetError()}}</div>\r\n\r\n    </div>\r\n  </div>\r\n</div>",
+                    template: "<div class=\"b-control b-auto-complete-textbox\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n      [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n        aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <!-- <input \r\n[(ngModel)]=\"Search\"\r\n    value=\"{{Search}}\"    \r\n    autocomplete=\"off\"\r\n    class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n    dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n    aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n    [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n    typeaheadOptionField=\"{{Value}}\"\r\n    [typeahead]=\"suggestions$\"\r\n    [typeaheadAsync]=\"true\"\r\n    placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"  (typeaheadOnSelect)=\"handleResultSelected($event)\" (blur)=\"onBlur($event.target.value)\"  /> -->\r\n      <!-- \r\n      <input ngxTypeahead autocomplete=\"off\"\r\n             value=\"{{Search}}\"\r\n             class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n             dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n             [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" [taUrl]=\"options.ActionURL\"\r\n             [taParams]=\"options.Params\" taQueryParam=\"{{QueryParam}}\" taApi=\"{{Api}}\" taListItemLabel=\"{{Value}}\"   (taSelected)=\"handleResultSelected($event)\"> -->\r\n\r\n\r\n\r\n      <ng-autocomplete *ngIf=\"!options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n        [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n        (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n        [notFoundTemplate]=\"notFoundTemplate\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n        dir=\"{{options.ForceDirection==2?'rtl':''}}\" formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\"\r\n        [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-autocomplete *ngIf=\"options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n        [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n        (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n        class=\"form-control bnsights-control {{options.ExtraClasses}}\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n        formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <img *ngIf=\"options.ItemWithImage\" style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\" src=\"{{(item.image?item.image:avatarImage)}}\" />\r\n        <a [innerHTML]=\"item.value\"></a>\r\n      </ng-template>\r\n\r\n      <ng-template #notFoundTemplate let-notFound>\r\n        <div [innerHTML]=\"notFound\"></div>\r\n      </ng-template>\r\n\r\n      <div class=\"text-danger Required-text\"\r\n        *ngIf=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n        {{getErrorValidation(AutocompleteTextBoxControl.errors|keyvalue)}}\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n        {{resetError()}}</div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     styles: [""]
                 },] }
     ];
@@ -4561,7 +4587,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'BBSF-TagsInput',
-                    template: "<div class=\"b-control b-tags-input\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n    <div class=\"form-group row\" [formGroup]=\"TagsFormGroup\">\r\n\r\n      <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n             [hidden]=\"options.HideLabel\">\r\n        {{options.LabelValue}}\r\n        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n              aria-required=\"true\">*</span>\r\n      </label>\r\n\r\n      <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n        <ngx-tags-input id=\"typeahead-http\" type=\"text\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n                        dir=\"{{options.ForceDirection==2?'rtl':''}}\"  [disabled]=\"options.IsDisabled\"\r\n                        aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"tags\"\r\n                        [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\"\r\n                        placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n                        (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\" removeLastOnBackspace=\"{{options.RemoveLastOnBackspace}}\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\" [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey scrollableOptions=\"{{options.ScrollableOptions}}\" scrollableOptionsInView=\"{{options.MaxSearchResultsCount}}\" (keypress)=\"AddTag($event.key,SearchKey)\" maxTags=\"{{options.MaxNumberTags}}\" minLengthBeforeOptions=\"{{options.MinSearchLength}}\" displayField=\"{{options.DatasourceItemText}}\" name=\"tags\">\r\n        </ngx-tags-input>\r\n\r\n        <div class=\"text-danger Required-text\"\r\n        *ngIf=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n        {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n  \r\n    <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n    </div>\r\n\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"b-control b-tags-input\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n    <div class=\"form-group row\" [formGroup]=\"TagsFormGroup\">\r\n\r\n      <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n        [hidden]=\"options.HideLabel\">\r\n        {{options.LabelValue}}\r\n        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n          aria-required=\"true\">*</span>\r\n      </label>\r\n\r\n      <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n        <b-tags-input id=\"typeahead-http\" type=\"text\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n          dir=\"{{options.ForceDirection==2?'rtl':''}}\" [disabled]=\"options.IsDisabled\" aria-describedby=\"email-error\"\r\n          aria-invalid=\"true\" formControlName=\"tags\"\r\n          [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\" placeholder=\"{{options.Placeholder}}\"\r\n          id=\"{{options.Name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n          removeLastOnBackspace=\"{{options.RemoveLastOnBackspace}}\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n          [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey\r\n          scrollableOptions=\"{{options.ScrollableOptions}}\" scrollableOptionsInView=\"{{options.MaxSearchResultsCount}}\"\r\n          (keypress)=\"AddTag($event.key,SearchKey)\" [ViewMode]=\"options.TagInputMode\"\r\n          maxTags=\"{{options.MaxNumberTags}}\" minLengthBeforeOptions=\"{{options.MinSearchLength}}\"\r\n          [showDescription]=\"options.ShowDescription\" [defaultImageURL]=\"options.DefaultImgUrl\" name=\"tags\">\r\n        </b-tags-input>\r\n\r\n        <div class=\"text-danger Required-text\" *ngIf=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n          {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n        </div>\r\n\r\n\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n        </div>\r\n\r\n        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n          {{resetError()}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n",
                     styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
                 },] }
     ];
@@ -4632,6 +4658,7 @@
             this.direction = '';
             this.IsFirstCall = true;
             this.Items = new i0.EventEmitter();
+            this.subscriptions = new rxjs.Subscription();
             this.ReinitializePaging = function () {
                 _this.IsFirstCall = true;
                 _this.getItemList(1, true);
@@ -4641,31 +4668,34 @@
                 _this.getItemList(_this.CurrentPage);
             };
         }
+        PagingComponent.prototype.ngOnDestroy = function () {
+            this.subscriptions.unsubscribe();
+        };
         PagingComponent.prototype.ngOnInit = function () {
             var _this = this;
             if (this.options.IsLoadMoreControl)
                 this.Sum = this.options.PageSize;
             if (this.options.DropdownFiltersControlNames != null && this.options.DropdownFiltersControlNames.length > 0) {
                 var DropdownFiltersControlNames = this.options.DropdownFiltersControlNames;
-                this.onChangeService.GetValue().subscribe(function (value) {
+                this.subscriptions.add(this.onChangeService.GetValue().subscribe(function (value) {
                     var result = _this.options.DropdownFiltersControlNames.filter(function (item) { return item == value; });
                     if (result.length > 0) {
                         _this.IsFirstCall = true;
                         _this.CurrentPage = 1;
                         _this.getItemList(_this.CurrentPage, true);
                     }
-                });
+                }));
             }
             if (this.options.BootstrapDatePickersFiltersControlNames != null && this.options.BootstrapDatePickersFiltersControlNames.length > 0) {
                 var BootstrapDatePickersFiltersControlNames = this.options.BootstrapDatePickersFiltersControlNames;
-                this.onChangeService.GetValue().subscribe(function (value) {
+                this.subscriptions.add(this.onChangeService.GetValue().subscribe(function (value) {
                     var result = _this.options.BootstrapDatePickersFiltersControlNames.filter(function (item) { return item == value; });
                     if (result.length > 0) {
                         _this.IsFirstCall = true;
                         _this.CurrentPage = 1;
                         _this.getItemList(_this.CurrentPage, true);
                     }
-                });
+                }));
             }
             this.IsFirstCall = true;
             this.getItemList(this.CurrentPage, true);
@@ -4756,6 +4786,8 @@
         PagingComponent.prototype.getItemList = function (page, IsFilterUpdated) {
             var _this = this;
             if (IsFilterUpdated === void 0) { IsFilterUpdated = false; }
+            if (this.options.StartPagingCallback)
+                this.options.StartPagingCallback.call(null);
             var pagingDTO = new PagingDTO();
             var size = Number.parseInt(this.options.PageSize.toString());
             if (this.options.IsLoadMoreControl)
@@ -4772,7 +4804,9 @@
                 PagingDTO: pagingDTO,
                 Filters: filters
             };
-            this.requestHandlerService.post(this.options.ActionPostURL, this.options.Filters && this.options.Filters.length > 0 ? filtersDTO : pagingDTO)
+            var requestOptions = new bbsfUtilities.RequestOptionsModel();
+            requestOptions.disableBlockUI = this.options.DisableBlockUI;
+            this.requestHandlerService.post(this.options.ActionPostURL, this.options.Filters && this.options.Filters.length > 0 ? filtersDTO : pagingDTO, null, null, requestOptions)
                 .subscribe(function (responseData) {
                 _this.result = responseData.items; //this.castItems(responseData.items);
                 var castedResult = classTransformer.plainToClass(_this.options.TypeOfResponse, _this.result, { excludeExtraneousValues: true });
@@ -4852,21 +4886,21 @@
                         var ControlValue = this.group.controls[FormControlName].value;
                         if (ControlValue != undefined && ControlValue != null && ControlValue != "") {
                             if (this.options.Filters[index].FilterType == exports.FilterType.DatePicker) {
-                                if (Array.isArray(ControlValue)) {
-                                    for (var element = 0; element < ControlValue.length; element++) {
-                                        var value = ControlValue[element];
-                                        filters[this.options.Filters[index].ActionParameterName] = value;
-                                    }
-                                }
-                                else {
-                                    filters[this.options.Filters[index].ActionParameterName] = ControlValue;
-                                }
+                                //if (Array.isArray(ControlValue)) {
+                                //  for (let element = 0; element < ControlValue.length; element++) {
+                                //    const value = ControlValue[element];
+                                //    filters[this.options.Filters[index].ActionParameterName] = value;
+                                //  }
+                                //}
+                                //else {
+                                filters[this.options.Filters[index].ActionParameterName] = ControlValue;
+                                //}
                             }
                             else {
                                 if (this.options.Filters[index].FilterType == exports.FilterType.AutocompleteTextBox)
-                                    ControlValue = JSON.stringify(ControlValue);
+                                    ControlValue = ControlValue;
                                 if (this.options.Filters[index].FilterType == exports.FilterType.TagInput)
-                                    ControlValue = JSON.stringify(ControlValue);
+                                    ControlValue = ControlValue;
                                 filters[this.options.Filters[index].ActionParameterName] = ControlValue;
                             }
                         }
@@ -7378,6 +7412,167 @@
         { type: common.DatePipe }
     ]; };
 
+    exports.TagInputView = void 0;
+    (function (TagInputView) {
+        TagInputView[TagInputView["WithImage"] = 1] = "WithImage";
+        TagInputView[TagInputView["WithoutImage"] = 2] = "WithoutImage";
+        TagInputView[TagInputView["WithInitial"] = 3] = "WithInitial";
+    })(exports.TagInputView || (exports.TagInputView = {}));
+
+    var noop = function () { };
+    var ɵ0$1 = noop;
+    var TAGS_INPUT_TEMPLATE = "\n \n<div class=\"tags-input\">\n<span class=\"tags-input__tag label label-primary badge badge-primary\" *ngFor=\"let tag of tags\">\n\n<span [ngSwitch]=\"ViewMode\">\n<span *ngSwitchCase=\"tagInputViewEnum.WithImage\">\n<img style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\"\nsrc=\"{{(tag.imageURL?tag.imageURL:defaultImageURL)}}\" />\n</span>\n\n<span *ngSwitchCase=\"tagInputViewEnum.WithInitial\">\n<div class=\"user-initials\">{{calculateInitials(tag.name)}}</div>\n</span>\n\n<span *ngSwitchDefault>\n</span>\n\n</span>\n  {{tag[displayField]}}\n  <span *ngIf=\"isDeleteable(tag)\" role=\"button\" class=\"tags-input__tag-remove-btn\" (click)=\"removeTag(tag)\"\n    (touch)=\"removeTag(tag)\">\n    <span aria-hidden=\"true\">&times;</span>\n    <span class=\"sr-only\">Close</span>\n  </span>\n</span>\n\n<input *ngIf=\"options === null; else withTypeahead\" class=\"tags-input__input-field\" type=\"text\"\n  [placeholder]=\"getPlaceholder()\" name=\"tags\" (keyup.enter)=\"addTag(tagInput)\"\n  (keydown.backspace)=\"removeLastTag(tagInput)\" [disabled]=\"!canAddTags || maximumOfTagsReached()\"\n  [hidden]=\"!canAddTags || maximumOfTagsReached()\" #tagInput />\n\n<ng-template #withTypeahead>\n  <span [ngSwitch]=\"ViewMode\">\n\n    <span *ngSwitchCase=\"tagInputViewEnum.WithImage\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithImage\" [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchCase=\"tagInputViewEnum.WithoutImage\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutImage\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchCase=\"tagInputViewEnum.WithInitial\">\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutInitial\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        #tagInput />\n    </span>\n\n    <span *ngSwitchDefault>\n      <input *ngIf=\"(options !== null)\" class=\"tags-input__input-field\" type=\"text\" [placeholder]=\"getPlaceholder()\"\n        name=\"tags\" (keydown.backspace)=\"removeLastTag(tagInput)\" [(ngModel)]=\"selected\" [typeahead]=\"options\"\n        [typeaheadOptionField]=\"displayField\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n        (typeaheadNoResults)=\"typeaheadOnNoMatch($event)\" [typeaheadMinLength]=\"minLengthBeforeOptions\"\n        [typeaheadScrollable]=\"scrollableOptions\" [typeaheadLatinize]=\"true\"\n        [typeaheadItemTemplate]=\"itemTemplateWithoutImage\"\n        [typeaheadOptionsInScrollableView]=\"scrollableOptionsInView\"\n        [disabled]=\"!canAddTags || maximumOfTagsReached()\" [hidden]=\"!canAddTags || maximumOfTagsReached()\"\n        #tagInput />\n    </span>\n\n  </span>\n\n</ng-template>\n\n<ng-template #itemTemplateWithImage let-model=\"item\" let-index=\"index\">\n  <img\n    style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\"\n    src=\"{{(model.imageURL?model.imageURL:defaultImageURL)}}\" />\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n\n<ng-template #itemTemplateWithoutImage let-model=\"item\" let-index=\"index\">\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n\n<ng-template #itemTemplateWithoutInitial let-model=\"item\" let-index=\"index\">\n  <div class=\"user-image\">\n    <div class=\"user-initials\">{{calculateInitials(model.name)}}</div>\n  </div>\n  <div>\n    <a [innerHTML]=\"model.name\"></a>\n    <p *ngIf=\"showDescription\">\n      {{model.description}}\n    </p>\n  </div>\n</ng-template>\n</div>\n";
+    var TAGS_INPUT_STYLE = "\n    :host {\n        overflow: auto;\n        white-space: nowrap;\n    }\n\n    .tags-input {\n        align-items: center;\n        display: flex;\n        flex-wrap: wrap;\n    }\n\n    .tags-input__tag {\n        display: inline-block;\n        margin-bottom: 2px;\n        margin-right: 5px;\n        padding-right: 0.3em;\n    }\n\n    .tags-input__tag-remove-btn {\n        cursor: pointer;\n        display: inline-block;\n        font-size: 12px;\n        margin: -3px 0 0 3px;\n        padding: 0;\n        vertical-align: top;\n    }\n\n    .tags-input__input-field {\n        border: none;\n        flex-grow: 1;\n        outline: none;\n    }\n";
+    var CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
+        provide: forms.NG_VALUE_ACCESSOR,
+        useExisting: i0.forwardRef(function () { return BTagsInputComponent; }),
+        multi: true
+    };
+    var BTagsInputComponent = /** @class */ (function () {
+        function BTagsInputComponent() {
+            this.selected = '';
+            this.tags = [];
+            this.onTouchedCallback = noop;
+            this.onChangeCallback = noop;
+            this.tagInputViewEnum = exports.TagInputView;
+            this.removeLastOnBackspace = false;
+            this.canDeleteTags = true;
+            this.canAddTags = true;
+            this.ViewMode = exports.TagInputView.WithoutImage;
+            this.placeholder = '';
+            this.showDescription = true;
+            this.options = null;
+            this.defaultImageURL = null;
+            this.displayField = 'name';
+            this.minLengthBeforeOptions = 1;
+            this.scrollableOptions = false;
+            this.scrollableOptionsInView = 5;
+            this.onTagsChanged = new i0.EventEmitter();
+            this.onMaxTagsReached = new i0.EventEmitter();
+            this.onNoOptionsMatch = new i0.EventEmitter();
+        }
+        BTagsInputComponent.prototype.getPlaceholder = function () {
+            if (this.tags && this.tags.length > 0) {
+                return '';
+            }
+            return this.placeholder;
+        };
+        BTagsInputComponent.prototype.tagsChanged = function (type, tag) {
+            this.onChangeCallback(this.tags);
+            this.onTagsChanged.emit({
+                change: type,
+                tag: tag
+            });
+            if (this.maximumOfTagsReached()) {
+                this.onMaxTagsReached.emit();
+            }
+        };
+        BTagsInputComponent.prototype.removeLastTag = function (tagInput) {
+            if (!this.removeLastOnBackspace || !this.tags.length) {
+                return;
+            }
+            if (tagInput.value === '') {
+                this.removeTag(this.tags[this.tags.length - 1]);
+            }
+        };
+        BTagsInputComponent.prototype.addTag = function (tagInput) {
+            var _a;
+            if (tagInput.value.trim() !== '') {
+                var tag = (_a = {},
+                    _a[this.displayField] = tagInput.value,
+                    _a);
+                this.addPredefinedTag(tag);
+            }
+            tagInput.value = '';
+        };
+        BTagsInputComponent.prototype.addPredefinedTag = function (tag) {
+            if (!this.maximumOfTagsReached()) {
+                this.tags.push(tag);
+                this.tagsChanged('add', tag);
+            }
+        };
+        BTagsInputComponent.prototype.removeTag = function (tagToRemove) {
+            if (!this.isDeleteable(tagToRemove)) {
+                return;
+            }
+            this.tags = this.tags.filter(function (tag) { return tagToRemove !== tag; });
+            this.tagsChanged('remove', tagToRemove);
+        };
+        BTagsInputComponent.prototype.maximumOfTagsReached = function () {
+            return typeof this.maxTags !== 'undefined' && this.tags && this.tags.length >= this.maxTags;
+        };
+        BTagsInputComponent.prototype.isDeleteable = function (tag) {
+            if (typeof tag.deleteable !== "undefined" && !tag.deleteable) {
+                return false;
+            }
+            return this.canDeleteTags;
+        };
+        BTagsInputComponent.prototype.typeaheadOnSelect = function (e) {
+            var _a;
+            if (typeof e.item === 'string') {
+                this.addPredefinedTag((_a = {},
+                    _a[this.displayField] = e.value,
+                    _a));
+            }
+            else {
+                this.addPredefinedTag(e.item);
+            }
+            this.selected = '';
+        };
+        BTagsInputComponent.prototype.typeaheadOnNoMatch = function (e) {
+            if (typeof this.onNoOptionsMatch !== 'undefined') {
+                this.onNoOptionsMatch.emit(e);
+            }
+        };
+        BTagsInputComponent.prototype.writeValue = function (value) {
+            if (value !== this.tags) {
+                this.tags = value;
+            }
+        };
+        BTagsInputComponent.prototype.registerOnChange = function (fn) {
+            this.onChangeCallback = fn;
+        };
+        BTagsInputComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouchedCallback = fn;
+        };
+        BTagsInputComponent.prototype.calculateInitials = function (name) {
+            debugger;
+            var fullName = name.split(' ');
+            var initials = "";
+            if (fullName.length > 1)
+                initials = fullName.shift().charAt(0) + fullName.pop().charAt(0);
+            else
+                initials = fullName.shift().charAt(0);
+            return initials.toUpperCase();
+        };
+        return BTagsInputComponent;
+    }());
+    BTagsInputComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'b-tags-input',
+                    template: TAGS_INPUT_TEMPLATE,
+                    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
+                    styles: [TAGS_INPUT_STYLE]
+                },] }
+    ];
+    BTagsInputComponent.propDecorators = {
+        maxTags: [{ type: i0.Input }],
+        removeLastOnBackspace: [{ type: i0.Input }],
+        canDeleteTags: [{ type: i0.Input }],
+        canAddTags: [{ type: i0.Input }],
+        ViewMode: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        showDescription: [{ type: i0.Input }],
+        options: [{ type: i0.Input }],
+        defaultImageURL: [{ type: i0.Input }],
+        minLengthBeforeOptions: [{ type: i0.Input }],
+        scrollableOptions: [{ type: i0.Input }],
+        scrollableOptionsInView: [{ type: i0.Input }],
+        onTagsChanged: [{ type: i0.Output }],
+        onMaxTagsReached: [{ type: i0.Output }],
+        onNoOptionsMatch: [{ type: i0.Output }]
+    };
+
     var options;
     exports.AppInjector = void 0;
     angular.FullCalendarModule.registerPlugins([
@@ -7428,7 +7623,8 @@
                         RepeaterItemFieldComponent,
                         RepeaterTableComponent,
                         BBSFDateTimePipe,
-                        BBSFDatePipe
+                        BBSFDatePipe,
+                        BTagsInputComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -7731,6 +7927,7 @@
             // Params: object={};
             _this.QueryParam = 'query';
             _this.SelectedValue = null;
+            _this.ItemWithImage = false;
             return _this;
         }
         return AutocompleteOptions;
@@ -7755,26 +7952,29 @@
             /** Allow User To Add Tags */
             _this.CanAddTags = true;
             /** Set Max Number Of Tags That User Can Be Select  */
-            _this.MaxNumberTags = 100;
+            _this.MaxNumberTags = 5;
             /** Set Min Length Of Char To Call Search Function   */
             _this.MinSearchLength = 1;
             /**Allow  Scrolle Option In Dropdown  */
             _this.ScrollableOptions = true;
             /** Set Max Number Of Tags That will Be Appear ON Dropdown  */
-            _this.MaxSearchResultsCount = 5;
+            _this.MaxSearchResultsCount = 10;
             /**Value Name Of Tag Option In Dropdown */
-            _this.DatasourceItemValue = "key";
+            _this.DatasourceItemValue = "id";
             /**Text  Of Tag That Will Show In Dropdown */
-            _this.DatasourceItemText = "value";
+            _this.DatasourceItemText = "name";
             /**Set Query Param Name By Default It's 'query'*/
             _this.QueryParamName = "query";
             /**Set Query Param Name By Default It's 'query'*/
             _this.SelectedItemsParamName = "SelectedItems";
             /**Set Filter Param Name By Default It's 'query'*/
             _this.FilterParamName = "";
+            _this.DefaultImgUrl = "";
             /** allow add  value of  TagInput dosn't exist in list*/
             _this.AllowNewSelection = false;
             _this.ValidationToken = null;
+            _this.TagInputMode = exports.TagInputView.WithoutImage;
+            _this.ShowDescription = true;
             return _this;
         }
         return TagsInputOptions;
@@ -7830,6 +8030,8 @@
             this.ForceDirection = exports.ForceDirection.English;
             /** Clear Filter button selector  */
             this.ResetFilterButtonName = null;
+            this.DisableBlockUI = false;
+            this.StartPagingCallback = null;
         }
         return PagingOptions;
     }());
@@ -8274,6 +8476,7 @@
     exports.CustomValidator = CustomValidator;
     exports.DateInputComponent = DateInputComponent;
     exports.DatePickerOptions = DatePickerOptions;
+    exports.DefaultIntl = DefaultIntl;
     exports.DropdownListComponent = DropdownListComponent;
     exports.DropdownListItem = DropdownListItem;
     exports.DropdownOptions = DropdownOptions;
@@ -8338,6 +8541,7 @@
     exports.environment = environment;
     exports.options = options;
     exports["ɵ0"] = ɵ0;
+    exports["ɵa"] = BTagsInputComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });