nexheal-lib 0.0.62 → 0.0.64
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/fesm2022/nexheal-lib.mjs +28 -24
- package/fesm2022/nexheal-lib.mjs.map +1 -1
- package/index.d.ts +5 -4
- package/package.json +1 -1
package/fesm2022/nexheal-lib.mjs
CHANGED
|
@@ -2596,6 +2596,7 @@ class MultiselectControl {
|
|
|
2596
2596
|
errorMessage = "";
|
|
2597
2597
|
autocomplete = "";
|
|
2598
2598
|
showSearch = false;
|
|
2599
|
+
showSelectAll = true;
|
|
2599
2600
|
optionDisplayProperty = "displayname";
|
|
2600
2601
|
optionsSelected = new EventEmitter();
|
|
2601
2602
|
selectionCleared = new EventEmitter();
|
|
@@ -2658,8 +2659,7 @@ class MultiselectControl {
|
|
|
2658
2659
|
});
|
|
2659
2660
|
// Initialize filteredOptions to match all options
|
|
2660
2661
|
this.filteredOptions = [...this.options];
|
|
2661
|
-
|
|
2662
|
-
this._syncSelectedItemList();
|
|
2662
|
+
this._updateSelectedItemList();
|
|
2663
2663
|
}
|
|
2664
2664
|
ngAfterViewChecked() {
|
|
2665
2665
|
if (this.isDropdownOpen && !this.dropdownInitialized) {
|
|
@@ -2678,8 +2678,11 @@ class MultiselectControl {
|
|
|
2678
2678
|
// When the parent replaces “options,” we reapply any filtering and “select all” logic
|
|
2679
2679
|
this.filteredOptions = [...this.options];
|
|
2680
2680
|
this._recomputeSelectAllState();
|
|
2681
|
-
|
|
2682
|
-
|
|
2681
|
+
}
|
|
2682
|
+
if (changes["selectedItems"] ||
|
|
2683
|
+
changes["optionDisplayProperty"] ||
|
|
2684
|
+
changes["options"]) {
|
|
2685
|
+
this._updateSelectedItemList();
|
|
2683
2686
|
}
|
|
2684
2687
|
}
|
|
2685
2688
|
writeValue(value) {
|
|
@@ -2688,7 +2691,7 @@ class MultiselectControl {
|
|
|
2688
2691
|
this._isPrimitivePatch = false;
|
|
2689
2692
|
this._pendingPrimitiveValues = [];
|
|
2690
2693
|
this.selectedItems = [];
|
|
2691
|
-
this.
|
|
2694
|
+
this._updateSelectedItemList();
|
|
2692
2695
|
this.selectAllChecked = false;
|
|
2693
2696
|
return;
|
|
2694
2697
|
}
|
|
@@ -2699,17 +2702,13 @@ class MultiselectControl {
|
|
|
2699
2702
|
this._pendingPrimitiveValues = [...value];
|
|
2700
2703
|
this._mapPrimitivesToObjects();
|
|
2701
2704
|
this._recomputeSelectAllState();
|
|
2702
|
-
this._syncSelectedItemList();
|
|
2703
2705
|
return;
|
|
2704
2706
|
}
|
|
2705
2707
|
// CASE B: array of full objects (with `id` or whatever `optionValueProperty` is)
|
|
2706
2708
|
if (value.length > 0 &&
|
|
2707
2709
|
typeof value[0] === "object" &&
|
|
2708
2710
|
value[0][this.optionValueProperty] != null) {
|
|
2709
|
-
//
|
|
2710
|
-
this.selectedItems = [...value];
|
|
2711
|
-
this._syncSelectedItemList();
|
|
2712
|
-
// Also set up pending mapping to sync with option references when available
|
|
2711
|
+
// Convert to an array of IDs, then treat exactly like CASE A
|
|
2713
2712
|
const idArray = value.map((obj) => obj[this.optionValueProperty]);
|
|
2714
2713
|
this._isPrimitivePatch = true;
|
|
2715
2714
|
this._pendingPrimitiveValues = idArray;
|
|
@@ -2722,7 +2721,7 @@ class MultiselectControl {
|
|
|
2722
2721
|
this._isPrimitivePatch = false;
|
|
2723
2722
|
this._pendingPrimitiveValues = [];
|
|
2724
2723
|
this.selectedItems = [...value];
|
|
2725
|
-
this.
|
|
2724
|
+
this._updateSelectedItemList();
|
|
2726
2725
|
this.onChange(this.selectedItems);
|
|
2727
2726
|
this._recomputeSelectAllState();
|
|
2728
2727
|
}
|
|
@@ -2735,7 +2734,7 @@ class MultiselectControl {
|
|
|
2735
2734
|
// Find matching option‐objects whose ID property is in the pending list
|
|
2736
2735
|
const matched = this._options.filter((opt) => this._pendingPrimitiveValues.includes(opt[this.optionValueProperty]));
|
|
2737
2736
|
this.selectedItems = matched;
|
|
2738
|
-
this.
|
|
2737
|
+
this._updateSelectedItemList();
|
|
2739
2738
|
// Notify “onChange” with the full‐object selection
|
|
2740
2739
|
this.onChange(this.selectedItems);
|
|
2741
2740
|
this._isPrimitivePatch = false;
|
|
@@ -2823,13 +2822,13 @@ class MultiselectControl {
|
|
|
2823
2822
|
// Remove all filtered options from selection
|
|
2824
2823
|
this.selectedItems = this.selectedItems.filter((item) => !this.filteredOptions.includes(item));
|
|
2825
2824
|
}
|
|
2826
|
-
this.
|
|
2825
|
+
this._updateSelectedItemList();
|
|
2827
2826
|
this.onChange(this.selectedItems);
|
|
2828
2827
|
this.optionsSelected.emit(this.selectedItems);
|
|
2829
2828
|
}
|
|
2830
2829
|
removeSelectedOption(option) {
|
|
2831
2830
|
this.selectedItems = this.selectedItems.filter((item) => item !== option);
|
|
2832
|
-
this.
|
|
2831
|
+
this._updateSelectedItemList();
|
|
2833
2832
|
this.onChange(this.selectedItems);
|
|
2834
2833
|
this.onTouched();
|
|
2835
2834
|
this.optionsSelected.emit(this.selectedItems);
|
|
@@ -2841,7 +2840,7 @@ class MultiselectControl {
|
|
|
2841
2840
|
else {
|
|
2842
2841
|
this.selectedItems = [...this.selectedItems, option];
|
|
2843
2842
|
}
|
|
2844
|
-
this.
|
|
2843
|
+
this._updateSelectedItemList();
|
|
2845
2844
|
// Update “select all” checkbox
|
|
2846
2845
|
this._recomputeSelectAllState();
|
|
2847
2846
|
// Notify form that selection changed
|
|
@@ -2955,7 +2954,7 @@ class MultiselectControl {
|
|
|
2955
2954
|
}
|
|
2956
2955
|
resetSelection() {
|
|
2957
2956
|
this.selectedItems = [];
|
|
2958
|
-
this.
|
|
2957
|
+
this._updateSelectedItemList();
|
|
2959
2958
|
this.onChange([]);
|
|
2960
2959
|
this.onTouched();
|
|
2961
2960
|
this.isDropdownOpen = false;
|
|
@@ -2966,26 +2965,29 @@ class MultiselectControl {
|
|
|
2966
2965
|
this.isDropdownOpen = false;
|
|
2967
2966
|
this._recomputeSelectAllState();
|
|
2968
2967
|
}
|
|
2969
|
-
|
|
2970
|
-
|
|
2968
|
+
_updateSelectedItemList() {
|
|
2969
|
+
const items = this.selectedItems ?? [];
|
|
2970
|
+
if (this._options && this._options.length > 0 && items.length === this._options.length) {
|
|
2971
2971
|
this.selectedItemList = "All Items Selected";
|
|
2972
2972
|
}
|
|
2973
2973
|
else {
|
|
2974
|
-
this.selectedItemList =
|
|
2974
|
+
this.selectedItemList = items
|
|
2975
2975
|
.map((item) => item?.[this.optionDisplayProperty])
|
|
2976
|
-
.filter((label) =>
|
|
2976
|
+
.filter((label) => label != null && String(label).trim() !== "")
|
|
2977
2977
|
.join(", ");
|
|
2978
2978
|
}
|
|
2979
|
-
this.inputControl.
|
|
2979
|
+
if (this.inputControl.value !== this.selectedItemList) {
|
|
2980
|
+
this.inputControl.setValue(this.selectedItemList, { emitEvent: false });
|
|
2981
|
+
}
|
|
2980
2982
|
}
|
|
2981
2983
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiselectControl, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2982
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MultiselectControl, isStandalone: true, selector: "multiselect-control", inputs: { title: "title", selectedItems: "selectedItems", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", deFocus: "deFocus", optionValueProperty: "optionValueProperty", inputLoader: "inputLoader", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", showSearch: "showSearch", optionDisplayProperty: "optionDisplayProperty", options: "options", readonly: "readonly", disabled: "disabled" }, outputs: { optionsSelected: "optionsSelected", selectionCleared: "selectionCleared", blurEvent: "blurEvent" }, host: { listeners: { "window:keydown": "handleWindowKeydown($event)" } }, providers: [
|
|
2984
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MultiselectControl, isStandalone: true, selector: "multiselect-control", inputs: { title: "title", selectedItems: "selectedItems", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", deFocus: "deFocus", optionValueProperty: "optionValueProperty", inputLoader: "inputLoader", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", showSearch: "showSearch", showSelectAll: "showSelectAll", optionDisplayProperty: "optionDisplayProperty", options: "options", readonly: "readonly", disabled: "disabled" }, outputs: { optionsSelected: "optionsSelected", selectionCleared: "selectionCleared", blurEvent: "blurEvent" }, host: { listeners: { "window:keydown": "handleWindowKeydown($event)" } }, providers: [
|
|
2983
2985
|
{
|
|
2984
2986
|
provide: NG_VALUE_ACCESSOR,
|
|
2985
2987
|
useExisting: forwardRef(() => MultiselectControl),
|
|
2986
2988
|
multi: true,
|
|
2987
2989
|
},
|
|
2988
|
-
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group multi-select\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n (clickOutside)=\"selectListOutsideClick()\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #input type=\"text\" class=\"form-control\" placeholder=\"{{ placeholder }}\" [formControl]=\"inputControl\"\r\n [ngClass]=\"{'is-invalid': error}\" (blur)=\"onBlur($event)\" (click)=\"toggleDropdown()\" readonly\r\n [value]=\"selectedItemList\" (keydown)=\"onKeyDown($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n @if (deFocus) {\r\n <span class=\"focus-border\"></span>\r\n }\r\n\r\n @if (!inputLoader && isDropdownOpen && clearVal && selectedItems.length > 0) {\r\n <label class=\"clear\" (click)=\"resetSelection()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </label> }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdown class=\"option-list\">\r\n @if (showSearch && options.length > 0) {\r\n <div class=\"list-filter\">\r\n <div>\r\n <label class=\"checkbox-container select-all\">\r\n <input type=\"checkbox\" [checked]=\"selectAllChecked\" (change)=\"onSelectAllChange($event)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search...\" (input)=\"handleInput($event) \"\r\n (keydown)=\"onKeyDown($event)\" />\r\n </div>\r\n <div class=\"ms-close\">\r\n <button type=\"button\" class=\"icon-button\">\r\n <a (click)=\"onCloseDropdown()\"><i class=\"he he-close\"></i></a>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"list-wrap\">\r\n @for (option of filteredOptions; track option[optionDisplayProperty]; let i = $index) {\r\n <div class=\"list-item\" (change)=\"toggleCheckbox(option)\" [ngClass]=\"{ 'highlighted': i === highlightedIndex }\">\r\n <label class=\"checkbox-container multi-select\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(option)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n {{ option[optionDisplayProperty] }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (filteredOptions.length === 0) {\r\n <div class=\"no-results\">No results found</div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.multi-select .option-list .list-filter{gap:10px;display:flex;padding:9px 10px;align-items:center;border-bottom:1px solid #efefef}.form-group.multi-select .option-list .list-filter .checkbox-container.select-all{top:-10px;margin-bottom:0;padding-left:22px}.form-group.multi-select .option-list .list-filter .form-group{margin-bottom:0;width:
|
|
2990
|
+
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group multi-select\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n (clickOutside)=\"selectListOutsideClick()\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #input type=\"text\" class=\"form-control\" placeholder=\"{{ placeholder }}\" [formControl]=\"inputControl\"\r\n [ngClass]=\"{'is-invalid': error}\" (blur)=\"onBlur($event)\" (click)=\"toggleDropdown()\" readonly\r\n [value]=\"selectedItemList\" (keydown)=\"onKeyDown($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n @if (deFocus) {\r\n <span class=\"focus-border\"></span>\r\n }\r\n\r\n @if (!inputLoader && isDropdownOpen && clearVal && selectedItems.length > 0) {\r\n <label class=\"clear\" (click)=\"resetSelection()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </label> }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdown class=\"option-list\">\r\n @if (showSearch && options.length > 0) {\r\n <div class=\"list-filter\">\r\n @if (showSelectAll) {\r\n <div>\r\n <label class=\"checkbox-container select-all\">\r\n <input type=\"checkbox\" [checked]=\"selectAllChecked\" (change)=\"onSelectAllChange($event)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </div>\r\n }\r\n <div class=\"form-group\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search...\" (input)=\"handleInput($event) \"\r\n (keydown)=\"onKeyDown($event)\" />\r\n </div>\r\n <div class=\"ms-close\">\r\n <button type=\"button\" class=\"icon-button\">\r\n <a (click)=\"onCloseDropdown()\"><i class=\"he he-close\"></i></a>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"list-wrap\">\r\n @for (option of filteredOptions; track option[optionDisplayProperty]; let i = $index) {\r\n <div class=\"list-item\" (change)=\"toggleCheckbox(option)\" [ngClass]=\"{ 'highlighted': i === highlightedIndex }\">\r\n <label class=\"checkbox-container multi-select\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(option)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n {{ option[optionDisplayProperty] }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (filteredOptions.length === 0) {\r\n <div class=\"no-results\">No results found</div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.multi-select .option-list .list-filter{gap:10px;display:flex;padding:9px 10px;align-items:center;border-bottom:1px solid #efefef}.form-group.multi-select .option-list .list-filter .checkbox-container.select-all{top:-10px;margin-bottom:0;padding-left:22px}.form-group.multi-select .option-list .list-filter .form-group{margin-bottom:0;flex:1;min-width:0}.form-group.multi-select .option-list .list-filter .form-group .form-control{height:34px;border-radius:5px;background:#fff;padding:.275rem .5rem;border:1px solid #cccccc!important}.form-group.multi-select .option-list .list-filter .form-group .form-control::placeholder{font-size:.925em}.form-group.multi-select .option-list .list-filter .ms-close .icon-button{background:#f0f0f0}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a{width:28px;height:28px;display:grid;cursor:pointer;position:relative;border-radius:5px;place-items:center;text-decoration:none;border:1px solid #efefef;box-shadow:0 0 3px #ebebeb}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a i{font-size:14px}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover{background:#ff7f5d1a}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover i{color:#ff7f5d}.form-group.multi-select .option-list .list-wrap{overflow:auto;max-height:180px}.form-group.multi-select .option-list .list-item{padding:0}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select{width:100%;font-size:1em;margin-bottom:0;font-weight:400;color:#584e4e;letter-spacing:.015rem;padding:10px 10px 10px 40px}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select .checkmark{top:9px;left:10px}.form-group.multi-select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.multi-select .clear{right:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] });
|
|
2989
2991
|
}
|
|
2990
2992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiselectControl, decorators: [{
|
|
2991
2993
|
type: Component,
|
|
@@ -2999,7 +3001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2999
3001
|
useExisting: forwardRef(() => MultiselectControl),
|
|
3000
3002
|
multi: true,
|
|
3001
3003
|
},
|
|
3002
|
-
], template: "<div class=\"form-group multi-select\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n (clickOutside)=\"selectListOutsideClick()\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #input type=\"text\" class=\"form-control\" placeholder=\"{{ placeholder }}\" [formControl]=\"inputControl\"\r\n [ngClass]=\"{'is-invalid': error}\" (blur)=\"onBlur($event)\" (click)=\"toggleDropdown()\" readonly\r\n [value]=\"selectedItemList\" (keydown)=\"onKeyDown($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n @if (deFocus) {\r\n <span class=\"focus-border\"></span>\r\n }\r\n\r\n @if (!inputLoader && isDropdownOpen && clearVal && selectedItems.length > 0) {\r\n <label class=\"clear\" (click)=\"resetSelection()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </label> }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdown class=\"option-list\">\r\n @if (showSearch && options.length > 0) {\r\n <div class=\"list-filter\">\r\n <div>\r\n <label class=\"checkbox-container select-all\">\r\n <input type=\"checkbox\" [checked]=\"selectAllChecked\" (change)=\"onSelectAllChange($event)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search...\" (input)=\"handleInput($event) \"\r\n (keydown)=\"onKeyDown($event)\" />\r\n </div>\r\n <div class=\"ms-close\">\r\n <button type=\"button\" class=\"icon-button\">\r\n <a (click)=\"onCloseDropdown()\"><i class=\"he he-close\"></i></a>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"list-wrap\">\r\n @for (option of filteredOptions; track option[optionDisplayProperty]; let i = $index) {\r\n <div class=\"list-item\" (change)=\"toggleCheckbox(option)\" [ngClass]=\"{ 'highlighted': i === highlightedIndex }\">\r\n <label class=\"checkbox-container multi-select\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(option)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n {{ option[optionDisplayProperty] }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (filteredOptions.length === 0) {\r\n <div class=\"no-results\">No results found</div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.multi-select .option-list .list-filter{gap:10px;display:flex;padding:9px 10px;align-items:center;border-bottom:1px solid #efefef}.form-group.multi-select .option-list .list-filter .checkbox-container.select-all{top:-10px;margin-bottom:0;padding-left:22px}.form-group.multi-select .option-list .list-filter .form-group{margin-bottom:0;width:
|
|
3004
|
+
], template: "<div class=\"form-group multi-select\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n (clickOutside)=\"selectListOutsideClick()\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #input type=\"text\" class=\"form-control\" placeholder=\"{{ placeholder }}\" [formControl]=\"inputControl\"\r\n [ngClass]=\"{'is-invalid': error}\" (blur)=\"onBlur($event)\" (click)=\"toggleDropdown()\" readonly\r\n [value]=\"selectedItemList\" (keydown)=\"onKeyDown($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n @if (deFocus) {\r\n <span class=\"focus-border\"></span>\r\n }\r\n\r\n @if (!inputLoader && isDropdownOpen && clearVal && selectedItems.length > 0) {\r\n <label class=\"clear\" (click)=\"resetSelection()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </label> }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdown class=\"option-list\">\r\n @if (showSearch && options.length > 0) {\r\n <div class=\"list-filter\">\r\n @if (showSelectAll) {\r\n <div>\r\n <label class=\"checkbox-container select-all\">\r\n <input type=\"checkbox\" [checked]=\"selectAllChecked\" (change)=\"onSelectAllChange($event)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </div>\r\n }\r\n <div class=\"form-group\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search...\" (input)=\"handleInput($event) \"\r\n (keydown)=\"onKeyDown($event)\" />\r\n </div>\r\n <div class=\"ms-close\">\r\n <button type=\"button\" class=\"icon-button\">\r\n <a (click)=\"onCloseDropdown()\"><i class=\"he he-close\"></i></a>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"list-wrap\">\r\n @for (option of filteredOptions; track option[optionDisplayProperty]; let i = $index) {\r\n <div class=\"list-item\" (change)=\"toggleCheckbox(option)\" [ngClass]=\"{ 'highlighted': i === highlightedIndex }\">\r\n <label class=\"checkbox-container multi-select\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(option)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n {{ option[optionDisplayProperty] }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (filteredOptions.length === 0) {\r\n <div class=\"no-results\">No results found</div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.multi-select .option-list .list-filter{gap:10px;display:flex;padding:9px 10px;align-items:center;border-bottom:1px solid #efefef}.form-group.multi-select .option-list .list-filter .checkbox-container.select-all{top:-10px;margin-bottom:0;padding-left:22px}.form-group.multi-select .option-list .list-filter .form-group{margin-bottom:0;flex:1;min-width:0}.form-group.multi-select .option-list .list-filter .form-group .form-control{height:34px;border-radius:5px;background:#fff;padding:.275rem .5rem;border:1px solid #cccccc!important}.form-group.multi-select .option-list .list-filter .form-group .form-control::placeholder{font-size:.925em}.form-group.multi-select .option-list .list-filter .ms-close .icon-button{background:#f0f0f0}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a{width:28px;height:28px;display:grid;cursor:pointer;position:relative;border-radius:5px;place-items:center;text-decoration:none;border:1px solid #efefef;box-shadow:0 0 3px #ebebeb}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a i{font-size:14px}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover{background:#ff7f5d1a}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover i{color:#ff7f5d}.form-group.multi-select .option-list .list-wrap{overflow:auto;max-height:180px}.form-group.multi-select .option-list .list-item{padding:0}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select{width:100%;font-size:1em;margin-bottom:0;font-weight:400;color:#584e4e;letter-spacing:.015rem;padding:10px 10px 10px 40px}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select .checkmark{top:9px;left:10px}.form-group.multi-select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.multi-select .clear{right:30px}\n"] }]
|
|
3003
3005
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
|
|
3004
3006
|
type: Input
|
|
3005
3007
|
}], selectedItems: [{
|
|
@@ -3026,6 +3028,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3026
3028
|
type: Input
|
|
3027
3029
|
}], showSearch: [{
|
|
3028
3030
|
type: Input
|
|
3031
|
+
}], showSelectAll: [{
|
|
3032
|
+
type: Input
|
|
3029
3033
|
}], optionDisplayProperty: [{
|
|
3030
3034
|
type: Input
|
|
3031
3035
|
}], optionsSelected: [{
|