ng-configcat-publicapi-ui 3.0.2 → 3.0.4

package/fesm2020/ng-configcat-publicapi-ui.mjs

@@ -21,8 +21,8 @@ import * as i2$2 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i7 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i8 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i7$1 from '@angular/material/tooltip';
+import { MatTooltipModule, MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
 import * as i5$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i11 from '@angular/cdk/drag-drop';
@@ -476,8 +476,10 @@ class ExpandDialogComponent {
         this.dialogRef = dialogRef;
         this.formBuilder = formBuilder;
         this.data = data;
+        this.readOnly = false;
     }
     ngOnInit() {
+        this.readOnly = this.data.control.disabled;
         if (this.data.multiline) {
             this.buildFormGroup();
         }
@@ -498,7 +500,7 @@ class ExpandDialogComponent {
         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)))
+            values: this.formBuilder.array(list.map((v) => this.formBuilder.control({ value: v, disabled: this.data.control.disabled })))
         });
         this.formGroupSubscription = this.formGroup.valueChanges.subscribe((formGroupValue) => {
             this.data.control.setValue(formGroupValue.values
@@ -529,10 +531,10 @@ class ExpandDialogComponent {
     }
 }
 ExpandDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ExpandDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i2.UntypedFormBuilder }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ExpandDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ExpandDialogComponent, selector: "configcat-expand-dialog", ngImport: i0, template: "<div mat-dialog-content class=\"container\">\n    <mat-form-field appearance=\"outline\" *ngIf=\"!data.multiline\" subscriptSizing=\"dynamic\">\n        <mat-label></mat-label>\n        <textarea matInput [formControl]=\"data.control\" rows=\"10\"></textarea>\n    </mat-form-field>\n    <div [formGroup]=\"formGroup\" *ngIf=\"data.multiline\">\n        <div *ngFor=\"let valueControl of getValueControls(); let i = index;\" class=\"value-field\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [formControl]=\"valueControl\" />\n            </mat-form-field>\n            <button (click)=\"remove(i)\" mat-icon-button type=\"button\" class=\"no-density-mat-icon-button\"\n                matTooltip=\"Remove item\">\n                <mat-icon>delete_outline</mat-icon>\n            </button>\n        </div>\n        <button (click)=\"add()\" mat-stroked-button type=\"button\">\n            <mat-icon>add</mat-icon>Add item\n        </button>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button type=\"button\" mat-flat-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}.container>* .no-density-mat-icon-button{width:48px;height:48px;padding:12px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
+ExpandDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ExpandDialogComponent, selector: "configcat-expand-dialog", ngImport: i0, template: "<div mat-dialog-content class=\"container\">\n    <mat-form-field appearance=\"outline\" *ngIf=\"!data.multiline\" subscriptSizing=\"dynamic\">\n        <mat-label></mat-label>\n        <textarea matInput [formControl]=\"data.control\" rows=\"10\"></textarea>\n    </mat-form-field>\n    <div [formGroup]=\"formGroup\" *ngIf=\"data.multiline\">\n        <div *ngFor=\"let valueControl of getValueControls(); let i = index;\" class=\"value-field\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [formControl]=\"valueControl\" />\n            </mat-form-field>\n            <button (click)=\"remove(i)\" mat-icon-button type=\"button\" class=\"no-density-mat-icon-button\"\n                matTooltip=\"Remove item\" *ngIf=\"!readOnly\">\n                <mat-icon>delete_outline</mat-icon>\n            </button>\n        </div>\n        <button (click)=\"add()\" mat-stroked-button type=\"button\" *ngIf=\"!readOnly\">\n            <mat-icon>add</mat-icon>Add item\n        </button>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button type=\"button\" mat-flat-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}.container>* .no-density-mat-icon-button{width:48px;height:48px;padding:12px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ExpandDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'configcat-expand-dialog', template: "<div mat-dialog-content class=\"container\">\n    <mat-form-field appearance=\"outline\" *ngIf=\"!data.multiline\" subscriptSizing=\"dynamic\">\n        <mat-label></mat-label>\n        <textarea matInput [formControl]=\"data.control\" rows=\"10\"></textarea>\n    </mat-form-field>\n    <div [formGroup]=\"formGroup\" *ngIf=\"data.multiline\">\n        <div *ngFor=\"let valueControl of getValueControls(); let i = index;\" class=\"value-field\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [formControl]=\"valueControl\" />\n            </mat-form-field>\n            <button (click)=\"remove(i)\" mat-icon-button type=\"button\" class=\"no-density-mat-icon-button\"\n                matTooltip=\"Remove item\">\n                <mat-icon>delete_outline</mat-icon>\n            </button>\n        </div>\n        <button (click)=\"add()\" mat-stroked-button type=\"button\">\n            <mat-icon>add</mat-icon>Add item\n        </button>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button type=\"button\" mat-flat-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}.container>* .no-density-mat-icon-button{width:48px;height:48px;padding:12px}\n"] }]
+            args: [{ selector: 'configcat-expand-dialog', template: "<div mat-dialog-content class=\"container\">\n    <mat-form-field appearance=\"outline\" *ngIf=\"!data.multiline\" subscriptSizing=\"dynamic\">\n        <mat-label></mat-label>\n        <textarea matInput [formControl]=\"data.control\" rows=\"10\"></textarea>\n    </mat-form-field>\n    <div [formGroup]=\"formGroup\" *ngIf=\"data.multiline\">\n        <div *ngFor=\"let valueControl of getValueControls(); let i = index;\" class=\"value-field\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [formControl]=\"valueControl\" />\n            </mat-form-field>\n            <button (click)=\"remove(i)\" mat-icon-button type=\"button\" class=\"no-density-mat-icon-button\"\n                matTooltip=\"Remove item\" *ngIf=\"!readOnly\">\n                <mat-icon>delete_outline</mat-icon>\n            </button>\n        </div>\n        <button (click)=\"add()\" mat-stroked-button type=\"button\" *ngIf=\"!readOnly\">\n            <mat-icon>add</mat-icon>Add item\n        </button>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button type=\"button\" mat-flat-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}.container>* .no-density-mat-icon-button{width:48px;height:48px;padding:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: i2.UntypedFormBuilder }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -590,7 +592,7 @@ class ValueComponent {
     }
 }
 ValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ValueComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", 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=\"{{ formatDecimalNumber(3.14) }}\" name=\"value\" inputDisplayNormalizer>\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;inset: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:10px;align-items:center}.flex .spacer{min-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;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;min-width:150px;margin:0 3px}.flex .container input[type=number]{padding:0 2px 0 5px}.flex .container .invalid{border:1px solid #ff5252}.flex .container .error{color:#ff5252;margin-right:5px}.flex .variationId{margin:0 4px 0 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)}@media (max-width: 920px){.flex{margin-right:0!important}.flex .spacer{min-width:5px}}@media (max-width: 510px){.flex .container .error{display:none}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }] });
+ValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", 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=\"{{ formatDecimalNumber(3.14) }}\" name=\"value\" inputDisplayNormalizer>\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;inset: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:10px;align-items:center}.flex .spacer{min-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;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;min-width:150px;margin:0 3px}.flex .container input[type=number]{padding:0 2px 0 5px}.flex .container .invalid{border:1px solid #ff5252}.flex .container .error{color:#ff5252;margin-right:5px}.flex .variationId{margin:0 4px 0 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)}@media (max-width: 920px){.flex{margin-right:0!important}.flex .spacer{min-width:5px}}@media (max-width: 510px){.flex .container .error{display:none}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: 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=\"{{ formatDecimalNumber(3.14) }}\" name=\"value\" inputDisplayNormalizer>\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;inset: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:10px;align-items:center}.flex .spacer{min-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;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;min-width:150px;margin:0 3px}.flex .container input[type=number]{padding:0 2px 0 5px}.flex .container .invalid{border:1px solid #ff5252}.flex .container .error{color:#ff5252;margin-right:5px}.flex .variationId{margin:0 4px 0 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)}@media (max-width: 920px){.flex{margin-right:0!important}.flex .spacer{min-width:5px}}@media (max-width: 510px){.flex .container .error{display:none}}\n"] }]
@@ -662,10 +664,10 @@ class RolloutPercentageItemsComponent {
     }
 }
 RolloutPercentageItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: RolloutPercentageItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RolloutPercentageItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", 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-set>\n            <mat-chip class=\"chip\">ELSE IF</mat-chip>\n        </mat-chip-set>\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 matTooltip=\"The sum of percentages must be equal to 100.\" matTooltipPosition=\"above\"\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;margin:.5em 1em;position:relative;padding:.5em 0;display:flex;flex-wrap:wrap}.percentage-wrapper .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.percentage-wrapper .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.percentage-wrapper .delete:hover mat-icon{opacity:1}.percentage-wrapper .delete-option{color:#ed5251;cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover mat-icon{opacity:1}.percentage-wrapper .delete-option mat-icon{opacity:.5;font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{font-size:12px;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}.value .value-name{display:none}input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;width:40px;margin-top:3px;margin-right:5px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.users{margin-left:20px}@media (max-width: 920px){.value{min-width:0!important}.value .served-value{margin:3px 7px 3px 0}}@media (max-width: 650px){.users{margin-left:5px}}@media (max-width: 540px){.users{font-size:12px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "component", type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }] });
+RolloutPercentageItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", 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-set>\n            <mat-chip class=\"chip\">ELSE IF</mat-chip>\n        </mat-chip-set>\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 matTooltip=\"The sum of percentages must be equal to 100.\" matTooltipPosition=\"above\"\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;margin:.5em 1em;position:relative;padding:.5em 0;display:flex;flex-wrap:wrap}.percentage-wrapper .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.percentage-wrapper .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.percentage-wrapper .delete:hover mat-icon{opacity:1}.percentage-wrapper .delete-option{color:#ed5251;cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover mat-icon{opacity:1}.percentage-wrapper .delete-option mat-icon{opacity:.5;font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{font-size:12px;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}.value .value-name{display:none}input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;width:40px;margin-top:3px;margin-right:5px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}input:focus{outline-color:#e5e5e5;outline-offset:-1px}.users{margin-left:20px}@media (max-width: 920px){.value{min-width:0!important}.value .served-value{margin:3px 7px 3px 0}}@media (max-width: 650px){.users{margin-left:5px}}@media (max-width: 540px){.users{font-size:12px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "component", type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: 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-set>\n            <mat-chip class=\"chip\">ELSE IF</mat-chip>\n        </mat-chip-set>\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 matTooltip=\"The sum of percentages must be equal to 100.\" matTooltipPosition=\"above\"\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;margin:.5em 1em;position:relative;padding:.5em 0;display:flex;flex-wrap:wrap}.percentage-wrapper .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.percentage-wrapper .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.percentage-wrapper .delete:hover mat-icon{opacity:1}.percentage-wrapper .delete-option{color:#ed5251;cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover mat-icon{opacity:1}.percentage-wrapper .delete-option mat-icon{opacity:.5;font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{font-size:12px;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}.value .value-name{display:none}input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;width:40px;margin-top:3px;margin-right:5px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.users{margin-left:20px}@media (max-width: 920px){.value{min-width:0!important}.value .served-value{margin:3px 7px 3px 0}}@media (max-width: 650px){.users{margin-left:5px}}@media (max-width: 540px){.users{font-size:12px}}\n"] }]
+            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-set>\n            <mat-chip class=\"chip\">ELSE IF</mat-chip>\n        </mat-chip-set>\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 matTooltip=\"The sum of percentages must be equal to 100.\" matTooltipPosition=\"above\"\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;margin:.5em 1em;position:relative;padding:.5em 0;display:flex;flex-wrap:wrap}.percentage-wrapper .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.percentage-wrapper .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.percentage-wrapper .delete:hover mat-icon{opacity:1}.percentage-wrapper .delete-option{color:#ed5251;cursor:pointer;margin-left:1rem;margin-top:4px}.percentage-wrapper .delete-option:hover mat-icon{opacity:1}.percentage-wrapper .delete-option mat-icon{opacity:.5;font-size:20px}.if{display:flex;align-items:center}.if>*{margin:0 .5em}.if .spacing{margin-right:44px}.if .chip{font-size:12px;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}.value .value-name{display:none}input{background-color:#fff;border:1px solid #e5e5e5;min-height:28px;width:40px;margin-top:3px;margin-right:5px;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}input:focus{outline-color:#e5e5e5;outline-offset:-1px}.users{margin-left:20px}@media (max-width: 920px){.value{min-width:0!important}.value .served-value{margin:3px 7px 3px 0}}@media (max-width: 650px){.users{margin-left:5px}}@media (max-width: 540px){.users{font-size:12px}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { formGroup: [{
                 type: Input
             }], readOnly: [{
@@ -932,10 +934,10 @@ class RolloutRulesComponent {
     }
 }
 RolloutRulesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: RolloutRulesComponent, deps: [{ token: i1$1.MatDialog }, { token: SettingListFormHelper }], target: i0.ɵɵFactoryTarget.Component });
-RolloutRulesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: RolloutRulesComponent, selector: "configcat-rollout-rules", inputs: { formGroup: "formGroup", readOnly: "readOnly", segments: "segments" }, 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\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 0\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\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\"\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\" matTooltip=\"Custom user attribute\" matTooltipPosition=\"above\"\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                            (change)=\"comparatorChanged(rolloutRule)\">\n                            <optgroup label=\"CONFIDENTIAL 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                            <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\" matTooltip=\"Comparison value\" matTooltipPosition=\"above\">\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                            inputDisplayNormalizer>\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\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n                <div class=\"fields flex\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 1\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\n                        <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                            rel=\"noopener noreferrer\">user</a>\n                    </div>\n\n\n                    <div class=\"select-wrapper\">\n                        <select class=\"custom-select segment-comparator\"\n                            [formControl]=\"getRolloutRuleSegmentComparatorFormControl(rolloutRule)\"\n                            matTooltip=\"Segment comparator\" matTooltipPosition=\"above\">\n                            <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                                {{comparator.label}}\n                            </option>\n                        </select>\n                    </div>\n\n                    <div class=\"select-wrapper\">\n                        <span class=\"attribute-error\"\n                            *ngIf=\"getRolloutRuleSegmentIdFormControl(rolloutRule).invalid\">*</span>\n                        <select class=\"custom-select segment-select\"\n                            [formControl]=\"getRolloutRuleSegmentIdFormControl(rolloutRule)\" matTooltip=\"Segment\"\n                            matTooltipPosition=\"above\"\n                            [ngClass]=\"{'invalid': getRolloutRuleSegmentIdFormControl(rolloutRule).invalid}\">\n                            <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\">\n                                {{segment.name}}\n                            </option>\n                        </select>\n                    </div>\n\n\n                    <div class=\"delete\" matTooltip=\"Remove targeting rule\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n\n                <div class=\"value flex\">\n                    <div class=\"serve\" *ngIf=\"setting().settingType !== SettingType.Boolean\">\n                        <mat-chip-set>\n                            <mat-chip class=\"chip\">Serve:</mat-chip>\n                        </mat-chip-set>\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;background-color:#fff;margin:1em;display:flex;position:relative;padding:.5em 0}.targeting-row:hover{background-color:#dbedff}.targeting-row .select-wrapper{position:relative}.targeting-row .info{position:absolute;cursor:pointer;top:-8px;left:166px;border-radius:50%;background-color:#fff;height:18px;width:18px}.targeting-row .info a{color:#0068f0;opacity:.5}.targeting-row .info a:hover{opacity:1}.targeting-row .info mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .warn{position:absolute;cursor:pointer;top:-8px;left:166px;height:18px;width:18px;border-radius:50%;background-color:#fff}.targeting-row .warn a{color:#fdc67f}.targeting-row .warn a:hover{color:#ff9200}.targeting-row .warn mat-icon{font-size:18px;height:18px;width:18px}.custom-select{margin-left:.5em;width:170px;background-color:#fff;border:1px solid #e5e5e5;height:30px;min-height:30px;line-height:30px;min-width:170px;font-size:.8em;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.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:41px}.fields .if .user-link{width:40px}.fields .if .chip{font-size:12px;background-color:#67b1fc3d}.fields .attribute-span{margin-left:.5em;display:flex;align-items:center}.fields .attribute-span[hidden]{display:none}.fields .attribute{width:170px;background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;flex-grow:100;min-width:170px;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;font-size:13.3px}.fields .invalid{border:1px solid #ff5252}.fields .attribute-error{color:#ff5252;margin:0 5px}.fields .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.fields .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.fields .delete:hover mat-icon{opacity:1}.fields .drag-handle{position:absolute;cursor:-moz-grab;left:-20px;top:14px}.fields .drag-handle mat-icon{font-size:20px}.fields .attribute-select{min-width:100px;width:100px;margin-left:0}.fields .segment-comparator,.fields .segment-select{margin-left:0;margin-right:.5em}.fields .segment-more mat-icon{position:relative;top:3px;cursor:pointer;font-size:16px;height:16px;width:16px;color:#797979;margin-top:3px}.fields .comparison-value{flex-grow:100;min-width:150px;display:flex;align-items:center;margin-left:.5em;margin-right:.5em}.fields .comparison-value .error{color:#ff5252;margin:0 5px}.fields .comparison-value input{background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;min-width:150px;flex-grow:100;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.fields .comparison-value input[type=text]{padding-right:30px}.fields .comparison-value .invalid{border:1px solid #ff5252}.fields .comparison-value .expand{position:relative;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.fields .comparison-value .expand mat-icon{transform:rotate(45deg)}.value{margin-left:auto;flex-wrap:nowrap}.value .serve{margin:0 2px 0 5px}.value .serve .chip{font-size:12px;background-color:#67b1fc3d}.value .served-value{margin:3px 0}.flex{display:flex;flex-wrap:wrap;align-items:center}@media (max-width: 1200px){.targeting-row{flex-wrap:wrap}.targeting-row .fields{max-width:500px}}@media (max-width: 920px){.value .served-value{margin:3px 7px 3px 0}.targeting-row .fields .drag-handle{left:-18px}}@media (max-width: 410px){.value .served-value{margin:7px 7px 3px 4px}}@media (max-width: 510px){.fields .comparison-value .error{display:none}}@media (max-width: 650px){.targeting-row{flex-direction:column}.targeting-row .help{left:161px}.targeting-row .fields{flex-direction:column;align-items:stretch}.targeting-row .fields .custom-select{margin:7px 7px 0}.targeting-row .fields .comparison-value{margin:7px}.targeting-row .fields .comparison-value input{margin:0 4px 0 0}.targeting-row .fields .attribute-span{margin:7px 7px 0}.targeting-row .fields .if{font-size:12px}.targeting-row .fields .if .spacing{margin-right:3px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i11.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i11.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }] });
+RolloutRulesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: RolloutRulesComponent, selector: "configcat-rollout-rules", inputs: { formGroup: "formGroup", readOnly: "readOnly", segments: "segments" }, 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\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 0\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\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\"\n                        (change)=\"attributeChanged($event.target, getRolloutRuleComparisonAttributeFormControl(rolloutRule))\"\n                        [disabled]=\"readOnly\">\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\" matTooltip=\"Custom user attribute\" matTooltipPosition=\"above\"\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                            (change)=\"comparatorChanged(rolloutRule)\">\n                            <optgroup label=\"CONFIDENTIAL 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                            <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\">\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                            matTooltip=\"Comparison value\" matTooltipPosition=\"above\" inputDisplayNormalizer>\n                        <div class=\"expand\" matTooltip=\"Pop-out Editor\" matTooltipPosition=\"above\"\n                            (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\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n                <div class=\"fields flex\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 1\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\n                        <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                            rel=\"noopener noreferrer\">user</a>\n                    </div>\n\n\n                    <div class=\"select-wrapper\">\n                        <select class=\"custom-select segment-comparator\"\n                            [formControl]=\"getRolloutRuleSegmentComparatorFormControl(rolloutRule)\"\n                            matTooltip=\"Segment comparator\" matTooltipPosition=\"above\">\n                            <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                                {{comparator.label}}\n                            </option>\n                        </select>\n                    </div>\n\n                    <div class=\"select-wrapper\">\n                        <span class=\"attribute-error\"\n                            *ngIf=\"getRolloutRuleSegmentIdFormControl(rolloutRule).invalid\">*</span>\n                        <select class=\"custom-select segment-select\"\n                            [formControl]=\"getRolloutRuleSegmentIdFormControl(rolloutRule)\" matTooltip=\"Segment\"\n                            matTooltipPosition=\"above\"\n                            [ngClass]=\"{'invalid': getRolloutRuleSegmentIdFormControl(rolloutRule).invalid}\">\n                            <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\">\n                                {{segment.name}}\n                            </option>\n                        </select>\n                    </div>\n\n\n                    <div class=\"delete\" matTooltip=\"Remove targeting rule\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n\n                <div class=\"value flex\">\n                    <div class=\"serve\" *ngIf=\"setting().settingType !== SettingType.Boolean\">\n                        <mat-chip-set>\n                            <mat-chip class=\"chip\">Serve:</mat-chip>\n                        </mat-chip-set>\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;background-color:#fff;margin:1em;display:flex;position:relative;padding:.5em 0}.targeting-row:hover{background-color:#dbedff}.targeting-row .select-wrapper{position:relative}.targeting-row .info{position:absolute;cursor:pointer;top:-8px;left:166px;border-radius:50%;background-color:#fff;height:18px;width:18px}.targeting-row .info a{color:#0068f0;opacity:.5}.targeting-row .info a:hover{opacity:1}.targeting-row .info mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .warn{position:absolute;cursor:pointer;top:-8px;left:166px;height:18px;width:18px;border-radius:50%;background-color:#fff}.targeting-row .warn a{color:#fdc67f}.targeting-row .warn a:hover{color:#ff9200}.targeting-row .warn mat-icon{font-size:18px;height:18px;width:18px}.custom-select{margin-left:.5em;width:170px;background-color:#fff;border:1px solid #e5e5e5;height:30px;min-height:30px;line-height:30px;min-width:170px;font-size:.8em;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.custom-select:focus{outline-color:#e5e5e5;outline-offset:-1px}.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:41px}.fields .if .user-link{width:40px}.fields .if .chip{font-size:12px;background-color:#67b1fc3d}.fields .attribute-span{margin-left:.5em;display:flex;align-items:center}.fields .attribute-span[hidden]{display:none}.fields .attribute{width:170px;background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;flex-grow:100;min-width:170px;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;font-size:13.3px}.fields .invalid{border:1px solid #ff5252}.fields .attribute-error{color:#ff5252;margin:0 5px}.fields .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.fields .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.fields .delete:hover mat-icon{opacity:1}.fields .drag-handle{position:absolute;cursor:-moz-grab;left:-20px;top:14px}.fields .drag-handle mat-icon{font-size:20px}.fields .attribute-select{min-width:100px;width:100px;margin-left:0}.fields .segment-comparator,.fields .segment-select{margin-left:0;margin-right:.5em}.fields .segment-more mat-icon{position:relative;top:3px;cursor:pointer;font-size:16px;height:16px;width:16px;color:#797979;margin-top:3px}.fields .comparison-value{flex-grow:100;min-width:150px;display:flex;align-items:center;margin-left:.5em;margin-right:.5em}.fields .comparison-value .error{color:#ff5252;margin:0 5px}.fields .comparison-value input{background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;min-width:150px;flex-grow:100;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.fields .comparison-value input[type=text]{padding-right:30px}.fields .comparison-value input:focus{outline-color:#e5e5e5;outline-offset:-1px}.fields .comparison-value .invalid{border:1px solid #ff5252}.fields .comparison-value .expand{position:relative;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.fields .comparison-value .expand mat-icon{transform:rotate(45deg)}.value{margin-left:auto;flex-wrap:nowrap}.value .serve{margin:0 2px 0 5px}.value .serve .chip{font-size:12px;background-color:#67b1fc3d}.value .served-value{margin:3px 0}.flex{display:flex;flex-wrap:wrap;align-items:center}@media (max-width: 1200px){.targeting-row{flex-wrap:wrap}.targeting-row .fields{max-width:500px}}@media (max-width: 920px){.value .served-value{margin:3px 7px 3px 0}.targeting-row .fields .drag-handle{left:-18px}}@media (max-width: 410px){.value .served-value{margin:7px 7px 3px 4px}}@media (max-width: 510px){.fields .comparison-value .error{display:none}}@media (max-width: 650px){.targeting-row{flex-direction:column}.targeting-row .help{left:161px}.targeting-row .fields{flex-direction:column;align-items:stretch}.targeting-row .fields .custom-select{margin:7px 7px 0}.targeting-row .fields .comparison-value{margin:7px}.targeting-row .fields .comparison-value input{margin:0 4px 0 0}.targeting-row .fields .attribute-span{margin:7px 7px 0}.targeting-row .fields .if{font-size:12px}.targeting-row .fields .if .spacing{margin-right:3px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i11.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i11.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: 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\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 0\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\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\"\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\" matTooltip=\"Custom user attribute\" matTooltipPosition=\"above\"\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                            (change)=\"comparatorChanged(rolloutRule)\">\n                            <optgroup label=\"CONFIDENTIAL 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                            <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\" matTooltip=\"Comparison value\" matTooltipPosition=\"above\">\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                            inputDisplayNormalizer>\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\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n                <div class=\"fields flex\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 1\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\n                        <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                            rel=\"noopener noreferrer\">user</a>\n                    </div>\n\n\n                    <div class=\"select-wrapper\">\n                        <select class=\"custom-select segment-comparator\"\n                            [formControl]=\"getRolloutRuleSegmentComparatorFormControl(rolloutRule)\"\n                            matTooltip=\"Segment comparator\" matTooltipPosition=\"above\">\n                            <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                                {{comparator.label}}\n                            </option>\n                        </select>\n                    </div>\n\n                    <div class=\"select-wrapper\">\n                        <span class=\"attribute-error\"\n                            *ngIf=\"getRolloutRuleSegmentIdFormControl(rolloutRule).invalid\">*</span>\n                        <select class=\"custom-select segment-select\"\n                            [formControl]=\"getRolloutRuleSegmentIdFormControl(rolloutRule)\" matTooltip=\"Segment\"\n                            matTooltipPosition=\"above\"\n                            [ngClass]=\"{'invalid': getRolloutRuleSegmentIdFormControl(rolloutRule).invalid}\">\n                            <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\">\n                                {{segment.name}}\n                            </option>\n                        </select>\n                    </div>\n\n\n                    <div class=\"delete\" matTooltip=\"Remove targeting rule\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n\n                <div class=\"value flex\">\n                    <div class=\"serve\" *ngIf=\"setting().settingType !== SettingType.Boolean\">\n                        <mat-chip-set>\n                            <mat-chip class=\"chip\">Serve:</mat-chip>\n                        </mat-chip-set>\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;background-color:#fff;margin:1em;display:flex;position:relative;padding:.5em 0}.targeting-row:hover{background-color:#dbedff}.targeting-row .select-wrapper{position:relative}.targeting-row .info{position:absolute;cursor:pointer;top:-8px;left:166px;border-radius:50%;background-color:#fff;height:18px;width:18px}.targeting-row .info a{color:#0068f0;opacity:.5}.targeting-row .info a:hover{opacity:1}.targeting-row .info mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .warn{position:absolute;cursor:pointer;top:-8px;left:166px;height:18px;width:18px;border-radius:50%;background-color:#fff}.targeting-row .warn a{color:#fdc67f}.targeting-row .warn a:hover{color:#ff9200}.targeting-row .warn mat-icon{font-size:18px;height:18px;width:18px}.custom-select{margin-left:.5em;width:170px;background-color:#fff;border:1px solid #e5e5e5;height:30px;min-height:30px;line-height:30px;min-width:170px;font-size:.8em;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.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:41px}.fields .if .user-link{width:40px}.fields .if .chip{font-size:12px;background-color:#67b1fc3d}.fields .attribute-span{margin-left:.5em;display:flex;align-items:center}.fields .attribute-span[hidden]{display:none}.fields .attribute{width:170px;background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;flex-grow:100;min-width:170px;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;font-size:13.3px}.fields .invalid{border:1px solid #ff5252}.fields .attribute-error{color:#ff5252;margin:0 5px}.fields .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.fields .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.fields .delete:hover mat-icon{opacity:1}.fields .drag-handle{position:absolute;cursor:-moz-grab;left:-20px;top:14px}.fields .drag-handle mat-icon{font-size:20px}.fields .attribute-select{min-width:100px;width:100px;margin-left:0}.fields .segment-comparator,.fields .segment-select{margin-left:0;margin-right:.5em}.fields .segment-more mat-icon{position:relative;top:3px;cursor:pointer;font-size:16px;height:16px;width:16px;color:#797979;margin-top:3px}.fields .comparison-value{flex-grow:100;min-width:150px;display:flex;align-items:center;margin-left:.5em;margin-right:.5em}.fields .comparison-value .error{color:#ff5252;margin:0 5px}.fields .comparison-value input{background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;min-width:150px;flex-grow:100;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.fields .comparison-value input[type=text]{padding-right:30px}.fields .comparison-value .invalid{border:1px solid #ff5252}.fields .comparison-value .expand{position:relative;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.fields .comparison-value .expand mat-icon{transform:rotate(45deg)}.value{margin-left:auto;flex-wrap:nowrap}.value .serve{margin:0 2px 0 5px}.value .serve .chip{font-size:12px;background-color:#67b1fc3d}.value .served-value{margin:3px 0}.flex{display:flex;flex-wrap:wrap;align-items:center}@media (max-width: 1200px){.targeting-row{flex-wrap:wrap}.targeting-row .fields{max-width:500px}}@media (max-width: 920px){.value .served-value{margin:3px 7px 3px 0}.targeting-row .fields .drag-handle{left:-18px}}@media (max-width: 410px){.value .served-value{margin:7px 7px 3px 4px}}@media (max-width: 510px){.fields .comparison-value .error{display:none}}@media (max-width: 650px){.targeting-row{flex-direction:column}.targeting-row .help{left:161px}.targeting-row .fields{flex-direction:column;align-items:stretch}.targeting-row .fields .custom-select{margin:7px 7px 0}.targeting-row .fields .comparison-value{margin:7px}.targeting-row .fields .comparison-value input{margin:0 4px 0 0}.targeting-row .fields .attribute-span{margin:7px 7px 0}.targeting-row .fields .if{font-size:12px}.targeting-row .fields .if .spacing{margin-right:3px}}\n"] }]
+            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\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 0\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\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\"\n                        (change)=\"attributeChanged($event.target, getRolloutRuleComparisonAttributeFormControl(rolloutRule))\"\n                        [disabled]=\"readOnly\">\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\" matTooltip=\"Custom user attribute\" matTooltipPosition=\"above\"\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                            (change)=\"comparatorChanged(rolloutRule)\">\n                            <optgroup label=\"CONFIDENTIAL 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                            <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\">\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                            matTooltip=\"Comparison value\" matTooltipPosition=\"above\" inputDisplayNormalizer>\n                        <div class=\"expand\" matTooltip=\"Pop-out Editor\" matTooltipPosition=\"above\"\n                            (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\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n                <div class=\"fields flex\" *ngIf=\"getRolloutRuleTypeFormControl(rolloutRule).value === 1\">\n                    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\"\n                        *ngIf=\"!readOnly\">\n                        <mat-icon>drag_indicator</mat-icon>\n                    </div>\n                    <div class=\"if\">\n                        <mat-chip-set [class.spacing]=\"i === 0\">\n                            <mat-chip class=\"chip\">{{ i === 0 ? 'IF' : 'ELSE IF' }}</mat-chip>\n                        </mat-chip-set>\n                        <a href=\"https://configcat.com/docs/advanced/user-object\" target=\"_blank\"\n                            rel=\"noopener noreferrer\">user</a>\n                    </div>\n\n\n                    <div class=\"select-wrapper\">\n                        <select class=\"custom-select segment-comparator\"\n                            [formControl]=\"getRolloutRuleSegmentComparatorFormControl(rolloutRule)\"\n                            matTooltip=\"Segment comparator\" matTooltipPosition=\"above\">\n                            <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                                {{comparator.label}}\n                            </option>\n                        </select>\n                    </div>\n\n                    <div class=\"select-wrapper\">\n                        <span class=\"attribute-error\"\n                            *ngIf=\"getRolloutRuleSegmentIdFormControl(rolloutRule).invalid\">*</span>\n                        <select class=\"custom-select segment-select\"\n                            [formControl]=\"getRolloutRuleSegmentIdFormControl(rolloutRule)\" matTooltip=\"Segment\"\n                            matTooltipPosition=\"above\"\n                            [ngClass]=\"{'invalid': getRolloutRuleSegmentIdFormControl(rolloutRule).invalid}\">\n                            <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\">\n                                {{segment.name}}\n                            </option>\n                        </select>\n                    </div>\n\n\n                    <div class=\"delete\" matTooltip=\"Remove targeting rule\" *ngIf=\"!readOnly\" (click)=\"removeRule(i)\">\n                        <mat-icon>cancel</mat-icon>\n                    </div>\n                </div>\n\n\n                <div class=\"value flex\">\n                    <div class=\"serve\" *ngIf=\"setting().settingType !== SettingType.Boolean\">\n                        <mat-chip-set>\n                            <mat-chip class=\"chip\">Serve:</mat-chip>\n                        </mat-chip-set>\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;background-color:#fff;margin:1em;display:flex;position:relative;padding:.5em 0}.targeting-row:hover{background-color:#dbedff}.targeting-row .select-wrapper{position:relative}.targeting-row .info{position:absolute;cursor:pointer;top:-8px;left:166px;border-radius:50%;background-color:#fff;height:18px;width:18px}.targeting-row .info a{color:#0068f0;opacity:.5}.targeting-row .info a:hover{opacity:1}.targeting-row .info mat-icon{font-size:18px;height:18px;width:18px}.targeting-row .warn{position:absolute;cursor:pointer;top:-8px;left:166px;height:18px;width:18px;border-radius:50%;background-color:#fff}.targeting-row .warn a{color:#fdc67f}.targeting-row .warn a:hover{color:#ff9200}.targeting-row .warn mat-icon{font-size:18px;height:18px;width:18px}.custom-select{margin-left:.5em;width:170px;background-color:#fff;border:1px solid #e5e5e5;height:30px;min-height:30px;line-height:30px;min-width:170px;font-size:.8em;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.custom-select:focus{outline-color:#e5e5e5;outline-offset:-1px}.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:41px}.fields .if .user-link{width:40px}.fields .if .chip{font-size:12px;background-color:#67b1fc3d}.fields .attribute-span{margin-left:.5em;display:flex;align-items:center}.fields .attribute-span[hidden]{display:none}.fields .attribute{width:170px;background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;flex-grow:100;min-width:170px;padding:0 30px 0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300;font-size:13.3px}.fields .invalid{border:1px solid #ff5252}.fields .attribute-error{color:#ff5252;margin:0 5px}.fields .delete{position:absolute;cursor:pointer;top:-9px;right:-10px;z-index:999;border-radius:50%;background-color:#fff;height:20px;width:20px;color:#ed5251}.fields .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.fields .delete:hover mat-icon{opacity:1}.fields .drag-handle{position:absolute;cursor:-moz-grab;left:-20px;top:14px}.fields .drag-handle mat-icon{font-size:20px}.fields .attribute-select{min-width:100px;width:100px;margin-left:0}.fields .segment-comparator,.fields .segment-select{margin-left:0;margin-right:.5em}.fields .segment-more mat-icon{position:relative;top:3px;cursor:pointer;font-size:16px;height:16px;width:16px;color:#797979;margin-top:3px}.fields .comparison-value{flex-grow:100;min-width:150px;display:flex;align-items:center;margin-left:.5em;margin-right:.5em}.fields .comparison-value .error{color:#ff5252;margin:0 5px}.fields .comparison-value input{background-color:#fff;border:1px solid #e5e5e5;margin:3px 0;min-height:28px;min-width:150px;flex-grow:100;padding:0 5px;font-family:Montserrat,Roboto,Helvetica Neue,sans-serif;font-weight:300}.fields .comparison-value input[type=text]{padding-right:30px}.fields .comparison-value input:focus{outline-color:#e5e5e5;outline-offset:-1px}.fields .comparison-value .invalid{border:1px solid #ff5252}.fields .comparison-value .expand{position:relative;height:24px;cursor:pointer;margin-left:-28px;z-index:1;color:#b3b3b3;background-color:#fff}.fields .comparison-value .expand mat-icon{transform:rotate(45deg)}.value{margin-left:auto;flex-wrap:nowrap}.value .serve{margin:0 2px 0 5px}.value .serve .chip{font-size:12px;background-color:#67b1fc3d}.value .served-value{margin:3px 0}.flex{display:flex;flex-wrap:wrap;align-items:center}@media (max-width: 1200px){.targeting-row{flex-wrap:wrap}.targeting-row .fields{max-width:500px}}@media (max-width: 920px){.value .served-value{margin:3px 7px 3px 0}.targeting-row .fields .drag-handle{left:-18px}}@media (max-width: 410px){.value .served-value{margin:7px 7px 3px 4px}}@media (max-width: 510px){.fields .comparison-value .error{display:none}}@media (max-width: 650px){.targeting-row{flex-direction:column}.targeting-row .help{left:161px}.targeting-row .fields{flex-direction:column;align-items:stretch}.targeting-row .fields .custom-select{margin:7px 7px 0}.targeting-row .fields .comparison-value{margin:7px}.targeting-row .fields .comparison-value input{margin:0 4px 0 0}.targeting-row .fields .attribute-span{margin:7px 7px 0}.targeting-row .fields .if{font-size:12px}.targeting-row .fields .if .spacing{margin-right:3px}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: SettingListFormHelper }]; }, propDecorators: { formGroup: [{
                 type: Input
             }], readOnly: [{
@@ -1040,10 +1042,10 @@ class SettingComponent {
     }
 }
 SettingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: SettingComponent, deps: [{ token: SettingListFormHelper }], target: i0.ɵɵFactoryTarget.Component });
-SettingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: SettingComponent, selector: "setting", inputs: { dashboardBasePath: "dashboardBasePath", productId: "productId", environmentId: "environmentId", configId: "configId", formGroup: "formGroup", readOnly: "readOnly", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName", segments: "segments" }, outputs: { deleteSettingRequested: "deleteSettingRequested" }, ngImport: i0, template: "<div class=\"setting-full\" [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>\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 class=\"open\"><a [href]=\"getDashboardUrl()\" target=\"_blank\" rel=\"noopener noreferrer\">Open in ConfigCat</a>\n      </div>\n    </div>\n\n    <div class=\"rules-list\">\n      <div>\n        <configcat-rollout-rules *ngIf=\"rolloutRules().controls.length !== 0\" [formGroup]=\"formGroup\"\n          [segments]=\"segments\">\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          matTooltip=\"This value will be served to all users who the above rules don't apply.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all other users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length !== 0\"\n          matTooltip=\"This fallback value will be served in case the user can't be identified.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To unidentified users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length === 0\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all users, serve:</mat-chip>\n          </mat-chip-set>\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)=\"addSegmentRolloutRule()\" *ngIf=\"!readOnly\">\n          {{rolloutRules().length === 0 ? 'Target segment' : 'Target new segment'}}\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>", styles: [".setting-full{position:relative;display:flex;flex-wrap:nowrap;flex-direction:column}.setting-full .delete{position:absolute;right:-10px;top:-10px;color:#ed5251;background-color:#fff;border-radius:50%;height:20px;width:20px;cursor:pointer}.setting-full .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.setting-full .delete:hover mat-icon{opacity:1}.setting-full .setting-header{padding:1.5em .8em 0 1em}.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:700;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 .5em .5em}.setting-full .setting-content .setting-details>*{margin:.5em}.setting-full .setting-content .setting-details .open{font-size:14px}.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 .3em .3em 1em}.setting-full .setting-content .targeting-button{margin-left:.5rem;margin-right:.5rem;margin-bottom:1.5em;text-transform:uppercase}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{font-size:12px;background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;margin-top:3px;margin-bottom:3px}.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;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!important}}@media (max-width: 920px){.setting-full .setting-content{flex-wrap:wrap}.setting-full .setting-content .rules-list{padding:0}.setting-full .setting-content .targeting-button{margin-bottom:.5em;margin-top:.5em;padding:.6em 0}.colorbar{min-width:5px}.buttons{flex-direction:column;margin-bottom:.5em;margin-left:.4em;margin-right:.4em}.created-date,.updated-date{display:none}.setting-details{width:100%!important;padding:.2em 0 .2em .2em}.setting-details .description{max-width:none!important}.rollout-rules{margin-bottom:1em}.all-other{margin:1em;padding:7px 0 7px .5em}.all-other .served-value{margin:7px 7px 4px auto}}@media (max-width: 380px){.mat-mdc-standard-chip{min-height:auto!important;height:auto!important}.mat-chip-list-wrapper{padding-right:7px}.sige-button{font-size:.65rem}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "component", type: RolloutPercentageItemsComponent, selector: "configcat-rollout-percentage-items", inputs: ["formGroup", "readOnly"] }, { kind: "component", type: RolloutRulesComponent, selector: "configcat-rollout-rules", inputs: ["formGroup", "readOnly", "segments"] }, { kind: "component", type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }] });
+SettingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: SettingComponent, selector: "setting", inputs: { dashboardBasePath: "dashboardBasePath", productId: "productId", environmentId: "environmentId", configId: "configId", formGroup: "formGroup", readOnly: "readOnly", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName", segments: "segments" }, outputs: { deleteSettingRequested: "deleteSettingRequested" }, ngImport: i0, template: "<div class=\"setting-full\" [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\">\n    <div class=\"setting-name\">\n      <div class=\"name\" data-robot=\"settingName\">\n        {{setting().name}}\n        <span *ngIf=\"showEnvironmentName\"> ({{environment().name}})</span>\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 class=\"open\"><a [href]=\"getDashboardUrl()\" target=\"_blank\" rel=\"noopener noreferrer\">Open in ConfigCat</a>\n      </div>\n    </div>\n\n    <div class=\"rules-list\">\n      <div>\n        <configcat-rollout-rules *ngIf=\"rolloutRules().controls.length !== 0\" [formGroup]=\"formGroup\"\n          [segments]=\"segments\" [readOnly]=\"readOnly\">\n        </configcat-rollout-rules>\n      </div>\n\n      <configcat-rollout-percentage-items *ngIf=\"rolloutPercentageItems().controls.length !== 0\" [formGroup]=\"formGroup\"\n        [readOnly]=\"readOnly\">\n      </configcat-rollout-percentage-items>\n\n      <div class=\"all-other flex\">\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length !== 0\"\n          matTooltip=\"This value will be served to all users who the above rules don't apply.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all other users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length !== 0\"\n          matTooltip=\"This fallback value will be served in case the user can't be identified.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To unidentified users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length === 0\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all users, serve:</mat-chip>\n          </mat-chip-set>\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)=\"addSegmentRolloutRule()\" *ngIf=\"!readOnly\">\n          {{rolloutRules().length === 0 ? 'Target segment' : 'Target new segment'}}\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>", styles: [".setting-full{position:relative;display:flex;flex-wrap:nowrap;flex-direction:column}.setting-full .delete{position:absolute;right:-10px;top:-10px;color:#ed5251;background-color:#fff;border-radius:50%;height:20px;width:20px;cursor:pointer}.setting-full .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.setting-full .delete:hover mat-icon{opacity:1}.setting-full .setting-header{padding:1.5em .8em 0 1em}.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:700;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 .5em .5em}.setting-full .setting-content .setting-details>*{margin:.5em}.setting-full .setting-content .setting-details .open{font-size:14px}.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 .3em .3em 1em}.setting-full .setting-content .targeting-button{margin-left:.5rem;margin-right:.5rem;margin-bottom:1.5em;text-transform:uppercase}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{font-size:12px;background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;margin-top:3px;margin-bottom:3px}.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;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!important}}@media (max-width: 920px){.setting-full .setting-content{flex-wrap:wrap}.setting-full .setting-content .rules-list{padding:0}.setting-full .setting-content .targeting-button{margin-bottom:.5em;margin-top:.5em;padding:.6em 0}.colorbar{min-width:5px}.buttons{flex-direction:column;margin-bottom:.5em;margin-left:.4em;margin-right:.4em}.created-date,.updated-date{display:none}.setting-details{width:100%!important;padding:.2em 0 .2em .2em}.setting-details .description{max-width:none!important}.rollout-rules{margin-bottom:1em}.all-other{margin:1em;padding:7px 0 7px .5em}.all-other .served-value{margin:7px 7px 4px auto}}@media (max-width: 380px){.mat-mdc-standard-chip{min-height:auto!important;height:auto!important}.mat-chip-list-wrapper{padding-right:7px}.sige-button{font-size:.65rem}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "component", type: RolloutPercentageItemsComponent, selector: "configcat-rollout-percentage-items", inputs: ["formGroup", "readOnly"] }, { kind: "component", type: RolloutRulesComponent, selector: "configcat-rollout-rules", inputs: ["formGroup", "readOnly", "segments"] }, { kind: "component", type: ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: SettingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'setting', template: "<div class=\"setting-full\" [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>\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 class=\"open\"><a [href]=\"getDashboardUrl()\" target=\"_blank\" rel=\"noopener noreferrer\">Open in ConfigCat</a>\n      </div>\n    </div>\n\n    <div class=\"rules-list\">\n      <div>\n        <configcat-rollout-rules *ngIf=\"rolloutRules().controls.length !== 0\" [formGroup]=\"formGroup\"\n          [segments]=\"segments\">\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          matTooltip=\"This value will be served to all users who the above rules don't apply.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all other users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length !== 0\"\n          matTooltip=\"This fallback value will be served in case the user can't be identified.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To unidentified users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length === 0\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all users, serve:</mat-chip>\n          </mat-chip-set>\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)=\"addSegmentRolloutRule()\" *ngIf=\"!readOnly\">\n          {{rolloutRules().length === 0 ? 'Target segment' : 'Target new segment'}}\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>", styles: [".setting-full{position:relative;display:flex;flex-wrap:nowrap;flex-direction:column}.setting-full .delete{position:absolute;right:-10px;top:-10px;color:#ed5251;background-color:#fff;border-radius:50%;height:20px;width:20px;cursor:pointer}.setting-full .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.setting-full .delete:hover mat-icon{opacity:1}.setting-full .setting-header{padding:1.5em .8em 0 1em}.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:700;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 .5em .5em}.setting-full .setting-content .setting-details>*{margin:.5em}.setting-full .setting-content .setting-details .open{font-size:14px}.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 .3em .3em 1em}.setting-full .setting-content .targeting-button{margin-left:.5rem;margin-right:.5rem;margin-bottom:1.5em;text-transform:uppercase}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{font-size:12px;background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;margin-top:3px;margin-bottom:3px}.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;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!important}}@media (max-width: 920px){.setting-full .setting-content{flex-wrap:wrap}.setting-full .setting-content .rules-list{padding:0}.setting-full .setting-content .targeting-button{margin-bottom:.5em;margin-top:.5em;padding:.6em 0}.colorbar{min-width:5px}.buttons{flex-direction:column;margin-bottom:.5em;margin-left:.4em;margin-right:.4em}.created-date,.updated-date{display:none}.setting-details{width:100%!important;padding:.2em 0 .2em .2em}.setting-details .description{max-width:none!important}.rollout-rules{margin-bottom:1em}.all-other{margin:1em;padding:7px 0 7px .5em}.all-other .served-value{margin:7px 7px 4px auto}}@media (max-width: 380px){.mat-mdc-standard-chip{min-height:auto!important;height:auto!important}.mat-chip-list-wrapper{padding-right:7px}.sige-button{font-size:.65rem}}\n"] }]
+            args: [{ selector: 'setting', template: "<div class=\"setting-full\" [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\">\n    <div class=\"setting-name\">\n      <div class=\"name\" data-robot=\"settingName\">\n        {{setting().name}}\n        <span *ngIf=\"showEnvironmentName\"> ({{environment().name}})</span>\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 class=\"open\"><a [href]=\"getDashboardUrl()\" target=\"_blank\" rel=\"noopener noreferrer\">Open in ConfigCat</a>\n      </div>\n    </div>\n\n    <div class=\"rules-list\">\n      <div>\n        <configcat-rollout-rules *ngIf=\"rolloutRules().controls.length !== 0\" [formGroup]=\"formGroup\"\n          [segments]=\"segments\" [readOnly]=\"readOnly\">\n        </configcat-rollout-rules>\n      </div>\n\n      <configcat-rollout-percentage-items *ngIf=\"rolloutPercentageItems().controls.length !== 0\" [formGroup]=\"formGroup\"\n        [readOnly]=\"readOnly\">\n      </configcat-rollout-percentage-items>\n\n      <div class=\"all-other flex\">\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length !== 0\"\n          matTooltip=\"This value will be served to all users who the above rules don't apply.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all other users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length !== 0\"\n          matTooltip=\"This fallback value will be served in case the user can't be identified.\"\n          matTooltipPosition=\"above\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To unidentified users, serve:</mat-chip>\n          </mat-chip-set>\n        </div>\n        <div *ngIf=\"rolloutPercentageItems().length === 0 && rolloutRules().length === 0\">\n          <mat-chip-set>\n            <mat-chip class=\"chip\">To all users, serve:</mat-chip>\n          </mat-chip-set>\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)=\"addSegmentRolloutRule()\" *ngIf=\"!readOnly\">\n          {{rolloutRules().length === 0 ? 'Target segment' : 'Target new segment'}}\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>", styles: [".setting-full{position:relative;display:flex;flex-wrap:nowrap;flex-direction:column}.setting-full .delete{position:absolute;right:-10px;top:-10px;color:#ed5251;background-color:#fff;border-radius:50%;height:20px;width:20px;cursor:pointer}.setting-full .delete mat-icon{font-size:20px;height:20px;width:20px;opacity:.5}.setting-full .delete:hover mat-icon{opacity:1}.setting-full .setting-header{padding:1.5em .8em 0 1em}.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:700;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 .5em .5em}.setting-full .setting-content .setting-details>*{margin:.5em}.setting-full .setting-content .setting-details .open{font-size:14px}.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 .3em .3em 1em}.setting-full .setting-content .targeting-button{margin-left:.5rem;margin-right:.5rem;margin-bottom:1.5em;text-transform:uppercase}.all-other{min-height:40px;justify-content:flex-start;border:1px solid #d5d5d5;background-color:#fff;margin:.5em 1em;padding:4px 0 4px .5em}.all-other .chip{font-size:12px;background-color:#67b1fc3d}.all-other .served-value{margin-left:auto;margin-top:3px;margin-bottom:3px}.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;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!important}}@media (max-width: 920px){.setting-full .setting-content{flex-wrap:wrap}.setting-full .setting-content .rules-list{padding:0}.setting-full .setting-content .targeting-button{margin-bottom:.5em;margin-top:.5em;padding:.6em 0}.colorbar{min-width:5px}.buttons{flex-direction:column;margin-bottom:.5em;margin-left:.4em;margin-right:.4em}.created-date,.updated-date{display:none}.setting-details{width:100%!important;padding:.2em 0 .2em .2em}.setting-details .description{max-width:none!important}.rollout-rules{margin-bottom:1em}.all-other{margin:1em;padding:7px 0 7px .5em}.all-other .served-value{margin:7px 7px 4px auto}}@media (max-width: 380px){.mat-mdc-standard-chip{min-height:auto!important;height:auto!important}.mat-chip-list-wrapper{padding-right:7px}.sige-button{font-size:.65rem}}\n"] }]
         }], ctorParameters: function () { return [{ type: SettingListFormHelper }]; }, propDecorators: { dashboardBasePath: [{
                 type: Input
             }], productId: [{
@@ -1358,7 +1360,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                 type: Output
             }] } });
 
