@cqa-lib/cqa-ui 1.1.490 → 1.1.492

package/esm2020/lib/step-builder/template-variables-form/template-variables-form.component.mjs

@@ -2616,7 +2616,7 @@ export class TemplateVariablesFormComponent {
     }
 }
 TemplateVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isEditInDepth: "isEditInDepth", isDebug: "isDebug", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"variable.type === 'dropdown'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Textarea variables -->\n    <ng-container *ngIf=\"variable.type === 'textarea'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n          [value]=\"variable.value || ''\"\n          rows=\"4\"\n          style=\"min-height: 42px;\"\n          (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n      </div>\n    </ng-container>\n\n    <!-- Number variables with number input -->\n    <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n          (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n        </cqa-custom-input>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && variable.type !== 'textarea' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <ng-container *ngIf=\"variable.type === 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"variable.type !== 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }} Type<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && !isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set Start<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set End<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n              <cqa-mixed-variable-input\n                [placeholder]=\"'Text Input'\"\n                [value]=\"getRawValue(variable)\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-mixed-variable-input>\n            </ng-container>\n            <ng-template #runtimePlainInput>\n              <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </ng-template>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"], components: [{ type: i1.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i3.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i4.MixedVariableInputComponent, selector: "cqa-mixed-variable-input", inputs: ["value", "placeholder", "disabled"], outputs: ["valueChange"] }, { type: i5.ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "cqaCamelToTitle": i7.CamelToTitlePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isEditInDepth: "isEditInDepth", isDebug: "isDebug", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"variable.type === 'dropdown'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Textarea variables -->\n    <ng-container *ngIf=\"variable.type === 'textarea'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n          [value]=\"variable.value || ''\"\n          rows=\"4\"\n          style=\"min-height: 42px;\"\n          (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n      </div>\n    </ng-container>\n\n    <!-- Number variables with number input -->\n    <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n          (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n        </cqa-custom-input>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && variable.type !== 'textarea' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <ng-container *ngIf=\"variable.type === 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"variable.type !== 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }} Type<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && !isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set Start<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set End<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n              <cqa-mixed-variable-input\n                [placeholder]=\"'Text Input'\"\n                [value]=\"getRawValue(variable)\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-mixed-variable-input>\n            </ng-container>\n            <ng-template #runtimePlainInput>\n              <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </ng-template>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"], components: [{ type: i1.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i3.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i4.MixedVariableInputComponent, selector: "cqa-mixed-variable-input", inputs: ["value", "placeholder", "disabled"], outputs: ["valueChange"] }, { type: i5.ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "elements", "hasMoreScreenNames", "isLoadingScreenNames", "hasMoreElements", "isLoadingElements", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "searchElements", "loadMoreElements", "searchElementsByScreenName", "cancel", "editInDepth"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "cqaCamelToTitle": i7.CamelToTitlePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"variable.type === 'dropdown'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Textarea variables -->\n    <ng-container *ngIf=\"variable.type === 'textarea'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n          [value]=\"variable.value || ''\"\n          rows=\"4\"\n          style=\"min-height: 42px;\"\n          (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n      </div>\n    </ng-container>\n\n    <!-- Number variables with number input -->\n    <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n          (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n        </cqa-custom-input>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && variable.type !== 'textarea' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <ng-container *ngIf=\"variable.type === 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"variable.type !== 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }} Type<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && !isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set Start<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set End<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n              <cqa-mixed-variable-input\n                [placeholder]=\"'Text Input'\"\n                [value]=\"getRawValue(variable)\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-mixed-variable-input>\n            </ng-container>\n            <ng-template #runtimePlainInput>\n              <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </ng-template>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"] }]

package/esm2020/lib/sub-steps-confirmation-dialog/sub-steps-confirmation-dialog.component.mjs

