@symphony-talent/component-library 1.6.0 → 1.7.0

package/bundles/symphony-talent-component-library.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ngx-bootstrap/dropdown'), require('@angular/platform-browser/animations'), require('ngx-bootstrap/tooltip'), require('@angular/forms')) :
-    typeof define === 'function' && define.amd ? define('@symphony-talent/component-library', ['exports', '@angular/core', '@angular/common', 'ngx-bootstrap/dropdown', '@angular/platform-browser/animations', 'ngx-bootstrap/tooltip', '@angular/forms'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["symphony-talent"] = global["symphony-talent"] || {}, global["symphony-talent"]["component-library"] = {}), global.ng.core, global.ng.common, global.dropdown, global.ng.platformBrowser.animations, global.tooltip, global.ng.forms));
-})(this, (function (exports, core, common, dropdown, animations, tooltip, forms) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-bootstrap/dropdown'), require('@angular/platform-browser/animations'), require('ngx-bootstrap/tooltip')) :
+    typeof define === 'function' && define.amd ? define('@symphony-talent/component-library', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'ngx-bootstrap/dropdown', '@angular/platform-browser/animations', 'ngx-bootstrap/tooltip'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["symphony-talent"] = global["symphony-talent"] || {}, global["symphony-talent"]["component-library"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.dropdown, global.ng.platformBrowser.animations, global.tooltip));
+})(this, (function (exports, core, common, forms, dropdown, animations, tooltip) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -296,6 +296,119 @@
         return value;
     }
 
+    exports.AvatarComponent = /** @class */ (function () {
+        function AvatarComponent(sp) {
+            this.sp = sp;
+        }
+        AvatarComponent.prototype.ngOnInit = function () {
+            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);
+        };
+        AvatarComponent.prototype.getColor = function (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';
+            }
+        };
+        return AvatarComponent;
+    }());
+    __decorate([
+        core.Input()
+    ], exports.AvatarComponent.prototype, "firstName", void 0);
+    __decorate([
+        core.Input()
+    ], exports.AvatarComponent.prototype, "lastName", void 0);
+    __decorate([
+        core.Input()
+    ], exports.AvatarComponent.prototype, "sizePx", void 0);
+    __decorate([
+        core.Input()
+    ], exports.AvatarComponent.prototype, "fontSizePx", void 0);
+    exports.AvatarComponent = __decorate([
+        core.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}"]
+        })
+    ], exports.AvatarComponent);
+
+    exports.AvatarModule = /** @class */ (function () {
+        function AvatarModule() {
+        }
+        return AvatarModule;
+    }());
+    exports.AvatarModule = __decorate([
+        core.NgModule({
+            declarations: [exports.AvatarComponent],
+            imports: [common.CommonModule],
+            providers: [common.SlicePipe],
+            exports: [exports.AvatarComponent],
+        })
+    ], exports.AvatarModule);
+
     exports.ButtonComponent = /** @class */ (function () {
         function ButtonComponent() {
             this.clicked = new core.EventEmitter();
@@ -405,86 +518,6 @@
         })
     ], exports.TaskIconModule);
 
-    exports.InputTextComponent = /** @class */ (function () {
-        function InputTextComponent() {
-            this.placeholder = '';
-            this.textChange = new core.EventEmitter();
-        }
-        InputTextComponent.prototype.ngOnInit = function () { };
-        InputTextComponent.prototype.onTextChange = function (event) {
-            this.textChange.emit(event.target.value);
-        };
-        return InputTextComponent;
-    }());
-    __decorate([
-        core.Input()
-    ], exports.InputTextComponent.prototype, "placeholder", void 0);
-    __decorate([
-        core.Input()
-    ], exports.InputTextComponent.prototype, "icon", void 0);
-    __decorate([
-        core.Input()
-    ], exports.InputTextComponent.prototype, "label", void 0);
-    __decorate([
-        core.Input()
-    ], exports.InputTextComponent.prototype, "isInverse", void 0);
-    __decorate([
-        core.Output()
-    ], exports.InputTextComponent.prototype, "textChange", void 0);
-    exports.InputTextComponent = __decorate([
-        core.Component({
-            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}"]
-        })
-    ], exports.InputTextComponent);
-
-    exports.IconComponent = /** @class */ (function () {
-        function IconComponent() {
-        }
-        IconComponent.prototype.ngOnInit = function () { };
-        return IconComponent;
-    }());
-    __decorate([
-        core.Input()
-    ], exports.IconComponent.prototype, "icon", void 0);
-    __decorate([
-        core.Input()
-    ], exports.IconComponent.prototype, "isSecondary", void 0);
-    exports.IconComponent = __decorate([
-        core.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}i{height:18px;width:18px}"]
-        })
-    ], exports.IconComponent);
-
-    exports.IconModule = /** @class */ (function () {
-        function IconModule() {
-        }
-        return IconModule;
-    }());
-    exports.IconModule = __decorate([
-        core.NgModule({
-            declarations: [exports.IconComponent],
-            imports: [common.CommonModule],
-            exports: [exports.IconComponent],
-        })
-    ], exports.IconModule);
-
-    exports.InputTextModule = /** @class */ (function () {
-        function InputTextModule() {
-        }
-        return InputTextModule;
-    }());
-    exports.InputTextModule = __decorate([
-        core.NgModule({
-            declarations: [exports.InputTextComponent],
-            imports: [common.CommonModule, exports.IconModule],
-            exports: [exports.InputTextComponent],
-        })
-    ], exports.InputTextModule);
-
     exports.ColorSampleComponent = /** @class */ (function () {
         function ColorSampleComponent() {
         }
@@ -715,194 +748,45 @@
         })
     ], exports.H5Module);
 
