Bugfix
Resolved an issue with the tooltip styles that was causing the tooltip to flicker when hovering.
ProgressBarV2.
Pass featureFlags.useUpdatedClass: true in the constructor options to create a new style progress bar. SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. modalCenter, modalRight and modalFullScreen modalCenter modalCenter hx object. SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. hx.Autocomplete (lowercase c) hx.autocomplete (lowercase c) Selection::api api Selection::api api Selection::api api hx object. hx.button(class) hx.i hx.group(options) hx.group(options) hx.group(options) hx.group(options) hx.section(options) hx.section(options) hx.noticeHead hx.noticeBody hx-notice-head hx.notifyDefaultTimeout hx.notifyLoading hx.notifyInfo hx.notifyWarning hx.notifyNegative hx.notifyPositive hx.sort methods have been renamed to explict functions: hx.compare, hx.compareNullsLast, hx.localeCompare hx.spinnerWide hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 <img> tags to <div> tags. <div> tags until support for <img> tags is removed. ProgressBarV2.
Pass featureFlags.useUpdatedClass: true in the constructor options to create a new style progress bar. SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. modalCenter, modalRight and modalFullScreen modalCenter modalCenter hx object. SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. hx.Autocomplete (lowercase c) hx.autocomplete (lowercase c) Selection::api api Selection::api api Selection::api api hx object. hx.button(class) hx.i hx.group(options) hx.group(options) hx.group(options) hx.group(options) hx.section(options) hx.section(options) hx.noticeHead hx.noticeBody hx-notice-head hx.notifyDefaultTimeout hx.notifyLoading hx.notifyInfo hx.notifyWarning hx.notifyNegative hx.notifyPositive hx.sort methods have been renamed to explict functions: hx.compare, hx.compareNullsLast, hx.localeCompare hx.spinnerWide hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 <img> tags to <div> tags. <div> tags until support for <img> tags is removed. ProgressBarV2.
Pass featureFlags.useUpdatedClass: true in the constructor options to create a new style progress bar. SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. modalCenter, modalRight and modalFullScreen modalCenter modalCenter hx object. SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. hx.Autocomplete (lowercase c) hx.autocomplete (lowercase c) Selection::api api Selection::api api Selection::api api hx object. hx.button(class) hx.i hx.group(options) hx.group(options) hx.group(options) hx.group(options) hx.section(options) hx.section(options) hx.noticeHead hx.noticeBody hx-notice-head hx.notifyDefaultTimeout hx.notifyLoading hx.notifyInfo hx.notifyWarning hx.notifyNegative hx.notifyPositive hx.sort methods have been renamed to explict functions: hx.compare, hx.compareNullsLast, hx.localeCompare hx.spinnerWide hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 <img> tags to <div> tags. <div> tags until support for <img> tags is removed. ProgressBarV2.
Pass featureFlags.useUpdatedClass: true in the constructor options to create a new style progress bar. SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. modalCenter, modalRight and modalFullScreen modalCenter modalCenter hx object. SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. hx.Autocomplete (lowercase c) hx.autocomplete (lowercase c) Selection::api api Selection::api api Selection::api api hx object. hx.button(class) hx.i hx.group(options) hx.group(options) hx.group(options) hx.group(options) hx.section(options) hx.section(options) hx.noticeHead hx.noticeBody hx-notice-head hx.notifyDefaultTimeout hx.notifyLoading hx.notifyInfo hx.notifyWarning hx.notifyNegative hx.notifyPositive hx.sort methods have been renamed to explict functions: hx.compare, hx.compareNullsLast, hx.localeCompare hx.spinnerWide hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 <img> tags to <div> tags. <div> tags until support for <img> tags is removed. ProgressBar and added VisualizationBar to give better visualization of segments and progress. ProgressBarV2.
Pass featureFlags.useUpdatedClass: true in the constructor options to create a new style progress bar. hx.ProgressBar with the featureFlags.useUpdatedClass: true option. SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. modalCenter, modalRight and modalFullScreen modalCenter modalCenter hx object. SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. hx.Autocomplete (lowercase c) hx.autocomplete (lowercase c) Selection::api api Selection::api api Selection::api api hx object. hx.button(class) hx.i hx.group(options) hx.group(options) hx.group(options) hx.group(options) hx.section(options) hx.section(options) hx.noticeHead hx.noticeBody hx-notice-head hx.notifyDefaultTimeout hx.notifyLoading hx.notifyInfo hx.notifyWarning hx.notifyNegative hx.notifyPositive hx.sort methods have been renamed to explict functions: hx.compare, hx.compareNullsLast, hx.localeCompare hx.spinnerWide hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 <img> tags to <div> tags. <div> tags until support for <img> tags is removed. autocompleteData autocompleteOptions SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. modalCenter, modalRight and modalFullScreen modalCenter modalCenter hx object. SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. hx.Autocomplete (lowercase c) hx.autocomplete (lowercase c) Selection::api api Selection::api api Selection::api api hx object. hx.button(class) hx.i hx.group(options) hx.group(options) hx.group(options) hx.group(options) hx.section(options) hx.section(options) hx.noticeHead hx.noticeBody hx-notice-head hx.notifyDefaultTimeout hx.notifyLoading hx.notifyInfo hx.notifyWarning hx.notifyNegative hx.notifyPositive hx.sort methods have been renamed to explict functions: hx.compare, hx.compareNullsLast, hx.localeCompare hx.spinnerWide hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 <img> tags to <div> tags. <div> tags until support for <img> tags is removed. moreButton and dropdownButton as a replacement for the current hx.Menu SingleSelect component to merge the functionality of the AutocompletePicker and Picker and provide updated UX. modalCenter, modalRight and modalFullScreen functions to replace the existing modal class and functions. Alert module and APIs. hx.alert and hx.message alert and message methods use the default alert manager that creates a container within body close method. body close method. body SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. useUpdatedStructure feature flag to remove the collapsibles when displaying grouped content in menus modalCenter, modalRight and modalFullScreen modalCenter modalCenter modalCenter modalRight modalFullScreen hx object. SingleSelect component that merges Picker and AutocompletePicker functionality. SingleSelect component that merges Picker and AutocompletePicker functionality. <select> like element that uses an <input> for consistency and to allow for better form validation. hx.Autocomplete (lowercase c) hx.autocomplete (lowercase c) Selection::api api Selection::api api Selection::api api hx object. hx.button(class) hx.i hx.group(options) hx.group(options) hx.group(options) hx.group(options) hx.section(options) hx.section(options) hx.noticeHead hx.noticeBody hx-notice-head hx.notifyDefaultTimeout hx.notifyLoading hx.notifyInfo hx.notifyWarning hx.notifyNegative hx.notifyPositive hx.sort methods have been renamed to explict functions: hx.compare, hx.compareNullsLast, hx.localeCompare hx.spinnerWide hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 <img> tags to <div> tags. <div> tags until support for <img> tags is removed. hx-flag-typography - Updated font styles hx-flag-table - Updated table styles for readability hx-flag-tabs - Updated table styles for readability hx-flag-form - Updated form style (improved layout) hx-flag-button - New button types (primary/secondary etc.) hx-flag-tag-input - Initial tweaks to work with hx-flag-form hx-flag-icon - Use FontAwesome 5 (free) instead of embedded hexagon-icons font hx.Form where elements added with addButton could not be retrieved with .node(...) addButton could not be retrieved with .node(...) autocompleteData autocompleteOptions hx-input etc. Inputs and the hx-flag-button class. input tag which will be removed in the next major release hx-compact-group instead of a hx-group hx.group(options) hx.group(options) hx.group(options) hx.group(options) hx.section(options) hx.section(options) hx-table-clickable-rows ) hx-table-small ) hx.Autocomplete (lowercase c) hx.autocomplete (lowercase c) Selection::api api Selection::api api Selection::api api hx object. hx.button(class) hx.i hx object. hx.noticeHead hx.noticeBody hx-notice-head hx.notifyDefaultTimeout hx.notifyLoading hx.notifyInfo hx.notifyWarning hx.notifyNegative hx.notifyPositive hx.sort methods have been renamed to explict functions: hx.compare, hx.compareNullsLast, hx.localeCompare hx.spinnerWide hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 <img> tags to <div> tags. <div> tags until support for <img> tags is removed. Intl library when working with the preferences and date/time pickers. hx.preferences.setup({
featureFlags: {
useIntlFormat: true,
},
})Europe/London) and RFC5456 locale (e.g. en-GB) support. DatePicker, TimePicker and DateTimePicker to use the Intl API for localization of the on-screen dates and times instead of the moment.js or default (UK English) variant. hx.Autocomplete (lowercase c) hx.autocomplete (lowercase c) Selection::api api Selection::api api Selection::api api hx object. hx.button(class) hx.i hx.group(options) hx.group(options) hx.group(options) hx.group(options) hx.section(options) hx.section(options) hx object. hx.noticeHead hx.noticeBody hx-notice-head hx.notifyDefaultTimeout hx.notifyLoading hx.notifyInfo hx.notifyWarning hx.notifyNegative hx.notifyPositive hx.sort methods have been renamed to explict functions: hx.compare, hx.compareNullsLast, hx.localeCompare hx.spinnerWide hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 <img> tags to <div> tags. <div> tags until support for <img> tags is removed. hx.Autocomplete (lowercase c) hx.autocomplete (lowercase c) Selection::api api Selection::api api Selection::api api hx object. hx.button(class) hx.i hx.group(options) hx.group(options) hx.group(options) hx.group(options) hx.section(options) hx.section(options) hx object. hx.noticeHead hx.noticeBody hx-notice-head hx.notifyDefaultTimeout hx.notifyLoading hx.notifyInfo hx.notifyWarning hx.notifyNegative hx.notifyPositive hx.sort methods have been renamed to explict functions: hx.compare, hx.compareNullsLast, hx.localeCompare hx.spinnerWide hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 <img> tags to <div> tags. <div> tags until support for <img> tags is removed. autocompleteData autocompleteOptions hx.Autocomplete (lowercase c) hx.autocomplete (lowercase c) Selection::api api Selection::api api Selection::api api hx object. hx.button(class) hx.i hx.group(options) hx.group(options) hx.group(options) hx.group(options) hx.section(options) hx.section(options) hx object. hx.noticeHead hx.noticeBody hx-notice-head hx.notifyDefaultTimeout hx.notifyLoading hx.notifyInfo hx.notifyWarning hx.notifyNegative hx.notifyPositive hx.sort methods have been renamed to explict functions: hx.compare, hx.compareNullsLast, hx.localeCompare hx.spinnerWide hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 <img> tags to <div> tags. <div> tags until support for <img> tags is removed. autocompleteData autocompleteOptions hx.Autocomplete (lowercase c) hx.autocomplete (lowercase c) Selection::api api Selection::api api Selection::api api hx object. hx.button(class) hx.i hx.group(options) hx.group(options) hx.group(options) hx.group(options) hx.section(options) hx.section(options) hx object. hx.noticeHead hx.noticeBody hx-notice-head hx.notifyDefaultTimeout hx.notifyLoading hx.notifyInfo hx.notifyWarning hx.notifyNegative hx.notifyPositive hx.sort methods have been renamed to explict functions: hx.compare, hx.compareNullsLast, hx.localeCompare hx.spinnerWide hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 <img> tags to <div> tags. <div> tags until support for <img> tags is removed. import { DatePicker } from 'hexagon-js';build api for creating a bundle was removed ColorPicker was removed hx.theme replaced by hx.theme() (find/replace resolves this) hx.Autocomplete (lowercase c) hx.autocomplete (lowercase c) hx-btn as well as a container with buttons inside hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline Selection::api api Selection::api api Selection::api api Selection that will be automatically appended to the dropdown content. Selection::html. It is still possible to pass in a string which will continue to work when this function is updated to use Selection::text hx object. array = ['Bob Stevenson', 'Steve Stevenson', 'Dave Peters']
hx.filterFuzzy(array, 'ss') // returns ['Steve Stevenson', 'Bob Stevenson'] as the match in Steve Stevenson is stronger.[
'contains',
'exact'
'excludes',
'startsWith'
'regex',
'fuzzy'
][
'exact',
'greater',
'less'
]hx.button(class) hx.i <i> element wrapped in a selection autocompleteData autocompleteOptions hx.group(options) hx.group(options) hx.group(options) hx.group(options) hx.section(options) hx.section(options) hx object. hx.noticeHead hx.noticeBody hx-notice-head hx.notifyDefaultTimeout hx.notifyDefaultTimeout hx.notifyLoading hx.notifyInfo hx.notifyWarning hx.notifyNegative hx.notifyPositive loading method. info method. warning method. negative method. positive method. hx.theme().plot - This is a breaking change html method for selections has been removed to prevent XSS attacks. html method for selections has been removed to prevent XSS attacks. hx.sort methods have been renamed to explict functions: hx.compare, hx.compareNullsLast, hx.localeCompare array = ['20','1','100']
array.sort() // returns ['1', '100', '20']
array.sort(hx.sort.compare) // returns ['1', '20', '100']locale and options parameters. locale and options parameters can be found on the svCompare = hx.sort.localeCompare('sv')
array.sort(svCompare)function(a, b){
return hx.sort.localeCompare(a, b, 'sv')
};hx.spinnerWide hx.mergeDefined // returns {'a': 1, 'b': 3}
hx.mergeDefined({'a': 1}, {'a': undefined}, {'b': 3})
// returns {a: {b: 2, c: {d: 4, e: 'value'}}}
hx.mergeDefined({a: {b: 2, c: {d: 3}}}, {a: {b: undefined, c: {d: 4, e: 'value'}}})hx.shallowMergeDefined // returns {'a': 1, 'b': 3}
hx.shallowMergeDefined({'a': 1}, {'a': undefined}, {'b': 3})
// returns {a: {b: undefined, c: {d: 4, e: "value" }}}
hx.shallowMergeDefined({a: {b: 2, c: {d: 3}}}, {a: {b: undefined, c: {d: 4, e: 'value'}}})html method for selections has been removed to prevent XSS attacks. padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 <img> tags to <div> tags. <div> tags until support for <img> tags is removed. Badges module to replace Labels and updated the Error Pages and Layout module in preparation for version 2.0.0. hx.userFacingText function/module. hx-primary hx-btn-link. This retains the spacing and styles the text as a link. disabled attribute to the button to prevent user interaction. hx-danger hx-success hx-btn-outline $param in. hx.userFacingText(module, key, parameters) to replace the parameters immediately or call hx.userFacingText(module, key, true) if you need to retain the current functionality and hide the warning. hx.userFacingText('example', 'plural-key', [
[null, 0, 'Value Zero'],
[1, 1, 'Value Singular'],
[2, 2, 'Value Two'],
[3, null, 'Value $n']
])
hx.userFacingText('example', 'plural-key')
hx.userFacingText('example', 'plural-key', { n: 1 })
// => 'Value Singular'
hx.userFacingText('example', 'plural-key', { n: 0 })
// => 'Value Zero'
hx.userFacingText('example', 'plural-key', { n: 2 })
// => 'Value Two'
hx.userFacingText('example', 'plural-key', { n: 100 })
// => 'Value 100'\n characters into a selection containing span elements separated by br elements padding option. padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 html method for selections has been removed to prevent XSS attacks. <img> tags to <div> tags. <div> tags until support for <img> tags is removed. hx-notice-head padding option. page when updating the paginator value. Set to false when wrapping with another component that should control the currently active page. aria-label on the container to enable screen readers to navigate using the paginator aria-label on the current page to enable screen readers to navigate using the paginator $page which will be replaced by the paginator when rendering (e.g. 'XXX $page XXX' would be converted to 'XXX 4 XXX' aria-label on the numeric page buttons to enable screen readers to navigate using the paginator $page which will be replaced by the paginator when rendering (e.g. 'XXX $page XXX' would be converted to 'XXX 4 XXX' aria-label on the previous page button to enable screen readers to navigate using the paginator $page which will be replaced by the paginator when rendering (e.g. 'XXX $page XXX' would be converted to 'XXX 4 XXX' aria-label on the next page button to enable screen readers to navigate using the paginator $page which will be replaced by the paginator when rendering (e.g. 'XXX $page XXX' would be converted to 'XXX 4 XXX' padding option. padding option. value for consitency with other Hexagon events. This property will be removed in version 2.0.0 hx-btn-outline html method for selections has been removed to prevent XSS attacks. <img> tags to <div> tags. <div> tags until support for <img> tags is removed. hx-notice-head hx-btn-outline html method for selections has been removed to prevent XSS attacks. <img> tags to <div> tags. <div> tags until support for <img> tags is removed. hx-notice-head hx-btn-outline html method for selections has been removed to prevent XSS attacks. <img> tags to <div> tags. <div> tags until support for <img> tags is removed. hx-notice-head fetch instead of hx.request ). Making these changes in advance of the upcoming major release will make transitioning much easier. mustMatch threw an error and broke the dropdown when pressing enter before the data is returned. options argument to allow the button to be hidden or disabled when it is added to the form timezone string directly instead of needing the numeric offset [object Object] would be displayed when using object items in an autocomplete within the tag input. html method for selections has been removed to prevent XSS attacks. <img> tags to <div> tags. <div> tags until support for <img> tags is removed. hx-notice-head moment.js the week start will still be taken from the currently selected locale's week start. <img> tags to <div> tags. <div> tags until support for <img> tags is removed. hx-notice-head <img> tags to <div> tags. <div> tags until support for <img> tags is removed. <img> tags to <div> tags. <div> the new Logo expectation hx-notice-head hx.Meter and fixed a few bugs. hx-notice-head hx-notice-head Selection have been added for replacing DOM and setting the children of a Selection hx-notice-head hx-notice-head hx-notice-head PointerEvent has been disabled in this version because of an incompatibility with the Hexagon pointer events. Native support will be re-introduced in the next major release. div elements span elements hx-notice-head hx-notice-head hx-notice-head notify method. loading method. info method. warning method. negative method. positive method. notify method. loading method. info method. warning method. negative method. positive method. hx.preferences when not using Moment.js hx-notice-head disabled context class to hx.palette.context hx-notice-head hx-notice-head redrawOnResize value undefined values hx-notice-head compact mode, including adding a compact 'menu' to reduce the amount of space data tables take up when in compact mode advancedSearchEnabled is true or an advancedSearch is passed in, this is set to true. advancedSearch is passed in, this is set to true. If filterEnabled is set to false and this is set to true, the advanced search will be shown on it's own with no toggle for switching the filter type. See the Using the Advanced Search section at the bottom of the page for more information on the advanced search showAdvancedSearch and advancedSearchEnabled are both set to true, showing and enabling the advanced search. See the Using the Advanced Search section at the bottom of the page for more information on the advanced search hx.sort.compare to provide better sorting hx-notice-head loadingMessage and pleaseEnterMinCharactersMessage hx-notice-head moment moment as moment doesn't guess the current locale correctly noResultsMessage is retrieved from the userFacingText module '$minLength' variable, e.g. options = {
minLength: 3,
pleaseEnterMinCharactersMessage = 'Please enter $minLength characters'
}
// Evaluates to 'Please enter 3 characters'noResultsMessage is retrieved from the userFacingText module '$minLength' variable, e.g. options = {
minLength: 3,
pleaseEnterMinCharactersMessage = 'Please enter $minLength characters'
}
// Evaluates to 'Please enter 3 characters'noResultsMessage is retrieved from the userFacingText module '$minLength' variable, e.g. options = {
minLength: 3,
pleaseEnterMinCharactersMessage = 'Please enter $minLength characters'
}
// Evaluates to 'Please enter 3 characters'noResultsMessage is retrieved from the userFacingText module '$minLength' variable, e.g. options = {
minLength: 3,
pleaseEnterMinCharactersMessage = 'Please enter $minLength characters'
}
// Evaluates to 'Please enter 3 characters''$total' variables can be substituted in, e.g for a table with 3 rows and 1 row selected: options = {
selectedRowsText: '$selected of $total selected.'
}
// Would evalate to '1 of 3 selected.'filesSelectedText . hx.palette.context(selection, undefined) would return undefined instead of the selection. This was introduced accidentally as part of 1.3.0. shallowSelect functionality as well as a new File Input module. [
"Bob",
"Steve",
...
]inputMap must be provided in the options: data = [
{
name "Bob",
age: 21
},
{
name: "Steve",
age: 25
}
]
options = {
inputMap: function(item){
return item.name + ', ' + item.age
}
}renderer and filterOptions.searchValues can also be specified to change how the text is displayed and what data is searchable, independent of the inputMap var data = function(term, callback){
hx.json('path/to/data?search='+term, function (e, r) {
callback(r.responseText)
})
}matchType to 'external': function data (term, callback) {
if (term.length > 0) {
return callback(townAndCountyData.filter(function (d) {
var d = townAndCountyData[_i]
var name = d.name.toLowerCase()
var term = term.toLowerCase()
var county = d.county.toLowerCase()
return name.indexOf(term) > -1 || county.indexOf(term) > -1)
}))
} else {
return callback([])
}
}
options.matchType = 'external'hidden(property, hidden) method. hidden(property, hidden) method. hidden(property, hidden) method. hidden(property, hidden) method. hidden(property, hidden) method. hidden(property, hidden) method. hidden(property, hidden) method. disabled(property, disabled) method. hidden(property, hidden) method. hidden(property, hidden) method. hidden(property, hidden) method. hidden(property, hidden) method. hidden(property, hidden) method. hidden(property, hidden) method. hx.graph as a fluid api version for creating graphs, added hx.text as a new wrapper for hx.request and made several bugfixes and improvements to the underlying code. containerClass option embedAssets option. .hx-complement instead alpha() to get and alpha(value) to set the alpha property. blue() to get and blue(value) to set the blue property. green() to get and green(value) to set the green property. hue() to get and hue(value) to set the hue property. The value returned from hue() and expected by hue(value) is an integer between 0 and 360 instead of a value between 0 and 1. lightness() to get and lightness(value) to set the lightness property. The value returned from hue() and expected by hue(value) is an integer between 0 and 100 instead of a value between 0 and 1. red() to get and red(value) to set the red property. saturation() to get and saturation(value) to set the saturation property. The value returned from hue() and expected by hue(value) is an integer between 0 and 100 instead of a value between 0 and 1. lighten(-value) instead. saturate(-value) instead. fade(value) instead. fade(-value) instead. textCol() instead. lightness(value) with a value between 0 and 100 instead of 0 and 1 saturation(value) with a value between 0 and 100 instead of 0 and 1 hsl(value) instead. rgb(value) instead. Drag Container module can be used as a replacement for the drag/drop functionality. Card module can be used as a replacement for the styles Drag Container module can be used as a replacement for the drag/drop functionality. Card module can be used as a replacement for the styles headerCellRenderer for each column renderSuppressed() instead renderSuppressed(value) instead disabled(true) instead. disabled(false) instead. disabled(true) instead. disabled(false) instead. .hx-complement instead closeWithShadeEnabled and closeButtonEnabled .hx-complement instead hx.Paginator(selector, options) // adds the 'hx-positive' class to the element, and removes all other context classes
hx.palette.context('.my-element', 'positive')// gets the context of the element (by looking at the class of the element)
hx.palette.context('.my-element')// adds the 'hx-text-positive' class to the element, and removes all other text context classes
hx.palette.context('.my-element', 'positive')// gets the context of the element (by looking at the class of the element)
hx.palette.textContext('.my-element')// adds the 'hx-background-positive' class to the element, and removes all other background context classes
hx.palette.context('.my-element', 'positive')// gets the context of the element (by looking at the class of the element)
hx.palette.backgroundContext('.my-element')graph.addAxis(options) instead. hx.Axis(options) instead. Axis.x.visible() instead. Axis.x.visible() to get, Axis.x.visible(value) to set. Axis.x.formatter() instead. Axis.x.formatter() to get, Axis.x.formatter(value) to set. Axis.x.min() instead. Axis.x.min() to get, Axis.x.min(value) to set. Axis.x.max() instead. Axis.x.max() to get, Axis.x.max(value) to set. Axis.x.discretePadding() instead. Axis.x.discretePadding() to get, Axis.x.discretePadding(value) to set. Axis.x.discreteLabels() instead. Axis.x.discreteLabels() to get, Axis.x.discreteLabels(value) to set. Axis.x.tickSpacing() instead. Axis.x.tickSpacing() to get, Axis.x.tickSpacing(value) to set. Axis.x.title() instead. Axis.x.title() to get, Axis.x.title(value) to set. Axis.x.scalePaddingMin() instead. Axis.x.scalePaddingMin() to get, Axis.x.scalePaddingMin(value) to set. Axis.x.scalePaddingMax() instead. Axis.x.scalePaddingMax() to get, Axis.x.scalePaddingMax(value) to set. Axis.x.gridLines() instead. Axis.x.gridLines() to get, Axis.x.gridLines(value) to set. Axis.x.nthTickVisible() instead. Axis.x.nthTickVisible() to get, Axis.x.nthTickVisible(value) to set. Axis.y.visible() instead. Axis.y.visible() to get, Axis.y.visible(value) to set. Axis.y.formatter() instead. Axis.y.formatter() to get, Axis.y.formatter(value) to set. Axis.y.min() instead. Axis.y.min() to get, Axis.y.min(value) to set. Axis.y.max() instead. Axis.y.max() to get, Axis.y.max(value) to set. Axis.y.discretePadding() instead. Axis.y.discretePadding() to get, Axis.y.discretePadding(value) to set. Axis.y.discreteLabels() instead. Axis.y.discreteLabels() to get, Axis.y.discreteLabels(value) to set. Axis.y.tickSpacing() instead. Axis.y.tickSpacing() to get, Axis.y.tickSpacing(value) to set. Axis.y.title() instead. Axis.y.title() to get, Axis.y.title(value) to set. Axis.y.scalePaddingMin() instead. Axis.y.scalePaddingMin() to get, Axis.y.scalePaddingMin(value) to set. Axis.y.scalePaddingMax() instead. Axis.y.scalePaddingMax() to get, Axis.y.scalePaddingMax(value) to set. Axis.y.gridLines() instead. Axis.y.gridLines() to get, Axis.y.gridLines(value) to set. Axis.y.nthTickVisible() instead. Axis.y.nthTickVisible() to get, Axis.y.nthTickVisible(value) to set. addSeries(type, {title: "name"}) instead. Axis.x.axisTickLabelPosition() instead. Axis.x.axisTickLabelPosition() to get, Axis.x.axisTickLabelPosition(value) to set. Axis.y.axisTickLabelPosition() instead. Axis.y.axisTickLabelPosition() to get, Axis.y.axisTickLabelPosition(value) to set. Axis.x.showTicks() instead. Axis.x.showTicks() to get, Axis.x.showTicks(value) to set. Axis.y.showTicks() instead. Axis.y.showTicks() to get, Axis.y.showTicks(value) to set. series.title(name) to set the series name, series.title() to get the name. series.fillColor(color) to set the color, series.fillColor() to get the color. series.group(group) to set the series group, series.group() to get the group. series.data(data) to set new data, series.data() to get the current data. series.class(class) to set the series class, series.class() to get the class. series.title(name) to set the series name, series.title() to get the name. series.strokeEnabled(enabled) to set the state, series.strokeEnabled() to get it. series.strokeColor(color) to set the color, series.strokeColor() to get the color. series.fillEnabled(enabled) to set the state, series.fillEnabled() to get it. series.fillColor(color) to set the color, series.fillColor() to get the color. sampleThreshold() to get the feather value, sampleThreshold(value) to set it. series.markersEnabled(enabled) to set the state, series.markersEnabled() to get it. _new_markerRadius(radius) to set the radius, _new_markerRadius() to get the radius. seriesmarkerFillColor(color) to set the color, seriesmarkerFillColor() to get the color. series.group(name) to set the series group, series.group() to get the group. series.data(data) to set new data, series.data() to get the current data. series.strokeColor(color) to set the color, series.strokeColor() to get the color. series.class(class) to set the series class, series.class() to get the class. series.title(name) to set the series name, series.title() to get the name. series.fillColor(color) to set the color, series.fillColor() to get the color. series.sampleThreshold() to get the feather value, series.sampleThreshold(value) to set it. series.data(data) to set new data, series.data() to get the current data. series.fillColor(color) to set the color, series.fillColor() to get the color. series.class(class) to set the class, series.class() to get the class. series.title(name) to set the series name, series.title() to get the name. series.fillColor(color) to set the color, series.fillColor() to get the color. series.radius(size) to set the size, series.radius() to get the size. series.data(data) to set new data, series.data() to get the current data. series.class(class) to set the series class, series.class() to get the class. series.strokeColor(color) to set the color, series.strokeColor() to get the color. series.data(data) to set new data, series.data() to get the current data. series.class(class) to set the series class, series.class() to get the class. series.title(name) to set the series name, series.title() to get the name. !important flags. .hx-complement instead undefined to a selection no longer adds an <undefined> element to the DOM Selection instead of an Element The current behavior can be replicated using Selection.nodes.map .hx-complement instead disabled(true) instead. disabled(false) instead. <img /> tag inside this element will now need to use the hx-logo class to display the theme logo. renderSuppressed() instead renderSuppressed(value) instead graph.addAxis(options) instead. hx.Axis(options) instead. Axis.x.visible() instead. Axis.x.visible() to get, Axis.x.visible(value) to set. Axis.x.formatter() instead. Axis.x.formatter() to get, Axis.x.formatter(value) to set. Axis.x.min() instead. Axis.x.min() to get, Axis.x.min(value) to set. Axis.x.max() instead. Axis.x.max() to get, Axis.x.max(value) to set. Axis.x.discretePadding() instead. Axis.x.discretePadding() to get, Axis.x.discretePadding(value) to set. Axis.x.discreteLabels() instead. Axis.x.discreteLabels() to get, Axis.x.discreteLabels(value) to set. Axis.x.tickSpacing() instead. Axis.x.tickSpacing() to get, Axis.x.tickSpacing(value) to set. Axis.x.title() instead. Axis.x.title() to get, Axis.x.title(value) to set. Axis.x.scalePaddingMin() instead. Axis.x.scalePaddingMin() to get, Axis.x.scalePaddingMin(value) to set. Axis.x.scalePaddingMax() instead. Axis.x.scalePaddingMax() to get, Axis.x.scalePaddingMax(value) to set. Axis.x.gridLines() instead. Axis.x.gridLines() to get, Axis.x.gridLines(value) to set. Axis.x.nthTickVisible() instead. Axis.x.nthTickVisible() to get, Axis.x.nthTickVisible(value) to set. Axis.y.visible() instead. Axis.y.visible() to get, Axis.y.visible(value) to set. Axis.y.formatter() instead. Axis.y.formatter() to get, Axis.y.formatter(value) to set. Axis.y.min() instead. Axis.y.min() to get, Axis.y.min(value) to set. Axis.y.max() instead. Axis.y.max() to get, Axis.y.max(value) to set. Axis.y.discretePadding() instead. Axis.y.discretePadding() to get, Axis.y.discretePadding(value) to set. Axis.y.discreteLabels() instead. Axis.y.discreteLabels() to get, Axis.y.discreteLabels(value) to set. Axis.y.tickSpacing() instead. Axis.y.tickSpacing() to get, Axis.y.tickSpacing(value) to set. Axis.y.title() instead. Axis.y.title() to get, Axis.y.title(value) to set. Axis.y.scalePaddingMin() instead. Axis.y.scalePaddingMin() to get, Axis.y.scalePaddingMin(value) to set. Axis.y.scalePaddingMax() instead. Axis.y.scalePaddingMax() to get, Axis.y.scalePaddingMax(value) to set. Axis.y.gridLines() instead. Axis.y.gridLines() to get, Axis.y.gridLines(value) to set. Axis.y.nthTickVisible() instead. Axis.y.nthTickVisible() to get, Axis.y.nthTickVisible(value) to set. addSeries(type, {title: "name"}) instead. Axis.x.axisTickLabelPosition() instead. Axis.x.axisTickLabelPosition() to get, Axis.x.axisTickLabelPosition(value) to set. Axis.y.axisTickLabelPosition() instead. Axis.y.axisTickLabelPosition() to get, Axis.y.axisTickLabelPosition(value) to set. Axis.x.showTicks() instead. Axis.x.showTicks() to get, Axis.x.showTicks(value) to set. Axis.y.showTicks() instead. Axis.y.showTicks() to get, Axis.y.showTicks(value) to set. series.title(name) to set the series name, series.title() to get the name. series.fillColor(color) to set the color, series.fillColor() to get the color. series._new_group('group-name') to set the group, series.new_group() to get the group. The _new_ prefix will be dropped in 1.0.0 - it is required to avoid naming clash with existing properties until then. series.data(data) to set new data, series.data() to get the current data. series._new_class(class) to set the title. This method will be renamed to series.class() in 1.0.0. The _new_ prefix is required to avoid naming clash with existing properties. To get the class use series._new_class() . series.title(name) to set the series name, series.title() to get the name. series.strokeEnabled(enabled) to set the state, series.strokeEnabled() to get it. series.strokeColor(color) to set the color, series.strokeColor() to get the color. series.fillEnabled(enabled) to set the state, series.fillEnabled() to get it. series._new_fillColor(color) to set the color, series._new_fillColor() to get the color. sampleThreshold() to get the feather value, sampleThreshold(value) to set it. series.markersEnabled(enabled) to set the state, series.markersEnabled() to get it. _new_markerRadius(radius) to set the radius, _new_markerRadius() to get the radius. seriesmarkerFillColor(color) to set the color, seriesmarkerFillColor() to get the color. series._new_group('group-name') to set the group, series.new_group() to get the group. The _new_ prefix will be dropped in 1.0.0 - it is required to avoid naming clash with existing properties until then. series.data(data) to set new data, series.data() to get the current data. series.strokeColor(color) to set the color, series.strokeColor() to get the color. series._new_class(class) to set the title. This method will be renamed to series.class() in 1.0.0. The _new_ prefix is required to avoid naming clash with existing properties. To get the class use series._new_class() . series.title(name) to set the series name, series.title() to get the name. series.fillColor(color) to set the color, series.fillColor() to get the color. sampleThreshold() to get the feather value, sampleThreshold(value) to set it. series.data(data) to set new data, series.data() to get the current data. series.fillColor(color) to set the color, series.fillColor() to get the color. series._new_class(class) to set the title. This method will be renamed to series.class() in 1.0.0. The _new_ prefix is required to avoid naming clash with existing properties. To get the class use series._new_class() . series.title(name) to set the series name, series.title() to get the name. series.fillColor(color) to set the color, series.fillColor() to get the color. series.radius(size) to set the size, series.radius() to get the size. series.data(data) to set new data, series.data() to get the current data. series._new_class(class) to set the title. This method will be renamed to series.class() in 1.0.0. The _new_ prefix is required to avoid naming clash with existing properties. To get the class use series._new_class() . series.strokeColor(color) to set the color, series.strokeColor() to get the color. series.data(data) to set new data, series.data() to get the current data. series._new_class(class) to set the title. This method will be renamed to series.class() in 1.0.0. The _new_ prefix is required to avoid naming clash with existing properties. To get the class use series._new_class() . series.title(name) to set the series name, series.title() to get the name. alpha() to get and alpha(value) to set the alpha property. blue() to get and blue(value) to set the blue property. green() to get and green(value) to set the green property. hue() to get and hue(value) to set the hue property. The value returned from hue() and expected by hue(value) is an integer between 0 and 360 instead of a value between 0 and 1. lightness() to get and lightness(value) to set the lightness property. The value returned from hue() and expected by hue(value) is an integer between 0 and 100 instead of a value between 0 and 1. red() to get and red(value) to set the red property. saturation() to get and saturation(value) to set the saturation property. The value returned from hue() and expected by hue(value) is an integer between 0 and 100 instead of a value between 0 and 1. lighten(-value) instead. saturate(-value) instead. fade(value) instead. textCol() instead. lightness(value) with a value between 0 and 100 instead of 0 and 1 saturation(value) with a value between 0 and 100 instead of 0 and 1 hsl(value) instead. rgb(value) instead. Drag Container module can be used as a replacement for the drag/drop functionality. Card module can be used as a replacement for the styles Drag Container module can be used as a replacement for the drag/drop functionality. Card module can be used as a replacement for the styles disabled(true) instead. disabled(false) instead. disabled(true) instead. disabled(false) instead. disabled(true) instead. disabled(false) instead. <h1> element. <h2> element. <h3> element. alpha() to get and alpha(value) to set the alpha property. blue() to get and blue(value) to set the blue property. green() to get and green(value) to set the green property. hue() to get and hue(value) to set the hue property. The value returned from hue() and expected by hue(value) is an integer between 0 and 360 instead of a value between 0 and 1. lightness() to get and lightness(value) to set the lightness property. The value returned from hue() and expected by hue(value) is an integer between 0 and 100 instead of a value between 0 and 1. red() to get and red(value) to set the red property. saturation() to get and saturation(value) to set the saturation property. The value returned from hue() and expected by hue(value) is an integer between 0 and 100 instead of a value between 0 and 1. lighten(-value) instead. saturate(-value) instead. fade(value) instead. textCol() instead. lightness(value) with a value between 0 and 100 instead of 0 and 1 saturation(value) with a value between 0 and 100 instead of 0 and 1 hsl(value) instead. rgb(value) instead. Drag Container module can be used as a replacement for the drag/drop functionality. Card module can be used as a replacement for the styles Drag Container module can be used as a replacement for the drag/drop functionality. Card module can be used as a replacement for the styles renderSuppressed() instead renderSuppressed(value) instead suppressRender as the name did not make it clear that it was a setter/getter. suppressRender as the name did not make it clear that it was a setter/getter. disabled(true) instead. disabled(false) instead. disabled(true) instead. disabled(false) instead. addSubmit(text, icon, submitAction) form.errorMessage('Text', 'Please enter something sensible') // Form will not validate with message 'Please enter something sensible'
form.errorMessage('Text', undefined) // Clears validation message.errorMessage method as well as inbuilt errors, such as those shown for required fields. undefined new hx.Graph(selector) will still work graph.addAxis(options) instead. hx.Axis(options) instead. Axis.x.visible() instead. Axis.x.visible() to get, Axis.x.visible(value) to set. Axis.x.formatter() instead. Axis.x.formatter() to get, Axis.x.formatter(value) to set. Axis.x.min() instead. Axis.x.min() to get, Axis.x.min(value) to set. Axis.x.max() instead. Axis.x.max() to get, Axis.x.max(value) to set. Axis.x.discretePadding() instead. Axis.x.discretePadding() to get, Axis.x.discretePadding(value) to set. Axis.x.discreteLabels() instead. Axis.x.discreteLabels() to get, Axis.x.discreteLabels(value) to set. Axis.x.tickSpacing() instead. Axis.x.tickSpacing() to get, Axis.x.tickSpacing(value) to set. Axis.x.title() instead. Axis.x.title() to get, Axis.x.title(value) to set. Axis.x.scalePaddingMin() instead. Axis.x.scalePaddingMin() to get, Axis.x.scalePaddingMin(value) to set. Axis.x.scalePaddingMax() instead. Axis.x.scalePaddingMax() to get, Axis.x.scalePaddingMax(value) to set. Axis.x.gridLines() instead. Axis.x.gridLines() to get, Axis.x.gridLines(value) to set. Axis.x.nthTickVisible() instead. Axis.x.nthTickVisible() to get, Axis.x.nthTickVisible(value) to set. Axis.y.visible() instead. Axis.y.visible() to get, Axis.y.visible(value) to set. Axis.y.formatter() instead. Axis.y.formatter() to get, Axis.y.formatter(value) to set. Axis.y.min() instead. Axis.y.min() to get, Axis.y.min(value) to set. Axis.y.max() instead. Axis.y.max() to get, Axis.y.max(value) to set. Axis.y.discretePadding() instead. Axis.y.discretePadding() to get, Axis.y.discretePadding(value) to set. Axis.y.discreteLabels() instead. Axis.y.discreteLabels() to get, Axis.y.discreteLabels(value) to set. Axis.y.tickSpacing() instead. Axis.y.tickSpacing() to get, Axis.y.tickSpacing(value) to set. Axis.y.title() instead. Axis.y.title() to get, Axis.y.title(value) to set. Axis.y.scalePaddingMin() instead. Axis.y.scalePaddingMin() to get, Axis.y.scalePaddingMin(value) to set. Axis.y.scalePaddingMax() instead. Axis.y.scalePaddingMax() to get, Axis.y.scalePaddingMax(value) to set. Axis.y.gridLines() instead. Axis.y.gridLines() to get, Axis.y.gridLines(value) to set. Axis.y.nthTickVisible() instead. Axis.y.nthTickVisible() to get, Axis.y.nthTickVisible(value) to set. addSeries(type, {title: "name"}) instead. Axis.x.axisTickLabelPosition() instead. Axis.x.axisTickLabelPosition() to get, Axis.x.axisTickLabelPosition(value) to set. Axis.y.axisTickLabelPosition() instead. Axis.y.axisTickLabelPosition() to get, Axis.y.axisTickLabelPosition(value) to set. Axis.x.showTicks() instead. Axis.x.showTicks() to get, Axis.x.showTicks(value) to set. Axis.y.showTicks() instead. Axis.y.showTicks() to get, Axis.y.showTicks(value) to set. series.title(name) to set the series name, series.title() to get the name. series.fillColor(color) to set the color, series.fillColor() to get the color. series._new_group('group-name') to set the group, series.new_group() to get the group. The _new_ prefix will be dropped in 1.0.0 - it is required to avoid naming clash with existing properties until then. series.data(data) to set new data, series.data() to get the current data. series._new_class(class) to set the title. This method will be renamed to series.class() in 1.0.0. The _new_ prefix is required to avoid naming clash with existing properties. To get the class use series._new_class() . series.title(name) to set the series name, series.title() to get the name. series.strokeEnabled(enabled) to set the state, series.strokeEnabled() to get it. series.strokeColor(color) to set the color, series.strokeColor() to get the color. series.fillEnabled(enabled) to set the state, series.fillEnabled() to get it. series._new_fillColor(color) to set the color, series._new_fillColor() to get the color. sampleThreshold() to get the feather value, sampleThreshold(value) to set it. series.markersEnabled(enabled) to set the state, series.markersEnabled() to get it. _new_markerRadius(radius) to set the radius, _new_markerRadius() to get the radius. seriesmarkerFillColor(color) to set the color, seriesmarkerFillColor() to get the color. series._new_group('group-name') to set the group, series.new_group() to get the group. The _new_ prefix will be dropped in 1.0.0 - it is required to avoid naming clash with existing properties until then. series.data(data) to set new data, series.data() to get the current data. series.strokeColor(color) to set the color, series.strokeColor() to get the color. series._new_class(class) to set the title. This method will be renamed to series.class() in 1.0.0. The _new_ prefix is required to avoid naming clash with existing properties. To get the class use series._new_class() . series.title(name) to set the series name, series.title() to get the name. series.fillColor(color) to set the color, series.fillColor() to get the color. sampleThreshold() to get the feather value, sampleThreshold(value) to set it. series.data(data) to set new data, series.data() to get the current data. series.fillColor(color) to set the color, series.fillColor() to get the color. series._new_class(class) to set the title. This method will be renamed to series.class() in 1.0.0. The _new_ prefix is required to avoid naming clash with existing properties. To get the class use series._new_class() . series.title(name) to set the series name, series.title() to get the name. series.fillColor(color) to set the color, series.fillColor() to get the color. series.radius(size) to set the size, series.radius() to get the size. series.data(data) to set new data, series.data() to get the current data. series._new_class(class) to set the title. This method will be renamed to series.class() in 1.0.0. The _new_ prefix is required to avoid naming clash with existing properties. To get the class use series._new_class() . series.strokeColor(color) to set the color, series.strokeColor() to get the color. series.data(data) to set new data, series.data() to get the current data. series._new_class(class) to set the title. This method will be renamed to series.class() in 1.0.0. The _new_ prefix is required to avoid naming clash with existing properties. To get the class use series._new_class() . series.title(name) to set the series name, series.title() to get the name. new hx.PieChart(selector) will still work disabled(true) instead. disabled(false) instead. returnArray is true. {
headers: function (cb) { ... }
totalCount: function (cb) { ... }
rows: function (range, cb) { ... }
rowsForIds: function (ids, cb) { ... }
}hx.dataTable object. A data table expects data to be returned in the callback of each function with a specific value. If a custom feed is created, it must return the values expected by the table. hx.Picker(selector, options) instead. hx.select(window).on(...) AutoComplete::suppressed(eventName, suppress). This is part of the Event Emitter api. dropdown.hidestart or dropdown.hideend event instead. AutoComplete::suppressed(eventName, suppress). This is part of the Event Emitter api. dropdown.hidestart or dropdown.hideend event instead. hx.Collapsible(selector, options) instead. showend or hideend to listen for when the animations have finished on show/hide. hidestart instead showstart instead hx.initializeCollapsibles instead. hx.ColorPicker(selector, options) instead. hx.DatePicker(selector, options) instead. locale(locale) instead. datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api. datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api range(range, dontSetupInput) instead. hx.DateTimePicker(selector, options) instead. datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api locale(locale) instead. timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api hx.Dropdown(selector, dropdownContent, options) instead. showstart instead. hidestart instead. hx.validateForm(selector, options) instead. hx.Menu(selector, options) instead. menu.renderer(render) to set the renderer instead. hx.Menu.items to set the items to an empty array instead. change event instead. highlight event instead. hx.MorphSection(selector, options) instead. hx.notify(message, options) instead. hx.notify(message, options) instead, setting options.timeout as undefined hx.notify.info(message, options) instead. hx.notify.warning(message, options) instead. hx.notify.negative(message, options) instead. hx.notify.positive(message, options) instead. hx.notify object, e.g. hx.notify(message, options) or hx.notify.info(message, options) etc. min(value) instead. max(value) instead. pageCount(value) instead visibleCount(value) instead data(data) instead. hx.Picker(selector, options) instead. f function. Use Selection.forEach(f) instead. hx.Sidebar(selector, options) instead. hx.TimePicker(selector, options) instead. timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api locale(locale) instead. timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api hx.TimeSlider.min/max instead. active(selector) instead. contextClass(class) instead. items(data) to set the data and renderer(render) to set the renderer or pass in options to the constructor. hx.Tree(selector, options) instead. hx.initializeTrees instead. items when setting data instead of module-specific names). suppressed method as part of event emitters. Modules that use the 'on' method now all have the ability to have their events suppressed/un-suppressed with this method and modules that previously used a function argument to suppress events have had this functionality deprecated, to be replaced with the suppressed method. AutoComplete::suppressed(eventName, suppress). This is part of the Event Emitter api. dropdown.hidestart or dropdown.hideend event instead. AutoComplete::suppressed(eventName, suppress). This is part of the Event Emitter api. dropdown.hidestart or dropdown.hideend event instead. [
'Button Text', // Strings and objects can be mixed if required
{
value: 'Button Text' // If objects are used, the value property is required
},
{
value: 'Button Text',
activeClass: 'hx-positive' // The activeClass property is optional.
}
]function(node, data, current) {
hx.select(node).text(data.value != null ? data.value : data);
};[
'Button Text', // Strings and objects can be mixed if required
{
value: 'Button Text' // If objects are used, the value property is required
},
{
value: 'Button Text',
activeClass: 'hx-positive' // The activeClass property is optional.
}
]function(node, data, current) {
hx.select(node).text(data.value != null ? data.value : data);
};hx.initializeToggleButtons. Toggle buttons must now be explicitly created with the hx.ToggleButton class. hx.Collapsible(selector, options) instead. showend or hideend to listen for when the animations have finished on show/hide. hidestart instead showstart instead hx.initializeCollapsibles instead. showInputs and currentColor to be accessible as options.showInputs and value() value(color) method. hx.ColorPicker(selector, options) instead. options argument to the constructor locale(locale) instead. datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api. datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api range(range, dontSetupInput) instead. datepicker.validRange({start: new Date}); // User can select any date after today
datepicker.validRange({start: undefined, end: new Date()}); // User can select any date before today
datepicker.validRange({start: new Date(), end: new Date()}); // User can only select today
datepicker.validRange({}); // Clear valid range (all dates are valid)selectRange argument was passed into the constructor. datepicker.locale('pl') // sets the datepicker's locale to Polandhx.DatePicker(selector, options) instead. hx.DateTimePicker(selector, options) instead. datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api datepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api locale(locale) instead. timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api datetimepicker.locale('pl') // sets the datetimepicker's locale to Polandhx.Dropdown(selector, dropdownContent, options) instead. showstart instead. hidestart instead. tagInputOptions instead. tagInputOptions instead. datePickerOptions instead. dateTimePickerOptions instead. dateTimePickerOptions instead. hx.validateForm(selector, options) instead. hx.select('#form').select('button').on('click', function (event){
event.preventDefault(); // Stops the form from submitting natively
var validObj = hx.validateForm('#form');
if(validObj.valid){
// Do something on success
}
// Do nothing if the form isn't valid (as the validateForm function will show a message)
});hx.Menu(selector, options) instead. menu.renderer(render) to set the renderer instead. hx.Menu.items to set the items to an empty array instead. menu = new hx.Menu('#selector');
menu.renderer(function(elem, item){
// do your render stuff
});
menu.render(data);change event instead. highlight event instead. hx.MorphSection(selector, options) instead. hx.notify object, e.g. hx.notify(message, options) or hx.notify.info(message, options) etc. hx.notify(message, options) instead. hx.notify(message, options) instead, setting options.timeout as undefined hx.notify.info(message, options) instead. hx.notify.warning(message, options) instead. hx.notify.negative(message, options) instead. hx.notify.positive(message, options) instead. hx.notify object, e.g. hx.notify(message, options) or hx.notify.info(message, options) etc. notify method. info method. loading method. warning method. negative method. positive method. min(value) instead. max(value) instead. pageCount(value) instead visibleCount(value) instead !important flag to the styles added by palette to make sure when the palette classes are added, the colors are applied. data(data) instead. hx.Select(selector, options) instead. hx.Sidebar(selector, options) instead. options.renderer instead. function (slider, elem, value) {
hx.select(elem).text(hx.format.fixed(2)(value));
}discreteValues instead hx.TimePicker(selector, options) instead. timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api locale(locale) instead. timepicker.suppressed(eventName, suppress) to suppress events. This is part of the Event Emitter api timepicker.locale('pl') // sets the timepicker's locale to Polandhx.TimeSlider.min/max instead. function (slider, elem, value) {
hx.select(elem).text(slider.formatter(new Date(value)));
}active(selector) instead. contextClass(class) instead. items(data) to set the data and renderer(render) to set the renderer or pass in options to the constructor. hx.Tree(selector, options) instead. hx.initializeTrees instead. // returns {'a': 2, 'b': 3}
hx.merge({'a': 1}, {'a': 2}, {'b': 3})
// returns {a: {b: 'hello', c: {d: 4, e: 'value'}}}
hx.merge({a: {b: 2, c: {d: 3}}}, {a: {b: 'hello', c: {d: 4, e: 'value'}}})// returns {'a': 1, 'b': 3}
hx.merge.defined({'a': 1}, {'a': undefined}, {'b': 3})
// returns {a: {b: 2, c: {d: 4, e: 'value'}}}
hx.merge.defined({a: {b: 2, c: {d: 3}}}, {a: {b: undefined, c: {d: 4, e: 'value'}}})// returns {'a': 2, 'b': 3}
hx.shallowMerge({'a': 1}, {'a': 2}, {'b': 3})
// returns {a: {b: 'hello', c: {d: 4, e: 'value'}}}
hx.shallowMerge({a: {b: 2, c: {d: 3}}}, {a: {b: 'hello', c: {d: 4, e: 'value'}}})// returns {'a': 1, 'b': 3}
hx.shallowMerge.defined({'a': 1}, {'a': undefined}, {'b': 3})
// returns {a: {b: undefined, c: {d: 4, e: "value" }}}
hx.shallowMerge.defined({a: {b: 2, c: {d: 3}}}, {a: {b: undefined, c: {d: 4, e: 'value'}}})hx.isBoolean("i am a string") // returns false
hx.isBoolean({}) // returns false
hx.isBoolean(document.createElement('div')) // returns false
hx.isBoolean([]) // returns false
hx.isBoolean(123) // returns false
hx.isBoolean(function(){}) // returns false
hx.isBoolean(true) // returns true
hx.isBoolean(false) // returns truef function Use Selection.forEach(f) instead. hx.Select(selector, options) instead. f function Use Selection.forEach(f) instead. hx.DatePicker(selector, options) instead. hx.DatePicker(selector, options) instead. hx.Select(selector, options) instead. f function Use Selection.forEach(f) instead. hx.Select(selector, options) instead. f function Use Selection.forEach(f) instead. hx.DatePicker(selector, options) instead. hx.Select(selector, options) instead. text.attr('xlink:href', '#curvePath')text.style('color', undefined)f function Use Selection.forEach(f) instead. hx.DatePicker(selector, options) instead. on method of event emitters) have been namespaced to prevent external events overwriting hexagon functionality and vice versa. Events have been namespaced with hx.<module-name>, e.g. for the Button Group module: element.on('click', 'hx.button-group', function () {
// handle event
})hx.DatePicker(selector, options) instead. rowSelectableLookup function to determine whether a row is selectable after it has been clicked and added the ability to disable row selection entirely using the unselectable property in the row data. f function Use Selection.forEach(f) instead. hx.DatePicker(selector, options) instead. date(date, retainTime, suppressCallback) instead. page(page) to set the page. allowHeaderWrap setting for individual columns using the allowWrap property. date(date, retainTime, suppressCallback) instead. form.component(property) to the Form Builder as a method of getting the component for a property of the form (e.g. a tag input). As part of this process, components stored in the 'extras' object have been removed and are no longer accessible with form.properties.get('Name of Property').extras.<componentType>.
Updated the DatePicker, TimePicker and DateTimePicker to include events for when the dropdown is shown/hidden and in the case of the DateTimePicker, individual events for when the date or time is changed, shown or hidden. form.properties.get('Name of Property').extras.<componentType> as the way to get the component for a form element. form.component('Name of Property') instead. hx.DatePicker(selector, options) instead. hx.DatePicker(selector, options) instead. hx.DatePicker(selector, options) instead. hx.Maps and hx.Sets can now deal with objects that evaluate to the same value when toString is called on them. hx.select('#form').select('button').on('click', function (event){
event.preventDefault(); // Stops the form from submitting natively
var validObj = hx.validateForm('#form');
if(validObj.valid){
// Do something on success
}
// Do nothing if the form isn't valid (as the validateForm function will show a message)
});var value = component.getValue()
component.setValue(100)var value = component.value()
component.value(100)selection.on('resize', function (e) {
console.log('resized!')
})showDragControl option is true, this option does not need to be set. date(date, dontSetupInput, suppressCallback) instead. day(day, suppressCallback) instead. month(month, suppressCallback) instead. year(year, suppressCallback) instead. range(date1, date2, dontSetupInput, suppressCallback) instead. date() instead. range() instead. selectRange argument was passed into the constructor. selectRange argument was passed into the constructor. date(date, setTime, suppressCallback) instead. day(day, suppressCallback) instead. month(month, suppressCallback) instead. year(year, suppressCallback) instead. hour(hour, suppressCallback) instead. minute(minute, suppressCallback) instead. second(second, suppressCallback) instead. date() instead. hour() instead. minute() instead. second() instead. moment.locale . DateTimePicker.update('pl') // sets the DateTimePicker's locale to Poland without affecting the rest of the page.moment.locale('pl') // sets the page locale to Poland
DateTimePicker.update() // refreshes the display of the selected DateTimePicker using moment.locale() of 'pl'enableSidebar method. enableSidebar has been called. enableSidebar has been called. enableSidebar has been called. eventEmitter.off('event-name', [callback])eventEmitter.off()data() instead. data(data) instead. add(item) instead. add(items) instead. hx.notify() instead. hx.notify.defaultTimeout(timeout) instead. hx.notify.defaultTimeout(timeout) instead. page(index) instead. page() instead. series.series.color = [
{
yValue: 0,
color: hx.theme.plot.negativeCol
},
{
yValue: 90,
color: '#555'
},
{
yValue: 110,
color: '#555'
},
{
yValue: 200,
color: hx.theme.plot.negativeCol
}
]series.series.color = [
{
yValue: 0,
color: hx.theme.plot.negativeCol
},
{
yValue: 90,
color: '#555'
},
{
yValue: 110,
color: '#555'
},
{
yValue: 200,
color: hx.theme.plot.negativeCol
}
]value(callback) instead. value(data, callback) instead. value(value) instead. value() instead. value(value) instead. date(date, setTime, suppressCallback) instead. hour(hour, suppressCallback) instead. minute(minute, suppressCallback) instead. second(second, suppressCallback) instead. date() instead. hour() instead. minute() instead. second() instead. moment.locale . TimePicker.update('pl') // sets the TimePicker's locale to Poland without affecting the rest of the page.moment.locale('pl') // sets the page locale to Poland
TimePicker.update() // refreshes the display of the selected TimePicker using moment.locale() of 'pl'value(value) instead. value() instead. value(value) instead. hx.Collapseable hx.initialiseCollapsibles table.options.defaultCompare = function(a, b) {
return a > b ? 1 : -1;
}table.options.columnCompare['age'] = function(a, b) {
return a > b ? 1 : -1;
}getSelected method. var values = [
{ text: 'Hue', value: 'hue' } ,
{ text: 'Saturation', value: 'saturation'},
{ text: 'Lightness', value: 'lightness'}
];
form.addSelect('Select', values, {required: true})NotificationManager.negative instead. <div> element for example. function handler (event) {
// do something
}
hx.select('#button').on('click', handler)
hx.select('#button').on('click', 'my-namespace', handler)
hx.select('#button').off('click')
hx.select('#button').off('click', 'my-namespace')
hx.select('#button').off('click', handler)
hx.select('#button').off('click', 'my-namespace', handler)new hx.Slider(selector, options) instead. setValue({startValue: <value>}) instead. setValue({endValue: <value>}) instead. getValue().startValue instead. getValue().endValue instead. setValue({startValue: <value>}) instead. setValue({endValue: <value>}) instead. getValue().startValue instead. getValue().endValue instead. new hx.TimeSlider(selector, options) instead. hx-btn-positive to hx-positive and converting from light/dark to compliment/contrast to make the theming of hexagon easier. hx.Collapseable (and similarly mispelt collapseables) have been deprecated in favor of the correct spelling, collapsible. hx-pad and hx-background-compliment to achieve the same effect. hx.initialiseCollapsibles hx.color(255, 255, 255)hx.color(255, 255, 255, 1)// old way
new hx.Dropdown(selector, mode, dropdownContent, align, spacing, matchWidth, ddClass)]
// new way
new hx.Dropdown(selector, dropdownContent, mode, align, spacing, matchWidth, ddClass)]// table data
data = {
head : {
columns: [
{value: "Column 1"},
{value: "Column 2"},
{value: "Column 3"}
]
},
body: [
[{value: 1, formatted: "1.0"}, {value: 4, formatted: "4.0"}, {value: 8, formatted: "8.0"}],
[{value: 7, formatted: "7.0"}, {value: 9, formatted: "9.0"}, {value: 3, formatted: "3.0"}],
[{value: 1, formatted: "1.0"}, {value: 8, formatted: "8.0"}, {value: 5, formatted: "5.0"}],
...
]
}
// the table can be instructed to, by default, use the 'value' property of the cell objects for sorting and filtering for:
options.defaultCellValueLookup = function(datum) {
return datum.value;
}// table data
data = {
head : {
columns: [
{value: "Column 1"},
{value: "Column 2"},
{value: "Column 3"}
]
},
body: [
[{value: 1, formatted: "1.0"}, {value: 4, formatted: "4.0"}, {value: 8, formatted: "8.0"}],
[{value: 7, formatted: "7.0"}, {value: 9, formatted: "9.0"}, {value: 3, formatted: "3.0"}],
[{value: 1, formatted: "1.0"}, {value: 8, formatted: "8.0"}, {value: 5, formatted: "5.0"}],
...
]
}
// the table can be instructed to use the 'value' property of the objects for sorting and filtering for 'Column 1' like this:
options.cellValueLookup = {
'Column 1': function(datum) {
return datum.value;
}
}// table data
data = {
head : {
columns: [
{value: "Column 1"},
{value: "Column 2"},
{value: "Column 3"}
]
},
body: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
...
]
}
// The table can be instructed to render values in 'Column 1' like this:
options.cellValueLookup = {
'Column 1': function(datum, element, index) {
return (datum != 1 ? datum + 's' : datum);
}
}NotificationManager.permanent or NotificationManager.temporary . NotificationManager.negative instead. <div> element for example. // old way
hx.min(array, f)
// new way
hx.min(array.map(f))hx.min([7, 6, 3, 5]) // returns 3// old way
hx.max(array, f)
// new way
hx.max(array.map(f))hx.max([7, 6, 3, 5]) // returns 7// returns {'a': 2, 'b': 3}
hx.merge(false, {'a': 1}, {'a': 2}, {'b': 3})
// returns {a: {b: 'hello', c: {d: 4, e: 'value'}}}
hx.merge(true, {a: {b: 2, c: {d: 3}}}, {a: {b: 'hello', c: {d: 4, e: 'value'}}})// returns {'a': 2, 'b': 3}
hx.merge(false, {'a': 1}, {'a': 2}, {'b': 3})
// returns {a: {b: 'hello', c: {d: 4, e: 'value'}}}
hx.merge(true, {a: {b: 2, c: {d: 3}}}, {a: {b: 'hello', c: {d: 4, e: 'value'}}})