ng-configcat-publicapi-ui 5.6.6 → 5.6.7

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

@@ -2,7 +2,7 @@ import { OVERLAY_DEFAULT_CONFIG, Overlay } from '@angular/cdk/overlay';
 import { DatePipe, NgClass, NgTemplateOutlet, SlicePipe, KeyValuePipe } from '@angular/common';
 import { HttpErrorResponse, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, inject, Injectable, viewChild, DestroyRef, DOCUMENT, InjectionToken, HostListener, Directive, input, ElementRef, model, effect, output, forwardRef, signal, computed, viewChildren, linkedSignal, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, Injectable, DestroyRef, viewChild, SecurityContext, DOCUMENT, InjectionToken, HostListener, Directive, input, ElementRef, model, effect, output, forwardRef, signal, computed, viewChildren, linkedSignal, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
 import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
 import { MAT_DATEPICKER_SCROLL_STRATEGY, MatDatepicker, MatDatepickerToggle, MatDatepickerInput } from '@angular/material/datepicker';
@@ -20,6 +20,7 @@ import { MeService, Configuration, ProductsService, ConfigsService, Environments
 import * as i1 from '@angular/forms';
 import { FormArray, Validators, FormGroup, FormControl, FormBuilder, NonNullableFormBuilder, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { NativeDateAdapter, MatOption, DateAdapter, MatRipple, MatOptgroup } from '@angular/material/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import { MatIcon } from '@angular/material/icon';
 import { MatSnackBarRef, MAT_SNACK_BAR_DATA, MatSnackBarAction, MatSnackBarActions, MatSnackBarLabel, MatSnackBar } from '@angular/material/snack-bar';
 import { takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
@@ -77,7 +78,6 @@ class TooManyRequestInterceptor {
                 if (delayMs > 2000) {
                     return throwError(() => error);
                 }
-                console.log(`Retrying request after ${delayMs} ms due to 429 Too Many Requests.`);
                 return timer(delayMs);
             },
         }), catchError((error) => {
@@ -487,6 +487,12 @@ class ConfirmationDialogComponent {
     constructor() {
         this.dialogRef = inject(MatDialogRef);
         this.data = inject(MAT_DIALOG_DATA);
+        this.sanitizer = inject(DomSanitizer);
+        const { body } = this.data;
+        if (typeof body === "string")
+            this.bodyText = body;
+        else
+            this.bodyHtml = body.toSanitizedString(this.sanitizer);
     }
     yes() {
         this.dialogRef.close("yes");
@@ -495,17 +501,23 @@ class ConfirmationDialogComponent {
         this.dialogRef.close("cancel");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirmation-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<div mat-dialog-actions>\n  <button\n    type=\"button\"\n    mat-flat-button\n    data-robot=\"dialogYes\"\n    [color]=\"data.yesButtonColor ? data.yesButtonColor : 'primary'\"\n    (click)=\"yes()\">\n    {{ data.yesButtonLabel ? data.yesButtonLabel : \"Yes\" }}\n  </button>\n  @if (!data.hideCancelButton) {\n    <button type=\"button\" mat-stroked-button data-robot=\"dialogNo\" (click)=\"cancel()\">\n      {{ data.cancelButtonLabel ? data.cancelButtonLabel : \"Cancel\" }}\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirmation-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>\n  @if (bodyText) {\n    <div>{{ bodyText }}</div>\n  } @else {\n    <!-- eslint-disable-next-line @configcat/angular-eslint/no-innerhtml -->\n    <div [innerHTML]=\"bodyHtml\"></div>\n  }\n</div>\n<div mat-dialog-actions>\n  <button\n    type=\"button\"\n    mat-flat-button\n    data-robot=\"dialogYes\"\n    [color]=\"data.yesButtonColor ? data.yesButtonColor : 'primary'\"\n    (click)=\"yes()\">\n    {{ data.yesButtonLabel ? data.yesButtonLabel : \"Yes\" }}\n  </button>\n  @if (!data.hideCancelButton) {\n    <button type=\"button\" mat-stroked-button data-robot=\"dialogNo\" (click)=\"cancel()\">\n      {{ data.cancelButtonLabel ? data.cancelButtonLabel : \"Cancel\" }}\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-confirmation-dialog", changeDetection: ChangeDetectionStrategy.Eager, imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatDialogActions, MatButton], template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>\n  <div [innerHTML]=\"data.body\"></div>\n</div>\n<div mat-dialog-actions>\n  <button\n    type=\"button\"\n    mat-flat-button\n    data-robot=\"dialogYes\"\n    [color]=\"data.yesButtonColor ? data.yesButtonColor : 'primary'\"\n    (click)=\"yes()\">\n    {{ data.yesButtonLabel ? data.yesButtonLabel : \"Yes\" }}\n  </button>\n  @if (!data.hideCancelButton) {\n    <button type=\"button\" mat-stroked-button data-robot=\"dialogNo\" (click)=\"cancel()\">\n      {{ data.cancelButtonLabel ? data.cancelButtonLabel : \"Cancel\" }}\n    </button>\n  }\n</div>\n" }]
-        }] });
+            args: [{ selector: "app-confirmation-dialog", changeDetection: ChangeDetectionStrategy.Eager, imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatDialogActions, MatButton], template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>\n  @if (bodyText) {\n    <div>{{ bodyText }}</div>\n  } @else {\n    <!-- eslint-disable-next-line @configcat/angular-eslint/no-innerhtml -->\n    <div [innerHTML]=\"bodyHtml\"></div>\n  }\n</div>\n<div mat-dialog-actions>\n  <button\n    type=\"button\"\n    mat-flat-button\n    data-robot=\"dialogYes\"\n    [color]=\"data.yesButtonColor ? data.yesButtonColor : 'primary'\"\n    (click)=\"yes()\">\n    {{ data.yesButtonLabel ? data.yesButtonLabel : \"Yes\" }}\n  </button>\n  @if (!data.hideCancelButton) {\n    <button type=\"button\" mat-stroked-button data-robot=\"dialogNo\" (click)=\"cancel()\">\n      {{ data.cancelButtonLabel ? data.cancelButtonLabel : \"Cancel\" }}\n    </button>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [] });
 
 class RerouteDialogComponent {
     constructor() {
         this.dialogRef = inject(MatDialogRef);
         this.data = inject(MAT_DIALOG_DATA);
+        this.sanitizer = inject(DomSanitizer);
+        const { body } = this.data;
+        if (typeof body === "string")
+            this.bodyText = body;
+        else
+            this.bodyHtml = body.toSanitizedString(this.sanitizer);
     }
     yes() {
         this.dialogRef.close("yes");
@@ -514,20 +526,25 @@ class RerouteDialogComponent {
         this.dialogRef.close("cancel");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RerouteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: RerouteDialogComponent, isStandalone: true, 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 class=\"hidden-link\" target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"data.yesButtonLink\">\n    <button\n      type=\"button\"\n      style=\"margin-right: 10px\"\n      mat-flat-button\n      data-robot=\"dialogYes\"\n      [color]=\"data.buttonColor ? data.buttonColor : 'primary'\"\n      (click)=\"yes()\">\n      {{ data.yesButtonLabel ? data.yesButtonLabel : \"Yes\" }}\n    </button>\n  </a>\n  @if (!data.hideNoButton) {\n    <button type=\"button\" mat-stroked-button data-robot=\"dialogNo\" (click)=\"cancel()\">\n      {{ data.noButtonLabel ? data.noButtonLabel : \"Cancel\" }}\n    </button>\n  }\n</div>\n", styles: [".hidden-link:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: RerouteDialogComponent, isStandalone: true, selector: "app-reroute-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>\n  @if (bodyText) {\n    <div>{{ bodyText }}</div>\n  } @else {\n    <!-- eslint-disable-next-line @configcat/angular-eslint/no-innerhtml -->\n    <div [innerHTML]=\"bodyHtml\"></div>\n  }\n</div>\n<br />\n<div mat-dialog-actions>\n  <a class=\"hidden-link\" target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"data.yesButtonLink\">\n    <button\n      type=\"button\"\n      style=\"margin-right: 10px\"\n      mat-flat-button\n      data-robot=\"dialogYes\"\n      [color]=\"data.buttonColor ? data.buttonColor : 'primary'\"\n      (click)=\"yes()\">\n      {{ data.yesButtonLabel ? data.yesButtonLabel : \"Yes\" }}\n    </button>\n  </a>\n  @if (!data.hideNoButton) {\n    <button type=\"button\" mat-stroked-button data-robot=\"dialogNo\" (click)=\"cancel()\">\n      {{ data.noButtonLabel ? data.noButtonLabel : \"Cancel\" }}\n    </button>\n  }\n</div>\n", styles: [".hidden-link:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RerouteDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-reroute-dialog", changeDetection: ChangeDetectionStrategy.Eager, imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatDialogActions, MatButton], 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 class=\"hidden-link\" target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"data.yesButtonLink\">\n    <button\n      type=\"button\"\n      style=\"margin-right: 10px\"\n      mat-flat-button\n      data-robot=\"dialogYes\"\n      [color]=\"data.buttonColor ? data.buttonColor : 'primary'\"\n      (click)=\"yes()\">\n      {{ data.yesButtonLabel ? data.yesButtonLabel : \"Yes\" }}\n    </button>\n  </a>\n  @if (!data.hideNoButton) {\n    <button type=\"button\" mat-stroked-button data-robot=\"dialogNo\" (click)=\"cancel()\">\n      {{ data.noButtonLabel ? data.noButtonLabel : \"Cancel\" }}\n    </button>\n  }\n</div>\n", styles: [".hidden-link:focus{outline:none}\n"] }]
-        }] });
+            args: [{ selector: "app-reroute-dialog", changeDetection: ChangeDetectionStrategy.Eager, imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatDialogActions, MatButton], template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>\n  @if (bodyText) {\n    <div>{{ bodyText }}</div>\n  } @else {\n    <!-- eslint-disable-next-line @configcat/angular-eslint/no-innerhtml -->\n    <div [innerHTML]=\"bodyHtml\"></div>\n  }\n</div>\n<br />\n<div mat-dialog-actions>\n  <a class=\"hidden-link\" target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"data.yesButtonLink\">\n    <button\n      type=\"button\"\n      style=\"margin-right: 10px\"\n      mat-flat-button\n      data-robot=\"dialogYes\"\n      [color]=\"data.buttonColor ? data.buttonColor : 'primary'\"\n      (click)=\"yes()\">\n      {{ data.yesButtonLabel ? data.yesButtonLabel : \"Yes\" }}\n    </button>\n  </a>\n  @if (!data.hideNoButton) {\n    <button type=\"button\" mat-stroked-button data-robot=\"dialogNo\" (click)=\"cancel()\">\n      {{ data.noButtonLabel ? data.noButtonLabel : \"Cancel\" }}\n    </button>\n  }\n</div>\n", styles: [".hidden-link:focus{outline:none}\n"] }]
+        }], ctorParameters: () => [] });
 
 class InfoDialogComponent {
     constructor() {
         this.dialogRef = inject(MatDialogRef);
         this.data = inject(MAT_DIALOG_DATA);
-        const data = this.data;
-        if (data.iconName) {
-            this.iconCssClass = "icon-" + data.iconName.replace("_", "-");
+        this.sanitizer = inject(DomSanitizer);
+        const { body, iconName } = this.data;
+        if (typeof body === "string")
+            this.bodyText = body;
+        else
+            this.bodyHtml = body.toSanitizedString(this.sanitizer);
+        if (iconName) {
+            this.iconCssClass = "icon-" + iconName.replace("_", "-");
         }
     }
     ok() {
@@ -538,11 +555,11 @@ class InfoDialogComponent {
         this.dialogRef.close("nok");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InfoDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: InfoDialogComponent, isStandalone: true, selector: "app-info-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content [class.content-with-icon]=\"!!data.iconName\">\n  @if (!!data.iconName) {\n    <mat-icon class=\"icon\" [ngClass]=\"iconCssClass\" [style.color]=\"data.iconColor\">{{ data.iconName }}</mat-icon>\n  }\n  <div [innerHTML]=\"data.body\"></div>\n</div>\n<div mat-dialog-actions>\n  <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"ok()\">{{ data.primaryButtonLabel ?? \"OK\" }}</button>\n  @if (data.secondaryButtonLabel) {\n    <button type=\"button\" mat-stroked-button (click)=\"secondaryButtonAction()\">{{ data.secondaryButtonLabel }}</button>\n  }\n</div>\n", styles: [".content-with-icon{display:flex;align-items:center}.content-with-icon .icon{font-size:3rem;flex-shrink:0;margin-right:.5rem}.content-with-icon .icon.mat-icon{width:auto;height:auto}.content-with-icon .icon-error{color:#d24c41}.content-with-icon .icon-warning{color:orange}.content-with-icon .icon-info{color:#1c86f8}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: InfoDialogComponent, isStandalone: true, selector: "app-info-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content [class.content-with-icon]=\"!!data.iconName\">\n  @if (!!data.iconName) {\n    <mat-icon class=\"icon\" [ngClass]=\"iconCssClass\" [style.color]=\"data.iconColor\">{{ data.iconName }}</mat-icon>\n  }\n  @if (bodyText) {\n    <div>{{ bodyText }}</div>\n  } @else {\n    <!-- eslint-disable-next-line @configcat/angular-eslint/no-innerhtml -->\n    <div [innerHTML]=\"bodyHtml\"></div>\n  }\n</div>\n<div mat-dialog-actions>\n  <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"ok()\">{{ data.primaryButtonLabel ?? \"OK\" }}</button>\n  @if (data.secondaryButtonLabel) {\n    <button type=\"button\" mat-stroked-button (click)=\"secondaryButtonAction()\">{{ data.secondaryButtonLabel }}</button>\n  }\n</div>\n", styles: [".content-with-icon{display:flex;align-items:center}.content-with-icon .icon{font-size:3rem;flex-shrink:0;margin-right:.5rem}.content-with-icon .icon.mat-icon{width:auto;height:auto}.content-with-icon .icon-error{color:#d24c41}.content-with-icon .icon-warning{color:orange}.content-with-icon .icon-info{color:#1c86f8}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InfoDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-info-dialog", changeDetection: ChangeDetectionStrategy.Eager, imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatIcon, MatDialogActions, MatButton, NgClass], template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content [class.content-with-icon]=\"!!data.iconName\">\n  @if (!!data.iconName) {\n    <mat-icon class=\"icon\" [ngClass]=\"iconCssClass\" [style.color]=\"data.iconColor\">{{ data.iconName }}</mat-icon>\n  }\n  <div [innerHTML]=\"data.body\"></div>\n</div>\n<div mat-dialog-actions>\n  <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"ok()\">{{ data.primaryButtonLabel ?? \"OK\" }}</button>\n  @if (data.secondaryButtonLabel) {\n    <button type=\"button\" mat-stroked-button (click)=\"secondaryButtonAction()\">{{ data.secondaryButtonLabel }}</button>\n  }\n</div>\n", styles: [".content-with-icon{display:flex;align-items:center}.content-with-icon .icon{font-size:3rem;flex-shrink:0;margin-right:.5rem}.content-with-icon .icon.mat-icon{width:auto;height:auto}.content-with-icon .icon-error{color:#d24c41}.content-with-icon .icon-warning{color:orange}.content-with-icon .icon-info{color:#1c86f8}\n"] }]
+            args: [{ selector: "app-info-dialog", changeDetection: ChangeDetectionStrategy.Eager, imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatIcon, MatDialogActions, MatButton, NgClass], template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content [class.content-with-icon]=\"!!data.iconName\">\n  @if (!!data.iconName) {\n    <mat-icon class=\"icon\" [ngClass]=\"iconCssClass\" [style.color]=\"data.iconColor\">{{ data.iconName }}</mat-icon>\n  }\n  @if (bodyText) {\n    <div>{{ bodyText }}</div>\n  } @else {\n    <!-- eslint-disable-next-line @configcat/angular-eslint/no-innerhtml -->\n    <div [innerHTML]=\"bodyHtml\"></div>\n  }\n</div>\n<div mat-dialog-actions>\n  <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"ok()\">{{ data.primaryButtonLabel ?? \"OK\" }}</button>\n  @if (data.secondaryButtonLabel) {\n    <button type=\"button\" mat-stroked-button (click)=\"secondaryButtonAction()\">{{ data.secondaryButtonLabel }}</button>\n  }\n</div>\n", styles: [".content-with-icon{display:flex;align-items:center}.content-with-icon .icon{font-size:3rem;flex-shrink:0;margin-right:.5rem}.content-with-icon .icon.mat-icon{width:auto;height:auto}.content-with-icon .icon-error{color:#d24c41}.content-with-icon .icon-warning{color:orange}.content-with-icon .icon-info{color:#1c86f8}\n"] }]
         }], ctorParameters: () => [] });
 
 var NotificationSnackColor;
