From 423ce201bfca128f87a16733d4b06502c3771c35 Mon Sep 17 00:00:00 2001
From: Julian Knight <1591850+TotallyInformation@users.noreply.github.com>
Date: Sun, 29 Sep 2024 18:00:50 +0100
Subject: [PATCH] Updates
---
README.md | 214 +-
alpha/labelled-value.js | 2 +-
docs/dev.md | 13 +-
docs/{data-list.md => dynamic-list.md} | 0
docs/ideas.md | 58 +
docs/jsdoc/Alpha.UibThemeChanger.html | 4 +-
docs/jsdoc/Alpha.html | 1302 +-
docs/jsdoc/Beta.html | 11436 +++++++++++++++-
docs/jsdoc/ButtonSend.html | 88 +-
docs/jsdoc/CallOut.html | 2249 +++
docs/jsdoc/CollapsibleHeadings.html | 64 +-
docs/jsdoc/ComponentTemplate.html | 48 +-
docs/jsdoc/StateTimeline.html | 4 +-
docs/jsdoc/SyntaxHighlight.html | 3145 +++++
docs/jsdoc/VisibleConsole.html | 88 +-
docs/jsdoc/alpha_chart-frappe.js.html | 4 +-
docs/jsdoc/alpha_chart-high.js.html | 4 +-
docs/jsdoc/alpha_component-template.js.html | 69 +-
docs/jsdoc/alpha_definition-list.js.html | 4 +-
docs/jsdoc/alpha_dynamic-list.js.html | 192 +
docs/jsdoc/alpha_gauge-steel.js.html | 4 +-
docs/jsdoc/alpha_ghost-thermometer.js.html | 4 +-
docs/jsdoc/alpha_html-include.js.html | 160 -
docs/jsdoc/alpha_labelled-value.js.html | 4 +-
docs/jsdoc/alpha_multi-way-switch.js.html | 4 +-
docs/jsdoc/alpha_nav-bar.js.html | 4 +-
.../alpha_not-complete_chart-apex.js.html | 4 +-
.../jsdoc/alpha_not-complete_chart-js.js.html | 4 +-
.../alpha_not-complete_chart-plotly.js.html | 4 +-
.../alpha_not-complete_container-br.js.html | 143 +
.../alpha_not-complete_simple-tree.js.html | 4 +-
.../jsdoc/alpha_not-complete_uib-wrap.js.html | 4 +-
docs/jsdoc/alpha_simple-card.js.html | 4 +-
docs/jsdoc/alpha_simple-container.js.html | 4 +-
docs/jsdoc/alpha_simple-gauge.js.html | 4 +-
docs/jsdoc/alpha_simple-switch.js.html | 9 +-
docs/jsdoc/alpha_state-timeline.js.html | 4 +-
docs/jsdoc/alpha_syntax-highlight.js.html | 251 -
docs/jsdoc/alpha_uib-theme-changer.js.html | 4 +-
docs/jsdoc/global.html | 496 +-
docs/jsdoc/index.html | 163 +-
docs/jsdoc/module.exports.html | 964 +-
docs/jsdoc/src_button-send.js.html | 97 +-
docs/jsdoc/src_call-out.js.html | 352 +
docs/jsdoc/src_collapsible-headings.js.html | 62 +-
docs/jsdoc/src_html-include.js.html | 327 +
docs/jsdoc/src_syntax-highlight.js.html | 302 +
docs/jsdoc/src_visible-console.js.html | 153 +-
docs/readme/alpha/component-template.md | 31 +-
docs/readme/alpha/html-include.md | 10 -
docs/readme/alpha/syntax-highlight.md | 19 -
docs/readme/button-send.md | 26 +-
docs/readme/call-out.md | 47 +
docs/readme/collapsible-headings.md | 37 +-
docs/readme/component-template.md | 114 +-
docs/readme/html-include.md | 48 +
docs/readme/syntax-highlight.md | 56 +
.../ti-web-components.html-data.json | 257 +-
58 files changed, 20596 insertions(+), 2576 deletions(-)
rename docs/{data-list.md => dynamic-list.md} (100%)
create mode 100644 docs/ideas.md
create mode 100644 docs/jsdoc/CallOut.html
create mode 100644 docs/jsdoc/SyntaxHighlight.html
create mode 100644 docs/jsdoc/alpha_dynamic-list.js.html
delete mode 100644 docs/jsdoc/alpha_html-include.js.html
create mode 100644 docs/jsdoc/alpha_not-complete_container-br.js.html
delete mode 100644 docs/jsdoc/alpha_syntax-highlight.js.html
create mode 100644 docs/jsdoc/src_call-out.js.html
create mode 100644 docs/jsdoc/src_html-include.js.html
create mode 100644 docs/jsdoc/src_syntax-highlight.js.html
delete mode 100644 docs/readme/alpha/html-include.md
delete mode 100644 docs/readme/alpha/syntax-highlight.md
create mode 100644 docs/readme/call-out.md
create mode 100644 docs/readme/html-include.md
create mode 100644 docs/readme/syntax-highlight.md
diff --git a/README.md b/README.md
index 05d8817..da04e41 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,13 @@ Additional documentation is available in the docs folder which is also exposed a
Install locally using npm or access via [jsdelivr](https://www.jsdelivr.com/package/gh/totallyinformation/web-components).
+See the [component documentation](docs) for specific usage information for each component.
+
+
+Useage details
+
+### File locations
+
Files for live use are in the `dist` folder. The alpha quality components are in the `dist/alpha` folder.
Each component has 4 files but you only need 1 of them.
@@ -26,16 +33,83 @@ If using ES Modules, import the `*.esm.min.js` files in your module code.
import 'https://cdn.jsdelivr.net/gh/totallyinformation/web-components/dist/visible-console.esm.min.js'
```
-> [!TIP]
-> If using with UIBUILDER for Node-RED, load _after_ the uibuilder client library so that the component registers that uibuilder is in use and becomes responsive to it.
-
-
Each component self-registers its custom HTML tag. They also globally self-register their class name so that you can access static variables and functions if needed. The tag name and global name are both listed in the tables below.
When using your browser's developer tools, the matching `.map` file will be loaded. This ensures that reported line numbers and full variable/function names are reported.
The source for the components is in the `src` folder for the main components and in the `alpha` folder for the alpha quality components.
+### Useage with UIBUILDER for Node-RED
+
+* You can install the components library using UIBUILDER's library manager.
+* In your front-end HTML, load the components _after_ the uibuilder client library so that the components register that uibuilder is in use and becomes responsive to it.
+
+If using with Node-RED, you can install the components with the help of node-red-contrib-uibuilder. The uibuilder node has a library manager feature and you should use that to install the repository direct from GitHub (requires uibuilder v5+). In that case, uibuilder adds the repository to its web server and you can access them as: `../uibuilder/vendor/@totallyinformation/web-components/dist/button-send.js`. See below for details.
+
+### Local installation
+
+If you wish to install locally, you can npm install from the GitHub repository with `npm install totallyinformation/web-components`. If these ever get published to npm, you would install with `npm install @totallyinformation/web-components`. However, note that, at this point, I am not intending to publish them quickly as they are still evolving quite rapidly.
+
+If installing locally, you will need to make the installed `web-components/components/` folder available to your web server as a static resource folder.
+
+### Loading components into your web page
+
+The individual component documentation contains details on how to load the component files. In general, however, there are two choices on how to load them.
+
+#### Load as an ECMA module
+
+This is the preferred method. However, it is generally best to load via a script module. While you can load them via your HTML as a script link, you loose some capability this way.
+
+```html
+
+```
+
+#### Load from HTML with a script tag
+
+They **must** be loaded as a type "module".
+
+```html
+
+```
+
+Or from the local resource of course. Note that this is not recommended. It is better to load them from a script module and then you can use an import statement.
+
+#### Load from a standard script
+
+Alternatively, you can load them in your main JavaScript script using dynamic imports as:
+
+```html
+
+```
+
+The disadvantage of this method is that the import function is asynchronous and so your own code may try to execute before the module has loaded. Generally, this won't matter if you aren't assigning the import to a variable. If you are, you may need to use top-level async or the promise-style then/catch.
+
+The potential advantage of this approach is that you can access exported variables and methods from the component if any are available (see the syntax-highlight component for an example).
+
+### Visual Studio Code (VSCode) Intelligence
+
+VSCode supposts the use of HTML and CSS Custom Data JSON files that describe custom web components and CSS in a way that gives some intelligence to the editor when writing HTML and CSS code.
+
+This collection of web components uses [Web Component Analyzer](https://github.com/runem/web-component-analyzer) to help document the components. It is also used to create an html custom data file that can be added to VSCode or to a specific workspace or folder settings to provide additional Intellisense help for the components.
+
+To do so, find the html custom data setting in VSCode settings and add:
+
+```
+/path/to/totallyinformation/web-components/vscode-descriptors/ti-web-components.html-data.json
+```
+
+
+
+
+### Demos
+
+All of the components have demo web pages in `tests`. There is a built-in Node.js mini web server. Running the npm script `tests` will start the server on port 8080. Opening `http://127.0.0.1:8080` or `http://127.0.0.1:8080/list.html` will give a list of all available demos.
+
+
## Components
These components can be considered `beta` quality or better. They may not be complete but they should have basic usefulness.
@@ -119,138 +193,6 @@ There is also a `alpha/no-complete` folder. This contains some components not ye
* `libs/uib-brand.css` - a copy of the alternate (new) stylesheet from uibuilder that these components can use.
-
-## Requirements
-
-These are the requirements for any web component to be included in this repository.
-
-* MUST be standalone with no external requirements. Common internal library modules may be permitted however.
-* MUST be useable in the majority of modern browsers, anything supporting ES2019+ should be usable. IE will not be supported.
-* MUST use ES6+. Maxumum JavaScript version should be 2 years behind the leading edge and only features supported by the majority of mainstream browsers are allowed. Other features MAY be permitted as long as they are optional and do not produce errors.
-* MUST be linted using ESLINT. SHOULD use JavaScript Standard format (with some variations documented in the `.eslintrc.js` file).
-* MUST self-register the custom tag using `customElements.define`.
-* MUST use a Class name using a _CamelCase_ version of the component name with an initial upper-case letter (e.g. `syntax-highlight` will be `export default class SyntaxHighlight extends HTMLElement { ... }` ).
-* MUST be documented in the `docs` folder.{}
-
-* SHOULD have a `` to allow nested rich content (where it makes sense).
-* SHOULD export a _camelCase_ version of the component-name which contains any useful methods and data. (e.g. `syntax-highlight` should export `syntaxHighlight`).
-* SHOULD meet the [Web Components Gold Standard](https://github.com/webcomponents/gold-standard/wiki).
-* SHOULD define any shadow template content and required component name as static variables in the class.
-
-* [Best practices](https://web.dev/articles/custom-elements-best-practices)
-
-### HTML Standards limitations
-
-* Custom HTML tags MUST use pascal-case with at least 1 `-`.
-* Custom HTML tags MUST use lower-case attribute names.
-
-## Installation and loading
-
-You can use these components directly from the jsdelivr CDN by referencing like: `https://cdn.jsdelivr.net/gh/totallyinformation/web-components@master/components/button-send.js`. So no install is required if you are happy to load from the Internet.
-
-### Local installation
-
-If you wish to install locally, you can npm install from the GitHub repository with `npm install totallyinformation/web-components`. If these ever get published to npm, you would install with `npm install @totallyinformation/web-components`. However, note that, at this point, I am not intending to publish them quickly as they are still evolving quite rapidly.
-
-If installing locally, you will need to make the installed `web-components/components/` folder available to your web server as a static resource folder.
-
-### Using with Node-RED and uibuilder
-
-If using with Node-RED, you can install the components with the help of node-red-contrib-uibuilder. The uibuilder node has a library manager feature and you should use that to install the repository direct from GitHub (requires uibuilder v5+). In that case, uibuilder adds the repository to its web server and you can access them as: `../uibuilder/vendor/@totallyinformation/web-components/components/button-send.js`. See below for details.
-
-### Loading components into your web page
-
-The individual component documentation contains details on how to load the component files. In general, however, there are two choices on how to load them.
-
-#### Load as an ECMA module
-
-This is the preferred method. However, it is generally best to load via a script module. While you can load them via your HTML as a script link, you loose some capability this way.
-
-```html
-
-```
-
-#### Load from HTML with a script tag
-
-They **must** be loaded as a type "module".
-
-```html
-
-```
-
-Or from the local resource of course. Note that this is not recommended. It is better to load them from a script module and then you can use an import statement.
-
-#### Load from a standard script
-
-Alternatively, you can load them in your main JavaScript script using dynamic imports as:
-
-```html
-
-```
-
-The disadvantage of this method is that the import function is asynchronous and so your own code may try to execute before the module has loaded. Generally, this won't matter if you aren't assigning the import to a variable. If you are, you may need to use top-level async or the promise-style then/catch.
-
-The potential advantage of this approach is that you can access exported variables and methods from the component if any are available (see the syntax-highlight component for an example).
-
-
-## Stand-alone use
-
-### Installation and loading
-
-See the general information above.
-
-### Using the components
-
-See the [component documentation](docs) for specific usage information for each component.
-
-
-
-## Use with [Node-RED](https://nodered.org/) and [node-red-contrib-uibuilder](https://github.com/TotallyInformation/node-red-contrib-uibuilder)
-
-### Installation and loading
-
-You can, of course, use the components direct from a CDN as shown above.
-
-Otherwise, install this repository using the library manager in a uibuilder node in Node-RED.
-
-
-
-Which results in something like:
-
-
-
-Noting that this library does not actually have a default script so the listed on is spurious.
-
-You can then access the components by loading them into your html or JavaScript as shown above.
-
-### Using the components
-
-The components can, of course, be used in the same way as if not using uibuilder. However, there are additional capabilities aimed at making their use in conjunction with Node-RED and uibuilder even easier. Specifically reducing the amount of code required to use them.
-
-Components will automatically recognise when uibuilder is being used. They will each:
-
-* Have a specific msg schema - when a msg with the matching schema is sent from Node-RED via uibuilder, a singular instance of the component on a page will be automatically updated. Where multiple instances are present, the msg must include an html id so that the msg will target that instance.
-
-See the [component documentation](docs) for specific usage information for each component.
-
-
-
-## Visual Studio Code (VSCode) Intelligence
-
-VSCode supposts the use of HTML and CSS Custom Data JSON files that describe custom web components and CSS in a way that gives some intelligence to the editor when writing HTML and CSS code.
-
-This collection of web components uses [Web Component Analyzer](https://github.com/runem/web-component-analyzer) to help document the components. It is also used to create an html custom data file that can be added to VSCode or to a specific workspace or folder settings to provide additional Intellisense help for the components.
-
-To do so, find the html custom data setting in VSCode settings and add:
-
-```
-/path/to/totallyinformation/web-components/vscode-descriptors/ti-web-components.html-data.json
-```
-
## Discussions and suggestions
The best place to ask questions, or suggest improvements about these components is the [GitHub discussion board for this repository](https://github.com/TotallyInformation/web-components/discussions).
diff --git a/alpha/labelled-value.js b/alpha/labelled-value.js
index d05e9c5..598f857 100644
--- a/alpha/labelled-value.js
+++ b/alpha/labelled-value.js
@@ -172,7 +172,7 @@ export default class LabelledValue extends HTMLElement {
}
}
- document.dispatchEvent(new CustomEvent(`${componentName}:attribChanged`, {
+ document.dispatchEvent(new CustomEvent(`${this.localName}:attribChanged`, {
bubbles: true,
composed: true,
detail: {
diff --git a/docs/dev.md b/docs/dev.md
index 5896c2c..4dfb1ac 100644
--- a/docs/dev.md
+++ b/docs/dev.md
@@ -8,11 +8,14 @@ updated: 2024-09-22 14:34:05
## Standards
+These are the requirements and standards for any web component to be included in this repository.
+
+* MUST be standalone with no external requirements. Common include library modules (e.g. charts) MAY be imported however. The resulting file MUST be useable stand-alone.
+* MUST be useable in the majority of modern browsers, anything supporting ES2019+ should be usable. IE will not be supported.
+
* All components MUST self register the custom tag AND their Class Name. All tag namess are lower-case with at least one dash (_kebab-case_) . All Class names start with an upper-case letter and the name is the tag name in _PascalCase_. MUST self-register the custom tag using `customElements.define`.
* The Class is the default export and is also self-registered to the window global.
* MUST provide source-code in either `./src` (for production ready components) or `./alpha`. Any component in `./src` MUST be usable even if it is not feature complete.
-* MUST be useable in the majority of modern browsers. IE will not be supported.
-* MUST be standalone with no external requirements. Common include library modules (e.g. charts) MAY be imported however. The resulting file MUST be useable stand-alone.
* MUST have both IIFE and ESM minimised versions built using ESBUILD. The built versions should target common browser features no newer than 2-years old. Built versions will be in the `./dist` folder with alpha quality components built to the `./dist/alpha` folder. All built versions will include `.map` files for debugging.
* MUST use JSDoc to self-document. MUST use ESLint and follow the modified _JavaScript Standard_ formatting.
* MUST provide a document file in `./docs` describing use, settings, etc.
@@ -29,10 +32,16 @@ updated: 2024-09-22 14:34:05
* MUST NOT be dependent on UIBUILDER for Node-RED. SHOULD be enhanced if the UIBUILDER client library is loaded.
* SHOULD be derived from the `./libs/ti-base-component.js` class to inherit standard properties and methods.
* SHOULD meet the [Web Components Gold Standard](https://github.com/webcomponents/gold-standard/wiki).
+* SHOULD follow [Best practices](https://web.dev/articles/custom-elements-best-practices).
* SHOULD have a `` to allow nested rich content (where it makes sense).
* Where _static_ properties or methods are referred to, `this.constructor` should be used rather than the class name. This avoids errors should the class ever be renamed or the code copied to a different class. Similarly, `this.localName` can be used to get the class name as text which should be used in debugging and error logging.
+### HTML Standards limitations
+
+* Custom HTML tags MUST use pascal-case with at least 1 `-`.
+* Custom HTML tags MUST use lower-case attribute names.
+
## Styling
Where shadow dom is used (most of these components), note that style isolation between parent and component instance applies.
diff --git a/docs/data-list.md b/docs/dynamic-list.md
similarity index 100%
rename from docs/data-list.md
rename to docs/dynamic-list.md
diff --git a/docs/ideas.md b/docs/ideas.md
new file mode 100644
index 0000000..35e9128
--- /dev/null
+++ b/docs/ideas.md
@@ -0,0 +1,58 @@
+---
+title: Ideas for future components and enhancements
+description: |
+ Where might we go?
+created: 2024-09-25 02:04:04
+updated: 2024-09-28 13:24:19
+---
+
+## Possible future components
+
+### Version of uib-var
+
+* Shows content from a JavaScript variable.
+* Possibly allows dynamic overrides of attributes.
+* Test with component version text.
+
+### `light-switch` - on/off, level, colour. Location.
+
+### `layout-area` - Switch between a few core layouts such as blog & dash
+#### `area-*` - Define an area for a layout, e.g. `area-main`, `area-head`, `area-foot`, `area-sidebar` - all included in the parent component's package.
+
+### `smart-list` - 2-way data controllable list wrapper
+
+* Wraps around lists to easily add different entry formats including numbering (nested), icons, checkboxes, prefixes (e.g. dates)
+* Dynamic property to store contents - ideally 2-way
+* Multiple ways to update content: DOM changes, custom event, proxied property. For uibuilder: auto-topic updates
+* Optionally drag/drop to re-order with data property updated
+* Optionally content editable - double-click on icon, prefix and text to edit
+* Optional checkbox with data store
+* UIBUILDER data enabled. Controllable updates back to Node-RED (e.g. when no longer visible or immediate)
+
+### `smart-report` - Like collapsible-headings but also data controllable
+
+* Wraps around a collection of `` and `
`/`
`/`` tags adding smarter formatting and control
+* Optional collapsible headings
+* Optional numbered headings (including nested numbers), format controllable
+* Dynamic property to store contents - ideally 2-way
+* Multiple ways to update content: DOM changes, custom event, proxied property. For uibuilder: auto-topic updates
+* *Maybe - Optional drag/drop re-oder*
+* *Maybe - double-click to content edit*
+
+### `linear-gauge`
+
+* horizontal/vertical
+* Segmented (led style) or smooth
+* Multiple colour segments
+* Optional current value with positioning
+
+Refs: [1](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955), Discourse vert indicators.
+
+
+## Thoughts
+
+* Any way to have a component that is able to get meta-data from another component. Eg version, docs, etc?
+
+* Article with heading should be collapsible
+
+* Each component could have a getter to output their own TODO lists!
diff --git a/docs/jsdoc/Alpha.UibThemeChanger.html b/docs/jsdoc/Alpha.UibThemeChanger.html
index 8a1e521..4e8ef5e 100644
--- a/docs/jsdoc/Alpha.UibThemeChanger.html
+++ b/docs/jsdoc/Alpha.UibThemeChanger.html
@@ -9926,13 +9926,13 @@
(static) deepAssign Object deep merger
+method _uibMsgHandler If UIBUILDER for Node-RED is active, auto-handle incoming messages targetted at instance id()
+
+
+
+
+
+
+
+ A zero dependency web component that will display JavaScript console output on-page.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter.
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
The component version string (date updated)
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+Other props:
+By default, all attributes are also created as properties
state-timeline:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
state-timeline:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
state-timeline:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
(static) deepAssign Object deep merger
+method _uibMsgHandler If UIBUILDER for Node-RED is active, auto-handle incoming messages targetted at instance id()
+
+
+
+
+
+
+
+ A zero dependency web component that will display JavaScript console output on-page.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter.
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
The component version string (date updated)
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+Other props:
+By default, all attributes are also created as properties
state-timeline:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
state-timeline:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
state-timeline:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+
+Standard watched attributes (common across all my components):event:
(static) deepAssign Object deep merger
+method _uibMsgHandler If UIBUILDER for Node-RED is active, auto-handle incoming messages targetted at instance id()
+
+
+
+
+
+
+
+ A zero dependency web component that will display JavaScript console output on-page.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter.
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
The component version string (date updated)
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+Other props:
+By default, all attributes are also created as properties
state-timeline:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
state-timeline:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
state-timeline:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
(static) deepAssign Object deep merger
+method _uibMsgHandler If UIBUILDER for Node-RED is active, auto-handle incoming messages targetted at instance id()
+
+
+
+
+
+
+
+ A zero dependency web component that will display JavaScript console output on-page.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter.
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
The component version string (date updated)
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+Other props:
+By default, all attributes are also created as properties
state-timeline:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
state-timeline:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
state-timeline:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+
+Standard watched attributes (common across all my components):event:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
NOTE that listeners can be attached either to the `document` or to the specific element instance.
-
Standard watched attributes (common across all my components):event:
@@ -443,7 +468,8 @@
Fires:
Example
-
<visible-console></visible-console>
+
<visible-console></visible-console>
+METHODS FROM BASE:
@@ -502,13 +528,13 @@
Properties:
-
version
+
_iCount
-string
+number
@@ -518,7 +544,7 @@
Properties:
-
Static. The component version string (date updated). Also has a getter.
+
Static. The component version string (date updated)
@@ -594,13 +620,13 @@
Properties:
-
_iCount
+
name
-number
+string
@@ -610,7 +636,7 @@
Properties:
-
The component version string (date updated)
+
Placeholder for the optional name attribute
@@ -633,7 +659,31 @@
Properties:
-
This components controllable options - get/set using the `config()` method
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+
Other props:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
NOTE that listeners can be attached either to the `document` or to the specific element instance.
-
Standard watched attributes (common across all my components):event:
<visible-console></visible-console>
+METHODS FROM BASE:
-
-
-
Methods
@@ -892,7 +847,7 @@
Methods
-
(static) createHTMLVisualizer Creates an HTML visualisation of the input()
+
(static) highlight Convert object to HTML()
@@ -900,7 +855,7 @@
- A zero dependency web component that will display JavaScript console output on-page.
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
@@ -941,13 +896,13 @@
Properties:
-
version
+
_iCount
-string
+number
@@ -957,7 +912,7 @@
Properties:
-
Static. The component version string (date updated). Also has a getter.
+
Static. The component version string (date updated)
@@ -1033,13 +988,13 @@
Properties:
-
_iCount
+
name
-number
+string
@@ -1049,7 +1004,7 @@
Properties:
-
The component version string (date updated)
+
Placeholder for the optional name attribute
@@ -1072,21 +1027,20 @@
Properties:
-
This components controllable options - get/set using the `config()` method
-Other props:
+
This components controllable options - get/set using the `config()` method
-
colors
+
version
-object
+string
@@ -1096,43 +1050,27 @@
Properties:
-
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
-
bgColors
+
json
object
+|
+JSON
+|
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
icons
-
-
-
-
-
-object
+string
@@ -1142,7 +1080,8 @@
Properties:
-
+
JSON to convert
+By default, all attributes are also created as properties
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
-
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
-
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
-NOTE that listeners can be attached either to the `document` or to the specific element instance.
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
Standard watched attributes (common across all my components):event:
@@ -1224,7 +1164,10 @@
Fires:
Example
-
<visible-console></visible-console>
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
@@ -1234,7 +1177,7 @@
Example
-
(static) createHTMLVisualizer Creates an HTML visualisation of the input()
+
(static) highlight Convert object to HTML()
@@ -1242,7 +1185,7 @@
- A zero dependency web component that will display JavaScript console output on-page.
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
@@ -1283,13 +1226,13 @@
Properties:
-
version
+
_iCount
-string
+number
@@ -1299,7 +1242,7 @@
Properties:
-
Static. The component version string (date updated). Also has a getter.
+
Static. The component version string (date updated)
@@ -1375,13 +1318,13 @@
Properties:
-
_iCount
+
name
-number
+string
@@ -1391,7 +1334,7 @@
Properties:
-
The component version string (date updated)
+
Placeholder for the optional name attribute
@@ -1414,21 +1357,20 @@
Properties:
-
This components controllable options - get/set using the `config()` method
-Other props:
+
This components controllable options - get/set using the `config()` method
-
colors
+
version
-object
+string
@@ -1438,43 +1380,27 @@
Properties:
-
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
-
bgColors
+
json
object
+|
+JSON
+|
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
icons
-
-
-
-
-
-object
+string
@@ -1484,7 +1410,8 @@
Properties:
-
+
JSON to convert
+By default, all attributes are also created as properties
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
-
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
-
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
-NOTE that listeners can be attached either to the `document` or to the specific element instance.
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
Standard watched attributes (common across all my components):event:
@@ -1566,7 +1494,10 @@
Fires:
Example
-
<visible-console></visible-console>
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
NOTE that listeners can be attached either to the `document` or to the specific element instance.
-
Standard watched attributes (common across all my components):event:
@@ -2003,7 +1961,8 @@
Fires:
Example
-
<visible-console></visible-console>
+
<visible-console></visible-console>
+METHODS FROM BASE:
@@ -2062,13 +2021,13 @@
Properties:
-
version
+
_iCount
-string
+number
@@ -2078,7 +2037,7 @@
Properties:
-
Static. The component version string (date updated). Also has a getter.
+
Static. The component version string (date updated)
@@ -2154,13 +2113,13 @@
Properties:
-
_iCount
+
name
-number
+string
@@ -2170,7 +2129,7 @@
Properties:
-
The component version string (date updated)
+
Placeholder for the optional name attribute
@@ -2193,7 +2152,31 @@
Properties:
-
This components controllable options - get/set using the `config()` method
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+
Other props:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
NOTE that listeners can be attached either to the `document` or to the specific element instance.
-
Standard watched attributes (common across all my components):event:
<visible-console></visible-console>
+METHODS FROM BASE:
-
-
-
Methods
@@ -2452,7 +2340,7 @@
Methods
-
(static) createHTMLVisualizer Creates an HTML visualisation of the input()
+
(static) highlight Convert object to HTML()
@@ -2460,7 +2348,7 @@
- A zero dependency web component that will display JavaScript console output on-page.
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
@@ -2501,13 +2389,13 @@
Properties:
-
version
+
_iCount
-string
+number
@@ -2517,7 +2405,7 @@
Properties:
-
Static. The component version string (date updated). Also has a getter.
+
Static. The component version string (date updated)
@@ -2593,13 +2481,13 @@
Properties:
-
_iCount
+
name
-number
+string
@@ -2609,7 +2497,7 @@
Properties:
-
The component version string (date updated)
+
Placeholder for the optional name attribute
@@ -2632,21 +2520,20 @@
Properties:
-
This components controllable options - get/set using the `config()` method
-Other props:
+
This components controllable options - get/set using the `config()` method
-
colors
+
version
-object
+string
@@ -2656,43 +2543,27 @@
Properties:
-
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
-
bgColors
+
json
object
+|
+JSON
+|
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
icons
-
-
-
-
-
-object
+string
@@ -2702,7 +2573,8 @@
Properties:
-
+
JSON to convert
+By default, all attributes are also created as properties
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
-
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
-
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
-NOTE that listeners can be attached either to the `document` or to the specific element instance.
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
Standard watched attributes (common across all my components):event:
@@ -2784,7 +2657,10 @@
Fires:
Example
-
<visible-console></visible-console>
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
@@ -2794,7 +2670,7 @@
Example
-
(static) createHTMLVisualizer Creates an HTML visualisation of the input()
+
(static) highlight Convert object to HTML()
@@ -2802,7 +2678,7 @@
- A zero dependency web component that will display JavaScript console output on-page.
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
@@ -2843,13 +2719,13 @@
Properties:
-
version
+
_iCount
-string
+number
@@ -2859,7 +2735,7 @@
Properties:
-
Static. The component version string (date updated). Also has a getter.
+
Static. The component version string (date updated)
@@ -2935,13 +2811,13 @@
Properties:
-
_iCount
+
name
-number
+string
@@ -2951,7 +2827,7 @@
Properties:
-
The component version string (date updated)
+
Placeholder for the optional name attribute
@@ -2974,21 +2850,20 @@
Properties:
-
This components controllable options - get/set using the `config()` method
-Other props:
+
This components controllable options - get/set using the `config()` method
-
colors
+
version
-object
+string
@@ -2998,20 +2873,27 @@
Properties:
-
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) createHTMLVisualizer Creates an HTML visualisation of the input()
+
+
+
+
+
+
+
+ A zero dependency web component that will display JavaScript console output on-page.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+
+Other props:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
+
+
+
+
+
+
+
json
+
+
+
+
+
+object
+|
+
+JSON
+|
+
+string
+
+
+
+
+
+
+
+
+
+
JSON to convert
+By default, all attributes are also created as properties
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
+
+
+
+
+
+
+
json
+
+
+
+
+
+object
+|
+
+JSON
+|
+
+string
+
+
+
+
+
+
+
+
+
+
JSON to convert
+By default, all attributes are also created as properties
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) createHTMLVisualizer Creates an HTML visualisation of the input()
+
+
+
+
+
+
+
+ A zero dependency web component that will display JavaScript console output on-page.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+
+Other props:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
+
+
+
+
+
+
+
json
+
+
+
+
+
+object
+|
+
+JSON
+|
+
+string
+
+
+
+
+
+
+
+
+
+
JSON to convert
+By default, all attributes are also created as properties
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
+
+
+
+
+
+
+
json
+
+
+
+
+
+object
+|
+
+JSON
+|
+
+string
+
+
+
+
+
+
+
+
+
+
JSON to convert
+By default, all attributes are also created as properties
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) createHTMLVisualizer Creates an HTML visualisation of the input()
+
+
+
+
+
+
+
+ A zero dependency web component that will display JavaScript console output on-page.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+
+Other props:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
+
+
+
+
+
+
+
json
+
+
+
+
+
+object
+|
+
+JSON
+|
+
+string
+
+
+
+
+
+
+
+
+
+
JSON to convert
+By default, all attributes are also created as properties
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
+
+
+
+
+
+
+
json
+
+
+
+
+
+object
+|
+
+JSON
+|
+
+string
+
+
+
+
+
+
+
+
+
+
JSON to convert
+By default, all attributes are also created as properties
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) createHTMLVisualizer Creates an HTML visualisation of the input()
+
+
+
+
+
+
+
+ A zero dependency web component that will display JavaScript console output on-page.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+
+Other props:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
+
+
+
+
+
+
+
json
+
+
+
+
+
+object
+|
+
+JSON
+|
+
+string
+
+
+
+
+
+
+
+
+
+
JSON to convert
+By default, all attributes are also created as properties
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
+
+
+
+
+
+
+
json
+
+
+
+
+
+object
+|
+
+JSON
+|
+
+string
+
+
+
+
+
+
+
+
+
+
JSON to convert
+By default, all attributes are also created as properties
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) createHTMLVisualizer Creates an HTML visualisation of the input()
+
+
+
+
+
+
+
+ A zero dependency web component that will display JavaScript console output on-page.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+
+Other props:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
+
+
+
+
+
+
+
json
+
+
+
+
+
+object
+|
+
+JSON
+|
+
+string
+
+
+
+
+
+
+
+
+
+
JSON to convert
+By default, all attributes are also created as properties
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
+
+
+
+
+
+
+
json
+
+
+
+
+
+object
+|
+
+JSON
+|
+
+string
+
+
+
+
+
+
+
+
+
+
JSON to convert
+By default, all attributes are also created as properties
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) createHTMLVisualizer Creates an HTML visualisation of the input()
+
+
+
+
+
+
+
+ A zero dependency web component that will display JavaScript console output on-page.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+
+Other props:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
+
+
+
+
+
+
+
json
+
+
+
+
+
+object
+|
+
+JSON
+|
+
+string
+
+
+
+
+
+
+
+
+
+
JSON to convert
+By default, all attributes are also created as properties
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
+
+
+
+
+
+
+
json
+
+
+
+
+
+object
+|
+
+JSON
+|
+
+string
+
+
+
+
+
+
+
+
+
+
JSON to convert
+By default, all attributes are also created as properties
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) createHTMLVisualizer Creates an HTML visualisation of the input()
+
+
+
+
+
+
+
+ A zero dependency web component that will display JavaScript console output on-page.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+
+Other props:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
<visible-console></visible-console>
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
+
+
+
+
+
+
+
json
+
+
+
+
+
+object
+|
+
+JSON
+|
+
+string
+
+
+
+
+
+
+
+
+
+
JSON to convert
+By default, all attributes are also created as properties
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
+Standard watched attributes (common across all my components):event:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example
+
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
+
+
+
+
+
+
+
+
+
+
(static) highlight Convert object to HTML()
+
+
+
+
+
+
+
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Properties:
+
+
+
+
+
+
+
+
Name
+
+
+
Type
+
+
+
+
+
+
Description
+
+
+
+
+
+
+
+
+
_iCount
+
+
+
+
+
+number
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated)
+
+
+
+
+
+
+
uib
+
+
+
+
+
+boolean
+
+
+
+
+
+
+
+
+
+
True if UIBUILDER for Node-RED is loaded
+
+
+
+
+
+
+
$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom selector
+
+
+
+
+
+
+
$$
+
+
+
+
+
+function
+
+
+
+
+
+
+
+
+
+
jQuery-like shadow dom multi-selector
+
+
+
+
+
+
+
name
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Placeholder for the optional name attribute
+
+
+
+
+
+
+
opts
+
+
+
+
+
+object
+
+
+
+
+
+
+
+
+
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
-
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
-
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
-NOTE that listeners can be attached either to the `document` or to the specific element instance.
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
Standard watched attributes (common across all my components):event:
@@ -3126,7 +13436,10 @@
Fires:
Example
-
<visible-console></visible-console>
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
NOTE that listeners can be attached either to the `document` or to the specific element instance.
-
Standard watched attributes (common across all my components):event:
@@ -3565,7 +13901,8 @@
Fires:
Example
-
<visible-console></visible-console>
+
<visible-console></visible-console>
+METHODS FROM BASE:
@@ -3624,13 +13961,13 @@
Properties:
-
version
+
_iCount
-string
+number
@@ -3640,7 +13977,7 @@
Properties:
-
Static. The component version string (date updated). Also has a getter.
+
Static. The component version string (date updated)
@@ -3716,13 +14053,13 @@
Properties:
-
_iCount
+
name
-number
+string
@@ -3732,7 +14069,7 @@
Properties:
-
The component version string (date updated)
+
Placeholder for the optional name attribute
@@ -3755,7 +14092,31 @@
Properties:
-
This components controllable options - get/set using the `config()` method
+
This components controllable options - get/set using the `config()` method
+
+
+
+
+
+
+
version
+
+
+
+
+
+string
+
+
+
+
+
+
+
+
+
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+
Other props:
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
+
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
NOTE that listeners can be attached either to the `document` or to the specific element instance.
-
Standard watched attributes (common across all my components):event:
<visible-console></visible-console>
+METHODS FROM BASE:
-
-
-
Methods
@@ -4012,7 +14280,7 @@
Methods
-
(static) createHTMLVisualizer Creates an HTML visualisation of the input()
+
(static) highlight Convert object to HTML()
@@ -4020,7 +14288,7 @@
- A zero dependency web component that will display JavaScript console output on-page.
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
@@ -4061,13 +14329,13 @@
Properties:
-
version
+
_iCount
-string
+number
@@ -4077,7 +14345,7 @@
Properties:
-
Static. The component version string (date updated). Also has a getter.
+
Static. The component version string (date updated)
@@ -4153,13 +14421,13 @@
Properties:
-
_iCount
+
name
-number
+string
@@ -4169,7 +14437,7 @@
Properties:
-
The component version string (date updated)
+
Placeholder for the optional name attribute
@@ -4192,21 +14460,20 @@
Properties:
-
This components controllable options - get/set using the `config()` method
-Other props:
+
This components controllable options - get/set using the `config()` method
-
colors
+
version
-object
+string
@@ -4216,43 +14483,27 @@
Properties:
-
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
-
bgColors
+
json
object
+|
+JSON
+|
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
icons
-
-
-
-
-
-object
+string
@@ -4262,7 +14513,8 @@
Properties:
-
+
JSON to convert
+By default, all attributes are also created as properties
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
-
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
-
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
-NOTE that listeners can be attached either to the `document` or to the specific element instance.
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
Standard watched attributes (common across all my components):event:
@@ -4344,7 +14597,10 @@
Fires:
Example
-
<visible-console></visible-console>
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
@@ -4354,7 +14610,7 @@
Example
-
(static) createHTMLVisualizer Creates an HTML visualisation of the input()
+
(static) highlight Convert object to HTML()
@@ -4362,7 +14618,7 @@
- A zero dependency web component that will display JavaScript console output on-page.
+ Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
@@ -4403,13 +14659,13 @@
Properties:
-
version
+
_iCount
-string
+number
@@ -4419,7 +14675,7 @@
Properties:
-
Static. The component version string (date updated). Also has a getter.
+
Static. The component version string (date updated)
@@ -4495,13 +14751,13 @@
Properties:
-
_iCount
+
name
-number
+string
@@ -4511,7 +14767,7 @@
Properties:
-
The component version string (date updated)
+
Placeholder for the optional name attribute
@@ -4534,21 +14790,20 @@
Properties:
-
This components controllable options - get/set using the `config()` method
-Other props:
+
This components controllable options - get/set using the `config()` method
-
colors
+
version
-object
+string
@@ -4558,43 +14813,27 @@
Properties:
-
+
Static. The component version string (date updated). Also has a getter that returns component and base version strings.
+Other props:
-
bgColors
+
json
object
+|
+JSON
+|
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
icons
-
-
-
-
-
-object
+string
@@ -4604,7 +14843,8 @@
Properties:
-
+
JSON to convert
+By default, all attributes are also created as properties
visible-console:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
syntax-highlight:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
-
visible-console:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
component-template:ready - Alias for connected.event: The instance can handle property & attribute changes
-
visible-console:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
-NOTE that listeners can be attached either to the `document` or to the specific element instance.
+
syntax-highlight:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
syntax-highlight:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.
Standard watched attributes (common across all my components):event:
@@ -4686,7 +14927,10 @@
Fires:
Example
-
<visible-console></visible-console>
+
Set the json property on the element
+ const showMsg = document.getElementsByTagName('syntax-highlight')[0]
+ showMsg.json({....})
+METHODS FROM BASE:
* @method deepAssign Object deep merger
* @method doInheritStyles If requested, add link to an external style sheet
* @method ensureId Adds a unique ID to the tag if no ID defined.
- * @method _uibMsgHandler If UIBUILDER for Node-RED is active, auto-handle incoming messages targetted at instance id
+ * @method _uibMsgHandler Not yet in use
+ * @method _event(name,data) Standardised custom event dispatcher
+ * @method _ready Call from end of connectedCallback. Sets connected prop and outputs events
* OTHER METHODS:
* None
* @fires component-template:connected - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element.
+ * @fires component-template:ready - Alias for connected. The instance can handle property & attribute changes
* @fires component-template:disconnected - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element.
* @fires component-template:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
* NOTE that listeners can be attached either to the `document` or to the specific element instance.
* Standard watched attributes (common across all my components):
* @attr {string|boolean} inherit-style - Optional. Load external styles into component (only useful if using template). If present but empty, will default to './index.css'. Optionally give a URL to load.
+ * @attr {string} name - Optional. HTML name attribute. Included in output _meta prop.
* Other watched attributes:
* None
* Standard props (common across all my components):
- * @prop {boolean} uib True if UIBUILDER for Node-RED is loaded. In base class
- * @prop {function(string): Element} $ jQuery-like shadow dom selector. In base class
- * @prop {function(string): NodeList} $$ jQuery-like shadow dom multi-selector. In base class
- * @prop {number} _iCount The component version string (date updated). In base class
- * @prop {object} opts This components controllable options - get/set using the `config()` method. In base class
+ * @prop {number} _iCount Static. The component version string (date updated)
+ * @prop {boolean} uib True if UIBUILDER for Node-RED is loaded
+ * @prop {function(string): Element} $ jQuery-like shadow dom selector
+ * @prop {function(string): NodeList} $$ jQuery-like shadow dom multi-selector
+ * @prop {boolean} connected False until connectedCallback finishes
+ * @prop {string} name Placeholder for the optional name attribute
+ * @prop {object} opts This components controllable options - get/set using the `config()` method
*
- * @prop {string} version Static. The component version string (date updated). Also has a getter.
+ * @prop {string} version Static. The component version string (date updated). Also has a getter that returns component and base version strings.
* Other props:
* By default, all attributes are also created as properties
@@ -116,7 +122,7 @@
Source: alpha/component-template.js
*/
class ComponentTemplate extends TiBaseComponent {
/** Component version */
- static version = '2024-09-22'
+ static version = '2024-09-29'
/** Makes HTML attribute change watched
* @returns {Array<string>} List of all of the html attribs (props) listened to
@@ -124,7 +130,7 @@
Source: alpha/component-template.js
static get observedAttributes() {
return [
// Standard watched attributes:
- 'inherit-style',
+ 'inherit-style', 'name',
// Other watched attributes:
]
}
@@ -133,8 +139,8 @@
Source: alpha/component-template.js
constructor() {
super()
+ // Only attach the shadow dom if code and style isolation is needed
this.attachShadow({ mode: 'open', delegatesFocus: true })
- // Only append the template if code and style isolation is needed
.append(template.content.cloneNode(true))
// jQuery-like selectors but for the shadow. NB: Returns are STATIC not dynamic lists
@@ -151,15 +157,10 @@
Source: alpha/component-template.js
// OPTIONAL. Listen for a uibuilder msg that is targetted at this instance of the component
if (this.uib) document.addEventListener(`uibuilder:msg:_ui:update:${this.id}`, this._uibMsgHandler.bind(this) )
- // Keep at end. Let everyone know that a new instance of the component has been connected
- this.dispatchEvent(new CustomEvent(`${this.localName}:connected`, {
- bubbles: true,
- composed: true,
- detail: {
- id: this.id,
- name: this.name
- },
- } ) )
+ // Keep at end. Let everyone know that a new instance of the component has been connected & is ready
+ this.connected = true
+ this._event('connected')
+ this._event('ready')
}
/** Runs when an instance is removed from the DOM */
@@ -168,14 +169,7 @@
Source: alpha/component-template.js
document.removeEventListener(`uibuilder:msg:_ui:update:${this.id}`, this._uibMsgHandler )
// Keep at end. Let everyone know that an instance of the component has been disconnected
- this.dispatchEvent(new CustomEvent(`${this.localName}:disconnected`, {
- bubbles: true,
- composed: true,
- detail: {
- id: this.id,
- name: this.name
- },
- } ) )
+ this._event('disconnected')
}
/** Runs when an observed attribute changes - Note: values are always strings
@@ -184,6 +178,11 @@
Source: alpha/component-template.js
* @param {string} newVal The new attribute value
*/
attributeChangedCallback(attrib, oldVal, newVal) {
+ /** Optionally ignore attrib changes until instance is fully connected
+ * Otherwise this can fire BEFORE everthing is fully connected.
+ */
+ // if (!this.connected) return
+
// Don't bother if the new value same as old
if ( oldVal === newVal ) return
// Create a property from the value - WARN: Be careful with name clashes
@@ -193,17 +192,7 @@
Source: alpha/component-template.js
// If attribute processing doesn't need to be dynamic, process in connectedCallback as that happens earlier in the lifecycle
// Keep at end. Let everyone know that an attribute has changed for this instance of the component
- this.dispatchEvent(new CustomEvent(`${this.localName}:attribChanged`, {
- bubbles: true,
- composed: true,
- detail: {
- id: this.id,
- name: this.name,
- attribute: attrib,
- newVal: newVal,
- oldVal: oldVal,
- }
- } ) )
+ this._event('attribChanged', { attribute: attrib, newVal: newVal, oldVal: oldVal })
}
} // ---- end of Class ---- //
@@ -228,13 +217,13 @@
/** Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
+ *
+ * TO USE THIS TEMPLATE: CHANGE ALL INSTANCES OF 'ContainerBr' and 'container-br' & change version below
+ *
+ * @version 0.2 2022-05-11 Early-release
+ *
+ * See: https://web.dev/custom-elements-v1/, https://web.dev/shadowdom-v1/
+ *
+ * See https://github.com/runem/web-component-analyzer#-how-to-document-your-components-using-jsdoc on how to document
+ * Use `npx web-component-analyzer ./components/button-send.js` to create/update the documentation
+ * or paste into https://runem.github.io/web-component-analyzer/
+ * Use `npx web-component-analyzer ./components/*.js --format vscode --outFile ./vscode-descriptors/ti-web-components.html-data.json`
+ * to generate/update vscode custom data files. See https://github.com/microsoft/vscode-custom-data/tree/main/samples/webcomponents
+ *
+ **/
+/**
+ * Copyright (c) 2022 Julian Knight (Totally Information)
+ * https://it.knightnet.org.uk, https://github.com/TotallyInformation
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+// just for syntax highlighting in VSCode
+function html(strings, ...keys) {
+ return strings.map( (s, i) => {
+ return s + (keys[i] || '')
+ }).join('')
+}
+
+const componentName = 'container-br'
+const className = 'ContainerBr'
+
+const template = document.createElement('template')
+template.innerHTML = html`
+ <style>
+ :host {
+ display: block; /* default is inline */
+ contain: content; /* performance boost */
+ flex-basis: 100%;
+ height: 0;
+ }
+ </style>
+`
+
+// Define the class and make it the default export
+/**
+ * @element container-br
+ *
+ * @fires container-br:construction - Document object event. evt.details contains the data
+ * @fires container-br:connected - When an instance of the component is attached to the DOM. `evt.details` contains the details of the element.
+ * @fires container-br:disconnected - When an instance of the component is removed from the DOM. `evt.details` contains the details of the element.
+ * @fires container-br:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+ * NOTE that listeners can be attached either to the `document` or to the specific element instance.
+ *
+ * @attr {string} name - 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.
+ *
+ * @prop {string} name - Sync'd from name attribute
+ *
+ * @slot Container contents
+ *
+ * @csspart ??? - Uses the uib-styles.css uibuilder master for variables where available.
+ */
+export default class ContainerBr extends HTMLElement {
+ constructor() {
+
+ super()
+ this.attachShadow({ mode: 'open', delegatesFocus: true })
+ .append(template.content.cloneNode(true))
+
+ this.dispatchEvent(new Event(`${componentName}:construction`, { bubbles: true, composed: true }))
+ } // ---- end of constructor ----
+} // ---- end of Class ---- //
+
+/** Self register the class to global
+ * Enables new data lists to be dynamically added via JS
+ * and lets the static methods be called
+ */
+window[className] = ContainerBr
+
+// Self-register the HTML tag
+customElements.define(componentName, ContainerBr)
+
(constant)
- Copyright (c) 2022 Julian Knight (Totally Information)
-https://it.knightnet.org.uk, https://github.com/TotallyInformation
-
-Licensed under the Apache License, Version 2.0 (the 'License');
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an 'AS IS' BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+ Refs:
+- https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280/9
@@ -380,7 +368,7 @@
(constant)
- Copyright (c) 2022 Julian Knight (Totally Information)
-https://it.knightnet.org.uk, https://github.com/TotallyInformation
-
-Licensed under the Apache License, Version 2.0 (the 'License');
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an 'AS IS' BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+ Refs:
+- https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280/9
@@ -755,7 +731,7 @@
- TODO
-- Add part transparent color backgrounds for at least warn and err
-- std parts
-- allow to be separate from console (via an attribute) for custom visual logging
-- Max entry limit
+ Only use a template if you want to isolate the code and CSS
- Zero dependency web component to load HTML/JSON dynamically
-See https://github.com/justinfagnani/html-include-element for inspiration
+ Only use a template if you want to isolate the code and CSS
- TODO
-- Add part transparent color backgrounds for at least warn and err
-- std parts
-- allow to be separate from console (via an attribute) for custom visual logging
-- Max entry limit
+ Only use a template if you want to isolate the code and CSS
- Zero dependency web component to load HTML/JSON dynamically
-See https://github.com/justinfagnani/html-include-element for inspiration
+ Only use a template if you want to isolate the code and CSS
Self register the class to global
-Enables new data lists to be dynamically added via JS
+Enables new widgets to be dynamically added via JS
and lets the static methods be called
Self register the class to global
-Enables new widgets to be dynamically added via JS
+Enables new data lists to be dynamically added via JS
and lets the static methods be called
Self register the class to global
-Enables new data lists to be dynamically added via JS
+Enables new widgets to be dynamically added via JS
and lets the static methods be called
Self register the class to global
-Enables new widgets to be dynamically added via JS
+Enables new data lists to be dynamically added via JS
and lets the static methods be called
[!TIP]
-If using with UIBUILDER for Node-RED, load after the uibuilder client library so that the component registers that uibuilder is in use and becomes responsive to it.
-
Each component self-registers its custom HTML tag. They also globally self-register their class name so that you can access static variables and functions if needed. The tag name and global name are both listed in the tables below.
When using your browser's developer tools, the matching .map file will be loaded. This ensures that reported line numbers and full variable/function names are reported.
The source for the components is in the src folder for the main components and in the alpha folder for the alpha quality components.
+
Useage with UIBUILDER for Node-RED
+
+
You can install the components library using UIBUILDER's library manager.
+
In your front-end HTML, load the components after the uibuilder client library so that the components register that uibuilder is in use and becomes responsive to it.
+
+
If using with Node-RED, you can install the components with the help of node-red-contrib-uibuilder. The uibuilder node has a library manager feature and you should use that to install the repository direct from GitHub (requires uibuilder v5+). In that case, uibuilder adds the repository to its web server and you can access them as: ../uibuilder/vendor/@totallyinformation/web-components/dist/button-send.js. See below for details.
+
Local installation
+
If you wish to install locally, you can npm install from the GitHub repository with npm install totallyinformation/web-components. If these ever get published to npm, you would install with npm install @totallyinformation/web-components. However, note that, at this point, I am not intending to publish them quickly as they are still evolving quite rapidly.
+
If installing locally, you will need to make the installed web-components/components/ folder available to your web server as a static resource folder.
+
Loading components into your web page
+
The individual component documentation contains details on how to load the component files. In general, however, there are two choices on how to load them.
+
Load as an ECMA module
+
This is the preferred method. However, it is generally best to load via a script module. While you can load them via your HTML as a script link, you loose some capability this way.
Or from the local resource of course. Note that this is not recommended. It is better to load them from a script module and then you can use an import statement.
+
Load from a standard script
+
Alternatively, you can load them in your main JavaScript script using dynamic imports as:
The disadvantage of this method is that the import function is asynchronous and so your own code may try to execute before the module has loaded. Generally, this won't matter if you aren't assigning the import to a variable. If you are, you may need to use top-level async or the promise-style then/catch.
+
The potential advantage of this approach is that you can access exported variables and methods from the component if any are available (see the syntax-highlight component for an example).
+
Visual Studio Code (VSCode) Intelligence
+
VSCode supposts the use of HTML and CSS Custom Data JSON files that describe custom web components and CSS in a way that gives some intelligence to the editor when writing HTML and CSS code.
+
This collection of web components uses Web Component Analyzer to help document the components. It is also used to create an html custom data file that can be added to VSCode or to a specific workspace or folder settings to provide additional Intellisense help for the components.
+
To do so, find the html custom data setting in VSCode settings and add:
All of the components have demo web pages in tests. There is a built-in Node.js mini web server. Running the npm script tests will start the server on port 8080. Opening http://127.0.0.1:8080 or http://127.0.0.1:8080/list.html will give a list of all available demos.
Components
These components can be considered beta quality or better. They may not be complete but they should have basic usefulness.
@@ -75,6 +114,14 @@
Components
+
button-send (ButtonSend)
+
A simple button that outputs key info either via a custom document event or as a message back to Node-RED (when used with UIBUILDER for Node-RED). Allows block contents on the button.
+
+
+
collapsible-headings (CollapsibleHeadings)
+
Turns a section of Hn headings and block contents into collapsible content around the heading levels.
+
+
visible-console (VisibleConsole)
Copies console log outputs to an on-screen visible block. Useful if needing to debug web apps on mobile devices with no access to the dev tools console.
@@ -96,10 +143,6 @@
Alpha Components
-
button-send (ButtonSend)
-
A pre-defined button that fires an event and sends a uibuilder msg when clicked. Includes attribs in the sent data.
-
-
chart-frappe (ChartFrappe)
A chart component using the Frappe chart library
@@ -246,106 +289,6 @@
Other supporting files and folders
libs/uib-brand.css - a copy of the alternate (new) stylesheet from uibuilder that these components can use.
-
Requirements
-
These are the requirements for any web component to be included in this repository.
-
-
-
MUST be standalone with no external requirements. Common internal library modules may be permitted however.
-
-
-
MUST be useable in the majority of modern browsers, anything supporting ES2019+ should be usable. IE will not be supported.
-
-
-
MUST use ES6+. Maxumum JavaScript version should be 2 years behind the leading edge and only features supported by the majority of mainstream browsers are allowed. Other features MAY be permitted as long as they are optional and do not produce errors.
-
-
-
MUST be linted using ESLINT. SHOULD use JavaScript Standard format (with some variations documented in the .eslintrc.js file).
-
-
-
MUST self-register the custom tag using customElements.define.
-
-
-
MUST use a Class name using a CamelCase version of the component name with an initial upper-case letter (e.g. syntax-highlight will be export default class SyntaxHighlight extends HTMLElement { ... } ).
-
-
-
MUST be documented in the docs folder.{}
-
-
-
SHOULD have a <slot> to allow nested rich content (where it makes sense).
-
-
-
SHOULD export a camelCase version of the component-name which contains any useful methods and data. (e.g. syntax-highlight should export syntaxHighlight).
Custom HTML tags MUST use pascal-case with at least 1 -.
-
Custom HTML tags MUST use lower-case attribute names.
-
-
Installation and loading
-
You can use these components directly from the jsdelivr CDN by referencing like: https://cdn.jsdelivr.net/gh/totallyinformation/web-components@master/components/button-send.js. So no install is required if you are happy to load from the Internet.
-
Local installation
-
If you wish to install locally, you can npm install from the GitHub repository with npm install totallyinformation/web-components. If these ever get published to npm, you would install with npm install @totallyinformation/web-components. However, note that, at this point, I am not intending to publish them quickly as they are still evolving quite rapidly.
-
If installing locally, you will need to make the installed web-components/components/ folder available to your web server as a static resource folder.
-
Using with Node-RED and uibuilder
-
If using with Node-RED, you can install the components with the help of node-red-contrib-uibuilder. The uibuilder node has a library manager feature and you should use that to install the repository direct from GitHub (requires uibuilder v5+). In that case, uibuilder adds the repository to its web server and you can access them as: ../uibuilder/vendor/@totallyinformation/web-components/components/button-send.js. See below for details.
-
Loading components into your web page
-
The individual component documentation contains details on how to load the component files. In general, however, there are two choices on how to load them.
-
Load as an ECMA module
-
This is the preferred method. However, it is generally best to load via a script module. While you can load them via your HTML as a script link, you loose some capability this way.
Or from the local resource of course. Note that this is not recommended. It is better to load them from a script module and then you can use an import statement.
-
Load from a standard script
-
Alternatively, you can load them in your main JavaScript script using dynamic imports as:
The disadvantage of this method is that the import function is asynchronous and so your own code may try to execute before the module has loaded. Generally, this won't matter if you aren't assigning the import to a variable. If you are, you may need to use top-level async or the promise-style then/catch.
-
The potential advantage of this approach is that you can access exported variables and methods from the component if any are available (see the syntax-highlight component for an example).
You can, of course, use the components direct from a CDN as shown above.
-
Otherwise, install this repository using the library manager in a uibuilder node in Node-RED.
-
-
Which results in something like:
-
-
Noting that this library does not actually have a default script so the listed on is spurious.
-
You can then access the components by loading them into your html or JavaScript as shown above.
-
Using the components
-
The components can, of course, be used in the same way as if not using uibuilder. However, there are additional capabilities aimed at making their use in conjunction with Node-RED and uibuilder even easier. Specifically reducing the amount of code required to use them.
-
Components will automatically recognise when uibuilder is being used. They will each:
-
-
Have a specific msg schema - when a msg with the matching schema is sent from Node-RED via uibuilder, a singular instance of the component on a page will be automatically updated. Where multiple instances are present, the msg must include an html id so that the msg will target that instance.
VSCode supposts the use of HTML and CSS Custom Data JSON files that describe custom web components and CSS in a way that gives some intelligence to the editor when writing HTML and CSS code.
-
This collection of web components uses Web Component Analyzer to help document the components. It is also used to create an html custom data file that can be added to VSCode or to a specific workspace or folder settings to provide additional Intellisense help for the components.
-
To do so, find the html custom data setting in VSCode settings and add:
A Zero dependency button web component that sends a msg or a document event when clicked.
+ Contains relevant data from data-*, topic and payload attributes (or properties),
+ includes a _meta object showing whether any modifier keys were used, the element id/name
+
@@ -14385,6 +14389,8 @@
exportsConstructor
+
new exports()
@@ -14432,12 +14438,15 @@
Properties:
-
name
+
payload
+any
+|
+
string
@@ -14448,7 +14457,7 @@
Properties:
-
Sync'd from name attribute
+
Can be an attribute or property. If used as property, must not use payload attribute in html, aAllows any data to be attached to payload. As an attribute, allows a string only.
container-br:construction - Document object event. evt.event:details contains the data
-
-
container-br:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
-
-
container-br:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
button-send:click - Document object event. evt.event:details contains the data
-
container-br:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
-NOTE that listeners can be attached either to the `document` or to the specific element instance.event:
+
{function} uibuilder.send - Sends a msg back to Node-RED if uibuilder available. topic,event: payload and _meta props may all be set.
A Zero dependency button web component that sends a msg or a document event when clicked.
- Contains relevant data from data-*, topic and payload attributes (or properties),
- includes a _meta object showing whether any modifier keys were used, the element id/name
-
@@ -21562,8 +21562,6 @@
exportsConstructor
-
new exports()
@@ -21611,15 +21609,12 @@
Properties:
-
payload
+
name
-any
-|
-
string
@@ -21630,7 +21625,7 @@
Properties:
-
Can be an attribute or property. If used as property, must not use payload attribute in html, aAllows any data to be attached to payload. As an attribute, allows a string only.
button-send:click - Document object event. evt.event:details contains the data
+
gauge-steel:construction - Document object event. evt.event:details contains the data
-
{function} uibuilder.send - Sends a msg back to Node-RED if uibuilder available. topic,event: payload and _meta props may all be set.
+
gauge-steel:connected - When an instance of the component is attached to the DOM. `evt.event:details` contains the details of the element.
+
+
gauge-steel:disconnected - When an instance of the component is removed from the DOM. `evt.event:details` contains the details of the element.
+
+
gauge-steel:attribChanged - When a watched attribute changes. `evt.details` contains the details of the change.
+NOTE that listeners can be attached either to the `document` or to the specific element instance.event:
-
-Which results in something like:
-
-
-
-Noting that this library does not actually have a default script so the listed on is spurious.
-
-You can then access the components by loading them into your html or JavaScript as shown above.
-
-### Using the components
-
-The components can, of course, be used in the same way as if not using uibuilder. However, there are additional capabilities aimed at making their use in conjunction with Node-RED and uibuilder even easier. Specifically reducing the amount of code required to use them.
-
-Components will automatically recognise when uibuilder is being used. They will each:
-
-* Have a specific msg schema - when a msg with the matching schema is sent from Node-RED via uibuilder, a singular instance of the component on a page will be automatically updated. Where multiple instances are present, the msg must include an html id so that the msg will target that instance.
-
-See the [component documentation](docs) for specific usage information for each component.
-
-
-
-## Visual Studio Code (VSCode) Intelligence
-
-VSCode supposts the use of HTML and CSS Custom Data JSON files that describe custom web components and CSS in a way that gives some intelligence to the editor when writing HTML and CSS code.
-
-This collection of web components uses [Web Component Analyzer](https://github.com/runem/web-component-analyzer) to help document the components. It is also used to create an html custom data file that can be added to VSCode or to a specific workspace or folder settings to provide additional Intellisense help for the components.
-
-To do so, find the html custom data setting in VSCode settings and add:
-
-```
-/path/to/totallyinformation/web-components/vscode-descriptors/ti-web-components.html-data.json
-```
-
## Discussions and suggestions
The best place to ask questions, or suggest improvements about these components is the [GitHub discussion board for this repository](https://github.com/TotallyInformation/web-components/discussions).
diff --git a/alpha/labelled-value.js b/alpha/labelled-value.js
index d05e9c5..598f857 100644
--- a/alpha/labelled-value.js
+++ b/alpha/labelled-value.js
@@ -172,7 +172,7 @@ export default class LabelledValue extends HTMLElement {
}
}
- document.dispatchEvent(new CustomEvent(`${componentName}:attribChanged`, {
+ document.dispatchEvent(new CustomEvent(`${this.localName}:attribChanged`, {
bubbles: true,
composed: true,
detail: {
diff --git a/docs/dev.md b/docs/dev.md
index 5896c2c..4dfb1ac 100644
--- a/docs/dev.md
+++ b/docs/dev.md
@@ -8,11 +8,14 @@ updated: 2024-09-22 14:34:05
## Standards
+These are the requirements and standards for any web component to be included in this repository.
+
+* MUST be standalone with no external requirements. Common include library modules (e.g. charts) MAY be imported however. The resulting file MUST be useable stand-alone.
+* MUST be useable in the majority of modern browsers, anything supporting ES2019+ should be usable. IE will not be supported.
+
* All components MUST self register the custom tag AND their Class Name. All tag namess are lower-case with at least one dash (_kebab-case_) . All Class names start with an upper-case letter and the name is the tag name in _PascalCase_. MUST self-register the custom tag using `customElements.define`.
* The Class is the default export and is also self-registered to the window global.
* MUST provide source-code in either `./src` (for production ready components) or `./alpha`. Any component in `./src` MUST be usable even if it is not feature complete.
-* MUST be useable in the majority of modern browsers. IE will not be supported.
-* MUST be standalone with no external requirements. Common include library modules (e.g. charts) MAY be imported however. The resulting file MUST be useable stand-alone.
* MUST have both IIFE and ESM minimised versions built using ESBUILD. The built versions should target common browser features no newer than 2-years old. Built versions will be in the `./dist` folder with alpha quality components built to the `./dist/alpha` folder. All built versions will include `.map` files for debugging.
* MUST use JSDoc to self-document. MUST use ESLint and follow the modified _JavaScript Standard_ formatting.
* MUST provide a document file in `./docs` describing use, settings, etc.
@@ -29,10 +32,16 @@ updated: 2024-09-22 14:34:05
* MUST NOT be dependent on UIBUILDER for Node-RED. SHOULD be enhanced if the UIBUILDER client library is loaded.
* SHOULD be derived from the `./libs/ti-base-component.js` class to inherit standard properties and methods.
* SHOULD meet the [Web Components Gold Standard](https://github.com/webcomponents/gold-standard/wiki).
+* SHOULD follow [Best practices](https://web.dev/articles/custom-elements-best-practices).
* SHOULD have a `