-    exports["ɵf"] = /** @class */ (function () {
-        function AvatarComponent(sp) {
-            this.sp = sp;
+    exports.IconComponent = /** @class */ (function () {
+        function IconComponent() {
+            this.clicked = new core.EventEmitter();
         }
-        AvatarComponent.prototype.ngOnInit = function () {
-            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);
+        IconComponent.prototype.ngOnInit = function () { };
+        IconComponent.prototype.onClick = function () {
+            this.clicked.emit('clicked');
         };
-        AvatarComponent.prototype.getColor = function (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';
-            }
-        };
-        return AvatarComponent;
+        return IconComponent;
     }());
     __decorate([
         core.Input()
-    ], exports["ɵf"].prototype, "firstName", void 0);
-    __decorate([
-        core.Input()
-    ], exports["ɵf"].prototype, "lastName", void 0);
+    ], exports.IconComponent.prototype, "icon", void 0);
     __decorate([
         core.Input()
-    ], exports["ɵf"].prototype, "sizePx", void 0);
+    ], exports.IconComponent.prototype, "isSecondary", void 0);
     __decorate([
-        core.Input()
-    ], exports["ɵf"].prototype, "fontSizePx", void 0);
-    exports["ɵf"] = __decorate([
+        core.Output()
+    ], exports.IconComponent.prototype, "clicked", void 0);
+    exports.IconComponent = __decorate([
         core.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-icon',
+            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}"]
         })
-    ], exports["ɵf"]);
+    ], exports.IconComponent);
 
-    exports["ɵe"] = /** @class */ (function () {
-        function AvatarModule() {
+    exports.IconModule = /** @class */ (function () {
+        function IconModule() {
         }
-        return AvatarModule;
+        return IconModule;
     }());
-    exports["ɵe"] = __decorate([
+    exports.IconModule = __decorate([
         core.NgModule({
-            declarations: [exports["ɵf"]],
+            declarations: [exports.IconComponent],
             imports: [common.CommonModule],
-            providers: [common.SlicePipe],
-            exports: [exports["ɵf"]],
-        })
-    ], exports["ɵe"]);
-
-    exports["ɵb"] = /** @class */ (function () {
-        function DropdownComponent() {
-        }
-        DropdownComponent.prototype.ngOnInit = function () {
-        };
-        return DropdownComponent;
-    }());
-    exports["ɵb"] = __decorate([
-        core.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: [""]
-        })
-    ], exports["ɵb"]);
-
-    exports["ɵa"] = /** @class */ (function () {
-        function DropdownModule() {
-        }
-        return DropdownModule;
-    }());
-    exports["ɵa"] = __decorate([
-        core.NgModule({
-            declarations: [exports["ɵb"]],
-            imports: [common.CommonModule, dropdown.BsDropdownModule.forRoot(), animations.BrowserAnimationsModule],
-            providers: [],
-            exports: [exports["ɵb"]],
-        })
-    ], exports["ɵa"]);
-
-    exports["ɵd"] = /** @class */ (function () {
-        function MoreDropdownComponent() {
-        }
-        MoreDropdownComponent.prototype.ngOnInit = function () {
-            this.sfxMoreActions = this.moreActions;
-        };
-        return MoreDropdownComponent;
-    }());
-    __decorate([
-        core.Input()
-    ], exports["ɵd"].prototype, "moreActions", void 0);
-    exports["ɵd"] = __decorate([
-        core.Component({
-            selector: 'symphony-more-dropdown',
-            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:24px;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;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}"]
-        })
-    ], exports["ɵd"]);
-
-    exports["ɵc"] = /** @class */ (function () {
-        function MoreDropdownModule() {
-        }
-        return MoreDropdownModule;
-    }());
-    exports["ɵc"] = __decorate([
-        core.NgModule({
-            declarations: [exports["ɵd"]],
-            imports: [common.CommonModule, dropdown.BsDropdownModule.forRoot(), animations.BrowserAnimationsModule],
-            exports: [exports["ɵd"]]
-        })
-    ], exports["ɵc"]);
-
-    exports["ɵg"] = /** @class */ (function () {
-        function PillModule() {
-        }
-        return PillModule;
-    }());
-    exports["ɵg"] = __decorate([
-        core.NgModule({
-            declarations: [exports.PillComponent],
-            imports: [
-                common.CommonModule, tooltip.TooltipModule.forRoot()
-            ],
-            exports: [exports.PillComponent],
+            exports: [exports.IconComponent],
         })
-    ], exports["ɵg"]);
+    ], exports.IconModule);
 
     var Icons;
     (function (Icons) {
@@ -979,97 +863,92 @@
         Icons["USER"] = "si-user";
     })(Icons || (Icons = {}));
 
-    exports["ɵi"] = /** @class */ (function () {
+    exports.IconWrapperComponent = /** @class */ (function () {
         function IconWrapperComponent() {
             this.Icons = Icons;
+            this.clicked = new core.EventEmitter();
         }
         IconWrapperComponent.prototype.ngOnInit = function () { };
+        IconWrapperComponent.prototype.onClick = function () {
+            this.clicked.emit('clicked');
+        };
         return IconWrapperComponent;
     }());
     __decorate([
         core.Input()
-    ], exports["ɵi"].prototype, "isInverse", void 0);
-    exports["ɵi"] = __decorate([
+    ], exports.IconWrapperComponent.prototype, "isInverse", void 0);
+    __decorate([
+        core.Output()
+    ], exports.IconWrapperComponent.prototype, "clicked", void 0);
+    exports.IconWrapperComponent = __decorate([
         core.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}"]
         })
-    ], exports["ɵi"]);
+    ], exports.IconWrapperComponent);
 
