@symphony-talent/component-library 4.38.0 → 4.40.0

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

@@ -652,6 +652,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Input
             }] } });
 
+class ColorSampleComponent {
+    constructor() { }
+    ngOnInit() {
+        this.bgColor = this.color;
+        this.classType = this.isSmall ? "color-sample-small" : "color-sample";
+    }
+}
+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", isSmall: "isSmall" }, ngImport: i0, template: "<div\n  class=\"{{classType}}\"\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}.color-sample-small{float:left;border-radius:50%;height:15px;width:15px;margin:12% 5px 5px}.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-light-grey-3{background-color:#ebebeb}.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=\"{{classType}}\"\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}.color-sample-small{float:left;border-radius:50%;height:15px;width:15px;margin:12% 5px 5px}.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-light-grey-3{background-color:#ebebeb}.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
+            }], isSmall: [{
+                type: Input
+            }] } });
+
+class ColoredTextIndicatorComponent {
+    constructor() { }
+    refresh(params) {
+        return true;
+    }
+    agInit(params) {
+        this.model = {
+            value: params.value,
+            iconColor: params.data.iconColor,
+        };
+    }
+}
+ColoredTextIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColoredTextIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColoredTextIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ColoredTextIndicatorComponent, selector: "symphony-colored-text-indicator", ngImport: i0, template: "<ng-container *ngIf=\"model\">\n    <symphony-color-sample\n        [color]=\"model.iconColor\"\n        [isSmall]=\"true\"\n    ></symphony-color-sample>\n    {{model.value}}\n</ng-container>\n", components: [{ type: ColorSampleComponent, selector: "symphony-color-sample", inputs: ["color", "isSmall"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColoredTextIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-colored-text-indicator', template: "<ng-container *ngIf=\"model\">\n    <symphony-color-sample\n        [color]=\"model.iconColor\"\n        [isSmall]=\"true\"\n    ></symphony-color-sample>\n    {{model.value}}\n</ng-container>\n" }]
+        }], ctorParameters: function () { return []; } });
+
 class GridComponent {
     constructor() {
         this.pageSize = 20;
@@ -686,7 +723,8 @@ class GridComponent {
             overflowText: OverflowTextComponent,
             overflowTextTooltip: OverflowTextTooltipComponent,
             gridCellClickable: GridCellClickableComponent,
-            noRowsOverlay: GridNoRowsOverlayComponent
+            noRowsOverlay: GridNoRowsOverlayComponent,
+            coloredTextIndicator: ColoredTextIndicatorComponent
         };
     }
     onGridReady(gridReadyEvent) {
@@ -929,6 +967,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+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 ColoredTextIndicatorModule {
+}
+ColoredTextIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColoredTextIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColoredTextIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColoredTextIndicatorModule, declarations: [ColoredTextIndicatorComponent], imports: [ColorSampleModule,
+        CommonModule] });
+ColoredTextIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColoredTextIndicatorModule, imports: [[
+            ColorSampleModule,
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColoredTextIndicatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ColoredTextIndicatorComponent],
+                    imports: [
+                        ColorSampleModule,
+                        CommonModule
+                    ],
+                }]
+        }] });
+
 class FrameworkModule {
 }
 FrameworkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -941,7 +1013,8 @@ FrameworkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         OverflowTextTooltipModule,
         GridCellClickableModule,
         OverflowTextModule,
-        GridNoRowsOverlayModule] });
+        GridNoRowsOverlayModule,
+        ColoredTextIndicatorModule] });
 FrameworkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, imports: [[], ContactActivityScoreModule,
         RelevanceScoreModule,
         GridToggleCellRendererModule,
@@ -951,7 +1024,8 @@ FrameworkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         OverflowTextTooltipModule,
         GridCellClickableModule,
         OverflowTextModule,
-        GridNoRowsOverlayModule] });
+        GridNoRowsOverlayModule,
+        ColoredTextIndicatorModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, decorators: [{
             type: NgModule,
             args: [{
@@ -967,7 +1041,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         OverflowTextTooltipModule,
                         GridCellClickableModule,
                         OverflowTextModule,
-                        GridNoRowsOverlayModule
+                        GridNoRowsOverlayModule,
+                        ColoredTextIndicatorModule
                     ],
                 }]
         }] });
@@ -2313,10 +2388,10 @@ class PhaserComponent {
     constructor() { }
 }
 PhaserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PhaserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserComponent, selector: "symphony-phaser", inputs: { phaser: "phaser", outlineColor: "outlineColor" }, ngImport: i0, template: "<div>\n  <svg\n    width=\"140\"\n    height=\"140\"\n    viewBox=\"0 0 140 140\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      [class]=\"outlineColor\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      [attr.d]=\"phaser\"\n      fill=\"black\"\n    />\n  </svg>\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-light-grey-3{background-color:#ebebeb}.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}.background-color-black{fill:#000}.background-color-yellow{fill:#fde928}\n"] });
+PhaserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserComponent, selector: "symphony-phaser", inputs: { phaser: "phaser", outlineColor: "outlineColor" }, ngImport: i0, template: "<div>\n  <svg\n    width=\"140\"\n    height=\"140\"\n    viewBox=\"0 0 140 140\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      [class]=\"outlineColor\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      [attr.d]=\"phaser\"\n      fill=\"black\"\n    />\n  </svg>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.color-sample-small{float:left;border-radius:50%;height:15px;width:15px;margin:12% 5px 5px}.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-light-grey-3{background-color:#ebebeb}.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}.background-color-black{fill:#000}.background-color-yellow{fill:#fde928}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-phaser', template: "<div>\n  <svg\n    width=\"140\"\n    height=\"140\"\n    viewBox=\"0 0 140 140\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      [class]=\"outlineColor\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      [attr.d]=\"phaser\"\n      fill=\"black\"\n    />\n  </svg>\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-light-grey-3{background-color:#ebebeb}.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}.background-color-black{fill:#000}.background-color-yellow{fill:#fde928}\n"] }]
+            args: [{ selector: 'symphony-phaser', template: "<div>\n  <svg\n    width=\"140\"\n    height=\"140\"\n    viewBox=\"0 0 140 140\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      [class]=\"outlineColor\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      [attr.d]=\"phaser\"\n      fill=\"black\"\n    />\n  </svg>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.color-sample-small{float:left;border-radius:50%;height:15px;width:15px;margin:12% 5px 5px}.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-light-grey-3{background-color:#ebebeb}.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}.background-color-black{fill:#000}.background-color-yellow{fill:#fde928}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { phaser: [{
                 type: Input
             }], outlineColor: [{
@@ -2483,7 +2558,8 @@ AtomsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         AdvanceFilterSelectedCounterModule,
         NotificationsModule,
         CharacterCounterModule,
-        InputTextareaModule] });
+        InputTextareaModule,
+        ColoredTextIndicatorModule] });
 AtomsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AtomsModule, imports: [[], ButtonModule,
         ContextualMenuModule,
         AvatarModule,
@@ -2518,7 +2594,8 @@ AtomsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
         AdvanceFilterSelectedCounterModule,
         NotificationsModule,
         CharacterCounterModule,
-        InputTextareaModule] });
+        InputTextareaModule,
+        ColoredTextIndicatorModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AtomsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2559,7 +2636,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         AdvanceFilterSelectedCounterModule,
                         NotificationsModule,
                         CharacterCounterModule,
