import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
let LayoutSelectionComponent = class LayoutSelectionComponent {
    /**
     * Initialise Services
     * @param formBuilder
     */
    constructor(formBuilder) {
        this.formBuilder = formBuilder;
        /**
         * @description
         * Edit data to populate form during edit.
         */
        this.templateType = 'page_layout'; // 'page_layout' || 'presenter_layout'
    }
    /**
     * NgOnint hook
     */
    ngOnInit() {
        this.initializeProcess();
    }
    /**
     * Initialise Form
     */
    initializeProcess() {
        this.createLayoutControl();
    }
    /**
     * Create From control for managing Headline/Subheadline
     */
    createLayoutControl() {
        let defaultValue = this.templateType == "page_layout" ? "1" : "list";
        this.parentFrom.addControl('column_types', this.formBuilder.control(defaultValue, Validators.required));
    }
};
LayoutSelectionComponent.ctorParameters = () => [
    { type: FormBuilder }
];
__decorate([
    Input()
], LayoutSelectionComponent.prototype, "parentFrom", void 0);
__decorate([
    Input()
], LayoutSelectionComponent.prototype, "templateType", void 0);
LayoutSelectionComponent = __decorate([
    Component({
        selector: 'ew-control-layout-selection',
        template: "<!-- For Page layout selection -->\r\n<div class=\"colum-custom-branding\"\r\n\t*ngIf=\"templateType == 'page_layout'\"\r\n \t[formGroup]=\"parentFrom\"\r\n>\r\n\r\n\t<div class=\"colum-layout-preview singal-colum\" [ngClass]=\"{'active': parentFrom.value.column_types == '1'}\">\r\n\t\t<label for=\"layout1\">\r\n\t\t\t<span class=\"icon-colum-preview\">\r\n\t\t\t\t<svg id=\"Component_1_1\" data-name=\"Component 1 \u2013 1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"58\" height=\"51\"\r\n\t\t\t\t\tviewBox=\"0 0 58 51\">\r\n\t\t\t\t\t<rect id=\"Rectangle_460\" data-name=\"Rectangle 460\" width=\"58\" height=\"21\" fill=\"#2b2b30\" />\r\n\t\t\t\t\t<rect id=\"Rectangle_461\" data-name=\"Rectangle 461\" width=\"58\" height=\"10\" transform=\"translate(0 26)\"\r\n\t\t\t\t\t\tfill=\"#2b2b30\" />\r\n\t\t\t\t\t<rect id=\"Rectangle_462\" data-name=\"Rectangle 462\" width=\"58\" height=\"10\" transform=\"translate(0 41)\"\r\n\t\t\t\t\t\tfill=\"#2b2b30\" />\r\n\t\t\t\t</svg>\r\n\t\t\t</span>\r\n\t\t</label>\r\n\t\t<input type=\"radio\" formControlName=\"column_types\" id=\"layout1\" value=\"1\" class=\"ew-layout-display-none\">\r\n\t\t<span class=\"colum-title-preview\">1 Column</span>\r\n\t</div>\r\n\r\n\t<div class=\"colum-layout-preview double-colum\" [ngClass]=\"{'active': parentFrom.value.column_types == '2'}\">\r\n\t\t<label for=\"layout2\">\r\n\t\t\t<span class=\"icon-colum-preview\">\r\n\t\t\t\t<svg id=\"Component_2_1\" data-name=\"Component 2 \u2013 1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"61\" height=\"51\"\r\n\t\t\t\t\tviewBox=\"0 0 61 51\">\r\n\t\t\t\t\t<rect id=\"Rectangle_460\" data-name=\"Rectangle 460\" width=\"40\" height=\"21\" fill=\"#2b2b30\" />\r\n\t\t\t\t\t<rect id=\"Rectangle_461\" data-name=\"Rectangle 461\" width=\"40\" height=\"10\" transform=\"translate(0 25)\"\r\n\t\t\t\t\t\tfill=\"#2b2b30\" />\r\n\t\t\t\t\t<rect id=\"Rectangle_462\" data-name=\"Rectangle 462\" width=\"40\" height=\"10\" transform=\"translate(0 41)\"\r\n\t\t\t\t\t\tfill=\"#2b2b30\" />\r\n\t\t\t\t\t<rect id=\"Rectangle_464\" data-name=\"Rectangle 464\" width=\"16\" height=\"51\" transform=\"translate(45)\"\r\n\t\t\t\t\t\tfill=\"#2b2b30\" />\r\n\t\t\t\t</svg>\r\n\t\t\t</span>\r\n\t\t</label>\r\n\t\t<input type=\"radio\" formControlName=\"column_types\" id=\"layout2\" value=\"2\" class=\"ew-layout-display-none\">\r\n\t\t<span class=\"colum-title-preview\">2 Column</span>\r\n\t</div>\r\n\r\n</div>\r\n\r\n<!-- For Presenter layout selection -->\r\n<div class=\"colum-custom-branding presenter-custom-colum\" \r\n\t*ngIf=\"templateType == 'presenter_layout'\"\r\n\t[formGroup]=\"parentFrom\"\r\n>\r\n\r\n\t<div class=\"colum-layout-preview singal-colum\" [ngClass]=\"{'active': parentFrom.value.column_types == 'list'}\">\r\n\t\t<label for=\"layout3\">\r\n\t\t\t<span class=\"icon-colum-preview\">\r\n\t\t\t\t<svg id=\"Component_1_1\" data-name=\"Component 1 \u2013 1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"41\" height=\"25\" viewBox=\"0 0 41 25\">\r\n\t\t\t\t\t<rect id=\"Rectangle_461\" data-name=\"Rectangle 461\" width=\"41\" height=\"10\" fill=\"#2b2b30\" />\r\n\t\t\t\t\t<rect id=\"Rectangle_462\" data-name=\"Rectangle 462\" width=\"41\" height=\"10\" transform=\"translate(0 15)\" fill=\"#2b2b30\" />\r\n\t\t\t\t</svg>\r\n\t\t\t</span>\r\n\t\t</label>\r\n\t\t<input type=\"radio\" formControlName=\"column_types\" id=\"layout3\" value=\"list\" class=\"ew-layout-display-none\">\r\n\t\t<span class=\"colum-title-preview\">List</span>\r\n\t</div>\r\n\r\n\t<div class=\"colum-layout-preview double-colum\" [ngClass]=\"{'active': parentFrom.value.column_types == 'column'}\">\r\n\t\t<label for=\"layout4\">\r\n\t\t\t<span class=\"icon-colum-preview\">\r\n\t\t\t\t<svg id=\"Component_2_1\" data-name=\"Component 2 \u2013 1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"25\" viewBox=\"0 0 40 25\">\r\n\t\t\t\t\t<rect id=\"Rectangle_962\" data-name=\"Rectangle 962\" width=\"18\" height=\"25\" fill=\"#eeeff2\" />\r\n\t\t\t\t\t<rect id=\"Rectangle_963\" data-name=\"Rectangle 963\" width=\"18\" height=\"25\" transform=\"translate(22)\" fill=\"#eeeff2\" />\r\n\t\t\t\t</svg>\r\n\t\t\t</span>\r\n\t\t</label>\r\n\t\t<input type=\"radio\" formControlName=\"column_types\" id=\"layout4\" value=\"column\" class=\"ew-layout-display-none\">\r\n\t\t<span class=\"colum-title-preview\">Column</span>\r\n\t</div>\r\n\r\n</div>\r\n",
        styles: [""]
    })
], LayoutSelectionComponent);
export { LayoutSelectionComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LXNlbGVjdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9ldy1tYS1kZXNpZ24vIiwic291cmNlcyI6WyJsaWIvY29tcG9uZW50cy9zaGFyZWQtY29udHJvbHMvbGF5b3V0LXNlbGVjdGlvbi9sYXlvdXQtc2VsZWN0aW9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekQsT0FBTyxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFPcEUsSUFBYSx3QkFBd0IsR0FBckMsTUFBYSx3QkFBd0I7SUFjbkM7OztPQUdHO0lBQ0gsWUFDVSxXQUF3QjtRQUF4QixnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQVhsQzs7O1dBR0c7UUFDYSxpQkFBWSxHQUFXLGFBQWEsQ0FBQyxDQUFDLHNDQUFzQztJQVF4RixDQUFDO0lBRUw7O09BRUc7SUFDSCxRQUFRO1FBQ04sSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7SUFDM0IsQ0FBQztJQUVEOztPQUVHO0lBQ0gsaUJBQWlCO1FBQ2YsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVEOztPQUVHO0lBQ0gsbUJBQW1CO1FBQ2pCLElBQUksWUFBWSxHQUFHLElBQUksQ0FBQyxZQUFZLElBQUksYUFBYSxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQztRQUNyRSxJQUFJLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxjQUFjLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsWUFBWSxFQUFFLFVBQVUsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDO0lBQzFHLENBQUM7Q0FFRixDQUFBOztZQXpCd0IsV0FBVzs7QUFiekI7SUFBUixLQUFLLEVBQUU7NERBQThCO0FBTTdCO0lBQVIsS0FBSyxFQUFFOzhEQUE2QztBQVoxQyx3QkFBd0I7SUFMcEMsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLDZCQUE2QjtRQUN2QyxxeUlBQWdEOztLQUVqRCxDQUFDO0dBQ1csd0JBQXdCLENBNENwQztTQTVDWSx3QkFBd0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRm9ybUJ1aWxkZXIsIEZvcm1Hcm91cCwgVmFsaWRhdG9ycyB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnZXctY29udHJvbC1sYXlvdXQtc2VsZWN0aW9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vbGF5b3V0LXNlbGVjdGlvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vbGF5b3V0LXNlbGVjdGlvbi5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBMYXlvdXRTZWxlY3Rpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICAvKipcclxuICAgKiBAZGVzY3JpcHRpb25cclxuICAgKiBFZGl0IGRhdGEgdG8gcG9wdWxhdGUgZm9ybSBkdXJpbmcgZWRpdC5cclxuICAgKi9cclxuICBASW5wdXQoKSBwdWJsaWMgcGFyZW50RnJvbTogRm9ybUdyb3VwO1xyXG4gIFxyXG4gIC8qKlxyXG4gICAqIEBkZXNjcmlwdGlvblxyXG4gICAqIEVkaXQgZGF0YSB0byBwb3B1bGF0ZSBmb3JtIGR1cmluZyBlZGl0LlxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIHB1YmxpYyB0ZW1wbGF0ZVR5cGU6IHN0cmluZyA9ICdwYWdlX2xheW91dCc7IC8vICdwYWdlX2xheW91dCcgfHwgJ3ByZXNlbnRlcl9sYXlvdXQnXHJcbiAgXHJcbiAgLyoqXHJcbiAgICogSW5pdGlhbGlzZSBTZXJ2aWNlc1xyXG4gICAqIEBwYXJhbSBmb3JtQnVpbGRlciBcclxuICAgKi9cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByaXZhdGUgZm9ybUJ1aWxkZXI6IEZvcm1CdWlsZGVyXHJcbiAgKSB7IH1cclxuXHJcbiAgLyoqXHJcbiAgICogTmdPbmludCBob29rXHJcbiAgICovXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLmluaXRpYWxpemVQcm9jZXNzKCk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBJbml0aWFsaXNlIEZvcm1cclxuICAgKi9cclxuICBpbml0aWFsaXplUHJvY2Vzcygpe1xyXG4gICAgdGhpcy5jcmVhdGVMYXlvdXRDb250cm9sKCk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBDcmVhdGUgRnJvbSBjb250cm9sIGZvciBtYW5hZ2luZyBIZWFkbGluZS9TdWJoZWFkbGluZVxyXG4gICAqL1xyXG4gIGNyZWF0ZUxheW91dENvbnRyb2woKTogdm9pZCB7XHJcbiAgICBsZXQgZGVmYXVsdFZhbHVlID0gdGhpcy50ZW1wbGF0ZVR5cGUgPT0gXCJwYWdlX2xheW91dFwiID8gXCIxXCIgOiBcImxpc3RcIjtcclxuICAgIHRoaXMucGFyZW50RnJvbS5hZGRDb250cm9sKCdjb2x1bW5fdHlwZXMnLCB0aGlzLmZvcm1CdWlsZGVyLmNvbnRyb2woZGVmYXVsdFZhbHVlLCBWYWxpZGF0b3JzLnJlcXVpcmVkKSk7XHJcbiAgfVxyXG5cclxufVxyXG4iXX0=