Class: DataList

DataList()

new DataList()

NB: Attributes not available here - use connectedCallback to reference
Source:

Members

componentVersion

Component version
Source:

componentVersion

Component version
Source:

(static) observedAttributes

Makes HTML attribute change watched
Source:

(static) observedAttributes

Makes HTML attribute change watched
Source:

Methods

attributeChangedCallback(attrib, oldVal, newVal)

Runs when an observed attribute changes - Note: values are always strings NOTE: On initial startup, this is called for each watched attrib set in HTML. and BEFORE connectedCallback is called.
Parameters:
Name Type Description
attrib string Name of watched attribute that has changed
oldVal string The previous attribute value
newVal string The new attribute value
Source:

attributeChangedCallback(attrib, oldVal, newVal)

Runs when an observed attribute changes - Note: values are always strings NOTE: On initial startup, this is called for each watched attrib set in HTML. and BEFORE connectedCallback is called.
Parameters:
Name Type Description
attrib string Name of watched attribute that has changed
oldVal string The previous attribute value
newVal string The new attribute value
Source:

buildLIhtml(options) → {string}

Builds a list item HTML string based on the provided options.
Parameters:
Name Type Description
options object Object containing options for building the list item
Properties
Name Type Description
arrayType boolean True if the list is an array, false if it is an object
key string The key for the list item, used as the id and data-index
value string The value for the list item, displayed as the text
i number The index of the item in the list, used for data-index attribute
Source:
Returns:
The HTML string for the list item
Type
string

buildLIhtml(options) → {string}

Builds a list item HTML string based on the provided options.
Parameters:
Name Type Description
options object Object containing options for building the list item
Properties
Name Type Description
arrayType boolean True if the list is an array, false if it is an object
key string The key for the list item, used as the id and data-index
value string The value for the list item, displayed as the text
i number The index of the item in the list, used for data-index attribute
Source:
Returns:
The HTML string for the list item
Type
string

buildList(listData, parentEl, type, depth)

Builds a list from input data
Parameters:
Name Type Description
listData Array | object Source data for the list, can be an array or an object
parentEl HTMLElement | ShadowRoot The parent element to append the list to
type "ol" | "ul" The type of list to create, either 'ol' for ordered or 'ul' for unordered
depth number Recursion depth. Defaults to 1. Used to limit recursion depth for nested objects/arrays.
Source:

buildList(listData, parentEl, type, depth)

Builds a list from input data
Parameters:
Name Type Description
listData Array | object Source data for the list, can be an array or an object
parentEl HTMLElement | ShadowRoot The parent element to append the list to
type "ol" | "ul" The type of list to create, either 'ol' for ordered or 'ul' for unordered
depth number Recursion depth. Defaults to 1. Used to limit recursion depth for nested objects/arrays.
Source:

connectedCallback()

Runs when an instance is added to the DOM Runs AFTER the initial attributeChangedCallback's
Source:

connectedCallback()

Runs when an instance is added to the DOM Runs AFTER the initial attributeChangedCallback's
Source:

disconnectedCallback()

Runs when an instance is removed from the DOM
Source:

disconnectedCallback()

Runs when an instance is removed from the DOM
Source:

entry(key, val)

Dynamically change/add list entries - rebuilds the list DOM element
Parameters:
Name Type Description
key string | number Object key or array index to change/add
val string Updates/new list text (can be HTML)
Source:
Example
// Add a new entry to the list
dataList.entry('newKey', 'New list item text')
// Update an existing entry in the list
dataList.entry('existingKey', 'Updated list item text')

entry(key, val)

Dynamically change/add list entries - rebuilds the list DOM element
Parameters:
Name Type Description
key string | number Object key or array index to change/add
val string Updates/new list text (can be HTML)
Source:
Example
// Add a new entry to the list
dataList.entry('newKey', 'New list item text')
// Update an existing entry in the list
dataList.entry('existingKey', 'Updated list item text')

updateListAttributes(listEl, listType)

Updates the list attributes based on the current type and style
Parameters:
Name Type Description
listEl HTMLElement The list element to update
listType "ol" | "ul" The type of list to use, either 'ol' for ordered or 'ul' for unordered
Source:

updateListAttributes(listEl, listType)

Updates the list attributes based on the current type and style
Parameters:
Name Type Description
listEl HTMLElement The list element to update
listType "ol" | "ul" The type of list to use, either 'ol' for ordered or 'ul' for unordered
Source:

