/* eslint-disable @typescript-eslint/no-unused-vars */
/**
 * Angular wrapper for Bryntum DatePicker
 */

import { Component, ElementRef, EventEmitter, Output, Input, SimpleChange, SimpleChanges, OnDestroy, OnInit } from '@angular/core';

import WrapperHelper from './wrapper.helper';

import { AlignSpec, Base, CalendarPanel, Color, Container, ContainerItemConfig, ContainerLayoutConfig, DatePicker, DatePickerListeners, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, MenuItemEntry, Model, Month, MonthConfig, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, Rectangle, Scroller, ScrollerConfig, StateProvider, TabConfig, Tool, ToolConfig, ToolbarConfig, ToolbarItems, TooltipConfig, VueConfig, Widget } from '@bryntum/taskboard';

import { StringHelper } from '@bryntum/taskboard';

export type BryntumDatePickerProps = {
    // Configs
    /**
     * The date that the user has navigated to using the UI *prior* to setting the widget's
     * value by selecting it. The initial default is today's date. Can also be supplied as a `YYYY-MM-DD` date
     * string.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-activeDate)
     */
    activeDate ? : Date|'today'|string
    /**
     * 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/DatePicker#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/DatePicker#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
    /**
     * *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
    /**
     * By default, when navigating through time, the next time
     * block will be animated in from the appropriate direction.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-animateTimeShift)
     */
    animateTimeShift ? : 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/DatePicker#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/DatePicker#config-ariaLabel)
     */
    ariaLabel ? : string
    /**
     * Update assigned [record](https://bryntum.com/products/taskboard/docs/api/Core/widget/Container#config-record) automatically on field changes
     */
    autoUpdateRecord ? : boolean
    /**
     * A Config object representing the configuration of a [Toolbar](https://bryntum.com/products/taskboard/docs/api/Core/widget/Toolbar),
     * or array of config objects representing the child items of a Toolbar. Another way to add a bbar is to use [strips](https://bryntum.com/products/taskboard/docs/api/Core/widget/Panel#config-strips).
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-bbar)
     */
    bbar ? : (ContainerItemConfig|string)[]|ToolbarConfig|PagingToolbarConfig|null
    /**
     * Custom CSS classes to add to the panel's body element.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-bodyCls)
     */
    bodyCls ? : string|object
    /**
     * Set `true` to add a border to this container's element.
     */
    border ? : boolean
    /**
     * 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/DatePicker#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/DatePicker#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/DatePicker#config-catchEventHandlerExceptions)
     */
    catchEventHandlerExceptions ? : boolean
    /**
     * A function (or the name of a function) which creates content in, and may mutate a day cell element.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-cellRenderer)
     * @param {object} renderData
     * @param {HTMLElement} renderData.cell The cell's encapsulating element. This has the `b-calendar-panel-cell` class and is the element which receives focus, so this should be the target of any accessibility attributes.
     * @param {HTMLElement} renderData.innerCell The inner element of the cell which contains the date number. This is the `aspect-ratio : 1` element which contains the date. It is not recommeneded to mutate this element. Instead use the `cellPayload` element (see below).
     * @param {HTMLElement} renderData.cellPayload An empty, absolutely positioned element, by default docked at the bottom of the cell. Content may be added to this element to augment cell content.
     * @param {Date} renderData.date The date for the cell
     * @param {number} renderData.day The day for the cell (`0` to `6` for Sunday to Saturday)
     * @param {number[]} renderData.rowIndex The row index, 0 to month row count (6 if [sixWeeks](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-sixWeeks) is `true`)
     * @param {HTMLElement} renderData.row The row element encapsulating the week which the cell is a part of
     * @param {Core.widget.CalendarPanel} renderData.source The widget being rendered
     * @param {number[]} renderData.cellIndex The cell index in the whole panel. May be from `0` to up to `42`
     * @param {number[]} renderData.columnIndex The column index, `0` to `6`
     * @param {number[]} renderData.visibleColumnIndex The visible column index taking hidden non working days into account
     * @returns {string,DomConfig,void}
     */
    cellRenderer ? : ((renderData: { cell: HTMLElement, innerCell: HTMLElement, cellPayload: HTMLElement, date: Date, day: number, rowIndex: number[], row: HTMLElement, source: CalendarPanel, cellIndex: number[], columnIndex: number[], visibleColumnIndex: number[] }) => string|DomConfig|void)|string
    /**
     * *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
    /**
     * 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/DatePicker#config-cls)
     */
    cls ? : string|object
    /**
     * Controls whether the panel is collapsed (the body of the panel is hidden while only the header is
     * visible). Only valid if the panel is [collapsible](https://bryntum.com/products/taskboard/docs/api/Core/widget/Panel#config-collapsible).
     */
    collapsed ? : boolean
    /**
     * This config enables collapsibility for the panel. See [collapsed](https://bryntum.com/products/taskboard/docs/api/Core/widget/Panel#config-collapsed).
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-collapsible)
     */
    collapsible ? : boolean|PanelCollapserConfig|PanelCollapserOverlayConfig
    /**
     * 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/DatePicker#config-color)
     */
    color ? : Color
    /**
     * 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/DatePicker#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 initially selected date (or a `YYYY-MM-DD` date string).
     */
    date ? : Date|string
    /**
     * The [DateHelper](https://bryntum.com/products/taskboard/docs/api/Core/helper/DateHelper) format string to format the day names.
     */
    dayNameFormat ? : 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
    /**
     * A [query](https://bryntum.com/products/taskboard/docs/api/Core/widget/Container#function-query) selector function which can identify the descendant widget to which
     * focus should be directed by default.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-defaultFocus)
     * @param {Core.widget.Widget} widget Widget passed to method
     * @returns {boolean} truthy value if widget is the default one
     */
    defaultFocus ? : ((widget: Widget) => boolean)|string
    /**
     * A config object containing default settings to apply to all child widgets.
     */
    defaults ? : ContainerItemConfig
    /**
     * 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/DatePicker#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/DatePicker#config-disabled)
     */
    disabled ? : boolean|'inert'
    /**
     * The class name to add to disabled calendar cells.
     */
    disabledCls ? : string
    /**
     * Either an array of `Date` objects which are to be disabled (or date strings), or
     * a function (or the name of a function), which, when passed a `Date` returns `true` if the
     * date is disabled. Disabled dates cannot be interacted with.
     * @param {Date} date Date to check
     * @returns {boolean} Returns `true` if the provided date is disabled
     */
    disabledDates ? : ((date: Date) => boolean)|string|Date[]|string[]
    /**
     * Configure as `true` to render non working days as [disabledDates](https://bryntum.com/products/taskboard/docs/api/Core/widget/CalendarPanel#config-disabledDates).
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-disableNonWorkingDays)
     */
    disableNonWorkingDays ? : boolean
    /**
     * Configure this as true to disable pointer interaction with cells which are outside the
     * range of the current month.
     */
    disableOtherMonthCells ? : boolean
    /**
     * Configure as `true` to render Saturdays and Sundays as [disabledDates](https://bryntum.com/products/taskboard/docs/api/Core/widget/CalendarPanel#config-disabledDates).
     */
    disableWeekends ? : boolean
    /**
     * 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/DatePicker#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/DatePicker#config-draggable)
     */
    draggable ? : boolean|{
        handleSelector?: string
    }
    /**
     * This property is only valid if [multiSelect](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-multiSelect) is set to `'range'`
     * or `true`.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-dragSelect)
     */
    dragSelect ? : boolean
    /**
     * Make this Panel a docked drawer which slides out from one side of the browser viewport by default.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-drawer)
     * @param {'start','left','end','right','top','bottom'} side The side of the viewport to dock the drawer to.  * `'start'` means the `inline-start` side. * `'end'` means the `inline-end` side.
     * @param {string,number} size The size of the drawer in its collapsible axis.
     * @param {boolean} inline If using the [appendTo](https://bryntum.com/products/taskboard/docs/api/Core/widget/Panel#config-appendTo) config to place the drawer inside a host widget, this may be set to `true` to make the drawer inline within that host. Note that, if using this, the layout of the host element must have `flex-direction` set appropriately.
     * @param {boolean,object} autoClose Specifies what user actions should automatically close the drawer. Defaults to closing when the user clicks outside of the drawer or when focus moves outside of the drawer.
     * @param {boolean,string} autoClose.mousedown If the user clicks outside of the drawer, the drawer will automatically be hidden. If the value is a string, it is used as a CSS selector to filter clicks which should close the drawer.
     * @param {boolean,string} autoClose.focusout If focus moves outside of the drawer, the drawer will automatically be hidden.
     * @param {string} autoClose.mouseout Hides the drawer when the mouse leaves the drawer after the `autoCloseDelay` period.
     * @param {number} autoCloseDelay When using `mouseout`, this is the delay in milliseconds
     */
    drawer ? : boolean|{side?: 'start'|'left'|'end'|'right'|'top'|'bottom', size?: string|number, inline?: boolean, autoClose: { mousedown?: boolean|string, focusout?: boolean|string, mouseout?: string }, autoCloseDelay?: number}
    /**
     * By default, the month and year are editable. Configure this as `false` to prevent that.
     */
    editMonth ? : boolean
    /**
     * 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/DatePicker#config-elementAttributes)
     */
    elementAttributes ? : Record<string, string|null>
    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
    /**
     * By default, disabled dates cannot be navigated to, and they are skipped over
     * during keyboard navigation. Configure this as `true` to enable navigation to
     * disabled dates.
     */
    focusDisabledDates ? : boolean
    /**
     * Config object of a footer. May contain a `dock`, `html` and a `cls` property. A footer is not a widget,
     * but rather plain HTML that follows the last element of the panel's body and [strips](https://bryntum.com/products/taskboard/docs/api/Core/widget/Panel#config-strips).
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-footer)
     */
    footer ? : {
        dock?: 'top'|'right'|'bottom'|'left'|'start'|'end'
        html?: string
        cls?: string
    }|string
    /**
     * A config [object](https://bryntum.com/products/taskboard/docs/api/Core/widget/Panel#typedef-PanelHeader) for the panel's header or a string in place of a `title`.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-header)
     */
    header ? : string|boolean|PanelHeader
    /**
     * A function (or the name of a function) which creates content in, and may mutate a day header element.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-headerRenderer)
     * @param {HTMLElement} cell The header element
     * @param {number} columnIndex The day column. Will be in the range `0` to `6`
     * @param {number} weekDay The canonical day number where Monday is `0` and Sunday is `6`
     * @returns {string,DomConfig,void}
     */
    headerRenderer ? : ((cell: HTMLElement, columnIndex: number, weekDay: number) => string|DomConfig|void)|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/DatePicker#config-hideAnimation)
     */
    hideAnimation ? : boolean|object
    /**
     * Configure this as `true` to hide cells which are outside the range of the current month.
     */
    hideOtherMonthCells ? : boolean
    /**
     * Specify `true` to make this container hide when it has no visible children (Either empty
     * or all children hidden).
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-hideWhenEmpty)
     */
    hideWhenEmpty ? : boolean
    /**
     * Configure as `true` to add a highlighted border and background to the week row which
     * encapsulates the selected date.
     */
    highlightSelectedWeek ? : boolean
    /**
     * 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/DatePicker#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
    /**
     * An icon to show before the [title](https://bryntum.com/products/taskboard/docs/api/Core/widget/Panel#config-title). Either pass a CSS class as a string, or pass a
     * [DomConfig](https://bryntum.com/products/taskboard/docs/api/Core/helper/DomHelper#typedef-DomConfig) object describing an element to represent the icon.
     */
    icon ? : string|DomConfig
    /**
     * 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/DatePicker#config-ignoreParentReadOnly)
     */
    ignoreParentReadOnly ? : boolean
    /**
     * By default, the year is visible. Configure this as `false` to prevent that.
     */
    includeYear ? : boolean
    /**
     * Convenience setting to align input fields of child widgets. By default, the Field input element is
     * placed immediately following the `label`. If you prefer to have all input fields aligned to the
     * right, set this config to `'end'`.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-inputFieldAlign)
     */
    inputFieldAlign ? : 'start'|'end'
    /**
     * 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
    /**
     * An optional CSS class to add to child items of this container.
     */
    itemCls ? : string
    /**
     * An object containing typed child widget config objects or Widgets. May also be specified
     * as an array.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-items)
     */
    items ? : Record<string, ContainerItemConfig|MenuItemEntry>|(ContainerItemConfig|MenuItemEntry|Widget)[]
    /**
     * 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/DatePicker#config-keyMap)
     */
    keyMap ? : Record<string, KeyMapConfig>
    /**
     * Convenience setting to use same label placement on all child widgets.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-labelPosition)
     */
    labelPosition ? : 'before'|'above'|'align-before'|'auto'|null
    /**
     * The short name of a helper class which manages rendering and styling of child items.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-layout)
     */
    layout ? : string|ContainerLayoutConfig
    /**
     * The CSS style properties to apply to the [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/DatePicker#config-layoutStyle)
     */
    layoutStyle ? : object
    /**
     * An array of [child item](https://bryntum.com/products/taskboard/docs/api/Core/widget/Container#config-items) *config objects* which is to be converted into
     * instances only when this Container is rendered, rather than eagerly at construct time.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-lazyItems)
     */
    lazyItems ? : Record<string, ContainerItemConfig>|ContainerItemConfig[]|Widget[]
    /**
     * The listener set for this object.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-listeners)
     */
    listeners ? : DatePickerListeners
    /**
     * 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/DatePicker#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/DatePicker#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 maximum selectable date. Selection of and navigation to dates after
     * this date will not be possible.
     */
    maxDate ? : Date
    /**
     * 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/DatePicker#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
    /**
     * By default, day cells flex to share available Panel width equally.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-minColumnWidth)
     */
    minColumnWidth ? : number
    /**
     * The minimum selectable date. Selection of and navigation to dates prior
     * to this date will not be possible.
     */
    minDate ? : Date
    /**
     * 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
    /**
     * By default, week rows flex to share available Panel height equally.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-minRowHeight)
     */
    minRowHeight ? : number|string
    /**
     * 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/DatePicker#config-monitorResize)
     */
    monitorResize ? : boolean|{
        immediate?: boolean
    }
    /**
     * A [Month](https://bryntum.com/products/taskboard/docs/api/Core/util/Month) Month utility object which encapsulates this Panel's month
     * and provides contextual information and navigation services.
     */
    month ? : Month|MonthConfig
    /**
     * The format string to use to create the text of the month button.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-monthButtonFormat)
     */
    monthButtonFormat ? : string
    /**
     * Configure as `true` to enable selecting multiple discontiguous date ranges using
     * click and Shift+click to create ranges and Ctrl+click to select/deselect individual dates.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-multiSelect)
     */
    multiSelect ? : boolean|'range'|'simple'
    /**
     * An object containing default config objects which may be referenced by name in the [items](https://bryntum.com/products/taskboard/docs/api/Core/widget/Container#config-items)
     * config. For example, a specialized [Menu](https://bryntum.com/products/taskboard/docs/api/Core/widget/Menu) subclass may have a `namedItems` default
     * value defined like this:
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-namedItems)
     */
    namedItems ? : Record<string, ContainerItemConfig>
    /**
     * The class name to add to calendar cells which are [nonWorkingDays](https://bryntum.com/products/taskboard/docs/api/Core/widget/CalendarPanel#config-nonWorkingDays).
     */
    nonWorkingDayCls ? : string
    /**
     * Non-working days as an object where keys are day indices, 0-6 (Sunday-Saturday), and the value is `true`.
     * Defaults to [nonWorkingDays](https://bryntum.com/products/taskboard/docs/api/Core/helper/DateHelper#property-nonWorkingDays-static).
     */
    nonWorkingDays ? : Record<number, boolean>
    /**
     * The class name to add to calendar cells which are in the previous or next month.
     */
    otherMonthCls ? : string
    /**
     * 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/DatePicker#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/DatePicker#config-readOnly)
     */
    readOnly ? : boolean
    /**
     * [Record](https://bryntum.com/products/taskboard/docs/api/Core/data/Model) whose values will be used to populate fields in the container.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-record)
     */
    record ? : Model
    relayStoreEvents ? : boolean
    /**
     * Either a default `rendition` to apply to all child widgets, or a map of renditions keyed by child widget
     * `type`.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-rendition)
     */
    rendition ? : string|Record<string, string>|null
    /**
     * 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/DatePicker#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/DatePicker#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/DatePicker#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
    /**
     * If [multiSelect](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-multiSelect) is configured as `true`, this is an array of dates
     * which are selected. There may be multiple, discontiguous date ranges.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-selection)
     */
    selection ? : Date[]|string[]
    /**
     * Configure as `true` to render past dates in a lighter text color.
     */
    shadePastDates ? : 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/DatePicker#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
    /**
     * Configure as `true` to show a week number column at the start of the calendar block.
     */
    showWeekColumn ? : boolean
    /**
     * Configure as `true` to always show a six-week calendar.
     */
    sixWeeks ? : boolean
    /**
     * Programmatic control over how many columns to span when used in a grid layout.
     */
    span ? : number
    /**
     * This value can be one of the following:
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-stateful)
     */
    stateful ? : boolean|object|string[]
    /**
     * The events that, when fired by this component, should trigger it to save its state by calling
     * [saveState](https://bryntum.com/products/taskboard/docs/api/Core/mixin/State#function-saveState).
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-statefulEvents)
     */
    statefulEvents ? : object|string[]
    /**
     * The key to use when saving this object's state in the [stateProvider](https://bryntum.com/products/taskboard/docs/api/Core/mixin/State#config-stateProvider). If this config is
     * not assigned, and [stateful](https://bryntum.com/products/taskboard/docs/api/Core/mixin/State#config-stateful) is not set to `false`, the [id](#Core/widget/Widget#config-id)
     * (if explicitly specified) will be used as the `stateId`.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-stateId)
     */
    stateId ? : string
    /**
     * The `StateProvider` to use to save and restore this object's [state](https://bryntum.com/products/taskboard/docs/api/Core/mixin/State#property-state). By default, `state`
     * will be saved using the [default state provider](https://bryntum.com/products/taskboard/docs/api/Core/state/StateProvider#property-instance-static).
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-stateProvider)
     */
    stateProvider ? : StateProvider
    /**
     * Specify `true` to match fields by their `name` property only when assigning a [record](https://bryntum.com/products/taskboard/docs/api/Core/widget/Container#config-record),
     * without falling back to `ref`.
     */
    strictRecordMapping ? : boolean
    /**
     * An object containing widgets keyed by name. By default (when no `type` is given), strips are
     * [toolbars](https://bryntum.com/products/taskboard/docs/api/Core/widget/Toolbar). If you want to pass an array, you can use
     * the toolbar's [items](https://bryntum.com/products/taskboard/docs/api/Core/widget/Container#config-items).
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-strips)
     */
    strips ? : Record<string, ContainerItemConfig>
    /**
     * 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/DatePicker#config-tab)
     */
    tab ? : boolean|TabConfig
    /**
     * When this container is used as a tab in a TabPanel, these items are added to the
     * [TabBar](https://bryntum.com/products/taskboard/docs/api/Core/widget/TabBar) when this container is the active tab.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-tabBarItems)
     */
    tabBarItems ? : ToolbarItems[]|Widget[]
    /**
     * The tag name of this Widget's root element
     */
    tag ? : string
    /**
     * A Config object representing the configuration of a [Toolbar](https://bryntum.com/products/taskboard/docs/api/Core/widget/Toolbar),
     * or array of config objects representing the child items of a Toolbar.
     * This creates a toolbar docked to the top of the panel immediately below the header.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-tbar)
     */
    tbar ? : (ContainerItemConfig|string)[]|ToolbarConfig|PagingToolbarConfig|null
    /**
     * 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/DatePicker#config-textAlign)
     */
    textAlign ? : 'left'|'center'|'right'|'start'|'end'
    /**
     * Specify `true` for a container used to show text markup. It will apply the CSS class `b-text-content`
     * which specifies a default max-width that makes long text more readable.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-textContent)
     */
    textContent ? : boolean
    /**
     * A config object to create a tooltip which will show on hover of a date cell including disabled, weekend,
     * and "other month" cells.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-tip)
     */
    tip ? : TooltipConfig
    /**
     * A title to display in the header or owning TabPanel. Causes creation and docking of a header
     * to the top if no header is configured.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-title)
     */
    title ? : string
    /**
     * The class name to add to the calendar cell which contains today's date.
     */
    todayCls ? : string
    /**
     * The [tools](https://bryntum.com/products/taskboard/docs/api/Core/widget/Tool) to add either before or after the `title` in the Panel header. Each
     * property name is the reference by which an instantiated tool may be retrieved from the live
     * `[tools](https://bryntum.com/products/taskboard/docs/api/Core/widget/mixin/Toolable#property-tools)` property.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-tools)
     */
    tools ? : Record<string, ToolConfig>|null
    /**
     * 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/DatePicker#config-tooltip)
     */
    tooltip ? : string|TooltipConfig|null
    /**
     * By default, tabbing within a Panel is not contained, ie you can TAB out of the Panel
     * forwards or backwards.
     * Configure this as `true` to disallow tabbing out of the Panel, and make tabbing circular within this Panel.
     */
    trapFocus ? : boolean
    type ? : 'datepicker'
    /**
     * 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/DatePicker#config-ui)
     */
    ui ? : 'plain'|'toolbar'|string|object
    /**
     * The header text for the week number column, if shown.
     */
    weekColumnHeader ? : string
    /**
     * The class name to add to calendar cells which are weekend dates.
     */
    weekendCls ? : string
    /**
     * A function (or the name of a function) which creates content in, and may mutate the week cell element at the start of a week row.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-weekRenderer)
     * @param {HTMLElement} weekCell The header element
     * @param {number[]} week An array containing `[year, weekNumber]`
     * @returns {string,DomConfig,void}
     */
    weekRenderer ? : ((weekCell: HTMLElement, week: number[]) => string|DomConfig|void)|string
    /**
     * The week start day, 0 meaning Sunday, 6 meaning Saturday.
     * Defaults to [weekStartDay](https://bryntum.com/products/taskboard/docs/api/Core/helper/DateHelper#property-weekStartDay-static).
     */
    weekStartDay ? : 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/DatePicker#config-x)
     */
    x ? : number
    /**
     * The y position for the widget.
     * ...
     * [View online docs...](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-y)
     */
    y ? : number

}

