@api-components/api-annotation-document
Advanced tools
Comparing version 4.1.0 to 4.2.0
@@ -1,127 +0,8 @@ | ||
| /** | ||
| * DO NOT EDIT | ||
| * | ||
| * This file was automatically generated by | ||
| * https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations | ||
| * | ||
| * To modify these typings, edit the source file(s): | ||
| * api-annotation-document.js | ||
| */ | ||
| import { ApiAnnotationDocumentElement } from './src/ApiAnnotationDocumentElement'; | ||
| // tslint:disable:variable-name Describing an API that's defined elsewhere. | ||
| // tslint:disable:no-any describes the API as best we are able today | ||
| import {LitElement, html, css} from 'lit-element'; | ||
| import {AmfHelperMixin} from '@api-components/amf-helper-mixin/amf-helper-mixin.js'; | ||
| export {ApiAnnotationDocument}; | ||
| declare namespace ApiElements { | ||
| /** | ||
| * `api-annotation-document` | ||
| * | ||
| * An element to render annotations (also known as custom properties) | ||
| * from AMF model. | ||
| * | ||
| * Anotations are part of RAML language and API console supports it. | ||
| * The element looks for annotations in model and renders them. | ||
| * | ||
| * It hides itself from the view if there's no annotations. | ||
| * | ||
| * ## Styling | ||
| * | ||
| * `<api-annotation-document>` provides the following custom properties and mixins for styling: | ||
| * | ||
| * Custom property | Description | Default | ||
| * ----------------|-------------|---------- | ||
| * `--api-annotation-document` | Mixin applied to this elment | `{}` | ||
| * `--api-annotation-document-color` | Color of the custom property (annotation) documentation | `#616161` | ||
| */ | ||
| class ApiAnnotationDocument extends | ||
| AmfHelperMixin( | ||
| Object) { | ||
| /** | ||
| * A property shape definition of AMF. | ||
| * The element looks for `http://raml.org/vocabularies/document#customDomainProperties` | ||
| * key in the property and renders custom properties view if any | ||
| * property is defined. | ||
| */ | ||
| shape: object|null|undefined; | ||
| /** | ||
| * Computed value, true if any custom property has been found. | ||
| */ | ||
| readonly hasCustomProperties: boolean|null|undefined; | ||
| _hasCustomProperties: any; | ||
| /** | ||
| * List of custom properties in the shape. | ||
| */ | ||
| readonly customList: Array<object|null>|null; | ||
| _customList: any; | ||
| connectedCallback(): void; | ||
| /** | ||
| * Called when the shape property change. | ||
| * Sets `hasCustomProperties` and `customList` properties. | ||
| * | ||
| * Note that for performance reasons, if the element determine that there's | ||
| * no custom properties wit will not clear `customList`. | ||
| * It will be updated only if tha vlue actually change. | ||
| * | ||
| * @param shape AMF shape or range property. | ||
| */ | ||
| _shapeChanged(shape: object|null): void; | ||
| /** | ||
| * Hiddes/shows the element depending on the state | ||
| * | ||
| * @param has True if has ay property | ||
| */ | ||
| _hasCustomChanged(has: Boolean|null): void; | ||
| _computeName(item: any): any; | ||
| /** | ||
| * Tests if custom propery can have value. | ||
| * | ||
| * @param item AMF custom property definition | ||
| */ | ||
| _hasValue(item: object|null): Boolean|null; | ||
| /** | ||
| * Tests if value is a scalar value | ||
| * | ||
| * @param item AMF custom property definition | ||
| */ | ||
| _isScalar(item: object|null): Boolean|null; | ||
| /** | ||
| * Computes scalar value for the item. | ||
| * | ||
| * @param item AMF custom property definition | ||
| */ | ||
| _scalarValue(item: object|null): String|null; | ||
| /** | ||
| * Computes complex (object) value for the custom property | ||
| * | ||
| * @param item AMF custom property definition | ||
| */ | ||
| _complexValue(item: object|null): object|null; | ||
| _renderItemValue(item: any): any; | ||
| _renderItemComplexValue(item: any): any; | ||
| _renderItem(item: any): any; | ||
| render(): any; | ||
| } | ||
| } | ||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| "api-annotation-document": ApiElements.ApiAnnotationDocument; | ||
| "api-annotation-document": ApiAnnotationDocumentElement; | ||
| } | ||
| } |
@@ -1,323 +0,3 @@ | ||
| 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'; | ||
| /** | ||
| * `api-annotation-document` | ||
| * | ||
| * An element to render annotations (also known as custom properties) | ||
| * from AMF model. | ||
| * | ||
| * Anotations are part of RAML language and API console supports it. | ||
| * The element looks for annotations in model and renders them. | ||
| * | ||
| * It hides itself from the view if there's no annotations. | ||
| * | ||
| * ## Styling | ||
| * | ||
| * `<api-annotation-document>` provides the following custom properties and mixins for styling: | ||
| * | ||
| * Custom property | Description | Default | ||
| * ----------------|-------------|---------- | ||
| * `--api-annotation-document` | Mixin applied to this elment | `{}` | ||
| * `--api-annotation-document-color` | Color of the custom property (annotation) documentation | `#616161` | ||
| * | ||
| * @customElement | ||
| * @demo demo/index.html | ||
| * @memberof ApiElements | ||
| * @appliesMixin AmfHelperMixin | ||
| */ | ||
| export class ApiAnnotationDocument extends AmfHelperMixin(LitElement) { | ||
| get styles() { | ||
| return css`:host { | ||
| display: block; | ||
| color: var(--api-annotation-document-color, #616161); | ||
| } | ||
| import { ApiAnnotationDocumentElement } from './src/ApiAnnotationDocumentElement.js'; | ||
| :host([hidden]) { | ||
| display: none; | ||
| } | ||
| .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-property > span { | ||
| display: block; | ||
| } | ||
| .name { | ||
| font-weight: 500; | ||
| } | ||
| .scalar-value { | ||
| display: block; | ||
| margin-top: 3px; | ||
| } | ||
| .custom-list { | ||
| padding: 0; | ||
| margin: 0; | ||
| list-style: none; | ||
| } | ||
| .info-icon { | ||
| margin: 0 12px; | ||
| fill: var(--api-annotation-accent-color, #1976D2); | ||
| width: 24px; | ||
| height: 24px; | ||
| }`; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| /** | ||
| * A property shape definition of AMF. | ||
| * The element looks for `http://raml.org/vocabularies/document#customDomainProperties` | ||
| * key in the property and renders custom properties view if any | ||
| * property is defined. | ||
| */ | ||
| shape: { type: Object }, | ||
| /** | ||
| * Computed value, true if any custom property has been found. | ||
| */ | ||
| hasCustomProperties: { type: Boolean }, | ||
| /** | ||
| * List of custom properties in the shape. | ||
| * | ||
| * @type {Array<Object>} | ||
| */ | ||
| customList: { type: Array } | ||
| }; | ||
| } | ||
| get shape() { | ||
| return this._shape; | ||
| } | ||
| set shape(value) { | ||
| const oldValue = this._shape; | ||
| if (oldValue === value) { | ||
| return; | ||
| } | ||
| this._shape = value; | ||
| this.requestUpdate('shape', oldValue); | ||
| this._shapeChanged(value); | ||
| } | ||
| get hasCustomProperties() { | ||
| return this.__hasCustomProperties; | ||
| } | ||
| get _hasCustomProperties() { | ||
| return this.__hasCustomProperties; | ||
| } | ||
| set _hasCustomProperties(value) { | ||
| const oldValue = this.__hasCustomProperties; | ||
| if (oldValue === value) { | ||
| return; | ||
| } | ||
| this.__hasCustomProperties = value; | ||
| this._hasCustomChanged(value); | ||
| this.dispatchEvent(new CustomEvent('has-custom-properties-changed', { | ||
| composed: true, | ||
| detail: { | ||
| value | ||
| } | ||
| })); | ||
| } | ||
| get customList() { | ||
| return this.__customList; | ||
| } | ||
| get _customList() { | ||
| return this.__customList; | ||
| } | ||
| set _customList(value) { | ||
| const oldValue = this.__customList; | ||
| if (oldValue === value) { | ||
| return; | ||
| } | ||
| this.__customList = value; | ||
| this.requestUpdate('customList', oldValue); | ||
| } | ||
| connectedCallback() { | ||
| if (super.connectedCallback) { | ||
| super.connectedCallback(); | ||
| } | ||
| if (this._hasCustomProperties === undefined) { | ||
| this._hasCustomProperties = false; | ||
| } | ||
| } | ||
| ensureObject(value) { | ||
| return (value instanceof Array) ? value[0] : value; | ||
| } | ||
| /** | ||
| * Called when the shape property change. | ||
| * Sets `hasCustomProperties` and `customList` properties. | ||
| * | ||
| * Note that for performance reasons, if the element determine that there's | ||
| * no custom properties wit will not clear `customList`. | ||
| * It will be updated only if tha vlue actually change. | ||
| * | ||
| * @param {Object} shape AMF shape or range property. | ||
| */ | ||
| _shapeChanged(shape) { | ||
| const key = this._getAmfKey(this.ns.aml.vocabularies.document.customDomainProperties); | ||
| const custom = this._ensureArray(shape && shape[key]); | ||
| const has = !!(custom && custom.length); | ||
| this._hasCustomProperties = has; | ||
| if (!has) { | ||
| return; | ||
| } | ||
| const keys = custom.map((item) => item['@id']); | ||
| const properties = keys.map((key) => this.ensureObject(shape[key] || shape['amf://id' + key])); | ||
| this._customList = properties; | ||
| } | ||
| /** | ||
| * Hiddes/shows the element depending on the state | ||
| * | ||
| * @param {Boolean} has True if has ay property | ||
| */ | ||
| _hasCustomChanged(has) { | ||
| this.setAttribute('aria-hidden', !has); | ||
| if (has) { | ||
| if (this.hasAttribute('hidden')) { | ||
| this.removeAttribute('hidden'); | ||
| } | ||
| } else { | ||
| if (!this.hasAttribute('hidden')) { | ||
| this.setAttribute('hidden', true); | ||
| } | ||
| } | ||
| } | ||
| _computeName(item) { | ||
| return this._getValue(item, this.ns.aml.vocabularies.core.extensionName); | ||
| } | ||
| /** | ||
| * Tests if custom propery can have value. | ||
| * | ||
| * @param {Object} item AMF custom property definition | ||
| * @return {Boolean} | ||
| */ | ||
| _hasValue(item) { | ||
| if (!this._isScalar(item)) { | ||
| return true; | ||
| } | ||
| const key = this._getAmfKey(this.ns.aml.vocabularies.data.value); | ||
| let value = item && item[key]; | ||
| if (!value) { | ||
| return false; | ||
| } | ||
| if (value instanceof Array) { | ||
| value = value[0]; | ||
| } | ||
| return !this._hasType(value, this.ns.w3.xmlSchema.nil); | ||
| } | ||
| /** | ||
| * Tests if value is a scalar value | ||
| * | ||
| * @param {Object} item AMF custom property definition | ||
| * @return {Boolean} | ||
| */ | ||
| _isScalar(item) { | ||
| return this._hasType(item, this.ns.aml.vocabularies.data.Scalar); | ||
| } | ||
| /** | ||
| * Computes scalar value for the item. | ||
| * | ||
| * @param {Object} item AMF custom property definition | ||
| * @return {String} | ||
| */ | ||
| _scalarValue(item) { | ||
| if (item instanceof Array) { | ||
| item = item[0]; | ||
| } | ||
| return this._getValue(item, this.ns.aml.vocabularies.data.value); | ||
| } | ||
| /** | ||
| * Computes complex (object) value for the custom property | ||
| * | ||
| * @param {Object} item AMF custom property definition | ||
| * @return {Object} | ||
| */ | ||
| _complexValue(item) { | ||
| if (!item) { | ||
| return; | ||
| } | ||
| const data = []; | ||
| const dataKey = this._getAmfKey(this.ns.raml.vocabularies.data + ''); | ||
| const len = dataKey.length; | ||
| Object.keys(item).forEach((key) => { | ||
| if (key.indexOf(dataKey) === -1) { | ||
| return; | ||
| } | ||
| let label = key.substr(len); | ||
| if (label[0] === ':') { | ||
| // compact model does that | ||
| label = label.substr(1); | ||
| } | ||
| data.push({ | ||
| value: this._scalarValue(item[key]), | ||
| label | ||
| }); | ||
| }); | ||
| return data; | ||
| } | ||
| _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"> | ||
| ${isScalar ? | ||
| html`<span class="scalar-value">${value}</span>` : | ||
| value} | ||
| </span>`; | ||
| } | ||
| _renderItemComplexValue(item) { | ||
| const items = this._complexValue(item); | ||
| if (!items || !items.length) { | ||
| return ''; | ||
| } | ||
| 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) : ''; | ||
| return html`<style>${this.styles}</style> | ||
| <div class="custom-property"> | ||
| <div class="info-icon">${infoOutline}</div> | ||
| <div class="info-value"> | ||
| <span class="name">${name}</span> | ||
| ${value} | ||
| </div> | ||
| </div>`; | ||
| } | ||
| render() { | ||
| const list = this.customList; | ||
| if (!list || !list.length) { | ||
| return; | ||
| } | ||
| const items = list.map((item) => this._renderItem(item)); | ||
| return html`${items}`; | ||
| } | ||
| } | ||
| window.customElements.define('api-annotation-document', ApiAnnotationDocument); | ||
| window.customElements.define('api-annotation-document', ApiAnnotationDocumentElement); |
109
package.json
| { | ||
| "name": "@api-components/api-annotation-document", | ||
| "description": "An element to render RAML annotations based on AMF data model", | ||
| "version": "4.1.0", | ||
| "version": "4.2.0", | ||
| "license": "Apache-2.0", | ||
| "main": "api-annotation-document.js", | ||
| "main": "index.js", | ||
| "module": "index.js", | ||
| "keywords": [ | ||
@@ -13,8 +14,8 @@ "api-components", | ||
| "authors": [ | ||
| "Pawel Psztyc", | ||
| "The Advanced REST client authors <arc@mulesoft.com>" | ||
| "Pawel Psztyc" | ||
| ], | ||
| "contributors": [ | ||
| "Pawel Psztyc", | ||
| "The Advanced REST client authors <arc@mulesoft.com>" | ||
| "Nicolas Schejtman", | ||
| "Francisco Di Giandomenico", | ||
| "Your name can be here!" | ||
| ], | ||
@@ -30,4 +31,4 @@ "repository": { | ||
| "dependencies": { | ||
| "@advanced-rest-client/arc-icons": "^3.0.5", | ||
| "@api-components/amf-helper-mixin": "^4.0.17", | ||
| "@advanced-rest-client/arc-icons": "^3.3.1", | ||
| "@api-components/amf-helper-mixin": "^4.3.6", | ||
| "lit-element": "^2.2.1", | ||
@@ -37,50 +38,66 @@ "lit-html": "^1.1.2" | ||
| "devDependencies": { | ||
| "@advanced-rest-client/arc-demo-helper": "^1.0.17", | ||
| "@advanced-rest-client/eslint-config": "^1.1.4", | ||
| "@advanced-rest-client/prettier-config": "^0.1.0", | ||
| "@advanced-rest-client/arc-demo-helper": "^2.2.6", | ||
| "@api-components/api-console-default-theme": "^3.0.0-preview.2", | ||
| "@api-components/api-model-generator": "^0.2.3", | ||
| "@api-components/api-navigation": "^4.0.2", | ||
| "@commitlint/cli": "^11.0.0", | ||
| "@commitlint/config-conventional": "^11.0.0", | ||
| "@open-wc/testing": "^2.4.2", | ||
| "@open-wc/testing-karma": "^3.2.25", | ||
| "@polymer/gen-typescript-declarations": "^1.6.2", | ||
| "@polymer/paper-dropdown-menu": "^3.1.0", | ||
| "@polymer/paper-item": "^3.0.0", | ||
| "@polymer/paper-listbox": "^3.0.0", | ||
| "@web/test-runner": "^0.9.11", | ||
| "@web/test-runner-playwright": "^0.6.6", | ||
| "@webcomponents/webcomponentsjs": "^2.4.0", | ||
| "deepmerge": "^4.2.2", | ||
| "es-dev-server": "^1.35.0", | ||
| "husky": "^3.1.0", | ||
| "karma": "^4.4.1", | ||
| "lint-staged": "^9.5.0", | ||
| "web-animations-js": "^2.3.2" | ||
| "@api-components/api-navigation": "^4.2.7", | ||
| "@commitlint/cli": "^12.0.1", | ||
| "@commitlint/config-conventional": "^12.0.1", | ||
| "@open-wc/eslint-config": "^4.2.0", | ||
| "@open-wc/testing": "^2.5.32", | ||
| "@web/dev-server": "^0.1.8", | ||
| "@web/test-runner": "^0.12.16", | ||
| "@web/test-runner-playwright": "^0.8.4", | ||
| "eslint": "^7.21.0", | ||
| "eslint-config-prettier": "^8.1.0", | ||
| "husky": "^4.3.8", | ||
| "lint-staged": "^10.5.4", | ||
| "sinon": "^9.2.4", | ||
| "typescript": "^4.2.3", | ||
| "typescript-lit-html-plugin": "^0.9.0" | ||
| }, | ||
| "scripts": { | ||
| "update-types": "gen-typescript-declarations --deleteExisting --outDir .", | ||
| "start": "es-dev-server --app-index demo/index.html --node-resolve --open --watch", | ||
| "start:compatibility": "es-dev-server --app-index demo/index.html --compatibility all --node-resolve --open --watch", | ||
| "lint:eslint": "eslint --ext .js,.html .", | ||
| "format:eslint": "eslint --ext .js,.html . --fix", | ||
| "lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)", | ||
| "format:prettier": "prettier \"**/*.js\" --write", | ||
| "lint": "npm run lint:eslint && npm run lint:prettier", | ||
| "format": "npm run format:eslint && npm run format:prettier", | ||
| "start": "web-dev-server --app-index demo/index.html --node-resolve --open --watch --root-dir .", | ||
| "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore", | ||
| "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore", | ||
| "lint:types": "tsc", | ||
| "lint": "npm run lint:eslint", | ||
| "format": "npm run format:eslint", | ||
| "test": "web-test-runner test/**/*.test.js --coverage --node-resolve --playwright --browsers chromium firefox webkit", | ||
| "test:watch": "web-test-runner test/**/*.test.js --node-resolve --watch", | ||
| "test:update-snapshots": "web-test-runner test/**/*.test.js --update-snapshots", | ||
| "test:prune-snapshots": "web-test-runner test/**/*.test.js --prune-snapshots", | ||
| "test:compatibility": "web-test-runner test/**/*.test.js --compatibility auto --coverage", | ||
| "test:compatibility:watch": "web-test-runner test/**/*.test.js --compatibility auto --auto-watch=true --single-run=false", | ||
| "generate-model": "node demo/model.js" | ||
| "test:watch": "web-test-runner test/**/*.test.js --node-resolve --watch --playwright --browsers chromium", | ||
| "gen:wc": "wca analyze \"*.js\" --outFile custom-elements.json", | ||
| "prepare": "node demo/model.js" | ||
| }, | ||
| "eslintConfig": { | ||
| "extends": [ | ||
| "@open-wc/eslint-config", | ||
| "eslint-config-prettier" | ||
| ], | ||
| "overrides": [ | ||
| { | ||
| "files": [ | ||
| "demo/**/*.js", | ||
| "test/**/*.js", | ||
| "**/demo/**/*.html" | ||
| ], | ||
| "rules": { | ||
| "no-console": "off", | ||
| "no-unused-expressions": "off", | ||
| "no-plusplus": "off", | ||
| "no-param-reassing": "off", | ||
| "class-methods-use-this": "off", | ||
| "import/no-extraneous-dependencies": "off" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "lint-staged" | ||
| } | ||
| }, | ||
| "lint-staged": { | ||
| "*.js": [ | ||
| "eslint --fix", | ||
| "git add" | ||
| "eslint --fix" | ||
| ] | ||
| } | ||
| } |
@@ -1,11 +0,9 @@ | ||
| [](https://www.npmjs.com/package/@api-components/api-annotation-document) | ||
| # api-annotation-document | ||
| [](https://travis-ci.org/advanced-rest-client/api-annotation-document) | ||
| An element to render RAML annotations based on AMF data model. | ||
| [](https://www.webcomponents.org/element/@advanced-rest-client/api-annotation-document) | ||
| [](https://www.npmjs.com/package/@api-components/api-annotation-document) | ||
| ## api-annotation-document | ||
| [](https://github.com/advanced-rest-client/api-annotation-document/actions/workflows/deployment.yml) | ||
| An element to render RAML annotations based on AMF data model. | ||
| ## Version compatibility | ||
@@ -19,3 +17,4 @@ | ||
| ### Installation | ||
| ``` | ||
| ```sh | ||
| npm install --save @api-components/api-annotation-document | ||
@@ -84,4 +83,5 @@ ``` | ||
| ### Running the tests | ||
| ```sh | ||
| npm test | ||
| ``` |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-21.74%
18
- Number of package files
- increased by100%
10
- Lines of code
- increased by4.41%
426
Worsened metrics
- Total package byte prevSize
- decreased by-36.17%
17637
- Number of medium supply chain risk alerts
- increased byInfinity%
1