@cqa-lib/cqa-ui 1.1.491 → 1.1.492

package/fesm2015/cqa-lib-cqa-ui.mjs

@@ -22156,10 +22156,16 @@ class ElementFormComponent {
         this.element = { title: '', selector: '', labels: [] };
         /** Screen name options for autocomplete (from API) */
         this.screenNameOptions = [];
+        /** Elements (for the Label dropdown when a screen is selected) */
+        this.elements = [];
         /** Whether more screen names are available for infinite scroll */
         this.hasMoreScreenNames = false;
         /** True while parent is loading screen names (search or load more) */
         this.isLoadingScreenNames = false;
+        /** Whether more elements are available for infinite scroll */
+        this.hasMoreElements = false;
+        /** True while parent is loading elements (search or load more) */
+        this.isLoadingElements = false;
         /** True while parent is fetching latest element data for edit (shows loading state) */
         this.isElementLoading = false;
         /** Whether we're in edit mode */
@@ -22178,6 +22184,12 @@ class ElementFormComponent {
         this.searchScreenName = new EventEmitter();
         /** Emitted when user scrolls to load more screen names (passes current search query) */
         this.loadMoreScreenNames = new EventEmitter();
+        /** Emitted when user searches elements (server search) */
+        this.searchElements = new EventEmitter();
+        /** Emitted when user scrolls to load more elements */
+        this.loadMoreElements = new EventEmitter();
+        /** Emitted when user selects a screen so parent can fetch elements filtered by that screen */
+        this.searchElementsByScreenName = new EventEmitter();
         /** Emitted when user clicks "Select from Element list" or "Cancel" */
         this.cancel = new EventEmitter();
         /** Emitted when user clicks "Edit in depth" */
@@ -22186,6 +22198,8 @@ class ElementFormComponent {
         this.formLabels = [];
         /** Current tag input value */
         this.tagInputValue = '';
+        /** True when the user just created a brand-new screen name in this session (no elements exist yet for it). */
+        this.isNewScreenNameSelected = false;
         /** Whether we're saving (disable buttons) */
         this.saving = false;
         this.fb = fb || new FormBuilder();
@@ -22201,6 +22215,9 @@ class ElementFormComponent {
         else if (changes['element'] && !this.elementId && this.isCreateMode) {
             this.populateFormForCreateWithElement();
         }
+        if (changes['elements'] || changes['hasMoreElements'] || changes['isLoadingElements']) {
+            this.updateElementSelectConfig();
+        }
     }
     ngOnInit() {
         if (this.elementId) {
@@ -22211,21 +22228,93 @@ class ElementFormComponent {
         }
     }
     initializeForm() {
+        var _a, _b;
         this.form = this.fb.group({
             name: ['', [Validators.required]],
-            screenNameId: [null, [Validators.required]],
+            screenNameId: ['none'],
             value: ['', [Validators.required]],
+            selectedElementId: [null],
         });
         this.updateScreenNameSelectConfig();
+        this.updateElementSelectConfig();
+        (_a = this.form.get('screenNameId')) === null || _a === void 0 ? void 0 : _a.valueChanges.subscribe((v) => {
+            var _a;
+            this.isNewScreenNameSelected = false;
+            (_a = this.form.get('selectedElementId')) === null || _a === void 0 ? void 0 : _a.setValue(null, { emitEvent: false });
+            this.updateElementSelectConfig();
+            if (v != null && v !== '' && v !== 'none') {
+                this.searchElementsByScreenName.emit({ screenNameId: Number(v), searchTerm: '' });
+            }
+        });
+        (_b = this.form.get('selectedElementId')) === null || _b === void 0 ? void 0 : _b.valueChanges.subscribe((id) => {
+            var _a, _b, _c, _d, _e;
+            if (id == null)
+                return;
+            const match = (this.elements || []).find((el) => el.id === id);
+            if (match) {
+                (_a = this.form.get('name')) === null || _a === void 0 ? void 0 : _a.setValue((_b = match.title) !== null && _b !== void 0 ? _b : '', { emitEvent: false });
+                (_c = this.form.get('value')) === null || _c === void 0 ? void 0 : _c.setValue((_d = match.selector) !== null && _d !== void 0 ? _d : '', { emitEvent: false });
+            }
+            (_e = this.cdr) === null || _e === void 0 ? void 0 : _e.markForCheck();
+        });
+    }
+    /** True when a real (non-None) screen is selected */
+    hasSelectedScreenName() {
+        var _a, _b;
+        const v = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get('screenNameId')) === null || _b === void 0 ? void 0 : _b.value;
+        return v != null && v !== '' && v !== 'none';
+    }
+    updateElementSelectConfig() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const screenId = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get('screenNameId')) === null || _b === void 0 ? void 0 : _b.value;
+        const list = (this.elements || []).filter((el) => screenId != null && screenId !== 'none'
+            ? el.screenNameId != null && Number(el.screenNameId) === Number(screenId)
+            : true);
+        const opts = list.map((el) => {
+            var _a, _b, _c, _d;
+            return ({
+                id: (_a = el.id) !== null && _a !== void 0 ? _a : '',
+                value: (_b = el.id) !== null && _b !== void 0 ? _b : '',
+                name: (_c = el.title) !== null && _c !== void 0 ? _c : '',
+                label: (_d = el.title) !== null && _d !== void 0 ? _d : '',
+            });
+        });
+        const currentElementId = (_d = (_c = this.form) === null || _c === void 0 ? void 0 : _c.get('selectedElementId')) === null || _d === void 0 ? void 0 : _d.value;
+        if (currentElementId != null && ((_e = this.element) === null || _e === void 0 ? void 0 : _e.id) === currentElementId) {
+            const exists = opts.some((o) => o.id === currentElementId);
+            if (!exists) {
+                opts.unshift({
+                    id: currentElementId,
+                    value: currentElementId,
+                    name: (_f = this.element.title) !== null && _f !== void 0 ? _f : '',
+                    label: (_g = this.element.title) !== null && _g !== void 0 ? _g : '',
+                });
+            }
+        }
+        this.elementSelectConfig = {
+            key: 'selectedElementId',
+            placeholder: 'Select element',
+            searchable: true,
+            serverSearch: true,
+            options: opts,
+            hasMore: this.hasMoreElements,
+            isLoading: this.isLoadingElements,
+            onSearch: (q) => this.searchElements.emit(q || ''),
+            onLoadMore: () => this.loadMoreElements.emit(),
+        };
+        (_h = this.cdr) === null || _h === void 0 ? void 0 : _h.markForCheck();
     }
     updateScreenNameSelectConfig() {
         var _a, _b, _c, _d, _e;
-        const opts = (this.screenNameOptions || []).map((o) => ({
-            id: o.id,
-            value: o.id,
-            name: o.name,
-            label: o.name,
-        }));
+        const opts = [
+            { id: 'none', value: 'none', name: 'None', label: 'None' },
+            ...(this.screenNameOptions || []).map((o) => ({
+                id: o.id,
+                value: o.id,
+                name: o.name,
+                label: o.name,
+            })),
+        ];
         const currentId = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get('screenNameId')) === null || _b === void 0 ? void 0 : _b.value;
         if (currentId && ((_c = this.element) === null || _c === void 0 ? void 0 : _c.screenNameId) === currentId && ((_d = this.element) === null || _d === void 0 ? void 0 : _d.screenName)) {
             const exists = opts.some((o) => o.id === currentId);
@@ -22240,7 +22329,6 @@ class ElementFormComponent {
         }
         this.screenNameSelectConfig = {
             key: 'screenNameId',
-            label: 'Screen Name',
             placeholder: 'Select or create screen',
             searchable: true,
             serverSearch: true,
@@ -22254,51 +22342,58 @@ class ElementFormComponent {
         (_e = this.cdr) === null || _e === void 0 ? void 0 : _e.markForCheck();
     }
     populateFormForEdit() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (this.element && this.elementId != null) {
             this.isEditMode = true;
             this.isCreateMode = false;
             this.form.patchValue({
                 name: (_a = this.element.title) !== null && _a !== void 0 ? _a : '',
-                screenNameId: (_b = this.element.screenNameId) !== null && _b !== void 0 ? _b : null,
+                screenNameId: (_b = this.element.screenNameId) !== null && _b !== void 0 ? _b : 'none',
                 value: (_c = this.element.selector) !== null && _c !== void 0 ? _c : '',
-            });
+                selectedElementId: (_d = this.element.id) !== null && _d !== void 0 ? _d : null,
+            }, { emitEvent: false });
             this.formLabels = [...(this.element.labels || [])];
             this.updateScreenNameSelectConfig();
+            this.updateElementSelectConfig();
         }
         else {
             this.isEditMode = false;
             this.isCreateMode = false;
             this.formLabels = [];
         }
-        (_d = this.cdr) === null || _d === void 0 ? void 0 : _d.markForCheck();
+        (_e = this.cdr) === null || _e === void 0 ? void 0 : _e.markForCheck();
     }
     populateFormForCreateWithElement() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (this.element) {
             this.isCreateMode = true;
             this.isEditMode = false;
             this.form.patchValue({
                 name: (_a = this.element.title) !== null && _a !== void 0 ? _a : '',
-                screenNameId: (_b = this.element.screenNameId) !== null && _b !== void 0 ? _b : null,
+                screenNameId: (_b = this.element.screenNameId) !== null && _b !== void 0 ? _b : 'none',
                 value: (_c = this.element.selector) !== null && _c !== void 0 ? _c : '',
-            });
+                selectedElementId: (_d = this.element.id) !== null && _d !== void 0 ? _d : null,
+            }, { emitEvent: false });
             this.formLabels = [...(this.element.labels || [])];
             this.updateScreenNameSelectConfig();
