@cqa-lib/cqa-ui 1.1.211 → 1.1.213

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/esm2020/lib/add-prerequisite-cases-section/add-prerequisite-cases-section.component.mjs +5 -6
  2. package/esm2020/lib/custom-textarea/custom-textarea.component.mjs +53 -5
  3. package/esm2020/lib/detail-drawer/detail-drawer.component.mjs +3 -3
  4. package/esm2020/lib/detail-side-panel/detail-side-panel.component.mjs +22 -6
  5. package/esm2020/lib/dynamic-select/dynamic-select-field.component.mjs +11 -6
  6. package/esm2020/lib/step-builder/step-builder-ai-agent/step-builder-ai-agent.component.mjs +1 -1
  7. package/esm2020/lib/step-builder/step-builder-custom-code/step-builder-custom-code.component.mjs +1 -1
  8. package/esm2020/lib/step-builder/step-builder-database/step-builder-database.component.mjs +1 -1
  9. package/esm2020/lib/test-case-details/api-edit-step/api-edit-step.component.mjs +1 -1
  10. package/esm2020/lib/test-case-details/custom-edit-step/custom-edit-step.component.mjs +1 -1
  11. package/esm2020/lib/test-case-details/step-details-drawer/step-details-drawer.component.mjs +1 -1
  12. package/esm2020/lib/test-case-details/test-case-details-edit/test-case-details-edit.component.mjs +226 -52
  13. package/esm2020/lib/test-case-details/test-case-details.component.mjs +34 -11
  14. package/esm2020/lib/test-case-details/test-case-details.models.mjs +6 -1
  15. package/esm2020/lib/ui-kit.module.mjs +3 -2
  16. package/esm2020/public-api.mjs +1 -1
  17. package/fesm2015/cqa-lib-cqa-ui.mjs +378 -104
  18. package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
  19. package/fesm2020/cqa-lib-cqa-ui.mjs +354 -83
  20. package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
  21. package/lib/custom-textarea/custom-textarea.component.d.ts +13 -3
  22. package/lib/detail-side-panel/detail-side-panel.component.d.ts +11 -2
  23. package/lib/test-case-details/test-case-details-edit/test-case-details-edit.component.d.ts +32 -4
  24. package/lib/test-case-details/test-case-details.component.d.ts +11 -3
  25. package/lib/test-case-details/test-case-details.models.d.ts +6 -0
  26. package/package.json +1 -1
  27. package/styles.css +1 -1
package/esm2020/lib/test-case-details/step-details-drawer/step-details-drawer.component.mjs CHANGED
@@ -206,7 +206,7 @@ export class StepDetailsDrawerComponent {
206
206
  }
207
207
  }
