ng-configcat-publicapi-ui 4.0.0 → 4.0.2

package/esm2022/lib/setting-list/setting/rollout-percentage-items/rollout-percentage-items.component.mjs

@@ -67,15 +67,15 @@ export class RolloutPercentageItemsComponent {
     getPercentageFormControl(rolloutPercentageItem) {
         return rolloutPercentageItem.controls.percentage;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: RolloutPercentageItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", 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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i6.ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RolloutPercentageItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", 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)\" digitOnly>%\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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i6.ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: RolloutPercentageItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", 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}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"] }]
+            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)\" digitOnly>%\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: () => [], propDecorators: { formGroup: [{
                 type: Input
             }], readOnly: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm9sbG91dC1wZXJjZW50YWdlLWl0ZW1zLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbmZpZ2NhdC1wdWJsaWNhcGktdWkvc3JjL2xpYi9zZXR0aW5nLWxpc3Qvc2V0dGluZy9yb2xsb3V0LXBlcmNlbnRhZ2UtaXRlbXMvcm9sbG91dC1wZXJjZW50YWdlLWl0ZW1zLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbmZpZ2NhdC1wdWJsaWNhcGktdWkvc3JjL2xpYi9zZXR0aW5nLWxpc3Qvc2V0dGluZy9yb2xsb3V0LXBlcmNlbnRhZ2UtaXRlbXMvcm9sbG91dC1wZXJjZW50YWdlLWl0ZW1zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRWpELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7Ozs7Ozs7QUFPckQsTUFBTSxPQUFPLCtCQUErQjtJQU8xQyxPQUFPO1FBQ0wsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsRUFBRSxLQUFLLENBQUM7SUFDOUMsQ0FBQztJQUVELFlBQVk7UUFDVixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLGNBQWMsQ0FBcUIsQ0FBQztJQUNoRSxDQUFDO0lBRUQsc0JBQXNCO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsd0JBQXdCLENBQXFCLENBQUM7SUFDMUUsQ0FBQztJQUVELHlCQUF5QjtRQUN2QixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLDJCQUEyQixDQUF1QixDQUFDO0lBQy9FLENBQUM7SUFFRCxLQUFLLENBQUMscUJBQXVDO1FBQzNDLE9BQU8sSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLFdBQVcsS0FBSyxXQUFXLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDekQscUJBQXFCLENBQUMsR0FBRyxDQUFDLGVBQWUsQ0FBdUIsQ0FBQyxDQUFDO1lBQ2xFLHFCQUFxQixDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQXVCLENBQUM7SUFDN0QsQ0FBQztJQUVEO1FBMUJTLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDMUIsZ0JBQVcsR0FBRyxXQUFXLENBQUM7SUF5QlYsQ0FBQztJQUVqQixpQkFBaUIsQ0FBQyxLQUFhO1FBQzdCLElBQUksSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLEtBQUssQ0FBQyxVQUFVLEdBQUcsQ0FBQyxFQUFFLENBQUM7WUFDdEUsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBc0IsQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN0RyxDQUFDO1FBQ0QsSUFBSSxJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUMsS0FBSyxDQUFDLFVBQVUsR0FBRyxHQUFHLEVBQUUsQ0FBQztZQUN4RSxJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFzQixDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ3hHLENBQUM7UUFFRCxJQUFJLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDdkQsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUMsUUFBUSxDQUFDLENBQUMsR0FBRyxLQUFLLENBQXNCLENBQUMsUUFBUSxDQUFDLFVBQVU7aUJBQ3hGLFFBQVEsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUNwRixDQUFDO1FBRUQsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFRCxTQUFTO1FBQ1AsSUFBSSxJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQyxRQUFRLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ3hELElBQUksQ0FBQyx5QkFBeUIsRUFBRSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNqRCxDQUFDO2FBQU0sQ0FBQztZQUNOLElBQUksQ0FBQyx5QkFBeUIsRUFBRSxDQUFDLFFBQVEsQ0FDdkMsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsVUFBVSxDQUFDO2lCQUNoRSxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQzNCLENBQUM7UUFDSixDQUFDO0lBQ0gsQ0FBQztJQUVELDJCQUEyQixDQUFDLEtBQWE7UUFDdkMsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzlDLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQzVDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRUQsU0FBUztRQUNQLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ3RDLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQzVDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRUQsa0NBQWtDO1FBQ2hDLE9BQU8sSUFBSSxDQUFDLHNCQUFzQixFQUFFLEVBQUUsUUFBUSxFQUFFLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQXFCLENBQUMsQ0FBQztJQUNsRixDQUFDO0lBRUQsd0JBQXdCLENBQUMscUJBQTBCO1FBQ2pELE9BQU8scUJBQXFCLENBQUMsUUFBUSxDQUFDLFVBQWdDLENBQUM7SUFDekUsQ0FBQzs4R0E1RVUsK0JBQStCO2tHQUEvQiwrQkFBK0Isb0lDVDVDLHdpRUEwQ007OzJGRGpDTywrQkFBK0I7a0JBTDNDLFNBQVM7K0JBQ0Usb0NBQW9DO3dEQU1yQyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBVbnR5cGVkRm9ybUdyb3VwLCBVbnR5cGVkRm9ybUFycmF5LCBVbnR5cGVkRm9ybUNvbnRyb2wgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBTZXR0aW5nVHlwZSB9IGZyb20gJ25nLWNvbmZpZ2NhdC1wdWJsaWNhcGknO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb25maWdjYXQtcm9sbG91dC1wZXJjZW50YWdlLWl0ZW1zJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3JvbGxvdXQtcGVyY2VudGFnZS1pdGVtcy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3JvbGxvdXQtcGVyY2VudGFnZS1pdGVtcy5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFJvbGxvdXRQZXJjZW50YWdlSXRlbXNDb21wb25lbnQge1xuXG4gIEBJbnB1dCgpIGZvcm1Hcm91cCE6IFVudHlwZWRGb3JtR3JvdXA7XG4gIEBJbnB1dCgpIHJlYWRPbmx5ID0gZmFsc2U7XG4gIFNldHRpbmdUeXBlID0gU2V0dGluZ1R5cGU7XG5cblxuICBzZXR0aW5nKCkge1xuICAgIHJldHVybiB0aGlzLmZvcm1Hcm91cC5nZXQoJ3NldHRpbmcnKT8udmFsdWU7XG4gIH1cblxuICByb2xsb3V0UnVsZXMoKSB7XG4gICAgcmV0dXJuIHRoaXMuZm9ybUdyb3VwLmdldCgncm9sbG91dFJ1bGVzJykgYXMgVW50eXBlZEZvcm1BcnJheTtcbiAgfVxuXG4gIHJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKSB7XG4gICAgcmV0dXJuIHRoaXMuZm9ybUdyb3VwLmdldCgncm9sbG91dFBlcmNlbnRhZ2VJdGVtcycpIGFzIFVudHlwZWRGb3JtQXJyYXk7XG4gIH1cblxuICByb2xsb3V0UGVyY2VudGFnZUl0ZW1zU3VtKCkge1xuICAgIHJldHVybiB0aGlzLmZvcm1Hcm91cC5nZXQoJ3JvbGxvdXRQZXJjZW50YWdlSXRlbXNTdW0nKSBhcyBVbnR5cGVkRm9ybUNvbnRyb2w7XG4gIH1cblxuICB2YWx1ZShyb2xsb3V0UGVyY2VudGFnZUl0ZW06IFVudHlwZWRGb3JtR3JvdXApOiBVbnR5cGVkRm9ybUNvbnRyb2wge1xuICAgIHJldHVybiB0aGlzLnNldHRpbmcoKS5zZXR0aW5nVHlwZSA9PT0gU2V0dGluZ1R5cGUuQm9vbGVhbiA/XG4gICAgICByb2xsb3V0UGVyY2VudGFnZUl0ZW0uZ2V0KCd2YWx1ZURpc2FibGVkJykgYXMgVW50eXBlZEZvcm1Db250cm9sIDpcbiAgICAgIHJvbGxvdXRQZXJjZW50YWdlSXRlbS5nZXQoJ3ZhbHVlJykgYXMgVW50eXBlZEZvcm1Db250cm9sO1xuICB9XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBwZXJjZW50YWdlQ2hhbmdlZChpbmRleDogbnVtYmVyKSB7XG4gICAgaWYgKHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpLmNvbnRyb2xzW2luZGV4XS52YWx1ZS5wZXJjZW50YWdlIDwgMCkge1xuICAgICAgKHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpLmNvbnRyb2xzW2luZGV4XSBhcyBVbnR5cGVkRm9ybUdyb3VwKS5jb250cm9scy5wZXJjZW50YWdlLnNldFZhbHVlKDApO1xuICAgIH1cbiAgICBpZiAodGhpcy5yb2xsb3V0UGVyY2VudGFnZUl0ZW1zKCkuY29udHJvbHNbaW5kZXhdLnZhbHVlLnBlcmNlbnRhZ2UgPiAxMDApIHtcbiAgICAgICh0aGlzLnJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jb250cm9sc1tpbmRleF0gYXMgVW50eXBlZEZvcm1Hcm91cCkuY29udHJvbHMucGVyY2VudGFnZS5zZXRWYWx1ZSgxMDApO1xuICAgIH1cblxuICAgIGlmICh0aGlzLnJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jb250cm9scy5sZW5ndGggPT09IDIpIHtcbiAgICAgICh0aGlzLnJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jb250cm9sc1sxIC0gaW5kZXhdIGFzIFVudHlwZWRGb3JtR3JvdXApLmNvbnRyb2xzLnBlcmNlbnRhZ2VcbiAgICAgICAgLnNldFZhbHVlKDEwMCAtIHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpLmNvbnRyb2xzW2luZGV4XS52YWx1ZS5wZXJjZW50YWdlKTtcbiAgICB9XG5cbiAgICB0aGlzLnVwZGF0ZVN1bSgpO1xuICB9XG5cbiAgdXBkYXRlU3VtKCkge1xuICAgIGlmICh0aGlzLnJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jb250cm9scy5sZW5ndGggPT09IDApIHtcbiAgICAgIHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtc1N1bSgpLnNldFZhbHVlKDEwMCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtc1N1bSgpLnNldFZhbHVlKFxuICAgICAgICB0aGlzLnJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jb250cm9scy5tYXAodiA9PiB2LnZhbHVlLnBlcmNlbnRhZ2UpXG4gICAgICAgICAgLnJlZHVjZSgoYSwgYikgPT4gYSArIGIpXG4gICAgICApO1xuICAgIH1cbiAgfVxuXG4gIHJlbW92ZVJvbGxvdXRQZXJjZW50YWdlSXRlbShpbmRleDogbnVtYmVyKSB7XG4gICAgdGhpcy5yb2xsb3V0UGVyY2VudGFnZUl0ZW1zKCkucmVtb3ZlQXQoaW5kZXgpO1xuICAgIHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpLm1hcmtBc0RpcnR5KCk7XG4gICAgdGhpcy51cGRhdGVTdW0oKTtcbiAgfVxuXG4gIHJlbW92ZUFsbCgpIHtcbiAgICB0aGlzLnJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jbGVhcigpO1xuICAgIHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpLm1hcmtBc0RpcnR5KCk7XG4gICAgdGhpcy51cGRhdGVTdW0oKTtcbiAgfVxuXG4gIGdldFJvbGxvdXRQZXJjZW50YWdlSXRlbUZvcm1Hcm91cHMoKSB7XG4gICAgcmV0dXJuIHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpPy5jb250cm9scz8ubWFwKGMgPT4gYyBhcyBVbnR5cGVkRm9ybUdyb3VwKTtcbiAgfVxuXG4gIGdldFBlcmNlbnRhZ2VGb3JtQ29udHJvbChyb2xsb3V0UGVyY2VudGFnZUl0ZW06IGFueSkge1xuICAgIHJldHVybiByb2xsb3V0UGVyY2VudGFnZUl0ZW0uY29udHJvbHMucGVyY2VudGFnZSBhcyBVbnR5cGVkRm9ybUNvbnRyb2w7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJwZXJjZW50YWdlLXdyYXBwZXJcIiBbZm9ybUdyb3VwXT1cImZvcm1Hcm91cFwiPlxuXG4gICAgPGRpdiBjbGFzcz1cImlmXCIgKm5nSWY9XCJyb2xsb3V0UnVsZXMoKS5jb250cm9scy5sZW5ndGggPiAwXCI+XG4gICAgICAgIDxtYXQtY2hpcC1zZXQ+XG4gICAgICAgICAgICA8bWF0LWNoaXAgY2xhc3M9XCJjaGlwXCI+RUxTRSBJRjwvbWF0LWNoaXA+XG4gICAgICAgIDwvbWF0LWNoaXAtc2V0PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJncm93XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJwZXJjZW50YWdlLXJvdyBmbGV4XCJcbiAgICAgICAgICAgICpuZ0Zvcj1cImxldCByb2xsb3V0UGVyY2VudGFnZUl0ZW0gb2YgZ2V0Um9sbG91dFBlcmNlbnRhZ2VJdGVtRm9ybUdyb3VwcygpOyBsZXQgaSA9IGluZGV4XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleFwiPlxuICAgICAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwibnVtYmVyXCIgW2Zvcm1Db250cm9sXT1cImdldFBlcmNlbnRhZ2VGb3JtQ29udHJvbChyb2xsb3V0UGVyY2VudGFnZUl0ZW0pXCJcbiAgICAgICAgICAgICAgICAgICAgKGlucHV0KT1cInBlcmNlbnRhZ2VDaGFuZ2VkKGkpXCI+JVxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidXNlcnNcIj5vZiA8YSBocmVmPVwiaHR0cHM6Ly9jb25maWdjYXQuY29tL2RvY3MvYWR2YW5jZWQvdXNlci1vYmplY3RcIiB0YXJnZXQ9XCJfYmxhbmtcIlxuICAgICAgICAgICAgICAgICAgICAgICAgcmVsPVwibm9vcGVuZXIgbm9yZWZlcnJlclwiPnVzZXJzPC9hPlxuICAgICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGVsZXRlLW9wdGlvblwiIG1hdFRvb2x0aXA9XCJSZW1vdmUgdGhpcyAlIG9wdGlvblwiXG4gICAgICAgICAgICAgICAgKm5nSWY9XCIhcmVhZE9ubHkgJiYgcm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpLmNvbnRyb2xzLmxlbmd0aCA+IDJcIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJyZW1vdmVSb2xsb3V0UGVyY2VudGFnZUl0ZW0oaSlcIj5cbiAgICAgICAgICAgICAgICA8bWF0LWljb24+Y2FuY2VsPC9tYXQtaWNvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICA8c3BhbiBtYXRUb29sdGlwPVwiVGhlIHN1bSBvZiBwZXJjZW50YWdlcyBtdXN0IGJlIGVxdWFsIHRvIDEwMC5cIiBtYXRUb29sdGlwUG9zaXRpb249XCJhYm92ZVwiXG4gICAgICAgICAgICAgICAgKm5nSWY9XCIoaSA9PT0gcm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpLmNvbnRyb2xzLmxlbmd0aCAtMSkgJiYgKHJvbGxvdXRQZXJjZW50YWdlSXRlbXNTdW0oKS5pbnZhbGlkKVwiPlxuICAgICAgICAgICAgICAgIDxtYXQtaWNvbiBjb2xvcj1cIndhcm5cIj5cbiAgICAgICAgICAgICAgICAgICAgZXJyb3Jfb3V0bGluZVxuICAgICAgICAgICAgICAgIDwvbWF0LWljb24+XG4gICAgICAgICAgICA8L3NwYW4+XG5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ2YWx1ZSBmbGV4XCI+XG4gICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJ2YWx1ZS1uYW1lXCIgKm5nSWY9XCJzZXR0aW5nKCkuc2V0dGluZ1R5cGUgIT09IFNldHRpbmdUeXBlLkJvb2xlYW5cIj5TZXJ2ZWQgdmFsdWU6PC9zcGFuPlxuICAgICAgICAgICAgICAgIDxjb25maWdjYXQtdmFsdWUgY2xhc3M9XCJzZXJ2ZWQtdmFsdWVcIiBbdmFsdWVGb3JtQ29udHJvbF09XCJ2YWx1ZShyb2xsb3V0UGVyY2VudGFnZUl0ZW0pXCJcbiAgICAgICAgICAgICAgICAgICAgW3NldHRpbmddPVwic2V0dGluZygpXCI+XG4gICAgICAgICAgICAgICAgPC9jb25maWdjYXQtdmFsdWU+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJkZWxldGVcIiBtYXRUb29sdGlwPVwiUmVtb3ZlICUgb3B0aW9uc1wiIChjbGljayk9XCJyZW1vdmVBbGwoKVwiICpuZ0lmPVwiIXJlYWRPbmx5XCI+XG4gICAgICAgICAgICAgICAgPG1hdC1pY29uPmNhbmNlbDwvbWF0LWljb24+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm9sbG91dC1wZXJjZW50YWdlLWl0ZW1zLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbmZpZ2NhdC1wdWJsaWNhcGktdWkvc3JjL2xpYi9zZXR0aW5nLWxpc3Qvc2V0dGluZy9yb2xsb3V0LXBlcmNlbnRhZ2UtaXRlbXMvcm9sbG91dC1wZXJjZW50YWdlLWl0ZW1zLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbmZpZ2NhdC1wdWJsaWNhcGktdWkvc3JjL2xpYi9zZXR0aW5nLWxpc3Qvc2V0dGluZy9yb2xsb3V0LXBlcmNlbnRhZ2UtaXRlbXMvcm9sbG91dC1wZXJjZW50YWdlLWl0ZW1zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRWpELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7Ozs7Ozs7QUFPckQsTUFBTSxPQUFPLCtCQUErQjtJQU8xQyxPQUFPO1FBQ0wsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsRUFBRSxLQUFLLENBQUM7SUFDOUMsQ0FBQztJQUVELFlBQVk7UUFDVixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLGNBQWMsQ0FBcUIsQ0FBQztJQUNoRSxDQUFDO0lBRUQsc0JBQXNCO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsd0JBQXdCLENBQXFCLENBQUM7SUFDMUUsQ0FBQztJQUVELHlCQUF5QjtRQUN2QixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLDJCQUEyQixDQUF1QixDQUFDO0lBQy9FLENBQUM7SUFFRCxLQUFLLENBQUMscUJBQXVDO1FBQzNDLE9BQU8sSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLFdBQVcsS0FBSyxXQUFXLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDekQscUJBQXFCLENBQUMsR0FBRyxDQUFDLGVBQWUsQ0FBdUIsQ0FBQyxDQUFDO1lBQ2xFLHFCQUFxQixDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQXVCLENBQUM7SUFDN0QsQ0FBQztJQUVEO1FBMUJTLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDMUIsZ0JBQVcsR0FBRyxXQUFXLENBQUM7SUF5QlYsQ0FBQztJQUVqQixpQkFBaUIsQ0FBQyxLQUFhO1FBQzdCLElBQUksSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLEtBQUssQ0FBQyxVQUFVLEdBQUcsQ0FBQyxFQUFFLENBQUM7WUFDdEUsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBc0IsQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN0RyxDQUFDO1FBQ0QsSUFBSSxJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUMsS0FBSyxDQUFDLFVBQVUsR0FBRyxHQUFHLEVBQUUsQ0FBQztZQUN4RSxJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFzQixDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ3hHLENBQUM7UUFFRCxJQUFJLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDdkQsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUMsUUFBUSxDQUFDLENBQUMsR0FBRyxLQUFLLENBQXNCLENBQUMsUUFBUSxDQUFDLFVBQVU7aUJBQ3hGLFFBQVEsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUNwRixDQUFDO1FBRUQsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFRCxTQUFTO1FBQ1AsSUFBSSxJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQyxRQUFRLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ3hELElBQUksQ0FBQyx5QkFBeUIsRUFBRSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNqRCxDQUFDO2FBQU0sQ0FBQztZQUNOLElBQUksQ0FBQyx5QkFBeUIsRUFBRSxDQUFDLFFBQVEsQ0FDdkMsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsVUFBVSxDQUFDO2lCQUNoRSxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQzNCLENBQUM7UUFDSixDQUFDO0lBQ0gsQ0FBQztJQUVELDJCQUEyQixDQUFDLEtBQWE7UUFDdkMsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzlDLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQzVDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRUQsU0FBUztRQUNQLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ3RDLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQzVDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRUQsa0NBQWtDO1FBQ2hDLE9BQU8sSUFBSSxDQUFDLHNCQUFzQixFQUFFLEVBQUUsUUFBUSxFQUFFLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQXFCLENBQUMsQ0FBQztJQUNsRixDQUFDO0lBRUQsd0JBQXdCLENBQUMscUJBQTBCO1FBQ2pELE9BQU8scUJBQXFCLENBQUMsUUFBUSxDQUFDLFVBQWdDLENBQUM7SUFDekUsQ0FBQzs4R0E1RVUsK0JBQStCO2tHQUEvQiwrQkFBK0Isb0lDVDVDLGtqRUEwQ007OzJGRGpDTywrQkFBK0I7a0JBTDNDLFNBQVM7K0JBQ0Usb0NBQW9DO3dEQU1yQyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBVbnR5cGVkRm9ybUdyb3VwLCBVbnR5cGVkRm9ybUFycmF5LCBVbnR5cGVkRm9ybUNvbnRyb2wgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBTZXR0aW5nVHlwZSB9IGZyb20gJ25nLWNvbmZpZ2NhdC1wdWJsaWNhcGknO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb25maWdjYXQtcm9sbG91dC1wZXJjZW50YWdlLWl0ZW1zJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3JvbGxvdXQtcGVyY2VudGFnZS1pdGVtcy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3JvbGxvdXQtcGVyY2VudGFnZS1pdGVtcy5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFJvbGxvdXRQZXJjZW50YWdlSXRlbXNDb21wb25lbnQge1xuXG4gIEBJbnB1dCgpIGZvcm1Hcm91cCE6IFVudHlwZWRGb3JtR3JvdXA7XG4gIEBJbnB1dCgpIHJlYWRPbmx5ID0gZmFsc2U7XG4gIFNldHRpbmdUeXBlID0gU2V0dGluZ1R5cGU7XG5cblxuICBzZXR0aW5nKCkge1xuICAgIHJldHVybiB0aGlzLmZvcm1Hcm91cC5nZXQoJ3NldHRpbmcnKT8udmFsdWU7XG4gIH1cblxuICByb2xsb3V0UnVsZXMoKSB7XG4gICAgcmV0dXJuIHRoaXMuZm9ybUdyb3VwLmdldCgncm9sbG91dFJ1bGVzJykgYXMgVW50eXBlZEZvcm1BcnJheTtcbiAgfVxuXG4gIHJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKSB7XG4gICAgcmV0dXJuIHRoaXMuZm9ybUdyb3VwLmdldCgncm9sbG91dFBlcmNlbnRhZ2VJdGVtcycpIGFzIFVudHlwZWRGb3JtQXJyYXk7XG4gIH1cblxuICByb2xsb3V0UGVyY2VudGFnZUl0ZW1zU3VtKCkge1xuICAgIHJldHVybiB0aGlzLmZvcm1Hcm91cC5nZXQoJ3JvbGxvdXRQZXJjZW50YWdlSXRlbXNTdW0nKSBhcyBVbnR5cGVkRm9ybUNvbnRyb2w7XG4gIH1cblxuICB2YWx1ZShyb2xsb3V0UGVyY2VudGFnZUl0ZW06IFVudHlwZWRGb3JtR3JvdXApOiBVbnR5cGVkRm9ybUNvbnRyb2wge1xuICAgIHJldHVybiB0aGlzLnNldHRpbmcoKS5zZXR0aW5nVHlwZSA9PT0gU2V0dGluZ1R5cGUuQm9vbGVhbiA/XG4gICAgICByb2xsb3V0UGVyY2VudGFnZUl0ZW0uZ2V0KCd2YWx1ZURpc2FibGVkJykgYXMgVW50eXBlZEZvcm1Db250cm9sIDpcbiAgICAgIHJvbGxvdXRQZXJjZW50YWdlSXRlbS5nZXQoJ3ZhbHVlJykgYXMgVW50eXBlZEZvcm1Db250cm9sO1xuICB9XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBwZXJjZW50YWdlQ2hhbmdlZChpbmRleDogbnVtYmVyKSB7XG4gICAgaWYgKHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpLmNvbnRyb2xzW2luZGV4XS52YWx1ZS5wZXJjZW50YWdlIDwgMCkge1xuICAgICAgKHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpLmNvbnRyb2xzW2luZGV4XSBhcyBVbnR5cGVkRm9ybUdyb3VwKS5jb250cm9scy5wZXJjZW50YWdlLnNldFZhbHVlKDApO1xuICAgIH1cbiAgICBpZiAodGhpcy5yb2xsb3V0UGVyY2VudGFnZUl0ZW1zKCkuY29udHJvbHNbaW5kZXhdLnZhbHVlLnBlcmNlbnRhZ2UgPiAxMDApIHtcbiAgICAgICh0aGlzLnJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jb250cm9sc1tpbmRleF0gYXMgVW50eXBlZEZvcm1Hcm91cCkuY29udHJvbHMucGVyY2VudGFnZS5zZXRWYWx1ZSgxMDApO1xuICAgIH1cblxuICAgIGlmICh0aGlzLnJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jb250cm9scy5sZW5ndGggPT09IDIpIHtcbiAgICAgICh0aGlzLnJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jb250cm9sc1sxIC0gaW5kZXhdIGFzIFVudHlwZWRGb3JtR3JvdXApLmNvbnRyb2xzLnBlcmNlbnRhZ2VcbiAgICAgICAgLnNldFZhbHVlKDEwMCAtIHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpLmNvbnRyb2xzW2luZGV4XS52YWx1ZS5wZXJjZW50YWdlKTtcbiAgICB9XG5cbiAgICB0aGlzLnVwZGF0ZVN1bSgpO1xuICB9XG5cbiAgdXBkYXRlU3VtKCkge1xuICAgIGlmICh0aGlzLnJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jb250cm9scy5sZW5ndGggPT09IDApIHtcbiAgICAgIHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtc1N1bSgpLnNldFZhbHVlKDEwMCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtc1N1bSgpLnNldFZhbHVlKFxuICAgICAgICB0aGlzLnJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jb250cm9scy5tYXAodiA9PiB2LnZhbHVlLnBlcmNlbnRhZ2UpXG4gICAgICAgICAgLnJlZHVjZSgoYSwgYikgPT4gYSArIGIpXG4gICAgICApO1xuICAgIH1cbiAgfVxuXG4gIHJlbW92ZVJvbGxvdXRQZXJjZW50YWdlSXRlbShpbmRleDogbnVtYmVyKSB7XG4gICAgdGhpcy5yb2xsb3V0UGVyY2VudGFnZUl0ZW1zKCkucmVtb3ZlQXQoaW5kZXgpO1xuICAgIHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpLm1hcmtBc0RpcnR5KCk7XG4gICAgdGhpcy51cGRhdGVTdW0oKTtcbiAgfVxuXG4gIHJlbW92ZUFsbCgpIHtcbiAgICB0aGlzLnJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jbGVhcigpO1xuICAgIHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpLm1hcmtBc0RpcnR5KCk7XG4gICAgdGhpcy51cGRhdGVTdW0oKTtcbiAgfVxuXG4gIGdldFJvbGxvdXRQZXJjZW50YWdlSXRlbUZvcm1Hcm91cHMoKSB7XG4gICAgcmV0dXJuIHRoaXMucm9sbG91dFBlcmNlbnRhZ2VJdGVtcygpPy5jb250cm9scz8ubWFwKGMgPT4gYyBhcyBVbnR5cGVkRm9ybUdyb3VwKTtcbiAgfVxuXG4gIGdldFBlcmNlbnRhZ2VGb3JtQ29udHJvbChyb2xsb3V0UGVyY2VudGFnZUl0ZW06IGFueSkge1xuICAgIHJldHVybiByb2xsb3V0UGVyY2VudGFnZUl0ZW0uY29udHJvbHMucGVyY2VudGFnZSBhcyBVbnR5cGVkRm9ybUNvbnRyb2w7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJwZXJjZW50YWdlLXdyYXBwZXJcIiBbZm9ybUdyb3VwXT1cImZvcm1Hcm91cFwiPlxuXG4gICAgPGRpdiBjbGFzcz1cImlmXCIgKm5nSWY9XCJyb2xsb3V0UnVsZXMoKS5jb250cm9scy5sZW5ndGggPiAwXCI+XG4gICAgICAgIDxtYXQtY2hpcC1zZXQ+XG4gICAgICAgICAgICA8bWF0LWNoaXAgY2xhc3M9XCJjaGlwXCI+RUxTRSBJRjwvbWF0LWNoaXA+XG4gICAgICAgIDwvbWF0LWNoaXAtc2V0PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJncm93XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJwZXJjZW50YWdlLXJvdyBmbGV4XCJcbiAgICAgICAgICAgICpuZ0Zvcj1cImxldCByb2xsb3V0UGVyY2VudGFnZUl0ZW0gb2YgZ2V0Um9sbG91dFBlcmNlbnRhZ2VJdGVtRm9ybUdyb3VwcygpOyBsZXQgaSA9IGluZGV4XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleFwiPlxuICAgICAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwibnVtYmVyXCIgW2Zvcm1Db250cm9sXT1cImdldFBlcmNlbnRhZ2VGb3JtQ29udHJvbChyb2xsb3V0UGVyY2VudGFnZUl0ZW0pXCJcbiAgICAgICAgICAgICAgICAgICAgKGlucHV0KT1cInBlcmNlbnRhZ2VDaGFuZ2VkKGkpXCIgZGlnaXRPbmx5PiVcbiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cInVzZXJzXCI+b2YgPGEgaHJlZj1cImh0dHBzOi8vY29uZmlnY2F0LmNvbS9kb2NzL2FkdmFuY2VkL3VzZXItb2JqZWN0XCIgdGFyZ2V0PVwiX2JsYW5rXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIHJlbD1cIm5vb3BlbmVyIG5vcmVmZXJyZXJcIj51c2VyczwvYT5cbiAgICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImRlbGV0ZS1vcHRpb25cIiBtYXRUb29sdGlwPVwiUmVtb3ZlIHRoaXMgJSBvcHRpb25cIlxuICAgICAgICAgICAgICAgICpuZ0lmPVwiIXJlYWRPbmx5ICYmIHJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jb250cm9scy5sZW5ndGggPiAyXCJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwicmVtb3ZlUm9sbG91dFBlcmNlbnRhZ2VJdGVtKGkpXCI+XG4gICAgICAgICAgICAgICAgPG1hdC1pY29uPmNhbmNlbDwvbWF0LWljb24+XG4gICAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgICAgPHNwYW4gbWF0VG9vbHRpcD1cIlRoZSBzdW0gb2YgcGVyY2VudGFnZXMgbXVzdCBiZSBlcXVhbCB0byAxMDAuXCIgbWF0VG9vbHRpcFBvc2l0aW9uPVwiYWJvdmVcIlxuICAgICAgICAgICAgICAgICpuZ0lmPVwiKGkgPT09IHJvbGxvdXRQZXJjZW50YWdlSXRlbXMoKS5jb250cm9scy5sZW5ndGggLTEpICYmIChyb2xsb3V0UGVyY2VudGFnZUl0ZW1zU3VtKCkuaW52YWxpZClcIj5cbiAgICAgICAgICAgICAgICA8bWF0LWljb24gY29sb3I9XCJ3YXJuXCI+XG4gICAgICAgICAgICAgICAgICAgIGVycm9yX291dGxpbmVcbiAgICAgICAgICAgICAgICA8L21hdC1pY29uPlxuICAgICAgICAgICAgPC9zcGFuPlxuXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwidmFsdWUgZmxleFwiPlxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidmFsdWUtbmFtZVwiICpuZ0lmPVwic2V0dGluZygpLnNldHRpbmdUeXBlICE9PSBTZXR0aW5nVHlwZS5Cb29sZWFuXCI+U2VydmVkIHZhbHVlOjwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8Y29uZmlnY2F0LXZhbHVlIGNsYXNzPVwic2VydmVkLXZhbHVlXCIgW3ZhbHVlRm9ybUNvbnRyb2xdPVwidmFsdWUocm9sbG91dFBlcmNlbnRhZ2VJdGVtKVwiXG4gICAgICAgICAgICAgICAgICAgIFtzZXR0aW5nXT1cInNldHRpbmcoKVwiPlxuICAgICAgICAgICAgICAgIDwvY29uZmlnY2F0LXZhbHVlPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGVsZXRlXCIgbWF0VG9vbHRpcD1cIlJlbW92ZSAlIG9wdGlvbnNcIiAoY2xpY2spPVwicmVtb3ZlQWxsKClcIiAqbmdJZj1cIiFyZWFkT25seVwiPlxuICAgICAgICAgICAgICAgIDxtYXQtaWNvbj5jYW5jZWw8L21hdC1pY29uPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+Il19

