@symphony-talent/component-library 3.32.0 → 3.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1667,10 +1667,10 @@ class InputSearchCheckboxDropdownComponent {
1667
1667
  }
1668
1668
  }
1669
1669
  InputSearchCheckboxDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownComponent, deps: [{ token: CapitalizeFirstCharacterPipe }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1670
- 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" }, 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: "<div>\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_{{ conditionSelectionId }}_one\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' AND ')\"\n [checked]=\"multiSelectSearch.condition === ' AND '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n >and</label\n >\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_two\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' OR ')\"\n [checked]=\"multiSelectSearch.condition === ' OR '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">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=\"{{ conditionSelectionId }}\"\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 <div *dropdownMenu>\n <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\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\"\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\n }}\"\n class=\"sfx-checkbox-input\"\n [disabled]=\"multiSelectSearch.hasMaxSelections\"\n (click)=\"\n onSelectItem(filterDropdownOption); $event.stopPropagation()\n \"\n />\n <label\n class=\"Font400\"\n for=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\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>\n", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder::placeholder{color:#000}.requiredField,.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!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-filter-section{background:#000000;padding:1.875rem 2.5rem}.sfx-custom-dropdown-wrap input{border-color:#000;background:#000;color:#fff}.sfx-custom-dropdown-wrap:before{color:#fff}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%;max-width:250px}.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.25rem}.sfx-custom-dropdown-wrap:before{top:14px;right:15px}.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:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.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.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:#000;color:#fff}.sfx-custom-dropdown-wrap.open:before{z-index:3;color:#fff}.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:before{content:\"\\e93f\";font-family:library-icons!important;font-size:14px;display:inline-block;position:absolute}.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-section input{background-color:#000!important}.sfx-filter-section .sfx-custom-dropdown-wrap input{border-color:#565656;background:#000000;color:#fff}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;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-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-filter-section .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-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-filter-section .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-filter-section .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-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox:hover{background:#000;color:#fff}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-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:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all .2s 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:neuzeit_groteskbold,sans-serif;margin-bottom:.9375rem;padding-left:.3rem}\n"], components: [{ type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "capitalizeFirstCharacter": CapitalizeFirstCharacterPipe } });
1670
+ 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" }, 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_{{ conditionSelectionId }}_one\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' AND ')\"\n [checked]=\"multiSelectSearch.condition === ' AND '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n >and</label\n >\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_two\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' OR ')\"\n [checked]=\"multiSelectSearch.condition === ' OR '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">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=\"{{ conditionSelectionId }}\"\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 <div *dropdownMenu>\n <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\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\"\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\n }}\"\n class=\"sfx-checkbox-input\"\n [disabled]=\"multiSelectSearch.hasMaxSelections\"\n (click)=\"\n onSelectItem(filterDropdownOption); $event.stopPropagation()\n \"\n />\n <label\n class=\"Font400\"\n for=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\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::placeholder{color:#000}.requiredField,.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!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.25rem}.sfx-custom-dropdown-wrap:before{top:14px;right:15px;color:#000}.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:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.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.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:#000;color:#fff}.sfx-custom-dropdown-wrap.open:before{z-index:3;color:#fff}.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:before{content:\"\\e93f\";font-family:library-icons!important;font-size:14px;display:inline-block;position:absolute}.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:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;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;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:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all .2s 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:neuzeit_groteskbold,sans-serif;margin-bottom:.9375rem;padding-left:.3rem}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap:before{color:#fff}\n"], components: [{ type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "capitalizeFirstCharacter": CapitalizeFirstCharacterPipe } });
1671
1671
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownComponent, decorators: [{
1672
1672
  type: Component,
1673
- args: [{ selector: 'symphony-input-search-checkbox-dropdown', template: "<div>\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_{{ conditionSelectionId }}_one\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' AND ')\"\n [checked]=\"multiSelectSearch.condition === ' AND '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n >and</label\n >\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_two\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' OR ')\"\n [checked]=\"multiSelectSearch.condition === ' OR '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">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=\"{{ conditionSelectionId }}\"\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 <div *dropdownMenu>\n <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\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\"\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\n }}\"\n class=\"sfx-checkbox-input\"\n [disabled]=\"multiSelectSearch.hasMaxSelections\"\n (click)=\"\n onSelectItem(filterDropdownOption); $event.stopPropagation()\n \"\n />\n <label\n class=\"Font400\"\n for=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\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>\n", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder::placeholder{color:#000}.requiredField,.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!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-filter-section{background:#000000;padding:1.875rem 2.5rem}.sfx-custom-dropdown-wrap input{border-color:#000;background:#000;color:#fff}.sfx-custom-dropdown-wrap:before{color:#fff}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%;max-width:250px}.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.25rem}.sfx-custom-dropdown-wrap:before{top:14px;right:15px}.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:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.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.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:#000;color:#fff}.sfx-custom-dropdown-wrap.open:before{z-index:3;color:#fff}.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:before{content:\"\\e93f\";font-family:library-icons!important;font-size:14px;display:inline-block;position:absolute}.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-section input{background-color:#000!important}.sfx-filter-section .sfx-custom-dropdown-wrap input{border-color:#565656;background:#000000;color:#fff}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;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-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-filter-section .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-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-filter-section .sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-filter-section .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-filter-section .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-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox:hover{background:#000;color:#fff}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-filter-section .sfx-checkbox-dropdown .dropdown-menu .sfx-dropdown-list .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-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:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all .2s 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:neuzeit_groteskbold,sans-serif;margin-bottom:.9375rem;padding-left:.3rem}\n"] }]
1673
+ 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_{{ conditionSelectionId }}_one\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' AND ')\"\n [checked]=\"multiSelectSearch.condition === ' AND '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n >and</label\n >\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_two\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' OR ')\"\n [checked]=\"multiSelectSearch.condition === ' OR '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">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=\"{{ conditionSelectionId }}\"\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 <div *dropdownMenu>\n <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\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\"\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\n }}\"\n class=\"sfx-checkbox-input\"\n [disabled]=\"multiSelectSearch.hasMaxSelections\"\n (click)=\"\n onSelectItem(filterDropdownOption); $event.stopPropagation()\n \"\n />\n <label\n class=\"Font400\"\n for=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\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::placeholder{color:#000}.requiredField,.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!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.25rem}.sfx-custom-dropdown-wrap:before{top:14px;right:15px;color:#000}.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:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.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.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:#000;color:#fff}.sfx-custom-dropdown-wrap.open:before{z-index:3;color:#fff}.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:before{content:\"\\e93f\";font-family:library-icons!important;font-size:14px;display:inline-block;position:absolute}.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:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;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;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:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all .2s 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:neuzeit_groteskbold,sans-serif;margin-bottom:.9375rem;padding-left:.3rem}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap:before{color:#fff}\n"] }]
1674
1674
  }], ctorParameters: function () { return [{ type: CapitalizeFirstCharacterPipe }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { pop: [{
1675
1675
  type: ViewChild,
1676
1676
  args: ['pop', { static: false }]
@@ -1689,6 +1689,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
1689
1689
  type: Input
1690
1690
  }], isLoadingInitialData: [{
1691
1691
  type: Input
1692
+ }], isInverse: [{
1693
+ type: Input
1692
1694
  }], deselectItem: [{
1693
1695
  type: Output
1694
1696
  }], selectItem: [{
@@ -2088,10 +2090,10 @@ class FileUploadComponent {
2088
2090
  }
2089
2091
  }
2090
2092
  FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2091
- FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadComponent, selector: "symphony-file-upload", inputs: { fileUploadModel: "fileUploadModel" }, outputs: { closeClick: "closeClick", getFileDetails: "getFileDetails" }, ngImport: i0, template: "<div\n *ngIf=\"fileUploadModel\"\n class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n <!-- File Upload -->\n <label\n *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n for=\"Upload\"\n >\n <span class=\"symbol\">+</span>\n <p>Please click here and select a file to upload</p>\n <input\n type=\"file\"\n id=\"Upload\"\n name=\"Upload\"\n accept=\"{{ filetypeAccepted }}\"\n (change)=\"onFileSelect($event)\"\n (click)=\"onClick($event)\"\n class=\"hide\"\n />\n </label>\n <!-- File Upload -->\n\n <!-- File Upload In Progress -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Upload In Progress'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- File Upload In Progress -->\n\n <!-- File Upload Complete -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Upload Completed'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- File Upload Complete -->\n\n <!-- Selected File -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Selected File'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- Selected File -->\n\n <!-- File Upload Error -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showUploadError\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Max file size exceeded'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- File Upload Error -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:25px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}\n"], components: [{ type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: ["fileUploadStatusModel", "uploadStatus"], outputs: ["closeUploadComplete"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2093
+ FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadComponent, selector: "symphony-file-upload", inputs: { fileUploadModel: "fileUploadModel" }, outputs: { closeClick: "closeClick", getFileDetails: "getFileDetails" }, ngImport: i0, template: "<div\n *ngIf=\"fileUploadModel\"\n class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n <!-- File Upload -->\n <label\n *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n for=\"Upload\"\n >\n <span class=\"symbol\">+</span>\n <p>Please click here and select a file to upload</p>\n </label>\n <input\n type=\"file\"\n id=\"Upload\"\n name=\"Upload\"\n accept=\"{{ filetypeAccepted }}\"\n (change)=\"onFileSelect($event)\"\n (click)=\"onClick($event)\"\n class=\"hide\"\n />\n <!-- File Upload -->\n\n <!-- File Upload In Progress -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Upload In Progress'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- File Upload In Progress -->\n\n <!-- File Upload Complete -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Upload Completed'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- File Upload Complete -->\n\n <!-- Selected File -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Selected File'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- Selected File -->\n\n <!-- File Upload Error -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showUploadError\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Max file size exceeded'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- File Upload Error -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:25px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}\n"], components: [{ type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: ["fileUploadStatusModel", "uploadStatus"], outputs: ["closeUploadComplete"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2092
2094
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadComponent, decorators: [{
2093
2095
  type: Component,
2094
- args: [{ selector: 'symphony-file-upload', template: "<div\n *ngIf=\"fileUploadModel\"\n class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n <!-- File Upload -->\n <label\n *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n for=\"Upload\"\n >\n <span class=\"symbol\">+</span>\n <p>Please click here and select a file to upload</p>\n <input\n type=\"file\"\n id=\"Upload\"\n name=\"Upload\"\n accept=\"{{ filetypeAccepted }}\"\n (change)=\"onFileSelect($event)\"\n (click)=\"onClick($event)\"\n class=\"hide\"\n />\n </label>\n <!-- File Upload -->\n\n <!-- File Upload In Progress -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Upload In Progress'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- File Upload In Progress -->\n\n <!-- File Upload Complete -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Upload Completed'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- File Upload Complete -->\n\n <!-- Selected File -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Selected File'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- Selected File -->\n\n <!-- File Upload Error -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showUploadError\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Max file size exceeded'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- File Upload Error -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:25px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}\n"] }]
2096
+ args: [{ selector: 'symphony-file-upload', template: "<div\n *ngIf=\"fileUploadModel\"\n class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n <!-- File Upload -->\n <label\n *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n for=\"Upload\"\n >\n <span class=\"symbol\">+</span>\n <p>Please click here and select a file to upload</p>\n </label>\n <input\n type=\"file\"\n id=\"Upload\"\n name=\"Upload\"\n accept=\"{{ filetypeAccepted }}\"\n (change)=\"onFileSelect($event)\"\n (click)=\"onClick($event)\"\n class=\"hide\"\n />\n <!-- File Upload -->\n\n <!-- File Upload In Progress -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Upload In Progress'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- File Upload In Progress -->\n\n <!-- File Upload Complete -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Upload Completed'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- File Upload Complete -->\n\n <!-- Selected File -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Selected File'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- Selected File -->\n\n <!-- File Upload Error -->\n <symphony-file-upload-status\n *ngIf=\"fileUploadModel.navigation.showUploadError\"\n [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n [uploadStatus]=\"'Max file size exceeded'\"\n (closeUploadComplete)=\"onCloseClick()\"\n ></symphony-file-upload-status>\n <!-- File Upload Error -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:25px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}\n"] }]
2095
2097
  }], ctorParameters: function () { return []; }, propDecorators: { fileUploadModel: [{
2096
2098
  type: Input
2097
2099
  }], closeClick: [{