@api-components/api-annotation-document - npm Package Compare versions

Comparing version 3.0.1 to 4.0.0

api-annotation-document.d.ts

@@ -66,2 +66,3 @@ /**
     _customList: any;
+    connectedCallback(): void;
 
@@ -68,0 +69,0 @@ /**

api-annotation-document.js

 import { LitElement, html, css } from 'lit-element';
 import { AmfHelperMixin } from '@api-components/amf-helper-mixin/amf-helper-mixin.js';
+import { infoOutline } from '@advanced-rest-client/arc-icons/ArcIcons.js';
 /**
@@ -24,3 +25,2 @@ * `api-annotation-document`
  * @customElement
- * @polymer
  * @demo demo/index.html
@@ -41,7 +41,12 @@ * @memberof ApiElements
 
-    .custom-prtoperty {
-      margin: 12px 0;
+    .custom-property {
+      border-left: 3px var(--api-annotation-accent-color, #1976D2) solid;
+      border-radius: 2px;
+      background-color: var(--api-annotation-background-color, #F5F7F9);
+      padding: 16px 0;
+      margin: 20px 0;
+      display: flex;
     }
 
-    .custom-prtoperty > span {
+    .custom-property > span {
       display: block;
@@ -56,2 +61,3 @@ }
       display: block;
+      margin-top: 3px;
     }
@@ -61,3 +67,11 @@
       padding: 0;
+      margin: 0;
       list-style: none;
+    }
+
+    .info-icon {
+      margin: 0 12px;
+      fill: var(--api-annotation-accent-color, #1976D2);
+      width: 24px;
+      height: 24px;
     }`;
@@ -142,5 +156,9 @@ }
 
-  constructor() {
-    super();
-    this._hasCustomProperties = false;
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+    if (this._hasCustomProperties === undefined) {
+      this._hasCustomProperties = false;
+    }
   }
@@ -159,3 +177,3 @@
   _shapeChanged(shape) {
-    const key = this._getAmfKey(this.ns.raml.vocabularies.document + 'customDomainProperties');
+    const key = this._getAmfKey(this.ns.aml.vocabularies.document.customDomainProperties);
     const custom = this._ensureArray(shape && shape[key]);
@@ -190,3 +208,3 @@ const has = !!(custom && custom.length);
   _computeName(item) {
-    return this._getValue(item, this.ns.raml.vocabularies.document + 'name');
+    return this._getValue(item, this.ns.aml.vocabularies.document.name);
   }
@@ -203,3 +221,3 @@ /**
     }
-    const key = this._getAmfKey(this.ns.raml.vocabularies.data + 'value');
+    const key = this._getAmfKey(this.ns.aml.vocabularies.data.value);
     let value = item && item[key];
@@ -212,3 +230,3 @@ if (!value) {
     }
-    return !this._hasType(value, this.ns.w3.xmlSchema + 'nil');
+    return !this._hasType(value, this.ns.w3.xmlSchema.nil);
   }
@@ -222,3 +240,3 @@ /**
   _isScalar(item) {
-    return this._hasType(item, this.ns.raml.vocabularies.data + 'Scalar');
+    return this._hasType(item, this.ns.aml.vocabularies.data.Scalar);
   }
@@ -235,3 +253,3 @@ /**
     }
-    return this._getValue(item, this.ns.raml.vocabularies.data + 'value');
+    return this._getValue(item, this.ns.aml.vocabularies.data.value);
   }
@@ -249,3 +267,3 @@ /**
     const data = [];
-    const dataKey = this._getAmfKey(this.ns.raml.vocabularies.data);
+    const dataKey = this._getAmfKey(this.ns.raml.vocabularies.data + '');
     const len = dataKey.length;
@@ -270,6 +288,11 @@ Object.keys(item).forEach((key) => {
   _renderItemValue(item) {
+    const isScalar = this._isScalar(item);
+    const value = isScalar ? this._scalarValue(item) : this._renderItemComplexValue(item);
+    if (!value || value === 'nil') {
+      return '';
+    }
     return html`<span class="value">
-      ${this._isScalar(item) ?
-        html`<span class="scalar-value">${this._scalarValue(item)}</span>` :
-        this._renderItemComplexValue(item)}
+      ${isScalar ?
+        html`<span class="scalar-value">${value}</span>` :
+        value}
     </span>`;
@@ -281,3 +304,3 @@ }
     if (!items || !items.length) {
-      return;
+      return '';
     }
@@ -288,7 +311,16 @@ return items.map((item) => html`<span class="scalar-value">${item.label}: ${item.value}</span>`);
   _renderItem(item) {
+    const hasValue = this._hasValue(item);
+    const name = this._computeName(item);
+    const value = hasValue ? this._renderItemValue(item) : '';
+    if (!name && !value) {
+      return '';
+    }
     return html`
-    <li class="custom-prtoperty">
-      <span class="name">${this._computeName(item)}</span>
-      ${this._hasValue(item) ? this._renderItemValue(item) : undefined}
-    </li>`;
+    <div class="custom-property">
+      <div class="info-icon">${infoOutline}</div>
+      <div class="info-value">
+        ${name ? html`<span class="name">${name}</span>` : ''}
+        ${value}
+      </div>
+    </div>`;
   }
@@ -301,8 +333,6 @@
     }
-    return html`
-    <ul class="custom-list">
-      ${list.map((item) => this._renderItem(item))}
-    </ul>`;
+    const items = list.map((item) => this._renderItem(item));
+    return html`${items}`;
   }
 }
 window.customElements.define('api-annotation-document', ApiAnnotationDocument);

package.json

 {
   "name": "@api-components/api-annotation-document",
   "description": "An element to render RAML annotations based on AMF data model",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "license": "Apache-2.0",
@@ -29,18 +29,19 @@ "main": "api-annotation-document.js",
   "dependencies": {
-    "@api-components/amf-helper-mixin": "^3.0.2",
+    "@advanced-rest-client/arc-icons": "^3.0.2",
+    "@api-components/amf-helper-mixin": "^4.0.2",
     "lit-element": "^2.2.1",
-    "lit-html": "^1.1.1"
+    "lit-html": "^1.1.2"
   },
   "devDependencies": {
-    "@advanced-rest-client/arc-demo-helper": "^1.0.7",
-    "@advanced-rest-client/eslint-config": "^1.0.6",
+    "@advanced-rest-client/arc-demo-helper": "^1.0.14",
+    "@advanced-rest-client/eslint-config": "^1.1.3",
     "@advanced-rest-client/prettier-config": "^0.1.0",
-    "@advanced-rest-client/testing-karma-sl": "^1.0.2",
+    "@advanced-rest-client/testing-karma-sl": "^1.0.5",
     "@api-components/api-console-default-theme": "^3.0.0-preview.2",
-    "@api-components/api-model-generator": "^0.1.12",
-    "@api-components/api-navigation": "^3.0.3",
-    "@commitlint/cli": "^8.1.0",
-    "@commitlint/config-conventional": "^7.0.0",
-    "@open-wc/testing": "^2.2.1",
-    "@open-wc/testing-karma": "^3.1.5",
+    "@api-components/api-model-generator": "^0.2.0-rc.1",
+    "@api-components/api-navigation": "^3.1.2",
+    "@commitlint/cli": "^8.2.0",
+    "@commitlint/config-conventional": "^8.2.0",
+    "@open-wc/testing": "^2.3.4",
+    "@open-wc/testing-karma": "^3.1.38",
     "@polymer/gen-typescript-declarations": "^1.6.2",
@@ -50,8 +51,8 @@ "@polymer/paper-dropdown-menu": "^3.0.0",
     "@polymer/paper-listbox": "^3.0.0",
-    "@webcomponents/webcomponentsjs": "^2.2.10",
-    "deepmerge": "^4.0.0",
-    "es-dev-server": "^1.8.3",
-    "husky": "^1.0.0",
-    "karma": "^4.2.0",
-    "lint-staged": "^8.0.0",
+    "@webcomponents/webcomponentsjs": "^2.3.0",
+    "deepmerge": "^4.1.1",
+    "es-dev-server": "^1.18.3",
+    "husky": "^3.0.0",
+    "karma": "^4.3.0",
+    "lint-staged": "^9.4.2",
     "web-animations-js": "^2.3.2"
@@ -71,5 +72,5 @@ },
     "test:watch": "karma start --auto-watch=true --single-run=false",
-    "test:legacy": "karma start --legacy --coverage",
-    "test:legacy:watch": "karma start --legacy --auto-watch=true --single-run=false",
-    "test:sl": "karma start karma.sl.config.js --legacy --coverage",
+    "test:legacy": "karma start --compatibility all --coverage",
+    "test:legacy:watch": "karma start --compatibility all --auto-watch=true --single-run=false",
+    "test:sl": "karma start karma.sl.config.js --compatibility all --coverage",
     "generate-model": "node demo/model.js"
@@ -76,0 +77,0 @@ },

README.md

@@ -11,5 +11,6 @@ [![Published on NPM](https://img.shields.io/npm/v/@api-components/api-annotation-document.svg)](https://www.npmjs.com/package/@api-components/api-annotation-document)
 
-### API components
+## Version compatibility
 
-This components is a part of [API components ecosystem](https://elements.advancedrestclient.com/)
+This version only works with AMF model version 2 (AMF parser >= 4.0.0).
+For compatibility with previous model version use `3.x.x` version of the component.
 
@@ -54,3 +55,3 @@ ## Usage
 
-### Development
+## Development
 
@@ -57,0 +58,0 @@ ```sh

No alert changes

Improved metrics

Total package byte prevSize

20998

increased by5.54%

Lines of code

408

increased by7.94%

Number of lines in readme file

72

increased by1.41%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@advanced-rest-client/arc-icons@^3.0.2

• + Added@advanced-rest-client/arc-icons@3.3.4(transitive)

• + Added@api-components/amf-helper-mixin@4.5.25(transitive)

• + Added@polymer/iron-flex-layout@3.0.1(transitive)

• + Added@polymer/iron-icon@3.0.1(transitive)

• + Added@polymer/iron-iconset-svg@3.0.1(transitive)

• + Addedamf-json-ld-lib@0.0.14(transitive)

• - Removed@api-components/amf-helper-mixin@3.1.7(transitive)

• Updated@api-components/amf-helper-mixin@^4.0.2

• Updatedlit-html@^1.1.2