@symphony-talent/component-library 4.159.0 → 4.161.0

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

@@ -11,14 +11,14 @@ import * as i1$3 from 'ag-grid-angular';
 import { AgGridModule } from 'ag-grid-angular';
 import { BrowserModule } from '@angular/platform-browser';
 import { LicenseManager } from 'ag-grid-enterprise';
-import * as i3 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
 import { Subject, timer } from 'rxjs';
 import { debounceTime, delay } from 'rxjs/operators';
+import * as i3 from 'ngx-bootstrap/popover';
+import { PopoverModule } from 'ngx-bootstrap/popover';
 import * as i1$4 from 'ngx-chips';
 import { TagInputModule } from 'ngx-chips';
-import * as i8 from 'ngx-bootstrap/popover';
-import { PopoverModule } from 'ngx-bootstrap/popover';
 import * as i1$5 from 'ngx-bootstrap/tabs';
 import { TabsModule } from 'ngx-bootstrap/tabs';
 import * as i1$6 from 'ngx-bootstrap/accordion';
@@ -1745,10 +1745,10 @@ class InputTextComponent {
     }
 }
 InputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextComponent, selector: "symphony-input-text", inputs: { placeholder: "placeholder", icon: "icon", label: "label", isInverse: "isInverse", size: "size", value: "value", maxlength: "maxlength", isDisabled: "isDisabled" }, outputs: { textChange: "textChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</label>\n  <div class=\"sfx-p-5\">\n    <input\n      #input\n      type=\"text\"\n      name=\"input-text\"\n      class=\"input-text\"\n      autocomplete=\"off\"\n      placeholder=\"{{ placeholder }}\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onTextChange($event)\"\n      [attr.maxLength]=\"maxlength !== undefined ? maxlength : null\"\n      [disabled]=\"isDisabled\"\n    />\n    <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n  </div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#000}.input-text-wrap.input-secondary .input-text{background-color:#fff;border-color:#334860}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#000}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#000}.input-text-wrap.input-secondary .input-text::placeholder{color:#000}.input-text-wrap .input-text-label{display:block;font-weight:500;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #334860;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap .input-text:disabled{background-color:#f0f0f0;border:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
+InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextComponent, selector: "symphony-input-text", inputs: { placeholder: "placeholder", icon: "icon", label: "label", isInverse: "isInverse", size: "size", value: "value", maxlength: "maxlength", isDisabled: "isDisabled", textInfo: "textInfo", textLink: "textLink", textClick: "textClick" }, outputs: { textChange: "textChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "textTemplateHide", first: true, predicate: ["textTemplateHide"], descendants: true }], ngImport: i0, template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label [ngClass]=\"{'sfx-d-inline-block sfx-mr-10': textInfo}\" for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</label><i\n  *ngIf=\"textInfo\"\n  class=\"si-info sfx-cursor-pointer\"\n  [popover]=\"textTemplate\"\n  placement=\"bottom\"\n  containerClass=\"info-popover\"\n  [outsideClick]=\"true\"\n  #textTemplateHide=\"bs-popover\"\n></i>\n<ng-template #textTemplate\n  ><div>{{textInfo}} <a [href]=\"textLink\" target='_blank' (click)='textTemplateHide.hide()'>{{textClick}}</a></div>\n</ng-template>\n  <div class=\"sfx-p-5\">\n    <input\n      #input\n      type=\"text\"\n      name=\"input-text\"\n      class=\"input-text\"\n      autocomplete=\"off\"\n      placeholder=\"{{ placeholder }}\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onTextChange($event)\"\n      [attr.maxLength]=\"maxlength !== undefined ? maxlength : null\"\n      [disabled]=\"isDisabled\"\n    />\n    <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n  </div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#000}.input-text-wrap.input-secondary .input-text{background-color:#fff;border-color:#334860}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#000}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#000}.input-text-wrap.input-secondary .input-text::placeholder{color:#000}.input-text-wrap .input-text-label{display:block;font-weight:500;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text-label.sfx-d-inline-block{display:inline-block}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #334860;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap .input-text:disabled{background-color:#f0f0f0;border:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-input-text', template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</label>\n  <div class=\"sfx-p-5\">\n    <input\n      #input\n      type=\"text\"\n      name=\"input-text\"\n      class=\"input-text\"\n      autocomplete=\"off\"\n      placeholder=\"{{ placeholder }}\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onTextChange($event)\"\n      [attr.maxLength]=\"maxlength !== undefined ? maxlength : null\"\n      [disabled]=\"isDisabled\"\n    />\n    <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n  </div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#000}.input-text-wrap.input-secondary .input-text{background-color:#fff;border-color:#334860}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#000}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#000}.input-text-wrap.input-secondary .input-text::placeholder{color:#000}.input-text-wrap .input-text-label{display:block;font-weight:500;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #334860;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap .input-text:disabled{background-color:#f0f0f0;border:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"] }]
+            args: [{ selector: 'symphony-input-text', template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label [ngClass]=\"{'sfx-d-inline-block sfx-mr-10': textInfo}\" for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</label><i\n  *ngIf=\"textInfo\"\n  class=\"si-info sfx-cursor-pointer\"\n  [popover]=\"textTemplate\"\n  placement=\"bottom\"\n  containerClass=\"info-popover\"\n  [outsideClick]=\"true\"\n  #textTemplateHide=\"bs-popover\"\n></i>\n<ng-template #textTemplate\n  ><div>{{textInfo}} <a [href]=\"textLink\" target='_blank' (click)='textTemplateHide.hide()'>{{textClick}}</a></div>\n</ng-template>\n  <div class=\"sfx-p-5\">\n    <input\n      #input\n      type=\"text\"\n      name=\"input-text\"\n      class=\"input-text\"\n      autocomplete=\"off\"\n      placeholder=\"{{ placeholder }}\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onTextChange($event)\"\n      [attr.maxLength]=\"maxlength !== undefined ? maxlength : null\"\n      [disabled]=\"isDisabled\"\n    />\n    <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n  </div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#000}.input-text-wrap.input-secondary .input-text{background-color:#fff;border-color:#334860}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#000}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#000}.input-text-wrap.input-secondary .input-text::placeholder{color:#000}.input-text-wrap .input-text-label{display:block;font-weight:500;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text-label.sfx-d-inline-block{display:inline-block}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #334860;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap .input-text:disabled{background-color:#f0f0f0;border:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
                 type: Input
             }], icon: [{
@@ -1765,23 +1765,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Input
             }], isDisabled: [{
                 type: Input
+            }], textInfo: [{
+                type: Input
+            }], textLink: [{
+                type: Input
+            }], textClick: [{
+                type: Input
             }], textChange: [{
                 type: Output
             }], input: [{
                 type: ViewChild,
                 args: ['input', { static: false }]
+            }], textTemplateHide: [{
+                type: ViewChild,
+                args: ['textTemplateHide']
             }] } });
 
 class InputTextModule {
 }
 InputTextModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, declarations: [InputTextComponent], imports: [CommonModule, FormsModule, IconModule], exports: [InputTextComponent] });
-InputTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, imports: [[CommonModule, FormsModule, IconModule]] });
+InputTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, declarations: [InputTextComponent], imports: [CommonModule, FormsModule, IconModule, i3.PopoverModule], exports: [InputTextComponent] });
+InputTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, imports: [[CommonModule, FormsModule, IconModule, PopoverModule.forRoot()]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [InputTextComponent],
-                    imports: [CommonModule, FormsModule, IconModule],
+                    imports: [CommonModule, FormsModule, IconModule, PopoverModule.forRoot()],
                     exports: [InputTextComponent],
                 }]
         }] });
