@symphony-talent/component-library 3.62.0 → 3.63.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.
- package/esm2020/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.component.mjs +35 -8
- package/esm2020/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.model.mjs +1 -1
- package/esm2020/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.module.mjs +8 -4
- package/esm2020/projects/component-library/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.component.mjs +35 -8
- package/esm2020/projects/component-library/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.model.mjs +1 -1
- package/esm2020/projects/component-library/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.module.mjs +8 -4
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +35 -6
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2015/symphony-talent-component-library.mjs +35 -6
- package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +35 -6
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library.mjs +35 -6
- package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
- package/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.component.d.ts +2 -0
- package/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.model.d.ts +2 -0
- package/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.module.d.ts +2 -1
- package/package.json +1 -1
- package/projects/component-library/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.component.d.ts +2 -0
- package/projects/component-library/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.model.d.ts +2 -0
- package/projects/component-library/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.module.d.ts +2 -1
|
@@ -17,7 +17,7 @@ import { Subject, timer } from 'rxjs';
|
|
|
17
17
|
import { debounceTime, distinctUntilChanged, delay } from 'rxjs/operators';
|
|
18
18
|
import * as i1$4 from 'ngx-chips';
|
|
19
19
|
import { TagInputModule } from 'ngx-chips';
|
|
20
|
-
import * as
|
|
20
|
+
import * as i7 from 'ngx-bootstrap/popover';
|
|
21
21
|
import { PopoverModule } from 'ngx-bootstrap/popover';
|
|
22
22
|
import * as i1$5 from 'ngx-bootstrap/accordion';
|
|
23
23
|
import { AccordionModule } from 'ngx-bootstrap/accordion';
|
|
@@ -1867,6 +1867,20 @@ class InputSearchCheckboxDropdownComponent {
|
|
|
1867
1867
|
this.deselectItem.emit(deselectedItem);
|
|
1868
1868
|
}
|
|
1869
1869
|
onSelectItem(selectedItem) {
|
|
1870
|
+
if (this.multiSelectSearch.isSelectAllEnabled == true) {
|
|
1871
|
+
selectedItem.isChecked = !selectedItem.isChecked;
|
|
1872
|
+
this.multiSelectSearch.selectedDropdownList =
|
|
1873
|
+
this.multiSelectSearch.searchedDropdownList.filter((selectedAllItem) => {
|
|
1874
|
+
return selectedAllItem.isChecked == true;
|
|
1875
|
+
});
|
|
1876
|
+
if (this.multiSelectSearch.selectedDropdownList.length ==
|
|
1877
|
+
this.multiSelectSearch.searchedDropdownList.length) {
|
|
1878
|
+
this.isAllToggled = true;
|
|
1879
|
+
}
|
|
1880
|
+
else {
|
|
1881
|
+
this.isAllToggled = false;
|
|
1882
|
+
}
|
|
1883
|
+
}
|
|
1870
1884
|
this.focusOnSearchInput();
|
|
1871
1885
|
this.selectItem.emit(selectedItem);
|
|
1872
1886
|
}
|
|
@@ -1940,12 +1954,24 @@ class InputSearchCheckboxDropdownComponent {
|
|
|
1940
1954
|
onFocusClick(isInFocus) {
|
|
1941
1955
|
this.isInFocus = isInFocus;
|
|
1942
1956
|
}
|
|
1957
|
+
onToggleClick(event) {
|
|
1958
|
+
if (event == true) {
|
|
1959
|
+
this.multiSelectSearch.searchedDropdownList.forEach((dropdownlist) => (dropdownlist.isChecked = true));
|
|
1960
|
+
this.isAllToggled = true;
|
|
1961
|
+
this.multiSelectSearch.selectedDropdownList =
|
|
1962
|
+
this.multiSelectSearch.searchedDropdownList;
|
|
1963
|
+
}
|
|
1964
|
+
else {
|
|
1965
|
+
this.isAllToggled = false;
|
|
1966
|
+
this.multiSelectSearch.searchedDropdownList.forEach((dropdownlist) => (dropdownlist.isChecked = false));
|
|
1967
|
+
}
|
|
1968
|
+
}
|
|
1943
1969
|
}
|
|
1944
1970
|
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 });
|
|
1945
|
-
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 > '\n {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}'\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: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: 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 } });
|
|
1971
|
+
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 <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 > '\n {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}'\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\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\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 .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:#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 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: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: InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }, { 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: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "capitalizeFirstCharacter": CapitalizeFirstCharacterPipe } });
|
|
1946
1972
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownComponent, decorators: [{
|
|
1947
1973
|
type: Component,
|
|
1948
|
-
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 > '\n {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}'\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"] }]
|
|
1974
|
+
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 <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 > '\n {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}'\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\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\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 .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:#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 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: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"] }]
|
|
1949
1975
|
}], ctorParameters: function () { return [{ type: CapitalizeFirstCharacterPipe }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { pop: [{
|
|
1950
1976
|
type: ViewChild,
|
|
1951
1977
|
args: ['pop', { static: false }]
|
|
@@ -1992,14 +2018,16 @@ InputSearchCheckboxDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion:
|
|
|
1992
2018
|
InputSearchCheckboxDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownModule, declarations: [InputSearchCheckboxDropdownComponent,
|
|
1993
2019
|
CapitalizeFirstCharacterPipe], imports: [i1$1.BsDropdownModule, BrowserAnimationsModule,
|
|
1994
2020
|
CommonModule,
|
|
1995
|
-
FormsModule,
|
|
2021
|
+
FormsModule, i7.PopoverModule, SfxLoaderModule,
|
|
2022
|
+
InputToggleModule], exports: [InputSearchCheckboxDropdownComponent] });
|
|
1996
2023
|
InputSearchCheckboxDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownModule, imports: [[
|
|
1997
2024
|
BsDropdownModule.forRoot(),
|
|
1998
2025
|
BrowserAnimationsModule,
|
|
1999
2026
|
CommonModule,
|
|
2000
2027
|
FormsModule,
|
|
2001
2028
|
PopoverModule.forRoot(),
|
|
2002
|
-
SfxLoaderModule
|
|
2029
|
+
SfxLoaderModule,
|
|
2030
|
+
InputToggleModule
|
|
2003
2031
|
]] });
|
|
2004
2032
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownModule, decorators: [{
|
|
2005
2033
|
type: NgModule,
|
|
@@ -2014,7 +2042,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2014
2042
|
CommonModule,
|
|
2015
2043
|
FormsModule,
|
|
2016
2044
|
PopoverModule.forRoot(),
|
|
2017
|
-
SfxLoaderModule
|
|
2045
|
+
SfxLoaderModule,
|
|
2046
|
+
InputToggleModule
|
|
2018
2047
|
],
|
|
2019
2048
|
exports: [InputSearchCheckboxDropdownComponent],
|
|
2020
2049
|
}]
|