import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { AvatarComponent } from '../../atoms/avatar/avatar.component';
import { ButtonComponent } from '../../atoms/button/button.component';
import { SafeImagePipe } from '../../../pipes/safe-image.pipe';
import * as i0 from "@angular/core";
export class CardComponent {
    constructor() {
        this.header = '';
        this.subHeader = '';
        this.title = '';
        this.subTitle = '';
        this.avatar = '';
        this.image = '';
        this.disposition = 'vertical';
        this.imageThumbnail = '';
        this.withActions = false;
        this.acceptButton = new EventEmitter();
        this.cancelButton = new EventEmitter();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CardComponent, isStandalone: true, selector: "ct-card", inputs: { header: "header", subHeader: "subHeader", title: "title", subTitle: "subTitle", avatar: "avatar", image: "image", disposition: "disposition", imageThumbnail: "imageThumbnail", withActions: "withActions" }, outputs: { acceptButton: "acceptButton", cancelButton: "cancelButton" }, ngImport: i0, template: "@if (disposition === 'vertical') {\n  <div\n    class=\"flex w-full flex-col rounded-xl bg-surface font-primary text-on-surface dark:bg-surface-dark dark:text-on-surface-dark\">\n    <div class=\"flex flex-row items-center gap-4 px-4 py-2\">\n      <ct-avatar [picture]=\"avatar\" [title]=\"title\" />\n      <div class=\"w-fit flex-1\">\n        <div class=\"flex flex-col overflow-hidden\">\n          @if (header) {\n            <span class=\"overflow-hidden text-ellipsis text-lg font-semibold\" [innerHTML]=\"header\"></span>\n          }\n          @if (subHeader) {\n            <span class=\"overflow-hidden text-ellipsis text-sm\" [innerHTML]=\"subHeader\"></span>\n          }\n        </div>\n      </div>\n      <div class=\"relative flex-none rounded-r-xl\">\n        @if (imageThumbnail) {\n          <img class=\"flex max-w-24 rounded-tr-xl object-cover\" [src]=\"imageThumbnail\" [alt]=\"title\" />\n        } @else {\n          <ng-content select=\"[header-extra]\" />\n        }\n      </div>\n    </div>\n    @if (image) {\n      <img class=\"size-full object-cover\" [src]=\"image\" [alt]=\"title\" />\n    }\n    <ng-content select=\"[image-vertical]\" />\n    @if (title || subTitle) {\n      <div class=\"flex w-full flex-col px-4 py-2\">\n        <div class=\"text-xl font-bold\" [innerHTML]=\"title\"></div>\n        <div class=\"mb-2 text-base font-semibold\" [innerHTML]=\"subTitle\"></div>\n        <div class=\"flex w-fit grow-0\"><ng-content select=\"[body]\" /></div>\n      </div>\n    }\n    @if (withActions) {\n      <div class=\"flex flex-row justify-end gap-2 px-4 py-2\">\n        <ct-button text=\"test\" variant=\"flat\" (click)=\"acceptButton.emit()\" />\n        <ct-button text=\"test\" variant=\"flat\" type=\"neutral\" (click)=\"cancelButton.emit()\" />\n      </div>\n    }\n  </div>\n} @else {\n  <div\n    class=\"flex w-full flex-row items-stretch rounded-xl bg-surface font-primary text-on-surface dark:bg-surface-dark dark:text-on-surface-dark\">\n    <div class=\"h-full w-3/4 flex-none\">\n      @if (image) {\n        <img class=\"size-full rounded-l-xl object-cover\" [src]=\"image\" [alt]=\"title\" />\n      }\n      <ng-content select=\"[image-horizontal]\" />\n    </div>\n    <div class=\"flex w-1/4 flex-col justify-between\">\n      <div class=\"flex shrink-0 flex-row items-center gap-4 px-4 py-2\">\n        <div class=\"flex-none\">\n          <ct-avatar [picture]=\"avatar\" [title]=\"title\" />\n        </div>\n        <div class=\"flex w-fit flex-1 flex-col overflow-hidden\">\n          @if (header) {\n            <span class=\"overflow-hidden text-lg font-semibold\" [innerHTML]=\"header\"></span>\n          }\n          @if (subHeader) {\n            <span class=\"overflow-hidden text-ellipsis text-sm\" [innerHTML]=\"subHeader\"></span>\n          }\n        </div>\n      </div>\n      <div class=\"flex-auto overflow-y-auto\">\n        <ng-content select=\"[body-horizontal]\" />\n      </div>\n      <article class=\"flex-none flex-col gap-2\">\n        <p class=\"text-wrap px-4 text-xl font-bold\" [innerHTML]=\"title\"></p>\n        <p class=\"mb-2 text-wrap px-4 text-base font-semibold\" [innerHTML]=\"subTitle\"></p>\n        <ng-content select=\"[footer-horizontal]\" />\n      </article>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: AvatarComponent, selector: "ct-avatar", inputs: ["picture", "title", "size", "imageType"] }, { kind: "component", type: ButtonComponent, selector: "ct-button", inputs: ["text", "icon", "iconPosition", "role", "disabled", "fullSize", "size", "type", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-card', standalone: true, imports: [AvatarComponent, ButtonComponent, SafeImagePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (disposition === 'vertical') {\n  <div\n    class=\"flex w-full flex-col rounded-xl bg-surface font-primary text-on-surface dark:bg-surface-dark dark:text-on-surface-dark\">\n    <div class=\"flex flex-row items-center gap-4 px-4 py-2\">\n      <ct-avatar [picture]=\"avatar\" [title]=\"title\" />\n      <div class=\"w-fit flex-1\">\n        <div class=\"flex flex-col overflow-hidden\">\n          @if (header) {\n            <span class=\"overflow-hidden text-ellipsis text-lg font-semibold\" [innerHTML]=\"header\"></span>\n          }\n          @if (subHeader) {\n            <span class=\"overflow-hidden text-ellipsis text-sm\" [innerHTML]=\"subHeader\"></span>\n          }\n        </div>\n      </div>\n      <div class=\"relative flex-none rounded-r-xl\">\n        @if (imageThumbnail) {\n          <img class=\"flex max-w-24 rounded-tr-xl object-cover\" [src]=\"imageThumbnail\" [alt]=\"title\" />\n        } @else {\n          <ng-content select=\"[header-extra]\" />\n        }\n      </div>\n    </div>\n    @if (image) {\n      <img class=\"size-full object-cover\" [src]=\"image\" [alt]=\"title\" />\n    }\n    <ng-content select=\"[image-vertical]\" />\n    @if (title || subTitle) {\n      <div class=\"flex w-full flex-col px-4 py-2\">\n        <div class=\"text-xl font-bold\" [innerHTML]=\"title\"></div>\n        <div class=\"mb-2 text-base font-semibold\" [innerHTML]=\"subTitle\"></div>\n        <div class=\"flex w-fit grow-0\"><ng-content select=\"[body]\" /></div>\n      </div>\n    }\n    @if (withActions) {\n      <div class=\"flex flex-row justify-end gap-2 px-4 py-2\">\n        <ct-button text=\"test\" variant=\"flat\" (click)=\"acceptButton.emit()\" />\n        <ct-button text=\"test\" variant=\"flat\" type=\"neutral\" (click)=\"cancelButton.emit()\" />\n      </div>\n    }\n  </div>\n} @else {\n  <div\n    class=\"flex w-full flex-row items-stretch rounded-xl bg-surface font-primary text-on-surface dark:bg-surface-dark dark:text-on-surface-dark\">\n    <div class=\"h-full w-3/4 flex-none\">\n      @if (image) {\n        <img class=\"size-full rounded-l-xl object-cover\" [src]=\"image\" [alt]=\"title\" />\n      }\n      <ng-content select=\"[image-horizontal]\" />\n    </div>\n    <div class=\"flex w-1/4 flex-col justify-between\">\n      <div class=\"flex shrink-0 flex-row items-center gap-4 px-4 py-2\">\n        <div class=\"flex-none\">\n          <ct-avatar [picture]=\"avatar\" [title]=\"title\" />\n        </div>\n        <div class=\"flex w-fit flex-1 flex-col overflow-hidden\">\n          @if (header) {\n            <span class=\"overflow-hidden text-lg font-semibold\" [innerHTML]=\"header\"></span>\n          }\n          @if (subHeader) {\n            <span class=\"overflow-hidden text-ellipsis text-sm\" [innerHTML]=\"subHeader\"></span>\n          }\n        </div>\n      </div>\n      <div class=\"flex-auto overflow-y-auto\">\n        <ng-content select=\"[body-horizontal]\" />\n      </div>\n      <article class=\"flex-none flex-col gap-2\">\n        <p class=\"text-wrap px-4 text-xl font-bold\" [innerHTML]=\"title\"></p>\n        <p class=\"mb-2 text-wrap px-4 text-base font-semibold\" [innerHTML]=\"subTitle\"></p>\n        <ng-content select=\"[footer-horizontal]\" />\n      </article>\n    </div>\n  </div>\n}\n" }]
        }], propDecorators: { header: [{
                type: Input
            }], subHeader: [{
                type: Input
            }], title: [{
                type: Input
            }], subTitle: [{
                type: Input
            }], avatar: [{
                type: Input
            }], image: [{
                type: Input
            }], disposition: [{
                type: Input
            }], imageThumbnail: [{
                type: Input
            }], withActions: [{
                type: Input
            }], acceptButton: [{
                type: Output
            }], cancelButton: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 