-class SettingSelectComponent extends BaseComponent {
+class BaseSelectComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.customDropdown = false;
+        this.dropdownOpened = new EventEmitter();
+    }
+    openChanged(event) {
+        this.dropdownOpened.emit(event);
+    }
+}
+BaseSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: BaseSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BaseSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: BaseSelectComponent, selector: "base-select", inputs: { customDropdown: "customDropdown" }, outputs: { dropdownOpened: "dropdownOpened" }, usesInheritance: true, ngImport: i0, template: '<div></div>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: BaseSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'base-select',
+                    template: '<div></div>'
+                }]
+        }], propDecorators: { customDropdown: [{
+                type: Input
+            }], dropdownOpened: [{
+                type: Output
+            }] } });
+
+class SettingSelectComponent extends BaseSelectComponent {
     constructor(publicApiService) {
         super(publicApiService);
         this.settings = [];
@@ -1377,22 +1403,25 @@ class SettingSelectComponent extends BaseComponent {
                 if (this.settings.length > 0) {
                     this.valueFormControl.setValue(this.settings[0].settingId);
                 }
+                else {
+                    this.valueFormControl.setValue("");
+                }
             });
         }
     }
 }
 SettingSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: SettingSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component });
-SettingSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: SettingSelectComponent, selector: "configcat-setting-select", inputs: { valueFormControl: "valueFormControl", configId: "configId" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"settings\">\n    <mat-label>Feature flag or setting</mat-label>\n    <mat-select placeholder=\"Feature flag or setting\" [formControl]=\"valueFormControl\" 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"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
+SettingSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: SettingSelectComponent, selector: "configcat-setting-select", inputs: { valueFormControl: "valueFormControl", configId: "configId" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"settings\">\n    <mat-label>Feature flag or setting</mat-label>\n    <mat-select placeholder=\"Feature flag or setting\" [formControl]=\"valueFormControl\" name=\"value\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let setting of settings\" [value]=\"setting.settingId\" matTooltip=\"{{setting.name}}\"\n            [matTooltipShowDelay]=\"1000\">{{setting.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: SettingSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'configcat-setting-select', template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"settings\">\n    <mat-label>Feature flag or setting</mat-label>\n    <mat-select placeholder=\"Feature flag or setting\" [formControl]=\"valueFormControl\" 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"] }]
+            args: [{ selector: 'configcat-setting-select', template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"settings\">\n    <mat-label>Feature flag or setting</mat-label>\n    <mat-select placeholder=\"Feature flag or setting\" [formControl]=\"valueFormControl\" name=\"value\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let setting of settings\" [value]=\"setting.settingId\" matTooltip=\"{{setting.name}}\"\n            [matTooltipShowDelay]=\"1000\">{{setting.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: PublicApiService }]; }, propDecorators: { valueFormControl: [{
                 type: Input
             }], configId: [{
                 type: Input
             }] } });
 
