chore(bump): add strict mode to demo application (#6217)

valor-software · Aug 19, 2021 · e3b2d7d · e3b2d7d
1 parent 51808da
commit e3b2d7d
Show file tree

Hide file tree

Showing 141 changed files with 493 additions and 345 deletions.
diff --git a/apps/ngx-bootstrap-docs/src/assets/css/bootstrap-3.3.7/css/bootstrap.min.css.map b/apps/ngx-bootstrap-docs/src/assets/css/bootstrap-3.3.7/css/bootstrap.min.css.map
diff --git a/libs/common-docs/src/lib/api-docs/analytics/analytics.ts b/libs/common-docs/src/lib/api-docs/analytics/analytics.ts
@@ -49,10 +49,15 @@ export class Analytics {
   /**
    * Sends an event.
    */
-  trackEvent(action: string, category: string): void {
+  trackEvent(action: string, category?: string): void {
     if (!this.enabled) {
       return;
     }
+
+    if (!category) {
+      return;
+    }
+
     if (typeof ga !== 'undefined') {
       ga('send', {
         hitType: 'event',

diff --git a/libs/common-docs/src/lib/api-docs/api-doc-class/api-doc-class.component.html b/libs/common-docs/src/lib/api-docs/api-doc-class/api-doc-class.component.html
@@ -1,16 +1,16 @@
 <div class="api-doc-component" (click)="trackSourceClick()">
   <h3 [attr.id]="headerAnchor">
-    <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{apiDocs.fileName}}"
-       target="_blank" rel="noopener">{{apiDocs.className}}</a>
+    <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{apiDocs?.fileName}}"
+       target="_blank" rel="noopener">{{apiDocs?.className}}</a>
   </h3>
-  <p [innerHTML]="apiDocs.description"></p>
+  <p [innerHTML]="apiDocs?.description"></p>
 
-  <ng-template [ngIf]="apiDocs.properties && apiDocs.properties.length">
+  <ng-template [ngIf]="apiDocs?.properties && apiDocs?.properties?.length">
     <section>
       <h3>Properties</h3>
       <table class="table table-bordered">
         <tbody>
-        <tr *ngFor="let prop of apiDocs.properties">
+        <tr *ngFor="let prop of apiDocs?.properties">
           <td class="col-xs-3"><code>{{prop.name}}</code></td>
           <td class="col-xs-9">
             <div><i>Type: </i><code>{{ prop.type }}</code></div>
@@ -25,12 +25,12 @@ <h3>Properties</h3>
     </section>
   </ng-template>
 
-  <ng-template [ngIf]="apiDocs.methods && apiDocs.methods.length">
+  <ng-template [ngIf]="apiDocs?.methods && apiDocs?.methods?.length">
     <section>
       <h3 id="methods">Methods</h3>
       <table class="table table-bordered">
         <tbody>
-        <tr *ngFor="let method of apiDocs.methods">
+        <tr *ngFor="let method of apiDocs?.methods">
           <td class="col-xs-3"><code>{{method.name}}</code></td>
           <td class="col-xs-9">
             <div><i>Signature: </i><code>{{ methodSignature(method) }}</code>

diff --git a/libs/common-docs/src/lib/api-docs/api-doc-class/api-doc-class.component.ts b/libs/common-docs/src/lib/api-docs/api-doc-class/api-doc-class.component.ts
@@ -20,7 +20,7 @@ import { ComponentApi } from '../../models/components-api.model';
 })
 export class NgApiDocClassComponent {
   headerAnchor?: string;
-  apiDocs: ClassDesc;
+  apiDocs?: ClassDesc;
 
   private analytics: Analytics;
   private docs: NgApiDoc;
@@ -30,14 +30,16 @@ export class NgApiDocClassComponent {
     this.analytics = analytics;
 
     this.headerAnchor = content.anchor;
-    this.apiDocs = this.docs[content.title];
+    if (content?.title) {
+      this.apiDocs = this.docs[content.title];
+    }
   }
 
   methodSignature(method: MethodDesc): string {
     return signature(method);
   }
 
   trackSourceClick(): void {
-    this.analytics.trackEvent('Source File View', this.apiDocs.className);
+    this.analytics.trackEvent('Source File View', this.apiDocs?.className);
   }
 }
diff --git a/libs/common-docs/src/lib/api-docs/api-doc-config/api-doc-config.component.html b/libs/common-docs/src/lib/api-docs/api-doc-config/api-doc-config.component.html
@@ -1,16 +1,16 @@
 <div (click)="trackSourceClick()" class="api-doc-component">
   <h3 [attr.id]="headerAnchor">
-    <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{ apiDocs.fileName }}"
-       target="_blank" rel="noopener">{{ apiDocs.className }}</a>
+    <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{ apiDocs?.fileName }}"
+       target="_blank" rel="noopener">{{ apiDocs?.className }}</a>
   </h3>
-  <p [innerHTML]="apiDocs.description"></p>
+  <p [innerHTML]="apiDocs?.description"></p>
 
-  <ng-template [ngIf]="apiDocs.properties && apiDocs.properties.length">
+  <ng-template [ngIf]="apiDocs?.properties && apiDocs?.properties?.length">
     <section>
       <h3>Properties</h3>
       <table class="table table-bordered">
         <tbody>
-        <tr *ngFor="let prop of apiDocs.properties">
+        <tr *ngFor="let prop of apiDocs?.properties">
           <td class="col-xs-3"><code>{{ prop.name }}</code></td>
           <td class="col-xs-9">
             <div><i>Type: </i><code>{{ prop.type }}</code></div>
@@ -25,12 +25,12 @@ <h3>Properties</h3>
     </section>
   </ng-template>
 
-  <ng-template [ngIf]="apiDocs.methods && apiDocs.methods.length && this.isShowMethods">
+  <ng-template [ngIf]="apiDocs?.methods && apiDocs?.methods?.length && this.isShowMethods">
     <section>
       <h3>Methods</h3>
       <table class="table table-bordered">
         <tbody>
-        <tr *ngFor="let method of apiDocs.methods">
+        <tr *ngFor="let method of apiDocs?.methods">
           <td class="col-xs-3"><code>{{ method.name }}</code></td>
           <td class="col-xs-9">
             <div>

diff --git a/libs/common-docs/src/lib/api-docs/api-doc-config/api-doc-config.component.ts b/libs/common-docs/src/lib/api-docs/api-doc-config/api-doc-config.component.ts
@@ -24,7 +24,7 @@ const CONFIG_SUFFIX_LENGTH = 'Config'.length;
   templateUrl: './api-doc-config.component.html'
 })
 export class NgApiDocConfigComponent {
-  apiDocs: ClassDesc;
+  apiDocs?: ClassDesc;
   directiveName?: string;
   headerAnchor?: string;
   isShowMethods = false;
@@ -37,12 +37,14 @@ export class NgApiDocConfigComponent {
     this.docs = docs;
 
     this.headerAnchor = content.anchor;
-    this.apiDocs = this.docs[content.title];
+    if (content?.title) {
+      this.apiDocs = this.docs[content.title];
+    }
     this.isShowMethods = content.showMethods || this.isShowMethods;
     this.directiveName = content.title?.slice(0, -CONFIG_SUFFIX_LENGTH);
   }
 
   trackSourceClick(): void {
-    this.analytics.trackEvent('Source File View', this.apiDocs.className);
+    this.analytics.trackEvent('Source File View', this.apiDocs?.className);
   }
 }
diff --git a/libs/common-docs/src/lib/api-docs/api-doc/api-doc.component.html b/libs/common-docs/src/lib/api-docs/api-doc/api-doc.component.html
@@ -1,32 +1,32 @@
 <div (click)="trackSourceClick()" class="api-doc-component">
   <h3 [attr.id]="headerAnchor">
-    <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{ apiDocs.fileName }}"
-       target="_blank" rel="noopener">{{ apiDocs.className }}</a>
+    <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{ apiDocs?.fileName }}"
+       target="_blank" rel="noopener">{{ apiDocs?.className }}</a>
   </h3>
-  <p [innerHTML]="apiDocs.description"></p>
+  <p [innerHTML]="apiDocs?.descriptionSafeHtML"></p>
 
   <div class="table-responsive">
     <table class="table table-bordered">
       <tbody>
       <tr>
         <td class="col-xs-3">Selector</td>
-        <td class="col-xs-9"><code>{{ apiDocs.selector }}</code></td>
+        <td class="col-xs-9"><code>{{ apiDocs?.selector }}</code></td>
       </tr>
-      <tr *ngIf="apiDocs.exportAs">
+      <tr *ngIf="apiDocs?.exportAs">
         <td class="col-xs-3">Exported as</td>
-        <td class="col-xs-9"><code>{{ apiDocs.exportAs }}</code></td>
+        <td class="col-xs-9"><code>{{ apiDocs?.exportAs }}</code></td>
       </tr>
       </tbody>
     </table>
   </div>
 
-  <ng-template [ngIf]="apiDocs.inputs.length">
+  <ng-template [ngIf]="apiDocs?.inputs?.length">
     <section>
       <h3>Inputs</h3>
       <div class="table-responsive">
         <table class="table table-bordered">
           <tbody>
