@bryntum/taskboard-angular 7.1.1 → 7.1.2

package/src/lib/bryntum-list.component.ts

@@ -0,0 +1,1196 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * Angular wrapper for Bryntum List
+ */
+
+import { Component, ElementRef, EventEmitter, Output, Input, SimpleChange, SimpleChanges, OnDestroy, OnInit } from '@angular/core';
+
+import WrapperHelper from './wrapper.helper';
+
+import { AlignSpec, Base, Collection, CollectionConfig, DomConfig, KeyMapConfig, List, ListListeners, MaskConfig, Model, ModelConfig, Rectangle, Scroller, ScrollerConfig, Store, StoreConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/taskboard';
+
+import { StringHelper } from '@bryntum/taskboard';
+
+export type BryntumListProps = {
+    // Configs
+    /**
+     * Configure as `true` to activate items on mouseover. This is used by the Combo
+     * field when using a List as its dropdown.
+     */
+    activateOnMouseover ? : boolean
+    /**
+     * Element (or element id) to adopt as this Widget's encapsulating element. The widget's
+     * content will be placed inside this element.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-adopt)
+     */
+    adopt ? : HTMLElement|string
+    /**
+     * *Only valid if this Widget is [floating](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-floating).*
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-align)
+     */
+    align ? : AlignSpec|string
+    /**
+     * When this widget is a child of a [Container](https://bryntum.com/products/taskboard/docs/api/Core/widget/Container), it will by default be participating in a
+     * flexbox layout. This config allows you to set this widget's
+     * [align-self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) style.
+     */
+    alignSelf ? : string
+    /**
+     * Configure as `true` to allow selecting groups (all the group child records will be toggled). Only
+     * applicable when the store is grouped.
+     */
+    allowGroupSelect ? : boolean
+    /**
+     * *Only valid if this Widget is [floating](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-floating) and being shown through [showBy](#Core/widget/Widget#function-showBy).*
+     * `true` to show a connector arrow pointing to the align target.
+     */
+    anchor ? : boolean
+    /**
+     * Element (or the id of an element) to append this widget's element to. Can be configured, or set once at
+     * runtime. To access the element of a rendered widget, see [element](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#property-element).
+     */
+    appendTo ? : HTMLElement|string
+    /**
+     * A localizable string (May contain `'L{}'` tokens which resolve in the locale file) to inject
+     * into an element which will be linked using the `aria-describedby` attribute.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-ariaDescription)
+     */
+    ariaDescription ? : string
+    /**
+     * A localizable string (May contain `'L{}'` tokens which resolve in the locale file) to inject as
+     * the `aria-label` attribute.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-ariaLabel)
+     */
+    ariaLabel ? : string
+    /**
+     * An object where property names with a truthy value indicate which events should bubble up the ownership
+     * hierarchy when triggered.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-bubbleEvents)
+     */
+    bubbleEvents ? : object
+    /**
+     * Set to `false` to not call onXXX method names (e.g. `onShow`, `onClick`), as an easy way to listen for events.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-callOnFunctions)
+     */
+    callOnFunctions ? : boolean
+    /**
+     * By default, if an event handler throws an exception, the error propagates up the stack and the
+     * application state is undefined. Code which follows the event handler will *not* be executed.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-catchEventHandlerExceptions)
+     */
+    catchEventHandlerExceptions ? : boolean
+    /**
+     * *Only valid if this Widget is [floating](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-floating).*
+     * Set to `true` to centre the Widget in browser viewport space.
+     */
+    centered ? : boolean
+    /**
+     * Configure as `true` to clear selection when clicking on empty space inside the List´s element.
+     */
+    clearSelectionOnEmptySpaceClick ? : boolean
+    /**
+     * Custom CSS classes to add to element.
+     * May be specified as a space separated string, or as an object in which property names
+     * with truthy values are used as the class names:
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-cls)
+     */
+    cls ? : string|object
+    /**
+     * True to add a collapse icon to toggle groups being collapsed or expanded
+     */
+    collapsibleGroups ? : boolean
+    /**
+     * Applies the specified color to the widget, by setting the `--b-primary` CSS variable in the widgets
+     * `style` block.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-color)
+     */
+    color ? : string
+    /**
+     * Programmatic control over which column to start in when used in a grid layout.
+     */
+    column ? : number
+    config ? : object
+    /**
+     * *Only valid if this Widget is [floating](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-floating) or [positioned](#Core/widget/Widget#config-positioned).*
+     * Element, Widget or Rectangle to which this Widget is constrained.
+     */
+    constrainTo ? : HTMLElement|Widget|Rectangle
+    /**
+     * The HTML content that coexists with sibling elements which may have been added to the
+     * [contentElement](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#property-contentElement) by plugins and features.
+     * When specifying html, this widget's element will also have the [htmlCls](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-htmlCls)
+     * class added to its classList, to allow targeted styling.
+     */
+    content ? : string
+    /**
+     * Custom CSS classes to add to the [contentElement](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#property-contentElement).
+     * May be specified as a space separated string, or as an object in which property names
+     * with truthy values are used as the class names:
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-contentElementCls)
+     */
+    contentElementCls ? : string|object
+    /**
+     * When this Widget configuration is used in the Grid's RowExpander feature's `widget` config, provide the
+     * field on the expanded record to use for populating this widget's store (if applicable)
+     */
+    dataField ? : string
+    /**
+     * Object to apply to elements dataset (each key will be used as a data-attribute on the element)
+     */
+    dataset ? : Record<string, string>
+    /**
+     * The name of the property to set when a single value is to be applied to this Widget. Such as when used
+     * in a grid WidgetColumn, this is the property to which the column's `field` is applied.
+     */
+    defaultBindProperty ? : string
+    /**
+     * Check for CSS compatibility issues when upgrading to v7. Performs the following checks:
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-detectCSSCompatibilityIssues)
+     */
+    detectCSSCompatibilityIssues ? : boolean
+    /**
+     * Disable or enable the widget. It is similar to [readOnly](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-readOnly) except a disabled widget
+     * cannot be focused, uses a different rendition (usually greyish) and does not allow selecting its value.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-disabled)
+     */
+    disabled ? : boolean|'inert'
+    /**
+     * The model field to render into each list item
+     */
+    displayField ? : string
+    /**
+     * Controls the placement of this widget when it is added to a [panel's ](https://bryntum.com/products/taskboard/docs/api/Core/widget/Panel)
+     * [strips collection](https://bryntum.com/products/taskboard/docs/api/Core/widget/Panel#config-strips). Typical values for this config are `'top'`,
+     * `'bottom'`, `'left'`, or `'right'`, which cause the widget to be placed on that side of the panel's
+     * body. Such widgets are called "edge strips".
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-dock)
+     */
+    dock ? : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object
+    /**
+     * *Only valid if this Widget is [floating](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-floating).*
+     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a ´handleSelector´
+     * property which controls when a drag should start.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-draggable)
+     */
+    draggable ? : boolean|{
+        handleSelector?: string
+    }
+    /**
+     * An object specifying attributes to assign to the root element of this widget.
+     * Set `null` value to attribute to remove it.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-elementAttributes)
+     */
+    elementAttributes ? : Record<string, string|null>
+    /**
+     * The text to show when the list is empty. If not set, the list will be empty.
+     */
+    emptyText ? : string
+    extraData ? : any
+    /**
+     * When this widget is a child of a [Container](https://bryntum.com/products/taskboard/docs/api/Core/widget/Container), it will by default be participating in a
+     * flexbox layout. This config allows you to set this widget's
+     * [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) style.
+     * This may be configured as a single number or a `&lt;flex-grow&gt; &lt;flex-shrink&gt; &lt;flex-basis&gt;` format string.
+     * numeric-only values are interpreted as the `flex-grow` value.
+     */
+    flex ? : number|string
+    /**
+     * Set to `true` to move the widget out of the document flow and position it
+     * absolutely in browser viewport space.
+     */
+    floating ? : boolean
+    /**
+     * Configure this as a function or the name of a function, which when passed a record in the
+     * list, returns a CSS class name string to apply to its list item.
+     * @param {Core.data.Model} record The record
+     * @returns {string}
+     */
+    getItemCls ? : ((record: Model) => string)|string
+    /**
+     * Configure this as a function or the name of a function, which when passed a record in the
+     * list, returns a style string to apply to its list item.
+     * @param {Core.data.Model} record The record
+     * @returns {string}
+     */
+    getItemStyle ? : ((record: Model) => string)|string
+    /**
+     * Template function which is passed a group record and the uppercased group field name. The text returned
+     * will be rendered as the group header.
+     * @param {Core.data.Model} record The record
+     * @param {string} groupName The current group name
+     * @returns {string}
+     */
+    groupHeaderTpl ? : (record: Model, groupName: string) => string
+    /**
+     * Widget's height, used to set element `style.height`. Either specify a valid height string or a number,
+     * which will get 'px' appended. We recommend using CSS as the primary way to control height, but in some
+     * cases this config is convenient.
+     */
+    height ? : string|number
+    /**
+     * Configure with true to make widget initially hidden.
+     */
+    hidden ? : boolean
+    /**
+     * *Only valid if this Widget is [floating](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-floating).*
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-hideAnimation)
+     */
+    hideAnimation ? : boolean|object
+    /**
+     * The HTML to display initially or a function returning the markup (called at widget construction time).
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-html)
+     * @param {Core.widget.Widget} widget The calling Widget
+     * @returns {string}
+     */
+    html ? : string|((widget: Widget) => string)|DomConfig|DomConfig[]|VueConfig
+    /**
+     * The CSS class(es) to add when HTML content is being applied to this widget.
+     */
+    htmlCls ? : string|object
+    /**
+     * Widget id, if not specified one will be generated. Also used for lookups through Widget.getById
+     */
+    id ? : string
+    /**
+     * Determines if the widgets read-only state should be controlled by its parent.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-ignoreParentReadOnly)
+     */
+    ignoreParentReadOnly ? : boolean
+    /**
+     * Element (or element id) to insert this widget before. If provided, [appendTo](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-appendTo) config is ignored.
+     */
+    insertBefore ? : HTMLElement|string
+    /**
+     * Element (or element id) to append this widget element to, as a first child. If provided, [appendTo](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-appendTo) config is ignored.
+     */
+    insertFirst ? : HTMLElement|string
+    /**
+     * A function, or the name of a function in the ownership hierarchy which is used to determine
+     * whether a record is selectable. By default, all records are selectable except group header
+     * records in a grouped store.
+     * @returns {boolean} `true` if the record is selectable
+     */
+    isSelectable ? : (() => boolean)|string
+    /**
+     * An array of Objects which are converted into records and used to create this
+     * List's [store](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-store)
+     */
+    items ? : object[]
+    /**
+     * Template function (or name of a template function), which, when passed a record, returns the textual HTML for
+     * that item. Defaults to a function returning the value of the record´s [displayField](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-displayField)
+     * @param {Core.data.Model} record The record
+     * @returns {string}
+     */
+    itemTpl ? : ((record: Model) => string)|string
+    /**
+     * An object whose keys are the [key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) name
+     * and optional modifier prefixes: `'Ctrl+'`, `'Alt+'`, `'Meta+'`, and `'Shift+'` (case-insensitive). The values
+     * are the name of the instance method to call when the keystroke is received.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-keyMap)
+     */
+    keyMap ? : Record<string, KeyMapConfig>
+    /**
+     * The listener set for this object.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-listeners)
+     */
+    listeners ? : ListListeners
+    /**
+     * A class translations of which are used for translating this entity.
+     * This is often used when translations of an item are defined on its container class.
+     * For example:
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-localeClass)
+     */
+    localeClass ? : typeof Base
+    /**
+     * Set to `false` to disable localization of this object.
+     */
+    localizable ? : boolean
+    /**
+     * List of properties which values should be translated automatically upon a locale applying.
+     * In case there is a need to localize not typical value (not a String value or a field with re-defined setter/getter),
+     * you could use 'localeKey' meta configuration.
+     * Example:
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-localizableProperties)
+     */
+    localizableProperties ? : string[]
+    /**
+     * Widget's margin. This may be configured as a single number or a `TRBL` format string.
+     * numeric-only values are interpreted as pixels.
+     */
+    margin ? : number|string
+    /**
+     * This config object contains the defaults for the [Mask](https://bryntum.com/products/taskboard/docs/api/Core/widget/Mask) created for the
+     * [masked](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-masked) config. Any properties specified in the `masked` config will override these
+     * values.
+     */
+    maskDefaults ? : MaskConfig
+    /**
+     * Set to `true` to apply the default mask to the widget. Alternatively, this can be the mask message or a
+     * [Mask](https://bryntum.com/products/taskboard/docs/api/Core/widget/Mask) config object.
+     */
+    masked ? : boolean|string|MaskConfig
+    /**
+     * The element's maxHeight. Can be either a String or a Number (which will have 'px' appended). Note that
+     * like [height](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-height), *reading* the value will return the numeric value in pixels.
+     */
+    maxHeight ? : string|number
+    /**
+     * *Only valid if this Widget is [floating](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-floating).*
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-maximizeOnMobile)
+     */
+    maximizeOnMobile ? : number|string
+    /**
+     * The elements maxWidth. Can be either a String or a Number (which will have 'px' appended). Note that
+     * like [width](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-width), *reading* the value will return the numeric value in pixels.
+     */
+    maxWidth ? : string|number
+    /**
+     * The element's minHeight. Can be either a String or a Number (which will have 'px' appended). Note that
+     * like [height](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-height), *reading* the value will return the numeric value in pixels.
+     */
+    minHeight ? : string|number
+    /**
+     * The elements minWidth. Can be either a String or a Number (which will have 'px' appended). Note that
+     * like [width](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-width), *reading* the value will return the numeric value in pixels.
+     */
+    minWidth ? : string|number
+    /**
+     * When this is configured as `true` a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+     * is used to monitor this element for size changes caused by either style manipulation, or by CSS
+     * layout.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-monitorResize)
+     */
+    monitorResize ? : boolean|{
+        immediate?: boolean
+    }
+    /**
+     * Configure as `true` to allow multi select and add checkboxes to the items
+     */
+    multiSelect ? : boolean
+    /**
+     * The owning Widget of this Widget. If this Widget is directly contained (that is, it is one of the
+     * [items](https://bryntum.com/products/taskboard/docs/api/Core/widget/Container#property-items) of a Container), this config will be ignored. In this case
+     * the owner is <strong>always</strong> the encapsulating Container.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-owner)
+     */
+    owner ? : Widget|any
+    /**
+     * Set to `true` when a widget is rendered into another widget's [contentElement](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#property-contentElement), but must
+     * not participate in the standard layout of that widget, and must be positioned relatively to that
+     * widget's [contentElement](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#property-contentElement).
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-positioned)
+     */
+    positioned ? : boolean
+    /**
+     * Prevent tooltip from being displayed on touch devices. Useful for example for buttons that display a
+     * menu on click etc, since the tooltip would be displayed at the same time.
+     */
+    preventTooltipOnTouch ? : boolean
+    /**
+     * Whether this widget is read-only.  This is only valid if the widget is an input
+     * field, <strong>or contains input fields at any depth</strong>.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-readOnly)
+     */
+    readOnly ? : boolean
+    relayStoreEvents ? : boolean
+    /**
+     * Configure as `true` to have the component display a translucent ripple when its
+     * [focusElement](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#property-focusElement), or [element](#Core/widget/Widget#property-element) is tapped <em>if the
+     * current theme supports ripples</em>. Out of the box, only the Material theme supports ripples.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-ripple)
+     */
+    ripple ? : boolean|{
+        delegate?: string
+        color?: string
+        radius?: number
+        clip?: string
+    }
+    /**
+     * If you are rendering this widget to a shadow root inside a web component, set this config to the shadowRoot. If not inside a web component, set it to `document.body`
+     */
+    rootElement ? : ShadowRoot|HTMLElement
+    /**
+     * This may be configured as `true` to make the widget's element use the `direction:rtl` style.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-rtl)
+     */
+    rtl ? : boolean
+    /**
+     * Specifies whether (and optionally in which axes) a Widget may scroll. `true` means this widget may scroll
+     * in both axes. May be an object containing boolean `overflowX` and `overflowY` properties which are
+     * applied to CSS style properties `overflowX` and `overflowY`. If they are boolean, they are translated to
+     * CSS overflow properties thus:
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-scrollable)
+     */
+    scrollable ? : boolean|ScrollerConfig|Scroller
+    /**
+     * Defines what to do if document is scrolled while Widget is visible (only relevant when floating is set to `true`).
+     * Valid values: ´null´: do nothing, ´hide´: hide the widget or ´realign´: realign to the target if possible.
+     */
+    scrollAction ? : 'hide'|'realign'|null
+    /**
+     * Set to `true` to add a "Select all" item to the list to select/unselect all items at once.
+     * Only applies when [multiSelect](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-multiSelect) mode is enabled.
+     */
+    selectAllItem ? : boolean|string
+    /**
+     * A [Collection](https://bryntum.com/products/taskboard/docs/api/Core/util/Collection), or Collection config object to use to contain this List's selected
+     * records.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-selected)
+     */
+    selected ? : object[]|number[]|string[]|Collection|CollectionConfig|CollectionConfig[]
+    /**
+     * *Only valid if this Widget is [floating](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-floating).*
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-showAnimation)
+     */
+    showAnimation ? : boolean|object
+    /**
+     * Set to `false` to not show the tooltip when this widget is [disabled](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#property-disabled)
+     */
+    showTooltipWhenDisabled ? : boolean
+    /**
+     * Programmatic control over how many columns to span when used in a grid layout.
+     */
+    span ? : number
+    /**
+     * A [Store](https://bryntum.com/products/taskboard/docs/api/Core/data/Store) which provides the records which map to List items. Each record is passed through the
+     * [itemTpl](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-itemTpl) to produce the DOM structure of the List. May be generated from an array of [items](#Core/widget/List#config-items).
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-store)
+     */
+    store ? : object|object[]|StoreConfig|Store|StoreConfig[]
+    /**
+     * A configuration for the [tab](https://bryntum.com/products/taskboard/docs/api/Core/widget/Tab) created for this widget when it is placed in a
+     * [TabPanel](https://bryntum.com/products/taskboard/docs/api/Core/widget/TabPanel). For example, this config can be used to control the icon of the `tab` for
+     * this widget:
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-tab)
+     */
+    tab ? : boolean|TabConfig
+    /**
+     * The tag name of this Widget's root element
+     */
+    tag ? : string
+    /**
+     * Text alignment: 'left', 'center' or 'right'. Also accepts direction neutral 'start' and 'end'.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-textAlign)
+     */
+    textAlign ? : 'left'|'center'|'right'|'start'|'end'
+    /**
+     * The title to show at the top of the list.
+     */
+    title ? : string
+    /**
+     * Select/deselect all if `CMD`/`CTRL` is pressed when clicking
+     */
+    toggleAllIfCtrlPressed ? : boolean
+    /**
+     * Tooltip for the widget, either as a string or as a Tooltip config object.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-tooltip)
+     */
+    tooltip ? : string|TooltipConfig|null
+    /**
+     * Template function to provide a tooltip (textual, will be automatically HTML-encoded) shown when hovering an item.
+     * @param {Core.data.Model} record The record representing the item
+     * @returns {string}
+     */
+    tooltipTemplate ? : (record: Model) => string
+    type ? : 'list'
+    /**
+     * Custom CSS class name suffixes to apply to the elements rendered by this widget. This may be specified
+     * as a space separated string, an array of strings, or as an object in which property names with truthy
+     * values are used as the class names.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-ui)
+     */
+    ui ? : string|object
+    /**
+     * Controls virtualization of list items using the `IntersectionObserver` API to render items only when
+     * scrolled into view. This is only useful for lists with complex markup, for simple lists it likely adds
+     * overhead.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-virtualize)
+     */
+    virtualize ? : boolean|number
+    /**
+     * A widgets weight determines its position among siblings when added to a [Container](https://bryntum.com/products/taskboard/docs/api/Core/widget/Container).
+     * Higher weights go further down.
+     */
+    weight ? : number
+    /**
+     * Widget's width, used to set element `style.width`. Either specify a valid width string or a number, which
+     * will get 'px' appended. We recommend using CSS as the primary way to control width, but in some cases
+     * this config is convenient.
+     */
+    width ? : string|number
+    /**
+     * The x position for the widget.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-x)
+     */
+    x ? : number
+    /**
+     * The y position for the widget.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#config-y)
+     */
+    y ? : number
+
+}
+
+@Component({
+    selector : 'bryntum-list',
+    template : ''
+})
+export class BryntumListComponent implements OnInit, OnDestroy {
+
+    public static instanceClass = List;
+
+    public static instanceName = 'List';
+
+    private static bryntumEvents: string[] = [
+        'onBeforeDestroy',
+        'onBeforeHide',
+        'onBeforeItem',
+        'onBeforeShow',
+        'onCatchAll',
+        'onDestroy',
+        'onElementCreated',
+        'onFocusIn',
+        'onFocusOut',
+        'onHide',
+        'onItem',
+        'onPaint',
+        'onReadOnly',
+        'onRecompose',
+        'onResize',
+        'onSelectionChange',
+        'onShow',
+        'onToggleGroup',
+        'onToggleNode'
+    ];
+
+    private static bryntumFeatureNames: string[] = [
+
+    ];
+
+    private static bryntumConfigs: string[] = BryntumListComponent.bryntumFeatureNames.concat([
+        'activateOnMouseover',
+        'adopt',
+        'align',
+        'alignSelf',
+        'allowGroupSelect',
+        'anchor',
+        'appendTo',
+        'ariaDescription',
+        'ariaLabel',
+        'bubbleEvents',
+        'callOnFunctions',
+        'catchEventHandlerExceptions',
+        'centered',
+        'clearSelectionOnEmptySpaceClick',
+        'cls',
+        'collapsibleGroups',
+        'color',
+        'column',
+        'config',
+        'constrainTo',
+        'content',
+        'contentElementCls',
+        'dataField',
+        'dataset',
+        'defaultBindProperty',
+        'detectCSSCompatibilityIssues',
+        'disabled',
+        'displayField',
+        'dock',
+        'draggable',
+        'elementAttributes',
+        'emptyText',
+        'extraData',
+        'flex',
+        'floating',
+        'getItemCls',
+        'getItemStyle',
+        'groupHeaderTpl',
+        'height',
+        'hidden',
+        'hideAnimation',
+        'html',
+        'htmlCls',
+        'id',
+        'ignoreParentReadOnly',
+        'insertBefore',
+        'insertFirst',
+        'isSelectable',
+        'items',
+        'itemTpl',
+        'keyMap',
+        'listeners',
+        'localeClass',
+        'localizable',
+        'localizableProperties',
+        'margin',
+        'maskDefaults',
+        'masked',
+        'maxHeight',
+        'maximizeOnMobile',
+        'maxWidth',
+        'minHeight',
+        'minWidth',
+        'monitorResize',
+        'multiSelect',
+        'owner',
+        'positioned',
+        'preventTooltipOnTouch',
+        'readOnly',
+        'relayStoreEvents',
+        'ripple',
+        'rootElement',
+        'rtl',
+        'scrollable',
+        'scrollAction',
+        'selectAllItem',
+        'selected',
+        'showAnimation',
+        'showTooltipWhenDisabled',
+        'span',
+        'store',
+        'tab',
+        'tag',
+        'textAlign',
+        'title',
+        'toggleAllIfCtrlPressed',
+        'tooltip',
+        'tooltipTemplate',
+        'type',
+        'ui',
+        'virtualize',
+        'weight',
+        'width',
+        'x',
+        'y'
+    ]);
+
+    private static bryntumConfigsOnly: string[] = [
+        'activateOnMouseover',
+        'adopt',
+        'align',
+        'allowGroupSelect',
+        'anchor',
+        'ariaDescription',
+        'ariaLabel',
+        'bubbleEvents',
+        'centered',
+        'clearSelectionOnEmptySpaceClick',
+        'color',
+        'config',
+        'constrainTo',
+        'contentElementCls',
+        'dataField',
+        'defaultBindProperty',
+        'detectCSSCompatibilityIssues',
+        'displayField',
+        'dock',
+        'draggable',
+        'elementAttributes',
+        'floating',
+        'getItemCls',
+        'getItemStyle',
+        'groupHeaderTpl',
+        'hideAnimation',
+        'htmlCls',
+        'ignoreParentReadOnly',
+        'isSelectable',
+        'itemTpl',
+        'listeners',
+        'localeClass',
+        'localizable',
+        'localizableProperties',
+        'maskDefaults',
+        'masked',
+        'monitorResize',
+        'owner',
+        'positioned',
+        'preventTooltipOnTouch',
+        'relayStoreEvents',
+        'ripple',
+        'rootElement',
+        'scrollAction',
+        'selectAllItem',
+        'showAnimation',
+        'showTooltipWhenDisabled',
+        'tab',
+        'tag',
+        'textAlign',
+        'tooltipTemplate',
+        'type',
+        'ui',
+        'virtualize',
+        'weight'
+    ];
+
+    private static bryntumProps: string[] = BryntumListComponent.bryntumFeatureNames.concat([
+        'alignSelf',
+        'anchorSize',
+        'appendTo',
+        'callOnFunctions',
+        'catchEventHandlerExceptions',
+        'cls',
+        'collapsibleGroups',
+        'column',
+        'content',
+        'dataset',
+        'disabled',
+        'emptyText',
+        'extraData',
+        'flex',
+        'focusVisible',
+        'height',
+        'hidden',
+        'html',
+        'id',
+        'insertBefore',
+        'insertFirst',
+        'items',
+        'keyMap',
+        'margin',
+        'maxHeight',
+        'maximizeOnMobile',
+        'maxWidth',
+        'minHeight',
+        'minWidth',
+        'multiSelect',
+        'parent',
+        'readOnly',
+        'rtl',
+        'scrollable',
+        'selected',
+        'span',
+        'store',
+        'title',
+        'toggleAllIfCtrlPressed',
+        'tooltip',
+        'width',
+        'x',
+        'y'
+    ]);
+
+    private elementRef: ElementRef;
+    public instance!: List;
+
+    private bryntumConfig = {
+        adopt            : undefined,
+        appendTo         : undefined,
+        href             : undefined,
+        angularComponent : this,
+        features         : {},
+        listeners        : {}
+    };
+
+    constructor(element: ElementRef) {
+        this.elementRef = element;
+    }
+
+    // Configs only
+    @Input() activateOnMouseover             ! : boolean;
+    @Input() adopt                           ! : HTMLElement|string;
+    @Input() align                           ! : AlignSpec|string;
+    @Input() allowGroupSelect                ! : boolean;
+    @Input() anchor                          ! : boolean;
+    @Input() ariaDescription                 ! : string;
+    @Input() ariaLabel                       ! : string;
+    @Input() bubbleEvents                    ! : object;
+    @Input() centered                        ! : boolean;
+    @Input() clearSelectionOnEmptySpaceClick ! : boolean;
+    @Input() color                           ! : string;
+    @Input() config                          ! : object;
+    @Input() constrainTo                     ! : HTMLElement|Widget|Rectangle;
+    @Input() contentElementCls               ! : string|object;
+    @Input() dataField                       ! : string;
+    @Input() defaultBindProperty             ! : string;
+    @Input() detectCSSCompatibilityIssues    ! : boolean;
+    @Input() displayField                    ! : string;
+    @Input() dock                            ! : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object;
+    @Input() draggable                       ! : boolean|{
+        handleSelector?: string
+    };
+    @Input() elementAttributes               ! : Record<string, string|null>;
+    @Input() floating                        ! : boolean;
+    @Input() getItemCls                      ! : ((record: Model) => string)|string;
+    @Input() getItemStyle                    ! : ((record: Model) => string)|string;
+    @Input() groupHeaderTpl                  ! : (record: Model, groupName: string) => string;
+    @Input() hideAnimation                   ! : boolean|object;
+    @Input() htmlCls                         ! : string|object;
+    @Input() ignoreParentReadOnly            ! : boolean;
+    @Input() isSelectable                    ! : (() => boolean)|string;
+    @Input() itemTpl                         ! : ((record: Model) => string)|string;
+    @Input() listeners                       ! : ListListeners;
+    @Input() localeClass                     ! : typeof Base;
+    @Input() localizable                     ! : boolean;
+    @Input() localizableProperties           ! : string[];
+    @Input() maskDefaults                    ! : MaskConfig;
+    @Input() masked                          ! : boolean|string|MaskConfig;
+    @Input() monitorResize                   ! : boolean|{
+        immediate?: boolean
+    };
+    @Input() owner                           ! : Widget|any;
+    @Input() positioned                      ! : boolean;
+    @Input() preventTooltipOnTouch           ! : boolean;
+    @Input() relayStoreEvents                ! : boolean;
+    @Input() ripple                          ! : boolean|{
+        delegate?: string
+        color?: string
+        radius?: number
+        clip?: string
+    };
+    @Input() rootElement                     ! : ShadowRoot|HTMLElement;
+    @Input() scrollAction                    ! : 'hide'|'realign'|null;
+    @Input() selectAllItem                   ! : boolean|string;
+    @Input() showAnimation                   ! : boolean|object;
+    @Input() showTooltipWhenDisabled         ! : boolean;
+    @Input() tab                             ! : boolean|TabConfig;
+    @Input() tag                             ! : string;
+    @Input() textAlign                       ! : 'left'|'center'|'right'|'start'|'end';
+    @Input() tooltipTemplate                 ! : (record: Model) => string;
+    @Input() type                            ! : 'list';
+    @Input() ui                              ! : string|object;
+    @Input() virtualize                      ! : boolean|number;
+    @Input() weight                          ! : number;
+
+    // Configs and properties
+    @Input() alignSelf                   ! : string;
+    @Input() appendTo                    ! : HTMLElement|string;
+    @Input() callOnFunctions             ! : boolean;
+    @Input() catchEventHandlerExceptions ! : boolean;
+    @Input() cls                         ! : string|object;
+    @Input() collapsibleGroups           ! : boolean;
+    @Input() column                      ! : number;
+    @Input() content                     ! : string;
+    @Input() dataset                     ! : object|Record<string, string>;
+    @Input() disabled                    ! : boolean|'inert';
+    @Input() emptyText                   ! : string;
+    @Input() extraData                   ! : any;
+    @Input() flex                        ! : number|string;
+    @Input() height                      ! : number|string;
+    @Input() hidden                      ! : boolean;
+    @Input() html                        ! : string|((widget: Widget) => string)|DomConfig|DomConfig[]|VueConfig;
+    @Input() id                          ! : string;
+    @Input() insertBefore                ! : HTMLElement|string;
+    @Input() insertFirst                 ! : HTMLElement|string;
+    @Input() items                       ! : object[];
+    @Input() keyMap                      ! : Record<string, KeyMapConfig>;
+    @Input() margin                      ! : number|string;
+    @Input() maxHeight                   ! : string|number;
+    @Input() maximizeOnMobile            ! : number|string;
+    @Input() maxWidth                    ! : string|number;
+    @Input() minHeight                   ! : string|number;
+    @Input() minWidth                    ! : string|number;
+    @Input() multiSelect                 ! : boolean;
+    @Input() readOnly                    ! : boolean;
+    @Input() rtl                         ! : boolean;
+    @Input() scrollable                  ! : Scroller|boolean|ScrollerConfig;
+    @Input() selected                    ! : Model|Model[]|string|string[]|number|number[]|Collection|object[]|CollectionConfig|ModelConfig[]|CollectionConfig[];
+    @Input() span                        ! : number;
+    @Input() store                       ! : object|object[]|StoreConfig|Store|StoreConfig[];
+    @Input() title                       ! : string;
+    @Input() toggleAllIfCtrlPressed      ! : boolean;
+    @Input() tooltip                     ! : string|TooltipConfig|null;
+    @Input() width                       ! : number|string;
+    @Input() x                           ! : number;
+    @Input() y                           ! : number;
+
+    // Properties only
+    @Input() anchorSize   ! : number[];
+    @Input() focusVisible ! : boolean;
+    @Input() parent       ! : Widget;
+
+    // Events emitters
+    /**
+     * Fires before an object is destroyed.
+     * @param {object} event Event object
+     * @param {Core.Base} event.source The Object that is being destroyed.
+     */
+    @Output() onBeforeDestroy: any = new EventEmitter<((event: { source: Base }) => void)|string>();
+    /**
+     * Triggered before a widget is hidden. Return `false` to prevent the action.
+     * @param {object} event Event object
+     * @param {Core.widget.Widget} event.source The widget being hidden.
+     */
+    @Output() onBeforeHide: any = new EventEmitter<((event: { source: Widget }) => Promise<boolean>|boolean|void)|string>();
+    /**
+     * User going to activate an item in the list either by pointer or keyboard.
+     * The active record, list item index, and the triggering event are passed.
+     * It is preventable by returning `false`
+     * @param {object} event Event object
+     * @param {Core.widget.List} event.source The List instance
+     * @param {HTMLElement} event.item The clicked list element
+     * @param {Core.data.Model} event.record Activated record
+     * @param {number} event.index List item index
+     * @param {Event} event.event Triggering event
+     */
+    @Output() onBeforeItem: any = new EventEmitter<((event: { source: List, item: HTMLElement, record: Model, index: number, event: Event }) => Promise<boolean>|boolean|void)|string>();
+    /**
+     * Triggered before a widget is shown. Return `false` to prevent the action.
+     * @param {object} event Event object
+     * @param {Core.widget.Widget,any} event.source The widget being shown
+     */
+    @Output() onBeforeShow: any = new EventEmitter<((event: { source: Widget|any }) => Promise<boolean>|boolean|void)|string>();
+    /**
+     * Fires when any other event is fired from the object.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#event-catchAll)
+     * @param {object} event Event object
+     * @param {{[key: string]: any, type: string}} event.event The Object that contains event details
+     * @param {string} event.event.type The type of the event which is caught by the listener
+     */
+    @Output() onCatchAll: any = new EventEmitter<((event: {[key: string]: any, type: string}) => void)|string>();
+    /**
+     * Fires when an object is destroyed.
+     * @param {object} event Event object
+     * @param {Core.Base} event.source The Object that is being destroyed.
+     */
+    @Output() onDestroy: any = new EventEmitter<((event: { source: Base }) => void)|string>();
+    /**
+     * Triggered when a widget's [element](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#property-element) is available.
+     * @param {object} event Event object
+     * @param {HTMLElement} event.element The Widget's element.
+     */
+    @Output() onElementCreated: any = new EventEmitter<((event: { element: HTMLElement }) => void)|string>();
+    /**
+     * Fired when focus enters this Widget.
+     * @param {object} event Event object
+     * @param {Core.widget.Widget} event.source This Widget
+     * @param {HTMLElement} event.fromElement The element which lost focus.
+     * @param {HTMLElement} event.toElement The element which gained focus.
+     * @param {Core.widget.Widget} event.fromWidget The widget which lost focus.
+     * @param {Core.widget.Widget} event.toWidget The widget which gained focus.
+     * @param {boolean} event.backwards `true` if the `toElement` is before the `fromElement` in document order.
+     */
+    @Output() onFocusIn: any = new EventEmitter<((event: { source: Widget, fromElement: HTMLElement, toElement: HTMLElement, fromWidget: Widget, toWidget: Widget, backwards: boolean }) => void)|string>();
+    /**
+     * Fired when focus exits this Widget's ownership tree. This is different from a `blur` event.
+     * focus moving from within this Widget's ownership tree, even if there are floating widgets
+     * will not trigger this event. This is when focus exits this widget completely.
+     * @param {object} event Event object
+     * @param {Core.widget.Widget} event.source This Widget
+     * @param {HTMLElement} event.fromElement The element which lost focus.
+     * @param {HTMLElement} event.toElement The element which gained focus.
+     * @param {Core.widget.Widget} event.fromWidget The widget which lost focus.
+     * @param {Core.widget.Widget} event.toWidget The widget which gained focus.
+     * @param {boolean} event.backwards `true` if the `toElement` is before the `fromElement` in document order.
+     */
+    @Output() onFocusOut: any = new EventEmitter<((event: { source: Widget, fromElement: HTMLElement, toElement: HTMLElement, fromWidget: Widget, toWidget: Widget, backwards: boolean }) => void)|string>();
+    /**
+     * Triggered after a widget was hidden
+     * @param {object} event Event object
+     * @param {Core.widget.Widget} event.source The widget
+     */
+    @Output() onHide: any = new EventEmitter<((event: { source: Widget }) => void)|string>();
+    /**
+     * User activated an item in the list either by pointer or keyboard.
+     * The active record, list item index, and the triggering event are passed.
+     * @param {object} event Event object
+     * @param {Core.widget.List} event.source The List instance
+     * @param {HTMLElement} event.item The clicked list element
+     * @param {Core.data.Model} event.record Activated record
+     * @param {number} event.index List item index
+     * @param {Event} event.event Triggering event
+     */
+    @Output() onItem: any = new EventEmitter<((event: { source: List, item: HTMLElement, record: Model, index: number, event: Event }) => void)|string>();
+    /**
+     * Triggered when a widget which had been in a non-visible state for any reason
+     * achieves visibility.
+     * ...
+     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/List#event-paint)
+     * @param {object} event Event object
+     * @param {Core.widget.Widget} event.source The widget being painted.
+     * @param {boolean} event.firstPaint `true` if this is the first paint.
+     */
+    @Output() onPaint: any = new EventEmitter<((event: { source: Widget, firstPaint: boolean }) => void)|string>();
+    /**
+     * Fired when a Widget's read only state is toggled
+     * @param {object} event Event object
+     * @param {boolean} event.readOnly Read only or not
+     */
+    @Output() onReadOnly: any = new EventEmitter<((event: { readOnly: boolean }) => void)|string>();
+    /**
+     * This event is fired after a widget's elements have been synchronized due to a direct or indirect call
+     * to [recompose](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#function-recompose), if this results in some change to the widget's rendered DOM elements.
+     */
+    @Output() onRecompose: any = new EventEmitter<(() => void)|string>();
+    /**
+     * Fired when the encapsulating element of a Widget resizes *only when [monitorResize](https://bryntum.com/products/taskboard/docs/api/Core/widget/Widget#config-monitorResize) is `true`*.
+     * @param {object} event Event object
+     * @param {Core.widget.Widget} event.source This Widget
+     * @param {number} event.width The new width
+     * @param {number} event.height The new height
+     * @param {number} event.oldWidth The old width
+     * @param {number} event.oldHeight The old height
+     */
+    @Output() onResize: any = new EventEmitter<((event: { source: Widget, width: number, height: number, oldWidth: number, oldHeight: number }) => void)|string>();
+    /**
+     * Fired when selection changes
+     * @param {object} event Event object
+     * @param {Core.widget.List} event.source The List instance
+     * @param {Core.data.Model[]} event.selected An array of the currently selected records
+     */
+    @Output() onSelectionChange: any = new EventEmitter<((event: { source: List, selected: Model[] }) => void)|string>();
+    /**
+     * Triggered after a widget is shown.
+     * @param {object} event Event object
+     * @param {Core.widget.Widget} event.source The widget
+     */
+    @Output() onShow: any = new EventEmitter<((event: { source: Widget }) => void)|string>();
+    /**
+     * Group item expanded or collapsed
+     * @param {object} event Event object
+     * @param {Core.data.Model} event.groupRecord Group record
+     * @param {boolean} event.collapse Collapsed (true) or expanded (false)
+     */
+    @Output() onToggleGroup: any = new EventEmitter<((event: { groupRecord: Model, collapse: boolean }) => void)|string>();
+    /**
+     * Tree parent node expanded or collapsed
+     * @param {object} event Event object
+     * @param {Core.data.Model} event.record The parent record which has been toggled
+     * @param {boolean} event.collapse Collapsed (true) or expanded (false)
+     */
+    @Output() onToggleNode: any = new EventEmitter<((event: { record: Model, collapse: boolean }) => void)|string>();
+
+    /**
+     * Create and append the underlying widget
+     */
+    ngOnInit(): void {
+        const
+            me = this,
+            {
+                elementRef,
+                bryntumConfig
+            } = me,
+            {
+                instanceClass,
+                instanceName,
+                bryntumConfigs,
+                bryntumEvents
+            } = BryntumListComponent;
+
+        bryntumConfigs.filter(prop => prop in this).forEach(prop => {
+            // @ts-ignore
+            WrapperHelper.applyPropValue(bryntumConfig, prop, this[prop]);
+            if (['features', 'config'].includes(prop)) {
+                WrapperHelper.devWarningConfigProp(instanceName, prop);
+            }
+        });
+        // @ts-ignore
+        bryntumEvents.filter(event => this[event] && this[event].observers.length > 0).forEach(event => {
+            const
+                uncapitalize = (str: string) => str.charAt(0).toLowerCase() + str.slice(1),
+                eventName = (str: string) => uncapitalize(str.slice(2));
+
+            // @ts-ignore
+            bryntumConfig.listeners[eventName(event)] = e => {
+                // @ts-ignore
+                me[event].emit(e);
+                // EventEmitter does not return values in the normal way, work around it by setting `returnValue` flag
+                // in Angular listeners
+                return e.returnValue;
+            };
+        });
+
+        // If component has no container specified in config then use adopt to Wrapper's element
+        const
+            containerParam = [
+                'adopt',
+                'appendTo',
+                'insertAfter',
+                'insertBefore'
+                // @ts-ignore
+            ].find(prop => bryntumConfig[prop]);
+        if (!containerParam) {
+            if (instanceName === 'Button' || elementRef.nativeElement.getRootNode() instanceof ShadowRoot) {
+                // Button should always be <a> or <button> inside owner element
+                bryntumConfig.appendTo = elementRef.nativeElement;
+            }
+            else {
+                bryntumConfig.adopt = elementRef.nativeElement;
+            }
+        }
+        else {
+            WrapperHelper.devWarningContainer(instanceName, containerParam);
+        }
+
+        // @ts-ignore
+        me.instance = instanceName === 'Widget' ? Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
+
+    }
+
+    /**
+     * Watch for changes
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void {
+        const
+            { instance } = this,
+            { instanceName } = BryntumListComponent;
+        if (!instance) {
+            return;
+        }
+        // Iterate over all changes
+        Object.entries(changes).forEach(([prop, change]) => {
+            const
+                newValue = (change as SimpleChange).currentValue,
+                { instance } = this,
+                { bryntumConfigsOnly, bryntumProps } = BryntumListComponent;
+            if (bryntumProps.includes(prop)) {
+                WrapperHelper.applyPropValue(instance, prop, newValue, false);
+                if (bryntumConfigsOnly.includes(prop)) {
+                    WrapperHelper.devWarningUpdateProp(instanceName, prop);
+                }
+            }
+        });
+    }
+
+    /**
+     * Destroy the component
+     */
+    ngOnDestroy(): void {
+        // @ts-ignore
+        if (this.instance && this.instance.destroy) {
+            this.instance.destroy();
+        }
+    }
+}