ng-configcat-publicapi-ui 5.6.0 → 5.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -214,6 +214,10 @@ class FormHelper {
214
214
  if (control.hasError("matTimepickerParse")) {
215
215
  return "Invalid time value.";
216
216
  }
217
+ if (control.hasError("invalidDate")) {
218
+ const error = control.errors["invalidDate"];
219
+ return error.message;
220
+ }
217
221
  for (const defaultErrorMessageType of defaultErrorMessageTypes) {
218
222
  if (control.hasError(defaultErrorMessageType)) {
219
223
  const errorMessage = control.errors[defaultErrorMessageType].message;
@@ -3818,7 +3822,7 @@ class CreateChangeRequestDialogComponent {
3818
3822
  };
3819
3823
  }
3820
3824
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CreateChangeRequestDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3821
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: CreateChangeRequestDialogComponent, isStandalone: true, selector: "app-create-change-request-dialog", viewQueries: [{ propertyName: "reasonInput", first: true, predicate: ["reason"], descendants: true, isSignal: true }], ngImport: i0, template: "<div mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable title\">\n @if (data.isSchedule) {\n <div>Schedule change request</div>\n } @else {\n <div>Create change request</div>\n }\n</div>\n\n<div mat-dialog-content>\n <form class=\"form\" [formGroup]=\"formGroup\">\n <mat-form-field appearance=\"outline\" class=\"field-name\">\n <mat-label>Title</mat-label>\n <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n <input matInput formControlName=\"title\" placeholder=\"e.g. Enable dark mode for beta users\" maxlength=\"255\" />\n @if (formGroup.controls.title.invalid) {\n <mat-error>\n A short name your team will see on the ConfigCat Dashboard.\n {{ FormHelper.getErrorMessage(formGroup.controls.title) }}\n </mat-error>\n }\n </mat-form-field>\n\n <mat-form-field appearance=\"outline\" class=\"field-reason\" subscriptSizing=\"dynamic\">\n <mat-label>\n Notes\n @if (!data.reasonRequired) {\n <span class=\"optional\">(optional)</span>\n }\n </mat-label>\n <mat-hint>\n This will appear in the Audit Log (in the Notes section when you expand the corresponding entry) upon applying\n the change request.\n </mat-hint>\n <textarea\n #reason\n matInput\n formControlName=\"reason\"\n rows=\"2\"\n maxlength=\"1000\"\n placeholder=\"Why is this change needed?\"></textarea>\n @if (formGroup.controls.reason.invalid) {\n <mat-error>\n Notes are mandatory for the target environment. {{ FormHelper.getErrorMessage(formGroup.controls.reason) }}\n </mat-error>\n }\n </mat-form-field>\n\n @if (data.isSchedule) {\n <div class=\"section\">\n <h3>When should the proposed changes be applied?</h3>\n <div class=\"scheduled\">\n <div class=\"date-selector\">\n <app-date-time-picker [formControl]=\"formGroup.controls.applyAt\" />\n @if (formGroup.controls.applyAt.invalid) {\n <mat-error class=\"error\">\n {{ FormHelper.getErrorMessage(formGroup.controls.applyAt) }}\n </mat-error>\n }\n </div>\n @if (data.environmentApproveRequired && data.canBypassApproval) {\n <div>\n <mat-checkbox\n matInput\n color=\"primary\"\n class=\"bypass-approval-checkbox\"\n formControlName=\"bypassApproval\"\n matTooltip=\"Enabling this option will bypass the approval requirement of the target environment and \n lets the change request be applied on schedule even if it's not approved.\"\n matTooltipPosition=\"below\">\n Bypass approval requirement for scheduled changes\n </mat-checkbox>\n </div>\n }\n <app-box type=\"info\">\n The proposed changes will be applied at the scheduled time.\n <br />\n If conflicting changes occur before the scheduled time, they will prevent applying the scheduled changes.\n <br />\n You can always cancel the scheduled operation before it is executed and apply the changes manually.\n </app-box>\n </div>\n </div>\n }\n </form>\n</div>\n\n<div mat-dialog-actions>\n <button class=\"submit-button\" mat-flat-button type=\"submit\" color=\"success\" [disabled]=\"saving()\" (click)=\"submit()\">\n @if (data.isSchedule) {\n <mat-icon class=\"icon-transform-rotate\">schedule</mat-icon>\n } @else {\n <mat-icon>merge_type</mat-icon>\n }\n <span>{{ submitLabel }}</span>\n </button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n</div>\n", styles: [".title{display:flex;justify-content:space-between;align-items:center;gap:16px}.title .sub-title{font-size:13px;font-weight:400;color:var(--panel-description-color)}.form{display:flex;flex-direction:column;gap:4px;margin-top:10px;margin-bottom:10px}.form .field-name,.form .field-reason,.form .field-apply-at{width:100%}.form .optional{font-size:12px;font-weight:400;color:var(--panel-description-color)}h3{font-size:14px;font-weight:500;color:var(--text-color)}.changes-title{display:flex;justify-content:space-between;align-items:center}.error{font-size:10px}.section{margin-top:.8rem}.section .scheduled{display:flex;flex-direction:column;flex-wrap:wrap;gap:12px}.section .scheduled .bypass-approval-checkbox{--mat-checkbox-label-text-size: 12px;--mat-checkbox-label-text-color: var(--panel-description-color);margin-left:-2px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: BoxComponent, selector: "app-box", inputs: ["type", "title"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 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: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3825
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: CreateChangeRequestDialogComponent, isStandalone: true, selector: "app-create-change-request-dialog", viewQueries: [{ propertyName: "reasonInput", first: true, predicate: ["reason"], descendants: true, isSignal: true }], ngImport: i0, template: "<div mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable title\">\n @if (data.isSchedule) {\n <div>Schedule change request</div>\n } @else {\n <div>Create change request</div>\n }\n</div>\n\n<div mat-dialog-content>\n <form class=\"form\" [formGroup]=\"formGroup\">\n <mat-form-field appearance=\"outline\" class=\"field-name\">\n <mat-label>Title</mat-label>\n <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n <input matInput formControlName=\"title\" placeholder=\"e.g. Enable dark mode for beta users\" maxlength=\"255\" />\n @if (formGroup.controls.title.invalid) {\n <mat-error>\n A short name your team will see on the ConfigCat Dashboard.\n {{ FormHelper.getErrorMessage(formGroup.controls.title) }}\n </mat-error>\n }\n </mat-form-field>\n\n <mat-form-field appearance=\"outline\" class=\"field-reason\" subscriptSizing=\"dynamic\">\n <mat-label>\n Notes\n @if (!data.reasonRequired) {\n <span class=\"optional\">(optional)</span>\n }\n </mat-label>\n <mat-hint>\n This will appear in the Audit Log (in the Notes section when you expand the corresponding entry) upon applying\n the change request.\n </mat-hint>\n <textarea\n #reason\n matInput\n formControlName=\"reason\"\n rows=\"2\"\n maxlength=\"1000\"\n placeholder=\"Why is this change needed?\"></textarea>\n @if (formGroup.controls.reason.invalid) {\n <mat-error>\n Notes are mandatory for the target environment. {{ FormHelper.getErrorMessage(formGroup.controls.reason) }}\n </mat-error>\n }\n </mat-form-field>\n\n @if (data.isSchedule) {\n <div class=\"section\">\n <h3>When should the proposed changes be applied?</h3>\n <div class=\"scheduled\">\n <div class=\"date-selector\">\n <app-date-time-picker [formControl]=\"formGroup.controls.applyAt\" />\n @if (formGroup.controls.applyAt.invalid) {\n <mat-error class=\"error\">\n {{ FormHelper.getErrorMessage(formGroup.controls.applyAt) }}\n </mat-error>\n }\n </div>\n @if (data.environmentApproveRequired && data.canBypassApproval) {\n <div>\n <mat-checkbox\n matInput\n color=\"primary\"\n class=\"bypass-approval-checkbox\"\n formControlName=\"bypassApproval\"\n matTooltip=\"Enabling this option will bypass the approval requirement of the target environment and \n lets the change request be applied on schedule even if it's not approved.\"\n matTooltipPosition=\"below\">\n Bypass approval requirement for scheduled changes\n </mat-checkbox>\n </div>\n }\n <app-box type=\"info\">\n The proposed changes will be applied at the scheduled time.\n <br />\n If conflicting changes occur before the scheduled time, they will prevent applying the scheduled changes.\n <br />\n You can always cancel the scheduled operation before it is executed and apply the changes manually.\n </app-box>\n </div>\n </div>\n }\n </form>\n</div>\n\n<div mat-dialog-actions>\n <button class=\"submit-button\" mat-flat-button type=\"submit\" color=\"success\" [disabled]=\"saving()\" (click)=\"submit()\">\n @if (data.isSchedule) {\n <mat-icon class=\"icon-transform-rotate\">schedule</mat-icon>\n } @else {\n <mat-icon>merge_type</mat-icon>\n }\n <span>{{ submitLabel }}</span>\n </button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n</div>\n", styles: [".title{display:flex;justify-content:space-between;align-items:center;gap:16px}.title .sub-title{font-size:13px;font-weight:400;color:var(--panel-description-color)}.form{display:flex;flex-direction:column;gap:10px;margin-top:10px;margin-bottom:10px}.form .field-name,.form .field-reason,.form .field-apply-at{width:100%}.form .optional{font-size:12px;font-weight:400;color:var(--panel-description-color)}h3{font-size:14px;font-weight:500;color:var(--text-color)}.changes-title{display:flex;justify-content:space-between;align-items:center}.error{font-size:10px}.section{margin-top:.8rem}.section .scheduled{display:flex;flex-direction:column;flex-wrap:wrap;gap:12px}.section .scheduled .bypass-approval-checkbox{--mat-checkbox-label-text-size: 12px;--mat-checkbox-label-text-color: var(--panel-description-color);margin-left:-2px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: BoxComponent, selector: "app-box", inputs: ["type", "title"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 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: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3822
3826
  }
3823
3827
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CreateChangeRequestDialogComponent, decorators: [{
3824
3828
  type: Component,
@@ -3842,7 +3846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
3842
3846
  CdkDrag,
3843
3847
  CdkDragHandle,
3844
3848
  DateTimePickerComponent,
3845
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable title\">\n @if (data.isSchedule) {\n <div>Schedule change request</div>\n } @else {\n <div>Create change request</div>\n }\n</div>\n\n<div mat-dialog-content>\n <form class=\"form\" [formGroup]=\"formGroup\">\n <mat-form-field appearance=\"outline\" class=\"field-name\">\n <mat-label>Title</mat-label>\n <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n <input matInput formControlName=\"title\" placeholder=\"e.g. Enable dark mode for beta users\" maxlength=\"255\" />\n @if (formGroup.controls.title.invalid) {\n <mat-error>\n A short name your team will see on the ConfigCat Dashboard.\n {{ FormHelper.getErrorMessage(formGroup.controls.title) }}\n </mat-error>\n }\n </mat-form-field>\n\n <mat-form-field appearance=\"outline\" class=\"field-reason\" subscriptSizing=\"dynamic\">\n <mat-label>\n Notes\n @if (!data.reasonRequired) {\n <span class=\"optional\">(optional)</span>\n }\n </mat-label>\n <mat-hint>\n This will appear in the Audit Log (in the Notes section when you expand the corresponding entry) upon applying\n the change request.\n </mat-hint>\n <textarea\n #reason\n matInput\n formControlName=\"reason\"\n rows=\"2\"\n maxlength=\"1000\"\n placeholder=\"Why is this change needed?\"></textarea>\n @if (formGroup.controls.reason.invalid) {\n <mat-error>\n Notes are mandatory for the target environment. {{ FormHelper.getErrorMessage(formGroup.controls.reason) }}\n </mat-error>\n }\n </mat-form-field>\n\n @if (data.isSchedule) {\n <div class=\"section\">\n <h3>When should the proposed changes be applied?</h3>\n <div class=\"scheduled\">\n <div class=\"date-selector\">\n <app-date-time-picker [formControl]=\"formGroup.controls.applyAt\" />\n @if (formGroup.controls.applyAt.invalid) {\n <mat-error class=\"error\">\n {{ FormHelper.getErrorMessage(formGroup.controls.applyAt) }}\n </mat-error>\n }\n </div>\n @if (data.environmentApproveRequired && data.canBypassApproval) {\n <div>\n <mat-checkbox\n matInput\n color=\"primary\"\n class=\"bypass-approval-checkbox\"\n formControlName=\"bypassApproval\"\n matTooltip=\"Enabling this option will bypass the approval requirement of the target environment and \n lets the change request be applied on schedule even if it's not approved.\"\n matTooltipPosition=\"below\">\n Bypass approval requirement for scheduled changes\n </mat-checkbox>\n </div>\n }\n <app-box type=\"info\">\n The proposed changes will be applied at the scheduled time.\n <br />\n If conflicting changes occur before the scheduled time, they will prevent applying the scheduled changes.\n <br />\n You can always cancel the scheduled operation before it is executed and apply the changes manually.\n </app-box>\n </div>\n </div>\n }\n </form>\n</div>\n\n<div mat-dialog-actions>\n <button class=\"submit-button\" mat-flat-button type=\"submit\" color=\"success\" [disabled]=\"saving()\" (click)=\"submit()\">\n @if (data.isSchedule) {\n <mat-icon class=\"icon-transform-rotate\">schedule</mat-icon>\n } @else {\n <mat-icon>merge_type</mat-icon>\n }\n <span>{{ submitLabel }}</span>\n </button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n</div>\n", styles: [".title{display:flex;justify-content:space-between;align-items:center;gap:16px}.title .sub-title{font-size:13px;font-weight:400;color:var(--panel-description-color)}.form{display:flex;flex-direction:column;gap:4px;margin-top:10px;margin-bottom:10px}.form .field-name,.form .field-reason,.form .field-apply-at{width:100%}.form .optional{font-size:12px;font-weight:400;color:var(--panel-description-color)}h3{font-size:14px;font-weight:500;color:var(--text-color)}.changes-title{display:flex;justify-content:space-between;align-items:center}.error{font-size:10px}.section{margin-top:.8rem}.section .scheduled{display:flex;flex-direction:column;flex-wrap:wrap;gap:12px}.section .scheduled .bypass-approval-checkbox{--mat-checkbox-label-text-size: 12px;--mat-checkbox-label-text-color: var(--panel-description-color);margin-left:-2px}\n"] }]
3849
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"draggable title\">\n @if (data.isSchedule) {\n <div>Schedule change request</div>\n } @else {\n <div>Create change request</div>\n }\n</div>\n\n<div mat-dialog-content>\n <form class=\"form\" [formGroup]=\"formGroup\">\n <mat-form-field appearance=\"outline\" class=\"field-name\">\n <mat-label>Title</mat-label>\n <mat-hint>A short name your team will see on the ConfigCat Dashboard.</mat-hint>\n <input matInput formControlName=\"title\" placeholder=\"e.g. Enable dark mode for beta users\" maxlength=\"255\" />\n @if (formGroup.controls.title.invalid) {\n <mat-error>\n A short name your team will see on the ConfigCat Dashboard.\n {{ FormHelper.getErrorMessage(formGroup.controls.title) }}\n </mat-error>\n }\n </mat-form-field>\n\n <mat-form-field appearance=\"outline\" class=\"field-reason\" subscriptSizing=\"dynamic\">\n <mat-label>\n Notes\n @if (!data.reasonRequired) {\n <span class=\"optional\">(optional)</span>\n }\n </mat-label>\n <mat-hint>\n This will appear in the Audit Log (in the Notes section when you expand the corresponding entry) upon applying\n the change request.\n </mat-hint>\n <textarea\n #reason\n matInput\n formControlName=\"reason\"\n rows=\"2\"\n maxlength=\"1000\"\n placeholder=\"Why is this change needed?\"></textarea>\n @if (formGroup.controls.reason.invalid) {\n <mat-error>\n Notes are mandatory for the target environment. {{ FormHelper.getErrorMessage(formGroup.controls.reason) }}\n </mat-error>\n }\n </mat-form-field>\n\n @if (data.isSchedule) {\n <div class=\"section\">\n <h3>When should the proposed changes be applied?</h3>\n <div class=\"scheduled\">\n <div class=\"date-selector\">\n <app-date-time-picker [formControl]=\"formGroup.controls.applyAt\" />\n @if (formGroup.controls.applyAt.invalid) {\n <mat-error class=\"error\">\n {{ FormHelper.getErrorMessage(formGroup.controls.applyAt) }}\n </mat-error>\n }\n </div>\n @if (data.environmentApproveRequired && data.canBypassApproval) {\n <div>\n <mat-checkbox\n matInput\n color=\"primary\"\n class=\"bypass-approval-checkbox\"\n formControlName=\"bypassApproval\"\n matTooltip=\"Enabling this option will bypass the approval requirement of the target environment and \n lets the change request be applied on schedule even if it's not approved.\"\n matTooltipPosition=\"below\">\n Bypass approval requirement for scheduled changes\n </mat-checkbox>\n </div>\n }\n <app-box type=\"info\">\n The proposed changes will be applied at the scheduled time.\n <br />\n If conflicting changes occur before the scheduled time, they will prevent applying the scheduled changes.\n <br />\n You can always cancel the scheduled operation before it is executed and apply the changes manually.\n </app-box>\n </div>\n </div>\n }\n </form>\n</div>\n\n<div mat-dialog-actions>\n <button class=\"submit-button\" mat-flat-button type=\"submit\" color=\"success\" [disabled]=\"saving()\" (click)=\"submit()\">\n @if (data.isSchedule) {\n <mat-icon class=\"icon-transform-rotate\">schedule</mat-icon>\n } @else {\n <mat-icon>merge_type</mat-icon>\n }\n <span>{{ submitLabel }}</span>\n </button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n</div>\n", styles: [".title{display:flex;justify-content:space-between;align-items:center;gap:16px}.title .sub-title{font-size:13px;font-weight:400;color:var(--panel-description-color)}.form{display:flex;flex-direction:column;gap:10px;margin-top:10px;margin-bottom:10px}.form .field-name,.form .field-reason,.form .field-apply-at{width:100%}.form .optional{font-size:12px;font-weight:400;color:var(--panel-description-color)}h3{font-size:14px;font-weight:500;color:var(--text-color)}.changes-title{display:flex;justify-content:space-between;align-items:center}.error{font-size:10px}.section{margin-top:.8rem}.section .scheduled{display:flex;flex-direction:column;flex-wrap:wrap;gap:12px}.section .scheduled .bypass-approval-checkbox{--mat-checkbox-label-text-size: 12px;--mat-checkbox-label-text-color: var(--panel-description-color);margin-left:-2px}\n"] }]
3846
3850
  }], propDecorators: { reasonInput: [{ type: i0.ViewChild, args: ["reason", { isSignal: true }] }] } });
3847
3851
 
3848
3852
  class CopyableValueComponent {
@@ -7215,6 +7219,7 @@ class FeatureFlagItemComponent extends BaseComponent {
7215
7219
  && error.status === 400
7216
7220
  && FormHelper.getHttpErrorResponseMessage(error, "Reason") === "Reason required.") {
7217
7221
  this.openSaveAndPublishDialog(true, bypassApproval);
7222
+ return;
7218
7223
  }
7219
7224
  if (error instanceof HttpErrorResponse
7220
7225
  && error.status === 400