-          <tr *ngFor="let input of apiDocs.inputs">
+          <tr *ngFor="let input of apiDocs?.inputs">
             <td class="col-xs-3"><code>{{ input.name }}</code></td>
             <td class="col-xs-9">
               <div><i>Type: </i><code>{{ input.type }}</code></div>
@@ -36,7 +36,7 @@ <h3>Inputs</h3>
                   <span *ngIf="hasConfigProperty(input)">&mdash; initialized from {{ configServiceName }} service</span>
                 </div>
               </ng-template>
-              <div [innerHTML]="input.description"></div>
+              <div [innerHTML]="input.descriptionSafeHtml"></div>
             </td>
           </tr>
           </tbody>
@@ -45,34 +45,34 @@ <h3>Inputs</h3>
     </section>
   </ng-template>
 
-  <ng-template [ngIf]="apiDocs.outputs.length">
+  <ng-template [ngIf]="apiDocs?.outputs?.length">
     <section>
       <h3 id="outputs">Outputs</h3>
       <div class="table-responsive">
         <table class="table table-bordered">
           <tbody>
-          <tr *ngFor="let output of apiDocs.outputs">
+          <tr *ngFor="let output of apiDocs?.outputs">
             <td class="col-xs-3"><code>{{ output.name }}</code></td>
-            <td class="col-xs-9"><div [innerHTML]="output.description"></div></td>
+            <td class="col-xs-9"><div [innerHTML]="output.descriptionSafeHtml"></div></td>
           </tr>
           </tbody>
         </table>
       </div>
     </section>
   </ng-template>
 
-  <ng-template [ngIf]="apiDocs.methods.length && apiDocs.exportAs">
+  <ng-template [ngIf]="apiDocs?.methods?.length && apiDocs?.exportAs">
     <section>
       <h3 id="methods">Methods</h3>
       <div class="table-responsive">
         <table class="table table-bordered">
           <tbody>
-          <tr *ngFor="let method of apiDocs.methods">
+          <tr *ngFor="let method of apiDocs?.methods">
             <td class="col-xs-3"><code>{{ method.name }}</code></td>
             <td class="col-xs-9">
               <div><i>Signature: </i><code>{{ methodSignature(method) }}</code></div>
               <div><i>Return type: </i><code>{{ method.returnType }}</code></div>
-              <div [innerHTML]="method.description"></div>
+              <div [innerHTML]="method.descriptionSafeHtml"></div>
             </td>
           </tr>
           </tbody>

diff --git a/libs/common-docs/src/lib/api-docs/api-doc/api-doc.component.ts b/libs/common-docs/src/lib/api-docs/api-doc/api-doc.component.ts
@@ -7,6 +7,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ComponentApi } from '../../models/components-api.model';
 import { Analytics } from '../analytics/analytics';
 import { ClassDesc, DirectiveDesc, InputDesc, MethodDesc, NgApiDoc, PropertyDesc, signature } from '../api-docs.model';
+import { DomSanitizer } from '@angular/platform-browser';
 
 /**
  * Displays the API docs of a directive.
@@ -23,33 +24,39 @@ import { ClassDesc, DirectiveDesc, InputDesc, MethodDesc, NgApiDoc, PropertyDesc
   templateUrl: './api-doc.component.html'
 })
 export class NgApiDocComponent {
-  apiDocs: DirectiveDesc;
-  configServiceName: string;
+  apiDocs?: DirectiveDesc;
+  configServiceName?: string;
   headerAnchor: string | undefined;
 
   /**
    * Object which contains, for each input name of the directive, the corresponding property of the associated config
    * service (if any)
    */
 
-  private configProperties: { [propertyName: string]: PropertyDesc };
+  private configProperties?: { [propertyName: string]: PropertyDesc };
   private analytics: Analytics;
   private docs: NgApiDoc;
 
-  constructor(analytics: Analytics, docs: NgApiDoc, content: ComponentApi) {
+  constructor(analytics: Analytics, docs: NgApiDoc, content: ComponentApi, private sanitizer: DomSanitizer) {
     this.analytics = analytics;
     // todo: inject docs
     this.docs = docs;
-
     this.headerAnchor = content.anchor;
-    this.apiDocs = this.docs[content.title];
-    this.configServiceName = `${content.title}Config`;
-    const configApiDocs = this.docs[this.configServiceName];
-    this.configProperties = {};
-    if (configApiDocs) {
-      this.apiDocs.inputs.forEach(
-        (input: InputDesc) => (this.configProperties[input.name] = this.findInputConfigProperty(configApiDocs, input))
-      );
+    if (content?.title) {
+      this.apiDocs = this.docs[content.title];
+      this.configServiceName = `${content.title}Config`;
+      const configApiDocs = this.docs[this.configServiceName];
+      this.configProperties = {};
+      if (configApiDocs) {
+        this.apiDocs?.inputs.forEach(
+          (input: InputDesc) => {
+            if (this.configProperties && this.configProperties[input.name]) {
+              this.configProperties[input.name] = this.findInputConfigProperty(configApiDocs, input);
+            }
+          }
+        );
+      }
+      this.checkSecurApiDocs();
     }
   }
 
@@ -58,7 +65,7 @@ export class NgApiDocComponent {
    * property. If there is no matching config property, it reads it from the input.
    */
   defaultInputValue(input: InputDesc): string | undefined {
-    const configProperty = this.configProperties[input.name];
+    const configProperty = this.configProperties?.[input.name];
 
     return configProperty ? configProperty.defaultValue : input.defaultValue;
   }
@@ -67,18 +74,52 @@ export class NgApiDocComponent {
    * Returns true if there is a config service property matching with the given directive input
    */
   hasConfigProperty(input: InputDesc): boolean {
-    return !!this.configProperties[input.name];
+    return !!this.configProperties?.[input.name];
   }
 
   methodSignature(method: MethodDesc): string {
     return signature(method);
   }
 
   trackSourceClick(): void {
-    this.analytics.trackEvent('Source File View', this.apiDocs.className);
+    this.analytics.trackEvent('Source File View', this.apiDocs?.className);
   }
 
   private findInputConfigProperty(configApiDocs: ClassDesc, input: InputDesc): PropertyDesc {
     return configApiDocs.properties.filter((prop: PropertyDesc) => prop.name === input.name)[0];
   }
+
+  checkSecurApiDocs(): void {
+    if (!this.apiDocs) {
+      return;
+    }
+
+    if (this.apiDocs?.description) {
+      this.apiDocs.descriptionSafeHtML = this.sanitizer.bypassSecurityTrustHtml(this.apiDocs.description);
+    }
+
+    if (this.apiDocs?.inputs?.length) {
+      this.apiDocs.inputs.map(input => {
+        if  (input.description) {
+          input.descriptionSafeHtml =  this.sanitizer.bypassSecurityTrustHtml(input.description);
+        }
+      });
+    }
+
+    if (this.apiDocs?.outputs?.length) {
+      this.apiDocs.outputs.map(output => {
+        if  (output.description) {
+          output.descriptionSafeHtml =  this.sanitizer.bypassSecurityTrustHtml(output.description);
+        }
+      });
+    }
+
+    if (this.apiDocs?.methods?.length) {
+      this.apiDocs.methods.map(method => {
+        if  (method.description) {
+          method.descriptionSafeHtml =  this.sanitizer.bypassSecurityTrustHtml(method.description);
+        }
+      });
+    }
+  }
 }
diff --git a/libs/common-docs/src/lib/api-docs/api-docs.model.ts b/libs/common-docs/src/lib/api-docs/api-docs.model.ts
@@ -2,10 +2,13 @@
  * @author ng-team
  * @copyright ng-bootstrap
  */
+import { SafeHtml } from '@angular/platform-browser';
+
 export interface ClassDesc {
   fileName: string;
   className: string;
   description: string;
+  descriptionSafeHtML?: SafeHtml;
   properties: PropertyDesc[];
   methods: MethodDesc[];
 }
@@ -22,11 +25,13 @@ export interface PropertyDesc {
   type: string;
   description: string;
   defaultValue?: string;
+  descriptionSafeHtml?: SafeHtml;
 }
 
 export interface MethodDesc {
   name: string;
   description: string;
+  descriptionSafeHtml?: SafeHtml;
   args: ArgumentDesc[];
   returnType: string;
 }

diff --git a/libs/common-docs/src/lib/common/add-nav/add-nav.component.html b/libs/common-docs/src/lib/common/add-nav/add-nav.component.html
@@ -1,7 +1,7 @@
-<ul *ngIf="componentContent" (click)="goToSection($event)">
-  <li *ngFor="let item of componentContent">
+<ul *ngIf="_componentContent" (click)="goToSection($event)">
+  <li *ngFor="let item of _componentContent">
     <a routerLink="." [fragment]="item.anchor" [attr.data-anchor]="item.anchor">{{ item.name }}</a>
-    <ul *ngIf="item.content && item.content.length">
+    <ul *ngIf="item?.content && item.content?.length">
       <li *ngFor="let subItem of item.content">
         <a routerLink="." [fragment]="subItem.anchor" [attr.data-anchor]="subItem.anchor">{{ subItem.title }}</a>
     </ul>