diff --git a/.gitignore b/.gitignore index b08b465..e4dcaf8 100644 --- a/.gitignore +++ b/.gitignore @@ -64,4 +64,5 @@ dist/ !demo/avro.json !demo/avro2.json -.idea/ \ No newline at end of file +.idea/ +.codegenie/ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2e6832e..2bd954a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,18 @@ { "name": "@api-components/api-type-document", - "version": "4.2.31", + "version": "4.2.32", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@api-components/api-type-document", - "version": "4.2.31", + "version": "4.2.32", "license": "Apache-2.0", "dependencies": { "@advanced-rest-client/arc-marked": "^1.1.0", "@advanced-rest-client/markdown-styles": "^3.1.4", "@anypoint-web-components/anypoint-button": "^1.2.3", - "@api-components/amf-helper-mixin": "^4.5.24", + "@api-components/amf-helper-mixin": "^4.5.29", "@api-components/api-annotation-document": "^4.1.0", "@api-components/api-resource-example-document": "^4.3.3", "@open-wc/dedupe-mixin": "^1.3.0", @@ -578,9 +578,9 @@ } }, "node_modules/@api-components/amf-helper-mixin": { - "version": "4.5.27", - "resolved": "https://registry.npmjs.org/@api-components/amf-helper-mixin/-/amf-helper-mixin-4.5.27.tgz", - "integrity": "sha512-ZXkO5T77unKr0jkhgu4gQ3TuY7Doto6QHuIbUdMwW30CgR6nV7HrtVplilqvtI1kJsz2DDBD5w9wbTCKZkydCg==", + "version": "4.5.29", + "resolved": "https://registry.npmjs.org/@api-components/amf-helper-mixin/-/amf-helper-mixin-4.5.29.tgz", + "integrity": "sha512-SvwsUrbyij4sagr1/TWdA+atvGEkBBwZeX3VGnWlXLKlBiGS9zdJHoFTeMAeR3jtspu9UkyLOIZ5KU5Gt+BkHg==", "dependencies": { "amf-json-ld-lib": "0.0.14" } @@ -16008,9 +16008,9 @@ } }, "@api-components/amf-helper-mixin": { - "version": "4.5.27", - "resolved": "https://registry.npmjs.org/@api-components/amf-helper-mixin/-/amf-helper-mixin-4.5.27.tgz", - "integrity": "sha512-ZXkO5T77unKr0jkhgu4gQ3TuY7Doto6QHuIbUdMwW30CgR6nV7HrtVplilqvtI1kJsz2DDBD5w9wbTCKZkydCg==", + "version": "4.5.29", + "resolved": "https://registry.npmjs.org/@api-components/amf-helper-mixin/-/amf-helper-mixin-4.5.29.tgz", + "integrity": "sha512-SvwsUrbyij4sagr1/TWdA+atvGEkBBwZeX3VGnWlXLKlBiGS9zdJHoFTeMAeR3jtspu9UkyLOIZ5KU5Gt+BkHg==", "requires": { "amf-json-ld-lib": "0.0.14" } diff --git a/package.json b/package.json index 4fd5ce1..df26c7a 100644 --- a/package.json +++ b/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.31", + "version": "4.2.32", "license": "Apache-2.0", "main": "index.js", "module": "index.js", @@ -28,7 +28,7 @@ "@advanced-rest-client/arc-marked": "^1.1.0", "@advanced-rest-client/markdown-styles": "^3.1.4", "@anypoint-web-components/anypoint-button": "^1.2.3", - "@api-components/amf-helper-mixin": "^4.5.24", + "@api-components/amf-helper-mixin": "^4.5.29", "@api-components/api-annotation-document": "^4.1.0", "@api-components/api-resource-example-document": "^4.3.3", "@open-wc/dedupe-mixin": "^1.3.0", diff --git a/src/ApiTypeDocument.js b/src/ApiTypeDocument.js index 5d1f118..228ed20 100644 --- a/src/ApiTypeDocument.js +++ b/src/ApiTypeDocument.js @@ -1,10 +1,10 @@ -import { LitElement, html } from 'lit-element'; -import '@anypoint-web-components/anypoint-button/anypoint-button.js'; -import '@api-components/api-resource-example-document/api-resource-example-document.js'; -import '../property-shape-document.js'; -import '../property-range-document.js'; -import { PropertyDocumentMixin } from './PropertyDocumentMixin.js'; -import typeStyles from './TypeStyles.js'; +import { LitElement, html } from "lit-element"; +import "@anypoint-web-components/anypoint-button/anypoint-button.js"; +import "@api-components/api-resource-example-document/api-resource-example-document.js"; +import "../property-shape-document.js"; +import "../property-range-document.js"; +import { PropertyDocumentMixin } from "./PropertyDocumentMixin.js"; +import typeStyles from "./TypeStyles.js"; /** @typedef {import('@anypoint-web-components/anypoint-button').AnypointButton} AnypointButton */ /** @typedef {import('lit-element').TemplateResult} TemplateResult */ @@ -182,7 +182,7 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { return; } this._type = value; - this.requestUpdate('type', old); + this.requestUpdate("type", old); this._resolvedType = /** @type any[] */ (this._resolve(value)); this.__typeChanged(); } @@ -203,7 +203,7 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { return; } this._mediaTypes = value; - this.requestUpdate('mediaTypes', old); + this.requestUpdate("mediaTypes", old); this._mediaTypesChanged(value); } @@ -217,7 +217,7 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { return; } this._parentTypeName = value; - this.requestUpdate('parentTypeName', old); + this.requestUpdate("parentTypeName", old); this.hasParentType = !!value; } @@ -231,8 +231,8 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { return; } this._unionTypes = value; - this.requestUpdate('unionTypes', old); - this._multiTypesChanged('selectedUnion', value); + this.requestUpdate("unionTypes", old); + this._multiTypesChanged("selectedUnion", value); } get oneOfTypes() { @@ -245,8 +245,8 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { return; } this._oneOfTypes = value; - this.requestUpdate('oneOfTypes', old); - this._multiTypesChanged('selectedOneOf', value); + this.requestUpdate("oneOfTypes", old); + this._multiTypesChanged("selectedOneOf", value); } get anyOfTypes() { @@ -259,8 +259,8 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { return; } this._anyOfTypes = value; - this.requestUpdate('anyOfTypes', old); - this._multiTypesChanged('selectedAnyOf', value); + this.requestUpdate("anyOfTypes", old); + this._multiTypesChanged("selectedAnyOf", value); } get noMainExample() { @@ -273,11 +273,8 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { return; } this._noMainExample = value; - this.requestUpdate('noMainExample', old); - this._renderMainExample = this._computeRenderMainExample( - value, - this._hasExamples - ); + this.requestUpdate("noMainExample", old); + this._renderMainExample = this._computeRenderMainExample(value, this._hasExamples); } get _hasExamples() { @@ -290,13 +287,9 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { return; } this.__hasExamples = value; - this.requestUpdate('_hasExamples', old); + this.requestUpdate("_hasExamples", old); const scalarType = this._hasType(this.type, this.ns.aml.vocabularies.shapes.ScalarShape); - this._renderMainExample = this._computeRenderMainExample( - this.noMainExample, - value, - scalarType - ); + this._renderMainExample = this._computeRenderMainExample(this.noMainExample, value, scalarType); } get shouldRenderMediaSelector() { @@ -312,15 +305,15 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { this.hasParentType = false; this.narrow = false; this.selectedBodyId = undefined; - /** + /** * @type {number} */ this.selectedUnion = undefined; - /** + /** * @type {number} */ this.selectedOneOf = undefined; - /** + /** * @type {number} */ this.selectedAnyOf = undefined; @@ -377,8 +370,8 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { let isAnd = false; let isOneOf = false; let isAnyOf = false; - let key = '' - const shapesKey = this.ns.aml.vocabularies.shapes + let key = ""; + const shapesKey = this.ns.aml.vocabularies.shapes; if (type instanceof Array) { isObject = true; } else if (this._hasType(type, shapesKey.ScalarShape) || this._hasType(type, shapesKey.NilShape)) { @@ -394,9 +387,7 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { key = this._getAmfKey(this.ns.w3.shacl.or); this.anyOfTypes = this._computeTypes(type, key); } - } else if ( - this._hasType(type, shapesKey.UnionShape) - ) { + } else if (this._hasType(type, shapesKey.UnionShape)) { isUnion = true; key = this._getAmfKey(shapesKey.anyOf); this.unionTypes = this._computeTypes(type, key); @@ -408,9 +399,7 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { isAnyOf = true; key = this._getAmfKey(this.ns.w3.shacl.or); this.anyOfTypes = this._computeTypes(type, key); - } else if ( - this._hasType(type, shapesKey.ArrayShape) - ) { + } else if (this._hasType(type, shapesKey.ArrayShape)) { isArray = true; const iKey = this._getAmfKey(shapesKey.items); let items = this._ensureArray(type[iKey]); @@ -464,7 +453,7 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { * @return {string} Parent type name of default value for array type. */ _computeArrayParentName(parent) { - return parent || ''; + return parent || ""; } /** @@ -560,23 +549,23 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { if (Array.isArray(item)) { return item; } - + const propertyKey = this._getAmfKey(this.ns.w3.shacl.property); - const itemProperties = this._ensureArray(item[propertyKey]||[]) + const itemProperties = this._ensureArray(item[propertyKey] || []); const additionalPropertiesKey = this._getAmfKey(this.ns.w3.shacl.additionalPropertiesSchema); // If the item doesn't have additional properties, filter the read-only properties and return if (!item[additionalPropertiesKey]) { - return this._filterReadOnlyProperties(itemProperties) + return this._filterReadOnlyProperties(itemProperties); } - const additionalPropertiesSchema = this._ensureArray(item[additionalPropertiesKey]) - + const additionalPropertiesSchema = this._ensureArray(item[additionalPropertiesKey]); + // If the item does have additional properties, ensure they are in an array - const additionalProperties = this._ensureArray(additionalPropertiesSchema[0][propertyKey] || additionalPropertiesSchema[0]) + const additionalProperties = this._ensureArray(additionalPropertiesSchema[0][propertyKey] || additionalPropertiesSchema[0]); // Combine the item's properties and additional properties - const combinedProperties = [...itemProperties, ...additionalProperties] + const combinedProperties = [...itemProperties, ...additionalProperties]; // Filter the read-only properties and return return this._filterReadOnlyProperties(combinedProperties); @@ -596,17 +585,11 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { [item] = item; } item = this._resolve(item); - let label = /** @type string */ (this._getValue( - item, - this.ns.aml.vocabularies.core.name - )); + let label = /** @type string */ (this._getValue(item, this.ns.aml.vocabularies.core.name)); if (!label) { - label = /** @type string */ (this._getValue( - item, - this.ns.w3.shacl.name - )); + label = /** @type string */ (this._getValue(item, this.ns.w3.shacl.name)); } - if (label && label.indexOf('item') === 0) { + if (label && label.indexOf("item") === 0) { label = undefined; } return { @@ -671,13 +654,26 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { this._hasExamples = value; } + /** + * Return the type mappings + */ + _typesMappings(item) { + const itemName = this._getValue(item, this._getAmfKey(this.ns.w3.shacl.name)); + const typeTarget = this._getValue(this.type, this._getAmfKey(this.ns.aml.vocabularies.shapes.discriminator)); + let type; + if (itemName && typeTarget && itemName === typeTarget) { + type = this.type; + } + return type; + } + /** * @return {TemplateResult[]|string} Templates for object properties */ _objectTemplate() { const items = this._computeProperties(this._resolvedType); if (!items || !items.length) { - return ''; + return ""; } return items.map( (item) => html`` ); } _arrayPropertyTemplate(label, value, title) { return html` -
- ${label} - ${value} -
- ` +
+ ${label} + ${value} +
+ `; } _arrayPropertiesTemplate() { if (!this.noArrayInfo) { - const minCount = this._getValue(this._resolvedType, this.ns.w3.shacl.minCount) - const maxCount = this._getValue(this._resolvedType, this.ns.w3.shacl.maxCount) + const minCount = this._getValue(this._resolvedType, this.ns.w3.shacl.minCount); + const maxCount = this._getValue(this._resolvedType, this.ns.w3.shacl.maxCount); return html` - ${minCount !== undefined ? this._arrayPropertyTemplate('Minimum array length:', minCount, 'Minimum amount of items in array') : ''} - ${maxCount !== undefined ? this._arrayPropertyTemplate('Maximum array length:', maxCount, 'Maximum amount of items in array') : ''} - ` + ${minCount !== undefined ? this._arrayPropertyTemplate("Minimum array length:", minCount, "Minimum amount of items in array") : ""} + ${maxCount !== undefined ? this._arrayPropertyTemplate("Maximum array length:", maxCount, "Maximum amount of items in array") : ""} + `; } - return html`` + return html``; } /** @@ -736,7 +733,7 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { .mediaType="${this.mediaType}" ?graph="${this.graph}" >` - : ''} + : ""} ${item.isType ? html`` - : ''} + : ""} ` ); return html` - ${!this.hasParentType ? - html` - Array of: -
- ${documents} -
` - : html`${documents}` - } - + ${!this.hasParentType + ? html` Array of: +
${documents}
` + : html`${documents}`} ${this._arrayPropertiesTemplate()} `; } @@ -774,11 +766,11 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { _unionTemplate() { const items = this.unionTypes || []; const selected = this.selectedUnion; - const selectTypeCallback = this._selectType.bind(this, 'selectedUnion'); + const selectTypeCallback = this._selectType.bind(this, "selectedUnion"); const key = this._getAmfKey(this.ns.aml.vocabularies.shapes.anyOf); const type = this._computeProperty(this._resolvedType, key, selected); - const typeName = 'union' - const label = 'Any of' + const typeName = "union"; + const label = "Any of"; return this._multiTypeTemplate({ label, items, typeName, selected, selectTypeCallback, type }); } @@ -788,10 +780,10 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { */ _oneOfTemplate() { const items = this.oneOfTypes; - const label = 'One of'; - const typeName = 'one-of'; + const label = "One of"; + const typeName = "one-of"; const selected = this.selectedOneOf; - const selectTypeCallback = this._selectType.bind(this, 'selectedOneOf'); + const selectTypeCallback = this._selectType.bind(this, "selectedOneOf"); const key = this._getAmfKey(this.ns.w3.shacl.xone); const type = this._computeProperty(this._resolvedType, key, selected); return this._multiTypeTemplate({ label, items, typeName, selected, selectTypeCallback, type }); @@ -803,10 +795,10 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { */ _anyOfTemplate() { const items = this.anyOfTypes; - const label = 'Any of'; - const typeName = 'any-of'; + const label = "Any of"; + const typeName = "any-of"; const selected = this.selectedAnyOf; - const selectTypeCallback = this._selectType.bind(this, 'selectedAnyOf'); + const selectTypeCallback = this._selectType.bind(this, "selectedAnyOf"); const key = this._getAmfKey(this.ns.w3.shacl.or); let type = this._computeProperty(this._resolvedType, key, selected); if (!type) { @@ -819,12 +811,11 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) { return this._multiTypeTemplate({ label, items, typeName, selected, selectTypeCallback, type }); } - _getItemLabel(item){ - if(item.label==='Unknown type' && item.avroValue){ - return item.avroValue + _getItemLabel(item) { + if (item.label === "Unknown type" && item.avroValue) { + return item.avroValue; } - return item.label - + return item.label; } /** @@ -844,17 +835,17 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
${label}: ${items.map( - (item, index) => html` html`${this._getItemLabel(item)}` - )} + )}
html` ${item.label - ? html`

