@cqa-lib/cqa-ui 1.1.199 → 1.1.200

package/esm2020/lib/test-case-details/condition-step/condition-step.component.mjs

@@ -724,7 +724,7 @@ export class TestCaseConditionStepComponent {
     }
 }
 TestCaseConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, deps: [{ token: i1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n  <!-- Inline Edit Mode: CONDITION tag, three fields, IF/ELSE chips, Edit In depth, Cancel/Apply -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\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\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - always visible -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add Else\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\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\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                    {{ variable.label }}\n                  </label> -->\n                  <mat-slide-toggle\n                    [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              \n              <!-- Non-boolean variables -->\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <!-- Dropdown for select variables -->\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-dynamic-select \n                      [form]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \n                <!-- Text Input for other variables -->\n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-custom-input\n                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link -->\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Condition Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      IF / ELSE\n    </span>\n\n    <!-- Condition Input -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1\">\n      <span [innerHTML]=\"condition\"></span>\n      <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        If\n      </span>\n      <span\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n      <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        is visible\n      </span> -->\n      <!-- <input\n        type=\"text\"\n        [value]=\"condition\"\n        (input)=\"onConditionChange($any($event.target).value)\"\n        placeholder=\"element `.success-message` is visible\"\n        class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n      /> -->\n    </div>\n\n    <!-- Steps Summary -->\n    <div\n      class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n      {{ getStepsSummary() }}\n    </div>\n\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n    <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Branches -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <div *ngFor=\"let branch of branches\" class=\"cqa-flex cqa-flex-col\">\n      <!-- Branch Header -->\n      <div\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <span>{{ getBranchLabel(branch) }}</span>\n        <span *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onBranchStepChange(branch, step, i)\"\n          (edit)=\"onBranchStepChange(branch, step, i)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onBranchStepChange(branch, step, i)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isReorder]=\"isReorder\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onBranchStepChange(branch, step, i)\"\n            (edit)=\"onBranchStepChange(branch, step, i)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onBranchStepChange(branch, step, i)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n    </div>\n\n    <!-- END IF Marker -->\n    <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n      END IF\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: i2.AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i3.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: i4.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i5.CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i6.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i7.TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch", "isReorder", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }] });
+TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n  <!-- Inline Edit Mode: CONDITION tag, three fields, IF/ELSE chips, Edit In depth, Cancel/Apply -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\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\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - always visible -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add Else\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\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\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                    {{ variable.label }}\n                  </label> -->\n                  <mat-slide-toggle\n                    [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              \n              <!-- Non-boolean variables -->\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <!-- Dropdown for select variables -->\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-dynamic-select \n                      [form]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \n                <!-- Text Input for other variables -->\n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-custom-input\n                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link -->\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Condition Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      IF / ELSE\n    </span>\n\n    <!-- Condition Input -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1\">\n      <span [innerHTML]=\"condition\"></span>\n      <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        If\n      </span>\n      <span\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n      <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        is visible\n      </span> -->\n      <!-- <input\n        type=\"text\"\n        [value]=\"condition\"\n        (input)=\"onConditionChange($any($event.target).value)\"\n        placeholder=\"element `.success-message` is visible\"\n        class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n      /> -->\n    </div>\n\n    <!-- Steps Summary -->\n    <div\n      class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n      {{ getStepsSummary() }}\n    </div>\n\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n    <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Branches -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <div *ngFor=\"let branch of branches\" class=\"cqa-flex cqa-flex-col\">\n      <!-- Branch Header -->\n      <div\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <span>{{ getBranchLabel(branch) }}</span>\n        <span *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onBranchStepChange(branch, step, i)\"\n          (edit)=\"onBranchStepChange(branch, step, i)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onBranchStepChange(branch, step, i)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isReorder]=\"isReorder\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onBranchStepChange(branch, step, i)\"\n            (edit)=\"onBranchStepChange(branch, step, i)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onBranchStepChange(branch, step, i)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n    </div>\n\n    <!-- END IF Marker -->\n    <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n      END IF\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: i2.AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i3.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: i4.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i5.CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i6.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i7.TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch", "isReorder", "addStepBetween", "action", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-test-case-condition-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n  <!-- Inline Edit Mode: CONDITION tag, three fields, IF/ELSE chips, Edit In depth, Cancel/Apply -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\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\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - always visible -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add Else\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\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\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                    {{ variable.label }}\n                  </label> -->\n                  <mat-slide-toggle\n                    [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              \n              <!-- Non-boolean variables -->\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <!-- Dropdown for select variables -->\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-dynamic-select \n                      [form]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \n                <!-- Text Input for other variables -->\n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-custom-input\n                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link -->\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Condition Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      IF / ELSE\n    </span>\n\n    <!-- Condition Input -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1\">\n      <span [innerHTML]=\"condition\"></span>\n      <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        If\n      </span>\n      <span\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n      <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        is visible\n      </span> -->\n      <!-- <input\n        type=\"text\"\n        [value]=\"condition\"\n        (input)=\"onConditionChange($any($event.target).value)\"\n        placeholder=\"element `.success-message` is visible\"\n        class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n      /> -->\n    </div>\n\n    <!-- Steps Summary -->\n    <div\n      class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n      {{ getStepsSummary() }}\n    </div>\n\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n    <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Branches -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <div *ngFor=\"let branch of branches\" class=\"cqa-flex cqa-flex-col\">\n      <!-- Branch Header -->\n      <div\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <span>{{ getBranchLabel(branch) }}</span>\n        <span *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onBranchStepChange(branch, step, i)\"\n          (edit)=\"onBranchStepChange(branch, step, i)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onBranchStepChange(branch, step, i)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isReorder]=\"isReorder\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onBranchStepChange(branch, step, i)\"\n            (edit)=\"onBranchStepChange(branch, step, i)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onBranchStepChange(branch, step, i)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n    </div>\n\n    <!-- END IF Marker -->\n    <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n      END IF\n    </div>\n  </div>\n</div>" }]

