ng-configcat-publicapi-ui 4.0.0 → 4.0.2

package/esm2022/lib/v2/feature-flag/evaluation-formula/targeting-rule/conditions/user-condition/popout-list-editor-dialog/popout-list-editor-dialog.component.mjs

@@ -235,12 +235,12 @@ export class PopoutListEditorDialogComponent {
         };
         fileReader.readAsText(file);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PopoutListEditorDialogComponent, deps: [{ token: i1.FormGenerator }, { token: i2.MatDialogRef }, { token: i1.ComparisonValueListHelper }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: PopoutListEditorDialogComponent, selector: "app-popout-list-editor-dialog", viewQueries: [{ propertyName: "setPaginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n\n    <div class=\"tabs\">\n        <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n            <mat-button-toggle [value]=\"VisualizationType.Table\"\n                [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">Table</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Json\"\n                [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">JSON</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csv\"\n                [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">CSV\n                with hints</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csl\"\n                [disabled]=\"(visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\"\n                [matTooltip]=\"currentlyHasHints ? 'There are hints set to your values so the CSV without hints view is not available' : 'Can not switch between views while there are errors in the current view.'\"\n                [matTooltipDisabled]=\"(visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\">CSV\n                without hints</mat-button-toggle>\n        </mat-button-toggle-group>\n    </div>\n\n    <div [hidden]=\"visualizationType !== VisualizationType.Table\" class=\"table-format\">\n        <p class=\"description\">\n            Modify the items within the list of comparison values. The hint helps you label the value for easier\n            reference.\n        </p>\n        <div class=\"controls\">\n            <div>\n                <mat-form-field class=\"filter\" appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n                    <mat-label>Filter</mat-label>\n                    <input matInput [(ngModel)]=\"filterValue\" (ngModelChange)=\"applyFilter()\"\n                        placeholder=\"Filter values and hints.\">\n                </mat-form-field>\n            </div>\n            <div class=\"control-button-container\">\n                <div class=\"add-btn-container\" matTooltip=\"Add item\"\n                    [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                    <div [matTooltip]=\"'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\"\n                        [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\">\n                        <button (click)=\"add()\" mat-icon-button type=\"button\" *ngIf=\"!data.readOnly\" class=\"add-btn\"\n                            [disabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                            <mat-icon>add_circle</mat-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <button type=\"button\" mat-icon-button matTooltip=\"Remove all\" class=\"grey-button\" *ngIf=\"!data.readOnly\"\n                    (click)=\"removeAll()\"><mat-icon>delete_outline</mat-icon></button>\n            </div>\n        </div>\n        <table mat-table [dataSource]=\"dataSource\">\n            <ng-container matColumnDef=\"value\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Comparison value </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) === focusIndex\" focus />\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) !== focusIndex\" />\n                            <mat-error *ngIf=\"row.controls.value.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.value)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"hint\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Hint </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.hint\" />\n                            <mat-error *ngIf=\"row.controls.hint.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.hint)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header></th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top\">\n                    <button class=\"grey-button\" (click)=\"remove(row)\" mat-icon-button type=\"button\"\n                        matTooltip=\"Remove item\" *ngIf=\"!data.readOnly\">\n                        <mat-icon>delete_outline</mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n            </tr>\n        </table>\n        <div class=\"small-form-field\">\n            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Json\" class=\"json-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a JSON text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.json\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <div class=\"json-editor\">\n            <app-ace-editor [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\"\n                [readOnly]=\"data.readOnly\"></app-ace-editor>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csv\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values and hints) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csl\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values only) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult\">\n        <p *ngIf=\"!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length\"\n            class=\"small-chip-input\">\n            Preview ({{comparisonValueListParseResult.comparisonValueList.length}} items)\n            <mat-chip-set>\n                <span *ngFor=\"let listValueItem of comparisonValueListParseResult.comparisonValueList | slice:0:10\"\n                    [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\" class=\"chip-container\">\n                    <mat-chip-row>\n                        {{listValueItem.value}}\n                    </mat-chip-row>\n                </span>\n                <mat-chip-row *ngIf=\"comparisonValueListParseResult.comparisonValueList.length > 10\">\n                    {{comparisonValueListParseResult.comparisonValueList.length - 10}} remaining items...\n                </mat-chip-row>\n            </mat-chip-set>\n        </p>\n        <mat-error *ngIf=\"comparisonValueListParseResult.error\" class=\"error\">\n            <mat-icon>warning</mat-icon>\n            <span>Couldn't parse your values. Please check the format.</span>\n        </mat-error>\n    </div>\n    <mat-error\n        *ngIf=\"formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>{{FormHelper.getErrorMessage(formGroup.controls.listValue)}}</span>\n    </mat-error>\n    <mat-error\n        *ngIf=\"!valueChanged && formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && !formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>Invalid items.&nbsp;</span>\n        <div>\n            <button type=\"button\" mat-stroked-button color=\"primary\"\n                *ngIf=\"visualizationType !== VisualizationType.Table || paginator?.getNumberOfPages() > 1\"\n                (click)=\"focusInvalid()\" class=\"jump\">\n                Jump to fix\n            </button>\n        </div>\n    </mat-error>\n</div>\n<div mat-dialog-actions>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-stroked-button (click)=\"close()\">Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" (click)=\"close()\">Close</button>\n</div>", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .mat-mdc-table{border-bottom-width:0px!important}.container .table-format .row{border-bottom-width:0}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-top:5px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:#ffa726}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:#99999981}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .actions .mat-mdc-button .mat-mdc-button-touch-target,.container .actions .mat-mdc-raised-button .mat-mdc-button-touch-target,.container .actions .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.container .actions .mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container .csv-format .warning{display:flex;align-items:center;border:1px solid rgba(255,0,0,.3);border-radius:5px;padding:1rem;margin-bottom:16px;background-color:#ff000080;color:#fff}.container .csv-format .warning span{margin-left:16px}.container mat-chip-row.invalid{background-color:red}.container .error{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;margin-top:16px;display:flex;align-items:center}.container .error .mat-mdc-button .mat-mdc-button-touch-target,.container .error .mat-mdc-raised-button .mat-mdc-button-touch-target,.container .error .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.container .error .mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.container .error span{margin-left:4px}.container .grey-button{color:#999}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i8.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i12.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i12.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i13.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i15.AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PopoutListEditorDialogComponent, deps: [{ token: i1.FormGenerator }, { token: i2.MatDialogRef }, { token: i1.ComparisonValueListHelper }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: PopoutListEditorDialogComponent, selector: "app-popout-list-editor-dialog", viewQueries: [{ propertyName: "setPaginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n\n    <div class=\"tabs\">\n        <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n            <mat-button-toggle [value]=\"VisualizationType.Table\"\n                [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">Table</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Json\"\n                [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">JSON</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csv\"\n                [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">CSV\n                with hints</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csl\"\n                [disabled]=\"(visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\"\n                [matTooltip]=\"currentlyHasHints ? 'There are hints set to your values so the CSV without hints view is not available' : 'Can not switch between views while there are errors in the current view.'\"\n                [matTooltipDisabled]=\"(visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\">CSV\n                without hints</mat-button-toggle>\n        </mat-button-toggle-group>\n    </div>\n\n    <div [hidden]=\"visualizationType !== VisualizationType.Table\" class=\"table-format\">\n        <p class=\"description\">\n            Modify the items within the list of comparison values. The hint helps you label the value for easier\n            reference.\n        </p>\n        <div class=\"controls\">\n            <div>\n                <mat-form-field class=\"filter\" appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n                    <mat-label>Filter</mat-label>\n                    <input matInput [(ngModel)]=\"filterValue\" (ngModelChange)=\"applyFilter()\"\n                        placeholder=\"Filter values and hints.\">\n                </mat-form-field>\n            </div>\n            <div class=\"control-button-container\">\n                <div class=\"add-btn-container\" matTooltip=\"Add item\"\n                    [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                    <div [matTooltip]=\"'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\"\n                        [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\">\n                        <button (click)=\"add()\" mat-icon-button type=\"button\" *ngIf=\"!data.readOnly\" class=\"add-btn\"\n                            [disabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                            <mat-icon>add_circle</mat-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <button type=\"button\" mat-icon-button matTooltip=\"Remove all\" class=\"grey-button\" *ngIf=\"!data.readOnly\"\n                    (click)=\"removeAll()\"><mat-icon>delete_outline</mat-icon></button>\n            </div>\n        </div>\n        <table mat-table [dataSource]=\"dataSource\">\n            <ng-container matColumnDef=\"value\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Comparison value </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) === focusIndex\" focus />\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) !== focusIndex\" />\n                            <mat-error *ngIf=\"row.controls.value.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.value)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"hint\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Hint </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.hint\" />\n                            <mat-error *ngIf=\"row.controls.hint.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.hint)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header></th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top\">\n                    <button class=\"grey-button\" (click)=\"remove(row)\" mat-icon-button type=\"button\"\n                        matTooltip=\"Remove item\" *ngIf=\"!data.readOnly\">\n                        <mat-icon>delete_outline</mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n            </tr>\n        </table>\n        <div class=\"small-form-field\">\n            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Json\" class=\"json-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a JSON text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.json\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <div class=\"json-editor\">\n            <app-ace-editor [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\"\n                [readOnly]=\"data.readOnly\"></app-ace-editor>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csv\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values and hints) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csl\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values only) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult\">\n        <p *ngIf=\"!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length\"\n            class=\"small-chip-input\">\n            Preview ({{comparisonValueListParseResult.comparisonValueList.length}} items)\n            <mat-chip-set>\n                <span *ngFor=\"let listValueItem of comparisonValueListParseResult.comparisonValueList | slice:0:10\"\n                    [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\" class=\"chip-container\">\n                    <mat-chip-row>\n                        {{listValueItem.value}}\n                    </mat-chip-row>\n                </span>\n                <mat-chip-row *ngIf=\"comparisonValueListParseResult.comparisonValueList.length > 10\">\n                    {{comparisonValueListParseResult.comparisonValueList.length - 10}} remaining items...\n                </mat-chip-row>\n            </mat-chip-set>\n        </p>\n        <mat-error *ngIf=\"comparisonValueListParseResult.error\" class=\"error\">\n            <mat-icon>warning</mat-icon>\n            <span>Couldn't parse your values. Please check the format.</span>\n        </mat-error>\n    </div>\n    <mat-error\n        *ngIf=\"formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>{{FormHelper.getErrorMessage(formGroup.controls.listValue)}}</span>\n    </mat-error>\n    <mat-error\n        *ngIf=\"!valueChanged && formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && !formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>Invalid items.&nbsp;</span>\n        <div>\n            <button type=\"button\" mat-stroked-button color=\"primary\"\n                *ngIf=\"visualizationType !== VisualizationType.Table || paginator?.getNumberOfPages() > 1\"\n                (click)=\"focusInvalid()\" class=\"jump\">\n                Jump to fix\n            </button>\n        </div>\n    </mat-error>\n</div>\n<div mat-dialog-actions>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-stroked-button (click)=\"close()\">Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" (click)=\"close()\">Close</button>\n</div>", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .mat-mdc-table{border-bottom-width:0px!important}.container .table-format .row{border-bottom-width:0}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-top:5px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:#5c6bc0}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:#99999981}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--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;display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container .csv-format .warning{display:flex;align-items:center;border:1px solid rgba(255,0,0,.3);border-radius:5px;padding:1rem;margin-bottom:16px;background-color:#ff000080;color:#fff}.container .csv-format .warning span{margin-left:16px}.container mat-chip-row.invalid{background-color:red}.container .error{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-top:16px;display:flex;align-items:center}.container .error span{margin-left:4px}.container .grey-button{color:#999}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i8.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i12.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i12.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i13.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i15.AceEditorComponent, selector: "app-ace-editor", inputs: ["value", "readOnly"], outputs: ["valueChange", "onChange"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PopoutListEditorDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PopoutListEditorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-popout-list-editor-dialog', template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n\n    <div class=\"tabs\">\n        <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n            <mat-button-toggle [value]=\"VisualizationType.Table\"\n                [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">Table</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Json\"\n                [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">JSON</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csv\"\n                [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">CSV\n                with hints</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csl\"\n                [disabled]=\"(visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\"\n                [matTooltip]=\"currentlyHasHints ? 'There are hints set to your values so the CSV without hints view is not available' : 'Can not switch between views while there are errors in the current view.'\"\n                [matTooltipDisabled]=\"(visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\">CSV\n                without hints</mat-button-toggle>\n        </mat-button-toggle-group>\n    </div>\n\n    <div [hidden]=\"visualizationType !== VisualizationType.Table\" class=\"table-format\">\n        <p class=\"description\">\n            Modify the items within the list of comparison values. The hint helps you label the value for easier\n            reference.\n        </p>\n        <div class=\"controls\">\n            <div>\n                <mat-form-field class=\"filter\" appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n                    <mat-label>Filter</mat-label>\n                    <input matInput [(ngModel)]=\"filterValue\" (ngModelChange)=\"applyFilter()\"\n                        placeholder=\"Filter values and hints.\">\n                </mat-form-field>\n            </div>\n            <div class=\"control-button-container\">\n                <div class=\"add-btn-container\" matTooltip=\"Add item\"\n                    [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                    <div [matTooltip]=\"'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\"\n                        [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\">\n                        <button (click)=\"add()\" mat-icon-button type=\"button\" *ngIf=\"!data.readOnly\" class=\"add-btn\"\n                            [disabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                            <mat-icon>add_circle</mat-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <button type=\"button\" mat-icon-button matTooltip=\"Remove all\" class=\"grey-button\" *ngIf=\"!data.readOnly\"\n                    (click)=\"removeAll()\"><mat-icon>delete_outline</mat-icon></button>\n            </div>\n        </div>\n        <table mat-table [dataSource]=\"dataSource\">\n            <ng-container matColumnDef=\"value\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Comparison value </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) === focusIndex\" focus />\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) !== focusIndex\" />\n                            <mat-error *ngIf=\"row.controls.value.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.value)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"hint\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Hint </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.hint\" />\n                            <mat-error *ngIf=\"row.controls.hint.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.hint)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header></th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top\">\n                    <button class=\"grey-button\" (click)=\"remove(row)\" mat-icon-button type=\"button\"\n                        matTooltip=\"Remove item\" *ngIf=\"!data.readOnly\">\n                        <mat-icon>delete_outline</mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n            </tr>\n        </table>\n        <div class=\"small-form-field\">\n            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Json\" class=\"json-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a JSON text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.json\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <div class=\"json-editor\">\n            <app-ace-editor [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\"\n                [readOnly]=\"data.readOnly\"></app-ace-editor>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csv\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values and hints) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csl\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values only) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult\">\n        <p *ngIf=\"!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length\"\n            class=\"small-chip-input\">\n            Preview ({{comparisonValueListParseResult.comparisonValueList.length}} items)\n            <mat-chip-set>\n                <span *ngFor=\"let listValueItem of comparisonValueListParseResult.comparisonValueList | slice:0:10\"\n                    [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\" class=\"chip-container\">\n                    <mat-chip-row>\n                        {{listValueItem.value}}\n                    </mat-chip-row>\n                </span>\n                <mat-chip-row *ngIf=\"comparisonValueListParseResult.comparisonValueList.length > 10\">\n                    {{comparisonValueListParseResult.comparisonValueList.length - 10}} remaining items...\n                </mat-chip-row>\n            </mat-chip-set>\n        </p>\n        <mat-error *ngIf=\"comparisonValueListParseResult.error\" class=\"error\">\n            <mat-icon>warning</mat-icon>\n            <span>Couldn't parse your values. Please check the format.</span>\n        </mat-error>\n    </div>\n    <mat-error\n        *ngIf=\"formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>{{FormHelper.getErrorMessage(formGroup.controls.listValue)}}</span>\n    </mat-error>\n    <mat-error\n        *ngIf=\"!valueChanged && formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && !formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>Invalid items.&nbsp;</span>\n        <div>\n            <button type=\"button\" mat-stroked-button color=\"primary\"\n                *ngIf=\"visualizationType !== VisualizationType.Table || paginator?.getNumberOfPages() > 1\"\n                (click)=\"focusInvalid()\" class=\"jump\">\n                Jump to fix\n            </button>\n        </div>\n    </mat-error>\n</div>\n<div mat-dialog-actions>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-stroked-button (click)=\"close()\">Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" (click)=\"close()\">Close</button>\n</div>", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .mat-mdc-table{border-bottom-width:0px!important}.container .table-format .row{border-bottom-width:0}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-top:5px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:#ffa726}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:#99999981}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .actions .mat-mdc-button .mat-mdc-button-touch-target,.container .actions .mat-mdc-raised-button .mat-mdc-button-touch-target,.container .actions .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.container .actions .mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container .csv-format .warning{display:flex;align-items:center;border:1px solid rgba(255,0,0,.3);border-radius:5px;padding:1rem;margin-bottom:16px;background-color:#ff000080;color:#fff}.container .csv-format .warning span{margin-left:16px}.container mat-chip-row.invalid{background-color:red}.container .error{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;margin-top:16px;display:flex;align-items:center}.container .error .mat-mdc-button .mat-mdc-button-touch-target,.container .error .mat-mdc-raised-button .mat-mdc-button-touch-target,.container .error .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.container .error .mat-mdc-outlined-button .mat-mdc-button-touch-target{display:none}.container .error span{margin-left:4px}.container .grey-button{color:#999}\n"] }]
+            args: [{ selector: 'app-popout-list-editor-dialog', template: "<h2 mat-dialog-title>Advanced editor</h2>\n<div mat-dialog-content class=\"container\">\n\n    <div class=\"tabs\">\n        <mat-button-toggle-group [ngModel]=\"visualizationType\" (ngModelChange)=\"changeVisualizationType($event)\">\n            <mat-button-toggle [value]=\"VisualizationType.Table\"\n                [disabled]=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Table || !comparisonValueListParseResult?.error\">Table</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Json\"\n                [disabled]=\"visualizationType !== VisualizationType.Json && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Json || !comparisonValueListParseResult?.error\">JSON</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csv\"\n                [disabled]=\"visualizationType !== VisualizationType.Csv && comparisonValueListParseResult?.error\"\n                matTooltip=\"Can not switch between views while there are errors in the current view.\"\n                [matTooltipDisabled]=\"visualizationType === VisualizationType.Csv || !comparisonValueListParseResult?.error\">CSV\n                with hints</mat-button-toggle>\n            <mat-button-toggle [value]=\"VisualizationType.Csl\"\n                [disabled]=\"(visualizationType !== VisualizationType.Csl && comparisonValueListParseResult?.error) || currentlyHasHints\"\n                [matTooltip]=\"currentlyHasHints ? 'There are hints set to your values so the CSV without hints view is not available' : 'Can not switch between views while there are errors in the current view.'\"\n                [matTooltipDisabled]=\"(visualizationType === VisualizationType.Csl || !comparisonValueListParseResult?.error) && !currentlyHasHints\">CSV\n                without hints</mat-button-toggle>\n        </mat-button-toggle-group>\n    </div>\n\n    <div [hidden]=\"visualizationType !== VisualizationType.Table\" class=\"table-format\">\n        <p class=\"description\">\n            Modify the items within the list of comparison values. The hint helps you label the value for easier\n            reference.\n        </p>\n        <div class=\"controls\">\n            <div>\n                <mat-form-field class=\"filter\" appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n                    <mat-label>Filter</mat-label>\n                    <input matInput [(ngModel)]=\"filterValue\" (ngModelChange)=\"applyFilter()\"\n                        placeholder=\"Filter values and hints.\">\n                </mat-form-field>\n            </div>\n            <div class=\"control-button-container\">\n                <div class=\"add-btn-container\" matTooltip=\"Add item\"\n                    [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                    <div [matTooltip]=\"'Maximum ' + data.featureFlagLimitations.maxComparisonValueListLength + ' items can be added.'\"\n                        [matTooltipDisabled]=\"formGroup.controls.listValue.controls.length < data.featureFlagLimitations.maxComparisonValueListLength\">\n                        <button (click)=\"add()\" mat-icon-button type=\"button\" *ngIf=\"!data.readOnly\" class=\"add-btn\"\n                            [disabled]=\"formGroup.controls.listValue.controls.length >= data.featureFlagLimitations.maxComparisonValueListLength\">\n                            <mat-icon>add_circle</mat-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <button type=\"button\" mat-icon-button matTooltip=\"Remove all\" class=\"grey-button\" *ngIf=\"!data.readOnly\"\n                    (click)=\"removeAll()\"><mat-icon>delete_outline</mat-icon></button>\n            </div>\n        </div>\n        <table mat-table [dataSource]=\"dataSource\">\n            <ng-container matColumnDef=\"value\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Comparison value </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) === focusIndex\" focus />\n                            <input matInput [formControl]=\"row.controls.value\"\n                                *ngIf=\"(paginator.pageIndex * paginator.pageSize + i) !== focusIndex\" />\n                            <mat-error *ngIf=\"row.controls.value.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.value)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"hint\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header> Hint </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top small-form-field\">\n                    <div class=\"value-field\">\n                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                            <input matInput [formControl]=\"row.controls.hint\" />\n                            <mat-error *ngIf=\"row.controls.hint.invalid\">\n                                {{FormHelper.getErrorMessage(row.controls.hint)}}\n                            </mat-error>\n                        </mat-form-field>\n                    </div>\n                </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header></th>\n                <td mat-cell *matCellDef=\"let row\" class=\"row align-top\">\n                    <button class=\"grey-button\" (click)=\"remove(row)\" mat-icon-button type=\"button\"\n                        matTooltip=\"Remove item\" *ngIf=\"!data.readOnly\">\n                        <mat-icon>delete_outline</mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n            </tr>\n        </table>\n        <div class=\"small-form-field\">\n            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]=\"[5, 10, 50, 100]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Json\" class=\"json-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a JSON text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.json\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <div class=\"json-editor\">\n            <app-ace-editor [(value)]=\"plainText\" (valueChange)=\"textValueChanged()\"\n                [readOnly]=\"data.readOnly\"></app-ace-editor>\n        </div>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csv\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values and hints) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType === VisualizationType.Csl\" class=\"csv-format\">\n        <div class=\"actions\">\n            <div>\n                Modify the items via a CSV (values only) text.\n            </div>\n            <div *ngIf=\"!data.readOnly\">\n                <input #fileInput hidden=\"true\" type=\"file\" onclick=\"this.value=null\" (change)=\"loadFile($event)\"\n                    accept=\".txt,.csv\" />\n                <button type=\"button\" mat-icon-button (click)=\"fileInput.click()\" class=\"grey-button\"\n                    matTooltip=\"Load from file (your values will be overwritten)\">\n                    <mat-icon>upload_file</mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <mat-form-field appearance=\"outline\" class=\"editor-container editor-clear\" subscriptSizing=\"dynamic\">\n            <textarea matInput autofocus focus rows=\"17\" cdkTextareaAutosize cdkAutosizeMinRows=\"17\"\n                cdkAutosizeMaxRows=\"17\" [(ngModel)]=\"plainText\" (ngModelChange)=\"textValueChanged()\" spellcheck=\"false\"\n                [readonly]=\"data.readOnly\"></textarea>\n        </mat-form-field>\n    </div>\n\n    <div *ngIf=\"visualizationType !== VisualizationType.Table && comparisonValueListParseResult\">\n        <p *ngIf=\"!comparisonValueListParseResult.error && comparisonValueListParseResult.comparisonValueList.length\"\n            class=\"small-chip-input\">\n            Preview ({{comparisonValueListParseResult.comparisonValueList.length}} items)\n            <mat-chip-set>\n                <span *ngFor=\"let listValueItem of comparisonValueListParseResult.comparisonValueList | slice:0:10\"\n                    [matTooltip]=\"listValueItem.hint ? listValueItem.hint : 'No hint'\" class=\"chip-container\">\n                    <mat-chip-row>\n                        {{listValueItem.value}}\n                    </mat-chip-row>\n                </span>\n                <mat-chip-row *ngIf=\"comparisonValueListParseResult.comparisonValueList.length > 10\">\n                    {{comparisonValueListParseResult.comparisonValueList.length - 10}} remaining items...\n                </mat-chip-row>\n            </mat-chip-set>\n        </p>\n        <mat-error *ngIf=\"comparisonValueListParseResult.error\" class=\"error\">\n            <mat-icon>warning</mat-icon>\n            <span>Couldn't parse your values. Please check the format.</span>\n        </mat-error>\n    </div>\n    <mat-error\n        *ngIf=\"formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>{{FormHelper.getErrorMessage(formGroup.controls.listValue)}}</span>\n    </mat-error>\n    <mat-error\n        *ngIf=\"!valueChanged && formGroup.controls.listValue.touched && formGroup.controls.listValue.invalid && !formGroup.controls.listValue.errors\"\n        class=\"error\">\n        <mat-icon>warning</mat-icon>\n        <span>Invalid items.&nbsp;</span>\n        <div>\n            <button type=\"button\" mat-stroked-button color=\"primary\"\n                *ngIf=\"visualizationType !== VisualizationType.Table || paginator?.getNumberOfPages() > 1\"\n                (click)=\"focusInvalid()\" class=\"jump\">\n                Jump to fix\n            </button>\n        </div>\n    </mat-error>\n</div>\n<div mat-dialog-actions>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n    <button *ngIf=\"!data.readOnly\" type=\"button\" mat-stroked-button (click)=\"close()\">Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" (click)=\"close()\">Close</button>\n</div>", styles: [".mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.container{width:100%}.container .tabs{padding:10px 0 5px}.container .table-format .mat-mdc-table{border-bottom-width:0px!important}.container .table-format .row{border-bottom-width:0}.container .table-format .row.align-top{vertical-align:top}.container .table-format .row.align-top button{margin-top:6px}.container .table-format .row .value-field{display:flex;flex-direction:row;padding:8px 0}.container .table-format .row .value-field mat-form-field{flex-grow:1}.container .table-format .controls{padding-top:5px;display:flex;justify-content:space-between}.container .table-format .controls .control-button-container{display:flex}.container .table-format .controls .control-button-container .add-btn-container .add-btn{color:#5c6bc0}.container .table-format .controls .control-button-container .add-btn-container .add-btn[disabled]{color:#99999981}.container .table-format .bulk-btn{margin-left:1rem}.container .jump{font-size:12px;margin-left:5px}.container .description{padding-bottom:5px}.container .actions{--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;display:flex;align-items:center;justify-content:space-between;margin:5px 0}.container .json-format .json-editor{margin-bottom:10px;width:100%;height:282px}.container .csv-format mat-form-field{width:100%}.container .csv-format mat-form-field textarea{width:100%}.container .csv-format .warning{display:flex;align-items:center;border:1px solid rgba(255,0,0,.3);border-radius:5px;padding:1rem;margin-bottom:16px;background-color:#ff000080;color:#fff}.container .csv-format .warning span{margin-left:16px}.container mat-chip-row.invalid{background-color:red}.container .error{--mdc-text-button-container-height: 24px;--mdc-filled-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mdc-protected-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-top:16px;display:flex;align-items:center}.container .error span{margin-left:4px}.container .grey-button{color:#999}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormGenerator }, { type: i2.MatDialogRef }, { type: i1.ComparisonValueListHelper }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]

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

@@ -417,16 +417,16 @@ export class UserConditionComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", 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.1.3", 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: "17.3.1", 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.1", 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/V2/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}.targeting-rule-line .mat-mdc-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-raised-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-outlined-button .mat-mdc-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{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-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.input-button mat-icon{font-size:20px;height:20px;width:20px}.prefix-button{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-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.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/V2/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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: UserConditionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", 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/V2/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}.targeting-rule-line .mat-mdc-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-raised-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-unelevated-button .mat-mdc-button-touch-target,.targeting-rule-line .mat-mdc-outlined-button .mat-mdc-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{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-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.input-button mat-icon{font-size:20px;height:20px;width:20px}.prefix-button{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-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.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/V2/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"] }]
         }], ctorParameters: () => [{ type: i1.FormGenerator }, { type: i2.MatDialog }, { type: i1.ComparisonValueListHelper }, { type: i3.Clipboard }, { type: i1.MessagingService }, { type: i0.ChangeDetectorRef }], propDecorators: { targetingRuleIndex: [{
                 type: Input
             }], conditionIndex: [{