- Properties inherited from ${item.label}. -

` - : html`

Properties defined inline.

`} + (item) => html` ${item.label ? html`

Properties inherited from ${item.label}.

` : html`

Properties defined inline.

`} ${this.styles} + let parts = "content-action-button, code-content-action-button, content-action-button-disabled, "; + parts += "code-content-action-button-disabled content-action-button-active, "; + parts += "code-content-action-button-active, code-wrapper, example-code-wrapper, markdown-html"; + const mediaTypes = this.mediaTypes || []; + return html`
${this.shouldRenderMediaSelector - ? html`
+ ? html`
Media type: ${mediaTypes.map((item, index) => { - const selected = this.selectedMediaType === index; - const pressed = selected ? 'true' : 'false'; - return html`${item}`; - })} + })}
` - : ''} + : ""}
- ${this.isObject ? this._objectTemplate() : ''} - ${this.isArray ? this._arrayTemplate() : ''} + ${this.isObject ? this._objectTemplate() : ""} ${this.isArray ? this._arrayTemplate() : ""} ${this.isScalar ? html`` - : ''} - ${this.isUnion ? this._unionTemplate() : ''} - ${this.isAnd ? this._anyTemplate() : ''} - ${this.isAnyOf ? this._anyOfTemplate() : ''} - ${this.isOneOf ? this._oneOfTemplate() : ''}`; + : ""} + ${this.isUnion ? this._unionTemplate() : ""} ${this.isAnd ? this._anyTemplate() : ""} ${this.isAnyOf ? this._anyOfTemplate() : ""} ${this.isOneOf ? this._oneOfTemplate() : ""}`; } _filterReadOnlyProperties(properties) { diff --git a/src/PropertyShapeDocument.d.ts b/src/PropertyShapeDocument.d.ts index 4c38e65..3d5a483 100644 --- a/src/PropertyShapeDocument.d.ts +++ b/src/PropertyShapeDocument.d.ts @@ -1,10 +1,10 @@ -import { LitElement, CSSResult, TemplateResult } from 'lit-element'; -import { PropertyDocumentMixin } from './PropertyDocumentMixin.js'; +import { LitElement, CSSResult, TemplateResult } from "lit-element"; +import { PropertyDocumentMixin } from "./PropertyDocumentMixin.js"; /** * Renders a documentation for a shape property of AMF model. */ -export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { +export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { readonly styles: CSSResult[]; range: any; /** @@ -142,7 +142,12 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { * Determines if shape's range is deprecated * @attribute */ - deprecated: boolean + deprecated: boolean; + /** + * List type mappings + * @attribute + */ + discriminatorMapping: any; get complexToggleLabel(): string; @@ -172,7 +177,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { * @param shape The shape object * @returns Display name of the property */ - _computePropertyName(range: object, shape: object): string|undefined; + _computePropertyName(range: object, shape: object): string | undefined; /** * Computes value for `hasDisplayName` property. @@ -210,7 +215,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { * @param range Range model * @returns Description to render. */ - _computeDescription(range: object): string|undefined; + _computeDescription(range: object): string | undefined; /** * Computes value for `isComplex` property. @@ -242,7 +247,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { /** * @returns Template for a complex shape (object/array/union) */ - _complexTemplate(): TemplateResult|string; + _complexTemplate(): TemplateResult | string; /** * @returns Template for a type name label @@ -252,7 +257,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { /** * @returns Template for the description */ - _descriptionTemplate(): TemplateResult|string; + _descriptionTemplate(): TemplateResult | string; /** * @returns Template for type name header diff --git a/src/PropertyShapeDocument.js b/src/PropertyShapeDocument.js index 876fdd0..fda42fa 100644 --- a/src/PropertyShapeDocument.js +++ b/src/PropertyShapeDocument.js @@ -1,9 +1,9 @@ -import { LitElement, html } from 'lit-element'; -import markdownStyles from '@advanced-rest-client/markdown-styles/markdown-styles.js'; -import '@advanced-rest-client/arc-marked/arc-marked.js'; -import '@anypoint-web-components/anypoint-button/anypoint-button.js'; -import { PropertyDocumentMixin } from './PropertyDocumentMixin.js'; -import shapeStyles from './ShapeStyles.js'; +import { LitElement, html } from "lit-element"; +import markdownStyles from "@advanced-rest-client/markdown-styles/markdown-styles.js"; +import "@advanced-rest-client/arc-marked/arc-marked.js"; +import "@anypoint-web-components/anypoint-button/anypoint-button.js"; +import { PropertyDocumentMixin } from "./PropertyDocumentMixin.js"; +import shapeStyles from "./ShapeStyles.js"; /** @typedef {import('lit-element').TemplateResult} TemplateResult */ @@ -67,15 +67,15 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { /** * Computed value, true if current property is an union. */ - isUnion: { type: Boolean, reflect: true, }, + isUnion: { type: Boolean, reflect: true }, /** * Computed value, true if current property is an object. */ - isObject: { type: Boolean, reflect: true, }, + isObject: { type: Boolean, reflect: true }, /** * Computed value, true if current property is an array. */ - isArray: { type: Boolean, reflect: true, }, + isArray: { type: Boolean, reflect: true }, /** * Computed value, true if current property is an array and the item * is a scalar. @@ -84,7 +84,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { /** * Computed value, true if current property is one of. */ - isOneOf: { type: Boolean, reflect: true, }, + isOneOf: { type: Boolean, reflect: true }, /** * Computed value, true if this property contains a complex * structure. It is computed when the property is and array, @@ -137,7 +137,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { * view. To be used with mobile rendering or when the * components occupies only small part of the screen. */ - narrow: { type: Boolean, reflect: true, }, + narrow: { type: Boolean, reflect: true }, /** * When set it removes actions bar from the examples render. */ @@ -159,6 +159,10 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { * Determines if shape's range is deprecated */ deprecated: { type: Boolean, reflect: true }, + /** + * Used for discriminator types mappings + */ + discriminatorMapping: { type: Object }, }; } @@ -174,7 +178,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { this._shape = value; this._shapeChanged(value); this._shapeRangeChanged(value, this.range); - this.requestUpdate('shape', old); + this.requestUpdate("shape", old); } get range() { @@ -189,7 +193,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { this._range = value; this._rangeChanged(value); this._shapeRangeChanged(this._shape, value); - this.requestUpdate('range', old); + this.requestUpdate("range", old); } get parentTypeName() { @@ -203,11 +207,11 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { } this._parentTypeName = value; this.hasParentTypeName = !!value; - this.requestUpdate('hasParentTypeName', old); + this.requestUpdate("hasParentTypeName", old); } get complexToggleLabel() { - return this.opened ? 'Hide' : 'Show'; + return this.opened ? "Hide" : "Show"; } get _renderToggleButton() { @@ -224,29 +228,30 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { const dataKey = this._getAmfKey(this.ns.w3.shacl.datatype); let type = this._ensureArray(item[dataKey]); [type] = type; - let typed = String(type['@id']); - typed = typed.replace(this.ns.w3.xmlSchema.key, ''); - typed = typed.replace(this.ns.aml.vocabularies.shapes.toString(), ''); + let typed = String(type["@id"]); + typed = typed.replace(this.ns.w3.xmlSchema.key, ""); + typed = typed.replace(this.ns.aml.vocabularies.shapes.toString(), ""); const stLetter = typed[0].toUpperCase(); return `${stLetter}${typed.substr(1)}`; } catch (_) { - return 'Unknown'; + return "Unknown"; } } constructor() { super(); - this.avroValue = undefined - this.defaultValue = undefined - this.size = undefined - this.namespace = undefined - this.aliases = undefined + this.avroValue = undefined; + this.defaultValue = undefined; + this.size = undefined; + this.namespace = undefined; + this.aliases = undefined; this.hasDisplayName = false; this.hasParentTypeName = false; this.hasPropertyDescription = false; this.narrow = false; this.renderReadOnly = false; this.deprecated = false; + this.discriminatorMapping = undefined; } connectedCallback() { @@ -271,9 +276,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { this.range = this._computeRange(shape); this.isRequired = this._computeIsRequired(shape); this.shapeDescription = this._computeDescription(shape); - this.hasShapeDescription = this._computeHasStringValue( - this.shapeDescription - ); + this.hasShapeDescription = this._computeHasStringValue(this.shapeDescription); } /** @@ -292,9 +295,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { _rangeChanged(range) { this.propertyDescription = this._computeDescription(range); - this.hasPropertyDescription = this._computeHasStringValue( - this.propertyDescription - ); + this.hasPropertyDescription = this._computeHasStringValue(this.propertyDescription); this.isUnion = this._computeIsUnion(range); this.isObject = this._computeIsObject(range); this.isArray = this._computeIsArray(range); @@ -303,17 +304,8 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { 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.isOneOf, - this.isAllOf - ); - this.isScalarArray = this.isArray - ? this._computeIsScalarArray(range) - : false; + this.isComplex = this._computeIsComplex(this.isUnion, this.isObject, this.isArray, this.isAnyOf, this.isOneOf, this.isAllOf); + this.isScalarArray = this.isArray ? this._computeIsScalarArray(range) : false; this._evaluateGraph(); } @@ -321,23 +313,20 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { this.displayName = this._computeDisplayName(range, shape); this.parentName = this.isObject ? this._computeParentName(range, shape) : undefined; this.propertyName = this._computePropertyName(range, shape); - this.avroValue = this._computeAvroShapeRangeSourceMap(range, shape) - const {size,namespace,aliases, defaultValue} = this._computeAvroProperties(range, shape) - this.size = size - this.namespace = namespace - this.aliases = aliases - this.defaultValue = defaultValue - - this.hasDisplayName = this._computeHasDisplayName( - this.displayName, - this.propertyName - ); + this.avroValue = this._computeAvroShapeRangeSourceMap(range, shape); + const { size, namespace, aliases, defaultValue } = this._computeAvroProperties(range, shape); + this.size = size; + this.namespace = namespace; + this.aliases = aliases; + this.defaultValue = defaultValue; + + this.hasDisplayName = this._computeHasDisplayName(this.displayName, this.propertyName); this.propertyDataType = this._computeObjectDataType(range, shape); this.deprecated = Boolean(this._computeIsDeprecated(range)); } _computeIsDeprecated(range) { - return this._getValue(range, this._getAmfKey(this.ns.aml.vocabularies.shapes.deprecated)) + return this._getValue(range, this._getAmfKey(this.ns.aml.vocabularies.shapes.deprecated)); } _computeObjectDataType(range, shape) { @@ -362,32 +351,20 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { } if (shape) { shape = this._resolve(shape); - if ( - this._hasType(shape, this.ns.aml.vocabularies.apiContract.Parameter) - ) { + if (this._hasType(shape, this.ns.aml.vocabularies.apiContract.Parameter)) { // https://www.mulesoft.org/jira/browse/APIC-289 - let name = this._getValue( - shape, - this.ns.aml.vocabularies.apiContract.paramName - ); + let name = this._getValue(shape, this.ns.aml.vocabularies.apiContract.paramName); if (!name) { name = this._getValue(shape, this.ns.aml.vocabularies.core.name); } return String(name); } - if ( - this._hasType(shape, this.ns.w3.shacl.PropertyShape) || - this._hasType(shape, this.ns.aml.vocabularies.shapes.NilShape) || - this._hasType(shape, this.ns.aml.vocabularies.shapes.AnyShape) - ) { - const name = /** @type string */ (this._getValue( - shape, - this.ns.w3.shacl.name - )); + if (this._hasType(shape, this.ns.w3.shacl.PropertyShape) || this._hasType(shape, this.ns.aml.vocabularies.shapes.NilShape) || this._hasType(shape, this.ns.aml.vocabularies.shapes.AnyShape)) { + const name = /** @type string */ (this._getValue(shape, this.ns.w3.shacl.name)); if (name === undefined) { - return undefined + return undefined; } - if (name && name.indexOf('amf_inline_type') === 0) { + if (name && name.indexOf("amf_inline_type") === 0) { return undefined; } return String(name); @@ -396,10 +373,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { if (range) { range = this._resolve(range); const name = this._getValue(range, this.ns.w3.shacl.name); - if ( - name === 'items' && - this._hasType(shape, this.ns.aml.vocabularies.shapes.ScalarShape) - ) { + if (name === "items" && this._hasType(shape, this.ns.aml.vocabularies.shapes.ScalarShape)) { return undefined; } return String(name); @@ -418,20 +392,16 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { if (!shape && !range) { return undefined; } - let result + let result; if (shape) { shape = this._resolve(shape); - result = /** @type string */ (this._getValue( - shape, - this.ns.aml.vocabularies.shapes[prop] - )); - + result = /** @type string */ (this._getValue(shape, this.ns.aml.vocabularies.shapes[prop])); } if (range && !result) { range = this._resolve(range); result = this._getValue(range, this.ns.aml.vocabularies.shapes[prop]); } - return result ? String(result): undefined; + return result ? String(result) : undefined; } /** @@ -445,21 +415,21 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { if (!shape && !range) { return undefined; } - const defaultValueKey = this.ns.w3.shacl.defaultValue - let result + const defaultValueKey = this.ns.w3.shacl.defaultValue; + let result; if (shape) { shape = this._resolve(shape); - if(shape[defaultValueKey]){ - result = this._getValue(shape[defaultValueKey][0], this.ns.aml.vocabularies.data.value) + if (shape[defaultValueKey]) { + result = this._getValue(shape[defaultValueKey][0], this.ns.aml.vocabularies.data.value); } } if (range && !result) { range = this._resolve(range); - if(range[defaultValueKey]){ - result = this._getValue(range[defaultValueKey], this.ns.aml.vocabularies.data.value) + if (range[defaultValueKey]) { + result = this._getValue(range[defaultValueKey], this.ns.aml.vocabularies.data.value); } } - return result ? String(result): undefined; + return result ? String(result) : undefined; } /** @@ -470,14 +440,14 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { * @return {Object|undefined} Size,namespace,aliases,defaultValue of the property (only when has avroValues) */ _computeAvroProperties(range, shape) { - if(!this.avroValue){ - return {size:undefined, namespace:undefined, aliases:undefined, defaultValue:undefined} + if (!this.avroValue) { + return { size: undefined, namespace: undefined, aliases: undefined, defaultValue: undefined }; } - const size = this._computeAvroProperty(range,shape,"size") - const namespace = this._computeAvroProperty(range,shape,"namespace") - const aliases = this._computeAvroProperty(range,shape,"aliases") - const defaultValue = this._computeAvroDefaultValue(range,shape) - return {size, namespace, aliases, defaultValue} + const size = this._computeAvroProperty(range, shape, "size"); + const namespace = this._computeAvroProperty(range, shape, "namespace"); + const aliases = this._computeAvroProperty(range, shape, "aliases"); + const defaultValue = this._computeAvroDefaultValue(range, shape); + return { size, namespace, aliases, defaultValue }; } /** @@ -486,19 +456,18 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { * @param {Object} data Range object of current shape. */ _computeAvroSourceMap(data) { - try{ - const sourcesKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.sources) - const avroSchemaKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.avroSchema) - const valueKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.value) - if(data[sourcesKey] && data[sourcesKey][0][avroSchemaKey]){ - const avroValues = this._ensureArray(data[sourcesKey][0][avroSchemaKey]) - return avroValues[0][valueKey][0]['@value'] + try { + const sourcesKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.sources); + const avroSchemaKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.avroSchema); + const valueKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.value); + if (data[sourcesKey] && data[sourcesKey][0][avroSchemaKey]) { + const avroValues = this._ensureArray(data[sourcesKey][0][avroSchemaKey]); + return avroValues[0][valueKey][0]["@value"]; } - return undefined - }catch(_){ - return undefined + return undefined; + } catch (_) { + return undefined; } - } /** @@ -508,17 +477,14 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { * @param {Object} shape The shape object * @return {Object} Size of the property */ - _computeAvroShapeRangeSourceMap(range,shape) { - const shapeValue = this._computeAvroSourceMap(shape) - if(shapeValue){ - return shapeValue - } - return this._computeAvroSourceMap(range) + _computeAvroShapeRangeSourceMap(range, shape) { + const shapeValue = this._computeAvroSourceMap(shape); + if (shapeValue) { + return shapeValue; + } + return this._computeAvroSourceMap(range); } - - - /** * Computes value for `hasDisplayName` property. * Indicates that `displayName` has been defined in the API specification. @@ -541,10 +507,10 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { } _toBoolean(value) { - if (typeof value === 'boolean') { - return value + if (typeof value === "boolean") { + return value; } - return value === 'true' + return value === "true"; } /** @@ -561,10 +527,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { } shape = this._resolve(shape); if (this._hasType(shape, this.ns.aml.vocabularies.apiContract.Parameter)) { - const required = this._getValue( - shape, - this.ns.aml.vocabularies.apiContract.required - ) + const required = this._getValue(shape, this.ns.aml.vocabularies.apiContract.required); return this._toBoolean(required); } const data = this._getValue(shape, this.ns.w3.shacl.minCount); @@ -613,10 +576,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { if (!range) { return undefined; } - return /** @type string */ (this._getValue( - range, - this.ns.aml.vocabularies.core.description - )); + return /** @type string */ (this._getValue(range, this.ns.aml.vocabularies.core.description)); } /** @@ -643,24 +603,17 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { if (!amf || !range) { return; } - const sKey = this._getAmfKey( - this.ns.aml.vocabularies.docSourceMaps.sources - ); + const sKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.sources); const maps = this._ensureArray(range[sKey]); if (!maps) { return; } - const dKey = this._getAmfKey( - this.ns.aml.vocabularies.docSourceMaps.declaredElement - ); + const dKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.declaredElement); const dElm = this._ensureArray(maps[0][dKey]); if (!dElm) { return; } - const id = this._getValue( - dElm[0], - this.ns.aml.vocabularies.docSourceMaps.element - ); + const id = this._getValue(dElm[0], this.ns.aml.vocabularies.docSourceMaps.element); this._targetTypeId = id; const type = this._getType(amf, id); if (!type) { @@ -677,19 +630,19 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { } _navigateType() { - const e = new CustomEvent('api-navigation-selection-changed', { + const e = new CustomEvent("api-navigation-selection-changed", { bubbles: true, composed: true, detail: { selected: this._targetTypeId, - type: 'type', + type: "type", }, }); this.dispatchEvent(e); } _linkKeydown(e) { - if (e.key === 'Enter') { + if (e.key === "Enter") { this._navigateType(); } } @@ -715,12 +668,12 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { _getParentTypeName() { if (this.isArray) { - return 'item' + return "item"; } - if(this.isObject){ - return this.parentName + if (this.isObject) { + return this.parentName; } - return this.displayName + return this.displayName; } /** @@ -728,7 +681,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { */ _complexTemplate() { if (!this.isComplex || !this.opened || this.isScalarArray) { - return ''; + return ""; } const range = this._resolve(this.range); const parentTypeName = this._getParentTypeName(); @@ -748,15 +701,15 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { >
`; } - _getTypeLabelData(){ + _getTypeLabelData() { const { propertyDataType, avroValue } = this; - if(avroValue==='map'){ - return {dataType:'Map',customValue:false} + if (avroValue === "map") { + return { dataType: "Map", customValue: false }; } - if(propertyDataType==='Unknown type' && avroValue){ - return {dataType:avroValue,customValue:true} + if (propertyDataType === "Unknown type" && avroValue) { + return { dataType: avroValue, customValue: true }; } - return {dataType:propertyDataType,customValue:false} + return { dataType: propertyDataType, customValue: false }; } /** @@ -764,19 +717,12 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { */ _getTypeNameTemplate() { const { isScalarArray } = this; - let {dataType} = this._getTypeLabelData(); + let { dataType } = this._getTypeLabelData(); const id = this._targetTypeId; if (id) { const label = this._targetTypeName; return html` - ${label} + ${label} ${dataType} `; } @@ -784,9 +730,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { const itemType = this.arrayScalarTypeName; dataType = `${dataType} of ${itemType}`; } - return html` - ${dataType}`; - + return html` ${dataType}`; } /** @@ -794,23 +738,21 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { */ _getFixedTypeSizeAvroTemplate() { const { size } = this; - if(!size){ - return '' + if (!size) { + return ""; } - return html` -
Size: ${size}
`; + return html`
Size: ${size}
`; } /** * @return {TemplateResult | String} Template size value (only for async / avro) */ _getCustomAvroValueTemplate() { - const {customValue} = this._getTypeLabelData() - if(!customValue){ - return '' + const { customValue } = this._getTypeLabelData(); + if (!customValue) { + return ""; } - return html` -
This is a custom Avro type. You can read the definitions for this value in the specification.
`; + return html`
This is a custom Avro type. You can read the definitions for this value in the specification.
`; } /** @@ -818,11 +760,10 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { */ _getDefaultValueAvroTemplate() { const { defaultValue } = this; - if(!defaultValue){ - return '' + if (!defaultValue) { + return ""; } - return html` -
Default Value: ${defaultValue}
`; + return html`
Default Value: ${defaultValue}
`; } /** @@ -830,35 +771,29 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { */ _getTypeNamespaceAvroTemplate() { const { namespace } = this; - if(!namespace){ - return '' + if (!namespace) { + return ""; } - return html` -
Namespace: ${namespace}
`; + return html`
Namespace: ${namespace}
`; } /** * @return {TemplateResult | String} Template namespace value (only for async / avro) */ _getTypeAliasesAvroTemplate() { - const { aliases } = this; - if (!aliases) { - return ''; - } - return html` -
- Aliases: ${aliases.map(alias => html`${alias}`)} -
- `; -} - + const { aliases } = this; + if (!aliases) { + return ""; + } + return html`
Aliases: ${aliases.map((alias) => html`${alias}`)}
`; + } /** * @return {TemplateResult|string} Template for the description */ _descriptionTemplate() { if (!(this.hasPropertyDescription || this.hasShapeDescription)) { - return ''; + return ""; } return html` @@ -874,18 +809,8 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { const { isComplex, _renderToggleButton } = this; return isComplex ? html`
-
- ${this._headerNameTemplate()} -
- ${_renderToggleButton - ? html`${this.complexToggleLabel}` - : ''} +
${this._headerNameTemplate()}
+ ${_renderToggleButton ? html`${this.complexToggleLabel}` : ""}
` : this._headerNameTemplate(); } @@ -894,46 +819,66 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { * @return {TemplateResult} Template for a type name label */ _headerNameTemplate() { - const { - hasDisplayName, - displayName, - propertyName, - parentTypeName, - hasParentTypeName - } = this; - - return html` ${hasDisplayName - ? html`
${displayName}
` - : ''} + const { hasDisplayName, displayName, propertyName, parentTypeName, hasParentTypeName } = this; + + return html` ${hasDisplayName ? html`
${displayName}
` : ""} ${propertyName ? html`
- ${parentTypeName}. + ${parentTypeName}. ${propertyName}
` - : ''}`; + : ""}`; } _deprecatedWarningTemplate() { if (!this.deprecated) { - return ''; + return ""; + } + return html`
Warning: Deprecated
`; + } + + _navigateItem(e) { + e.preventDefault(); + const data = e.composedPath()[0].dataset; + if (!data.id || !data.shapeType) { + return; } - return html`
Warning: Deprecated
` + const ev = new CustomEvent("api-navigation-selection-changed", { + bubbles: true, + composed: true, + detail: { + selected: data.id, + type: data.shapeType, + }, + }); + this.dispatchEvent(ev); + } + + _keydownNavigateItem(e) { + if (e.key === "Enter") { + this._navigateItem(e); + } + } + + _typesMappingsTemplate() { + const mappings = this._getValueArray(this.discriminatorMapping, this._getAmfKey(this.ns.aml.vocabularies.shapes.discriminatorValueMapping)); + if (!mappings) return html``; + + return html``; } _noNameAvroClass() { - const { - hasDisplayName, - propertyName, - isComplex, - avroValue, - _renderToggleButton - } = this; - if(!hasDisplayName && !propertyName && isComplex && avroValue && _renderToggleButton){ - return ' no-name' + const { hasDisplayName, propertyName, isComplex, avroValue, _renderToggleButton } = this; + if (!hasDisplayName && !propertyName && isComplex && avroValue && _renderToggleButton) { + return " no-name"; } - return '' + return ""; } /** @@ -945,36 +890,11 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) { ${this._headerTemplate()}
- ${this._getTypeNameTemplate()} - ${this.isRequired - ? html`Required` - : ''} - ${this.isEnum - ? html`Enum` - : ''} - ${this.isReadOnly - ? html`Read only` - : ''} + ${this._getTypeNameTemplate()} ${this.isRequired ? html`Required` : ""} + ${this.isEnum ? html`Enum` : ""} ${this.isReadOnly ? html`Read only` : ""}
- ${this._getCustomAvroValueTemplate()} - ${this._getDefaultValueAvroTemplate()} - ${this._getFixedTypeSizeAvroTemplate()} - ${this._getTypeNamespaceAvroTemplate()} - ${this._getTypeAliasesAvroTemplate()} - ${this._deprecatedWarningTemplate()} - ${this._descriptionTemplate()} + ${this._getCustomAvroValueTemplate()} ${this._getDefaultValueAvroTemplate()} ${this._getFixedTypeSizeAvroTemplate()} ${this._getTypeNamespaceAvroTemplate()} ${this._getTypeAliasesAvroTemplate()} ${this._deprecatedWarningTemplate()} + ${this._descriptionTemplate()} ${this._typesMappingsTemplate()}