Constructor
new UibThemeChanger()
Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
Properties:
Name | Type | Description |
---|---|---|
name |
string | Optional. Will be used to synthesize an ID if no ID is provided. attr {string} data-* - Optional. All data-* attributes are returned in the _meta prop as a _meta.data object. slot Container contents |
- Source:
Extends
- HTMLElement
Members
$ :function
Mini jQuery-like shadow dom selector (see constructor)
Type:
- function
- Source:
$ :function
Mini jQuery-like shadow dom selector (see constructor)
Type:
- function
- Source:
$ :function
Mini jQuery-like shadow dom selector (see constructor)
Type:
- function
- Source:
$$ :function
Mini jQuery-like shadow dom multi-selector (see constructor)
Type:
- function
- Source:
$$ :function
Mini jQuery-like shadow dom multi-selector (see constructor)
Type:
- function
- Source:
$$ :function
Mini jQuery-like shadow dom multi-selector (see constructor)
Type:
- function
- Source:
_iCount
Holds a count of how many instances of this component are on the page that don't have their own id
Used to ensure a unique id if needing to add one dynamically
- Source:
_iCount
Holds a count of how many instances of this component are on the page that don't have their own id
Used to ensure a unique id if needing to add one dynamically
- Source:
_iCount
Holds a count of how many instances of this component are on the page that don't have their own id
Used to ensure a unique id if needing to add one dynamically
- Source:
_ui
Standard _ui object to include in msgs
- Source:
_ui
Standard _ui object to include in msgs
- Source:
_ui
Standard _ui object to include in msgs
- Source:
opts
Runtime configuration settings
- Source:
opts
Runtime configuration settings
- Source:
opts
Runtime configuration settings
- Source:
scheme
What is the current scheme? 'light', 'dark' or 'auto'
- Source:
scheme
What is the current scheme? 'light', 'dark' or 'auto'
- Source:
scheme
What is the current scheme? 'light', 'dark' or 'auto'
- Source:
uib
Is UIBUILDER for Node-RED loaded?
- Source:
uib
Is UIBUILDER for Node-RED loaded?
- Source:
uib
Is UIBUILDER for Node-RED loaded?
- Source:
uibThemeSettings
Holds the uib theme settings for all pages in this domain (from/to localStorage)
- Source:
uibThemeSettings
Holds the uib theme settings for all pages in this domain (from/to localStorage)
- Source:
uibThemeSettings
Holds the uib theme settings for all pages in this domain (from/to localStorage)
- Source:
version
Component version
- Source:
version
Report the current component version string
- Source:
version
Component version
- Source:
version
Report the current component version string
- Source:
version
Component version
- Source:
version
Report the current component version string
- Source:
(static) observedAttributes
Makes HTML attribute change watched
- Source:
(static) observedAttributes
Makes HTML attribute change watched
- Source:
(static) observedAttributes
Makes HTML attribute change watched
- Source:
Methods
_uibMsgHandler(evt)
Handle a `uibuilder:msg:_ui:update:${this.id}` custom event
Parameters:
Name | Type | Description |
---|---|---|
evt |
CustomEvent | uibuilder `uibuilder:msg:_ui:update:${this.id}` custom event evt.details contains the data |
- Source:
_uibMsgHandler(evt)
Handle a `uibuilder:msg:_ui:update:${this.id}` custom event
Parameters:
Name | Type | Description |
---|---|---|
evt |
CustomEvent | uibuilder `uibuilder:msg:_ui:update:${this.id}` custom event evt.details contains the data |
- Source:
_uibMsgHandler(evt)
Handle a `uibuilder:msg:_ui:update:${this.id}` custom event
Parameters:
Name | Type | Description |
---|---|---|
evt |
CustomEvent | uibuilder `uibuilder:msg:_ui:update:${this.id}` custom event evt.details contains the data |
- Source:
attributeChangedCallback(attrib, oldVal, newVal)
Runs when an observed attribute changes - Note: values are always strings
Parameters:
Name | Type | Description |
---|---|---|
attrib |
string | Name of watched attribute that has changed |
oldVal |
string | The previous attribute value |
newVal |
string | The new attribute value |
- Source:
attributeChangedCallback(attrib, oldVal, newVal)
Runs when an observed attribute changes - Note: values are always strings
Parameters:
Name | Type | Description |
---|---|---|
attrib |
string | Name of watched attribute that has changed |
oldVal |
string | The previous attribute value |
newVal |
string | The new attribute value |
- Source:
attributeChangedCallback(attrib, oldVal, newVal)
Runs when an observed attribute changes - Note: values are always strings
Parameters:
Name | Type | Description |
---|---|---|
attrib |
string | Name of watched attribute that has changed |
oldVal |
string | The previous attribute value |
newVal |
string | The new attribute value |
- Source:
config(config) → {object}
OPTIONAL. Update runtime configuration, return complete config
Parameters:
Name | Type | Description |
---|---|---|
config |
object | undefined | If present, partial or full set of options. If undefined, fn returns the current full option settings |
- Source:
Returns:
The current full option settings
- Type
- object
config(config) → {object}
OPTIONAL. Update runtime configuration, return complete config
Parameters:
Name | Type | Description |
---|---|---|
config |
object | undefined | If present, partial or full set of options. If undefined, fn returns the current full option settings |
- Source:
Returns:
The current full option settings
- Type
- object
config(config) → {object}
OPTIONAL. Update runtime configuration, return complete config
Parameters:
Name | Type | Description |
---|---|---|
config |
object | undefined | If present, partial or full set of options. If undefined, fn returns the current full option settings |
- Source:
Returns:
The current full option settings
- Type
- object
connectedCallback()
Runs when an instance is added to the DOM
- Source:
connectedCallback()
Runs when an instance is added to the DOM
- Source:
connectedCallback()
Runs when an instance is added to the DOM
- Source:
disconnectedCallback()
Runs when an instance is removed from the DOM
- Source:
disconnectedCallback()
Runs when an instance is removed from the DOM
- Source:
disconnectedCallback()
Runs when an instance is removed from the DOM
- Source:
(async) doInheritStyles(url)
Optionally apply an external linked style sheet (called from connectedCallback)
Parameters:
Name | Type | Description |
---|---|---|
url |
* | The URL for the linked style sheet |
- Source:
(async) doInheritStyles(url)
Optionally apply an external linked style sheet (called from connectedCallback)
Parameters:
Name | Type | Description |
---|---|---|
url |
* | The URL for the linked style sheet |
- Source:
(async) doInheritStyles(url)
Optionally apply an external linked style sheet (called from connectedCallback)
Parameters:
Name | Type | Description |
---|---|---|
url |
* | The URL for the linked style sheet |
- Source:
evtClickChooser(evt)
Handle the light/dark theme chooser. Override contrast css variables and set appropriate class on html
Parameters:
Name | Type | Description |
---|---|---|
evt |
MouseEvent | _ |
- Source:
evtClickChooser(evt)
Handle the light/dark theme chooser. Override contrast css variables and set appropriate class on html
Parameters:
Name | Type | Description |
---|---|---|
evt |
MouseEvent | _ |
- Source:
evtClickChooser(evt)
Handle the light/dark theme chooser. Override contrast css variables and set appropriate class on html
Parameters:
Name | Type | Description |
---|---|---|
evt |
MouseEvent | _ |
- Source:
evtClickContrast(evt)
Handle contrast click. Override contrast css variables and set appropriate class on html
Parameters:
Name | Type | Description |
---|---|---|
evt |
MouseEvent | Click event |
- Source:
evtClickContrast(evt)
Handle contrast click. Override contrast css variables and set appropriate class on html
Parameters:
Name | Type | Description |
---|---|---|
evt |
MouseEvent | Click event |
- Source:
evtClickContrast(evt)
Handle contrast click. Override contrast css variables and set appropriate class on html
Parameters:
Name | Type | Description |
---|---|---|
evt |
MouseEvent | Click event |
- Source:
evtClickReset(evt)
Handle reset button. Override contrast css variables and set appropriate class on html
Parameters:
Name | Type | Description |
---|---|---|
evt |
MouseEvent | _ |
- Source:
evtClickReset(evt)
Handle reset button. Override contrast css variables and set appropriate class on html
Parameters:
Name | Type | Description |
---|---|---|
evt |
MouseEvent | _ |
- Source:
evtClickReset(evt)
Handle reset button. Override contrast css variables and set appropriate class on html
Parameters:
Name | Type | Description |
---|---|---|
evt |
MouseEvent | _ |
- Source:
evtClickToggle(evt)
TODO Handle the icon
Parameters:
Name | Type | Description |
---|---|---|
evt |
MouseEvent | _ |
- Source:
evtClickToggle(evt)
TODO Handle the icon
Parameters:
Name | Type | Description |
---|---|---|
evt |
MouseEvent | _ |
- Source:
evtClickToggle(evt)
TODO Handle the icon
Parameters:
Name | Type | Description |
---|---|---|
evt |
MouseEvent | _ |
- Source:
setTheme(theme) → {string}
Parameters:
Name | Type | Description |
---|---|---|
theme |
* | _ |
- Source:
Returns:
_
- Type
- string
setTheme(theme) → {string}
Parameters:
Name | Type | Description |
---|---|---|
theme |
* | _ |
- Source:
Returns:
_
- Type
- string
setTheme(theme) → {string}
Parameters:
Name | Type | Description |
---|---|---|
theme |
* | _ |
- Source:
Returns:
_
- Type
- string
(static) deepAssign(target, …sources) → {object}
Utility object deep merge fn
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
target |
object | Merge target object | |
sources |
object |
<repeatable> |
1 or more source objects to merge |
- Source:
Returns:
Deep merged object
- Type
- object
(static) deepAssign(target, …sources) → {object}
Utility object deep merge fn
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
target |
object | Merge target object | |
sources |
object |
<repeatable> |
1 or more source objects to merge |
- Source:
Returns:
Deep merged object
- Type
- object
(static) deepAssign(target, …sources) → {object}
Utility object deep merge fn
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
target |
object | Merge target object | |
sources |
object |
<repeatable> |
1 or more source objects to merge |
- Source:
Returns:
Deep merged object
- Type
- object