ng-configcat-publicapi-ui 5.6.7 → 5.6.8

package/fesm2022/ng-configcat-publicapi-ui.mjs

@@ -16,7 +16,7 @@ import { throwError, timer, Subject, forkJoin, of, tap, catchError as catchError
 import { retry, catchError, map } from 'rxjs/operators';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { MatButton, MatIconButton } from '@angular/material/button';
-import { MeService, Configuration, ProductsService, ConfigsService, EnvironmentsService, FeatureFlagsSettingsService, FeatureFlagSettingValuesV2Service, FeatureFlagSettingValuesService, IntegrationLinksService, SegmentsService, OrganizationsService, ChangeRequestsApprovalFlowScheduledChangesBetaService, UserComparator, SettingType, PrerequisiteComparator, SegmentComparator, RolloutRuleComparator, EvaluationVersion } from 'ng-configcat-publicapi';
+import { MeService, Configuration, ProductsService, ConfigsService, EnvironmentsService, FeatureFlagsSettingsService, FeatureFlagSettingValuesV2Service, FeatureFlagSettingValuesService, IntegrationLinksService, SegmentsService, OrganizationsService, ChangeRequestsApprovalFlowScheduledChangesService, UserComparator, SettingType, PrerequisiteComparator, SegmentComparator, RolloutRuleComparator, EvaluationVersion } from 'ng-configcat-publicapi';
 import * as i1 from '@angular/forms';
 import { FormArray, Validators, FormGroup, FormControl, FormBuilder, NonNullableFormBuilder, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { NativeDateAdapter, MatOption, DateAdapter, MatRipple, MatOptgroup } from '@angular/material/core';
@@ -162,8 +162,8 @@ class PublicApiService {
             password: basicAuthPassword ?? this.configuration?.basicAuthPassword,
         }));
     }
