circletone/esm2022/lib/components/molecules/card/card.component.mjs

import { ChangeDetectionStrategy, Component, Input } 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.imageThumbnail = '';
        this.withActions = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: CardComponent, isStandalone: true, selector: "ct-card", inputs: { header: "header", subHeader: "subHeader", title: "title", subTitle: "subTitle", avatar: "avatar", image: "image", imageThumbnail: "imageThumbnail", withActions: "withActions" }, ngImport: i0, template: "<div class=\"flex w-full flex-col rounded-xl bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark\">\n  <div class=\"flex w-full flex-row items-stretch rounded-md\">\n    <div class=\"flex w-full grow flex-row items-center gap-4 px-4 py-2\">\n      <div class=\"items-center\">\n        <ct-avatar [picture]=\"avatar\" [title]=\"title\" />\n      </div>\n      <div class=\"flex grow flex-col\">\n        @if (header) {\n          <span class=\"grow text-lg font-semibold\" [innerHTML]=\"header\"></span>\n        }\n        @if (subHeader) {\n          <span class=\"grow text-sm\" [innerHTML]=\"subHeader\"></span>\n        }\n      </div>\n    </div>\n    <div class=\"flex flex-col justify-between 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  @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\" />\n      <ct-button text=\"test\" type=\"secondary\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: AvatarComponent, selector: "ct-avatar", inputs: ["picture", "title"] }, { kind: "component", type: ButtonComponent, selector: "ct-button", inputs: ["text", "icon", "iconPosition", "fullSize", "size", "type", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-card', standalone: true, imports: [AvatarComponent, ButtonComponent, SafeImagePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex w-full flex-col rounded-xl bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark\">\n  <div class=\"flex w-full flex-row items-stretch rounded-md\">\n    <div class=\"flex w-full grow flex-row items-center gap-4 px-4 py-2\">\n      <div class=\"items-center\">\n        <ct-avatar [picture]=\"avatar\" [title]=\"title\" />\n      </div>\n      <div class=\"flex grow flex-col\">\n        @if (header) {\n          <span class=\"grow text-lg font-semibold\" [innerHTML]=\"header\"></span>\n        }\n        @if (subHeader) {\n          <span class=\"grow text-sm\" [innerHTML]=\"subHeader\"></span>\n        }\n      </div>\n    </div>\n    <div class=\"flex flex-col justify-between 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  @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\" />\n      <ct-button text=\"test\" type=\"secondary\" />\n    </div>\n  }\n</div>\n" }]
        }], propDecorators: { header: [{
                type: Input
            }], subHeader: [{
                type: Input
            }], title: [{
                type: Input
            }], subTitle: [{
                type: Input
            }], avatar: [{
                type: Input
            }], image: [{
                type: Input
            }], imageThumbnail: [{
                type: Input
            }], withActions: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jaXJjbGV0b25lL3NyYy9saWIvY29tcG9uZW50cy9tb2xlY3VsZXMvY2FyZC9jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9jYXJkL2NhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3RFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUN0RSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7O0FBUy9ELE1BQU0sT0FBTyxhQUFhO0lBUDFCO1FBUVcsV0FBTSxHQUFHLEVBQUUsQ0FBQztRQUNaLGNBQVMsR0FBRyxFQUFFLENBQUM7UUFDZixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ1gsYUFBUSxHQUFHLEVBQUUsQ0FBQztRQUNkLFdBQU0sR0FBRyxFQUFFLENBQUM7UUFDWixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ1gsbUJBQWMsR0FBRyxFQUFFLENBQUM7UUFDcEIsZ0JBQVcsR0FBRyxLQUFLLENBQUM7S0FDOUI7OEdBVFksYUFBYTtrR0FBYixhQUFhLCtQQ1oxQix3a0RBd0NBLDRDRGhDWSxlQUFlLG9GQUFFLGVBQWU7OzJGQUkvQixhQUFhO2tCQVB6QixTQUFTOytCQUNFLFNBQVMsY0FDUCxJQUFJLFdBQ1AsQ0FBQyxlQUFlLEVBQUUsZUFBZSxFQUFFLGFBQWEsQ0FBQyxtQkFFekMsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQXZhdGFyQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vYXRvbXMvYXZhdGFyL2F2YXRhci5jb21wb25lbnQnO1xuaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vYXRvbXMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2FmZUltYWdlUGlwZSB9IGZyb20gJy4uLy4uLy4uL3BpcGVzL3NhZmUtaW1hZ2UucGlwZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2N0LWNhcmQnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQXZhdGFyQ29tcG9uZW50LCBCdXR0b25Db21wb25lbnQsIFNhZmVJbWFnZVBpcGVdLFxuICB0ZW1wbGF0ZVVybDogJy4vY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBDYXJkQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaGVhZGVyID0gJyc7XG4gIEBJbnB1dCgpIHN1YkhlYWRlciA9ICcnO1xuICBASW5wdXQoKSB0aXRsZSA9ICcnO1xuICBASW5wdXQoKSBzdWJUaXRsZSA9ICcnO1xuICBASW5wdXQoKSBhdmF0YXIgPSAnJztcbiAgQElucHV0KCkgaW1hZ2UgPSAnJztcbiAgQElucHV0KCkgaW1hZ2VUaHVtYm5haWwgPSAnJztcbiAgQElucHV0KCkgd2l0aEFjdGlvbnMgPSBmYWxzZTtcbn1cbiIsIjxkaXYgY2xhc3M9XCJmbGV4IHctZnVsbCBmbGV4LWNvbCByb3VuZGVkLXhsIGJnLXN1cmZhY2UgdGV4dC1vbi1zdXJmYWNlIGRhcms6Ymctc3VyZmFjZS1kYXJrIGRhcms6dGV4dC1vbi1zdXJmYWNlLWRhcmtcIj5cbiAgPGRpdiBjbGFzcz1cImZsZXggdy1mdWxsIGZsZXgtcm93IGl0ZW1zLXN0cmV0Y2ggcm91bmRlZC1tZFwiPlxuICAgIDxkaXYgY2xhc3M9XCJmbGV4IHctZnVsbCBncm93IGZsZXgtcm93IGl0ZW1zLWNlbnRlciBnYXAtNCBweC00IHB5LTJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJpdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgPGN0LWF2YXRhciBbcGljdHVyZV09XCJhdmF0YXJcIiBbdGl0bGVdPVwidGl0bGVcIiAvPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiZmxleCBncm93IGZsZXgtY29sXCI+XG4gICAgICAgIEBpZiAoaGVhZGVyKSB7XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJncm93IHRleHQtbGcgZm9udC1zZW1pYm9sZFwiIFtpbm5lckhUTUxdPVwiaGVhZGVyXCI+PC9zcGFuPlxuICAgICAgICB9XG4gICAgICAgIEBpZiAoc3ViSGVhZGVyKSB7XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJncm93IHRleHQtc21cIiBbaW5uZXJIVE1MXT1cInN1YkhlYWRlclwiPjwvc3Bhbj5cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC1jb2wganVzdGlmeS1iZXR3ZWVuIHJvdW5kZWQtci14bFwiPlxuICAgICAgQGlmIChpbWFnZVRodW1ibmFpbCkge1xuICAgICAgICA8aW1nIGNsYXNzPVwiZmxleCBtYXgtdy0yNCByb3VuZGVkLXRyLXhsIG9iamVjdC1jb3ZlclwiIFtzcmNdPVwiaW1hZ2VUaHVtYm5haWxcIiBbYWx0XT1cInRpdGxlXCIgLz5cbiAgICAgIH0gQGVsc2Uge1xuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbaGVhZGVyLWV4dHJhXVwiIC8+XG4gICAgICB9XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICBAaWYgKGltYWdlKSB7XG4gICAgPGltZyBjbGFzcz1cInNpemUtZnVsbCBvYmplY3QtY292ZXJcIiBbc3JjXT1cImltYWdlXCIgW2FsdF09XCJ0aXRsZVwiIC8+XG4gIH1cbiAgQGlmICh0aXRsZSB8fCBzdWJUaXRsZSkge1xuICAgIDxkaXYgY2xhc3M9XCJmbGV4IHctZnVsbCBmbGV4LWNvbCBweC00IHB5LTJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJ0ZXh0LXhsIGZvbnQtYm9sZFwiIFtpbm5lckhUTUxdPVwidGl0bGVcIj48L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi0yIHRleHQtYmFzZSBmb250LXNlbWlib2xkXCIgW2lubmVySFRNTF09XCJzdWJUaXRsZVwiPjwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImZsZXggdy1maXQgZ3Jvdy0wXCI+PG5nLWNvbnRlbnQgc2VsZWN0PVwiW2JvZHldXCIgLz48L2Rpdj5cbiAgICA8L2Rpdj5cbiAgfVxuICBAaWYgKHdpdGhBY3Rpb25zKSB7XG4gICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC1yb3cganVzdGlmeS1lbmQgZ2FwLTIgcHgtNCBweS0yXCI+XG4gICAgICA8Y3QtYnV0dG9uIHRleHQ9XCJ0ZXN0XCIgLz5cbiAgICAgIDxjdC1idXR0b24gdGV4dD1cInRlc3RcIiB0eXBlPVwic2Vjb25kYXJ5XCIgLz5cbiAgICA8L2Rpdj5cbiAgfVxuPC9kaXY+XG4iXX0=