@wizco/fenixds-ngx
Version:
Componentes fenix design system para Angular.
22 lines • 17.8 kB
JavaScript
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class TimelineComponent {
timelineItems = [];
statusToIcon = {
finalized: 'check',
current: '',
waiting: '',
error: 'priority_high',
};
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimelineComponent, isStandalone: true, selector: "wco-timeline", inputs: { timelineItems: "timelineItems" }, ngImport: i0, template: "<div class=\"wco-timeline\">\n <div class=\"wco-timeline-item\" *ngFor=\"let item of timelineItems; let i = index\">\n <div class=\"wco-timeline-item-dot-container\">\n <div class=\"wco-timeline-item-dot-container-inner\">\n <span class=\"wco-timeline-item-dot-number\">\n {{ timelineItems.length - i }}\n </span>\n <div class=\"wco-timeline-item-dot-line-container\">\n <div [className]=\"'wco-timeline-item-dot wco-timeline-item-dot-' + item.status\">\n <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + item.status\"> {{ statusToIcon[item.status] }} </span>\n </div>\n <hr class=\"wco-timeline-item-dot-line\" />\n </div>\n </div>\n </div>\n <div class=\"wco-timeline-item-content-container\">\n <div class=\"wco-timeline-item-content\">\n <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + item.status\"> {{ item.title }} </h4>\n <p *ngIf=\"item.descriptionPre?.text\" [className]=\"item.descriptionPre?.customClass\"> {{ item.descriptionPre?.text }} </p>\n <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + item.status\"> {{ item.description }} </p>\n <p *ngIf=\"item.descriptionPos?.text\" [className]=\"item.descriptionPos?.customClass\"> {{ item.descriptionPos?.text }} </p>\n <button class=\"wco-btn btn-primary btn-link\" *ngIf=\"item.action\" (click)=\"item.action.handler()\" [disabled]=\"item.status === 'waiting'\"> {{item.action.label}} </button>\n </div>\n <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + item.status\"> {{ item.date }} </span>\n </div>\n </div>\n</div>\n", styles: [".wco-timeline{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;margin:20px 0;--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item{width:100%;display:flex;flex-direction:row;gap:10px}.wco-timeline .wco-timeline-item-dot-container{display:flex;flex-direction:column;align-items:center;gap:5px}.wco-timeline .wco-timeline-item-dot-container-inner{height:100%;display:flex;flex-direction:row;gap:5px}.wco-timeline .wco-timeline-item-dot-line-container{display:flex;flex-direction:column;align-items:center}.wco-timeline .wco-timeline-item-dot-line{width:var(--wco-borderwidth-thin);height:100%;background-color:var(--wco-color-neutral-500)}.wco-timeline .wco-timeline-item-dot{min-width:20px;min-height:20px;max-width:20px;max-height:20px;justify-content:center;align-items:center;display:flex;border-radius:var(--wco-radius-circular);background-color:var(--wco-timeline-dot-color)}.wco-timeline .wco-timeline-item-dot-finalized{--wco-timeline-dot-color: var(--wco-color-success-500)}.wco-timeline .wco-timeline-item-dot-current{--wco-timeline-dot-color: var(--wco-color-primary-600)}.wco-timeline .wco-timeline-item-dot-waiting{--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item-dot-error{--wco-timeline-dot-color: var(--wco-color-danger-100)}.wco-timeline .wco-timeline-item-content{flex-direction:column;display:flex;margin-bottom:var(--wco-spacing-xl)}@media (max-width: 900px){.wco-timeline .wco-timeline-item-content{margin-bottom:var(--wco-spacing-xs)}}.wco-timeline .wco-timeline-item-content-container{width:100%;display:grid;grid-template-columns:1fr minmax(200px,250px);grid-template-areas:\". .\";gap:2rem}.wco-timeline .wco-timeline-item-content-title{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-title-font-weight);color:var(--wco-timeline-item-content-title-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-title-finalized{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-current{--wco-timeline-item-content-title-font-weight: 700;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-waiting{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-title-error{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-danger-600)}.wco-timeline .wco-timeline-item-content-description{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-description-font-weight);color:var(--wco-timeline-item-content-description-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-description-finalized,.wco-timeline .wco-timeline-item-content-description-current{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var( --wco-color-neutral-700 )}.wco-timeline .wco-timeline-item-content-description-waiting{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var( --wco-color-neutral-600 )}.wco-timeline .wco-timeline-item-content-description-error{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var( --wco-color-neutral-700 )}.wco-timeline .wco-timeline-item-content-date{font-size:1rem;color:var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-dot-icon{font-size:.8rem;color:var(--wco-timeline-dot-icon-color)}.wco-timeline .wco-timeline-item-dot-icon-finalized{--wco-timeline-dot-icon-color: var(--wco-color-neutral-50)}.wco-timeline .wco-timeline-item-dot-icon-error{--wco-timeline-dot-icon-color: var(--wco-color-danger-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-timeline', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"wco-timeline\">\n <div class=\"wco-timeline-item\" *ngFor=\"let item of timelineItems; let i = index\">\n <div class=\"wco-timeline-item-dot-container\">\n <div class=\"wco-timeline-item-dot-container-inner\">\n <span class=\"wco-timeline-item-dot-number\">\n {{ timelineItems.length - i }}\n </span>\n <div class=\"wco-timeline-item-dot-line-container\">\n <div [className]=\"'wco-timeline-item-dot wco-timeline-item-dot-' + item.status\">\n <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + item.status\"> {{ statusToIcon[item.status] }} </span>\n </div>\n <hr class=\"wco-timeline-item-dot-line\" />\n </div>\n </div>\n </div>\n <div class=\"wco-timeline-item-content-container\">\n <div class=\"wco-timeline-item-content\">\n <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + item.status\"> {{ item.title }} </h4>\n <p *ngIf=\"item.descriptionPre?.text\" [className]=\"item.descriptionPre?.customClass\"> {{ item.descriptionPre?.text }} </p>\n <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + item.status\"> {{ item.description }} </p>\n <p *ngIf=\"item.descriptionPos?.text\" [className]=\"item.descriptionPos?.customClass\"> {{ item.descriptionPos?.text }} </p>\n <button class=\"wco-btn btn-primary btn-link\" *ngIf=\"item.action\" (click)=\"item.action.handler()\" [disabled]=\"item.status === 'waiting'\"> {{item.action.label}} </button>\n </div>\n <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + item.status\"> {{ item.date }} </span>\n </div>\n </div>\n</div>\n", styles: [".wco-timeline{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;margin:20px 0;--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item{width:100%;display:flex;flex-direction:row;gap:10px}.wco-timeline .wco-timeline-item-dot-container{display:flex;flex-direction:column;align-items:center;gap:5px}.wco-timeline .wco-timeline-item-dot-container-inner{height:100%;display:flex;flex-direction:row;gap:5px}.wco-timeline .wco-timeline-item-dot-line-container{display:flex;flex-direction:column;align-items:center}.wco-timeline .wco-timeline-item-dot-line{width:var(--wco-borderwidth-thin);height:100%;background-color:var(--wco-color-neutral-500)}.wco-timeline .wco-timeline-item-dot{min-width:20px;min-height:20px;max-width:20px;max-height:20px;justify-content:center;align-items:center;display:flex;border-radius:var(--wco-radius-circular);background-color:var(--wco-timeline-dot-color)}.wco-timeline .wco-timeline-item-dot-finalized{--wco-timeline-dot-color: var(--wco-color-success-500)}.wco-timeline .wco-timeline-item-dot-current{--wco-timeline-dot-color: var(--wco-color-primary-600)}.wco-timeline .wco-timeline-item-dot-waiting{--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item-dot-error{--wco-timeline-dot-color: var(--wco-color-danger-100)}.wco-timeline .wco-timeline-item-content{flex-direction:column;display:flex;margin-bottom:var(--wco-spacing-xl)}@media (max-width: 900px){.wco-timeline .wco-timeline-item-content{margin-bottom:var(--wco-spacing-xs)}}.wco-timeline .wco-timeline-item-content-container{width:100%;display:grid;grid-template-columns:1fr minmax(200px,250px);grid-template-areas:\". .\";gap:2rem}.wco-timeline .wco-timeline-item-content-title{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-title-font-weight);color:var(--wco-timeline-item-content-title-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-title-finalized{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-current{--wco-timeline-item-content-title-font-weight: 700;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-waiting{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-title-error{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-danger-600)}.wco-timeline .wco-timeline-item-content-description{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-description-font-weight);color:var(--wco-timeline-item-content-description-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-description-finalized,.wco-timeline .wco-timeline-item-content-description-current{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var( --wco-color-neutral-700 )}.wco-timeline .wco-timeline-item-content-description-waiting{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var( --wco-color-neutral-600 )}.wco-timeline .wco-timeline-item-content-description-error{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var( --wco-color-neutral-700 )}.wco-timeline .wco-timeline-item-content-date{font-size:1rem;color:var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-dot-icon{font-size:.8rem;color:var(--wco-timeline-dot-icon-color)}.wco-timeline .wco-timeline-item-dot-icon-finalized{--wco-timeline-dot-icon-color: var(--wco-color-neutral-50)}.wco-timeline .wco-timeline-item-dot-icon-error{--wco-timeline-dot-icon-color: var(--wco-color-danger-600)}\n"] }]
}], propDecorators: { timelineItems: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbXBvbmVudHMvc3JjL2xpYi90aW1lbGluZS90aW1lbGluZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29tcG9uZW50cy9zcmMvbGliL3RpbWVsaW5lL3RpbWVsaW5lLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7O0FBNkIvQyxNQUFNLE9BQU8saUJBQWlCO0lBQ25CLGFBQWEsR0FBbUIsRUFBRSxDQUFDO0lBRTVDLFlBQVksR0FBRztRQUNiLFNBQVMsRUFBRSxPQUFPO1FBQ2xCLE9BQU8sRUFBRSxFQUFFO1FBQ1gsT0FBTyxFQUFFLEVBQUU7UUFDWCxLQUFLLEVBQUUsZUFBZTtLQUN2QixDQUFDO3dHQVJTLGlCQUFpQjs0RkFBakIsaUJBQWlCLG9IQzlCOUIsNndEQTJCQSw2OUhERlksWUFBWTs7NEZBS1gsaUJBQWlCO2tCQVI3QixTQUFTOytCQUNFLGNBQWMsY0FDWixJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUMsaUJBR1IsaUJBQWlCLENBQUMsSUFBSTs4QkFHNUIsYUFBYTtzQkFBckIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5leHBvcnQgdHlwZSBUaW1lbGluZUl0ZW0gPSB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIGRlc2NyaXB0aW9uOiBzdHJpbmc7XG4gIGRlc2NyaXB0aW9uUHJlPzoge1xuICAgIHRleHQ6IHN0cmluZztcbiAgICBjdXN0b21DbGFzczogc3RyaW5nO1xuICB9O1xuICBkZXNjcmlwdGlvblBvcz86IHtcbiAgICB0ZXh0OiBzdHJpbmc7XG4gICAgY3VzdG9tQ2xhc3M6IHN0cmluZztcbiAgfTtcbiAgZGF0ZTogc3RyaW5nO1xuICBzdGF0dXM6ICdmaW5hbGl6ZWQnIHwgJ2N1cnJlbnQnIHwgJ3dhaXRpbmcnIHwgJ2Vycm9yJztcbiAgYWN0aW9uPzoge1xuICAgIGhhbmRsZXI6ICgpID0+IHZvaWQ7XG4gICAgbGFiZWw6IHN0cmluZztcbiAgfTtcbn07XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3djby10aW1lbGluZScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZVVybDogJy4vdGltZWxpbmUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90aW1lbGluZS5jb21wb25lbnQuc2NzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBUaW1lbGluZUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHRpbWVsaW5lSXRlbXM6IFRpbWVsaW5lSXRlbVtdID0gW107XG5cbiAgc3RhdHVzVG9JY29uID0ge1xuICAgIGZpbmFsaXplZDogJ2NoZWNrJyxcbiAgICBjdXJyZW50OiAnJyxcbiAgICB3YWl0aW5nOiAnJyxcbiAgICBlcnJvcjogJ3ByaW9yaXR5X2hpZ2gnLFxuICB9O1xufVxuIiwiPGRpdiBjbGFzcz1cIndjby10aW1lbGluZVwiPlxuICA8ZGl2IGNsYXNzPVwid2NvLXRpbWVsaW5lLWl0ZW1cIiAqbmdGb3I9XCJsZXQgaXRlbSBvZiB0aW1lbGluZUl0ZW1zOyBsZXQgaSA9IGluZGV4XCI+XG4gICAgPGRpdiBjbGFzcz1cIndjby10aW1lbGluZS1pdGVtLWRvdC1jb250YWluZXJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJ3Y28tdGltZWxpbmUtaXRlbS1kb3QtY29udGFpbmVyLWlubmVyXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwid2NvLXRpbWVsaW5lLWl0ZW0tZG90LW51bWJlclwiPlxuICAgICAgICAgIHt7IHRpbWVsaW5lSXRlbXMubGVuZ3RoIC0gaSB9fVxuICAgICAgICA8L3NwYW4+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ3Y28tdGltZWxpbmUtaXRlbS1kb3QtbGluZS1jb250YWluZXJcIj5cbiAgICAgICAgICA8ZGl2IFtjbGFzc05hbWVdPVwiJ3djby10aW1lbGluZS1pdGVtLWRvdCB3Y28tdGltZWxpbmUtaXRlbS1kb3QtJyArIGl0ZW0uc3RhdHVzXCI+XG4gICAgICAgICAgICA8c3BhbiBbY2xhc3NOYW1lXT1cIidtYXRlcmlhbC1pY29ucyB3Y28tdGltZWxpbmUtaXRlbS1kb3QtaWNvbiB3Y28tdGltZWxpbmUtaXRlbS1kb3QtaWNvbi0nICsgaXRlbS5zdGF0dXNcIj4ge3sgc3RhdHVzVG9JY29uW2l0ZW0uc3RhdHVzXSB9fSA8L3NwYW4+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGhyIGNsYXNzPVwid2NvLXRpbWVsaW5lLWl0ZW0tZG90LWxpbmVcIiAvPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJ3Y28tdGltZWxpbmUtaXRlbS1jb250ZW50LWNvbnRhaW5lclwiPlxuICAgICAgPGRpdiBjbGFzcz1cIndjby10aW1lbGluZS1pdGVtLWNvbnRlbnRcIj5cbiAgICAgICAgPGg0IFtjbGFzc05hbWVdPVwiJ3djby10aW1lbGluZS1pdGVtLWNvbnRlbnQtdGl0bGUgd2NvLXRpbWVsaW5lLWl0ZW0tY29udGVudC10aXRsZS0nICsgaXRlbS5zdGF0dXNcIj4ge3sgaXRlbS50aXRsZSB9fSA8L2g0PlxuICAgICAgICA8cCAqbmdJZj1cIml0ZW0uZGVzY3JpcHRpb25QcmU/LnRleHRcIiBbY2xhc3NOYW1lXT1cIml0ZW0uZGVzY3JpcHRpb25QcmU/LmN1c3RvbUNsYXNzXCI+IHt7IGl0ZW0uZGVzY3JpcHRpb25QcmU/LnRleHQgfX0gPC9wPlxuICAgICAgICA8cCBbY2xhc3NOYW1lXT1cIid3Y28tdGltZWxpbmUtaXRlbS1jb250ZW50LWRlc2NyaXB0aW9uIHdjby10aW1lbGluZS1pdGVtLWNvbnRlbnQtZGVzY3JpcHRpb24tJyArIGl0ZW0uc3RhdHVzXCI+IHt7IGl0ZW0uZGVzY3JpcHRpb24gfX0gPC9wPlxuICAgICAgICA8cCAqbmdJZj1cIml0ZW0uZGVzY3JpcHRpb25Qb3M/LnRleHRcIiBbY2xhc3NOYW1lXT1cIml0ZW0uZGVzY3JpcHRpb25Qb3M/LmN1c3RvbUNsYXNzXCI+IHt7IGl0ZW0uZGVzY3JpcHRpb25Qb3M/LnRleHQgfX0gPC9wPlxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwid2NvLWJ0biBidG4tcHJpbWFyeSBidG4tbGlua1wiICpuZ0lmPVwiaXRlbS5hY3Rpb25cIiAoY2xpY2spPVwiaXRlbS5hY3Rpb24uaGFuZGxlcigpXCIgW2Rpc2FibGVkXT1cIml0ZW0uc3RhdHVzID09PSAnd2FpdGluZydcIj4ge3tpdGVtLmFjdGlvbi5sYWJlbH19IDwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG4gICAgICA8c3BhbiBbY2xhc3NOYW1lXT1cIid3Y28tdGltZWxpbmUtaXRlbS1jb250ZW50LWRhdGUgd2NvLXRpbWVsaW5lLWl0ZW0tY29udGVudC1kYXRlLScgKyBpdGVtLnN0YXR1c1wiPiB7eyBpdGVtLmRhdGUgfX0gPC9zcGFuPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19