@c8y/ngx-components/core/common/forOf.directive.d.ts

Angular modules for Cumulocity IoT applications

import { ChangeDetectorRef, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
import { IIdentified, IResultList } from '@c8y/client';
import { Observable } from 'rxjs';
import * as i0 from "@angular/core";
/**
 * A directive to iterate over `IResultList<T>` data from `@c8y/client`.
 * Depending on the `[c8yForLoadMore]` a load more button is:
 *  - **auto**: Tries to automatically load more data (default maximum 10 iterations; can be
 *          change with maxIterations settings).
 *  - **show**: Shows a load more button for the user to decide
 *  - **none**: Doesn't perform any load more action.
 *  - **hidden**: Loads more data automatically but with no visible button for the user.
 *
 * Additional, any rxjs operator pipe can be applied to the `[c8yForPipe]` input, e.g. to
 * filter the data displayed currently as well as the data loaded by subsequent requests.
 *
 * ```html
 * <div *c8yFor="let device of devices; loadMore: 'auto'; let i = index; pipe: filterPipe;">
 *  {{ i + 1 }}. {{device.name}}
 * </div>
 * ```
 * The above example will list all entities that are applied to `devices`:
 * ```typescript
 * this.devices = this.inventoryService.list({ pageSize: 10, fragmentType: 'c8y_IsDevice' })
 * ```
 * It will display the first `10` items, if there is more space left on the screen, and there are more
 * than `10` devices, it will automatically load up to 10 pages more. If it still can't fit the screen
 * it will stop and switch to `show` mode.
 *
 * A pipe can be applied e.g. for filtering or grouping. This pipe is attached to every follow up
 * request done by the load more component:
 * ```typescript
 * this.filterPipe = pipe(
 *    map((data: []) => {
 *     return data.filter(
 *      (mo: any) => mo.name && mo.name.toLowerCase().indexOf(value.toLowerCase()) > -1
 *    );
 *  })
 * );
 * ```
 * The pipe must be an rxjs pipe and can take any operator.
 *
 * Example with realtime support and items count output (e.g. for handling empty state and header):
 *
 * ```html
 * <c8y-list-group>
 *   <div class="c8y-empty-state" *ngIf="count === 0">
 *     (...)
 *   </div>
 *
 *   <div class="page-sticky-header hidden-xs c8y-list__item c8y-list--timeline" *ngIf="count > 0">
 *     (...)
 *   </div>
 *
 *   <ng-template
 *     c8yFor
 *     let-operation
 *     [c8yForOf]="items$"
 *     [c8yForPipe]="filterPipe"
 *     [c8yForRealtime]="realtime"
 *     [c8yForRealtimeOptions]="realtimeOptions"
 *     (c8yForCount)="count = $event"
 *   >
 *     <c8y-li-timeline>
 *       (...)
 *     </c8y-li-timeline>
 *   </ng-template>
 * </c8y-list-group>
 * ```
 *
 * ```typescript
 * @Component({
 *   (...)
 * })
 * export class ExampleComponent {
 *   @Input() deviceId: IIdentified;
 *   items$ = this.operationService.list({
 *     deviceId: this.deviceId,
 *     fragmentType: 'c8y_MyOperation',
 *     dateFrom: new Date(0).toISOString(),
 *     dateTo: new Date(Date.now()).toISOString(),
 *     revert: true,
 *     withTotalPages: true
 *   });
 *   filterPipe = pipe(map((ops: IOperation[]) => ops.filter(op => op.c8y_MyOperation)));
 *   realtimeOptions: ForOfRealtimeOptions = {
 *     entityOrId: this.deviceId,
 *     removeOnUpdate: true,
 *     insertOnUpdate: true
 *   } as ForOfRealtimeOptions;
 *   count: number;
 *
 *   constructor(
 *     private operationService: OperationService,
 *     public realtime: OperationRealtimeService
 *   ) {}
 * }
 * ```
 */
export declare class ForOfDirective {
    private tpl;
    private vcr;
    private cdRef;
    private cachedData;
    private paging;
    private loadMoreMode;
    private dataPipe;
    private itemDataPipe;
    private pagingSub;
    private obs$;
    private loadMore;
    private loadingTemplate;
    private maxIterations;
    private notFoundTemplate;
    private loadNextLabel;
    private loadingLabel;
    private realtime;
    private realtimeOptions;
    private comparator;
    private unsubscribe$;
    private virtualScrollInstance;
    private get shouldUseLoadMoreButton();
    private get hasMoreData();
    private get length();
    /**
     * The data setter. Must be a response from @c8y/data or an observable.
     * You can pass an observable with null to explicitly clear the list.
     */
    set c8yForOf(fetchData: IResultList<IIdentified> | Observable<IResultList<IIdentified>>);
    /**
     * The mode setter:
     *  - **auto**: Tries to automatically load more data (default maximum 10 iterations; can be
     *          change with maxIterations settings).
     *  - **show**: Shows a load more button for the user to decide
     *  - **none**: Doesn't perform any load more action.
     *  - **hidden**: Loads more data automatically but with no visible button for the user.
     */
    set c8yForLoadMore(type: ForOfDirective['loadMoreMode']);
    /**
     * The pipe setter to attach any rxjs pipe to the current and more loaded data.
     */
    set c8yForPipe(dataPipe: ForOfDirective['dataPipe']);
    /**
     * A template to use if no data is found at all (e.g. if you apply a filter pipe).
     */
    set c8yForNotFound(notFoundTemplate: ForOfDirective['notFoundTemplate']);
    /**
     * The maximum numbers of iterations to call data from the api.
     */
    set c8yForMaxIterations(maxIterations: number);
    /**
     * A custom loading component.
     */
    set c8yForLoadingTemplate(loadingTemplate: ForOfDirective['loadingTemplate']);
    /**
     * Load next text label.
     */
    set c8yForLoadNextLabel(loadNextLabel: string);
    /**
     * Loading text label.
     */
    set c8yForLoadingLabel(loadingLabel: string);
    /**
     * A `RealtimeService` instance.
     */
    set c8yForRealtime(source: ForOfDirective['realtime']);
    /**
     * Realtime options.
     */
    set c8yForRealtimeOptions(realtimeOptions: ForOfDirective['realtimeOptions']);
    /**
     * A comparator function for comparing list items. Used to determine
     * the position at which a new element should be added to the list.
     */
    set c8yForComparator(comparator: ForOfDirective['comparator']);
    /**
     * Enable virtual scroll rendering method.
     */
    c8yForEnableVirtualScroll: boolean;
    /**
     * Provides fixed item size for virtual scroll window strategy.
     */
    c8yForVirtualScrollElementSize: any;
    /**
     * Sets mode of virtual scroller instance.
     * window is used for case when whole viewport is scrolled.
     * fixed can be used on inner-scroll containers.
     */
    c8yForVirtualScrollStrategy: 'fixed' | 'window';
    /**
     * When used fixed strategy, there needs to be fixed height set on scrolling container.
     */
    c8yForVirtualScrollContainerHeight: number;
    /**
     * The number of items currently loaded in the list.
     *
     * Note: This can only be used if the `forOf` isn't used with
     * the sugared asterisk (*) syntax. Instead you need to use an ng-template:
     * ```html
     * <ng-template
     *  c8yFor
     *  let-operation
     *  [c8yForOf]="operations$"
     *  (c8yForCount)="operationCount = $event"
     * >
     * </ng-template>
     * ```
     */
    private c8yForCount;
    /**
     * The items change event emitting the newly loaded items.
     *
     * Note: This can only be used if the `forOf` isn't used with
     * the sugared asterisk (*) syntax. Instead you need to use an ng-template:
     * ```html
     * <ng-template
     *  c8yFor
     *  let-operation
     *  [c8yForOf]="operations$"
     *  (c8yForChange)="onChangeForOf($event)"
     * >
     * </ng-template>
     * ```
     */
    private c8yForChange;
    /**
     * The current instance of the `LoadMoreComponent`.
     */
    private c8yForLoadMoreComponent;
    private count;
    constructor(tpl: TemplateRef<any>, vcr: ViewContainerRef, cdRef: ChangeDetectorRef);
    ngOnInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    ngOnDestroy(): void;
    private handleRealtime;
    /**
     * On create notification:
     * - if item passes data pipe, then insert it.
     * @private
     */
    private handleRealtimeCreate;
    /**
     * On update notification:
     * - if item is displayed and passes data pipe, then update it,
     * - if item is displayed and doesn't pass data pipe, then remove it (if `removeOnUpdate` is true),
     * - if item is not displayed and passes data pipe, then insert it (if `insertOnUpdate` is true),
     * - if item is not displayed and doesn't pass data pipe, then ignore it.
     * @private
     */
    private handleRealtimeUpdate;
    /**
     * On delete notification:
     * - remove item from the list (if not there, it will be just ignored).
     * @private
     */
    private handleRealtimeDelete;
    private render;
    private append;
    private loadMoreData;
    private createLoadMoreButtonComponent;
    private createVirtualScrollWrapperComponent;
    private insert;
    private update;
    private remove;
    private updateCount;
    private isDisplayed;
    private forMatchingEmbeddedViewRef;
    private checkForDuplicates;
    private unsubscribePaging;
    private setVirtualScrollContents;
    private appendVirtualScrollContent;
    static ɵfac: i0.ɵɵFactoryDeclaration<ForOfDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ForOfDirective, "[c8yFor]", never, { "c8yForOf": { "alias": "c8yForOf"; "required": false; }; "c8yForLoadMore": { "alias": "c8yForLoadMore"; "required": false; }; "c8yForPipe": { "alias": "c8yForPipe"; "required": false; }; "c8yForNotFound": { "alias": "c8yForNotFound"; "required": false; }; "c8yForMaxIterations": { "alias": "c8yForMaxIterations"; "required": false; }; "c8yForLoadingTemplate": { "alias": "c8yForLoadingTemplate"; "required": false; }; "c8yForLoadNextLabel": { "alias": "c8yForLoadNextLabel"; "required": false; }; "c8yForLoadingLabel": { "alias": "c8yForLoadingLabel"; "required": false; }; "c8yForRealtime": { "alias": "c8yForRealtime"; "required": false; }; "c8yForRealtimeOptions": { "alias": "c8yForRealtimeOptions"; "required": false; }; "c8yForComparator": { "alias": "c8yForComparator"; "required": false; }; "c8yForEnableVirtualScroll": { "alias": "c8yForEnableVirtualScroll"; "required": false; }; "c8yForVirtualScrollElementSize": { "alias": "c8yForVirtualScrollElementSize"; "required": false; }; "c8yForVirtualScrollStrategy": { "alias": "c8yForVirtualScrollStrategy"; "required": false; }; "c8yForVirtualScrollContainerHeight": { "alias": "c8yForVirtualScrollContainerHeight"; "required": false; }; }, { "c8yForCount": "c8yForCount"; "c8yForChange": "c8yForChange"; "c8yForLoadMoreComponent": "c8yForLoadMoreComponent"; }, never, never, true, never>;
}
//# sourceMappingURL=forOf.directive.d.ts.map