@amc-technology/ui-library 1.0.31 → 1.0.33

package/bundles/amc-technology-ui-library.umd.js

@@ -1,765 +1,1096 @@
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/elements'), require('@angular/platform-browser'), require('elements-zone-strategy')) :
-	typeof define === 'function' && define.amd ? define('@amc-technology/ui-library', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/elements', '@angular/platform-browser', 'elements-zone-strategy'], factory) :
-	(factory((global['amc-technology'] = global['amc-technology'] || {}, global['amc-technology']['ui-library'] = {}),global.ng.core,global.ng.common,global.ng.forms,global.ng.elements,global.ng.platformBrowser,global.elementsZoneStrategy));
-}(this, (function (exports,core,common,forms,elements,platformBrowser,elementsZoneStrategy) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/elements'), require('@angular/platform-browser'), require('elements-zone-strategy')) :
+    typeof define === 'function' && define.amd ? define('@amc-technology/ui-library', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/elements', '@angular/platform-browser', 'elements-zone-strategy'], factory) :
+    (global = global || self, factory((global['amc-technology'] = global['amc-technology'] || {}, global['amc-technology']['ui-library'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.elements, global.ng.platformBrowser, global.elementsZoneStrategy));
+}(this, (function (exports, core, common, forms, elements, platformBrowser, elementsZoneStrategy) { 'use strict';
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise */
+    /*! *****************************************************************************
+    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 (b.hasOwnProperty(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 };
+        }
+    }
+
+    function __createBinding(o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+    }
+
+    function __exportStar(m, exports) {
+        for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) exports[p] = 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;
+    };
+
+    function __importStar(mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+        result.default = 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;
+    }
 
+    /**
+     * @ignore
+     */
+    var InteractionComponent = /** @class */ (function () {
+        /**
+         * @ignore
+         */
+        function InteractionComponent() {
+            this.minimizedChanged = new core.EventEmitter();
+            this.isAgentTyping = new core.EventEmitter();
+            this.newMessage = new core.EventEmitter();
+            this._minimized = false;
+        }
+        Object.defineProperty(InteractionComponent.prototype, "_minimized", {
+            get: function () {
+                return this.minimized;
+            },
+            set: function (value) {
+                this.minimized = value;
+                this.minimizedChanged.emit(value);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @ignore
+         */
+        InteractionComponent.prototype.ngOnInit = function () {
+        };
+        /**
+         * @ignore
+         */
+        InteractionComponent.prototype.minimize = function () {
+            this._minimized = true;
+        };
+        /**
+         * @ignore
+         */
+        InteractionComponent.prototype.maximize = function () {
+            this._minimized = false;
+        };
+        /**
+         * @ignore
+         */
+        InteractionComponent.prototype.isConferenceCall = function () {
+            if (this.interaction.parties && this.interaction.parties.length > 1) {
+                return true;
+            }
+            return false;
+        };
+        InteractionComponent.prototype.collapseKeypress = function (event) {
+            if (event.code === 'Enter') {
+                this.minimize();
+            }
+        };
+        InteractionComponent.prototype.expandKeypress = function (event) {
+            if (event.code === 'Enter') {
+                this.maximize();
+            }
+        };
+        __decorate([
+            core.Input()
+        ], InteractionComponent.prototype, "interaction", void 0);
+        __decorate([
+            core.Output()
+        ], InteractionComponent.prototype, "minimizedChanged", void 0);
+        __decorate([
+            core.Output()
+        ], InteractionComponent.prototype, "isAgentTyping", void 0);
+        __decorate([
+            core.Output()
+        ], InteractionComponent.prototype, "newMessage", void 0);
+        InteractionComponent = __decorate([
+            core.Component({
+                selector: 'amc-interaction',
+                template: "<div class=\"AnswerCallFocused\">\r\n  <div class=\"editor callHeaderTop\">\r\n    <img class=\"statusImage\" aria-hidden=\"true\" [src]=\"interaction.UIHeadersData.statusUrl\" (click)=\"interaction.UIHeadersData.focusHandler.handler(interaction.UIHeadersData.focusHandler.operationName, interaction.UIHeadersData.focusHandler.operationMetadata)\" />\r\n    <label class=\"statusText\">\r\n      <b [id]=\"interaction.UIHeadersData.statusText\">{{ interaction.UIHeadersData.statusText }}</b>\r\n    </label>\r\n    <label class=\"verticalDivider\">|</label>\r\n    <label class=\"directionText\" *ngIf=\"!interaction.UIHeadersData.displayHoldCounter\">{{ interaction.UIHeadersData.directionText }}</label>\r\n    <div class=\"holdCallDurationDiv\" *ngIf=\"interaction.UIHeadersData.displayHoldCounter\">\r\n      <amc-holdtimer [holdCounterData]=\"interaction.UIHeadersData.holdCounterData\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\"></amc-holdtimer>\r\n    </div>\r\n    <img class=\"ViewExpandImage\" [src]=\"interaction.UIHeadersData.minimizeUrl\" alt=\"Minimize\" (click)=\"minimize()\" (keypress)=\"collapseKeypress($event)\" *ngIf=\"!_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"collapse Call Section\">\r\n    <img class=\"ViewCollapseImage\" [src]=\"interaction.UIHeadersData.maximizeUrl\" alt=\"Maximize\" (click)=\"maximize()\" (keypress)=\"expandKeypress($event)\" *ngIf=\"_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"expand Call Section\">\r\n    <div class=\"DurationDiv\" *ngIf=\"interaction.displayCallTimer\">\r\n      <amc-duration [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [startTime]=\"interaction.startTime\"></amc-duration>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!_minimized\">\r\n\r\n    <div *ngIf=\"!isConferenceCall()\">\r\n      <div class=\"editor phoneNumberContainer\">\r\n        <input class=\"callImage\" type=\"image\" [src]=\"interaction.subheaderData.image.href\" [title]=\"interaction.subheaderData.tooltip || ''\" tabindex=\"-1\">\r\n        <input class=\"editor phoneNumberValue\" [attr.aria-labelledby]=\"interaction.UIHeadersData.statusText + ' ' + interaction.subheaderData.value\" readonly type=\"text\" [value]=\"interaction.subheaderData.value\" [id]=\"interaction.subheaderData.value\" tabindex=\"-1\">\r\n      </div>\r\n\r\n      <div class=\"cadSection\">\r\n        <ng-container *ngFor=\"let property of interaction.properties\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <label class=\"col1\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n            <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let property of interaction.associatedData\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <div class=\"editor displayDiv\">\r\n              <label class=\"displayLabels\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <app-chat-box *ngIf=\"interaction.chat\" [isTyping]=\"interaction.chat.isCustomerTyping\" [settings]=\"interaction.chat.settings\"\r\n        [messages]=\"interaction.chat.messages\" (isAgentTyping)=\"isAgentTyping.emit($event)\" (newMessage)=\"newMessage.emit($event)\"></app-chat-box>\r\n\r\n      <div [id]='interaction.interactionId'> </div>\r\n      <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n    <div *ngIf=\"isConferenceCall()\">\r\n      <div *ngFor=\"let party of interaction.parties\">\r\n        <div class=\"editor phoneNumberContainer\">\r\n          <input class=\"callImage\" type=\"image\" [src]=\"party.header.image.href\" [title]=\"party.header.tooltip || ''\" tabindex=\"-1\">\r\n          <input class=\"editor phoneNumberValue\" readonly type=\"text\" [value]=\"party.header.value\" tabindex=\"-1\">\r\n        </div>\r\n\r\n        <div class=\"grid-container\">\r\n          <ng-container *ngFor=\"let property of party.properties\">\r\n            <ng-container *ngIf=\"property.visible\">\r\n              <label class=\"col1\" [title]=\"property.displayKey\">{{ property.displayKey }}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n        <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" [operations]=\"party.operations\"></amc-operation>\r\n        <div class=\"AnswerCallFocused\"></div>\r\n      </div>\r\n      <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
+                styles: [":host{display:block}.phoneNumberContainer{margin-left:5px!important;padding-left:0;display:flex;align-items:center}.cadSection{margin-bottom:5px}.grid-container{margin-left:5px;display:grid;grid-template-columns:auto 1fr;grid-column-gap:10px;max-width:calc(100% - 5px);overflow:hidden}.col1{grid-column:1/2}.col2{grid-column:2/3}.ViewExpandImage{margin:3px}.ViewExpandImage:focus{outline:#3296da solid 2px;outline-offset:0}.ViewCollapseImage{margin:3px}.ViewCollapseImage:focus{outline:#3296da solid 2px;outline-offset:0}.callImage{cursor:default}.phoneNumberValue:focus{outline-style:none}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
+            })
+        ], InteractionComponent);
+        return InteractionComponent;
+    }());
 
+    var ScenarioComponent = /** @class */ (function () {
+        function ScenarioComponent() {
+            this.minimizedChanged = new core.EventEmitter();
+            this.isAgentTyping = new core.EventEmitter();
+            this.newMessage = new core.EventEmitter();
+            this.afterViewChecked = new core.EventEmitter();
+        }
+        ScenarioComponent.prototype.ngAfterViewChecked = function () {
+            this.afterViewChecked.emit();
+        };
+        ScenarioComponent.prototype.onMinimizedChanged = function () {
+            this.minimizedChanged.emit();
+        };
+        __decorate([
+            core.Input()
+        ], ScenarioComponent.prototype, "scenario", void 0);
+        __decorate([
+            core.Output()
+        ], ScenarioComponent.prototype, "minimizedChanged", void 0);
+        __decorate([
+            core.Output()
+        ], ScenarioComponent.prototype, "isAgentTyping", void 0);
+        __decorate([
+            core.Output()
+        ], ScenarioComponent.prototype, "newMessage", void 0);
+        __decorate([
+            core.Output()
+        ], ScenarioComponent.prototype, "afterViewChecked", void 0);
+        ScenarioComponent = __decorate([
+            core.Component({
+                selector: 'amc-scenario',
+                template: "<ng-container *ngIf=\"scenario && scenario.interactions\">\r\n  <amc-interaction *ngFor=\"let interaction of scenario.interactions\" [interaction]=\"interaction\"\r\n    (minimizedChanged)=\"onMinimizedChanged()\" (isAgentTyping)=\"isAgentTyping.emit($event)\"\r\n    (newMessage)=\"newMessage.emit($event)\">\r\n  </amc-interaction>\r\n</ng-container>\r\n",
+                styles: ["", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
+            })
+        ], ScenarioComponent);
+        return ScenarioComponent;
+    }());
 
+    /**
+     * @ignore
+     */
+    var OperationComponent = /** @class */ (function () {
+        /**
+         * @ignore
+         */
+        function OperationComponent() {
+            this.labelledByText = '';
+            this.describedByText = '';
+        }
+        /**
+         * @ignore
+         */
+        OperationComponent.prototype.ngOnInit = function () {
+            if (this.statusText && this.callType) {
+                this.describedByText = this.statusText + " " + this.callType;
+            }
+            else if (this.statusText) {
+                this.describedByText = this.statusText;
+            }
+            else if (this.callType) {
+                this.describedByText = this.callType;
+            }
+            if (this.callId) {
+                this.labelledByText = this.callId;
+            }
+        };
+        OperationComponent.prototype.operationKeypress = function (event, operation) {
+            if (event.code === 'Enter') {
+                operation.handler(operation.operationName, operation.operationMetadata);
+            }
+        };
+        __decorate([
+            core.Input()
+        ], OperationComponent.prototype, "statusText", void 0);
+        __decorate([
+            core.Input()
+        ], OperationComponent.prototype, "callId", void 0);
+        __decorate([
+            core.Input()
+        ], OperationComponent.prototype, "callType", void 0);
+        __decorate([
+            core.Input()
+        ], OperationComponent.prototype, "operations", void 0);
+        OperationComponent = __decorate([
+            core.Component({
+                selector: 'amc-operation',
+                template: "<div class=\"callOptions\">\r\n    <img\r\n     class=\"AnswerCallImages\"\r\n     tabindex=\"0\"\r\n     role=\"button\"\r\n     attr.aria-label=\"{{ operation.title }}\"\r\n     *ngFor=\"let operation of operations\"\r\n     [title]=\"operation.title\"\r\n     [src]=\"operation.icon\"\r\n     [attr.accesskey]=\"operation.accesskey || null\"\r\n     [attr.aria-labelledby]=\"labelledByText || null\"\r\n     [attr.aria-describedby]=\"describedByText || null\"\r\n     (click)=\"operation.handler(operation.operationName, operation.operationMetadata)\"\r\n     (keypress)=\"operationKeypress($event, operation)\"/>\r\n</div>\r\n",
+                styles: [".AnswerCallImages:focus{outline:#3296da solid 2px;outline-offset:1px}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
+            })
+        ], OperationComponent);
+        return OperationComponent;
+    }());
 
+
+    (function (IChatMessageType) {
+        IChatMessageType["AGENT"] = "AGENT";
+        IChatMessageType["OTHER_PERSON"] = "OTHER_PERSON";
+        IChatMessageType["INFORMATION"] = "INFORMATION";
+    })(exports.IChatMessageType || (exports.IChatMessageType = {}));
 
+    /**
+     * A helper method to make instances of [IProperty]
+     */
+    var Property = /** @class */ (function () {
+        /**
+         *
+         * @param key
+         * @param value : if value type is COUNTER then value should be start time in MilliSeconds.
+         * @param visible
+         * @param valueType
+         * @param customOperation
+         */
+        function Property(key, value, visible, valueType, customOperation) {
+            var _this = this;
+            /**
+             * Operation responsible for generating displayKey and dispkayValur from key and value.
+             */
+            this.displayOperation = function () {
+                _this.displayKey = _this.key;
+                _this.displayValue = _this.value;
+            };
+            this.key = key;
+            this.value = value;
+            visible != null ? (this.visible = visible) : (this.visible = true);
+            valueType != null
+                ? (this.displayValueType = valueType)
+                : (this.displayValueType = exports.ValueType.STRING);
+            this.customOperations = customOperation;
+            this.displayOperation();
+        }
+        return Property;
+    }());
+    /**
+     * enum for Value types of PROPERTY.
+     */
+
+    (function (ValueType) {
+        ValueType[ValueType["STRING"] = 0] = "STRING";
+        ValueType[ValueType["COUNTER"] = 1] = "COUNTER";
+    })(exports.ValueType || (exports.ValueType = {}));
 
+    function secondsToHms(seconds_in) {
+        seconds_in = Number(seconds_in);
+        var h = Math.floor(seconds_in / 3600);
+        var m = Math.floor(seconds_in % 3600 / 60);
+        var s = Math.floor(seconds_in % 3600 % 60);
+        var hDisplay = h > 0 ? h.toString() + ':' : '';
+        var mDisplay = m > 0 ? ('0' + m.toString()).slice(-2) + ':' : '00:';
+        var sDisplay = s > 0 ? ('0' + s.toString()).slice(-2) : '00';
+        return hDisplay + mDisplay + sDisplay;
+    }
 
+    /**
+     * @ignore
+     */
+    var PropertyComponent = /** @class */ (function () {
+        /**
+         * @ignore
+         */
+        function PropertyComponent() {
+            this.labelledByText = '';
+            this.title = '';
+            this._timerId = null;
+            this.processedDisplayValue = '';
+        }
+        /**
+         * @ignore
+         */
+        PropertyComponent.prototype.ngOnInit = function () {
+            if (this.statusText && this.callType) {
+                this.labelledByText = this.statusText + " " + this.callType;
+            }
+            else if (this.statusText) {
+                this.labelledByText = this.statusText;
+            }
+            else if (this.callType) {
+                this.labelledByText = this.callType;
+            }
+            if (this.callType && this.callId) {
+                this.title = this.callType + " " + this.callId;
+            }
+            else if (this.callType) {
+                this.title = this.callType;
+            }
+            else if (this.callId) {
+                this.title = this.callId;
+            }
+            this.initValues();
+        };
+        /**
+         * @ignore
+         */
+        PropertyComponent.prototype.initValues = function () {
+            if (this.property.displayValueType === exports.ValueType.COUNTER) {
+                this.startCallCounter();
+            }
+            else {
+                this.processedDisplayValue = this.property.displayValue;
+            }
+        };
+        /**
+         * @ignore
+         */
+        PropertyComponent.prototype.startCallCounter = function () {
+            var _this = this;
+            if (this._timerId == null) {
+                this._timerId = window.setInterval(function () {
+                    var callStartTime = _this.property.displayValue;
+                    var currentTime = new Date().getTime() / 1000;
+                    var secondsPassed = Math.floor((currentTime) - (callStartTime / 1000));
+                    _this.processedDisplayValue = secondsToHms(secondsPassed);
+                }, 1000);
+            }
+        };
+        /**
+         * @ignore
+         */
+        PropertyComponent.prototype.ngOnDestroy = function () {
+            if (this.property.displayValueType === exports.ValueType.COUNTER) {
+                // clear the timer.
+                if (this._timerId != null) {
+                    clearInterval(this._timerId);
+                    this._timerId = null;
+                }
+            }
+        };
+        __decorate([
+            core.Input()
+        ], PropertyComponent.prototype, "statusText", void 0);
+        __decorate([
+            core.Input()
+        ], PropertyComponent.prototype, "callId", void 0);
+        __decorate([
+            core.Input()
+        ], PropertyComponent.prototype, "callType", void 0);
+        __decorate([
+            core.Input()
+        ], PropertyComponent.prototype, "property", void 0);
+        PropertyComponent = __decorate([
+            core.Component({
+                selector: 'amc-property',
+                template: "<input\r\n readonly\r\n *ngIf=\"!property.customOperations\"\r\n class=\"displayData\"\r\n tabindex=\"0\"\r\n type=\"text\"\r\n [name]=\"processedDisplayValue\"\r\n [title]=\"title || null\"\r\n [attr.aria-labelledby]=\"labelledByText || null\"\r\n [value]=\"processedDisplayValue\"/>\r\n\r\n <input\r\n  readonly\r\n  *ngIf=\"property.customOperations\"\r\n  class=\"cursor displayData\"\r\n  type=\"text\"\r\n  tabindex=\"0\"\r\n  [name]=\"processedDisplayValue\"\r\n  [title]=\"title || null\"\r\n  [value]=\"processedDisplayValue\"\r\n  [attr.aria-labelledby]=\"labelledByText || null\"\r\n  (click)=\"property.customOperations.handler(property.customOperations.eventName, property.customOperations.eventMetadata)\" />\r\n",
+                styles: ["input{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
+            })
+        ], PropertyComponent);
+        return PropertyComponent;
+    }());
 
+    var HoldtimerComponent = /** @class */ (function () {
+        function HoldtimerComponent() {
+            this.labelledByText = '';
+            this.displayTime = '00:00/00:00';
+        }
+        HoldtimerComponent.prototype.ngOnInit = function () {
+            if (this.statusText && this.callId) {
+                this.labelledByText = this.statusText + " " + this.callId;
+            }
+            else if (this.statusText) {
+                this.labelledByText = this.statusText;
+            }
+            else if (this.callId) {
+                this.labelledByText = this.callId;
+            }
+            this.startCallCounter();
+        };
+        /**
+         * @ignore
+         */
+        HoldtimerComponent.prototype.startCallCounter = function () {
+            var _this = this;
+            var pastTimeInSeconds = this.CaculatePastHoldDuration();
+            if (this._timerId == null) {
+                this._timerId = window.setInterval(function () {
+                    var currentTime = new Date().getTime() / 1000;
+                    var secondsPassedCurrentCall = Math.floor((currentTime) - (_this.holdCounterData.currentHoldStartTime / 1000));
+                    _this.displayTime = secondsToHms(secondsPassedCurrentCall) +
+                        '/' + secondsToHms(pastTimeInSeconds + secondsPassedCurrentCall);
+                }, 1000);
+            }
+        };
+        HoldtimerComponent.prototype.CaculatePastHoldDuration = function () {
+            var pastTimeInSeconds = 0;
+            if (this.holdCounterData.pastCallDurations) {
+                this.holdCounterData.pastCallDurations.forEach(function (holdTimerIterator) {
+                    pastTimeInSeconds += (holdTimerIterator.endTime - holdTimerIterator.startTime) / 1000;
+                });
+            }
+            return pastTimeInSeconds;
+        };
+        /**
+         * @ignore
+         */
+        HoldtimerComponent.prototype.ngOnDestroy = function () {
+            // clear the timer.
+            if (this._timerId != null) {
+                clearInterval(this._timerId);
+                this._timerId = null;
+            }
+        };
+        __decorate([
+            core.Input()
+        ], HoldtimerComponent.prototype, "holdCounterData", void 0);
+        __decorate([
+            core.Input()
+        ], HoldtimerComponent.prototype, "statusText", void 0);
+        __decorate([
+            core.Input()
+        ], HoldtimerComponent.prototype, "callId", void 0);
+        HoldtimerComponent = __decorate([
+            core.Component({
+                selector: 'amc-holdtimer',
+                template: "<div class=\"holdCallDurationDiv\">\r\n  <input\r\n   readonly\r\n   class=\"holdCallDurationTimer\"\r\n   name=\"HoldCallDuration/TotalHoldCallDuration\"\r\n   type=\"text\"\r\n   tabindex=\"-1\"\r\n   title=\"Hold Duration\"\r\n   [attr.aria-labelledby]=\"labelledByText || null\"\r\n   [value]=\"displayTime\">\r\n</div>\r\n",
+                styles: [".holdCallDurationTimer:focus{outline-style:none}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
+            })
+        ], HoldtimerComponent);
+        return HoldtimerComponent;
+    }());
 
+    var DurationComponent = /** @class */ (function () {
+        function DurationComponent() {
+            this.labelledByText = '';
+            this.displayTime = '00:00/00:00';
+        }
+        DurationComponent.prototype.ngOnInit = function () {
+            if (this.statusText && this.callId) {
+                this.labelledByText = this.statusText + " " + this.callId;
+            }
+            else if (this.statusText) {
+                this.labelledByText = this.statusText;
+            }
+            else if (this.callId) {
+                this.labelledByText = this.callId;
+            }
+            this.startCallCounter();
+        };
+        /**
+       * @ignore
+       */
+        DurationComponent.prototype.startCallCounter = function () {
+            var _this = this;
+            if (this._timerId == null) {
+                this._timerId = window.setInterval(function () {
+                    var callStartTime = _this.startTime;
+                    var currentTime = new Date().getTime() / 1000;
+                    var secondsPassed = Math.floor((currentTime) - (callStartTime / 1000));
+                    _this.displayTime = Math.floor(secondsPassed / 60) + ':' + ('0' + (secondsPassed % 60)).slice(-2);
+                }, 1000);
+            }
+        };
+        DurationComponent.prototype.ngOnDestroy = function () {
+            // clear the timer.
+            if (this._timerId != null) {
+                clearInterval(this._timerId);
+                this._timerId = null;
+            }
+        };
+        __decorate([
+            core.Input()
+        ], DurationComponent.prototype, "statusText", void 0);
+        __decorate([
+            core.Input()
+        ], DurationComponent.prototype, "callId", void 0);
+        __decorate([
+            core.Input()
+        ], DurationComponent.prototype, "startTime", void 0);
+        DurationComponent = __decorate([
+            core.Component({
+                selector: 'amc-duration',
+                template: "<div class=\"holdCallDurationDiv\">\r\n  <input\r\n   readonly\r\n   class=\"block durationInput\"\r\n   name=\"CallDuration\"\r\n   type=\"text\"\r\n   tabindex=\"-1\"\r\n   title=\"Call Duration\"\r\n   [value]=\"displayTime\"\r\n   [attr.aria-labelledby]=\"labelledByText || null\">\r\n</div>\r\n",
+                styles: [".durationInput:focus{outline-style:none}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
+            })
+        ], DurationComponent);
+        return DurationComponent;
+    }());
 
-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.");
-}
+    var ChatBoxComponent = /** @class */ (function () {
+        function ChatBoxComponent() {
+            this.isTyping = false;
+            this.lastCount = -1;
+            this._isAgentTyping = false;
+            this.isAgentTyping = new core.EventEmitter();
+            this.newMessage = new core.EventEmitter();
+            this.newMessageText = '';
+            this.usernameToColor = {};
+            this.colors = [
+                '#81c784',
+                '#ffab91',
+                '#f48fb1',
+                '#29b6f6',
+                '#e1bee7',
+                '#9ccc65',
+                '#ffc107',
+                '#26c6da',
+                '#cddc39',
+            ];
+            this.colorsIndex = 0;
+            this.agentColor = '#29b6f6';
+        }
+        ChatBoxComponent.prototype.ngAfterViewChecked = function () {
+            if (this.lastCount !== this.messages.length) {
+                this.lastCount = this.messages.length;
+                this.scrollToBottom();
+            }
+        };
+        ChatBoxComponent.prototype.getColor = function (message) {
+            if (message.type && message.type === exports.IChatMessageType.AGENT) {
+                return this.agentColor;
+            }
+            else if (message.username) {
+                if (!this.usernameToColor[message.username]) {
+                    this.usernameToColor[message.username] = this.colors[this.colorsIndex];
+                    this.colorsIndex = (this.colorsIndex + 1) % this.colors.length;
+                }
+                return this.usernameToColor[message.username];
+            }
+            else {
+                return this.colors[0];
+            }
+        };
+        ChatBoxComponent.prototype.shouldAlignRight = function (message) {
+            return message.type && message.type === exports.IChatMessageType.AGENT;
+        };
+        ChatBoxComponent.prototype.sendNewMessage = function () {
+            if (this.newMessageText) {
+                this.newMessage.emit(this.newMessageText);
+                this.newMessageText = '';
+            }
+        };
+        ChatBoxComponent.prototype.onNewMessageFocus = function (event) {
+            var isTyping = event && this.newMessageText.length > 0;
+            if (isTyping !== this._isAgentTyping) {
+                this._isAgentTyping = isTyping;
+                this.isAgentTyping.emit(isTyping);
+            }
+        };
+        ChatBoxComponent.prototype.onKeyup = function () {
+            var isTyping = this.newMessageText.length > 0;
+            if (isTyping !== this._isAgentTyping) {
+                this._isAgentTyping = isTyping;
+                this.isAgentTyping.emit(isTyping);
+            }
+        };
+        ChatBoxComponent.prototype.scrollToBottom = function () {
+            try {
+                this.messagesContainer.nativeElement.scrollTop = this.messagesContainer.nativeElement.scrollHeight;
+            }
+            catch (e) { }
+        };
+        __decorate([
+            core.Input()
+        ], ChatBoxComponent.prototype, "settings", void 0);
+        __decorate([
+            core.Input()
+        ], ChatBoxComponent.prototype, "isTyping", void 0);
+        __decorate([
+            core.Input()
+        ], ChatBoxComponent.prototype, "messages", void 0);
+        __decorate([
+            core.Output()
+        ], ChatBoxComponent.prototype, "isAgentTyping", void 0);
+        __decorate([
+            core.Output()
+        ], ChatBoxComponent.prototype, "newMessage", void 0);
+        __decorate([
+            core.ViewChild('MessagesContainer', { static: true })
+        ], ChatBoxComponent.prototype, "messagesContainer", void 0);
+        ChatBoxComponent = __decorate([
+            core.Component({
+                selector: 'app-chat-box',
+                template: "<div class=\"chat-box\">\r\n  <div #MessagesContainer class=\"messages\" [style.max-height]='settings.maxHeight'>\r\n    <ng-container *ngFor=\"let message of messages\">\r\n      <app-chat-message [alignRight]=\"shouldAlignRight(message)\" [message]=\"message.text\" [username]=\"message.username\"\r\n        [timestamp]=\"message.timestamp\" [image]=\"message.userIcon\" [fallbackImage]=\"settings.fallbackUserIcon\" [color]=\"getColor(message)\">\r\n      </app-chat-message>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isTyping\" class=\"typing-indicator\">\r\n      Someone is typing\r\n      <span></span>\r\n      <span></span>\r\n      <span></span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"new-message\">\r\n    <input #NewMessageText [(ngModel)]=\"newMessageText\" type=\"text\" placeholder=\"Type a message\" (focus)=\"onNewMessageFocus(true)\"\r\n      (blur)=\"onNewMessageFocus(false)\" (keydown.enter)=\"sendNewMessage()\" (keyup)='onKeyup()' [disabled]=\"settings.disableSendMessage\">\r\n    <input type=\"image\" [src]=\"settings.sendImage\" (click)=\"sendNewMessage()\" [disabled]=\"settings.disableSendMessage\">\r\n  </div>\r\n</div>\r\n",
+                styles: [".chat-box{background-color:#eceff1}.messages{padding:5px;overflow:auto;min-height:50px}.new-message{border-top:1px solid #000;display:flex;align-content:center;height:25px}.new-message input[type=text]{flex:1 1 0;background-color:#eceff1;border:none;min-width:0}.new-message input[type=image]{position:relative;top:50%;transform:translateY(-50%);height:20px;cursor:pointer}.new-message input[type=image]:disabled{opacity:.5;cursor:auto}.new-message input:focus{outline:0}.typing-indicator{font-size:1em;font-style:italic}.typing-indicator span{display:inline-block;height:10px;width:10px;border-radius:50%;background-color:#9e9e9e;margin:0 1px;opacity:.2}.typing-indicator span:nth-of-type(1){-webkit-animation:1.5s .33333s infinite blink;animation:1.5s .33333s infinite blink}.typing-indicator span:nth-of-type(2){-webkit-animation:1.5s .66666s infinite blink;animation:1.5s .66666s infinite blink}.typing-indicator span:nth-of-type(3){-webkit-animation:1.5s .99999s infinite blink;animation:1.5s .99999s infinite blink}@-webkit-keyframes blink{50%{opacity:1}}@keyframes blink{50%{opacity:1}}"]
+            })
+        ], ChatBoxComponent);
+        return ChatBoxComponent;
+    }());
 
-var InteractionComponent = /** @class */ (function () {
-    function InteractionComponent() {
-        this.minimizedChanged = new core.EventEmitter();
-        this.isAgentTyping = new core.EventEmitter();
-        this.newMessage = new core.EventEmitter();
-        this._minimized = false;
-    }
-    Object.defineProperty(InteractionComponent.prototype, "_minimized", {
-        get: function () {
-            return this.minimized;
-        },
-        set: function (value) {
-            this.minimized = value;
-            this.minimizedChanged.emit(value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    InteractionComponent.prototype.ngOnInit = function () {
-    };
-    InteractionComponent.prototype.minimize = function () {
-        this._minimized = true;
-    };
-    InteractionComponent.prototype.maximize = function () {
-        this._minimized = false;
-    };
-    InteractionComponent.prototype.isConferenceCall = function () {
-        if (this.interaction.parties && this.interaction.parties.length > 1) {
-            return true;
-        }
-        return false;
-    };
-    InteractionComponent.prototype.collapseKeypress = function (event) {
-        if (event.code === 'Enter') {
-            this.minimize();
-        }
-    };
-    InteractionComponent.prototype.expandKeypress = function (event) {
-        if (event.code === 'Enter') {
-            this.maximize();
-        }
-    };
-    return InteractionComponent;
-}());
-InteractionComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'amc-interaction',
-                template: "<div class=\"AnswerCallFocused\">\n  <div class=\"editor callHeaderTop\">\n    <img class=\"statusImage\" aria-hidden=\"true\" [src]=\"interaction.UIHeadersData.statusUrl\" (click)=\"interaction.UIHeadersData.focusHandler.handler(interaction.UIHeadersData.focusHandler.operationName, interaction.UIHeadersData.focusHandler.operationMetadata)\" />\n    <label class=\"statusText\">\n      <b [id]=\"interaction.UIHeadersData.statusText\">{{ interaction.UIHeadersData.statusText }}</b>\n    </label>\n    <label class=\"verticalDivider\">|</label>\n    <label class=\"directionText\" *ngIf=\"!interaction.UIHeadersData.displayHoldCounter\">{{ interaction.UIHeadersData.directionText }}</label>\n    <div class=\"holdCallDurationDiv\" *ngIf=\"interaction.UIHeadersData.displayHoldCounter\">\n      <amc-holdtimer [holdCounterData]=\"interaction.UIHeadersData.holdCounterData\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\"></amc-holdtimer>\n    </div>\n    <img class=\"ViewExpandImage\" [src]=\"interaction.UIHeadersData.minimizeUrl\" alt=\"Minimize\" (click)=\"minimize()\" (keypress)=\"collapseKeypress($event)\" *ngIf=\"!_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"collapse Call Section\">\n    <img class=\"ViewCollapseImage\" [src]=\"interaction.UIHeadersData.maximizeUrl\" alt=\"Maximize\" (click)=\"maximize()\" (keypress)=\"expandKeypress($event)\" *ngIf=\"_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"expand Call Section\">\n    <div class=\"DurationDiv\" *ngIf=\"interaction.displayCallTimer\">\n      <amc-duration [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [startTime]=\"interaction.startTime\"></amc-duration>\n    </div>\n  </div>\n\n  <div *ngIf=\"!_minimized\">\n\n    <div *ngIf=\"!isConferenceCall()\">\n      <div class=\"editor phoneNumberContainer\">\n        <input class=\"callImage\" type=\"image\" [src]=\"interaction.subheaderData.image.href\" [title]=\"interaction.subheaderData.tooltip || ''\" tabindex=\"-1\">\n        <input class=\"editor phoneNumberValue\" [attr.aria-labelledby]=\"interaction.UIHeadersData.statusText + ' ' + interaction.subheaderData.value\" readonly type=\"text\" [value]=\"interaction.subheaderData.value\" [id]=\"interaction.subheaderData.value\" tabindex=\"-1\">\n      </div>\n\n      <div class=\"cadSection\">\n        <ng-container *ngFor=\"let property of interaction.properties\">\n          <ng-container *ngIf=\"property.visible\">\n            <label class=\"col1\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\n            <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let property of interaction.associatedData\">\n          <ng-container *ngIf=\"property.visible\">\n            <div class=\"editor displayDiv\">\n              <label class=\"displayLabels\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <app-chat-box *ngIf=\"interaction.chat\" [isTyping]=\"interaction.chat.isCustomerTyping\" [settings]=\"interaction.chat.settings\"\n        [messages]=\"interaction.chat.messages\" (isAgentTyping)=\"isAgentTyping.emit($event)\" (newMessage)=\"newMessage.emit($event)\"></app-chat-box>\n\n      <div [id]='interaction.interactionId'> </div>\n      <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\n    </div>\n\n    <div *ngIf=\"isConferenceCall()\">\n      <div *ngFor=\"let party of interaction.parties\">\n        <div class=\"editor phoneNumberContainer\">\n          <input class=\"callImage\" type=\"image\" [src]=\"party.header.image.href\" [title]=\"party.header.tooltip || ''\" tabindex=\"-1\">\n          <input class=\"editor phoneNumberValue\" readonly type=\"text\" [value]=\"party.header.value\" tabindex=\"-1\">\n        </div>\n\n        <div class=\"grid-container\">\n          <ng-container *ngFor=\"let property of party.properties\">\n            <ng-container *ngIf=\"property.visible\">\n              <label class=\"col1\" [title]=\"property.displayKey\">{{ property.displayKey }}</label>\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" class=\"col2\" [property]=\"property\"> </amc-property>\n            </ng-container>\n          </ng-container>\n        </div>\n        <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" [operations]=\"party.operations\"></amc-operation>\n        <div class=\"AnswerCallFocused\"></div>\n      </div>\n      <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\n    </div>\n\n  </div>\n</div>\n",
-                styles: [":host{display:block}.phoneNumberContainer{margin-left:5px!important;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.cadSection{margin-bottom:5px}.grid-container{margin-left:5px;display:grid;grid-template-columns:auto 1fr;grid-column-gap:10px;max-width:calc(100% - 5px);overflow:hidden}.col1{grid-column:1/2}.col2{grid-column:2/3}.ViewExpandImage{margin:3px}.ViewExpandImage:focus{outline:#3296da solid 2px;outline-offset:0}.ViewCollapseImage{margin:3px}.ViewCollapseImage:focus{outline:#3296da solid 2px;outline-offset:0}.callImage{cursor:default}.phoneNumberValue:focus{outline-style:none}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
-            },] },
-];
-InteractionComponent.ctorParameters = function () { return []; };
-InteractionComponent.propDecorators = {
-    interaction: [{ type: core.Input }],
-    minimizedChanged: [{ type: core.Output }],
-    isAgentTyping: [{ type: core.Output }],
-    newMessage: [{ type: core.Output }]
-};
-var ScenarioComponent = /** @class */ (function () {
-    function ScenarioComponent() {
-        this.minimizedChanged = new core.EventEmitter();
-        this.isAgentTyping = new core.EventEmitter();
-        this.newMessage = new core.EventEmitter();
-        this.afterViewChecked = new core.EventEmitter();
-    }
-    ScenarioComponent.prototype.ngAfterViewChecked = function () {
-        this.afterViewChecked.emit();
-    };
-    ScenarioComponent.prototype.onMinimizedChanged = function () {
-        this.minimizedChanged.emit();
-    };
-    return ScenarioComponent;
-}());
-ScenarioComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'amc-scenario',
-                template: "<ng-container *ngIf=\"scenario && scenario.interactions\">\n  <amc-interaction *ngFor=\"let interaction of scenario.interactions\" [interaction]=\"interaction\"\n    (minimizedChanged)=\"onMinimizedChanged()\" (isAgentTyping)=\"isAgentTyping.emit($event)\"\n    (newMessage)=\"newMessage.emit($event)\">\n  </amc-interaction>\n</ng-container>\n",
-                styles: ["", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
-            },] },
-];
-ScenarioComponent.ctorParameters = function () { return []; };
-ScenarioComponent.propDecorators = {
-    scenario: [{ type: core.Input }],
-    minimizedChanged: [{ type: core.Output }],
-    isAgentTyping: [{ type: core.Output }],
-    newMessage: [{ type: core.Output }],
-    afterViewChecked: [{ type: core.Output }]
-};
-var OperationComponent = /** @class */ (function () {
-    function OperationComponent() {
-        this.labelledByText = '';
-        this.describedByText = '';
-    }
-    OperationComponent.prototype.ngOnInit = function () {
-        if (this.statusText && this.callType) {
-            this.describedByText = this.statusText + " " + this.callType;
-        }
-        else if (this.statusText) {
-            this.describedByText = this.statusText;
-        }
-        else if (this.callType) {
-            this.describedByText = this.callType;
-        }
-        if (this.callId) {
-            this.labelledByText = this.callId;
-        }
-    };
-    OperationComponent.prototype.operationKeypress = function (event, operation) {
-        if (event.code === 'Enter') {
-            operation.handler(operation.operationName, operation.operationMetadata);
-        }
-    };
-    return OperationComponent;
-}());
-OperationComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'amc-operation',
-                template: "<div class=\"callOptions\">\n    <img\n     class=\"AnswerCallImages\"\n     tabindex=\"0\"\n     role=\"button\"\n     attr.aria-label=\"{{ operation.title }}\"\n     *ngFor=\"let operation of operations\"\n     [title]=\"operation.title\"\n     [src]=\"operation.icon\"\n     [attr.accesskey]=\"operation.accesskey || null\"\n     [attr.aria-labelledby]=\"labelledByText || null\"\n     [attr.aria-describedby]=\"describedByText || null\"\n     (click)=\"operation.handler(operation.operationName, operation.operationMetadata)\"\n     (keypress)=\"operationKeypress($event, operation)\"/>\n</div>\n",
-                styles: [".AnswerCallImages:focus{outline:#3296da solid 2px;outline-offset:1px}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
-            },] },
-];
-OperationComponent.ctorParameters = function () { return []; };
-OperationComponent.propDecorators = {
-    statusText: [{ type: core.Input }],
-    callId: [{ type: core.Input }],
-    callType: [{ type: core.Input }],
-    operations: [{ type: core.Input }]
-};
-var IChatMessageType = {
-    AGENT: 'AGENT',
-    OTHER_PERSON: 'OTHER_PERSON',
-    INFORMATION: 'INFORMATION',
-};
-var Property = /** @class */ (function () {
-    function Property(key, value, visible, valueType, customOperation) {
-        var _this = this;
-        this.displayOperation = (function () {
-            _this.displayKey = _this.key;
-            _this.displayValue = _this.value;
-        });
-        this.key = key;
-        this.value = value;
-        visible != null ? (this.visible = visible) : (this.visible = true);
-        valueType != null
-            ? (this.displayValueType = valueType)
-            : (this.displayValueType = ValueType.STRING);
-        this.customOperations = customOperation;
-        this.displayOperation();
-    }
-    return Property;
-}());
-var ValueType = {
-    STRING: 0,
-    COUNTER: 1,
-};
-ValueType[ValueType.STRING] = 'STRING';
-ValueType[ValueType.COUNTER] = 'COUNTER';
-function secondsToHms(seconds_in) {
-    seconds_in = Number(seconds_in);
-    var h = Math.floor(seconds_in / 3600);
-    var m = Math.floor(seconds_in % 3600 / 60);
-    var s = Math.floor(seconds_in % 3600 % 60);
-    var hDisplay = h > 0 ? h.toString() + ':' : '';
-    var mDisplay = m > 0 ? ('0' + m.toString()).slice(-2) + ':' : '00:';
-    var sDisplay = s > 0 ? ('0' + s.toString()).slice(-2) : '00';
-    return hDisplay + mDisplay + sDisplay;
-}
-var PropertyComponent = /** @class */ (function () {
-    function PropertyComponent() {
-        this.labelledByText = '';
-        this.title = '';
-        this._timerId = null;
-        this.processedDisplayValue = '';
-    }
-    PropertyComponent.prototype.ngOnInit = function () {
-        if (this.statusText && this.callType) {
-            this.labelledByText = this.statusText + " " + this.callType;
-        }
-        else if (this.statusText) {
-            this.labelledByText = this.statusText;
-        }
-        else if (this.callType) {
-            this.labelledByText = this.callType;
-        }
-        if (this.callType && this.callId) {
-            this.title = this.callType + " " + this.callId;
-        }
-        else if (this.callType) {
-            this.title = this.callType;
-        }
-        else if (this.callId) {
-            this.title = this.callId;
-        }
-        this.initValues();
-    };
-    PropertyComponent.prototype.initValues = function () {
-        if (this.property.displayValueType === ValueType.COUNTER) {
-            this.startCallCounter();
-        }
-        else {
-            this.processedDisplayValue = this.property.displayValue;
-        }
-    };
-    PropertyComponent.prototype.startCallCounter = function () {
-        var _this = this;
-        if (this._timerId == null) {
-            this._timerId = window.setInterval((function () {
-                var callStartTime = _this.property.displayValue;
-                var currentTime = new Date().getTime() / 1000;
-                var secondsPassed = Math.floor((currentTime) - (callStartTime / 1000));
-                _this.processedDisplayValue = secondsToHms(secondsPassed);
-            }), 1000);
-        }
-    };
-    PropertyComponent.prototype.ngOnDestroy = function () {
-        if (this.property.displayValueType === ValueType.COUNTER) {
-            if (this._timerId != null) {
-                clearInterval(this._timerId);
-                this._timerId = null;
-            }
-        }
-    };
-    return PropertyComponent;
-}());
-PropertyComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'amc-property',
-                template: "<input\n readonly\n *ngIf=\"!property.customOperations\"\n class=\"displayData\"\n tabindex=\"0\"\n type=\"text\"\n [name]=\"processedDisplayValue\"\n [title]=\"title || null\"\n [attr.aria-labelledby]=\"labelledByText || null\"\n [value]=\"processedDisplayValue\"/>\n\n <input\n  readonly\n  *ngIf=\"property.customOperations\"\n  class=\"cursor displayData\"\n  type=\"text\"\n  tabindex=\"0\"\n  [name]=\"processedDisplayValue\"\n  [title]=\"title || null\"\n  [value]=\"processedDisplayValue\"\n  [attr.aria-labelledby]=\"labelledByText || null\"\n  (click)=\"property.customOperations.handler(property.customOperations.eventName, property.customOperations.eventMetadata)\" />\n",
-                styles: ["input{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
-            },] },
-];
-PropertyComponent.ctorParameters = function () { return []; };
-PropertyComponent.propDecorators = {
-    statusText: [{ type: core.Input }],
-    callId: [{ type: core.Input }],
-    callType: [{ type: core.Input }],
-    property: [{ type: core.Input }]
-};
-var HoldtimerComponent = /** @class */ (function () {
-    function HoldtimerComponent() {
-        this.labelledByText = '';
-        this.displayTime = '00:00/00:00';
-    }
-    HoldtimerComponent.prototype.ngOnInit = function () {
-        if (this.statusText && this.callId) {
-            this.labelledByText = this.statusText + " " + this.callId;
-        }
-        else if (this.statusText) {
-            this.labelledByText = this.statusText;
-        }
-        else if (this.callId) {
-            this.labelledByText = this.callId;
-        }
-        this.startCallCounter();
-    };
-    HoldtimerComponent.prototype.startCallCounter = function () {
-        var _this = this;
-        var pastTimeInSeconds = this.CaculatePastHoldDuration();
-        if (this._timerId == null) {
-            this._timerId = window.setInterval((function () {
-                var currentTime = new Date().getTime() / 1000;
-                var secondsPassedCurrentCall = Math.floor((currentTime) - (_this.holdCounterData.currentHoldStartTime / 1000));
-                _this.displayTime = secondsToHms(secondsPassedCurrentCall) +
-                    '/' + secondsToHms(pastTimeInSeconds + secondsPassedCurrentCall);
-            }), 1000);
-        }
-    };
-    HoldtimerComponent.prototype.CaculatePastHoldDuration = function () {
-        var pastTimeInSeconds = 0;
-        if (this.holdCounterData.pastCallDurations) {
-            this.holdCounterData.pastCallDurations.forEach((function (holdTimerIterator) {
-                pastTimeInSeconds += (holdTimerIterator.endTime - holdTimerIterator.startTime) / 1000;
-            }));
-        }
-        return pastTimeInSeconds;
-    };
-    HoldtimerComponent.prototype.ngOnDestroy = function () {
-        if (this._timerId != null) {
-            clearInterval(this._timerId);
-            this._timerId = null;
-        }
-    };
-    return HoldtimerComponent;
-}());
-HoldtimerComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'amc-holdtimer',
-                template: "<div class=\"holdCallDurationDiv\">\n  <input\n   readonly\n   class=\"holdCallDurationTimer\"\n   name=\"HoldCallDuration/TotalHoldCallDuration\"\n   type=\"text\"\n   tabindex=\"-1\"\n   title=\"Hold Duration\"\n   [attr.aria-labelledby]=\"labelledByText || null\"\n   [value]=\"displayTime\">\n</div>\n",
-                styles: [".holdCallDurationTimer:focus{outline-style:none}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
-            },] },
-];
-HoldtimerComponent.ctorParameters = function () { return []; };
-HoldtimerComponent.propDecorators = {
-    holdCounterData: [{ type: core.Input }],
-    statusText: [{ type: core.Input }],
-    callId: [{ type: core.Input }]
-};
-var DurationComponent = /** @class */ (function () {
-    function DurationComponent() {
-        this.labelledByText = '';
-        this.displayTime = '00:00/00:00';
-    }
-    DurationComponent.prototype.ngOnInit = function () {
-        if (this.statusText && this.callId) {
-            this.labelledByText = this.statusText + " " + this.callId;
-        }
-        else if (this.statusText) {
-            this.labelledByText = this.statusText;
-        }
-        else if (this.callId) {
-            this.labelledByText = this.callId;
-        }
-        this.startCallCounter();
-    };
-    DurationComponent.prototype.startCallCounter = function () {
-        var _this = this;
-        if (this._timerId == null) {
-            this._timerId = window.setInterval((function () {
-                var callStartTime = _this.startTime;
-                var currentTime = new Date().getTime() / 1000;
-                var secondsPassed = Math.floor((currentTime) - (callStartTime / 1000));
-                _this.displayTime = Math.floor(secondsPassed / 60) + ':' + ('0' + (secondsPassed % 60)).slice(-2);
-            }), 1000);
-        }
-    };
-    DurationComponent.prototype.ngOnDestroy = function () {
-        if (this._timerId != null) {
-            clearInterval(this._timerId);
-            this._timerId = null;
-        }
-    };
-    return DurationComponent;
-}());
-DurationComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'amc-duration',
-                template: "<div class=\"holdCallDurationDiv\">\n  <input\n   readonly\n   class=\"block durationInput\"\n   name=\"CallDuration\"\n   type=\"text\"\n   tabindex=\"-1\"\n   title=\"Call Duration\"\n   [value]=\"displayTime\"\n   [attr.aria-labelledby]=\"labelledByText || null\">\n</div>\n",
-                styles: [".durationInput:focus{outline-style:none}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
-            },] },
-];
-DurationComponent.ctorParameters = function () { return []; };
-DurationComponent.propDecorators = {
-    statusText: [{ type: core.Input }],
-    callId: [{ type: core.Input }],
-    startTime: [{ type: core.Input }]
-};
-var ChatBoxComponent = /** @class */ (function () {
-    function ChatBoxComponent() {
-        this.isTyping = false;
-        this.lastCount = -1;
-        this._isAgentTyping = false;
-        this.isAgentTyping = new core.EventEmitter();
-        this.newMessage = new core.EventEmitter();
-        this.newMessageText = '';
-        this.usernameToColor = {};
-        this.colors = [
-            '#81c784',
-            '#ffab91',
-            '#f48fb1',
-            '#29b6f6',
-            '#e1bee7',
-            '#9ccc65',
-            '#ffc107',
-            '#26c6da',
-            '#cddc39',
-        ];
-        this.colorsIndex = 0;
-        this.agentColor = '#29b6f6';
-    }
-    ChatBoxComponent.prototype.ngAfterViewChecked = function () {
-        if (this.lastCount !== this.messages.length) {
-            this.lastCount = this.messages.length;
-            this.scrollToBottom();
-        }
-    };
-    ChatBoxComponent.prototype.getColor = function (message) {
-        if (message.type && message.type === IChatMessageType.AGENT) {
-            return this.agentColor;
-        }
-        else if (message.username) {
-            if (!this.usernameToColor[message.username]) {
-                this.usernameToColor[message.username] = this.colors[this.colorsIndex];
-                this.colorsIndex = (this.colorsIndex + 1) % this.colors.length;
-            }
-            return this.usernameToColor[message.username];
-        }
-        else {
-            return this.colors[0];
-        }
-    };
-    ChatBoxComponent.prototype.shouldAlignRight = function (message) {
-        return message.type && message.type === IChatMessageType.AGENT;
-    };
-    ChatBoxComponent.prototype.sendNewMessage = function () {
-        if (this.newMessageText) {
-            this.newMessage.emit(this.newMessageText);
-            this.newMessageText = '';
-        }
-    };
-    ChatBoxComponent.prototype.onNewMessageFocus = function (event) {
-        var isTyping = event && this.newMessageText.length > 0;
-        if (isTyping !== this._isAgentTyping) {
-            this._isAgentTyping = isTyping;
-            this.isAgentTyping.emit(isTyping);
-        }
-    };
-    ChatBoxComponent.prototype.onKeyup = function () {
-        var isTyping = this.newMessageText.length > 0;
-        if (isTyping !== this._isAgentTyping) {
-            this._isAgentTyping = isTyping;
-            this.isAgentTyping.emit(isTyping);
-        }
-    };
-    ChatBoxComponent.prototype.scrollToBottom = function () {
-        try {
-            this.messagesContainer.nativeElement.scrollTop = this.messagesContainer.nativeElement.scrollHeight;
-        }
-        catch (e) { }
-    };
-    return ChatBoxComponent;
-}());
-ChatBoxComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'app-chat-box',
-                template: "<div class=\"chat-box\">\n  <div #MessagesContainer class=\"messages\" [style.max-height]='settings.maxHeight'>\n    <ng-container *ngFor=\"let message of messages\">\n      <app-chat-message [alignRight]=\"shouldAlignRight(message)\" [message]=\"message.text\" [username]=\"message.username\"\n        [timestamp]=\"message.timestamp\" [image]=\"message.userIcon\" [fallbackImage]=\"settings.fallbackUserIcon\" [color]=\"getColor(message)\">\n      </app-chat-message>\n    </ng-container>\n\n    <div *ngIf=\"isTyping\" class=\"typing-indicator\">\n      Someone is typing\n      <span></span>\n      <span></span>\n      <span></span>\n    </div>\n  </div>\n\n  <div class=\"new-message\">\n    <input #NewMessageText [(ngModel)]=\"newMessageText\" type=\"text\" placeholder=\"Type a message\" (focus)=\"onNewMessageFocus(true)\"\n      (blur)=\"onNewMessageFocus(false)\" (keydown.enter)=\"sendNewMessage()\" (keyup)='onKeyup()' [disabled]=\"settings.disableSendMessage\">\n    <input type=\"image\" [src]=\"settings.sendImage\" (click)=\"sendNewMessage()\" [disabled]=\"settings.disableSendMessage\">\n  </div>\n</div>\n",
-                styles: [".chat-box{background-color:#eceff1}.messages{padding:5px;overflow:auto;min-height:50px}.new-message{border-top:1px solid #000;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;height:25px}.new-message input[type=text]{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;background-color:#eceff1;border:none;min-width:0}.new-message input[type=image]{position:relative;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:20px;cursor:pointer}.new-message input[type=image]:disabled{opacity:.5;cursor:auto}.new-message input:focus{outline:0}.typing-indicator{font-size:1em;font-style:italic}.typing-indicator span{display:inline-block;height:10px;width:10px;border-radius:50%;background-color:#9e9e9e;margin:0 1px;opacity:.2}.typing-indicator span:nth-of-type(1){-webkit-animation:1.5s .33333s infinite blink;animation:1.5s .33333s infinite blink}.typing-indicator span:nth-of-type(2){-webkit-animation:1.5s .66666s infinite blink;animation:1.5s .66666s infinite blink}.typing-indicator span:nth-of-type(3){-webkit-animation:1.5s .99999s infinite blink;animation:1.5s .99999s infinite blink}@-webkit-keyframes blink{50%{opacity:1}}@keyframes blink{50%{opacity:1}}"],
-            },] },
-];
-ChatBoxComponent.ctorParameters = function () { return []; };
-ChatBoxComponent.propDecorators = {
-    settings: [{ type: core.Input }],
-    isTyping: [{ type: core.Input }],
-    messages: [{ type: core.Input }],
-    isAgentTyping: [{ type: core.Output }],
-    newMessage: [{ type: core.Output }],
-    messagesContainer: [{ type: core.ViewChild, args: ['MessagesContainer',] }]
-};
-var ChatMessageComponent = /** @class */ (function () {
-    function ChatMessageComponent() {
-        this.alignRight = false;
-    }
-    ChatMessageComponent.prototype.ngOnInit = function () {
-    };
-    return ChatMessageComponent;
-}());
-ChatMessageComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'app-chat-message',
-                template: "<div [class]=\"alignRight? 'message right-message' : 'message left-message'\">\n  <div class=\"message-header\">\n    <img *ngIf=\"image\" class=\"image\" [src]=\"image\" (error)=\"image = fallbackImage\" [style.border-color]=\"color\" />\n    <span *ngIf=\"username\" class=\"username\">{{username}}</span>\n    <span *ngIf=\"timestamp\" class=\"timestamp\">{{timestamp}}</span>\n  </div>\n\n  <div class=\"message-body-container\">\n    <div>\n      <div class=\"message-body\" [style.background-color]=\"color\" [style.border-color]=\"color\">\n        <span [innerHTML]=\"message\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n",
-                styles: [":host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.message-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-text-emphasis:none;text-emphasis:none;font-style:italic;font-size:.7em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:.5em}.message-header .image{height:30px;border-radius:50%;border:2px solid red}.message-header .username{font-weight:700}.right-message>.message-header{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;margin-right:1px}.right-message>.message-header .image,.right-message>.message-header .username{margin-left:5px}.left-message>.message-header{margin-left:1px}.left-message>.message-header .image,.left-message>.message-header .username{margin-right:5px}.message-body-container{display:-webkit-box;display:-ms-flexbox;display:flex}.right-message>.message-body-container{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.message-body{display:inline-block;position:relative;border-radius:.4em;padding:3px;font-style:normal;font-size:1em;text-align:start;min-width:2em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.left-message .message-body:after{content:\"\";position:absolute;left:.8em;top:-.4em;border-bottom:.4em solid #000;border-bottom-color:inherit;border-left:.4em solid transparent;border-right:.4em solid transparent}.right-message .message-body:after{content:\"\";position:absolute;right:.8em;top:-.4em;border-bottom:.4em solid #000;border-bottom-color:inherit;border-left:.4em solid transparent;border-right:.4em solid transparent}"]
-            },] },
-];
-ChatMessageComponent.ctorParameters = function () { return []; };
-ChatMessageComponent.propDecorators = {
-    message: [{ type: core.Input }],
-    alignRight: [{ type: core.Input }],
-    username: [{ type: core.Input }],
-    color: [{ type: core.Input }],
-    timestamp: [{ type: core.Input }],
-    image: [{ type: core.Input }],
-    fallbackImage: [{ type: core.Input }]
-};
-var DispositionComponent = /** @class */ (function () {
-    function DispositionComponent() {
-        this.dispositionEmitter = new core.EventEmitter();
-        this.selectedDispositionValue = '';
-        this.dispositionName = '';
-    }
-    DispositionComponent.prototype.ngOnInit = function () {
-        var e_1, _a;
-        try {
-            for (var _b = __values(this.disposition.dispositionMetadata), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var metadata = _c.value;
-                if (metadata.key === 'callId') {
-                    this.dispositionName = "disposition_" + metadata.value;
-                    break;
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        if (this.disposition.checkedDisposition) {
-            this.selectedDispositionValue = this.disposition.checkedDisposition;
-        }
-    };
-    DispositionComponent.prototype.submitDisposition = function () {
-        var selectedDisposition = {
-            dispositionId: this.selectedDispositionValue,
-            dispositionName: this.disposition.disposition.get(this.selectedDispositionValue),
-            dispositionMetadata: this.disposition.dispositionMetadata
-        };
-        this.dispositionEmitter.emit(selectedDisposition);
-    };
-    DispositionComponent.prototype.selectAndSubmitDisposition = function (event, dispositionKey) {
-        if (event.code === 'Enter') {
-            this.selectedDispositionValue = dispositionKey;
-            this.submitDisposition();
-        }
-    };
-    return DispositionComponent;
-}());
-DispositionComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'amc-disposition',
-                template: "<div class=\"disposition-container\">\n  <div class=\"header-container\">\n      <label class=\"disposition-header\" attr.aria-label=\"set disposition\">{{disposition.dispositionHeader}}</label>\n  </div>\n\n  <div class=\"dispositions-container\">\n      <div class=\"disposition\" *ngFor=\"let disp of disposition.disposition | keyvalue; let i = index\">\n        <label\n         class=\"disposition-label\"\n         tabindex=\"0\"\n         [id]=\"disp.key\"\n         [ngClass]=\"{'disposition-label-selected' : selectedDispositionValue === disp.key, 'first-disposition': i === 0}\"\n         (keypress)=\"selectAndSubmitDisposition($event, disp.key)\">\n\n          <input\n           class=\"disposition-input\"\n           type=\"radio\"\n           value=\"{{disp.key}}\"\n           tabindex=\"-1\"\n           attr.aria-label=\"{{disp.value}}\"\n           [required]=\"!selectedDispositionValue\"\n           [name]=\"dispositionName\"\n           (change)=\"submitDisposition()\"\n           [(ngModel)]=\"selectedDispositionValue\">\n\n          {{disp.value}}\n        </label>\n      </div>\n  </div>\n</div>\n",
-                styles: [".disposition-container{border:1px solid #939598;white-space:nowrap;font-family:Arial;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;text-overflow:ellipsis;position:relative;font-size:.9em;max-height:180px;overflow-x:hidden;overflow-y:hidden}.header-container{border-bottom:1px solid #939598;background-color:#f4f5fb;width:100%;white-space:nowrap;height:28px;position:sticky;overflow-x:hidden;overflow-y:hidden}.disposition-header{margin-top:auto;margin-left:7px;padding:5px;white-space:nowrap;text-overflow:ellipsis;font-weight:700;font-size:.9em;font-family:Arial;overflow-x:hidden}.disposition{margin-left:5px;padding-left:5px;white-space:nowrap}.disposition-label{text-overflow:ellipsis;font-weight:400;white-space:nowrap;font-size:.9em;overflow-x:hidden}.disposition-label-selected{text-overflow:ellipsis;font-weight:700;white-space:nowrap;font-size:.9em}.dispositions-container{padding:3px;overflow-y:scroll;max-height:150px}.disposition-label:focus{outline:#3296da solid 2px;outline-offset:5px}.first-disposition{margin-top:5px}"]
-            },] },
-];
-DispositionComponent.ctorParameters = function () { return []; };
-DispositionComponent.propDecorators = {
-    disposition: [{ type: core.Input }],
-    dispositionEmitter: [{ type: core.Output }]
-};
-var ActivityComponent = /** @class */ (function () {
-    function ActivityComponent() {
-        this.ActivitySave = new core.EventEmitter();
-        this.OnNameSelectChange = new core.EventEmitter();
-        this.OnRelatedToChange = new core.EventEmitter();
-        this.OnSubjectChange = new core.EventEmitter();
-        this.OnCallNotesChange = new core.EventEmitter();
-        this.isActivityMaximized = true;
-    }
-    ActivityComponent.prototype.ngOnInit = function () {
-    };
-    ActivityComponent.prototype.onNameSelectChange = function (event) {
-        this.activity.WhoObject = this.getWho(event.currentTarget.value);
-        this.OnNameSelectChange.emit(this.activity);
-    };
-    ActivityComponent.prototype.parseWhoObject = function (whoObject) {
-        return whoObject.objectType + ': ' + whoObject.objectName;
-    };
-    ActivityComponent.prototype.parseWhatObject = function (whatObject) {
-        return whatObject.objectType + ': ' + whatObject.objectName;
-    };
-    ActivityComponent.prototype.onRelatedToChange = function (event) {
-        this.activity.WhatObject = this.getWhat(event.currentTarget.value);
-        this.OnRelatedToChange.emit(this.activity);
-    };
-    ActivityComponent.prototype.onSubjectChange = function (event) {
-        this.activity.Subject = event.srcElement.value;
-        this.OnSubjectChange.emit(this.activity);
-    };
-    ActivityComponent.prototype.onCallNotesChange = function (event) {
-        this.activity.Subject = event.srcElement.value.trim();
-        this.OnCallNotesChange.emit(this.activity);
-    };
-    ActivityComponent.prototype.getWho = function (id) {
-        for (var i = 0; i < this.activity.whoList.length; i++) {
-            if (this.activity.whoList[i].objectId === id) {
-                return this.activity.whoList[i];
-            }
-        }
-    };
-    ActivityComponent.prototype.getWhat = function (id) {
-        for (var i = 0; i < this.activity.whatList.length; i++) {
-            if (this.activity.whatList[i].objectId === id) {
-                return this.activity.whatList[i];
-            }
-        }
-    };
-    ActivityComponent.prototype.loadQuickComment = function (value) {
-        this.activity.Description = this.activity.Description + this.activity.quickCommentList[value];
-    };
-    ActivityComponent.prototype.activitySave = function (clearActivityFields) {
-        this.ActivitySave.emit(this.activity);
-    };
-    return ActivityComponent;
-}());
-ActivityComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'app-activity',
-                template: "<div *ngIf=\"isActivityMaximized\" class=\"callDisplay\">\n  <div class=\"editor callHeader\">\n    <label class=\"headerLabel\">\n      <b>Activity Information</b>\n    </label>\n    <img class=\"ViewResizeImage\" src=\"/assets/images/section_collapse.png\" (click)=\"isActivityMaximized = false\" title=\"Collapse\">\n  </div>\n  <div class=\"callBody\">\n    <div class=\"activityFields\">\n      <form>\n        <div class=\"editor displayDiv\">\n          <label class=\"displayLabels\" title=\"Call From\">{{activity.NameFieldName}}</label>\n          <select class=\"dropDownListStyle displayData\" data-resetperactivity=\"false\" (change)=\"onNameSelectChange($event)\">\n            <option *ngFor=\"let who of activity.whoList\" value=\"{{who.objectId}}\">{{parseWhoObject(who)}}</option>\n          </select>\n        </div>\n        <div class=\"editor displayDiv\">\n          <label class=\"displayLabels\" title=\"Related To\">{{activity.RelatedToFieldName}}</label>\n          <select class=\"dropDownListStyle displayData\" (change)=\"onRelatedToChange($event)\" data-resetperactivity=\"false\">\n            <option *ngFor=\"let what of activity.whatList\" value=\"{{what.objectId}}\">{{parseWhatObject(what)}}</option>\n          </select>\n        </div>\n        <div class=\"editor displayDiv\">\n          <label class=\"displayLabels\" title=\"Subject\">{{activity.SubjectFieldName}}</label>\n          <input class=\"activitySubjectTextBoxStyle displayData\" (change)=\"onSubjectChange($event)\" title=\"{{activity.Subject}}\"\n            type=\"text\" value=\"{{activity.Subject}}\">\n        </div>\n        <div class=\"editor displayDiv\">\n          <div class=\"callNotesContainer\">\n            <div class=\"textAreaDiv\">\n              <textarea value=\"{{activity.Description}}\" placeholder=\"Click to add a comment\" class=\"activityCommentsTextBoxStyle\"\n                (change)=\"onCallNotesChange($event)\" cols=\"20\" rows=\"2\" title=\"\"></textarea>\n            </div>\n            <div class=\"notesButtonBorder\">\n              <div class=\"commentsButtonDiv\">\n                <div class=\"quickCommentsDiv\">\n                  <input *ngFor=\"let quickComment of activity.quickCommentList ; let i = index;\" class=\"quickNotesBotton\" type=\"button\"\n                    value=\"{{i+1}}\" (click)=\"loadQuickComment(i)\" title=\"{{quickComment}}\">\n                </div>\n                <div class=\"submitDiv\">\n                  <input class=\"submitButton\" type=\"button\" value=\"Submit\" (click)=\"activitySave(false)\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"!isActivityMaximized\" class=\"callDisplay\">\n  <div class=\"editor callHeader\">\n    <label class=\"headerLabel\">\n      <b>Activity Information</b>\n    </label>\n    <img class=\"ViewResizeImage\" src=\"assets/images/section_expand.png\" (click)=\"isActivityMaximized = true\" title=\"Expand\">\n  </div>\n",
-                styles: [".callDisplay{display:grid;margin-bottom:8px;background-color:#fff}.editor{font-size:.9em;width:70%;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important}.headerLabel{margin-left:10px}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.callBody{border-top:0;position:relative}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.displayLabels{margin-left:5px;width:25%;margin-right:2px}.displayData{width:70%}.dropDownListStyle{border:1px solid #939598!important;border-radius:3px!important;width:71%!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 5px 0 0;cursor:pointer}.activitySubjectTextBoxStyle{border:1px solid #939598!important;border-radius:3px!important;width:71%!important;height:20px!important;text-align:left!important;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0 5px 0 0;padding-left:2px}.activityCommentsTextBoxStyle{border:none;color:#333!important;text-align:left!important;margin:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;resize:none;width:100%;height:95px}.notesButtonBorder{background-color:#fff;border-left:1px solid #939598;border-bottom:1px solid #939598;border-right:1px solid #939598;border-bottom-left-radius:3px!important;border-bottom-right-radius:3px!important;height:auto}.commentsButtonDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.quickNotesBotton{background-color:#1e72ba;border:0;color:#fff;height:70%;width:20px;margin:2px;outline:0;font-size:70%}.quickCommentsDiv{text-align:left;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;display:flex;margin:2px}.submitDiv{text-align:right;padding-right:4px}.submitButton{border:0;float:right;margin-top:2px;outline:0;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}"]
-            },] },
-];
-ActivityComponent.ctorParameters = function () { return []; };
-ActivityComponent.propDecorators = {
-    activity: [{ type: core.Input }],
-    ActivitySave: [{ type: core.Output }],
-    OnNameSelectChange: [{ type: core.Output }],
-    OnRelatedToChange: [{ type: core.Output }],
-    OnSubjectChange: [{ type: core.Output }],
-    OnCallNotesChange: [{ type: core.Output }]
-};
-var LoginComponent = /** @class */ (function () {
-    function LoginComponent() {
-        this.loginDetailsProvided = new core.EventEmitter();
-    }
-    LoginComponent.prototype.ngOnInit = function () {
-        var e_2, _a;
-        if (!this.loginData.header) {
-            this.loginData.header = 'Login';
-        }
-        try {
-            for (var _b = __values(this.loginData.fields), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var field = _c.value;
-                if (!field.isInvalid) {
-                    field.isInvalid = false;
-                }
-            }
-        }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_2) throw e_2.error; }
-        }
-    };
-    LoginComponent.prototype.onLogin = function (loginForm) {
-        var e_3, _a;
-        try {
-            for (var _b = __values(this.loginData.fields), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var field = _c.value;
-                field.value = loginForm.value[field.name];
-            }
-        }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_3) throw e_3.error; }
-        }
-        this.loginDetailsProvided.emit(this.loginData);
-    };
-    LoginComponent.prototype.focusOutOfInput = function (loginForm, field) {
-        if (!loginForm.controls[field.name].valid) {
-            field.isInvalid = true;
-        }
-    };
-    return LoginComponent;
-}());
-LoginComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'amc-login',
-                template: "<div class=\"login-container\">\n  <form (ngSubmit)=\"onLogin(loginForm)\"class=\"login-form\" id=\"login-form\" #loginForm=\"ngForm\">\n    <div class=\"header-container\">\n      <label class=\"login-header\" attr.aria-label=\"login\">{{ loginData.header }}</label>\n    </div>\n    <div class=\"fields-container\">\n      <div *ngFor=\"let field of loginData.fields\" class=\"field\">\n        <label class=\"field-label\">\n          {{ field.name }}:\n        </label>\n\n        <input\n         ngModel\n         class=\"field-input\"\n         attr.aria-label=\"{{ field.name }}\"\n         [name]=\"field.name\"\n         [type]=\"field.type\"\n         [value]=\"field.value\"\n         [placeholder]=\"field.placeholder || ''\"\n         [required]=\"field.isRequired || false\"\n         (focusout)=\"focusOutOfInput(loginForm, field)\"/>\n\n         <p class=\"invalid-input\" *ngIf=\"field.isInvalid\">{{ field.invalidMessage }}</p>\n      </div>\n\n      <button\n        type=\"submit\"\n        class=\"form-submit\"\n        form=\"login-form\"\n        tabindex=\"0\"\n        attr.aria-label=\"send\"\n        [disabled]=\"!loginForm.valid\">Login</button>\n    </div>\n\n  </form>\n</div>\n",
-                styles: [".login-container{border:1px solid #939598;white-space:nowrap;font-family:Arial;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;text-overflow:ellipsis;position:relative;font-size:.9em;max-height:200px;overflow-x:hidden;overflow-y:hidden}.header-container{border-bottom:1px solid #939598;background-color:#f4f5fb;width:100%;height:28px;position:sticky}.login-header{margin-top:auto;margin-left:7px;padding:5px;font-weight:700;font-size:.9em}.fields-container{overflow-y:auto;max-height:160px;font-size:.9em;padding:5px}.field{display:table-row;margin:5px}.field-label{padding:10px;display:table-cell}.field-input{display:table-cell;border:1px solid #939598;border-radius:5px}.field-input:focus{-webkit-box-shadow:0 0 5px #38badf;box-shadow:0 0 5px #38badf}.form-submit{margin:15px 10px 10px;display:table-row;border:1px solid #00a4b0;border-radius:5px;background-color:#00a4b0;color:#f7f7f7;width:10em;height:2em;-webkit-transition:.2s;transition:.2s;font-size:1.1em;position:relative;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.form-submit:hover{background-color:#01858f}.form-submit:disabled{background-color:silver;border-color:silver;color:#fff}input.ng-invalid.ng-touched[required]{border-color:#a94442}.form-submit:focus{outline:#3296da solid 2px;outline-offset:5px}.invalid-input{margin:0;padding:0;color:#a94442;font-size:x-small}"]
-            },] },
-];
-LoginComponent.ctorParameters = function () { return []; };
-LoginComponent.propDecorators = {
-    loginData: [{ type: core.Input }],
-    loginDetailsProvided: [{ type: core.Output }]
-};
-var UILibraryModule = /** @class */ (function () {
-    function UILibraryModule(injector) {
-        this.injector = injector;
-    }
-    UILibraryModule.prototype.ngDoBootstrap = function (app) {
-        if (!customElements.get('amc-webcomponents-scenario')) {
-            var strategyFactory = new elementsZoneStrategy.ElementZoneStrategyFactory(ScenarioComponent, this.injector);
-            customElements.define('amc-webcomponents-scenario', elements.createCustomElement(ScenarioComponent, {
-                injector: this.injector,
-                strategyFactory: strategyFactory
-            }));
-        }
-        if (!customElements.get('amc-webcomponents-disposition')) {
-            var strategyFactory = new elementsZoneStrategy.ElementZoneStrategyFactory(DispositionComponent, this.injector);
-            customElements.define('amc-webcomponents-disposition', elements.createCustomElement(DispositionComponent, {
-                injector: this.injector,
-                strategyFactory: strategyFactory
-            }));
-        }
-        if (!customElements.get('amc-webcomponents-login')) {
-            var strategyFactory = new elementsZoneStrategy.ElementZoneStrategyFactory(LoginComponent, this.injector);
-            customElements.define('amc-webcomponents-disposition', elements.createCustomElement(LoginComponent, {
-                injector: this.injector,
-                strategyFactory: strategyFactory
-            }));
-        }
-    };
-    return UILibraryModule;
-}());
-UILibraryModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [platformBrowser.BrowserModule, common.CommonModule, forms.FormsModule],
-                declarations: [
-                    InteractionComponent,
-                    ScenarioComponent,
-                    OperationComponent,
-                    PropertyComponent,
-                    HoldtimerComponent,
-                    DurationComponent,
-                    ChatBoxComponent,
-                    ChatMessageComponent,
-                    DispositionComponent,
-                    ActivityComponent,
-                    LoginComponent
-                ],
-                entryComponents: [ScenarioComponent, DispositionComponent, LoginComponent],
-                bootstrap: [],
-                exports: [ScenarioComponent, DispositionComponent, LoginComponent]
-            },] },
-];
-UILibraryModule.ctorParameters = function () { return [
-    { type: core.Injector }
-]; };
+    var ChatMessageComponent = /** @class */ (function () {
+        function ChatMessageComponent() {
+            this.alignRight = false;
+        }
+        ChatMessageComponent.prototype.ngOnInit = function () {
+        };
+        __decorate([
+            core.Input()
+        ], ChatMessageComponent.prototype, "message", void 0);
+        __decorate([
+            core.Input()
+        ], ChatMessageComponent.prototype, "alignRight", void 0);
+        __decorate([
+            core.Input()
+        ], ChatMessageComponent.prototype, "username", void 0);
+        __decorate([
+            core.Input()
+        ], ChatMessageComponent.prototype, "color", void 0);
+        __decorate([
+            core.Input()
+        ], ChatMessageComponent.prototype, "timestamp", void 0);
+        __decorate([
+            core.Input()
+        ], ChatMessageComponent.prototype, "image", void 0);
+        __decorate([
+            core.Input()
+        ], ChatMessageComponent.prototype, "fallbackImage", void 0);
+        ChatMessageComponent = __decorate([
+            core.Component({
+                selector: 'app-chat-message',
+                template: "<div [class]=\"alignRight? 'message right-message' : 'message left-message'\">\r\n  <div class=\"message-header\">\r\n    <img *ngIf=\"image\" class=\"image\" [src]=\"image\" (error)=\"image = fallbackImage\" [style.border-color]=\"color\" />\r\n    <span *ngIf=\"username\" class=\"username\">{{username}}</span>\r\n    <span *ngIf=\"timestamp\" class=\"timestamp\">{{timestamp}}</span>\r\n  </div>\r\n\r\n  <div class=\"message-body-container\">\r\n    <div>\r\n      <div class=\"message-body\" [style.background-color]=\"color\" [style.border-color]=\"color\">\r\n        <span [innerHTML]=\"message\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                styles: [":host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.message-header{display:flex;-webkit-text-emphasis:none;text-emphasis:none;font-style:italic;font-size:.7em;align-items:center;margin-bottom:.5em}.message-header .image{height:30px;border-radius:50%;border:2px solid red}.message-header .username{font-weight:700}.right-message>.message-header{flex-direction:row-reverse;margin-right:1px}.right-message>.message-header .image,.right-message>.message-header .username{margin-left:5px}.left-message>.message-header{margin-left:1px}.left-message>.message-header .image,.left-message>.message-header .username{margin-right:5px}.message-body-container{display:flex}.right-message>.message-body-container{flex-direction:row-reverse}.message-body{display:inline-block;position:relative;border-radius:.4em;padding:3px;font-style:normal;font-size:1em;text-align:start;min-width:2em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.left-message .message-body:after{content:\"\";position:absolute;left:.8em;top:-.4em;border-bottom:.4em solid #000;border-bottom-color:inherit;border-left:.4em solid transparent;border-right:.4em solid transparent}.right-message .message-body:after{content:\"\";position:absolute;right:.8em;top:-.4em;border-bottom:.4em solid #000;border-bottom-color:inherit;border-left:.4em solid transparent;border-right:.4em solid transparent}"]
+            })
+        ], ChatMessageComponent);
+        return ChatMessageComponent;
+    }());
+
+    var DispositionComponent = /** @class */ (function () {
+        function DispositionComponent() {
+            this.dispositionEmitter = new core.EventEmitter();
+            this.selectedDispositionValue = '';
+            this.dispositionName = '';
+        }
+        DispositionComponent.prototype.ngOnInit = function () {
+            var e_1, _a;
+            try {
+                for (var _b = __values(this.disposition.dispositionMetadata), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var metadata = _c.value;
+                    if (metadata.key === 'callId') {
+                        this.dispositionName = "disposition_" + metadata.value;
+                        break;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            if (this.disposition.checkedDisposition) {
+                this.selectedDispositionValue = this.disposition.checkedDisposition;
+            }
+        };
+        DispositionComponent.prototype.submitDisposition = function () {
+            var selectedDisposition = {
+                dispositionId: this.selectedDispositionValue,
+                dispositionName: this.disposition.disposition.get(this.selectedDispositionValue),
+                dispositionMetadata: this.disposition.dispositionMetadata
+            };
+            this.dispositionEmitter.emit(selectedDisposition);
+        };
+        DispositionComponent.prototype.selectAndSubmitDisposition = function (event, dispositionKey) {
+            if (event.code === 'Enter') {
+                this.selectedDispositionValue = dispositionKey;
+                this.submitDisposition();
+            }
+        };
+        __decorate([
+            core.Input()
+        ], DispositionComponent.prototype, "disposition", void 0);
+        __decorate([
+            core.Output()
+        ], DispositionComponent.prototype, "dispositionEmitter", void 0);
+        DispositionComponent = __decorate([
+            core.Component({
+                selector: 'amc-disposition',
+                template: "<div class=\"disposition-container\">\r\n  <div class=\"header-container\">\r\n      <label class=\"disposition-header\" attr.aria-label=\"set disposition\">{{disposition.dispositionHeader}}</label>\r\n  </div>\r\n\r\n  <div class=\"dispositions-container\">\r\n      <div class=\"disposition\" *ngFor=\"let disp of disposition.disposition | keyvalue; let i = index\">\r\n        <label\r\n         class=\"disposition-label\"\r\n         tabindex=\"0\"\r\n         [id]=\"disp.key\"\r\n         [ngClass]=\"{'disposition-label-selected' : selectedDispositionValue === disp.key, 'first-disposition': i === 0}\"\r\n         (keypress)=\"selectAndSubmitDisposition($event, disp.key)\">\r\n\r\n          <input\r\n           class=\"disposition-input\"\r\n           type=\"radio\"\r\n           value=\"{{disp.key}}\"\r\n           tabindex=\"-1\"\r\n           attr.aria-label=\"{{disp.value}}\"\r\n           [required]=\"!selectedDispositionValue\"\r\n           [name]=\"dispositionName\"\r\n           (change)=\"submitDisposition()\"\r\n           [(ngModel)]=\"selectedDispositionValue\">\r\n\r\n          {{disp.value}}\r\n        </label>\r\n      </div>\r\n  </div>\r\n</div>\r\n",
+                styles: [".disposition-container{border:1px solid #939598;white-space:nowrap;font-family:Arial;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;text-overflow:ellipsis;position:relative;font-size:.9em;max-height:180px;overflow-x:hidden;overflow-y:hidden}.header-container{border-bottom:1px solid #939598;background-color:#f4f5fb;width:100%;white-space:nowrap;height:28px;position:-webkit-sticky;position:sticky;overflow-x:hidden;overflow-y:hidden}.disposition-header{margin-top:auto;margin-left:7px;padding:5px;white-space:nowrap;text-overflow:ellipsis;font-weight:700;font-size:.9em;font-family:Arial;overflow-x:hidden}.disposition{margin-left:5px;padding-left:5px;white-space:nowrap}.disposition-label{text-overflow:ellipsis;font-weight:400;white-space:nowrap;font-size:.9em;overflow-x:hidden}.disposition-label-selected{text-overflow:ellipsis;font-weight:700;white-space:nowrap;font-size:.9em}.dispositions-container{padding:3px;overflow-y:scroll;max-height:150px}.disposition-label:focus{outline:#3296da solid 2px;outline-offset:5px}.first-disposition{margin-top:5px}"]
+            })
+        ], DispositionComponent);
+        return DispositionComponent;
+    }());
+
+    var ActivityComponent = /** @class */ (function () {
+        function ActivityComponent() {
+            this.ActivitySave = new core.EventEmitter();
+            this.OnNameSelectChange = new core.EventEmitter();
+            this.OnRelatedToChange = new core.EventEmitter();
+            this.OnSubjectChange = new core.EventEmitter();
+            this.OnCallNotesChange = new core.EventEmitter();
+            this.isActivityMaximized = true;
+        }
+        ActivityComponent.prototype.ngOnInit = function () {
+        };
+        ActivityComponent.prototype.onNameSelectChange = function (event) {
+            this.activity.WhoObject = this.getWho(event.currentTarget.value);
+            this.OnNameSelectChange.emit(this.activity);
+        };
+        ActivityComponent.prototype.parseWhoObject = function (whoObject) {
+            return whoObject.objectType + ': ' + whoObject.objectName;
+        };
+        ActivityComponent.prototype.parseWhatObject = function (whatObject) {
+            return whatObject.objectType + ': ' + whatObject.objectName;
+        };
+        ActivityComponent.prototype.onRelatedToChange = function (event) {
+            this.activity.WhatObject = this.getWhat(event.currentTarget.value);
+            this.OnRelatedToChange.emit(this.activity);
+        };
+        ActivityComponent.prototype.onSubjectChange = function (event) {
+            this.activity.Subject = event.srcElement.value;
+            this.OnSubjectChange.emit(this.activity);
+        };
+        ActivityComponent.prototype.onCallNotesChange = function (event) {
+            this.activity.Subject = event.srcElement.value.trim();
+            this.OnCallNotesChange.emit(this.activity);
+        };
+        ActivityComponent.prototype.getWho = function (id) {
+            for (var i = 0; i < this.activity.whoList.length; i++) {
+                if (this.activity.whoList[i].objectId === id) {
+                    return this.activity.whoList[i];
+                }
+            }
+        };
+        ActivityComponent.prototype.getWhat = function (id) {
+            for (var i = 0; i < this.activity.whatList.length; i++) {
+                if (this.activity.whatList[i].objectId === id) {
+                    return this.activity.whatList[i];
+                }
+            }
+        };
+        ActivityComponent.prototype.loadQuickComment = function (value) {
+            this.activity.Description = this.activity.Description + this.activity.quickCommentList[value];
+        };
+        ActivityComponent.prototype.activitySave = function (clearActivityFields) {
+            this.ActivitySave.emit(this.activity);
+        };
+        __decorate([
+            core.Input()
+        ], ActivityComponent.prototype, "activity", void 0);
+        __decorate([
+            core.Output()
+        ], ActivityComponent.prototype, "ActivitySave", void 0);
+        __decorate([
+            core.Output()
+        ], ActivityComponent.prototype, "OnNameSelectChange", void 0);
+        __decorate([
+            core.Output()
+        ], ActivityComponent.prototype, "OnRelatedToChange", void 0);
+        __decorate([
+            core.Output()
+        ], ActivityComponent.prototype, "OnSubjectChange", void 0);
+        __decorate([
+            core.Output()
+        ], ActivityComponent.prototype, "OnCallNotesChange", void 0);
+        ActivityComponent = __decorate([
+            core.Component({
+                selector: 'app-activity',
+                template: "<div *ngIf=\"isActivityMaximized\" class=\"callDisplay\">\r\n  <div class=\"editor callHeader\">\r\n    <label class=\"headerLabel\">\r\n      <b>Activity Information</b>\r\n    </label>\r\n    <img class=\"ViewResizeImage\" src=\"/assets/images/section_collapse.png\" (click)=\"isActivityMaximized = false\" title=\"Collapse\">\r\n  </div>\r\n  <div class=\"callBody\">\r\n    <div class=\"activityFields\">\r\n      <form>\r\n        <div class=\"editor displayDiv\">\r\n          <label class=\"displayLabels\" title=\"Call From\">{{activity.NameFieldName}}</label>\r\n          <select class=\"dropDownListStyle displayData\" data-resetperactivity=\"false\" (change)=\"onNameSelectChange($event)\">\r\n            <option *ngFor=\"let who of activity.whoList\" value=\"{{who.objectId}}\">{{parseWhoObject(who)}}</option>\r\n          </select>\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <label class=\"displayLabels\" title=\"Related To\">{{activity.RelatedToFieldName}}</label>\r\n          <select class=\"dropDownListStyle displayData\" (change)=\"onRelatedToChange($event)\" data-resetperactivity=\"false\">\r\n            <option *ngFor=\"let what of activity.whatList\" value=\"{{what.objectId}}\">{{parseWhatObject(what)}}</option>\r\n          </select>\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <label class=\"displayLabels\" title=\"Subject\">{{activity.SubjectFieldName}}</label>\r\n          <input class=\"activitySubjectTextBoxStyle displayData\" (change)=\"onSubjectChange($event)\" title=\"{{activity.Subject}}\"\r\n            type=\"text\" value=\"{{activity.Subject}}\">\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <div class=\"callNotesContainer\">\r\n            <div class=\"textAreaDiv\">\r\n              <textarea value=\"{{activity.Description}}\" placeholder=\"Click to add a comment\" class=\"activityCommentsTextBoxStyle\"\r\n                (change)=\"onCallNotesChange($event)\" cols=\"20\" rows=\"2\" title=\"\"></textarea>\r\n            </div>\r\n            <div class=\"notesButtonBorder\">\r\n              <div class=\"commentsButtonDiv\">\r\n                <div class=\"quickCommentsDiv\">\r\n                  <input *ngFor=\"let quickComment of activity.quickCommentList ; let i = index;\" class=\"quickNotesBotton\" type=\"button\"\r\n                    value=\"{{i+1}}\" (click)=\"loadQuickComment(i)\" title=\"{{quickComment}}\">\r\n                </div>\r\n                <div class=\"submitDiv\">\r\n                  <input class=\"submitButton\" type=\"button\" value=\"Submit\" (click)=\"activitySave(false)\">\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"!isActivityMaximized\" class=\"callDisplay\">\r\n  <div class=\"editor callHeader\">\r\n    <label class=\"headerLabel\">\r\n      <b>Activity Information</b>\r\n    </label>\r\n    <img class=\"ViewResizeImage\" src=\"assets/images/section_expand.png\" (click)=\"isActivityMaximized = true\" title=\"Expand\">\r\n  </div>\r\n",
+                styles: [".callDisplay{display:grid;margin-bottom:8px;background-color:#fff}.editor{font-size:.9em;width:70%;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important}.headerLabel{margin-left:10px}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.callBody{border-top:0;position:relative}.displayDiv{width:100%;display:flex}.displayLabels{margin-left:5px;width:25%;margin-right:2px}.displayData{width:70%}.dropDownListStyle{border:1px solid #939598!important;border-radius:3px!important;width:71%!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 5px 0 0;cursor:pointer}.activitySubjectTextBoxStyle{border:1px solid #939598!important;border-radius:3px!important;width:71%!important;height:20px!important;text-align:left!important;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0 5px 0 0;padding-left:2px}.activityCommentsTextBoxStyle{border:none;color:#333!important;text-align:left!important;margin:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;resize:none;width:100%;height:95px}.notesButtonBorder{background-color:#fff;border-left:1px solid #939598;border-bottom:1px solid #939598;border-right:1px solid #939598;border-bottom-left-radius:3px!important;border-bottom-right-radius:3px!important;height:auto}.commentsButtonDiv{width:100%;display:flex;align-items:center}.quickNotesBotton{background-color:#1e72ba;border:0;color:#fff;height:70%;width:20px;margin:2px;outline:0;font-size:70%}.quickCommentsDiv{text-align:left;flex:1 0 0;flex-wrap:wrap;display:flex;margin:2px}.submitDiv{text-align:right;padding-right:4px}.submitButton{border:0;float:right;margin-top:2px;outline:0;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}"]
+            })
+        ], ActivityComponent);
+        return ActivityComponent;
+    }());
+
+    var LoginComponent = /** @class */ (function () {
+        function LoginComponent() {
+            this.loginDetailsProvided = new core.EventEmitter();
+        }
+        LoginComponent.prototype.ngOnInit = function () {
+            var e_1, _a;
+            if (!this.loginData.header) {
+                this.loginData.header = 'Login';
+            }
+            try {
+                for (var _b = __values(this.loginData.fields), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var field = _c.value;
+                    if (!field.isInvalid) {
+                        field.isInvalid = false;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        LoginComponent.prototype.onLogin = function (loginForm) {
+            var e_2, _a;
+            try {
+                for (var _b = __values(this.loginData.fields), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var field = _c.value;
+                    field.value = loginForm.value[field.name];
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            this.loginDetailsProvided.emit(this.loginData);
+        };
+        LoginComponent.prototype.focusOutOfInput = function (loginForm, field) {
+            if (!loginForm.controls[field.name].valid) {
+                field.isInvalid = true;
+            }
+            // console.log(loginForm);
+            // console.log(field);
+        };
+        __decorate([
+            core.Input()
+        ], LoginComponent.prototype, "loginData", void 0);
+        __decorate([
+            core.Output()
+        ], LoginComponent.prototype, "loginDetailsProvided", void 0);
+        LoginComponent = __decorate([
+            core.Component({
+                selector: 'amc-login',
+                template: "<div class=\"login-container\">\n  <form (ngSubmit)=\"onLogin(loginForm)\"class=\"login-form\" id=\"login-form\" #loginForm=\"ngForm\">\n    <div class=\"header-container\">\n      <label class=\"login-header\" attr.aria-label=\"login\">{{ loginData.header }}</label>\n    </div>\n    <div class=\"fields-container\">\n      <div *ngFor=\"let field of loginData.fields\" class=\"field\">\n        <label class=\"field-label\">\n          {{ field.name }}:\n        </label>\n\n        <input\n         ngModel\n         class=\"field-input\"\n         attr.aria-label=\"{{ field.name }}\"\n         [name]=\"field.name\"\n         [type]=\"field.type\"\n         [value]=\"field.value\"\n         [placeholder]=\"field.placeholder || ''\"\n         [required]=\"field.isRequired || false\"\n         (focusout)=\"focusOutOfInput(loginForm, field)\"/>\n\n         <p class=\"invalid-input\" *ngIf=\"field.isInvalid\">{{ field.invalidMessage }}</p>\n      </div>\n\n      <button\n        type=\"submit\"\n        class=\"form-submit\"\n        form=\"login-form\"\n        tabindex=\"0\"\n        attr.aria-label=\"send\"\n        [disabled]=\"!loginForm.valid\">Login</button>\n    </div>\n\n  </form>\n</div>\n",
+                styles: [".login-container{border:1px solid #939598;white-space:nowrap;font-family:Arial;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;text-overflow:ellipsis;position:relative;font-size:.9em;max-height:200px;overflow-x:hidden;overflow-y:hidden}.header-container{border-bottom:1px solid #939598;background-color:#f4f5fb;width:100%;height:28px;position:-webkit-sticky;position:sticky}.login-header{margin-top:auto;margin-left:7px;padding:5px;font-weight:700;font-size:.9em}.fields-container{overflow-y:auto;max-height:160px;font-size:.9em;padding:5px}.field{display:table-row;margin:5px}.field-label{padding:10px;display:table-cell}.field-input{display:table-cell;border:1px solid #939598;border-radius:5px}.field-input:focus{box-shadow:0 0 5px #38badf}.form-submit{margin:15px 10px 10px;display:table-row;border:1px solid #00a4b0;border-radius:5px;background-color:#00a4b0;color:#f7f7f7;width:10em;height:2em;transition:.2s;font-size:1.1em;position:relative;top:50%;left:50%;transform:translate(-50%,-50%)}.form-submit:hover{background-color:#01858f}.form-submit:disabled{background-color:silver;border-color:silver;color:#fff}input.ng-invalid.ng-touched[required]{border-color:#a94442}.form-submit:focus{outline:#3296da solid 2px;outline-offset:5px}.invalid-input{margin:0;padding:0;color:#a94442;font-size:x-small}"]
+            })
+        ], LoginComponent);
+        return LoginComponent;
+    }());
+
+    var UILibraryModule = /** @class */ (function () {
+        function UILibraryModule(injector) {
+            this.injector = injector;
+        }
+        UILibraryModule.prototype.ngDoBootstrap = function (app) {
+            if (!customElements.get('amc-webcomponents-scenario')) {
+                var strategyFactory = new elementsZoneStrategy.ElementZoneStrategyFactory(ScenarioComponent, this.injector);
+                customElements.define('amc-webcomponents-scenario', elements.createCustomElement(ScenarioComponent, {
+                    injector: this.injector,
+                    strategyFactory: strategyFactory
+                }));
+            }
+            if (!customElements.get('amc-webcomponents-disposition')) {
+                var strategyFactory = new elementsZoneStrategy.ElementZoneStrategyFactory(DispositionComponent, this.injector);
+                customElements.define('amc-webcomponents-disposition', elements.createCustomElement(DispositionComponent, {
+                    injector: this.injector,
+                    strategyFactory: strategyFactory
+                }));
+            }
+            if (!customElements.get('amc-webcomponents-login')) {
+                var strategyFactory = new elementsZoneStrategy.ElementZoneStrategyFactory(LoginComponent, this.injector);
+                customElements.define('amc-webcomponents-disposition', elements.createCustomElement(LoginComponent, {
+                    injector: this.injector,
+                    strategyFactory: strategyFactory
+                }));
+            }
+        };
+        UILibraryModule.ctorParameters = function () { return [
+            { type: core.Injector }
+        ]; };
+        UILibraryModule = __decorate([
+            core.NgModule({
+                imports: [platformBrowser.BrowserModule, common.CommonModule, forms.FormsModule],
+                declarations: [
+                    InteractionComponent,
+                    ScenarioComponent,
+                    OperationComponent,
+                    PropertyComponent,
+                    HoldtimerComponent,
+                    DurationComponent,
+                    ChatBoxComponent,
+                    ChatMessageComponent,
+                    DispositionComponent,
+                    ActivityComponent,
+                    LoginComponent
+                ],
+                entryComponents: [ScenarioComponent, DispositionComponent, LoginComponent],
+                bootstrap: [],
+                exports: [ScenarioComponent, DispositionComponent, LoginComponent]
+            })
+        ], UILibraryModule);
+        return UILibraryModule;
+    }());
 
-exports.UILibraryModule = UILibraryModule;
-exports.Property = Property;
-exports.ValueType = ValueType;
-exports.IChatMessageType = IChatMessageType;
-exports.ɵj = ActivityComponent;
-exports.ɵg = ChatBoxComponent;
-exports.ɵh = ChatMessageComponent;
-exports.ɵi = DispositionComponent;
-exports.ɵf = DurationComponent;
-exports.ɵe = HoldtimerComponent;
-exports.ɵa = InteractionComponent;
-exports.ɵk = LoginComponent;
-exports.ɵc = OperationComponent;
-exports.ɵd = PropertyComponent;
-exports.ɵb = ScenarioComponent;
+    exports.Property = Property;
+    exports.UILibraryModule = UILibraryModule;
+    exports.ɵa = InteractionComponent;
+    exports.ɵb = ScenarioComponent;
+    exports.ɵc = OperationComponent;
+    exports.ɵd = PropertyComponent;
+    exports.ɵe = HoldtimerComponent;
+    exports.ɵf = DurationComponent;
+    exports.ɵg = ChatBoxComponent;
+    exports.ɵh = ChatMessageComponent;
+    exports.ɵi = DispositionComponent;
+    exports.ɵj = ActivityComponent;
+    exports.ɵk = LoginComponent;
 
-Object.defineProperty(exports, '__esModule', { value: true });
+    Object.defineProperty(exports, '__esModule', { value: true });
 
 })));
 //# sourceMappingURL=amc-technology-ui-library.umd.js.map