Fixes for the scopes

demo/swagger.yaml

@@ -336,6 +336,7 @@ paths:
       summary: Finds Pets by tags
       description: 'Muliple tags can be provided with comma seperated strings. Use tag1, tag2, tag3 for testing.'
       operationId: findPetsByTags
+      deprecated: true
       produces:
         - application/xml
         - application/json

lib/components/AuthScopes/auth-scopes.html

@@ -1,12 +1,13 @@
 <ng-template [ngIf]="scopes">
-    <span class="hint--html hint--bottom-left hint--large  oauth-scopes-hint">
-      !
       <div class="oauth-scopes hint__content">
         <span class="oauth-scopes-header">OAuth2 Scopes</span>
-        <div *ngFor="let scope of scopes.scopes" class="oauth-scope">
-          <p class="oauth-scope-name"> {{scope.name}} </p>
-          <p class="oauth-scope-description"> {{scope.description}} </p>
+        <div class="oauth-scope">
+				<span *ngFor="let scope of scopes.scopes" [attr.data-hint]="scope.name" class="hint--rounded hint--bounce hint--bottom">
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+				width="20px" height="20px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+				<path d="M384,224v-96C384,57.438,326.594,0,256,0c-70.578,0-128,57.438-128,128v96c-35.344,0-64,28.656-64,64v160c0,35.344,28.656,64,64,64h256c35.344,0,64-28.656,64-64V288C448,252.656,419.344,224,384,224z M272,379.094V432c0,8.844-7.156,16-16,16s-16-7.156-16-16v-52.906c-9.391-5.563-16-15.375-16-27.094c0-17.688,14.328-32,32-32s32,14.313,32,32C288,363.719,281.391,373.531,272,379.094z M320,224H192v-96c0-35.313,28.703-64,64-64c35.281,0,64,28.688,64,64V224z"/>
+			</svg>
+		 </span> 
         </div>
       </div>
-    </span>
  </ng-template>

lib/components/AuthScopes/auth-scopes.scss

@@ -1,32 +0,0 @@
-$hint-color: #e53935;
-
-.oauth-scopes-header {
-  font-weight: bold;
-}
-
-.oauth-scope {
-  padding-top: 1.2em;
-}
-
-.oauth-scope-description {
-  font-style: italic;
-  line-height: 0.2em;
-}
-
-.oauth-scopes {
-  text-align: left;
-  white-space: nowrap;
-}
-
-.oauth-scopes-hint {
-  width: 1.2em;
-  text-align: center;
-  border-radius: 50%;
-  vertical-align: middle;
-  color: $hint-color;
-  line-height: 1.2;
-  text-transform: none;
-  cursor: help;
-  border: 1px solid $hint-color;
-  float: right;
-}

lib/components/AuthScopes/auth-scopes.ts

@@ -7,7 +7,6 @@ import { ComponentParser } from '../../services/component-parser.service';
 @Component({
   selector: 'auth-scopes',
   templateUrl: './auth-scopes.html',
-  styleUrls: ['./auth-scopes.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AuthScopes extends BaseComponent implements OnInit {

lib/utils/spec-manager.ts

@@ -138,9 +138,8 @@ export class SpecManager {
   }
 
   getOperationScopes(operationPtr:string) {
-    let that = this;
-    function getSecurityDefinition(name:string, scope:string) {
-      let secDefs = that._schema.securityDefinitions;
+    const getSecurityDefinition = (name: string, scope: string) => {
+      let secDefs = this._schema.securityDefinitions;
       if (secDefs[name] && secDefs[name].type === 'oauth2') {
         let availScopes = secDefs[name].scopes;
         if (availScopes && availScopes[scope]) {

lib/vendor.ts

@@ -22,7 +22,7 @@ import 'prismjs/components/prism-markup.js'; // xml
 
 import 'dropkickjs/build/css/dropkick.css';
 import 'prismjs/themes/prism-dark.css';
-import 'html-hint/dist/html-hint.css';
+import 'hint.css/hint.base.css';
 
 if (!IS_PRODUCTION) {
   require('@angular/platform-browser');

package.json

@@ -72,7 +72,7 @@
     "css-loader": "^0.28.1",
     "deploy-to-gh-pages": "^1.3.3",
     "dropkickjs": "^2.1.10",
-    "html-hint": "^0.2.4",
+    "hint.css": "^2.5.0",
     "http-server": "^0.10.0",
     "https-browserify": "^1.0.0",
     "istanbul-instrumenter-loader": "^2.0.0",