@symphony-talent/component-library 1.9.0 → 2.0.0

package/fesm2020/symphony-talent-component-library-projects-component-library.mjs

@@ -2,16 +2,16 @@ import * as i0 from '@angular/core';
 import { Component, Input, NgModule, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/common';
 import { SlicePipe, CommonModule } from '@angular/common';
-import * as i2 from 'ngx-bootstrap/tooltip';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Subject, timer } from 'rxjs';
-import { debounceTime, distinctUntilChanged, delay } from 'rxjs/operators';
 import * as i1$1 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i1$2 from 'ag-grid-angular';
 import { AgGridModule } from 'ag-grid-angular';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Subject, timer } from 'rxjs';
+import { debounceTime, distinctUntilChanged, delay } from 'rxjs/operators';
+import * as i2 from 'ngx-bootstrap/tooltip';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 class AvatarComponent {
     constructor() { }
@@ -159,185 +159,361 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
-class PillComponent {
+class ContextualMenuComponent {
     constructor() {
-        this.removePill = new EventEmitter();
+        this.model = {
+            hasBorder: false,
+        };
+        this.itemClick = new EventEmitter();
     }
-    onRemoveClick() {
-        this.removePill.emit(this.pillLabel);
+    onItemClick(item) {
+        this.itemClick.emit(item);
     }
 }
-PillComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PillComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PillComponent, selector: "symphony-pill", inputs: { pillLabel: "pillLabel", isInverse: "isInverse", hasClose: "hasClose", tooltipLabel: "tooltipLabel" }, outputs: { removePill: "removePill" }, ngImport: i0, template: "<span *ngIf=\"tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    tooltip=\"{{tooltipLabel}}\"\n    placement=\"top\"\n    containerClass=\"sfx-info-tooltip pill-tooltip\"\n    [adaptivePosition]=\"false\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>", styles: [".sfx-pill-item{font-family:neuzeit_groteskbold;background-color:#f1f1f1;color:#000;padding:10px 20px;border-radius:25px;text-align:center;font-weight:600;margin-right:10px;margin-top:10px;position:relative}.sfx-pill-item:hover,.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item.has-close{padding:10px 20px 10px 38px}.sfx-pill-item i{font-size:18px;position:absolute;left:14px;top:11px;transform:rotate(45deg)}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:160px;font-size:13px;color:#000}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillComponent, decorators: [{
+ContextualMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ContextualMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: { model: "model" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div class=\"btn-group\" dropdown>\n  <button\n    id=\"button-basic\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    [ngClass]=\"{\n      'has-border': model.hasBorder\n    }\"\n    aria-controls=\"dropdown-basic\"\n    aria-label=\"more-actions-menu\"\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 item of model.items\">\n      <a\n        class=\"dropdown-item\"\n        href=\"#\"\n        (click)=\"$event.preventDefault(); onItemClick(item)\"\n        >{{ item }}</a\n      >\n    </li>\n  </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;border-radius:50%;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px #0003;max-height:none;overflow:inherit}.btn-group .dropdown-menu li a.dropdown-item{padding:0 20px;line-height:40px;color:#000;font-weight:600}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.open button.dropdown-toggle.btn{background:#000000;color:#fff}\n"], directives: [{ type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-pill', encapsulation: ViewEncapsulation.None, template: "<span *ngIf=\"tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    tooltip=\"{{tooltipLabel}}\"\n    placement=\"top\"\n    containerClass=\"sfx-info-tooltip pill-tooltip\"\n    [adaptivePosition]=\"false\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>", styles: [".sfx-pill-item{font-family:neuzeit_groteskbold;background-color:#f1f1f1;color:#000;padding:10px 20px;border-radius:25px;text-align:center;font-weight:600;margin-right:10px;margin-top:10px;position:relative}.sfx-pill-item:hover,.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item.has-close{padding:10px 20px 10px 38px}.sfx-pill-item i{font-size:18px;position:absolute;left:14px;top:11px;transform:rotate(45deg)}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:160px;font-size:13px;color:#000}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { pillLabel: [{
-                type: Input
-            }], isInverse: [{
-                type: Input
-            }], hasClose: [{
-                type: Input
-            }], tooltipLabel: [{
+            args: [{ 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    [ngClass]=\"{\n      'has-border': model.hasBorder\n    }\"\n    aria-controls=\"dropdown-basic\"\n    aria-label=\"more-actions-menu\"\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 item of model.items\">\n      <a\n        class=\"dropdown-item\"\n        href=\"#\"\n        (click)=\"$event.preventDefault(); onItemClick(item)\"\n        >{{ item }}</a\n      >\n    </li>\n  </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;border-radius:50%;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px #0003;max-height:none;overflow:inherit}.btn-group .dropdown-menu li a.dropdown-item{padding:0 20px;line-height:40px;color:#000;font-weight:600}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.open button.dropdown-toggle.btn{background:#000000;color:#fff}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
-            }], removePill: [{
+            }], itemClick: [{
                 type: Output
             }] } });
 
-class PillModule {
+class ContextualMenuModule {
 }
-PillModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PillModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillModule, declarations: [PillComponent], imports: [CommonModule, i2.TooltipModule], exports: [PillComponent] });
-PillModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillModule, imports: [[
-            CommonModule, TooltipModule.forRoot()
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillModule, decorators: [{
+ContextualMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ContextualMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuModule, declarations: [ContextualMenuComponent], imports: [CommonModule, i1$1.BsDropdownModule, BrowserAnimationsModule], exports: [ContextualMenuComponent] });
+ContextualMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuModule, imports: [[CommonModule, BsDropdownModule.forRoot(), BrowserAnimationsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PillComponent],
-                    imports: [
-                        CommonModule, TooltipModule.forRoot()
-                    ],
-                    exports: [PillComponent],
+                    declarations: [ContextualMenuComponent],
+                    imports: [CommonModule, BsDropdownModule.forRoot(), BrowserAnimationsModule],
+                    exports: [ContextualMenuComponent],
                 }]
         }] });
 
-class TaskIconComponent {
+class FilterAreaComponent {
     constructor() { }
 }
-TaskIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TaskIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskIconComponent, selector: "symphony-task-icon", inputs: { isComplete: "isComplete" }, ngImport: i0, template: "<div\n  class=\"task-circle\"\n  [ngClass]=\"{\n    'task-incomplete': !isComplete,\n    'task-complete': isComplete\n  }\"\n>\n  <i\n    class=\"fa-solid\"\n    [ngClass]=\"{\n      'si-task-completed': !isComplete,\n      'si-task-open': isComplete\n    }\"\n  ></i>\n</div>\n", styles: [".task-circle{border-radius:50%;height:50px;width:50px}.task-circle .fa-solid{color:#fff;font-size:20px;position:relative;top:15px;left:15px}.task-complete{background-color:#00d56b}.task-incomplete{background-color:#d9d9d9}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskIconComponent, decorators: [{
+FilterAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FilterAreaComponent, selector: "symphony-filter-area", ngImport: i0, template: "<div class=\"sfx-filter-section\">\n    <div class=\"sfx-border-bottom-mdm-black-1 sfx-mb-20 sfx-pb-20 sfx-mt-10 sfx-d-inline-block sfx-wid-100\">\n        <ng-content select=\"[title]\"></ng-content>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[actions]\"></ng-content>\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-2]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-3]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-4]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-5]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-6]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mb-25\">\n            <ng-content select=\"[filter-7]\"></ng-content>\n        </div>\n    </div>\n</div>", styles: [".sfx-filter-section{background:#000000;color:#fff;padding:1.875rem 2.5rem}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-task-icon', template: "<div\n  class=\"task-circle\"\n  [ngClass]=\"{\n    'task-incomplete': !isComplete,\n    'task-complete': isComplete\n  }\"\n>\n  <i\n    class=\"fa-solid\"\n    [ngClass]=\"{\n      'si-task-completed': !isComplete,\n      'si-task-open': isComplete\n    }\"\n  ></i>\n</div>\n", styles: [".task-circle{border-radius:50%;height:50px;width:50px}.task-circle .fa-solid{color:#fff;font-size:20px;position:relative;top:15px;left:15px}.task-complete{background-color:#00d56b}.task-incomplete{background-color:#d9d9d9}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { isComplete: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'symphony-filter-area', template: "<div class=\"sfx-filter-section\">\n    <div class=\"sfx-border-bottom-mdm-black-1 sfx-mb-20 sfx-pb-20 sfx-mt-10 sfx-d-inline-block sfx-wid-100\">\n        <ng-content select=\"[title]\"></ng-content>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[actions]\"></ng-content>\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-2]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-3]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-4]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-5]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-6]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mb-25\">\n            <ng-content select=\"[filter-7]\"></ng-content>\n        </div>\n    </div>\n</div>", styles: [".sfx-filter-section{background:#000000;color:#fff;padding:1.875rem 2.5rem}\n"] }]
+        }], ctorParameters: function () { return []; } });
 
-class TaskIconModule {
+class FilterAreaModule {
 }
-TaskIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TaskIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskIconModule, declarations: [TaskIconComponent], imports: [CommonModule], exports: [TaskIconComponent] });
-TaskIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskIconModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskIconModule, decorators: [{
+FilterAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FilterAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaModule, declarations: [FilterAreaComponent], imports: [CommonModule], exports: [FilterAreaComponent] });
+FilterAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TaskIconComponent],
+                    declarations: [FilterAreaComponent],
                     imports: [CommonModule],
-                    exports: [TaskIconComponent],
+                    exports: [FilterAreaComponent]
                 }]
         }] });
 
-class ColorSampleComponent {
-    constructor() { }
-    ngOnInit() {
-        this.bgColor = this.color;
+var ActivityScoreLevel;
+(function (ActivityScoreLevel) {
+    ActivityScoreLevel["Low"] = "low";
+    ActivityScoreLevel["Medium"] = "medium";
+    ActivityScoreLevel["High"] = "high";
+    ActivityScoreLevel["Empty"] = "empty";
+})(ActivityScoreLevel || (ActivityScoreLevel = {}));
+
+class ContactActivityScoreComponent {
+    constructor() {
+        this.contactActivityScoreModel = { activityScore: ActivityScoreLevel.Low };
+        this.contact = { candidateScoreActivityScore: 0 };
+    }
+    refresh(params) {
+        return true;
+    }
+    agInit(params) {
+        this.contact = params.data;
+        if (!this.contact.header5) {
+            this.dataAvailable = 'N/A';
+        }
+        else {
+            this.dataAvailable = this.contact.header5;
+        }
+        switch (true) {
+            case this.contact.header5 >= 0 && this.contact.header5 < 34: {
+                this.contactActivityScoreModel.activityScore = ActivityScoreLevel.Low;
+                break;
+            }
+            case this.contact.header5 >= 34 && this.contact.header5 <= 66: {
+                this.contactActivityScoreModel.activityScore =
+                    ActivityScoreLevel.Medium;
+                break;
+            }
+            case this.contact.header5 > 66: {
+                this.contactActivityScoreModel.activityScore = ActivityScoreLevel.High;
+                break;
+            }
+            default: {
+                this.contactActivityScoreModel.activityScore = ActivityScoreLevel.Empty;
+                break;
+            }
+        }
     }
 }
-ColorSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColorSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ColorSampleComponent, selector: "symphony-color-sample", inputs: { color: "color" }, ngImport: i0, template: "<div\n  class=\"color-sample\"\n  [ngClass]=\"bgColor\"\n  [ngStyle]=\"{\n    border: color === 'background-color-white' ? '1px solid #000' : 'none'\n  }\"\n></div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleComponent, decorators: [{
+ContactActivityScoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContactActivityScoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ContactActivityScoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ContactActivityScoreComponent, selector: "symphony-contact-activity-score", ngImport: i0, template: "<span\n  class=\"activity-score-bg activity-score-{{\n    contactActivityScoreModel.activityScore\n  }}\"\n>\n  <div class=\"activity-score-content\">{{ dataAvailable }}</div>\n</span>\n", styles: [".activity-score-bg{height:38px;width:38px;background-color:#bbb;border-radius:50%;display:inline-block;color:#fff;text-align:center}.activity-score-bg.activity-score-high{background-color:#00bb5b}.activity-score-bg.activity-score-medium{background-color:#f57300}.activity-score-bg.activity-score-low{background-color:#d60000}.activity-score-bg.activity-score-empty{background-color:#fff;color:#000!important}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContactActivityScoreComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-color-sample', template: "<div\n  class=\"color-sample\"\n  [ngClass]=\"bgColor\"\n  [ngStyle]=\"{\n    border: color === 'background-color-white' ? '1px solid #000' : 'none'\n  }\"\n></div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { color: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'symphony-contact-activity-score', template: "<span\n  class=\"activity-score-bg activity-score-{{\n    contactActivityScoreModel.activityScore\n  }}\"\n>\n  <div class=\"activity-score-content\">{{ dataAvailable }}</div>\n</span>\n", styles: [".activity-score-bg{height:38px;width:38px;background-color:#bbb;border-radius:50%;display:inline-block;color:#fff;text-align:center}.activity-score-bg.activity-score-high{background-color:#00bb5b}.activity-score-bg.activity-score-medium{background-color:#f57300}.activity-score-bg.activity-score-low{background-color:#d60000}.activity-score-bg.activity-score-empty{background-color:#fff;color:#000!important}\n"] }]
+        }], ctorParameters: function () { return []; } });
 
-class ColorSampleModule {
+class EventSettingsMoreOptionsComponent {
+    constructor() {
+        this.agGridParams = {};
+        this.moreOptions = {
+            items: ['Edit', 'Set as Default'],
+            hasBorder: false,
+        };
+    }
+    refresh(params) {
+        return true;
+    }
+    agInit(params) {
+        this.agGridParams = params;
+    }
+    onItemClick(item) {
+        const action = {
+            item,
+            row: this.agGridParams,
+        };
+        this.agGridParams.itemClick(action);
+    }
 }
-ColorSampleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ColorSampleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, declarations: [ColorSampleComponent], imports: [CommonModule], exports: [ColorSampleComponent] });
-ColorSampleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ColorSampleComponent],
-                    imports: [CommonModule],
-                    exports: [ColorSampleComponent],
-                }]
-        }] });
+EventSettingsMoreOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventSettingsMoreOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+EventSettingsMoreOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EventSettingsMoreOptionsComponent, selector: "symphony-event-settings-more-options", ngImport: i0, template: "<symphony-contextual-menu\n  class=\"more-options\"\n  *ngIf=\"moreOptions.items && moreOptions.items.length > 0\"\n  [model]=\"moreOptions\"\n  (itemClick)=\"onItemClick($event)\"\n>\n</symphony-contextual-menu>\n", components: [{ type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventSettingsMoreOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-event-settings-more-options', template: "<symphony-contextual-menu\n  class=\"more-options\"\n  *ngIf=\"moreOptions.items && moreOptions.items.length > 0\"\n  [model]=\"moreOptions\"\n  (itemClick)=\"onItemClick($event)\"\n>\n</symphony-contextual-menu>\n" }]
+        }], ctorParameters: function () { return []; } });
 
-class H2Component {
-    constructor() { }
+class InputToggleComponent {
+    constructor() {
+        this.toggleClick = new EventEmitter();
+    }
+    toggleClicked() {
+        this.isToggled = !this.isToggled;
+        this.toggleClick.emit(this.isToggled);
+    }
 }
-H2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-H2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: H2Component, selector: "symphony-h2", inputs: { text: "text", isSecondary: "isSecondary" }, ngImport: i0, template: "<h2 [ngClass]=\"{ 'h2-secondary': isSecondary, 'h2-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h2>\n", styles: [".h2-primary,.h2-secondary{margin-bottom:0;line-height:40px;letter-spacing:-2px;margin-top:0}.h2-secondary{color:#fff}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H2Component, decorators: [{
+InputToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputToggleComponent, selector: "symphony-input-toggle", inputs: { isToggled: "isToggled", isInverse: "isInverse" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<label class=\"switch\">\n  <input\n    aria-label=\"toggle-active-state\"\n    [checked]=\"isToggled\"\n    type=\"checkbox\"\n    (click)=\"toggleClicked()\"\n    [ngClass]=\"{ 'is-inverse': isInverse }\"\n  />\n  <span class=\"slider round\"></span>\n</label>\n", styles: [".switch{position:relative;vertical-align:middle;display:inline-block;width:30px;height:14px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:\"\";height:10px;width:10px;left:2px;bottom:2px;background-color:#fff;transition:.4s}.slider.round{border-radius:16px}.slider.round.round:before{border-radius:50%}input:checked+.slider{background-color:#000}input:checked+.slider:before{transform:translate(15px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-h2', template: "<h2 [ngClass]=\"{ 'h2-secondary': isSecondary, 'h2-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h2>\n", styles: [".h2-primary,.h2-secondary{margin-bottom:0;line-height:40px;letter-spacing:-2px;margin-top:0}.h2-secondary{color:#fff}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
+            args: [{ selector: 'symphony-input-toggle', template: "<label class=\"switch\">\n  <input\n    aria-label=\"toggle-active-state\"\n    [checked]=\"isToggled\"\n    type=\"checkbox\"\n    (click)=\"toggleClicked()\"\n    [ngClass]=\"{ 'is-inverse': isInverse }\"\n  />\n  <span class=\"slider round\"></span>\n</label>\n", styles: [".switch{position:relative;vertical-align:middle;display:inline-block;width:30px;height:14px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:\"\";height:10px;width:10px;left:2px;bottom:2px;background-color:#fff;transition:.4s}.slider.round{border-radius:16px}.slider.round.round:before{border-radius:50%}input:checked+.slider{background-color:#000}input:checked+.slider:before{transform:translate(15px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { isToggled: [{
                 type: Input
-            }], isSecondary: [{
+            }], isInverse: [{
                 type: Input
+            }], toggleClick: [{
+                type: Output
             }] } });
 
-class H2Module {
-}
-H2Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-H2Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H2Module, declarations: [H2Component], imports: [CommonModule], exports: [H2Component] });
-H2Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H2Module, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H2Module, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [H2Component],
-                    imports: [CommonModule],
-                    exports: [H2Component],
-                }]
-        }] });
-
-class H3Component {
-    constructor() { }
+class GridToggleCellRendererComponent {
+    refresh(params) {
+        return true;
+    }
+    agInit(params) {
+        this.params = params;
+    }
+    toggleClickedHandler(isToggled) {
+        const model = {
+            isToggled,
+            row: this.params,
+        };
+        this.params.clicked(model);
+    }
 }
-H3Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H3Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-H3Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: H3Component, selector: "symphony-h3", inputs: { text: "text", isSecondary: "isSecondary" }, ngImport: i0, template: "<h3 [ngClass]=\"{ 'h3-secondary': isSecondary, 'h3-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h3>\n", styles: [".h3-primary,.h3-secondary{margin-bottom:0;line-height:30px;letter-spacing:-1px;margin-top:0}.h3-secondary{color:#fff}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H3Component, decorators: [{
+GridToggleCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridToggleCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GridToggleCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridToggleCellRendererComponent, selector: "symphony-grid-toggle-cell-renderer", ngImport: i0, template: "<symphony-input-toggle\n  [isToggled]=\"params.data[params.colDef.field]\"\n  (toggleClick)=\"toggleClickedHandler($event)\"\n></symphony-input-toggle>\n", components: [{ type: InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridToggleCellRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-h3', template: "<h3 [ngClass]=\"{ 'h3-secondary': isSecondary, 'h3-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h3>\n", styles: [".h3-primary,.h3-secondary{margin-bottom:0;line-height:30px;letter-spacing:-1px;margin-top:0}.h3-secondary{color:#fff}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
-                type: Input
-            }], isSecondary: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'symphony-grid-toggle-cell-renderer', template: "<symphony-input-toggle\n  [isToggled]=\"params.data[params.colDef.field]\"\n  (toggleClick)=\"toggleClickedHandler($event)\"\n></symphony-input-toggle>\n" }]
+        }] });
 
