Merge pull request #2767 from Akshat55/datepicker-alignment

fix: align datepicker icon relative to input

Author: Akshat55

src/datepicker-input/datepicker-input.component.ts

@@ -35,7 +35,8 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 						'cds--date-picker-input__wrapper--invalid': invalid,
 						'cds--date-picker-input__wrapper--warn': warn
 					}">
-					<input
+					<span>
+						<input
 						#input
 						*ngIf="!skeleton"
 						autocomplete="off"
@@ -52,25 +53,26 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 						[placeholder]="placeholder"
 						[id]= "id"
 						[disabled]="disabled"
-						(change)="onChange($event)"/>
-						<svg
-							*ngIf="type !== 'simple' && !warn && !invalid"
-							cdsIcon="calendar"
-							size="16"
-							class="cds--date-picker__icon">
-						</svg>
-						<svg
-							*ngIf="!warn && invalid"
-							class="cds--date-picker__icon cds--date-picker__icon--invalid"
-							cdsIcon="warning--filled"
-							size="16">
-						</svg>
-						<svg
-							*ngIf="!invalid && warn"
-							cdsIcon="warning--alt--filled"
-							size="16"
-							class="cds--date-picker__icon cds--date-picker__icon--warn">
-						</svg>
+							(change)="onChange($event)"/>
+							<svg
+								*ngIf="type !== 'simple' && !warn && !invalid"
+								cdsIcon="calendar"
+								size="16"
+								class="cds--date-picker__icon">
+							</svg>
+							<svg
+								*ngIf="!warn && invalid"
+								class="cds--date-picker__icon cds--date-picker__icon--invalid"
+								cdsIcon="warning--filled"
+								size="16">
+							</svg>
+							<svg
+								*ngIf="!invalid && warn"
+								cdsIcon="warning--alt--filled"
+								size="16"
+								class="cds--date-picker__icon cds--date-picker__icon--warn">
+							</svg>
+					</span>
 				</div>
 				<div
 					*ngIf="helperText && !invalid && !warn"

src/datepicker/datepicker.stories.ts

@@ -115,7 +115,7 @@ const RangeTemplate = (args) => ({
 			[rangeLabel]="label"
 			[size]="size"
 			range="true"
-			id="initial-value-datepicker"
+			id="initial-value-range-datepicker"
 			[placeholder]="placeholder"
 			[language]="language"
 			[theme]="theme"
@@ -156,7 +156,7 @@ const RangeTemplate = (args) => ({
 export const Range = RangeTemplate.bind({});
 Range.args = {
 	dateFormat: "d/m/Y",
-	value: [new Date("01 Feb 24"), new Date("29 Feb 24")],
+	value: ["01/02/24", "08/02/24"],
 	language: "en"
 };
 Range.argTypes = {