@Component({
    selector : 'bryntum-date-picker',
    template : ''
})
export class BryntumDatePickerComponent implements OnInit, OnDestroy {

    public static instanceClass = DatePicker;

    public static instanceName = 'DatePicker';

    private static bryntumEvents: string[] = [
        'onBeforeDestroy',
        'onBeforeHide',
        'onBeforeRefresh',
        'onBeforeSetRecord',
        'onBeforeShow',
        'onBeforeStateApply',
        'onBeforeStateSave',
        'onCatchAll',
        'onCellClick',
        'onCollapse',
        'onDateChange',
        'onDestroy',
        'onDirtyStateChange',
        'onElementCreated',
        'onExpand',
        'onFocusIn',
        'onFocusOut',
        'onHide',
        'onPaint',
        'onReadOnly',
        'onRecompose',
        'onRefresh',
        'onResize',
        'onSelectionChange',
        'onShow',
        'onToolClick',
        'onWeekCellClick'
    ];

    private static bryntumFeatureNames: string[] = [

    ];

    private static bryntumConfigs: string[] = BryntumDatePickerComponent.bryntumFeatureNames.concat([
        'activeDate',
        'adopt',
        'align',
        'alignSelf',
        'anchor',
        'animateTimeShift',
        'appendTo',
        'ariaDescription',
        'ariaLabel',
        'autoUpdateRecord',
        'bbar',
        'bodyCls',
        'border',
        'bubbleEvents',
        'callOnFunctions',
        'catchEventHandlerExceptions',
        'cellRenderer',
        'centered',
        'cls',
        'collapsed',
        'collapsible',
        'color',
        'column',
        'config',
        'constrainTo',
        'content',
        'contentElementCls',
        'dataField',
        'dataset',
        'date',
        'dayNameFormat',
        'defaultBindProperty',
        'defaultFocus',
        'defaults',
        'detectCSSCompatibilityIssues',
        'disabled',
        'disabledCls',
        'disabledDates',
        'disableNonWorkingDays',
        'disableOtherMonthCells',
        'disableWeekends',
        'dock',
        'draggable',
        'dragSelect',
        'drawer',
        'editMonth',
        'elementAttributes',
        'extraData',
        'flex',
        'floating',
        'focusDisabledDates',
        'footer',
        'header',
        'headerRenderer',
        'height',
        'hidden',
        'hideAnimation',
        'hideOtherMonthCells',
        'hideWhenEmpty',
        'highlightSelectedWeek',
        'html',
        'htmlCls',
        'icon',
        'id',
        'ignoreParentReadOnly',
        'includeYear',
        'inputFieldAlign',
        'insertBefore',
        'insertFirst',
        'itemCls',
        'items',
        'keyMap',
        'labelPosition',
        'layout',
        'layoutStyle',
        'lazyItems',
        'listeners',
        'localeClass',
        'localizable',
        'localizableProperties',
        'margin',
        'maskDefaults',
        'masked',
        'maxDate',
        'maxHeight',
        'maximizeOnMobile',
        'maxWidth',
        'minColumnWidth',
        'minDate',
        'minHeight',
        'minRowHeight',
        'minWidth',
        'monitorResize',
        'month',
        'monthButtonFormat',
        'multiSelect',
        'namedItems',
        'nonWorkingDayCls',
        'nonWorkingDays',
        'otherMonthCls',
        'positioned',
        'preventTooltipOnTouch',
        'readOnly',
        'record',
        'relayStoreEvents',
        'rendition',
        'ripple',
        'rootElement',
        'rtl',
        'scrollable',
        'scrollAction',
        'selection',
        'shadePastDates',
        'showAnimation',
        'showTooltipWhenDisabled',
        'showWeekColumn',
        'sixWeeks',
        'span',
        'stateful',
        'statefulEvents',
        'stateId',
        'stateProvider',
        'strictRecordMapping',
        'strips',
        'tab',
        'tabBarItems',
        'tag',
        'tbar',
        'textAlign',
        'textContent',
        'tip',
        'title',
        'todayCls',
        'tools',
        'tooltip',
        'trapFocus',
        'type',
        'ui',
        'weekColumnHeader',
        'weekendCls',
        'weekRenderer',
        'weekStartDay',
        'weight',
        'width',
        'x',
        'y'
    ]);

