@cqa-lib/cqa-ui 1.1.457 → 1.1.458
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/stepper/stepper.component.mjs +56 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs +36 -2
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +55 -2
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/stepper/stepper.component.d.ts +2 -0
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -43212,6 +43212,59 @@ class StepperComponent {
|
|
|
43212
43212
|
return 'active';
|
|
43213
43213
|
return 'upcoming';
|
|
43214
43214
|
}
|
|
43215
|
+
getCircleStyles(index) {
|
|
43216
|
+
const base = {
|
|
43217
|
+
width: '32px',
|
|
43218
|
+
height: '32px',
|
|
43219
|
+
'border-radius': '9999px',
|
|
43220
|
+
display: 'flex',
|
|
43221
|
+
'align-items': 'center',
|
|
43222
|
+
'justify-content': 'center',
|
|
43223
|
+
'font-family': "'Inter', sans-serif",
|
|
43224
|
+
'font-size': '12px',
|
|
43225
|
+
transition: 'all 0.2s ease',
|
|
43226
|
+
};
|
|
43227
|
+
const status = this.getStatus(index);
|
|
43228
|
+
if (status === 'active') {
|
|
43229
|
+
return {
|
|
43230
|
+
...base,
|
|
43231
|
+
background: '#3f43ee',
|
|
43232
|
+
color: '#fff',
|
|
43233
|
+
'font-weight': '500',
|
|
43234
|
+
border: 'none',
|
|
43235
|
+
'box-shadow': '0 0 0 0 rgba(63, 67, 238, 0.2)',
|
|
43236
|
+
};
|
|
43237
|
+
}
|
|
43238
|
+
if (status === 'completed') {
|
|
43239
|
+
return {
|
|
43240
|
+
...base,
|
|
43241
|
+
background: '#3f43ee',
|
|
43242
|
+
color: '#fff',
|
|
43243
|
+
'font-weight': '400',
|
|
43244
|
+
border: 'none',
|
|
43245
|
+
};
|
|
43246
|
+
}
|
|
43247
|
+
return {
|
|
43248
|
+
...base,
|
|
43249
|
+
background: '#fff',
|
|
43250
|
+
color: '#d1d5db',
|
|
43251
|
+
'font-weight': '400',
|
|
43252
|
+
border: '2px solid #e5e7eb',
|
|
43253
|
+
};
|
|
43254
|
+
}
|
|
43255
|
+
getLabelStyles(index) {
|
|
43256
|
+
const base = {
|
|
43257
|
+
'font-family': "'Inter', sans-serif",
|
|
43258
|
+
'font-size': '12px',
|
|
43259
|
+
'line-height': '16px',
|
|
43260
|
+
'white-space': 'nowrap',
|
|
43261
|
+
};
|
|
43262
|
+
const status = this.getStatus(index);
|
|
43263
|
+
if (status === 'active' || status === 'completed') {
|
|
43264
|
+
return { ...base, color: '#101828', 'font-weight': '500' };
|
|
43265
|
+
}
|
|
43266
|
+
return { ...base, color: '#6b7280', 'font-weight': '400' };
|
|
43267
|
+
}
|
|
43215
43268
|
onStepClick(index) {
|
|
43216
43269
|
const step = this.steps[index];
|
|
43217
43270
|
if (step?.disabled)
|
|
@@ -43225,10 +43278,10 @@ class StepperComponent {
|
|
|
43225
43278
|
}
|
|
43226
43279
|
}
|
|
43227
43280
|
StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43228
|
-
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-
|
|
43281
|
+
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"] }] });
|
|
43229
43282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepperComponent, decorators: [{
|
|
43230
43283
|
type: Component,
|
|
43231
|
-
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-
|
|
43284
|
+
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: [] }]
|
|
43232
43285
|
}], propDecorators: { steps: [{
|
|
43233
43286
|
type: Input
|
|
43234
43287
|
}], currentStep: [{
|