ontimize-web-ngx/esm2020/lib/components/list/skeleton/o-list-skeleton.component.mjs

Ontimize Web framework using Angular 15

import { Component, ElementRef, Injector, ViewEncapsulation } from '@angular/core';
import { OSkeletonComponent } from '../../o-skeleton.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/flex-layout/flex";
import * as i3 from "ngx-skeleton-loader";
export class OListSkeletonComponent extends OSkeletonComponent {
    constructor(elRef, injector) {
        super(injector);
        this.elRef = elRef;
        this.injector = injector;
    }
    get count() {
        const parentElement = this.elRef.nativeElement.parentElement;
        return Array(Math.floor(parentElement.offsetHeight / 150));
    }
}
OListSkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OListSkeletonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
OListSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OListSkeletonComponent, selector: "o-list-skeleton", host: { properties: { "class.o-list-skeleton": "true" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-list-skeleton-item\" *ngFor=\"let i of count\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFill class=\"o-list-skeleton-item-first-section\">\n    <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" appearance=\"circle\"\n      [theme]=\"{ width: '50px', height: '50px' }\"></ngx-skeleton-loader>\n    <div fxFlex fxLayout=\"column\">\n      <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" count=\"1\"\n        [theme]=\"{ height:'10px', width:'30%'  }\"></ngx-skeleton-loader>\n      <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" count=\"1\"\n        [theme]=\"{ height:'10px', width:'70%' }\"></ngx-skeleton-loader>\n    </div>\n  </div>\n\n  <div fxLayout=\"column\" class=\"o-list-skeleton-item-second-section\">\n    <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" count=\"1\"\n      [theme]=\"{ height:'10px', width:'90%' }\"></ngx-skeleton-loader>\n    <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" count=\"1\"\n      [theme]=\"{ height:'10px', width:'90%' }\"></ngx-skeleton-loader>\n    <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" count=\"1\" [theme]=\"{ height:'10px',width:'70%'}\"></ngx-skeleton-loader>\n\n\n  </div>\n</div>\n", styles: [".o-list-skeleton{height:100%;width:100%}.o-list-skeleton .o-list-skeleton-item{padding:20px;margin:10px}.o-list-skeleton .o-list-skeleton-item .o-list-skeleton-item-first-section{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OListSkeletonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'o-list-skeleton', encapsulation: ViewEncapsulation.None, host: {
                        '[class.o-list-skeleton]': 'true'
                    }, template: "<div class=\"o-list-skeleton-item\" *ngFor=\"let i of count\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFill class=\"o-list-skeleton-item-first-section\">\n    <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" appearance=\"circle\"\n      [theme]=\"{ width: '50px', height: '50px' }\"></ngx-skeleton-loader>\n    <div fxFlex fxLayout=\"column\">\n      <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" count=\"1\"\n        [theme]=\"{ height:'10px', width:'30%'  }\"></ngx-skeleton-loader>\n      <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" count=\"1\"\n        [theme]=\"{ height:'10px', width:'70%' }\"></ngx-skeleton-loader>\n    </div>\n  </div>\n\n  <div fxLayout=\"column\" class=\"o-list-skeleton-item-second-section\">\n    <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" count=\"1\"\n      [theme]=\"{ height:'10px', width:'90%' }\"></ngx-skeleton-loader>\n    <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" count=\"1\"\n      [theme]=\"{ height:'10px', width:'90%' }\"></ngx-skeleton-loader>\n    <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" count=\"1\" [theme]=\"{ height:'10px',width:'70%'}\"></ngx-skeleton-loader>\n\n\n  </div>\n</div>\n", styles: [".o-list-skeleton{height:100%;width:100%}.o-list-skeleton .o-list-skeleton-item{padding:20px;margin:10px}.o-list-skeleton .o-list-skeleton-item .o-list-skeleton-item-first-section{margin-bottom:20px}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiby1saXN0LXNrZWxldG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL29udGltaXplLXdlYi1uZ3gvc3JjL2xpYi9jb21wb25lbnRzL2xpc3Qvc2tlbGV0b24vby1saXN0LXNrZWxldG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL29udGltaXplLXdlYi1uZ3gvc3JjL2xpYi9jb21wb25lbnRzL2xpc3Qvc2tlbGV0b24vby1saXN0LXNrZWxldG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNuRixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQzs7Ozs7QUFXaEUsTUFBTSxPQUFPLHNCQUF1QixTQUFRLGtCQUFrQjtJQUU1RCxZQUFzQixLQUFpQixFQUFZLFFBQWtCO1FBQ25FLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQTtRQURLLFVBQUssR0FBTCxLQUFLLENBQVk7UUFBWSxhQUFRLEdBQVIsUUFBUSxDQUFVO0lBRXJFLENBQUM7SUFFRCxJQUFJLEtBQUs7UUFDUCxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUM7UUFDN0QsT0FBTyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsWUFBWSxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUM7SUFFN0QsQ0FBQzs7b0hBVlUsc0JBQXNCO3dHQUF0QixzQkFBc0IseUlDWm5DLHEwQ0FzQkE7NEZEVmEsc0JBQXNCO2tCQVRsQyxTQUFTOytCQUNFLGlCQUFpQixpQkFHWixpQkFBaUIsQ0FBQyxJQUFJLFFBQy9CO3dCQUNKLHlCQUF5QixFQUFFLE1BQU07cUJBQ2xDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBJbmplY3RvciwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE9Ta2VsZXRvbkNvbXBvbmVudCB9IGZyb20gJy4uLy4uL28tc2tlbGV0b24uY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnby1saXN0LXNrZWxldG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL28tbGlzdC1za2VsZXRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL28tbGlzdC1za2VsZXRvbi5jb21wb25lbnQuc2NzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBob3N0OiB7XG4gICAgJ1tjbGFzcy5vLWxpc3Qtc2tlbGV0b25dJzogJ3RydWUnXG4gIH1cbn0pXG5leHBvcnQgY2xhc3MgT0xpc3RTa2VsZXRvbkNvbXBvbmVudCBleHRlbmRzIE9Ta2VsZXRvbkNvbXBvbmVudCB7XG5cbiAgY29uc3RydWN0b3IocHJvdGVjdGVkIGVsUmVmOiBFbGVtZW50UmVmLCBwcm90ZWN0ZWQgaW5qZWN0b3I6IEluamVjdG9yKSB7XG4gICAgc3VwZXIoaW5qZWN0b3IpXG4gIH1cblxuICBnZXQgY291bnQoKSB7XG4gICAgY29uc3QgcGFyZW50RWxlbWVudCA9IHRoaXMuZWxSZWYubmF0aXZlRWxlbWVudC5wYXJlbnRFbGVtZW50O1xuICAgIHJldHVybiBBcnJheShNYXRoLmZsb29yKHBhcmVudEVsZW1lbnQub2Zmc2V0SGVpZ2h0IC8gMTUwKSk7XG5cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIm8tbGlzdC1za2VsZXRvbi1pdGVtXCIgKm5nRm9yPVwibGV0IGkgb2YgY291bnRcIj5cbiAgPGRpdiBmeExheW91dD1cInJvd1wiIGZ4TGF5b3V0QWxpZ249XCJzdGFydCBjZW50ZXJcIiBmeEZpbGwgY2xhc3M9XCJvLWxpc3Qtc2tlbGV0b24taXRlbS1maXJzdC1zZWN0aW9uXCI+XG4gICAgPG5neC1za2VsZXRvbi1sb2FkZXIgYW5pbWF0aW9uPVwie3tpc0RhcmtNb2RlPydwcm9ncmVzcy1kYXJrJzoncHJvZ3Jlc3MnfX1cIiBhcHBlYXJhbmNlPVwiY2lyY2xlXCJcbiAgICAgIFt0aGVtZV09XCJ7IHdpZHRoOiAnNTBweCcsIGhlaWdodDogJzUwcHgnIH1cIj48L25neC1za2VsZXRvbi1sb2FkZXI+XG4gICAgPGRpdiBmeEZsZXggZnhMYXlvdXQ9XCJjb2x1bW5cIj5cbiAgICAgIDxuZ3gtc2tlbGV0b24tbG9hZGVyIGFuaW1hdGlvbj1cInt7aXNEYXJrTW9kZT8ncHJvZ3Jlc3MtZGFyayc6J3Byb2dyZXNzJ319XCIgY291bnQ9XCIxXCJcbiAgICAgICAgW3RoZW1lXT1cInsgaGVpZ2h0OicxMHB4Jywgd2lkdGg6JzMwJScgIH1cIj48L25neC1za2VsZXRvbi1sb2FkZXI+XG4gICAgICA8bmd4LXNrZWxldG9uLWxvYWRlciBhbmltYXRpb249XCJ7e2lzRGFya01vZGU/J3Byb2dyZXNzLWRhcmsnOidwcm9ncmVzcyd9fVwiIGNvdW50PVwiMVwiXG4gICAgICAgIFt0aGVtZV09XCJ7IGhlaWdodDonMTBweCcsIHdpZHRoOic3MCUnIH1cIj48L25neC1za2VsZXRvbi1sb2FkZXI+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxkaXYgZnhMYXlvdXQ9XCJjb2x1bW5cIiBjbGFzcz1cIm8tbGlzdC1za2VsZXRvbi1pdGVtLXNlY29uZC1zZWN0aW9uXCI+XG4gICAgPG5neC1za2VsZXRvbi1sb2FkZXIgYW5pbWF0aW9uPVwie3tpc0RhcmtNb2RlPydwcm9ncmVzcy1kYXJrJzoncHJvZ3Jlc3MnfX1cIiBjb3VudD1cIjFcIlxuICAgICAgW3RoZW1lXT1cInsgaGVpZ2h0OicxMHB4Jywgd2lkdGg6JzkwJScgfVwiPjwvbmd4LXNrZWxldG9uLWxvYWRlcj5cbiAgICA8bmd4LXNrZWxldG9uLWxvYWRlciBhbmltYXRpb249XCJ7e2lzRGFya01vZGU/J3Byb2dyZXNzLWRhcmsnOidwcm9ncmVzcyd9fVwiIGNvdW50PVwiMVwiXG4gICAgICBbdGhlbWVdPVwieyBoZWlnaHQ6JzEwcHgnLCB3aWR0aDonOTAlJyB9XCI+PC9uZ3gtc2tlbGV0b24tbG9hZGVyPlxuICAgIDxuZ3gtc2tlbGV0b24tbG9hZGVyIGFuaW1hdGlvbj1cInt7aXNEYXJrTW9kZT8ncHJvZ3Jlc3MtZGFyayc6J3Byb2dyZXNzJ319XCIgY291bnQ9XCIxXCIgW3RoZW1lXT1cInsgaGVpZ2h0OicxMHB4Jyx3aWR0aDonNzAlJ31cIj48L25neC1za2VsZXRvbi1sb2FkZXI+XG5cblxuICA8L2Rpdj5cbjwvZGl2PlxuIl19