@cqa-lib/cqa-ui 1.1.522 → 1.1.524

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

@@ -46879,6 +46879,646 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
+const ENVIRONMENT_ACCENT_COLORS = [
+    '#3F43EE',
+    '#A855F7',
+    '#00A63E',
+    '#F59E0B',
+    '#0EA5E9',
+    '#EC4899',
+];
+
+class NewEnvironmentDialogComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.mode = 'create';
+        this.existingNames = [];
+        this.allowDefaultToggle = true;
+        this.defaultAlreadySet = false;
+        this.colors = ENVIRONMENT_ACCENT_COLORS;
+        this.name = '';
+        this.description = '';
+        this.color = ENVIRONMENT_ACCENT_COLORS[0];
+        this.isDefault = false;
+        this.nameError = null;
+    }
+    ngOnInit() {
+        if (this.initialValue) {
+            this.name = this.initialValue.name ?? '';
+            this.description = this.initialValue.description ?? '';
+            this.color = this.initialValue.color || ENVIRONMENT_ACCENT_COLORS[0];
+            this.isDefault = this.initialValue.isDefault ?? false;
+        }
+    }
+    get title() {
+        return this.mode === 'edit' ? 'Edit environment' : 'New environment';
+    }
+    get subtitle() {
+        return 'Create an environment to scope variables, DB configs, and data profiles.';
+    }
+    get primaryButtonLabel() {
+        return this.mode === 'edit' ? 'Save changes' : 'Create environment';
+    }
+    get nameErrorsArray() {
+        return this.nameError ? [this.nameError] : [];
+    }
+    get defaultHelperText() {
+        if (!this.allowDefaultToggle) {
+            return 'Default promotion is handled from the environment detail page.';
+        }
+        if (this.defaultAlreadySet && !this.isDefault) {
+            return 'Another environment is currently the default. Toggling this on will demote it.';
+        }
+        return 'Test cases without an explicit env selected will resolve against this one.';
+    }
+    onNameChange(next) {
+        this.name = next;
+        this.nameError = null;
+        this.cdr.markForCheck();
+    }
+    onDescriptionChange(next) {
+        this.description = next;
+        this.cdr.markForCheck();
+    }
+    onColorSelect(next) {
+        this.color = next;
+        this.cdr.markForCheck();
+    }
+    onDefaultChange(next) {
+        this.isDefault = next;
+        this.cdr.markForCheck();
+    }
+    /**
+     * Called by the host (via DialogRef.getComponentInstance()) when the primary
+     * button is clicked. Returns the captured value when valid, or null when the
+     * form has errors — host should leave the dialog open.
+     */
+    getValue() {
+        const trimmedName = this.name.trim();
+        if (!trimmedName) {
+            this.nameError = 'Name is required.';
+        }
+        else if (trimmedName.length < 2) {
+            this.nameError = 'Name must be at least 2 characters.';
+        }
+        else if (this.isDuplicateName(trimmedName)) {
+            this.nameError = 'An environment with this name already exists — names must be unique.';
+        }
+        else {
+            this.nameError = null;
+        }
+        if (this.nameError) {
+            this.cdr.markForCheck();
+            return null;
+        }
+        return {
+            name: trimmedName,
+            description: this.description ? this.description.trim() : null,
+            color: this.color,
+            isDefault: this.allowDefaultToggle ? this.isDefault : false,
+        };
+    }
+    isDuplicateName(candidate) {
+        const existing = (this.existingNames ?? []).map(n => (n ?? '').trim().toLowerCase());
+        const lowered = candidate.toLowerCase();
+        if (this.mode === 'edit') {
+            const original = (this.initialValue?.name ?? '').trim().toLowerCase();
+            return lowered !== original && existing.includes(lowered);
+        }
+        return existing.includes(lowered);
+    }
+}
+NewEnvironmentDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewEnvironmentDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NewEnvironmentDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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", 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: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewEnvironmentDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-new-environment-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  <!-- 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" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { mode: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
+            }], existingNames: [{
+                type: Input
+            }], allowDefaultToggle: [{
+                type: Input
+            }], defaultAlreadySet: [{
+                type: Input
+            }] } });
+
+class NewEnvironmentVariableDialogComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.mode = 'create';
+        this.existingNames = [];
+        this.envName = '';
+        this.typeDropdownOptions = [
+            { label: 'String', value: 'String' },
+            { label: 'Number', value: 'Number' },
+            { label: 'Boolean', value: 'Boolean' },
+            { label: 'Password', value: 'Password' },
+        ];
+        this.name = '';
+        this.type = 'String';
+        this.value = '';
+        this.readWriteMode = 'RW';
+        this.passwordTouched = false;
+        this.nameError = null;
+        this.valueError = null;
+    }
+    ngOnInit() {
+        if (this.initialValue) {
+            this.name = this.initialValue.name ?? '';
+            this.type = this.initialValue.type ?? 'String';
+            this.value = this.initialValue.value ?? '';
+            this.readWriteMode = this.initialValue.readWriteMode ?? 'RW';
+        }
+        if (this.type === 'Boolean' && this.value !== 'true' && this.value !== 'false') {
+            this.value = 'false';
+        }
+        if (this.mode === 'edit' && this.type === 'Password') {
+            this.value = '';
+        }
+    }
+    get title() {
+        return this.mode === 'edit' ? 'Edit variable' : 'New variable';
+    }
+    get subtitle() {
+        return this.envName ? `Scoped to the ${this.envName} environment.` : 'Scoped to this environment.';
+    }
+    get primaryButtonLabel() {
+        return this.mode === 'edit' ? 'Save changes' : 'Add variable';
+    }
+    get isBoolean() { return this.type === 'Boolean'; }
+    get isPassword() { return this.type === 'Password'; }
+    get isNumber() { return this.type === 'Number'; }
+    get valuePlaceholder() {
+        if (this.isPassword && this.mode === 'edit') {
+            return '•••••• (leave blank to keep existing)';
+        }
+        if (this.readWriteMode === 'RW') {
+            return 'Leave blank to populate during test execution';
+        }
+        return 'Enter a value';
+    }
+    get nameHelperText() {
+        if (this.nameError) {
+            return this.nameError;
+        }
+        return 'Variable names must be unique within the environment.';
+    }
+    get permissionHelperText() {
+        return this.readWriteMode === 'RO'
+            ? 'Read only — test steps can read but not overwrite.'
+            : 'Read/write — test cases can capture values here.';
+    }
+    get nameErrorsArray() { return this.nameError ? [this.nameError] : []; }
+    get valueErrorsArray() { return this.valueError ? [this.valueError] : []; }
+    get booleanDropdownOptions() {
+        return [
+            { label: 'true', value: 'true' },
+            { label: 'false', value: 'false' },
+        ];
+    }
+    onNameChange(next) {
+        this.name = next;
+        this.nameError = null;
+        this.cdr.markForCheck();
+    }
+    onTypeChange(next) {
+        if (!next) {
+            return;
+        }
+        this.type = next;
+        if (this.type === 'Boolean' && this.value !== 'true' && this.value !== 'false') {
+            this.value = 'false';
+        }
+        if (this.type === 'Password') {
+            this.passwordTouched = false;
+            if (this.mode === 'edit') {
+                this.value = '';
+            }
+        }
+        this.valueError = null;
+        this.cdr.markForCheck();
+    }
+    onPermissionChange(next) {
+        this.readWriteMode = next === 'RO' ? 'RO' : 'RW';
+        this.cdr.markForCheck();
+    }
+    onValueChange(next) {
+        this.value = next;
+        if (this.isPassword) {
+            this.passwordTouched = true;
+        }
+        this.valueError = null;
+        this.cdr.markForCheck();
+    }
+    onBooleanValueChange(next) {
+        this.value = next;
+        this.cdr.markForCheck();
+    }
+    /**
+     * Host reads via DialogRef.getComponentInstance(). Returns null on validation
+     * failure — host keeps the dialog open and surfaces the inline error already
+     * written onto nameError / valueError.
+     */
+    getValue() {
+        const trimmedName = this.name.trim();
+        if (!trimmedName) {
+            this.nameError = 'Name is required.';
+        }
+        else if (this.isDuplicateName(trimmedName)) {
+            this.nameError = 'A variable with this name already exists in this environment.';
+        }
+        else {
+            this.nameError = null;
+        }
+        if (this.isNumber && this.value && !this.isValidNumber(this.value)) {
+            this.valueError = 'Value must be a number.';
+        }
+        else {
+            this.valueError = null;
+        }
+        if (this.nameError || this.valueError) {
+            this.cdr.markForCheck();
+            return null;
+        }
+        const omitPasswordValue = this.isPassword && this.mode === 'edit' && !this.passwordTouched;
+        return {
+            name: trimmedName,
+            type: this.type,
+            value: omitPasswordValue ? null : this.serializeValue(),
+            readWriteMode: this.readWriteMode,
+        };
+    }
+    serializeValue() {
+        if (this.isBoolean) {
+            return this.value === 'true' ? 'true' : 'false';
+        }
+        return this.value ?? '';
+    }
+    isDuplicateName(candidate) {
+        const existing = (this.existingNames ?? []).map(n => (n ?? '').trim().toLowerCase());
+        const lowered = candidate.toLowerCase();
+        if (this.mode === 'edit') {
+            const original = (this.initialValue?.name ?? '').trim().toLowerCase();
+            return lowered !== original && existing.includes(lowered);
+        }
+        return existing.includes(lowered);
+    }
+    isValidNumber(raw) {
+        const trimmed = raw.trim();
+        if (!trimmed) {
+            return true;
+        }
+        return !Number.isNaN(Number(trimmed));
+    }
+}
+NewEnvironmentVariableDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewEnvironmentVariableDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NewEnvironmentVariableDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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", 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: PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewEnvironmentVariableDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-new-environment-variable-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  <!-- 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" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { mode: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
+            }], existingNames: [{
+                type: Input
+            }], envName: [{
+                type: Input
+            }] } });
+
+class NewTestDataProfileDialogComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.mode = 'create';
+        this.existingNames = [];
+        this.environments = [];
+        this.lockedColumns = [];
+        this.name = '';
+        this.description = '';
+        this.readWriteMode = 'RW';
+        this.columns = ['col_1'];
+        this.envForm = new FormGroup({
+            environmentIds: new FormControl([]),
+        });
+        this.envConfig = this.buildEnvConfig([]);
+        this.nameError = null;
+        this.columnsError = null;
+        this.envsError = null;
+        this.trackByIndex = (_, __) => _;
+    }
+    ngOnInit() {
+        if (this.initialValue) {
+            this.name = this.initialValue.name ?? '';
+            this.description = this.initialValue.description ?? '';
+            this.readWriteMode = this.initialValue.readWriteMode ?? 'RW';
+            this.columns = (this.initialValue.columns && this.initialValue.columns.length)
+                ? [...this.initialValue.columns]
+                : ['col_1'];
+            const ids = this.initialValue.environmentIds ?? [];
+            this.envForm.get('environmentIds').setValue(ids);
+        }
+        this.envConfig = this.buildEnvConfig(this.environments ?? []);
+        // Clear envs error as soon as the user picks something.
+        this.envForm.get('environmentIds').valueChanges.subscribe(() => {
+            if (this.envsError) {
+                this.envsError = null;
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    get title() {
+        return this.mode === 'edit' ? 'Edit test data profile' : 'New test data profile';
+    }
+    get subtitle() {
+        return 'Define columns; data values can be added per environment after creation.';
+    }
+    get primaryButtonLabel() {
+        return this.mode === 'edit' ? 'Save changes' : 'Create profile';
+    }
+    get nameErrorsArray() { return this.nameError ? [this.nameError] : []; }
+    get canAddColumn() { return true; }
+    get selectedEnvIds() {
+        const val = this.envForm.get('environmentIds').value ?? [];
+        return Array.isArray(val) ? val : [];
+    }
+    onNameChange(next) {
+        this.name = next;
+        this.nameError = null;
+        this.cdr.markForCheck();
+    }
+    onDescriptionChange(next) {
+        this.description = next;
+        this.cdr.markForCheck();
+    }
+    onPermissionChange(next) {
+        this.readWriteMode = next === 'RO' ? 'RO' : 'RW';
+        this.cdr.markForCheck();
+    }
+    onColumnChange(index, value) {
+        const next = [...this.columns];
+        next[index] = value;
+        this.columns = next;
+        this.columnsError = null;
+        this.cdr.markForCheck();
+    }
+    onAddColumn() {
+        this.columns = [...this.columns, `col_${this.columns.length + 1}`];
+        this.cdr.markForCheck();
+    }
+    onRemoveColumn(index) {
+        if (this.columns.length <= 1) {
+            return;
+        }
+        const target = this.columns[index];
+        if (this.lockedColumns && this.lockedColumns.indexOf(target) !== -1) {
+            return;
+        }
+        this.columns = this.columns.filter((_, i) => i !== index);
+        this.cdr.markForCheck();
+    }
+    isColumnLocked(col) {
+        return !!(this.lockedColumns && this.lockedColumns.indexOf(col) !== -1);
+    }
+    getValue() {
+        const trimmedName = this.name.trim();
+        if (!trimmedName) {
+            this.nameError = 'Name is required.';
+        }
+        else if (this.isDuplicateName(trimmedName)) {
+            this.nameError = 'A profile with this name already exists.';
+        }
+        else {
+            this.nameError = null;
+        }
+        const trimmedCols = this.columns.map(c => (c ?? '').trim()).filter(c => c.length > 0);
+        const unique = new Set(trimmedCols);
+        if (trimmedCols.length === 0) {
+            this.columnsError = 'At least one column is required.';
+        }
+        else if (unique.size !== trimmedCols.length) {
+            this.columnsError = 'Column names must be unique.';
+        }
+        else {
+            this.columnsError = null;
+        }
+        const envIds = this.selectedEnvIds;
+        if (!envIds || envIds.length === 0) {
+            this.envsError = 'Select at least one environment to assign this profile to.';
+        }
+        else {
+            this.envsError = null;
+        }
+        if (this.nameError || this.columnsError || this.envsError) {
+            this.cdr.markForCheck();
+            return null;
+        }
+        return {
+            name: trimmedName,
+            description: this.description.trim() || null,
+            readWriteMode: this.readWriteMode,
+            columns: trimmedCols,
+            environmentIds: this.selectedEnvIds,
+        };
+    }
+    buildEnvConfig(envs) {
+        const options = (envs || []).map(e => ({
+            id: e.id,
+            value: e.id,
+            name: e.name,
+            label: e.name,
+            statusColor: e.color,
+        }));
+        return {
+            key: 'environmentIds',
+            label: '',
+            placeholder: 'Select environments…',
+            multiple: true,
+            searchable: true,
+            optionStyle: 'checkbox',
+            showSelectAll: false,
+            options,
+        };
+    }
+    isDuplicateName(candidate) {
+        const existing = (this.existingNames ?? []).map(n => (n ?? '').trim().toLowerCase());
+        const lowered = candidate.toLowerCase();
+        if (this.mode === 'edit') {
+            const original = (this.initialValue?.name ?? '').trim().toLowerCase();
+            return lowered !== original && existing.includes(lowered);
+        }
+        return existing.includes(lowered);
+    }
+}
+NewTestDataProfileDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewTestDataProfileDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NewTestDataProfileDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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", 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: PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewTestDataProfileDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-new-test-data-profile-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  <!-- 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" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { mode: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
+            }], existingNames: [{
+                type: Input
+            }], environments: [{
+                type: Input
+            }], lockedColumns: [{
+                type: Input
+            }] } });
+
+class AssignEnvironmentsDialogComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.mode = 'assign';
+        this.profileName = '';
+        this.environments = [];
+        this.assignedEnvironments = [];
+        this.selected = new Set();
+        this.sourceForm = new FormGroup({
+            sourceEnvId: new FormControl(null),
+        });
+        this.sourceConfig = this.buildSourceConfig([]);
+        this.sourceError = null;
+    }
+    ngOnInit() {
+        // Source picker appears in both modes when there are already-attached envs
+        // to copy from. In clone mode it's required; in assign mode it's optional
+        // (falling back to the base profile rows when no source is picked).
+        if (this.showSourcePicker) {
+            const initial = this.defaultSourceEnvId != null
+                ? this.defaultSourceEnvId
+                : (this.mode === 'clone' && this.assignedEnvironments && this.assignedEnvironments.length
+                    ? this.assignedEnvironments[0].id
+                    : null);
+            this.sourceForm.get('sourceEnvId').setValue(initial);
+            this.sourceConfig = this.buildSourceConfig(this.assignedEnvironments ?? []);
+        }
+    }
+    get showSourcePicker() {
+        return (this.assignedEnvironments && this.assignedEnvironments.length > 0);
+    }
+    get sourceLabel() {
+        return this.mode === 'clone' ? 'Copy from which environment' : 'Copy rows from (optional)';
+    }
+    get sourceHelper() {
+        if (this.sourceError) {
+            return this.sourceError;
+        }
+        return this.mode === 'clone'
+            ? "The selected environment's rows will be copied into each target environment below."
+            : 'Pick an environment to copy its rows into the new ones. Leave blank to seed with the base profile rows.';
+    }
+    get title() {
+        return this.mode === 'clone' ? 'Clone to other environments' : 'Assign to environments';
+    }
+    get subtitle() {
+        const name = this.profileName ? `"${this.profileName}"` : 'this profile';
+        return this.mode === 'clone'
+            ? `Duplicate ${name} into other environments. Column structure is shared; row values are independent per environment.`
+            : `Make ${name} available in the selected environments. Columns are shared — each environment gets an independent row set.`;
+    }
+    get primaryButtonLabel() {
+        const count = this.selected.size;
+        const verb = this.mode === 'clone' ? 'Clone to' : 'Assign to';
+        return `${verb} ${count} environment${count === 1 ? '' : 's'}`;
+    }
+    get primaryDisabled() {
+        if (this.selected.size === 0) {
+            return true;
+        }
+        if (this.mode === 'clone' && this.sourceForm.get('sourceEnvId').value == null) {
+            return true;
+        }
+        return false;
+    }
+    get selectableEnvironments() {
+        return this.environments ?? [];
+    }
+    get hasAnySelectable() {
+        return (this.environments ?? []).some(e => !e.alreadyAssigned);
+    }
+    get sourceValue() {
+        return this.sourceForm.get('sourceEnvId').value ?? null;
+    }
+    isSelected(id) {
+        return this.selected.has(id);
+    }
+    toggle(env) {
+        if (env.alreadyAssigned) {
+            return;
+        }
+        if (this.selected.has(env.id)) {
+            this.selected.delete(env.id);
+        }
+        else {
+            this.selected.add(env.id);
+        }
+        this.cdr.markForCheck();
+    }
+    helperFor(env) {
+        if (env.alreadyAssigned) {
+            return 'Already assigned to this environment';
+        }
+        return env.description || '';
+    }
+    getValue() {
+        if (this.selected.size === 0) {
+            return null;
+        }
+        const src = this.sourceValue;
+        if (this.mode === 'clone') {
+            if (src == null) {
+                this.sourceError = 'Pick the environment whose rows should be copied.';
+                this.cdr.markForCheck();
+                return null;
+            }
+            this.sourceError = null;
+            return { selectedIds: Array.from(this.selected), sourceEnvId: Number(src) };
+        }
+        // Assign mode: source is optional — include it when the user picked one.
+        this.sourceError = null;
+        return src != null
+            ? { selectedIds: Array.from(this.selected), sourceEnvId: Number(src) }
+            : { selectedIds: Array.from(this.selected) };
+    }
+    buildSourceConfig(envs) {
+        const options = (envs || []).map(e => ({
+            id: e.id,
+            value: e.id,
+            name: e.name,
+            label: e.name,
+            statusColor: e.color,
+        }));
+        return {
+            key: 'sourceEnvId',
+            label: '',
+            placeholder: 'Select source environment…',
+            multiple: false,
+            searchable: true,
+            options,
+        };
+    }
+}
+AssignEnvironmentsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AssignEnvironmentsDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AssignEnvironmentsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AssignEnvironmentsDialogComponent, selector: "cqa-assign-environments-dialog", inputs: { mode: "mode", profileName: "profileName", environments: "environments", assignedEnvironments: "assignedEnvironments", defaultSourceEnvId: "defaultSourceEnvId" }, 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  <!-- Source env picker: required in clone mode, optional in assign mode -->\n  <div *ngIf=\"showSourcePicker\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">{{ sourceLabel }}</label>\n    <cqa-dynamic-select\n      [form]=\"sourceForm\"\n      [config]=\"sourceConfig\">\n    </cqa-dynamic-select>\n    <span [class.cqa-text-red-600]=\"sourceError\" [class.cqa-text-gray-500]=\"!sourceError\" class=\"cqa-text-xs\">\n      {{ sourceHelper }}\n    </span>\n  </div>\n\n  <!-- Selectable envs -->\n  <div\n    *ngIf=\"hasAnySelectable || (environments?.length || 0) > 0\"\n    class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[340px] cqa-overflow-y-auto\">\n    <label\n      *ngFor=\"let env of selectableEnvironments\"\n      class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-3 cqa-py-2.5 cqa-border cqa-rounded-[10px] cqa-bg-white cqa-transition-colors\"\n      [class.cqa-border-gray-200]=\"!isSelected(env.id) && !env.alreadyAssigned\"\n      [class.hover:cqa-border-indigo-200]=\"!env.alreadyAssigned && !isSelected(env.id)\"\n      [class.cqa-border-indigo-400]=\"isSelected(env.id)\"\n      [class.cqa-bg-indigo-50]=\"isSelected(env.id)\"\n      [class.cqa-opacity-50]=\"env.alreadyAssigned\"\n      [class.cqa-cursor-pointer]=\"!env.alreadyAssigned\"\n      [class.cqa-cursor-not-allowed]=\"env.alreadyAssigned\"\n      (click)=\"toggle(env)\">\n      <input\n        type=\"checkbox\"\n        class=\"cqa-w-4 cqa-h-4 cqa-cursor-pointer\"\n        [checked]=\"isSelected(env.id)\"\n        [disabled]=\"!!env.alreadyAssigned\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"toggle(env)\" />\n\n      <span\n        class=\"cqa-inline-block cqa-w-2 cqa-h-2 cqa-rounded-full cqa-flex-none\"\n        [style.background]=\"env.color || '#3F43EE'\"></span>\n\n      <div class=\"cqa-flex cqa-flex-col cqa-min-w-0 cqa-flex-1\">\n        <div class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">{{ env.name }}</div>\n        <div *ngIf=\"helperFor(env)\" class=\"cqa-text-xs cqa-text-gray-500 cqa-leading-[1.4]\">{{ helperFor(env) }}</div>\n      </div>\n    </label>\n  </div>\n\n  <div\n    *ngIf=\"(environments?.length || 0) === 0\"\n    class=\"cqa-py-8 cqa-px-4 cqa-text-center cqa-text-sm cqa-text-gray-500\">\n    All environments are already assigned to this profile.\n  </div>\n</div>\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AssignEnvironmentsDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-assign-environments-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  <!-- Source env picker: required in clone mode, optional in assign mode -->\n  <div *ngIf=\"showSourcePicker\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">{{ sourceLabel }}</label>\n    <cqa-dynamic-select\n      [form]=\"sourceForm\"\n      [config]=\"sourceConfig\">\n    </cqa-dynamic-select>\n    <span [class.cqa-text-red-600]=\"sourceError\" [class.cqa-text-gray-500]=\"!sourceError\" class=\"cqa-text-xs\">\n      {{ sourceHelper }}\n    </span>\n  </div>\n\n  <!-- Selectable envs -->\n  <div\n    *ngIf=\"hasAnySelectable || (environments?.length || 0) > 0\"\n    class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[340px] cqa-overflow-y-auto\">\n    <label\n      *ngFor=\"let env of selectableEnvironments\"\n      class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-3 cqa-py-2.5 cqa-border cqa-rounded-[10px] cqa-bg-white cqa-transition-colors\"\n      [class.cqa-border-gray-200]=\"!isSelected(env.id) && !env.alreadyAssigned\"\n      [class.hover:cqa-border-indigo-200]=\"!env.alreadyAssigned && !isSelected(env.id)\"\n      [class.cqa-border-indigo-400]=\"isSelected(env.id)\"\n      [class.cqa-bg-indigo-50]=\"isSelected(env.id)\"\n      [class.cqa-opacity-50]=\"env.alreadyAssigned\"\n      [class.cqa-cursor-pointer]=\"!env.alreadyAssigned\"\n      [class.cqa-cursor-not-allowed]=\"env.alreadyAssigned\"\n      (click)=\"toggle(env)\">\n      <input\n        type=\"checkbox\"\n        class=\"cqa-w-4 cqa-h-4 cqa-cursor-pointer\"\n        [checked]=\"isSelected(env.id)\"\n        [disabled]=\"!!env.alreadyAssigned\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"toggle(env)\" />\n\n      <span\n        class=\"cqa-inline-block cqa-w-2 cqa-h-2 cqa-rounded-full cqa-flex-none\"\n        [style.background]=\"env.color || '#3F43EE'\"></span>\n\n      <div class=\"cqa-flex cqa-flex-col cqa-min-w-0 cqa-flex-1\">\n        <div class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">{{ env.name }}</div>\n        <div *ngIf=\"helperFor(env)\" class=\"cqa-text-xs cqa-text-gray-500 cqa-leading-[1.4]\">{{ helperFor(env) }}</div>\n      </div>\n    </label>\n  </div>\n\n  <div\n    *ngIf=\"(environments?.length || 0) === 0\"\n    class=\"cqa-py-8 cqa-px-4 cqa-text-center cqa-text-sm cqa-text-gray-500\">\n    All environments are already assigned to this profile.\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { mode: [{
+                type: Input
+            }], profileName: [{
+                type: Input
+            }], environments: [{
+                type: Input
+            }], assignedEnvironments: [{
+                type: Input
+            }], defaultSourceEnvId: [{
+                type: Input
+            }] } });
+
 class UiKitModule {
     constructor(iconRegistry) {
         iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
@@ -46975,6 +47615,10 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         CaptureVideoDialogComponent,
         SubStepsConfirmationDialogComponent,
         NewGlobalVariableDialogComponent,
+        NewEnvironmentDialogComponent,
+        NewEnvironmentVariableDialogComponent,
+        NewTestDataProfileDialogComponent,
+        AssignEnvironmentsDialogComponent,
         PermissionToggleComponent,
         ExportCodeModalComponent,
         ProgressIndicatorComponent,
@@ -47153,6 +47797,10 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         CaptureVideoDialogComponent,
         SubStepsConfirmationDialogComponent,
         NewGlobalVariableDialogComponent,
+        NewEnvironmentDialogComponent,
+        NewEnvironmentVariableDialogComponent,
+        NewTestDataProfileDialogComponent,
+        AssignEnvironmentsDialogComponent,
         PermissionToggleComponent,
         ExportCodeModalComponent,
         ProgressIndicatorComponent,
@@ -47376,6 +48024,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         CaptureVideoDialogComponent,
                         SubStepsConfirmationDialogComponent,
                         NewGlobalVariableDialogComponent,
+                        NewEnvironmentDialogComponent,
+                        NewEnvironmentVariableDialogComponent,
+                        NewTestDataProfileDialogComponent,
+                        AssignEnvironmentsDialogComponent,
                         PermissionToggleComponent,
                         ExportCodeModalComponent,
                         ProgressIndicatorComponent,
@@ -47560,6 +48212,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         CaptureVideoDialogComponent,
                         SubStepsConfirmationDialogComponent,
                         NewGlobalVariableDialogComponent,
+                        NewEnvironmentDialogComponent,
+                        NewEnvironmentVariableDialogComponent,
+                        NewTestDataProfileDialogComponent,
+                        AssignEnvironmentsDialogComponent,
                         PermissionToggleComponent,
                         ExportCodeModalComponent,
                         ProgressIndicatorComponent,
@@ -48391,5 +49047,5 @@ function buildTestCaseDetailsFromApi(data, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, 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_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, 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, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, MixedVariableInputComponent, NetworkRequestComponent, NewGlobalVariableDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, 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, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, 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_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, 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, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, MixedVariableInputComponent, NetworkRequestComponent, NewEnvironmentDialogComponent, NewEnvironmentVariableDialogComponent, NewGlobalVariableDialogComponent, NewTestDataProfileDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, 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