@api-components/api-type-document 4.2.12 → 4.2.16

package/README.md

@@ -1,10 +1,8 @@
-[![Published on NPM](https://img.shields.io/npm/v/@api-components/api-type-document.svg)](https://www.npmjs.com/package/@api-components/api-type-document)
+# DEPRECATED
 
-[![Build Status](https://travis-ci.com/advanced-rest-client/api-type-document.svg)](https://travis-ci.com/advanced-rest-client/api-type-document)
+This component is being deprecated. The code base has been moved to [api-documentation](https://github.com/advanced-rest-client/api-documentation) module. This module will be archived when [PR 37](https://github.com/advanced-rest-client/api-documentation/pull/37) is merged.
 
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/advanced-rest-client/api-type-document)
-
-## <api-type-document>
+-----
 
 A documentation table for RAML type / OAS schema properties. Works with AMF data model.
 
@@ -19,7 +17,7 @@ For compatibility with previous model version use `3.x.x` version of the compone
 
 Custom property | Description | Default
 ----------------|-------------|----------
-`--api-type-document` | Mixin applied to this elment | `{}`
+`--api-type-document` | Mixin applied to this element | `{}`
 `--api-type-document-union-button-background-color` | Background color of union selector button | `#fff`
 `--api-type-document-union-button-color` | Color of union selector button | `#000`
 `--api-type-document-union-button-active-background-color` | Background color of active union selector button | `#CDDC39`
@@ -29,7 +27,7 @@ From `property-shape-document`
 
 Custom property | Description | Default
 ----------------|-------------|----------
-`--property-shape-document` | Mixin applied each proeprty element | `{}`
+`--property-shape-document` | Mixin applied each property element | `{}`
 `--property-shape-document-array-color` | Property border color when type is an array | `#8BC34A`
 `--property-shape-document-object-color` | Property border color when type is an object | `#FF9800`
 `--property-shape-document-union-color` | Property border color when type is an union | `#FFEB3B`
@@ -41,17 +39,17 @@ Custom property | Description | Default
 `--api-type-document-type-color` | Color of the "type" trait | `white`
 `--api-type-document-type-background-color` | Background color of the "type" trait | `#2196F3`
 `--api-type-document-trait-background-color` | Background color to main range trait (type, required, enum) | `#EEEEEE`,
-`--api-type-document-trait-border-radius` | Border radious of a main property traits like type, required, enum | `3px`
+`--api-type-document-trait-border-radius` | Border radius of a main property traits like type, required, enum | `3px`
 
 From `property-range-document`
 
 Custom property | Description | Default
 ----------------|-------------|----------
-`--property-range-document` | Mixin applied to this elment | `{}`
+`--property-range-document` | Mixin applied to this element | `{}`
 `--api-type-document-type-attribute-color` | Color of each attribute that describes a property | `#616161`
 `--api-type-document-examples-title-color` | Color of examples section title | ``
 `--api-type-document-examples-border-color` | Example section border color | `transparent`
-`--code-background-color` | Background color of the examples section | ``
+ `--code-background-color` | Background color of the examples section |``
 `--arc-font-body1` | Mixin applied to an example name label | `{}`
 `--arc-font-body2` | Mixin applied to the examples section title | `{}`
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-type-document",
   "description": "A documentation table for type (resource) properties. Works with AMF data model",
-  "version": "4.2.12",
+  "version": "4.2.16",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",
@@ -27,31 +27,31 @@
   "dependencies": {
     "@advanced-rest-client/arc-marked": "^1.1.0",
     "@advanced-rest-client/markdown-styles": "^3.1.4",
-    "@anypoint-web-components/anypoint-button": "^1.2.0",
-    "@api-components/amf-helper-mixin": "^4.3.6",
+    "@anypoint-web-components/anypoint-button": "^1.2.3",
+    "@api-components/amf-helper-mixin": "^4.5.6",
     "@api-components/api-annotation-document": "^4.1.0",
-    "@api-components/api-resource-example-document": "^4.1.2",
+    "@api-components/api-resource-example-document": "^4.3.3",
     "@open-wc/dedupe-mixin": "^1.3.0",
     "lit-element": "^2.4.0"
   },
   "devDependencies": {
-    "@advanced-rest-client/arc-demo-helper": "^2.2.6",
-    "@anypoint-web-components/anypoint-checkbox": "^1.1.4",
-    "@anypoint-web-components/anypoint-styles": "^1.0.1",
-    "@api-components/api-model-generator": "^0.2.9",
-    "@commitlint/cli": "^12.0.1",
-    "@commitlint/config-conventional": "^12.0.1",
+    "@advanced-rest-client/arc-demo-helper": "^3.0.3",
+    "@anypoint-web-components/anypoint-checkbox": "^1.2.2",
+    "@anypoint-web-components/anypoint-styles": "^1.0.2",
+    "@api-components/api-model-generator": "^0.2.14",
+    "@commitlint/cli": "^13.2.0",
+    "@commitlint/config-conventional": "^13.2.0",
     "@open-wc/eslint-config": "^4.2.0",
     "@open-wc/testing": "^2.5.15",
-    "@web/dev-server": "^0.1.8",
-    "@web/test-runner": "^0.12.16",
-    "@web/test-runner-playwright": "^0.8.6",
-    "eslint": "^7.21.0",
+    "@web/dev-server": "^0.1.24",
+    "@web/test-runner": "^0.13.18",
+    "@web/test-runner-playwright": "^0.8.8",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.1.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
-    "sinon": "^9.2.4",
-    "typescript": "^4.2.3",
+    "husky": "^7.0.2",
+    "lint-staged": "^11.1.2",
+    "sinon": "^11.1.2",
+    "typescript": "^4.4.3",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "scripts": {

package/src/ApiTypeDocument.d.ts

@@ -166,11 +166,21 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
    */
   renderReadOnly?: boolean;
 
+  /**
+   * When enabled, media selector will not be rendered.
+   * Should be used in cases where media types are not
+   * applicable.
+   * @attribute
+   */
+  noMediaSelector: boolean;
+
+  get shouldRenderMediaSelector(): boolean;
+
   constructor();
 
   connectedCallback(): void;
 
-  _computeRenderMainExample(noMainExample: boolean, hasExamples: boolean): boolean;
+  _computeRenderMainExample(noMainExample: boolean, hasExamples: boolean, isScalar: boolean): boolean;
 
   /**
    * Called when resolved type or amf changed.

package/src/ApiTypeDocument.js

@@ -160,6 +160,13 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
       _renderMainExample: { type: Boolean },
 
       renderReadOnly: { type: Boolean },
+
+      /**
+       * When enabled, media selector will not be rendered.
+       * Should be used in cases where media types are not
+       * applicable.
+       */
+      noMediaSelector: { type: Boolean },
     };
   }
 
@@ -282,12 +289,22 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
     }
     this.__hasExamples = value;
     this.requestUpdate('_hasExamples', old);
+    const scalarType = this._hasType(this.type, this.ns.aml.vocabularies.shapes.ScalarShape);
     this._renderMainExample = this._computeRenderMainExample(
       this.noMainExample,
-      value
+      value,
+      scalarType
     );
   }
 
+  get shouldRenderMediaSelector() {
+    const { renderMediaSelector, noMediaSelector } = this;
+    if (noMediaSelector) {
+      return false;
+    }
+    return renderMediaSelector;
+  }
+
   constructor() {
     super();
     this.hasParentType = false;
@@ -308,6 +325,7 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
     this.renderReadOnly = false;
 
     this._isPropertyReadOnly = this._isPropertyReadOnly.bind(this);
+    this.noMediaSelector = false;
   }
 
   connectedCallback() {
@@ -321,8 +339,8 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
     }
   }
 
-  _computeRenderMainExample(noMainExample, hasExamples) {
-    return !!(!noMainExample && hasExamples);
+  _computeRenderMainExample(noMainExample, hasExamples, isScalar = false) {
+    return isScalar ? false : !!(!noMainExample && hasExamples);
   }
 
   /**
@@ -637,57 +655,48 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
   /**
    * @return {TemplateResult} Templates for object properties
    */
-  _arrayTemplate() {
+   _arrayTemplate() {
     const items = this._computeArrayProperties(this._resolvedType) || [];
-    return html`
-      ${this.hasParentType
-        ? html`<property-shape-document
-            class="array-document"
-            .amf="${this.amf}"
-            .shape="${this._resolvedType}"
-            .parentTypeName="${this.parentTypeName}"
-            ?narrow="${this.narrow}"
-            ?noExamplesActions="${this.noExamplesActions}"
-            ?compatibility="${this.compatibility}"
-            .mediaType="${this.mediaType}"
-            ?graph="${this.graph}"
-          ></property-shape-document>`
-        : html`<span>Array of:</span>`}
-
-      <div class="array-children">
-        ${items.map(
-          (item) => html`
-            ${item.isShape
-              ? html`<property-shape-document
-                  class="array-document"
-                  .amf="${this.amf}"
-                  .shape="${item}"
-                  parentTypeName="${this._computeArrayParentName(this.parentTypeName)}"
-                  ?narrow="${this.narrow}"
-                  ?noExamplesActions="${this.noExamplesActions}"
-                  ?compatibility="${this.compatibility}"
-                  .mediaType="${this.mediaType}"
-                  ?graph="${this.graph}"
-                ></property-shape-document>`
-              : ''}
-            ${item.isType
-              ? html`<api-type-document
-                  class="union-document"
-                  .amf="${this.amf}"
-                  .parentTypeName="${this.parentTypeName}"
-                  .type="${item}"
-                  ?narrow="${this.narrow}"
-                  ?noExamplesActions="${this.noExamplesActions}"
-                  ?noMainExample="${this._renderMainExample}"
-                  ?compatibility="${this.compatibility}"
-                  .mediaType="${this.mediaType}"
-                  ?graph="${this.graph}"
-                ></api-type-document>`
-              : ''}
-          `
-        )}
-      </div>
-    `;
+    const documents = items.map(
+      (item) => html`
+        ${item.isShape
+          ? html`<property-shape-document
+              class="array-document"
+              .amf="${this.amf}"
+              .shape="${item}"
+              parentTypeName="${this._computeArrayParentName(this.parentTypeName)}"
+              ?narrow="${this.narrow}"
+              ?noExamplesActions="${this.noExamplesActions}"
+              ?compatibility="${this.compatibility}"
+              .mediaType="${this.mediaType}"
+              ?graph="${this.graph}"
+            ></property-shape-document>`
+          : ''}
+        ${item.isType
+          ? html`<api-type-document
+              class="union-document"
+              .amf="${this.amf}"
+              .parentTypeName="${this.parentTypeName}"
+              .type="${item}"
+              ?narrow="${this.narrow}"
+              ?noExamplesActions="${this.noExamplesActions}"
+              ?noMainExample="${this._renderMainExample}"
+              ?compatibility="${this.compatibility}"
+              .mediaType="${this.mediaType}"
+              ?graph="${this.graph}"
+            ></api-type-document>`
+          : ''}
+      `
+    );
+    if (!this.hasParentType) {
+      return html`
+        <span>Array of:</span>
+        <div class="array-children">
+          ${documents}
+        </div>
+      `;
+    }
+    return html`${documents}`;
   }
 
   /**
@@ -819,7 +828,7 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
     const mediaTypes = (this.mediaTypes || []);
     return html`<style>${this.styles}</style>
       <section class="examples" ?hidden="${!this._renderMainExample}">
-        ${this.renderMediaSelector
+        ${this.shouldRenderMediaSelector
           ? html`<div class="media-type-selector">
               <span>Media type:</span>
               ${mediaTypes.map((item, index) => {

package/src/PropertyDocumentMixin.d.ts

@@ -115,6 +115,17 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
    */
   _computeIsAnyOf(range: Object): boolean
 
+
+  /**
+   * Computes value for `isAllOf` property.
+   * AllOf type is identified as `http://www.w3.org/ns/shacl#and`
+   * Returns true if `and` property is present in shape. Otherwise returns false.
+   *
+   * @param {Object} range Range object of current shape.
+   * @returns {boolean}
+   */
+  _computeIsAllOf(range: Object): boolean
+
   /**
    * Computes list of type labels to render.
    *

package/src/PropertyDocumentMixin.js

@@ -345,6 +345,18 @@ const mxFunction = (base) => {
       return this._hasProperty(range, this.ns.w3.shacl.or);
     }
 
+
+    /**
+     * Computes value for `isAllOf` property.
+     * Returns true if `and` property is present in shape. Otherwise returns false.
+     *
+     * @param {Object} range Range object of current shape.
+     * @returns {boolean}
+     */
+    _computeIsAllOf(range) {
+      return this._hasProperty(range, this.ns.w3.shacl.and);
+    }
+
     /**
      * Computes list of type labels to render.
      *

package/src/PropertyShapeDocument.d.ts

@@ -50,6 +50,11 @@ export class PropertyShapeDocument extends  PropertyDocumentMixin(LitElement) {
    * @attribute
    */
   isScalarArray: boolean;
+  /**
+   * Computed value, true if current property is one of.
+   * @attribute
+   */
+  isOneOf: boolean;
   /**
    * Computed value, true if this property contains a complex
    * structure. It is computed when the property is and array,
@@ -212,6 +217,11 @@ export class PropertyShapeDocument extends  PropertyDocumentMixin(LitElement) {
    */
   _computeIsComplex(isUnion: boolean, isObject: boolean, isArray: boolean): boolean;
 
+  /**
+   * Computes value `IsOneOf` property.
+   */
+  _computeIsOneOf(range): boolean;
+
   _evaluateGraph(): void;
 
   _getType(amf: object, id: string): Object;

package/src/PropertyShapeDocument.js

@@ -56,6 +56,10 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
        * is a scalar.
        */
       isScalarArray: { type: Boolean, reflect: true },
+      /**
+       * Computed value, true if current property is one of.
+       */
+      isOneOf: { type: Boolean, reflect: true, },
       /**
        * Computed value, true if this property contains a complex
        * structure. It is computed when the property is and array,
@@ -242,6 +246,20 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     );
   }
 
+  /**
+   * Computes value `IsOneOf` property.
+   * @param {Object} range Current `range` object
+   * @return {Boolean}
+   */
+  _computeIsOneOf(range) {
+    if (!range) {
+      return false;
+    }
+
+    const oneOfKey = this._getAmfKey(this.ns.w3.shacl.xone);
+    return oneOfKey in range;
+  }
+
   _rangeChanged(range) {
     this.propertyDescription = this._computeDescription(range);
     this.hasPropertyDescription = this._computeHasStringValue(
@@ -253,11 +271,15 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     this.isEnum = this._computeIsEnum(range, this.isArray);
     this.isReadOnly = this._isReadOnly(range);
     this.isAnyOf = this._computeIsAnyOf(range);
+    this.isOneOf = this._computeIsOneOf(range);
+    this.isAllOf = this._computeIsAllOf(range);
     this.isComplex = this._computeIsComplex(
       this.isUnion,
       this.isObject,
       this.isArray,
-      this.isAnyOf
+      this.isAnyOf,
+      this.isOneOf,
+      this.isAllOf
     );
     this.isScalarArray = this.isArray
       ? this._computeIsScalarArray(range)
@@ -445,10 +467,13 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
    * @param {boolean} isUnion
    * @param {boolean} isObject
    * @param {boolean} isArray
+   * @param {boolean} isAnyOf
+   * @param {boolean} isOneOf
+   * @param {boolean} isAllOf
    * @return {boolean}
    */
-  _computeIsComplex(isUnion, isObject, isArray, isAnyOf) {
-    return isUnion || isObject || isArray || isAnyOf;
+  _computeIsComplex(isUnion, isObject, isArray, isAnyOf, isOneOf, isAllOf) {
+    return isUnion || isObject || isArray || isAnyOf || isOneOf || isAllOf;
   }
 
   _evaluateGraph() {