-class ProductSelectComponent extends BaseComponent {
+class ProductSelectComponent extends BaseSelectComponent {
     constructor(publicApiService) {
         super(publicApiService);
         this.products = [];
@@ -1407,19 +1436,22 @@ class ProductSelectComponent extends BaseComponent {
                     emitModelToViewChange: true, emitViewToModelChange: true
                 });
             }
+            else {
+                this.valueFormControl.setValue("");
+            }
         });
     }
 }
 ProductSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ProductSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component });
-ProductSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ProductSelectComponent, selector: "configcat-product-select", inputs: { valueFormControl: "valueFormControl" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Product</mat-label>\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"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
+ProductSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ProductSelectComponent, selector: "configcat-product-select", inputs: { valueFormControl: "valueFormControl" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Product</mat-label>\n    <mat-select placeholder=\"Product\" [formControl]=\"valueFormControl\" name=\"productValue\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let product of products\" [value]=\"product.productId\" matTooltip=\"{{product.name}}\"\n            [matTooltipShowDelay]=\"1000\">{{product.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ProductSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'configcat-product-select', template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Product</mat-label>\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"] }]
+            args: [{ selector: 'configcat-product-select', template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n    <mat-label>Product</mat-label>\n    <mat-select placeholder=\"Product\" [formControl]=\"valueFormControl\" name=\"productValue\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let product of products\" [value]=\"product.productId\" matTooltip=\"{{product.name}}\"\n            [matTooltipShowDelay]=\"1000\">{{product.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: PublicApiService }]; }, propDecorators: { valueFormControl: [{
                 type: Input
             }] } });
 