    private static bryntumConfigsOnly: string[] = [
        'activeDate',
        'adopt',
        'align',
        'anchor',
        'ariaDescription',
        'ariaLabel',
        'autoUpdateRecord',
        'bbar',
        'bodyCls',
        'border',
        'bubbleEvents',
        'cellRenderer',
        'centered',
        'collapsible',
        'color',
        'config',
        'constrainTo',
        'contentElementCls',
        'dataField',
        'dayNameFormat',
        'defaultBindProperty',
        'defaultFocus',
        'defaults',
        'detectCSSCompatibilityIssues',
        'disabledCls',
        'disabledDates',
        'disableNonWorkingDays',
        'disableOtherMonthCells',
        'disableWeekends',
        'dock',
        'draggable',
        'drawer',
        'editMonth',
        'elementAttributes',
        'floating',
        'focusDisabledDates',
        'footer',
        'header',
        'headerRenderer',
        'hideAnimation',
        'hideOtherMonthCells',
        'hideWhenEmpty',
        'htmlCls',
        'icon',
        'ignoreParentReadOnly',
        'includeYear',
        'itemCls',
        'lazyItems',
        'listeners',
        'localeClass',
        'localizable',
        'localizableProperties',
        'maskDefaults',
        'masked',
        'maxDate',
        'minColumnWidth',
        'minDate',
        'minRowHeight',
        'monitorResize',
        'month',
        'monthButtonFormat',
        'multiSelect',
        'namedItems',
        'nonWorkingDayCls',
        'nonWorkingDays',
        'otherMonthCls',
        'positioned',
        'preventTooltipOnTouch',
        'relayStoreEvents',
        'ripple',
        'rootElement',
        'scrollAction',
        'showAnimation',
        'showTooltipWhenDisabled',
        'sixWeeks',
        'stateful',
        'statefulEvents',
        'stateId',
        'stateProvider',
        'strips',
        'tab',
        'tabBarItems',
        'tag',
        'tbar',
        'textAlign',
        'textContent',
        'tip',
        'todayCls',
        'trapFocus',
        'type',
        'ui',
        'weekendCls',
        'weekRenderer',
        'weekStartDay',
        'weight'
    ];

