fix(datepicker): fix datepicker issues when clearing value and notch border

[didimmova]

Closes #1886

[ddaribo]

The second issue with the top border on clear for a non-readonly state still occurs.
I think the responsible style is again in input.material.scss, line 511, where the top border color of the notch is set to transparent in case the input is filled. Removing the filled selector might address it:

    input:placeholder-shown + [part='notch'],
    [part~='filled'] + [part='notch'] {
        border: {
            width: $active-border-width;
            color: var-get($theme, 'focused-border-color');
            top: $idle-border-width solid transparent;
        }
    }

[ddaribo]

This seems to fix the positioning issue on clear through the icon, however, I am not convinced it would be the best solution.

In input.material.scss lines 145-159, there are the following styles, which set the proper positioning when the input is not readonly. Having in mind that the issue occurs for readonly, I believe removing the :not([readonly]) selector might address it?

:host(:not([readonly]):focus-within) {
    [part='label'] {
        @include type-style('caption');

        translate: 0 -73%;
    }
}

:host([outlined]:not([readonly]):focus-within) {
    [part='label'] {
        @extend %label;

        align-self: start;
    }
}