-    exports["ɵh"] = /** @class */ (function () {
+    exports.IconWrapperModule = /** @class */ (function () {
         function IconWrapperModule() {
         }
         return IconWrapperModule;
     }());
-    exports["ɵh"] = __decorate([
+    exports.IconWrapperModule = __decorate([
         core.NgModule({
-            declarations: [exports["ɵi"]],
+            declarations: [exports.IconWrapperComponent],
             imports: [common.CommonModule],
-            exports: [exports["ɵi"]],
+            exports: [exports.IconWrapperComponent],
         })
-    ], exports["ɵh"]);
+    ], exports.IconWrapperModule);
 
-    exports["ɵk"] = /** @class */ (function () {
-        function TwoColumnFilterAreaComponent() {
+    exports.InputCheckboxComponent = /** @class */ (function () {
+        function InputCheckboxComponent() {
+            this.clicked = new core.EventEmitter();
         }
-        TwoColumnFilterAreaComponent.prototype.ngOnInit = function () { };
-        return TwoColumnFilterAreaComponent;
+        InputCheckboxComponent.prototype.ngOnInit = function () { };
+        InputCheckboxComponent.prototype.onClick = function () {
+            this.isActive ? (this.isActive = false) : (this.isActive = true);
+            this.clicked.emit({
+                label: this.label,
+                isActive: this.isActive,
+            });
+        };
+        return InputCheckboxComponent;
     }());
     __decorate([
         core.Input()
-    ], exports["ɵk"].prototype, "height", void 0);
-    exports["ɵk"] = __decorate([
-        core.Component({
-            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}"]
-        })
-    ], exports["ɵk"]);
-
-    exports["ɵj"] = /** @class */ (function () {
-        function TwoColumnFilterAreaModule() {
-        }
-        return TwoColumnFilterAreaModule;
-    }());
-    exports["ɵj"] = __decorate([
-        core.NgModule({
-            declarations: [exports["ɵk"]],
-            imports: [common.CommonModule],
-            exports: [exports["ɵk"]],
-        })
-    ], exports["ɵj"]);
-
-    exports["ɵo"] = /** @class */ (function () {
-        function SfxInlineErrorComponent() {
-        }
-        return SfxInlineErrorComponent;
-    }());
+    ], exports.InputCheckboxComponent.prototype, "isActive", void 0);
+    __decorate([
+        core.Input()
+    ], exports.InputCheckboxComponent.prototype, "label", void 0);
     __decorate([
         core.Input()
-    ], exports["ɵo"].prototype, "errorMessage", void 0);
-    exports["ɵo"] = __decorate([
+    ], exports.InputCheckboxComponent.prototype, "isRequired", void 0);
+    __decorate([
+        core.Output()
+    ], exports.InputCheckboxComponent.prototype, "clicked", void 0);
+    exports.InputCheckboxComponent = __decorate([
         core.Component({
-            selector: 'lib-sfx-inline-error',
-            template: "<p>{{ errorMessage }}</p>\n",
-            styles: ["p{color:red!important;font-size:1rem;margin:0;padding:10px 0}"]
+            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}"]
         })
-    ], exports["ɵo"]);
+    ], exports.InputCheckboxComponent);
 
-    exports["ɵn"] = /** @class */ (function () {
-        function SfxInlineErrorModule() {
+    exports.InputCheckboxModule = /** @class */ (function () {
+        function InputCheckboxModule() {
         }
-        return SfxInlineErrorModule;
+        return InputCheckboxModule;
     }());
-    exports["ɵn"] = __decorate([
+    exports.InputCheckboxModule = __decorate([
         core.NgModule({
-            declarations: [exports["ɵo"]],
+            declarations: [exports.InputCheckboxComponent],
             imports: [common.CommonModule],
-            exports: [exports["ɵo"]],
+            exports: [exports.InputCheckboxComponent],
         })
-    ], exports["ɵn"]);
+    ], exports.InputCheckboxModule);
 
-    exports["ɵm"] = /** @class */ (function () {
+    exports.InputRadioComponent = /** @class */ (function () {
         function InputRadioComponent() {
             this.clicked = new core.EventEmitter();
         }
@@ -1085,212 +964,258 @@
     }());
     __decorate([
         core.Input()
-    ], exports["ɵm"].prototype, "isActive", void 0);
+    ], exports.InputRadioComponent.prototype, "isActive", void 0);
     __decorate([
         core.Input()
-    ], exports["ɵm"].prototype, "label", void 0);
+    ], exports.InputRadioComponent.prototype, "label", void 0);
     __decorate([
         core.Input()
-    ], exports["ɵm"].prototype, "isRequired", void 0);
+    ], exports.InputRadioComponent.prototype, "isRequired", void 0);
     __decorate([
         core.Output()
-    ], exports["ɵm"].prototype, "clicked", void 0);
-    exports["ɵm"] = __decorate([
+    ], exports.InputRadioComponent.prototype, "clicked", void 0);
+    exports.InputRadioComponent = __decorate([
         core.Component({
             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}"]
         })
-    ], exports["ɵm"]);
+    ], exports.InputRadioComponent);
+
+    exports["ɵb"] = /** @class */ (function () {
+        function SfxInlineErrorComponent() {
+        }
+        return SfxInlineErrorComponent;
+    }());
+    __decorate([
+        core.Input()
+    ], exports["ɵb"].prototype, "errorMessage", void 0);
+    exports["ɵb"] = __decorate([
+        core.Component({
+            selector: 'lib-sfx-inline-error',
+            template: "<p>{{ errorMessage }}</p>\n",
+            styles: ["p{color:red!important;font-size:1rem;margin:0;padding:10px 0}"]
+        })
+    ], exports["ɵb"]);
+
+    exports["ɵa"] = /** @class */ (function () {
+        function SfxInlineErrorModule() {
+        }
+        return SfxInlineErrorModule;
+    }());
+    exports["ɵa"] = __decorate([
+        core.NgModule({
+            declarations: [exports["ɵb"]],
+            imports: [common.CommonModule],
+            exports: [exports["ɵb"]],
+        })
+    ], exports["ɵa"]);
 
