# Class: DataList

## DataList()

#### new DataList()

NB: Attributes not available here - use connectedCallback to reference

Source:
  - data-list.js, line 161

### Members

#### componentVersion

Component version

Source:
  - data-list.js, line 132

#### componentVersion

Component version

Source:
  - data-list.js, line 132

#### (static) observedAttributes

Makes HTML attribute change watched

Source:
  - data-list.js, line 151

#### (static) observedAttributes

Makes HTML attribute change watched

Source:
  - data-list.js, line 151

### 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:
  - data-list.js, line 204

#### 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:
  - data-list.js, line 204

#### 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:
  - data-list.js, line 383

##### 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:
  - data-list.js, line 383

##### 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:
  - data-list.js, line 314

#### 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:
  - data-list.js, line 314

#### connectedCallback()

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

Source:
  - data-list.js, line 172

#### connectedCallback()

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

Source:
  - data-list.js, line 172

#### disconnectedCallback()

Runs when an instance is removed from the DOM

Source:
  - data-list.js, line 193

#### disconnectedCallback()

Runs when an instance is removed from the DOM

Source:
  - data-list.js, line 193

#### 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:
  - data-list.js, line 303

##### 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:
  - data-list.js, line 303

##### 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:
  - data-list.js, line 227

#### 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:
  - data-list.js, line 227

## DataList()

#### new DataList()

NB: Attributes not available here - use connectedCallback to reference

Source:
  - data-list.js, line 161

### Members

#### componentVersion

Component version

Source:
  - data-list.js, line 132

#### componentVersion

Component version

Source:
  - data-list.js, line 132

#### (static) observedAttributes

Makes HTML attribute change watched

Source:
  - data-list.js, line 151

#### (static) observedAttributes

Makes HTML attribute change watched

Source:
  - data-list.js, line 151

### 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:
  - data-list.js, line 204

#### 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:
  - data-list.js, line 204

#### 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:
  - data-list.js, line 383

##### 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:
  - data-list.js, line 383

##### 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:
  - data-list.js, line 314

#### 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:
  - data-list.js, line 314

#### connectedCallback()

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

Source:
  - data-list.js, line 172

#### connectedCallback()

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

Source:
  - data-list.js, line 172

#### disconnectedCallback()

Runs when an instance is removed from the DOM

Source:
  - data-list.js, line 193

#### disconnectedCallback()

Runs when an instance is removed from the DOM

Source:
  - data-list.js, line 193

#### 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:
  - data-list.js, line 303

##### 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:
  - data-list.js, line 303

##### 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:
  - data-list.js, line 227

#### 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:
  - data-list.js, line 227