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

Ontimize Web framework using Angular 15

import { Component, ViewEncapsulation } from '@angular/core';
import { ORepeatableSkeletonComponent } from '../../o-repeatable-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 OGridSkeletonComponent extends ORepeatableSkeletonComponent {
    getParentElement() {
        return this.elRef.nativeElement.parentElement;
    }
    getSkeletonItemElement(parentElement) {
        return parentElement.querySelector('div.o-grid-skeleton-item');
    }
}
OGridSkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OGridSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
OGridSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OGridSkeletonComponent, selector: "o-grid-skeleton", host: { properties: { "class.o-grid-skeleton": "true" } }, usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let row of rows$ | async\" fxLayout=\"column\" fxLayoutGap=\"10px\" class=\"o-grid-skeleton-item\">\n  <ngx-skeleton-loader count=\"1\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n    [theme]=\"{ height: '10px', width:'5%', 'border-radius':'none' }\" class=\"o-grid-skeleton-item-first-section\"></ngx-skeleton-loader>\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" class=\"o-grid-skeleton-item-second-section\">\n    <div fxFlex=\"20%\" *ngFor=\"let i of [1,2,3,4,5]\">\n      <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '60px', 'border-radius':'none' }\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\">\n      </ngx-skeleton-loader>\n      <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '10px', width:'100%', 'border-radius':'none' }\"\n        animation=\"{{isDarkMode?'progress-dark':'progress'}}\">\n      </ngx-skeleton-loader>\n      <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '10px', width:'70%', 'border-radius':'none' }\"\n        animation=\"{{isDarkMode?'progress-dark':'progress'}}\">\n      </ngx-skeleton-loader>\n    </div>\n  </div>\n</div>\n", styles: [".o-grid-skeleton{height:100%;width:100%;overflow:hidden}.o-grid-skeleton .o-grid-skeleton-item{margin:10px}\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.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { 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"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OGridSkeletonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'o-grid-skeleton', encapsulation: ViewEncapsulation.None, host: {
                        '[class.o-grid-skeleton]': 'true'
                    }, template: "<div *ngFor=\"let row of rows$ | async\" fxLayout=\"column\" fxLayoutGap=\"10px\" class=\"o-grid-skeleton-item\">\n  <ngx-skeleton-loader count=\"1\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\"\n    [theme]=\"{ height: '10px', width:'5%', 'border-radius':'none' }\" class=\"o-grid-skeleton-item-first-section\"></ngx-skeleton-loader>\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" class=\"o-grid-skeleton-item-second-section\">\n    <div fxFlex=\"20%\" *ngFor=\"let i of [1,2,3,4,5]\">\n      <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '60px', 'border-radius':'none' }\" animation=\"{{isDarkMode?'progress-dark':'progress'}}\">\n      </ngx-skeleton-loader>\n      <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '10px', width:'100%', 'border-radius':'none' }\"\n        animation=\"{{isDarkMode?'progress-dark':'progress'}}\">\n      </ngx-skeleton-loader>\n      <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '10px', width:'70%', 'border-radius':'none' }\"\n        animation=\"{{isDarkMode?'progress-dark':'progress'}}\">\n      </ngx-skeleton-loader>\n    </div>\n  </div>\n</div>\n", styles: [".o-grid-skeleton{height:100%;width:100%;overflow:hidden}.o-grid-skeleton .o-grid-skeleton-item{margin:10px}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiby1ncmlkLXNrZWxldG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL29udGltaXplLXdlYi1uZ3gvc3JjL2xpYi9jb21wb25lbnRzL2dyaWQvc2tla2V0b24vby1ncmlkLXNrZWxldG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL29udGltaXplLXdlYi1uZ3gvc3JjL2xpYi9jb21wb25lbnRzL2dyaWQvc2tla2V0b24vby1ncmlkLXNrZWxldG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFN0QsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0sdUNBQXVDLENBQUM7Ozs7O0FBWXJGLE1BQU0sT0FBTyxzQkFBdUIsU0FBUSw0QkFBNEI7SUFFdEUsZ0JBQWdCO1FBQ2QsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUM7SUFDaEQsQ0FBQztJQUNELHNCQUFzQixDQUFDLGFBQTBCO1FBQy9DLE9BQU8sYUFBYSxDQUFDLGFBQWEsQ0FBQywwQkFBMEIsQ0FBQyxDQUFDO0lBQ2pFLENBQUM7O29IQVBVLHNCQUFzQjt3R0FBdEIsc0JBQXNCLHlJQ2RuQyxpbUNBZ0JBOzRGREZhLHNCQUFzQjtrQkFWbEMsU0FBUzsrQkFDRSxpQkFBaUIsaUJBR1osaUJBQWlCLENBQUMsSUFBSSxRQUMvQjt3QkFDSix5QkFBeUIsRUFBRSxNQUFNO3FCQUNsQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgT1JlcGVhdGFibGVTa2VsZXRvbkNvbXBvbmVudCB9IGZyb20gJy4uLy4uL28tcmVwZWF0YWJsZS1za2VsZXRvbi5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdvLWdyaWQtc2tlbGV0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vby1ncmlkLXNrZWxldG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vby1ncmlkLXNrZWxldG9uLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGhvc3Q6IHtcbiAgICAnW2NsYXNzLm8tZ3JpZC1za2VsZXRvbl0nOiAndHJ1ZSdcbiAgfVxuXG59KVxuZXhwb3J0IGNsYXNzIE9HcmlkU2tlbGV0b25Db21wb25lbnQgZXh0ZW5kcyBPUmVwZWF0YWJsZVNrZWxldG9uQ29tcG9uZW50IHtcblxuICBnZXRQYXJlbnRFbGVtZW50KCk6IEhUTUxFbGVtZW50IHtcbiAgICByZXR1cm4gdGhpcy5lbFJlZi5uYXRpdmVFbGVtZW50LnBhcmVudEVsZW1lbnQ7XG4gIH1cbiAgZ2V0U2tlbGV0b25JdGVtRWxlbWVudChwYXJlbnRFbGVtZW50OiBIVE1MRWxlbWVudCk6IEhUTUxFbGVtZW50IHtcbiAgICByZXR1cm4gcGFyZW50RWxlbWVudC5xdWVyeVNlbGVjdG9yKCdkaXYuby1ncmlkLXNrZWxldG9uLWl0ZW0nKTtcbiAgfVxuXG5cbn1cbiIsIjxkaXYgKm5nRm9yPVwibGV0IHJvdyBvZiByb3dzJCB8IGFzeW5jXCIgZnhMYXlvdXQ9XCJjb2x1bW5cIiBmeExheW91dEdhcD1cIjEwcHhcIiBjbGFzcz1cIm8tZ3JpZC1za2VsZXRvbi1pdGVtXCI+XG4gIDxuZ3gtc2tlbGV0b24tbG9hZGVyIGNvdW50PVwiMVwiIGFuaW1hdGlvbj1cInt7aXNEYXJrTW9kZT8ncHJvZ3Jlc3MtZGFyayc6J3Byb2dyZXNzJ319XCJcbiAgICBbdGhlbWVdPVwieyBoZWlnaHQ6ICcxMHB4Jywgd2lkdGg6JzUlJywgJ2JvcmRlci1yYWRpdXMnOidub25lJyB9XCIgY2xhc3M9XCJvLWdyaWQtc2tlbGV0b24taXRlbS1maXJzdC1zZWN0aW9uXCI+PC9uZ3gtc2tlbGV0b24tbG9hZGVyPlxuICA8ZGl2IGZ4TGF5b3V0PVwicm93XCIgZnhMYXlvdXRHYXA9XCIxMHB4XCIgY2xhc3M9XCJvLWdyaWQtc2tlbGV0b24taXRlbS1zZWNvbmQtc2VjdGlvblwiPlxuICAgIDxkaXYgZnhGbGV4PVwiMjAlXCIgKm5nRm9yPVwibGV0IGkgb2YgWzEsMiwzLDQsNV1cIj5cbiAgICAgIDxuZ3gtc2tlbGV0b24tbG9hZGVyIGNvdW50PVwiMVwiIFt0aGVtZV09XCJ7IGhlaWdodDogJzYwcHgnLCAnYm9yZGVyLXJhZGl1cyc6J25vbmUnIH1cIiBhbmltYXRpb249XCJ7e2lzRGFya01vZGU/J3Byb2dyZXNzLWRhcmsnOidwcm9ncmVzcyd9fVwiPlxuICAgICAgPC9uZ3gtc2tlbGV0b24tbG9hZGVyPlxuICAgICAgPG5neC1za2VsZXRvbi1sb2FkZXIgY291bnQ9XCIxXCIgW3RoZW1lXT1cInsgaGVpZ2h0OiAnMTBweCcsIHdpZHRoOicxMDAlJywgJ2JvcmRlci1yYWRpdXMnOidub25lJyB9XCJcbiAgICAgICAgYW5pbWF0aW9uPVwie3tpc0RhcmtNb2RlPydwcm9ncmVzcy1kYXJrJzoncHJvZ3Jlc3MnfX1cIj5cbiAgICAgIDwvbmd4LXNrZWxldG9uLWxvYWRlcj5cbiAgICAgIDxuZ3gtc2tlbGV0b24tbG9hZGVyIGNvdW50PVwiMVwiIFt0aGVtZV09XCJ7IGhlaWdodDogJzEwcHgnLCB3aWR0aDonNzAlJywgJ2JvcmRlci1yYWRpdXMnOidub25lJyB9XCJcbiAgICAgICAgYW5pbWF0aW9uPVwie3tpc0RhcmtNb2RlPydwcm9ncmVzcy1kYXJrJzoncHJvZ3Jlc3MnfX1cIj5cbiAgICAgIDwvbmd4LXNrZWxldG9uLWxvYWRlcj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==