-class H3Module {
-}
-H3Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H3Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-H3Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H3Module, declarations: [H3Component], imports: [CommonModule], exports: [H3Component] });
-H3Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H3Module, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H3Module, decorators: [{
+var RelevanceScoreLevel;
+(function (RelevanceScoreLevel) {
+    RelevanceScoreLevel["Value"] = "value";
+    RelevanceScoreLevel["Empty"] = "empty";
+})(RelevanceScoreLevel || (RelevanceScoreLevel = {}));
+
+class RelevanceScoreComponent {
+    constructor() {
+        this.relevanceScoreModel = { relevanceScore: RelevanceScoreLevel.Empty };
+        this.contact = { relevanceScore: 0 };
+    }
+    refresh(params) {
+        return true;
+    }
+    agInit(params) {
+        this.contact = params.data;
+        if (this.contact) {
+            if (this.contact.header4 || this.contact.header4 === 0) {
+                this.relevanceData = this.contact.header4;
+                this.relevanceScoreModel.relevanceScore = RelevanceScoreLevel.Value;
+            }
+            else {
+                this.relevanceData = 'N/A';
+            }
+        }
+    }
+}
+RelevanceScoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: RelevanceScoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RelevanceScoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: RelevanceScoreComponent, selector: "symphony-relevance-score", ngImport: i0, template: "<span class=\"relevance-score-bg relevance-score-{{ relevanceScoreModel.relevanceScore }}\">\n  <div class=\"relevance-score-content\">{{ relevanceData}}</div>\n</span>", styles: [".relevance-score-bg{height:38px;width:38px;background-color:#fff;border-radius:50%;display:inline-block;color:#000;text-align:center}.relevance-score-value{border:1px solid black;font-weight:700}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: RelevanceScoreComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-relevance-score', template: "<span class=\"relevance-score-bg relevance-score-{{ relevanceScoreModel.relevanceScore }}\">\n  <div class=\"relevance-score-content\">{{ relevanceData}}</div>\n</span>", styles: [".relevance-score-bg{height:38px;width:38px;background-color:#fff;border-radius:50%;display:inline-block;color:#000;text-align:center}.relevance-score-value{border:1px solid black;font-weight:700}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class GridComponent {
+    constructor() {
+        this.rowHeightPage = 80;
+        this.gridHeight = 100;
+        this.frameworkComponents = this.getFrameworkComponents();
+        this.getRowHeight = () => {
+            return this.rowHeightPage;
+        };
+    }
+    onGridReady(gridReadyEvent) {
+        gridReadyEvent.api.sizeColumnsToFit();
+    }
+    getFrameworkComponents() {
+        return {
+            contactActivityScore: ContactActivityScoreComponent,
+            fitScore: RelevanceScoreComponent,
+            gridToggle: GridToggleCellRendererComponent,
+            moreActions: EventSettingsMoreOptionsComponent,
+        };
+    }
+}
+GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridComponent, selector: "symphony-grid", inputs: { columnDefs: "columnDefs", rowData: "rowData" }, ngImport: i0, template: "<ag-grid-angular\n  style=\"width: 100%\"\n  class=\"ag-theme-alpine\"\n  [rowData]=\"rowData\"\n  [columnDefs]=\"columnDefs\"\n  (gridReady)=\"onGridReady($event)\"\n  [style.height.vh]=\"gridHeight\"\n  [getRowHeight]=\"getRowHeight\"\n  [frameworkComponents]=\"frameworkComponents\"\n>\n</ag-grid-angular>\n", styles: [""], components: [{ type: i1$2.AgGridAngular, selector: "ag-grid-angular", inputs: ["alignedGrids", "rowData", "columnDefs", "excelStyles", "pinnedTopRowData", "pinnedBottomRowData", "chartThemes", "components", "frameworkComponents", "rowStyle", "context", "autoGroupColumnDef", "localeText", "icons", "datasource", "serverSideDatasource", "viewportDatasource", "groupRowRendererParams", "aggFuncs", "fullWidthCellRendererParams", "defaultColGroupDef", "defaultColDef", "defaultExportParams", "columnTypes", "rowClassRules", "detailGridOptions", "detailCellRendererParams", "loadingCellRendererParams", "loadingOverlayComponentParams", "noRowsOverlayComponentParams", "popupParent", "colResizeDefault", "reduxStore", "statusBar", "sideBar", "chartThemeOverrides", "customChartThemes", "sortingOrder", "rowClass", "rowSelection", "overlayLoadingTemplate", "overlayNoRowsTemplate", "quickFilterText", "rowModelType", "editType", "domLayout", "clipboardDeliminator", "rowGroupPanelShow", "multiSortKey", "pivotColumnGroupTotals", "pivotRowTotals", "pivotPanelShow", "fillHandleDirection", "rowHeight", "detailRowHeight", "rowBuffer", "colWidth", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "groupDefaultExpanded", "minColWidth", "maxColWidth", "viewportRowModelPageSize", "viewportRowModelBufferSize", "autoSizePadding", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "tooltipShowDelay", "cacheOverflowSize", "paginationPageSize", "cacheBlockSize", "infiniteInitialRowCount", "scrollbarWidth", "batchUpdateWaitMillis", "asyncTransactionWaitMillis", "blockLoadDebounceMillis", "keepDetailRowsCount", "undoRedoCellEditingLimit", "cellFlashDelay", "cellFadeDelay", "localeTextFunc", "groupRowInnerRenderer", "groupRowInnerRendererFramework", "dateComponent", "dateComponentFramework", "groupRowRenderer", "groupRowRendererFramework", "isExternalFilterPresent", "getRowHeight", "doesExternalFilterPass", "getRowClass", "getRowStyle", "getRowClassRules", "traverseNode", "getContextMenuItems", "getMainMenuItems", "processRowPostCreate", "processCellForClipboard", "groupRowAggNodes", "getRowNodeId", "isFullWidthCell", "fullWidthCellRenderer", "fullWidthCellRendererFramework", "processSecondaryColDef", "processSecondaryColGroupDef", "getBusinessKeyForNode", "sendToClipboard", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getDetailRowData", "processCellFromClipboard", "getDocument", "postProcessPopup", "getChildCount", "getDataPath", "loadingCellRenderer", "loadingCellRendererFramework", "loadingOverlayComponent", "loadingOverlayComponentFramework", "noRowsOverlayComponent", "noRowsOverlayComponentFramework", "detailCellRenderer", "detailCellRendererFramework", "defaultGroupSortComparator", "isRowMaster", "isRowSelectable", "postSort", "processHeaderForClipboard", "paginationNumberFormatter", "processDataFromClipboard", "getServerSideGroupKey", "isServerSideGroup", "suppressKeyboardEvent", "createChartContainer", "processChartOptions", "getChartToolbarItems", "fillOperation", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowClickSelection", "suppressCellSelection", "suppressHorizontalScroll", "alwaysShowVerticalScroll", "debug", "enableBrowserTooltips", "enableCellExpressions", "angularCompileRows", "angularCompileFilters", "groupSuppressAutoColumn", "groupSelectsChildren", "groupIncludeFooter", "groupIncludeTotalFooter", "groupUseEntireRow", "groupSuppressBlankHeader", "suppressMenuHide", "suppressRowDeselection", "unSortIcon", "suppressMultiSort", "singleClickEdit", "suppressLoadingOverlay", "suppressNoRowsOverlay", "suppressAutoSize", "skipHeaderOnAutoSize", "suppressParentsInRowNodes", "suppressColumnMoveAnimation", "suppressMovableColumns", "suppressFieldDotNotation", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "suppressClearOnFillReduction", "deltaSort", "suppressTouch", "suppressAsyncEvents", "allowContextMenuWithControlKey", "suppressContextMenu", "rememberGroupStateWhenNewData", "enableCellChangeFlash", "suppressDragLeaveHidesColumns", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "suppressCopyRowsToClipboard", "copyHeadersToClipboard", "pivotMode", "suppressAggFuncInHeader", "suppressColumnVirtualisation", "suppressAggAtRootLevel", "suppressFocusAfterRefresh", "functionsPassive", "functionsReadOnly", "animateRows", "groupSelectsFiltered", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "enableRtl", "suppressClickEdit", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "enableMultiRowDragging", "enableGroupEdit", "embedFullWidthRows", "deprecatedEmbedFullWidthRows", "suppressPaginationPanel", "floatingFilter", "groupHideOpenParents", "groupMultiAutoColumn", "pagination", "stopEditingWhenGridLosesFocus", "paginationAutoPageSize", "suppressScrollOnNewData", "purgeClosedRowNodes", "cacheQuickFilter", "deltaRowDataMode", "ensureDomOrder", "accentedSort", "suppressChangeDetection", "valueCache", "valueCacheNeverExpires", "aggregateOnlyChangedColumns", "suppressAnimationFrame", "suppressExcelExport", "suppressCsvExport", "treeData", "masterDetail", "suppressMultiRangeSelection", "enterMovesDownAfterEdit", "enterMovesDown", "suppressPropertyNamesCheck", "rowMultiSelectWithClick", "suppressEnterpriseResetOnNewColumns", "enableOldSetFilterModel", "suppressRowHoverHighlight", "suppressRowTransform", "suppressClipboardPaste", "suppressLastEmptyLineOnPaste", "serverSideSortingAlwaysResets", "reactNext", "suppressSetColumnStateEvents", "suppressColumnStateEvents", "enableCharts", "deltaColumnMode", "suppressMaintainUnsortedOrder", "enableCellTextSelection", "suppressBrowserResizeObserver", "suppressMaxRenderedRowRestriction", "excludeChildrenWhenTreeDataFiltering", "tooltipMouseTrack", "keepDetailRows", "paginateChildRows", "preventDefaultOnContextMenu", "undoRedoCellEditing", "allowDragFromColumnsToolPanel", "immutableData", "immutableColumns", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "applyColumnDefOrder", "debounceVerticalScrollbar", "detailRowAutoHeight", "gridOptions", "modules"], outputs: ["columnEverythingChanged", "newColumnsLoaded", "columnPivotModeChanged", "columnRowGroupChanged", "expandOrCollapseAll", "columnPivotChanged", "gridColumnsChanged", "columnValueChanged", "columnMoved", "columnVisible", "columnPinned", "columnGroupOpened", "columnResized", "displayedColumnsChanged", "virtualColumnsChanged", "rowGroupOpened", "rowDataChanged", "rowDataUpdated", "pinnedRowDataChanged", "rangeSelectionChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "toolPanelVisibleChanged", "modelUpdated", "pasteStart", "pasteEnd", "fillStart", "fillEnd", "cellClicked", "cellDoubleClicked", "cellMouseDown", "cellContextMenu", "cellValueChanged", "rowValueChanged", "cellFocused", "rowSelected", "selectionChanged", "cellKeyDown", "cellKeyPress", "cellMouseOver", "cellMouseOut", "filterChanged", "filterModified", "filterOpened", "sortChanged", "virtualRowRemoved", "rowClicked", "rowDoubleClicked", "gridReady", "gridSizeChanged", "viewportChanged", "scrollbarWidthChanged", "firstDataRendered", "dragStarted", "dragStopped", "checkboxChanged", "rowEditingStarted", "rowEditingStopped", "cellEditingStarted", "cellEditingStopped", "bodyScroll", "animationQueueEmpty", "heightScaleChanged", "paginationChanged", "componentStateChanged", "bodyHeightChanged", "displayedColumnsWidthChanged", "scrollVisibilityChanged", "columnHoverChanged", "flashCells", "paginationPixelOffsetChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "popupToFront", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest", "keyboardFocus", "mouseFocus"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-grid', template: "<ag-grid-angular\n  style=\"width: 100%\"\n  class=\"ag-theme-alpine\"\n  [rowData]=\"rowData\"\n  [columnDefs]=\"columnDefs\"\n  (gridReady)=\"onGridReady($event)\"\n  [style.height.vh]=\"gridHeight\"\n  [getRowHeight]=\"getRowHeight\"\n  [frameworkComponents]=\"frameworkComponents\"\n>\n</ag-grid-angular>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { columnDefs: [{
+                type: Input
+            }], rowData: [{
+                type: Input
+            }] } });
+
+class ContactActivityScoreModule {
+}
+ContactActivityScoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContactActivityScoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ContactActivityScoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContactActivityScoreModule, declarations: [ContactActivityScoreComponent], imports: [CommonModule] });
+ContactActivityScoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContactActivityScoreModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContactActivityScoreModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [H3Component],
+                    declarations: [ContactActivityScoreComponent],
                     imports: [CommonModule],
-                    exports: [H3Component],
                 }]
         }] });
 
-class H4Component {
-    constructor() { }
+class EventSettingsMoreOptionsModule {
 }
-H4Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H4Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-H4Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: H4Component, selector: "symphony-h4", inputs: { text: "text", isSecondary: "isSecondary" }, ngImport: i0, template: "<h4 [ngClass]=\"{ 'h4-secondary': isSecondary, 'h4-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h4>\n", styles: [".h4-primary,.h4-secondary{margin-bottom:0;line-height:20px;letter-spacing:-1px;margin-top:0}.h4-secondary{color:#fff}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H4Component, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-h4', template: "<h4 [ngClass]=\"{ 'h4-secondary': isSecondary, 'h4-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h4>\n", styles: [".h4-primary,.h4-secondary{margin-bottom:0;line-height:20px;letter-spacing:-1px;margin-top:0}.h4-secondary{color:#fff}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
-                type: Input
-            }], isSecondary: [{
-                type: Input
-            }] } });
+EventSettingsMoreOptionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventSettingsMoreOptionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+EventSettingsMoreOptionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventSettingsMoreOptionsModule, declarations: [EventSettingsMoreOptionsComponent], imports: [CommonModule, ContextualMenuModule], exports: [EventSettingsMoreOptionsComponent] });
+EventSettingsMoreOptionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventSettingsMoreOptionsModule, imports: [[CommonModule, ContextualMenuModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventSettingsMoreOptionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EventSettingsMoreOptionsComponent],
+                    imports: [CommonModule, ContextualMenuModule],
+                    exports: [EventSettingsMoreOptionsComponent],
+                }]
+        }] });
 
-class H4Module {
+class InputToggleModule {
 }
-H4Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H4Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-H4Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H4Module, declarations: [H4Component], imports: [CommonModule], exports: [H4Component] });
-H4Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H4Module, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H4Module, decorators: [{
+InputToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InputToggleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleModule, declarations: [InputToggleComponent], imports: [CommonModule], exports: [InputToggleComponent] });
+InputToggleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [H4Component],
+                    declarations: [InputToggleComponent],
                     imports: [CommonModule],
-                    exports: [H4Component],
+                    exports: [InputToggleComponent],
+                }]
+        }] });
+
+class GridToggleCellRendererModule {
+}
+GridToggleCellRendererModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridToggleCellRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GridToggleCellRendererModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridToggleCellRendererModule, declarations: [GridToggleCellRendererComponent], imports: [CommonModule, InputToggleModule], exports: [GridToggleCellRendererComponent] });
+GridToggleCellRendererModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridToggleCellRendererModule, imports: [[CommonModule, InputToggleModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridToggleCellRendererModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GridToggleCellRendererComponent],
+                    imports: [CommonModule, InputToggleModule],
+                    exports: [GridToggleCellRendererComponent],
+                }]
+        }] });
+
+class RelevanceScoreModule {
+}
+RelevanceScoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: RelevanceScoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RelevanceScoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: RelevanceScoreModule, declarations: [RelevanceScoreComponent], imports: [CommonModule] });
+RelevanceScoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: RelevanceScoreModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: RelevanceScoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [RelevanceScoreComponent],
+                    imports: [CommonModule],
+                }]
+        }] });
+
+class FrameworkModule {
+}
+FrameworkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FrameworkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, exports: [ContactActivityScoreModule,
+        RelevanceScoreModule,
+        GridToggleCellRendererModule,
+        EventSettingsMoreOptionsModule] });
+FrameworkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, imports: [[], ContactActivityScoreModule,
+        RelevanceScoreModule,
+        GridToggleCellRendererModule,
+        EventSettingsMoreOptionsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [],
+                    exports: [
+                        ContactActivityScoreModule,
+                        RelevanceScoreModule,
+                        GridToggleCellRendererModule,
+                        EventSettingsMoreOptionsModule,
+                    ],
+                }]
+        }] });
+
+class GridModule {
+}
+GridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridModule, declarations: [GridComponent], imports: [CommonModule, i1$2.AgGridModule, FrameworkModule], exports: [GridComponent] });
+GridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridModule, imports: [[CommonModule, AgGridModule.withComponents([]), FrameworkModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GridComponent],
+                    imports: [CommonModule, AgGridModule.withComponents([]), FrameworkModule],
+                    exports: [GridComponent]
                 }]
         }] });
 
