ng-configcat-publicapi-ui 4.1.3 → 4.2.1

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

@@ -24,10 +24,10 @@ export class SegmentConditionComponent {
     createSegment() {
         this.createSegmentRequested.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SegmentConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: SegmentConditionComponent, selector: "app-segment-condition", inputs: { targetingRuleIndex: "targetingRuleIndex", conditionIndex: "conditionIndex", formGroup: "formGroup", segments: "segments", canManageSegments: "canManageSegments" }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested" }, ngImport: i0, template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\" target=\"_blank\"\n                rel=\"noopener noreferrer\" class=\"user-link\">user</a></div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <select matNativeControl [formControl]=\"formGroup.controls.comparator\" matTooltip=\"Segment comparator\">\n                <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                    {{comparator.label}}\n                </option>\n            </select>\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 class=\"wrapper-group\">\n        <div class=\"targeting-rule-component\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.segmentId\" matTooltip=\"Segment\">\n                    <option [ngValue]=\"null\" disabled selected hidden *ngIf=\"segments.length\">Select segment ...\n                    </option>\n                    <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\"\n                        [title]=\"segment.description\">\n                        {{segment.name}}\n                    </option>\n                    <option *ngIf=\"segments.length === 0\" disabled>\n                        no segments available\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.segmentId.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.segmentId)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <button class=\"segment-more\" type=\"button\" mat-icon-button *ngIf=\"canManageSegments\"\n            matTooltip=\"Create and manage segments\" [matMenuTriggerFor]=\"segmentMenu\"\n            [track]=\"['segment menu click', 'feature flags and settings']\">\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\n        </button>\n    </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        <a mat-menu-item (click)=\"createSegmentRequested.emit()\"\n            [track]=\"['create segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>add</mat-icon><span>Create new segment</span>\n        </a>\n        <a mat-menu-item (click)=\"manageSegmentsRequested.emit()\"\n            [track]=\"['manage segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>pie_chart</mat-icon><span>Manage segments</span>\n        </a>\n    </ng-template>\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", ".segment-more{--mat-icon-button-touch-target-display: none;padding:0;line-height:1;margin-top:4px;height:28px;width:28px;display:inline-flex;align-items:center;justify-content:center}.segment-more .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}.segment-more mat-icon{font-size:18px;width:18px;height:18px;color:#818181}select.ng-invalid{color:#00000061}select.ng-invalid option{color:#000}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i5.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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "directive", type: i10.TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SegmentConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SegmentConditionComponent, selector: "app-segment-condition", inputs: { targetingRuleIndex: "targetingRuleIndex", conditionIndex: "conditionIndex", formGroup: "formGroup", segments: "segments", canManageSegments: "canManageSegments" }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested" }, ngImport: i0, template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\" target=\"_blank\"\n                rel=\"noopener noreferrer\" class=\"user-link\">user</a></div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <select matNativeControl [formControl]=\"formGroup.controls.comparator\" matTooltip=\"Segment comparator\">\n                <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                    {{comparator.label}}\n                </option>\n            </select>\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 class=\"wrapper-group\">\n        <div class=\"targeting-rule-component\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.segmentId\" matTooltip=\"Segment\">\n                    <option [ngValue]=\"null\" disabled selected hidden *ngIf=\"segments.length\">Select segment ...\n                    </option>\n                    <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\"\n                        [title]=\"segment.description\">\n                        {{segment.name}}\n                    </option>\n                    <option *ngIf=\"segments.length === 0\" disabled>\n                        no segments available\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.segmentId.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.segmentId)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <button class=\"segment-more\" type=\"button\" mat-icon-button *ngIf=\"canManageSegments\"\n            matTooltip=\"Create and manage segments\" [matMenuTriggerFor]=\"segmentMenu\"\n            [track]=\"['segment menu click', 'feature flags and settings']\">\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\n        </button>\n    </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        <a mat-menu-item (click)=\"createSegmentRequested.emit()\"\n            [track]=\"['create segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>add</mat-icon><span>Create new segment</span>\n        </a>\n        <a mat-menu-item (click)=\"manageSegmentsRequested.emit()\"\n            [track]=\"['manage segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>pie_chart</mat-icon><span>Manage segments</span>\n        </a>\n    </ng-template>\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", ".segment-more{--mat-icon-button-touch-target-display: none;padding:0;line-height:1;margin-top:4px;height:28px;width:28px;display:inline-flex;align-items:center;justify-content:center}.segment-more .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}.segment-more mat-icon{font-size:18px;width:18px;height:18px;color:#818181}select.ng-invalid{color:#00000061}select.ng-invalid option{color:#000}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i5.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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "directive", type: i10.TrackingDirective, selector: "[track]", inputs: ["track"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SegmentConditionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SegmentConditionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-segment-condition', template: "<div class=\"targeting-rule-line smallest-form-field\">\n    <div class=\"explanation-wrapper\">\n        <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex\"\n            [conditionIndex]=\"conditionIndex\"></app-condition-chip>\n\n        <div class=\"explanation\"><a href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\" target=\"_blank\"\n                rel=\"noopener noreferrer\" class=\"user-link\">user</a></div>\n    </div>\n\n    <div class=\"targeting-rule-component pad-right\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            <select matNativeControl [formControl]=\"formGroup.controls.comparator\" matTooltip=\"Segment comparator\">\n                <option *ngFor=\"let comparator of segmentComparators\" [ngValue]=\"comparator.value\">\n                    {{comparator.label}}\n                </option>\n            </select>\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 class=\"wrapper-group\">\n        <div class=\"targeting-rule-component\">\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <select matNativeControl [formControl]=\"formGroup.controls.segmentId\" matTooltip=\"Segment\">\n                    <option [ngValue]=\"null\" disabled selected hidden *ngIf=\"segments.length\">Select segment ...\n                    </option>\n                    <option *ngFor=\"let segment of segments\" [ngValue]=\"segment.segmentId\"\n                        [title]=\"segment.description\">\n                        {{segment.name}}\n                    </option>\n                    <option *ngIf=\"segments.length === 0\" disabled>\n                        no segments available\n                    </option>\n                </select>\n                <mat-error *ngIf=\"formGroup.controls.segmentId.invalid\">\n                    {{FormHelper.getErrorMessage(formGroup.controls.segmentId)}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <button class=\"segment-more\" type=\"button\" mat-icon-button *ngIf=\"canManageSegments\"\n            matTooltip=\"Create and manage segments\" [matMenuTriggerFor]=\"segmentMenu\"\n            [track]=\"['segment menu click', 'feature flags and settings']\">\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\n        </button>\n    </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        <a mat-menu-item (click)=\"createSegmentRequested.emit()\"\n            [track]=\"['create segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>add</mat-icon><span>Create new segment</span>\n        </a>\n        <a mat-menu-item (click)=\"manageSegmentsRequested.emit()\"\n            [track]=\"['manage segment click', 'Feature flags & settings V2 page']\">\n            <mat-icon>pie_chart</mat-icon><span>Manage segments</span>\n        </a>\n    </ng-template>\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", ".segment-more{--mat-icon-button-touch-target-display: none;padding:0;line-height:1;margin-top:4px;height:28px;width:28px;display:inline-flex;align-items:center;justify-content:center}.segment-more .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}.segment-more mat-icon{font-size:18px;width:18px;height:18px;color:#818181}select.ng-invalid{color:#00000061}select.ng-invalid option{color:#000}\n"] }]
         }], propDecorators: { targetingRuleIndex: [{

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

@@ -100,10 +100,10 @@ export class ComparatorDialogComponent {
         const result = this.isConfidential && selected.sensitiveValue ? selected.sensitiveValue : selected.value;
         this.dialogRef.close(result);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ComparatorDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: ComparatorDialogComponent, selector: "app-comparator-dialog", ngImport: i0, template: "<h2 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">Comparator selector</h2>\n<div class=\"tabs\">\n    <mat-button-toggle-group [ngModel]=\"selectedGroup\" (ngModelChange)=\"changeGroup($event)\">\n        <mat-button-toggle [value]=\"ComparatorGroup.Text\">Text</mat-button-toggle>\n        <mat-button-toggle [value]=\"ComparatorGroup.Number\">Number</mat-button-toggle>\n        <mat-button-toggle [value]=\"ComparatorGroup.Semver\">Semantic version</mat-button-toggle>\n        <mat-button-toggle [value]=\"ComparatorGroup.DateTime\">Datetime</mat-button-toggle>\n        <mat-button-toggle [value]=\"ComparatorGroup.Array\">Array</mat-button-toggle>\n    </mat-button-toggle-group>\n</div>\n\n<div mat-dialog-content class=\"container\" [ngSwitch]=\"selectedGroup\">\n    <div *ngSwitchCase=\"ComparatorGroup.Text\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain string/text.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Text}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Number\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain numbers.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Number}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Semver\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain semantic versions.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Semver}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.DateTime\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain datetimes.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.DateTime}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Array\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain items of a string/text list.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Array}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\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 mat-dialog-close>Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" mat-dialog-close>Close</button>\n</div>\n\n<ng-template #comparators let-group=\"group\">\n    <div>\n        <mat-radio-group (change)=\"comparatorChange($event.value)\">\n            <div class=\"comparator-container\">\n                <div class=\"item\" [ngClass]=\"'col-' + i % 2\" [class.selected]=\"comparator.value === selectedComparator\" \n                    *ngFor=\"let comparator of listComparators(group); let i = index\" (click)=\"comparatorChange(comparator.value)\">                    \n                    <mat-radio-button color=\"primary\" [value]=\"comparator.value\" [disabled]=\"data.readOnly\"\n                    [checked]=\"comparator.value === selectedComparator\" [matTooltip]=\"comparator.description\">\n                        <div class=\"title\">\n                            {{comparator.label}}\n                        </div>\n                    </mat-radio-button>\n                    <div class=\"description\">\n                        <div class=\"example\">\n                            <ng-container [ngSwitch]=\"comparator.value\">\n\n                                <!-- TEXT -->\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> EQUALS <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT EQUALS <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, <span class=\"match-val\">iOS</span> ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, Windows ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">bob</span>, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ bob, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">&#64;foo.com</span>, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;example.com</span> NOT ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ &#64;foo.com, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://test-app.foo.com</span> CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">test</span>, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://app.foo.com</span> NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ test, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- NUMBER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> = <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> != <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">3.14</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n\n                                <!-- SEMVER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">1.0.0</span>, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2.1.0</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ 1.0.0, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.0.0-alpha</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.2.0</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.1.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- DATETIME -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeBefore\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 10:36:24</span> BEFORE <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeAfter\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 15:41:06</span> AFTER <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- ARRAY -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Writer, Reader ]</span> ARRAY CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">Writer</span>, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayDoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Guest, Reader ]</span> ARRAY NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Writer, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>\n\n<ng-template #confidential>\n    <p>Select how the <i>comparison values</i> should be persisted:</p>\n    <div matTooltip=\"The currently selected comparator does not support hashed comparison values, they will be presented as cleartext in the config JSON.\"\n        [matTooltipDisabled]=\"confidentialEnabled\">\n        <mat-radio-group class=\"confidential-container\" (change)=\"confidentialChange($event.value)\">\n            <div class=\"confidential item\" (click)=\"confidentialChange(true)\">\n                <mat-radio-button color=\"primary\" [value]=\"true\" [checked]=\"isConfidential\" [disabled]=\"!confidentialEnabled || data.readOnly\">\n                    <div class=\"title\">\n                        <div class=\"text\">Hashed</div>\n                        <div class=\"icon\"><mat-icon>lock</mat-icon></div>\n                    </div>\n                </mat-radio-button>\n                <div class=\"description\">\n                    We recommend using this option in case of frontend applications targeting users based on sensitive data (like email addresses, names, etc). \n                    \n                </div>\n            </div>\n            <div class=\"cleartext item\" (click)=\"confidentialChange(false)\">\n                <mat-radio-button color=\"primary\" [value]=\"false\" [checked]=\"!isConfidential\" [disabled]=\"!confidentialEnabled || data.readOnly\">\n                    <div class=\"title\">\n                        <div class=\"text\">Cleartext</div>\n                        <div class=\"icon\"><mat-icon>lock_open_right</mat-icon></div>\n                    </div>\n                </mat-radio-button>\n                <div class=\"description\">\n                    You can use this option when you target users based on non-sensitive data. Comparison values will be presented as plain text in the <i>config JSON</i>.\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>", styles: [".container{width:100%;padding:0 24px!important}.container .confidential-container{display:flex;flex-direction:row;margin-bottom:15px}.container .confidential-container .item{flex:50%;border:1px solid rgb(224,224,224);cursor:pointer;padding:5px 5px 10px;border-radius:5px}.container .confidential-container .confidential{margin-right:5px}.container .confidential-container .cleartext{margin-left:5px}.container .confidential-container .title{cursor:pointer;display:flex;flex-direction:row;align-items:center}.container .confidential-container .title .text{font-weight:700}.container .confidential-container .title .icon{margin-left:3px}.container .confidential-container .title .icon mat-icon{font-size:18px;width:18px;height:18px}.container .confidential-container .description{font-size:12px;padding-left:10px;line-height:16px}.container .comparator-container{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.container .comparator-container .item{flex:0 0 calc(50% - 17px);border:1px solid rgb(224,224,224);cursor:pointer;padding:5px 5px 10px;border-radius:5px;margin-bottom:10px}.container .comparator-container .col-0{margin-right:5px}.container .comparator-container .col-1{margin-left:5px}.container .comparator-container .title{cursor:pointer;font-weight:700}.container .comparator-container .description{font-size:12px;line-height:16px;padding-left:10px;cursor:pointer}.container .comparator-container .description .example{background-color:#f1f1f1;opacity:.8;padding:3px 5px;border-radius:5px;display:inline-block}.container .comparator-container .description .example .comp-attr{font-weight:600;font-style:italic;padding-right:3px}.container .comparator-container .description .example .comp-val{padding-left:3px;padding-right:3px;font-style:italic}.container .comparator-container .description .example .match-val{font-weight:600}.container .comparator-container .description .example .arrow{color:#636363}.container .comparator-container .selected{border-color:#f7a224}.tabs{margin:0 24px}.mat-button-toggle-group{flex-wrap:wrap}@media (max-width: 500px){.container .comparator-container .item{flex:100%}.container .comparator-container .col-0{margin-right:0}.container .comparator-container .col-1{margin-left:0}.container .confidential-container{flex-wrap:wrap}.container .confidential-container .item{flex:100%}.container .confidential-container .confidential{margin-right:0;margin-bottom:10px}.container .confidential-container .cleartext{margin-left:0}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i8.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i8.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i9.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i9.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComparatorDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ComparatorDialogComponent, selector: "app-comparator-dialog", ngImport: i0, template: "<h2 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">Comparator selector</h2>\n<div class=\"tabs\">\n    <mat-button-toggle-group [ngModel]=\"selectedGroup\" (ngModelChange)=\"changeGroup($event)\">\n        <mat-button-toggle [value]=\"ComparatorGroup.Text\">Text</mat-button-toggle>\n        <mat-button-toggle [value]=\"ComparatorGroup.Number\">Number</mat-button-toggle>\n        <mat-button-toggle [value]=\"ComparatorGroup.Semver\">Semantic version</mat-button-toggle>\n        <mat-button-toggle [value]=\"ComparatorGroup.DateTime\">Datetime</mat-button-toggle>\n        <mat-button-toggle [value]=\"ComparatorGroup.Array\">Array</mat-button-toggle>\n    </mat-button-toggle-group>\n</div>\n\n<div mat-dialog-content class=\"container\" [ngSwitch]=\"selectedGroup\">\n    <div *ngSwitchCase=\"ComparatorGroup.Text\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain string/text.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Text}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Number\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain numbers.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Number}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Semver\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain semantic versions.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Semver}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.DateTime\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain datetimes.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.DateTime}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Array\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain items of a string/text list.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Array}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\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 mat-dialog-close>Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" mat-dialog-close>Close</button>\n</div>\n\n<ng-template #comparators let-group=\"group\">\n    <div>\n        <mat-radio-group (change)=\"comparatorChange($event.value)\">\n            <div class=\"comparator-container\">\n                <div class=\"item\" [ngClass]=\"'col-' + i % 2\" [class.selected]=\"comparator.value === selectedComparator\" \n                    *ngFor=\"let comparator of listComparators(group); let i = index\" (click)=\"comparatorChange(comparator.value)\">                    \n                    <mat-radio-button color=\"primary\" [value]=\"comparator.value\" [disabled]=\"data.readOnly\"\n                    [checked]=\"comparator.value === selectedComparator\" [matTooltip]=\"comparator.description\">\n                        <div class=\"title\">\n                            {{comparator.label}}\n                        </div>\n                    </mat-radio-button>\n                    <div class=\"description\">\n                        <div class=\"example\">\n                            <ng-container [ngSwitch]=\"comparator.value\">\n\n                                <!-- TEXT -->\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> EQUALS <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT EQUALS <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, <span class=\"match-val\">iOS</span> ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, Windows ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">bob</span>, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ bob, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">&#64;foo.com</span>, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;example.com</span> NOT ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ &#64;foo.com, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://test-app.foo.com</span> CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">test</span>, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://app.foo.com</span> NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ test, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- NUMBER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> = <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> != <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">3.14</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n\n                                <!-- SEMVER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">1.0.0</span>, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2.1.0</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ 1.0.0, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.0.0-alpha</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.2.0</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.1.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- DATETIME -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeBefore\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 10:36:24</span> BEFORE <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeAfter\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 15:41:06</span> AFTER <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- ARRAY -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Writer, Reader ]</span> ARRAY CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">Writer</span>, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayDoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Guest, Reader ]</span> ARRAY NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Writer, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>\n\n<ng-template #confidential>\n    <p>Select how the <i>comparison values</i> should be persisted:</p>\n    <div matTooltip=\"The currently selected comparator does not support hashed comparison values, they will be presented as cleartext in the config JSON.\"\n        [matTooltipDisabled]=\"confidentialEnabled\">\n        <mat-radio-group class=\"confidential-container\" (change)=\"confidentialChange($event.value)\">\n            <div class=\"confidential item\" (click)=\"confidentialChange(true)\">\n                <mat-radio-button color=\"primary\" [value]=\"true\" [checked]=\"isConfidential\" [disabled]=\"!confidentialEnabled || data.readOnly\">\n                    <div class=\"title\">\n                        <div class=\"text\">Hashed</div>\n                        <div class=\"icon\"><mat-icon>lock</mat-icon></div>\n                    </div>\n                </mat-radio-button>\n                <div class=\"description\">\n                    We recommend using this option in case of frontend applications targeting users based on sensitive data (like email addresses, names, etc). \n                    \n                </div>\n            </div>\n            <div class=\"cleartext item\" (click)=\"confidentialChange(false)\">\n                <mat-radio-button color=\"primary\" [value]=\"false\" [checked]=\"!isConfidential\" [disabled]=\"!confidentialEnabled || data.readOnly\">\n                    <div class=\"title\">\n                        <div class=\"text\">Cleartext</div>\n                        <div class=\"icon\"><mat-icon>lock_open_right</mat-icon></div>\n                    </div>\n                </mat-radio-button>\n                <div class=\"description\">\n                    You can use this option when you target users based on non-sensitive data. Comparison values will be presented as plain text in the <i>config JSON</i>.\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>", styles: [".container{width:100%;padding:0 24px!important}.container .confidential-container{display:flex;flex-direction:row;margin-bottom:15px}.container .confidential-container .item{flex:50%;border:1px solid rgb(224,224,224);cursor:pointer;padding:5px 5px 10px;border-radius:5px}.container .confidential-container .confidential{margin-right:5px}.container .confidential-container .cleartext{margin-left:5px}.container .confidential-container .title{cursor:pointer;display:flex;flex-direction:row;align-items:center}.container .confidential-container .title .text{font-weight:700}.container .confidential-container .title .icon{margin-left:3px}.container .confidential-container .title .icon mat-icon{font-size:18px;width:18px;height:18px}.container .confidential-container .description{font-size:12px;padding-left:10px;line-height:16px}.container .comparator-container{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.container .comparator-container .item{flex:0 0 calc(50% - 17px);border:1px solid rgb(224,224,224);cursor:pointer;padding:5px 5px 10px;border-radius:5px;margin-bottom:10px}.container .comparator-container .col-0{margin-right:5px}.container .comparator-container .col-1{margin-left:5px}.container .comparator-container .title{cursor:pointer;font-weight:700}.container .comparator-container .description{font-size:12px;line-height:16px;padding-left:10px;cursor:pointer}.container .comparator-container .description .example{background-color:#f1f1f1;opacity:.8;padding:3px 5px;border-radius:5px;display:inline-block}.container .comparator-container .description .example .comp-attr{font-weight:600;font-style:italic;padding-right:3px}.container .comparator-container .description .example .comp-val{padding-left:3px;padding-right:3px;font-style:italic}.container .comparator-container .description .example .match-val{font-weight:600}.container .comparator-container .description .example .arrow{color:#636363}.container .comparator-container .selected{border-color:#f7a224}.tabs{margin:0 24px}.mat-button-toggle-group{flex-wrap:wrap}@media (max-width: 500px){.container .comparator-container .item{flex:100%}.container .comparator-container .col-0{margin-right:0}.container .comparator-container .col-1{margin-left:0}.container .confidential-container{flex-wrap:wrap}.container .confidential-container .item{flex:100%}.container .confidential-container .confidential{margin-right:0;margin-bottom:10px}.container .confidential-container .cleartext{margin-left:0}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i8.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i8.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i9.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i9.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ComparatorDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComparatorDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-comparator-dialog', template: "<h2 mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable\">Comparator selector</h2>\n<div class=\"tabs\">\n    <mat-button-toggle-group [ngModel]=\"selectedGroup\" (ngModelChange)=\"changeGroup($event)\">\n        <mat-button-toggle [value]=\"ComparatorGroup.Text\">Text</mat-button-toggle>\n        <mat-button-toggle [value]=\"ComparatorGroup.Number\">Number</mat-button-toggle>\n        <mat-button-toggle [value]=\"ComparatorGroup.Semver\">Semantic version</mat-button-toggle>\n        <mat-button-toggle [value]=\"ComparatorGroup.DateTime\">Datetime</mat-button-toggle>\n        <mat-button-toggle [value]=\"ComparatorGroup.Array\">Array</mat-button-toggle>\n    </mat-button-toggle-group>\n</div>\n\n<div mat-dialog-content class=\"container\" [ngSwitch]=\"selectedGroup\">\n    <div *ngSwitchCase=\"ComparatorGroup.Text\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain string/text.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Text}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Number\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain numbers.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Number}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Semver\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain semantic versions.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Semver}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.DateTime\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain datetimes.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.DateTime}\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"ComparatorGroup.Array\">\n        <p>The following comparators assume that the <i>comparison attribute's</i> value (set on the SDK's <a href=\"https://configcat.com/docs/targeting/user-object\" target=\"_blank\" rel=\"noopener noreferrer\">User Object</a>) and the <i>comparison value</i> contain items of a string/text list.</p>\n        <ng-container [ngTemplateOutlet]=\"comparators\" [ngTemplateOutletContext]=\"{group:ComparatorGroup.Array}\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"confidential\"></ng-container>\n    </div>\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 mat-dialog-close>Cancel</button>\n    <button *ngIf=\"data.readOnly\" type=\"button\" mat-stroked-button color=\"primary\" mat-dialog-close>Close</button>\n</div>\n\n<ng-template #comparators let-group=\"group\">\n    <div>\n        <mat-radio-group (change)=\"comparatorChange($event.value)\">\n            <div class=\"comparator-container\">\n                <div class=\"item\" [ngClass]=\"'col-' + i % 2\" [class.selected]=\"comparator.value === selectedComparator\" \n                    *ngFor=\"let comparator of listComparators(group); let i = index\" (click)=\"comparatorChange(comparator.value)\">                    \n                    <mat-radio-button color=\"primary\" [value]=\"comparator.value\" [disabled]=\"data.readOnly\"\n                    [checked]=\"comparator.value === selectedComparator\" [matTooltip]=\"comparator.description\">\n                        <div class=\"title\">\n                            {{comparator.label}}\n                        </div>\n                    </mat-radio-button>\n                    <div class=\"description\">\n                        <div class=\"example\">\n                            <ng-container [ngSwitch]=\"comparator.value\">\n\n                                <!-- TEXT -->\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> EQUALS <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT EQUALS <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">bob&#64;foo.com</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, <span class=\"match-val\">iOS</span> ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.IsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">iOS</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Android, macOS, Windows ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">bob</span>, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotStartsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">alice&#64;foo.com</span> NOT STARTS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ bob, jane ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;foo.com</span> ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">&#64;foo.com</span>, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.TextNotEndsWithAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">bob&#64;example.com</span> NOT ENDS WITH ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ &#64;foo.com, &#64;bar.com ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://test-app.foo.com</span> CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">test</span>, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">https://app.foo.com</span> NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ test, localhost ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- NUMBER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> = <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberDoesNotEqual\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">42</span> != <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">3.14</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">3.14</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.NumberGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">69</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">42</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n\n                                <!-- SEMVER -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> IS ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">1.0.0</span>, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerIsNotOneOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2.1.0</span> IS NOT ONE OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ 1.0.0, 4.3.5 ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLess\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerLessOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &lt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.2.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreater\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.0.0</span> &gt; <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.0.0-alpha</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.SemVerGreaterOrEquals\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">1.2.0</span> &gt;= <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">1.1.0</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- DATETIME -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeBefore\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 10:36:24</span> BEFORE <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.DateTimeAfter\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">2020.11.05 15:41:06</span> AFTER <span class=\"comp-val match-val\" [matTooltip]=\"comparisonValueTooltip\">2020.11.05 12:00:00</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                                <!-- ARRAY -->\n\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayContainsAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Writer, Reader ]</span> ARRAY CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ <span class=\"match-val\">Writer</span>, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"UserComparator.ArrayDoesNotContainAnyOf\">\n                                    <span class=\"comp-attr\" [matTooltip]=\"comparisonAttributeTooltip\">[ Guest, Reader ]</span> ARRAY NOT CONTAINS ANY OF <span class=\"comp-val\" [matTooltip]=\"comparisonValueTooltip\">[ Writer, Admin ]</span> <span class=\"arrow\">\u2794</span> true\n                                </ng-container>\n\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>\n\n<ng-template #confidential>\n    <p>Select how the <i>comparison values</i> should be persisted:</p>\n    <div matTooltip=\"The currently selected comparator does not support hashed comparison values, they will be presented as cleartext in the config JSON.\"\n        [matTooltipDisabled]=\"confidentialEnabled\">\n        <mat-radio-group class=\"confidential-container\" (change)=\"confidentialChange($event.value)\">\n            <div class=\"confidential item\" (click)=\"confidentialChange(true)\">\n                <mat-radio-button color=\"primary\" [value]=\"true\" [checked]=\"isConfidential\" [disabled]=\"!confidentialEnabled || data.readOnly\">\n                    <div class=\"title\">\n                        <div class=\"text\">Hashed</div>\n                        <div class=\"icon\"><mat-icon>lock</mat-icon></div>\n                    </div>\n                </mat-radio-button>\n                <div class=\"description\">\n                    We recommend using this option in case of frontend applications targeting users based on sensitive data (like email addresses, names, etc). \n                    \n                </div>\n            </div>\n            <div class=\"cleartext item\" (click)=\"confidentialChange(false)\">\n                <mat-radio-button color=\"primary\" [value]=\"false\" [checked]=\"!isConfidential\" [disabled]=\"!confidentialEnabled || data.readOnly\">\n                    <div class=\"title\">\n                        <div class=\"text\">Cleartext</div>\n                        <div class=\"icon\"><mat-icon>lock_open_right</mat-icon></div>\n                    </div>\n                </mat-radio-button>\n                <div class=\"description\">\n                    You can use this option when you target users based on non-sensitive data. Comparison values will be presented as plain text in the <i>config JSON</i>.\n                </div>\n            </div>\n        </mat-radio-group>\n    </div>\n</ng-template>", styles: [".container{width:100%;padding:0 24px!important}.container .confidential-container{display:flex;flex-direction:row;margin-bottom:15px}.container .confidential-container .item{flex:50%;border:1px solid rgb(224,224,224);cursor:pointer;padding:5px 5px 10px;border-radius:5px}.container .confidential-container .confidential{margin-right:5px}.container .confidential-container .cleartext{margin-left:5px}.container .confidential-container .title{cursor:pointer;display:flex;flex-direction:row;align-items:center}.container .confidential-container .title .text{font-weight:700}.container .confidential-container .title .icon{margin-left:3px}.container .confidential-container .title .icon mat-icon{font-size:18px;width:18px;height:18px}.container .confidential-container .description{font-size:12px;padding-left:10px;line-height:16px}.container .comparator-container{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.container .comparator-container .item{flex:0 0 calc(50% - 17px);border:1px solid rgb(224,224,224);cursor:pointer;padding:5px 5px 10px;border-radius:5px;margin-bottom:10px}.container .comparator-container .col-0{margin-right:5px}.container .comparator-container .col-1{margin-left:5px}.container .comparator-container .title{cursor:pointer;font-weight:700}.container .comparator-container .description{font-size:12px;line-height:16px;padding-left:10px;cursor:pointer}.container .comparator-container .description .example{background-color:#f1f1f1;opacity:.8;padding:3px 5px;border-radius:5px;display:inline-block}.container .comparator-container .description .example .comp-attr{font-weight:600;font-style:italic;padding-right:3px}.container .comparator-container .description .example .comp-val{padding-left:3px;padding-right:3px;font-style:italic}.container .comparator-container .description .example .match-val{font-weight:600}.container .comparator-container .description .example .arrow{color:#636363}.container .comparator-container .selected{border-color:#f7a224}.tabs{margin:0 24px}.mat-button-toggle-group{flex-wrap:wrap}@media (max-width: 500px){.container .comparator-container .item{flex:100%}.container .comparator-container .col-0{margin-right:0}.container .comparator-container .col-1{margin-left:0}.container .confidential-container{flex-wrap:wrap}.container .confidential-container .item{flex:100%}.container .confidential-container .confidential{margin-right:0;margin-bottom:10px}.container .confidential-container .cleartext{margin-left:0}}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{

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.3.10", 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.10", 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", 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-protected-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;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-protected-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-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", "disabledInteractive", "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", "disabledInteractive"], 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.3.10", ngImport: i0, type: PopoutListEditorDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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:#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"] }]
+            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-protected-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;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-protected-button-container-height: 24px;--mdc-outlined-button-container-height: 24px;--mat-text-button-touch-target-display: none;--mat-filled-button-touch-target-display: none;--mat-protected-button-touch-target-display: none;--mat-outlined-button-touch-target-display: none;margin-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]