-    createChangeRequestsApprovalFlowScheduledChangesBetaService(basicAuthUsername = null, basicAuthPassword = null, basePath = null) {
-        return new ChangeRequestsApprovalFlowScheduledChangesBetaService(this.httpClient, basePath ?? this.configuration?.basePath ?? defaultPublicApiBasePath, new Configuration({
+    createChangeRequestsApprovalFlowScheduledChangesService(basicAuthUsername = null, basicAuthPassword = null, basePath = null) {
+        return new ChangeRequestsApprovalFlowScheduledChangesService(this.httpClient, basePath ?? this.configuration?.basePath ?? defaultPublicApiBasePath, new Configuration({
             username: basicAuthUsername ?? this.configuration?.basicAuthUsername,
             password: basicAuthPassword ?? this.configuration?.basicAuthPassword,
         }));
@@ -1799,7 +1799,7 @@ class BaseComponent {
         return this.publicApiService.createOrganizationService(this.basicAuthUsername(), this.basicAuthPassword(), this.basePath());
     }
     createChangeRequestsService() {
-        return this.publicApiService.createChangeRequestsApprovalFlowScheduledChangesBetaService(this.basicAuthUsername(), this.basicAuthPassword(), this.basePath());
+        return this.publicApiService.createChangeRequestsApprovalFlowScheduledChangesService(this.basicAuthUsername(), this.basicAuthPassword(), this.basePath());
     }
     getDashboardBasePath() {
         return this.publicApiService.getDashboardBasePath();
@@ -3678,6 +3678,7 @@ class CreateChangeRequestDialogComponent {
             reason: ["", this.data.reasonRequired ? [Validators.required, Validators.maxLength(1000)] : [Validators.maxLength(1000)]],
             applyAt: this.formBuilder.control(this.data.isSchedule ? this.tenMinutesFromNow : null, [this.mustBeInFuture(5)]),
             bypassApproval: [false],
+            sendNotificationsToApprovers: [false],
         });
         this.submitLabel = this.data.isSchedule ? "Schedule changes" : "Propose changes";
     }
@@ -3690,12 +3691,13 @@ class CreateChangeRequestDialogComponent {
             return;
         }
         this.saving.set(true);
-        const { title, reason, applyAt, bypassApproval } = this.formGroup.getRawValue();
-        this.publicApiService.createChangeRequestsApprovalFlowScheduledChangesBetaService(this.data.basicAuthUsername, this.data.basicAuthPassword, this.data.basePath).createChangeRequest(this.data.configId, this.data.environmentId, {
+        const { title, reason, applyAt, bypassApproval, sendNotificationsToApprovers } = this.formGroup.getRawValue();
+        this.publicApiService.createChangeRequestsApprovalFlowScheduledChangesService(this.data.basicAuthUsername, this.data.basicAuthPassword, this.data.basePath).createChangeRequest(this.data.configId, this.data.environmentId, {
             title,
             reason,
             applyAt: applyAt ? new Date(applyAt * 1000).toUTCString() : null,
             bypassApproval: bypassApproval,
+            sendNotificationsToApprovers: sendNotificationsToApprovers,
             proposedChanges: this.data.dirtySettingValues.map(sv => ({
                 proposedChange: sv,
             })),
@@ -3814,7 +3816,7 @@ Please <strong>eliminate the circular dependency</strong> before creating your c
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CreateChangeRequestDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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              @let scheduleErrorMessage = FormHelper.getErrorMessage(formGroup.controls.applyAt);\n              @if (scheduleErrorMessage) {\n                <mat-error class=\"error\">\n                  {{ scheduleErrorMessage }}\n                </mat-error>\n              }\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    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <mat-error>\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </mat-error>\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;color:var(--flag-validation-error)}.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 }); }
+    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              @let scheduleErrorMessage = FormHelper.getErrorMessage(formGroup.controls.applyAt);\n              @if (scheduleErrorMessage) {\n                <mat-error class=\"error\">\n                  {{ scheduleErrorMessage }}\n                </mat-error>\n              }\n            }\n          </div>\n          @if (data.environmentApproveRequired && data.canBypassApproval) {\n            <div>\n              <mat-checkbox\n                matInput\n                color=\"primary\"\n                class=\"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\n    <div class=\"section\">\n      <h3>Notification</h3>\n      <div class=\"notification-checkbox\">\n        <mat-checkbox class=\"checkbox\" matInput color=\"primary\" formControlName=\"sendNotificationsToApprovers\">\n          Send a notification email about this change request to everyone with approval permission\n        </mat-checkbox>\n      </div>\n    </div>\n\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <mat-error>\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </mat-error>\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;color:var(--flag-validation-error)}.section{margin-top:.8rem}.section .scheduled{display:flex;flex-direction:column;flex-wrap:wrap;gap:12px}.section .scheduled .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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CreateChangeRequestDialogComponent, decorators: [{
             type: Component,
@@ -3838,7 +3840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         CdkDrag,
                         CdkDragHandle,
                         DateTimePickerComponent,
-                    ], 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              @let scheduleErrorMessage = FormHelper.getErrorMessage(formGroup.controls.applyAt);\n              @if (scheduleErrorMessage) {\n                <mat-error class=\"error\">\n                  {{ scheduleErrorMessage }}\n                </mat-error>\n              }\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    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <mat-error>\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </mat-error>\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;color:var(--flag-validation-error)}.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"] }]
+                    ], 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              @let scheduleErrorMessage = FormHelper.getErrorMessage(formGroup.controls.applyAt);\n              @if (scheduleErrorMessage) {\n                <mat-error class=\"error\">\n                  {{ scheduleErrorMessage }}\n                </mat-error>\n              }\n            }\n          </div>\n          @if (data.environmentApproveRequired && data.canBypassApproval) {\n            <div>\n              <mat-checkbox\n                matInput\n                color=\"primary\"\n                class=\"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\n    <div class=\"section\">\n      <h3>Notification</h3>\n      <div class=\"notification-checkbox\">\n        <mat-checkbox class=\"checkbox\" matInput color=\"primary\" formControlName=\"sendNotificationsToApprovers\">\n          Send a notification email about this change request to everyone with approval permission\n        </mat-checkbox>\n      </div>\n    </div>\n\n    @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n      <mat-error>\n        <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n      </mat-error>\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;color:var(--flag-validation-error)}.section{margin-top:.8rem}.section .scheduled{display:flex;flex-direction:column;flex-wrap:wrap;gap:12px}.section .scheduled .checkbox{--mat-checkbox-label-text-size: 12px;--mat-checkbox-label-text-color: var(--panel-description-color);margin-left:-2px}\n"] }]
         }], propDecorators: { reasonInput: [{ type: i0.ViewChild, args: ["reason", { isSignal: true }] }] } });
 
 class CopyableValueComponent {