ng-configcat-publicapi-ui 2.3.2 → 2.3.3

package/fesm2015/ng-configcat-publicapi-ui.js

@@ -1,28 +1,41 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, Component, Input, EventEmitter, Output, forwardRef, Inject, ChangeDetectorRef, NgModule } from '@angular/core';
-import * as i1 from '@angular/common/http';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { Injectable, Optional, Component, Input, Inject, EventEmitter, Output, forwardRef, NgModule } from '@angular/core';
 import { MeService, Configuration as Configuration$1, ProductsService, ConfigsService, EnvironmentsService, FeatureFlagsSettingsService, FeatureFlagSettingValuesService, IntegrationLinksService, SettingType, RolloutRuleComparator, ApiModule } from 'ng-configcat-publicapi';
-import { throwError } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import { throwError, of } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
-import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, Validators, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { Validators, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatOptionModule } from '@angular/material/core';
-import { MatSelectModule } from '@angular/material/select';
+import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as semver from 'semver';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import * as i5$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i2$2 from '@angular/material/snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i8 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { valid } from 'semver';
+import * as i3$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
+import * as i4$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { RouterModule } from '@angular/router';
+import * as i4$2 from '@angular/material/core';
+import { MatOptionModule } from '@angular/material/core';
+import * as i5$2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3$3 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatMenuModule } from '@angular/material/menu';
 
 class Configuration {
@@ -30,9 +43,11 @@ class Configuration {
         this.basePath = 'https://api.configcat.com';
     }
 }
-Configuration.decorators = [
-    { type: Injectable }
-];
+Configuration.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: Configuration, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+Configuration.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: Configuration });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: Configuration, decorators: [{
+            type: Injectable
+        }] });
 
 class PublicApiService {
     constructor(httpClient, configuration) {
@@ -89,14 +104,14 @@ class PublicApiService {
         }));
     }
 }
-PublicApiService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PublicApiService_Factory() { return new PublicApiService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(Configuration, 8)); }, token: PublicApiService, providedIn: "root" });
-PublicApiService.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
-PublicApiService.ctorParameters = () => [
-    { type: HttpClient },
-    { type: Configuration, decorators: [{ type: Optional }] }
-];
+PublicApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: PublicApiService, deps: [{ token: i1.HttpClient }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+PublicApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: PublicApiService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: PublicApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: Configuration, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 class BaseComponent {
     constructor(publicApiService) {
@@ -121,336 +136,68 @@ class BaseComponent {
         return this.publicApiService.createSettingValuesService(this.basicAuthUsername, this.basicAuthPassword, this.basePath);
     }
 }
-BaseComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'base',
-                template: '<div></div>'
-            },] }
-];
-BaseComponent.ctorParameters = () => [
-    { type: PublicApiService }
-];
-BaseComponent.propDecorators = {
-    basePath: [{ type: Input }],
-    basicAuthUsername: [{ type: Input }],
-    basicAuthPassword: [{ type: Input }]
-};
-
-class SettingItemComponent extends BaseComponent {
-    constructor(publicApiService) {
-        super(publicApiService);
-        this.canEditSetting = true;
-        this.canDeleteSetting = true;
-        this.deleteSettingText = 'Delete setting';
-        this.showEnvironmentName = true;
-        this.editSettingRequested = new EventEmitter();
-        this.deleteSettingRequested = new EventEmitter();
-        this.loadSucceeded = new EventEmitter();
-        this.loadFailed = new EventEmitter();
-        this.saveSucceeded = new EventEmitter();
-        this.saveFailed = new EventEmitter();
-        this.formValuesChanged = new EventEmitter();
-        this.loadSettingValues = () => {
-            return this.createSettingValuesService().getSettingValue(this.environmentId, this.settingId)
-                .pipe(map(settingValue => {
-                this.settingValue = settingValue;
-                const settingValues = {
-                    settingValues: [settingValue],
-                    readOnly: settingValue.readOnly,
-                    config: settingValue.config,
-                    environment: settingValue.environment
-                };
-                this.loadSucceeded.emit(settingValues);
-                return settingValues;
-            }), catchError(error => {
-                this.loadFailed.emit(error);
-                return throwError(error);
-            }));
-        };
-        this.handleSave = (model) => {
-            if (model.settingValues.length === 0) {
-                return;
-            }
-            const updateModel = model.settingValues[0];
-            return this.createSettingValuesService().replaceSettingValue(this.environmentId, this.settingId, updateModel, model.reason)
-                .pipe(map(settingValue => {
-                this.settingValue = settingValue;
-                const settingValues = {
-                    settingValues: [settingValue],
-                    readOnly: settingValue.readOnly,
-                    config: settingValue.config,
-                    environment: settingValue.environment
-                };
-                this.saveSucceeded.emit(settingValues);
-                return settingValues;
-            }), catchError(error => {
-                this.saveFailed.emit(error);
-                return throwError(error);
-            }));
-        };
-    }
-    ngOnInit() {
-    }
-    onEditSettingRequested(setting) {
-        this.editSettingRequested.emit({
-            setting: setting.setting,
-            environment: this.settingValue.environment,
-            config: this.settingValue.config
-        });
-    }
-    onDeleteSettingRequested(setting) {
-        this.deleteSettingRequested.emit({
-            setting: setting.setting,
-            environment: this.settingValue.environment,
-            config: this.settingValue.config
-        });
-    }
-    onFormValuesChanged() {
-        this.formValuesChanged.emit();
-    }
-}
-SettingItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-setting-item',
-                template: "<configcat-setting-list [canEditSetting]=\"canEditSetting\" [canDeleteSetting]=\"canDeleteSetting\"\n    [onSave]=\"handleSave\" [loadSettingValues]=\"loadSettingValues\"\n    (editSettingRequested)=\"onEditSettingRequested($event)\" (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n    [deleteSettingText]=\"deleteSettingText\"\n    [showEnvironmentName]=\"showEnvironmentName\" (formValuesChanged)=\"onFormValuesChanged()\">\n</configcat-setting-list>",
-                styles: [".container{font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif;background-color:#f3f3f3;border:1px solid rgba(0,0,0,.12);border-radius:4px;margin:1em 0}.container .setting-full{position:relative;display:flex;flex-wrap:nowrap}.container .setting-full .setting-details{display:flex;flex-direction:column;width:400px;padding:1em 0 1em 1em}.container .setting-full .setting-details>*{margin:.5em}.container .setting-full .setting-details .setting-name{flex-direction:row}.container .setting-full .setting-details .setting-name .name{font-weight:bold;word-wrap:break-word;max-width:100%}.container .setting-full .setting-details .setting-key{word-wrap:break-word}.container .setting-full .setting-details .description{font-size:.8em}.container .setting-full .setting-details code{background-color:#d3d3d3;padding:3px 6px}.container .setting-full .rules-list{width:100%;padding:1em}.container .setting-full .targeting-button{margin-left:1rem;margin-bottom:1em}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;border-radius:4px;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;min-width:100px}.end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media (max-width: 1200px){.setting-full .setting-details{width:300px}}@media (max-width: 700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"]
-            },] }
-];
-SettingItemComponent.ctorParameters = () => [
-    { type: PublicApiService }
-];
-SettingItemComponent.propDecorators = {
-    productId: [{ type: Input }],
-    environmentId: [{ type: Input }],
-    configId: [{ type: Input }],
-    settingId: [{ type: Input }],
-    canEditSetting: [{ type: Input }],
-    canDeleteSetting: [{ type: Input }],
-    deleteSettingText: [{ type: Input }],
-    showEnvironmentName: [{ type: Input }],
-    editSettingRequested: [{ type: Output }],
-    deleteSettingRequested: [{ type: Output }],
-    loadSucceeded: [{ type: Output }],
-    loadFailed: [{ type: Output }],
-    saveSucceeded: [{ type: Output }],
-    saveFailed: [{ type: Output }],
-    formValuesChanged: [{ type: Output }]
-};
-
-class SettingSelectComponent extends BaseComponent {
-    constructor(publicApiService) {
-        super(publicApiService);
-    }
-    ngOnInit() {
-        this.settings = [];
-        this.reloadSettings();
-    }
-    ngOnChanges() {
-        this.reloadSettings();
-    }
-    reloadSettings() {
-        if (this.configId) {
-            this.createSettingsService().getSettings(this.configId).subscribe(settings => {
-                this.settings = settings;
-                if (this.settings.length > 0) {
-                    this.valueFormControl.setValue(this.settings[0].settingId);
-                }
-            });
-        }
-    }
-}
-SettingSelectComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-setting-select',
-                template: "<mat-form-field class=\"form-field\">\n    <mat-select placeholder=\"Feature flag or setting\" [formControl]=\"valueFormControl\" *ngIf=\"settings\" name=\"value\">\n        <mat-option *ngFor=\"let setting of settings\" [value]=\"setting.settingId\">{{setting.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>",
-                styles: [".form-field{width:100%}\n"]
-            },] }
-];
-SettingSelectComponent.ctorParameters = () => [
-    { type: PublicApiService }
-];
-SettingSelectComponent.propDecorators = {
-    valueFormControl: [{ type: Input }],
-    configId: [{ type: Input }]
-};
+BaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: BaseComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component });
+BaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: BaseComponent, selector: "base", inputs: { basePath: "basePath", basicAuthUsername: "basicAuthUsername", basicAuthPassword: "basicAuthPassword" }, ngImport: i0, template: '<div></div>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'base',
+                    template: '<div></div>'
+                }]
+        }], ctorParameters: function () { return [{ type: PublicApiService }]; }, propDecorators: { basePath: [{
+                type: Input
+            }], basicAuthUsername: [{
+                type: Input
+            }], basicAuthPassword: [{
+                type: Input
+            }] } });
 
