@cqa-lib/cqa-ui 1.1.455 → 1.1.457

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, forwardRef, Optional, Inject, Injectable, InjectionToken, ChangeDetectorRef, SimpleChange, ViewContainerRef, Injector, Pipe, HostBinding, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { EventEmitter, Component, Input, Output, HostListener, HostBinding, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, forwardRef, Optional, Inject, Injectable, InjectionToken, ChangeDetectorRef, SimpleChange, ViewContainerRef, Injector, Pipe, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -613,6 +613,8 @@ class SegmentControlComponent {
         this.indicatorStyle = {};
         this.indicatorVisible = false;
     }
+    get hostDisplay() { return this.fullWidth ? 'block' : null; }
+    get hostWidth() { return this.fullWidth ? '100%' : null; }
     ngOnChanges(changes) {
         if (changes['segments'] || changes['value']) {
             this.ensureSelectedValue();
@@ -809,7 +811,7 @@ class SegmentControlComponent {
     }
 }
 SegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled", containerBgColor: "containerBgColor", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-surface-light cqa-rounded-[8px]\"\n    [ngClass]=\"fullWidth ? 'cqa-flex' : 'cqa-inline-flex'\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n    <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n      [ngClass]=\"{\n        'cqa-flex-1 cqa-min-w-0': fullWidth,\n        'cqa-flex-none': !fullWidth,\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n      <span\n        class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n        \n      <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n        {{ segment?.icon }}\n      </mat-icon>\n\n      {{ segment.label }}\n\n      <span *ngIf=\"segment?.tooltip\"\n        style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n        [matTooltip]=\"segment.tooltip\"\n        matTooltipPosition=\"above\"\n        matTooltipShowDelay=\"0\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n      </span>\n    </span>\n  </button>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled", containerBgColor: "containerBgColor", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.display": "this.hostDisplay", "style.width": "this.hostWidth" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-surface-light cqa-rounded-[8px]\"\n    [ngClass]=\"fullWidth ? 'cqa-flex' : 'cqa-inline-flex'\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n    <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n      [ngClass]=\"{\n        'cqa-flex-1 cqa-min-w-0': fullWidth,\n        'cqa-flex-none': !fullWidth,\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n      <span\n        class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n        \n      <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n        {{ segment?.icon }}\n      </mat-icon>\n\n      {{ segment.label }}\n\n      <span *ngIf=\"segment?.tooltip\"\n        style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n        [matTooltip]=\"segment.tooltip\"\n        matTooltipPosition=\"above\"\n        matTooltipShowDelay=\"0\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n      </span>\n    </span>\n  </button>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-segment-control', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-surface-light cqa-rounded-[8px]\"\n    [ngClass]=\"fullWidth ? 'cqa-flex' : 'cqa-inline-flex'\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n    <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n      [ngClass]=\"{\n        'cqa-flex-1 cqa-min-w-0': fullWidth,\n        'cqa-flex-none': !fullWidth,\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n      <span\n        class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n        \n      <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n        {{ segment?.icon }}\n      </mat-icon>\n\n      {{ segment.label }}\n\n      <span *ngIf=\"segment?.tooltip\"\n        style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n        [matTooltip]=\"segment.tooltip\"\n        matTooltipPosition=\"above\"\n        matTooltipShowDelay=\"0\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n      </span>\n    </span>\n  </button>\n</div>", styles: [] }]
