@amc-technology/ui-library 1.0.100 → 1.0.102

package/README.md

@@ -1,10 +1,27 @@
-# Deploy UI LIbrary
 
-## Prerequisite: 
-Need to have [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli-windows?view=azure-cli-latest) installed.
-Need to have npm set up and logged in according to CCF [doc](https://cccf-api-docs.azurewebsites.net/index.html). <br />
+## Project Setup and running things locally.
+The UI Library repo contains two projects, the UI Library module/components themselves (projects/UILibrary), and the UI library Tester (src/). In order to run the UILibrary itself in storybook install node modules(NPM I) and run ng run UILibraryTester:storybook. In order to run the UILibrary tester simply run ng serve. 
+## Shared componets.
+Components available in [UILibraryModule](https://amc-ui-lib-docs.azurewebsites.net/modules/UILibraryModule.html) are shared through `@amc/ui-library` latest npm package.<br />
+
+## Deploying a beta release to npm
+
+1. Create a feature branch based off of dev/master in which you will develop new features/UI.
+2. Once one is ready to push the commits containing changes and test the new features/UI, update the package.json version number to be the same version that was last released to NPM (find the latest version number it doesn't matter if it was a beta or latest release). 
+3. Ensure the package.json version was updated and committed and create a PR to merge your feature branch into dev branch. 
+4. Successful approval of the PR will trigger the dev build pipeline to run which will package the repo into a tarball file that will be used by the beta release pipeline.
+5. On success of the build pipeline, approve the beta release pipeline to run. This pipeline will extract the files from the tarball and publish a new beta release of the UI library package to NPM.
+6. Test the beta release in another project by modifying the @amc-technology/ui-library package.json depedency to use the exact version that was just released to beta and perform an NPM I. 
 
-## Deploy UI Library
+## Deploying a latest release to npm
+1. In order to build and release a production (latest) version of the package to NPM once again create a feature branch off of dev/master. Ideally, you use the same feature branch that you used to develop changes for a beta release that you have already tested and published to NPM.
+2. Note that you should not initiate a PR to merge the dev branch into the master branch. If you have tested the beta release of the NPM package and want the changes/features created to be pushed to production so that other applications can use the new features, create a PR to merge the feature branch to master.
+3. Before creating this PR, ensure that the project/package version inside of package.json is the same version that was last released to NPM. Also, be sure to delete any unnecessary commits/tags from your local project before pushing to the origin branch. 
+4. Next create the PR, and get it approved for a merge. After a successful merge to the master branch the prod build pipeline will run and package the project into a tarball file that will be used by the latest release pipeline. 
+5. On success of the build pipeline, approve the latest release pipeline to run. This pipeline will extract the files from the tarball and publish a new latest release of the UI library package to NPM.
+6. Confirm that the package was released on NPM with the highest version to date and that the tag is listed as latest. Now projects using the UILibrary will use the new version of the package you just released unless specifying an earlier version. 
+
+## Old way of deploying NPM package (Can still use this script for releasing documentation)
 
 From the root of the project run `publish_lib_doc` powershell script. <br />
 It will prompt for azure username and password. <br />
@@ -12,6 +29,6 @@ It will create a new version of `@amc/ui-library` npm package. <br />
 It will create new npm package and update the [docs](https://amc-ui-lib-docs.azurewebsites.net/index.html) related to it. <br />
 If one wants to just deploy doc not npm package then additional `-pub_lib $false` parameter can be supplied. e.g. `.\publish_lib_doc.ps1 -pub_lib $false`
 
-## Shared componets.
-Components available in [UILibraryModule](https://amc-ui-lib-docs.azurewebsites.net/modules/UILibraryModule.html) are shared through `@amc/ui-library` latest npm package.<br />
-
+## Prerequisite (Not needed unless you want to release documentation or a new version of UILibrary with the old script): 
+Need to have [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli-windows?view=azure-cli-latest) installed.
+Need to have npm set up and logged in according to CCF [doc](https://cccf-api-docs.azurewebsites.net/index.html). <br />

package/esm2022/amc-technology-ui-library.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public_api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW1jLXRlY2hub2xvZ3ktdWktbGlicmFyeS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL2FtYy10ZWNobm9sb2d5LXVpLWxpYnJhcnkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWNfYXBpJztcbiJdfQ==

package/esm2022/projects/UILibrary/src/app/Helpers.mjs

@@ -0,0 +1,11 @@
+export function secondsToHms(seconds_in) {
+    seconds_in = Number(seconds_in);
+    const h = Math.floor(seconds_in / 3600);
+    const m = Math.floor(seconds_in % 3600 / 60);
+    const s = Math.floor(seconds_in % 3600 % 60);
+    const hDisplay = h > 0 ? h.toString() + ':' : '';
+    const mDisplay = m > 0 ? ('0' + m.toString()).slice(-2) + ':' : '00:';
+    const sDisplay = s > 0 ? ('0' + s.toString()).slice(-2) : '00';
+    return hDisplay + mDisplay + sDisplay;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVscGVycy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL1VJTGlicmFyeS9zcmMvYXBwL0hlbHBlcnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxVQUFVLFlBQVksQ0FBQyxVQUFrQjtJQUM3QyxVQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ2hDLE1BQU0sQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxDQUFDO0lBQ3hDLE1BQU0sQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsVUFBVSxHQUFHLElBQUksR0FBRyxFQUFFLENBQUMsQ0FBQztJQUM3QyxNQUFNLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsR0FBRyxJQUFJLEdBQUcsRUFBRSxDQUFDLENBQUM7SUFFN0MsTUFBTSxRQUFRLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLFFBQVEsRUFBRSxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQ2pELE1BQU0sUUFBUSxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO0lBQ3RFLE1BQU0sUUFBUSxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDL0QsT0FBTyxRQUFRLEdBQUcsUUFBUSxHQUFHLFFBQVEsQ0FBQztBQUN4QyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGZ1bmN0aW9uIHNlY29uZHNUb0htcyhzZWNvbmRzX2luOiBudW1iZXIpOiBzdHJpbmcge1xyXG4gIHNlY29uZHNfaW4gPSBOdW1iZXIoc2Vjb25kc19pbik7XHJcbiAgY29uc3QgaCA9IE1hdGguZmxvb3Ioc2Vjb25kc19pbiAvIDM2MDApO1xyXG4gIGNvbnN0IG0gPSBNYXRoLmZsb29yKHNlY29uZHNfaW4gJSAzNjAwIC8gNjApO1xyXG4gIGNvbnN0IHMgPSBNYXRoLmZsb29yKHNlY29uZHNfaW4gJSAzNjAwICUgNjApO1xyXG5cclxuICBjb25zdCBoRGlzcGxheSA9IGggPiAwID8gaC50b1N0cmluZygpICsgJzonIDogJyc7XHJcbiAgY29uc3QgbURpc3BsYXkgPSBtID4gMCA/ICgnMCcgKyBtLnRvU3RyaW5nKCkpLnNsaWNlKC0yKSArICc6JyA6ICcwMDonO1xyXG4gIGNvbnN0IHNEaXNwbGF5ID0gcyA+IDAgPyAoJzAnICsgcy50b1N0cmluZygpKS5zbGljZSgtMikgOiAnMDAnO1xyXG4gIHJldHVybiBoRGlzcGxheSArIG1EaXNwbGF5ICsgc0Rpc3BsYXk7XHJcbn1cclxuIl19

package/esm2022/projects/UILibrary/src/app/components/activity/activity.component.mjs

@@ -0,0 +1,79 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+export class ActivityComponent {
+    isActivityMaximized;
+    activity;
+    ActivitySave = new EventEmitter();
+    OnNameSelectChange = new EventEmitter();
+    OnRelatedToChange = new EventEmitter();
+    OnSubjectChange = new EventEmitter();
+    OnCallNotesChange = new EventEmitter();
+    constructor() {
+        this.isActivityMaximized = true;
+    }
+    ngOnInit() {
+    }
+    onNameSelectChange(event) {
+        this.activity.WhoObject = this.getWho(event.currentTarget.value);
+        this.OnNameSelectChange.emit(this.activity);
+    }
+    parseWhoObject(whoObject) {
+        return whoObject.objectType + ': ' + whoObject.objectName;
+    }
+    parseWhatObject(whatObject) {
+        return whatObject.objectType + ': ' + whatObject.objectName;
+    }
+    onRelatedToChange(event) {
+        this.activity.WhatObject = this.getWhat(event.currentTarget.value);
+        this.OnRelatedToChange.emit(this.activity);
+    }
+    onSubjectChange(event) {
+        this.activity.Subject = event.srcElement.value;
+        this.OnSubjectChange.emit(this.activity);
+    }
+    onCallNotesChange(event) {
+        this.activity.Subject = event.srcElement.value.trim();
+        this.OnCallNotesChange.emit(this.activity);
+    }
+    getWho(id) {
+        for (let i = 0; i < this.activity.whoList.length; i++) {
+            if (this.activity.whoList[i].objectId === id) {
+                return this.activity.whoList[i];
+            }
+        }
+    }
+    getWhat(id) {
+        for (let i = 0; i < this.activity.whatList.length; i++) {
+            if (this.activity.whatList[i].objectId === id) {
+                return this.activity.whatList[i];
+            }
+        }
+    }
+    loadQuickComment(value) {
+        this.activity.Description = this.activity.Description + this.activity.quickCommentList[value];
+    }
+    activitySave(clearActivityFields) {
+        this.ActivitySave.emit(this.activity);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ActivityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ActivityComponent, selector: "app-activity", inputs: { activity: "activity" }, outputs: { ActivitySave: "ActivitySave", OnNameSelectChange: "OnNameSelectChange", OnRelatedToChange: "OnRelatedToChange", OnSubjectChange: "OnSubjectChange", OnCallNotesChange: "OnCallNotesChange" }, ngImport: i0, 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 0% 0 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:none;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:none;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ActivityComponent, decorators: [{
+            type: Component,
+            args: [{ 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 0% 0 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:none;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:none;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { activity: [{
+                type: Input
+            }], ActivitySave: [{
+                type: Output
+            }], OnNameSelectChange: [{
+                type: Output
+            }], OnRelatedToChange: [{
+                type: Output
+            }], OnSubjectChange: [{
+                type: Output
+            }], OnCallNotesChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aXZpdHkuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9hY3Rpdml0eS9hY3Rpdml0eS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2FjdGl2aXR5L2FjdGl2aXR5LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRL0UsTUFBTSxPQUFPLGlCQUFpQjtJQUU5QixtQkFBbUIsQ0FBVTtJQUNwQixRQUFRLENBQVk7SUFDbkIsWUFBWSxHQUE0QixJQUFJLFlBQVksRUFBYSxDQUFDO0lBQ3RFLGtCQUFrQixHQUE0QixJQUFJLFlBQVksRUFBYSxDQUFDO0lBQzVFLGlCQUFpQixHQUE0QixJQUFJLFlBQVksRUFBYSxDQUFDO0lBQzNFLGVBQWUsR0FBNEIsSUFBSSxZQUFZLEVBQWEsQ0FBQztJQUN6RSxpQkFBaUIsR0FBNEIsSUFBSSxZQUFZLEVBQWEsQ0FBQztJQUVuRjtRQUNFLElBQUksQ0FBQyxtQkFBbUIsR0FBRyxJQUFJLENBQUM7SUFDbEMsQ0FBQztJQUVELFFBQVE7SUFDUixDQUFDO0lBRU0sa0JBQWtCLENBQUMsS0FBSztRQUM3QixJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDakUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDOUMsQ0FBQztJQUVNLGNBQWMsQ0FBQyxTQUEyQjtRQUMvQyxPQUFPLFNBQVMsQ0FBQyxVQUFVLEdBQUcsSUFBSSxHQUFHLFNBQVMsQ0FBQyxVQUFVLENBQUM7SUFDNUQsQ0FBQztJQUVNLGVBQWUsQ0FBQyxVQUE0QjtRQUNqRCxPQUFPLFVBQVUsQ0FBQyxVQUFVLEdBQUcsSUFBSSxHQUFHLFVBQVUsQ0FBQyxVQUFVLENBQUM7SUFDOUQsQ0FBQztJQUVNLGlCQUFpQixDQUFDLEtBQUs7UUFDNUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ25FLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFFTSxlQUFlLENBQUMsS0FBSztRQUMxQixJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQztRQUMvQyxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDM0MsQ0FBQztJQUNNLGlCQUFpQixDQUFDLEtBQUs7UUFDNUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdEQsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDN0MsQ0FBQztJQUVNLE1BQU0sQ0FBQyxFQUFFO1FBQ2QsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUNyRCxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLFFBQVEsS0FBSyxFQUFFLEVBQUU7Z0JBQzVDLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUM7YUFDakM7U0FDRjtJQUNILENBQUM7SUFDTSxPQUFPLENBQUMsRUFBRTtRQUNmLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDdEQsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLEtBQUssRUFBRSxFQUFFO2dCQUM3QyxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDO2FBQ2xDO1NBQ0Y7SUFDSCxDQUFDO0lBRU0sZ0JBQWdCLENBQUMsS0FBSztRQUMzQixJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGdCQUFnQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2hHLENBQUM7SUFFTSxZQUFZLENBQUMsbUJBQW1CO1FBQ3JDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUN4QyxDQUFDO3VHQWpFVSxpQkFBaUI7MkZBQWpCLGlCQUFpQiwrUkNSOUIsc21HQXlEQTs7MkZEakRhLGlCQUFpQjtrQkFMN0IsU0FBUzsrQkFDRSxjQUFjOzBFQU9qQixRQUFRO3NCQUFoQixLQUFLO2dCQUNJLFlBQVk7c0JBQXJCLE1BQU07Z0JBQ0csa0JBQWtCO3NCQUEzQixNQUFNO2dCQUNHLGlCQUFpQjtzQkFBMUIsTUFBTTtnQkFDRyxlQUFlO3NCQUF4QixNQUFNO2dCQUNHLGlCQUFpQjtzQkFBMUIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgSUFjdGl2aXR5LCBJQWN0aXZpdHlEZXRhaWxzIH0gZnJvbSAnLi4vLi4vbW9kZWxzL3VpbGlicmFyeS5tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC1hY3Rpdml0eScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2FjdGl2aXR5LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9hY3Rpdml0eS5jb21wb25lbnQuY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIEFjdGl2aXR5Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbmlzQWN0aXZpdHlNYXhpbWl6ZWQ6IGJvb2xlYW47XHJcbkBJbnB1dCgpIGFjdGl2aXR5OiBJQWN0aXZpdHk7XHJcbkBPdXRwdXQoKSBBY3Rpdml0eVNhdmU6IEV2ZW50RW1pdHRlcjxJQWN0aXZpdHk+ID0gbmV3IEV2ZW50RW1pdHRlcjxJQWN0aXZpdHk+KCk7XHJcbkBPdXRwdXQoKSBPbk5hbWVTZWxlY3RDaGFuZ2U6IEV2ZW50RW1pdHRlcjxJQWN0aXZpdHk+ID0gbmV3IEV2ZW50RW1pdHRlcjxJQWN0aXZpdHk+KCk7XHJcbkBPdXRwdXQoKSBPblJlbGF0ZWRUb0NoYW5nZTogRXZlbnRFbWl0dGVyPElBY3Rpdml0eT4gPSBuZXcgRXZlbnRFbWl0dGVyPElBY3Rpdml0eT4oKTtcclxuQE91dHB1dCgpIE9uU3ViamVjdENoYW5nZTogRXZlbnRFbWl0dGVyPElBY3Rpdml0eT4gPSBuZXcgRXZlbnRFbWl0dGVyPElBY3Rpdml0eT4oKTtcclxuQE91dHB1dCgpIE9uQ2FsbE5vdGVzQ2hhbmdlOiBFdmVudEVtaXR0ZXI8SUFjdGl2aXR5PiA9IG5ldyBFdmVudEVtaXR0ZXI8SUFjdGl2aXR5PigpO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICAgIHRoaXMuaXNBY3Rpdml0eU1heGltaXplZCA9IHRydWU7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBvbk5hbWVTZWxlY3RDaGFuZ2UoZXZlbnQpIHtcclxuICAgIHRoaXMuYWN0aXZpdHkuV2hvT2JqZWN0ID0gdGhpcy5nZXRXaG8oZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XHJcbiAgICB0aGlzLk9uTmFtZVNlbGVjdENoYW5nZS5lbWl0KHRoaXMuYWN0aXZpdHkpO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIHBhcnNlV2hvT2JqZWN0KHdob09iamVjdDogSUFjdGl2aXR5RGV0YWlscyk6IHN0cmluZyB7XHJcbiAgICByZXR1cm4gd2hvT2JqZWN0Lm9iamVjdFR5cGUgKyAnOiAnICsgd2hvT2JqZWN0Lm9iamVjdE5hbWU7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgcGFyc2VXaGF0T2JqZWN0KHdoYXRPYmplY3Q6IElBY3Rpdml0eURldGFpbHMpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuIHdoYXRPYmplY3Qub2JqZWN0VHlwZSArICc6ICcgKyB3aGF0T2JqZWN0Lm9iamVjdE5hbWU7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgb25SZWxhdGVkVG9DaGFuZ2UoZXZlbnQpIHtcclxuICAgIHRoaXMuYWN0aXZpdHkuV2hhdE9iamVjdCA9IHRoaXMuZ2V0V2hhdChldmVudC5jdXJyZW50VGFyZ2V0LnZhbHVlKTtcclxuICAgIHRoaXMuT25SZWxhdGVkVG9DaGFuZ2UuZW1pdCh0aGlzLmFjdGl2aXR5KTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBvblN1YmplY3RDaGFuZ2UoZXZlbnQpIHtcclxuICAgIHRoaXMuYWN0aXZpdHkuU3ViamVjdCA9IGV2ZW50LnNyY0VsZW1lbnQudmFsdWU7XHJcbiAgICB0aGlzLk9uU3ViamVjdENoYW5nZS5lbWl0KHRoaXMuYWN0aXZpdHkpO1xyXG4gIH1cclxuICBwdWJsaWMgb25DYWxsTm90ZXNDaGFuZ2UoZXZlbnQpIHtcclxuICAgIHRoaXMuYWN0aXZpdHkuU3ViamVjdCA9IGV2ZW50LnNyY0VsZW1lbnQudmFsdWUudHJpbSgpO1xyXG4gICAgdGhpcy5PbkNhbGxOb3Rlc0NoYW5nZS5lbWl0KHRoaXMuYWN0aXZpdHkpO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIGdldFdobyhpZCk6IElBY3Rpdml0eURldGFpbHMge1xyXG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLmFjdGl2aXR5Lndob0xpc3QubGVuZ3RoOyBpKyspIHtcclxuICAgICAgaWYgKHRoaXMuYWN0aXZpdHkud2hvTGlzdFtpXS5vYmplY3RJZCA9PT0gaWQpIHtcclxuICAgICAgICByZXR1cm4gdGhpcy5hY3Rpdml0eS53aG9MaXN0W2ldO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgfVxyXG4gIHB1YmxpYyBnZXRXaGF0KGlkKTogSUFjdGl2aXR5RGV0YWlscyB7XHJcbiAgICBmb3IgKGxldCBpID0gMDsgaSA8IHRoaXMuYWN0aXZpdHkud2hhdExpc3QubGVuZ3RoOyBpKyspIHtcclxuICAgICAgaWYgKHRoaXMuYWN0aXZpdHkud2hhdExpc3RbaV0ub2JqZWN0SWQgPT09IGlkKSB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuYWN0aXZpdHkud2hhdExpc3RbaV07XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcblxyXG4gIHB1YmxpYyBsb2FkUXVpY2tDb21tZW50KHZhbHVlKSB7XHJcbiAgICB0aGlzLmFjdGl2aXR5LkRlc2NyaXB0aW9uID0gdGhpcy5hY3Rpdml0eS5EZXNjcmlwdGlvbiArIHRoaXMuYWN0aXZpdHkucXVpY2tDb21tZW50TGlzdFt2YWx1ZV07XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgYWN0aXZpdHlTYXZlKGNsZWFyQWN0aXZpdHlGaWVsZHMpIHtcclxuICAgIHRoaXMuQWN0aXZpdHlTYXZlLmVtaXQodGhpcy5hY3Rpdml0eSk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgKm5nSWY9XCJpc0FjdGl2aXR5TWF4aW1pemVkXCIgY2xhc3M9XCJjYWxsRGlzcGxheVwiPlxyXG4gIDxkaXYgY2xhc3M9XCJlZGl0b3IgY2FsbEhlYWRlclwiPlxyXG4gICAgPGxhYmVsIGNsYXNzPVwiaGVhZGVyTGFiZWxcIj5cclxuICAgICAgPGI+QWN0aXZpdHkgSW5mb3JtYXRpb248L2I+XHJcbiAgICA8L2xhYmVsPlxyXG4gICAgPGltZyBjbGFzcz1cIlZpZXdSZXNpemVJbWFnZVwiIHNyYz1cIi9hc3NldHMvaW1hZ2VzL3NlY3Rpb25fY29sbGFwc2UucG5nXCIgKGNsaWNrKT1cImlzQWN0aXZpdHlNYXhpbWl6ZWQgPSBmYWxzZVwiIHRpdGxlPVwiQ29sbGFwc2VcIj5cclxuICA8L2Rpdj5cclxuICA8ZGl2IGNsYXNzPVwiY2FsbEJvZHlcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJhY3Rpdml0eUZpZWxkc1wiPlxyXG4gICAgICA8Zm9ybT5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZWRpdG9yIGRpc3BsYXlEaXZcIj5cclxuICAgICAgICAgIDxsYWJlbCBjbGFzcz1cImRpc3BsYXlMYWJlbHNcIiB0aXRsZT1cIkNhbGwgRnJvbVwiPnt7YWN0aXZpdHkuTmFtZUZpZWxkTmFtZX19PC9sYWJlbD5cclxuICAgICAgICAgIDxzZWxlY3QgY2xhc3M9XCJkcm9wRG93bkxpc3RTdHlsZSBkaXNwbGF5RGF0YVwiIGRhdGEtcmVzZXRwZXJhY3Rpdml0eT1cImZhbHNlXCIgKGNoYW5nZSk9XCJvbk5hbWVTZWxlY3RDaGFuZ2UoJGV2ZW50KVwiPlxyXG4gICAgICAgICAgICA8b3B0aW9uICpuZ0Zvcj1cImxldCB3aG8gb2YgYWN0aXZpdHkud2hvTGlzdFwiIHZhbHVlPVwie3t3aG8ub2JqZWN0SWR9fVwiPnt7cGFyc2VXaG9PYmplY3Qod2hvKX19PC9vcHRpb24+XHJcbiAgICAgICAgICA8L3NlbGVjdD5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZWRpdG9yIGRpc3BsYXlEaXZcIj5cclxuICAgICAgICAgIDxsYWJlbCBjbGFzcz1cImRpc3BsYXlMYWJlbHNcIiB0aXRsZT1cIlJlbGF0ZWQgVG9cIj57e2FjdGl2aXR5LlJlbGF0ZWRUb0ZpZWxkTmFtZX19PC9sYWJlbD5cclxuICAgICAgICAgIDxzZWxlY3QgY2xhc3M9XCJkcm9wRG93bkxpc3RTdHlsZSBkaXNwbGF5RGF0YVwiIChjaGFuZ2UpPVwib25SZWxhdGVkVG9DaGFuZ2UoJGV2ZW50KVwiIGRhdGEtcmVzZXRwZXJhY3Rpdml0eT1cImZhbHNlXCI+XHJcbiAgICAgICAgICAgIDxvcHRpb24gKm5nRm9yPVwibGV0IHdoYXQgb2YgYWN0aXZpdHkud2hhdExpc3RcIiB2YWx1ZT1cInt7d2hhdC5vYmplY3RJZH19XCI+e3twYXJzZVdoYXRPYmplY3Qod2hhdCl9fTwvb3B0aW9uPlxyXG4gICAgICAgICAgPC9zZWxlY3Q+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImVkaXRvciBkaXNwbGF5RGl2XCI+XHJcbiAgICAgICAgICA8bGFiZWwgY2xhc3M9XCJkaXNwbGF5TGFiZWxzXCIgdGl0bGU9XCJTdWJqZWN0XCI+e3thY3Rpdml0eS5TdWJqZWN0RmllbGROYW1lfX08L2xhYmVsPlxyXG4gICAgICAgICAgPGlucHV0IGNsYXNzPVwiYWN0aXZpdHlTdWJqZWN0VGV4dEJveFN0eWxlIGRpc3BsYXlEYXRhXCIgKGNoYW5nZSk9XCJvblN1YmplY3RDaGFuZ2UoJGV2ZW50KVwiIHRpdGxlPVwie3thY3Rpdml0eS5TdWJqZWN0fX1cIlxyXG4gICAgICAgICAgICB0eXBlPVwidGV4dFwiIHZhbHVlPVwie3thY3Rpdml0eS5TdWJqZWN0fX1cIj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZWRpdG9yIGRpc3BsYXlEaXZcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjYWxsTm90ZXNDb250YWluZXJcIj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInRleHRBcmVhRGl2XCI+XHJcbiAgICAgICAgICAgICAgPHRleHRhcmVhIHZhbHVlPVwie3thY3Rpdml0eS5EZXNjcmlwdGlvbn19XCIgcGxhY2Vob2xkZXI9XCJDbGljayB0byBhZGQgYSBjb21tZW50XCIgY2xhc3M9XCJhY3Rpdml0eUNvbW1lbnRzVGV4dEJveFN0eWxlXCJcclxuICAgICAgICAgICAgICAgIChjaGFuZ2UpPVwib25DYWxsTm90ZXNDaGFuZ2UoJGV2ZW50KVwiIGNvbHM9XCIyMFwiIHJvd3M9XCIyXCIgdGl0bGU9XCJcIj48L3RleHRhcmVhPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cIm5vdGVzQnV0dG9uQm9yZGVyXCI+XHJcbiAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNvbW1lbnRzQnV0dG9uRGl2XCI+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwicXVpY2tDb21tZW50c0RpdlwiPlxyXG4gICAgICAgICAgICAgICAgICA8aW5wdXQgKm5nRm9yPVwibGV0IHF1aWNrQ29tbWVudCBvZiBhY3Rpdml0eS5xdWlja0NvbW1lbnRMaXN0IDsgbGV0IGkgPSBpbmRleDtcIiBjbGFzcz1cInF1aWNrTm90ZXNCb3R0b25cIiB0eXBlPVwiYnV0dG9uXCJcclxuICAgICAgICAgICAgICAgICAgICB2YWx1ZT1cInt7aSsxfX1cIiAoY2xpY2spPVwibG9hZFF1aWNrQ29tbWVudChpKVwiIHRpdGxlPVwie3txdWlja0NvbW1lbnR9fVwiPlxyXG4gICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic3VibWl0RGl2XCI+XHJcbiAgICAgICAgICAgICAgICAgIDxpbnB1dCBjbGFzcz1cInN1Ym1pdEJ1dHRvblwiIHR5cGU9XCJidXR0b25cIiB2YWx1ZT1cIlN1Ym1pdFwiIChjbGljayk9XCJhY3Rpdml0eVNhdmUoZmFsc2UpXCI+XHJcbiAgICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9mb3JtPlxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG48ZGl2ICpuZ0lmPVwiIWlzQWN0aXZpdHlNYXhpbWl6ZWRcIiBjbGFzcz1cImNhbGxEaXNwbGF5XCI+XHJcbiAgPGRpdiBjbGFzcz1cImVkaXRvciBjYWxsSGVhZGVyXCI+XHJcbiAgICA8bGFiZWwgY2xhc3M9XCJoZWFkZXJMYWJlbFwiPlxyXG4gICAgICA8Yj5BY3Rpdml0eSBJbmZvcm1hdGlvbjwvYj5cclxuICAgIDwvbGFiZWw+XHJcbiAgICA8aW1nIGNsYXNzPVwiVmlld1Jlc2l6ZUltYWdlXCIgc3JjPVwiYXNzZXRzL2ltYWdlcy9zZWN0aW9uX2V4cGFuZC5wbmdcIiAoY2xpY2spPVwiaXNBY3Rpdml0eU1heGltaXplZCA9IHRydWVcIiB0aXRsZT1cIkV4cGFuZFwiPlxyXG4gIDwvZGl2PlxyXG4iXX0=

package/esm2022/projects/UILibrary/src/app/components/chat-box/chat-box.component.mjs

@@ -0,0 +1,137 @@
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { IChatMessageType } from '../../models/chat.message';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "../chat-message/chat-message.component";
+export class ChatBoxComponent {
+    renderer;
+    settings;
+    isTyping = false;
+    messages;
+    newMsgs;
+    lastCount = -1;
+    _isAgentTyping = false;
+    isAgentTyping = new EventEmitter();
+    newMessage = new EventEmitter();
+    newMessageText = '';
+    messagesContainer;
+    autofocus;
+    usernameToColor = {};
+    colors = [
+        '#c2c4c4',
+        '#ffab91',
+        '#f48fb1',
+        '#29b6f6',
+        '#e1bee7',
+        '#9ccc65',
+        '#ffc107',
+        '#26c6da',
+        '#cddc39',
+    ];
+    colorsIndex = 0;
+    agentColor = '#2db0e0';
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        this.renderer.selectRootElement('#autofocus').focus();
+    }
+    ngAfterViewInit() {
+        this.renderer.selectRootElement('#autofocus').focus();
+    }
+    updatedMessage() {
+        try {
+            if (typeof this.newMsgs !== 'undefined' && this.newMsgs.length > 0) {
+                return this.newMsgs;
+            }
+            else {
+                return this.messages;
+            }
+        }
+        catch (e) { }
+        finally {
+            this.scrollToBottom();
+        }
+    }
+    ngAfterViewChecked() {
+        if (this.lastCount !== this.messages.length) {
+            this.lastCount = this.messages.length;
+            this.scrollToBottom();
+        }
+    }
+    getColor(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];
+        }
+    }
+    shouldAlignRight(message) {
+        return message.type && message.type === IChatMessageType.AGENT;
+    }
+    sendNewMessage(event) {
+        event.preventDefault();
+        if (this.newMessageText) {
+            this.newMessage.emit(this.newMessageText);
+            this.newMessageText = '';
+        }
+        this.renderer.selectRootElement('#autofocus').focus();
+    }
+    setOnFocus(event) {
+        this.renderer.selectRootElement('#autofocus').focus();
+    }
+    onNewMessageFocus(event) {
+        const isTyping = event && this.newMessageText.length > 0;
+        if (isTyping !== this._isAgentTyping) {
+            this._isAgentTyping = isTyping;
+            this.isAgentTyping.emit(isTyping);
+        }
+    }
+    onKeyup() {
+        const isTyping = this.newMessageText.length > 0;
+        if (isTyping !== this._isAgentTyping) {
+            this._isAgentTyping = isTyping;
+            this.isAgentTyping.emit(isTyping);
+        }
+    }
+    scrollToBottom() {
+        try {
+            this.messagesContainer.nativeElement.scrollTop = this.messagesContainer.nativeElement.scrollHeight;
+        }
+        catch (e) { }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ChatBoxComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ChatBoxComponent, selector: "app-chat-box", inputs: { settings: "settings", isTyping: "isTyping", messages: "messages", newMsgs: "newMsgs" }, outputs: { isAgentTyping: "isAgentTyping", newMessage: "newMessage" }, viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["MessagesContainer"], descendants: true, static: true }, { propertyName: "autofocus", first: true, predicate: ["autofocus"], descendants: true }], ngImport: i0, template: "<div class=\"chat-box\">\r\n  <div #MessagesContainer id=\"msgScroll\" class=\"messages\" [style.max-height]='settings.maxHeight'>\r\n    <ng-container *ngFor=\"let message of updatedMessage()\">\r\n      <app-chat-message class=\"chat-line\" [alignRight]=\"shouldAlignRight(message)\" [message]=\"message.text\" [username]=\"message.username\" (focusOn)=\"setOnFocus($event)\"\r\n        [timestamp]=\"message.timestamp\" [image]=\"message.userIcon.toString()\" [fallbackImage]=\"settings.fallbackUserIcon.toString()\" [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\r\n\r\n<div class=\"message-box\">\r\n  <textarea id=\"autofocus\" tabindex=\"1\" #NewMessageText [(ngModel)]=\"newMessageText\" type=\"text\" class=\"message-input scroll\" placeholder=\"Type a message...\"\r\n  (focus)=\"onNewMessageFocus(true)\" (keydown.enter)=\"sendNewMessage($event)\" (keyup)='onKeyup()' [disabled]=\"settings.disableSendMessage\" ></textarea>\r\n  <button type=\"submit\" class=\"message-submit\" (click)=\"sendNewMessage($event)\" [disabled]=\"settings.disableSendMessage\">Send</button>\r\n</div>\r\n</div>\r\n", styles: [".message-box{flex:1 1 0;width:99%;background:#fff;margin:auto;position:relative;border-radius:5px;height:100%;border:1px solid #ccc}.message-box .message-input{background:none;border:none;outline:none!important;resize:none;font-family:inherit;font-size:.8rem;height:100%;margin:0;padding:10px 7px;width:89%;color:#444}.message-box textarea:focus:-webkit-placeholder{color:transparent}.message-box .message-submit{position:absolute;z-index:1;top:26px;right:5px;background:#1e72ba;border:none;color:#fff;font-size:10px;line-height:1;padding:6px 10px;border-radius:5px;outline:none!important;transition:background .2s ease;cursor:pointer}.scroll::-webkit-scrollbar{display:none}.chat-box{background-color:#f4f5fb;padding:5px}.messages{padding:5px;overflow:auto;min-height:50px}.chat-line{margin-bottom:15px}.new-message{border-top:solid black 1px;display:flex;align-content:center;height:25px}.new-message input[type=text]{flex:1 1 0;background-color:#f4f5fb;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:none}.typing-indicator{font-size:.8em;font-style:italic}.typing-indicator span{display:inline-block;height:4px;width:4px;border-radius:50%;background-color:#9e9e9e;margin:0 1px;opacity:.2}.typing-indicator span:nth-of-type(1){animation:1.5s blink infinite .33333s}.typing-indicator span:nth-of-type(2){animation:1.5s blink infinite .66666s}.typing-indicator span:nth-of-type(3){animation:1.5s blink infinite .99999s}@keyframes chat-box_blink{50%{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.ChatMessageComponent, selector: "app-chat-message", inputs: ["message", "alignRight", "username", "color", "timestamp", "image", "fallbackImage"], outputs: ["focusOn"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ChatBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-chat-box', template: "<div class=\"chat-box\">\r\n  <div #MessagesContainer id=\"msgScroll\" class=\"messages\" [style.max-height]='settings.maxHeight'>\r\n    <ng-container *ngFor=\"let message of updatedMessage()\">\r\n      <app-chat-message class=\"chat-line\" [alignRight]=\"shouldAlignRight(message)\" [message]=\"message.text\" [username]=\"message.username\" (focusOn)=\"setOnFocus($event)\"\r\n        [timestamp]=\"message.timestamp\" [image]=\"message.userIcon.toString()\" [fallbackImage]=\"settings.fallbackUserIcon.toString()\" [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\r\n\r\n<div class=\"message-box\">\r\n  <textarea id=\"autofocus\" tabindex=\"1\" #NewMessageText [(ngModel)]=\"newMessageText\" type=\"text\" class=\"message-input scroll\" placeholder=\"Type a message...\"\r\n  (focus)=\"onNewMessageFocus(true)\" (keydown.enter)=\"sendNewMessage($event)\" (keyup)='onKeyup()' [disabled]=\"settings.disableSendMessage\" ></textarea>\r\n  <button type=\"submit\" class=\"message-submit\" (click)=\"sendNewMessage($event)\" [disabled]=\"settings.disableSendMessage\">Send</button>\r\n</div>\r\n</div>\r\n", styles: [".message-box{flex:1 1 0;width:99%;background:#fff;margin:auto;position:relative;border-radius:5px;height:100%;border:1px solid #ccc}.message-box .message-input{background:none;border:none;outline:none!important;resize:none;font-family:inherit;font-size:.8rem;height:100%;margin:0;padding:10px 7px;width:89%;color:#444}.message-box textarea:focus:-webkit-placeholder{color:transparent}.message-box .message-submit{position:absolute;z-index:1;top:26px;right:5px;background:#1e72ba;border:none;color:#fff;font-size:10px;line-height:1;padding:6px 10px;border-radius:5px;outline:none!important;transition:background .2s ease;cursor:pointer}.scroll::-webkit-scrollbar{display:none}.chat-box{background-color:#f4f5fb;padding:5px}.messages{padding:5px;overflow:auto;min-height:50px}.chat-line{margin-bottom:15px}.new-message{border-top:solid black 1px;display:flex;align-content:center;height:25px}.new-message input[type=text]{flex:1 1 0;background-color:#f4f5fb;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:none}.typing-indicator{font-size:.8em;font-style:italic}.typing-indicator span{display:inline-block;height:4px;width:4px;border-radius:50%;background-color:#9e9e9e;margin:0 1px;opacity:.2}.typing-indicator span:nth-of-type(1){animation:1.5s blink infinite .33333s}.typing-indicator span:nth-of-type(2){animation:1.5s blink infinite .66666s}.typing-indicator span:nth-of-type(3){animation:1.5s blink infinite .99999s}@keyframes chat-box_blink{50%{opacity:1}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { settings: [{
+                type: Input
+            }], isTyping: [{
+                type: Input
+            }], messages: [{
+                type: Input
+            }], newMsgs: [{
+                type: Input
+            }], isAgentTyping: [{
+                type: Output
+            }], newMessage: [{
+                type: Output
+            }], messagesContainer: [{
+                type: ViewChild,
+                args: ['MessagesContainer', { static: true }]
+            }], autofocus: [{
+                type: ViewChild,
+                args: ['autofocus', { static: false }]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1ib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9jaGF0LWJveC9jaGF0LWJveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2NoYXQtYm94L2NoYXQtYm94LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUFrRSxNQUFNLGVBQWUsQ0FBQztBQUNsSixPQUFPLEVBQWdCLGdCQUFnQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7Ozs7O0FBUTNFLE1BQU0sT0FBTyxnQkFBZ0I7SUFnQ1A7SUEvQlgsUUFBUSxDQUFnQjtJQUN4QixRQUFRLEdBQUcsS0FBSyxDQUFDO0lBRWpCLFFBQVEsQ0FBaUI7SUFDekIsT0FBTyxDQUFpQjtJQUN6QixTQUFTLEdBQUcsQ0FBQyxDQUFDLENBQUM7SUFFdkIsY0FBYyxHQUFHLEtBQUssQ0FBQztJQUNiLGFBQWEsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO0lBRTVDLFVBQVUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBQ2xELGNBQWMsR0FBRyxFQUFFLENBQUM7SUFFOEIsaUJBQWlCLENBQWE7SUFDckMsU0FBUyxDQUFhO0lBRWpFLGVBQWUsR0FBbUMsRUFBRSxDQUFDO0lBQ3JELE1BQU0sR0FBRztRQUNQLFNBQVM7UUFDVCxTQUFTO1FBQ1QsU0FBUztRQUNULFNBQVM7UUFDVCxTQUFTO1FBQ1QsU0FBUztRQUNULFNBQVM7UUFDVCxTQUFTO1FBQ1QsU0FBUztLQUNWLENBQUM7SUFDRixXQUFXLEdBQUcsQ0FBQyxDQUFDO0lBQ2hCLFVBQVUsR0FBRyxTQUFT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dXQsIEV2ZW50RW1pdHRlciwgVmlld0NoaWxkLCBFbGVtZW50UmVmLCBBZnRlclZpZXdDaGVja2VkLCBBZnRlclZpZXdJbml0LCBPbkluaXQsIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJQ2hhdE1lc3NhZ2UsIElDaGF0TWVzc2FnZVR5cGUgfSBmcm9tICcuLi8uLi9tb2RlbHMvY2hhdC5tZXNzYWdlJztcclxuaW1wb3J0IHsgSUNoYXRTZXR0aW5ncyB9IGZyb20gJy4uLy4uL21vZGVscy9jaGF0LnNldHRpbmdzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYXBwLWNoYXQtYm94JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vY2hhdC1ib3guY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2NoYXQtYm94LmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDaGF0Qm94Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3Q2hlY2tlZCwgQWZ0ZXJWaWV3SW5pdCwgT25Jbml0IHtcclxuICBASW5wdXQoKSBzZXR0aW5nczogSUNoYXRTZXR0aW5ncztcclxuICBASW5wdXQoKSBpc1R5cGluZyA9IGZhbHNlO1xyXG5cclxuICBASW5wdXQoKSBtZXNzYWdlczogSUNoYXRNZXNzYWdlW107XHJcbiAgQElucHV0KCkgbmV3TXNnczogSUNoYXRNZXNzYWdlW107XHJcbiAgcHJpdmF0ZSBsYXN0Q291bnQgPSAtMTtcclxuXHJcbiAgX2lzQWdlbnRUeXBpbmcgPSBmYWxzZTtcclxuICBAT3V0cHV0KCkgaXNBZ2VudFR5cGluZyA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcclxuXHJcbiAgQE91dHB1dCgpIG5ld01lc3NhZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcclxuICBuZXdNZXNzYWdlVGV4dCA9ICcnO1xyXG5cclxuICBAVmlld0NoaWxkKCdNZXNzYWdlc0NvbnRhaW5lcicsIHsgc3RhdGljOiB0cnVlIH0pIG1lc3NhZ2VzQ29udGFpbmVyOiBFbGVtZW50UmVmO1xyXG4gIEBWaWV3Q2hpbGQoJ2F1dG9mb2N1cycsIHsgc3RhdGljOiBmYWxzZSB9KSBhdXRvZm9jdXM6IEVsZW1lbnRSZWY7XHJcblxyXG4gIHVzZXJuYW1lVG9Db2xvcjogeyBbdXNlcm5hbWU6IHN0cmluZ106IHN0cmluZyB9ID0ge307XHJcbiAgY29sb3JzID0gW1xyXG4gICAgJyNjMmM0YzQnLFxyXG4gICAgJyNmZmFiOTEnLFxyXG4gICAgJyNmNDhmYjEnLFxyXG4gICAgJyMyOWI2ZjYnLFxyXG4gICAgJyNlMWJlZTcnLFxyXG4gICAgJyM5Y2NjNjUnLFxyXG4gICAgJyNmZmMxMDcnLFxyXG4gICAgJyMyNmM2ZGEnLFxyXG4gICAgJyNjZGRjMzknLFxyXG4gIF07XHJcbiAgY29sb3JzSW5kZXggPSAwO1xyXG4gIGFnZW50Q29sb3IgPSAnIzJkYjBlMCc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVuZGVyZXI6UmVuZGVyZXIyKSB7XHJcbiAgfVxyXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICAgIHRoaXMucmVuZGVyZXIuc2VsZWN0Um9vdEVsZW1lbnQoJyNhdXRvZm9jdXMnKS5mb2N1cygpO1xyXG4gIH1cclxuXHJcbiBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNlbGVjdFJvb3RFbGVtZW50KCcjYXV0b2ZvY3VzJykuZm9jdXMoKTtcclxuICB9XHJcblxyXG4gIHVwZGF0ZWRNZXNzYWdlKCk6IElDaGF0TWVzc2FnZVtdICB7XHJcbiAgICB0cnkge1xyXG4gICAgICBpZiAodHlwZW9mIHRoaXMubmV3TXNncyAhPT0gJ3VuZGVmaW5lZCcgJiYgdGhpcy5uZXdNc2dzLmxlbmd0aCA+IDApIHtcclxuICAgICAgICByZXR1cm4gdGhpcy5uZXdNc2dzO1xyXG4gICAgICB9IGVsc2Uge1xyXG4gICAgICAgIHJldHVybiB0aGlzLm1lc3NhZ2VzO1xyXG4gICAgICB9XHJcbiAgICB9Y2F0Y2ggKGUpIHsgfVxyXG4gICAgZmluYWxseSB7XHJcbiAgICAgIHRoaXMuc2Nyb2xsVG9Cb3R0b20oKTtcclxuICAgIH1cclxuXHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyVmlld0NoZWNrZWQoKSB7XHJcbiAgICBpZiAodGhpcy5sYXN0Q291bnQgIT09IHRoaXMubWVzc2FnZXMubGVuZ3RoKSB7XHJcbiAgICAgIHRoaXMubGFzdENvdW50ID0gdGhpcy5tZXNzYWdlcy5sZW5ndGg7XHJcbiAgICAgIHRoaXMuc2Nyb2xsVG9Cb3R0b20oKTtcclxuXHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBnZXRDb2xvcihtZXNzYWdlOiBJQ2hhdE1lc3NhZ2UpIHtcclxuICAgIGlmIChtZXNzYWdlLnR5cGUgJiYgbWVzc2FnZS50eXBlID09PSBJQ2hhdE1lc3NhZ2VUeXBlLkFHRU5UKSB7XHJcbiAgICAgIHJldHVybiB0aGlzLmFnZW50Q29sb3I7XHJcbiAgICB9IGVsc2UgaWYgKG1lc3NhZ2UudXNlcm5hbWUpIHtcclxuICAgICAgaWYgKCF0aGlzLnVzZXJuYW1lVG9Db2xvclttZXNzYWdlLnVzZXJuYW1lXSkge1xyXG4gICAgICAgIHRoaXMudXNlcm5hbWVUb0NvbG9yW21lc3NhZ2UudXNlcm5hbWVdID0gdGhpcy5jb2xvcnNbdGhpcy5jb2xvcnNJbmRleF07XHJcbiAgICAgICAgdGhpcy5jb2xvcnNJbmRleCA9ICh0aGlzLmNvbG9yc0luZGV4ICsgMSkgJSB0aGlzLmNvbG9ycy5sZW5ndGg7XHJcbiAgICAgIH1cclxuICAgICAgcmV0dXJuIHRoaXMudXNlcm5hbWVUb0NvbG9yW21lc3NhZ2UudXNlcm5hbWVdO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgcmV0dXJuIHRoaXMuY29sb3JzWzBdO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgc2hvdWxkQWxpZ25SaWdodChtZXNzYWdlOiBJQ2hhdE1lc3NhZ2UpIHtcclxuICAgIHJldHVybiBtZXNzYWdlLnR5cGUgJiYgbWVzc2FnZS50eXBlID09PSBJQ2hhdE1lc3NhZ2VUeXBlLkFHRU5UO1xyXG4gIH1cclxuXHJcbiAgc2VuZE5ld01lc3NhZ2UoZXZlbnQpIHtcclxuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcbiAgICBpZiAodGhpcy5uZXdNZXNzYWdlVGV4dCkge1xyXG4gICAgICB0aGlzLm5ld01lc3NhZ2UuZW1pdCh0aGlzLm5ld01lc3NhZ2VUZXh0KTtcclxuICAgICAgdGhpcy5uZXdNZXNzYWdlVGV4dCA9ICcnO1xyXG4gICAgfVxyXG4gICAgdGhpcy5yZW5kZXJlci5zZWxlY3RSb290RWxlbWVudCgnI2F1dG9mb2N1cycpLmZvY3VzKCk7XHJcbiAgfVxyXG5cclxuICBzZXRPbkZvY3VzKGV2ZW50KSAge1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZWxlY3RSb290RWxlbWVudCgnI2F1dG9mb2N1cycpLmZvY3VzKCk7XHJcbiAgfVxyXG5cclxuICBvbk5ld01lc3NhZ2VGb2N1cyhldmVudDogYm9vbGVhbikge1xyXG4gICAgY29uc3QgaXNUeXBpbmcgPSBldmVudCAmJiB0aGlzLm5ld01lc3NhZ2VUZXh0Lmxlbmd0aCA+IDA7XHJcbiAgICBpZiAoaXNUeXBpbmcgIT09IHRoaXMuX2lzQWdlbnRUeXBpbmcpIHtcclxuICAgICAgdGhpcy5faXNBZ2VudFR5cGluZyA9IGlzVHlwaW5nO1xyXG4gICAgICB0aGlzLmlzQWdlbnRUeXBpbmcuZW1pdChpc1R5cGluZyk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBvbktleXVwKCkge1xyXG4gICAgY29uc3QgaXNUeXBpbmcgPSB0aGlzLm5ld01lc3NhZ2VUZXh0Lmxlbmd0aCA+IDA7XHJcbiAgICBpZiAoaXNUeXBpbmcgIT09IHRoaXMuX2lzQWdlbnRUeXBpbmcpIHtcclxuICAgICAgdGhpcy5faXNBZ2VudFR5cGluZyA9IGlzVHlwaW5nO1xyXG4gICAgICB0aGlzLmlzQWdlbnRUeXBpbmcuZW1pdChpc1R5cGluZyk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBzY3JvbGxUb0JvdHRvbSgpIHtcclxuICAgIHRyeSB7XHJcbiAgICAgIHRoaXMubWVzc2FnZXNDb250YWluZXIubmF0aXZlRWxlbWVudC5zY3JvbGxUb3AgPSB0aGlzLm1lc3NhZ2VzQ29udGFpbmVyLm5hdGl2ZUVsZW1lbnQuc2Nyb2xsSGVpZ2h0O1xyXG4gICAgfVxyXG4gICAgY2F0Y2ggKGUpIHsgfVxyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiY2hhdC1ib3hcIj5cclxuICA8ZGl2ICNNZXNzYWdlc0NvbnRhaW5lciBpZD1cIm1zZ1Njcm9sbFwiIGNsYXNzPVwibWVzc2FnZXNcIiBbc3R5bGUubWF4LWhlaWdodF09J3NldHRpbmdzLm1heEhlaWdodCc+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBtZXNzYWdlIG9mIHVwZGF0ZWRNZXNzYWdlKClcIj5cclxuICAgICAgPGFwcC1jaGF0LW1lc3NhZ2UgY2xhc3M9XCJjaGF0LWxpbmVcIiBbYWxpZ25SaWdodF09XCJzaG91bGRBbGlnblJpZ2h0KG1lc3NhZ2UpXCIgW21lc3NhZ2VdPVwibWVzc2FnZS50ZXh0XCIgW3VzZXJuYW1lXT1cIm1lc3NhZ2UudXNlcm5hbWVcIiAoZm9jdXNPbik9XCJzZXRPbkZvY3VzKCRldmVudClcIlxyXG4gICAgICAgIFt0aW1lc3RhbXBdPVwibWVzc2FnZS50aW1lc3RhbXBcIiBbaW1hZ2VdPVwibWVzc2FnZS51c2VySWNvbi50b1N0cmluZygpXCIgW2ZhbGxiYWNrSW1hZ2VdPVwic2V0dGluZ3MuZmFsbGJhY2tVc2VySWNvbi50b1N0cmluZygpXCIgW2NvbG9yXT1cImdldENvbG9yKG1lc3NhZ2UpXCI+XHJcbiAgICAgIDwvYXBwLWNoYXQtbWVzc2FnZT5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG5cclxuICAgIDxkaXYgKm5nSWY9XCJpc1R5cGluZ1wiIGNsYXNzPVwidHlwaW5nLWluZGljYXRvclwiPlxyXG4gICAgICBTb21lb25lIGlzIHR5cGluZ1xyXG4gICAgICA8c3Bhbj48L3NwYW4+XHJcbiAgICAgIDxzcGFuPjwvc3Bhbj5cclxuICAgICAgPHNwYW4+PC9zcGFuPlxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcblxyXG5cclxuXHJcbjxkaXYgY2xhc3M9XCJtZXNzYWdlLWJveFwiPlxyXG4gIDx0ZXh0YXJlYSBpZD1cImF1dG9mb2N1c1wiIHRhYmluZGV4PVwiMVwiICNOZXdNZXNzYWdlVGV4dCBbKG5nTW9kZWwpXT1cIm5ld01lc3NhZ2VUZXh0XCIgdHlwZT1cInRleHRcIiBjbGFzcz1cIm1lc3NhZ2UtaW5wdXQgc2Nyb2xsXCIgcGxhY2Vob2xkZXI9XCJUeXBlIGEgbWVzc2FnZS4uLlwiXHJcbiAgKGZvY3VzKT1cIm9uTmV3TWVzc2FnZUZvY3VzKHRydWUpXCIgKGtleWRvd24uZW50ZXIpPVwic2VuZE5ld01lc3NhZ2UoJGV2ZW50KVwiIChrZXl1cCk9J29uS2V5dXAoKScgW2Rpc2FibGVkXT1cInNldHRpbmdzLmRpc2FibGVTZW5kTWVzc2FnZVwiID48L3RleHRhcmVhPlxyXG4gIDxidXR0b24gdHlwZT1cInN1Ym1pdFwiIGNsYXNzPVwibWVzc2FnZS1zdWJtaXRcIiAoY2xpY2spPVwic2VuZE5ld01lc3NhZ2UoJGV2ZW50KVwiIFtkaXNhYmxlZF09XCJzZXR0aW5ncy5kaXNhYmxlU2VuZE1lc3NhZ2VcIj5TZW5kPC9idXR0b24+XHJcbjwvZGl2PlxyXG48L2Rpdj5cclxuIl19

package/esm2022/projects/UILibrary/src/app/components/chat-message/chat-message.component.mjs

@@ -0,0 +1,40 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class ChatMessageComponent {
+    message;
+    alignRight = false;
+    username;
+    color;
+    timestamp;
+    image;
+    fallbackImage;
+    focusOn = new EventEmitter();
+    constructor() { }
+    ngOnInit() {
+        this.focusOn.emit(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ChatMessageComponent, selector: "app-chat-message", inputs: { message: "message", alignRight: "alignRight", username: "username", color: "color", timestamp: "timestamp", image: "image", fallbackImage: "fallbackImage" }, outputs: { focusOn: "focusOn" }, ngImport: i0, 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  </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  <span *ngIf=\"timestamp\" class=\"timestamp\">{{timestamp}}</span>\r\n</div>\r\n", styles: [":host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.timestamp{font-size:10px;margin-right:30px;margin-left:30px}.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{margin-left:5px}.right-message>.message-header .username{margin-left:5px}.left-message>.message-header{margin-left:1px}.left-message>.message-header .image{margin-right:5px}.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:1em;padding:6px;font-style:normal;font-size:.8em;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;border-left:10px solid black;border-color:inherit;border-right:10px solid transparent;border-bottom:10px solid transparent;left:1px;bottom:-2px}.right-message .message-body:after{content:\"\";position:absolute;border-left:10px solid transparent;border-top:10px solid black;border-top-color:inherit;border-bottom:0px solid transparent;right:1px;bottom:-2px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ChatMessageComponent, decorators: [{
+            type: Component,
+            args: [{ 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  </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  <span *ngIf=\"timestamp\" class=\"timestamp\">{{timestamp}}</span>\r\n</div>\r\n", styles: [":host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.timestamp{font-size:10px;margin-right:30px;margin-left:30px}.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{margin-left:5px}.right-message>.message-header .username{margin-left:5px}.left-message>.message-header{margin-left:1px}.left-message>.message-header .image{margin-right:5px}.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:1em;padding:6px;font-style:normal;font-size:.8em;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;border-left:10px solid black;border-color:inherit;border-right:10px solid transparent;border-bottom:10px solid transparent;left:1px;bottom:-2px}.right-message .message-body:after{content:\"\";position:absolute;border-left:10px solid transparent;border-top:10px solid black;border-top-color:inherit;border-bottom:0px solid transparent;right:1px;bottom:-2px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { message: [{
+                type: Input
+            }], alignRight: [{
+                type: Input
+            }], username: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], timestamp: [{
+                type: Input
+            }], image: [{
+                type: Input
+            }], fallbackImage: [{
+                type: Input
+            }], focusOn: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1tZXNzYWdlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL1VJTGlicmFyeS9zcmMvYXBwL2NvbXBvbmVudHMvY2hhdC1tZXNzYWdlL2NoYXQtbWVzc2FnZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2NoYXQtbWVzc2FnZS9jaGF0LW1lc3NhZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBTy9FLE1BQU0sT0FBTyxvQkFBb0I7SUFDdEIsT0FBTyxDQUFTO0lBQ2hCLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDbkIsUUFBUSxDQUFTO0lBQ2pCLEtBQUssQ0FBUztJQUNkLFNBQVMsQ0FBUztJQUNsQixLQUFLLENBQVM7SUFDZCxhQUFhLENBQVM7SUFDckIsT0FBTyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFFNUMsZ0JBQWdCLENBQUM7SUFFakIsUUFBUTtRQUNOLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzFCLENBQUM7dUdBZFUsb0JBQW9COzJGQUFwQixvQkFBb0IsaVFDUGpDLDZwQkFlQTs7MkZEUmEsb0JBQW9CO2tCQUxoQyxTQUFTOytCQUNFLGtCQUFrQjswRUFLbkIsT0FBTztzQkFBZixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDSSxPQUFPO3NCQUFoQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhcHAtY2hhdC1tZXNzYWdlJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vY2hhdC1tZXNzYWdlLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9jaGF0LW1lc3NhZ2UuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ2hhdE1lc3NhZ2VDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBJbnB1dCgpIG1lc3NhZ2U6IHN0cmluZztcclxuICBASW5wdXQoKSBhbGlnblJpZ2h0ID0gZmFsc2U7XHJcbiAgQElucHV0KCkgdXNlcm5hbWU6IHN0cmluZztcclxuICBASW5wdXQoKSBjb2xvcjogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHRpbWVzdGFtcDogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGltYWdlOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgZmFsbGJhY2tJbWFnZTogc3RyaW5nO1xyXG4gIEBPdXRwdXQoKSBmb2N1c09uID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy5mb2N1c09uLmVtaXQodHJ1ZSk7XHJcbiAgfVxyXG5cclxuXHJcbn1cclxuIiwiPGRpdiBbY2xhc3NdPVwiYWxpZ25SaWdodD8gJ21lc3NhZ2UgcmlnaHQtbWVzc2FnZScgOiAnbWVzc2FnZSBsZWZ0LW1lc3NhZ2UnXCI+XHJcbiAgPGRpdiBjbGFzcz1cIm1lc3NhZ2UtaGVhZGVyXCI+XHJcbiAgICA8aW1nICpuZ0lmPVwiaW1hZ2VcIiBjbGFzcz1cImltYWdlXCIgW3NyY109XCJpbWFnZVwiIChlcnJvcik9XCJpbWFnZSA9IGZhbGxiYWNrSW1hZ2VcIiBbc3R5bGUuYm9yZGVyLWNvbG9yXT1cImNvbG9yXCIgLz5cclxuICAgIDxzcGFuICpuZ0lmPVwidXNlcm5hbWVcIiBjbGFzcz1cInVzZXJuYW1lXCI+e3t1c2VybmFtZX19PC9zcGFuPlxyXG4gIDwvZGl2PlxyXG5cclxuICA8ZGl2IGNsYXNzPVwibWVzc2FnZS1ib2R5LWNvbnRhaW5lclwiPlxyXG4gICAgPGRpdj5cclxuICAgICAgPGRpdiBjbGFzcz1cIm1lc3NhZ2UtYm9keVwiIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImNvbG9yXCIgW3N0eWxlLmJvcmRlci1jb2xvcl09XCJjb2xvclwiPlxyXG4gICAgICAgIDxzcGFuIFtpbm5lckhUTUxdPVwibWVzc2FnZVwiPjwvc3Bhbj5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuICA8c3BhbiAqbmdJZj1cInRpbWVzdGFtcFwiIGNsYXNzPVwidGltZXN0YW1wXCI+e3t0aW1lc3RhbXB9fTwvc3Bhbj5cclxuPC9kaXY+XHJcbiJdfQ==

package/esm2022/projects/UILibrary/src/app/components/create/create.component.mjs

@@ -0,0 +1,34 @@
+import { Component, Input, EventEmitter, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class CreateComponent {
+    CreateNewEntity = new EventEmitter();
+    isCreateMaximized;
+    Entities;
+    constructor() {
+        this.isCreateMaximized = true;
+    }
+    createNewEntity(type) {
+        this.CreateNewEntity.emit(type);
+    }
+    getEntities() {
+        return Object.keys(this.Entities);
+    }
+    getDisplay(entity) {
+        return entity.substring(0, entity.indexOf('|'));
+    }
+    getImage(entity) {
+        return entity.substring(entity.indexOf('|') + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CreateComponent, selector: "amc-create", inputs: { Entities: "Entities" }, outputs: { CreateNewEntity: "CreateNewEntity" }, ngImport: i0, template: "<div *ngIf=\"isCreateMaximized\" class=\"callDisplay\">\r\n  <div class=\"editor callHeader\">\r\n    <label class=\"headerLabel\">\r\n      <b>Create New</b>\r\n    </label>\r\n    <img class=\"ViewResizeImage\" src=\"/assets/images/section_collapse.png\" (click)=\"isCreateMaximized = false\"\r\n      title=\"Collapse\" />\r\n  </div>\r\n  <div class=\"callBody\">\r\n    <div *ngIf=\"Entities\" class=\"container\">\r\n      <div *ngFor=\"let entity of getEntities()\" class=\"createNewLabel\" (click)=\"createNewEntity(entity)\"\r\n        title=\"{{ getDisplay(Entities[entity]) }}\">\r\n        <img class=\"createEntityImages\" src=\"{{ getImage(Entities[entity]) }}\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"!isCreateMaximized\" class=\"callDisplay\">\r\n  <div class=\"editor callHeader\">\r\n    <label class=\"headerLabel\">\r\n      <b>Create New</b>\r\n    </label>\r\n    <img class=\"ViewResizeImage\" src=\"/assets/images/section_expand.png\" (click)=\"isCreateMaximized = true\"\r\n      title=\"Expand\" />\r\n  </div>\r\n</div>\r\n", styles: [".callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important;border:1px solid #939598!important}.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}.createEntityImages{width:30px;height:25px;margin-bottom:5px;margin-top:5px;cursor:pointer;padding-left:5px}.createNewLabel{display:inline-block;margin-left:5%;margin-right:5%}.container{padding-right:0;padding-left:0;font-size:10px;text-align:center}.callBody{border:1px solid #939598;border-top-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{background-color:#fff;display:grid}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CreateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'amc-create', template: "<div *ngIf=\"isCreateMaximized\" class=\"callDisplay\">\r\n  <div class=\"editor callHeader\">\r\n    <label class=\"headerLabel\">\r\n      <b>Create New</b>\r\n    </label>\r\n    <img class=\"ViewResizeImage\" src=\"/assets/images/section_collapse.png\" (click)=\"isCreateMaximized = false\"\r\n      title=\"Collapse\" />\r\n  </div>\r\n  <div class=\"callBody\">\r\n    <div *ngIf=\"Entities\" class=\"container\">\r\n      <div *ngFor=\"let entity of getEntities()\" class=\"createNewLabel\" (click)=\"createNewEntity(entity)\"\r\n        title=\"{{ getDisplay(Entities[entity]) }}\">\r\n        <img class=\"createEntityImages\" src=\"{{ getImage(Entities[entity]) }}\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"!isCreateMaximized\" class=\"callDisplay\">\r\n  <div class=\"editor callHeader\">\r\n    <label class=\"headerLabel\">\r\n      <b>Create New</b>\r\n    </label>\r\n    <img class=\"ViewResizeImage\" src=\"/assets/images/section_expand.png\" (click)=\"isCreateMaximized = true\"\r\n      title=\"Expand\" />\r\n  </div>\r\n</div>\r\n", styles: [".callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important;border:1px solid #939598!important}.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}.createEntityImages{width:30px;height:25px;margin-bottom:5px;margin-top:5px;cursor:pointer;padding-left:5px}.createNewLabel{display:inline-block;margin-left:5%;margin-right:5%}.container{padding-right:0;padding-left:0;font-size:10px;text-align:center}.callBody{border:1px solid #939598;border-top-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{background-color:#fff;display:grid}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { CreateNewEntity: [{
+                type: Output
+            }], Entities: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3JlYXRlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL1VJTGlicmFyeS9zcmMvYXBwL2NvbXBvbmVudHMvY3JlYXRlL2NyZWF0ZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2NyZWF0ZS9jcmVhdGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBT3ZFLE1BQU0sT0FBTyxlQUFlO0lBQ2hCLGVBQWUsR0FBeUIsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQUM3RSxpQkFBaUIsQ0FBVTtJQUNsQixRQUFRLENBQU07SUFFdkI7UUFDRSxJQUFJLENBQUMsaUJBQWlCLEdBQUcsSUFBSSxDQUFDO0lBQ2hDLENBQUM7SUFDRCxlQUFlLENBQUMsSUFBWTtRQUMxQixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQsV0FBVztRQUNULE9BQU8sTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDcEMsQ0FBQztJQUVELFVBQVUsQ0FBQyxNQUFNO1FBQ2IsT0FBTyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUMsRUFBRSxNQUFNLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7SUFDcEQsQ0FBQztJQUVELFFBQVEsQ0FBQyxNQUFNO1FBQ1gsT0FBTyxNQUFNLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7SUFDckQsQ0FBQzt1R0F0QlUsZUFBZTsyRkFBZixlQUFlLHFJQ1A1Qiw0akNBMEJBOzsyRkRuQmEsZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxZQUFZOzBFQUtaLGVBQWU7c0JBQXhCLE1BQU07Z0JBRUUsUUFBUTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIEV2ZW50RW1pdHRlciwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FtYy1jcmVhdGUnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9jcmVhdGUuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2NyZWF0ZS5jb21wb25lbnQuY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIENyZWF0ZUNvbXBvbmVudCB7XHJcbiAgQE91dHB1dCgpIENyZWF0ZU5ld0VudGl0eTogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcclxuICBpc0NyZWF0ZU1heGltaXplZDogYm9vbGVhbjtcclxuICBASW5wdXQoKSBFbnRpdGllczogYW55O1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICAgIHRoaXMuaXNDcmVhdGVNYXhpbWl6ZWQgPSB0cnVlO1xyXG4gIH1cclxuICBjcmVhdGVOZXdFbnRpdHkodHlwZTogc3RyaW5nKSB7XHJcbiAgICB0aGlzLkNyZWF0ZU5ld0VudGl0eS5lbWl0KHR5cGUpO1xyXG4gIH1cclxuXHJcbiAgZ2V0RW50aXRpZXMoKSB7XHJcbiAgICByZXR1cm4gT2JqZWN0LmtleXModGhpcy5FbnRpdGllcyk7XHJcbiAgfVxyXG5cclxuICBnZXREaXNwbGF5KGVudGl0eSkge1xyXG4gICAgICByZXR1cm4gZW50aXR5LnN1YnN0cmluZygwLCBlbnRpdHkuaW5kZXhPZignfCcpKTtcclxuICB9XHJcblxyXG4gIGdldEltYWdlKGVudGl0eSkge1xyXG4gICAgICByZXR1cm4gZW50aXR5LnN1YnN0cmluZyhlbnRpdHkuaW5kZXhPZignfCcpICsgMSk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgKm5nSWY9XCJpc0NyZWF0ZU1heGltaXplZFwiIGNsYXNzPVwiY2FsbERpc3BsYXlcIj5cclxuICA8ZGl2IGNsYXNzPVwiZWRpdG9yIGNhbGxIZWFkZXJcIj5cclxuICAgIDxsYWJlbCBjbGFzcz1cImhlYWRlckxhYmVsXCI+XHJcbiAgICAgIDxiPkNyZWF0ZSBOZXc8L2I+XHJcbiAgICA8L2xhYmVsPlxyXG4gICAgPGltZyBjbGFzcz1cIlZpZXdSZXNpemVJbWFnZVwiIHNyYz1cIi9hc3NldHMvaW1hZ2VzL3NlY3Rpb25fY29sbGFwc2UucG5nXCIgKGNsaWNrKT1cImlzQ3JlYXRlTWF4aW1pemVkID0gZmFsc2VcIlxyXG4gICAgICB0aXRsZT1cIkNvbGxhcHNlXCIgLz5cclxuICA8L2Rpdj5cclxuICA8ZGl2IGNsYXNzPVwiY2FsbEJvZHlcIj5cclxuICAgIDxkaXYgKm5nSWY9XCJFbnRpdGllc1wiIGNsYXNzPVwiY29udGFpbmVyXCI+XHJcbiAgICAgIDxkaXYgKm5nRm9yPVwibGV0IGVudGl0eSBvZiBnZXRFbnRpdGllcygpXCIgY2xhc3M9XCJjcmVhdGVOZXdMYWJlbFwiIChjbGljayk9XCJjcmVhdGVOZXdFbnRpdHkoZW50aXR5KVwiXHJcbiAgICAgICAgdGl0bGU9XCJ7eyBnZXREaXNwbGF5KEVudGl0aWVzW2VudGl0eV0pIH19XCI+XHJcbiAgICAgICAgPGltZyBjbGFzcz1cImNyZWF0ZUVudGl0eUltYWdlc1wiIHNyYz1cInt7IGdldEltYWdlKEVudGl0aWVzW2VudGl0eV0pIH19XCIgLz5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuPC9kaXY+XHJcbjxkaXYgKm5nSWY9XCIhaXNDcmVhdGVNYXhpbWl6ZWRcIiBjbGFzcz1cImNhbGxEaXNwbGF5XCI+XHJcbiAgPGRpdiBjbGFzcz1cImVkaXRvciBjYWxsSGVhZGVyXCI+XHJcbiAgICA8bGFiZWwgY2xhc3M9XCJoZWFkZXJMYWJlbFwiPlxyXG4gICAgICA8Yj5DcmVhdGUgTmV3PC9iPlxyXG4gICAgPC9sYWJlbD5cclxuICAgIDxpbWcgY2xhc3M9XCJWaWV3UmVzaXplSW1hZ2VcIiBzcmM9XCIvYXNzZXRzL2ltYWdlcy9zZWN0aW9uX2V4cGFuZC5wbmdcIiAoY2xpY2spPVwiaXNDcmVhdGVNYXhpbWl6ZWQgPSB0cnVlXCJcclxuICAgICAgdGl0bGU9XCJFeHBhbmRcIiAvPlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19