@siemens/ngx-datatable/esm2022/lib/components/body/ghost-loader/ghost-loader.component.mjs

ngx-datatable is an Angular table grid component for presenting large and complex data.

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class DataTableGhostLoaderComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DataTableGhostLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: DataTableGhostLoaderComponent, selector: "ghost-loader", inputs: { columns: "columns", pageSize: "pageSize", rowHeight: "rowHeight", ghostBodyHeight: "ghostBodyHeight" }, ngImport: i0, template: "<div [style.height]=\"ghostBodyHeight + 'px'\" class=\"ghost-loader ghost-cell-container\">\n  <div [style.height]=\"rowHeight + 'px'\" class=\"ghost-element\" *ngFor=\"let item of [].constructor(pageSize)\">\n    <ng-container *ngFor=\"let col of columns\">\n      <div class=\"line ghost-cell-strip\" *ngIf=\"!col.ghostCellTemplate else ghostCellTemplate;\" [style.width]=\"col?.width + 'px'\" >\n      </div>\n      <ng-template\n        #ghostCellTemplate\n        [ngTemplateOutlet]=\"col.ghostCellTemplate\"\n      >\n      </ng-template>\n    </ng-container>\n  </div>\n</div>\n", styles: ["@keyframes ghost{0%{background-position:0vw 0}to{background-position:100vw 0}}.ghost-loader{overflow:hidden}.ghost-loader .line{width:100%;height:12px;animation-name:ghost;animation-iteration-count:infinite;animation-timing-function:linear}.ghost-loader .ghost-element{display:flex}:host.ghost-overlay{position:sticky;top:20px}:host.ghost-overlay .ghost-loader .line{margin:.9rem 1.2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DataTableGhostLoaderComponent, decorators: [{
            type: Component,
            args: [{ selector: `ghost-loader`, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"ghostBodyHeight + 'px'\" class=\"ghost-loader ghost-cell-container\">\n  <div [style.height]=\"rowHeight + 'px'\" class=\"ghost-element\" *ngFor=\"let item of [].constructor(pageSize)\">\n    <ng-container *ngFor=\"let col of columns\">\n      <div class=\"line ghost-cell-strip\" *ngIf=\"!col.ghostCellTemplate else ghostCellTemplate;\" [style.width]=\"col?.width + 'px'\" >\n      </div>\n      <ng-template\n        #ghostCellTemplate\n        [ngTemplateOutlet]=\"col.ghostCellTemplate\"\n      >\n      </ng-template>\n    </ng-container>\n  </div>\n</div>\n", styles: ["@keyframes ghost{0%{background-position:0vw 0}to{background-position:100vw 0}}.ghost-loader{overflow:hidden}.ghost-loader .line{width:100%;height:12px;animation-name:ghost;animation-iteration-count:infinite;animation-timing-function:linear}.ghost-loader .ghost-element{display:flex}:host.ghost-overlay{position:sticky;top:20px}:host.ghost-overlay .ghost-loader .line{margin:.9rem 1.2rem}\n"] }]
        }], propDecorators: { columns: [{
                type: Input
            }], pageSize: [{
                type: Input
            }], rowHeight: [{
                type: Input
            }], ghostBodyHeight: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2hvc3QtbG9hZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kYXRhdGFibGUvc3JjL2xpYi9jb21wb25lbnRzL2JvZHkvZ2hvc3QtbG9hZGVyL2dob3N0LWxvYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZGF0YXRhYmxlL3NyYy9saWIvY29tcG9uZW50cy9ib2R5L2dob3N0LWxvYWRlci9naG9zdC1sb2FkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQVExRSxNQUFNLE9BQU8sNkJBQTZCOzhHQUE3Qiw2QkFBNkI7a0dBQTdCLDZCQUE2QixzS0NSMUMsMmtCQWFBOzsyRkRMYSw2QkFBNkI7a0JBTnpDLFNBQVM7K0JBQ0UsY0FBYyxtQkFHUCx1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IGBnaG9zdC1sb2FkZXJgLFxuICB0ZW1wbGF0ZVVybDogYC4vZ2hvc3QtbG9hZGVyLmNvbXBvbmVudC5odG1sYCxcbiAgc3R5bGVVcmxzOiBbYC4vZ2hvc3QtbG9hZGVyLmNvbXBvbmVudC5zY3NzYF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIERhdGFUYWJsZUdob3N0TG9hZGVyQ29tcG9uZW50IHtcbiAgQElucHV0KCkgY29sdW1ucztcbiAgQElucHV0KCkgcGFnZVNpemU7XG4gIEBJbnB1dCgpIHJvd0hlaWdodDtcbiAgQElucHV0KCkgZ2hvc3RCb2R5SGVpZ2h0O1xufVxuIiwiPGRpdiBbc3R5bGUuaGVpZ2h0XT1cImdob3N0Qm9keUhlaWdodCArICdweCdcIiBjbGFzcz1cImdob3N0LWxvYWRlciBnaG9zdC1jZWxsLWNvbnRhaW5lclwiPlxuICA8ZGl2IFtzdHlsZS5oZWlnaHRdPVwicm93SGVpZ2h0ICsgJ3B4J1wiIGNsYXNzPVwiZ2hvc3QtZWxlbWVudFwiICpuZ0Zvcj1cImxldCBpdGVtIG9mIFtdLmNvbnN0cnVjdG9yKHBhZ2VTaXplKVwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGNvbCBvZiBjb2x1bW5zXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwibGluZSBnaG9zdC1jZWxsLXN0cmlwXCIgKm5nSWY9XCIhY29sLmdob3N0Q2VsbFRlbXBsYXRlIGVsc2UgZ2hvc3RDZWxsVGVtcGxhdGU7XCIgW3N0eWxlLndpZHRoXT1cImNvbD8ud2lkdGggKyAncHgnXCIgPlxuICAgICAgPC9kaXY+XG4gICAgICA8bmctdGVtcGxhdGVcbiAgICAgICAgI2dob3N0Q2VsbFRlbXBsYXRlXG4gICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImNvbC5naG9zdENlbGxUZW1wbGF0ZVwiXG4gICAgICA+XG4gICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvbmctY29udGFpbmVyPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19