@@ -823,6 +825,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], fullWidth: [{
                 type: Input
+            }], hostDisplay: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], hostWidth: [{
+                type: HostBinding,
+                args: ['style.width']
             }], valueChange: [{
                 type: Output
             }], segmentButtons: [{
@@ -43185,6 +43193,52 @@ 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';
+    }
+    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-h-[2px] cqa-bg-[#f3f4f6] cqa-z-0\"\n         style=\"top: 16px;\"></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-gap-2 cqa-bg-white cqa-px-2 cqa-shrink-0\"\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 cqa-w-8 cqa-h-8 cqa-rounded-full cqa-transition-all cqa-duration-200 cqa-font-['Inter'] cqa-text-[12px]\"\n        [ngClass]=\"{\n          'cqa-bg-[#3f43ee] cqa-text-white cqa-font-medium cqa-shadow-[0_0_0_0_rgba(63,67,238,0.2)]': getStatus(i) === 'active',\n          'cqa-bg-[#3f43ee] cqa-text-white': getStatus(i) === 'completed',\n          'cqa-bg-white cqa-border-2 cqa-border-[#e5e7eb] cqa-text-[#d1d5db]': getStatus(i) === 'upcoming'\n        }\"\n      >\n        <mat-icon *ngIf=\"getStatus(i) === 'completed'\" class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">check</mat-icon>\n        <span *ngIf=\"getStatus(i) !== 'completed'\">{{ i + 1 }}</span>\n      </div>\n\n      <!-- Label -->\n      <span\n        class=\"cqa-font-['Inter'] cqa-text-[12px] cqa-whitespace-nowrap cqa-leading-4\"\n        [ngClass]=\"{\n          'cqa-text-[#101828] cqa-font-medium': getStatus(i) === 'active' || getStatus(i) === 'completed',\n          'cqa-text-[#6b7280] cqa-font-normal': getStatus(i) === 'upcoming'\n        }\"\n      >{{ 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.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-h-[2px] cqa-bg-[#f3f4f6] cqa-z-0\"\n         style=\"top: 16px;\"></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-gap-2 cqa-bg-white cqa-px-2 cqa-shrink-0\"\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 cqa-w-8 cqa-h-8 cqa-rounded-full cqa-transition-all cqa-duration-200 cqa-font-['Inter'] cqa-text-[12px]\"\n        [ngClass]=\"{\n          'cqa-bg-[#3f43ee] cqa-text-white cqa-font-medium cqa-shadow-[0_0_0_0_rgba(63,67,238,0.2)]': getStatus(i) === 'active',\n          'cqa-bg-[#3f43ee] cqa-text-white': getStatus(i) === 'completed',\n          'cqa-bg-white cqa-border-2 cqa-border-[#e5e7eb] cqa-text-[#d1d5db]': getStatus(i) === 'upcoming'\n        }\"\n      >\n        <mat-icon *ngIf=\"getStatus(i) === 'completed'\" class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">check</mat-icon>\n        <span *ngIf=\"getStatus(i) !== 'completed'\">{{ i + 1 }}</span>\n      </div>\n\n      <!-- Label -->\n      <span\n        class=\"cqa-font-['Inter'] cqa-text-[12px] cqa-whitespace-nowrap cqa-leading-4\"\n        [ngClass]=\"{\n          'cqa-text-[#101828] cqa-font-medium': getStatus(i) === 'active' || getStatus(i) === 'completed',\n          'cqa-text-[#6b7280] cqa-font-normal': getStatus(i) === 'upcoming'\n        }\"\n      >{{ 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');
@@ -43195,6 +43249,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         SearchBarComponent,
         AutocompleteComponent,
         SegmentControlComponent,
+        StepperComponent,
         DialogComponent,
         DynamicTableComponent,
         DynamicCellTemplateDirective,
@@ -43361,6 +43416,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         SearchBarComponent,
         AutocompleteComponent,
         SegmentControlComponent,
+        StepperComponent,
         DialogComponent,
         DynamicTableComponent,
         DynamicCellTemplateDirective,
@@ -43572,6 +43628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         SearchBarComponent,
                         AutocompleteComponent,
                         SegmentControlComponent,
+                        StepperComponent,
                         DialogComponent,
                         DynamicTableComponent,
                         DynamicCellTemplateDirective,
@@ -43744,6 +43801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         SearchBarComponent,
                         AutocompleteComponent,
                         SegmentControlComponent,
+                        StepperComponent,
                         DialogComponent,
                         DynamicTableComponent,
                         DynamicCellTemplateDirective,
@@ -44649,5 +44707,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