@netgrif/components/esm2022/lib/data-fields/enumeration-field/enumeration-icon-field/enumeration-icon-field.component.mjs

Netgrif Application Engine frontend Angular components

import { Component, Inject, Optional } from '@angular/core';
import { AbstractEnumerationIconFieldComponent, DATA_FIELD_PORTAL_DATA } from '@netgrif/components-core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ngbracket/ngx-layout";
import * as i3 from "@ngbracket/ngx-layout/extended";
import * as i4 from "@angular/material/divider";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/material/form-field";
import * as i7 from "../../required-label/required-label.component";
export class EnumerationIconFieldComponent extends AbstractEnumerationIconFieldComponent {
    constructor(dataFieldPortalData) {
        super(dataFieldPortalData);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EnumerationIconFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EnumerationIconFieldComponent, selector: "nc-enumeration-icon-field", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!horizontal; else horizont\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!formControlRef.disabled\"></nc-required-label>\n        <br></mat-label>\n    <div *ngFor=\"let option of dataField.choices; let i = index\">\n        <div class=\"enum-icon-item enum-icon-item-row\" (click)=\"setEnumValue(option.key)\"\n             [ngClass]=\"{'enum-icon-item-active': isSelected(option.key), 'enum-icon-item-hover': !formControlRef.disabled, 'enum-icon-item-disabled': formControlRef.disabled}\">\n            <mat-icon *ngIf=\"resolveIconType(option.key) === 'material'\">{{resolveIconValue(option.key)}}</mat-icon>\n            <mat-icon *ngIf=\"resolveIconType(option.key) === 'svg'\" [svgIcon]=\"resolveIconValue(option.key)\"></mat-icon>\n            <span fxFlex class=\"enum-icon-text\">{{option.value}}</span>\n            <mat-icon *ngIf=\"isArrow()\">arrow_forward</mat-icon>\n        </div>\n        <mat-divider class=\"enum-icon-divider\" *ngIf=\"i !== dataField.choices.length - 1 && isDivider()\"></mat-divider>\n    </div>\n</div>\n<ng-template #horizont>\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!formControlRef.disabled\"></nc-required-label>\n        <br></mat-label>\n    <div fxLayout=\"row\">\n        <div *ngFor=\"let option of dataField.choices; let i = index\" fxLayout=\"row\" fxFlex>\n            <div class=\"enum-icon-item enum-icon-item-row\" (click)=\"setEnumValue(option.key)\"\n                 [ngClass]=\"{'enum-icon-item-active': isSelected(option.key), 'enum-icon-item-hover': !formControlRef.disabled, 'enum-icon-item-disabled': formControlRef.disabled}\">\n                <mat-icon *ngIf=\"resolveIconType(option.key) === 'material'\">{{resolveIconValue(option.key)}}</mat-icon>\n                <mat-icon *ngIf=\"resolveIconType(option.key) === 'svg'\" [svgIcon]=\"resolveIconValue(option.key)\"></mat-icon>\n                <span fxFlex class=\"enum-icon-text\">{{option.value}}</span>\n                <mat-icon *ngIf=\"isArrow()\">arrow_forward</mat-icon>\n            </div>\n            <div fxFlex></div>\n            <mat-divider [vertical]=\"true\" *ngIf=\"i !== dataField.choices.length - 1 && isDivider()\"></mat-divider>\n        </div>\n    </div>\n</ng-template>\n", styles: [".enum-icon-item{font-size:18px;font-family:Roboto,sans-serif;font-weight:500;line-height:24px;letter-spacing:-.2px;text-align:left;color:#64748b;text-decoration:none;padding:8px 0}.enum-icon-item-row:hover{cursor:pointer}.enum-icon-item:focus,.enum-icon-item-row:focus{outline:none}.enum-icon-divider{position:relative!important}.enum-icon-text{padding:0 16px}.enum-icon-item-disabled{color:#94a3b8;cursor:default!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EnumerationIconFieldComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nc-enumeration-icon-field', template: "<div *ngIf=\"!horizontal; else horizont\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!formControlRef.disabled\"></nc-required-label>\n        <br></mat-label>\n    <div *ngFor=\"let option of dataField.choices; let i = index\">\n        <div class=\"enum-icon-item enum-icon-item-row\" (click)=\"setEnumValue(option.key)\"\n             [ngClass]=\"{'enum-icon-item-active': isSelected(option.key), 'enum-icon-item-hover': !formControlRef.disabled, 'enum-icon-item-disabled': formControlRef.disabled}\">\n            <mat-icon *ngIf=\"resolveIconType(option.key) === 'material'\">{{resolveIconValue(option.key)}}</mat-icon>\n            <mat-icon *ngIf=\"resolveIconType(option.key) === 'svg'\" [svgIcon]=\"resolveIconValue(option.key)\"></mat-icon>\n            <span fxFlex class=\"enum-icon-text\">{{option.value}}</span>\n            <mat-icon *ngIf=\"isArrow()\">arrow_forward</mat-icon>\n        </div>\n        <mat-divider class=\"enum-icon-divider\" *ngIf=\"i !== dataField.choices.length - 1 && isDivider()\"></mat-divider>\n    </div>\n</div>\n<ng-template #horizont>\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!formControlRef.disabled\"></nc-required-label>\n        <br></mat-label>\n    <div fxLayout=\"row\">\n        <div *ngFor=\"let option of dataField.choices; let i = index\" fxLayout=\"row\" fxFlex>\n            <div class=\"enum-icon-item enum-icon-item-row\" (click)=\"setEnumValue(option.key)\"\n                 [ngClass]=\"{'enum-icon-item-active': isSelected(option.key), 'enum-icon-item-hover': !formControlRef.disabled, 'enum-icon-item-disabled': formControlRef.disabled}\">\n                <mat-icon *ngIf=\"resolveIconType(option.key) === 'material'\">{{resolveIconValue(option.key)}}</mat-icon>\n                <mat-icon *ngIf=\"resolveIconType(option.key) === 'svg'\" [svgIcon]=\"resolveIconValue(option.key)\"></mat-icon>\n                <span fxFlex class=\"enum-icon-text\">{{option.value}}</span>\n                <mat-icon *ngIf=\"isArrow()\">arrow_forward</mat-icon>\n            </div>\n            <div fxFlex></div>\n            <mat-divider [vertical]=\"true\" *ngIf=\"i !== dataField.choices.length - 1 && isDivider()\"></mat-divider>\n        </div>\n    </div>\n</ng-template>\n", styles: [".enum-icon-item{font-size:18px;font-family:Roboto,sans-serif;font-weight:500;line-height:24px;letter-spacing:-.2px;text-align:left;color:#64748b;text-decoration:none;padding:8px 0}.enum-icon-item-row:hover{cursor:pointer}.enum-icon-item:focus,.enum-icon-item-row:focus{outline:none}.enum-icon-divider{position:relative!important}.enum-icon-text{padding:0 16px}.enum-icon-item-disabled{color:#94a3b8;cursor:default!important}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [DATA_FIELD_PORTAL_DATA]
                }] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW51bWVyYXRpb24taWNvbi1maWVsZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi9kYXRhLWZpZWxkcy9lbnVtZXJhdGlvbi1maWVsZC9lbnVtZXJhdGlvbi1pY29uLWZpZWxkL2VudW1lcmF0aW9uLWljb24tZmllbGQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmV0Z3JpZi1jb21wb25lbnRzL3NyYy9saWIvZGF0YS1maWVsZHMvZW51bWVyYXRpb24tZmllbGQvZW51bWVyYXRpb24taWNvbi1maWVsZC9lbnVtZXJhdGlvbi1pY29uLWZpZWxkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUMxRCxPQUFPLEVBQ0gscUNBQXFDLEVBQ3JDLHNCQUFzQixFQUV6QixNQUFNLDBCQUEwQixDQUFDOzs7Ozs7Ozs7QUFPbEMsTUFBTSxPQUFPLDZCQUE4QixTQUFRLHFDQUFxQztJQUVwRixZQUF3RCxtQkFBMEQ7UUFDOUcsS0FBSyxDQUFDLG1CQUFtQixDQUFDLENBQUM7SUFDL0IsQ0FBQzt3R0FKUSw2QkFBNkIsa0JBRU4sc0JBQXNCOzRGQUY3Qyw2QkFBNkIsd0ZDWjFDLHFqRkFpQ0E7OzRGRHJCYSw2QkFBNkI7a0JBTHpDLFNBQVM7K0JBQ0ksMkJBQTJCOzswQkFNeEIsUUFBUTs7MEJBQUksTUFBTTsyQkFBQyxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5qZWN0LCBPcHRpb25hbH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIEFic3RyYWN0RW51bWVyYXRpb25JY29uRmllbGRDb21wb25lbnQsXG4gICAgREFUQV9GSUVMRF9QT1JUQUxfREFUQSxcbiAgICBEYXRhRmllbGRQb3J0YWxEYXRhLCBFbnVtZXJhdGlvbkZpZWxkXG59IGZyb20gJ0BuZXRncmlmL2NvbXBvbmVudHMtY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmMtZW51bWVyYXRpb24taWNvbi1maWVsZCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2VudW1lcmF0aW9uLWljb24tZmllbGQuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2VudW1lcmF0aW9uLWljb24tZmllbGQuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBFbnVtZXJhdGlvbkljb25GaWVsZENvbXBvbmVudCBleHRlbmRzIEFic3RyYWN0RW51bWVyYXRpb25JY29uRmllbGRDb21wb25lbnQge1xuXG4gICAgY29uc3RydWN0b3IoQE9wdGlvbmFsKCkgQEluamVjdChEQVRBX0ZJRUxEX1BPUlRBTF9EQVRBKSBkYXRhRmllbGRQb3J0YWxEYXRhOiBEYXRhRmllbGRQb3J0YWxEYXRhPEVudW1lcmF0aW9uRmllbGQ+KSB7XG4gICAgICAgIHN1cGVyKGRhdGFGaWVsZFBvcnRhbERhdGEpO1xuICAgIH1cbn1cbiIsIjxkaXYgKm5nSWY9XCIhaG9yaXpvbnRhbDsgZWxzZSBob3Jpem9udFwiPlxuICAgIDxtYXQtbGFiZWwgY2xhc3M9XCJuZXRncmlmLWxhYmVsXCIgW25nQ2xhc3NdPVwieyduZXRncmlmLWxhYmVsLWRpc2FibGVkJzogZm9ybUNvbnRyb2xSZWYuZGlzYWJsZWR9XCIgKm5nSWY9XCIhc2hvd0xhcmdlTGF5b3V0LnZhbHVlXCI+e3tkYXRhRmllbGQudGl0bGV9fVxuICAgICAgICA8bmMtcmVxdWlyZWQtbGFiZWwgKm5nSWY9XCJkYXRhRmllbGQuYmVoYXZpb3IucmVxdWlyZWRcIiBbaXNJbl09XCIhZm9ybUNvbnRyb2xSZWYuZGlzYWJsZWRcIj48L25jLXJlcXVpcmVkLWxhYmVsPlxuICAgICAgICA8YnI+PC9tYXQtbGFiZWw+XG4gICAgPGRpdiAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIGRhdGFGaWVsZC5jaG9pY2VzOyBsZXQgaSA9IGluZGV4XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJlbnVtLWljb24taXRlbSBlbnVtLWljb24taXRlbS1yb3dcIiAoY2xpY2spPVwic2V0RW51bVZhbHVlKG9wdGlvbi5rZXkpXCJcbiAgICAgICAgICAgICBbbmdDbGFzc109XCJ7J2VudW0taWNvbi1pdGVtLWFjdGl2ZSc6IGlzU2VsZWN0ZWQob3B0aW9uLmtleSksICdlbnVtLWljb24taXRlbS1ob3Zlcic6ICFmb3JtQ29udHJvbFJlZi5kaXNhYmxlZCwgJ2VudW0taWNvbi1pdGVtLWRpc2FibGVkJzogZm9ybUNvbnRyb2xSZWYuZGlzYWJsZWR9XCI+XG4gICAgICAgICAgICA8bWF0LWljb24gKm5nSWY9XCJyZXNvbHZlSWNvblR5cGUob3B0aW9uLmtleSkgPT09ICdtYXRlcmlhbCdcIj57e3Jlc29sdmVJY29uVmFsdWUob3B0aW9uLmtleSl9fTwvbWF0LWljb24+XG4gICAgICAgICAgICA8bWF0LWljb24gKm5nSWY9XCJyZXNvbHZlSWNvblR5cGUob3B0aW9uLmtleSkgPT09ICdzdmcnXCIgW3N2Z0ljb25dPVwicmVzb2x2ZUljb25WYWx1ZShvcHRpb24ua2V5KVwiPjwvbWF0LWljb24+XG4gICAgICAgICAgICA8c3BhbiBmeEZsZXggY2xhc3M9XCJlbnVtLWljb24tdGV4dFwiPnt7b3B0aW9uLnZhbHVlfX08L3NwYW4+XG4gICAgICAgICAgICA8bWF0LWljb24gKm5nSWY9XCJpc0Fycm93KClcIj5hcnJvd19mb3J3YXJkPC9tYXQtaWNvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxtYXQtZGl2aWRlciBjbGFzcz1cImVudW0taWNvbi1kaXZpZGVyXCIgKm5nSWY9XCJpICE9PSBkYXRhRmllbGQuY2hvaWNlcy5sZW5ndGggLSAxICYmIGlzRGl2aWRlcigpXCI+PC9tYXQtZGl2aWRlcj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuPG5nLXRlbXBsYXRlICNob3Jpem9udD5cbiAgICA8bWF0LWxhYmVsIGNsYXNzPVwibmV0Z3JpZi1sYWJlbFwiIFtuZ0NsYXNzXT1cInsnbmV0Z3JpZi1sYWJlbC1kaXNhYmxlZCc6IGZvcm1Db250cm9sUmVmLmRpc2FibGVkfVwiICpuZ0lmPVwiIXNob3dMYXJnZUxheW91dC52YWx1ZVwiPnt7ZGF0YUZpZWxkLnRpdGxlfX1cbiAgICAgICAgPG5jLXJlcXVpcmVkLWxhYmVsICpuZ0lmPVwiZGF0YUZpZWxkLmJlaGF2aW9yLnJlcXVpcmVkXCIgW2lzSW5dPVwiIWZvcm1Db250cm9sUmVmLmRpc2FibGVkXCI+PC9uYy1yZXF1aXJlZC1sYWJlbD5cbiAgICAgICAgPGJyPjwvbWF0LWxhYmVsPlxuICAgIDxkaXYgZnhMYXlvdXQ9XCJyb3dcIj5cbiAgICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIGRhdGFGaWVsZC5jaG9pY2VzOyBsZXQgaSA9IGluZGV4XCIgZnhMYXlvdXQ9XCJyb3dcIiBmeEZsZXg+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZW51bS1pY29uLWl0ZW0gZW51bS1pY29uLWl0ZW0tcm93XCIgKGNsaWNrKT1cInNldEVudW1WYWx1ZShvcHRpb24ua2V5KVwiXG4gICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cInsnZW51bS1pY29uLWl0ZW0tYWN0aXZlJzogaXNTZWxlY3RlZChvcHRpb24ua2V5KSwgJ2VudW0taWNvbi1pdGVtLWhvdmVyJzogIWZvcm1Db250cm9sUmVmLmRpc2FibGVkLCAnZW51bS1pY29uLWl0ZW0tZGlzYWJsZWQnOiBmb3JtQ29udHJvbFJlZi5kaXNhYmxlZH1cIj5cbiAgICAgICAgICAgICAgICA8bWF0LWljb24gKm5nSWY9XCJyZXNvbHZlSWNvblR5cGUob3B0aW9uLmtleSkgPT09ICdtYXRlcmlhbCdcIj57e3Jlc29sdmVJY29uVmFsdWUob3B0aW9uLmtleSl9fTwvbWF0LWljb24+XG4gICAgICAgICAgICAgICAgPG1hdC1pY29uICpuZ0lmPVwicmVzb2x2ZUljb25UeXBlKG9wdGlvbi5rZXkpID09PSAnc3ZnJ1wiIFtzdmdJY29uXT1cInJlc29sdmVJY29uVmFsdWUob3B0aW9uLmtleSlcIj48L21hdC1pY29uPlxuICAgICAgICAgICAgICAgIDxzcGFuIGZ4RmxleCBjbGFzcz1cImVudW0taWNvbi10ZXh0XCI+e3tvcHRpb24udmFsdWV9fTwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8bWF0LWljb24gKm5nSWY9XCJpc0Fycm93KClcIj5hcnJvd19mb3J3YXJkPC9tYXQtaWNvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGRpdiBmeEZsZXg+PC9kaXY+XG4gICAgICAgICAgICA8bWF0LWRpdmlkZXIgW3ZlcnRpY2FsXT1cInRydWVcIiAqbmdJZj1cImkgIT09IGRhdGFGaWVsZC5jaG9pY2VzLmxlbmd0aCAtIDEgJiYgaXNEaXZpZGVyKClcIj48L21hdC1kaXZpZGVyPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=