208
208
  StepDetailsDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerComponent, deps: [{ token: STEP_DETAILS_DRAWER_REF }, { token: i1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: STEP_DETAILS_DRAWER_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
209
- StepDetailsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepDetailsDrawerComponent, selector: "cqa-step-details-drawer", inputs: { stepData: "stepData", stepNumberInput: "stepNumberInput", dynamicFieldsInput: "dynamicFieldsInput", drawerTitle: "drawerTitle" }, outputs: { saveChanges: "saveChanges", cancel: "cancel", saveAsTemplate: "saveAsTemplate" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<!-- Step Details Drawer \u2013 Edit In Depth. Fully dynamic from DynamicFieldConfig[]. -->\n<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-w-full cqa-max-w-[480px] cqa-box-border\">\n <!-- Header: back chevron, title, Step N pill, close -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-4 cqa-py-4 cqa-bg-white cqa-rounded-t-[12px] cqa-border cqa-border-[#E5E5E5]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button type=\"button\" (click)=\"onBack()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n aria-label=\"Back\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">chevron_left</mat-icon>\n </button>\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n {{ displayTitle }}\n </h2>\n <span class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-bg-[#EDE9FE] cqa-text-[#7C3AED] cqa-text-[12px] cqa-font-medium\">\n Step {{ stepNumber }}\n </span>\n </div>\n <button type=\"button\" (click)=\"onClose()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[28px] cqa-min-w-[28px] cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n title=\"Close\" aria-label=\"Close\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">close</mat-icon>\n </button>\n </div>\n <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n\n <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-px-4 cqa-py-4\">\n <ng-container *ngIf=\"dynamicFields.length > 0\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <!-- All non-advanced fields in array order with section headers -->\n <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n <ng-container *ngIf=\"isNonAdvancedField(i)\">\n <p *ngIf=\"isFirstInSection(i, 'main')\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Attributes</p>\n <p *ngIf=\"isFirstInSection(i, 'constraints')\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-2 cqa-mt-0\">Constraints</p>\n\n <!-- string / undefined \u2192 text input -->\n <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- number -->\n <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input\n type=\"number\"\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- textarea -->\n <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <span *ngIf=\"field.required\" class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-bg-[#FEE2E2] cqa-text-[#DC2626] cqa-text-[10px] cqa-font-medium\">Required</span>\n </div>\n <cqa-custom-textarea\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n [rows]=\"field.rows || 4\"\n customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-textarea>\n <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0\">{{ field.tip }}</p>\n </div>\n\n <!-- code -->\n <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-textarea\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n [rows]=\"8\"\n resize=\"vertical\"\n customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n\n <!-- boolean \u2192 toggle -->\n <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div>\n <p class=\"cqa-text-[12px] cqa-text-[#111827] cqa-m-0\">{{ field.label }}</p>\n <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.subLabel }}</span>\n </div>\n <cqa-custom-toggle\n [checked]=\"form.get(field.key)?.value\"\n (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-toggle>\n </div>\n\n <!-- dropdown -->\n <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Advanced: expandable (all advanced fields from array) -->\n <ng-container *ngIf=\"advancedFields.length > 0\">\n <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#111827] cqa-py-2 cqa-border-b cqa-border-[#E5E7EB]\"\n (click)=\"advancedExpanded = !advancedExpanded\">\n <span>Advanced</span>\n <mat-icon class=\"cqa-text-[20px] cqa-transition-transform\" [class.cqa-rotate-180]=\"!advancedExpanded\">\n expand_less\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2\">\n <ng-container *ngFor=\"let field of advancedFields\">\n <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input\n type=\"number\"\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-custom-toggle\n [checked]=\"form.get(field.key)?.value\"\n (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-toggle>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#737373]\">{{ field.label }}</span>\n <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n </div>\n </div>\n <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Other Locators section (matching old UI) -->\n <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n <input\n type=\"text\"\n [value]=\"locator\"\n #locatorInput\n readonly\n class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n style=\"padding-left: 26px;\">\n <button\n type=\"button\"\n (click)=\"copyLocator(locatorInput)\"\n class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n title=\"Click to Copy\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n </button>\n <button\n type=\"button\"\n (click)=\"deleteLocator(i)\"\n class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n title=\"Delete\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n\n <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.</p>\n </div>\n <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n <!-- Footer -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-2 cqa-px-4 cqa-py-4 cqa-border-t cqa-border-[#E5E7EB] cqa-bg-[#F5F5F54D]\">\n <cqa-button variant=\"text\" btnSize=\"lg\" [text]=\"'Cancel'\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-text-[#374151]'\"></cqa-button>\n <div class=\"cqa-flex-1 cqa-min-w-0\"></div>\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Save as Template'\" (clicked)=\"onSaveAsTemplate()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Save Changes'\" (clicked)=\"onSaveChanges()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-[#3F43EE] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n</div>\n", components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.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: i4.CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: i5.CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: i6.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i7.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
209
+ StepDetailsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepDetailsDrawerComponent, selector: "cqa-step-details-drawer", inputs: { stepData: "stepData", stepNumberInput: "stepNumberInput", dynamicFieldsInput: "dynamicFieldsInput", drawerTitle: "drawerTitle" }, outputs: { saveChanges: "saveChanges", cancel: "cancel", saveAsTemplate: "saveAsTemplate" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<!-- Step Details Drawer \u2013 Edit In Depth. Fully dynamic from DynamicFieldConfig[]. -->\n<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-w-full cqa-max-w-[480px] cqa-box-border\">\n <!-- Header: back chevron, title, Step N pill, close -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-4 cqa-py-4 cqa-bg-white cqa-rounded-t-[12px] cqa-border cqa-border-[#E5E5E5]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button type=\"button\" (click)=\"onBack()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n aria-label=\"Back\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">chevron_left</mat-icon>\n </button>\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n {{ displayTitle }}\n </h2>\n <span class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-bg-[#EDE9FE] cqa-text-[#7C3AED] cqa-text-[12px] cqa-font-medium\">\n Step {{ stepNumber }}\n </span>\n </div>\n <button type=\"button\" (click)=\"onClose()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[28px] cqa-min-w-[28px] cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n title=\"Close\" aria-label=\"Close\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">close</mat-icon>\n </button>\n </div>\n <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n\n <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-px-4 cqa-py-4\">\n <ng-container *ngIf=\"dynamicFields.length > 0\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <!-- All non-advanced fields in array order with section headers -->\n <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n <ng-container *ngIf=\"isNonAdvancedField(i)\">\n <p *ngIf=\"isFirstInSection(i, 'main')\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Attributes</p>\n <p *ngIf=\"isFirstInSection(i, 'constraints')\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-2 cqa-mt-0\">Constraints</p>\n\n <!-- string / undefined \u2192 text input -->\n <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- number -->\n <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input\n type=\"number\"\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- textarea -->\n <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <span *ngIf=\"field.required\" class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-bg-[#FEE2E2] cqa-text-[#DC2626] cqa-text-[10px] cqa-font-medium\">Required</span>\n </div>\n <cqa-custom-textarea\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n [rows]=\"field.rows || 4\"\n customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-textarea>\n <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0\">{{ field.tip }}</p>\n </div>\n\n <!-- code -->\n <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-textarea\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n [rows]=\"8\"\n resize=\"vertical\"\n customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n\n <!-- boolean \u2192 toggle -->\n <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div>\n <p class=\"cqa-text-[12px] cqa-text-[#111827] cqa-m-0\">{{ field.label }}</p>\n <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.subLabel }}</span>\n </div>\n <cqa-custom-toggle\n [checked]=\"form.get(field.key)?.value\"\n (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-toggle>\n </div>\n\n <!-- dropdown -->\n <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Advanced: expandable (all advanced fields from array) -->\n <ng-container *ngIf=\"advancedFields.length > 0\">\n <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#111827] cqa-py-2 cqa-border-b cqa-border-[#E5E7EB]\"\n (click)=\"advancedExpanded = !advancedExpanded\">\n <span>Advanced</span>\n <mat-icon class=\"cqa-text-[20px] cqa-transition-transform\" [class.cqa-rotate-180]=\"!advancedExpanded\">\n expand_less\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2\">\n <ng-container *ngFor=\"let field of advancedFields\">\n <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input\n type=\"number\"\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-custom-toggle\n [checked]=\"form.get(field.key)?.value\"\n (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-toggle>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#737373]\">{{ field.label }}</span>\n <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n </div>\n </div>\n <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Other Locators section (matching old UI) -->\n <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n <input\n type=\"text\"\n [value]=\"locator\"\n #locatorInput\n readonly\n class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n style=\"padding-left: 26px;\">\n <button\n type=\"button\"\n (click)=\"copyLocator(locatorInput)\"\n class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n title=\"Click to Copy\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n </button>\n <button\n type=\"button\"\n (click)=\"deleteLocator(i)\"\n class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n title=\"Delete\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n\n <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.</p>\n </div>\n <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n <!-- Footer -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-2 cqa-px-4 cqa-py-4 cqa-border-t cqa-border-[#E5E7EB] cqa-bg-[#F5F5F54D]\">\n <cqa-button variant=\"text\" btnSize=\"lg\" [text]=\"'Cancel'\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-text-[#374151]'\"></cqa-button>\n <div class=\"cqa-flex-1 cqa-min-w-0\"></div>\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Save as Template'\" (clicked)=\"onSaveAsTemplate()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Save Changes'\" (clicked)=\"onSaveChanges()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-[#3F43EE] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n</div>\n", components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.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: i4.CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: i5.CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: i6.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i7.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
210
210
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerComponent, decorators: [{
211
211
  type: Component,
212
212
  args: [{ selector: 'cqa-step-details-drawer', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Step Details Drawer \u2013 Edit In Depth. Fully dynamic from DynamicFieldConfig[]. -->\n<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-w-full cqa-max-w-[480px] cqa-box-border\">\n <!-- Header: back chevron, title, Step N pill, close -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-4 cqa-py-4 cqa-bg-white cqa-rounded-t-[12px] cqa-border cqa-border-[#E5E5E5]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button type=\"button\" (click)=\"onBack()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n aria-label=\"Back\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">chevron_left</mat-icon>\n </button>\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n {{ displayTitle }}\n </h2>\n <span class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-bg-[#EDE9FE] cqa-text-[#7C3AED] cqa-text-[12px] cqa-font-medium\">\n Step {{ stepNumber }}\n </span>\n </div>\n <button type=\"button\" (click)=\"onClose()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[28px] cqa-min-w-[28px] cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n title=\"Close\" aria-label=\"Close\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">close</mat-icon>\n </button>\n </div>\n <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n\n <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-px-4 cqa-py-4\">\n <ng-container *ngIf=\"dynamicFields.length > 0\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <!-- All non-advanced fields in array order with section headers -->\n <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n <ng-container *ngIf=\"isNonAdvancedField(i)\">\n <p *ngIf=\"isFirstInSection(i, 'main')\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Attributes</p>\n <p *ngIf=\"isFirstInSection(i, 'constraints')\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-2 cqa-mt-0\">Constraints</p>\n\n <!-- string / undefined \u2192 text input -->\n <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- number -->\n <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input\n type=\"number\"\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- textarea -->\n <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <span *ngIf=\"field.required\" class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-bg-[#FEE2E2] cqa-text-[#DC2626] cqa-text-[10px] cqa-font-medium\">Required</span>\n </div>\n <cqa-custom-textarea\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n [rows]=\"field.rows || 4\"\n customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-textarea>\n <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0\">{{ field.tip }}</p>\n </div>\n\n <!-- code -->\n <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-textarea\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n [rows]=\"8\"\n resize=\"vertical\"\n customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n\n <!-- boolean \u2192 toggle -->\n <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div>\n <p class=\"cqa-text-[12px] cqa-text-[#111827] cqa-m-0\">{{ field.label }}</p>\n <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.subLabel }}</span>\n </div>\n <cqa-custom-toggle\n [checked]=\"form.get(field.key)?.value\"\n (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-toggle>\n </div>\n\n <!-- dropdown -->\n <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Advanced: expandable (all advanced fields from array) -->\n <ng-container *ngIf=\"advancedFields.length > 0\">\n <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#111827] cqa-py-2 cqa-border-b cqa-border-[#E5E7EB]\"\n (click)=\"advancedExpanded = !advancedExpanded\">\n <span>Advanced</span>\n <mat-icon class=\"cqa-text-[20px] cqa-transition-transform\" [class.cqa-rotate-180]=\"!advancedExpanded\">\n expand_less\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2\">\n <ng-container *ngFor=\"let field of advancedFields\">\n <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input\n type=\"number\"\n [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-custom-toggle\n [checked]=\"form.get(field.key)?.value\"\n (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-toggle>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#737373]\">{{ field.label }}</span>\n <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n </div>\n </div>\n <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Other Locators section (matching old UI) -->\n <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n <input\n type=\"text\"\n [value]=\"locator\"\n #locatorInput\n readonly\n class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n style=\"padding-left: 26px;\">\n <button\n type=\"button\"\n (click)=\"copyLocator(locatorInput)\"\n class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n title=\"Click to Copy\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n </button>\n <button\n type=\"button\"\n (click)=\"deleteLocator(i)\"\n class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n title=\"Delete\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n\n <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.</p>\n </div>\n <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n <!-- Footer -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-2 cqa-px-4 cqa-py-4 cqa-border-t cqa-border-[#E5E7EB] cqa-bg-[#F5F5F54D]\">\n <cqa-button variant=\"text\" btnSize=\"lg\" [text]=\"'Cancel'\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-text-[#374151]'\"></cqa-button>\n <div class=\"cqa-flex-1 cqa-min-w-0\"></div>\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Save as Template'\" (clicked)=\"onSaveAsTemplate()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Save Changes'\" (clicked)=\"onSaveChanges()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-[#3F43EE] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n</div>\n" }]