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      <div class=\"flex-none\">\n        <ct-avatar [picture]=\"avatar\" [title]=\"title\" />\n      </div>\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 rounded-xl bg-surface font-primary text-on-surface dark:bg-surface-dark dark:text-on-surface-dark\">\n    <div class=\"flex w-3/4\">\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 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 w-fit grow\">\n        <ng-content select=\"[body-horizontal]\" />\n      </div>\n      <article class=\"flex flex-col px-4 py-2\">\n        <p class=\"text-wrap text-xl font-bold\" [innerHTML]=\"title\"></p>\n        <p class=\"mb-2 text-wrap text-base font-semibold\"></p>\n      </article>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: AvatarComponent, selector: "ct-avatar", inputs: ["picture", "title"] }, { 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      <div class=\"flex-none\">\n        <ct-avatar [picture]=\"avatar\" [title]=\"title\" />\n      </div>\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 rounded-xl bg-surface font-primary text-on-surface dark:bg-surface-dark dark:text-on-surface-dark\">\n    <div class=\"flex w-3/4\">\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 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 w-fit grow\">\n        <ng-content select=\"[body-horizontal]\" />\n      </div>\n      <article class=\"flex flex-col px-4 py-2\">\n        <p class=\"text-wrap text-xl font-bold\" [innerHTML]=\"title\"></p>\n        <p class=\"mb-2 text-wrap text-base font-semibold\"></p>\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jaXJjbGV0b25lL3NyYy9saWIvY29tcG9uZW50cy9tb2xlY3VsZXMvY2FyZC9jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9jYXJkL2NhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDdEUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3RFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7QUFVL0QsTUFBTSxPQUFPLGFBQWE7SUFQMUI7UUFRVyxXQUFNLEdBQUcsRUFBRSxDQUFDO1FBQ1osY0FBUyxHQUFHLEVBQUUsQ0FBQztRQUNmLFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxhQUFRLEdBQUcsRUFBRSxDQUFDO1FBQ2QsV0FBTSxHQUFHLEVBQUUsQ0FBQztRQUNaLFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxnQkFBVyxHQUF5QixVQUFVLENBQUM7UUFDL0MsbUJBQWMsR0FBRyxFQUFFLENBQUM7UUFDcEIsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFDbkIsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ3hDLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQUNuRDs4R0FaWSxhQUFhO2tHQUFiLGFBQWEsb1dDYjFCLGdwR0E0RUEsNENEbkVZLGVBQWUsb0ZBQUUsZUFBZTs7MkZBSS9CLGFBQWE7a0JBUHpCLFNBQVM7K0JBQ0UsU0FBUyxjQUNQLElBQUksV0FDUCxDQUFDLGVBQWUsRUFBRSxlQUFlLEVBQUUsYUFBYSxDQUFDLG1CQUV6Qyx1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNJLFlBQVk7c0JBQXJCLE1BQU07Z0JBQ0csWUFBWTtzQkFBckIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQXZhdGFyQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vYXRvbXMvYXZhdGFyL2F2YXRhci5jb21wb25lbnQnO1xuaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vYXRvbXMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2FmZUltYWdlUGlwZSB9IGZyb20gJy4uLy4uLy4uL3BpcGVzL3NhZmUtaW1hZ2UucGlwZSc7XG5pbXBvcnQgeyBDb21wb25lbnREaXNwb3NpdGlvbiB9IGZyb20gJy4uLy4uLy4uL21vZGVsL2NvbXBvbmVudHMvY29tcG9uZW50LWRpc3Bvc2l0aW9uLmVudW0nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjdC1jYXJkJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0F2YXRhckNvbXBvbmVudCwgQnV0dG9uQ29tcG9uZW50LCBTYWZlSW1hZ2VQaXBlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2NhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQ2FyZENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGhlYWRlciA9ICcnO1xuICBASW5wdXQoKSBzdWJIZWFkZXIgPSAnJztcbiAgQElucHV0KCkgdGl0bGUgPSAnJztcbiAgQElucHV0KCkgc3ViVGl0bGUgPSAnJztcbiAgQElucHV0KCkgYXZhdGFyID0gJyc7XG4gIEBJbnB1dCgpIGltYWdlID0gJyc7XG4gIEBJbnB1dCgpIGRpc3Bvc2l0aW9uOiBDb21wb25lbnREaXNwb3NpdGlvbiA9ICd2ZXJ0aWNhbCc7XG4gIEBJbnB1dCgpIGltYWdlVGh1bWJuYWlsID0gJyc7XG4gIEBJbnB1dCgpIHdpdGhBY3Rpb25zID0gZmFsc2U7XG4gIEBPdXRwdXQoKSBhY2NlcHRCdXR0b24gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIEBPdXRwdXQoKSBjYW5jZWxCdXR0b24gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG59XG4iLCJAaWYgKGRpc3Bvc2l0aW9uID09PSAndmVydGljYWwnKSB7XG4gIDxkaXZcbiAgICBjbGFzcz1cImZsZXggdy1mdWxsIGZsZXgtY29sIHJvdW5kZWQteGwgYmctc3VyZmFjZSBmb250LXByaW1hcnkgdGV4dC1vbi1zdXJmYWNlIGRhcms6Ymctc3VyZmFjZS1kYXJrIGRhcms6dGV4dC1vbi1zdXJmYWNlLWRhcmtcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LXJvdyBpdGVtcy1jZW50ZXIgZ2FwLTQgcHgtNCBweS0yXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiZmxleC1ub25lXCI+XG4gICAgICAgIDxjdC1hdmF0YXIgW3BpY3R1cmVdPVwiYXZhdGFyXCIgW3RpdGxlXT1cInRpdGxlXCIgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInctZml0IGZsZXgtMVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LWNvbCBvdmVyZmxvdy1oaWRkZW5cIj5cbiAgICAgICAgICBAaWYgKGhlYWRlcikge1xuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJvdmVyZmxvdy1oaWRkZW4gdGV4dC1lbGxpcHNpcyB0ZXh0LWxnIGZvbnQtc2VtaWJvbGRcIiBbaW5uZXJIVE1MXT1cImhlYWRlclwiPjwvc3Bhbj5cbiAgICAgICAgICB9XG4gICAgICAgICAgQGlmIChzdWJIZWFkZXIpIHtcbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwib3ZlcmZsb3ctaGlkZGVuIHRleHQtZWxsaXBzaXMgdGV4dC1zbVwiIFtpbm5lckhUTUxdPVwic3ViSGVhZGVyXCI+PC9zcGFuPlxuICAgICAgICAgIH1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJyZWxhdGl2ZSBmbGV4LW5vbmUgcm91bmRlZC1yLXhsXCI+XG4gICAgICAgIEBpZiAoaW1hZ2VUaHVtYm5haWwpIHtcbiAgICAgICAgICA8aW1nIGNsYXNzPVwiZmxleCBtYXgtdy0yNCByb3VuZGVkLXRyLXhsIG9iamVjdC1jb3ZlclwiIFtzcmNdPVwiaW1hZ2VUaHVtYm5haWxcIiBbYWx0XT1cInRpdGxlXCIgLz5cbiAgICAgICAgfSBAZWxzZSB7XG4gICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2hlYWRlci1leHRyYV1cIiAvPlxuICAgICAgICB9XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICBAaWYgKGltYWdlKSB7XG4gICAgICA8aW1nIGNsYXNzPVwic2l6ZS1mdWxsIG9iamVjdC1jb3ZlclwiIFtzcmNdPVwiaW1hZ2VcIiBbYWx0XT1cInRpdGxlXCIgLz5cbiAgICB9XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2ltYWdlLXZlcnRpY2FsXVwiIC8+XG4gICAgQGlmICh0aXRsZSB8fCBzdWJUaXRsZSkge1xuICAgICAgPGRpdiBjbGFzcz1cImZsZXggdy1mdWxsIGZsZXgtY29sIHB4LTQgcHktMlwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwidGV4dC14bCBmb250LWJvbGRcIiBbaW5uZXJIVE1MXT1cInRpdGxlXCI+PC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJtYi0yIHRleHQtYmFzZSBmb250LXNlbWlib2xkXCIgW2lubmVySFRNTF09XCJzdWJUaXRsZVwiPjwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCB3LWZpdCBncm93LTBcIj48bmctY29udGVudCBzZWxlY3Q9XCJbYm9keV1cIiAvPjwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgfVxuICAgIEBpZiAod2l0aEFjdGlvbnMpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGZsZXgtcm93IGp1c3RpZnktZW5kIGdhcC0yIHB4LTQgcHktMlwiPlxuICAgICAgICA8Y3QtYnV0dG9uIHRleHQ9XCJ0ZXN0XCIgdmFyaWFudD1cImZsYXRcIiAoY2xpY2spPVwiYWNjZXB0QnV0dG9uLmVtaXQoKVwiIC8+XG4gICAgICAgIDxjdC1idXR0b24gdGV4dD1cInRlc3RcIiB2YXJpYW50PVwiZmxhdFwiIHR5cGU9XCJuZXV0cmFsXCIgKGNsaWNrKT1cImNhbmNlbEJ1dHRvbi5lbWl0KClcIiAvPlxuICAgICAgPC9kaXY+XG4gICAgfVxuICA8L2Rpdj5cbn0gQGVsc2Uge1xuICA8ZGl2XG4gICAgY2xhc3M9XCJmbGV4IHctZnVsbCBmbGV4LXJvdyByb3VuZGVkLXhsIGJnLXN1cmZhY2UgZm9udC1wcmltYXJ5IHRleHQtb24tc3VyZmFjZSBkYXJrOmJnLXN1cmZhY2UtZGFyayBkYXJrOnRleHQtb24tc3VyZmFjZS1kYXJrXCI+XG4gICAgPGRpdiBjbGFzcz1cImZsZXggdy0zLzRcIj5cbiAgICAgIEBpZiAoaW1hZ2UpIHtcbiAgICAgICAgPGltZyBjbGFzcz1cInNpemUtZnVsbCByb3VuZGVkLWwteGwgb2JqZWN0LWNvdmVyXCIgW3NyY109XCJpbWFnZVwiIFthbHRdPVwidGl0bGVcIiAvPlxuICAgICAgfVxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2ltYWdlLWhvcml6b250YWxdXCIgLz5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiZmxleCB3LTEvNCBmbGV4LWNvbCBqdXN0aWZ5LWJldHdlZW5cIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGZsZXgtcm93IGl0ZW1zLWNlbnRlciBnYXAtNCBweC00IHB5LTJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImZsZXgtbm9uZVwiPlxuICAgICAgICAgIDxjdC1hdmF0YXIgW3BpY3R1cmVdPVwiYXZhdGFyXCIgW3RpdGxlXT1cInRpdGxlXCIgLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IHctZml0IGZsZXgtMSBmbGV4LWNvbCBvdmVyZmxvdy1oaWRkZW5cIj5cbiAgICAgICAgICBAaWYgKGhlYWRlcikge1xuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJvdmVyZmxvdy1oaWRkZW4gdGV4dC1sZyBmb250LXNlbWlib2xkXCIgW2lubmVySFRNTF09XCJoZWFkZXJcIj48L3NwYW4+XG4gICAgICAgICAgfVxuICAgICAgICAgIEBpZiAoc3ViSGVhZGVyKSB7XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cIm92ZXJmbG93LWhpZGRlbiB0ZXh0LWVsbGlwc2lzIHRleHQtc21cIiBbaW5uZXJIVE1MXT1cInN1YkhlYWRlclwiPjwvc3Bhbj5cbiAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiZmxleCB3LWZpdCBncm93XCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltib2R5LWhvcml6b250YWxdXCIgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPGFydGljbGUgY2xhc3M9XCJmbGV4IGZsZXgtY29sIHB4LTQgcHktMlwiPlxuICAgICAgICA8cCBjbGFzcz1cInRleHQtd3JhcCB0ZXh0LXhsIGZvbnQtYm9sZFwiIFtpbm5lckhUTUxdPVwidGl0bGVcIj48L3A+XG4gICAgICAgIDxwIGNsYXNzPVwibWItMiB0ZXh0LXdyYXAgdGV4dC1iYXNlIGZvbnQtc2VtaWJvbGRcIj48L3A+XG4gICAgICA8L2FydGljbGU+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxufVxuIl19