course_membership.js: replace with webcomponent

[freyavs]

This pull request removes course_membership.js and replaces the functionality with web components (using the already existing d-datalist-input), with the goal of removing jquery and converting to typescript.

The view has slightly changed from this:

To this:

It is progress on #3590

[jorg-vr]

This looks good :)

I left some minor remarks but these are mostly about comments

One visual issue I noticed, could you add a bit of margin to the top or bottom of the labels? they don't look great when there is more than one row

[bmesuere]

The code looks good, but I have a minor UX remark. If I'm correct, you can type something that is not present in the list and add it as well, but the UI isn't super clear on that because of the double focus on "search" both in the placeholder text and the info below.

Maybe searching doesn't even have to be mentioned because it's not needed?

[freyavs]

The code looks good, but I have a minor UX remark. If I'm correct, you can type something that is not present in the list and add it as well, but the UI isn't super clear on that because of the double focus on "search" both in the placeholder text and the info below.

Maybe searching doesn't even have to be mentioned because it's not needed?

I agree. Would this be better, or still not clear enough?
info: "Add an existing userlabel or create a new one"
placeholder: just something like "start typing..."

[bmesuere]

The code looks good, but I have a minor UX remark. If I'm correct, you can type something that is not present in the list and add it as well, but the UI isn't super clear on that because of the double focus on "search" both in the placeholder text and the info below.
Maybe searching doesn't even have to be mentioned because it's not needed?

I agree. Would this be better, or still not clear enough? info: "Add an existing userlabel or create a new one" placeholder: just something like "start typing..."

I agree with the info text, but would just use "Label" as placeholder text. This best matches the material design spec.