From a567baa646e66737a4aeead152f41320d9165ee3 Mon Sep 17 00:00:00 2001
From: vasavk <vasavi.kanamarlapudi@verizon.com>
Date: Wed, 29 May 2024 16:07:44 +0530
Subject: [PATCH 01/18] Digital ACT-191 ONEAPP-7013 story: added new controller
 for carousel

---
 VDSSample.xcodeproj/project.pbxproj           |  4 ++++
 .../CarouselViewController.swift              | 20 +++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 VDSSample/ViewControllers/CarouselViewController.swift

diff --git a/VDSSample.xcodeproj/project.pbxproj b/VDSSample.xcodeproj/project.pbxproj
index 52876ff..8ab5e6e 100644
--- a/VDSSample.xcodeproj/project.pbxproj
+++ b/VDSSample.xcodeproj/project.pbxproj
@@ -36,6 +36,7 @@
 		1832AC5B2BA1347B008AE476 /* BreadcrumbsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */; };
 		186D13CD2BBA990800986B53 /* DropdownSelectViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */; };
 		18A3F1302BD9332500498E4A /* CalendarViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18A3F12F2BD9332500498E4A /* CalendarViewController.swift */; };
+		18AE87522C06FDD60075F181 /* CarouselViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18AE87512C06FDD60075F181 /* CarouselViewController.swift */; };
 		445BA07A29C088470036A7C5 /* NotificationViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 445BA07929C088470036A7C5 /* NotificationViewController.swift */; };
 		44604AD929CE1CF900E62B51 /* LineViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 44604AD829CE1CF900E62B51 /* LineViewController.swift */; };
 		5FC35BE928D5235A004EBEAC /* ButtonViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5FC35BE828D5235A004EBEAC /* ButtonViewController.swift */; };
@@ -132,6 +133,7 @@
 		1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BreadcrumbsViewController.swift; sourceTree = "<group>"; };
 		186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropdownSelectViewController.swift; sourceTree = "<group>"; };
 		18A3F12F2BD9332500498E4A /* CalendarViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarViewController.swift; sourceTree = "<group>"; };
+		18AE87512C06FDD60075F181 /* CarouselViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CarouselViewController.swift; sourceTree = "<group>"; };
 		445BA07929C088470036A7C5 /* NotificationViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotificationViewController.swift; sourceTree = "<group>"; };
 		44604AD829CE1CF900E62B51 /* LineViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LineViewController.swift; sourceTree = "<group>"; };
 		5FC35BE828D5235A004EBEAC /* ButtonViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonViewController.swift; sourceTree = "<group>"; };
@@ -322,6 +324,7 @@
 				EA81410D2A0ED8DC004F60D2 /* ButtonIconViewController.swift */,
 				5FC35BE828D5235A004EBEAC /* ButtonViewController.swift */,
 				18A3F12F2BD9332500498E4A /* CalendarViewController.swift */,
+				18AE87512C06FDD60075F181 /* CarouselViewController.swift */,
 				1808BEBD2BA4479500129230 /* CarouselScrollbarViewConttroller.swift */,
 				EA89204D28B67332006B9984 /* CheckBoxGroupViewController.swift */,
 				EAF7F09B2899B92400B287F5 /* CheckboxItemViewController.swift */,
@@ -537,6 +540,7 @@
 				EAF7F09C2899B92400B287F5 /* CheckboxItemViewController.swift in Sources */,
 				EA0D1C2F2A66CFE900E5C127 /* CheckboxViewController.swift in Sources */,
 				18A3F1302BD9332500498E4A /* CalendarViewController.swift in Sources */,
+				18AE87522C06FDD60075F181 /* CarouselViewController.swift in Sources */,
 				EA596ABA2A16B2ED00300C4B /* TabsViewController.swift in Sources */,
 				EA89204E28B67332006B9984 /* CheckBoxGroupViewController.swift in Sources */,
 				EAA5EEAD28EB6924003B3210 /* InputFieldViewController.swift in Sources */,
diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
new file mode 100644
index 0000000..6679808
--- /dev/null
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -0,0 +1,20 @@
+//
+//  CarouselViewController.swift
+//  VDSSample
+//
+//  Created by Kanamarlapudi, Vasavi on 29/05/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+import Combine
+import VDSTokens
+
+class CarouselViewController: BaseViewController<Carousel> {
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+    }
+    
+}

From 5b702f3968bb6f904f50affb18613d8dc85ed31a Mon Sep 17 00:00:00 2001
From: vasavk <vasavi.kanamarlapudi@verizon.com>
Date: Tue, 4 Jun 2024 09:32:41 +0530
Subject: [PATCH 02/18] Digital ACT-191 ONEAPP-7013 story: setup form to pass
 values to Base Carousel properties

---
 .../CarouselViewController.swift              | 109 ++++++++++++++++++
 1 file changed, 109 insertions(+)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index 6679808..60168ff 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -13,8 +13,117 @@ import VDSTokens
 
 class CarouselViewController: BaseViewController<Carousel> {
     
+    let label = Label()
+
+    lazy var scalingTypePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.AspectRatio.allCases)
+    }()
+    
+    lazy var layoutPickerSelectorView = {
+        PickerSelectorView(title: "1UP",
+                           picker: self.picker,
+                           items: UIDevice.isIPad ? Carousel.Layout.allCases : [Carousel.Layout.oneUP, Carousel.Layout.twoUP, Carousel.Layout.threeUP])
+    }()
+    
+    lazy var paginationDisplayPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.PaginationDisplay.allCases)
+    }()
+    
+    lazy var peekPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.Peek.allCases)
+    }()
+    
+    lazy var gutterPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.Gutter.allCases)
+    }()
+    
+    lazy var paginationKindPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.PaginationKind.allCases)
+    }()
+    
+    lazy var horizAlignmtPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.Horizontal.allCases)
+    }()
+    
+    lazy var vertAlignmtPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.Vertical.allCases)
+    }()
+    
+    var paginationFloatSwitch = Toggle()
+    var paginationInsetField = TextField()
+    var slotsWidthField = TextField()
+
     override func viewDidLoad() {
         super.viewDidLoad()
+        addContentTopView(view: component)
+        setupPicker()
+        setupModel()
     }
     
