import { __decorate, __metadata } from "tslib";
import { Component, ElementRef, EventEmitter, forwardRef, Inject, Injector, Optional, Renderer2, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { BooleanInputConverter } from '../../../../decorators/input-converter';
import { Util } from '../../../../util/util';
import { OListItemComponent } from '../../list-item/o-list-item.component';
import { OListItemCardRenderer } from '../o-list-item-card-renderer.class';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/card";
import * as i2 from "@angular/material/button";
import * as i3 from "@angular/material/icon";
import * as i4 from "../../list-item/o-list-item.component";
export const DEFAULT_INPUTS_O_LIST_ITEM_CARD_IMAGE = [
    'content',
    'avatar',
    'icon',
    'collapsible',
    'collapsed'
];
export const DEFAULT_OUTPUTS_O_LIST_ITEM_CARD_IMAGE = [
    'onIconClick : icon-action'
];
export class OListItemCardImageComponent extends OListItemCardRenderer {
    constructor(elRef, _renderer, _injector, _listItem) {
        super(elRef, _renderer, _injector, _listItem);
        this._collapsible = false;
        this._collapsed = true;
        this.onIconClick = new EventEmitter();
    }
    ngAfterViewInit() {
        this.modifyMatListItemElement();
    }
    onActionIconClick(e) {
        if (Util.isDefined(e)) {
            e.stopPropagation();
        }
        this.onIconClick.emit(e);
    }
    get content() {
        return this._content;
    }
    set content(val) {
        this._content = val;
    }
    get avatar() {
        return this._avatar;
    }
    set avatar(val) {
        this._avatar = val;
    }
    get icon() {
        return this._icon;
    }
    set icon(val) {
        this._icon = val;
    }
    get collapsible() {
        return this._collapsible;
    }
    set collapsible(val) {
        this._collapsible = val;
    }
    get collapsed() {
        return this._collapsed;
    }
    set collapsed(val) {
        this._collapsed = val;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OListItemCardImageComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: forwardRef(() => OListItemComponent), optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: OListItemCardImageComponent, isStandalone: true, selector: "o-list-item-card-image", inputs: { content: "content", avatar: "avatar", icon: "icon", collapsible: "collapsible", collapsed: "collapsed" }, outputs: { onIconClick: "icon-action" }, host: { properties: { "class.o-custom-list-item": "true", "class.o-list-item-card-image": "true" } }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"o-item-card o-flex-column o-layout-align-center-center\" [class.small]=\"compareListHeight('small')\"\n  [class.medium]=\"compareListHeight('medium')\" [class.large]=\"compareListHeight('large')\">\n\n  @if (avatar !== undefined) {\n    <mat-card-header>\n      <img mat-card-avatar src=\"{{ avatar }}\" alt=\"avatar image\">\n      @if (title !== undefined) {\n        <mat-card-title> {{ title }}</mat-card-title>\n      }\n      @if (subtitle !== undefined) {\n        <mat-card-subtitle> {{ subtitle }}</mat-card-subtitle>\n      }\n    </mat-card-header>\n  }\n\n  @if (image !== undefined) {\n    <img mat-card-image src=\"{{ image }}\" [class.exists-action-button]=\"icon !== undefined\" alt=\"card image\">\n  }\n\n  @if (icon !== undefined && compareListHeight('small')) {\n    <button type=\"button\" mat-mini-fab (click)=\"onActionIconClick($event)\"\n      class=\"action-button\">\n      <mat-icon>{{ icon }}</mat-icon>\n    </button>\n  }\n\n  @if (icon !== undefined && (compareListHeight('medium') || compareListHeight('large'))) {\n    <button type=\"button\" mat-fab\n      (click)=\"onActionIconClick($event)\" class=\"action-button\">\n      <mat-icon>{{ icon }}</mat-icon>\n    </button>\n  }\n\n  @if (avatar === undefined && title !== undefined) {\n    <mat-card-title> {{ title }}</mat-card-title>\n  }\n  @if (avatar === undefined && subtitle !== undefined) {\n    <mat-card-subtitle> {{ subtitle }}</mat-card-subtitle>\n  }\n\n  @if (!collapsible) {\n    <mat-card-content>\n      <p>\n        {{ content }}\n      </p>\n    </mat-card-content>\n  }\n\n  <mat-card-actions>\n    @if (action1Text !== undefined) {\n      <button type=\"button\" mat-button (click)=\"onAction1ButtonClick($event)\">{{ action1Text }}</button>\n    }\n    @if (action2Text !== undefined) {\n      <button type=\"button\" mat-button (click)=\"onAction2ButtonClick($event)\">{{ action2Text }}</button>\n    }\n\n    <div class=\"collapse-button-container\">\n      @if (collapsible) {\n        <button type=\"button\" mat-icon-button (click)=\"collapsed = !collapsed\" class=\"collapse-button\">\n          @if (collapsed) {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          }\n          @if (!collapsed) {\n            <mat-icon>keyboard_arrow_up</mat-icon>\n          }\n        </button>\n      }\n    </div>\n  </mat-card-actions>\n\n  @if (collapsible && !collapsed) {\n    <mat-card-content>\n      <p>\n        {{ content }}\n      </p>\n    </mat-card-content>\n  }\n\n</mat-card>\n", styles: [".mat-mdc-list .mat-mdc-list-item.o-card-item.mdc-list-item--with-trailing-meta .mat-mdc-list-item-meta{margin:0;width:100%}.o-list-item-card-image .mat-mdc-card{padding:0 12px}.o-list-item-card-image .mat-mdc-card .mat-card-header .mat-card-title{margin-bottom:12px}.o-list-item-card-image .mat-mdc-card .mat-card-subtitle{margin-bottom:16px}.o-list-item-card-image .mat-mdc-card mat-card-actions,.o-list-item-card-image .mat-mdc-card mat-card-header,.o-list-item-card-image .mat-mdc-card mat-card-subtitle,.o-list-item-card-image .mat-mdc-card mat-card-title{width:100%}.o-list-item-card-image .mat-mdc-card .mat-mdc-card-content{padding:0}.o-list-item-card-image .mat-mdc-card.large{width:100%}.o-list-item-card-image .mat-mdc-card.medium{width:80%;margin-left:auto;margin-right:auto}.o-list-item-card-image .mat-mdc-card.small{width:60%;margin-left:auto;margin-right:auto}.o-list-item-card-image .mat-mdc-card.small img.exists-action-button{margin-bottom:-20px}.o-list-item-card-image .mat-mdc-card:not(.small):not(.medium):not(.large){width:100%}.o-list-item-card-image .mat-mdc-card .action-button{margin-left:auto}.o-list-item-card-image .mat-mdc-card img.exists-action-button{margin-bottom:-28px}.o-list-item-card-image .mat-mdc-card .collapse-button-container{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;position:relative}.o-list-item-card-image .mat-mdc-card .collapse-button-container .collapse-button{margin-left:calc(100% - 40px)}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "directive", type: i1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
__decorate([
    BooleanInputConverter(),
    __metadata("design:type", Boolean)
], OListItemCardImageComponent.prototype, "_collapsible", void 0);
__decorate([
    BooleanInputConverter(),
    __metadata("design:type", Boolean)
], OListItemCardImageComponent.prototype, "_collapsed", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OListItemCardImageComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [MatCardModule, MatButtonModule, MatIconModule], selector: 'o-list-item-card-image', inputs: DEFAULT_INPUTS_O_LIST_ITEM_CARD_IMAGE, outputs: DEFAULT_OUTPUTS_O_LIST_ITEM_CARD_IMAGE, encapsulation: ViewEncapsulation.None, host: {
                        '[class.o-custom-list-item]': 'true',
                        '[class.o-list-item-card-image]': 'true'
                    }, template: "<mat-card class=\"o-item-card o-flex-column o-layout-align-center-center\" [class.small]=\"compareListHeight('small')\"\n  [class.medium]=\"compareListHeight('medium')\" [class.large]=\"compareListHeight('large')\">\n\n  @if (avatar !== undefined) {\n    <mat-card-header>\n      <img mat-card-avatar src=\"{{ avatar }}\" alt=\"avatar image\">\n      @if (title !== undefined) {\n        <mat-card-title> {{ title }}</mat-card-title>\n      }\n      @if (subtitle !== undefined) {\n        <mat-card-subtitle> {{ subtitle }}</mat-card-subtitle>\n      }\n    </mat-card-header>\n  }\n\n  @if (image !== undefined) {\n    <img mat-card-image src=\"{{ image }}\" [class.exists-action-button]=\"icon !== undefined\" alt=\"card image\">\n  }\n\n  @if (icon !== undefined && compareListHeight('small')) {\n    <button type=\"button\" mat-mini-fab (click)=\"onActionIconClick($event)\"\n      class=\"action-button\">\n      <mat-icon>{{ icon }}</mat-icon>\n    </button>\n  }\n\n  @if (icon !== undefined && (compareListHeight('medium') || compareListHeight('large'))) {\n    <button type=\"button\" mat-fab\n      (click)=\"onActionIconClick($event)\" class=\"action-button\">\n      <mat-icon>{{ icon }}</mat-icon>\n    </button>\n  }\n\n  @if (avatar === undefined && title !== undefined) {\n    <mat-card-title> {{ title }}</mat-card-title>\n  }\n  @if (avatar === undefined && subtitle !== undefined) {\n    <mat-card-subtitle> {{ subtitle }}</mat-card-subtitle>\n  }\n\n  @if (!collapsible) {\n    <mat-card-content>\n      <p>\n        {{ content }}\n      </p>\n    </mat-card-content>\n  }\n\n  <mat-card-actions>\n    @if (action1Text !== undefined) {\n      <button type=\"button\" mat-button (click)=\"onAction1ButtonClick($event)\">{{ action1Text }}</button>\n    }\n    @if (action2Text !== undefined) {\n      <button type=\"button\" mat-button (click)=\"onAction2ButtonClick($event)\">{{ action2Text }}</button>\n    }\n\n    <div class=\"collapse-button-container\">\n      @if (collapsible) {\n        <button type=\"button\" mat-icon-button (click)=\"collapsed = !collapsed\" class=\"collapse-button\">\n          @if (collapsed) {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          }\n          @if (!collapsed) {\n            <mat-icon>keyboard_arrow_up</mat-icon>\n          }\n        </button>\n      }\n    </div>\n  </mat-card-actions>\n\n  @if (collapsible && !collapsed) {\n    <mat-card-content>\n      <p>\n        {{ content }}\n      </p>\n    </mat-card-content>\n  }\n\n</mat-card>\n", styles: [".mat-mdc-list .mat-mdc-list-item.o-card-item.mdc-list-item--with-trailing-meta .mat-mdc-list-item-meta{margin:0;width:100%}.o-list-item-card-image .mat-mdc-card{padding:0 12px}.o-list-item-card-image .mat-mdc-card .mat-card-header .mat-card-title{margin-bottom:12px}.o-list-item-card-image .mat-mdc-card .mat-card-subtitle{margin-bottom:16px}.o-list-item-card-image .mat-mdc-card mat-card-actions,.o-list-item-card-image .mat-mdc-card mat-card-header,.o-list-item-card-image .mat-mdc-card mat-card-subtitle,.o-list-item-card-image .mat-mdc-card mat-card-title{width:100%}.o-list-item-card-image .mat-mdc-card .mat-mdc-card-content{padding:0}.o-list-item-card-image .mat-mdc-card.large{width:100%}.o-list-item-card-image .mat-mdc-card.medium{width:80%;margin-left:auto;margin-right:auto}.o-list-item-card-image .mat-mdc-card.small{width:60%;margin-left:auto;margin-right:auto}.o-list-item-card-image .mat-mdc-card.small img.exists-action-button{margin-bottom:-20px}.o-list-item-card-image .mat-mdc-card:not(.small):not(.medium):not(.large){width:100%}.o-list-item-card-image .mat-mdc-card .action-button{margin-left:auto}.o-list-item-card-image .mat-mdc-card img.exists-action-button{margin-bottom:-28px}.o-list-item-card-image .mat-mdc-card .collapse-button-container{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;position:relative}.o-list-item-card-image .mat-mdc-card .collapse-button-container .collapse-button{margin-left:calc(100% - 40px)}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i4.OListItemComponent, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [forwardRef(() => OListItemComponent)]
                }] }], propDecorators: { _collapsible: [], _collapsed: [] } });
//# sourceMappingURL=data:application/json;base64, 