DSP-615 Date Value Component Polish

[mdelez]

closes https://dasch.myjetbrains.com/youtrack/issue/DSP-615

uses js-lib rc.11 and dsp-api rc.15

[mdelez]

The problem stems from the DOM elements not generating inside the correct divs for the default Material Design css to take effect.

Here is what it should look like, using the default mat-datepicker in the template and the MatNativeDateModule in the AppModule. Notice that the mat-datepicker-toggle is placed inside the div mat-form-field-suffix.

And here is what is generated with the JDNCalendar directive. The mat-datepicker-toggle is placed inside the div mat-form-field-infix

[kilchenmann]

uses js-lib rc.11 and dsp-api rc.15

Is this information relevant in this PR? It's not up to date anymore 😉

[mdelez]

Update: It seems to be an issue with the jdndatepicker directive. If I use a mat-datepicker in the template without the directive and provide the Active Calendar token directly inside the date-input component, it works.

[mdelez]

uses js-lib rc.11 and dsp-api rc.15

Is this information relevant in this PR? It's not up to date anymore 😉

Yeah it's outdated now. Flavie likes to have this info for reviews. Maybe I can add this info at the end, since PR's that are open for a long time will likely use different versions by the end.

[kilchenmann]

It seems to be an issue with the jdndatepicker directive. If I use a mat-datepicker in the template without the directive and provide the Active Calendar token directly inside the date-input component, it works.

Yes, I can imagine why. The jdndatepicker directive needs additional space and we did not define it in the root css. But I'm not sure and will check this

[kilchenmann]

Yeah it's outdated now. Flavie likes to have this info for reviews. Maybe I can add this info at the end, since PR's that are open for a long time will likely use different versions by the end.

Agree. But as soon we update a branch from master it could change. Especially js-lib version is defined in package.json. When I switch branches I run always npm install to get the correct version for this branch. But yes, I agree with the api version. I hope we will solve this dependency mess soon. 🙈

[mdelez]

It seems to be an issue with the jdndatepicker directive. If I use a mat-datepicker in the template without the directive and provide the Active Calendar token directly inside the date-input component, it works.

Yes, I can imagine why. The jdndatepicker directive needs additional space and we did not define it in the root css. But I'm not sure and will check this

What's not clear to me is why using this directive makes the html generate incorrectly. The mat-datepicker-toggle should always be in the suffix div.

[kilchenmann]

What's not clear to me is why using this directive makes the html generate incorrectly. The mat-datepicker-toggle should always be in the suffix div.

I see. So, the little calendar icon to open the calendar is a suffix? Good to know. At the moment it's at the beginning; I thought it's a prefix. But good. I try to style it 😵 It's tricky 🤪

[mdelez]

What's not clear to me is why using this directive makes the html generate incorrectly. The mat-datepicker-toggle should always be in the suffix div.

I see. So, the little calendar icon to open the calendar is a suffix? Good to know. At the moment it's at the beginning; I thought it's a prefix. But good. I try to style it 😵 It's tricky 🤪

if we can find a way to make the directive generate the calendar icon in the suffix, then the default material design css should do all the styling for us.