@progress/kendo-typescript-tasks 11.1.1-dev.0 → 11.1.1-dev.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@progress/kendo-typescript-tasks",
   "description": "Kendo UI TypeScript package gulp tasks",
   "main": "gulp-tasks.js",
-  "version": "11.1.1-dev.0+124875b",
+  "version": "11.1.1-dev.3+36da1a2",
   "author": "Telerik",
   "license": "Apache-2.0",
   "scripts": {
@@ -18,7 +18,7 @@
     "typescript": "^4.3.4"
   },
   "dependencies": {
-    "@progress/kendo-common-tasks": "8.0.1-dev.1+124875b",
+    "@progress/kendo-common-tasks": "8.0.1-dev.5+36da1a2",
     "@typescript-eslint/eslint-plugin": "4.28.2",
     "@typescript-eslint/parser": "4.28.2",
     "core-js": "^3.18.0",
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "124875b2e9f5d2b90f4df5cfd17ebd42a8f06b42"
+  "gitHead": "36da1a23f5e89edeb92a6672e790c725baa3b86a"
 }

package/src/api/class-page.hbs

@@ -2,12 +2,26 @@
 
 # {{name}}
 {{comment}}
+
 {{#if props}}
 
+<table class="api-table api-table-properties">
+<thead>
+<tr>
+<th class="th-name">NAME</th>
+<th class="th-type">TYPE</th>
+<th class="th-default">DEFAULT</th>
+<th class="th-desc">DESCRIPTION</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
 {{#each props}}
 {{> property this }}
-
 {{/each}}
+</tbody>
+</table>
+
 {{/if}}
+
 {{> constructor}}
 {{> methods}}

package/src/api/code-block.hbs

@@ -1 +1 @@
-<span class='code'>{{ this }}</span>
+{{ this }}

package/src/api/component-page.hbs

@@ -12,29 +12,89 @@ Accessible in templates as `#{{exportName}}="{{exportAs}}"`
 {{/if}}
 
 {{#if inputs}}
+
 ## Inputs
 
+<table class="api-table api-table-inputs">
+<thead>
+<tr>
+<th class="th-name">NAME</th>
+<th class="th-type">TYPE</th>
+<th class="th-default">DEFAULT</th>
+<th class="th-desc">DESCRIPTION</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
 {{#each inputs}}
 {{> property this }}
-
 {{/each}}
+</tbody>
+</table>
+
 {{/if}}
+
 {{#if fields}}
 
 ## Fields
 
+<table class="api-table api-table-fields">
+<thead>
+<tr>
+<th class="th-name">NAME</th>
+<th class="th-type">TYPE</th>
+<th class="th-default">DEFAULT</th>
+<th class="th-desc">DESCRIPTION</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
 {{#each fields}}
 {{> property this }}
-
 {{/each}}
+</tbody>
+</table>
+
 {{/if}}
+
 {{#if events}}
+
 ## Events
 
+<table class="api-table api-table-events">
+<thead>
+<tr>
+<th class="th-name">NAME</th>
+<th class="th-type">TYPE</th>
+<th class="th-desc">DESCRIPTION</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
 {{#each events}}
-### {{name}} {{> code_block type }}
+<tr>
+<td class="table-cell-name">
+
+
+{{name}}
+
+
+</td>
+<td type class="table-cell-type">
+
+
+{{> code_block type }}
+
+
+</td>
+<td class="table-cell-comment">
+
 {{comment}}
 
+
+</td>
+</tr>
 {{/each}}
+</tbody>
+</table>
+
 {{/if}}
+
 {{> methods}}

package/src/api/component-page.js

@@ -65,4 +65,3 @@ const componentPage = (component, meta) => {
 };
 
 module.exports = componentPage;
-

package/src/api/index-page.hbs

@@ -4,13 +4,20 @@ page_title: {{platform}} {{friendlyName}} API | Kendo UI{{#if platform}} for {{p
 description: "Learn how to build custom functionality of the {{platform}} {{friendlyName}} by Kendo UI with the help of the options available in the API."
 slug: {{slug}}
 api_reference: true
+type: index_api
 position: 1
 ---
 
+<span class="api-text">
+
+
 # {{friendlyName}} API
 
+
+</span>
+
 {{#each modules}}
-<h2 class="module-name">
+<h2 class="api-module-name">
 {{#if @key}}
 {{@key}}
 {{else}}
@@ -18,25 +25,29 @@ position: 1
 {{/if}}
 </h2>
 
-<div class="api-index row auto-clear mt-20 pb-20 mb-40">
+<div class="api-index">
 
 {{#each this}}
-<div class="mb-30 col-xs-w col-sm-6 col-md-6 col-lg-3">
-<div class="component-item">
-  <h2 class="mt-0 mb-5">
-    <span class="component-icon symbol symbol-{{@key}}" title=""></span>
-    {{{ capitalize @key }}}
-  </h2>
-
-  <ul class="list-unstyled">
+<div class="api-index-section">
+
+
+<span class="section-key">
+
+
+## {{{ capitalize @key }}}
+
+
+</span>
+
+
+  <ul class="api-item-list">
   {{#each this}}
-    <li>
+    <li class="api-item">
         <a href="{% slug {{slug}} %}">{{name}}</a>
     </li>
   {{/each}}
   </ul>
 </div>
-</div>
 {{/each}}
 
 </div>

package/src/api/member-meta.hbs

@@ -2,5 +2,6 @@
 title: {{name}}
 description: "Learn how to build custom functionality when working with the {{platform}} {{friendlyName}} by Kendo UI with the help of the {{name}}."
 api_reference: true
+type: inner_api
 slug: {{slug}}
 ---

package/src/api/methods.hbs

@@ -3,22 +3,110 @@
 ## Methods
 
 {{#each methods}}
-### {{name}}
+<table class="api-table api-table-methods">
+<thead class="api-table-methods-head">
+<tr>
+<th>
+
+
+{{name}}
+
+
+</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
 {{comment}}
 
+
+</td>
+</tr>
 {{#if params}}
-#### Parameters
+<table class="api-table api-table-parameters">
+<thead class="api-table-parameters-head">
+<tr>
+<th class="th-name">
+
+
+##### Parameters
+
+
+</th>
+<th class="th-type"></th>
+<th class="th-desc"></th>
+</tr>
+</thead>
+<tbody class="api-table-body">
 {{#each params}}
-##### {{name}} {{> code_block type }}
+<tr>
+<td>
+
+
+{{name}}
+
+
+</td>
+<td type>
+
+{{> code_block type }}
+
+
+</td>
+<td>
+
+
 {{comment}}
 
+
+</td>
+</tr>
 {{/each}}
+</tbody>
+</table>
 {{/if}}
+</tbody>
+</table>
+
 {{#if returns}}
-#### Returns
-{{> code_block returns.type }}{{#if returns.comment}} {{returns.comment}}{{/if}}
+<table class="api-table api-table-returns">
+<thead class="api-table-returns-head">
+<tr>
+<th class="th-type">
+
+
+##### Returns
+
+
+</th>
+<th class="th-desc"></th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td type>
+
+
+{{> code_block returns.type }}
+
+
+</td>
+<td>
+
+
+{{returns.comment}}
+
+
+</td>
+</tr>
+</tbody>
+</table>
 {{/if}}
 
 {{/each}}
+
 {{/if}}
 

package/src/api/property.hbs

@@ -1,6 +1,30 @@
-### {{name}} {{> code_block type }}{{defaultValue}}
-{{#if comment}}
+<tr>
+<td class="table-cell-name">
+
+
+{{name}}
+
+
+</td>
+<td type class="table-cell-type">
+
+
+{{> code_block type }}
+
+
+</td>
+<td class="table-cell-default">
+
+
+{{defaultValue}}
+
+
+</td>
+<td class="table-cell-comment">
+
+
 {{comment}}
-{{else}}
-<br />
-{{/if}}
+
+
+</td>
+</tr>

package/src/api/react/component-page.hbs

@@ -5,10 +5,22 @@
 
 {{#if properties}}
 
+<table class="api-table api-table-properties">
+<thead>
+<tr>
+<th class="th-name">NAME</th>
+<th class="th-type">TYPE</th>
+<th class="th-default">DEFAULT</th>
+<th class="th-desc">DESCRIPTION</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
 {{#each properties}}
 {{> property this }}
-
 {{/each}}
+</tbody>
+</table>
+
 {{/if}}
 
 {{> methods}}

package/test/api.js

@@ -103,12 +103,12 @@ describe('API generation', () => {
 
         it('adds constructor docs', () => {
             expect(page).toContain('## Constructors');
-            expect(page).toContain('### Shape&lt;T&gt; <span class=\'code\'>(options?: any)</span>');
+            expect(page).toContain('### Shape&lt;T&gt; (options?: any)');
         });
 
         it('adds methods', () => {
-            expect(page).toContain('## Methods');
-            expect(page).toContain('### get');
+            const pageContent = `## Methods\n\n<table class="api-table api-table-methods">\n<thead class="api-table-methods-head">\n<tr>\n<th>\n\n\nget\n\n\n</th>\n</tr>\n</thead>\n<tbody class="api-table-body">\n<tr>\n<td>\n\n\nGets the value of the specified option.\n\n\n</td>\n</tr>\n</tbody>\n</table>`;
+            expect(page).toContain(pageContent);
         });
 
         it('render default value', () => {
@@ -269,15 +269,15 @@ describe('API generation', () => {
         it('render fields without decorators, but with comment', () => {
 
             const page = componentPage(fieldsData.withComment, packageInfo);
-
-            expect(page).toContain('Fields\n\n### bar');
+            const pageContent = `## Fields\n\n<table class="api-table api-table-fields">\n<thead>\n<tr>\n<th class="th-name">NAME</th>\n<th class="th-type">TYPE</th>\n<th class="th-default">DEFAULT</th>\n<th class="th-desc">DESCRIPTION</th>\n</tr>\n</thead>\n<tbody class="api-table-body">\n<tr>\n<td class="table-cell-name">\n\n\nbar\n\n\n</td>\n<td type class="table-cell-type">\n\n\nQueryList&lt;string&gt;\n\n\n</td>\n<td class="table-cell-default">\n\n\n\n\n\n</td>\n<td class="table-cell-comment">\n\n\nsome comment\n\nlong text\n\n\n</td>\n</tr>\n</tbody>\n</table>`;
+            expect(page).toContain(pageContent);
         });
 
         it('render fields with decorators and comment', () => {
 
             const page = componentPage(fieldsData.withCommentAndDecorator, packageInfo);
-
-            expect(page).toContain('Fields\n\n### bar');
+            const pageContent = `## Fields\n\n<table class="api-table api-table-fields">\n<thead>\n<tr>\n<th class="th-name">NAME</th>\n<th class="th-type">TYPE</th>\n<th class="th-default">DEFAULT</th>\n<th class="th-desc">DESCRIPTION</th>\n</tr>\n</thead>\n<tbody class="api-table-body">\n<tr>\n<td class="table-cell-name">\n\n\nbar\n\n\n</td>\n<td type class="table-cell-type">\n\n\nQueryList&lt;string&gt;\n\n\n</td>\n<td class="table-cell-default">\n\n\n\n\n\n</td>\n<td class="table-cell-comment">\n\n\nsome comment\n\nlong text\n\n\n</td>\n</tr>\n</tbody>\n</table>`;
+            expect(page).toContain(pageContent);
         });
     });
 
@@ -287,16 +287,15 @@ describe('API generation', () => {
         it('render inputs name and type', () => {
 
             const page = componentPage(inputsData.withoutNameMapping, packageInfo);
-
-            expect(page).toContain('Inputs\n\n### bar');
-            expect(page).toContain('boolean');
+            const pageContent = `## Inputs\n\n<table class="api-table api-table-inputs">\n<thead>\n<tr>\n<th class="th-name">NAME</th>\n<th class="th-type">TYPE</th>\n<th class="th-default">DEFAULT</th>\n<th class="th-desc">DESCRIPTION</th>\n</tr>\n</thead>\n<tbody class="api-table-body">\n<tr>\n<td class="table-cell-name">\n\n\nbar\n\n\n</td>\n<td type class="table-cell-type">\n\n\nboolean\n\n\n</td>\n<td class="table-cell-default">\n\n\n\n\n\n</td>\n<td class="table-cell-comment">\n\n\n\n\n\n</td>\n</tr>\n</tbody>\n</table>`;
+            expect(page).toContain(pageContent);
         });
 
         it('render fields with mapped name', () => {
 
             const page = componentPage(inputsData.withNameMapping, packageInfo);
-
-            expect(page).toContain('Inputs\n\n### foo');
+            const pageContent = `## Inputs\n\n<table class="api-table api-table-inputs">\n<thead>\n<tr>\n<th class="th-name">NAME</th>\n<th class="th-type">TYPE</th>\n<th class="th-default">DEFAULT</th>\n<th class="th-desc">DESCRIPTION</th>\n</tr>\n</thead>\n<tbody class="api-table-body">\n<tr>\n<td class="table-cell-name">\n\n\nfoo\n\n\n</td>\n<td type class="table-cell-type">\n\n\nboolean\n\n\n</td>\n<td class="table-cell-default">\n\n\n\n\n\n</td>\n<td class="table-cell-comment">\n\n\n\n\n\n</td>\n</tr>\n</tbody>\n</table>`;
+            expect(page).toContain(pageContent);
         });
     });
 
@@ -312,15 +311,14 @@ describe('API generation', () => {
 
         it('render event with type', () => {
             const page = componentPage(eventsData.withoutNameMapping, packageInfo);
-
-            expect(page).toContain('Events\n\n### valueChange');
-            expect(page).toContain('EventEmitter');
+            const pageContent = `## Events\n\n<table class="api-table api-table-events">\n<thead>\n<tr>\n<th class="th-name">NAME</th>\n<th class="th-type">TYPE</th>\n<th class="th-desc">DESCRIPTION</th>\n</tr>\n</thead>\n<tbody class="api-table-body">\n<tr>\n<td class="table-cell-name">\n\n\nvalueChange\n\n\n</td>\n<td type class="table-cell-type">\n\n\nEventEmitter&lt;any&gt;\n\n\n</td>\n<td class="table-cell-comment">\n\nFires each time the user selects a new value.\n\n\n</td>\n</tr>\n</tbody>\n</table>`;
+            expect(page).toContain(pageContent);
         });
 
         it('render event binding name if available', () => {
             const page = componentPage(eventsData.withNameMapping, packageInfo);
-
-            expect(page).toContain('Events\n\n### focus');
+            const pageContent = `## Events\n\n<table class="api-table api-table-events">\n<thead>\n<tr>\n<th class="th-name">NAME</th>\n<th class="th-type">TYPE</th>\n<th class="th-desc">DESCRIPTION</th>\n</tr>\n</thead>\n<tbody class="api-table-body">\n<tr>\n<td class="table-cell-name">\n\n\nfocus\n\n\n</td>\n<td type class="table-cell-type">\n\n\nEventEmitter&lt;any&gt;\n\n\n</td>\n<td class="table-cell-comment">\n\nFires each time the user focuses the input element.\n\n\n</td>\n</tr>\n</tbody>\n</table>`;
+            expect(page).toContain(pageContent);
         });
 
         it('should not throw when no decorators are available', () => {
@@ -354,7 +352,7 @@ describe('API generation', () => {
         });
 
         const assertModule = name => {
-            expect(new RegExp(`<h2 class="module-name">\\s*${name}\\s*<\\/h2>`).test(page)).toBeTruthy();
+            expect(new RegExp(`<h2 class="api-module-name">\\s*${name}\\s*<\\/h2>`).test(page)).toBeTruthy();
         };
 
         it('renders default group', () => {