@dev-tcloud/tcloud-ui 5.1.2 → 5.1.4
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.
|
@@ -7028,6 +7028,7 @@ class TcRevButtonDirective {
|
|
|
7028
7028
|
});
|
|
7029
7029
|
}
|
|
7030
7030
|
setClasses() {
|
|
7031
|
+
this._el.nativeElement.className = 'tc-rev-btn';
|
|
7031
7032
|
let tcRevButton = this.tcRevButton();
|
|
7032
7033
|
if (!tcRevButton) {
|
|
7033
7034
|
tcRevButton = 'filled';
|
|
@@ -7428,6 +7429,7 @@ class TcRevIconButtonDirective {
|
|
|
7428
7429
|
});
|
|
7429
7430
|
}
|
|
7430
7431
|
setClasses() {
|
|
7432
|
+
this._el.nativeElement.className = 'tc-rev-btn tc-rev-btn-icon';
|
|
7431
7433
|
let tcRevIconButton = this.tcRevIconButton();
|
|
7432
7434
|
if (!tcRevIconButton) {
|
|
7433
7435
|
tcRevIconButton = 'filled';
|
|
@@ -7473,6 +7475,7 @@ class TcRevInputDirective {
|
|
|
7473
7475
|
});
|
|
7474
7476
|
}
|
|
7475
7477
|
setClasses() {
|
|
7478
|
+
this._el.nativeElement.className = 'tc-rev-input-control';
|
|
7476
7479
|
this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-input-control--full-width') : null;
|
|
7477
7480
|
}
|
|
7478
7481
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
@@ -8018,7 +8021,7 @@ class TcRevWizardStepsComponent {
|
|
|
8018
8021
|
this.steps = input.required();
|
|
8019
8022
|
}
|
|
8020
8023
|
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
|
|
8024
|
+
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
8025
|
trigger('progressBarEntering', [
|
|
8023
8026
|
state('in', style({ width: '*' })),
|
|
8024
8027
|
transition('void => *', [
|
|
@@ -8030,7 +8033,7 @@ class TcRevWizardStepsComponent {
|
|
|
8030
8033
|
}
|
|
8031
8034
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevWizardStepsComponent, decorators: [{
|
|
8032
8035
|
type: Component,
|
|
8033
|
-
args: [{ selector: 'tc-rev-wizard-steps', animations: [
|
|
8036
|
+
args: [{ selector: 'tc-rev-wizard-steps', imports: [CommonModule], animations: [
|
|
8034
8037
|
trigger('progressBarEntering', [
|
|
8035
8038
|
state('in', style({ width: '*' })),
|
|
8036
8039
|
transition('void => *', [
|
|
@@ -8038,7 +8041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
8038
8041
|
animate('1.5s 0s ease')
|
|
8039
8042
|
])
|
|
8040
8043
|
])
|
|
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
|
|
8044
|
+
], 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
8045
|
}] });
|
|
8043
8046
|
|
|
8044
8047
|
class TcRevBreadcrumbService {
|
|
@@ -8183,7 +8186,8 @@ class TcRevComponentsLibModule {
|
|
|
8183
8186
|
TcRevTagComponent,
|
|
8184
8187
|
TcRevToastComponent,
|
|
8185
8188
|
TcRevSubNavbarComponent,
|
|
8186
|
-
TcRevSubNavbarItemComponent
|
|
8189
|
+
TcRevSubNavbarItemComponent,
|
|
8190
|
+
TcRevWizardStepsComponent] }); }
|
|
8187
8191
|
}
|
|
8188
8192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevComponentsLibModule, decorators: [{
|
|
8189
8193
|
type: NgModule,
|