-    exports["ɵl"] = /** @class */ (function () {
+    exports.InputRadioModule = /** @class */ (function () {
         function InputRadioModule() {
         }
         return InputRadioModule;
     }());
-    exports["ɵl"] = __decorate([
+    exports.InputRadioModule = __decorate([
         core.NgModule({
-            declarations: [exports["ɵm"]],
+            declarations: [exports.InputRadioComponent],
             imports: [
                 common.CommonModule,
                 forms.FormsModule,
                 forms.ReactiveFormsModule,
-                exports["ɵn"],
+                exports["ɵa"],
             ],
-            exports: [exports["ɵm"]],
+            exports: [exports.InputRadioComponent],
         })
-    ], exports["ɵl"]);
+    ], exports.InputRadioModule);
 
-    exports["ɵq"] = /** @class */ (function () {
-        function InputCheckboxComponent() {
-            this.clicked = new core.EventEmitter();
+    exports.InputTextComponent = /** @class */ (function () {
+        function InputTextComponent() {
+            this.placeholder = '';
+            this.textChange = new core.EventEmitter();
         }
-        InputCheckboxComponent.prototype.ngOnInit = function () { };
-        InputCheckboxComponent.prototype.onClick = function () {
-            this.isActive ? (this.isActive = false) : (this.isActive = true);
-            this.clicked.emit({
-                label: this.label,
-                isActive: this.isActive,
-            });
+        InputTextComponent.prototype.ngOnInit = function () { };
+        InputTextComponent.prototype.onTextChange = function (event) {
+            this.textChange.emit(event.target.value);
         };
-        return InputCheckboxComponent;
+        return InputTextComponent;
     }());
     __decorate([
         core.Input()
-    ], exports["ɵq"].prototype, "isActive", void 0);
+    ], exports.InputTextComponent.prototype, "placeholder", void 0);
+    __decorate([
+        core.Input()
+    ], exports.InputTextComponent.prototype, "icon", void 0);
     __decorate([
         core.Input()
-    ], exports["ɵq"].prototype, "label", void 0);
+    ], exports.InputTextComponent.prototype, "label", void 0);
     __decorate([
         core.Input()
-    ], exports["ɵq"].prototype, "isRequired", void 0);
+    ], exports.InputTextComponent.prototype, "isInverse", void 0);
     __decorate([
         core.Output()
-    ], exports["ɵq"].prototype, "clicked", void 0);
-    exports["ɵq"] = __decorate([
+    ], exports.InputTextComponent.prototype, "textChange", void 0);
+    exports.InputTextComponent = __decorate([
         core.Component({
-            selector: 'symphony-input-checkbox',
-            template: "<div class=\"sfx-checkbox\">\n    <input\n        type=\"checkbox\"\n        class=\"sfx-checkbox-input\"\n        [checked]=\"isActive\"\n        name=\"{{ label }}\"\n    />\n    <label (click)=\"onClick()\" for=\"{{ label }}\" class=\"Font400\"\n        >{{ label\n        }}<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}"]
+            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}"]
         })
-    ], exports["ɵq"]);
+    ], exports.InputTextComponent);
 