-class ProductSelectComponent extends BaseComponent {
-    constructor(publicApiService) {
-        super(publicApiService);
+class ReasonDialogComponent {
+    constructor(dialogRef, formBuilder) {
+        this.dialogRef = dialogRef;
+        this.formBuilder = formBuilder;
     }
     ngOnInit() {
-        this.products = [];
-        this.createProductsService().getProducts().subscribe(products => {
-            this.products = products;
-            if (this.products.length > 0) {
-                this.valueFormControl.setValue(this.products[0].productId, {
-                    emitEvent: true,
-                    emitModelToViewChange: true, emitViewToModelChange: true
-                });
-            }
+        this.formGroup = this.formBuilder.group({
+            reason: ['', [Validators.required, Validators.maxLength(1000)]]
         });
     }
-}
-ProductSelectComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-product-select',
-                template: "<mat-form-field class=\"form-field\">\n    <mat-select placeholder=\"Product\" [formControl]=\"valueFormControl\" name=\"productValue\">\n        <mat-option *ngFor=\"let product of products\" [value]=\"product.productId\">{{product.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>",
-                styles: [".form-field{width:100%}\n"]
-            },] }
-];
-ProductSelectComponent.ctorParameters = () => [
-    { type: PublicApiService }
-];
-ProductSelectComponent.propDecorators = {
-    valueFormControl: [{ type: Input }]
-};
-
-class ConfigSelectComponent extends BaseComponent {
-    constructor(publicApiService) {
-        super(publicApiService);
-    }
-    ngOnInit() {
-        this.configs = [];
-        this.reloadConfigs();
-    }
-    ngOnChanges() {
-        this.reloadConfigs();
-    }
-    reloadConfigs() {
-        if (this.productId) {
-            this.createConfigsService().getConfigs(this.productId).subscribe(configs => {
-                this.configs = configs;
-                if (this.configs.length > 0) {
-                    this.valueFormControl.setValue(this.configs[0].configId);
-                }
-            });
-        }
-    }
-}
-ConfigSelectComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-config-select',
-                template: "<mat-form-field class=\"form-field\">\n    <mat-select placeholder=\"Config\" [formControl]=\"valueFormControl\" *ngIf=\"configs\" name=\"value\">\n        <mat-option *ngFor=\"let config of configs\" [value]=\"config.configId\">{{config.name}}</mat-option>\n    </mat-select>\n</mat-form-field>",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => ConfigSelectComponent),
-                        multi: true
-                    }
-                ],
-                styles: [".form-field{width:100%}\n"]
-            },] }
-];
-ConfigSelectComponent.ctorParameters = () => [
-    { type: PublicApiService }
-];
-ConfigSelectComponent.propDecorators = {
-    valueFormControl: [{ type: Input }],
-    productId: [{ type: Input }]
-};
-
-class EnvironmentSelectComponent extends BaseComponent {
-    constructor(publicApiService) {
-        super(publicApiService);
-    }
-    ngOnInit() {
-        this.environments = [];
-        this.reloadEnvironments();
-    }
-    ngOnChanges() {
-        this.reloadEnvironments();
-    }
-    reloadEnvironments() {
-        if (this.productId) {
-            this.createEnvironmentsService().getEnvironments(this.productId).subscribe(environments => {
-                this.environments = environments;
-                if (this.environments.length > 0) {
-                    this.valueFormControl.setValue(this.environments[0].environmentId);
-                }
-            });
-        }
-    }
-}
-EnvironmentSelectComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-environment-select',
-                template: "<mat-form-field class=\"form-field\">\n    <mat-select placeholder=\"Environment\" [formControl]=\"valueFormControl\" *ngIf=\"environments\" name=\"value\">\n        <mat-option *ngFor=\"let environment of environments\" [value]=\"environment.environmentId\">{{environment.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>",
-                styles: [".form-field{width:100%}\n"]
-            },] }
-];
-EnvironmentSelectComponent.ctorParameters = () => [
-    { type: PublicApiService }
-];
-EnvironmentSelectComponent.propDecorators = {
-    valueFormControl: [{ type: Input }],
-    productId: [{ type: Input }]
-};
-
-class FormHelper {
-    static getErrorMessage(control, hint = '') {
-        if (!control || control.valid) {
+    handleSaveButton() {
+        if (!this.formGroup.valid) {
             return;
         }
-        if (control.hasError('required')) {
-            return `${hint} The field is required.`;
-        }
-        if (control.hasError('pattern')) {
-            return 'Not a valid e-mail address.';
-        }
-        if (control.hasError('minlength')) {
-            return 'The field must be at least ' + control.errors.minlength.requiredLength + ' characters long';
-        }
-        if (control.hasError('maxlength')) {
-            return 'The field must be at max ' + control.errors.maxlength.requiredLength + ' characters long';
-        }
-        return;
+        this.dialogRef.close({ button: 'save', reason: this.formGroup.controls.reason.value });
+    }
+    cancel() {
+        this.dialogRef.close({ button: 'cancel' });
     }
 }
+ReasonDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: ReasonDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+ReasonDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: ReasonDialogComponent, selector: "configcat-reason-dialog", ngImport: i0, template: "<h3 mat-dialog-title>Add notes</h3>\n<p>This will appear in the Why column of the Audit Log.</p>\n<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSaveButton()\">\n  <div mat-dialog-content class=\"container\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label></mat-label>\n      <textarea matInput formControlName=\"reason\" name=\"reason\" placeholder=\"I'm changing settings because...\"\n        rows=\"3\"></textarea>\n      <mat-error *ngIf=\"formGroup.controls.reason.invalid\">The field is required.</mat-error>\n    </mat-form-field>\n  </div>\n  <br>\n  <div mat-dialog-actions>\n    <button type=\"submit\" style=\"margin-right: 10px;\" mat-raised-button color=\"primary\">Add notes & Save</button>\n    <button type=\"button\" mat-raised-button (click)=\"cancel()\">Cancel</button>\n  </div>\n</form>", styles: [".container>*{width:100%}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: ReasonDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-reason-dialog',
+                    templateUrl: './reason-dialog.component.html',
+                    styleUrls: ['./reason-dialog.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: i2.FormBuilder }]; } });
 
-class AuthorizationComponent {
-    constructor(formBuilder, publicApiService) {
-        this.formBuilder = formBuilder;
-        this.publicApiService = publicApiService;
-        this.basePath = null;
-        this.authorized = new EventEmitter();
-        this.FormHelper = FormHelper;
-    }
+class SaveSnackbarComponent {
+    constructor() { }
     ngOnInit() {
-        this.formGroup = this.formBuilder.group({
-            basicAuthUsername: ['', Validators.required],
-            basicAuthPassword: ['', Validators.required],
-        });
-    }
-    onSubmit() {
-        if (!this.formGroup.valid) {
-            return;
-        }
-        const meService = this.publicApiService.createMeService(this.formGroup.controls.basicAuthUsername.value, this.formGroup.controls.basicAuthPassword.value, this.basePath);
-        meService.getMe().subscribe(me => {
-            this.authorized.emit({
-                basicAuthUsername: this.formGroup.controls.basicAuthUsername.value,
-                basicAuthPassword: this.formGroup.controls.basicAuthPassword.value
-            });
-        }, error => {
-            this.formGroup.setErrors({ invalidAuthorization: 'Invalid Basic auth user name or password' });
-        });
     }
 }
-AuthorizationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-authorization',
-                template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"container\">\n        <div class=\"form\">\n            <p>\n                <a href=\"https://app.configcat.com/my-account/public-api-credentials\" target=\"_blank\">\n                    Get your Basic Auth user name and password</a> to access ConfigCat Public API.\n                <br /><br />\n                <b>Note!</b> Your ConfigCat account's email address and password will not work here.\n            </p>\n\n            <mat-form-field class=\"form-field\">\n                <mat-label>Basic auth user name</mat-label>\n                <input matInput placeholder=\"Basic auth user name\" formControlName=\"basicAuthUsername\">\n                <mat-error *ngIf=\"formGroup.controls.basicAuthUsername.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.basicAuthUsername)}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"form-field\">\n                <mat-label>Basic auth password</mat-label>\n                <input matInput placeholder=\"Basic auth password\" formControlName=\"basicAuthPassword\" type=\"password\"\n                    autocomplete=\"current-password\">\n                <mat-error *ngIf=\"formGroup.controls.basicAuthPassword.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.basicAuthPassword)}}\n                </mat-error>\n            </mat-form-field>\n            <div>\n                <button mat-raised-button color=\"primary\" type=\"submit\" class=\"submit\">Authorize</button>\n                <mat-error *ngIf=\"formGroup.invalid && formGroup.errors && formGroup.errors.invalidAuthorization\">\n                    {{formGroup.errors.invalidAuthorization}}</mat-error>\n            </div>\n        </div>\n    </div>\n</form>",
-                styles: [".container{display:flex;margin:8px}.form{width:100%}.form-field{width:100%;margin-bottom:8px}.submit{margin-top:8px;margin-bottom:8px}\n"]
-            },] }
-];
-AuthorizationComponent.ctorParameters = () => [
-    { type: FormBuilder },
-    { type: PublicApiService }
-];
-AuthorizationComponent.propDecorators = {
-    basePath: [{ type: Input }],
-    authorized: [{ type: Output }]
-};
+SaveSnackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SaveSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SaveSnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SaveSnackbarComponent, selector: "configcat-save-snackbar", ngImport: i0, template: "<p class=\"header\">Settings saved successfully.</p>", styles: ["p{text-align:center;font-weight:bold}.header{font-size:1.2em}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SaveSnackbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-save-snackbar',
+                    templateUrl: './save-snackbar.component.html',
+                    styleUrls: ['./save-snackbar.component.scss']
+                }]
+        }], ctorParameters: function () { return []; } });
 
 class ConcurrentDialogComponent {
     constructor(dialogRef) {
@@ -465,200 +212,252 @@ class ConcurrentDialogComponent {
         this.dialogRef.close({ button: 'discard' });
     }
 }
-ConcurrentDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-concurrent-dialog',
-                template: "<h3 mat-dialog-title>Concurrent update detected</h3>\n<p>\n    Somebody updated the feature flags & settings while you were editing them.\n</p>\n<ul>\n    <li>\n        To discard your local changes and reload the updated values, click <strong>Discard my changes & reload</strong>\n    </li>\n    <li>\n        To save you local values and overwrite the remote changes, click <strong>Save anyway</strong>\n    </li>\n</ul>\n<p>For more info about the changes check the <a [routerLink]=\"['/auditlog']\" target=\"_blank\" rel=\"noopener noreferrer\" >audit logs</a> in a new tab.</p>\n<div mat-dialog-actions>\n    <button type=\"button\" style=\"margin-right: 10px;\" mat-raised-button color=\"primary\" (click)=\"discard()\">Discard\n        local changes & reload</button>\n    <button type=\"button\" mat-raised-button (click)=\"save()\">Save anyway</button>\n</div>",
-                styles: [""]
-            },] }
-];
-ConcurrentDialogComponent.ctorParameters = () => [
-    { type: MatDialogRef }
-];
+ConcurrentDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: ConcurrentDialogComponent, deps: [{ token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ConcurrentDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: ConcurrentDialogComponent, selector: "configcat-concurrent-dialog", ngImport: i0, template: "<h3 mat-dialog-title>Concurrent update detected</h3>\n<p>\n    Somebody updated the feature flags & settings while you were editing them.\n</p>\n<ul>\n    <li>\n        To discard your local changes and reload the updated values, click <strong>Discard my changes & reload</strong>\n    </li>\n    <li>\n        To save you local values and overwrite the remote changes, click <strong>Save anyway</strong>\n    </li>\n</ul>\n<p>For more info about the changes check the <a [routerLink]=\"['/auditlog']\" target=\"_blank\" rel=\"noopener noreferrer\" >audit logs</a> in a new tab.</p>\n<div mat-dialog-actions>\n    <button type=\"button\" style=\"margin-right: 10px;\" mat-raised-button color=\"primary\" (click)=\"discard()\">Discard\n        local changes & reload</button>\n    <button type=\"button\" mat-raised-button (click)=\"save()\">Save anyway</button>\n</div>", styles: [""], components: [{ type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i3$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: ConcurrentDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-concurrent-dialog',
+                    templateUrl: './concurrent-dialog.component.html',
+                    styleUrls: ['./concurrent-dialog.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }]; } });
 
-class ExpandDialogComponent {
-    constructor(dialogRef, formBuilder, data) {
-        this.dialogRef = dialogRef;
+class SettingListFormHelper {
+    constructor(formBuilder) {
         this.formBuilder = formBuilder;
-        this.data = data;
-    }
-    ngOnInit() {
-        if (this.data.multiline) {
-            this.buildFormGroup();
-        }
-        else {
-            this.formControlSubscription = this.data.control.valueChanges.subscribe(value => {
-                this.data.control.setValue(value, { onlySelf: true, emitEvent: false, emitModelToViewChange: true });
-                this.data.control.markAsDirty();
-            }, error => { }, () => { });
-        }
-    }
-    values() {
-        return this.formGroup.get('values');
     }
-    buildFormGroup() {
-        const value = this.data.control.value ? this.data.control.value : '';
-        const list = value.split(',').map(v => v.trim()).filter(v => !!v);
-        this.formGroup = this.formBuilder.group({
-            values: this.formBuilder.array(list.map(v => this.formBuilder.control(v)))
-        });
-        this.formGroupSubscription = this.formGroup.valueChanges.subscribe((formGroupValue) => {
-            this.data.control.setValue(formGroupValue.values
-                .filter(v => !!v)
-                .join(','), { onlySelf: true, emitEvent: false, emitModelToViewChange: true });
-            this.data.control.updateValueAndValidity();
-            this.data.control.markAsDirty();
-        });
+    createSettingValuesFormGroup(settingValuesModel) {
+        const formGroup = this.formBuilder.group({
+            settingValues: this.formBuilder.array(settingValuesModel.settingValues.map(sv => {
+                return this.createSettingValueFormGroup(sv, settingValuesModel.readOnly);
+            })),
+            // Decorator
+            environment: this.formBuilder.group({
+                environmentId: [{ value: settingValuesModel.environment.environmentId, disabled: true }],
+                name: [{ value: settingValuesModel.environment.name, disabled: true }],
+            }),
+            comparisonAttributes: [[]],
+            allRolloutRulesCount: [0]
+        });
+        const rolloutRules = this.getAllRolloutRules(formGroup);
+        const comparisonAttributes = this.getComparisonAttributes(rolloutRules);
+        formGroup.patchValue({ allRolloutRulesCount: rolloutRules.length });
+        formGroup.patchValue({ comparisonAttributes: comparisonAttributes });
+        return formGroup;
     }
-    add() {
-        this.formGroup.controls.values.push(this.formBuilder.control(''));
+    createSettingValueFormGroup(settingValueModel, readOnly) {
+        if (!settingValueModel.setting) {
+            return this.formBuilder.group({});
+        }
+        return this.formBuilder.group({
+            settingId: [settingValueModel.setting.settingId],
+            value: [
+                { value: settingValueModel.value, disabled: readOnly },
+                this.getValidatorsForSettingType(settingValueModel.setting.settingType)
+            ],
+            rolloutPercentageItems: settingValueModel.rolloutPercentageItems
+                ? this.formBuilder.array(settingValueModel.rolloutPercentageItems.map(p => {
+                    // @ts-ignore()
+                    return this.createRolloutPercentageItemFormGroup(p, readOnly, settingValueModel.setting.settingType);
+                }))
+                : this.formBuilder.array([]), rolloutRules: settingValueModel.rolloutRules
+                ? this.formBuilder.array(settingValueModel.rolloutRules.map(r => {
+                    // @ts-ignore()
+                    return this.createRolloutRuleFormGroup(r, readOnly, settingValueModel.setting.settingType);
+                }))
+                : this.formBuilder.array([]),
+            updatedAt: [{ value: settingValueModel.updatedAt, disabled: true }],
+            lastUpdaterUserEmail: [{ value: settingValueModel.lastUpdaterUserEmail, disabled: true }],
+            lastUpdaterUserFullName: [{ value: settingValueModel.lastUpdaterUserFullName, disabled: true }],
+            rolloutPercentageItemsSum: [{ value: 100, disabled: false }, [Validators.min(100), Validators.max(100)]],
+            // Decoration
+            setting: this.formBuilder.group({
+                settingId: [{ value: settingValueModel.setting.settingId, disabled: true }],
+                key: [{ value: settingValueModel.setting.key, disabled: true }],
+                name: [{ value: settingValueModel.setting.name, disabled: true }],
+                hint: [{ value: settingValueModel.setting.hint, disabled: true }],
+                settingType: [{ value: settingValueModel.setting.settingType, disabled: true }],
+                creatorEmail: [{ value: settingValueModel.setting.creatorEmail, disabled: true }],
+                creatorFullName: [{ value: settingValueModel.setting.creatorFullName, disabled: true }],
+                createdAt: [{ value: settingValueModel.setting.createdAt, disabled: true }]
+            }),
+            integrationLinks: settingValueModel.integrationLinks ? this.formBuilder.array(settingValueModel.integrationLinks.map(il => {
+                return this.formBuilder.group({
+                    key: [{ value: il.key, disabled: true }],
+                    description: [{ value: il.description, disabled: true }],
+                    integrationLinkType: [{ value: il.integrationLinkType, disabled: true }],
+                    url: [{ value: il.url, disabled: true }],
+                });
+            })) : this.formBuilder.array([])
+        });
     }
-    remove(index) {
-        this.formGroup.controls.values.removeAt(index);
+    createRolloutPercentageItemFormGroup(p, readOnly, settingType) {
+        return this.formBuilder.group({
+            percentage: [{ value: p.percentage, disabled: readOnly }, [Validators.required, Validators.min(0), Validators.max(100)]],
+            value: [
+                { value: p.value, disabled: readOnly },
+                this.getValidatorsForSettingType(settingType)
+            ],
+            valueDisabled: [
+                { value: p.value, disabled: true }, // For percentage item value
+            ]
+        });
     }
-    ngOnDestroy() {
-        if (this.formControlSubscription) {
-            this.formControlSubscription.unsubscribe();
-            this.formControlSubscription = null;
-        }
-        if (this.formGroupSubscription) {
-            this.formGroupSubscription.unsubscribe();
-            this.formGroupSubscription = null;
+    createRolloutRuleFormGroup(r, readOnly, settingType) {
+        return this.formBuilder.group({
+            comparisonAttribute: [{ value: r.comparisonAttribute, disabled: readOnly }, [Validators.required]],
+            comparator: [{ value: r.comparator, disabled: readOnly }, [Validators.required]],
+            comparisonValue: [{ value: r.comparisonValue, disabled: readOnly }, [Validators.required]],
+            value: [
+                { value: r.value, disabled: readOnly },
+                this.getValidatorsForSettingType(settingType)
+            ],
+        });
+    }
+    getValidatorsForSettingType(settingType) {
+        switch (settingType) {
+            case SettingType.Int:
+                return [Validators.required,
+                    Validators.min(-2147483648), Validators.max(2147483647), Validators.pattern('^[-+]?[0-9]\\d*$')];
+            case SettingType.Double:
+                return [Validators.required, Validators.min(-1.79769313486232E+308), Validators.max(1.79769313486232E+308)];
+            case SettingType.String:
+            case SettingType.Boolean:
+                return [Validators.required];
+            default:
+                return [];
         }
     }
-    close() {
-        this.dialogRef.close();
+    getAllRolloutRules(formGroup) {
+        const settingValues = formGroup.get('settingValues');
+        const rolloutRules = settingValues.controls.map(cv => cv.get('rolloutRules').value);
+        return rolloutRules.length === 0 ? rolloutRules : rolloutRules.reduce((a, b) => a.concat(b));
+    }
+    getComparisonAttributes(rolloutRules) {
+        if (rolloutRules.length > 0) {
+            const currentComparisonAttributes = rolloutRules.map(r => r.comparisonAttribute);
+            const defaultComparisonAttributes = ['Identifier', 'Email', 'Country'];
+            const comparisonAttributes = currentComparisonAttributes.filter(c => defaultComparisonAttributes.indexOf(c) === -1);
+            return Array.from(new Set(comparisonAttributes));
+        }
+        else {
+            return [];
+        }
     }
 }
-ExpandDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-expand-dialog',
-                template: "<div mat-dialog-content class=\"container\">\n\n    <mat-form-field appearance=\"outline\" *ngIf=\"!data.multiline\">\n        <mat-label></mat-label>\n        <textarea matInput [formControl]=\"data.control\" rows=\"15\"></textarea>\n    </mat-form-field>\n    <div [formGroup]=\"formGroup\" *ngIf=\"data.multiline\">\n        <div *ngFor=\"let valueControl of values().controls; let i = index;\" class=\"value-field\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [formControl]=\"valueControl\" rows=\"15\" />\n            </mat-form-field>\n            <button (click)=\"remove(i)\" mat-icon-button type=\"button\">\n                <mat-icon>delete_outline</mat-icon>\n            </button>\n        </div>\n        <button (click)=\"add()\" mat-icon-button type=\"button\">\n            <mat-icon>add</mat-icon>\n        </button>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"close()\">Done</button>\n</div>",
-                styles: [".container>*{width:100%}.container>* .value-field{display:flex;font-size:12px;flex-wrap:nowrap}.container>* .value-field mat-form-field{flex-grow:1}\n"]
-            },] }
-];
-ExpandDialogComponent.ctorParameters = () => [
-    { type: MatDialogRef },
-    { type: FormBuilder },
-    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
-];
+SettingListFormHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SettingListFormHelper, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
+SettingListFormHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SettingListFormHelper, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SettingListFormHelper, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i2.FormBuilder }]; } });
 
-class ReasonDialogComponent {
-    constructor(dialogRef, formBuilder) {
+class ExpandDialogComponent {
+    constructor(dialogRef, formBuilder, data) {
         this.dialogRef = dialogRef;
         this.formBuilder = formBuilder;
+        this.data = data;
     }
     ngOnInit() {
-        this.formGroup = this.formBuilder.group({
-            reason: ['', [Validators.required, Validators.maxLength(1000)]]
-        });
-    }
-    handleSaveButton() {
-        if (!this.formGroup.valid) {
-            return;
+        if (this.data.multiline) {
+            this.buildFormGroup();
+        }
+        else {
+            this.formControlSubscription = this.data.control.valueChanges.subscribe((value) => {
+                this.data.control.setValue(value, { onlySelf: true, emitEvent: false, emitModelToViewChange: true });
+                this.data.control.markAsDirty();
+            }, () => { }, () => { });
         }
-        this.dialogRef.close({ button: 'save', reason: this.formGroup.controls.reason.value });
-    }
-    cancel() {
-        this.dialogRef.close({ button: 'cancel' });
-    }
-}
-ReasonDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-reason-dialog',
-                template: "<h3 mat-dialog-title>Add notes</h3>\n<p>This will appear in the Why column of the Audit Log.</p>\n<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSaveButton()\">\n  <div mat-dialog-content class=\"container\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label></mat-label>\n      <textarea matInput formControlName=\"reason\" name=\"reason\" placeholder=\"I'm changing settings because...\"\n        rows=\"3\"></textarea>\n      <mat-error *ngIf=\"formGroup.controls.reason.invalid\">The field is required.</mat-error>\n    </mat-form-field>\n  </div>\n  <br>\n  <div mat-dialog-actions>\n    <button type=\"submit\" style=\"margin-right: 10px;\" mat-raised-button color=\"primary\">Add notes & Save</button>\n    <button type=\"button\" mat-raised-button (click)=\"cancel()\">Cancel</button>\n  </div>\n</form>",
-                styles: [".container>*{width:100%}\n"]
-            },] }
-];
-ReasonDialogComponent.ctorParameters = () => [
-    { type: MatDialogRef },
-    { type: FormBuilder }
-];
-
-class SaveSnackbarComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-SaveSnackbarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-save-snackbar',
-                template: "<p class=\"header\">Settings saved successfully.</p>",
-                styles: ["p{text-align:center;font-weight:bold}.header{font-size:1.2em}\n"]
-            },] }
-];
-SaveSnackbarComponent.ctorParameters = () => [];
-
-class RolloutPercentageItemsComponent {
-    constructor() {
-        this.SettingType = SettingType;
     }
-    setting() {
-        return this.formGroup.get('setting').value;
+    values() {
+        return this.formGroup.get('values');
     }
-    rolloutRules() {
-        return this.formGroup.get('rolloutRules');
+    getValueControls() {
+        return this.values().controls.map(c => c);
     }
-    rolloutPercentageItems() {
-        return this.formGroup.get('rolloutPercentageItems');
+    buildFormGroup() {
+        const value = this.data.control.value ? this.data.control.value : '';
+        const list = value.split(',').map((v) => v.trim()).filter((v) => !!v);
+        this.formGroup = this.formBuilder.group({
+            values: this.formBuilder.array(list.map((v) => this.formBuilder.control(v)))
+        });
+        this.formGroupSubscription = this.formGroup.valueChanges.subscribe((formGroupValue) => {
+            this.data.control.setValue(formGroupValue.values
+                .filter((v) => !!v)
+                .join(','), { onlySelf: true, emitEvent: false, emitModelToViewChange: true });
+            this.data.control.updateValueAndValidity();
+            this.data.control.markAsDirty();
+        });
     }
-    rolloutPercentageItemsSum() {
-        return this.formGroup.get('rolloutPercentageItemsSum');
+    add() {
+        this.formGroup.controls.values.push(this.formBuilder.control(''));
     }
-    value(rolloutPercentageItem) {
-        return this.setting().settingType === SettingType.Boolean ?
-            rolloutPercentageItem.get('valueDisabled') :
-            rolloutPercentageItem.get('value');
+    remove(index) {
+        this.formGroup.controls.values.removeAt(index);
     }
-    percentageChanged(index) {
-        if (this.rolloutPercentageItems().controls[index].value.percentage < 0) {
-            this.rolloutPercentageItems().controls[index].controls.percentage.setValue(0);
-        }
-        if (this.rolloutPercentageItems().controls[index].value.percentage > 100) {
-            this.rolloutPercentageItems().controls[index].controls.percentage.setValue(100);
+    ngOnDestroy() {
+        if (this.formControlSubscription) {
+            this.formControlSubscription.unsubscribe();
+            this.formControlSubscription = null;
         }
-        if (this.rolloutPercentageItems().controls.length === 2) {
-            this.rolloutPercentageItems().controls[1 - index].controls.percentage
-                .setValue(100 - this.rolloutPercentageItems().controls[index].value.percentage);
+        if (this.formGroupSubscription) {
+            this.formGroupSubscription.unsubscribe();
+            this.formGroupSubscription = null;
         }
-        this.updateSum();
     }
-    updateSum() {
-        if (this.rolloutPercentageItems().controls.length === 0) {
-            this.rolloutPercentageItemsSum().setValue(100);
-        }
-        else {
-            this.rolloutPercentageItemsSum().setValue(this.rolloutPercentageItems().controls.map(v => v.value.percentage)
-                .reduce((a, b) => a + b));
-        }
+    close() {
+        this.dialogRef.close();
     }
-    removeRolloutPercentageItem(index) {
-        this.rolloutPercentageItems().removeAt(index);
-        this.rolloutPercentageItems().markAsDirty();
-        this.updateSum();
+}
+ExpandDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: ExpandDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i2.FormBuilder }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ExpandDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: ExpandDialogComponent, selector: "configcat-expand-dialog", ngImport: i0, template: "<div mat-dialog-content class=\"container\">\n\n    <mat-form-field appearance=\"outline\" *ngIf=\"!data.multiline\">\n        <mat-label></mat-label>\n        <textarea matInput [formControl]=\"data.control\" rows=\"15\"></textarea>\n    </mat-form-field>\n    <div [formGroup]=\"formGroup\" *ngIf=\"data.multiline\">\n        <div *ngFor=\"let valueControl of getValueControls(); let i = index;\"\n            class=\"value-field\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [formControl]=\"valueControl\" rows=\"15\" />\n            </mat-form-field>\n            <button (click)=\"remove(i)\" mat-icon-button type=\"button\">\n                <mat-icon>delete_outline</mat-icon>\n            </button>\n        </div>\n        <button (click)=\"add()\" mat-icon-button type=\"button\">\n            <mat-icon>add</mat-icon>\n        </button>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"close()\">Done</button>\n</div>", styles: [".container>*{width:100%}.container>* .value-field{display:flex;font-size:12px;flex-wrap:nowrap}.container>* .value-field mat-form-field{flex-grow:1}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: ExpandDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-expand-dialog',
+                    templateUrl: './expand-dialog.component.html',
+                    styleUrls: ['./expand-dialog.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: i2.FormBuilder }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+
+class ValueComponent {
+    constructor(dialog) {
+        this.dialog = dialog;
+        this.SettingType = SettingType;
     }
-    removeAll() {
-        this.rolloutPercentageItems().clear();
-        this.rolloutPercentageItems().markAsDirty();
-        this.updateSum();
+    popOut() {
+        this.dialog.open(ExpandDialogComponent, {
+            width: '640px',
+            data: { control: this.valueFormControl }
+        });
     }
 }
-RolloutPercentageItemsComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-rollout-percentage-items',
-                template: "<div class=\"percentage-wrapper\" [formGroup]=\"formGroup\">\n\n    <div class=\"if\" *ngIf=\"rolloutRules().controls.length > 0\">\n        <mat-chip-list>\n            <mat-chip class=\"chip\">ELSE IF</mat-chip>\n        </mat-chip-list>\n    </div>\n    <div class=\"grow\">\n        <div class=\"percentage-row flex\"\n            *ngFor=\"let rolloutPercentageItem of rolloutPercentageItems().controls; let i = index\">\n            <div class=\"flex\">\n                <input type=\"number\" [formControl]=\"rolloutPercentageItem.controls.percentage\"\n                    (input)=\"percentageChanged(i)\">%\n                <span class=\"users\">of <a href=\"https://configcat.com/docs/advanced/user-object\"\n                        target=\"_blank\" rel=\"noopener noreferrer\">users</a>\n                </span>\n            </div>\n\n            <div class=\"delete-option\" matTooltip=\"Remove this % option\"\n                *ngIf=\"!readOnly && rolloutPercentageItems().controls.length > 2\"\n                (click)=\"removeRolloutPercentageItem(i)\">\n                <mat-icon>cancel</mat-icon>\n            </div>\n\n            <span data-tooltip=\"The sum of percentages must be equal to 100.\"\n                *ngIf=\"(i === rolloutPercentageItems().controls.length -1) && (rolloutPercentageItemsSum().invalid)\">\n                <mat-icon color=\"warn\">\n                    error_outline\n                </mat-icon>\n            </span>\n\n            <div class=\"value flex\">\n                <span class=\"value-name\" *ngIf=\"setting().settingType !== SettingType.Boolean\">Served value:</span>\n                <configcat-value class=\"served-value\" [valueFormControl]=\"value(rolloutPercentageItem)\" [setting]=\"setting()\">\n                </configcat-value>\n            </div>\n            <div class=\"delete\" matTooltip=\"Remove % options\" (click)=\"removeAll()\" *ngIf=\"!readOnly\">\n                <mat-icon>cancel</mat-icon>\n            </div>\n        </div>\n    </div>\n</div>",
-                styles: [".percentage-wrapper{border:1px solid #d5d5d5;background-color:#fff;border-radius:4px;margin:.5em 1em;position:relative;padding:.5em 0;display:flex}.percentage-wrapper .delete{position:absolute;color:#d6a9a9;cursor:pointer;top:-8px;right:-12px}.percentage-wrapper .delete:hover{color:#ed5251}.percentage-wrapper .delete mat-icon{font-size:20px}.percentage-wrapper .delete-option{color:#d6a9a9;cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover{color:#ed5251}.percentage-wrapper .delete-option mat-icon{font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{background-color:#67b1fc3d}.grow{flex-grow:1}.percentage-row{min-height:40px;margin-left:.5em}.flex{display:flex;flex-wrap:wrap;align-items:center}.value{margin-left:auto;min-width:100px}.value .value-name{display:none}input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;width:40px;margin-right:5px;font-size:15px;padding:0 5px;font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif;font-weight:300}.users{margin-left:20px}@media (max-width: 700px){.percentage-wrapper{margin:.5em .3em}}\n"]
-            },] }
-];
-RolloutPercentageItemsComponent.ctorParameters = () => [];
-RolloutPercentageItemsComponent.propDecorators = {
-    formGroup: [{ type: Input }],
-    readOnly: [{ type: Input }]
-};
+ValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: ValueComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+ValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: ValueComponent, selector: "configcat-value", inputs: { valueFormControl: "valueFormControl", setting: "setting" }, ngImport: i0, template: "<div class=\"flex\">\n  <div class=\"container\" [ngSwitch]=\"setting.settingType\">\n    <div *ngSwitchCase=\"SettingType.String\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"text\"\n             [formControl]=\"valueFormControl\" placeholder=\"my value\" name=\"value\">\n      <div class=\"expand\" (click)=\"popOut()\" matTooltip=\"Pop-out Editor\">\n        <mat-icon>height</mat-icon>\n      </div>\n    </div>\n    <div *ngSwitchCase=\"SettingType.Int\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"number\" [formControl]=\"valueFormControl\"\n             placeholder=\"42\" name=\"value\" />\n    </div>\n    <div *ngSwitchCase=\"SettingType.Double\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"number\" [formControl]=\"valueFormControl\"\n             placeholder=\"3.14\" name=\"value\">\n    </div>\n    <div *ngSwitchCase=\"SettingType.Boolean\" class=\"toggle\">\n      <label class=\"switch\">\n        <input type=\"checkbox\" [formControl]=\"valueFormControl\" name=\"value\" />\n        <span class=\"slider round\"></span>\n      </label>\n    </div>\n  </div>\n  <div *ngIf=\"setting.settingType === SettingType.Boolean\" class=\"spacer\"></div>\n\n</div>\n", styles: [".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ff5252;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:#fff;display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ".flex{display:flex;margin-right:20px;align-items:center}.flex .spacer{width:15px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container .toggle{width:66px;height:30px}.flex .container input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;font-size:15px;padding:0 30px 0 10px;font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif;font-weight:300;min-width:170px}.flex .container .invalid{border:1px solid #ff5252}.flex .container .error{color:#ff5252;margin-right:5px}@media (max-width: 1200px){.flex .container input{min-width:auto}}.flex .variationId{margin-left:5px;cursor:pointer;color:#888;display:flex;align-items:center}.flex .expand{position:relative;top:2px;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.flex .expand mat-icon{transform:rotate(45deg)}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: ValueComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-value',
+                    templateUrl: './value.component.html',
+                    styleUrls: [
+                        './slider.scss',
+                        './value.component.scss'
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }]; }, propDecorators: { valueFormControl: [{
+                type: Input
+            }], setting: [{
+                type: Input
+            }] } });
 
 class RolloutRulesComponent {
     constructor(dialog) {
         this.dialog = dialog;
+        this.readOnly = false;
         this.SettingType = SettingType;
         this.defaultComparisonAttributes = ['Identifier', 'Email', 'Country'];
         this.rolloutRuleComparators = [
@@ -683,16 +482,19 @@ class RolloutRulesComponent {
         ];
     }
     onlyFirstTooltip() {
-        return this.formGroup.root.get('allRolloutRulesCount').value > 20 || this.rolloutRules().controls.length > 10;
+        var _a;
+        return ((_a = this.formGroup.root.get('allRolloutRulesCount')) === null || _a === void 0 ? void 0 : _a.value) > 20 || this.rolloutRules().controls.length > 10;
     }
     setting() {
-        return this.formGroup.get('setting').value;
+        var _a;
+        return (_a = this.formGroup.get('setting')) === null || _a === void 0 ? void 0 : _a.value;
     }
     rolloutRules() {
         return this.formGroup.get('rolloutRules');
     }
     comparisonAttributes() {
-        return this.formGroup.root.get('comparisonAttributes').value;
+        var _a;
+        return (_a = this.formGroup.root.get('comparisonAttributes')) === null || _a === void 0 ? void 0 : _a.value;
     }
     removeRule(index) {
         this.rolloutRules().removeAt(index);
@@ -704,9 +506,9 @@ class RolloutRulesComponent {
         this.formGroup.markAsDirty();
     }
     attributeChanged(event, comparisonAttribute) {
-        if (this.defaultComparisonAttributes.indexOf(event) !== -1) {
-            if (comparisonAttribute.value !== event) {
-                comparisonAttribute.setValue(event);
+        if (this.defaultComparisonAttributes.indexOf(event.value) !== -1) {
+            if (comparisonAttribute.value !== event.value) {
+                comparisonAttribute.setValue(event.value);
                 this.formGroup.markAsDirty();
             }
         }
@@ -854,7 +656,7 @@ class RolloutRulesComponent {
         }
     }
     validateSemVer(c) {
-        if (semver.valid(c.value) === null) {
+        if (valid(c.value) === null) {
             return {
                 validateSemVer: {
                     valid: false
@@ -871,8 +673,8 @@ class RolloutRulesComponent {
                 }
             };
         }
-        const semvers = c.value.split(',').map(s => s.trim());
-        if (semvers.find(s => s && s !== '' && semver.valid(s) === null)) {
+        const semvers = c.value.split(',').map((s) => s.trim());
+        if (semvers.find((s) => s && s !== '' && valid(s) === null)) {
             return {
                 validateSemVerList: {
                     valid: false
@@ -893,177 +695,238 @@ class RolloutRulesComponent {
     trackByIndex(index) {
         return index;
     }
+    getRolloutRuleValueFormControl(rolloutRule) {
+        return rolloutRule.controls.value;
+    }
+    getRolloutRuleComparisonValueFormControl(rolloutRule) {
+        return rolloutRule.controls.comparisonValue;
+    }
+    getRolloutRuleComparisonAttributeFormControl(rolloutRule) {
+        return rolloutRule.controls.comparisonAttribute;
+    }
+    getRolloutRuleComparatorFormControl(rolloutRule) {
+        return rolloutRule.controls.comparator;
+    }
 }
-RolloutRulesComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-rollout-rules',
-                template: "<div [formGroup]=\"formGroup\">\n    <div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" [cdkDropListDisabled]=\"readOnly\"\n        [cdkDropListData]=\"rolloutRules().controls\">\n        <div *ngFor=\"let rolloutRule of rolloutRules().controls; trackBy: trackByIndex; let i = index\" cdkDrag>\n            <div class=\"targeting-row\">\n                <div class=\"fields flex\">\n                    <div class=\"drag-handle\" cdkDragHandle data-tooltip=\"Drag here to reorder\" *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-list [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-list>\n                        <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">user's</a>\n                    </div>\n\n                    <select class=\"custom-select attribute-select\" matTooltip=\"Comparison attribute\"\n                        matTooltipPosition=\"above\" [matTooltipDisabled]=\"onlyFirstTooltip() && i !== 0\"\n                        (change)=\"attributeChanged($event.target.value, rolloutRule.controls.comparisonAttribute)\">\n                        <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes\"\n                            [selected]=\"comparisonAttribute === rolloutRule.controls.comparisonAttribute.value\">\n                            {{comparisonAttribute}}</option>\n                        <option\n                            [selected]=\"defaultComparisonAttributes.indexOf(rolloutRule.controls.comparisonAttribute.value) === -1\">\n                            Custom\n                        </option>\n                    </select>\n\n\n                    <span class=\"attribute-span\" data-tooltip=\"Custom user attribute\"\n                        [hidden]=\"defaultComparisonAttributes.indexOf(rolloutRule.controls.comparisonAttribute.value) !== -1\">\n                        <span class=\"attribute-error\" *ngIf=\"rolloutRule.controls.comparisonAttribute.invalid\">*</span>\n                        <input [ngClass]=\"{'invalid': rolloutRule.controls.comparisonAttribute.invalid}\" type=\"text\"\n                            matInput [matAutocomplete]=\"auto\" [formControl]=\"rolloutRule.controls.comparisonAttribute\"\n                            class=\"attribute\" placeholder=\"e.g. Eye color\">\n                    </span>\n\n                    <mat-autocomplete #auto=\"matAutocomplete\">\n                        <mat-option *ngFor=\"let option of comparisonAttributes()\" [value]=\"option\">\n                            {{option}}\n                        </mat-option>\n                    </mat-autocomplete>\n\n                    <div class=\"select-wrapper\">\n                        <select class=\"custom-select\" [formControl]=\"rolloutRule.controls.comparator\"\n                            matTooltip=\"Comparator\" matTooltipPosition=\"above\"\n                            [matTooltipDisabled]=\"onlyFirstTooltip() && i !== 0\"\n                            (change)=\"comparatorChanged(rolloutRule)\">\n                            <optgroup label=\"SENSITIVE TEXT\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(16, 18)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"TEXT\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(0, 4)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"SEMANTIC VERSION\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(4, 10)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"NUMBER\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(10, 16)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                        </select>\n                        <div [class]=\"getInfoClass(rolloutRule)\" [matTooltip]=\"getInfoTooltip(rolloutRule)\"\n                            [matTooltipDisabled]=\"onlyFirstTooltip() && i !== 0\">\n                            <a href=\"https://configcat.com/docs/advanced/targeting/#comparator\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                <mat-icon>info</mat-icon>\n                            </a>\n                        </div>\n                    </div>\n\n                    <div class=\"comparison-value\" data-tooltip=\"Comparison value\">\n                        <span class=\"error\" *ngIf=\"rolloutRule.controls.comparisonValue.invalid\">*</span>\n\n                        <input [ngClass]=\"{'invalid': rolloutRule.controls.comparisonValue.invalid}\"\n                            [formControl]=\"rolloutRule.controls.comparisonValue\"\n                            [type]=\"getComparisonValueType(rolloutRule)\" [placeholder]=\"getPlaceHolder(rolloutRule)\">\n                        <div class=\"expand\" matTooltip=\"Pop-out Editor\" (click)=\"popOut(rolloutRule)\" *ngIf=\"getComparisonValueType(rolloutRule)==='text'\">\n                            <mat-icon>height</mat-icon>\n                        </div>\n                    </div>\n\n                    <div class=\"delete\" matTooltip=\"Remove targeting rule\"\n                        [matTooltipDisabled]=\"onlyFirstTooltip() && i !== 0\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n                <div class=\"value flex\">\n                    <div class=\"serve\" *ngIf=\"setting().settingType !== SettingType.Boolean\">\n                        <mat-chip-list>\n                            <mat-chip class=\"chip\">Serve:</mat-chip>\n                        </mat-chip-list>\n                    </div>\n\n                    <configcat-value class=\"served-value\" [valueFormControl]=\"rolloutRule.controls.value\"\n                        [setting]=\"setting()\">\n                    </configcat-value>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>",
-                styles: [".cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.targeting-row{border:1px solid #d5d5d5;border-radius:4px;background-color:#fff;margin:.5em 1em;display:flex;position:relative;padding:.5em 0}.targeting-row .select-wrapper{position:relative}.targeting-row .info{position:absolute;cursor:pointer;top:-8px;left:166px}.targeting-row .info a{color:#7fb3fd}.targeting-row .info a:hover{color:#0068f0}.targeting-row .info mat-icon{font-size:18px}.targeting-row .warn{position:absolute;cursor:pointer;top:-8px;left:128px}.targeting-row .warn a{color:#fdc67f}.targeting-row .warn a:hover{color:#ff9200}.targeting-row .warn mat-icon{font-size:18px}.chip{background-color:#67b1fc3d}.fields{justify-content:left;max-width:1060px;flex-grow:100}.fields .if{display:flex;align-items:center}.fields .if>*{margin:0 .5em}.fields .if .spacing{margin-right:46px}.fields .attribute-span{margin-left:.5em}.fields .attribute{width:170px;background-color:#fff;border:1px solid #e5e5e5;min-height:28px;min-width:170px;font-size:15px;padding:0 10px;font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif;font-weight:300}.fields .invalid{border:1px solid #ff5252}.fields .attribute-error{color:#ff5252;margin-right:5px}.fields .delete{position:absolute;color:#d6a9a9;cursor:pointer;top:-8px;right:-12px;z-index:999}.fields .delete:hover{color:#ed5251}.fields .delete mat-icon{font-size:20px}.fields .drag-handle{position:absolute;cursor:-webkit-grab;cursor:-moz-grab;left:-20px;top:14px}.fields .drag-handle mat-icon{font-size:20px}.fields .custom-select{margin-left:.5em;width:170px;background-color:#fff;border:1px solid #e5e5e5;min-height:30px;min-width:170px;font-size:.8em;padding:0 5px;font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif;font-weight:300}.fields .attribute-select{min-width:100px;width:100px;margin-left:0}.fields .comparison-value{flex-grow:100;min-width:200px;display:flex;align-items:center;margin-left:.5em}.fields .comparison-value .error{color:#ff5252;margin:0 5px}.fields .comparison-value input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;min-width:170px;flex-grow:100;font-size:15px;padding:0 30px 0 10px;font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif;font-weight:300}.fields .comparison-value .invalid{border:1px solid #ff5252}.value{margin-left:auto;flex-wrap:nowrap}.value .serve{margin:0 5px}.warn{padding-left:3em;font-size:.8em}.flex{display:flex;flex-wrap:wrap;align-items:center}.expand{position:absolute;right:2px;font-size:8px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.expand mat-icon{transform:rotate(45deg)}@media (max-width: 1200px){.targeting-row{flex-wrap:wrap}.targeting-row .fields{max-width:500px}}@media (max-width: 700px){.targeting-row{flex-direction:column;margin:.5em .3em}.targeting-row .help{left:161px}.targeting-row .fields{flex-direction:column;align-items:stretch}.targeting-row .fields .custom-select{margin:0}.targeting-row .fields .comparison-value{margin:0}}\n"]
-            },] }
-];
-RolloutRulesComponent.ctorParameters = () => [
-    { type: MatDialog }
-];
-RolloutRulesComponent.propDecorators = {
-    formGroup: [{ type: Input }],
-    readOnly: [{ type: Input }]
-};
+RolloutRulesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: RolloutRulesComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+RolloutRulesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: RolloutRulesComponent, selector: "configcat-rollout-rules", inputs: { formGroup: "formGroup", readOnly: "readOnly" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n    <div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" [cdkDropListDisabled]=\"readOnly\"\n        [cdkDropListData]=\"rolloutRules().controls\">\n        <div *ngFor=\"let rolloutRule of rolloutRules().controls; trackBy: trackByIndex; let i = index\" cdkDrag>\n            <div class=\"targeting-row\">\n                <div class=\"fields flex\">\n                    <div class=\"drag-handle\" cdkDragHandle data-tooltip=\"Drag here to reorder\" *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-list [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-list>\n                        <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                            rel=\"noopener noreferrer\">user's</a>\n                    </div>\n\n                    <select class=\"custom-select attribute-select\" matTooltip=\"Comparison attribute\"\n                        matTooltipPosition=\"above\" [matTooltipDisabled]=\"onlyFirstTooltip() && i !== 0\"\n                        (change)=\"attributeChanged($event.target, getRolloutRuleComparisonAttributeFormControl(rolloutRule))\">\n                        <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes\"\n                            [selected]=\"comparisonAttribute === getRolloutRuleComparisonAttributeFormControl(rolloutRule).value\">\n                            {{comparisonAttribute}}</option>\n                        <option\n                            [selected]=\"defaultComparisonAttributes.indexOf(getRolloutRuleComparisonAttributeFormControl(rolloutRule).value) === -1\">\n                            Custom\n                        </option>\n                    </select>\n\n\n                    <span class=\"attribute-span\" data-tooltip=\"Custom user attribute\"\n                        [hidden]=\"defaultComparisonAttributes.indexOf(getRolloutRuleComparisonAttributeFormControl(rolloutRule).value) !== -1\">\n                        <span class=\"attribute-error\"\n                            *ngIf=\"getRolloutRuleComparisonAttributeFormControl(rolloutRule).invalid\">*</span>\n                        <input\n                            [ngClass]=\"{'invalid': getRolloutRuleComparisonAttributeFormControl(rolloutRule).invalid}\"\n                            type=\"text\" matInput [matAutocomplete]=\"auto\"\n                            [formControl]=\"getRolloutRuleComparisonAttributeFormControl(rolloutRule)\" class=\"attribute\"\n                            placeholder=\"e.g. Eye color\">\n                    </span>\n\n                    <mat-autocomplete #auto=\"matAutocomplete\">\n                        <mat-option *ngFor=\"let option of comparisonAttributes()\" [value]=\"option\">\n                            {{option}}\n                        </mat-option>\n                    </mat-autocomplete>\n\n                    <div class=\"select-wrapper\">\n                        <select class=\"custom-select\" [formControl]=\"getRolloutRuleComparatorFormControl(rolloutRule)\"\n                            matTooltip=\"Comparator\" matTooltipPosition=\"above\"\n                            [matTooltipDisabled]=\"onlyFirstTooltip() && i !== 0\"\n                            (change)=\"comparatorChanged(rolloutRule)\">\n                            <optgroup label=\"SENSITIVE TEXT\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(16, 18)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"TEXT\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(0, 4)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"SEMANTIC VERSION\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(4, 10)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                            <optgroup label=\"NUMBER\">\n                                <option *ngFor=\"let comparator of rolloutRuleComparators.slice(10, 16)\"\n                                    [ngValue]=\"comparator.value\">\n                                    {{comparator.label}}\n                                </option>\n                            </optgroup>\n                        </select>\n                        <div [class]=\"getInfoClass(rolloutRule)\" [matTooltip]=\"getInfoTooltip(rolloutRule)\"\n                            [matTooltipDisabled]=\"onlyFirstTooltip() && i !== 0\">\n                            <a href=\"https://configcat.com/docs/advanced/targeting/#comparator\" target=\"_blank\"\n                                rel=\"noopener noreferrer\">\n                                <mat-icon>info</mat-icon>\n                            </a>\n                        </div>\n                    </div>\n\n                    <div class=\"comparison-value\" data-tooltip=\"Comparison value\">\n                        <span class=\"error\"\n                            *ngIf=\"getRolloutRuleComparisonValueFormControl(rolloutRule).invalid\">*</span>\n\n                        <input [ngClass]=\"{'invalid': getRolloutRuleComparisonValueFormControl(rolloutRule).invalid}\"\n                            [formControl]=\"getRolloutRuleComparisonValueFormControl(rolloutRule)\"\n                            [type]=\"getComparisonValueType(rolloutRule)\" [placeholder]=\"getPlaceHolder(rolloutRule)\">\n                        <div class=\"expand\" matTooltip=\"Pop-out Editor\" (click)=\"popOut(rolloutRule)\"\n                            *ngIf=\"getComparisonValueType(rolloutRule)==='text'\">\n                            <mat-icon>height</mat-icon>\n                        </div>\n                    </div>\n\n                    <div class=\"delete\" matTooltip=\"Remove targeting rule\"\n                        [matTooltipDisabled]=\"onlyFirstTooltip() && i !== 0\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n                <div class=\"value flex\">\n                    <div class=\"serve\" *ngIf=\"setting().settingType !== SettingType.Boolean\">\n                        <mat-chip-list>\n                            <mat-chip class=\"chip\">Serve:</mat-chip>\n                        </mat-chip-list>\n                    </div>\n\n                    <configcat-value class=\"served-value\"\n                        [valueFormControl]=\"getRolloutRuleValueFormControl(rolloutRule)\" [setting]=\"setting()\">\n                    </configcat-value>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.targeting-row{border:1px solid #d5d5d5;border-radius:4px;background-color:#fff;margin:.5em 1em;display:flex;position:relative;padding:.5em 0}.targeting-row .select-wrapper{position:relative}.targeting-row .info{position:absolute;cursor:pointer;top:-8px;left:166px}.targeting-row .info a{color:#7fb3fd}.targeting-row .info a:hover{color:#0068f0}.targeting-row .info mat-icon{font-size:18px}.targeting-row .warn{position:absolute;cursor:pointer;top:-8px;left:128px}.targeting-row .warn a{color:#fdc67f}.targeting-row .warn a:hover{color:#ff9200}.targeting-row .warn mat-icon{font-size:18px}.chip{background-color:#67b1fc3d}.fields{justify-content:left;max-width:1060px;flex-grow:100}.fields .if{display:flex;align-items:center}.fields .if>*{margin:0 .5em}.fields .if .spacing{margin-right:46px}.fields .attribute-span{margin-left:.5em}.fields .attribute{width:170px;background-color:#fff;border:1px solid #e5e5e5;min-height:28px;min-width:170px;font-size:15px;padding:0 10px;font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif;font-weight:300}.fields .invalid{border:1px solid #ff5252}.fields .attribute-error{color:#ff5252;margin-right:5px}.fields .delete{position:absolute;color:#d6a9a9;cursor:pointer;top:-8px;right:-12px;z-index:999}.fields .delete:hover{color:#ed5251}.fields .delete mat-icon{font-size:20px}.fields .drag-handle{position:absolute;cursor:-moz-grab;left:-20px;top:14px}.fields .drag-handle mat-icon{font-size:20px}.fields .custom-select{margin-left:.5em;width:170px;background-color:#fff;border:1px solid #e5e5e5;min-height:30px;min-width:170px;font-size:.8em;padding:0 5px;font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif;font-weight:300}.fields .attribute-select{min-width:100px;width:100px;margin-left:0}.fields .comparison-value{flex-grow:100;min-width:200px;display:flex;align-items:center;margin-left:.5em}.fields .comparison-value .error{color:#ff5252;margin:0 5px}.fields .comparison-value input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;min-width:170px;flex-grow:100;font-size:15px;padding:0 30px 0 10px;font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif;font-weight:300}.fields .comparison-value .invalid{border:1px solid #ff5252}.value{margin-left:auto;flex-wrap:nowrap}.value .serve{margin:0 5px}.warn{padding-left:3em;font-size:.8em}.flex{display:flex;flex-wrap:wrap;align-items:center}.expand{position:absolute;right:2px;font-size:8px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.expand mat-icon{transform:rotate(45deg)}@media (max-width: 1200px){.targeting-row{flex-wrap:wrap}.targeting-row .fields{max-width:500px}}@media (max-width: 700px){.targeting-row{flex-direction:column;margin:.5em .3em}.targeting-row .help{left:161px}.targeting-row .fields{flex-direction:column;align-items:stretch}.targeting-row .fields .custom-select{margin:0}.targeting-row .fields .comparison-value{margin:0}}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i3$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: RolloutRulesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-rollout-rules',
+                    templateUrl: './rollout-rules.component.html',
+                    styleUrls: ['./rollout-rules.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }]; }, propDecorators: { formGroup: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }] } });
 
-class ValueComponent {
-    constructor(dialog) {
-        this.dialog = dialog;
+class RolloutPercentageItemsComponent {
+    constructor() {
+        this.readOnly = false;
         this.SettingType = SettingType;
     }
-    popOut() {
-        this.dialog.open(ExpandDialogComponent, {
-            width: '640px',
-            data: { control: this.valueFormControl }
-        });
+    setting() {
+        var _a;
+        return (_a = this.formGroup.get('setting')) === null || _a === void 0 ? void 0 : _a.value;
     }
-}
-ValueComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-value',
-                template: "<div class=\"flex\">\n  <div class=\"container\" [ngSwitch]=\"setting.settingType\">\n    <div *ngSwitchCase=\"SettingType.String\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"text\"\n             [formControl]=\"valueFormControl\" placeholder=\"my value\" name=\"value\">\n      <div class=\"expand\" (click)=\"popOut()\" matTooltip=\"Pop-out Editor\">\n        <mat-icon>height</mat-icon>\n      </div>\n    </div>\n    <div *ngSwitchCase=\"SettingType.Int\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"number\" [formControl]=\"valueFormControl\"\n             placeholder=\"42\" name=\"value\" />\n    </div>\n    <div *ngSwitchCase=\"SettingType.Double\" class=\"with-validation\">\n      <span *ngIf=\"valueFormControl.invalid\" class=\"error\">*</span>\n      <input [ngClass]=\"{'invalid': valueFormControl.invalid}\" type=\"number\" [formControl]=\"valueFormControl\"\n             placeholder=\"3.14\" name=\"value\">\n    </div>\n    <div *ngSwitchCase=\"SettingType.Boolean\" class=\"toggle\">\n      <label class=\"switch\">\n        <input type=\"checkbox\" [formControl]=\"valueFormControl\" name=\"value\" />\n        <span class=\"slider round\"></span>\n      </label>\n    </div>\n  </div>\n  <div *ngIf=\"setting.settingType === SettingType.Boolean\" class=\"spacer\"></div>\n\n</div>\n",
-                styles: [".switch{position:relative;width:66px;height:30px;margin-left:4px;margin-top:0;margin-bottom:0}.switch input{display:none}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ff5252;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{transform:translate(36px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.slider:after{content:\"Off\";color:#fff;display:block;position:absolute;transform:translate(-14%,-50%);top:50%;left:50%;font-size:10px;font-family:Verdana,sans-serif}input:checked+.slider:after{content:\"On\";transform:translate(-91%,-50%)}\n", ".flex{display:flex;margin-right:20px;align-items:center}.flex .spacer{width:15px}.flex .container .with-validation{display:flex;flex-wrap:nowrap}.flex .container .toggle{width:66px;height:30px}.flex .container input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;font-size:15px;padding:0 30px 0 10px;font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif;font-weight:300;min-width:170px}.flex .container .invalid{border:1px solid #ff5252}.flex .container .error{color:#ff5252;margin-right:5px}@media (max-width: 1200px){.flex .container input{min-width:auto}}.flex .variationId{margin-left:5px;cursor:pointer;color:#888;display:flex;align-items:center}.flex .expand{position:relative;top:2px;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.flex .expand mat-icon{transform:rotate(45deg)}\n"]
-            },] }
-];
-ValueComponent.ctorParameters = () => [
-    { type: MatDialog }
-];
-ValueComponent.propDecorators = {
-    valueFormControl: [{ type: Input }],
-    setting: [{ type: Input }]
-};
-
-class SettingListFormHelper {
-    constructor(formBuilder) {
-        this.formBuilder = formBuilder;
+    rolloutRules() {
+        return this.formGroup.get('rolloutRules');
     }
-    createSettingValuesFormGroup(settingValuesModel) {
-        const formGroup = this.formBuilder.group({
-            settingValues: this.formBuilder.array(settingValuesModel.settingValues.map(sv => {
-                return this.createSettingValueFormGroup(sv, settingValuesModel.readOnly);
-            })),
-            // Decorator
-            environment: this.formBuilder.group({
-                environmentId: [{ value: settingValuesModel.environment.environmentId, disabled: true }],
-                name: [{ value: settingValuesModel.environment.name, disabled: true }],
-            }),
-            comparisonAttributes: [[]],
-            allRolloutRulesCount: [0]
-        });
-        const rolloutRules = this.getAllRolloutRules(formGroup);
-        const comparisonAttributes = this.getComparisonAttributes(rolloutRules);
-        formGroup.patchValue({ allRolloutRulesCount: rolloutRules.length });
-        formGroup.patchValue({ comparisonAttributes: comparisonAttributes });
-        return formGroup;
+    rolloutPercentageItems() {
+        return this.formGroup.get('rolloutPercentageItems');
     }
-    createSettingValueFormGroup(settingValueModel, readOnly) {
-        return this.formBuilder.group({
-            settingId: [settingValueModel.setting.settingId],
-            value: [
-                { value: settingValueModel.value, disabled: readOnly },
-                this.getValidatorsForSettingType(settingValueModel.setting.settingType)
-            ],
-            rolloutPercentageItems: this.formBuilder.array(settingValueModel.rolloutPercentageItems.map(p => {
-                return this.createRolloutPercentageItemFormGroup(p, readOnly, settingValueModel.setting.settingType);
-            })),
-            rolloutRules: this.formBuilder.array(settingValueModel.rolloutRules.map(r => {
-                return this.createRolloutRuleFormGroup(r, readOnly, settingValueModel.setting.settingType);
-            })),
-            updatedAt: [{ value: settingValueModel.updatedAt, disabled: true }],
-            lastUpdaterUserEmail: [{ value: settingValueModel.lastUpdaterUserEmail, disabled: true }],
-            lastUpdaterUserFullName: [{ value: settingValueModel.lastUpdaterUserFullName, disabled: true }],
-            rolloutPercentageItemsSum: [{ value: 100, disabled: false }, [Validators.min(100), Validators.max(100)]],
-            // Decoration
-            setting: this.formBuilder.group({
-                settingId: [{ value: settingValueModel.setting.settingId, disabled: true }],
-                key: [{ value: settingValueModel.setting.key, disabled: true }],
-                name: [{ value: settingValueModel.setting.name, disabled: true }],
-                hint: [{ value: settingValueModel.setting.hint, disabled: true }],
-                settingType: [{ value: settingValueModel.setting.settingType, disabled: true }],
-                creatorEmail: [{ value: settingValueModel.setting.creatorEmail, disabled: true }],
-                creatorFullName: [{ value: settingValueModel.setting.creatorFullName, disabled: true }],
-                createdAt: [{ value: settingValueModel.setting.createdAt, disabled: true }]
-            }),
-            integrationLinks: this.formBuilder.array(settingValueModel.integrationLinks.map(il => {
-                return this.formBuilder.group({
-                    key: [{ value: il.key, disabled: true }],
-                    description: [{ value: il.description, disabled: true }],
-                    integrationLinkType: [{ value: il.integrationLinkType, disabled: true }],
-                    url: [{ value: il.url, disabled: true }],
-                });
-            }))
-        });
+    rolloutPercentageItemsSum() {
+        return this.formGroup.get('rolloutPercentageItemsSum');
     }
-    createRolloutPercentageItemFormGroup(p, readOnly, settingType) {
-        return this.formBuilder.group({
-            percentage: [{ value: p.percentage, disabled: readOnly }, [Validators.required, Validators.min(0), Validators.max(100)]],
-            value: [
-                { value: p.value, disabled: readOnly },
-                [].concat(...[Validators.required, this.getValidatorsForSettingType(settingType)])
-            ],
-            valueDisabled: [
-                { value: p.value, disabled: true }, // For percentage item value
-            ]
-        });
+    value(rolloutPercentageItem) {
+        return this.setting().settingType === SettingType.Boolean ?
+            rolloutPercentageItem.get('valueDisabled') :
+            rolloutPercentageItem.get('value');
     }
-    createRolloutRuleFormGroup(r, readOnly, settingType) {
-        return this.formBuilder.group({
-            comparisonAttribute: [{ value: r.comparisonAttribute, disabled: readOnly }, [Validators.required]],
-            comparator: [{ value: r.comparator, disabled: readOnly }, [Validators.required]],
-            comparisonValue: [{ value: r.comparisonValue, disabled: readOnly }, [Validators.required]],
-            value: [
-                { value: r.value, disabled: readOnly },
-                this.getValidatorsForSettingType(settingType)
-            ],
-        });
+    percentageChanged(index) {
+        if (this.rolloutPercentageItems().controls[index].value.percentage < 0) {
+            this.rolloutPercentageItems().controls[index].controls.percentage.setValue(0);
+        }
+        if (this.rolloutPercentageItems().controls[index].value.percentage > 100) {
+            this.rolloutPercentageItems().controls[index].controls.percentage.setValue(100);
+        }
+        if (this.rolloutPercentageItems().controls.length === 2) {
+            this.rolloutPercentageItems().controls[1 - index].controls.percentage
+                .setValue(100 - this.rolloutPercentageItems().controls[index].value.percentage);
+        }
+        this.updateSum();
     }
-    getValidatorsForSettingType(settingType) {
-        switch (settingType) {
-            case SettingType.Int:
-                return [Validators.required,
-                    Validators.min(-2147483648), Validators.max(2147483647), Validators.pattern('^[-+]?[0-9]\\d*$')];
-            case SettingType.Double:
-                return [Validators.required, Validators.min(-1.79769313486232E+308), Validators.max(1.79769313486232E+308)];
-            case SettingType.String:
-            case SettingType.Boolean:
-                return [Validators.required];
-            default:
-                return [];
+    updateSum() {
+        if (this.rolloutPercentageItems().controls.length === 0) {
+            this.rolloutPercentageItemsSum().setValue(100);
+        }
+        else {
+            this.rolloutPercentageItemsSum().setValue(this.rolloutPercentageItems().controls.map(v => v.value.percentage)
+                .reduce((a, b) => a + b));
         }
     }
-    getAllRolloutRules(formGroup) {
-        const settingValues = formGroup.get('settingValues');
-        const rolloutRules = settingValues.controls.map(cv => cv.get('rolloutRules').value);
-        return rolloutRules.length === 0 ? rolloutRules : rolloutRules.reduce((a, b) => a.concat(b));
+    removeRolloutPercentageItem(index) {
+        this.rolloutPercentageItems().removeAt(index);
+        this.rolloutPercentageItems().markAsDirty();
+        this.updateSum();
     }
-    getComparisonAttributes(rolloutRules) {
-        if (rolloutRules.length > 0) {
-            const currentComparisonAttributes = rolloutRules.map(r => r.comparisonAttribute);
-            const defaultComparisonAttributes = ['Identifier', 'Email', 'Country'];
-            const comparisonAttributes = currentComparisonAttributes.filter(c => defaultComparisonAttributes.indexOf(c) === -1);
-            return Array.from(new Set(comparisonAttributes));
+    removeAll() {
+        this.rolloutPercentageItems().clear();
+        this.rolloutPercentageItems().markAsDirty();
+        this.updateSum();
+    }
+    getRolloutPercentageItemFormGroups() {
+        var _a, _b;
+        return (_b = (_a = this.rolloutPercentageItems()) === null || _a === void 0 ? void 0 : _a.controls) === null || _b === void 0 ? void 0 : _b.map(c => c);
+    }
+    getPercentageFormControl(rolloutPercentageItem) {
+        return rolloutPercentageItem.controls.percentage;
+    }
+}
+RolloutPercentageItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: RolloutPercentageItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RolloutPercentageItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: RolloutPercentageItemsComponent, selector: "configcat-rollout-percentage-items", inputs: { formGroup: "formGroup", readOnly: "readOnly" }, ngImport: i0, template: "<div class=\"percentage-wrapper\" [formGroup]=\"formGroup\">\n\n    <div class=\"if\" *ngIf=\"rolloutRules().controls.length > 0\">\n        <mat-chip-list>\n            <mat-chip class=\"chip\">ELSE IF</mat-chip>\n        </mat-chip-list>\n    </div>\n    <div class=\"grow\">\n        <div class=\"percentage-row flex\"\n            *ngFor=\"let rolloutPercentageItem of getRolloutPercentageItemFormGroups(); let i = index\">\n            <div class=\"flex\">\n                <input type=\"number\" [formControl]=\"getPercentageFormControl(rolloutPercentageItem)\"\n                    (input)=\"percentageChanged(i)\">%\n                <span class=\"users\">of <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                        rel=\"noopener noreferrer\">users</a>\n                </span>\n            </div>\n\n            <div class=\"delete-option\" matTooltip=\"Remove this % option\"\n                *ngIf=\"!readOnly && rolloutPercentageItems().controls.length > 2\"\n                (click)=\"removeRolloutPercentageItem(i)\">\n                <mat-icon>cancel</mat-icon>\n            </div>\n\n            <span data-tooltip=\"The sum of percentages must be equal to 100.\"\n                *ngIf=\"(i === rolloutPercentageItems().controls.length -1) && (rolloutPercentageItemsSum().invalid)\">\n                <mat-icon color=\"warn\">\n                    error_outline\n                </mat-icon>\n            </span>\n\n            <div class=\"value flex\">\n                <span class=\"value-name\" *ngIf=\"setting().settingType !== SettingType.Boolean\">Served value:</span>\n                <configcat-value class=\"served-value\" [valueFormControl]=\"value(rolloutPercentageItem)\"\n                    [setting]=\"setting()\">\n                </configcat-value>\n            </div>\n            <div class=\"delete\" matTooltip=\"Remove % options\" (click)=\"removeAll()\" *ngIf=\"!readOnly\">\n                <mat-icon>cancel</mat-icon>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".percentage-wrapper{border:1px solid #d5d5d5;background-color:#fff;border-radius:4px;margin:.5em 1em;position:relative;padding:.5em 0;display:flex}.percentage-wrapper .delete{position:absolute;color:#d6a9a9;cursor:pointer;top:-8px;right:-12px}.percentage-wrapper .delete:hover{color:#ed5251}.percentage-wrapper .delete mat-icon{font-size:20px}.percentage-wrapper .delete-option{color:#d6a9a9;cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover{color:#ed5251}.percentage-wrapper .delete-option mat-icon{font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{background-color:#67b1fc3d}.grow{flex-grow:1}.percentage-row{min-height:40px;margin-left:.5em}.flex{display:flex;flex-wrap:wrap;align-items:center}.value{margin-left:auto;min-width:100px}.value .value-name{display:none}input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;width:40px;margin-right:5px;font-size:15px;padding:0 5px;font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif;font-weight:300}.users{margin-left:20px}@media (max-width: 700px){.percentage-wrapper{margin:.5em .3em}}\n"], components: [{ type: i3$2.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: RolloutPercentageItemsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-rollout-percentage-items',
+                    templateUrl: './rollout-percentage-items.component.html',
+                    styleUrls: ['./rollout-percentage-items.component.scss']
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { formGroup: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }] } });
+
+class SettingComponent {
+    constructor(formHelper, cdRef) {
+        this.formHelper = formHelper;
+        this.cdRef = cdRef;
+        this.readOnly = false;
+        this.canEditSetting = false;
+        this.canDeleteSetting = false;
+        this.deleteSettingText = 'Delete setting';
+        this.showEnvironmentName = false;
+        this.editSettingRequested = new EventEmitter();
+        this.deleteSettingRequested = new EventEmitter();
+        this.rulesBeingRendered = false;
+        this.SettingType = SettingType;
+    }
+    ngOnInit() { }
+    environment() {
+        var _a;
+        return (_a = this.formGroup.root.get('environment')) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    setting() {
+        var _a;
+        return (_a = this.formGroup.get('setting')) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    integrationLinks() {
+        return this.formGroup.get('integrationLinks');
+    }
+    rolloutRules() {
+        return this.formGroup.get('rolloutRules');
+    }
+    rolloutPercentageItems() {
+        return this.formGroup.get('rolloutPercentageItems');
+    }
+    value() {
+        return this.formGroup.get('value');
+    }
+    addRolloutRule() {
+        this.rolloutRules().push(this.formHelper.createRolloutRuleFormGroup({
+            comparisonAttribute: 'Identifier',
+            comparator: RolloutRuleComparator.SensitiveIsOneOf,
+            comparisonValue: '',
+            value: this.setting().settingType === SettingType.Boolean ? false : null
+        }, this.readOnly, this.setting().settingType));
+        this.rolloutRules().markAsDirty();
+    }
+    removeRolloutRules() {
+        this.rolloutRules().clear();
+        this.rolloutRules().markAsDirty();
+    }
+    addRolloutPercentageItem() {
+        if (this.rolloutPercentageItems().length === 0) {
+            switch (this.setting().settingType) {
+                case SettingType.Boolean:
+                    this.rolloutPercentageItems().push(this.formHelper.createRolloutPercentageItemFormGroup({
+                        percentage: 0,
+                        value: true
+                    }, this.readOnly, this.setting().settingType));
+                    this.rolloutPercentageItems().push(this.formHelper.createRolloutPercentageItemFormGroup({
+                        percentage: 100,
+                        value: false
+                    }, this.readOnly, this.setting().settingType));
+                    break;
+                case SettingType.String:
+                case SettingType.Int:
+                case SettingType.Double:
+                    for (let i = 0; i < 4; i++) {
+                        this.rolloutPercentageItems().push(this.formHelper.createRolloutPercentageItemFormGroup({
+                            percentage: 25,
+                            value: null
+                        }, this.readOnly, this.setting().settingType));
+                    }
+                    break;
+            }
         }
-        else {
-            return [];
+        else if (this.setting().settingType !== SettingType.Boolean) {
+            this.rolloutPercentageItems().push(this.formHelper.createRolloutPercentageItemFormGroup({
+                percentage: 0,
+                value: null
+            }, this.readOnly, this.setting().settingType));
         }
+        this.rolloutPercentageItems().markAsDirty();
+    }
+    removeRolloutPercentageItems() {
+        this.rolloutPercentageItems().clear();
+        this.rolloutPercentageItems().markAsDirty();
+    }
+    editSetting() {
+        this.editSettingRequested.emit({ setting: this.setting() });
+    }
+    deleteSetting() {
+        this.deleteSettingRequested.emit({ setting: this.setting() });
     }
 }
-SettingListFormHelper.ɵprov = i0.ɵɵdefineInjectable({ factory: function SettingListFormHelper_Factory() { return new SettingListFormHelper(i0.ɵɵinject(i1$1.FormBuilder)); }, token: SettingListFormHelper, providedIn: "root" });
-SettingListFormHelper.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
-SettingListFormHelper.ctorParameters = () => [
-    { type: FormBuilder }
-];
+SettingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SettingComponent, deps: [{ token: SettingListFormHelper }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SettingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SettingComponent, selector: "setting", inputs: { formGroup: "formGroup", readOnly: "readOnly", canEditSetting: "canEditSetting", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { editSettingRequested: "editSettingRequested", deleteSettingRequested: "deleteSettingRequested" }, ngImport: i0, template: "<div class=\"setting-full\"\n  [formGroup]=\"formGroup\">\n  <div class=\"delete\" (click)=\"deleteSetting()\" *ngIf=\"canDeleteSetting\" [matTooltip]=\"deleteSettingText\"\n       data-robot=\"deleteSetting\">\n    <mat-icon>cancel</mat-icon>\n  </div>\n  <div class=\"setting-header flex\">\n    <div class=\"setting-name flex\">\n      <div class=\"name\" data-robot=\"settingName\">\n        {{setting().name}}\n        <span *ngIf=\"showEnvironmentName\"> ({{environment().name}})</span>\n      </div>\n      <div class=\"edit\" matTooltip=\"Edit name and description\" (click)=\"editSetting()\" *ngIf=\"canEditSetting\"\n           data-robot=\"renameSetting\">\n        <mat-icon>edit</mat-icon>\n      </div>\n    </div>\n  </div>\n  <div class=\"setting-content\">\n    <div class=\"setting-details\">\n      <div class=\"setting-key\"><code data-robot=\"settingKey\">{{setting().key}}</code></div>\n      <span *ngIf=\"setting().hint\" class=\"description\">{{setting().hint}}</span>\n    </div>\n\n    <div class=\"rules-list\">\n      <div>\n        <configcat-rollout-rules *ngIf=\"rolloutRules().controls.length !== 0\" [formGroup]=\"formGroup\">\n        </configcat-rollout-rules>\n      </div>\n\n      <configcat-rollout-percentage-items *ngIf=\"rolloutPercentageItems().controls.length !== 0\"\n                                          [formGroup]=\"formGroup\">\n      </configcat-rollout-percentage-items>\n\n      <div class=\"all-other flex\">\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length !== 0\"\n             data-tooltip=\"This value will be served to all users who the above rules don't apply.\">\n          <mat-chip-list>\n            <mat-chip class=\"chip\">To all other users, serve:</mat-chip>\n          </mat-chip-list>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length !== 0\"\n             data-tooltip=\"This fallback value will be served in case the user can't be identified.\">\n          <mat-chip-list>\n            <mat-chip class=\"chip\">To unidentified users, serve:</mat-chip>\n          </mat-chip-list>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length === 0\">\n          <mat-chip-list>\n            <mat-chip class=\"chip\">To all users, serve:</mat-chip>\n          </mat-chip-list>\n        </div>\n        <configcat-value class=\"served-value\" [valueFormControl]=\"value()\" [setting]=\"setting()\">\n        </configcat-value>\n      </div>\n      <div class=\"buttons\">\n        <button type=\"button\" class=\"sige-button targeting-button\" (click)=\"addRolloutRule()\" *ngIf=\"!readOnly\">\n          {{rolloutRules().length === 0 ? 'Target specific users' : 'Add new targeting rule'}}\n        </button>\n        <button type=\"button\" class=\"sige-button targeting-button\" (click)=\"addRolloutPercentageItem()\"\n                *ngIf=\"!readOnly\"\n                [disabled]=\"setting().settingType === SettingType.Boolean && rolloutPercentageItems().length !== 0\">\n          {{rolloutPercentageItems().length === 0 ? 'Target % of users' : 'Add new % option'}}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".setting-full{position:relative;display:flex;flex-wrap:nowrap;flex-direction:column;border-radius:3px}.setting-full .delete{position:absolute;right:-15px;top:-10px;color:#d6a9a9;cursor:pointer}.setting-full .delete:hover{color:#ed5251}.setting-full .delete mat-icon{font-size:20px}.setting-full .setting-header{padding:1.5em 1.5em 0}.setting-full .setting-header .setting-name{flex-direction:row}.setting-full .setting-header .setting-name:hover>.edit{visibility:visible}.setting-full .setting-header .setting-name .name{font-weight:bold;word-wrap:break-word;max-width:100%}.setting-full .setting-header .setting-name .edit{margin:5px 0 0 5px;cursor:pointer;visibility:hidden;color:gray}.setting-full .setting-header .setting-name .edit:hover{visibility:visible}.setting-full .setting-header .setting-name .edit mat-icon{font-size:18px}.setting-full .setting-header .setting-meta{margin-left:auto;margin-right:14px;font-size:.7em;color:gray}.setting-full .setting-content{display:flex}.setting-full .setting-content .setting-details{display:flex;flex-direction:column;width:400px;padding:0 0 1em 1em}.setting-full .setting-content .setting-details>*{margin:.5em}.setting-full .setting-content .setting-details .integrations{font-size:.8rem}.setting-full .setting-content .setting-details .integrations>div{margin:3px}.setting-full .setting-content .setting-details .integrations>div>a:hover{text-decoration:underline}.setting-full .setting-content .setting-details .setting-key{word-wrap:break-word}.setting-full .setting-content .setting-details .description{font-size:.8em;white-space:pre-wrap;word-wrap:break-word;max-width:300px}.setting-full .setting-content .setting-details code{background-color:#d3d3d3;padding:3px 6px}.setting-full .setting-content .rules-list{width:100%;padding:0 1em 1em}.setting-full .setting-content .targeting-button{margin-left:.5rem;margin-right:.5rem;margin-bottom:1em}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;border-radius:4px;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;min-width:100px}.end{margin-left:auto}.buttons{display:flex;margin-left:.5rem;margin-right:.5rem}.buttons .updated-date{font-size:.7em;margin-left:auto;margin-right:22px;color:gray}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}.show-hide-toggle a{font-size:.8rem}.sige-button{background-color:#d9eadc;color:#363636;cursor:pointer;justify-content:center;padding:.375em .75em;text-align:center;white-space:nowrap;border-radius:2px;font-size:.75rem;border:1px solid #dbdbdb;box-shadow:none;display:inline-flex;font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif}.sige-button:hover{background-color:#bad0be}.sige-button:disabled{background-color:#fff;color:#b3b3b3}@media (max-width: 1200px){.setting-details{width:300px}}@media (max-width: 700px){.setting-full .setting-content{flex-wrap:wrap}.setting-full .setting-content .rules-list{padding:0}.buttons{flex-direction:column}.updated-date{display:none}.setting-details{padding:.2em 0 .2em .2em}.all-other{margin:.5em .3em}}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: RolloutRulesComponent, selector: "configcat-rollout-rules", inputs: ["formGroup", "readOnly"] }, { type: RolloutPercentageItemsComponent, selector: "configcat-rollout-percentage-items", inputs: ["formGroup", "readOnly"] }, { type: i3$2.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }], directives: [{ type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i3$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SettingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'setting',
+                    templateUrl: './setting.component.html',
+                    styleUrls: ['./setting.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: SettingListFormHelper }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formGroup: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], canEditSetting: [{
+                type: Input
+            }], canDeleteSetting: [{
+                type: Input
+            }], deleteSettingText: [{
+                type: Input
+            }], showEnvironmentName: [{
+                type: Input
+            }], editSettingRequested: [{
+                type: Output
+            }], deleteSettingRequested: [{
+                type: Output
+            }] } });
 
 class SettingListComponent {
     constructor(formHelper, snackBar, dialog) {
         this.formHelper = formHelper;
         this.snackBar = snackBar;
         this.dialog = dialog;
+        this.canEditSetting = false;
+        this.canDeleteSetting = false;
         this.deleteSettingText = 'Delete setting';
         this.showEnvironmentName = false;
         this.editSettingRequested = new EventEmitter();
@@ -1109,6 +972,9 @@ class SettingListComponent {
     settingValuesFormArray() {
         return this.formGroup.get('settingValues');
     }
+    getSettingValueFormGroups() {
+        return this.settingValuesFormArray().controls.map(c => c);
+    }
     submit() {
         if (!this.formGroup || !this.formGroup.valid) {
             this.showFeedBackMessage = true;
@@ -1207,138 +1073,371 @@ class SettingListComponent {
         });
     }
 }
-SettingListComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'configcat-setting-list',
-                template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" *ngIf=\"!loading\">\n  <div class=\"wrapper\" *ngFor=\"let settingValueFromGroup of settingValuesFormArray().controls; let i = index\">\n    <setting [formGroup]=\"settingValueFromGroup\" [readOnly]=\"readOnly\"\n             [canEditSetting]=\"canEditSetting\" [canDeleteSetting]=\"canDeleteSetting\"\n             (editSettingRequested)=\"onEditSettingRequested($event)\"\n             (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" [deleteSettingText]=\"deleteSettingText\"\n             [showEnvironmentName]=\"showEnvironmentName\">\n    </setting>\n  </div>\n\n  <div class=\"save\" *ngIf=\"!readOnly && !submitting && formGroup.dirty\">\n    <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n      <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n        <span>Something went wrong and we could not save your settings. You can try again or <a\n             href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a></span>\n      </div>\n      <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n        <span>Oh no! A feature flag has invalid or missing data.</span>\n      </div>\n    </div>\n    <button type=\"button\" mat-stroked-button *ngIf=\"!showRevertQuestion\" (click)=\"showRevertQuestion = true\">\n      <mat-icon>history</mat-icon><span>Revert changes</span>\n    </button>\n    <div *ngIf=\"showRevertQuestion\">\n      <span class=\"revert\">Revert to last saved state?</span>\n      <button type=\"button\" class=\"yes\" mat-stroked-button (click)=\"handleRevertYes()\">Yes</button>\n      <button type=\"button\" mat-stroked-button (click)=\"handleRevertCancel()\">No</button>\n    </div>\n    <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [disabled]=\"submitting\">\n      <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n    </button>\n  </div>\n</form>\n",
-                styles: [".wrapper{background-color:#f3f3f3;border:1px solid rgba(0,0,0,.12);border-radius:4px;margin:1em 0}.show-hide a{cursor:pointer;font-size:.8rem}.save{position:sticky;bottom:0;min-height:38px;padding:.5rem .5rem .5rem 0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;z-index:1000}.save .save-button{-webkit-animation:shadow-pulse 1s 3;animation:shadow-pulse 1s 3;margin-left:1rem}.save>*{margin:.3em}.save .revert{margin:0 16px;font-size:14px}.save .yes{margin:0 5px}.error{background-color:#a32b2d;color:#fff;padding:5px;font-size:.9em}.error a{color:#fff;text-decoration:underline}@media (max-width: 700px){.save{padding:.5rem 0}}\n"]
-            },] }
-];
-SettingListComponent.ctorParameters = () => [
-    { type: SettingListFormHelper },
-    { type: MatSnackBar },
-    { type: MatDialog }
-];
-SettingListComponent.propDecorators = {
-    canEditSetting: [{ type: Input }],
-    canDeleteSetting: [{ type: Input }],
-    onSave: [{ type: Input }],
-    loadSettingValues: [{ type: Input }],
-    deleteSettingText: [{ type: Input }],
-    showEnvironmentName: [{ type: Input }],
-    editSettingRequested: [{ type: Output }],
-    deleteSettingRequested: [{ type: Output }],
-    formValuesChanged: [{ type: Output }]
-};
+SettingListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SettingListComponent, deps: [{ token: SettingListFormHelper }, { token: i2$2.MatSnackBar }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+SettingListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SettingListComponent, selector: "configcat-setting-list", inputs: { canEditSetting: "canEditSetting", canDeleteSetting: "canDeleteSetting", onSave: "onSave", loadSettingValues: "loadSettingValues", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { editSettingRequested: "editSettingRequested", deleteSettingRequested: "deleteSettingRequested", formValuesChanged: "formValuesChanged" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" *ngIf=\"!loading\">\n  <div class=\"wrapper\" *ngFor=\"let settingValueFromGroup of getSettingValueFormGroups(); let i = index\">\n    <setting [formGroup]=\"settingValueFromGroup\" [readOnly]=\"readOnly\" [canEditSetting]=\"canEditSetting\"\n      [canDeleteSetting]=\"canDeleteSetting\" (editSettingRequested)=\"onEditSettingRequested($event)\"\n      (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" [deleteSettingText]=\"deleteSettingText\"\n      [showEnvironmentName]=\"showEnvironmentName\">\n    </setting>\n  </div>\n\n  <div class=\"save\" *ngIf=\"!readOnly && !submitting && formGroup.dirty\">\n    <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n      <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n        <span>Something went wrong and we could not save your settings. You can try again or <a\n            href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a></span>\n      </div>\n      <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n        <span>Oh no! A feature flag has invalid or missing data.</span>\n      </div>\n    </div>\n    <button type=\"button\" mat-stroked-button *ngIf=\"!showRevertQuestion\" (click)=\"showRevertQuestion = true\">\n      <mat-icon>history</mat-icon><span>Revert changes</span>\n    </button>\n    <div *ngIf=\"showRevertQuestion\">\n      <span class=\"revert\">Revert to last saved state?</span>\n      <button type=\"button\" class=\"yes\" mat-stroked-button (click)=\"handleRevertYes()\">Yes</button>\n      <button type=\"button\" mat-stroked-button (click)=\"handleRevertCancel()\">No</button>\n    </div>\n    <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [disabled]=\"submitting\">\n      <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n    </button>\n  </div>\n</form>", styles: [".wrapper{background-color:#f3f3f3;border:1px solid rgba(0,0,0,.12);border-radius:4px;margin:1em 0}.show-hide a{cursor:pointer;font-size:.8rem}.save{position:sticky;bottom:0;min-height:38px;padding:.5rem .5rem .5rem 0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;z-index:1000}.save .save-button{animation:shadow-pulse 1s 3;margin-left:1rem}.save>*{margin:.3em}.save .revert{margin:0 16px;font-size:14px}.save .yes{margin:0 5px}.error{background-color:#a32b2d;color:#fff;padding:5px;font-size:.9em}.error a{color:#fff;text-decoration:underline}@media (max-width: 700px){.save{padding:.5rem 0}}\n"], components: [{ type: SettingComponent, selector: "setting", inputs: ["formGroup", "readOnly", "canEditSetting", "canDeleteSetting", "deleteSettingText", "showEnvironmentName"], outputs: ["editSettingRequested", "deleteSettingRequested"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SettingListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-setting-list',
+                    templateUrl: './setting-list.component.html',
+                    styleUrls: ['./setting-list.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: SettingListFormHelper }, { type: i2$2.MatSnackBar }, { type: i1$1.MatDialog }]; }, propDecorators: { canEditSetting: [{
+                type: Input
+            }], canDeleteSetting: [{
+                type: Input
+            }], onSave: [{
+                type: Input
+            }], loadSettingValues: [{
+                type: Input
+            }], deleteSettingText: [{
+                type: Input
+            }], showEnvironmentName: [{
+                type: Input
+            }], editSettingRequested: [{
+                type: Output
+            }], deleteSettingRequested: [{
+                type: Output
+            }], formValuesChanged: [{
+                type: Output
+            }] } });
 
-class SettingComponent {
-    constructor(formHelper, cdRef) {
-        this.formHelper = formHelper;
-        this.cdRef = cdRef;
+class SettingItemComponent extends BaseComponent {
+    constructor(publicApiService) {
+        super(publicApiService);
+        this.canEditSetting = true;
+        this.canDeleteSetting = true;
         this.deleteSettingText = 'Delete setting';
-        this.showEnvironmentName = false;
+        this.showEnvironmentName = true;
         this.editSettingRequested = new EventEmitter();
         this.deleteSettingRequested = new EventEmitter();
-        this.rulesBeingRendered = false;
-        this.SettingType = SettingType;
+        this.loadSucceeded = new EventEmitter();
+        this.loadFailed = new EventEmitter();
+        this.saveSucceeded = new EventEmitter();
+        this.saveFailed = new EventEmitter();
+        this.formValuesChanged = new EventEmitter();
+        this.loadSettingValues = () => {
+            return this.createSettingValuesService().getSettingValue(this.environmentId, this.settingId)
+                .pipe(map(settingValue => {
+                this.settingValue = settingValue;
+                const settingValues = {
+                    settingValues: [settingValue],
+                    readOnly: settingValue.readOnly,
+                    config: settingValue.config,
+                    environment: settingValue.environment
+                };
+                this.loadSucceeded.emit(settingValues);
+                return settingValues;
+            }), catchError(error => {
+                this.loadFailed.emit(error);
+                return throwError(error);
+            }));
+        };
+        this.handleSave = (model) => {
+            if (model.settingValues.length === 0) {
+                return of();
+            }
+            const updateModel = model.settingValues[0];
+            return this.createSettingValuesService().replaceSettingValue(this.environmentId, this.settingId, updateModel, model.reason)
+                .pipe(map(settingValue => {
+                this.settingValue = settingValue;
+                const settingValues = {
+                    settingValues: [settingValue],
+                    readOnly: settingValue.readOnly,
+                    config: settingValue.config,
+                    environment: settingValue.environment
+                };
+                this.saveSucceeded.emit(settingValues);
+                return settingValues;
+            }), catchError(error => {
+                this.saveFailed.emit(error);
+                return throwError(error);
+            }));
+        };
     }
-    ngOnInit() { }
-    environment() {
-        return this.formGroup.root.get('environment').value;
+    ngOnInit() {
     }
-    setting() {
-        return this.formGroup.get('setting').value;
+    onEditSettingRequested(setting) {
+        this.editSettingRequested.emit({
+            setting: setting.setting,
+            environment: this.settingValue.environment,
+            config: this.settingValue.config
+        });
     }
-    integrationLinks() {
-        return this.formGroup.get('integrationLinks');
+    onDeleteSettingRequested(setting) {
+        this.deleteSettingRequested.emit({
+            setting: setting.setting,
+            environment: this.settingValue.environment,
+            config: this.settingValue.config
+        });
     }
-    rolloutRules() {
-        return this.formGroup.get('rolloutRules');
+    onFormValuesChanged() {
+        this.formValuesChanged.emit();
     }
-    rolloutPercentageItems() {
-        return this.formGroup.get('rolloutPercentageItems');
+}
+SettingItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SettingItemComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component });
+SettingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SettingItemComponent, selector: "configcat-setting-item", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", settingId: "settingId", canEditSetting: "canEditSetting", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { editSettingRequested: "editSettingRequested", deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<configcat-setting-list [canEditSetting]=\"canEditSetting\" [canDeleteSetting]=\"canDeleteSetting\"\n    [onSave]=\"handleSave\" [loadSettingValues]=\"loadSettingValues\"\n    (editSettingRequested)=\"onEditSettingRequested($event)\" (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n    [deleteSettingText]=\"deleteSettingText\"\n    [showEnvironmentName]=\"showEnvironmentName\" (formValuesChanged)=\"onFormValuesChanged()\">\n</configcat-setting-list>", styles: [".container{font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif;background-color:#f3f3f3;border:1px solid rgba(0,0,0,.12);border-radius:4px;margin:1em 0}.container .setting-full{position:relative;display:flex;flex-wrap:nowrap}.container .setting-full .setting-details{display:flex;flex-direction:column;width:400px;padding:1em 0 1em 1em}.container .setting-full .setting-details>*{margin:.5em}.container .setting-full .setting-details .setting-name{flex-direction:row}.container .setting-full .setting-details .setting-name .name{font-weight:bold;word-wrap:break-word;max-width:100%}.container .setting-full .setting-details .setting-key{word-wrap:break-word}.container .setting-full .setting-details .description{font-size:.8em}.container .setting-full .setting-details code{background-color:#d3d3d3;padding:3px 6px}.container .setting-full .rules-list{width:100%;padding:1em}.container .setting-full .targeting-button{margin-left:1rem;margin-bottom:1em}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;border-radius:4px;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;min-width:100px}.end{margin-left:auto}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}@media (max-width: 1200px){.setting-full .setting-details{width:300px}}@media (max-width: 700px){.setting-full{flex-wrap:wrap}.setting-full .setting-details{padding:.2em 0 .2em .2em}.setting-full .all-other{margin:.5em .3em}}\n"], components: [{ type: SettingListComponent, selector: "configcat-setting-list", inputs: ["canEditSetting", "canDeleteSetting", "onSave", "loadSettingValues", "deleteSettingText", "showEnvironmentName"], outputs: ["editSettingRequested", "deleteSettingRequested", "formValuesChanged"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SettingItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-setting-item',
+                    templateUrl: './setting-item.component.html',
+                    styleUrls: ['./setting-item.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: PublicApiService }]; }, propDecorators: { productId: [{
+                type: Input
+            }], environmentId: [{
+                type: Input
+            }], configId: [{
+                type: Input
+            }], settingId: [{
+                type: Input
+            }], canEditSetting: [{
+                type: Input
+            }], canDeleteSetting: [{
+                type: Input
+            }], deleteSettingText: [{
+                type: Input
+            }], showEnvironmentName: [{
+                type: Input
+            }], editSettingRequested: [{
+                type: Output
+            }], deleteSettingRequested: [{
+                type: Output
+            }], loadSucceeded: [{
+                type: Output
+            }], loadFailed: [{
+                type: Output
+            }], saveSucceeded: [{
+                type: Output
+            }], saveFailed: [{
+                type: Output
+            }], formValuesChanged: [{
+                type: Output
+            }] } });
+
+class SettingSelectComponent extends BaseComponent {
+    constructor(publicApiService) {
+        super(publicApiService);
+        this.settings = [];
     }
-    value() {
-        return this.formGroup.get('value');
+    ngOnInit() {
+        this.settings = [];
+        this.reloadSettings();
     }
-    addRolloutRule() {
-        this.rolloutRules().push(this.formHelper.createRolloutRuleFormGroup({
-            comparisonAttribute: 'Identifier',
-            comparator: RolloutRuleComparator.SensitiveIsOneOf,
-            comparisonValue: '',
-            value: this.setting().settingType === SettingType.Boolean ? false : null
-        }, this.readOnly, this.setting().settingType));
-        this.rolloutRules().markAsDirty();
+    ngOnChanges() {
+        this.reloadSettings();
     }
-    removeRolloutRules() {
-        this.rolloutRules().clear();
-        this.rolloutRules().markAsDirty();
+    reloadSettings() {
+        if (this.configId) {
+            this.createSettingsService().getSettings(this.configId).subscribe(settings => {
+                this.settings = settings;
+                if (this.settings.length > 0) {
+                    this.valueFormControl.setValue(this.settings[0].settingId);
+                }
+            });
+        }
     }
-    addRolloutPercentageItem() {
-        if (this.rolloutPercentageItems().length === 0) {
-            switch (this.setting().settingType) {
-                case SettingType.Boolean:
-                    this.rolloutPercentageItems().push(this.formHelper.createRolloutPercentageItemFormGroup({
-                        percentage: 0,
-                        value: true
-                    }, this.readOnly, this.setting().settingType));
-                    this.rolloutPercentageItems().push(this.formHelper.createRolloutPercentageItemFormGroup({
-                        percentage: 100,
-                        value: false
-                    }, this.readOnly, this.setting().settingType));
-                    break;
-                case SettingType.String:
-                case SettingType.Int:
-                case SettingType.Double:
-                    for (let i = 0; i < 4; i++) {
-                        this.rolloutPercentageItems().push(this.formHelper.createRolloutPercentageItemFormGroup({
-                            percentage: 25,
-                            value: null
-                        }, this.readOnly, this.setting().settingType));
-                    }
-                    break;
+}
+SettingSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SettingSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component });
+SettingSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SettingSelectComponent, selector: "configcat-setting-select", inputs: { valueFormControl: "valueFormControl", configId: "configId" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\">\n    <mat-select placeholder=\"Feature flag or setting\" [formControl]=\"valueFormControl\" *ngIf=\"settings\" name=\"value\">\n        <mat-option *ngFor=\"let setting of settings\" [value]=\"setting.settingId\">{{setting.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SettingSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-setting-select',
+                    templateUrl: './setting-select.component.html',
+                    styleUrls: ['./setting-select.component.css']
+                }]
+        }], ctorParameters: function () { return [{ type: PublicApiService }]; }, propDecorators: { valueFormControl: [{
+                type: Input
+            }], configId: [{
+                type: Input
+            }] } });
+
+class ProductSelectComponent extends BaseComponent {
+    constructor(publicApiService) {
+        super(publicApiService);
+        this.products = [];
+    }
+    ngOnInit() {
+        this.products = [];
+        this.createProductsService().getProducts().subscribe(products => {
+            this.products = products;
+            if (this.products.length > 0) {
+                this.valueFormControl.setValue(this.products[0].productId, {
+                    emitEvent: true,
+                    emitModelToViewChange: true, emitViewToModelChange: true
+                });
             }
+        });
+    }
+}
+ProductSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: ProductSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component });
+ProductSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: ProductSelectComponent, selector: "configcat-product-select", inputs: { valueFormControl: "valueFormControl" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-field\">\n    <mat-select placeholder=\"Product\" [formControl]=\"valueFormControl\" name=\"productValue\">\n        <mat-option *ngFor=\"let product of products\" [value]=\"product.productId\">{{product.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: ProductSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-product-select',
+                    templateUrl: './product-select.component.html',
+                    styleUrls: ['./product-select.component.css']
+                }]
+        }], ctorParameters: function () { return [{ type: PublicApiService }]; }, propDecorators: { valueFormControl: [{
+                type: Input
+            }] } });
+
+class ConfigSelectComponent extends BaseComponent {
+    constructor(publicApiService) {
+        super(publicApiService);
+        this.configs = [];
+    }
+    ngOnInit() {
+        this.configs = [];
+        this.reloadConfigs();
+    }
+    ngOnChanges() {
+        this.reloadConfigs();
+    }
+    reloadConfigs() {
+        if (this.productId) {
+            this.createConfigsService().getConfigs(this.productId).subscribe(configs => {
+                this.configs = configs;
+                if (this.configs.length > 0) {
+                    this.valueFormControl.setValue(this.configs[0].configId);
+                }
+            });
         }
-        else if (this.setting().settingType !== SettingType.Boolean) {
-            this.rolloutPercentageItems().push(this.formHelper.createRolloutPercentageItemFormGroup({
-                percentage: 0,
-                value: null
-            }, this.readOnly, this.setting().settingType));
+    }
+}
+ConfigSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: ConfigSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component });
+ConfigSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: ConfigSelectComponent, selector: "configcat-config-select", inputs: { valueFormControl: "valueFormControl", productId: "productId" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ConfigSelectComponent),
+            multi: true
         }
-        this.rolloutPercentageItems().markAsDirty();
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\">\n    <mat-select placeholder=\"Config\" [formControl]=\"valueFormControl\" *ngIf=\"configs\" name=\"value\">\n        <mat-option *ngFor=\"let config of configs\" [value]=\"config.configId\">{{config.name}}</mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: ConfigSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-config-select',
+                    templateUrl: './config-select.component.html',
+                    styleUrls: ['./config-select.component.css'],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ConfigSelectComponent),
+                            multi: true
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: PublicApiService }]; }, propDecorators: { valueFormControl: [{
+                type: Input
+            }], productId: [{
+                type: Input
+            }] } });
+
+class EnvironmentSelectComponent extends BaseComponent {
+    constructor(publicApiService) {
+        super(publicApiService);
+        this.environments = [];
     }
-    removeRolloutPercentageItems() {
-        this.rolloutPercentageItems().clear();
-        this.rolloutPercentageItems().markAsDirty();
+    ngOnInit() {
+        this.environments = [];
+        this.reloadEnvironments();
     }
-    editSetting() {
-        this.editSettingRequested.emit({ setting: this.setting() });
+    ngOnChanges() {
+        this.reloadEnvironments();
     }
-    deleteSetting() {
-        this.deleteSettingRequested.emit({ setting: this.setting() });
+    reloadEnvironments() {
+        if (this.productId) {
+            this.createEnvironmentsService().getEnvironments(this.productId).subscribe(environments => {
+                this.environments = environments;
+                if (this.environments.length > 0) {
+                    this.valueFormControl.setValue(this.environments[0].environmentId);
+                }
+            });
+        }
+    }
+}
+EnvironmentSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: EnvironmentSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component });
+EnvironmentSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: EnvironmentSelectComponent, selector: "configcat-environment-select", inputs: { valueFormControl: "valueFormControl", productId: "productId" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\">\n    <mat-select placeholder=\"Environment\" [formControl]=\"valueFormControl\" *ngIf=\"environments\" name=\"value\">\n        <mat-option *ngFor=\"let environment of environments\" [value]=\"environment.environmentId\">{{environment.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: EnvironmentSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-environment-select',
+                    templateUrl: './environment-select.component.html',
+                    styleUrls: ['./environment-select.component.css']
+                }]
+        }], ctorParameters: function () { return [{ type: PublicApiService }]; }, propDecorators: { valueFormControl: [{
+                type: Input
+            }], productId: [{
+                type: Input
+            }] } });
+
+class FormHelper {
+    static getErrorMessage(control, hint = '') {
+        if (!control || control.valid) {
+            return;
+        }
+        if (control.hasError('required')) {
+            return `${hint} The field is required.`;
+        }
+        if (control.hasError('pattern')) {
+            return 'Not a valid e-mail address.';
+        }
+        if (control.hasError('minlength')) {
+            return 'The field must be at least ' + control.getError('minlength').requiredLength + ' characters long';
+        }
+        if (control.hasError('maxlength')) {
+            return 'The field must be at max ' + control.getError('maxlength').requiredLength + ' characters long';
+        }
+        return;
+    }
+}
+
+class AuthorizationComponent {
+    constructor(formBuilder, publicApiService) {
+        this.formBuilder = formBuilder;
+        this.publicApiService = publicApiService;
+        this.basePath = null;
+        this.authorized = new EventEmitter();
+        this.FormHelper = FormHelper;
+    }
+    ngOnInit() {
+        this.formGroup = this.formBuilder.group({
+            basicAuthUsername: ['', Validators.required],
+            basicAuthPassword: ['', Validators.required],
+        });
+    }
+    onSubmit() {
+        if (!this.formGroup.valid) {
+            return;
+        }
+        const meService = this.publicApiService.createMeService(this.formGroup.controls.basicAuthUsername.value, this.formGroup.controls.basicAuthPassword.value, this.basePath);
+        meService.getMe().subscribe(me => {
+            this.authorized.emit({
+                basicAuthUsername: this.formGroup.controls.basicAuthUsername.value,
+                basicAuthPassword: this.formGroup.controls.basicAuthPassword.value
+            });
+        }, error => {
+            this.formGroup.setErrors({ invalidAuthorization: 'Invalid Basic auth user name or password' });
+        });
     }
 }
-SettingComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'setting',
-                template: "<div class=\"setting-full\"\n  [formGroup]=\"formGroup\">\n  <div class=\"delete\" (click)=\"deleteSetting()\" *ngIf=\"canDeleteSetting\" [matTooltip]=\"deleteSettingText\"\n       data-robot=\"deleteSetting\">\n    <mat-icon>cancel</mat-icon>\n  </div>\n  <div class=\"setting-header flex\">\n    <div class=\"setting-name flex\">\n      <div class=\"name\" data-robot=\"settingName\">\n        {{setting().name}}\n        <span *ngIf=\"showEnvironmentName\"> ({{environment().name}})</span>\n      </div>\n      <div class=\"edit\" matTooltip=\"Edit name and description\" (click)=\"editSetting()\" *ngIf=\"canEditSetting\"\n           data-robot=\"renameSetting\">\n        <mat-icon>edit</mat-icon>\n      </div>\n    </div>\n  </div>\n  <div class=\"setting-content\">\n    <div class=\"setting-details\">\n      <div class=\"setting-key\"><code data-robot=\"settingKey\">{{setting().key}}</code></div>\n      <span *ngIf=\"setting().hint\" class=\"description\">{{setting().hint}}</span>\n    </div>\n\n    <div class=\"rules-list\">\n      <div>\n        <configcat-rollout-rules *ngIf=\"rolloutRules().controls.length !== 0\" [formGroup]=\"formGroup\">\n        </configcat-rollout-rules>\n      </div>\n\n      <configcat-rollout-percentage-items *ngIf=\"rolloutPercentageItems().controls.length !== 0\"\n                                          [formGroup]=\"formGroup\">\n      </configcat-rollout-percentage-items>\n\n      <div class=\"all-other flex\">\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length !== 0\"\n             data-tooltip=\"This value will be served to all users who the above rules don't apply.\">\n          <mat-chip-list>\n            <mat-chip class=\"chip\">To all other users, serve:</mat-chip>\n          </mat-chip-list>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length !== 0\"\n             data-tooltip=\"This fallback value will be served in case the user can't be identified.\">\n          <mat-chip-list>\n            <mat-chip class=\"chip\">To unidentified users, serve:</mat-chip>\n          </mat-chip-list>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length === 0\">\n          <mat-chip-list>\n            <mat-chip class=\"chip\">To all users, serve:</mat-chip>\n          </mat-chip-list>\n        </div>\n        <configcat-value class=\"served-value\" [valueFormControl]=\"value()\" [setting]=\"setting()\">\n        </configcat-value>\n      </div>\n      <div class=\"buttons\">\n        <button type=\"button\" class=\"sige-button targeting-button\" (click)=\"addRolloutRule()\" *ngIf=\"!readOnly\">\n          {{rolloutRules().length === 0 ? 'Target specific users' : 'Add new targeting rule'}}\n        </button>\n        <button type=\"button\" class=\"sige-button targeting-button\" (click)=\"addRolloutPercentageItem()\"\n                *ngIf=\"!readOnly\"\n                [disabled]=\"setting().settingType === SettingType.Boolean && rolloutPercentageItems().length !== 0\">\n          {{rolloutPercentageItems().length === 0 ? 'Target % of users' : 'Add new % option'}}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n",
-                styles: [".setting-full{position:relative;display:flex;flex-wrap:nowrap;flex-direction:column;border-radius:3px}.setting-full .delete{position:absolute;right:-15px;top:-10px;color:#d6a9a9;cursor:pointer}.setting-full .delete:hover{color:#ed5251}.setting-full .delete mat-icon{font-size:20px}.setting-full .setting-header{padding:1.5em 1.5em 0}.setting-full .setting-header .setting-name{flex-direction:row}.setting-full .setting-header .setting-name:hover>.edit{visibility:visible}.setting-full .setting-header .setting-name .name{font-weight:bold;word-wrap:break-word;max-width:100%}.setting-full .setting-header .setting-name .edit{margin:5px 0 0 5px;cursor:pointer;visibility:hidden;color:gray}.setting-full .setting-header .setting-name .edit:hover{visibility:visible}.setting-full .setting-header .setting-name .edit mat-icon{font-size:18px}.setting-full .setting-header .setting-meta{margin-left:auto;margin-right:14px;font-size:.7em;color:gray}.setting-full .setting-content{display:flex}.setting-full .setting-content .setting-details{display:flex;flex-direction:column;width:400px;padding:0 0 1em 1em}.setting-full .setting-content .setting-details>*{margin:.5em}.setting-full .setting-content .setting-details .integrations{font-size:.8rem}.setting-full .setting-content .setting-details .integrations>div{margin:3px}.setting-full .setting-content .setting-details .integrations>div>a:hover{text-decoration:underline}.setting-full .setting-content .setting-details .setting-key{word-wrap:break-word}.setting-full .setting-content .setting-details .description{font-size:.8em;white-space:pre-wrap;word-wrap:break-word;max-width:300px}.setting-full .setting-content .setting-details code{background-color:#d3d3d3;padding:3px 6px}.setting-full .setting-content .rules-list{width:100%;padding:0 1em 1em}.setting-full .setting-content .targeting-button{margin-left:.5rem;margin-right:.5rem;margin-bottom:1em}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;border-radius:4px;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;min-width:100px}.end{margin-left:auto}.buttons{display:flex;margin-left:.5rem;margin-right:.5rem}.buttons .updated-date{font-size:.7em;margin-left:auto;margin-right:22px;color:gray}.flex{display:flex;flex-wrap:wrap;align-items:center}.show-hide-toggle{margin-left:1em;cursor:pointer}.show-hide-toggle a{font-size:.8rem}.sige-button{background-color:#d9eadc;color:#363636;cursor:pointer;justify-content:center;padding:.375em .75em;text-align:center;white-space:nowrap;border-radius:2px;font-size:.75rem;border:1px solid #dbdbdb;box-shadow:none;display:inline-flex;font-family:Montserrat,Roboto,\"Helvetica Neue\",sans-serif}.sige-button:hover{background-color:#bad0be}.sige-button:disabled{background-color:#fff;color:#b3b3b3}@media (max-width: 1200px){.setting-details{width:300px}}@media (max-width: 700px){.setting-full .setting-content{flex-wrap:wrap}.setting-full .setting-content .rules-list{padding:0}.buttons{flex-direction:column}.updated-date{display:none}.setting-details{padding:.2em 0 .2em .2em}.all-other{margin:.5em .3em}}\n"]
-            },] }
-];
-SettingComponent.ctorParameters = () => [
-    { type: SettingListFormHelper },
-    { type: ChangeDetectorRef }
-];
-SettingComponent.propDecorators = {
-    formGroup: [{ type: Input }],
-    readOnly: [{ type: Input }],
-    canEditSetting: [{ type: Input }],
-    canDeleteSetting: [{ type: Input }],
-    deleteSettingText: [{ type: Input }],
-    showEnvironmentName: [{ type: Input }],
-    editSettingRequested: [{ type: Output }],
-    deleteSettingRequested: [{ type: Output }]
-};
+AuthorizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: AuthorizationComponent, deps: [{ token: i2.FormBuilder }, { token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component });
+AuthorizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: AuthorizationComponent, selector: "configcat-authorization", inputs: { basePath: "basePath" }, outputs: { authorized: "authorized" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"container\">\n        <div class=\"form\">\n            <p>\n                <a href=\"https://app.configcat.com/my-account/public-api-credentials\" target=\"_blank\">\n                    Get your Basic Auth user name and password</a> to access ConfigCat Public API.\n                <br /><br />\n                <b>Note!</b> Your ConfigCat account's email address and password will not work here.\n            </p>\n\n            <mat-form-field class=\"form-field\">\n                <mat-label>Basic auth user name</mat-label>\n                <input matInput placeholder=\"Basic auth user name\" formControlName=\"basicAuthUsername\">\n                <mat-error *ngIf=\"formGroup.controls.basicAuthUsername.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.basicAuthUsername)}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"form-field\">\n                <mat-label>Basic auth password</mat-label>\n                <input matInput placeholder=\"Basic auth password\" formControlName=\"basicAuthPassword\" type=\"password\"\n                    autocomplete=\"current-password\">\n                <mat-error *ngIf=\"formGroup.controls.basicAuthPassword.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.basicAuthPassword)}}\n                </mat-error>\n            </mat-form-field>\n            <div>\n                <button mat-raised-button color=\"primary\" type=\"submit\" class=\"submit\">Authorize</button>\n                <mat-error *ngIf=\"formGroup.invalid && formGroup.errors && formGroup.errors.invalidAuthorization\">\n                    {{formGroup.errors.invalidAuthorization}}</mat-error>\n            </div>\n        </div>\n    </div>\n</form>", styles: [".container{display:flex;margin:8px}.form{width:100%}.form-field{width:100%;margin-bottom:8px}.submit{margin-top:8px;margin-bottom:8px}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: AuthorizationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'configcat-authorization',
+                    templateUrl: './authorization.component.html',
+                    styleUrls: ['./authorization.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i2.FormBuilder }, { type: PublicApiService }]; }, propDecorators: { basePath: [{
+                type: Input
+            }], authorized: [{
+                type: Output
+            }] } });
 
 class NgConfigCatPublicApiUIModule {
     constructor() { }
@@ -1349,60 +1448,119 @@ class NgConfigCatPublicApiUIModule {
         };
     }
 }
-NgConfigCatPublicApiUIModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    BaseComponent,
-                    ProductSelectComponent,
-                    ConfigSelectComponent,
-                    EnvironmentSelectComponent,
-                    SettingSelectComponent,
-                    SettingItemComponent,
-                    AuthorizationComponent,
-                    SettingListComponent,
-                    SettingComponent,
-                    RolloutPercentageItemsComponent,
-                    RolloutRulesComponent,
-                    ValueComponent,
-                    ReasonDialogComponent,
-                    ConcurrentDialogComponent,
-                    SaveSnackbarComponent,
-                    ExpandDialogComponent
-                ],
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    BrowserAnimationsModule,
-                    HttpClientModule,
-                    ApiModule,
-                    MatFormFieldModule,
-                    MatOptionModule,
-                    MatSelectModule,
-                    MatButtonModule,
-                    MatInputModule,
-                    MatIconModule,
-                    MatTooltipModule,
-                    MatChipsModule,
-                    MatAutocompleteModule,
-                    DragDropModule,
-                    RouterModule,
-                    MatSnackBarModule,
-                    MatDialogModule,
-                    MatMenuModule
-                ],
-                exports: [
-                    ApiModule,
-                    AuthorizationComponent,
-                    ProductSelectComponent,
-                    ConfigSelectComponent,
-                    EnvironmentSelectComponent,
-                    SettingSelectComponent,
-                    SettingItemComponent
-                ]
-            },] }
-];
-NgConfigCatPublicApiUIModule.ctorParameters = () => [];
+NgConfigCatPublicApiUIModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: NgConfigCatPublicApiUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgConfigCatPublicApiUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: NgConfigCatPublicApiUIModule, declarations: [BaseComponent,
+        ProductSelectComponent,
+        ConfigSelectComponent,
+        EnvironmentSelectComponent,
+        SettingSelectComponent,
+        SettingItemComponent,
+        AuthorizationComponent,
+        SettingListComponent,
+        SettingComponent,
+        RolloutPercentageItemsComponent,
+        RolloutRulesComponent,
+        ValueComponent,
+        ReasonDialogComponent,
+        ConcurrentDialogComponent,
+        SaveSnackbarComponent,
+        ExpandDialogComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        BrowserAnimationsModule,
+        MatFormFieldModule,
+        MatOptionModule,
+        MatSelectModule,
+        MatButtonModule,
+        MatInputModule,
+        MatIconModule,
+        MatTooltipModule,
+        MatChipsModule,
+        MatAutocompleteModule,
+        DragDropModule,
+        RouterModule,
+        MatSnackBarModule,
+        MatDialogModule,
+        MatMenuModule,
+        ApiModule], exports: [AuthorizationComponent,
+        ProductSelectComponent,
+        ConfigSelectComponent,
+        EnvironmentSelectComponent,
+        SettingSelectComponent,
+        SettingItemComponent] });
+NgConfigCatPublicApiUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: NgConfigCatPublicApiUIModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            BrowserAnimationsModule,
+            MatFormFieldModule,
+            MatOptionModule,
+            MatSelectModule,
+            MatButtonModule,
+            MatInputModule,
+            MatIconModule,
+            MatTooltipModule,
+            MatChipsModule,
+            MatAutocompleteModule,
+            DragDropModule,
+            RouterModule,
+            MatSnackBarModule,
+            MatDialogModule,
+            MatMenuModule,
+            ApiModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: NgConfigCatPublicApiUIModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BaseComponent,
+                        ProductSelectComponent,
+                        ConfigSelectComponent,
+                        EnvironmentSelectComponent,
+                        SettingSelectComponent,
+                        SettingItemComponent,
+                        AuthorizationComponent,
+                        SettingListComponent,
+                        SettingComponent,
+                        RolloutPercentageItemsComponent,
+                        RolloutRulesComponent,
+                        ValueComponent,
+                        ReasonDialogComponent,
+                        ConcurrentDialogComponent,
+                        SaveSnackbarComponent,
+                        ExpandDialogComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        BrowserAnimationsModule,
+                        MatFormFieldModule,
+                        MatOptionModule,
+                        MatSelectModule,
+                        MatButtonModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        MatChipsModule,
+                        MatAutocompleteModule,
+                        DragDropModule,
+                        RouterModule,
+                        MatSnackBarModule,
+                        MatDialogModule,
+                        MatMenuModule,
+                        ApiModule
+                    ],
+                    exports: [
+                        AuthorizationComponent,
+                        ProductSelectComponent,
+                        ConfigSelectComponent,
+                        EnvironmentSelectComponent,
+                        SettingSelectComponent,
+                        SettingItemComponent
+                    ]
+                }]
+        }], ctorParameters: function () { return []; } });
 
 /*
  * Public API Surface of ng-configcat-publicapi-ui
@@ -1412,5 +1570,5 @@ NgConfigCatPublicApiUIModule.ctorParameters = () => [];
  * Generated bundle index. Do not edit.
  */
 
-export { AuthorizationComponent, ConfigSelectComponent, EnvironmentSelectComponent, NgConfigCatPublicApiUIModule, ProductSelectComponent, PublicApiService, SettingItemComponent, SettingSelectComponent, BaseComponent as ɵa, PublicApiService as ɵb, Configuration as ɵc, PublicApiService as ɵd, SettingListComponent as ɵe, SettingListFormHelper as ɵf, SettingComponent as ɵg, RolloutPercentageItemsComponent as ɵh, RolloutRulesComponent as ɵi, ValueComponent as ɵj, ReasonDialogComponent as ɵk, ConcurrentDialogComponent as ɵl, SaveSnackbarComponent as ɵm, ExpandDialogComponent as ɵn };
+export { AuthorizationComponent, ConfigSelectComponent, EnvironmentSelectComponent, NgConfigCatPublicApiUIModule, ProductSelectComponent, PublicApiService, SettingItemComponent, SettingSelectComponent };
 //# sourceMappingURL=ng-configcat-publicapi-ui.js.map