nexheal-lib 0.0.77 → 0.0.78
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
CHANGED
|
@@ -3699,7 +3699,7 @@ class PaginatedAutocompleteControl {
|
|
|
3699
3699
|
useExisting: PaginatedAutocompleteControl,
|
|
3700
3700
|
multi: true,
|
|
3701
3701
|
},
|
|
3702
|
-
], 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 [class.no-label]=\"!title\" [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($event)\" (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 && !controlDisabled) {\r\n <label class=\"rs-search\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onSearchIconClick($event)\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n } @else if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></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 <div class=\"list-body\" (scroll)=\"onListBodyScroll($event)\">\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 }\" [class.with-favourite]=\"showFavouriteIcon\"\r\n (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n @if (showFavouriteIcon) {\r\n @let isFavourite = !!suggestion.isFavourite;\r\n <button type=\"button\" class=\"option-favourite\" [attr.aria-pressed]=\"isFavourite\"\r\n [attr.aria-label]=\"'Favourite ' + suggestion[optionDisplayProperty]\"\r\n [title]=\"isFavourite ? 'Remove favourite' : 'Add favourite'\"\r\n [disabled]=\"readonly || controlDisabled\"\r\n (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\r\n (click)=\"onFavouriteClick($event, suggestion)\" (blur)=\"onBlur($event)\"\r\n (keydown.escape)=\"$event.stopPropagation(); inputElement.focus(); isDropdownOpen = false\">\r\n <i class=\"he\" [class.he-star-o]=\"isFavourite\" [class.he-star]=\"!isFavourite\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n {{ suggestion[optionDisplayProperty] }}\r\n </div>\r\n }\r\n </div>\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.with-search-icon .form-control{padding-right:4rem}.form-group.auto-complete.with-search-icon .rs-search{top:34px;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.auto-complete.with-search-icon .rs-search i{font-size:16px;color:#807a7a}.form-group.auto-complete.with-search-icon .rs-search:hover{background:#ff7f5d1a}.form-group.auto-complete.with-search-icon .rs-search:hover i{color:#ff7f5d}.form-group.auto-complete.with-search-icon .clear{right:2.5rem}.form-group.auto-complete.with-search-icon.no-label .rs-search{top:7px}.form-group.auto-complete.with-search-icon.no-label .clear{top:10px}.form-group.auto-complete.with-search-icon.group-sm .rs-search{top:29px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search i{font-size:14px}.form-group.auto-complete.with-search-icon.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.auto-complete:not(.with-search-icon) .clear{right:7px}.form-group.auto-complete .option-list{max-height:234px;overflow-y:unset}.form-group.auto-complete .option-list .list-item.with-favourite{display:flex;align-items:center;gap:8px}.form-group.auto-complete .option-list .option-favourite{flex:0 0 24px;align-self:center;padding:0;border:0;background:transparent;color:#c43f00}.form-group.auto-complete .option-list .option-favourite .he{top:auto;color:inherit}.form-group.auto-complete .option-list.fixed-height{height:234px;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-body{overflow-y:auto;height:calc(100% - 38px);max-height:calc(100% - 38px)}.form-group.auto-complete .option-list .list-footer{bottom:0;position:sticky;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{padding:0;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{top:.5px;font-size:9px;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{opacity:.65;cursor:not-allowed}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled .he{color:#ccc;cursor:inherit}.form-group.auto-complete .option-list .list-footer.pager-footer{gap:1rem;height:38px;display:flex;justify-content:space-between;align-items:center;padding:0 10px}\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"] }] });
|
|
3702
|
+
], 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 [class.no-label]=\"!title\" [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($event)\" (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 && !controlDisabled) {\r\n <label class=\"rs-search\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onSearchIconClick($event)\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n } @else if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></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 <div class=\"list-body\" (scroll)=\"onListBodyScroll($event)\">\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 }\" [class.with-favourite]=\"showFavouriteIcon\"\r\n (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n {{ suggestion[optionDisplayProperty] }}\r\n @if (showFavouriteIcon) {\r\n @let isFavourite = !!suggestion.isFavourite;\r\n <button type=\"button\" class=\"option-favourite\" [attr.aria-pressed]=\"isFavourite\"\r\n [attr.aria-label]=\"'Favourite ' + suggestion[optionDisplayProperty]\"\r\n [title]=\"isFavourite ? 'Remove favourite' : 'Add favourite'\"\r\n [disabled]=\"readonly || controlDisabled\"\r\n (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\r\n (click)=\"onFavouriteClick($event, suggestion)\" (blur)=\"onBlur($event)\"\r\n (keydown.escape)=\"$event.stopPropagation(); inputElement.focus(); isDropdownOpen = false\">\r\n <i class=\"he\" [class.he-star-o]=\"isFavourite\" [class.he-star]=\"!isFavourite\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\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.with-search-icon .form-control{padding-right:4rem}.form-group.auto-complete.with-search-icon .rs-search{top:34px;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.auto-complete.with-search-icon .rs-search i{font-size:16px;color:#807a7a}.form-group.auto-complete.with-search-icon .rs-search:hover{background:#ff7f5d1a}.form-group.auto-complete.with-search-icon .rs-search:hover i{color:#ff7f5d}.form-group.auto-complete.with-search-icon .clear{right:2.5rem}.form-group.auto-complete.with-search-icon.no-label .rs-search{top:7px}.form-group.auto-complete.with-search-icon.no-label .clear{top:10px}.form-group.auto-complete.with-search-icon.group-sm .rs-search{top:29px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search i{font-size:14px}.form-group.auto-complete.with-search-icon.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.auto-complete:not(.with-search-icon) .clear{right:7px}.form-group.auto-complete .option-list{max-height:234px;overflow-y:unset}.form-group.auto-complete .option-list .list-item.with-favourite{display:flex;align-items:center;gap:8px}.form-group.auto-complete .option-list .option-favourite{flex:0 0 24px;align-self:center;margin-inline-start:auto;padding:0;border:0;background:transparent}.form-group.auto-complete .option-list .option-favourite .he{top:2px;font-size:16px;color:#ff4800}.form-group.auto-complete .option-list.fixed-height{height:234px;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-body{overflow-y:auto;height:calc(100% - 38px);max-height:calc(100% - 38px)}.form-group.auto-complete .option-list .list-footer{bottom:0;position:sticky;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{padding:0;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{top:.5px;font-size:9px;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{opacity:.65;cursor:not-allowed}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled .he{color:#ccc;cursor:inherit}.form-group.auto-complete .option-list .list-footer.pager-footer{gap:1rem;height:38px;display:flex;justify-content:space-between;align-items:center;padding:0 10px}\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"] }] });
|
|
3703
3703
|
}
|
|
3704
3704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PaginatedAutocompleteControl, decorators: [{
|
|
3705
3705
|
type: Component,
|
|
@@ -3709,7 +3709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
|
|
|
3709
3709
|
useExisting: PaginatedAutocompleteControl,
|
|
3710
3710
|
multi: true,
|
|
3711
3711
|
},
|
|
3712
|
-
], template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n [class.no-label]=\"!title\" [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($event)\" (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 && !controlDisabled) {\r\n <label class=\"rs-search\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onSearchIconClick($event)\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n } @else if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></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 <div class=\"list-body\" (scroll)=\"onListBodyScroll($event)\">\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 }\" [class.with-favourite]=\"showFavouriteIcon\"\r\n (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n @if (showFavouriteIcon) {\r\n @let isFavourite = !!suggestion.isFavourite;\r\n <button type=\"button\" class=\"option-favourite\" [attr.aria-pressed]=\"isFavourite\"\r\n [attr.aria-label]=\"'Favourite ' + suggestion[optionDisplayProperty]\"\r\n [title]=\"isFavourite ? 'Remove favourite' : 'Add favourite'\"\r\n [disabled]=\"readonly || controlDisabled\"\r\n (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\r\n (click)=\"onFavouriteClick($event, suggestion)\" (blur)=\"onBlur($event)\"\r\n (keydown.escape)=\"$event.stopPropagation(); inputElement.focus(); isDropdownOpen = false\">\r\n <i class=\"he\" [class.he-star-o]=\"isFavourite\" [class.he-star]=\"!isFavourite\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n
|
|
3712
|
+
], template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\"\r\n [class.no-label]=\"!title\" [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($event)\" (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 && !controlDisabled) {\r\n <label class=\"rs-search\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onSearchIconClick($event)\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n } @else if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></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 <div class=\"list-body\" (scroll)=\"onListBodyScroll($event)\">\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 }\" [class.with-favourite]=\"showFavouriteIcon\"\r\n (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n {{ suggestion[optionDisplayProperty] }}\r\n @if (showFavouriteIcon) {\r\n @let isFavourite = !!suggestion.isFavourite;\r\n <button type=\"button\" class=\"option-favourite\" [attr.aria-pressed]=\"isFavourite\"\r\n [attr.aria-label]=\"'Favourite ' + suggestion[optionDisplayProperty]\"\r\n [title]=\"isFavourite ? 'Remove favourite' : 'Add favourite'\"\r\n [disabled]=\"readonly || controlDisabled\"\r\n (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\r\n (click)=\"onFavouriteClick($event, suggestion)\" (blur)=\"onBlur($event)\"\r\n (keydown.escape)=\"$event.stopPropagation(); inputElement.focus(); isDropdownOpen = false\">\r\n <i class=\"he\" [class.he-star-o]=\"isFavourite\" [class.he-star]=\"!isFavourite\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\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.with-search-icon .form-control{padding-right:4rem}.form-group.auto-complete.with-search-icon .rs-search{top:34px;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.auto-complete.with-search-icon .rs-search i{font-size:16px;color:#807a7a}.form-group.auto-complete.with-search-icon .rs-search:hover{background:#ff7f5d1a}.form-group.auto-complete.with-search-icon .rs-search:hover i{color:#ff7f5d}.form-group.auto-complete.with-search-icon .clear{right:2.5rem}.form-group.auto-complete.with-search-icon.no-label .rs-search{top:7px}.form-group.auto-complete.with-search-icon.no-label .clear{top:10px}.form-group.auto-complete.with-search-icon.group-sm .rs-search{top:29px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.auto-complete.with-search-icon.group-sm.no-label .rs-search i{font-size:14px}.form-group.auto-complete.with-search-icon.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.auto-complete:not(.with-search-icon) .clear{right:7px}.form-group.auto-complete .option-list{max-height:234px;overflow-y:unset}.form-group.auto-complete .option-list .list-item.with-favourite{display:flex;align-items:center;gap:8px}.form-group.auto-complete .option-list .option-favourite{flex:0 0 24px;align-self:center;margin-inline-start:auto;padding:0;border:0;background:transparent}.form-group.auto-complete .option-list .option-favourite .he{top:2px;font-size:16px;color:#ff4800}.form-group.auto-complete .option-list.fixed-height{height:234px;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-body{overflow-y:auto;height:calc(100% - 38px);max-height:calc(100% - 38px)}.form-group.auto-complete .option-list .list-footer{bottom:0;position:sticky;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{padding:0;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{top:.5px;font-size:9px;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{opacity:.65;cursor:not-allowed}.form-group.auto-complete .option-list .list-footer .pager-btn.disabled .he{color:#ccc;cursor:inherit}.form-group.auto-complete .option-list .list-footer.pager-footer{gap:1rem;height:38px;display:flex;justify-content:space-between;align-items:center;padding:0 10px}\n"] }]
|
|
3713
3713
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
3714
3714
|
type: Input
|
|
3715
3715
|
}], required: [{
|