diff --git a/libs/docs/ui5-webcomponents-fiori/api-files.ts b/libs/docs/ui5-webcomponents-fiori/api-files.ts
index 9e102cd22ed..ce5c969adab 100644
--- a/libs/docs/ui5-webcomponents-fiori/api-files.ts
+++ b/libs/docs/ui5-webcomponents-fiori/api-files.ts
@@ -24,5 +24,6 @@ export const API_FILES = {
uploadCollection: ['UploadCollection', 'UploadCollectionItem'],
userMenu: ['UserMenu', 'UserMenuAccount', 'UserMenuItem', 'UserMenuItemGroup'],
userSettingsDialog: ['UserSettingsAccountView', 'UserSettingsDialog', 'UserSettingsItem', 'UserSettingsView'],
- viewSettingsDialog: ['FilterItem', 'FilterItemOption', 'GroupItem', 'SortItem', 'ViewSettingsDialog']
+ viewSettingsDialog: ['FilterItem', 'FilterItemOption', 'GroupItem', 'SortItem', 'ViewSettingsDialog'],
+ wizard: ['Wizard', 'WizardStep']
};
diff --git a/libs/docs/ui5-webcomponents-fiori/docs-data.json b/libs/docs/ui5-webcomponents-fiori/docs-data.json
index ce182eac29c..a47ecf03734 100644
--- a/libs/docs/ui5-webcomponents-fiori/docs-data.json
+++ b/libs/docs/ui5-webcomponents-fiori/docs-data.json
@@ -77,6 +77,10 @@
{
"url": "ui5-webcomponents-fiori/view-settings-dialog",
"name": "View Settings Dialog"
+ },
+ {
+ "url": "ui5-webcomponents-fiori/wizard",
+ "name": "Wizard"
}
]
}
diff --git a/libs/docs/ui5-webcomponents-fiori/docs-routes.ts b/libs/docs/ui5-webcomponents-fiori/docs-routes.ts
index 7740967d2e9..a6638690b59 100644
--- a/libs/docs/ui5-webcomponents-fiori/docs-routes.ts
+++ b/libs/docs/ui5-webcomponents-fiori/docs-routes.ts
@@ -102,6 +102,10 @@ const componentRoutes = [
path: 'view-settings-dialog',
loadChildren: () =>
import('@fundamental-ngx/docs/ui5-webcomponents-fiori/view-settings-dialog').then(configureLibRoutes)
+ },
+ {
+ path: 'wizard',
+ loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents-fiori/wizard').then(configureLibRoutes)
}
];
diff --git a/libs/docs/ui5-webcomponents-fiori/wizard/examples/basic-sample.html b/libs/docs/ui5-webcomponents-fiori/wizard/examples/basic-sample.html
new file mode 100644
index 00000000000..5584311fe9e
--- /dev/null
+++ b/libs/docs/ui5-webcomponents-fiori/wizard/examples/basic-sample.html
@@ -0,0 +1,235 @@
+
+
+ @for (step of steps(); track $index) {
+
+
+ @if ($index === 0) {
+
+
{{ step.titleText }}
+
Please provide information about your product.
+
+ @if (!step1Valid() && productName().length > 0) {
+
+ Please fill in all required fields to continue.
+
+ }
+
+
+
+ Product Name
+
+
+
+
+ Product Description
+
+
+
+ } @if ($index === 1) {
+
+
{{ step.titleText }}
+
Select a pricing plan for your product.
+
+
+
+
+
+
+ } @if ($index === 2) {
+
+
{{ step.titleText }}
+
Choose your preferred delivery method and additional options.
+
+ @if (!step3Valid()) {
+
+ Please select a delivery method.
+
+ }
+
+
+
+
+
+
+ } @if ($index === 3) {
+
+
{{ step.titleText }}
+
Provide your contact information for order updates.
+
+ @if (!step4Valid() && customerName().length > 0) {
+
+ Please fill in all required fields with valid information.
+
+ }
+
+
+
+ Full Name
+
+
+
+
+ Email Address
+
+
+
+
+ Phone Number
+
+
+
+ } @if ($index === 4) {
+
+
{{ step.titleText }}
+
Review your information before submitting.
+
+
+ All steps completed! Please review your information below.
+
+
+
+
Product Information
+
+ Product Name:
+ {{ productName() }}
+
+
+ Description:
+ {{ productDescription() }}
+
+
+
+
+
Pricing
+
+ Selected Plan:
+
+ @if (selectedPrice() === 'basic') { Basic - $9.99/month } @else if (selectedPrice() ===
+ 'professional') { Professional - $29.99/month } @else { Enterprise - $99.99/month }
+
+
+
+
+
+
Delivery Options
+
+ Delivery Method:
+
+ @if (standardDelivery()) { Standard Delivery (Free) } @else if (expressDelivery()) { Express
+ Delivery ($15.00) }
+
+
+ @if (giftWrap()) {
+
+ Additional:
+ Gift Wrap ($5.00)
+
+ }
+
+
+
+
Contact Information
+
+ Name:
+ {{ customerName() }}
+
+
+ Email:
+ {{ customerEmail() }}
+
+ @if (customerPhone()) {
+
+ Phone:
+ {{ customerPhone() }}
+
+ }
+
+ }
+
+
+
+
+ Previous
+
+
+ @if (!isLastStep()) {
+
+ Next
+
+ } @else {
+
+ Submit
+
+ }
+
+
+
+ }
+
+
diff --git a/libs/docs/ui5-webcomponents-fiori/wizard/examples/basic-sample.ts b/libs/docs/ui5-webcomponents-fiori/wizard/examples/basic-sample.ts
new file mode 100644
index 00000000000..3dbaca5ac79
--- /dev/null
+++ b/libs/docs/ui5-webcomponents-fiori/wizard/examples/basic-sample.ts
@@ -0,0 +1,223 @@
+import { Component, computed, signal } from '@angular/core';
+import type { UI5WrapperCustomEvent } from '@fundamental-ngx/ui5-webcomponents-base/types';
+import { Wizard } from '@fundamental-ngx/ui5-webcomponents-fiori/wizard';
+import { WizardStep } from '@fundamental-ngx/ui5-webcomponents-fiori/wizard-step';
+import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
+import { CheckBox } from '@fundamental-ngx/ui5-webcomponents/check-box';
+import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
+import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
+import { MessageStrip } from '@fundamental-ngx/ui5-webcomponents/message-strip';
+import { RadioButton } from '@fundamental-ngx/ui5-webcomponents/radio-button';
+import { Text } from '@fundamental-ngx/ui5-webcomponents/text';
+import { TextArea } from '@fundamental-ngx/ui5-webcomponents/text-area';
+import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
+
+// Import Fundamental Styles
+import 'fundamental-styles/dist/margins.css';
+import 'fundamental-styles/dist/paddings.css';
+
+// Import icons
+import '@ui5/webcomponents-icons/dist/accept.js';
+import '@ui5/webcomponents-icons/dist/cart.js';
+import '@ui5/webcomponents-icons/dist/employee.js';
+import '@ui5/webcomponents-icons/dist/palette.js';
+import '@ui5/webcomponents-icons/dist/product.js';
+
+interface WizardStepData {
+ titleText: string;
+ subtitleText?: string;
+ icon: string;
+ completed: boolean;
+ valid: boolean;
+}
+
+@Component({
+ selector: 'ui5-doc-wizard-basic-sample',
+ templateUrl: './basic-sample.html',
+ standalone: true,
+ imports: [Wizard, WizardStep, Button, Input, Label, Title, Text, TextArea, CheckBox, RadioButton, MessageStrip]
+})
+export class BasicSample {
+ // Current step index
+ currentStep = signal(0);
+
+ // Step 1: Product Information
+ productName = signal('');
+ productDescription = signal('');
+
+ // Step 2: Pricing
+ selectedPrice = signal('basic');
+
+ // Step 3: Delivery Options
+ standardDelivery = signal(true);
+ expressDelivery = signal(false);
+ giftWrap = signal(false);
+
+ // Step 4: Contact Information
+ customerName = signal('');
+ customerEmail = signal('');
+ customerPhone = signal('');
+
+ // Computed: Step validation
+ step1Valid = computed(() => this.productName().trim().length > 0 && this.productDescription().trim().length > 0);
+
+ step2Valid = computed(() => this.selectedPrice().length > 0);
+
+ step3Valid = computed(() => this.standardDelivery() || this.expressDelivery());
+
+ step4Valid = computed(() => {
+ const emailValid = this.customerEmail().includes('@');
+ return this.customerName().trim().length > 0 && emailValid;
+ });
+
+ // Steps configuration
+ steps = computed(() => [
+ {
+ titleText: 'Product Information',
+ subtitleText: 'Enter product details',
+ icon: 'product',
+ completed: this.currentStep() > 0,
+ valid: this.step1Valid()
+ },
+ {
+ titleText: 'Pricing',
+ subtitleText: 'Select pricing plan',
+ icon: 'palette',
+ completed: this.currentStep() > 1,
+ valid: this.step2Valid()
+ },
+ {
+ titleText: 'Delivery Options',
+ subtitleText: 'Choose delivery method',
+ icon: 'cart',
+ completed: this.currentStep() > 2,
+ valid: this.step3Valid()
+ },
+ {
+ titleText: 'Contact Information',
+ subtitleText: 'Provide contact details',
+ icon: 'employee',
+ completed: this.currentStep() > 3,
+ valid: this.step4Valid()
+ },
+ {
+ titleText: 'Summary',
+ subtitleText: 'Review and confirm',
+ icon: 'accept',
+ completed: false,
+ valid: true
+ }
+ ]);
+
+ // Computed: Can navigate to next step
+ canGoNext = computed(() => {
+ switch (this.currentStep()) {
+ case 0:
+ return this.step1Valid();
+ case 1:
+ return this.step2Valid();
+ case 2:
+ return this.step3Valid();
+ case 3:
+ return this.step4Valid();
+ default:
+ return false;
+ }
+ });
+
+ // Computed: Can navigate to previous step
+ canGoPrevious = computed(() => this.currentStep() > 0);
+
+ // Computed: Can submit wizard
+ canSubmit = computed(
+ () => this.step1Valid() && this.step2Valid() && this.step3Valid() && this.step4Valid() && this.isLastStep()
+ );
+
+ // Computed: Is last step
+ isLastStep = computed(() => this.currentStep() === this.steps().length - 1);
+
+ onStepChange(event: UI5WrapperCustomEvent): void {
+ const detail = event.detail;
+ if (detail && detail.step) {
+ const stepElement = detail.step;
+ const stepIndex = Array.from(stepElement.parentElement?.children || []).indexOf(stepElement);
+ if (stepIndex !== -1) {
+ this.currentStep.set(stepIndex);
+ }
+ }
+ }
+
+ goToNextStep(): void {
+ if (this.canGoNext() && !this.isLastStep()) {
+ this.currentStep.update((current) => Math.min(current + 1, this.steps().length - 1));
+ }
+ }
+
+ goToPreviousStep(): void {
+ if (this.canGoPrevious()) {
+ this.currentStep.update((current) => Math.max(current - 1, 0));
+ }
+ }
+
+ submitWizard(): void {
+ if (this.isLastStep()) {
+ alert('Wizard completed successfully!');
+ this.resetWizard();
+ }
+ }
+
+ resetWizard(): void {
+ this.currentStep.set(0);
+ this.productName.set('');
+ this.productDescription.set('');
+ this.selectedPrice.set('basic');
+ this.standardDelivery.set(true);
+ this.expressDelivery.set(false);
+ this.giftWrap.set(false);
+ this.customerName.set('');
+ this.customerEmail.set('');
+ this.customerPhone.set('');
+ }
+
+ onProductNameChange(event: UI5WrapperCustomEvent ): void {
+ this.productName.set(event.currentTarget.value);
+ }
+
+ onProductDescriptionChange(event: UI5WrapperCustomEvent