@@ -369,87 +545,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
-class ParagraphComponent {
+class H2Component {
     constructor() { }
 }
-ParagraphComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ParagraphComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ParagraphComponent, selector: "symphony-paragraph", inputs: { text: "text", isSecondary: "isSecondary" }, ngImport: i0, template: "<p\n  [ngClass]=\"{\n    'body-copy-secondary': isSecondary,\n    'body-copy-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</p>\n", styles: [".body-copy-primary,.body-copy-secondary{margin-bottom:0;line-height:20px}.body-copy-secondary{color:#fff}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphComponent, decorators: [{
+H2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+H2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: H2Component, selector: "symphony-h2", inputs: { text: "text", isSecondary: "isSecondary" }, ngImport: i0, template: "<h2 [ngClass]=\"{ 'h2-secondary': isSecondary, 'h2-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h2>\n", styles: [".h2-primary,.h2-secondary{margin-bottom:0;line-height:40px;letter-spacing:-2px;margin-top:0}.h2-secondary{color:#fff}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-paragraph', template: "<p\n  [ngClass]=\"{\n    'body-copy-secondary': isSecondary,\n    'body-copy-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</p>\n", styles: [".body-copy-primary,.body-copy-secondary{margin-bottom:0;line-height:20px}.body-copy-secondary{color:#fff}\n"] }]
+            args: [{ selector: 'symphony-h2', template: "<h2 [ngClass]=\"{ 'h2-secondary': isSecondary, 'h2-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h2>\n", styles: [".h2-primary,.h2-secondary{margin-bottom:0;line-height:40px;letter-spacing:-2px;margin-top:0}.h2-secondary{color:#fff}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { text: [{
                 type: Input
             }], isSecondary: [{
                 type: Input
             }] } });
 
-class ParagraphModule {
+class H2Module {
 }
-ParagraphModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ParagraphModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphModule, declarations: [ParagraphComponent], imports: [CommonModule], exports: [ParagraphComponent] });
-ParagraphModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphModule, decorators: [{
+H2Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+H2Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H2Module, declarations: [H2Component], imports: [CommonModule], exports: [H2Component] });
+H2Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H2Module, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H2Module, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ParagraphComponent],
+                    declarations: [H2Component],
                     imports: [CommonModule],
-                    exports: [ParagraphComponent],
+                    exports: [H2Component],
                 }]
         }] });
 
-class H5Component {
+class H3Component {
     constructor() { }
 }
-H5Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-H5Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: H5Component, selector: "symphony-h5", inputs: { text: "text", isSecondary: "isSecondary" }, ngImport: i0, template: "<h5\n  [ngClass]=\"{\n    'h5-secondary': isSecondary,\n    'h5-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</h5>\n", styles: [".h5-primary,.h5-secondary{margin-bottom:0;line-height:20px;margin-top:0}.h5-secondary{color:#fff}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5Component, decorators: [{
+H3Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H3Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+H3Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: H3Component, selector: "symphony-h3", inputs: { text: "text", isSecondary: "isSecondary" }, ngImport: i0, template: "<h3 [ngClass]=\"{ 'h3-secondary': isSecondary, 'h3-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h3>\n", styles: [".h3-primary,.h3-secondary{margin-bottom:0;line-height:30px;letter-spacing:-1px;margin-top:0}.h3-secondary{color:#fff}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H3Component, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-h5', template: "<h5\n  [ngClass]=\"{\n    'h5-secondary': isSecondary,\n    'h5-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</h5>\n", styles: [".h5-primary,.h5-secondary{margin-bottom:0;line-height:20px;margin-top:0}.h5-secondary{color:#fff}\n"] }]
+            args: [{ selector: 'symphony-h3', template: "<h3 [ngClass]=\"{ 'h3-secondary': isSecondary, 'h3-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h3>\n", styles: [".h3-primary,.h3-secondary{margin-bottom:0;line-height:30px;letter-spacing:-1px;margin-top:0}.h3-secondary{color:#fff}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { text: [{
                 type: Input
             }], isSecondary: [{
                 type: Input
             }] } });
 
-class H5Module {
+class H3Module {
 }
-H5Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-H5Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5Module, declarations: [H5Component], imports: [CommonModule], exports: [H5Component] });
-H5Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5Module, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5Module, decorators: [{
+H3Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H3Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+H3Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H3Module, declarations: [H3Component], imports: [CommonModule], exports: [H3Component] });
+H3Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H3Module, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H3Module, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [H5Component],
+                    declarations: [H3Component],
                     imports: [CommonModule],
-                    exports: [H5Component],
+                    exports: [H3Component],
                 }]
         }] });
 
-class IconComponent {
-    constructor() {
-        this.size = '18px';
-        this.clicked = new EventEmitter();
-    }
-    onClick() {
-        this.clicked.emit('clicked');
-    }
+class H4Component {
+    constructor() { }
 }
-IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconComponent, selector: "symphony-icon", inputs: { icon: "icon", isSecondary: "isSecondary", size: "size" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<i\n  [class]=\"icon\"\n  [ngClass]=\"{\n    'icon-secondary': isSecondary,\n    'icon-primary': !isSecondary\n  }\"\n  [style.fontSize]=\"size\"\n  (click)=\"onClick()\"\n></i>\n", styles: [".icon-secondary{color:#fff}i{cursor:pointer;font-size:18px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconComponent, decorators: [{
+H4Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H4Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+H4Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: H4Component, selector: "symphony-h4", inputs: { text: "text", isSecondary: "isSecondary" }, ngImport: i0, template: "<h4 [ngClass]=\"{ 'h4-secondary': isSecondary, 'h4-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h4>\n", styles: [".h4-primary,.h4-secondary{margin-bottom:0;line-height:20px;letter-spacing:-1px;margin-top:0}.h4-secondary{color:#fff}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H4Component, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-icon', template: "<i\n  [class]=\"icon\"\n  [ngClass]=\"{\n    'icon-secondary': isSecondary,\n    'icon-primary': !isSecondary\n  }\"\n  [style.fontSize]=\"size\"\n  (click)=\"onClick()\"\n></i>\n", styles: [".icon-secondary{color:#fff}i{cursor:pointer;font-size:18px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { icon: [{
+            args: [{ selector: 'symphony-h4', template: "<h4 [ngClass]=\"{ 'h4-secondary': isSecondary, 'h4-primary': !isSecondary }\">\n  {{ text }}\n  <ng-content></ng-content>\n</h4>\n", styles: [".h4-primary,.h4-secondary{margin-bottom:0;line-height:20px;letter-spacing:-1px;margin-top:0}.h4-secondary{color:#fff}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
                 type: Input
             }], isSecondary: [{
                 type: Input
-            }], size: [{
-                type: Input
-            }], clicked: [{
-                type: Output
             }] } });
 
-class IconModule {
+class H4Module {
+}
+H4Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H4Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+H4Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H4Module, declarations: [H4Component], imports: [CommonModule], exports: [H4Component] });
+H4Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H4Module, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H4Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [H4Component],
+                    imports: [CommonModule],
+                    exports: [H4Component],
+                }]
+        }] });
+
+class H5Component {
+    constructor() { }
+}
+H5Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+H5Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: H5Component, selector: "symphony-h5", inputs: { text: "text", isSecondary: "isSecondary" }, ngImport: i0, template: "<h5\n  [ngClass]=\"{\n    'h5-secondary': isSecondary,\n    'h5-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</h5>\n", styles: [".h5-primary,.h5-secondary{margin-bottom:0;line-height:20px;margin-top:0}.h5-secondary{color:#fff}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-h5', template: "<h5\n  [ngClass]=\"{\n    'h5-secondary': isSecondary,\n    'h5-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</h5>\n", styles: [".h5-primary,.h5-secondary{margin-bottom:0;line-height:20px;margin-top:0}.h5-secondary{color:#fff}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
+                type: Input
+            }], isSecondary: [{
+                type: Input
+            }] } });
+
+class H5Module {
+}
+H5Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+H5Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5Module, declarations: [H5Component], imports: [CommonModule], exports: [H5Component] });
+H5Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5Module, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: H5Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [H5Component],
+                    imports: [CommonModule],
+                    exports: [H5Component],
+                }]
+        }] });
+
+class ParagraphComponent {
+    constructor() { }
+}
+ParagraphComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ParagraphComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ParagraphComponent, selector: "symphony-paragraph", inputs: { text: "text", isSecondary: "isSecondary" }, ngImport: i0, template: "<p\n  [ngClass]=\"{\n    'body-copy-secondary': isSecondary,\n    'body-copy-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</p>\n", styles: [".body-copy-primary,.body-copy-secondary{margin-bottom:0;line-height:20px}.body-copy-secondary{color:#fff}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-paragraph', template: "<p\n  [ngClass]=\"{\n    'body-copy-secondary': isSecondary,\n    'body-copy-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</p>\n", styles: [".body-copy-primary,.body-copy-secondary{margin-bottom:0;line-height:20px}.body-copy-secondary{color:#fff}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
+                type: Input
+            }], isSecondary: [{
+                type: Input
+            }] } });
+
+class ParagraphModule {
+}
+ParagraphModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ParagraphModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphModule, declarations: [ParagraphComponent], imports: [CommonModule], exports: [ParagraphComponent] });
+ParagraphModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ParagraphComponent],
+                    imports: [CommonModule],
+                    exports: [ParagraphComponent],
+                }]
+        }] });
+
+class IconComponent {
+    constructor() {
+        this.size = '18px';
+        this.clicked = new EventEmitter();
+    }
+    onClick() {
+        this.clicked.emit('clicked');
+    }
+}
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconComponent, selector: "symphony-icon", inputs: { icon: "icon", isSecondary: "isSecondary", size: "size" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<i\n  [class]=\"icon\"\n  [ngClass]=\"{\n    'icon-secondary': isSecondary,\n    'icon-primary': !isSecondary\n  }\"\n  [style.fontSize]=\"size\"\n  (click)=\"onClick()\"\n></i>\n", styles: [".icon-secondary{color:#fff}i{cursor:pointer;font-size:18px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-icon', template: "<i\n  [class]=\"icon\"\n  [ngClass]=\"{\n    'icon-secondary': isSecondary,\n    'icon-primary': !isSecondary\n  }\"\n  [style.fontSize]=\"size\"\n  (click)=\"onClick()\"\n></i>\n", styles: [".icon-secondary{color:#fff}i{cursor:pointer;font-size:18px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { icon: [{
+                type: Input
+            }], isSecondary: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class IconModule {
 }
 IconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 IconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconModule, declarations: [IconComponent], imports: [CommonModule], exports: [IconComponent] });
