import { booleanAttribute, ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
import { BaseStatesDirective } from '../base-states.directive';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "../base-states.directive";
import * as i2 from "@ionic/angular";
export class EuimSkeletonListItemComponent {
    get cssClasses() {
        return this.getCssClasses();
    }
    constructor(baseStatesDirective) {
        this.baseStatesDirective = baseStatesDirective;
        this.hasAvatar = true;
        this.hasTitle = true;
        this.hasSubtitle = true;
        this.hasMetaLine = true;
        this.isAnimated = true;
        this.titleWidth = '80%';
        this.subTitleWidth = '60%';
        this.metaLineWidth = '40%';
    }
    getCssClasses() {
        return [
            this.avatarType == 'square' ? `euim-skeleton-list-item--${this.avatarType}` : ' ',
            this.baseStatesDirective.getCssClasses('euim-skeleton-list-item'),
        ]
            .join(' ')
            .trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuimSkeletonListItemComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EuimSkeletonListItemComponent, isStandalone: true, selector: "euim-skeleton-list-item", inputs: { hasAvatar: ["hasAvatar", "hasAvatar", booleanAttribute], hasTitle: ["hasTitle", "hasTitle", booleanAttribute], hasSubtitle: ["hasSubtitle", "hasSubtitle", booleanAttribute], hasMetaLine: ["hasMetaLine", "hasMetaLine", booleanAttribute], isAnimated: ["isAnimated", "isAnimated", booleanAttribute], avatarType: "avatarType", separator: "separator", titleWidth: "titleWidth", subTitleWidth: "subTitleWidth", metaLineWidth: "metaLineWidth" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euimSize2XL", "euimSize2XL", "euimSizeL", "euimSizeL"] }], ngImport: i0, template: "<ion-item button [lines]=\"separator\">\n  @if (hasAvatar) {\n    <ion-thumbnail slot=\"start\">\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    </ion-thumbnail>\n  }\n  <ion-label>\n    @if (hasTitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"titleWidth || '80%'\"></ion-skeleton-text>\n    }\n    @if (hasSubtitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"subTitleWidth || '60%'\"></ion-skeleton-text>\n    }\n    @if (hasMetaLine) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"metaLineWidth || '40%'\"></ion-skeleton-text>\n    }\n  </ion-label>\n</ion-item>\n", styles: [".euim-skeleton-list-item ion-label ion-skeleton-text{margin-bottom:var(--eui-s-xs)}.euim-skeleton-list-item ion-thumbnail{width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-skeleton-list-item--size-l ion-thumbnail{width:var(--eui-is-m);height:var(--eui-is-m)}.euim-skeleton-list-item--size-2xl ion-thumbnail{width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-skeleton-list-item ion-thumbnail{--border-radius: 50%}.euim-skeleton-list-item--square ion-thumbnail{--border-radius: 0}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2.IonThumbnail, selector: "ion-thumbnail" }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuimSkeletonListItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'euim-skeleton-list-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euimSize2XL',
                                'euimSizeL',
                            ],
                        },
                    ], standalone: true, imports: [IonicModule, CommonModule], template: "<ion-item button [lines]=\"separator\">\n  @if (hasAvatar) {\n    <ion-thumbnail slot=\"start\">\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    </ion-thumbnail>\n  }\n  <ion-label>\n    @if (hasTitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"titleWidth || '80%'\"></ion-skeleton-text>\n    }\n    @if (hasSubtitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"subTitleWidth || '60%'\"></ion-skeleton-text>\n    }\n    @if (hasMetaLine) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"metaLineWidth || '40%'\"></ion-skeleton-text>\n    }\n  </ion-label>\n</ion-item>\n", styles: [".euim-skeleton-list-item ion-label ion-skeleton-text{margin-bottom:var(--eui-s-xs)}.euim-skeleton-list-item ion-thumbnail{width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-skeleton-list-item--size-l ion-thumbnail{width:var(--eui-is-m);height:var(--eui-is-m)}.euim-skeleton-list-item--size-2xl ion-thumbnail{width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-skeleton-list-item ion-thumbnail{--border-radius: 50%}.euim-skeleton-list-item--square ion-thumbnail{--border-radius: 0}\n"] }]
        }], ctorParameters: () => [{ type: i1.BaseStatesDirective }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], hasAvatar: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasTitle: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasSubtitle: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasMetaLine: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isAnimated: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], avatarType: [{
                type: Input
            }], separator: [{
                type: Input
            }], titleWidth: [{
                type: Input
            }], subTitleWidth: [{
                type: Input
            }], metaLineWidth: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 