+            this.updateElementSelectConfig();
         }
         else {
             this.isCreateMode = true;
             this.isEditMode = false;
             this.formLabels = [];
         }
-        (_d = this.cdr) === null || _d === void 0 ? void 0 : _d.markForCheck();
+        (_e = this.cdr) === null || _e === void 0 ? void 0 : _e.markForCheck();
     }
     /** Called by parent when a new screen name was created (so we can set the selected value) */
     setCreatedScreenName(opt) {
-        var _a, _b;
-        (_a = this.form.get('screenNameId')) === null || _a === void 0 ? void 0 : _a.setValue(opt.id);
+        var _a, _b, _c;
+        this.isNewScreenNameSelected = true;
+        (_a = this.form.get('screenNameId')) === null || _a === void 0 ? void 0 : _a.setValue(opt.id, { emitEvent: false });
+        (_b = this.form.get('selectedElementId')) === null || _b === void 0 ? void 0 : _b.setValue(null, { emitEvent: false });
         this.updateScreenNameSelectConfig();
-        (_b = this.cdr) === null || _b === void 0 ? void 0 : _b.markForCheck();
+        this.updateElementSelectConfig();
+        (_c = this.cdr) === null || _c === void 0 ? void 0 : _c.markForCheck();
     }
     onApply() {
         var _a, _b, _c;
@@ -22307,10 +22402,11 @@ class ElementFormComponent {
             return;
         }
         const formValue = this.form.value;
-        const screenNameId = formValue.screenNameId;
-        const selectedOpt = this.screenNameOptions.find((o) => o.id === screenNameId);
+        const rawScreenNameId = formValue.screenNameId;
+        const isNone = rawScreenNameId === 'none' || rawScreenNameId == null;
+        const selectedOpt = isNone ? undefined : this.screenNameOptions.find((o) => o.id === rawScreenNameId);
         const screenNameName = (selectedOpt === null || selectedOpt === void 0 ? void 0 : selectedOpt.name) ? String(selectedOpt.name).trim() : '';
-        if (!screenNameId || !screenNameName) {
+        if (!isNone && (!rawScreenNameId || !screenNameName)) {
             (_a = this.form.get('screenNameId')) === null || _a === void 0 ? void 0 : _a.setErrors({ required: true });
             (_b = this.form.get('screenNameId')) === null || _b === void 0 ? void 0 : _b.markAsTouched();
             return;
@@ -22319,8 +22415,8 @@ class ElementFormComponent {
         (_c = this.cdr) === null || _c === void 0 ? void 0 : _c.markForCheck();
         const payload = {
             name: formValue.name.trim(),
-            screenNameId,
-            screenNameName,
+            screenNameId: isNone ? undefined : rawScreenNameId,
+            screenNameName: isNone ? '' : screenNameName,
             locatorValue: formValue.value.trim(),
             labels: [...this.formLabels],
         };
@@ -22395,10 +22491,10 @@ class ElementFormComponent {
     }
 }
 ElementFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementFormComponent, deps: [{ token: i1$1.FormBuilder, optional: true }, { token: i0.ChangeDetectorRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ElementFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementFormComponent, selector: "cqa-element-form", inputs: { elementId: "elementId", element: "element", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", isElementLoading: "isElementLoading", isEditMode: "isEditMode", isCreateMode: "isCreateMode", isEditInDepthAvailable: "isEditInDepthAvailable" }, outputs: { createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", cancel: "cancel", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n  <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n    <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n    </svg>\n    <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n  </div>\n  <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5\">\n    <cqa-custom-input \n      class=\"cqa-w-1/2\" \n      label=\"Name\" \n      placeholder=\"default-element\"\n      [value]=\"getFormControlValue('name')\"\n      [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Name is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('name', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-1/2\">\n      <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n        (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n        class=\"cqa-w-full\">\n      </cqa-dynamic-select>\n      <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n        <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 14 14\"\n            fill=\"none\"\n            class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n            <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n          </svg>\n          <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n            Screen Name is required\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!isElementLoading\">\n    <cqa-custom-input \n      class=\"cqa-w-full\"  \n      label=\"Enter Value\" \n      placeholder=\"#default_id or xpath\"\n      [value]=\"getFormControlValue('value')\"\n      [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('value', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-full\">\n      <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n      <div\n        class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n        *ngIf=\"formLabels?.length; else noTagsContainer\">\n        <span *ngFor=\"let tag of visibleTags\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n          [matTooltip]=\"tag\"\n          matTooltipPosition=\"above\"\n          style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n          <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n          <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n            <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n          </button>\n        </span>\n        <input type=\"text\"\n          class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n          placeholder=\"Type and press Enter to add\"\n          [(ngModel)]=\"tagInputValue\"\n          (keydown)=\"onTagInputKeydown($event)\"\n          (blur)=\"addTag()\"\n          [ngModelOptions]=\"{standalone: true}\">\n      </div>\n      <ng-template #noTagsContainer>\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n          <input type=\"text\"\n            class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n            placeholder=\"Type and press Enter to add\"\n            [(ngModel)]=\"tagInputValue\"\n            (keydown)=\"onTagInputKeydown($event)\"\n            (blur)=\"addTag()\"\n            [ngModelOptions]=\"{standalone: true}\">\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : (isEditMode ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n      </div>\n    </div>\n    <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </ng-container>\n</div>\n\n\n", components: [{ type: 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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElementFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementFormComponent, selector: "cqa-element-form", inputs: { elementId: "elementId", element: "element", screenNameOptions: "screenNameOptions", elements: "elements", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", isElementLoading: "isElementLoading", isEditMode: "isEditMode", isCreateMode: "isCreateMode", isEditInDepthAvailable: "isEditInDepthAvailable" }, outputs: { createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", searchElements: "searchElements", loadMoreElements: "loadMoreElements", searchElementsByScreenName: "searchElementsByScreenName", cancel: "cancel", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n  <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n    <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n    </svg>\n    <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n  </div>\n  <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5 cqa-items-start\">\n    <div class=\"cqa-flex cqa-flex-col cqa-w-1/2\">\n      <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1 cqa-leading-[1.4]\">\n        Label Screen Name<span class=\"cqa-text-red-500\">*</span>\n      </label>\n      <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n        (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n        class=\"cqa-w-full\">\n      </cqa-dynamic-select>\n      <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n        <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 14 14\"\n            fill=\"none\"\n            class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n            <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n          </svg>\n          <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n            Screen Name is required\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-flex-col cqa-w-1/2\">\n      <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1 cqa-leading-[1.4]\">\n        Label<span class=\"cqa-text-red-500\">*</span>\n      </label>\n      <ng-container *ngIf=\"hasSelectedScreenName() && !isNewScreenNameSelected; else labelTextInput\">\n        <cqa-dynamic-select [form]=\"form\" [config]=\"elementSelectConfig\" class=\"cqa-w-full\">\n        </cqa-dynamic-select>\n      </ng-container>\n      <ng-template #labelTextInput>\n        <cqa-custom-input\n          class=\"cqa-w-full\"\n          placeholder=\"default-element\"\n          [inputInlineStyle]=\"'padding: 7px 11px; border: 1px solid #E5E5E5; border-radius: 8px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); box-sizing: border-box; font-size: 14px; line-height: 20px;'\"\n          [value]=\"getFormControlValue('name')\"\n          [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Label is required'] : []\"\n          (valueChange)=\"onFormControlChange('name', $event)\">\n        </cqa-custom-input>\n      </ng-template>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!isElementLoading\">\n    <cqa-custom-input \n      class=\"cqa-w-full\"  \n      label=\"Enter Value\" \n      placeholder=\"#default_id or xpath\"\n      [value]=\"getFormControlValue('value')\"\n      [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('value', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-full\">\n      <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n      <div\n        class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n        *ngIf=\"formLabels?.length; else noTagsContainer\">\n        <span *ngFor=\"let tag of visibleTags\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n          [matTooltip]=\"tag\"\n          matTooltipPosition=\"above\"\n          style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n          <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n          <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n            <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n          </button>\n        </span>\n        <input type=\"text\"\n          class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n          placeholder=\"Type and press Enter to add\"\n          [(ngModel)]=\"tagInputValue\"\n          (keydown)=\"onTagInputKeydown($event)\"\n          (blur)=\"addTag()\"\n          [ngModelOptions]=\"{standalone: true}\">\n      </div>\n      <ng-template #noTagsContainer>\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n          <input type=\"text\"\n            class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n            placeholder=\"Type and press Enter to add\"\n            [(ngModel)]=\"tagInputValue\"\n            (keydown)=\"onTagInputKeydown($event)\"\n            (blur)=\"addTag()\"\n            [ngModelOptions]=\"{standalone: true}\">\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : ((isEditMode || !hasSelectedScreenName()) ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n      </div>\n    </div>\n    <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </ng-container>\n</div>\n\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: 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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-element-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n  <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n    <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n    </svg>\n    <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n  </div>\n  <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5\">\n    <cqa-custom-input \n      class=\"cqa-w-1/2\" \n      label=\"Name\" \n      placeholder=\"default-element\"\n      [value]=\"getFormControlValue('name')\"\n      [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Name is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('name', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-1/2\">\n      <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n        (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n        class=\"cqa-w-full\">\n      </cqa-dynamic-select>\n      <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n        <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 14 14\"\n            fill=\"none\"\n            class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n            <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n          </svg>\n          <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n            Screen Name is required\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!isElementLoading\">\n    <cqa-custom-input \n      class=\"cqa-w-full\"  \n      label=\"Enter Value\" \n      placeholder=\"#default_id or xpath\"\n      [value]=\"getFormControlValue('value')\"\n      [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('value', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-full\">\n      <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n      <div\n        class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n        *ngIf=\"formLabels?.length; else noTagsContainer\">\n        <span *ngFor=\"let tag of visibleTags\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n          [matTooltip]=\"tag\"\n          matTooltipPosition=\"above\"\n          style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n          <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n          <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n            <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n          </button>\n        </span>\n        <input type=\"text\"\n          class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n          placeholder=\"Type and press Enter to add\"\n          [(ngModel)]=\"tagInputValue\"\n          (keydown)=\"onTagInputKeydown($event)\"\n          (blur)=\"addTag()\"\n          [ngModelOptions]=\"{standalone: true}\">\n      </div>\n      <ng-template #noTagsContainer>\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n          <input type=\"text\"\n            class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n            placeholder=\"Type and press Enter to add\"\n            [(ngModel)]=\"tagInputValue\"\n            (keydown)=\"onTagInputKeydown($event)\"\n            (blur)=\"addTag()\"\n            [ngModelOptions]=\"{standalone: true}\">\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : (isEditMode ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n      </div>\n    </div>\n    <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </ng-container>\n</div>\n\n\n" }]
+            args: [{ selector: 'cqa-element-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n  <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n    <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n    </svg>\n    <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n  </div>\n  <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5 cqa-items-start\">\n    <div class=\"cqa-flex cqa-flex-col cqa-w-1/2\">\n      <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1 cqa-leading-[1.4]\">\n        Label Screen Name<span class=\"cqa-text-red-500\">*</span>\n      </label>\n      <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n        (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n        class=\"cqa-w-full\">\n      </cqa-dynamic-select>\n      <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n        <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 14 14\"\n            fill=\"none\"\n            class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n            <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n          </svg>\n          <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n            Screen Name is required\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-flex-col cqa-w-1/2\">\n      <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1 cqa-leading-[1.4]\">\n        Label<span class=\"cqa-text-red-500\">*</span>\n      </label>\n      <ng-container *ngIf=\"hasSelectedScreenName() && !isNewScreenNameSelected; else labelTextInput\">\n        <cqa-dynamic-select [form]=\"form\" [config]=\"elementSelectConfig\" class=\"cqa-w-full\">\n        </cqa-dynamic-select>\n      </ng-container>\n      <ng-template #labelTextInput>\n        <cqa-custom-input\n          class=\"cqa-w-full\"\n          placeholder=\"default-element\"\n          [inputInlineStyle]=\"'padding: 7px 11px; border: 1px solid #E5E5E5; border-radius: 8px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); box-sizing: border-box; font-size: 14px; line-height: 20px;'\"\n          [value]=\"getFormControlValue('name')\"\n          [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Label is required'] : []\"\n          (valueChange)=\"onFormControlChange('name', $event)\">\n        </cqa-custom-input>\n      </ng-template>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!isElementLoading\">\n    <cqa-custom-input \n      class=\"cqa-w-full\"  \n      label=\"Enter Value\" \n      placeholder=\"#default_id or xpath\"\n      [value]=\"getFormControlValue('value')\"\n      [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('value', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-full\">\n      <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n      <div\n        class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n        *ngIf=\"formLabels?.length; else noTagsContainer\">\n        <span *ngFor=\"let tag of visibleTags\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n          [matTooltip]=\"tag\"\n          matTooltipPosition=\"above\"\n          style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n          <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n          <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n            <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n          </button>\n        </span>\n        <input type=\"text\"\n          class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n          placeholder=\"Type and press Enter to add\"\n          [(ngModel)]=\"tagInputValue\"\n          (keydown)=\"onTagInputKeydown($event)\"\n          (blur)=\"addTag()\"\n          [ngModelOptions]=\"{standalone: true}\">\n      </div>\n      <ng-template #noTagsContainer>\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n          <input type=\"text\"\n            class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n            placeholder=\"Type and press Enter to add\"\n            [(ngModel)]=\"tagInputValue\"\n            (keydown)=\"onTagInputKeydown($event)\"\n            (blur)=\"addTag()\"\n            [ngModelOptions]=\"{standalone: true}\">\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : ((isEditMode || !hasSelectedScreenName()) ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n      </div>\n    </div>\n    <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </ng-container>\n</div>\n\n\n" }]
         }], ctorParameters: function () {
         return [{ type: i1$1.FormBuilder, decorators: [{
                         type: Optional
@@ -22411,10 +22507,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], screenNameOptions: [{
                 type: Input
+            }], elements: [{
+                type: Input
             }], hasMoreScreenNames: [{
                 type: Input
             }], isLoadingScreenNames: [{
                 type: Input
+            }], hasMoreElements: [{
+                type: Input
+            }], isLoadingElements: [{
+                type: Input
             }], isElementLoading: [{
                 type: Input
             }], isEditMode: [{
@@ -22433,6 +22535,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], loadMoreScreenNames: [{
                 type: Output
+            }], searchElements: [{
+                type: Output
+            }], loadMoreElements: [{
+                type: Output
+            }], searchElementsByScreenName: [{
+                type: Output
             }], cancel: [{
                 type: Output
             }], editInDepth: [{
@@ -22605,6 +22713,8 @@ class ElementPopupComponent {
         this.hasMoreScreenNames = false;
         /** True while parent is loading screen names (search or load more) */
         this.isLoadingScreenNames = false;
+        /** True while parent is loading elements (search or load more) */
+        this.isLoadingElements = false;
         /** Suggested tags from API for labels field */
         this.suggestedTags = [];
         /** True while parent is fetching latest element data for edit (shows loading state) */
@@ -22628,6 +22738,8 @@ class ElementPopupComponent {
         this.searchScreenName = new EventEmitter();
         /** Emitted when user scrolls to load more screen names (passes current search query) */
         this.loadMoreScreenNames = new EventEmitter();
+        /** Emitted when user selects a screen so parent can fetch elements filtered by that screen */
+        this.searchElementsByScreenName = new EventEmitter();
         /** Emitted when Create or Edit form is opened - parent should fetch screen names and (for edit) latest element */
         this.formOpenRequest = new EventEmitter();
         /** Emitted when user selects an element from the list - parent should set element and editingElementId for Edit flow */
@@ -22807,10 +22919,10 @@ class ElementPopupComponent {
     }
 }
 ElementPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementPopupComponent, deps: [{ token: CUSTOM_ELEMENT_POPUP_REF, optional: true }, { token: ELEMENT_POPUP_DATA, optional: true }, { token: i0.ChangeDetectorRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ElementPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementPopupComponent, selector: "cqa-element-popup", inputs: { value: "value", helpUrl: "helpUrl", labels: "labels", element: "element", elements: "elements", enableForm: "enableForm", isOnRecord: "isOnRecord", hasMoreElements: "hasMoreElements", elementId: "elementId", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", suggestedTags: "suggestedTags", isElementLoading: "isElementLoading", recentSearchedItems: "recentSearchedItems" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", searchElement: "searchElement", recentItemClick: "recentItemClick", loadMoreElements: "loadMoreElements", createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", formOpenRequest: "formOpenRequest", elementSelect: "elementSelect", toggleRecord: "toggleRecord" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "elementFormComponent", first: true, predicate: ElementFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border\" style=\"width: 100%;\">\n  <!-- Header: title left; Need help? + close icon right -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n    <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n      Element\n    </h2>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <!-- Need help? with custom tooltip (works inside overlay) -->\n      <div class=\"cqa-relative cqa-inline-flex\"\n        (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n        <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </a>\n        <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip-nolink)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip-nolink\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </span>\n        <!-- Custom tooltip (exact spec: 306\u00D720 content, 6px radius, #0A0A0A, no arrow) -->\n        <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-125px]\"\n          role=\"tooltip\">\n          <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px]\">\n            {{ helpTooltipText }}\n          </div>\n        </div>\n      </div>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n        [text]=\"''\"\n        icon=\"close\"\n        (clicked)=\"onClose()\"\n        [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-1 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n        title=\"Close\"\n        aria-label=\"Close\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Line below header (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <ng-container *ngIf=\"enableForm && !isOnRecord\">\n    <cqa-element-form\n      #elementForm\n      [elementId]=\"elementId\"\n      [element]=\"element\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [isElementLoading]=\"isElementLoading\"\n      [isEditMode]=\"isEditMode\"\n      [isCreateMode]=\"isCreateMode\"\n      (createElement)=\"onElementFormCreate($event)\"\n      (updateElement)=\"onElementFormUpdate($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (cancel)=\"onElementFormCancel()\"\n      (editInDepth)=\"onEditInDepth()\">\n    </cqa-element-form>\n  </ng-container>\n\n<ng-container *ngIf=\"isOnRecord && !enableForm\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-gap-3 cqa-pt-10\">\n\n    <!-- Video Icon -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[64px] cqa-h-[64px] cqa-rounded-full cqa-bg-[#FEE2E2]\">\n      <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M21.333 17.3333L28.297 21.9759C28.3974 22.0428 28.514 22.0811 28.6345 22.0868C28.7549 22.0926 28.8747 22.0656 28.981 22.0087C29.0873 21.9517 29.1762 21.8671 29.2382 21.7636C29.3002 21.6602 29.3329 21.5419 29.333 21.4213V10.4933C29.333 10.376 29.3021 10.2607 29.2434 10.1592C29.1846 10.0577 29.1001 9.97344 28.9984 9.91501C28.8967 9.85658 28.7814 9.82602 28.6641 9.82642C28.5468 9.82682 28.4317 9.85816 28.3303 9.91728L21.333 13.9999\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.667 8H5.33366C3.8609 8 2.66699 9.19391 2.66699 10.6667V21.3333C2.66699 22.8061 3.8609 24 5.33366 24H18.667C20.1398 24 21.3337 22.8061 21.3337 21.3333V10.6667C21.3337 9.19391 20.1398 8 18.667 8Z\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        \n    </div>\n\n    <!-- Title -->\n    <h4 class=\"cqa-m-0 cqa-text-[16px] cqa-leading-[24px] cqa-font-[600] cqa-text-[#0A0A0A]\">\n      Recording Mode Active\n    </h4>\n\n    <!-- Subtitle -->\n    <p class=\"cqa-m-0 cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280]\">\n      Click on any element in the browser to capture it\n    </p>\n  </div>\n\n  <!-- Footer -->\n  <div class=\"cqa-flex cqa-justify-center cqa-pb-4\">\n    <cqa-button\n      variant=\"outlined\"\n      btnSize=\"lg\"\n      [text]=\"'Cancel Recording'\"\n      (clicked)=\"onToggleRecordClick()\"\n      [customClass]=\"'cqa-text-[14px] cqa-px-16 cqa-py-[9px] cqa-border-[#414146]'\">\n    </cqa-button>\n  </div>\n</ng-container>\n\n\n  <ng-container *ngIf=\"!enableForm && !isOnRecord\">\n<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n\n  <!-- Selected -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Selected</span>\n\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-between\n             cqa-bg-[#FFFBEB] cqa-border cqa-border-[#fadfba]\n             cqa-rounded-lg cqa-p-3 cqa-border-solid cqa-gap-3\">\n\n      <div class=\"cqa-flex cqa-px-3 cqa-py-2 cqa-rounded-lg cqa-flex-col cqa-gap-0.5 cqa-bg-[#f5f5f5] cqa-flex-1\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-min-w-0\">\n          <span class=\"cqa-text-[14px] cqa-font-[600] cqa-text-[#111827] cqa-min-w-0 cqa-flex-1\"\n          style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n          [matTooltip]=\"element.title\"\n          matTooltipPosition=\"above\">\n          {{element.title}}\n        </span>\n\n        <div class=\"cqa-flex cqa-gap-2 cqa-max-w-[80px] cqa-justify-end cqa-flex-wrap\">\n          <span *ngFor=\"let l of element.labels\"\n            class=\"cqa-text-[10px] cqa-px-1.5 cqa-py-0.5\n                  cqa-rounded cqa-bg-[#EEF2FF] cqa-text-[#3F43EE] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\"\n            style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n            [matTooltip]=\"l\"\n            matTooltipPosition=\"above\">\n            {{l}}\n          </span>\n        </div>\n      </div>\n\n      <span class=\"cqa-text-[10px] cqa-text-[#6B7280]\">\n          {{element.selector}}\n        </span>\n      </div>\n      <cqa-button variant=\"outlined\" icon=\"edit\" btnSize=\"lg\" [text]=\"'Edit'\" [fullWidth]=\"true\" (clicked)=\"toggleForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- Recent -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" *ngIf=\"recentSearchedItems.length > 0\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Recent</span>\n\n    <div class=\"cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n\n      <div *ngFor=\"let item of recentSearchedItems\" \n        class=\"cqa-cursor-pointer cqa-inline-block\"\n        (click)=\"onRecentItemClick(item)\">\n        <cqa-badge  \n          class=\"cqa-element-badge cqa-mb-2 cqa-chip !cqa-bg-white !cqa-text-[12px] cqa-whitespace-nowrap\" \n          [label]=\"item\"></cqa-badge>\n      </div>\n    </div>\n  </div>\n\n  <!-- Element Library -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Element Library</span>\n    <cqa-search-bar [fullWidth]=\"true\" [value]=\"searchValue\" placeholder=\"Search library\" (valueChange)=\"search($event)\"></cqa-search-bar>        \n  </div>\n\n  <cqa-element-list \n    [items]=\"elements\"\n    [selectedItem]=\"element\"\n    [titleKey]=\"'title'\"\n    [selectorKey]=\"'selector'\"\n    [labelsKey]=\"'labels'\"\n    [maxHeight]=\"'200px'\"\n    [hasMore]=\"hasMoreElements\"\n    (itemClick)=\"onElementClick($event)\"\n    (loadMore)=\"onLoadMoreElements()\">\n  </cqa-element-list>\n</div>\n\n\n      <!-- Footer: Cancel, Apply (full width in one row) -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"radio_button_checked\" btnSize=\"lg\" [text]=\"'Record'\" [fullWidth]=\"true\" (clicked)=\"onToggleRecordClick()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"add\" btnSize=\"lg\" [text]=\"'Create New'\" [fullWidth]=\"true\" (clicked)=\"openCreateForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n        </div>\n      </div>\n  </ng-container>\n\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ElementListComponent, selector: "cqa-element-list", inputs: ["items", "titleKey", "selectorKey", "labelsKey", "screenNameObjectKey", "maxHeight", "selectedItem", "hasMore"], outputs: ["itemClick", "loadMore"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElementPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementPopupComponent, selector: "cqa-element-popup", inputs: { value: "value", helpUrl: "helpUrl", labels: "labels", element: "element", elements: "elements", enableForm: "enableForm", isOnRecord: "isOnRecord", hasMoreElements: "hasMoreElements", elementId: "elementId", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", isLoadingElements: "isLoadingElements", suggestedTags: "suggestedTags", isElementLoading: "isElementLoading", recentSearchedItems: "recentSearchedItems" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", searchElement: "searchElement", recentItemClick: "recentItemClick", loadMoreElements: "loadMoreElements", createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", searchElementsByScreenName: "searchElementsByScreenName", formOpenRequest: "formOpenRequest", elementSelect: "elementSelect", toggleRecord: "toggleRecord" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "elementFormComponent", first: true, predicate: ElementFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border\" style=\"width: 100%;\">\n  <!-- Header: title left; Need help? + close icon right -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n    <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n      Element\n    </h2>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <!-- Need help? with custom tooltip (works inside overlay) -->\n      <div class=\"cqa-relative cqa-inline-flex\"\n        (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n        <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </a>\n        <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip-nolink)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip-nolink\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </span>\n        <!-- Custom tooltip (exact spec: 306\u00D720 content, 6px radius, #0A0A0A, no arrow) -->\n        <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-125px]\"\n          role=\"tooltip\">\n          <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px]\">\n            {{ helpTooltipText }}\n          </div>\n        </div>\n      </div>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n        [text]=\"''\"\n        icon=\"close\"\n        (clicked)=\"onClose()\"\n        [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-1 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n        title=\"Close\"\n        aria-label=\"Close\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Line below header (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <ng-container *ngIf=\"enableForm && !isOnRecord\">\n    <cqa-element-form\n      #elementForm\n      [elementId]=\"elementId\"\n      [element]=\"element\"\n      [elements]=\"elements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [isElementLoading]=\"isElementLoading\"\n      [isEditMode]=\"isEditMode\"\n      [isCreateMode]=\"isCreateMode\"\n      (createElement)=\"onElementFormCreate($event)\"\n      (updateElement)=\"onElementFormUpdate($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (searchElements)=\"searchElement.emit($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (cancel)=\"onElementFormCancel()\"\n      (editInDepth)=\"onEditInDepth()\">\n    </cqa-element-form>\n  </ng-container>\n\n<ng-container *ngIf=\"isOnRecord && !enableForm\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-gap-3 cqa-pt-10\">\n\n    <!-- Video Icon -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[64px] cqa-h-[64px] cqa-rounded-full cqa-bg-[#FEE2E2]\">\n      <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M21.333 17.3333L28.297 21.9759C28.3974 22.0428 28.514 22.0811 28.6345 22.0868C28.7549 22.0926 28.8747 22.0656 28.981 22.0087C29.0873 21.9517 29.1762 21.8671 29.2382 21.7636C29.3002 21.6602 29.3329 21.5419 29.333 21.4213V10.4933C29.333 10.376 29.3021 10.2607 29.2434 10.1592C29.1846 10.0577 29.1001 9.97344 28.9984 9.91501C28.8967 9.85658 28.7814 9.82602 28.6641 9.82642C28.5468 9.82682 28.4317 9.85816 28.3303 9.91728L21.333 13.9999\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.667 8H5.33366C3.8609 8 2.66699 9.19391 2.66699 10.6667V21.3333C2.66699 22.8061 3.8609 24 5.33366 24H18.667C20.1398 24 21.3337 22.8061 21.3337 21.3333V10.6667C21.3337 9.19391 20.1398 8 18.667 8Z\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        \n    </div>\n\n    <!-- Title -->\n    <h4 class=\"cqa-m-0 cqa-text-[16px] cqa-leading-[24px] cqa-font-[600] cqa-text-[#0A0A0A]\">\n      Recording Mode Active\n    </h4>\n\n    <!-- Subtitle -->\n    <p class=\"cqa-m-0 cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280]\">\n      Click on any element in the browser to capture it\n    </p>\n  </div>\n\n  <!-- Footer -->\n  <div class=\"cqa-flex cqa-justify-center cqa-pb-4\">\n    <cqa-button\n      variant=\"outlined\"\n      btnSize=\"lg\"\n      [text]=\"'Cancel Recording'\"\n      (clicked)=\"onToggleRecordClick()\"\n      [customClass]=\"'cqa-text-[14px] cqa-px-16 cqa-py-[9px] cqa-border-[#414146]'\">\n    </cqa-button>\n  </div>\n</ng-container>\n\n\n  <ng-container *ngIf=\"!enableForm && !isOnRecord\">\n<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n\n  <!-- Selected -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Selected</span>\n\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-between\n             cqa-bg-[#FFFBEB] cqa-border cqa-border-[#fadfba]\n             cqa-rounded-lg cqa-p-3 cqa-border-solid cqa-gap-3\">\n\n      <div class=\"cqa-flex cqa-px-3 cqa-py-2 cqa-rounded-lg cqa-flex-col cqa-gap-0.5 cqa-bg-[#f5f5f5] cqa-flex-1\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-min-w-0\">\n          <span class=\"cqa-text-[14px] cqa-font-[600] cqa-text-[#111827] cqa-min-w-0 cqa-flex-1\"\n          style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n          [matTooltip]=\"element.title\"\n          matTooltipPosition=\"above\">\n          {{element.title}}\n        </span>\n\n        <div class=\"cqa-flex cqa-gap-2 cqa-max-w-[80px] cqa-justify-end cqa-flex-wrap\">\n          <span *ngFor=\"let l of element.labels\"\n            class=\"cqa-text-[10px] cqa-px-1.5 cqa-py-0.5\n                  cqa-rounded cqa-bg-[#EEF2FF] cqa-text-[#3F43EE] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\"\n            style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n            [matTooltip]=\"l\"\n            matTooltipPosition=\"above\">\n            {{l}}\n          </span>\n        </div>\n      </div>\n\n      <span class=\"cqa-text-[10px] cqa-text-[#6B7280]\">\n          {{element.selector}}\n        </span>\n      </div>\n      <cqa-button variant=\"outlined\" icon=\"edit\" btnSize=\"lg\" [text]=\"'Edit'\" [fullWidth]=\"true\" (clicked)=\"toggleForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- Recent -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" *ngIf=\"recentSearchedItems.length > 0\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Recent</span>\n\n    <div class=\"cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n\n      <div *ngFor=\"let item of recentSearchedItems\" \n        class=\"cqa-cursor-pointer cqa-inline-block\"\n        (click)=\"onRecentItemClick(item)\">\n        <cqa-badge  \n          class=\"cqa-element-badge cqa-mb-2 cqa-chip !cqa-bg-white !cqa-text-[12px] cqa-whitespace-nowrap\" \n          [label]=\"item\"></cqa-badge>\n      </div>\n    </div>\n  </div>\n\n  <!-- Element Library -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Element Library</span>\n    <cqa-search-bar [fullWidth]=\"true\" [value]=\"searchValue\" placeholder=\"Search library\" (valueChange)=\"search($event)\"></cqa-search-bar>        \n  </div>\n\n  <cqa-element-list \n    [items]=\"elements\"\n    [selectedItem]=\"element\"\n    [titleKey]=\"'title'\"\n    [selectorKey]=\"'selector'\"\n    [labelsKey]=\"'labels'\"\n    [maxHeight]=\"'200px'\"\n    [hasMore]=\"hasMoreElements\"\n    (itemClick)=\"onElementClick($event)\"\n    (loadMore)=\"onLoadMoreElements()\">\n  </cqa-element-list>\n</div>\n\n\n      <!-- Footer: Cancel, Apply (full width in one row) -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"radio_button_checked\" btnSize=\"lg\" [text]=\"'Record'\" [fullWidth]=\"true\" (clicked)=\"onToggleRecordClick()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"add\" btnSize=\"lg\" [text]=\"'Create New'\" [fullWidth]=\"true\" (clicked)=\"openCreateForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n        </div>\n      </div>\n  </ng-container>\n\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: 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"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ElementListComponent, selector: "cqa-element-list", inputs: ["items", "titleKey", "selectorKey", "labelsKey", "screenNameObjectKey", "maxHeight", "selectedItem", "hasMore"], outputs: ["itemClick", "loadMore"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-element-popup', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border\" style=\"width: 100%;\">\n  <!-- Header: title left; Need help? + close icon right -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n    <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n      Element\n    </h2>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <!-- Need help? with custom tooltip (works inside overlay) -->\n      <div class=\"cqa-relative cqa-inline-flex\"\n        (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n        <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </a>\n        <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip-nolink)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip-nolink\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </span>\n        <!-- Custom tooltip (exact spec: 306\u00D720 content, 6px radius, #0A0A0A, no arrow) -->\n        <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-125px]\"\n          role=\"tooltip\">\n          <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px]\">\n            {{ helpTooltipText }}\n          </div>\n        </div>\n      </div>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n        [text]=\"''\"\n        icon=\"close\"\n        (clicked)=\"onClose()\"\n        [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-1 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n        title=\"Close\"\n        aria-label=\"Close\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Line below header (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <ng-container *ngIf=\"enableForm && !isOnRecord\">\n    <cqa-element-form\n      #elementForm\n      [elementId]=\"elementId\"\n      [element]=\"element\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [isElementLoading]=\"isElementLoading\"\n      [isEditMode]=\"isEditMode\"\n      [isCreateMode]=\"isCreateMode\"\n      (createElement)=\"onElementFormCreate($event)\"\n      (updateElement)=\"onElementFormUpdate($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (cancel)=\"onElementFormCancel()\"\n      (editInDepth)=\"onEditInDepth()\">\n    </cqa-element-form>\n  </ng-container>\n\n<ng-container *ngIf=\"isOnRecord && !enableForm\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-gap-3 cqa-pt-10\">\n\n    <!-- Video Icon -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[64px] cqa-h-[64px] cqa-rounded-full cqa-bg-[#FEE2E2]\">\n      <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M21.333 17.3333L28.297 21.9759C28.3974 22.0428 28.514 22.0811 28.6345 22.0868C28.7549 22.0926 28.8747 22.0656 28.981 22.0087C29.0873 21.9517 29.1762 21.8671 29.2382 21.7636C29.3002 21.6602 29.3329 21.5419 29.333 21.4213V10.4933C29.333 10.376 29.3021 10.2607 29.2434 10.1592C29.1846 10.0577 29.1001 9.97344 28.9984 9.91501C28.8967 9.85658 28.7814 9.82602 28.6641 9.82642C28.5468 9.82682 28.4317 9.85816 28.3303 9.91728L21.333 13.9999\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.667 8H5.33366C3.8609 8 2.66699 9.19391 2.66699 10.6667V21.3333C2.66699 22.8061 3.8609 24 5.33366 24H18.667C20.1398 24 21.3337 22.8061 21.3337 21.3333V10.6667C21.3337 9.19391 20.1398 8 18.667 8Z\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        \n    </div>\n\n    <!-- Title -->\n    <h4 class=\"cqa-m-0 cqa-text-[16px] cqa-leading-[24px] cqa-font-[600] cqa-text-[#0A0A0A]\">\n      Recording Mode Active\n    </h4>\n\n    <!-- Subtitle -->\n    <p class=\"cqa-m-0 cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280]\">\n      Click on any element in the browser to capture it\n    </p>\n  </div>\n\n  <!-- Footer -->\n  <div class=\"cqa-flex cqa-justify-center cqa-pb-4\">\n    <cqa-button\n      variant=\"outlined\"\n      btnSize=\"lg\"\n      [text]=\"'Cancel Recording'\"\n      (clicked)=\"onToggleRecordClick()\"\n      [customClass]=\"'cqa-text-[14px] cqa-px-16 cqa-py-[9px] cqa-border-[#414146]'\">\n    </cqa-button>\n  </div>\n</ng-container>\n\n\n  <ng-container *ngIf=\"!enableForm && !isOnRecord\">\n<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n\n  <!-- Selected -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Selected</span>\n\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-between\n             cqa-bg-[#FFFBEB] cqa-border cqa-border-[#fadfba]\n             cqa-rounded-lg cqa-p-3 cqa-border-solid cqa-gap-3\">\n\n      <div class=\"cqa-flex cqa-px-3 cqa-py-2 cqa-rounded-lg cqa-flex-col cqa-gap-0.5 cqa-bg-[#f5f5f5] cqa-flex-1\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-min-w-0\">\n          <span class=\"cqa-text-[14px] cqa-font-[600] cqa-text-[#111827] cqa-min-w-0 cqa-flex-1\"\n          style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n          [matTooltip]=\"element.title\"\n          matTooltipPosition=\"above\">\n          {{element.title}}\n        </span>\n\n        <div class=\"cqa-flex cqa-gap-2 cqa-max-w-[80px] cqa-justify-end cqa-flex-wrap\">\n          <span *ngFor=\"let l of element.labels\"\n            class=\"cqa-text-[10px] cqa-px-1.5 cqa-py-0.5\n                  cqa-rounded cqa-bg-[#EEF2FF] cqa-text-[#3F43EE] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\"\n            style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n            [matTooltip]=\"l\"\n            matTooltipPosition=\"above\">\n            {{l}}\n          </span>\n        </div>\n      </div>\n\n      <span class=\"cqa-text-[10px] cqa-text-[#6B7280]\">\n          {{element.selector}}\n        </span>\n      </div>\n      <cqa-button variant=\"outlined\" icon=\"edit\" btnSize=\"lg\" [text]=\"'Edit'\" [fullWidth]=\"true\" (clicked)=\"toggleForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- Recent -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" *ngIf=\"recentSearchedItems.length > 0\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Recent</span>\n\n    <div class=\"cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n\n      <div *ngFor=\"let item of recentSearchedItems\" \n        class=\"cqa-cursor-pointer cqa-inline-block\"\n        (click)=\"onRecentItemClick(item)\">\n        <cqa-badge  \n          class=\"cqa-element-badge cqa-mb-2 cqa-chip !cqa-bg-white !cqa-text-[12px] cqa-whitespace-nowrap\" \n          [label]=\"item\"></cqa-badge>\n      </div>\n    </div>\n  </div>\n\n  <!-- Element Library -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Element Library</span>\n    <cqa-search-bar [fullWidth]=\"true\" [value]=\"searchValue\" placeholder=\"Search library\" (valueChange)=\"search($event)\"></cqa-search-bar>        \n  </div>\n\n  <cqa-element-list \n    [items]=\"elements\"\n    [selectedItem]=\"element\"\n    [titleKey]=\"'title'\"\n    [selectorKey]=\"'selector'\"\n    [labelsKey]=\"'labels'\"\n    [maxHeight]=\"'200px'\"\n    [hasMore]=\"hasMoreElements\"\n    (itemClick)=\"onElementClick($event)\"\n    (loadMore)=\"onLoadMoreElements()\">\n  </cqa-element-list>\n</div>\n\n\n      <!-- Footer: Cancel, Apply (full width in one row) -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"radio_button_checked\" btnSize=\"lg\" [text]=\"'Record'\" [fullWidth]=\"true\" (clicked)=\"onToggleRecordClick()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"add\" btnSize=\"lg\" [text]=\"'Create New'\" [fullWidth]=\"true\" (clicked)=\"openCreateForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n        </div>\n      </div>\n  </ng-container>\n\n</div>\n" }]
+            args: [{ selector: 'cqa-element-popup', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border\" style=\"width: 100%;\">\n  <!-- Header: title left; Need help? + close icon right -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n    <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n      Element\n    </h2>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <!-- Need help? with custom tooltip (works inside overlay) -->\n      <div class=\"cqa-relative cqa-inline-flex\"\n        (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n        <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </a>\n        <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip-nolink)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip-nolink\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </span>\n        <!-- Custom tooltip (exact spec: 306\u00D720 content, 6px radius, #0A0A0A, no arrow) -->\n        <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-125px]\"\n          role=\"tooltip\">\n          <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px]\">\n            {{ helpTooltipText }}\n          </div>\n        </div>\n      </div>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n        [text]=\"''\"\n        icon=\"close\"\n        (clicked)=\"onClose()\"\n        [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-1 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n        title=\"Close\"\n        aria-label=\"Close\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Line below header (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <ng-container *ngIf=\"enableForm && !isOnRecord\">\n    <cqa-element-form\n      #elementForm\n      [elementId]=\"elementId\"\n      [element]=\"element\"\n      [elements]=\"elements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [isElementLoading]=\"isElementLoading\"\n      [isEditMode]=\"isEditMode\"\n      [isCreateMode]=\"isCreateMode\"\n      (createElement)=\"onElementFormCreate($event)\"\n      (updateElement)=\"onElementFormUpdate($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (searchElements)=\"searchElement.emit($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (cancel)=\"onElementFormCancel()\"\n      (editInDepth)=\"onEditInDepth()\">\n    </cqa-element-form>\n  </ng-container>\n\n<ng-container *ngIf=\"isOnRecord && !enableForm\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-gap-3 cqa-pt-10\">\n\n    <!-- Video Icon -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[64px] cqa-h-[64px] cqa-rounded-full cqa-bg-[#FEE2E2]\">\n      <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M21.333 17.3333L28.297 21.9759C28.3974 22.0428 28.514 22.0811 28.6345 22.0868C28.7549 22.0926 28.8747 22.0656 28.981 22.0087C29.0873 21.9517 29.1762 21.8671 29.2382 21.7636C29.3002 21.6602 29.3329 21.5419 29.333 21.4213V10.4933C29.333 10.376 29.3021 10.2607 29.2434 10.1592C29.1846 10.0577 29.1001 9.97344 28.9984 9.91501C28.8967 9.85658 28.7814 9.82602 28.6641 9.82642C28.5468 9.82682 28.4317 9.85816 28.3303 9.91728L21.333 13.9999\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.667 8H5.33366C3.8609 8 2.66699 9.19391 2.66699 10.6667V21.3333C2.66699 22.8061 3.8609 24 5.33366 24H18.667C20.1398 24 21.3337 22.8061 21.3337 21.3333V10.6667C21.3337 9.19391 20.1398 8 18.667 8Z\" stroke=\"#E7000B\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        \n    </div>\n\n    <!-- Title -->\n    <h4 class=\"cqa-m-0 cqa-text-[16px] cqa-leading-[24px] cqa-font-[600] cqa-text-[#0A0A0A]\">\n      Recording Mode Active\n    </h4>\n\n    <!-- Subtitle -->\n    <p class=\"cqa-m-0 cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280]\">\n      Click on any element in the browser to capture it\n    </p>\n  </div>\n\n  <!-- Footer -->\n  <div class=\"cqa-flex cqa-justify-center cqa-pb-4\">\n    <cqa-button\n      variant=\"outlined\"\n      btnSize=\"lg\"\n      [text]=\"'Cancel Recording'\"\n      (clicked)=\"onToggleRecordClick()\"\n      [customClass]=\"'cqa-text-[14px] cqa-px-16 cqa-py-[9px] cqa-border-[#414146]'\">\n    </cqa-button>\n  </div>\n</ng-container>\n\n\n  <ng-container *ngIf=\"!enableForm && !isOnRecord\">\n<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n\n  <!-- Selected -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Selected</span>\n\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-between\n             cqa-bg-[#FFFBEB] cqa-border cqa-border-[#fadfba]\n             cqa-rounded-lg cqa-p-3 cqa-border-solid cqa-gap-3\">\n\n      <div class=\"cqa-flex cqa-px-3 cqa-py-2 cqa-rounded-lg cqa-flex-col cqa-gap-0.5 cqa-bg-[#f5f5f5] cqa-flex-1\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-min-w-0\">\n          <span class=\"cqa-text-[14px] cqa-font-[600] cqa-text-[#111827] cqa-min-w-0 cqa-flex-1\"\n          style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n          [matTooltip]=\"element.title\"\n          matTooltipPosition=\"above\">\n          {{element.title}}\n        </span>\n\n        <div class=\"cqa-flex cqa-gap-2 cqa-max-w-[80px] cqa-justify-end cqa-flex-wrap\">\n          <span *ngFor=\"let l of element.labels\"\n            class=\"cqa-text-[10px] cqa-px-1.5 cqa-py-0.5\n                  cqa-rounded cqa-bg-[#EEF2FF] cqa-text-[#3F43EE] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\"\n            style=\"display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;\"\n            [matTooltip]=\"l\"\n            matTooltipPosition=\"above\">\n            {{l}}\n          </span>\n        </div>\n      </div>\n\n      <span class=\"cqa-text-[10px] cqa-text-[#6B7280]\">\n          {{element.selector}}\n        </span>\n      </div>\n      <cqa-button variant=\"outlined\" icon=\"edit\" btnSize=\"lg\" [text]=\"'Edit'\" [fullWidth]=\"true\" (clicked)=\"toggleForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- Recent -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" *ngIf=\"recentSearchedItems.length > 0\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Recent</span>\n\n    <div class=\"cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n\n      <div *ngFor=\"let item of recentSearchedItems\" \n        class=\"cqa-cursor-pointer cqa-inline-block\"\n        (click)=\"onRecentItemClick(item)\">\n        <cqa-badge  \n          class=\"cqa-element-badge cqa-mb-2 cqa-chip !cqa-bg-white !cqa-text-[12px] cqa-whitespace-nowrap\" \n          [label]=\"item\"></cqa-badge>\n      </div>\n    </div>\n  </div>\n\n  <!-- Element Library -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Element Library</span>\n    <cqa-search-bar [fullWidth]=\"true\" [value]=\"searchValue\" placeholder=\"Search library\" (valueChange)=\"search($event)\"></cqa-search-bar>        \n  </div>\n\n  <cqa-element-list \n    [items]=\"elements\"\n    [selectedItem]=\"element\"\n    [titleKey]=\"'title'\"\n    [selectorKey]=\"'selector'\"\n    [labelsKey]=\"'labels'\"\n    [maxHeight]=\"'200px'\"\n    [hasMore]=\"hasMoreElements\"\n    (itemClick)=\"onElementClick($event)\"\n    (loadMore)=\"onLoadMoreElements()\">\n  </cqa-element-list>\n</div>\n\n\n      <!-- Footer: Cancel, Apply (full width in one row) -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"radio_button_checked\" btnSize=\"lg\" [text]=\"'Record'\" [fullWidth]=\"true\" (clicked)=\"onToggleRecordClick()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <cqa-button variant=\"outlined\" icon=\"add\" btnSize=\"lg\" [text]=\"'Create New'\" [fullWidth]=\"true\" (clicked)=\"openCreateForm()\"\n              [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n          </div>\n        </div>\n      </div>\n  </ng-container>\n\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: ElementPopupRef, decorators: [{
                         type: Optional
@@ -22849,6 +22961,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isLoadingScreenNames: [{
                 type: Input
+            }], isLoadingElements: [{
+                type: Input
             }], suggestedTags: [{
                 type: Input
             }], isElementLoading: [{
@@ -22877,6 +22991,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], loadMoreScreenNames: [{
                 type: Output
+            }], searchElementsByScreenName: [{
+                type: Output
             }], formOpenRequest: [{
                 type: Output
             }], elementSelect: [{
@@ -35132,7 +35248,7 @@ 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: 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: i3$4.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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: MixedVariableInputComponent, selector: "cqa-mixed-variable-input", inputs: ["value", "placeholder", "disabled"], outputs: ["valueChange"] }, { type: 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "cqaCamelToTitle": 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: 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: i3$4.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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: MixedVariableInputComponent, selector: "cqa-mixed-variable-input", inputs: ["value", "placeholder", "disabled"], outputs: ["valueChange"] }, { type: 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "cqaCamelToTitle": 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"] }]
@@ -44432,6 +44548,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * 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.
+ */
+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) {
+        var _a, _b;
+        if (changes['options'] || changes['selectedValue'] || changes['isOpen']) {
+            const valid = (_a = this.options) === null || _a === void 0 ? void 0 : _a.some(o => o.value === this.selectedValue);
+            if (!valid && ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length)) {
+                this.selectedValue = this.options[0].value;
+            }
+        }
+    }
+    get currentOption() {
+        var _a;
+        return (_a = this.options) === null || _a === void 0 ? void 0 : _a.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) {
+        var _a;
+        const option = (_a = this.options) === null || _a === void 0 ? void 0 : _a.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: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.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
+            }] } });
+
 class UiKitModule {
     constructor(iconRegistry) {
         iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
@@ -44523,6 +44729,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         SessionChangesModalComponent,
         ErrorModalComponent,
         SessionRestorationDialogComponent,
+        SubStepsConfirmationDialogComponent,
         ExportCodeModalComponent,
         ProgressIndicatorComponent,
         StepProgressCardComponent,
@@ -44694,6 +44901,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         SessionChangesModalComponent,
         ErrorModalComponent,
         SessionRestorationDialogComponent,
+        SubStepsConfirmationDialogComponent,
         ExportCodeModalComponent,
         ProgressIndicatorComponent,
         StepProgressCardComponent,
@@ -44910,6 +45118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         SessionChangesModalComponent,
                         ErrorModalComponent,
                         SessionRestorationDialogComponent,
+                        SubStepsConfirmationDialogComponent,
                         ExportCodeModalComponent,
                         ProgressIndicatorComponent,
                         StepProgressCardComponent,
@@ -45087,6 +45296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         SessionChangesModalComponent,
                         ErrorModalComponent,
                         SessionRestorationDialogComponent,
+                        SubStepsConfirmationDialogComponent,
                         ExportCodeModalComponent,
                         ProgressIndicatorComponent,
                         StepProgressCardComponent,
@@ -45921,5 +46131,5 @@ function buildTestCaseDetailsFromApi(data, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, MixedVariableInputComponent, NetworkRequestComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
+export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, MixedVariableInputComponent, NetworkRequestComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map