@@ -613,144 +873,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
-class InputRadioComponent {
-    constructor() {
-        this.clicked = new EventEmitter();
-    }
-    onClick() {
-        this.isActive ? (this.isActive = false) : (this.isActive = true);
-        this.clicked.emit({
-            label: this.label,
-            isActive: this.isActive,
-        });
-    }
-}
-InputRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputRadioComponent, selector: "symphony-input-radio", inputs: { isActive: "isActive", label: "label", isRequired: "isRequired" }, outputs: { clicked: "clicked" }, ngImport: i0, 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{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:100%;cursor:inherit;height:100%;margin:0;opacity:0;padding:0;z-index:1;position:absolute}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:neuzeit_groteskbold}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioComponent, decorators: [{
-            type: Component,
-            args: [{ 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{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:100%;cursor:inherit;height:100%;margin:0;opacity:0;padding:0;z-index:1;position:absolute}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:neuzeit_groteskbold}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { isActive: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], isRequired: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }] } });
-
-class InputRadioModule {
-}
-InputRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioModule, declarations: [InputRadioComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule], exports: [InputRadioComponent] });
-InputRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioModule, imports: [[
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [InputRadioComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                    ],
-                    exports: [InputRadioComponent],
-                }]
-        }] });
-
-class InputTextComponent {
-    constructor() {
-        this.placeholder = '';
-        this.textChange = new EventEmitter();
-        this.textChange$ = new Subject();
-    }
-    ngOnInit() {
-        this.textChangeSubscription = this.textChange$
-            .pipe(debounceTime(1000), distinctUntilChanged())
-            .subscribe((tc) => {
-            this.textChange.emit(tc);
-        });
-    }
-    ngOnDestroy() {
-        this.textChangeSubscription?.unsubscribe();
-    }
-    onTextChange(event) {
-        this.textChange$.next(event.target.value);
-    }
-}
-InputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextComponent, selector: "symphony-input-text", inputs: { placeholder: "placeholder", icon: "icon", label: "label", isInverse: "isInverse" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</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::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{font-family:neuzeit-grotesk,sans-serif!important;width:calc(100% - .6rem);height:40px;border:1px solid #d0d0d0;border-radius:4px;padding:7px 15px;line-height:25px;margin:.3rem}.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{position:absolute;right:17px;font-size:14px;bottom:11px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size"], outputs: ["clicked"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-input-text', template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</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::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{font-family:neuzeit-grotesk,sans-serif!important;width:calc(100% - .6rem);height:40px;border:1px solid #d0d0d0;border-radius:4px;padding:7px 15px;line-height:25px;margin:.3rem}.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{position:absolute;right:17px;font-size:14px;bottom:11px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], isInverse: [{
-                type: Input
-            }], textChange: [{
-                type: Output
-            }] } });
-
-class InputTextModule {
-}
-InputTextModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, declarations: [InputTextComponent], imports: [CommonModule, IconModule], exports: [InputTextComponent] });
-InputTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, imports: [[CommonModule, IconModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [InputTextComponent],
-                    imports: [CommonModule, IconModule],
-                    exports: [InputTextComponent],
-                }]
-        }] });
-
-class ContextualMenuComponent {
-    constructor() {
-        this.model = {
-            hasBorder: false,
-        };
-        this.itemClick = new EventEmitter();
-    }
-    onItemClick(item) {
-        this.itemClick.emit(item);
-    }
-}
-ContextualMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContextualMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: { model: "model" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div class=\"btn-group\" dropdown>\n  <button\n    id=\"button-basic\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    [ngClass]=\"{\n      'has-border': model.hasBorder\n    }\"\n    aria-controls=\"dropdown-basic\"\n    aria-label=\"more-actions-menu\"\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 item of model.items\">\n      <a\n        class=\"dropdown-item\"\n        href=\"#\"\n        (click)=\"$event.preventDefault(); onItemClick(item)\"\n        >{{ item }}</a\n      >\n    </li>\n  </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;border-radius:50%;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px #0003;max-height:none;overflow:inherit}.btn-group .dropdown-menu li a.dropdown-item{padding:0 20px;line-height:40px;color:#000;font-weight:600}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.open button.dropdown-toggle.btn{background:#000000;color:#fff}\n"], directives: [{ type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuComponent, decorators: [{
-            type: Component,
-            args: [{ 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    [ngClass]=\"{\n      'has-border': model.hasBorder\n    }\"\n    aria-controls=\"dropdown-basic\"\n    aria-label=\"more-actions-menu\"\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 item of model.items\">\n      <a\n        class=\"dropdown-item\"\n        href=\"#\"\n        (click)=\"$event.preventDefault(); onItemClick(item)\"\n        >{{ item }}</a\n      >\n    </li>\n  </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;border-radius:50%;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px #0003;max-height:none;overflow:inherit}.btn-group .dropdown-menu li a.dropdown-item{padding:0 20px;line-height:40px;color:#000;font-weight:600}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.open button.dropdown-toggle.btn{background:#000000;color:#fff}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
-                type: Input
-            }], itemClick: [{
-                type: Output
-            }] } });
-
-class ContextualMenuModule {
-}
-ContextualMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ContextualMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuModule, declarations: [ContextualMenuComponent], imports: [CommonModule, i1$1.BsDropdownModule, BrowserAnimationsModule], exports: [ContextualMenuComponent] });
-ContextualMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuModule, imports: [[CommonModule, BsDropdownModule.forRoot(), BrowserAnimationsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ContextualMenuComponent],
-                    imports: [CommonModule, BsDropdownModule.forRoot(), BrowserAnimationsModule],
-                    exports: [ContextualMenuComponent],
-                }]
-        }] });
-
 class InputDropdownComponent {
     constructor() {
         this.selectItem = new EventEmitter();
@@ -772,386 +894,189 @@ class InputDropdownComponent {
 }
 InputDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 InputDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: { inputDropdownListModel: "inputDropdownListModel", disableBtn: "disableBtn", isInverse: "isInverse", isRequired: "isRequired" }, outputs: { selectItem: "selectItem", clearSelection: "clearSelection" }, ngImport: i0, template: "<div\n  *ngIf=\"inputDropdownListModel.componentHeading\"\n  class=\"sfx-filter-label sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n  {{ inputDropdownListModel.componentHeading }}\n  <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n  class=\"btn-group sfx-filter-dropdown sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  [isDisabled]=\"disableBtn\"\n  dropdown\n>\n  <button\n    id=\"moreDrop\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    aria-controls=\"dropdown-basic\"\n  >\n    {{ inputDropdownListModel.selectedName }}\n  </button>\n  <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n  <hr />\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"moreDrop\"\n    [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n  >\n    <li\n      *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n      [ngClass]=\"{ disabled: action.isDisabled }\"\n      (click)=\"itemClick(action)\"\n    >\n      <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n    </li>\n    <div\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n      class=\"divider dropdown-divider\"\n    ></div>\n    <a\n      class=\"sfx-filter-item-footer\"\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"onClearSelection()\"\n        class=\"pull-left sfx-clear-button\"\n      >\n        Clear All\n      </button>\n    </a>\n  </ul>\n</div>\n", styles: [".sfx-filter-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-filter-dropdown{min-width:100%}.sfx-filter-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-filter-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px}.sfx-filter-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-filter-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-filter-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-filter-dropdown i{position:absolute;right:12px;top:17px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-filter-dropdown .dropdown-menu{box-shadow:0 10px 10px #0003;background:#fff;width:100%;border:none;max-height:280px;overflow-y:scroll;padding:0 0 10px;margin:0;border-radius:0}.sfx-filter-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;font-family:neuzeit_groteskbold,sans-serif;word-break:break-word;white-space:normal}.sfx-filter-dropdown .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.sfx-filter-dropdown ::-webkit-scrollbar{width:10px}.sfx-filter-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-filter-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-filter-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-filter-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px #0003}.sfx-filter-dropdown.btn-group.open i{transform:rotate(0);color:#fff}.sfx-filter-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-filter-dropdown.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff;border-color:#000}.sfx-filter-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-filter-label{color:#fff}.is-inverse button.dropdown-toggle.btn{color:#fff;border-color:#565656}.is-inverse i{color:#fff}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:red!important}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-input-dropdown', template: "<div\n  *ngIf=\"inputDropdownListModel.componentHeading\"\n  class=\"sfx-filter-label sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n  {{ inputDropdownListModel.componentHeading }}\n  <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n  class=\"btn-group sfx-filter-dropdown sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  [isDisabled]=\"disableBtn\"\n  dropdown\n>\n  <button\n    id=\"moreDrop\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    aria-controls=\"dropdown-basic\"\n  >\n    {{ inputDropdownListModel.selectedName }}\n  </button>\n  <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n  <hr />\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"moreDrop\"\n    [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n  >\n    <li\n      *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n      [ngClass]=\"{ disabled: action.isDisabled }\"\n      (click)=\"itemClick(action)\"\n    >\n      <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n    </li>\n    <div\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n      class=\"divider dropdown-divider\"\n    ></div>\n    <a\n      class=\"sfx-filter-item-footer\"\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"onClearSelection()\"\n        class=\"pull-left sfx-clear-button\"\n      >\n        Clear All\n      </button>\n    </a>\n  </ul>\n</div>\n", styles: [".sfx-filter-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-filter-dropdown{min-width:100%}.sfx-filter-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-filter-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px}.sfx-filter-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-filter-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-filter-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-filter-dropdown i{position:absolute;right:12px;top:17px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-filter-dropdown .dropdown-menu{box-shadow:0 10px 10px #0003;background:#fff;width:100%;border:none;max-height:280px;overflow-y:scroll;padding:0 0 10px;margin:0;border-radius:0}.sfx-filter-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;font-family:neuzeit_groteskbold,sans-serif;word-break:break-word;white-space:normal}.sfx-filter-dropdown .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.sfx-filter-dropdown ::-webkit-scrollbar{width:10px}.sfx-filter-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-filter-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-filter-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-filter-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px #0003}.sfx-filter-dropdown.btn-group.open i{transform:rotate(0);color:#fff}.sfx-filter-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-filter-dropdown.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff;border-color:#000}.sfx-filter-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-filter-label{color:#fff}.is-inverse button.dropdown-toggle.btn{color:#fff;border-color:#565656}.is-inverse i{color:#fff}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:red!important}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { inputDropdownListModel: [{
-                type: Input
-            }], disableBtn: [{
-                type: Input
-            }], isInverse: [{
-                type: Input
-            }], isRequired: [{
-                type: Input
-            }], selectItem: [{
-                type: Output
-            }], clearSelection: [{
-                type: Output
-            }] } });
-
-class InputDropdownModule {
-}
-InputDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownModule, declarations: [InputDropdownComponent], imports: [i1$1.BsDropdownModule, CommonModule], exports: [InputDropdownComponent] });
-InputDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownModule, imports: [[
-            BsDropdownModule.forRoot(), CommonModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [InputDropdownComponent],
-                    imports: [
-                        BsDropdownModule.forRoot(), CommonModule
-                    ],
-                    exports: [InputDropdownComponent]
-                }]
-        }] });
-
-class FilterAreaComponent {
-    constructor() { }
-}
-FilterAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FilterAreaComponent, selector: "symphony-filter-area", ngImport: i0, template: "<div class=\"sfx-filter-section\">\n    <div class=\"sfx-border-bottom-mdm-black-1 sfx-mb-20 sfx-pb-20 sfx-mt-10 sfx-d-inline-block sfx-wid-100\">\n        <ng-content select=\"[title]\"></ng-content>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[actions]\"></ng-content>\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-2]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-3]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-4]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-5]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-6]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mb-25\">\n            <ng-content select=\"[filter-7]\"></ng-content>\n        </div>\n    </div>\n</div>", styles: [".sfx-filter-section{background:#000000;color:#fff;padding:1.875rem 2.5rem}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-filter-area', template: "<div class=\"sfx-filter-section\">\n    <div class=\"sfx-border-bottom-mdm-black-1 sfx-mb-20 sfx-pb-20 sfx-mt-10 sfx-d-inline-block sfx-wid-100\">\n        <ng-content select=\"[title]\"></ng-content>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[actions]\"></ng-content>\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-2]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-3]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-4]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-5]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-6]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mb-25\">\n            <ng-content select=\"[filter-7]\"></ng-content>\n        </div>\n    </div>\n</div>", styles: [".sfx-filter-section{background:#000000;color:#fff;padding:1.875rem 2.5rem}\n"] }]
-        }], ctorParameters: function () { return []; } });
-
-class FilterAreaModule {
-}
-FilterAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FilterAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaModule, declarations: [FilterAreaComponent], imports: [CommonModule], exports: [FilterAreaComponent] });
-FilterAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [FilterAreaComponent],
-                    imports: [CommonModule],
-                    exports: [FilterAreaComponent]
-                }]
-        }] });
-
-class TwoColumnFilterAreaComponent {
-    constructor() { }
-}
-TwoColumnFilterAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TwoColumnFilterAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: { height: "height" }, ngImport: i0, 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 class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-one]\"></ng-content>\n      </div>\n\n      <!-- search component -->\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-two]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-filter-section{background-color:#000;padding:2.625rem 1.875rem 2.825rem}.sfx-filter-items-wrap{padding:0 .6375rem}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaComponent, decorators: [{
-            type: Component,
-            args: [{ 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 class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-one]\"></ng-content>\n      </div>\n\n      <!-- search component -->\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-two]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-filter-section{background-color:#000;padding:2.625rem 1.875rem 2.825rem}.sfx-filter-items-wrap{padding:0 .6375rem}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { height: [{
-                type: Input
-            }] } });
-
-class TwoColumnFilterAreaModule {
-}
-TwoColumnFilterAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TwoColumnFilterAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaModule, declarations: [TwoColumnFilterAreaComponent], imports: [CommonModule], exports: [TwoColumnFilterAreaComponent] });
-TwoColumnFilterAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [TwoColumnFilterAreaComponent],
-                    imports: [CommonModule],
-                    exports: [TwoColumnFilterAreaComponent],
-                }]
-        }] });
-
-var ActivityScoreLevel;
-(function (ActivityScoreLevel) {
-    ActivityScoreLevel["Low"] = "low";
-    ActivityScoreLevel["Medium"] = "medium";
-    ActivityScoreLevel["High"] = "high";
-    ActivityScoreLevel["Empty"] = "empty";
-})(ActivityScoreLevel || (ActivityScoreLevel = {}));
-
-class ContactActivityScoreComponent {
-    constructor() {
-        this.contactActivityScoreModel = { activityScore: ActivityScoreLevel.Low };
-        this.contact = { candidateScoreActivityScore: 0 };
-    }
-    refresh(params) {
-        return true;
-    }
-    agInit(params) {
-        this.contact = params.data;
-        if (!this.contact.header5) {
-            this.dataAvailable = 'N/A';
-        }
-        else {
-            this.dataAvailable = this.contact.header5;
-        }
-        switch (true) {
-            case this.contact.header5 >= 0 && this.contact.header5 < 34: {
-                this.contactActivityScoreModel.activityScore = ActivityScoreLevel.Low;
-                break;
-            }
-            case this.contact.header5 >= 34 && this.contact.header5 <= 66: {
-                this.contactActivityScoreModel.activityScore =
-                    ActivityScoreLevel.Medium;
-                break;
-            }
-            case this.contact.header5 > 66: {
-                this.contactActivityScoreModel.activityScore = ActivityScoreLevel.High;
-                break;
-            }
-            default: {
-                this.contactActivityScoreModel.activityScore = ActivityScoreLevel.Empty;
-                break;
-            }
-        }
-    }
-}
-ContactActivityScoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContactActivityScoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContactActivityScoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ContactActivityScoreComponent, selector: "symphony-contact-activity-score", ngImport: i0, template: "<span\n  class=\"activity-score-bg activity-score-{{\n    contactActivityScoreModel.activityScore\n  }}\"\n>\n  <div class=\"activity-score-content\">{{ dataAvailable }}</div>\n</span>\n", styles: [".activity-score-bg{height:38px;width:38px;background-color:#bbb;border-radius:50%;display:inline-block;color:#fff;text-align:center}.activity-score-bg.activity-score-high{background-color:#00bb5b}.activity-score-bg.activity-score-medium{background-color:#f57300}.activity-score-bg.activity-score-low{background-color:#d60000}.activity-score-bg.activity-score-empty{background-color:#fff;color:#000!important}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContactActivityScoreComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-contact-activity-score', template: "<span\n  class=\"activity-score-bg activity-score-{{\n    contactActivityScoreModel.activityScore\n  }}\"\n>\n  <div class=\"activity-score-content\">{{ dataAvailable }}</div>\n</span>\n", styles: [".activity-score-bg{height:38px;width:38px;background-color:#bbb;border-radius:50%;display:inline-block;color:#fff;text-align:center}.activity-score-bg.activity-score-high{background-color:#00bb5b}.activity-score-bg.activity-score-medium{background-color:#f57300}.activity-score-bg.activity-score-low{background-color:#d60000}.activity-score-bg.activity-score-empty{background-color:#fff;color:#000!important}\n"] }]
-        }], ctorParameters: function () { return []; } });
-
-class EventSettingsMoreOptionsComponent {
-    constructor() {
-        this.agGridParams = {};
-        this.moreOptions = {
-            items: ['Edit', 'Set as Default'],
-            hasBorder: false,
-        };
-    }
-    refresh(params) {
-        return true;
-    }
-    agInit(params) {
-        this.agGridParams = params;
-    }
-    onItemClick(item) {
-        const action = {
-            item,
-            row: this.agGridParams,
-        };
-        this.agGridParams.itemClick(action);
-    }
-}
-EventSettingsMoreOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventSettingsMoreOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EventSettingsMoreOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EventSettingsMoreOptionsComponent, selector: "symphony-event-settings-more-options", ngImport: i0, template: "<symphony-contextual-menu\n  class=\"more-options\"\n  *ngIf=\"moreOptions.items && moreOptions.items.length > 0\"\n  [model]=\"moreOptions\"\n  (itemClick)=\"onItemClick($event)\"\n>\n</symphony-contextual-menu>\n", components: [{ type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventSettingsMoreOptionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-event-settings-more-options', template: "<symphony-contextual-menu\n  class=\"more-options\"\n  *ngIf=\"moreOptions.items && moreOptions.items.length > 0\"\n  [model]=\"moreOptions\"\n  (itemClick)=\"onItemClick($event)\"\n>\n</symphony-contextual-menu>\n" }]
-        }], ctorParameters: function () { return []; } });
-
-class InputToggleComponent {
-    constructor() {
-        this.toggleClick = new EventEmitter();
-    }
-    toggleClicked() {
-        this.isToggled = !this.isToggled;
-        this.toggleClick.emit(this.isToggled);
-    }
-}
-InputToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputToggleComponent, selector: "symphony-input-toggle", inputs: { isToggled: "isToggled", isInverse: "isInverse" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<label class=\"switch\">\n  <input\n    aria-label=\"toggle-active-state\"\n    [checked]=\"isToggled\"\n    type=\"checkbox\"\n    (click)=\"toggleClicked()\"\n    [ngClass]=\"{ 'is-inverse': isInverse }\"\n  />\n  <span class=\"slider round\"></span>\n</label>\n", styles: [".switch{position:relative;vertical-align:middle;display:inline-block;width:30px;height:14px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:\"\";height:10px;width:10px;left:2px;bottom:2px;background-color:#fff;transition:.4s}.slider.round{border-radius:16px}.slider.round.round:before{border-radius:50%}input:checked+.slider{background-color:#000}input:checked+.slider:before{transform:translate(15px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-input-toggle', template: "<label class=\"switch\">\n  <input\n    aria-label=\"toggle-active-state\"\n    [checked]=\"isToggled\"\n    type=\"checkbox\"\n    (click)=\"toggleClicked()\"\n    [ngClass]=\"{ 'is-inverse': isInverse }\"\n  />\n  <span class=\"slider round\"></span>\n</label>\n", styles: [".switch{position:relative;vertical-align:middle;display:inline-block;width:30px;height:14px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:\"\";height:10px;width:10px;left:2px;bottom:2px;background-color:#fff;transition:.4s}.slider.round{border-radius:16px}.slider.round.round:before{border-radius:50%}input:checked+.slider{background-color:#000}input:checked+.slider:before{transform:translate(15px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { isToggled: [{
-                type: Input
-            }], isInverse: [{
-                type: Input
-            }], toggleClick: [{
-                type: Output
-            }] } });
-
-class GridToggleCellRendererComponent {
-    refresh(params) {
-        return true;
-    }
-    agInit(params) {
-        this.params = params;
-    }
-    toggleClickedHandler(isToggled) {
-        const model = {
-            isToggled,
-            row: this.params,
-        };
-        this.params.clicked(model);
-    }
-}
-GridToggleCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridToggleCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridToggleCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridToggleCellRendererComponent, selector: "symphony-grid-toggle-cell-renderer", ngImport: i0, template: "<symphony-input-toggle\n  [isToggled]=\"params.data[params.colDef.field]\"\n  (toggleClick)=\"toggleClickedHandler($event)\"\n></symphony-input-toggle>\n", components: [{ type: InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridToggleCellRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-grid-toggle-cell-renderer', template: "<symphony-input-toggle\n  [isToggled]=\"params.data[params.colDef.field]\"\n  (toggleClick)=\"toggleClickedHandler($event)\"\n></symphony-input-toggle>\n" }]
-        }] });
-
-var RelevanceScoreLevel;
-(function (RelevanceScoreLevel) {
-    RelevanceScoreLevel["Value"] = "value";
-    RelevanceScoreLevel["Empty"] = "empty";
-})(RelevanceScoreLevel || (RelevanceScoreLevel = {}));
-
-class RelevanceScoreComponent {
-    constructor() {
-        this.relevanceScoreModel = { relevanceScore: RelevanceScoreLevel.Empty };
-        this.contact = { relevanceScore: 0 };
-    }
-    refresh(params) {
-        return true;
-    }
-    agInit(params) {
-        this.contact = params.data;
-        if (this.contact) {
-            if (this.contact.header4 || this.contact.header4 === 0) {
-                this.relevanceData = this.contact.header4;
-                this.relevanceScoreModel.relevanceScore = RelevanceScoreLevel.Value;
-            }
-            else {
-                this.relevanceData = 'N/A';
-            }
-        }
-    }
-}
-RelevanceScoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: RelevanceScoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RelevanceScoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: RelevanceScoreComponent, selector: "symphony-relevance-score", ngImport: i0, template: "<span class=\"relevance-score-bg relevance-score-{{ relevanceScoreModel.relevanceScore }}\">\n  <div class=\"relevance-score-content\">{{ relevanceData}}</div>\n</span>", styles: [".relevance-score-bg{height:38px;width:38px;background-color:#fff;border-radius:50%;display:inline-block;color:#000;text-align:center}.relevance-score-value{border:1px solid black;font-weight:700}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: RelevanceScoreComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-relevance-score', template: "<span class=\"relevance-score-bg relevance-score-{{ relevanceScoreModel.relevanceScore }}\">\n  <div class=\"relevance-score-content\">{{ relevanceData}}</div>\n</span>", styles: [".relevance-score-bg{height:38px;width:38px;background-color:#fff;border-radius:50%;display:inline-block;color:#000;text-align:center}.relevance-score-value{border:1px solid black;font-weight:700}\n"] }]
-        }], ctorParameters: function () { return []; } });
-
-class GridComponent {
-    constructor() {
-        this.rowHeightPage = 80;
-        this.gridHeight = 100;
-        this.frameworkComponents = this.getFrameworkComponents();
-        this.getRowHeight = () => {
-            return this.rowHeightPage;
-        };
-    }
-    onGridReady(gridReadyEvent) {
-        gridReadyEvent.api.sizeColumnsToFit();
-    }
-    getFrameworkComponents() {
-        return {
-            contactActivityScore: ContactActivityScoreComponent,
-            fitScore: RelevanceScoreComponent,
-            gridToggle: GridToggleCellRendererComponent,
-            moreActions: EventSettingsMoreOptionsComponent,
-        };
-    }
-}
-GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridComponent, selector: "symphony-grid", inputs: { columnDefs: "columnDefs", rowData: "rowData" }, ngImport: i0, template: "<ag-grid-angular\n  style=\"width: 100%\"\n  class=\"ag-theme-alpine\"\n  [rowData]=\"rowData\"\n  [columnDefs]=\"columnDefs\"\n  (gridReady)=\"onGridReady($event)\"\n  [style.height.vh]=\"gridHeight\"\n  [getRowHeight]=\"getRowHeight\"\n  [frameworkComponents]=\"frameworkComponents\"\n>\n</ag-grid-angular>\n", styles: [""], components: [{ type: i1$2.AgGridAngular, selector: "ag-grid-angular", inputs: ["alignedGrids", "rowData", "columnDefs", "excelStyles", "pinnedTopRowData", "pinnedBottomRowData", "chartThemes", "components", "frameworkComponents", "rowStyle", "context", "autoGroupColumnDef", "localeText", "icons", "datasource", "serverSideDatasource", "viewportDatasource", "groupRowRendererParams", "aggFuncs", "fullWidthCellRendererParams", "defaultColGroupDef", "defaultColDef", "defaultExportParams", "columnTypes", "rowClassRules", "detailGridOptions", "detailCellRendererParams", "loadingCellRendererParams", "loadingOverlayComponentParams", "noRowsOverlayComponentParams", "popupParent", "colResizeDefault", "reduxStore", "statusBar", "sideBar", "chartThemeOverrides", "customChartThemes", "sortingOrder", "rowClass", "rowSelection", "overlayLoadingTemplate", "overlayNoRowsTemplate", "quickFilterText", "rowModelType", "editType", "domLayout", "clipboardDeliminator", "rowGroupPanelShow", "multiSortKey", "pivotColumnGroupTotals", "pivotRowTotals", "pivotPanelShow", "fillHandleDirection", "rowHeight", "detailRowHeight", "rowBuffer", "colWidth", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "groupDefaultExpanded", "minColWidth", "maxColWidth", "viewportRowModelPageSize", "viewportRowModelBufferSize", "autoSizePadding", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "tooltipShowDelay", "cacheOverflowSize", "paginationPageSize", "cacheBlockSize", "infiniteInitialRowCount", "scrollbarWidth", "batchUpdateWaitMillis", "asyncTransactionWaitMillis", "blockLoadDebounceMillis", "keepDetailRowsCount", "undoRedoCellEditingLimit", "cellFlashDelay", "cellFadeDelay", "localeTextFunc", "groupRowInnerRenderer", "groupRowInnerRendererFramework", "dateComponent", "dateComponentFramework", "groupRowRenderer", "groupRowRendererFramework", "isExternalFilterPresent", "getRowHeight", "doesExternalFilterPass", "getRowClass", "getRowStyle", "getRowClassRules", "traverseNode", "getContextMenuItems", "getMainMenuItems", "processRowPostCreate", "processCellForClipboard", "groupRowAggNodes", "getRowNodeId", "isFullWidthCell", "fullWidthCellRenderer", "fullWidthCellRendererFramework", "processSecondaryColDef", "processSecondaryColGroupDef", "getBusinessKeyForNode", "sendToClipboard", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getDetailRowData", "processCellFromClipboard", "getDocument", "postProcessPopup", "getChildCount", "getDataPath", "loadingCellRenderer", "loadingCellRendererFramework", "loadingOverlayComponent", "loadingOverlayComponentFramework", "noRowsOverlayComponent", "noRowsOverlayComponentFramework", "detailCellRenderer", "detailCellRendererFramework", "defaultGroupSortComparator", "isRowMaster", "isRowSelectable", "postSort", "processHeaderForClipboard", "paginationNumberFormatter", "processDataFromClipboard", "getServerSideGroupKey", "isServerSideGroup", "suppressKeyboardEvent", "createChartContainer", "processChartOptions", "getChartToolbarItems", "fillOperation", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowClickSelection", "suppressCellSelection", "suppressHorizontalScroll", "alwaysShowVerticalScroll", "debug", "enableBrowserTooltips", "enableCellExpressions", "angularCompileRows", "angularCompileFilters", "groupSuppressAutoColumn", "groupSelectsChildren", "groupIncludeFooter", "groupIncludeTotalFooter", "groupUseEntireRow", "groupSuppressBlankHeader", "suppressMenuHide", "suppressRowDeselection", "unSortIcon", "suppressMultiSort", "singleClickEdit", "suppressLoadingOverlay", "suppressNoRowsOverlay", "suppressAutoSize", "skipHeaderOnAutoSize", "suppressParentsInRowNodes", "suppressColumnMoveAnimation", "suppressMovableColumns", "suppressFieldDotNotation", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "suppressClearOnFillReduction", "deltaSort", "suppressTouch", "suppressAsyncEvents", "allowContextMenuWithControlKey", "suppressContextMenu", "rememberGroupStateWhenNewData", "enableCellChangeFlash", "suppressDragLeaveHidesColumns", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "suppressCopyRowsToClipboard", "copyHeadersToClipboard", "pivotMode", "suppressAggFuncInHeader", "suppressColumnVirtualisation", "suppressAggAtRootLevel", "suppressFocusAfterRefresh", "functionsPassive", "functionsReadOnly", "animateRows", "groupSelectsFiltered", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "enableRtl", "suppressClickEdit", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "enableMultiRowDragging", "enableGroupEdit", "embedFullWidthRows", "deprecatedEmbedFullWidthRows", "suppressPaginationPanel", "floatingFilter", "groupHideOpenParents", "groupMultiAutoColumn", "pagination", "stopEditingWhenGridLosesFocus", "paginationAutoPageSize", "suppressScrollOnNewData", "purgeClosedRowNodes", "cacheQuickFilter", "deltaRowDataMode", "ensureDomOrder", "accentedSort", "suppressChangeDetection", "valueCache", "valueCacheNeverExpires", "aggregateOnlyChangedColumns", "suppressAnimationFrame", "suppressExcelExport", "suppressCsvExport", "treeData", "masterDetail", "suppressMultiRangeSelection", "enterMovesDownAfterEdit", "enterMovesDown", "suppressPropertyNamesCheck", "rowMultiSelectWithClick", "suppressEnterpriseResetOnNewColumns", "enableOldSetFilterModel", "suppressRowHoverHighlight", "suppressRowTransform", "suppressClipboardPaste", "suppressLastEmptyLineOnPaste", "serverSideSortingAlwaysResets", "reactNext", "suppressSetColumnStateEvents", "suppressColumnStateEvents", "enableCharts", "deltaColumnMode", "suppressMaintainUnsortedOrder", "enableCellTextSelection", "suppressBrowserResizeObserver", "suppressMaxRenderedRowRestriction", "excludeChildrenWhenTreeDataFiltering", "tooltipMouseTrack", "keepDetailRows", "paginateChildRows", "preventDefaultOnContextMenu", "undoRedoCellEditing", "allowDragFromColumnsToolPanel", "immutableData", "immutableColumns", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "applyColumnDefOrder", "debounceVerticalScrollbar", "detailRowAutoHeight", "gridOptions", "modules"], outputs: ["columnEverythingChanged", "newColumnsLoaded", "columnPivotModeChanged", "columnRowGroupChanged", "expandOrCollapseAll", "columnPivotChanged", "gridColumnsChanged", "columnValueChanged", "columnMoved", "columnVisible", "columnPinned", "columnGroupOpened", "columnResized", "displayedColumnsChanged", "virtualColumnsChanged", "rowGroupOpened", "rowDataChanged", "rowDataUpdated", "pinnedRowDataChanged", "rangeSelectionChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "toolPanelVisibleChanged", "modelUpdated", "pasteStart", "pasteEnd", "fillStart", "fillEnd", "cellClicked", "cellDoubleClicked", "cellMouseDown", "cellContextMenu", "cellValueChanged", "rowValueChanged", "cellFocused", "rowSelected", "selectionChanged", "cellKeyDown", "cellKeyPress", "cellMouseOver", "cellMouseOut", "filterChanged", "filterModified", "filterOpened", "sortChanged", "virtualRowRemoved", "rowClicked", "rowDoubleClicked", "gridReady", "gridSizeChanged", "viewportChanged", "scrollbarWidthChanged", "firstDataRendered", "dragStarted", "dragStopped", "checkboxChanged", "rowEditingStarted", "rowEditingStopped", "cellEditingStarted", "cellEditingStopped", "bodyScroll", "animationQueueEmpty", "heightScaleChanged", "paginationChanged", "componentStateChanged", "bodyHeightChanged", "displayedColumnsWidthChanged", "scrollVisibilityChanged", "columnHoverChanged", "flashCells", "paginationPixelOffsetChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "popupToFront", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest", "keyboardFocus", "mouseFocus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-grid', template: "<ag-grid-angular\n  style=\"width: 100%\"\n  class=\"ag-theme-alpine\"\n  [rowData]=\"rowData\"\n  [columnDefs]=\"columnDefs\"\n  (gridReady)=\"onGridReady($event)\"\n  [style.height.vh]=\"gridHeight\"\n  [getRowHeight]=\"getRowHeight\"\n  [frameworkComponents]=\"frameworkComponents\"\n>\n</ag-grid-angular>\n", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { columnDefs: [{
+            args: [{ selector: 'symphony-input-dropdown', template: "<div\n  *ngIf=\"inputDropdownListModel.componentHeading\"\n  class=\"sfx-filter-label sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n  {{ inputDropdownListModel.componentHeading }}\n  <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n  class=\"btn-group sfx-filter-dropdown sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  [isDisabled]=\"disableBtn\"\n  dropdown\n>\n  <button\n    id=\"moreDrop\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    aria-controls=\"dropdown-basic\"\n  >\n    {{ inputDropdownListModel.selectedName }}\n  </button>\n  <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n  <hr />\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"moreDrop\"\n    [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n  >\n    <li\n      *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n      [ngClass]=\"{ disabled: action.isDisabled }\"\n      (click)=\"itemClick(action)\"\n    >\n      <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n    </li>\n    <div\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n      class=\"divider dropdown-divider\"\n    ></div>\n    <a\n      class=\"sfx-filter-item-footer\"\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"onClearSelection()\"\n        class=\"pull-left sfx-clear-button\"\n      >\n        Clear All\n      </button>\n    </a>\n  </ul>\n</div>\n", styles: [".sfx-filter-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-filter-dropdown{min-width:100%}.sfx-filter-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-filter-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px}.sfx-filter-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-filter-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-filter-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-filter-dropdown i{position:absolute;right:12px;top:17px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-filter-dropdown .dropdown-menu{box-shadow:0 10px 10px #0003;background:#fff;width:100%;border:none;max-height:280px;overflow-y:scroll;padding:0 0 10px;margin:0;border-radius:0}.sfx-filter-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;font-family:neuzeit_groteskbold,sans-serif;word-break:break-word;white-space:normal}.sfx-filter-dropdown .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.sfx-filter-dropdown ::-webkit-scrollbar{width:10px}.sfx-filter-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-filter-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-filter-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-filter-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px #0003}.sfx-filter-dropdown.btn-group.open i{transform:rotate(0);color:#fff}.sfx-filter-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-filter-dropdown.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff;border-color:#000}.sfx-filter-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-filter-label{color:#fff}.is-inverse button.dropdown-toggle.btn{color:#fff;border-color:#565656}.is-inverse i{color:#fff}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:red!important}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { inputDropdownListModel: [{
                 type: Input
-            }], rowData: [{
+            }], disableBtn: [{
+                type: Input
+            }], isInverse: [{
+                type: Input
+            }], isRequired: [{
                 type: Input
+            }], selectItem: [{
+                type: Output
+            }], clearSelection: [{
+                type: Output
             }] } });
 
-class ContactActivityScoreModule {
+class InputDropdownModule {
 }
-ContactActivityScoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContactActivityScoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ContactActivityScoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContactActivityScoreModule, declarations: [ContactActivityScoreComponent], imports: [CommonModule] });
-ContactActivityScoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContactActivityScoreModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContactActivityScoreModule, decorators: [{
+InputDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InputDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownModule, declarations: [InputDropdownComponent], imports: [i1$1.BsDropdownModule, CommonModule], exports: [InputDropdownComponent] });
+InputDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownModule, imports: [[
+            BsDropdownModule.forRoot(), CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ContactActivityScoreComponent],
-                    imports: [CommonModule],
+                    declarations: [InputDropdownComponent],
+                    imports: [
+                        BsDropdownModule.forRoot(), CommonModule
+                    ],
+                    exports: [InputDropdownComponent]
                 }]
         }] });
 
