feat(libraries): added support for kendo ui and ng bootstrap

Author: ghaschel

.vscode/settings.json

@@ -11,7 +11,7 @@
   "[typescript]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
-      "source.fixAll": true
+      "source.fixAll": "explicit"
     }
   },
   "[html]": {

README.md

@@ -38,6 +38,8 @@ This plugin adds syntax highlighting for angular HTML template files in VS Code.
   - [Comments](#comments)
   - [Entities](#entities)
   - [PrimeNG](#primeng)
+  - [NG Bootstrap](#ng-bootstrap)
+  - [Kendo UI](#kendo-ui)
   - [Custom components](#custom-components)
   - [DOM events](#dom-events)
   - [Generic attributes](#generic-attributes)
@@ -135,6 +137,18 @@ This plugin adds syntax highlighting for angular HTML template files in VS Code.
 
 <img src="assets/prime-ng-tags.png" title="Prime NG Tags" alt="Prime NG Tags" />
 
+## NG Bootstrap
+
+> See the [complete list](docs/NG-BOOTSTRAP.md)
+
+<img src="assets/ng-bootstrap-tags.png" title="NG Bootstrap Tags" alt="NG Bootstrap Tags" />
+
+## Kendo UI
+
+> See the [complete list](docs/KENDO-UI.md)
+
+<img src="assets/kendo-ui-tags.png" title="Kendo UI Tags" alt="Kendo UI Tags" />
+
 ## Custom components
 
 > See [color-customization](docs/SETTINGS.MD)

assets/kendo-ui-tags.png

@@ -0,0 +1,181 @@
+# Kendo UI Specific Tags
+
+> List of Kendo UI element tags which support custom syntax highlithging
+
+- kendo-window
+- kendo-upload
+- kendo-treeview
+- kendo-treelist-spacer
+- kendo-treelist-pdf
+- kendo-treelist-excel
+- kendo-treelist-column
+- kendo-treelist-checkbox-column
+- kendo-treelist
+- kendo-toolbar-splitbutton
+- kendo-toolbar-spacer
+- kendo-toolbar-separator
+- kendo-toolbar-dropdownbutton
+- kendo-toolbar-buttongroup
+- kendo-toolbar-button
+- kendo-toolbar
+- kendo-timepicker
+- kendo-tilelayout-item-body
+- kendo-tilelayout-item
+- kendo-tilelayout
+- kendo-textbox
+- kendo-textarea
+- kendo-tabstrip-tab
+- kendo-tabstrip
+- kendo-switch
+- kendo-svgicon
+- kendo-stepper
+- kendo-stacklayout
+- kendo-spreadsheet
+- kendo-splitter-pane
+- kendo-splitter
+- kendo-splitbutton
+- kendo-sparkline
+- kendo-sortable
+- kendo-slider-messages
+- kendo-slider
+- kendo-skeleton
+- kendo-signature
+- kendo-scrollview
+- kendo-scheduler-week-view
+- kendo-scheduler-timeline-view
+- kendo-scheduler-month-view
+- kendo-scheduler-day-view
+- kendo-scheduler-agenda-view
+- kendo-scheduler
+- kendo-rating
+- kendo-rangeslider
+- kendo-radialgauge
+- kendo-qrcode
+- kendo-progressbar
+- kendo-popup
+- kendo-popover
+- kendo-pivotgrid
+- kendo-pdfviewer
+- kendo-pdf-export
+- kendo-panelbar-item
+- kendo-panelbar
+- kendo-numerictextbox
+- kendo-multiviewcalendar
+- kendo-multiselecttree
+- kendo-multiselect
+- kendo-multicolumncombobox
+- kendo-menu
+- kendo-maskedtextbox
+- kendo-map-tile-layer
+- kendo-map-shape-layer
+- kendo-map-marker-layer
+- kendo-map-layers
+- kendo-map-bubble-layer
+- kendo-map
+- kendo-loader
+- kendo-listview
+- kendo-listbox
+- kendo-lineargauge
+- kendo-label
+- kendo-icon
+- kendo-gridlayout-item
+- kendo-gridlayout
+- kendo-grid-spacer
+- kendo-grid-pdf
+- kendo-grid-excel
+- kendo-grid-column-group
+- kendo-grid-column
+- kendo-grid-checkbox-column
+- kendo-grid
+- kendo-gantt-timeline-week-view
+- kendo-gantt-timeline-month-view
+- kendo-gantt-timeline-day-view
+- kendo-gantt-column-group
+- kendo-gantt-column
+- kendo-gantt
+- kendo-formhint
+- kendo-formfield
+- kendo-formerror
+- kendo-floatinglabel
+- kendo-floatingactionbutton
+- kendo-flatcolorpicker
+- kendo-filter
+- kendo-fileselect
+- kendo-expansionpanel
+- kendo-excelexport-column
+- kendo-excelexport
+- kendo-editor
+- kendo-dropdowntree
+- kendo-dropdownlist
+- kendo-dropdownbutton
+- kendo-drawer-content
+- kendo-drawer-container
+- kendo-drawer
+- kendo-dialog-actions
+- kendo-dialog
+- kendo-datetimepicker
+- kendo-daterange
+- kendo-datepicker
+- kendo-dateinput
+- kendo-datapager
+- kendo-contextmenu
+- kendo-combobox-column
+- kendo-combobox
+- kendo-colorpicker
+- kendo-colorpalette
+- kendo-colorgradient
+- kendo-circularprogressbar
+- kendo-circulargauge
+- kendo-chunkprogressbar
+- kendo-chiplist
+- kendo-chip
+- kendo-chat
+- kendo-chart-y-axis-item-crosshair-tooltip
+- kendo-chart-y-axis-item-crosshair
+- kendo-chart-y-axis-item
+- kendo-chart-y-axis
+- kendo-chart-x-axis-item-crosshair-tooltip
+- kendo-chart-x-axis-item-crosshair
+- kendo-chart-x-axis-item
+- kendo-chart-x-axis
+- kendo-chart-value-axis-item
+- kendo-chart-value-axis
+- kendo-chart-tooltip
+- kendo-chart-title
+- kendo-chart-series-item-tooltip
+- kendo-chart-series-item-markers
+- kendo-chart-series-item-labels-to
+- kendo-chart-series-item-labels-from
+- kendo-chart-series-item-labels
+- kendo-chart-series-item
+- kendo-chart-series-defaults
+- kendo-chart-series
+- kendo-chart-legend
+- kendo-chart-category-axis-item
+- kendo-chart-category-axis
+- kendo-chart-area
+- kendo-chart
+- kendo-card-header
+- kendo-card-footer
+- kendo-card-body
+- kendo-card-actions
+- kendo-card
+- kendo-calendar
+- kendo-buttongroup
+- kendo-button
+- kendo-breadcrumb
+- kendo-bottomnavigation
+- kendo-barcode
+- kendo-badge-container
+- kendo-badge
+- kendo-avatar
+- kendo-autocomplete
+- kendo-arcgauge
+- kendo-appbar-spacer
+- kendo-appbar-section
+- kendo-appbar
+- kendo-actionsheet
+
+## Reference
+
+- [Telerik docs](https://telerik.com/kendo-angular-ui)

assets/ng-bootstrap-tags.png

@@ -0,0 +1,28 @@
+# NG Bootstrap Specific Tags
+
+> List of NG Bootstrap element tags which support custom syntax highlithging
+
+- ngb-typeahead-window
+- ngb-tooltip-window
+- ngb-toast
+- ngb-timepicker
+- ngb-rating
+- ngb-progressbar-stacked
+- ngb-progressbar
+- ngb-popover-window
+- ngb-pagination
+- ngb-offcanvas-panel
+- ngb-offcanvas-backdrop
+- ngb-modal-window
+- ngb-modal-backdrop
+- ngb-highlight
+- ngb-datepicker-navigation-select
+- ngb-datepicker-navigation
+- ngb-datepicker-month
+- ngb-datepicker
+- ngb-carousel
+- ngb-alert
+
+## Reference
+
+- [NG Bootstrap docs](https://ng-bootstrap.github.io/#/components)

docs/KENDO-UI.md

@@ -15,6 +15,8 @@
   - [Interpolations](#interpolations)
   - [Control Flow](#control-flow)
 - [PrimeNG](#primeng)
+- [NG Bootstrap](#ng-bootstrap)
+- [Kendo UI](#kendo-ui)
 - [HTML](#html)
   - [Doctype](#doctype)
   - [Entities](#entities)
@@ -124,6 +126,18 @@
 
 - `p-calendar` - entity.name.tag.html.primeng
 
+# NG Bootstrap
+
+<img src="../assets/ng-bootstrap-tags.png" title="NG Bootstrap Tags" alt="NG Bootstrap Tags" />
+
+- `ngb-toast` - entity.name.tag.html.ng-bootstrap
+
+# Kendo UI
+
+<img src="../assets/kendo-ui-tags.png" title="Kendo UI Tags" alt="Kendo UI Tags" />
+
+- `kendo-editor` - entity.name.tag.html.kendo
+
 # HTML
 
 ## Doctype

docs/NG-BOOTSTRAP.md

@@ -306,6 +306,26 @@
           }
         }
       },
+      {
+        "title": "NG Bootstrap",
+        "properties": {
+          "vscode-angular-html.ngBootstrapElementTags": {
+            "type": "string",
+            "default": "",
+            "markdownDescription": "%ext.settings.ngBootstrap.ngBootstrapElementTags%"
+          }
+        }
+      },
+      {
+        "title": "Kendo UI",
+        "properties": {
+          "vscode-angular-html.kendoUiElementTags": {
+            "type": "string",
+            "default": "",
+            "markdownDescription": "%ext.settings.kendo.kendoUiElementTags%"
+          }
+        }
+      },
       {
         "title": "SVG",
         "properties": {

docs/THEMING.md

@@ -40,6 +40,8 @@
   "ext.settings.angular.controlFlowPrefix": "Matches Angular's control flow keyword prefix (@).\n\n* `@`if (showBody) { &#60;body-cmp/&#62; }\n\n* `@`else if (showSummary) { &#60;summary-cmp/&#62; }\n\n* `@`else { Nothing to see here }\n\n```html\n\n@if (showBody) {\n\t<body-cmp />\n} @else if (showSummary) {\n\t<summary-cmp />\n} @else {\n\tNothing to see here\n}\n```\nLeave it empty to disable for this item only",
   "ext.settings.angular.controlFlowKeyword": "Matches Angular's control flow keywords.\n\n* @`if` (showBody) { &#60;body-cmp/&#62; }\n\n* @`else if` (showSummary) { &#60;summary-cmp/&#62; }\n\n* @`else` { Nothing to see here }\n\n```html\n\n@if (showBody) {\n\t<body-cmp />\n} @else if (showSummary) {\n\t<summary-cmp />\n} @else {\n\tNothing to see here\n}\n```\nLeave it empty to disable for this item only",
   "ext.settings.primeng.primeNgElementTags": "Matches PrimeNG-specific element tags.\n\n* &#60;`p-calendar`&#62;&#60;/`p-calendar`&#62;\n\n* &#60;`p-button`&#62;&#60;/`p-button`&#62;\n\n```html\n\n<p-calendar></p-calendar>\n<p-button></p-button>\n\n\n```\nLeave it empty to disable for this item only",
+  "ext.settings.ngBootstrap.ngBootstrapElementTags": "Matches NG Bootstrap-specific element tags.\n\n* &#60;`ngb-alert`&#62;&#60;/`ngb-alert`&#62;\n\n* &#60;`ngb-carousel`&#62;&#60;/`ngb-carousel`&#62;\n\n```html\n\n<ngb-alert></ngb-alert>\n<ngb-carousel></ngb-carousel>\n\n\n```\nLeave it empty to disable for this item only",
+  "ext.settings.kendo.kendoUiElementTags": "Matches Kendo UI-specific element tags.\n\n* &#60;`kendo-window`&#62;&#60;/`kendo-window`&#62;\n\n* &#60;`kendo-upload`&#62;&#60;/`kendo-upload`&#62;\n\n```html\n\n<kendo-window></kendo-window>\n<kendo-upload></kendo-upload>\n\n\n```\nLeave it empty to disable for this item only",
   "ext.settings.svg.svgTags": "Matches known SVG elements.\n\n* &#60;`circle`&#62;&#60;/`circle`&#62;\n\n* &#60;`path`&#62;&#60;/`path`&#62;\n\n```html\n\n<circle></circle>\n<svg>\n\t<circle></circle>\n\t<path></path>\n</svg>\n\n\n```\nLeave it empty to disable for this item only",
   "ext.settings.svg.svgDAttributePathCommands": "Matches SVG d attribute path commands.\n\n* &#60;path d=\"`M`202.35,163.64`l`-4.38-13.1`h`-2.13`v`-3.85`h`9.1`v`3.85`h`-1.82`l`2.05,6.2`l`3.41-10.05\" /&#62;\n\n```html\n\n<svg>\n\t<path d=\"M202.35,163.64l-4.38-13.1h-2.13v-3.85h9.1v3.85h-1.82l2.05,6.2l3.41-10.05\" />\n</svg>\n\n\n```\nLeave it empty to disable for this item only",
   "ext.settings.xml.xmlTagNamespaceDivider": "Matches XML/HTML element namespace colon separator.\n\n* &#60;li`:`title&#62;Book Title&#60;/li`:`title&#62;\n\n```html\n\n<li:title>Book Title</li:title>\n\n\n```\nLeave it empty to disable for this item only",

package.json

@@ -40,6 +40,8 @@
   "ext.settings.angular.controlFlowPrefix": "Corresponde ao prefixo de palavras-chave de fluxo de controle do Angular (@).\n\n* `@`if (showBody) { &#60;body-cmp/&#62; }\n\n* `@`else if (showSummary) { &#60;summary-cmp/&#62; }\n\n* `@`else { Nothing to see here }\n\n```html\n\n@if (showBody) {\n\t<body-cmp />\n} @else if (showSummary) {\n\t<summary-cmp />\n} @else {\n\tNothing to see here\n}\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.angular.controlFlowKeyword": "Corresponde a palavras-chave de fluxo de controle do Angular.\n\n* @`if` (showBody) { &#60;body-cmp/&#62; }\n\n* @`else if` (showSummary) { &#60;summary-cmp/&#62; }\n\n* @`else` { Nothing to see here }\n\n```html\n\n@if (showBody) {\n\t<body-cmp />\n} @else if (showSummary) {\n\t<summary-cmp />\n} @else {\n\tNothing to see here\n}\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.primeng.primeNgElementTags": "Corresponde a tags específicas do PrimeNG\n\n* &#60;`p-calendar`&#62;&#60;/`p-calendar`&#62;\n\n* &#60;`p-button`&#62;&#60;/`p-button`&#62;\n\n```html\n\n<p-calendar></p-calendar>\n<p-button></p-button>\n\n\n```\nDeixe em branco para desativar para este item.",
+  "ext.settings.ngBootstrap.ngBootstrapElementTags": "Corresponde a tags específicas do NG Bootstrap\n\n* &#60;`ngb-alert`&#62;&#60;/`ngb-alert`&#62;\n\n* &#60;`ngb-carousel`&#62;&#60;/`ngb-carousel`&#62;\n\n```html\n\n<ngb-alert></ngb-alert>\n<ngb-carousel></ngb-carousel>\n\n\n```\nDeixe em branco para desativar para este item.",
+  "ext.settings.kendo.kendoUiElementTags": "Corresponde a tags específicas da Kendo UI\n\n* &#60;`kendo-window`&#62;&#60;/`kendo-window`&#62;\n\n* &#60;`kendo-upload`&#62;&#60;/`kendo-upload`&#62;\n\n```html\n\n<kendo-window></kendo-window>\n<kendo-upload></kendo-upload>\n\n\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.svg.svgTags": "Corresponde a elementos conhecidos do SVG.\n\n* &#60;`circle`&#62;&#60;/`circle`&#62;\n\n* &#60;`path`&#62;&#60;/`path`&#62;\n\n```html\n\n<circle></circle>\n<svg>\n\t<circle></circle>\n\t<path></path>\n</svg>\n\n\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.svg.svgDAttributePathCommands": "Corresponde a comandos do atributo d de tags path no SVG.\n\n* &#60;path d=\"`M`202.35,163.64`l`-4.38-13.1`h`-2.13`v`-3.85`h`9.1`v`3.85`h`-1.82`l`2.05,6.2`l`3.41-10.05\" /&#62;\n\n```html\n\n<svg>\n\t<path d=\"M202.35,163.64l-4.38-13.1h-2.13v-3.85h9.1v3.85h-1.82l2.05,6.2l3.41-10.05\" />\n</svg>\n\n\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.xml.xmlTagNamespaceDivider": "Corresponde ao separador de namespace dois pontos de elementos XML/HTML.\n\n* &#60;li`:`title&#62;Book Title&#60;/li`:`title&#62;\n\n```html\n\n<li:title>Book Title</li:title>\n\n\n```\nDeixe em branco para desativar para este item.",