+    override func setupForm() {
+        super.setupForm()
+        //add form rows
+        addFormRow(label: "onChange", view: label)
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
+//data        addFormRow(label: "data", view: slidesTextField)
+        addFormRow(label: "Pagination Display", view: paginationDisplayPickerSelectorView)
+        addFormRow(label: "Peek", view: peekPickerSelectorView)
+        addFormRow(label: "Gutter", view: gutterPickerSelectorView)
+        addFormRow(label: "Layout", view: layoutPickerSelectorView)
+        addFormRow(label: "Pagination Kind", view: paginationKindPickerSelectorView)
+        addFormRow(label: "Pagination Float", view: paginationFloatSwitch)
+        addFormRow(label: "Pagination Inset", view: paginationInsetField)
+        addFormRow(label: "Slots Width", view: slotsWidthField)
+        addFormRow(label: "Slot Horizontal Alignment", view: horizAlignmtPickerSelectorView)
+        addFormRow(label: "Slot Vertical Alignment", view: vertAlignmtPickerSelectorView)
+
+//        slotsWidthField
+//            .numberPublisher
+//            .sink { [weak self] number in
+//                guard let number else {
+//                    return
+//                }
+////                self?.component.numberOfSlides = number.intValue
+////                self?.component.position = Int(self?.positionTextField.text ?? "1") ?? 1
+//            }.store(in: &subscribers)
+//        
+//        paginationInsetField
+//            .textPublisher
+//            .sink { [weak self] text in
+////                self?.component.labelText = text
+//            }.store(in: &subscribers)
+//        
+    }
+    
+    func setupModel() {
+        //setup UI
+        scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
+
+    }
+
+    func setupPicker() {
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        layoutPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.layout = item
+        }
+    }
 }

From 1aaab515822e00225aeec4fe389600fd7c94baa6 Mon Sep 17 00:00:00 2001
From: vasavk <vasavi.kanamarlapudi@verizon.com>
Date: Sun, 9 Jun 2024 11:03:58 +0530
Subject: [PATCH 03/18] Digital ACT-191 ONEAPP-7013 story: added model setup

---
 .../CarouselViewController.swift              | 67 ++++++++++++-------
 1 file changed, 44 insertions(+), 23 deletions(-)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index 60168ff..1ac6268 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -48,7 +48,7 @@ class CarouselViewController: BaseViewController<Carousel> {
     lazy var paginationKindPickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
-                           items: Carousel.PaginationKind.allCases)
+                           items: ButtonIcon.Kind.allCases)
     }()
     
     lazy var horizAlignmtPickerSelectorView = {
@@ -63,9 +63,8 @@ class CarouselViewController: BaseViewController<Carousel> {
                            items: Carousel.Vertical.allCases)
     }()
     
-    var paginationFloatSwitch = Toggle()
+    var paginationFloatingSwitch = Toggle()
     var paginationInsetField = TextField()
-    var slotsWidthField = TextField()
 
     override func viewDidLoad() {
         super.viewDidLoad()
@@ -80,40 +79,40 @@ class CarouselViewController: BaseViewController<Carousel> {
         addFormRow(label: "onChange", view: label)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
-//data        addFormRow(label: "data", view: slidesTextField)
         addFormRow(label: "Pagination Display", view: paginationDisplayPickerSelectorView)
         addFormRow(label: "Peek", view: peekPickerSelectorView)
         addFormRow(label: "Gutter", view: gutterPickerSelectorView)
         addFormRow(label: "Layout", view: layoutPickerSelectorView)
         addFormRow(label: "Pagination Kind", view: paginationKindPickerSelectorView)
-        addFormRow(label: "Pagination Float", view: paginationFloatSwitch)
+        addFormRow(label: "Pagination Float", view: paginationFloatingSwitch)
         addFormRow(label: "Pagination Inset", view: paginationInsetField)
-        addFormRow(label: "Slots Width", view: slotsWidthField)
         addFormRow(label: "Slot Horizontal Alignment", view: horizAlignmtPickerSelectorView)
         addFormRow(label: "Slot Vertical Alignment", view: vertAlignmtPickerSelectorView)
 
-//        slotsWidthField
-//            .numberPublisher
-//            .sink { [weak self] number in
-//                guard let number else {
-//                    return
-//                }
-////                self?.component.numberOfSlides = number.intValue
-////                self?.component.position = Int(self?.positionTextField.text ?? "1") ?? 1
-//            }.store(in: &subscribers)
-//        
-//        paginationInsetField
-//            .textPublisher
-//            .sink { [weak self] text in
-////                self?.component.labelText = text
-//            }.store(in: &subscribers)
-//        
+        paginationInsetField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.paginationInset =  UIDevice.isIPad ? VDSLayout.space12X : VDSLayout.space8X
+            }.store(in: &subscribers)
+        
+        paginationFloatingSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            self.component.pagination = .init(kind: paginationKindPickerSelectorView.selectedItem, floating: sender.isOn)
+        }
+            
     }
     
     func setupModel() {
         //setup UI
         scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
-
+        paginationDisplayPickerSelectorView.text = component.paginationDisplay.rawValue
+        peekPickerSelectorView.text = component.peek.rawValue
+        gutterPickerSelectorView.text = component.gutter.rawValue
+        layoutPickerSelectorView.text = component.layout.rawValue
+        paginationKindPickerSelectorView.text = ButtonIcon.Kind.lowContrast.rawValue
+        paginationFloatingSwitch.isOn = true
+        paginationInsetField.text = UIDevice.isIPad ? "12px" : "8px"
+        paginationInsetField.isUserInteractionEnabled = false
     }
 
     func setupPicker() {
@@ -121,9 +120,31 @@ class CarouselViewController: BaseViewController<Carousel> {
             self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
+
+        scalingTypePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.aspectRatio = item
+        }
+        
+        paginationDisplayPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.paginationDisplay = item
+        }
+        
+        peekPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.peek = item
+        }
+
+        gutterPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.gutter = item
+        }
         
         layoutPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.layout = item
         }
+        
+        paginationKindPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            guard let self else { return }
+            self.component.pagination = .init(kind: item, floating: paginationFloatingSwitch.isOn)
+        }
+
     }
 }

From e3eefe6f3e40fe34ae56c08be0d46b7542a68f20 Mon Sep 17 00:00:00 2001
From: vasavk <vasavi.kanamarlapudi@verizon.com>
Date: Tue, 11 Jun 2024 15:19:23 +0530
Subject: [PATCH 04/18] Digital ACT-191 ONEAPP-7013 story: pasing empty data
 and added width property