-class EventSettingsMoreOptionsModule {
+class InputDropdownList {
 }
-EventSettingsMoreOptionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventSettingsMoreOptionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-EventSettingsMoreOptionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventSettingsMoreOptionsModule, declarations: [EventSettingsMoreOptionsComponent], imports: [CommonModule, ContextualMenuModule], exports: [EventSettingsMoreOptionsComponent] });
-EventSettingsMoreOptionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventSettingsMoreOptionsModule, imports: [[CommonModule, ContextualMenuModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventSettingsMoreOptionsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [EventSettingsMoreOptionsComponent],
-                    imports: [CommonModule, ContextualMenuModule],
-                    exports: [EventSettingsMoreOptionsComponent],
-                }]
-        }] });
 
-class InputToggleModule {
+class InputDropdownListItemModel {
 }
-InputToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputToggleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleModule, declarations: [InputToggleComponent], imports: [CommonModule], exports: [InputToggleComponent] });
-InputToggleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [InputToggleComponent],
-                    imports: [CommonModule],
-                    exports: [InputToggleComponent],
-                }]
-        }] });
 
-class GridToggleCellRendererModule {
+class InputRadioComponent {
+    constructor() {
+        this.clicked = new EventEmitter();
+    }
+    onClick() {
+        this.isActive ? (this.isActive = false) : (this.isActive = true);
+        this.clicked.emit({
+            label: this.label,
+            isActive: this.isActive,
+        });
+    }
 }
-GridToggleCellRendererModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridToggleCellRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GridToggleCellRendererModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridToggleCellRendererModule, declarations: [GridToggleCellRendererComponent], imports: [CommonModule, InputToggleModule], exports: [GridToggleCellRendererComponent] });
-GridToggleCellRendererModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridToggleCellRendererModule, imports: [[CommonModule, InputToggleModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridToggleCellRendererModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [GridToggleCellRendererComponent],
-                    imports: [CommonModule, InputToggleModule],
-                    exports: [GridToggleCellRendererComponent],
-                }]
-        }] });
+InputRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputRadioComponent, selector: "symphony-input-radio", inputs: { isActive: "isActive", label: "label", isRequired: "isRequired" }, outputs: { clicked: "clicked" }, ngImport: i0, 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{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:100%;cursor:inherit;height:100%;margin:0;opacity:0;padding:0;z-index:1;position:absolute}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:neuzeit_groteskbold}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioComponent, decorators: [{
+            type: Component,
+            args: [{ 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{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:100%;cursor:inherit;height:100%;margin:0;opacity:0;padding:0;z-index:1;position:absolute}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:neuzeit_groteskbold}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { isActive: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], isRequired: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
 
-class RelevanceScoreModule {
+class InputRadioModule {
 }
-RelevanceScoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: RelevanceScoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RelevanceScoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: RelevanceScoreModule, declarations: [RelevanceScoreComponent], imports: [CommonModule] });
-RelevanceScoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: RelevanceScoreModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: RelevanceScoreModule, decorators: [{
+InputRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InputRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioModule, declarations: [InputRadioComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule], exports: [InputRadioComponent] });
+InputRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [RelevanceScoreComponent],
-                    imports: [CommonModule],
+                    declarations: [InputRadioComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ],
+                    exports: [InputRadioComponent],
                 }]
         }] });
 
-class FrameworkModule {
+class InputTextComponent {
+    constructor() {
+        this.placeholder = '';
+        this.textChange = new EventEmitter();
+        this.textChange$ = new Subject();
+    }
+    ngOnInit() {
+        this.textChangeSubscription = this.textChange$
+            .pipe(debounceTime(1000), distinctUntilChanged())
+            .subscribe((tc) => {
+            this.textChange.emit(tc);
+        });
+    }
+    ngOnDestroy() {
+        this.textChangeSubscription?.unsubscribe();
+    }
+    onTextChange(event) {
+        this.textChange$.next(event.target.value);
+    }
 }
-FrameworkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FrameworkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, exports: [ContactActivityScoreModule,
-        RelevanceScoreModule,
-        GridToggleCellRendererModule,
-        EventSettingsMoreOptionsModule] });
-FrameworkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, imports: [[], ContactActivityScoreModule,
-        RelevanceScoreModule,
-        GridToggleCellRendererModule,
-        EventSettingsMoreOptionsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, decorators: [{
+InputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextComponent, selector: "symphony-input-text", inputs: { placeholder: "placeholder", icon: "icon", label: "label", isInverse: "isInverse" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</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::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{font-family:neuzeit-grotesk,sans-serif!important;width:calc(100% - .6rem);height:40px;border:1px solid #d0d0d0;border-radius:4px;padding:7px 15px;line-height:25px;margin:.3rem}.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{position:absolute;right:17px;font-size:14px;bottom:11px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size"], outputs: ["clicked"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-input-text', template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</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::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{font-family:neuzeit-grotesk,sans-serif!important;width:calc(100% - .6rem);height:40px;border:1px solid #d0d0d0;border-radius:4px;padding:7px 15px;line-height:25px;margin:.3rem}.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{position:absolute;right:17px;font-size:14px;bottom:11px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], isInverse: [{
+                type: Input
+            }], textChange: [{
+                type: Output
+            }] } });
+
+class InputTextModule {
+}
+InputTextModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InputTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, declarations: [InputTextComponent], imports: [CommonModule, IconModule], exports: [InputTextComponent] });
+InputTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, imports: [[CommonModule, IconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [],
-                    imports: [],
-                    exports: [
-                        ContactActivityScoreModule,
-                        RelevanceScoreModule,
-                        GridToggleCellRendererModule,
-                        EventSettingsMoreOptionsModule,
-                    ],
+                    declarations: [InputTextComponent],
+                    imports: [CommonModule, IconModule],
+                    exports: [InputTextComponent],
                 }]
         }] });
 
