ng-configcat-publicapi-ui 4.0.1 → 4.0.2

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

@@ -2248,6 +2248,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                     args: [MAT_DIALOG_DATA]
                 }] }] });
 
+class RerouteDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    yes() {
+        this.dialogRef.close('yes');
+    }
+    cancel() {
+        this.dialogRef.close('cancel');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RerouteDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: RerouteDialogComponent, selector: "app-reroute-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{data.title}}</h1>\n<div mat-dialog-content>\n  <div [innerHTML]=\"data.body\"></div>\n</div>\n<br>\n<div mat-dialog-actions>\n  <a href=\"{{data.yesButtonLink}}\" class=\"hidden-link\" target=\"_blank\" rel=\"noopener noreferrer\">\n    <button type=\"button\" style=\"margin-right: 10px;\" mat-flat-button\n      [color]=\"data.buttonColor ? data.buttonColor : 'primary'\" (click)=\"yes()\"\n      data-robot=\"dialogYes\">{{data.yesButtonLabel ? data.yesButtonLabel : 'Yes'}}</button>\n  </a>\n  <button type=\"button\" mat-stroked-button (click)=\"cancel()\" data-robot=\"dialogNo\"\n    *ngIf=\"!data.hideNoButton\">{{data.noButtonLabel ?\n    data.noButtonLabel : 'Cancel'}}</button>\n</div>", styles: [".hidden-link:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RerouteDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-reroute-dialog', template: "<h1 mat-dialog-title>{{data.title}}</h1>\n<div mat-dialog-content>\n  <div [innerHTML]=\"data.body\"></div>\n</div>\n<br>\n<div mat-dialog-actions>\n  <a href=\"{{data.yesButtonLink}}\" class=\"hidden-link\" target=\"_blank\" rel=\"noopener noreferrer\">\n    <button type=\"button\" style=\"margin-right: 10px;\" mat-flat-button\n      [color]=\"data.buttonColor ? data.buttonColor : 'primary'\" (click)=\"yes()\"\n      data-robot=\"dialogYes\">{{data.yesButtonLabel ? data.yesButtonLabel : 'Yes'}}</button>\n  </a>\n  <button type=\"button\" mat-stroked-button (click)=\"cancel()\" data-robot=\"dialogNo\"\n    *ngIf=\"!data.hideNoButton\">{{data.noButtonLabel ?\n    data.noButtonLabel : 'Cancel'}}</button>\n</div>", styles: [".hidden-link:focus{outline:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
 class InfoDialogComponent {
     constructor(dialogRef, data) {
         this.dialogRef = dialogRef;
@@ -4159,6 +4181,7 @@ class FeatureFlagComponent {
         this.environmentName = "";
         this.showEnvironmentName = false;
         this.deleteSettingText = 'Delete setting';
+        this.canDeleteSetting = false;
         this.addSegmentConditionRequestedWithoutSegments = new EventEmitter();
         this.expandedChanged = new EventEmitter();
         this.deleteSettingRequested = new EventEmitter();
@@ -4253,9 +4276,6 @@ class FeatureFlagComponent {
         }
         return '+ ' + count + ' rule' + (count > 1 ? 's' : '');
     }
-    openInConfigCat() {
-        window.open(this.getDashboardUrl(), '_blank');
-    }
     copyDirectLink() {
         try {
             this.clipboard.copy(this.getDashboardUrl());
@@ -4283,11 +4303,11 @@ class FeatureFlagComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagComponent, deps: [{ token: i1$1.MatDialog }, { token: MessagingService }, { token: FormGenerator }, { token: i1$2.Router }, { token: PublicApiService }, { token: i5$2.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: { formGroup: "formGroup", flagState: "flagState", segments: "segments", featureFlagLimitations: "featureFlagLimitations", hasOtherEnvironment: "hasOtherEnvironment", environmentName: "environmentName", showEnvironmentName: "showEnvironmentName", deleteSettingText: "deleteSettingText" }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons" }, ngImport: i0, template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\"\n                    [formGroup]=\"formGroup.controls.defaultValue\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <div mat-menu-item data-robot=\"history\" (click)=\"openInConfigCat()\">\n        <mat-icon>open_in_new</mat-icon>\n        <span>Open in ConfigCat</span>\n    </div>\n    <div mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <mat-divider></mat-divider>\n    <div mat-menu-item data-robot=\"deleteSetting\"\n        [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n        <mat-icon>delete_outline</mat-icon>\n        <span>{{deleteSettingText}}</span>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name{padding-top:4px;margin-right:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none;display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}}@media (max-width: 700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\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: 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: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$2.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "showVariationId", "featureFlagLimitations", "canManageSegments", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: { formGroup: "formGroup", flagState: "flagState", segments: "segments", featureFlagLimitations: "featureFlagLimitations", hasOtherEnvironment: "hasOtherEnvironment", environmentName: "environmentName", showEnvironmentName: "showEnvironmentName", deleteSettingText: "deleteSettingText", canDeleteSetting: "canDeleteSetting" }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons" }, ngImport: i0, template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\"\n                    [formGroup]=\"formGroup.controls.defaultValue\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <a href=\"{{getDashboardUrl()}}\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <div mat-menu-item data-robot=\"history\">\n            <mat-icon>open_in_new</mat-icon>\n            <span>Open in ConfigCat</span>\n        </div>\n    </a>\n    <div mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <div *ngIf=\"canDeleteSetting\">\n        <mat-divider></mat-divider>\n        <div mat-menu-item data-robot=\"deleteSetting\"\n            [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n            <mat-icon>delete_outline</mat-icon>\n            <span>{{deleteSettingText}}</span>\n        </div>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name{padding-top:4px;margin-right:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none;display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}}@media (max-width: 700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\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: 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: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$2.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "showVariationId", "featureFlagLimitations", "canManageSegments", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-feature-flag', template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\"\n                    [formGroup]=\"formGroup.controls.defaultValue\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <div mat-menu-item data-robot=\"history\" (click)=\"openInConfigCat()\">\n        <mat-icon>open_in_new</mat-icon>\n        <span>Open in ConfigCat</span>\n    </div>\n    <div mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <mat-divider></mat-divider>\n    <div mat-menu-item data-robot=\"deleteSetting\"\n        [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n        <mat-icon>delete_outline</mat-icon>\n        <span>{{deleteSettingText}}</span>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name{padding-top:4px;margin-right:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none;display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}}@media (max-width: 700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"] }]
+            args: [{ selector: 'app-feature-flag', template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\"\n                    [formGroup]=\"formGroup.controls.defaultValue\" [featureFlagLimitations]=\"featureFlagLimitations\"\n                    tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <a href=\"{{getDashboardUrl()}}\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <div mat-menu-item data-robot=\"history\">\n            <mat-icon>open_in_new</mat-icon>\n            <span>Open in ConfigCat</span>\n        </div>\n    </a>\n    <div mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <div *ngIf=\"canDeleteSetting\">\n        <mat-divider></mat-divider>\n        <div mat-menu-item data-robot=\"deleteSetting\"\n            [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n            <mat-icon>delete_outline</mat-icon>\n            <span>{{deleteSettingText}}</span>\n        </div>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name{padding-top:4px;margin-right:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none;display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}}@media (max-width: 700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: MessagingService }, { type: FormGenerator }, { type: i1$2.Router }, { type: PublicApiService }, { type: i5$2.Clipboard }], propDecorators: { formGroup: [{
                 type: Input
             }], flagState: [{
@@ -4304,6 +4324,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 type: Input
             }], deleteSettingText: [{
                 type: Input
+            }], canDeleteSetting: [{
+                type: Input
             }], addSegmentConditionRequestedWithoutSegments: [{
                 type: Output
             }], expandedChanged: [{
@@ -4532,33 +4554,23 @@ class FeatureFlagItemComponent extends BaseComponent {
         this.deleteSettingRequested.emit({ config: this.settingFormula.config, environment: this.settingFormula.environment, setting: setting.setting });
     }
     subscriptionLimitReachedCalled() {
-        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+        this.dialog.open(RerouteDialogComponent, {
             data: {
                 title: 'You have reached the limits of your plan',
                 body: ` Upgrade your plan or join our <a href="https://configcat.com/referrals" target="_blank" rel="noopener noreferrer">referral program</a> to increase your limits.`,
                 yesButtonLabel: `See plans`,
+                yesButtonLink: this.dashboardBasePath + "/organization/plans",
                 noButtonLabel: `Close`
             }
         });
-        dialogRef.afterClosed().subscribe(result => {
-            if (result === 'yes') {
-                const plansUrl = this.dashboardBasePath + "/organization/plans";
-                window.open(plansUrl, '_blank');
-            }
-        });
     }
     addSegmentConditionRequestedWithoutSegments() {
-        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+        this.dialog.open(RerouteDialogComponent, {
             data: {
                 title: 'There are no segments in this product yet.',
                 body: `Go ahead to the ConfiCat Dashboard and create your first user segment before adding it to a targeting rule.`,
                 yesButtonLabel: `Go to the dashboard`,
-            }
-        });
-        dialogRef.afterClosed().subscribe(result => {
-            if (result === 'yes') {
-                const segmentUrl = this.dashboardBasePath + "/product/" + this.productId + "/segments";
-                window.open(segmentUrl, '_blank');
+                yesButtonLink: this.dashboardBasePath + "/product/" + this.productId + "/segments"
             }
         });
     }
@@ -4604,11 +4616,11 @@ class FeatureFlagItemComponent extends BaseComponent {
         this.expandedStateChanged.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagItemComponent, deps: [{ token: FormGenerator }, { token: i1$1.MatDialog }, { token: i2$1.MatSnackBar }, { token: PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FeatureFlagItemComponent, selector: "configcat-feature-flag-item", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", settingId: "settingId", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</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\n                                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.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: i5.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: FeatureFlagComponent, selector: "app-feature-flag", inputs: ["formGroup", "flagState", "segments", "featureFlagLimitations", "hasOtherEnvironment", "environmentName", "showEnvironmentName", "deleteSettingText"], outputs: ["addSegmentConditionRequestedWithoutSegments", "expandedChanged", "deleteSettingRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FeatureFlagItemComponent, selector: "configcat-feature-flag-item", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", settingId: "settingId", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\" [canDeleteSetting]=\"canDeleteSetting\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</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\n                                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.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: i5.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: FeatureFlagComponent, selector: "app-feature-flag", inputs: ["formGroup", "flagState", "segments", "featureFlagLimitations", "hasOtherEnvironment", "environmentName", "showEnvironmentName", "deleteSettingText", "canDeleteSetting"], outputs: ["addSegmentConditionRequestedWithoutSegments", "expandedChanged", "deleteSettingRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FeatureFlagItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'configcat-feature-flag-item', template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</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\n                                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.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"] }]
+            args: [{ selector: 'configcat-feature-flag-item', template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\" [canDeleteSetting]=\"canDeleteSetting\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</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\n                                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.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"] }]
         }], ctorParameters: () => [{ type: FormGenerator }, { type: i1$1.MatDialog }, { type: i2$1.MatSnackBar }, { type: PublicApiService }], propDecorators: { productId: [{
                 type: Input
             }], environmentId: [{
@@ -4686,7 +4698,8 @@ class NgConfigCatPublicApiUIModule {
             AceEditorComponent,
             FeatureFlagItemComponent,
             DateTimePickerComponent,
-            DependeesDialogComponent], imports: [CommonModule,
+            DependeesDialogComponent,
+            RerouteDialogComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             BrowserAnimationsModule,
@@ -4799,7 +4812,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                         AceEditorComponent,
                         FeatureFlagItemComponent,
                         DateTimePickerComponent,
-                        DependeesDialogComponent
+                        DependeesDialogComponent,
+                        RerouteDialogComponent
                     ],
                     imports: [
                         CommonModule,