ng-configcat-publicapi-ui 5.0.5 → 5.2.0

package/index.d.ts

@@ -1,12 +1,14 @@
 import * as _angular_core from '@angular/core';
 import { Provider, InjectionToken, OnInit, OnChanges, OnDestroy } from '@angular/core';
 import * as ng_configcat_publicapi from 'ng-configcat-publicapi';
-import { MeService, ProductsService, ConfigsService, EnvironmentsService, FeatureFlagsSettingsService, FeatureFlagSettingValuesV2Service, FeatureFlagSettingValuesService, IntegrationLinksService, SegmentsService, UserComparator, SettingType, SegmentComparator, PrerequisiteComparator, SettingFormulaModel, FeatureFlagLimitations, TargetingRuleModel, PercentageOptionModel, ConditionModel, UserConditionModel, SegmentConditionModel, PrerequisiteFlagConditionModel, ComparisonValueListModel, ComparisonValueModel, ValueModel, UpdateEvaluationFormulaModel, ConfigModel, EnvironmentModel, SettingValueModel, UpdateSettingValueModel, SettingDataModel, SegmentListModel, ProductModel, SettingModel } from 'ng-configcat-publicapi';
+import { MeService, ProductsService, ConfigsService, EnvironmentsService, FeatureFlagsSettingsService, FeatureFlagSettingValuesV2Service, FeatureFlagSettingValuesService, IntegrationLinksService, SegmentsService, OrganizationsService, UserComparator, SettingType, PredefinedVariationModel, SegmentComparator, PrerequisiteComparator, SettingFormulaModel, FeatureFlagLimitations, TargetingRuleModel, PercentageOptionModel, ConditionModel, UserConditionModel, SegmentConditionModel, PrerequisiteFlagConditionModel, ComparisonValueListModel, ComparisonValueModel, ValueModel, UpdateEvaluationFormulaModel, ConfigModel, EnvironmentModel, SettingValueModel, UpdateSettingValueModel, SettingDataModel, SegmentListModel, ProductModel, 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 { MatDialogRef } from '@angular/material/dialog';
+import * as _angular_material_paginator from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
 
 interface IConfigCatPublicApiConfiguration {
     basicAuthUsername?: string;
@@ -42,6 +44,7 @@ declare class PublicApiService {
     createSettingValuesService(basicAuthUsername?: string | null, basicAuthPassword?: string | null, basePath?: string | null): FeatureFlagSettingValuesService;
     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;
     getDashboardBasePath(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PublicApiService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<PublicApiService>;
@@ -131,6 +134,7 @@ interface ValueForm {
     stringValue?: FormControl<string>;
     intValue?: FormControl<number>;
     doubleValue?: FormControl<number>;
+    predefinedVariationId?: FormControl<string>;
 }
 interface UserConditionForm {
     comparisonAttribute: FormControl<string>;
@@ -170,6 +174,7 @@ interface IPrerequisiteSetting {
     key: string;
     name: string;
     settingType: SettingType;
+    predefinedVariations: PredefinedVariationModel[];
 }
 interface IDependeeSetting {
     settingId: number;
@@ -199,10 +204,10 @@ interface IAddRuleButtonTracker {
 declare class FormGenerator {
     generateSettingValuesFormGroup(model: SettingFormulaModel, readOnly: boolean, settings: IPrerequisiteSetting[], featureFlagLimitations: FeatureFlagLimitations): FormGroup<UpdateSettingValueForm>;
     generatePercentageEvaluationAttributeFormControl(percentageEvaluationAttribute: string | null, readOnly: boolean): FormControl<string | null>;
-    generateTargetingRuleFormGroup(model: TargetingRuleModel, settingType: SettingType, readOnly: boolean, settings: IPrerequisiteSetting[], featureFlagLimitations: FeatureFlagLimitations): FormGroup<TargetingRuleForm>;
-    generateTargetingRuleWithEmptyPercentageOptions(settingType: SettingType, readOnly: boolean, settings: IPrerequisiteSetting[], featureFlagLimitations: FeatureFlagLimitations): FormGroup<TargetingRuleForm>;
-    getEmptyPercentageOptions(settingType: SettingType): PercentageOptionModel[];
-    generatePercentageOptionFormGroup(model: PercentageOptionModel, settingType: SettingType, readOnly: boolean, featureFlagLimitations: FeatureFlagLimitations): FormGroup<PercentageOptionForm>;
+    generateTargetingRuleFormGroup(model: TargetingRuleModel, settingType: SettingType, predefinedVariations: PredefinedVariationModel[], readOnly: boolean, settings: IPrerequisiteSetting[], featureFlagLimitations: FeatureFlagLimitations): FormGroup<TargetingRuleForm>;
+    generateTargetingRuleWithEmptyPercentageOptions(settingType: SettingType, predefinedVariations: PredefinedVariationModel[], readOnly: boolean, settings: IPrerequisiteSetting[], featureFlagLimitations: FeatureFlagLimitations): FormGroup<TargetingRuleForm>;
+    getEmptyPercentageOptions(settingType: SettingType, predefinedVariations: PredefinedVariationModel[], featureFlagLimitations: FeatureFlagLimitations): PercentageOptionModel[];
+    generatePercentageOptionFormGroup(model: PercentageOptionModel, settingType: SettingType, predefinedVariations: PredefinedVariationModel[], readOnly: boolean, featureFlagLimitations: FeatureFlagLimitations): FormGroup<PercentageOptionForm>;
     generateConditionFormGroup(model: ConditionModel, readOnly: boolean, settings: IPrerequisiteSetting[], featureFlagLimitations: FeatureFlagLimitations): FormGroup<ConditionForm>;
     generateUserConditionFormGroup(value: UserConditionModel, readOnly: boolean, featureFlagLimitations: FeatureFlagLimitations): FormGroup<UserConditionForm>;
     generateSegmentConditionFormGroup(value: SegmentConditionModel, readOnly: boolean): FormGroup<SegmentConditionForm>;
@@ -217,9 +222,10 @@ declare class FormGenerator {
     getComparisonValueStringListItemValidators(featureFlagLimitations: FeatureFlagLimitations): ValidatorFn[];
     getComparisonValueSemverValidators(featureFlagLimitations: FeatureFlagLimitations): ValidatorFn[];
     getComparisonValueSemverListItemValidators(featureFlagLimitations: FeatureFlagLimitations): ValidatorFn[];
-    generateDefaultValue(settingType: SettingType): ValueModel;
-    generateDefaultValueFormGroup(settingType: SettingType, readOnly: boolean, featureFlagLimitations: FeatureFlagLimitations): FormGroup<ValueForm>;
-    generateValueFormGroup(value: ValueModel, settingType: SettingType, readOnly: boolean, featureFlagLimitations: FeatureFlagLimitations): FormGroup<ValueForm>;
+    generateDefaultValue(settingType: SettingType, predefinedVariations: PredefinedVariationModel[]): ValueModel;
+    generatePrerequisiteDefaultValue(settingType: SettingType, predefinedVariations: PredefinedVariationModel[]): ValueModel;
+    generateDefaultValueFormGroup(settingType: SettingType, predefinedVariations: PredefinedVariationModel[], readOnly: boolean, featureFlagLimitations: FeatureFlagLimitations): FormGroup<ValueForm>;
+    generateValueFormGroup(value: ValueModel, settingType: SettingType, predefinedVariations: PredefinedVariationModel[], readOnly: boolean, featureFlagLimitations: FeatureFlagLimitations): FormGroup<ValueForm>;
     getComparisonValueType(comparator: UserComparator): UserComparatorType;
     getValidatorsForSettingType(settingType: SettingType, featureFlagLimitations: FeatureFlagLimitations): ValidatorFn[];
     isPercentageOnlyTargetingRule(formGroup: FormGroup<TargetingRuleForm>): boolean;
@@ -285,6 +291,11 @@ interface AuthorizationModel {
     fullName: string;
 }
 
+interface LinkFeatureFlagParameters {
+    environmentId: string;
+    settingId: number;
+}
+
 declare class BaseComponent {
     private readonly publicApiService;
     readonly basePath: _angular_core.InputSignal<string | null>;
@@ -297,6 +308,7 @@ declare class BaseComponent {
     protected createSettingValuesService(): ng_configcat_publicapi.FeatureFlagSettingValuesService;
     protected createSettingValuesV2Service(): ng_configcat_publicapi.FeatureFlagSettingValuesV2Service;
     protected createSegmentsService(): ng_configcat_publicapi.SegmentsService;
+    protected createOrganizationService(): ng_configcat_publicapi.OrganizationsService;
     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>;
@@ -317,12 +329,12 @@ declare class SettingItemComponent extends BaseComponent {
     readonly saveFailed: _angular_core.OutputEmitterRef<Error>;
     readonly formValuesChanged: _angular_core.OutputEmitterRef<void>;
     settingValue: SettingValueModel;
-    segments: SegmentListModel[];
     dashboardBasePath: string;
     settingFormulaModel: SettingFormulaModel;
     constructor();
     loadSettingValues: () => Observable<SettingValuesModel>;
     itemLoadSucceeded(): void;
+    itenSaveFailed(error: Error): void;
     loadSegments: () => Observable<SegmentListModel[]>;
     handleSave: (model: UpdateSettingValuesModel) => Observable<SettingValuesModel>;
     onDeleteSettingRequested(setting: DeleteSettingModel): void;
@@ -359,30 +371,70 @@ declare class BaseSelectComponent extends BaseComponent {
 
 declare class ProductSelectComponent extends BaseSelectComponent implements OnInit {
     readonly valueFormControl: _angular_core.InputSignal<FormControl<any>>;
-    products: ProductModel[];
+    readonly preSelectedProductId: _angular_core.InputSignal<string | undefined>;
+    readonly products: _angular_core.WritableSignal<ProductModel[]>;
+    readonly filterText: _angular_core.WritableSignal<string>;
+    readonly filteredProducts: _angular_core.WritableSignal<{
+        hidden: boolean;
+        organization: ng_configcat_publicapi.OrganizationModel;
+        productId: string;
+        name: string;
+        description: string | null;
+        order: number;
+        reasonRequired: boolean;
+    }[]>;
+    readonly hasFilteredProduct: _angular_core.Signal<boolean>;
     ngOnInit(): void;
+    clearFilter(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProductSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProductSelectComponent, "app-product-select", never, { "valueFormControl": { "alias": "valueFormControl"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProductSelectComponent, "app-product-select", never, { "valueFormControl": { "alias": "valueFormControl"; "required": true; "isSignal": true; }; "preSelectedProductId": { "alias": "preSelectedProductId"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class ConfigSelectComponent extends BaseSelectComponent implements OnInit, OnChanges {
-    readonly valueFormControl: _angular_core.InputSignal<FormControl<any>>;
+    readonly valueFormControl: _angular_core.InputSignal<FormControl<string>>;
     readonly productId: _angular_core.InputSignal<string>;
-    configs: ConfigModel[];
+    readonly preSelectedConfigId: _angular_core.InputSignal<string | undefined>;
+    readonly configs: _angular_core.WritableSignal<ConfigModel[]>;
+    readonly filterText: _angular_core.WritableSignal<string>;
+    readonly filteredConfigs: _angular_core.WritableSignal<{
+        hidden: boolean;
+        product: ng_configcat_publicapi.ProductModel;
+        configId: string;
+        name: string;
+        description: string | null;
+        order: number;
+        migratedConfigId: string | null;
+        evaluationVersion: ng_configcat_publicapi.EvaluationVersion;
+    }[]>;
+    readonly hasFilteredConfig: _angular_core.Signal<boolean>;
     ngOnInit(): void;
     ngOnChanges(): void;
     reloadConfigs(): void;
+    clearFilter(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConfigSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfigSelectComponent, "app-config-select", never, { "valueFormControl": { "alias": "valueFormControl"; "required": true; "isSignal": true; }; "productId": { "alias": "productId"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfigSelectComponent, "app-config-select", never, { "valueFormControl": { "alias": "valueFormControl"; "required": true; "isSignal": true; }; "productId": { "alias": "productId"; "required": true; "isSignal": true; }; "preSelectedConfigId": { "alias": "preSelectedConfigId"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class EnvironmentSelectComponent extends BaseSelectComponent implements OnInit, OnChanges {
     readonly valueFormControl: _angular_core.InputSignal<FormControl<any>>;
     readonly productId: _angular_core.InputSignal<string>;
-    environments: EnvironmentModel[];
+    readonly environments: _angular_core.WritableSignal<EnvironmentModel[]>;
+    readonly filterText: _angular_core.WritableSignal<string>;
+    readonly filteredEnvironments: _angular_core.WritableSignal<{
+        hidden: boolean;
+        product: ng_configcat_publicapi.ProductModel;
+        environmentId: string;
+        name: string;
+        color: string | null;
+        description: string | null;
+        order: number;
+        reasonRequired: boolean;
+    }[]>;
+    readonly hasFilteredEnvironment: _angular_core.Signal<boolean>;
     ngOnInit(): void;
     ngOnChanges(): void;
     reloadEnvironments(): void;
+    clearFilter(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EnvironmentSelectComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EnvironmentSelectComponent, "app-environment-select", never, { "valueFormControl": { "alias": "valueFormControl"; "required": true; "isSignal": true; }; "productId": { "alias": "productId"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -390,10 +442,34 @@ declare class EnvironmentSelectComponent extends BaseSelectComponent implements
 declare class SettingSelectComponent extends BaseSelectComponent implements OnInit, OnChanges {
     readonly valueFormControl: _angular_core.InputSignal<FormControl<any>>;
     readonly configId: _angular_core.InputSignal<string>;
-    settings: SettingModel[];
+    SettingTypeEnum: {
+        Boolean: SettingType;
+        String: SettingType;
+        Int: SettingType;
+        Double: SettingType;
+    };
+    readonly settings: _angular_core.WritableSignal<SettingModel[]>;
+    readonly filterText: _angular_core.WritableSignal<string>;
+    readonly filteredSettings: _angular_core.WritableSignal<{
+        hidden: boolean;
+        settingId: number;
+        key: string;
+        name: string;
+        hint: string | null;
+        order: number;
+        settingType: SettingType;
+        configId: string;
+        configName: string;
+        createdAt: string | null;
+        tags: Array<ng_configcat_publicapi.TagModel>;
+        predefinedVariations: Array<ng_configcat_publicapi.PredefinedVariationModel>;
+    }[]>;
+    readonly hasFilteredSetting: _angular_core.Signal<boolean>;
     ngOnInit(): void;
     ngOnChanges(): void;
+    selectedSettingTiggetText(): string;
     reloadSettings(): void;
+    clearFilter(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SettingSelectComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SettingSelectComponent, "app-setting-select", never, { "valueFormControl": { "alias": "valueFormControl"; "required": true; "isSignal": true; }; "configId": { "alias": "configId"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -470,9 +546,225 @@ declare class FeatureFlagItemComponent extends BaseComponent implements OnInit,
     recalcAddButtons(): void;
     hasOnlyPercentageRule(group: FormGroup<UpdateSettingValueForm>): boolean;
     expandedChanged(expandedState: boolean): void;
+    private openDiscardDialog;
+    canDeactivate(): boolean;
+    viewVariations(event: {
+        settingId: number;
+    }): void;
+    openConcurentDeleteDialog(): void;
+    openVariationsDialog(event: {
+        settingId: number;
+    }): 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"; "saveFailed": "saveFailed"; "expandedStateChanged": "expandedStateChanged"; "formValuesChanged": "formValuesChanged"; }, never, never, true, never>;
 }
 
-export { AuthorizationComponent, CONFIGCAT_PUBLICAPI_UI_CONFIGURATION, ConfigSelectComponent, DeleteSettingDialogComponent, EnvironmentSelectComponent, FeatureFlagItemComponent, FormGenerator, FormHelper, InputDisplayNormalizerDirective, ProductSelectComponent, PublicApiService, SettingItemComponent, SettingSelectComponent, Theme, ThemeService, UserComparatorText, UserComparatorType, defaultErrorMessageTypes, featureFlagKeyRegex, getRawSettiongValue, getRawValue, isClearTextComparator, percentageRegex, provideConfigCatPublicApiUi, validatePercentageSum, wholeNumberRegex };
-export type { AuthorizationModel, DeleteSettingDialogData, DeleteSettingDialogResult, DeleteSettingModel, SettingValuesModel, UpdateSettingValuesModel };
+interface AuthorizationParameters {
+    basicAuthUsername: string;
+    basicAuthPassword: string;
+}
+
+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 linkInitiated: _angular_core.OutputEmitterRef<LinkFeatureFlagParameters>;
+    readonly resizeRequested: _angular_core.OutputEmitterRef<void>;
+    readonly cancelInitiated: _angular_core.OutputEmitterRef<void>;
+    readonly selectDropdownPanelChangedReqested: _angular_core.OutputEmitterRef<boolean>;
+    private readonly formBuilder;
+    formGroup: _angular_forms.FormGroup<{
+        productId: FormControl<string>;
+        environmentId: FormControl<string>;
+        configId: FormControl<string>;
+        settingId: FormControl<number>;
+    }>;
+    subscription: Subscription | null;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    add(): void;
+    cancel(): void;
+    selectDropdownPanelChanged(useSelector: boolean): 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"; }, never, never, true, never>;
+}
+
+type FeatureFlagValueType = boolean | string | number;
+interface PredefinedVariationValueFormGroup {
+    boolValue?: FormControl<boolean>;
+    stringValue?: FormControl<string>;
+    intValue?: FormControl<number>;
+    doubleValue?: FormControl<number>;
+}
+interface PredefinedVariationFormGroup {
+    name: FormControl<string | null>;
+    hint: FormControl<string | null>;
+    value: FormGroup<PredefinedVariationValueFormGroup>;
+    valueForComparison: FormControl<string | null>;
+}
+interface InitialValueFormGroup {
+    environmentName: FormControl<string>;
+    environmentId: FormControl<string>;
+    settingValue: FormControl<FeatureFlagValueType>;
+    predefinedVariationIndex: FormControl<number>;
+}
+interface CreateSettingFormGroup {
+    name: FormControl<string>;
+    key: FormControl<string>;
+    hint: FormControl<string>;
+    settingType: FormControl<SettingType>;
+    useVariations: FormControl<boolean>;
+    predefinedVariations: FormArray<FormGroup<PredefinedVariationFormGroup>>;
+    initialValuesPerEnvironment: FormControl<boolean>;
+    initialValueForAll: FormControl<FeatureFlagValueType>;
+    initialValueForAllVariationIndex: FormControl<number>;
+    initialValues: FormArray<FormGroup<InitialValueFormGroup>>;
+}
+interface IntegrationCreateSettingFormGroup extends CreateSettingFormGroup {
+    productId: FormControl<string>;
+    environmentId: FormControl<string>;
+    configId: FormControl<string>;
+}
+interface CreateConfigFormGroup {
+    productId: FormControl<string>;
+    name: FormControl<string>;
+    description: FormControl<string>;
+    evaluationVersion: FormControl<EvaluationVersion>;
+}
+
+interface PresetProductAndConfig {
+    productId: string;
+    configId: string;
+    productName: string;
+    configName: string;
+}
+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 presetProductAndConfig: _angular_core.InputSignal<PresetProductAndConfig | undefined>;
+    readonly createInitiated: _angular_core.OutputEmitterRef<LinkFeatureFlagParameters>;
+    readonly resizeRequested: _angular_core.OutputEmitterRef<void>;
+    readonly cancelInitiated: _angular_core.OutputEmitterRef<void>;
+    readonly selectDropdownPanelChangedReqested: _angular_core.OutputEmitterRef<boolean>;
+    SettingTypeEnum: {
+        Boolean: SettingType;
+        String: SettingType;
+        Int: SettingType;
+        Double: SettingType;
+    };
+    FormHelper: typeof FormHelper;
+    EvaluationVersion: {
+        V1: EvaluationVersion;
+        V2: EvaluationVersion;
+    };
+    loading: boolean;
+    dataSource: MatTableDataSource<FormGroup<PredefinedVariationFormGroup>, _angular_material_paginator.MatPaginator>;
+    formGroup: FormGroup<IntegrationCreateSettingFormGroup>;
+    configEvaluationVersion: EvaluationVersion;
+    maxPredefinedVariations: number;
+    maxStringFlagValueLength: number;
+    selectedProductOrganiaztionId: string;
+    selectedProductEnviroment: EnvironmentModel[];
+    focusIndex: number;
+    settingTypeText: string;
+    displayedColumns: string[];
+    stringValidators: _angular_forms.ValidatorFn[];
+    intValidators: _angular_forms.ValidatorFn[];
+    doubleValidators: _angular_forms.ValidatorFn[];
+    ngOnInit(): void;
+    initialValueForAllFormControlFunction(settingType: SettingType): FormControl<string> | FormControl<number> | FormControl<boolean>;
+    settingTypeChanges(newSettingType: SettingType): void;
+    setDataSource(): void;
+    create(): void;
+    cancel(): void;
+    selectDropdownPanelChanged(useSelector: boolean): void;
+    createEmptyVariationFormGroup(settingType: SettingType, boolValue?: boolean, stringValue?: string, intValue?: number, doubleValue?: number): FormGroup<{
+        name: FormControl<string | null>;
+        hint: FormControl<string | null>;
+        value: FormGroup<PredefinedVariationValueFormGroup>;
+        valueForComparison: FormControl<string | null>;
+    }>;
+    createEmptyVariationValueFormGroup(settingType: SettingType, boolValue?: boolean, stringValue?: string, intValue?: number, doubleValue?: number): FormGroup<{
+        boolValue?: FormControl<boolean> | undefined;
+        stringValue?: FormControl<string> | undefined;
+        intValue?: FormControl<number> | undefined;
+        doubleValue?: FormControl<number> | undefined;
+    }>;
+    addVariation(): void;
+    removeVariation(index: number): void;
+    fixupVariationIndex(removedIndex: number, formControl: FormControl<number>): void;
+    expandText(stringValueControl: FormControl<string>): void;
+    expandHint(stringValueControl: FormControl<string | null>): void;
+    getColorIndex(row: FormGroup<PredefinedVariationFormGroup>, index: number): FeatureFlagValueType;
+    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"; }, never, never, true, never>;
+}
+
+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 presetProduct: _angular_core.InputSignal<PresetProduct | undefined>;
+    readonly createInitiated: _angular_core.OutputEmitterRef<string>;
+    readonly resizeRequested: _angular_core.OutputEmitterRef<void>;
+    readonly cancelInitiated: _angular_core.OutputEmitterRef<void>;
+    readonly selectDropdownPanelChangedReqested: _angular_core.OutputEmitterRef<boolean>;
+    SettingTypeEnum: {
+        Boolean: SettingType;
+        String: SettingType;
+        Int: SettingType;
+        Double: SettingType;
+    };
+    FormHelper: typeof FormHelper;
+    EvaluationVersion: {
+        V1: EvaluationVersion;
+        V2: EvaluationVersion;
+    };
+    loading: boolean;
+    formGroup: FormGroup<CreateConfigFormGroup>;
+    maxPredefinedVariations: number;
+    maxStringFlagValueLength: number;
+    selectedProductOrganiaztionId: string;
+    selectedProductEnviroment: EnvironmentModel[];
+    focusIndex: number;
+    settingTypeText: string;
+    displayedColumns: string[];
+    ngOnInit(): void;
+    create(): void;
+    cancel(): void;
+    selectDropdownPanelChanged(useSelector: boolean): 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"; }, never, never, true, never>;
+}
+
+declare class LoaderComponent implements OnInit {
+    showLoader: boolean;
+    readonly skipTimeOut: _angular_core.InputSignal<boolean>;
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoaderComponent, never>;
+    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, FormGenerator, FormHelper, InputDisplayNormalizerDirective, LinkFeatureFlagComponent, LoaderComponent, ProductSelectComponent, PublicApiService, SettingItemComponent, SettingSelectComponent, Theme, ThemeService, UserComparatorText, UserComparatorType, defaultErrorMessageTypes, featureFlagKeyRegex, getRawSettiongValue, getRawValue, isClearTextComparator, percentageRegex, provideConfigCatPublicApiUi, validatePercentageSum, wholeNumberRegex };
+export type { AuthorizationModel, DeleteSettingDialogData, DeleteSettingDialogResult, DeleteSettingModel, LinkFeatureFlagParameters, PresetProduct, PresetProductAndConfig, SettingValuesModel, UpdateSettingValuesModel };

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "ng-configcat-publicapi-ui",
-  "version": "5.0.5",
+  "version": "5.2.0",
   "peerDependencies": {
-    "@angular/cdk": "^20.2.7",
-    "@angular/common": "^20.3.3",
-    "@angular/core": "^20.3.3",
-    "@angular/forms": "^20.3.3",
-    "@angular/material": "^20.2.7",
-    "@angular/router": "^20.3.3",
-    "ng-configcat-publicapi": "^5.0.4",
+    "@angular/cdk": "^20.2.14",
+    "@angular/common": "^20.3.15",
+    "@angular/core": "^20.3.15",
+    "@angular/forms": "^20.3.15",
+    "@angular/material": "^20.2.14",
+    "@angular/router": "^20.3.15",
+    "@configcat/sdk": "^1.0.2",
+    "ng-configcat-publicapi": "^5.2.2",
     "papaparse": "^5.5.3",
     "ace-builds": "^1.37.0"
   },

package/src/assets/images/cat_red.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 244.77 210.07"><defs><style>.cls-1{fill:#ed1c24;}.cls-2{fill:#fff;}.cls-3{fill:#000000;}</style></defs><title>cat</title><path class="cls-1" d="M201.57,100V40l-60,60H91.72l-40-40V190a60,60,0,0,0,60,60h90V100Z" transform="translate(-35.62 -40)"/><rect class="cls-2" x="34.22" y="80.48" width="113.76" height="51.71" rx="25.85" ry="25.85"/><circle class="cls-3" cx="119.95" cy="106.33" r="20"/><path class="cls-1" d="M97.52,130.63a16,16,0,1,1-16,16,16,16,0,0,1,16-16m0-4a20,20,0,1,0,20,20,20,20,0,0,0-20-20Z" transform="translate(-35.62 -40)"/><path class="cls-2" d="M135.68,187.4a2,2,0,0,0-2.83,0l-6.13,6.13-6.13-6.13a2,2,0,0,0-2.83,2.83l7,7v13.6a2,2,0,0,0,4,0v-13.6l7-7A2,2,0,0,0,135.68,187.4Z" transform="translate(-35.62 -40)"/><path class="cls-2" d="M44.76,195.06H85.29a1.5,1.5,0,1,0,0-3H44.76a1.5,1.5,0,1,0,0,3Z" transform="translate(-35.62 -40)"/><path class="cls-2" d="M92.94,199.3H37.12a1.5,1.5,0,0,0,0,3H92.94a1.5,1.5,0,0,0,0-3Z" transform="translate(-35.62 -40)"/><path class="cls-2" d="M85.29,206.54H44.76a1.5,1.5,0,1,0,0,3H85.29a1.5,1.5,0,0,0,0-3Z" transform="translate(-35.62 -40)"/><path class="cls-2" d="M168.5,193.57H209a1.5,1.5,0,1,0,0-3H168.5a1.5,1.5,0,0,0,0,3Z" transform="translate(-35.62 -40)"/><path class="cls-2" d="M216.67,197.8H160.85a1.5,1.5,0,1,0,0,3h55.82a1.5,1.5,0,1,0,0-3Z" transform="translate(-35.62 -40)"/><path class="cls-2" d="M209,205H168.5a1.5,1.5,0,0,0,0,3H209a1.5,1.5,0,0,0,0-3Z" transform="translate(-35.62 -40)"/><path class="cls-1" d="M275.34,139.62l0,0a20.17,20.17,0,1,0-37.5,14.83,65.67,65.67,0,0,1-79.17,85.36A82.1,82.1,0,0,0,275.34,139.62Z" transform="translate(-35.62 -40)"/></svg>

package/src/assets/images/setting-types/decimal.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="#EF333A"/>
+<path d="M16.1914 23.19L18.4034 20.67V19.2H11.5434V21.02H15.7154L13.6994 23.302V24.8H14.7354C16.0234 24.8 16.5694 25.262 16.5694 26.004C16.5694 26.802 15.8694 27.264 14.7354 27.264C13.7134 27.264 12.6774 26.942 11.9354 26.382L11.0534 28.118C12.0054 28.79 13.4194 29.168 14.7914 29.168C17.5774 29.168 18.8514 27.656 18.8514 26.004C18.8514 24.562 17.9554 23.47 16.1914 23.19ZM21.1865 29.112C21.9425 29.112 22.5445 28.538 22.5445 27.74C22.5445 26.928 21.9425 26.396 21.1865 26.396C20.4305 26.396 19.8285 26.928 19.8285 27.74C19.8285 28.538 20.4305 29.112 21.1865 29.112ZM22.8959 19.2V21.02H24.8559V29H27.1239V19.2H22.8959ZM37.8003 25.094H36.2043V23.26H34.0623V25.094H31.4303L35.7143 19.2H33.3343L28.7143 25.416V26.942H33.9923V29H36.2043V26.942H37.8003V25.094Z" fill="white"/>
+</svg>

package/src/assets/images/setting-types/feature_flag.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="#EC8030"/>
+<rect x="10" y="18" width="28" height="12" rx="6" stroke="white" stroke-width="2"/>
+<circle cx="30" cy="24" r="9" fill="white"/>
+</svg>

package/src/assets/images/setting-types/text.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="#27AE60"/>
+<path d="M15.2569 20.356C14.0529 20.356 12.8349 20.678 12.0089 21.266L12.7929 22.792C13.3389 22.358 14.1649 22.092 14.9629 22.092C16.1389 22.092 16.6989 22.638 16.6989 23.576H14.9629C12.6669 23.576 11.7289 24.5 11.7289 25.83C11.7289 27.132 12.7789 28.112 14.5429 28.112C15.6489 28.112 16.4329 27.748 16.8389 27.062V28H18.8829V23.702C18.8829 21.42 17.5529 20.356 15.2569 20.356ZM15.0889 26.642C14.3189 26.642 13.8569 26.278 13.8569 25.732C13.8569 25.228 14.1789 24.85 15.2009 24.85H16.6989V25.62C16.4469 26.306 15.8169 26.642 15.0889 26.642ZM25.3116 20.356C24.3736 20.356 23.6036 20.65 23.0436 21.266V17.612H20.8596V28H22.9456V27.132C23.4916 27.79 24.3036 28.112 25.3116 28.112C27.4256 28.112 29.0636 26.6 29.0636 24.234C29.0636 21.868 27.4256 20.356 25.3116 20.356ZM24.9336 26.32C23.8416 26.32 23.0156 25.536 23.0156 24.234C23.0156 22.932 23.8416 22.148 24.9336 22.148C26.0256 22.148 26.8516 22.932 26.8516 24.234C26.8516 25.536 26.0256 26.32 24.9336 26.32ZM34.1656 28.112C35.7476 28.112 36.9936 27.412 37.5396 26.208L35.8456 25.284C35.4396 26.012 34.8376 26.32 34.1516 26.32C33.0456 26.32 32.1776 25.55 32.1776 24.234C32.1776 22.918 33.0456 22.148 34.1516 22.148C34.8376 22.148 35.4396 22.47 35.8456 23.184L37.5396 22.274C36.9936 21.042 35.7476 20.356 34.1656 20.356C31.7156 20.356 29.9656 21.966 29.9656 24.234C29.9656 26.502 31.7156 28.112 34.1656 28.112Z" fill="white"/>
+</svg>

package/src/assets/images/setting-types/whole.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="#F2C94C"/>
+<path d="M25.0786 25.094H23.4826V23.26H21.3406V25.094H18.7086L22.9926 19.2H20.6126L15.9926 25.416V26.942H21.2706V29H23.4826V26.942H25.0786V25.094ZM28.8376 27.152L31.0916 25.024C32.4636 23.75 32.7296 22.882 32.7296 21.93C32.7296 20.152 31.2736 19.032 29.0896 19.032C27.3256 19.032 25.9536 19.746 25.1976 20.852L26.8496 21.916C27.3256 21.258 28.0396 20.936 28.8796 20.936C29.9156 20.936 30.4476 21.384 30.4476 22.154C30.4476 22.63 30.2936 23.134 29.4256 23.96L25.6456 27.53V29H33.0516V27.152H28.8376Z" fill="#333333"/>
+</svg>

package/src/css/controls.scss

@@ -151,6 +151,21 @@ html > body {
     }
   }
 
+  .mat-form-field-disabled {
+    .mdc-notched-outline > * {
+      border-color: var(--input-disabled-border-color) !important;
+    }
+
+    .mat-mdc-text-field-wrapper {
+      --mat-form-field-outlined-disabled-input-text-color: var(--input-disabled-color);
+      background-color: var(--input-disabled-background-color);
+    }
+
+    .mat-mdc-select-disabled {
+      --mat-select-disabled-trigger-text-color: var(--input-disabled-color);
+    }
+  }
+
   .mat-mdc-paginator {
     .mat-mdc-form-field {
       .mat-mdc-text-field-wrapper {
@@ -375,6 +390,26 @@ html > body {
     }
   }
 
+  .menu-filter {
+    display: flex;
+    margin: 0 8px 8px 8px;
+    justify-content: space-around;
+    min-width: 230px;
+
+    mat-form-field {
+      width: 100%;
+    }
+  }
+
+  .clear-filter {
+    @include input-suffix-button();
+    margin-right: 5px;
+
+    &.marginless {
+      margin-right: unset;
+    }
+  }
+
   &[data-theme="dark"] .mat-mdc-autocomplete-panel,
   &[data-theme="dark"] .mat-mdc-dialog-surface,
   &[data-theme="dark"] .mat-mdc-select-panel,

package/src/css/icon.scss

@@ -4,4 +4,8 @@ html > body {
   .mat-icon.icon-transform-rotate {
     transform: rotate(0.03deg);
   }
+
+  .mat-icon.icon-transform-rotate-90 {
+    transform: rotate(90deg);
+  }
 }

package/src/css/tooltip.scss

@@ -8,5 +8,18 @@ html > body {
 
   .multiline-tooltip {
     white-space: pre-line;
+
+    &.left-aligned {
+      .mdc-tooltip__surface {
+        text-align: left;
+      }
+    }
+  }
+
+  .wide-tooltip {
+    // See also: https://stackoverflow.com/a/78637566
+    .mdc-tooltip__surface {
+      max-width: min(800px, 90vw) !important;
+    }
   }
 }

package/src/css/variables.scss

@@ -73,7 +73,10 @@
   --input-background: #{theme.$input-background};
   --input-border-color: #dbdbdb;
   --input-transparent-background: #{color.adjust(theme.$input-background, $alpha: -0.2)};
-  --input-placeholder-opacity: 0.87;
+  --input-placeholder-opacity: 0.9;
+  --input-disabled-background-color: #ebebeb;
+  --input-disabled-border-color: #d1d1d1;
+  --input-disabled-color: #0000009c;
 
   // ==== NAV ====
   --nav-background-color: var(--panel-background-color);
@@ -199,6 +202,9 @@
     --input-border-color: #474e57;
     --input-transparent-background: #{color.adjust(theme.$input-background-dark, $alpha: -0.2)};
     --input-placeholder-opacity: 0.6;
+    --input-disabled-background-color: #2f3135;
+    --input-disabled-border-color: #4d4d4e;
+    --input-disabled-color: #bdbdbd;
 
     // ==== NAV ====
     --nav-background-color: var(--panel-background-color);

package/src/css/variation.scss

@@ -0,0 +1,30 @@
+@use "sass:list";
+
+$colors: #71c95b, #ff5252, #a482e7, #48b6b6, #a19180, #23afdd, #e08ba9, #97b0df, #e0ae17, #e46bb2;
+$colorsDark: #5ca12e, #e04f4f, #866fcf, #399, #837361, #008fb3, #c77a8b, #7d8ebb, #bd8e02, #bd509c;
+
+html > body {
+  .variation-indicator {
+    display: flex;
+    min-width: 8px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+
+  @each $color in $colors {
+    $index: list.index($colors, $color);
+    .variation-color-#{$index} {
+      background-color: $color;
+    }
+  }
+
+  &[data-theme="dark"] {
+    @each $color in $colorsDark {
+      $index: list.index($colorsDark, $color);
+      .variation-color-#{$index} {
+        background-color: $color;
+      }
+    }
+  }
+}