-class GridModule {
+class PillComponent {
+    constructor() {
+        this.removePill = new EventEmitter();
+    }
+    onRemoveClick() {
+        this.removePill.emit(this.pillLabel);
+    }
 }
-GridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridModule, declarations: [GridComponent], imports: [CommonModule, i1$2.AgGridModule, FrameworkModule], exports: [GridComponent] });
-GridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridModule, imports: [[CommonModule, AgGridModule.withComponents([]), FrameworkModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridModule, decorators: [{
+PillComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PillComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PillComponent, selector: "symphony-pill", inputs: { pillLabel: "pillLabel", isInverse: "isInverse", hasClose: "hasClose", tooltipLabel: "tooltipLabel" }, outputs: { removePill: "removePill" }, ngImport: i0, template: "<span *ngIf=\"tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    tooltip=\"{{tooltipLabel}}\"\n    placement=\"top\"\n    containerClass=\"sfx-info-tooltip pill-tooltip\"\n    [adaptivePosition]=\"false\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>", styles: [".sfx-pill-item{font-family:neuzeit_groteskbold;background-color:#f1f1f1;color:#000;padding:10px 20px;border-radius:25px;text-align:center;font-weight:600;margin-right:10px;margin-top:10px;position:relative}.sfx-pill-item:hover,.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item.has-close{padding:10px 20px 10px 38px}.sfx-pill-item i{font-size:18px;position:absolute;left:14px;top:11px;transform:rotate(45deg)}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:160px;font-size:13px;color:#000}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-pill', encapsulation: ViewEncapsulation.None, template: "<span *ngIf=\"tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    tooltip=\"{{tooltipLabel}}\"\n    placement=\"top\"\n    containerClass=\"sfx-info-tooltip pill-tooltip\"\n    [adaptivePosition]=\"false\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>", styles: [".sfx-pill-item{font-family:neuzeit_groteskbold;background-color:#f1f1f1;color:#000;padding:10px 20px;border-radius:25px;text-align:center;font-weight:600;margin-right:10px;margin-top:10px;position:relative}.sfx-pill-item:hover,.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item.has-close{padding:10px 20px 10px 38px}.sfx-pill-item i{font-size:18px;position:absolute;left:14px;top:11px;transform:rotate(45deg)}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:160px;font-size:13px;color:#000}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { pillLabel: [{
+                type: Input
+            }], isInverse: [{
+                type: Input
+            }], hasClose: [{
+                type: Input
+            }], tooltipLabel: [{
+                type: Input
+            }], removePill: [{
+                type: Output
+            }] } });
+
+class PillModule {
+}
+PillModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PillModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillModule, declarations: [PillComponent], imports: [CommonModule, i2.TooltipModule], exports: [PillComponent] });
+PillModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillModule, imports: [[
+            CommonModule, TooltipModule.forRoot()
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [GridComponent],
-                    imports: [CommonModule, AgGridModule.withComponents([]), FrameworkModule],
-                    exports: [GridComponent]
+                    declarations: [PillComponent],
+                    imports: [
+                        CommonModule, TooltipModule.forRoot()
+                    ],
+                    exports: [PillComponent],
                 }]
         }] });
 
@@ -1292,6 +1217,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class ToasterAlertModel {
+}
+var ToasterAlertType;
+(function (ToasterAlertType) {
+    ToasterAlertType[ToasterAlertType["Success"] = 1] = "Success";
+    ToasterAlertType[ToasterAlertType["Warning"] = 2] = "Warning";
+    ToasterAlertType[ToasterAlertType["Error"] = 3] = "Error";
+})(ToasterAlertType || (ToasterAlertType = {}));
+var AlertDuration;
+(function (AlertDuration) {
+    AlertDuration[AlertDuration["OneSecond"] = 1000] = "OneSecond";
+    AlertDuration[AlertDuration["TwoSeconds"] = 2000] = "TwoSeconds";
+    AlertDuration[AlertDuration["ThreeSeconds"] = 3000] = "ThreeSeconds";
+    AlertDuration[AlertDuration["FourSeconds"] = 4000] = "FourSeconds";
+    AlertDuration[AlertDuration["FiveSeconds"] = 5000] = "FiveSeconds";
+    AlertDuration[AlertDuration["Indefinite"] = 99999999] = "Indefinite";
+})(AlertDuration || (AlertDuration = {}));
+
+class TwoColumnFilterAreaComponent {
+    constructor() { }
+}
+TwoColumnFilterAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TwoColumnFilterAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: { height: "height" }, ngImport: i0, 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 class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-one]\"></ng-content>\n      </div>\n\n      <!-- search component -->\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-two]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-filter-section{background-color:#000;padding:2.625rem 1.875rem 2.825rem}.sfx-filter-items-wrap{padding:0 .6375rem}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaComponent, decorators: [{
+            type: Component,
+            args: [{ 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 class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-one]\"></ng-content>\n      </div>\n\n      <!-- search component -->\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-two]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-filter-section{background-color:#000;padding:2.625rem 1.875rem 2.825rem}.sfx-filter-items-wrap{padding:0 .6375rem}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { height: [{
+                type: Input
+            }] } });
+
+class TwoColumnFilterAreaModule {
+}
+TwoColumnFilterAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TwoColumnFilterAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaModule, declarations: [TwoColumnFilterAreaComponent], imports: [CommonModule], exports: [TwoColumnFilterAreaComponent] });
+TwoColumnFilterAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TwoColumnFilterAreaComponent],
+                    imports: [CommonModule],
+                    exports: [TwoColumnFilterAreaComponent],
+                }]
+        }] });
+
 class AtomsModule {
 }
 AtomsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AtomsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1299,8 +1268,6 @@ AtomsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ContextualMenuModule,
         AvatarModule,
         PillModule,
-        TaskIconModule,
-        ColorSampleModule,
         H1Module,
         H2Module,
         H3Module,
@@ -1326,8 +1293,6 @@ AtomsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
         ContextualMenuModule,
         AvatarModule,
         PillModule,
-        TaskIconModule,
-        ColorSampleModule,
         H1Module,
         H2Module,
         H3Module,
@@ -1359,8 +1324,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         ContextualMenuModule,
                         AvatarModule,
                         PillModule,
-                        TaskIconModule,
-                        ColorSampleModule,
                         H1Module,
                         H2Module,
                         H3Module,
@@ -1381,7 +1344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         ToasterAlertModule,
                         SfxLoaderModule,
                         SfxPageLoaderModule,
-                        SfxProgressBarModule
+                        SfxProgressBarModule,
                     ],
                 }]
         }] });
@@ -1415,6 +1378,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class CardComponent {
+    constructor() {
+        this.cardModel = {
+            title: '',
+            description: '',
+        };
+        this.clicked = new EventEmitter();
+    }
+    onClick() {
+        this.clicked.emit(this.cardModel);
+    }
+}
+CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CardComponent, selector: "symphony-card", inputs: { cardModel: "cardModel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"card-item-wrapper\">\n  <div class=\"card-item\" (click)=\"onClick()\">\n    <div class=\"card-title-wrap sfx-d-flex\">\n      <div class=\"card-icon\">\n        <symphony-icon [icon]=\"cardModel.icon\"></symphony-icon>\n      </div>\n      <div class=\"card-title\">\n        <symphony-h4>{{ cardModel.title }}</symphony-h4>\n      </div>\n    </div>\n    <div class=\"card-description\">\n      <symphony-paragraph>{{ cardModel.description }}</symphony-paragraph>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%;height:0;padding-bottom:50%}.card-item{position:absolute;width:100%;height:100%;box-shadow:0 2px 10px #0003;border-radius:10px;padding:20px;transition:.2s;cursor:pointer}.card-item:hover{background-color:#000}.card-item:hover *{color:#fff}.card-title-wrap{margin-bottom:11px}.card-icon{padding-right:15px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size"], outputs: ["clicked"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-card', template: "<div class=\"card-item-wrapper\">\n  <div class=\"card-item\" (click)=\"onClick()\">\n    <div class=\"card-title-wrap sfx-d-flex\">\n      <div class=\"card-icon\">\n        <symphony-icon [icon]=\"cardModel.icon\"></symphony-icon>\n      </div>\n      <div class=\"card-title\">\n        <symphony-h4>{{ cardModel.title }}</symphony-h4>\n      </div>\n    </div>\n    <div class=\"card-description\">\n      <symphony-paragraph>{{ cardModel.description }}</symphony-paragraph>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%;height:0;padding-bottom:50%}.card-item{position:absolute;width:100%;height:100%;box-shadow:0 2px 10px #0003;border-radius:10px;padding:20px;transition:.2s;cursor:pointer}.card-item:hover{background-color:#000}.card-item:hover *{color:#fff}.card-title-wrap{margin-bottom:11px}.card-icon{padding-right:15px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { cardModel: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class CardModule {
+}
+CardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardModule, declarations: [CardComponent], imports: [CommonModule, IconModule, H4Module, H5Module, ParagraphModule], exports: [CardComponent] });
+CardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardModule, imports: [[CommonModule, IconModule, H4Module, H5Module, ParagraphModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CardComponent],
+                    imports: [CommonModule, IconModule, H4Module, H5Module, ParagraphModule],
+                    exports: [CardComponent],
+                }]
+        }] });
+
+class PillsComponent {
+    constructor() {
+        this.removePill = new EventEmitter();
+    }
+    onRemovePill(event) {
+        this.removePill.emit(this.pillsList.find(p => p.pillLabel.toLowerCase() === event.toLowerCase()));
+    }
+}
+PillsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PillsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PillsComponent, selector: "symphony-pills", inputs: { hasClose: "hasClose", pillsList: "pillsList", hasTooltips: "hasTooltips" }, outputs: { removePill: "removePill" }, ngImport: i0, 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;white-space:nowrap;width:100%;padding-bottom:20px}\n"], components: [{ type: PillComponent, selector: "symphony-pill", inputs: ["pillLabel", "isInverse", "hasClose", "tooltipLabel"], outputs: ["removePill"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillsComponent, decorators: [{
+            type: Component,
+            args: [{ 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;white-space:nowrap;width:100%;padding-bottom:20px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { hasClose: [{
+                type: Input
+            }], pillsList: [{
+                type: Input
+            }], hasTooltips: [{
+                type: Input
+            }], removePill: [{
+                type: Output
+            }] } });
+
+class PillsModule {
+}
+PillsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PillsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillsModule, declarations: [PillsComponent], imports: [CommonModule,
+        PillModule], exports: [PillsComponent] });
+PillsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillsModule, imports: [[
+            CommonModule,
+            PillModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PillsComponent],
+                    imports: [
+                        CommonModule,
+                        PillModule
+                    ],
+                    exports: [
+                        PillsComponent
+                    ]
+                }]
+        }] });
+
+class ColorSampleComponent {
+    constructor() { }
+    ngOnInit() {
+        this.bgColor = this.color;
+    }
+}
+ColorSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColorSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ColorSampleComponent, selector: "symphony-color-sample", inputs: { color: "color" }, ngImport: i0, template: "<div\n  class=\"color-sample\"\n  [ngClass]=\"bgColor\"\n  [ngStyle]=\"{\n    border: color === 'background-color-white' ? '1px solid #000' : 'none'\n  }\"\n></div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-color-sample', template: "<div\n  class=\"color-sample\"\n  [ngClass]=\"bgColor\"\n  [ngStyle]=\"{\n    border: color === 'background-color-white' ? '1px solid #000' : 'none'\n  }\"\n></div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { color: [{
+                type: Input
+            }] } });
+
 class ColorSwatchComponent {
     constructor() {
         this.colorSwatchModel = {
@@ -1439,6 +1500,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Input
             }] } });
 
+class ColorSampleModule {
+}
+ColorSampleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorSampleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, declarations: [ColorSampleComponent], imports: [CommonModule], exports: [ColorSampleComponent] });
+ColorSampleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ColorSampleComponent],
+                    imports: [CommonModule],
+                    exports: [ColorSampleComponent],
+                }]
+        }] });
+
 class ColorSwatchModule {
 }
 ColorSwatchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSwatchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1515,154 +1590,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
-class NoteComponent {
-    constructor() {
-        this.noteModel = {
-            firstName: '',
-            lastName: '',
-            listTitle: '',
-            timeStamp: '',
-            description: '',
-            moreActions: {
-                items: [],
-                hasBorder: false,
-            },
-        };
-    }
-}
-NoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NoteComponent, selector: "symphony-note", inputs: { noteModel: "noteModel" }, ngImport: i0, template: "<div class=\"sfx-note\">\n  <symphony-avatar\n    class=\"list-avatar\"\n    [firstName]=\"noteModel.firstName\"\n    [lastName]=\"noteModel.lastName\"\n  ></symphony-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\n    class=\"list-more-option\"\n    *ngIf=\"noteModel.moreActions && noteModel.moreActions.items.length > 0\"\n    [model]=\"noteModel.moreActions\"\n  ></symphony-contextual-menu>\n</div>\n", styles: [".sfx-note{position:relative;padding:20px 75px}.sfx-note .list-avatar{position:absolute;left:0;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}\n"], components: [{ type: AvatarComponent, selector: "symphony-avatar", inputs: ["firstName", "lastName", "sizePx", "fontSizePx"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-note', template: "<div class=\"sfx-note\">\n  <symphony-avatar\n    class=\"list-avatar\"\n    [firstName]=\"noteModel.firstName\"\n    [lastName]=\"noteModel.lastName\"\n  ></symphony-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\n    class=\"list-more-option\"\n    *ngIf=\"noteModel.moreActions && noteModel.moreActions.items.length > 0\"\n    [model]=\"noteModel.moreActions\"\n  ></symphony-contextual-menu>\n</div>\n", styles: [".sfx-note{position:relative;padding:20px 75px}.sfx-note .list-avatar{position:absolute;left:0;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { noteModel: [{
-                type: Input
-            }] } });
-
-class NoteModule {
-}
-NoteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NoteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteModule, declarations: [NoteComponent], imports: [CommonModule,
-        AvatarModule,
-        ContextualMenuModule,
-        H3Module,
-        ParagraphModule], exports: [NoteComponent] });
-NoteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteModule, imports: [[
-            CommonModule,
-            AvatarModule,
-            ContextualMenuModule,
-            H3Module,
-            ParagraphModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NoteComponent],
-                    imports: [
-                        CommonModule,
-                        AvatarModule,
-                        ContextualMenuModule,
-                        H3Module,
-                        ParagraphModule
-                    ],
-                    exports: [NoteComponent]
-                }]
-        }] });
-
-class PillsComponent {
-    constructor() {
-        this.removePill = new EventEmitter();
-    }
-    onRemovePill(event) {
-        this.removePill.emit(this.pillsList.find(p => p.pillLabel.toLowerCase() === event.toLowerCase()));
-    }
-}
-PillsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PillsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PillsComponent, selector: "symphony-pills", inputs: { hasClose: "hasClose", pillsList: "pillsList", hasTooltips: "hasTooltips" }, outputs: { removePill: "removePill" }, ngImport: i0, 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;white-space:nowrap;width:100%;padding-bottom:20px}\n"], components: [{ type: PillComponent, selector: "symphony-pill", inputs: ["pillLabel", "isInverse", "hasClose", "tooltipLabel"], outputs: ["removePill"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillsComponent, decorators: [{
-            type: Component,
-            args: [{ 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;white-space:nowrap;width:100%;padding-bottom:20px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { hasClose: [{
-                type: Input
-            }], pillsList: [{
-                type: Input
-            }], hasTooltips: [{
-                type: Input
-            }], removePill: [{
-                type: Output
-            }] } });
-
-class PillsModule {
-}
-PillsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PillsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillsModule, declarations: [PillsComponent], imports: [CommonModule,
-        PillModule], exports: [PillsComponent] });
-PillsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillsModule, imports: [[
-            CommonModule,
-            PillModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [PillsComponent],
-                    imports: [
-                        CommonModule,
-                        PillModule
-                    ],
-                    exports: [
-                        PillsComponent
-                    ]
-                }]
-        }] });
-
-class TaskComponent {
-    constructor() {
-        this.taskModel = {
-            assignee: '',
-            title: '',
-            dueDate: '',
-        };
-    }
-}
-TaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskComponent, selector: "symphony-task", inputs: { taskModel: "taskModel" }, ngImport: i0, 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 [text]=\"taskModel.dueDate\"></symphony-paragraph>\n      <symphony-paragraph [text]=\"taskModel.assignee\"></symphony-paragraph>\n    </div>\n  </div>\n  <symphony-contextual-menu\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.items.length > 0\"\n    [model]=\"taskModel.moreActions\"\n  >\n  </symphony-contextual-menu>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{display:flex;align-items:center;padding:30px 0;border-bottom:1px solid #d9d9d9}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{width:80%;height:50px}.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}\n"], components: [{ type: TaskIconComponent, selector: "symphony-task-icon", inputs: ["isComplete"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskComponent, decorators: [{
-            type: Component,
-            args: [{ 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 [text]=\"taskModel.dueDate\"></symphony-paragraph>\n      <symphony-paragraph [text]=\"taskModel.assignee\"></symphony-paragraph>\n    </div>\n  </div>\n  <symphony-contextual-menu\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.items.length > 0\"\n    [model]=\"taskModel.moreActions\"\n  >\n  </symphony-contextual-menu>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{display:flex;align-items:center;padding:30px 0;border-bottom:1px solid #d9d9d9}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{width:80%;height:50px}.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}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { taskModel: [{
-                type: Input
-            }] } });
-
-class TaskModule {
-}
-TaskModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskModule, declarations: [TaskComponent], imports: [CommonModule,
-        TaskIconModule,
-        ContextualMenuModule,
-        H3Module,
-        ParagraphModule], exports: [TaskComponent] });
-TaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskModule, imports: [[
-            CommonModule,
-            TaskIconModule,
-            ContextualMenuModule,
-            H3Module,
-            ParagraphModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [TaskComponent],
-                    imports: [
-                        CommonModule,
-                        TaskIconModule,
-                        ContextualMenuModule,
-                        H3Module,
-                        ParagraphModule
-                    ],
-                    exports: [TaskComponent],
-                }]
-        }] });
-
 class MoleculesModule {
 }
 MoleculesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1670,30 +1597,18 @@ MoleculesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         AvatarModule,
         ContextualMenuModule,
         PillsModule,
-        TaskModule,
-        ColorSwatchModule,
-        IconSwatchModule,
-        BreadcrumbModule], exports: [NoteModule,
-        PillsModule,
-        TaskModule,
         ColorSwatchModule,
         IconSwatchModule,
-        BreadcrumbModule] });
+        BreadcrumbModule], exports: [PillsModule, BreadcrumbModule] });
 MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, imports: [[
             CommonModule,
             AvatarModule,
             ContextualMenuModule,
             PillsModule,
-            TaskModule,
             ColorSwatchModule,
             IconSwatchModule,
             BreadcrumbModule,
-        ], NoteModule,
-        PillsModule,
-        TaskModule,
-        ColorSwatchModule,
-        IconSwatchModule,
-        BreadcrumbModule] });
+        ], PillsModule, BreadcrumbModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1703,48 +1618,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         AvatarModule,
                         ContextualMenuModule,
                         PillsModule,
