@indice/ng-components/esm2022/lib/controls/skeleton-loader/skeleton-loader.component.mjs

Indice common components for Angular v12

import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SkeletonLoaderComponent {
    constructor() {
        this.count = 7;
        this.type = 'tiles'; // 'large-tile', 'table'
        this.deckClass = 'cards-deck-4'; // 'large-tile', 'table'
    }
    ngOnInit() {
    }
    counter(i) {
        return new Array(i);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type", deckClass: ["deck-class", "deckClass"] }, ngImport: i0, template: "<div [class]=\"deckClass\" *ngIf=\"type === 'tiles'\">\r\n  <div class=\"relative p-4 w-80 bg-white overflow-hidden shadow hover:shadow-md rounded-xl\"  *ngFor=\"let i of counter(count)\">\r\n    <div class=\"animate-pulse flex flex-col rounded-xl\">\r\n      <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n      \r\n      <div class=\"flex flex-col mt-5 rounded-xl\">\r\n        <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n        <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n        <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1 rounded-xl\">\r\n        <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n        <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n  \r\n<div class=\"cards-deck-1\"  *ngIf=\"type === 'table'\">\r\n  <div class=\"border border-light-blue-300 shadow rounded-lg p-4 max-w-sm w-full mx-auto mb-4\" *ngFor=\"let i of counter(count)\">\r\n    <div class=\"animate-pulse flex space-x-4\">\r\n      <div class=\"rounded-full bg-light-blue-400 h-12 w-12\">&nbsp;</div>\r\n      <div class=\"flex-1 space-y-4 py-1\">\r\n        <div class=\"h-4 bg-light-blue-400 rounded w-3/4\">&nbsp;</div>\r\n        <div class=\"space-y-2\">\r\n          <div class=\"h-4 bg-light-blue-400 rounded\">&nbsp;</div>\r\n          <div class=\"h-4 bg-light-blue-400 rounded w-5/6\">&nbsp;</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-skeleton-loader', template: "<div [class]=\"deckClass\" *ngIf=\"type === 'tiles'\">\r\n  <div class=\"relative p-4 w-80 bg-white overflow-hidden shadow hover:shadow-md rounded-xl\"  *ngFor=\"let i of counter(count)\">\r\n    <div class=\"animate-pulse flex flex-col rounded-xl\">\r\n      <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n      \r\n      <div class=\"flex flex-col mt-5 rounded-xl\">\r\n        <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n        <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n        <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n      </div>\r\n\r\n      <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1 rounded-xl\">\r\n        <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n        <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n  \r\n<div class=\"cards-deck-1\"  *ngIf=\"type === 'table'\">\r\n  <div class=\"border border-light-blue-300 shadow rounded-lg p-4 max-w-sm w-full mx-auto mb-4\" *ngFor=\"let i of counter(count)\">\r\n    <div class=\"animate-pulse flex space-x-4\">\r\n      <div class=\"rounded-full bg-light-blue-400 h-12 w-12\">&nbsp;</div>\r\n      <div class=\"flex-1 space-y-4 py-1\">\r\n        <div class=\"h-4 bg-light-blue-400 rounded w-3/4\">&nbsp;</div>\r\n        <div class=\"space-y-2\">\r\n          <div class=\"h-4 bg-light-blue-400 rounded\">&nbsp;</div>\r\n          <div class=\"h-4 bg-light-blue-400 rounded w-5/6\">&nbsp;</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>" }]
        }], ctorParameters: () => [], propDecorators: { count: [{
                type: Input
            }], type: [{
                type: Input
            }], deckClass: [{
                type: Input,
                args: ['deck-class']
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24tbG9hZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9za2VsZXRvbi1sb2FkZXIvc2tlbGV0b24tbG9hZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9za2VsZXRvbi1sb2FkZXIvc2tlbGV0b24tbG9hZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7QUFPekQsTUFBTSxPQUFPLHVCQUF1QjtJQUlsQztRQUhTLFVBQUssR0FBRyxDQUFDLENBQUM7UUFDVixTQUFJLEdBQUcsT0FBTyxDQUFDLENBQUMsd0JBQXdCO1FBQzVCLGNBQVMsR0FBRyxjQUFjLENBQUMsQ0FBQyx3QkFBd0I7SUFDekQsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQztJQUVNLE9BQU8sQ0FBQyxDQUFTO1FBQ3RCLE9BQU8sSUFBSSxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDdEIsQ0FBQzs4R0FYVSx1QkFBdUI7a0dBQXZCLHVCQUF1Qiw2SUNQcEMsNGlEQWlDTTs7MkZEMUJPLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFFRSxxQkFBcUI7d0RBSXRCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ2UsU0FBUztzQkFBN0IsS0FBSzt1QkFBQyxZQUFZIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6Y29tcG9uZW50LXNlbGVjdG9yXHJcbiAgc2VsZWN0b3I6ICdsaWItc2tlbGV0b24tbG9hZGVyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vc2tlbGV0b24tbG9hZGVyLmNvbXBvbmVudC5odG1sJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgU2tlbGV0b25Mb2FkZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBJbnB1dCgpIGNvdW50ID0gNztcclxuICBASW5wdXQoKSB0eXBlID0gJ3RpbGVzJzsgLy8gJ2xhcmdlLXRpbGUnLCAndGFibGUnXHJcbiAgQElucHV0KCdkZWNrLWNsYXNzJykgZGVja0NsYXNzID0gJ2NhcmRzLWRlY2stNCc7IC8vICdsYXJnZS10aWxlJywgJ3RhYmxlJ1xyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gIH1cclxuXHJcbiAgcHVibGljIGNvdW50ZXIoaTogbnVtYmVyKTogbnVtYmVyW10ge1xyXG4gICAgcmV0dXJuIG5ldyBBcnJheShpKTtcclxuICB9XHJcblxyXG59XHJcbiIsIjxkaXYgW2NsYXNzXT1cImRlY2tDbGFzc1wiICpuZ0lmPVwidHlwZSA9PT0gJ3RpbGVzJ1wiPlxyXG4gIDxkaXYgY2xhc3M9XCJyZWxhdGl2ZSBwLTQgdy04MCBiZy13aGl0ZSBvdmVyZmxvdy1oaWRkZW4gc2hhZG93IGhvdmVyOnNoYWRvdy1tZCByb3VuZGVkLXhsXCIgICpuZ0Zvcj1cImxldCBpIG9mIGNvdW50ZXIoY291bnQpXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwiYW5pbWF0ZS1wdWxzZSBmbGV4IGZsZXgtY29sIHJvdW5kZWQteGxcIj5cclxuICAgICAgPGRpdiBjbGFzcz1cInJvdW5kZWQgdy1mdWxsIGgtMzIgYmctZ3JheS0yMDBcIj48L2Rpdj5cclxuICAgICAgXHJcbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGZsZXgtY29sIG10LTUgcm91bmRlZC14bFwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJ3LWZ1bGwgaC01IGJnLWdyYXktMjAwIHJvdW5kZWRcIj48L2Rpdj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwibXQtMiB3LTEwLzEyIGgtMyBiZy1ncmF5LTIwMCByb3VuZGVkXCI+PC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cIm10LTIgdy04LzEyIGgtMyBiZy1ncmF5LTIwMCByb3VuZGVkXCI+PC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgPGRpdiBjbGFzcz1cImdyaWQgZ3JpZC1jb2xzLTIgbXQtNSBnYXAteC0yIGdhcC15LTEgcm91bmRlZC14bFwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJtdC0yIHctZnVsbCBoLTMgYmctZ3JheS0yMDAgcm91bmRlZFwiPjwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJtdC0yIHctZnVsbCBoLTMgYmctZ3JheS0yMDAgcm91bmRlZFwiPjwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuXHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuPC9kaXY+XHJcbiAgXHJcbjxkaXYgY2xhc3M9XCJjYXJkcy1kZWNrLTFcIiAgKm5nSWY9XCJ0eXBlID09PSAndGFibGUnXCI+XHJcbiAgPGRpdiBjbGFzcz1cImJvcmRlciBib3JkZXItbGlnaHQtYmx1ZS0zMDAgc2hhZG93IHJvdW5kZWQtbGcgcC00IG1heC13LXNtIHctZnVsbCBteC1hdXRvIG1iLTRcIiAqbmdGb3I9XCJsZXQgaSBvZiBjb3VudGVyKGNvdW50KVwiPlxyXG4gICAgPGRpdiBjbGFzcz1cImFuaW1hdGUtcHVsc2UgZmxleCBzcGFjZS14LTRcIj5cclxuICAgICAgPGRpdiBjbGFzcz1cInJvdW5kZWQtZnVsbCBiZy1saWdodC1ibHVlLTQwMCBoLTEyIHctMTJcIj4mbmJzcDs8L2Rpdj5cclxuICAgICAgPGRpdiBjbGFzcz1cImZsZXgtMSBzcGFjZS15LTQgcHktMVwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJoLTQgYmctbGlnaHQtYmx1ZS00MDAgcm91bmRlZCB3LTMvNFwiPiZuYnNwOzwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJzcGFjZS15LTJcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJoLTQgYmctbGlnaHQtYmx1ZS00MDAgcm91bmRlZFwiPiZuYnNwOzwvZGl2PlxyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cImgtNCBiZy1saWdodC1ibHVlLTQwMCByb3VuZGVkIHctNS82XCI+Jm5ic3A7PC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==