nexheal-lib 0.0.66 → 0.0.67
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 +13 -2
- package/fesm2022/nexheal-lib.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/package.json +1 -1
package/fesm2022/nexheal-lib.mjs
CHANGED
|
@@ -3405,6 +3405,17 @@ class PaginatedAutocompleteControl {
|
|
|
3405
3405
|
this.openWithSearch();
|
|
3406
3406
|
}
|
|
3407
3407
|
}
|
|
3408
|
+
onSearchIconClick(event) {
|
|
3409
|
+
event.preventDefault();
|
|
3410
|
+
event.stopPropagation();
|
|
3411
|
+
if (this.readonly || this.disabled) {
|
|
3412
|
+
return;
|
|
3413
|
+
}
|
|
3414
|
+
this.cancelPendingSearch = false;
|
|
3415
|
+
this.hasFocus = true;
|
|
3416
|
+
this.inputElement?.nativeElement.focus();
|
|
3417
|
+
this.loadPage(1, this.openSearchTerm());
|
|
3418
|
+
}
|
|
3408
3419
|
/** Text to search with when the dropdown opens: if the input just holds the
|
|
3409
3420
|
* selected item's display text, open with the full list instead. */
|
|
3410
3421
|
openSearchTerm() {
|
|
@@ -3607,7 +3618,7 @@ class PaginatedAutocompleteControl {
|
|
|
3607
3618
|
useExisting: PaginatedAutocompleteControl,
|
|
3608
3619
|
multi: true,
|
|
3609
3620
|
},
|
|
3610
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], ngImport: i0, template: "<div class=\"form-group auto-complete paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n [class.with-search-icon]=\"showSearchIcon\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n
|
|
3621
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], ngImport: i0, template: "<div class=\"form-group auto-complete paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n [class.with-search-icon]=\"showSearchIcon\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n (input)=\"onUserType($event)\" (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\r\n [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\r\n\r\n <span class=\"focus-border\"></span>\r\n\r\n @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\r\n <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (showSearchIcon && !readonly) {\r\n <label class=\"rs-search\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onSearchIconClick($event)\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdownElement class=\"option-list\" [class.fixed-height]=\"paginationType === 'arrow' && totalPages > 1\"\r\n (mousedown)=\"onOptionMouseDown()\" (scroll)=\"onListScroll($event)\">\r\n @if (options.length === 0 && !isPageLoading && !loadErrorMessage) {\r\n <div class=\"no-results\">\r\n <div>No results found</div>\r\n @if (isAddNewItem) {\r\n <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\r\n Add New Item\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n @for (suggestion of options; track suggestion.id; let i = $index) {\r\n <div class=\"list-item\" [ngClass]=\"{\r\n 'active': suggestion === selectedItems,\r\n 'highlighted': highlightedIndex === i\r\n }\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n {{ suggestion[optionDisplayProperty] }}\r\n </div>\r\n }\r\n\r\n @if (isPageLoading) {\r\n <div class=\"list-loading\">Loading...</div>\r\n }\r\n\r\n @if (loadErrorMessage) {\r\n <div class=\"load-error\" (click)=\"retryLoad($event)\">\r\n {{ loadErrorMessage }} \u00B7 <span class=\"retry\">Retry</span>\r\n </div>\r\n }\r\n\r\n @if (paginationType === 'click' && hasMore && !isPageLoading && !loadErrorMessage) {\r\n <div class=\"load-more\" (click)=\"onLoadMoreClick($event)\">\r\n Load more ({{ options.length }} of {{ totalCount }})\r\n </div>\r\n }\r\n\r\n @if (totalCount > 0 && options.length > 0 && !loadErrorMessage && !(paginationType === 'click' && hasMore)) {\r\n <div class=\"list-footer\" [class.pager-footer]=\"paginationType === 'arrow'\">\r\n @if (paginationType === 'arrow') {\r\n <span class=\"range\">{{ pageRangeStart }} - {{ pageRangeEnd }} of {{ totalCount }}</span>\r\n <span class=\"pager-nav\">\r\n <span class=\"pager-btn\" [class.disabled]=\"currentPage <= 1\" (click)=\"prevArrowPage()\">\u2039</span>\r\n <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\u203A</span>\r\n </span>\r\n } @else {\r\n {{ options.length }} of {{ totalCount }}\r\n @if (hasMore && paginationType === 'scroll') {\r\n <span> \u00B7 scroll for more</span>\r\n }\r\n }\r\n </div>\r\n }\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>\r\n", styles: [".form-group.paginated-autocomplete.with-search-icon .form-control{padding-right:4rem}.form-group.paginated-autocomplete.with-search-icon .rs-search{top:27px;right:7px;z-index:2;padding:5px;width:30px;height:30px;display:grid;cursor:pointer;position:absolute;border-radius:5px;place-items:center}.form-group.paginated-autocomplete.with-search-icon .rs-search i{font-size:16px;color:#807a7a}.form-group.paginated-autocomplete.with-search-icon .rs-search:hover{background:#ff7f5d1a}.form-group.paginated-autocomplete.with-search-icon .rs-search:hover i{color:#ff7f5d}.form-group.paginated-autocomplete.with-search-icon .clear{right:2.5rem}.form-group.paginated-autocomplete.with-search-icon.no-label .rs-search{top:7px}.form-group.paginated-autocomplete.with-search-icon.no-label .clear{top:10px}.form-group.paginated-autocomplete.with-search-icon.group-sm .rs-search{top:25px}.form-group.paginated-autocomplete.with-search-icon.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.paginated-autocomplete.with-search-icon.group-sm.no-label .rs-search i{font-size:14px}.form-group.paginated-autocomplete.with-search-icon.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.paginated-autocomplete .option-list{max-height:220px;overflow-y:auto}.form-group.paginated-autocomplete .option-list.fixed-height{height:220px;display:flex;flex-direction:column}.form-group.paginated-autocomplete .option-list.fixed-height .list-item,.form-group.paginated-autocomplete .option-list.fixed-height .no-results,.form-group.paginated-autocomplete .option-list.fixed-height .list-loading,.form-group.paginated-autocomplete .option-list.fixed-height .load-error{flex-shrink:0}.form-group.paginated-autocomplete .option-list.fixed-height .list-footer{margin-top:auto}.form-group.paginated-autocomplete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.paginated-autocomplete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.paginated-autocomplete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .load-error{padding:8px 10px;text-align:center;font-size:12px;color:#dc3545;cursor:pointer;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.paginated-autocomplete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer{position:sticky;bottom:0;padding:4px 10px;text-align:center;font-size:11px;color:#9b9b9b;background-color:#fff;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .list-footer .pager-nav{display:inline-flex;align-items:center;gap:6px}.form-group.paginated-autocomplete .option-list .list-footer .range{color:#5f6368;font-size:12px}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn{width:24px;height:24px;border-radius:4px;border:1px solid #dadce0;display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:#5f6368;cursor:pointer;background-color:#fff}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn.disabled{border-color:transparent;color:#ccc;cursor:default;pointer-events:none}.form-group.paginated-autocomplete .option-list .list-footer.pager-footer{display:flex;justify-content:space-between;align-items:center;padding:4px 8px}\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"] }] });
|
|
3611
3622
|
}
|
|
3612
3623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PaginatedAutocompleteControl, decorators: [{
|
|
3613
3624
|
type: Component,
|
|
@@ -3617,7 +3628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3617
3628
|
useExisting: PaginatedAutocompleteControl,
|
|
3618
3629
|
multi: true,
|
|
3619
3630
|
},
|
|
3620
|
-
], template: "<div class=\"form-group auto-complete paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n [class.with-search-icon]=\"showSearchIcon\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n
|
|
3631
|
+
], template: "<div class=\"form-group auto-complete paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n [class.with-search-icon]=\"showSearchIcon\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n (input)=\"onUserType($event)\" (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\r\n [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\r\n\r\n <span class=\"focus-border\"></span>\r\n\r\n @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\r\n <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (showSearchIcon && !readonly) {\r\n <label class=\"rs-search\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onSearchIconClick($event)\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdownElement class=\"option-list\" [class.fixed-height]=\"paginationType === 'arrow' && totalPages > 1\"\r\n (mousedown)=\"onOptionMouseDown()\" (scroll)=\"onListScroll($event)\">\r\n @if (options.length === 0 && !isPageLoading && !loadErrorMessage) {\r\n <div class=\"no-results\">\r\n <div>No results found</div>\r\n @if (isAddNewItem) {\r\n <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\r\n Add New Item\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n @for (suggestion of options; track suggestion.id; let i = $index) {\r\n <div class=\"list-item\" [ngClass]=\"{\r\n 'active': suggestion === selectedItems,\r\n 'highlighted': highlightedIndex === i\r\n }\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n {{ suggestion[optionDisplayProperty] }}\r\n </div>\r\n }\r\n\r\n @if (isPageLoading) {\r\n <div class=\"list-loading\">Loading...</div>\r\n }\r\n\r\n @if (loadErrorMessage) {\r\n <div class=\"load-error\" (click)=\"retryLoad($event)\">\r\n {{ loadErrorMessage }} \u00B7 <span class=\"retry\">Retry</span>\r\n </div>\r\n }\r\n\r\n @if (paginationType === 'click' && hasMore && !isPageLoading && !loadErrorMessage) {\r\n <div class=\"load-more\" (click)=\"onLoadMoreClick($event)\">\r\n Load more ({{ options.length }} of {{ totalCount }})\r\n </div>\r\n }\r\n\r\n @if (totalCount > 0 && options.length > 0 && !loadErrorMessage && !(paginationType === 'click' && hasMore)) {\r\n <div class=\"list-footer\" [class.pager-footer]=\"paginationType === 'arrow'\">\r\n @if (paginationType === 'arrow') {\r\n <span class=\"range\">{{ pageRangeStart }} - {{ pageRangeEnd }} of {{ totalCount }}</span>\r\n <span class=\"pager-nav\">\r\n <span class=\"pager-btn\" [class.disabled]=\"currentPage <= 1\" (click)=\"prevArrowPage()\">\u2039</span>\r\n <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\u203A</span>\r\n </span>\r\n } @else {\r\n {{ options.length }} of {{ totalCount }}\r\n @if (hasMore && paginationType === 'scroll') {\r\n <span> \u00B7 scroll for more</span>\r\n }\r\n }\r\n </div>\r\n }\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>\r\n", styles: [".form-group.paginated-autocomplete.with-search-icon .form-control{padding-right:4rem}.form-group.paginated-autocomplete.with-search-icon .rs-search{top:27px;right:7px;z-index:2;padding:5px;width:30px;height:30px;display:grid;cursor:pointer;position:absolute;border-radius:5px;place-items:center}.form-group.paginated-autocomplete.with-search-icon .rs-search i{font-size:16px;color:#807a7a}.form-group.paginated-autocomplete.with-search-icon .rs-search:hover{background:#ff7f5d1a}.form-group.paginated-autocomplete.with-search-icon .rs-search:hover i{color:#ff7f5d}.form-group.paginated-autocomplete.with-search-icon .clear{right:2.5rem}.form-group.paginated-autocomplete.with-search-icon.no-label .rs-search{top:7px}.form-group.paginated-autocomplete.with-search-icon.no-label .clear{top:10px}.form-group.paginated-autocomplete.with-search-icon.group-sm .rs-search{top:25px}.form-group.paginated-autocomplete.with-search-icon.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.paginated-autocomplete.with-search-icon.group-sm.no-label .rs-search i{font-size:14px}.form-group.paginated-autocomplete.with-search-icon.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.paginated-autocomplete .option-list{max-height:220px;overflow-y:auto}.form-group.paginated-autocomplete .option-list.fixed-height{height:220px;display:flex;flex-direction:column}.form-group.paginated-autocomplete .option-list.fixed-height .list-item,.form-group.paginated-autocomplete .option-list.fixed-height .no-results,.form-group.paginated-autocomplete .option-list.fixed-height .list-loading,.form-group.paginated-autocomplete .option-list.fixed-height .load-error{flex-shrink:0}.form-group.paginated-autocomplete .option-list.fixed-height .list-footer{margin-top:auto}.form-group.paginated-autocomplete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.paginated-autocomplete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.paginated-autocomplete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .load-error{padding:8px 10px;text-align:center;font-size:12px;color:#dc3545;cursor:pointer;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.paginated-autocomplete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer{position:sticky;bottom:0;padding:4px 10px;text-align:center;font-size:11px;color:#9b9b9b;background-color:#fff;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .list-footer .pager-nav{display:inline-flex;align-items:center;gap:6px}.form-group.paginated-autocomplete .option-list .list-footer .range{color:#5f6368;font-size:12px}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn{width:24px;height:24px;border-radius:4px;border:1px solid #dadce0;display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:#5f6368;cursor:pointer;background-color:#fff}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer .pager-btn.disabled{border-color:transparent;color:#ccc;cursor:default;pointer-events:none}.form-group.paginated-autocomplete .option-list .list-footer.pager-footer{display:flex;justify-content:space-between;align-items:center;padding:4px 8px}\n"] }]
|
|
3621
3632
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
3622
3633
|
type: Input
|
|
3623
3634
|
}], required: [{
|