@c8y/ngx-components 1021.49.6 → 1021.49.12
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/LICENSE +1 -1
- package/alarms/alarms.component.d.ts +1 -1
- package/alarms/alarms.component.d.ts.map +1 -1
- package/context-dashboard/context-dashboard.component.d.ts +3 -2
- package/context-dashboard/context-dashboard.component.d.ts.map +1 -1
- package/core/select/typeahead.component.d.ts.map +1 -1
- package/esm2022/alarms/alarms.component.mjs +2 -2
- package/esm2022/context-dashboard/context-dashboard.component.mjs +11 -8
- package/esm2022/context-dashboard/device-info-dashboard/device-info-dashboard.component.mjs +3 -3
- package/esm2022/core/search/search-input.component.mjs +3 -3
- package/esm2022/core/select/typeahead.component.mjs +2 -2
- package/fesm2022/c8y-ngx-components-alarms.mjs +1 -1
- package/fesm2022/c8y-ngx-components-alarms.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-context-dashboard.mjs +12 -9
- package/fesm2022/c8y-ngx-components-context-dashboard.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components.mjs +3 -3
- package/fesm2022/c8y-ngx-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -19389,7 +19389,7 @@ class TypeaheadComponent {
|
|
|
19389
19389
|
this.selected = {
|
|
19390
19390
|
id: null
|
|
19391
19391
|
};
|
|
19392
|
-
this.highlightFirstItem =
|
|
19392
|
+
this.highlightFirstItem = true;
|
|
19393
19393
|
this.onSearch = new EventEmitter();
|
|
19394
19394
|
this.onIconClick = new EventEmitter();
|
|
19395
19395
|
this.destroyed$ = new Subject();
|
|
@@ -19998,11 +19998,11 @@ class SearchInputComponent {
|
|
|
19998
19998
|
this.isLoading = term.length > 0;
|
|
19999
19999
|
}
|
|
20000
20000
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SearchInputComponent, deps: [{ token: i1$3.Router }, { token: i1.InventoryService }, { token: InventorySearchService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20001
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SearchInputComponent, selector: "c8y-search-input", inputs: { mode: "mode", enableCustomTemplatePlaceholder: "enableCustomTemplatePlaceholder", customPlaceholder: "customPlaceholder", externalTerm: "externalTerm", customDataQuery: "customDataQuery", container: "container", groupsOnly: "groupsOnly" }, outputs: { filter: "filter", search: "search", reset: "reset", onClick: "onClick" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: TypeaheadComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: ["searchDropdown"], descendants: true }], ngImport: i0, template: "<div\n class=\"dropdown\"\n #searchDropdown=\"bs-dropdown\"\n [insideClick]=\"true\"\n (isOpenChange)=\"onOpenChange($event)\"\n [cdkTrapFocus]=\"searchDropdown.isOpen\"\n *ngIf=\"mode === 'search'\"\n dropdown\n>\n <button\n class=\"main-header-button dropdown-toggle c8y-dropdown\"\n [title]=\"'Search' | translate\"\n type=\"button\"\n dropdownToggle\n data-cy=\"search-input--search-btn\"\n >\n <i\n class=\"icon-2x\"\n c8yIcon=\"search\"\n ></i>\n </button>\n\n <div\n class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n id=\"searchDropdown\"\n *dropdownMenu\n >\n <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n </div>\n</div>\n\n<div\n class=\"search-header-inline\"\n *ngIf=\"mode === 'select'\"\n>\n <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n</div>\n<ng-template #form>\n <form\n [ngClass]=\"{ 'c8y-search-form': mode === 'search' }\"\n novalidate\n #searchForm=\"ngForm\"\n >\n <c8y-typeahead\n (onIconClick)=\"onReset($event)\"\n [icon]=\"term ? 'times' : 'search'\"\n title=\"Search\"\n placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n name=\"selected\"\n [(ngModel)]=\"selected\"\n (keydown)=\"keyDown($event)\"\n [allowFreeEntries]=\"false\"\n [container]=\"container\"\n [highlightFirstItem]=\"true\"\n >\n <div\n class=\"c8y-list__item p-b-8 separator-bottom sticky-top p-t-4\"\n *ngIf=\"enableCustomTemplatePlaceholder && mode === 'search'\"\n >\n <ng-content></ng-content>\n </div>\n\n <!-- filter buttons -->\n <c8y-li\n *ngIf=\"term.length !== 0 && mode === 'search'\"\n [selectable]=\"false\"\n >\n <div class=\"d-flex\">\n <p class=\"m-r-4 text-muted\">\n <em translate>Searching by exact match. Click for other search options:</em>\n </p>\n <div class=\"btn-group btn-group-sm\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Starts with' | translate }}\"\n type=\"button\"\n data-cy=\"search-input--search-starts-with\"\n (click)=\"onFilter(term + '*')\"\n >\n {{ 'Starts with' | translate }}\n </button>\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Contains' | translate }}\"\n type=\"button\"\n data-cy=\"search-input--search-contains\"\n (click)=\"onFilter('*' + term + '*')\"\n >\n {{ 'Contains' | translate }}\n </button>\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Ends with' | translate }}\"\n type=\"button\"\n data-cy=\"search-input--search-ends-with\"\n (click)=\"onFilter('*' + term)\"\n >\n {{ 'Ends with' | translate }}\n </button>\n </div>\n </div>\n </c8y-li>\n\n <!-- Recent search -->\n <c8y-li\n *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n [selectable]=\"false\"\n >\n <div class=\"legend form-block\">\n <span translate>Recent search views</span>\n </div>\n </c8y-li>\n <c8y-li\n class=\"c8y-list__item--link m-l-16 m-r-16\"\n *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n (click)=\"open($event, result, result.name)\"\n >\n <c8y-li-icon>\n <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n <device-status [mo]=\"result\"></device-status>\n </ng-container>\n <ng-template #group>\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"result | getGroupIcon | async\"\n ></i>\n </ng-template>\n </c8y-li-icon>\n {{ result.name || '--' }}\n </c8y-li>\n\n <!-- Recently registered devices -->\n <c8y-li\n *ngIf=\"\n term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\n \"\n [selectable]=\"false\"\n >\n <div class=\"legend form-block\">\n <span translate>Recently registered devices</span>\n </div>\n </c8y-li>\n <c8y-li\n class=\"c8y-list__item--link m-l-16 m-r-16\"\n *c8yFor=\"\n let result of term.length === 0 && !groupsOnly\n ? recentlyRegisteredResults$\n : { data: [] };\n loadMore: 'none'\n \"\n (click)=\"open($event, result, result.name)\"\n >\n <c8y-li-icon>\n <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n <device-status [mo]=\"result\"></device-status>\n </ng-container>\n <ng-template #group>\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"result | getGroupIcon | async\"\n ></i>\n </ng-template>\n </c8y-li-icon>\n {{ result.name || '--' }}\n </c8y-li>\n\n <!-- Search results -->\n <c8y-li\n *ngIf=\"term.length !== 0\"\n [selectable]=\"false\"\n >\n <div class=\"legend form-block m-0\">\n <span translate>Search results</span>\n </div>\n </c8y-li>\n <c8y-li\n class=\"c8y-list__item--link m-l-16 m-r-16\"\n [title]=\"result.name\"\n *c8yFor=\"\n let result of results$;\n loadMore: 'auto';\n notFound: notFoundTemplate;\n loadingTemplate: loading;\n loadNextLabel: 'Find more\u2026'\n \"\n (click)=\"open($event, result, result.name)\"\n data-cy=\"search-input--search-results\"\n >\n <c8y-li-icon>\n <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n <device-status [mo]=\"result\"></device-status>\n </ng-container>\n <ng-template #group>\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"result | getGroupIcon | async\"\n ></i>\n </ng-template>\n </c8y-li-icon>\n {{ result.name || '--' }}\n </c8y-li>\n\n <!-- No search results found entry -->\n <ng-template #notFoundTemplate>\n <c8y-ui-empty-state\n [icon]=\"'search'\"\n [title]=\"'No match found.' | translate\"\n data-cy=\"search-input--empty-state\"\n [ngClass]=\"{ 'p-4': mode === 'search' }\"\n [horizontal]=\"true\"\n *ngIf=\"noMatch\"\n >\n <small\n translate\n *ngIf=\"mode === 'search'\"\n >\n Try to filter or open the asset grid to show all devices and groups.\n </small>\n <small\n translate\n *ngIf=\"mode === 'select'\"\n >\n Try to rephrase your search word.\n </small>\n </c8y-ui-empty-state>\n </ng-template>\n\n <!-- loading bar first entries -->\n <c8y-li *ngIf=\"isLoading\">\n <c8y-loading></c8y-loading>\n </c8y-li>\n\n <!-- loading bar for loading more entries (inventory roles) -->\n <ng-template #loading>\n <c8y-li>\n <c8y-loading></c8y-loading>\n </c8y-li>\n </ng-template>\n\n <!-- more filter possibilities -->\n <c8y-li\n class=\"m-t-24 bg-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom\"\n [selectable]=\"false\"\n *ngIf=\"mode === 'search'\"\n >\n <div class=\"d-flex a-i-center\">\n <i\n class=\"text-info m-r-4\"\n c8yIcon=\"info-circle\"\n ></i>\n <p\n class=\"m-r-8\"\n translate\n >\n Need more filter possibilities?\n </p>\n <button\n class=\"m-l-16 btn btn-default btn-sm\"\n title=\"{{ 'Go to the asset data table' | translate }}\"\n type=\"button\"\n (mousedown)=\"onOpenAssetTable()\"\n data-cy=\"search-input--asset-table-btn\"\n >\n {{ 'Go to the asset data table' | translate }}\n </button>\n </div>\n </c8y-li>\n </c8y-typeahead>\n </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: ShouldShowMoPipe, name: "shouldShowMo" }, { kind: "pipe", type: GetGroupIconPipe, name: "getGroupIcon" }] }); }
|
|
20001
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SearchInputComponent, selector: "c8y-search-input", inputs: { mode: "mode", enableCustomTemplatePlaceholder: "enableCustomTemplatePlaceholder", customPlaceholder: "customPlaceholder", externalTerm: "externalTerm", customDataQuery: "customDataQuery", container: "container", groupsOnly: "groupsOnly" }, outputs: { filter: "filter", search: "search", reset: "reset", onClick: "onClick" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: TypeaheadComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: ["searchDropdown"], descendants: true }], ngImport: i0, template: "<div\n class=\"dropdown\"\n #searchDropdown=\"bs-dropdown\"\n [insideClick]=\"true\"\n (isOpenChange)=\"onOpenChange($event)\"\n [cdkTrapFocus]=\"searchDropdown.isOpen\"\n *ngIf=\"mode === 'search'\"\n dropdown\n>\n <button\n class=\"main-header-button dropdown-toggle c8y-dropdown\"\n [title]=\"'Search' | translate\"\n type=\"button\"\n dropdownToggle\n data-cy=\"search-input--search-btn\"\n >\n <i\n class=\"icon-2x\"\n c8yIcon=\"search\"\n ></i>\n </button>\n\n <div\n class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n id=\"searchDropdown\"\n *dropdownMenu\n >\n <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n </div>\n</div>\n\n<div\n class=\"search-header-inline\"\n *ngIf=\"mode === 'select'\"\n>\n <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n</div>\n<ng-template #form>\n <form\n [ngClass]=\"{ 'c8y-search-form': mode === 'search' }\"\n novalidate\n #searchForm=\"ngForm\"\n >\n <c8y-typeahead\n (onIconClick)=\"onReset($event)\"\n [icon]=\"term ? 'times' : 'search'\"\n title=\"Search\"\n placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n name=\"selected\"\n [(ngModel)]=\"selected\"\n (keydown)=\"keyDown($event)\"\n [allowFreeEntries]=\"false\"\n [container]=\"container\"\n [highlightFirstItem]=\"false\"\n >\n <div\n class=\"c8y-list__item p-b-8 separator-bottom sticky-top p-t-4\"\n *ngIf=\"enableCustomTemplatePlaceholder && mode === 'search'\"\n >\n <ng-content></ng-content>\n </div>\n\n <!-- filter buttons -->\n <c8y-li\n *ngIf=\"term.length !== 0 && mode === 'search'\"\n [selectable]=\"false\"\n >\n <div class=\"d-flex\">\n <p class=\"m-r-4 text-muted\">\n <em translate>Searching by exact match. Click for other search options:</em>\n </p>\n <div class=\"btn-group btn-group-sm\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Starts with' | translate }}\"\n type=\"button\"\n data-cy=\"search-input--search-starts-with\"\n (click)=\"onFilter(term + '*')\"\n >\n {{ 'Starts with' | translate }}\n </button>\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Contains' | translate }}\"\n type=\"button\"\n data-cy=\"search-input--search-contains\"\n (click)=\"onFilter('*' + term + '*')\"\n >\n {{ 'Contains' | translate }}\n </button>\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Ends with' | translate }}\"\n type=\"button\"\n data-cy=\"search-input--search-ends-with\"\n (click)=\"onFilter('*' + term)\"\n >\n {{ 'Ends with' | translate }}\n </button>\n </div>\n </div>\n </c8y-li>\n\n <!-- Recent search -->\n <c8y-li\n *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n [selectable]=\"false\"\n >\n <div class=\"legend form-block\">\n <span translate>Recent search views</span>\n </div>\n </c8y-li>\n <c8y-li\n class=\"c8y-list__item--link m-l-16 m-r-16\"\n *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n (click)=\"open($event, result, result.name)\"\n >\n <c8y-li-icon>\n <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n <device-status [mo]=\"result\"></device-status>\n </ng-container>\n <ng-template #group>\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"result | getGroupIcon | async\"\n ></i>\n </ng-template>\n </c8y-li-icon>\n {{ result.name || '--' }}\n </c8y-li>\n\n <!-- Recently registered devices -->\n <c8y-li\n *ngIf=\"\n term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\n \"\n [selectable]=\"false\"\n >\n <div class=\"legend form-block\">\n <span translate>Recently registered devices</span>\n </div>\n </c8y-li>\n <c8y-li\n class=\"c8y-list__item--link m-l-16 m-r-16\"\n *c8yFor=\"\n let result of term.length === 0 && !groupsOnly\n ? recentlyRegisteredResults$\n : { data: [] };\n loadMore: 'none'\n \"\n (click)=\"open($event, result, result.name)\"\n >\n <c8y-li-icon>\n <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n <device-status [mo]=\"result\"></device-status>\n </ng-container>\n <ng-template #group>\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"result | getGroupIcon | async\"\n ></i>\n </ng-template>\n </c8y-li-icon>\n {{ result.name || '--' }}\n </c8y-li>\n\n <!-- Search results -->\n <c8y-li\n *ngIf=\"term.length !== 0\"\n [selectable]=\"false\"\n >\n <div class=\"legend form-block m-0\">\n <span translate>Search results</span>\n </div>\n </c8y-li>\n <c8y-li\n class=\"c8y-list__item--link m-l-16 m-r-16\"\n [title]=\"result.name\"\n *c8yFor=\"\n let result of results$;\n loadMore: 'auto';\n notFound: notFoundTemplate;\n loadingTemplate: loading;\n loadNextLabel: 'Find more\u2026'\n \"\n (click)=\"open($event, result, result.name)\"\n data-cy=\"search-input--search-results\"\n >\n <c8y-li-icon>\n <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n <device-status [mo]=\"result\"></device-status>\n </ng-container>\n <ng-template #group>\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"result | getGroupIcon | async\"\n ></i>\n </ng-template>\n </c8y-li-icon>\n {{ result.name || '--' }}\n </c8y-li>\n\n <!-- No search results found entry -->\n <ng-template #notFoundTemplate>\n <c8y-ui-empty-state\n [icon]=\"'search'\"\n [title]=\"'No match found.' | translate\"\n data-cy=\"search-input--empty-state\"\n [ngClass]=\"{ 'p-4': mode === 'search' }\"\n [horizontal]=\"true\"\n *ngIf=\"noMatch\"\n >\n <small\n translate\n *ngIf=\"mode === 'search'\"\n >\n Try to filter or open the asset grid to show all devices and groups.\n </small>\n <small\n translate\n *ngIf=\"mode === 'select'\"\n >\n Try to rephrase your search word.\n </small>\n </c8y-ui-empty-state>\n </ng-template>\n\n <!-- loading bar first entries -->\n <c8y-li *ngIf=\"isLoading\">\n <c8y-loading></c8y-loading>\n </c8y-li>\n\n <!-- loading bar for loading more entries (inventory roles) -->\n <ng-template #loading>\n <c8y-li>\n <c8y-loading></c8y-loading>\n </c8y-li>\n </ng-template>\n\n <!-- more filter possibilities -->\n <c8y-li\n class=\"m-t-24 bg-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom\"\n [selectable]=\"false\"\n *ngIf=\"mode === 'search'\"\n >\n <div class=\"d-flex a-i-center\">\n <i\n class=\"text-info m-r-4\"\n c8yIcon=\"info-circle\"\n ></i>\n <p\n class=\"m-r-8\"\n translate\n >\n Need more filter possibilities?\n </p>\n <button\n class=\"m-l-16 btn btn-default btn-sm\"\n title=\"{{ 'Go to the asset data table' | translate }}\"\n type=\"button\"\n (mousedown)=\"onOpenAssetTable()\"\n data-cy=\"search-input--asset-table-btn\"\n >\n {{ 'Go to the asset data table' | translate }}\n </button>\n </div>\n </c8y-li>\n </c8y-typeahead>\n </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: ShouldShowMoPipe, name: "shouldShowMo" }, { kind: "pipe", type: GetGroupIconPipe, name: "getGroupIcon" }] }); }
|
|
20002
20002
|
}
|
|
20003
20003
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SearchInputComponent, decorators: [{
|
|
20004
20004
|
type: Component,
|
|
20005
|
-
args: [{ selector: 'c8y-search-input', template: "<div\n class=\"dropdown\"\n #searchDropdown=\"bs-dropdown\"\n [insideClick]=\"true\"\n (isOpenChange)=\"onOpenChange($event)\"\n [cdkTrapFocus]=\"searchDropdown.isOpen\"\n *ngIf=\"mode === 'search'\"\n dropdown\n>\n <button\n class=\"main-header-button dropdown-toggle c8y-dropdown\"\n [title]=\"'Search' | translate\"\n type=\"button\"\n dropdownToggle\n data-cy=\"search-input--search-btn\"\n >\n <i\n class=\"icon-2x\"\n c8yIcon=\"search\"\n ></i>\n </button>\n\n <div\n class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n id=\"searchDropdown\"\n *dropdownMenu\n >\n <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n </div>\n</div>\n\n<div\n class=\"search-header-inline\"\n *ngIf=\"mode === 'select'\"\n>\n <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n</div>\n<ng-template #form>\n <form\n [ngClass]=\"{ 'c8y-search-form': mode === 'search' }\"\n novalidate\n #searchForm=\"ngForm\"\n >\n <c8y-typeahead\n (onIconClick)=\"onReset($event)\"\n [icon]=\"term ? 'times' : 'search'\"\n title=\"Search\"\n placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n name=\"selected\"\n [(ngModel)]=\"selected\"\n (keydown)=\"keyDown($event)\"\n [allowFreeEntries]=\"false\"\n [container]=\"container\"\n [highlightFirstItem]=\"
|
|
20005
|
+
args: [{ selector: 'c8y-search-input', template: "<div\n class=\"dropdown\"\n #searchDropdown=\"bs-dropdown\"\n [insideClick]=\"true\"\n (isOpenChange)=\"onOpenChange($event)\"\n [cdkTrapFocus]=\"searchDropdown.isOpen\"\n *ngIf=\"mode === 'search'\"\n dropdown\n>\n <button\n class=\"main-header-button dropdown-toggle c8y-dropdown\"\n [title]=\"'Search' | translate\"\n type=\"button\"\n dropdownToggle\n data-cy=\"search-input--search-btn\"\n >\n <i\n class=\"icon-2x\"\n c8yIcon=\"search\"\n ></i>\n </button>\n\n <div\n class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n id=\"searchDropdown\"\n *dropdownMenu\n >\n <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n </div>\n</div>\n\n<div\n class=\"search-header-inline\"\n *ngIf=\"mode === 'select'\"\n>\n <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n</div>\n<ng-template #form>\n <form\n [ngClass]=\"{ 'c8y-search-form': mode === 'search' }\"\n novalidate\n #searchForm=\"ngForm\"\n >\n <c8y-typeahead\n (onIconClick)=\"onReset($event)\"\n [icon]=\"term ? 'times' : 'search'\"\n title=\"Search\"\n placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n name=\"selected\"\n [(ngModel)]=\"selected\"\n (keydown)=\"keyDown($event)\"\n [allowFreeEntries]=\"false\"\n [container]=\"container\"\n [highlightFirstItem]=\"false\"\n >\n <div\n class=\"c8y-list__item p-b-8 separator-bottom sticky-top p-t-4\"\n *ngIf=\"enableCustomTemplatePlaceholder && mode === 'search'\"\n >\n <ng-content></ng-content>\n </div>\n\n <!-- filter buttons -->\n <c8y-li\n *ngIf=\"term.length !== 0 && mode === 'search'\"\n [selectable]=\"false\"\n >\n <div class=\"d-flex\">\n <p class=\"m-r-4 text-muted\">\n <em translate>Searching by exact match. Click for other search options:</em>\n </p>\n <div class=\"btn-group btn-group-sm\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Starts with' | translate }}\"\n type=\"button\"\n data-cy=\"search-input--search-starts-with\"\n (click)=\"onFilter(term + '*')\"\n >\n {{ 'Starts with' | translate }}\n </button>\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Contains' | translate }}\"\n type=\"button\"\n data-cy=\"search-input--search-contains\"\n (click)=\"onFilter('*' + term + '*')\"\n >\n {{ 'Contains' | translate }}\n </button>\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Ends with' | translate }}\"\n type=\"button\"\n data-cy=\"search-input--search-ends-with\"\n (click)=\"onFilter('*' + term)\"\n >\n {{ 'Ends with' | translate }}\n </button>\n </div>\n </div>\n </c8y-li>\n\n <!-- Recent search -->\n <c8y-li\n *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n [selectable]=\"false\"\n >\n <div class=\"legend form-block\">\n <span translate>Recent search views</span>\n </div>\n </c8y-li>\n <c8y-li\n class=\"c8y-list__item--link m-l-16 m-r-16\"\n *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n (click)=\"open($event, result, result.name)\"\n >\n <c8y-li-icon>\n <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n <device-status [mo]=\"result\"></device-status>\n </ng-container>\n <ng-template #group>\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"result | getGroupIcon | async\"\n ></i>\n </ng-template>\n </c8y-li-icon>\n {{ result.name || '--' }}\n </c8y-li>\n\n <!-- Recently registered devices -->\n <c8y-li\n *ngIf=\"\n term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\n \"\n [selectable]=\"false\"\n >\n <div class=\"legend form-block\">\n <span translate>Recently registered devices</span>\n </div>\n </c8y-li>\n <c8y-li\n class=\"c8y-list__item--link m-l-16 m-r-16\"\n *c8yFor=\"\n let result of term.length === 0 && !groupsOnly\n ? recentlyRegisteredResults$\n : { data: [] };\n loadMore: 'none'\n \"\n (click)=\"open($event, result, result.name)\"\n >\n <c8y-li-icon>\n <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n <device-status [mo]=\"result\"></device-status>\n </ng-container>\n <ng-template #group>\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"result | getGroupIcon | async\"\n ></i>\n </ng-template>\n </c8y-li-icon>\n {{ result.name || '--' }}\n </c8y-li>\n\n <!-- Search results -->\n <c8y-li\n *ngIf=\"term.length !== 0\"\n [selectable]=\"false\"\n >\n <div class=\"legend form-block m-0\">\n <span translate>Search results</span>\n </div>\n </c8y-li>\n <c8y-li\n class=\"c8y-list__item--link m-l-16 m-r-16\"\n [title]=\"result.name\"\n *c8yFor=\"\n let result of results$;\n loadMore: 'auto';\n notFound: notFoundTemplate;\n loadingTemplate: loading;\n loadNextLabel: 'Find more\u2026'\n \"\n (click)=\"open($event, result, result.name)\"\n data-cy=\"search-input--search-results\"\n >\n <c8y-li-icon>\n <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n <device-status [mo]=\"result\"></device-status>\n </ng-container>\n <ng-template #group>\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"result | getGroupIcon | async\"\n ></i>\n </ng-template>\n </c8y-li-icon>\n {{ result.name || '--' }}\n </c8y-li>\n\n <!-- No search results found entry -->\n <ng-template #notFoundTemplate>\n <c8y-ui-empty-state\n [icon]=\"'search'\"\n [title]=\"'No match found.' | translate\"\n data-cy=\"search-input--empty-state\"\n [ngClass]=\"{ 'p-4': mode === 'search' }\"\n [horizontal]=\"true\"\n *ngIf=\"noMatch\"\n >\n <small\n translate\n *ngIf=\"mode === 'search'\"\n >\n Try to filter or open the asset grid to show all devices and groups.\n </small>\n <small\n translate\n *ngIf=\"mode === 'select'\"\n >\n Try to rephrase your search word.\n </small>\n </c8y-ui-empty-state>\n </ng-template>\n\n <!-- loading bar first entries -->\n <c8y-li *ngIf=\"isLoading\">\n <c8y-loading></c8y-loading>\n </c8y-li>\n\n <!-- loading bar for loading more entries (inventory roles) -->\n <ng-template #loading>\n <c8y-li>\n <c8y-loading></c8y-loading>\n </c8y-li>\n </ng-template>\n\n <!-- more filter possibilities -->\n <c8y-li\n class=\"m-t-24 bg-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom\"\n [selectable]=\"false\"\n *ngIf=\"mode === 'search'\"\n >\n <div class=\"d-flex a-i-center\">\n <i\n class=\"text-info m-r-4\"\n c8yIcon=\"info-circle\"\n ></i>\n <p\n class=\"m-r-8\"\n translate\n >\n Need more filter possibilities?\n </p>\n <button\n class=\"m-l-16 btn btn-default btn-sm\"\n title=\"{{ 'Go to the asset data table' | translate }}\"\n type=\"button\"\n (mousedown)=\"onOpenAssetTable()\"\n data-cy=\"search-input--asset-table-btn\"\n >\n {{ 'Go to the asset data table' | translate }}\n </button>\n </div>\n </c8y-li>\n </c8y-typeahead>\n </form>\n</ng-template>\n" }]
|
|
20006
20006
|
}], ctorParameters: () => [{ type: i1$3.Router }, { type: i1.InventoryService }, { type: InventorySearchService }, { type: i0.ChangeDetectorRef }], propDecorators: { mode: [{
|
|
20007
20007
|
type: Input
|
|
20008
20008
|
}], enableCustomTemplatePlaceholder: [{
|