Class HTMLStringTagsElement

A custom HTML element which allows for arbitrary assignment of a set of string tags. This element may be used directly or subclassed to impose additional validation or functionality.

Hierarchy (view full)

AbstractFormInputElement
- HTMLStringTagsElement

Properties

`Protected` _primaryInput

_primaryInput: HTMLElement

The primary input (if any). Used to determine what element should receive focus when an associated label is clicked on.

`Protected` _internals

_internals: ElementInternals

Attached ElementInternals which provides form handling functionality.

`Private` #button

#button: HTMLButtonElement

The button element to add a new tag.

`Private` #input

#input: HTMLInputElement

The input element to enter a new tag.

`Private` #tags

#tags: HTMLDivElement

The tags list of assigned tags.

`Private` #slug

#slug: boolean

Automatically slugify all strings provided to the element?

`Static` tagName

tagName: string = "string-tags"

`Static` formAssociated

formAssociated: boolean = true

Declare that this custom element provides form element functionality.

Accessors

form

get form(): HTMLFormElement
The form this element belongs to.

Returns HTMLFormElement
Inherited from AbstractFormInputElement.form

name

get name(): string
The input element name.

Returns string
Inherited from AbstractFormInputElement.name

value

get value(): FormInputValueType
The value of the input element.

Returns FormInputValueType
Inherited from AbstractFormInputElement.value

disabled

get disabled(): boolean
Is this element disabled?

Returns boolean
Inherited from AbstractFormInputElement.disabled

editable

get editable(): boolean
Is this field editable? The field can be neither disabled nor readonly.

Returns boolean
Inherited from AbstractFormInputElement.editable

Methods

_buildElements

_buildElements(): (HTMLButtonElement | HTMLDivElement)[]
Returns (HTMLButtonElement | HTMLDivElement)[]
Overrides AbstractFormInputElement._buildElements

_refresh

_refresh(): void
Returns void
Overrides AbstractFormInputElement._refresh

_activateListeners

_activateListeners(): void
Returns void
Overrides AbstractFormInputElement._activateListeners

_getValue

_getValue(): any[]
Returns any[]
Overrides AbstractFormInputElement._getValue

_setValue

_setValue(value): void
Parameters
- value: any
Returns void
Overrides AbstractFormInputElement._setValue

_toggleDisabled

_toggleDisabled(disabled): void
Parameters
- disabled: any
Returns void
Overrides AbstractFormInputElement._toggleDisabled

connectedCallback

connectedCallback(): void
Initialize the custom element, constructing its HTML.

Returns void
Inherited from AbstractFormInputElement.connectedCallback

_applyInputAttributes

_applyInputAttributes(input): void
Internal
Apply key attributes on the containing custom HTML element to input elements contained within it.
Parameters
- input: any
Returns void
Inherited from AbstractFormInputElement._applyInputAttributes

`Protected` _initializeTags

_initializeTags(): void
Protected
Initialize innerText or an initial value attribute of the element as a comma-separated list of currently assigned string tags.

Returns void

`Protected` _validateTag

_validateTag(tag): void
Protected
Subclasses may impose more strict validation on what tags are allowed.
Parameters
- tag: string
  A candidate tag
Returns void
Throws
An error if the candidate tag is not allowed

`Protected` _onClick

_onClick(event): void
Protected
Special handling when the custom element is clicked. This should be implemented to transfer focus to an appropriate internal element.
Parameters
- event: PointerEvent
Returns void
Inherited from AbstractFormInputElement._onClick

`Private` #onClickTag

#onClickTag(event): void
Remove a tag from the set when its removal button is clicked.
Parameters
- event: PointerEvent
Returns void

`Private` #onKeydown

#onKeydown(event): void
Add a tag to the set when the ENTER key is pressed in the text input.
Parameters
- event: KeyboardEvent
Returns void

`Private` #addTag

#addTag(): void
Add a new tag to the set upon user input.

Returns void

`Static` renderTag

renderTag(tag, label?, editable?): HTMLDivElement
Render the tagged string as an HTML element.
Parameters
- tag: string
  The raw tag value
- Optional label: string
  An optional tag label
- Optional editable: boolean = true
  Is the tag editable?
Returns HTMLDivElement
A rendered HTML element for the tag

`Static` create

create(config): HTMLElement
Create a HTMLStringTagsElement using provided configuration data.
Parameters
- config: any
Returns HTMLElement

Class HTMLStringTagsElement

Hierarchy (view full)

Index

Properties

Accessors

Methods

Properties

Protected _primaryInput

Protected _internals

Private #button

Private #input

Private #tags

Private #slug

Static tagName

Static formAssociated

Accessors

form

Returns HTMLFormElement

name

Returns string

value

Returns FormInputValueType

disabled

Returns boolean

editable

Returns boolean

Methods

_buildElements

Returns (HTMLButtonElement | HTMLDivElement)[]

_refresh

Returns void

_activateListeners

Returns void

_getValue

Returns any[]

_setValue

Parameters

Returns void

_toggleDisabled

Parameters

Returns void

connectedCallback

Returns void

_applyInputAttributes

Parameters

Returns void

Protected _initializeTags

Returns void

Protected _validateTag

Parameters

Returns void

Throws

Protected _onClick

Parameters

Returns void

Private #onClickTag

Parameters

Returns void

Private #onKeydown

Parameters

Returns void

Private #addTag

Returns void

Static renderTag

Parameters

Returns HTMLDivElement

Static create

Parameters

Returns HTMLElement

Settings

Member Visibility

Theme

On This Page

`Protected` _primaryInput

`Protected` _internals

`Private` #button

`Private` #input

`Private` #tags

`Private` #slug

`Static` tagName

`Static` formAssociated

`Protected` _initializeTags

`Protected` _validateTag

`Protected` _onClick

`Private` #onClickTag

`Private` #onKeydown

`Private` #addTag

`Static` renderTag

`Static` create