-                        TaskModule,
-                        ColorSwatchModule,
-                        IconSwatchModule,
-                        BreadcrumbModule,
-                    ],
-                    exports: [
-                        NoteModule,
-                        PillsModule,
-                        TaskModule,
                         ColorSwatchModule,
                         IconSwatchModule,
                         BreadcrumbModule,
                     ],
+                    exports: [PillsModule, BreadcrumbModule],
                 }]
         }] });
 
-class TaskListComponent {
-    constructor() { }
+class CardListComponent {
+    constructor() {
+        this.cardClicked = new EventEmitter();
+    }
+    onCardClick(card) {
+        this.cardClicked.emit(card);
+    }
 }
-TaskListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TaskListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskListComponent, selector: "symphony-task-list", inputs: { taskList: "taskList" }, ngImport: i0, template: "<ul class=\"task-list list-unstyled\">\n  <li class=\"task-list-item\" *ngFor=\"let task of taskList\">\n    <symphony-task [taskModel]=\"task\"></symphony-task>\n  </li>\n</ul>\n", styles: [".task-list{border-top:1px solid #d9d9d9}\n"], components: [{ type: TaskComponent, selector: "symphony-task", inputs: ["taskModel"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskListComponent, decorators: [{
+CardListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CardListComponent, selector: "symphony-card-list", inputs: { cardList: "cardList" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<section class=\"card-list\">\n  <ul class=\"row card-list list-unstyled\">\n    <li class=\"col-sm-4 col-md-3 card-list-item\" *ngFor=\"let card of cardList\">\n      <symphony-card\n        [cardModel]=\"card\"\n        (clicked)=\"onCardClick($event)\"\n      ></symphony-card>\n    </li>\n  </ul>\n</section>\n", styles: [".card-list-item{margin-bottom:40px}\n"], components: [{ type: CardComponent, selector: "symphony-card", inputs: ["cardModel"], outputs: ["clicked"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-task-list', template: "<ul class=\"task-list list-unstyled\">\n  <li class=\"task-list-item\" *ngFor=\"let task of taskList\">\n    <symphony-task [taskModel]=\"task\"></symphony-task>\n  </li>\n</ul>\n", styles: [".task-list{border-top:1px solid #d9d9d9}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { taskList: [{
+            args: [{ selector: 'symphony-card-list', template: "<section class=\"card-list\">\n  <ul class=\"row card-list list-unstyled\">\n    <li class=\"col-sm-4 col-md-3 card-list-item\" *ngFor=\"let card of cardList\">\n      <symphony-card\n        [cardModel]=\"card\"\n        (clicked)=\"onCardClick($event)\"\n      ></symphony-card>\n    </li>\n  </ul>\n</section>\n", styles: [".card-list-item{margin-bottom:40px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { cardList: [{
                 type: Input
+            }], cardClicked: [{
+                type: Output
             }] } });
 
-class TaskListModule {
+class CardListModule {
 }
-TaskListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TaskListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskListModule, declarations: [TaskListComponent], imports: [CommonModule, TaskModule], exports: [TaskListComponent] });
-TaskListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskListModule, imports: [[CommonModule, TaskModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskListModule, decorators: [{
+CardListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CardListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardListModule, declarations: [CardListComponent], imports: [CommonModule, CardModule], exports: [CardListComponent] });
+CardListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardListModule, imports: [[CommonModule, CardModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TaskListComponent],
-                    imports: [CommonModule, TaskModule],
-                    exports: [TaskListComponent],
+                    declarations: [CardListComponent],
+                    imports: [CommonModule, CardModule],
+                    exports: [CardListComponent],
                 }]
         }] });
 
+class NoteComponent {
+    constructor() {
+        this.noteModel = {
+            firstName: '',
+            lastName: '',
+            listTitle: '',
+            timeStamp: '',
+            description: '',
+            moreActions: {
+                items: [],
+                hasBorder: false,
+            },
+        };
+    }
+}
+NoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NoteComponent, selector: "symphony-note", inputs: { noteModel: "noteModel" }, ngImport: i0, template: "<div class=\"sfx-note\">\n  <symphony-avatar\n    class=\"list-avatar\"\n    [firstName]=\"noteModel.firstName\"\n    [lastName]=\"noteModel.lastName\"\n  ></symphony-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\n    class=\"list-more-option\"\n    *ngIf=\"noteModel.moreActions && noteModel.moreActions.items.length > 0\"\n    [model]=\"noteModel.moreActions\"\n  ></symphony-contextual-menu>\n</div>\n", styles: [".sfx-note{position:relative;padding:20px 75px}.sfx-note .list-avatar{position:absolute;left:0;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}\n"], components: [{ type: AvatarComponent, selector: "symphony-avatar", inputs: ["firstName", "lastName", "sizePx", "fontSizePx"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-note', template: "<div class=\"sfx-note\">\n  <symphony-avatar\n    class=\"list-avatar\"\n    [firstName]=\"noteModel.firstName\"\n    [lastName]=\"noteModel.lastName\"\n  ></symphony-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\n    class=\"list-more-option\"\n    *ngIf=\"noteModel.moreActions && noteModel.moreActions.items.length > 0\"\n    [model]=\"noteModel.moreActions\"\n  ></symphony-contextual-menu>\n</div>\n", styles: [".sfx-note{position:relative;padding:20px 75px}.sfx-note .list-avatar{position:absolute;left:0;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { noteModel: [{
+                type: Input
+            }] } });
+
 class NoteListComponent {
     constructor() { }
 }
@@ -1757,6 +1695,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Input
             }] } });
 
+class NoteModule {
+}
+NoteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NoteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteModule, declarations: [NoteComponent], imports: [CommonModule,
+        AvatarModule,
+        ContextualMenuModule,
+        H3Module,
+        ParagraphModule], exports: [NoteComponent] });
+NoteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteModule, imports: [[
+            CommonModule,
+            AvatarModule,
+            ContextualMenuModule,
+            H3Module,
+            ParagraphModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NoteComponent],
+                    imports: [
+                        CommonModule,
+                        AvatarModule,
+                        ContextualMenuModule,
+                        H3Module,
+                        ParagraphModule
+                    ],
+                    exports: [NoteComponent]
+                }]
+        }] });
+
 class NoteListModule {
 }
 NoteListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1771,185 +1739,162 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
-class AdminListTemplateComponent {
-    constructor() { }
-}
-AdminListTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdminListTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdminListTemplateComponent, selector: "symphony-admin-list-template", ngImport: i0, template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\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 sfx-mt-10\">\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-grid-wrap\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListTemplateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-admin-list-template', template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\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 sfx-mt-10\">\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-grid-wrap\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] }]
-        }], ctorParameters: function () { return []; } });
-
-class PlaceholderComponent {
+class TaskIconComponent {
     constructor() { }
 }
-PlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PlaceholderComponent, selector: "symphony-placeholder", inputs: { type: "type", label: "label", tooltip: "tooltip", tooltipPlacement: "tooltipPlacement", height: "height", width: "width" }, ngImport: i0, 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{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:10px}.placeholder-dashed-circle{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:50%}.wrapper div{height:100%}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderComponent, decorators: [{
+TaskIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TaskIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskIconComponent, selector: "symphony-task-icon", inputs: { isComplete: "isComplete" }, ngImport: i0, template: "<div\n  class=\"task-circle\"\n  [ngClass]=\"{\n    'task-incomplete': !isComplete,\n    'task-complete': isComplete\n  }\"\n>\n  <i\n    class=\"fa-solid\"\n    [ngClass]=\"{\n      'si-task-completed': !isComplete,\n      'si-task-open': isComplete\n    }\"\n  ></i>\n</div>\n", styles: [".task-circle{border-radius:50%;height:50px;width:50px}.task-circle .fa-solid{color:#fff;font-size:20px;position:relative;top:15px;left:15px}.task-complete{background-color:#00d56b}.task-incomplete{background-color:#d9d9d9}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskIconComponent, decorators: [{
             type: Component,
-            args: [{ 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{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:10px}.placeholder-dashed-circle{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:50%}.wrapper div{height:100%}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }], tooltipPlacement: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], width: [{
+            args: [{ selector: 'symphony-task-icon', template: "<div\n  class=\"task-circle\"\n  [ngClass]=\"{\n    'task-incomplete': !isComplete,\n    'task-complete': isComplete\n  }\"\n>\n  <i\n    class=\"fa-solid\"\n    [ngClass]=\"{\n      'si-task-completed': !isComplete,\n      'si-task-open': isComplete\n    }\"\n  ></i>\n</div>\n", styles: [".task-circle{border-radius:50%;height:50px;width:50px}.task-circle .fa-solid{color:#fff;font-size:20px;position:relative;top:15px;left:15px}.task-complete{background-color:#00d56b}.task-incomplete{background-color:#d9d9d9}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { isComplete: [{
                 type: Input
             }] } });
 
-class EventsSettingsPageComponent {
+class TaskComponent {
     constructor() {
-        this.keywordSearchChange = new EventEmitter();
-        this.gridActionsSelectedOption = new EventEmitter();
-        this.addButtonClicked = new EventEmitter();
-        this.eventsSettingsBreadcrumbs = [
-            {
-                label: 'Main Menu',
-                link: '/tools',
-            },
-            {
-                label: 'Sub Menu One',
-            },
-        ];
-    }
-    keywordSearch(keyword) {
-        this.keywordSearchChange.emit(keyword);
-        console.log(keyword);
-    }
-    gridActionsSelect(selection) {
-        this.gridActionsSelectedOption.emit(selection);
-        console.log(selection);
-    }
-    onAddButtonClick() {
-        this.addButtonClicked.emit();
+        this.taskModel = {
+            assignee: '',
+            title: '',
+            dueDate: '',
+        };
     }
 }
-EventsSettingsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EventsSettingsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EventsSettingsPageComponent, selector: "symphony-events-settings-page", inputs: { model: "model" }, outputs: { keywordSearchChange: "keywordSearchChange", gridActionsSelectedOption: "gridActionsSelectedOption", addButtonClicked: "addButtonClicked" }, ngImport: i0, template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb sfx-header [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <symphony-placeholder\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      filter-one\n      [label]=\"'filter-one'\"\n      [height]=\"'80px'\"\n    ></symphony-placeholder>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-contextual-menu\n    sfx-grid-action\n    class=\"more-options\"\n    *ngIf=\"model.gridActions.items && model.gridActions.items.length > 0\"\n    [model]=\"model.gridActions\"\n    (itemClick)=\"gridActionsSelect($event)\"\n  >\n  </symphony-contextual-menu>\n  <symphony-grid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [rowData]=\"model.grid.rowData\"\n    *ngIf=\"!model.overrideGridPlaceholder\"\n  ></symphony-grid>\n  <symphony-placeholder\n    *ngIf=\"model.overrideGridPlaceholder\"\n    sfx-grid\n    [label]=\"'sfx-grid'\"\n    [height]=\"'500px'\"\n  ></symphony-placeholder>\n</symphony-admin-list-template>\n", styles: [""], components: [{ type: AdminListTemplateComponent, selector: "symphony-admin-list-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size"], outputs: ["clicked"] }, { type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: ["height"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: PlaceholderComponent, selector: "symphony-placeholder", inputs: ["type", "label", "tooltip", "tooltipPlacement", "height", "width"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse"], outputs: ["textChange"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "rowData"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageComponent, decorators: [{
+TaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskComponent, selector: "symphony-task", inputs: { taskModel: "taskModel" }, ngImport: i0, 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 [text]=\"taskModel.dueDate\"></symphony-paragraph>\n      <symphony-paragraph [text]=\"taskModel.assignee\"></symphony-paragraph>\n    </div>\n  </div>\n  <symphony-contextual-menu\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.items.length > 0\"\n    [model]=\"taskModel.moreActions\"\n  >\n  </symphony-contextual-menu>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{display:flex;align-items:center;padding:30px 0;border-bottom:1px solid #d9d9d9}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{width:80%;height:50px}.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}\n"], components: [{ type: TaskIconComponent, selector: "symphony-task-icon", inputs: ["isComplete"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-events-settings-page', template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb sfx-header [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <symphony-placeholder\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      filter-one\n      [label]=\"'filter-one'\"\n      [height]=\"'80px'\"\n    ></symphony-placeholder>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-contextual-menu\n    sfx-grid-action\n    class=\"more-options\"\n    *ngIf=\"model.gridActions.items && model.gridActions.items.length > 0\"\n    [model]=\"model.gridActions\"\n    (itemClick)=\"gridActionsSelect($event)\"\n  >\n  </symphony-contextual-menu>\n  <symphony-grid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [rowData]=\"model.grid.rowData\"\n    *ngIf=\"!model.overrideGridPlaceholder\"\n  ></symphony-grid>\n  <symphony-placeholder\n    *ngIf=\"model.overrideGridPlaceholder\"\n    sfx-grid\n    [label]=\"'sfx-grid'\"\n    [height]=\"'500px'\"\n  ></symphony-placeholder>\n</symphony-admin-list-template>\n", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+            args: [{ 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 [text]=\"taskModel.dueDate\"></symphony-paragraph>\n      <symphony-paragraph [text]=\"taskModel.assignee\"></symphony-paragraph>\n    </div>\n  </div>\n  <symphony-contextual-menu\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.items.length > 0\"\n    [model]=\"taskModel.moreActions\"\n  >\n  </symphony-contextual-menu>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{display:flex;align-items:center;padding:30px 0;border-bottom:1px solid #d9d9d9}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{width:80%;height:50px}.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}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { taskModel: [{
                 type: Input
-            }], keywordSearchChange: [{
-                type: Output
-            }], gridActionsSelectedOption: [{
-                type: Output
-            }], addButtonClicked: [{
-                type: Output
             }] } });
 
-class AdminListModule {
+class TaskListComponent {
+    constructor() { }
 }
-AdminListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AdminListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListModule, declarations: [AdminListTemplateComponent], imports: [CommonModule], exports: [AdminListTemplateComponent] });
-AdminListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AdminListTemplateComponent],
-                    imports: [CommonModule],
-                    exports: [AdminListTemplateComponent],
-                }]
-        }] });
+TaskListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TaskListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskListComponent, selector: "symphony-task-list", inputs: { taskList: "taskList" }, ngImport: i0, template: "<ul class=\"task-list list-unstyled\">\n  <li class=\"task-list-item\" *ngFor=\"let task of taskList\">\n    <symphony-task [taskModel]=\"task\"></symphony-task>\n  </li>\n</ul>\n", styles: [".task-list{border-top:1px solid #d9d9d9}\n"], components: [{ type: TaskComponent, selector: "symphony-task", inputs: ["taskModel"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-task-list', template: "<ul class=\"task-list list-unstyled\">\n  <li class=\"task-list-item\" *ngFor=\"let task of taskList\">\n    <symphony-task [taskModel]=\"task\"></symphony-task>\n  </li>\n</ul>\n", styles: [".task-list{border-top:1px solid #d9d9d9}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { taskList: [{
+                type: Input
+            }] } });
 
-class PlaceholderModule {
+class TaskIconModule {
 }
-PlaceholderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PlaceholderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderModule, declarations: [PlaceholderComponent], imports: [CommonModule, i2.TooltipModule], exports: [PlaceholderComponent] });
-PlaceholderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderModule, imports: [[CommonModule, TooltipModule.forRoot()]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderModule, decorators: [{
+TaskIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TaskIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskIconModule, declarations: [TaskIconComponent], imports: [CommonModule], exports: [TaskIconComponent] });
+TaskIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskIconModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskIconModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PlaceholderComponent],
-                    imports: [CommonModule, TooltipModule.forRoot()],
-                    exports: [PlaceholderComponent],
+                    declarations: [TaskIconComponent],
+                    imports: [CommonModule],
+                    exports: [TaskIconComponent],
                 }]
         }] });
 
-class EventsSettingsPageModule {
+class TaskModule {
 }
-EventsSettingsPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-EventsSettingsPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageModule, declarations: [EventsSettingsPageComponent], imports: [CommonModule,
-        AdminListModule,
-        H3Module,
-        H4Module,
-        PlaceholderModule,
-        BreadcrumbModule,
-        TwoColumnFilterAreaModule,
-        IconModule,
-        InputTextModule,
+TaskModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskModule, declarations: [TaskComponent], imports: [CommonModule,
+        TaskIconModule,
         ContextualMenuModule,
-        InputDropdownModule,
-        GridModule,
-        IconWrapperModule], exports: [EventsSettingsPageComponent] });
-EventsSettingsPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageModule, imports: [[
+        H3Module,
+        ParagraphModule], exports: [TaskComponent] });
+TaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskModule, imports: [[
             CommonModule,
-            AdminListModule,
-            H3Module,
-            H4Module,
-            PlaceholderModule,
-            BreadcrumbModule,
-            TwoColumnFilterAreaModule,
-            IconModule,
-            InputTextModule,
+            TaskIconModule,
             ContextualMenuModule,
-            InputDropdownModule,
-            GridModule,
-            IconWrapperModule,
+            H3Module,
+            ParagraphModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [EventsSettingsPageComponent],
+                    declarations: [TaskComponent],
                     imports: [
                         CommonModule,
-                        AdminListModule,
-                        H3Module,
-                        H4Module,
-                        PlaceholderModule,
-                        BreadcrumbModule,
-                        TwoColumnFilterAreaModule,
-                        IconModule,
-                        InputTextModule,
+                        TaskIconModule,
                         ContextualMenuModule,
-                        InputDropdownModule,
-                        GridModule,
-                        IconWrapperModule,
+                        H3Module,
+                        ParagraphModule
                     ],
-                    exports: [EventsSettingsPageComponent],
+                    exports: [TaskComponent],
+                }]
+        }] });
+
+class TaskListModule {
+}
+TaskListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TaskListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskListModule, declarations: [TaskListComponent], imports: [CommonModule, TaskModule], exports: [TaskListComponent] });
+TaskListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskListModule, imports: [[CommonModule, TaskModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TaskListComponent],
+                    imports: [CommonModule, TaskModule],
+                    exports: [TaskListComponent],
                 }]
         }] });
 