    private static bryntumProps: string[] = BryntumDatePickerComponent.bryntumFeatureNames.concat([
        'alignSelf',
        'anchorSize',
        'animateTimeShift',
        'appendTo',
        'callOnFunctions',
        'catchEventHandlerExceptions',
        'cls',
        'collapsed',
        'column',
        'content',
        'dataset',
        'date',
        'disabled',
        'dragSelect',
        'extraData',
        'flex',
        'focusVisible',
        'hasChanges',
        'height',
        'hidden',
        'highlightSelectedWeek',
        'html',
        'id',
        'inputFieldAlign',
        'insertBefore',
        'insertFirst',
        'isSettingValues',
        'isValid',
        'items',
        'keyMap',
        'labelPosition',
        'layout',
        'layoutStyle',
        'margin',
        'maxHeight',
        'maximizeOnMobile',
        'maxWidth',
        'minHeight',
        'minWidth',
        'parent',
        'readOnly',
        'record',
        'rendition',
        'rtl',
        'scrollable',
        'selection',
        'shadePastDates',
        'showWeekColumn',
        'span',
        'state',
        'strictRecordMapping',
        'title',
        'tools',
        'tooltip',
        'values',
        'weekColumnHeader',
        'width',
        'x',
        'y'
    ]);

    private elementRef: ElementRef;
    public instance!: DatePicker;

