@cqa-lib/cqa-ui 1.1.283 → 1.1.284

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

@@ -25896,6 +25896,8 @@ class CreateStepGroupComponent {
     constructor(fb) {
         this.fb = fb;
         this.stepsToGroup = [];
+        /** Pre-computed display labels from host (same order as stepsToGroup). When provided, used instead of computing from step. */
+        this.stepLabels = [];
         this.createGroup = new EventEmitter();
         this.cancelled = new EventEmitter();
         this.form = this.fb.group({
@@ -25911,8 +25913,11 @@ class CreateStepGroupComponent {
             ? 'Group 1 selected step into a container'
             : `Group ${n} selected steps into a container`;
     }
-    /** Display label for a step in the "Steps to group" list (same as main step list - use action when available). */
+    /** Display label for a step in the "Steps to group" list (same as main step list - use stepLabels when provided). */
     getStepDisplayLabel(step, index) {
+        if (this.stepLabels?.length > index && this.stepLabels[index] != null && this.stepLabels[index] !== '') {
+            return this.stepLabels[index];
+        }
         // Prefer step.action - it matches the full display in the step list (e.g. "Enter @|password| in the Email")
         const rawAction = step.action != null && String(step.action).trim() !== '' ? String(step.action) : '';
         if (rawAction) {
@@ -25954,19 +25959,57 @@ class CreateStepGroupComponent {
         const params = step.parameters ?? [];
         const getParam = (name) => params.find((p) => p.name?.toLowerCase() === name.toLowerCase());
         const val = (p) => p?.displayValue ?? p?.value ?? '';
+        /** Use raw value (strip surrounding quotes from displayValue) for building full sentences */
+        const rawVal = (p) => {
+            const v = p?.value ?? p?.displayValue ?? '';
+            const s = String(v);
+            return s.replace(/^["']|["']$/g, '').trim() || s;
+        };
         switch (step.eventType) {
             case 'navigate': {
-                const url = getParam('url');
-                return url ? `Navigate to ${val(url)}` : 'Navigate';
+                const url = getParam('url') ?? params.find((p) => /url|baseUrl/i.test(p.name || ''));
+                return url ? `Navigate to ${rawVal(url)}` : 'Navigate';
+            }
+            case 'enter': {
+                const valueParam = getParam('value');
+                const labelParam = getParam('label');
+                const value = rawVal(valueParam);
+                const label = rawVal(labelParam);
+                if (value && label)
+                    return `Enter ${value} in the ${label}`;
+                if (value)
+                    return `Enter ${value}`;
+                if (label)
+                    return `Enter in the ${label}`;
+                return 'Enter';
             }
             case 'ai-agent': {
                 const instructions = getParam('instructions') ?? getParam('description');
                 return val(instructions) || 'AI Agent step';
             }
-            case 'type':
-                return val(getParam('text')) || 'Type';
-            case 'click':
-                return val(getParam('selector')) ? `Click ${val(getParam('selector'))}` : 'Click';
+            case 'type': {
+                const textParam = getParam('text') ?? getParam('value');
+                const elementParam = getParam('element') ?? getParam('label') ?? getParam('selector');
+                const text = rawVal(textParam);
+                const element = rawVal(elementParam);
+                if (text && element)
+                    return `Enter ${text} in the ${element}`;
+                if (text)
+                    return `Enter ${text}`;
+                return 'Type';
+            }
+            case 'click': {
+                const selector = getParam('element') ?? getParam('selector');
+                return selector ? `Click on ${rawVal(selector)}` : 'Click';
+            }
+            case 'doubleClick': {
+                const selector = getParam('element') ?? getParam('selector');
+                return selector ? `Double click on ${rawVal(selector)}` : 'Double click';
+            }
+            case 'pressEnter': {
+                const element = getParam('element');
+                return element ? `Press Enter on ${rawVal(element)}` : 'Press Enter';
+            }
             case 'verify':
                 return val(getParam('description')) || 'Verify';
             case 'custom': {
@@ -25994,12 +26037,14 @@ class CreateStepGroupComponent {
     }
 }
 CreateStepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CreateStepGroupComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-CreateStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CreateStepGroupComponent, selector: "cqa-create-step-group", inputs: { stepsToGroup: "stepsToGroup" }, outputs: { createGroup: "createGroup", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n  <!-- Header: title + close (X) -->\n  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n      <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0\">\n        Create step group\n      </h2>\n      <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#64748B] cqa-m-0\">\n        {{ subtitleText }}\n      </p>\n    </div>\n    <button\n      type=\"button\"\n      (click)=\"onCancel()\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n      title=\"Close\"\n      aria-label=\"Close\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M18 6L6 18M6 6l12 12\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Group name * -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#161617]\">\n      Group name <span class=\"cqa-text-red-500\">*</span>\n    </label>\n    <cqa-custom-input\n      placeholder=\"e.g., Authentication flow\"\n      [value]=\"form.get('groupName')?.value\"\n      [fullWidth]=\"true\"\n      size=\"md\"\n      (valueChange)=\"form.get('groupName')?.setValue($event); form.get('groupName')?.updateValueAndValidity()\">\n    </cqa-custom-input>\n    <p *ngIf=\"form.get('groupName')?.invalid && form.get('groupName')?.touched\" class=\"cqa-text-xs cqa-text-red-500 cqa-m-0\">\n      Group name is required.\n    </p>\n  </div>\n\n  <!-- Steps to group (N) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n      Steps to group ({{ stepsCount }})\n    </label>\n    <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-overflow-y-auto cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n      <div\n        *ngFor=\"let step of stepsToGroup; let i = index\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-rounded-[4px] cqa-py-[4px] cqa-px-[8px] cqa-bg-[rgba(216,217,252,0.3)]\">\n        <!-- Numbered badge -->\n        <span\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#3F43EE] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n          {{ i + 1 }}\n        </span>\n        <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#0B0B0C] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n          {{ getStepDisplayLabel(step, i) }}\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Actions: Cancel | Create group -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        text=\"Create group\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n        (clicked)=\"onCreateGroup()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+CreateStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CreateStepGroupComponent, selector: "cqa-create-step-group", inputs: { stepsToGroup: "stepsToGroup", stepLabels: "stepLabels" }, outputs: { createGroup: "createGroup", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n  <!-- Header: title + close (X) -->\n  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n      <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0\">\n        Create step group\n      </h2>\n      <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#64748B] cqa-m-0\">\n        {{ subtitleText }}\n      </p>\n    </div>\n    <button\n      type=\"button\"\n      (click)=\"onCancel()\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n      title=\"Close\"\n      aria-label=\"Close\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M18 6L6 18M6 6l12 12\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Group name * -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#161617]\">\n      Group name <span class=\"cqa-text-red-500\">*</span>\n    </label>\n    <cqa-custom-input\n      placeholder=\"e.g., Authentication flow\"\n      [value]=\"form.get('groupName')?.value\"\n      [fullWidth]=\"true\"\n      size=\"md\"\n      (valueChange)=\"form.get('groupName')?.setValue($event); form.get('groupName')?.updateValueAndValidity()\">\n    </cqa-custom-input>\n    <p *ngIf=\"form.get('groupName')?.invalid && form.get('groupName')?.touched\" class=\"cqa-text-xs cqa-text-red-500 cqa-m-0\">\n      Group name is required.\n    </p>\n  </div>\n\n  <!-- Steps to group (N) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n      Steps to group ({{ stepsCount }})\n    </label>\n    <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-overflow-y-auto cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n      <div\n        *ngFor=\"let step of stepsToGroup; let i = index\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-rounded-[4px] cqa-py-[4px] cqa-px-[8px] cqa-bg-[rgba(216,217,252,0.3)]\">\n        <!-- Numbered badge -->\n        <span\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#3F43EE] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n          {{ i + 1 }}\n        </span>\n        <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#0B0B0C] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n          {{ getStepDisplayLabel(step, i) }}\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Actions: Cancel | Create group -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        text=\"Create group\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n        (clicked)=\"onCreateGroup()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CreateStepGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-create-step-group', host: { class: 'cqa-ui-root' }, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n  <!-- Header: title + close (X) -->\n  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n      <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0\">\n        Create step group\n      </h2>\n      <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#64748B] cqa-m-0\">\n        {{ subtitleText }}\n      </p>\n    </div>\n    <button\n      type=\"button\"\n      (click)=\"onCancel()\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n      title=\"Close\"\n      aria-label=\"Close\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M18 6L6 18M6 6l12 12\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Group name * -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#161617]\">\n      Group name <span class=\"cqa-text-red-500\">*</span>\n    </label>\n    <cqa-custom-input\n      placeholder=\"e.g., Authentication flow\"\n      [value]=\"form.get('groupName')?.value\"\n      [fullWidth]=\"true\"\n      size=\"md\"\n      (valueChange)=\"form.get('groupName')?.setValue($event); form.get('groupName')?.updateValueAndValidity()\">\n    </cqa-custom-input>\n    <p *ngIf=\"form.get('groupName')?.invalid && form.get('groupName')?.touched\" class=\"cqa-text-xs cqa-text-red-500 cqa-m-0\">\n      Group name is required.\n    </p>\n  </div>\n\n  <!-- Steps to group (N) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n    <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n      Steps to group ({{ stepsCount }})\n    </label>\n    <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-overflow-y-auto cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n      <div\n        *ngFor=\"let step of stepsToGroup; let i = index\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-rounded-[4px] cqa-py-[4px] cqa-px-[8px] cqa-bg-[rgba(216,217,252,0.3)]\">\n        <!-- Numbered badge -->\n        <span\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#3F43EE] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n          {{ i + 1 }}\n        </span>\n        <span class=\"cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#0B0B0C] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n          {{ getStepDisplayLabel(step, i) }}\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Actions: Cancel | Create group -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        text=\"Create group\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n        (clicked)=\"onCreateGroup()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { stepsToGroup: [{
                 type: Input
+            }], stepLabels: [{
+                type: Input
             }], createGroup: [{
                 type: Output
             }], cancelled: [{