@c8y/ngx-components 1021.22.44 → 1021.22.49
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/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/locales/de.po +0 -282
- package/locales/es.po +0 -282
- package/locales/fr.po +0 -282
- package/locales/ja_JP.po +5 -283
- package/locales/ko.po +6 -284
- package/locales/locales.pot +0 -282
- package/locales/nl.po +0 -282
- package/locales/pl.po +1 -283
- package/locales/pt_BR.po +0 -282
- package/locales/zh_CN.po +5 -283
- package/locales/zh_TW.po +5 -283
- package/package.json +1 -1
|
@@ -19311,7 +19311,7 @@ class TypeaheadComponent {
|
|
|
19311
19311
|
this.selected = {
|
|
19312
19312
|
id: null
|
|
19313
19313
|
};
|
|
19314
|
-
this.highlightFirstItem =
|
|
19314
|
+
this.highlightFirstItem = true;
|
|
19315
19315
|
this.onSearch = new EventEmitter();
|
|
19316
19316
|
this.onIconClick = new EventEmitter();
|
|
19317
19317
|
this.destroyed$ = new Subject();
|
|
@@ -19920,11 +19920,11 @@ class SearchInputComponent {
|
|
|
19920
19920
|
this.isLoading = term.length > 0;
|
|
19921
19921
|
}
|
|
19922
19922
|
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 }); }
|
|
19923
|
-
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: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.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" }] }); }
|
|
19923
|
+
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: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.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" }] }); }
|
|
19924
19924
|
}
|
|
19925
19925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SearchInputComponent, decorators: [{
|
|
19926
19926
|
type: Component,
|
|
19927
|
-
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]=\"
|
|
19927
|
+
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" }]
|
|
19928
19928
|
}], ctorParameters: () => [{ type: i1$3.Router }, { type: i1.InventoryService }, { type: InventorySearchService }, { type: i0.ChangeDetectorRef }], propDecorators: { mode: [{
|
|
19929
19929
|
type: Input
|
|
19930
19930
|
}], enableCustomTemplatePlaceholder: [{
|