-                        InputTextareaModule
+                        InputTextareaModule,
+                        ColoredTextIndicatorModule
                     ]
                 }]
         }] });
@@ -2645,21 +2723,6 @@ var FeedbackCardState;
     FeedbackCardState["NotNow"] = "Not Now";
 })(FeedbackCardState || (FeedbackCardState = {}));
 
-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-light-grey-3{background-color:#ebebeb}.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-light-grey-3{background-color:#ebebeb}.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 FeedbackCardComponent {
     constructor() {
         this.cardClick = new EventEmitter();
@@ -2670,7 +2733,7 @@ class FeedbackCardComponent {
     }
 }
 FeedbackCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCardComponent, selector: "symphony-feedback-card", inputs: { model: "model" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n  <div class=\"card-item sfx-d-flex\">\n    <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n      <div class=\"card-wrap-text title card-title\">\n        <symphony-h4>{{ model.title }}</symphony-h4>\n      </div>\n      <div class=\"card-icon\">\n        <symphony-icon\n          *ngIf=\"model.showEditIcon\"\n          class=\"feedback-edit\"\n          [icon]=\"'si-edit'\"\n          [size]=\"'15.5px'\"\n        ></symphony-icon>\n      </div>\n    </div>\n    <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n      <symphony-paragraph class=\"card-wrap-text body\">\n        {{ bodyText }}\n      </symphony-paragraph>\n    </div>\n    <div *ngIf=\"model.additionalDetails\" class=\"additional-details\">\n      <symphony-color-sample\n        *ngIf=\"model.additionalDetails.showIcon\"\n        [color]=\"model.additionalDetails.iconColor\"\n      ></symphony-color-sample>\n      <span class=\"display-text\">{{\n        model.additionalDetails.displayText\n      }}</span>\n    </div>\n    <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n      <ng-container *ngSwitchCase=\"'Yes'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-green\"\n          [icon]=\"'si-feedback-yes'\"\n        ></symphony-icon>\n        <symphony-paragraph>Yes</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'No'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-red\"\n          [icon]=\"'si-feedback-no'\"\n        ></symphony-icon>\n        <symphony-paragraph>No</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Not Now'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-orange\"\n          [icon]=\"'si-feedback-maybe'\"\n        ></symphony-icon>\n        <symphony-paragraph>Not Now</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'None'\">\n        <symphony-paragraph class=\"sfx-bold\"\n          >Provide Feedback</symphony-paragraph\n        >\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-wrap-text{font-size:16px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.card-wrap-text.title{-webkit-line-clamp:2}.card-wrap-text.body{-webkit-line-clamp:4}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}.additional-details .color-sample{height:20px!important;width:20px!important}.additional-details .display-text{margin-top:10px;display:inline-block}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ColorSampleComponent, selector: "symphony-color-sample", inputs: ["color"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCardComponent, selector: "symphony-feedback-card", inputs: { model: "model" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n  <div class=\"card-item sfx-d-flex\">\n    <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n      <div class=\"card-wrap-text title card-title\">\n        <symphony-h4>{{ model.title }}</symphony-h4>\n      </div>\n      <div class=\"card-icon\">\n        <symphony-icon\n          *ngIf=\"model.showEditIcon\"\n          class=\"feedback-edit\"\n          [icon]=\"'si-edit'\"\n          [size]=\"'15.5px'\"\n        ></symphony-icon>\n      </div>\n    </div>\n    <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n      <symphony-paragraph class=\"card-wrap-text body\">\n        {{ bodyText }}\n      </symphony-paragraph>\n    </div>\n    <div *ngIf=\"model.additionalDetails\" class=\"additional-details\">\n      <symphony-color-sample\n        *ngIf=\"model.additionalDetails.showIcon\"\n        [color]=\"model.additionalDetails.iconColor\"\n      ></symphony-color-sample>\n      <span class=\"display-text\">{{\n        model.additionalDetails.displayText\n      }}</span>\n    </div>\n    <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n      <ng-container *ngSwitchCase=\"'Yes'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-green\"\n          [icon]=\"'si-feedback-yes'\"\n        ></symphony-icon>\n        <symphony-paragraph>Yes</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'No'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-red\"\n          [icon]=\"'si-feedback-no'\"\n        ></symphony-icon>\n        <symphony-paragraph>No</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Not Now'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-orange\"\n          [icon]=\"'si-feedback-maybe'\"\n        ></symphony-icon>\n        <symphony-paragraph>Not Now</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'None'\">\n        <symphony-paragraph class=\"sfx-bold\"\n          >Provide Feedback</symphony-paragraph\n        >\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-wrap-text{font-size:16px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.card-wrap-text.title{-webkit-line-clamp:2}.card-wrap-text.body{-webkit-line-clamp:4}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}.additional-details .color-sample{height:20px!important;width:20px!important}.additional-details .display-text{margin-top:10px;display:inline-block}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ColorSampleComponent, selector: "symphony-color-sample", inputs: ["color", "isSmall"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-card', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n  <div class=\"card-item sfx-d-flex\">\n    <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n      <div class=\"card-wrap-text title card-title\">\n        <symphony-h4>{{ model.title }}</symphony-h4>\n      </div>\n      <div class=\"card-icon\">\n        <symphony-icon\n          *ngIf=\"model.showEditIcon\"\n          class=\"feedback-edit\"\n          [icon]=\"'si-edit'\"\n          [size]=\"'15.5px'\"\n        ></symphony-icon>\n      </div>\n    </div>\n    <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n      <symphony-paragraph class=\"card-wrap-text body\">\n        {{ bodyText }}\n      </symphony-paragraph>\n    </div>\n    <div *ngIf=\"model.additionalDetails\" class=\"additional-details\">\n      <symphony-color-sample\n        *ngIf=\"model.additionalDetails.showIcon\"\n        [color]=\"model.additionalDetails.iconColor\"\n      ></symphony-color-sample>\n      <span class=\"display-text\">{{\n        model.additionalDetails.displayText\n      }}</span>\n    </div>\n    <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n      <ng-container *ngSwitchCase=\"'Yes'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-green\"\n          [icon]=\"'si-feedback-yes'\"\n        ></symphony-icon>\n        <symphony-paragraph>Yes</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'No'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-red\"\n          [icon]=\"'si-feedback-no'\"\n        ></symphony-icon>\n        <symphony-paragraph>No</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Not Now'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-orange\"\n          [icon]=\"'si-feedback-maybe'\"\n        ></symphony-icon>\n        <symphony-paragraph>Not Now</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'None'\">\n        <symphony-paragraph class=\"sfx-bold\"\n          >Provide Feedback</symphony-paragraph\n        >\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-wrap-text{font-size:16px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.card-wrap-text.title{-webkit-line-clamp:2}.card-wrap-text.body{-webkit-line-clamp:4}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}.additional-details .color-sample{height:20px!important;width:20px!important}.additional-details .display-text{margin-top:10px;display:inline-block}\n"] }]