@@ -0,0 +1,93 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/icon";
+import * as i2 from "@angular/material/radio";
+import * as i3 from "../button/button.component";
+import * as i4 from "@angular/common";
+/**
+ * Confirmation dialog shown before editing an AI-Agent step whose execution has
+ * already generated sub-steps (CON-926). The caller supplies the option list
+ * and copy; this component only renders the UI and emits the user's choice.
+ */
+export class SubStepsConfirmationDialogComponent {
+    constructor() {
+        this.isOpen = false;
+        this.title = 'This step has generated sub-steps';
+        this.description = '';
+        this.options = [];
+        this.cancelLabel = 'Cancel';
+        this.disableBackdropClose = false;
+        this.selectionChange = new EventEmitter();
+        this.confirm = new EventEmitter();
+        this.closeModal = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        if (changes['options'] || changes['selectedValue'] || changes['isOpen']) {
+            const valid = this.options?.some(o => o.value === this.selectedValue);
+            if (!valid && this.options?.length) {
+                this.selectedValue = this.options[0].value;
+            }
+        }
+    }
+    get currentOption() {
+        return this.options?.find(o => o.value === this.selectedValue);
+    }
+    isSelected(option) {
+        return option.value === this.selectedValue;
+    }
+    onSelect(option) {
+        if (option.value === this.selectedValue)
+            return;
+        this.selectedValue = option.value;
+        this.selectionChange.emit(option.value);
+    }
+    onRadioChange(event) {
+        const option = this.options?.find(o => o.value === event.value);
+        if (option)
+            this.onSelect(option);
+    }
+    onBackdropClick(event) {
+        if (this.disableBackdropClose)
+            return;
+        const target = event.target;
+        const currentTarget = event.currentTarget;
+        if (target === currentTarget || target.classList.contains('modal-backdrop')) {
+            this.closeModal.emit();
+        }
+    }
+    onClose() {
+        this.closeModal.emit();
+    }
+    onConfirm() {
+        if (!this.selectedValue)
+            return;
+        this.confirm.emit(this.selectedValue);
+    }
+}
+SubStepsConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SubStepsConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SubStepsConfirmationDialogComponent, selector: "cqa-sub-steps-confirmation-dialog", inputs: { isOpen: "isOpen", title: "title", description: "description", options: "options", selectedValue: "selectedValue", cancelLabel: "cancelLabel", disableBackdropClose: "disableBackdropClose" }, outputs: { selectionChange: "selectionChange", confirm: "confirm", closeModal: "closeModal" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\" class=\"cqa-ui-root\"\n  style=\"position: fixed; inset: 0; z-index: 9999;\">\n  <div\n    class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n    (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[560px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[85vh] cqa-font-inter\"\n      style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-px-6 cqa-py-4\" style=\"border-bottom: 1px solid #E5E5E5;\">\n      <h2 class=\"cqa-text-[16px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n        {{ title }}\n      </h2>\n      <button type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-text-[#4A5565] hover:cqa-text-[#111827] cqa-bg-transparent cqa-border-0 cqa-cursor-pointer\"\n        (click)=\"onClose()\"\n        aria-label=\"Close\">\n        <mat-icon class=\"cqa-h-5 cqa-w-5 cqa-text-[20px] cqa-leading-5\">close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-px-6 cqa-py-3 cqa-overflow-y-auto\">\n      <p *ngIf=\"description\"\n        class=\"cqa-text-[12px] cqa-text-[#101828] cqa-m-0\">\n        {{ description }}\n      </p>\n\n      <mat-radio-group\n        class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-radio-group\"\n        [value]=\"selectedValue\"\n        (change)=\"onRadioChange($event)\">\n        <label\n          *ngFor=\"let option of options\"\n          class=\"cqa-radio-card-option qqa-m-0 cqa-flex cqa-items-start cqa-gap-1 cqa-cursor-pointer cqa-rounded-[10px] cqa-border cqa-border-solid cqa-p-4 cqa-transition-colors\"\n          [ngClass]=\"isSelected(option)\n            ? 'cqa-border-[#B1B2F8] cqa-bg-[#D8D9FC4D]'\n            : 'cqa-border-[#E5E7EB] cqa-bg-white hover:cqa-border-[#6366f1]'\">\n          <mat-radio-button [value]=\"option.value\" class=\"!cqa-pr-0 cqa-mt-[-2px]\"></mat-radio-button>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <span\n              class=\"cqa-text-[12px] cqa-font-bold\"\n              [ngClass]=\"option.variant === 'danger' ? 'cqa-text-[#EE3F3F]' : 'cqa-text-[#364153]'\">\n              {{ option.title }}\n            </span>\n            <span class=\"cqa-text-[12px] cqa-text-[#101828]\">\n              {{ option.description }}\n            </span>\n          </div>\n        </label>\n      </mat-radio-group>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-flex cqa-items-center cqa-px-6 cqa-py-4 cqa-bg-white\" style=\"gap: 24px;\">\n      <div class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          variant=\"outlined\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"cancelLabel\"\n          (clicked)=\"onClose()\">\n        </cqa-button>\n      </div>\n      <div class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          *ngIf=\"currentOption\"\n          [variant]=\"currentOption.buttonVariant || 'filled'\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"currentOption.buttonLabel\"\n          (clicked)=\"onConfirm()\">\n        </cqa-button>\n      </div>\n    </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i3.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-sub-steps-confirmation-dialog', template: "<div *ngIf=\"isOpen\" class=\"cqa-ui-root\"\n  style=\"position: fixed; inset: 0; z-index: 9999;\">\n  <div\n    class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n    (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[560px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[85vh] cqa-font-inter\"\n      style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-px-6 cqa-py-4\" style=\"border-bottom: 1px solid #E5E5E5;\">\n      <h2 class=\"cqa-text-[16px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n        {{ title }}\n      </h2>\n      <button type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-text-[#4A5565] hover:cqa-text-[#111827] cqa-bg-transparent cqa-border-0 cqa-cursor-pointer\"\n        (click)=\"onClose()\"\n        aria-label=\"Close\">\n        <mat-icon class=\"cqa-h-5 cqa-w-5 cqa-text-[20px] cqa-leading-5\">close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-px-6 cqa-py-3 cqa-overflow-y-auto\">\n      <p *ngIf=\"description\"\n        class=\"cqa-text-[12px] cqa-text-[#101828] cqa-m-0\">\n        {{ description }}\n      </p>\n\n      <mat-radio-group\n        class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-radio-group\"\n        [value]=\"selectedValue\"\n        (change)=\"onRadioChange($event)\">\n        <label\n          *ngFor=\"let option of options\"\n          class=\"cqa-radio-card-option qqa-m-0 cqa-flex cqa-items-start cqa-gap-1 cqa-cursor-pointer cqa-rounded-[10px] cqa-border cqa-border-solid cqa-p-4 cqa-transition-colors\"\n          [ngClass]=\"isSelected(option)\n            ? 'cqa-border-[#B1B2F8] cqa-bg-[#D8D9FC4D]'\n            : 'cqa-border-[#E5E7EB] cqa-bg-white hover:cqa-border-[#6366f1]'\">\n          <mat-radio-button [value]=\"option.value\" class=\"!cqa-pr-0 cqa-mt-[-2px]\"></mat-radio-button>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <span\n              class=\"cqa-text-[12px] cqa-font-bold\"\n              [ngClass]=\"option.variant === 'danger' ? 'cqa-text-[#EE3F3F]' : 'cqa-text-[#364153]'\">\n              {{ option.title }}\n            </span>\n            <span class=\"cqa-text-[12px] cqa-text-[#101828]\">\n              {{ option.description }}\n            </span>\n          </div>\n        </label>\n      </mat-radio-group>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-flex cqa-items-center cqa-px-6 cqa-py-4 cqa-bg-white\" style=\"gap: 24px;\">\n      <div class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          variant=\"outlined\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"cancelLabel\"\n          (clicked)=\"onClose()\">\n        </cqa-button>\n      </div>\n      <div class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          *ngIf=\"currentOption\"\n          [variant]=\"currentOption.buttonVariant || 'filled'\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"currentOption.buttonLabel\"\n          (clicked)=\"onConfirm()\">\n        </cqa-button>\n      </div>\n    </div>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], cancelLabel: [{
+                type: Input
+            }], disableBackdropClose: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], confirm: [{
+                type: Output
+            }], closeModal: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ViLXN0ZXBzLWNvbmZpcm1hdGlvbi1kaWFsb2cuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9zdWItc3RlcHMtY29uZmlybWF0aW9uLWRpYWxvZy9zdWItc3RlcHMtY29uZmlybWF0aW9uLWRpYWxvZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3N1Yi1zdGVwcy1jb25maXJtYXRpb24tZGlhbG9nL3N1Yi1zdGVwcy1jb25maXJtYXRpb24tZGlhbG9nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQTRCLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFxQmpHOzs7O0dBSUc7QUFNSCxNQUFNLE9BQU8sbUNBQW1DO0lBTGhEO1FBTVcsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUNmLFVBQUssR0FBRyxtQ0FBbUMsQ0FBQztRQUM1QyxnQkFBVyxHQUFHLEVBQUUsQ0FBQztRQUNqQixZQUFPLEdBQWlDLEVBQUUsQ0FBQztRQUUzQyxnQkFBVyxHQUFHLFFBQVEsQ0FBQztRQUN2Qix5QkFBb0IsR0FBRyxLQUFLLENBQUM7UUFFNUIsb0JBQWUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBQzdDLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBQ3JDLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0tBK0NqRDtJQTdDQyxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsU0FBUyxDQUFDLElBQUksT0FBTyxDQUFDLGVBQWUsQ0FBQyxJQUFJLE9BQU8sQ0FBQyxRQUFRLENBQUMsRUFBRTtZQUN2RSxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxLQUFLLEtBQUssSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQ3RFLElBQUksQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxNQUFNLEVBQUU7Z0JBQ2xDLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7YUFDNUM7U0FDRjtJQUNILENBQUM7SUFFRCxJQUFJLGFBQWE7UUFDZixPQUFPLElBQUksQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLEtBQUssS0FBSyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDakUsQ0FBQztJQUVELFVBQVUsQ0FBQyxNQUFrQztRQUMzQyxPQUFPLE1BQU0sQ0FBQyxLQUFLLEtBQUssSUFBSSxDQUFDLGFBQWEsQ0FBQztJQUM3QyxDQUFDO0lBRUQsUUFBUSxDQUFDLE1BQWtDO1FBQ3pDLElBQUksTUFBTSxDQUFDLEtBQUssS0FBSyxJQUFJLENBQUMsYUFBYTtZQUFFLE9BQU87UUFDaEQsSUFBSSxDQUFDLGFBQWEsR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxQyxDQUFDO0lBRUQsYUFBYSxDQUFDLEtBQXFCO1FBQ2pDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLEtBQUssS0FBSyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDaEUsSUFBSSxNQUFNO1lBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBRUQsZUFBZSxDQUFDLEtBQWlCO1FBQy9CLElBQUksSUFBSSxDQUFDLG9CQUFvQjtZQUFFLE9BQU87UUFDdEMsTUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLE1BQXFCLENBQUM7UUFDM0MsTUFBTSxhQUFhLEdBQUcsS0FBSyxDQUFDLGFBQTRCLENBQUM7UUFDekQsSUFBSSxNQUFNLEtBQUssYUFBYSxJQUFJLE1BQU0sQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLGdCQUFnQixDQUFDLEVBQUU7WUFDM0UsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUN4QjtJQUNILENBQUM7SUFFRCxPQUFPO1FBQ0wsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRUQsU0FBUztRQUNQLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYTtZQUFFLE9BQU87UUFDaEMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQ3hDLENBQUM7O2dJQXpEVSxtQ0FBbUM7b0hBQW5DLG1DQUFtQyxxWUMvQmhELHU1R0ErRUE7MkZEaERhLG1DQUFtQztrQkFML0MsU0FBUzsrQkFDRSxtQ0FBbUM7OEJBS3BDLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLG9CQUFvQjtzQkFBNUIsS0FBSztnQkFFSSxlQUFlO3NCQUF4QixNQUFNO2dCQUNHLE9BQU87c0JBQWhCLE1BQU07Z0JBQ0csVUFBVTtzQkFBbkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBPbkNoYW5nZXMsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdFJhZGlvQ2hhbmdlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvcmFkaW8nO1xuaW1wb3J0IHsgQnV0dG9uVmFyaWFudCB9IGZyb20gJy4uL2J1dHRvbi9idXR0b24uY29tcG9uZW50JztcblxuZXhwb3J0IHR5cGUgU3ViU3RlcHNPcHRpb25WYXJpYW50ID0gJ2RlZmF1bHQnIHwgJ2Rhbmdlcic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU3ViU3RlcHNDb25maXJtYXRpb25PcHRpb24ge1xuICAvKiogVW5pcXVlIGlkZW50aWZpZXIgZm9yIHRoZSBvcHRpb24gKGVtaXR0ZWQgdmlhIGBzZWxlY3Rpb25DaGFuZ2VgIC8gYGNvbmZpcm1gKS4gKi9cbiAgdmFsdWU6IHN0cmluZztcbiAgLyoqIEJvbGQgdGl0bGUgc2hvd24gb24gdGhlIGNhcmQuICovXG4gIHRpdGxlOiBzdHJpbmc7XG4gIC8qKiBQYXJhZ3JhcGggc2hvd24gdW5kZXIgdGhlIHRpdGxlLiAqL1xuICBkZXNjcmlwdGlvbjogc3RyaW5nO1xuICAvKiogYGRhbmdlcmAgcmVuZGVycyB0aGUgdGl0bGUgaW4gcmVkIHRvIGluZGljYXRlIGEgZGVzdHJ1Y3RpdmUgY2hvaWNlLiAqL1xuICB2YXJpYW50PzogU3ViU3RlcHNPcHRpb25WYXJpYW50O1xuICAvKiogTGFiZWwgZm9yIHRoZSBwcmltYXJ5IENUQSB3aGVuIHRoaXMgb3B0aW9uIGlzIHNlbGVjdGVkLiAqL1xuICBidXR0b25MYWJlbDogc3RyaW5nO1xuICAvKiogVmFyaWFudCBmb3IgdGhlIHByaW1hcnkgQ1RBIHdoZW4gdGhpcyBvcHRpb24gaXMgc2VsZWN0ZWQuIERlZmF1bHRzIHRvIGBmaWxsZWRgLiAqL1xuICBidXR0b25WYXJpYW50PzogQnV0dG9uVmFyaWFudDtcbn1cblxuLyoqXG4gKiBDb25maXJtYXRpb24gZGlhbG9nIHNob3duIGJlZm9yZSBlZGl0aW5nIGFuIEFJLUFnZW50IHN0ZXAgd2hvc2UgZXhlY3V0aW9uIGhhc1xuICogYWxyZWFkeSBnZW5lcmF0ZWQgc3ViLXN0ZXBzIChDT04tOTI2KS4gVGhlIGNhbGxlciBzdXBwbGllcyB0aGUgb3B0aW9uIGxpc3RcbiAqIGFuZCBjb3B5OyB0aGlzIGNvbXBvbmVudCBvbmx5IHJlbmRlcnMgdGhlIFVJIGFuZCBlbWl0cyB0aGUgdXNlcidzIGNob2ljZS5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3FhLXN1Yi1zdGVwcy1jb25maXJtYXRpb24tZGlhbG9nJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3N1Yi1zdGVwcy1jb25maXJtYXRpb24tZGlhbG9nLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbXVxufSlcbmV4cG9ydCBjbGFzcyBTdWJTdGVwc0NvbmZpcm1hdGlvbkRpYWxvZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGlzT3BlbiA9IGZhbHNlO1xuICBASW5wdXQoKSB0aXRsZSA9ICdUaGlzIHN0ZXAgaGFzIGdlbmVyYXRlZCBzdWItc3RlcHMnO1xuICBASW5wdXQoKSBkZXNjcmlwdGlvbiA9ICcnO1xuICBASW5wdXQoKSBvcHRpb25zOiBTdWJTdGVwc0NvbmZpcm1hdGlvbk9wdGlvbltdID0gW107XG4gIEBJbnB1dCgpIHNlbGVjdGVkVmFsdWU/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGNhbmNlbExhYmVsID0gJ0NhbmNlbCc7XG4gIEBJbnB1dCgpIGRpc2FibGVCYWNrZHJvcENsb3NlID0gZmFsc2U7XG5cbiAgQE91dHB1dCgpIHNlbGVjdGlvbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuICBAT3V0cHV0KCkgY29uZmlybSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuICBAT3V0cHV0KCkgY2xvc2VNb2RhbCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKGNoYW5nZXNbJ29wdGlvbnMnXSB8fCBjaGFuZ2VzWydzZWxlY3RlZFZhbHVlJ10gfHwgY2hhbmdlc1snaXNPcGVuJ10pIHtcbiAgICAgIGNvbnN0IHZhbGlkID0gdGhpcy5vcHRpb25zPy5zb21lKG8gPT4gby52YWx1ZSA9PT0gdGhpcy5zZWxlY3RlZFZhbHVlKTtcbiAgICAgIGlmICghdmFsaWQgJiYgdGhpcy5vcHRpb25zPy5sZW5ndGgpIHtcbiAgICAgICAgdGhpcy5zZWxlY3RlZFZhbHVlID0gdGhpcy5vcHRpb25zWzBdLnZhbHVlO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIGdldCBjdXJyZW50T3B0aW9uKCk6IFN1YlN0ZXBzQ29uZmlybWF0aW9uT3B0aW9uIHwgdW5kZWZpbmVkIHtcbiAgICByZXR1cm4gdGhpcy5vcHRpb25zPy5maW5kKG8gPT4gby52YWx1ZSA9PT0gdGhpcy5zZWxlY3RlZFZhbHVlKTtcbiAgfVxuXG4gIGlzU2VsZWN0ZWQob3B0aW9uOiBTdWJTdGVwc0NvbmZpcm1hdGlvbk9wdGlvbik6IGJvb2xlYW4ge1xuICAgIHJldHVybiBvcHRpb24udmFsdWUgPT09IHRoaXMuc2VsZWN0ZWRWYWx1ZTtcbiAgfVxuXG4gIG9uU2VsZWN0KG9wdGlvbjogU3ViU3RlcHNDb25maXJtYXRpb25PcHRpb24pOiB2b2lkIHtcbiAgICBpZiAob3B0aW9uLnZhbHVlID09PSB0aGlzLnNlbGVjdGVkVmFsdWUpIHJldHVybjtcbiAgICB0aGlzLnNlbGVjdGVkVmFsdWUgPSBvcHRpb24udmFsdWU7XG4gICAgdGhpcy5zZWxlY3Rpb25DaGFuZ2UuZW1pdChvcHRpb24udmFsdWUpO1xuICB9XG5cbiAgb25SYWRpb0NoYW5nZShldmVudDogTWF0UmFkaW9DaGFuZ2UpOiB2b2lkIHtcbiAgICBjb25zdCBvcHRpb24gPSB0aGlzLm9wdGlvbnM/LmZpbmQobyA9PiBvLnZhbHVlID09PSBldmVudC52YWx1ZSk7XG4gICAgaWYgKG9wdGlvbikgdGhpcy5vblNlbGVjdChvcHRpb24pO1xuICB9XG5cbiAgb25CYWNrZHJvcENsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZUJhY2tkcm9wQ2xvc2UpIHJldHVybjtcbiAgICBjb25zdCB0YXJnZXQgPSBldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQ7XG4gICAgY29uc3QgY3VycmVudFRhcmdldCA9IGV2ZW50LmN1cnJlbnRUYXJnZXQgYXMgSFRNTEVsZW1lbnQ7XG4gICAgaWYgKHRhcmdldCA9PT0gY3VycmVudFRhcmdldCB8fCB0YXJnZXQuY2xhc3NMaXN0LmNvbnRhaW5zKCdtb2RhbC1iYWNrZHJvcCcpKSB7XG4gICAgICB0aGlzLmNsb3NlTW9kYWwuZW1pdCgpO1xuICAgIH1cbiAgfVxuXG4gIG9uQ2xvc2UoKTogdm9pZCB7XG4gICAgdGhpcy5jbG9zZU1vZGFsLmVtaXQoKTtcbiAgfVxuXG4gIG9uQ29uZmlybSgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuc2VsZWN0ZWRWYWx1ZSkgcmV0dXJuO1xuICAgIHRoaXMuY29uZmlybS5lbWl0KHRoaXMuc2VsZWN0ZWRWYWx1ZSk7XG4gIH1cbn1cbiIsIjxkaXYgKm5nSWY9XCJpc09wZW5cIiBjbGFzcz1cImNxYS11aS1yb290XCJcbiAgc3R5bGU9XCJwb3NpdGlvbjogZml4ZWQ7IGluc2V0OiAwOyB6LWluZGV4OiA5OTk5O1wiPlxuICA8ZGl2XG4gICAgY2xhc3M9XCJtb2RhbC1iYWNrZHJvcCBjcWEtZml4ZWQgY3FhLWluc2V0LTAgY3FhLWJnLWJsYWNrIGNxYS1iZy1vcGFjaXR5LTUwIGNxYS16LVs5OTk5XSBjcWEtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1qdXN0aWZ5LWNlbnRlciBjcWEtcC00XCJcbiAgICAoY2xpY2spPVwib25CYWNrZHJvcENsaWNrKCRldmVudClcIj5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImNxYS1yb3VuZGVkLVsxMnB4XSBjcWEtYmctd2hpdGUgY3FhLXNoYWRvdy14bCBjcWEtdy1mdWxsIGNxYS1tYXgtdy1bNTYwcHhdIGNxYS1vdmVyZmxvdy1oaWRkZW4gY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1tYXgtaC1bODV2aF0gY3FhLWZvbnQtaW50ZXJcIlxuICAgICAgc3R5bGU9XCJib3gtc2hhZG93OiAwcHggOHB4IDhweCAtNHB4ICMxMDE4MjgwODtcIiAoY2xpY2spPVwiJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpXCI+XG5cbiAgICA8IS0tIEhlYWRlciAtLT5cbiAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWl0ZW1zLXN0YXJ0IGNxYS1qdXN0aWZ5LWJldHdlZW4gY3FhLXB4LTYgY3FhLXB5LTRcIiBzdHlsZT1cImJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjRTVFNUU1O1wiPlxuICAgICAgPGgyIGNsYXNzPVwiY3FhLXRleHQtWzE2cHhdIGNxYS1mb250LXNlbWlib2xkIGNxYS10ZXh0LVsjMTExODI3XSBjcWEtbS0wXCI+XG4gICAgICAgIHt7IHRpdGxlIH19XG4gICAgICA8L2gyPlxuICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgY2xhc3M9XCJjcWEtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1qdXN0aWZ5LWNlbnRlciBjcWEtaC02IGNxYS13LTYgY3FhLXJvdW5kZWQgY3FhLXRleHQtWyM0QTU1NjVdIGhvdmVyOmNxYS10ZXh0LVsjMTExODI3XSBjcWEtYmctdHJhbnNwYXJlbnQgY3FhLWJvcmRlci0wIGNxYS1jdXJzb3ItcG9pbnRlclwiXG4gICAgICAgIChjbGljayk9XCJvbkNsb3NlKClcIlxuICAgICAgICBhcmlhLWxhYmVsPVwiQ2xvc2VcIj5cbiAgICAgICAgPG1hdC1pY29uIGNsYXNzPVwiY3FhLWgtNSBjcWEtdy01IGNxYS10ZXh0LVsyMHB4XSBjcWEtbGVhZGluZy01XCI+Y2xvc2U8L21hdC1pY29uPlxuICAgICAgPC9idXR0b24+XG4gICAgPC9kaXY+XG5cbiAgICA8IS0tIEJvZHkgLS0+XG4gICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtZ2FwLTMgY3FhLXB4LTYgY3FhLXB5LTMgY3FhLW92ZXJmbG93LXktYXV0b1wiPlxuICAgICAgPHAgKm5nSWY9XCJkZXNjcmlwdGlvblwiXG4gICAgICAgIGNsYXNzPVwiY3FhLXRleHQtWzEycHhdIGNxYS10ZXh0LVsjMTAxODI4XSBjcWEtbS0wXCI+XG4gICAgICAgIHt7IGRlc2NyaXB0aW9uIH19XG4gICAgICA8L3A+XG5cbiAgICAgIDxtYXQtcmFkaW8tZ3JvdXBcbiAgICAgICAgY2xhc3M9XCJjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWdhcC0zIGNxYS1yYWRpby1ncm91cFwiXG4gICAgICAgIFt2YWx1ZV09XCJzZWxlY3RlZFZhbHVlXCJcbiAgICAgICAgKGNoYW5nZSk9XCJvblJhZGlvQ2hhbmdlKCRldmVudClcIj5cbiAgICAgICAgPGxhYmVsXG4gICAgICAgICAgKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBvcHRpb25zXCJcbiAgICAgICAgICBjbGFzcz1cImNxYS1yYWRpby1jYXJkLW9wdGlvbiBxcWEtbS0wIGNxYS1mbGV4IGNxYS1pdGVtcy1zdGFydCBjcWEtZ2FwLTEgY3FhLWN1cnNvci1wb2ludGVyIGNxYS1yb3VuZGVkLVsxMHB4XSBjcWEtYm9yZGVyIGNxYS1ib3JkZXItc29saWQgY3FhLXAtNCBjcWEtdHJhbnNpdGlvbi1jb2xvcnNcIlxuICAgICAgICAgIFtuZ0NsYXNzXT1cImlzU2VsZWN0ZWQob3B0aW9uKVxuICAgICAgICAgICAgPyAnY3FhLWJvcmRlci1bI0IxQjJGOF0gY3FhLWJnLVsjRDhEOUZDNERdJ1xuICAgICAgICAgICAgOiAnY3FhLWJvcmRlci1bI0U1RTdFQl0gY3FhLWJnLXdoaXRlIGhvdmVyOmNxYS1ib3JkZXItWyM2MzY2ZjFdJ1wiPlxuICAgICAgICAgIDxtYXQtcmFkaW8tYnV0dG9uIFt2YWx1ZV09XCJvcHRpb24udmFsdWVcIiBjbGFzcz1cIiFjcWEtcHItMCBjcWEtbXQtWy0ycHhdXCI+PC9tYXQtcmFkaW8tYnV0dG9uPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWdhcC0xXCI+XG4gICAgICAgICAgICA8c3BhblxuICAgICAgICAgICAgICBjbGFzcz1cImNxYS10ZXh0LVsxMnB4XSBjcWEtZm9udC1ib2xkXCJcbiAgICAgICAgICAgICAgW25nQ2xhc3NdPVwib3B0aW9uLnZhcmlhbnQgPT09ICdkYW5nZXInID8gJ2NxYS10ZXh0LVsjRUUzRjNGXScgOiAnY3FhLXRleHQtWyMzNjQxNTNdJ1wiPlxuICAgICAgICAgICAgICB7eyBvcHRpb24udGl0bGUgfX1cbiAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWzEycHhdIGNxYS10ZXh0LVsjMTAxODI4XVwiPlxuICAgICAgICAgICAgICB7eyBvcHRpb24uZGVzY3JpcHRpb24gfX1cbiAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9sYWJlbD5cbiAgICAgIDwvbWF0LXJhZGlvLWdyb3VwPlxuICAgIDwvZGl2PlxuXG4gICAgPCEtLSBGb290ZXIgLS0+XG4gICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1jZW50ZXIgY3FhLXB4LTYgY3FhLXB5LTQgY3FhLWJnLXdoaXRlXCIgc3R5bGU9XCJnYXA6IDI0cHg7XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXgtMVwiIHN0eWxlPVwid2lkdGg6IDUwJTtcIj5cbiAgICAgICAgPGNxYS1idXR0b25cbiAgICAgICAgICB2YXJpYW50PVwib3V0bGluZWRcIlxuICAgICAgICAgIGJ0blNpemU9XCJsZ1wiXG4gICAgICAgICAgW2Z1bGxXaWR0aF09XCJ0cnVlXCJcbiAgICAgICAgICBbdGV4dF09XCJjYW5jZWxMYWJlbFwiXG4gICAgICAgICAgKGNsaWNrZWQpPVwib25DbG9zZSgpXCI+XG4gICAgICAgIDwvY3FhLWJ1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4LTFcIiBzdHlsZT1cIndpZHRoOiA1MCU7XCI+XG4gICAgICAgIDxjcWEtYnV0dG9uXG4gICAgICAgICAgKm5nSWY9XCJjdXJyZW50T3B0aW9uXCJcbiAgICAgICAgICBbdmFyaWFudF09XCJjdXJyZW50T3B0aW9uLmJ1dHRvblZhcmlhbnQgfHwgJ2ZpbGxlZCdcIlxuICAgICAgICAgIGJ0blNpemU9XCJsZ1wiXG4gICAgICAgICAgW2Z1bGxXaWR0aF09XCJ0cnVlXCJcbiAgICAgICAgICBbdGV4dF09XCJjdXJyZW50T3B0aW9uLmJ1dHRvbkxhYmVsXCJcbiAgICAgICAgICAoY2xpY2tlZCk9XCJvbkNvbmZpcm0oKVwiPlxuICAgICAgICA8L2NxYS1idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==