---
 .../CarouselScrollbarViewConttroller.swift    |  2 +-
 .../CarouselViewController.swift              | 55 +++++++++++++++----
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/VDSSample/ViewControllers/CarouselScrollbarViewConttroller.swift b/VDSSample/ViewControllers/CarouselScrollbarViewConttroller.swift
index 63b0da4..943686d 100644
--- a/VDSSample/ViewControllers/CarouselScrollbarViewConttroller.swift
+++ b/VDSSample/ViewControllers/CarouselScrollbarViewConttroller.swift
@@ -114,7 +114,7 @@ class CarouselScrollbarViewConttroller: BaseViewController<CarouselScrollbar> {
         }
         
         layoutPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.selectedLayout = item
+            self?.component.layout = item
             self?.component.position = Int(self?.positionTextField.text ?? "1") ?? 1
         }
     }
diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index 1ac6268..d5779a8 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -20,13 +20,7 @@ class CarouselViewController: BaseViewController<Carousel> {
                            picker: self.picker,
                            items: Carousel.AspectRatio.allCases)
     }()
-    
-    lazy var layoutPickerSelectorView = {
-        PickerSelectorView(title: "1UP",
-                           picker: self.picker,
-                           items: UIDevice.isIPad ? Carousel.Layout.allCases : [Carousel.Layout.oneUP, Carousel.Layout.twoUP, Carousel.Layout.threeUP])
-    }()
-    
+        
     lazy var paginationDisplayPickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -45,6 +39,12 @@ class CarouselViewController: BaseViewController<Carousel> {
                            items: Carousel.Gutter.allCases)
     }()
     
+    lazy var layoutPickerSelectorView = {
+        PickerSelectorView(title: "1UP",
+                           picker: self.picker,
+                           items: UIDevice.isIPad ? Carousel.Layout.allCases : [Carousel.Layout.oneUP, Carousel.Layout.twoUP, Carousel.Layout.threeUP])
+    }()
+    
     lazy var paginationKindPickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -64,7 +64,9 @@ class CarouselViewController: BaseViewController<Carousel> {
     }()
     
     var paginationFloatingSwitch = Toggle()
-    var paginationInsetField = TextField()
+    var paginationInsetField = NumericField()
+    var widthTextField = NumericField()
+    var percentageTextField = NumericField()
 
     override func viewDidLoad() {
         super.viewDidLoad()
@@ -86,13 +88,41 @@ class CarouselViewController: BaseViewController<Carousel> {
         addFormRow(label: "Pagination Kind", view: paginationKindPickerSelectorView)
         addFormRow(label: "Pagination Float", view: paginationFloatingSwitch)
         addFormRow(label: "Pagination Inset", view: paginationInsetField)
+        addFormRow(label: "Slot Width", view: widthTextField)
+        addFormRow(label: "Percentage (1-100)", view: percentageTextField)
         addFormRow(label: "Slot Horizontal Alignment", view: horizAlignmtPickerSelectorView)
         addFormRow(label: "Slot Vertical Alignment", view: vertAlignmtPickerSelectorView)
-
+        
+        widthTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                if let number {
+                    self?.component.width = .value(number.cgFloatValue)
+                    self?.percentageTextField.text = ""
+                } else {
+                    self?.component.width = nil
+                }
+            }.store(in: &subscribers)
+      
+        percentageTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                if let number {
+                    self?.component.width = .percentage(number.cgFloatValue)
+                    self?.widthTextField.text = ""
+                } else {
+                    self?.component.width = nil
+                }
+            }.store(in: &subscribers)
+        
         paginationInsetField
-            .textPublisher
-            .sink { [weak self] text in
-                self?.component.paginationInset =  UIDevice.isIPad ? VDSLayout.space12X : VDSLayout.space8X
+            .numberPublisher
+            .sink { [weak self] number in
+                if let number {
+                    self?.component.paginationInset = number.cgFloatValue
+                } else {
+                    self?.component.paginationInset =  UIDevice.isIPad ? VDSLayout.space12X : VDSLayout.space8X
+                }
             }.store(in: &subscribers)
         
         paginationFloatingSwitch.onChange = { [weak self] sender in
@@ -113,6 +143,7 @@ class CarouselViewController: BaseViewController<Carousel> {
         paginationFloatingSwitch.isOn = true
         paginationInsetField.text = UIDevice.isIPad ? "12px" : "8px"
         paginationInsetField.isUserInteractionEnabled = false
+        component.data = [{},{},{},{},{},{},{},{},{},{},{},{}]
     }
 
     func setupPicker() {

From 8de1ac8d99a44ba050c880564b65c7202ecf8b61 Mon Sep 17 00:00:00 2001
From: vasavk <vasavi.kanamarlapudi@verizon.com>
Date: Fri, 14 Jun 2024 13:30:25 +0530
Subject: [PATCH 05/18] Digital ACT-191 ONEAPP-7013 story: minor changes, added
 carousel to menu

---
 .../CarouselViewController.swift              | 26 +++++++++----------
 .../ViewControllers/MenuViewController.swift  |  1 +
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index d5779a8..02df53a 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -14,13 +14,13 @@ import VDSTokens
 class CarouselViewController: BaseViewController<Carousel> {
     
     let label = Label()
-
+    
     lazy var scalingTypePickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
-                           items: Carousel.AspectRatio.allCases)
+                           items: Tilelet.AspectRatio.allCases)
     }()
-        
+    
     lazy var paginationDisplayPickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -42,7 +42,7 @@ class CarouselViewController: BaseViewController<Carousel> {
     lazy var layoutPickerSelectorView = {
         PickerSelectorView(title: "1UP",
                            picker: self.picker,
-                           items: UIDevice.isIPad ? Carousel.Layout.allCases : [Carousel.Layout.oneUP, Carousel.Layout.twoUP, Carousel.Layout.threeUP])
+                           items: UIDevice.isIPad ? CarouselScrollbar.Layout.allCases : [CarouselScrollbar.Layout.oneUP, CarouselScrollbar.Layout.twoUP, CarouselScrollbar.Layout.threeUP])
     }()
     
     lazy var paginationKindPickerSelectorView = {
@@ -67,7 +67,7 @@ class CarouselViewController: BaseViewController<Carousel> {
     var paginationInsetField = NumericField()
     var widthTextField = NumericField()
     var percentageTextField = NumericField()
-
+    
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: component)
@@ -88,7 +88,7 @@ class CarouselViewController: BaseViewController<Carousel> {
         addFormRow(label: "Pagination Kind", view: paginationKindPickerSelectorView)
         addFormRow(label: "Pagination Float", view: paginationFloatingSwitch)
         addFormRow(label: "Pagination Inset", view: paginationInsetField)
-        addFormRow(label: "Slot Width", view: widthTextField)
+        addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "Percentage (1-100)", view: percentageTextField)
         addFormRow(label: "Slot Horizontal Alignment", view: horizAlignmtPickerSelectorView)
         addFormRow(label: "Slot Vertical Alignment", view: vertAlignmtPickerSelectorView)
@@ -103,7 +103,7 @@ class CarouselViewController: BaseViewController<Carousel> {
                     self?.component.width = nil
                 }
             }.store(in: &subscribers)
-      
+        
         percentageTextField
             .numberPublisher
             .sink { [weak self] number in
@@ -129,7 +129,7 @@ class CarouselViewController: BaseViewController<Carousel> {
             guard let self else { return }
             self.component.pagination = .init(kind: paginationKindPickerSelectorView.selectedItem, floating: sender.isOn)
         }
-            
+        
     }
     
     func setupModel() {
@@ -143,15 +143,15 @@ class CarouselViewController: BaseViewController<Carousel> {
         paginationFloatingSwitch.isOn = true
         paginationInsetField.text = UIDevice.isIPad ? "12px" : "8px"
         paginationInsetField.isUserInteractionEnabled = false
-        component.data = [{},{},{},{},{},{},{},{},{},{},{},{}]
+        component.data = [{},{},{},{},{},{},{},{}]
     }
-
+    
     func setupPicker() {
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
-
+        
         scalingTypePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.aspectRatio = item
         }
@@ -163,7 +163,7 @@ class CarouselViewController: BaseViewController<Carousel> {
         peekPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.peek = item
         }
-
+        
         gutterPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.gutter = item
         }
@@ -176,6 +176,6 @@ class CarouselViewController: BaseViewController<Carousel> {
             guard let self else { return }
             self.component.pagination = .init(kind: item, floating: paginationFloatingSwitch.isOn)
         }
-
+        
     }
 }