package/esm2020/lib/test-case-details/element-list/element-list.component.mjs

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewChild } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 export class ElementListComponent {
@@ -13,8 +13,14 @@ export class ElementListComponent {
         this.labelsKey = 'labels';
         /** Maximum height for the scrollable container (default: '200px') */
         this.maxHeight = '200px';
+        /** Whether more items can be loaded */
+        this.hasMore = false;
         /** Emitted when an item is clicked */
         this.itemClick = new EventEmitter();
+        /** Emitted when user scrolls near the bottom and more items should be loaded */
+        this.loadMore = new EventEmitter();
+        /** Skip the first intersection callback (fires immediately when observe() is called) to prevent duplicate API calls on load */
+        this.skipNextIntersection = false;
     }
     /**
      * Get the value from an item using the specified key
@@ -28,13 +34,65 @@ export class ElementListComponent {
     onItemClick(item) {
         this.itemClick.emit(item);
     }
+    ngAfterViewInit() {
+        if (this.hasMore) {
+            setTimeout(() => this.setupScrollObserver(), 0);
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['hasMore'] && this.hasMore && this.scrollContainer) {
+            setTimeout(() => this.setupScrollObserver(), 0);
+        }
+    }
+    ngOnDestroy() {
+        if (this.scrollObserver) {
+            this.scrollObserver.disconnect();
+        }
+    }
+    setupScrollObserver() {
+        if (!this.hasMore || !this.scrollContainer) {
+            return;
+        }
+        // Find the sentinel element (loading indicator)
+        const sentinel = this.scrollContainer.nativeElement.querySelector('.load-more-sentinel');
+        if (!sentinel) {
+            return;
+        }
+        // Disconnect existing observer if any
+        if (this.scrollObserver) {
+            this.scrollObserver.disconnect();
+        }
+        // Skip the first intersection callback - it fires immediately when observe() is called
+        // if the sentinel is already in view, causing duplicate API calls (page 0 + page 1) on load
+        this.skipNextIntersection = true;
+        // Create IntersectionObserver to detect when sentinel comes into view
+        this.scrollObserver = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting && this.hasMore) {
+                    if (this.skipNextIntersection) {
+                        this.skipNextIntersection = false;
+                        return;
+                    }
+                    this.loadMore.emit();
+                }
+            }
+        }, {
+            root: this.scrollContainer.nativeElement,
+            rootMargin: '50px',
+            threshold: 0.1
+        });
+        this.scrollObserver.observe(sentinel);
+    }
 }
 ElementListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementListComponent, selector: "cqa-element-list", inputs: { items: "items", titleKey: "titleKey", selectorKey: "selectorKey", labelsKey: "labelsKey", maxHeight: "maxHeight" }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div \n  class=\"cqa-max-h-[200px] 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] cqa-flex cqa-flex-col cqa-gap-2\"\n  [style.max-height]=\"maxHeight\">\n  <div *ngFor=\"let item of items\" (click)=\"onItemClick(item)\">\n    <div class=\"hover:cqa-bg-[#F5F5F5] cqa-flex cqa-items-center cqa-justify-between cqa-border cqa-border-[#FDE68A]\n             cqa-rounded-lg cqa-p-3 cqa-cursor-pointer\">\n      <div>\n        <h6 class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-[400] cqa-text-[#171717]\">\n          {{ getItemValue(item, titleKey) }}\n        </h6>\n        <span class=\"cqa-text-[10px] cqa-leading-[100%] cqa-text-[#6B7280]\">\n          {{ getItemValue(item, selectorKey) }}\n        </span>\n      </div>\n      <div class=\"cqa-flex cqa-gap-1\">\n        <span \n          *ngFor=\"let tag of getItemValue(item, labelsKey)\" \n          class=\"cqa-text-[11px] cqa-text-[#4b74ec] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n          {{ tag }}\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementListComponent, selector: "cqa-element-list", inputs: { items: "items", titleKey: "titleKey", selectorKey: "selectorKey", labelsKey: "labelsKey", maxHeight: "maxHeight", hasMore: "hasMore" }, outputs: { itemClick: "itemClick", loadMore: "loadMore" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div \n  #scrollContainer\n  class=\"cqa-max-h-[200px] 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] cqa-flex cqa-flex-col cqa-gap-2\"\n  [style.max-height]=\"maxHeight\">\n  <div *ngFor=\"let item of items\" (click)=\"onItemClick(item)\">\n    <div class=\"hover:cqa-bg-[#F5F5F5] cqa-flex cqa-items-center cqa-justify-between cqa-border cqa-border-[#FDE68A]\n             cqa-rounded-lg cqa-p-3 cqa-cursor-pointer cqa-gap-1\" style=\"word-break: break-word;\">\n      <div>\n        <h6 class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-[400] cqa-text-[#171717]\">\n          {{ getItemValue(item, titleKey) }}\n        </h6>\n        <span class=\"cqa-text-[10px] cqa-leading-[100%] cqa-text-[#6B7280]\">\n          {{ getItemValue(item, selectorKey) }}\n        </span>\n      </div>\n      <div class=\"cqa-flex cqa-gap-1\">\n        <span \n          *ngFor=\"let tag of getItemValue(item, labelsKey)\" \n          class=\"cqa-text-[11px] cqa-text-[#4b74ec] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n          {{ tag }}\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- No elements found message -->\n  <div *ngIf=\"items.length === 0 && !hasMore\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-4 cqa-text-[12px] cqa-text-[#6B7280]\">\n    No elements found\n  </div>\n  <!-- Sentinel element for infinite scroll -->\n  <div *ngIf=\"hasMore\" class=\"load-more-sentinel cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-2\">\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-[12px] cqa-text-[#6B7280]\">{{ items.length === 0 ? 'Loading...' : 'Loading more...' }}</span>\n  </div>\n</div>\n\n", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-element-list', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  class=\"cqa-max-h-[200px] 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] cqa-flex cqa-flex-col cqa-gap-2\"\n  [style.max-height]=\"maxHeight\">\n  <div *ngFor=\"let item of items\" (click)=\"onItemClick(item)\">\n    <div class=\"hover:cqa-bg-[#F5F5F5] cqa-flex cqa-items-center cqa-justify-between cqa-border cqa-border-[#FDE68A]\n             cqa-rounded-lg cqa-p-3 cqa-cursor-pointer\">\n      <div>\n        <h6 class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-[400] cqa-text-[#171717]\">\n          {{ getItemValue(item, titleKey) }}\n        </h6>\n        <span class=\"cqa-text-[10px] cqa-leading-[100%] cqa-text-[#6B7280]\">\n          {{ getItemValue(item, selectorKey) }}\n        </span>\n      </div>\n      <div class=\"cqa-flex cqa-gap-1\">\n        <span \n          *ngFor=\"let tag of getItemValue(item, labelsKey)\" \n          class=\"cqa-text-[11px] cqa-text-[#4b74ec] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n          {{ tag }}\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n" }]
-        }], propDecorators: { items: [{
+            args: [{ selector: 'cqa-element-list', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  #scrollContainer\n  class=\"cqa-max-h-[200px] 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] cqa-flex cqa-flex-col cqa-gap-2\"\n  [style.max-height]=\"maxHeight\">\n  <div *ngFor=\"let item of items\" (click)=\"onItemClick(item)\">\n    <div class=\"hover:cqa-bg-[#F5F5F5] cqa-flex cqa-items-center cqa-justify-between cqa-border cqa-border-[#FDE68A]\n             cqa-rounded-lg cqa-p-3 cqa-cursor-pointer cqa-gap-1\" style=\"word-break: break-word;\">\n      <div>\n        <h6 class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-[400] cqa-text-[#171717]\">\n          {{ getItemValue(item, titleKey) }}\n        </h6>\n        <span class=\"cqa-text-[10px] cqa-leading-[100%] cqa-text-[#6B7280]\">\n          {{ getItemValue(item, selectorKey) }}\n        </span>\n      </div>\n      <div class=\"cqa-flex cqa-gap-1\">\n        <span \n          *ngFor=\"let tag of getItemValue(item, labelsKey)\" \n          class=\"cqa-text-[11px] cqa-text-[#4b74ec] cqa-rounded-full cqa-px-2 cqa-bg-[#eff6ff] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n          {{ tag }}\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- No elements found message -->\n  <div *ngIf=\"items.length === 0 && !hasMore\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-4 cqa-text-[12px] cqa-text-[#6B7280]\">\n    No elements found\n  </div>\n  <!-- Sentinel element for infinite scroll -->\n  <div *ngIf=\"hasMore\" class=\"load-more-sentinel cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-2\">\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-[12px] cqa-text-[#6B7280]\">{{ items.length === 0 ? 'Loading...' : 'Loading more...' }}</span>\n  </div>\n</div>\n\n" }]
+        }], propDecorators: { scrollContainer: [{
+                type: ViewChild,
+                args: ['scrollContainer', { static: false }]
+            }], items: [{
                 type: Input
             }], titleKey: [{
                 type: Input
@@ -44,7 +102,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], maxHeight: [{
                 type: Input
+            }], hasMore: [{
+                type: Input
             }], itemClick: [{
                 type: Output
+            }], loadMore: [{
+                type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbWVudC1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvdGVzdC1jYXNlLWRldGFpbHMvZWxlbWVudC1saXN0L2VsZW1lbnQtbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL3Rlc3QtY2FzZS1kZXRhaWxzL2VsZW1lbnQtbGlzdC9lbGVtZW50LWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBUWhHLE1BQU0sT0FBTyxvQkFBb0I7SUFOakM7UUFPRSxnQ0FBZ0M7UUFDdkIsVUFBSyxHQUFVLEVBQUUsQ0FBQztRQUUzQix5RUFBeUU7UUFDaEUsYUFBUSxHQUFXLE9BQU8sQ0FBQztRQUVwQywrRUFBK0U7UUFDdEUsZ0JBQVcsR0FBVyxVQUFVLENBQUM7UUFFMUMsd0VBQXdFO1FBQy9ELGNBQVMsR0FBVyxRQUFRLENBQUM7UUFFdEMscUVBQXFFO1FBQzVELGNBQVMsR0FBVyxPQUFPLENBQUM7UUFFckMsc0NBQXNDO1FBQzVCLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0tBZS9DO0lBYkM7O09BRUc7SUFDSCxZQUFZLENBQUMsSUFBUyxFQUFFLEdBQVc7UUFDakMsT0FBTyxJQUFJLEVBQUUsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNyQixDQUFDO0lBRUQ7O09BRUc7SUFDSCxXQUFXLENBQUMsSUFBUztRQUNuQixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUM1QixDQUFDOztpSEEvQlUsb0JBQW9CO3FHQUFwQixvQkFBb0Isb1FDUmpDLDhyQ0F5QkE7MkZEakJhLG9CQUFvQjtrQkFOaEMsU0FBUzsrQkFDRSxrQkFBa0IsUUFFdEIsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFLG1CQUNiLHVCQUF1QixDQUFDLE1BQU07OEJBSXRDLEtBQUs7c0JBQWIsS0FBSztnQkFHRyxRQUFRO3NCQUFoQixLQUFLO2dCQUdHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBR0csU0FBUztzQkFBakIsS0FBSztnQkFHRyxTQUFTO3NCQUFqQixLQUFLO2dCQUdJLFNBQVM7c0JBQWxCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3FhLWVsZW1lbnQtbGlzdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9lbGVtZW50LWxpc3QuY29tcG9uZW50Lmh0bWwnLFxuICBob3N0OiB7IGNsYXNzOiAnY3FhLXVpLXJvb3QnIH0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBFbGVtZW50TGlzdENvbXBvbmVudCB7XG4gIC8qKiBBcnJheSBvZiBpdGVtcyB0byBkaXNwbGF5ICovXG4gIEBJbnB1dCgpIGl0ZW1zOiBhbnlbXSA9IFtdO1xuICBcbiAgLyoqIEtleSB0byBhY2Nlc3MgdGhlIHRpdGxlIHByb3BlcnR5IGZyb20gZWFjaCBpdGVtIChkZWZhdWx0OiAndGl0bGUnKSAqL1xuICBASW5wdXQoKSB0aXRsZUtleTogc3RyaW5nID0gJ3RpdGxlJztcbiAgXG4gIC8qKiBLZXkgdG8gYWNjZXNzIHRoZSBzZWxlY3RvciBwcm9wZXJ0eSBmcm9tIGVhY2ggaXRlbSAoZGVmYXVsdDogJ3NlbGVjdG9yJykgKi9cbiAgQElucHV0KCkgc2VsZWN0b3JLZXk6IHN0cmluZyA9ICdzZWxlY3Rvcic7XG4gIFxuICAvKiogS2V5IHRvIGFjY2VzcyB0aGUgbGFiZWxzIGFycmF5IGZyb20gZWFjaCBpdGVtIChkZWZhdWx0OiAnbGFiZWxzJykgKi9cbiAgQElucHV0KCkgbGFiZWxzS2V5OiBzdHJpbmcgPSAnbGFiZWxzJztcbiAgXG4gIC8qKiBNYXhpbXVtIGhlaWdodCBmb3IgdGhlIHNjcm9sbGFibGUgY29udGFpbmVyIChkZWZhdWx0OiAnMjAwcHgnKSAqL1xuICBASW5wdXQoKSBtYXhIZWlnaHQ6IHN0cmluZyA9ICcyMDBweCc7XG5cbiAgLyoqIEVtaXR0ZWQgd2hlbiBhbiBpdGVtIGlzIGNsaWNrZWQgKi9cbiAgQE91dHB1dCgpIGl0ZW1DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIC8qKlxuICAgKiBHZXQgdGhlIHZhbHVlIGZyb20gYW4gaXRlbSB1c2luZyB0aGUgc3BlY2lmaWVkIGtleVxuICAgKi9cbiAgZ2V0SXRlbVZhbHVlKGl0ZW06IGFueSwga2V5OiBzdHJpbmcpOiBhbnkge1xuICAgIHJldHVybiBpdGVtPy5ba2V5XTtcbiAgfVxuXG4gIC8qKlxuICAgKiBIYW5kbGUgaXRlbSBjbGlja1xuICAgKi9cbiAgb25JdGVtQ2xpY2soaXRlbTogYW55KTogdm9pZCB7XG4gICAgdGhpcy5pdGVtQ2xpY2suZW1pdChpdGVtKTtcbiAgfVxufVxuXG4iLCI8ZGl2IFxuICBjbGFzcz1cImNxYS1tYXgtaC1bMjAwcHhdIGNxYS1vdmVyZmxvdy15LWF1dG8gY3FhLXNjcm9sbGJhci10aGluIGNxYS1zY3JvbGxiYXItdHJhY2stdHJhbnNwYXJlbnQgY3FhLXNjcm9sbGJhci10aHVtYi1bI0U1RTdFQl0gY3FhLXNjcm9sbGJhci10aHVtYi1yb3VuZGVkLWZ1bGwgY3FhLXNjcm9sbGJhci10aHVtYi1ob3ZlcjpjcWEtYmctWyNEMUQ1REJdIGNxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtZ2FwLTJcIlxuICBbc3R5bGUubWF4LWhlaWdodF09XCJtYXhIZWlnaHRcIj5cbiAgPGRpdiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtc1wiIChjbGljayk9XCJvbkl0ZW1DbGljayhpdGVtKVwiPlxuICAgIDxkaXYgY2xhc3M9XCJob3ZlcjpjcWEtYmctWyNGNUY1RjVdIGNxYS1mbGV4IGNxYS1pdGVtcy1jZW50ZXIgY3FhLWp1c3RpZnktYmV0d2VlbiBjcWEtYm9yZGVyIGNxYS1ib3JkZXItWyNGREU2OEFdXG4gICAgICAgICAgICAgY3FhLXJvdW5kZWQtbGcgY3FhLXAtMyBjcWEtY3Vyc29yLXBvaW50ZXJcIj5cbiAgICAgIDxkaXY+XG4gICAgICAgIDxoNiBjbGFzcz1cImNxYS10ZXh0LVsxMnB4XSBjcWEtbGVhZGluZy1bMTAwJV0gY3FhLWZvbnQtWzQwMF0gY3FhLXRleHQtWyMxNzE3MTddXCI+XG4gICAgICAgICAge3sgZ2V0SXRlbVZhbHVlKGl0ZW0sIHRpdGxlS2V5KSB9fVxuICAgICAgICA8L2g2PlxuICAgICAgICA8c3BhbiBjbGFzcz1cImNxYS10ZXh0LVsxMHB4XSBjcWEtbGVhZGluZy1bMTAwJV0gY3FhLXRleHQtWyM2QjcyODBdXCI+XG4gICAgICAgICAge3sgZ2V0SXRlbVZhbHVlKGl0ZW0sIHNlbGVjdG9yS2V5KSB9fVxuICAgICAgICA8L3NwYW4+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJjcWEtZmxleCBjcWEtZ2FwLTFcIj5cbiAgICAgICAgPHNwYW4gXG4gICAgICAgICAgKm5nRm9yPVwibGV0IHRhZyBvZiBnZXRJdGVtVmFsdWUoaXRlbSwgbGFiZWxzS2V5KVwiIFxuICAgICAgICAgIGNsYXNzPVwiY3FhLXRleHQtWzExcHhdIGNxYS10ZXh0LVsjNGI3NGVjXSBjcWEtcm91bmRlZC1mdWxsIGNxYS1weC0yIGNxYS1iZy1bI2VmZjZmZl0gY3FhLWJvcmRlciBjcWEtYm9yZGVyLXNvbGlkIGNxYS1ib3JkZXItWyNjOGUwZmZdXCI+XG4gICAgICAgICAge3sgdGFnIH19XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbWVudC1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvdGVzdC1jYXNlLWRldGFpbHMvZWxlbWVudC1saXN0L2VsZW1lbnQtbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL3Rlc3QtY2FzZS1kZXRhaWxzL2VsZW1lbnQtbGlzdC9lbGVtZW50LWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSx1QkFBdUIsRUFBNEIsU0FBUyxFQUF3QyxNQUFNLGVBQWUsQ0FBQzs7O0FBUTNLLE1BQU0sT0FBTyxvQkFBb0I7SUFOakM7UUFTRSxnQ0FBZ0M7UUFDdkIsVUFBSyxHQUFVLEVBQUUsQ0FBQztRQUUzQix5RUFBeUU7UUFDaEUsYUFBUSxHQUFXLE9BQU8sQ0FBQztRQUVwQywrRUFBK0U7UUFDdEUsZ0JBQVcsR0FBVyxVQUFVLENBQUM7UUFFMUMsd0VBQXdFO1FBQy9ELGNBQVMsR0FBVyxRQUFRLENBQUM7UUFFdEMscUVBQXFFO1FBQzVELGNBQVMsR0FBVyxPQUFPLENBQUM7UUFFckMsdUNBQXVDO1FBQzlCLFlBQU8sR0FBWSxLQUFLLENBQUM7UUFFbEMsc0NBQXNDO1FBQzVCLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBRTlDLGdGQUFnRjtRQUN0RSxhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUc5QywrSEFBK0g7UUFDdkgseUJBQW9CLEdBQUcsS0FBSyxDQUFDO0tBNEV0QztJQTFFQzs7T0FFRztJQUNILFlBQVksQ0FBQyxJQUFTLEVBQUUsR0FBVztRQUNqQyxPQUFPLElBQUksRUFBRSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ3JCLENBQUM7SUFFRDs7T0FFRztJQUNILFdBQVcsQ0FBQyxJQUFTO1FBQ25CLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzVCLENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQ2hCLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsbUJBQW1CLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQztTQUNqRDtJQUNILENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsU0FBUyxDQUFDLElBQUksSUFBSSxDQUFDLE9BQU8sSUFBSSxJQUFJLENBQUMsZUFBZSxFQUFFO1lBQzlELFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsbUJBQW1CLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQztTQUNqRDtJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxjQUFjLENBQUMsVUFBVSxFQUFFLENBQUM7U0FDbEM7SUFDSCxDQUFDO0lBRU8sbUJBQW1CO1FBQ3pCLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRTtZQUMxQyxPQUFPO1NBQ1I7UUFFRCxnREFBZ0Q7UUFDaEQsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLHFCQUFxQixDQUF1QixDQUFDO1FBQy9HLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDYixPQUFPO1NBQ1I7UUFFRCxzQ0FBc0M7UUFDdEMsSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxjQUFjLENBQUMsVUFBVSxFQUFFLENBQUM7U0FDbEM7UUFFRCx1RkFBdUY7UUFDdkYsNEZBQTRGO1FBQzVGLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxJQUFJLENBQUM7UUFFakMsc0VBQXNFO1FBQ3RFLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxvQkFBb0IsQ0FDNUMsQ0FBQyxPQUFPLEVBQUUsRUFBRTtZQUNWLEtBQUssTUFBTSxLQUFLLElBQUksT0FBTyxFQUFFO2dCQUMzQixJQUFJLEtBQUssQ0FBQyxjQUFjLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtvQkFDeEMsSUFBSSxJQUFJLENBQUMsb0JBQW9CLEVBQUU7d0JBQzdCLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxLQUFLLENBQUM7d0JBQ2xDLE9BQU87cUJBQ1I7b0JBQ0QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztpQkFDdEI7YUFDRjtRQUNILENBQUMsRUFDRDtZQUNFLElBQUksRUFBRSxJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWE7WUFDeEMsVUFBVSxFQUFFLE1BQU07WUFDbEIsU0FBUyxFQUFFLEdBQUc7U0FDZixDQUNGLENBQUM7UUFFRixJQUFJLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUN4QyxDQUFDOztpSEF4R1Usb0JBQW9CO3FHQUFwQixvQkFBb0IsdWJDUmpDLHV1RUFzQ0E7MkZEOUJhLG9CQUFvQjtrQkFOaEMsU0FBUzsrQkFDRSxrQkFBa0IsUUFFdEIsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFLG1CQUNiLHVCQUF1QixDQUFDLE1BQU07OEJBR0UsZUFBZTtzQkFBL0QsU0FBUzt1QkFBQyxpQkFBaUIsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUU7Z0JBR3RDLEtBQUs7c0JBQWIsS0FBSztnQkFHRyxRQUFRO3NCQUFoQixLQUFLO2dCQUdHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBR0csU0FBUztzQkFBakIsS0FBSztnQkFHRyxTQUFTO3NCQUFqQixLQUFLO2dCQUdHLE9BQU87c0JBQWYsS0FBSztnQkFHSSxTQUFTO3NCQUFsQixNQUFNO2dCQUdHLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSwgVmlld0NoaWxkLCBFbGVtZW50UmVmLCBPbkNoYW5nZXMsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3FhLWVsZW1lbnQtbGlzdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9lbGVtZW50LWxpc3QuY29tcG9uZW50Lmh0bWwnLFxuICBob3N0OiB7IGNsYXNzOiAnY3FhLXVpLXJvb3QnIH0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBFbGVtZW50TGlzdENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSwgT25DaGFuZ2VzIHtcbiAgQFZpZXdDaGlsZCgnc2Nyb2xsQ29udGFpbmVyJywgeyBzdGF0aWM6IGZhbHNlIH0pIHNjcm9sbENvbnRhaW5lcj86IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+O1xuICBcbiAgLyoqIEFycmF5IG9mIGl0ZW1zIHRvIGRpc3BsYXkgKi9cbiAgQElucHV0KCkgaXRlbXM6IGFueVtdID0gW107XG4gIFxuICAvKiogS2V5IHRvIGFjY2VzcyB0aGUgdGl0bGUgcHJvcGVydHkgZnJvbSBlYWNoIGl0ZW0gKGRlZmF1bHQ6ICd0aXRsZScpICovXG4gIEBJbnB1dCgpIHRpdGxlS2V5OiBzdHJpbmcgPSAndGl0bGUnO1xuICBcbiAgLyoqIEtleSB0byBhY2Nlc3MgdGhlIHNlbGVjdG9yIHByb3BlcnR5IGZyb20gZWFjaCBpdGVtIChkZWZhdWx0OiAnc2VsZWN0b3InKSAqL1xuICBASW5wdXQoKSBzZWxlY3RvcktleTogc3RyaW5nID0gJ3NlbGVjdG9yJztcbiAgXG4gIC8qKiBLZXkgdG8gYWNjZXNzIHRoZSBsYWJlbHMgYXJyYXkgZnJvbSBlYWNoIGl0ZW0gKGRlZmF1bHQ6ICdsYWJlbHMnKSAqL1xuICBASW5wdXQoKSBsYWJlbHNLZXk6IHN0cmluZyA9ICdsYWJlbHMnO1xuICBcbiAgLyoqIE1heGltdW0gaGVpZ2h0IGZvciB0aGUgc2Nyb2xsYWJsZSBjb250YWluZXIgKGRlZmF1bHQ6ICcyMDBweCcpICovXG4gIEBJbnB1dCgpIG1heEhlaWdodDogc3RyaW5nID0gJzIwMHB4JztcblxuICAvKiogV2hldGhlciBtb3JlIGl0ZW1zIGNhbiBiZSBsb2FkZWQgKi9cbiAgQElucHV0KCkgaGFzTW9yZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKiBFbWl0dGVkIHdoZW4gYW4gaXRlbSBpcyBjbGlja2VkICovXG4gIEBPdXRwdXQoKSBpdGVtQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICAvKiogRW1pdHRlZCB3aGVuIHVzZXIgc2Nyb2xscyBuZWFyIHRoZSBib3R0b20gYW5kIG1vcmUgaXRlbXMgc2hvdWxkIGJlIGxvYWRlZCAqL1xuICBAT3V0cHV0KCkgbG9hZE1vcmUgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgcHJpdmF0ZSBzY3JvbGxPYnNlcnZlcj86IEludGVyc2VjdGlvbk9ic2VydmVyO1xuICAvKiogU2tpcCB0aGUgZmlyc3QgaW50ZXJzZWN0aW9uIGNhbGxiYWNrIChmaXJlcyBpbW1lZGlhdGVseSB3aGVuIG9ic2VydmUoKSBpcyBjYWxsZWQpIHRvIHByZXZlbnQgZHVwbGljYXRlIEFQSSBjYWxscyBvbiBsb2FkICovXG4gIHByaXZhdGUgc2tpcE5leHRJbnRlcnNlY3Rpb24gPSBmYWxzZTtcblxuICAvKipcbiAgICogR2V0IHRoZSB2YWx1ZSBmcm9tIGFuIGl0ZW0gdXNpbmcgdGhlIHNwZWNpZmllZCBrZXlcbiAgICovXG4gIGdldEl0ZW1WYWx1ZShpdGVtOiBhbnksIGtleTogc3RyaW5nKTogYW55IHtcbiAgICByZXR1cm4gaXRlbT8uW2tleV07XG4gIH1cblxuICAvKipcbiAgICogSGFuZGxlIGl0ZW0gY2xpY2tcbiAgICovXG4gIG9uSXRlbUNsaWNrKGl0ZW06IGFueSk6IHZvaWQge1xuICAgIHRoaXMuaXRlbUNsaWNrLmVtaXQoaXRlbSk7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuaGFzTW9yZSkge1xuICAgICAgc2V0VGltZW91dCgoKSA9PiB0aGlzLnNldHVwU2Nyb2xsT2JzZXJ2ZXIoKSwgMCk7XG4gICAgfVxuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzWydoYXNNb3JlJ10gJiYgdGhpcy5oYXNNb3JlICYmIHRoaXMuc2Nyb2xsQ29udGFpbmVyKSB7XG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHRoaXMuc2V0dXBTY3JvbGxPYnNlcnZlcigpLCAwKTtcbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5zY3JvbGxPYnNlcnZlcikge1xuICAgICAgdGhpcy5zY3JvbGxPYnNlcnZlci5kaXNjb25uZWN0KCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBzZXR1cFNjcm9sbE9ic2VydmVyKCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5oYXNNb3JlIHx8ICF0aGlzLnNjcm9sbENvbnRhaW5lcikge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIC8vIEZpbmQgdGhlIHNlbnRpbmVsIGVsZW1lbnQgKGxvYWRpbmcgaW5kaWNhdG9yKVxuICAgIGNvbnN0IHNlbnRpbmVsID0gdGhpcy5zY3JvbGxDb250YWluZXIubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKCcubG9hZC1tb3JlLXNlbnRpbmVsJykgYXMgSFRNTEVsZW1lbnQgfCBudWxsO1xuICAgIGlmICghc2VudGluZWwpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICAvLyBEaXNjb25uZWN0IGV4aXN0aW5nIG9ic2VydmVyIGlmIGFueVxuICAgIGlmICh0aGlzLnNjcm9sbE9ic2VydmVyKSB7XG4gICAgICB0aGlzLnNjcm9sbE9ic2VydmVyLmRpc2Nvbm5lY3QoKTtcbiAgICB9XG5cbiAgICAvLyBTa2lwIHRoZSBmaXJzdCBpbnRlcnNlY3Rpb24gY2FsbGJhY2sgLSBpdCBmaXJlcyBpbW1lZGlhdGVseSB3aGVuIG9ic2VydmUoKSBpcyBjYWxsZWRcbiAgICAvLyBpZiB0aGUgc2VudGluZWwgaXMgYWxyZWFkeSBpbiB2aWV3LCBjYXVzaW5nIGR1cGxpY2F0ZSBBUEkgY2FsbHMgKHBhZ2UgMCArIHBhZ2UgMSkgb24gbG9hZFxuICAgIHRoaXMuc2tpcE5leHRJbnRlcnNlY3Rpb24gPSB0cnVlO1xuXG4gICAgLy8gQ3JlYXRlIEludGVyc2VjdGlvbk9ic2VydmVyIHRvIGRldGVjdCB3aGVuIHNlbnRpbmVsIGNvbWVzIGludG8gdmlld1xuICAgIHRoaXMuc2Nyb2xsT2JzZXJ2ZXIgPSBuZXcgSW50ZXJzZWN0aW9uT2JzZXJ2ZXIoXG4gICAgICAoZW50cmllcykgPT4ge1xuICAgICAgICBmb3IgKGNvbnN0IGVudHJ5IG9mIGVudHJpZXMpIHtcbiAgICAgICAgICBpZiAoZW50cnkuaXNJbnRlcnNlY3RpbmcgJiYgdGhpcy5oYXNNb3JlKSB7XG4gICAgICAgICAgICBpZiAodGhpcy5za2lwTmV4dEludGVyc2VjdGlvbikge1xuICAgICAgICAgICAgICB0aGlzLnNraXBOZXh0SW50ZXJzZWN0aW9uID0gZmFsc2U7XG4gICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIHRoaXMubG9hZE1vcmUuZW1pdCgpO1xuICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgcm9vdDogdGhpcy5zY3JvbGxDb250YWluZXIubmF0aXZlRWxlbWVudCxcbiAgICAgICAgcm9vdE1hcmdpbjogJzUwcHgnLFxuICAgICAgICB0aHJlc2hvbGQ6IDAuMVxuICAgICAgfVxuICAgICk7XG5cbiAgICB0aGlzLnNjcm9sbE9ic2VydmVyLm9ic2VydmUoc2VudGluZWwpO1xuICB9XG59XG5cbiIsIjxkaXYgXG4gICNzY3JvbGxDb250YWluZXJcbiAgY2xhc3M9XCJjcWEtbWF4LWgtWzIwMHB4XSBjcWEtb3ZlcmZsb3cteS1hdXRvIGNxYS1zY3JvbGxiYXItdGhpbiBjcWEtc2Nyb2xsYmFyLXRyYWNrLXRyYW5zcGFyZW50IGNxYS1zY3JvbGxiYXItdGh1bWItWyNFNUU3RUJdIGNxYS1zY3JvbGxiYXItdGh1bWItcm91bmRlZC1mdWxsIGNxYS1zY3JvbGxiYXItdGh1bWItaG92ZXI6Y3FhLWJnLVsjRDFENURCXSBjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWdhcC0yXCJcbiAgW3N0eWxlLm1heC1oZWlnaHRdPVwibWF4SGVpZ2h0XCI+XG4gIDxkaXYgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXNcIiAoY2xpY2spPVwib25JdGVtQ2xpY2soaXRlbSlcIj5cbiAgICA8ZGl2IGNsYXNzPVwiaG92ZXI6Y3FhLWJnLVsjRjVGNUY1XSBjcWEtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1qdXN0aWZ5LWJldHdlZW4gY3FhLWJvcmRlciBjcWEtYm9yZGVyLVsjRkRFNjhBXVxuICAgICAgICAgICAgIGNxYS1yb3VuZGVkLWxnIGNxYS1wLTMgY3FhLWN1cnNvci1wb2ludGVyIGNxYS1nYXAtMVwiIHN0eWxlPVwid29yZC1icmVhazogYnJlYWstd29yZDtcIj5cbiAgICAgIDxkaXY+XG4gICAgICAgIDxoNiBjbGFzcz1cImNxYS10ZXh0LVsxMnB4XSBjcWEtbGVhZGluZy1bMTAwJV0gY3FhLWZvbnQtWzQwMF0gY3FhLXRleHQtWyMxNzE3MTddXCI+XG4gICAgICAgICAge3sgZ2V0SXRlbVZhbHVlKGl0ZW0sIHRpdGxlS2V5KSB9fVxuICAgICAgICA8L2g2PlxuICAgICAgICA8c3BhbiBjbGFzcz1cImNxYS10ZXh0LVsxMHB4XSBjcWEtbGVhZGluZy1bMTAwJV0gY3FhLXRleHQtWyM2QjcyODBdXCI+XG4gICAgICAgICAge3sgZ2V0SXRlbVZhbHVlKGl0ZW0sIHNlbGVjdG9yS2V5KSB9fVxuICAgICAgICA8L3NwYW4+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJjcWEtZmxleCBjcWEtZ2FwLTFcIj5cbiAgICAgICAgPHNwYW4gXG4gICAgICAgICAgKm5nRm9yPVwibGV0IHRhZyBvZiBnZXRJdGVtVmFsdWUoaXRlbSwgbGFiZWxzS2V5KVwiIFxuICAgICAgICAgIGNsYXNzPVwiY3FhLXRleHQtWzExcHhdIGNxYS10ZXh0LVsjNGI3NGVjXSBjcWEtcm91bmRlZC1mdWxsIGNxYS1weC0yIGNxYS1iZy1bI2VmZjZmZl0gY3FhLWJvcmRlciBjcWEtYm9yZGVyLXNvbGlkIGNxYS1ib3JkZXItWyNjOGUwZmZdXCI+XG4gICAgICAgICAge3sgdGFnIH19XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPCEtLSBObyBlbGVtZW50cyBmb3VuZCBtZXNzYWdlIC0tPlxuICA8ZGl2ICpuZ0lmPVwiaXRlbXMubGVuZ3RoID09PSAwICYmICFoYXNNb3JlXCIgY2xhc3M9XCJjcWEtZmxleCBjcWEtanVzdGlmeS1jZW50ZXIgY3FhLWl0ZW1zLWNlbnRlciBjcWEtcHktNCBjcWEtdGV4dC1bMTJweF0gY3FhLXRleHQtWyM2QjcyODBdXCI+XG4gICAgTm8gZWxlbWVudHMgZm91bmRcbiAgPC9kaXY+XG4gIDwhLS0gU2VudGluZWwgZWxlbWVudCBmb3IgaW5maW5pdGUgc2Nyb2xsIC0tPlxuICA8ZGl2ICpuZ0lmPVwiaGFzTW9yZVwiIGNsYXNzPVwibG9hZC1tb3JlLXNlbnRpbmVsIGNxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtaXRlbXMtY2VudGVyIGNxYS1qdXN0aWZ5LWNlbnRlciBjcWEtZ2FwLTMgY3FhLXB5LTJcIj5cbiAgICA8c3ZnIGNsYXNzPVwiY3FhLWFuaW1hdGUtc3BpbiBjcWEtaC02IGNxYS13LTYgY3FhLXRleHQtWyMzRjQzRUVdXCIgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIGZpbGw9XCJub25lXCIgdmlld0JveD1cIjAgMCAyNCAyNFwiPlxuICAgICAgPGNpcmNsZSBjbGFzcz1cImNxYS1vcGFjaXR5LTI1XCIgY3g9XCIxMlwiIGN5PVwiMTJcIiByPVwiMTBcIiBzdHJva2U9XCJjdXJyZW50Q29sb3JcIiBzdHJva2Utd2lkdGg9XCI0XCI+PC9jaXJjbGU+XG4gICAgICA8cGF0aCBjbGFzcz1cImNxYS1vcGFjaXR5LTc1XCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIGQ9XCJNNCAxMmE4IDggMCAwMTgtOFYwQzUuMzczIDAgMCA1LjM3MyAwIDEyaDR6bTIgNS4yOTFBNy45NjIgNy45NjIgMCAwMTQgMTJIMGMwIDMuMDQyIDEuMTM1IDUuODI0IDMgNy45MzhsMy0yLjY0N3pcIj48L3BhdGg+XG4gICAgPC9zdmc+XG4gICAgPHNwYW4gY2xhc3M9XCJjcWEtdGV4dC1bMTJweF0gY3FhLXRleHQtWyM2QjcyODBdXCI+e3sgaXRlbXMubGVuZ3RoID09PSAwID8gJ0xvYWRpbmcuLi4nIDogJ0xvYWRpbmcgbW9yZS4uLicgfX08L3NwYW4+XG4gIDwvZGl2PlxuPC9kaXY+XG5cbiJdfQ==

package/esm2020/lib/test-case-details/element-popup/element-popup-data.mjs

@@ -2,4 +2,4 @@ import { InjectionToken } from '@angular/core';
 /** Sentinel returned from afterClosed() when user clicked "Edit in depth". */
 export const ELEMENT_POPUP_EDIT_IN_DEPTH = Symbol('ElementPopupEditInDepth');
 export const ELEMENT_POPUP_DATA = new InjectionToken('ELEMENT_POPUP_DATA');
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbWVudC1wb3B1cC1kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi90ZXN0LWNhc2UtZGV0YWlscy9lbGVtZW50LXBvcHVwL2VsZW1lbnQtcG9wdXAtZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBZ0IvQyw4RUFBOEU7QUFDOUUsTUFBTSxDQUFDLE1BQU0sMkJBQTJCLEdBQUcsTUFBTSxDQUFDLHlCQUF5QixDQUFDLENBQUM7QUFFN0UsTUFBTSxDQUFDLE1BQU0sa0JBQWtCLEdBQUcsSUFBSSxjQUFjLENBQ2xELG9CQUFvQixDQUNyQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiXG5pbXBvcnQgeyBJbmplY3Rpb25Ub2tlbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEVsZW1lbnRQb3B1cERhdGEge1xuICBlbGVtZW50PzogRWxlbWVudFBvcHVwRGF0YUVsZW1lbnRzO1xuICBsYWJlbHM6IHN0cmluZ1tdO1xuICBlbGVtZW50czogRWxlbWVudFBvcHVwRGF0YUVsZW1lbnRzW107XG4gIGRlc2NyaXB0aW9uOiBzdHJpbmc7XG4gIGhlbHBVcmw/OiBzdHJpbmc7XG59XG5cblxuZXhwb3J0IGludGVyZmFjZSBFbGVtZW50UG9wdXBEYXRhRWxlbWVudHMge1xuICBsYWJlbHM6IHN0cmluZ1tdO1xuICB0aXRsZTogc3RyaW5nO1xuICBzZWxlY3Rvcj86IHN0cmluZztcbn1cbi8qKiBTZW50aW5lbCByZXR1cm5lZCBmcm9tIGFmdGVyQ2xvc2VkKCkgd2hlbiB1c2VyIGNsaWNrZWQgXCJFZGl0IGluIGRlcHRoXCIuICovXG5leHBvcnQgY29uc3QgRUxFTUVOVF9QT1BVUF9FRElUX0lOX0RFUFRIID0gU3ltYm9sKCdFbGVtZW50UG9wdXBFZGl0SW5EZXB0aCcpO1xuXG5leHBvcnQgY29uc3QgRUxFTUVOVF9QT1BVUF9EQVRBID0gbmV3IEluamVjdGlvblRva2VuPEVsZW1lbnRQb3B1cERhdGE+KFxuICAnRUxFTUVOVF9QT1BVUF9EQVRBJ1xuKTtcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbWVudC1wb3B1cC1kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi90ZXN0LWNhc2UtZGV0YWlscy9lbGVtZW50LXBvcHVwL2VsZW1lbnQtcG9wdXAtZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBbUIvQyw4RUFBOEU7QUFDOUUsTUFBTSxDQUFDLE1BQU0sMkJBQTJCLEdBQUcsTUFBTSxDQUFDLHlCQUF5QixDQUFDLENBQUM7QUFFN0UsTUFBTSxDQUFDLE1BQU0sa0JBQWtCLEdBQUcsSUFBSSxjQUFjLENBQ2xELG9CQUFvQixDQUNyQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiXG5pbXBvcnQgeyBJbmplY3Rpb25Ub2tlbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEVsZW1lbnRQb3B1cERhdGEge1xuICBlbGVtZW50PzogRWxlbWVudFBvcHVwRGF0YUVsZW1lbnRzO1xuICBsYWJlbHM6IHN0cmluZ1tdO1xuICBlbGVtZW50czogRWxlbWVudFBvcHVwRGF0YUVsZW1lbnRzW107XG4gIGRlc2NyaXB0aW9uOiBzdHJpbmc7XG4gIGhlbHBVcmw/OiBzdHJpbmc7XG59XG5cblxuZXhwb3J0IGludGVyZmFjZSBFbGVtZW50UG9wdXBEYXRhRWxlbWVudHMge1xuICBsYWJlbHM6IHN0cmluZ1tdO1xuICB0aXRsZTogc3RyaW5nO1xuICBzZWxlY3Rvcj86IHN0cmluZztcbiAgaWQ/OiBudW1iZXI7XG4gIHNjcmVlbk5hbWU/OiBzdHJpbmc7XG4gIHNjcmVlbk5hbWVJZD86IG51bWJlcjtcbn1cbi8qKiBTZW50aW5lbCByZXR1cm5lZCBmcm9tIGFmdGVyQ2xvc2VkKCkgd2hlbiB1c2VyIGNsaWNrZWQgXCJFZGl0IGluIGRlcHRoXCIuICovXG5leHBvcnQgY29uc3QgRUxFTUVOVF9QT1BVUF9FRElUX0lOX0RFUFRIID0gU3ltYm9sKCdFbGVtZW50UG9wdXBFZGl0SW5EZXB0aCcpO1xuXG5leHBvcnQgY29uc3QgRUxFTUVOVF9QT1BVUF9EQVRBID0gbmV3IEluamVjdGlvblRva2VuPEVsZW1lbnRQb3B1cERhdGE+KFxuICAnRUxFTUVOVF9QT1BVUF9EQVRBJ1xuKTtcbiJdfQ==

package/esm2020/lib/test-case-details/element-popup/element-popup-form-data.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbWVudC1wb3B1cC1mb3JtLWRhdGEuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL3Rlc3QtY2FzZS1kZXRhaWxzL2VsZW1lbnQtcG9wdXAvZWxlbWVudC1wb3B1cC1mb3JtLWRhdGEudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBQYXlsb2FkIGVtaXR0ZWQgd2hlbiB1c2VyIGNyZWF0ZXMgYSBuZXcgZWxlbWVudCAqL1xuZXhwb3J0IGludGVyZmFjZSBFbGVtZW50Q3JlYXRlUGF5bG9hZCB7XG4gIG5hbWU6IHN0cmluZztcbiAgc2NyZWVuTmFtZUlkPzogbnVtYmVyO1xuICBzY3JlZW5OYW1lTmFtZTogc3RyaW5nO1xuICBsb2NhdG9yVmFsdWU6IHN0cmluZztcbiAgbGFiZWxzOiBzdHJpbmdbXTtcbn1cblxuLyoqIFBheWxvYWQgZW1pdHRlZCB3aGVuIHVzZXIgdXBkYXRlcyBhbiBleGlzdGluZyBlbGVtZW50ICovXG5leHBvcnQgaW50ZXJmYWNlIEVsZW1lbnRVcGRhdGVQYXlsb2FkIHtcbiAgZWxlbWVudElkOiBudW1iZXI7XG4gIG5hbWU6IHN0cmluZztcbiAgc2NyZWVuTmFtZUlkPzogbnVtYmVyO1xuICBzY3JlZW5OYW1lTmFtZTogc3RyaW5nO1xuICBsb2NhdG9yVmFsdWU6IHN0cmluZztcbiAgbGFiZWxzOiBzdHJpbmdbXTtcbn1cblxuLyoqIFNjcmVlbiBuYW1lIG9wdGlvbiBmb3IgYXV0b2NvbXBsZXRlICovXG5leHBvcnQgaW50ZXJmYWNlIFNjcmVlbk5hbWVPcHRpb24ge1xuICBpZD86IG51bWJlcjtcbiAgbmFtZTogc3RyaW5nO1xufVxuIl19