ng-configcat-publicapi-ui 4.1.3 → 4.2.1

package/esm2022/lib/v2/feature-flag/percentage-evaluation-attribute-dialog/percentage-evaluation-attribute-dialog.component.mjs

@@ -52,10 +52,10 @@ export class PercentageEvaluationAttributeDialogComponent {
         }
         this.dialogRef.close({ percentageEvaluationAttribute: this.formControl.value });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: i2.FormGenerator }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: PercentageEvaluationAttributeDialogComponent, selector: "app-percentage-evaluation-attribute-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Change percentage evaluation attribute</h1>\n<div mat-dialog-content class=\"container\">\n    <p class=\"description\">\n        When evaluating percentage-based user targeting, ConfigCat should use a specific user attribute as the basis for\n        determining whether a user falls within the targeted percentage group.</p>\n\n    <div class=\"components\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>Evaluation attribute</mat-label>\n            <mat-hint>This attribute will be used in all percentage based targeting within this feature flag.</mat-hint>\n            <select matNativeControl (change)=\"attributeChanged($event)\" [disabled]=\"formControl.disabled\">\n                <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes; let i = index\"\n                    [selected]=\"comparisonAttribute === formControl.value || (formControl.value === null && i === 0)\">\n                    {{comparisonAttribute}}</option>\n                <option [selected]=\"!isDefault(formControl.value)\">\n                    Custom\n                </option>\n            </select>\n        </mat-form-field>\n        <div class=\"custom\" [hidden]=\"isDefault(formControl.value)\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>Custom attribute</mat-label>\n                <input matInput type=\"text\" [formControl]=\"formControl\">\n                <mat-error *ngIf=\"formControl.invalid\">\n                    {{FormHelper.getErrorMessage(formControl)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <p class=\"read-more\"> <a\n            href=\"https://configcat.com/docs/targeting/percentage-options/#percentage-options-based-on-other-user-attributes\"\n            target=\"_blank\" rel=\"noopener noreferrer\">\n            Read more </a> about percentage-based targeting in the docs.</p>\n</div>\n<div mat-dialog-actions>\n    <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button type=\"button\" mat-stroked-button (click)=\"close()\">Cancel</button>\n</div>", styles: [".container{width:100%;display:flex;flex-direction:column}.container .description{padding:5px 0 10px}.container .components{display:flex}.container .components .custom{margin-left:16px}.container .read-more{padding-top:5px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: i2.FormGenerator }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PercentageEvaluationAttributeDialogComponent, selector: "app-percentage-evaluation-attribute-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Change percentage evaluation attribute</h1>\n<div mat-dialog-content class=\"container\">\n    <p class=\"description\">\n        When evaluating percentage-based user targeting, ConfigCat should use a specific user attribute as the basis for\n        determining whether a user falls within the targeted percentage group.</p>\n\n    <div class=\"components\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>Evaluation attribute</mat-label>\n            <mat-hint>This attribute will be used in all percentage based targeting within this feature flag.</mat-hint>\n            <select matNativeControl (change)=\"attributeChanged($event)\" [disabled]=\"formControl.disabled\">\n                <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes; let i = index\"\n                    [selected]=\"comparisonAttribute === formControl.value || (formControl.value === null && i === 0)\">\n                    {{comparisonAttribute}}</option>\n                <option [selected]=\"!isDefault(formControl.value)\">\n                    Custom\n                </option>\n            </select>\n        </mat-form-field>\n        <div class=\"custom\" [hidden]=\"isDefault(formControl.value)\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>Custom attribute</mat-label>\n                <input matInput type=\"text\" [formControl]=\"formControl\">\n                <mat-error *ngIf=\"formControl.invalid\">\n                    {{FormHelper.getErrorMessage(formControl)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <p class=\"read-more\"> <a\n            href=\"https://configcat.com/docs/targeting/percentage-options/#percentage-options-based-on-other-user-attributes\"\n            target=\"_blank\" rel=\"noopener noreferrer\">\n            Read more </a> about percentage-based targeting in the docs.</p>\n</div>\n<div mat-dialog-actions>\n    <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button type=\"button\" mat-stroked-button (click)=\"close()\">Cancel</button>\n</div>", styles: [".container{width:100%;display:flex;flex-direction:column}.container .description{padding:5px 0 10px}.container .components{display:flex}.container .components .custom{margin-left:16px}.container .read-more{padding-top:5px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-percentage-evaluation-attribute-dialog', template: "<h1 mat-dialog-title>Change percentage evaluation attribute</h1>\n<div mat-dialog-content class=\"container\">\n    <p class=\"description\">\n        When evaluating percentage-based user targeting, ConfigCat should use a specific user attribute as the basis for\n        determining whether a user falls within the targeted percentage group.</p>\n\n    <div class=\"components\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-label>Evaluation attribute</mat-label>\n            <mat-hint>This attribute will be used in all percentage based targeting within this feature flag.</mat-hint>\n            <select matNativeControl (change)=\"attributeChanged($event)\" [disabled]=\"formControl.disabled\">\n                <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes; let i = index\"\n                    [selected]=\"comparisonAttribute === formControl.value || (formControl.value === null && i === 0)\">\n                    {{comparisonAttribute}}</option>\n                <option [selected]=\"!isDefault(formControl.value)\">\n                    Custom\n                </option>\n            </select>\n        </mat-form-field>\n        <div class=\"custom\" [hidden]=\"isDefault(formControl.value)\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>Custom attribute</mat-label>\n                <input matInput type=\"text\" [formControl]=\"formControl\">\n                <mat-error *ngIf=\"formControl.invalid\">\n                    {{FormHelper.getErrorMessage(formControl)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <p class=\"read-more\"> <a\n            href=\"https://configcat.com/docs/targeting/percentage-options/#percentage-options-based-on-other-user-attributes\"\n            target=\"_blank\" rel=\"noopener noreferrer\">\n            Read more </a> about percentage-based targeting in the docs.</p>\n</div>\n<div mat-dialog-actions>\n    <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button type=\"button\" mat-stroked-button (click)=\"close()\">Cancel</button>\n</div>", styles: [".container{width:100%;display:flex;flex-direction:column}.container .description{padding:5px 0 10px}.container .components{display:flex}.container .components .custom{margin-left:16px}.container .read-more{padding-top:5px}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: i2.FormGenerator }, { type: undefined, decorators: [{

package/esm2022/lib/v2/feature-flag-item.component.mjs

@@ -292,12 +292,12 @@ export class FeatureFlagItemComponent extends BaseComponent {
         this.flagState.panelExpanded = expandedState;
         this.expandedStateChanged.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FeatureFlagItemComponent, deps: [{ token: i1.FormGenerator }, { token: i2.MatDialog }, { token: i3.MatSnackBar }, { token: i4.PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: FeatureFlagItemComponent, selector: "configcat-feature-flag-item", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", settingId: "settingId", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\" [canDeleteSetting]=\"canDeleteSetting\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</span>\n                </button>\n                <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n                    <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n                        <span>Something went wrong and we could not save your settings. You can try again or <a\n                                href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact\n                                us.</a></span>\n                    </div>\n                    <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n                        <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.FeatureFlagComponent, selector: "app-feature-flag", inputs: ["formGroup", "flagState", "segments", "featureFlagLimitations", "hasOtherEnvironment", "environmentName", "showEnvironmentName", "deleteSettingText", "canDeleteSetting"], outputs: ["addSegmentConditionRequestedWithoutSegments", "expandedChanged", "deleteSettingRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "directive", type: i10.TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureFlagItemComponent, deps: [{ token: i1.FormGenerator }, { token: i2.MatDialog }, { token: i3.MatSnackBar }, { token: i4.PublicApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeatureFlagItemComponent, selector: "configcat-feature-flag-item", inputs: { productId: "productId", environmentId: "environmentId", configId: "configId", settingId: "settingId", canDeleteSetting: "canDeleteSetting", deleteSettingText: "deleteSettingText", showEnvironmentName: "showEnvironmentName" }, outputs: { deleteSettingRequested: "deleteSettingRequested", loadSucceeded: "loadSucceeded", loadFailed: "loadFailed", saveSucceeded: "saveSucceeded", saveFailed: "saveFailed", expandedStateChanged: "expandedStateChanged", formValuesChanged: "formValuesChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\" [canDeleteSetting]=\"canDeleteSetting\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</span>\n                </button>\n                <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n                    <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n                        <span>Something went wrong and we could not save your settings. You can try again or <a\n                                href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact\n                                us.</a></span>\n                    </div>\n                    <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n                        <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.FeatureFlagComponent, selector: "app-feature-flag", inputs: ["formGroup", "flagState", "segments", "featureFlagLimitations", "hasOtherEnvironment", "environmentName", "showEnvironmentName", "deleteSettingText", "canDeleteSetting"], outputs: ["addSegmentConditionRequestedWithoutSegments", "expandedChanged", "deleteSettingRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "directive", type: i10.TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FeatureFlagItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureFlagItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'configcat-feature-flag-item', template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\" [canDeleteSetting]=\"canDeleteSetting\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</span>\n                </button>\n                <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n                    <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n                        <span>Something went wrong and we could not save your settings. You can try again or <a\n                                href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact\n                                us.</a></span>\n                    </div>\n                    <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n                        <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"] }]
+            args: [{ selector: 'configcat-feature-flag-item', template: "<div class=\"container\">\n    <ng-container *ngIf=\"!loading\">\n        <form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\" id=\"feature-flag-form\">\n            <div [ngClass]=\"{'invalid-flag': formGroup.invalid}\">\n                <app-feature-flag [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    (deleteSettingRequested)=\"onDeleteSettingRequested($event)\"\n                    [featureFlagLimitations]=\"settingFormula.featureFlagLimitations\" [hasOtherEnvironment]=\"false\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments()\"\n                    (prerequisiteConditionChanged)=\"recalcPrerequisites()\" (recalcAddButtons)=\"recalcAddButtons()\"\n                    (expandedChanged)=\"expandedChanged($event)\"\n                    [showEnvironmentName]=\"showEnvironmentName\" [environmentName]=\"settingFormula.environment.name\"\n                    [deleteSettingText]=\"deleteSettingText\" [canDeleteSetting]=\"canDeleteSetting\">\n                </app-feature-flag>\n            </div>\n            <div class=\"save\" *ngIf=\"!settingFormula.readOnly && formGroup?.dirty\">\n                <button class=\"save-button\" mat-flat-button color=\"warn\" type=\"submit\" [class.animate]=\"formGroup.dirty\"\n                    [track]=\"['save & publish click', 'feature flags and settings']\">\n                    <mat-icon>backup</mat-icon> <span> Save & publish changes</span>\n                </button>\n                <button type=\"button\" class=\"revert-button\" mat-stroked-button (click)=\"revert()\"\n                    [track]=\"['revert click', 'feature flags and settings']\">\n                    <span>Revert</span>\n                </button>\n                <div class=\"feedback\" *ngIf=\"formGroup.touched && formGroup.invalid && showFeedBackMessage\">\n                    <div class=\"error\" *ngIf=\"formGroup.errors && formGroup.errors.internalServerError\">\n                        <span>Something went wrong and we could not save your settings. You can try again or <a\n                                href=\"https://configcat.com/support\" target=\"_blank\" rel=\"noopener noreferrer\">contact\n                                us.</a></span>\n                    </div>\n                    <div class=\"error\" *ngIf=\"!formGroup.errors || !formGroup.errors.internalServerError\">\n                        <span>Oh no! A feature flag has invalid or missing data.&nbsp;</span>\n                    </div>\n                </div>\n            </div>\n        </form>\n\n    </ng-container>\n</div>", styles: [".container .expand-collapse{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-left:auto;margin-top:.3rem;display:flex;flex-wrap:nowrap}.container .expand-collapse .btn{font-size:.6em;padding:0 8px;min-width:105px}.container .expand-collapse .btn mat-icon{font-size:14px;width:14px;height:14px;margin-right:4px;color:#838383}.container .expand-collapse .expand{margin-right:6px}.container .read-only-notification{margin-top:.6rem}.container .save{position:sticky;bottom:0;background-color:#fff;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;z-index:999;padding-top:.5rem;padding-bottom:.5rem}.container .save .save-button{animation:shadow-pulse 1s 3}.container .save .save-button:disabled{animation:none}.container .save>*{margin-top:.5rem;margin-bottom:.5rem;margin-right:.6em}.container .error{color:#f44336;padding:5px;font-size:.9em}.container .error a{color:#f44336;text-decoration:underline}@media (max-width: 750px){.expand-collapse{flex-wrap:wrap!important}.expand-collapse .btn{margin-bottom:2px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormGenerator }, { type: i2.MatDialog }, { type: i3.MatSnackBar }, { type: i4.PublicApiService }], propDecorators: { productId: [{
                 type: Input
             }], environmentId: [{