ng-configcat-publicapi-ui 4.0.0 → 4.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/esm2022/lib/_directives/input-display-normalizer.directive.mjs +3 -3
  2. package/esm2022/lib/_services/app-data-adapter.mjs +3 -3
  3. package/esm2022/lib/_services/comparison-value-list-helper.mjs +3 -3
  4. package/esm2022/lib/_services/form-generator.mjs +3 -3
  5. package/esm2022/lib/_services/form-helper.mjs +63 -7
  6. package/esm2022/lib/_services/messaging.service.mjs +3 -3
  7. package/esm2022/lib/_services/public-api.service.mjs +3 -3
  8. package/esm2022/lib/_services/setting-list-form-helper.mjs +3 -3
  9. package/esm2022/lib/_services/tracking.directive.mjs +3 -3
  10. package/esm2022/lib/ace-editor/ace-editor.component.mjs +3 -3
  11. package/esm2022/lib/authorization/authorization.component.mjs +3 -3
  12. package/esm2022/lib/base/base-select.component.mjs +3 -3
  13. package/esm2022/lib/base/base.component.mjs +3 -3
  14. package/esm2022/lib/bootstrap.mjs +2 -1
  15. package/esm2022/lib/configuration.mjs +3 -3
  16. package/esm2022/lib/dialogs/confirmation-dialog/confirmation-dialog.mjs +3 -3
  17. package/esm2022/lib/dialogs/delete-setting-dialog/delete-setting-dialog.component.mjs +3 -3
  18. package/esm2022/lib/dialogs/expand-dialog/expand-dialog.component.mjs +3 -3
  19. package/esm2022/lib/dialogs/info-dialog/info-dialog.mjs +3 -3
  20. package/esm2022/lib/dialogs/reason-dialog/reason-dialog.component.mjs +3 -3
  21. package/esm2022/lib/dialogs/reroute-dialog/reroute-dialog.mjs +28 -0
  22. package/esm2022/lib/dialogs/save-snackbar/save-snackbar.component.mjs +3 -3
  23. package/esm2022/lib/ng-configcat-publicapi-ui.module.mjs +10 -7
  24. package/esm2022/lib/selects/config-select/config-select.component.mjs +3 -3
  25. package/esm2022/lib/selects/environment-select/environment-select.component.mjs +3 -3
  26. package/esm2022/lib/selects/product-select/product-select.component.mjs +3 -3
  27. package/esm2022/lib/selects/setting-select/setting-select.component.mjs +3 -3
  28. package/esm2022/lib/setting-item/setting-item.component.mjs +3 -3
  29. package/esm2022/lib/setting-list/setting/rollout-percentage-items/rollout-percentage-items.component.mjs +5 -5
  30. package/esm2022/lib/setting-list/setting/rollout-rules/rollout-rules.component.mjs +3 -3
  31. package/esm2022/lib/setting-list/setting/setting.component.mjs +3 -3
  32. package/esm2022/lib/setting-list/setting/value/value.component.mjs +5 -5
  33. package/esm2022/lib/setting-list/setting-list.component.mjs +3 -3
  34. package/esm2022/lib/v2/feature-flag/date-time-picker/date-time-picker.component.mjs +3 -3
  35. package/esm2022/lib/v2/feature-flag/dependees-dialog/dependees-dialog.component.mjs +3 -3
  36. package/esm2022/lib/v2/feature-flag/evaluation-formula/evaluation-formula.component.mjs +4 -4
  37. package/esm2022/lib/v2/feature-flag/evaluation-formula/feature-flag-value/feature-flag-value.component.mjs +5 -5
  38. package/esm2022/lib/v2/feature-flag/evaluation-formula/popout-text-editor-dialog/popout-text-editor-dialog.component.mjs +3 -3
  39. package/esm2022/lib/v2/feature-flag/evaluation-formula/targeting-rule/conditions/condition-chip/condition-chip.component.mjs +3 -3
  40. package/esm2022/lib/v2/feature-flag/evaluation-formula/targeting-rule/conditions/conditions.component.mjs +4 -4
  41. package/esm2022/lib/v2/feature-flag/evaluation-formula/targeting-rule/conditions/prerequisite-flag-condition/prerequisite-flag-condition.component.mjs +3 -3
  42. package/esm2022/lib/v2/feature-flag/evaluation-formula/targeting-rule/conditions/segment-condition/segment-condition.component.mjs +4 -4
  43. package/esm2022/lib/v2/feature-flag/evaluation-formula/targeting-rule/conditions/user-condition/comparator-dialog/comparator-dialog.component.mjs +32 -32
  44. package/esm2022/lib/v2/feature-flag/evaluation-formula/targeting-rule/conditions/user-condition/popout-list-editor-dialog/popout-list-editor-dialog.component.mjs +4 -4
  45. package/esm2022/lib/v2/feature-flag/evaluation-formula/targeting-rule/conditions/user-condition/user-condition.component.mjs +5 -5
  46. package/esm2022/lib/v2/feature-flag/evaluation-formula/targeting-rule/percentage-options/percentage-options.component.mjs +5 -5
  47. package/esm2022/lib/v2/feature-flag/evaluation-formula/targeting-rule/targeting-rule.component.mjs +4 -4
  48. package/esm2022/lib/v2/feature-flag/feature-flag.component.mjs +8 -8
  49. package/esm2022/lib/v2/feature-flag/percentage-evaluation-attribute-dialog/percentage-evaluation-attribute-dialog.component.mjs +3 -3
  50. package/esm2022/lib/v2/feature-flag-item.component.mjs +19 -8
  51. package/fesm2022/ng-configcat-publicapi-ui.mjs +288 -199
  52. package/fesm2022/ng-configcat-publicapi-ui.mjs.map +1 -1
  53. package/lib/_services/form-helper.d.ts +3 -2
  54. package/lib/bootstrap.d.ts +1 -0
  55. package/lib/dialogs/reroute-dialog/reroute-dialog.d.ts +20 -0
  56. package/lib/ng-configcat-publicapi-ui.module.d.ts +27 -26
  57. package/lib/v2/feature-flag/evaluation-formula/targeting-rule/conditions/user-condition/user-condition.component.d.ts +1 -1
  58. package/lib/v2/feature-flag/feature-flag.component.d.ts +2 -2
  59. package/package.json +1 -1
  60. package/public-api.scss +4 -6
@@ -24,12 +24,12 @@ export class SegmentConditionComponent {
24
24
  createSegment() {
25
25
  this.createSegmentRequested.emit();
26
26
  }
27
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SegmentConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
28
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", 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/V2/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{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-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.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"] }] }); }
27
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SegmentConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
28
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", 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/V2/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"] }] }); }
29
29
  }
30
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SegmentConditionComponent, decorators: [{
30
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SegmentConditionComponent, decorators: [{
31
31
  type: Component,
32
- 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/V2/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{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-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.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"] }]
32
+ 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/V2/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"] }]
33
33
  }], propDecorators: { targetingRuleIndex: [{
34
34
  type: Input
35
35
  }], conditionIndex: [{