    private bryntumConfig = {
        adopt            : undefined,
        appendTo         : undefined,
        href             : undefined,
        angularComponent : this,
        features         : {},
        listeners        : {}
    };

    constructor(element: ElementRef) {
        this.elementRef = element;
    }

    // Configs only
    @Input() activeDate                   ! : Date|'today'|string;
    @Input() adopt                        ! : HTMLElement|string;
    @Input() align                        ! : AlignSpec|string;
    @Input() anchor                       ! : boolean;
    @Input() ariaDescription              ! : string;
    @Input() ariaLabel                    ! : string;
    @Input() autoUpdateRecord             ! : boolean;
    @Input() bbar                         ! : (ContainerItemConfig|string)[]|ToolbarConfig|PagingToolbarConfig|null;
    @Input() bodyCls                      ! : string|object;
    @Input() border                       ! : boolean;
    @Input() bubbleEvents                 ! : object;
    @Input() cellRenderer                 ! : ((renderData: { cell: HTMLElement, innerCell: HTMLElement, cellPayload: HTMLElement, date: Date, day: number, rowIndex: number[], row: HTMLElement, source: CalendarPanel, cellIndex: number[], columnIndex: number[], visibleColumnIndex: number[] }) => string|DomConfig|void)|string;
    @Input() centered                     ! : boolean;
    @Input() collapsible                  ! : boolean|PanelCollapserConfig|PanelCollapserOverlayConfig;
    @Input() color                        ! : Color;
    @Input() config                       ! : object;
    @Input() constrainTo                  ! : HTMLElement|Widget|Rectangle;
    @Input() contentElementCls            ! : string|object;
    @Input() dataField                    ! : string;
    @Input() dayNameFormat                ! : string;
    @Input() defaultBindProperty          ! : string;
    @Input() defaultFocus                 ! : ((widget: Widget) => boolean)|string;
    @Input() defaults                     ! : ContainerItemConfig;
    @Input() detectCSSCompatibilityIssues ! : boolean;
    @Input() disabledCls                  ! : string;
    @Input() disabledDates                ! : ((date: Date) => boolean)|string|Date[]|string[];
    @Input() disableNonWorkingDays        ! : boolean;
    @Input() disableOtherMonthCells       ! : boolean;
    @Input() disableWeekends              ! : boolean;
    @Input() dock                         ! : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object;
    @Input() draggable                    ! : boolean|{
        handleSelector?: string
    };
    @Input() drawer                       ! : boolean|{side?: 'start'|'left'|'end'|'right'|'top'|'bottom', size?: string|number, inline?: boolean, autoClose: { mousedown?: boolean|string, focusout?: boolean|string, mouseout?: string }, autoCloseDelay?: number};
    @Input() editMonth                    ! : boolean;
    @Input() elementAttributes            ! : Record<string, string|null>;
    @Input() floating                     ! : boolean;
    @Input() focusDisabledDates           ! : boolean;
    @Input() footer                       ! : {
        dock?: 'top'|'right'|'bottom'|'left'|'start'|'end'
        html?: string
        cls?: string
    }|string;
    @Input() header                       ! : string|boolean|PanelHeader;
    @Input() headerRenderer               ! : ((cell: HTMLElement, columnIndex: number, weekDay: number) => string|DomConfig|void)|string;
    @Input() hideAnimation                ! : boolean|object;
    @Input() hideOtherMonthCells          ! : boolean;
    @Input() hideWhenEmpty                ! : boolean;
    @Input() htmlCls                      ! : string|object;
    @Input() icon                         ! : string|DomConfig;
    @Input() ignoreParentReadOnly         ! : boolean;
    @Input() includeYear                  ! : boolean;
    @Input() itemCls                      ! : string;
    @Input() lazyItems                    ! : Record<string, ContainerItemConfig>|ContainerItemConfig[]|Widget[];
    @Input() listeners                    ! : DatePickerListeners;
    @Input() localeClass                  ! : typeof Base;
    @Input() localizable                  ! : boolean;
    @Input() localizableProperties        ! : string[];
    @Input() maskDefaults                 ! : MaskConfig;
    @Input() masked                       ! : boolean|string|MaskConfig;
    @Input() maxDate                      ! : Date;
    @Input() minColumnWidth               ! : number;
    @Input() minDate                      ! : Date;
    @Input() minRowHeight                 ! : number|string;
    @Input() monitorResize                ! : boolean|{
        immediate?: boolean
    };
    @Input() month                        ! : Month|MonthConfig;
    @Input() monthButtonFormat            ! : string;
    @Input() multiSelect                  ! : boolean|'range'|'simple';
    @Input() namedItems                   ! : Record<string, ContainerItemConfig>;
    @Input() nonWorkingDayCls             ! : string;
    @Input() nonWorkingDays               ! : Record<number, boolean>;
    @Input() otherMonthCls                ! : string;
    @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() showAnimation                ! : boolean|object;
    @Input() showTooltipWhenDisabled      ! : boolean;
    @Input() sixWeeks                     ! : boolean;
    @Input() stateful                     ! : boolean|object|string[];
    @Input() statefulEvents               ! : object|string[];
    @Input() stateId                      ! : string;
    @Input() stateProvider                ! : StateProvider;
    @Input() strips                       ! : Record<string, ContainerItemConfig>;
    @Input() tab                          ! : boolean|TabConfig;
    @Input() tabBarItems                  ! : ToolbarItems[]|Widget[];
    @Input() tag                          ! : string;
    @Input() tbar                         ! : (ContainerItemConfig|string)[]|ToolbarConfig|PagingToolbarConfig|null;
    @Input() textAlign                    ! : 'left'|'center'|'right'|'start'|'end';
    @Input() textContent                  ! : boolean;
    @Input() tip                          ! : TooltipConfig;
    @Input() todayCls                     ! : string;
    @Input() trapFocus                    ! : boolean;
    @Input() type                         ! : 'datepicker';
    @Input() ui                           ! : 'plain'|'toolbar'|string|object;
    @Input() weekendCls                   ! : string;
    @Input() weekRenderer                 ! : ((weekCell: HTMLElement, week: number[]) => string|DomConfig|void)|string;
    @Input() weekStartDay                 ! : number;
    @Input() weight                       ! : number;

