ng-configcat-publicapi-ui 5.3.13 → 5.3.14
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,7 +1,7 @@
|
|
|
1
1
|
import { OVERLAY_DEFAULT_CONFIG, Overlay } from '@angular/cdk/overlay';
|
|
2
2
|
import { DatePipe, NgClass, NgTemplateOutlet, SlicePipe, KeyValuePipe } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
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
|
+
import { inject, Injectable, Component, viewChild, DestroyRef, DOCUMENT, InjectionToken, HostListener, Directive, input, ElementRef, model, effect, output, forwardRef, ChangeDetectionStrategy, signal, viewChildren, linkedSignal, computed, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
|
|
5
5
|
import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
|
|
6
6
|
import { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
|
|
7
7
|
import { MAT_DATEPICKER_SCROLL_STRATEGY, MatDatepicker, MatDatepickerToggle, MatDatepickerInput } from '@angular/material/datepicker';
|
|
@@ -2955,6 +2955,7 @@ class ProductSelectComponent extends BaseSelectComponent {
|
|
|
2955
2955
|
this.valueFormControl = input.required(...(ngDevMode ? [{ debugName: "valueFormControl" }] : /* istanbul ignore next */ []));
|
|
2956
2956
|
this.preSelectedProductId = input(...(ngDevMode ? [undefined, { debugName: "preSelectedProductId" }] : /* istanbul ignore next */ []));
|
|
2957
2957
|
this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
|
|
2958
|
+
this.tooltips = viewChildren(MatTooltip, ...(ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []));
|
|
2958
2959
|
this.filteredProducts = linkedSignal(() => {
|
|
2959
2960
|
const filterText = this.filterText().trim().toLocaleLowerCase();
|
|
2960
2961
|
if (this.products.isLoading() || !this.products.hasValue()) {
|
|
@@ -2996,8 +2997,15 @@ class ProductSelectComponent extends BaseSelectComponent {
|
|
|
2996
2997
|
clearFilter() {
|
|
2997
2998
|
this.filterText.set("");
|
|
2998
2999
|
}
|
|
3000
|
+
onSelectOpenedChange(opened) {
|
|
3001
|
+
this.openChanged(opened);
|
|
3002
|
+
this.clearFilter();
|
|
3003
|
+
if (!opened) {
|
|
3004
|
+
this.tooltips().forEach(t => t.hide(0));
|
|
3005
|
+
}
|
|
3006
|
+
}
|
|
2999
3007
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ProductSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3000
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ProductSelectComponent, isStandalone: true, selector: "app-product-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, preSelectedProductId: { classPropertyName: "preSelectedProductId", publicName: "preSelectedProductId", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Product</mat-label>\n <mat-select\n placeholder=\"Product\"\n name=\"productValue\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"
|
|
3008
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ProductSelectComponent, isStandalone: true, selector: "app-product-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, preSelectedProductId: { classPropertyName: "preSelectedProductId", publicName: "preSelectedProductId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Product</mat-label>\n <mat-select\n #productSelect=\"matSelect\"\n placeholder=\"Product\"\n name=\"productValue\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"onSelectOpenedChange($event)\">\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 products\" [(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 (product of filteredProducts(); track product.productId) {\n <mat-option\n [value]=\"product.productId\"\n [ngClass]=\"{ hidden: product.hidden }\"\n [matTooltip]=\"\n product.description ? `Name: ${product.name}\\nDescription: ${product.description}` : `Name: ${product.name}`\n \"\n [matTooltipDisabled]=\"!productSelect.panelOpen\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n {{ product.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No product available.</mat-option>\n }\n @if (!hasFilteredProduct()) {\n <mat-option disabled>No product found.</mat-option>\n }\n </mat-select>\n</mat-form-field>\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}\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"] }] }); }
|
|
3001
3009
|
}
|
|
3002
3010
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ProductSelectComponent, decorators: [{
|
|
3003
3011
|
type: Component,
|
|
@@ -3016,8 +3024,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
3016
3024
|
MatInput,
|
|
3017
3025
|
MatSuffix,
|
|
3018
3026
|
MatIconButton,
|
|
3019
|
-
], template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Product</mat-label>\n <mat-select\n placeholder=\"Product\"\n name=\"productValue\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"
|
|
3020
|
-
}], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], preSelectedProductId: [{ type: i0.Input, args: [{ isSignal: true, alias: "preSelectedProductId", required: false }] }] } });
|
|
3027
|
+
], template: "<mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Product</mat-label>\n <mat-select\n #productSelect=\"matSelect\"\n placeholder=\"Product\"\n name=\"productValue\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"onSelectOpenedChange($event)\">\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 products\" [(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 (product of filteredProducts(); track product.productId) {\n <mat-option\n [value]=\"product.productId\"\n [ngClass]=\"{ hidden: product.hidden }\"\n [matTooltip]=\"\n product.description ? `Name: ${product.name}\\nDescription: ${product.description}` : `Name: ${product.name}`\n \"\n [matTooltipDisabled]=\"!productSelect.panelOpen\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n {{ product.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No product available.</mat-option>\n }\n @if (!hasFilteredProduct()) {\n <mat-option disabled>No product found.</mat-option>\n }\n </mat-select>\n</mat-form-field>\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}\n"] }]
|
|
3028
|
+
}], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], preSelectedProductId: [{ type: i0.Input, args: [{ isSignal: true, alias: "preSelectedProductId", required: false }] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
|
|
3021
3029
|
|
|
3022
3030
|
class ConfigSelectComponent extends BaseSelectComponent {
|
|
3023
3031
|
constructor() {
|
|
@@ -3026,6 +3034,7 @@ class ConfigSelectComponent extends BaseSelectComponent {
|
|
|
3026
3034
|
this.productId = input.required(...(ngDevMode ? [{ debugName: "productId" }] : /* istanbul ignore next */ []));
|
|
3027
3035
|
this.preSelectedConfigId = input(...(ngDevMode ? [undefined, { debugName: "preSelectedConfigId" }] : /* istanbul ignore next */ []));
|
|
3028
3036
|
this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
|
|
3037
|
+
this.tooltips = viewChildren(MatTooltip, ...(ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []));
|
|
3029
3038
|
this.filteredConfigs = linkedSignal(() => {
|
|
3030
3039
|
const filterText = this.filterText().trim().toLocaleLowerCase();
|
|
3031
3040
|
if (this.configs.isLoading() || !this.configs.hasValue()) {
|
|
@@ -3061,6 +3070,13 @@ class ConfigSelectComponent extends BaseSelectComponent {
|
|
|
3061
3070
|
clearFilter() {
|
|
3062
3071
|
this.filterText.set("");
|
|
3063
3072
|
}
|
|
3073
|
+
onSelectOpenedChange(opened) {
|
|
3074
|
+
this.openChanged(opened);
|
|
3075
|
+
this.clearFilter();
|
|
3076
|
+
if (!opened) {
|
|
3077
|
+
this.tooltips().forEach(t => t.hide(0));
|
|
3078
|
+
}
|
|
3079
|
+
}
|
|
3064
3080
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ConfigSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3065
3081
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ConfigSelectComponent, isStandalone: true, selector: "app-config-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null }, preSelectedConfigId: { classPropertyName: "preSelectedConfigId", publicName: "preSelectedConfigId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
3066
3082
|
{
|
|
@@ -3068,7 +3084,7 @@ class ConfigSelectComponent extends BaseSelectComponent {
|
|
|
3068
3084
|
useExisting: forwardRef(() => ConfigSelectComponent),
|
|
3069
3085
|
multi: true,
|
|
3070
3086
|
},
|
|
3071
|
-
], usesInheritance: true, ngImport: i0, template: "@if (configs.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Config</mat-label>\n <mat-select\n placeholder=\"Config\"\n name=\"value\"\n disableOptionCentering\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"
|
|
3087
|
+
], viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (configs.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Config</mat-label>\n <mat-select\n #configSelect=\"matSelect\"\n placeholder=\"Config\"\n name=\"value\"\n disableOptionCentering\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"onSelectOpenedChange($event)\">\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 configs\" [(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 (config of filteredConfigs(); track config.configId) {\n <mat-option\n [value]=\"config.configId\"\n [ngClass]=\"{ hidden: config.hidden }\"\n [matTooltip]=\"\n config.description ? `Name: ${config.name}\\nDescription: ${config.description}` : `Name: ${config.name}`\n \"\n [matTooltipDisabled]=\"!configSelect.panelOpen\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n {{ config.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No config available.</mat-option>\n }\n @if (!hasFilteredConfig()) {\n <mat-option disabled>No config 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}\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"] }] }); }
|
|
3072
3088
|
}
|
|
3073
3089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ConfigSelectComponent, decorators: [{
|
|
3074
3090
|
type: Component,
|
|
@@ -3093,8 +3109,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
3093
3109
|
MatInput,
|
|
3094
3110
|
MatSuffix,
|
|
3095
3111
|
MatIconButton,
|
|
3096
|
-
], template: "@if (configs.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Config</mat-label>\n <mat-select\n placeholder=\"Config\"\n name=\"value\"\n disableOptionCentering\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"
|
|
3097
|
-
}], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], preSelectedConfigId: [{ type: i0.Input, args: [{ isSignal: true, alias: "preSelectedConfigId", required: false }] }] } });
|
|
3112
|
+
], template: "@if (configs.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Config</mat-label>\n <mat-select\n #configSelect=\"matSelect\"\n placeholder=\"Config\"\n name=\"value\"\n disableOptionCentering\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"onSelectOpenedChange($event)\">\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 configs\" [(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 (config of filteredConfigs(); track config.configId) {\n <mat-option\n [value]=\"config.configId\"\n [ngClass]=\"{ hidden: config.hidden }\"\n [matTooltip]=\"\n config.description ? `Name: ${config.name}\\nDescription: ${config.description}` : `Name: ${config.name}`\n \"\n [matTooltipDisabled]=\"!configSelect.panelOpen\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n {{ config.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No config available.</mat-option>\n }\n @if (!hasFilteredConfig()) {\n <mat-option disabled>No config 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}\n"] }]
|
|
3113
|
+
}], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], preSelectedConfigId: [{ type: i0.Input, args: [{ isSignal: true, alias: "preSelectedConfigId", required: false }] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
|
|
3098
3114
|
|
|
3099
3115
|
class EnvironmentSelectComponent extends BaseSelectComponent {
|
|
3100
3116
|
constructor() {
|
|
@@ -3102,6 +3118,7 @@ class EnvironmentSelectComponent extends BaseSelectComponent {
|
|
|
3102
3118
|
this.valueFormControl = input.required(...(ngDevMode ? [{ debugName: "valueFormControl" }] : /* istanbul ignore next */ []));
|
|
3103
3119
|
this.productId = input.required(...(ngDevMode ? [{ debugName: "productId" }] : /* istanbul ignore next */ []));
|
|
3104
3120
|
this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
|
|
3121
|
+
this.tooltips = viewChildren(MatTooltip, ...(ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []));
|
|
3105
3122
|
this.filteredEnvironments = linkedSignal(() => {
|
|
3106
3123
|
const filterText = this.filterText().trim().toLocaleLowerCase();
|
|
3107
3124
|
if (this.environments.isLoading() || !this.environments.hasValue()) {
|
|
@@ -3132,8 +3149,15 @@ class EnvironmentSelectComponent extends BaseSelectComponent {
|
|
|
3132
3149
|
clearFilter() {
|
|
3133
3150
|
this.filterText.set("");
|
|
3134
3151
|
}
|
|
3152
|
+
onSelectOpenedChange(opened) {
|
|
3153
|
+
this.openChanged(opened);
|
|
3154
|
+
this.clearFilter();
|
|
3155
|
+
if (!opened) {
|
|
3156
|
+
this.tooltips().forEach(t => t.hide(0));
|
|
3157
|
+
}
|
|
3158
|
+
}
|
|
3135
3159
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: EnvironmentSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3136
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: EnvironmentSelectComponent, isStandalone: true, selector: "app-environment-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (environments.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Environment</mat-label>\n <mat-select\n placeholder=\"Environment\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"
|
|
3160
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: EnvironmentSelectComponent, isStandalone: true, selector: "app-environment-select", inputs: { valueFormControl: { classPropertyName: "valueFormControl", publicName: "valueFormControl", isSignal: true, isRequired: true, transformFunction: null }, productId: { classPropertyName: "productId", publicName: "productId", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (environments.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Environment</mat-label>\n <mat-select\n #environmentSelect=\"matSelect\"\n placeholder=\"Environment\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"onSelectOpenedChange($event)\">\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 environments\" [(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 (environment of filteredEnvironments(); track environment.environmentId) {\n <mat-option\n [value]=\"environment.environmentId\"\n [ngClass]=\"{ hidden: environment.hidden }\"\n [matTooltip]=\"\n environment.description\n ? `Name: ${environment.name}\\nDescription: ${environment.description}`\n : `Name: ${environment.name}`\n \"\n [matTooltipDisabled]=\"!environmentSelect.panelOpen\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n {{ environment.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No environment available.</mat-option>\n }\n @if (!hasFilteredEnvironment()) {\n <mat-option disabled>No environment 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}\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"] }] }); }
|
|
3137
3161
|
}
|
|
3138
3162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: EnvironmentSelectComponent, decorators: [{
|
|
3139
3163
|
type: Component,
|
|
@@ -3152,8 +3176,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
3152
3176
|
MatInput,
|
|
3153
3177
|
MatSuffix,
|
|
3154
3178
|
MatIconButton,
|
|
3155
|
-
], template: "@if (environments.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Environment</mat-label>\n <mat-select\n placeholder=\"Environment\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"
|
|
3156
|
-
}], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }] } });
|
|
3179
|
+
], template: "@if (environments.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Environment</mat-label>\n <mat-select\n #environmentSelect=\"matSelect\"\n placeholder=\"Environment\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"onSelectOpenedChange($event)\">\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 environments\" [(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 (environment of filteredEnvironments(); track environment.environmentId) {\n <mat-option\n [value]=\"environment.environmentId\"\n [ngClass]=\"{ hidden: environment.hidden }\"\n [matTooltip]=\"\n environment.description\n ? `Name: ${environment.name}\\nDescription: ${environment.description}`\n : `Name: ${environment.name}`\n \"\n [matTooltipDisabled]=\"!environmentSelect.panelOpen\"\n [matTooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\">\n {{ environment.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No environment available.</mat-option>\n }\n @if (!hasFilteredEnvironment()) {\n <mat-option disabled>No environment 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}\n"] }]
|
|
3180
|
+
}], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], productId: [{ type: i0.Input, args: [{ isSignal: true, alias: "productId", required: true }] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
|
|
3157
3181
|
|
|
3158
3182
|
class SettingSelectComponent extends BaseSelectComponent {
|
|
3159
3183
|
constructor() {
|
|
@@ -3162,6 +3186,7 @@ class SettingSelectComponent extends BaseSelectComponent {
|
|
|
3162
3186
|
this.configId = input.required(...(ngDevMode ? [{ debugName: "configId" }] : /* istanbul ignore next */ []));
|
|
3163
3187
|
this.SettingTypeEnum = SettingType;
|
|
3164
3188
|
this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
|
|
3189
|
+
this.tooltips = viewChildren(MatTooltip, ...(ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []));
|
|
3165
3190
|
this.filteredSettings = linkedSignal(() => {
|
|
3166
3191
|
const filterText = this.filterText().trim().toLocaleLowerCase();
|
|
3167
3192
|
if (this.settings.isLoading() || !this.settings.hasValue()) {
|
|
@@ -3200,8 +3225,15 @@ class SettingSelectComponent extends BaseSelectComponent {
|
|
|
3200
3225
|
clearFilter() {
|
|
3201
3226
|
this.filterText.set("");
|
|
3202
3227
|
}
|
|
3228
|
+
onSelectOpenedChange(opened) {
|
|
3229
|
+
this.openChanged(opened);
|
|
3230
|
+
this.clearFilter();
|
|
3231
|
+
if (!opened) {
|
|
3232
|
+
this.tooltips().forEach(t => t.hide(0));
|
|
3233
|
+
}
|
|
3234
|
+
}
|
|
3203
3235
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SettingSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3204
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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, ngImport: i0, template: "@if (settings.hasValue()) {\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)=\"
|
|
3236
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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 } }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (settings.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Feature flag or setting</mat-label>\n <mat-select\n #settingSelect=\"matSelect\"\n placeholder=\"Feature flag or setting\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"onSelectOpenedChange($event)\">\n <mat-select-trigger>\n @if (valueFormControl().value) {\n {{ this.selectedSettingTriggerText() }}\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\" [matTooltipDisabled]=\"!settingSelect.panelOpen || !setting.name\">\n {{ setting.name }}\n </span>\n <code\n class=\"highlight copyable-like small\"\n [matTooltip]=\"setting.key\"\n [matTooltipDisabled]=\"!settingSelect.panelOpen || !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" }] }); }
|
|
3205
3237
|
}
|
|
3206
3238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SettingSelectComponent, decorators: [{
|
|
3207
3239
|
type: Component,
|
|
@@ -3221,8 +3253,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
3221
3253
|
MatSuffix,
|
|
3222
3254
|
MatIconButton,
|
|
3223
3255
|
MatSelectTrigger,
|
|
3224
|
-
], template: "@if (settings.hasValue()) {\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)=\"
|
|
3225
|
-
}], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }] } });
|
|
3256
|
+
], template: "@if (settings.hasValue()) {\n <mat-form-field class=\"form-field\" appearance=\"outline\">\n <mat-label>Feature flag or setting</mat-label>\n <mat-select\n #settingSelect=\"matSelect\"\n placeholder=\"Feature flag or setting\"\n name=\"value\"\n [formControl]=\"valueFormControl()\"\n [panelClass]=\"customDropdown() ? 'custom-dropdown-below' : ''\"\n (openedChange)=\"onSelectOpenedChange($event)\">\n <mat-select-trigger>\n @if (valueFormControl().value) {\n {{ this.selectedSettingTriggerText() }}\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\" [matTooltipDisabled]=\"!settingSelect.panelOpen || !setting.name\">\n {{ setting.name }}\n </span>\n <code\n class=\"highlight copyable-like small\"\n [matTooltip]=\"setting.key\"\n [matTooltipDisabled]=\"!settingSelect.panelOpen || !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"] }]
|
|
3257
|
+
}], propDecorators: { valueFormControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormControl", required: true }] }], configId: [{ type: i0.Input, args: [{ isSignal: true, alias: "configId", required: true }] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
|
|
3226
3258
|
|
|
3227
3259
|
class DeleteSettingDialogComponent {
|
|
3228
3260
|
constructor() {
|
|
@@ -3903,6 +3935,7 @@ class FeatureFlagValueComponent {
|
|
|
3903
3935
|
this.isPrerequisite = input(false, ...(ngDevMode ? [{ debugName: "isPrerequisite" }] : /* istanbul ignore next */ []));
|
|
3904
3936
|
this.tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
|
|
3905
3937
|
this.viewVariationsRequested = output();
|
|
3938
|
+
this.tooltips = viewChildren(MatTooltip, ...(ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []));
|
|
3906
3939
|
this.predefinedVariations = computed(() => {
|
|
3907
3940
|
return this.setting().predefinedVariations
|
|
3908
3941
|
.map((sv, index) => ({
|
|
@@ -3977,8 +4010,13 @@ class FeatureFlagValueComponent {
|
|
|
3977
4010
|
return model?.stringValue ?? "";
|
|
3978
4011
|
}
|
|
3979
4012
|
}
|
|
4013
|
+
onPredefinedVariationSelectOpenedChange(opened) {
|
|
4014
|
+
if (!opened) {
|
|
4015
|
+
this.tooltips().forEach(t => t.hide(0));
|
|
4016
|
+
}
|
|
4017
|
+
}
|
|
3980
4018
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FeatureFlagValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3981
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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;margin-bottom:3px}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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]" }] }); }
|
|
4019
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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" }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], 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 #predefinedVariationSelect=\"matSelect\"\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 (openedChange)=\"onPredefinedVariationSelectOpenedChange($event)\">\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 [matTooltipDisabled]=\"\n !predefinedVariationSelect.panelOpen || (predefinedVariation.isAvailable && !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;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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;min-width: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;min-width:0}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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)}}\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]" }] }); }
|
|
3982
4020
|
}
|
|
3983
4021
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FeatureFlagValueComponent, decorators: [{
|
|
3984
4022
|
type: Component,
|
|
@@ -4000,8 +4038,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
4000
4038
|
NgClass,
|
|
4001
4039
|
MatSelectTrigger,
|
|
4002
4040
|
PastedDataTrimmerDirective,
|
|
4003
|
-
], 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;margin-bottom:3px}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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"] }]
|
|
4004
|
-
}], 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"] }] } });
|
|
4041
|
+
], 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 #predefinedVariationSelect=\"matSelect\"\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 (openedChange)=\"onPredefinedVariationSelectOpenedChange($event)\">\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 [matTooltipDisabled]=\"\n !predefinedVariationSelect.panelOpen || (predefinedVariation.isAvailable && !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;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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;min-width: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;min-width:0}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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)}}\n"] }]
|
|
4042
|
+
}], 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"] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
|
|
4005
4043
|
|
|
4006
4044
|
class ConditionChipComponent {
|
|
4007
4045
|
constructor() {
|
|
@@ -4033,6 +4071,7 @@ class PrerequisiteFlagConditionComponent {
|
|
|
4033
4071
|
this.SettingType = SettingType;
|
|
4034
4072
|
this.setting = linkedSignal(() => this.getSetting(), ...(ngDevMode ? [{ debugName: "setting" }] : /* istanbul ignore next */ []));
|
|
4035
4073
|
this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
|
|
4074
|
+
this.tooltips = viewChildren(MatTooltip, ...(ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []));
|
|
4036
4075
|
this.filteredPrerequisiteSettings = linkedSignal(() => {
|
|
4037
4076
|
const filterText = this.filterText().trim().toLocaleLowerCase();
|
|
4038
4077
|
return this.prerequisiteSettings().map(s => ({
|
|
@@ -4071,8 +4110,14 @@ class PrerequisiteFlagConditionComponent {
|
|
|
4071
4110
|
clearFilter() {
|
|
4072
4111
|
this.filterText.set("");
|
|
4073
4112
|
}
|
|
4113
|
+
onPrerequisiteSelectOpenedChange(opened) {
|
|
4114
|
+
this.clearFilter();
|
|
4115
|
+
if (!opened) {
|
|
4116
|
+
this.tooltips().forEach(t => t.hide(0));
|
|
4117
|
+
}
|
|
4118
|
+
}
|
|
4074
4119
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PrerequisiteFlagConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4075
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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 no-suffix\" 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;margin-bottom:3px}.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" }] }); }
|
|
4120
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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" }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], 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 no-suffix\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select\n #prerequisiteSelect=\"matSelect\"\n placeholder=\"Select feature flag ...\"\n matTooltip=\"Prerequisite flag key\"\n [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n (selectionChange)=\"prerequisiteSettingChanged()\"\n (openedChange)=\"onPrerequisiteSelectOpenedChange($event)\">\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\n [matTooltip]=\"prerequisiteSetting.name\"\n [matTooltipDisabled]=\"!prerequisiteSelect.panelOpen || !prerequisiteSetting.name\">\n {{ prerequisiteSetting.name }}\n </span>\n <code\n class=\"highlight copyable-like small\"\n [matTooltip]=\"prerequisiteSetting.key\"\n [matTooltipDisabled]=\"!prerequisiteSelect.panelOpen || !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;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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" }] }); }
|
|
4076
4121
|
}
|
|
4077
4122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PrerequisiteFlagConditionComponent, decorators: [{
|
|
4078
4123
|
type: Component,
|
|
@@ -4094,8 +4139,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
4094
4139
|
MatSuffix,
|
|
4095
4140
|
MatInput,
|
|
4096
4141
|
MatSelectTrigger,
|
|
4097
|
-
], 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 no-suffix\" 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 (
|
|
4098
|
-
}], 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"] }] } });
|
|
4142
|
+
], 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 no-suffix\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-select\n #prerequisiteSelect=\"matSelect\"\n placeholder=\"Select feature flag ...\"\n matTooltip=\"Prerequisite flag key\"\n [formControl]=\"formGroup().controls.prerequisiteSettingId\"\n (selectionChange)=\"prerequisiteSettingChanged()\"\n (openedChange)=\"onPrerequisiteSelectOpenedChange($event)\">\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\n [matTooltip]=\"prerequisiteSetting.name\"\n [matTooltipDisabled]=\"!prerequisiteSelect.panelOpen || !prerequisiteSetting.name\">\n {{ prerequisiteSetting.name }}\n </span>\n <code\n class=\"highlight copyable-like small\"\n [matTooltip]=\"prerequisiteSetting.key\"\n [matTooltipDisabled]=\"!prerequisiteSelect.panelOpen || !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;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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"] }]
|
|
4143
|
+
}], 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"] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
|
|
4099
4144
|
|
|
4100
4145
|
class SegmentConditionComponent {
|
|
4101
4146
|
constructor() {
|
|
@@ -4112,6 +4157,7 @@ class SegmentConditionComponent {
|
|
|
4112
4157
|
{ value: SegmentComparator.IsNotIn, label: "IS NOT IN SEGMENT" },
|
|
4113
4158
|
];
|
|
4114
4159
|
this.filterText = signal("", ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
|
|
4160
|
+
this.tooltips = viewChildren(MatTooltip, ...(ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []));
|
|
4115
4161
|
this.filteredSegments = linkedSignal(() => {
|
|
4116
4162
|
const filterText = this.filterText().trim().toLocaleLowerCase();
|
|
4117
4163
|
return this.segments().map(s => ({
|
|
@@ -4127,8 +4173,14 @@ class SegmentConditionComponent {
|
|
|
4127
4173
|
clearFilter() {
|
|
4128
4174
|
this.filterText.set("");
|
|
4129
4175
|
}
|
|
4176
|
+
onSegmentSelectOpenedChange(opened) {
|
|
4177
|
+
this.clearFilter();
|
|
4178
|
+
if (!opened) {
|
|
4179
|
+
this.tooltips().forEach(t => t.hide(0));
|
|
4180
|
+
}
|
|
4181
|
+
}
|
|
4130
4182
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SegmentConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4131
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SegmentConditionComponent, isStandalone: true, selector: "app-segment-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 }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested" }, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user\n </a>\n </div>\n </div>\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 matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n @for (comparator of segmentComparators; track $index) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.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 <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component suffixed\">\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n [class.select-suffixed]=\"canManageSegments()\">\n <mat-select\n matTooltip=\"Segment\"\n placeholder=\"Select segment ...\"\n [formControl]=\"formGroup().controls.segmentId\"\n (opened)=\"clearFilter()\"\n (closed)=\"clearFilter()\">\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 segments\" [(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 (segment of filteredSegments(); track $index) {\n <mat-option\n [value]=\"segment.segmentId\"\n [matTooltip]=\"segment.description\"\n [ngClass]=\"{ hidden: segment.hidden }\">\n {{ segment.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No segments available.</mat-option>\n }\n @if (segments().length && !hasFilteredSegments()) {\n <mat-option disabled>No segments found.</mat-option>\n }\n </mat-select>\n @if (canManageSegments()) {\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Create and manage segments\"\n [matMenuTriggerFor]=\"segmentMenu\"\n [track]=\"['segment menu click', 'feature flags and settings']\"\n (click)=\"$event.stopPropagation()\">\n <mat-icon>more_vert</mat-icon>\n </button>\n }\n @if (formGroup().controls.segmentId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.segmentId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n <ng-template matMenuContent>\n <a\n mat-menu-item\n [track]=\"['create segment click', 'Feature flags & settings V2 page']\"\n (click)=\"createSegmentRequested.emit()\">\n <mat-icon>add</mat-icon>\n <span>Create new segment</span>\n </a>\n <a\n mat-menu-item\n [track]=\"['manage segment click', 'Feature flags & settings V2 page']\"\n (click)=\"manageSegmentsRequested.emit()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n <span>Manage segments</span>\n </a>\n </ng-template>\n</mat-menu>\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;margin-bottom:3px}.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}\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.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: "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: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] }); }
|
|
4183
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SegmentConditionComponent, isStandalone: true, selector: "app-segment-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 }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested" }, viewQueries: [{ propertyName: "tooltips", predicate: MatTooltip, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user\n </a>\n </div>\n </div>\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 matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n @for (comparator of segmentComparators; track $index) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.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 <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component suffixed\">\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n [class.select-suffixed]=\"canManageSegments()\">\n <mat-select\n #segmentSelect=\"matSelect\"\n matTooltip=\"Segment\"\n placeholder=\"Select segment ...\"\n [formControl]=\"formGroup().controls.segmentId\"\n (openedChange)=\"onSegmentSelectOpenedChange($event)\">\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 segments\" [(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 (segment of filteredSegments(); track $index) {\n <mat-option\n [value]=\"segment.segmentId\"\n [matTooltip]=\"segment.description\"\n [matTooltipDisabled]=\"!segmentSelect.panelOpen || !segment.description\"\n [ngClass]=\"{ hidden: segment.hidden }\">\n {{ segment.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No segments available.</mat-option>\n }\n @if (segments().length && !hasFilteredSegments()) {\n <mat-option disabled>No segments found.</mat-option>\n }\n </mat-select>\n @if (canManageSegments()) {\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Create and manage segments\"\n [matMenuTriggerFor]=\"segmentMenu\"\n [track]=\"['segment menu click', 'feature flags and settings']\"\n (click)=\"$event.stopPropagation()\">\n <mat-icon>more_vert</mat-icon>\n </button>\n }\n @if (formGroup().controls.segmentId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.segmentId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n <ng-template matMenuContent>\n <a\n mat-menu-item\n [track]=\"['create segment click', 'Feature flags & settings V2 page']\"\n (click)=\"createSegmentRequested.emit()\">\n <mat-icon>add</mat-icon>\n <span>Create new segment</span>\n </a>\n <a\n mat-menu-item\n [track]=\"['manage segment click', 'Feature flags & settings V2 page']\"\n (click)=\"manageSegmentsRequested.emit()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n <span>Manage segments</span>\n </a>\n </ng-template>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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}\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.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: "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: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] }); }
|
|
4132
4184
|
}
|
|
4133
4185
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SegmentConditionComponent, decorators: [{
|
|
4134
4186
|
type: Component,
|
|
@@ -4153,8 +4205,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
4153
4205
|
MatDivider,
|
|
4154
4206
|
NgClass,
|
|
4155
4207
|
MatSuffix,
|
|
4156
|
-
], template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user\n </a>\n </div>\n </div>\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 matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n @for (comparator of segmentComparators; track $index) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.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 <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component suffixed\">\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n [class.select-suffixed]=\"canManageSegments()\">\n <mat-select\n matTooltip=\"Segment\"\n placeholder=\"Select segment ...\"\n [formControl]=\"formGroup().controls.segmentId\"\n (
|
|
4157
|
-
}], 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 }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], canManageSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "canManageSegments", required: true }] }], createSegmentRequested: [{ type: i0.Output, args: ["createSegmentRequested"] }], manageSegmentsRequested: [{ type: i0.Output, args: ["manageSegmentsRequested"] }] } });
|
|
4208
|
+
], template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user\n </a>\n </div>\n </div>\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 matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n @for (comparator of segmentComparators; track $index) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.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 <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component suffixed\">\n <mat-form-field\n class=\"small-form-field\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n [class.select-suffixed]=\"canManageSegments()\">\n <mat-select\n #segmentSelect=\"matSelect\"\n matTooltip=\"Segment\"\n placeholder=\"Select segment ...\"\n [formControl]=\"formGroup().controls.segmentId\"\n (openedChange)=\"onSegmentSelectOpenedChange($event)\">\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 segments\" [(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 (segment of filteredSegments(); track $index) {\n <mat-option\n [value]=\"segment.segmentId\"\n [matTooltip]=\"segment.description\"\n [matTooltipDisabled]=\"!segmentSelect.panelOpen || !segment.description\"\n [ngClass]=\"{ hidden: segment.hidden }\">\n {{ segment.name }}\n </mat-option>\n } @empty {\n <mat-option disabled>No segments available.</mat-option>\n }\n @if (segments().length && !hasFilteredSegments()) {\n <mat-option disabled>No segments found.</mat-option>\n }\n </mat-select>\n @if (canManageSegments()) {\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Create and manage segments\"\n [matMenuTriggerFor]=\"segmentMenu\"\n [track]=\"['segment menu click', 'feature flags and settings']\"\n (click)=\"$event.stopPropagation()\">\n <mat-icon>more_vert</mat-icon>\n </button>\n }\n @if (formGroup().controls.segmentId.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.segmentId) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n <ng-template matMenuContent>\n <a\n mat-menu-item\n [track]=\"['create segment click', 'Feature flags & settings V2 page']\"\n (click)=\"createSegmentRequested.emit()\">\n <mat-icon>add</mat-icon>\n <span>Create new segment</span>\n </a>\n <a\n mat-menu-item\n [track]=\"['manage segment click', 'Feature flags & settings V2 page']\"\n (click)=\"manageSegmentsRequested.emit()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n <span>Manage segments</span>\n </a>\n </ng-template>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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}\n"] }]
|
|
4209
|
+
}], 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 }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], canManageSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "canManageSegments", required: true }] }], createSegmentRequested: [{ type: i0.Output, args: ["createSegmentRequested"] }], manageSegmentsRequested: [{ type: i0.Output, args: ["manageSegmentsRequested"] }], tooltips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatTooltip), { isSignal: true }] }] } });
|
|
4158
4210
|
|
|
4159
4211
|
class DateHelper {
|
|
4160
4212
|
static addDays(date, value) {
|
|
@@ -5359,7 +5411,7 @@ class UserConditionComponent {
|
|
|
5359
5411
|
return !compVal.doubleValue && !compVal.listValue && !compVal.stringValue;
|
|
5360
5412
|
}
|
|
5361
5413
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: UserConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5362
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: UserConditionComponent, isStandalone: true, selector: "app-user-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: DateAdapter, useClass: AppDateAdapter }], viewQueries: [{ propertyName: "matChipGrid", first: true, predicate: ["chipGrid"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user's\n </a>\n </div>\n </div>\n\n <div class=\"wrapper-group\">\n <div class=\"wrapper-group\">\n <div\n class=\"targeting-rule-component pad-right\"\n [ngClass]=\"{\n small: comparisionAttributeCustom === selectedAttribute,\n }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparison attribute\"\n [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n [(value)]=\"selectedAttribute\"\n (selectionChange)=\"attributeChanged(selectedAttribute)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n }\n <mat-option value=\"Custom\">Custom</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Custom comparison attribute\"\n [formControl]=\"formGroup().controls.comparisonAttribute\"\n (blur)=\"calcComparators(true)\" />\n @if (formGroup().controls.comparisonAttribute.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"targeting-rule-component pad-right suffixed\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparator\"\n [disabled]=\"readOnly()\"\n [(value)]=\"selectedComparator\"\n (selectionChange)=\"comparatorChanged(selectedComparator)\">\n @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n <mat-optgroup [label]=\"group.key\">\n @for (comparator of group.value; track comparator) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.label }}\n </mat-option>\n }\n </mat-optgroup>\n }\n <mat-divider />\n <mat-option value=\"showall\">\n <mat-icon>list_alt</mat-icon>\n SHOW ALL COMPARATORS\n </mat-option>\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"All comparators\"\n (click)=\"compDialog(); $event.stopPropagation()\">\n <mat-icon>list_alt</mat-icon>\n </button>\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 </div>\n @switch (rolloutRuleComparatorType) {\n @case (RolloutRuleComparatorV2Type.String) {\n <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Semver) {\n <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.StringList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.SemverList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Number) {\n <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.DateTime) {\n <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n }\n }\n</div>\n\n<ng-template #textTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (text)\"\n placeholder=\"Add text ...\"\n appPastedDataTrimmer\n [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n @if (isClearTextComparator) {\n <button\n matPrefix\n class=\"prefix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n (click)=\"openCleartextInfoDialog()\">\n <mat-icon>lock_open_right</mat-icon>\n </button>\n }\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 (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #semverTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (semantic version)\"\n placeholder=\"Add semantic version ... (1.2.3)\"\n [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #listTemplate>\n @if (formGroup().controls.comparisonValue.controls.listValue) {\n <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field suffixed\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n @for (\n listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n track $index;\n let i = $index\n ) {\n <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n <mat-chip-row\n class=\"chip\"\n [disabled]=\"readOnly()\"\n [removable]=\"!readOnly()\"\n [editable]=\"!readOnly()\"\n [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n (removed)=\"remove(i)\"\n (edited)=\"edit(i, $event)\">\n {{ listValueItem.controls.value.value }}\n @if (!readOnly()) {\n <button type=\"button\" matChipRemove>\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n }\n </mat-chip-row>\n </span>\n }\n @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n </button>\n }\n <input\n matChipInputAddOnBlur\n matTooltip=\"Comparison values (list)\"\n [disabled]=\"readOnly()\"\n [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (matChipInputTokenEnd)=\"add($event)\" />\n </mat-chip-grid>\n @if (isClearTextComparator) {\n <button\n matIconPrefix\n class=\"prefix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n (click)=\"openCleartextInfoDialog()\">\n <mat-icon>lock_open_right</mat-icon>\n </button>\n }\n <button\n matIconSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandList()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <button\n matIconSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"More...\"\n [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n @if (\n formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n formGroup().controls.comparisonValue.controls.listValue!.errors\n ) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n </mat-error>\n }\n @if (\n formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n !formGroup().controls.comparisonValue.controls.listValue!.errors\n ) {\n <mat-error>Invalid items</mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #numberTemplate>\n @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n matTooltip=\"Comparison value (number)\"\n placeholder=\"Add number ...\"\n inputDisplayNormalizer\n [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n <div class=\"targeting-rule-component datetime\">\n <app-date-time-picker\n dateTooltip=\"Comparison value (date)\"\n timeTooltip=\"Comparison value (time)\"\n [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n </div>\n }\n</ng-template>\n\n<mat-menu #moreMenu>\n <a mat-menu-item (click)=\"expandList()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n Open advanced editor\n </a>\n <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n <mat-icon>content_copy</mat-icon>\n Copy as CSV (values only)\n </a>\n <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n <mat-icon>delete</mat-icon>\n Remove all\n </a>\n</mat-menu>\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;margin-bottom:3px}.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", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--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}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{font-size:.8em;margin-left:4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.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: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { 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: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { 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: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }, { 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: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
|
|
5414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: UserConditionComponent, isStandalone: true, selector: "app-user-condition", inputs: { targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, conditionIndex: { classPropertyName: "conditionIndex", publicName: "conditionIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: DateAdapter, useClass: AppDateAdapter }], viewQueries: [{ propertyName: "matChipGrid", first: true, predicate: ["chipGrid"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user's\n </a>\n </div>\n </div>\n\n <div class=\"wrapper-group\">\n <div class=\"wrapper-group\">\n <div\n class=\"targeting-rule-component pad-right\"\n [ngClass]=\"{\n small: comparisionAttributeCustom === selectedAttribute,\n }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparison attribute\"\n [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n [(value)]=\"selectedAttribute\"\n (selectionChange)=\"attributeChanged(selectedAttribute)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n }\n <mat-option value=\"Custom\">Custom</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Custom comparison attribute\"\n [formControl]=\"formGroup().controls.comparisonAttribute\"\n (blur)=\"calcComparators(true)\" />\n @if (formGroup().controls.comparisonAttribute.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"targeting-rule-component pad-right suffixed\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparator\"\n [disabled]=\"readOnly()\"\n [(value)]=\"selectedComparator\"\n (selectionChange)=\"comparatorChanged(selectedComparator)\">\n @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n <mat-optgroup [label]=\"group.key\">\n @for (comparator of group.value; track comparator) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.label }}\n </mat-option>\n }\n </mat-optgroup>\n }\n <mat-divider />\n <mat-option value=\"showall\">\n <mat-icon>list_alt</mat-icon>\n SHOW ALL COMPARATORS\n </mat-option>\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"All comparators\"\n (click)=\"compDialog(); $event.stopPropagation()\">\n <mat-icon>list_alt</mat-icon>\n </button>\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 </div>\n @switch (rolloutRuleComparatorType) {\n @case (RolloutRuleComparatorV2Type.String) {\n <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Semver) {\n <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.StringList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.SemverList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Number) {\n <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.DateTime) {\n <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n }\n }\n</div>\n\n<ng-template #textTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (text)\"\n placeholder=\"Add text ...\"\n appPastedDataTrimmer\n [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n @if (isClearTextComparator) {\n <button\n matPrefix\n class=\"prefix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n (click)=\"openCleartextInfoDialog()\">\n <mat-icon>lock_open_right</mat-icon>\n </button>\n }\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 (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #semverTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (semantic version)\"\n placeholder=\"Add semantic version ... (1.2.3)\"\n [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #listTemplate>\n @if (formGroup().controls.comparisonValue.controls.listValue) {\n <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field suffixed\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n @for (\n listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n track $index;\n let i = $index\n ) {\n <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n <mat-chip-row\n class=\"chip\"\n [disabled]=\"readOnly()\"\n [removable]=\"!readOnly()\"\n [editable]=\"!readOnly()\"\n [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n (removed)=\"remove(i)\"\n (edited)=\"edit(i, $event)\">\n {{ listValueItem.controls.value.value }}\n @if (!readOnly()) {\n <button type=\"button\" matChipRemove>\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n }\n </mat-chip-row>\n </span>\n }\n @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n </button>\n }\n <input\n matChipInputAddOnBlur\n matTooltip=\"Comparison values (list)\"\n [disabled]=\"readOnly()\"\n [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (matChipInputTokenEnd)=\"add($event)\" />\n </mat-chip-grid>\n @if (isClearTextComparator) {\n <button\n matIconPrefix\n class=\"prefix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n (click)=\"openCleartextInfoDialog()\">\n <mat-icon>lock_open_right</mat-icon>\n </button>\n }\n <button\n matIconSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandList()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <button\n matIconSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"More...\"\n [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n @if (\n formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n formGroup().controls.comparisonValue.controls.listValue!.errors\n ) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n </mat-error>\n }\n @if (\n formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n !formGroup().controls.comparisonValue.controls.listValue!.errors\n ) {\n <mat-error>Invalid items</mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #numberTemplate>\n @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n matTooltip=\"Comparison value (number)\"\n placeholder=\"Add number ...\"\n inputDisplayNormalizer\n [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n <div class=\"targeting-rule-component datetime\">\n <app-date-time-picker\n dateTooltip=\"Comparison value (date)\"\n timeTooltip=\"Comparison value (time)\"\n [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n </div>\n }\n</ng-template>\n\n<mat-menu #moreMenu>\n <a mat-menu-item (click)=\"expandList()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n Open advanced editor\n </a>\n <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n <mat-icon>content_copy</mat-icon>\n Copy as CSV (values only)\n </a>\n <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n <mat-icon>delete</mat-icon>\n Remove all\n </a>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--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}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{font-size:.8em;margin-left:4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"], dependencies: [{ kind: "component", type: ConditionChipComponent, selector: "app-condition-chip", inputs: ["targetingRuleIndex", "conditionIndex"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.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: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { 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: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { 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: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker", inputs: ["dateTooltip", "timeTooltip"] }, { 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: "directive", type: PastedDataTrimmerDirective, selector: "[appPastedDataTrimmer]" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
|
|
5363
5415
|
}
|
|
5364
5416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: UserConditionComponent, decorators: [{
|
|
5365
5417
|
type: Component,
|
|
@@ -5395,7 +5447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
5395
5447
|
KeyValuePipe,
|
|
5396
5448
|
MatDivider,
|
|
5397
5449
|
PastedDataTrimmerDirective,
|
|
5398
|
-
], template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user's\n </a>\n </div>\n </div>\n\n <div class=\"wrapper-group\">\n <div class=\"wrapper-group\">\n <div\n class=\"targeting-rule-component pad-right\"\n [ngClass]=\"{\n small: comparisionAttributeCustom === selectedAttribute,\n }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparison attribute\"\n [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n [(value)]=\"selectedAttribute\"\n (selectionChange)=\"attributeChanged(selectedAttribute)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n }\n <mat-option value=\"Custom\">Custom</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Custom comparison attribute\"\n [formControl]=\"formGroup().controls.comparisonAttribute\"\n (blur)=\"calcComparators(true)\" />\n @if (formGroup().controls.comparisonAttribute.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"targeting-rule-component pad-right suffixed\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparator\"\n [disabled]=\"readOnly()\"\n [(value)]=\"selectedComparator\"\n (selectionChange)=\"comparatorChanged(selectedComparator)\">\n @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n <mat-optgroup [label]=\"group.key\">\n @for (comparator of group.value; track comparator) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.label }}\n </mat-option>\n }\n </mat-optgroup>\n }\n <mat-divider />\n <mat-option value=\"showall\">\n <mat-icon>list_alt</mat-icon>\n SHOW ALL COMPARATORS\n </mat-option>\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"All comparators\"\n (click)=\"compDialog(); $event.stopPropagation()\">\n <mat-icon>list_alt</mat-icon>\n </button>\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 </div>\n @switch (rolloutRuleComparatorType) {\n @case (RolloutRuleComparatorV2Type.String) {\n <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Semver) {\n <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.StringList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.SemverList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Number) {\n <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.DateTime) {\n <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n }\n }\n</div>\n\n<ng-template #textTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (text)\"\n placeholder=\"Add text ...\"\n appPastedDataTrimmer\n [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n @if (isClearTextComparator) {\n <button\n matPrefix\n class=\"prefix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n (click)=\"openCleartextInfoDialog()\">\n <mat-icon>lock_open_right</mat-icon>\n </button>\n }\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 (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #semverTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (semantic version)\"\n placeholder=\"Add semantic version ... (1.2.3)\"\n [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #listTemplate>\n @if (formGroup().controls.comparisonValue.controls.listValue) {\n <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field suffixed\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n @for (\n listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n track $index;\n let i = $index\n ) {\n <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n <mat-chip-row\n class=\"chip\"\n [disabled]=\"readOnly()\"\n [removable]=\"!readOnly()\"\n [editable]=\"!readOnly()\"\n [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n (removed)=\"remove(i)\"\n (edited)=\"edit(i, $event)\">\n {{ listValueItem.controls.value.value }}\n @if (!readOnly()) {\n <button type=\"button\" matChipRemove>\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n }\n </mat-chip-row>\n </span>\n }\n @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n </button>\n }\n <input\n matChipInputAddOnBlur\n matTooltip=\"Comparison values (list)\"\n [disabled]=\"readOnly()\"\n [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (matChipInputTokenEnd)=\"add($event)\" />\n </mat-chip-grid>\n @if (isClearTextComparator) {\n <button\n matIconPrefix\n class=\"prefix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n (click)=\"openCleartextInfoDialog()\">\n <mat-icon>lock_open_right</mat-icon>\n </button>\n }\n <button\n matIconSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandList()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <button\n matIconSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"More...\"\n [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n @if (\n formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n formGroup().controls.comparisonValue.controls.listValue!.errors\n ) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n </mat-error>\n }\n @if (\n formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n !formGroup().controls.comparisonValue.controls.listValue!.errors\n ) {\n <mat-error>Invalid items</mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #numberTemplate>\n @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n matTooltip=\"Comparison value (number)\"\n placeholder=\"Add number ...\"\n inputDisplayNormalizer\n [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n <div class=\"targeting-rule-component datetime\">\n <app-date-time-picker\n dateTooltip=\"Comparison value (date)\"\n timeTooltip=\"Comparison value (time)\"\n [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n </div>\n }\n</ng-template>\n\n<mat-menu #moreMenu>\n <a mat-menu-item (click)=\"expandList()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n Open advanced editor\n </a>\n <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n <mat-icon>content_copy</mat-icon>\n Copy as CSV (values only)\n </a>\n <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n <mat-icon>delete</mat-icon>\n Remove all\n </a>\n</mat-menu>\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;margin-bottom:3px}.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", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--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}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{font-size:.8em;margin-left:4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"] }]
|
|
5450
|
+
], template: "<div class=\"targeting-rule-line\">\n <div class=\"explanation-wrapper\">\n <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n <div class=\"explanation\">\n <a\n href=\"https://configcat.com/docs/targeting/targeting-rule/user-condition/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"user-link\">\n user's\n </a>\n </div>\n </div>\n\n <div class=\"wrapper-group\">\n <div class=\"wrapper-group\">\n <div\n class=\"targeting-rule-component pad-right\"\n [ngClass]=\"{\n small: comparisionAttributeCustom === selectedAttribute,\n }\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparison attribute\"\n [disabled]=\"formGroup().controls.comparisonAttribute.disabled\"\n [(value)]=\"selectedAttribute\"\n (selectionChange)=\"attributeChanged(selectedAttribute)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n }\n <mat-option value=\"Custom\">Custom</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"targeting-rule-component pad-right small\" [hidden]=\"comparisionAttributeCustom !== selectedAttribute\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Custom comparison attribute\"\n [formControl]=\"formGroup().controls.comparisonAttribute\"\n (blur)=\"calcComparators(true)\" />\n @if (formGroup().controls.comparisonAttribute.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonAttribute) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"targeting-rule-component pad-right suffixed\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field select-suffixed\" subscriptSizing=\"dynamic\">\n <mat-select\n matTooltip=\"Comparator\"\n [disabled]=\"readOnly()\"\n [(value)]=\"selectedComparator\"\n (selectionChange)=\"comparatorChanged(selectedComparator)\">\n @for (group of comparatorSuggestions | keyvalue: keepOrder; track group) {\n <mat-optgroup [label]=\"group.key\">\n @for (comparator of group.value; track comparator) {\n <mat-option [value]=\"comparator.value\">\n {{ comparator.label }}\n </mat-option>\n }\n </mat-optgroup>\n }\n <mat-divider />\n <mat-option value=\"showall\">\n <mat-icon>list_alt</mat-icon>\n SHOW ALL COMPARATORS\n </mat-option>\n </mat-select>\n <button\n matSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"All comparators\"\n (click)=\"compDialog(); $event.stopPropagation()\">\n <mat-icon>list_alt</mat-icon>\n </button>\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 </div>\n @switch (rolloutRuleComparatorType) {\n @case (RolloutRuleComparatorV2Type.String) {\n <ng-container [ngTemplateOutlet]=\"textTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Semver) {\n <ng-container [ngTemplateOutlet]=\"semverTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.StringList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.SemverList) {\n <ng-container [ngTemplateOutlet]=\"listTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.Number) {\n <ng-container [ngTemplateOutlet]=\"numberTemplate\" />\n }\n @case (RolloutRuleComparatorV2Type.DateTime) {\n <ng-container [ngTemplateOutlet]=\"dateTimeTemplate\" />\n }\n }\n</div>\n\n<ng-template #textTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (text)\"\n placeholder=\"Add text ...\"\n appPastedDataTrimmer\n [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n @if (isClearTextComparator) {\n <button\n matPrefix\n class=\"prefix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n (click)=\"openCleartextInfoDialog()\">\n <mat-icon>lock_open_right</mat-icon>\n </button>\n }\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 (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #semverTemplate>\n @if (formGroup().controls.comparisonValue.controls.stringValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"text\"\n matTooltip=\"Comparison value (semantic version)\"\n placeholder=\"Add semantic version ... (1.2.3)\"\n [formControl]=\"formGroup().controls.comparisonValue.controls.stringValue!\" />\n @if (formGroup().controls.comparisonValue.controls.stringValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.stringValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #listTemplate>\n @if (formGroup().controls.comparisonValue.controls.listValue) {\n <div class=\"targeting-rule-component grow small-chip-input top-icon-suffix\">\n <mat-form-field\n appearance=\"outline\"\n class=\"small-form-field suffixed\"\n subscriptSizing=\"dynamic\"\n [class.suffixed]=\"!isClearTextComparator\"\n [class.suffixed-prefixed]=\"isClearTextComparator\">\n <mat-chip-grid #chipGrid [formControl]=\"fakeFormControl\" [errorStateMatcher]=\"errorStateMatcher\">\n @for (\n listValueItem of formGroup().controls.comparisonValue.controls.listValue!.controls | slice: 0 : 20;\n track $index;\n let i = $index\n ) {\n <span class=\"chip-container\" [matTooltip]=\"getListValueItemTooltipMessage(listValueItem)\">\n <mat-chip-row\n class=\"chip\"\n [disabled]=\"readOnly()\"\n [removable]=\"!readOnly()\"\n [editable]=\"!readOnly()\"\n [ngClass]=\"{ invalid: isListValueItemInvalid(listValueItem) }\"\n (removed)=\"remove(i)\"\n (edited)=\"edit(i, $event)\">\n {{ listValueItem.controls.value.value }}\n @if (!readOnly()) {\n <button type=\"button\" matChipRemove>\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n }\n </mat-chip-row>\n </span>\n }\n @if (formGroup().controls.comparisonValue.controls.listValue!.controls.length > 20) {\n <button mat-stroked-button class=\"show-all\" type=\"button\" (click)=\"expandList()\">\n show all {{ formGroup().controls.comparisonValue.controls.listValue!.controls.length }} items\n </button>\n }\n <input\n matChipInputAddOnBlur\n matTooltip=\"Comparison values (list)\"\n [disabled]=\"readOnly()\"\n [placeholder]=\"!readOnly() ? 'Add item to list ...' : ''\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (matChipInputTokenEnd)=\"add($event)\" />\n </mat-chip-grid>\n @if (isClearTextComparator) {\n <button\n matIconPrefix\n class=\"prefix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"This comparison value won't be hashed. Click for more info.\"\n (click)=\"openCleartextInfoDialog()\">\n <mat-icon>lock_open_right</mat-icon>\n </button>\n }\n <button\n matIconSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"Advanced editor\"\n (click)=\"expandList()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n </button>\n <button\n matIconSuffix\n class=\"input-suffix-button\"\n type=\"button\"\n mat-icon-button\n matTooltip=\"More...\"\n [matMenuTriggerFor]=\"moreMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n @if (\n formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n formGroup().controls.comparisonValue.controls.listValue!.errors\n ) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.listValue!) }}\n </mat-error>\n }\n @if (\n formGroup().controls.comparisonValue.controls.listValue!.invalid &&\n !formGroup().controls.comparisonValue.controls.listValue!.errors\n ) {\n <mat-error>Invalid items</mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #numberTemplate>\n @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n <div class=\"targeting-rule-component grow\">\n <mat-form-field appearance=\"outline\" class=\"small-form-field\" subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n matTooltip=\"Comparison value (number)\"\n placeholder=\"Add number ...\"\n inputDisplayNormalizer\n [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n @if (formGroup().controls.comparisonValue.controls.doubleValue!.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formGroup().controls.comparisonValue.controls.doubleValue!) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n }\n</ng-template>\n\n<ng-template #dateTimeTemplate>\n @if (formGroup().controls.comparisonValue.controls.doubleValue) {\n <div class=\"targeting-rule-component datetime\">\n <app-date-time-picker\n dateTooltip=\"Comparison value (date)\"\n timeTooltip=\"Comparison value (time)\"\n [formControl]=\"formGroup().controls.comparisonValue.controls.doubleValue!\" />\n </div>\n }\n</ng-template>\n\n<mat-menu #moreMenu>\n <a mat-menu-item (click)=\"expandList()\">\n <mat-icon class=\"icon-transform-rotate\">edit_note</mat-icon>\n Open advanced editor\n </a>\n <a mat-menu-item (click)=\"copyValuesAsCsv()\">\n <mat-icon>content_copy</mat-icon>\n Copy as CSV (values only)\n </a>\n <a mat-menu-item [disabled]=\"readOnly()\" (click)=\"removeAll()\">\n <mat-icon>delete</mat-icon>\n Remove all\n </a>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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", ".mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.targeting-rule-line{--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}.targeting-rule-component.datetime{width:auto;margin:0}mat-chip-row.invalid{background-color:var(--flag-box-rule-list-chip-validation-error-background)}.show-all{font-size:.8em;margin-left:4px}.prefix-button{--mat-icon-button-touch-target-display: none}.prefix-button .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}.prefix-button{color:var(--action-icon-button-color);margin-left:4px;margin-right:2px;height:20px;width:20px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}.prefix-button mat-icon{font-size:18px;height:18px;width:18px}.chip{background-color:var(--flag-box-rule-list-chip)}.chip mat-icon{color:var(--action-icon-button-color)}\n"] }]
|
|
5399
5451
|
}], propDecorators: { targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], conditionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionIndex", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], matChipGrid: [{ type: i0.ViewChild, args: ["chipGrid", { isSignal: true }] }] } });
|
|
5400
5452
|
|
|
5401
5453
|
class ConditionsComponent {
|
|
@@ -5471,7 +5523,7 @@ class ConditionsComponent {
|
|
|
5471
5523
|
return true;
|
|
5472
5524
|
}
|
|
5473
5525
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5474
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ConditionsComponent, isStandalone: true, selector: "app-conditions", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", 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: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", lastConditionDeleted: "lastConditionDeleted", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@for (condition of formArray().controls; track $index; let i = $index) {\n <div class=\"condition\">\n @if (condition.controls.userCondition) {\n <app-user-condition\n class=\"grow\"\n [readOnly]=\"flagState().readOnly\"\n [formGroup]=\"condition.controls.userCondition\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\" />\n } @else if (condition.controls.segmentCondition) {\n <app-segment-condition\n class=\"grow\"\n [formGroup]=\"condition.controls.segmentCondition\"\n [segments]=\"segments()\"\n [canManageSegments]=\"canManageSegments()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\" />\n } @else if (condition.controls.prerequisiteFlagCondition) {\n <app-prerequisite-flag-condition\n class=\"grow\"\n [formGroup]=\"condition.controls.prerequisiteFlagCondition\"\n [prerequisiteSettings]=\"flagState().prerequisiteSettings\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n @if (formArray().controls.length > 1 && !flagState().readOnly) {\n <div class=\"delete-button\">\n <button type=\"button\" mat-icon-button matTooltip=\"Remove condition\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n </div>\n }\n </div>\n}\n\n@if (formArray().controls.length && !flagState().readOnly) {\n <div class=\"add-cond\">\n <!-- In the integrations we remove the enter sign to spare some space-->\n <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n <div matTooltip=\"Add AND condition\" class=\"add-btn add-and\" [matMenuTriggerFor]=\"andmenu\">+ AND</div>\n </div>\n}\n\n<mat-menu #andmenu class=\"menu-long-text-and\">\n <a mat-menu-item (click)=\"addUserCondition()\">\n <mat-icon>track_changes</mat-icon>\n Add user condition\n </a>\n <a mat-menu-item (click)=\"addSegmentCondition()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n Add segment condition\n </a>\n <div\n matTooltip=\"There's no other flag in the config to select as a prerequisite.\"\n [matTooltipDisabled]=\"flagState().prerequisiteSettings.length > 0\">\n <a mat-menu-item [disabled]=\"!flagState().prerequisiteSettings.length\" (click)=\"addPrerequisiteFlagCondition()\">\n <mat-icon>account_tree</mat-icon>\n Add flag condition (prerequisite)\n </a>\n </div>\n</mat-menu>\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;margin-bottom:3px}.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", "html{--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}html{--mat-icon-button-touch-target-display: none}.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}.condition{display:flex;flex-wrap:nowrap}.condition .grow{flex-grow:1}.add-cond{display:flex;width:100%;margin-top:4px}.add-cond .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-cond .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-cond .add-and{min-width:65px;padding:4px 2px 3px 5px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "component", type: UserConditionComponent, selector: "app-user-condition", inputs: ["targetingRuleIndex", "conditionIndex", "readOnly", "featureFlagLimitations", "formGroup"] }, { 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: SegmentConditionComponent, selector: "app-segment-condition", inputs: ["targetingRuleIndex", "conditionIndex", "formGroup", "segments", "canManageSegments"], outputs: ["createSegmentRequested", "manageSegmentsRequested"] }, { kind: "component", type: PrerequisiteFlagConditionComponent, selector: "app-prerequisite-flag-condition", inputs: ["targetingRuleIndex", "conditionIndex", "formGroup", "prerequisiteSettings", "featureFlagLimitations", "canCreateOrUpdateSetting"], outputs: ["prerequisiteConditionChanged", "viewVariationsRequested"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: 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: 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"] }] }); }
|
|
5526
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ConditionsComponent, isStandalone: true, selector: "app-conditions", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", 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: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", lastConditionDeleted: "lastConditionDeleted", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@for (condition of formArray().controls; track $index; let i = $index) {\n <div class=\"condition\">\n @if (condition.controls.userCondition) {\n <app-user-condition\n class=\"grow\"\n [readOnly]=\"flagState().readOnly\"\n [formGroup]=\"condition.controls.userCondition\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\" />\n } @else if (condition.controls.segmentCondition) {\n <app-segment-condition\n class=\"grow\"\n [formGroup]=\"condition.controls.segmentCondition\"\n [segments]=\"segments()\"\n [canManageSegments]=\"canManageSegments()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\" />\n } @else if (condition.controls.prerequisiteFlagCondition) {\n <app-prerequisite-flag-condition\n class=\"grow\"\n [formGroup]=\"condition.controls.prerequisiteFlagCondition\"\n [prerequisiteSettings]=\"flagState().prerequisiteSettings\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n @if (formArray().controls.length > 1 && !flagState().readOnly) {\n <div class=\"delete-button\">\n <button type=\"button\" mat-icon-button matTooltip=\"Remove condition\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n </div>\n }\n </div>\n}\n\n@if (formArray().controls.length && !flagState().readOnly) {\n <div class=\"add-cond\">\n <!-- In the integrations we remove the enter sign to spare some space-->\n <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n <div matTooltip=\"Add AND condition\" class=\"add-btn add-and\" [matMenuTriggerFor]=\"andmenu\">+ AND</div>\n </div>\n}\n\n<mat-menu #andmenu class=\"menu-long-text-and\">\n <a mat-menu-item (click)=\"addUserCondition()\">\n <mat-icon>track_changes</mat-icon>\n Add user condition\n </a>\n <a mat-menu-item (click)=\"addSegmentCondition()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n Add segment condition\n </a>\n <div\n matTooltip=\"There's no other flag in the config to select as a prerequisite.\"\n [matTooltipDisabled]=\"flagState().prerequisiteSettings.length > 0\">\n <a mat-menu-item [disabled]=\"!flagState().prerequisiteSettings.length\" (click)=\"addPrerequisiteFlagCondition()\">\n <mat-icon>account_tree</mat-icon>\n Add flag condition (prerequisite)\n </a>\n </div>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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", "html{--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}html{--mat-icon-button-touch-target-display: none}.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}.condition{display:flex;flex-wrap:nowrap;min-width:0}.condition .grow{flex-grow:1;min-width:0}.add-cond{display:flex;width:100%;margin-top:4px}.add-cond .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-cond .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-cond .add-and{min-width:65px;padding:4px 2px 3px 5px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "component", type: UserConditionComponent, selector: "app-user-condition", inputs: ["targetingRuleIndex", "conditionIndex", "readOnly", "featureFlagLimitations", "formGroup"] }, { 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: SegmentConditionComponent, selector: "app-segment-condition", inputs: ["targetingRuleIndex", "conditionIndex", "formGroup", "segments", "canManageSegments"], outputs: ["createSegmentRequested", "manageSegmentsRequested"] }, { kind: "component", type: PrerequisiteFlagConditionComponent, selector: "app-prerequisite-flag-condition", inputs: ["targetingRuleIndex", "conditionIndex", "formGroup", "prerequisiteSettings", "featureFlagLimitations", "canCreateOrUpdateSetting"], outputs: ["prerequisiteConditionChanged", "viewVariationsRequested"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: 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: 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"] }] }); }
|
|
5475
5527
|
}
|
|
5476
5528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ConditionsComponent, decorators: [{
|
|
5477
5529
|
type: Component,
|
|
@@ -5488,7 +5540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
5488
5540
|
MatMenuTrigger,
|
|
5489
5541
|
MatMenu,
|
|
5490
5542
|
MatMenuItem,
|
|
5491
|
-
], template: "@for (condition of formArray().controls; track $index; let i = $index) {\n <div class=\"condition\">\n @if (condition.controls.userCondition) {\n <app-user-condition\n class=\"grow\"\n [readOnly]=\"flagState().readOnly\"\n [formGroup]=\"condition.controls.userCondition\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\" />\n } @else if (condition.controls.segmentCondition) {\n <app-segment-condition\n class=\"grow\"\n [formGroup]=\"condition.controls.segmentCondition\"\n [segments]=\"segments()\"\n [canManageSegments]=\"canManageSegments()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\" />\n } @else if (condition.controls.prerequisiteFlagCondition) {\n <app-prerequisite-flag-condition\n class=\"grow\"\n [formGroup]=\"condition.controls.prerequisiteFlagCondition\"\n [prerequisiteSettings]=\"flagState().prerequisiteSettings\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n @if (formArray().controls.length > 1 && !flagState().readOnly) {\n <div class=\"delete-button\">\n <button type=\"button\" mat-icon-button matTooltip=\"Remove condition\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n </div>\n }\n </div>\n}\n\n@if (formArray().controls.length && !flagState().readOnly) {\n <div class=\"add-cond\">\n <!-- In the integrations we remove the enter sign to spare some space-->\n <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n <div matTooltip=\"Add AND condition\" class=\"add-btn add-and\" [matMenuTriggerFor]=\"andmenu\">+ AND</div>\n </div>\n}\n\n<mat-menu #andmenu class=\"menu-long-text-and\">\n <a mat-menu-item (click)=\"addUserCondition()\">\n <mat-icon>track_changes</mat-icon>\n Add user condition\n </a>\n <a mat-menu-item (click)=\"addSegmentCondition()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n Add segment condition\n </a>\n <div\n matTooltip=\"There's no other flag in the config to select as a prerequisite.\"\n [matTooltipDisabled]=\"flagState().prerequisiteSettings.length > 0\">\n <a mat-menu-item [disabled]=\"!flagState().prerequisiteSettings.length\" (click)=\"addPrerequisiteFlagCondition()\">\n <mat-icon>account_tree</mat-icon>\n Add flag condition (prerequisite)\n </a>\n </div>\n</mat-menu>\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;margin-bottom:3px}.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", "html{--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}html{--mat-icon-button-touch-target-display: none}.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}.condition{display:flex;flex-wrap:nowrap}.condition .grow{flex-grow:1}.add-cond{display:flex;width:100%;margin-top:4px}.add-cond .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-cond .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-cond .add-and{min-width:65px;padding:4px 2px 3px 5px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"] }]
|
|
5543
|
+
], template: "@for (condition of formArray().controls; track $index; let i = $index) {\n <div class=\"condition\">\n @if (condition.controls.userCondition) {\n <app-user-condition\n class=\"grow\"\n [readOnly]=\"flagState().readOnly\"\n [formGroup]=\"condition.controls.userCondition\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\" />\n } @else if (condition.controls.segmentCondition) {\n <app-segment-condition\n class=\"grow\"\n [formGroup]=\"condition.controls.segmentCondition\"\n [segments]=\"segments()\"\n [canManageSegments]=\"canManageSegments()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\" />\n } @else if (condition.controls.prerequisiteFlagCondition) {\n <app-prerequisite-flag-condition\n class=\"grow\"\n [formGroup]=\"condition.controls.prerequisiteFlagCondition\"\n [prerequisiteSettings]=\"flagState().prerequisiteSettings\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [conditionIndex]=\"i\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n @if (formArray().controls.length > 1 && !flagState().readOnly) {\n <div class=\"delete-button\">\n <button type=\"button\" mat-icon-button matTooltip=\"Remove condition\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n </div>\n }\n </div>\n}\n\n@if (formArray().controls.length && !flagState().readOnly) {\n <div class=\"add-cond\">\n <!-- In the integrations we remove the enter sign to spare some space-->\n <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n <div matTooltip=\"Add AND condition\" class=\"add-btn add-and\" [matMenuTriggerFor]=\"andmenu\">+ AND</div>\n </div>\n}\n\n<mat-menu #andmenu class=\"menu-long-text-and\">\n <a mat-menu-item (click)=\"addUserCondition()\">\n <mat-icon>track_changes</mat-icon>\n Add user condition\n </a>\n <a mat-menu-item (click)=\"addSegmentCondition()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n Add segment condition\n </a>\n <div\n matTooltip=\"There's no other flag in the config to select as a prerequisite.\"\n [matTooltipDisabled]=\"flagState().prerequisiteSettings.length > 0\">\n <a mat-menu-item [disabled]=\"!flagState().prerequisiteSettings.length\" (click)=\"addPrerequisiteFlagCondition()\">\n <mat-icon>account_tree</mat-icon>\n Add flag condition (prerequisite)\n </a>\n </div>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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", "html{--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}html{--mat-icon-button-touch-target-display: none}.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}.condition{display:flex;flex-wrap:nowrap;min-width:0}.condition .grow{flex-grow:1;min-width:0}.add-cond{display:flex;width:100%;margin-top:4px}.add-cond .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-cond .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-cond .add-and{min-width:65px;padding:4px 2px 3px 5px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"] }]
|
|
5492
5544
|
}], propDecorators: { formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], canManageSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "canManageSegments", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], createSegmentRequested: [{ type: i0.Output, args: ["createSegmentRequested"] }], manageSegmentsRequested: [{ type: i0.Output, args: ["manageSegmentsRequested"] }], addSegmentConditionRequestedWithoutSegments: [{ type: i0.Output, args: ["addSegmentConditionRequestedWithoutSegments"] }], lastConditionDeleted: [{ type: i0.Output, args: ["lastConditionDeleted"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
5493
5545
|
|
|
5494
5546
|
class PercentageOptionsComponent {
|
|
@@ -5562,7 +5614,7 @@ class PercentageOptionsComponent {
|
|
|
5562
5614
|
.map(p => p.controls.value.controls.predefinedVariationId.value);
|
|
5563
5615
|
}
|
|
5564
5616
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PercentageOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5565
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: PercentageOptionsComponent, isStandalone: true, selector: "app-percentage-options", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, percentageEvaluationAttribute: { classPropertyName: "percentageEvaluationAttribute", publicName: "percentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null }, isPercentageOnlyTargetingRule: { classPropertyName: "isPercentageOnlyTargetingRule", publicName: "isPercentageOnlyTargetingRule", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { lastPercentageOptionLeft: "lastPercentageOptionLeft", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@for (percentageOption of formArray().controls; track $index; let i = $index) {\n <div class=\"targeting-rule-line\">\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component flex\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field perc-input\">\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"100\"\n matTooltip=\"Percentage\"\n appDigitOnly\n inputDisplayNormalizer\n [formControl]=\"percentageOption.controls.percentage\"\n (input)=\"percentageChanged(i)\" />\n <span matTextSuffix>%</span>\n @if (percentageOption.controls.percentage.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(percentageOption.controls.percentage) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n @if (!percentageEvaluationAttribute()) {\n <div class=\"attribute-wrapper flex\">\n of \n <a href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\" rel=\"noopener noreferrer\">\n users\n </a>\n </div>\n } @else {\n <div class=\"attribute-wrapper wrapper-group flex\">\n <div class=\"small-pad-right\">of all</div>\n <div class=\"small-pad-right\">\n <button\n mat-flat-button\n type=\"button\"\n class=\"attribute\"\n matTooltip=\"Change percentage evaluation attribute\"\n [disabled]=\"flagState().readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n {{ percentageEvaluationAttribute() }}\n </button>\n </div>\n <div>attributes</div>\n </div>\n }\n @if (!flagState().readOnly) {\n <div class=\"delete-button\">\n <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n </div>\n }\n </div>\n <app-feature-flag-value\n class=\"value\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"percentageOption.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [notAvailablePredefinedVariationIds]=\"getNotAvailablePredefinedVariationIds(i)\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n@if (formArray().invalid && !!FormHelper.getErrorMessage(formArray())) {\n <mat-error class=\"sumerror\">\n {{ FormHelper.getErrorMessage(formArray()) }}\n </mat-error>\n}\n@if (percentageEvaluationAttribute()) {\n @if (isPercentageOnlyTargetingRule()) {\n <div class=\"small small-pad-bottom\">\n If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the percentage options are skipped and the evaluation continues with the next rule.\n </div>\n } @else {\n <div class=\"small small-pad-bottom\">\n If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the current targeting rule is skipped and the evaluation continues with the next one.\n </div>\n }\n}\n\n@if (\n flagState().settingValue.setting.settingType !== SettingType.Boolean &&\n !flagState().readOnly &&\n (!flagState().settingValue.setting.predefinedVariations.length ||\n flagState().settingValue.setting.predefinedVariations.length > percentageOptionsCount())\n) {\n <div class=\"add-perc\">\n <!-- In the integrations we remove the enter sign to spare some space-->\n <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n <div class=\"add-btn add-perc-btn\" (click)=\"addOption()\">+ % OPTION</div>\n </div>\n}\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;margin-bottom:3px}.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", ".targeting-rule-line{--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}.targeting-rule-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}.targeting-rule-line{align-items:center}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.targeting-rule-line .delete-button{margin-right:4px;margin-top:2px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem;color:var(--flag-meta)}.attribute-wrapper{color:var(--flag-description)}.attribute{height:32px!important;border:1px solid var(--input-border-color);background-color:var(--input-background);text-transform:none!important;color:var(--flag-description);font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }] }); }
|
|
5617
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: PercentageOptionsComponent, isStandalone: true, selector: "app-percentage-options", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, percentageEvaluationAttribute: { classPropertyName: "percentageEvaluationAttribute", publicName: "percentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null }, isPercentageOnlyTargetingRule: { classPropertyName: "isPercentageOnlyTargetingRule", publicName: "isPercentageOnlyTargetingRule", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { lastPercentageOptionLeft: "lastPercentageOptionLeft", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@for (percentageOption of formArray().controls; track $index; let i = $index) {\n <div class=\"targeting-rule-line\">\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component flex\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field perc-input\">\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"100\"\n matTooltip=\"Percentage\"\n appDigitOnly\n inputDisplayNormalizer\n [formControl]=\"percentageOption.controls.percentage\"\n (input)=\"percentageChanged(i)\" />\n <span matTextSuffix>%</span>\n @if (percentageOption.controls.percentage.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(percentageOption.controls.percentage) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n @if (!percentageEvaluationAttribute()) {\n <div class=\"attribute-wrapper flex\">\n of \n <a href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\" rel=\"noopener noreferrer\">\n users\n </a>\n </div>\n } @else {\n <div class=\"attribute-wrapper wrapper-group flex\">\n <div class=\"small-pad-right\">of all</div>\n <div class=\"small-pad-right\">\n <button\n mat-flat-button\n type=\"button\"\n class=\"attribute\"\n matTooltip=\"Change percentage evaluation attribute\"\n [disabled]=\"flagState().readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n {{ percentageEvaluationAttribute() }}\n </button>\n </div>\n <div>attributes</div>\n </div>\n }\n @if (!flagState().readOnly) {\n <div class=\"delete-button\">\n <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n </div>\n }\n </div>\n <app-feature-flag-value\n class=\"value\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"percentageOption.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [notAvailablePredefinedVariationIds]=\"getNotAvailablePredefinedVariationIds(i)\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n@if (formArray().invalid && !!FormHelper.getErrorMessage(formArray())) {\n <mat-error class=\"sumerror\">\n {{ FormHelper.getErrorMessage(formArray()) }}\n </mat-error>\n}\n@if (percentageEvaluationAttribute()) {\n @if (isPercentageOnlyTargetingRule()) {\n <div class=\"small small-pad-bottom\">\n If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the percentage options are skipped and the evaluation continues with the next rule.\n </div>\n } @else {\n <div class=\"small small-pad-bottom\">\n If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the current targeting rule is skipped and the evaluation continues with the next one.\n </div>\n }\n}\n\n@if (\n flagState().settingValue.setting.settingType !== SettingType.Boolean &&\n !flagState().readOnly &&\n (!flagState().settingValue.setting.predefinedVariations.length ||\n flagState().settingValue.setting.predefinedVariations.length > percentageOptionsCount())\n) {\n <div class=\"add-perc\">\n <!-- In the integrations we remove the enter sign to spare some space-->\n <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n <div class=\"add-btn add-perc-btn\" (click)=\"addOption()\">+ % OPTION</div>\n </div>\n}\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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", ".targeting-rule-line{--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}.targeting-rule-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}.targeting-rule-line{align-items:center}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.targeting-rule-line .delete-button{margin-right:4px;margin-top:2px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem;color:var(--flag-meta)}.attribute-wrapper{color:var(--flag-description)}.attribute{height:32px!important;border:1px solid var(--input-border-color);background-color:var(--input-background);text-transform:none!important;color:var(--flag-description);font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: InputDisplayNormalizerDirective, selector: "input[inputDisplayNormalizer]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[appDigitOnly]", inputs: ["digitOnlyDecimal", "digitOnlyDecimalSeparator", "digitOnlyAllowNegatives", "digitOnlyAllowPaste", "digitOnlyNegativeSign"] }] }); }
|
|
5566
5618
|
}
|
|
5567
5619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PercentageOptionsComponent, decorators: [{
|
|
5568
5620
|
type: Component,
|
|
@@ -5581,7 +5633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
5581
5633
|
MatIcon,
|
|
5582
5634
|
FeatureFlagValueComponent,
|
|
5583
5635
|
DigitOnlyDirective,
|
|
5584
|
-
], template: "@for (percentageOption of formArray().controls; track $index; let i = $index) {\n <div class=\"targeting-rule-line\">\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component flex\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field perc-input\">\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"100\"\n matTooltip=\"Percentage\"\n appDigitOnly\n inputDisplayNormalizer\n [formControl]=\"percentageOption.controls.percentage\"\n (input)=\"percentageChanged(i)\" />\n <span matTextSuffix>%</span>\n @if (percentageOption.controls.percentage.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(percentageOption.controls.percentage) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n @if (!percentageEvaluationAttribute()) {\n <div class=\"attribute-wrapper flex\">\n of \n <a href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\" rel=\"noopener noreferrer\">\n users\n </a>\n </div>\n } @else {\n <div class=\"attribute-wrapper wrapper-group flex\">\n <div class=\"small-pad-right\">of all</div>\n <div class=\"small-pad-right\">\n <button\n mat-flat-button\n type=\"button\"\n class=\"attribute\"\n matTooltip=\"Change percentage evaluation attribute\"\n [disabled]=\"flagState().readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n {{ percentageEvaluationAttribute() }}\n </button>\n </div>\n <div>attributes</div>\n </div>\n }\n @if (!flagState().readOnly) {\n <div class=\"delete-button\">\n <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n </div>\n }\n </div>\n <app-feature-flag-value\n class=\"value\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"percentageOption.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [notAvailablePredefinedVariationIds]=\"getNotAvailablePredefinedVariationIds(i)\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n@if (formArray().invalid && !!FormHelper.getErrorMessage(formArray())) {\n <mat-error class=\"sumerror\">\n {{ FormHelper.getErrorMessage(formArray()) }}\n </mat-error>\n}\n@if (percentageEvaluationAttribute()) {\n @if (isPercentageOnlyTargetingRule()) {\n <div class=\"small small-pad-bottom\">\n If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the percentage options are skipped and the evaluation continues with the next rule.\n </div>\n } @else {\n <div class=\"small small-pad-bottom\">\n If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the current targeting rule is skipped and the evaluation continues with the next one.\n </div>\n }\n}\n\n@if (\n flagState().settingValue.setting.settingType !== SettingType.Boolean &&\n !flagState().readOnly &&\n (!flagState().settingValue.setting.predefinedVariations.length ||\n flagState().settingValue.setting.predefinedVariations.length > percentageOptionsCount())\n) {\n <div class=\"add-perc\">\n <!-- In the integrations we remove the enter sign to spare some space-->\n <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n <div class=\"add-btn add-perc-btn\" (click)=\"addOption()\">+ % OPTION</div>\n </div>\n}\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;margin-bottom:3px}.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", ".targeting-rule-line{--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}.targeting-rule-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}.targeting-rule-line{align-items:center}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.targeting-rule-line .delete-button{margin-right:4px;margin-top:2px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem;color:var(--flag-meta)}.attribute-wrapper{color:var(--flag-description)}.attribute{height:32px!important;border:1px solid var(--input-border-color);background-color:var(--input-background);text-transform:none!important;color:var(--flag-description);font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"] }]
|
|
5636
|
+
], template: "@for (percentageOption of formArray().controls; track $index; let i = $index) {\n <div class=\"targeting-rule-line\">\n <div class=\"wrapper-group\">\n <div class=\"targeting-rule-component flex\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"small-form-field perc-input\">\n <input\n matInput\n type=\"number\"\n min=\"0\"\n max=\"100\"\n matTooltip=\"Percentage\"\n appDigitOnly\n inputDisplayNormalizer\n [formControl]=\"percentageOption.controls.percentage\"\n (input)=\"percentageChanged(i)\" />\n <span matTextSuffix>%</span>\n @if (percentageOption.controls.percentage.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(percentageOption.controls.percentage) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n @if (!percentageEvaluationAttribute()) {\n <div class=\"attribute-wrapper flex\">\n of \n <a href=\"https://configcat.com/docs/targeting/percentage-options/\" target=\"_blank\" rel=\"noopener noreferrer\">\n users\n </a>\n </div>\n } @else {\n <div class=\"attribute-wrapper wrapper-group flex\">\n <div class=\"small-pad-right\">of all</div>\n <div class=\"small-pad-right\">\n <button\n mat-flat-button\n type=\"button\"\n class=\"attribute\"\n matTooltip=\"Change percentage evaluation attribute\"\n [disabled]=\"flagState().readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n {{ percentageEvaluationAttribute() }}\n </button>\n </div>\n <div>attributes</div>\n </div>\n }\n @if (!flagState().readOnly) {\n <div class=\"delete-button\">\n <button type=\"button\" mat-icon-button matTooltip=\"Remove option\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n </div>\n }\n </div>\n <app-feature-flag-value\n class=\"value\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"percentageOption.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [notAvailablePredefinedVariationIds]=\"getNotAvailablePredefinedVariationIds(i)\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n@if (formArray().invalid && !!FormHelper.getErrorMessage(formArray())) {\n <mat-error class=\"sumerror\">\n {{ FormHelper.getErrorMessage(formArray()) }}\n </mat-error>\n}\n@if (percentageEvaluationAttribute()) {\n @if (isPercentageOnlyTargetingRule()) {\n <div class=\"small small-pad-bottom\">\n If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the percentage options are skipped and the evaluation continues with the next rule.\n </div>\n } @else {\n <div class=\"small small-pad-bottom\">\n If the {{ percentageEvaluationAttribute() }} attribute is not set in the\n <a href=\"https://configcat.com/docs/targeting/user-object/\" target=\"_blank\" rel=\"noopener noreferrer\">\n User Object\n </a>\n , the current targeting rule is skipped and the evaluation continues with the next one.\n </div>\n }\n}\n\n@if (\n flagState().settingValue.setting.settingType !== SettingType.Boolean &&\n !flagState().readOnly &&\n (!flagState().settingValue.setting.predefinedVariations.length ||\n flagState().settingValue.setting.predefinedVariations.length > percentageOptionsCount())\n) {\n <div class=\"add-perc\">\n <!-- In the integrations we remove the enter sign to spare some space-->\n <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n <div class=\"add-btn add-perc-btn\" (click)=\"addOption()\">+ % OPTION</div>\n </div>\n}\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;min-width:0;margin:2px 0}.targeting-rule-line>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap;min-width:0}.targeting-rule-line .wrapper-group>*{min-width:0;max-width:100%}.targeting-rule-line .wrapper-group.grow{flex-grow:1;min-width:0}.targeting-rule-component{margin:2px 0;min-width:0;max-width:100%}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1;min-width:0}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%;min-width:0;max-width:100%}.targeting-rule-component mat-form-field ::ng-deep .mat-mdc-form-field-infix{min-width:0;width:auto}.targeting-rule-component mat-select,.targeting-rule-component input{min-width:0;max-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;margin-bottom:3px}.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", ".targeting-rule-line{--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}.targeting-rule-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}.targeting-rule-line{align-items:center}.targeting-rule-line .flex{display:flex;align-items:center;margin-right:4px}.targeting-rule-line .targeting-rule-component{max-width:84px}.targeting-rule-line .value{flex-grow:1}.targeting-rule-line .perc-input{margin-right:5px}.targeting-rule-line .delete-button{margin-right:4px;margin-top:2px}.add-perc{display:flex;width:100%;padding-top:5px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:3px 4px 2px 8px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}.sumerror{margin-bottom:8px;font-size:12px}.small{font-size:.7rem;color:var(--flag-meta)}.attribute-wrapper{color:var(--flag-description)}.attribute{height:32px!important;border:1px solid var(--input-border-color);background-color:var(--input-background);text-transform:none!important;color:var(--flag-description);font-size:12px;padding:0 5px}.small-pad-right{margin-right:5px}.small-pad-bottom{margin-bottom:5px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"] }]
|
|
5585
5637
|
}], propDecorators: { formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], percentageEvaluationAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentageEvaluationAttribute", required: true }] }], isPercentageOnlyTargetingRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPercentageOnlyTargetingRule", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], lastPercentageOptionLeft: [{ type: i0.Output, args: ["lastPercentageOptionLeft"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }], changePercentageEvaluationAttributeRequested: [{ type: i0.Output, args: ["changePercentageEvaluationAttributeRequested"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
5586
5638
|
|
|
5587
5639
|
class TargetingRuleComponent {
|
|
@@ -5695,7 +5747,7 @@ class TargetingRuleComponent {
|
|
|
5695
5747
|
this.subscriptionLimitReached.emit();
|
|
5696
5748
|
}
|
|
5697
5749
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TargetingRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5698
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: TargetingRuleComponent, isStandalone: true, selector: "app-targeting-rule", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null }, percentageEvaluationAttribute: { classPropertyName: "percentageEvaluationAttribute", publicName: "percentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", removedAllRules: "removedAllRules", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let formGroupValue = formGroup();\n\n@if (formGroupValue.controls.conditions.length) {\n <div class=\"side-padd conditions\">\n <app-conditions\n [formArray]=\"formGroupValue.controls.conditions\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [canManageSegments]=\"canManageSegments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastConditionDeleted)=\"lastConditionDeleted()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n\n@if (formGroupValue.controls.conditions.length) {\n <mat-divider />\n}\n\n<div class=\"served-value\">\n <div class=\"flex side-padd\">\n @if (showBadge()) {\n <div class=\"chip-container fixed-width\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip-set>\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n }\n\n @if (formGroupValue.controls.percentageOptions && formGroupValue.controls.percentageOptions.length) {\n <app-percentage-options\n class=\"grow\"\n [formArray]=\"formGroupValue.controls.percentageOptions\"\n [flagState]=\"flagState()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n [percentageEvaluationAttribute]=\"percentageEvaluationAttribute()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n @if (formGroupValue.controls.value) {\n <app-feature-flag-value\n class=\"grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"formGroupValue.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n </div>\n\n @if (formGroupValue.controls.value && !flagState().readOnly) {\n <div class=\"add-perc flex side-padd bot-padd\">\n <!-- In the integrations we remove the enter sign to spare some space-->\n <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n <div\n matTooltip=\"Target a percentage of users to whom this rule applies\"\n class=\"add-btn add-perc-btn\"\n (click)=\"convertToPercentage()\">\n + % OPTION\n </div>\n </div>\n }\n</div>\n", styles: ["html{--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}.flex{display:flex;flex-wrap:wrap}.flex .grow{flex-grow:1}.mat-divider{opacity:.8;border-top-color:var(--flag-box-rule-divider-color);margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:4px 4px 3px 6px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "component", type: ConditionsComponent, selector: "app-conditions", inputs: ["formArray", "segments", "flagState", "targetingRuleIndex", "canManageSegments", "featureFlagLimitations", "canCreateOrUpdateSetting"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "lastConditionDeleted", "subscriptionLimitReached", "prerequisiteConditionChanged", "viewVariationsRequested"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: PercentageOptionsComponent, selector: "app-percentage-options", inputs: ["formArray", "flagState", "featureFlagLimitations", "percentageEvaluationAttribute", "isPercentageOnlyTargetingRule", "canCreateOrUpdateSetting"], outputs: ["lastPercentageOptionLeft", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested", "viewVariationsRequested"] }, { 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: "directive", type: i1.FormArrayDirective, selector: "[formArray]", inputs: ["formArray"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }] }); }
|
|
5750
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: TargetingRuleComponent, isStandalone: true, selector: "app-targeting-rule", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, targetingRuleIndex: { classPropertyName: "targetingRuleIndex", publicName: "targetingRuleIndex", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null }, percentageEvaluationAttribute: { classPropertyName: "percentageEvaluationAttribute", publicName: "percentageEvaluationAttribute", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", removedAllRules: "removedAllRules", subscriptionLimitReached: "subscriptionLimitReached", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", prerequisiteConditionChanged: "prerequisiteConditionChanged", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let formGroupValue = formGroup();\n\n@if (formGroupValue.controls.conditions.length) {\n <div class=\"side-padd conditions\">\n <app-conditions\n [formArray]=\"formGroupValue.controls.conditions\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [canManageSegments]=\"canManageSegments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastConditionDeleted)=\"lastConditionDeleted()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n\n@if (formGroupValue.controls.conditions.length) {\n <mat-divider />\n}\n\n<div class=\"served-value\">\n <div class=\"flex side-padd\">\n @if (showBadge()) {\n <div class=\"chip-container fixed-width\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip-set>\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n }\n\n @if (formGroupValue.controls.percentageOptions && formGroupValue.controls.percentageOptions.length) {\n <app-percentage-options\n class=\"grow\"\n [formArray]=\"formGroupValue.controls.percentageOptions\"\n [flagState]=\"flagState()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n [percentageEvaluationAttribute]=\"percentageEvaluationAttribute()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n @if (formGroupValue.controls.value) {\n <app-feature-flag-value\n class=\"grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"formGroupValue.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n </div>\n\n @if (formGroupValue.controls.value && !flagState().readOnly) {\n <div class=\"add-perc flex side-padd bot-padd\">\n <!-- In the integrations we remove the enter sign to spare some space-->\n <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n <div\n matTooltip=\"Target a percentage of users to whom this rule applies\"\n class=\"add-btn add-perc-btn\"\n (click)=\"convertToPercentage()\">\n + % OPTION\n </div>\n </div>\n }\n</div>\n", styles: ["html{--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}.flex{display:flex;flex-wrap:wrap;min-width:0}.flex .grow{flex-grow:1;min-width:0}.mat-divider{opacity:.8;border-top-color:var(--flag-box-rule-divider-color);margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px;min-width:0}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:4px 4px 3px 6px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "component", type: ConditionsComponent, selector: "app-conditions", inputs: ["formArray", "segments", "flagState", "targetingRuleIndex", "canManageSegments", "featureFlagLimitations", "canCreateOrUpdateSetting"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "lastConditionDeleted", "subscriptionLimitReached", "prerequisiteConditionChanged", "viewVariationsRequested"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: PercentageOptionsComponent, selector: "app-percentage-options", inputs: ["formArray", "flagState", "featureFlagLimitations", "percentageEvaluationAttribute", "isPercentageOnlyTargetingRule", "canCreateOrUpdateSetting"], outputs: ["lastPercentageOptionLeft", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested", "viewVariationsRequested"] }, { 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: "directive", type: i1.FormArrayDirective, selector: "[formArray]", inputs: ["formArray"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }] }); }
|
|
5699
5751
|
}
|
|
5700
5752
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TargetingRuleComponent, decorators: [{
|
|
5701
5753
|
type: Component,
|
|
@@ -5710,7 +5762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
5710
5762
|
FormsModule,
|
|
5711
5763
|
ReactiveFormsModule,
|
|
5712
5764
|
RxReactiveFormsModule,
|
|
5713
|
-
], template: "@let formGroupValue = formGroup();\n\n@if (formGroupValue.controls.conditions.length) {\n <div class=\"side-padd conditions\">\n <app-conditions\n [formArray]=\"formGroupValue.controls.conditions\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [canManageSegments]=\"canManageSegments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastConditionDeleted)=\"lastConditionDeleted()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n\n@if (formGroupValue.controls.conditions.length) {\n <mat-divider />\n}\n\n<div class=\"served-value\">\n <div class=\"flex side-padd\">\n @if (showBadge()) {\n <div class=\"chip-container fixed-width\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip-set>\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n }\n\n @if (formGroupValue.controls.percentageOptions && formGroupValue.controls.percentageOptions.length) {\n <app-percentage-options\n class=\"grow\"\n [formArray]=\"formGroupValue.controls.percentageOptions\"\n [flagState]=\"flagState()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n [percentageEvaluationAttribute]=\"percentageEvaluationAttribute()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n @if (formGroupValue.controls.value) {\n <app-feature-flag-value\n class=\"grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"formGroupValue.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n </div>\n\n @if (formGroupValue.controls.value && !flagState().readOnly) {\n <div class=\"add-perc flex side-padd bot-padd\">\n <!-- In the integrations we remove the enter sign to spare some space-->\n <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n <div\n matTooltip=\"Target a percentage of users to whom this rule applies\"\n class=\"add-btn add-perc-btn\"\n (click)=\"convertToPercentage()\">\n + % OPTION\n </div>\n </div>\n }\n</div>\n", styles: ["html{--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}.flex{display:flex;flex-wrap:wrap}.flex .grow{flex-grow:1}.mat-divider{opacity:.8;border-top-color:var(--flag-box-rule-divider-color);margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:4px 4px 3px 6px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"] }]
|
|
5765
|
+
], template: "@let formGroupValue = formGroup();\n\n@if (formGroupValue.controls.conditions.length) {\n <div class=\"side-padd conditions\">\n <app-conditions\n [formArray]=\"formGroupValue.controls.conditions\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"targetingRuleIndex()\"\n [canManageSegments]=\"canManageSegments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastConditionDeleted)=\"lastConditionDeleted()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n}\n\n@if (formGroupValue.controls.conditions.length) {\n <mat-divider />\n}\n\n<div class=\"served-value\">\n <div class=\"flex side-padd\">\n @if (showBadge()) {\n <div class=\"chip-container fixed-width\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip-set>\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n }\n\n @if (formGroupValue.controls.percentageOptions && formGroupValue.controls.percentageOptions.length) {\n <app-percentage-options\n class=\"grow\"\n [formArray]=\"formGroupValue.controls.percentageOptions\"\n [flagState]=\"flagState()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [isPercentageOnlyTargetingRule]=\"isPercentageOnly()\"\n [percentageEvaluationAttribute]=\"percentageEvaluationAttribute()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (lastPercentageOptionLeft)=\"lastPercentageOptionLeft()\"\n (subscriptionLimitReached)=\"subscriptionLimitReached.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n @if (formGroupValue.controls.value) {\n <app-feature-flag-value\n class=\"grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [formGroup]=\"formGroupValue.controls.value\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n </div>\n\n @if (formGroupValue.controls.value && !flagState().readOnly) {\n <div class=\"add-perc flex side-padd bot-padd\">\n <!-- In the integrations we remove the enter sign to spare some space-->\n <!-- <div class=\"enter-sign\"><mat-icon>subdirectory_arrow_right</mat-icon></div> -->\n <div\n matTooltip=\"Target a percentage of users to whom this rule applies\"\n class=\"add-btn add-perc-btn\"\n (click)=\"convertToPercentage()\">\n + % OPTION\n </div>\n </div>\n }\n</div>\n", styles: ["html{--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}.flex{display:flex;flex-wrap:wrap;min-width:0}.flex .grow{flex-grow:1;min-width:0}.mat-divider{opacity:.8;border-top-color:var(--flag-box-rule-divider-color);margin:15px 0 12px}.side-padd{padding:0 16px}.bot-padd{margin-bottom:6px}.conditions{margin:4px 0 12px;min-width:0}.served-value{margin:8px 0 6px}.served-value .chip-container{margin-bottom:2px 0}.add-perc{display:flex;width:100%;margin-top:6px}.add-perc .enter-sign{color:var(--flag-enter-sign);margin:2px 3px 0 8px}.add-perc .enter-sign mat-icon{font-size:16px;width:16px;height:16px}.add-perc .add-perc-btn{min-width:63px;padding:4px 4px 3px 6px;background-color:var(--flag-box-rule-control-background);border:var(--flag-box-rule-control-border)}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"] }]
|
|
5714
5766
|
}], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], canManageSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "canManageSegments", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], percentageEvaluationAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentageEvaluationAttribute", required: true }] }], createSegmentRequested: [{ type: i0.Output, args: ["createSegmentRequested"] }], manageSegmentsRequested: [{ type: i0.Output, args: ["manageSegmentsRequested"] }], addSegmentConditionRequestedWithoutSegments: [{ type: i0.Output, args: ["addSegmentConditionRequestedWithoutSegments"] }], removedAllRules: [{ type: i0.Output, args: ["removedAllRules"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }], changePercentageEvaluationAttributeRequested: [{ type: i0.Output, args: ["changePercentageEvaluationAttributeRequested"] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
5715
5767
|
|
|
5716
5768
|
class EvaluationFormulaComponent {
|
|
@@ -5890,7 +5942,7 @@ class EvaluationFormulaComponent {
|
|
|
5890
5942
|
});
|
|
5891
5943
|
}
|
|
5892
5944
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: EvaluationFormulaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5893
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: EvaluationFormulaComponent, isStandalone: true, selector: "app-evaluation-formula", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@if (flagState().addButtonRenderState.renderTopAddButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom left-align\">\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ IF</div>\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div class=\"add-btn add-if pad-left\" matTooltip=\"Target a percentage of users\" (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n}\n\n<div\n cdkDropList\n [cdkDropListDisabled]=\"flagState().readOnly\"\n [cdkDropListSortPredicate]=\"sortPredicate()\"\n [cdkDropListData]=\"formGroup().controls.targetingRules.controls\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (targetingRule of formGroup().controls.targetingRules.controls; track $index; let i = $index) {\n <div>\n <div\n class=\"targeting-rule-outer grow\"\n cdkDrag\n [cdkDragDisabled]=\"isDragDisabled(targetingRule)\"\n [cdkDragData]=\"targetingRule\">\n <div class=\"drag-handle\">\n @if (!isDragDisabled(targetingRule)) {\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n </div>\n <div class=\"white-box grow\">\n <app-targeting-rule\n class=\"grow\"\n [formGroup]=\"targetingRule\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"i\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"canManageSegments()\"\n [percentageEvaluationAttribute]=\"formGroup().controls.percentageEvaluationAttribute.value\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (removedAllRules)=\"remove(i)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisiteReferences()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n <div class=\"delete\">\n @if (!flagState().readOnly) {\n <button type=\"button\" mat-icon-button matTooltip=\"Remove targeting rule\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n }\n </div>\n </div>\n </div>\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showAddRuleButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom pad-top center-shift\">\n @if (!flagState().readOnly) {\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ OR</div>\n }\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div\n class=\"add-btn add-if pad-left\"\n matTooltip=\"Target a percentage of users\"\n (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showOrChip) {\n <div class=\"or-chip\">\n <div class=\"chip-container\">\n <mat-chip-set>\n <mat-chip disabled>OR</mat-chip>\n </mat-chip-set>\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].renderSeparationArea) {\n <div class=\"or-chip\"></div>\n }\n </div>\n }\n</div>\n\n<div class=\"targeting-rule-outer\">\n <div class=\"drag-handle\"></div>\n <div class=\"white-box grow side-padd vertical-center\">\n <div\n class=\"chip-container fixed-width\"\n [ngClass]=\"flagState().addButtonRenderState.hasPercentageOnlyRule ? 'fixed-width-wide' : ''\">\n <mat-chip-set matTooltipPosition=\"above\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n <app-feature-flag-value\n class=\"value grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n</div>\n\n<mat-menu #ormenu>\n <a mat-menu-item (click)=\"addUserCondition()\">\n <mat-icon>track_changes</mat-icon>\n Target users\n </a>\n <a mat-menu-item (click)=\"addSegmentCondition()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n Target a segment\n </a>\n <div\n matTooltip=\"There's no other flag in the config to select as a prerequisite.\"\n [matTooltipDisabled]=\"flagState().prerequisiteSettings.length > 0\">\n <a mat-menu-item [disabled]=\"!flagState().prerequisiteSettings.length\" (click)=\"addPrerequisiteFlagCondition()\">\n <mat-icon>account_tree</mat-icon>\n Add prerequisite\n </a>\n </div>\n</mat-menu>\n", styles: ["html{--mat-button-filled-container-height: 28px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 28px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 28px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 28px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 28px;--mat-button-tonal-touch-target-display: none}html{--mat-icon-button-touch-target-display: none}.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}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.or-chip .mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.or-chip{display:flex;justify-content:center;z-index:910;min-height:30px;margin:-11px 15px -9px 0}.or-chip .chip-container{z-index:910;align-self:center;margin-top:0}.targeting-rule-outer{display:flex;margin-right:20px}.targeting-rule-outer .drag-handle{align-self:center;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;min-width:16px;max-width:16px;color:var(--flag-box-control)}.targeting-rule-outer .drag-handle mat-icon{font-size:18px}.targeting-rule-outer .drag-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.targeting-rule-outer .white-box{background-color:var(--flag-box-rule-background);display:flex;flex-wrap:wrap;border:var(--flag-box-rule-border);padding:8px 0;border-radius:6px;position:relative}.targeting-rule-outer .white-box .delete{color:var(--flag-delete-btn);position:absolute;cursor:pointer;top:-16px;right:-16px;z-index:900}.targeting-rule-outer .white-box .delete button{display:flex;align-items:center;justify-content:center}.targeting-rule-outer .white-box .delete mat-icon{font-size:20px;height:20px;width:20px;z-index:900;background-color:var(--flag-box-rule-control-background);border-radius:50%}.targeting-rule-outer .white-box .chip-container{margin-top:4px}.targeting-rule-outer .vertical-center{align-items:center}.targeting-rule-outer .grow{flex-grow:1}.targeting-rule-outer .side-padd{padding-left:16px;padding-right:16px}.targeting-rule-outer .add-box{margin-left:16px;display:flex}.targeting-rule-outer .add-box .add-if{min-width:53.5px;padding:5px 2px 5px 0}.targeting-rule-outer .add-box .add-if:hover{background-color:var(--flag-box-control-hover)}.targeting-rule-outer .add-box .add-if{justify-content:center;text-align:center;color:var(--flag-box-control);border:var(--flag-box-control-button-border);background-color:var(--flag-box-control-background);border-radius:50px}.targeting-rule-outer .add-box .pad-left{margin-left:5px}.targeting-rule-outer .center-shift{margin-right:10px}.targeting-rule-outer .left-align{justify-content:left}.targeting-rule-outer .pad-bottom{margin-bottom:8px}.targeting-rule-outer .pad-top{margin-top:8px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TargetingRuleComponent, selector: "app-targeting-rule", inputs: ["formGroup", "segments", "flagState", "targetingRuleIndex", "featureFlagLimitations", "canManageSegments", "canCreateOrUpdateSetting", "percentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "removedAllRules", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested", "prerequisiteConditionChanged", "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: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["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"] }] }); }
|
|
5945
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: EvaluationFormulaComponent, isStandalone: true, selector: "app-evaluation-formula", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, canManageSegments: { classPropertyName: "canManageSegments", publicName: "canManageSegments", isSignal: true, isRequired: true, transformFunction: null }, canCreateOrUpdateSetting: { classPropertyName: "canCreateOrUpdateSetting", publicName: "canCreateOrUpdateSetting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createSegmentRequested: "createSegmentRequested", manageSegmentsRequested: "manageSegmentsRequested", addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", changePercentageEvaluationAttributeRequested: "changePercentageEvaluationAttributeRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@if (flagState().addButtonRenderState.renderTopAddButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom left-align\">\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ IF</div>\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div class=\"add-btn add-if pad-left\" matTooltip=\"Target a percentage of users\" (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n}\n\n<div\n cdkDropList\n [cdkDropListDisabled]=\"flagState().readOnly\"\n [cdkDropListSortPredicate]=\"sortPredicate()\"\n [cdkDropListData]=\"formGroup().controls.targetingRules.controls\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (targetingRule of formGroup().controls.targetingRules.controls; track $index; let i = $index) {\n <div>\n <div\n class=\"targeting-rule-outer grow\"\n cdkDrag\n [cdkDragDisabled]=\"isDragDisabled(targetingRule)\"\n [cdkDragData]=\"targetingRule\">\n <div class=\"drag-handle\">\n @if (!isDragDisabled(targetingRule)) {\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n </div>\n <div class=\"white-box grow\">\n <app-targeting-rule\n class=\"grow\"\n [formGroup]=\"targetingRule\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"i\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"canManageSegments()\"\n [percentageEvaluationAttribute]=\"formGroup().controls.percentageEvaluationAttribute.value\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (removedAllRules)=\"remove(i)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisiteReferences()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n <div class=\"delete\">\n @if (!flagState().readOnly) {\n <button type=\"button\" mat-icon-button matTooltip=\"Remove targeting rule\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n }\n </div>\n </div>\n </div>\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showAddRuleButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom pad-top center-shift\">\n @if (!flagState().readOnly) {\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ OR</div>\n }\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div\n class=\"add-btn add-if pad-left\"\n matTooltip=\"Target a percentage of users\"\n (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showOrChip) {\n <div class=\"or-chip\">\n <div class=\"chip-container\">\n <mat-chip-set>\n <mat-chip disabled>OR</mat-chip>\n </mat-chip-set>\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].renderSeparationArea) {\n <div class=\"or-chip\"></div>\n }\n </div>\n }\n</div>\n\n<div class=\"targeting-rule-outer\">\n <div class=\"drag-handle\"></div>\n <div class=\"white-box grow side-padd vertical-center\">\n <div\n class=\"chip-container fixed-width\"\n [ngClass]=\"flagState().addButtonRenderState.hasPercentageOnlyRule ? 'fixed-width-wide' : ''\">\n <mat-chip-set matTooltipPosition=\"above\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n <app-feature-flag-value\n class=\"value grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n</div>\n\n<mat-menu #ormenu>\n <a mat-menu-item (click)=\"addUserCondition()\">\n <mat-icon>track_changes</mat-icon>\n Target users\n </a>\n <a mat-menu-item (click)=\"addSegmentCondition()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n Target a segment\n </a>\n <div\n matTooltip=\"There's no other flag in the config to select as a prerequisite.\"\n [matTooltipDisabled]=\"flagState().prerequisiteSettings.length > 0\">\n <a mat-menu-item [disabled]=\"!flagState().prerequisiteSettings.length\" (click)=\"addPrerequisiteFlagCondition()\">\n <mat-icon>account_tree</mat-icon>\n Add prerequisite\n </a>\n </div>\n</mat-menu>\n", styles: ["html{--mat-button-filled-container-height: 28px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 28px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 28px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 28px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 28px;--mat-button-tonal-touch-target-display: none}html{--mat-icon-button-touch-target-display: none}.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}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.or-chip .mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.or-chip{display:flex;justify-content:center;z-index:910;min-height:30px;margin:-11px 15px -9px 0}.or-chip .chip-container{z-index:910;align-self:center;margin-top:0}.targeting-rule-outer{display:flex;min-width:0;margin-right:20px}.targeting-rule-outer .drag-handle{align-self:center;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;min-width:16px;max-width:16px;color:var(--flag-box-control)}.targeting-rule-outer .drag-handle mat-icon{font-size:18px}.targeting-rule-outer .drag-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.targeting-rule-outer .white-box{background-color:var(--flag-box-rule-background);display:flex;flex-wrap:wrap;min-width:0;border:var(--flag-box-rule-border);padding:8px 0;border-radius:6px;position:relative}.targeting-rule-outer .white-box .delete{color:var(--flag-delete-btn);position:absolute;cursor:pointer;top:-16px;right:-16px;z-index:900}.targeting-rule-outer .white-box .delete button{display:flex;align-items:center;justify-content:center}.targeting-rule-outer .white-box .delete mat-icon{font-size:20px;height:20px;width:20px;z-index:900;background-color:var(--flag-box-rule-control-background);border-radius:50%}.targeting-rule-outer .white-box .chip-container{margin-top:4px}.targeting-rule-outer .vertical-center{align-items:center}.targeting-rule-outer .grow{flex-grow:1;min-width:0}.targeting-rule-outer .side-padd{padding-left:16px;padding-right:16px}.targeting-rule-outer .add-box{margin-left:16px;display:flex}.targeting-rule-outer .add-box .add-if{min-width:53.5px;padding:5px 2px 5px 0}.targeting-rule-outer .add-box .add-if:hover{background-color:var(--flag-box-control-hover)}.targeting-rule-outer .add-box .add-if{justify-content:center;text-align:center;color:var(--flag-box-control);border:var(--flag-box-control-button-border);background-color:var(--flag-box-control-background);border-radius:50px}.targeting-rule-outer .add-box .pad-left{margin-left:5px}.targeting-rule-outer .center-shift{margin-right:10px}.targeting-rule-outer .left-align{justify-content:left}.targeting-rule-outer .pad-bottom{margin-bottom:8px}.targeting-rule-outer .pad-top{margin-top:8px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TargetingRuleComponent, selector: "app-targeting-rule", inputs: ["formGroup", "segments", "flagState", "targetingRuleIndex", "featureFlagLimitations", "canManageSegments", "canCreateOrUpdateSetting", "percentageEvaluationAttribute"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "removedAllRules", "subscriptionLimitReached", "changePercentageEvaluationAttributeRequested", "prerequisiteConditionChanged", "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: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["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"] }] }); }
|
|
5894
5946
|
}
|
|
5895
5947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: EvaluationFormulaComponent, decorators: [{
|
|
5896
5948
|
type: Component,
|
|
@@ -5912,7 +5964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
5912
5964
|
FeatureFlagValueComponent,
|
|
5913
5965
|
MatMenu,
|
|
5914
5966
|
MatMenuItem,
|
|
5915
|
-
], template: "@if (flagState().addButtonRenderState.renderTopAddButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom left-align\">\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ IF</div>\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div class=\"add-btn add-if pad-left\" matTooltip=\"Target a percentage of users\" (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n}\n\n<div\n cdkDropList\n [cdkDropListDisabled]=\"flagState().readOnly\"\n [cdkDropListSortPredicate]=\"sortPredicate()\"\n [cdkDropListData]=\"formGroup().controls.targetingRules.controls\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (targetingRule of formGroup().controls.targetingRules.controls; track $index; let i = $index) {\n <div>\n <div\n class=\"targeting-rule-outer grow\"\n cdkDrag\n [cdkDragDisabled]=\"isDragDisabled(targetingRule)\"\n [cdkDragData]=\"targetingRule\">\n <div class=\"drag-handle\">\n @if (!isDragDisabled(targetingRule)) {\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n </div>\n <div class=\"white-box grow\">\n <app-targeting-rule\n class=\"grow\"\n [formGroup]=\"targetingRule\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"i\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"canManageSegments()\"\n [percentageEvaluationAttribute]=\"formGroup().controls.percentageEvaluationAttribute.value\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (removedAllRules)=\"remove(i)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisiteReferences()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n <div class=\"delete\">\n @if (!flagState().readOnly) {\n <button type=\"button\" mat-icon-button matTooltip=\"Remove targeting rule\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n }\n </div>\n </div>\n </div>\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showAddRuleButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom pad-top center-shift\">\n @if (!flagState().readOnly) {\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ OR</div>\n }\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div\n class=\"add-btn add-if pad-left\"\n matTooltip=\"Target a percentage of users\"\n (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showOrChip) {\n <div class=\"or-chip\">\n <div class=\"chip-container\">\n <mat-chip-set>\n <mat-chip disabled>OR</mat-chip>\n </mat-chip-set>\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].renderSeparationArea) {\n <div class=\"or-chip\"></div>\n }\n </div>\n }\n</div>\n\n<div class=\"targeting-rule-outer\">\n <div class=\"drag-handle\"></div>\n <div class=\"white-box grow side-padd vertical-center\">\n <div\n class=\"chip-container fixed-width\"\n [ngClass]=\"flagState().addButtonRenderState.hasPercentageOnlyRule ? 'fixed-width-wide' : ''\">\n <mat-chip-set matTooltipPosition=\"above\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n <app-feature-flag-value\n class=\"value grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n</div>\n\n<mat-menu #ormenu>\n <a mat-menu-item (click)=\"addUserCondition()\">\n <mat-icon>track_changes</mat-icon>\n Target users\n </a>\n <a mat-menu-item (click)=\"addSegmentCondition()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n Target a segment\n </a>\n <div\n matTooltip=\"There's no other flag in the config to select as a prerequisite.\"\n [matTooltipDisabled]=\"flagState().prerequisiteSettings.length > 0\">\n <a mat-menu-item [disabled]=\"!flagState().prerequisiteSettings.length\" (click)=\"addPrerequisiteFlagCondition()\">\n <mat-icon>account_tree</mat-icon>\n Add prerequisite\n </a>\n </div>\n</mat-menu>\n", styles: ["html{--mat-button-filled-container-height: 28px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 28px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 28px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 28px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 28px;--mat-button-tonal-touch-target-display: none}html{--mat-icon-button-touch-target-display: none}.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}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.or-chip .mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.or-chip{display:flex;justify-content:center;z-index:910;min-height:30px;margin:-11px 15px -9px 0}.or-chip .chip-container{z-index:910;align-self:center;margin-top:0}.targeting-rule-outer{display:flex;margin-right:20px}.targeting-rule-outer .drag-handle{align-self:center;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;min-width:16px;max-width:16px;color:var(--flag-box-control)}.targeting-rule-outer .drag-handle mat-icon{font-size:18px}.targeting-rule-outer .drag-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.targeting-rule-outer .white-box{background-color:var(--flag-box-rule-background);display:flex;flex-wrap:wrap;border:var(--flag-box-rule-border);padding:8px 0;border-radius:6px;position:relative}.targeting-rule-outer .white-box .delete{color:var(--flag-delete-btn);position:absolute;cursor:pointer;top:-16px;right:-16px;z-index:900}.targeting-rule-outer .white-box .delete button{display:flex;align-items:center;justify-content:center}.targeting-rule-outer .white-box .delete mat-icon{font-size:20px;height:20px;width:20px;z-index:900;background-color:var(--flag-box-rule-control-background);border-radius:50%}.targeting-rule-outer .white-box .chip-container{margin-top:4px}.targeting-rule-outer .vertical-center{align-items:center}.targeting-rule-outer .grow{flex-grow:1}.targeting-rule-outer .side-padd{padding-left:16px;padding-right:16px}.targeting-rule-outer .add-box{margin-left:16px;display:flex}.targeting-rule-outer .add-box .add-if{min-width:53.5px;padding:5px 2px 5px 0}.targeting-rule-outer .add-box .add-if:hover{background-color:var(--flag-box-control-hover)}.targeting-rule-outer .add-box .add-if{justify-content:center;text-align:center;color:var(--flag-box-control);border:var(--flag-box-control-button-border);background-color:var(--flag-box-control-background);border-radius:50px}.targeting-rule-outer .add-box .pad-left{margin-left:5px}.targeting-rule-outer .center-shift{margin-right:10px}.targeting-rule-outer .left-align{justify-content:left}.targeting-rule-outer .pad-bottom{margin-bottom:8px}.targeting-rule-outer .pad-top{margin-top:8px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"] }]
|
|
5967
|
+
], template: "@if (flagState().addButtonRenderState.renderTopAddButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom left-align\">\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ IF</div>\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div class=\"add-btn add-if pad-left\" matTooltip=\"Target a percentage of users\" (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n}\n\n<div\n cdkDropList\n [cdkDropListDisabled]=\"flagState().readOnly\"\n [cdkDropListSortPredicate]=\"sortPredicate()\"\n [cdkDropListData]=\"formGroup().controls.targetingRules.controls\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (targetingRule of formGroup().controls.targetingRules.controls; track $index; let i = $index) {\n <div>\n <div\n class=\"targeting-rule-outer grow\"\n cdkDrag\n [cdkDragDisabled]=\"isDragDisabled(targetingRule)\"\n [cdkDragData]=\"targetingRule\">\n <div class=\"drag-handle\">\n @if (!isDragDisabled(targetingRule)) {\n <div cdkDragHandle matTooltip=\"Drag here to reorder\" matTooltipPosition=\"above\">\n <mat-icon>drag_indicator</mat-icon>\n </div>\n }\n </div>\n <div class=\"white-box grow\">\n <app-targeting-rule\n class=\"grow\"\n [formGroup]=\"targetingRule\"\n [segments]=\"segments()\"\n [flagState]=\"flagState()\"\n [targetingRuleIndex]=\"i\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"canManageSegments()\"\n [percentageEvaluationAttribute]=\"formGroup().controls.percentageEvaluationAttribute.value\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n (removedAllRules)=\"remove(i)\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (createSegmentRequested)=\"createSegmentRequested.emit()\"\n (manageSegmentsRequested)=\"manageSegmentsRequested.emit()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttributeRequested.emit()\"\n (prerequisiteConditionChanged)=\"recalcPrerequisiteReferences()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n <div class=\"delete\">\n @if (!flagState().readOnly) {\n <button type=\"button\" mat-icon-button matTooltip=\"Remove targeting rule\" (click)=\"remove(i)\">\n <mat-icon class=\"icon-transform-rotate\">cancel</mat-icon>\n </button>\n }\n </div>\n </div>\n </div>\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showAddRuleButtons && !flagState().readOnly) {\n <div class=\"targeting-rule-outer\">\n <div class=\"grow vertical-center add-box pad-bottom pad-top center-shift\">\n @if (!flagState().readOnly) {\n <div class=\"add-btn add-if\" matTooltip=\"Add targeting rule\" [matMenuTriggerFor]=\"ormenu\">+ OR</div>\n }\n @if (!flagState().addButtonRenderState.hasPercentageOnlyRule) {\n <div\n class=\"add-btn add-if pad-left\"\n matTooltip=\"Target a percentage of users\"\n (click)=\"addPercentageOptions()\">\n + %\n </div>\n }\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].showOrChip) {\n <div class=\"or-chip\">\n <div class=\"chip-container\">\n <mat-chip-set>\n <mat-chip disabled>OR</mat-chip>\n </mat-chip-set>\n </div>\n </div>\n }\n @if (flagState().addButtonRenderState.addRuleButtonTracker[i].renderSeparationArea) {\n <div class=\"or-chip\"></div>\n }\n </div>\n }\n</div>\n\n<div class=\"targeting-rule-outer\">\n <div class=\"drag-handle\"></div>\n <div class=\"white-box grow side-padd vertical-center\">\n <div\n class=\"chip-container fixed-width\"\n [ngClass]=\"flagState().addButtonRenderState.hasPercentageOnlyRule ? 'fixed-width-wide' : ''\">\n <mat-chip-set matTooltipPosition=\"above\" [matTooltip]=\"getChipTooltip()\">\n <mat-chip disabled>{{ getChipText() }}</mat-chip>\n </mat-chip-set>\n </div>\n <app-feature-flag-value\n class=\"value grow\"\n tooltip=\"Served value\"\n [setting]=\"flagState().settingValue.setting\"\n [canCreateOrUpdateSetting]=\"canCreateOrUpdateSetting()\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n</div>\n\n<mat-menu #ormenu>\n <a mat-menu-item (click)=\"addUserCondition()\">\n <mat-icon>track_changes</mat-icon>\n Target users\n </a>\n <a mat-menu-item (click)=\"addSegmentCondition()\">\n <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n Target a segment\n </a>\n <div\n matTooltip=\"There's no other flag in the config to select as a prerequisite.\"\n [matTooltipDisabled]=\"flagState().prerequisiteSettings.length > 0\">\n <a mat-menu-item [disabled]=\"!flagState().prerequisiteSettings.length\" (click)=\"addPrerequisiteFlagCondition()\">\n <mat-icon>account_tree</mat-icon>\n Add prerequisite\n </a>\n </div>\n</mat-menu>\n", styles: ["html{--mat-button-filled-container-height: 28px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 28px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 28px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 28px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 28px;--mat-button-tonal-touch-target-display: none}html{--mat-icon-button-touch-target-display: none}.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}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.or-chip .mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 24px}.or-chip{display:flex;justify-content:center;z-index:910;min-height:30px;margin:-11px 15px -9px 0}.or-chip .chip-container{z-index:910;align-self:center;margin-top:0}.targeting-rule-outer{display:flex;min-width:0;margin-right:20px}.targeting-rule-outer .drag-handle{align-self:center;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;min-width:16px;max-width:16px;color:var(--flag-box-control)}.targeting-rule-outer .drag-handle mat-icon{font-size:18px}.targeting-rule-outer .drag-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.targeting-rule-outer .white-box{background-color:var(--flag-box-rule-background);display:flex;flex-wrap:wrap;min-width:0;border:var(--flag-box-rule-border);padding:8px 0;border-radius:6px;position:relative}.targeting-rule-outer .white-box .delete{color:var(--flag-delete-btn);position:absolute;cursor:pointer;top:-16px;right:-16px;z-index:900}.targeting-rule-outer .white-box .delete button{display:flex;align-items:center;justify-content:center}.targeting-rule-outer .white-box .delete mat-icon{font-size:20px;height:20px;width:20px;z-index:900;background-color:var(--flag-box-rule-control-background);border-radius:50%}.targeting-rule-outer .white-box .chip-container{margin-top:4px}.targeting-rule-outer .vertical-center{align-items:center}.targeting-rule-outer .grow{flex-grow:1;min-width:0}.targeting-rule-outer .side-padd{padding-left:16px;padding-right:16px}.targeting-rule-outer .add-box{margin-left:16px;display:flex}.targeting-rule-outer .add-box .add-if{min-width:53.5px;padding:5px 2px 5px 0}.targeting-rule-outer .add-box .add-if:hover{background-color:var(--flag-box-control-hover)}.targeting-rule-outer .add-box .add-if{justify-content:center;text-align:center;color:var(--flag-box-control);border:var(--flag-box-control-button-border);background-color:var(--flag-box-control-background);border-radius:50px}.targeting-rule-outer .add-box .pad-left{margin-left:5px}.targeting-rule-outer .center-shift{margin-right:10px}.targeting-rule-outer .left-align{justify-content:left}.targeting-rule-outer .pad-bottom{margin-bottom:8px}.targeting-rule-outer .pad-top{margin-top:8px}\n", ".chip-container{display:flex;margin-top:2px;align-self:start}.chip-container.fixed-width{width:110px}.chip-container.fixed-width-wide{width:130px}.chip-container mat-chip-set{margin-top:2px;width:100%}.chip-container mat-chip-set mat-chip{width:100%;margin-top:0;margin-bottom:0;height:24px;font-size:12px;background-color:var(--flag-chip-background);opacity:1}.chip-container .enter-sign{color:var(--flag-enter-sign);margin:6px 3px 0 8px}.chip-container .enter-sign mat-icon{font-size:16px;width:16px;height:16px}\n", ".add-btn{cursor:pointer;background-color:transparent;display:flex;font-size:10px;align-items:center;border:var(--flag-box-control-button-border);color:var(--flag-box-control);border-radius:15px}.add-btn:hover{background-color:var(--flag-box-control-hover)!important}\n"] }]
|
|
5916
5968
|
}], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], canManageSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "canManageSegments", required: true }] }], canCreateOrUpdateSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreateOrUpdateSetting", required: true }] }], createSegmentRequested: [{ type: i0.Output, args: ["createSegmentRequested"] }], manageSegmentsRequested: [{ type: i0.Output, args: ["manageSegmentsRequested"] }], addSegmentConditionRequestedWithoutSegments: [{ type: i0.Output, args: ["addSegmentConditionRequestedWithoutSegments"] }], changePercentageEvaluationAttributeRequested: [{ type: i0.Output, args: ["changePercentageEvaluationAttributeRequested"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], recalcAddButtons: [{ type: i0.Output, args: ["recalcAddButtons"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
5917
5969
|
|
|
5918
5970
|
class PercentageEvaluationAttributeDialogComponent {
|
|
@@ -5964,7 +6016,7 @@ class PercentageEvaluationAttributeDialogComponent {
|
|
|
5964
6016
|
this.dialogRef.close({ percentageEvaluationAttribute: percentageEvaluationAttributeFilter });
|
|
5965
6017
|
}
|
|
5966
6018
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5967
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: PercentageEvaluationAttributeDialogComponent, isStandalone: true, selector: "app-percentage-evaluation-attribute-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Change percentage evaluation attribute</h1>\n<div mat-dialog-content class=\"container\">\n <p class=\"description\">\n When evaluating percentage-based user targeting, ConfigCat should use a specific user attribute as the basis for\n determining whether a user falls within the targeted percentage group.\n </p>\n\n <div class=\"components\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Evaluation attribute</mat-label>\n <mat-hint>This attribute will be used in all percentage based targeting within this feature flag.</mat-hint>\n <mat-select\n [disabled]=\"formControl.disabled\"\n [(value)]=\"selectedValue\"\n (selectionChange)=\"attributeChanged(selectedValue)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n }\n <mat-option value=\"Custom\">Custom</mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"custom\" [hidden]=\"!isCustom()\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Custom attribute</mat-label>\n <input matInput type=\"text\" [formControl]=\"formControl\" />\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n <p class=\"read-more\">\n <a\n href=\"https://configcat.com/docs/targeting/percentage-options/#percentage-options-based-on-other-user-attributes\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Read more\n </a>\n about percentage-based targeting in the docs.\n </p>\n</div>\n<div mat-dialog-actions>\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n</div>\n", styles: [".container{width:100%;display:flex;flex-direction:column}.container .description{padding:5px 0 10px}.container .components{display:flex}.container .components .custom{margin-left:
|
|
6019
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: PercentageEvaluationAttributeDialogComponent, isStandalone: true, selector: "app-percentage-evaluation-attribute-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Change percentage evaluation attribute</h1>\n<div mat-dialog-content class=\"container\">\n <p class=\"description\">\n When evaluating percentage-based user targeting, ConfigCat should use a specific user attribute as the basis for\n determining whether a user falls within the targeted percentage group.\n </p>\n\n <div class=\"components\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Evaluation attribute</mat-label>\n <mat-hint>This attribute will be used in all percentage based targeting within this feature flag.</mat-hint>\n <mat-select\n [disabled]=\"formControl.disabled\"\n [(value)]=\"selectedValue\"\n (selectionChange)=\"attributeChanged(selectedValue)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n }\n <mat-option value=\"Custom\">Custom</mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"custom\" [hidden]=\"!isCustom()\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Custom attribute</mat-label>\n <input matInput type=\"text\" [formControl]=\"formControl\" />\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n <p class=\"read-more\">\n <a\n href=\"https://configcat.com/docs/targeting/percentage-options/#percentage-options-based-on-other-user-attributes\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Read more\n </a>\n about percentage-based targeting in the docs.\n </p>\n</div>\n<div mat-dialog-actions>\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n</div>\n", styles: [".container{width:100%;display:flex;flex-direction:column}.container .description{padding:5px 0 10px}.container .components{display:flex;flex-wrap:wrap;gap:16px}.container .components>*{flex:1 1 160px;min-width:0}.container .components mat-form-field{width:100%}.container .components .custom{margin-left:0}.container .read-more{padding-top:5px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "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: 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: "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: 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"] }] }); }
|
|
5968
6020
|
}
|
|
5969
6021
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PercentageEvaluationAttributeDialogComponent, decorators: [{
|
|
5970
6022
|
type: Component,
|
|
@@ -5985,7 +6037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
5985
6037
|
MatDialogActions,
|
|
5986
6038
|
MatButton,
|
|
5987
6039
|
MatDialogClose,
|
|
5988
|
-
], template: "<h1 mat-dialog-title>Change percentage evaluation attribute</h1>\n<div mat-dialog-content class=\"container\">\n <p class=\"description\">\n When evaluating percentage-based user targeting, ConfigCat should use a specific user attribute as the basis for\n determining whether a user falls within the targeted percentage group.\n </p>\n\n <div class=\"components\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Evaluation attribute</mat-label>\n <mat-hint>This attribute will be used in all percentage based targeting within this feature flag.</mat-hint>\n <mat-select\n [disabled]=\"formControl.disabled\"\n [(value)]=\"selectedValue\"\n (selectionChange)=\"attributeChanged(selectedValue)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n }\n <mat-option value=\"Custom\">Custom</mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"custom\" [hidden]=\"!isCustom()\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Custom attribute</mat-label>\n <input matInput type=\"text\" [formControl]=\"formControl\" />\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n <p class=\"read-more\">\n <a\n href=\"https://configcat.com/docs/targeting/percentage-options/#percentage-options-based-on-other-user-attributes\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Read more\n </a>\n about percentage-based targeting in the docs.\n </p>\n</div>\n<div mat-dialog-actions>\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n</div>\n", styles: [".container{width:100%;display:flex;flex-direction:column}.container .description{padding:5px 0 10px}.container .components{display:flex}.container .components .custom{margin-left:
|
|
6040
|
+
], template: "<h1 mat-dialog-title>Change percentage evaluation attribute</h1>\n<div mat-dialog-content class=\"container\">\n <p class=\"description\">\n When evaluating percentage-based user targeting, ConfigCat should use a specific user attribute as the basis for\n determining whether a user falls within the targeted percentage group.\n </p>\n\n <div class=\"components\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Evaluation attribute</mat-label>\n <mat-hint>This attribute will be used in all percentage based targeting within this feature flag.</mat-hint>\n <mat-select\n [disabled]=\"formControl.disabled\"\n [(value)]=\"selectedValue\"\n (selectionChange)=\"attributeChanged(selectedValue)\">\n @for (comparisonAttribute of defaultComparisonAttributes; track $index) {\n <mat-option [value]=\"comparisonAttribute\">{{ comparisonAttribute }}</mat-option>\n }\n <mat-option value=\"Custom\">Custom</mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"custom\" [hidden]=\"!isCustom()\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Custom attribute</mat-label>\n <input matInput type=\"text\" [formControl]=\"formControl\" />\n @if (formControl.invalid) {\n <mat-error>\n {{ FormHelper.getErrorMessage(formControl) }}\n </mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n <p class=\"read-more\">\n <a\n href=\"https://configcat.com/docs/targeting/percentage-options/#percentage-options-based-on-other-user-attributes\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Read more\n </a>\n about percentage-based targeting in the docs.\n </p>\n</div>\n<div mat-dialog-actions>\n <button type=\"button\" mat-flat-button color=\"primary\" (click)=\"set()\">Set</button>\n <button type=\"button\" mat-stroked-button [mat-dialog-close]>Cancel</button>\n</div>\n", styles: [".container{width:100%;display:flex;flex-direction:column}.container .description{padding:5px 0 10px}.container .components{display:flex;flex-wrap:wrap;gap:16px}.container .components>*{flex:1 1 160px;min-width:0}.container .components mat-form-field{width:100%}.container .components .custom{margin-left:0}.container .read-more{padding-top:5px}\n"] }]
|
|
5989
6041
|
}] });
|
|
5990
6042
|
|
|
5991
6043
|
class FeatureFlagComponent {
|