@symphony-talent/component-library 4.19.0 → 4.21.0

package/esm2020/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.component.mjs

@@ -178,7 +178,7 @@ export class InputSearchCheckboxDropdownComponent {
     }
 }
 InputSearchCheckboxDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownComponent, deps: [{ token: i1.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" }, 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    />\n    <symphony-icon [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: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i7.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: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.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: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "trimId": i9.TrimIdPipe, "capitalizeFirstCharacter": i1.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" }, 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    />\n    <symphony-icon [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: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i7.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: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.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: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "trimId": i9.TrimIdPipe, "capitalizeFirstCharacter": i1.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    />\n    <symphony-icon [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"] }]

package/esm2020/lib/atoms/notifications/notifications.component.mjs

@@ -15,7 +15,7 @@ export class NotificationsComponent {
     }
 }
 NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NotificationsComponent, selector: "symphony-notifications", inputs: { model: "model" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"btn-group\" dropdown [insideClick]=\"true\">\n  <button\n    id=\"button-basic\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    aria-controls=\"dropdown-basic\"\n    aria-label=\"more-actions-menu\"\n  >\n    <symphony-icon [icon]=\"'si-notification'\"></symphony-icon>\n\n    <span class=\"notification-on\" *ngIf=\"model?.unreadNotificationCount > 0\">\n      {{ model.unreadNotificationCount }}</span\n    >\n  </button>\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"button-basic\"\n  >\n    <li role=\"menuitem\" class=\"sfx-p-20\">\n      <symphony-h3 [text]=\"model.title\"></symphony-h3>\n    </li>\n    <li *ngIf=\"!model.isLoading\">\n      <ul class=\"list-unstyled sfx-notification-list\">\n        <li\n          role=\"menuitem\"\n          class=\"sfx-notification-list-items\"\n          *ngFor=\"let notification of model.notifications\"\n        >\n          <div class=\"dropdown-item sfx-position-relative\">\n            <div class=\"notification-wrap\">\n              <div class=\"notification-text sfx-mb-10\">\n                <symphony-icon\n                  *ngIf=\"notification.icon\"\n                  [icon]=\"notification.icon\"\n                  class=\"icon-position\"\n                ></symphony-icon>\n                <span *ngIf=\"!notification.isHtml\">{{\n                  notification.text\n                }}</span>\n                <div\n                  class=\"hasBold\"\n                  *ngIf=\"notification.isHtml\"\n                  [innerHTML]=\"notification.text\"\n                ></div>\n              </div>\n              <div class=\"notification-footer\">\n                <span>{{ notification.timestamp }}</span>\n                <span\n                  class=\"sfx-font-bold sfx-cursor-pointer notification-action\"\n                  (click)=\"onActionClick(notification)\"\n                  >{{ notification.action }}</span\n                >\n              </div>\n            </div>\n          </div>\n          <div class=\"horizontal-divider\"></div>\n        </li>\n        <li class=\"sfx-mt-20\" *ngIf=\"model.isNotificationLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </li>\n      </ul>\n    </li>\n    <li class=\"sfx-mt-20 sfx-mb-20\" *ngIf=\"model.isLoading\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </li>\n    <li\n      class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\"\n      *ngIf=\"model.notifications.length === 0 && !model.isLoading\"\n    >\n      <symphony-h5 [text]=\"model.emptyState\"></symphony-h5>\n    </li>\n  </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#000000;padding:0;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#fff;position:relative}.btn-group button.dropdown-toggle.btn:hover{background:#565656;color:#fff!important}.btn-group button.dropdown-toggle.btn:hover .notification-on{border-color:#565656}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group button.dropdown-toggle.btn symphony-icon{height:18px}.btn-group button.dropdown-toggle.btn .notification-on{color:#000;width:18px;height:18px;background:#FFF;position:absolute;border:2px solid #000;border-radius:50%;top:0px;right:3px;font-size:9px;display:flex;justify-content:center;align-items:flex-end}.btn-group .dropdown-menu{width:360px;margin-top:10px;border:none;border-radius:10px;padding:0;right:-10px;left:auto;box-shadow:0 0 30px rgba(0,0,0,.2);max-height:none;overflow:inherit;background:#ffffff}.btn-group .dropdown-menu .sfx-notification-list{max-height:280px;overflow-y:scroll;margin-bottom:20px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item{padding:0 15px 0 25px;line-height:20px;color:#000;border-radius:10px;background-color:#fff}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item:hover{background:#fff;color:#000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap{position:relative;padding:10px 10px 10px 25px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .hasBold span{font-family:neuzeit_groteskbold,sans-serif}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status{content:\"\";width:15px;height:15px;background:#00bb5b;border-radius:50%;position:absolute;top:12px;left:0}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status.red{background:#d60000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-footer{display:flex;justify-content:space-between}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items .horizontal-divider{border-bottom:1px solid #d9d9d9;margin:0 15px}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items:last-child .horizontal-divider{border-bottom:none}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#565656}.btn-group.open button.dropdown-toggle.btn .notification-on{border-color:#565656}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}::-webkit-scrollbar-thumb:hover{cursor:pointer}.icon-position{position:absolute;left:-5px;top:12px}.notification-action:hover{text-decoration:underline}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: i4.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i5.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i5.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NotificationsComponent, selector: "symphony-notifications", inputs: { model: "model" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"btn-group\" dropdown [insideClick]=\"true\">\n  <button\n    id=\"button-basic\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    aria-controls=\"dropdown-basic\"\n    aria-label=\"more-actions-menu\"\n  >\n    <symphony-icon [icon]=\"'si-notification'\"></symphony-icon>\n\n    <span class=\"notification-on\" *ngIf=\"model?.unreadNotificationCount > 0\">\n      {{ model.unreadNotificationCount }}</span\n    >\n  </button>\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"button-basic\"\n  >\n    <li role=\"menuitem\" class=\"sfx-p-20\">\n      <symphony-h3 [text]=\"model.title\"></symphony-h3>\n    </li>\n    <li *ngIf=\"!model.isLoading\">\n      <ul class=\"list-unstyled sfx-notification-list\">\n        <li\n          role=\"menuitem\"\n          class=\"sfx-notification-list-items\"\n          *ngFor=\"let notification of model.notifications\"\n        >\n          <div class=\"dropdown-item sfx-position-relative\">\n            <div class=\"notification-wrap\">\n              <div class=\"notification-text sfx-mb-10\">\n                <symphony-icon\n                  *ngIf=\"notification.icon\"\n                  [icon]=\"notification.icon\"\n                  class=\"icon-position\"\n                ></symphony-icon>\n                <span *ngIf=\"!notification.isHtml\">{{\n                  notification.text\n                }}</span>\n                <div\n                  class=\"hasBold\"\n                  *ngIf=\"notification.isHtml\"\n                  [innerHTML]=\"notification.text\"\n                ></div>\n              </div>\n              <div class=\"notification-footer\">\n                <span>{{ notification.timestamp }}</span>\n                <span\n                  class=\"sfx-font-bold sfx-cursor-pointer notification-action\"\n                  (click)=\"onActionClick(notification)\"\n                  >{{ notification.action }}</span\n                >\n              </div>\n            </div>\n          </div>\n          <div class=\"horizontal-divider\"></div>\n        </li>\n        <li class=\"sfx-mt-20\" *ngIf=\"model.isNotificationLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </li>\n      </ul>\n    </li>\n    <li class=\"sfx-mt-20 sfx-mb-20\" *ngIf=\"model.isLoading\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </li>\n    <li\n      class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\"\n      *ngIf=\"model.notifications.length === 0 && !model.isLoading\"\n    >\n      <symphony-h5 [text]=\"model.emptyState\"></symphony-h5>\n    </li>\n  </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#000000;padding:0;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#fff;position:relative}.btn-group button.dropdown-toggle.btn:hover{background:#565656;color:#fff!important}.btn-group button.dropdown-toggle.btn:hover .notification-on{border-color:#565656}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group button.dropdown-toggle.btn symphony-icon{height:18px}.btn-group button.dropdown-toggle.btn .notification-on{color:#000;width:18px;height:18px;background:#FFF;position:absolute;border:2px solid #000;border-radius:50%;top:0px;right:3px;font-size:9px;display:flex;justify-content:center;align-items:flex-end}.btn-group .dropdown-menu{width:360px;margin-top:10px;border:none;border-radius:10px;padding:0;right:-10px;left:auto;box-shadow:0 0 30px rgba(0,0,0,.2);max-height:none;overflow:inherit;background:#ffffff}.btn-group .dropdown-menu .sfx-notification-list{max-height:280px;overflow-y:scroll;margin-bottom:20px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item{padding:0 15px 0 25px;line-height:20px;color:#000;border-radius:10px;background-color:#fff}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item:hover{background:#fff;color:#000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap{position:relative;padding:10px 10px 10px 25px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .hasBold span{font-family:neuzeit_groteskbold,sans-serif}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status{content:\"\";width:15px;height:15px;background:#00bb5b;border-radius:50%;position:absolute;top:12px;left:0}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status.red{background:#d60000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-footer{display:flex;justify-content:space-between}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items .horizontal-divider{border-bottom:1px solid #d9d9d9;margin:0 15px}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items:last-child .horizontal-divider{border-bottom:none}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#565656}.btn-group.open button.dropdown-toggle.btn .notification-on{border-color:#565656}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}::-webkit-scrollbar-thumb:hover{cursor:pointer}.icon-position{position:absolute;left:-5px;top:12px}.notification-action:hover{text-decoration:underline}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i4.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i5.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i5.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NotificationsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-notifications', template: "<div class=\"btn-group\" dropdown [insideClick]=\"true\">\n  <button\n    id=\"button-basic\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    aria-controls=\"dropdown-basic\"\n    aria-label=\"more-actions-menu\"\n  >\n    <symphony-icon [icon]=\"'si-notification'\"></symphony-icon>\n\n    <span class=\"notification-on\" *ngIf=\"model?.unreadNotificationCount > 0\">\n      {{ model.unreadNotificationCount }}</span\n    >\n  </button>\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"button-basic\"\n  >\n    <li role=\"menuitem\" class=\"sfx-p-20\">\n      <symphony-h3 [text]=\"model.title\"></symphony-h3>\n    </li>\n    <li *ngIf=\"!model.isLoading\">\n      <ul class=\"list-unstyled sfx-notification-list\">\n        <li\n          role=\"menuitem\"\n          class=\"sfx-notification-list-items\"\n          *ngFor=\"let notification of model.notifications\"\n        >\n          <div class=\"dropdown-item sfx-position-relative\">\n            <div class=\"notification-wrap\">\n              <div class=\"notification-text sfx-mb-10\">\n                <symphony-icon\n                  *ngIf=\"notification.icon\"\n                  [icon]=\"notification.icon\"\n                  class=\"icon-position\"\n                ></symphony-icon>\n                <span *ngIf=\"!notification.isHtml\">{{\n                  notification.text\n                }}</span>\n                <div\n                  class=\"hasBold\"\n                  *ngIf=\"notification.isHtml\"\n                  [innerHTML]=\"notification.text\"\n                ></div>\n              </div>\n              <div class=\"notification-footer\">\n                <span>{{ notification.timestamp }}</span>\n                <span\n                  class=\"sfx-font-bold sfx-cursor-pointer notification-action\"\n                  (click)=\"onActionClick(notification)\"\n                  >{{ notification.action }}</span\n                >\n              </div>\n            </div>\n          </div>\n          <div class=\"horizontal-divider\"></div>\n        </li>\n        <li class=\"sfx-mt-20\" *ngIf=\"model.isNotificationLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </li>\n      </ul>\n    </li>\n    <li class=\"sfx-mt-20 sfx-mb-20\" *ngIf=\"model.isLoading\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </li>\n    <li\n      class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\"\n      *ngIf=\"model.notifications.length === 0 && !model.isLoading\"\n    >\n      <symphony-h5 [text]=\"model.emptyState\"></symphony-h5>\n    </li>\n  </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#000000;padding:0;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#fff;position:relative}.btn-group button.dropdown-toggle.btn:hover{background:#565656;color:#fff!important}.btn-group button.dropdown-toggle.btn:hover .notification-on{border-color:#565656}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group button.dropdown-toggle.btn symphony-icon{height:18px}.btn-group button.dropdown-toggle.btn .notification-on{color:#000;width:18px;height:18px;background:#FFF;position:absolute;border:2px solid #000;border-radius:50%;top:0px;right:3px;font-size:9px;display:flex;justify-content:center;align-items:flex-end}.btn-group .dropdown-menu{width:360px;margin-top:10px;border:none;border-radius:10px;padding:0;right:-10px;left:auto;box-shadow:0 0 30px rgba(0,0,0,.2);max-height:none;overflow:inherit;background:#ffffff}.btn-group .dropdown-menu .sfx-notification-list{max-height:280px;overflow-y:scroll;margin-bottom:20px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item{padding:0 15px 0 25px;line-height:20px;color:#000;border-radius:10px;background-color:#fff}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item:hover{background:#fff;color:#000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap{position:relative;padding:10px 10px 10px 25px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .hasBold span{font-family:neuzeit_groteskbold,sans-serif}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status{content:\"\";width:15px;height:15px;background:#00bb5b;border-radius:50%;position:absolute;top:12px;left:0}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status.red{background:#d60000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-footer{display:flex;justify-content:space-between}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items .horizontal-divider{border-bottom:1px solid #d9d9d9;margin:0 15px}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items:last-child .horizontal-divider{border-bottom:none}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#565656}.btn-group.open button.dropdown-toggle.btn .notification-on{border-color:#565656}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}::-webkit-scrollbar-thumb:hover{cursor:pointer}.icon-position{position:absolute;left:-5px;top:12px}.notification-action:hover{text-decoration:underline}\n"] }]

