@wavemaker/app-ng-runtime 11.7.5-next.NULL → 11.7.5-rc.166

app-ng-runtime/components/basic/search/fesm2022/index.mjs

@@ -456,7 +456,7 @@ function SearchComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
     const _r0 = i0.ɵɵreference(1);
     const _r2 = i0.ɵɵreference(3);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("title", ctx_r6.query || "")("placeholder", ctx_r6.placeholder || "")("container", ctx_r6.containerTarget || "body")("disabled", ctx_r6.disabled)("ngModel", ctx_r6.query)("readonly", ctx_r6.readonly)("typeahead", ctx_r6.typeaheadDataSource)("typeaheadWaitMs", ctx_r6.debouncetime)("typeaheadItemTemplate", _r0)("optionsListTemplate", _r2)("typeaheadMinLength", ctx_r6.minchars)("typeaheadOptionsLimit", ctx_r6.limit)("typeaheadGroupField", ctx_r6.groupby ? "groupby" : null)("typeaheadAsync", true)("typeaheadScrollable", true)("adaptivePosition", true)("typeaheadOptionsInScrollableView", ctx_r6.optionslimitinscrollableview)("tabindex", ctx_r6.tabindex)("dropup", ctx_r6.dropup);
+    i0.ɵɵproperty("title", ctx_r6.query || "")("placeholder", ctx_r6.placeholder || "")("container", ctx_r6.containerTarget || ".wm-app")("disabled", ctx_r6.disabled)("ngModel", ctx_r6.query)("readonly", ctx_r6.readonly)("typeahead", ctx_r6.typeaheadDataSource)("typeaheadWaitMs", ctx_r6.debouncetime)("typeaheadItemTemplate", _r0)("optionsListTemplate", _r2)("typeaheadMinLength", ctx_r6.minchars)("typeaheadOptionsLimit", ctx_r6.limit)("typeaheadGroupField", ctx_r6.groupby ? "groupby" : null)("typeaheadAsync", true)("typeaheadScrollable", true)("adaptivePosition", true)("typeaheadOptionsInScrollableView", ctx_r6.optionslimitinscrollableview)("tabindex", ctx_r6.tabindex)("dropup", ctx_r6.dropup);
     i0.ɵɵattribute("name", ctx_r6.name)("aria-label", ctx_r6.hint || "Search field");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r6._loadingItems);
