@cqa-lib/cqa-ui 1.1.533 → 1.1.534

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

@@ -831,10 +831,10 @@ class SegmentControlComponent {
     }
 }
 SegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled", containerBgColor: "containerBgColor", fullWidth: "fullWidth", size: "size" }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.display": "this.hostDisplay", "style.width": "this.hostWidth" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-flex-row cqa-items-start cqa-bg-surface-light cqa-rounded-[8px]\"\n    [ngClass]=\"[\n      fullWidth ? 'cqa-flex' : 'cqa-inline-flex',\n      size === 'lg' ? 'cqa-h-[40px] cqa-p-[4px]' : 'cqa-h-[31.5px] cqa-p-[3.5px]'\n    ]\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n    <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n      [ngClass]=\"{\n        'cqa-flex-1 cqa-min-w-0': fullWidth,\n        'cqa-flex-none': !fullWidth,\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled,\n        'cqa-px-[16px] cqa-py-[6px] cqa-h-[32px]': size === 'lg',\n        'cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px]': size !== 'lg'\n      }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n      <span\n        class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n        \n      <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n        {{ segment?.icon }}\n      </mat-icon>\n\n      {{ segment.label }}\n\n      <span *ngIf=\"segment?.tooltip\"\n        style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n        [matTooltip]=\"segment.tooltip\"\n        matTooltipPosition=\"above\"\n        matTooltipShowDelay=\"0\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n      </span>\n    </span>\n  </button>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled", containerBgColor: "containerBgColor", fullWidth: "fullWidth", size: "size" }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.display": "this.hostDisplay", "style.width": "this.hostWidth" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-flex-row cqa-items-start cqa-bg-surface-light cqa-rounded-[8px]\"\n    [ngClass]=\"[\n      fullWidth ? 'cqa-flex' : 'cqa-inline-flex',\n      size === 'lg' ? 'cqa-h-[40px] cqa-p-[4px]' : 'cqa-h-[31.5px] cqa-p-[3.5px]'\n    ]\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n    <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n      [ngClass]=\"{\n        'cqa-flex-1 cqa-min-w-0': fullWidth,\n        'cqa-flex-none': !fullWidth,\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled,\n        'cqa-px-[16px] cqa-py-[6px] cqa-h-[32px]': size === 'lg',\n        'cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px]': size !== 'lg'\n      }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n      <span\n        class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n        \n      <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n        {{ segment?.icon }}\n      </mat-icon>\n\n      {{ segment.label }}\n\n      <span *ngIf=\"segment?.count != null\"\n        class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-ml-1 cqa-px-[6px] cqa-rounded-full cqa-text-[10px] cqa-leading-[14px] cqa-font-semibold cqa-min-w-[16px]\"\n        [ngClass]=\"isSelected(segment) ? 'cqa-bg-white cqa-text-[#3F43EE]' : 'cqa-bg-[#E5E7EB] cqa-text-[#475569]'\">\n        {{ segment.count }}\n      </span>\n\n      <span *ngIf=\"segment?.tooltip\"\n        style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n        [matTooltip]=\"segment.tooltip\"\n        matTooltipPosition=\"above\"\n        matTooltipShowDelay=\"0\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n      </span>\n    </span>\n  </button>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-segment-control', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-flex-row cqa-items-start cqa-bg-surface-light cqa-rounded-[8px]\"\n    [ngClass]=\"[\n      fullWidth ? 'cqa-flex' : 'cqa-inline-flex',\n      size === 'lg' ? 'cqa-h-[40px] cqa-p-[4px]' : 'cqa-h-[31.5px] cqa-p-[3.5px]'\n    ]\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n    <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n      [ngClass]=\"{\n        'cqa-flex-1 cqa-min-w-0': fullWidth,\n        'cqa-flex-none': !fullWidth,\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled,\n        'cqa-px-[16px] cqa-py-[6px] cqa-h-[32px]': size === 'lg',\n        'cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px]': size !== 'lg'\n      }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n      <span\n        class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n        \n      <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n        {{ segment?.icon }}\n      </mat-icon>\n\n      {{ segment.label }}\n\n      <span *ngIf=\"segment?.tooltip\"\n        style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n        [matTooltip]=\"segment.tooltip\"\n        matTooltipPosition=\"above\"\n        matTooltipShowDelay=\"0\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n      </span>\n    </span>\n  </button>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-segment-control', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-flex-row cqa-items-start cqa-bg-surface-light cqa-rounded-[8px]\"\n    [ngClass]=\"[\n      fullWidth ? 'cqa-flex' : 'cqa-inline-flex',\n      size === 'lg' ? 'cqa-h-[40px] cqa-p-[4px]' : 'cqa-h-[31.5px] cqa-p-[3.5px]'\n    ]\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n    <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n      [ngClass]=\"{\n        'cqa-flex-1 cqa-min-w-0': fullWidth,\n        'cqa-flex-none': !fullWidth,\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled,\n        'cqa-px-[16px] cqa-py-[6px] cqa-h-[32px]': size === 'lg',\n        'cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px]': size !== 'lg'\n      }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n      <span\n        class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n        \n      <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n        {{ segment?.icon }}\n      </mat-icon>\n\n      {{ segment.label }}\n\n      <span *ngIf=\"segment?.count != null\"\n        class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-ml-1 cqa-px-[6px] cqa-rounded-full cqa-text-[10px] cqa-leading-[14px] cqa-font-semibold cqa-min-w-[16px]\"\n        [ngClass]=\"isSelected(segment) ? 'cqa-bg-white cqa-text-[#3F43EE]' : 'cqa-bg-[#E5E7EB] cqa-text-[#475569]'\">\n        {{ segment.count }}\n      </span>\n\n      <span *ngIf=\"segment?.tooltip\"\n        style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n        [matTooltip]=\"segment.tooltip\"\n        matTooltipPosition=\"above\"\n        matTooltipShowDelay=\"0\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n      </span>\n    </span>\n  </button>\n</div>", styles: [] }]
         }], propDecorators: { segments: [{
                 type: Input
             }], value: [{
@@ -50699,6 +50699,260 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
+class NewDbConfigDialogComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.mode = 'create';
+        this.existingNames = [];
+        this.envName = '';
+        this.driverOptions = [
+            { label: 'MySQL', value: 'MySQL' },
+            { label: 'Oracle', value: 'Oracle' },
+            { label: 'SQL Server', value: 'SQLServer' },
+            { label: 'Postgres', value: 'Postgres' },
+        ];
+        this.connectionName = '';
+        this.driver = 'MySQL';
+        this.host = '';
+        this.port = 3306;
+        this.database = '';
+        this.username = '';
+        this.password = '';
+        this.connectionNameError = null;
+        this.hostError = null;
+        this.portError = null;
+        this.databaseError = null;
+        this.isTesting = false;
+        this.testResult = null;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        if (this.initialValue) {
+            this.connectionName = this.initialValue.connectionName ?? '';
+            if (this.initialValue.driver) {
+                this.driver = this.initialValue.driver;
+            }
+            this.host = this.initialValue.host ?? '';
+            const initialPort = this.initialValue.port;
+            this.port = initialPort != null && !Number.isNaN(initialPort)
+                ? Number(initialPort)
+                : this.defaultPortForDriver(this.driver);
+            this.database = this.initialValue.database ?? '';
+            this.username = this.initialValue.username ?? '';
+            this.password = '';
+        }
+        else {
+            this.port = this.defaultPortForDriver(this.driver);
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // -------- Computed strings --------
+    get title() {
+        return this.mode === 'edit' ? 'Edit DB configuration' : 'New database configuration';
+    }
+    get subtitle() {
+        return this.envName
+            ? `Scoped to the ${this.envName} environment. Multiple configs can live in the same environment.`
+            : 'Multiple configs can live in the same environment.';
+    }
+    get primaryButtonLabel() {
+        return this.mode === 'edit' ? 'Save changes' : 'Add DB config';
+    }
+    get passwordPlaceholder() {
+        return this.mode === 'edit' ? '•••••• (leave blank to keep existing)' : 'Enter password';
+    }
+    get connectionNameErrorsArray() {
+        return this.connectionNameError ? [this.connectionNameError] : [];
+    }
+    get hostErrorsArray() {
+        return this.hostError ? [this.hostError] : [];
+    }
+    get portErrorsArray() {
+        return this.portError ? [this.portError] : [];
+    }
+    get databaseErrorsArray() {
+        return this.databaseError ? [this.databaseError] : [];
+    }
+    get canTest() {
+        return !!this.testFn && !this.isTesting;
+    }
+    // -------- Form handlers --------
+    onConnectionNameChange(value) {
+        this.connectionName = value;
+        this.connectionNameError = null;
+        this.testResult = null;
+        this.cdr.markForCheck();
+    }
+    onDriverChange(value) {
+        const next = value ?? 'MySQL';
+        const previousDefault = this.defaultPortForDriver(this.driver);
+        this.driver = next;
+        if (this.port == null || this.port === previousDefault) {
+            this.port = this.defaultPortForDriver(next);
+        }
+        this.testResult = null;
+        this.cdr.markForCheck();
+    }
+    onHostChange(value) {
+        this.host = value;
+        this.hostError = null;
+        this.testResult = null;
+        this.cdr.markForCheck();
+    }
+    onPortChange(value) {
+        if (value === '' || value == null) {
+            this.port = null;
+        }
+        else {
+            const n = Number(value);
+            this.port = Number.isFinite(n) ? n : null;
+        }
+        this.portError = null;
+        this.testResult = null;
+        this.cdr.markForCheck();
+    }
+    onDatabaseChange(value) {
+        this.database = value;
+        this.databaseError = null;
+        this.testResult = null;
+        this.cdr.markForCheck();
+    }
+    onUsernameChange(value) {
+        this.username = value;
+        this.testResult = null;
+        this.cdr.markForCheck();
+    }
+    onPasswordChange(value) {
+        this.password = value;
+        this.testResult = null;
+        this.cdr.markForCheck();
+    }
+    // -------- Test connection --------
+    onTestClick() {
+        if (!this.testFn) {
+            return;
+        }
+        const value = this.captureForm();
+        if (!value) {
+            return;
+        }
+        this.isTesting = true;
+        this.testResult = null;
+        this.cdr.markForCheck();
+        this.testFn(value).pipe(takeUntil(this.destroy$)).subscribe({
+            next: (result) => {
+                this.isTesting = false;
+                this.testResult = result || { status: 'failure', message: 'Connection test failed' };
+                this.cdr.markForCheck();
+            },
+            error: (err) => {
+                this.isTesting = false;
+                const message = err?.error?.message || err?.message || 'Connection test failed';
+                this.testResult = { status: 'failure', message };
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    // -------- Save (called by host dialog) --------
+    /**
+     * Returns the validated form value, or null if validation fails (inline
+     * errors are populated and the dialog stays open).
+     */
+    getValue() {
+        return this.captureForm();
+    }
+    // -------- Internals --------
+    captureForm() {
+        let hasError = false;
+        const trimmedName = this.connectionName.trim();
+        if (!trimmedName) {
+            this.connectionNameError = 'Connection name is required.';
+            hasError = true;
+        }
+        else if (this.isDuplicateName(trimmedName)) {
+            this.connectionNameError = 'A connection with this name already exists in this environment.';
+            hasError = true;
+        }
+        else {
+            this.connectionNameError = null;
+        }
+        const trimmedHost = this.host.trim();
+        if (!trimmedHost) {
+            this.hostError = 'Host is required.';
+            hasError = true;
+        }
+        else {
+            this.hostError = null;
+        }
+        if (this.port == null || !Number.isFinite(this.port) || this.port <= 0 || this.port > 65535) {
+            this.portError = 'Port must be a number between 1 and 65535.';
+            hasError = true;
+        }
+        else {
+            this.portError = null;
+        }
+        const trimmedDatabase = this.database.trim();
+        if (!trimmedDatabase) {
+            this.databaseError = 'Database name is required.';
+            hasError = true;
+        }
+        else {
+            this.databaseError = null;
+        }
+        if (hasError) {
+            this.cdr.markForCheck();
+            return null;
+        }
+        return {
+            connectionName: trimmedName,
+            driver: this.driver,
+            host: trimmedHost,
+            port: this.port,
+            database: trimmedDatabase,
+            username: this.username,
+            password: this.password,
+        };
+    }
+    isDuplicateName(name) {
+        const lower = name.toLowerCase();
+        let pool = (this.existingNames || []).map(n => String(n || '').trim().toLowerCase());
+        if (this.mode === 'edit' && this.initialValue?.connectionName) {
+            const original = this.initialValue.connectionName.trim().toLowerCase();
+            pool = pool.filter(n => n !== original);
+        }
+        return pool.includes(lower);
+    }
+    defaultPortForDriver(driver) {
+        switch (driver) {
+            case 'Postgres': return 5432;
+            case 'Oracle': return 1521;
+            case 'SQLServer':
+            case 'MSSQL': return 1433;
+            case 'MySQL':
+            default: return 3306;
+        }
+    }
+}
+NewDbConfigDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewDbConfigDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NewDbConfigDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewDbConfigDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-new-db-config-dialog', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root', style: 'display:block;width:100%;' }, 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" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { mode: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
+            }], existingNames: [{
+                type: Input
+            }], envName: [{
+                type: Input
+            }], testFn: [{
+                type: Input
+            }] } });
+
 class NewTestDataProfileDialogComponent {
     constructor(cdr) {
         this.cdr = cdr;
@@ -51424,6 +51678,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         NewGlobalVariableDialogComponent,
         NewEnvironmentDialogComponent,
         NewEnvironmentVariableDialogComponent,
+        NewDbConfigDialogComponent,
         NewTestDataProfileDialogComponent,
         ManageColumnsDialogComponent,
         AuditLogDrawerComponent,
@@ -51617,6 +51872,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         NewGlobalVariableDialogComponent,
         NewEnvironmentDialogComponent,
         NewEnvironmentVariableDialogComponent,
+        NewDbConfigDialogComponent,
         NewTestDataProfileDialogComponent,
         ManageColumnsDialogComponent,
         AuditLogDrawerComponent,
@@ -51855,6 +52111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         NewGlobalVariableDialogComponent,
                         NewEnvironmentDialogComponent,
                         NewEnvironmentVariableDialogComponent,
+                        NewDbConfigDialogComponent,
                         NewTestDataProfileDialogComponent,
                         ManageColumnsDialogComponent,
                         AuditLogDrawerComponent,
@@ -52054,6 +52311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         NewGlobalVariableDialogComponent,
                         NewEnvironmentDialogComponent,
                         NewEnvironmentVariableDialogComponent,
+                        NewDbConfigDialogComponent,
                         NewTestDataProfileDialogComponent,
                         ManageColumnsDialogComponent,
                         AuditLogDrawerComponent,
@@ -52836,5 +53094,5 @@ function buildTestCaseDetailsFromApi(data, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, ALL_FILTER_VALUE, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, AuditLogDrawerComponent, AuditLogDrawerService, AuditLogEntryCardComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, CaptureVideoDialogComponent, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_FOLDER_COLOR, DEFAULT_METADATA_COLOR, DEFAULT_MODULAR_CONFIG, DEFAULT_MODULAR_LABELS, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_REORDER_LABELS, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteFolderDialogComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ENVIRONMENT_ACCENT_COLORS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FOLDER_DRAG_MIME, FOLDER_NAME_MAX_LENGTH, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FolderDragDirective, FolderDropDirective, FolderSidebarComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, ManageColumnsDialogComponent, MetricsCardComponent, MixedVariableInputComponent, ModularTableTemplateComponent, MoveToFolderDialogComponent, NetworkRequestComponent, NewEnvironmentDialogComponent, NewEnvironmentVariableDialogComponent, NewFolderDialogComponent, NewGlobalVariableDialogComponent, NewTestDataProfileDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, ROW_DRAG_MIME, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RowDragDirective, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLinkCellComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewCompareButtonComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
+export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, ALL_FILTER_VALUE, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, AuditLogDrawerComponent, AuditLogDrawerService, AuditLogEntryCardComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, CaptureVideoDialogComponent, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_FOLDER_COLOR, DEFAULT_METADATA_COLOR, DEFAULT_MODULAR_CONFIG, DEFAULT_MODULAR_LABELS, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_REORDER_LABELS, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteFolderDialogComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ENVIRONMENT_ACCENT_COLORS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FOLDER_DRAG_MIME, FOLDER_NAME_MAX_LENGTH, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FolderDragDirective, FolderDropDirective, FolderSidebarComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, ManageColumnsDialogComponent, MetricsCardComponent, MixedVariableInputComponent, ModularTableTemplateComponent, MoveToFolderDialogComponent, NetworkRequestComponent, NewDbConfigDialogComponent, NewEnvironmentDialogComponent, NewEnvironmentVariableDialogComponent, NewFolderDialogComponent, NewGlobalVariableDialogComponent, NewTestDataProfileDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, ROW_DRAG_MIME, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RowDragDirective, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLinkCellComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewCompareButtonComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map