@cqa-lib/cqa-ui 1.1.557-beta.23 → 1.1.557-beta.25
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.
- package/esm2022/lib/custom-input/custom-input.component.mjs +7 -4
- package/esm2022/lib/custom-textarea/custom-textarea.component.mjs +42 -4
- package/esm2022/lib/dialog/dialog.component.mjs +7 -2
- package/esm2022/lib/dialogs/name-prompt-modal.component.mjs +1 -1
- package/esm2022/lib/dynamic-select/dynamic-select-field.component.mjs +5 -1
- package/esm2022/lib/export-code-modal/export-code-modal.component.mjs +1 -1
- package/esm2022/lib/manage-columns-dialog/manage-columns-dialog.component.mjs +1 -1
- package/esm2022/lib/new-db-config-dialog/new-db-config-dialog.component.mjs +1 -1
- package/esm2022/lib/new-environment-dialog/new-environment-dialog.component.mjs +1 -1
- package/esm2022/lib/new-environment-variable-dialog/new-environment-variable-dialog.component.mjs +1 -1
- package/esm2022/lib/new-global-variable-dialog/new-global-variable-dialog.component.mjs +1 -1
- package/esm2022/lib/new-test-data-profile-dialog/new-test-data-profile-dialog.component.mjs +1 -1
- package/esm2022/lib/questionnaire-list/questionnaire-list.component.mjs +1 -1
- package/esm2022/lib/step-builder/advanced-variables-form/advanced-variables-form.component.mjs +1 -1
- package/esm2022/lib/step-builder/step-builder-ai-agent/step-builder-ai-agent.component.mjs +1 -1
- package/esm2022/lib/step-builder/step-builder-custom-code/step-builder-custom-code.component.mjs +1 -1
- package/esm2022/lib/step-builder/step-builder-database/step-builder-database.component.mjs +71 -17
- package/esm2022/lib/step-builder/step-builder-document/step-builder-document.component.mjs +1 -1
- package/esm2022/lib/step-builder/step-builder-document-generation-template-step/step-builder-document-generation-template-step.component.mjs +1 -1
- package/esm2022/lib/step-builder/step-builder-group/step-builder-group.component.mjs +1 -1
- package/esm2022/lib/step-builder/step-builder-loop/step-builder-loop.component.mjs +1 -1
- package/esm2022/lib/step-builder/template-variables-form/template-variables-form.component.mjs +1 -1
- package/esm2022/lib/templates/modular-table-template/dialogs/new-folder-dialog.component.mjs +1 -1
- package/esm2022/lib/test-case-details/api-edit-step/api-edit-step.component.mjs +1 -1
- package/esm2022/lib/test-case-details/condition-step/condition-step.component.mjs +1 -1
- package/esm2022/lib/test-case-details/create-step-group/create-step-group.component.mjs +1 -1
- package/esm2022/lib/test-case-details/element-popup/element-form/element-form.component.mjs +1 -1
- package/esm2022/lib/test-case-details/step-details-drawer/step-details-drawer.component.mjs +1 -1
- package/esm2022/lib/test-case-details/test-case-details-edit/test-case-details-edit.component.mjs +1 -1
- package/esm2022/lib/test-case-details/test-data-modal/test-data-modal.component.mjs +1 -1
- package/esm2022/lib/test-suite/move-test-suite-dialog/move-test-suite-dialog.component.mjs +1 -1
- package/esm2022/lib/ui-kit.module.mjs +10 -2
- package/esm2022/lib/viewport-selector/viewport-selector.component.mjs +1 -1
- package/fesm2022/cqa-lib-cqa-ui.mjs +155 -38
- package/fesm2022/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/custom-input/custom-input.component.d.ts +2 -1
- package/lib/custom-textarea/custom-textarea.component.d.ts +8 -1
- package/lib/step-builder/step-builder-database/step-builder-database.component.d.ts +11 -0
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -123,7 +123,7 @@ export class ExportCodeModalComponent {
|
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
125
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExportCodeModalComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
126
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: { isOpen: "isOpen", cases: "cases", disabled: "disabled" }, outputs: { closeModal: "closeModal", export: "export" }, ngImport: i0, template: "<div *ngIf=\"isOpen || isDialogMode\"\n [class.modal-backdrop]=\"!isDialogMode\"\n [class.cqa-fixed]=\"!isDialogMode\"\n [class.cqa-inset-0]=\"!isDialogMode\"\n [class.cqa-bg-black]=\"!isDialogMode\"\n [class.cqa-bg-opacity-50]=\"!isDialogMode\"\n [class.cqa-flex]=\"!isDialogMode\"\n [class.cqa-items-center]=\"!isDialogMode\"\n [class.cqa-justify-center]=\"!isDialogMode\"\n [class.cqa-p-4]=\"!isDialogMode\"\n (click)=\"!isDialogMode && onBackdropClick($event)\">\n <div\n class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[600px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh]\"\n [style.box-shadow]=\"'0px 8px 8px -4px #10182808'\" \n (click)=\"!isDialogMode && $event.stopPropagation()\">\n\n <!-- Sticky Header -->\n <div class=\"cqa-sticky cqa-top-0 cqa-bg-white cqa-mt-2 cqa-z-10 cqa-px-4 cqa-pt-2 cqa-pb-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#0B0B0C]\">\n Export Code\n </h2>\n <cqa-button \n [variant]=\"'text'\"\n [icon]=\"'close'\"\n [btnSize]=\"'md'\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-4 cqa-pb-4\">\n <!-- Framework Options -->\n <p class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-2\">Choose automation framework:</p>\n <div class=\"cqa-flex cqa-gap-4 cqa-mb-2\">\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"framework === 'WEBDRIVER_IO'\"\n [class.cqa-bg-[#F0F0FF]]=\"framework === 'WEBDRIVER_IO'\"\n [class.cqa-border-gray-300]=\"framework !== 'WEBDRIVER_IO'\"\n (click)=\"framework = 'WEBDRIVER_IO'\">\n <div class=\"cqa-flex cqa-items-center\">\n <input\n type=\"radio\"\n [checked]=\"framework === 'WEBDRIVER_IO'\"\n (click)=\"$event.stopPropagation()\"\n name=\"framework\"\n style=\"pointer-events: none;\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">WebdriverIO</span>\n </div>\n </div>\n </div>\n\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"framework === 'SELENIUM_JAVA'\"\n [class.cqa-bg-[#F0F0FF]]=\"framework === 'SELENIUM_JAVA'\"\n [class.cqa-border-gray-300]=\"framework !== 'SELENIUM_JAVA'\"\n (click)=\"framework = 'SELENIUM_JAVA'\">\n <div class=\"cqa-flex cqa-items-center\">\n <input\n type=\"radio\"\n [checked]=\"framework === 'SELENIUM_JAVA'\"\n name=\"framework\"\n style=\"pointer-events: none;\"\n (click)=\"$event.stopPropagation()\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Selenium Java</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Export Options -->\n <p class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-2 cqa-mt-3\">Choose how you want to export the test case code:</p>\n <div class=\"cqa-flex cqa-gap-4 cqa-mb-2\">\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"exportOnLocal\"\n [class.cqa-bg-[#F0F0FF]]=\"exportOnLocal\"\n [class.cqa-border-gray-300]=\"!exportOnLocal\"\n (click)=\"exportOnLocal = true\">\n <div class=\"cqa-flex cqa-items-center\">\n <input \n type=\"radio\" \n [checked]=\"exportOnLocal\" \n (click)=\"$event.stopPropagation()\"\n name=\"exportType\"\n style=\"pointer-events: none;\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Download in Local</span>\n </div>\n </div>\n </div>\n \n <div \n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"!exportOnLocal\"\n [class.cqa-bg-[#F0F0FF]]=\"!exportOnLocal\"\n [class.cqa-border-gray-300]=\"exportOnLocal\"\n (click)=\"exportOnLocal = false\">\n <div class=\"cqa-flex cqa-items-center\">\n <input \n type=\"radio\" \n [checked]=\"!exportOnLocal\" \n name=\"exportType\"\n style=\"pointer-events: none;\"\n (click)=\"$event.stopPropagation()\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Via Email</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Email Input Section (only shown when Via Email is selected) -->\n <div class=\"cqa-mt-2\" *ngIf=\"!exportOnLocal\">\n <div class=\"cqa-px-4 cqa-py-2 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-font-medium cqa-text-sm cqa-text-[#0B0B0C] cqa-mb-2\">Email Addresses:</div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [type]=\"'email'\"\n [placeholder]=\"'Type email and press Enter or Add button'\"\n [value]=\"emailInputControl.value || ''\"\n [fullWidth]=\"true\"\n [errors]=\"getEmailErrors()\"\n (valueChange)=\"emailInputControl.setValue($event)\"\n (enterPressed)=\"addEmail()\">\n </cqa-custom-input>\n <cqa-button \n [variant]=\"'outlined'\"\n [icon]=\"'add'\"\n [btnSize]=\"'lg'\"\n [disabled]=\"!emailInputControl.valid || !emailInputControl.value?.trim()\"\n (clicked)=\"addEmail()\">\n </cqa-button>\n </div>\n\n <!-- Email Validation Error for Empty List -->\n <div class=\"cqa-text-red-600 cqa-text-xs cqa-mb-2\" *ngIf=\"!exportOnLocal && emailList.length === 0 && showEmailError\">\n At least one email address is required\n </div>\n\n <!-- Email Chips -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-mt-2\" *ngIf=\"emailList.length > 0\">\n <div *ngFor=\"let email of emailList; let i = index\" \n class=\"cqa-px-2 cqa-py-1 cqa-bg-[#DFDFFD] cqa-border cqa-border-[#DFDFFD] cqa-rounded-md cqa-flex cqa-items-center\">\n <span class=\"cqa-text-[#6366F1] cqa-text-[12px]\">{{email}}</span>\n <cqa-button \n [variant]=\"'text'\"\n [icon]=\"'close'\"\n [btnSize]=\"'sm'\"\n [iconColor]=\"'#6366F1'\"\n (clicked)=\"removeEmail(i)\">\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Cases List -->\n <div class=\"cqa-mt-1\" *ngIf=\"cases.length > 0\">\n <div class=\"cqa-p-4 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-font-medium cqa-text-sm cqa-text-[#0B0B0C] cqa-mb-2\">Test Cases to Export ({{cases.length}}):</div>\n <div class=\"cqa-max-h-[150px] cqa-overflow-y-auto cqa-pr-4\">\n <div class=\"cqa-py-2 cqa-border-b cqa-border-b-[1px] cqa-border-t-[0px] cqa-border-l-[0px] cqa-border-r-[0px] cqa-border-solid cqa-border-gray-200 cqa-flex cqa-items-center cqa-gap-2\" *ngFor=\"let case of cases; let i = index\">\n <span class=\"cqa-font-medium cqa-text-[12px] cqa-text-[#3f43ee] cqa-min-w-[24px]\">{{i + 1}}.</span>\n <span class=\"cqa-flex-1 cqa-text-[12px] cqa-text-[#0B0B0C]\">{{case.name || 'Unnamed Test Case'}}</span>\n <span class=\"cqa-text-xs cqa-text-gray-500\" *ngIf=\"case.id\">(TC-{{case.id}})</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-px-4 cqa-py-3 cqa-border-t cqa-border-gray-200 cqa-flex cqa-justify-end cqa-gap-3\">\n <cqa-button \n [variant]=\"'outlined'\"\n [text]=\"'Cancel'\"\n (clicked)=\"onClose()\">\n </cqa-button>\n <cqa-button \n [variant]=\"'filled'\"\n [text]=\"exportOnLocal ? 'Export' : 'Send'\"\n [disabled]=\"disabled || isExportDisabled()\"\n (clicked)=\"handleExport()\">\n </cqa-button>\n </div>\n </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { kind: "component", type: i4.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }] });
|
|
126
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: { isOpen: "isOpen", cases: "cases", disabled: "disabled" }, outputs: { closeModal: "closeModal", export: "export" }, ngImport: i0, template: "<div *ngIf=\"isOpen || isDialogMode\"\n [class.modal-backdrop]=\"!isDialogMode\"\n [class.cqa-fixed]=\"!isDialogMode\"\n [class.cqa-inset-0]=\"!isDialogMode\"\n [class.cqa-bg-black]=\"!isDialogMode\"\n [class.cqa-bg-opacity-50]=\"!isDialogMode\"\n [class.cqa-flex]=\"!isDialogMode\"\n [class.cqa-items-center]=\"!isDialogMode\"\n [class.cqa-justify-center]=\"!isDialogMode\"\n [class.cqa-p-4]=\"!isDialogMode\"\n (click)=\"!isDialogMode && onBackdropClick($event)\">\n <div\n class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[600px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh]\"\n [style.box-shadow]=\"'0px 8px 8px -4px #10182808'\" \n (click)=\"!isDialogMode && $event.stopPropagation()\">\n\n <!-- Sticky Header -->\n <div class=\"cqa-sticky cqa-top-0 cqa-bg-white cqa-mt-2 cqa-z-10 cqa-px-4 cqa-pt-2 cqa-pb-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#0B0B0C]\">\n Export Code\n </h2>\n <cqa-button \n [variant]=\"'text'\"\n [icon]=\"'close'\"\n [btnSize]=\"'md'\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-4 cqa-pb-4\">\n <!-- Framework Options -->\n <p class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-2\">Choose automation framework:</p>\n <div class=\"cqa-flex cqa-gap-4 cqa-mb-2\">\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"framework === 'WEBDRIVER_IO'\"\n [class.cqa-bg-[#F0F0FF]]=\"framework === 'WEBDRIVER_IO'\"\n [class.cqa-border-gray-300]=\"framework !== 'WEBDRIVER_IO'\"\n (click)=\"framework = 'WEBDRIVER_IO'\">\n <div class=\"cqa-flex cqa-items-center\">\n <input\n type=\"radio\"\n [checked]=\"framework === 'WEBDRIVER_IO'\"\n (click)=\"$event.stopPropagation()\"\n name=\"framework\"\n style=\"pointer-events: none;\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">WebdriverIO</span>\n </div>\n </div>\n </div>\n\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"framework === 'SELENIUM_JAVA'\"\n [class.cqa-bg-[#F0F0FF]]=\"framework === 'SELENIUM_JAVA'\"\n [class.cqa-border-gray-300]=\"framework !== 'SELENIUM_JAVA'\"\n (click)=\"framework = 'SELENIUM_JAVA'\">\n <div class=\"cqa-flex cqa-items-center\">\n <input\n type=\"radio\"\n [checked]=\"framework === 'SELENIUM_JAVA'\"\n name=\"framework\"\n style=\"pointer-events: none;\"\n (click)=\"$event.stopPropagation()\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Selenium Java</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Export Options -->\n <p class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-2 cqa-mt-3\">Choose how you want to export the test case code:</p>\n <div class=\"cqa-flex cqa-gap-4 cqa-mb-2\">\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"exportOnLocal\"\n [class.cqa-bg-[#F0F0FF]]=\"exportOnLocal\"\n [class.cqa-border-gray-300]=\"!exportOnLocal\"\n (click)=\"exportOnLocal = true\">\n <div class=\"cqa-flex cqa-items-center\">\n <input \n type=\"radio\" \n [checked]=\"exportOnLocal\" \n (click)=\"$event.stopPropagation()\"\n name=\"exportType\"\n style=\"pointer-events: none;\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Download in Local</span>\n </div>\n </div>\n </div>\n \n <div \n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"!exportOnLocal\"\n [class.cqa-bg-[#F0F0FF]]=\"!exportOnLocal\"\n [class.cqa-border-gray-300]=\"exportOnLocal\"\n (click)=\"exportOnLocal = false\">\n <div class=\"cqa-flex cqa-items-center\">\n <input \n type=\"radio\" \n [checked]=\"!exportOnLocal\" \n name=\"exportType\"\n style=\"pointer-events: none;\"\n (click)=\"$event.stopPropagation()\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Via Email</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Email Input Section (only shown when Via Email is selected) -->\n <div class=\"cqa-mt-2\" *ngIf=\"!exportOnLocal\">\n <div class=\"cqa-px-4 cqa-py-2 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-font-medium cqa-text-sm cqa-text-[#0B0B0C] cqa-mb-2\">Email Addresses:</div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [type]=\"'email'\"\n [placeholder]=\"'Type email and press Enter or Add button'\"\n [value]=\"emailInputControl.value || ''\"\n [fullWidth]=\"true\"\n [errors]=\"getEmailErrors()\"\n (valueChange)=\"emailInputControl.setValue($event)\"\n (enterPressed)=\"addEmail()\">\n </cqa-custom-input>\n <cqa-button \n [variant]=\"'outlined'\"\n [icon]=\"'add'\"\n [btnSize]=\"'lg'\"\n [disabled]=\"!emailInputControl.valid || !emailInputControl.value?.trim()\"\n (clicked)=\"addEmail()\">\n </cqa-button>\n </div>\n\n <!-- Email Validation Error for Empty List -->\n <div class=\"cqa-text-red-600 cqa-text-xs cqa-mb-2\" *ngIf=\"!exportOnLocal && emailList.length === 0 && showEmailError\">\n At least one email address is required\n </div>\n\n <!-- Email Chips -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-mt-2\" *ngIf=\"emailList.length > 0\">\n <div *ngFor=\"let email of emailList; let i = index\" \n class=\"cqa-px-2 cqa-py-1 cqa-bg-[#DFDFFD] cqa-border cqa-border-[#DFDFFD] cqa-rounded-md cqa-flex cqa-items-center\">\n <span class=\"cqa-text-[#6366F1] cqa-text-[12px]\">{{email}}</span>\n <cqa-button \n [variant]=\"'text'\"\n [icon]=\"'close'\"\n [btnSize]=\"'sm'\"\n [iconColor]=\"'#6366F1'\"\n (clicked)=\"removeEmail(i)\">\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Cases List -->\n <div class=\"cqa-mt-1\" *ngIf=\"cases.length > 0\">\n <div class=\"cqa-p-4 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-font-medium cqa-text-sm cqa-text-[#0B0B0C] cqa-mb-2\">Test Cases to Export ({{cases.length}}):</div>\n <div class=\"cqa-max-h-[150px] cqa-overflow-y-auto cqa-pr-4\">\n <div class=\"cqa-py-2 cqa-border-b cqa-border-b-[1px] cqa-border-t-[0px] cqa-border-l-[0px] cqa-border-r-[0px] cqa-border-solid cqa-border-gray-200 cqa-flex cqa-items-center cqa-gap-2\" *ngFor=\"let case of cases; let i = index\">\n <span class=\"cqa-font-medium cqa-text-[12px] cqa-text-[#3f43ee] cqa-min-w-[24px]\">{{i + 1}}.</span>\n <span class=\"cqa-flex-1 cqa-text-[12px] cqa-text-[#0B0B0C]\">{{case.name || 'Unnamed Test Case'}}</span>\n <span class=\"cqa-text-xs cqa-text-gray-500\" *ngIf=\"case.id\">(TC-{{case.id}})</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-px-4 cqa-py-3 cqa-border-t cqa-border-gray-200 cqa-flex cqa-justify-end cqa-gap-3\">\n <cqa-button \n [variant]=\"'outlined'\"\n [text]=\"'Cancel'\"\n (clicked)=\"onClose()\">\n </cqa-button>\n <cqa-button \n [variant]=\"'filled'\"\n [text]=\"exportOnLocal ? 'Export' : 'Send'\"\n [disabled]=\"disabled || isExportDisabled()\"\n (clicked)=\"handleExport()\">\n </cqa-button>\n </div>\n </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { kind: "component", type: i4.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "readonly", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }] });
|
|
127
127
|
}
|
|
128
128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExportCodeModalComponent, decorators: [{
|
|
129
129
|
type: Component,
|
|
@@ -118,7 +118,7 @@ export class ManageColumnsDialogComponent {
|
|
|
118
118
|
return this.items.some(it => (it.name || '').trim().toLowerCase() === lowered);
|
|
119
119
|
}
|
|
120
120
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ManageColumnsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
121
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ManageColumnsDialogComponent, selector: "cqa-manage-columns-dialog", inputs: { columns: "columns", lockedColumns: "lockedColumns" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-w-full\">\n\n <div class=\"manage-cols-drop-list cqa-flex cqa-flex-col cqa-gap-2\"\n [dndDropzone]=\"['col']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"manage-cols-placeholder\">Drop here</div>\n <div *ngFor=\"let item of items; let i = index; trackBy: trackByUid\"\n class=\"manage-cols-row cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1.5 cqa-rounded-md cqa-border cqa-border-gray-200 cqa-bg-gray-50\">\n <span class=\"manage-cols-handle cqa-flex cqa-items-center cqa-justify-center cqa-text-gray-400\"\n [dndDraggable]=\"item\"\n [dndDisableIf]=\"isLocked(item)\"\n dndType=\"col\"\n dndEffectAllowed=\"move\">\n <mat-icon style=\"font-size:18px;width:18px;height:18px;line-height:18px;\">drag_indicator</mat-icon>\n </span>\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"item.name\"\n [fullWidth]=\"true\"\n [disabled]=\"isLocked(item)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onRename(i, $event)\">\n </cqa-custom-input>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move up\"\n [disabled]=\"i === 0\"\n (click)=\"onMove(i, -1)\">\n <mat-icon>arrow_upward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move down\"\n [disabled]=\"i === items.length - 1\"\n (click)=\"onMove(i, 1)\">\n <mat-icon>arrow_downward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn manage-cols-icon-btn-danger\"\n title=\"Delete column\"\n [disabled]=\"isLocked(item)\"\n (click)=\"onRemove(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pt-3 cqa-mt-1 cqa-border-t cqa-border-dashed cqa-border-gray-200\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"newColName\"\n [fullWidth]=\"true\"\n placeholder=\"New column name (e.g. currency)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNewColNameChange($event)\"\n (enterPressed)=\"onAdd()\">\n </cqa-custom-input>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"add\"\n text=\"Add column\"\n [disabled]=\"!canAdd\"\n (clicked)=\"onAdd()\">\n </cqa-button>\n </div>\n\n <span *ngIf=\"columnsError\" class=\"cqa-text-xs cqa-text-red-600\">{{ columnsError }}</span>\n\n <div class=\"cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-primary-surface cqa-border cqa-border-success-100 cqa-text-xs cqa-text-gray-700\">\n <strong class=\"cqa-text-gray-900\">Heads up:</strong>\n Deleting a column removes its data from every environment. Renaming keeps the data in place.\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i3.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i3.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { kind: "component", type: i4.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { kind: "component", type: i5.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }] });
|
|
121
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ManageColumnsDialogComponent, selector: "cqa-manage-columns-dialog", inputs: { columns: "columns", lockedColumns: "lockedColumns" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-w-full\">\n\n <div class=\"manage-cols-drop-list cqa-flex cqa-flex-col cqa-gap-2\"\n [dndDropzone]=\"['col']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"manage-cols-placeholder\">Drop here</div>\n <div *ngFor=\"let item of items; let i = index; trackBy: trackByUid\"\n class=\"manage-cols-row cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1.5 cqa-rounded-md cqa-border cqa-border-gray-200 cqa-bg-gray-50\">\n <span class=\"manage-cols-handle cqa-flex cqa-items-center cqa-justify-center cqa-text-gray-400\"\n [dndDraggable]=\"item\"\n [dndDisableIf]=\"isLocked(item)\"\n dndType=\"col\"\n dndEffectAllowed=\"move\">\n <mat-icon style=\"font-size:18px;width:18px;height:18px;line-height:18px;\">drag_indicator</mat-icon>\n </span>\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"item.name\"\n [fullWidth]=\"true\"\n [disabled]=\"isLocked(item)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onRename(i, $event)\">\n </cqa-custom-input>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move up\"\n [disabled]=\"i === 0\"\n (click)=\"onMove(i, -1)\">\n <mat-icon>arrow_upward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move down\"\n [disabled]=\"i === items.length - 1\"\n (click)=\"onMove(i, 1)\">\n <mat-icon>arrow_downward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn manage-cols-icon-btn-danger\"\n title=\"Delete column\"\n [disabled]=\"isLocked(item)\"\n (click)=\"onRemove(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pt-3 cqa-mt-1 cqa-border-t cqa-border-dashed cqa-border-gray-200\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"newColName\"\n [fullWidth]=\"true\"\n placeholder=\"New column name (e.g. currency)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNewColNameChange($event)\"\n (enterPressed)=\"onAdd()\">\n </cqa-custom-input>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"add\"\n text=\"Add column\"\n [disabled]=\"!canAdd\"\n (clicked)=\"onAdd()\">\n </cqa-button>\n </div>\n\n <span *ngIf=\"columnsError\" class=\"cqa-text-xs cqa-text-red-600\">{{ columnsError }}</span>\n\n <div class=\"cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-primary-surface cqa-border cqa-border-success-100 cqa-text-xs cqa-text-gray-700\">\n <strong class=\"cqa-text-gray-900\">Heads up:</strong>\n Deleting a column removes its data from every environment. Renaming keeps the data in place.\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i3.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i3.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { kind: "component", type: i4.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { kind: "component", type: i5.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "readonly", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }] });
|
|
122
122
|
}
|
|
123
123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ManageColumnsDialogComponent, decorators: [{
|
|
124
124
|
type: Component,
|
|
@@ -247,7 +247,7 @@ export class NewDbConfigDialogComponent {
|
|
|
247
247
|
}
|
|
248
248
|
}
|
|
249
249
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewDbConfigDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
250
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NewDbConfigDialogComponent, selector: "cqa-new-db-config-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", envName: "envName", testFn: "testFn" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Row: Connection name + Driver -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Connection name\"\n placeholder=\"e.g. Primary (bookings)\"\n type=\"text\"\n [value]=\"connectionName\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"connectionNameErrorsArray\"\n (valueChange)=\"onConnectionNameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Driver</label>\n <cqa-dropdown-button\n [options]=\"driverOptions\"\n [selectedValue]=\"driver\"\n (selectionChange)=\"onDriverChange($event)\">\n </cqa-dropdown-button>\n </div>\n </div>\n\n <!-- Row: Host + Port -->\n <div class=\"cqa-grid cqa-grid-cols-4 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-col-span-3\">\n <cqa-custom-input\n label=\"Host\"\n placeholder=\"db.example.com\"\n type=\"text\"\n [value]=\"host\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"hostErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onHostChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-col-span-1\">\n <cqa-custom-input\n label=\"Port\"\n type=\"number\"\n [value]=\"port != null ? port.toString() : ''\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"portErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onPortChange($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Database -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Database\"\n placeholder=\"bookings_qa\"\n type=\"text\"\n [value]=\"database\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"databaseErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onDatabaseChange($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Row: Username + Password -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Username\"\n type=\"text\"\n [value]=\"username\"\n [fullWidth]=\"true\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onUsernameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Password\"\n type=\"password\"\n [value]=\"password\"\n [placeholder]=\"passwordPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onPasswordChange($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Test connection action + result -->\n <div *ngIf=\"testFn\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <span class=\"cqa-text-xs cqa-text-gray-600\">\n Validate the connection without saving. The credentials are sent over the wire only for this check.\n </span>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"md\"\n icon=\"bolt\"\n text=\"Test connection\"\n [loading]=\"isTesting\"\n [disabled]=\"!canTest\"\n (clicked)=\"onTestClick()\">\n </cqa-button>\n </div>\n\n <div *ngIf=\"testResult\"\n class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-sm\"\n [ngClass]=\"testResult.status === 'success'\n ? 'cqa-bg-[#ECFDF5] cqa-text-[#065F46] cqa-border cqa-border-[#A7F3D0]'\n : 'cqa-bg-[#FEF2F2] cqa-text-[#991B1B] cqa-border cqa-border-[#FECACA]'\">\n <mat-icon class=\"!cqa-w-[18px] !cqa-h-[18px] !cqa-text-[18px]\">\n {{ testResult.status === 'success' ? 'check_circle' : 'error' }}\n </mat-icon>\n <span>{{ testResult.message }}</span>\n </div>\n </div>\n\n <!-- Encryption notice -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#EEF2FF] cqa-border cqa-border-[#C7D2FE] cqa-text-xs cqa-text-[#3730A3]\">\n <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">lock</mat-icon>\n <span>Credentials are encrypted at rest and masked in the audit log.</span>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { kind: "component", type: i4.DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { kind: "component", type: i5.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
250
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NewDbConfigDialogComponent, selector: "cqa-new-db-config-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", envName: "envName", testFn: "testFn" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Row: Connection name + Driver -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Connection name\"\n placeholder=\"e.g. Primary (bookings)\"\n type=\"text\"\n [value]=\"connectionName\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"connectionNameErrorsArray\"\n (valueChange)=\"onConnectionNameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Driver</label>\n <cqa-dropdown-button\n [options]=\"driverOptions\"\n [selectedValue]=\"driver\"\n (selectionChange)=\"onDriverChange($event)\">\n </cqa-dropdown-button>\n </div>\n </div>\n\n <!-- Row: Host + Port -->\n <div class=\"cqa-grid cqa-grid-cols-4 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-col-span-3\">\n <cqa-custom-input\n label=\"Host\"\n placeholder=\"db.example.com\"\n type=\"text\"\n [value]=\"host\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"hostErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onHostChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-col-span-1\">\n <cqa-custom-input\n label=\"Port\"\n type=\"number\"\n [value]=\"port != null ? port.toString() : ''\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"portErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onPortChange($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Database -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Database\"\n placeholder=\"bookings_qa\"\n type=\"text\"\n [value]=\"database\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"databaseErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onDatabaseChange($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Row: Username + Password -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Username\"\n type=\"text\"\n [value]=\"username\"\n [fullWidth]=\"true\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onUsernameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Password\"\n type=\"password\"\n [value]=\"password\"\n [placeholder]=\"passwordPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onPasswordChange($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Test connection action + result -->\n <div *ngIf=\"testFn\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <span class=\"cqa-text-xs cqa-text-gray-600\">\n Validate the connection without saving. The credentials are sent over the wire only for this check.\n </span>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"md\"\n icon=\"bolt\"\n text=\"Test connection\"\n [loading]=\"isTesting\"\n [disabled]=\"!canTest\"\n (clicked)=\"onTestClick()\">\n </cqa-button>\n </div>\n\n <div *ngIf=\"testResult\"\n class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-sm\"\n [ngClass]=\"testResult.status === 'success'\n ? 'cqa-bg-[#ECFDF5] cqa-text-[#065F46] cqa-border cqa-border-[#A7F3D0]'\n : 'cqa-bg-[#FEF2F2] cqa-text-[#991B1B] cqa-border cqa-border-[#FECACA]'\">\n <mat-icon class=\"!cqa-w-[18px] !cqa-h-[18px] !cqa-text-[18px]\">\n {{ testResult.status === 'success' ? 'check_circle' : 'error' }}\n </mat-icon>\n <span>{{ testResult.message }}</span>\n </div>\n </div>\n\n <!-- Encryption notice -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#EEF2FF] cqa-border cqa-border-[#C7D2FE] cqa-text-xs cqa-text-[#3730A3]\">\n <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">lock</mat-icon>\n <span>Credentials are encrypted at rest and masked in the audit log.</span>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { kind: "component", type: i4.DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { kind: "component", type: i5.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "readonly", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
251
251
|
}
|
|
252
252
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewDbConfigDialogComponent, decorators: [{
|
|
253
253
|
type: Component,
|
|
@@ -106,7 +106,7 @@ export class NewEnvironmentDialogComponent {
|
|
|
106
106
|
return existing.includes(lowered);
|
|
107
107
|
}
|
|
108
108
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewEnvironmentDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
109
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NewEnvironmentDialogComponent, selector: "cqa-new-environment-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", allowDefaultToggle: "allowDefaultToggle", defaultAlreadySet: "defaultAlreadySet" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Environment name\"\n placeholder=\"e.g. QA, SIT, UAT, Prod, Demo\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names are user-defined. Be concise \u2014 you'll see this on every test run.\n </span>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Description\"\n placeholder=\"What is this environment for?\"\n type=\"text\"\n [value]=\"description\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Accent color -->\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-2 cqa-font-medium cqa-text-gray-700\">Accent color</label>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button\n *ngFor=\"let swatch of colors\"\n type=\"button\"\n class=\"cqa-w-7 cqa-h-7 cqa-rounded-lg cqa-cursor-pointer cqa-transition-all\"\n [attr.aria-label]=\"'Select ' + swatch\"\n [attr.aria-pressed]=\"color === swatch\"\n [style.background]=\"swatch\"\n [style.border]=\"color === swatch ? '2px solid #0F172A' : '2px solid transparent'\"\n [style.boxShadow]=\"color === swatch ? '0 0 0 2px rgba(15,23,42,0.12)' : '0 0 0 1px rgba(0,0,0,0.05)'\"\n (click)=\"onColorSelect(swatch)\">\n </button>\n </div>\n </div>\n\n <!-- Make default -->\n <div\n *ngIf=\"allowDefaultToggle\"\n class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-p-3 cqa-rounded-lg cqa-border cqa-border-indigo-100 cqa-bg-indigo-50\">\n <cqa-custom-toggle\n [checked]=\"isDefault\"\n ariaLabel=\"Make default environment\"\n (checkedChange)=\"onDefaultChange($event)\">\n </cqa-custom-toggle>\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\">\n <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">\n Make this the default environment\n </span>\n <span class=\"cqa-text-xs cqa-text-gray-600 cqa-mt-0.5\">\n {{ defaultHelperText }}\n </span>\n </div>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { kind: "component", type: i3.CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
109
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NewEnvironmentDialogComponent, selector: "cqa-new-environment-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", allowDefaultToggle: "allowDefaultToggle", defaultAlreadySet: "defaultAlreadySet" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Environment name\"\n placeholder=\"e.g. QA, SIT, UAT, Prod, Demo\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names are user-defined. Be concise \u2014 you'll see this on every test run.\n </span>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Description\"\n placeholder=\"What is this environment for?\"\n type=\"text\"\n [value]=\"description\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Accent color -->\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-2 cqa-font-medium cqa-text-gray-700\">Accent color</label>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button\n *ngFor=\"let swatch of colors\"\n type=\"button\"\n class=\"cqa-w-7 cqa-h-7 cqa-rounded-lg cqa-cursor-pointer cqa-transition-all\"\n [attr.aria-label]=\"'Select ' + swatch\"\n [attr.aria-pressed]=\"color === swatch\"\n [style.background]=\"swatch\"\n [style.border]=\"color === swatch ? '2px solid #0F172A' : '2px solid transparent'\"\n [style.boxShadow]=\"color === swatch ? '0 0 0 2px rgba(15,23,42,0.12)' : '0 0 0 1px rgba(0,0,0,0.05)'\"\n (click)=\"onColorSelect(swatch)\">\n </button>\n </div>\n </div>\n\n <!-- Make default -->\n <div\n *ngIf=\"allowDefaultToggle\"\n class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-p-3 cqa-rounded-lg cqa-border cqa-border-indigo-100 cqa-bg-indigo-50\">\n <cqa-custom-toggle\n [checked]=\"isDefault\"\n ariaLabel=\"Make default environment\"\n (checkedChange)=\"onDefaultChange($event)\">\n </cqa-custom-toggle>\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\">\n <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">\n Make this the default environment\n </span>\n <span class=\"cqa-text-xs cqa-text-gray-600 cqa-mt-0.5\">\n {{ defaultHelperText }}\n </span>\n </div>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "readonly", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { kind: "component", type: i3.CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
110
110
|
}
|
|
111
111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewEnvironmentDialogComponent, decorators: [{
|
|
112
112
|
type: Component,
|
package/esm2022/lib/new-environment-variable-dialog/new-environment-variable-dialog.component.mjs
CHANGED
|
@@ -175,7 +175,7 @@ export class NewEnvironmentVariableDialogComponent {
|
|
|
175
175
|
return !Number.isNaN(Number(trimmed));
|
|
176
176
|
}
|
|
177
177
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewEnvironmentVariableDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
178
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NewEnvironmentVariableDialogComponent, selector: "cqa-new-environment-variable-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", envName: "envName" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. order_id\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n {{ nameHelperText }}\n </span>\n </div>\n\n <!-- Type + Permission -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n <span class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">{{ permissionHelperText }}</span>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : 'text'\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { kind: "component", type: i3.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { kind: "component", type: i4.PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
178
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NewEnvironmentVariableDialogComponent, selector: "cqa-new-environment-variable-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", envName: "envName" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. order_id\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n {{ nameHelperText }}\n </span>\n </div>\n\n <!-- Type + Permission -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n <span class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">{{ permissionHelperText }}</span>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : 'text'\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { kind: "component", type: i3.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "readonly", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { kind: "component", type: i4.PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
179
179
|
}
|
|
180
180
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewEnvironmentVariableDialogComponent, decorators: [{
|
|
181
181
|
type: Component,
|
|
@@ -191,7 +191,7 @@ export class NewGlobalVariableDialogComponent {
|
|
|
191
191
|
return !Number.isNaN(Number(trimmed));
|
|
192
192
|
}
|
|
193
193
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewGlobalVariableDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
194
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NewGlobalVariableDialogComponent, selector: "cqa-new-global-variable-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. ihg_api_key\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names must be unique across the entire workspace (primary key \u2014 no duplicates).\n </span>\n </div>\n\n <!-- Type + Permission row -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : 'text'\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-textarea\n label=\"Description\"\n placeholder=\"What is this variable used for?\"\n [value]=\"description\"\n [rows]=\"2\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-textarea>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { kind: "component", type: i3.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { kind: "component", 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"] }, { kind: "component", type: i5.PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
194
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NewGlobalVariableDialogComponent, selector: "cqa-new-global-variable-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. ihg_api_key\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names must be unique across the entire workspace (primary key \u2014 no duplicates).\n </span>\n </div>\n\n <!-- Type + Permission row -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : 'text'\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-textarea\n label=\"Description\"\n placeholder=\"What is this variable used for?\"\n [value]=\"description\"\n [rows]=\"2\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-textarea>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { kind: "component", type: i3.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "readonly", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { kind: "component", 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"] }, { kind: "component", type: i5.PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
195
195
|
}
|
|
196
196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewGlobalVariableDialogComponent, decorators: [{
|
|
197
197
|
type: Component,
|
|
@@ -171,7 +171,7 @@ export class NewTestDataProfileDialogComponent {
|
|
|
171
171
|
return existing.includes(lowered);
|
|
172
172
|
}
|
|
173
173
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewTestDataProfileDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
174
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NewTestDataProfileDialogComponent, selector: "cqa-new-test-data-profile-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", environments: "environments", lockedColumns: "lockedColumns" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name + Permission -->\n <div class=\"cqa-grid cqa-grid-cols-[1fr_auto] cqa-gap-4 cqa-items-start\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Profile name\"\n placeholder=\"e.g. Guest Personas\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Description\"\n placeholder=\"What data is this profile for?\"\n type=\"text\"\n [value]=\"description\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Columns -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">Columns</label>\n <div *ngFor=\"let col of columns; let i = index; trackBy: trackByIndex\"\n class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-custom-input\n [value]=\"col\"\n [placeholder]=\"'column_' + (i + 1)\"\n [fullWidth]=\"true\"\n [disabled]=\"isColumnLocked(col)\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onColumnChange(i, $event)\">\n </cqa-custom-input>\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"delete\"\n tooltip=\"Remove column\"\n [disabled]=\"columns.length <= 1 || isColumnLocked(col)\"\n (clicked)=\"onRemoveColumn(i)\">\n </cqa-button>\n </div>\n <div>\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"add\"\n text=\"Add column\"\n (clicked)=\"onAddColumn()\">\n </cqa-button>\n </div>\n <span *ngIf=\"columnsError\" class=\"cqa-text-xs cqa-text-red-600\">{{ columnsError }}</span>\n </div>\n\n <!-- Assign to environments -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n Assign to environments <span class=\"cqa-text-red-600\">*</span>\n </label>\n <cqa-dynamic-select\n [form]=\"envForm\"\n [config]=\"envConfig\">\n </cqa-dynamic-select>\n <span *ngIf=\"envsError\" class=\"cqa-text-xs cqa-text-red-600\">{{ envsError }}</span>\n <span *ngIf=\"!envsError\" class=\"cqa-text-xs cqa-text-gray-500\">\n Each environment gets an independent copy of the data (same columns, separate rows).\n </span>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { kind: "component", type: i3.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { kind: "component", type: i4.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { kind: "component", type: i5.PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
174
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NewTestDataProfileDialogComponent, selector: "cqa-new-test-data-profile-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", environments: "environments", lockedColumns: "lockedColumns" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name + Permission -->\n <div class=\"cqa-grid cqa-grid-cols-[1fr_auto] cqa-gap-4 cqa-items-start\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Profile name\"\n placeholder=\"e.g. Guest Personas\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Description\"\n placeholder=\"What data is this profile for?\"\n type=\"text\"\n [value]=\"description\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Columns -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">Columns</label>\n <div *ngFor=\"let col of columns; let i = index; trackBy: trackByIndex\"\n class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-custom-input\n [value]=\"col\"\n [placeholder]=\"'column_' + (i + 1)\"\n [fullWidth]=\"true\"\n [disabled]=\"isColumnLocked(col)\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onColumnChange(i, $event)\">\n </cqa-custom-input>\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"delete\"\n tooltip=\"Remove column\"\n [disabled]=\"columns.length <= 1 || isColumnLocked(col)\"\n (clicked)=\"onRemoveColumn(i)\">\n </cqa-button>\n </div>\n <div>\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"add\"\n text=\"Add column\"\n (clicked)=\"onAddColumn()\">\n </cqa-button>\n </div>\n <span *ngIf=\"columnsError\" class=\"cqa-text-xs cqa-text-red-600\">{{ columnsError }}</span>\n </div>\n\n <!-- Assign to environments -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n Assign to environments <span class=\"cqa-text-red-600\">*</span>\n </label>\n <cqa-dynamic-select\n [form]=\"envForm\"\n [config]=\"envConfig\">\n </cqa-dynamic-select>\n <span *ngIf=\"envsError\" class=\"cqa-text-xs cqa-text-red-600\">{{ envsError }}</span>\n <span *ngIf=\"!envsError\" class=\"cqa-text-xs cqa-text-gray-500\">\n Each environment gets an independent copy of the data (same columns, separate rows).\n </span>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { kind: "component", type: i3.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { kind: "component", type: i4.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "readonly", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { kind: "component", type: i5.PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
175
175
|
}
|
|
176
176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NewTestDataProfileDialogComponent, decorators: [{
|
|
177
177
|
type: Component,
|
|
@@ -84,7 +84,7 @@ export class QuestionnaireListComponent {
|
|
|
84
84
|
return item.id;
|
|
85
85
|
}
|
|
86
86
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QuestionnaireListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
87
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "pageSizeDropdownContainer", first: true, predicate: ["pageSizeDropdownContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <div class=\"cqa-px-6 cqa-py-3\">\n <!-- Question rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n </div>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"cqa-w-full\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: aligned with table pagination design -->\n <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n <span class=\"rows-label\">Questions per page</span>\n <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n (click)=\"togglePageSizeMenu()\"\n [attr.aria-expanded]=\"pageSizeOpen\"\n aria-haspopup=\"listbox\"\n aria-label=\"Questions per page\"\n >\n {{ pageSize }}\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n </button>\n <div\n *ngIf=\"pageSizeOpen\"\n class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n >\n <button\n *ngFor=\"let opt of pageSizeOptions\"\n type=\"button\"\n class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n [attr.id]=\"'question-pagesize-' + opt\"\n role=\"option\"\n [attr.aria-selected]=\"pageSize === opt\"\n (click)=\"selectPageSize(opt)\"\n >\n {{ opt }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n <div class=\"pagination-range\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </div>\n <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }] });
|
|
87
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "pageSizeDropdownContainer", first: true, predicate: ["pageSizeDropdownContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <div class=\"cqa-px-6 cqa-py-3\">\n <!-- Question rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n </div>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"cqa-w-full\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: aligned with table pagination design -->\n <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n <span class=\"rows-label\">Questions per page</span>\n <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n (click)=\"togglePageSizeMenu()\"\n [attr.aria-expanded]=\"pageSizeOpen\"\n aria-haspopup=\"listbox\"\n aria-label=\"Questions per page\"\n >\n {{ pageSize }}\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n </button>\n <div\n *ngIf=\"pageSizeOpen\"\n class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n >\n <button\n *ngFor=\"let opt of pageSizeOptions\"\n type=\"button\"\n class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n [attr.id]=\"'question-pagesize-' + opt\"\n role=\"option\"\n [attr.aria-selected]=\"pageSize === opt\"\n (click)=\"selectPageSize(opt)\"\n >\n {{ opt }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n <div class=\"pagination-range\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </div>\n <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "readonly", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }] });
|
|
88
88
|
}
|
|
89
89
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QuestionnaireListComponent, decorators: [{
|
|
90
90
|
type: Component,
|
package/esm2022/lib/step-builder/advanced-variables-form/advanced-variables-form.component.mjs
CHANGED
|
@@ -155,7 +155,7 @@ export class AdvancedVariablesFormComponent {
|
|
|
155
155
|
return control || index;
|
|
156
156
|
}
|
|
157
157
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdvancedVariablesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
158
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: { advancedVariables: "advancedVariables", advancedVariableForm: "advancedVariableForm" }, outputs: { variableBooleanChange: "variableBooleanChange", variableValueChange: "variableValueChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form cqa-mb-4\">\n <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"isBooleanType(variable)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n <mat-slide-toggle \n [checked]=\"getBooleanValue(variable, i)\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n </div>\n </ng-container>\n\n <!-- str_list variables with dynamic list -->\n <ng-container *ngIf=\"isStrListType(variable)\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-1\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <!-- Empty-state add button: no rows exist yet, so the usual per-row add icon isn't rendered.\n Placing the add button next to the label is the only way to get the first entry back. -->\n <div\n *ngIf=\"formArray.length === 0\"\n class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\"\n (click)=\"addStrListItem(variable, i)\">\n <mat-icon style=\"display: flex; align-items: center; justify-content: center; font-size: 20px;\">add</mat-icon>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n <cqa-custom-input\n [placeholder]=\"'Enter locator'\"\n [value]=\"control.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n </cqa-custom-input>\n <!-- Delete icon is always available so the user can remove ANY row, including the last one. -->\n <div class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n </div>\n <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</div>\n\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i4.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
158
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: { advancedVariables: "advancedVariables", advancedVariableForm: "advancedVariableForm" }, outputs: { variableBooleanChange: "variableBooleanChange", variableValueChange: "variableValueChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form cqa-mb-4\">\n <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"isBooleanType(variable)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n <mat-slide-toggle \n [checked]=\"getBooleanValue(variable, i)\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n </div>\n </ng-container>\n\n <!-- str_list variables with dynamic list -->\n <ng-container *ngIf=\"isStrListType(variable)\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-1\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <!-- Empty-state add button: no rows exist yet, so the usual per-row add icon isn't rendered.\n Placing the add button next to the label is the only way to get the first entry back. -->\n <div\n *ngIf=\"formArray.length === 0\"\n class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\"\n (click)=\"addStrListItem(variable, i)\">\n <mat-icon style=\"display: flex; align-items: center; justify-content: center; font-size: 20px;\">add</mat-icon>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n <cqa-custom-input\n [placeholder]=\"'Enter locator'\"\n [value]=\"control.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n </cqa-custom-input>\n <!-- Delete icon is always available so the user can remove ANY row, including the last one. -->\n <div class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n </div>\n <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</div>\n\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i4.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "readonly", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
159
159
|
}
|
|
160
160
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdvancedVariablesFormComponent, decorators: [{
|
|
161
161
|
type: Component,
|
|
@@ -436,7 +436,7 @@ export class StepBuilderAiAgentComponent {
|
|
|
436
436
|
}
|
|
437
437
|
}
|
|
438
438
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepBuilderAiAgentComponent, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
439
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode", isCreatingStep: "isCreatingStep", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full cqa-overflow-y-auto\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 \">\n <!-- What should the agent achieve? -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-ai-agent-textarea\"\n [placeholder]=\"'What should the agent achieve?'\"\n [value]=\"aiAgentForm.get('query')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [textareaInlineStyle]=\"'resize: vertical;max-height: 400px;'\"\n (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n Tip: Use numbered steps or bullet points for complex tasks.\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Type Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Environments Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Environments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2 \">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n\n <!-- Advanced Section -->\n <div class=\"cqa-mb-2\">\n <button\n 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-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\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 <!-- Continue on Error -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Don't fail the test if this step fails.\n </label>\n </div>\n </div> -->\n\n <!-- Disabled -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Skip this step during execution.\n </label>\n </div>\n </div> -->\n\n <!-- Retry Count -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Retry Count\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Iframe locator -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Iframe locator\n </label>\n <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Other Locators -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Other Locators\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n </cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!aiAgentForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { kind: "component", type: i5.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { kind: "component", type: i6.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { kind: "component", type: i7.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { kind: "component", type: i8.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"] }, { kind: "component", type: i9.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }] });
|
|
439
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode", isCreatingStep: "isCreatingStep", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full cqa-overflow-y-auto\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 \">\n <!-- What should the agent achieve? -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-ai-agent-textarea\"\n [placeholder]=\"'What should the agent achieve?'\"\n [value]=\"aiAgentForm.get('query')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [textareaInlineStyle]=\"'resize: vertical;max-height: 400px;'\"\n (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n Tip: Use numbered steps or bullet points for complex tasks.\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Type Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Environments Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Environments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2 \">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n\n <!-- Advanced Section -->\n <div class=\"cqa-mb-2\">\n <button\n 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-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\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 <!-- Continue on Error -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Don't fail the test if this step fails.\n </label>\n </div>\n </div> -->\n\n <!-- Disabled -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Skip this step during execution.\n </label>\n </div>\n </div> -->\n\n <!-- Retry Count -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Retry Count\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Iframe locator -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Iframe locator\n </label>\n <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Other Locators -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Other Locators\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n </cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!aiAgentForm.valid\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { kind: "component", type: i5.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { kind: "component", type: i6.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { kind: "component", type: i7.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "readonly", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { kind: "component", type: i8.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"] }, { kind: "component", type: i9.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }] });
|
|
440
440
|
}
|
|
441
441
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepBuilderAiAgentComponent, decorators: [{
|
|
442
442
|
type: Component,
|
package/esm2022/lib/step-builder/step-builder-custom-code/step-builder-custom-code.component.mjs
CHANGED
|
@@ -306,7 +306,7 @@ export class StepBuilderCustomCodeComponent {
|
|
|
306
306
|
}
|
|
307
307
|
}
|
|
308
308
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepBuilderCustomCodeComponent, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
309
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", initialCode: "initialCode", initialLanguage: "initialLanguage", initialMetadata: "initialMetadata", initialDescription: "initialDescription", isEditMode: "isEditMode", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Custom Code Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n \n\n <!-- Language Dropdown -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Editor -->\n <div class=\"cqa-mb-3\">\n <cqa-code-editor\n [label]=\"'Code'\"\n [required]=\"true\"\n [value]=\"customCodeForm.get('code')?.value\"\n [language]=\"customCodeForm.get('language')?.value || 'javascript'\"\n [minHeight]=\"'220px'\"\n [fullWidth]=\"true\"\n [errors]=\"codeFieldErrors\"\n (valueChange)=\"onCodeValueChange($event)\"\n (validationChange)=\"onCodeValidationChange($event)\"\n (blur)=\"customCodeForm.get('code')?.markAsTouched()\">\n </cqa-code-editor>\n </div>\n\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Section -->\n <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-template #defaultInput>\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\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 </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!customCodeForm.valid || hasCodeSyntaxErrors\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i5.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { kind: "component", type: i6.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { kind: "component", type: i7.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { kind: "component", type: i8.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { kind: "component", type: i9.CodeEditorComponent, selector: "cqa-code-editor", inputs: ["value", "language", "label", "required", "placeholder", "fullWidth", "ariaLabel", "minHeight", "readOnly", "errors", "useFallback"], outputs: ["valueChange", "validationChange", "blur"] }, { kind: "component", type: i10.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }] });
|
|
309
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", initialCode: "initialCode", initialLanguage: "initialLanguage", initialMetadata: "initialMetadata", initialDescription: "initialDescription", isEditMode: "isEditMode", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Custom Code Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n \n\n <!-- Language Dropdown -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Editor -->\n <div class=\"cqa-mb-3\">\n <cqa-code-editor\n [label]=\"'Code'\"\n [required]=\"true\"\n [value]=\"customCodeForm.get('code')?.value\"\n [language]=\"customCodeForm.get('language')?.value || 'javascript'\"\n [minHeight]=\"'220px'\"\n [fullWidth]=\"true\"\n [errors]=\"codeFieldErrors\"\n (valueChange)=\"onCodeValueChange($event)\"\n (validationChange)=\"onCodeValidationChange($event)\"\n (blur)=\"customCodeForm.get('code')?.markAsTouched()\">\n </cqa-code-editor>\n </div>\n\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Section -->\n <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-template #defaultInput>\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\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 </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!customCodeForm.valid || hasCodeSyntaxErrors\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i5.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { kind: "component", type: i6.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { kind: "component", type: i7.BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { kind: "component", type: i8.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "readonly", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { kind: "component", type: i9.CodeEditorComponent, selector: "cqa-code-editor", inputs: ["value", "language", "label", "required", "placeholder", "fullWidth", "ariaLabel", "minHeight", "readOnly", "errors", "useFallback"], outputs: ["valueChange", "validationChange", "blur"] }, { kind: "component", type: i10.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }] });
|
|
310
310
|
}
|
|
311
311
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepBuilderCustomCodeComponent, decorators: [{
|
|
312
312
|
type: Component,
|