    // Configs and properties
    @Input() alignSelf                   ! : string;
    @Input() animateTimeShift            ! : boolean;
    @Input() appendTo                    ! : HTMLElement|string;
    @Input() callOnFunctions             ! : boolean;
    @Input() catchEventHandlerExceptions ! : boolean;
    @Input() cls                         ! : string|object;
    @Input() collapsed                   ! : boolean;
    @Input() column                      ! : number;
    @Input() content                     ! : string;
    @Input() dataset                     ! : object|Record<string, string>;
    @Input() date                        ! : Date|string;
    @Input() disabled                    ! : boolean|'inert';
    @Input() dragSelect                  ! : boolean;
    @Input() extraData                   ! : any;
    @Input() flex                        ! : number|string;
    @Input() height                      ! : number|string;
    @Input() hidden                      ! : boolean;
    @Input() highlightSelectedWeek       ! : boolean;
    @Input() html                        ! : string|((widget: Widget) => string)|DomConfig|DomConfig[]|VueConfig;
    @Input() id                          ! : string;
    @Input() inputFieldAlign             ! : 'start'|'end';
    @Input() insertBefore                ! : HTMLElement|string;
    @Input() insertFirst                 ! : HTMLElement|string;
    @Input() items                       ! : (ContainerItemConfig|MenuItemConfig|Widget)[]|Record<string, ContainerItemConfig|MenuItemConfig>|Widget[]|Record<string, ContainerItemConfig|MenuItemEntry>|(ContainerItemConfig|MenuItemEntry|Widget)[];
    @Input() keyMap                      ! : Record<string, KeyMapConfig>;
    @Input() labelPosition               ! : 'before'|'above'|'align-before'|'auto'|null;
    @Input() layout                      ! : Layout|string|ContainerLayoutConfig;
    @Input() layoutStyle                 ! : object;
    @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() readOnly                    ! : boolean;
    @Input() record                      ! : Model;
    @Input() rendition                   ! : string|Record<string, string>|null;
    @Input() rtl                         ! : boolean;
    @Input() scrollable                  ! : Scroller|boolean|ScrollerConfig;
    @Input() selection                   ! : Date[]|string[];
    @Input() shadePastDates              ! : boolean;
    @Input() showWeekColumn              ! : boolean;
    @Input() span                        ! : number;
    @Input() strictRecordMapping         ! : boolean;
    @Input() title                       ! : string;
    @Input() tools                       ! : Record<string, Tool|ToolConfig>|null|Record<string, Tool>|Record<string, ToolConfig>;
    @Input() tooltip                     ! : string|TooltipConfig|null;
    @Input() weekColumnHeader            ! : string;
    @Input() width                       ! : number|string;
    @Input() x                           ! : number;
    @Input() y                           ! : number;

