npm - ng-configcat-publicapi-ui - Versions diffs - 4.1.3 → 4.2.1 - Mend

ng-configcat-publicapi-ui 4.1.3 → 4.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/esm2022/lib/v2/feature-flag/evaluation-formula/targeting-rule/conditions/user-condition/user-condition.component.mjs CHANGED Viewed

@@ -417,16 +417,16 @@ export class UserConditionComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: UserConditionComponent, deps: [{ token: i1.FormGenerator }, { token: i2.MatDialog }, { token: i1.ComparisonValueListHelper }, { token: i3.Clipboard }, { token: i1.MessagingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: UserConditionComponent, selector: "app-user-condition", inputs: { targetingRuleIndex: "targetingRuleIndex", conditionIndex: "conditionIndex", readOnly: "readOnly", featureFlagLimitations: "featureFlagLimitations", formGroup: "formGroup" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserConditionComponent, deps: [{ token: i1.FormGenerator }, { token: i2.MatDialog }, { token: i1.ComparisonValueListHelper }, { token: i3.Clipboard }, { token: i1.MessagingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserConditionComponent, selector: "app-user-condition", inputs: { targetingRuleIndex: "targetingRuleIndex", conditionIndex: "conditionIndex", readOnly: "readOnly", featureFlagLimitations: "featureFlagLimitations", formGroup: "formGroup" }, providers: [
             { provide: DateAdapter, useClass: AppDateAdapter }
-        ], viewQueries: [{ propertyName: "setMatChipGrid", first: true, predicate: ["chipGrid"], descendants: true }], ngImport: i0, template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n                target=\"_blank\" rel=\"noopener noreferrer\" class=\"user-link\">user's</a></div>\n    </div>\n\n    <div class=\"wrapper-group\">\n        <div class=\"wrapper-group\">\n            <div class=\"targeting-rule-component pad-right\"\n                [ngClass]=\"{'small': defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1}\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <select matNativeControl (change)=\"attributeChanged($event)\"\n                        [disabled]=\"formGroup.controls.comparisonAttribute.disabled\" matTooltip=\"Comparison attribute\">\n                        <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes\"\n                            [selected]=\"comparisonAttribute === formGroup.controls.comparisonAttribute.value\">\n                            {{comparisonAttribute}}</option>\n                        <option\n                            [selected]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1\">\n                            Custom\n                        </option>\n                    </select>\n                </mat-form-field>\n            </div>\n            <div class=\"targeting-rule-component pad-right small\"\n                [hidden]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) !== -1\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <input matInput type=\"text\" (blur)=\"calcComparators(true)\"\n                        [formControl]=\"formGroup.controls.comparisonAttribute\" matTooltip=\"Custom comparison attribute\">\n                    <mat-error *ngIf=\"formGroup.controls.comparisonAttribute.invalid\">\n                        {{FormHelper.getErrorMessage(formGroup.controls.comparisonAttribute)}}\n                    </mat-error>\n                </mat-form-field>\n            </div>\n        </div>\n\n        <div class=\"targeting-rule-component pad-right comparator\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl (change)=\"comparatorChanged(selectedComparator)\"\n                    [(ngModel)]=\"selectedComparator\" [disabled]=\"readOnly\" matTooltip=\"Comparator\">\n                    <optgroup *ngFor=\"let group of comparatorSuggestions | keyvalue: keepOrder\"\n                        [label]=\"'&nbsp;' + group.key\">\n                        <option *ngFor=\"let comparator of group.value\" [ngValue]=\"comparator.value\">\n                            {{comparator.label}}\n                        </option>\n                    </optgroup>\n                    <optgroup [label]=\"comparatorSeparator\"></optgroup>\n                    <option value=\"showall\">&nbsp;&nbsp;SHOW ALL COMPARATORS&nbsp;&nbsp;</option>\n                </select>\n                <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"All comparators\"\n                    (click)=\"compDialog()\"><mat-icon>list_alt</mat-icon></button>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"rolloutRuleComparatorType\">\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.String\"\n            [ngTemplateOutlet]=\"textTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Semver\"\n            [ngTemplateOutlet]=\"semverTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.StringList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.SemverList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Number\"\n            [ngTemplateOutlet]=\"numberTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.DateTime\"\n            [ngTemplateOutlet]=\"dateTimeTemplate\"></ng-container>\n    </ng-container>\n\n</div>\n\n<ng-template #textTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (text)\" placeholder=\"Add text ...\" />\n            <button matPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandText()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n\n<ng-template #semverTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (semantic version)\" placeholder=\"Add semantic version ... (1.2.3)\" />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.listValue\"\n        class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n                <span class=\"chip-container\"\n                    *ngFor=\"let listValueItem of formGroup.controls.comparisonValue.controls.listValue.controls | slice:0:20; let i = index\"\n                    [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n                    <mat-chip-row (removed)=\"remove(i)\" [disabled]=\"readOnly\" [removable]=\"!readOnly\" class=\"chip\"\n                        [editable]=\"!readOnly\" (edited)=\"edit(i, $event)\"\n                        [ngClass]=\"{'invalid': isListValueItemInvalid(listValueItem)}\">\n\n                        {{listValueItem.controls.value.value}}\n\n                        <button type=\"button\" matChipRemove *ngIf=\"!readOnly\">\n                            <mat-icon>cancel</mat-icon>\n                        </button>\n                    </mat-chip-row>\n                </span>\n                <button mat-stroked-button class=\"show-all\" type=\"button\"\n                    *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.controls.length > 20\"\n                    (click)=\"expandList()\">\n                    show all {{formGroup.controls.comparisonValue.controls.listValue.controls.length}}\n                    items</button>\n                <input [disabled]=\"readOnly\" [placeholder]=\"!readOnly ? 'Add item to list ...' : ''\"\n                    [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                    matChipInputAddOnBlur (matChipInputTokenEnd)=\"add($event)\" matTooltip=\"Comparison values (list)\" />\n            </mat-chip-grid>\n            <button matIconPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"More...\"\n                [matMenuTriggerFor]=\"moreMenu\"><mat-icon>more_vert</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandList()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && formGroup.controls.comparisonValue.controls.listValue.errors\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.listValue)}}\n            </mat-error>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && !formGroup.controls.comparisonValue.controls.listValue.errors\">\n                Invalid items\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #numberTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"number\" [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n                matTooltip=\"Comparison value (number)\" placeholder=\"Add number ...\" inputDisplayNormalizer />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.doubleValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component datetime\">\n        <app-date-time-picker [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n            dateTooltip=\"Comparison value (date)\" timeTooltip=\"Comparison value (time)\" />\n    </div>\n</ng-template>\n\n\n<mat-menu #moreMenu>\n    <a mat-menu-item (click)=\"expandList()\"><mat-icon>edit_note</mat-icon>Advanced editor</a>\n    <a mat-menu-item (click)=\"copyValuesAsCsv()\"><mat-icon>content_copy</mat-icon>Copy as CSV (values only)</a>\n    <a mat-menu-item (click)=\"removeAll()\" [disabled]=\"readOnly\"><mat-icon>delete_outline</mat-icon>Remove\n        all</a>\n</mat-menu>", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:6px;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{--mdc-chip-container-height: 24px}.targeting-rule-line{--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}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:red}.show-all{font-size:.8em;margin-left:4px}.input-button{--mat-icon-button-touch-target-display: none;color:#00000070;margin-right:4px;padding:0;height:24px;width:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.input-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.input-button mat-icon{font-size:20px;height:20px;width:20px}.prefix-button{--mat-icon-button-touch-target-display: none;color:#00000070;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-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:#f1f1f1}.chip mat-icon{color:#8d8d8d}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i11.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i11.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i12.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: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.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: i13.InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: i14.ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: i15.DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }] }); }
+        ], viewQueries: [{ propertyName: "setMatChipGrid", first: true, predicate: ["chipGrid"], descendants: true }], ngImport: i0, template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n                target=\"_blank\" rel=\"noopener noreferrer\" class=\"user-link\">user's</a></div>\n    </div>\n\n    <div class=\"wrapper-group\">\n        <div class=\"wrapper-group\">\n            <div class=\"targeting-rule-component pad-right\"\n                [ngClass]=\"{'small': defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1}\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <select matNativeControl (change)=\"attributeChanged($event)\"\n                        [disabled]=\"formGroup.controls.comparisonAttribute.disabled\" matTooltip=\"Comparison attribute\">\n                        <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes\"\n                            [selected]=\"comparisonAttribute === formGroup.controls.comparisonAttribute.value\">\n                            {{comparisonAttribute}}</option>\n                        <option\n                            [selected]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1\">\n                            Custom\n                        </option>\n                    </select>\n                </mat-form-field>\n            </div>\n            <div class=\"targeting-rule-component pad-right small\"\n                [hidden]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) !== -1\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <input matInput type=\"text\" (blur)=\"calcComparators(true)\"\n                        [formControl]=\"formGroup.controls.comparisonAttribute\" matTooltip=\"Custom comparison attribute\">\n                    <mat-error *ngIf=\"formGroup.controls.comparisonAttribute.invalid\">\n                        {{FormHelper.getErrorMessage(formGroup.controls.comparisonAttribute)}}\n                    </mat-error>\n                </mat-form-field>\n            </div>\n        </div>\n\n        <div class=\"targeting-rule-component pad-right comparator\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl (change)=\"comparatorChanged(selectedComparator)\"\n                    [(ngModel)]=\"selectedComparator\" [disabled]=\"readOnly\" matTooltip=\"Comparator\">\n                    <optgroup *ngFor=\"let group of comparatorSuggestions | keyvalue: keepOrder\"\n                        [label]=\"'&nbsp;' + group.key\">\n                        <option *ngFor=\"let comparator of group.value\" [ngValue]=\"comparator.value\">\n                            {{comparator.label}}\n                        </option>\n                    </optgroup>\n                    <optgroup [label]=\"comparatorSeparator\"></optgroup>\n                    <option value=\"showall\">&nbsp;&nbsp;SHOW ALL COMPARATORS&nbsp;&nbsp;</option>\n                </select>\n                <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"All comparators\"\n                    (click)=\"compDialog()\"><mat-icon>list_alt</mat-icon></button>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"rolloutRuleComparatorType\">\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.String\"\n            [ngTemplateOutlet]=\"textTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Semver\"\n            [ngTemplateOutlet]=\"semverTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.StringList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.SemverList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Number\"\n            [ngTemplateOutlet]=\"numberTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.DateTime\"\n            [ngTemplateOutlet]=\"dateTimeTemplate\"></ng-container>\n    </ng-container>\n\n</div>\n\n<ng-template #textTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (text)\" placeholder=\"Add text ...\" />\n            <button matPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandText()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n\n<ng-template #semverTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (semantic version)\" placeholder=\"Add semantic version ... (1.2.3)\" />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.listValue\"\n        class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n                <span class=\"chip-container\"\n                    *ngFor=\"let listValueItem of formGroup.controls.comparisonValue.controls.listValue.controls | slice:0:20; let i = index\"\n                    [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n                    <mat-chip-row (removed)=\"remove(i)\" [disabled]=\"readOnly\" [removable]=\"!readOnly\" class=\"chip\"\n                        [editable]=\"!readOnly\" (edited)=\"edit(i, $event)\"\n                        [ngClass]=\"{'invalid': isListValueItemInvalid(listValueItem)}\">\n\n                        {{listValueItem.controls.value.value}}\n\n                        <button type=\"button\" matChipRemove *ngIf=\"!readOnly\">\n                            <mat-icon>cancel</mat-icon>\n                        </button>\n                    </mat-chip-row>\n                </span>\n                <button mat-stroked-button class=\"show-all\" type=\"button\"\n                    *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.controls.length > 20\"\n                    (click)=\"expandList()\">\n                    show all {{formGroup.controls.comparisonValue.controls.listValue.controls.length}}\n                    items</button>\n                <input [disabled]=\"readOnly\" [placeholder]=\"!readOnly ? 'Add item to list ...' : ''\"\n                    [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                    matChipInputAddOnBlur (matChipInputTokenEnd)=\"add($event)\" matTooltip=\"Comparison values (list)\" />\n            </mat-chip-grid>\n            <button matIconPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"More...\"\n                [matMenuTriggerFor]=\"moreMenu\"><mat-icon>more_vert</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandList()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && formGroup.controls.comparisonValue.controls.listValue.errors\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.listValue)}}\n            </mat-error>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && !formGroup.controls.comparisonValue.controls.listValue.errors\">\n                Invalid items\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #numberTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"number\" [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n                matTooltip=\"Comparison value (number)\" placeholder=\"Add number ...\" inputDisplayNormalizer />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.doubleValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component datetime\">\n        <app-date-time-picker [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n            dateTooltip=\"Comparison value (date)\" timeTooltip=\"Comparison value (time)\" />\n    </div>\n</ng-template>\n\n\n<mat-menu #moreMenu>\n    <a mat-menu-item (click)=\"expandList()\"><mat-icon>edit_note</mat-icon>Advanced editor</a>\n    <a mat-menu-item (click)=\"copyValuesAsCsv()\"><mat-icon>content_copy</mat-icon>Copy as CSV (values only)</a>\n    <a mat-menu-item (click)=\"removeAll()\" [disabled]=\"readOnly\"><mat-icon>delete_outline</mat-icon>Remove\n        all</a>\n</mat-menu>", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:6px;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{--mdc-chip-container-height: 24px}.targeting-rule-line{--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}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:red}.show-all{font-size:.8em;margin-left:4px}.input-button{--mat-icon-button-touch-target-display: none;color:#00000070;margin-right:4px;padding:0;height:24px;width:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.input-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.input-button mat-icon{font-size:20px;height:20px;width:20px}.prefix-button{--mat-icon-button-touch-target-display: none;color:#00000070;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-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:#f1f1f1}.chip mat-icon{color:#8d8d8d}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i11.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i11.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i12.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: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.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: i13.InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: i14.ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: i15.DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: UserConditionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserConditionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-user-condition', providers: [
                         { provide: DateAdapter, useClass: AppDateAdapter }
-                    ], template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n                target=\"_blank\" rel=\"noopener noreferrer\" class=\"user-link\">user's</a></div>\n    </div>\n\n    <div class=\"wrapper-group\">\n        <div class=\"wrapper-group\">\n            <div class=\"targeting-rule-component pad-right\"\n                [ngClass]=\"{'small': defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1}\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <select matNativeControl (change)=\"attributeChanged($event)\"\n                        [disabled]=\"formGroup.controls.comparisonAttribute.disabled\" matTooltip=\"Comparison attribute\">\n                        <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes\"\n                            [selected]=\"comparisonAttribute === formGroup.controls.comparisonAttribute.value\">\n                            {{comparisonAttribute}}</option>\n                        <option\n                            [selected]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1\">\n                            Custom\n                        </option>\n                    </select>\n                </mat-form-field>\n            </div>\n            <div class=\"targeting-rule-component pad-right small\"\n                [hidden]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) !== -1\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <input matInput type=\"text\" (blur)=\"calcComparators(true)\"\n                        [formControl]=\"formGroup.controls.comparisonAttribute\" matTooltip=\"Custom comparison attribute\">\n                    <mat-error *ngIf=\"formGroup.controls.comparisonAttribute.invalid\">\n                        {{FormHelper.getErrorMessage(formGroup.controls.comparisonAttribute)}}\n                    </mat-error>\n                </mat-form-field>\n            </div>\n        </div>\n\n        <div class=\"targeting-rule-component pad-right comparator\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl (change)=\"comparatorChanged(selectedComparator)\"\n                    [(ngModel)]=\"selectedComparator\" [disabled]=\"readOnly\" matTooltip=\"Comparator\">\n                    <optgroup *ngFor=\"let group of comparatorSuggestions | keyvalue: keepOrder\"\n                        [label]=\"'&nbsp;' + group.key\">\n                        <option *ngFor=\"let comparator of group.value\" [ngValue]=\"comparator.value\">\n                            {{comparator.label}}\n                        </option>\n                    </optgroup>\n                    <optgroup [label]=\"comparatorSeparator\"></optgroup>\n                    <option value=\"showall\">&nbsp;&nbsp;SHOW ALL COMPARATORS&nbsp;&nbsp;</option>\n                </select>\n                <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"All comparators\"\n                    (click)=\"compDialog()\"><mat-icon>list_alt</mat-icon></button>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"rolloutRuleComparatorType\">\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.String\"\n            [ngTemplateOutlet]=\"textTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Semver\"\n            [ngTemplateOutlet]=\"semverTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.StringList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.SemverList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Number\"\n            [ngTemplateOutlet]=\"numberTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.DateTime\"\n            [ngTemplateOutlet]=\"dateTimeTemplate\"></ng-container>\n    </ng-container>\n\n</div>\n\n<ng-template #textTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (text)\" placeholder=\"Add text ...\" />\n            <button matPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandText()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n\n<ng-template #semverTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (semantic version)\" placeholder=\"Add semantic version ... (1.2.3)\" />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.listValue\"\n        class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n                <span class=\"chip-container\"\n                    *ngFor=\"let listValueItem of formGroup.controls.comparisonValue.controls.listValue.controls | slice:0:20; let i = index\"\n                    [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n                    <mat-chip-row (removed)=\"remove(i)\" [disabled]=\"readOnly\" [removable]=\"!readOnly\" class=\"chip\"\n                        [editable]=\"!readOnly\" (edited)=\"edit(i, $event)\"\n                        [ngClass]=\"{'invalid': isListValueItemInvalid(listValueItem)}\">\n\n                        {{listValueItem.controls.value.value}}\n\n                        <button type=\"button\" matChipRemove *ngIf=\"!readOnly\">\n                            <mat-icon>cancel</mat-icon>\n                        </button>\n                    </mat-chip-row>\n                </span>\n                <button mat-stroked-button class=\"show-all\" type=\"button\"\n                    *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.controls.length > 20\"\n                    (click)=\"expandList()\">\n                    show all {{formGroup.controls.comparisonValue.controls.listValue.controls.length}}\n                    items</button>\n                <input [disabled]=\"readOnly\" [placeholder]=\"!readOnly ? 'Add item to list ...' : ''\"\n                    [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                    matChipInputAddOnBlur (matChipInputTokenEnd)=\"add($event)\" matTooltip=\"Comparison values (list)\" />\n            </mat-chip-grid>\n            <button matIconPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"More...\"\n                [matMenuTriggerFor]=\"moreMenu\"><mat-icon>more_vert</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandList()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && formGroup.controls.comparisonValue.controls.listValue.errors\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.listValue)}}\n            </mat-error>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && !formGroup.controls.comparisonValue.controls.listValue.errors\">\n                Invalid items\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #numberTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"number\" [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n                matTooltip=\"Comparison value (number)\" placeholder=\"Add number ...\" inputDisplayNormalizer />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.doubleValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component datetime\">\n        <app-date-time-picker [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n            dateTooltip=\"Comparison value (date)\" timeTooltip=\"Comparison value (time)\" />\n    </div>\n</ng-template>\n\n\n<mat-menu #moreMenu>\n    <a mat-menu-item (click)=\"expandList()\"><mat-icon>edit_note</mat-icon>Advanced editor</a>\n    <a mat-menu-item (click)=\"copyValuesAsCsv()\"><mat-icon>content_copy</mat-icon>Copy as CSV (values only)</a>\n    <a mat-menu-item (click)=\"removeAll()\" [disabled]=\"readOnly\"><mat-icon>delete_outline</mat-icon>Remove\n        all</a>\n</mat-menu>", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:6px;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{--mdc-chip-container-height: 24px}.targeting-rule-line{--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}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:red}.show-all{font-size:.8em;margin-left:4px}.input-button{--mat-icon-button-touch-target-display: none;color:#00000070;margin-right:4px;padding:0;height:24px;width:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.input-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.input-button mat-icon{font-size:20px;height:20px;width:20px}.prefix-button{--mat-icon-button-touch-target-display: none;color:#00000070;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-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:#f1f1f1}.chip mat-icon{color:#8d8d8d}\n"] }]
+                    ], template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n                target=\"_blank\" rel=\"noopener noreferrer\" class=\"user-link\">user's</a></div>\n    </div>\n\n    <div class=\"wrapper-group\">\n        <div class=\"wrapper-group\">\n            <div class=\"targeting-rule-component pad-right\"\n                [ngClass]=\"{'small': defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1}\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <select matNativeControl (change)=\"attributeChanged($event)\"\n                        [disabled]=\"formGroup.controls.comparisonAttribute.disabled\" matTooltip=\"Comparison attribute\">\n                        <option *ngFor=\"let comparisonAttribute of defaultComparisonAttributes\"\n                            [selected]=\"comparisonAttribute === formGroup.controls.comparisonAttribute.value\">\n                            {{comparisonAttribute}}</option>\n                        <option\n                            [selected]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) === -1\">\n                            Custom\n                        </option>\n                    </select>\n                </mat-form-field>\n            </div>\n            <div class=\"targeting-rule-component pad-right small\"\n                [hidden]=\"defaultComparisonAttributes.indexOf(formGroup.controls.comparisonAttribute.value) !== -1\">\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <input matInput type=\"text\" (blur)=\"calcComparators(true)\"\n                        [formControl]=\"formGroup.controls.comparisonAttribute\" matTooltip=\"Custom comparison attribute\">\n                    <mat-error *ngIf=\"formGroup.controls.comparisonAttribute.invalid\">\n                        {{FormHelper.getErrorMessage(formGroup.controls.comparisonAttribute)}}\n                    </mat-error>\n                </mat-form-field>\n            </div>\n        </div>\n\n        <div class=\"targeting-rule-component pad-right comparator\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl (change)=\"comparatorChanged(selectedComparator)\"\n                    [(ngModel)]=\"selectedComparator\" [disabled]=\"readOnly\" matTooltip=\"Comparator\">\n                    <optgroup *ngFor=\"let group of comparatorSuggestions | keyvalue: keepOrder\"\n                        [label]=\"'&nbsp;' + group.key\">\n                        <option *ngFor=\"let comparator of group.value\" [ngValue]=\"comparator.value\">\n                            {{comparator.label}}\n                        </option>\n                    </optgroup>\n                    <optgroup [label]=\"comparatorSeparator\"></optgroup>\n                    <option value=\"showall\">&nbsp;&nbsp;SHOW ALL COMPARATORS&nbsp;&nbsp;</option>\n                </select>\n                <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"All comparators\"\n                    (click)=\"compDialog()\"><mat-icon>list_alt</mat-icon></button>\n                <mat-error *ngIf=\"formGroup.controls.comparator.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.comparator)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"rolloutRuleComparatorType\">\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.String\"\n            [ngTemplateOutlet]=\"textTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Semver\"\n            [ngTemplateOutlet]=\"semverTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.StringList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.SemverList\"\n            [ngTemplateOutlet]=\"listTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.Number\"\n            [ngTemplateOutlet]=\"numberTemplate\"></ng-container>\n        <ng-container *ngSwitchCase=\"RolloutRuleComparatorV2Type.DateTime\"\n            [ngTemplateOutlet]=\"dateTimeTemplate\"></ng-container>\n    </ng-container>\n\n</div>\n\n<ng-template #textTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (text)\" placeholder=\"Add text ...\" />\n            <button matPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandText()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n\n<ng-template #semverTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"text\" [formControl]=\"formGroup.controls.comparisonValue.controls.stringValue\"\n                matTooltip=\"Comparison value (semantic version)\" placeholder=\"Add semantic version ... (1.2.3)\" />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.stringValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.stringValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.listValue\"\n        class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n                <span class=\"chip-container\"\n                    *ngFor=\"let listValueItem of formGroup.controls.comparisonValue.controls.listValue.controls | slice:0:20; let i = index\"\n                    [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n                    <mat-chip-row (removed)=\"remove(i)\" [disabled]=\"readOnly\" [removable]=\"!readOnly\" class=\"chip\"\n                        [editable]=\"!readOnly\" (edited)=\"edit(i, $event)\"\n                        [ngClass]=\"{'invalid': isListValueItemInvalid(listValueItem)}\">\n\n                        {{listValueItem.controls.value.value}}\n\n                        <button type=\"button\" matChipRemove *ngIf=\"!readOnly\">\n                            <mat-icon>cancel</mat-icon>\n                        </button>\n                    </mat-chip-row>\n                </span>\n                <button mat-stroked-button class=\"show-all\" type=\"button\"\n                    *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.controls.length > 20\"\n                    (click)=\"expandList()\">\n                    show all {{formGroup.controls.comparisonValue.controls.listValue.controls.length}}\n                    items</button>\n                <input [disabled]=\"readOnly\" [placeholder]=\"!readOnly ? 'Add item to list ...' : ''\"\n                    [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                    matChipInputAddOnBlur (matChipInputTokenEnd)=\"add($event)\" matTooltip=\"Comparison values (list)\" />\n            </mat-chip-grid>\n            <button matIconPrefix class=\"prefix-button\" type=\"button\" mat-icon-button *ngIf=\"isClearTextComparatorSelected\"\n                (click)=\"openCleartextInfoDialog()\"\n                matTooltip=\"This comparison value won't be hashed. Click for more info.\"><mat-icon>lock_open_right</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"More...\"\n                [matMenuTriggerFor]=\"moreMenu\"><mat-icon>more_vert</mat-icon></button>\n            <button matIconSuffix class=\"input-button\" type=\"button\" mat-icon-button matTooltip=\"Advanced editor\"\n                (click)=\"expandList()\"><mat-icon>edit_note</mat-icon></button>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && formGroup.controls.comparisonValue.controls.listValue.errors\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.listValue)}}\n            </mat-error>\n            <mat-error\n                *ngIf=\"formGroup.controls.comparisonValue.controls.listValue.invalid && !formGroup.controls.comparisonValue.controls.listValue.errors\">\n                Invalid items\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #numberTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component grow\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <input matInput type=\"number\" [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n                matTooltip=\"Comparison value (number)\" placeholder=\"Add number ...\" inputDisplayNormalizer />\n            <mat-error *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue.invalid\">\n                {{FormHelper.getErrorMessage(formGroup.controls.comparisonValue.controls.doubleValue)}}\n            </mat-error>\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n    <div *ngIf=\"formGroup.controls.comparisonValue.controls.doubleValue\" class=\"targeting-rule-component datetime\">\n        <app-date-time-picker [formControl]=\"formGroup.controls.comparisonValue.controls.doubleValue\"\n            dateTooltip=\"Comparison value (date)\" timeTooltip=\"Comparison value (time)\" />\n    </div>\n</ng-template>\n\n\n<mat-menu #moreMenu>\n    <a mat-menu-item (click)=\"expandList()\"><mat-icon>edit_note</mat-icon>Advanced editor</a>\n    <a mat-menu-item (click)=\"copyValuesAsCsv()\"><mat-icon>content_copy</mat-icon>Copy as CSV (values only)</a>\n    <a mat-menu-item (click)=\"removeAll()\" [disabled]=\"readOnly\"><mat-icon>delete_outline</mat-icon>Remove\n        all</a>\n</mat-menu>", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:6px;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{--mdc-chip-container-height: 24px}.targeting-rule-line{--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}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:red}.show-all{font-size:.8em;margin-left:4px}.input-button{--mat-icon-button-touch-target-display: none;color:#00000070;margin-right:4px;padding:0;height:24px;width:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.input-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.input-button mat-icon{font-size:20px;height:20px;width:20px}.prefix-button{--mat-icon-button-touch-target-display: none;color:#00000070;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-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:#f1f1f1}.chip mat-icon{color:#8d8d8d}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormGenerator }, { type: i2.MatDialog }, { type: i1.ComparisonValueListHelper }, { type: i3.Clipboard }, { type: i1.MessagingService }, { type: i0.ChangeDetectorRef }], propDecorators: { targetingRuleIndex: [{
                 type: Input
             }], conditionIndex: [{

package/esm2022/lib/v2/feature-flag/evaluation-formula/targeting-rule/percentage-options/percentage-options.component.mjs CHANGED Viewed

@@ -56,12 +56,12 @@ export class PercentageOptionsComponent {
     getPercentageEvaluationAttribute() {
         return !this.percentageEvaluationAttribute ? 'Identifier' : this.percentageEvaluationAttribute;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PercentageOptionsComponent, deps: [{ token: i1.FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: PercentageOptionsComponent, selector: "app-percentage-options", inputs: { formArray: "formArray", flagState: "flagState", featureFlagLimitations: "featureFlagLimitations", showPercentageEvaluationAttribute: "showPercentageEvaluationAttribute", percentageEvaluationAttribute: "percentageEvaluationAttribute", isPercentageOnlyTargetingRule: "isPercentageOnlyTargetingRule" }, outputs: { lastPercentageOptionLeft: "lastPercentageOptionLeft", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested" }, ngImport: i0, template: "<div *ngFor=\"let percentageOption of formArray.controls; let i = index\" class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component flex\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"perc-input\">\n                <input matInput type=\"number\" [formControl]=\"percentageOption.controls.percentage\" min=\"0\" max=\"100\"\n                    (input)=\"percentageChanged(i)\" matTooltip=\"Percentage\"\n                    digitOnly inputDisplayNormalizer>\n                <span matTextSuffix>%</span>\n                <mat-error *ngIf=\"percentageOption.controls.percentage.invalid\">\n                    {{FormHelper.getErrorMessage(percentageOption.controls.percentage)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div *ngIf=\"!showPercentageEvaluationAttribute\" class=\"attribute-wrapper flex\"> of&nbsp;<a\n                href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\"\n                rel=\"noopener noreferrer\">users</a>\n        </div>\n        <div *ngIf=\"showPercentageEvaluationAttribute\" class=\"attribute-wrapper wrapper-group flex\">\n            <div class=\"small-pad-right\">of all</div>\n            <div class=\"small-pad-right\">\n                <button mat-flat-button type=\"button\" [disabled]=\"flagState.readOnly\" class=\"attribute\"\n                    matTooltip=\"Change percentage evaluation attribute\"\n                    (click)=\"changePercentageEvaluationAttribute()\">{{getPercentageEvaluationAttribute()}}</button>\n            </div>\n            <div>attributes</div>\n        </div>\n        <div class=\"delete-button\" *ngIf=\"!flagState.readOnly\">\n            <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </div>\n    </div>\n\n    <app-feature-flag-value class=\"value\" [flagState]=\"flagState\" tooltip=\"Served value\"\n        [formGroup]=\"percentageOption.controls.value\"\n        [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n</div>\n<mat-error *ngIf=\"formArray.invalid && !!FormHelper.getErrorMessage(formArray)\" class=\"sumerror\">\n    {{FormHelper.getErrorMessage(formArray)}}\n</mat-error>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && isPercentageOnlyTargetingRule\">\n    If the {{getPercentageEvaluationAttribute()}} attribute is not set in the\n    <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">User\n        Object</a>, the percentage options are skipped and the evaluation continues with the next rule.\n</div>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && !isPercentageOnlyTargetingRule\">\n    If the {{getPercentageEvaluationAttribute()}} attribute is not set in the\n    <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">User\n        Object</a>, the current targeting rule is skipped and the evaluation continues with the next one.\n</div>\n\n<div class=\"add-perc\" *ngIf=\"flagState.settingValue.setting.settingType !== SettingType.Boolean && !flagState.readOnly\">\n    <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <div (click)=\"addOption()\" class=\"add-btn add-perc-btn\">+ % OPTION</div>\n</div>", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:6px;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", ".targeting-rule-line{--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;--mat-icon-button-touch-target-display: none;align-items:center}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:#ccc;margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem}.attribute-wrapper{color:#585858}.attribute{border:1px solid #c9c9c9;background-color:#fcfcfc;text-transform:none;color:#585858;font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}.delete-button{margin-top:3px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#d1e3fa;opacity:1}.chip-container .add-btn mat-chip{background-color:transparent;border:1px dashed #afaeae;color:#afaeae;cursor:pointer}.chip-container .enter-sign{color:#ccc;margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:1px dashed rgb(168,168,168);color:#979797;border-radius:15px}.add-btn:hover{background-color:#ebebeb}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i9.InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: i10.FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PercentageOptionsComponent, deps: [{ token: i1.FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PercentageOptionsComponent, selector: "app-percentage-options", inputs: { formArray: "formArray", flagState: "flagState", featureFlagLimitations: "featureFlagLimitations", showPercentageEvaluationAttribute: "showPercentageEvaluationAttribute", percentageEvaluationAttribute: "percentageEvaluationAttribute", isPercentageOnlyTargetingRule: "isPercentageOnlyTargetingRule" }, outputs: { lastPercentageOptionLeft: "lastPercentageOptionLeft", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested" }, ngImport: i0, template: "<div *ngFor=\"let percentageOption of formArray.controls; let i = index\" class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component flex\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"perc-input\">\n                <input matInput type=\"number\" [formControl]=\"percentageOption.controls.percentage\" min=\"0\" max=\"100\"\n                    (input)=\"percentageChanged(i)\" matTooltip=\"Percentage\"\n                    digitOnly inputDisplayNormalizer>\n                <span matTextSuffix>%</span>\n                <mat-error *ngIf=\"percentageOption.controls.percentage.invalid\">\n                    {{FormHelper.getErrorMessage(percentageOption.controls.percentage)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div *ngIf=\"!showPercentageEvaluationAttribute\" class=\"attribute-wrapper flex\"> of&nbsp;<a\n                href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\"\n                rel=\"noopener noreferrer\">users</a>\n        </div>\n        <div *ngIf=\"showPercentageEvaluationAttribute\" class=\"attribute-wrapper wrapper-group flex\">\n            <div class=\"small-pad-right\">of all</div>\n            <div class=\"small-pad-right\">\n                <button mat-flat-button type=\"button\" [disabled]=\"flagState.readOnly\" class=\"attribute\"\n                    matTooltip=\"Change percentage evaluation attribute\"\n                    (click)=\"changePercentageEvaluationAttribute()\">{{getPercentageEvaluationAttribute()}}</button>\n            </div>\n            <div>attributes</div>\n        </div>\n        <div class=\"delete-button\" *ngIf=\"!flagState.readOnly\">\n            <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </div>\n    </div>\n\n    <app-feature-flag-value class=\"value\" [flagState]=\"flagState\" tooltip=\"Served value\"\n        [formGroup]=\"percentageOption.controls.value\"\n        [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n</div>\n<mat-error *ngIf=\"formArray.invalid && !!FormHelper.getErrorMessage(formArray)\" class=\"sumerror\">\n    {{FormHelper.getErrorMessage(formArray)}}\n</mat-error>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && isPercentageOnlyTargetingRule\">\n    If the {{getPercentageEvaluationAttribute()}} attribute is not set in the\n    <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">User\n        Object</a>, the percentage options are skipped and the evaluation continues with the next rule.\n</div>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && !isPercentageOnlyTargetingRule\">\n    If the {{getPercentageEvaluationAttribute()}} attribute is not set in the\n    <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">User\n        Object</a>, the current targeting rule is skipped and the evaluation continues with the next one.\n</div>\n\n<div class=\"add-perc\" *ngIf=\"flagState.settingValue.setting.settingType !== SettingType.Boolean && !flagState.readOnly\">\n    <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <div (click)=\"addOption()\" class=\"add-btn add-perc-btn\">+ % OPTION</div>\n</div>", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:6px;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", ".targeting-rule-line{--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;--mat-icon-button-touch-target-display: none;align-items:center}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:#ccc;margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem}.attribute-wrapper{color:#585858}.attribute{border:1px solid #c9c9c9;background-color:#fcfcfc;text-transform:none;color:#585858;font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}.delete-button{margin-top:3px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#d1e3fa;opacity:1}.chip-container .add-btn mat-chip{background-color:transparent;border:1px dashed #afaeae;color:#afaeae;cursor:pointer}.chip-container .enter-sign{color:#ccc;margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:1px dashed rgb(168,168,168);color:#979797;border-radius:15px}.add-btn:hover{background-color:#ebebeb}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i9.InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: i10.FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PercentageOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PercentageOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-percentage-options', template: "<div *ngFor=\"let percentageOption of formArray.controls; let i = index\" class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component flex\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"perc-input\">\n                <input matInput type=\"number\" [formControl]=\"percentageOption.controls.percentage\" min=\"0\" max=\"100\"\n                    (input)=\"percentageChanged(i)\" matTooltip=\"Percentage\"\n                    digitOnly inputDisplayNormalizer>\n                <span matTextSuffix>%</span>\n                <mat-error *ngIf=\"percentageOption.controls.percentage.invalid\">\n                    {{FormHelper.getErrorMessage(percentageOption.controls.percentage)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div *ngIf=\"!showPercentageEvaluationAttribute\" class=\"attribute-wrapper flex\"> of&nbsp;<a\n                href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\"\n                rel=\"noopener noreferrer\">users</a>\n        </div>\n        <div *ngIf=\"showPercentageEvaluationAttribute\" class=\"attribute-wrapper wrapper-group flex\">\n            <div class=\"small-pad-right\">of all</div>\n            <div class=\"small-pad-right\">\n                <button mat-flat-button type=\"button\" [disabled]=\"flagState.readOnly\" class=\"attribute\"\n                    matTooltip=\"Change percentage evaluation attribute\"\n                    (click)=\"changePercentageEvaluationAttribute()\">{{getPercentageEvaluationAttribute()}}</button>\n            </div>\n            <div>attributes</div>\n        </div>\n        <div class=\"delete-button\" *ngIf=\"!flagState.readOnly\">\n            <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </div>\n    </div>\n\n    <app-feature-flag-value class=\"value\" [flagState]=\"flagState\" tooltip=\"Served value\"\n        [formGroup]=\"percentageOption.controls.value\"\n        [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n</div>\n<mat-error *ngIf=\"formArray.invalid && !!FormHelper.getErrorMessage(formArray)\" class=\"sumerror\">\n    {{FormHelper.getErrorMessage(formArray)}}\n</mat-error>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && isPercentageOnlyTargetingRule\">\n    If the {{getPercentageEvaluationAttribute()}} attribute is not set in the\n    <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">User\n        Object</a>, the percentage options are skipped and the evaluation continues with the next rule.\n</div>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && !isPercentageOnlyTargetingRule\">\n    If the {{getPercentageEvaluationAttribute()}} attribute is not set in the\n    <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">User\n        Object</a>, the current targeting rule is skipped and the evaluation continues with the next one.\n</div>\n\n<div class=\"add-perc\" *ngIf=\"flagState.settingValue.setting.settingType !== SettingType.Boolean && !flagState.readOnly\">\n    <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <div (click)=\"addOption()\" class=\"add-btn add-perc-btn\">+ % OPTION</div>\n</div>", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:6px;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", ".targeting-rule-line{--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;--mat-icon-button-touch-target-display: none;align-items:center}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:#ccc;margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem}.attribute-wrapper{color:#585858}.attribute{border:1px solid #c9c9c9;background-color:#fcfcfc;text-transform:none;color:#585858;font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}.delete-button{margin-top:3px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#d1e3fa;opacity:1}.chip-container .add-btn mat-chip{background-color:transparent;border:1px dashed #afaeae;color:#afaeae;cursor:pointer}.chip-container .enter-sign{color:#ccc;margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:1px dashed rgb(168,168,168);color:#979797;border-radius:15px}.add-btn:hover{background-color:#ebebeb}\n"] }]
+            args: [{ selector: 'app-percentage-options', template: "<div *ngFor=\"let percentageOption of formArray.controls; let i = index\" class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"wrapper-group\">\n        <div class=\"targeting-rule-component flex\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"perc-input\">\n                <input matInput type=\"number\" [formControl]=\"percentageOption.controls.percentage\" min=\"0\" max=\"100\"\n                    (input)=\"percentageChanged(i)\" matTooltip=\"Percentage\"\n                    digitOnly inputDisplayNormalizer>\n                <span matTextSuffix>%</span>\n                <mat-error *ngIf=\"percentageOption.controls.percentage.invalid\">\n                    {{FormHelper.getErrorMessage(percentageOption.controls.percentage)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div *ngIf=\"!showPercentageEvaluationAttribute\" class=\"attribute-wrapper flex\"> of&nbsp;<a\n                href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\"\n                rel=\"noopener noreferrer\">users</a>\n        </div>\n        <div *ngIf=\"showPercentageEvaluationAttribute\" class=\"attribute-wrapper wrapper-group flex\">\n            <div class=\"small-pad-right\">of all</div>\n            <div class=\"small-pad-right\">\n                <button mat-flat-button type=\"button\" [disabled]=\"flagState.readOnly\" class=\"attribute\"\n                    matTooltip=\"Change percentage evaluation attribute\"\n                    (click)=\"changePercentageEvaluationAttribute()\">{{getPercentageEvaluationAttribute()}}</button>\n            </div>\n            <div>attributes</div>\n        </div>\n        <div class=\"delete-button\" *ngIf=\"!flagState.readOnly\">\n            <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </div>\n    </div>\n\n    <app-feature-flag-value class=\"value\" [flagState]=\"flagState\" tooltip=\"Served value\"\n        [formGroup]=\"percentageOption.controls.value\"\n        [featureFlagLimitations]=\"featureFlagLimitations\"></app-feature-flag-value>\n</div>\n<mat-error *ngIf=\"formArray.invalid && !!FormHelper.getErrorMessage(formArray)\" class=\"sumerror\">\n    {{FormHelper.getErrorMessage(formArray)}}\n</mat-error>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && isPercentageOnlyTargetingRule\">\n    If the {{getPercentageEvaluationAttribute()}} attribute is not set in the\n    <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">User\n        Object</a>, the percentage options are skipped and the evaluation continues with the next rule.\n</div>\n<div class=\"small small-pad-bottom\" style=\"opacity: .6;\"\n    *ngIf=\"showPercentageEvaluationAttribute && !isPercentageOnlyTargetingRule\">\n    If the {{getPercentageEvaluationAttribute()}} attribute is not set in the\n    <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">User\n        Object</a>, the current targeting rule is skipped and the evaluation continues with the next one.\n</div>\n\n<div class=\"add-perc\" *ngIf=\"flagState.settingValue.setting.settingType !== SettingType.Boolean && !flagState.readOnly\">\n    <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n    <div (click)=\"addOption()\" class=\"add-btn add-perc-btn\">+ % OPTION</div>\n</div>", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0;width:212px}.targeting-rule-component[hidden]{display:none}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;font-size:12px}.delete-button{margin-top:4px;color:#b1b1b1}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:6px;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", ".targeting-rule-line{--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;--mat-icon-button-touch-target-display: none;align-items:center}.targeting-rule-line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:#ccc;margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem}.attribute-wrapper{color:#585858}.attribute{border:1px solid #c9c9c9;background-color:#fcfcfc;text-transform:none;color:#585858;font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}.delete-button{margin-top:3px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#d1e3fa;opacity:1}.chip-container .add-btn mat-chip{background-color:transparent;border:1px dashed #afaeae;color:#afaeae;cursor:pointer}.chip-container .enter-sign{color:#ccc;margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:1px dashed rgb(168,168,168);color:#979797;border-radius:15px}.add-btn:hover{background-color:#ebebeb}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormGenerator }], propDecorators: { formArray: [{
                 type: Input
             }], flagState: [{

package/esm2022/lib/v2/feature-flag/evaluation-formula/targeting-rule/targeting-rule.component.mjs CHANGED Viewed

@@ -89,12 +89,12 @@ export class TargetingRuleComponent {
     subscriptionLimitReachedCalled() {
         this.subscriptionLimitReached.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TargetingRuleComponent, deps: [{ token: i1.FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: TargetingRuleComponent, selector: "app-targeting-rule", inputs: { formGroup: "formGroup", segments: "segments", flagState: "flagState", targetingRuleIndex: "targetingRuleIndex", featureFlagLimitations: "featureFlagLimitations", canManageSegments: "canManageSegments", showPercentageEvaluationAttribute: "showPercentageEvaluationAttribute", percentageEvaluationAttribute: "percentageEvaluationAttribute" }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", removedAllRules: "removedAllRules", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", prerequisiteConditionChanged: "prerequisiteConditionChanged" }, ngImport: i0, template: "<div class=\"side-padd conditions\" *ngIf=\"formGroup.controls.conditions?.length\">\n    <app-conditions [formArray]=\"formGroup.controls.conditions\" [segments]=\"segments\" [flagState]=\"flagState\"\n        [targetingRuleIndex]=\"targetingRuleIndex\" (lastConditionDeleted)=\"lastConditionDeleted()\"\n        [canManageSegments]=\"canManageSegments\" (createSegmentRequested)=\"createSegmentRequested.emit()\"\n        (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n        (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n        [featureFlagLimitations]=\"featureFlagLimitations\" (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n        (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"></app-conditions>\n</div>\n\n<mat-divider *ngIf=\"formGroup.controls.conditions?.length\"></mat-divider>\n\n<div class=\"served-value\">\n    <div class=\"flex side-padd\">\n        <div class=\"chip-container fixed-width\" *ngIf=\"showBadge()\" [matTooltip]=\"getChipTooltip()\">\n            <mat-chip-set>\n                <mat-chip disabled>{{getChipText()}}</mat-chip>\n            </mat-chip-set>\n        </div>\n\n        <app-percentage-options class=\"grow\" *ngIf=\"formGroup.controls.percentageOptions?.length\"\n            [formArray]=\"formGroup.controls.percentageOptions\" [flagState]=\"flagState\"\n            (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n            (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n            [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute\"\n            [percentageEvaluationAttribute]=\"percentageEvaluationAttribute\"\n            (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\">\n        </app-percentage-options>\n        <app-feature-flag-value class=\"grow\" *ngIf=\"formGroup.controls.value\" [flagState]=\"flagState\"\n            [formGroup]=\"formGroup.controls.value\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" tooltip=\"Served value\"></app-feature-flag-value>\n    </div>\n\n    <div class=\"add-perc flex side-padd bot-padd\" *ngIf=\"formGroup.controls.value && !flagState.readOnly\">\n        <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n        <div (click)=\"convertToPercentage()\" matTooltip=\"Target a percentage of users to whom this rule applies\"\n            class=\"add-btn add-perc-btn\">+ % OPTION</div>\n    </div>\n</div>", styles: ["html{--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}.flex{display:flex;flex-wrap:wrap}.flex .grow{flex-grow:1}.mat-divider{opacity:.8;margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:#ccc;margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 6px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#d1e3fa;opacity:1}.chip-container .add-btn mat-chip{background-color:transparent;border:1px dashed #afaeae;color:#afaeae;cursor:pointer}.chip-container .enter-sign{color:#ccc;margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:1px dashed rgb(168,168,168);color:#979797;border-radius:15px}.add-btn:hover{background-color:#ebebeb}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i6.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "component", type: i9.PercentageOptionsComponent, selector: "app-percentage-options", inputs: ["formArray", "flagState", "featureFlagLimitations", "showPercentageEvaluationAttribute", "percentageEvaluationAttribute", "isPercentageOnlyTargetingRule"], outputs: ["lastPercentageOptionLeft", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested"] }, { kind: "component", type: i10.ConditionsComponent, selector: "app-conditions", inputs: ["formArray", "segments", "flagState", "targetingRuleIndex", "canManageSegments", "featureFlagLimitations"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "lastConditionDeleted", "subscriptionLimitReached", "prerequisiteConditionChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TargetingRuleComponent, deps: [{ token: i1.FormGenerator }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TargetingRuleComponent, selector: "app-targeting-rule", inputs: { formGroup: "formGroup", segments: "segments", flagState: "flagState", targetingRuleIndex: "targetingRuleIndex", featureFlagLimitations: "featureFlagLimitations", canManageSegments: "canManageSegments", showPercentageEvaluationAttribute: "showPercentageEvaluationAttribute", percentageEvaluationAttribute: "percentageEvaluationAttribute" }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", removedAllRules: "removedAllRules", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", prerequisiteConditionChanged: "prerequisiteConditionChanged" }, ngImport: i0, template: "<div class=\"side-padd conditions\" *ngIf=\"formGroup.controls.conditions?.length\">\n    <app-conditions [formArray]=\"formGroup.controls.conditions\" [segments]=\"segments\" [flagState]=\"flagState\"\n        [targetingRuleIndex]=\"targetingRuleIndex\" (lastConditionDeleted)=\"lastConditionDeleted()\"\n        [canManageSegments]=\"canManageSegments\" (createSegmentRequested)=\"createSegmentRequested.emit()\"\n        (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n        (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n        [featureFlagLimitations]=\"featureFlagLimitations\" (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n        (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"></app-conditions>\n</div>\n\n<mat-divider *ngIf=\"formGroup.controls.conditions?.length\"></mat-divider>\n\n<div class=\"served-value\">\n    <div class=\"flex side-padd\">\n        <div class=\"chip-container fixed-width\" *ngIf=\"showBadge()\" [matTooltip]=\"getChipTooltip()\">\n            <mat-chip-set>\n                <mat-chip disabled>{{getChipText()}}</mat-chip>\n            </mat-chip-set>\n        </div>\n\n        <app-percentage-options class=\"grow\" *ngIf=\"formGroup.controls.percentageOptions?.length\"\n            [formArray]=\"formGroup.controls.percentageOptions\" [flagState]=\"flagState\"\n            (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n            (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n            [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute\"\n            [percentageEvaluationAttribute]=\"percentageEvaluationAttribute\"\n            (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\">\n        </app-percentage-options>\n        <app-feature-flag-value class=\"grow\" *ngIf=\"formGroup.controls.value\" [flagState]=\"flagState\"\n            [formGroup]=\"formGroup.controls.value\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" tooltip=\"Served value\"></app-feature-flag-value>\n    </div>\n\n    <div class=\"add-perc flex side-padd bot-padd\" *ngIf=\"formGroup.controls.value && !flagState.readOnly\">\n        <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n        <div (click)=\"convertToPercentage()\" matTooltip=\"Target a percentage of users to whom this rule applies\"\n            class=\"add-btn add-perc-btn\">+ % OPTION</div>\n    </div>\n</div>", styles: ["html{--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}.flex{display:flex;flex-wrap:wrap}.flex .grow{flex-grow:1}.mat-divider{opacity:.8;margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:#ccc;margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 6px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#d1e3fa;opacity:1}.chip-container .add-btn mat-chip{background-color:transparent;border:1px dashed #afaeae;color:#afaeae;cursor:pointer}.chip-container .enter-sign{color:#ccc;margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:1px dashed rgb(168,168,168);color:#979797;border-radius:15px}.add-btn:hover{background-color:#ebebeb}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i6.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "component", type: i9.PercentageOptionsComponent, selector: "app-percentage-options", inputs: ["formArray", "flagState", "featureFlagLimitations", "showPercentageEvaluationAttribute", "percentageEvaluationAttribute", "isPercentageOnlyTargetingRule"], outputs: ["lastPercentageOptionLeft", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested"] }, { kind: "component", type: i10.ConditionsComponent, selector: "app-conditions", inputs: ["formArray", "segments", "flagState", "targetingRuleIndex", "canManageSegments", "featureFlagLimitations"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "lastConditionDeleted", "subscriptionLimitReached", "prerequisiteConditionChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TargetingRuleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TargetingRuleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-targeting-rule', template: "<div class=\"side-padd conditions\" *ngIf=\"formGroup.controls.conditions?.length\">\n    <app-conditions [formArray]=\"formGroup.controls.conditions\" [segments]=\"segments\" [flagState]=\"flagState\"\n        [targetingRuleIndex]=\"targetingRuleIndex\" (lastConditionDeleted)=\"lastConditionDeleted()\"\n        [canManageSegments]=\"canManageSegments\" (createSegmentRequested)=\"createSegmentRequested.emit()\"\n        (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n        (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n        [featureFlagLimitations]=\"featureFlagLimitations\" (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n        (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"></app-conditions>\n</div>\n\n<mat-divider *ngIf=\"formGroup.controls.conditions?.length\"></mat-divider>\n\n<div class=\"served-value\">\n    <div class=\"flex side-padd\">\n        <div class=\"chip-container fixed-width\" *ngIf=\"showBadge()\" [matTooltip]=\"getChipTooltip()\">\n            <mat-chip-set>\n                <mat-chip disabled>{{getChipText()}}</mat-chip>\n            </mat-chip-set>\n        </div>\n\n        <app-percentage-options class=\"grow\" *ngIf=\"formGroup.controls.percentageOptions?.length\"\n            [formArray]=\"formGroup.controls.percentageOptions\" [flagState]=\"flagState\"\n            (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n            (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n            [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute\"\n            [percentageEvaluationAttribute]=\"percentageEvaluationAttribute\"\n            (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\">\n        </app-percentage-options>\n        <app-feature-flag-value class=\"grow\" *ngIf=\"formGroup.controls.value\" [flagState]=\"flagState\"\n            [formGroup]=\"formGroup.controls.value\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" tooltip=\"Served value\"></app-feature-flag-value>\n    </div>\n\n    <div class=\"add-perc flex side-padd bot-padd\" *ngIf=\"formGroup.controls.value && !flagState.readOnly\">\n        <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n        <div (click)=\"convertToPercentage()\" matTooltip=\"Target a percentage of users to whom this rule applies\"\n            class=\"add-btn add-perc-btn\">+ % OPTION</div>\n    </div>\n</div>", styles: ["html{--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}.flex{display:flex;flex-wrap:wrap}.flex .grow{flex-grow:1}.mat-divider{opacity:.8;margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:#ccc;margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 6px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#d1e3fa;opacity:1}.chip-container .add-btn mat-chip{background-color:transparent;border:1px dashed #afaeae;color:#afaeae;cursor:pointer}.chip-container .enter-sign{color:#ccc;margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:1px dashed rgb(168,168,168);color:#979797;border-radius:15px}.add-btn:hover{background-color:#ebebeb}\n"] }]
+            args: [{ selector: 'app-targeting-rule', template: "<div class=\"side-padd conditions\" *ngIf=\"formGroup.controls.conditions?.length\">\n    <app-conditions [formArray]=\"formGroup.controls.conditions\" [segments]=\"segments\" [flagState]=\"flagState\"\n        [targetingRuleIndex]=\"targetingRuleIndex\" (lastConditionDeleted)=\"lastConditionDeleted()\"\n        [canManageSegments]=\"canManageSegments\" (createSegmentRequested)=\"createSegmentRequested.emit()\"\n        (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n        (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n        [featureFlagLimitations]=\"featureFlagLimitations\" (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n        (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"></app-conditions>\n</div>\n\n<mat-divider *ngIf=\"formGroup.controls.conditions?.length\"></mat-divider>\n\n<div class=\"served-value\">\n    <div class=\"flex side-padd\">\n        <div class=\"chip-container fixed-width\" *ngIf=\"showBadge()\" [matTooltip]=\"getChipTooltip()\">\n            <mat-chip-set>\n                <mat-chip disabled>{{getChipText()}}</mat-chip>\n            </mat-chip-set>\n        </div>\n\n        <app-percentage-options class=\"grow\" *ngIf=\"formGroup.controls.percentageOptions?.length\"\n            [formArray]=\"formGroup.controls.percentageOptions\" [flagState]=\"flagState\"\n            (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n            (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n            [showPercentageEvaluationAttribute]=\"showPercentageEvaluationAttribute\"\n            [percentageEvaluationAttribute]=\"percentageEvaluationAttribute\"\n            (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\">\n        </app-percentage-options>\n        <app-feature-flag-value class=\"grow\" *ngIf=\"formGroup.controls.value\" [flagState]=\"flagState\"\n            [formGroup]=\"formGroup.controls.value\"\n            [featureFlagLimitations]=\"featureFlagLimitations\" tooltip=\"Served value\"></app-feature-flag-value>\n    </div>\n\n    <div class=\"add-perc flex side-padd bot-padd\" *ngIf=\"formGroup.controls.value && !flagState.readOnly\">\n        <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div>\n        <div (click)=\"convertToPercentage()\" matTooltip=\"Target a percentage of users to whom this rule applies\"\n            class=\"add-btn add-perc-btn\">+ % OPTION</div>\n    </div>\n</div>", styles: ["html{--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}.flex{display:flex;flex-wrap:wrap}.flex .grow{flex-grow:1}.mat-divider{opacity:.8;margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:#ccc;margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 6px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:#d1e3fa;opacity:1}.chip-container .add-btn mat-chip{background-color:transparent;border:1px dashed #afaeae;color:#afaeae;cursor:pointer}.chip-container .enter-sign{color:#ccc;margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:1px dashed rgb(168,168,168);color:#979797;border-radius:15px}.add-btn:hover{background-color:#ebebeb}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormGenerator }], propDecorators: { formGroup: [{
                 type: Input
             }], segments: [{

package/esm2022/lib/v2/feature-flag/feature-flag.component.mjs CHANGED Viewed

@@ -150,10 +150,10 @@ export class FeatureFlagComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FeatureFlagComponent, deps: [{ token: i1.MatDialog }, { token: i2.MessagingService }, { token: i2.FormGenerator }, { token: i3.Router }, { token: i4.PublicApiService }, { token: i5.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: { formGroup: "formGroup", flagState: "flagState", segments: "segments", featureFlagLimitations: "featureFlagLimitations", hasOtherEnvironment: "hasOtherEnvironment", environmentName: "environmentName", showEnvironmentName: "showEnvironmentName", deleteSettingText: "deleteSettingText", canDeleteSetting: "canDeleteSetting" }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons" }, ngImport: i0, template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span *ngIf=\"showEnvironmentName\" class=\"environment-name\" [matTooltip]=\"environmentName\">({{environmentName}})</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\" [formGroup]=\"formGroup.controls.defaultValue\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\" tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <a href=\"{{getDashboardUrl()}}\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <div mat-menu-item data-robot=\"history\">\n            <mat-icon>open_in_new</mat-icon>\n            <span>Open in ConfigCat</span>\n        </div>\n    </a>\n    <div mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <div *ngIf=\"canDeleteSetting\">\n        <mat-divider></mat-divider>\n        <div mat-menu-item data-robot=\"deleteSetting\"\n            [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n            <mat-icon>delete_outline</mat-icon>\n            <span>{{deleteSettingText}}</span>\n        </div>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name,.outer .feature-flag .header .top .left .name-key .environment-name{padding-top:4px;margin-right:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none;display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}}@media (max-width: 700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11.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: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: i13.EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "showVariationId", "featureFlagLimitations", "canManageSegments", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "component", type: i14.FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "directive", type: i15.TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureFlagComponent, deps: [{ token: i1.MatDialog }, { token: i2.MessagingService }, { token: i2.FormGenerator }, { token: i3.Router }, { token: i4.PublicApiService }, { token: i5.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeatureFlagComponent, selector: "app-feature-flag", inputs: { formGroup: "formGroup", flagState: "flagState", segments: "segments", featureFlagLimitations: "featureFlagLimitations", hasOtherEnvironment: "hasOtherEnvironment", environmentName: "environmentName", showEnvironmentName: "showEnvironmentName", deleteSettingText: "deleteSettingText", canDeleteSetting: "canDeleteSetting" }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons" }, ngImport: i0, template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span *ngIf=\"showEnvironmentName\" class=\"environment-name\" [matTooltip]=\"environmentName\">({{environmentName}})</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\" [formGroup]=\"formGroup.controls.defaultValue\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\" tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <a href=\"{{getDashboardUrl()}}\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <div mat-menu-item data-robot=\"history\">\n            <mat-icon>open_in_new</mat-icon>\n            <span>Open in ConfigCat</span>\n        </div>\n    </a>\n    <div mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <div *ngIf=\"canDeleteSetting\">\n        <mat-divider></mat-divider>\n        <div mat-menu-item data-robot=\"deleteSetting\"\n            [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n            <mat-icon>delete_outline</mat-icon>\n            <span>{{deleteSettingText}}</span>\n        </div>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name,.outer .feature-flag .header .top .left .name-key .environment-name{padding-top:4px;margin-right:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none;display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}}@media (max-width: 700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11.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: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: i13.EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "showVariationId", "featureFlagLimitations", "canManageSegments", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons"] }, { kind: "component", type: i14.FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "flagState", "featureFlagLimitations", "isPrerequisite", "tooltip"] }, { kind: "directive", type: i15.TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FeatureFlagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureFlagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-feature-flag', template: "<div class=\"outer\">\n    <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{'invalid': formGroup.touched && formGroup.invalid}\">\n        <div class=\"expandcollapse\">\n            <div *ngIf=\"flagState.panelExpanded\" matTooltip=\"Collapse\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_up</mat-icon>\n            </div>\n            <div *ngIf=\"!flagState.panelExpanded\" matTooltip=\"Expand\" (click)=\"setExpanded(!flagState.panelExpanded)\"\n                class=\"btn\">\n                <mat-icon>arrow_drop_down</mat-icon>\n            </div>\n        </div>\n        <div class=\"header\">\n            <div class=\"top\">\n                <div class=\"left\">\n                    <div class=\"name-key\">\n                        <span class=\"name\"\n                            [matTooltip]=\"flagState.settingValue.setting.name\">{{flagState.settingValue.setting.name}}</span>\n                        <span *ngIf=\"showEnvironmentName\" class=\"environment-name\" [matTooltip]=\"environmentName\">({{environmentName}})</span>\n                        <span class=\"key-outer\" matTooltip=\"Copy feature flag key to clipboard\"\n                            [cdkCopyToClipboard]=\"flagState.settingValue.setting.key\"\n                            (cdkCopyToClipboardCopied)=\"keyCopied()\">\n                            <span class=\"key\">\n                                <code>{{flagState.settingValue.setting.key}}</code>\n                            </span>\n                            <mat-icon>content_copy</mat-icon>\n                        </span>\n                    </div>\n                </div>\n\n                <div class=\"right\">\n                    <div class=\"line\">\n                        <button type=\"button\" class=\"prereq-button\" mat-icon-button\n                            *ngIf=\"flagState.dependeeSettings && flagState.dependeeSettings.length\"\n                            [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n                            [matTooltip]=\"'Prerequisite of '+flagState.dependeeSettings.length+' other flag(s).'\"\n                            (click)=\"openDependeesDialog()\">\n                            <mat-icon>account_tree</mat-icon>\n                        </button>\n                        <button type=\"button\" class=\"more-button\" [matMenuTriggerFor]=\"moreMenu\" mat-icon-button\n                            [track]=\"['more menu button click', 'Feature flags & settings V2 page']\" matTooltip=\"More\">\n                            <mat-icon>more_vert</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint-container\">\n                <div class=\"hint\" *ngIf=\"flagState.settingValue.setting.hint\">\n                    {{flagState.settingValue.setting.hint}}\n                </div>\n\n                <app-feature-flag-value class=\"glance\"\n                    [class.text-glance]=\"flagState.settingValue.setting.settingType !== 'boolean'\"\n                    *ngIf=\"!flagState.panelExpanded && !formGroup.controls.targetingRules.length\"\n                    [flagState]=\"flagState\" [formGroup]=\"formGroup.controls.defaultValue\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\" tooltip=\"Served value\"></app-feature-flag-value>\n\n                <div class=\"quick-glance\" *ngIf=\"getGlance() as glance\" (click)=\"setExpanded(!flagState.panelExpanded)\">\n                    <div class=\"container\" [class]=\"glance.class\">\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.percentageText\">{{glance.percentageText}}</div>\n                        <div class=\"quick-glance-item\" *ngIf=\"glance.ruleText\">{{glance.ruleText}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"flagState.panelExpanded\">\n            <div class=\"eval-formula-wrapper\">\n                <app-evaluation-formula [formGroup]=\"formGroup\" [flagState]=\"flagState\" [segments]=\"segments\"\n                    [featureFlagLimitations]=\"featureFlagLimitations\"\n                    (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\" [canManageSegments]=\"false\"\n                    (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n                    [showPercentageEvaluationAttribute]=\"!!formGroup.controls.percentageEvaluationAttribute.value\"\n                    (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n                    (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n                    (recalcAddButtons)=\"recalcAddButtons.emit()\">\n                </app-evaluation-formula>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n    <div mat-menu-item data-robot=\"history\" (click)=\"changePercentageEvaluationAttribute()\"\n        [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n        [disabled]=\"this.flagState.readOnly\">\n        <mat-icon>percent</mat-icon>\n        <span>Change percentage attribute</span>\n    </div>\n    <a href=\"{{getDashboardUrl()}}\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <div mat-menu-item data-robot=\"history\">\n            <mat-icon>open_in_new</mat-icon>\n            <span>Open in ConfigCat</span>\n        </div>\n    </a>\n    <div mat-menu-item data-robot=\"renameSetting\"\n        [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\" (click)=\"copyDirectLink()\">\n        <mat-icon>content_copy</mat-icon>\n        <span>Copy direct link</span>\n    </div>\n    <div *ngIf=\"canDeleteSetting\">\n        <mat-divider></mat-divider>\n        <div mat-menu-item data-robot=\"deleteSetting\"\n            [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\" (click)=\"deleteSetting()\">\n            <mat-icon>delete_outline</mat-icon>\n            <span>{{deleteSettingText}}</span>\n        </div>\n    </div>\n</mat-menu>", styles: [".outer{padding:10px 0;display:flex;flex-direction:row;flex-grow:1}.outer .eval-formula-wrapper{margin-top:6px}.outer .feature-flag{flex-grow:1;min-width:0;background-color:#dee5f0;border:1px solid #c9c9c9;border-radius:0!important;padding:5px 0 5px 5px}.outer .feature-flag.invalid{border-color:#ff5252}.outer .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:#f2f4f8;border:1px solid #c9c9c9;position:absolute;color:#878787;left:50%;transform:translate(-50%,-34%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .feature-flag .expandcollapse .btn:hover{background-color:#ebebeb}.outer .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .feature-flag .header .top{display:flex;align-items:flex-start}.outer .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px}.outer .feature-flag .header .top .left .name-key .name,.outer .feature-flag .header .top .left .name-key .environment-name{padding-top:4px;margin-right:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .top .left .name-key .key-outer{padding-top:6px;display:flex;align-items:center;min-width:0;cursor:pointer}.outer .feature-flag .header .top .left .name-key .key-outer .key{background-color:#cfcfcf;padding:1.5px 6px 3px;font-size:12px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outer .feature-flag .header .top .left .name-key .key-outer .mat-icon{margin-left:4px;font-size:14px;width:14px;height:14px;opacity:.5;overflow:visible}.outer .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none;display:flex}.outer .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:4px}.outer .feature-flag .header .top .right .line .prereq-button .mat-icon{padding-top:4px;font-size:16px;width:16px;color:#6b6b6b}.outer .feature-flag .header .top .right .line .more-button .mat-icon{padding-top:2px;font-size:20px;width:20px;color:#6b6b6b}.outer .feature-flag .header .hint-container{display:flex;margin-top:12px;min-width:0}.outer .feature-flag .header .hint-container .hint{color:#505050;font-size:.85em;white-space:pre-line;word-wrap:break-word;padding:4px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .hint-container .glance{flex-wrap:nowrap;padding:6px 18px 0 16px;margin-left:auto}.outer .feature-flag .header .hint-container .text-glance{min-width:40%;max-width:40%;height:min-content}.outer .feature-flag .header .quick-glance{cursor:pointer;min-width:80px;max-width:200px;font-size:10px;text-align:center;margin-right:15px;margin-left:auto;font-weight:700}.outer .feature-flag .header .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .feature-flag .header .quick-glance .container{width:auto;padding:5px;background-color:#f2f4f8;border:1px solid #c9c9c9;border-radius:5px}.outer .feature-flag .header .quick-glance .on{color:#0f8f11}.outer .feature-flag .header .quick-glance .off{color:#be0b0b}.outer .feature-flag .header .quick-glance .other{color:#4881b9}.outer .feature-flag .header .quick-glance .default{color:unset}.tag-menu-action,.tag-menu-item{display:flex;align-items:center}.tag-select-container{line-height:22px;overflow:hidden}.tag-select-item{height:22px;padding:0 .3rem;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}}@media (max-width: 700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2.MessagingService }, { type: i2.FormGenerator }, { type: i3.Router }, { type: i4.PublicApiService }, { type: i5.Clipboard }], propDecorators: { formGroup: [{