package/esm2022/lib/setting-list/setting/rollout-rules/rollout-rules.component.mjs

@@ -277,10 +277,10 @@ export class RolloutRulesComponent {
     getRolloutRuleSegmentIdFormControl(rolloutRule) {
         return rolloutRule.controls.segmentId;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: RolloutRulesComponent, deps: [{ token: i1.MatDialog }, { token: i2.SettingListFormHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", 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:-webkit-grab;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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], 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]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i9.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], 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: i12.ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }, { kind: "directive", type: i13.InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RolloutRulesComponent, deps: [{ token: i1.MatDialog }, { token: i2.SettingListFormHelper }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", 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:-webkit-grab;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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], 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]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i9.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], 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: i12.ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }, { kind: "directive", type: i13.InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: RolloutRulesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", 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                        [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:-webkit-grab;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: () => [{ type: i1.MatDialog }, { type: i2.SettingListFormHelper }], propDecorators: { formGroup: [{

package/esm2022/lib/setting-list/setting/setting.component.mjs

@@ -104,10 +104,10 @@ export class SettingComponent {
     getDashboardUrl() {
         return this.dashboardBasePath + '/' + this.productId + '/' + this.configId + '/' + this.environmentId + '?settingId=' + this.setting().settingId;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingComponent, deps: [{ token: i1.SettingListFormHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i6.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i7.RolloutPercentageItemsComponent, selector: "configcat-rollout-percentage-items", inputs: ["formGroup", "readOnly"] }, { kind: "component", type: i8.RolloutRulesComponent, selector: "configcat-rollout-rules", inputs: ["formGroup", "readOnly", "segments"] }, { kind: "component", type: i9.ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingComponent, deps: [{ token: i1.SettingListFormHelper }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i6.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i7.RolloutPercentageItemsComponent, selector: "configcat-rollout-percentage-items", inputs: ["formGroup", "readOnly"] }, { kind: "component", type: i8.RolloutRulesComponent, selector: "configcat-rollout-rules", inputs: ["formGroup", "readOnly", "segments"] }, { kind: "component", type: i9.ValueComponent, selector: "configcat-value", inputs: ["valueFormControl", "setting"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", 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\">\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: () => [{ type: i1.SettingListFormHelper }], propDecorators: { dashboardBasePath: [{

package/esm2022/lib/setting-list/setting/value/value.component.mjs

@@ -23,15 +23,15 @@ export class ValueComponent {
     formatDecimalNumber(value) {
         return FormHelper.formatNumberForDisplay(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ValueComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", 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;-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ValueComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", 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\" digitOnly digitOnlyAllowNegatives=\"true\"/>\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;-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", 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;-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);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"] }]
+            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\" digitOnly digitOnlyAllowNegatives=\"true\"/>\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;-webkit-transition:.4s;transition:.4s;width:66px;height:30px}.slider:before{position:absolute;content:\"\";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#9acd32}input:focus+.slider{box-shadow:0 0 1px #9acd32}input:checked+.slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);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"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { valueFormControl: [{
                 type: Input
             }], setting: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsdWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctY29uZmlnY2F0LXB1YmxpY2FwaS11aS9zcmMvbGliL3NldHRpbmctbGlzdC9zZXR0aW5nL3ZhbHVlL3ZhbHVlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbmZpZ2NhdC1wdWJsaWNhcGktdWkvc3JjL2xpYi9zZXR0aW5nLWxpc3Qvc2V0dGluZy92YWx1ZS92YWx1ZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUdqRCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx3REFBd0QsQ0FBQztBQUMvRixPQUFPLEVBQWdCLFdBQVcsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ25FLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7Ozs7Ozs7QUFVNUQsTUFBTSxPQUFPLGNBQWM7SUFRekIsWUFBb0IsTUFBaUI7UUFBakIsV0FBTSxHQUFOLE1BQU0sQ0FBVztRQUZyQyxnQkFBVyxHQUFHLFdBQVcsQ0FBQztJQUcxQixDQUFDO0lBRUQsTUFBTTtRQUNKLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLHFCQUFxQixFQUFFO1lBQ3RDLEtBQUssRUFBRSxPQUFPO1lBQ2QsSUFBSSxFQUFFLEVBQUUsT0FBTyxFQUFFLElBQUksQ0FBQyxnQkFBZ0IsRUFBRTtTQUN6QyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsbUJBQW1CLENBQUMsS0FBYTtRQUMvQixPQUFPLFVBQVUsQ0FBQyxzQkFBc0IsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNsRCxDQUFDOzhHQXBCVSxjQUFjO2tHQUFkLGNBQWMsNkhDZjNCLCtrREE4QkE7OzJGRGZhLGNBQWM7a0JBUjFCLFNBQVM7K0JBQ0UsaUJBQWlCOzhFQVNsQixnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBRUcsT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVW50eXBlZEZvcm1Db250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgTWF0RGlhbG9nIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGlhbG9nJztcbmltcG9ydCB7IEV4cGFuZERpYWxvZ0NvbXBvbmVudCB9IGZyb20gJy4uLy4uLy4uL2RpYWxvZ3MvZXhwYW5kLWRpYWxvZy9leHBhbmQtZGlhbG9nLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTZXR0aW5nTW9kZWwsIFNldHRpbmdUeXBlIH0gZnJvbSAnbmctY29uZmlnY2F0LXB1YmxpY2FwaSc7XG5pbXBvcnQgeyBGb3JtSGVscGVyIH0gZnJvbSAnLi4vLi4vLi4vX3NlcnZpY2VzL2Zvcm0taGVscGVyJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29uZmlnY2F0LXZhbHVlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3ZhbHVlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbXG4gICAgJy4vc2xpZGVyLnNjc3MnLFxuICAgICcuL3ZhbHVlLmNvbXBvbmVudC5zY3NzJ1xuICBdXG59KVxuZXhwb3J0IGNsYXNzIFZhbHVlQ29tcG9uZW50IHtcblxuICBASW5wdXQoKSB2YWx1ZUZvcm1Db250cm9sITogVW50eXBlZEZvcm1Db250cm9sO1xuXG4gIEBJbnB1dCgpIHNldHRpbmchOiBTZXR0aW5nTW9kZWw7XG5cbiAgU2V0dGluZ1R5cGUgPSBTZXR0aW5nVHlwZTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGRpYWxvZzogTWF0RGlhbG9nKSB7XG4gIH1cblxuICBwb3BPdXQoKSB7XG4gICAgdGhpcy5kaWFsb2cub3BlbihFeHBhbmREaWFsb2dDb21wb25lbnQsIHtcbiAgICAgIHdpZHRoOiAnNjQwcHgnLFxuICAgICAgZGF0YTogeyBjb250cm9sOiB0aGlzLnZhbHVlRm9ybUNvbnRyb2wgfVxuICAgIH0pO1xuICB9XG5cbiAgZm9ybWF0RGVjaW1hbE51bWJlcih2YWx1ZTogbnVtYmVyKSB7XG4gICAgcmV0dXJuIEZvcm1IZWxwZXIuZm9ybWF0TnVtYmVyRm9yRGlzcGxheSh2YWx1ZSk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJmbGV4XCI+XG4gIDxkaXYgY2xhc3M9XCJjb250YWluZXJcIiBbbmdTd2l0Y2hdPVwic2V0dGluZy5zZXR0aW5nVHlwZVwiPlxuICAgIDxkaXYgKm5nU3dpdGNoQ2FzZT1cIlNldHRpbmdUeXBlLlN0cmluZ1wiIGNsYXNzPVwid2l0aC12YWxpZGF0aW9uXCI+XG4gICAgICA8c3BhbiAqbmdJZj1cInZhbHVlRm9ybUNvbnRyb2wuaW52YWxpZFwiIGNsYXNzPVwiZXJyb3JcIj4qPC9zcGFuPlxuICAgICAgPGlucHV0IFtuZ0NsYXNzXT1cInsnaW52YWxpZCc6IHZhbHVlRm9ybUNvbnRyb2wuaW52YWxpZH1cIiB0eXBlPVwidGV4dFwiXG4gICAgICAgICAgICAgW2Zvcm1Db250cm9sXT1cInZhbHVlRm9ybUNvbnRyb2xcIiBwbGFjZWhvbGRlcj1cIm15IHZhbHVlXCIgbmFtZT1cInZhbHVlXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiZXhwYW5kXCIgKGNsaWNrKT1cInBvcE91dCgpXCIgbWF0VG9vbHRpcD1cIlBvcC1vdXQgRWRpdG9yXCI+XG4gICAgICAgIDxtYXQtaWNvbj5oZWlnaHQ8L21hdC1pY29uPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiAqbmdTd2l0Y2hDYXNlPVwiU2V0dGluZ1R5cGUuSW50XCIgY2xhc3M9XCJ3aXRoLXZhbGlkYXRpb25cIj5cbiAgICAgIDxzcGFuICpuZ0lmPVwidmFsdWVGb3JtQ29udHJvbC5pbnZhbGlkXCIgY2xhc3M9XCJlcnJvclwiPio8L3NwYW4+XG4gICAgICA8aW5wdXQgW25nQ2xhc3NdPVwieydpbnZhbGlkJzogdmFsdWVGb3JtQ29udHJvbC5pbnZhbGlkfVwiIHR5cGU9XCJudW1iZXJcIiBbZm9ybUNvbnRyb2xdPVwidmFsdWVGb3JtQ29udHJvbFwiXG4gICAgICAgICAgICAgcGxhY2Vob2xkZXI9XCI0MlwiIG5hbWU9XCJ2YWx1ZVwiIC8+XG4gICAgPC9kaXY+XG4gICAgPGRpdiAqbmdTd2l0Y2hDYXNlPVwiU2V0dGluZ1R5cGUuRG91YmxlXCIgY2xhc3M9XCJ3aXRoLXZhbGlkYXRpb25cIj5cbiAgICAgIDxzcGFuICpuZ0lmPVwidmFsdWVGb3JtQ29udHJvbC5pbnZhbGlkXCIgY2xhc3M9XCJlcnJvclwiPio8L3NwYW4+XG4gICAgICA8aW5wdXQgW25nQ2xhc3NdPVwieydpbnZhbGlkJzogdmFsdWVGb3JtQ29udHJvbC5pbnZhbGlkfVwiIHR5cGU9XCJudW1iZXJcIiBbZm9ybUNvbnRyb2xdPVwidmFsdWVGb3JtQ29udHJvbFwiXG4gICAgICAgICAgICAgcGxhY2Vob2xkZXI9XCJ7eyBmb3JtYXREZWNpbWFsTnVtYmVyKDMuMTQpIH19XCIgbmFtZT1cInZhbHVlXCIgaW5wdXREaXNwbGF5Tm9ybWFsaXplcj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2ICpuZ1N3aXRjaENhc2U9XCJTZXR0aW5nVHlwZS5Cb29sZWFuXCIgY2xhc3M9XCJ0b2dnbGVcIj5cbiAgICAgIDxsYWJlbCBjbGFzcz1cInN3aXRjaFwiPlxuICAgICAgICA8aW5wdXQgdHlwZT1cImNoZWNrYm94XCIgW2Zvcm1Db250cm9sXT1cInZhbHVlRm9ybUNvbnRyb2xcIiBuYW1lPVwidmFsdWVcIiAvPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInNsaWRlciByb3VuZFwiPjwvc3Bhbj5cbiAgICAgIDwvbGFiZWw+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2ICpuZ0lmPVwic2V0dGluZy5zZXR0aW5nVHlwZSA9PT0gU2V0dGluZ1R5cGUuQm9vbGVhblwiIGNsYXNzPVwic3BhY2VyXCI+PC9kaXY+XG5cbjwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsdWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctY29uZmlnY2F0LXB1YmxpY2FwaS11aS9zcmMvbGliL3NldHRpbmctbGlzdC9zZXR0aW5nL3ZhbHVlL3ZhbHVlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbmZpZ2NhdC1wdWJsaWNhcGktdWkvc3JjL2xpYi9zZXR0aW5nLWxpc3Qvc2V0dGluZy92YWx1ZS92YWx1ZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUdqRCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx3REFBd0QsQ0FBQztBQUMvRixPQUFPLEVBQWdCLFdBQVcsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ25FLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7Ozs7Ozs7QUFVNUQsTUFBTSxPQUFPLGNBQWM7SUFRekIsWUFBb0IsTUFBaUI7UUFBakIsV0FBTSxHQUFOLE1BQU0sQ0FBVztRQUZyQyxnQkFBVyxHQUFHLFdBQVcsQ0FBQztJQUcxQixDQUFDO0lBRUQsTUFBTTtRQUNKLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLHFCQUFxQixFQUFFO1lBQ3RDLEtBQUssRUFBRSxPQUFPO1lBQ2QsSUFBSSxFQUFFLEVBQUUsT0FBTyxFQUFFLElBQUksQ0FBQyxnQkFBZ0IsRUFBRTtTQUN6QyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsbUJBQW1CLENBQUMsS0FBYTtRQUMvQixPQUFPLFVBQVUsQ0FBQyxzQkFBc0IsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNsRCxDQUFDOzhHQXBCVSxjQUFjO2tHQUFkLGNBQWMsNkhDZjNCLHluREE4QkE7OzJGRGZhLGNBQWM7a0JBUjFCLFNBQVM7K0JBQ0UsaUJBQWlCOzhFQVNsQixnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBRUcsT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVW50eXBlZEZvcm1Db250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgTWF0RGlhbG9nIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGlhbG9nJztcbmltcG9ydCB7IEV4cGFuZERpYWxvZ0NvbXBvbmVudCB9IGZyb20gJy4uLy4uLy4uL2RpYWxvZ3MvZXhwYW5kLWRpYWxvZy9leHBhbmQtZGlhbG9nLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTZXR0aW5nTW9kZWwsIFNldHRpbmdUeXBlIH0gZnJvbSAnbmctY29uZmlnY2F0LXB1YmxpY2FwaSc7XG5pbXBvcnQgeyBGb3JtSGVscGVyIH0gZnJvbSAnLi4vLi4vLi4vX3NlcnZpY2VzL2Zvcm0taGVscGVyJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29uZmlnY2F0LXZhbHVlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3ZhbHVlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbXG4gICAgJy4vc2xpZGVyLnNjc3MnLFxuICAgICcuL3ZhbHVlLmNvbXBvbmVudC5zY3NzJ1xuICBdXG59KVxuZXhwb3J0IGNsYXNzIFZhbHVlQ29tcG9uZW50IHtcblxuICBASW5wdXQoKSB2YWx1ZUZvcm1Db250cm9sITogVW50eXBlZEZvcm1Db250cm9sO1xuXG4gIEBJbnB1dCgpIHNldHRpbmchOiBTZXR0aW5nTW9kZWw7XG5cbiAgU2V0dGluZ1R5cGUgPSBTZXR0aW5nVHlwZTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGRpYWxvZzogTWF0RGlhbG9nKSB7XG4gIH1cblxuICBwb3BPdXQoKSB7XG4gICAgdGhpcy5kaWFsb2cub3BlbihFeHBhbmREaWFsb2dDb21wb25lbnQsIHtcbiAgICAgIHdpZHRoOiAnNjQwcHgnLFxuICAgICAgZGF0YTogeyBjb250cm9sOiB0aGlzLnZhbHVlRm9ybUNvbnRyb2wgfVxuICAgIH0pO1xuICB9XG5cbiAgZm9ybWF0RGVjaW1hbE51bWJlcih2YWx1ZTogbnVtYmVyKSB7XG4gICAgcmV0dXJuIEZvcm1IZWxwZXIuZm9ybWF0TnVtYmVyRm9yRGlzcGxheSh2YWx1ZSk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJmbGV4XCI+XG4gIDxkaXYgY2xhc3M9XCJjb250YWluZXJcIiBbbmdTd2l0Y2hdPVwic2V0dGluZy5zZXR0aW5nVHlwZVwiPlxuICAgIDxkaXYgKm5nU3dpdGNoQ2FzZT1cIlNldHRpbmdUeXBlLlN0cmluZ1wiIGNsYXNzPVwid2l0aC12YWxpZGF0aW9uXCI+XG4gICAgICA8c3BhbiAqbmdJZj1cInZhbHVlRm9ybUNvbnRyb2wuaW52YWxpZFwiIGNsYXNzPVwiZXJyb3JcIj4qPC9zcGFuPlxuICAgICAgPGlucHV0IFtuZ0NsYXNzXT1cInsnaW52YWxpZCc6IHZhbHVlRm9ybUNvbnRyb2wuaW52YWxpZH1cIiB0eXBlPVwidGV4dFwiXG4gICAgICAgICAgICAgW2Zvcm1Db250cm9sXT1cInZhbHVlRm9ybUNvbnRyb2xcIiBwbGFjZWhvbGRlcj1cIm15IHZhbHVlXCIgbmFtZT1cInZhbHVlXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiZXhwYW5kXCIgKGNsaWNrKT1cInBvcE91dCgpXCIgbWF0VG9vbHRpcD1cIlBvcC1vdXQgRWRpdG9yXCI+XG4gICAgICAgIDxtYXQtaWNvbj5oZWlnaHQ8L21hdC1pY29uPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiAqbmdTd2l0Y2hDYXNlPVwiU2V0dGluZ1R5cGUuSW50XCIgY2xhc3M9XCJ3aXRoLXZhbGlkYXRpb25cIj5cbiAgICAgIDxzcGFuICpuZ0lmPVwidmFsdWVGb3JtQ29udHJvbC5pbnZhbGlkXCIgY2xhc3M9XCJlcnJvclwiPio8L3NwYW4+XG4gICAgICA8aW5wdXQgW25nQ2xhc3NdPVwieydpbnZhbGlkJzogdmFsdWVGb3JtQ29udHJvbC5pbnZhbGlkfVwiIHR5cGU9XCJudW1iZXJcIiBbZm9ybUNvbnRyb2xdPVwidmFsdWVGb3JtQ29udHJvbFwiXG4gICAgICAgICAgICAgcGxhY2Vob2xkZXI9XCI0MlwiIG5hbWU9XCJ2YWx1ZVwiIGRpZ2l0T25seSBkaWdpdE9ubHlBbGxvd05lZ2F0aXZlcz1cInRydWVcIi8+XG4gICAgPC9kaXY+XG4gICAgPGRpdiAqbmdTd2l0Y2hDYXNlPVwiU2V0dGluZ1R5cGUuRG91YmxlXCIgY2xhc3M9XCJ3aXRoLXZhbGlkYXRpb25cIj5cbiAgICAgIDxzcGFuICpuZ0lmPVwidmFsdWVGb3JtQ29udHJvbC5pbnZhbGlkXCIgY2xhc3M9XCJlcnJvclwiPio8L3NwYW4+XG4gICAgICA8aW5wdXQgW25nQ2xhc3NdPVwieydpbnZhbGlkJzogdmFsdWVGb3JtQ29udHJvbC5pbnZhbGlkfVwiIHR5cGU9XCJudW1iZXJcIiBbZm9ybUNvbnRyb2xdPVwidmFsdWVGb3JtQ29udHJvbFwiXG4gICAgICAgICAgICAgcGxhY2Vob2xkZXI9XCJ7eyBmb3JtYXREZWNpbWFsTnVtYmVyKDMuMTQpIH19XCIgbmFtZT1cInZhbHVlXCIgaW5wdXREaXNwbGF5Tm9ybWFsaXplcj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2ICpuZ1N3aXRjaENhc2U9XCJTZXR0aW5nVHlwZS5Cb29sZWFuXCIgY2xhc3M9XCJ0b2dnbGVcIj5cbiAgICAgIDxsYWJlbCBjbGFzcz1cInN3aXRjaFwiPlxuICAgICAgICA8aW5wdXQgdHlwZT1cImNoZWNrYm94XCIgW2Zvcm1Db250cm9sXT1cInZhbHVlRm9ybUNvbnRyb2xcIiBuYW1lPVwidmFsdWVcIiAvPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInNsaWRlciByb3VuZFwiPjwvc3Bhbj5cbiAgICAgIDwvbGFiZWw+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2ICpuZ0lmPVwic2V0dGluZy5zZXR0aW5nVHlwZSA9PT0gU2V0dGluZ1R5cGUuQm9vbGVhblwiIGNsYXNzPVwic3BhY2VyXCI+PC9kaXY+XG5cbjwvZGl2PlxuIl19

package/esm2022/lib/setting-list/setting-list.component.mjs

@@ -158,10 +158,10 @@ export class SettingListComponent {
             config: this.settingValues.config
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingListComponent, deps: [{ token: i1.SettingListFormHelper }, { token: i2.MatSnackBar }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SettingListComponent, selector: "configcat-setting-list", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", dashboardBasePath: "dashboardBasePath", canDeleteSetting: "canDeleteSetting", onSave: "onSave", loadSettingValues: "loadSettingValues", loadSegments: "loadSegments", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { loadSucceeded: "loadSucceeded", deleteSettingRequested: "deleteSettingRequested", formValuesChanged: "formValuesChanged" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" *ngIf=\"!loading\">\n  <div class=\"wrapper\" *ngFor=\"let settingValueFromGroup of getSettingValueFormGroups(); let i = index\">\n    <setting [formGroup]=\"settingValueFromGroup\" [readOnly]=\"readOnly\" [canDeleteSetting]=\"canDeleteSetting\"\n      (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" [deleteSettingText]=\"deleteSettingText\"\n      [showEnvironmentName]=\"showEnvironmentName\" [segments]=\"segments\" [productId]=\"productId\" [configId]=\"configId\"\n      [environmentId]=\"environmentId\" [dashboardBasePath]=\"dashboardBasePath\">\n    </setting>\n  </div>\n\n  <div class=\"save\" *ngIf=\"!readOnly && !submitting && formGroup.dirty\">\n\n    <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [disabled]=\"submitting\">\n      <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n    </button>\n    <button type=\"button\" mat-stroked-button *ngIf=\"!showRevertQuestion\" (click)=\"showRevertQuestion = true\">\n      <mat-icon>history</mat-icon><span>Revert changes</span>\n    </button>\n    <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n      <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n        <span>Something went wrong and we could not save your settings. You can try again or <a\n            href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a></span>\n      </div>\n      <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n        <span>Oh no! A feature flag has invalid or missing data.</span>\n      </div>\n    </div>\n    <div *ngIf=\"showRevertQuestion\">\n      <span class=\"revert\">Revert to last saved state?</span>\n      <button type=\"button\" class=\"yes\" mat-stroked-button (click)=\"handleRevertYes()\">Yes</button>\n      <button type=\"button\" mat-stroked-button (click)=\"handleRevertCancel()\">No</button>\n    </div>\n  </div>\n</form>", styles: [".wrapper{background-color:#f3f3f3;border:1px solid rgba(0,0,0,.12);margin:1em 0}.show-hide a{cursor:pointer;font-size:.8rem}.save{position:sticky;bottom:0;min-height:38px;padding:.5rem .5rem .5rem 0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;z-index:1000}.save .save-button{animation:shadow-pulse 1s 3}.save>*{margin-right:.6em;margin-top:.3em;margin-bottom:.3em}.save .revert{margin:0 16px;font-size:14px}.save .yes{margin:0 5px}.error{background-color:#a32b2d;color:#fff;padding:5px;font-size:.9em}.error a{color:#fff;text-decoration:underline}@media (max-width: 700px){.save{padding:.5rem 0}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.SettingComponent, selector: "setting", inputs: ["dashboardBasePath", "productId", "environmentId", "configId", "formGroup", "readOnly", "canDeleteSetting", "deleteSettingText", "showEnvironmentName", "segments"], outputs: ["deleteSettingRequested"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingListComponent, deps: [{ token: i1.SettingListFormHelper }, { token: i2.MatSnackBar }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SettingListComponent, selector: "configcat-setting-list", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", dashboardBasePath: "dashboardBasePath", canDeleteSetting: "canDeleteSetting", onSave: "onSave", loadSettingValues: "loadSettingValues", loadSegments: "loadSegments", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { loadSucceeded: "loadSucceeded", deleteSettingRequested: "deleteSettingRequested", formValuesChanged: "formValuesChanged" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" *ngIf=\"!loading\">\n  <div class=\"wrapper\" *ngFor=\"let settingValueFromGroup of getSettingValueFormGroups(); let i = index\">\n    <setting [formGroup]=\"settingValueFromGroup\" [readOnly]=\"readOnly\" [canDeleteSetting]=\"canDeleteSetting\"\n      (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" [deleteSettingText]=\"deleteSettingText\"\n      [showEnvironmentName]=\"showEnvironmentName\" [segments]=\"segments\" [productId]=\"productId\" [configId]=\"configId\"\n      [environmentId]=\"environmentId\" [dashboardBasePath]=\"dashboardBasePath\">\n    </setting>\n  </div>\n\n  <div class=\"save\" *ngIf=\"!readOnly && !submitting && formGroup.dirty\">\n\n    <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [disabled]=\"submitting\">\n      <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n    </button>\n    <button type=\"button\" mat-stroked-button *ngIf=\"!showRevertQuestion\" (click)=\"showRevertQuestion = true\">\n      <mat-icon>history</mat-icon><span>Revert changes</span>\n    </button>\n    <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n      <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n        <span>Something went wrong and we could not save your settings. You can try again or <a\n            href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a></span>\n      </div>\n      <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n        <span>Oh no! A feature flag has invalid or missing data.</span>\n      </div>\n    </div>\n    <div *ngIf=\"showRevertQuestion\">\n      <span class=\"revert\">Revert to last saved state?</span>\n      <button type=\"button\" class=\"yes\" mat-stroked-button (click)=\"handleRevertYes()\">Yes</button>\n      <button type=\"button\" mat-stroked-button (click)=\"handleRevertCancel()\">No</button>\n    </div>\n  </div>\n</form>", styles: [".wrapper{background-color:#f3f3f3;border:1px solid rgba(0,0,0,.12);margin:1em 0}.show-hide a{cursor:pointer;font-size:.8rem}.save{position:sticky;bottom:0;min-height:38px;padding:.5rem .5rem .5rem 0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;z-index:1000}.save .save-button{animation:shadow-pulse 1s 3}.save>*{margin-right:.6em;margin-top:.3em;margin-bottom:.3em}.save .revert{margin:0 16px;font-size:14px}.save .yes{margin:0 5px}.error{background-color:#a32b2d;color:#fff;padding:5px;font-size:.9em}.error a{color:#fff;text-decoration:underline}@media (max-width: 700px){.save{padding:.5rem 0}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.SettingComponent, selector: "setting", inputs: ["dashboardBasePath", "productId", "environmentId", "configId", "formGroup", "readOnly", "canDeleteSetting", "deleteSettingText", "showEnvironmentName", "segments"], outputs: ["deleteSettingRequested"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SettingListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'configcat-setting-list', template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" *ngIf=\"!loading\">\n  <div class=\"wrapper\" *ngFor=\"let settingValueFromGroup of getSettingValueFormGroups(); let i = index\">\n    <setting [formGroup]=\"settingValueFromGroup\" [readOnly]=\"readOnly\" [canDeleteSetting]=\"canDeleteSetting\"\n      (deleteSettingRequested)=\"onDeleteSettingRequested($event)\" [deleteSettingText]=\"deleteSettingText\"\n      [showEnvironmentName]=\"showEnvironmentName\" [segments]=\"segments\" [productId]=\"productId\" [configId]=\"configId\"\n      [environmentId]=\"environmentId\" [dashboardBasePath]=\"dashboardBasePath\">\n    </setting>\n  </div>\n\n  <div class=\"save\" *ngIf=\"!readOnly && !submitting && formGroup.dirty\">\n\n    <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [disabled]=\"submitting\">\n      <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n    </button>\n    <button type=\"button\" mat-stroked-button *ngIf=\"!showRevertQuestion\" (click)=\"showRevertQuestion = true\">\n      <mat-icon>history</mat-icon><span>Revert changes</span>\n    </button>\n    <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n      <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n        <span>Something went wrong and we could not save your settings. You can try again or <a\n            href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact us.</a></span>\n      </div>\n      <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n        <span>Oh no! A feature flag has invalid or missing data.</span>\n      </div>\n    </div>\n    <div *ngIf=\"showRevertQuestion\">\n      <span class=\"revert\">Revert to last saved state?</span>\n      <button type=\"button\" class=\"yes\" mat-stroked-button (click)=\"handleRevertYes()\">Yes</button>\n      <button type=\"button\" mat-stroked-button (click)=\"handleRevertCancel()\">No</button>\n    </div>\n  </div>\n</form>", styles: [".wrapper{background-color:#f3f3f3;border:1px solid rgba(0,0,0,.12);margin:1em 0}.show-hide a{cursor:pointer;font-size:.8rem}.save{position:sticky;bottom:0;min-height:38px;padding:.5rem .5rem .5rem 0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;z-index:1000}.save .save-button{animation:shadow-pulse 1s 3}.save>*{margin-right:.6em;margin-top:.3em;margin-bottom:.3em}.save .revert{margin:0 16px;font-size:14px}.save .yes{margin:0 5px}.error{background-color:#a32b2d;color:#fff;padding:5px;font-size:.9em}.error a{color:#fff;text-decoration:underline}@media (max-width: 700px){.save{padding:.5rem 0}}\n"] }]
         }], ctorParameters: () => [{ type: i1.SettingListFormHelper }, { type: i2.MatSnackBar }, { type: i3.MatDialog }], propDecorators: { productId: [{

package/esm2022/lib/v2/feature-flag/date-time-picker/date-time-picker.component.mjs

@@ -85,8 +85,8 @@ export class DateTimePickerComponent {
     validate() {
         return this.formGroup.errors;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: { dateTooltip: "dateTooltip", timeTooltip: "timeTooltip" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: { dateTooltip: "dateTooltip", timeTooltip: "timeTooltip" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateTimePickerComponent),
@@ -100,7 +100,7 @@ export class DateTimePickerComponent {
             { provide: DateAdapter, useClass: AppDateAdapter }
         ], ngImport: i0, template: "<div class=\"outer\">\n    <div class=\"component date\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-icon-button\">\n            <input matInput [formControl]=\"formGroup.controls.dateValue\" [matDatepicker]=\"datepicker\"\n                [matTooltip]=\"dateTooltip\">\n            <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\n            <mat-datepicker #datepicker></mat-datepicker>\n            <mat-error *ngIf=\"formGroup.controls.dateValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.dateValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n    <div class=\"component\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"time\" [formControl]=\"formGroup.controls.timeValue\" [matTooltip]=\"timeTooltip\" />\n            <mat-error *ngIf=\"formGroup.controls.timeValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.timeValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</div>", styles: [".outer{display:flex;flex-wrap:wrap}.outer .component{width:140px;margin:2px 0}.outer .component.date{margin-right:8px}.outer .component mat-form-field{width:100%;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-date-time-picker', providers: [
                         {

package/esm2022/lib/v2/feature-flag/dependees-dialog/dependees-dialog.component.mjs

@@ -17,10 +17,10 @@ export class DependeesDialogComponent {
             this.data.productId, this.data.configId, this.data.environmentId, settingId]);
         return this.publicApiService.getDashboardBasePath() + this.router.serializeUrl(urlTree);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DependeesDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.Router }, { token: i2.PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: DependeesDialogComponent, selector: "app-dependees-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Prerequisite references</h1>\n<div mat-dialog-content>\n  <p>\n    <strong>{{data.name}}</strong> is the prerequisite of the following feature flags:\n  </p>\n  <ul *ngFor=\"let dependee of data.dependees\">\n    <li><a [href]=\"getDashboardUrl(dependee.settingId)\" rel=\"noopener noreferrer\" target=\"_blank\">{{dependee.name}}\n        ({{dependee.key}})</a></li>\n  </ul>\n</div>\n\n<div mat-dialog-actions>\n  <button type=\"button\" mat-stroked-button mat-dialog-close>Close</button>\n</div>", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DependeesDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.Router }, { token: i2.PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: DependeesDialogComponent, selector: "app-dependees-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Prerequisite references</h1>\n<div mat-dialog-content>\n  <p>\n    <strong>{{data.name}}</strong> is the prerequisite of the following feature flags:\n  </p>\n  <ul *ngFor=\"let dependee of data.dependees\">\n    <li><a [href]=\"getDashboardUrl(dependee.settingId)\" rel=\"noopener noreferrer\" target=\"_blank\">{{dependee.name}}\n        ({{dependee.key}})</a></li>\n  </ul>\n</div>\n\n<div mat-dialog-actions>\n  <button type=\"button\" mat-stroked-button mat-dialog-close>Close</button>\n</div>", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DependeesDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DependeesDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dependees-dialog', template: "<h1 mat-dialog-title>Prerequisite references</h1>\n<div mat-dialog-content>\n  <p>\n    <strong>{{data.name}}</strong> is the prerequisite of the following feature flags:\n  </p>\n  <ul *ngFor=\"let dependee of data.dependees\">\n    <li><a [href]=\"getDashboardUrl(dependee.settingId)\" rel=\"noopener noreferrer\" target=\"_blank\">{{dependee.name}}\n        ({{dependee.key}})</a></li>\n  </ul>\n</div>\n\n<div mat-dialog-actions>\n  <button type=\"button\" mat-stroked-button mat-dialog-close>Close</button>\n</div>" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{