import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { PlatformConfigurationFormProviderService } from './platform-configuration-form-provider.service';
import * as i0 from "@angular/core";
import * as i1 from "./platform-configuration-form-provider.service";
import * as i2 from "@c8y/ngx-components";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
export class PlatformConfigurationFormComponent {
    set _optionsGroups(groupIds) {
        if (groupIds === undefined) {
            return;
        }
        this.optionsGroups = groupIds.map(groupId => this.formProviderService.optionsGroups.find(option => option.id === groupId));
    }
    set readOnly(disabled) {
        disabled ? this.form.disable() : this.form.enable();
    }
    set formValue(value) {
        if (value) {
            const convertedValue = this.afterLoad(value);
            this.form.patchValue(convertedValue, { emitEvent: false });
            this.form.markAsUntouched();
            this.form.markAsPristine();
        }
    }
    constructor(formProviderService) {
        this.formProviderService = formProviderService;
        this.optionsGroups = [];
        this.onSave = new EventEmitter();
        this.form = new FormGroup({});
        this.lineBreakHint = this.formProviderService.lineBreakHint;
        Object.keys(formProviderService.platformConfigurationFormDefinitions).forEach(fieldId => {
            this.form.addControl(fieldId, formProviderService.platformConfigurationFormDefinitions[fieldId].control);
        });
    }
    /**
     * Parses provided object's property values
     * @param options
     */
    parseConfiguration(options) {
        const definitions = this.formProviderService.platformConfigurationFormDefinitions;
        Object.entries(options).forEach(([key, rawValue]) => {
            if (definitions[key] &&
                (definitions[key].type === 'number' || definitions[key].type === 'boolean')) {
                try {
                    options[key] = JSON.parse(rawValue);
                }
                catch {
                    options[key] = rawValue;
                }
            }
        });
    }
    /**
     * Parses incoming raw object before it is applied to FormGroup.
     */
    afterLoad(options) {
        this.parseConfiguration(options);
        delete options['ui.email.protocolAndEncryption'];
        const emailProtocol = options['email.protocol'];
        const connectionEncrypted = options['email.connection.encrypted'] || false;
        if (emailProtocol === 'smtp') {
            if (connectionEncrypted) {
                options['ui.email.protocolAndEncryption'] = 'SMTP_ENCRYPTED';
            }
            else {
                options['ui.email.protocolAndEncryption'] = 'SMTP_PLAIN';
            }
        }
        else if (emailProtocol === 'smtps') {
            options['ui.email.protocolAndEncryption'] = 'SMTPS_ENCRYPTED';
        }
        else {
            options['ui.email.protocolAndEncryption'] = undefined;
        }
        return options;
    }
    /**
     * Translates ui.email.protocolAndEncryption field into
     * separate email.protocol and email.connection.encrypted
     */
    beforeSave(value) {
        const protocolAndEncryption = value['ui.email.protocolAndEncryption'];
        if (protocolAndEncryption) {
            //email.protocol
            const protocol = protocolAndEncryption.match(/^(.+?)_(.+?)$/)[1];
            value['email.protocol'] = protocol ? protocol.toLowerCase() : protocol;
            // email.connection.encrypted
            const encryption = protocolAndEncryption.match(/^(.+?)_(.+?)$/)[2];
            value['email.connection.encrypted'] = encryption === 'ENCRYPTED';
            delete value['ui.email.protocolAndEncryption'];
        }
        return value;
    }
    getDirtyValues() {
        const dirtyValues = {};
        Object.keys(this.form.controls).forEach(key => {
            const currentControl = this.form.controls[key];
            if (currentControl.dirty) {
                dirtyValues[key] = currentControl.value;
            }
        });
        return dirtyValues;
    }
    emitForm() {
        if (this.form.valid) {
            const changedValues = this.getDirtyValues();
            const convertedValue = this.beforeSave(changedValues);
            this.onSave.emit(convertedValue);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PlatformConfigurationFormComponent, deps: [{ token: i1.PlatformConfigurationFormProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: PlatformConfigurationFormComponent, selector: "c8y-platform-configuration-form", inputs: { _optionsGroups: ["optionsGroups", "_optionsGroups"], readOnly: "readOnly", formValue: "formValue" }, outputs: { onSave: "onSave" }, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div class=\"row\">\n    <div class=\"col-lg-12 col-lg-max\">\n      <div class=\"card card--fullpage\">\n        <div class=\"card-header separator\">\n          <div class=\"card-title\">\n            {{ 'Configuration' | translate }}\n          </div>\n        </div>\n        <div class=\"inner-scroll\">\n          <div class=\"card-block\">\n            <div>\n              <fieldset\n                class=\"row schema-form-fieldset separator-bottom p-t-24\"\n                *ngFor=\"let category of optionsGroups\"\n              >\n                <div class=\"col-sm-3 col-md-2 p-l-24 p-l-xs-8 p-b-8\">\n                  <div\n                    class=\"h4 text-normal text-right text-left-xs\"\n                    data-cy=\"fieldset--section-title\"\n                  >\n                    {{ category.title | translate }}\n                  </div>\n                </div>\n                <div class=\"col-sm-9 col-md-8\">\n                  <div\n                    class=\"form-group\"\n                    *ngFor=\"let field of category.items\"\n                  >\n                    <ng-container [ngSwitch]=\"field.type\">\n                      <ng-container *ngSwitchCase=\"'string'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"stringTemplate; context: { $implicit: field }\"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-container *ngSwitchCase=\"'number'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"numberTemplate; context: { $implicit: field }\"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-container *ngSwitchCase=\"'password'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"passwordTemplate; context: { $implicit: field }\"\n                        ></ng-container>\n                      </ng-container>\n\n                      <ng-container *ngSwitchCase=\"'textarea'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"textareaTemplate; context: { $implicit: field }\"\n                        ></ng-container>\n                      </ng-container>\n\n                      <ng-container *ngSwitchCase=\"'boolean'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"booleanTemplate; context: { $implicit: field }\"\n                        ></ng-container>\n                      </ng-container>\n\n                      <ng-container *ngSwitchCase=\"'select'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"selectTemplate; context: { $implicit: field }\"\n                        ></ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </div>\n                </div>\n              </fieldset>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"card-footer separator\">\n          <button\n            class=\"btn btn-primary\"\n            [title]=\"'Save configuration' | translate\"\n            type=\"submit\"\n            (click)=\"emitForm()\"\n            [disabled]=\"!form.dirty || form.invalid || form.disabled\"\n          >\n            <span translate>Save</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-template\n    #stringTemplate\n    let-field\n  >\n    <c8y-form-group>\n      <label\n        title=\"{{ field.title | translate }}\"\n        [for]=\"field.formId\"\n      >\n        {{ field.title | translate }}\n      </label>\n      <input\n        class=\"text-truncate form-control\"\n        [title]=\"field.title | translate\"\n        type=\"text\"\n        [id]=\"field.formId\"\n        [formControlName]=\"field.formId\"\n        [placeholder]=\"field.placeholder || '' | translate : field.placeholderParams\"\n      />\n      <div\n        class=\"help-block\"\n        *ngIf=\"field.description\"\n      >\n        {{ field.description | translate : field.descriptionTranslateParams }}\n      </div>\n    </c8y-form-group>\n  </ng-template>\n\n  <ng-template\n    #passwordTemplate\n    let-field\n  >\n    <c8y-form-group>\n      <label\n        title=\"{{ field.title | translate }}\"\n        [for]=\"field.formId\"\n      >\n        {{ field.title | translate }}\n      </label>\n      <input\n        class=\"text-truncate form-control\"\n        [title]=\"field.title | translate\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n        [id]=\"field.formId\"\n        [formControlName]=\"field.formId\"\n        [placeholder]=\"field.placeholder || '' | translate : field.placeholderParams\"\n      />\n      <div\n        class=\"help-block\"\n        *ngIf=\"field.description\"\n      >\n        {{ field.description | translate : field.descriptionTranslateParams }}\n      </div>\n    </c8y-form-group>\n  </ng-template>\n\n  <ng-template\n    #numberTemplate\n    let-field\n  >\n    <c8y-form-group>\n      <label\n        title=\"{{ field.title | translate }}\"\n        [for]=\"field.formId\"\n      >\n        {{ field.title | translate }}\n      </label>\n      <input\n        class=\"text-truncate form-control\"\n        [title]=\"field.title | translate\"\n        type=\"number\"\n        [id]=\"field.formId\"\n        [formControlName]=\"field.formId\"\n        [placeholder]=\"field.placeholder || '' | translate : field.placeholderParams\"\n      />\n      <div\n        class=\"help-block\"\n        *ngIf=\"field.description\"\n      >\n        {{ field.description | translate : field.descriptionTranslateParams }}\n      </div>\n    </c8y-form-group>\n  </ng-template>\n\n  <ng-template\n    #textareaTemplate\n    let-field\n  >\n    <c8y-form-group>\n      <label\n        title=\"{{ field.title | translate }}\"\n        [for]=\"field.formId\"\n      >\n        {{ field.title | translate }}\n      </label>\n      <textarea\n        class=\"form-control\"\n        [title]=\"field.title | translate\"\n        [id]=\"field.formId\"\n        [formControlName]=\"field.formId\"\n        [placeholder]=\"field.placeholder || '' | translate : field.placeholderParams\"\n        [rows]=\"10\"\n      ></textarea>\n      <div\n        class=\"help-block\"\n        *ngIf=\"field.description || field.lineBreakHint\"\n      >\n        <span *ngIf=\"field.description\">\n          {{ field.description | translate : field.descriptionTranslateParams }}\n        </span>\n        <span *ngIf=\"field.description && field.lineBreakHint\"><br /></span>\n        <span *ngIf=\"field.lineBreakHint\">{{ lineBreakHint | translate }}</span>\n      </div>\n    </c8y-form-group>\n  </ng-template>\n\n  <ng-template\n    #booleanTemplate\n    let-field\n  >\n    <c8y-form-group>\n      <label\n        class=\"c8y-checkbox\"\n        title=\"{{ field.title | translate }}\"\n      >\n        <input\n          [title]=\"field.title | translate\"\n          type=\"checkbox\"\n          [formControlName]=\"field.formId\"\n        />\n        <span></span>\n        <span>{{ field.title | translate }}</span>\n      </label>\n\n      <div\n        class=\"help-block\"\n        *ngIf=\"field.description\"\n      >\n        {{ field.description | translate : field.descriptionTranslateParams }}\n      </div>\n    </c8y-form-group>\n  </ng-template>\n\n  <ng-template\n    #selectTemplate\n    let-field\n  >\n    <c8y-form-group>\n      <label\n        title=\"{{ field.title | translate }}\"\n        [for]=\"field.formId\"\n      >\n        <span>{{ field.title | translate }}</span>\n      </label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          [id]=\"field.formId\"\n          [formControlName]=\"field.formId\"\n        >\n          <option></option>\n          <option\n            *ngFor=\"let option of field.options\"\n            [value]=\"option.value\"\n          >\n            {{ option.name | translate }}\n          </option>\n        </select>\n        <span></span>\n      </div>\n\n      <div\n        class=\"help-block\"\n        *ngIf=\"field.description\"\n      >\n        {{ field.description | translate : field.descriptionTranslateParams }}\n      </div>\n    </c8y-form-group>\n  </ng-template>\n</form>\n", dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PlatformConfigurationFormComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-platform-configuration-form', template: "<form [formGroup]=\"form\">\n  <div class=\"row\">\n    <div class=\"col-lg-12 col-lg-max\">\n      <div class=\"card card--fullpage\">\n        <div class=\"card-header separator\">\n          <div class=\"card-title\">\n            {{ 'Configuration' | translate }}\n          </div>\n        </div>\n        <div class=\"inner-scroll\">\n          <div class=\"card-block\">\n            <div>\n              <fieldset\n                class=\"row schema-form-fieldset separator-bottom p-t-24\"\n                *ngFor=\"let category of optionsGroups\"\n              >\n                <div class=\"col-sm-3 col-md-2 p-l-24 p-l-xs-8 p-b-8\">\n                  <div\n                    class=\"h4 text-normal text-right text-left-xs\"\n                    data-cy=\"fieldset--section-title\"\n                  >\n                    {{ category.title | translate }}\n                  </div>\n                </div>\n                <div class=\"col-sm-9 col-md-8\">\n                  <div\n                    class=\"form-group\"\n                    *ngFor=\"let field of category.items\"\n                  >\n                    <ng-container [ngSwitch]=\"field.type\">\n                      <ng-container *ngSwitchCase=\"'string'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"stringTemplate; context: { $implicit: field }\"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-container *ngSwitchCase=\"'number'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"numberTemplate; context: { $implicit: field }\"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-container *ngSwitchCase=\"'password'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"passwordTemplate; context: { $implicit: field }\"\n                        ></ng-container>\n                      </ng-container>\n\n                      <ng-container *ngSwitchCase=\"'textarea'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"textareaTemplate; context: { $implicit: field }\"\n                        ></ng-container>\n                      </ng-container>\n\n                      <ng-container *ngSwitchCase=\"'boolean'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"booleanTemplate; context: { $implicit: field }\"\n                        ></ng-container>\n                      </ng-container>\n\n                      <ng-container *ngSwitchCase=\"'select'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"selectTemplate; context: { $implicit: field }\"\n                        ></ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </div>\n                </div>\n              </fieldset>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"card-footer separator\">\n          <button\n            class=\"btn btn-primary\"\n            [title]=\"'Save configuration' | translate\"\n            type=\"submit\"\n            (click)=\"emitForm()\"\n            [disabled]=\"!form.dirty || form.invalid || form.disabled\"\n          >\n            <span translate>Save</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-template\n    #stringTemplate\n    let-field\n  >\n    <c8y-form-group>\n      <label\n        title=\"{{ field.title | translate }}\"\n        [for]=\"field.formId\"\n      >\n        {{ field.title | translate }}\n      </label>\n      <input\n        class=\"text-truncate form-control\"\n        [title]=\"field.title | translate\"\n        type=\"text\"\n        [id]=\"field.formId\"\n        [formControlName]=\"field.formId\"\n        [placeholder]=\"field.placeholder || '' | translate : field.placeholderParams\"\n      />\n      <div\n        class=\"help-block\"\n        *ngIf=\"field.description\"\n      >\n        {{ field.description | translate : field.descriptionTranslateParams }}\n      </div>\n    </c8y-form-group>\n  </ng-template>\n\n  <ng-template\n    #passwordTemplate\n    let-field\n  >\n    <c8y-form-group>\n      <label\n        title=\"{{ field.title | translate }}\"\n        [for]=\"field.formId\"\n      >\n        {{ field.title | translate }}\n      </label>\n      <input\n        class=\"text-truncate form-control\"\n        [title]=\"field.title | translate\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n        [id]=\"field.formId\"\n        [formControlName]=\"field.formId\"\n        [placeholder]=\"field.placeholder || '' | translate : field.placeholderParams\"\n      />\n      <div\n        class=\"help-block\"\n        *ngIf=\"field.description\"\n      >\n        {{ field.description | translate : field.descriptionTranslateParams }}\n      </div>\n    </c8y-form-group>\n  </ng-template>\n\n  <ng-template\n    #numberTemplate\n    let-field\n  >\n    <c8y-form-group>\n      <label\n        title=\"{{ field.title | translate }}\"\n        [for]=\"field.formId\"\n      >\n        {{ field.title | translate }}\n      </label>\n      <input\n        class=\"text-truncate form-control\"\n        [title]=\"field.title | translate\"\n        type=\"number\"\n        [id]=\"field.formId\"\n        [formControlName]=\"field.formId\"\n        [placeholder]=\"field.placeholder || '' | translate : field.placeholderParams\"\n      />\n      <div\n        class=\"help-block\"\n        *ngIf=\"field.description\"\n      >\n        {{ field.description | translate : field.descriptionTranslateParams }}\n      </div>\n    </c8y-form-group>\n  </ng-template>\n\n  <ng-template\n    #textareaTemplate\n    let-field\n  >\n    <c8y-form-group>\n      <label\n        title=\"{{ field.title | translate }}\"\n        [for]=\"field.formId\"\n      >\n        {{ field.title | translate }}\n      </label>\n      <textarea\n        class=\"form-control\"\n        [title]=\"field.title | translate\"\n        [id]=\"field.formId\"\n        [formControlName]=\"field.formId\"\n        [placeholder]=\"field.placeholder || '' | translate : field.placeholderParams\"\n        [rows]=\"10\"\n      ></textarea>\n      <div\n        class=\"help-block\"\n        *ngIf=\"field.description || field.lineBreakHint\"\n      >\n        <span *ngIf=\"field.description\">\n          {{ field.description | translate : field.descriptionTranslateParams }}\n        </span>\n        <span *ngIf=\"field.description && field.lineBreakHint\"><br /></span>\n        <span *ngIf=\"field.lineBreakHint\">{{ lineBreakHint | translate }}</span>\n      </div>\n    </c8y-form-group>\n  </ng-template>\n\n  <ng-template\n    #booleanTemplate\n    let-field\n  >\n    <c8y-form-group>\n      <label\n        class=\"c8y-checkbox\"\n        title=\"{{ field.title | translate }}\"\n      >\n        <input\n          [title]=\"field.title | translate\"\n          type=\"checkbox\"\n          [formControlName]=\"field.formId\"\n        />\n        <span></span>\n        <span>{{ field.title | translate }}</span>\n      </label>\n\n      <div\n        class=\"help-block\"\n        *ngIf=\"field.description\"\n      >\n        {{ field.description | translate : field.descriptionTranslateParams }}\n      </div>\n    </c8y-form-group>\n  </ng-template>\n\n  <ng-template\n    #selectTemplate\n    let-field\n  >\n    <c8y-form-group>\n      <label\n        title=\"{{ field.title | translate }}\"\n        [for]=\"field.formId\"\n      >\n        <span>{{ field.title | translate }}</span>\n      </label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          [id]=\"field.formId\"\n          [formControlName]=\"field.formId\"\n        >\n          <option></option>\n          <option\n            *ngFor=\"let option of field.options\"\n            [value]=\"option.value\"\n          >\n            {{ option.name | translate }}\n          </option>\n        </select>\n        <span></span>\n      </div>\n\n      <div\n        class=\"help-block\"\n        *ngIf=\"field.description\"\n      >\n        {{ field.description | translate : field.descriptionTranslateParams }}\n      </div>\n    </c8y-form-group>\n  </ng-template>\n</form>\n" }]
        }], ctorParameters: () => [{ type: i1.PlatformConfigurationFormProviderService }], propDecorators: { _optionsGroups: [{
                type: Input,
                args: ['optionsGroups']
            }], readOnly: [{
                type: Input
            }], formValue: [{
                type: Input
            }], onSave: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 