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

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: "17.3.5", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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: "17.3.5", 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jaXJjbGV0b25lL3NyYy9saWIvY29tcG9uZW50cy9tb2xlY3VsZXMvY2FyZC9jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9jYXJkL2NhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDdEUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3RFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7QUFVL0QsTUFBTSxPQUFPLGFBQWE7SUFQMUI7UUFRVyxXQUFNLEdBQUcsRUFBRSxDQUFDO1FBQ1osY0FBUyxHQUFHLEVBQUUsQ0FBQztRQUNmLFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxhQUFRLEdBQUcsRUFBRSxDQUFDO1FBQ2QsV0FBTSxHQUFHLEVBQUUsQ0FBQztRQUNaLFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxnQkFBVyxHQUF5QixVQUFVLENBQUM7UUFDL0MsbUJBQWMsR0FBRyxFQUFFLENBQUM7UUFDcEIsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFDbkIsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ3hDLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQUNuRDs4R0FaWSxhQUFhO2tHQUFiLGFBQWEsb1dDYjFCLHV1R0EyRUEsNENEbEVZLGVBQWUseUdBQUUsZUFBZTs7MkZBSS9CLGFBQWE7a0JBUHpCLFNBQVM7K0JBQ0UsU0FBUyxjQUNQLElBQUksV0FDUCxDQUFDLGVBQWUsRUFBRSxlQUFlLEVBQUUsYUFBYSxDQUFDLG1CQUV6Qyx1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNJLFlBQVk7c0JBQXJCLE1BQU07Z0JBQ0csWUFBWTtzQkFBckIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQXZhdGFyQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vYXRvbXMvYXZhdGFyL2F2YXRhci5jb21wb25lbnQnO1xuaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vYXRvbXMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2FmZUltYWdlUGlwZSB9IGZyb20gJy4uLy4uLy4uL3BpcGVzL3NhZmUtaW1hZ2UucGlwZSc7XG5pbXBvcnQgeyBDb21wb25lbnREaXNwb3NpdGlvbiB9IGZyb20gJy4uLy4uLy4uL21vZGVsL2NvbXBvbmVudHMvY29tcG9uZW50LWRpc3Bvc2l0aW9uLmVudW0nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjdC1jYXJkJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0F2YXRhckNvbXBvbmVudCwgQnV0dG9uQ29tcG9uZW50LCBTYWZlSW1hZ2VQaXBlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2NhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQ2FyZENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGhlYWRlciA9ICcnO1xuICBASW5wdXQoKSBzdWJIZWFkZXIgPSAnJztcbiAgQElucHV0KCkgdGl0bGUgPSAnJztcbiAgQElucHV0KCkgc3ViVGl0bGUgPSAnJztcbiAgQElucHV0KCkgYXZhdGFyID0gJyc7XG4gIEBJbnB1dCgpIGltYWdlID0gJyc7XG4gIEBJbnB1dCgpIGRpc3Bvc2l0aW9uOiBDb21wb25lbnREaXNwb3NpdGlvbiA9ICd2ZXJ0aWNhbCc7XG4gIEBJbnB1dCgpIGltYWdlVGh1bWJuYWlsID0gJyc7XG4gIEBJbnB1dCgpIHdpdGhBY3Rpb25zID0gZmFsc2U7XG4gIEBPdXRwdXQoKSBhY2NlcHRCdXR0b24gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIEBPdXRwdXQoKSBjYW5jZWxCdXR0b24gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG59XG4iLCJAaWYgKGRpc3Bvc2l0aW9uID09PSAndmVydGljYWwnKSB7XG4gIDxkaXZcbiAgICBjbGFzcz1cImZsZXggdy1mdWxsIGZsZXgtY29sIHJvdW5kZWQteGwgYmctc3VyZmFjZSBmb250LXByaW1hcnkgdGV4dC1vbi1zdXJmYWNlIGRhcms6Ymctc3VyZmFjZS1kYXJrIGRhcms6dGV4dC1vbi1zdXJmYWNlLWRhcmtcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LXJvdyBpdGVtcy1jZW50ZXIgZ2FwLTQgcHgtNCBweS0yXCI+XG4gICAgICA8Y3QtYXZhdGFyIFtwaWN0dXJlXT1cImF2YXRhclwiIFt0aXRsZV09XCJ0aXRsZVwiIC8+XG4gICAgICA8ZGl2IGNsYXNzPVwidy1maXQgZmxleC0xXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGZsZXgtY29sIG92ZXJmbG93LWhpZGRlblwiPlxuICAgICAgICAgIEBpZiAoaGVhZGVyKSB7XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cIm92ZXJmbG93LWhpZGRlbiB0ZXh0LWVsbGlwc2lzIHRleHQtbGcgZm9udC1zZW1pYm9sZFwiIFtpbm5lckhUTUxdPVwiaGVhZGVyXCI+PC9zcGFuPlxuICAgICAgICAgIH1cbiAgICAgICAgICBAaWYgKHN1YkhlYWRlcikge1xuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJvdmVyZmxvdy1oaWRkZW4gdGV4dC1lbGxpcHNpcyB0ZXh0LXNtXCIgW2lubmVySFRNTF09XCJzdWJIZWFkZXJcIj48L3NwYW4+XG4gICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInJlbGF0aXZlIGZsZXgtbm9uZSByb3VuZGVkLXIteGxcIj5cbiAgICAgICAgQGlmIChpbWFnZVRodW1ibmFpbCkge1xuICAgICAgICAgIDxpbWcgY2xhc3M9XCJmbGV4IG1heC13LTI0IHJvdW5kZWQtdHIteGwgb2JqZWN0LWNvdmVyXCIgW3NyY109XCJpbWFnZVRodW1ibmFpbFwiIFthbHRdPVwidGl0bGVcIiAvPlxuICAgICAgICB9IEBlbHNlIHtcbiAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbaGVhZGVyLWV4dHJhXVwiIC8+XG4gICAgICAgIH1cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIEBpZiAoaW1hZ2UpIHtcbiAgICAgIDxpbWcgY2xhc3M9XCJzaXplLWZ1bGwgb2JqZWN0LWNvdmVyXCIgW3NyY109XCJpbWFnZVwiIFthbHRdPVwidGl0bGVcIiAvPlxuICAgIH1cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbaW1hZ2UtdmVydGljYWxdXCIgLz5cbiAgICBAaWYgKHRpdGxlIHx8IHN1YlRpdGxlKSB7XG4gICAgICA8ZGl2IGNsYXNzPVwiZmxleCB3LWZ1bGwgZmxleC1jb2wgcHgtNCBweS0yXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ0ZXh0LXhsIGZvbnQtYm9sZFwiIFtpbm5lckhUTUxdPVwidGl0bGVcIj48L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm1iLTIgdGV4dC1iYXNlIGZvbnQtc2VtaWJvbGRcIiBbaW5uZXJIVE1MXT1cInN1YlRpdGxlXCI+PC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IHctZml0IGdyb3ctMFwiPjxuZy1jb250ZW50IHNlbGVjdD1cIltib2R5XVwiIC8+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gICAgQGlmICh3aXRoQWN0aW9ucykge1xuICAgICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC1yb3cganVzdGlmeS1lbmQgZ2FwLTIgcHgtNCBweS0yXCI+XG4gICAgICAgIDxjdC1idXR0b24gdGV4dD1cInRlc3RcIiB2YXJpYW50PVwiZmxhdFwiIChjbGljayk9XCJhY2NlcHRCdXR0b24uZW1pdCgpXCIgLz5cbiAgICAgICAgPGN0LWJ1dHRvbiB0ZXh0PVwidGVzdFwiIHZhcmlhbnQ9XCJmbGF0XCIgdHlwZT1cIm5ldXRyYWxcIiAoY2xpY2spPVwiY2FuY2VsQnV0dG9uLmVtaXQoKVwiIC8+XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gIDwvZGl2PlxufSBAZWxzZSB7XG4gIDxkaXZcbiAgICBjbGFzcz1cImZsZXggdy1mdWxsIGZsZXgtcm93IGl0ZW1zLXN0cmV0Y2ggcm91bmRlZC14bCBiZy1zdXJmYWNlIGZvbnQtcHJpbWFyeSB0ZXh0LW9uLXN1cmZhY2UgZGFyazpiZy1zdXJmYWNlLWRhcmsgZGFyazp0ZXh0LW9uLXN1cmZhY2UtZGFya1wiPlxuICAgIDxkaXYgY2xhc3M9XCJoLWZ1bGwgdy0zLzQgZmxleC1ub25lXCI+XG4gICAgICBAaWYgKGltYWdlKSB7XG4gICAgICAgIDxpbWcgY2xhc3M9XCJzaXplLWZ1bGwgcm91bmRlZC1sLXhsIG9iamVjdC1jb3ZlclwiIFtzcmNdPVwiaW1hZ2VcIiBbYWx0XT1cInRpdGxlXCIgLz5cbiAgICAgIH1cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltpbWFnZS1ob3Jpem9udGFsXVwiIC8+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImZsZXggdy0xLzQgZmxleC1jb2wganVzdGlmeS1iZXR3ZWVuXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiZmxleCBzaHJpbmstMCBmbGV4LXJvdyBpdGVtcy1jZW50ZXIgZ2FwLTQgcHgtNCBweS0yXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4LW5vbmVcIj5cbiAgICAgICAgICA8Y3QtYXZhdGFyIFtwaWN0dXJlXT1cImF2YXRhclwiIFt0aXRsZV09XCJ0aXRsZVwiIC8+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCB3LWZpdCBmbGV4LTEgZmxleC1jb2wgb3ZlcmZsb3ctaGlkZGVuXCI+XG4gICAgICAgICAgQGlmIChoZWFkZXIpIHtcbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwib3ZlcmZsb3ctaGlkZGVuIHRleHQtbGcgZm9udC1zZW1pYm9sZFwiIFtpbm5lckhUTUxdPVwiaGVhZGVyXCI+PC9zcGFuPlxuICAgICAgICAgIH1cbiAgICAgICAgICBAaWYgKHN1YkhlYWRlcikge1xuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJvdmVyZmxvdy1oaWRkZW4gdGV4dC1lbGxpcHNpcyB0ZXh0LXNtXCIgW2lubmVySFRNTF09XCJzdWJIZWFkZXJcIj48L3NwYW4+XG4gICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImZsZXgtYXV0byBvdmVyZmxvdy15LWF1dG9cIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2JvZHktaG9yaXpvbnRhbF1cIiAvPlxuICAgICAgPC9kaXY+XG4gICAgICA8YXJ0aWNsZSBjbGFzcz1cImZsZXgtbm9uZSBmbGV4LWNvbCBnYXAtMlwiPlxuICAgICAgICA8cCBjbGFzcz1cInRleHQtd3JhcCBweC00IHRleHQteGwgZm9udC1ib2xkXCIgW2lubmVySFRNTF09XCJ0aXRsZVwiPjwvcD5cbiAgICAgICAgPHAgY2xhc3M9XCJtYi0yIHRleHQtd3JhcCBweC00IHRleHQtYmFzZSBmb250LXNlbWlib2xkXCIgW2lubmVySFRNTF09XCJzdWJUaXRsZVwiPjwvcD5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2Zvb3Rlci1ob3Jpem9udGFsXVwiIC8+XG4gICAgICA8L2FydGljbGU+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxufVxuIl19