@cqa-lib/cqa-ui 1.1.199 → 1.1.200

package/lib/test-case-details/element-list/element-list.component.d.ts

@@ -1,6 +1,7 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, AfterViewInit, OnDestroy, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class ElementListComponent {
+export declare class ElementListComponent implements AfterViewInit, OnDestroy, OnChanges {
+    scrollContainer?: ElementRef<HTMLDivElement>;
     /** Array of items to display */
     items: any[];
     /** Key to access the title property from each item (default: 'title') */
@@ -11,8 +12,15 @@ export declare class ElementListComponent {
     labelsKey: string;
     /** Maximum height for the scrollable container (default: '200px') */
     maxHeight: string;
+    /** Whether more items can be loaded */
+    hasMore: boolean;
     /** Emitted when an item is clicked */
     itemClick: EventEmitter<any>;
+    /** Emitted when user scrolls near the bottom and more items should be loaded */
+    loadMore: EventEmitter<void>;
+    private scrollObserver?;
+    /** Skip the first intersection callback (fires immediately when observe() is called) to prevent duplicate API calls on load */
+    private skipNextIntersection;
     /**
      * Get the value from an item using the specified key
      */
@@ -21,6 +29,10 @@ export declare class ElementListComponent {
      * Handle item click
      */
     onItemClick(item: any): void;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private setupScrollObserver;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElementListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElementListComponent, "cqa-element-list", never, { "items": "items"; "titleKey": "titleKey"; "selectorKey": "selectorKey"; "labelsKey": "labelsKey"; "maxHeight": "maxHeight"; }, { "itemClick": "itemClick"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElementListComponent, "cqa-element-list", never, { "items": "items"; "titleKey": "titleKey"; "selectorKey": "selectorKey"; "labelsKey": "labelsKey"; "maxHeight": "maxHeight"; "hasMore": "hasMore"; }, { "itemClick": "itemClick"; "loadMore": "loadMore"; }, never, never>;
 }

package/lib/test-case-details/element-popup/element-popup-data.d.ts

@@ -10,6 +10,9 @@ export interface ElementPopupDataElements {
     labels: string[];
     title: string;
     selector?: string;
+    id?: number;
+    screenName?: string;
+    screenNameId?: number;
 }
 /** Sentinel returned from afterClosed() when user clicked "Edit in depth". */
 export declare const ELEMENT_POPUP_EDIT_IN_DEPTH: unique symbol;

package/lib/test-case-details/element-popup/element-popup-form-data.d.ts

@@ -0,0 +1,22 @@
+/** Payload emitted when user creates a new element */
+export interface ElementCreatePayload {
+    name: string;
+    screenNameId?: number;
+    screenNameName: string;
+    locatorValue: string;
+    labels: string[];
+}
+/** Payload emitted when user updates an existing element */
+export interface ElementUpdatePayload {
+    elementId: number;
+    name: string;
+    screenNameId?: number;
+    screenNameName: string;
+    locatorValue: string;
+    labels: string[];
+}
+/** Screen name option for autocomplete */
+export interface ScreenNameOption {
+    id?: number;
+    name: string;
+}

package/lib/test-case-details/element-popup/element-popup.component.d.ts

@@ -1,11 +1,12 @@
 import { ChangeDetectorRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { ElementPopupData, ElementPopupDataElements } from './element-popup-data';
+import { ElementCreatePayload, ElementUpdatePayload, ScreenNameOption } from './element-popup-form-data';
 import { ElementPopupRef } from './../element-popup/element-popup-ref';
 import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
 import { DynamicSelectFieldConfig } from '../../dynamic-select/dynamic-select-field.component';
 import * as i0 from "@angular/core";
 export declare class ElementPopupComponent implements OnInit, OnChanges {
-    private ref;
+    private ref?;
     private readonly cdr?;
     value: string;
     helpUrl: string;
@@ -14,47 +15,99 @@ export declare class ElementPopupComponent implements OnInit, OnChanges {
     elements: ElementPopupDataElements[];
     enableForm: boolean;
     isOnRecord: boolean;
+    hasMoreElements: boolean;
+    /** Element ID when editing existing element */
+    elementId?: number;
+    /** Screen name options for autocomplete (from API) */
+    screenNameOptions: ScreenNameOption[];
+    /** Whether more screen names are available for infinite scroll */
+    hasMoreScreenNames: boolean;
+    /** True while parent is loading screen names (search or load more) */
+    isLoadingScreenNames: boolean;
+    /** Suggested tags from API for labels field */
+    suggestedTags: string[];
+    /** True while parent is fetching latest element data for edit (shows loading state) */
+    isElementLoading: boolean;
+    /** Recent searched items to display in Recent section */
+    recentSearchedItems: string[];
     apply: EventEmitter<string>;
     cancel: EventEmitter<void>;
     editInDepth: EventEmitter<void>;
-    searchElement: EventEmitter<void>;
+    searchElement: EventEmitter<string>;
+    /** Emitted when user clicks on a recent searched item */
+    recentItemClick: EventEmitter<string>;
+    loadMoreElements: EventEmitter<void>;
+    /** Emitted when user creates a new element (parent should call API) */
+    createElement: EventEmitter<ElementCreatePayload>;
+    /** Emitted when user updates an element (parent should call API) */
+    updateElement: EventEmitter<ElementUpdatePayload>;
+    /** Emitted when user requests to create a new screen name */
+    createScreenNameRequest: EventEmitter<string>;
+    /** Emitted when user searches screen names (server search) */
+    searchScreenName: EventEmitter<string>;
+    /** Emitted when user scrolls to load more screen names (passes current search query) */
+    loadMoreScreenNames: EventEmitter<string>;
+    /** Emitted when Create or Edit form is opened - parent should fetch screen names and (for edit) latest element */
+    formOpenRequest: EventEmitter<{
+        mode: 'create' | 'edit';
+        elementId?: number;
+    }>;
+    /** Emitted when user selects an element from the list - parent should set element and editingElementId for Edit flow */
+    elementSelect: EventEmitter<ElementPopupDataElements>;
+    /** Emitted when user clicks Record - parent should check extension and call installPlugin or openSidePanelAndListSteps */
+    toggleRecord: EventEmitter<void>;
     form: FormGroup;
-    /** Tooltip shown when hovering over the "Need help ?" icon and text */
     helpTooltipText: string;
-    /** Whether the help tooltip is visible (custom tooltip for use inside overlay) */
     showHelpTooltip: boolean;
-    /** Whether we're in edit mode (true) or create mode (false) */
     isEditMode: boolean;
+    /** Whether we're in create mode (no elementId) */
+    isCreateMode: boolean;
+    /** Labels (tags) as string array for multi-tag input */
+    formLabels: string[];
+    /** Current tag input value */
+    tagInputValue: string;
+    /** Current search input value (bound to search bar) */
+    searchValue: string;
+    /** Config for screen name dynamic-select (server search, allowCustomValue, infinite scroll) */
+    screenNameSelectConfig: DynamicSelectFieldConfig;
+    /** Whether we're saving (disable buttons) */
+    saving: boolean;
     private injectedData?;
     private fb;
-    /** Cached select options to avoid recomputing on every change detection */
-    private cachedSelectOptions;
-    /** Cached select config to avoid recreating on every change detection */
-    private cachedSelectConfig?;
-    constructor(ref: ElementPopupRef, data?: ElementPopupData, fb?: FormBuilder, cdr?: ChangeDetectorRef);
+    constructor(ref?: ElementPopupRef, data?: ElementPopupData, fb?: FormBuilder, cdr?: ChangeDetectorRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
     private initializeForm;
+    private updateScreenNameSelectConfig;
     private populateFormForEdit;
+    private populateFormForCreateWithElement;
     private resetForm;
+    /** Called by parent when a new screen name was created (so we can set the selected value) */
+    setCreatedScreenName(opt: {
+        id: number;
+        name: string;
+    }): void;
     onApply(): void;
+    onCreateOrUpdateSuccess(): void;
+    onCreateOrUpdateError(): void;
     toggleForm(): void;
-    /** Called when "Create New" button is clicked - explicitly sets create mode */
     openCreateForm(): void;
-    toggleRecord(): void;
+    onToggleRecordClick(): void;
     onCancel(): void;
     onClose(): void;
     onEditInDepth(event: Event): void;
-    search(event: any): void;
+    search(event: string): void;
     onHelp(event: Event): void;
-    onVariableValueChange(variableName: string, value: any): void;
-    /** Update cached select options when labels change */
-    private updateSelectOptions;
-    getSelectConfig(): DynamicSelectFieldConfig;
     getFormControl(controlName: string): FormControl;
     getFormControlValue(controlName: string): string;
     onFormControlChange(controlName: string, value: string): void;
+    /** Add a tag (label) */
+    addTag(tag?: string): void;
+    removeTag(tag: string): void;
+    onTagInputKeydown(event: KeyboardEvent): void;
     onElementClick(element: ElementPopupDataElements): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElementPopupComponent, [null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElementPopupComponent, "cqa-element-popup", never, { "value": "value"; "helpUrl": "helpUrl"; "labels": "labels"; "element": "element"; "elements": "elements"; "enableForm": "enableForm"; "isOnRecord": "isOnRecord"; }, { "apply": "apply"; "cancel": "cancel"; "editInDepth": "editInDepth"; "searchElement": "searchElement"; }, never, never>;
+    onLoadMoreElements(): void;
+    onRecentItemClick(item: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElementPopupComponent, [{ optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElementPopupComponent, "cqa-element-popup", never, { "value": "value"; "helpUrl": "helpUrl"; "labels": "labels"; "element": "element"; "elements": "elements"; "enableForm": "enableForm"; "isOnRecord": "isOnRecord"; "hasMoreElements": "hasMoreElements"; "elementId": "elementId"; "screenNameOptions": "screenNameOptions"; "hasMoreScreenNames": "hasMoreScreenNames"; "isLoadingScreenNames": "isLoadingScreenNames"; "suggestedTags": "suggestedTags"; "isElementLoading": "isElementLoading"; "recentSearchedItems": "recentSearchedItems"; }, { "apply": "apply"; "cancel": "cancel"; "editInDepth": "editInDepth"; "searchElement": "searchElement"; "recentItemClick": "recentItemClick"; "loadMoreElements": "loadMoreElements"; "createElement": "createElement"; "updateElement": "updateElement"; "createScreenNameRequest": "createScreenNameRequest"; "searchScreenName": "searchScreenName"; "loadMoreScreenNames": "loadMoreScreenNames"; "formOpenRequest": "formOpenRequest"; "elementSelect": "elementSelect"; "toggleRecord": "toggleRecord"; }, never, never>;
 }

package/lib/test-case-details/normal-step/normal-step.component.d.ts

@@ -17,6 +17,7 @@ export declare class TestCaseNormalStepComponent implements OnInit {
     testDataTrigger?: ElementRef<HTMLElement>;
     editTrigger?: ElementRef<HTMLElement>;
     elementTrigger?: ElementRef<HTMLElement>;
+    clickElementTrigger?: ElementRef<HTMLElement>;
     config: NormalStepConfig;
     stepNumber: number | string;
     action: string;

package/lib/test-case-details/test-case-details-renderer/test-case-details-renderer.component.d.ts

@@ -15,6 +15,7 @@ export declare class TestCaseDetailsRendererComponent implements OnChanges, Afte
     /** When true, enables drag-and-drop reordering and shows drag handle icon instead of checkbox */
     isReorder: boolean;
     addStepBetween: boolean;
+    action?: string;
     nestedStepChange: EventEmitter<{
         step: TestCaseStepConfig;
         index: number;
@@ -102,5 +103,5 @@ export declare class TestCaseDetailsRendererComponent implements OnChanges, Afte
     private wireOutputs;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TestCaseDetailsRendererComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TestCaseDetailsRendererComponent, "cqa-test-case-details-renderer", never, { "step": "step"; "index": "index"; "isNested": "isNested"; "isInsideLoop": "isInsideLoop"; "branch": "branch"; "isReorder": "isReorder"; "addStepBetween": "addStepBetween"; "dataProfileOptions": "dataProfileOptions"; "hasMoreDataProfiles": "hasMoreDataProfiles"; "isLoadingDataProfiles": "isLoadingDataProfiles"; "naturalTextActionsOptions": "naturalTextActionsOptions"; "setConditionTemplateVariables": "setConditionTemplateVariables"; }, { "nestedStepChange": "nestedStepChange"; "addStep": "addStep"; "deleteStep": "deleteStep"; "toggleExpanded": "toggleExpanded"; "groupNameChange": "groupNameChange"; "descriptionChange": "descriptionChange"; "reusableChange": "reusableChange"; "openExternal": "openExternal"; "edit": "edit"; "link": "link"; "duplicate": "duplicate"; "delete": "delete"; "viewDetails": "viewDetails"; "selectionChange": "selectionChange"; "conditionChange": "conditionChange"; "branchStepChange": "branchStepChange"; "addStepForBranch": "addStepForBranch"; "deleteStepWithBranch": "deleteStepWithBranch"; "addBranch": "addBranch"; "addElse": "addElse"; "deleteBranch": "deleteBranch"; "testDataProfileChange": "testDataProfileChange"; "startStepChange": "startStepChange"; "endStepChange": "endStepChange"; "maxIterationsChange": "maxIterationsChange"; "eventTypeChange": "eventTypeChange"; "parameterChange": "parameterChange"; "clickAction": "clickAction"; "dndDropInZone": "dndDropInZone"; "loadMoreDataProfiles": "loadMoreDataProfiles"; "searchDataProfiles": "searchDataProfiles"; "stepUpdate": "stepUpdate"; "addStepBetweenClick": "addStepBetweenClick"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TestCaseDetailsRendererComponent, "cqa-test-case-details-renderer", never, { "step": "step"; "index": "index"; "isNested": "isNested"; "isInsideLoop": "isInsideLoop"; "branch": "branch"; "isReorder": "isReorder"; "addStepBetween": "addStepBetween"; "action": "action"; "dataProfileOptions": "dataProfileOptions"; "hasMoreDataProfiles": "hasMoreDataProfiles"; "isLoadingDataProfiles": "isLoadingDataProfiles"; "naturalTextActionsOptions": "naturalTextActionsOptions"; "setConditionTemplateVariables": "setConditionTemplateVariables"; }, { "nestedStepChange": "nestedStepChange"; "addStep": "addStep"; "deleteStep": "deleteStep"; "toggleExpanded": "toggleExpanded"; "groupNameChange": "groupNameChange"; "descriptionChange": "descriptionChange"; "reusableChange": "reusableChange"; "openExternal": "openExternal"; "edit": "edit"; "link": "link"; "duplicate": "duplicate"; "delete": "delete"; "viewDetails": "viewDetails"; "selectionChange": "selectionChange"; "conditionChange": "conditionChange"; "branchStepChange": "branchStepChange"; "addStepForBranch": "addStepForBranch"; "deleteStepWithBranch": "deleteStepWithBranch"; "addBranch": "addBranch"; "addElse": "addElse"; "deleteBranch": "deleteBranch"; "testDataProfileChange": "testDataProfileChange"; "startStepChange": "startStepChange"; "endStepChange": "endStepChange"; "maxIterationsChange": "maxIterationsChange"; "eventTypeChange": "eventTypeChange"; "parameterChange": "parameterChange"; "clickAction": "clickAction"; "dndDropInZone": "dndDropInZone"; "loadMoreDataProfiles": "loadMoreDataProfiles"; "searchDataProfiles": "searchDataProfiles"; "stepUpdate": "stepUpdate"; "addStepBetweenClick": "addStepBetweenClick"; }, never, never>;
 }

package/lib/test-case-details/test-case-step.models.d.ts

@@ -43,11 +43,18 @@ export interface BaseStepConfig {
     selected?: boolean;
     disabled?: boolean;
     expanded?: boolean;
+    event?: Record<string, unknown>;
 }
 export interface NormalStepConfig extends BaseStepConfig {
     stepType: StepTypes.NORMAL;
     eventType: TestCaseEventType;
     parameters: StepParameter[];
+    elementData?: {
+        label?: string;
+        selector?: string;
+        pwLocator?: string[];
+        labels?: string[];
+    };
 }
 /** API Step Configuration */
 export interface ApiStepConfig extends BaseStepConfig {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqa-lib/cqa-ui",
-  "version": "1.1.199",
+  "version": "1.1.200",
   "description": "UI Kit library for Angular 13.4",
   "keywords": [
     "angular",

package/public-api.d.ts

@@ -122,6 +122,7 @@ export * from './lib/step-builder/step-builder-loop/step-builder-loop.component'
 export * from './lib/test-case-details/element-popup/element-popup.component';
 export * from './lib/test-case-details/element-popup/element-popup-ref';
 export * from './lib/test-case-details/element-popup/element-popup-data';
+export * from './lib/test-case-details/element-popup/element-popup-form-data';
 export * from './lib/test-case-details/element-popup/element-popup.service';
 export * from './lib/step-builder/step-builder-condition/step-builder-condition.component';
 export * from './lib/step-builder/step-builder-database/step-builder-database.component';