-class ConfigSelectComponent extends BaseComponent {
+class ConfigSelectComponent extends BaseSelectComponent {
     constructor(publicApiService) {
         super(publicApiService);
         this.configs = [];
@@ -1438,6 +1470,9 @@ class ConfigSelectComponent extends BaseComponent {
                 if (this.configs.length > 0) {
                     this.valueFormControl.setValue(this.configs[0].configId);
                 }
+                else {
+                    this.valueFormControl.setValue("");
+                }
             });
         }
     }
@@ -1449,7 +1484,7 @@ ConfigSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: forwardRef(() => ConfigSelectComponent),
             multi: true
         }
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"configs\">\n    <mat-label>Config</mat-label>\n    <mat-select placeholder=\"Config\" [formControl]=\"valueFormControl\" name=\"value\" disableOptionCentering>\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"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"configs\">\n    <mat-label>Config</mat-label>\n    <mat-select placeholder=\"Config\" [formControl]=\"valueFormControl\" name=\"value\" disableOptionCentering\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let config of configs\" [value]=\"config.configId\" matTooltip=\"{{config.name}}\"\n            [matTooltipShowDelay]=\"1000\">{{config.name}}</mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ConfigSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configcat-config-select', providers: [
@@ -1458,14 +1493,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                             useExisting: forwardRef(() => ConfigSelectComponent),
                             multi: true
                         }