diff --git a/VDSSample/ViewControllers/MenuViewController.swift b/VDSSample/ViewControllers/MenuViewController.swift
index ec047a5..808b2cd 100644
--- a/VDSSample/ViewControllers/MenuViewController.swift
+++ b/VDSSample/ViewControllers/MenuViewController.swift
@@ -75,6 +75,7 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
         MenuComponent(title: "ButtonGroup", completed: true, viewController: ButtonGroupViewController.self),
         MenuComponent(title: "ButtonIcon", completed: true, viewController: ButtonIconViewController.self),
         MenuComponent(title: "Calendar", completed: true, viewController: CalendarViewController.self),
+        MenuComponent(title: "Carousel", completed: false, viewController: CarouselViewController.self),
         MenuComponent(title: "Carousel Scrollbar", completed: true, viewController: CarouselScrollbarViewConttroller.self),
         MenuComponent(title: "Checkbox", completed: true, viewController: CheckboxViewController.self),
         MenuComponent(title: "CheckboxItem", completed: true, viewController: CheckboxItemViewController.self),

From 09aba055a59af4c33627f4316b6d7dc533c3e808 Mon Sep 17 00:00:00 2001
From: vasavk <vasavi.kanamarlapudi@verizon.com>
Date: Fri, 14 Jun 2024 18:05:06 +0530
Subject: [PATCH 06/18] Digital ACT-191 ONEAPP-7013 story: changes to
 pagination inset

---
 VDSSample/ViewControllers/CarouselViewController.swift | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index 02df53a..94b6553 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -121,7 +121,7 @@ class CarouselViewController: BaseViewController<Carousel> {
                 if let number {
                     self?.component.paginationInset = number.cgFloatValue
                 } else {
-                    self?.component.paginationInset =  UIDevice.isIPad ? VDSLayout.space12X : VDSLayout.space8X
+                    self?.component.paginationInset =  UIDevice.isIPad ? VDSLayout.space3X : VDSLayout.space2X
                 }
             }.store(in: &subscribers)
         
@@ -141,8 +141,7 @@ class CarouselViewController: BaseViewController<Carousel> {
         layoutPickerSelectorView.text = component.layout.rawValue
         paginationKindPickerSelectorView.text = ButtonIcon.Kind.lowContrast.rawValue
         paginationFloatingSwitch.isOn = true
-        paginationInsetField.text = UIDevice.isIPad ? "12px" : "8px"
-        paginationInsetField.isUserInteractionEnabled = false
+        paginationInsetField.text = UIDevice.isIPad ? "12" : "8"
         component.data = [{},{},{},{},{},{},{},{}]
     }
     

From b5c609cacc88d8dd817ae621f6b819ec01279401 Mon Sep 17 00:00:00 2001
From: vasavk <vasavi.kanamarlapudi@verizon.com>
Date: Fri, 14 Jun 2024 20:32:11 +0530
Subject: [PATCH 07/18] updated to VDSCoreTokens

---
 VDSSample/ViewControllers/CarouselViewController.swift | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index 94b6553..41f3fea 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -9,7 +9,7 @@ import Foundation
 import UIKit
 import VDS
 import Combine
-import VDSTokens
+import VDSCoreTokens
 
 class CarouselViewController: BaseViewController<Carousel> {
     

From 3fe43e8c5585b9361609e04c655e762203be822a Mon Sep 17 00:00:00 2001
From: Vasavi Kanamarlapudi <vasavi.kanamarlapudi@verizon.com>
Date: Mon, 24 Jun 2024 18:42:42 +0530
Subject: [PATCH 08/18] Digital ACT-191 ONEAPP-7013 story: Peek minimum reverts
 to standard on tablet, and Pagination controls should show if peek none.

---
 .../ViewControllers/CarouselViewController.swift     | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index 41f3fea..56c4052 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -157,10 +157,22 @@ class CarouselViewController: BaseViewController<Carousel> {
         
         paginationDisplayPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.paginationDisplay = item
+            if (self?.component.peek == Carousel.Peek.none) && item == .none {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
+                    self?.paginationDisplayPickerSelectorView.text = "persistent"
+                }
+            }
         }
         
         peekPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.peek = item
