Server name asyncApi26 (#45)

* server name asyncApi26

* 4.6.7

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-summary",
   "description": "A summary view for an API base on AMF data model",
-  "version": "4.6.6",
+  "version": "4.6.7",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

src/ApiSummary.js

@@ -421,9 +421,10 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
     const { baseUri, protocols } = this;
     const uri = this._computeBaseUri(server, baseUri, protocols);
     const description = this._computeDescription(server);
+    const serverNameTemplate = this._serverNameTemplate(server);
     const serverTagsTemplate = this._serverTagsTemplate(server);
     return html`<li>
-      ${uri} ${serverTagsTemplate}
+      ${serverNameTemplate} ${uri} ${serverTagsTemplate}
       <arc-marked
         .markdown=${description}
         class="server-description"
@@ -447,7 +448,26 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
       (tagName) =>
         `#${this._getValue(tagName, this.ns.aml.vocabularies.core.name)} `
     );
-    return tagsNames?.map((t) => html`<p class="server-tag">${t}</p>`);
+    return tagsNames?.map(
+      (tagName) => html`<p class="server-tag">${tagName}</p>`
+    );
+  }
+
+  /**
+   * @param {any} server Server definition
+   * @return {TemplateResult} Template for server name
+   */
+  _serverNameTemplate(server) {
+    const isAsyncApi = this._isAsyncAPI(this.amf);
+    if (!isAsyncApi) {
+      return html``;
+    }
+    const serverName = this._getValue(
+      server,
+      this._getAmfKey(this.ns.aml.vocabularies.core.name)
+    );
+
+    return html`<span class="server-name">${serverName}</span>`
   }
 
   /**

src/Styles.js

@@ -166,6 +166,30 @@ export default css`
     margin: 0.8em 0 0.2em 0;
   }
 
+  .server-name {
+    color: var(--api-method-documentation-async-server-names-color, #ffffff);
+    background-color: var(
+      --api-method-documentation-async-server-names-bg-color,
+      #506773
+    );
+    text-align: center;
+    font-family: var(
+      --api-method-documentation-async-server-names-font,
+      Avenir
+    );
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    border-radius: 4px;
+    border: 1px solid
+      var(--api-method-documentation-async-server-names-border-color, #506773);
+    padding: 1px 8px 1px 8px;
+    margin-right: 10px;
+    word-break: auto-phrase;
+    max-width: fit-content;
+  }
+
   .server-tag {
     display: inline-block;
     border: 1px solid var(--anypoint-color-coreBlue2);