poc editable date range input

Author: ddaribo

src/components/date-range-picker/date-range-input.ts

@@ -8,7 +8,8 @@ import {
   runValidationContainerTests,
   simulateClick,
 } from '../common/utils.spec.js';
-import IgcInputComponent from '../input/input.js';
+import type IgcDateRangeInputComponentComponent from './date-range-input.js';
+import IgcDateRangeInputComponent from './date-range-input.js';
 import IgcDateRangePickerComponent, {
   type DateRangeValue,
 } from './date-range-picker.js';
@@ -18,7 +19,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
   before(() => defineComponents(IgcDateRangePickerComponent));
 
   let picker: IgcDateRangePickerComponent;
-  let input: IgcInputComponent;
+  let input: IgcDateRangeInputComponentComponent;
   let startKey = '';
   let endKey = '';
 
@@ -64,24 +65,26 @@ describe('Date Range Picker Single Input - Form integration', () => {
       await elementUpdated(spec.element);
 
       input = picker.renderRoot.querySelector(
-        IgcInputComponent.tagName
-      ) as IgcInputComponent;
+        IgcDateRangeInputComponent.tagName
+      ) as IgcDateRangeInputComponent;
 
       checkSelectedRange(spec.element, value, false);
 
       spec.reset();
       await elementUpdated(spec.element);
 
       expect(spec.element.value).to.deep.equal(initial);
-      expect(input.value).to.equal('');
+      expect(input.value).to.deep.equal({ start: null, end: null });
     });
 
     it('should not be in invalid state on reset for a required control which previously had value', () => {
       spec.setProperties({ value: value });
       spec.setProperties({ required: true });
 
       spec.assertSubmitPasses();
-      const input = picker.renderRoot.querySelector(IgcInputComponent.tagName)!;
+      const input = picker.renderRoot.querySelector(
+        IgcDateRangeInputComponent.tagName
+      )!;
       expect(input.invalid).to.be.false;
 
       spec.setProperties({ value: null });
@@ -97,7 +100,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
       spec.assertSubmitFails();
       await elementUpdated(spec.element);
       const input = spec.element.renderRoot.querySelector(
-        IgcInputComponent.tagName
+        IgcDateRangeInputComponent.tagName
       )!;
       expect(input.invalid).to.be.true;
 
@@ -115,10 +118,10 @@ describe('Date Range Picker Single Input - Form integration', () => {
       await elementUpdated(spec.element);
 
       input = spec.element.renderRoot.querySelector(
-        IgcInputComponent.tagName
-      ) as IgcInputComponent;
+        IgcDateRangeInputComponent.tagName
+      ) as IgcDateRangeInputComponent;
 
-      expect(input.value).to.equal('');
+      expect(input.value).to.deep.equal({ start: null, end: null });
 
       spec.reset();
       await elementUpdated(spec.element);
@@ -143,7 +146,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
       spec.assertSubmitFails();
       await elementUpdated(spec.element);
       const input = spec.element.renderRoot.querySelector(
-        IgcInputComponent.tagName
+        IgcDateRangeInputComponent.tagName
       )!;
       expect(input.invalid).to.be.true;
 
@@ -159,7 +162,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
       spec.assertSubmitPasses();
       await elementUpdated(spec.element);
       const input = spec.element.renderRoot.querySelector(
-        IgcInputComponent.tagName
+        IgcDateRangeInputComponent.tagName
       )!;
       expect(input.invalid).to.be.false;
 
@@ -202,7 +205,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
       spec.assertSubmitPasses();
       await elementUpdated(spec.element);
       const input = spec.element.renderRoot.querySelector(
-        IgcInputComponent.tagName
+        IgcDateRangeInputComponent.tagName
       )!;
       expect(input.invalid).to.be.false;
 
@@ -243,7 +246,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
       spec.assertSubmitPasses();
       await elementUpdated(spec.element);
       const input = spec.element.renderRoot.querySelector(
-        IgcInputComponent.tagName
+        IgcDateRangeInputComponent.tagName
       )!;
       expect(input.invalid).to.be.false;
 
@@ -276,7 +279,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
       spec.assertSubmitPasses();
       await elementUpdated(spec.element);
       const input = spec.element.renderRoot.querySelector(
-        IgcInputComponent.tagName
+        IgcDateRangeInputComponent.tagName
       )!;
       expect(input.invalid).to.be.false;
 
@@ -318,7 +321,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
       spec.assertSubmitFails();
       await elementUpdated(spec.element);
       const input = spec.element.renderRoot.querySelector(
-        IgcInputComponent.tagName
+        IgcDateRangeInputComponent.tagName
       )!;
       expect(input.invalid).to.be.true;
 
@@ -378,7 +381,7 @@ describe('Date Range Picker Single Input - Form integration', () => {
       spec.assertSubmitFails();
       await elementUpdated(spec.element);
       const input = spec.element.renderRoot.querySelector(
-        IgcInputComponent.tagName
+        IgcDateRangeInputComponent.tagName
       )!;
       expect(input.invalid).to.be.true;
 
@@ -411,8 +414,8 @@ describe('Date Range Picker Single Input - Form integration', () => {
         html`<igc-date-range-picker required></igc-date-range-picker>`
       );
       const input = picker.renderRoot.querySelector(
-        IgcInputComponent.tagName
-      ) as IgcInputComponent;
+        IgcDateRangeInputComponent.tagName
+      ) as IgcDateRangeInputComponent;
 
       expect(picker.invalid).to.be.false;
       expect(input.invalid).to.be.false;