+            if item == .none {
+                self?.paginationDisplayPickerSelectorView.text = "persistent"
+            } else if item == .minimum && UIDevice.isIPad {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
+                    self?.peekPickerSelectorView.text = "standard"
+                }
+            }
         }
         
         gutterPickerSelectorView.onPickerDidSelect = {  [weak self] item in

From 14199f53d17f918e08264ef90081420ee57b09bc Mon Sep 17 00:00:00 2001
From: Vasavi Kanamarlapudi <vasavi.kanamarlapudi@verizon.com>
Date: Mon, 1 Jul 2024 15:03:43 +0530
Subject: [PATCH 09/18] Digital ACT-191 ONEAPP-7013 story: Standard Peek
 supported for all Tablet viewports and layouts, for 1up layouts on Mobile
 viewports only.

---
 VDSSample/ViewControllers/CarouselViewController.swift | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index 56c4052..7efc2d8 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -172,6 +172,10 @@ class CarouselViewController: BaseViewController<Carousel> {
                 DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
                     self?.peekPickerSelectorView.text = "standard"
                 }
+            } else if item == .standard && !UIDevice.isIPad && (self?.component.layout != CarouselScrollbar.Layout.oneUP) {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
+                    self?.peekPickerSelectorView.text = "minimum"
+                }
             }
         }
         
@@ -180,6 +184,11 @@ class CarouselViewController: BaseViewController<Carousel> {
         }
         
         layoutPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            if item != .oneUP && !UIDevice.isIPad && self?.component.peek == Carousel.Peek.standard {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
+                    self?.peekPickerSelectorView.text = "minimum"
+                }
+            }
             self?.component.layout = item
         }
         

From 1ea4dff90bbc1b3f84a4108e5e818ee6368b4a91 Mon Sep 17 00:00:00 2001
From: Vasavi Kanamarlapudi <vasavi.kanamarlapudi@verizon.com>
Date: Thu, 4 Jul 2024 20:28:04 +0530
Subject: [PATCH 10/18] Digital ACT-191 ONEAPP-7013 story: Slot alignment and
 sending data as an example

