@cqa-lib/cqa-ui 1.1.347 → 1.1.348

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

@@ -19132,10 +19132,10 @@ class SessionChangesModalComponent {
     }
 }
 SessionChangesModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SessionChangesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SessionChangesModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SessionChangesModalComponent, selector: "cqa-session-changes-modal", inputs: { isOpen: "isOpen", title: "title", addedSteps: "addedSteps", editedSteps: "editedSteps", deletedSteps: "deletedSteps", saveButtonLabel: "saveButtonLabel", saveButtonDisabled: "saveButtonDisabled", commitMessageTemplate: "commitMessageTemplate" }, outputs: { closeModal: "closeModal", saveToTestCase: "saveToTestCase", removeStep: "removeStep" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n  *ngIf=\"isOpen\"\n  class=\"session-changes-modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"'session-changes-title'\"\n  [attr.aria-describedby]=\"'session-changes-content'\">\n  <div\n    class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh] cqa-font-inter\"\n    style=\"box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.08);\"\n    (click)=\"$event.stopPropagation()\">\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-[#E5E7EB]\">\n      <h2\n        id=\"session-changes-title\"\n        class=\"cqa-text-[18px] cqa-font-semibold cqa-leading-[28px] cqa-text-[#333333] cqa-m-0\">\n        {{ title }}\n      </h2>\n      <cqa-button\n        type=\"button\"\n        variant=\"text\"\n        btnSize=\"md\"\n        icon=\"close\"\n        iconColor=\"#4A5565\"\n        [tooltip]=\"'Close modal'\"\n        tooltipPosition=\"below\"\n        customClass=\"!cqa-min-w-0 cqa-p-1\"\n        (clicked)=\"onClose()\">\n      </cqa-button>\n    </div>\n\n    <!-- Content -->\n    <div id=\"session-changes-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-6\" style=\"scrollbar-width: thin;\">\n      <!-- Added Steps -->\n      <section\n        *ngIf=\"addedSteps?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n        aria-labelledby=\"added-steps-heading\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M7 2V12M2 7H12\" stroke=\"#22C55E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n          <h3 id=\"added-steps-heading\" class=\"cqa-text-[14px]  cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n            Added Steps\n          </h3>\n          <span\n            class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n            style=\"background-color: #E5E7EB; color: #6B7280;\">\n            {{ addedSteps.length }}\n          </span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let step of addedSteps; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n            <div class=\"cqa-flex-1 cqa-min-w-0\">\n              <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n                {{ step.description }}\n              </p>\n              <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n                {{ step.timestamp }}\n              </p>\n            </div>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step: ' + step.description\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step, $event)\">\n            </cqa-button>\n          </div>\n        </div>\n      </section>\n\n      <!-- Edited Steps -->\n      <section\n        *ngIf=\"editedSteps?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n        aria-labelledby=\"edited-steps-heading\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8.5 2L12 5.5L5 12.5L1 13L2 9L8.5 2Z\" stroke=\"#F59E0B\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n          <h3 id=\"edited-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" cqa-text-color=\"#0A0A0A\">\n            Edited Steps\n          </h3>\n          <span\n            class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n            style=\"background-color: #E5E7EB; color: #6B7280;\">\n            {{ editedSteps.length }}\n          </span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let step of editedSteps; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n            <div class=\"cqa-flex-1 cqa-min-w-0\">\n              <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n                {{ step.description }}\n              </p>\n              <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n                {{ step.timestamp }}\n              </p>\n            </div>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step: ' + step.description\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step, $event)\">\n            </cqa-button>\n          </div>\n        </div>\n      </section>\n\n      <!-- Deleted Steps -->\n      <section\n        *ngIf=\"deletedSteps?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n        aria-labelledby=\"deleted-steps-heading\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7H12\" stroke=\"#EF4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n          <h3 id=\"deleted-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n            Deleted Steps\n          </h3>\n          <span\n            class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n            style=\"background-color: #E5E7EB; color: #6B7280;\">\n            {{ deletedSteps.length }}\n          </span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let step of deletedSteps; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n            <div class=\"cqa-flex-1 cqa-min-w-0\">\n              <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n                {{ step.description }}\n              </p>\n              <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n                {{ step.timestamp }}\n              </p>\n            </div>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step: ' + step.description\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step, $event)\">\n            </cqa-button>\n          </div>\n        </div>\n      </section>\n\n      <!-- Empty state -->\n      <p *ngIf=\"!addedSteps?.length && !editedSteps?.length && !deletedSteps?.length\" class=\"cqa-text-[14px] cqa-text-[#6B7280] cqa-m-0\">\n        No session changes to display.\n      </p>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-px-6 cqa-pb-6 cqa-pt-2 cqa-border-t cqa-border-[#E5E7EB]\">\n      <cqa-button\n        [text]=\"saveButtonLabel\"\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [fullWidth]=\"true\"\n        [disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n        [attr.aria-disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n        (clicked)=\"onSave()\"\n        [inlineStyles]=\"'background-color: #4F46E5; border-color: #4F46E5; color: #FFFFFF;'\">\n      </cqa-button>\n      <p *ngIf=\"totalChangesCount > 0\" class=\"cqa-text-[10px] cqa-leading-[16px] cqa-text-[#414146] cqa-mt-2 cqa-mb-0 cqa-text-center\">\n        {{ commitMessage }}\n      </p>\n    </div>\n  </div>\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SessionChangesModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SessionChangesModalComponent, selector: "cqa-session-changes-modal", inputs: { isOpen: "isOpen", title: "title", addedSteps: "addedSteps", editedSteps: "editedSteps", deletedSteps: "deletedSteps", saveButtonLabel: "saveButtonLabel", saveButtonDisabled: "saveButtonDisabled", commitMessageTemplate: "commitMessageTemplate" }, outputs: { closeModal: "closeModal", saveToTestCase: "saveToTestCase", removeStep: "removeStep" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n  *ngIf=\"isOpen\"\n  class=\"session-changes-modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"'session-changes-title'\"\n  [attr.aria-describedby]=\"'session-changes-content'\">\n  <div\n    class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh] cqa-font-inter\"\n    style=\"box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.08);\"\n    (click)=\"$event.stopPropagation()\">\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-[#E5E7EB]\">\n      <h2\n        id=\"session-changes-title\"\n        class=\"cqa-text-[18px] cqa-font-semibold cqa-leading-[28px] cqa-text-[#333333] cqa-m-0\">\n        {{ title }}\n      </h2>\n      <cqa-button\n        type=\"button\"\n        variant=\"text\"\n        btnSize=\"md\"\n        icon=\"close\"\n        iconColor=\"#4A5565\"\n        [tooltip]=\"'Close modal'\"\n        tooltipPosition=\"below\"\n        customClass=\"!cqa-min-w-0 cqa-p-1\"\n        (clicked)=\"onClose()\">\n      </cqa-button>\n    </div>\n\n    <!-- Content -->\n    <div id=\"session-changes-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-6\" style=\"scrollbar-width: thin;\">\n      <!-- Added Steps -->\n      <section\n        *ngIf=\"addedSteps?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n        aria-labelledby=\"added-steps-heading\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M7 2V12M2 7H12\" stroke=\"#22C55E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n          <h3 id=\"added-steps-heading\" class=\"cqa-text-[14px]  cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n            Added Steps\n          </h3>\n          <span\n            class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n            style=\"background-color: #E5E7EB; color: #6B7280;\">\n            {{ addedSteps.length }}\n          </span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let step of addedSteps; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n            <div class=\"cqa-flex-1 cqa-min-w-0\">\n              <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n                {{ step.stepDescription }}\n              </p>\n              <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n                {{ step.timestamp }}\n              </p>\n            </div>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step: ' + step.stepDescription\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step, $event)\">\n            </cqa-button>\n          </div>\n        </div>\n      </section>\n\n      <!-- Edited Steps -->\n      <section\n        *ngIf=\"editedSteps?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n        aria-labelledby=\"edited-steps-heading\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8.5 2L12 5.5L5 12.5L1 13L2 9L8.5 2Z\" stroke=\"#F59E0B\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n          <h3 id=\"edited-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" cqa-text-color=\"#0A0A0A\">\n            Edited Steps\n          </h3>\n          <span\n            class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n            style=\"background-color: #E5E7EB; color: #6B7280;\">\n            {{ editedSteps.length }}\n          </span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let step of editedSteps; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n            <div class=\"cqa-flex-1 cqa-min-w-0\">\n              <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n                {{ step.stepDescription }}\n              </p>\n              <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n                {{ step.timestamp }}\n              </p>\n            </div>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step: ' + step.stepDescription\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step, $event)\">\n            </cqa-button>\n          </div>\n        </div>\n      </section>\n\n      <!-- Deleted Steps -->\n      <section\n        *ngIf=\"deletedSteps?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n        aria-labelledby=\"deleted-steps-heading\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7H12\" stroke=\"#EF4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n          <h3 id=\"deleted-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n            Deleted Steps\n          </h3>\n          <span\n            class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n            style=\"background-color: #E5E7EB; color: #6B7280;\">\n            {{ deletedSteps.length }}\n          </span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let step of deletedSteps; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n            <div class=\"cqa-flex-1 cqa-min-w-0\">\n              <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n                {{ step.stepDescription }}\n              </p>\n              <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n                {{ step.timestamp }}\n              </p>\n            </div>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step: ' + step.stepDescription\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step, $event)\">\n            </cqa-button>\n          </div>\n        </div>\n      </section>\n\n      <!-- Empty state -->\n      <p *ngIf=\"!addedSteps?.length && !editedSteps?.length && !deletedSteps?.length\" class=\"cqa-text-[14px] cqa-text-[#6B7280] cqa-m-0\">\n        No session changes to display.\n      </p>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-px-6 cqa-pb-6 cqa-pt-2 cqa-border-t cqa-border-[#E5E7EB]\">\n      <div\n        *ngIf=\"totalChangesCount > 0\"\n        class=\"cqa-w-full cqa-rounded-[12px] cqa-bg-[#FCD9D9] cqa-px-3 cqa-py-[17px] cqa-mb-4\" style=\"border: 1px solid #F47F7F\">\n        <div class=\"cqa-flex cqa-gap-1\">\n          <span class=\"cqa-shrink-0 cqa-flex cqa-items-start cqa-mt-0.5\" aria-hidden=\"true\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n              <g clip-path=\"url(#clip0_4369_21268)\">\n              <path d=\"M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z\" stroke=\"#EE3F3F\" stroke-width=\"1.5\"/>\n              <path d=\"M8 4.66699V8.00032\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n              <path d=\"M8 10.667H8.00667\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n              </g>\n              <defs>\n              <clipPath id=\"clip0_4369_21268\">\n              <rect width=\"16\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n              </defs>\n              </svg>\n          </span>\n          <div class=\"cqa-min-w-0\">\n            <p class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#9F2A2A] cqa-m-0\">\n              This action cannot be undone\n            </p>\n            <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#9F2A2A] cqa-mt-1 cqa-m-0\">\n              The original test case will be permanently overwritten with your changes.\n            </p>\n          </div>\n        </div>\n      </div>\n      <cqa-button\n        [text]=\"saveButtonLabel\"\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [fullWidth]=\"true\"\n        [disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n        [attr.aria-disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n        (clicked)=\"onSave()\"\n        [inlineStyles]=\"'background-color: #4F46E5; border-color: #4F46E5; color: #FFFFFF;'\">\n      </cqa-button>\n      <p *ngIf=\"totalChangesCount > 0\" class=\"cqa-text-[10px] cqa-leading-[16px] cqa-text-[#414146] cqa-mt-2 cqa-mb-0 cqa-text-center\">\n        {{ commitMessage }}\n      </p>\n    </div>\n  </div>\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SessionChangesModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-session-changes-modal', host: { class: 'cqa-ui-root' }, template: "<div\n  *ngIf=\"isOpen\"\n  class=\"session-changes-modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"'session-changes-title'\"\n  [attr.aria-describedby]=\"'session-changes-content'\">\n  <div\n    class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh] cqa-font-inter\"\n    style=\"box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.08);\"\n    (click)=\"$event.stopPropagation()\">\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-[#E5E7EB]\">\n      <h2\n        id=\"session-changes-title\"\n        class=\"cqa-text-[18px] cqa-font-semibold cqa-leading-[28px] cqa-text-[#333333] cqa-m-0\">\n        {{ title }}\n      </h2>\n      <cqa-button\n        type=\"button\"\n        variant=\"text\"\n        btnSize=\"md\"\n        icon=\"close\"\n        iconColor=\"#4A5565\"\n        [tooltip]=\"'Close modal'\"\n        tooltipPosition=\"below\"\n        customClass=\"!cqa-min-w-0 cqa-p-1\"\n        (clicked)=\"onClose()\">\n      </cqa-button>\n    </div>\n\n    <!-- Content -->\n    <div id=\"session-changes-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-6\" style=\"scrollbar-width: thin;\">\n      <!-- Added Steps -->\n      <section\n        *ngIf=\"addedSteps?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n        aria-labelledby=\"added-steps-heading\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M7 2V12M2 7H12\" stroke=\"#22C55E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n          <h3 id=\"added-steps-heading\" class=\"cqa-text-[14px]  cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n            Added Steps\n          </h3>\n          <span\n            class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n            style=\"background-color: #E5E7EB; color: #6B7280;\">\n            {{ addedSteps.length }}\n          </span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let step of addedSteps; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n            <div class=\"cqa-flex-1 cqa-min-w-0\">\n              <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n                {{ step.description }}\n              </p>\n              <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n                {{ step.timestamp }}\n              </p>\n            </div>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step: ' + step.description\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step, $event)\">\n            </cqa-button>\n          </div>\n        </div>\n      </section>\n\n      <!-- Edited Steps -->\n      <section\n        *ngIf=\"editedSteps?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n        aria-labelledby=\"edited-steps-heading\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8.5 2L12 5.5L5 12.5L1 13L2 9L8.5 2Z\" stroke=\"#F59E0B\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n          <h3 id=\"edited-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" cqa-text-color=\"#0A0A0A\">\n            Edited Steps\n          </h3>\n          <span\n            class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n            style=\"background-color: #E5E7EB; color: #6B7280;\">\n            {{ editedSteps.length }}\n          </span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let step of editedSteps; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n            <div class=\"cqa-flex-1 cqa-min-w-0\">\n              <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n                {{ step.description }}\n              </p>\n              <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n                {{ step.timestamp }}\n              </p>\n            </div>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step: ' + step.description\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step, $event)\">\n            </cqa-button>\n          </div>\n        </div>\n      </section>\n\n      <!-- Deleted Steps -->\n      <section\n        *ngIf=\"deletedSteps?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n        aria-labelledby=\"deleted-steps-heading\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7H12\" stroke=\"#EF4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n          <h3 id=\"deleted-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n            Deleted Steps\n          </h3>\n          <span\n            class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n            style=\"background-color: #E5E7EB; color: #6B7280;\">\n            {{ deletedSteps.length }}\n          </span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let step of deletedSteps; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n            <div class=\"cqa-flex-1 cqa-min-w-0\">\n              <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n                {{ step.description }}\n              </p>\n              <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n                {{ step.timestamp }}\n              </p>\n            </div>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step: ' + step.description\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step, $event)\">\n            </cqa-button>\n          </div>\n        </div>\n      </section>\n\n      <!-- Empty state -->\n      <p *ngIf=\"!addedSteps?.length && !editedSteps?.length && !deletedSteps?.length\" class=\"cqa-text-[14px] cqa-text-[#6B7280] cqa-m-0\">\n        No session changes to display.\n      </p>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-px-6 cqa-pb-6 cqa-pt-2 cqa-border-t cqa-border-[#E5E7EB]\">\n      <cqa-button\n        [text]=\"saveButtonLabel\"\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [fullWidth]=\"true\"\n        [disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n        [attr.aria-disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n        (clicked)=\"onSave()\"\n        [inlineStyles]=\"'background-color: #4F46E5; border-color: #4F46E5; color: #FFFFFF;'\">\n      </cqa-button>\n      <p *ngIf=\"totalChangesCount > 0\" class=\"cqa-text-[10px] cqa-leading-[16px] cqa-text-[#414146] cqa-mt-2 cqa-mb-0 cqa-text-center\">\n        {{ commitMessage }}\n      </p>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-session-changes-modal', host: { class: 'cqa-ui-root' }, template: "<div\n  *ngIf=\"isOpen\"\n  class=\"session-changes-modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"'session-changes-title'\"\n  [attr.aria-describedby]=\"'session-changes-content'\">\n  <div\n    class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh] cqa-font-inter\"\n    style=\"box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.08);\"\n    (click)=\"$event.stopPropagation()\">\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-[#E5E7EB]\">\n      <h2\n        id=\"session-changes-title\"\n        class=\"cqa-text-[18px] cqa-font-semibold cqa-leading-[28px] cqa-text-[#333333] cqa-m-0\">\n        {{ title }}\n      </h2>\n      <cqa-button\n        type=\"button\"\n        variant=\"text\"\n        btnSize=\"md\"\n        icon=\"close\"\n        iconColor=\"#4A5565\"\n        [tooltip]=\"'Close modal'\"\n        tooltipPosition=\"below\"\n        customClass=\"!cqa-min-w-0 cqa-p-1\"\n        (clicked)=\"onClose()\">\n      </cqa-button>\n    </div>\n\n    <!-- Content -->\n    <div id=\"session-changes-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-6\" style=\"scrollbar-width: thin;\">\n      <!-- Added Steps -->\n      <section\n        *ngIf=\"addedSteps?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n        aria-labelledby=\"added-steps-heading\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M7 2V12M2 7H12\" stroke=\"#22C55E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n          <h3 id=\"added-steps-heading\" class=\"cqa-text-[14px]  cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n            Added Steps\n          </h3>\n          <span\n            class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n            style=\"background-color: #E5E7EB; color: #6B7280;\">\n            {{ addedSteps.length }}\n          </span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let step of addedSteps; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n            <div class=\"cqa-flex-1 cqa-min-w-0\">\n              <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n                {{ step.stepDescription }}\n              </p>\n              <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n                {{ step.timestamp }}\n              </p>\n            </div>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step: ' + step.stepDescription\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step, $event)\">\n            </cqa-button>\n          </div>\n        </div>\n      </section>\n\n      <!-- Edited Steps -->\n      <section\n        *ngIf=\"editedSteps?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n        aria-labelledby=\"edited-steps-heading\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8.5 2L12 5.5L5 12.5L1 13L2 9L8.5 2Z\" stroke=\"#F59E0B\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n          <h3 id=\"edited-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" cqa-text-color=\"#0A0A0A\">\n            Edited Steps\n          </h3>\n          <span\n            class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n            style=\"background-color: #E5E7EB; color: #6B7280;\">\n            {{ editedSteps.length }}\n          </span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let step of editedSteps; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n            <div class=\"cqa-flex-1 cqa-min-w-0\">\n              <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n                {{ step.stepDescription }}\n              </p>\n              <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n                {{ step.timestamp }}\n              </p>\n            </div>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step: ' + step.stepDescription\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step, $event)\">\n            </cqa-button>\n          </div>\n        </div>\n      </section>\n\n      <!-- Deleted Steps -->\n      <section\n        *ngIf=\"deletedSteps?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n        aria-labelledby=\"deleted-steps-heading\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7H12\" stroke=\"#EF4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </span>\n          <h3 id=\"deleted-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n            Deleted Steps\n          </h3>\n          <span\n            class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n            style=\"background-color: #E5E7EB; color: #6B7280;\">\n            {{ deletedSteps.length }}\n          </span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let step of deletedSteps; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n            <div class=\"cqa-flex-1 cqa-min-w-0\">\n              <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n                {{ step.stepDescription }}\n              </p>\n              <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n                {{ step.timestamp }}\n              </p>\n            </div>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step: ' + step.stepDescription\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step, $event)\">\n            </cqa-button>\n          </div>\n        </div>\n      </section>\n\n      <!-- Empty state -->\n      <p *ngIf=\"!addedSteps?.length && !editedSteps?.length && !deletedSteps?.length\" class=\"cqa-text-[14px] cqa-text-[#6B7280] cqa-m-0\">\n        No session changes to display.\n      </p>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-px-6 cqa-pb-6 cqa-pt-2 cqa-border-t cqa-border-[#E5E7EB]\">\n      <div\n        *ngIf=\"totalChangesCount > 0\"\n        class=\"cqa-w-full cqa-rounded-[12px] cqa-bg-[#FCD9D9] cqa-px-3 cqa-py-[17px] cqa-mb-4\" style=\"border: 1px solid #F47F7F\">\n        <div class=\"cqa-flex cqa-gap-1\">\n          <span class=\"cqa-shrink-0 cqa-flex cqa-items-start cqa-mt-0.5\" aria-hidden=\"true\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n              <g clip-path=\"url(#clip0_4369_21268)\">\n              <path d=\"M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z\" stroke=\"#EE3F3F\" stroke-width=\"1.5\"/>\n              <path d=\"M8 4.66699V8.00032\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n              <path d=\"M8 10.667H8.00667\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n              </g>\n              <defs>\n              <clipPath id=\"clip0_4369_21268\">\n              <rect width=\"16\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n              </defs>\n              </svg>\n          </span>\n          <div class=\"cqa-min-w-0\">\n            <p class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#9F2A2A] cqa-m-0\">\n              This action cannot be undone\n            </p>\n            <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#9F2A2A] cqa-mt-1 cqa-m-0\">\n              The original test case will be permanently overwritten with your changes.\n            </p>\n          </div>\n        </div>\n      </div>\n      <cqa-button\n        [text]=\"saveButtonLabel\"\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [fullWidth]=\"true\"\n        [disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n        [attr.aria-disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n        (clicked)=\"onSave()\"\n        [inlineStyles]=\"'background-color: #4F46E5; border-color: #4F46E5; color: #FFFFFF;'\">\n      </cqa-button>\n      <p *ngIf=\"totalChangesCount > 0\" class=\"cqa-text-[10px] cqa-leading-[16px] cqa-text-[#414146] cqa-mt-2 cqa-mb-0 cqa-text-center\">\n        {{ commitMessage }}\n      </p>\n    </div>\n  </div>\n</div>\n", styles: [] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], title: [{
@@ -32273,6 +32273,7 @@ class StepBuilderActionComponent {
         this.filteredTemplates = [];
         this.searchValue = '';
         this.selectedTemplate = null;
+        this.previousTemplateForEdit = null;
         this.metadata = '';
         this.description = '';
         this.advancedExpanded = true;
@@ -32641,6 +32642,9 @@ class StepBuilderActionComponent {
         }
     }
     onChangeTemplate() {
+        if (this.isEditMode && this.selectedTemplate) {
+            this.previousTemplateForEdit = this.selectedTemplate;
+        }
         this.selectedTemplate = null;
         this.templateVariables = [];
         this.advancedSettingsVariables = [];
@@ -32656,6 +32660,11 @@ class StepBuilderActionComponent {
         this.searchValue = '';
         this.applyFilter();
     }
+    onCancelTemplateSelection() {
+        if (this.isEditMode && this.previousTemplateForEdit) {
+            this.selectTemplate(this.previousTemplateForEdit);
+        }
+    }
     onBack() {
         this.selectedTemplate = null;
         this.metadata = '';
@@ -32980,10 +32989,10 @@ class StepBuilderActionComponent {
     }
 }
 StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", initialTemplate: "initialTemplate", initialDescription: "initialDescription", initialMetadata: "initialMetadata", isDebug: "isDebug", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onChangeTemplate()\">\n    </cqa-button>\n  </div>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [uploadOptions]=\"uploadOptions\"\n            [hasMoreUploads]=\"hasMoreUploads\"\n            [isLoadingUploads]=\"isLoadingUploads\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (searchParameters)=\"searchParameters.emit($event)\"\n            (loadMoreParameters)=\"loadMoreParameters.emit()\"\n            (searchUploads)=\"searchUploads.emit($event)\"\n            (loadMoreUploads)=\"loadMoreUploads.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n          <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n            <button type=\"button\"\n              class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n              (click)=\"toggleAdvanced()\">\n              <span class=\"cqa-text-[10px]\">Advanced</span>\n              <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n                expand_more\n              </mat-icon>\n            </button>\n            <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n              <cqa-advanced-variables-form \n                [advancedVariables]=\"advancedSettingsVariables\"\n                [advancedVariableForm]=\"advancedVariablesForm\"\n                (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n                (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n              </cqa-advanced-variables-form>\n            </div>\n          </div> \n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", initialTemplate: "initialTemplate", initialDescription: "initialDescription", initialMetadata: "initialMetadata", isDebug: "isDebug", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && !selectedTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onCancelTemplateSelection()\">\n    </cqa-button>\n  </div>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [uploadOptions]=\"uploadOptions\"\n            [hasMoreUploads]=\"hasMoreUploads\"\n            [isLoadingUploads]=\"isLoadingUploads\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (searchParameters)=\"searchParameters.emit($event)\"\n            (loadMoreParameters)=\"loadMoreParameters.emit()\"\n            (searchUploads)=\"searchUploads.emit($event)\"\n            (loadMoreUploads)=\"loadMoreUploads.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n          <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n            <button type=\"button\"\n              class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n              (click)=\"toggleAdvanced()\">\n              <span class=\"cqa-text-[10px]\">Advanced</span>\n              <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n                expand_more\n              </mat-icon>\n            </button>\n            <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n              <cqa-advanced-variables-form \n                [advancedVariables]=\"advancedSettingsVariables\"\n                [advancedVariableForm]=\"advancedVariablesForm\"\n                (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n                (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n              </cqa-advanced-variables-form>\n            </div>\n          </div> \n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onChangeTemplate()\">\n    </cqa-button>\n  </div>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [uploadOptions]=\"uploadOptions\"\n            [hasMoreUploads]=\"hasMoreUploads\"\n            [isLoadingUploads]=\"isLoadingUploads\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (searchParameters)=\"searchParameters.emit($event)\"\n            (loadMoreParameters)=\"loadMoreParameters.emit()\"\n            (searchUploads)=\"searchUploads.emit($event)\"\n            (loadMoreUploads)=\"loadMoreUploads.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n          <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n            <button type=\"button\"\n              class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n              (click)=\"toggleAdvanced()\">\n              <span class=\"cqa-text-[10px]\">Advanced</span>\n              <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n                expand_more\n              </mat-icon>\n            </button>\n            <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n              <cqa-advanced-variables-form \n                [advancedVariables]=\"advancedSettingsVariables\"\n                [advancedVariableForm]=\"advancedVariablesForm\"\n                (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n                (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n              </cqa-advanced-variables-form>\n            </div>\n          </div> \n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && !selectedTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onCancelTemplateSelection()\">\n    </cqa-button>\n  </div>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [uploadOptions]=\"uploadOptions\"\n            [hasMoreUploads]=\"hasMoreUploads\"\n            [isLoadingUploads]=\"isLoadingUploads\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (searchParameters)=\"searchParameters.emit($event)\"\n            (loadMoreParameters)=\"loadMoreParameters.emit()\"\n            (searchUploads)=\"searchUploads.emit($event)\"\n            (loadMoreUploads)=\"loadMoreUploads.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n          <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n            <button type=\"button\"\n              class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n              (click)=\"toggleAdvanced()\">\n              <span class=\"cqa-text-[10px]\">Advanced</span>\n              <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n                expand_more\n              </mat-icon>\n            </button>\n            <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n              <cqa-advanced-variables-form \n                [advancedVariables]=\"advancedSettingsVariables\"\n                [advancedVariableForm]=\"advancedVariablesForm\"\n                (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n                (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n              </cqa-advanced-variables-form>\n            </div>\n          </div> \n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { showHeader: [{
                 type: Input
             }], templates: [{