import { AsyncPipe } from '@angular/common';
import { Component, ViewEncapsulation } from '@angular/core';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { ORepeatableSkeletonComponent } from '../../o-repeatable-skeleton.component';
import * as i0 from "@angular/core";
import * as i1 from "ngx-skeleton-loader";
export class OListSkeletonComponent extends ORepeatableSkeletonComponent {
    getParentElement() {
        return this.elRef.nativeElement.parentElement;
    }
    getSkeletonItemElement(parentElement) {
        return parentElement.querySelector('div.o-list-skeleton-item');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OListSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: OListSkeletonComponent, isStandalone: true, selector: "o-list-skeleton", host: { properties: { "class.o-list-skeleton": "true" } }, usesInheritance: true, ngImport: i0, template: "@for (row of rows$ | async; track row) {\n  <div class=\"o-list-skeleton-item\">\n    <div class=\"o-list-skeleton-item-first-section o-flex-row o-layout-align-start-center o-flex-fill\">\n      <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" appearance=\"circle\"\n      [theme]=\"{ width: '50px', height: '50px' }\"></ngx-skeleton-loader>\n      <div class=\"o-flex o-flex-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    <div class=\"o-list-skeleton-item-second-section o-flex-column\">\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    </div>\n  </div>\n}\n", styles: [".o-list-skeleton{height:100%;width:100%;overflow:hidden}.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: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OListSkeletonComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [AsyncPipe, NgxSkeletonLoaderModule], selector: 'o-list-skeleton', encapsulation: ViewEncapsulation.None, host: {
                        '[class.o-list-skeleton]': 'true'
                    }, template: "@for (row of rows$ | async; track row) {\n  <div class=\"o-list-skeleton-item\">\n    <div class=\"o-list-skeleton-item-first-section o-flex-row o-layout-align-start-center o-flex-fill\">\n      <ngx-skeleton-loader animation=\"{{isDarkMode?'progress-dark':'progress'}}\" appearance=\"circle\"\n      [theme]=\"{ width: '50px', height: '50px' }\"></ngx-skeleton-loader>\n      <div class=\"o-flex o-flex-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    <div class=\"o-list-skeleton-item-second-section o-flex-column\">\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    </div>\n  </div>\n}\n", styles: [".o-list-skeleton{height:100%;width:100%;overflow:hidden}.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"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 