ng-configcat-publicapi-ui 5.4.2 → 5.6.0

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "ng-configcat-publicapi-ui",
-  "version": "5.4.2",
+  "version": "5.6.0",
+  "license": "MIT",
   "peerDependencies": {
-    "@angular/cdk": "^21.2.14",
-    "@angular/common": "^21.2.17",
-    "@angular/core": "^21.2.17",
-    "@angular/forms": "^21.2.17",
-    "@angular/material": "^21.2.14",
-    "@angular/router": "^21.2.17",
-    "@configcat/sdk": "^1.0.2",
-    "ng-configcat-publicapi": "^6.0.0",
+    "@angular/cdk": "^22.1.1",
+    "@angular/common": "^22.1.1",
+    "@angular/core": "^22.1.1",
+    "@angular/forms": "^22.1.1",
+    "@angular/material": "^22.1.1",
+    "@angular/router": "^22.1.1",
+    "@configcat/sdk": "^1.1.0",
+    "ng-configcat-publicapi": "^6.2.1",
     "papaparse": "^5.5.3",
-    "ace-builds": "^1.37.0"
+    "ace-builds": "^1.44.0"
   },
   "dependencies": {
     "tslib": "^2.8.1"

package/src/css/button.scss

@@ -1,4 +1,4 @@
-@use '@angular/material' as mat;
+@use "@angular/material" as mat;
 
 html > body {
   .mat-mdc-icon-button.action-icon-button {
@@ -69,7 +69,8 @@ html > body {
     }
   }
 
-  .mat-datepicker-toggle, .mat-timepicker-toggle {
+  .mat-datepicker-toggle,
+  .mat-timepicker-toggle {
     @include mat.icon-button-density(-5);
 
     .mat-mdc-icon-button {
@@ -80,4 +81,22 @@ html > body {
   .disabled-btn-container {
     display: inline-block;
   }
+
+  .mat-mdc-unelevated-button.mat-success:not(:disabled) {
+    color: white;
+    background-color: var(--green-button-background-color);
+
+    &:hover {
+      background-color: var(--green-button-background-hover-color);
+    }
+  }
+
+  .mat-mdc-unelevated-button.mat-applied:not(:disabled) {
+    color: white;
+    background-color: var(--change-request-status-applied-color);
+
+    &:hover {
+      background-color: var(--change-request-status-applied-hover-color);
+    }
+  }
 }

package/src/css/variables.scss

@@ -66,6 +66,8 @@
   --diabled-button-color: #99999981;
   --primary-button-state-layer-color: black;
   --warn-button-state-layer-color: white;
+  --green-button-background-color: #47a34a;
+  --green-button-background-hover-color: #3b863e;
 
   // ==== CONTROLS ====
   --input-outline-focused-color: #{color.adjust(theme.$primary-color, $lightness: 5%)};

package/src/css/vars/flag.scss

@@ -70,6 +70,9 @@
     --flag-v1-input-border: #e5e5e5;
     --flag-v1-colored-berry-opacity: 0.5;
 
+    --save-separator-color: #ffffff56;
+    --save-separator-disabled-color: #9c9c9c41;
+
     [data-theme="dark"] {
       --flag-tutorial-background: #3180ee23;
 

package/types/ng-configcat-publicapi-ui.d.ts

@@ -1,13 +1,14 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, Provider, OnInit, OnDestroy } from '@angular/core';
+import { InjectionToken, Provider, WritableSignal, ElementRef, OnInit, OnDestroy } from '@angular/core';
 import * as ng_configcat_publicapi from 'ng-configcat-publicapi';
-import { MeService, ProductsService, ConfigsService, EnvironmentsService, FeatureFlagsSettingsService, FeatureFlagSettingValuesV2Service, FeatureFlagSettingValuesService, IntegrationLinksService, SegmentsService, OrganizationsService, UserComparator, SegmentComparator, PrerequisiteComparator, SettingType, PredefinedVariationModel, SettingFormulaModel, ComparisonValueListModel, FeatureFlagLimitations, ComparisonValueModel, ConditionModel, ValueModel, PercentageOptionModel, PrerequisiteFlagConditionModel, SegmentConditionModel, TargetingRuleModel, UserConditionModel, UpdateEvaluationFormulaModel, ConfigModel, EnvironmentModel, SettingValueModel, UpdateSettingValueModel, SettingDataModel, SegmentListModel, SettingModel, EvaluationVersion } from 'ng-configcat-publicapi';
+import { MeService, ProductsService, ConfigsService, EnvironmentsService, FeatureFlagsSettingsService, FeatureFlagSettingValuesV2Service, FeatureFlagSettingValuesService, IntegrationLinksService, SegmentsService, OrganizationsService, ChangeRequestsApprovalFlowScheduledChangesBetaService, UserComparator, SegmentComparator, PrerequisiteComparator, SettingType, PredefinedVariationModel, SettingFormulaModel, ComparisonValueListModel, FeatureFlagLimitations, ComparisonValueModel, ConditionModel, ValueModel, PercentageOptionModel, PrerequisiteFlagConditionModel, SegmentConditionModel, TargetingRuleModel, UserConditionModel, UpdateEvaluationFormulaModel, ConfigModel, EnvironmentModel, SettingValueModel, UpdateSettingValueModel, SettingDataModel, SegmentListModel, SettingModel, EvaluationVersion } from 'ng-configcat-publicapi';
 import { HttpErrorResponse } from '@angular/common/http';
 import * as _angular_forms from '@angular/forms';
 import { FormGroup, FormControl, FormArray, ValidatorFn, AbstractControl } from '@angular/forms';
 import { Observable, Subscription } from 'rxjs';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBarRef } from '@angular/material/snack-bar';
 import * as _angular_material_paginator from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 
@@ -46,6 +47,7 @@ declare class PublicApiService {
     createIntegrationLinksService(basicAuthUsername?: string | null, basicAuthPassword?: string | null, basePath?: string | null): IntegrationLinksService;
     createSegmentsService(basicAuthUsername?: string | null, basicAuthPassword?: string | null, basePath?: string | null): SegmentsService;
     createOrganizationService(basicAuthUsername?: string | null, basicAuthPassword?: string | null, basePath?: string | null): OrganizationsService;
+    createChangeRequestsApprovalFlowScheduledChangesBetaService(basicAuthUsername?: string | null, basicAuthPassword?: string | null, basePath?: string | null): ChangeRequestsApprovalFlowScheduledChangesBetaService;
     getDashboardBasePath(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PublicApiService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<PublicApiService>;
@@ -183,24 +185,39 @@ interface IDependeeSetting {
     key: string;
     name: string;
 }
+interface IPrerequisiteChanged {
+    settingId: number;
+    prerequisiteIds: number[];
+}
 
 interface IFlagState {
-    addButtonRenderState: IAddButtonsRenderState;
-    settingValue: SettingFormulaModel;
-    dependeeSettings: IDependeeSetting[];
-    prerequisiteSettings: IPrerequisiteSetting[];
-    panelExpanded: boolean;
-    readOnly: boolean;
+    readonly addButtonRenderState: WritableSignal<IAddButtonsRenderState>;
+    readonly settingValue: SettingFormulaModel;
+    readonly dependeeSettings: WritableSignal<IDependeeSetting[]>;
+    readonly prerequisiteSettings: WritableSignal<IPrerequisiteSetting[]>;
+    readonly panelExpanded: WritableSignal<boolean>;
+    readonly readOnly: boolean;
+    readonly hasActiveChangeRequest: WritableSignal<boolean>;
 }
 interface IAddButtonsRenderState {
-    renderTopAddButtons: boolean;
-    hasPercentageOnlyRule: boolean;
-    addRuleButtonTracker: IAddRuleButtonTracker[];
+    readonly renderTopAddButtons: boolean;
+    readonly hasPercentageOnlyRule: boolean;
+    readonly addRuleButtonTracker: IAddRuleButtonTracker[];
 }
 interface IAddRuleButtonTracker {
-    showAddRuleButtons: boolean;
-    showOrChip: boolean;
-    renderSeparationArea: boolean;
+    readonly showAddRuleButtons: boolean;
+    readonly showOrChip: boolean;
+    readonly renderSeparationArea: boolean;
+}
+
+declare class MessagingService {
+    private readonly snackBar;
+    showErrorSnack(message?: string, durationMs?: number): void;
+    showSuccessSnack(message?: string, durationMs?: number): void;
+    showWarningSnack(message?: string, durationMs?: number): void;
+    dismissCurrentSnack(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MessagingService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MessagingService>;
 }
 
 interface ComparisonValueListParseResult {
@@ -320,6 +337,7 @@ declare class BaseComponent {
     protected createSettingValuesV2Service(): ng_configcat_publicapi.FeatureFlagSettingValuesV2Service;
     protected createSegmentsService(): ng_configcat_publicapi.SegmentsService;
     protected createOrganizationService(): ng_configcat_publicapi.OrganizationsService;
+    protected createChangeRequestsService(): ng_configcat_publicapi.ChangeRequestsApprovalFlowScheduledChangesBetaService;
     protected getDashboardBasePath(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<BaseComponent, "app-base", never, { "basePath": { "alias": "basePath"; "required": false; "isSignal": true; }; "basicAuthUsername": { "alias": "basicAuthUsername"; "required": false; "isSignal": true; }; "basicAuthPassword": { "alias": "basicAuthPassword"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -509,6 +527,97 @@ declare class DeleteSettingDialogComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DeleteSettingDialogComponent, "app-delete-setting-dialog", never, {}, {}, never, never, true, never>;
 }
 
+declare enum NotificationSnackColor {
+    Green = 0,
+    Yellow = 1,
+    Red = 2,
+    Blue = 3
+}
+interface NotificationSnackData {
+    color: NotificationSnackColor;
+    message: string;
+}
+declare class NotificationSnackComponent {
+    snackBarRef: MatSnackBarRef<NotificationSnackComponent>;
+    data: NotificationSnackData;
+    NotificationSnackColor: typeof NotificationSnackColor;
+    readonly progressBar: _angular_core.Signal<ElementRef<HTMLElement>>;
+    private readonly destroyRef;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NotificationSnackComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NotificationSnackComponent, "app-notification-snack", never, {}, {}, never, never, true, never>;
+}
+
+interface ICustomizeFeatureFlag {
+    menuDeleteSettingText: string;
+    showExpandedSection: boolean;
+    showTargetingRuleSegmentOptionSection: boolean;
+    showTargetingRulePrerequisiteOptionSection: boolean;
+    showMenuOpenInDashboardSection: boolean;
+    showMenuCopyDirectLinkSection: boolean;
+    showMenuDeleteSettingSection: boolean;
+}
+declare const DEFAULT_CUSTOMIZE_FEATURE_FLAG: ICustomizeFeatureFlag;
+interface IGlance {
+    ruleText: string;
+    percentageText: string;
+    class: string;
+}
+declare class FeatureFlagComponent {
+    private readonly dialog;
+    private readonly messagingService;
+    private readonly router;
+    private readonly clipboard;
+    readonly formGroup: _angular_core.InputSignal<FormGroup<UpdateSettingValueForm>>;
+    readonly flagState: _angular_core.InputSignal<IFlagState>;
+    readonly segments: _angular_core.InputSignal<SegmentListModel[]>;
+    readonly featureFlagLimitations: _angular_core.InputSignal<FeatureFlagLimitations>;
+    readonly hasOtherEnvironment: _angular_core.InputSignal<boolean>;
+    readonly environmentName: _angular_core.InputSignal<string>;
+    readonly showEnvironmentName: _angular_core.InputSignal<boolean>;
+    readonly canDeleteSetting: _angular_core.InputSignal<boolean>;
+    readonly predefinedVariationsEnabled: _angular_core.InputSignal<boolean>;
+    readonly dashboardBasePath: _angular_core.InputSignal<string>;
+    readonly comparisonAttributes: _angular_core.InputSignal<string[]>;
+    readonly customize: _angular_core.InputSignal<ICustomizeFeatureFlag>;
+    readonly addSegmentConditionRequestedWithoutSegments: _angular_core.OutputEmitterRef<void>;
+    readonly expandedChanged: _angular_core.OutputEmitterRef<boolean>;
+    readonly deleteSettingRequested: _angular_core.OutputEmitterRef<{
+        setting: SettingDataModel;
+    }>;
+    readonly subscriptionLimitReached: _angular_core.OutputEmitterRef<void>;
+    readonly prerequisiteConditionChanged: _angular_core.OutputEmitterRef<IPrerequisiteChanged>;
+    readonly recalcAddButtons: _angular_core.OutputEmitterRef<void>;
+    readonly viewVariationsRequested: _angular_core.OutputEmitterRef<{
+        settingId: number;
+        settingName: string;
+    }>;
+    SettingType: {
+        readonly Boolean: "boolean";
+        readonly String: "string";
+        readonly Int: "int";
+        readonly Double: "double";
+    };
+    setExpanded(expanded: boolean): void;
+    deleteSetting(): void;
+    subscriptionLimitReachedCalled(): void;
+    changePercentageEvaluationAttribute(): void;
+    getGlance(): IGlance | undefined;
+    getValueText(settingType: SettingType, value: {
+        boolValue: boolean | null;
+        stringValue: string | null;
+        intValue: number | null;
+        doubleValue: number | null;
+    }): string;
+    getRuleText(): string;
+    copyDirectLink(): void;
+    getDashboardUrl(): string;
+    getChangeRequestsUrl(): string;
+    openDependeesDialog(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FeatureFlagComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FeatureFlagComponent, "app-feature-flag", never, { "formGroup": { "alias": "formGroup"; "required": true; "isSignal": true; }; "flagState": { "alias": "flagState"; "required": true; "isSignal": true; }; "segments": { "alias": "segments"; "required": true; "isSignal": true; }; "featureFlagLimitations": { "alias": "featureFlagLimitations"; "required": true; "isSignal": true; }; "hasOtherEnvironment": { "alias": "hasOtherEnvironment"; "required": true; "isSignal": true; }; "environmentName": { "alias": "environmentName"; "required": false; "isSignal": true; }; "showEnvironmentName": { "alias": "showEnvironmentName"; "required": false; "isSignal": true; }; "canDeleteSetting": { "alias": "canDeleteSetting"; "required": false; "isSignal": true; }; "predefinedVariationsEnabled": { "alias": "predefinedVariationsEnabled"; "required": true; "isSignal": true; }; "dashboardBasePath": { "alias": "dashboardBasePath"; "required": true; "isSignal": true; }; "comparisonAttributes": { "alias": "comparisonAttributes"; "required": true; "isSignal": true; }; "customize": { "alias": "customize"; "required": false; "isSignal": true; }; }, { "addSegmentConditionRequestedWithoutSegments": "addSegmentConditionRequestedWithoutSegments"; "expandedChanged": "expandedChanged"; "deleteSettingRequested": "deleteSettingRequested"; "subscriptionLimitReached": "subscriptionLimitReached"; "prerequisiteConditionChanged": "prerequisiteConditionChanged"; "recalcAddButtons": "recalcAddButtons"; "viewVariationsRequested": "viewVariationsRequested"; }, never, never, true, never>;
+}
+
 declare class FeatureFlagItemComponent extends BaseComponent implements OnInit, OnDestroy {
     private readonly dialog;
     private readonly messagingService;
@@ -517,7 +626,7 @@ declare class FeatureFlagItemComponent extends BaseComponent implements OnInit,
     readonly configId: _angular_core.InputSignal<string>;
     readonly settingId: _angular_core.InputSignal<number>;
     readonly canDeleteSetting: _angular_core.InputSignal<boolean>;
-    readonly deleteSettingText: _angular_core.InputSignal<string>;
+    readonly customize: _angular_core.InputSignal<ICustomizeFeatureFlag>;
     readonly showEnvironmentName: _angular_core.InputSignal<boolean>;
     readonly deleteSettingRequested: _angular_core.OutputEmitterRef<DeleteSettingModel>;
     readonly loadSucceeded: _angular_core.OutputEmitterRef<void>;
@@ -526,31 +635,34 @@ declare class FeatureFlagItemComponent extends BaseComponent implements OnInit,
     readonly componentError: _angular_core.OutputEmitterRef<Error>;
     readonly expandedStateChanged: _angular_core.OutputEmitterRef<void>;
     readonly formValuesChanged: _angular_core.OutputEmitterRef<void>;
+    readonly dashboardBasePath: string;
     segments: SegmentListModel[];
-    dashboardBasePath: string;
     loading: boolean;
     submitting: boolean;
     formGroup: FormGroup<UpdateSettingValueForm>;
     formValueChangesSubscription: Subscription | null;
     settings: SettingModel[];
     flagState: IFlagState;
-    settingFormula: SettingFormulaModel;
+    readonly settingFormula: _angular_core.WritableSignal<SettingFormulaModel | null>;
     prerequisiteSettings: IPrerequisiteSetting[];
     showFeedBackMessage: boolean;
     hasSettingValues: boolean;
     hasOtherEnvironment: boolean;
-    constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
     reloadSettingValues(): void;
     handleFetchedSettingValues(model: SettingFormulaModel): void;
+    readonly comparisonAttributes: _angular_core.Signal<string[]>;
     unsubscribeFormValueChangesSubscription(): void;
     private createFormGroupFromState;
     getAvailablePrerequisiteSettings(settingId: number): IPrerequisiteSetting[];
     revert(): void;
     revertDirtyValuesFromState(): void;
-    submit(): void;
-    updateSettingValues(updateModel: UpdateEvaluationFormulaModel, reason?: string): void;
+    openSaveAndPublishDialog(reasonRequired: boolean, bypassApproval: boolean): void;
+    submit(bypassApproval?: boolean): void;
+    createChangeRequest(isSchedule?: boolean): void;
+    private proceedWithCreateChangeRequest;
+    updateSettingValues(updateModel: UpdateEvaluationFormulaModel, bypassApproval: boolean, reason?: string, latestVersionId?: string): void;
     onDeleteSettingRequested(setting: {
         setting: SettingDataModel;
     }): void;
@@ -558,6 +670,7 @@ declare class FeatureFlagItemComponent extends BaseComponent implements OnInit,
     subscriptionLimitReachedCalled(): void;
     addSegmentConditionRequestedWithoutSegments(): void;
     trackByIndex(index: number): number;
+    recalcHasActiveChangeRequest(): void;
     recalcPrerequisites(): void;
     recalcAddButtons(): void;
     hasOnlyPercentageRule(group: FormGroup<UpdateSettingValueForm>): boolean;
@@ -568,13 +681,14 @@ declare class FeatureFlagItemComponent extends BaseComponent implements OnInit,
         settingId: number;
         settingName: string;
     }): void;
-    openConcurentDeleteDialog(): void;
+    openConcurrentDialog(updateModel: UpdateEvaluationFormulaModel, bypassApproval: boolean, reason?: string): void;
+    openConcurrentDeleteDialog(): void;
     openVariationsDialog(event: {
         settingId: number;
         settingName: string;
     }): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FeatureFlagItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FeatureFlagItemComponent, "app-feature-flag-item", never, { "productId": { "alias": "productId"; "required": true; "isSignal": true; }; "environmentId": { "alias": "environmentId"; "required": true; "isSignal": true; }; "configId": { "alias": "configId"; "required": true; "isSignal": true; }; "settingId": { "alias": "settingId"; "required": true; "isSignal": true; }; "canDeleteSetting": { "alias": "canDeleteSetting"; "required": false; "isSignal": true; }; "deleteSettingText": { "alias": "deleteSettingText"; "required": false; "isSignal": true; }; "showEnvironmentName": { "alias": "showEnvironmentName"; "required": false; "isSignal": true; }; }, { "deleteSettingRequested": "deleteSettingRequested"; "loadSucceeded": "loadSucceeded"; "loadFailed": "loadFailed"; "saveSucceeded": "saveSucceeded"; "componentError": "componentError"; "expandedStateChanged": "expandedStateChanged"; "formValuesChanged": "formValuesChanged"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FeatureFlagItemComponent, "app-feature-flag-item", never, { "productId": { "alias": "productId"; "required": true; "isSignal": true; }; "environmentId": { "alias": "environmentId"; "required": true; "isSignal": true; }; "configId": { "alias": "configId"; "required": true; "isSignal": true; }; "settingId": { "alias": "settingId"; "required": true; "isSignal": true; }; "canDeleteSetting": { "alias": "canDeleteSetting"; "required": false; "isSignal": true; }; "customize": { "alias": "customize"; "required": false; "isSignal": true; }; "showEnvironmentName": { "alias": "showEnvironmentName"; "required": false; "isSignal": true; }; }, { "deleteSettingRequested": "deleteSettingRequested"; "loadSucceeded": "loadSucceeded"; "loadFailed": "loadFailed"; "saveSucceeded": "saveSucceeded"; "componentError": "componentError"; "expandedStateChanged": "expandedStateChanged"; "formValuesChanged": "formValuesChanged"; }, never, never, true, never>;
 }
 
 interface AuthorizationParameters {
@@ -582,11 +696,15 @@ interface AuthorizationParameters {
     basicAuthPassword: string;
 }
 
+interface ICustomizeLinkFeatureFlag {
+    hideCancelButton: boolean;
+    addButtonLabel: string;
+    cancelButtonLabel: string;
+}
+declare const DEFAULT_CUSTOMIZE_LINK_FEATURE_FLAG: ICustomizeLinkFeatureFlag;
 declare class LinkFeatureFlagComponent implements OnInit, OnDestroy {
     readonly authorizationParameters: _angular_core.InputSignal<AuthorizationParameters | null | undefined>;
-    readonly hideCancelButton: _angular_core.InputSignal<boolean>;
-    readonly addButtonLabel: _angular_core.InputSignal<unknown>;
-    readonly cancelButtonLabel: _angular_core.InputSignal<unknown>;
+    readonly customize: _angular_core.InputSignal<ICustomizeLinkFeatureFlag>;
     readonly linkInitiated: _angular_core.OutputEmitterRef<LinkFeatureFlagParameters>;
     readonly resizeRequested: _angular_core.OutputEmitterRef<void>;
     readonly cancelInitiated: _angular_core.OutputEmitterRef<void>;
@@ -609,7 +727,7 @@ declare class LinkFeatureFlagComponent implements OnInit, OnDestroy {
     selectDropdownPanelChanged(useSelector: boolean): void;
     dropdownComponentFailed(error: Error): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LinkFeatureFlagComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LinkFeatureFlagComponent, "app-link-feature-flag", never, { "authorizationParameters": { "alias": "authorizationParameters"; "required": false; "isSignal": true; }; "hideCancelButton": { "alias": "hideCancelButton"; "required": false; "isSignal": true; }; "addButtonLabel": { "alias": "addButtonLabel"; "required": false; "isSignal": true; }; "cancelButtonLabel": { "alias": "cancelButtonLabel"; "required": false; "isSignal": true; }; }, { "linkInitiated": "linkInitiated"; "resizeRequested": "resizeRequested"; "cancelInitiated": "cancelInitiated"; "selectDropdownPanelChangedReqested": "selectDropdownPanelChangedReqested"; "componentError": "componentError"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LinkFeatureFlagComponent, "app-link-feature-flag", never, { "authorizationParameters": { "alias": "authorizationParameters"; "required": false; "isSignal": true; }; "customize": { "alias": "customize"; "required": false; "isSignal": true; }; }, { "linkInitiated": "linkInitiated"; "resizeRequested": "resizeRequested"; "cancelInitiated": "cancelInitiated"; "selectDropdownPanelChangedReqested": "selectDropdownPanelChangedReqested"; "componentError": "componentError"; }, never, never, true, never>;
 }
 
 type FeatureFlagValueType = boolean | string | number;
@@ -656,6 +774,19 @@ interface CreateConfigFormGroup {
     evaluationVersion: FormControl<EvaluationVersion>;
 }
 
+interface ICustomizeCreateFeatureFlag {
+    hideCancelButton: boolean;
+    createButtonLabel: string;
+    cancelButtonLabel: string;
+    targetSectionHeader: string;
+    targetSectionDescription?: string;
+    flagSectionHeader: string;
+    flagSectionDescription?: string;
+    linkSectionHeader: string;
+    linkSectionDescription?: string;
+    hideLinkSection: boolean;
+}
+declare const DEFAULT_CUSTOMIZE_CREATE_FEATURE_FLAG: ICustomizeCreateFeatureFlag;
 interface PresetProductAndConfig {
     productId: string;
     configId: string;
@@ -666,16 +797,7 @@ declare class CreateFeatureFlagComponent extends BaseComponent implements OnInit
     private readonly formBuilder;
     private readonly destroyRef;
     private readonly dialog;
-    readonly hideCancelButton: _angular_core.InputSignal<boolean>;
-    readonly createButtonLabel: _angular_core.InputSignal<string | undefined>;
-    readonly cancelButtonLabel: _angular_core.InputSignal<string | undefined>;
-    readonly targetSectionHeader: _angular_core.InputSignal<string | undefined>;
-    readonly targetSectionDescription: _angular_core.InputSignal<string | undefined>;
-    readonly flagSectionHeader: _angular_core.InputSignal<string | undefined>;
-    readonly flagSectionDescription: _angular_core.InputSignal<string | undefined>;
-    readonly linkSectionHeader: _angular_core.InputSignal<string | undefined>;
-    readonly linkSectionDescription: _angular_core.InputSignal<string | undefined>;
-    readonly hideLinkSection: _angular_core.InputSignal<boolean>;
+    readonly customize: _angular_core.InputSignal<ICustomizeCreateFeatureFlag>;
     readonly presetProductAndConfig: _angular_core.InputSignal<PresetProductAndConfig | undefined>;
     readonly createInitiated: _angular_core.OutputEmitterRef<LinkFeatureFlagParameters>;
     readonly resizeRequested: _angular_core.OutputEmitterRef<void>;
@@ -744,22 +866,26 @@ declare class CreateFeatureFlagComponent extends BaseComponent implements OnInit
     getColorIndex(row: FormGroup<PredefinedVariationFormGroup>, index: number): FeatureFlagValueType;
     dropdownComponentFailed(error: Error): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CreateFeatureFlagComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CreateFeatureFlagComponent, "app-create-feature-flag", never, { "hideCancelButton": { "alias": "hideCancelButton"; "required": false; "isSignal": true; }; "createButtonLabel": { "alias": "createButtonLabel"; "required": false; "isSignal": true; }; "cancelButtonLabel": { "alias": "cancelButtonLabel"; "required": false; "isSignal": true; }; "targetSectionHeader": { "alias": "targetSectionHeader"; "required": false; "isSignal": true; }; "targetSectionDescription": { "alias": "targetSectionDescription"; "required": false; "isSignal": true; }; "flagSectionHeader": { "alias": "flagSectionHeader"; "required": false; "isSignal": true; }; "flagSectionDescription": { "alias": "flagSectionDescription"; "required": false; "isSignal": true; }; "linkSectionHeader": { "alias": "linkSectionHeader"; "required": false; "isSignal": true; }; "linkSectionDescription": { "alias": "linkSectionDescription"; "required": false; "isSignal": true; }; "hideLinkSection": { "alias": "hideLinkSection"; "required": false; "isSignal": true; }; "presetProductAndConfig": { "alias": "presetProductAndConfig"; "required": false; "isSignal": true; }; }, { "createInitiated": "createInitiated"; "resizeRequested": "resizeRequested"; "cancelInitiated": "cancelInitiated"; "selectDropdownPanelChangedReqested": "selectDropdownPanelChangedReqested"; "componentError": "componentError"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CreateFeatureFlagComponent, "app-create-feature-flag", never, { "customize": { "alias": "customize"; "required": false; "isSignal": true; }; "presetProductAndConfig": { "alias": "presetProductAndConfig"; "required": false; "isSignal": true; }; }, { "createInitiated": "createInitiated"; "resizeRequested": "resizeRequested"; "cancelInitiated": "cancelInitiated"; "selectDropdownPanelChangedReqested": "selectDropdownPanelChangedReqested"; "componentError": "componentError"; }, never, never, true, never>;
 }
 
+interface ICustomizeCreateConfig {
+    hideCancelButton: boolean;
+    createButtonLabel: string;
+    cancelButtonLabel: string;
+    targetSectionHeader: string;
+    targetSectionDescription?: string;
+    configSectionHeader: string;
+    configSectionDescription?: string;
+}
+declare const DEFAULT_CUSTOMIZE_CREATE_CONFIG: ICustomizeCreateConfig;
 interface PresetProduct {
     productId: string;
     productName: string;
 }
 declare class CreateConfigComponent extends BaseComponent implements OnInit {
     private readonly formBuilder;
-    readonly hideCancelButton: _angular_core.InputSignal<boolean>;
-    readonly createButtonLabel: _angular_core.InputSignal<string | undefined>;
-    readonly cancelButtonLabel: _angular_core.InputSignal<string | undefined>;
-    readonly targetSectionHeader: _angular_core.InputSignal<string | undefined>;
-    readonly targetSectionDescription: _angular_core.InputSignal<string | undefined>;
-    readonly configSectionHeader: _angular_core.InputSignal<string | undefined>;
-    readonly configSectionDescription: _angular_core.InputSignal<string | undefined>;
+    readonly customize: _angular_core.InputSignal<ICustomizeCreateConfig>;
     readonly presetProduct: _angular_core.InputSignal<PresetProduct | undefined>;
     readonly createInitiated: _angular_core.OutputEmitterRef<string>;
     readonly resizeRequested: _angular_core.OutputEmitterRef<void>;
@@ -793,7 +919,7 @@ declare class CreateConfigComponent extends BaseComponent implements OnInit {
     selectDropdownPanelChanged(useSelector: boolean): void;
     dropdownComponentFailed(error: Error): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CreateConfigComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CreateConfigComponent, "app-create-config", never, { "hideCancelButton": { "alias": "hideCancelButton"; "required": false; "isSignal": true; }; "createButtonLabel": { "alias": "createButtonLabel"; "required": false; "isSignal": true; }; "cancelButtonLabel": { "alias": "cancelButtonLabel"; "required": false; "isSignal": true; }; "targetSectionHeader": { "alias": "targetSectionHeader"; "required": false; "isSignal": true; }; "targetSectionDescription": { "alias": "targetSectionDescription"; "required": false; "isSignal": true; }; "configSectionHeader": { "alias": "configSectionHeader"; "required": false; "isSignal": true; }; "configSectionDescription": { "alias": "configSectionDescription"; "required": false; "isSignal": true; }; "presetProduct": { "alias": "presetProduct"; "required": false; "isSignal": true; }; }, { "createInitiated": "createInitiated"; "resizeRequested": "resizeRequested"; "cancelInitiated": "cancelInitiated"; "selectDropdownPanelChangedReqested": "selectDropdownPanelChangedReqested"; "componentError": "componentError"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CreateConfigComponent, "app-create-config", never, { "customize": { "alias": "customize"; "required": false; "isSignal": true; }; "presetProduct": { "alias": "presetProduct"; "required": false; "isSignal": true; }; }, { "createInitiated": "createInitiated"; "resizeRequested": "resizeRequested"; "cancelInitiated": "cancelInitiated"; "selectDropdownPanelChangedReqested": "selectDropdownPanelChangedReqested"; "componentError": "componentError"; }, never, never, true, never>;
 }
 
 declare class LoaderComponent implements OnInit {
@@ -804,5 +930,5 @@ declare class LoaderComponent implements OnInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoaderComponent, "app-loader", never, { "skipTimeOut": { "alias": "skipTimeOut"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { AuthorizationComponent, CONFIGCAT_PUBLICAPI_UI_CONFIGURATION, ConfigSelectComponent, CreateConfigComponent, CreateFeatureFlagComponent, DeleteSettingDialogComponent, EnvironmentSelectComponent, FeatureFlagItemComponent, FormHelper, InputDisplayNormalizerDirective, LinkFeatureFlagComponent, LoaderComponent, ProductSelectComponent, PublicApiService, SettingItemComponent, SettingSelectComponent, Theme, ThemeService, UserComparatorText, UserComparatorType, addComparisonValueListValueItems, defaultErrorMessageTypes, featureFlagKeyRegex, formatCsvStringValue, formatValuesAndHintAsCsv, formatValuesAndHintAsJson, formatValuesAsCsv, generateComparisonValueFormGroup, generateComparisonValueListFormGroup, generateComparisonValueListValueArray, generateConditionFormGroup, generateDefaultValue, generateDefaultValueFormGroup, generateEmptyPrerequisiteFlagConditionFormGroup, generateEmptySegmentConditionFormGroup, generatePercentageEvaluationAttributeFormControl, generatePercentageOptionFormGroup, generatePrerequisiteDefaultValue, generatePrerequisiteFlagConditionFormGroup, generateSegmentConditionFormGroup, generateSettingValuesFormGroup, generateTargetingRuleFormGroup, generateTargetingRuleWithEmptyPercentageOptions, generateUserConditionFormGroup, generateValueFormGroup, getComparisonValueSemverListItemValidators, getComparisonValueSemverValidators, getComparisonValueStringListItemValidators, getComparisonValueStringValidators, getComparisonValueType, getEmptyPercentageOptions, getNextIndex, getRawSettiongValue, getRawValue, getValidatorsForSettingType, isClearTextComparator, isPercentageOnlyTargetingRule, parseValuesAndHintsFromCsv, parseValuesAndHintsFromJson, parseValuesFromCsv, percentageRegex, provideConfigCatPublicApiUi, validatePercentageSum, wholeNumberRegex };
-export type { AuthorizationModel, ComparisonValueListParseResult, DeleteSettingDialogData, DeleteSettingDialogResult, DeleteSettingModel, LinkFeatureFlagParameters, PresetProduct, PresetProductAndConfig, SettingValuesModel, UpdateSettingValuesModel };
+export { AuthorizationComponent, CONFIGCAT_PUBLICAPI_UI_CONFIGURATION, ConfigSelectComponent, CreateConfigComponent, CreateFeatureFlagComponent, DEFAULT_CUSTOMIZE_CREATE_CONFIG, DEFAULT_CUSTOMIZE_CREATE_FEATURE_FLAG, DEFAULT_CUSTOMIZE_FEATURE_FLAG, DEFAULT_CUSTOMIZE_LINK_FEATURE_FLAG, DeleteSettingDialogComponent, EnvironmentSelectComponent, FeatureFlagComponent, FeatureFlagItemComponent, FormHelper, InputDisplayNormalizerDirective, LinkFeatureFlagComponent, LoaderComponent, MessagingService, NotificationSnackColor, NotificationSnackComponent, ProductSelectComponent, PublicApiService, SettingItemComponent, SettingSelectComponent, Theme, ThemeService, UserComparatorText, UserComparatorType, addComparisonValueListValueItems, defaultErrorMessageTypes, featureFlagKeyRegex, formatCsvStringValue, formatValuesAndHintAsCsv, formatValuesAndHintAsJson, formatValuesAsCsv, generateComparisonValueFormGroup, generateComparisonValueListFormGroup, generateComparisonValueListValueArray, generateConditionFormGroup, generateDefaultValue, generateDefaultValueFormGroup, generateEmptyPrerequisiteFlagConditionFormGroup, generateEmptySegmentConditionFormGroup, generatePercentageEvaluationAttributeFormControl, generatePercentageOptionFormGroup, generatePrerequisiteDefaultValue, generatePrerequisiteFlagConditionFormGroup, generateSegmentConditionFormGroup, generateSettingValuesFormGroup, generateTargetingRuleFormGroup, generateTargetingRuleWithEmptyPercentageOptions, generateUserConditionFormGroup, generateValueFormGroup, getComparisonValueSemverListItemValidators, getComparisonValueSemverValidators, getComparisonValueStringListItemValidators, getComparisonValueStringValidators, getComparisonValueType, getEmptyPercentageOptions, getNextIndex, getRawSettiongValue, getRawValue, getValidatorsForSettingType, isClearTextComparator, isPercentageOnlyTargetingRule, parseValuesAndHintsFromCsv, parseValuesAndHintsFromJson, parseValuesFromCsv, percentageRegex, provideConfigCatPublicApiUi, validatePercentageSum, wholeNumberRegex };
+export type { AuthorizationModel, ComparisonValueListParseResult, DeleteSettingDialogData, DeleteSettingDialogResult, DeleteSettingModel, ICustomizeCreateConfig, ICustomizeCreateFeatureFlag, ICustomizeFeatureFlag, ICustomizeLinkFeatureFlag, IGlance, LinkFeatureFlagParameters, NotificationSnackData, PresetProduct, PresetProductAndConfig, SettingValuesModel, UpdateSettingValuesModel };