package/esm2020/lib/atoms/sfx-loader/sfx-loader.component.mjs

@@ -8,13 +8,15 @@ export class SfxLoaderComponent {
     }
 }
 SfxLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SfxLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: { leftStyle: "leftStyle", message: "message" }, ngImport: i0, template: "<div class=\"col-md-12 sfx-loader\" [style.left.%]=\"leftStyle\"></div>\n<symphony-paragraph *ngIf=\"message?.length > 0\" class=\"text-center\">\n  {{ message }}\n</symphony-paragraph>\n", styles: [".sfx-loader{z-index:10000;float:none;padding-top:5px;padding-bottom:5px;height:70px;width:50px;position:relative;padding-inline:0;transform:translate(-50%);display:inline-block;vertical-align:top}.sfx-loader:before{content:\" \";border:5px solid #000000;border-radius:50%;border-top:5px solid #ffffff;width:50px;height:50px;animation:sfxspin .5s linear infinite;position:absolute}\n"], components: [{ type: i1.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SfxLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: { leftStyle: "leftStyle", message: "message", hasCustomMessage: "hasCustomMessage" }, ngImport: i0, template: "<div class=\"col-md-12 sfx-loader\" [style.left.%]=\"leftStyle\"></div>\n<symphony-paragraph *ngIf=\"message?.length > 0\" class=\"text-center\">\n  {{ message }}\n</symphony-paragraph>\n<div *ngIf=\"hasCustomMessage\" class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n  <ng-content select=\"[custom-message]\"></ng-content>\n</div>\n\n", styles: [".sfx-loader{z-index:10000;float:none;padding-top:5px;padding-bottom:5px;height:70px;width:50px;position:relative;padding-inline:0;transform:translate(-50%);display:inline-block;vertical-align:top}.sfx-loader:before{content:\" \";border:5px solid #000000;border-radius:50%;border-top:5px solid #ffffff;width:50px;height:50px;animation:sfxspin .5s linear infinite;position:absolute}\n"], components: [{ type: i1.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-sfx-loader', template: "<div class=\"col-md-12 sfx-loader\" [style.left.%]=\"leftStyle\"></div>\n<symphony-paragraph *ngIf=\"message?.length > 0\" class=\"text-center\">\n  {{ message }}\n</symphony-paragraph>\n", styles: [".sfx-loader{z-index:10000;float:none;padding-top:5px;padding-bottom:5px;height:70px;width:50px;position:relative;padding-inline:0;transform:translate(-50%);display:inline-block;vertical-align:top}.sfx-loader:before{content:\" \";border:5px solid #000000;border-radius:50%;border-top:5px solid #ffffff;width:50px;height:50px;animation:sfxspin .5s linear infinite;position:absolute}\n"] }]
+            args: [{ selector: 'symphony-sfx-loader', template: "<div class=\"col-md-12 sfx-loader\" [style.left.%]=\"leftStyle\"></div>\n<symphony-paragraph *ngIf=\"message?.length > 0\" class=\"text-center\">\n  {{ message }}\n</symphony-paragraph>\n<div *ngIf=\"hasCustomMessage\" class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n  <ng-content select=\"[custom-message]\"></ng-content>\n</div>\n\n", styles: [".sfx-loader{z-index:10000;float:none;padding-top:5px;padding-bottom:5px;height:70px;width:50px;position:relative;padding-inline:0;transform:translate(-50%);display:inline-block;vertical-align:top}.sfx-loader:before{content:\" \";border:5px solid #000000;border-radius:50%;border-top:5px solid #ffffff;width:50px;height:50px;animation:sfxspin .5s linear infinite;position:absolute}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { leftStyle: [{
                 type: Input
             }], message: [{
                 type: Input
+            }], hasCustomMessage: [{
+                type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Z4LWxvYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2F0b21zL3NmeC1sb2FkZXIvc2Z4LWxvYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2F0b21zL3NmeC1sb2FkZXIvc2Z4LWxvYWRlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQU9qRCxNQUFNLE9BQU8sa0JBQWtCO0lBSTdCO1FBSFMsY0FBUyxHQUFHLEVBQUUsQ0FBQztJQUdULENBQUM7OytHQUpMLGtCQUFrQjttR0FBbEIsa0JBQWtCLG1IQ1AvQiw2TEFJQTsyRkRHYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UscUJBQXFCOzBFQUt0QixTQUFTO3NCQUFqQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3ltcGhvbnktc2Z4LWxvYWRlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9zZngtbG9hZGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc2Z4LWxvYWRlci5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFNmeExvYWRlckNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGxlZnRTdHlsZSA9IDUwO1xuICBASW5wdXQoKSBtZXNzYWdlPzogc3RyaW5nO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cbn1cbiIsIjxkaXYgY2xhc3M9XCJjb2wtbWQtMTIgc2Z4LWxvYWRlclwiIFtzdHlsZS5sZWZ0LiVdPVwibGVmdFN0eWxlXCI+PC9kaXY+XG48c3ltcGhvbnktcGFyYWdyYXBoICpuZ0lmPVwibWVzc2FnZT8ubGVuZ3RoID4gMFwiIGNsYXNzPVwidGV4dC1jZW50ZXJcIj5cbiAge3sgbWVzc2FnZSB9fVxuPC9zeW1waG9ueS1wYXJhZ3JhcGg+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Z4LWxvYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2F0b21zL3NmeC1sb2FkZXIvc2Z4LWxvYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2F0b21zL3NmeC1sb2FkZXIvc2Z4LWxvYWRlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQU9qRCxNQUFNLE9BQU8sa0JBQWtCO0lBSTdCO1FBSFMsY0FBUyxHQUFHLEVBQUUsQ0FBQztJQUdULENBQUM7OytHQUpMLGtCQUFrQjttR0FBbEIsa0JBQWtCLHlKQ1AvQixvVkFRQTsyRkREYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UscUJBQXFCOzBFQUt0QixTQUFTO3NCQUFqQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N5bXBob255LXNmeC1sb2FkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vc2Z4LWxvYWRlci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NmeC1sb2FkZXIuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBTZnhMb2FkZXJDb21wb25lbnQge1xuICBASW5wdXQoKSBsZWZ0U3R5bGUgPSA1MDtcbiAgQElucHV0KCkgbWVzc2FnZT86IHN0cmluZztcbiAgQElucHV0KCkgaGFzQ3VzdG9tTWVzc2FnZT86IGJvb2xlYW47XG4gIGNvbnN0cnVjdG9yKCkge31cbn1cbiIsIjxkaXYgY2xhc3M9XCJjb2wtbWQtMTIgc2Z4LWxvYWRlclwiIFtzdHlsZS5sZWZ0LiVdPVwibGVmdFN0eWxlXCI+PC9kaXY+XG48c3ltcGhvbnktcGFyYWdyYXBoICpuZ0lmPVwibWVzc2FnZT8ubGVuZ3RoID4gMFwiIGNsYXNzPVwidGV4dC1jZW50ZXJcIj5cbiAge3sgbWVzc2FnZSB9fVxuPC9zeW1waG9ueS1wYXJhZ3JhcGg+XG48ZGl2ICpuZ0lmPVwiaGFzQ3VzdG9tTWVzc2FnZVwiIGNsYXNzPVwiY29sLXhzLTEyIGNvbC1zbS0xMiBjb2wtbWQtMTIgY29sLWxnLTEyXCI+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cIltjdXN0b20tbWVzc2FnZV1cIj48L25nLWNvbnRlbnQ+XG48L2Rpdj5cblxuIl19

package/esm2020/lib/organisms/document-management-list/document-management-list.component.mjs

@@ -23,7 +23,7 @@ export class DocumentManagementListComponent {
     }
 }
 DocumentManagementListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DocumentManagementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementListComponent, selector: "symphony-document-management-list", inputs: { isLoading: "isLoading", documentManagementList: "documentManagementList" }, outputs: { moreOptionClick: "moreOptionClick", previewClick: "previewClick", uploadClick: "uploadClick" }, ngImport: i0, template: "<section class=\"sf-d-block sfx-pb-20 sfx-border-bottom-black-5\">\n  <div class=\"dml-title-wrap\">\n    <symphony-h3 class=\"sfx-d-block sfx-pt-5\">Documents</symphony-h3>\n    <symphony-icon-wrapper (click)=\"onUploadClick()\"\n    class=\"dml-title-icon-right\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  </div>\n  <ul *ngIf=\"!isLoading\" class=\"list-unstyled dml-wrap\">\n    <li *ngFor=\"let dmItem of documentManagementList\">\n      <symphony-document-management-item\n        [documentManagementItemModel]=\"dmItem\"\n        (moreOptionClicked)=\"onMoreClick($event, dmItem)\"\n        (previewClicked)=\"onPreviewClick($event, dmItem)\"\n      ></symphony-document-management-item>\n    </li>\n  </ul>\n  <div *ngIf=\"isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</section>\n", styles: [".dml-wrap::-webkit-scrollbar{width:12px}.dml-wrap::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb:hover{cursor:pointer}.dml-wrap li{border-bottom:1px solid #bababa}.dml-wrap li:last-child{border-color:transparent}.dml-title-wrap{position:relative;margin-bottom:20px}.dml-title-wrap .dml-title-icon-right{position:absolute;top:0;right:0}\n"], components: [{ type: i1.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i2.IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: ["documentManagementItemModel"], outputs: ["previewClicked", "moreOptionClicked"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+DocumentManagementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementListComponent, selector: "symphony-document-management-list", inputs: { isLoading: "isLoading", documentManagementList: "documentManagementList" }, outputs: { moreOptionClick: "moreOptionClick", previewClick: "previewClick", uploadClick: "uploadClick" }, ngImport: i0, template: "<section class=\"sf-d-block sfx-pb-20 sfx-border-bottom-black-5\">\n  <div class=\"dml-title-wrap\">\n    <symphony-h3 class=\"sfx-d-block sfx-pt-5\">Documents</symphony-h3>\n    <symphony-icon-wrapper (click)=\"onUploadClick()\"\n    class=\"dml-title-icon-right\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  </div>\n  <ul *ngIf=\"!isLoading\" class=\"list-unstyled dml-wrap\">\n    <li *ngFor=\"let dmItem of documentManagementList\">\n      <symphony-document-management-item\n        [documentManagementItemModel]=\"dmItem\"\n        (moreOptionClicked)=\"onMoreClick($event, dmItem)\"\n        (previewClicked)=\"onPreviewClick($event, dmItem)\"\n      ></symphony-document-management-item>\n    </li>\n  </ul>\n  <div *ngIf=\"isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</section>\n", styles: [".dml-wrap::-webkit-scrollbar{width:12px}.dml-wrap::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb:hover{cursor:pointer}.dml-wrap li{border-bottom:1px solid #bababa}.dml-wrap li:last-child{border-color:transparent}.dml-title-wrap{position:relative;margin-bottom:20px}.dml-title-wrap .dml-title-icon-right{position:absolute;top:0;right:0}\n"], components: [{ type: i1.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i2.IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: ["documentManagementItemModel"], outputs: ["previewClicked", "moreOptionClicked"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-document-management-list', template: "<section class=\"sf-d-block sfx-pb-20 sfx-border-bottom-black-5\">\n  <div class=\"dml-title-wrap\">\n    <symphony-h3 class=\"sfx-d-block sfx-pt-5\">Documents</symphony-h3>\n    <symphony-icon-wrapper (click)=\"onUploadClick()\"\n    class=\"dml-title-icon-right\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  </div>\n  <ul *ngIf=\"!isLoading\" class=\"list-unstyled dml-wrap\">\n    <li *ngFor=\"let dmItem of documentManagementList\">\n      <symphony-document-management-item\n        [documentManagementItemModel]=\"dmItem\"\n        (moreOptionClicked)=\"onMoreClick($event, dmItem)\"\n        (previewClicked)=\"onPreviewClick($event, dmItem)\"\n      ></symphony-document-management-item>\n    </li>\n  </ul>\n  <div *ngIf=\"isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</section>\n", styles: [".dml-wrap::-webkit-scrollbar{width:12px}.dml-wrap::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb:hover{cursor:pointer}.dml-wrap li{border-bottom:1px solid #bababa}.dml-wrap li:last-child{border-color:transparent}.dml-title-wrap{position:relative;margin-bottom:20px}.dml-title-wrap .dml-title-icon-right{position:absolute;top:0;right:0}\n"] }]

package/esm2020/lib/organisms/feedback-login-modal/feedback-login-modal.component.mjs

@@ -25,7 +25,7 @@ export 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" }, 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>To access the feedback request, two-factor authentication is required. Please enter the verification code that was sent to the following email address:</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      >\n      </symphony-input-text>\n      <symphony-h5\n        class=\"sfx-d-inline-block sfx-cursor-pointer\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red\">\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\n      class=\"sfx-ml-20\"\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button>\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}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i3.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size"], outputs: ["textChange"] }, { type: i4.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: i6.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i7.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" }, 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>To access the feedback request, two-factor authentication is required. Please enter the verification code that was sent to the following email address:</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      >\n      </symphony-input-text>\n      <symphony-h5\n        class=\"sfx-d-inline-block sfx-cursor-pointer\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red\">\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\n      class=\"sfx-ml-20\"\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button>\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}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i3.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size"], outputs: ["textChange"] }, { type: i4.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i7.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>To access the feedback request, two-factor authentication is required. Please enter the verification code that was sent to the following email address:</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      >\n      </symphony-input-text>\n      <symphony-h5\n        class=\"sfx-d-inline-block sfx-cursor-pointer\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red\">\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\n      class=\"sfx-ml-20\"\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button>\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}\n"] }]

package/esm2020/lib/organisms/upload-resume-modal/upload-resume-modal.component.mjs

@@ -93,7 +93,7 @@ export class UploadResumeModalComponent {
     }
 }
 UploadResumeModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UploadResumeModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: UploadResumeModalComponent, selector: "symphony-upload-resume-modal", inputs: { uploadResumeModel: "uploadResumeModel", isLoading: "isLoading" }, outputs: { closeUploadComplete: "closeUploadComplete", buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", docTypeDropdowChange: "docTypeDropdowChange", updateResumeChecked: "updateResumeChecked", fileCloseClick: "fileCloseClick", getFileDetails: "getFileDetails" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && model\">\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 class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\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)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\" *ngIf=\"uploadResumeModel.showResumeParseCheckbox\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload-v2\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n          (getFileDetails)=\"onFileUpload($event)\"\n        ></symphony-file-upload-v2>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: i5.InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: i6.FileUploadV2Component, selector: "symphony-file-upload-v2" }, { type: i7.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: i8.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+UploadResumeModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: UploadResumeModalComponent, selector: "symphony-upload-resume-modal", inputs: { uploadResumeModel: "uploadResumeModel", isLoading: "isLoading" }, outputs: { closeUploadComplete: "closeUploadComplete", buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", docTypeDropdowChange: "docTypeDropdowChange", updateResumeChecked: "updateResumeChecked", fileCloseClick: "fileCloseClick", getFileDetails: "getFileDetails" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && model\">\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 class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\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)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\" *ngIf=\"uploadResumeModel.showResumeParseCheckbox\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload-v2\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n          (getFileDetails)=\"onFileUpload($event)\"\n        ></symphony-file-upload-v2>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: i5.InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: i6.FileUploadV2Component, selector: "symphony-file-upload-v2" }, { type: i7.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i8.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-upload-resume-modal', template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && model\">\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 class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\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)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\" *ngIf=\"uploadResumeModel.showResumeParseCheckbox\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload-v2\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n          (getFileDetails)=\"onFileUpload($event)\"\n        ></symphony-file-upload-v2>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"] }]

package/esm2020/lib/pages/feedback-list-page/feedback-list-page.component.mjs

@@ -15,7 +15,7 @@ export class FeedbackListPageComponent {
     }
 }
 FeedbackListPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackListPageComponent, selector: "symphony-feedback-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n\n  <symphony-feedback-card-list\n    *ngIf=\"!model.isLoading\"\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n\n  <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-sfx-loader [message]=\"model.message\"></symphony-sfx-loader>\n  </div>\n  <div *ngIf=\"model.errorMessage\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-paragraph class=\"text-center\">{{model.errorMessage}}</symphony-paragraph>\n  </div>\n</symphony-feedback-list-template>\n", styles: [".card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"], components: [{ type: i1.FeedbackListTemplateComponent, selector: "symphony-feedback-list-template" }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.FeedbackCardListComponent, selector: "symphony-feedback-card-list", inputs: ["feedbackCardList"], outputs: ["cardClick"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: i5.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackListPageComponent, selector: "symphony-feedback-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n\n  <symphony-feedback-card-list\n    *ngIf=\"!model.isLoading\"\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n\n  <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-sfx-loader [message]=\"model.message\"></symphony-sfx-loader>\n  </div>\n  <div *ngIf=\"model.errorMessage\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-paragraph class=\"text-center\">{{model.errorMessage}}</symphony-paragraph>\n  </div>\n</symphony-feedback-list-template>\n", styles: [".card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"], components: [{ type: i1.FeedbackListTemplateComponent, selector: "symphony-feedback-list-template" }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.FeedbackCardListComponent, selector: "symphony-feedback-card-list", inputs: ["feedbackCardList"], outputs: ["cardClick"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i5.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackListPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-list-page', encapsulation: ViewEncapsulation.None, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n\n  <symphony-feedback-card-list\n    *ngIf=\"!model.isLoading\"\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n\n  <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-sfx-loader [message]=\"model.message\"></symphony-sfx-loader>\n  </div>\n  <div *ngIf=\"model.errorMessage\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-paragraph class=\"text-center\">{{model.errorMessage}}</symphony-paragraph>\n  </div>\n</symphony-feedback-list-template>\n", styles: [".card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"] }]

package/esm2020/lib/pages/modals/advertise-modal/advertise-modal.component.mjs

@@ -211,7 +211,7 @@ export 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: i2.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i3.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: i6.TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: i7.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size"], outputs: ["textChange"] }, { type: i8.AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: i9.OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: i10.PhaserCardComponent, selector: "symphony-phaser-card", inputs: ["model", "isClickable", "hasHover"], outputs: ["cardClicked", "cardHover"] }, { type: i11.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i12.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: i13.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: i14.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: i2.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i3.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: i6.TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: i7.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size"], outputs: ["textChange"] }, { type: i8.AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: i9.OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: i10.PhaserCardComponent, selector: "symphony-phaser-card", inputs: ["model", "isClickable", "hasHover"], outputs: ["cardClicked", "cardHover"] }, { type: i11.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i12.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i13.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: i14.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"] }]

package/esm2020/lib/pages/modals/linkedin-premium-job-postings-modal/linkedin-premium-job-postings-modal.component.mjs

@@ -15,7 +15,7 @@ export class LinkedinPremiumJobPostingsModalComponent {
     }
 }
 LinkedinPremiumJobPostingsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LinkedinPremiumJobPostingsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LinkedinPremiumJobPostingsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LinkedinPremiumJobPostingsModalComponent, selector: "symphony-linkedin-premium-job-postings-modal", inputs: { isLoading: "isLoading" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideFooter]=\"true\" [hideSubtitle]=\"false\">\n  <symphony-h4 sfx-modal-title>LinkedIn Premium Postings</symphony-h4>\n  <symphony-paragraph sfx-modal-subtitle\n    ><a\n      sfx-modal-subtitle\n      target=\"_blank\"\n      href=\"https://www.linkedin.com/legal/jobs-terms-conditions\"\n      >LinkedIn Terms & Conditions</a\n    ></symphony-paragraph\n  >\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (click)=\"onCloseClick()\"\n  ></symphony-icon>\n  <div class=\"loader-container\" *ngIf=\"isLoading\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n  <ng-content\n    ngProjectAs=\"[sfx-modal-body-area]\"\n    select=\"[sfx-modal-body-area]\"\n  ></ng-content>\n</symphony-two-column-modal-template>\n", styles: [".loader-container{padding:20px;height:400px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+LinkedinPremiumJobPostingsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LinkedinPremiumJobPostingsModalComponent, selector: "symphony-linkedin-premium-job-postings-modal", inputs: { isLoading: "isLoading" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideFooter]=\"true\" [hideSubtitle]=\"false\">\n  <symphony-h4 sfx-modal-title>LinkedIn Premium Postings</symphony-h4>\n  <symphony-paragraph sfx-modal-subtitle\n    ><a\n      sfx-modal-subtitle\n      target=\"_blank\"\n      href=\"https://www.linkedin.com/legal/jobs-terms-conditions\"\n      >LinkedIn Terms & Conditions</a\n    ></symphony-paragraph\n  >\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (click)=\"onCloseClick()\"\n  ></symphony-icon>\n  <div class=\"loader-container\" *ngIf=\"isLoading\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n  <ng-content\n    ngProjectAs=\"[sfx-modal-body-area]\"\n    select=\"[sfx-modal-body-area]\"\n  ></ng-content>\n</symphony-two-column-modal-template>\n", styles: [".loader-container{padding:20px;height:400px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LinkedinPremiumJobPostingsModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-linkedin-premium-job-postings-modal', template: "<symphony-two-column-modal-template [hideFooter]=\"true\" [hideSubtitle]=\"false\">\n  <symphony-h4 sfx-modal-title>LinkedIn Premium Postings</symphony-h4>\n  <symphony-paragraph sfx-modal-subtitle\n    ><a\n      sfx-modal-subtitle\n      target=\"_blank\"\n      href=\"https://www.linkedin.com/legal/jobs-terms-conditions\"\n      >LinkedIn Terms & Conditions</a\n    ></symphony-paragraph\n  >\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (click)=\"onCloseClick()\"\n  ></symphony-icon>\n  <div class=\"loader-container\" *ngIf=\"isLoading\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n  <ng-content\n    ngProjectAs=\"[sfx-modal-body-area]\"\n    select=\"[sfx-modal-body-area]\"\n  ></ng-content>\n</symphony-two-column-modal-template>\n", styles: [".loader-container{padding:20px;height:400px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"] }]

package/esm2020/lib/pages/setting-detail-page/partial-page/editable-setting-partial-page/editable-setting-partial-page.component.mjs

@@ -9,6 +9,7 @@ export class EditableSettingPartialPageComponent {
     constructor() {
         this.editableSettingValueChanged = new EventEmitter();
         this.saveClicked = new EventEmitter();
+        this.reloadClicked = new EventEmitter();
     }
     onEditableSettingValueChange(partialPageModel) {
         this.editableSettingValueChanged.emit(partialPageModel);
@@ -16,23 +17,26 @@ export class EditableSettingPartialPageComponent {
     onSaveclick(partialPageModel) {
         this.saveClicked.emit(partialPageModel);
     }
+    onReloadClick(event) {
+        this.reloadClicked.emit(event);
+    }
 }
 EditableSettingPartialPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EditableSettingPartialPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditableSettingPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EditableSettingPartialPageComponent, selector: "symphony-editable-setting-partial-page", inputs: { partialPageModel: "partialPageModel", isLoadingPartialPage: "isLoadingPartialPage", errorPageState: "errorPageState", errorPageText: "errorPageText" }, outputs: { editableSettingValueChanged: "editableSettingValueChanged", saveClicked: "saveClicked" }, ngImport: i0, template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\">\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange(partialPageModel)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-paragraph *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\" class=\"sfx-font-bold sfx-mb-20 sfx-mt-20 sfx-d-block text-center\">{{\n    partialPageModel.errorListText\n  }}</symphony-paragraph>\n</section>\n<symphony-sfx-loader\n*ngIf=\"isLoadingPartialPage\"\n></symphony-sfx-loader>\n<symphony-paragraph *ngIf=\"errorPageState && !isLoadingPartialPage\" class=\"sfx-d-block text-center sfx-font-bold sfx-mb-20 sfx-mt-20\">{{\n  errorPageText\n}}</symphony-paragraph>", styles: [""], components: [{ type: i1.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i2.EditableSettingItemListComponent, selector: "symphony-editable-setting-item-list", inputs: ["settingItemsList"], outputs: ["settingItemValueChanged"] }, { type: i3.ButtonV2Component, selector: "symphony-button-v2" }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+EditableSettingPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EditableSettingPartialPageComponent, selector: "symphony-editable-setting-partial-page", inputs: { partialPageModel: "partialPageModel", isLoadingPartialPage: "isLoadingPartialPage", errorPageState: "errorPageState" }, outputs: { editableSettingValueChanged: "editableSettingValueChanged", saveClicked: "saveClicked", reloadClicked: "reloadClicked" }, ngImport: i0, template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section\n    *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\"\n  >\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange(partialPageModel)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\"\n    [hasCustomMessage]=\"partialPageModel.errorListState\"\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\n      <span\n        (click)=\"onReloadClick($event)\"\n        class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n        >reload</span\n      >\n      it or come back later.</symphony-paragraph\n    >\n  </symphony-sfx-loader>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingPartialPage\"></symphony-sfx-loader>\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingPartialPage\"\n  [hasCustomMessage]=\"errorPageState\"\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\n    <span\n      (click)=\"onReloadClick($event)\"\n      class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n      >reload</span\n    >\n    it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [""], components: [{ type: i1.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i2.EditableSettingItemListComponent, selector: "symphony-editable-setting-item-list", inputs: ["settingItemsList"], outputs: ["settingItemValueChanged"] }, { type: i3.ButtonV2Component, selector: "symphony-button-v2" }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EditableSettingPartialPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-editable-setting-partial-page', template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\">\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange(partialPageModel)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-paragraph *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\" class=\"sfx-font-bold sfx-mb-20 sfx-mt-20 sfx-d-block text-center\">{{\n    partialPageModel.errorListText\n  }}</symphony-paragraph>\n</section>\n<symphony-sfx-loader\n*ngIf=\"isLoadingPartialPage\"\n></symphony-sfx-loader>\n<symphony-paragraph *ngIf=\"errorPageState && !isLoadingPartialPage\" class=\"sfx-d-block text-center sfx-font-bold sfx-mb-20 sfx-mt-20\">{{\n  errorPageText\n}}</symphony-paragraph>", styles: [""] }]
+            args: [{ selector: 'symphony-editable-setting-partial-page', template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section\n    *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\"\n  >\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange(partialPageModel)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\"\n    [hasCustomMessage]=\"partialPageModel.errorListState\"\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\n      <span\n        (click)=\"onReloadClick($event)\"\n        class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n        >reload</span\n      >\n      it or come back later.</symphony-paragraph\n    >\n  </symphony-sfx-loader>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingPartialPage\"></symphony-sfx-loader>\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingPartialPage\"\n  [hasCustomMessage]=\"errorPageState\"\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\n    <span\n      (click)=\"onReloadClick($event)\"\n      class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n      >reload</span\n    >\n    it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { partialPageModel: [{
                 type: Input
             }], isLoadingPartialPage: [{
                 type: Input
             }], errorPageState: [{
                 type: Input
-            }], errorPageText: [{
-                type: Input
             }], editableSettingValueChanged: [{
                 type: Output
             }], saveClicked: [{
                 type: Output
+            }], reloadClicked: [{
+                type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdGFibGUtc2V0dGluZy1wYXJ0aWFsLXBhZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9wYWdlcy9zZXR0aW5nLWRldGFpbC1wYWdlL3BhcnRpYWwtcGFnZS9lZGl0YWJsZS1zZXR0aW5nLXBhcnRpYWwtcGFnZS9lZGl0YWJsZS1zZXR0aW5nLXBhcnRpYWwtcGFnZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL3BhZ2VzL3NldHRpbmctZGV0YWlsLXBhZ2UvcGFydGlhbC1wYWdlL2VkaXRhYmxlLXNldHRpbmctcGFydGlhbC1wYWdlL2VkaXRhYmxlLXNldHRpbmctcGFydGlhbC1wYWdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7QUFRdkUsTUFBTSxPQUFPLG1DQUFtQztJQVE5QztRQUhVLGdDQUEyQixHQUNuQyxJQUFJLFlBQVksRUFBbUMsQ0FBQztRQUM1QyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFtQyxDQUFDO0lBQzdELENBQUM7SUFFaEIsNEJBQTRCLENBQzFCLGdCQUFpRDtRQUVqRCxJQUFJLENBQUMsMkJBQTJCLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUM7SUFDMUQsQ0FBQztJQUNELFdBQVcsQ0FBQyxnQkFBaUQ7UUFDM0QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztJQUMxQyxDQUFDOztnSUFqQlUsbUNBQW1DO29IQUFuQyxtQ0FBbUMscVZDUmhELDhwREFxQ3VCOzJGRDdCVixtQ0FBbUM7a0JBTC9DLFNBQVM7K0JBQ0Usd0NBQXdDOzBFQUt6QyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBQ0csb0JBQW9CO3NCQUE1QixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDSSwyQkFBMkI7c0JBQXBDLE1BQU07Z0JBRUcsV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBFZGl0YWJsZVNldHRpbmdQYXJ0aWFsUGFnZU1vZGVsIH0gZnJvbSAnLi9lZGl0YWJsZS1zZXR0aW5nLXBhcnRpYWwtcGFnZS5jb21wb25lbnQubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzeW1waG9ueS1lZGl0YWJsZS1zZXR0aW5nLXBhcnRpYWwtcGFnZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9lZGl0YWJsZS1zZXR0aW5nLXBhcnRpYWwtcGFnZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2VkaXRhYmxlLXNldHRpbmctcGFydGlhbC1wYWdlLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIEVkaXRhYmxlU2V0dGluZ1BhcnRpYWxQYWdlQ29tcG9uZW50IHtcbiAgQElucHV0KCkgcGFydGlhbFBhZ2VNb2RlbDogRWRpdGFibGVTZXR0aW5nUGFydGlhbFBhZ2VNb2RlbDtcbiAgQElucHV0KCkgaXNMb2FkaW5nUGFydGlhbFBhZ2U/OiBib29sZWFuO1xuICBASW5wdXQoKSBlcnJvclBhZ2VTdGF0ZT86IGJvb2xlYW47XG4gIEBJbnB1dCgpIGVycm9yUGFnZVRleHQ/OiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBlZGl0YWJsZVNldHRpbmdWYWx1ZUNoYW5nZWQgPVxuICAgIG5ldyBFdmVudEVtaXR0ZXI8RWRpdGFibGVTZXR0aW5nUGFydGlhbFBhZ2VNb2RlbD4oKTtcbiAgQE91dHB1dCgpIHNhdmVDbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxFZGl0YWJsZVNldHRpbmdQYXJ0aWFsUGFnZU1vZGVsPigpO1xuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgb25FZGl0YWJsZVNldHRpbmdWYWx1ZUNoYW5nZShcbiAgICBwYXJ0aWFsUGFnZU1vZGVsOiBFZGl0YWJsZVNldHRpbmdQYXJ0aWFsUGFnZU1vZGVsXG4gICkge1xuICAgIHRoaXMuZWRpdGFibGVTZXR0aW5nVmFsdWVDaGFuZ2VkLmVtaXQocGFydGlhbFBhZ2VNb2RlbCk7XG4gIH1cbiAgb25TYXZlY2xpY2socGFydGlhbFBhZ2VNb2RlbDogRWRpdGFibGVTZXR0aW5nUGFydGlhbFBhZ2VNb2RlbCkge1xuICAgIHRoaXMuc2F2ZUNsaWNrZWQuZW1pdChwYXJ0aWFsUGFnZU1vZGVsKTtcbiAgfVxufVxuIiwiPHNlY3Rpb24gKm5nSWY9XCJwYXJ0aWFsUGFnZU1vZGVsICYmICFpc0xvYWRpbmdQYXJ0aWFsUGFnZSAmJiAhZXJyb3JQYWdlU3RhdGVcIj5cbiAgPHN5bXBob255LXBhcmFncmFwaCBjbGFzcz1cInNmeC1mb250LWJvbGQgc2Z4LW1iLTUgc2Z4LWQtZmxleFwiPnt7XG4gICAgcGFydGlhbFBhZ2VNb2RlbC5wYXJ0aWFsVGl0bGVcbiAgfX08L3N5bXBob255LXBhcmFncmFwaD5cbiAgPHN5bXBob255LXBhcmFncmFwaCBjbGFzcz1cInNmeC1tYi0yMCBzZngtZC1mbGV4XCI+e3tcbiAgICBwYXJ0aWFsUGFnZU1vZGVsLnBhcnRpYWxEZXNjcmlwdGlvblxuICB9fTwvc3ltcGhvbnktcGFyYWdyYXBoPlxuICA8ZGl2IGNsYXNzPVwicm93XCI+XG4gICAgPGRpdiBjbGFzcz1cImNvbC14cy0xMiBjb2wtc20tMTIgY29sLW1kLTQgY29sLWxnLTNcIj5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltkcm9wZG93bi1kcm9wem9uZV1cIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICA8c2VjdGlvbiAqbmdJZj1cIiFwYXJ0aWFsUGFnZU1vZGVsLmlzTG9hZGluZ0xpc3QgJiYgIXBhcnRpYWxQYWdlTW9kZWwuZXJyb3JMaXN0U3RhdGVcIj5cbiAgICA8c3ltcGhvbnktZWRpdGFibGUtc2V0dGluZy1pdGVtLWxpc3RcbiAgICAgIGNsYXNzPVwic2Z4LW10LTMwIHNmeC1kLWJsb2NrXCJcbiAgICAgIFtzZXR0aW5nSXRlbXNMaXN0XT1cInBhcnRpYWxQYWdlTW9kZWwuc2V0dGluZ0l0ZW1zTGlzdFwiXG4gICAgICAoc2V0dGluZ0l0ZW1WYWx1ZUNoYW5nZWQpPVwib25FZGl0YWJsZVNldHRpbmdWYWx1ZUNoYW5nZShwYXJ0aWFsUGFnZU1vZGVsKVwiXG4gICAgPjwvc3ltcGhvbnktZWRpdGFibGUtc2V0dGluZy1pdGVtLWxpc3Q+XG4gICAgPHN5bXBob255LWJ1dHRvbi12MlxuICAgICAgaWQ9XCJidXR0b24tcGFydGlhbFBhZ2Utc2F2ZVwiXG4gICAgICBjbGFzcz1cInB1bGwtcmlnaHQgc2Z4LWQtZmxleFwiXG4gICAgICB0ZXh0PVwiU2F2ZVwiXG4gICAgICAoY2xpY2tlZCk9XCJvblNhdmVjbGljayhwYXJ0aWFsUGFnZU1vZGVsKVwiXG4gICAgPjwvc3ltcGhvbnktYnV0dG9uLXYyPlxuICA8L3NlY3Rpb24+XG4gIDxzeW1waG9ueS1zZngtbG9hZGVyXG4gICAgKm5nSWY9XCJwYXJ0aWFsUGFnZU1vZGVsLmlzTG9hZGluZ0xpc3RcIlxuICA+PC9zeW1waG9ueS1zZngtbG9hZGVyPlxuICA8c3ltcGhvbnktcGFyYWdyYXBoICpuZ0lmPVwicGFydGlhbFBhZ2VNb2RlbC5lcnJvckxpc3RTdGF0ZSAmJiAhcGFydGlhbFBhZ2VNb2RlbC5pc0xvYWRpbmdMaXN0XCIgY2xhc3M9XCJzZngtZm9udC1ib2xkIHNmeC1tYi0yMCBzZngtbXQtMjAgc2Z4LWQtYmxvY2sgdGV4dC1jZW50ZXJcIj57e1xuICAgIHBhcnRpYWxQYWdlTW9kZWwuZXJyb3JMaXN0VGV4dFxuICB9fTwvc3ltcGhvbnktcGFyYWdyYXBoPlxuPC9zZWN0aW9uPlxuPHN5bXBob255LXNmeC1sb2FkZXJcbipuZ0lmPVwiaXNMb2FkaW5nUGFydGlhbFBhZ2VcIlxuPjwvc3ltcGhvbnktc2Z4LWxvYWRlcj5cbjxzeW1waG9ueS1wYXJhZ3JhcGggKm5nSWY9XCJlcnJvclBhZ2VTdGF0ZSAmJiAhaXNMb2FkaW5nUGFydGlhbFBhZ2VcIiBjbGFzcz1cInNmeC1kLWJsb2NrIHRleHQtY2VudGVyIHNmeC1mb250LWJvbGQgc2Z4LW1iLTIwIHNmeC1tdC0yMFwiPnt7XG4gIGVycm9yUGFnZVRleHRcbn19PC9zeW1waG9ueS1wYXJhZ3JhcGg+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdGFibGUtc2V0dGluZy1wYXJ0aWFsLXBhZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9wYWdlcy9zZXR0aW5nLWRldGFpbC1wYWdlL3BhcnRpYWwtcGFnZS9lZGl0YWJsZS1zZXR0aW5nLXBhcnRpYWwtcGFnZS9lZGl0YWJsZS1zZXR0aW5nLXBhcnRpYWwtcGFnZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL3BhZ2VzL3NldHRpbmctZGV0YWlsLXBhZ2UvcGFydGlhbC1wYWdlL2VkaXRhYmxlLXNldHRpbmctcGFydGlhbC1wYWdlL2VkaXRhYmxlLXNldHRpbmctcGFydGlhbC1wYWdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7QUFRdkUsTUFBTSxPQUFPLG1DQUFtQztJQVE5QztRQUpVLGdDQUEyQixHQUNuQyxJQUFJLFlBQVksRUFBbUMsQ0FBQztRQUM1QyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFtQyxDQUFDO1FBQ2xFLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQUM5QixDQUFDO0lBRWhCLDRCQUE0QixDQUMxQixnQkFBaUQ7UUFFakQsSUFBSSxDQUFDLDJCQUEyQixDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO0lBQzFELENBQUM7SUFDRCxXQUFXLENBQUMsZ0JBQWlEO1FBQzNELElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUM7SUFDMUMsQ0FBQztJQUNELGFBQWEsQ0FBQyxLQUFLO1FBQ2pCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2pDLENBQUM7O2dJQXBCVSxtQ0FBbUM7b0hBQW5DLG1DQUFtQyxxVkNSaEQsODBFQWdFQTsyRkR4RGEsbUNBQW1DO2tCQUwvQyxTQUFTOytCQUNFLHdDQUF3QzswRUFLekMsZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNHLG9CQUFvQjtzQkFBNUIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNJLDJCQUEyQjtzQkFBcEMsTUFBTTtnQkFFRyxXQUFXO3NCQUFwQixNQUFNO2dCQUNHLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRWRpdGFibGVTZXR0aW5nUGFydGlhbFBhZ2VNb2RlbCB9IGZyb20gJy4vZWRpdGFibGUtc2V0dGluZy1wYXJ0aWFsLXBhZ2UuY29tcG9uZW50Lm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3ltcGhvbnktZWRpdGFibGUtc2V0dGluZy1wYXJ0aWFsLXBhZ2UnLFxuICB0ZW1wbGF0ZVVybDogJy4vZWRpdGFibGUtc2V0dGluZy1wYXJ0aWFsLXBhZ2UuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9lZGl0YWJsZS1zZXR0aW5nLXBhcnRpYWwtcGFnZS5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBFZGl0YWJsZVNldHRpbmdQYXJ0aWFsUGFnZUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHBhcnRpYWxQYWdlTW9kZWw6IEVkaXRhYmxlU2V0dGluZ1BhcnRpYWxQYWdlTW9kZWw7XG4gIEBJbnB1dCgpIGlzTG9hZGluZ1BhcnRpYWxQYWdlPzogYm9vbGVhbjtcbiAgQElucHV0KCkgZXJyb3JQYWdlU3RhdGU/OiBib29sZWFuO1xuICBAT3V0cHV0KCkgZWRpdGFibGVTZXR0aW5nVmFsdWVDaGFuZ2VkID1cbiAgICBuZXcgRXZlbnRFbWl0dGVyPEVkaXRhYmxlU2V0dGluZ1BhcnRpYWxQYWdlTW9kZWw+KCk7XG4gIEBPdXRwdXQoKSBzYXZlQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8RWRpdGFibGVTZXR0aW5nUGFydGlhbFBhZ2VNb2RlbD4oKTtcbiAgQE91dHB1dCgpIHJlbG9hZENsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBvbkVkaXRhYmxlU2V0dGluZ1ZhbHVlQ2hhbmdlKFxuICAgIHBhcnRpYWxQYWdlTW9kZWw6IEVkaXRhYmxlU2V0dGluZ1BhcnRpYWxQYWdlTW9kZWxcbiAgKSB7XG4gICAgdGhpcy5lZGl0YWJsZVNldHRpbmdWYWx1ZUNoYW5nZWQuZW1pdChwYXJ0aWFsUGFnZU1vZGVsKTtcbiAgfVxuICBvblNhdmVjbGljayhwYXJ0aWFsUGFnZU1vZGVsOiBFZGl0YWJsZVNldHRpbmdQYXJ0aWFsUGFnZU1vZGVsKSB7XG4gICAgdGhpcy5zYXZlQ2xpY2tlZC5lbWl0KHBhcnRpYWxQYWdlTW9kZWwpO1xuICB9XG4gIG9uUmVsb2FkQ2xpY2soZXZlbnQpIHtcbiAgICB0aGlzLnJlbG9hZENsaWNrZWQuZW1pdChldmVudCk7XG4gIH1cbn1cbiIsIjxzZWN0aW9uICpuZ0lmPVwicGFydGlhbFBhZ2VNb2RlbCAmJiAhaXNMb2FkaW5nUGFydGlhbFBhZ2UgJiYgIWVycm9yUGFnZVN0YXRlXCI+XG4gIDxzeW1waG9ueS1wYXJhZ3JhcGggY2xhc3M9XCJzZngtZm9udC1ib2xkIHNmeC1tYi01IHNmeC1kLWZsZXhcIj57e1xuICAgIHBhcnRpYWxQYWdlTW9kZWwucGFydGlhbFRpdGxlXG4gIH19PC9zeW1waG9ueS1wYXJhZ3JhcGg+XG4gIDxzeW1waG9ueS1wYXJhZ3JhcGggY2xhc3M9XCJzZngtbWItMjAgc2Z4LWQtZmxleFwiPnt7XG4gICAgcGFydGlhbFBhZ2VNb2RlbC5wYXJ0aWFsRGVzY3JpcHRpb25cbiAgfX08L3N5bXBob255LXBhcmFncmFwaD5cbiAgPGRpdiBjbGFzcz1cInJvd1wiPlxuICAgIDxkaXYgY2xhc3M9XCJjb2wteHMtMTIgY29sLXNtLTEyIGNvbC1tZC00IGNvbC1sZy0zXCI+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbZHJvcGRvd24tZHJvcHpvbmVdXCI+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPHNlY3Rpb25cbiAgICAqbmdJZj1cIiFwYXJ0aWFsUGFnZU1vZGVsLmlzTG9hZGluZ0xpc3QgJiYgIXBhcnRpYWxQYWdlTW9kZWwuZXJyb3JMaXN0U3RhdGVcIlxuICA+XG4gICAgPHN5bXBob255LWVkaXRhYmxlLXNldHRpbmctaXRlbS1saXN0XG4gICAgICBjbGFzcz1cInNmeC1tdC0zMCBzZngtZC1ibG9ja1wiXG4gICAgICBbc2V0dGluZ0l0ZW1zTGlzdF09XCJwYXJ0aWFsUGFnZU1vZGVsLnNldHRpbmdJdGVtc0xpc3RcIlxuICAgICAgKHNldHRpbmdJdGVtVmFsdWVDaGFuZ2VkKT1cIm9uRWRpdGFibGVTZXR0aW5nVmFsdWVDaGFuZ2UocGFydGlhbFBhZ2VNb2RlbClcIlxuICAgID48L3N5bXBob255LWVkaXRhYmxlLXNldHRpbmctaXRlbS1saXN0PlxuICAgIDxzeW1waG9ueS1idXR0b24tdjJcbiAgICAgIGlkPVwiYnV0dG9uLXBhcnRpYWxQYWdlLXNhdmVcIlxuICAgICAgY2xhc3M9XCJwdWxsLXJpZ2h0IHNmeC1kLWZsZXhcIlxuICAgICAgdGV4dD1cIlNhdmVcIlxuICAgICAgKGNsaWNrZWQpPVwib25TYXZlY2xpY2socGFydGlhbFBhZ2VNb2RlbClcIlxuICAgID48L3N5bXBob255LWJ1dHRvbi12Mj5cbiAgPC9zZWN0aW9uPlxuICA8c3ltcGhvbnktc2Z4LWxvYWRlclxuICAgICpuZ0lmPVwicGFydGlhbFBhZ2VNb2RlbC5pc0xvYWRpbmdMaXN0XCJcbiAgPjwvc3ltcGhvbnktc2Z4LWxvYWRlcj5cbiAgPHN5bXBob255LXNmeC1sb2FkZXJcbiAgICAqbmdJZj1cInBhcnRpYWxQYWdlTW9kZWwuZXJyb3JMaXN0U3RhdGUgJiYgIXBhcnRpYWxQYWdlTW9kZWwuaXNMb2FkaW5nTGlzdFwiXG4gICAgW2hhc0N1c3RvbU1lc3NhZ2VdPVwicGFydGlhbFBhZ2VNb2RlbC5lcnJvckxpc3RTdGF0ZVwiXG4gID5cbiAgICA8c3ltcGhvbnktcGFyYWdyYXBoXG4gICAgICBjdXN0b20tbWVzc2FnZVxuICAgICAgY2xhc3M9XCJzZngtbWItMjAgc2Z4LW10LTIwIHNmeC1kLWJsb2NrIHRleHQtY2VudGVyXCJcbiAgICAgID5Mb2FkaW5nIHRoaXMgcGFnZSBpcyB0YWtpbmcgbG9uZ2VyIHRoYW4gZXhwZWN0ZWQuPGJyIC8+VHJ5IHRvXG4gICAgICA8c3BhblxuICAgICAgICAoY2xpY2spPVwib25SZWxvYWRDbGljaygkZXZlbnQpXCJcbiAgICAgICAgY2xhc3M9XCJzZngtdjItcHVycGxlMSBzZngtZm9udC1ib2xkIHNmeC1jdXJzb3ItcG9pbnRlclwiXG4gICAgICAgID5yZWxvYWQ8L3NwYW5cbiAgICAgID5cbiAgICAgIGl0IG9yIGNvbWUgYmFjayBsYXRlci48L3N5bXBob255LXBhcmFncmFwaFxuICAgID5cbiAgPC9zeW1waG9ueS1zZngtbG9hZGVyPlxuPC9zZWN0aW9uPlxuPHN5bXBob255LXNmeC1sb2FkZXIgKm5nSWY9XCJpc0xvYWRpbmdQYXJ0aWFsUGFnZVwiPjwvc3ltcGhvbnktc2Z4LWxvYWRlcj5cbjxzeW1waG9ueS1zZngtbG9hZGVyXG4gICpuZ0lmPVwiZXJyb3JQYWdlU3RhdGUgJiYgIWlzTG9hZGluZ1BhcnRpYWxQYWdlXCJcbiAgW2hhc0N1c3RvbU1lc3NhZ2VdPVwiZXJyb3JQYWdlU3RhdGVcIlxuPlxuICA8c3ltcGhvbnktcGFyYWdyYXBoXG4gICAgY3VzdG9tLW1lc3NhZ2VcbiAgICBjbGFzcz1cInNmeC1tYi0yMCBzZngtbXQtMjAgc2Z4LWQtYmxvY2sgdGV4dC1jZW50ZXJcIlxuICAgID5Mb2FkaW5nIHRoaXMgcGFnZSBpcyB0YWtpbmcgbG9uZ2VyIHRoYW4gZXhwZWN0ZWQuPGJyIC8+VHJ5IHRvXG4gICAgPHNwYW5cbiAgICAgIChjbGljayk9XCJvblJlbG9hZENsaWNrKCRldmVudClcIlxuICAgICAgY2xhc3M9XCJzZngtdjItcHVycGxlMSBzZngtZm9udC1ib2xkIHNmeC1jdXJzb3ItcG9pbnRlclwiXG4gICAgICA+cmVsb2FkPC9zcGFuXG4gICAgPlxuICAgIGl0IG9yIGNvbWUgYmFjayBsYXRlci48L3N5bXBob255LXBhcmFncmFwaFxuICA+XG48L3N5bXBob255LXNmeC1sb2FkZXI+XG4iXX0=