---
 .../CarouselViewController.swift              | 40 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index 7efc2d8..cc7025d 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -67,6 +67,9 @@ class CarouselViewController: BaseViewController<Carousel> {
     var paginationInsetField = NumericField()
     var widthTextField = NumericField()
     var percentageTextField = NumericField()
+    var exampleSwitch = Toggle()
+    var emptyData: [Any] = []
+    var rows: [Any] = []
     
     override func viewDidLoad() {
         super.viewDidLoad()
@@ -90,6 +93,7 @@ class CarouselViewController: BaseViewController<Carousel> {
         addFormRow(label: "Pagination Inset", view: paginationInsetField)
         addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "Percentage (1-100)", view: percentageTextField)
+        addFormRow(label: "Example", view: exampleSwitch)
         addFormRow(label: "Slot Horizontal Alignment", view: horizAlignmtPickerSelectorView)
         addFormRow(label: "Slot Vertical Alignment", view: vertAlignmtPickerSelectorView)
         
@@ -130,6 +134,12 @@ class CarouselViewController: BaseViewController<Carousel> {
             self.component.pagination = .init(kind: paginationKindPickerSelectorView.selectedItem, floating: sender.isOn)
         }
         
+        exampleSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            component.data = sender.isOn ? rows : emptyData
+            component.slotAlignment = nil
+        }
+        
     }
     
     func setupModel() {
@@ -142,7 +152,26 @@ class CarouselViewController: BaseViewController<Carousel> {
         paginationKindPickerSelectorView.text = ButtonIcon.Kind.lowContrast.rawValue
         paginationFloatingSwitch.isOn = true
         paginationInsetField.text = UIDevice.isIPad ? "12" : "8"
-        component.data = [{},{},{},{},{},{},{},{}]
+        rows.append(Label().with { $0.text = "Slot 1"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Slot 2"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Slot 3"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Slot 4"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Slot 5"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Slot 6"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Slot 7"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Slot 8"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Slot 9"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Slot 10"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        emptyData = [{},{},{},{},{},{},{},{},{},{}]
+        component.data = exampleSwitch.isOn ? rows : emptyData
+        component.renderItemStyle = .init(backgroundColor: "#d9d9d9", height: 100, width: 100, borderRadius: 12.0)
+        label.text = "1"
+        
+        // Callback when moving the carousel. Returns initial visible slide's index in the carousel.
+        component.onChange = { [weak self] selectedIndex in
+            guard let self else { return }
+            label.text = "\(selectedIndex)"
+        }
     }
     
     func setupPicker() {
@@ -197,5 +226,14 @@ class CarouselViewController: BaseViewController<Carousel> {
             self.component.pagination = .init(kind: item, floating: paginationFloatingSwitch.isOn)
         }
         
+        vertAlignmtPickerSelectorView.onPickerDidSelect = { [weak self] item in
+            guard let self else { return }
+            self.component.slotAlignment = .init(vertical: item, horizontal: horizAlignmtPickerSelectorView.selectedItem)
+        }
+        
+        horizAlignmtPickerSelectorView.onPickerDidSelect = { [weak self] item in
+            guard let self else { return }
+            self.component.slotAlignment = .init(vertical: vertAlignmtPickerSelectorView.selectedItem, horizontal: item)
+        }
     }
 }

From 59d26348002b9a11a2d11040b15e340e2aeb730c Mon Sep 17 00:00:00 2001
From: Vasavi Kanamarlapudi <vasavi.kanamarlapudi@verizon.com>
Date: Wed, 17 Jul 2024 18:33:14 +0530
Subject: [PATCH 11/18] Digital ACT-191 ONEAPP-9311 story: addressing PR
 feedback

---
 .../CarouselViewController.swift              | 43 +++++++------------
 1 file changed, 16 insertions(+), 27 deletions(-)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index cc7025d..675c262 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -15,12 +15,6 @@ class CarouselViewController: BaseViewController<Carousel> {
     
     let label = Label()
     
-    lazy var scalingTypePickerSelectorView = {
-        PickerSelectorView(title: "",
-                           picker: self.picker,
-                           items: Tilelet.AspectRatio.allCases)
-    }()
-    
     lazy var paginationDisplayPickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -68,8 +62,8 @@ class CarouselViewController: BaseViewController<Carousel> {
     var widthTextField = NumericField()
     var percentageTextField = NumericField()
     var exampleSwitch = Toggle()
-    var emptyData: [Any] = []
-    var rows: [Any] = []
+    var emptyData: [UIView] = []
+    var rows: [UIView] = []
     
     override func viewDidLoad() {
         super.viewDidLoad()
@@ -83,7 +77,6 @@ class CarouselViewController: BaseViewController<Carousel> {
         //add form rows
         addFormRow(label: "onChange", view: label)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
         addFormRow(label: "Pagination Display", view: paginationDisplayPickerSelectorView)
         addFormRow(label: "Peek", view: peekPickerSelectorView)
         addFormRow(label: "Gutter", view: gutterPickerSelectorView)
@@ -136,7 +129,7 @@ class CarouselViewController: BaseViewController<Carousel> {
         
         exampleSwitch.onChange = { [weak self] sender in
             guard let self else { return }
-            component.data = sender.isOn ? rows : emptyData
+            component.views = sender.isOn ? rows : emptyData
             component.slotAlignment = nil
         }
         
@@ -144,7 +137,6 @@ class CarouselViewController: BaseViewController<Carousel> {
     
     func setupModel() {
         //setup UI
-        scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
         paginationDisplayPickerSelectorView.text = component.paginationDisplay.rawValue
         peekPickerSelectorView.text = component.peek.rawValue
         gutterPickerSelectorView.text = component.gutter.rawValue
@@ -152,18 +144,19 @@ class CarouselViewController: BaseViewController<Carousel> {
         paginationKindPickerSelectorView.text = ButtonIcon.Kind.lowContrast.rawValue
         paginationFloatingSwitch.isOn = true
         paginationInsetField.text = UIDevice.isIPad ? "12" : "8"
-        rows.append(Label().with { $0.text = "Slot 1"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "Slot 2"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "Slot 3"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "Slot 4"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "Slot 5"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "Slot 6"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "Slot 7"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "Slot 8"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "Slot 9"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "Slot 10"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
-        emptyData = [{},{},{},{},{},{},{},{},{},{}]
-        component.data = exampleSwitch.isOn ? rows : emptyData
+        let onClick: (ButtonBase) -> Void = { button in print("\(button.text!) clicked")}
+        rows.append(Label().with { $0.text = "Offer you best deals on phones, tablets, home, internet and more. Pre order the new version mobiles and get 10% off"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Secondary"; $0.onClick =  onClick})
+        rows.append(Label().with { $0.text = "Get iPhone 15 on us. Online only. "; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Button().with{ $0.use = .primary; $0.text = "Primary"; $0.onClick =  onClick})
+        rows.append(Label().with { $0.text = "Unlimited plans. No trade-in required."; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "With trade-in. Any condition guaranteed"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "iPhone 14 Plus get it on us."; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Double the storage on us"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Get iPhone 15"; $0.onClick =  onClick})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Get iPhone 14 Plus"; $0.onClick =  onClick})
+        emptyData = [UIView(),UIView(),UIView(),UIView()]
+        component.views = rows //exampleSwitch.isOn ? rows : emptyData
         component.renderItemStyle = .init(backgroundColor: "#d9d9d9", height: 100, width: 100, borderRadius: 12.0)
         label.text = "1"
         
@@ -180,10 +173,6 @@ class CarouselViewController: BaseViewController<Carousel> {
             self?.contentTopView.backgroundColor = item.color
         }
         
-        scalingTypePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.aspectRatio = item
-        }
-        
         paginationDisplayPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.paginationDisplay = item
             if (self?.component.peek == Carousel.Peek.none) && item == .none {

From 1ed92734a46d4279425815f9868c5b3772eb03b5 Mon Sep 17 00:00:00 2001
From: Vasavi Kanamarlapudi <vasavi.kanamarlapudi@verizon.com>
Date: Thu, 18 Jul 2024 12:56:07 +0530
Subject: [PATCH 12/18] Digital ACT-191 ONEAPP-7013 story: removing width,
 passing selectedGroupIndex through onChange, added selected index to form.

---
 .../CarouselViewController.swift              | 58 ++++++-------------
 1 file changed, 18 insertions(+), 40 deletions(-)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index 675c262..e68da8e 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -59,9 +59,7 @@ class CarouselViewController: BaseViewController<Carousel> {
     
     var paginationFloatingSwitch = Toggle()
     var paginationInsetField = NumericField()
-    var widthTextField = NumericField()
-    var percentageTextField = NumericField()
-    var exampleSwitch = Toggle()
+    var selectedIndexField = NumericField()
     var emptyData: [UIView] = []
     var rows: [UIView] = []
     
@@ -81,34 +79,20 @@ class CarouselViewController: BaseViewController<Carousel> {
         addFormRow(label: "Peek", view: peekPickerSelectorView)
         addFormRow(label: "Gutter", view: gutterPickerSelectorView)
         addFormRow(label: "Layout", view: layoutPickerSelectorView)
+        addFormRow(label: "Selected Group Index", view: selectedIndexField)
         addFormRow(label: "Pagination Kind", view: paginationKindPickerSelectorView)
         addFormRow(label: "Pagination Float", view: paginationFloatingSwitch)
         addFormRow(label: "Pagination Inset", view: paginationInsetField)
-        addFormRow(label: "Width", view: widthTextField)
-        addFormRow(label: "Percentage (1-100)", view: percentageTextField)
-        addFormRow(label: "Example", view: exampleSwitch)
         addFormRow(label: "Slot Horizontal Alignment", view: horizAlignmtPickerSelectorView)
         addFormRow(label: "Slot Vertical Alignment", view: vertAlignmtPickerSelectorView)
         
-        widthTextField
+        selectedIndexField
             .numberPublisher
             .sink { [weak self] number in
-                if let number {
-                    self?.component.width = .value(number.cgFloatValue)
-                    self?.percentageTextField.text = ""
+                if let number, number.intValue >= 0 {
+                    self?.component.selectedIndex = number.intValue
                 } else {
-                    self?.component.width = nil
-                }
-            }.store(in: &subscribers)
-        
-        percentageTextField
-            .numberPublisher
-            .sink { [weak self] number in
-                if let number {
-                    self?.component.width = .percentage(number.cgFloatValue)
-                    self?.widthTextField.text = ""
-                } else {
-                    self?.component.width = nil
+                    self?.component.selectedIndex = nil
                 }
             }.store(in: &subscribers)
         
@@ -127,12 +111,6 @@ class CarouselViewController: BaseViewController<Carousel> {
             self.component.pagination = .init(kind: paginationKindPickerSelectorView.selectedItem, floating: sender.isOn)
         }
         
-        exampleSwitch.onChange = { [weak self] sender in
-            guard let self else { return }
-            component.views = sender.isOn ? rows : emptyData
-            component.slotAlignment = nil
-        }
-        
     }
     
     func setupModel() {
@@ -147,23 +125,22 @@ class CarouselViewController: BaseViewController<Carousel> {
         let onClick: (ButtonBase) -> Void = { button in print("\(button.text!) clicked")}
         rows.append(Label().with { $0.text = "Offer you best deals on phones, tablets, home, internet and more. Pre order the new version mobiles and get 10% off"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
         rows.append(Button().with{ $0.use = .secondary; $0.text = "Secondary"; $0.onClick =  onClick})
-        rows.append(Label().with { $0.text = "Get iPhone 15 on us. Online only. "; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Get iPhone 15 on us. Online only. ";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
         rows.append(Button().with{ $0.use = .primary; $0.text = "Primary"; $0.onClick =  onClick})
-        rows.append(Label().with { $0.text = "Unlimited plans. No trade-in required."; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "With trade-in. Any condition guaranteed"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "iPhone 14 Plus get it on us."; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "Double the storage on us"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Unlimited plans. No trade-in required.";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "With trade-in. Any condition guaranteed";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "iPhone 14 Plus get it on us.";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Double the storage on us";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
         rows.append(Button().with{ $0.use = .secondary; $0.text = "Get iPhone 15"; $0.onClick =  onClick})
         rows.append(Button().with{ $0.use = .secondary; $0.text = "Get iPhone 14 Plus"; $0.onClick =  onClick})
-        emptyData = [UIView(),UIView(),UIView(),UIView()]
-        component.views = rows //exampleSwitch.isOn ? rows : emptyData
-        component.renderItemStyle = .init(backgroundColor: "#d9d9d9", height: 100, width: 100, borderRadius: 12.0)
-        label.text = "1"
+        component.views = rows
+        //        component.renderItemStyle = .init(backgroundColor: "#d9d9d9", height: 100, width: 100, borderRadius: 12.0)
+        label.text = "0"
         
-        // Callback when moving the carousel. Returns initial visible slide's index in the carousel.
-        component.onChange = { [weak self] selectedIndex in
+        // Callback when moving the carousel. Returns selectedGroupIndex.
+        component.onChange = { [weak self] selectedGroupIndex in
             guard let self else { return }
-            label.text = "\(selectedIndex)"
+            label.text = "\(selectedGroupIndex)"
         }
     }
     
@@ -208,6 +185,7 @@ class CarouselViewController: BaseViewController<Carousel> {
                 }
             }
             self?.component.layout = item
+            self?.label.text = "0"
         }
         
         paginationKindPickerSelectorView.onPickerDidSelect = {  [weak self] item in

From 304ee8ff7edf1409e3d6fd94b09ab713e955cdb7 Mon Sep 17 00:00:00 2001
From: Vasavi Kanamarlapudi <vasavi.kanamarlapudi@verizon.com>
Date: Thu, 18 Jul 2024 17:34:37 +0530
Subject: [PATCH 13/18] Digital ACT-191 ONEAPP-7013 story: Refactored code,
 updated views data, and added info label for testing purpose.

---
 .../CarouselViewController.swift              | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index e68da8e..1e66088 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -60,12 +60,17 @@ class CarouselViewController: BaseViewController<Carousel> {
     var paginationFloatingSwitch = Toggle()
     var paginationInsetField = NumericField()
     var selectedIndexField = NumericField()
-    var emptyData: [UIView] = []
     var rows: [UIView] = []
+    var infoLabel = Label().with { $0.textStyle = .boldBodyMedium }
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: component)
+        infoLabel.text = "Added Border To Slot Only For VQA Test."
+        let stack = UIStackView(arrangedSubviews: [component, infoLabel]).with {
+            $0.axis = .vertical
+            $0.spacing = 25
+        }
+        addContentTopView(view: stack)
         setupPicker()
         setupModel()
     }
@@ -123,18 +128,17 @@ class CarouselViewController: BaseViewController<Carousel> {
         paginationFloatingSwitch.isOn = true
         paginationInsetField.text = UIDevice.isIPad ? "12" : "8"
         let onClick: (ButtonBase) -> Void = { button in print("\(button.text!) clicked")}
-        rows.append(Label().with { $0.text = "Offer you best deals on phones, tablets, home, internet and more. Pre order the new version mobiles and get 10% off"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "Offer you best deals on phones, tablets, home, internet and more. Pre order the new version mobiles and get off *T&C apply."; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
         rows.append(Button().with{ $0.use = .secondary; $0.text = "Secondary"; $0.onClick =  onClick})
         rows.append(Label().with { $0.text = "Get iPhone 15 on us. Online only. ";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
         rows.append(Button().with{ $0.use = .primary; $0.text = "Primary"; $0.onClick =  onClick})
         rows.append(Label().with { $0.text = "Unlimited plans. No trade-in required.";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
         rows.append(Label().with { $0.text = "With trade-in. Any condition guaranteed";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "iPhone 14 Plus get it on us.";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Label().with { $0.text = "Double the storage on us";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
-        rows.append(Button().with{ $0.use = .secondary; $0.text = "Get iPhone 15"; $0.onClick =  onClick})
-        rows.append(Button().with{ $0.use = .secondary; $0.text = "Get iPhone 14 Plus"; $0.onClick =  onClick})
+        rows.append(Button().with{ $0.use = .primary; $0.text = "More"; $0.onClick =  onClick})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Shop"; $0.onClick =  onClick})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Buy"; $0.onClick =  onClick})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Offer"; $0.onClick =  onClick})
         component.views = rows
-        //        component.renderItemStyle = .init(backgroundColor: "#d9d9d9", height: 100, width: 100, borderRadius: 12.0)
         label.text = "0"
         
         // Callback when moving the carousel. Returns selectedGroupIndex.
@@ -148,6 +152,7 @@ class CarouselViewController: BaseViewController<Carousel> {
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
+            self?.infoLabel.surface = item
         }
         
         paginationDisplayPickerSelectorView.onPickerDidSelect = {  [weak self] item in

From e89acb3c122ba072fc5c1797b19354cf8f31ef28 Mon Sep 17 00:00:00 2001
From: Vasavi Kanamarlapudi <vasavi.kanamarlapudi@verizon.com>
Date: Thu, 18 Jul 2024 20:28:04 +0530
Subject: [PATCH 14/18] Digital ACT-191 ONEAPP-7013 story: updated views with
 tile container and removed slot border

---
 .../CarouselViewController.swift              | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index 1e66088..f89517a 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -61,16 +61,10 @@ class CarouselViewController: BaseViewController<Carousel> {
     var paginationInsetField = NumericField()
     var selectedIndexField = NumericField()
     var rows: [UIView] = []
-    var infoLabel = Label().with { $0.textStyle = .boldBodyMedium }
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        infoLabel.text = "Added Border To Slot Only For VQA Test."
-        let stack = UIStackView(arrangedSubviews: [component, infoLabel]).with {
-            $0.axis = .vertical
-            $0.spacing = 25
-        }
-        addContentTopView(view: stack)
+        addContentTopView(view: component)
         setupPicker()
         setupModel()
     }
@@ -138,9 +132,19 @@ class CarouselViewController: BaseViewController<Carousel> {
         rows.append(Button().with{ $0.use = .secondary; $0.text = "Shop"; $0.onClick =  onClick})
         rows.append(Button().with{ $0.use = .secondary; $0.text = "Buy"; $0.onClick =  onClick})
         rows.append(Button().with{ $0.use = .secondary; $0.text = "Offer"; $0.onClick =  onClick})
-        component.views = rows
+        component.views = rows.compactMap({ view in
+              return TileContainer().with { instance in
+                instance.aspectRatio = .none
+                instance.addContentView(view)
+                instance.color = .custom(.lightGray)
+              }
+            })
         label.text = "0"
         
+        component.slotAlignment = .init(vertical: Carousel.Vertical.top, horizontal: Carousel.Horizontal.left)
+        horizAlignmtPickerSelectorView.text = Carousel.Horizontal.left.rawValue
+        vertAlignmtPickerSelectorView.text = Carousel.Vertical.top.rawValue
+        
         // Callback when moving the carousel. Returns selectedGroupIndex.
         component.onChange = { [weak self] selectedGroupIndex in
             guard let self else { return }
@@ -152,7 +156,6 @@ class CarouselViewController: BaseViewController<Carousel> {
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
-            self?.infoLabel.surface = item
         }
         
         paginationDisplayPickerSelectorView.onPickerDidSelect = {  [weak self] item in

From a96f3509e333b35b57cc27725732565e05aca662 Mon Sep 17 00:00:00 2001
From: Vasavi Kanamarlapudi <vasavi.kanamarlapudi@verizon.com>
Date: Fri, 19 Jul 2024 11:18:15 +0530
Subject: [PATCH 15/18] Digital ACT-191 ONEAPP-7013 story: renamed
 selectedIndex to groupIndex

---
 VDSSample/ViewControllers/CarouselViewController.swift | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index f89517a..485a664 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -89,9 +89,9 @@ class CarouselViewController: BaseViewController<Carousel> {
             .numberPublisher
             .sink { [weak self] number in
                 if let number, number.intValue >= 0 {
-                    self?.component.selectedIndex = number.intValue
+                    self?.component.groupIndex = number.intValue
                 } else {
-                    self?.component.selectedIndex = nil
+                    self?.component.groupIndex = nil
                 }
             }.store(in: &subscribers)
         

From e250f204e8eb6d0dc47bd32dc1ed7c94cf9ddc61 Mon Sep 17 00:00:00 2001
From: Vasavi Kanamarlapudi <vasavi.kanamarlapudi@verizon.com>
Date: Fri, 19 Jul 2024 17:01:24 +0530
Subject: [PATCH 16/18] minor changes

---
 VDSSample/ViewControllers/CarouselViewController.swift | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/VDSSample/ViewControllers/CarouselViewController.swift b/VDSSample/ViewControllers/CarouselViewController.swift
index 485a664..d5c4bb8 100644
--- a/VDSSample/ViewControllers/CarouselViewController.swift
+++ b/VDSSample/ViewControllers/CarouselViewController.swift
@@ -78,7 +78,7 @@ class CarouselViewController: BaseViewController<Carousel> {
         addFormRow(label: "Peek", view: peekPickerSelectorView)
         addFormRow(label: "Gutter", view: gutterPickerSelectorView)
         addFormRow(label: "Layout", view: layoutPickerSelectorView)
-        addFormRow(label: "Selected Group Index", view: selectedIndexField)
+//        addFormRow(label: "Selected Group Index", view: selectedIndexField)
         addFormRow(label: "Pagination Kind", view: paginationKindPickerSelectorView)
         addFormRow(label: "Pagination Float", view: paginationFloatingSwitch)
         addFormRow(label: "Pagination Inset", view: paginationInsetField)
@@ -91,7 +91,7 @@ class CarouselViewController: BaseViewController<Carousel> {
                 if let number, number.intValue >= 0 {
                     self?.component.groupIndex = number.intValue
                 } else {
-                    self?.component.groupIndex = nil
+                    self?.component.groupIndex = 0
                 }
             }.store(in: &subscribers)
         

From 9073887c84fc80869df684acf9f5b80329c80a81 Mon Sep 17 00:00:00 2001
From: Matt Bruce <matt.bruce@verizon.com>
Date: Fri, 19 Jul 2024 13:30:00 -0500
Subject: [PATCH 17/18] enabled carousel

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
---
 VDSSample/ViewControllers/MenuViewController.swift | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/VDSSample/ViewControllers/MenuViewController.swift b/VDSSample/ViewControllers/MenuViewController.swift
index 0b894a0..b339998 100644
--- a/VDSSample/ViewControllers/MenuViewController.swift
+++ b/VDSSample/ViewControllers/MenuViewController.swift
@@ -75,7 +75,7 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
         MenuComponent(title: "ButtonGroup", completed: true, viewController: ButtonGroupViewController.self),
         MenuComponent(title: "ButtonIcon", completed: true, viewController: ButtonIconViewController.self),
         MenuComponent(title: "Calendar", completed: true, viewController: CalendarViewController.self),
-        MenuComponent(title: "Carousel", completed: false, viewController: CarouselViewController.self),
+        MenuComponent(title: "Carousel", completed: true, viewController: CarouselViewController.self),
         MenuComponent(title: "Carousel Scrollbar", completed: true, viewController: CarouselScrollbarViewConttroller.self),
         MenuComponent(title: "Checkbox", completed: true, viewController: CheckboxViewController.self),
         MenuComponent(title: "CheckboxItem", completed: true, viewController: CheckboxItemViewController.self),

From 0c0afcd296f531b1dee560119b5d938c34482374 Mon Sep 17 00:00:00 2001
From: Matt Bruce <matt.bruce@verizon.com>
Date: Fri, 19 Jul 2024 13:30:41 -0500
Subject: [PATCH 18/18] updated version

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
---
 VDSSample.xcodeproj/project.pbxproj | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/VDSSample.xcodeproj/project.pbxproj b/VDSSample.xcodeproj/project.pbxproj
index a3ed92e..9edd4aa 100644
--- a/VDSSample.xcodeproj/project.pbxproj
+++ b/VDSSample.xcodeproj/project.pbxproj
@@ -717,7 +717,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 70;
+				CURRENT_PROJECT_VERSION = 71;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -753,7 +753,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 70;
+				CURRENT_PROJECT_VERSION = 71;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;