-    exports["ɵp"] = /** @class */ (function () {
-        function InputCheckboxModule() {
+    exports.InputTextModule = /** @class */ (function () {
+        function InputTextModule() {
         }
-        return InputCheckboxModule;
+        return InputTextModule;
     }());
-    exports["ɵp"] = __decorate([
+    exports.InputTextModule = __decorate([
         core.NgModule({
-            declarations: [exports["ɵq"]],
-            imports: [common.CommonModule],
-            exports: [exports["ɵq"]],
+            declarations: [exports.InputTextComponent],
+            imports: [common.CommonModule, exports.IconModule],
+            exports: [exports.InputTextComponent],
         })
-    ], exports["ɵp"]);
+    ], exports.InputTextModule);
 
-    exports.AtomsModule = /** @class */ (function () {
-        function AtomsModule() {
+    exports.ContextualMenuComponent = /** @class */ (function () {
+        function ContextualMenuComponent() {
         }
-        return AtomsModule;
+        ContextualMenuComponent.prototype.ngOnInit = function () {
+            this.sfxMoreActions = this.moreActions;
+        };
+        return ContextualMenuComponent;
     }());
-    exports.AtomsModule = __decorate([
-        core.NgModule({
-            declarations: [],
-            imports: [],
-            exports: [
-                exports.ButtonModule,
-                exports["ɵa"],
-                exports["ɵc"],
-                exports["ɵe"],
-                exports["ɵg"],
-                exports.TaskIconModule,
-                exports.ColorSampleModule,
-                exports.H1Module,
-                exports.H2Module,
-                exports.H3Module,
-                exports.H4Module,
-                exports.ParagraphModule,
-                exports.H5Module,
-                exports.IconModule,
-                exports["ɵh"],
-                exports["ɵj"],
-                exports["ɵl"],
-                exports["ɵp"],
-                exports.InputTextModule,
-            ],
+    __decorate([
+        core.Input()
+    ], exports.ContextualMenuComponent.prototype, "moreActions", void 0);
+    exports.ContextualMenuComponent = __decorate([
+        core.Component({
+            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:24px;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;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}"]
         })
-    ], exports.AtomsModule);
+    ], exports.ContextualMenuComponent);
 
-    exports.PillsComponent = /** @class */ (function () {
-        function PillsComponent() {
-            this.removePill = new core.EventEmitter();
+    exports.ContextualMenuModule = /** @class */ (function () {
+        function ContextualMenuModule() {
         }
-        PillsComponent.prototype.ngOnInit = function () {
-        };
-        PillsComponent.prototype.onRemovePill = function (event) {
-            this.removePill.emit(this.pillsList.find(function (p) { return p.pillLabel.toLowerCase() === event.toLowerCase(); }));
-        };
-        return PillsComponent;
+        return ContextualMenuModule;
     }());
-    __decorate([
-        core.Input()
-    ], exports.PillsComponent.prototype, "hasClose", void 0);
-    __decorate([
-        core.Input()
-    ], exports.PillsComponent.prototype, "pillsList", void 0);
-    __decorate([
-        core.Input()
-    ], exports.PillsComponent.prototype, "hasTooltips", void 0);
-    __decorate([
-        core.Output()
-    ], exports.PillsComponent.prototype, "removePill", void 0);
-    exports.PillsComponent = __decorate([
-        core.Component({
-            selector: 'symphony-pills',
-            template: "<div class=\"sfx-pills-wrapper\">\n  <symphony-pill *ngFor=\"let pill of pillsList\"\n    [pillLabel]=pill.pillLabel\n    [hasClose]=hasClose\n    [tooltipLabel]=pill.tooltipLabel\n    (removePill)=\"onRemovePill($event)\"\n  ></symphony-pill>\n</div>",
-            styles: [".sfx-pills-wrapper{overflow-x:auto;padding-bottom:20px;white-space:nowrap;width:100%}"]
+    exports.ContextualMenuModule = __decorate([
+        core.NgModule({
+            declarations: [exports.ContextualMenuComponent],
+            imports: [common.CommonModule, dropdown.BsDropdownModule.forRoot(), animations.BrowserAnimationsModule],
+            exports: [exports.ContextualMenuComponent]
         })
-    ], exports.PillsComponent);
+    ], exports.ContextualMenuModule);
 
-    exports.PillsModule = /** @class */ (function () {
-        function PillsModule() {
+    exports["ɵc"] = /** @class */ (function () {
+        function PillModule() {
         }
-        return PillsModule;
+        return PillModule;
     }());
-    exports.PillsModule = __decorate([
+    exports["ɵc"] = __decorate([
         core.NgModule({
-            declarations: [exports.PillsComponent],
+            declarations: [exports.PillComponent],
             imports: [
-                common.CommonModule,
-                exports["ɵg"]
+                common.CommonModule, tooltip.TooltipModule.forRoot()
             ],
-            exports: [
-                exports.PillsComponent
-            ]
+            exports: [exports.PillComponent],
         })
-    ], exports.PillsModule);
+    ], exports["ɵc"]);
 
-    exports.TaskComponent = /** @class */ (function () {
-        function TaskComponent() {
-            this.taskModel = {
-                assignee: '',
-                title: '',
-                dueDate: '',
-                moreActions: [],
-            };
+    exports["ɵe"] = /** @class */ (function () {
+        function TwoColumnFilterAreaComponent() {
         }
-        TaskComponent.prototype.ngOnInit = function () { };
-        return TaskComponent;
+        TwoColumnFilterAreaComponent.prototype.ngOnInit = function () { };
+        return TwoColumnFilterAreaComponent;
     }());
     __decorate([
         core.Input()
-    ], exports.TaskComponent.prototype, "taskModel", void 0);
-    exports.TaskComponent = __decorate([
+    ], exports["ɵe"].prototype, "height", void 0);
+    exports["ɵe"] = __decorate([
         core.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-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-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-more-dropdown{margin-left:auto}.sfx-task symphony-paragraph{display:inline-block;margin-right:20px}.sfx-task .time-and-assigned{margin-bottom:-10px}"]
+            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}"]
         })
-    ], exports.TaskComponent);
+    ], exports["ɵe"]);
 
-    exports.TaskModule = /** @class */ (function () {
-        function TaskModule() {
+    exports["ɵd"] = /** @class */ (function () {
+        function TwoColumnFilterAreaModule() {
         }
-        return TaskModule;
+        return TwoColumnFilterAreaModule;
     }());
-    exports.TaskModule = __decorate([
+    exports["ɵd"] = __decorate([
         core.NgModule({
-            declarations: [exports.TaskComponent],
-            imports: [
-                common.CommonModule,
-                exports.TaskIconModule,
+            declarations: [exports["ɵe"]],
+            imports: [common.CommonModule],
+            exports: [exports["ɵe"]],
+        })
+    ], exports["ɵd"]);
+
+    exports.AtomsModule = /** @class */ (function () {
+        function AtomsModule() {
+        }
+        return AtomsModule;
+    }());
+    exports.AtomsModule = __decorate([
+        core.NgModule({
+            declarations: [],
+            imports: [],
+            exports: [
+                exports.ButtonModule,
+                exports.ContextualMenuModule,
+                exports.AvatarModule,
                 exports["ɵc"],
+                exports.TaskIconModule,
+                exports.ColorSampleModule,
+                exports.H1Module,
+                exports.H2Module,
                 exports.H3Module,
-                exports.ParagraphModule
+                exports.H4Module,
+                exports.H5Module,
+                exports.ParagraphModule,
+                exports.IconModule,
+                exports.IconWrapperModule,
+                exports["ɵd"],
+                exports.InputRadioModule,
+                exports.InputCheckboxModule,
+                exports.InputTextModule,
             ],
-            exports: [exports.TaskComponent],
         })
-    ], exports.TaskModule);
+    ], exports.AtomsModule);
+
+    exports.BreadcrumbComponent = /** @class */ (function () {
+        function BreadcrumbComponent() {
+        }
+        BreadcrumbComponent.prototype.ngOnInit = function () {
+            this.icon = Icons.ARROWNEXT;
+        };
+        return BreadcrumbComponent;
+    }());
+    __decorate([
+        core.Input()
+    ], exports.BreadcrumbComponent.prototype, "breadcrumbs", void 0);
+    exports.BreadcrumbComponent = __decorate([
+        core.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}"]
+        })
+    ], exports.BreadcrumbComponent);
+
+    exports.BreadcrumbModule = /** @class */ (function () {
+        function BreadcrumbModule() {
+        }
+        return BreadcrumbModule;
+    }());
+    exports.BreadcrumbModule = __decorate([
+        core.NgModule({
+            declarations: [exports.BreadcrumbComponent],
+            imports: [common.CommonModule, exports.H3Module, exports.IconModule],
+            exports: [exports.BreadcrumbComponent],
+        })
+    ], exports.BreadcrumbModule);
 
     exports.ColorSwatchComponent = /** @class */ (function () {
         function ColorSwatchComponent() {
@@ -1374,13 +1299,13 @@
                 exports.IconModule,
                 exports.H5Module,
                 exports.ParagraphModule,
-                exports["ɵh"],
+                exports.IconWrapperModule,
             ],
             exports: [exports.IconSwatchComponent],
         })
     ], exports.IconSwatchModule);
 
-    exports["ɵu"] = /** @class */ (function () {
+    exports.NoteComponent = /** @class */ (function () {
         function NoteComponent() {
             this.noteModel = {
                 firstName: '',
@@ -1396,65 +1321,124 @@
     }());
     __decorate([
         core.Input()
-    ], exports["ɵu"].prototype, "noteModel", void 0);
-    exports["ɵu"] = __decorate([
+    ], exports.NoteComponent.prototype, "noteModel", void 0);
+    exports.NoteComponent = __decorate([
         core.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-more-dropdown class=\"list-more-option\" [moreActions]= noteModel.moreActions></symphony-more-dropdown>\n</div>\n",
+            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}"]
         })
-    ], exports["ɵu"]);
+    ], exports.NoteComponent);
 
-    exports["ɵt"] = /** @class */ (function () {
+    exports.NoteModule = /** @class */ (function () {
         function NoteModule() {
         }
         return NoteModule;
     }());
-    exports["ɵt"] = __decorate([
+    exports.NoteModule = __decorate([
         core.NgModule({
-            declarations: [exports["ɵu"]],
+            declarations: [exports.NoteComponent],
             imports: [
                 common.CommonModule,
-                exports["ɵe"],
-                exports["ɵc"],
+                exports.AvatarModule,
+                exports.ContextualMenuModule,
                 exports.H3Module,
                 exports.ParagraphModule
             ],
-            exports: [exports["ɵu"]]
+            exports: [exports.NoteComponent]
         })
-    ], exports["ɵt"]);
+    ], exports.NoteModule);
 
-    exports["ɵs"] = /** @class */ (function () {
-        function BreadcrumbComponent() {
+    exports.PillsComponent = /** @class */ (function () {
+        function PillsComponent() {
+            this.removePill = new core.EventEmitter();
         }
-        BreadcrumbComponent.prototype.ngOnInit = function () {
-            this.icon = Icons.ARROWNEXT;
+        PillsComponent.prototype.ngOnInit = function () {
         };
-        return BreadcrumbComponent;
+        PillsComponent.prototype.onRemovePill = function (event) {
+            this.removePill.emit(this.pillsList.find(function (p) { return p.pillLabel.toLowerCase() === event.toLowerCase(); }));
+        };
+        return PillsComponent;
     }());
     __decorate([
         core.Input()
-    ], exports["ɵs"].prototype, "breadcrumbs", void 0);
-    exports["ɵs"] = __decorate([
+    ], exports.PillsComponent.prototype, "hasClose", void 0);
+    __decorate([
+        core.Input()
+    ], exports.PillsComponent.prototype, "pillsList", void 0);
+    __decorate([
+        core.Input()
+    ], exports.PillsComponent.prototype, "hasTooltips", void 0);
+    __decorate([
+        core.Output()
+    ], exports.PillsComponent.prototype, "removePill", void 0);
+    exports.PillsComponent = __decorate([
         core.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}"]
+            selector: 'symphony-pills',
+            template: "<div class=\"sfx-pills-wrapper\">\n  <symphony-pill *ngFor=\"let pill of pillsList\"\n    [pillLabel]=pill.pillLabel\n    [hasClose]=hasClose\n    [tooltipLabel]=pill.tooltipLabel\n    (removePill)=\"onRemovePill($event)\"\n  ></symphony-pill>\n</div>",
+            styles: [".sfx-pills-wrapper{overflow-x:auto;padding-bottom:20px;white-space:nowrap;width:100%}"]
         })
-    ], exports["ɵs"]);
+    ], exports.PillsComponent);
 
-    exports["ɵr"] = /** @class */ (function () {
-        function BreadcrumbModule() {
+    exports.PillsModule = /** @class */ (function () {
+        function PillsModule() {
         }
-        return BreadcrumbModule;
+        return PillsModule;
     }());
-    exports["ɵr"] = __decorate([
+    exports.PillsModule = __decorate([
         core.NgModule({
-            declarations: [exports["ɵs"]],
-            imports: [common.CommonModule, exports.H3Module, exports.IconModule],
-            exports: [exports["ɵs"]],
+            declarations: [exports.PillsComponent],
+            imports: [
+                common.CommonModule,
+                exports["ɵc"]
+            ],
+            exports: [
+                exports.PillsComponent
+            ]
+        })
+    ], exports.PillsModule);
+
+    exports.TaskComponent = /** @class */ (function () {
+        function TaskComponent() {
+            this.taskModel = {
+                assignee: '',
+                title: '',
+                dueDate: '',
+                moreActions: [],
+            };
+        }
+        TaskComponent.prototype.ngOnInit = function () { };
+        return TaskComponent;
+    }());
+    __decorate([
+        core.Input()
+    ], exports.TaskComponent.prototype, "taskModel", void 0);
+    exports.TaskComponent = __decorate([
+        core.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-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}"]
         })
-    ], exports["ɵr"]);
+    ], exports.TaskComponent);
+
+    exports.TaskModule = /** @class */ (function () {
+        function TaskModule() {
+        }
+        return TaskModule;
+    }());
+    exports.TaskModule = __decorate([
+        core.NgModule({
+            declarations: [exports.TaskComponent],
+            imports: [
+                common.CommonModule,
+                exports.TaskIconModule,
+                exports.ContextualMenuModule,
+                exports.H3Module,
+                exports.ParagraphModule
+            ],
+            exports: [exports.TaskComponent],
+        })
+    ], exports.TaskModule);
 
     exports.MoleculesModule = /** @class */ (function () {
         function MoleculesModule() {
@@ -1466,21 +1450,21 @@
             declarations: [],
             imports: [
                 common.CommonModule,
-                exports["ɵe"],
-                exports["ɵc"],
+                exports.AvatarModule,
+                exports.ContextualMenuModule,
                 exports.PillsModule,
                 exports.TaskModule,
                 exports.ColorSwatchModule,
                 exports.IconSwatchModule,
-                exports["ɵr"],
+                exports.BreadcrumbModule,
             ],
             exports: [
-                exports["ɵt"],
+                exports.NoteModule,
                 exports.PillsModule,
                 exports.TaskModule,
                 exports.ColorSwatchModule,
                 exports.IconSwatchModule,
-                exports["ɵr"],
+                exports.BreadcrumbModule,
             ],
         })
     ], exports.MoleculesModule);
@@ -1515,597 +1499,161 @@
         })
     ], exports.TaskListModule);
 
-    exports.ColorSwatchCollectionComponent = /** @class */ (function () {
-        function ColorSwatchCollectionComponent() {
+    exports.NoteListComponent = /** @class */ (function () {
+        function NoteListComponent() {
         }
-        ColorSwatchCollectionComponent.prototype.ngOnInit = function () { };
-        return ColorSwatchCollectionComponent;
+        NoteListComponent.prototype.ngOnInit = function () {
+        };
+        return NoteListComponent;
     }());
     __decorate([
         core.Input()
-    ], exports.ColorSwatchCollectionComponent.prototype, "colorList", void 0);
-    exports.ColorSwatchCollectionComponent = __decorate([
+    ], exports.NoteListComponent.prototype, "noteList", void 0);
+    exports.NoteListComponent = __decorate([
         core.Component({
-            selector: 'symphony-main-ui-color-swatch',
-            template: "<ul class=\"color-list list-unstyled\">\n  <li class=\"color-list-item\" *ngFor=\"let color of colorList\">\n    <symphony-ui-color-explorer\n      [colorSwatchModel]=\"color\"\n    ></symphony-ui-color-explorer>\n  </li>\n</ul>\n",
-            encapsulation: core.ViewEncapsulation.None,
-            styles: [".data-vis-ext .color-list,.data-vis .color-list{display:flex;flex-direction:column;flex-wrap:wrap;height:100vh;width:50vw}.data-vis-ext .color-list-item,.data-vis .color-list-item{flex:0 0 20%;padding:0}.main-ui .color-list-item{padding:5px 0}"]
+            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}"]
         })
-    ], exports.ColorSwatchCollectionComponent);
+    ], exports.NoteListComponent);
 
-    exports.ColorSwatchCollectionModule = /** @class */ (function () {
-        function ColorSwatchCollectionModule() {
+    exports.NoteListModule = /** @class */ (function () {
+        function NoteListModule() {
         }
-        return ColorSwatchCollectionModule;
+        return NoteListModule;
     }());
-    exports.ColorSwatchCollectionModule = __decorate([
+    exports.NoteListModule = __decorate([
         core.NgModule({
-            declarations: [exports.ColorSwatchCollectionComponent],
-            imports: [common.CommonModule, exports.ColorSwatchModule],
+            declarations: [exports.NoteListComponent],
+            imports: [common.CommonModule, exports.NoteModule],
+            exports: [exports.NoteListComponent]
         })
-    ], exports.ColorSwatchCollectionModule);
+    ], exports.NoteListModule);
 
-    var IconExplorerHelper = /** @class */ (function () {
-        function IconExplorerHelper() {
-        }
-        IconExplorerHelper.getAllIcons = function () {
-            var allIcons = [];
-            allIcons = allIcons.concat(this.getHasNoBorderIconList());
-            allIcons = allIcons.concat(this.getHasBorderIconList());
-            allIcons = allIcons.concat(this.getInverseIconList());
-            return allIcons;
-        };
-        IconExplorerHelper.getHasNoBorderIconList = function () {
-            return [
-                {
-                    icon: Icons.MOREOPTIONS,
-                    iconName: 'MOREOPTIONS',
-                    iconClass: 'si-more-options',
-                    hasBorder: false,
-                },
-                {
-                    icon: Icons.ADD,
-                    iconName: 'ADD',
-                    iconClass: 'si-add',
-                    hasBorder: false,
-                },
+    exports.EventsSettingsPageComponent = /** @class */ (function () {
+        function EventsSettingsPageComponent() {
+            this.eventsSettingsBreadcrumbs = [
                 {
-                    icon: Icons.ACTIVITY,
-                    iconName: 'ACTIVITY',
-                    iconClass: 'si-activity',
-                    hasBorder: false,
+                    label: 'Main Menu',
+                    link: '/tools',
                 },
                 {
-                    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,
-                },
-            ];
-        };
-        IconExplorerHelper.getInverseIconList = function () {
-            return [
-                {
-                    icon: Icons.ACTIVITY,
-                    iconName: 'ACTIVITY',
-                    iconClass: 'si-activity',
-                    hasBorder: true,
-                },
-            ];
-        };
-        IconExplorerHelper.getHasBorderIconList = function () {
-            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,
+                    label: 'Sub Menu One',
                 },
             ];
-        };
-        return IconExplorerHelper;
+            this.eventSettingsPageModel = {
+                moreActions: [],
+            };
+        }
+        EventsSettingsPageComponent.prototype.ngOnInit = function () { };
+        return EventsSettingsPageComponent;
     }());
+    __decorate([
+        core.Input()
+    ], exports.EventsSettingsPageComponent.prototype, "eventSettingsPageModel", void 0);
+    exports.EventsSettingsPageComponent = __decorate([
+        core.Component({
+            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: [""]
+        })
+    ], exports.EventsSettingsPageComponent);
 
-    exports.IconExplorerComponent = /** @class */ (function () {
-        function IconExplorerComponent() {
-            this.iconList = IconExplorerHelper.getAllIcons();
-            this.hasBorderIconsList = IconExplorerHelper.getHasBorderIconList();
-            this.hasNoBorderIconsList = IconExplorerHelper.getHasNoBorderIconList();
-            this.isInverseIconsList = IconExplorerHelper.getInverseIconList();
-        }
-        IconExplorerComponent.prototype.ngOnInit = function () {
-            this.iconCount = this.iconList.length;
-            this.explorerTitle = "Iconography (" + this.iconCount + " icons)";
-            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)";
-        };
-        return IconExplorerComponent;
+    exports["ɵg"] = /** @class */ (function () {
+        function AdminListTemplateComponent() {
+        }
+        AdminListTemplateComponent.prototype.ngOnInit = function () { };
+        return AdminListTemplateComponent;
     }());
-    exports.IconExplorerComponent = __decorate([
+    exports["ɵg"] = __decorate([
         core.Component({
-            selector: 'symphony-icon-explorer',
-            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:column;flex-wrap:wrap;height:90vh;width:100vw}.sfx-icon-list.has-border{height:50vh;width:39vw}.icon-list-item{flex:0 0 10%;padding:10px 0}.icon-list-item.has-border{flex:0 0 25%}.explorer-title{border-bottom:5px solid #000;margin-bottom:30px;padding-bottom:10px}.explorer-subtitle{margin-bottom:10px}"]
+            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%}"]
         })
-    ], exports.IconExplorerComponent);
+    ], exports["ɵg"]);
 
-    exports.IconExplorerModule = /** @class */ (function () {
-        function IconExplorerModule() {
+    exports["ɵf"] = /** @class */ (function () {
+        function AdminListModule() {
         }
-        return IconExplorerModule;
+        return AdminListModule;
     }());
-    exports.IconExplorerModule = __decorate([
+    exports["ɵf"] = __decorate([
         core.NgModule({
-            declarations: [exports.IconExplorerComponent],
-            imports: [common.CommonModule, exports.IconSwatchModule, exports.H2Module, exports.H3Module],
+            declarations: [exports["ɵg"]],
+            imports: [common.CommonModule],
+            exports: [exports["ɵg"]],
+        })
+    ], exports["ɵf"]);
+
+    exports["ɵi"] = /** @class */ (function () {
+        function PlaceholderComponent() {
+        }
+        PlaceholderComponent.prototype.ngOnInit = function () { };
+        return PlaceholderComponent;
+    }());
+    __decorate([
+        core.Input()
+    ], exports["ɵi"].prototype, "type", void 0);
+    __decorate([
+        core.Input()
+    ], exports["ɵi"].prototype, "label", void 0);
+    __decorate([
+        core.Input()
+    ], exports["ɵi"].prototype, "tooltip", void 0);
+    __decorate([
+        core.Input()
+    ], exports["ɵi"].prototype, "tooltipPlacement", void 0);
+    __decorate([
+        core.Input()
+    ], exports["ɵi"].prototype, "height", void 0);
+    __decorate([
+        core.Input()
+    ], exports["ɵi"].prototype, "width", void 0);
+    exports["ɵi"] = __decorate([
+        core.Component({
+            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%}"]
+        })
+    ], exports["ɵi"]);
+
+    exports["ɵh"] = /** @class */ (function () {
+        function PlaceholderModule() {
+        }
+        return PlaceholderModule;
+    }());
+    exports["ɵh"] = __decorate([
+        core.NgModule({
+            declarations: [exports["ɵi"]],
+            imports: [common.CommonModule, tooltip.TooltipModule.forRoot()],
+            exports: [exports["ɵi"]],
+        })
+    ], exports["ɵh"]);
+
+    exports.EventsSettingsPageModule = /** @class */ (function () {
+        function EventsSettingsPageModule() {
+        }
+        return EventsSettingsPageModule;
+    }());
+    exports.EventsSettingsPageModule = __decorate([
+        core.NgModule({
+            declarations: [exports.EventsSettingsPageComponent],
+            imports: [
+                common.CommonModule,
+                exports["ɵf"],
+                exports.H3Module,
+                exports.H4Module,
+                exports["ɵh"],
+                exports.BreadcrumbModule,
+                exports["ɵd"],
+                exports.IconModule,
+                exports.InputTextModule,
+                exports.ContextualMenuModule
+            ],
+            exports: [exports.EventsSettingsPageComponent],
         })
-    ], exports.IconExplorerModule);
+    ], exports.EventsSettingsPageModule);
 
     /*
      * ATOMS