Create dot-tag

[fmontes]

As a developer, I want a custom element so I can render a DotCMS Tags Field.

To consider

This field is more complex that what we're been doing, so we might need custom elements for certains parts of this.

Selector

<dot-tags></dot-tags>

Common Attributes

Name	Type
label	string
hint	string
required	boolean
required-message	string and fallback to: "The field {name} is required"
disabled	boolean
value	string separated by semicolon

Extra Attributes

Name	Type
threshold	string
debounce	string

1. threshold: number on how many chars until the search happen, default: 0
2. debounce: miliseconds wait un stop typing to start searching, default: 300ms

Validation

1. Required:
   • Use required-message

Status clases

Class	If
dot-valid	the input field is valid without errors.
dot-invalid	the input does not pass validations.
dot-pristine	a user has not interacted with the control yet.
dot-dirty	the value of form field has been changed.
dot-touched	a user tabbed out from the input control.
dot-untouched	a user has not tabbed out from the input control.

Possible Markup

<label for="{name}">{label}</label>
<input type="text" id={name} />
<auto-complete-component></auto-complete-component>
<span>{hint}</span>
<span>{error}</span>

Events

• valueChange: emit when the user change the valueChanges
• statusChange: emit when field change his status, valid, invalid, pristine, etc...
• selected: emit when a tag is selected
• removed: emit when a tag is removed

Mock

How should works

1. User type and...
2. Hit the endpoint to get tag suggestions
3. Populate the list with the result suggsted tags
4. User should be able of select a tag using up/down/enter or click
5. ESC and click outside close the options
6. When user select a tag: add it to the "input" with a x button to remove the tag
7. Add or remove a tag emit the event valueChange, selected and removed respectively

API to get suggestions

Waiting for: https://github.com/dotCMS/core/issues/16461

Autocomplete JS library

https://tarekraafat.github.io/autoComplete.js/

Acceptance Criteria

1. Build tag element
2. Work in all the supported browsers (don't forget IE11 and iPad)
3. Multilanguage
4. Unit test

[fmontes]

We need to hook this up with the dotcms tag endpoint: http://localhost:8080/api/v1/tags?name=tra