new stepper changes
This commit is contained in:
Anas Qureshi
Generated
+90
@@ -32,6 +32,8 @@
|
|||||||
"ngx-echarts": "^21.0.0",
|
"ngx-echarts": "^21.0.0",
|
||||||
"ngx-toastr": "^20.0.5",
|
"ngx-toastr": "^20.0.5",
|
||||||
"preline": "^4.1.2",
|
"preline": "^4.1.2",
|
||||||
|
"primeicons": "^8.0.0",
|
||||||
|
"primeng": "^21.1.9",
|
||||||
"rxjs": "~7.8.0",
|
"rxjs": "~7.8.0",
|
||||||
"simplebar-angular": "^3.3.2",
|
"simplebar-angular": "^3.3.2",
|
||||||
"sweetalert2": "^11.26.25",
|
"sweetalert2": "^11.26.25",
|
||||||
@@ -5092,6 +5094,66 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@primeuix/motion": {
|
||||||
|
"version": "0.0.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/@primeuix/motion/-/motion-0.0.10.tgz",
|
||||||
|
"integrity": "sha512-PsZwOPq79Scp7/ionshRcQ5xKVf9+zuLcyY5mf6onK8chHT5C9JGphmcIZ4CzcqxuGEpsm8AIbTGy+zS3RtzLA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@primeuix/utils": "^0.6.3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.11.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@primeuix/motion/node_modules/@primeuix/utils": {
|
||||||
|
"version": "0.6.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.4.tgz",
|
||||||
|
"integrity": "sha512-pZ5f+vj7wSzRhC7KoEQRU5fvYAe+RP9+m39CTscZ3UywCD1Y2o6Fe1rRgklMPSkzUcty2jzkA0zMYkiJBD1hgg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.11.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@primeuix/styled": {
|
||||||
|
"version": "0.7.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.4.tgz",
|
||||||
|
"integrity": "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@primeuix/utils": "^0.6.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.11.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@primeuix/styled/node_modules/@primeuix/utils": {
|
||||||
|
"version": "0.6.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.4.tgz",
|
||||||
|
"integrity": "sha512-pZ5f+vj7wSzRhC7KoEQRU5fvYAe+RP9+m39CTscZ3UywCD1Y2o6Fe1rRgklMPSkzUcty2jzkA0zMYkiJBD1hgg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.11.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@primeuix/styles": {
|
||||||
|
"version": "2.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-2.0.3.tgz",
|
||||||
|
"integrity": "sha512-2ykAB6BaHzR/6TwF8ShpJTsZrid6cVIEBVlookSdvOdmlWuevGu5vWOScgIwqWwlZcvkFYAGR/SUV3OHCTBMdw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@primeuix/styled": "^0.7.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@primeuix/utils": {
|
||||||
|
"version": "0.7.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.7.2.tgz",
|
||||||
|
"integrity": "sha512-pmEbSfP0Phf9W9RweiM66zXnkn73ZeKyYINElbX3uZ2+stzzaba2svLAl3B1pHVcRw5t43O0VciaGe4ye2EXKw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.11.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@protobufjs/aspromise": {
|
"node_modules/@protobufjs/aspromise": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
|
||||||
@@ -12388,6 +12450,34 @@
|
|||||||
"node": ">= 0.8"
|
"node": ">= 0.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/primeicons": {
|
||||||
|
"version": "8.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/primeicons/-/primeicons-8.0.0.tgz",
|
||||||
|
"integrity": "sha512-eZGk+Mgb4fE+LkJi9LvllbnB4RVUF9kzmnLVnT3ZMY6stqKVh7TUJ0mFoMNIEgTnJSvhaGcJotDiSvtVvkHd7g==",
|
||||||
|
"license": "SEE LICENSE IN LICENSE.md"
|
||||||
|
},
|
||||||
|
"node_modules/primeng": {
|
||||||
|
"version": "21.1.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/primeng/-/primeng-21.1.9.tgz",
|
||||||
|
"integrity": "sha512-Z76PtF08X0PNSTCNMobao8Qm71vC56mtZSdUtX/gsn4+q4x0NbUUtkeK1pc33a+kxVm2zkmOwzUIEGmb9VdoIA==",
|
||||||
|
"license": "SEE LICENSE IN LICENSE.md",
|
||||||
|
"dependencies": {
|
||||||
|
"@primeuix/motion": "^0.0.10",
|
||||||
|
"@primeuix/styled": "^0.7.4",
|
||||||
|
"@primeuix/styles": "^2.0.3",
|
||||||
|
"@primeuix/utils": "^0.7.2",
|
||||||
|
"tslib": "^2.3.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@angular/cdk": "^21.0.0",
|
||||||
|
"@angular/common": "^21.0.0",
|
||||||
|
"@angular/core": "^21.0.7",
|
||||||
|
"@angular/forms": "^21.0.0",
|
||||||
|
"@angular/platform-browser": "^21.0.0",
|
||||||
|
"@angular/router": "^21.0.0",
|
||||||
|
"rxjs": "^6.0.0 || ^7.8.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/proc-log": {
|
"node_modules/proc-log": {
|
||||||
"version": "6.1.0",
|
"version": "6.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
|
||||||
|
|||||||
@@ -51,6 +51,8 @@
|
|||||||
"ngx-echarts": "^21.0.0",
|
"ngx-echarts": "^21.0.0",
|
||||||
"ngx-toastr": "^20.0.5",
|
"ngx-toastr": "^20.0.5",
|
||||||
"preline": "^4.1.2",
|
"preline": "^4.1.2",
|
||||||
|
"primeicons": "^8.0.0",
|
||||||
|
"primeng": "^21.1.9",
|
||||||
"rxjs": "~7.8.0",
|
"rxjs": "~7.8.0",
|
||||||
"simplebar-angular": "^3.3.2",
|
"simplebar-angular": "^3.3.2",
|
||||||
"sweetalert2": "^11.26.25",
|
"sweetalert2": "^11.26.25",
|
||||||
|
|||||||
@@ -1,3 +1,8 @@
|
|||||||
|
<app-stepper></app-stepper>
|
||||||
|
<app-stepper-two></app-stepper-two>
|
||||||
|
<app-stepper-three></app-stepper-three>
|
||||||
|
<app-stepper-four></app-stepper-four>
|
||||||
|
|
||||||
<div class="md:flex block items-center justify-between my-[1.5rem] page-header-breadcrumb">
|
<div class="md:flex block items-center justify-between my-[1.5rem] page-header-breadcrumb">
|
||||||
<div>
|
<div>
|
||||||
<p class="font-semibold text-[1.125rem] text-defaulttextcolor dark:text-defaulttextcolor/70 !mb-0 ">Welcome back,
|
<p class="font-semibold text-[1.125rem] text-defaulttextcolor dark:text-defaulttextcolor/70 !mb-0 ">Welcome back,
|
||||||
|
|||||||
@@ -5,10 +5,14 @@ import { SpkApexcharts } from "../../../@spk/charts/charts/spk-apexcharts/spk-ap
|
|||||||
import { ApexOptions } from 'ng-apexcharts';
|
import { ApexOptions } from 'ng-apexcharts';
|
||||||
import { SpkReusableTables } from "../../../@spk/tables/spk-reusable-tables/spk-reusable-tables";
|
import { SpkReusableTables } from "../../../@spk/tables/spk-reusable-tables/spk-reusable-tables";
|
||||||
import { SpkChartjs } from "../../../@spk/charts/charts/spk-chartjs/spk-chartjs";
|
import { SpkChartjs } from "../../../@spk/charts/charts/spk-chartjs/spk-chartjs";
|
||||||
|
import { StepperComponent } from "../../../shared/components/stepper/stepper.component";
|
||||||
|
import { StepperTwoComponent } from "../../../shared/components/stepper-two/stepper-two.component";
|
||||||
|
import { StepperThreeComponent } from "../../../shared/components/stepper-three/stepper-three.component";
|
||||||
|
import { StepperFourComponent } from "../../../shared/components/stepper-four/stepper-four.component";
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-crm',
|
selector: 'app-crm',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [RouterModule, SpkApexcharts, SpkReusableTables, SpkChartjs],
|
imports: [RouterModule, SpkApexcharts, SpkReusableTables, SpkChartjs, StepperComponent, StepperTwoComponent, StepperThreeComponent, StepperFourComponent],
|
||||||
templateUrl: './crm.html',
|
templateUrl: './crm.html',
|
||||||
styleUrl: './crm.scss'
|
styleUrl: './crm.scss'
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -0,0 +1,396 @@
|
|||||||
|
<div class="custom-stepper-wrapper">
|
||||||
|
<p-stepper [(value)]="activeStep">
|
||||||
|
|
||||||
|
<p-step-list>
|
||||||
|
|
||||||
|
<p-step [value]="1">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
<button class="step-button" (click)="activateCallback()">
|
||||||
|
<span class="step-icon" [class.completed]="activeStep > 1" [class.active]="activeStep === 1">
|
||||||
|
@if (activeStep > 1) {
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else {
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M22 2L11 13"></path>
|
||||||
|
<path d="M22 2l-7 20-4-9-9-4 20-7z"></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
<span class="step-label" [class.completed]="activeStep > 1" [class.active]="activeStep === 1">Flights</span>
|
||||||
|
<span class="step-separator" [class.completed]="activeStep > 1"></span>
|
||||||
|
</button>
|
||||||
|
</ng-template>
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
<p-step [value]="2">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
<button class="step-button" (click)="activateCallback()">
|
||||||
|
<span class="step-icon" [class.completed]="activeStep > 2" [class.active]="activeStep === 2">
|
||||||
|
@if (activeStep > 2) {
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else {
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||||
|
<circle cx="12" cy="7" r="4"></circle>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
<span class="step-label" [class.completed]="activeStep > 2" [class.active]="activeStep === 2">Guests</span>
|
||||||
|
<span class="step-separator" [class.completed]="activeStep > 2"></span>
|
||||||
|
</button>
|
||||||
|
</ng-template>
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
<p-step [value]="3">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
<button class="step-button" (click)="activateCallback()">
|
||||||
|
<span class="step-icon" [class.completed]="activeStep > 3" [class.active]="activeStep === 3">
|
||||||
|
@if (activeStep > 3) {
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else {
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M7 11v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8h2a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-2V4a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v3H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2z"></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
<span class="step-label" [class.completed]="activeStep > 3" [class.active]="activeStep === 3">Seats</span>
|
||||||
|
<span class="step-separator" [class.completed]="activeStep > 3"></span>
|
||||||
|
</button>
|
||||||
|
</ng-template>
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
<p-step [value]="4">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
<button class="step-button" (click)="activateCallback()">
|
||||||
|
<span class="step-icon" [class.completed]="activeStep > 4" [class.active]="activeStep === 4">
|
||||||
|
@if (activeStep > 4) {
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else {
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
|
||||||
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||||
|
<path d="M16 10a4 4 0 0 1-8 0"></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
<span class="step-label" [class.completed]="activeStep > 4" [class.active]="activeStep === 4">Bags</span>
|
||||||
|
<span class="step-separator" [class.completed]="activeStep > 4"></span>
|
||||||
|
</button>
|
||||||
|
</ng-template>
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
<p-step [value]="5">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
<button class="step-button" (click)="activateCallback()">
|
||||||
|
<span class="step-icon" [class.completed]="activeStep > 5" [class.active]="activeStep === 5">
|
||||||
|
@if (activeStep > 5) {
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else {
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="3" width="7" height="7"></rect>
|
||||||
|
<rect x="14" y="3" width="7" height="7"></rect>
|
||||||
|
<rect x="14" y="14" width="7" height="7"></rect>
|
||||||
|
<rect x="3" y="14" width="7" height="7"></rect>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
<span class="step-label" [class.completed]="activeStep > 5" [class.active]="activeStep === 5">Extras</span>
|
||||||
|
<span class="step-separator" [class.completed]="activeStep > 5"></span>
|
||||||
|
</button>
|
||||||
|
</ng-template>
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
<p-step [value]="6">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
<button class="step-button" (click)="activateCallback()">
|
||||||
|
<span class="step-icon" [class.completed]="activeStep > 6" [class.active]="activeStep === 6">
|
||||||
|
@if (activeStep > 6) {
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else {
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
|
||||||
|
<line x1="1" y1="10" x2="23" y2="10"></line>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
<span class="step-label" [class.completed]="activeStep > 6" [class.active]="activeStep === 6">Payment</span>
|
||||||
|
</button>
|
||||||
|
</ng-template>
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
</p-step-list>
|
||||||
|
|
||||||
|
<p-step-panels>
|
||||||
|
|
||||||
|
<p-step-panel [value]="1">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-3">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f1-departure" type="text" value="New York" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f1-departure" class="custom-floating-label">Departure City</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-3">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f1-arrival" type="text" value="London" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f1-arrival" class="custom-floating-label">Arrival City</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-3">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f1-depart-date" type="text" value="2026-08-15" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f1-depart-date" class="custom-floating-label">Departure Date</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-3">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f1-return-date" type="text" value="2026-08-22" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f1-return-date" class="custom-floating-label">Return Date</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer">
|
||||||
|
<p-button
|
||||||
|
(onClick)="activateCallback(2)"
|
||||||
|
label="Next"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
iconPos="right"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
<p-step-panel [value]="2">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f2-passenger" type="text" value="John Doe" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f2-passenger" class="custom-floating-label">Primary Passenger</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f2-email" type="email" value="john@mail.com" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f2-email" class="custom-floating-label">Email Address</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f2-phone" type="text" value="+1 555 123 4567" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f2-phone" class="custom-floating-label">Phone Number</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer between">
|
||||||
|
<p-button
|
||||||
|
(onClick)="activateCallback(1)"
|
||||||
|
label="Back"
|
||||||
|
severity="secondary"
|
||||||
|
icon="pi pi-arrow-left"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
/>
|
||||||
|
<p-button
|
||||||
|
(onClick)="activateCallback(3)"
|
||||||
|
label="Next"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
iconPos="right"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
<p-step-panel [value]="3">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-6">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f3-cabin" type="text" value="Business" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f3-cabin" class="custom-floating-label">Cabin Class</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-6">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f3-seat" type="text" value="Window" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f3-seat" class="custom-floating-label">Seat Preference</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer between">
|
||||||
|
<p-button
|
||||||
|
(onClick)="activateCallback(2)"
|
||||||
|
label="Back"
|
||||||
|
severity="secondary"
|
||||||
|
icon="pi pi-arrow-left"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
/>
|
||||||
|
<p-button
|
||||||
|
(onClick)="activateCallback(4)"
|
||||||
|
label="Next"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
iconPos="right"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
<p-step-panel [value]="4">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f4-carryon" type="number" value="1" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f4-carryon" class="custom-floating-label">Carry-on Bags</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f4-checked" type="number" value="2" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f4-checked" class="custom-floating-label">Checked Bags</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f4-weight" type="number" value="23" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f4-weight" class="custom-floating-label">Extra Weight (kg)</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer between">
|
||||||
|
<p-button
|
||||||
|
(onClick)="activateCallback(3)"
|
||||||
|
label="Back"
|
||||||
|
severity="secondary"
|
||||||
|
icon="pi pi-arrow-left"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
/>
|
||||||
|
<p-button
|
||||||
|
(onClick)="activateCallback(5)"
|
||||||
|
label="Next"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
iconPos="right"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
<p-step-panel [value]="5">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-6">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f5-meal" type="text" value="Vegetarian" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f5-meal" class="custom-floating-label">Meal Preference</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-6">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f5-wifi" type="text" value="Yes" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f5-wifi" class="custom-floating-label">Wi-Fi Access</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer between">
|
||||||
|
<p-button
|
||||||
|
(onClick)="activateCallback(4)"
|
||||||
|
label="Back"
|
||||||
|
severity="secondary"
|
||||||
|
icon="pi pi-arrow-left"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
/>
|
||||||
|
<p-button
|
||||||
|
(onClick)="activateCallback(6)"
|
||||||
|
label="Next"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
iconPos="right"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
<p-step-panel [value]="6">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-3">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f6-holder" type="text" value="John Doe" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f6-holder" class="custom-floating-label">Card Holder</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-3">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f6-card" type="text" value="4111 1111 1111 1111" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f6-card" class="custom-floating-label">Card Number</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-3">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f6-expiry" type="text" value="12/28" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f6-expiry" class="custom-floating-label">Expiry Date</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-3">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="f6-cvv" type="number" value="123" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="f6-cvv" class="custom-floating-label">CVV</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer">
|
||||||
|
<p-button
|
||||||
|
(onClick)="activateCallback(5)"
|
||||||
|
label="Back"
|
||||||
|
severity="secondary"
|
||||||
|
icon="pi pi-arrow-left"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
</p-step-panels>
|
||||||
|
|
||||||
|
</p-stepper>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,401 @@
|
|||||||
|
$purple: #7c5cfa;
|
||||||
|
$purple-light: #e7dcff;
|
||||||
|
$line-grey: #e5e7eb;
|
||||||
|
$text-grey: #6b7280;
|
||||||
|
$text-dark: #1f2937;
|
||||||
|
$white: #ffffff;
|
||||||
|
|
||||||
|
.custom-stepper-wrapper {
|
||||||
|
margin-top: 24px;
|
||||||
|
width: 100%;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 24px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
|
||||||
|
padding: 24px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
::ng-deep {
|
||||||
|
|
||||||
|
.p-stepper {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper-separator {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step-list {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 0 24px;
|
||||||
|
padding: 24px 32px;
|
||||||
|
background: $white;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step {
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step:last-of-type {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step-header {
|
||||||
|
|
||||||
|
display: flex !important;
|
||||||
|
width: 100% !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-button {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: $text-dark;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&:hover .step-icon:not(.active):not(.completed) {
|
||||||
|
border-color: $purple;
|
||||||
|
color: $purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-icon {
|
||||||
|
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $white;
|
||||||
|
border: 2px solid $line-grey;
|
||||||
|
color: $text-grey;
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
transition: .3s;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&.completed {
|
||||||
|
|
||||||
|
background: $purple;
|
||||||
|
border-color: $purple;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
|
||||||
|
background: $purple-light;
|
||||||
|
border-color: $purple;
|
||||||
|
color: $purple;
|
||||||
|
box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-icon svg {
|
||||||
|
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-label {
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-grey;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: color .3s;
|
||||||
|
|
||||||
|
&.active,
|
||||||
|
&.completed {
|
||||||
|
color: $purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-separator {
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
min-width: 24px;
|
||||||
|
margin-left: 16px;
|
||||||
|
margin-right: 16px;
|
||||||
|
border-top: 2px dotted #9ca3af;
|
||||||
|
height: 0;
|
||||||
|
transition: border-color .3s;
|
||||||
|
|
||||||
|
&.completed {
|
||||||
|
border-color: $purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-card {
|
||||||
|
|
||||||
|
background: $white;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 32px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
|
||||||
|
min-height: 16rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: $text-grey;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-dark;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-icon {
|
||||||
|
|
||||||
|
font-size: 64px;
|
||||||
|
color: $purple;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-footer {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-form {
|
||||||
|
|
||||||
|
background: $white;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 32px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-field {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 2.5rem;
|
||||||
|
padding: 0.75rem 0.75rem 0.5rem;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background: #ffffff;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
color: #111827;
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
outline: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input:focus,
|
||||||
|
.custom-floating-input:not(:placeholder-shown),
|
||||||
|
.custom-floating-input:active {
|
||||||
|
border: 2px solid $purple;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15);
|
||||||
|
animation: input-focus-ring 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes input-focus-ring {
|
||||||
|
0% { box-shadow: 0 0 0 0 rgba(124, 92, 250, 0.3); }
|
||||||
|
100% { box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.custom-floating-input::placeholder {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-label {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.75rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
transform-origin: left top;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 0 0.25rem;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: top 0.2s ease, transform 0.2s ease, color 0.2s ease;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: calc(100% - 1.5rem);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input:focus~.custom-floating-label,
|
||||||
|
.custom-floating-input:not(:placeholder-shown)~.custom-floating-label {
|
||||||
|
top: 0;
|
||||||
|
transform: translateY(-50%) scale(0.9);
|
||||||
|
color: $purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input[type='number']::-webkit-inner-spin-button,
|
||||||
|
.custom-floating-input[type='number']::-webkit-outer-spin-button {
|
||||||
|
appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input[type='number'] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .panel-footer.between {
|
||||||
|
|
||||||
|
// justify-content: space-between;
|
||||||
|
// }
|
||||||
|
|
||||||
|
::ng-deep {
|
||||||
|
|
||||||
|
.step-btn-next {
|
||||||
|
|
||||||
|
background: linear-gradient(135deg, #7c5cfa, #a78bfa) !important;
|
||||||
|
color: $white !important;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 9999px !important;
|
||||||
|
padding: 0.55rem 1.4rem !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
box-shadow: 0 4px 12px rgba(124, 92, 250, 0.35) !important;
|
||||||
|
transition: transform .2s, box-shadow .2s, filter .2s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-btn-next:hover {
|
||||||
|
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 16px rgba(124, 92, 250, 0.45) !important;
|
||||||
|
filter: brightness(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-btn-back {
|
||||||
|
|
||||||
|
background: $white !important;
|
||||||
|
color: $text-grey !important;
|
||||||
|
border: 1px solid $line-grey !important;
|
||||||
|
border-radius: 9999px !important;
|
||||||
|
padding: 0.55rem 1.4rem !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
transition: transform .2s, border-color .2s, color .2s, background .2s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-btn-back:hover {
|
||||||
|
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: $purple !important;
|
||||||
|
color: $purple !important;
|
||||||
|
background: #f9fafb !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
.custom-stepper-wrapper {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep {
|
||||||
|
|
||||||
|
.p-step-list {
|
||||||
|
padding: 16px;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step {
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-icon {
|
||||||
|
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-icon svg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-label {
|
||||||
|
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-separator {
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-card {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-form {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .p-steplist {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .p-steppanel-content {
|
||||||
|
margin-left: 0px !important;
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
/* tslint:disable:no-unused-variable */
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
import { By } from '@angular/platform-browser';
|
||||||
|
import { DebugElement } from '@angular/core';
|
||||||
|
|
||||||
|
import { StepperFourComponent } from './stepper-four.component';
|
||||||
|
|
||||||
|
describe('StepperFourComponent', () => {
|
||||||
|
let component: StepperFourComponent;
|
||||||
|
let fixture: ComponentFixture<StepperFourComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ StepperFourComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(StepperFourComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { ButtonModule } from 'primeng/button';
|
||||||
|
import { PasswordModule } from 'primeng/password';
|
||||||
|
import { StepperModule } from 'primeng/stepper';
|
||||||
|
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||||
|
import { InputTextModule } from 'primeng/inputtext';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-stepper-four',
|
||||||
|
templateUrl: './stepper-four.component.html',
|
||||||
|
styleUrls: ['./stepper-four.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule, ButtonModule, PasswordModule, StepperModule, ToggleButtonModule, InputTextModule, FormsModule]
|
||||||
|
})
|
||||||
|
export class StepperFourComponent implements OnInit {
|
||||||
|
activeStep: number = 1;
|
||||||
|
name: string | undefined = undefined;
|
||||||
|
email: string | undefined = undefined;
|
||||||
|
password: string | undefined = undefined;
|
||||||
|
option1: boolean | undefined = false;
|
||||||
|
option2: boolean | undefined = false;
|
||||||
|
option3: boolean | undefined = false;
|
||||||
|
option4: boolean | undefined = false;
|
||||||
|
option5: boolean | undefined = false;
|
||||||
|
option6: boolean | undefined = false;
|
||||||
|
option7: boolean | undefined = false;
|
||||||
|
option8: boolean | undefined = false;
|
||||||
|
option9: boolean | undefined = false;
|
||||||
|
option10: boolean | undefined = false;
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,149 @@
|
|||||||
|
<div class="card">
|
||||||
|
|
||||||
|
<p-stepper [(value)]="activeStep">
|
||||||
|
|
||||||
|
<p-step-item [value]="1" [class.done]="activeStep > 1">
|
||||||
|
|
||||||
|
<p-step>Header I</p-step>
|
||||||
|
|
||||||
|
<p-step-panel [value]="1">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s1-first-name" type="text" value="John" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s1-first-name" class="custom-floating-label">First Name</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s1-last-name" type="text" value="Doe" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s1-last-name" class="custom-floating-label">Last Name</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s1-email" type="email" value="john.doe@mail.com" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s1-email" class="custom-floating-label">Email Address</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-footer">
|
||||||
|
<p-button
|
||||||
|
label="Next"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
(onClick)="activateCallback(2)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
</p-step-item>
|
||||||
|
|
||||||
|
<p-step-item [value]="2" [class.done]="activeStep > 2">
|
||||||
|
|
||||||
|
<p-step>Header II</p-step>
|
||||||
|
|
||||||
|
<p-step-panel [value]="2">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s2-street" type="text" value="742 Maple Avenue" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s2-street" class="custom-floating-label">Street</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s2-city" type="text" value="Austin" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s2-city" class="custom-floating-label">City</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s2-postal" type="text" value="73301" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s2-postal" class="custom-floating-label">Postal Code</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-footer between">
|
||||||
|
<p-button
|
||||||
|
label="Back"
|
||||||
|
severity="secondary"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
(onClick)="activateCallback(1)"
|
||||||
|
/>
|
||||||
|
<p-button
|
||||||
|
label="Next"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
(onClick)="activateCallback(3)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
</p-step-item>
|
||||||
|
|
||||||
|
<p-step-item [value]="3" [class.done]="activeStep > 3">
|
||||||
|
|
||||||
|
<p-step>Header III</p-step>
|
||||||
|
|
||||||
|
<p-step-panel [value]="3">
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s3-username" type="text" value="johndoe" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s3-username" class="custom-floating-label">Username</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s3-phone" type="text" value="+1 555 019 2834" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s3-phone" class="custom-floating-label">Phone Number</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s3-country" type="text" value="United States" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s3-country" class="custom-floating-label">Country</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-footer">
|
||||||
|
<p-button
|
||||||
|
label="Back"
|
||||||
|
severity="secondary"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
(onClick)="activateCallback(2)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
</p-step-item>
|
||||||
|
|
||||||
|
</p-stepper>
|
||||||
|
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,345 @@
|
|||||||
|
$purple: #7c5cfa;
|
||||||
|
$purple-light: #e7dcff;
|
||||||
|
$line-grey: #e5e7eb;
|
||||||
|
$pending-text: #6b7280;
|
||||||
|
$title-color: #374151;
|
||||||
|
$active-text: #7c5cfa;
|
||||||
|
$white: #ffffff;
|
||||||
|
$card-bg: #ffffff;
|
||||||
|
$panel-bg: #f9fafb;
|
||||||
|
$panel-border: #dcdcdc;
|
||||||
|
$step-gap: 12px;
|
||||||
|
$step-gap-mobile: 10px;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
|
||||||
|
background: $card-bg;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 24px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep {
|
||||||
|
|
||||||
|
.p-stepper {
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper-separator {
|
||||||
|
display: none !important;
|
||||||
|
width: 0 !important;
|
||||||
|
height: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-stepitem {
|
||||||
|
|
||||||
|
position: relative !important;
|
||||||
|
z-index: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: $step-gap !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child)::after {
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
left: 20px;
|
||||||
|
width: 2px;
|
||||||
|
bottom: -$step-gap;
|
||||||
|
background: $line-grey;
|
||||||
|
border-radius: 999px;
|
||||||
|
z-index: -1;
|
||||||
|
transition: background .35s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.done:not(:last-child)::after {
|
||||||
|
|
||||||
|
background: linear-gradient(180deg, $purple 0%, #a78bfa 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-step-header {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
gap: 12px !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
width: 100% !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-step-number {
|
||||||
|
|
||||||
|
width: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
border-radius: 50% !important;
|
||||||
|
background: $white !important;
|
||||||
|
border: 2px solid $line-grey !important;
|
||||||
|
color: $pending-text !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
align-items: center !important;
|
||||||
|
position: relative !important;
|
||||||
|
z-index: 2 !important;
|
||||||
|
transition: .3s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-step-active .p-step-number {
|
||||||
|
|
||||||
|
background: $white !important;
|
||||||
|
border-color: $purple !important;
|
||||||
|
color: $purple !important;
|
||||||
|
box-shadow: 0 0 0 5px $purple-light !important;
|
||||||
|
transform: scale(1.08) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-stepitem.done .p-step-number {
|
||||||
|
|
||||||
|
background: $purple !important;
|
||||||
|
border-color: $purple !important;
|
||||||
|
color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-stepitem.done .p-step-number::after {
|
||||||
|
|
||||||
|
content: "✓";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: $white;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-step-title {
|
||||||
|
|
||||||
|
font-size: 15px !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
color: $title-color !important;
|
||||||
|
transition: color .3s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-step-active .p-step-title,
|
||||||
|
.p-stepper .p-stepitem.done .p-step-title {
|
||||||
|
|
||||||
|
color: $purple !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-steppanel-content-wrapper {
|
||||||
|
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-steppanel-content {
|
||||||
|
|
||||||
|
padding: 16px 0 0 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
margin-left: 52px !important;
|
||||||
|
width: auto !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-form {
|
||||||
|
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
form {
|
||||||
|
background: $panel-bg;
|
||||||
|
border: 2px dashed $panel-border;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-field {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 2.5rem;
|
||||||
|
padding: 0.75rem 0.75rem 0.5rem;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background: #ffffff;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
color: #111827;
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
outline: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input:focus,
|
||||||
|
.custom-floating-input:not(:placeholder-shown),
|
||||||
|
.custom-floating-input:active {
|
||||||
|
border: 2px solid $purple;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15);
|
||||||
|
animation: input-focus-ring 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes input-focus-ring {
|
||||||
|
0% { box-shadow: 0 0 0 0 rgba(124, 92, 250, 0.3); }
|
||||||
|
100% { box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.custom-floating-input::placeholder {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-label {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.75rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
transform-origin: left top;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 0 0.25rem;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: top 0.2s ease, transform 0.2s ease, color 0.2s ease;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: calc(100% - 1.5rem);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input:focus~.custom-floating-label,
|
||||||
|
.custom-floating-input:not(:placeholder-shown)~.custom-floating-label {
|
||||||
|
top: 0;
|
||||||
|
transform: translateY(-50%) scale(0.9);
|
||||||
|
color: $purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input[type='number']::-webkit-inner-spin-button,
|
||||||
|
.custom-floating-input[type='number']::-webkit-outer-spin-button {
|
||||||
|
appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input[type='number'] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-footer {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .panel-footer.between {
|
||||||
|
|
||||||
|
// justify-content: space-between;
|
||||||
|
// }
|
||||||
|
|
||||||
|
::ng-deep {
|
||||||
|
|
||||||
|
.step-btn-next {
|
||||||
|
|
||||||
|
background: linear-gradient(135deg, #7c5cfa, #a78bfa) !important;
|
||||||
|
color: $white !important;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 9999px !important;
|
||||||
|
padding: 0.55rem 1.4rem !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
box-shadow: 0 4px 12px rgba(124, 92, 250, 0.35) !important;
|
||||||
|
transition: transform .2s, box-shadow .2s, filter .2s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-btn-next:hover {
|
||||||
|
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 16px rgba(124, 92, 250, 0.45) !important;
|
||||||
|
filter: brightness(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-btn-back {
|
||||||
|
|
||||||
|
background: $white !important;
|
||||||
|
color: $pending-text !important;
|
||||||
|
border: 1px solid $line-grey !important;
|
||||||
|
border-radius: 9999px !important;
|
||||||
|
padding: 0.55rem 1.4rem !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
transition: transform .2s, border-color .2s, color .2s, background .2s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-btn-back:hover {
|
||||||
|
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: $purple !important;
|
||||||
|
color: $purple !important;
|
||||||
|
background: #f9fafb !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep {
|
||||||
|
|
||||||
|
.p-stepper .p-stepitem:not(:first-child) {
|
||||||
|
margin-top: $step-gap-mobile !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-stepitem:not(:last-child)::after {
|
||||||
|
top: 34px;
|
||||||
|
left: 17px;
|
||||||
|
bottom: -$step-gap-mobile;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-step-number {
|
||||||
|
width: 34px !important;
|
||||||
|
height: 34px !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-step-active .p-step-number {
|
||||||
|
box-shadow: 0 0 0 4px $purple-light !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-step-title {
|
||||||
|
font-size: 13px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper .p-steppanel-content {
|
||||||
|
margin-left: 44px !important;
|
||||||
|
width: auto !important;
|
||||||
|
padding-top: 12px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-form form {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-footer {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
/* tslint:disable:no-unused-variable */
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
import { By } from '@angular/platform-browser';
|
||||||
|
import { DebugElement } from '@angular/core';
|
||||||
|
|
||||||
|
import { StepperThreeComponent } from './stepper-three.component';
|
||||||
|
|
||||||
|
describe('StepperThreeComponent', () => {
|
||||||
|
let component: StepperThreeComponent;
|
||||||
|
let fixture: ComponentFixture<StepperThreeComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ StepperThreeComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(StepperThreeComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { ButtonModule } from 'primeng/button';
|
||||||
|
import { StepperModule } from 'primeng/stepper';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-stepper-three',
|
||||||
|
templateUrl: './stepper-three.component.html',
|
||||||
|
styleUrls: ['./stepper-three.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule, ButtonModule, StepperModule]
|
||||||
|
})
|
||||||
|
export class StepperThreeComponent implements OnInit {
|
||||||
|
|
||||||
|
activeStep = 1;
|
||||||
|
|
||||||
|
changeStep(step: number) {
|
||||||
|
this.activeStep = step;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,575 @@
|
|||||||
|
<div class="custom-stepper-wrapper" [style.--completed-width.%]="((activeStep - 1) / 5) * 100">
|
||||||
|
|
||||||
|
<p-stepper [value]="activeStep">
|
||||||
|
|
||||||
|
<p-step-list>
|
||||||
|
|
||||||
|
<p-step [value]="1" [class.done]="activeStep > 1">
|
||||||
|
<ng-template #content>
|
||||||
|
|
||||||
|
<div class="custom-step">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-circle"
|
||||||
|
[class.completed]="activeStep > 1"
|
||||||
|
[class.active]="activeStep === 1"
|
||||||
|
(click)="changeStep(1)"
|
||||||
|
>
|
||||||
|
@if (activeStep > 1) {
|
||||||
|
<svg
|
||||||
|
class="check-icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else {
|
||||||
|
<span class="step-number">1</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-text"
|
||||||
|
[class.active]="activeStep === 1"
|
||||||
|
[class.completed]="activeStep > 1"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="step-title">Step 1</div>
|
||||||
|
<div class="step-subtitle">Plan</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
<p-step [value]="2" [class.done]="activeStep > 2">
|
||||||
|
<ng-template #content>
|
||||||
|
|
||||||
|
<div class="custom-step">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-circle"
|
||||||
|
[class.completed]="activeStep > 2"
|
||||||
|
[class.active]="activeStep === 2"
|
||||||
|
(click)="changeStep(2)"
|
||||||
|
>
|
||||||
|
@if (activeStep > 2) {
|
||||||
|
<svg
|
||||||
|
class="check-icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else {
|
||||||
|
<span class="step-number">2</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-text"
|
||||||
|
[class.active]="activeStep === 2"
|
||||||
|
[class.completed]="activeStep > 2"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="step-title">Step 2</div>
|
||||||
|
<div class="step-subtitle">Design</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
<p-step [value]="3" [class.done]="activeStep > 3">
|
||||||
|
<ng-template #content>
|
||||||
|
|
||||||
|
<div class="custom-step">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-circle"
|
||||||
|
[class.completed]="activeStep > 3"
|
||||||
|
[class.active]="activeStep === 3"
|
||||||
|
(click)="changeStep(3)"
|
||||||
|
>
|
||||||
|
@if (activeStep > 3) {
|
||||||
|
<svg
|
||||||
|
class="check-icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else {
|
||||||
|
<span class="step-number">3</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-text"
|
||||||
|
[class.active]="activeStep === 3"
|
||||||
|
[class.completed]="activeStep > 3"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="step-title">Step 3</div>
|
||||||
|
<div class="step-subtitle">Build</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
<p-step [value]="4" [class.done]="activeStep > 4">
|
||||||
|
<ng-template #content>
|
||||||
|
|
||||||
|
<div class="custom-step">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-circle"
|
||||||
|
[class.completed]="activeStep > 4"
|
||||||
|
[class.active]="activeStep === 4"
|
||||||
|
(click)="changeStep(4)"
|
||||||
|
>
|
||||||
|
@if (activeStep > 4) {
|
||||||
|
<svg
|
||||||
|
class="check-icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else {
|
||||||
|
<span class="step-number">4</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-text"
|
||||||
|
[class.active]="activeStep === 4"
|
||||||
|
[class.completed]="activeStep > 4"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="step-title">Step 4</div>
|
||||||
|
<div class="step-subtitle">Test</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
<p-step [value]="5" [class.done]="activeStep > 5">
|
||||||
|
<ng-template #content>
|
||||||
|
|
||||||
|
<div class="custom-step">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-circle"
|
||||||
|
[class.completed]="activeStep > 5"
|
||||||
|
[class.active]="activeStep === 5"
|
||||||
|
(click)="changeStep(5)"
|
||||||
|
>
|
||||||
|
@if (activeStep > 5) {
|
||||||
|
<svg
|
||||||
|
class="check-icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else {
|
||||||
|
<span class="step-number">5</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-text"
|
||||||
|
[class.active]="activeStep === 5"
|
||||||
|
[class.completed]="activeStep > 5"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="step-title">Step 5</div>
|
||||||
|
<div class="step-subtitle">Deploy</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
<p-step [value]="6" [class.done]="activeStep > 6">
|
||||||
|
<ng-template #content>
|
||||||
|
|
||||||
|
<div class="custom-step">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-circle"
|
||||||
|
[class.completed]="activeStep > 6"
|
||||||
|
[class.active]="activeStep === 6"
|
||||||
|
(click)="changeStep(6)"
|
||||||
|
>
|
||||||
|
@if (activeStep > 6) {
|
||||||
|
<svg
|
||||||
|
class="check-icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else {
|
||||||
|
<span class="step-number">6</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-text"
|
||||||
|
[class.active]="activeStep === 6"
|
||||||
|
[class.completed]="activeStep > 6"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="step-title">Step 6</div>
|
||||||
|
<div class="step-subtitle">Launch</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
</p-step-list>
|
||||||
|
|
||||||
|
<p-step-panels>
|
||||||
|
|
||||||
|
<p-step-panel [value]="1">
|
||||||
|
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-6">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t1-plan-name" type="text" value="Q3 Marketing Plan" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t1-plan-name" class="custom-floating-label">Plan Name</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-6">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t1-owner" type="text" value="Sarah Chen" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t1-owner" class="custom-floating-label">Owner</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-footer">
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Next"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
iconPos="right"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
(onClick)="changeStep(2); activateCallback(2)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
<p-step-panel [value]="2">
|
||||||
|
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t2-tool" type="text" value="Figma" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t2-tool" class="custom-floating-label">Design Tool</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t2-screens" type="number" value="24" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t2-screens" class="custom-floating-label">Screen Count</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t2-deadline" type="text" value="2026-08-30" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t2-deadline" class="custom-floating-label">Deadline</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-footer between">
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Back"
|
||||||
|
icon="pi pi-arrow-left"
|
||||||
|
severity="secondary"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
(onClick)="changeStep(1); activateCallback(1)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Next"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
iconPos="right"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
(onClick)="changeStep(3); activateCallback(3)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
<p-step-panel [value]="3">
|
||||||
|
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-3">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t3-repo" type="text" value="syscom-ui" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t3-repo" class="custom-floating-label">Repository</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-3">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t3-branch" type="text" value="main" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t3-branch" class="custom-floating-label">Branch</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-3">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t3-version" type="text" value="v2.4.0" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t3-version" class="custom-floating-label">Version</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-3">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t3-build" type="text" value="stable" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t3-build" class="custom-floating-label">Build Type</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-footer between">
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Back"
|
||||||
|
icon="pi pi-arrow-left"
|
||||||
|
severity="secondary"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
(onClick)="changeStep(2); activateCallback(2)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Next"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
iconPos="right"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
(onClick)="changeStep(4); activateCallback(4)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
<p-step-panel [value]="4">
|
||||||
|
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-6">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t4-env" type="text" value="Staging" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t4-env" class="custom-floating-label">Environment</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-6">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t4-cases" type="number" value="156" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t4-cases" class="custom-floating-label">Test Cases</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-footer between">
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Back"
|
||||||
|
icon="pi pi-arrow-left"
|
||||||
|
severity="secondary"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
(onClick)="changeStep(3); activateCallback(3)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Next"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
iconPos="right"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
(onClick)="changeStep(5); activateCallback(5)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
<p-step-panel [value]="5">
|
||||||
|
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t5-server" type="text" value="AWS" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t5-server" class="custom-floating-label">Server</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t5-region" type="text" value="us-east-1" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t5-region" class="custom-floating-label">Region</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t5-domain" type="text" value="app.syscom.com" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t5-domain" class="custom-floating-label">Domain</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-footer between">
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Back"
|
||||||
|
icon="pi pi-arrow-left"
|
||||||
|
severity="secondary"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
(onClick)="changeStep(4); activateCallback(4)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Next"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
iconPos="right"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
(onClick)="changeStep(6); activateCallback(6)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
<p-step-panel [value]="6">
|
||||||
|
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-6">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t6-release" type="text" value="2026-09-01" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t6-release" class="custom-floating-label">Release Date</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-6">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="t6-status" type="text" value="Live" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="t6-status" class="custom-floating-label">Status</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-footer">
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Back"
|
||||||
|
icon="pi pi-arrow-left"
|
||||||
|
severity="secondary"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
(onClick)="changeStep(5); activateCallback(5)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
</p-step-panels>
|
||||||
|
|
||||||
|
</p-stepper>
|
||||||
|
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,366 @@
|
|||||||
|
$purple: #7c5cfa;
|
||||||
|
$purple-light: #e7dcff;
|
||||||
|
$line-grey: #e5e7eb;
|
||||||
|
$dot-grey: #d1d5db;
|
||||||
|
$title-color: #374151;
|
||||||
|
$subtitle-color: #6b7280;
|
||||||
|
|
||||||
|
.custom-stepper-wrapper {
|
||||||
|
background: #f9fafb;
|
||||||
|
padding: 20px;
|
||||||
|
margin-top: 30px !important;
|
||||||
|
width: 100%;
|
||||||
|
--completed-width: 0%;
|
||||||
|
|
||||||
|
::ng-deep {
|
||||||
|
|
||||||
|
.p-stepper {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper-separator {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step-list {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step {
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step:last-of-type {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step:not(:last-child)::after {
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: calc(50% + 20px);
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
height: 4px;
|
||||||
|
background: $line-grey;
|
||||||
|
border-radius: 999px;
|
||||||
|
z-index: 0;
|
||||||
|
transition: background .35s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step.done:not(:last-child)::after {
|
||||||
|
|
||||||
|
background: linear-gradient(90deg, $purple 0%, #a78bfa 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-step {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-circle {
|
||||||
|
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid $line-grey;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
transition: .3s;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $subtitle-color;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.completed {
|
||||||
|
|
||||||
|
background: $purple;
|
||||||
|
border-color: $purple;
|
||||||
|
transform: scale(1.05);
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-icon {
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
border-color: $purple;
|
||||||
|
box-shadow: 0 0 0 5px $purple-light;
|
||||||
|
transform: scale(1.08);
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
color: $purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-icon {
|
||||||
|
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-text {
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.step-title {
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $title-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-subtitle {
|
||||||
|
|
||||||
|
margin-top: 2px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: $subtitle-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
|
||||||
|
.step-title,
|
||||||
|
.step-subtitle {
|
||||||
|
|
||||||
|
color: $purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.completed {
|
||||||
|
|
||||||
|
.step-title,
|
||||||
|
.step-subtitle {
|
||||||
|
|
||||||
|
color: $purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-box {
|
||||||
|
|
||||||
|
border: 2px dashed #dcdcdc;
|
||||||
|
border-radius: 12px;
|
||||||
|
height: 220px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-form {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-field {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 2.5rem;
|
||||||
|
padding: 0.75rem 0.75rem 0.5rem;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background: #ffffff;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
color: #111827;
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
outline: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input:focus,
|
||||||
|
.custom-floating-input:not(:placeholder-shown),
|
||||||
|
.custom-floating-input:active {
|
||||||
|
border: 2px solid $purple;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15);
|
||||||
|
animation: input-focus-ring 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes input-focus-ring {
|
||||||
|
0% { box-shadow: 0 0 0 0 rgba(124, 92, 250, 0.3); }
|
||||||
|
100% { box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.custom-floating-input::placeholder {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-label {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.75rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
transform-origin: left top;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 0 0.25rem;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: top 0.2s ease, transform 0.2s ease, color 0.2s ease;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: calc(100% - 1.5rem);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input:focus~.custom-floating-label,
|
||||||
|
.custom-floating-input:not(:placeholder-shown)~.custom-floating-label {
|
||||||
|
top: 0;
|
||||||
|
transform: translateY(-50%) scale(0.9);
|
||||||
|
color: $purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input[type='number']::-webkit-inner-spin-button,
|
||||||
|
.custom-floating-input[type='number']::-webkit-outer-spin-button {
|
||||||
|
appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input[type='number'] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-footer {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .panel-footer.between {
|
||||||
|
|
||||||
|
// justify-content: space-between;
|
||||||
|
// }
|
||||||
|
|
||||||
|
::ng-deep {
|
||||||
|
|
||||||
|
.step-btn-next {
|
||||||
|
|
||||||
|
background: linear-gradient(135deg, #7c5cfa, #a78bfa) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 9999px !important;
|
||||||
|
padding: 0.5rem 1.25rem !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
box-shadow: 0 4px 12px rgba(124, 92, 250, 0.35) !important;
|
||||||
|
transition: transform .2s, box-shadow .2s, filter .2s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-btn-next:hover {
|
||||||
|
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 16px rgba(124, 92, 250, 0.45) !important;
|
||||||
|
filter: brightness(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-btn-back {
|
||||||
|
|
||||||
|
background: #fff !important;
|
||||||
|
color: #6b7280 !important;
|
||||||
|
border: 1px solid #e5e7eb !important;
|
||||||
|
border-radius: 9999px !important;
|
||||||
|
padding: 0.5rem 1.25rem !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
transition: transform .2s, border-color .2s, background .2s, color .2s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-btn-back:hover {
|
||||||
|
|
||||||
|
transform: translateY(-2px);
|
||||||
|
background: #f9fafb !important;
|
||||||
|
border-color: #7c5cfa !important;
|
||||||
|
color: #7c5cfa !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
.step-text .step-title {
|
||||||
|
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-text .step-subtitle {
|
||||||
|
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-circle {
|
||||||
|
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-circle.active {
|
||||||
|
|
||||||
|
box-shadow: 0 0 0 4px $purple-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step-list::before,
|
||||||
|
.p-step-list::after {
|
||||||
|
|
||||||
|
top: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .p-steplist {
|
||||||
|
padding-top: 15px !important;
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
/* tslint:disable:no-unused-variable */
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
import { By } from '@angular/platform-browser';
|
||||||
|
import { DebugElement } from '@angular/core';
|
||||||
|
|
||||||
|
import { StepperTwoComponent } from './stepper-two.component';
|
||||||
|
|
||||||
|
describe('StepperTwoComponent', () => {
|
||||||
|
let component: StepperTwoComponent;
|
||||||
|
let fixture: ComponentFixture<StepperTwoComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ StepperTwoComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(StepperTwoComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { ButtonModule } from 'primeng/button';
|
||||||
|
import { StepperModule } from 'primeng/stepper';
|
||||||
|
@Component({
|
||||||
|
selector: 'app-stepper-two',
|
||||||
|
templateUrl: './stepper-two.component.html',
|
||||||
|
styleUrls: ['./stepper-two.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule, ButtonModule, StepperModule]
|
||||||
|
})
|
||||||
|
export class StepperTwoComponent implements OnInit {
|
||||||
|
|
||||||
|
activeStep = 1;
|
||||||
|
|
||||||
|
changeStep(step: number) {
|
||||||
|
this.activeStep = step;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,293 @@
|
|||||||
|
<div
|
||||||
|
class="custom-stepper-wrapper"
|
||||||
|
[style.--completed-width.%]="((activeStep - 1) / 2) * 100"
|
||||||
|
>
|
||||||
|
|
||||||
|
<p-stepper [value]="activeStep">
|
||||||
|
|
||||||
|
<p-step-list>
|
||||||
|
|
||||||
|
<p-step [value]="1">
|
||||||
|
<ng-template #content>
|
||||||
|
|
||||||
|
<div class="custom-step">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-circle"
|
||||||
|
[class.completed]="activeStep > 1"
|
||||||
|
[class.active]="activeStep === 1"
|
||||||
|
(click)="changeStep(1)"
|
||||||
|
>
|
||||||
|
@if (activeStep > 1) {
|
||||||
|
<svg
|
||||||
|
class="check-icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else if (activeStep === 1) {
|
||||||
|
<span class="dot"></span>
|
||||||
|
} @else {
|
||||||
|
<span class="grey-dot"></span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-text"
|
||||||
|
[class.active]="activeStep === 1"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="step-title">Step 1</div>
|
||||||
|
<div class="step-subtitle">Plan</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
<p-step [value]="2">
|
||||||
|
<ng-template #content>
|
||||||
|
|
||||||
|
<div class="custom-step">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-circle"
|
||||||
|
[class.completed]="activeStep > 2"
|
||||||
|
[class.active]="activeStep === 2"
|
||||||
|
(click)="changeStep(2)"
|
||||||
|
>
|
||||||
|
@if (activeStep > 2) {
|
||||||
|
<svg
|
||||||
|
class="check-icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else if (activeStep === 2) {
|
||||||
|
<span class="dot"></span>
|
||||||
|
} @else {
|
||||||
|
<span class="grey-dot"></span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-text"
|
||||||
|
[class.active]="activeStep === 2"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="step-title">Step 2</div>
|
||||||
|
<div class="step-subtitle">Payment</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
<p-step [value]="3">
|
||||||
|
<ng-template #content>
|
||||||
|
|
||||||
|
<div class="custom-step">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-circle"
|
||||||
|
[class.completed]="activeStep > 3"
|
||||||
|
[class.active]="activeStep === 3"
|
||||||
|
(click)="changeStep(3)"
|
||||||
|
>
|
||||||
|
@if (activeStep > 3) {
|
||||||
|
<svg
|
||||||
|
class="check-icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="5 12 10 17 19 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
} @else if (activeStep === 3) {
|
||||||
|
<span class="dot"></span>
|
||||||
|
} @else {
|
||||||
|
<span class="grey-dot"></span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="step-text"
|
||||||
|
[class.active]="activeStep === 3"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="step-title">Step 3</div>
|
||||||
|
<div class="step-subtitle">Confirm</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step>
|
||||||
|
|
||||||
|
</p-step-list>
|
||||||
|
|
||||||
|
<p-step-panels>
|
||||||
|
|
||||||
|
<p-step-panel [value]="1">
|
||||||
|
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-6">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s1-project" type="text" value="Website Redesign" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s1-project" class="custom-floating-label">Project Name</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-6">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s1-owner" type="text" value="Alice Smith" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s1-owner" class="custom-floating-label">Project Owner</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-footer">
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Next"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
iconPos="right"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
(onClick)="changeStep(2); activateCallback(2)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
<p-step-panel [value]="2">
|
||||||
|
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s2-card" type="text" value="4242 4242 4242 4242" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s2-card" class="custom-floating-label">Card Number</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s2-expiry" type="text" value="09/27" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s2-expiry" class="custom-floating-label">Expiry Date</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s2-cvv" type="number" value="123" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s2-cvv" class="custom-floating-label">CVV</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-footer between">
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Back"
|
||||||
|
icon="pi pi-arrow-left"
|
||||||
|
severity="secondary"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
(onClick)="changeStep(1); activateCallback(1)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Next"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
iconPos="right"
|
||||||
|
styleClass="step-btn step-btn-next"
|
||||||
|
(onClick)="changeStep(3); activateCallback(3)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
<p-step-panel [value]="3">
|
||||||
|
|
||||||
|
<ng-template #content let-activateCallback="activateCallback">
|
||||||
|
|
||||||
|
<div class="panel-form">
|
||||||
|
<form autocomplete="off" class="w-full">
|
||||||
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s3-code" type="text" value="CONF-8829-X" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s3-code" class="custom-floating-label">Confirmation Code</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s3-email" type="email" value="client@mail.com" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s3-email" class="custom-floating-label">Notification Email</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12 md:col-span-4">
|
||||||
|
<div class="custom-floating-field">
|
||||||
|
<input id="s3-notes" type="text" value="Launch on Monday" placeholder=" " class="custom-floating-input" />
|
||||||
|
<label for="s3-notes" class="custom-floating-label">Notes</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-footer">
|
||||||
|
|
||||||
|
<p-button
|
||||||
|
label="Back"
|
||||||
|
icon="pi pi-arrow-left"
|
||||||
|
severity="secondary"
|
||||||
|
styleClass="step-btn step-btn-back"
|
||||||
|
(onClick)="changeStep(2); activateCallback(2)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</p-step-panel>
|
||||||
|
|
||||||
|
</p-step-panels>
|
||||||
|
|
||||||
|
</p-stepper>
|
||||||
|
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,357 @@
|
|||||||
|
$purple: #7c5cfa;
|
||||||
|
$purple-light: #e7dcff;
|
||||||
|
$line-grey: #e5e7eb;
|
||||||
|
$dot-grey: #d1d5db;
|
||||||
|
$title-color: #374151;
|
||||||
|
$subtitle-color: #6b7280;
|
||||||
|
|
||||||
|
.custom-stepper-wrapper {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 24px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
|
||||||
|
padding: 20px;
|
||||||
|
margin-top: 30px !important;
|
||||||
|
width: 100%;
|
||||||
|
--completed-width: 0%;
|
||||||
|
|
||||||
|
::ng-deep {
|
||||||
|
|
||||||
|
.p-stepper {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-stepper-separator {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step-list {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step-list::before {
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: $line-grey;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step-list::after {
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 0;
|
||||||
|
width: var(--completed-width);
|
||||||
|
height: 2px;
|
||||||
|
background: $purple;
|
||||||
|
z-index: 0;
|
||||||
|
transition: width .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step {
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step:last-of-type {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-step {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-circle {
|
||||||
|
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid $line-grey;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
transition: .3s;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.completed {
|
||||||
|
|
||||||
|
background: $purple;
|
||||||
|
border-color: $purple;
|
||||||
|
|
||||||
|
.check-icon {
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
|
||||||
|
background: $purple;
|
||||||
|
border-color: $purple;
|
||||||
|
box-shadow: 0 0 0 4px $purple-light;
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey-dot {
|
||||||
|
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: $dot-grey;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-icon {
|
||||||
|
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-text {
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.step-title {
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $title-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-subtitle {
|
||||||
|
|
||||||
|
margin-top: 2px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: $subtitle-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
|
||||||
|
.step-title,
|
||||||
|
.step-subtitle {
|
||||||
|
|
||||||
|
color: $purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-box {
|
||||||
|
|
||||||
|
border: 2px dashed #dcdcdc;
|
||||||
|
border-radius: 12px;
|
||||||
|
height: 220px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-footer {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-form {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-field {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 2.5rem;
|
||||||
|
padding: 0.75rem 0.75rem 0.5rem;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background: #ffffff;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
color: #111827;
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
outline: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input:focus,
|
||||||
|
.custom-floating-input:not(:placeholder-shown),
|
||||||
|
.custom-floating-input:active {
|
||||||
|
border: 2px solid $purple;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15);
|
||||||
|
animation: input-focus-ring 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes input-focus-ring {
|
||||||
|
0% { box-shadow: 0 0 0 0 rgba(124, 92, 250, 0.3); }
|
||||||
|
100% { box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.custom-floating-input::placeholder {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-label {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.75rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
transform-origin: left top;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 0 0.25rem;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: top 0.2s ease, transform 0.2s ease, color 0.2s ease;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: calc(100% - 1.5rem);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input:focus~.custom-floating-label,
|
||||||
|
.custom-floating-input:not(:placeholder-shown)~.custom-floating-label {
|
||||||
|
top: 0;
|
||||||
|
transform: translateY(-50%) scale(0.9);
|
||||||
|
color: $purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input[type='number']::-webkit-inner-spin-button,
|
||||||
|
.custom-floating-input[type='number']::-webkit-outer-spin-button {
|
||||||
|
appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-floating-input[type='number'] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .panel-footer.between {
|
||||||
|
|
||||||
|
// justify-content: space-between;
|
||||||
|
// }
|
||||||
|
|
||||||
|
::ng-deep {
|
||||||
|
|
||||||
|
.step-btn-next {
|
||||||
|
|
||||||
|
background: linear-gradient(135deg, #7c5cfa, #a78bfa) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 9999px !important;
|
||||||
|
padding: 0.5rem 1.25rem !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
box-shadow: 0 4px 12px rgba(124, 92, 250, 0.35) !important;
|
||||||
|
transition: transform .2s, box-shadow .2s, filter .2s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-btn-next:hover {
|
||||||
|
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 16px rgba(124, 92, 250, 0.45) !important;
|
||||||
|
filter: brightness(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-btn-back {
|
||||||
|
|
||||||
|
background: #fff !important;
|
||||||
|
color: #6b7280 !important;
|
||||||
|
border: 1px solid #e5e7eb !important;
|
||||||
|
border-radius: 9999px !important;
|
||||||
|
padding: 0.5rem 1.25rem !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
transition: transform .2s, border-color .2s, background .2s, color .2s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-btn-back:hover {
|
||||||
|
|
||||||
|
transform: translateY(-2px);
|
||||||
|
background: #f9fafb !important;
|
||||||
|
border-color: #7c5cfa !important;
|
||||||
|
color: #7c5cfa !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
.step-text .step-title {
|
||||||
|
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-text .step-subtitle {
|
||||||
|
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-circle {
|
||||||
|
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-circle.active {
|
||||||
|
|
||||||
|
box-shadow: 0 0 0 3px $purple-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-step-list::before,
|
||||||
|
.p-step-list::after {
|
||||||
|
|
||||||
|
top: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
/* tslint:disable:no-unused-variable */
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
import { By } from '@angular/platform-browser';
|
||||||
|
import { DebugElement } from '@angular/core';
|
||||||
|
|
||||||
|
import { StepperComponent } from './stepper.component';
|
||||||
|
|
||||||
|
describe('StepperComponent', () => {
|
||||||
|
let component: StepperComponent;
|
||||||
|
let fixture: ComponentFixture<StepperComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ StepperComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(StepperComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { ButtonModule } from 'primeng/button';
|
||||||
|
import { StepperModule } from 'primeng/stepper';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-stepper',
|
||||||
|
templateUrl: './stepper.component.html',
|
||||||
|
styleUrls: ['./stepper.component.scss'] ,
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule, ButtonModule, StepperModule]
|
||||||
|
})
|
||||||
|
export class StepperComponent implements OnInit {
|
||||||
|
|
||||||
|
activeStep = 1;
|
||||||
|
|
||||||
|
changeStep(step: number) {
|
||||||
|
this.activeStep = step;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user