@dev-tcloud/tcloud-ui 5.1.2 → 5.1.3
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.
|
@@ -8018,7 +8018,7 @@ class TcRevWizardStepsComponent {
|
|
|
8018
8018
|
this.steps = input.required();
|
|
8019
8019
|
}
|
|
8020
8020
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevWizardStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8021
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevWizardStepsComponent, isStandalone: true, selector: "tc-rev-wizard-steps", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n
|
|
8021
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevWizardStepsComponent, isStandalone: true, selector: "tc-rev-wizard-steps", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tc-rev-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div>\n\n<!-- <div class=\"tcloud-ui-line-step\">\n <div class=\"steps-title-wrapper\">\n <ng-container *ngFor=\"let step of steps; let i = index\">\n <span\n class=\"step-title\"\n [ngStyle]=\"{ 'flex-basis' : 100 / steps.length + '%' }\"\n [ngClass]=\"{ 'completed' : currentStep ? i < currentStep : step.completed }\">\n <ng-container *ngIf=\"showStepCounter\">{{i + 1}}.</ng-container> {{step.title}}\n </span>\n </ng-container>\n </div>\n\n <div class=\"line-wrapper\">\n <div class=\"background-line\"></div>\n <div\n @progressBarEntering\n class=\"progress-line\"\n [ngStyle]=\"{ 'width.%' : currentStep ? ((currentStep / steps.length) * 100) : ((completedSteps / steps.length) * 100) }\">\n </div>\n </div>\n</div> -->\n", styles: [":host{display:block}.tc-rev-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-16)}.tc-rev-wizard-steps--horizontal{flex-direction:row}.tc-rev-wizard-steps--vertical{flex-direction:column}.tc-rev-wizard-steps .tc-rev-wizard-step{align-items:center;display:flex;gap:var(--size-8)}.tc-rev-wizard-steps .tc-rev-wizard-step.vertical{flex-direction:row-reverse;text-align:right}.tc-rev-wizard-steps .tc-rev-wizard-step__info{max-width:13.25rem}.tc-rev-wizard-steps .tc-rev-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;transition:all .3s ease;width:var(--size-40);min-height:var(--size-40);min-width:var(--size-40)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__counter,.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__counter{background-color:var(--c-primary-500);border-color:1px solid var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__title,.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__description,.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__description{color:var(--c-neutral-700)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__counter{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step-divider{background-color:var(--c-neutral-500);transition:all .3s ease}.tc-rev-wizard-steps .tc-rev-wizard-step-divider.completed{background-color:var(--c-primary-500)}.tc-rev-wizard-steps .tc-rev-wizard-step-divider.horizontal{align-self:center;height:3px;width:92px}.tc-rev-wizard-steps .tc-rev-wizard-step-divider.vertical{align-self:flex-end;height:92px;margin-right:18px;width:3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
8022
8022
|
trigger('progressBarEntering', [
|
|
8023
8023
|
state('in', style({ width: '*' })),
|
|
8024
8024
|
transition('void => *', [
|
|
@@ -8030,7 +8030,7 @@ class TcRevWizardStepsComponent {
|
|
|
8030
8030
|
}
|
|
8031
8031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevWizardStepsComponent, decorators: [{
|
|
8032
8032
|
type: Component,
|
|
8033
|
-
args: [{ selector: 'tc-rev-wizard-steps', animations: [
|
|
8033
|
+
args: [{ selector: 'tc-rev-wizard-steps', imports: [CommonModule], animations: [
|
|
8034
8034
|
trigger('progressBarEntering', [
|
|
8035
8035
|
state('in', style({ width: '*' })),
|
|
8036
8036
|
transition('void => *', [
|
|
@@ -8038,7 +8038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
8038
8038
|
animate('1.5s 0s ease')
|
|
8039
8039
|
])
|
|
8040
8040
|
])
|
|
8041
|
-
], template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n
|
|
8041
|
+
], template: "<div [class]=\"'tc-rev-wizard-steps' + ` tc-rev-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tc-rev-wizard-step\"\n [class.tc-rev-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tc-rev-wizard-step--completed]=\"isCompleted\"\n [class.tc-rev-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tc-rev-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tc-rev-wizard-step__info\">\n <p class=\"tc-rev-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tc-rev-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tc-rev-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div>\n\n<!-- <div class=\"tcloud-ui-line-step\">\n <div class=\"steps-title-wrapper\">\n <ng-container *ngFor=\"let step of steps; let i = index\">\n <span\n class=\"step-title\"\n [ngStyle]=\"{ 'flex-basis' : 100 / steps.length + '%' }\"\n [ngClass]=\"{ 'completed' : currentStep ? i < currentStep : step.completed }\">\n <ng-container *ngIf=\"showStepCounter\">{{i + 1}}.</ng-container> {{step.title}}\n </span>\n </ng-container>\n </div>\n\n <div class=\"line-wrapper\">\n <div class=\"background-line\"></div>\n <div\n @progressBarEntering\n class=\"progress-line\"\n [ngStyle]=\"{ 'width.%' : currentStep ? ((currentStep / steps.length) * 100) : ((completedSteps / steps.length) * 100) }\">\n </div>\n </div>\n</div> -->\n", styles: [":host{display:block}.tc-rev-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-16)}.tc-rev-wizard-steps--horizontal{flex-direction:row}.tc-rev-wizard-steps--vertical{flex-direction:column}.tc-rev-wizard-steps .tc-rev-wizard-step{align-items:center;display:flex;gap:var(--size-8)}.tc-rev-wizard-steps .tc-rev-wizard-step.vertical{flex-direction:row-reverse;text-align:right}.tc-rev-wizard-steps .tc-rev-wizard-step__info{max-width:13.25rem}.tc-rev-wizard-steps .tc-rev-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;transition:all .3s ease;width:var(--size-40);min-height:var(--size-40);min-width:var(--size-40)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__counter,.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__counter{background-color:var(--c-primary-500);border-color:1px solid var(--c-primary-500);color:var(--c-neutral-50)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__title,.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--completed .tc-rev-wizard-step__description,.tc-rev-wizard-steps .tc-rev-wizard-step--current .tc-rev-wizard-step__description{color:var(--c-neutral-700)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__counter{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-neutral-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tc-rev-wizard-steps .tc-rev-wizard-step--next .tc-rev-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tc-rev-wizard-steps .tc-rev-wizard-step-divider{background-color:var(--c-neutral-500);transition:all .3s ease}.tc-rev-wizard-steps .tc-rev-wizard-step-divider.completed{background-color:var(--c-primary-500)}.tc-rev-wizard-steps .tc-rev-wizard-step-divider.horizontal{align-self:center;height:3px;width:92px}.tc-rev-wizard-steps .tc-rev-wizard-step-divider.vertical{align-self:flex-end;height:92px;margin-right:18px;width:3px}\n"] }]
|
|
8042
8042
|
}] });
|
|
8043
8043
|
|
|
8044
8044
|
class TcRevBreadcrumbService {
|
|
@@ -8183,7 +8183,8 @@ class TcRevComponentsLibModule {
|
|
|
8183
8183
|
TcRevTagComponent,
|
|
8184
8184
|
TcRevToastComponent,
|
|
8185
8185
|
TcRevSubNavbarComponent,
|
|
8186
|
-
TcRevSubNavbarItemComponent
|
|
8186
|
+
TcRevSubNavbarItemComponent,
|
|
8187
|
+
TcRevWizardStepsComponent] }); }
|
|
8187
8188
|
}
|
|
8188
8189
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevComponentsLibModule, decorators: [{
|
|
8189
8190
|
type: NgModule,
|