@@ -2680,20 +2743,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Output
             }] } });
 
-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 FeedbackCardModule {
 }
 FeedbackCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3060,10 +3109,10 @@ class PhaserCardComponent {
     }
 }
 PhaserCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PhaserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: { model: "model", isClickable: "isClickable", hasHover: "hasHover" }, outputs: { cardClicked: "cardClicked", cardHover: "cardHover" }, ngImport: i0, template: "<div\n  *ngIf=\"model\"\n  class=\"card-item-wrapper\"\n  [style.height.px]=\"model.cardHeightPx\"\n  [style.width.px]=\"model.cardWidthPx\"\n  [ngClass]=\"{ 'has-hover': model.isClickable }\"\n  [ngClass]=\"{ 'has-hover': model.hasHover }\"\n  (click)=\"isClickable && onCardClick()\"\n  (mouseenter)=\"hasHover && onCardHover()\"\n>\n  <div class=\"card-item\">\n    <div\n      class=\"card-phaser-wrapper \"\n      [ngClass]=\"{ 'snap-in': model.hasAnimation }\"\n      [class]=\"model.backgroundColor\"\n    >\n      <symphony-phaser\n        [phaser]=\"model.phaserState\"\n        [outlineColor]=\"model.phaserOutlineColor\"\n      ></symphony-phaser>\n    </div>\n\n    <div\n      class=\"card-content-wrapper\"\n      [ngClass]=\"{ 'snap-in-content': model.hasAnimation }\"\n    >\n      <div class=\"card-title-wrap sfx-d-flex\">\n        <div class=\"card-icon\">\n          <symphony-icon [icon]=\"model.icon\"></symphony-icon>\n        </div>\n        <div class=\"card-title\">\n          <symphony-h5\n            [text]=\"model.eyebrowText\"\n            title=\"{{ model.eyebrowText }}\"\n            class=\"sfx-ellipse\"\n          ></symphony-h5>\n        </div>\n      </div>\n      <div class=\"card-description\">\n        <symphony-h3\n          [text]=\"model.messageBody\"\n          title=\"{{ model.messageBody }}\"\n        ></symphony-h3>\n      </div>\n    </div>\n  </div>\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-light-grey-3{background-color:#ebebeb}.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}.card-item-wrapper{position:relative;overflow:hidden;box-shadow:0 4px 4px rgba(0,0,0,.25);height:407px;background:#fff}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:203.5px;display:flex;justify-content:center;align-items:center}.card-item-wrapper .card-item{transition:.2s;transform-origin:bottom;animation-duration:2s;animation-iteration-count:1}.card-item-wrapper .card-item .card-content-wrapper{padding:30px;background-color:#fff}.card-item-wrapper .card-title-wrap{margin-bottom:11px}.card-item-wrapper .card-title-wrap h5{font-family:neuzeit_groteskregular,sans-serif;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.card-item-wrapper .card-description h3{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-item-wrapper .card-icon{padding-right:8px}.snap-in{animation:snap-in .75s ease-in-out 0s}@keyframes snap-in{0%{height:407px}25%{height:190px}50%{height:195px}to{height:200px}}.snap-in-content{animation:snap-in-content .75s ease-in-out 0s}@keyframes snap-in-content{0%{transform:translateY(200px);height:0;opacity:0}25%{opacity:1}50%{transform:translateY(-20px);opacity:1}to{transform:translateY(0);height:220px;opacity:1}}\n"], components: [{ type: PhaserComponent, selector: "symphony-phaser", inputs: ["phaser", "outlineColor"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+PhaserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: { model: "model", isClickable: "isClickable", hasHover: "hasHover" }, outputs: { cardClicked: "cardClicked", cardHover: "cardHover" }, ngImport: i0, template: "<div\n  *ngIf=\"model\"\n  class=\"card-item-wrapper\"\n  [style.height.px]=\"model.cardHeightPx\"\n  [style.width.px]=\"model.cardWidthPx\"\n  [ngClass]=\"{ 'has-hover': model.isClickable }\"\n  [ngClass]=\"{ 'has-hover': model.hasHover }\"\n  (click)=\"isClickable && onCardClick()\"\n  (mouseenter)=\"hasHover && onCardHover()\"\n>\n  <div class=\"card-item\">\n    <div\n      class=\"card-phaser-wrapper \"\n      [ngClass]=\"{ 'snap-in': model.hasAnimation }\"\n      [class]=\"model.backgroundColor\"\n    >\n      <symphony-phaser\n        [phaser]=\"model.phaserState\"\n        [outlineColor]=\"model.phaserOutlineColor\"\n      ></symphony-phaser>\n    </div>\n\n    <div\n      class=\"card-content-wrapper\"\n      [ngClass]=\"{ 'snap-in-content': model.hasAnimation }\"\n    >\n      <div class=\"card-title-wrap sfx-d-flex\">\n        <div class=\"card-icon\">\n          <symphony-icon [icon]=\"model.icon\"></symphony-icon>\n        </div>\n        <div class=\"card-title\">\n          <symphony-h5\n            [text]=\"model.eyebrowText\"\n            title=\"{{ model.eyebrowText }}\"\n            class=\"sfx-ellipse\"\n          ></symphony-h5>\n        </div>\n      </div>\n      <div class=\"card-description\">\n        <symphony-h3\n          [text]=\"model.messageBody\"\n          title=\"{{ model.messageBody }}\"\n        ></symphony-h3>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.color-sample-small{float:left;border-radius:50%;height:15px;width:15px;margin:12% 5px 5px}.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-light-grey-3{background-color:#ebebeb}.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}.card-item-wrapper{position:relative;overflow:hidden;box-shadow:0 4px 4px rgba(0,0,0,.25);height:407px;background:#fff}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:203.5px;display:flex;justify-content:center;align-items:center}.card-item-wrapper .card-item{transition:.2s;transform-origin:bottom;animation-duration:2s;animation-iteration-count:1}.card-item-wrapper .card-item .card-content-wrapper{padding:30px;background-color:#fff}.card-item-wrapper .card-title-wrap{margin-bottom:11px}.card-item-wrapper .card-title-wrap h5{font-family:neuzeit_groteskregular,sans-serif;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.card-item-wrapper .card-description h3{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-item-wrapper .card-icon{padding-right:8px}.snap-in{animation:snap-in .75s ease-in-out 0s}@keyframes snap-in{0%{height:407px}25%{height:190px}50%{height:195px}to{height:200px}}.snap-in-content{animation:snap-in-content .75s ease-in-out 0s}@keyframes snap-in-content{0%{transform:translateY(200px);height:0;opacity:0}25%{opacity:1}50%{transform:translateY(-20px);opacity:1}to{transform:translateY(0);height:220px;opacity:1}}\n"], components: [{ type: PhaserComponent, selector: "symphony-phaser", inputs: ["phaser", "outlineColor"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-phaser-card', encapsulation: ViewEncapsulation.None, template: "<div\n  *ngIf=\"model\"\n  class=\"card-item-wrapper\"\n  [style.height.px]=\"model.cardHeightPx\"\n  [style.width.px]=\"model.cardWidthPx\"\n  [ngClass]=\"{ 'has-hover': model.isClickable }\"\n  [ngClass]=\"{ 'has-hover': model.hasHover }\"\n  (click)=\"isClickable && onCardClick()\"\n  (mouseenter)=\"hasHover && onCardHover()\"\n>\n  <div class=\"card-item\">\n    <div\n      class=\"card-phaser-wrapper \"\n      [ngClass]=\"{ 'snap-in': model.hasAnimation }\"\n      [class]=\"model.backgroundColor\"\n    >\n      <symphony-phaser\n        [phaser]=\"model.phaserState\"\n        [outlineColor]=\"model.phaserOutlineColor\"\n      ></symphony-phaser>\n    </div>\n\n    <div\n      class=\"card-content-wrapper\"\n      [ngClass]=\"{ 'snap-in-content': model.hasAnimation }\"\n    >\n      <div class=\"card-title-wrap sfx-d-flex\">\n        <div class=\"card-icon\">\n          <symphony-icon [icon]=\"model.icon\"></symphony-icon>\n        </div>\n        <div class=\"card-title\">\n          <symphony-h5\n            [text]=\"model.eyebrowText\"\n            title=\"{{ model.eyebrowText }}\"\n            class=\"sfx-ellipse\"\n          ></symphony-h5>\n        </div>\n      </div>\n      <div class=\"card-description\">\n        <symphony-h3\n          [text]=\"model.messageBody\"\n          title=\"{{ model.messageBody }}\"\n        ></symphony-h3>\n      </div>\n    </div>\n  </div>\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-light-grey-3{background-color:#ebebeb}.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}.card-item-wrapper{position:relative;overflow:hidden;box-shadow:0 4px 4px rgba(0,0,0,.25);height:407px;background:#fff}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:203.5px;display:flex;justify-content:center;align-items:center}.card-item-wrapper .card-item{transition:.2s;transform-origin:bottom;animation-duration:2s;animation-iteration-count:1}.card-item-wrapper .card-item .card-content-wrapper{padding:30px;background-color:#fff}.card-item-wrapper .card-title-wrap{margin-bottom:11px}.card-item-wrapper .card-title-wrap h5{font-family:neuzeit_groteskregular,sans-serif;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.card-item-wrapper .card-description h3{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-item-wrapper .card-icon{padding-right:8px}.snap-in{animation:snap-in .75s ease-in-out 0s}@keyframes snap-in{0%{height:407px}25%{height:190px}50%{height:195px}to{height:200px}}.snap-in-content{animation:snap-in-content .75s ease-in-out 0s}@keyframes snap-in-content{0%{transform:translateY(200px);height:0;opacity:0}25%{opacity:1}50%{transform:translateY(-20px);opacity:1}to{transform:translateY(0);height:220px;opacity:1}}\n"] }]
+            args: [{ selector: 'symphony-phaser-card', encapsulation: ViewEncapsulation.None, template: "<div\n  *ngIf=\"model\"\n  class=\"card-item-wrapper\"\n  [style.height.px]=\"model.cardHeightPx\"\n  [style.width.px]=\"model.cardWidthPx\"\n  [ngClass]=\"{ 'has-hover': model.isClickable }\"\n  [ngClass]=\"{ 'has-hover': model.hasHover }\"\n  (click)=\"isClickable && onCardClick()\"\n  (mouseenter)=\"hasHover && onCardHover()\"\n>\n  <div class=\"card-item\">\n    <div\n      class=\"card-phaser-wrapper \"\n      [ngClass]=\"{ 'snap-in': model.hasAnimation }\"\n      [class]=\"model.backgroundColor\"\n    >\n      <symphony-phaser\n        [phaser]=\"model.phaserState\"\n        [outlineColor]=\"model.phaserOutlineColor\"\n      ></symphony-phaser>\n    </div>\n\n    <div\n      class=\"card-content-wrapper\"\n      [ngClass]=\"{ 'snap-in-content': model.hasAnimation }\"\n    >\n      <div class=\"card-title-wrap sfx-d-flex\">\n        <div class=\"card-icon\">\n          <symphony-icon [icon]=\"model.icon\"></symphony-icon>\n        </div>\n        <div class=\"card-title\">\n          <symphony-h5\n            [text]=\"model.eyebrowText\"\n            title=\"{{ model.eyebrowText }}\"\n            class=\"sfx-ellipse\"\n          ></symphony-h5>\n        </div>\n      </div>\n      <div class=\"card-description\">\n        <symphony-h3\n          [text]=\"model.messageBody\"\n          title=\"{{ model.messageBody }}\"\n        ></symphony-h3>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.color-sample-small{float:left;border-radius:50%;height:15px;width:15px;margin:12% 5px 5px}.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-light-grey-3{background-color:#ebebeb}.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}.card-item-wrapper{position:relative;overflow:hidden;box-shadow:0 4px 4px rgba(0,0,0,.25);height:407px;background:#fff}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:203.5px;display:flex;justify-content:center;align-items:center}.card-item-wrapper .card-item{transition:.2s;transform-origin:bottom;animation-duration:2s;animation-iteration-count:1}.card-item-wrapper .card-item .card-content-wrapper{padding:30px;background-color:#fff}.card-item-wrapper .card-title-wrap{margin-bottom:11px}.card-item-wrapper .card-title-wrap h5{font-family:neuzeit_groteskregular,sans-serif;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.card-item-wrapper .card-description h3{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-item-wrapper .card-icon{padding-right:8px}.snap-in{animation:snap-in .75s ease-in-out 0s}@keyframes snap-in{0%{height:407px}25%{height:190px}50%{height:195px}to{height:200px}}.snap-in-content{animation:snap-in-content .75s ease-in-out 0s}@keyframes snap-in-content{0%{transform:translateY(200px);height:0;opacity:0}25%{opacity:1}50%{transform:translateY(-20px);opacity:1}to{transform:translateY(0);height:220px;opacity:1}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], isClickable: [{
@@ -3258,7 +3307,7 @@ class ColorSwatchComponent {
     }
 }
 ColorSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColorSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ColorSwatchComponent, selector: "symphony-ui-color-explorer", inputs: { colorSwatchModel: "colorSwatchModel" }, ngImport: i0, template: "<div class=\"sfx-ui-color-explorer\">\n  <symphony-color-sample\n    [color]=\"colorSwatchModel.color\"\n  ></symphony-color-sample>\n  <symphony-h3\n    [text]=\"colorSwatchModel.colorName\"\n  ></symphony-h3>\n  <symphony-paragraph [text]=\"description\"></symphony-paragraph>\n</div>\n", styles: [""], components: [{ type: ColorSampleComponent, selector: "symphony-color-sample", inputs: ["color"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }] });
+ColorSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ColorSwatchComponent, selector: "symphony-ui-color-explorer", inputs: { colorSwatchModel: "colorSwatchModel" }, ngImport: i0, template: "<div class=\"sfx-ui-color-explorer\">\n  <symphony-color-sample\n    [color]=\"colorSwatchModel.color\"\n  ></symphony-color-sample>\n  <symphony-h3\n    [text]=\"colorSwatchModel.colorName\"\n  ></symphony-h3>\n  <symphony-paragraph [text]=\"description\"></symphony-paragraph>\n</div>\n", styles: [""], components: [{ type: ColorSampleComponent, selector: "symphony-color-sample", inputs: ["color", "isSmall"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSwatchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-ui-color-explorer', template: "<div class=\"sfx-ui-color-explorer\">\n  <symphony-color-sample\n    [color]=\"colorSwatchModel.color\"\n  ></symphony-color-sample>\n  <symphony-h3\n    [text]=\"colorSwatchModel.colorName\"\n  ></symphony-h3>\n  <symphony-paragraph [text]=\"description\"></symphony-paragraph>\n</div>\n", styles: [""] }]
@@ -5899,10 +5948,10 @@ class InputEditableTextComponent {
     }
 }
 InputEditableTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputEditableTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: { model: "model", type: "type" }, outputs: { confirm: "confirm", validate: "validate", editMode: "editMode" }, ngImport: i0, template: "<div *ngIf=\"model\">\n  <div *ngIf=\"!model.isInEditMode\">\n    <div class=\"flex sfx-pt-10\">\n      <div>\n        <symphony-paragraph\n          >{{ model.inputMask\n          }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n        >\n      </div>\n      <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n        <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n      </div>\n      <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"model.isInEditMode\"\n    class=\"editMode\"\n    [ngClass]=\"{\n      invalid: model.isInvalid\n    }\"\n  >\n    <span class=\"sfx-pr-10\"\n      ><input\n        type=\"{{ type }}\"\n        *ngIf=\"maxMinPlaceholder\"\n        [placeholder]=\"maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n      <input\n        type=\"{{ type }}\"\n        *ngIf=\"!maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n    </span>\n    <span class=\"edit-i-postion\"\n      ><symphony-icon\n        [ngClass]=\"{\n          'invalid-confirm': model.isInvalid\n        }\"\n        [icon]=\"'si-confirmation'\"\n        (click)=\"onConfirmClick()\"\n      ></symphony-icon\n    ></span>\n    <span class=\"sfx-ml-10 edit-i-postion\"\n      ><symphony-icon\n        [icon]=\"'si-close-modal'\"\n        (click)=\"onCloseClick()\"\n      ></symphony-icon\n    ></span>\n  </div>\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-light-grey-3{background-color:#ebebeb}.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}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::-moz-placeholder{color:#bababa}.editMode .min-max-placeholder:-ms-input-placeholder{color:#bababa}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "number": i1.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
+InputEditableTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: { model: "model", type: "type" }, outputs: { confirm: "confirm", validate: "validate", editMode: "editMode" }, ngImport: i0, template: "<div *ngIf=\"model\">\n  <div *ngIf=\"!model.isInEditMode\">\n    <div class=\"flex sfx-pt-10\">\n      <div>\n        <symphony-paragraph\n          >{{ model.inputMask\n          }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n        >\n      </div>\n      <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n        <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n      </div>\n      <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"model.isInEditMode\"\n    class=\"editMode\"\n    [ngClass]=\"{\n      invalid: model.isInvalid\n    }\"\n  >\n    <span class=\"sfx-pr-10\"\n      ><input\n        type=\"{{ type }}\"\n        *ngIf=\"maxMinPlaceholder\"\n        [placeholder]=\"maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n      <input\n        type=\"{{ type }}\"\n        *ngIf=\"!maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n    </span>\n    <span class=\"edit-i-postion\"\n      ><symphony-icon\n        [ngClass]=\"{\n          'invalid-confirm': model.isInvalid\n        }\"\n        [icon]=\"'si-confirmation'\"\n        (click)=\"onConfirmClick()\"\n      ></symphony-icon\n    ></span>\n    <span class=\"sfx-ml-10 edit-i-postion\"\n      ><symphony-icon\n        [icon]=\"'si-close-modal'\"\n        (click)=\"onCloseClick()\"\n      ></symphony-icon\n    ></span>\n  </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.color-sample-small{float:left;border-radius:50%;height:15px;width:15px;margin:12% 5px 5px}.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-light-grey-3{background-color:#ebebeb}.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}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::-moz-placeholder{color:#bababa}.editMode .min-max-placeholder:-ms-input-placeholder{color:#bababa}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "number": i1.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-input-editable-text', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\">\n  <div *ngIf=\"!model.isInEditMode\">\n    <div class=\"flex sfx-pt-10\">\n      <div>\n        <symphony-paragraph\n          >{{ model.inputMask\n          }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n        >\n      </div>\n      <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n        <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n      </div>\n      <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"model.isInEditMode\"\n    class=\"editMode\"\n    [ngClass]=\"{\n      invalid: model.isInvalid\n    }\"\n  >\n    <span class=\"sfx-pr-10\"\n      ><input\n        type=\"{{ type }}\"\n        *ngIf=\"maxMinPlaceholder\"\n        [placeholder]=\"maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n      <input\n        type=\"{{ type }}\"\n        *ngIf=\"!maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n    </span>\n    <span class=\"edit-i-postion\"\n      ><symphony-icon\n        [ngClass]=\"{\n          'invalid-confirm': model.isInvalid\n        }\"\n        [icon]=\"'si-confirmation'\"\n        (click)=\"onConfirmClick()\"\n      ></symphony-icon\n    ></span>\n    <span class=\"sfx-ml-10 edit-i-postion\"\n      ><symphony-icon\n        [icon]=\"'si-close-modal'\"\n        (click)=\"onCloseClick()\"\n      ></symphony-icon\n    ></span>\n  </div>\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-light-grey-3{background-color:#ebebeb}.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}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::-moz-placeholder{color:#bababa}.editMode .min-max-placeholder:-ms-input-placeholder{color:#bababa}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"] }]
+            args: [{ selector: 'symphony-input-editable-text', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\">\n  <div *ngIf=\"!model.isInEditMode\">\n    <div class=\"flex sfx-pt-10\">\n      <div>\n        <symphony-paragraph\n          >{{ model.inputMask\n          }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n        >\n      </div>\n      <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n        <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n      </div>\n      <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"model.isInEditMode\"\n    class=\"editMode\"\n    [ngClass]=\"{\n      invalid: model.isInvalid\n    }\"\n  >\n    <span class=\"sfx-pr-10\"\n      ><input\n        type=\"{{ type }}\"\n        *ngIf=\"maxMinPlaceholder\"\n        [placeholder]=\"maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n      <input\n        type=\"{{ type }}\"\n        *ngIf=\"!maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n    </span>\n    <span class=\"edit-i-postion\"\n      ><symphony-icon\n        [ngClass]=\"{\n          'invalid-confirm': model.isInvalid\n        }\"\n        [icon]=\"'si-confirmation'\"\n        (click)=\"onConfirmClick()\"\n      ></symphony-icon\n    ></span>\n    <span class=\"sfx-ml-10 edit-i-postion\"\n      ><symphony-icon\n        [icon]=\"'si-close-modal'\"\n        (click)=\"onCloseClick()\"\n      ></symphony-icon\n    ></span>\n  </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.color-sample-small{float:left;border-radius:50%;height:15px;width:15px;margin:12% 5px 5px}.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-light-grey-3{background-color:#ebebeb}.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}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::-moz-placeholder{color:#bababa}.editMode .min-max-placeholder:-ms-input-placeholder{color:#bababa}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], type: [{
@@ -7577,8 +7626,8 @@ class SettingDetailPageComponent {
         this.outreachSaveClicked = new EventEmitter();
         this.pageReloadClicked = new EventEmitter();
     }
-    onDetailNavigationClick(model) {
-        this.detailNavigationClicked.emit(model);
+    onDetailNavigationClick(event) {
+        this.detailNavigationClicked.emit(event);
     }
     onOutreachValueChange(model) {
         this.outreachValueChanged.emit(model);
@@ -7591,10 +7640,10 @@ class SettingDetailPageComponent {
     }
 }
 SettingDetailPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingDetailPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SettingDetailPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingDetailPageComponent, selector: "symphony-setting-detail-page", inputs: { model: "model" }, outputs: { detailNavigationClicked: "detailNavigationClicked", outreachValueChanged: "outreachValueChanged", outreachSaveClicked: "outreachSaveClicked", pageReloadClicked: "pageReloadClicked" }, ngImport: i0, template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list\n    sfx-nav\n    [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick(model)\"\n  ></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-editable-setting-partial-page\n      [partialPageModel]=\"model.partialPageModel\"\n      (editableSettingValueChanged)=\"onOutreachValueChange($event)\"\n      (saveClicked)=\"onOutreachSaveClick(model)\"\n      [isLoadingPartialPage]=\"model.isLoadingPartialPage\"\n      [errorPageState]=\"model.errorPageState\"\n      (reloadClicked)=\"onPageReloadClick($event)\"\n    >\n    <ng-content ngProjectAs=\"[dropdown-dropzone]\" select=\"[dropdown-dropzone]\"></ng-content>\n  </symphony-editable-setting-partial-page>\n  </section>\n</symphony-setting-details-template>\n", styles: [""], components: [{ type: SettingDetailsTemplateComponent, selector: "symphony-setting-details-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"], outputs: ["breadcrumbClicked"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: SettingsDetailNavigationListComponent, selector: "symphony-settings-detail-navigation-list", inputs: ["navigationList"], outputs: ["navigationItemClicked"] }, { type: EditableSettingPartialPageComponent, selector: "symphony-editable-setting-partial-page", inputs: ["partialPageModel", "isLoadingPartialPage", "errorPageState"], outputs: ["editableSettingValueChanged", "saveClicked", "reloadClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SettingDetailPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingDetailPageComponent, selector: "symphony-setting-detail-page", inputs: { model: "model" }, outputs: { detailNavigationClicked: "detailNavigationClicked", outreachValueChanged: "outreachValueChanged", outreachSaveClicked: "outreachSaveClicked", pageReloadClicked: "pageReloadClicked" }, ngImport: i0, template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list\n    sfx-nav\n    [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick($event)\"\n  ></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-editable-setting-partial-page\n      [partialPageModel]=\"model.partialPageModel\"\n      (editableSettingValueChanged)=\"onOutreachValueChange($event)\"\n      (saveClicked)=\"onOutreachSaveClick(model)\"\n      [isLoadingPartialPage]=\"model.isLoadingPartialPage\"\n      [errorPageState]=\"model.errorPageState\"\n      (reloadClicked)=\"onPageReloadClick($event)\"\n    >\n    <ng-content ngProjectAs=\"[dropdown-dropzone]\" select=\"[dropdown-dropzone]\"></ng-content>\n  </symphony-editable-setting-partial-page>\n  </section>\n</symphony-setting-details-template>\n", styles: [""], components: [{ type: SettingDetailsTemplateComponent, selector: "symphony-setting-details-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"], outputs: ["breadcrumbClicked"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: SettingsDetailNavigationListComponent, selector: "symphony-settings-detail-navigation-list", inputs: ["navigationList"], outputs: ["navigationItemClicked"] }, { type: EditableSettingPartialPageComponent, selector: "symphony-editable-setting-partial-page", inputs: ["partialPageModel", "isLoadingPartialPage", "errorPageState"], outputs: ["editableSettingValueChanged", "saveClicked", "reloadClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingDetailPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-setting-detail-page', template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list\n    sfx-nav\n    [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick(model)\"\n  ></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-editable-setting-partial-page\n      [partialPageModel]=\"model.partialPageModel\"\n      (editableSettingValueChanged)=\"onOutreachValueChange($event)\"\n      (saveClicked)=\"onOutreachSaveClick(model)\"\n      [isLoadingPartialPage]=\"model.isLoadingPartialPage\"\n      [errorPageState]=\"model.errorPageState\"\n      (reloadClicked)=\"onPageReloadClick($event)\"\n    >\n    <ng-content ngProjectAs=\"[dropdown-dropzone]\" select=\"[dropdown-dropzone]\"></ng-content>\n  </symphony-editable-setting-partial-page>\n  </section>\n</symphony-setting-details-template>\n", styles: [""] }]
+            args: [{ selector: 'symphony-setting-detail-page', template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list\n    sfx-nav\n    [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick($event)\"\n  ></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-editable-setting-partial-page\n      [partialPageModel]=\"model.partialPageModel\"\n      (editableSettingValueChanged)=\"onOutreachValueChange($event)\"\n      (saveClicked)=\"onOutreachSaveClick(model)\"\n      [isLoadingPartialPage]=\"model.isLoadingPartialPage\"\n      [errorPageState]=\"model.errorPageState\"\n      (reloadClicked)=\"onPageReloadClick($event)\"\n    >\n    <ng-content ngProjectAs=\"[dropdown-dropzone]\" select=\"[dropdown-dropzone]\"></ng-content>\n  </symphony-editable-setting-partial-page>\n  </section>\n</symphony-setting-details-template>\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], detailNavigationClicked: [{
@@ -7665,5 +7714,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarComponent, ActionBarJobListComponent, ActionBarJobListModule, ActionBarModule, ActionBarSelectionCounterComponent, ActionBarSelectionCounterModule, ActivityScoreLevel, AdvanceFilterSelectedCounterComponent, AdvanceFilterSelectedCounterModule, AdvanceSearchModalComponent, AdvanceSearchModalModule, AdvertiseModalComponent, AdvertiseModalModule, AdvertisedJobPostingsListPageComponent, AdvertisedJobPostingsListPageModule, AdvertisedJobPostingsModalComponent, AdvertisedJobPostingsModalModule, AdvertisedJobsCostComponent, AdvertisedJobsCostModule, AlertDuration, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, ButtonV2Component, ButtonV2Module, CapitalizeFirstCharacterPipe, CardComponent, CardListComponent, CardListModule, CardModule, CharacterCounterComponent, CharacterCounterModule, ColorNames, ConfirmationModalComponent, ConfirmationModalModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, DocumentManagementItemComponent, DocumentManagementItemModule, DocumentManagementListComponent, DocumentManagementListModule, EditableSettingItemComponent, EditableSettingItemListComponent, EditableSettingItemListModule, EditableSettingItemModule, EditableSettingKey, EditableSettingPartialPageComponent, EditableSettingPartialPageModule, EmailValidator, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FeedbackRequestListPageComponent, FeedbackRequestListPageModule, FileUploadComponent, FileUploadModule, FileUploadV2Component, FileUploadV2Module, FilterAreaComponent, FilterAreaModule, FormattedCounterComponent, FormattedCounterModule, FrameworkModule, GridActionsComponent, GridActionsModule, GridCellClickableComponent, GridCellClickableModule, GridCellLoaderModule, GridComponent, GridControlsComponent, GridControlsModule, GridDownloadComponent, GridDownloadModule, GridLoadingCellComponent, GridModule, GridNoRowsOverlayComponent, GridNoRowsOverlayModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWithTooltipComponent, IconWithTooltipModule, IconWrapperComponent, IconWrapperModule, Icons, InputCheckboxComponent, InputCheckboxListComponent, InputCheckboxListModule, InputCheckboxModule, InputChipsComponent, InputChipsModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputRadioComponent, InputRadioModule, InputSearchCheckboxDropdownComponent, InputSearchCheckboxDropdownModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, InputToggleComponent, InputToggleModule, JobListPageComponent, JobListPageModule, LibrariesPageComponent, LibrariesPageModule, LinkedinPremiumJobPostingsModalComponent, LinkedinPremiumJobPostingsModalModule, MoleculesModule, MultiSelectDataModule, MultiselectSearchCheckbox, NavigationLinkComponent, NavigationLinkModule, NotificationsComponent, NotificationsModule, OrganismsModule, OverflowTextComponent, OverflowTextModule, OverflowTextTooltipComponent, OverflowTextTooltipModule, ParagraphComponent, ParagraphModule, PhaserCardComponent, PhaserCardModule, PhaserComponent, PhaserModule, PillComponent, PillModule, PillsComponent, PillsModule, PipeModule, RelevanceScoreComponent, RelevanceScoreModule, SettingDetailPageComponent, SettingDetailPageModule, SettingListPageComponent, SettingListPageModule, SettingsDetailNavigationItemComponent, SettingsDetailNavigationItemModule, SettingsDetailNavigationListComponent, SettingsDetailNavigationListModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, SidebarNavigationComponent, SidebarNavigationModule, SidebarNavigationV2Component, SidebarNavigationV2Module, TabsComponent, TabsModules, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TrimIdPipe, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, VerticalSeparatorComponent, VerticalSeparatorModule, gridType };
+export { ActionBarComponent, ActionBarJobListComponent, ActionBarJobListModule, ActionBarModule, ActionBarSelectionCounterComponent, ActionBarSelectionCounterModule, ActivityScoreLevel, AdvanceFilterSelectedCounterComponent, AdvanceFilterSelectedCounterModule, AdvanceSearchModalComponent, AdvanceSearchModalModule, AdvertiseModalComponent, AdvertiseModalModule, AdvertisedJobPostingsListPageComponent, AdvertisedJobPostingsListPageModule, AdvertisedJobPostingsModalComponent, AdvertisedJobPostingsModalModule, AdvertisedJobsCostComponent, AdvertisedJobsCostModule, AlertDuration, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, ButtonV2Component, ButtonV2Module, CapitalizeFirstCharacterPipe, CardComponent, CardListComponent, CardListModule, CardModule, CharacterCounterComponent, CharacterCounterModule, ColorNames, ColoredTextIndicatorComponent, ColoredTextIndicatorModule, ConfirmationModalComponent, ConfirmationModalModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, DocumentManagementItemComponent, DocumentManagementItemModule, DocumentManagementListComponent, DocumentManagementListModule, EditableSettingItemComponent, EditableSettingItemListComponent, EditableSettingItemListModule, EditableSettingItemModule, EditableSettingKey, EditableSettingPartialPageComponent, EditableSettingPartialPageModule, EmailValidator, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FeedbackRequestListPageComponent, FeedbackRequestListPageModule, FileUploadComponent, FileUploadModule, FileUploadV2Component, FileUploadV2Module, FilterAreaComponent, FilterAreaModule, FormattedCounterComponent, FormattedCounterModule, FrameworkModule, GridActionsComponent, GridActionsModule, GridCellClickableComponent, GridCellClickableModule, GridCellLoaderModule, GridComponent, GridControlsComponent, GridControlsModule, GridDownloadComponent, GridDownloadModule, GridLoadingCellComponent, GridModule, GridNoRowsOverlayComponent, GridNoRowsOverlayModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWithTooltipComponent, IconWithTooltipModule, IconWrapperComponent, IconWrapperModule, Icons, InputCheckboxComponent, InputCheckboxListComponent, InputCheckboxListModule, InputCheckboxModule, InputChipsComponent, InputChipsModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputRadioComponent, InputRadioModule, InputSearchCheckboxDropdownComponent, InputSearchCheckboxDropdownModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, InputToggleComponent, InputToggleModule, JobListPageComponent, JobListPageModule, LibrariesPageComponent, LibrariesPageModule, LinkedinPremiumJobPostingsModalComponent, LinkedinPremiumJobPostingsModalModule, MoleculesModule, MultiSelectDataModule, MultiselectSearchCheckbox, NavigationLinkComponent, NavigationLinkModule, NotificationsComponent, NotificationsModule, OrganismsModule, OverflowTextComponent, OverflowTextModule, OverflowTextTooltipComponent, OverflowTextTooltipModule, ParagraphComponent, ParagraphModule, PhaserCardComponent, PhaserCardModule, PhaserComponent, PhaserModule, PillComponent, PillModule, PillsComponent, PillsModule, PipeModule, RelevanceScoreComponent, RelevanceScoreModule, SettingDetailPageComponent, SettingDetailPageModule, SettingListPageComponent, SettingListPageModule, SettingsDetailNavigationItemComponent, SettingsDetailNavigationItemModule, SettingsDetailNavigationListComponent, SettingsDetailNavigationListModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, SidebarNavigationComponent, SidebarNavigationModule, SidebarNavigationV2Component, SidebarNavigationV2Module, TabsComponent, TabsModules, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TrimIdPipe, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, VerticalSeparatorComponent, VerticalSeparatorModule, gridType };
 //# sourceMappingURL=symphony-talent-component-library-projects-component-library.mjs.map