@cqa-lib/cqa-ui 1.1.457 → 1.1.458

package/esm2020/lib/stepper/stepper.component.mjs

@@ -21,6 +21,59 @@ export class StepperComponent {
             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)
@@ -34,10 +87,10 @@ export class StepperComponent {
     }
 }
 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"] }] });
+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-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: [] }]
+            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: [{
@@ -47,4 +100,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }], stepChange: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3N0ZXBwZXIvc3RlcHBlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3N0ZXBwZXIvc3RlcHBlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBRUwsTUFBTSxHQUVQLE1BQU0sZUFBZSxDQUFDOzs7O0FBaUJ2QixNQUFNLE9BQU8sZ0JBQWdCO0lBTjdCO1FBT1csVUFBSyxHQUFrQixFQUFFLENBQUM7UUFDMUIsZ0JBQVcsR0FBRyxDQUFDLENBQUM7UUFDaEIsV0FBTSxHQUFHLElBQUksQ0FBQztRQUViLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0tBd0JuRDtJQXRCQyxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsYUFBYSxDQUFDLEVBQUU7WUFDMUIsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUNuRjtJQUNILENBQUM7SUFFRCxTQUFTLENBQUMsS0FBYTtRQUNyQixJQUFJLEtBQUssR0FBRyxJQUFJLENBQUMsV0FBVztZQUFFLE9BQU8sV0FBVyxDQUFDO1FBQ2pELElBQUksS0FBSyxLQUFLLElBQUksQ0FBQyxXQUFXO1lBQUUsT0FBTyxRQUFRLENBQUM7UUFDaEQsT0FBTyxVQUFVLENBQUM7SUFDcEIsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFhO1FBQ3ZCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDL0IsSUFBSSxJQUFJLEVBQUUsUUFBUTtZQUFFLE9BQU87UUFDM0IsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLEtBQUssR0FBRyxJQUFJLENBQUMsV0FBVztZQUFFLE9BQU87UUFDcEQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFhO1FBQ3hCLE9BQU8sS0FBSyxDQUFDO0lBQ2YsQ0FBQzs7NkdBNUJVLGdCQUFnQjtpR0FBaEIsZ0JBQWdCLGtPQ3hCN0IsOCtEQTRDQTsyRkRwQmEsZ0JBQWdCO2tCQU41QixTQUFTOytCQUNFLGFBQWEsUUFHakIsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFOzhCQUdyQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPdXRwdXQsXG4gIFNpbXBsZUNoYW5nZXMsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIFN0ZXBwZXJTdGVwIHtcbiAgbGFiZWw6IHN0cmluZztcbiAgdmFsdWU/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgaWNvbj86IHN0cmluZztcbn1cblxuZXhwb3J0IHR5cGUgU3RlcHBlclN0YXR1cyA9ICd1cGNvbWluZycgfCAnYWN0aXZlJyB8ICdjb21wbGV0ZWQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjcWEtc3RlcHBlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9zdGVwcGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbXSxcbiAgaG9zdDogeyBjbGFzczogJ2NxYS11aS1yb290JyB9LFxufSlcbmV4cG9ydCBjbGFzcyBTdGVwcGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgc3RlcHM6IFN0ZXBwZXJTdGVwW10gPSBbXTtcbiAgQElucHV0KCkgY3VycmVudFN0ZXAgPSAwO1xuICBASW5wdXQoKSBsaW5lYXIgPSB0cnVlO1xuXG4gIEBPdXRwdXQoKSBzdGVwQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzWydjdXJyZW50U3RlcCddKSB7XG4gICAgICB0aGlzLmN1cnJlbnRTdGVwID0gTWF0aC5tYXgoMCwgTWF0aC5taW4odGhpcy5jdXJyZW50U3RlcCwgdGhpcy5zdGVwcy5sZW5ndGggLSAxKSk7XG4gICAgfVxuICB9XG5cbiAgZ2V0U3RhdHVzKGluZGV4OiBudW1iZXIpOiBTdGVwcGVyU3RhdHVzIHtcbiAgICBpZiAoaW5kZXggPCB0aGlzLmN1cnJlbnRTdGVwKSByZXR1cm4gJ2NvbXBsZXRlZCc7XG4gICAgaWYgKGluZGV4ID09PSB0aGlzLmN1cnJlbnRTdGVwKSByZXR1cm4gJ2FjdGl2ZSc7XG4gICAgcmV0dXJuICd1cGNvbWluZyc7XG4gIH1cblxuICBvblN0ZXBDbGljayhpbmRleDogbnVtYmVyKTogdm9pZCB7XG4gICAgY29uc3Qgc3RlcCA9IHRoaXMuc3RlcHNbaW5kZXhdO1xuICAgIGlmIChzdGVwPy5kaXNhYmxlZCkgcmV0dXJuO1xuICAgIGlmICh0aGlzLmxpbmVhciAmJiBpbmRleCA+IHRoaXMuY3VycmVudFN0ZXApIHJldHVybjtcbiAgICB0aGlzLnN0ZXBDaGFuZ2UuZW1pdChpbmRleCk7XG4gIH1cblxuICB0cmFja0J5SW5kZXgoaW5kZXg6IG51bWJlcik6IG51bWJlciB7XG4gICAgcmV0dXJuIGluZGV4O1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY3FhLXVpLXJvb3RcIj5cbiAgPGRpdiBjbGFzcz1cImNxYS1yZWxhdGl2ZSBjcWEtZmxleCBjcWEtaXRlbXMtc3RhcnQgY3FhLWp1c3RpZnktYmV0d2VlbiBjcWEtdy1mdWxsXCI+XG5cbiAgICA8IS0tIEhvcml6b250YWwgY29ubmVjdG9yIGxpbmUgLS0+XG4gICAgPGRpdiBjbGFzcz1cImNxYS1hYnNvbHV0ZSBjcWEtbGVmdC0wIGNxYS1yaWdodC0wIGNxYS1oLVsycHhdIGNxYS1iZy1bI2YzZjRmNl0gY3FhLXotMFwiXG4gICAgICAgICBzdHlsZT1cInRvcDogMTZweDtcIj48L2Rpdj5cblxuICAgIDwhLS0gU3RlcHMgLS0+XG4gICAgPGRpdlxuICAgICAgKm5nRm9yPVwibGV0IHN0ZXAgb2Ygc3RlcHM7IGxldCBpID0gaW5kZXg7IHRyYWNrQnk6IHRyYWNrQnlJbmRleFwiXG4gICAgICBjbGFzcz1cImNxYS1yZWxhdGl2ZSBjcWEtei1bMV0gY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1pdGVtcy1jZW50ZXIgY3FhLWdhcC0yIGNxYS1iZy13aGl0ZSBjcWEtcHgtMiBjcWEtc2hyaW5rLTBcIlxuICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAnY3FhLWN1cnNvci1wb2ludGVyJzogIXN0ZXAuZGlzYWJsZWQgJiYgKCFsaW5lYXIgfHwgaSA8PSBjdXJyZW50U3RlcCksXG4gICAgICAgICdjcWEtY3Vyc29yLWRlZmF1bHQnOiBzdGVwLmRpc2FibGVkIHx8IChsaW5lYXIgJiYgaSA+IGN1cnJlbnRTdGVwKVxuICAgICAgfVwiXG4gICAgICAoY2xpY2spPVwib25TdGVwQ2xpY2soaSlcIlxuICAgICAgW2F0dHIuYXJpYS1jdXJyZW50XT1cImdldFN0YXR1cyhpKSA9PT0gJ2FjdGl2ZScgPyAnc3RlcCcgOiBudWxsXCJcbiAgICAgIHJvbGU9XCJsaXN0aXRlbVwiXG4gICAgPlxuICAgICAgPCEtLSBDaXJjbGUgLS0+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwiY3FhLWZsZXggY3FhLWl0ZW1zLWNlbnRlciBjcWEtanVzdGlmeS1jZW50ZXIgY3FhLXctOCBjcWEtaC04IGNxYS1yb3VuZGVkLWZ1bGwgY3FhLXRyYW5zaXRpb24tYWxsIGNxYS1kdXJhdGlvbi0yMDAgY3FhLWZvbnQtWydJbnRlciddIGNxYS10ZXh0LVsxMnB4XVwiXG4gICAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgICAnY3FhLWJnLVsjM2Y0M2VlXSBjcWEtdGV4dC13aGl0ZSBjcWEtZm9udC1tZWRpdW0gY3FhLXNoYWRvdy1bMF8wXzBfMF9yZ2JhKDYzLDY3LDIzOCwwLjIpXSc6IGdldFN0YXR1cyhpKSA9PT0gJ2FjdGl2ZScsXG4gICAgICAgICAgJ2NxYS1iZy1bIzNmNDNlZV0gY3FhLXRleHQtd2hpdGUnOiBnZXRTdGF0dXMoaSkgPT09ICdjb21wbGV0ZWQnLFxuICAgICAgICAgICdjcWEtYmctd2hpdGUgY3FhLWJvcmRlci0yIGNxYS1ib3JkZXItWyNlNWU3ZWJdIGNxYS10ZXh0LVsjZDFkNWRiXSc6IGdldFN0YXR1cyhpKSA9PT0gJ3VwY29taW5nJ1xuICAgICAgICB9XCJcbiAgICAgID5cbiAgICAgICAgPG1hdC1pY29uICpuZ0lmPVwiZ2V0U3RhdHVzKGkpID09PSAnY29tcGxldGVkJ1wiIGNsYXNzPVwiIWNxYS13LTQgIWNxYS1oLTQgIWNxYS10ZXh0LVsxNnB4XVwiPmNoZWNrPC9tYXQtaWNvbj5cbiAgICAgICAgPHNwYW4gKm5nSWY9XCJnZXRTdGF0dXMoaSkgIT09ICdjb21wbGV0ZWQnXCI+e3sgaSArIDEgfX08L3NwYW4+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPCEtLSBMYWJlbCAtLT5cbiAgICAgIDxzcGFuXG4gICAgICAgIGNsYXNzPVwiY3FhLWZvbnQtWydJbnRlciddIGNxYS10ZXh0LVsxMnB4XSBjcWEtd2hpdGVzcGFjZS1ub3dyYXAgY3FhLWxlYWRpbmctNFwiXG4gICAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgICAnY3FhLXRleHQtWyMxMDE4MjhdIGNxYS1mb250LW1lZGl1bSc6IGdldFN0YXR1cyhpKSA9PT0gJ2FjdGl2ZScgfHwgZ2V0U3RhdHVzKGkpID09PSAnY29tcGxldGVkJyxcbiAgICAgICAgICAnY3FhLXRleHQtWyM2YjcyODBdIGNxYS1mb250LW5vcm1hbCc6IGdldFN0YXR1cyhpKSA9PT0gJ3VwY29taW5nJ1xuICAgICAgICB9XCJcbiAgICAgID57eyBzdGVwLmxhYmVsIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuXG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3N0ZXBwZXIvc3RlcHBlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3N0ZXBwZXIvc3RlcHBlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBRUwsTUFBTSxHQUVQLE1BQU0sZUFBZSxDQUFDOzs7O0FBaUJ2QixNQUFNLE9BQU8sZ0JBQWdCO0lBTjdCO1FBT1csVUFBSyxHQUFrQixFQUFFLENBQUM7UUFDMUIsZ0JBQVcsR0FBRyxDQUFDLENBQUM7UUFDaEIsV0FBTSxHQUFHLElBQUksQ0FBQztRQUViLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0tBc0ZuRDtJQXBGQyxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsYUFBYSxDQUFDLEVBQUU7WUFDMUIsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUNuRjtJQUNILENBQUM7SUFFRCxTQUFTLENBQUMsS0FBYTtRQUNyQixJQUFJLEtBQUssR0FBRyxJQUFJLENBQUMsV0FBVztZQUFFLE9BQU8sV0FBVyxDQUFDO1FBQ2pELElBQUksS0FBSyxLQUFLLElBQUksQ0FBQyxXQUFXO1lBQUUsT0FBTyxRQUFRLENBQUM7UUFDaEQsT0FBTyxVQUFVLENBQUM7SUFDcEIsQ0FBQztJQUVELGVBQWUsQ0FBQyxLQUFhO1FBQzNCLE1BQU0sSUFBSSxHQUEyQjtZQUNuQyxLQUFLLEVBQUUsTUFBTTtZQUNiLE1BQU0sRUFBRSxNQUFNO1lBQ2QsZUFBZSxFQUFFLFFBQVE7WUFDekIsT0FBTyxFQUFFLE1BQU07WUFDZixhQUFhLEVBQUUsUUFBUTtZQUN2QixpQkFBaUIsRUFBRSxRQUFRO1lBQzNCLGFBQWEsRUFBRSxxQkFBcUI7WUFDcEMsV0FBVyxFQUFFLE1BQU07WUFDbkIsVUFBVSxFQUFFLGVBQWU7U0FDNUIsQ0FBQztRQUVGLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFckMsSUFBSSxNQUFNLEtBQUssUUFBUSxFQUFFO1lBQ3ZCLE9BQU87Z0JBQ0wsR0FBRyxJQUFJO2dCQUNQLFVBQVUsRUFBRSxTQUFTO2dCQUNyQixLQUFLLEVBQUUsTUFBTTtnQkFDYixhQUFhLEVBQUUsS0FBSztnQkFDcEIsTUFBTSxFQUFFLE1BQU07Z0JBQ2QsWUFBWSxFQUFFLGdDQUFnQzthQUMvQyxDQUFDO1NBQ0g7UUFFRCxJQUFJLE1BQU0sS0FBSyxXQUFXLEVBQUU7WUFDMUIsT0FBTztnQkFDTCxHQUFHLElBQUk7Z0JBQ1AsVUFBVSxFQUFFLFNBQVM7Z0JBQ3JCLEtBQUssRUFBRSxNQUFNO2dCQUNiLGFBQWEsRUFBRSxLQUFLO2dCQUNwQixNQUFNLEVBQUUsTUFBTTthQUNmLENBQUM7U0FDSDtRQUVELE9BQU87WUFDTCxHQUFHLElBQUk7WUFDUCxVQUFVLEVBQUUsTUFBTTtZQUNsQixLQUFLLEVBQUUsU0FBUztZQUNoQixhQUFhLEVBQUUsS0FBSztZQUNwQixNQUFNLEVBQUUsbUJBQW1CO1NBQzVCLENBQUM7SUFDSixDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQWE7UUFDMUIsTUFBTSxJQUFJLEdBQTJCO1lBQ25DLGFBQWEsRUFBRSxxQkFBcUI7WUFDcEMsV0FBVyxFQUFFLE1BQU07WUFDbkIsYUFBYSxFQUFFLE1BQU07WUFDckIsYUFBYSxFQUFFLFFBQVE7U0FDeEIsQ0FBQztRQUVGLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFckMsSUFBSSxNQUFNLEtBQUssUUFBUSxJQUFJLE1BQU0sS0FBSyxXQUFXLEVBQUU7WUFDakQsT0FBTyxFQUFFLEdBQUcsSUFBSSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsYUFBYSxFQUFFLEtBQUssRUFBRSxDQUFDO1NBQzVEO1FBRUQsT0FBTyxFQUFFLEdBQUcsSUFBSSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsYUFBYSxFQUFFLEtBQUssRUFBRSxDQUFDO0lBQzdELENBQUM7SUFFRCxXQUFXLENBQUMsS0FBYTtRQUN2QixNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQy9CLElBQUksSUFBSSxFQUFFLFFBQVE7WUFBRSxPQUFPO1FBQzNCLElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxLQUFLLEdBQUcsSUFBSSxDQUFDLFdBQVc7WUFBRSxPQUFPO1FBQ3BELElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzlCLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBYTtRQUN4QixPQUFPLEtBQUssQ0FBQztJQUNmLENBQUM7OzZHQTFGVSxnQkFBZ0I7aUdBQWhCLGdCQUFnQixrT0N4QjdCLDg0Q0FzQ0E7MkZEZGEsZ0JBQWdCO2tCQU41QixTQUFTOytCQUNFLGFBQWEsUUFHakIsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFOzhCQUdyQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPdXRwdXQsXG4gIFNpbXBsZUNoYW5nZXMsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIFN0ZXBwZXJTdGVwIHtcbiAgbGFiZWw6IHN0cmluZztcbiAgdmFsdWU/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgaWNvbj86IHN0cmluZztcbn1cblxuZXhwb3J0IHR5cGUgU3RlcHBlclN0YXR1cyA9ICd1cGNvbWluZycgfCAnYWN0aXZlJyB8ICdjb21wbGV0ZWQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjcWEtc3RlcHBlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9zdGVwcGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbXSxcbiAgaG9zdDogeyBjbGFzczogJ2NxYS11aS1yb290JyB9LFxufSlcbmV4cG9ydCBjbGFzcyBTdGVwcGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgc3RlcHM6IFN0ZXBwZXJTdGVwW10gPSBbXTtcbiAgQElucHV0KCkgY3VycmVudFN0ZXAgPSAwO1xuICBASW5wdXQoKSBsaW5lYXIgPSB0cnVlO1xuXG4gIEBPdXRwdXQoKSBzdGVwQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzWydjdXJyZW50U3RlcCddKSB7XG4gICAgICB0aGlzLmN1cnJlbnRTdGVwID0gTWF0aC5tYXgoMCwgTWF0aC5taW4odGhpcy5jdXJyZW50U3RlcCwgdGhpcy5zdGVwcy5sZW5ndGggLSAxKSk7XG4gICAgfVxuICB9XG5cbiAgZ2V0U3RhdHVzKGluZGV4OiBudW1iZXIpOiBTdGVwcGVyU3RhdHVzIHtcbiAgICBpZiAoaW5kZXggPCB0aGlzLmN1cnJlbnRTdGVwKSByZXR1cm4gJ2NvbXBsZXRlZCc7XG4gICAgaWYgKGluZGV4ID09PSB0aGlzLmN1cnJlbnRTdGVwKSByZXR1cm4gJ2FjdGl2ZSc7XG4gICAgcmV0dXJuICd1cGNvbWluZyc7XG4gIH1cblxuICBnZXRDaXJjbGVTdHlsZXMoaW5kZXg6IG51bWJlcik6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4ge1xuICAgIGNvbnN0IGJhc2U6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7XG4gICAgICB3aWR0aDogJzMycHgnLFxuICAgICAgaGVpZ2h0OiAnMzJweCcsXG4gICAgICAnYm9yZGVyLXJhZGl1cyc6ICc5OTk5cHgnLFxuICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAgJ2FsaWduLWl0ZW1zJzogJ2NlbnRlcicsXG4gICAgICAnanVzdGlmeS1jb250ZW50JzogJ2NlbnRlcicsXG4gICAgICAnZm9udC1mYW1pbHknOiBcIidJbnRlcicsIHNhbnMtc2VyaWZcIixcbiAgICAgICdmb250LXNpemUnOiAnMTJweCcsXG4gICAgICB0cmFuc2l0aW9uOiAnYWxsIDAuMnMgZWFzZScsXG4gICAgfTtcblxuICAgIGNvbnN0IHN0YXR1cyA9IHRoaXMuZ2V0U3RhdHVzKGluZGV4KTtcblxuICAgIGlmIChzdGF0dXMgPT09ICdhY3RpdmUnKSB7XG4gICAgICByZXR1cm4ge1xuICAgICAgICAuLi5iYXNlLFxuICAgICAgICBiYWNrZ3JvdW5kOiAnIzNmNDNlZScsXG4gICAgICAgIGNvbG9yOiAnI2ZmZicsXG4gICAgICAgICdmb250LXdlaWdodCc6ICc1MDAnLFxuICAgICAgICBib3JkZXI6ICdub25lJyxcbiAgICAgICAgJ2JveC1zaGFkb3cnOiAnMCAwIDAgMCByZ2JhKDYzLCA2NywgMjM4LCAwLjIpJyxcbiAgICAgIH07XG4gICAgfVxuXG4gICAgaWYgKHN0YXR1cyA9PT0gJ2NvbXBsZXRlZCcpIHtcbiAgICAgIHJldHVybiB7XG4gICAgICAgIC4uLmJhc2UsXG4gICAgICAgIGJhY2tncm91bmQ6ICcjM2Y0M2VlJyxcbiAgICAgICAgY29sb3I6ICcjZmZmJyxcbiAgICAgICAgJ2ZvbnQtd2VpZ2h0JzogJzQwMCcsXG4gICAgICAgIGJvcmRlcjogJ25vbmUnLFxuICAgICAgfTtcbiAgICB9XG5cbiAgICByZXR1cm4ge1xuICAgICAgLi4uYmFzZSxcbiAgICAgIGJhY2tncm91bmQ6ICcjZmZmJyxcbiAgICAgIGNvbG9yOiAnI2QxZDVkYicsXG4gICAgICAnZm9udC13ZWlnaHQnOiAnNDAwJyxcbiAgICAgIGJvcmRlcjogJzJweCBzb2xpZCAjZTVlN2ViJyxcbiAgICB9O1xuICB9XG5cbiAgZ2V0TGFiZWxTdHlsZXMoaW5kZXg6IG51bWJlcik6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4ge1xuICAgIGNvbnN0IGJhc2U6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7XG4gICAgICAnZm9udC1mYW1pbHknOiBcIidJbnRlcicsIHNhbnMtc2VyaWZcIixcbiAgICAgICdmb250LXNpemUnOiAnMTJweCcsXG4gICAgICAnbGluZS1oZWlnaHQnOiAnMTZweCcsXG4gICAgICAnd2hpdGUtc3BhY2UnOiAnbm93cmFwJyxcbiAgICB9O1xuXG4gICAgY29uc3Qgc3RhdHVzID0gdGhpcy5nZXRTdGF0dXMoaW5kZXgpO1xuXG4gICAgaWYgKHN0YXR1cyA9PT0gJ2FjdGl2ZScgfHwgc3RhdHVzID09PSAnY29tcGxldGVkJykge1xuICAgICAgcmV0dXJuIHsgLi4uYmFzZSwgY29sb3I6ICcjMTAxODI4JywgJ2ZvbnQtd2VpZ2h0JzogJzUwMCcgfTtcbiAgICB9XG5cbiAgICByZXR1cm4geyAuLi5iYXNlLCBjb2xvcjogJyM2YjcyODAnLCAnZm9udC13ZWlnaHQnOiAnNDAwJyB9O1xuICB9XG5cbiAgb25TdGVwQ2xpY2soaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIGNvbnN0IHN0ZXAgPSB0aGlzLnN0ZXBzW2luZGV4XTtcbiAgICBpZiAoc3RlcD8uZGlzYWJsZWQpIHJldHVybjtcbiAgICBpZiAodGhpcy5saW5lYXIgJiYgaW5kZXggPiB0aGlzLmN1cnJlbnRTdGVwKSByZXR1cm47XG4gICAgdGhpcy5zdGVwQ2hhbmdlLmVtaXQoaW5kZXgpO1xuICB9XG5cbiAgdHJhY2tCeUluZGV4KGluZGV4OiBudW1iZXIpOiBudW1iZXIge1xuICAgIHJldHVybiBpbmRleDtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImNxYS11aS1yb290XCI+XG4gIDxkaXYgY2xhc3M9XCJjcWEtcmVsYXRpdmUgY3FhLWZsZXggY3FhLWl0ZW1zLXN0YXJ0IGNxYS1qdXN0aWZ5LWJldHdlZW4gY3FhLXctZnVsbFwiPlxuXG4gICAgPCEtLSBIb3Jpem9udGFsIGNvbm5lY3RvciBsaW5lIC0tPlxuICAgIDxkaXYgY2xhc3M9XCJjcWEtYWJzb2x1dGUgY3FhLWxlZnQtMCBjcWEtcmlnaHQtMCBjcWEtei0wXCJcbiAgICAgICAgIHN0eWxlPVwidG9wOiAxNnB4OyBoZWlnaHQ6IDJweDsgYmFja2dyb3VuZDogI2YzZjRmNjtcIj48L2Rpdj5cblxuICAgIDwhLS0gU3RlcHMgLS0+XG4gICAgPGRpdlxuICAgICAgKm5nRm9yPVwibGV0IHN0ZXAgb2Ygc3RlcHM7IGxldCBpID0gaW5kZXg7IHRyYWNrQnk6IHRyYWNrQnlJbmRleFwiXG4gICAgICBjbGFzcz1cImNxYS1yZWxhdGl2ZSBjcWEtei1bMV0gY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1pdGVtcy1jZW50ZXIgY3FhLXNocmluay0wXCJcbiAgICAgIHN0eWxlPVwiZ2FwOiA4cHg7IHBhZGRpbmc6IDAgOHB4OyBiYWNrZ3JvdW5kOiAjZmZmO1wiXG4gICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICdjcWEtY3Vyc29yLXBvaW50ZXInOiAhc3RlcC5kaXNhYmxlZCAmJiAoIWxpbmVhciB8fCBpIDw9IGN1cnJlbnRTdGVwKSxcbiAgICAgICAgJ2NxYS1jdXJzb3ItZGVmYXVsdCc6IHN0ZXAuZGlzYWJsZWQgfHwgKGxpbmVhciAmJiBpID4gY3VycmVudFN0ZXApXG4gICAgICB9XCJcbiAgICAgIChjbGljayk9XCJvblN0ZXBDbGljayhpKVwiXG4gICAgICBbYXR0ci5hcmlhLWN1cnJlbnRdPVwiZ2V0U3RhdHVzKGkpID09PSAnYWN0aXZlJyA/ICdzdGVwJyA6IG51bGxcIlxuICAgICAgcm9sZT1cImxpc3RpdGVtXCJcbiAgICA+XG4gICAgICA8IS0tIENpcmNsZSAtLT5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJjcWEtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1qdXN0aWZ5LWNlbnRlclwiXG4gICAgICAgIFtuZ1N0eWxlXT1cImdldENpcmNsZVN0eWxlcyhpKVwiXG4gICAgICA+XG4gICAgICAgIDxtYXQtaWNvblxuICAgICAgICAgICpuZ0lmPVwiZ2V0U3RhdHVzKGkpID09PSAnY29tcGxldGVkJ1wiXG4gICAgICAgICAgc3R5bGU9XCJmb250LXNpemU6IDE2cHg7IHdpZHRoOiAxNnB4OyBoZWlnaHQ6IDE2cHg7IGNvbG9yOiBpbmhlcml0O1wiXG4gICAgICAgID5jaGVjazwvbWF0LWljb24+XG4gICAgICAgIDxzcGFuICpuZ0lmPVwiZ2V0U3RhdHVzKGkpICE9PSAnY29tcGxldGVkJ1wiPnt7IGkgKyAxIH19PC9zcGFuPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDwhLS0gTGFiZWwgLS0+XG4gICAgICA8c3BhbiBbbmdTdHlsZV09XCJnZXRMYWJlbFN0eWxlcyhpKVwiPnt7IHN0ZXAubGFiZWwgfX08L3NwYW4+XG4gICAgPC9kaXY+XG5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==

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

@@ -43354,6 +43354,40 @@ class StepperComponent {
             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 Object.assign(Object.assign({}, 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 Object.assign(Object.assign({}, base), { background: '#3f43ee', color: '#fff', 'font-weight': '400', border: 'none' });
+        }
+        return Object.assign(Object.assign({}, 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 Object.assign(Object.assign({}, base), { color: '#101828', 'font-weight': '500' });
+        }
+        return Object.assign(Object.assign({}, base), { color: '#6b7280', 'font-weight': '400' });
+    }
     onStepClick(index) {
         const step = this.steps[index];
         if (step === null || step === void 0 ? void 0 : step.disabled)
@@ -43367,10 +43401,10 @@ class StepperComponent {
     }
 }
 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"] }] });
+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-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: [] }]
+            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: [{