@@ -1171,7 +1171,7 @@ class SearchComponent extends DatasetAwareFormComponent {
                     provideAs(SearchComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(SearchComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(SearchComponent)
-                ], template: "<ng-template #customItemTemplate let-model=\"item\" let-index=\"index\" let-query=\"query\" let-match=\"match\">\n    <!-- Default item template -->\n    <a *ngIf=\"!content\">\n        <img *ngIf=\"model.imgSrc\" [src]=\"model.imgSrc\" alt=\"Search\" [style.width]=\"imagewidth\">\n        <span [title]=\"model.label\" [innerHtml]=\"highlight(match, query) || model.label\"></span>\n    </a>\n    <!-- Custom partial template -->\n    <a *ngIf=\"content\" [ngClass]=\"{customTemplate: content}\" partialContainer [wmItemTemplate]=\"content\" [userComponentParams]=\"match.item\">\n        <div partial-container-target></div>\n    </a>\n</ng-template>\n\n<ng-template #customListTemplate let-matches=\"matches\" let-itemTemplate=\"itemTemplate\" let-query=\"query\">\n    <ul #ulElement class=\"app-search dropdown-menu\" scrollable>\n        <li #liElements *ngFor=\"let match of matches\" [ngClass]=\"{active: typeaheadContainer && typeaheadContainer.isActive(match), 'list-group-header': match && match.isHeader()}\"\n            (mouseenter)=\"typeaheadContainer.selectActive(match);\"\n            (click)=\"match && !match.isHeader() && typeaheadContainer.selectMatch(match, $event); $typeaheadEvent = $event; notifySubscriber();\">\n            <!-- itemTemplate comes from the <input> -->\n            <h4 *ngIf=\"match.isHeader()\" class=\"group-title\">{{match.value}}</h4>\n            <ng-container *ngIf=\"!match.isHeader()\" [ngTemplateOutlet]=\"itemTemplate\"\n                          [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n            </ng-container>\n        </li>\n        <div class=\"status\" [hidden]=\"_loadingItems || !(datacompletemsg && dataProvider.isLastPage)\">\n            <span [textContent]=\"datacompletemsg\"></span>\n        </div>\n        <div class=\"status\" [hidden]=\"!_loadingItems\">\n            <i class=\"fa fa-circle-o-notch fa-spin\"></i>\n            <span [textContent]=\"loadingdatamsg\"></span>\n        </div>\n    </ul>\n</ng-template>\n\n<!--This template is for search inside mobile navbar.-->\n<ng-container *ngIf=\"navsearchbar; else searchTemplate\">\n    <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n           focus-target\n           container=\"body\"\n           [disabled]=\"disabled\"\n           autocomplete=\"off\"\n           [(ngModel)]=\"query\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [typeahead]=\"typeaheadDataSource\"\n           [typeaheadWaitMs]=\"debouncetime\"\n           [typeaheadItemTemplate]=\"customItemTemplate\"\n           [optionsListTemplate]=\"customListTemplate\"\n           (input)=\"onInputChange($event)\"\n           (keydown)=\"listenQuery = true\"\n           (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n           (keydown.arrowdown)=\"selectNext($event)\"\n           (blur)=\"invokeOnTouched($event)\"\n           (click)=\"handleFocus($event);\"\n           (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event);\"\n           (focusout)=\"onFocusOut()\"\n           [typeaheadMinLength]=\"minchars\"\n           [typeaheadOptionsLimit]=\"limit\"\n           (typeaheadLoading)=\"_loadingItems\"\n           (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n           typeaheadOptionField=\"label\"\n           [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n           [typeaheadAsync]=\"true\"\n           [typeaheadScrollable]=\"true\"\n           [adaptivePosition]=\"true\"\n           [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n           [dropup]=\"dropup\"\n           [tabindex]=\"tabindex\"\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint || 'Search field'\"/>\n    <i class=\"btn-close wi wi-cancel\" [hidden]=\"!showClosebtn\" (click)=\"clearSearch($event);\"></i>\n</ng-container>\n<!--This template is for both web and fullscreen mode in mobile.-->\n<ng-template #searchTemplate>\n    <span class=\"wi wi-arrow-left form-control-feedback back-btn\" aria-hidden=\"true\" (click)=\"closeSearch()\"></span>\n    <span class=\"sr-only\">Back button</span>\n    <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n           focus-target\n           [container]=\"containerTarget || 'body'\"\n           [disabled]=\"disabled\"\n           autocomplete=\"off\"\n           [(ngModel)]=\"query\"\n           [readonly]=\"readonly\"\n           [typeahead]=\"typeaheadDataSource\"\n           [typeaheadWaitMs]=\"debouncetime\"\n           [typeaheadItemTemplate]=\"customItemTemplate\"\n           [optionsListTemplate]=\"customListTemplate\"\n           (input)=\"onInputChange($event)\"\n           (keydown)=\"listenQuery = true\"\n           (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n           (keydown.arrowdown)=\"selectNext($event)\"\n           (blur)=\"invokeOnTouched($event); onFocusOut()\"\n           (click)=\"handleFocus($event);\"\n           (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event)\"\n           [typeaheadMinLength]=\"minchars\"\n           [typeaheadOptionsLimit]=\"limit\"\n           (typeaheadLoading)=\"_loadingItems\"\n           (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n           typeaheadOptionField=\"label\"\n           [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n           [typeaheadAsync]=\"true\"\n           [typeaheadScrollable]=\"true\"\n           [adaptivePosition]=\"true\"\n           [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n           [tabindex]=\"tabindex\"\n           [dropup]=\"dropup\"\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint || 'Search field'\">\n    <input class=\"model-holder\" ng-model=\"proxyModel\" ng-required=\"required\" tabindex=\"-1\" aria-hidden=\"true\">\n    <span *ngIf=\"_loadingItems\" aria-hidden=\"true\" class=\"fa fa-circle-o-notch fa-spin form-control-feedback\"></span>\n    <span class=\"wi wi-close form-control-feedback clear-btn\" [ngClass]=\"{'show-btn': isQueryEntered()}\" (click)=\"clearSearch($event, true)\"></span>\n    <span class=\"sr-only\">Clear button</span>\n    <span *ngIf=\"showsearchicon\" class=\"input-group-addon\" aria-label=\"search icon\" [ngClass]=\"{'disabled': disabled}\">\n        <form>\n            <button title=\"Search\" [disabled]=\"disabled\" class=\"app-search-button wm-sl-l sl-search\" type=\"submit\"\n                    (click)=\"onSearchSelect($event)\"></button>\n        </form>\n    </span>\n</ng-template>\n" }]
+                ], template: "<ng-template #customItemTemplate let-model=\"item\" let-index=\"index\" let-query=\"query\" let-match=\"match\">\n    <!-- Default item template -->\n    <a *ngIf=\"!content\">\n        <img *ngIf=\"model.imgSrc\" [src]=\"model.imgSrc\" alt=\"Search\" [style.width]=\"imagewidth\">\n        <span [title]=\"model.label\" [innerHtml]=\"highlight(match, query) || model.label\"></span>\n    </a>\n    <!-- Custom partial template -->\n    <a *ngIf=\"content\" [ngClass]=\"{customTemplate: content}\" partialContainer [wmItemTemplate]=\"content\" [userComponentParams]=\"match.item\">\n        <div partial-container-target></div>\n    </a>\n</ng-template>\n\n<ng-template #customListTemplate let-matches=\"matches\" let-itemTemplate=\"itemTemplate\" let-query=\"query\">\n    <ul #ulElement class=\"app-search dropdown-menu\" scrollable>\n        <li #liElements *ngFor=\"let match of matches\" [ngClass]=\"{active: typeaheadContainer && typeaheadContainer.isActive(match), 'list-group-header': match && match.isHeader()}\"\n            (mouseenter)=\"typeaheadContainer.selectActive(match);\"\n            (click)=\"match && !match.isHeader() && typeaheadContainer.selectMatch(match, $event); $typeaheadEvent = $event; notifySubscriber();\">\n            <!-- itemTemplate comes from the <input> -->\n            <h4 *ngIf=\"match.isHeader()\" class=\"group-title\">{{match.value}}</h4>\n            <ng-container *ngIf=\"!match.isHeader()\" [ngTemplateOutlet]=\"itemTemplate\"\n                          [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n            </ng-container>\n        </li>\n        <div class=\"status\" [hidden]=\"_loadingItems || !(datacompletemsg && dataProvider.isLastPage)\">\n            <span [textContent]=\"datacompletemsg\"></span>\n        </div>\n        <div class=\"status\" [hidden]=\"!_loadingItems\">\n            <i class=\"fa fa-circle-o-notch fa-spin\"></i>\n            <span [textContent]=\"loadingdatamsg\"></span>\n        </div>\n    </ul>\n</ng-template>\n\n<!--This template is for search inside mobile navbar.-->\n<ng-container *ngIf=\"navsearchbar; else searchTemplate\">\n    <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n           focus-target\n           container=\"body\"\n           [disabled]=\"disabled\"\n           autocomplete=\"off\"\n           [(ngModel)]=\"query\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [typeahead]=\"typeaheadDataSource\"\n           [typeaheadWaitMs]=\"debouncetime\"\n           [typeaheadItemTemplate]=\"customItemTemplate\"\n           [optionsListTemplate]=\"customListTemplate\"\n           (input)=\"onInputChange($event)\"\n           (keydown)=\"listenQuery = true\"\n           (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n           (keydown.arrowdown)=\"selectNext($event)\"\n           (blur)=\"invokeOnTouched($event)\"\n           (click)=\"handleFocus($event);\"\n           (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event);\"\n           (focusout)=\"onFocusOut()\"\n           [typeaheadMinLength]=\"minchars\"\n           [typeaheadOptionsLimit]=\"limit\"\n           (typeaheadLoading)=\"_loadingItems\"\n           (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n           typeaheadOptionField=\"label\"\n           [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n           [typeaheadAsync]=\"true\"\n           [typeaheadScrollable]=\"true\"\n           [adaptivePosition]=\"true\"\n           [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n           [dropup]=\"dropup\"\n           [tabindex]=\"tabindex\"\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint || 'Search field'\"/>\n    <i class=\"btn-close wi wi-cancel\" [hidden]=\"!showClosebtn\" (click)=\"clearSearch($event);\"></i>\n</ng-container>\n<!--This template is for both web and fullscreen mode in mobile.-->\n<ng-template #searchTemplate>\n    <span class=\"wi wi-arrow-left form-control-feedback back-btn\" aria-hidden=\"true\" (click)=\"closeSearch()\"></span>\n    <span class=\"sr-only\">Back button</span>\n    <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n           focus-target\n           [container]=\"containerTarget || '.wm-app'\"\n           [disabled]=\"disabled\"\n           autocomplete=\"off\"\n           [(ngModel)]=\"query\"\n           [readonly]=\"readonly\"\n           [typeahead]=\"typeaheadDataSource\"\n           [typeaheadWaitMs]=\"debouncetime\"\n           [typeaheadItemTemplate]=\"customItemTemplate\"\n           [optionsListTemplate]=\"customListTemplate\"\n           (input)=\"onInputChange($event)\"\n           (keydown)=\"listenQuery = true\"\n           (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n           (keydown.arrowdown)=\"selectNext($event)\"\n           (blur)=\"invokeOnTouched($event); onFocusOut()\"\n           (click)=\"handleFocus($event);\"\n           (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event)\"\n           [typeaheadMinLength]=\"minchars\"\n           [typeaheadOptionsLimit]=\"limit\"\n           (typeaheadLoading)=\"_loadingItems\"\n           (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n           typeaheadOptionField=\"label\"\n           [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n           [typeaheadAsync]=\"true\"\n           [typeaheadScrollable]=\"true\"\n           [adaptivePosition]=\"true\"\n           [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n           [tabindex]=\"tabindex\"\n           [dropup]=\"dropup\"\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint || 'Search field'\">\n    <input class=\"model-holder\" ng-model=\"proxyModel\" ng-required=\"required\" tabindex=\"-1\" aria-hidden=\"true\">\n    <span *ngIf=\"_loadingItems\" aria-hidden=\"true\" class=\"fa fa-circle-o-notch fa-spin form-control-feedback\"></span>\n    <span class=\"wi wi-close form-control-feedback clear-btn\" [ngClass]=\"{'show-btn': isQueryEntered()}\" (click)=\"clearSearch($event, true)\"></span>\n    <span class=\"sr-only\">Clear button</span>\n    <span *ngIf=\"showsearchicon\" class=\"input-group-addon\" aria-label=\"search icon\" [ngClass]=\"{'disabled': disabled}\">\n        <form>\n            <button title=\"Search\" [disabled]=\"disabled\" class=\"app-search-button wm-sl-l sl-search\" type=\"submit\"\n                    (click)=\"onSearchSelect($event)\"></button>\n        </form>\n    </span>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.Injector }, { type: i1.App }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['datavalue.bind']