-                    ], template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"configs\">\n    <mat-label>Config</mat-label>\n    <mat-select placeholder=\"Config\" [formControl]=\"valueFormControl\" name=\"value\" disableOptionCentering>\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"] }]
+                    ], template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"configs\">\n    <mat-label>Config</mat-label>\n    <mat-select placeholder=\"Config\" [formControl]=\"valueFormControl\" name=\"value\" disableOptionCentering\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let config of configs\" [value]=\"config.configId\" matTooltip=\"{{config.name}}\"\n            [matTooltipShowDelay]=\"1000\">{{config.name}}</mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: PublicApiService }]; }, propDecorators: { valueFormControl: [{
                 type: Input
             }], productId: [{
                 type: Input
             }] } });
 
-class EnvironmentSelectComponent extends BaseComponent {
+class EnvironmentSelectComponent extends BaseSelectComponent {
     constructor(publicApiService) {
         super(publicApiService);
         this.environments = [];
@@ -1484,15 +1519,18 @@ class EnvironmentSelectComponent extends BaseComponent {
                 if (this.environments.length > 0) {
                     this.valueFormControl.setValue(this.environments[0].environmentId);
                 }
+                else {
+                    this.valueFormControl.setValue("");
+                }
             });
         }
     }
 }
 EnvironmentSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EnvironmentSelectComponent, deps: [{ token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component });
-EnvironmentSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: EnvironmentSelectComponent, selector: "configcat-environment-select", inputs: { valueFormControl: "valueFormControl", productId: "productId" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"environments\">\n    <mat-label>Environment</mat-label>\n    <mat-select placeholder=\"Environment\" [formControl]=\"valueFormControl\" 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"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
+EnvironmentSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: EnvironmentSelectComponent, selector: "configcat-environment-select", inputs: { valueFormControl: "valueFormControl", productId: "productId" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"environments\">\n    <mat-label>Environment</mat-label>\n    <mat-select placeholder=\"Environment\" [formControl]=\"valueFormControl\" name=\"value\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let environment of environments\" [value]=\"environment.environmentId\"\n            matTooltip=\"{{environment.name}}\" [matTooltipShowDelay]=\"1000\">{{environment.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EnvironmentSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'configcat-environment-select', template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"environments\">\n    <mat-label>Environment</mat-label>\n    <mat-select placeholder=\"Environment\" [formControl]=\"valueFormControl\" 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"] }]
+            args: [{ selector: 'configcat-environment-select', template: "<mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"environments\">\n    <mat-label>Environment</mat-label>\n    <mat-select placeholder=\"Environment\" [formControl]=\"valueFormControl\" name=\"value\"\n        (openedChange)=\"openChanged($event)\" [panelClass]=\"customDropdown ? 'custom-dropdown-below' : ''\">\n        <mat-option *ngFor=\"let environment of environments\" [value]=\"environment.environmentId\"\n            matTooltip=\"{{environment.name}}\" [matTooltipShowDelay]=\"1000\">{{environment.name}}\n        </mat-option>\n    </mat-select>\n</mat-form-field>", styles: [".form-field{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: PublicApiService }]; }, propDecorators: { valueFormControl: [{
                 type: Input
             }], productId: [{
@@ -1580,6 +1618,7 @@ class NgConfigCatPublicApiUIModule {
 }
 NgConfigCatPublicApiUIModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgConfigCatPublicApiUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 NgConfigCatPublicApiUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: NgConfigCatPublicApiUIModule, declarations: [BaseComponent,
+        BaseSelectComponent,
         ProductSelectComponent,
         ConfigSelectComponent,
         EnvironmentSelectComponent,
@@ -1621,7 +1660,12 @@ NgConfigCatPublicApiUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.
         SettingItemComponent,
         InputDisplayNormalizerDirective,
         DeleteSettingDialogComponent] });
-NgConfigCatPublicApiUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgConfigCatPublicApiUIModule, imports: [CommonModule,
+NgConfigCatPublicApiUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgConfigCatPublicApiUIModule, providers: [
+        {
+            provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
+            useValue: { disableTooltipInteractivity: true },
+        },
+    ], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         BrowserAnimationsModule,
@@ -1645,6 +1689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
             args: [{
                     declarations: [
                         BaseComponent,
+                        BaseSelectComponent,
                         ProductSelectComponent,
                         ConfigSelectComponent,
                         EnvironmentSelectComponent,
@@ -1692,6 +1737,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                         SettingItemComponent,
                         InputDisplayNormalizerDirective,
                         DeleteSettingDialogComponent
+                    ],
+                    providers: [
+                        {
+                            provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
+                            useValue: { disableTooltipInteractivity: true },
+                        },
                     ]
                 }]
         }], ctorParameters: function () { return []; } });