@cqa-lib/cqa-ui 1.1.456 → 1.1.458

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

@@ -43193,6 +43193,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
+class StepperComponent {
+    constructor() {
+        this.steps = [];
+        this.currentStep = 0;
+        this.linear = true;
+        this.stepChange = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        if (changes['currentStep']) {
+            this.currentStep = Math.max(0, Math.min(this.currentStep, this.steps.length - 1));
+        }
+    }
+    getStatus(index) {
+        if (index < this.currentStep)
+            return 'completed';
+        if (index === this.currentStep)
+            return 'active';
+        return 'upcoming';
+    }
+    getCircleStyles(index) {
+        const base = {
+            width: '32px',
+            height: '32px',
+            'border-radius': '9999px',
+            display: 'flex',
+            'align-items': 'center',
+            'justify-content': 'center',
+            'font-family': "'Inter', sans-serif",
+            'font-size': '12px',
+            transition: 'all 0.2s ease',
+        };
+        const status = this.getStatus(index);
+        if (status === 'active') {
+            return {
+                ...base,
+                background: '#3f43ee',
+                color: '#fff',
+                'font-weight': '500',
+                border: 'none',
+                'box-shadow': '0 0 0 0 rgba(63, 67, 238, 0.2)',
+            };
+        }
+        if (status === 'completed') {
+            return {
+                ...base,
+                background: '#3f43ee',
+                color: '#fff',
+                'font-weight': '400',
+                border: 'none',
+            };
+        }
+        return {
+            ...base,
+            background: '#fff',
+            color: '#d1d5db',
+            'font-weight': '400',
+            border: '2px solid #e5e7eb',
+        };
+    }
+    getLabelStyles(index) {
+        const base = {
+            'font-family': "'Inter', sans-serif",
+            'font-size': '12px',
+            'line-height': '16px',
+            'white-space': 'nowrap',
+        };
+        const status = this.getStatus(index);
+        if (status === 'active' || status === 'completed') {
+            return { ...base, color: '#101828', 'font-weight': '500' };
+        }
+        return { ...base, color: '#6b7280', 'font-weight': '400' };
+    }
+    onStepClick(index) {
+        const step = this.steps[index];
+        if (step?.disabled)
+            return;
+        if (this.linear && index > this.currentStep)
+            return;
+        this.stepChange.emit(index);
+    }
+    trackByIndex(index) {
+        return index;
+    }
+}
+StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepperComponent, selector: "cqa-stepper", inputs: { steps: "steps", currentStep: "currentStep", linear: "linear" }, outputs: { stepChange: "stepChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-relative cqa-flex cqa-items-start cqa-justify-between cqa-w-full\">\n\n    <!-- Horizontal connector line -->\n    <div class=\"cqa-absolute cqa-left-0 cqa-right-0 cqa-z-0\"\n         style=\"top: 16px; height: 2px; background: #f3f4f6;\"></div>\n\n    <!-- Steps -->\n    <div\n      *ngFor=\"let step of steps; let i = index; trackBy: trackByIndex\"\n      class=\"cqa-relative cqa-z-[1] cqa-flex cqa-flex-col cqa-items-center cqa-shrink-0\"\n      style=\"gap: 8px; padding: 0 8px; background: #fff;\"\n      [ngClass]=\"{\n        'cqa-cursor-pointer': !step.disabled && (!linear || i <= currentStep),\n        'cqa-cursor-default': step.disabled || (linear && i > currentStep)\n      }\"\n      (click)=\"onStepClick(i)\"\n      [attr.aria-current]=\"getStatus(i) === 'active' ? 'step' : null\"\n      role=\"listitem\"\n    >\n      <!-- Circle -->\n      <div\n        class=\"cqa-flex cqa-items-center cqa-justify-center\"\n        [ngStyle]=\"getCircleStyles(i)\"\n      >\n        <mat-icon\n          *ngIf=\"getStatus(i) === 'completed'\"\n          style=\"font-size: 16px; width: 16px; height: 16px; color: inherit;\"\n        >check</mat-icon>\n        <span *ngIf=\"getStatus(i) !== 'completed'\">{{ i + 1 }}</span>\n      </div>\n\n      <!-- Label -->\n      <span [ngStyle]=\"getLabelStyles(i)\">{{ step.label }}</span>\n    </div>\n\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-stepper', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-relative cqa-flex cqa-items-start cqa-justify-between cqa-w-full\">\n\n    <!-- Horizontal connector line -->\n    <div class=\"cqa-absolute cqa-left-0 cqa-right-0 cqa-z-0\"\n         style=\"top: 16px; height: 2px; background: #f3f4f6;\"></div>\n\n    <!-- Steps -->\n    <div\n      *ngFor=\"let step of steps; let i = index; trackBy: trackByIndex\"\n      class=\"cqa-relative cqa-z-[1] cqa-flex cqa-flex-col cqa-items-center cqa-shrink-0\"\n      style=\"gap: 8px; padding: 0 8px; background: #fff;\"\n      [ngClass]=\"{\n        'cqa-cursor-pointer': !step.disabled && (!linear || i <= currentStep),\n        'cqa-cursor-default': step.disabled || (linear && i > currentStep)\n      }\"\n      (click)=\"onStepClick(i)\"\n      [attr.aria-current]=\"getStatus(i) === 'active' ? 'step' : null\"\n      role=\"listitem\"\n    >\n      <!-- Circle -->\n      <div\n        class=\"cqa-flex cqa-items-center cqa-justify-center\"\n        [ngStyle]=\"getCircleStyles(i)\"\n      >\n        <mat-icon\n          *ngIf=\"getStatus(i) === 'completed'\"\n          style=\"font-size: 16px; width: 16px; height: 16px; color: inherit;\"\n        >check</mat-icon>\n        <span *ngIf=\"getStatus(i) !== 'completed'\">{{ i + 1 }}</span>\n      </div>\n\n      <!-- Label -->\n      <span [ngStyle]=\"getLabelStyles(i)\">{{ step.label }}</span>\n    </div>\n\n  </div>\n</div>\n", styles: [] }]
+        }], propDecorators: { steps: [{
+                type: Input
+            }], currentStep: [{
+                type: Input
+            }], linear: [{
+                type: Input
+            }], stepChange: [{
+                type: Output
+            }] } });
+
 class UiKitModule {
     constructor(iconRegistry) {
         iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
@@ -43203,6 +43302,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         SearchBarComponent,
         AutocompleteComponent,
         SegmentControlComponent,
+        StepperComponent,
         DialogComponent,
         DynamicTableComponent,
         DynamicCellTemplateDirective,
@@ -43369,6 +43469,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         SearchBarComponent,
         AutocompleteComponent,
         SegmentControlComponent,
+        StepperComponent,
         DialogComponent,
         DynamicTableComponent,
         DynamicCellTemplateDirective,
@@ -43580,6 +43681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         SearchBarComponent,
                         AutocompleteComponent,
                         SegmentControlComponent,
+                        StepperComponent,
                         DialogComponent,
                         DynamicTableComponent,
                         DynamicCellTemplateDirective,
@@ -43752,6 +43854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         SearchBarComponent,
                         AutocompleteComponent,
                         SegmentControlComponent,
+                        StepperComponent,
                         DialogComponent,
                         DynamicTableComponent,
                         DynamicCellTemplateDirective,
@@ -44657,5 +44760,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, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, 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, NetworkRequestComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, 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, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, 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, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, 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, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, 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, NetworkRequestComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, 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, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, 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, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, 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