nexheal-lib 0.0.69 → 0.0.70
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 +24 -126
- package/fesm2022/nexheal-lib.mjs.map +1 -1
- package/index.d.ts +1 -19
- package/package.json +1 -1
package/fesm2022/nexheal-lib.mjs
CHANGED
|
@@ -3061,7 +3061,6 @@ class PaginatedAutocompleteControl {
|
|
|
3061
3061
|
required = false;
|
|
3062
3062
|
placeholder = "";
|
|
3063
3063
|
customClass = '';
|
|
3064
|
-
showSearchIcon = true;
|
|
3065
3064
|
clearVal = true;
|
|
3066
3065
|
error = false;
|
|
3067
3066
|
errorMessage = "";
|
|
@@ -3074,12 +3073,6 @@ class PaginatedAutocompleteControl {
|
|
|
3074
3073
|
paginationType = 'scroll';
|
|
3075
3074
|
pageSize = 10;
|
|
3076
3075
|
searchDebounce = 300;
|
|
3077
|
-
/**
|
|
3078
|
-
* Omit: search runs only from the search icon (and Enter). Set a number: type-to-search
|
|
3079
|
-
* with that minimum trimmed length (empty search still loads the full list). Pass 0 for
|
|
3080
|
-
* type-to-search with no minimum.
|
|
3081
|
-
*/
|
|
3082
|
-
minSearchLength;
|
|
3083
3076
|
/** Re-fetch page 1 every time the dropdown opens, instead of reusing cached results */
|
|
3084
3077
|
refreshOnOpen = false;
|
|
3085
3078
|
/** Total record count for the current search, from the API response */
|
|
@@ -3134,15 +3127,12 @@ class PaginatedAutocompleteControl {
|
|
|
3134
3127
|
this._disabled = value;
|
|
3135
3128
|
if (this.inputControl) {
|
|
3136
3129
|
if (value) {
|
|
3137
|
-
this.inputControl.disable(
|
|
3130
|
+
this.inputControl.disable();
|
|
3138
3131
|
}
|
|
3139
3132
|
else {
|
|
3140
|
-
this.inputControl.enable(
|
|
3133
|
+
this.inputControl.enable();
|
|
3141
3134
|
}
|
|
3142
3135
|
}
|
|
3143
|
-
if (value) {
|
|
3144
|
-
this.onControlDisabled();
|
|
3145
|
-
}
|
|
3146
3136
|
}
|
|
3147
3137
|
pageChange = new EventEmitter();
|
|
3148
3138
|
optionSelected = new EventEmitter();
|
|
@@ -3184,14 +3174,6 @@ class PaginatedAutocompleteControl {
|
|
|
3184
3174
|
get pageRangeEnd() {
|
|
3185
3175
|
return Math.min((this.currentPage - 1) * this.pageSize + this._displayedOptions.length, this.totalCount);
|
|
3186
3176
|
}
|
|
3187
|
-
/** Disabled via @Input or reactive forms (ControlValueAccessor). */
|
|
3188
|
-
get controlDisabled() {
|
|
3189
|
-
return this._disabled || this.inputControl.disabled;
|
|
3190
|
-
}
|
|
3191
|
-
/** `minSearchLength` omitted — API only via search icon / Enter, not while typing. */
|
|
3192
|
-
get searchOnButtonOnly() {
|
|
3193
|
-
return this.minSearchLength === undefined;
|
|
3194
|
-
}
|
|
3195
3177
|
constructor() { }
|
|
3196
3178
|
ngOnInit() {
|
|
3197
3179
|
this.inputControl.markAsPristine();
|
|
@@ -3203,12 +3185,8 @@ class PaginatedAutocompleteControl {
|
|
|
3203
3185
|
// A selection happened after this keystroke — drop the search
|
|
3204
3186
|
if (this.cancelPendingSearch)
|
|
3205
3187
|
return;
|
|
3206
|
-
if (this.
|
|
3207
|
-
this.readonly ||
|
|
3208
|
-
this.controlDisabled ||
|
|
3209
|
-
!this.hasFocus) {
|
|
3188
|
+
if (this.readonly || !this.hasFocus)
|
|
3210
3189
|
return;
|
|
3211
|
-
}
|
|
3212
3190
|
this.loadPage(1, value);
|
|
3213
3191
|
}));
|
|
3214
3192
|
}
|
|
@@ -3256,51 +3234,15 @@ class PaginatedAutocompleteControl {
|
|
|
3256
3234
|
this.onTouched = fn;
|
|
3257
3235
|
}
|
|
3258
3236
|
setDisabledState(isDisabled) {
|
|
3259
|
-
this._disabled = isDisabled;
|
|
3260
3237
|
if (isDisabled) {
|
|
3261
|
-
this.inputControl.disable(
|
|
3262
|
-
this.onControlDisabled();
|
|
3238
|
+
this.inputControl.disable();
|
|
3263
3239
|
}
|
|
3264
3240
|
else {
|
|
3265
|
-
this.inputControl.enable(
|
|
3241
|
+
this.inputControl.enable();
|
|
3266
3242
|
}
|
|
3267
3243
|
}
|
|
3268
|
-
onControlDisabled() {
|
|
3269
|
-
this.isPageLoading = false;
|
|
3270
|
-
this.isDropdownOpen = false;
|
|
3271
|
-
this.hasFocus = false;
|
|
3272
|
-
}
|
|
3273
3244
|
// paging
|
|
3274
|
-
isSearchAllowed(search) {
|
|
3275
|
-
if (this.minSearchLength == null || this.minSearchLength <= 0) {
|
|
3276
|
-
return true;
|
|
3277
|
-
}
|
|
3278
|
-
const trimmed = search.trim();
|
|
3279
|
-
if (trimmed.length === 0) {
|
|
3280
|
-
return true;
|
|
3281
|
-
}
|
|
3282
|
-
return trimmed.length >= this.minSearchLength;
|
|
3283
|
-
}
|
|
3284
|
-
handleSearchBelowMinLength() {
|
|
3285
|
-
this.isPageLoading = false;
|
|
3286
|
-
this.isDropdownOpen = false;
|
|
3287
|
-
this.loadErrorMessage = null;
|
|
3288
|
-
this.failedPage = null;
|
|
3289
|
-
this._displayedOptions = [];
|
|
3290
|
-
this.currentPage = 1;
|
|
3291
|
-
this._pendingPage = 1;
|
|
3292
|
-
this.pageCache.clear();
|
|
3293
|
-
this.highlightedIndex = null;
|
|
3294
|
-
}
|
|
3295
3245
|
loadPage(page, search) {
|
|
3296
|
-
if (this.readonly || this.controlDisabled) {
|
|
3297
|
-
this.isPageLoading = false;
|
|
3298
|
-
return;
|
|
3299
|
-
}
|
|
3300
|
-
if (page === 1 && !this.isSearchAllowed(search)) {
|
|
3301
|
-
this.handleSearchBelowMinLength();
|
|
3302
|
-
return;
|
|
3303
|
-
}
|
|
3304
3246
|
this.currentPage = page;
|
|
3305
3247
|
this._pendingPage = page;
|
|
3306
3248
|
if (page === 1) {
|
|
@@ -3416,7 +3358,7 @@ class PaginatedAutocompleteControl {
|
|
|
3416
3358
|
}
|
|
3417
3359
|
// events
|
|
3418
3360
|
onUserType(event) {
|
|
3419
|
-
if (this.readonly
|
|
3361
|
+
if (this.readonly)
|
|
3420
3362
|
return;
|
|
3421
3363
|
// A real keystroke re-arms searching after any selection cancelled it
|
|
3422
3364
|
this.cancelPendingSearch = false;
|
|
@@ -3424,31 +3366,17 @@ class PaginatedAutocompleteControl {
|
|
|
3424
3366
|
}
|
|
3425
3367
|
onFocus() {
|
|
3426
3368
|
this.hasFocus = true;
|
|
3427
|
-
if (this.readonly || this.
|
|
3369
|
+
if (this.readonly || this.isDropdownOpen)
|
|
3428
3370
|
return;
|
|
3429
3371
|
this.openWithSearch();
|
|
3430
3372
|
}
|
|
3431
3373
|
onInputClick() {
|
|
3432
|
-
if (this.readonly || this.
|
|
3374
|
+
if (this.readonly || this.isDropdownOpen)
|
|
3433
3375
|
return;
|
|
3434
3376
|
if (this.hasFocus) {
|
|
3435
3377
|
this.openWithSearch();
|
|
3436
3378
|
}
|
|
3437
3379
|
}
|
|
3438
|
-
onSearchIconClick(event) {
|
|
3439
|
-
event.preventDefault();
|
|
3440
|
-
event.stopPropagation();
|
|
3441
|
-
this.inputElement?.nativeElement.focus();
|
|
3442
|
-
this.runSearchAction();
|
|
3443
|
-
}
|
|
3444
|
-
runSearchAction() {
|
|
3445
|
-
if (this.readonly || this.controlDisabled) {
|
|
3446
|
-
return;
|
|
3447
|
-
}
|
|
3448
|
-
this.cancelPendingSearch = false;
|
|
3449
|
-
this.hasFocus = true;
|
|
3450
|
-
this.loadPage(1, this.openSearchTerm());
|
|
3451
|
-
}
|
|
3452
3380
|
/** Text to search with when the dropdown opens: if the input just holds the
|
|
3453
3381
|
* selected item's display text, open with the full list instead. */
|
|
3454
3382
|
openSearchTerm() {
|
|
@@ -3459,35 +3387,21 @@ class PaginatedAutocompleteControl {
|
|
|
3459
3387
|
}
|
|
3460
3388
|
return value;
|
|
3461
3389
|
}
|
|
3462
|
-
/** Reopen the dropdown from cached results for `term` without calling the API. */
|
|
3463
|
-
tryReopenCachedSearch(term) {
|
|
3464
|
-
if (this.refreshOnOpen ||
|
|
3465
|
-
this.lastLoadedSearch !== term ||
|
|
3466
|
-
this._displayedOptions.length === 0) {
|
|
3467
|
-
return false;
|
|
3468
|
-
}
|
|
3469
|
-
this.isPageLoading = false;
|
|
3470
|
-
this.openDropdown();
|
|
3471
|
-
if (this.paginationType === 'arrow') {
|
|
3472
|
-
this.showCachedPage(1);
|
|
3473
|
-
}
|
|
3474
|
-
const idx = this.selectedItems
|
|
3475
|
-
? this._displayedOptions.findIndex((o) => o.id === this.selectedItems.id)
|
|
3476
|
-
: -1;
|
|
3477
|
-
this.highlightedIndex =
|
|
3478
|
-
idx >= 0 ? idx : this._displayedOptions.length > 0 ? 0 : null;
|
|
3479
|
-
return true;
|
|
3480
|
-
}
|
|
3481
3390
|
openWithSearch() {
|
|
3482
|
-
if (this.readonly || this.controlDisabled) {
|
|
3483
|
-
return;
|
|
3484
|
-
}
|
|
3485
3391
|
const term = this.openSearchTerm();
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
|
|
3490
|
-
|
|
3392
|
+
// Reuse cached results when reopening with the same search term
|
|
3393
|
+
if (!this.refreshOnOpen &&
|
|
3394
|
+
this.lastLoadedSearch === term &&
|
|
3395
|
+
this._displayedOptions.length > 0) {
|
|
3396
|
+
this.openDropdown();
|
|
3397
|
+
if (this.paginationType === 'arrow') {
|
|
3398
|
+
this.showCachedPage(1);
|
|
3399
|
+
}
|
|
3400
|
+
const idx = this.selectedItems
|
|
3401
|
+
? this._displayedOptions.findIndex((o) => o.id === this.selectedItems.id)
|
|
3402
|
+
: -1;
|
|
3403
|
+
this.highlightedIndex =
|
|
3404
|
+
idx >= 0 ? idx : this._displayedOptions.length > 0 ? 0 : null;
|
|
3491
3405
|
return;
|
|
3492
3406
|
}
|
|
3493
3407
|
this.loadPage(1, term);
|
|
@@ -3538,10 +3452,6 @@ class PaginatedAutocompleteControl {
|
|
|
3538
3452
|
}
|
|
3539
3453
|
onKeyDown(event) {
|
|
3540
3454
|
if (!this.isDropdownOpen) {
|
|
3541
|
-
if (this.searchOnButtonOnly && event.key === "Enter") {
|
|
3542
|
-
event.preventDefault();
|
|
3543
|
-
this.runSearchAction();
|
|
3544
|
-
}
|
|
3545
3455
|
return;
|
|
3546
3456
|
}
|
|
3547
3457
|
switch (event.key) {
|
|
@@ -3658,26 +3568,18 @@ class PaginatedAutocompleteControl {
|
|
|
3658
3568
|
this.valueBuffer = null;
|
|
3659
3569
|
this.onChange(null);
|
|
3660
3570
|
this.selectionCleared.emit();
|
|
3661
|
-
if (this.searchOnButtonOnly) {
|
|
3662
|
-
this.isDropdownOpen = false;
|
|
3663
|
-
this.isPageLoading = false;
|
|
3664
|
-
this._displayedOptions = [];
|
|
3665
|
-
this.pageCache.clear();
|
|
3666
|
-
this.lastLoadedSearch = null;
|
|
3667
|
-
return;
|
|
3668
|
-
}
|
|
3669
3571
|
if (this.hasFocus) {
|
|
3670
3572
|
this.loadPage(1, "");
|
|
3671
3573
|
}
|
|
3672
3574
|
}
|
|
3673
3575
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PaginatedAutocompleteControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3674
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PaginatedAutocompleteControl, isStandalone: true, selector: "paginated-autocomplete-control", inputs: { title: "title", required: "required", placeholder: "placeholder", customClass: "customClass",
|
|
3576
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PaginatedAutocompleteControl, isStandalone: true, selector: "paginated-autocomplete-control", inputs: { title: "title", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", readonly: "readonly", isAddNewItem: "isAddNewItem", optionDisplayProperty: "optionDisplayProperty", paginationType: "paginationType", pageSize: "pageSize", searchDebounce: "searchDebounce", refreshOnOpen: "refreshOnOpen", totalCount: "totalCount", options: "options", disabled: "disabled" }, outputs: { pageChange: "pageChange", optionSelected: "optionSelected", selectionCleared: "selectionCleared", blurEvent: "blurEvent", optionPatched: "optionPatched", addNewItemClicked: "addNewItemClicked" }, providers: [
|
|
3675
3577
|
{
|
|
3676
3578
|
provide: NG_VALUE_ACCESSOR,
|
|
3677
3579
|
useExisting: PaginatedAutocompleteControl,
|
|
3678
3580
|
multi: true,
|
|
3679
3581
|
},
|
|
3680
|
-
], 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
|
|
3582
|
+
], 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\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\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 (true) {\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()\">\r\n <i class=\"he he-chevron-left\"></i>\r\n </span>\r\n <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\r\n <i class=\"he he-chevron-right\"></i>\r\n </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.auto-complete .form-control{padding-right:unset}.form-group.auto-complete .clear{right:7px}.form-group.auto-complete .option-list{max-height:220px;overflow-y:auto}.form-group.auto-complete .option-list.fixed-height{height:220px;display:flex;flex-direction:column}.form-group.auto-complete .option-list.fixed-height .list-item,.form-group.auto-complete .option-list.fixed-height .no-results,.form-group.auto-complete .option-list.fixed-height .list-loading,.form-group.auto-complete .option-list.fixed-height .load-error{flex-shrink:0}.form-group.auto-complete .option-list.fixed-height .list-footer{margin-top:auto}.form-group.auto-complete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.auto-complete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.auto-complete .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.auto-complete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.auto-complete .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.auto-complete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.auto-complete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.auto-complete .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.auto-complete .option-list .list-footer .pager-nav{display:inline-flex;align-items:center;gap:6px}.form-group.auto-complete .option-list .list-footer .range{color:#5f6368;font-size:12px}.form-group.auto-complete .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;line-height:1;cursor:pointer;background-color:#fff}.form-group.auto-complete .option-list .list-footer .pager-btn .he{font-size:13px;color:#2ba599;font-weight:600}.form-group.auto-complete .option-list .list-footer .pager-btn:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled{border-color:transparent;cursor:default;pointer-events:none}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled .he{color:#ccc}.form-group.auto-complete .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"] }] });
|
|
3681
3583
|
}
|
|
3682
3584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PaginatedAutocompleteControl, decorators: [{
|
|
3683
3585
|
type: Component,
|
|
@@ -3687,7 +3589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3687
3589
|
useExisting: PaginatedAutocompleteControl,
|
|
3688
3590
|
multi: true,
|
|
3689
3591
|
},
|
|
3690
|
-
], template: "<div class=\"form-group auto-complete
|
|
3592
|
+
], template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\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 (true) {\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()\">\r\n <i class=\"he he-chevron-left\"></i>\r\n </span>\r\n <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\r\n <i class=\"he he-chevron-right\"></i>\r\n </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.auto-complete .form-control{padding-right:unset}.form-group.auto-complete .clear{right:7px}.form-group.auto-complete .option-list{max-height:220px;overflow-y:auto}.form-group.auto-complete .option-list.fixed-height{height:220px;display:flex;flex-direction:column}.form-group.auto-complete .option-list.fixed-height .list-item,.form-group.auto-complete .option-list.fixed-height .no-results,.form-group.auto-complete .option-list.fixed-height .list-loading,.form-group.auto-complete .option-list.fixed-height .load-error{flex-shrink:0}.form-group.auto-complete .option-list.fixed-height .list-footer{margin-top:auto}.form-group.auto-complete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.auto-complete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.auto-complete .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.auto-complete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.auto-complete .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.auto-complete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.auto-complete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.auto-complete .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.auto-complete .option-list .list-footer .pager-nav{display:inline-flex;align-items:center;gap:6px}.form-group.auto-complete .option-list .list-footer .range{color:#5f6368;font-size:12px}.form-group.auto-complete .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;line-height:1;cursor:pointer;background-color:#fff}.form-group.auto-complete .option-list .list-footer .pager-btn .he{font-size:13px;color:#2ba599;font-weight:600}.form-group.auto-complete .option-list .list-footer .pager-btn:hover{background-color:#f5f5f5}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled{border-color:transparent;cursor:default;pointer-events:none}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled .he{color:#ccc}.form-group.auto-complete .option-list .list-footer.pager-footer{display:flex;justify-content:space-between;align-items:center;padding:4px 8px}\n"] }]
|
|
3691
3593
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
3692
3594
|
type: Input
|
|
3693
3595
|
}], required: [{
|
|
@@ -3696,8 +3598,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3696
3598
|
type: Input
|
|
3697
3599
|
}], customClass: [{
|
|
3698
3600
|
type: Input
|
|
3699
|
-
}], showSearchIcon: [{
|
|
3700
|
-
type: Input
|
|
3701
3601
|
}], clearVal: [{
|
|
3702
3602
|
type: Input
|
|
3703
3603
|
}], error: [{
|
|
@@ -3720,8 +3620,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3720
3620
|
type: Input
|
|
3721
3621
|
}], searchDebounce: [{
|
|
3722
3622
|
type: Input
|
|
3723
|
-
}], minSearchLength: [{
|
|
3724
|
-
type: Input
|
|
3725
3623
|
}], refreshOnOpen: [{
|
|
3726
3624
|
type: Input
|
|
3727
3625
|
}], totalCount: [{
|