ng-materialgrammi/esm2020/lib/components/placeholder/placeholder.component.mjs

An Angular framework which follows

import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class PlaceholderComponent {
    constructor() {
        this.show = true;
        this.type = "img";
        this.class = "";
    }
    ngOnInit() {
    }
}
PlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
PlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PlaceholderComponent, selector: "mg-placeholder", inputs: { show: "show", type: "type", class: "class" }, ngImport: i0, template: "<ng-container *ngIf=\"show\">\n    <div class=\"placeholder\" [ngClass]=\"type + ' ' + class\">\n        <div class=\"spinner-eclipse\">\n            <div class=\"eclipse\">\n                <div></div>\n            </div>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</ng-container>\n<div class=\"load-wraper\">\n    <div class=\"activity\"></div>\n</div>\n", styles: [".load-wraper{position:relative;height:100%;width:100%;background-color:#d3d3d3;z-index:44;overflow:hidden;border-radius:5px}.activity{position:absolute;left:-45%;height:100%;width:45%;background-image:linear-gradient(to left,rgba(251,251,251,.05),rgba(251,251,251,.3),rgba(251,251,251,.6),rgba(251,251,251,.3),rgba(251,251,251,.05));background-image:-webkit-linear-gradient(to left,rgba(251,251,251,.05),rgba(251,251,251,.3),rgba(251,251,251,.6),rgba(251,251,251,.3),rgba(251,251,251,.05));animation:loading 1s infinite;z-index:45}@keyframes loading{0%{left:-45%}to{left:100%}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PlaceholderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mg-placeholder', template: "<ng-container *ngIf=\"show\">\n    <div class=\"placeholder\" [ngClass]=\"type + ' ' + class\">\n        <div class=\"spinner-eclipse\">\n            <div class=\"eclipse\">\n                <div></div>\n            </div>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</ng-container>\n<div class=\"load-wraper\">\n    <div class=\"activity\"></div>\n</div>\n", styles: [".load-wraper{position:relative;height:100%;width:100%;background-color:#d3d3d3;z-index:44;overflow:hidden;border-radius:5px}.activity{position:absolute;left:-45%;height:100%;width:45%;background-image:linear-gradient(to left,rgba(251,251,251,.05),rgba(251,251,251,.3),rgba(251,251,251,.6),rgba(251,251,251,.3),rgba(251,251,251,.05));background-image:-webkit-linear-gradient(to left,rgba(251,251,251,.05),rgba(251,251,251,.3),rgba(251,251,251,.6),rgba(251,251,251,.3),rgba(251,251,251,.05));animation:loading 1s infinite;z-index:45}@keyframes loading{0%{left:-45%}to{left:100%}}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { show: [{
                type: Input
            }], type: [{
                type: Input
            }], class: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGxhY2Vob2xkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWF0ZXJpYWxncmFtbWkvc3JjL2xpYi9jb21wb25lbnRzL3BsYWNlaG9sZGVyL3BsYWNlaG9sZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hdGVyaWFsZ3JhbW1pL3NyYy9saWIvY29tcG9uZW50cy9wbGFjZWhvbGRlci9wbGFjZWhvbGRlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQzs7O0FBT3pELE1BQU0sT0FBTyxvQkFBb0I7SUFJL0I7UUFIUyxTQUFJLEdBQUcsSUFBSSxDQUFDO1FBQ1osU0FBSSxHQUFHLEtBQUssQ0FBQztRQUNiLFVBQUssR0FBRyxFQUFFLENBQUM7SUFDSixDQUFDO0lBRWpCLFFBQVE7SUFDUixDQUFDOztpSEFQVSxvQkFBb0I7cUdBQXBCLG9CQUFvQiw4R0NQakMsMlhBYUE7MkZETmEsb0JBQW9CO2tCQUxoQyxTQUFTOytCQUNFLGdCQUFnQjswRUFLakIsSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWctcGxhY2Vob2xkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vcGxhY2Vob2xkZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9wbGFjZWhvbGRlci5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgUGxhY2Vob2xkZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBzaG93ID0gdHJ1ZTtcbiAgQElucHV0KCkgdHlwZSA9IFwiaW1nXCI7XG4gIEBJbnB1dCgpIGNsYXNzID0gXCJcIjtcbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgfVxuXG59XG4iLCI8bmctY29udGFpbmVyICpuZ0lmPVwic2hvd1wiPlxuICAgIDxkaXYgY2xhc3M9XCJwbGFjZWhvbGRlclwiIFtuZ0NsYXNzXT1cInR5cGUgKyAnICcgKyBjbGFzc1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic3Bpbm5lci1lY2xpcHNlXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZWNsaXBzZVwiPlxuICAgICAgICAgICAgICAgIDxkaXY+PC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbjwvbmctY29udGFpbmVyPlxuPGRpdiBjbGFzcz1cImxvYWQtd3JhcGVyXCI+XG4gICAgPGRpdiBjbGFzcz1cImFjdGl2aXR5XCI+PC9kaXY+XG48L2Rpdj5cbiJdfQ==