@symphony-talent/component-library 1.4.0 → 1.8.0

package/fesm2015/symphony-talent-component-library.js

@@ -1,9 +1,118 @@
 import { __decorate } from 'tslib';
-import { EventEmitter, Input, Output, Component, NgModule, ViewEncapsulation } from '@angular/core';
-import { CommonModule, SlicePipe } from '@angular/common';
+import { Input, Component, NgModule, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
+import { SlicePipe, CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { AgGridModule } from 'ag-grid-angular';
+
+let AvatarComponent = class AvatarComponent {
+    constructor() { }
+    ngOnInit() {
+        this.sp = new SlicePipe();
+        this.initials = '';
+        this.firstInitial = '';
+        this.bgColor = '';
+        if (this.firstName) {
+            this.initials += this.sp.transform(this.firstName, 0, 1);
+            this.firstInitial = this.sp
+                .transform(this.firstName, 0, 1)
+                .toLocaleLowerCase();
+        }
+        if (this.lastName) {
+            this.initials += this.sp.transform(this.lastName, 0, 1);
+        }
+        this.bgColor = this.getColor(this.firstInitial);
+    }
+    getColor(character) {
+        switch (character) {
+            case 'a':
+                return '#D0021B';
+            case 'b':
+                return '#F5A623';
+            case 'c':
+                return '#E4D75C';
+            case 'd':
+                return '#8B572A';
+            case 'e':
+                return '#579F09';
+            case 'f':
+                return '#BD10E0';
+            case 'g':
+                return '#9013FE';
+            case 'h':
+                return '#4A90E2';
+            case 'i':
+                return '#39B196';
+            case 'j':
+                return '#4A4A4A';
+            case 'k':
+                return '#E84D4D';
+            case 'l':
+                return '#E84DC0';
+            case 'm':
+                return '#CE950B';
+            case 'n':
+                return '#1CCE0B';
+            case 'o':
+                return '#1DB1A6';
+            case 'p':
+                return '#3724A9';
+            case 'q':
+                return '#A9249E';
+            case 'r':
+                return '#A9246B';
+            case 's':
+                return '#24A97A';
+            case 't':
+                return '#1C93B3';
+            case 'u':
+                return '#D52424';
+            case 'v':
+                return '#A45519';
+            case 'w':
+                return '#19A420';
+            case 'x':
+                return '#A41963';
+            case 'y':
+                return '#CFD00A';
+            case 'z':
+                return '#AA0AD0';
+            default:
+                return '#000000';
+        }
+    }
+};
+__decorate([
+    Input()
+], AvatarComponent.prototype, "firstName", void 0);
+__decorate([
+    Input()
+], AvatarComponent.prototype, "lastName", void 0);
+__decorate([
+    Input()
+], AvatarComponent.prototype, "sizePx", void 0);
+__decorate([
+    Input()
+], AvatarComponent.prototype, "fontSizePx", void 0);
+AvatarComponent = __decorate([
+    Component({
+        selector: 'lib-avatar',
+        template: "<div\n    [style.line-height.px]=\"sizePx\"\n    [style.height.px]=\"sizePx\"\n    [style.width.px]=\"sizePx\"\n    [style.font-size.px]=\"fontSizePx\"\n    [style.background-color]=\"bgColor\"\n    class=\"avatar-circle\"\n>\n    <div *ngIf=\"initials\" class=\"avatar-text\">\n        {{ initials }}\n    </div>\n</div>\n",
+        styles: [".avatar-circle{background:#000;border-radius:50%;height:50px;line-height:50px;width:50px}.avatar-text{color:#fff;text-align:center}"]
+    })
+], AvatarComponent);
+
+let AvatarModule = class AvatarModule {
+};
+AvatarModule = __decorate([
+    NgModule({
+        declarations: [AvatarComponent],
+        imports: [CommonModule],
+        exports: [AvatarComponent],
+    })
+], AvatarModule);
 
 let ButtonComponent = class ButtonComponent {
     constructor() {
@@ -23,14 +132,17 @@ __decorate([
 __decorate([
     Input()
 ], ButtonComponent.prototype, "isSecondary", void 0);
+__decorate([
+    Input()
+], ButtonComponent.prototype, "isInverse", void 0);
 __decorate([
     Output()
 ], ButtonComponent.prototype, "clicked", void 0);
 ButtonComponent = __decorate([
     Component({
         selector: 'symphony-button',
-        template: "<button class=\"btn\" \n[ngClass]=\"{'btn-secondary': isSecondary, 'btn-primary': !isSecondary }\"\n(click)=\"onClick()\" [disabled]=\"disabled\">{{ text }}</button>",
-        styles: ["button,button:focus{outline:none}button:disabled{cursor:not-allowed;opacity:.3}.btn{border-radius:30px;height:60px;min-width:140px;padding-left:40px;padding-right:40px}.btn:focus{outline:none}.btn:disabled{opacity:.3}.btn-primary{background:#000;border:1px solid #000;color:#fff}.btn-secondary{background:#fff;border:1px solid #000;color:#000}"]
+        template: "<button class=\"btn\" \n[ngClass]=\"{'btn-secondary': isSecondary, 'btn-primary': !isSecondary, 'is-inverse': isInverse }\"\n(click)=\"onClick()\" [disabled]=\"disabled\">{{ text }}</button>",
+        styles: ["button{outline:none}.btn{border-radius:30px;font-family:neuzeit_groteskbold;height:56px;letter-spacing:.4px;min-width:140px;padding-left:40px;padding-right:40px}.btn:focus{outline:none}.btn:disabled{cursor:not-allowed;opacity:1%}.btn-primary{background:#000!important;border:2px solid #000!important;color:#fff}.btn-primary.is-inverse{background:#fff!important;border:2px solid #fff!important;color:#000}.btn-secondary{background:#fff;border:2px solid #000;color:#000}.btn-secondary.is-inverse{background:#000;border:2px solid #fff;color:#fff}"]
     })
 ], ButtonComponent);
 
@@ -73,9 +185,9 @@ __decorate([
 PillComponent = __decorate([
     Component({
         selector: 'symphony-pill',
-        template: "<span *ngIf=\"tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    tooltip=\"{{tooltipLabel}}\"\n    placement=\"top\"\n    containerClass=\"sfx-info-tooltip pill-tooltip\"\n    [adaptivePosition]=\"false\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"glyphicon glyphicon-remove sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"glyphicon glyphicon-remove sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>",
+        template: "<span *ngIf=\"tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    tooltip=\"{{tooltipLabel}}\"\n    placement=\"top\"\n    containerClass=\"sfx-info-tooltip pill-tooltip\"\n    [adaptivePosition]=\"false\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>",
         encapsulation: ViewEncapsulation.None,
-        styles: [".sfx-pill-item{background-color:#f1f1f1;border-radius:25px;color:#000;font-weight:600;margin-right:10px;margin-top:10px;padding:10px 20px;text-align:center}.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item i{font-size:12px;position:relative;top:2px}.sfx-pill-item:hover{background-color:#000;color:#fff}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;border-radius:0;color:#000;font-size:13px;max-width:160px;padding:8px 15px}"]
+        styles: [".sfx-pill-item{background-color:#f1f1f1;border-radius:25px;color:#000;font-family:neuzeit_groteskbold;font-weight:600;margin-right:10px;margin-top:10px;padding:10px 20px;position:relative;text-align:center}.sfx-pill-item.inverse-pill,.sfx-pill-item:hover{background-color:#000;color:#fff}.sfx-pill-item.has-close{padding:10px 20px 10px 38px}.sfx-pill-item i{font-size:18px;left:14px;position:absolute;top:11px;transform:rotate(45deg)}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;border-radius:0;color:#000;font-size:13px;max-width:160px;padding:8px 15px}"]
     })
 ], PillComponent);
 
@@ -89,8 +201,8 @@ __decorate([
 TaskIconComponent = __decorate([
     Component({
         selector: 'symphony-task-icon',
-        template: "<div\n  class=\"task-circle\"\n  [ngClass]=\"{\n    'task-incomplete': !isComplete,\n    'task-complete': isComplete\n  }\"\n>\n  <i\n    class=\"fa-solid\"\n    [ngClass]=\"{\n      'fa-clipboard': !isComplete,\n      'fa-clipboard-check': isComplete\n    }\"\n  ></i>\n</div>\n",
-        styles: [".task-circle{border-radius:50%;height:50px;width:50px}.task-circle .fa-solid{color:#fff;font-size:20px;left:17px;position:relative;top:15px}.task-complete{background-color:#00d56b}.task-incomplete{background-color:#d9d9d9}"]
+        template: "<div\n  class=\"task-circle\"\n  [ngClass]=\"{\n    'task-incomplete': !isComplete,\n    'task-complete': isComplete\n  }\"\n>\n  <i\n    class=\"fa-solid\"\n    [ngClass]=\"{\n      'si-task-completed': !isComplete,\n      'si-task-open': isComplete\n    }\"\n  ></i>\n</div>\n",
+        styles: [".task-circle{border-radius:50%;height:50px;width:50px}.task-circle .fa-solid{color:#fff;font-size:20px;left:15px;position:relative;top:15px}.task-complete{background-color:#00d56b}.task-incomplete{background-color:#d9d9d9}"]
     })
 ], TaskIconComponent);
 
@@ -104,42 +216,6 @@ TaskIconModule = __decorate([
     })
 ], TaskIconModule);
 
-let InputTextComponent = class InputTextComponent {
-    constructor() {
-        this.placeholder = '';
-        this.textChange = new EventEmitter();
-    }
-    ngOnInit() { }
-    onTextChange(event) {
-        this.textChange.emit(event.target.value);
-    }
-};
-__decorate([
-    Input()
-], InputTextComponent.prototype, "placeholder", void 0);
-__decorate([
-    Input()
-], InputTextComponent.prototype, "icon", void 0);
-__decorate([
-    Output()
-], InputTextComponent.prototype, "textChange", void 0);
-InputTextComponent = __decorate([
-    Component({
-        selector: 'symphony-input',
-        template: "<div class=\"search-wrap\">\n  <label for=\"keyword-search\" class=\"visuallyhidden\">Search: </label>\n  <input\n    type=\"text\"\n    name=\"keyword-search\"\n    class=\"keyword-search\"\n    placeholder=\"{{ placeholder }}\"\n    (keyup)=\"onTextChange($event)\"\n  />\n  <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n</div>\n",
-        styles: [".visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.search-wrap{position:relative}.search-wrap .keyword-search{border:1px solid #d0d0d0;border-radius:4px;font-family:neuzeit-grotesk,sans-serif!important;line-height:25px;padding:7px 15px;width:300px}.search-wrap .keyword-search::-moz-placeholder{color:#bababa}.search-wrap .keyword-search:-ms-input-placeholder{color:#bababa}.search-wrap .keyword-search::placeholder{color:#bababa}.search-wrap .keyword-search:focus{border-color:#464646}.search-wrap .keyword-search:focus-visible{outline:none}.search-wrap .fa-solid{font-size:20px;position:relative;right:30px;top:3px}"]
-    })
-], InputTextComponent);
-
-let InputTextModule = class InputTextModule {
-};
-InputTextModule = __decorate([
-    NgModule({
-        declarations: [InputTextComponent],
-        imports: [CommonModule],
-    })
-], InputTextModule);
-
 let ColorSampleComponent = class ColorSampleComponent {
     constructor() { }
     ngOnInit() {
@@ -180,7 +256,7 @@ __decorate([
 H2Component = __decorate([
     Component({
         selector: 'symphony-h2',
-        template: "<h2 [ngClass]=\"{ 'h2-secondary': isSecondary, 'h2-primary': !isSecondary }\">\n  {{ text }}\n</h2>\n",
+        template: "<h2 [ngClass]=\"{ 'h2-secondary': isSecondary, 'h2-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h2>\n",
         styles: [".h2-primary,.h2-secondary{color:#000;letter-spacing:-2px;line-height:40px;margin-bottom:0;margin-top:0}.h2-secondary{color:#fff}"]
     })
 ], H2Component);
@@ -208,7 +284,7 @@ __decorate([
 H3Component = __decorate([
     Component({
         selector: 'symphony-h3',
-        template: "<h3 [ngClass]=\"{ 'h3-secondary': isSecondary, 'h3-primary': !isSecondary }\">\n  {{ text }}\n</h3>\n",
+        template: "<h3 [ngClass]=\"{ 'h3-secondary': isSecondary, 'h3-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h3>\n",
         styles: [".h3-primary,.h3-secondary{color:#000;letter-spacing:-1px;line-height:30px;margin-bottom:0;margin-top:0}.h3-secondary{color:#fff}"]
     })
 ], H3Component);
@@ -236,7 +312,7 @@ __decorate([
 H4Component = __decorate([
     Component({
         selector: 'symphony-h4',
-        template: "<h4 [ngClass]=\"{ 'h4-secondary': isSecondary, 'h4-primary': !isSecondary }\">\n  {{ text }}\n</h4>\n",
+        template: "<h4 [ngClass]=\"{ 'h4-secondary': isSecondary, 'h4-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h4>\n",
         styles: [".h4-primary,.h4-secondary{color:#000;letter-spacing:-1px;line-height:20px;margin-bottom:0;margin-top:0}.h4-secondary{color:#fff}"]
     })
 ], H4Component);
@@ -264,7 +340,7 @@ __decorate([
 H1Component = __decorate([
     Component({
         selector: 'symphony-h1',
-        template: "<h1\n  [ngClass]=\"{\n    'h1-secondary': isSecondary,\n    'h1-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n</h1>\n",
+        template: "<h1\n  [ngClass]=\"{\n    'h1-secondary': isSecondary,\n    'h1-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</h1>\n",
         styles: [".h1-primary,.h1-secondary{color:#000;letter-spacing:-2px;line-height:50px;margin-bottom:0;margin-top:0}.h1-secondary{color:#fff}"]
     })
 ], H1Component);
@@ -292,8 +368,8 @@ __decorate([
 ParagraphComponent = __decorate([
     Component({
         selector: 'symphony-paragraph',
-        template: "<p\n  [ngClass]=\"{\n    'body-copy-secondary': isSecondary,\n    'body-copy-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n</p>\n",
-        styles: [".body-copy-primary,.body-copy-secondary{color:#000;font-family:neuzeit-grotesk,sans-serif!important;font-size:14px;line-height:20px;margin-bottom:0}.body-copy-secondary{color:#fff}"]
+        template: "<p\n  [ngClass]=\"{\n    'body-copy-secondary': isSecondary,\n    'body-copy-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</p>\n",
+        styles: [".body-copy-primary,.body-copy-secondary{color:#000;line-height:20px;margin-bottom:0}.body-copy-secondary{color:#fff}"]
     })
 ], ParagraphComponent);
 
@@ -320,8 +396,8 @@ __decorate([
 H5Component = __decorate([
     Component({
         selector: 'symphony-h5',
-        template: "<h5\n  [ngClass]=\"{\n    'h5-secondary': isSecondary,\n    'h5-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n</h5>\n",
-        styles: [".h5-primary,.h5-secondary{color:#000;font-size:14px;line-height:20px;margin-bottom:0;margin-top:0}.h5-secondary{color:#fff}"]
+        template: "<h5\n  [ngClass]=\"{\n    'h5-secondary': isSecondary,\n    'h5-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</h5>\n",
+        styles: [".h5-primary,.h5-secondary{color:#000;line-height:20px;margin-bottom:0;margin-top:0}.h5-secondary{color:#fff}"]
     })
 ], H5Component);
 
@@ -336,8 +412,13 @@ H5Module = __decorate([
 ], H5Module);
 
 let IconComponent = class IconComponent {
-    constructor() { }
+    constructor() {
+        this.clicked = new EventEmitter();
+    }
     ngOnInit() { }
+    onClick() {
+        this.clicked.emit('clicked');
+    }
 };
 __decorate([
     Input()
@@ -345,11 +426,14 @@ __decorate([
 __decorate([
     Input()
 ], IconComponent.prototype, "isSecondary", void 0);
+__decorate([
+    Output()
+], IconComponent.prototype, "clicked", void 0);
 IconComponent = __decorate([
     Component({
         selector: 'symphony-icon',
-        template: "<i\n  [class]=\"icon\"\n  [ngClass]=\"{\n    'icon-secondary': isSecondary,\n    'icon-primary': !isSecondary\n  }\"\n></i>\n",
-        styles: [".icon-secondary{color:#fff}"]
+        template: "<i\n  [class]=\"icon\"\n  [ngClass]=\"{\n    'icon-secondary': isSecondary,\n    'icon-primary': !isSecondary\n  }\"\n  (click)=\"onClick()\"\n></i>\n",
+        styles: [".icon-secondary{color:#fff}i{cursor:pointer;height:18px;width:18px}"]
     })
 ], IconComponent);
 
@@ -363,190 +447,274 @@ IconModule = __decorate([
     })
 ], IconModule);
 
-let AvatarComponent = class AvatarComponent {
-    constructor(sp) {
-        this.sp = sp;
+var Icons;
+(function (Icons) {
+    Icons["MOREOPTIONS"] = "si-more-options";
+    Icons["ADD"] = "si-add";
+    Icons["ACTIVITY"] = "si-activity";
+    Icons["ARROWHIDEREVEAL"] = "si-arrow-hide-reveal";
+    Icons["ARROWNEXT"] = "si-arrow-next";
+    Icons["ARROWPREV"] = "si-arrow-prev";
+    Icons["CLOSEMODAL"] = "si-close-modal";
+    Icons["COLLAPSE"] = "si-collapse";
+    Icons["DAYMODE"] = "si-daymode";
+    Icons["DELETE"] = "si-delete";
+    Icons["DOCUMENT"] = "si-document";
+    Icons["DOWNLOAD"] = "si-download";
+    Icons["EDIT"] = "si-edit";
+    Icons["EMAILDRIP"] = "si-email-drip";
+    Icons["EMAILOPEN"] = "si-email-open";
+    Icons["EMAILSEND"] = "si-email-send";
+    Icons["EXPAND"] = "si-expand";
+    Icons["FAVORITE"] = "si-favorite";
+    Icons["FEEDBACKMAYBE"] = "si-feedback-maybe";
+    Icons["FEEDBACKNO"] = "si-feedback-no";
+    Icons["FEEDBACKYES"] = "si-feedback-yes";
+    Icons["FOLDERMULTIPLE"] = "si-folder-multiple";
+    Icons["INCLUDE"] = "si-include";
+    Icons["INFO"] = "si-info";
+    Icons["INTERVIEW"] = "si-interview";
+    Icons["LINK"] = "si-link";
+    Icons["LOCATION"] = "si-location";
+    Icons["MENUALL"] = "si-menu-all";
+    Icons["MENUANALYTICS"] = "si-menu-analytics";
+    Icons["MENUASSETS"] = "si-menu-assets";
+    Icons["MENUCAMPAIGNS"] = "si-menu-campaigns";
+    Icons["MENUCONTACT"] = "si-menu-contact";
+    Icons["MENUCONTENT"] = "si-menu-content";
+    Icons["MENUDASHBOARD"] = "si-menu-dashboard";
+    Icons["MENUEVENTS"] = "si-menu-events";
+    Icons["MENUFOLDERS"] = "si-menu-folders";
+    Icons["MENUJOBS"] = "si-menu-jobs";
+    Icons["MENURETURN"] = "si-menu-return";
+    Icons["MENUWORKFLOWS"] = "si-menu-workflows";
+    Icons["MERGE"] = "si-merge";
+    Icons["MOVE"] = "si-move";
+    Icons["NIGHTMODE"] = "si-nightmode";
+    Icons["NOTIFICATION"] = "si-notification";
+    Icons["ORGANIZECOLUMNS"] = "si-organize-columns";
+    Icons["ORGANIZECONTACTS"] = "si-organize-contacts";
+    Icons["PENDINGINCOMPLETE"] = "si-pending-incomplete";
+    Icons["PHONENUMBER"] = "si-phone-number";
+    Icons["PREVIEW"] = "si-preview";
+    Icons["PROMOTE"] = "si-promote";
+    Icons["REFRESH"] = "si-refresh";
+    Icons["REMOVE"] = "si-remove";
+    Icons["EXCLUDE"] = "si-exclude";
+    Icons["RESULTSFILTERS"] = "si-results-filters";
+    Icons["REVIEW"] = "si-review";
+    Icons["SALARY"] = "si-salary";
+    Icons["SAVE"] = "si-save";
+    Icons["SEARCHADVANCED"] = "si-search-advanced";
+    Icons["SEARCHCLEAR"] = "si-search-clear";
+    Icons["SEARCHNEW"] = "si-search-new";
+    Icons["SETTINGSMART"] = "si-settings-smart";
+    Icons["SMS"] = "si-sms";
+    Icons["SORTMINI"] = "si-sort-mini";
+    Icons["STATUS"] = "si-status";
+    Icons["SYSTEMACTION"] = "si-system-action";
+    Icons["TASKCOMPLETED"] = "si-task-completed";
+    Icons["TASKOPEN"] = "si-task-open";
+    Icons["TIMEFRAME"] = "si-timeframe";
+    Icons["TIMELINE"] = "si-timeline";
+    Icons["UPLOAD"] = "si-upload";
+    Icons["USERMULTIPLE"] = "si-user-multiple";
+    Icons["USER"] = "si-user";
+})(Icons || (Icons = {}));
+
+let IconWrapperComponent = class IconWrapperComponent {
+    constructor() {
+        this.Icons = Icons;
+        this.clicked = new EventEmitter();
     }
-    ngOnInit() {
-        this.initials = '';
-        this.firstInitial = '';
-        this.bgColor = '';
-        if (this.firstName) {
-            this.initials += this.sp.transform(this.firstName, 0, 1);
-            this.firstInitial = this.sp
-                .transform(this.firstName, 0, 1)
-                .toLocaleLowerCase();
-        }
-        if (this.lastName) {
-            this.initials += this.sp.transform(this.lastName, 0, 1);
-        }
-        this.bgColor = this.getColor(this.firstInitial);
-    }
-    getColor(character) {
-        switch (character) {
-            case 'a':
-                return '#D0021B';
-            case 'b':
-                return '#F5A623';
-            case 'c':
-                return '#E4D75C';
-            case 'd':
-                return '#8B572A';
-            case 'e':
-                return '#579F09';
-            case 'f':
-                return '#BD10E0';
-            case 'g':
-                return '#9013FE';
-            case 'h':
-                return '#4A90E2';
-            case 'i':
-                return '#39B196';
-            case 'j':
-                return '#4A4A4A';
-            case 'k':
-                return '#E84D4D';
-            case 'l':
-                return '#E84DC0';
-            case 'm':
-                return '#CE950B';
-            case 'n':
-                return '#1CCE0B';
-            case 'o':
-                return '#1DB1A6';
-            case 'p':
-                return '#3724A9';
-            case 'q':
-                return '#A9249E';
-            case 'r':
-                return '#A9246B';
-            case 's':
-                return '#24A97A';
-            case 't':
-                return '#1C93B3';
-            case 'u':
-                return '#D52424';
-            case 'v':
-                return '#A45519';
-            case 'w':
-                return '#19A420';
-            case 'x':
-                return '#A41963';
-            case 'y':
-                return '#CFD00A';
-            case 'z':
-                return '#AA0AD0';
-            default:
-                return '#000000';
-        }
+    ngOnInit() { }
+    onClick() {
+        this.clicked.emit('clicked');
     }
 };
 __decorate([
     Input()
-], AvatarComponent.prototype, "firstName", void 0);
+], IconWrapperComponent.prototype, "isInverse", void 0);
+__decorate([
+    Output()
+], IconWrapperComponent.prototype, "clicked", void 0);
+IconWrapperComponent = __decorate([
+    Component({
+        selector: 'symphony-icon-wrapper',
+        template: "<div class=\"icon-wrapper\" [ngClass]=\"{ 'is-inverse': isInverse }\">\n  <ng-content></ng-content>\n</div>\n",
+        styles: [".icon-wrapper{border:1px solid #000;border-radius:50%;cursor:pointer;height:40px;padding-top:11px;text-align:center;width:40px}.icon-wrapper.is-inverse,.icon-wrapper:hover{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}"]
+    })
+], IconWrapperComponent);
+
+let IconWrapperModule = class IconWrapperModule {
+};
+IconWrapperModule = __decorate([
+    NgModule({
+        declarations: [IconWrapperComponent],
+        imports: [CommonModule],
+        exports: [IconWrapperComponent],
+    })
+], IconWrapperModule);
+
+let InputCheckboxComponent = class InputCheckboxComponent {
+    constructor() {
+        this.clicked = new EventEmitter();
+    }
+    ngOnInit() { }
+    onClick() {
+        this.isActive ? (this.isActive = false) : (this.isActive = true);
+        this.clicked.emit({
+            label: this.label,
+            isActive: this.isActive,
+        });
+    }
+};
 __decorate([
     Input()
-], AvatarComponent.prototype, "lastName", void 0);
+], InputCheckboxComponent.prototype, "isActive", void 0);
 __decorate([
     Input()
-], AvatarComponent.prototype, "sizePx", void 0);
+], InputCheckboxComponent.prototype, "label", void 0);
 __decorate([
     Input()
-], AvatarComponent.prototype, "fontSizePx", void 0);
-AvatarComponent = __decorate([
+], InputCheckboxComponent.prototype, "isRequired", void 0);
+__decorate([
+    Output()
+], InputCheckboxComponent.prototype, "clicked", void 0);
+InputCheckboxComponent = __decorate([
     Component({
-        selector: 'lib-avatar',
-        template: "<div\n    [style.line-height.px]=\"sizePx\"\n    [style.height.px]=\"sizePx\"\n    [style.width.px]=\"sizePx\"\n    [style.font-size.px]=\"fontSizePx\"\n    [style.background-color]=\"bgColor\"\n    class=\"avatar-circle\"\n>\n    <div *ngIf=\"initials\" class=\"avatar-text\">\n        {{ initials }}\n    </div>\n</div>\n",
-        styles: [".avatar-circle{background:#000;border-radius:50%;height:50px;line-height:50px;width:50px}.avatar-text{color:#fff;text-align:center}"]
+        selector: 'symphony-input-checkbox',
+        template: "<div class=\"sfx-checkbox\" (click)=\"onClick()\">\n  <input\n    type=\"checkbox\"\n    class=\"sfx-checkbox-input\"\n    [checked]=\"isActive\"\n    name=\"{{ label }}\"\n  />\n  <label for=\"{{ label }}\" class=\"Font400\"\n    >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n  >\n</div>\n",
+        styles: [".sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:transparent}.requiredField{color:red!important}.sfx-checkbox{-moz-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;margin:10px 0;user-select:none}.sfx-checkbox .sfx-checkbox-input:checked,.sfx-checkbox .sfx-checkbox-input:not(:checked){height:0;left:0;margin:0;opacity:0;overflow:hidden;pointer-events:none;position:absolute;width:0;z-index:-1}.sfx-checkbox .sfx-checkbox-input~label{color:#000;cursor:pointer;display:inline-block;font-family:neuzeit_groteskbold,sans-serif;font-size:14px;height:100%;line-height:20px;margin:0;padding-left:36px;position:relative;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{border-radius:2px;content:\"\";left:0;position:absolute;transform:translateZ(0);transition:all .2s ease-in}.sfx-checkbox .sfx-checkbox-input~label:after{border-radius:2px;content:\"\";left:0;position:absolute;top:0}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{border:none;height:15px;left:0;top:1px;transform:rotate(37deg) scale(.1);transform-origin:100% 100%;width:9px}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000;border-radius:4px;height:20px;width:20px;z-index:0}.sfx-checkbox .sfx-checkbox-input:checked~label:before{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-color:transparent #000 #000 transparent;border-radius:0;border-style:solid;border-width:0 2px 2px 0;height:12px;left:3px;top:3px;transform:rotate(37deg) scale(1);transform-origin:100% 100%;width:6px;z-index:1}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000;border-radius:4px;height:20px;width:20px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}"]
     })
-], AvatarComponent);
+], InputCheckboxComponent);
 
-let AvatarModule = class AvatarModule {
+let InputCheckboxModule = class InputCheckboxModule {
 };
-AvatarModule = __decorate([
+InputCheckboxModule = __decorate([
     NgModule({
-        declarations: [AvatarComponent],
+        declarations: [InputCheckboxComponent],
         imports: [CommonModule],
-        providers: [SlicePipe],
-        exports: [AvatarComponent],
+        exports: [InputCheckboxComponent],
     })
-], AvatarModule);
+], InputCheckboxModule);
 
-let DescriptionComponent = class DescriptionComponent {
-    constructor() { }
+let InputRadioComponent = class InputRadioComponent {
+    constructor() {
+        this.clicked = new EventEmitter();
+    }
     ngOnInit() { }
+    onClick() {
+        this.isActive ? (this.isActive = false) : (this.isActive = true);
+        this.clicked.emit({
+            label: this.label,
+            isActive: this.isActive,
+        });
+    }
 };
 __decorate([
     Input()
-], DescriptionComponent.prototype, "description", void 0);
-DescriptionComponent = __decorate([
+], InputRadioComponent.prototype, "isActive", void 0);
+__decorate([
+    Input()
+], InputRadioComponent.prototype, "label", void 0);
+__decorate([
+    Input()
+], InputRadioComponent.prototype, "isRequired", void 0);
+__decorate([
+    Output()
+], InputRadioComponent.prototype, "clicked", void 0);
+InputRadioComponent = __decorate([
     Component({
-        selector: 'symphony-description',
-        template: "<p>{{description}}</p>\n",
-        styles: ["p{font-size:14px;line-height:29px;margin-bottom:0}"]
+        selector: 'symphony-input-radio',
+        template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n  <input\n    type=\"radio\"\n    class=\"sfx-radio-input sfx-position-absolute\"\n    [checked]=\"isActive\"\n    name=\"{{ label }}\"\n  />\n  <label for=\"{{ label }}\" class=\"Font400\"\n    >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n  >\n</div>\n",
+        styles: [".requiredField{color:red!important}.sfx-radio{-moz-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;margin:10px 0;user-select:none}.sfx-radio .sfx-radio-input{cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;top:0;width:100%;z-index:1}.sfx-radio .sfx-radio-input~label{color:#000;cursor:pointer;display:inline-block;font-family:neuzeit_groteskbold;font-size:14px;height:100%;line-height:20px;position:relative}.sfx-radio .sfx-radio-input+:before{border:.1rem solid #000;border-radius:50%;content:\"\";display:inline-block;height:1rem;margin-bottom:.2rem;margin-right:.5rem;vertical-align:bottom;width:1rem}.sfx-radio .sfx-radio-input:checked+:before{background:radial-gradient(#000 0,#000 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}"]
     })
-], DescriptionComponent);
+], InputRadioComponent);
 
-let DescriptionModule = class DescriptionModule {
+let SfxInlineErrorComponent = class SfxInlineErrorComponent {
+    constructor() { }
 };
-DescriptionModule = __decorate([
-    NgModule({
-        declarations: [DescriptionComponent],
-        imports: [CommonModule],
-        exports: [DescriptionComponent]
+__decorate([
+    Input()
+], SfxInlineErrorComponent.prototype, "errorMessage", void 0);
+SfxInlineErrorComponent = __decorate([
+    Component({
+        selector: 'lib-sfx-inline-error',
+        template: "<p>{{ errorMessage }}</p>\n",
+        styles: ["p{color:red!important;font-size:1rem;margin:0;padding:10px 0}"]
     })
-], DescriptionModule);
+], SfxInlineErrorComponent);
 
-let DropdownComponent = class DropdownComponent {
-    constructor() { }
-    ngOnInit() {
-    }
+let SfxInlineErrorModule = class SfxInlineErrorModule {
 };
-DropdownComponent = __decorate([
-    Component({
-        selector: 'symphony-dropdown',
-        template: "<div class=\"btn-group\" dropdown>\n    <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n            aria-controls=\"dropdown-basic\">\n      Button dropdown <span class=\"caret\"></span>\n    </button>\n    <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu\"\n        role=\"menu\" aria-labelledby=\"button-basic\">\n      <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Action</a></li>\n      <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Another action</a></li>\n      <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Something else here</a></li>\n      <li class=\"divider dropdown-divider\"></li>\n      <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Separated link</a>\n      </li>\n    </ul>\n  </div>",
-        styles: [""]
+SfxInlineErrorModule = __decorate([
+    NgModule({
+        declarations: [SfxInlineErrorComponent],
+        imports: [CommonModule],
+        exports: [SfxInlineErrorComponent],
     })
-], DropdownComponent);
+], SfxInlineErrorModule);
 
-let DropdownModule = class DropdownModule {
+let InputRadioModule = class InputRadioModule {
 };
-DropdownModule = __decorate([
+InputRadioModule = __decorate([
     NgModule({
-        declarations: [DropdownComponent],
-        imports: [CommonModule, BsDropdownModule.forRoot(), BrowserAnimationsModule],
-        providers: [],
-        exports: [DropdownComponent],
+        declarations: [InputRadioComponent],
+        imports: [
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            SfxInlineErrorModule,
+        ],
+        exports: [InputRadioComponent],
     })
-], DropdownModule);
+], InputRadioModule);
 
-let ListTitleComponent = class ListTitleComponent {
-    constructor() { }
+let InputTextComponent = class InputTextComponent {
+    constructor() {
+        this.placeholder = '';
+        this.textChange = new EventEmitter();
+    }
     ngOnInit() { }
+    onTextChange(event) {
+        this.textChange.emit(event.target.value);
+    }
 };
 __decorate([
     Input()
-], ListTitleComponent.prototype, "listTitle", void 0);
-ListTitleComponent = __decorate([
+], InputTextComponent.prototype, "placeholder", void 0);
+__decorate([
+    Input()
+], InputTextComponent.prototype, "icon", void 0);
+__decorate([
+    Input()
+], InputTextComponent.prototype, "label", void 0);
+__decorate([
+    Input()
+], InputTextComponent.prototype, "isInverse", void 0);
+__decorate([
+    Output()
+], InputTextComponent.prototype, "textChange", void 0);
+InputTextComponent = __decorate([
     Component({
-        selector: 'symphony-list-title',
-        template: "<h3>{{listTitle}}</h3>\n",
-        styles: ["h3{font-weight:700;letter-spacing:-1px;line-height:29px;margin-bottom:0;margin-top:0}"]
+        selector: 'symphony-input-text',
+        template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label for=\"input-text\" class=\"input-text-label\">{{ label }}</label>\n  <input\n    type=\"text\"\n    name=\"input-text\"\n    class=\"input-text\"\n    autocomplete=\"off\"\n    placeholder=\"{{ placeholder }}\"\n    (keyup)=\"onTextChange($event)\"\n  />\n  <symphony-icon [icon]=\"icon\"></symphony-icon>\n</div>\n",
+        styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;line-height:25px;margin-bottom:.9375rem}.input-text-wrap .input-text{border:1px solid #d0d0d0;border-radius:4px;font-family:neuzeit-grotesk,sans-serif!important;line-height:25px;padding:7px 15px;width:100%}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{bottom:8px;font-size:14px;position:absolute;right:15px}"]
     })
-], ListTitleComponent);
+], InputTextComponent);
 
-let ListTitleModule = class ListTitleModule {
+let InputTextModule = class InputTextModule {
 };
-ListTitleModule = __decorate([
+InputTextModule = __decorate([
     NgModule({
-        declarations: [ListTitleComponent],
-        imports: [CommonModule],
-        exports: [ListTitleComponent]
+        declarations: [InputTextComponent],
+        imports: [CommonModule, IconModule],
+        exports: [InputTextComponent],
     })
-], ListTitleModule);
+], InputTextModule);
 
-let MoreDropdownComponent = class MoreDropdownComponent {
+let ContextualMenuComponent = class ContextualMenuComponent {
     constructor() { }
     ngOnInit() {
         this.sfxMoreActions = this.moreActions;
@@ -554,24 +722,24 @@ let MoreDropdownComponent = class MoreDropdownComponent {
 };
 __decorate([
     Input()
-], MoreDropdownComponent.prototype, "moreActions", void 0);
-MoreDropdownComponent = __decorate([
+], ContextualMenuComponent.prototype, "moreActions", void 0);
+ContextualMenuComponent = __decorate([
     Component({
-        selector: 'symphony-more-dropdown',
-        template: "<div style=\"margin-left: 300px;\" class=\"btn-group\" dropdown>\n    <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn dropdown-toggle\"\n            aria-controls=\"dropdown-basic\">\n      <i class=\"glyphicon glyphicon-option-vertical\"></i>\n    </button>\n    <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu\"\n        role=\"menu\" aria-labelledby=\"button-basic\">\n      <li role=\"menuitem\" *ngFor=\"let moreActions of sfxMoreActions\">\n        <a class=\"dropdown-item\" href=\"#\">{{moreActions.dropItemName}}</a>\n      </li>\n    </ul>\n  </div>",
-        styles: [".btn-group button.dropdown-toggle.btn{background:#fff;border-radius:50%;box-shadow:none;color:#000;font-size:24px;height:40px;line-height:26px;padding:0;width:40px}.btn-group button.dropdown-toggle.btn:hover{background:#000;color:#fff}.btn-group .dropdown-menu{border:none;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,.175);left:auto;margin-top:10px;max-height:none;overflow:inherit;padding-bottom:20px;padding-top:20px;right:7px}.btn-group .dropdown-menu li a.dropdown-item{color:#000;font-weight:600;padding:10px 20px}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{color:#fff;content:\"\\e252\";display:inline-block;font-family:Glyphicons Halflings!important;font-size:14px;position:absolute;right:8px;top:-13px;transform:rotate(180deg)}.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff}"]
+        selector: 'symphony-contextual-menu',
+        template: "<div class=\"btn-group\" dropdown>\n  <button\n    id=\"button-basic\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    aria-controls=\"dropdown-basic\"\n  >\n    <i class=\"si-more-options\"></i>\n  </button>\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"button-basic\"\n  >\n    <li role=\"menuitem\" *ngFor=\"let moreActions of sfxMoreActions\">\n      <a class=\"dropdown-item\" href=\"#\">{{ moreActions.dropItemName }}</a>\n    </li>\n  </ul>\n</div>\n",
+        styles: [".btn-group button.dropdown-toggle.btn{align-items:center;background:#fff;border-radius:50%;box-shadow:none;color:#000;display:flex;font-size:18px;height:40px;justify-content:center;line-height:26px;padding:0;width:40px}.btn-group button.dropdown-toggle.btn:hover{background:#000;color:#fff}.btn-group .dropdown-menu{border:none;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,.175);left:auto;margin-top:10px;max-height:none;min-width:240px;overflow:inherit;padding-bottom:20px;padding-top:20px;right:-10px}.btn-group .dropdown-menu li a.dropdown-item{color:#000;font-weight:600;line-height:40px;padding:0 20px}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{color:#fff;content:\"\\e252\";display:inline-block;font-family:Glyphicons Halflings!important;font-size:14px;position:absolute;right:23px;top:-13px;transform:rotate(180deg)}.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff}"]
     })
-], MoreDropdownComponent);
+], ContextualMenuComponent);
 
-let MoreDropdownModule = class MoreDropdownModule {
+let ContextualMenuModule = class ContextualMenuModule {
 };
-MoreDropdownModule = __decorate([
+ContextualMenuModule = __decorate([
     NgModule({
-        declarations: [MoreDropdownComponent],
+        declarations: [ContextualMenuComponent],
         imports: [CommonModule, BsDropdownModule.forRoot(), BrowserAnimationsModule],
-        exports: [MoreDropdownComponent]
+        exports: [ContextualMenuComponent],
     })
-], MoreDropdownModule);
+], ContextualMenuModule);
 
 let PillModule = class PillModule {
 };
@@ -585,69 +753,225 @@ PillModule = __decorate([
     })
 ], PillModule);
 
-let TimeStampComponent = class TimeStampComponent {
+let FilterAreaComponent = class FilterAreaComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+};
+FilterAreaComponent = __decorate([
+    Component({
+        selector: 'symphony-filter-area',
+        template: "<div class=\"sfx-filter-section\">\n    <div class=\"sfx-border-bottom-mdm-black-1 sfx-mb-20 sfx-pb-20 sfx-mt-10 sfx-d-inline-block sfx-wid-100\">\n        <ng-content select=\"[title]\"></ng-content>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[actions]\"></ng-content>\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-2]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-3]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-4]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-5]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-6]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mb-25\">\n            <ng-content select=\"[filter-7]\"></ng-content>\n        </div>\n    </div>\n</div>",
+        styles: [".sfx-filter-section{background:#000;color:#fff;padding:1.875rem 2.5rem}"]
+    })
+], FilterAreaComponent);
+
+let FilterAreaModule = class FilterAreaModule {
+};
+FilterAreaModule = __decorate([
+    NgModule({
+        declarations: [FilterAreaComponent],
+        imports: [CommonModule],
+        exports: [FilterAreaComponent]
+    })
+], FilterAreaModule);
+
+let TwoColumnFilterAreaComponent = class TwoColumnFilterAreaComponent {
     constructor() { }
     ngOnInit() { }
 };
 __decorate([
     Input()
-], TimeStampComponent.prototype, "timeStamp", void 0);
-TimeStampComponent = __decorate([
+], TwoColumnFilterAreaComponent.prototype, "height", void 0);
+TwoColumnFilterAreaComponent = __decorate([
     Component({
-        selector: 'symphony-time-stamp',
-        template: "<p>{{timeStamp}}</p>\n",
-        styles: ["p{font-size:14px;letter-spacing:-1px;line-height:29px;margin-bottom:0}"]
+        selector: 'symphony-two-column-filter-area',
+        template: "<section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n  <div class=\"sfx-filter-section\" [ngStyle]=\"{ height: height }\">\n    <div class=\"row\">\n      <!-- select dropdown for event type -->\n      <div\n        class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mb-30 sfx-filter-items-wrap\"\n      >\n        <ng-content select=\"[filter-one]\"></ng-content>\n      </div>\n\n      <!-- search component -->\n      <div\n        class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mb-30 sfx-filter-items-wrap\"\n      >\n        <ng-content select=\"[filter-two]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</section>\n",
+        styles: [".sfx-filter-section{background-color:#000;border-radius:5px;padding:1.875rem 2.5rem}"]
     })
-], TimeStampComponent);
+], TwoColumnFilterAreaComponent);
 
-let TimeStampModule = class TimeStampModule {
+let TwoColumnFilterAreaModule = class TwoColumnFilterAreaModule {
 };
-TimeStampModule = __decorate([
+TwoColumnFilterAreaModule = __decorate([
     NgModule({
-        declarations: [TimeStampComponent],
+        declarations: [TwoColumnFilterAreaComponent],
         imports: [CommonModule],
-        exports: [TimeStampComponent]
+        exports: [TwoColumnFilterAreaComponent],
     })
-], TimeStampModule);
+], TwoColumnFilterAreaModule);
+
+var ActivityScoreLevel;
+(function (ActivityScoreLevel) {
+    ActivityScoreLevel["Low"] = "low";
+    ActivityScoreLevel["Medium"] = "medium";
+    ActivityScoreLevel["High"] = "high";
+    ActivityScoreLevel["Empty"] = "empty";
+})(ActivityScoreLevel || (ActivityScoreLevel = {}));
 
-let ButtonRoundComponent = class ButtonRoundComponent {
+let ContactActivityScoreComponent = class ContactActivityScoreComponent {
     constructor() {
-        this.clicked = new EventEmitter();
+        this.contactActivityScoreModel = { activityScore: ActivityScoreLevel.Low };
+        this.contact = { candidateScoreActivityScore: 0 };
+    }
+    refresh(params) {
+        return true;
+    }
+    agInit(params) {
+        this.contact = params.data;
+        if (!this.contact.header5) {
+            this.dataAvailable = 'N/A';
+        }
+        else {
+            this.dataAvailable = this.contact.header5;
+        }
+        switch (true) {
+            case this.contact.header5 >= 0 && this.contact.header5 < 34: {
+                this.contactActivityScoreModel.activityScore = ActivityScoreLevel.Low;
+                break;
+            }
+            case this.contact.header5 >= 34 && this.contact.header5 <= 66: {
+                this.contactActivityScoreModel.activityScore =
+                    ActivityScoreLevel.Medium;
+                break;
+            }
+            case this.contact.header5 > 66: {
+                this.contactActivityScoreModel.activityScore = ActivityScoreLevel.High;
+                break;
+            }
+            default: {
+                this.contactActivityScoreModel.activityScore = ActivityScoreLevel.Empty;
+                break;
+            }
+        }
+    }
+};
+ContactActivityScoreComponent = __decorate([
+    Component({
+        selector: 'lib-contact-activity-score',
+        template: "<span\n  class=\"activity-score-bg activity-score-{{\n    contactActivityScoreModel.activityScore\n  }}\"\n>\n  <div class=\"activity-score-content\">{{ dataAvailable }}</div>\n</span>\n",
+        styles: [".activity-score-bg{background-color:#bbb;border-radius:50%;color:#fff;display:inline-block;height:38px;text-align:center;width:38px}.activity-score-bg.activity-score-high{background-color:#00bb5b}.activity-score-bg.activity-score-medium{background-color:#f57300}.activity-score-bg.activity-score-low{background-color:#d60000}.activity-score-bg.activity-score-empty{background-color:#fff;color:#000!important}"]
+    })
+], ContactActivityScoreComponent);
+
+var RelevanceScoreLevel;
+(function (RelevanceScoreLevel) {
+    RelevanceScoreLevel["Value"] = "value";
+    RelevanceScoreLevel["Empty"] = "empty";
+})(RelevanceScoreLevel || (RelevanceScoreLevel = {}));
+
+let RelevanceScoreComponent = class RelevanceScoreComponent {
+    constructor() {
+        this.relevanceScoreModel = { relevanceScore: RelevanceScoreLevel.Empty };
+        this.contact = { relevanceScore: 0 };
+    }
+    refresh(params) {
+        return true;
+    }
+    agInit(params) {
+        this.contact = params.data;
+        if (this.contact) {
+            if (this.contact.header4 || this.contact.header4 === 0) {
+                this.relevanceData = this.contact.header4;
+                this.relevanceScoreModel.relevanceScore = RelevanceScoreLevel.Value;
+            }
+            else {
+                this.relevanceData = 'N/A';
+            }
+        }
+    }
+};
+RelevanceScoreComponent = __decorate([
+    Component({
+        selector: 'lib-relevance-score',
+        template: "<span class=\"relevance-score-bg relevance-score-{{ relevanceScoreModel.relevanceScore }}\">\n  <div class=\"relevance-score-content\">{{ relevanceData}}</div>\n</span>",
+        styles: [".relevance-score-bg{background-color:#fff;border-radius:50%;color:#000;display:inline-block;height:38px;text-align:center;width:38px}.relevance-score-value{border:1px solid #000;font-weight:700}"]
+    })
+], RelevanceScoreComponent);
+
+let GridComponent = class GridComponent {
+    constructor() {
+        this.rowHeightPage = 80;
+        this.gridHeight = 100;
+        this.frameworkComponents = this.getFrameworkComponents();
+        this.columnDefs = [
+            { headerName: 'Name', field: 'header1' },
+            { headerName: 'Location', field: 'header2' },
+            { headerName: 'Title', field: 'header3' },
+            {
+                headerName: 'Engagement Score',
+                field: 'header4',
+                cellRenderer: 'fitScore',
+            },
+            {
+                headerName: 'Activity Score',
+                field: 'header5',
+                cellRenderer: 'contactActivityScore',
+            },
+        ];
+        this.getRowHeight = () => {
+            return this.rowHeightPage;
+        };
     }
     ngOnInit() { }
-    onClick() {
-        this.clicked.emit('Clicked');
+    onGridReady(gridReadyEvent) {
+        gridReadyEvent.api.sizeColumnsToFit();
+    }
+    getFrameworkComponents() {
+        return {
+            contactActivityScore: ContactActivityScoreComponent,
+            fitScore: RelevanceScoreComponent,
+        };
     }
 };
 __decorate([
     Input()
-], ButtonRoundComponent.prototype, "icon", void 0);
-__decorate([
-    Input()
-], ButtonRoundComponent.prototype, "disabled", void 0);
-__decorate([
-    Input()
-], ButtonRoundComponent.prototype, "isSecondary", void 0);
-__decorate([
-    Output()
-], ButtonRoundComponent.prototype, "clicked", void 0);
-ButtonRoundComponent = __decorate([
+], GridComponent.prototype, "gridList", void 0);
+GridComponent = __decorate([
     Component({
-        selector: 'symphony-button-round',
-        template: "<button\n  class=\"btn\"\n  [ngClass]=\"{\n    'btn-secondary': isSecondary,\n    'btn-primary': !isSecondary\n  }\"\n  (click)=\"onClick()\"\n  [disabled]=\"disabled\"\n>\n  <i class=\"fas\" [ngClass]=\"icon\"></i>\n</button>\n",
-        styles: ["button{border-radius:50%;height:40px;outline:none;width:40px}button i{font-size:10px}button:focus{outline:none}button:disabled{cursor:not-allowed;opacity:.3}button:disabled:hover{background-color:#fff;border:1px solid #000;color:#000}.btn-primary{background:#fff;border:1px solid #000;color:#000}.btn-primary:hover,.btn-secondary{background:#000;color:#fff}.btn-secondary{border:1px solid #fff}.btn-secondary:hover{background:#fff;color:#000}.bg-black{background-color:#000;padding:10px}"]
+        selector: 'symphony-grid',
+        template: "<ag-grid-angular\n  style=\"width: 100%\"\n  class=\"ag-theme-alpine\"\n  [rowData]=\"gridList\"\n  [columnDefs]=\"columnDefs\"\n  (gridReady)=\"onGridReady($event)\"\n  [style.height.vh]=\"gridHeight\"\n  [getRowHeight]=\"getRowHeight\"\n  [frameworkComponents]=\"frameworkComponents\"\n>\n</ag-grid-angular>\n",
+        styles: [""]
+    })
+], GridComponent);
+
+let ContactActivityScoreModule = class ContactActivityScoreModule {
+};
+ContactActivityScoreModule = __decorate([
+    NgModule({
+        declarations: [ContactActivityScoreComponent],
+        imports: [CommonModule],
     })
-], ButtonRoundComponent);
+], ContactActivityScoreModule);
 
-let ButtonRoundModule = class ButtonRoundModule {
+let RelevanceScoreModule = class RelevanceScoreModule {
 };
-ButtonRoundModule = __decorate([
+RelevanceScoreModule = __decorate([
     NgModule({
-        declarations: [ButtonRoundComponent],
+        declarations: [RelevanceScoreComponent],
         imports: [CommonModule],
-        exports: [ButtonRoundComponent],
     })
-], ButtonRoundModule);
+], RelevanceScoreModule);
+
+let FrameworkModule = class FrameworkModule {
+};
+FrameworkModule = __decorate([
+    NgModule({
+        declarations: [],
+        imports: [],
+        exports: [ContactActivityScoreModule, RelevanceScoreModule]
+    })
+], FrameworkModule);
+
+let GridModule = class GridModule {
+};
+GridModule = __decorate([
+    NgModule({
+        declarations: [GridComponent],
+        imports: [CommonModule, AgGridModule.withComponents([]), FrameworkModule],
+        exports: [GridComponent]
+    })
+], GridModule);
 
 let AtomsModule = class AtomsModule {
 };
@@ -657,26 +981,177 @@ AtomsModule = __decorate([
         imports: [],
         exports: [
             ButtonModule,
-            DropdownModule,
-            MoreDropdownModule,
-            DescriptionModule,
-            ListTitleModule,
-            TimeStampModule,
+            ContextualMenuModule,
+            AvatarModule,
+            PillModule,
+            TaskIconModule,
+            ColorSampleModule,
+            H1Module,
+            H2Module,
+            H3Module,
+            H4Module,
+            H5Module,
+            ParagraphModule,
+            IconModule,
+            IconWrapperModule,
+            FilterAreaModule,
+            TwoColumnFilterAreaModule,
+            InputRadioModule,
+            InputCheckboxModule,
+            InputTextModule,
+            GridModule,
+            ContactActivityScoreModule,
+            RelevanceScoreModule
+        ],
+    })
+], AtomsModule);
+
+let BreadcrumbComponent = class BreadcrumbComponent {
+    constructor() { }
+    ngOnInit() {
+        this.icon = Icons.ARROWNEXT;
+    }
+};
+__decorate([
+    Input()
+], BreadcrumbComponent.prototype, "breadcrumbs", void 0);
+BreadcrumbComponent = __decorate([
+    Component({
+        selector: 'symphony-breadcrumb',
+        template: "<div class=\"sfx-breadcrumb-wrapper\">\n  <span\n    class=\"breadcrumb-item\"\n    *ngFor=\"let breadcrumb of breadcrumbs; let last = last\"\n  >\n    <symphony-h3 *ngIf=\"!last\"\n      ><a\n        class=\"sfx-cursor-pointer sfx-font30 sfx-txt-black\"\n        href=\"{{ breadcrumb.link }}\"\n        >{{ breadcrumb.label }}</a\n      ></symphony-h3\n    >\n    <symphony-h3 *ngIf=\"last\">{{ breadcrumb.label }} </symphony-h3>\n\n    <symphony-icon [icon]=\"icon\" *ngIf=\"!last\"></symphony-icon>\n  </span>\n</div>\n",
+        styles: [".breadcrumb-item,.sfx-breadcrumb-wrapper{display:flex}symphony-icon{padding:0 6px;position:relative;top:9px}"]
+    })
+], BreadcrumbComponent);
+
+let BreadcrumbModule = class BreadcrumbModule {
+};
+BreadcrumbModule = __decorate([
+    NgModule({
+        declarations: [BreadcrumbComponent],
+        imports: [CommonModule, H3Module, IconModule],
+        exports: [BreadcrumbComponent],
+    })
+], BreadcrumbModule);
+
+let ColorSwatchComponent = class ColorSwatchComponent {
+    constructor() {
+        this.colorSwatchModel = {
+            colorCode: '',
+            sassCode: '',
+        };
+    }
+    ngOnInit() {
+        this.getDescription();
+    }
+    getDescription() {
+        this.description = `${this.colorSwatchModel.colorCode} - ${this.colorSwatchModel.sassCode}`;
+        return this.description;
+    }
+};
+__decorate([
+    Input()
+], ColorSwatchComponent.prototype, "colorSwatchModel", void 0);
+ColorSwatchComponent = __decorate([
+    Component({
+        selector: 'symphony-ui-color-explorer',
+        template: "<div class=\"sfx-ui-color-explorer\">\n  <symphony-color-sample\n    [color]=\"colorSwatchModel.color\"\n  ></symphony-color-sample>\n  <symphony-h3\n    [text]=\"colorSwatchModel.colorName\"\n  ></symphony-h3>\n  <symphony-paragraph [text]=\"description\"></symphony-paragraph>\n</div>\n",
+        styles: [""]
+    })
+], ColorSwatchComponent);
+
+let ColorSwatchModule = class ColorSwatchModule {
+};
+ColorSwatchModule = __decorate([
+    NgModule({
+        declarations: [ColorSwatchComponent],
+        imports: [
+            CommonModule,
+            ColorSampleModule,
+            H3Module,
+            ParagraphModule
+        ],
+        exports: [ColorSwatchComponent],
+    })
+], ColorSwatchModule);
+
+let IconSwatchComponent = class IconSwatchComponent {
+    constructor() {
+        this.iconSwatchModel = {
+            iconName: '',
+            iconClass: '',
+        };
+    }
+    ngOnInit() { }
+};
+__decorate([
+    Input()
+], IconSwatchComponent.prototype, "iconSwatchModel", void 0);
+__decorate([
+    Input()
+], IconSwatchComponent.prototype, "isInverse", void 0);
+IconSwatchComponent = __decorate([
+    Component({
+        selector: 'symphony-icon-swatch',
+        template: "<div class=\"sfx-icon-swatch\">\n  <div\n    class=\"sfx-icon-wrapper\"\n    [ngClass]=\"{\n      'mt-0': iconSwatchModel.hasBorder\n    }\"\n  >\n    <symphony-icon-wrapper\n      *ngIf=\"iconSwatchModel.hasBorder\"\n      [isInverse]=\"isInverse\"\n    >\n      <symphony-icon [icon]=\"iconSwatchModel.icon\"></symphony-icon>\n    </symphony-icon-wrapper>\n    <symphony-icon\n      *ngIf=\"!iconSwatchModel.hasBorder\"\n      [icon]=\"iconSwatchModel.icon\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-icon-description-wrapper\">\n    <symphony-h5 [text]=\"iconSwatchModel.iconName\"></symphony-h5>\n\n    <symphony-paragraph [text]=\"iconSwatchModel.iconClass\"></symphony-paragraph>\n  </div>\n</div>\n",
+        styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-icon-wrapper{display:inline-block;margin-right:10px;margin-top:10px;text-align:center;vertical-align:top}.mt-0{margin-top:0}.sfx-icon-description-wrapper{display:inline-block}"]
+    })
+], IconSwatchComponent);
+
+let IconSwatchModule = class IconSwatchModule {
+};
+IconSwatchModule = __decorate([
+    NgModule({
+        declarations: [IconSwatchComponent],
+        imports: [
+            CommonModule,
+            IconModule,
+            H5Module,
+            ParagraphModule,
+            IconWrapperModule,
+        ],
+        exports: [IconSwatchComponent],
+    })
+], IconSwatchModule);
+
+let NoteComponent = class NoteComponent {
+    constructor() {
+        this.noteModel = {
+            firstName: '',
+            lastName: '',
+            listTitle: '',
+            timeStamp: '',
+            description: '',
+            moreActions: [],
+        };
+    }
+    ngOnInit() { }
+};
+__decorate([
+    Input()
+], NoteComponent.prototype, "noteModel", void 0);
+NoteComponent = __decorate([
+    Component({
+        selector: 'symphony-note',
+        template: "<div class=\"sfx-note\">\n    <lib-avatar class=\"list-avatar\" [firstName]= noteModel.firstName [lastName]= noteModel.lastName></lib-avatar>\n    <div class=\"list-content\">\n        <symphony-h3 [text]= noteModel.listTitle></symphony-h3>\n        <symphony-paragraph [text]= noteModel.timeStamp></symphony-paragraph>\n        <symphony-paragraph [text]= noteModel.description></symphony-paragraph>\n    </div>\n    <symphony-contextual-menu class=\"list-more-option\" [moreActions]= noteModel.moreActions></symphony-contextual-menu>\n</div>\n",
+        styles: [".sfx-note{padding:20px 75px;position:relative}.sfx-note .list-avatar{left:0;position:absolute;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}"]
+    })
+], NoteComponent);
+
+let NoteModule = class NoteModule {
+};
+NoteModule = __decorate([
+    NgModule({
+        declarations: [NoteComponent],
+        imports: [
+            CommonModule,
             AvatarModule,
-            PillModule,
-            TaskIconModule,
-            ColorSampleModule,
-            H1Module,
-            H2Module,
+            ContextualMenuModule,
             H3Module,
-            H4Module,
-            ParagraphModule,
-            H5Module,
-            ButtonRoundModule,
-            IconModule,
+            ParagraphModule
         ],
+        exports: [NoteComponent]
     })
-], AtomsModule);
+], NoteModule);
 
 let PillsComponent = class PillsComponent {
     constructor() {
@@ -740,8 +1215,8 @@ __decorate([
 TaskComponent = __decorate([
     Component({
         selector: 'symphony-task',
-        template: "<div class=\"sfx-task\">\n  <symphony-task-icon\n    class=\"task-icon\"\n    [isComplete]=\"taskModel.isComplete\"\n  ></symphony-task-icon>\n  <div class=\"task-content\">\n    <symphony-list-title [listTitle]=\"taskModel.title\"></symphony-list-title>\n    <div class=\"time-and-assigned\">\n      <symphony-time-stamp\n        [timeStamp]=\"taskModel.dueDate\"\n      ></symphony-time-stamp>\n      <symphony-description\n        [description]=\"taskModel.assignee\"\n      ></symphony-description>\n    </div>\n  </div>\n  <symphony-more-dropdown\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.length > 0\"\n    [moreActions]=\"taskModel.moreActions\"\n  >\n  </symphony-more-dropdown>\n</div>\n",
-        styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{align-items:center;border-bottom:1px solid #d9d9d9;display:flex;padding:30px 0}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{height:50px;width:80%}.sfx-task symphony-description,.sfx-task symphony-time-stamp{display:inline-block}.sfx-task symphony-time-stamp{margin-right:20px}.sfx-task .time-and-assigned{margin-bottom:-10px}"]
+        template: "<div class=\"sfx-task\">\n  <symphony-task-icon\n    class=\"task-icon\"\n    [isComplete]=\"taskModel.isComplete\"\n  ></symphony-task-icon>\n  <div class=\"task-content\">\n    <symphony-h3 [text]=\"taskModel.title\"></symphony-h3>\n    <div class=\"time-and-assigned\">\n      <symphony-paragraph\n        [text]=\"taskModel.dueDate\"\n      ></symphony-paragraph>\n      <symphony-paragraph\n        [text]=\"taskModel.assignee\"\n      ></symphony-paragraph>\n    </div>\n  </div>\n  <symphony-contextual-menu\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.length > 0\"\n    [moreActions]=\"taskModel.moreActions\"\n  >\n  </symphony-contextual-menu>\n</div>\n",
+        styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{align-items:center;border-bottom:1px solid #d9d9d9;display:flex;padding:30px 0}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{height:50px;width:80%}.sfx-task symphony-contextual-menu{margin-left:auto}.sfx-task symphony-paragraph{display:inline-block;margin-right:20px}.sfx-task .time-and-assigned{margin-bottom:-10px}"]
     })
 ], TaskComponent);
 
@@ -753,177 +1228,201 @@ TaskModule = __decorate([
         imports: [
             CommonModule,
             TaskIconModule,
-            ListTitleModule,
-            TimeStampModule,
-            DescriptionModule,
-            MoreDropdownModule,
+            ContextualMenuModule,
+            H3Module,
+            ParagraphModule
         ],
         exports: [TaskComponent],
     })
 ], TaskModule);
 
-let ColorSwatchComponent = class ColorSwatchComponent {
-    constructor() {
-        this.colorSwatchModel = {
-            colorCode: '',
-            sassCode: '',
-        };
-    }
+let MoleculesModule = class MoleculesModule {
+};
+MoleculesModule = __decorate([
+    NgModule({
+        declarations: [],
+        imports: [
+            CommonModule,
+            AvatarModule,
+            ContextualMenuModule,
+            PillsModule,
+            TaskModule,
+            ColorSwatchModule,
+            IconSwatchModule,
+            BreadcrumbModule,
+        ],
+        exports: [
+            NoteModule,
+            PillsModule,
+            TaskModule,
+            ColorSwatchModule,
+            IconSwatchModule,
+            BreadcrumbModule,
+        ],
+    })
+], MoleculesModule);
+
+let TaskListComponent = class TaskListComponent {
+    constructor() { }
+    ngOnInit() { }
+};
+__decorate([
+    Input()
+], TaskListComponent.prototype, "taskList", void 0);
+TaskListComponent = __decorate([
+    Component({
+        selector: 'symphony-task-list',
+        template: "<ul class=\"task-list list-unstyled\">\n  <li class=\"task-list-item\" *ngFor=\"let task of taskList\">\n    <symphony-task [taskModel]=\"task\"></symphony-task>\n  </li>\n</ul>\n",
+        styles: [".task-list{border-top:1px solid #d9d9d9}"]
+    })
+], TaskListComponent);
+
+let TaskListModule = class TaskListModule {
+};
+TaskListModule = __decorate([
+    NgModule({
+        declarations: [TaskListComponent],
+        imports: [CommonModule, TaskModule],
+        exports: [TaskListComponent],
+    })
+], TaskListModule);
+
+let NoteListComponent = class NoteListComponent {
+    constructor() { }
     ngOnInit() {
-        this.getDescription();
-    }
-    getDescription() {
-        this.description = `${this.colorSwatchModel.colorCode} - ${this.colorSwatchModel.sassCode}`;
-        return this.description;
     }
 };
 __decorate([
     Input()
-], ColorSwatchComponent.prototype, "colorSwatchModel", void 0);
-ColorSwatchComponent = __decorate([
+], NoteListComponent.prototype, "noteList", void 0);
+NoteListComponent = __decorate([
     Component({
-        selector: 'symphony-ui-color-explorer',
-        template: "<div class=\"sfx-ui-color-explorer\">\n  <symphony-color-sample\n    [color]=\"colorSwatchModel.color\"\n  ></symphony-color-sample>\n  <symphony-list-title\n    [listTitle]=\"colorSwatchModel.colorName\"\n  ></symphony-list-title>\n  <symphony-description [description]=\"description\"></symphony-description>\n</div>\n",
-        styles: [""]
+        selector: 'symphony-note-list',
+        template: "<ul class=\"list-unstyled\">\n    <li *ngFor=\"let note of noteList\">\n        <symphony-note [noteModel]='note'></symphony-note>\n    </li>\n</ul>\n",
+        styles: ["li{border-bottom:1px solid #d9d9d9}li:last-child{border-bottom-color:transparent}"]
     })
-], ColorSwatchComponent);
+], NoteListComponent);
 
-let ColorSwatchModule = class ColorSwatchModule {
+let NoteListModule = class NoteListModule {
 };
-ColorSwatchModule = __decorate([
+NoteListModule = __decorate([
     NgModule({
-        declarations: [ColorSwatchComponent],
-        imports: [
-            CommonModule,
-            ColorSampleModule,
-            ListTitleModule,
-            DescriptionModule,
-        ],
-        exports: [ColorSwatchComponent],
+        declarations: [NoteListComponent],
+        imports: [CommonModule, NoteModule],
+        exports: [NoteListComponent]
     })
-], ColorSwatchModule);
+], NoteListModule);
 
-let IconSwatchComponent = class IconSwatchComponent {
+let EventsSettingsPageComponent = class EventsSettingsPageComponent {
     constructor() {
-        this.iconSwatchModel = {
-            iconName: '',
-            iconClass: '',
+        this.eventsSettingsBreadcrumbs = [
+            {
+                label: 'Main Menu',
+                link: '/tools',
+            },
+            {
+                label: 'Sub Menu One',
+            },
+        ];
+        this.eventSettingsPageModel = {
+            moreActions: [],
         };
     }
     ngOnInit() { }
 };
 __decorate([
     Input()
-], IconSwatchComponent.prototype, "iconSwatchModel", void 0);
-IconSwatchComponent = __decorate([
+], EventsSettingsPageComponent.prototype, "eventSettingsPageModel", void 0);
+EventsSettingsPageComponent = __decorate([
     Component({
-        selector: 'symphony-icon-swatch',
-        template: "<div class=\"sfx-icon-swatch\">\n  <div class=\"sfx-icon-wrapper\">\n    <symphony-icon\n      [icon]=\"iconSwatchModel.icon\"\n      [isSecondary]=\"iconSwatchModel.isSecondary\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-icon-description-wrapper\">\n    <symphony-h5\n      [text]=\"iconSwatchModel.iconName\"\n      [isSecondary]=\"iconSwatchModel.isSecondary\"\n    ></symphony-h5>\n\n    <symphony-paragraph\n      [text]=\"iconSwatchModel.iconClass\"\n      [isSecondary]=\"iconSwatchModel.isSecondary\"\n    ></symphony-paragraph>\n  </div>\n</div>\n",
-        styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-icon-wrapper{height:18px;margin-right:10px;margin-top:10px;text-align:center;vertical-align:top;width:18px}.sfx-icon-description-wrapper,.sfx-icon-wrapper{display:inline-block}"]
+        selector: 'symphony-events-settings-page',
+        template: "<symphony-admin-list-template>\n  <symphony-breadcrumb sfx-header [breadcrumbs]=\"eventsSettingsBreadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-placeholder filter-one [label]=\"'filter-one'\" [height]=\"'85px'\">\n    </symphony-placeholder>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Filter search results'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"'true'\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>X Event Venues</symphony-h4>\n  <symphony-contextual-menu sfx-grid-action\n    class=\"more-options\"\n    *ngIf=\"eventSettingsPageModel.moreActions && eventSettingsPageModel.moreActions.length > 0\"\n    [moreActions]=\"eventSettingsPageModel.moreActions\"\n  >\n  </symphony-contextual-menu>\n  <symphony-placeholder\n    sfx-grid\n    [label]=\"'sfx-grid'\"\n    [height]=\"'500px'\"\n  ></symphony-placeholder>\n</symphony-admin-list-template>\n",
+        styles: [""]
     })
-], IconSwatchComponent);
+], EventsSettingsPageComponent);
 
-let IconSwatchModule = class IconSwatchModule {
+let AdminListTemplateComponent = class AdminListTemplateComponent {
+    constructor() { }
+    ngOnInit() { }
 };
-IconSwatchModule = __decorate([
+AdminListTemplateComponent = __decorate([
+    Component({
+        selector: 'symphony-admin-list-template',
+        template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"sfx-page-title\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 colmd-12 col-lg-12 add-source-list\">\n        <ng-content select=\"[sfx-header]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30\">\n    <div class=\"sfx-filter-section\">\n      <div class=\"row\">\n        <ng-content select=\"[sfx-filter-area]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n      <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5 sfx-pl-0\">\n        <!-- <h4 class=\"margin-left-minus-15\">22 Event Venues</h4> -->\n        <ng-content select=\"[sfx-title]\"></ng-content>\n      </div>\n      <span class=\"pull-right sfx-create-new\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </span>\n    </div>\n  </section>\n  <section class=\"sfx-mt-30\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n",
+        styles: [".sfx-page-title{margin-bottom:1.875rem;margin-top:3.125rem}.sfx-title-wrap{border-bottom:5px solid #000;display:inline-block;width:100%}"]
+    })
+], AdminListTemplateComponent);
+
+let AdminListModule = class AdminListModule {
+};
+AdminListModule = __decorate([
     NgModule({
-        declarations: [IconSwatchComponent],
-        imports: [CommonModule, IconModule, H5Module, ParagraphModule],
-        exports: [IconSwatchComponent],
+        declarations: [AdminListTemplateComponent],
+        imports: [CommonModule],
+        exports: [AdminListTemplateComponent],
     })
-], IconSwatchModule);
+], AdminListModule);
 
-let NoteComponent = class NoteComponent {
+let PlaceholderComponent = class PlaceholderComponent {
     constructor() { }
     ngOnInit() { }
 };
 __decorate([
     Input()
-], NoteComponent.prototype, "firstName", void 0);
+], PlaceholderComponent.prototype, "type", void 0);
 __decorate([
     Input()
-], NoteComponent.prototype, "lastName", void 0);
+], PlaceholderComponent.prototype, "label", void 0);
 __decorate([
     Input()
-], NoteComponent.prototype, "listTitle", void 0);
+], PlaceholderComponent.prototype, "tooltip", void 0);
 __decorate([
     Input()
-], NoteComponent.prototype, "timeStamp", void 0);
+], PlaceholderComponent.prototype, "tooltipPlacement", void 0);
 __decorate([
     Input()
-], NoteComponent.prototype, "description", void 0);
+], PlaceholderComponent.prototype, "height", void 0);
 __decorate([
     Input()
-], NoteComponent.prototype, "moreActions", void 0);
-NoteComponent = __decorate([
+], PlaceholderComponent.prototype, "width", void 0);
+PlaceholderComponent = __decorate([
     Component({
-        selector: 'symphony-note',
-        template: "<div class=\"sfx-note\">\n    <lib-avatar class=\"list-avatar\" [firstName]= firstName [lastName]= lastName></lib-avatar>\n    <div class=\"list-content\">\n        <symphony-list-title [listTitle]= listTitle></symphony-list-title>\n        <symphony-time-stamp [timeStamp]= timeStamp></symphony-time-stamp>\n        <symphony-description [description]= description></symphony-description>\n    </div>\n    <symphony-more-dropdown class=\"list-more-option\" [moreActions]= moreActions></symphony-more-dropdown>\n</div>\n",
-        styles: [".sfx-note{padding:20px 75px;position:relative}.sfx-note .list-avatar{left:0;position:absolute;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}"]
+        selector: 'symphony-placeholder',
+        template: "<div\n  *ngIf=\"type !== 'circle'\"\n  class=\"placeholder-dashed\"\n  [ngStyle]=\"{ height: height }\"\n>\n  {{ label }}\n</div>\n\n<div\n  *ngIf=\"type === 'circle'\"\n  [tooltip]=\"tooltip\"\n  [placement]=\"tooltipPlacement\"\n  class=\"placeholder-dashed-circle\"\n  [ngStyle]=\"{ height: height, width: width }\"\n>\n  {{ label }}\n</div>\n",
+        styles: [".placeholder-dashed{border:3px dashed #464646;border-radius:10px}.placeholder-dashed,.placeholder-dashed-circle{align-items:center;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 0,#d9d9d9 20px);color:#464646;display:flex;font-size:18px;height:100%;justify-content:center;text-align:center}.placeholder-dashed-circle{border:3px dashed #464646;border-radius:50%}.wrapper div{height:100%}"]
     })
-], NoteComponent);
+], PlaceholderComponent);
 
-let NoteModule = class NoteModule {
+let PlaceholderModule = class PlaceholderModule {
 };
-NoteModule = __decorate([
+PlaceholderModule = __decorate([
     NgModule({
-        declarations: [NoteComponent],
-        imports: [CommonModule, AvatarModule, ListTitleModule, TimeStampModule, DescriptionModule, MoreDropdownModule],
-        exports: [NoteComponent]
+        declarations: [PlaceholderComponent],
+        imports: [CommonModule, TooltipModule.forRoot()],
+        exports: [PlaceholderComponent],
     })
-], NoteModule);
+], PlaceholderModule);
 
-let MoleculesModule = class MoleculesModule {
+let EventsSettingsPageModule = class EventsSettingsPageModule {
 };
-MoleculesModule = __decorate([
+EventsSettingsPageModule = __decorate([
     NgModule({
-        declarations: [],
+        declarations: [EventsSettingsPageComponent],
         imports: [
             CommonModule,
-            AvatarModule,
-            ListTitleModule,
-            TimeStampModule,
-            DescriptionModule,
-            MoreDropdownModule,
-            PillsModule,
-            TaskModule,
-            ColorSwatchModule,
-            IconSwatchModule,
-        ],
-        exports: [
-            NoteModule,
-            PillsModule,
-            TaskModule,
-            ColorSwatchModule,
-            IconSwatchModule,
+            AdminListModule,
+            H3Module,
+            H4Module,
+            PlaceholderModule,
+            BreadcrumbModule,
+            TwoColumnFilterAreaModule,
+            IconModule,
+            InputTextModule,
+            ContextualMenuModule
         ],
+        exports: [EventsSettingsPageComponent],
     })
-], MoleculesModule);
-
-let TaskListComponent = class TaskListComponent {
-    constructor() { }
-    ngOnInit() { }
-};
-__decorate([
-    Input()
-], TaskListComponent.prototype, "taskList", void 0);
-TaskListComponent = __decorate([
-    Component({
-        selector: 'symphony-task-list',
-        template: "<ul class=\"task-list list-unstyled\">\n  <li class=\"task-list-item\" *ngFor=\"let task of taskList\">\n    <symphony-task [taskModel]=\"task\"></symphony-task>\n  </li>\n</ul>\n",
-        styles: [".task-list{border-top:1px solid #d9d9d9}"]
-    })
-], TaskListComponent);
-
-let TaskListModule = class TaskListModule {
-};
-TaskListModule = __decorate([
-    NgModule({
-        declarations: [TaskListComponent],
-        imports: [CommonModule, TaskModule],
-        exports: [TaskListComponent],
-    })
-], TaskListModule);
+], EventsSettingsPageModule);
 
 let ColorSwatchCollectionComponent = class ColorSwatchCollectionComponent {
     constructor() { }
@@ -947,109 +1446,553 @@ ColorSwatchCollectionModule = __decorate([
     NgModule({
         declarations: [ColorSwatchCollectionComponent],
         imports: [CommonModule, ColorSwatchModule],
+        exports: []
     })
 ], ColorSwatchCollectionModule);
 
-var Icons;
-(function (Icons) {
-    Icons["MOREOPTIONS"] = "si-more-options";
-    Icons["ADD"] = "si-add";
-    Icons["ACTIVITY"] = "si-activity";
-    Icons["ARROWHIDEREVEAL"] = "si-arrow-hide-reveal";
-    Icons["ARROWNEXT"] = "si-arrow-next";
-    Icons["ARROWPREV"] = "si-arrow-prev";
-    Icons["CLOSEMODAL"] = "si-close-modal";
-    Icons["COLLAPSE"] = "si-collapse";
-    Icons["DAYMODE"] = "si-daymode";
-    Icons["DELETE"] = "si-delete";
-    Icons["DOCUMENT"] = "si-document";
-    Icons["DOWNLOAD"] = "si-download";
-    Icons["EDIT"] = "si-edit";
-    Icons["EMAILDRIP"] = "si-email-drip";
-    Icons["EMAILOPEN"] = "si-email-open";
-    Icons["EMAILSEND"] = "si-email-send";
-    Icons["EXPAND"] = "si-expand";
-    Icons["FAVORITE"] = "si-favorite";
-    Icons["FEEDBACKMAYBE"] = "si-feedback-maybe";
-    Icons["FEEDBACKNO"] = "si-feedback-no";
-    Icons["FEEDBACKYES"] = "si-feedback-yes";
-    Icons["FOLDERMULTIPLE"] = "si-folder-multiple";
-    Icons["INCLUDE"] = "si-include";
-    Icons["INFO"] = "si-info";
-    Icons["INTERVIEW"] = "si-interview";
-    Icons["LINK"] = "si-link";
-    Icons["LOCATION"] = "si-location";
-    Icons["MENUALL"] = "si-menu-all";
-    Icons["MENUANALYTICS"] = "si-menu-analytics";
-    Icons["MENUASSETS"] = "si-menu-assets";
-    Icons["MENUCAMPAIGNS"] = "si-menu-campaigns";
-    Icons["MENUCONTACT"] = "si-menu-contact";
-    Icons["MENUCONTENT"] = "si-menu-content";
-    Icons["MENUDASHBOARD"] = "si-menu-dashboard";
-    Icons["MENUEVENTS"] = "si-menu-events";
-    Icons["MENUFOLDERS"] = "si-menu-folders";
-    Icons["MENUJOBS"] = "si-menu-jobs";
-    Icons["MENURETURN"] = "si-menu-return";
-    Icons["MENUWORKFLOWS"] = "si-menu-workflows";
-    Icons["MERGE"] = "si-merge";
-    Icons["MOVE"] = "si-move";
-    Icons["NIGHTMODE"] = "si-nightmode";
-    Icons["NOTIFICATION"] = "si-notification";
-    Icons["ORGANIZECOLUMNS"] = "si-organize-columns";
-    Icons["ORGANIZECONTACTS"] = "si-organize-contacts";
-    Icons["PENDINGINCOMPLETE"] = "si-pending-incomplete";
-    Icons["PHONENUMBER"] = "si-phone-number";
-    Icons["PREVIEW"] = "si-preview";
-    Icons["PROMOTE"] = "si-promote";
-    Icons["REFRESH"] = "si-refresh";
-    Icons["REMOVE"] = "si-remove";
-    Icons["EXCLUDE"] = "si-exclude";
-    Icons["RESULTSFILTERS"] = "si-results-filters";
-    Icons["REVIEW"] = "si-review";
-    Icons["SALARY"] = "si-salary";
-    Icons["SAVE"] = "si-save";
-    Icons["SEARCHADVANCED"] = "si-search-advanced";
-    Icons["SEARCHCLEAR"] = "si-search-clear";
-    Icons["SEARCHNEW"] = "si-search-new";
-    Icons["SETTINGSMART"] = "si-settings-smart";
-    Icons["SMS"] = "si-sms";
-    Icons["SORTMINI"] = "si-sort-mini";
-    Icons["STATUS"] = "si-status";
-    Icons["SYSTEMACTION"] = "si-system-action";
-    Icons["TASKCOMPLETED"] = "si-task-completed";
-    Icons["TASKOPEN"] = "si-task-open";
-    Icons["TIMEFRAME"] = "si-timeframe";
-    Icons["TIMELINE"] = "si-timeline";
-    Icons["UPLOAD"] = "si-upload";
-    Icons["USERMULTIPLE"] = "si-user-multiple";
-    Icons["USER"] = "si-user";
-})(Icons || (Icons = {}));
+class IconExplorerHelper {
+    static getAllIcons() {
+        let allIcons = [];
+        allIcons = allIcons.concat(this.getHasNoBorderIconList());
+        allIcons = allIcons.concat(this.getHasBorderIconList());
+        allIcons = allIcons.concat(this.getInverseIconList());
+        return allIcons;
+    }
+    static getHasNoBorderIconList() {
+        return [
+            {
+                icon: Icons.MOREOPTIONS,
+                iconName: 'MOREOPTIONS',
+                iconClass: 'si-more-options',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ADD,
+                iconName: 'ADD',
+                iconClass: 'si-add',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ACTIVITY,
+                iconName: 'ACTIVITY',
+                iconClass: 'si-activity',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ARROWHIDEREVEAL,
+                iconName: 'ARROWHIDEREVEAL',
+                iconClass: 'si-arrow-hide-reveal',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ARROWNEXT,
+                iconName: 'ARROWNEXT',
+                iconClass: 'si-arrow-next',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ARROWPREV,
+                iconName: 'ARROWPREV',
+                iconClass: 'si-arrow-prev',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.CLOSEMODAL,
+                iconName: 'CLOSEMODAL',
+                iconClass: 'si-close-modal',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.COLLAPSE,
+                iconName: 'COLLAPSE',
+                iconClass: 'si-collapse',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.DAYMODE,
+                iconName: 'DAYMODE',
+                iconClass: 'si-daymode',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.DELETE,
+                iconName: 'DELETE',
+                iconClass: 'si-delete',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.DOCUMENT,
+                iconName: 'DOCUMENT',
+                iconClass: 'si-document',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.DOWNLOAD,
+                iconName: 'DOWNLOAD',
+                iconClass: 'si-download',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.EDIT,
+                iconName: 'EDIT',
+                iconClass: 'si-edit',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.EMAILDRIP,
+                iconName: 'EMAILDRIP',
+                iconClass: 'si-email-drip',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.EMAILOPEN,
+                iconName: 'EMAILOPEN',
+                iconClass: 'si-email-open',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.EMAILSEND,
+                iconName: 'EMAILSEND',
+                iconClass: 'si-email-send',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.EXPAND,
+                iconName: 'EXPAND',
+                iconClass: 'si-expand',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.FAVORITE,
+                iconName: 'FAVORITE',
+                iconClass: 'si-favorite',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.FEEDBACKMAYBE,
+                iconName: 'FEEDBACKMAYBE',
+                iconClass: 'si-feedback-maybe',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.FEEDBACKNO,
+                iconName: 'FEEDBACKNO',
+                iconClass: 'si-feedback-no',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.FEEDBACKYES,
+                iconName: 'FEEDBACKYES',
+                iconClass: 'si-feedback-yes',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.FOLDERMULTIPLE,
+                iconName: 'FOLDERMULTIPLE',
+                iconClass: 'si-folder-multiple',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.INCLUDE,
+                iconName: 'INCLUDE',
+                iconClass: 'si-include',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.INFO,
+                iconName: 'INFO',
+                iconClass: 'si-info',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.INTERVIEW,
+                iconName: 'INTERVIEW',
+                iconClass: 'si-interview',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.LINK,
+                iconName: 'LINK',
+                iconClass: 'si-link',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.LOCATION,
+                iconName: 'LOCATION',
+                iconClass: 'si-location',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUALL,
+                iconName: 'MENUALL',
+                iconClass: 'si-menu-all',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUANALYTICS,
+                iconName: 'MENUANALYTICS',
+                iconClass: 'si-menu-analytics',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUASSETS,
+                iconName: 'MENUASSETS',
+                iconClass: 'si-menu-assets',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUCAMPAIGNS,
+                iconName: 'MENUCAMPAIGNS',
+                iconClass: 'si-menu-campaigns',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUCONTACT,
+                iconName: 'MENUCONTACT',
+                iconClass: 'si-menu-contact',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUCONTENT,
+                iconName: 'MENUCONTENT',
+                iconClass: 'si-menu-content',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUDASHBOARD,
+                iconName: 'MENUDASHBOARD',
+                iconClass: 'si-menu-dashboard',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUEVENTS,
+                iconName: 'MENUEVENTS',
+                iconClass: 'si-menu-events',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUFOLDERS,
+                iconName: 'MENUFOLDERS',
+                iconClass: 'si-menu-folders',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUJOBS,
+                iconName: 'MENUJOBS',
+                iconClass: 'si-menu-jobs',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENURETURN,
+                iconName: 'MENURETURN',
+                iconClass: 'si-menu-return',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUWORKFLOWS,
+                iconName: 'MENUWORKFLOWS',
+                iconClass: 'si-menu-workflows',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MERGE,
+                iconName: 'MERGE',
+                iconClass: 'si-merge',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MOVE,
+                iconName: 'MOVE',
+                iconClass: 'si-move',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.NIGHTMODE,
+                iconName: 'NIGHTMODE',
+                iconClass: 'si-nightmode',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.NOTIFICATION,
+                iconName: 'NOTIFICATION',
+                iconClass: 'si-notification',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ORGANIZECOLUMNS,
+                iconName: 'ORGANIZECOLUMNS',
+                iconClass: 'si-organize-columns',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ORGANIZECONTACTS,
+                iconName: 'ORGANIZECONTACTS',
+                iconClass: 'si-organize-contacts',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.PENDINGINCOMPLETE,
+                iconName: 'PENDINGINCOMPLETE',
+                iconClass: 'si-pending-incomplete',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.PHONENUMBER,
+                iconName: 'PHONENUMBER',
+                iconClass: 'si-phone-number',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.PREVIEW,
+                iconName: 'PREVIEW',
+                iconClass: 'si-preview',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.PROMOTE,
+                iconName: 'PROMOTE',
+                iconClass: 'si-promote',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.REFRESH,
+                iconName: 'REFRESH',
+                iconClass: 'si-refresh',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.REMOVE,
+                iconName: 'REMOVE',
+                iconClass: 'si-remove',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.EXCLUDE,
+                iconName: 'EXCLUDE',
+                iconClass: 'si-exclude',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.RESULTSFILTERS,
+                iconName: 'RESULTSFILTERS',
+                iconClass: 'si-results-filters',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.REVIEW,
+                iconName: 'REVIEW',
+                iconClass: 'si-review',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SALARY,
+                iconName: 'SALARY',
+                iconClass: 'si-salary',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SAVE,
+                iconName: 'SAVE',
+                iconClass: 'si-save',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SEARCHADVANCED,
+                iconName: 'SEARCHADVANCED',
+                iconClass: 'si-search-advanced',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SEARCHCLEAR,
+                iconName: 'SEARCHCLEAR',
+                iconClass: 'si-search-clear',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SEARCHNEW,
+                iconName: 'SEARCHNEW',
+                iconClass: 'si-search-new',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SETTINGSMART,
+                iconName: 'SETTINGSMART',
+                iconClass: 'si-settings-smart',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SMS,
+                iconName: 'SMS',
+                iconClass: 'si-sms',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SORTMINI,
+                iconName: 'SORTMINI',
+                iconClass: 'si-sort-mini',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.STATUS,
+                iconName: 'STATUS',
+                iconClass: 'si-status',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SYSTEMACTION,
+                iconName: 'SYSTEMACTION',
+                iconClass: 'si-system-action',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.TASKCOMPLETED,
+                iconName: 'TASKCOMPLETED',
+                iconClass: 'si-task-completed',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.TASKOPEN,
+                iconName: 'TASKOPEN',
+                iconClass: 'si-task-open',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.TIMEFRAME,
+                iconName: 'TIMEFRAME',
+                iconClass: 'si-timeframe',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.TIMELINE,
+                iconName: 'TIMELINE',
+                iconClass: 'si-timeline',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.UPLOAD,
+                iconName: 'UPLOAD',
+                iconClass: 'si-upload',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.USERMULTIPLE,
+                iconName: 'USERMULTIPLE',
+                iconClass: 'si-user-multiple',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.USER,
+                iconName: 'USER',
+                iconClass: 'si-user',
+                hasBorder: false,
+            },
+        ];
+    }
+    static getInverseIconList() {
+        return [
+            {
+                icon: Icons.ACTIVITY,
+                iconName: 'ACTIVITY',
+                iconClass: 'si-activity',
+                hasBorder: true,
+            },
+        ];
+    }
+    static getHasBorderIconList() {
+        return [
+            {
+                icon: Icons.ADD,
+                iconName: 'ADD',
+                iconClass: 'si-add',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.ARROWNEXT,
+                iconName: 'ARROWNEXT',
+                iconClass: 'si-arrow-next',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.DELETE,
+                iconName: 'DELETE',
+                iconClass: 'si-delete',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.DOWNLOAD,
+                iconName: 'DOWNLOAD',
+                iconClass: 'si-download',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.EDIT,
+                iconName: 'EDIT',
+                iconClass: 'si-edit',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.FEEDBACKYES,
+                iconName: 'FEEDBACKYES',
+                iconClass: 'si-feedback-yes',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.MENUCONTACT,
+                iconName: 'MENUCONTACT',
+                iconClass: 'si-menu-contact',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.MOREOPTIONS,
+                iconName: 'MOREOPTIONS',
+                iconClass: 'si-more-options',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.ORGANIZECOLUMNS,
+                iconName: 'ORGANIZECOLUMNS',
+                iconClass: 'si-organize-columns',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.PREVIEW,
+                iconName: 'PREVIEW',
+                iconClass: 'si-preview',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.SAVE,
+                iconName: 'SAVE',
+                iconClass: 'si-save',
+                hasBorder: true,
+            },
+        ];
+    }
+}
 
 let IconExplorerComponent = class IconExplorerComponent {
-    constructor() { }
+    constructor() {
+        this.iconList = IconExplorerHelper.getAllIcons();
+        this.hasBorderIconsList = IconExplorerHelper.getHasBorderIconList();
+        this.hasNoBorderIconsList = IconExplorerHelper.getHasNoBorderIconList();
+        this.isInverseIconsList = IconExplorerHelper.getInverseIconList();
+    }
     ngOnInit() {
-        this.enumElementCount(Icons);
+        this.iconCount = this.iconList.length;
         this.explorerTitle = `Iconography (${this.iconCount} icons)`;
-    }
-    enumElementCount(enumName) {
-        let count = 0;
-        for (const item in enumName) {
-            if (isNaN(Number(item))) {
-                count++;
-            }
-        }
-        this.iconCount = count;
-        return this.iconCount;
+        this.iconHasBorderCount = this.hasBorderIconsList.length;
+        this.borderTitle = `Icons with border (${this.iconHasBorderCount} icons)`;
+        this.iconHasNoBorderCount = this.hasNoBorderIconsList.length;
+        this.noBorderTitle = `Icons without border (${this.iconHasNoBorderCount} icons)`;
+        this.iconisInverseCount = this.isInverseIconsList.length;
+        this.backgroundTitle = `Icons with background (${this.iconisInverseCount} icons)`;
     }
 };
-__decorate([
-    Input()
-], IconExplorerComponent.prototype, "iconList", void 0);
 IconExplorerComponent = __decorate([
     Component({
         selector: 'symphony-icon-explorer',
-        template: "<div class=\"explorer-title\">\n  <symphony-h2 [text]=\"explorerTitle\"></symphony-h2>\n</div>\n<ul class=\"sfx-icon-list list-unstyled\">\n  <li class=\"icon-list-item\" *ngFor=\"let icon of iconList\">\n    <symphony-icon-swatch [iconSwatchModel]=\"icon\"></symphony-icon-swatch>\n  </li>\n</ul>\n",
-        styles: [".sfx-icon-list{display:flex;flex-direction:column;flex-wrap:wrap;height:90vh;width:100vw}.icon-list-item{flex:0 0 10%;padding:10px 0}.explorer-title{border-bottom:5px solid #000;margin-bottom:30px;padding-bottom:10px}"]
+        template: "<div class=\"explorer-title\">\n  <symphony-h2 [text]=\"explorerTitle\"></symphony-h2>\n</div>\n<div class=\"explorer-subtitle\">\n  <symphony-h3 [text]=\"noBorderTitle\"></symphony-h3>\n</div>\n<ul class=\"sfx-icon-list list-unstyled\">\n  <li class=\"icon-list-item\" *ngFor=\"let icon of hasNoBorderIconsList\">\n    <symphony-icon-swatch [iconSwatchModel]=\"icon\"></symphony-icon-swatch>\n  </li>\n</ul>\n\n<div class=\"explorer-subtitle\">\n  <symphony-h3 [text]=\"borderTitle\"></symphony-h3>\n</div>\n<ul class=\"sfx-icon-list list-unstyled\">\n  <li class=\"icon-list-item\" *ngFor=\"let icon of hasBorderIconsList\">\n    <symphony-icon-swatch [iconSwatchModel]=\"icon\"></symphony-icon-swatch>\n  </li>\n</ul>\n\n<div class=\"explorer-subtitle\">\n  <symphony-h3 [text]=\"backgroundTitle\"></symphony-h3>\n</div>\n<ul class=\"sfx-icon-list list-unstyled\">\n  <li class=\"icon-list-item\" *ngFor=\"let icon of isInverseIconsList\">\n    <symphony-icon-swatch\n      [iconSwatchModel]=\"icon\"\n      [isInverse]=\"true\"\n    ></symphony-icon-swatch>\n  </li>\n</ul>\n",
+        styles: [".sfx-icon-list{display:flex;flex-direction:row;flex-wrap:wrap;margin:20px 0 80px;width:100vw}.icon-list-item{flex:0 0 20%;padding:15px 0}.explorer-title{border-bottom:5px solid #000;margin-bottom:30px;padding-bottom:10px}.explorer-subtitle{margin-bottom:10px}"]
     })
 ], IconExplorerComponent);
 
@@ -1058,7 +2001,7 @@ let IconExplorerModule = class IconExplorerModule {
 IconExplorerModule = __decorate([
     NgModule({
         declarations: [IconExplorerComponent],
-        imports: [CommonModule, IconSwatchModule, H2Module],
+        imports: [CommonModule, IconSwatchModule, H2Module, H3Module],
     })
 ], IconExplorerModule);
 
@@ -1070,5 +2013,5 @@ IconExplorerModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { AtomsModule, ButtonComponent, ButtonModule, ColorSampleComponent, ColorSampleModule, ColorSwatchCollectionComponent, ColorSwatchCollectionModule, ColorSwatchComponent, ColorSwatchModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, IconComponent, IconExplorerComponent, IconExplorerModule, IconModule, IconSwatchComponent, IconSwatchModule, InputTextComponent, InputTextModule, MoleculesModule, ParagraphComponent, ParagraphModule, PillComponent, PillsComponent, PillsModule, TaskComponent, TaskIconComponent, TaskIconModule, TaskListComponent, TaskListModule, TaskModule, DropdownModule as ɵa, DropdownComponent as ɵb, MoreDropdownModule as ɵc, MoreDropdownComponent as ɵd, DescriptionModule as ɵe, DescriptionComponent as ɵf, ListTitleModule as ɵg, ListTitleComponent as ɵh, TimeStampModule as ɵi, TimeStampComponent as ɵj, AvatarModule as ɵk, AvatarComponent as ɵl, PillModule as ɵm, ButtonRoundModule as ɵn, ButtonRoundComponent as ɵo, NoteModule as ɵp, NoteComponent as ɵq };
+export { AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, ColorSampleComponent, ColorSampleModule, ColorSwatchCollectionComponent, ColorSwatchCollectionModule, ColorSwatchComponent, ColorSwatchModule, ContextualMenuComponent, ContextualMenuModule, EventsSettingsPageComponent, EventsSettingsPageModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, IconComponent, IconExplorerComponent, IconExplorerModule, IconModule, IconSwatchComponent, IconSwatchModule, IconWrapperComponent, IconWrapperModule, InputCheckboxComponent, InputCheckboxModule, InputRadioComponent, InputRadioModule, InputTextComponent, InputTextModule, MoleculesModule, NoteComponent, NoteListComponent, NoteListModule, NoteModule, ParagraphComponent, ParagraphModule, PillComponent, PillsComponent, PillsModule, TaskComponent, TaskIconComponent, TaskIconModule, TaskListComponent, TaskListModule, TaskModule, SfxInlineErrorModule as ɵa, SfxInlineErrorComponent as ɵb, PillModule as ɵc, FilterAreaModule as ɵd, FilterAreaComponent as ɵe, TwoColumnFilterAreaModule as ɵf, TwoColumnFilterAreaComponent as ɵg, GridModule as ɵh, GridComponent as ɵi, FrameworkModule as ɵj, ContactActivityScoreModule as ɵk, ContactActivityScoreComponent as ɵl, RelevanceScoreModule as ɵm, RelevanceScoreComponent as ɵn, AdminListModule as ɵo, AdminListTemplateComponent as ɵp, PlaceholderModule as ɵq, PlaceholderComponent as ɵr };
 //# sourceMappingURL=symphony-talent-component-library.js.map