ng-configcat-publicapi-ui 5.3.4 → 5.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { OVERLAY_DEFAULT_CONFIG, Overlay } from '@angular/cdk/overlay';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, Injectable, Component, viewChild, DestroyRef, DOCUMENT, InjectionToken, HostListener, Directive, input, ElementRef, model, effect, output, forwardRef, ChangeDetectionStrategy, signal, linkedSignal, computed, ChangeDetectorRef } from '@angular/core';
|
|
3
|
+
import { inject, Injectable, Component, viewChild, DestroyRef, DOCUMENT, InjectionToken, HostListener, Directive, input, ElementRef, model, effect, output, forwardRef, ChangeDetectionStrategy, signal, linkedSignal, computed, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
|
|
4
4
|
import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
|
|
5
5
|
import { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
|
|
6
6
|
import { MAT_DATEPICKER_SCROLL_STRATEGY, MatDatepicker, MatDatepickerToggle, MatDatepickerInput } from '@angular/material/datepicker';
|
|
@@ -3281,7 +3281,7 @@ class SettingSelectComponent extends BaseSelectComponent {
|
|
|
3281
3281
|
this.filterText.set("");
|
|
3282
3282
|
}
|
|
3283
3283
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SettingSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3284
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SettingSelectComponent, isStandalone: true, selector: "app-setting-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (settings()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Feature flag or setting</mat-label>\n <mat-select\n placeholder=\"Feature flag or setting\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <mat-select-trigger>\n @if (valueFormControl().value) {\n {{ this.selectedSettingTiggetText() }}\n }\n </mat-select-trigger>\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter settings\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n @for (setting of filteredSettings(); track setting.settingId) {\n <mat-option [value]=\"setting.settingId\" [ngClass]=\"{ hidden: setting.hidden }\">\n <div class=\"feature-flag-selector-item\">\n @switch (setting.settingType) {\n @case (SettingTypeEnum.Boolean) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"
|
|
3284
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SettingSelectComponent, isStandalone: true, selector: "app-setting-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, configId: { classPropertyName: "configId", publicName: "configId", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (settings()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Feature flag or setting</mat-label>\n <mat-select\n placeholder=\"Feature flag or setting\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <mat-select-trigger>\n @if (valueFormControl().value) {\n {{ this.selectedSettingTiggetText() }}\n }\n </mat-select-trigger>\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter settings\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n @for (setting of filteredSettings(); track setting.settingId) {\n <mat-option [value]=\"setting.settingId\" [ngClass]=\"{ hidden: setting.hidden }\">\n <div class=\"feature-flag-selector-item\">\n @switch (setting.settingType) {\n @case (SettingTypeEnum.Boolean) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/feature_flag.svg\"\n alt=\"feature flag\" />\n }\n @case (SettingTypeEnum.String) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/text.svg\"\n alt=\"text setting\" />\n }\n @case (SettingTypeEnum.Int) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/whole.svg\"\n alt=\"whole number setting\" />\n }\n @case (SettingTypeEnum.Double) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/decimal.svg\"\n alt=\"decimal number setting\" />\n }\n }\n <div class=\"item-text-wrapper\">\n <span [matTooltip]=\"setting.name\">{{ setting.name }}</span>\n <code class=\"highlight copyable-like small\" [matTooltip]=\"setting.key\">\n {{ setting.key }}\n </code>\n </div>\n </div>\n </mat-option>\n } @empty {\n <mat-option disabled>No setting available.</mat-option>\n }\n @if (!hasFilteredSetting()) {\n <mat-option disabled>No setting found.</mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}\n"], dependencies: [{ 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: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }] }); }
|
|
3285
3285
|
}
|
|
3286
3286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SettingSelectComponent, decorators: [{
|
|
3287
3287
|
type: Component,
|
|
@@ -3301,7 +3301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
3301
3301
|
MatSuffix,
|
|
3302
3302
|
MatIconButton,
|
|
3303
3303
|
MatSelectTrigger,
|
|
3304
|
-
], template: "@if (settings()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Feature flag or setting</mat-label>\n <mat-select\n placeholder=\"Feature flag or setting\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <mat-select-trigger>\n @if (valueFormControl().value) {\n {{ this.selectedSettingTiggetText() }}\n }\n </mat-select-trigger>\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter settings\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n @for (setting of filteredSettings(); track setting.settingId) {\n <mat-option [value]=\"setting.settingId\" [ngClass]=\"{ hidden: setting.hidden }\">\n <div class=\"feature-flag-selector-item\">\n @switch (setting.settingType) {\n @case (SettingTypeEnum.Boolean) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"
|
|
3304
|
+
], template: "@if (settings()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Feature flag or setting</mat-label>\n <mat-select\n placeholder=\"Feature flag or setting\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"openChanged($event)\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <mat-select-trigger>\n @if (valueFormControl().value) {\n {{ this.selectedSettingTiggetText() }}\n }\n </mat-select-trigger>\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter settings\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n @for (setting of filteredSettings(); track setting.settingId) {\n <mat-option [value]=\"setting.settingId\" [ngClass]=\"{ hidden: setting.hidden }\">\n <div class=\"feature-flag-selector-item\">\n @switch (setting.settingType) {\n @case (SettingTypeEnum.Boolean) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/feature_flag.svg\"\n alt=\"feature flag\" />\n }\n @case (SettingTypeEnum.String) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/text.svg\"\n alt=\"text setting\" />\n }\n @case (SettingTypeEnum.Int) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/whole.svg\"\n alt=\"whole number setting\" />\n }\n @case (SettingTypeEnum.Double) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/decimal.svg\"\n alt=\"decimal number setting\" />\n }\n }\n <div class=\"item-text-wrapper\">\n <span [matTooltip]=\"setting.name\">{{ setting.name }}</span>\n <code class=\"highlight copyable-like small\" [matTooltip]=\"setting.key\">\n {{ setting.key }}\n </code>\n </div>\n </div>\n </mat-option>\n } @empty {\n <mat-option disabled>No setting available.</mat-option>\n }\n @if (!hasFilteredSetting()) {\n <mat-option disabled>No setting found.</mat-option>\n }\n </mat-select>\n </mat-form-field>\n}\n", styles: [".form-field{width:100%}.filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}\n"] }]
|
|
3305
3305
|
}], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }] } });
|
|
3306
3306
|
|
|
3307
3307
|
class DeleteSettingDialogComponent {
|
|
@@ -3859,7 +3859,7 @@ class VariationsDialogComponent {
|
|
|
3859
3859
|
return getPredefinedVariationColorIndex(this.settingType, getRawPredefinedVariationValue(row.controls.value), index);
|
|
3860
3860
|
}
|
|
3861
3861
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VariationsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3862
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: VariationsDialogComponent, isStandalone: true, selector: "app-variations-dialog", ngImport: i0, template: "@if (setting.isLoading()) {\n <div mat-dialog-content class=\"content\">\n <app-loader />\n </div>\n} @else {\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n <div class=\"content\">\n <div class=\"dialog-description\" mat-dialog-content>\n @if (data.manage) {\n <p>\n Add, delete, and update predefined variations.\n <br />\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n <br />\n You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n variation is used.\n </p>\n } @else {\n <p>\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n </p>\n }\n </div>\n\n <div class=\"dialog-table\" mat-dialog-content>\n <table\n mat-table\n cdkDropList\n [dataSource]=\"dataSource\"\n [cdkDropListData]=\"dataSource\"\n [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n (cdkDropListDropped)=\"dropTable($event)\">\n <ng-container matColumnDef=\"reorder\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"drag-handle\">\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (settingType) {\n @case (SettingType.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n <input matInput [formControl]=\"row.controls.hint\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"variationId\">\n <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n </td>\n </ng-container>\n <ng-container matColumnDef=\"usages\">\n <th *matHeaderCellDef mat-header-cell>Usages</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"usages\">\n <button\n type=\"button\"\n class=\"usage-button\"\n mat-icon-button\n [disabled]=\"!row.controls.usages.controls.length && !row.controls.usagesInOtherEnvironments.value\"\n (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n @if (row.controls.usagesExpanded.value) {\n <mat-icon>expand_less</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n <div>\n @if (row.controls.usagesExpanded.value) {\n @for (usage of row.controls.usages.controls; track $index) {\n <div class=\"usage\">\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n {{ usage.controls.displayValue.value }}\n </a>\n </div>\n }\n @if (row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n }}\n in environments you don't have access to.\n } @else if (row.controls.usages.controls.length === 0) {\n <div>no usages</div>\n }\n } @else {\n <div>\n @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n usage{{\n row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n ? \"s\"\n : \"\"\n }}\n } @else {\n <div>no usages</div>\n }\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n class=\"delete\"\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Cannot remove a variation that is already in use.'\n : 'At least 2 predefined variations should be set.'\n \"\n [matTooltipDisabled]=\"\n row.controls.usages.controls.length === 0 &&\n formGroup.controls.predefinedVariations.controls.length > 2\n \">\n <button\n mat-icon-button\n type=\"button\"\n matTooltip=\"Remove variation\"\n [disabled]=\"\n formGroup.controls.predefinedVariations.controls.length <= 2 ||\n row.controls.usages.controls.length > 0\n \"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n </table>\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n </div>\n @if (data.manage && settingType !== SettingType.Boolean) {\n <div class=\"add-variation\" mat-dialog-content>\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n </div>\n }\n </div>\n\n <div mat-dialog-actions>\n @if (data.manage) {\n <button\n type=\"submit\"\n mat-flat-button\n color=\"primary\"\n [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n Save\n </button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n } @else {\n <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n }\n </div>\n </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (settingType) {\n @case (SettingType.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingType.Int) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingType.Double) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingType.Boolean) {\n <div\n class=\"toggle\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .dialog-table{padding-top:0;padding-bottom:0}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: 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: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }] }); }
|
|
3862
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: VariationsDialogComponent, isStandalone: true, selector: "app-variations-dialog", ngImport: i0, template: "@if (setting.isLoading()) {\n <div mat-dialog-content class=\"content\">\n <app-loader />\n </div>\n} @else {\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n <div class=\"content\">\n <div class=\"dialog-description\" mat-dialog-content>\n @if (data.manage) {\n <p>\n Add, delete, and update predefined variations of the\n <strong>{{ data.settingName }}</strong>\n setting.\n <br />\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n <br />\n You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n variation is used.\n </p>\n } @else {\n <p>\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n </p>\n }\n </div>\n\n <div class=\"dialog-table\" mat-dialog-content>\n <table\n mat-table\n cdkDropList\n [dataSource]=\"dataSource\"\n [cdkDropListData]=\"dataSource\"\n [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n (cdkDropListDropped)=\"dropTable($event)\">\n <ng-container matColumnDef=\"reorder\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"drag-handle\">\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (settingType) {\n @case (SettingType.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n <input matInput [formControl]=\"row.controls.hint\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"variationId\">\n <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n </td>\n </ng-container>\n <ng-container matColumnDef=\"usages\">\n <th *matHeaderCellDef mat-header-cell>Usages</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"usages\">\n <button\n type=\"button\"\n class=\"usage-button\"\n mat-icon-button\n [disabled]=\"!row.controls.usages.controls.length && !row.controls.usagesInOtherEnvironments.value\"\n (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n @if (row.controls.usagesExpanded.value) {\n <mat-icon>expand_less</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n <div>\n @if (row.controls.usagesExpanded.value) {\n @for (usage of row.controls.usages.controls; track $index) {\n <div class=\"usage\">\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n {{ usage.controls.displayValue.value }}\n </a>\n </div>\n }\n @if (row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n }}\n in environments you don't have access to.\n } @else if (row.controls.usages.controls.length === 0) {\n <div>no usages</div>\n }\n } @else {\n <div>\n @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n usage{{\n row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n ? \"s\"\n : \"\"\n }}\n } @else {\n <div>no usages</div>\n }\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n class=\"delete\"\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Cannot remove a variation that is already in use.'\n : 'At least 2 predefined variations should be set.'\n \"\n [matTooltipDisabled]=\"\n row.controls.usages.controls.length === 0 &&\n formGroup.controls.predefinedVariations.controls.length > 2\n \">\n <button\n mat-icon-button\n type=\"button\"\n matTooltip=\"Remove variation\"\n [disabled]=\"\n formGroup.controls.predefinedVariations.controls.length <= 2 ||\n row.controls.usages.controls.length > 0\n \"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n </table>\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n </div>\n @if (data.manage && settingType !== SettingType.Boolean) {\n <div class=\"add-variation\" mat-dialog-content>\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n </div>\n }\n </div>\n\n <div mat-dialog-actions>\n @if (data.manage) {\n <button\n type=\"submit\"\n mat-flat-button\n color=\"primary\"\n [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n Save\n </button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n } @else {\n <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n }\n </div>\n </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (settingType) {\n @case (SettingType.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingType.Int) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingType.Double) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingType.Boolean) {\n <div\n class=\"toggle\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .dialog-table{padding-top:0;padding-bottom:0}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: 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: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }, { kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }] }); }
|
|
3863
3863
|
}
|
|
3864
3864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VariationsDialogComponent, decorators: [{
|
|
3865
3865
|
type: Component,
|
|
@@ -3898,7 +3898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
3898
3898
|
CdkDragHandle,
|
|
3899
3899
|
CopyableValueComponent,
|
|
3900
3900
|
AutofocusDirective
|
|
3901
|
-
], template: "@if (setting.isLoading()) {\n <div mat-dialog-content class=\"content\">\n <app-loader />\n </div>\n} @else {\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n <div class=\"content\">\n <div class=\"dialog-description\" mat-dialog-content>\n @if (data.manage) {\n <p>\n Add, delete, and update predefined variations.\n <br />\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n <br />\n You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n variation is used.\n </p>\n } @else {\n <p>\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n </p>\n }\n </div>\n\n <div class=\"dialog-table\" mat-dialog-content>\n <table\n mat-table\n cdkDropList\n [dataSource]=\"dataSource\"\n [cdkDropListData]=\"dataSource\"\n [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n (cdkDropListDropped)=\"dropTable($event)\">\n <ng-container matColumnDef=\"reorder\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"drag-handle\">\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (settingType) {\n @case (SettingType.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n <input matInput [formControl]=\"row.controls.hint\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"variationId\">\n <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n </td>\n </ng-container>\n <ng-container matColumnDef=\"usages\">\n <th *matHeaderCellDef mat-header-cell>Usages</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"usages\">\n <button\n type=\"button\"\n class=\"usage-button\"\n mat-icon-button\n [disabled]=\"!row.controls.usages.controls.length && !row.controls.usagesInOtherEnvironments.value\"\n (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n @if (row.controls.usagesExpanded.value) {\n <mat-icon>expand_less</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n <div>\n @if (row.controls.usagesExpanded.value) {\n @for (usage of row.controls.usages.controls; track $index) {\n <div class=\"usage\">\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n {{ usage.controls.displayValue.value }}\n </a>\n </div>\n }\n @if (row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n }}\n in environments you don't have access to.\n } @else if (row.controls.usages.controls.length === 0) {\n <div>no usages</div>\n }\n } @else {\n <div>\n @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n usage{{\n row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n ? \"s\"\n : \"\"\n }}\n } @else {\n <div>no usages</div>\n }\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n class=\"delete\"\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Cannot remove a variation that is already in use.'\n : 'At least 2 predefined variations should be set.'\n \"\n [matTooltipDisabled]=\"\n row.controls.usages.controls.length === 0 &&\n formGroup.controls.predefinedVariations.controls.length > 2\n \">\n <button\n mat-icon-button\n type=\"button\"\n matTooltip=\"Remove variation\"\n [disabled]=\"\n formGroup.controls.predefinedVariations.controls.length <= 2 ||\n row.controls.usages.controls.length > 0\n \"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n </table>\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n </div>\n @if (data.manage && settingType !== SettingType.Boolean) {\n <div class=\"add-variation\" mat-dialog-content>\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n </div>\n }\n </div>\n\n <div mat-dialog-actions>\n @if (data.manage) {\n <button\n type=\"submit\"\n mat-flat-button\n color=\"primary\"\n [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n Save\n </button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n } @else {\n <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n }\n </div>\n </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (settingType) {\n @case (SettingType.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingType.Int) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingType.Double) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingType.Boolean) {\n <div\n class=\"toggle\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .dialog-table{padding-top:0;padding-bottom:0}\n"] }]
|
|
3901
|
+
], template: "@if (setting.isLoading()) {\n <div mat-dialog-content class=\"content\">\n <app-loader />\n </div>\n} @else {\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n <h1 mat-dialog-title>{{ data.manage ? \"Manage predefined variations\" : \"View predefined variations\" }}</h1>\n <div class=\"content\">\n <div class=\"dialog-description\" mat-dialog-content>\n @if (data.manage) {\n <p>\n Add, delete, and update predefined variations of the\n <strong>{{ data.settingName }}</strong>\n setting.\n <br />\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n <br />\n You can update a value or delete a variation only if it is not in use. As a help, you can see where each\n variation is used.\n </p>\n } @else {\n <p>\n The\n <strong>served value</strong>\n is sent to SDKs and received by your applications. The\n <strong>display name</strong>\n appears in the targeting UI.\n </p>\n }\n </div>\n\n <div class=\"dialog-table\" mat-dialog-content>\n <table\n mat-table\n cdkDropList\n [dataSource]=\"dataSource\"\n [cdkDropListData]=\"dataSource\"\n [cdkDropListDisabled]=\"!data.manage || settingType === SettingType.Boolean\"\n (cdkDropListDropped)=\"dropTable($event)\">\n <ng-container matColumnDef=\"reorder\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"drag-handle\">\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (settingType) {\n @case (SettingType.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingType.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field suffixed\">\n <input matInput [formControl]=\"row.controls.hint\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"variationId\">\n <th *matHeaderCellDef mat-header-cell>Variation ID</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <app-copyable-value [value]=\"row.controls.variationId.value\" [small]=\"true\" />\n </td>\n </ng-container>\n <ng-container matColumnDef=\"usages\">\n <th *matHeaderCellDef mat-header-cell>Usages</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"usages\">\n <button\n type=\"button\"\n class=\"usage-button\"\n mat-icon-button\n [disabled]=\"!row.controls.usages.controls.length && !row.controls.usagesInOtherEnvironments.value\"\n (click)=\"row.controls.usagesExpanded.setValue(!row.controls.usagesExpanded.value)\">\n @if (row.controls.usagesExpanded.value) {\n <mat-icon>expand_less</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n <div>\n @if (row.controls.usagesExpanded.value) {\n @for (usage of row.controls.usages.controls; track $index) {\n <div class=\"usage\">\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"usage.controls.routerLink.value\">\n {{ usage.controls.displayValue.value }}\n </a>\n </div>\n }\n @if (row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usagesInOtherEnvironments.value }} usage{{\n row.controls.usagesInOtherEnvironments.value > 1 ? \"s\" : \"\"\n }}\n in environments you don't have access to.\n } @else if (row.controls.usages.controls.length === 0) {\n <div>no usages</div>\n }\n } @else {\n <div>\n @if (row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 0) {\n {{ row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value }}\n usage{{\n row.controls.usages.controls.length + row.controls.usagesInOtherEnvironments.value > 1\n ? \"s\"\n : \"\"\n }}\n } @else {\n <div>no usages</div>\n }\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>{{ dataSource.data.length }} / {{ maxPredefinedVariations }}</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n class=\"delete\"\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Cannot remove a variation that is already in use.'\n : 'At least 2 predefined variations should be set.'\n \"\n [matTooltipDisabled]=\"\n row.controls.usages.controls.length === 0 &&\n formGroup.controls.predefinedVariations.controls.length > 2\n \">\n <button\n mat-icon-button\n type=\"button\"\n matTooltip=\"Remove variation\"\n [disabled]=\"\n formGroup.controls.predefinedVariations.controls.length <= 2 ||\n row.controls.usages.controls.length > 0\n \"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row cdkDrag [cdkDragData]=\"row\"></tr>\n </table>\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n formHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ formHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n </div>\n @if (data.manage && settingType !== SettingType.Boolean) {\n <div class=\"add-variation\" mat-dialog-content>\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n </div>\n }\n </div>\n\n <div mat-dialog-actions>\n @if (data.manage) {\n <button\n type=\"submit\"\n mat-flat-button\n color=\"primary\"\n [disabled]=\"submitting() || !formGroup.dirty || !formGroup.valid\">\n Save\n </button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n } @else {\n <button type=\"button\" color=\"primary\" mat-flat-button [mat-dialog-close]>Close</button>\n }\n </div>\n </form>\n}\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (settingType) {\n @case (SettingType.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\"\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingType.Int) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingType.Double) {\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n @if (formControl.invalid) {\n <mat-error>\n {{ formHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingType.Boolean) {\n <div\n class=\"toggle\"\n matTooltip=\"This variation is in use. The value cannot be changed.\"\n [matTooltipDisabled]=\"!formControl.disabled || !data.manage\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n", styles: [".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ".content .mat-column-color{padding-left:4px!important;padding-right:4px!important;padding-top:12px}.content .mat-column-reorder{padding-right:0!important;padding-top:16px}.content .mat-column-usages{min-width:120px}.content .row.align-top{vertical-align:top}.content .delete{padding-top:6px}.content .drag-handle{cursor:-webkit-grab;cursor:-moz-grab;line-height:8px}.content .toggle{padding-left:4px}.content .usages{display:flex;align-items:center;padding:6px 0}.content .usages .usage{padding:2px 8px 2px 0}.content .usages .usage-button{align-self:flex-start}.content .predefined-component{padding:12px 0}.content .predefined-component.variationid{padding-top:15px}.content .small-error{max-width:180px}.content .add-variation{padding-top:8px;padding-bottom:8px}.content .dialog-description{padding-top:8px;padding-bottom:16px}.content .dialog-table{padding-top:0;padding-bottom:0}\n"] }]
|
|
3902
3902
|
}] });
|
|
3903
3903
|
|
|
3904
3904
|
class DependeesDialogComponent {
|
|
@@ -4013,7 +4013,7 @@ class FeatureFlagValueComponent {
|
|
|
4013
4013
|
}
|
|
4014
4014
|
}
|
|
4015
4015
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FeatureFlagValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4016
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FeatureFlagValueComponent, isStandalone: true, selector: "app-feature-flag-value", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, setting: { classPropertyName: "setting", publicName: "setting", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null }, notAvailablePredefinedVariationIds: { classPropertyName: "notAvailablePredefinedVariationIds", publicName: "notAvailablePredefinedVariationIds", isSignal: true, isRequired: false, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, isPrerequisite: { classPropertyName: "isPrerequisite", publicName: "isPrerequisite", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n @if (formGroupValue.controls.predefinedVariationId) {\n <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n @let variationName = selectedPredefinedVariation?.name;\n @let variationHint = selectedPredefinedVariation?.hint;\n <mat-select\n disableOptionCentering\n [formControl]=\"formGroupValue.controls.predefinedVariationId\"\n [matTooltip]=\"\n `${tooltip()}: ${getServedValueText(selectedPredefinedVariation?.value)} (type: ${setting().settingType})` +\n `\\nName: ${variationName || getDefaultDisplayNameText(selectedPredefinedVariation?.value)}` +\n `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n <mat-select-trigger>\n @if (selectedPredefinedVariation) {\n <div class=\"variation-option\">\n <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n @if (selectedPredefinedVariation.name) {\n <em class=\"variation-name\">\n {{ selectedPredefinedVariation.name }}\n </em>\n } @else {\n <span>\n {{\n getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n }}\n </span>\n }\n </div>\n }\n </mat-select-trigger>\n\n @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n <span\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [matTooltip]=\"\n !predefinedVariation.isAvailable\n ? 'The predefined variation is already selected in another percentage option.'\n : (predefinedVariation.hint ?? '')\n \">\n <mat-option\n [value]=\"predefinedVariation.predefinedVariationId\"\n [disabled]=\"!predefinedVariation.isAvailable\">\n <div class=\"variation-option\">\n <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n @if (predefinedVariation.name) {\n <em class=\"variation-name\">\n {{ predefinedVariation.name }}\n </em>\n } @else {\n <span>\n {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n </span>\n }\n </div>\n </mat-option>\n </span>\n }\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n (click)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\n <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n </button>\n @if (formGroupValue.controls.predefinedVariationId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n } @else if (formGroupValue.controls.stringValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n appPastedDataTrimmer\n [formControl]=\"formGroupValue.controls.stringValue\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formGroupValue.controls.stringValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.stringValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.intValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n appDigitOnly\n inputDisplayNormalizer\n placeholder=\"Add number ...\"\n [formControl]=\"formGroupValue.controls.intValue\"\n [digitOnlyAllowNegatives]=\"true\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n @if (formGroupValue.controls.intValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.intValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.doubleValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n inputDisplayNormalizer\n placeholder=\"Add number ...\"\n [formControl]=\"formGroupValue.controls.doubleValue\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n @if (formGroupValue.controls.doubleValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.doubleValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.boolValue) {\n <div class=\"bool\" [class.readonly]=\"formGroupValue.controls.boolValue.disabled\">\n <label\n class=\"switch\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}mat-select{pointer-events:auto}@media(max-width:500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }] }); }
|
|
4016
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FeatureFlagValueComponent, isStandalone: true, selector: "app-feature-flag-value", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, setting: { classPropertyName: "setting", publicName: "setting", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null }, notAvailablePredefinedVariationIds: { classPropertyName: "notAvailablePredefinedVariationIds", publicName: "notAvailablePredefinedVariationIds", isSignal: true, isRequired: false, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, isPrerequisite: { classPropertyName: "isPrerequisite", publicName: "isPrerequisite", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n @if (formGroupValue.controls.predefinedVariationId) {\n <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n @let variationName = selectedPredefinedVariation?.name;\n @let variationHint = selectedPredefinedVariation?.hint;\n <mat-select\n disableOptionCentering\n [formControl]=\"formGroupValue.controls.predefinedVariationId\"\n [matTooltip]=\"\n `${tooltip()}: ${getServedValueText(selectedPredefinedVariation?.value)} (type: ${setting().settingType})` +\n `\\nName: ${variationName || getDefaultDisplayNameText(selectedPredefinedVariation?.value)}` +\n `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n <mat-select-trigger>\n @if (selectedPredefinedVariation) {\n <div class=\"variation-option\">\n <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n @if (selectedPredefinedVariation.name) {\n <em class=\"variation-name\">\n {{ selectedPredefinedVariation.name }}\n </em>\n } @else {\n <span>\n {{\n getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n }}\n </span>\n }\n </div>\n }\n </mat-select-trigger>\n\n @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n <span\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [matTooltip]=\"\n !predefinedVariation.isAvailable\n ? 'The predefined variation is already selected in another percentage option.'\n : (predefinedVariation.hint ?? '')\n \">\n <mat-option\n [value]=\"predefinedVariation.predefinedVariationId\"\n [disabled]=\"!predefinedVariation.isAvailable\">\n <div class=\"variation-option\">\n <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n @if (predefinedVariation.name) {\n <em class=\"variation-name\">\n {{ predefinedVariation.name }}\n </em>\n } @else {\n <span>\n {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n </span>\n }\n </div>\n </mat-option>\n </span>\n }\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n (click)=\"\n $event.stopPropagation();\n viewVariationsRequested.emit({ settingId: setting().settingId, settingName: setting().name })\n \">\n <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n </button>\n @if (formGroupValue.controls.predefinedVariationId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n } @else if (formGroupValue.controls.stringValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n appPastedDataTrimmer\n [formControl]=\"formGroupValue.controls.stringValue\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formGroupValue.controls.stringValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.stringValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.intValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n appDigitOnly\n inputDisplayNormalizer\n placeholder=\"Add number ...\"\n [formControl]=\"formGroupValue.controls.intValue\"\n [digitOnlyAllowNegatives]=\"true\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n @if (formGroupValue.controls.intValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.intValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.doubleValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n inputDisplayNormalizer\n placeholder=\"Add number ...\"\n [formControl]=\"formGroupValue.controls.doubleValue\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n @if (formGroupValue.controls.doubleValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.doubleValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.boolValue) {\n <div class=\"bool\" [class.readonly]=\"formGroupValue.controls.boolValue.disabled\">\n <label\n class=\"switch\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}mat-select{pointer-events:auto}@media(max-width:500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }] }); }
|
|
4017
4017
|
}
|
|
4018
4018
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FeatureFlagValueComponent, decorators: [{
|
|
4019
4019
|
type: Component,
|
|
@@ -4035,7 +4035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
4035
4035
|
NgClass,
|
|
4036
4036
|
MatSelectTrigger,
|
|
4037
4037
|
PastedDataTrimmerDirective,
|
|
4038
|
-
], template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n @if (formGroupValue.controls.predefinedVariationId) {\n <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n @let variationName = selectedPredefinedVariation?.name;\n @let variationHint = selectedPredefinedVariation?.hint;\n <mat-select\n disableOptionCentering\n [formControl]=\"formGroupValue.controls.predefinedVariationId\"\n [matTooltip]=\"\n `${tooltip()}: ${getServedValueText(selectedPredefinedVariation?.value)} (type: ${setting().settingType})` +\n `\\nName: ${variationName || getDefaultDisplayNameText(selectedPredefinedVariation?.value)}` +\n `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n <mat-select-trigger>\n @if (selectedPredefinedVariation) {\n <div class=\"variation-option\">\n <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n @if (selectedPredefinedVariation.name) {\n <em class=\"variation-name\">\n {{ selectedPredefinedVariation.name }}\n </em>\n } @else {\n <span>\n {{\n getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n }}\n </span>\n }\n </div>\n }\n </mat-select-trigger>\n\n @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n <span\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [matTooltip]=\"\n !predefinedVariation.isAvailable\n ? 'The predefined variation is already selected in another percentage option.'\n : (predefinedVariation.hint ?? '')\n \">\n <mat-option\n [value]=\"predefinedVariation.predefinedVariationId\"\n [disabled]=\"!predefinedVariation.isAvailable\">\n <div class=\"variation-option\">\n <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n @if (predefinedVariation.name) {\n <em class=\"variation-name\">\n {{ predefinedVariation.name }}\n </em>\n } @else {\n <span>\n {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n </span>\n }\n </div>\n </mat-option>\n </span>\n }\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n (click)=\"$event.stopPropagation(); viewVariationsRequested.emit({ settingId: setting().settingId })\">\n <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n </button>\n @if (formGroupValue.controls.predefinedVariationId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n } @else if (formGroupValue.controls.stringValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n appPastedDataTrimmer\n [formControl]=\"formGroupValue.controls.stringValue\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formGroupValue.controls.stringValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.stringValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.intValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n appDigitOnly\n inputDisplayNormalizer\n placeholder=\"Add number ...\"\n [formControl]=\"formGroupValue.controls.intValue\"\n [digitOnlyAllowNegatives]=\"true\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n @if (formGroupValue.controls.intValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.intValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.doubleValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n inputDisplayNormalizer\n placeholder=\"Add number ...\"\n [formControl]=\"formGroupValue.controls.doubleValue\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n @if (formGroupValue.controls.doubleValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.doubleValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.boolValue) {\n <div class=\"bool\" [class.readonly]=\"formGroupValue.controls.boolValue.disabled\">\n <label\n class=\"switch\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}mat-select{pointer-events:auto}@media(max-width:500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"] }]
|
|
4038
|
+
], template: "@let formGroupValue = formGroup();\n\n<div class=\"feature-flag-value\">\n @if (formGroupValue.controls.predefinedVariationId) {\n <div class=\"setting-variation\" [ngClass]=\"{ prerequisite: isPrerequisite() }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n @let selectedPredefinedVariation = getPredefinedVariation(formGroupValue.controls.predefinedVariationId.value);\n @let variationName = selectedPredefinedVariation?.name;\n @let variationHint = selectedPredefinedVariation?.hint;\n <mat-select\n disableOptionCentering\n [formControl]=\"formGroupValue.controls.predefinedVariationId\"\n [matTooltip]=\"\n `${tooltip()}: ${getServedValueText(selectedPredefinedVariation?.value)} (type: ${setting().settingType})` +\n `\\nName: ${variationName || getDefaultDisplayNameText(selectedPredefinedVariation?.value)}` +\n `${variationHint ? `\\nHint: ${variationHint}` : ''}`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n <mat-select-trigger>\n @if (selectedPredefinedVariation) {\n <div class=\"variation-option\">\n <span [class]=\"'variation-indicator variation-color-' + selectedPredefinedVariation.colorIndex\"></span>\n @if (selectedPredefinedVariation.name) {\n <em class=\"variation-name\">\n {{ selectedPredefinedVariation.name }}\n </em>\n } @else {\n <span>\n {{\n getPredefinedVariationValueDisplayValue(setting().settingType, selectedPredefinedVariation.value)\n }}\n </span>\n }\n </div>\n }\n </mat-select-trigger>\n\n @for (predefinedVariation of predefinedVariations(); track predefinedVariation.predefinedVariationId) {\n <span\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [matTooltip]=\"\n !predefinedVariation.isAvailable\n ? 'The predefined variation is already selected in another percentage option.'\n : (predefinedVariation.hint ?? '')\n \">\n <mat-option\n [value]=\"predefinedVariation.predefinedVariationId\"\n [disabled]=\"!predefinedVariation.isAvailable\">\n <div class=\"variation-option\">\n <span [class]=\"'variation-indicator variation-color-' + predefinedVariation.colorIndex\"></span>\n @if (predefinedVariation.name) {\n <em class=\"variation-name\">\n {{ predefinedVariation.name }}\n </em>\n } @else {\n <span>\n {{ getPredefinedVariationValueDisplayValue(setting().settingType, predefinedVariation.value) }}\n </span>\n }\n </div>\n </mat-option>\n </span>\n }\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n [matTooltip]=\"canCreateOrUpdateSetting() ? 'Manage predefined variations' : 'View predefined variations'\"\n (click)=\"\n $event.stopPropagation();\n viewVariationsRequested.emit({ settingId: setting().settingId, settingName: setting().name })\n \">\n <mat-icon class=\"icon-transform-rotate-90\">call_split</mat-icon>\n </button>\n @if (formGroupValue.controls.predefinedVariationId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.predefinedVariationId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n } @else if (formGroupValue.controls.stringValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field suffixed\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n appPastedDataTrimmer\n [formControl]=\"formGroupValue.controls.stringValue\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formGroupValue.controls.stringValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.stringValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.intValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n appDigitOnly\n inputDisplayNormalizer\n placeholder=\"Add number ...\"\n [formControl]=\"formGroupValue.controls.intValue\"\n [digitOnlyAllowNegatives]=\"true\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n @if (formGroupValue.controls.intValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.intValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.doubleValue) {\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n inputDisplayNormalizer\n placeholder=\"Add number ...\"\n [formControl]=\"formGroupValue.controls.doubleValue\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\" />\n @if (formGroupValue.controls.doubleValue.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroupValue.controls.doubleValue) }}\n </mat-error>\n }\n </mat-form-field>\n } @else if (formGroupValue.controls.boolValue) {\n <div class=\"bool\" [class.readonly]=\"formGroupValue.controls.boolValue.disabled\">\n <label\n class=\"switch\"\n [matTooltip]=\"`${tooltip()}: ${getServedValueText(formGroupValue.controls)} (type: ${setting().settingType})`\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n <input type=\"checkbox\" [formControl]=\"formGroupValue.controls.boolValue\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n", ":host{display:flex;flex-grow:1}.feature-flag-value{display:flex;flex-grow:1;margin:2px 0}.feature-flag-value .bool{flex-grow:1;align-items:flex-end;display:flex;flex-direction:column}.feature-flag-value .setting-variation{display:flex;flex-direction:column;flex-grow:1}.feature-flag-value .setting-variation:not(.prerequisite){align-items:flex-end}.feature-flag-value .setting-variation mat-form-field{width:212px}.feature-flag-value .readonly{opacity:.6}.feature-flag-value .variationId{margin:4px 0 0 8px;cursor:pointer;color:var(--action-icon-button-color);display:flex}.feature-flag-value mat-form-field{width:100%}.variation-option{display:flex;align-items:center}.variation-option .variation-name{padding-right:2px}.variation-option .variation-indicator{margin-right:8px}mat-select{pointer-events:auto}@media(max-width:500px){.setting-variation mat-form-field{max-width:calc(100% - 4px);width:160px}}\n"] }]
|
|
4039
4039
|
}], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], setting: [{ type: i0.Input, args: [{ isSignal: true, alias: "setting", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], notAvailablePredefinedVariationIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "notAvailablePredefinedVariationIds", required: false }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], isPrerequisite: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPrerequisite", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
4040
4040
|
|
|
4041
4041
|
class ConditionChipComponent {
|
|
@@ -4108,7 +4108,7 @@ class PrerequisiteFlagConditionComponent {
|
|
|
4108
4108
|
this.filterText.set("");
|
|
4109
4109
|
}
|
|
4110
4110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PrerequisiteFlagConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: PrerequisiteFlagConditionComponent, isStandalone: true, selector: "app-prerequisite-flag-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, prerequisiteSettings: { classPropertyName: "prerequisiteSettings", publicName: "prerequisiteSettings", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n flag\n </a>\n </div>\n </div>\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select\n placeholder=\"Select feature flag ...\"\n matTooltip=\"Prerequisite flag key\"\n [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n (selectionChange)=\"prerequisiteSettingChanged()\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <mat-select-trigger>\n @if (settingValue) {\n {{ settingValue.name }} ({{ settingValue.key }})\n }\n </mat-select-trigger>\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n <mat-option [value]=\"prerequisiteSetting.settingId\" [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n <div class=\"feature-flag-selector-item\">\n @switch (prerequisiteSetting.settingType) {\n @case (SettingType.Boolean) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"../../../../../assets/images/setting-types/feature_flag.svg\"\n alt=\"feature flag\" />\n }\n @case (SettingType.String) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"../../../../../assets/images/setting-types/text.svg\"\n alt=\"text setting\" />\n }\n @case (SettingType.Int) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"../../../../../assets/images/setting-types/whole.svg\"\n alt=\"whole number setting\" />\n }\n @case (SettingType.Double) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"../../../../../assets/images/setting-types/decimal.svg\"\n alt=\"decimal number setting\" />\n }\n }\n <div class=\"item-text-wrapper\">\n <span [matTooltip]=\"prerequisiteSetting.name\">{{ prerequisiteSetting.name }}</span>\n <code class=\"highlight copyable-like small\" [matTooltip]=\"prerequisiteSetting.key\">\n {{ prerequisiteSetting.key }}\n </code>\n </div>\n </div>\n </mat-option>\n }\n @if (!hasFilteredSettings()) {\n <mat-option disabled>No feature flags found.</mat-option>\n }\n </mat-select>\n @if (formGroup().controls.prerequisiteSettingId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.prerequisiteSettingId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n @if (\n !settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean)\n ) {\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select\n [matTooltip]=\"\n `Comparison value: ${!!formGroup().controls.prerequisiteComparisonValue.controls.boolValue?.value} (type: ${SettingType.Boolean})`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [formControl]=\"formGroup().controls.comparator\">\n @for (prerequisiteComparator of booleanPrerequisiteComparators; track $index) {\n <mat-option [value]=\"prerequisiteComparator.value\">\n {{ prerequisiteComparator.label }}\n </mat-option>\n }\n </mat-select>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n } @else {\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n @for (prerequisiteComparator of prerequisiteComparators; track $index) {\n <mat-option [value]=\"prerequisiteComparator.value\">\n {{ prerequisiteComparator.label }}\n </mat-option>\n }\n </mat-select>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n </div>\n @if (\n !(!settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean))\n ) {\n <app-feature-flag-value\n class=\"wrapper-group grow\"\n tooltip=\"Comparison value\"\n [setting]=\"settingValue\"\n [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n [isPrerequisite]=\"true\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatSelectTrigger, selector: "mat-select-trigger" }] }); }
|
|
4111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: PrerequisiteFlagConditionComponent, isStandalone: true, selector: "app-prerequisite-flag-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, prerequisiteSettings: { classPropertyName: "prerequisiteSettings", publicName: "prerequisiteSettings", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n flag\n </a>\n </div>\n </div>\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select\n placeholder=\"Select feature flag ...\"\n matTooltip=\"Prerequisite flag key\"\n [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n (selectionChange)=\"prerequisiteSettingChanged()\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <mat-select-trigger>\n @if (settingValue) {\n {{ settingValue.name }} ({{ settingValue.key }})\n }\n </mat-select-trigger>\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n <mat-option [value]=\"prerequisiteSetting.settingId\" [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n <div class=\"feature-flag-selector-item\">\n @switch (prerequisiteSetting.settingType) {\n @case (SettingType.Boolean) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/feature_flag.svg\"\n alt=\"feature flag\" />\n }\n @case (SettingType.String) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/text.svg\"\n alt=\"text setting\" />\n }\n @case (SettingType.Int) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/whole.svg\"\n alt=\"whole number setting\" />\n }\n @case (SettingType.Double) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/decimal.svg\"\n alt=\"decimal number setting\" />\n }\n }\n <div class=\"item-text-wrapper\">\n <span [matTooltip]=\"prerequisiteSetting.name\">{{ prerequisiteSetting.name }}</span>\n <code class=\"highlight copyable-like small\" [matTooltip]=\"prerequisiteSetting.key\">\n {{ prerequisiteSetting.key }}\n </code>\n </div>\n </div>\n </mat-option>\n }\n @if (!hasFilteredSettings()) {\n <mat-option disabled>No feature flags found.</mat-option>\n }\n </mat-select>\n @if (formGroup().controls.prerequisiteSettingId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.prerequisiteSettingId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n @if (\n !settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean)\n ) {\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select\n [matTooltip]=\"\n `Comparison value: ${!!formGroup().controls.prerequisiteComparisonValue.controls.boolValue?.value} (type: ${SettingType.Boolean})`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [formControl]=\"formGroup().controls.comparator\">\n @for (prerequisiteComparator of booleanPrerequisiteComparators; track $index) {\n <mat-option [value]=\"prerequisiteComparator.value\">\n {{ prerequisiteComparator.label }}\n </mat-option>\n }\n </mat-select>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n } @else {\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n @for (prerequisiteComparator of prerequisiteComparators; track $index) {\n <mat-option [value]=\"prerequisiteComparator.value\">\n {{ prerequisiteComparator.label }}\n </mat-option>\n }\n </mat-select>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n </div>\n @if (\n !(!settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean))\n ) {\n <app-feature-flag-value\n class=\"wrapper-group grow\"\n tooltip=\"Comparison value\"\n [setting]=\"settingValue\"\n [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n [isPrerequisite]=\"true\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatSelectTrigger, selector: "mat-select-trigger" }] }); }
|
|
4112
4112
|
}
|
|
4113
4113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PrerequisiteFlagConditionComponent, decorators: [{
|
|
4114
4114
|
type: Component,
|
|
@@ -4130,7 +4130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
4130
4130
|
MatSuffix,
|
|
4131
4131
|
MatInput,
|
|
4132
4132
|
MatSelectTrigger,
|
|
4133
|
-
], template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n flag\n </a>\n </div>\n </div>\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select\n placeholder=\"Select feature flag ...\"\n matTooltip=\"Prerequisite flag key\"\n [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n (selectionChange)=\"prerequisiteSettingChanged()\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <mat-select-trigger>\n @if (settingValue) {\n {{ settingValue.name }} ({{ settingValue.key }})\n }\n </mat-select-trigger>\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n <mat-option [value]=\"prerequisiteSetting.settingId\" [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n <div class=\"feature-flag-selector-item\">\n @switch (prerequisiteSetting.settingType) {\n @case (SettingType.Boolean) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"
|
|
4133
|
+
], template: "@let settingValue = setting();\n\n<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/flag-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n flag\n </a>\n </div>\n </div>\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select\n placeholder=\"Select feature flag ...\"\n matTooltip=\"Prerequisite flag key\"\n [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n (selectionChange)=\"prerequisiteSettingChanged()\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\n <mat-select-trigger>\n @if (settingValue) {\n {{ settingValue.name }} ({{ settingValue.key }})\n }\n </mat-select-trigger>\n <div class=\"menu-filter small-density-form-field\">\n <mat-form-field\n subscriptSizing=\"dynamic\"\n appearance=\"outline\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <input matInput placeholder=\"Filter feature flags\" [(ngModel)]=\"filterText\" />\n <span matSuffix [hidden]=\"!filterText()\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"clear-filter\"\n aria-label=\"Clear\"\n matTooltip=\"Clear search filters\"\n (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n </div>\n <mat-divider />\n\n @for (prerequisiteSetting of filteredPrerequisiteSettings(); track $index) {\n <mat-option [value]=\"prerequisiteSetting.settingId\" [ngClass]=\"{ hidden: prerequisiteSetting.hidden }\">\n <div class=\"feature-flag-selector-item\">\n @switch (prerequisiteSetting.settingType) {\n @case (SettingType.Boolean) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/feature_flag.svg\"\n alt=\"feature flag\" />\n }\n @case (SettingType.String) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/text.svg\"\n alt=\"text setting\" />\n }\n @case (SettingType.Int) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/whole.svg\"\n alt=\"whole number setting\" />\n }\n @case (SettingType.Double) {\n <img\n class=\"feature-flag-selector-img\"\n src=\"./assets/images/setting-types/decimal.svg\"\n alt=\"decimal number setting\" />\n }\n }\n <div class=\"item-text-wrapper\">\n <span [matTooltip]=\"prerequisiteSetting.name\">{{ prerequisiteSetting.name }}</span>\n <code class=\"highlight copyable-like small\" [matTooltip]=\"prerequisiteSetting.key\">\n {{ prerequisiteSetting.key }}\n </code>\n </div>\n </div>\n </mat-option>\n }\n @if (!hasFilteredSettings()) {\n <mat-option disabled>No feature flags found.</mat-option>\n }\n </mat-select>\n @if (formGroup().controls.prerequisiteSettingId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.prerequisiteSettingId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n @if (\n !settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean)\n ) {\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select\n [matTooltip]=\"\n `Comparison value: ${!!formGroup().controls.prerequisiteComparisonValue.controls.boolValue?.value} (type: ${SettingType.Boolean})`\n \"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [formControl]=\"formGroup().controls.comparator\">\n @for (prerequisiteComparator of booleanPrerequisiteComparators; track $index) {\n <mat-option [value]=\"prerequisiteComparator.value\">\n {{ prerequisiteComparator.label }}\n </mat-option>\n }\n </mat-select>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n } @else {\n <div class=\"targeting-rule-component pad-right\">\n <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n @for (prerequisiteComparator of prerequisiteComparators; track $index) {\n <mat-option [value]=\"prerequisiteComparator.value\">\n {{ prerequisiteComparator.label }}\n </mat-option>\n }\n </mat-select>\n @if (formGroup().controls.comparator.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n </div>\n @if (\n !(!settingValue || (!settingValue.predefinedVariations.length && settingValue.settingType === SettingType.Boolean))\n ) {\n <app-feature-flag-value\n class=\"wrapper-group grow\"\n tooltip=\"Comparison value\"\n [setting]=\"settingValue\"\n [formGroup]=\"formGroup().controls.prerequisiteComparisonValue\"\n [isPrerequisite]=\"true\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n</div>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}.feature-flag-selector-item{display:flex;flex-wrap:nowrap}.feature-flag-selector-item .feature-flag-selector-img{width:24px;height:24px;margin-right:8px;align-self:center}.feature-flag-selector-item>.item-text-wrapper{display:flex;min-width:0;align-items:center;flex-wrap:wrap;column-gap:.25em}.feature-flag-selector-item>.item-text-wrapper>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
4134
4134
|
}], propDecorators: { targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], conditionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionIndex", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], prerequisiteSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "prerequisiteSettings", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
4135
4135
|
|
|
4136
4136
|
class SegmentConditionComponent {
|
|
@@ -6185,7 +6185,7 @@ class FeatureFlagComponent {
|
|
|
6185
6185
|
});
|
|
6186
6186
|
}
|
|
6187
6187
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FeatureFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6188
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FeatureFlagComponent, isStandalone: true, selector: "app-feature-flag", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, hasOtherEnvironment: { classPropertyName: "hasOtherEnvironment", publicName: "hasOtherEnvironment", isSignal: true, isRequired: true, transformFunction: null }, environmentName: { classPropertyName: "environmentName", publicName: "environmentName", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, predefinedVariationsEnabled: { classPropertyName: "predefinedVariationsEnabled", publicName: "predefinedVariationsEnabled", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n <div class=\"wrapper\">\n <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n <div class=\"expandcollapse\">\n @if (flagStateValue.panelExpanded) {\n <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_up</mat-icon>\n </div>\n } @else {\n <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_down</mat-icon>\n </div>\n }\n </div>\n <div class=\"header\">\n <div class=\"top\">\n <div class=\"left\">\n <div class=\"name-key\">\n <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n {{ flagStateValue.settingValue.setting.name }}\n </span>\n @if (showEnvironmentName()) {\n <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n }\n <div class=\"key\">\n <app-copyable-value\n [tooltip]=\"\n `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n \"\n [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [value]=\"flagStateValue.settingValue.setting.key\"\n [smallest]=\"true\"\n [dark]=\"true\"\n [wholeControlCopyable]=\"true\" />\n </div>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"line\">\n @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n <button\n type=\"button\"\n class=\"prereq-button\"\n mat-icon-button\n [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n (click)=\"openDependeesDialog()\">\n <mat-icon>account_tree</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n class=\"more-button\"\n mat-icon-button\n matTooltip=\"More\"\n [matMenuTriggerFor]=\"moreMenu\"\n [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"description-container\">\n <div class=\"description-tags\">\n @if (flagStateValue.settingValue.setting.hint) {\n <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n {{ flagStateValue.settingValue.setting.hint }}\n </div>\n }\n\n @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n <app-feature-flag-value\n class=\"glance\"\n tooltip=\"Served value\"\n [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n [setting]=\"flagStateValue.settingValue.setting\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"true\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n\n @if (getGlance(); as glance) {\n <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <div class=\"container\" [ngClass]=\"glance.class\">\n @if (glance.percentageText) {\n <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n }\n @if (glance.ruleText) {\n <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (flagStateValue.panelExpanded) {\n <div class=\"eval-formula-wrapper\">\n <app-evaluation-formula\n [formGroup]=\"formGroup()\"\n [flagState]=\"flagStateValue\"\n [segments]=\"segments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"false\"\n [canCreateOrUpdateSetting]=\"true\"\n [showPercentageEvaluationAttribute]=\"!!formGroup().controls.percentageEvaluationAttribute.value\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n (recalcAddButtons)=\"recalcAddButtons.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n }\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n <div\n mat-menu-item\n data-robot=\"history\"\n [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n [disabled]=\"flagStateValue.readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n <mat-icon>percent</mat-icon>\n <span>Change percentage attribute</span>\n </div>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n <div mat-menu-item data-robot=\"history\">\n <mat-icon>open_in_new</mat-icon>\n <span>Open in ConfigCat</span>\n </div>\n </a>\n <div\n mat-menu-item\n data-robot=\"renameSetting\"\n [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n (click)=\"copyDirectLink()\">\n <mat-icon>content_copy</mat-icon>\n <span>Copy direct link</span>\n </div>\n @if (canDeleteSetting()) {\n <div>\n <mat-divider />\n <div\n mat-menu-item\n data-robot=\"deleteSetting\"\n [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n (click)=\"deleteSetting()\">\n <mat-icon>delete_outline</mat-icon>\n <span>{{ deleteSettingText() }}</span>\n </div>\n </div>\n }\n @if (predefinedVariationsEnabled()) {\n @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n <mat-divider />\n <div\n mat-menu-item\n [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n (click)=\"viewVariationsRequested.emit({ settingId: flagStateValue.settingValue.setting.settingId })\">\n <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n <span>Manage predefined variations</span>\n <!-- @if (permissions().canCreateOrUpdateSetting) {\n <span>Manage predefined variations</span>\n } @else {\n <span>View predefined variations</span>\n } -->\n </div>\n }\n }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:10px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:100%;height:100%;position:absolute;background-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:100%;height:100%;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "featureFlagLimitations", "canManageSegments", "canCreateOrUpdateSetting", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons", "viewVariationsRequested"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }] }); }
|
|
6188
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FeatureFlagComponent, isStandalone: true, selector: "app-feature-flag", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, hasOtherEnvironment: { classPropertyName: "hasOtherEnvironment", publicName: "hasOtherEnvironment", isSignal: true, isRequired: true, transformFunction: null }, environmentName: { classPropertyName: "environmentName", publicName: "environmentName", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, predefinedVariationsEnabled: { classPropertyName: "predefinedVariationsEnabled", publicName: "predefinedVariationsEnabled", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n <div class=\"wrapper\">\n <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n <div class=\"expandcollapse\">\n @if (flagStateValue.panelExpanded) {\n <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_up</mat-icon>\n </div>\n } @else {\n <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_down</mat-icon>\n </div>\n }\n </div>\n <div class=\"header\">\n <div class=\"top\">\n <div class=\"left\">\n <div class=\"name-key\">\n <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n {{ flagStateValue.settingValue.setting.name }}\n </span>\n @if (showEnvironmentName()) {\n <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n }\n <div class=\"key\">\n <app-copyable-value\n [tooltip]=\"\n `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n \"\n [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [value]=\"flagStateValue.settingValue.setting.key\"\n [smallest]=\"true\"\n [dark]=\"true\"\n [wholeControlCopyable]=\"true\" />\n </div>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"line\">\n @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n <button\n type=\"button\"\n class=\"prereq-button\"\n mat-icon-button\n [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n (click)=\"openDependeesDialog()\">\n <mat-icon>account_tree</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n class=\"more-button\"\n mat-icon-button\n matTooltip=\"More\"\n [matMenuTriggerFor]=\"moreMenu\"\n [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"description-container\">\n <div class=\"description-tags\">\n @if (flagStateValue.settingValue.setting.hint) {\n <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n {{ flagStateValue.settingValue.setting.hint }}\n </div>\n }\n\n @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n <app-feature-flag-value\n class=\"glance\"\n tooltip=\"Served value\"\n [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n [setting]=\"flagStateValue.settingValue.setting\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"true\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n\n @if (getGlance(); as glance) {\n <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <div class=\"container\" [ngClass]=\"glance.class\">\n @if (glance.percentageText) {\n <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n }\n @if (glance.ruleText) {\n <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (flagStateValue.panelExpanded) {\n <div class=\"eval-formula-wrapper\">\n <app-evaluation-formula\n [formGroup]=\"formGroup()\"\n [flagState]=\"flagStateValue\"\n [segments]=\"segments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"false\"\n [canCreateOrUpdateSetting]=\"true\"\n [showPercentageEvaluationAttribute]=\"!!formGroup().controls.percentageEvaluationAttribute.value\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n (recalcAddButtons)=\"recalcAddButtons.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n }\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n <div\n mat-menu-item\n data-robot=\"history\"\n [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n [disabled]=\"flagStateValue.readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n <mat-icon>percent</mat-icon>\n <span>Change percentage attribute</span>\n </div>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n <div mat-menu-item data-robot=\"history\">\n <mat-icon>open_in_new</mat-icon>\n <span>Open in ConfigCat</span>\n </div>\n </a>\n <div\n mat-menu-item\n data-robot=\"renameSetting\"\n [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n (click)=\"copyDirectLink()\">\n <mat-icon>content_copy</mat-icon>\n <span>Copy direct link</span>\n </div>\n @if (canDeleteSetting()) {\n <div>\n <mat-divider />\n <div\n mat-menu-item\n data-robot=\"deleteSetting\"\n [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n (click)=\"deleteSetting()\">\n <mat-icon>delete_outline</mat-icon>\n <span>{{ deleteSettingText() }}</span>\n </div>\n </div>\n }\n @if (predefinedVariationsEnabled()) {\n @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n <mat-divider />\n <div\n mat-menu-item\n [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n (click)=\"\n viewVariationsRequested.emit({\n settingId: flagStateValue.settingValue.setting.settingId,\n settingName: flagStateValue.settingValue.setting.name,\n })\n \">\n <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n <span>Manage predefined variations</span>\n <!-- @if (permissions().canCreateOrUpdateSetting) {\n <span>Manage predefined variations</span>\n } @else {\n <span>View predefined variations</span>\n } -->\n </div>\n }\n }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:10px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:100%;height:100%;position:absolute;background-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:100%;height:100%;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "featureFlagLimitations", "canManageSegments", "canCreateOrUpdateSetting", "showPercentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons", "viewVariationsRequested"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }] }); }
|
|
6189
6189
|
}
|
|
6190
6190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FeatureFlagComponent, decorators: [{
|
|
6191
6191
|
type: Component,
|
|
@@ -6205,7 +6205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
6205
6205
|
MatMenuItem,
|
|
6206
6206
|
MatDivider,
|
|
6207
6207
|
CopyableValueComponent,
|
|
6208
|
-
], template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n <div class=\"wrapper\">\n <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n <div class=\"expandcollapse\">\n @if (flagStateValue.panelExpanded) {\n <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_up</mat-icon>\n </div>\n } @else {\n <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_down</mat-icon>\n </div>\n }\n </div>\n <div class=\"header\">\n <div class=\"top\">\n <div class=\"left\">\n <div class=\"name-key\">\n <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n {{ flagStateValue.settingValue.setting.name }}\n </span>\n @if (showEnvironmentName()) {\n <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n }\n <div class=\"key\">\n <app-copyable-value\n [tooltip]=\"\n `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n \"\n [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [value]=\"flagStateValue.settingValue.setting.key\"\n [smallest]=\"true\"\n [dark]=\"true\"\n [wholeControlCopyable]=\"true\" />\n </div>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"line\">\n @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n <button\n type=\"button\"\n class=\"prereq-button\"\n mat-icon-button\n [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n (click)=\"openDependeesDialog()\">\n <mat-icon>account_tree</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n class=\"more-button\"\n mat-icon-button\n matTooltip=\"More\"\n [matMenuTriggerFor]=\"moreMenu\"\n [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"description-container\">\n <div class=\"description-tags\">\n @if (flagStateValue.settingValue.setting.hint) {\n <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n {{ flagStateValue.settingValue.setting.hint }}\n </div>\n }\n\n @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n <app-feature-flag-value\n class=\"glance\"\n tooltip=\"Served value\"\n [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n [setting]=\"flagStateValue.settingValue.setting\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"true\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n\n @if (getGlance(); as glance) {\n <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <div class=\"container\" [ngClass]=\"glance.class\">\n @if (glance.percentageText) {\n <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n }\n @if (glance.ruleText) {\n <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (flagStateValue.panelExpanded) {\n <div class=\"eval-formula-wrapper\">\n <app-evaluation-formula\n [formGroup]=\"formGroup()\"\n [flagState]=\"flagStateValue\"\n [segments]=\"segments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"false\"\n [canCreateOrUpdateSetting]=\"true\"\n [showPercentageEvaluationAttribute]=\"!!formGroup().controls.percentageEvaluationAttribute.value\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n (recalcAddButtons)=\"recalcAddButtons.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n }\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n <div\n mat-menu-item\n data-robot=\"history\"\n [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n [disabled]=\"flagStateValue.readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n <mat-icon>percent</mat-icon>\n <span>Change percentage attribute</span>\n </div>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n <div mat-menu-item data-robot=\"history\">\n <mat-icon>open_in_new</mat-icon>\n <span>Open in ConfigCat</span>\n </div>\n </a>\n <div\n mat-menu-item\n data-robot=\"renameSetting\"\n [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n (click)=\"copyDirectLink()\">\n <mat-icon>content_copy</mat-icon>\n <span>Copy direct link</span>\n </div>\n @if (canDeleteSetting()) {\n <div>\n <mat-divider />\n <div\n mat-menu-item\n data-robot=\"deleteSetting\"\n [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n (click)=\"deleteSetting()\">\n <mat-icon>delete_outline</mat-icon>\n <span>{{ deleteSettingText() }}</span>\n </div>\n </div>\n }\n @if (predefinedVariationsEnabled()) {\n @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n <mat-divider />\n <div\n mat-menu-item\n [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n (click)=\"viewVariationsRequested.emit({ settingId: flagStateValue.settingValue.setting.settingId })\">\n <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n <span>Manage predefined variations</span>\n <!-- @if (permissions().canCreateOrUpdateSetting) {\n <span>Manage predefined variations</span>\n } @else {\n <span>View predefined variations</span>\n } -->\n </div>\n }\n }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:10px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:100%;height:100%;position:absolute;background-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:100%;height:100%;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"] }]
|
|
6208
|
+
], template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n <div class=\"wrapper\">\n <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n <div class=\"expandcollapse\">\n @if (flagStateValue.panelExpanded) {\n <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_up</mat-icon>\n </div>\n } @else {\n <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_down</mat-icon>\n </div>\n }\n </div>\n <div class=\"header\">\n <div class=\"top\">\n <div class=\"left\">\n <div class=\"name-key\">\n <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n {{ flagStateValue.settingValue.setting.name }}\n </span>\n @if (showEnvironmentName()) {\n <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n }\n <div class=\"key\">\n <app-copyable-value\n [tooltip]=\"\n `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n \"\n [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [value]=\"flagStateValue.settingValue.setting.key\"\n [smallest]=\"true\"\n [dark]=\"true\"\n [wholeControlCopyable]=\"true\" />\n </div>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"line\">\n @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n <button\n type=\"button\"\n class=\"prereq-button\"\n mat-icon-button\n [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n (click)=\"openDependeesDialog()\">\n <mat-icon>account_tree</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n class=\"more-button\"\n mat-icon-button\n matTooltip=\"More\"\n [matMenuTriggerFor]=\"moreMenu\"\n [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"description-container\">\n <div class=\"description-tags\">\n @if (flagStateValue.settingValue.setting.hint) {\n <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n {{ flagStateValue.settingValue.setting.hint }}\n </div>\n }\n\n @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n <app-feature-flag-value\n class=\"glance\"\n tooltip=\"Served value\"\n [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n [setting]=\"flagStateValue.settingValue.setting\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"true\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n\n @if (getGlance(); as glance) {\n <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <div class=\"container\" [ngClass]=\"glance.class\">\n @if (glance.percentageText) {\n <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n }\n @if (glance.ruleText) {\n <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (flagStateValue.panelExpanded) {\n <div class=\"eval-formula-wrapper\">\n <app-evaluation-formula\n [formGroup]=\"formGroup()\"\n [flagState]=\"flagStateValue\"\n [segments]=\"segments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"false\"\n [canCreateOrUpdateSetting]=\"true\"\n [showPercentageEvaluationAttribute]=\"!!formGroup().controls.percentageEvaluationAttribute.value\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n (recalcAddButtons)=\"recalcAddButtons.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n }\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n <div\n mat-menu-item\n data-robot=\"history\"\n [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n [disabled]=\"flagStateValue.readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n <mat-icon>percent</mat-icon>\n <span>Change percentage attribute</span>\n </div>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n <div mat-menu-item data-robot=\"history\">\n <mat-icon>open_in_new</mat-icon>\n <span>Open in ConfigCat</span>\n </div>\n </a>\n <div\n mat-menu-item\n data-robot=\"renameSetting\"\n [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n (click)=\"copyDirectLink()\">\n <mat-icon>content_copy</mat-icon>\n <span>Copy direct link</span>\n </div>\n @if (canDeleteSetting()) {\n <div>\n <mat-divider />\n <div\n mat-menu-item\n data-robot=\"deleteSetting\"\n [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n (click)=\"deleteSetting()\">\n <mat-icon>delete_outline</mat-icon>\n <span>{{ deleteSettingText() }}</span>\n </div>\n </div>\n }\n @if (predefinedVariationsEnabled()) {\n @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n <mat-divider />\n <div\n mat-menu-item\n [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n (click)=\"\n viewVariationsRequested.emit({\n settingId: flagStateValue.settingValue.setting.settingId,\n settingName: flagStateValue.settingValue.setting.name,\n })\n \">\n <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n <span>Manage predefined variations</span>\n <!-- @if (permissions().canCreateOrUpdateSetting) {\n <span>Manage predefined variations</span>\n } @else {\n <span>View predefined variations</span>\n } -->\n </div>\n }\n }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:10px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:100%;height:100%;position:absolute;background-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:100%;height:100%;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"] }]
|
|
6209
6209
|
}], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], hasOtherEnvironment: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasOtherEnvironment", required: true }] }], environmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "environmentName", required: false }] }], showEnvironmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnvironmentName", required: false }] }], deleteSettingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteSettingText", required: false }] }], canDeleteSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteSetting", required: false }] }], predefinedVariationsEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "predefinedVariationsEnabled", required: true }] }], addSegmentConditionRequestedWithoutSegments: [{ type: i0.Output, args: ["addSegmentConditionRequestedWithoutSegments"] }], expandedChanged: [{ type: i0.Output, args: ["expandedChanged"] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], recalcAddButtons: [{ type: i0.Output, args: ["recalcAddButtons"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
6210
6210
|
|
|
6211
6211
|
class FeatureFlagItemComponent extends BaseComponent {
|
|
@@ -6355,7 +6355,7 @@ class FeatureFlagItemComponent extends BaseComponent {
|
|
|
6355
6355
|
width: "450px",
|
|
6356
6356
|
});
|
|
6357
6357
|
dialogRef.afterClosed().subscribe(result => {
|
|
6358
|
-
if (result
|
|
6358
|
+
if (result?.button === "save" && result.reason) {
|
|
6359
6359
|
this.updateSettingValues(updateModel, result.reason);
|
|
6360
6360
|
}
|
|
6361
6361
|
});
|
|
@@ -6544,6 +6544,7 @@ class FeatureFlagItemComponent extends BaseComponent {
|
|
|
6544
6544
|
const dialogRef = this.dialog.open(VariationsDialogComponent, {
|
|
6545
6545
|
data: {
|
|
6546
6546
|
settingId: event.settingId,
|
|
6547
|
+
settingName: event.settingName,
|
|
6547
6548
|
manage: true,
|
|
6548
6549
|
organizationId: product.organization.organizationId,
|
|
6549
6550
|
productId: this.productId(),
|
|
@@ -6692,6 +6693,19 @@ class ErrorHandler {
|
|
|
6692
6693
|
}
|
|
6693
6694
|
}
|
|
6694
6695
|
|
|
6696
|
+
class BoxComponent {
|
|
6697
|
+
constructor() {
|
|
6698
|
+
this.type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
6699
|
+
this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
6700
|
+
}
|
|
6701
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6702
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: BoxComponent, isStandalone: true, selector: "app-box", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class.info-box]=\"type() === 'info'\" [class.warn-box]=\"type() === 'warn'\" [class.error-box]=\"type() === 'error'\">\n <div class=\"box-container\" [class.titleless]=\"!title()\">\n @if (title()) {\n <div class=\"box-header\">\n <div class=\"box-icon\"></div>\n <div class=\"box-title\">{{ title() }}</div>\n </div>\n } @else {\n <div class=\"box-icon\"></div>\n }\n <div class=\"box-content\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: [".admonition-icon,.error-box .box-icon:before,.warn-box .box-icon:before,.info-box .box-icon:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal}.admonition-icon,.error-box .box-icon:before,.warn-box .box-icon:before,.info-box .box-icon:before{margin-right:8px}.admonition-box,.error-box,.warn-box,.info-box{border-radius:4px;font-size:12px;width:fit-content;display:flex;align-items:center;color:var(--admonition-box-font-color);line-height:normal}.admonition-box .box-container,.error-box .box-container,.warn-box .box-container,.info-box .box-container{padding:.5rem .8rem .5rem .5rem;display:flex;flex-direction:column}.admonition-box .box-container .box-header,.error-box .box-container .box-header,.warn-box .box-container .box-header,.info-box .box-container .box-header{display:flex;align-items:center;margin-bottom:4px}.admonition-box .box-container .box-header .box-title,.error-box .box-container .box-header .box-title,.warn-box .box-container .box-header .box-title,.info-box .box-container .box-header .box-title{font-size:13px;font-weight:700}.admonition-box .box-container .box-icon,.error-box .box-container .box-icon,.warn-box .box-container .box-icon,.info-box .box-container .box-icon{align-self:flex-start;height:24px}.admonition-box .box-container .box-content,.error-box .box-container .box-content,.warn-box .box-container .box-content,.info-box .box-container .box-content{margin:0 4px 0 33px;line-height:1.4}.admonition-box .box-container .box-content a,.error-box .box-container .box-content a,.warn-box .box-container .box-content a,.info-box .box-container .box-content a{color:var(--admonition-box-link-color)}.admonition-box .box-container .box-content ul,.error-box .box-container .box-content ul,.warn-box .box-container .box-content ul,.info-box .box-container .box-content ul{padding-inline-start:17px;margin-block-start:0px;margin-block-end:0px}.admonition-box .box-container.titleless,.error-box .box-container.titleless,.warn-box .box-container.titleless,.info-box .box-container.titleless{padding:.5rem .8rem .4rem .5rem;flex-direction:row;align-items:center;margin:0}.admonition-box .box-container.titleless .box-content,.error-box .box-container.titleless .box-content,.warn-box .box-container.titleless .box-content,.info-box .box-container.titleless .box-content{margin:0}.info-box{border:1px solid var(--admonition-box-info-border-color);background-color:var(--admonition-box-info-background-color)}.info-box .box-icon:before{content:var(--info-icon-content);color:var(--info-icon-color)}.warn-box{border:1px solid var(--admonition-box-warn-border-color);background-color:var(--admonition-box-warn-background-color)}.warn-box .box-icon:before{content:var(--warn-icon-content);color:var(--warn-icon-color)}.error-box{border:1px solid var(--admonition-box-error-border-color);background-color:var(--admonition-box-error-background-color)}.error-box .box-icon:before{content:var(--error-icon-content);color:var(--error-icon-color)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6703
|
+
}
|
|
6704
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BoxComponent, decorators: [{
|
|
6705
|
+
type: Component,
|
|
6706
|
+
args: [{ selector: "app-box", encapsulation: ViewEncapsulation.None, template: "<div [class.info-box]=\"type() === 'info'\" [class.warn-box]=\"type() === 'warn'\" [class.error-box]=\"type() === 'error'\">\n <div class=\"box-container\" [class.titleless]=\"!title()\">\n @if (title()) {\n <div class=\"box-header\">\n <div class=\"box-icon\"></div>\n <div class=\"box-title\">{{ title() }}</div>\n </div>\n } @else {\n <div class=\"box-icon\"></div>\n }\n <div class=\"box-content\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: [".admonition-icon,.error-box .box-icon:before,.warn-box .box-icon:before,.info-box .box-icon:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal}.admonition-icon,.error-box .box-icon:before,.warn-box .box-icon:before,.info-box .box-icon:before{margin-right:8px}.admonition-box,.error-box,.warn-box,.info-box{border-radius:4px;font-size:12px;width:fit-content;display:flex;align-items:center;color:var(--admonition-box-font-color);line-height:normal}.admonition-box .box-container,.error-box .box-container,.warn-box .box-container,.info-box .box-container{padding:.5rem .8rem .5rem .5rem;display:flex;flex-direction:column}.admonition-box .box-container .box-header,.error-box .box-container .box-header,.warn-box .box-container .box-header,.info-box .box-container .box-header{display:flex;align-items:center;margin-bottom:4px}.admonition-box .box-container .box-header .box-title,.error-box .box-container .box-header .box-title,.warn-box .box-container .box-header .box-title,.info-box .box-container .box-header .box-title{font-size:13px;font-weight:700}.admonition-box .box-container .box-icon,.error-box .box-container .box-icon,.warn-box .box-container .box-icon,.info-box .box-container .box-icon{align-self:flex-start;height:24px}.admonition-box .box-container .box-content,.error-box .box-container .box-content,.warn-box .box-container .box-content,.info-box .box-container .box-content{margin:0 4px 0 33px;line-height:1.4}.admonition-box .box-container .box-content a,.error-box .box-container .box-content a,.warn-box .box-container .box-content a,.info-box .box-container .box-content a{color:var(--admonition-box-link-color)}.admonition-box .box-container .box-content ul,.error-box .box-container .box-content ul,.warn-box .box-container .box-content ul,.info-box .box-container .box-content ul{padding-inline-start:17px;margin-block-start:0px;margin-block-end:0px}.admonition-box .box-container.titleless,.error-box .box-container.titleless,.warn-box .box-container.titleless,.info-box .box-container.titleless{padding:.5rem .8rem .4rem .5rem;flex-direction:row;align-items:center;margin:0}.admonition-box .box-container.titleless .box-content,.error-box .box-container.titleless .box-content,.warn-box .box-container.titleless .box-content,.info-box .box-container.titleless .box-content{margin:0}.info-box{border:1px solid var(--admonition-box-info-border-color);background-color:var(--admonition-box-info-background-color)}.info-box .box-icon:before{content:var(--info-icon-content);color:var(--info-icon-color)}.warn-box{border:1px solid var(--admonition-box-warn-border-color);background-color:var(--admonition-box-warn-background-color)}.warn-box .box-icon:before{content:var(--warn-icon-content);color:var(--warn-icon-color)}.error-box{border:1px solid var(--admonition-box-error-border-color);background-color:var(--admonition-box-error-background-color)}.error-box .box-icon:before{content:var(--error-icon-content);color:var(--error-icon-color)}\n"] }]
|
|
6707
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
|
|
6708
|
+
|
|
6695
6709
|
class CreateFeatureFlagComponent extends BaseComponent {
|
|
6696
6710
|
constructor() {
|
|
6697
6711
|
super(...arguments);
|
|
@@ -7057,7 +7071,7 @@ class CreateFeatureFlagComponent extends BaseComponent {
|
|
|
7057
7071
|
return getPredefinedVariationColorIndex(this.formGroup.controls.settingType.value, getRawPredefinedVariationValue(row.controls.value), index);
|
|
7058
7072
|
}
|
|
7059
7073
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CreateFeatureFlagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
7060
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CreateFeatureFlagComponent, isStandalone: true, selector: "app-create-feature-flag", inputs: { hideCancelButton: { classPropertyName: "hideCancelButton", publicName: "hideCancelButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, targetSectionHeader: { classPropertyName: "targetSectionHeader", publicName: "targetSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, targetSectionDescription: { classPropertyName: "targetSectionDescription", publicName: "targetSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, flagSectionHeader: { classPropertyName: "flagSectionHeader", publicName: "flagSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, flagSectionDescription: { classPropertyName: "flagSectionDescription", publicName: "flagSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, linkSectionHeader: { classPropertyName: "linkSectionHeader", publicName: "linkSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, linkSectionDescription: { classPropertyName: "linkSectionDescription", publicName: "linkSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, hideLinkSection: { classPropertyName: "hideLinkSection", publicName: "hideLinkSection", isSignal: true, isRequired: false, transformFunction: null }, presetProductAndConfig: { classPropertyName: "presetProductAndConfig", publicName: "presetProductAndConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createInitiated: "createInitiated", resizeRequested: "resizeRequested", cancelInitiated: "cancelInitiated", selectDropdownPanelChangedReqested: "selectDropdownPanelChangedReqested" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n <div>\n <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n @if (targetSectionDescription()) {\n <p>{{ targetSectionDescription() }}</p>\n }\n @if (this.presetProductAndConfig()) {\n <p>\n Pre selected product\n <b>{{ this.presetProductAndConfig()!.productName }}</b>\n </p>\n <p>\n Pre selected config\n <b>{{ this.presetProductAndConfig()!.configName }}</b>\n </p>\n }\n <app-product-select\n name=\"productId\"\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n @if (formGroup.controls.productId.value) {\n <app-config-select\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n [productId]=\"formGroup.controls.productId.value\"\n [valueFormControl]=\"formGroup.controls.configId\"\n [customDropdown]=\"true\" />\n }\n\n <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n @if (flagSectionDescription()) {\n <p>{{ flagSectionDescription() }}</p>\n }\n @if (loading) {\n <app-loader />\n } @else {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Type</mat-label>\n <mat-select placeholder=\"Type\" formControlName=\"settingType\" [panelClass]=\"'custom-dropdown-below'\">\n <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n </mat-select>\n </mat-form-field>\n <mat-form-field class=\"form-field name\" appearance=\"outline\">\n <mat-label>Name for humans</mat-label>\n <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n <mat-hint>A friendly name that best describes your setting.</mat-hint>\n @if (formGroup.controls.name.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field key\" appearance=\"outline\">\n <mat-label>Key for programs</mat-label>\n <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n <mat-hint>Your applications will access your setting via this key.</mat-hint>\n @if (formGroup.controls.key.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field hint\" appearance=\"outline\">\n <mat-label>Hint or description (Optional)</mat-label>\n <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n <mat-hint>A description to help you remember the purpose of your setting.</mat-hint>\n @if (formGroup.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n\n <div class=\"init-value-section\">\n @if (configEvaluationVersion === EvaluationVersion.V2) {\n <div class=\"header small\">Variations</div>\n <div class=\"variations\">\n <div class=\"variation-header\">\n This {{ settingTypeText }} allows\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"useVariations\">\n <mat-option [value]=\"false\">free-form values</mat-option>\n <mat-option [value]=\"true\">predefined variations only</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n @if (formGroup.controls.useVariations.value) {\n <div class=\"predef-var-table-scroll\">\n <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"small-form-field suffixed\">\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <input matInput [formControl]=\"row.controls.hint\" />\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>\n {{ dataSource.data.length }} / {{ maxPredefinedVariations }}\n </th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Remove item'\n : 'At least 2 predefined variations should be set.'\n \">\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n </table>\n </div>\n\n @if (formGroup.controls.predefinedVariations.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n <div class=\"add-variation\">\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n </div>\n }\n }\n </div>\n }\n\n <div class=\"header small\">Initial values</div>\n <div class=\"initial-value-first-line\">\n The initial value\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"initialValuesPerEnvironment\">\n <mat-option [value]=\"false\">in all environments</mat-option>\n <mat-option [value]=\"true\">per environment</mat-option>\n </mat-select>\n </mat-form-field>\n will be set to\n </div>\n @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n @if (formGroup.controls.useVariations.value) {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n </div>\n } @else {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n </div>\n }\n }\n\n @if (formGroup.controls.initialValuesPerEnvironment.value) {\n @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n <div formArrayName=\"initialValues\">\n <div class=\"value-field\" [formGroupName]=\"index\">\n @if (formGroup.controls.useVariations.value) {\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n }\n <div class=\"environment\">\n in\n <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n {{ initialValue.controls.environmentName.value }}\n </strong>\n </div>\n </div>\n </div>\n }\n }\n </div>\n }\n\n @if (!hideLinkSection()) {\n <div class=\"header\">\n 3. {{ linkSectionHeader() ? linkSectionHeader() : \"Select which environment should we link to this card\" }}\n </div>\n @if (linkSectionDescription()) {\n <p>{{ linkSectionDescription() }}</p>\n }\n @if (formGroup.controls.productId.value) {\n <app-environment-select\n [basicAuthUsername]=\"basicAuthUsername()\"\n [productId]=\"formGroup.controls.productId.value\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [valueFormControl]=\"formGroup.controls.environmentId\"\n [customDropdown]=\"true\" />\n }\n }\n </div>\n @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n <div class=\"error\">\n <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n </div>\n }\n <div class=\"buttons\">\n <button mat-raised-button color=\"primary\" type=\"submit\">\n {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n </button>\n @if (!hideCancelButton()) {\n <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n </button>\n }\n </div>\n </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingTypeEnum.Int) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Double) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Boolean) {\n <div class=\"toggle\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select [formControl]=\"formControl\">\n @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n <mat-option [value]=\"idx\">\n @if (predefinedVariation.controls.name.value) {\n {{ predefinedVariation.controls.name.value }}\n } @else {\n {{ predefinedVariation.controls.valueForComparison.value }}\n }\n </mat-option>\n }\n </mat-select>\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:8px}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"] }, { kind: "component", type: ConfigSelectComponent, selector: "app-config-select", inputs: ["valueFormControl", "productId", "preSelectedConfigId"] }, { kind: "component", type: EnvironmentSelectComponent, selector: "app-environment-select", inputs: ["valueFormControl", "productId"] }, { 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { 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: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }] }); }
|
|
7074
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CreateFeatureFlagComponent, isStandalone: true, selector: "app-create-feature-flag", inputs: { hideCancelButton: { classPropertyName: "hideCancelButton", publicName: "hideCancelButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, targetSectionHeader: { classPropertyName: "targetSectionHeader", publicName: "targetSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, targetSectionDescription: { classPropertyName: "targetSectionDescription", publicName: "targetSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, flagSectionHeader: { classPropertyName: "flagSectionHeader", publicName: "flagSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, flagSectionDescription: { classPropertyName: "flagSectionDescription", publicName: "flagSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, linkSectionHeader: { classPropertyName: "linkSectionHeader", publicName: "linkSectionHeader", isSignal: true, isRequired: false, transformFunction: null }, linkSectionDescription: { classPropertyName: "linkSectionDescription", publicName: "linkSectionDescription", isSignal: true, isRequired: false, transformFunction: null }, hideLinkSection: { classPropertyName: "hideLinkSection", publicName: "hideLinkSection", isSignal: true, isRequired: false, transformFunction: null }, presetProductAndConfig: { classPropertyName: "presetProductAndConfig", publicName: "presetProductAndConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createInitiated: "createInitiated", resizeRequested: "resizeRequested", cancelInitiated: "cancelInitiated", selectDropdownPanelChangedReqested: "selectDropdownPanelChangedReqested" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n <div>\n <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n @if (targetSectionDescription()) {\n <p>{{ targetSectionDescription() }}</p>\n }\n @if (this.presetProductAndConfig()) {\n <p>\n Pre selected product\n <b>{{ this.presetProductAndConfig()!.productName }}</b>\n </p>\n <p>\n Pre selected config\n <b>{{ this.presetProductAndConfig()!.configName }}</b>\n </p>\n }\n <app-product-select\n name=\"productId\"\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n @if (formGroup.controls.productId.value) {\n <app-config-select\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n [productId]=\"formGroup.controls.productId.value\"\n [valueFormControl]=\"formGroup.controls.configId\"\n [customDropdown]=\"true\" />\n }\n\n <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n @if (flagSectionDescription()) {\n <p>{{ flagSectionDescription() }}</p>\n }\n @if (loading) {\n <app-loader />\n } @else {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Type</mat-label>\n <mat-select placeholder=\"Type\" formControlName=\"settingType\" [panelClass]=\"'custom-dropdown-below'\">\n <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n </mat-select>\n </mat-form-field>\n <mat-form-field class=\"form-field name\" appearance=\"outline\">\n <mat-label>Name for humans</mat-label>\n <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n <mat-hint>A friendly name that best describes your setting.</mat-hint>\n @if (formGroup.controls.name.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field key\" appearance=\"outline\">\n <mat-label>Key for programs</mat-label>\n <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n <mat-hint>Your applications will access your setting via this key.</mat-hint>\n @if (formGroup.controls.key.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field hint\" appearance=\"outline\">\n <mat-label>Hint or description (Optional)</mat-label>\n <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n <mat-hint>A description to help you remember the purpose of your setting.</mat-hint>\n @if (formGroup.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n\n <div class=\"init-value-section\">\n @if (configEvaluationVersion === EvaluationVersion.V2) {\n <h3>How do you want to set values?</h3>\n <div class=\"value-mode-question\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"useVariations\" class=\"choose\">\n <mat-option [value]=\"false\">\n {{\n formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n ? \"use an ON/OFF toggle\"\n : \"enter free-form values\"\n }}\n </mat-option>\n <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n </mat-select>\n </mat-form-field>\n <a href=\"https://configcat.com/docs/advanced/predefined-variations\" class=\"readmore\" target=\"_blank\">\n <mat-icon color=\"primary\" matTooltip=\"Click to read more about value-modes.\">info</mat-icon>\n </a>\n </div>\n @if (formGroup.controls.useVariations.value) {\n <div class=\"header small\">Variations</div>\n <div class=\"variations\">\n <div class=\"predef-var-table-scroll\">\n <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"small-form-field suffixed\">\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <input matInput [formControl]=\"row.controls.hint\" />\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>\n {{ dataSource.data.length }} / {{ maxPredefinedVariations }}\n </th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Remove item'\n : 'At least 2 predefined variations should be set.'\n \">\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n </table>\n </div>\n\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n <div class=\"add-variation\">\n @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n } @else {\n <app-box type=\"info\" class=\"bool-variation-info\">\n For more variations, create a flag of another type.\n <a\n href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Read more\n </a>\n about setting types.\n </app-box>\n }\n </div>\n </div>\n }\n }\n\n <div class=\"header small\">Initial values</div>\n <div class=\"initial-value-first-line\">\n The initial value\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"initialValuesPerEnvironment\">\n <mat-option [value]=\"false\">in all environments</mat-option>\n <mat-option [value]=\"true\">per environment</mat-option>\n </mat-select>\n </mat-form-field>\n will be set to\n </div>\n @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n @if (formGroup.controls.useVariations.value) {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n </div>\n } @else {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n </div>\n }\n }\n\n @if (formGroup.controls.initialValuesPerEnvironment.value) {\n @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n <div formArrayName=\"initialValues\">\n <div class=\"value-field\" [formGroupName]=\"index\">\n @if (formGroup.controls.useVariations.value) {\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n }\n <div class=\"environment\">\n in\n <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n {{ initialValue.controls.environmentName.value }}\n </strong>\n </div>\n </div>\n </div>\n }\n }\n </div>\n }\n\n @if (!hideLinkSection()) {\n <div class=\"header\">\n 3. {{ linkSectionHeader() ? linkSectionHeader() : \"Select which environment should we link to this card\" }}\n </div>\n @if (linkSectionDescription()) {\n <p>{{ linkSectionDescription() }}</p>\n }\n @if (formGroup.controls.productId.value) {\n <app-environment-select\n [basicAuthUsername]=\"basicAuthUsername()\"\n [productId]=\"formGroup.controls.productId.value\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [valueFormControl]=\"formGroup.controls.environmentId\"\n [customDropdown]=\"true\" />\n }\n }\n </div>\n @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n <div class=\"error\">\n <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n </div>\n }\n <div class=\"buttons\">\n <button mat-raised-button color=\"primary\" type=\"submit\">\n {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n </button>\n @if (!hideCancelButton()) {\n <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n </button>\n }\n </div>\n </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingTypeEnum.Int) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Double) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Boolean) {\n <div class=\"toggle\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select [formControl]=\"formControl\">\n @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n <mat-option [value]=\"idx\">\n @if (predefinedVariation.controls.name.value) {\n {{ predefinedVariation.controls.name.value }}\n } @else {\n {{ predefinedVariation.controls.valueForComparison.value }}\n }\n </mat-option>\n }\n </mat-select>\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a mat-icon{color:var(--info-icon-color)}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[focus]", inputs: ["isFocused"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }, { kind: "component", type: ProductSelectComponent, selector: "app-product-select", inputs: ["valueFormControl", "preSelectedProductId"] }, { kind: "component", type: ConfigSelectComponent, selector: "app-config-select", inputs: ["valueFormControl", "productId", "preSelectedConfigId"] }, { kind: "component", type: EnvironmentSelectComponent, selector: "app-environment-select", inputs: ["valueFormControl", "productId"] }, { 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: i2.RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { 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: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["skipTimeOut"] }, { kind: "component", type: BoxComponent, selector: "app-box", inputs: ["type", "title"] }] }); }
|
|
7061
7075
|
}
|
|
7062
7076
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CreateFeatureFlagComponent, decorators: [{
|
|
7063
7077
|
type: Component,
|
|
@@ -7094,7 +7108,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
7094
7108
|
MatSuffix,
|
|
7095
7109
|
MatIconButton,
|
|
7096
7110
|
LoaderComponent,
|
|
7097
|
-
], template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n <div>\n <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n @if (targetSectionDescription()) {\n <p>{{ targetSectionDescription() }}</p>\n }\n @if (this.presetProductAndConfig()) {\n <p>\n Pre selected product\n <b>{{ this.presetProductAndConfig()!.productName }}</b>\n </p>\n <p>\n Pre selected config\n <b>{{ this.presetProductAndConfig()!.configName }}</b>\n </p>\n }\n <app-product-select\n name=\"productId\"\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n @if (formGroup.controls.productId.value) {\n <app-config-select\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n [productId]=\"formGroup.controls.productId.value\"\n [valueFormControl]=\"formGroup.controls.configId\"\n [customDropdown]=\"true\" />\n }\n\n <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n @if (flagSectionDescription()) {\n <p>{{ flagSectionDescription() }}</p>\n }\n @if (loading) {\n <app-loader />\n } @else {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Type</mat-label>\n <mat-select placeholder=\"Type\" formControlName=\"settingType\" [panelClass]=\"'custom-dropdown-below'\">\n <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n </mat-select>\n </mat-form-field>\n <mat-form-field class=\"form-field name\" appearance=\"outline\">\n <mat-label>Name for humans</mat-label>\n <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n <mat-hint>A friendly name that best describes your setting.</mat-hint>\n @if (formGroup.controls.name.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field key\" appearance=\"outline\">\n <mat-label>Key for programs</mat-label>\n <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n <mat-hint>Your applications will access your setting via this key.</mat-hint>\n @if (formGroup.controls.key.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field hint\" appearance=\"outline\">\n <mat-label>Hint or description (Optional)</mat-label>\n <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n <mat-hint>A description to help you remember the purpose of your setting.</mat-hint>\n @if (formGroup.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n\n <div class=\"init-value-section\">\n @if (configEvaluationVersion === EvaluationVersion.V2) {\n <div class=\"header small\">Variations</div>\n <div class=\"variations\">\n <div class=\"variation-header\">\n This {{ settingTypeText }} allows\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"useVariations\">\n <mat-option [value]=\"false\">free-form values</mat-option>\n <mat-option [value]=\"true\">predefined variations only</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n @if (formGroup.controls.useVariations.value) {\n <div class=\"predef-var-table-scroll\">\n <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"small-form-field suffixed\">\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <input matInput [formControl]=\"row.controls.hint\" />\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>\n {{ dataSource.data.length }} / {{ maxPredefinedVariations }}\n </th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Remove item'\n : 'At least 2 predefined variations should be set.'\n \">\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n </table>\n </div>\n\n @if (formGroup.controls.predefinedVariations.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n <div class=\"add-variation\">\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n </div>\n }\n }\n </div>\n }\n\n <div class=\"header small\">Initial values</div>\n <div class=\"initial-value-first-line\">\n The initial value\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"initialValuesPerEnvironment\">\n <mat-option [value]=\"false\">in all environments</mat-option>\n <mat-option [value]=\"true\">per environment</mat-option>\n </mat-select>\n </mat-form-field>\n will be set to\n </div>\n @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n @if (formGroup.controls.useVariations.value) {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n </div>\n } @else {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n </div>\n }\n }\n\n @if (formGroup.controls.initialValuesPerEnvironment.value) {\n @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n <div formArrayName=\"initialValues\">\n <div class=\"value-field\" [formGroupName]=\"index\">\n @if (formGroup.controls.useVariations.value) {\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n }\n <div class=\"environment\">\n in\n <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n {{ initialValue.controls.environmentName.value }}\n </strong>\n </div>\n </div>\n </div>\n }\n }\n </div>\n }\n\n @if (!hideLinkSection()) {\n <div class=\"header\">\n 3. {{ linkSectionHeader() ? linkSectionHeader() : \"Select which environment should we link to this card\" }}\n </div>\n @if (linkSectionDescription()) {\n <p>{{ linkSectionDescription() }}</p>\n }\n @if (formGroup.controls.productId.value) {\n <app-environment-select\n [basicAuthUsername]=\"basicAuthUsername()\"\n [productId]=\"formGroup.controls.productId.value\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [valueFormControl]=\"formGroup.controls.environmentId\"\n [customDropdown]=\"true\" />\n }\n }\n </div>\n @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n <div class=\"error\">\n <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n </div>\n }\n <div class=\"buttons\">\n <button mat-raised-button color=\"primary\" type=\"submit\">\n {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n </button>\n @if (!hideCancelButton()) {\n <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n </button>\n }\n </div>\n </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingTypeEnum.Int) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Double) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Boolean) {\n <div class=\"toggle\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select [formControl]=\"formControl\">\n @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n <mat-option [value]=\"idx\">\n @if (predefinedVariation.controls.name.value) {\n {{ predefinedVariation.controls.name.value }}\n } @else {\n {{ predefinedVariation.controls.valueForComparison.value }}\n }\n </mat-option>\n }\n </mat-select>\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:8px}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"] }]
|
|
7111
|
+
BoxComponent,
|
|
7112
|
+
], template: "<div class=\"container\">\n <form class=\"form\" [formGroup]=\"formGroup\" (ngSubmit)=\"create()\">\n <div>\n <div class=\"header\">1. {{ targetSectionHeader() ? targetSectionHeader() : \"Select Product and Config\" }}</div>\n @if (targetSectionDescription()) {\n <p>{{ targetSectionDescription() }}</p>\n }\n @if (this.presetProductAndConfig()) {\n <p>\n Pre selected product\n <b>{{ this.presetProductAndConfig()!.productName }}</b>\n </p>\n <p>\n Pre selected config\n <b>{{ this.presetProductAndConfig()!.configName }}</b>\n </p>\n }\n <app-product-select\n name=\"productId\"\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedProductId]=\"this.presetProductAndConfig()?.productId\"\n [valueFormControl]=\"formGroup.controls.productId\"\n [customDropdown]=\"true\" />\n @if (formGroup.controls.productId.value) {\n <app-config-select\n [hidden]=\"this.presetProductAndConfig()\"\n [basicAuthUsername]=\"basicAuthUsername()\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [preSelectedConfigId]=\"this.presetProductAndConfig()?.configId\"\n [productId]=\"formGroup.controls.productId.value\"\n [valueFormControl]=\"formGroup.controls.configId\"\n [customDropdown]=\"true\" />\n }\n\n <div class=\"header\">2. {{ flagSectionHeader() ? flagSectionHeader() : \"Setup Feature Flag\" }}</div>\n @if (flagSectionDescription()) {\n <p>{{ flagSectionDescription() }}</p>\n }\n @if (loading) {\n <app-loader />\n } @else {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Type</mat-label>\n <mat-select placeholder=\"Type\" formControlName=\"settingType\" [panelClass]=\"'custom-dropdown-below'\">\n <mat-option [value]=\"SettingTypeEnum.Boolean\">Feature Flag (bool)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.String\">Text (string)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Int\">Whole Number (integer)</mat-option>\n <mat-option [value]=\"SettingTypeEnum.Double\">Decimal Number (double)</mat-option>\n </mat-select>\n </mat-form-field>\n <mat-form-field class=\"form-field name\" appearance=\"outline\">\n <mat-label>Name for humans</mat-label>\n <input matInput placeholder=\"My awesome feature\" formControlName=\"name\" />\n <mat-hint>A friendly name that best describes your setting.</mat-hint>\n @if (formGroup.controls.name.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field key\" appearance=\"outline\">\n <mat-label>Key for programs</mat-label>\n <input matInput placeholder=\"isMyAwesomeFeatureEnabled\" formControlName=\"key\" />\n <mat-hint>Your applications will access your setting via this key.</mat-hint>\n @if (formGroup.controls.key.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.key) }}\n </mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"form-field hint\" appearance=\"outline\">\n <mat-label>Hint or description (Optional)</mat-label>\n <textarea matInput placeholder=\"Hint or description (Optional)\" formControlName=\"hint\"></textarea>\n <mat-hint>A description to help you remember the purpose of your setting.</mat-hint>\n @if (formGroup.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n\n <div class=\"init-value-section\">\n @if (configEvaluationVersion === EvaluationVersion.V2) {\n <h3>How do you want to set values?</h3>\n <div class=\"value-mode-question\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field value-mode-select\" subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"useVariations\" class=\"choose\">\n <mat-option [value]=\"false\">\n {{\n formGroup.controls.settingType.value === SettingTypeEnum.Boolean\n ? \"use an ON/OFF toggle\"\n : \"enter free-form values\"\n }}\n </mat-option>\n <mat-option [value]=\"true\">choose from predefined variations</mat-option>\n </mat-select>\n </mat-form-field>\n <a href=\"https://configcat.com/docs/advanced/predefined-variations\" class=\"readmore\" target=\"_blank\">\n <mat-icon color=\"primary\" matTooltip=\"Click to read more about value-modes.\">info</mat-icon>\n </a>\n </div>\n @if (formGroup.controls.useVariations.value) {\n <div class=\"header small\">Variations</div>\n <div class=\"variations\">\n <div class=\"predef-var-table-scroll\">\n <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"color\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row\">\n <span [class]=\"'variation-indicator variation-color-' + getColorIndex(row, i)\"></span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"value\">\n <th *matHeaderCellDef mat-header-cell>Served value *</th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.Boolean) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.boolValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.String) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.stringValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Int) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.intValue,\n setFocus: i === focusIndex,\n }\" />\n }\n @case (SettingTypeEnum.Double) {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{\n formControl: row.controls.value.controls.doubleValue,\n setFocus: i === focusIndex,\n }\" />\n }\n }\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef mat-header-cell>Display name (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <div class=\"predefined-component\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field\">\n <input\n matInput\n [formControl]=\"row.controls.name\"\n [placeholder]=\"row.controls.valueForComparison.value\" />\n @if (row.controls.name.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(row.controls.name) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"hint\">\n <th *matHeaderCellDef mat-header-cell>Hint (optional)</th>\n <td *matCellDef=\"let row\" mat-cell class=\"row align-top\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"small-form-field suffixed\">\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandHint(row.controls.hint)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <input matInput [formControl]=\"row.controls.hint\" />\n @if (row.controls.hint.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(row.controls.hint) }}\n </mat-error>\n }\n </mat-form-field>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"actions\">\n <th *matHeaderCellDef mat-header-cell>\n {{ dataSource.data.length }} / {{ maxPredefinedVariations }}\n </th>\n <td *matCellDef=\"let row; let i = index\" mat-cell class=\"row align-top\">\n <div\n [matTooltip]=\"\n formGroup.controls.predefinedVariations.controls.length > 2\n ? 'Remove item'\n : 'At least 2 predefined variations should be set.'\n \">\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"formGroup.controls.predefinedVariations.controls.length <= 2\"\n (click)=\"removeVariation(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n </table>\n </div>\n\n @if (\n formGroup.controls.predefinedVariations.invalid &&\n !!FormHelper.getErrorMessage(formGroup.controls.predefinedVariations)\n ) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup.controls.predefinedVariations) }}\n </mat-error>\n }\n <div class=\"add-variation\">\n @if (this.formGroup.controls.settingType.value !== SettingTypeEnum.Boolean) {\n <button\n type=\"button\"\n mat-stroked-button\n color=\"primary\"\n [matTooltip]=\"'Maximum ' + maxPredefinedVariations + ' predefined variations can be added.'\"\n [matTooltipDisabled]=\"dataSource.data.length < maxPredefinedVariations\"\n [disabled]=\"dataSource.data.length >= maxPredefinedVariations\"\n (click)=\"addVariation()\">\n <mat-icon>add</mat-icon>\n Add variation\n </button>\n } @else {\n <app-box type=\"info\" class=\"bool-variation-info\">\n For more variations, create a flag of another type.\n <a\n href=\"https://configcat.com/docs/main-concepts/#about-setting-types\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Read more\n </a>\n about setting types.\n </app-box>\n }\n </div>\n </div>\n }\n }\n\n <div class=\"header small\">Initial values</div>\n <div class=\"initial-value-first-line\">\n The initial value\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field initial-value-environment-type\"\n subscriptSizing=\"dynamic\">\n <mat-select formControlName=\"initialValuesPerEnvironment\">\n <mat-option [value]=\"false\">in all environments</mat-option>\n <mat-option [value]=\"true\">per environment</mat-option>\n </mat-select>\n </mat-form-field>\n will be set to\n </div>\n @if (!formGroup.controls.initialValuesPerEnvironment.value) {\n @if (formGroup.controls.useVariations.value) {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAllVariationIndex }\" />\n </div>\n } @else {\n <div class=\"value-field all\">\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: formGroup.controls.initialValueForAll }\" />\n </div>\n }\n }\n\n @if (formGroup.controls.initialValuesPerEnvironment.value) {\n @for (initialValue of formGroup.controls.initialValues.controls; track $index; let index = $index) {\n <div formArrayName=\"initialValues\">\n <div class=\"value-field\" [formGroupName]=\"index\">\n @if (formGroup.controls.useVariations.value) {\n <ng-container\n [ngTemplateOutlet]=\"predefinedVariationTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.predefinedVariationIndex }\" />\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"settingValueTemplate\"\n [ngTemplateOutletContext]=\"{ formControl: initialValue.controls.settingValue }\" />\n }\n <div class=\"environment\">\n in\n <strong [matTooltip]=\"initialValue.controls.environmentName.value\">\n {{ initialValue.controls.environmentName.value }}\n </strong>\n </div>\n </div>\n </div>\n }\n }\n </div>\n }\n\n @if (!hideLinkSection()) {\n <div class=\"header\">\n 3. {{ linkSectionHeader() ? linkSectionHeader() : \"Select which environment should we link to this card\" }}\n </div>\n @if (linkSectionDescription()) {\n <p>{{ linkSectionDescription() }}</p>\n }\n @if (formGroup.controls.productId.value) {\n <app-environment-select\n [basicAuthUsername]=\"basicAuthUsername()\"\n [productId]=\"formGroup.controls.productId.value\"\n [basicAuthPassword]=\"basicAuthPassword()\"\n [valueFormControl]=\"formGroup.controls.environmentId\"\n [customDropdown]=\"true\" />\n }\n }\n </div>\n @if (formGroup.errors && formGroup.errors[\"serverSide\"]) {\n <div class=\"error\">\n <span>{{ formGroup.errors[\"serverSide\"] }}</span>\n </div>\n }\n <div class=\"buttons\">\n <button mat-raised-button color=\"primary\" type=\"submit\">\n {{ createButtonLabel() ? createButtonLabel() : \"Create\" }}\n </button>\n @if (!hideCancelButton()) {\n <button mat-stroked-button type=\"button\" (click)=\"cancel()\">\n {{ cancelButtonLabel() ? cancelButtonLabel() : \"Cancel\" }}\n </button>\n }\n </div>\n </form>\n</div>\n\n<ng-template #settingValueTemplate let-formControl=\"formControl\" let-setFocus=\"setFocus\">\n @switch (formGroup.controls.settingType.value) {\n @case (SettingTypeEnum.String) {\n <mat-form-field class=\"small-form-field text suffixed\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n placeholder=\"Add text ...\"\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandText(formControl)\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n }\n @case (SettingTypeEnum.Int) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n appDigitOnly\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\"\n [digitOnlyAllowNegatives]=\"true\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Double) {\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (formControl.invalid) {\n <mat-error class=\"small-error\">\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n <input\n matInput\n type=\"number\"\n required\n name=\"index\"\n inputDisplayNormalizer\n focus\n [isFocused]=\"setFocus\"\n [formControl]=\"formControl\" />\n </mat-form-field>\n }\n @case (SettingTypeEnum.Boolean) {\n <div class=\"toggle\">\n <label class=\"switch\">\n <input type=\"checkbox\" name=\"index\" [formControl]=\"formControl\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n }\n }\n</ng-template>\n\n<ng-template #predefinedVariationTemplate let-formControl=\"formControl\">\n <mat-form-field class=\"small-form-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select [formControl]=\"formControl\">\n @for (predefinedVariation of formGroup.controls.predefinedVariations.controls; let idx = $index; track $index) {\n <mat-option [value]=\"idx\">\n @if (predefinedVariation.controls.name.value) {\n {{ predefinedVariation.controls.name.value }}\n } @else {\n {{ predefinedVariation.controls.valueForComparison.value }}\n }\n </mat-option>\n }\n </mat-select>\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n</ng-template>\n", styles: [".container{margin:8px 8px 16px}.container .form>*{width:100%}.container .form>* .form-field{width:100%;padding-bottom:8px}.container .form>* .form-field.key{margin-bottom:16px}.container .form>* .form-field.name{margin-bottom:16px}.container .form>* .initial-value-first-line{align-items:center;min-height:34px;margin-bottom:8px}.container .form>* .initial-value-first-line .initial-value-environment-type{margin:0 6px;min-width:160px}.container .form>* .value-field{display:flex;align-items:center;width:100%}.container .form>* .value-field.all{display:inline-flex;margin-left:6px}.container .form>* .value-field.all mat-form-field{min-width:200px}.container .form>* .value-field.all mat-form-field.text{flex-grow:1;width:100%;min-width:100%}.container .form>* .value-field:not(.all){margin-bottom:8px}.container .form>* .value-field:not(.all) mat-form-field{min-width:200px}.container .form>* .value-field:not(.all) mat-form-field.text{min-width:330px}.container .form>* .value-field .environment{margin-left:1em;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden}.container .form>* .init-value-section{margin-bottom:16px}.container .form>* .init-value-section .predefined-component{padding:8px 0}.container .form>* .init-value-section .small-error{max-width:180px}.container .form>* .init-value-section .readmore{margin-left:8px}.container .form>* .init-value-section .value-mode-question{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a{display:flex;align-items:center}.container .form>* .init-value-section .value-mode-question a mat-icon{color:var(--info-icon-color)}.container .form>* .init-value-section .value-mode-question .value-mode-select{min-width:240px}.container .form>* .init-value-section .variations{display:flex;flex-direction:column}.container .form>* .init-value-section .variations .mat-column-color{padding-right:0!important}.container .form>* .init-value-section .variations .variation-header{margin-bottom:8px}.container .form>* .init-value-section .variations .add-variation{margin-top:12px}.container .form>* .init-value-section .variations .toggle{margin-left:4px}.container .form>* .init-value-section .variations .predef-var-table-scroll{display:block;overflow-x:auto}.container .form>* .init-value-section .variations .predef-var-table-scroll .mat-mdc-table{min-width:100%}.container .error{color:var(--flag-validation-error);margin:0 5px 5px}.container .header{font-size:18px;margin-top:16px;margin-bottom:16px}.container .header.small{font-size:16px;margin-top:16px;margin-bottom:16px}.buttons{margin-bottom:16px}.buttons>*{margin-right:16px}\n", ".switch{display:inline-flex;align-items:center;width:66px;height:30px}.switch input{display:none}.switch input:checked+.slider{background-color:var(--flag-bool-slider-on)}.switch input:checked+.slider:before{transform:translate(36px)}.switch input:checked+.slider:after{content:\"On\";padding-left:0;padding-right:12px}.switch .slider{display:flex;align-items:center;justify-content:center;cursor:pointer;width:66px;height:30px;background-color:var(--flag-bool-slider-off);transition:background-color .4s;border-radius:34px;position:relative}.switch .slider:before{content:\"\";position:absolute;left:4px;height:22px;width:22px;background-color:var(--flag-bool-slider-remaining);transition:transform .4s;border-radius:50%}.switch .slider:after{content:\"Off\";color:var(--flag-bool-slider-remaining);font-size:10px;font-family:Verdana,sans-serif;padding-right:0;padding-left:11px}\n"] }]
|
|
7098
7113
|
}], propDecorators: { hideCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCancelButton", required: false }] }], createButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createButtonLabel", required: false }] }], cancelButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonLabel", required: false }] }], targetSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSectionHeader", required: false }] }], targetSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSectionDescription", required: false }] }], flagSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagSectionHeader", required: false }] }], flagSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagSectionDescription", required: false }] }], linkSectionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkSectionHeader", required: false }] }], linkSectionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkSectionDescription", required: false }] }], hideLinkSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLinkSection", required: false }] }], presetProductAndConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetProductAndConfig", required: false }] }], createInitiated: [{ type: i0.Output, args: ["createInitiated"] }], resizeRequested: [{ type: i0.Output, args: ["resizeRequested"] }], cancelInitiated: [{ type: i0.Output, args: ["cancelInitiated"] }], selectDropdownPanelChangedReqested: [{ type: i0.Output, args: ["selectDropdownPanelChangedReqested"] }] } });
|
|
7099
7114
|
|
|
7100
7115
|
class CreateConfigComponent extends BaseComponent {
|