@@ -1795,7 +1804,7 @@ class InputTextareaComponent {
     }
 }
 InputTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextareaComponent, selector: "symphony-input-textarea", inputs: { model: "model", isDisabled: "isDisabled", currentCount: "currentCount", placeholder: "placeholder", rows: "rows" }, outputs: { textAreaChanged: "textAreaChanged" }, ngImport: i0, template: "<textarea\n  id=\"input-textarea\"\n  class=\"input-textarea\"\n  [rows]=\"rows\"\n  [maxLength]=\"model.maxCount\"\n  [placeholder]=\"placeholder\"\n  [(ngModel)]=\"model.value\"\n  (ngModelChange)=\"onValueChanged($event)\"\n  [disabled]=\"isDisabled\"\n></textarea>\n", styles: [".input-textarea{padding:.3rem;width:100%;background:#FFFFFF;border-radius:4px;resize:none;border:1px solid #5B6D80}.input-textarea:focus-visible{outline:none}\n"], directives: [{ 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"] }] });
+InputTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextareaComponent, selector: "symphony-input-textarea", inputs: { model: "model", isDisabled: "isDisabled", currentCount: "currentCount", placeholder: "placeholder", rows: "rows" }, outputs: { textAreaChanged: "textAreaChanged" }, ngImport: i0, template: "<textarea\n  id=\"input-textarea\"\n  class=\"input-textarea\"\n  [rows]=\"rows\"\n  [maxLength]=\"model.maxCount\"\n  [placeholder]=\"placeholder\"\n  [(ngModel)]=\"model.value\"\n  (ngModelChange)=\"onValueChanged($event)\"\n  [disabled]=\"isDisabled\"\n></textarea>\n", styles: [".input-textarea{padding:.3rem;width:100%;background:#FFFFFF;border-radius:4px;resize:none;border:1px solid #5B6D80}.input-textarea:focus-visible{outline:none}\n"], directives: [{ type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-input-textarea', template: "<textarea\n  id=\"input-textarea\"\n  class=\"input-textarea\"\n  [rows]=\"rows\"\n  [maxLength]=\"model.maxCount\"\n  [placeholder]=\"placeholder\"\n  [(ngModel)]=\"model.value\"\n  (ngModelChange)=\"onValueChanged($event)\"\n  [disabled]=\"isDisabled\"\n></textarea>\n", styles: [".input-textarea{padding:.3rem;width:100%;background:#FFFFFF;border-radius:4px;resize:none;border:1px solid #5B6D80}.input-textarea:focus-visible{outline:none}\n"] }]
@@ -1948,7 +1957,7 @@ class InputChipsComponent {
     }
 }
 InputChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputChipsComponent, selector: "symphony-input-chips", inputs: { chips: "chips", autocompleteList: "autocompleteList", validators: "validators", asyncValidators: "asyncValidators", errorMessages: "errorMessages", controlName: "controlName", form: "form", label: "label", isDisabled: "isDisabled", validationMessage: "validationMessage" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n  <label for=\"item\" *ngIf=\"label\" class=\"input-label\">{{ label }} </label>\n  <tag-input\n    #input\n    class=\"sfx-chips\"\n    [formControlName]=\"controlName\"\n    [asyncValidators]=\"asyncValidators\"\n    [errorMessages]=\"errorMessages\"\n    [addOnBlur]=\"true\"\n    [@.disabled]=\"isDisabled\"\n    (onAdd)=\"onAdd($event)\"\n    (onRemove)=\"onRemove($event)\"\n  >\n    <ng-template let-item=\"item\" let-index=\"index\">\n      <span>\n        <symphony-chip\n          [chipLabel]=\"item.display\"\n          [hasError]=\"item.hasError\"\n          [hasClose]=\"true\"\n          (removeChip)=\"input.removeItem(item, index)\"\n        >\n        </symphony-chip>\n      </span>\n    </ng-template>\n\n    <div class=\"error-message\">{{ validationMessage }}</div>\n    <tag-input-dropdown\n      [showDropdownIfEmpty]=\"true\"\n      [autocompleteItems]=\"autocompleteList\"\n      [appendToBody]=\"false\"\n    >\n      <ng-template let-item=\"item\" let-index=\"index\">\n        {{ item.display }}\n      </ng-template>\n    </tag-input-dropdown>\n  </tag-input>\n  <input type=\"hidden\" [formControlName]=\"controlErrorCount\" value=\"0\" />\n</div>\n", styles: [".sfx .input-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px}.sfx .sfx-chips .ng2-tag-input{border-bottom:0;min-height:auto;border:1px solid #d0d0d0;border-radius:4px;padding:4px 0 0 4px;max-height:110px;height:100%;overflow-y:auto}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--focused,.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d0d0d0}.sfx .sfx-chips .ng2-tag-input__text-input{padding:0;height:30px;font-family:neuzeit_groteskregular,sans-serif}.sfx .sfx-chips .ng2-tag-input__text-input::-moz-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input:-ms-input-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input::placeholder{text-indent:-9999px}.sfx .sfx-chips tag,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active{font-family:neuzeit_groteskregular,sans-serif;line-height:inherit;background:none;margin:0 0 5px;padding:0;height:auto}.sfx .sfx-chips tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):focus,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(.readonly):not(.tag--editing):focus{background:none;color:#fff;cursor:default;box-shadow:none}.sfx .sfx-chips .error-message{color:#f0001e;font-size:14px}.sfx .sfx-chips .ng2-dropdown-menu{position:relative!important;width:100%;display:block;top:0!important;left:0!important;margin-top:0;border:1px solid #d0d0d0;border-width:0 1px 1px 1px;box-shadow:0 10px 10px rgba(0,0,0,.2);max-height:260px;padding-top:0}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item{font-family:neuzeit_groteskbold;letter-spacing:normal;max-height:40px;line-height:35px}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected,.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected:active{background:#000;color:#fff}\n"], components: [{ type: i1$4.TagInputComponent, selector: "tag-input", inputs: ["separatorKeys", "separatorKeyCodes", "placeholder", "secondaryPlaceholder", "maxItems", "validators", "asyncValidators", "onlyFromAutocomplete", "errorMessages", "theme", "onTextChangeDebounce", "inputId", "inputClass", "clearOnBlur", "hideForm", "addOnBlur", "addOnPaste", "pasteSplitPattern", "blinkIfDupe", "removable", "editable", "allowDupes", "modelAsStrings", "trimTags", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration", "inputText"], outputs: ["onAdd", "onRemove", "onSelect", "onFocus", "onBlur", "onTextChange", "onPaste", "onValidationError", "onTagEdited", "inputTextChange"] }, { type: ChipComponent, selector: "symphony-chip", inputs: ["chipLabel", "hasClose", "hasError"], outputs: ["removeChip"] }, { type: i1$4.TagInputDropdown, selector: "tag-input-dropdown", inputs: ["offset", "focusFirstElement", "showDropdownIfEmpty", "minimumTextLength", "limitItemsTo", "displayBy", "identifyBy", "matchingFn", "appendToBody", "keepOpen", "dynamicUpdate", "zIndex", "autocompleteItems", "autocompleteObservable"] }], directives: [{ type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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]" }], encapsulation: i0.ViewEncapsulation.None });
+InputChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputChipsComponent, selector: "symphony-input-chips", inputs: { chips: "chips", autocompleteList: "autocompleteList", validators: "validators", asyncValidators: "asyncValidators", errorMessages: "errorMessages", controlName: "controlName", form: "form", label: "label", isDisabled: "isDisabled", validationMessage: "validationMessage" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n  <label for=\"item\" *ngIf=\"label\" class=\"input-label\">{{ label }} </label>\n  <tag-input\n    #input\n    class=\"sfx-chips\"\n    [formControlName]=\"controlName\"\n    [asyncValidators]=\"asyncValidators\"\n    [errorMessages]=\"errorMessages\"\n    [addOnBlur]=\"true\"\n    [@.disabled]=\"isDisabled\"\n    (onAdd)=\"onAdd($event)\"\n    (onRemove)=\"onRemove($event)\"\n  >\n    <ng-template let-item=\"item\" let-index=\"index\">\n      <span>\n        <symphony-chip\n          [chipLabel]=\"item.display\"\n          [hasError]=\"item.hasError\"\n          [hasClose]=\"true\"\n          (removeChip)=\"input.removeItem(item, index)\"\n        >\n        </symphony-chip>\n      </span>\n    </ng-template>\n\n    <div class=\"error-message\">{{ validationMessage }}</div>\n    <tag-input-dropdown\n      [showDropdownIfEmpty]=\"true\"\n      [autocompleteItems]=\"autocompleteList\"\n      [appendToBody]=\"false\"\n    >\n      <ng-template let-item=\"item\" let-index=\"index\">\n        {{ item.display }}\n      </ng-template>\n    </tag-input-dropdown>\n  </tag-input>\n  <input type=\"hidden\" [formControlName]=\"controlErrorCount\" value=\"0\" />\n</div>\n", styles: [".sfx .input-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px}.sfx .sfx-chips .ng2-tag-input{border-bottom:0;min-height:auto;border:1px solid #d0d0d0;border-radius:4px;padding:4px 0 0 4px;max-height:110px;height:100%;overflow-y:auto}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--focused,.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d0d0d0}.sfx .sfx-chips .ng2-tag-input__text-input{padding:0;height:30px;font-family:neuzeit_groteskregular,sans-serif}.sfx .sfx-chips .ng2-tag-input__text-input::-moz-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input:-ms-input-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input::placeholder{text-indent:-9999px}.sfx .sfx-chips tag,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active{font-family:neuzeit_groteskregular,sans-serif;line-height:inherit;background:none;margin:0 0 5px;padding:0;height:auto}.sfx .sfx-chips tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):focus,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(.readonly):not(.tag--editing):focus{background:none;color:#fff;cursor:default;box-shadow:none}.sfx .sfx-chips .error-message{color:#f0001e;font-size:14px}.sfx .sfx-chips .ng2-dropdown-menu{position:relative!important;width:100%;display:block;top:0!important;left:0!important;margin-top:0;border:1px solid #d0d0d0;border-width:0 1px 1px 1px;box-shadow:0 10px 10px rgba(0,0,0,.2);max-height:260px;padding-top:0}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item{font-family:neuzeit_groteskbold;letter-spacing:normal;max-height:40px;line-height:35px}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected,.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected:active{background:#000;color:#fff}\n"], components: [{ type: i1$4.TagInputComponent, selector: "tag-input", inputs: ["separatorKeys", "separatorKeyCodes", "placeholder", "secondaryPlaceholder", "maxItems", "validators", "asyncValidators", "onlyFromAutocomplete", "errorMessages", "theme", "onTextChangeDebounce", "inputId", "inputClass", "clearOnBlur", "hideForm", "addOnBlur", "addOnPaste", "pasteSplitPattern", "blinkIfDupe", "removable", "editable", "allowDupes", "modelAsStrings", "trimTags", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration", "inputText"], outputs: ["onAdd", "onRemove", "onSelect", "onFocus", "onBlur", "onTextChange", "onPaste", "onValidationError", "onTagEdited", "inputTextChange"] }, { type: ChipComponent, selector: "symphony-chip", inputs: ["chipLabel", "hasClose", "hasError"], outputs: ["removeChip"] }, { type: i1$4.TagInputDropdown, selector: "tag-input-dropdown", inputs: ["offset", "focusFirstElement", "showDropdownIfEmpty", "minimumTextLength", "limitItemsTo", "displayBy", "identifyBy", "matchingFn", "appendToBody", "keepOpen", "dynamicUpdate", "zIndex", "autocompleteItems", "autocompleteObservable"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-input-chips', encapsulation: ViewEncapsulation.None, template: "<div [formGroup]=\"form\">\n  <label for=\"item\" *ngIf=\"label\" class=\"input-label\">{{ label }} </label>\n  <tag-input\n    #input\n    class=\"sfx-chips\"\n    [formControlName]=\"controlName\"\n    [asyncValidators]=\"asyncValidators\"\n    [errorMessages]=\"errorMessages\"\n    [addOnBlur]=\"true\"\n    [@.disabled]=\"isDisabled\"\n    (onAdd)=\"onAdd($event)\"\n    (onRemove)=\"onRemove($event)\"\n  >\n    <ng-template let-item=\"item\" let-index=\"index\">\n      <span>\n        <symphony-chip\n          [chipLabel]=\"item.display\"\n          [hasError]=\"item.hasError\"\n          [hasClose]=\"true\"\n          (removeChip)=\"input.removeItem(item, index)\"\n        >\n        </symphony-chip>\n      </span>\n    </ng-template>\n\n    <div class=\"error-message\">{{ validationMessage }}</div>\n    <tag-input-dropdown\n      [showDropdownIfEmpty]=\"true\"\n      [autocompleteItems]=\"autocompleteList\"\n      [appendToBody]=\"false\"\n    >\n      <ng-template let-item=\"item\" let-index=\"index\">\n        {{ item.display }}\n      </ng-template>\n    </tag-input-dropdown>\n  </tag-input>\n  <input type=\"hidden\" [formControlName]=\"controlErrorCount\" value=\"0\" />\n</div>\n", styles: [".sfx .input-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px}.sfx .sfx-chips .ng2-tag-input{border-bottom:0;min-height:auto;border:1px solid #d0d0d0;border-radius:4px;padding:4px 0 0 4px;max-height:110px;height:100%;overflow-y:auto}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--focused,.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d0d0d0}.sfx .sfx-chips .ng2-tag-input__text-input{padding:0;height:30px;font-family:neuzeit_groteskregular,sans-serif}.sfx .sfx-chips .ng2-tag-input__text-input::-moz-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input:-ms-input-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input::placeholder{text-indent:-9999px}.sfx .sfx-chips tag,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active{font-family:neuzeit_groteskregular,sans-serif;line-height:inherit;background:none;margin:0 0 5px;padding:0;height:auto}.sfx .sfx-chips tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):focus,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(.readonly):not(.tag--editing):focus{background:none;color:#fff;cursor:default;box-shadow:none}.sfx .sfx-chips .error-message{color:#f0001e;font-size:14px}.sfx .sfx-chips .ng2-dropdown-menu{position:relative!important;width:100%;display:block;top:0!important;left:0!important;margin-top:0;border:1px solid #d0d0d0;border-width:0 1px 1px 1px;box-shadow:0 10px 10px rgba(0,0,0,.2);max-height:260px;padding-top:0}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item{font-family:neuzeit_groteskbold;letter-spacing:normal;max-height:40px;line-height:35px}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected,.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected:active{background:#000;color:#fff}\n"] }]
@@ -2497,7 +2506,7 @@ class InputSearchCheckboxDropdownComponent {
     }
 }
 InputSearchCheckboxDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownComponent, deps: [{ token: CapitalizeFirstCharacterPipe }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-InputSearchCheckboxDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputSearchCheckboxDropdownComponent, selector: "symphony-input-search-checkbox-dropdown", inputs: { isDisabled: "isDisabled", multiSelectSearch: "multiSelectSearch", enablePlaceHolder: "enablePlaceHolder", scrollHeightPercentage: "scrollHeightPercentage", isLoadingData: "isLoadingData", isLoadingInitialData: "isLoadingInitialData", isInverse: "isInverse", size: "size", disableSearch: "disableSearch" }, outputs: { deselectItem: "deselectItem", selectItem: "selectItem", searchInputChange: "searchInputChange", selectionRetain: "selectionRetain", clearAll: "clearAll", conditionCheck: "conditionCheck", createNewItem: "createNewItem", scrollEnd: "scrollEnd", initializeDropdown: "initializeDropdown" }, viewQueries: [{ propertyName: "pop", first: true, predicate: ["pop"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n  <div\n    *ngIf=\"multiSelectSearch.componentHeading\"\n    class=\"sfx-filter-label sfx-d-inline-block\"\n  >\n    <b\n      >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n      <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n    </b>\n  </div>\n  <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n    <input\n      type=\"radio\"\n      id=\"radio-and-{{ conditionSelectionId }}\"\n      name=\"radio-and-{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' AND ')\"\n      [checked]=\"multiSelectSearch.condition === ' AND '\"\n    />\n    <label class=\"Font400\" for=\"radio-and-{{ conditionSelectionId }}\"\n      >and</label\n    >\n    <input\n      type=\"radio\"\n      id=\"radio-or-{{ conditionSelectionId }}\"\n      name=\"radio-or-{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' OR ')\"\n      [checked]=\"multiSelectSearch.condition === ' OR '\"\n    />\n    <label class=\"Font400\" for=\"radio-or-{{ conditionSelectionId }}\">or</label>\n  </div>\n  <div\n    class=\"sfx-custom-dropdown-wrap\"\n    [ngClass]=\"{ open: openDropdown }\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    (onShown)=\"toggleDropdown()\"\n    [insideClick]=\"true\"\n    (onHidden)=\"onOkClick(true)\"\n  >\n    <input\n      [ngClass]=\"{ 'invalid-control': isInvalid }\"\n      (click)=\"dropdown.isOpen = true\"\n      type=\"text\"\n      id=\"dropdown-search-{{ multiSelectSearch.componentHeading | trimId}}\"\n      [(ngModel)]=\"multiSelectSearch.searchInput\"\n      (ngModelChange)=\"onSearchInputChange()\"\n      dropdownToggle\n      popover=\"{{ popOverText() }}\"\n      containerClass=\"sfx-input-popover\"\n      triggers=\"\"\n      placement=\"top\"\n      #pop=\"bs-popover\"\n      (mouseenter)=\"showPop()\"\n      (mouseleave)=\"onPopMouseLeave()\"\n      (focus)=\"onFocusClick(true)\"\n      (blur)=\"onFocusClick(false)\"\n      class=\"sfx-placeholder\"\n      placeholder=\"{{\n        enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n      }}\"\n      autocomplete=\"off\"\n      [disabled]=\"isDisabled\"\n      [readonly]=\"disableSearch\"\n    />\n    <symphony-icon *ngIf=\"!disableSearch\" [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n    <div *dropdownMenu>\n      <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n        <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n          <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n          <symphony-input-toggle\n          [isToggled]=\"isAllToggled\"\n          [isInverse]=\"false\"\n          (toggleClick)=\"onToggleClick($event)\"\n          ></symphony-input-toggle>\n        </div>\n        <!-- Create And Add Tags -->\n        <div\n          class=\"sfx-create-new-items\"\n          *ngIf=\"\n            multiSelectSearch.labelCreateNewItems &&\n            multiSelectSearch.showCreateNewItems\n          \"\n          (click)=\"onCreateNewItem()\"\n          [ngClass]=\"{\n            'sfx-font-bold': multiSelectSearch.showCreateNewModal\n          }\"\n        >\n          {{ multiSelectSearch.labelCreateNewItems }}\n          <span\n            class=\"sfx-font-bold\"\n            *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n            >&nbsp;&apos;\n            {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}&apos;\n          </span>\n          <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n        </div>\n        <!-- Create And Add Tags ends here -->\n        <!-- selected list div -->\n        <div\n          class=\"sfx-dropdown-selected sfx-custom-scroll\"\n          *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n        >\n          <div\n            class=\"sfx-d-inline-block\"\n            *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n          >\n            <div\n              (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n              class=\"sfx-checkbox sfx-d-inline-block\"\n            >\n              <input\n                type=\"checkbox\"\n                checked\n                class=\"sfx-checkbox-input\"\n                id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n                >{{ selectedItem.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"selectedItem.additionalInfo\"\n                  class=\"selected-additional-info\"\n                >\n                  {{ selectedItem.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n        </div>\n        <!-- selected list div ends here -->\n        <!-- Search list  -->\n        <div\n          class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n          (scroll)=\"scrollHandler($event)\"\n          *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n        >\n          <div\n            id=\"dropdown-triggers-manually\"\n            *ngFor=\"\n              let filterDropdownOption of multiSelectSearch.searchedDropdownList\n            \"\n          >\n            <div class=\"sfx-checkbox\">\n              <input\n                type=\"checkbox\"\n                id=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name | trimId\n                }}\"\n                class=\"sfx-checkbox-input\"\n                [disabled]=\"multiSelectSearch.hasMaxSelections\"\n                (click)=\"\n                onSelectItem(filterDropdownOption); $event.stopPropagation()\n                \"\n                [(ngModel)]=\"filterDropdownOption.isChecked\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name | trimId\n                }}\"\n                >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"filterDropdownOption.additionalInfo\"\n                  class=\"additional-info\"\n                >\n                  {{ filterDropdownOption.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n          <div>\n            <symphony-sfx-loader\n              [hidden]=\"!isLoadingData\"\n            ></symphony-sfx-loader>\n          </div>\n        </div>\n        <symphony-sfx-loader\n          [hidden]=\"!isLoadingInitialData\"\n        ></symphony-sfx-loader>\n        <!-- search list ends here -->\n        <!-- Footer -->\n        <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n          <button\n            type=\"button\"\n            class=\"pull-left\"\n            [disabled]=\"\n              !(\n                multiSelectSearch.selectedDropdownList &&\n                multiSelectSearch.selectedDropdownList.length > 0\n              )\n            \"\n            (click)=\"onClearAllClick()\"\n          >\n            Clear All\n          </button>\n          <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n        </div>\n        <!-- End Footer -->\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"isInvalid\" class=\"error-message\">\n    Please select a valid option\n  </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder:-ms-input-placeholder{color:#000}.sfx-placeholder::-moz-placeholder{color:#000}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#ac4463}.invalid-control{border:1px solid #AC4463!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#E4E7EF;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#ffffff;color:#000}.sfx-custom-dropdown-wrap.open symphony-icon{color:#000}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:runda,sans-serif;font-weight:500}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#712ace;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:runda,sans-serif;font-weight:400;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:runda,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:runda,sans-serif;font-weight:500;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-custom-dropdown-wrap input{border-color:#5b6d80}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: 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: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { 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"] }, { type: i8.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "trimId": TrimIdPipe, "capitalizeFirstCharacter": CapitalizeFirstCharacterPipe } });
+InputSearchCheckboxDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputSearchCheckboxDropdownComponent, selector: "symphony-input-search-checkbox-dropdown", inputs: { isDisabled: "isDisabled", multiSelectSearch: "multiSelectSearch", enablePlaceHolder: "enablePlaceHolder", scrollHeightPercentage: "scrollHeightPercentage", isLoadingData: "isLoadingData", isLoadingInitialData: "isLoadingInitialData", isInverse: "isInverse", size: "size", disableSearch: "disableSearch" }, outputs: { deselectItem: "deselectItem", selectItem: "selectItem", searchInputChange: "searchInputChange", selectionRetain: "selectionRetain", clearAll: "clearAll", conditionCheck: "conditionCheck", createNewItem: "createNewItem", scrollEnd: "scrollEnd", initializeDropdown: "initializeDropdown" }, viewQueries: [{ propertyName: "pop", first: true, predicate: ["pop"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n  <div\n    *ngIf=\"multiSelectSearch.componentHeading\"\n    class=\"sfx-filter-label sfx-d-inline-block\"\n  >\n    <b\n      >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n      <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n    </b>\n  </div>\n  <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n    <input\n      type=\"radio\"\n      id=\"radio-and-{{ conditionSelectionId }}\"\n      name=\"radio-and-{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' AND ')\"\n      [checked]=\"multiSelectSearch.condition === ' AND '\"\n    />\n    <label class=\"Font400\" for=\"radio-and-{{ conditionSelectionId }}\"\n      >and</label\n    >\n    <input\n      type=\"radio\"\n      id=\"radio-or-{{ conditionSelectionId }}\"\n      name=\"radio-or-{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' OR ')\"\n      [checked]=\"multiSelectSearch.condition === ' OR '\"\n    />\n    <label class=\"Font400\" for=\"radio-or-{{ conditionSelectionId }}\">or</label>\n  </div>\n  <div\n    class=\"sfx-custom-dropdown-wrap\"\n    [ngClass]=\"{ open: openDropdown }\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    (onShown)=\"toggleDropdown()\"\n    [insideClick]=\"true\"\n    (onHidden)=\"onOkClick(true)\"\n  >\n    <input\n      [ngClass]=\"{ 'invalid-control': isInvalid }\"\n      (click)=\"dropdown.isOpen = true\"\n      type=\"text\"\n      id=\"dropdown-search-{{ multiSelectSearch.componentHeading | trimId}}\"\n      [(ngModel)]=\"multiSelectSearch.searchInput\"\n      (ngModelChange)=\"onSearchInputChange()\"\n      dropdownToggle\n      popover=\"{{ popOverText() }}\"\n      containerClass=\"sfx-input-popover\"\n      triggers=\"\"\n      placement=\"top\"\n      #pop=\"bs-popover\"\n      (mouseenter)=\"showPop()\"\n      (mouseleave)=\"onPopMouseLeave()\"\n      (focus)=\"onFocusClick(true)\"\n      (blur)=\"onFocusClick(false)\"\n      class=\"sfx-placeholder\"\n      placeholder=\"{{\n        enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n      }}\"\n      autocomplete=\"off\"\n      [disabled]=\"isDisabled\"\n      [readonly]=\"disableSearch\"\n    />\n    <symphony-icon *ngIf=\"!disableSearch\" [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n    <div *dropdownMenu>\n      <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n        <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n          <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n          <symphony-input-toggle\n          [isToggled]=\"isAllToggled\"\n          [isInverse]=\"false\"\n          (toggleClick)=\"onToggleClick($event)\"\n          ></symphony-input-toggle>\n        </div>\n        <!-- Create And Add Tags -->\n        <div\n          class=\"sfx-create-new-items\"\n          *ngIf=\"\n            multiSelectSearch.labelCreateNewItems &&\n            multiSelectSearch.showCreateNewItems\n          \"\n          (click)=\"onCreateNewItem()\"\n          [ngClass]=\"{\n            'sfx-font-bold': multiSelectSearch.showCreateNewModal\n          }\"\n        >\n          {{ multiSelectSearch.labelCreateNewItems }}\n          <span\n            class=\"sfx-font-bold\"\n            *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n            >&nbsp;&apos;\n            {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}&apos;\n          </span>\n          <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n        </div>\n        <!-- Create And Add Tags ends here -->\n        <!-- selected list div -->\n        <div\n          class=\"sfx-dropdown-selected sfx-custom-scroll\"\n          *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n        >\n          <div\n            class=\"sfx-d-inline-block\"\n            *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n          >\n            <div\n              (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n              class=\"sfx-checkbox sfx-d-inline-block\"\n            >\n              <input\n                type=\"checkbox\"\n                checked\n                class=\"sfx-checkbox-input\"\n                id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n                >{{ selectedItem.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"selectedItem.additionalInfo\"\n                  class=\"selected-additional-info\"\n                >\n                  {{ selectedItem.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n        </div>\n        <!-- selected list div ends here -->\n        <!-- Search list  -->\n        <div\n          class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n          (scroll)=\"scrollHandler($event)\"\n          *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n        >\n          <div\n            id=\"dropdown-triggers-manually\"\n            *ngFor=\"\n              let filterDropdownOption of multiSelectSearch.searchedDropdownList\n            \"\n          >\n            <div class=\"sfx-checkbox\">\n              <input\n                type=\"checkbox\"\n                id=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name | trimId\n                }}\"\n                class=\"sfx-checkbox-input\"\n                [disabled]=\"multiSelectSearch.hasMaxSelections\"\n                (click)=\"\n                onSelectItem(filterDropdownOption); $event.stopPropagation()\n                \"\n                [(ngModel)]=\"filterDropdownOption.isChecked\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name | trimId\n                }}\"\n                >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"filterDropdownOption.additionalInfo\"\n                  class=\"additional-info\"\n                >\n                  {{ filterDropdownOption.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n          <div>\n            <symphony-sfx-loader\n              [hidden]=\"!isLoadingData\"\n            ></symphony-sfx-loader>\n          </div>\n        </div>\n        <symphony-sfx-loader\n          [hidden]=\"!isLoadingInitialData\"\n        ></symphony-sfx-loader>\n        <!-- search list ends here -->\n        <!-- Footer -->\n        <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n          <button\n            type=\"button\"\n            class=\"pull-left\"\n            [disabled]=\"\n              !(\n                multiSelectSearch.selectedDropdownList &&\n                multiSelectSearch.selectedDropdownList.length > 0\n              )\n            \"\n            (click)=\"onClearAllClick()\"\n          >\n            Clear All\n          </button>\n          <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n        </div>\n        <!-- End Footer -->\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"isInvalid\" class=\"error-message\">\n    Please select a valid option\n  </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder:-ms-input-placeholder{color:#000}.sfx-placeholder::-moz-placeholder{color:#000}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#ac4463}.invalid-control{border:1px solid #AC4463!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#E4E7EF;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#ffffff;color:#000}.sfx-custom-dropdown-wrap.open symphony-icon{color:#000}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:runda,sans-serif;font-weight:500}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#712ace;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:runda,sans-serif;font-weight:400;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:runda,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:runda,sans-serif;font-weight:500;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-custom-dropdown-wrap input{border-color:#5b6d80}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i4.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: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "trimId": TrimIdPipe, "capitalizeFirstCharacter": CapitalizeFirstCharacterPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-input-search-checkbox-dropdown', template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n  <div\n    *ngIf=\"multiSelectSearch.componentHeading\"\n    class=\"sfx-filter-label sfx-d-inline-block\"\n  >\n    <b\n      >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n      <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n    </b>\n  </div>\n  <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n    <input\n      type=\"radio\"\n      id=\"radio-and-{{ conditionSelectionId }}\"\n      name=\"radio-and-{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' AND ')\"\n      [checked]=\"multiSelectSearch.condition === ' AND '\"\n    />\n    <label class=\"Font400\" for=\"radio-and-{{ conditionSelectionId }}\"\n      >and</label\n    >\n    <input\n      type=\"radio\"\n      id=\"radio-or-{{ conditionSelectionId }}\"\n      name=\"radio-or-{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' OR ')\"\n      [checked]=\"multiSelectSearch.condition === ' OR '\"\n    />\n    <label class=\"Font400\" for=\"radio-or-{{ conditionSelectionId }}\">or</label>\n  </div>\n  <div\n    class=\"sfx-custom-dropdown-wrap\"\n    [ngClass]=\"{ open: openDropdown }\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    (onShown)=\"toggleDropdown()\"\n    [insideClick]=\"true\"\n    (onHidden)=\"onOkClick(true)\"\n  >\n    <input\n      [ngClass]=\"{ 'invalid-control': isInvalid }\"\n      (click)=\"dropdown.isOpen = true\"\n      type=\"text\"\n      id=\"dropdown-search-{{ multiSelectSearch.componentHeading | trimId}}\"\n      [(ngModel)]=\"multiSelectSearch.searchInput\"\n      (ngModelChange)=\"onSearchInputChange()\"\n      dropdownToggle\n      popover=\"{{ popOverText() }}\"\n      containerClass=\"sfx-input-popover\"\n      triggers=\"\"\n      placement=\"top\"\n      #pop=\"bs-popover\"\n      (mouseenter)=\"showPop()\"\n      (mouseleave)=\"onPopMouseLeave()\"\n      (focus)=\"onFocusClick(true)\"\n      (blur)=\"onFocusClick(false)\"\n      class=\"sfx-placeholder\"\n      placeholder=\"{{\n        enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n      }}\"\n      autocomplete=\"off\"\n      [disabled]=\"isDisabled\"\n      [readonly]=\"disableSearch\"\n    />\n    <symphony-icon *ngIf=\"!disableSearch\" [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n    <div *dropdownMenu>\n      <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n        <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n          <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n          <symphony-input-toggle\n          [isToggled]=\"isAllToggled\"\n          [isInverse]=\"false\"\n          (toggleClick)=\"onToggleClick($event)\"\n          ></symphony-input-toggle>\n        </div>\n        <!-- Create And Add Tags -->\n        <div\n          class=\"sfx-create-new-items\"\n          *ngIf=\"\n            multiSelectSearch.labelCreateNewItems &&\n            multiSelectSearch.showCreateNewItems\n          \"\n          (click)=\"onCreateNewItem()\"\n          [ngClass]=\"{\n            'sfx-font-bold': multiSelectSearch.showCreateNewModal\n          }\"\n        >\n          {{ multiSelectSearch.labelCreateNewItems }}\n          <span\n            class=\"sfx-font-bold\"\n            *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n            >&nbsp;&apos;\n            {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}&apos;\n          </span>\n          <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n        </div>\n        <!-- Create And Add Tags ends here -->\n        <!-- selected list div -->\n        <div\n          class=\"sfx-dropdown-selected sfx-custom-scroll\"\n          *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n        >\n          <div\n            class=\"sfx-d-inline-block\"\n            *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n          >\n            <div\n              (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n              class=\"sfx-checkbox sfx-d-inline-block\"\n            >\n              <input\n                type=\"checkbox\"\n                checked\n                class=\"sfx-checkbox-input\"\n                id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n                >{{ selectedItem.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"selectedItem.additionalInfo\"\n                  class=\"selected-additional-info\"\n                >\n                  {{ selectedItem.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n        </div>\n        <!-- selected list div ends here -->\n        <!-- Search list  -->\n        <div\n          class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n          (scroll)=\"scrollHandler($event)\"\n          *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n        >\n          <div\n            id=\"dropdown-triggers-manually\"\n            *ngFor=\"\n              let filterDropdownOption of multiSelectSearch.searchedDropdownList\n            \"\n          >\n            <div class=\"sfx-checkbox\">\n              <input\n                type=\"checkbox\"\n                id=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name | trimId\n                }}\"\n                class=\"sfx-checkbox-input\"\n                [disabled]=\"multiSelectSearch.hasMaxSelections\"\n                (click)=\"\n                onSelectItem(filterDropdownOption); $event.stopPropagation()\n                \"\n                [(ngModel)]=\"filterDropdownOption.isChecked\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name | trimId\n                }}\"\n                >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"filterDropdownOption.additionalInfo\"\n                  class=\"additional-info\"\n                >\n                  {{ filterDropdownOption.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n          <div>\n            <symphony-sfx-loader\n              [hidden]=\"!isLoadingData\"\n            ></symphony-sfx-loader>\n          </div>\n        </div>\n        <symphony-sfx-loader\n          [hidden]=\"!isLoadingInitialData\"\n        ></symphony-sfx-loader>\n        <!-- search list ends here -->\n        <!-- Footer -->\n        <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n          <button\n            type=\"button\"\n            class=\"pull-left\"\n            [disabled]=\"\n              !(\n                multiSelectSearch.selectedDropdownList &&\n                multiSelectSearch.selectedDropdownList.length > 0\n              )\n            \"\n            (click)=\"onClearAllClick()\"\n          >\n            Clear All\n          </button>\n          <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n        </div>\n        <!-- End Footer -->\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"isInvalid\" class=\"error-message\">\n    Please select a valid option\n  </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder:-ms-input-placeholder{color:#000}.sfx-placeholder::-moz-placeholder{color:#000}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#ac4463}.invalid-control{border:1px solid #AC4463!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#E4E7EF;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#ffffff;color:#000}.sfx-custom-dropdown-wrap.open symphony-icon{color:#000}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:runda,sans-serif;font-weight:500}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#712ace;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:runda,sans-serif;font-weight:400;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:runda,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:runda,sans-serif;font-weight:500;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-custom-dropdown-wrap input{border-color:#5b6d80}\n"] }]
@@ -2551,7 +2560,7 @@ InputSearchCheckboxDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion:
 InputSearchCheckboxDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownModule, declarations: [InputSearchCheckboxDropdownComponent,
         CapitalizeFirstCharacterPipe], imports: [i1$1.BsDropdownModule, BrowserAnimationsModule,
         CommonModule,
-        FormsModule, i8.PopoverModule, SfxLoaderModule,
+        FormsModule, i3.PopoverModule, SfxLoaderModule,
         InputToggleModule,
         IconModule,
         PipeModule], exports: [InputSearchCheckboxDropdownComponent] });
@@ -2781,7 +2790,7 @@ class InputFileUploadComponent {
     }
 }
 InputFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputFileUploadComponent, selector: "symphony-input-file-upload", inputs: { inputFileUploadModel: "inputFileUploadModel" }, outputs: { closeButtonClicked: "closeButtonClicked", textChanged: "textChanged", getFileDetails: "getFileDetails" }, viewQueries: [{ propertyName: "toolTip", first: true, predicate: ["pop"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"inputFileUploadModel\">\n  <!-- File Upload -->\n  <div class=\"sfx-input-label\">\n    {{ inputFileUploadModel.inputLabel }}\n  </div>\n  <div\n    class=\"sfx-input-file-upload\"\n    tooltip=\"{{ inputFileUploadModel.fileValue }}\"\n    containerClass=\"sfx-info-tooltip item-tooltip\"\n    #pop=\"bs-tooltip\"\n    [ngClass]=\"{ 'has-Close': inputFileUploadModel.hasClose }\"\n  >\n    <label class=\"sfx-cursor-pointer\" for=\"input-file-Upload\"> </label>\n\n    <input\n      type=\"file\"\n      id=\"input-file-Upload\"\n      name=\"input-file-Upload\"\n      accept=\"{{ filetypeAccepted }}\"\n      (change)=\"onFileSelect($event)\"\n      (click)=\"onClick($event)\"\n    />\n    <input\n      type=\"text\"\n      name=\"input-text\"\n      id=\"input-file-Upload-text\"\n      class=\"input-text\"\n      autocomplete=\"off\"\n      placeholder=\"{{ inputFileUploadModel.placeholder }}\"\n      (keyup)=\"onTextChange($event)\"\n      [(ngModel)]=\"inputFileUploadModel.fileValue\"\n    />\n\n    <symphony-icon\n      class=\"sfx-cursor-pointer\"\n      *ngIf=\"inputFileUploadModel.hasClose\"\n      [icon]=\"'si-close-modal'\"\n      [size]=\"'20px'\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n    <symphony-paragraph\n      *ngIf=\"inputFileUploadModel.hasError\"\n      class=\"sfx-txt-red-v2 sfx-pl-5 sfx-d-flex\"\n      [text]=\"inputFileUploadModel.errorText\"\n    ></symphony-paragraph>\n  </div>\n  <!-- File Upload -->\n</div>\n", styles: [".sfx-input-file-upload{position:relative}.sfx-input-file-upload symphony-tooltip-wrapper .sfx-d-inline-block{width:100%;display:block}.sfx-input-file-upload label{line-height:40px;width:40px;margin:0;height:40px;position:absolute;text-align:center;right:-5px;top:5px}.sfx-input-file-upload label span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;top:5px}.sfx-input-file-upload label:before{content:\"\\e9b7\";font-family:library-icons!important}.sfx-input-file-upload input[type=file]{visibility:hidden;position:absolute;top:0}.sfx-input-file-upload input[type=text]{width:100%;height:40px;border-radius:4px;box-shadow:none;padding:0 30px 0 20px;border:1px solid #d0d0d0;margin:5px;outline:none}.sfx-input-file-upload.has-Close input[type=text]{width:calc(100% - 35px)}.sfx-input-file-upload.has-Close label{right:30px;top:5px}.sfx-input-file-upload.has-Close symphony-icon{position:absolute;top:15px;right:0px}.sfx-input-label{font-weight:500;margin-left:5px;margin-bottom:5px}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px!important;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600;word-wrap:break-word}.sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip.item-tooltip.right{left:5px!important}.sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#fff}.sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#fff}.sfx-info-tooltip.item-tooltip.left{left:-5px!important}.sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:250px;font-size:13px;color:#000}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
+InputFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputFileUploadComponent, selector: "symphony-input-file-upload", inputs: { inputFileUploadModel: "inputFileUploadModel" }, outputs: { closeButtonClicked: "closeButtonClicked", textChanged: "textChanged", getFileDetails: "getFileDetails" }, viewQueries: [{ propertyName: "toolTip", first: true, predicate: ["pop"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"inputFileUploadModel\">\n  <!-- File Upload -->\n  <div class=\"sfx-input-label\">\n    {{ inputFileUploadModel.inputLabel }}\n  </div>\n  <div\n    class=\"sfx-input-file-upload\"\n    tooltip=\"{{ inputFileUploadModel.fileValue }}\"\n    containerClass=\"sfx-info-tooltip item-tooltip\"\n    #pop=\"bs-tooltip\"\n    [ngClass]=\"{ 'has-Close': inputFileUploadModel.hasClose }\"\n  >\n    <label class=\"sfx-cursor-pointer\" for=\"input-file-Upload\"> </label>\n\n    <input\n      type=\"file\"\n      id=\"input-file-Upload\"\n      name=\"input-file-Upload\"\n      accept=\"{{ filetypeAccepted }}\"\n      (change)=\"onFileSelect($event)\"\n      (click)=\"onClick($event)\"\n    />\n    <input\n      type=\"text\"\n      name=\"input-text\"\n      id=\"input-file-Upload-text\"\n      class=\"input-text\"\n      autocomplete=\"off\"\n      placeholder=\"{{ inputFileUploadModel.placeholder }}\"\n      (keyup)=\"onTextChange($event)\"\n      [(ngModel)]=\"inputFileUploadModel.fileValue\"\n    />\n\n    <symphony-icon\n      class=\"sfx-cursor-pointer\"\n      *ngIf=\"inputFileUploadModel.hasClose\"\n      [icon]=\"'si-close-modal'\"\n      [size]=\"'20px'\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n    <symphony-paragraph\n      *ngIf=\"inputFileUploadModel.hasError\"\n      class=\"sfx-txt-red-v2 sfx-pl-5 sfx-d-flex\"\n      [text]=\"inputFileUploadModel.errorText\"\n    ></symphony-paragraph>\n  </div>\n  <!-- File Upload -->\n</div>\n", styles: [".sfx-input-file-upload{position:relative}.sfx-input-file-upload symphony-tooltip-wrapper .sfx-d-inline-block{width:100%;display:block}.sfx-input-file-upload label{line-height:40px;width:40px;margin:0;height:40px;position:absolute;text-align:center;right:-5px;top:5px}.sfx-input-file-upload label span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;top:5px}.sfx-input-file-upload label:before{content:\"\\e9b7\";font-family:library-icons!important}.sfx-input-file-upload input[type=file]{visibility:hidden;position:absolute;top:0}.sfx-input-file-upload input[type=text]{width:100%;height:40px;border-radius:4px;box-shadow:none;padding:0 30px 0 20px;border:1px solid #d0d0d0;margin:5px;outline:none}.sfx-input-file-upload.has-Close input[type=text]{width:calc(100% - 35px)}.sfx-input-file-upload.has-Close label{right:30px;top:5px}.sfx-input-file-upload.has-Close symphony-icon{position:absolute;top:15px;right:0px}.sfx-input-label{font-weight:500;margin-left:5px;margin-bottom:5px}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px!important;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600;word-wrap:break-word}.sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip.item-tooltip.right{left:5px!important}.sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#fff}.sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#fff}.sfx-info-tooltip.item-tooltip.left{left:-5px!important}.sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:250px;font-size:13px;color:#000}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-input-file-upload', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"inputFileUploadModel\">\n  <!-- File Upload -->\n  <div class=\"sfx-input-label\">\n    {{ inputFileUploadModel.inputLabel }}\n  </div>\n  <div\n    class=\"sfx-input-file-upload\"\n    tooltip=\"{{ inputFileUploadModel.fileValue }}\"\n    containerClass=\"sfx-info-tooltip item-tooltip\"\n    #pop=\"bs-tooltip\"\n    [ngClass]=\"{ 'has-Close': inputFileUploadModel.hasClose }\"\n  >\n    <label class=\"sfx-cursor-pointer\" for=\"input-file-Upload\"> </label>\n\n    <input\n      type=\"file\"\n      id=\"input-file-Upload\"\n      name=\"input-file-Upload\"\n      accept=\"{{ filetypeAccepted }}\"\n      (change)=\"onFileSelect($event)\"\n      (click)=\"onClick($event)\"\n    />\n    <input\n      type=\"text\"\n      name=\"input-text\"\n      id=\"input-file-Upload-text\"\n      class=\"input-text\"\n      autocomplete=\"off\"\n      placeholder=\"{{ inputFileUploadModel.placeholder }}\"\n      (keyup)=\"onTextChange($event)\"\n      [(ngModel)]=\"inputFileUploadModel.fileValue\"\n    />\n\n    <symphony-icon\n      class=\"sfx-cursor-pointer\"\n      *ngIf=\"inputFileUploadModel.hasClose\"\n      [icon]=\"'si-close-modal'\"\n      [size]=\"'20px'\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n    <symphony-paragraph\n      *ngIf=\"inputFileUploadModel.hasError\"\n      class=\"sfx-txt-red-v2 sfx-pl-5 sfx-d-flex\"\n      [text]=\"inputFileUploadModel.errorText\"\n    ></symphony-paragraph>\n  </div>\n  <!-- File Upload -->\n</div>\n", styles: [".sfx-input-file-upload{position:relative}.sfx-input-file-upload symphony-tooltip-wrapper .sfx-d-inline-block{width:100%;display:block}.sfx-input-file-upload label{line-height:40px;width:40px;margin:0;height:40px;position:absolute;text-align:center;right:-5px;top:5px}.sfx-input-file-upload label span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;top:5px}.sfx-input-file-upload label:before{content:\"\\e9b7\";font-family:library-icons!important}.sfx-input-file-upload input[type=file]{visibility:hidden;position:absolute;top:0}.sfx-input-file-upload input[type=text]{width:100%;height:40px;border-radius:4px;box-shadow:none;padding:0 30px 0 20px;border:1px solid #d0d0d0;margin:5px;outline:none}.sfx-input-file-upload.has-Close input[type=text]{width:calc(100% - 35px)}.sfx-input-file-upload.has-Close label{right:30px;top:5px}.sfx-input-file-upload.has-Close symphony-icon{position:absolute;top:15px;right:0px}.sfx-input-label{font-weight:500;margin-left:5px;margin-bottom:5px}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px!important;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600;word-wrap:break-word}.sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip.item-tooltip.right{left:5px!important}.sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#fff}.sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#fff}.sfx-info-tooltip.item-tooltip.left{left:-5px!important}.sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:250px;font-size:13px;color:#000}\n"] }]
@@ -3718,7 +3727,7 @@ class EditableSettingItemComponent {
     }
 }
 EditableSettingItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EditableSettingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditableSettingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EditableSettingItemComponent, selector: "symphony-editable-setting-item", inputs: { editableSettingItemModel: "editableSettingItemModel" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<section class=\"editable-setting-wrap sfx-mb-20\">\n  <div class=\"sfx-pt-10\">\n    <symphony-paragraph class=\"sfx-font-bold\" id=\"editable-input-label-{{ editableSettingItemModel.settingLabel | trimId}}\">\n      {{ editableSettingItemModel.settingLabel }}</symphony-paragraph\n    >\n  </div>\n  <div class=\"editable-input\">\n    <input\n      id=\"editable-input-item-{{ editableSettingItemModel.settingLabel | trimId}}\"\n      type=\"{{ editableSettingItemModel.settingInputType }}\"\n      [(ngModel)]=\"editableSettingItemModel.settingInputValue\"\n      (ngModelChange)=\"onValueChange(editableSettingItemModel)\"\n      placeholder=\"{{ editableSettingItemModel.settingInputPlaceholderText }}\"\n    />\n  </div>\n</section>\n", styles: [".editable-setting-wrap{display:flex;justify-content:space-between}.editable-setting-wrap .editable-input input::-webkit-outer-spin-button,.editable-setting-wrap .editable-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.editable-setting-wrap .editable-input input{width:135px;height:40px;padding-inline:10px;border-radius:4px;border:1px solid #82919f;outline:none}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ 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: { "trimId": TrimIdPipe } });
+EditableSettingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EditableSettingItemComponent, selector: "symphony-editable-setting-item", inputs: { editableSettingItemModel: "editableSettingItemModel" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<section class=\"editable-setting-wrap sfx-mb-20\">\n  <div class=\"sfx-pt-10\">\n    <symphony-paragraph class=\"sfx-font-bold\" id=\"editable-input-label-{{ editableSettingItemModel.settingLabel | trimId}}\">\n      {{ editableSettingItemModel.settingLabel }}</symphony-paragraph\n    >\n  </div>\n  <div class=\"editable-input\">\n    <input\n      id=\"editable-input-item-{{ editableSettingItemModel.settingLabel | trimId}}\"\n      type=\"{{ editableSettingItemModel.settingInputType }}\"\n      [(ngModel)]=\"editableSettingItemModel.settingInputValue\"\n      (ngModelChange)=\"onValueChange(editableSettingItemModel)\"\n      placeholder=\"{{ editableSettingItemModel.settingInputPlaceholderText }}\"\n    />\n  </div>\n</section>\n", styles: [".editable-setting-wrap{display:flex;justify-content:space-between}.editable-setting-wrap .editable-input input::-webkit-outer-spin-button,.editable-setting-wrap .editable-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.editable-setting-wrap .editable-input input{width:135px;height:40px;padding-inline:10px;border-radius:4px;border:1px solid #82919f;outline:none}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "trimId": TrimIdPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EditableSettingItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-editable-setting-item', template: "<section class=\"editable-setting-wrap sfx-mb-20\">\n  <div class=\"sfx-pt-10\">\n    <symphony-paragraph class=\"sfx-font-bold\" id=\"editable-input-label-{{ editableSettingItemModel.settingLabel | trimId}}\">\n      {{ editableSettingItemModel.settingLabel }}</symphony-paragraph\n    >\n  </div>\n  <div class=\"editable-input\">\n    <input\n      id=\"editable-input-item-{{ editableSettingItemModel.settingLabel | trimId}}\"\n      type=\"{{ editableSettingItemModel.settingInputType }}\"\n      [(ngModel)]=\"editableSettingItemModel.settingInputValue\"\n      (ngModelChange)=\"onValueChange(editableSettingItemModel)\"\n      placeholder=\"{{ editableSettingItemModel.settingInputPlaceholderText }}\"\n    />\n  </div>\n</section>\n", styles: [".editable-setting-wrap{display:flex;justify-content:space-between}.editable-setting-wrap .editable-input input::-webkit-outer-spin-button,.editable-setting-wrap .editable-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.editable-setting-wrap .editable-input input{width:135px;height:40px;padding-inline:10px;border-radius:4px;border:1px solid #82919f;outline:none}\n"] }]
@@ -4354,7 +4363,7 @@ class FeedbackLoginModalComponent {
     }
 }
 FeedbackLoginModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackLoginModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackLoginModalComponent, selector: "symphony-feedback-login-modal", inputs: { model: "model" }, outputs: { verifyClicked: "verifyClicked", resendClick: "resendClick", authCodeChange: "authCodeChange", sendCodeClick: "sendCodeClick" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4>Two-Factor Authentication</symphony-h4>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n    <symphony-paragraph [text]=\"model.headerDescription\"></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n      [text]=\"model.email\"\n    ></symphony-paragraph>\n    <div>\n      <symphony-input-text\n        class=\"authentication-input sfx-d-inline-block\"\n        [label]=\"'Authentication Code'\"\n        (textChange)=\"onAuthCodeChange($event)\"\n        [isDisabled]=\"model.isSendCodeEnabled\"\n      >\n      </symphony-input-text>\n      <symphony-paragraph\n        *ngIf=\"model.resendCodeTimerText\"\n        class=\"sfx-d-inline-block resendTimerText\"\n      >\n        <i class=\"si-timeframe\"></i> \n        {{model.resendCodeTimerText}}\n      </symphony-paragraph>\n      <symphony-h5\n        *ngIf=\"model.isResendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n      <symphony-h5\n        *ngIf=\"model.isSendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Send Code'\"\n        (click)=\"onSendCodeClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red-v2\">\n        <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n    </div>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-d-block\"\n    >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n  </section>\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n    <symphony-button-v2\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button-v2>\n  </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}.btn-resend .h5-primary{font-weight:700!important;font-size:14px;color:#712ace}.resendTimerText{font-style:italic}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled"], outputs: ["textChange"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackLoginModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackLoginModalComponent, selector: "symphony-feedback-login-modal", inputs: { model: "model" }, outputs: { verifyClicked: "verifyClicked", resendClick: "resendClick", authCodeChange: "authCodeChange", sendCodeClick: "sendCodeClick" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4>Two-Factor Authentication</symphony-h4>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n    <symphony-paragraph [text]=\"model.headerDescription\"></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n      [text]=\"model.email\"\n    ></symphony-paragraph>\n    <div>\n      <symphony-input-text\n        class=\"authentication-input sfx-d-inline-block\"\n        [label]=\"'Authentication Code'\"\n        (textChange)=\"onAuthCodeChange($event)\"\n        [isDisabled]=\"model.isSendCodeEnabled\"\n      >\n      </symphony-input-text>\n      <symphony-paragraph\n        *ngIf=\"model.resendCodeTimerText\"\n        class=\"sfx-d-inline-block resendTimerText\"\n      >\n        <i class=\"si-timeframe\"></i> \n        {{model.resendCodeTimerText}}\n      </symphony-paragraph>\n      <symphony-h5\n        *ngIf=\"model.isResendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n      <symphony-h5\n        *ngIf=\"model.isSendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Send Code'\"\n        (click)=\"onSendCodeClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red-v2\">\n        <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n    </div>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-d-block\"\n    >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n  </section>\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n    <symphony-button-v2\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button-v2>\n  </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}.btn-resend .h5-primary{font-weight:700!important;font-size:14px;color:#712ace}.resendTimerText{font-style:italic}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick"], outputs: ["textChange"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-login-modal', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx sfx-modal\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4>Two-Factor Authentication</symphony-h4>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n    <symphony-paragraph [text]=\"model.headerDescription\"></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n      [text]=\"model.email\"\n    ></symphony-paragraph>\n    <div>\n      <symphony-input-text\n        class=\"authentication-input sfx-d-inline-block\"\n        [label]=\"'Authentication Code'\"\n        (textChange)=\"onAuthCodeChange($event)\"\n        [isDisabled]=\"model.isSendCodeEnabled\"\n      >\n      </symphony-input-text>\n      <symphony-paragraph\n        *ngIf=\"model.resendCodeTimerText\"\n        class=\"sfx-d-inline-block resendTimerText\"\n      >\n        <i class=\"si-timeframe\"></i> \n        {{model.resendCodeTimerText}}\n      </symphony-paragraph>\n      <symphony-h5\n        *ngIf=\"model.isResendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n      <symphony-h5\n        *ngIf=\"model.isSendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Send Code'\"\n        (click)=\"onSendCodeClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red-v2\">\n        <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n    </div>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-d-block\"\n    >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n  </section>\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n    <symphony-button-v2\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button-v2>\n  </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}.btn-resend .h5-primary{font-weight:700!important;font-size:14px;color:#712ace}.resendTimerText{font-style:italic}\n"] }]
@@ -5382,7 +5391,7 @@ class AdditionModalComponent {
     }
 }
 AdditionModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdditionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdditionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdditionModalComponent, selector: "symphony-addition-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"sfx sfx-modal\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <symphony-paragraph>{{ model.content }}</symphony-paragraph>\n    <symphony-input-text\n      [maxlength]=\"model.maxlength\"\n      (textChange)=\"onTextChanged($event)\"\n    ></symphony-input-text>\n    <symphony-paragraph class=\"sfx-txt-red\">{{ model.message }}</symphony-paragraph>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n    <symphony-button\n      *ngIf=\"model.btnSecondary\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-button>\n    <symphony-button\n      [disabled]=\"!valueToAdd?.length\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      (clicked)=\"onButtonClick()\"\n    ></symphony-button>\n  </section>\n</div>\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: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled"], outputs: ["textChange"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AdditionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdditionModalComponent, selector: "symphony-addition-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"sfx sfx-modal\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <symphony-paragraph>{{ model.content }}</symphony-paragraph>\n    <symphony-input-text\n      [maxlength]=\"model.maxlength\"\n      (textChange)=\"onTextChanged($event)\"\n    ></symphony-input-text>\n    <symphony-paragraph class=\"sfx-txt-red\">{{ model.message }}</symphony-paragraph>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n    <symphony-button\n      *ngIf=\"model.btnSecondary\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-button>\n    <symphony-button\n      [disabled]=\"!valueToAdd?.length\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      (clicked)=\"onButtonClick()\"\n    ></symphony-button>\n  </section>\n</div>\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: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick"], outputs: ["textChange"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdditionModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-addition-modal', template: "<div *ngIf=\"model\" class=\"sfx sfx-modal\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <symphony-paragraph>{{ model.content }}</symphony-paragraph>\n    <symphony-input-text\n      [maxlength]=\"model.maxlength\"\n      (textChange)=\"onTextChanged($event)\"\n    ></symphony-input-text>\n    <symphony-paragraph class=\"sfx-txt-red\">{{ model.message }}</symphony-paragraph>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n    <symphony-button\n      *ngIf=\"model.btnSecondary\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-button>\n    <symphony-button\n      [disabled]=\"!valueToAdd?.length\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      (clicked)=\"onButtonClick()\"\n    ></symphony-button>\n  </section>\n</div>\n" }]
@@ -6944,7 +6953,7 @@ class EventsSettingsPageComponent {
     }
 }
 EventsSettingsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EventsSettingsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EventsSettingsPageComponent, selector: "symphony-events-settings-page", inputs: { model: "model" }, outputs: { keywordSearchChange: "keywordSearchChange", filterChange: "filterChange", gridActionsSelectedOption: "gridActionsSelectedOption", addButtonClicked: "addButtonClicked" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header>Event Settings</symphony-h3>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      (selectItem)=\"onFilterChange($event)\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n    [gridContextMenu]=\"true\"\n  ></symphony-grid>\n</symphony-admin-list-template>\n", styles: [".icon-wrapper i{color:#334860}.icon-wrapper:hover i{color:#fff}\n"], components: [{ type: AdminListTemplateComponent, selector: "symphony-admin-list-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"], outputs: ["breadcrumbClicked"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: ["height"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled"], outputs: ["textChange"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu"], outputs: ["sortChanged", "cellClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+EventsSettingsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EventsSettingsPageComponent, selector: "symphony-events-settings-page", inputs: { model: "model" }, outputs: { keywordSearchChange: "keywordSearchChange", filterChange: "filterChange", gridActionsSelectedOption: "gridActionsSelectedOption", addButtonClicked: "addButtonClicked" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header>Event Settings</symphony-h3>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      (selectItem)=\"onFilterChange($event)\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n    [gridContextMenu]=\"true\"\n  ></symphony-grid>\n</symphony-admin-list-template>\n", styles: [".icon-wrapper i{color:#334860}.icon-wrapper:hover i{color:#fff}\n"], components: [{ type: AdminListTemplateComponent, selector: "symphony-admin-list-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"], outputs: ["breadcrumbClicked"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: ["height"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick"], outputs: ["textChange"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu"], outputs: ["sortChanged", "cellClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-events-settings-page', encapsulation: ViewEncapsulation.None, template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header>Event Settings</symphony-h3>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      (selectItem)=\"onFilterChange($event)\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n    [gridContextMenu]=\"true\"\n  ></symphony-grid>\n</symphony-admin-list-template>\n", styles: [".icon-wrapper i{color:#334860}.icon-wrapper:hover i{color:#fff}\n"] }]
@@ -7092,7 +7101,7 @@ class SettingListPageComponent {
     }
 }
 SettingListPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SettingListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingListPageComponent, selector: "symphony-setting-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"], components: [{ type: SettingListTemplateComponent, selector: "symphony-setting-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled"], outputs: ["textChange"] }, { type: CardListComponent, selector: "symphony-card-list", inputs: ["cardList"], outputs: ["cardClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+SettingListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingListPageComponent, selector: "symphony-setting-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"], components: [{ type: SettingListTemplateComponent, selector: "symphony-setting-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick"], outputs: ["textChange"] }, { type: CardListComponent, selector: "symphony-card-list", inputs: ["cardList"], outputs: ["cardClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-setting-list-page', encapsulation: ViewEncapsulation.None, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"] }]
@@ -7246,7 +7255,7 @@ 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}.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 });
+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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.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}.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"] }]
@@ -7577,7 +7586,7 @@ class AdvertiseModalComponent {
     }
 }
 AdvertiseModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, deps: [{ token: i1.DecimalPipe }], target: i0.ɵɵFactoryTarget.Component });
-AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange", keywordSearchChange: "keywordSearchChange" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: ["model", "isClickable", "hasHover"], outputs: ["cardClicked", "cardHover"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange", keywordSearchChange: "keywordSearchChange" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: ["model", "isClickable", "hasHover"], outputs: ["cardClicked", "cardHover"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advertise-modal', encapsulation: ViewEncapsulation.None, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"] }]
@@ -7803,7 +7812,7 @@ class LibrariesPageComponent {
     }
 }
 LibrariesPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LibrariesPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LibrariesPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LibrariesPageComponent, selector: "symphony-libraries-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"], components: [{ type: SettingListTemplateComponent, selector: "symphony-setting-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled"], outputs: ["textChange"] }, { type: CardListComponent, selector: "symphony-card-list", inputs: ["cardList"], outputs: ["cardClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+LibrariesPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LibrariesPageComponent, selector: "symphony-libraries-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"], components: [{ type: SettingListTemplateComponent, selector: "symphony-setting-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick"], outputs: ["textChange"] }, { type: CardListComponent, selector: "symphony-card-list", inputs: ["cardList"], outputs: ["cardClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LibrariesPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-libraries-page', encapsulation: ViewEncapsulation.None, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"] }]
@@ -8236,7 +8245,7 @@ class AdvertisedJobPostingsListPageComponent {
     }
 }
 AdvertisedJobPostingsListPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvertisedJobPostingsListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisedJobPostingsListPageComponent, selector: "symphony-advertised-job-postings-list-page", inputs: { model: "model", gridActionModel: "gridActionModel", gridControlsModel: "gridControlsModel" }, outputs: { keywordSearchChange: "keywordSearchChange", filterChange: "filterChange", gridControlClick: "gridControlClick", gridActionClick: "gridActionClick" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-advertised-job-postings-list-template *ngIf=\"model\">\n  <symphony-h3 sfx-header>Your Job Postings</symphony-h3>\n\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-text\n      filter-one\n      [label]=\"'Search by Job Site'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n  </symphony-two-column-filter-area>\n  <symphony-action-bar-advertise-job-list\n    sfx-grid-action\n    [gridActionModel]=\"model.gridActions\"\n    [gridControlsModel]=\"model.gridControls\"\n    (gridControlClick)=\"onGridControlClick($event)\"\n    (gridActionClick)=\"onGridActionClick($event)\"\n  ></symphony-action-bar-advertise-job-list>\n\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n  ></symphony-grid>\n</symphony-advertised-job-postings-list-template>\n", styles: [""], components: [{ type: AdvertisedJobPostingsListTemplateComponent, selector: "symphony-advertised-job-postings-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: ["height"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled"], outputs: ["textChange"] }, { type: ActionBarAdvertiseJobListComponent, selector: "symphony-action-bar-advertise-job-list", inputs: ["gridActionModel", "gridControlsModel"], outputs: ["gridControlClick", "gridActionClick"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu"], outputs: ["sortChanged", "cellClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AdvertisedJobPostingsListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisedJobPostingsListPageComponent, selector: "symphony-advertised-job-postings-list-page", inputs: { model: "model", gridActionModel: "gridActionModel", gridControlsModel: "gridControlsModel" }, outputs: { keywordSearchChange: "keywordSearchChange", filterChange: "filterChange", gridControlClick: "gridControlClick", gridActionClick: "gridActionClick" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-advertised-job-postings-list-template *ngIf=\"model\">\n  <symphony-h3 sfx-header>Your Job Postings</symphony-h3>\n\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-text\n      filter-one\n      [label]=\"'Search by Job Site'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n  </symphony-two-column-filter-area>\n  <symphony-action-bar-advertise-job-list\n    sfx-grid-action\n    [gridActionModel]=\"model.gridActions\"\n    [gridControlsModel]=\"model.gridControls\"\n    (gridControlClick)=\"onGridControlClick($event)\"\n    (gridActionClick)=\"onGridActionClick($event)\"\n  ></symphony-action-bar-advertise-job-list>\n\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n  ></symphony-grid>\n</symphony-advertised-job-postings-list-template>\n", styles: [""], components: [{ type: AdvertisedJobPostingsListTemplateComponent, selector: "symphony-advertised-job-postings-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: ["height"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick"], outputs: ["textChange"] }, { type: ActionBarAdvertiseJobListComponent, selector: "symphony-action-bar-advertise-job-list", inputs: ["gridActionModel", "gridControlsModel"], outputs: ["gridControlClick", "gridActionClick"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu"], outputs: ["sortChanged", "cellClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advertised-job-postings-list-page', template: "<symphony-advertised-job-postings-list-template *ngIf=\"model\">\n  <symphony-h3 sfx-header>Your Job Postings</symphony-h3>\n\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-text\n      filter-one\n      [label]=\"'Search by Job Site'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n  </symphony-two-column-filter-area>\n  <symphony-action-bar-advertise-job-list\n    sfx-grid-action\n    [gridActionModel]=\"model.gridActions\"\n    [gridControlsModel]=\"model.gridControls\"\n    (gridControlClick)=\"onGridControlClick($event)\"\n    (gridActionClick)=\"onGridActionClick($event)\"\n  ></symphony-action-bar-advertise-job-list>\n\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n  ></symphony-grid>\n</symphony-advertised-job-postings-list-template>\n", styles: [""] }]
@@ -8384,7 +8393,7 @@ class AdvertisedJobPostingsModalComponent {
     }
 }
 AdvertisedJobPostingsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvertisedJobPostingsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisedJobPostingsModalComponent, selector: "symphony-advertised-job-postings-modal", inputs: { model: "model", gridDownloadModel: "gridDownloadModel" }, outputs: { keywordSearchChange: "keywordSearchChange", downloadClicked: "downloadClicked", closeButtonClicked: "closeButtonClicked" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-one-column-with-filter-modal-template *ngIf=\"model\">\n  <symphony-h4 sfx-modal-title>Advertised Jobs</symphony-h4>\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-input-text\n    sfx-filter-area\n    [placeholder]=\"'Keyword'\"\n    [icon]=\"'si-search-new'\"\n    [isInverse]=\"false\"\n    (textChange)=\"onKeywordSearch($event)\"\n  >\n  </symphony-input-text>\n\n  <symphony-grid-download\n    sfx-grid-download\n    [model]=\"model.gridDownloadModel\"\n    (clicked)=\"onDownloadClick()\"\n  >\n  </symphony-grid-download>\n\n  <symphony-grid\n    #sfxgrid\n    sfx-modal-body-area\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n    [rowSelectionMode]=\"'multiple'\"\n    [hasNoPaddingleft]=\"true\"\n  ></symphony-grid>\n</symphony-one-column-with-filter-modal-template>\n", styles: [".sfx-modal .ag-theme-alpine{max-height:500px!important}.sfx-modal .ag-theme-alpine .ag-center-cols-clipper .ag-cell{line-height:20px;display:block}.sfx-modal .input-text-wrap .input-text{margin-left:0!important}\n"], components: [{ type: OneColumnWithFilterModalTemplateComponent, selector: "symphony-one-column-with-filter-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled"], outputs: ["textChange"] }, { type: GridDownloadComponent, selector: "symphony-grid-download", inputs: ["model"], outputs: ["clicked"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu"], outputs: ["sortChanged", "cellClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+AdvertisedJobPostingsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisedJobPostingsModalComponent, selector: "symphony-advertised-job-postings-modal", inputs: { model: "model", gridDownloadModel: "gridDownloadModel" }, outputs: { keywordSearchChange: "keywordSearchChange", downloadClicked: "downloadClicked", closeButtonClicked: "closeButtonClicked" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-one-column-with-filter-modal-template *ngIf=\"model\">\n  <symphony-h4 sfx-modal-title>Advertised Jobs</symphony-h4>\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-input-text\n    sfx-filter-area\n    [placeholder]=\"'Keyword'\"\n    [icon]=\"'si-search-new'\"\n    [isInverse]=\"false\"\n    (textChange)=\"onKeywordSearch($event)\"\n  >\n  </symphony-input-text>\n\n  <symphony-grid-download\n    sfx-grid-download\n    [model]=\"model.gridDownloadModel\"\n    (clicked)=\"onDownloadClick()\"\n  >\n  </symphony-grid-download>\n\n  <symphony-grid\n    #sfxgrid\n    sfx-modal-body-area\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n    [rowSelectionMode]=\"'multiple'\"\n    [hasNoPaddingleft]=\"true\"\n  ></symphony-grid>\n</symphony-one-column-with-filter-modal-template>\n", styles: [".sfx-modal .ag-theme-alpine{max-height:500px!important}.sfx-modal .ag-theme-alpine .ag-center-cols-clipper .ag-cell{line-height:20px;display:block}.sfx-modal .input-text-wrap .input-text{margin-left:0!important}\n"], components: [{ type: OneColumnWithFilterModalTemplateComponent, selector: "symphony-one-column-with-filter-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick"], outputs: ["textChange"] }, { type: GridDownloadComponent, selector: "symphony-grid-download", inputs: ["model"], outputs: ["clicked"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu"], outputs: ["sortChanged", "cellClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advertised-job-postings-modal', encapsulation: ViewEncapsulation.None, template: "<symphony-one-column-with-filter-modal-template *ngIf=\"model\">\n  <symphony-h4 sfx-modal-title>Advertised Jobs</symphony-h4>\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-input-text\n    sfx-filter-area\n    [placeholder]=\"'Keyword'\"\n    [icon]=\"'si-search-new'\"\n    [isInverse]=\"false\"\n    (textChange)=\"onKeywordSearch($event)\"\n  >\n  </symphony-input-text>\n\n  <symphony-grid-download\n    sfx-grid-download\n    [model]=\"model.gridDownloadModel\"\n    (clicked)=\"onDownloadClick()\"\n  >\n  </symphony-grid-download>\n\n  <symphony-grid\n    #sfxgrid\n    sfx-modal-body-area\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n    [rowSelectionMode]=\"'multiple'\"\n    [hasNoPaddingleft]=\"true\"\n  ></symphony-grid>\n</symphony-one-column-with-filter-modal-template>\n", styles: [".sfx-modal .ag-theme-alpine{max-height:500px!important}.sfx-modal .ag-theme-alpine .ag-center-cols-clipper .ag-cell{line-height:20px;display:block}.sfx-modal .input-text-wrap .input-text{margin-left:0!important}\n"] }]
@@ -8549,7 +8558,7 @@ class AdvanceSearchModalComponent {
     }
 }
 AdvanceSearchModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvanceSearchModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvanceSearchModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvanceSearchModalComponent, selector: "symphony-advance-search-modal", inputs: { checkboxList: "checkboxList" }, outputs: { keywordSearchChange: "keywordSearchChange", closeButtonClicked: "closeButtonClicked", checkboxClicked: "checkboxClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>Select your filters</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-two-column-body-template [showHeader]=\"true\" sfx-modal-body-area>\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Data Sets'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n\n    <symphony-paragraph\n      class=\"sfx-d-flex sfx-mt-15\"\n      sfx-right-col-header\n      [isSecondary]=\"false\"\n      [isFontBold]=\"true\"\n    >Active Filters</symphony-paragraph>\n\n    <div class=\"select-list\" sfx-left-column [style.height.px]=\"getElementHeight.offsetHeight\">\n      <symphony-input-checkbox-list\n        [checkboxList]=\"checkboxList\"\n        (checkboxClicked)=\"onCheckboxClicked($event)\"\n      ></symphony-input-checkbox-list>\n    </div>\n    \n    <div sfx-right-column class=\"sfx-pr-10\" #getElementHeight>\n      <div>\n        <ng-content ngProjectAs=\"[filter1]\" select=\"[filter1]\"></ng-content>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'See Results'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"false\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".select-list{min-height:450px;overflow-y:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled"], outputs: ["textChange"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputCheckboxListComponent, selector: "symphony-input-checkbox-list", inputs: ["checkboxList"], outputs: ["checkboxClicked"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }] });
+AdvanceSearchModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvanceSearchModalComponent, selector: "symphony-advance-search-modal", inputs: { checkboxList: "checkboxList" }, outputs: { keywordSearchChange: "keywordSearchChange", closeButtonClicked: "closeButtonClicked", checkboxClicked: "checkboxClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>Select your filters</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-two-column-body-template [showHeader]=\"true\" sfx-modal-body-area>\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Data Sets'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n\n    <symphony-paragraph\n      class=\"sfx-d-flex sfx-mt-15\"\n      sfx-right-col-header\n      [isSecondary]=\"false\"\n      [isFontBold]=\"true\"\n    >Active Filters</symphony-paragraph>\n\n    <div class=\"select-list\" sfx-left-column [style.height.px]=\"getElementHeight.offsetHeight\">\n      <symphony-input-checkbox-list\n        [checkboxList]=\"checkboxList\"\n        (checkboxClicked)=\"onCheckboxClicked($event)\"\n      ></symphony-input-checkbox-list>\n    </div>\n    \n    <div sfx-right-column class=\"sfx-pr-10\" #getElementHeight>\n      <div>\n        <ng-content ngProjectAs=\"[filter1]\" select=\"[filter1]\"></ng-content>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'See Results'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"false\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".select-list{min-height:450px;overflow-y:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick"], outputs: ["textChange"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputCheckboxListComponent, selector: "symphony-input-checkbox-list", inputs: ["checkboxList"], outputs: ["checkboxClicked"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvanceSearchModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advance-search-modal', template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>Select your filters</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-two-column-body-template [showHeader]=\"true\" sfx-modal-body-area>\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Data Sets'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n\n    <symphony-paragraph\n      class=\"sfx-d-flex sfx-mt-15\"\n      sfx-right-col-header\n      [isSecondary]=\"false\"\n      [isFontBold]=\"true\"\n    >Active Filters</symphony-paragraph>\n\n    <div class=\"select-list\" sfx-left-column [style.height.px]=\"getElementHeight.offsetHeight\">\n      <symphony-input-checkbox-list\n        [checkboxList]=\"checkboxList\"\n        (checkboxClicked)=\"onCheckboxClicked($event)\"\n      ></symphony-input-checkbox-list>\n    </div>\n    \n    <div sfx-right-column class=\"sfx-pr-10\" #getElementHeight>\n      <div>\n        <ng-content ngProjectAs=\"[filter1]\" select=\"[filter1]\"></ng-content>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'See Results'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"false\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".select-list{min-height:450px;overflow-y:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}\n"] }]
@@ -8714,7 +8723,7 @@ class JobListPageComponent {
     }
 }
 JobListPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: JobListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-JobListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: JobListPageComponent, selector: "symphony-job-list-page", inputs: { jobListModel: "jobListModel" }, outputs: { addButtonClicked: "addButtonClicked", advanceSearchClicked: "advanceSearchClicked", lastLoadClicked: "lastLoadClicked", itemClicked: "itemClicked", jobCategorySearchChange: "jobCategorySearchChange", gridControlClicked: "gridControlClicked", gridActionClicked: "gridActionClicked", rowChecked: "rowChecked", cellClick: "cellClick" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-contact-list-template *ngIf=\"jobListModel\">\n  <symphony-h3 sfx-header>Jobs</symphony-h3>\n  <symphony-icon-wrapper\n    *ngIf=\"jobListModel.hasCreateJob\"\n    (clicked)=\"onAddButtonClick()\"\n    sfx-page-action\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-filter-area sfx-filter-area>\n    <symphony-h4 title>Search</symphony-h4>\n    <symphony-icon-wrapper\n      *ngIf=\"jobListModel.hasAdvanceSearch\"\n      (clicked)=\"onAdvanceSearchClick()\"\n      advance-search-icon\n      [isInverse]=\"true\"\n      class=\"sfx-position-relative\"\n    >\n      <symphony-icon [icon]=\"'si-search-advanced'\"></symphony-icon>\n      <symphony-advance-filter-selected-counter\n        *ngIf=\"jobListModel.advancedSearchFilterCount\"\n        [advancedSearchFilterCount]=\"jobListModel.advancedSearchFilterCount\"\n      ></symphony-advance-filter-selected-counter>\n    </symphony-icon-wrapper>\n    <symphony-h5\n      *ngIf=\"jobListModel.hasAdvanceSearch\"\n      class=\"sfx-mt-10 sfx-d-flex\"\n      advance-search\n      >Advanced Search</symphony-h5\n    >\n    <symphony-tooltip-wrapper\n      load-last\n      *ngIf=\"jobListModel.hasLoadLast\"\n      [placement]=\"'top'\"\n      [tooltipHtml]=\"jobListModel.loadLastSearchTooltip\"\n    >\n      <symphony-icon-wrapper [isInverse]=\"true\" (clicked)=\"onLoadLastClick()\">\n        <symphony-icon [icon]=\"'si-refresh'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n    <symphony-tooltip-wrapper\n      load-last\n      *ngIf=\"jobListModel.hasClearSearch\"\n      [placement]=\"'top'\"\n      [tooltipHtml]=\"jobListModel.clearSearchTooltip\"\n    >\n      <symphony-icon-wrapper [isInverse]=\"true\">\n        <symphony-icon [icon]=\"'si-search-clear'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n    <symphony-contextual-menu\n      *ngIf=\"jobListModel.hasFilterMoreOption\"\n      more-options\n      [model]=\"jobListModel.moreActions\"\n      (itemClick)=\"onItemClick($event)\"\n    >\n    </symphony-contextual-menu>\n    <symphony-input-text\n      *ngIf=\"!jobListModel.overrideFilterOne\"\n      filter1\n      [label]=\"'Job Category'\"\n      [placeholder]=\"'Enter Job Category'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"onJobCategorySearch($event)\"\n    >\n    </symphony-input-text>\n\n    <ng-content ngProjectAs=\"[filter1]\" select=\"[filter1]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter2]\" select=\"[filter2]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter3]\" select=\"[filter3]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter4]\" select=\"[filter4]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter5]\" select=\"[filter5]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter6]\" select=\"[filter6]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter7]\" select=\"[filter7]\"></ng-content>\n  </symphony-filter-area>\n  <symphony-action-bar-job-list\n    sfx-actions\n    [gridActionModel]=\"jobListModel.gridActionModel\"\n    [gridControlsModel]=\"jobListModel.gridControlsModel\"\n    (gridControlClick)=\"onGridControlClick($event)\"\n    (gridActionClick)=\"onGridActionClick($event)\"\n    [hasActionToggle]=\"jobListModel.hasActionToggle\"\n  ></symphony-action-bar-job-list>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"jobListModel.grid.columnDefs\"\n    [defaultColDef]=\"jobListModel.grid.defaultColumnDef\"\n    [rowData]=\"jobListModel.grid.rowData\"\n    [pageSize]=\"jobListModel.grid.pageSize\"\n    [onGridReadyFunction]=\"jobListModel.grid.onGridReadyFunction\"\n    [rowModelType]=\"jobListModel.grid.rowModelType\"\n    rowSelectionMode=\"multiple\"\n    [hasNoPaddingleft]=\"true\"\n    [suppressRowClickSelection]=\"true\"\n    (cellClick)=\"onCellClick($event)\"\n  ></symphony-grid>\n</symphony-contact-list-template>\n", styles: [""], components: [{ type: ContactListTemplateComponent, selector: "symphony-contact-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: FilterAreaComponent, selector: "symphony-filter-area" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: AdvanceFilterSelectedCounterComponent, selector: "symphony-advance-filter-selected-counter", inputs: ["advancedSearchFilterCount"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml", "toolTipClass"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled"], outputs: ["textChange"] }, { type: ActionBarJobListComponent, selector: "symphony-action-bar-job-list", inputs: ["gridActionModel", "gridControlsModel", "hasActionToggle"], outputs: ["gridControlClick", "gridActionClick"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu"], outputs: ["sortChanged", "cellClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+JobListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: JobListPageComponent, selector: "symphony-job-list-page", inputs: { jobListModel: "jobListModel" }, outputs: { addButtonClicked: "addButtonClicked", advanceSearchClicked: "advanceSearchClicked", lastLoadClicked: "lastLoadClicked", itemClicked: "itemClicked", jobCategorySearchChange: "jobCategorySearchChange", gridControlClicked: "gridControlClicked", gridActionClicked: "gridActionClicked", rowChecked: "rowChecked", cellClick: "cellClick" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-contact-list-template *ngIf=\"jobListModel\">\n  <symphony-h3 sfx-header>Jobs</symphony-h3>\n  <symphony-icon-wrapper\n    *ngIf=\"jobListModel.hasCreateJob\"\n    (clicked)=\"onAddButtonClick()\"\n    sfx-page-action\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-filter-area sfx-filter-area>\n    <symphony-h4 title>Search</symphony-h4>\n    <symphony-icon-wrapper\n      *ngIf=\"jobListModel.hasAdvanceSearch\"\n      (clicked)=\"onAdvanceSearchClick()\"\n      advance-search-icon\n      [isInverse]=\"true\"\n      class=\"sfx-position-relative\"\n    >\n      <symphony-icon [icon]=\"'si-search-advanced'\"></symphony-icon>\n      <symphony-advance-filter-selected-counter\n        *ngIf=\"jobListModel.advancedSearchFilterCount\"\n        [advancedSearchFilterCount]=\"jobListModel.advancedSearchFilterCount\"\n      ></symphony-advance-filter-selected-counter>\n    </symphony-icon-wrapper>\n    <symphony-h5\n      *ngIf=\"jobListModel.hasAdvanceSearch\"\n      class=\"sfx-mt-10 sfx-d-flex\"\n      advance-search\n      >Advanced Search</symphony-h5\n    >\n    <symphony-tooltip-wrapper\n      load-last\n      *ngIf=\"jobListModel.hasLoadLast\"\n      [placement]=\"'top'\"\n      [tooltipHtml]=\"jobListModel.loadLastSearchTooltip\"\n    >\n      <symphony-icon-wrapper [isInverse]=\"true\" (clicked)=\"onLoadLastClick()\">\n        <symphony-icon [icon]=\"'si-refresh'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n    <symphony-tooltip-wrapper\n      load-last\n      *ngIf=\"jobListModel.hasClearSearch\"\n      [placement]=\"'top'\"\n      [tooltipHtml]=\"jobListModel.clearSearchTooltip\"\n    >\n      <symphony-icon-wrapper [isInverse]=\"true\">\n        <symphony-icon [icon]=\"'si-search-clear'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n    <symphony-contextual-menu\n      *ngIf=\"jobListModel.hasFilterMoreOption\"\n      more-options\n      [model]=\"jobListModel.moreActions\"\n      (itemClick)=\"onItemClick($event)\"\n    >\n    </symphony-contextual-menu>\n    <symphony-input-text\n      *ngIf=\"!jobListModel.overrideFilterOne\"\n      filter1\n      [label]=\"'Job Category'\"\n      [placeholder]=\"'Enter Job Category'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"onJobCategorySearch($event)\"\n    >\n    </symphony-input-text>\n\n    <ng-content ngProjectAs=\"[filter1]\" select=\"[filter1]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter2]\" select=\"[filter2]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter3]\" select=\"[filter3]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter4]\" select=\"[filter4]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter5]\" select=\"[filter5]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter6]\" select=\"[filter6]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter7]\" select=\"[filter7]\"></ng-content>\n  </symphony-filter-area>\n  <symphony-action-bar-job-list\n    sfx-actions\n    [gridActionModel]=\"jobListModel.gridActionModel\"\n    [gridControlsModel]=\"jobListModel.gridControlsModel\"\n    (gridControlClick)=\"onGridControlClick($event)\"\n    (gridActionClick)=\"onGridActionClick($event)\"\n    [hasActionToggle]=\"jobListModel.hasActionToggle\"\n  ></symphony-action-bar-job-list>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"jobListModel.grid.columnDefs\"\n    [defaultColDef]=\"jobListModel.grid.defaultColumnDef\"\n    [rowData]=\"jobListModel.grid.rowData\"\n    [pageSize]=\"jobListModel.grid.pageSize\"\n    [onGridReadyFunction]=\"jobListModel.grid.onGridReadyFunction\"\n    [rowModelType]=\"jobListModel.grid.rowModelType\"\n    rowSelectionMode=\"multiple\"\n    [hasNoPaddingleft]=\"true\"\n    [suppressRowClickSelection]=\"true\"\n    (cellClick)=\"onCellClick($event)\"\n  ></symphony-grid>\n</symphony-contact-list-template>\n", styles: [""], components: [{ type: ContactListTemplateComponent, selector: "symphony-contact-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: FilterAreaComponent, selector: "symphony-filter-area" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: AdvanceFilterSelectedCounterComponent, selector: "symphony-advance-filter-selected-counter", inputs: ["advancedSearchFilterCount"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml", "toolTipClass"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick"], outputs: ["textChange"] }, { type: ActionBarJobListComponent, selector: "symphony-action-bar-job-list", inputs: ["gridActionModel", "gridControlsModel", "hasActionToggle"], outputs: ["gridControlClick", "gridActionClick"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu"], outputs: ["sortChanged", "cellClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: JobListPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-job-list-page', template: "<symphony-contact-list-template *ngIf=\"jobListModel\">\n  <symphony-h3 sfx-header>Jobs</symphony-h3>\n  <symphony-icon-wrapper\n    *ngIf=\"jobListModel.hasCreateJob\"\n    (clicked)=\"onAddButtonClick()\"\n    sfx-page-action\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-filter-area sfx-filter-area>\n    <symphony-h4 title>Search</symphony-h4>\n    <symphony-icon-wrapper\n      *ngIf=\"jobListModel.hasAdvanceSearch\"\n      (clicked)=\"onAdvanceSearchClick()\"\n      advance-search-icon\n      [isInverse]=\"true\"\n      class=\"sfx-position-relative\"\n    >\n      <symphony-icon [icon]=\"'si-search-advanced'\"></symphony-icon>\n      <symphony-advance-filter-selected-counter\n        *ngIf=\"jobListModel.advancedSearchFilterCount\"\n        [advancedSearchFilterCount]=\"jobListModel.advancedSearchFilterCount\"\n      ></symphony-advance-filter-selected-counter>\n    </symphony-icon-wrapper>\n    <symphony-h5\n      *ngIf=\"jobListModel.hasAdvanceSearch\"\n      class=\"sfx-mt-10 sfx-d-flex\"\n      advance-search\n      >Advanced Search</symphony-h5\n    >\n    <symphony-tooltip-wrapper\n      load-last\n      *ngIf=\"jobListModel.hasLoadLast\"\n      [placement]=\"'top'\"\n      [tooltipHtml]=\"jobListModel.loadLastSearchTooltip\"\n    >\n      <symphony-icon-wrapper [isInverse]=\"true\" (clicked)=\"onLoadLastClick()\">\n        <symphony-icon [icon]=\"'si-refresh'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n    <symphony-tooltip-wrapper\n      load-last\n      *ngIf=\"jobListModel.hasClearSearch\"\n      [placement]=\"'top'\"\n      [tooltipHtml]=\"jobListModel.clearSearchTooltip\"\n    >\n      <symphony-icon-wrapper [isInverse]=\"true\">\n        <symphony-icon [icon]=\"'si-search-clear'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n    <symphony-contextual-menu\n      *ngIf=\"jobListModel.hasFilterMoreOption\"\n      more-options\n      [model]=\"jobListModel.moreActions\"\n      (itemClick)=\"onItemClick($event)\"\n    >\n    </symphony-contextual-menu>\n    <symphony-input-text\n      *ngIf=\"!jobListModel.overrideFilterOne\"\n      filter1\n      [label]=\"'Job Category'\"\n      [placeholder]=\"'Enter Job Category'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"onJobCategorySearch($event)\"\n    >\n    </symphony-input-text>\n\n    <ng-content ngProjectAs=\"[filter1]\" select=\"[filter1]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter2]\" select=\"[filter2]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter3]\" select=\"[filter3]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter4]\" select=\"[filter4]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter5]\" select=\"[filter5]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter6]\" select=\"[filter6]\"></ng-content>\n    <ng-content ngProjectAs=\"[filter7]\" select=\"[filter7]\"></ng-content>\n  </symphony-filter-area>\n  <symphony-action-bar-job-list\n    sfx-actions\n    [gridActionModel]=\"jobListModel.gridActionModel\"\n    [gridControlsModel]=\"jobListModel.gridControlsModel\"\n    (gridControlClick)=\"onGridControlClick($event)\"\n    (gridActionClick)=\"onGridActionClick($event)\"\n    [hasActionToggle]=\"jobListModel.hasActionToggle\"\n  ></symphony-action-bar-job-list>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"jobListModel.grid.columnDefs\"\n    [defaultColDef]=\"jobListModel.grid.defaultColumnDef\"\n    [rowData]=\"jobListModel.grid.rowData\"\n    [pageSize]=\"jobListModel.grid.pageSize\"\n    [onGridReadyFunction]=\"jobListModel.grid.onGridReadyFunction\"\n    [rowModelType]=\"jobListModel.grid.rowModelType\"\n    rowSelectionMode=\"multiple\"\n    [hasNoPaddingleft]=\"true\"\n    [suppressRowClickSelection]=\"true\"\n    (cellClick)=\"onCellClick($event)\"\n  ></symphony-grid>\n</symphony-contact-list-template>\n", styles: [""] }]
@@ -9546,7 +9555,7 @@ class ReportLicenseDetailsPageComponent {
     }
 }
 ReportLicenseDetailsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportLicenseDetailsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ReportLicenseDetailsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportLicenseDetailsPageComponent, selector: "symphony-report-license-details-page", inputs: { reportLicenseModel: "reportLicenseModel", isLoadingLicensePage: "isLoadingLicensePage", errorPageState: "errorPageState" }, outputs: { keywordSearchChange: "keywordSearchChange", statusFilterChange: "statusFilterChange", modifiedFilterChange: "modifiedFilterChange" }, ngImport: i0, template: "<section *ngIf=\"reportLicenseModel && !isLoadingLicensePage\">\n<div *ngIf=\"reportLicenseModel.statusCard\" class=\"row mb-space space-around-card\">\n<div *ngFor=\"let card of reportLicenseModel.statusCard\" class=\"col-md-3 card-space\">\n  <symphony-status-card  [statusCardModel]=\"card\"></symphony-status-card>\n</div>\n</div>\n<div *ngIf=\"reportLicenseModel.showFilters\" class=\"filter-area-section mb-space\">\n  <div *ngIf=\"reportLicenseModel.showSearchBox\" class=\"wd-100\">\n  <symphony-input-text\n  filter-one\n  [label]=\"'Keyword'\"\n  [placeholder]=\"'Enter Search Value'\"\n  [icon]=\"'si-search-new'\"\n  [isInverse]=\"true\"\n  (textChange)=\"onKeywordSearch($event)\"\n>\n</symphony-input-text>\n  </div>\n  <div *ngIf=\"reportLicenseModel.statusDropdown\" class=\"wd-100\">\n    <symphony-input-dropdown\n    filter-one\n    [isInverse]=\"true\"\n    [inputDropdownListModel]=\"reportLicenseModel.statusDropdown\"\n    (selectItem)=\"onStatusFilterChange($event)\">\n  </symphony-input-dropdown>\n    </div>\n    <div *ngIf=\"reportLicenseModel.lastModifiedDropdown\" class=\"wd-100\">\n      <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"reportLicenseModel.lastModifiedDropdown\"\n      (selectItem)=\"onModifiedFilterChange($event)\">\n    </symphony-input-dropdown>\n    </div>\n</div>\n<div *ngIf=\"reportLicenseModel.formattedCounterModel?.count\" class=\"fl-right mb-space\">\n  <symphony-formatted-counter [model]=\"reportLicenseModel.formattedCounterModel\"></symphony-formatted-counter>\n</div>\n<div class=\"grid-clear\">\n<symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"reportLicenseModel.grid.columnDefs\"\n    [defaultColDef]=\"reportLicenseModel.grid.defaultColumnDef\"\n    [rowData]=\"reportLicenseModel.grid.rowData\"\n    [pageSize]=\"reportLicenseModel.grid.pageSize\"\n    [onGridReadyFunction]=\"reportLicenseModel.grid.onGridReadyFunction\"\n    [rowModelType]=\"reportLicenseModel.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n    [suppressRowClickSelection]=\"true\"\n    [rowClassRules]=\"reportLicenseModel.grid.rowClassRules\"\n    [gridContextMenu]=\"true\"\n></symphony-grid>\n</div>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingLicensePage\"></symphony-sfx-loader>\n\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingLicensePage\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to reload it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [".filter-area-section{background:#D2D8E5;padding:1.875rem 2.5rem .9375rem;border-radius:.9375rem;display:flex;width:100%}.mb-space{margin-bottom:2rem}.card-space{margin-bottom:1rem}.fl-right{float:right}.grid-clear{clear:both}.space-around-card{margin-left:-30px!important;margin-right:-30px!important}.wd-100{width:100%}\n"], components: [{ type: StatusCardComponent, selector: "symphony-status-card", inputs: ["statusCardModel"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled"], outputs: ["textChange"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: FormattedCounterComponent, selector: "symphony-formatted-counter", inputs: ["model"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu"], outputs: ["sortChanged", "cellClick"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ReportLicenseDetailsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportLicenseDetailsPageComponent, selector: "symphony-report-license-details-page", inputs: { reportLicenseModel: "reportLicenseModel", isLoadingLicensePage: "isLoadingLicensePage", errorPageState: "errorPageState" }, outputs: { keywordSearchChange: "keywordSearchChange", statusFilterChange: "statusFilterChange", modifiedFilterChange: "modifiedFilterChange" }, ngImport: i0, template: "<section *ngIf=\"reportLicenseModel && !isLoadingLicensePage\">\n<div *ngIf=\"reportLicenseModel.statusCard\" class=\"row mb-space space-around-card\">\n<div *ngFor=\"let card of reportLicenseModel.statusCard\" class=\"col-md-3 card-space\">\n  <symphony-status-card  [statusCardModel]=\"card\"></symphony-status-card>\n</div>\n</div>\n<div *ngIf=\"reportLicenseModel.showFilters\" class=\"filter-area-section mb-space\">\n  <div *ngIf=\"reportLicenseModel.showSearchBox\" class=\"wd-100\">\n  <symphony-input-text\n  filter-one\n  [label]=\"'Keyword'\"\n  [placeholder]=\"'Enter Search Value'\"\n  [icon]=\"'si-search-new'\"\n  [isInverse]=\"true\"\n  (textChange)=\"onKeywordSearch($event)\"\n>\n</symphony-input-text>\n  </div>\n  <div *ngIf=\"reportLicenseModel.statusDropdown\" class=\"wd-100\">\n    <symphony-input-dropdown\n    filter-one\n    [isInverse]=\"true\"\n    [inputDropdownListModel]=\"reportLicenseModel.statusDropdown\"\n    (selectItem)=\"onStatusFilterChange($event)\">\n  </symphony-input-dropdown>\n    </div>\n    <div *ngIf=\"reportLicenseModel.lastModifiedDropdown\" class=\"wd-100\">\n      <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"reportLicenseModel.lastModifiedDropdown\"\n      (selectItem)=\"onModifiedFilterChange($event)\">\n    </symphony-input-dropdown>\n    </div>\n</div>\n<div *ngIf=\"reportLicenseModel.formattedCounterModel?.count\" class=\"fl-right mb-space\">\n  <symphony-formatted-counter [model]=\"reportLicenseModel.formattedCounterModel\"></symphony-formatted-counter>\n</div>\n<div class=\"grid-clear\">\n<symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"reportLicenseModel.grid.columnDefs\"\n    [defaultColDef]=\"reportLicenseModel.grid.defaultColumnDef\"\n    [rowData]=\"reportLicenseModel.grid.rowData\"\n    [pageSize]=\"reportLicenseModel.grid.pageSize\"\n    [onGridReadyFunction]=\"reportLicenseModel.grid.onGridReadyFunction\"\n    [rowModelType]=\"reportLicenseModel.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n    [suppressRowClickSelection]=\"true\"\n    [rowClassRules]=\"reportLicenseModel.grid.rowClassRules\"\n    [gridContextMenu]=\"true\"\n></symphony-grid>\n</div>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingLicensePage\"></symphony-sfx-loader>\n\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingLicensePage\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to reload it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [".filter-area-section{background:#D2D8E5;padding:1.875rem 2.5rem .9375rem;border-radius:.9375rem;display:flex;width:100%}.mb-space{margin-bottom:2rem}.card-space{margin-bottom:1rem}.fl-right{float:right}.grid-clear{clear:both}.space-around-card{margin-left:-30px!important;margin-right:-30px!important}.wd-100{width:100%}\n"], components: [{ type: StatusCardComponent, selector: "symphony-status-card", inputs: ["statusCardModel"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick"], outputs: ["textChange"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: FormattedCounterComponent, selector: "symphony-formatted-counter", inputs: ["model"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu"], outputs: ["sortChanged", "cellClick"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportLicenseDetailsPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-report-license-details-page', template: "<section *ngIf=\"reportLicenseModel && !isLoadingLicensePage\">\n<div *ngIf=\"reportLicenseModel.statusCard\" class=\"row mb-space space-around-card\">\n<div *ngFor=\"let card of reportLicenseModel.statusCard\" class=\"col-md-3 card-space\">\n  <symphony-status-card  [statusCardModel]=\"card\"></symphony-status-card>\n</div>\n</div>\n<div *ngIf=\"reportLicenseModel.showFilters\" class=\"filter-area-section mb-space\">\n  <div *ngIf=\"reportLicenseModel.showSearchBox\" class=\"wd-100\">\n  <symphony-input-text\n  filter-one\n  [label]=\"'Keyword'\"\n  [placeholder]=\"'Enter Search Value'\"\n  [icon]=\"'si-search-new'\"\n  [isInverse]=\"true\"\n  (textChange)=\"onKeywordSearch($event)\"\n>\n</symphony-input-text>\n  </div>\n  <div *ngIf=\"reportLicenseModel.statusDropdown\" class=\"wd-100\">\n    <symphony-input-dropdown\n    filter-one\n    [isInverse]=\"true\"\n    [inputDropdownListModel]=\"reportLicenseModel.statusDropdown\"\n    (selectItem)=\"onStatusFilterChange($event)\">\n  </symphony-input-dropdown>\n    </div>\n    <div *ngIf=\"reportLicenseModel.lastModifiedDropdown\" class=\"wd-100\">\n      <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"reportLicenseModel.lastModifiedDropdown\"\n      (selectItem)=\"onModifiedFilterChange($event)\">\n    </symphony-input-dropdown>\n    </div>\n</div>\n<div *ngIf=\"reportLicenseModel.formattedCounterModel?.count\" class=\"fl-right mb-space\">\n  <symphony-formatted-counter [model]=\"reportLicenseModel.formattedCounterModel\"></symphony-formatted-counter>\n</div>\n<div class=\"grid-clear\">\n<symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"reportLicenseModel.grid.columnDefs\"\n    [defaultColDef]=\"reportLicenseModel.grid.defaultColumnDef\"\n    [rowData]=\"reportLicenseModel.grid.rowData\"\n    [pageSize]=\"reportLicenseModel.grid.pageSize\"\n    [onGridReadyFunction]=\"reportLicenseModel.grid.onGridReadyFunction\"\n    [rowModelType]=\"reportLicenseModel.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n    [suppressRowClickSelection]=\"true\"\n    [rowClassRules]=\"reportLicenseModel.grid.rowClassRules\"\n    [gridContextMenu]=\"true\"\n></symphony-grid>\n</div>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingLicensePage\"></symphony-sfx-loader>\n\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingLicensePage\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to reload it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [".filter-area-section{background:#D2D8E5;padding:1.875rem 2.5rem .9375rem;border-radius:.9375rem;display:flex;width:100%}.mb-space{margin-bottom:2rem}.card-space{margin-bottom:1rem}.fl-right{float:right}.grid-clear{clear:both}.space-around-card{margin-left:-30px!important;margin-right:-30px!important}.wd-100{width:100%}\n"] }]