    // Properties only
    @Input() anchorSize      ! : number[];
    @Input() focusVisible    ! : boolean;
    @Input() hasChanges      ! : boolean;
    @Input() isSettingValues ! : boolean;
    @Input() isValid         ! : boolean;
    @Input() parent          ! : Widget;
    @Input() state           ! : any;
    @Input() values          ! : Record<string, object>;

    // 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>();
    /**
     * Fires before this CalendarPanel refreshes in response to changes in its month.
     * @param {object} event Event object
     * @param {Core.widget.DatePicker} event.source This DatePicker.
     */
    @Output() onBeforeRefresh: any = new EventEmitter<((event: { source: DatePicker }) => void)|string>();
    /**
     * Fired before this container will load record values into its child fields. This is useful if you
     * want to modify the UI before data is loaded (e.g. set some input field to be readonly)
     * @param {object} event Event object
     * @param {Core.widget.Container} event.source The container
     * @param {Core.data.Model} event.record The record
     */
    @Output() onBeforeSetRecord: any = new EventEmitter<((event: { source: Container, record: Model }) => 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>();
    /**
     * Fired before state is applied to the source. Allows editing the state object or preventing the operation.
     * @param {object} event Event object
     * @param {any} event.state State object config
     */
    @Output() onBeforeStateApply: any = new EventEmitter<((event: { state: any }) => Promise<boolean>|boolean|void)|string>();
    /**
     * Fired before state is saved by the StateProvider. Allows editing the state object or preventing the operation.
     * @param {object} event Event object
     * @param {any} event.state State object config
     */
    @Output() onBeforeStateSave: any = new EventEmitter<((event: { state: 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/DatePicker#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>();
    /**
     * Fired when a date cell is clicked.
     * @param {object} event Event object
     * @param {HTMLElement} event.cell The clicked cell element.
     * @param {Date} event.date The date represented by the cell.
     * @param {number[]} event.week The week array `[year, weekNumber]`.
     * @param {Event} event.domEvent The original DOM event.
     */
    @Output() onCellClick: any = new EventEmitter<((event: { cell: HTMLElement, date: Date, week: number[], domEvent: Event }) => void)|string>();
    /**
     * Fires when a Panel is collapsed using the [collapsible](https://bryntum.com/products/taskboard/docs/api/Core/widget/Panel#config-collapsible) setting.
     * @param {object} event Event object
     * @param {Core.widget.Panel} event.source This Panel.
     */
    @Output() onCollapse: any = new EventEmitter<((event: { source: Panel }) => void)|string>();
    /**
     * Fires when the date of this CalendarPanel is set.
     * @param {object} event Event object
     * @param {Date} event.value The new date.
     * @param {Date} event.oldValue The old date.
     * @param {object} event.changes An object which contains properties which indicate what part of the date changed.
     * @param {boolean} event.changes.d True if the date changed in any way.
     * @param {boolean} event.changes.w True if the week changed (including same week in a different year).
     * @param {boolean} event.changes.m True if the month changed (including same month in a different year).
     * @param {boolean} event.changes.y True if the year changed.
     */
    @Output() onDateChange: any = new EventEmitter<((event: { value: Date, oldValue: Date, changes: { d: boolean, w: boolean, m: boolean, y: boolean } }) => 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>();
    /**
     * Fires when a field is mutated and the state of the [hasChanges](https://bryntum.com/products/taskboard/docs/api/Core/widget/Container#property-hasChanges) property changes
     * @param {object} event Event object
     * @param {Core.widget.Container} event.source The container.
     * @param {boolean} event.dirty The dirty state of the Container - `true` if there are any fields which have been changed since initial load.
     */
    @Output() onDirtyStateChange: any = new EventEmitter<((event: { source: Container, dirty: boolean }) => 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>();
    /**
     * Fires when a Panel is expanded using the [collapsible](https://bryntum.com/products/taskboard/docs/api/Core/widget/Panel#config-collapsible) setting.
     * @param {object} event Event object
     * @param {Core.widget.Panel} event.source This Panel.
     */
    @Output() onExpand: any = new EventEmitter<((event: { source: Panel }) => 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>();
    /**
     * 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/DatePicker#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>();
    /**
     * Fires when this CalendarPanel refreshes.
     */
    @Output() onRefresh: 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>();
    /**
     * Fires when a date or date range is selected. If [multiSelect](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-multiSelect) is specified,
     * this will fire upon deselection and selection of dates.
     * @param {object} event Event object
     * @param {Date[]} event.selection The selected dates. If [multiSelect](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-multiSelect) is specified this may be a two element array specifying start and end dates.
     * @param {Date[]} event.oldSelection The previously selected dates. If [multiSelect](https://bryntum.com/products/taskboard/docs/api/Core/widget/DatePicker#config-multiSelect) is specified this may be a two element array specifying start and end dates.
     * @param {boolean} event.userAction This will be `true` if the change was caused by user interaction as opposed to programmatic setting.
     */
    @Output() onSelectionChange: any = new EventEmitter<((event: { selection: Date[], oldSelection: Date[], userAction: boolean }) => 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>();
    /**
     * A header [tool](https://bryntum.com/products/taskboard/docs/api/Core/widget/Panel#config-tools) has been clicked.
     * @param {object} event Event object
     * @param {Core.widget.Tool} event.source This Panel.
     * @param {Core.widget.Tool} event.tool The tool which is being clicked.
     */
    @Output() onToolClick: any = new EventEmitter<((event: { source: Tool, tool: Tool }) => void)|string>();
    /**
     * Fired when a week number cell is clicked.
     * @param {object} event Event object
     * @param {Date} event.date The start date of the week.
     * @param {number[]} event.week The week array `[year, weekNumber]`.
     * @param {Event} event.domEvent The original DOM event.
     */
    @Output() onWeekCellClick: any = new EventEmitter<((event: { date: Date, week: number[], domEvent: Event }) => void)|string>();

    /**
     * Create and append the underlying widget
     */
    ngOnInit(): void {
        const
            me = this,
            {
                elementRef,
                bryntumConfig
            } = me,
            {
                instanceClass,
                instanceName,
                bryntumConfigs,
                bryntumEvents
            } = BryntumDatePickerComponent;

        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 } = BryntumDatePickerComponent;
        if (!instance) {
            return;
        }
        // Iterate over all changes
        Object.entries(changes).forEach(([prop, change]) => {
            const
                newValue = (change as SimpleChange).currentValue,
                { instance } = this,
                { bryntumConfigsOnly, bryntumProps } = BryntumDatePickerComponent;
            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();
        }
    }
}