@@ -556,10 +573,16 @@ class NotificationSnackComponent {
     constructor() {
         this.snackBarRef = inject(MatSnackBarRef);
         this.data = inject(MAT_SNACK_BAR_DATA);
+        this.sanitizer = inject(DomSanitizer);
+        this.destroyRef = inject(DestroyRef);
         this.NotificationSnackColor = NotificationSnackColor;
         this.progressBar = viewChild.required("progressBar", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "progressBar" }] : /* istanbul ignore next */ []));
-        this.destroyRef = inject(DestroyRef);
+        const { message } = this.data;
+        if (typeof message === "string")
+            this.messageText = message;
+        else
+            this.messageHtml = message?.toSanitizedString(this.sanitizer);
         this.snackBarRef
             .afterOpened()
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -583,41 +606,142 @@ class NotificationSnackComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NotificationSnackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: NotificationSnackComponent, isStandalone: true, selector: "app-notification-snack", viewQueries: [{ propertyName: "progressBar", first: true, predicate: ["progressBar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"snack-container\"\n  [class.green]=\"data.color === NotificationSnackColor.Green\"\n  [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n  [class.red]=\"data.color === NotificationSnackColor.Red\"\n  [class.blue]=\"data.color === NotificationSnackColor.Blue\">\n  <div\n    class=\"content\"\n    matSnackBarLabel\n    [class.error]=\"data.color === NotificationSnackColor.Red\"\n    [class.warn]=\"data.color === NotificationSnackColor.Yellow\"\n    [class.success]=\"data.color === NotificationSnackColor.Green\"\n    [class.info]=\"data.color === NotificationSnackColor.Blue\">\n    <div [innerHTML]=\"data.message\"></div>\n  </div>\n\n  <span matSnackBarActions>\n    <button\n      type=\"button\"\n      class=\"dismiss\"\n      mat-icon-button\n      matSnackBarAction\n      [class.green]=\"data.color === NotificationSnackColor.Green\"\n      [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n      [class.red]=\"data.color === NotificationSnackColor.Red\"\n      [class.blue]=\"data.color === NotificationSnackColor.Blue\"\n      (click)=\"snackBarRef.dismissWithAction()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </span>\n\n  <div class=\"progress-container\">\n    <div\n      #progressBar\n      class=\"progress-bar\"\n      [class.green]=\"data.color === NotificationSnackColor.Green\"\n      [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n      [class.red]=\"data.color === NotificationSnackColor.Red\"\n      [class.blue]=\"data.color === NotificationSnackColor.Blue\"></div>\n  </div>\n</div>\n", styles: [".snack-container{display:flex;border-radius:4px}.snack-container .content{display:flex;align-items:center;color:var(--notification-font-color)}.snack-container .content.error:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--error-icon-content);color:var(--notification-error-icon-color);margin-right:12px}.snack-container .content.warn:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--warn-icon-content);color:var(--notification-warn-icon-color);margin-right:12px}.snack-container .content.success:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--success-icon-content);color:var(--notification-success-icon-color);margin-right:12px}.snack-container .content.info:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--notification-info-icon-color);margin-right:12px}.snack-container.green{background-color:var(--notification-success-background-color)}.snack-container.red{background-color:var(--notification-error-background-color)}.snack-container.yellow{background-color:var(--notification-warn-background-color)}.snack-container.blue{background-color:var(--notification-info-background-color)}.snack-container .dismiss{margin-right:4px}.snack-container .dismiss.green{color:var(--notification-success-icon-color)}.snack-container .dismiss.red{color:var(--notification-error-icon-color)}.snack-container .dismiss.yellow{color:var(--notification-warn-icon-color)}.snack-container .dismiss.blue{color:var(--notification-info-icon-color)}.snack-container .dismiss mat-icon{font-size:20px;width:20px;height:20px}.snack-container .progress-container{width:100%;height:3px;position:absolute;left:0;bottom:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;overflow:hidden}.snack-container .progress-container .progress-bar{opacity:.6;width:100%;height:100%;transition:width .5s;transition-timing-function:linear}.snack-container .progress-container .progress-bar.green{background-color:var(--notification-success-icon-color)}.snack-container .progress-container .progress-bar.red{background-color:var(--notification-error-icon-color)}.snack-container .progress-container .progress-bar.yellow{background-color:var(--notification-warn-icon-color)}.snack-container .progress-container .progress-bar.blue{background-color:var(--notification-info-icon-color)}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSnackBarAction, selector: "[matSnackBarAction]" }, { kind: "directive", type: MatSnackBarActions, selector: "[matSnackBarActions]" }, { kind: "directive", type: MatSnackBarLabel, selector: "[matSnackBarLabel]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NotificationSnackComponent, isStandalone: true, selector: "app-notification-snack", viewQueries: [{ propertyName: "progressBar", first: true, predicate: ["progressBar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"snack-container\"\n  [class.green]=\"data.color === NotificationSnackColor.Green\"\n  [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n  [class.red]=\"data.color === NotificationSnackColor.Red\"\n  [class.blue]=\"data.color === NotificationSnackColor.Blue\">\n  <div\n    class=\"content\"\n    matSnackBarLabel\n    [class.error]=\"data.color === NotificationSnackColor.Red\"\n    [class.warn]=\"data.color === NotificationSnackColor.Yellow\"\n    [class.success]=\"data.color === NotificationSnackColor.Green\"\n    [class.info]=\"data.color === NotificationSnackColor.Blue\">\n    @if (messageText) {\n      <div>{{ messageText }}</div>\n    } @else {\n      <!-- eslint-disable-next-line @configcat/angular-eslint/no-innerhtml -->\n      <div [innerHTML]=\"messageHtml\"></div>\n    }\n  </div>\n\n  <span matSnackBarActions>\n    <button\n      type=\"button\"\n      class=\"dismiss\"\n      mat-icon-button\n      matSnackBarAction\n      [class.green]=\"data.color === NotificationSnackColor.Green\"\n      [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n      [class.red]=\"data.color === NotificationSnackColor.Red\"\n      [class.blue]=\"data.color === NotificationSnackColor.Blue\"\n      (click)=\"snackBarRef.dismissWithAction()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </span>\n\n  <div class=\"progress-container\">\n    <div\n      #progressBar\n      class=\"progress-bar\"\n      [class.green]=\"data.color === NotificationSnackColor.Green\"\n      [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n      [class.red]=\"data.color === NotificationSnackColor.Red\"\n      [class.blue]=\"data.color === NotificationSnackColor.Blue\"></div>\n  </div>\n</div>\n", styles: [".snack-container{display:flex;border-radius:4px}.snack-container .content{display:flex;align-items:center;color:var(--notification-font-color)}.snack-container .content.error:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--error-icon-content);color:var(--notification-error-icon-color);margin-right:12px}.snack-container .content.warn:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--warn-icon-content);color:var(--notification-warn-icon-color);margin-right:12px}.snack-container .content.success:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--success-icon-content);color:var(--notification-success-icon-color);margin-right:12px}.snack-container .content.info:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--notification-info-icon-color);margin-right:12px}.snack-container.green{background-color:var(--notification-success-background-color)}.snack-container.red{background-color:var(--notification-error-background-color)}.snack-container.yellow{background-color:var(--notification-warn-background-color)}.snack-container.blue{background-color:var(--notification-info-background-color)}.snack-container .dismiss{margin-right:4px}.snack-container .dismiss.green{color:var(--notification-success-icon-color)}.snack-container .dismiss.red{color:var(--notification-error-icon-color)}.snack-container .dismiss.yellow{color:var(--notification-warn-icon-color)}.snack-container .dismiss.blue{color:var(--notification-info-icon-color)}.snack-container .dismiss mat-icon{font-size:20px;width:20px;height:20px}.snack-container .progress-container{width:100%;height:3px;position:absolute;left:0;bottom:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;overflow:hidden}.snack-container .progress-container .progress-bar{opacity:.6;width:100%;height:100%;transition:width .5s;transition-timing-function:linear}.snack-container .progress-container .progress-bar.green{background-color:var(--notification-success-icon-color)}.snack-container .progress-container .progress-bar.red{background-color:var(--notification-error-icon-color)}.snack-container .progress-container .progress-bar.yellow{background-color:var(--notification-warn-icon-color)}.snack-container .progress-container .progress-bar.blue{background-color:var(--notification-info-icon-color)}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSnackBarAction, selector: "[matSnackBarAction]" }, { kind: "directive", type: MatSnackBarActions, selector: "[matSnackBarActions]" }, { kind: "directive", type: MatSnackBarLabel, selector: "[matSnackBarLabel]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NotificationSnackComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-notification-snack", changeDetection: ChangeDetectionStrategy.Eager, imports: [MatIconButton, MatSnackBarAction, MatSnackBarActions, MatSnackBarLabel, MatIcon], template: "<div\n  class=\"snack-container\"\n  [class.green]=\"data.color === NotificationSnackColor.Green\"\n  [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n  [class.red]=\"data.color === NotificationSnackColor.Red\"\n  [class.blue]=\"data.color === NotificationSnackColor.Blue\">\n  <div\n    class=\"content\"\n    matSnackBarLabel\n    [class.error]=\"data.color === NotificationSnackColor.Red\"\n    [class.warn]=\"data.color === NotificationSnackColor.Yellow\"\n    [class.success]=\"data.color === NotificationSnackColor.Green\"\n    [class.info]=\"data.color === NotificationSnackColor.Blue\">\n    <div [innerHTML]=\"data.message\"></div>\n  </div>\n\n  <span matSnackBarActions>\n    <button\n      type=\"button\"\n      class=\"dismiss\"\n      mat-icon-button\n      matSnackBarAction\n      [class.green]=\"data.color === NotificationSnackColor.Green\"\n      [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n      [class.red]=\"data.color === NotificationSnackColor.Red\"\n      [class.blue]=\"data.color === NotificationSnackColor.Blue\"\n      (click)=\"snackBarRef.dismissWithAction()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </span>\n\n  <div class=\"progress-container\">\n    <div\n      #progressBar\n      class=\"progress-bar\"\n      [class.green]=\"data.color === NotificationSnackColor.Green\"\n      [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n      [class.red]=\"data.color === NotificationSnackColor.Red\"\n      [class.blue]=\"data.color === NotificationSnackColor.Blue\"></div>\n  </div>\n</div>\n", styles: [".snack-container{display:flex;border-radius:4px}.snack-container .content{display:flex;align-items:center;color:var(--notification-font-color)}.snack-container .content.error:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--error-icon-content);color:var(--notification-error-icon-color);margin-right:12px}.snack-container .content.warn:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--warn-icon-content);color:var(--notification-warn-icon-color);margin-right:12px}.snack-container .content.success:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--success-icon-content);color:var(--notification-success-icon-color);margin-right:12px}.snack-container .content.info:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--notification-info-icon-color);margin-right:12px}.snack-container.green{background-color:var(--notification-success-background-color)}.snack-container.red{background-color:var(--notification-error-background-color)}.snack-container.yellow{background-color:var(--notification-warn-background-color)}.snack-container.blue{background-color:var(--notification-info-background-color)}.snack-container .dismiss{margin-right:4px}.snack-container .dismiss.green{color:var(--notification-success-icon-color)}.snack-container .dismiss.red{color:var(--notification-error-icon-color)}.snack-container .dismiss.yellow{color:var(--notification-warn-icon-color)}.snack-container .dismiss.blue{color:var(--notification-info-icon-color)}.snack-container .dismiss mat-icon{font-size:20px;width:20px;height:20px}.snack-container .progress-container{width:100%;height:3px;position:absolute;left:0;bottom:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;overflow:hidden}.snack-container .progress-container .progress-bar{opacity:.6;width:100%;height:100%;transition:width .5s;transition-timing-function:linear}.snack-container .progress-container .progress-bar.green{background-color:var(--notification-success-icon-color)}.snack-container .progress-container .progress-bar.red{background-color:var(--notification-error-icon-color)}.snack-container .progress-container .progress-bar.yellow{background-color:var(--notification-warn-icon-color)}.snack-container .progress-container .progress-bar.blue{background-color:var(--notification-info-icon-color)}\n"] }]
+            args: [{ selector: "app-notification-snack", changeDetection: ChangeDetectionStrategy.Eager, imports: [MatIconButton, MatSnackBarAction, MatSnackBarActions, MatSnackBarLabel, MatIcon], template: "<div\n  class=\"snack-container\"\n  [class.green]=\"data.color === NotificationSnackColor.Green\"\n  [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n  [class.red]=\"data.color === NotificationSnackColor.Red\"\n  [class.blue]=\"data.color === NotificationSnackColor.Blue\">\n  <div\n    class=\"content\"\n    matSnackBarLabel\n    [class.error]=\"data.color === NotificationSnackColor.Red\"\n    [class.warn]=\"data.color === NotificationSnackColor.Yellow\"\n    [class.success]=\"data.color === NotificationSnackColor.Green\"\n    [class.info]=\"data.color === NotificationSnackColor.Blue\">\n    @if (messageText) {\n      <div>{{ messageText }}</div>\n    } @else {\n      <!-- eslint-disable-next-line @configcat/angular-eslint/no-innerhtml -->\n      <div [innerHTML]=\"messageHtml\"></div>\n    }\n  </div>\n\n  <span matSnackBarActions>\n    <button\n      type=\"button\"\n      class=\"dismiss\"\n      mat-icon-button\n      matSnackBarAction\n      [class.green]=\"data.color === NotificationSnackColor.Green\"\n      [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n      [class.red]=\"data.color === NotificationSnackColor.Red\"\n      [class.blue]=\"data.color === NotificationSnackColor.Blue\"\n      (click)=\"snackBarRef.dismissWithAction()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </span>\n\n  <div class=\"progress-container\">\n    <div\n      #progressBar\n      class=\"progress-bar\"\n      [class.green]=\"data.color === NotificationSnackColor.Green\"\n      [class.yellow]=\"data.color === NotificationSnackColor.Yellow\"\n      [class.red]=\"data.color === NotificationSnackColor.Red\"\n      [class.blue]=\"data.color === NotificationSnackColor.Blue\"></div>\n  </div>\n</div>\n", styles: [".snack-container{display:flex;border-radius:4px}.snack-container .content{display:flex;align-items:center;color:var(--notification-font-color)}.snack-container .content.error:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--error-icon-content);color:var(--notification-error-icon-color);margin-right:12px}.snack-container .content.warn:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--warn-icon-content);color:var(--notification-warn-icon-color);margin-right:12px}.snack-container .content.success:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--success-icon-content);color:var(--notification-success-icon-color);margin-right:12px}.snack-container .content.info:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--notification-info-icon-color);margin-right:12px}.snack-container.green{background-color:var(--notification-success-background-color)}.snack-container.red{background-color:var(--notification-error-background-color)}.snack-container.yellow{background-color:var(--notification-warn-background-color)}.snack-container.blue{background-color:var(--notification-info-background-color)}.snack-container .dismiss{margin-right:4px}.snack-container .dismiss.green{color:var(--notification-success-icon-color)}.snack-container .dismiss.red{color:var(--notification-error-icon-color)}.snack-container .dismiss.yellow{color:var(--notification-warn-icon-color)}.snack-container .dismiss.blue{color:var(--notification-info-icon-color)}.snack-container .dismiss mat-icon{font-size:20px;width:20px;height:20px}.snack-container .progress-container{width:100%;height:3px;position:absolute;left:0;bottom:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;overflow:hidden}.snack-container .progress-container .progress-bar{opacity:.6;width:100%;height:100%;transition:width .5s;transition-timing-function:linear}.snack-container .progress-container .progress-bar.green{background-color:var(--notification-success-icon-color)}.snack-container .progress-container .progress-bar.red{background-color:var(--notification-error-icon-color)}.snack-container .progress-container .progress-bar.yellow{background-color:var(--notification-warn-icon-color)}.snack-container .progress-container .progress-bar.blue{background-color:var(--notification-info-icon-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { progressBar: [{ type: i0.ViewChild, args: ["progressBar", { isSignal: true }] }] } });
 
+/**
+ * A utility class that renders HTML strings safely by automatically escaping dynamic values while preserving raw HTML
+ * in literal segments.
+ * @remarks Not intended for direct instantiation. Use tagged templates with the `safeHtml` tag function or the
+ * `SafeHtmlStringBuilder` class.
+ */
+class SafeHtmlString {
+    /**
+     * Creates a `SafeHtmlString` instance from the specified HTML string so it will not be escaped but will be rendered
+     * directly as HTML.
+     * @remarks USE THIS WITH CAUTION, and only when absolutely necessary!
+     */
+    static raw(html) {
+        return new SafeHtmlString([html], []);
+    }
+    static join(items, rawSeparator = "") {
+        const builder = new SafeHtmlStringBuilder();
+        if (items.length > 0) {
+            builder.add(items[0]);
+            if (items.length > 1) {
+                const separator = SafeHtmlString.raw(rawSeparator);
+                for (let index = 1; index < items.length; index++) {
+                    builder.add(separator);
+                    builder.add(items[index]);
+                }
+            }
+        }
+        return builder.toSafeHtmlString();
+    }
+    constructor(literals, values) {
+        this.literals = literals;
+        this.values = values;
+    }
+    toSanitizedString(sanitizer) {
+        return sanitizer.sanitize(SecurityContext.HTML, this.toString());
+    }
+    toString() {
+        let s = "";
+        const { literals, values } = this;
+        let i = 0;
+        for (; i < literals.length - 1; i++) {
+            s += literals[i];
+            const value = values[i];
+            s += value instanceof SafeHtmlString ? value.toString() : escapeHtml(String(value));
+        }
+        s += literals[i];
+        return s;
+    }
+}
+/** A utility class for building a `SafeHtmlString` instance across multiple steps. */
+class SafeHtmlStringBuilder {
+    constructor() {
+        this.literals = [""];
+        this.values = [];
+    }
+    add(html) {
+        this.literals[this.literals.length - 1] += html["literals"][0];
+        this.literals.push(...html["literals"].slice(1));
+        this.values.push(...html["values"]);
+        return this;
+    }
+    toSafeHtmlString() { return new SafeHtmlString(this.literals, this.values); }
+}
+/** A tag function for creating a `SafeHtmlString` instance in a foolproof way. */
+function safeHtml(literals, ...values) {
+    return new SafeHtmlString(literals, values);
+}
+function escapeHtml(unsafe) {
+    return unsafe.replace(/[&<>"']/g, m => {
+        switch (m) {
+            case "&": return "&amp;";
+            case "<": return "&lt;";
+            case ">": return "&gt;";
+            case '"': return "&quot;";
+            case "'": return "&#039;";
+            default: throw Error("Unexpected match.");
+        }
+    });
+}
+
 class MessagingService {
     constructor() {
         this.snackBar = inject(MatSnackBar);
     }
-    showErrorSnack(message = "Something went wrong.", durationMs = 60000) {
+    /** @param message Either a plain `string` that will be fully HTML escaped or a `SafeHtmlString` whose dynamic values will be HTML escaped. */
+    showErrorSnack(message = "Something went wrong.", durationMs = 60000, prologue = "Ooops.", epilogue = "Please try again or contact us.") {
+        if (prologue || epilogue) {
+            if (typeof message === "string") {
+                message = `${prologue} ${message} ${epilogue}`;
+            }
+            else {
+                message = SafeHtmlString.join([safeHtml `${prologue}`, message, safeHtml `${epilogue}`], " ");
+            }
+        }
         this.snackBar.openFromComponent(NotificationSnackComponent, {
             duration: durationMs,
             data: {
                 color: NotificationSnackColor.Red,
-                message: `Ooops. ${message} Please try again or contact us.`,
+                message,
             },
         });
     }
+    /** @param message Either a plain `string` that will be fully HTML escaped or a `SafeHtmlString` whose dynamic values will be HTML escaped. */
     showSuccessSnack(message = "Success.", durationMs = 2500) {
         this.snackBar.openFromComponent(NotificationSnackComponent, {
             duration: durationMs,
             data: {
                 color: NotificationSnackColor.Green,
-                message: message,
+                message,
             },
         });
     }
-    showWarningSnack(message = "Success.", durationMs = 5000) {
+    /** @param message Either a plain `string` that will be fully HTML escaped or a `SafeHtmlString` whose dynamic values will be HTML escaped. */
+    showWarningSnack(message, durationMs = 5000) {
         this.snackBar.openFromComponent(NotificationSnackComponent, {
             duration: durationMs,
             data: {
                 color: NotificationSnackColor.Yellow,
-                message: message,
+                message,
+            },
+        });
+    }
+    /** @param message Either a plain `string` that will be fully HTML escaped or a `SafeHtmlString` whose dynamic values will be HTML escaped. */
+    showInfoSnack(message, durationMs = 20000) {
+        this.snackBar.openFromComponent(NotificationSnackComponent, {
+            duration: durationMs,
+            data: {
+                color: NotificationSnackColor.Blue,
+                message,
             },
         });
     }
@@ -893,8 +1017,8 @@ function generatePercentageOptionFormGroup(model, settingType, predefinedVariati
         percentage: new FormControl({ value: model.percentage, disabled: readOnly }, {
             nonNullable: true,
             validators: [
-                validateNumberNan,
                 Validators.required,
+                validateNumberNan,
                 Validators.min(0),
                 Validators.max(100),
                 Validators.pattern(percentageRegex),
@@ -1017,8 +1141,8 @@ function generateComparisonValueFormGroup(value, comparator, readOnly, featureFl
                 doubleValue: new FormControl({ value: value.doubleValue ?? 0, disabled: readOnly }, {
                     nonNullable: true,
                     validators: [
-                        validateNumberNan,
                         Validators.required,
+                        validateNumberNan,
                         Validators.min(-Number.MAX_VALUE),
                         Validators.max(Number.MAX_VALUE),
                     ],
@@ -1179,16 +1303,16 @@ function getValidatorsForSettingType(settingType, featureFlagLimitations, isJson
     switch (settingType) {
         case SettingType.Int:
             return [
-                validateNumberNan,
                 Validators.required,
+                validateNumberNan,
                 Validators.min(-2147483648),
                 Validators.max(2147483647),
                 Validators.pattern(wholeNumberRegex),
             ];
         case SettingType.Double:
             return [
-                validateNumberNan,
                 Validators.required,
+                validateNumberNan,
                 Validators.min(-Number.MAX_VALUE),
                 Validators.max(Number.MAX_VALUE),
             ];
@@ -1378,6 +1502,7 @@ class SettingListFormHelper {
                 nonNullable: true,
                 validators: [
                     Validators.required,
+                    validateNumberNan,
                     Validators.min(0),
                     Validators.max(100),
                     Validators.pattern(percentageRegex),
@@ -1397,6 +1522,7 @@ class SettingListFormHelper {
                 nonNullable: true,
                 validators: [
                     Validators.required,
+                    validateNumberNan,
                     Validators.min(0),
                     Validators.max(100),
                     Validators.pattern(percentageRegex),
@@ -1437,6 +1563,7 @@ class SettingListFormHelper {
             case SettingType.Int:
                 return [
                     Validators.required,
+                    validateNumberNan,
                     Validators.min(-2147483648),
                     Validators.max(2147483647),
                     Validators.pattern(wholeNumberRegex),
@@ -2569,7 +2696,8 @@ class SettingListComponent {
         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.',
+                body: safeHtml `\
+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",
@@ -3373,17 +3501,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                     ], template: "<h1 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">\n  Concurrent update detected\n</h1>\n<div mat-dialog-content>\n  <p>Somebody updated the feature flags & settings while you were editing them.</p>\n  <ul>\n    <li>\n      To discard your local changes and reload the updated values, click\n      <strong>Discard my changes & reload</strong>\n    </li>\n    <li>\n      To save you local values and overwrite the remote changes, click\n      <strong>Save anyway</strong>\n    </li>\n  </ul>\n  <p>\n    For more info about the changes check the\n    <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"openHistory()\" [mat-dialog-close]>audit logs</a>\n    in a new tab.\n  </p>\n</div>\n<div mat-dialog-actions>\n  <button type=\"button\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\" (click)=\"discard()\">\n    Discard local changes & reload\n  </button>\n  <button type=\"button\" mat-stroked-button (click)=\"save()\">Save anyway</button>\n</div>\n" }]
         }] });
 
-class HtmlEscaper {
-    static escapeHtml(unsafe) {
-        return unsafe
-            .replace(/&/g, "&amp;")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;")
-            .replace(/"/g, "&quot;")
-            .replace(/'/g, "&#039;");
-    }
-}
-
 class BoxComponent {
     constructor() {
         this.type = input.required(/* @ts-ignore */
@@ -3669,9 +3786,10 @@ class CreateChangeRequestDialogComponent {
                         width: "450px",
                         data: {
                             title: "Cannot create change request",
-                            body: "Circular dependency detected between the following feature flags:<p>"
-                                + HtmlEscaper.escapeHtml(errorMessage)
-                                + "</p>Please <strong>eliminate the circular dependency</strong> before creating your change request.",
+                            body: safeHtml `\
+Circular dependency detected between the following feature flags:
+<p>${errorMessage}</p>
+Please <strong>eliminate the circular dependency</strong> before creating your change request.`,
                             yesButtonLabel: "I understand",
                             hideCancelButton: true,
                         },
@@ -3837,13 +3955,13 @@ class SaveAndPublishDialogComponent {
         this.dialogRef.close({ button: "cancel", reason: null });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SaveAndPublishDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SaveAndPublishDialogComponent, isStandalone: true, selector: "app-save-and-publish-dialog", viewQueries: [{ propertyName: "reasonInput", first: true, predicate: ["reason"], descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSaveButton()\">\n  <h1 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">\n    @if (data.bypassApproval) {\n      Save & publish without approval?\n    } @else {\n      Save & publish changes?\n    }\n  </h1>\n  <div mat-dialog-content class=\"container\">\n    <div>\n      You have changed\n      <strong>1 feature flag</strong>\n      in the\n      <strong>{{ data.environmentName }}</strong>\n      environment.&nbsp;\n    </div>\n\n    <p>The changes will be published to your applications after you click \"Save & publish changes\".</p>\n    <h3 class=\"notes\">\n      @if (!data.reasonRequired) {\n        Optional\n      } @else {\n        Add\n      }\n      notes\n    </h3>\n    <mat-form-field appearance=\"outline\" class=\"reason\">\n      <textarea\n        #reason\n        matInput\n        formControlName=\"reason\"\n        name=\"reason\"\n        placeholder=\"I'm changing the values because...\"\n        rows=\"3\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"3\"></textarea>\n      <mat-hint>\n        This will appear in the Audit Log (in the Notes section when you expand the corresponding entry).\n      </mat-hint>\n      @if (formGroup.controls.reason.invalid) {\n        <mat-error>\n          This will appear in the Audit Log (in the Notes section when you expand the corresponding entry). The field is\n          required.\n        </mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <div mat-dialog-actions>\n    <button type=\"submit\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\">Save & publish changes</button>\n    <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n  </div>\n</form>\n", styles: [".reason{width:100%}.diff-type-selector,.diff-wrapper{margin-top:1rem}.notes{margin-top:22px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SaveAndPublishDialogComponent, isStandalone: true, selector: "app-save-and-publish-dialog", viewQueries: [{ propertyName: "reasonInput", first: true, predicate: ["reason"], descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSaveButton()\">\n  <h1 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">\n    @if (data.bypassApproval) {\n      Save & publish without approval?\n    } @else {\n      Save & publish changes?\n    }\n  </h1>\n  <div mat-dialog-content class=\"container\">\n    <div>\n      You have changed\n      <strong>1 feature flag</strong>\n      in the\n      <strong>{{ data.environmentName }}</strong>\n      environment.&nbsp;\n    </div>\n\n    <p>If you proceed, the changes will be published and propagated to your applications.</p>\n    <h3 class=\"notes\">\n      @if (!data.reasonRequired) {\n        Optional\n      } @else {\n        Add\n      }\n      notes\n    </h3>\n    <mat-form-field appearance=\"outline\" class=\"reason\">\n      <textarea\n        #reason\n        matInput\n        formControlName=\"reason\"\n        name=\"reason\"\n        placeholder=\"I'm changing the values because...\"\n        rows=\"3\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"3\"></textarea>\n      <mat-hint>\n        This will appear in the Audit Log (in the Notes section when you expand the corresponding entry).\n      </mat-hint>\n      @if (formGroup.controls.reason.invalid) {\n        <mat-error>\n          This will appear in the Audit Log (in the Notes section when you expand the corresponding entry). The field is\n          required.\n        </mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <div mat-dialog-actions>\n    <button type=\"submit\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\">Save & publish changes</button>\n    <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n  </div>\n</form>\n", styles: [".reason{width:100%}.diff-type-selector,.diff-wrapper{margin-top:1rem}.notes{margin-top:22px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SaveAndPublishDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-save-and-publish-dialog", imports: [MatDialogTitle, FormsModule, ReactiveFormsModule, RxReactiveFormsModule, CdkScrollable, MatDialogContent,
                         MatFormField, MatInput, CdkTextareaAutosize, MatError, MatDialogActions, MatButton, CdkDrag, CdkDragHandle,
-                        MatHint], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSaveButton()\">\n  <h1 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">\n    @if (data.bypassApproval) {\n      Save & publish without approval?\n    } @else {\n      Save & publish changes?\n    }\n  </h1>\n  <div mat-dialog-content class=\"container\">\n    <div>\n      You have changed\n      <strong>1 feature flag</strong>\n      in the\n      <strong>{{ data.environmentName }}</strong>\n      environment.&nbsp;\n    </div>\n\n    <p>The changes will be published to your applications after you click \"Save & publish changes\".</p>\n    <h3 class=\"notes\">\n      @if (!data.reasonRequired) {\n        Optional\n      } @else {\n        Add\n      }\n      notes\n    </h3>\n    <mat-form-field appearance=\"outline\" class=\"reason\">\n      <textarea\n        #reason\n        matInput\n        formControlName=\"reason\"\n        name=\"reason\"\n        placeholder=\"I'm changing the values because...\"\n        rows=\"3\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"3\"></textarea>\n      <mat-hint>\n        This will appear in the Audit Log (in the Notes section when you expand the corresponding entry).\n      </mat-hint>\n      @if (formGroup.controls.reason.invalid) {\n        <mat-error>\n          This will appear in the Audit Log (in the Notes section when you expand the corresponding entry). The field is\n          required.\n        </mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <div mat-dialog-actions>\n    <button type=\"submit\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\">Save & publish changes</button>\n    <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n  </div>\n</form>\n", styles: [".reason{width:100%}.diff-type-selector,.diff-wrapper{margin-top:1rem}.notes{margin-top:22px}\n"] }]
+                        MatHint], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSaveButton()\">\n  <h1 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">\n    @if (data.bypassApproval) {\n      Save & publish without approval?\n    } @else {\n      Save & publish changes?\n    }\n  </h1>\n  <div mat-dialog-content class=\"container\">\n    <div>\n      You have changed\n      <strong>1 feature flag</strong>\n      in the\n      <strong>{{ data.environmentName }}</strong>\n      environment.&nbsp;\n    </div>\n\n    <p>If you proceed, the changes will be published and propagated to your applications.</p>\n    <h3 class=\"notes\">\n      @if (!data.reasonRequired) {\n        Optional\n      } @else {\n        Add\n      }\n      notes\n    </h3>\n    <mat-form-field appearance=\"outline\" class=\"reason\">\n      <textarea\n        #reason\n        matInput\n        formControlName=\"reason\"\n        name=\"reason\"\n        placeholder=\"I'm changing the values because...\"\n        rows=\"3\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"3\"></textarea>\n      <mat-hint>\n        This will appear in the Audit Log (in the Notes section when you expand the corresponding entry).\n      </mat-hint>\n      @if (formGroup.controls.reason.invalid) {\n        <mat-error>\n          This will appear in the Audit Log (in the Notes section when you expand the corresponding entry). The field is\n          required.\n        </mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <div mat-dialog-actions>\n    <button type=\"submit\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\">Save & publish changes</button>\n    <button type=\"button\" mat-stroked-button (click)=\"cancel()\">Cancel</button>\n  </div>\n</form>\n", styles: [".reason{width:100%}.diff-type-selector,.diff-wrapper{margin-top:1rem}.notes{margin-top:22px}\n"] }]
         }], propDecorators: { reasonInput: [{ type: i0.ViewChild, args: ["reason", { isSignal: true }] }] } });
 
 function getRawPredefinedVariationValue(formGroup) {
@@ -4017,7 +4135,8 @@ class PastedDataTrimmerDirective {
             const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
                 data: {
                     title: "Trim extra spaces?",
-                    body: "The pasted value contains extra spaces at the beginning or end.<br/>This may cause unexpected behavior, for example when comparing values.",
+                    body: safeHtml `\
+The pasted value contains extra spaces at the beginning or end.<br/>This may cause unexpected behavior, for example when comparing values.`,
                     yesButtonLabel: "Trim extra spaces",
                     cancelButtonLabel: "Keep spaces",
                 },
@@ -5671,9 +5790,10 @@ class UserConditionComponent {
             width: "600px",
             data: {
                 title: "Consider using confidential comparators",
-                body: `Comparison value will be presented as plain text 
-        in the <i>config JSON</i>. If you have sensitive data, consider using one of the confidential (hashed) comparators.<br/><br/>
-        See the <a href="https://configcat.com/docs/targeting/targeting-rule/user-condition/#confidential-text-comparators" target="_blank">documentation</a> for more information.`,
+                body: safeHtml `\
+Comparison value will be presented as plain text in the <i>config JSON</i>.
+If you have sensitive data, consider using one of the confidential (hashed) comparators.<br/><br/>
+See the <a href="https://configcat.com/docs/targeting/targeting-rule/user-condition/#confidential-text-comparators" target="_blank">documentation</a> for more information.`,
                 secondaryButtonLabel: "Open comparator selector",
                 secondaryButtonAction: () => {
                     this.compDialog();
@@ -5694,7 +5814,9 @@ class UserConditionComponent {
         const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
             data: {
                 title: "How would you like to add the items?",
-                body: "We've noticed a comma in the value you want to add. <br/> Do you want to add it as a single item, or would you prefer to insert multiple items separated by commas?",
+                body: safeHtml `\
+We've noticed a comma in the value you want to add. <br/>
+Do you want to add it as a single item, or would you prefer to insert multiple items separated by commas?`,
                 yesButtonLabel: "Add multiple items",
                 cancelButtonLabel: "Add as a single item",
             },
@@ -5914,7 +6036,7 @@ class UserConditionComponent {
         return !compVal.doubleValue && !compVal.listValue && !compVal.stringValue;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UserConditionComponent, isStandalone: true, selector: "app-user-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, comparisonAttributes: { classPropertyName: "comparisonAttributes", publicName: "comparisonAttributes", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: DateAdapter, useClass: AppDateAdapter }], viewQueries: [{ propertyName: "matChipGrid", first: true, predicate: ["chipGrid"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        user's\n      </a>\n    </div>\n  </div>\n\n  <div class=\"wrapper-group\">\n    <div class=\"wrapper-group\">\n      <div\n        class=\"targeting-rule-component pad-right\"\n        [ngClass]=\"{\n          small: comparisionAttributeCustom === selectedAttribute,\n        }\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n          <mat-select\n            matTooltip=\"Comparison attribute\"\n            [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n            [(value)]=\"selectedAttribute\"\n            (selectionChange)=\"attributeChanged(selectedAttribute)\">\n            @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n              <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n            }\n            <mat-option value=\"Custom\">Custom</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n          <input\n            matInput\n            type=\"text\"\n            matTooltip=\"Custom comparison attribute\"\n            [matAutocomplete]=\"auto\"\n            [formControl]=\"formGroup().controls.comparisonAttribute\"\n            (blur)=\"calcComparators(true)\" />\n          @if (formGroup().controls.comparisonAttribute.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-autocomplete #auto=\"matAutocomplete\" panelWidth=\"auto\">\n          @for (option of comparisonAttributes(); track $index) {\n            <mat-option [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right suffixed\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        <mat-select\n          matTooltip=\"Comparator\"\n          [disabled]=\"readOnly()\"\n          [(value)]=\"selectedComparator\"\n          (selectionChange)=\"comparatorChanged(selectedComparator)\">\n          @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n            <mat-optgroup [label]=\"group.key\">\n              @for (comparator of group.value; track comparator) {\n                <mat-option [value]=\"comparator.value\">\n                  {{ comparator.label }}\n                </mat-option>\n              }\n            </mat-optgroup>\n          }\n          <mat-divider />\n          <mat-option value=\"showall\">\n            <mat-icon>list_alt</mat-icon>\n            SHOW ALL COMPARATORS\n          </mat-option>\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"All comparators\"\n          (click)=\"compDialog(); $event.stopPropagation()\">\n          <mat-icon>list_alt</mat-icon>\n        </button>\n        @if (formGroup().controls.comparator.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  </div>\n  @switch (rolloutRuleComparatorType) {\n    @case (RolloutRuleComparatorV2Type.String) {\n      <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Semver) {\n      <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.StringList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.SemverList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Number) {\n      <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.DateTime) {\n      <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n    }\n  }\n</div>\n\n<ng-template #textTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (text)\"\n          placeholder=\"Add text ...\"\n          appPastedDataTrimmer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (isClearTextComparator) {\n          <button\n            matPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #semverTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (semantic version)\"\n          placeholder=\"Add semantic version ... (1.2.3)\"\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #listTemplate>\n  @if (formGroup().controls.comparisonValue.controls.listValue) {\n    <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field suffixed\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n          @for (\n            listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n            track $index;\n            let i = $index\n          ) {\n            <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n              <mat-chip-row\n                class=\"chip\"\n                [disabled]=\"readOnly()\"\n                [removable]=\"!readOnly()\"\n                [editable]=\"!readOnly()\"\n                [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n                (removed)=\"remove(i)\"\n                (edited)=\"edit(i, $event)\">\n                {{ listValueItem.controls.value.value }}\n                @if (!readOnly()) {\n                  <button type=\"button\" matChipRemove>\n                    <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n                  </button>\n                }\n              </mat-chip-row>\n            </span>\n          }\n          @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n            <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n              show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n            </button>\n          }\n          <input\n            matChipInputAddOnBlur\n            matTooltip=\"Comparison values (list)\"\n            [disabled]=\"readOnly()\"\n            [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"add($event)\" />\n        </mat-chip-grid>\n        @if (isClearTextComparator) {\n          <button\n            matIconPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandList()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"More...\"\n          [matMenuTriggerFor]=\"moreMenu\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n          </mat-error>\n        }\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          !formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>Invalid items</mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #numberTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"number\"\n          matTooltip=\"Comparison value (number)\"\n          placeholder=\"Add number ...\"\n          inputDisplayNormalizer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component datetime\">\n      <app-date-time-picker\n        dateTooltip=\"Comparison value (date)\"\n        timeTooltip=\"Comparison value (time)\"\n        [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n    </div>\n  }\n</ng-template>\n\n<mat-menu #moreMenu>\n  <a mat-menu-item (click)=\"expandList()\">\n    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n    Open advanced editor\n  </a>\n  <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n    <mat-icon>content_copy</mat-icon>\n    Copy as CSV (values only)\n  </a>\n  <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n    <mat-icon>delete</mat-icon>\n    Remove all\n  </a>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px;margin-bottom:3px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{font-size:.8em;margin-left:4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }, { kind: "component", type: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }, { kind: "component", type: 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: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UserConditionComponent, isStandalone: true, selector: "app-user-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, comparisonAttributes: { classPropertyName: "comparisonAttributes", publicName: "comparisonAttributes", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: DateAdapter, useClass: AppDateAdapter }], viewQueries: [{ propertyName: "matChipGrid", first: true, predicate: ["chipGrid"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        user's\n      </a>\n    </div>\n  </div>\n\n  <div class=\"wrapper-group\">\n    <div class=\"wrapper-group\">\n      <div\n        class=\"targeting-rule-component pad-right\"\n        [ngClass]=\"{\n          small: comparisionAttributeCustom === selectedAttribute,\n        }\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n          <mat-select\n            matTooltip=\"Comparison attribute\"\n            [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n            [(value)]=\"selectedAttribute\"\n            (selectionChange)=\"attributeChanged(selectedAttribute)\">\n            @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n              <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n            }\n            <mat-option value=\"Custom\">Custom</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n          <input\n            matInput\n            type=\"text\"\n            matTooltip=\"Custom comparison attribute\"\n            [matAutocomplete]=\"auto\"\n            [formControl]=\"formGroup().controls.comparisonAttribute\"\n            (blur)=\"calcComparators(true)\" />\n          @if (formGroup().controls.comparisonAttribute.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-autocomplete #auto=\"matAutocomplete\" panelWidth=\"auto\">\n          @for (option of comparisonAttributes(); track $index) {\n            <mat-option [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right suffixed\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        <mat-select\n          matTooltip=\"Comparator\"\n          [disabled]=\"readOnly()\"\n          [(value)]=\"selectedComparator\"\n          (selectionChange)=\"comparatorChanged(selectedComparator)\">\n          @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n            <mat-optgroup [label]=\"group.key\">\n              @for (comparator of group.value; track comparator) {\n                <mat-option [value]=\"comparator.value\">\n                  {{ comparator.label }}\n                </mat-option>\n              }\n            </mat-optgroup>\n          }\n          <mat-divider />\n          <mat-option value=\"showall\">\n            <mat-icon>list_alt</mat-icon>\n            SHOW ALL COMPARATORS\n          </mat-option>\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"All comparators\"\n          (click)=\"compDialog(); $event.stopPropagation()\">\n          <mat-icon>list_alt</mat-icon>\n        </button>\n        @if (formGroup().controls.comparator.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  </div>\n  @switch (rolloutRuleComparatorType) {\n    @case (RolloutRuleComparatorV2Type.String) {\n      <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Semver) {\n      <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.StringList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.SemverList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Number) {\n      <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.DateTime) {\n      <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n    }\n  }\n</div>\n\n<ng-template #textTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (text)\"\n          placeholder=\"Add text ...\"\n          appPastedDataTrimmer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (isClearTextComparator) {\n          <button\n            matPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #semverTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (semantic version)\"\n          placeholder=\"Add semantic version ... (1.2.3)\"\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #listTemplate>\n  @if (formGroup().controls.comparisonValue.controls.listValue) {\n    <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field suffixed\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n          @for (\n            listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n            track $index;\n            let i = $index\n          ) {\n            <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n              <mat-chip-row\n                class=\"chip\"\n                [disabled]=\"readOnly()\"\n                [removable]=\"!readOnly()\"\n                [editable]=\"!readOnly()\"\n                [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n                (removed)=\"remove(i)\"\n                (edited)=\"edit(i, $event)\">\n                {{ listValueItem.controls.value.value }}\n                @if (!readOnly()) {\n                  <button type=\"button\" matChipRemove>\n                    <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n                  </button>\n                }\n              </mat-chip-row>\n            </span>\n          }\n          @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n            <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n              show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n            </button>\n          }\n          <input\n            matChipInputAddOnBlur\n            matTooltip=\"Comparison values (list)\"\n            [disabled]=\"readOnly()\"\n            [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"add($event)\" />\n        </mat-chip-grid>\n        @if (isClearTextComparator) {\n          <button\n            matIconPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandList()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"More...\"\n          [matMenuTriggerFor]=\"moreMenu\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n          </mat-error>\n        }\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          !formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>Invalid items</mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #numberTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"number\"\n          matTooltip=\"Comparison value (number)\"\n          placeholder=\"Add number ...\"\n          inputDisplayNormalizer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component datetime\">\n      <app-date-time-picker\n        dateTooltip=\"Comparison value (date)\"\n        timeTooltip=\"Comparison value (time)\"\n        [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n    </div>\n  }\n</ng-template>\n\n<mat-menu #moreMenu>\n  <a mat-menu-item (click)=\"expandList()\">\n    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n    Open advanced editor\n  </a>\n  <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n    <mat-icon>content_copy</mat-icon>\n    Copy as CSV (values only)\n  </a>\n  <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n    <mat-icon>delete</mat-icon>\n    Remove all\n  </a>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px;margin-bottom:3px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{height:22px!important;margin:1px 0 1px 4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }, { kind: "component", type: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }, { kind: "component", type: 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: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UserConditionComponent, decorators: [{
             type: Component,
@@ -5952,7 +6074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         PastedDataTrimmerDirective,
                         MatAutocomplete,
                         MatAutocompleteTrigger,
-                    ], template: "<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        user's\n      </a>\n    </div>\n  </div>\n\n  <div class=\"wrapper-group\">\n    <div class=\"wrapper-group\">\n      <div\n        class=\"targeting-rule-component pad-right\"\n        [ngClass]=\"{\n          small: comparisionAttributeCustom === selectedAttribute,\n        }\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n          <mat-select\n            matTooltip=\"Comparison attribute\"\n            [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n            [(value)]=\"selectedAttribute\"\n            (selectionChange)=\"attributeChanged(selectedAttribute)\">\n            @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n              <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n            }\n            <mat-option value=\"Custom\">Custom</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n          <input\n            matInput\n            type=\"text\"\n            matTooltip=\"Custom comparison attribute\"\n            [matAutocomplete]=\"auto\"\n            [formControl]=\"formGroup().controls.comparisonAttribute\"\n            (blur)=\"calcComparators(true)\" />\n          @if (formGroup().controls.comparisonAttribute.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-autocomplete #auto=\"matAutocomplete\" panelWidth=\"auto\">\n          @for (option of comparisonAttributes(); track $index) {\n            <mat-option [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right suffixed\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        <mat-select\n          matTooltip=\"Comparator\"\n          [disabled]=\"readOnly()\"\n          [(value)]=\"selectedComparator\"\n          (selectionChange)=\"comparatorChanged(selectedComparator)\">\n          @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n            <mat-optgroup [label]=\"group.key\">\n              @for (comparator of group.value; track comparator) {\n                <mat-option [value]=\"comparator.value\">\n                  {{ comparator.label }}\n                </mat-option>\n              }\n            </mat-optgroup>\n          }\n          <mat-divider />\n          <mat-option value=\"showall\">\n            <mat-icon>list_alt</mat-icon>\n            SHOW ALL COMPARATORS\n          </mat-option>\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"All comparators\"\n          (click)=\"compDialog(); $event.stopPropagation()\">\n          <mat-icon>list_alt</mat-icon>\n        </button>\n        @if (formGroup().controls.comparator.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  </div>\n  @switch (rolloutRuleComparatorType) {\n    @case (RolloutRuleComparatorV2Type.String) {\n      <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Semver) {\n      <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.StringList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.SemverList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Number) {\n      <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.DateTime) {\n      <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n    }\n  }\n</div>\n\n<ng-template #textTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (text)\"\n          placeholder=\"Add text ...\"\n          appPastedDataTrimmer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (isClearTextComparator) {\n          <button\n            matPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #semverTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (semantic version)\"\n          placeholder=\"Add semantic version ... (1.2.3)\"\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #listTemplate>\n  @if (formGroup().controls.comparisonValue.controls.listValue) {\n    <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field suffixed\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n          @for (\n            listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n            track $index;\n            let i = $index\n          ) {\n            <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n              <mat-chip-row\n                class=\"chip\"\n                [disabled]=\"readOnly()\"\n                [removable]=\"!readOnly()\"\n                [editable]=\"!readOnly()\"\n                [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n                (removed)=\"remove(i)\"\n                (edited)=\"edit(i, $event)\">\n                {{ listValueItem.controls.value.value }}\n                @if (!readOnly()) {\n                  <button type=\"button\" matChipRemove>\n                    <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n                  </button>\n                }\n              </mat-chip-row>\n            </span>\n          }\n          @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n            <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n              show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n            </button>\n          }\n          <input\n            matChipInputAddOnBlur\n            matTooltip=\"Comparison values (list)\"\n            [disabled]=\"readOnly()\"\n            [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"add($event)\" />\n        </mat-chip-grid>\n        @if (isClearTextComparator) {\n          <button\n            matIconPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandList()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"More...\"\n          [matMenuTriggerFor]=\"moreMenu\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n          </mat-error>\n        }\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          !formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>Invalid items</mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #numberTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"number\"\n          matTooltip=\"Comparison value (number)\"\n          placeholder=\"Add number ...\"\n          inputDisplayNormalizer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component datetime\">\n      <app-date-time-picker\n        dateTooltip=\"Comparison value (date)\"\n        timeTooltip=\"Comparison value (time)\"\n        [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n    </div>\n  }\n</ng-template>\n\n<mat-menu #moreMenu>\n  <a mat-menu-item (click)=\"expandList()\">\n    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n    Open advanced editor\n  </a>\n  <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n    <mat-icon>content_copy</mat-icon>\n    Copy as CSV (values only)\n  </a>\n  <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n    <mat-icon>delete</mat-icon>\n    Remove all\n  </a>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px;margin-bottom:3px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{font-size:.8em;margin-left:4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"] }]
+                    ], template: "<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        user's\n      </a>\n    </div>\n  </div>\n\n  <div class=\"wrapper-group\">\n    <div class=\"wrapper-group\">\n      <div\n        class=\"targeting-rule-component pad-right\"\n        [ngClass]=\"{\n          small: comparisionAttributeCustom === selectedAttribute,\n        }\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n          <mat-select\n            matTooltip=\"Comparison attribute\"\n            [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n            [(value)]=\"selectedAttribute\"\n            (selectionChange)=\"attributeChanged(selectedAttribute)\">\n            @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n              <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n            }\n            <mat-option value=\"Custom\">Custom</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n        <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n          <input\n            matInput\n            type=\"text\"\n            matTooltip=\"Custom comparison attribute\"\n            [matAutocomplete]=\"auto\"\n            [formControl]=\"formGroup().controls.comparisonAttribute\"\n            (blur)=\"calcComparators(true)\" />\n          @if (formGroup().controls.comparisonAttribute.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-autocomplete #auto=\"matAutocomplete\" panelWidth=\"auto\">\n          @for (option of comparisonAttributes(); track $index) {\n            <mat-option [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right suffixed\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n        <mat-select\n          matTooltip=\"Comparator\"\n          [disabled]=\"readOnly()\"\n          [(value)]=\"selectedComparator\"\n          (selectionChange)=\"comparatorChanged(selectedComparator)\">\n          @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n            <mat-optgroup [label]=\"group.key\">\n              @for (comparator of group.value; track comparator) {\n                <mat-option [value]=\"comparator.value\">\n                  {{ comparator.label }}\n                </mat-option>\n              }\n            </mat-optgroup>\n          }\n          <mat-divider />\n          <mat-option value=\"showall\">\n            <mat-icon>list_alt</mat-icon>\n            SHOW ALL COMPARATORS\n          </mat-option>\n        </mat-select>\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"All comparators\"\n          (click)=\"compDialog(); $event.stopPropagation()\">\n          <mat-icon>list_alt</mat-icon>\n        </button>\n        @if (formGroup().controls.comparator.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  </div>\n  @switch (rolloutRuleComparatorType) {\n    @case (RolloutRuleComparatorV2Type.String) {\n      <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Semver) {\n      <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.StringList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.SemverList) {\n      <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.Number) {\n      <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n    }\n    @case (RolloutRuleComparatorV2Type.DateTime) {\n      <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n    }\n  }\n</div>\n\n<ng-template #textTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (text)\"\n          placeholder=\"Add text ...\"\n          appPastedDataTrimmer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (isClearTextComparator) {\n          <button\n            matPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #semverTemplate>\n  @if (formGroup().controls.comparisonValue.controls.stringValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          matTooltip=\"Comparison value (semantic version)\"\n          placeholder=\"Add semantic version ... (1.2.3)\"\n          [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #listTemplate>\n  @if (formGroup().controls.comparisonValue.controls.listValue) {\n    <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"small-form-field suffixed\"\n        subscriptSizing=\"dynamic\"\n        [class.suffixed]=\"!isClearTextComparator\"\n        [class.suffixed-prefixed]=\"isClearTextComparator\">\n        <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n          @for (\n            listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n            track $index;\n            let i = $index\n          ) {\n            <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n              <mat-chip-row\n                class=\"chip\"\n                [disabled]=\"readOnly()\"\n                [removable]=\"!readOnly()\"\n                [editable]=\"!readOnly()\"\n                [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n                (removed)=\"remove(i)\"\n                (edited)=\"edit(i, $event)\">\n                {{ listValueItem.controls.value.value }}\n                @if (!readOnly()) {\n                  <button type=\"button\" matChipRemove>\n                    <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n                  </button>\n                }\n              </mat-chip-row>\n            </span>\n          }\n          @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n            <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n              show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n            </button>\n          }\n          <input\n            matChipInputAddOnBlur\n            matTooltip=\"Comparison values (list)\"\n            [disabled]=\"readOnly()\"\n            [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"add($event)\" />\n        </mat-chip-grid>\n        @if (isClearTextComparator) {\n          <button\n            matIconPrefix\n            class=\"prefix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n            (click)=\"openCleartextInfoDialog()\">\n            <mat-icon>lock_open_right</mat-icon>\n          </button>\n        }\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandList()\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        <button\n          matIconSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"More...\"\n          [matMenuTriggerFor]=\"moreMenu\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n          </mat-error>\n        }\n        @if (\n          formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n          !formGroup().controls.comparisonValue.controls.listValue!.errors\n        ) {\n          <mat-error>Invalid items</mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #numberTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component grow\">\n      <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"number\"\n          matTooltip=\"Comparison value (number)\"\n          placeholder=\"Add number ...\"\n          inputDisplayNormalizer\n          [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n        @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n  @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n    <div class=\"targeting-rule-component datetime\">\n      <app-date-time-picker\n        dateTooltip=\"Comparison value (date)\"\n        timeTooltip=\"Comparison value (time)\"\n        [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n    </div>\n  }\n</ng-template>\n\n<mat-menu #moreMenu>\n  <a mat-menu-item (click)=\"expandList()\">\n    <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n    Open advanced editor\n  </a>\n  <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n    <mat-icon>content_copy</mat-icon>\n    Copy as CSV (values only)\n  </a>\n  <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n    <mat-icon>delete</mat-icon>\n    Remove all\n  </a>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px;margin-bottom:3px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{height:22px!important;margin:1px 0 1px 4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"] }]
         }], propDecorators: { targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], conditionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionIndex", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], comparisonAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonAttributes", required: true }] }], matChipGrid: [{ type: i0.ViewChild, args: ["chipGrid", { isSignal: true }] }] } });
 
 class ConditionsComponent {
@@ -7190,9 +7312,10 @@ class FeatureFlagItemComponent extends BaseComponent {
                     && error.error
                     && ("" + error.error).startsWith("Circular dependency detected.")) {
                     const errorMessage = ("" + error.error).slice("Circular dependency detected.".length + 1);
-                    this.openDiscardDialog("Cannot save feature flags", "Circular dependency detected between the following feature flags:<p>"
-                        + errorMessage
-                        + "</p>Please <strong>eliminate the circular dependency</strong> before saving your feature flags.", "I understand", "", true, "450px");
+                    this.openDiscardDialog("Cannot save feature flags", safeHtml `\
+Circular dependency detected between the following feature flags:
+<p>${errorMessage}</p>
+Please <strong>eliminate the circular dependency</strong> before saving your feature flags.`, "I understand", "", true, "450px");
                     return;
                 }
                 if (error instanceof HttpErrorResponse && error.status === 404) {
@@ -7231,7 +7354,8 @@ class FeatureFlagItemComponent extends BaseComponent {
         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.',
+                body: safeHtml `\
+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",
@@ -7948,6 +8072,19 @@ class CreateFeatureFlagComponent extends BaseComponent {
                 if (error instanceof HttpErrorResponse && error.status === 401) {
                     this.componentError.emit(error);
                 }
+                if (error instanceof HttpErrorResponse && error.status === 402) {
+                    //override the form validity and show dialog
+                    this.formGroup.updateValueAndValidity();
+                    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.getDashboardBasePath() + "/organization/plans",
+                            noButtonLabel: "Close",
+                        },
+                    });
+                }
             },
         });
     }
@@ -8066,7 +8203,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
         this.componentError.emit(error);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CreateFeatureFlagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: CreateFeatureFlagComponent, isStandalone: true, selector: "app-create-feature-flag", inputs: { customize: { classPropertyName: "customize", publicName: "customize", isSignal: true, isRequired: false, transformFunction: null }, presetProductAndConfig: { classPropertyName: "presetProductAndConfig", publicName: "presetProductAndConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createInitiated: "createInitiated", resizeRequested: "resizeRequested", cancelInitiated: "cancelInitiated", selectDropdownPanelChangedReqested: "selectDropdownPanelChangedReqested", componentError: "componentError" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ customize().targetSectionHeader }}</div>\n      @if (customize().targetSectionDescription) {\n        <p>{{ customize().targetSectionDescription }}</p>\n      }\n      @if (this.presetProductAndConfig()) {\n        <p>\n          Pre selected product\n          <b>{{ this.presetProductAndConfig()!.productName }}</b>\n        </p>\n        <p>\n          Pre selected config\n          <b>{{ this.presetProductAndConfig()!.configName }}</b>\n        </p>\n      }\n      <app-product-select\n        name=\"productId\"\n        [hidden]=\"this.presetProductAndConfig()\"\n        [basicAuthUsername]=\"basicAuthUsername()\"\n        [basicAuthPassword]=\"basicAuthPassword()\"\n        [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n        [valueFormControl]=\"formGroup.controls.productId\"\n        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [hidden]=\"this.presetProductAndConfig()\"\n          [basicAuthUsername]=\"basicAuthUsername()\"\n          [basicAuthPassword]=\"basicAuthPassword()\"\n          [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          [customDropdown]=\"true\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n\n      <div class=\"header\">2. {{ customize().flagSectionHeader }}</div>\n      @if (customize().flagSectionDescription) {\n        <p>{{ customize().flagSectionDescription }}</p>\n      }\n      @if (loadingComputed()) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field\" appearance=\"outline\">\n          <mat-label>Type</mat-label>\n          <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n            <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name for humans</mat-label>\n          <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n          <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n          @if (formGroup.controls.name.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field key\" appearance=\"outline\">\n          <mat-label>Key for programs</mat-label>\n          <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n          <mat-hint>Your application will use this key to access the setting.</mat-hint>\n          @if (formGroup.controls.key.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field hint last\" appearance=\"outline\">\n          @if (!reasonRequired()) {\n            <mat-label>Hint (Optional)</mat-label>\n          } @else {\n            <mat-label>Hint</mat-label>\n          }\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>Explain what this setting controls. This helps your team use it correctly later.</mat-hint>\n          @if (formGroup.controls.hint.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n            </mat-error>\n          }\n        </mat-form-field>\n\n        <div class=\"init-value-section\">\n          @if (configEvaluationVersion === EvaluationVersion.V2) {\n            @if (true && formGroup.controls.settingType.value === SettingTypeEnum.String) {\n              <h4>Require valid JSON?</h4>\n              <div class=\"centered\">\n                <mat-checkbox color=\"primary\" formControlName=\"isJson\">\n                  <span>Only valid JSON values can be saved</span>\n                </mat-checkbox>\n                <mat-icon\n                  color=\"primary\"\n                  class=\"info-icon\"\n                  matTooltip=\"Your application will get a string value. You will need to parse it into JSON if necessary.\">\n                  info\n                </mat-icon>\n              </div>\n            }\n\n            <h4>How to set values?</h4>\n            <div class=\"value-mode-question\">\n              <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n                <mat-select formControlName=\"useVariations\" class=\"choose\">\n                  <mat-option [value]=\"false\">\n                    {{\n                      formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n                        ? \"use an ON/OFF toggle\"\n                        : \"enter free-form values\"\n                    }}\n                  </mat-option>\n                  <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <a href=\"https://configcat.com/docs/advanced/predefined-variations\" target=\"_blank\">\n                <mat-icon class=\"info-icon\" color=\"primary\" matTooltip=\"Click to read more about value-modes.\">\n                  info\n                </mat-icon>\n              </a>\n            </div>\n            @if (formGroup.controls.useVariations.value) {\n              <p>Define the values team members can choose from. At least two variations are required.</p>\n              <div class=\"variations\">\n                <div class=\"predef-var-table-scroll\">\n                  <table mat-table [dataSource]=\"dataSource\">\n                    <ng-container matColumnDef=\"color\">\n                      <th *matHeaderCellDef mat-header-cell></th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n                        <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"value\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Served value *</span>\n                          <mat-icon\n                            matTooltip=\"Your application will get this value when evaluating the setting.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          @switch (formGroup.controls.settingType.value) {\n                            @case (SettingTypeEnum.Boolean) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.boolValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.String) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.stringValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Int) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.intValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Double) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.doubleValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"name\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Display name (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                            <input\n                              matInput\n                              [formControl]=\"row.controls.name\"\n                              [placeholder]=\"row.controls.valueForComparison.value\" />\n                            @if (row.controls.name.invalid) {\n                              <mat-error class=\"small-error\">\n                                {{ FormHelper.getErrorMessage(row.controls.name) }}\n                              </mat-error>\n                            }\n                          </mat-form-field>\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"hint\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Hint (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <mat-form-field\n                          appearance=\"outline\"\n                          subscriptSizing=\"dynamic\"\n                          class=\"small-form-field suffixed\">\n                          <button\n                            matSuffix\n                            class=\"input-suffix-button\"\n                            type=\"button\"\n                            mat-icon-button\n                            matTooltip=\"Advanced editor\"\n                            (click)=\"expandHint(row.controls.hint)\">\n                            <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                          </button>\n                          <input matInput [formControl]=\"row.controls.hint\" />\n                          @if (row.controls.hint.invalid) {\n                            <mat-error>\n                              {{ FormHelper.getErrorMessage(row.controls.hint) }}\n                            </mat-error>\n                          }\n                        </mat-form-field>\n                      </td>\n                    </ng-container>\n                    <ng-container matColumnDef=\"actions\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <span>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</span>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div\n                          [matTooltip]=\"\n                            formGroup.controls.predefinedVariations.controls.length > 2\n                              ? 'Remove item'\n                              : 'At least 2 predefined variations should be set.'\n                          \">\n                          <button\n                            mat-icon-button\n                            type=\"button\"\n                            [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n                            (click)=\"removeVariation(i)\">\n                            <mat-icon>delete</mat-icon>\n                          </button>\n                        </div>\n                      </td>\n                    </ng-container>\n                    <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n                    <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n                  </table>\n                </div>\n\n                @if (\n                  formGroup.controls.predefinedVariations.invalid &&\n                  !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n                ) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                <div class=\"add-variation\">\n                  @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                    <div\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n                      <button\n                        type=\"button\"\n                        mat-stroked-button\n                        color=\"primary\"\n                        [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                        (click)=\"addVariation()\">\n                        <mat-icon>add</mat-icon>\n                        Add variation\n                      </button>\n                    </div>\n                  } @else {\n                    <app-box type=\"info\" class=\"bool-variation-info\">\n                      For more variations, create a flag of another type.\n                      <a\n                        href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\">\n                        Read more\n                      </a>\n                      about setting types.\n                    </app-box>\n                  }\n                </div>\n              </div>\n            }\n          }\n\n          <h4>Initial values</h4>\n          <div class=\"initial-value-first-line\">\n            The initial value\n            <mat-form-field\n              appearance=\"outline\"\n              class=\"small-form-field initial-value-environment-type\"\n              subscriptSizing=\"dynamic\">\n              <mat-select formControlName=\"initialValuesPerEnvironment\">\n                <mat-option [value]=\"false\">in all environments</mat-option>\n                <mat-option [value]=\"true\">per environment</mat-option>\n              </mat-select>\n            </mat-form-field>\n            will be set to\n          </div>\n          @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n            @if (formGroup.controls.useVariations.value) {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n              </div>\n            } @else {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"settingValueTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n              </div>\n            }\n          }\n\n          @if (formGroup.controls.initialValuesPerEnvironment.value) {\n            @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n              <div formArrayName=\"initialValues\">\n                <div class=\"value-field\" [formGroupName]=\"index\">\n                  @if (formGroup.controls.useVariations.value) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n                  }\n                  <div class=\"environment\">\n                    in\n                    <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n                      {{ initialValue.controls.environmentName.value }}\n                    </strong>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n\n      @if (!customize().hideLinkSection) {\n        <div class=\"header\">3. {{ customize().linkSectionHeader }}</div>\n        @if (customize().linkSectionDescription) {\n          <p>{{ customize().linkSectionDescription }}</p>\n        }\n        @if (formGroup.controls.productId.value) {\n          <app-environment-select\n            [basicAuthUsername]=\"basicAuthUsername()\"\n            [productId]=\"formGroup.controls.productId.value\"\n            [basicAuthPassword]=\"basicAuthPassword()\"\n            [valueFormControl]=\"formGroup.controls.environmentId\"\n            [customDropdown]=\"true\"\n            (componentError)=\"dropdownComponentFailed($event)\" />\n        }\n      }\n    </div>\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <div class=\"error\">\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </div>\n    }\n    <div class=\"buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n        {{ customize().createButtonLabel }}\n      </button>\n      @if (!customize().hideCancelButton) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ customize().cancelButtonLabel }}\n        </button>\n      }\n    </div>\n  </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (formGroup.controls.settingType.value) {\n    @case (SettingTypeEnum.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Int) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Double) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Boolean) {\n      <div class=\"toggle\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n  <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n    <mat-select [formControl]=\"formControl\">\n      @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n        <mat-option [value]=\"idx\">\n          @if (predefinedVariation.controls.name.value) {\n            {{ predefinedVariation.controls.name.value }}\n          } @else {\n            {{ predefinedVariation.controls.valueForComparison.value }}\n          }\n        </mat-option>\n      }\n    </mat-select>\n    @if (formControl.invalid) {\n      <mat-error>\n        {{ FormHelper.getErrorMessage(formControl) }}\n      </mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .centered{display:flex;align-items:center}.container .form>* .init-value-section mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .header-tooltip-icon{font-size:14px;width:14px;height:14px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}h4{margin-bottom:8px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"], outputs: ["componentError"] }, { kind: "component", type: ConfigSelectComponent, selector: "app-config-select", inputs: ["valueFormControl", "productId", "preSelectedConfigId"], outputs: ["componentError"] }, { kind: "component", type: EnvironmentSelectComponent, selector: "app-environment-select", inputs: ["valueFormControl", "productId"], outputs: ["componentError"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "component", type: BoxComponent, selector: "app-box", inputs: ["type", "title"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: CreateFeatureFlagComponent, isStandalone: true, selector: "app-create-feature-flag", inputs: { customize: { classPropertyName: "customize", publicName: "customize", isSignal: true, isRequired: false, transformFunction: null }, presetProductAndConfig: { classPropertyName: "presetProductAndConfig", publicName: "presetProductAndConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createInitiated: "createInitiated", resizeRequested: "resizeRequested", cancelInitiated: "cancelInitiated", selectDropdownPanelChangedReqested: "selectDropdownPanelChangedReqested", componentError: "componentError" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ customize().targetSectionHeader }}</div>\n      @if (customize().targetSectionDescription) {\n        <p>{{ customize().targetSectionDescription }}</p>\n      }\n      @if (this.presetProductAndConfig()) {\n        <p>\n          Pre selected product\n          <b>{{ this.presetProductAndConfig()!.productName }}</b>\n        </p>\n        <p>\n          Pre selected config\n          <b>{{ this.presetProductAndConfig()!.configName }}</b>\n        </p>\n      }\n      <app-product-select\n        name=\"productId\"\n        [hidden]=\"this.presetProductAndConfig()\"\n        [basicAuthUsername]=\"basicAuthUsername()\"\n        [basicAuthPassword]=\"basicAuthPassword()\"\n        [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n        [valueFormControl]=\"formGroup.controls.productId\"\n        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [hidden]=\"this.presetProductAndConfig()\"\n          [basicAuthUsername]=\"basicAuthUsername()\"\n          [basicAuthPassword]=\"basicAuthPassword()\"\n          [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          [customDropdown]=\"true\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n\n      <div class=\"header\">2. {{ customize().flagSectionHeader }}</div>\n      @if (customize().flagSectionDescription) {\n        <p>{{ customize().flagSectionDescription }}</p>\n      }\n      @if (loadingComputed()) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field\" appearance=\"outline\">\n          <mat-label>Type</mat-label>\n          <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n            <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name for humans</mat-label>\n          <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n          <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n          @if (formGroup.controls.name.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field key\" appearance=\"outline\">\n          <mat-label>Key for programs</mat-label>\n          <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n          <mat-hint>Your application will use this key to access the setting.</mat-hint>\n          @if (formGroup.controls.key.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field hint last\" appearance=\"outline\">\n          @if (!reasonRequired()) {\n            <mat-label>Hint (Optional)</mat-label>\n          } @else {\n            <mat-label>Hint</mat-label>\n          }\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>Explain what this setting controls. This helps your team use it correctly later.</mat-hint>\n          @if (formGroup.controls.hint.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n            </mat-error>\n          }\n        </mat-form-field>\n\n        <div class=\"init-value-section\">\n          @if (configEvaluationVersion === EvaluationVersion.V2) {\n            @if (true && formGroup.controls.settingType.value === SettingTypeEnum.String) {\n              <h4>Require valid JSON?</h4>\n              <div class=\"centered\">\n                <mat-checkbox color=\"primary\" formControlName=\"isJson\">\n                  <span>Only valid JSON values can be saved</span>\n                </mat-checkbox>\n                <mat-icon\n                  color=\"primary\"\n                  class=\"info-icon\"\n                  matTooltip=\"Your application will get a string value. You will need to parse it into JSON if necessary.\">\n                  info\n                </mat-icon>\n              </div>\n            }\n\n            <h4>How to set values?</h4>\n            <div class=\"value-mode-question\">\n              <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n                <mat-select formControlName=\"useVariations\" class=\"choose\">\n                  <mat-option [value]=\"false\">\n                    {{\n                      formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n                        ? \"use an ON/OFF toggle\"\n                        : \"enter free-form values\"\n                    }}\n                  </mat-option>\n                  <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <a href=\"https://configcat.com/docs/advanced/predefined-variations\" target=\"_blank\">\n                <mat-icon class=\"info-icon\" color=\"primary\" matTooltip=\"Click to read more about value-modes.\">\n                  info\n                </mat-icon>\n              </a>\n            </div>\n            @if (formGroup.controls.useVariations.value) {\n              <p>\n                Define the values team members can choose from.\n                {{\n                  formGroup.controls.settingType.value !== SettingTypeEnum.Boolean\n                    ? \"At least two variations are required.\"\n                    : null\n                }}\n              </p>\n              <div class=\"variations\">\n                <div class=\"predef-var-table-scroll\">\n                  <table mat-table [dataSource]=\"dataSource\">\n                    <ng-container matColumnDef=\"color\">\n                      <th *matHeaderCellDef mat-header-cell></th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n                        <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"value\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Served value *</span>\n                          <mat-icon\n                            matTooltip=\"Your application will get this value when evaluating the setting.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          @switch (formGroup.controls.settingType.value) {\n                            @case (SettingTypeEnum.Boolean) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.boolValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.String) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.stringValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Int) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.intValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Double) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.doubleValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"name\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Display name (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                            <input\n                              matInput\n                              [formControl]=\"row.controls.name\"\n                              [placeholder]=\"row.controls.valueForComparison.value\" />\n                            @if (row.controls.name.invalid) {\n                              <mat-error class=\"small-error\">\n                                {{ FormHelper.getErrorMessage(row.controls.name) }}\n                              </mat-error>\n                            }\n                          </mat-form-field>\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"hint\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Hint (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <mat-form-field\n                          appearance=\"outline\"\n                          subscriptSizing=\"dynamic\"\n                          class=\"small-form-field suffixed\">\n                          <button\n                            matSuffix\n                            class=\"input-suffix-button\"\n                            type=\"button\"\n                            mat-icon-button\n                            matTooltip=\"Advanced editor\"\n                            (click)=\"expandHint(row.controls.hint)\">\n                            <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                          </button>\n                          <input matInput [formControl]=\"row.controls.hint\" />\n                          @if (row.controls.hint.invalid) {\n                            <mat-error>\n                              {{ FormHelper.getErrorMessage(row.controls.hint) }}\n                            </mat-error>\n                          }\n                        </mat-form-field>\n                      </td>\n                    </ng-container>\n                    <ng-container matColumnDef=\"actions\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <span>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</span>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div\n                          [matTooltip]=\"\n                            formGroup.controls.predefinedVariations.controls.length > 2\n                              ? 'Remove item'\n                              : 'At least 2 predefined variations should be set.'\n                          \">\n                          <button\n                            mat-icon-button\n                            type=\"button\"\n                            [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n                            (click)=\"removeVariation(i)\">\n                            <mat-icon>delete</mat-icon>\n                          </button>\n                        </div>\n                      </td>\n                    </ng-container>\n                    <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n                    <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n                  </table>\n                </div>\n\n                @if (\n                  formGroup.controls.predefinedVariations.invalid &&\n                  !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n                ) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                <div class=\"add-variation\">\n                  @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                    <div\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n                      <button\n                        type=\"button\"\n                        mat-stroked-button\n                        color=\"primary\"\n                        [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                        (click)=\"addVariation()\">\n                        <mat-icon>add</mat-icon>\n                        Add variation\n                      </button>\n                    </div>\n                  } @else {\n                    <app-box type=\"info\" class=\"bool-variation-info\">\n                      For more variations, create a flag of another type.\n                      <a\n                        href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\">\n                        Read more\n                      </a>\n                      about setting types.\n                    </app-box>\n                  }\n                </div>\n              </div>\n            }\n          }\n\n          <h4>Initial values</h4>\n          <div class=\"initial-value-first-line\">\n            The initial value\n            <mat-form-field\n              appearance=\"outline\"\n              class=\"small-form-field initial-value-environment-type\"\n              subscriptSizing=\"dynamic\">\n              <mat-select formControlName=\"initialValuesPerEnvironment\">\n                <mat-option [value]=\"false\">in all environments</mat-option>\n                <mat-option [value]=\"true\">per environment</mat-option>\n              </mat-select>\n            </mat-form-field>\n            will be set to\n          </div>\n          @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n            @if (formGroup.controls.useVariations.value) {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n              </div>\n            } @else {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"settingValueTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n              </div>\n            }\n          }\n\n          @if (formGroup.controls.initialValuesPerEnvironment.value) {\n            @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n              <div formArrayName=\"initialValues\">\n                <div class=\"value-field\" [formGroupName]=\"index\">\n                  @if (formGroup.controls.useVariations.value) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n                  }\n                  <div class=\"environment\">\n                    in\n                    <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n                      {{ initialValue.controls.environmentName.value }}\n                    </strong>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n\n      @if (!customize().hideLinkSection) {\n        <div class=\"header\">3. {{ customize().linkSectionHeader }}</div>\n        @if (customize().linkSectionDescription) {\n          <p>{{ customize().linkSectionDescription }}</p>\n        }\n        @if (formGroup.controls.productId.value) {\n          <app-environment-select\n            [basicAuthUsername]=\"basicAuthUsername()\"\n            [productId]=\"formGroup.controls.productId.value\"\n            [basicAuthPassword]=\"basicAuthPassword()\"\n            [valueFormControl]=\"formGroup.controls.environmentId\"\n            [customDropdown]=\"true\"\n            (componentError)=\"dropdownComponentFailed($event)\" />\n        }\n      }\n    </div>\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <div class=\"error\">\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </div>\n    }\n    <div class=\"buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n        {{ customize().createButtonLabel }}\n      </button>\n      @if (!customize().hideCancelButton) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ customize().cancelButtonLabel }}\n        </button>\n      }\n    </div>\n  </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (formGroup.controls.settingType.value) {\n    @case (SettingTypeEnum.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Int) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Double) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Boolean) {\n      <div class=\"toggle\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n  <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n    <mat-select [formControl]=\"formControl\">\n      @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n        <mat-option [value]=\"idx\">\n          @if (predefinedVariation.controls.name.value) {\n            {{ predefinedVariation.controls.name.value }}\n          } @else {\n            {{ predefinedVariation.controls.valueForComparison.value }}\n          }\n        </mat-option>\n      }\n    </mat-select>\n    @if (formControl.invalid) {\n      <mat-error>\n        {{ FormHelper.getErrorMessage(formControl) }}\n      </mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .centered{display:flex;align-items:center}.container .form>* .init-value-section mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .header-tooltip-icon{font-size:14px;width:14px;height:14px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}h4{margin-bottom:8px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"], outputs: ["componentError"] }, { kind: "component", type: ConfigSelectComponent, selector: "app-config-select", inputs: ["valueFormControl", "productId", "preSelectedConfigId"], outputs: ["componentError"] }, { kind: "component", type: EnvironmentSelectComponent, selector: "app-environment-select", inputs: ["valueFormControl", "productId"], outputs: ["componentError"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "component", type: BoxComponent, selector: "app-box", inputs: ["type", "title"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CreateFeatureFlagComponent, decorators: [{
             type: Component,
@@ -8105,7 +8242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         LoaderComponent,
                         BoxComponent,
                         MatCheckbox,
-                    ], template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ customize().targetSectionHeader }}</div>\n      @if (customize().targetSectionDescription) {\n        <p>{{ customize().targetSectionDescription }}</p>\n      }\n      @if (this.presetProductAndConfig()) {\n        <p>\n          Pre selected product\n          <b>{{ this.presetProductAndConfig()!.productName }}</b>\n        </p>\n        <p>\n          Pre selected config\n          <b>{{ this.presetProductAndConfig()!.configName }}</b>\n        </p>\n      }\n      <app-product-select\n        name=\"productId\"\n        [hidden]=\"this.presetProductAndConfig()\"\n        [basicAuthUsername]=\"basicAuthUsername()\"\n        [basicAuthPassword]=\"basicAuthPassword()\"\n        [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n        [valueFormControl]=\"formGroup.controls.productId\"\n        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [hidden]=\"this.presetProductAndConfig()\"\n          [basicAuthUsername]=\"basicAuthUsername()\"\n          [basicAuthPassword]=\"basicAuthPassword()\"\n          [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          [customDropdown]=\"true\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n\n      <div class=\"header\">2. {{ customize().flagSectionHeader }}</div>\n      @if (customize().flagSectionDescription) {\n        <p>{{ customize().flagSectionDescription }}</p>\n      }\n      @if (loadingComputed()) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field\" appearance=\"outline\">\n          <mat-label>Type</mat-label>\n          <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n            <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name for humans</mat-label>\n          <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n          <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n          @if (formGroup.controls.name.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field key\" appearance=\"outline\">\n          <mat-label>Key for programs</mat-label>\n          <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n          <mat-hint>Your application will use this key to access the setting.</mat-hint>\n          @if (formGroup.controls.key.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field hint last\" appearance=\"outline\">\n          @if (!reasonRequired()) {\n            <mat-label>Hint (Optional)</mat-label>\n          } @else {\n            <mat-label>Hint</mat-label>\n          }\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>Explain what this setting controls. This helps your team use it correctly later.</mat-hint>\n          @if (formGroup.controls.hint.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n            </mat-error>\n          }\n        </mat-form-field>\n\n        <div class=\"init-value-section\">\n          @if (configEvaluationVersion === EvaluationVersion.V2) {\n            @if (true && formGroup.controls.settingType.value === SettingTypeEnum.String) {\n              <h4>Require valid JSON?</h4>\n              <div class=\"centered\">\n                <mat-checkbox color=\"primary\" formControlName=\"isJson\">\n                  <span>Only valid JSON values can be saved</span>\n                </mat-checkbox>\n                <mat-icon\n                  color=\"primary\"\n                  class=\"info-icon\"\n                  matTooltip=\"Your application will get a string value. You will need to parse it into JSON if necessary.\">\n                  info\n                </mat-icon>\n              </div>\n            }\n\n            <h4>How to set values?</h4>\n            <div class=\"value-mode-question\">\n              <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n                <mat-select formControlName=\"useVariations\" class=\"choose\">\n                  <mat-option [value]=\"false\">\n                    {{\n                      formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n                        ? \"use an ON/OFF toggle\"\n                        : \"enter free-form values\"\n                    }}\n                  </mat-option>\n                  <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <a href=\"https://configcat.com/docs/advanced/predefined-variations\" target=\"_blank\">\n                <mat-icon class=\"info-icon\" color=\"primary\" matTooltip=\"Click to read more about value-modes.\">\n                  info\n                </mat-icon>\n              </a>\n            </div>\n            @if (formGroup.controls.useVariations.value) {\n              <p>Define the values team members can choose from. At least two variations are required.</p>\n              <div class=\"variations\">\n                <div class=\"predef-var-table-scroll\">\n                  <table mat-table [dataSource]=\"dataSource\">\n                    <ng-container matColumnDef=\"color\">\n                      <th *matHeaderCellDef mat-header-cell></th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n                        <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"value\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Served value *</span>\n                          <mat-icon\n                            matTooltip=\"Your application will get this value when evaluating the setting.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          @switch (formGroup.controls.settingType.value) {\n                            @case (SettingTypeEnum.Boolean) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.boolValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.String) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.stringValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Int) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.intValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Double) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.doubleValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"name\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Display name (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                            <input\n                              matInput\n                              [formControl]=\"row.controls.name\"\n                              [placeholder]=\"row.controls.valueForComparison.value\" />\n                            @if (row.controls.name.invalid) {\n                              <mat-error class=\"small-error\">\n                                {{ FormHelper.getErrorMessage(row.controls.name) }}\n                              </mat-error>\n                            }\n                          </mat-form-field>\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"hint\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Hint (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <mat-form-field\n                          appearance=\"outline\"\n                          subscriptSizing=\"dynamic\"\n                          class=\"small-form-field suffixed\">\n                          <button\n                            matSuffix\n                            class=\"input-suffix-button\"\n                            type=\"button\"\n                            mat-icon-button\n                            matTooltip=\"Advanced editor\"\n                            (click)=\"expandHint(row.controls.hint)\">\n                            <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                          </button>\n                          <input matInput [formControl]=\"row.controls.hint\" />\n                          @if (row.controls.hint.invalid) {\n                            <mat-error>\n                              {{ FormHelper.getErrorMessage(row.controls.hint) }}\n                            </mat-error>\n                          }\n                        </mat-form-field>\n                      </td>\n                    </ng-container>\n                    <ng-container matColumnDef=\"actions\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <span>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</span>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div\n                          [matTooltip]=\"\n                            formGroup.controls.predefinedVariations.controls.length > 2\n                              ? 'Remove item'\n                              : 'At least 2 predefined variations should be set.'\n                          \">\n                          <button\n                            mat-icon-button\n                            type=\"button\"\n                            [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n                            (click)=\"removeVariation(i)\">\n                            <mat-icon>delete</mat-icon>\n                          </button>\n                        </div>\n                      </td>\n                    </ng-container>\n                    <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n                    <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n                  </table>\n                </div>\n\n                @if (\n                  formGroup.controls.predefinedVariations.invalid &&\n                  !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n                ) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                <div class=\"add-variation\">\n                  @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                    <div\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n                      <button\n                        type=\"button\"\n                        mat-stroked-button\n                        color=\"primary\"\n                        [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                        (click)=\"addVariation()\">\n                        <mat-icon>add</mat-icon>\n                        Add variation\n                      </button>\n                    </div>\n                  } @else {\n                    <app-box type=\"info\" class=\"bool-variation-info\">\n                      For more variations, create a flag of another type.\n                      <a\n                        href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\">\n                        Read more\n                      </a>\n                      about setting types.\n                    </app-box>\n                  }\n                </div>\n              </div>\n            }\n          }\n\n          <h4>Initial values</h4>\n          <div class=\"initial-value-first-line\">\n            The initial value\n            <mat-form-field\n              appearance=\"outline\"\n              class=\"small-form-field initial-value-environment-type\"\n              subscriptSizing=\"dynamic\">\n              <mat-select formControlName=\"initialValuesPerEnvironment\">\n                <mat-option [value]=\"false\">in all environments</mat-option>\n                <mat-option [value]=\"true\">per environment</mat-option>\n              </mat-select>\n            </mat-form-field>\n            will be set to\n          </div>\n          @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n            @if (formGroup.controls.useVariations.value) {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n              </div>\n            } @else {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"settingValueTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n              </div>\n            }\n          }\n\n          @if (formGroup.controls.initialValuesPerEnvironment.value) {\n            @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n              <div formArrayName=\"initialValues\">\n                <div class=\"value-field\" [formGroupName]=\"index\">\n                  @if (formGroup.controls.useVariations.value) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n                  }\n                  <div class=\"environment\">\n                    in\n                    <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n                      {{ initialValue.controls.environmentName.value }}\n                    </strong>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n\n      @if (!customize().hideLinkSection) {\n        <div class=\"header\">3. {{ customize().linkSectionHeader }}</div>\n        @if (customize().linkSectionDescription) {\n          <p>{{ customize().linkSectionDescription }}</p>\n        }\n        @if (formGroup.controls.productId.value) {\n          <app-environment-select\n            [basicAuthUsername]=\"basicAuthUsername()\"\n            [productId]=\"formGroup.controls.productId.value\"\n            [basicAuthPassword]=\"basicAuthPassword()\"\n            [valueFormControl]=\"formGroup.controls.environmentId\"\n            [customDropdown]=\"true\"\n            (componentError)=\"dropdownComponentFailed($event)\" />\n        }\n      }\n    </div>\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <div class=\"error\">\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </div>\n    }\n    <div class=\"buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n        {{ customize().createButtonLabel }}\n      </button>\n      @if (!customize().hideCancelButton) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ customize().cancelButtonLabel }}\n        </button>\n      }\n    </div>\n  </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (formGroup.controls.settingType.value) {\n    @case (SettingTypeEnum.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Int) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Double) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Boolean) {\n      <div class=\"toggle\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n  <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n    <mat-select [formControl]=\"formControl\">\n      @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n        <mat-option [value]=\"idx\">\n          @if (predefinedVariation.controls.name.value) {\n            {{ predefinedVariation.controls.name.value }}\n          } @else {\n            {{ predefinedVariation.controls.valueForComparison.value }}\n          }\n        </mat-option>\n      }\n    </mat-select>\n    @if (formControl.invalid) {\n      <mat-error>\n        {{ FormHelper.getErrorMessage(formControl) }}\n      </mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .centered{display:flex;align-items:center}.container .form>* .init-value-section mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .header-tooltip-icon{font-size:14px;width:14px;height:14px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}h4{margin-bottom:8px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"] }]
+                    ], template: "<div class=\"container\">\n  <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n    <div>\n      <div class=\"header\">1. {{ customize().targetSectionHeader }}</div>\n      @if (customize().targetSectionDescription) {\n        <p>{{ customize().targetSectionDescription }}</p>\n      }\n      @if (this.presetProductAndConfig()) {\n        <p>\n          Pre selected product\n          <b>{{ this.presetProductAndConfig()!.productName }}</b>\n        </p>\n        <p>\n          Pre selected config\n          <b>{{ this.presetProductAndConfig()!.configName }}</b>\n        </p>\n      }\n      <app-product-select\n        name=\"productId\"\n        [hidden]=\"this.presetProductAndConfig()\"\n        [basicAuthUsername]=\"basicAuthUsername()\"\n        [basicAuthPassword]=\"basicAuthPassword()\"\n        [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n        [valueFormControl]=\"formGroup.controls.productId\"\n        [customDropdown]=\"true\"\n        (componentError)=\"dropdownComponentFailed($event)\" />\n      @if (formGroup.controls.productId.value) {\n        <app-config-select\n          [hidden]=\"this.presetProductAndConfig()\"\n          [basicAuthUsername]=\"basicAuthUsername()\"\n          [basicAuthPassword]=\"basicAuthPassword()\"\n          [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n          [productId]=\"formGroup.controls.productId.value\"\n          [valueFormControl]=\"formGroup.controls.configId\"\n          [customDropdown]=\"true\"\n          (componentError)=\"dropdownComponentFailed($event)\" />\n      }\n\n      <div class=\"header\">2. {{ customize().flagSectionHeader }}</div>\n      @if (customize().flagSectionDescription) {\n        <p>{{ customize().flagSectionDescription }}</p>\n      }\n      @if (loadingComputed()) {\n        <app-loader />\n      } @else {\n        <mat-form-field class=\"form-field\" appearance=\"outline\">\n          <mat-label>Type</mat-label>\n          <mat-select placeholder=\"Type\" formControlName=\"settingType\" panelClass=\"'custom-dropdown-below'\">\n            <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n            <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class=\"form-field name\" appearance=\"outline\">\n          <mat-label>Name for humans</mat-label>\n          <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n          <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n          @if (formGroup.controls.name.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field key\" appearance=\"outline\">\n          <mat-label>Key for programs</mat-label>\n          <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n          <mat-hint>Your application will use this key to access the setting.</mat-hint>\n          @if (formGroup.controls.key.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n            </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"form-field hint last\" appearance=\"outline\">\n          @if (!reasonRequired()) {\n            <mat-label>Hint (Optional)</mat-label>\n          } @else {\n            <mat-label>Hint</mat-label>\n          }\n          <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n          <mat-hint>Explain what this setting controls. This helps your team use it correctly later.</mat-hint>\n          @if (formGroup.controls.hint.invalid) {\n            <mat-error>\n              {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n            </mat-error>\n          }\n        </mat-form-field>\n\n        <div class=\"init-value-section\">\n          @if (configEvaluationVersion === EvaluationVersion.V2) {\n            @if (true && formGroup.controls.settingType.value === SettingTypeEnum.String) {\n              <h4>Require valid JSON?</h4>\n              <div class=\"centered\">\n                <mat-checkbox color=\"primary\" formControlName=\"isJson\">\n                  <span>Only valid JSON values can be saved</span>\n                </mat-checkbox>\n                <mat-icon\n                  color=\"primary\"\n                  class=\"info-icon\"\n                  matTooltip=\"Your application will get a string value. You will need to parse it into JSON if necessary.\">\n                  info\n                </mat-icon>\n              </div>\n            }\n\n            <h4>How to set values?</h4>\n            <div class=\"value-mode-question\">\n              <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n                <mat-select formControlName=\"useVariations\" class=\"choose\">\n                  <mat-option [value]=\"false\">\n                    {{\n                      formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n                        ? \"use an ON/OFF toggle\"\n                        : \"enter free-form values\"\n                    }}\n                  </mat-option>\n                  <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <a href=\"https://configcat.com/docs/advanced/predefined-variations\" target=\"_blank\">\n                <mat-icon class=\"info-icon\" color=\"primary\" matTooltip=\"Click to read more about value-modes.\">\n                  info\n                </mat-icon>\n              </a>\n            </div>\n            @if (formGroup.controls.useVariations.value) {\n              <p>\n                Define the values team members can choose from.\n                {{\n                  formGroup.controls.settingType.value !== SettingTypeEnum.Boolean\n                    ? \"At least two variations are required.\"\n                    : null\n                }}\n              </p>\n              <div class=\"variations\">\n                <div class=\"predef-var-table-scroll\">\n                  <table mat-table [dataSource]=\"dataSource\">\n                    <ng-container matColumnDef=\"color\">\n                      <th *matHeaderCellDef mat-header-cell></th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n                        <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"value\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Served value *</span>\n                          <mat-icon\n                            matTooltip=\"Your application will get this value when evaluating the setting.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          @switch (formGroup.controls.settingType.value) {\n                            @case (SettingTypeEnum.Boolean) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.boolValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.String) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.stringValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Int) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.intValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                            @case (SettingTypeEnum.Double) {\n                              <ng-container\n                                [ngTemplateOutlet]=\"settingValueTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                  formControl: row.controls.value.controls.doubleValue,\n                                  setFocus: i === focusIndex,\n                                }\" />\n                            }\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"name\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Display name (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional friendly name. This will be displayed on the ConfigCat Dashboard.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <div class=\"predefined-component\">\n                          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n                            <input\n                              matInput\n                              [formControl]=\"row.controls.name\"\n                              [placeholder]=\"row.controls.valueForComparison.value\" />\n                            @if (row.controls.name.invalid) {\n                              <mat-error class=\"small-error\">\n                                {{ FormHelper.getErrorMessage(row.controls.name) }}\n                              </mat-error>\n                            }\n                          </mat-form-field>\n                        </div>\n                      </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"hint\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <div class=\"centered\">\n                          <span>Hint (optional)</span>\n                          <mat-icon\n                            matTooltip=\"Optional hint. This will be displayed in a tooltip.\"\n                            class=\"info-icon header-tooltip-icon\">\n                            info\n                          </mat-icon>\n                        </div>\n                      </th>\n                      <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n                        <mat-form-field\n                          appearance=\"outline\"\n                          subscriptSizing=\"dynamic\"\n                          class=\"small-form-field suffixed\">\n                          <button\n                            matSuffix\n                            class=\"input-suffix-button\"\n                            type=\"button\"\n                            mat-icon-button\n                            matTooltip=\"Advanced editor\"\n                            (click)=\"expandHint(row.controls.hint)\">\n                            <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n                          </button>\n                          <input matInput [formControl]=\"row.controls.hint\" />\n                          @if (row.controls.hint.invalid) {\n                            <mat-error>\n                              {{ FormHelper.getErrorMessage(row.controls.hint) }}\n                            </mat-error>\n                          }\n                        </mat-form-field>\n                      </td>\n                    </ng-container>\n                    <ng-container matColumnDef=\"actions\">\n                      <th *matHeaderCellDef mat-header-cell>\n                        <span>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</span>\n                      </th>\n                      <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n                        <div\n                          [matTooltip]=\"\n                            formGroup.controls.predefinedVariations.controls.length > 2\n                              ? 'Remove item'\n                              : 'At least 2 predefined variations should be set.'\n                          \">\n                          <button\n                            mat-icon-button\n                            type=\"button\"\n                            [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n                            (click)=\"removeVariation(i)\">\n                            <mat-icon>delete</mat-icon>\n                          </button>\n                        </div>\n                      </td>\n                    </ng-container>\n                    <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n                    <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n                  </table>\n                </div>\n\n                @if (\n                  formGroup.controls.predefinedVariations.invalid &&\n                  !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n                ) {\n                  <mat-error>\n                    {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n                  </mat-error>\n                }\n                <div class=\"add-variation\">\n                  @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n                    <div\n                      [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n                      [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\">\n                      <button\n                        type=\"button\"\n                        mat-stroked-button\n                        color=\"primary\"\n                        [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n                        (click)=\"addVariation()\">\n                        <mat-icon>add</mat-icon>\n                        Add variation\n                      </button>\n                    </div>\n                  } @else {\n                    <app-box type=\"info\" class=\"bool-variation-info\">\n                      For more variations, create a flag of another type.\n                      <a\n                        href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\">\n                        Read more\n                      </a>\n                      about setting types.\n                    </app-box>\n                  }\n                </div>\n              </div>\n            }\n          }\n\n          <h4>Initial values</h4>\n          <div class=\"initial-value-first-line\">\n            The initial value\n            <mat-form-field\n              appearance=\"outline\"\n              class=\"small-form-field initial-value-environment-type\"\n              subscriptSizing=\"dynamic\">\n              <mat-select formControlName=\"initialValuesPerEnvironment\">\n                <mat-option [value]=\"false\">in all environments</mat-option>\n                <mat-option [value]=\"true\">per environment</mat-option>\n              </mat-select>\n            </mat-form-field>\n            will be set to\n          </div>\n          @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n            @if (formGroup.controls.useVariations.value) {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n              </div>\n            } @else {\n              <div class=\"value-field all\">\n                <ng-container\n                  [ngTemplateOutlet]=\"settingValueTemplate\"\n                  [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n              </div>\n            }\n          }\n\n          @if (formGroup.controls.initialValuesPerEnvironment.value) {\n            @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n              <div formArrayName=\"initialValues\">\n                <div class=\"value-field\" [formGroupName]=\"index\">\n                  @if (formGroup.controls.useVariations.value) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"settingValueTemplate\"\n                      [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n                  }\n                  <div class=\"environment\">\n                    in\n                    <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n                      {{ initialValue.controls.environmentName.value }}\n                    </strong>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n\n      @if (!customize().hideLinkSection) {\n        <div class=\"header\">3. {{ customize().linkSectionHeader }}</div>\n        @if (customize().linkSectionDescription) {\n          <p>{{ customize().linkSectionDescription }}</p>\n        }\n        @if (formGroup.controls.productId.value) {\n          <app-environment-select\n            [basicAuthUsername]=\"basicAuthUsername()\"\n            [productId]=\"formGroup.controls.productId.value\"\n            [basicAuthPassword]=\"basicAuthPassword()\"\n            [valueFormControl]=\"formGroup.controls.environmentId\"\n            [customDropdown]=\"true\"\n            (componentError)=\"dropdownComponentFailed($event)\" />\n        }\n      }\n    </div>\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <div class=\"error\">\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </div>\n    }\n    <div class=\"buttons\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        type=\"submit\"\n        [disabled]=\"submitting() || loadingComputed() || !formGroup.valid\">\n        {{ customize().createButtonLabel }}\n      </button>\n      @if (!customize().hideCancelButton) {\n        <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n          {{ customize().cancelButtonLabel }}\n        </button>\n      }\n    </div>\n  </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n  @switch (formGroup.controls.settingType.value) {\n    @case (SettingTypeEnum.String) {\n      <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          type=\"text\"\n          placeholder=\"Add text ...\"\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n        <button\n          matSuffix\n          class=\"input-suffix-button\"\n          type=\"button\"\n          mat-icon-button\n          matTooltip=\"Advanced editor\"\n          (click)=\"expandText(formControl)\">\n          <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n        </button>\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Int) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Double) {\n      <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n        @if (formControl.invalid) {\n          <mat-error class=\"small-error\">\n            {{ FormHelper.getErrorMessage(formControl) }}\n          </mat-error>\n        }\n        <input\n          matInput\n          type=\"number\"\n          required\n          name=\"index\"\n          inputDisplayNormalizer\n          focus\n          [isFocused]=\"setFocus\"\n          [formControl]=\"formControl\" />\n      </mat-form-field>\n    }\n    @case (SettingTypeEnum.Boolean) {\n      <div class=\"toggle\">\n        <label class=\"switch\">\n          <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n          <span class=\"slider\"></span>\n        </label>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n  <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n    <mat-select [formControl]=\"formControl\">\n      @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n        <mat-option [value]=\"idx\">\n          @if (predefinedVariation.controls.name.value) {\n            {{ predefinedVariation.controls.name.value }}\n          } @else {\n            {{ predefinedVariation.controls.valueForComparison.value }}\n          }\n        </mat-option>\n      }\n    </mat-select>\n    @if (formControl.invalid) {\n      <mat-error>\n        {{ FormHelper.getErrorMessage(formControl) }}\n      </mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .centered{display:flex;align-items:center}.container .form>* .init-value-section mat-icon.info-icon{color:var(--info-icon-color);margin-left:8px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px;display:flex}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .header-tooltip-icon{font-size:14px;width:14px;height:14px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}h4{margin-bottom:8px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"] }]
         }], propDecorators: { customize: [{ type: i0.Input, args: [{ isSignal: true, alias: "customize", required: false }] }], presetProductAndConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetProductAndConfig", required: false }] }], createInitiated: [{ type: i0.Output, args: ["createInitiated"] }], resizeRequested: [{ type: i0.Output, args: ["resizeRequested"] }], cancelInitiated: [{ type: i0.Output, args: ["cancelInitiated"] }], selectDropdownPanelChangedReqested: [{ type: i0.Output, args: ["selectDropdownPanelChangedReqested"] }], componentError: [{ type: i0.Output, args: ["componentError"] }] } });
 
 const DEFAULT_CUSTOMIZE_CREATE_CONFIG = {
@@ -8119,6 +8256,7 @@ class CreateConfigComponent extends BaseComponent {
     constructor() {
         super(...arguments);
         this.formBuilder = inject(NonNullableFormBuilder);
+        this.dialog = inject(MatDialog);
         this.customize = input(DEFAULT_CUSTOMIZE_CREATE_CONFIG, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "customize" }] : /* istanbul ignore next */ []));
         this.presetProduct = input(/* @ts-ignore */
@@ -8186,6 +8324,19 @@ class CreateConfigComponent extends BaseComponent {
                 if (error instanceof HttpErrorResponse && error.status === 401) {
                     this.componentError.emit(error);
                 }
+                if (error instanceof HttpErrorResponse && error.status === 402) {
+                    //override the form validity and show dialog
+                    this.formGroup.updateValueAndValidity();
+                    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.getDashboardBasePath() + "/organization/plans",
+                            noButtonLabel: "Close",
+                        },
+                    });
+                }
             },
         });
     }