/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
 */
import { Component, Input } from '@angular/core';
import { DisplayStateService } from '../../../../../services/DisplayStateService';
import { ClientSettingsService } from '../../../../../services/ClientSettingsService';
import { WebPlatformApiService } from '../../../../../services/WebPlatformApiService';
import { LandingEditorModalComponent } from '../landing-editor-modal/landing-editor-modal.component';
var WidgetConfigEditorComponent = /** @class */ (function () {
    // constructor(private displayStateService: DisplayStateService) { }
    function WidgetConfigEditorComponent(displayStateService, webPlatformApiService, clientSettingsService) {
        this.displayStateService = displayStateService;
        this.webPlatformApiService = webPlatformApiService;
        this.clientSettingsService = clientSettingsService;
        this.selectedWidgetConfigJsonCls = '';
        this.readonlyWidget = false;
        this.groupAccessRestrictionsAllowed = false;
    }
    /**
     * @return {?}
     */
    WidgetConfigEditorComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        this.grabJSON();
        this.groupAccessRestrictionsAllowed = (this.clientSettingsService.LoadUserDetails === true);
    };
    /**
     * @return {?}
     */
    WidgetConfigEditorComponent.prototype.canAddAsSideNav = /**
     * @return {?}
     */
    function () {
        var _this = this;
        return this.displayStateService.appState.sideNavWidgetConfig !== undefined &&
            this.displayStateService.appState.sideNavWidgetConfig.widgetNameList.findIndex(function (x) { return x.name === _this.selectedWidgetConfig.name; }) === -1;
    };
    /**
     * @return {?}
     */
    WidgetConfigEditorComponent.prototype.ngOnChanges = /**
     * @return {?}
     */
    function () {
        this.grabJSON();
        this.readonlyWidget = this.displayStateService.IsByDefaultWidget(this.selectedWidgetConfig.name);
    };
    /**
     * @param {?} tag
     * @return {?}
     */
    WidgetConfigEditorComponent.prototype.AddTag = /**
     * @param {?} tag
     * @return {?}
     */
    function (tag) {
        this.selectedWidgetConfig.tags = this.selectedWidgetConfig.tags || [];
        if (tag && this.selectedWidgetConfig.tags.indexOf(tag) === -1) {
            this.selectedWidgetConfig.tags.push(tag);
        }
        ;
    };
    /**
     * @param {?} tag
     * @return {?}
     */
    WidgetConfigEditorComponent.prototype.RemoveTag = /**
     * @param {?} tag
     * @return {?}
     */
    function (tag) {
        this.selectedWidgetConfig.tags.splice(this.selectedWidgetConfig.tags.indexOf(tag), 1);
    };
    /**
     * @return {?}
     */
    WidgetConfigEditorComponent.prototype.UpdateSelectedConfigJson = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var newConfig;
        try {
            newConfig = JSON.parse(this.selectedWidgetConfigJson);
            this.selectedWidgetConfig.config = newConfig;
            this.grabJSON();
        }
        catch (e) {
            alert(JSON.stringify(e));
        }
    };
    /**
     * @return {?}
     */
    WidgetConfigEditorComponent.prototype.grabJSON = /**
     * @return {?}
     */
    function () {
        this.selectedWidgetConfigJson =
            this.selectedWidgetConfig === undefined || this.selectedWidgetConfig.config === undefined ?
                '' :
                JSON.stringify(this.selectedWidgetConfig.config, null, 2);
        this.selectedWidgetConfigJsonCls = '';
    };
    /**
     * @param {?} idx
     * @return {?}
     */
    WidgetConfigEditorComponent.prototype.DeleteContextByIndex = /**
     * @param {?} idx
     * @return {?}
     */
    function (idx) {
        this.selectedWidgetConfig.contextMatchingRules.splice(idx, 1);
    };
    /**
     * @return {?}
     */
    WidgetConfigEditorComponent.prototype.AddAsSideNav = /**
     * @return {?}
     */
    function () {
        this.displayStateService.appState.sideNavWidgetConfig.widgetNameList.push({
            name: this.selectedWidgetConfig.name,
            value: this.selectedWidgetConfig.name
        });
    };
    /**
     * @return {?}
     */
    WidgetConfigEditorComponent.prototype.AddContextRule = /**
     * @return {?}
     */
    function () {
        this.selectedWidgetConfig.contextMatchingRules.push({ contextName: '', optional: true, valueMatch: '' });
    };
    /**
     * @return {?}
     */
    WidgetConfigEditorComponent.prototype.addAnotherConsumerPolicy = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var newDp = {
            dataPolicy: '',
            fixedParameters: [],
            sortColumns: [],
            contextParameters: [],
            filterConfiguration: [],
            overrideCacheRules: { period: undefined },
            dataGrouping: { serverSide: undefined, groupBy: undefined, aggregations: undefined }
        };
        if (this.selectedWidgetConfig.dataConsumerConfigurations) {
            this.selectedWidgetConfig.dataConsumerConfigurations.push(newDp);
        }
        else {
            /** @type {?} */
            var clone = JSON.parse(JSON.stringify(this.selectedWidgetConfig.dataConsumerConfiguration));
            this.selectedWidgetConfig.dataConsumerConfiguration = null;
            this.selectedWidgetConfig.dataConsumerConfigurations = [clone, newDp];
        }
    };
    /**
     * @param {?} dcc
     * @param {?} dccIdx
     * @return {?}
     */
    WidgetConfigEditorComponent.prototype.removeConsumerPolicy = /**
     * @param {?} dcc
     * @param {?} dccIdx
     * @return {?}
     */
    function (dcc, dccIdx) {
        // Filter the current dcc
        this.selectedWidgetConfig.dataConsumerConfigurations = this.selectedWidgetConfig
            .dataConsumerConfigurations.filter(function (dc, i) { return i !== dccIdx; });
        if (this.selectedWidgetConfig.dataConsumerConfigurations.length === 1) {
            /** @type {?} */
            var clone = JSON.parse(JSON.stringify(this.selectedWidgetConfig.dataConsumerConfigurations[0]));
            this.selectedWidgetConfig.dataConsumerConfigurations = null;
            this.selectedWidgetConfig.dataConsumerConfiguration = clone;
        }
    };
    /**
     * @return {?}
     */
    WidgetConfigEditorComponent.prototype.openCustomizeLandingModal = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var modalConfig = {
            animated: true,
            keyboard: true,
            backdrop: true,
            ignoreBackdropClick: false,
            class: 'modal-lg'
        };
        if (!this.selectedWidgetConfig.config || Object.keys(this.selectedWidgetConfig.config).length === 0) {
            // create a new "Landing Config" using defaults that make it match the original landing page
            this.selectedWidgetConfig.config = {
                ShowFilterByTags: true,
                ShowQuickSearch: false,
                ShowViewsSelector: false,
                LoadUsersGroupsOnInit: false,
                ExternalWidgetsConfigUrls: [],
                Views: [{
                        name: 'all tags',
                        default: true,
                        included: {
                            tags: ['*']
                        },
                        group_by_type: 'tags',
                        layout_style: 'wide',
                        layout_cols: 3,
                        tile_style: 'card'
                    }],
                ExternalLinks: []
            };
        }
        /** @type {?} */
        var lc = this.displayStateService.modalService.show(LandingEditorModalComponent, modalConfig);
        lc.content.widgetConfig = this.selectedWidgetConfig;
        lc.content.modalRef = lc;
    };
    WidgetConfigEditorComponent.decorators = [
        { type: Component, args: [{
                    selector: 'app-widget-config-editor',
                    template: "<div class=\"alert alert-info\" role=\"alert\" *ngIf=\"readonlyWidget\">\r\n    <strong>Heads up!</strong> This is a Read Only widget.\r\n</div>\r\n<div *ngIf=\"selectedWidgetConfig.name == 'Landing Page'\" class=\"text-center my-3\">\r\n    <button type=\"button\" class=\"btn btn-outline-success\" (click)=\"openCustomizeLandingModal()\">Customize Landing Page</button>\r\n</div>\r\n<div *ngIf=\"selectedWidgetConfig.name == 'Landing Page Navigation'\" class=\"text-center my-3\">\r\n    <button type=\"button\" class=\"btn btn-outline-success\" (click)=\"openCustomizeLandingModal()\">Customize Landing Page Navigation</button>\r\n</div>\r\n<fieldset [disabled]=\"readonlyWidget\">\r\n    <tabset *ngIf=\"selectedWidgetConfig\" [justified]=\"true\">\r\n        <tab heading=\"Properties\">\r\n            <div class=\"form-group row\">\r\n                <label for=\"name\" class=\"col-sm-2 col-form-label\">Name</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"form-control\" type=\"text\" [(ngModel)]=\"selectedWidgetConfig.name\" id=\"name\">\r\n                </div>\r\n            </div>\r\n            <div class=\"form-group row\">\r\n                <label for=\"name\" class=\"col-sm-2 col-form-label\">Displayed Name</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"form-control\" type=\"text\" [(ngModel)]=\"selectedWidgetConfig.displayName\" id=\"name\">\r\n                </div>\r\n            </div>\r\n            <div class=\"form-group row\">\r\n                <label for=\"description\" class=\"col-sm-2 col-form-label\">description</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"form-control\" type=\"text\" [(ngModel)]=\"selectedWidgetConfig.description\" id=\"description\">\r\n                </div>\r\n            </div>\r\n            <div class=\"form-group row\">\r\n                <label for=\"componentType\" class=\"col-sm-2 col-form-label\">component Type</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"form-control\" type=\"text\" [(ngModel)]=\"selectedWidgetConfig.componentType\" id=\"componentType\">\r\n                </div>\r\n            </div>\r\n            <div class=\"form-group row\">\r\n                <label for=\"supportMessage\" class=\"col-sm-2 col-form-label\">Support Message</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"form-control\" type=\"text\" [(ngModel)]=\"selectedWidgetConfig.supportMessage\" id=\"supportMessage\">\r\n                </div>\r\n            </div>\r\n            <div class=\"form-group row\">\r\n                <label for=\"area\" class=\"col-sm-2 col-form-label\">Area</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"form-control\" type=\"text\" [(ngModel)]=\"selectedWidgetConfig.area\" id=\"area\">\r\n                </div>\r\n            </div>\r\n            <div class=\"form-group row\">\r\n                <label for=\"supportMessage\" class=\"col-sm-2 col-form-label\">Admin Rights Required</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" [(ngModel)]=\"selectedWidgetConfig.adminRequired\">\r\n                        <option [ngValue]=\"true\">True</option>\r\n                        <option [ngValue]=\"false\">False</option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"groupAccessRestrictionsAllowed\" class=\"form-group row\">\r\n                <label for=\"accessGroups\" class=\"col-sm-2 col-form-label\"\r\n                tooltip=\"Here you can enter a comma delimited list of MT group names.  If provided only members of these groups will be allowed to open this widget. Blank is unrestricted.\">\r\n                    Restricted to groups\r\n                </label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"form-control\" type=\"text\" [(ngModel)]=\"selectedWidgetConfig.accessGroups\" id=\"accessGroupsInp\"\r\n                    placeholder=\"Optional list of MT group name(s)\">\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"groupAccessRestrictionsAllowed\" class=\"form-group row\">\r\n                <label for=\"writeAccessGroups\" class=\"col-sm-2 col-form-label\"\r\n                tooltip=\"Here you can enter another comma delimited list of MT group names.  The user will be checked for membership in these groups and the widget config object will provide a userCanWrite boolean for use in the widget controllers.\">\r\n                    Write Access groups\r\n                </label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"form-control\" type=\"text\" [(ngModel)]=\"selectedWidgetConfig.writeAccessGroups\" id=\"writeAccessGroupsInp\"\r\n                    placeholder=\"Optional list of MT group name(s)\">\r\n                </div>\r\n            </div>\r\n            <div class=\"form-group row\">\r\n                <label for=\"widgetAsApp\" class=\"col-sm-2 col-form-label\">Run Widget as an App</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" [(ngModel)]=\"selectedWidgetConfig.widgetAsApp\">\r\n                        <option [ngValue]=\"true\">True</option>\r\n                        <option [ngValue]=\"false\">False</option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div *ngIf=\"selectedWidgetConfig.widgetAsApp\">\r\n                <div class=\"form-group row\">\r\n                    <label for=\"widgetSideNavLabel\" class=\"col-sm-2 col-form-label\">Internal SideNav Label</label>\r\n                    <div class=\"col-sm-4\">\r\n                        <input class=\"form-control\" type=\"text\" [(ngModel)]=\"selectedWidgetConfig.internalSideNavLabel\" id=\"internalSideNavLabel\">\r\n                    </div>\r\n                    <label for=\"widgetSideNavLabel\" class=\"col-sm-2 col-form-label\">Internal SideNav component Type</label>\r\n                    <div class=\"col-sm-4\">\r\n                        <input class=\"form-control\" type=\"text\" [(ngModel)]=\"selectedWidgetConfig.internalSideNavComponentType\" id=\"internalSideNavComponentType\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"form-group row\">\r\n                    <label class=\"col-sm-2 col-form-label\">Show Side Nav</label>\r\n                    <div class=\"col-sm-4\">\r\n                        <select class=\"form-control\" [(ngModel)]=\"selectedWidgetConfig.showSideNav\">\r\n                            <option [ngValue]=\"true\">True</option>\r\n                            <option [ngValue]=\"false\">False</option>\r\n                        </select>\r\n                    </div>\r\n                    <label class=\"col-sm-2 col-form-label\">Show Context/Sort </label>\r\n                    <div class=\"col-sm-4\">\r\n                        <select class=\"form-control\" [(ngModel)]=\"selectedWidgetConfig.showContextSortBreadcrumbs\">\r\n                            <option [ngValue]=\"true\">True</option>\r\n                            <option [ngValue]=\"false\">False</option>\r\n                        </select>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n\r\n\r\n            <div class=\"form-group row\">\r\n                <label for=\"config-tags\" class=\"col-sm-2 col-form-label\">Tags</label>\r\n                <div class=\"col-sm-10\">\r\n                    <div class=\"input-group\">\r\n                        <input class=\"form-control\" type=\"text\" #newTag (keyup.enter)=\"AddTag(newTag.value); newTag.value='';\" id=\"config-tags\" placeholder=\"Add Tag - press enter or Add button\">\r\n                        <span class=\"input-group-btn\">\r\n                            <input type=\"button\" class=\"btn btn-success\" value=\"Add\" (click)=\"AddTag(newTag.value); newTag.value='';\">\r\n                        </span>\r\n                    </div>\r\n                    <div class=\"tag-container\" *ngIf=\"selectedWidgetConfig.tags && selectedWidgetConfig.tags.length !== 0\">\r\n                        <div class=\"badge badge-info single-tag\" *ngFor=\"let tag of selectedWidgetConfig.tags\">\r\n                            {{tag}}\r\n                            <i (click)=\"RemoveTag(tag)\" class=\"fa fa-trash\" aria-hidden=\"true\"></i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </tab>\r\n        <ng-template #contextMatchingRulesTooltip>\r\n            <div style=\"text-align: left;\">\r\n                <b>Context Matching:</b> At any time the application can have a set of context name/value pairs. This is called\r\n                the runtime context set. A list of these rules is used to determine if the widget should be shown given the\r\n                state of the context data. For a widget to be displayed, the rules are as follows:\r\n                <ul>\r\n                    <li>Runtime context set has ALL non-optional names defined in the widget's rules</li>\r\n                    <li>If a rule's context value is specified, the runtime context set item by the rule's name has to have that\r\n                        value. If no context value, all that matters is that runtime context set has an item with that name\r\n                    </li>\r\n                    <li>If context has names that aren't specified in the rule, the widget won't be displayed.</li>\r\n                </ul>\r\n            </div>\r\n        </ng-template>\r\n        <tab heading=\"Context Matching\">\r\n            <span class=\"label label-default\" [tooltip]=\"contextMatchingRulesTooltip\" placement=\"bottom\">\r\n                <i class=\"fa fa-info-circle\"></i>&nbsp;Hover for info</span>\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label tightPad\">Context Name</label>\r\n                <label class=\"col-sm-4 col-form-label tightPad\">Context Value (optional)</label>\r\n                <label class=\"col-sm-2 col-form-label tightPad\">Optional</label>\r\n                <label class=\"col-sm-1 col-form-label tightPad\" tooltip=\"Default is none, setting this will allow you to click on recent values for this context in the breadcrumb to quickly toggle. The number represents the # of recent values to keep\">\r\n                    Hist\r\n                    <i class=\"fa fa-info-circle\"></i>\r\n                </label>\r\n                <label class=\"col-sm-1 col-form-label tightPad\"></label>\r\n            </div>\r\n\r\n            <div class=\"form-group row\" *ngFor=\"let cmr of selectedWidgetConfig.contextMatchingRules; let idx = index\">\r\n                <div class=\"col-sm-4 tightPad\">\r\n                    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"cmr.contextName\" name=\"name\">\r\n                </div>\r\n                <div class=\"col-sm-4 tightPad\">\r\n                    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"cmr.valueMatch\" name=\"value\">\r\n                </div>\r\n                <div class=\"col-sm-2 tightPad\">\r\n                    <select class=\"form-control\" [(ngModel)]=\"cmr.optional\">\r\n                        <option [ngValue]=\"true\">True</option>\r\n                        <option [ngValue]=\"false\">False</option>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-sm-1 tightPad\">\r\n                    <select class=\"form-control\" [(ngModel)]=\"cmr.historyItemsToKeep\">\r\n                        <option [ngValue]=\"0\">None</option>\r\n                        <option [ngValue]=\"3\">3</option>\r\n                        <option [ngValue]=\"5\">5</option>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-sm-1 tightPad\">\r\n                    <button type=\"button\" class=\"btn btn-danger btn-sm\" (click)=\"DeleteContextByIndex(idx)\">\r\n                        <i _ngcontent-c24=\"\" class=\"fa fa-times\"></i>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <button type=\"button\" class=\"btn btn-info btn-sm\" (click)=\"AddContextRule()\">\r\n                New context rule\r\n            </button>\r\n        </tab>\r\n        <tab heading=\"Data\">\r\n            <div *ngIf=\"selectedWidgetConfig.dataConsumerConfigurations\">\r\n                <div *ngFor=\"let dcc of selectedWidgetConfig.dataConsumerConfigurations;let dccIdx = index\" class=\"card p-2 mb-2 row\">\r\n                    <app-data-consumer-config-editor [DataConsumerConfig]=\"dcc\">\r\n                    </app-data-consumer-config-editor>\r\n                    <div class=\"col-1\">\r\n                        <button type=\"button\" class=\"btn btn-danger btn-sm\" tooltip=\"Disassociate Data Policy from widget\" (click)=\"removeConsumerPolicy(dcc,dccIdx)\">\r\n                            <i class=\"fa fa-close\"></i>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"selectedWidgetConfig.dataConsumerConfiguration\" class=\"card p-2 mb-2 row\">\r\n                <app-data-consumer-config-editor [DataConsumerConfig]=\"selectedWidgetConfig.dataConsumerConfiguration\">\r\n                </app-data-consumer-config-editor>\r\n            </div>\r\n            <button type=\"button\" class=\"btn btn-info btn-sm\" tooltip=\"Warning: Widgets with multiple data policies attached require custom logic to handle / load each policy by name.\"\r\n                (click)=\"addAnotherConsumerPolicy()\">\r\n                <i class=\"fa fa-plus\"></i> Attach another data policy to widget\r\n            </button>\r\n        </tab>\r\n        <tab heading=\"Configuration\">\r\n            <button type=\"button\" class=\"btn btn-info btn-sm\" [ngClass]=\"selectedWidgetConfigJsonCls\" (click)=\"UpdateSelectedConfigJson()\">\r\n                Validate & Save Config JSON\r\n            </button>\r\n            <textarea style=\"width: 100%; height: 400px; font-family: monospace;\" \r\n                [ngClass]=\"selectedWidgetConfigJsonCls\" [(ngModel)]=\"selectedWidgetConfigJson\" (ngModelChange)=\"selectedWidgetConfigJsonCls = 'alert-danger'\" name=\"selectedConfigJson\"></textarea>\r\n        </tab>\r\n        <tab heading=\"Raw\">\r\n            <pre>{{selectedWidgetConfig | json}}</pre>\r\n        </tab>\r\n        <tab *ngIf=\"selectedWidgetConfig.componentType == 'GenericWidgetTable'\" heading=\"Table Config\">\r\n            <app-generic-table-config [widgetConfig]=\"selectedWidgetConfig\"></app-generic-table-config>\r\n        </tab>\r\n        <tab *ngIf=\"selectedWidgetConfig.componentType == 'GenericWidgetChart'\" heading=\"Chart Config\">\r\n            <app-generic-chart-config [widgetConfig]=\"selectedWidgetConfig\"></app-generic-chart-config>\r\n        </tab>\r\n    </tabset>\r\n</fieldset>",
                    styles: [".tag-container i{margin-left:10px;cursor:pointer}.tag-container i:hover{color:#640e0e}.tag-container .single-tag{margin-right:5px;padding:5px}.tag-container{padding:10px;border:1px solid #5bc0de;margin-top:5px}"]
                }] }
    ];
    /** @nocollapse */
    WidgetConfigEditorComponent.ctorParameters = function () { return [
        { type: DisplayStateService },
        { type: WebPlatformApiService },
        { type: ClientSettingsService }
    ]; };
    WidgetConfigEditorComponent.propDecorators = {
        selectedWidgetConfig: [{ type: Input }]
    };
    return WidgetConfigEditorComponent;
}());
export { WidgetConfigEditorComponent };
if (false) {
    /** @type {?} */
    WidgetConfigEditorComponent.prototype.selectedWidgetConfig;
    /** @type {?} */
    WidgetConfigEditorComponent.prototype.selectedWidgetConfigJson;
    /** @type {?} */
    WidgetConfigEditorComponent.prototype.selectedWidgetConfigJsonCls;
    /** @type {?} */
    WidgetConfigEditorComponent.prototype.readonlyWidget;
    /** @type {?} */
    WidgetConfigEditorComponent.prototype.groupAccessRestrictionsAllowed;
    /** @type {?} */
    WidgetConfigEditorComponent.prototype.displayStateService;
    /** @type {?} */
    WidgetConfigEditorComponent.prototype.webPlatformApiService;
    /** @type {?} */
    WidgetConfigEditorComponent.prototype.clientSettingsService;
}

//# sourceMappingURL=data:application/json;base64, 