-class ColorSwatchCollectionComponent {
-    constructor() { }
+class TypographyComponent {
+    constructor() {
+        this.typographyModel = {
+            h1Text: '',
+            h2Text: '',
+            h3Text: '',
+            h4Text: '',
+            paragraphText: '',
+            h5Text: '',
+        };
+    }
 }
-ColorSwatchCollectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSwatchCollectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColorSwatchCollectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ColorSwatchCollectionComponent, selector: "symphony-main-ui-color-swatch", inputs: { colorList: "colorList" }, ngImport: i0, 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", styles: [".data-vis .color-list,.data-vis-ext .color-list{flex-direction:column;flex-wrap:wrap;display:flex;height:100vh;width:50vw}.data-vis .color-list-item,.data-vis-ext .color-list-item{padding:0;flex:0 0 20%}.main-ui .color-list-item{padding:5px 0}\n"], components: [{ type: ColorSwatchComponent, selector: "symphony-ui-color-explorer", inputs: ["colorSwatchModel"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSwatchCollectionComponent, decorators: [{
+TypographyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TypographyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TypographyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TypographyComponent, selector: "symphony-typography", inputs: { title: "title", typographyModel: "typographyModel" }, ngImport: i0, template: "<div class=\"sfx-typography\">\n  <ul class=\"typography-list list-unstyled\">\n    <li class=\"typography-list-item\">\n      <symphony-h1\n        [text]=\"typographyModel.h1Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h1>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h2\n        [text]=\"typographyModel.h2Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h2>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h3\n        [text]=\"typographyModel.h3Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h3>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h4\n        [text]=\"typographyModel.h4Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h4>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h5\n        [text]=\"typographyModel.h5Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h5>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-paragraph\n        [text]=\"typographyModel.paragraphText\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-paragraph>\n    </li>\n  </ul>\n</div>\n", styles: [".typography-list-item{padding:10px 0;border-bottom:1px solid #bababa}\n"], components: [{ type: H1Component, selector: "symphony-h1", inputs: ["text", "isSecondary"] }, { type: H2Component, selector: "symphony-h2", inputs: ["text", "isSecondary"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TypographyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-main-ui-color-swatch', encapsulation: ViewEncapsulation.None, 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", styles: [".data-vis .color-list,.data-vis-ext .color-list{flex-direction:column;flex-wrap:wrap;display:flex;height:100vh;width:50vw}.data-vis .color-list-item,.data-vis-ext .color-list-item{padding:0;flex:0 0 20%}.main-ui .color-list-item{padding:5px 0}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { colorList: [{
+            args: [{ selector: 'symphony-typography', template: "<div class=\"sfx-typography\">\n  <ul class=\"typography-list list-unstyled\">\n    <li class=\"typography-list-item\">\n      <symphony-h1\n        [text]=\"typographyModel.h1Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h1>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h2\n        [text]=\"typographyModel.h2Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h2>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h3\n        [text]=\"typographyModel.h3Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h3>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h4\n        [text]=\"typographyModel.h4Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h4>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h5\n        [text]=\"typographyModel.h5Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h5>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-paragraph\n        [text]=\"typographyModel.paragraphText\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-paragraph>\n    </li>\n  </ul>\n</div>\n", styles: [".typography-list-item{padding:10px 0;border-bottom:1px solid #bababa}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], typographyModel: [{
                 type: Input
             }] } });
 
-class ColorSwatchCollectionModule {
+class TypographyModule {
 }
-ColorSwatchCollectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSwatchCollectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ColorSwatchCollectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSwatchCollectionModule, declarations: [ColorSwatchCollectionComponent], imports: [CommonModule, ColorSwatchModule] });
-ColorSwatchCollectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSwatchCollectionModule, imports: [[CommonModule, ColorSwatchModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSwatchCollectionModule, decorators: [{
+TypographyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TypographyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TypographyModule, declarations: [TypographyComponent], imports: [CommonModule,
+        H2Module,
+        H3Module,
+        H4Module,
+        H1Module,
+        ParagraphModule,
+        H5Module], exports: [TypographyComponent] });
+TypographyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TypographyModule, imports: [[
+            CommonModule,
+            H2Module,
+            H3Module,
+            H4Module,
+            H1Module,
+            ParagraphModule,
+            H5Module,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TypographyModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ColorSwatchCollectionComponent],
-                    imports: [CommonModule, ColorSwatchModule],
-                    exports: []
+                    declarations: [TypographyComponent],
+                    imports: [
+                        CommonModule,
+                        H2Module,
+                        H3Module,
+                        H4Module,
+                        H1Module,
+                        ParagraphModule,
+                        H5Module,
+                    ],
+                    exports: [TypographyComponent],
                 }]
         }] });
 
@@ -2511,6 +2456,288 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class OrganismsModule {
+}
+OrganismsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+OrganismsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, imports: [CommonModule,
+        NoteListModule,
+        TaskListModule,
+        TypographyModule,
+        IconExplorerModule,
+        CardListModule] });
+OrganismsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, imports: [[
+            CommonModule,
+            NoteListModule,
+            TaskListModule,
+            TypographyModule,
+            IconExplorerModule,
+            CardListModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        NoteListModule,
+                        TaskListModule,
+                        TypographyModule,
+                        IconExplorerModule,
+                        CardListModule,
+                    ],
+                }]
+        }] });
+
+class AdminListTemplateComponent {
+    constructor() { }
+}
+AdminListTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AdminListTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdminListTemplateComponent, selector: "symphony-admin-list-template", ngImport: i0, template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\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 sfx-mt-10\">\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-grid-wrap\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-admin-list-template', template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\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 sfx-mt-10\">\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-grid-wrap\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class PlaceholderComponent {
+    constructor() { }
+}
+PlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PlaceholderComponent, selector: "symphony-placeholder", inputs: { type: "type", label: "label", tooltip: "tooltip", tooltipPlacement: "tooltipPlacement", height: "height", width: "width" }, ngImport: i0, 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{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:10px}.placeholder-dashed-circle{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:50%}.wrapper div{height:100%}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{ 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{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:10px}.placeholder-dashed-circle{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:50%}.wrapper div{height:100%}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], tooltipPlacement: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }] } });
+
+class EventsSettingsPageComponent {
+    constructor() {
+        this.keywordSearchChange = new EventEmitter();
+        this.gridActionsSelectedOption = new EventEmitter();
+        this.addButtonClicked = new EventEmitter();
+        this.eventsSettingsBreadcrumbs = [
+            {
+                label: 'Main Menu',
+                link: '/tools',
+            },
+            {
+                label: 'Sub Menu One',
+            },
+        ];
+    }
+    keywordSearch(keyword) {
+        this.keywordSearchChange.emit(keyword);
+        console.log(keyword);
+    }
+    gridActionsSelect(selection) {
+        this.gridActionsSelectedOption.emit(selection);
+        console.log(selection);
+    }
+    onAddButtonClick() {
+        this.addButtonClicked.emit();
+    }
+}
+EventsSettingsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+EventsSettingsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EventsSettingsPageComponent, selector: "symphony-events-settings-page", inputs: { model: "model" }, outputs: { keywordSearchChange: "keywordSearchChange", gridActionsSelectedOption: "gridActionsSelectedOption", addButtonClicked: "addButtonClicked" }, ngImport: i0, template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb sfx-header [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <symphony-placeholder\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      filter-one\n      [label]=\"'filter-one'\"\n      [height]=\"'80px'\"\n    ></symphony-placeholder>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-contextual-menu\n    sfx-grid-action\n    class=\"more-options\"\n    *ngIf=\"model.gridActions.items && model.gridActions.items.length > 0\"\n    [model]=\"model.gridActions\"\n    (itemClick)=\"gridActionsSelect($event)\"\n  >\n  </symphony-contextual-menu>\n  <symphony-grid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [rowData]=\"model.grid.rowData\"\n    *ngIf=\"!model.overrideGridPlaceholder\"\n  ></symphony-grid>\n  <symphony-placeholder\n    *ngIf=\"model.overrideGridPlaceholder\"\n    sfx-grid\n    [label]=\"'sfx-grid'\"\n    [height]=\"'500px'\"\n  ></symphony-placeholder>\n</symphony-admin-list-template>\n", styles: [""], components: [{ type: AdminListTemplateComponent, selector: "symphony-admin-list-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size"], outputs: ["clicked"] }, { type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: ["height"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: PlaceholderComponent, selector: "symphony-placeholder", inputs: ["type", "label", "tooltip", "tooltipPlacement", "height", "width"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse"], outputs: ["textChange"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "rowData"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-events-settings-page', template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb sfx-header [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <symphony-placeholder\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      filter-one\n      [label]=\"'filter-one'\"\n      [height]=\"'80px'\"\n    ></symphony-placeholder>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-contextual-menu\n    sfx-grid-action\n    class=\"more-options\"\n    *ngIf=\"model.gridActions.items && model.gridActions.items.length > 0\"\n    [model]=\"model.gridActions\"\n    (itemClick)=\"gridActionsSelect($event)\"\n  >\n  </symphony-contextual-menu>\n  <symphony-grid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [rowData]=\"model.grid.rowData\"\n    *ngIf=\"!model.overrideGridPlaceholder\"\n  ></symphony-grid>\n  <symphony-placeholder\n    *ngIf=\"model.overrideGridPlaceholder\"\n    sfx-grid\n    [label]=\"'sfx-grid'\"\n    [height]=\"'500px'\"\n  ></symphony-placeholder>\n</symphony-admin-list-template>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], keywordSearchChange: [{
+                type: Output
+            }], gridActionsSelectedOption: [{
+                type: Output
+            }], addButtonClicked: [{
+                type: Output
+            }] } });
+
+class AdminListModule {
+}
+AdminListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdminListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListModule, declarations: [AdminListTemplateComponent], imports: [CommonModule], exports: [AdminListTemplateComponent] });
+AdminListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AdminListTemplateComponent],
+                    imports: [CommonModule],
+                    exports: [AdminListTemplateComponent],
+                }]
+        }] });
+
+class PlaceholderModule {
+}
+PlaceholderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PlaceholderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderModule, declarations: [PlaceholderComponent], imports: [CommonModule, i2.TooltipModule], exports: [PlaceholderComponent] });
+PlaceholderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderModule, imports: [[CommonModule, TooltipModule.forRoot()]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PlaceholderComponent],
+                    imports: [CommonModule, TooltipModule.forRoot()],
+                    exports: [PlaceholderComponent],
+                }]
+        }] });
+
+class EventsSettingsPageModule {
+}
+EventsSettingsPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+EventsSettingsPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageModule, declarations: [EventsSettingsPageComponent], imports: [CommonModule,
+        AdminListModule,
+        H3Module,
+        H4Module,
+        PlaceholderModule,
+        BreadcrumbModule,
+        TwoColumnFilterAreaModule,
+        IconModule,
+        InputTextModule,
+        ContextualMenuModule,
+        InputDropdownModule,
+        GridModule,
+        IconWrapperModule], exports: [EventsSettingsPageComponent] });
+EventsSettingsPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageModule, imports: [[
+            CommonModule,
+            AdminListModule,
+            H3Module,
+            H4Module,
+            PlaceholderModule,
+            BreadcrumbModule,
+            TwoColumnFilterAreaModule,
+            IconModule,
+            InputTextModule,
+            ContextualMenuModule,
+            InputDropdownModule,
+            GridModule,
+            IconWrapperModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EventsSettingsPageComponent],
+                    imports: [
+                        CommonModule,
+                        AdminListModule,
+                        H3Module,
+                        H4Module,
+                        PlaceholderModule,
+                        BreadcrumbModule,
+                        TwoColumnFilterAreaModule,
+                        IconModule,
+                        InputTextModule,
+                        ContextualMenuModule,
+                        InputDropdownModule,
+                        GridModule,
+                        IconWrapperModule,
+                    ],
+                    exports: [EventsSettingsPageComponent],
+                }]
+        }] });
+
+class SettingListTemplateComponent {
+    constructor() { }
+}
+SettingListTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SettingListTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingListTemplateComponent, selector: "symphony-setting-list-template", ngImport: i0, template: "<section class=\"sfx-page-title\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6 sfx-mb-30\">\n      <ng-content select=\"[page-title]\"></ng-content>\n    </div>\n  </div>\n</section>\n<section\n  class=\"setting-list-header sfx-pt-30 sfx-pb-30 sfx-border-bottom-gray-1 sfx-mb-40\"\n>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-9 col-lg-9 sfx-pt-15\">\n      <ng-content select=\"[List-title]\"></ng-content>\n    </div>\n    <div class=\"col-xs-12 col-sm-12 col-md-3 col-lg-3\">\n      <ng-content select=\"[filter-input]\"></ng-content>\n    </div>\n  </div>\n</section>\n<section class=\"setting-list-wrap\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n      <ng-content select=\"[card-list]\"></ng-content>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-page-title{border-bottom:5px solid #000}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-setting-list-template', template: "<section class=\"sfx-page-title\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6 sfx-mb-30\">\n      <ng-content select=\"[page-title]\"></ng-content>\n    </div>\n  </div>\n</section>\n<section\n  class=\"setting-list-header sfx-pt-30 sfx-pb-30 sfx-border-bottom-gray-1 sfx-mb-40\"\n>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-9 col-lg-9 sfx-pt-15\">\n      <ng-content select=\"[List-title]\"></ng-content>\n    </div>\n    <div class=\"col-xs-12 col-sm-12 col-md-3 col-lg-3\">\n      <ng-content select=\"[filter-input]\"></ng-content>\n    </div>\n  </div>\n</section>\n<section class=\"setting-list-wrap\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n      <ng-content select=\"[card-list]\"></ng-content>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-page-title{border-bottom:5px solid #000}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class SettingListPageComponent {
+    constructor() {
+        this.cardClicked = new EventEmitter();
+    }
+    ngOnInit() {
+        this.filteredCardList = this.model.cardList;
+    }
+    keywordSearch(keyword) {
+        this.filteredCardList = this.model.cardList.filter((card) => card.title.toLowerCase().includes(keyword));
+    }
+    onCardClick(card) {
+        this.cardClicked.emit(card);
+    }
+}
+SettingListPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SettingListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingListPageComponent, selector: "symphony-setting-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".sfx-page-title{border-bottom:5px solid #000}\n"], components: [{ type: SettingListTemplateComponent, selector: "symphony-setting-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse"], outputs: ["textChange"] }, { type: CardListComponent, selector: "symphony-card-list", inputs: ["cardList"], outputs: ["cardClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-setting-list-page', template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".sfx-page-title{border-bottom:5px solid #000}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], cardClicked: [{
+                type: Output
+            }] } });
+
+class SettingListTemplateModule {
+}
+SettingListTemplateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListTemplateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SettingListTemplateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListTemplateModule, declarations: [SettingListTemplateComponent], imports: [CommonModule,
+        PlaceholderModule], exports: [SettingListTemplateComponent] });
+SettingListTemplateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListTemplateModule, imports: [[
+            CommonModule,
+            PlaceholderModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListTemplateModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SettingListTemplateComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PlaceholderModule
+                    ],
+                    exports: [SettingListTemplateComponent],
+                }]
+        }] });
+
+class SettingListPageModule {
+}
+SettingListPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SettingListPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListPageModule, declarations: [SettingListPageComponent], imports: [CommonModule,
+        PlaceholderModule,
+        SettingListTemplateModule,
+        H3Module,
+        ParagraphModule,
+        InputTextModule,
+        CardListModule], exports: [SettingListPageComponent] });
+SettingListPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListPageModule, imports: [[
+            CommonModule,
+            PlaceholderModule,
+            SettingListTemplateModule,
+            H3Module,
+            ParagraphModule,
+            InputTextModule,
+            CardListModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SettingListPageComponent],
+                    imports: [
+                        CommonModule,
+                        PlaceholderModule,
+                        SettingListTemplateModule,
+                        H3Module,
+                        ParagraphModule,
+                        InputTextModule,
+                        CardListModule,
+                    ],
+                    exports: [SettingListPageComponent],
+                }]
+        }] });
+
 /*
  * ATOMS
  */
@@ -2519,5 +2746,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, ColorSampleComponent, ColorSampleModule, ColorSwatchCollectionComponent, ColorSwatchCollectionModule, ColorSwatchComponent, ColorSwatchModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, EventsSettingsPageComponent, EventsSettingsPageModule, FilterAreaComponent, FilterAreaModule, GridComponent, GridModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, IconComponent, IconExplorerComponent, IconExplorerModule, IconModule, IconSwatchComponent, IconSwatchModule, IconWrapperComponent, IconWrapperModule, InputCheckboxComponent, InputCheckboxModule, InputDropdownComponent, InputDropdownModule, InputRadioComponent, InputRadioModule, InputTextComponent, InputTextModule, MoleculesModule, NoteComponent, NoteListComponent, NoteListModule, NoteModule, ParagraphComponent, ParagraphModule, PillComponent, PillModule, PillsComponent, PillsModule, RelevanceScoreComponent, RelevanceScoreModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, TaskComponent, TaskIconComponent, TaskIconModule, TaskListComponent, TaskListModule, TaskModule, ToasterAlertComponent, ToasterAlertModule, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule };
+export { ActivityScoreLevel, AlertDuration, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, CardComponent, CardListComponent, CardListModule, CardModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FilterAreaComponent, FilterAreaModule, FrameworkModule, GridComponent, GridModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, IconComponent, IconModule, IconWrapperComponent, IconWrapperModule, Icons, InputCheckboxComponent, InputCheckboxModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputRadioComponent, InputRadioModule, InputTextComponent, InputTextModule, InputToggleComponent, InputToggleModule, MoleculesModule, OrganismsModule, ParagraphComponent, ParagraphModule, PillComponent, PillModule, PillsComponent, PillsModule, RelevanceScoreComponent, RelevanceScoreModule, SettingListPageComponent, SettingListPageModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule };
 //# sourceMappingURL=symphony-talent-component-library-projects-component-library.mjs.map