ng-configcat-publicapi-ui 5.3.7 → 5.3.8
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.
|
@@ -6167,7 +6167,7 @@ class FeatureFlagComponent {
|
|
|
6167
6167
|
});
|
|
6168
6168
|
}
|
|
6169
6169
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeatureFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FeatureFlagComponent, isStandalone: true, selector: "app-feature-flag", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, hasOtherEnvironment: { classPropertyName: "hasOtherEnvironment", publicName: "hasOtherEnvironment", isSignal: true, isRequired: true, transformFunction: null }, environmentName: { classPropertyName: "environmentName", publicName: "environmentName", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, predefinedVariationsEnabled: { classPropertyName: "predefinedVariationsEnabled", publicName: "predefinedVariationsEnabled", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n <div class=\"wrapper\">\n <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n <div class=\"expandcollapse\">\n @if (flagStateValue.panelExpanded) {\n <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_up</mat-icon>\n </div>\n } @else {\n <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_down</mat-icon>\n </div>\n }\n </div>\n <div class=\"header\">\n <div class=\"top\">\n <div class=\"left\">\n <div class=\"name-key\">\n <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n {{ flagStateValue.settingValue.setting.name }}\n </span>\n @if (showEnvironmentName()) {\n <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n }\n <div class=\"key\">\n <app-copyable-value\n [tooltip]=\"\n `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n \"\n [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [value]=\"flagStateValue.settingValue.setting.key\"\n [smallest]=\"true\"\n [dark]=\"true\"\n [wholeControlCopyable]=\"true\" />\n </div>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"line\">\n @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n <button\n type=\"button\"\n class=\"prereq-button\"\n mat-icon-button\n [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n (click)=\"openDependeesDialog()\">\n <mat-icon>account_tree</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n class=\"more-button\"\n mat-icon-button\n matTooltip=\"More\"\n [matMenuTriggerFor]=\"moreMenu\"\n [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"description-container\">\n <div class=\"description-tags\">\n @if (flagStateValue.settingValue.setting.hint) {\n <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n {{ flagStateValue.settingValue.setting.hint }}\n </div>\n }\n\n @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n <app-feature-flag-value\n class=\"glance\"\n tooltip=\"Served value\"\n [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n [setting]=\"flagStateValue.settingValue.setting\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"true\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n\n @if (getGlance(); as glance) {\n <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <div class=\"container\" [ngClass]=\"glance.class\">\n @if (glance.percentageText) {\n <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n }\n @if (glance.ruleText) {\n <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (flagStateValue.panelExpanded) {\n <div class=\"eval-formula-wrapper\">\n <app-evaluation-formula\n [formGroup]=\"formGroup()\"\n [flagState]=\"flagStateValue\"\n [segments]=\"segments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"false\"\n [canCreateOrUpdateSetting]=\"true\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n (recalcAddButtons)=\"recalcAddButtons.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n }\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n <div\n mat-menu-item\n data-robot=\"history\"\n [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n [disabled]=\"flagStateValue.readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n <mat-icon>percent</mat-icon>\n <span>Change percentage attribute</span>\n </div>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n <div mat-menu-item data-robot=\"history\">\n <mat-icon>open_in_new</mat-icon>\n <span>Open in ConfigCat</span>\n </div>\n </a>\n <div\n mat-menu-item\n data-robot=\"renameSetting\"\n [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n (click)=\"copyDirectLink()\">\n <mat-icon>content_copy</mat-icon>\n <span>Copy direct link</span>\n </div>\n @if (canDeleteSetting()) {\n <div>\n <mat-divider />\n <div\n mat-menu-item\n data-robot=\"deleteSetting\"\n [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n (click)=\"deleteSetting()\">\n <mat-icon>delete_outline</mat-icon>\n <span>{{ deleteSettingText() }}</span>\n </div>\n </div>\n }\n @if (predefinedVariationsEnabled()) {\n @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n <mat-divider />\n <div\n mat-menu-item\n [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n (click)=\"\n viewVariationsRequested.emit({\n settingId: flagStateValue.settingValue.setting.settingId,\n settingName: flagStateValue.settingValue.setting.name,\n })\n \">\n <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n <span>Manage predefined variations</span>\n <!-- @if (permissions().canCreateOrUpdateSetting) {\n <span>Manage predefined variations</span>\n } @else {\n <span>View predefined variations</span>\n } -->\n </div>\n }\n }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:10px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:100%;height:100%;position:absolute;background-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:100%;height:100%;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "featureFlagLimitations", "canManageSegments", "canCreateOrUpdateSetting"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons", "viewVariationsRequested"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }] }); }
|
|
6170
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FeatureFlagComponent, isStandalone: true, selector: "app-feature-flag", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, flagState: { classPropertyName: "flagState", publicName: "flagState", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, featureFlagLimitations: { classPropertyName: "featureFlagLimitations", publicName: "featureFlagLimitations", isSignal: true, isRequired: true, transformFunction: null }, hasOtherEnvironment: { classPropertyName: "hasOtherEnvironment", publicName: "hasOtherEnvironment", isSignal: true, isRequired: true, transformFunction: null }, environmentName: { classPropertyName: "environmentName", publicName: "environmentName", isSignal: true, isRequired: false, transformFunction: null }, showEnvironmentName: { classPropertyName: "showEnvironmentName", publicName: "showEnvironmentName", isSignal: true, isRequired: false, transformFunction: null }, deleteSettingText: { classPropertyName: "deleteSettingText", publicName: "deleteSettingText", isSignal: true, isRequired: false, transformFunction: null }, canDeleteSetting: { classPropertyName: "canDeleteSetting", publicName: "canDeleteSetting", isSignal: true, isRequired: false, transformFunction: null }, predefinedVariationsEnabled: { classPropertyName: "predefinedVariationsEnabled", publicName: "predefinedVariationsEnabled", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addSegmentConditionRequestedWithoutSegments: "addSegmentConditionRequestedWithoutSegments", expandedChanged: "expandedChanged", deleteSettingRequested: "deleteSettingRequested", subscriptionLimitReached: "subscriptionLimitReached", prerequisiteConditionChanged: "prerequisiteConditionChanged", recalcAddButtons: "recalcAddButtons", viewVariationsRequested: "viewVariationsRequested" }, ngImport: i0, template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n <div class=\"wrapper\">\n <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n <div class=\"expandcollapse\">\n @if (flagStateValue.panelExpanded) {\n <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_up</mat-icon>\n </div>\n } @else {\n <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_down</mat-icon>\n </div>\n }\n </div>\n <div class=\"header\">\n <div class=\"top\">\n <div class=\"left\">\n <div class=\"name-key\">\n <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n {{ flagStateValue.settingValue.setting.name }}\n </span>\n @if (showEnvironmentName()) {\n <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n }\n <div class=\"key\">\n <app-copyable-value\n [tooltip]=\"\n `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n \"\n [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [value]=\"flagStateValue.settingValue.setting.key\"\n [smallest]=\"true\"\n [dark]=\"true\"\n [wholeControlCopyable]=\"true\" />\n </div>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"line\">\n @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n <button\n type=\"button\"\n class=\"prereq-button\"\n mat-icon-button\n [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n (click)=\"openDependeesDialog()\">\n <mat-icon>account_tree</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n class=\"more-button\"\n mat-icon-button\n matTooltip=\"More\"\n [matMenuTriggerFor]=\"moreMenu\"\n [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"description-container\">\n <div class=\"description-tags\">\n @if (flagStateValue.settingValue.setting.hint) {\n <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n {{ flagStateValue.settingValue.setting.hint }}\n </div>\n }\n\n @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n <app-feature-flag-value\n class=\"glance\"\n tooltip=\"Served value\"\n [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n [setting]=\"flagStateValue.settingValue.setting\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"true\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n\n @if (getGlance(); as glance) {\n <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <div class=\"container\" [ngClass]=\"glance.class\">\n @if (glance.percentageText) {\n <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n }\n @if (glance.ruleText) {\n <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (flagStateValue.panelExpanded) {\n <div class=\"eval-formula-wrapper\">\n <app-evaluation-formula\n [formGroup]=\"formGroup()\"\n [flagState]=\"flagStateValue\"\n [segments]=\"segments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"false\"\n [canCreateOrUpdateSetting]=\"true\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n (recalcAddButtons)=\"recalcAddButtons.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n }\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n <div\n mat-menu-item\n data-robot=\"history\"\n [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n [disabled]=\"flagStateValue.readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n <mat-icon>percent</mat-icon>\n <span>Change percentage attribute</span>\n </div>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n <div mat-menu-item data-robot=\"history\">\n <mat-icon>open_in_new</mat-icon>\n <span>Open in ConfigCat</span>\n </div>\n </a>\n <div\n mat-menu-item\n data-robot=\"renameSetting\"\n [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n (click)=\"copyDirectLink()\">\n <mat-icon>content_copy</mat-icon>\n <span>Copy direct link</span>\n </div>\n @if (canDeleteSetting()) {\n <div>\n <mat-divider />\n <div\n mat-menu-item\n data-robot=\"deleteSetting\"\n [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n (click)=\"deleteSetting()\">\n <mat-icon>delete_outline</mat-icon>\n <span>{{ deleteSettingText() }}</span>\n </div>\n </div>\n }\n @if (predefinedVariationsEnabled()) {\n @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n <mat-divider />\n <div\n mat-menu-item\n [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n (click)=\"\n viewVariationsRequested.emit({\n settingId: flagStateValue.settingValue.setting.settingId,\n settingName: flagStateValue.settingValue.setting.name,\n })\n \">\n <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n <span>Manage predefined variations</span>\n <!-- @if (permissions().canCreateOrUpdateSetting) {\n <span>Manage predefined variations</span>\n } @else {\n <span>View predefined variations</span>\n } -->\n </div>\n }\n }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:6px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:0;height:100%;position:absolute;box-sizing:border-box;border-left-width:6px;border-radius:6px 0 0 6px;border-style:solid;border-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:0;height:100%;box-sizing:border-box;border-left-width:6px;border-radius:6px 0 0 6px;border-style:solid;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:6px!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: TrackingDirective, selector: "[track]", inputs: ["track"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: FeatureFlagValueComponent, selector: "app-feature-flag-value", inputs: ["formGroup", "setting", "canCreateOrUpdateSetting", "notAvailablePredefinedVariationIds", "featureFlagLimitations", "isPrerequisite", "tooltip"], outputs: ["viewVariationsRequested"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: i2.RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "component", type: EvaluationFormulaComponent, selector: "app-evaluation-formula", inputs: ["formGroup", "segments", "flagState", "featureFlagLimitations", "canManageSegments", "canCreateOrUpdateSetting"], outputs: ["createSegmentRequested", "manageSegmentsRequested", "addSegmentConditionRequestedWithoutSegments", "changePercentageEvaluationAttributeRequested", "subscriptionLimitReached", "prerequisiteConditionChanged", "recalcAddButtons", "viewVariationsRequested"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: CopyableValueComponent, selector: "app-copyable-value", inputs: ["tooltip", "tooltipClass", "hint", "warnHint", "name", "value", "small", "bold", "borderless", "smallest", "dark", "wholeControlCopyable"] }] }); }
|
|
6171
6171
|
}
|
|
6172
6172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeatureFlagComponent, decorators: [{
|
|
6173
6173
|
type: Component,
|
|
@@ -6187,7 +6187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6187
6187
|
MatMenuItem,
|
|
6188
6188
|
MatDivider,
|
|
6189
6189
|
CopyableValueComponent,
|
|
6190
|
-
], template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n <div class=\"wrapper\">\n <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n <div class=\"expandcollapse\">\n @if (flagStateValue.panelExpanded) {\n <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_up</mat-icon>\n </div>\n } @else {\n <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_down</mat-icon>\n </div>\n }\n </div>\n <div class=\"header\">\n <div class=\"top\">\n <div class=\"left\">\n <div class=\"name-key\">\n <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n {{ flagStateValue.settingValue.setting.name }}\n </span>\n @if (showEnvironmentName()) {\n <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n }\n <div class=\"key\">\n <app-copyable-value\n [tooltip]=\"\n `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n \"\n [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [value]=\"flagStateValue.settingValue.setting.key\"\n [smallest]=\"true\"\n [dark]=\"true\"\n [wholeControlCopyable]=\"true\" />\n </div>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"line\">\n @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n <button\n type=\"button\"\n class=\"prereq-button\"\n mat-icon-button\n [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n (click)=\"openDependeesDialog()\">\n <mat-icon>account_tree</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n class=\"more-button\"\n mat-icon-button\n matTooltip=\"More\"\n [matMenuTriggerFor]=\"moreMenu\"\n [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"description-container\">\n <div class=\"description-tags\">\n @if (flagStateValue.settingValue.setting.hint) {\n <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n {{ flagStateValue.settingValue.setting.hint }}\n </div>\n }\n\n @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n <app-feature-flag-value\n class=\"glance\"\n tooltip=\"Served value\"\n [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n [setting]=\"flagStateValue.settingValue.setting\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"true\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n\n @if (getGlance(); as glance) {\n <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <div class=\"container\" [ngClass]=\"glance.class\">\n @if (glance.percentageText) {\n <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n }\n @if (glance.ruleText) {\n <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (flagStateValue.panelExpanded) {\n <div class=\"eval-formula-wrapper\">\n <app-evaluation-formula\n [formGroup]=\"formGroup()\"\n [flagState]=\"flagStateValue\"\n [segments]=\"segments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"false\"\n [canCreateOrUpdateSetting]=\"true\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n (recalcAddButtons)=\"recalcAddButtons.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n }\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n <div\n mat-menu-item\n data-robot=\"history\"\n [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n [disabled]=\"flagStateValue.readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n <mat-icon>percent</mat-icon>\n <span>Change percentage attribute</span>\n </div>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n <div mat-menu-item data-robot=\"history\">\n <mat-icon>open_in_new</mat-icon>\n <span>Open in ConfigCat</span>\n </div>\n </a>\n <div\n mat-menu-item\n data-robot=\"renameSetting\"\n [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n (click)=\"copyDirectLink()\">\n <mat-icon>content_copy</mat-icon>\n <span>Copy direct link</span>\n </div>\n @if (canDeleteSetting()) {\n <div>\n <mat-divider />\n <div\n mat-menu-item\n data-robot=\"deleteSetting\"\n [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n (click)=\"deleteSetting()\">\n <mat-icon>delete_outline</mat-icon>\n <span>{{ deleteSettingText() }}</span>\n </div>\n </div>\n }\n @if (predefinedVariationsEnabled()) {\n @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n <mat-divider />\n <div\n mat-menu-item\n [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n (click)=\"\n viewVariationsRequested.emit({\n settingId: flagStateValue.settingValue.setting.settingId,\n settingName: flagStateValue.settingValue.setting.name,\n })\n \">\n <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n <span>Manage predefined variations</span>\n <!-- @if (permissions().canCreateOrUpdateSetting) {\n <span>Manage predefined variations</span>\n } @else {\n <span>View predefined variations</span>\n } -->\n </div>\n }\n }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:10px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:100%;height:100%;position:absolute;background-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:100%;height:100%;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:0!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"] }]
|
|
6190
|
+
], template: "@let flagStateValue = flagState();\n\n<div class=\"outer\">\n <div class=\"wrapper\">\n <div class=\"mat-elevation-z0 feature-flag\" [ngClass]=\"{ invalid: formGroup().touched && formGroup().invalid }\">\n <div class=\"expandcollapse\">\n @if (flagStateValue.panelExpanded) {\n <div matTooltip=\"Collapse\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_up</mat-icon>\n </div>\n } @else {\n <div matTooltip=\"Expand\" class=\"btn\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <mat-icon>arrow_drop_down</mat-icon>\n </div>\n }\n </div>\n <div class=\"header\">\n <div class=\"top\">\n <div class=\"left\">\n <div class=\"name-key\">\n <span class=\"name\" [matTooltip]=\"flagStateValue.settingValue.setting.name\">\n {{ flagStateValue.settingValue.setting.name }}\n </span>\n @if (showEnvironmentName()) {\n <span class=\"environment-name\" [matTooltip]=\"environmentName()\">({{ environmentName() }})</span>\n }\n <div class=\"key\">\n <app-copyable-value\n [tooltip]=\"\n `Copy key to clipboard\\n(Setting type: ${flagStateValue.settingValue.setting.settingType})`\n \"\n [tooltipClass]=\"['wide-tooltip', 'multiline-tooltip', 'left-aligned']\"\n [value]=\"flagStateValue.settingValue.setting.key\"\n [smallest]=\"true\"\n [dark]=\"true\"\n [wholeControlCopyable]=\"true\" />\n </div>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"line\">\n @if (flagStateValue.dependeeSettings && flagStateValue.dependeeSettings.length) {\n <button\n type=\"button\"\n class=\"prereq-button\"\n mat-icon-button\n [track]=\"['prerequisite button click', 'Feature flags & settings V2 page']\"\n [matTooltip]=\"'Prerequisite of ' + flagStateValue.dependeeSettings.length + ' other flag(s).'\"\n (click)=\"openDependeesDialog()\">\n <mat-icon>account_tree</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n class=\"more-button\"\n mat-icon-button\n matTooltip=\"More\"\n [matMenuTriggerFor]=\"moreMenu\"\n [track]=\"['more menu button click', 'Feature flags & settings V2 page']\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"description-container\">\n <div class=\"description-tags\">\n @if (flagStateValue.settingValue.setting.hint) {\n <div class=\"hint\" [class.crop]=\"!flagStateValue.panelExpanded\">\n {{ flagStateValue.settingValue.setting.hint }}\n </div>\n }\n\n @if (!flagStateValue.panelExpanded && !formGroup().controls.targetingRules.length) {\n <app-feature-flag-value\n class=\"glance\"\n tooltip=\"Served value\"\n [class.text-glance]=\"flagStateValue.settingValue.setting.settingType !== 'boolean'\"\n [setting]=\"flagStateValue.settingValue.setting\"\n [formGroup]=\"formGroup().controls.defaultValue\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canCreateOrUpdateSetting]=\"true\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n }\n\n @if (getGlance(); as glance) {\n <div class=\"quick-glance\" (click)=\"setExpanded(!flagStateValue.panelExpanded)\">\n <div class=\"container\" [ngClass]=\"glance.class\">\n @if (glance.percentageText) {\n <div class=\"quick-glance-item\">{{ glance.percentageText }}</div>\n }\n @if (glance.ruleText) {\n <div class=\"quick-glance-item\">{{ glance.ruleText }}</div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (flagStateValue.panelExpanded) {\n <div class=\"eval-formula-wrapper\">\n <app-evaluation-formula\n [formGroup]=\"formGroup()\"\n [flagState]=\"flagStateValue\"\n [segments]=\"segments()\"\n [featureFlagLimitations]=\"featureFlagLimitations()\"\n [canManageSegments]=\"false\"\n [canCreateOrUpdateSetting]=\"true\"\n (subscriptionLimitReached)=\"subscriptionLimitReachedCalled()\"\n (addSegmentConditionRequestedWithoutSegments)=\"addSegmentConditionRequestedWithoutSegments.emit()\"\n (changePercentageEvaluationAttributeRequested)=\"changePercentageEvaluationAttribute()\"\n (prerequisiteConditionChanged)=\"prerequisiteConditionChanged.emit($event)\"\n (recalcAddButtons)=\"recalcAddButtons.emit()\"\n (viewVariationsRequested)=\"viewVariationsRequested.emit($event)\" />\n </div>\n }\n </div>\n </div>\n</div>\n<mat-menu #moreMenu=\"matMenu\">\n <div\n mat-menu-item\n data-robot=\"history\"\n [track]=\"['change percentage attribute click', 'Feature flags & settings V2 page']\"\n [disabled]=\"flagStateValue.readOnly\"\n (click)=\"changePercentageEvaluationAttribute()\">\n <mat-icon>percent</mat-icon>\n <span>Change percentage attribute</span>\n </div>\n <a target=\"_blank\" rel=\"noopener noreferrer\" [href]=\"getDashboardUrl()\">\n <div mat-menu-item data-robot=\"history\">\n <mat-icon>open_in_new</mat-icon>\n <span>Open in ConfigCat</span>\n </div>\n </a>\n <div\n mat-menu-item\n data-robot=\"renameSetting\"\n [track]=\"['copy direct link click', 'Feature flags & settings V2 page']\"\n (click)=\"copyDirectLink()\">\n <mat-icon>content_copy</mat-icon>\n <span>Copy direct link</span>\n </div>\n @if (canDeleteSetting()) {\n <div>\n <mat-divider />\n <div\n mat-menu-item\n data-robot=\"deleteSetting\"\n [track]=\"['delete feature flag click', 'Feature flags & settings V2 page']\"\n (click)=\"deleteSetting()\">\n <mat-icon>delete_outline</mat-icon>\n <span>{{ deleteSettingText() }}</span>\n </div>\n </div>\n }\n @if (predefinedVariationsEnabled()) {\n @if (flagStateValue.settingValue.setting.predefinedVariations.length) {\n <mat-divider />\n <div\n mat-menu-item\n [track]=\"['view/manage variations click', 'Feature flags & settings V2 page']\"\n (click)=\"\n viewVariationsRequested.emit({\n settingId: flagStateValue.settingValue.setting.settingId,\n settingName: flagStateValue.settingValue.setting.name,\n })\n \">\n <mat-icon class=\"rotated-icon\">call_split</mat-icon>\n <span>Manage predefined variations</span>\n <!-- @if (permissions().canCreateOrUpdateSetting) {\n <span>Manage predefined variations</span>\n } @else {\n <span>View predefined variations</span>\n } -->\n </div>\n }\n }\n</mat-menu>\n", styles: [".outer{margin:12px 0;display:flex;flex-direction:row;flex-grow:1}.outer .color-bar{width:6px;flex-shrink:0;position:relative}.outer .color-bar .shade{width:0;height:100%;position:absolute;box-sizing:border-box;border-left-width:6px;border-radius:6px 0 0 6px;border-style:solid;border-color:var(--environment-color-bar-shade-background)}.outer .color-bar .bcolor{width:0;height:100%;box-sizing:border-box;border-left-width:6px;border-radius:6px 0 0 6px;border-style:solid;opacity:var(--environment-color-opacity)}.outer .tutorial{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}.outer .tutorial .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .tutorial{display:flex;flex-direction:row;align-items:center;padding:4px 20px 4px 15px;font-size:12px;background-color:var(--flag-tutorial-background);border-bottom:1px solid var(--flag-box-border);border-right:1px solid var(--flag-box-border);flex-wrap:wrap}.outer .tutorial div{margin-left:1px;margin-right:1rem}.outer .tutorial .tutorial-text{display:flex;align-items:center;color:var(--admonition-box-font-color)}.outer .tutorial .tutorial-text:before{font-family:Material Icons;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;content:var(--info-icon-content);color:var(--info-icon-color);margin-right:8px;transform:rotate(.03deg)}.outer .tutorial .start-tutorial{margin:4px 0;font-size:12px;height:26px!important;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);padding:0 12px}.outer .wrapper{display:flex;flex-direction:column;min-width:0;flex-grow:1}.outer .wrapper .owner{color:var(--flag-meta);display:flex;font-size:10px;padding:4px 20px 8px 16px;margin-top:10px;justify-content:space-between;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.outer .wrapper .owner .user{font-style:italic}.outer .wrapper .eval-formula-wrapper{margin-top:6px}.outer .wrapper .feature-flag{flex-grow:1;min-width:0;background-color:var(--flag-box-background);border:1px solid var(--flag-box-border)}.outer .wrapper .feature-flag.invalid{border-color:var(--flag-validation-error)}.outer .wrapper .feature-flag{border-radius:6px!important;padding:5px 0 5px 2px}.outer .wrapper .feature-flag .expandcollapse{position:relative}.outer .wrapper .feature-flag .expandcollapse .btn{text-align:center;width:60px;height:14px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);position:absolute;color:var(--flag-box-control);left:50%;transform:var(--flag-expand-collapse-translate);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-width:0px;cursor:pointer}.outer .wrapper .feature-flag .expandcollapse .btn mat-icon{margin-top:-5px}.outer .wrapper .feature-flag .expandcollapse .btn:hover{background-color:var(--flag-box-control-hover)}.outer .wrapper .feature-flag .header{display:flex;flex-direction:column;flex-grow:1;min-width:0}.outer .wrapper .feature-flag .header .top{display:flex;align-items:flex-start}.outer .wrapper .feature-flag .header .top .left{display:flex;flex-direction:column;min-width:0;max-width:45%;padding:0 36px 0 16px}.outer .wrapper .feature-flag .header .top .left .name-key{display:flex;align-items:center;flex-wrap:wrap;min-width:0;padding-top:6px;gap:8px}.outer .wrapper .feature-flag .header .top .left .name-key .name{font-size:14px;padding-top:4px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .environment-name{font-size:14px;padding-top:4px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .top .left .name-key .key{padding-top:4px;min-width:0}.outer .wrapper .feature-flag .header .top .right{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;margin-right:4px}.outer .wrapper .feature-flag .header .top .right .line{--mat-icon-button-touch-target-display: none}.outer .wrapper .feature-flag .header .top .right .line .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}.outer .wrapper .feature-flag .header .top .right .line{display:flex}.outer .wrapper .feature-flag .header .top .right .line .prereq-button mat-icon{padding-top:4px;font-size:16px;width:16px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .more-button mat-icon{padding-top:2px;font-size:20px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper{display:flex;flex-direction:row;align-items:center;font-size:.7em;color:var(--flag-box-control);text-align:right}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .status{font-size:.7rem;margin-right:5px;min-width:80px}.outer .wrapper .feature-flag .header .top .right .line .watch-wrapper .watch mat-icon{padding-top:4px;font-size:16px;width:20px;color:var(--flag-action-icon)}.outer .wrapper .feature-flag .header .description-container{display:flex;margin-top:6px;min-width:0;margin-bottom:6px;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags{align-self:flex-end;min-width:0;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .hint{color:var(--flag-description);font-size:12px;white-space:pre-line;word-wrap:break-word;padding:6px 16px 8px;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .description-tags .hint.crop{display:block;white-space:nowrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations{display:flex;flex-wrap:wrap;width:100%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags{flex:1 1 0;padding:8px 16px 2px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container{position:relative;max-width:100%;min-width:0}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .tag-container:hover .delete-tag{display:block}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag{position:absolute;color:var(--flag-delete);cursor:pointer;background-color:var(--flag-delete-background);display:none;height:14px;width:14px;border-radius:50%;right:-7px;top:-7px;z-index:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag mat-icon{height:14px;width:14px;font-size:14px;opacity:var(--flag-v1-colored-berry-opacity)}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .delete-tag:hover mat-icon{opacity:1}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag{border:1px dashed var(--flag-add-tag-border);color:var(--flag-box-control);padding:2px 4px;font-size:11px}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .tags .add-tag:hover{background-color:var(--flag-add-tag-hover-background);color:var(--flag-add-tag-hover);cursor:pointer}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations{margin-left:auto;padding:8px 18px;font-size:12px;color:var(--flag-description);max-width:30%}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div{display:flex;flex-wrap:wrap}.outer .wrapper .feature-flag .header .description-container .description-tags .tags-integrations .integrations>div>div{margin:3px}.outer .wrapper .feature-flag .header .description-container .glance{flex-wrap:nowrap;padding:0 18px 0 16px;margin-left:auto}.outer .wrapper .feature-flag .header .description-container .text-glance{min-width:260px;max-width:260px;height:min-content}.outer .wrapper .feature-flag .header .description-container .quick-glance{cursor:pointer;min-width:100px;max-width:200px;font-size:10px;text-align:center;margin-right:18px;margin-left:auto;font-weight:700}.outer .wrapper .feature-flag .header .description-container .quick-glance .quick-glance-item{margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outer .wrapper .feature-flag .header .description-container .quick-glance .container{width:auto;padding:5px;background-color:var(--flag-box-control-background);border:var(--flag-box-control-border);border-radius:5px}.outer .wrapper .feature-flag .header .description-container .quick-glance .on{color:var(--flag-quick-glance-on)}.outer .wrapper .feature-flag .header .description-container .quick-glance .off{color:var(--flag-quick-glance-off)}.outer .wrapper .feature-flag .header .description-container .quick-glance .other{color:var(--flag-quick-glance-other)}.outer .wrapper .feature-flag .header .description-container .quick-glance .default{color:unset}.outer .wrapper .feature-flag .header .description-container .quick-glance:hover .container{background-color:var(--flag-box-control-hover)}.tag-filter{margin:0 12px 8px}.tag-filter mat-form-field{width:100%}.tag-filter mat-form-field input{width:100%}.tag-menu-action{display:flex;align-items:center}.tag-select-container{line-height:16px;overflow:unset;max-width:100%;width:fit-content}@media(max-width:1000px){.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .color-bar{width:5px}}@media(max-width:700px){.outer .feature-flag .header .top .left{max-width:100%!important;padding-right:4px!important}.outer .feature-flag .header .top .left .name-key{flex-wrap:wrap}.outer .feature-flag .header .top .left .name-key .name{max-width:100%}.outer .feature-flag .header .top .right{flex-wrap:wrap}.outer .feature-flag .header .top .right .line .watch-wrapper .status{display:none}.outer .feature-flag .header .hint-container{flex-wrap:wrap}.outer .feature-flag .header .hint-container .text-glance{max-width:unset}}\n"] }]
|
|
6191
6191
|
}], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], flagState: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagState", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], featureFlagLimitations: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureFlagLimitations", required: true }] }], hasOtherEnvironment: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasOtherEnvironment", required: true }] }], environmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "environmentName", required: false }] }], showEnvironmentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEnvironmentName", required: false }] }], deleteSettingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteSettingText", required: false }] }], canDeleteSetting: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteSetting", required: false }] }], predefinedVariationsEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "predefinedVariationsEnabled", required: true }] }], addSegmentConditionRequestedWithoutSegments: [{ type: i0.Output, args: ["addSegmentConditionRequestedWithoutSegments"] }], expandedChanged: [{ type: i0.Output, args: ["expandedChanged"] }], deleteSettingRequested: [{ type: i0.Output, args: ["deleteSettingRequested"] }], subscriptionLimitReached: [{ type: i0.Output, args: ["subscriptionLimitReached"] }], prerequisiteConditionChanged: [{ type: i0.Output, args: ["prerequisiteConditionChanged"] }], recalcAddButtons: [{ type: i0.Output, args: ["recalcAddButtons"] }], viewVariationsRequested: [{ type: i0.Output, args: ["viewVariationsRequested"] }] } });
|
|
6192
6192
|
|
|
6193
6193
|
class FeatureFlagItemComponent extends BaseComponent {
|