DataList()

new DataList()

NB: Attributes not available here - use connectedCallback to reference
Source:

Members

componentVersion

Component version
Source:

componentVersion

Component version
Source:

(static) observedAttributes

Makes HTML attribute change watched
Source:

(static) observedAttributes

Makes HTML attribute change watched
Source:

Methods

attributeChangedCallback(attrib, oldVal, newVal)

Runs when an observed attribute changes - Note: values are always strings NOTE: On initial startup, this is called for each watched attrib set in HTML. and BEFORE connectedCallback is called.
Parameters:
Name Type Description
attrib string Name of watched attribute that has changed
oldVal string The previous attribute value
newVal string The new attribute value
Source:

attributeChangedCallback(attrib, oldVal, newVal)

Runs when an observed attribute changes - Note: values are always strings NOTE: On initial startup, this is called for each watched attrib set in HTML. and BEFORE connectedCallback is called.
Parameters:
Name Type Description
attrib string Name of watched attribute that has changed
oldVal string The previous attribute value
newVal string The new attribute value
Source:

buildLIhtml(options) → {string}

Builds a list item HTML string based on the provided options.
Parameters:
Name Type Description
options object Object containing options for building the list item
Properties
Name Type Description
arrayType boolean True if the list is an array, false if it is an object
key string The key for the list item, used as the id and data-index
value string The value for the list item, displayed as the text
i number The index of the item in the list, used for data-index attribute
Source:
Returns:
The HTML string for the list item
Type
string

buildLIhtml(options) → {string}

Builds a list item HTML string based on the provided options.
Parameters:
Name Type Description
options object Object containing options for building the list item
Properties
Name Type Description
arrayType boolean True if the list is an array, false if it is an object
key string The key for the list item, used as the id and data-index
value string The value for the list item, displayed as the text
i number The index of the item in the list, used for data-index attribute
Source:
Returns:
The HTML string for the list item
Type
string

buildList(listData, parentEl, type, depth)

Builds a list from input data
Parameters:
Name Type Description
listData Array | object Source data for the list, can be an array or an object
parentEl HTMLElement | ShadowRoot The parent element to append the list to
type "ol" | "ul" The type of list to create, either 'ol' for ordered or 'ul' for unordered
depth number Recursion depth. Defaults to 1. Used to limit recursion depth for nested objects/arrays.
Source:

buildList(listData, parentEl, type, depth)

Builds a list from input data
Parameters:
Name Type Description
listData Array | object Source data for the list, can be an array or an object
parentEl HTMLElement | ShadowRoot The parent element to append the list to
type "ol" | "ul" The type of list to create, either 'ol' for ordered or 'ul' for unordered
depth number Recursion depth. Defaults to 1. Used to limit recursion depth for nested objects/arrays.
Source:

connectedCallback()

Runs when an instance is added to the DOM Runs AFTER the initial attributeChangedCallback's
Source:

connectedCallback()

Runs when an instance is added to the DOM Runs AFTER the initial attributeChangedCallback's
Source:

disconnectedCallback()

Runs when an instance is removed from the DOM
Source:

disconnectedCallback()

Runs when an instance is removed from the DOM
Source:

entry(key, val)

Dynamically change/add list entries - rebuilds the list DOM element
Parameters:
Name Type Description
key string | number Object key or array index to change/add
val string Updates/new list text (can be HTML)
Source:
Example
// Add a new entry to the list
dataList.entry('newKey', 'New list item text')
// Update an existing entry in the list
dataList.entry('existingKey', 'Updated list item text')

entry(key, val)

Dynamically change/add list entries - rebuilds the list DOM element
Parameters:
Name Type Description
key string | number Object key or array index to change/add
val string Updates/new list text (can be HTML)
Source:
Example
// Add a new entry to the list
dataList.entry('newKey', 'New list item text')
// Update an existing entry in the list
dataList.entry('existingKey', 'Updated list item text')

updateListAttributes(listEl, listType)

Updates the list attributes based on the current type and style
Parameters:
Name Type Description
listEl HTMLElement The list element to update
listType "ol" | "ul" The type of list to use, either 'ol' for ordered or 'ul' for unordered
Source:

updateListAttributes(listEl, listType)

Updates the list attributes based on the current type and style
Parameters:
Name Type Description
listEl HTMLElement The list element to update
listType "ol" | "ul" The type of list to use, either 'ol' for ordered or 'ul' for unordered
Source: