${url}
`;
}
- [authorizationTemplate]() {
+ [authorizationTemplate](): TemplateResult | string {
const { security } = this;
if (!security) {
return '';
@@ -1567,11 +1530,9 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(EventsTar
}
/**
- * @param {SecuritySelectorListItem[]} security
- * @param {number} selected
- * @returns {TemplateResult} The template for the security drop down selector.
+ * @returns The template for the security drop down selector.
*/
- [authorizationSelectorTemplate](security, selected) {
+ [authorizationSelectorTemplate](security: SecuritySelectorListItem[], selected: number): TemplateResult {
const { anypoint } = this;
return html`
@@ -597,29 +597,28 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
}
/**
- * @returns {TemplateResult|string} The template for the list of operations.
+ * @returns The template for the list of operations.
*/
- [operationsTemplate]() {
- const { endpoint } = this;
+ [operationsTemplate](endpoint: ApiDefinitions.IApiEndPoint): TemplateResult | string {
const { operations } = endpoint;
if (!operations.length) {
return '';
}
return html`
- ${operations.map((operation) => this[operationTemplate](operation))}
+ ${operations.map((operation) => this[operationTemplate](endpoint, operation))}
`;
}
/**
- * @param {ApiOperation} operation The operation to render.
- * @returns {TemplateResult} The template for the API operation.
+ * @param operation The operation to render.
+ * @returns The template for the API operation.
*/
- [operationTemplate](operation) {
- const { endpoint, serverId, baseUri, tryItPanel, tryItButton, asyncApi } = this;
+ [operationTemplate](endpoint: ApiDefinitions.IApiEndPoint, operation: ApiDefinitions.IApiOperation): TemplateResult {
+ const { serverId, baseUri, tryItPanel, tryItButton, asyncApi } = this;
const renderTryIt = !tryItPanel && !asyncApi && !!tryItButton;
const classes = {
'operation-container': true,
- tryit: tryItPanel,
+ tryit: !!tryItPanel,
};
return html`
@@ -646,9 +645,9 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
/**
* @param {ApiOperation} operation The operation to render.
- * @returns {TemplateResult|string} The template for the try it column panel rendered next to the operation documentation/
+ * @returns The template for the try it column panel rendered next to the operation documentation/
*/
- [tryItColumnTemplate](operation) {
+ [tryItColumnTemplate](operation: ApiDefinitions.IApiOperation): TemplateResult | string {
if (this.asyncApi) {
return '';
}
@@ -663,10 +662,10 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
}
/**
- * @param {ApiOperation} operation The operation to render.
- * @returns {TemplateResult} The template for the request editor.
+ * @param operation The operation to render.
+ * @returns The template for the request editor.
*/
- [httpRequestTemplate](operation) {
+ [httpRequestTemplate](operation: ApiDefinitions.IApiOperation): TemplateResult {
const content = html`
`;
}
/**
- * @return {TemplateResult|string} The template for the endpoint's extensions.
+ * @return The template for the endpoint's extensions.
*/
- [extensionsTemplate]() {
- const { endpoint } = this;
+ [extensionsTemplate](endpoint: ApiDefinitions.IApiEndPoint): TemplateResult | string {
const { extends: extensions } = endpoint;
if (!extensions || !extensions.length) {
return '';
}
- const type = extensions.find(e => e.types.includes(ns.aml.vocabularies.apiContract.ParametrizedResourceType));
- const traits = extensions.filter(e => e.types.includes(ns.aml.vocabularies.apiContract.ParametrizedTrait));
+ const type = extensions.find(e => e.types.includes(AmfNamespace.aml.vocabularies.apiContract.ParametrizedResourceType));
+ const traits = extensions.filter(e => e.types.includes(AmfNamespace.aml.vocabularies.apiContract.ParametrizedTrait));
const traitsLabel = joinTraitNames(traits);
const typeLabel = type && type.name;
if (!traitsLabel && !typeLabel) {
@@ -744,10 +742,9 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
}
/**
- * @param {string} label
- * @returns {TemplateResult|string} The template for the parent resource type.
+ * @returns The template for the parent resource type.
*/
- [extendsTemplate](label) {
+ [extendsTemplate](label?: string): TemplateResult | string {
if (!label) {
return '';
}
@@ -755,10 +752,9 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
}
/**
- * @param {string} label
- * @returns {TemplateResult|string} The template for the traits applied to the resource.
+ * @returns The template for the traits applied to the resource.
*/
- [traitsTemplate](label) {
+ [traitsTemplate](label?: string): TemplateResult | string {
if (!label) {
return '';
}
diff --git a/src/elements/ApiResponseDocumentElement.d.ts b/src/elements/ApiResponseDocumentElement.d.ts
deleted file mode 100644
index 5f0d126..0000000
--- a/src/elements/ApiResponseDocumentElement.d.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { TemplateResult } from 'lit-element';
-import { ApiDocumentationBase } from './ApiDocumentationBase.js';
-import { Response } from '../helpers/amf';
-import { ApiResponse, ApiPayload, ApiTemplatedLink, ApiIriTemplateMapping } from '../helpers/api';
-
-export const queryResponse: unique symbol;
-export const responseValue: unique symbol;
-export const queryPayloads: unique symbol;
-export const payloadsValue: unique symbol;
-export const payloadValue: unique symbol;
-export const headersTemplate: unique symbol;
-export const payloadTemplate: unique symbol;
-export const payloadSelectorTemplate: unique symbol;
-export const linksTemplate: unique symbol;
-export const linkTemplate: unique symbol;
-export const linkOperationTemplate: unique symbol;
-export const linkMappingsTemplate: unique symbol;
-export const linkMappingTemplate: unique symbol;
-export const mediaTypeSelectHandler: unique symbol;
-
-/**
- * A web component that renders the documentation page for an API response object.
- */
-export default class ApiResponseDocumentElement extends ApiDocumentationBase {
- /**
- * @returns true when has headers parameters definition
- */
- get hasHeaders(): boolean;
- get [payloadValue](): ApiPayload|undefined;
-
- [responseValue]: ApiResponse;
- get response(): ApiResponse;
- set response(value: ApiResponse);
- /**
- * When set it opens the headers section
- * @attribute
- */
- headersOpened: boolean;
- /**
- * When set it opens the payload section
- * @attribute
- */
- payloadOpened: boolean;
- /**
- * The currently selected media type for the payloads.
- * @attribute
- */
- mimeType: string;
- [payloadsValue]: ApiPayload[];
- constructor();
-
- /**
- * Queries the graph store for the API Response data.
- */
- processGraph(): Promise;
- [queryPayloads](): Promise;
- [mediaTypeSelectHandler](e: Event): void;
-
- render(): TemplateResult;
-
- /**
- * @returns The template for the headers
- */
- [headersTemplate](): TemplateResult|string;
-
- /**
- * @returns The template for the payload section
- */
- [payloadTemplate](): TemplateResult|string;
-
- /**
- * @returns The template for the payload media type selector.
- */
- [payloadSelectorTemplate](): TemplateResult|string;
-
- /**
- * @returns The template for the response links
- */
- [linksTemplate](): TemplateResult|string;
- /**
- * @returns {TemplateResult} A template for the link
- */
- [linkTemplate](link: ApiTemplatedLink): TemplateResult|string;
-
- /**
- * @returns The template for the link's operation
- */
- [linkOperationTemplate](operationId: string): TemplateResult|string;
- /**
- * @returns The template for the link's operation
- */
- [linkMappingsTemplate](mappings: ApiIriTemplateMapping[]): TemplateResult|string;
-
- /**
- * @returns {TemplateResult} The template for the link's operation
- */
- [linkMappingTemplate](mapping: ApiIriTemplateMapping): TemplateResult|string;
-}
diff --git a/src/elements/ApiResponseDocumentElement.js b/src/elements/ApiResponseDocumentElement.ts
similarity index 65%
rename from src/elements/ApiResponseDocumentElement.js
rename to src/elements/ApiResponseDocumentElement.ts
index d4db338..13d6289 100644
--- a/src/elements/ApiResponseDocumentElement.js
+++ b/src/elements/ApiResponseDocumentElement.ts
@@ -1,11 +1,14 @@
/* eslint-disable class-methods-use-this */
-import { html } from 'lit-element';
+import { html, TemplateResult, CSSResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ApiDefinitions } from '@api-client/core/build/browser.js';
import { MarkdownStyles } from '@advanced-rest-client/highlight';
+import { AnypointRadioGroupElement } from '@anypoint-web-components/awc';
import '@advanced-rest-client/highlight/arc-marked.js';
-import '@anypoint-web-components/awc/anypoint-button.js';
-import '@anypoint-web-components/awc/anypoint-collapse.js';
-import '@anypoint-web-components/awc/anypoint-radio-button.js';
-import '@anypoint-web-components/awc/anypoint-radio-group.js';
+import '@anypoint-web-components/awc/dist/define/anypoint-button.js';
+import '@anypoint-web-components/awc/dist/define/anypoint-collapse.js';
+import '@anypoint-web-components/awc/dist/define/anypoint-radio-button.js';
+import '@anypoint-web-components/awc/dist/define/anypoint-radio-group.js';
import '@advanced-rest-client/icons/arc-icon.js';
import commonStyles from './styles/Common.js';
import elementStyles from './styles/ApiResponse.js';
@@ -20,13 +23,6 @@ import {
} from './ApiDocumentationBase.js';
import { Events } from '../events/Events.js';
-/** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('../helpers/api').ApiResponse} ApiResponse */
-/** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
-/** @typedef {import('../helpers/api').ApiTemplatedLink} ApiTemplatedLink */
-/** @typedef {import('../helpers/api').ApiIriTemplateMapping} ApiIriTemplateMapping */
-/** @typedef {import('@anypoint-web-components/awc').AnypointRadioGroupElement} AnypointRadioGroupElement */
-
export const queryResponse = Symbol('queryResponse');
export const responseValue = Symbol('responseValue');
export const queryPayloads = Symbol('queryPayloads');
@@ -46,14 +42,18 @@ export const mediaTypeSelectHandler = Symbol('mediaTypeSelectHandler');
* A web component that renders the documentation page for an API response object.
*/
export default class ApiResponseDocumentElement extends ApiDocumentationBase {
- get styles() {
+ static get styles(): CSSResult[] {
return [commonStyles, elementStyles, MarkdownStyles];
}
+ [responseValue]?: ApiDefinitions.IApiResponse;
+
+ [payloadsValue]?: ApiDefinitions.IApiPayload[];
+
/**
- * @returns {boolean} true when has headers parameters definition
+ * @returns true when has headers parameters definition
*/
- get hasHeaders() {
+ get hasHeaders(): boolean {
const response = this[responseValue];
if (!response) {
return false;
@@ -61,10 +61,7 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
return Array.isArray(response.headers) && !!response.headers.length;
}
- /**
- * @returns {ApiPayload|undefined}
- */
- get [payloadValue]() {
+ get [payloadValue](): ApiDefinitions.IApiPayload | undefined {
const { mimeType } = this;
const payloads = this[payloadsValue];
if (!Array.isArray(payloads) || !payloads.length) {
@@ -76,17 +73,12 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
return payloads.find((item) => item.mediaType === mimeType);
}
- /**
- * @returns {ApiResponse}
- */
- get response() {
+ @property({ type: Object })
+ get response(): ApiDefinitions.IApiResponse | undefined {
return this[responseValue];
}
- /**
- * @param {ApiResponse} value
- */
- set response(value) {
+ set response(value: ApiDefinitions.IApiResponse | undefined) {
const old = this[responseValue];
if (old === value) {
return;
@@ -95,57 +87,38 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
this.processGraph();
}
- static get properties() {
- return {
- /**
- * When set it opens the headers section
- */
- headersOpened: { type: Boolean, reflect: true },
- /**
- * When set it opens the payload section
- */
- payloadOpened: { type: Boolean, reflect: true },
- /**
- * The currently selected media type for the payloads.
- */
- mimeType: { type: String, reflect: true },
- };
- }
+ /**
+ * When set it opens the headers section
+ * @attribute
+ */
+ @property({ type: Boolean, reflect: true }) headersOpened?: boolean;
- constructor() {
- super();
- /**
- * @type {ApiResponse}
- */
- this[responseValue] = undefined;
- /**
- * @type {ApiPayload[]}
- */
- this[payloadsValue] = undefined;
- /**
- * @type {string}
- */
- this.mimeType = undefined;
+ /**
+ * When set it opens the payload section
+ * @attribute
+ */
+ @property({ type: Boolean, reflect: true }) payloadOpened?: boolean;
- this.headersOpened = false;
- this.payloadOpened = false;
- }
+ /**
+ * The currently selected media type for the payloads.
+ * @attribute
+ */
+ @property({ type: String, reflect: true }) mimeType?: string;
/**
* Queries the graph store for the API Response data.
- * @returns {Promise}
*/
- async processGraph() {
+ async processGraph(): Promise {
await this[queryResponse]();
await this[queryPayloads]();
- await this.requestUpdate();
+ this.requestUpdate();
+ await this.updateComplete;
}
/**
* Queries the store for the response data, when needed.
- * @returns {Promise}
*/
- async [queryResponse]() {
+ async [queryResponse](): Promise {
const { domainId } = this;
if (!domainId) {
// this[responseValue] = undefined;
@@ -160,12 +133,13 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
this[responseValue] = info;
} catch (e) {
this[responseValue] = undefined;
- Events.Telemetry.exception(this, e.message, false);
- Events.Reporting.error(this, e, `Unable to query for API response data: ${e.message}`, this.localName);
+ const ex = e as Error;
+ Events.Telemetry.exception(this, ex.message, false);
+ Events.Reporting.error(this, ex, `Unable to query for API response data: ${ex.message}`, this.localName);
}
}
- async [queryPayloads]() {
+ async [queryPayloads](): Promise {
const { response } = this;
if (!response || !Array.isArray(response.payloads) || !response.payloads.length) {
this[payloadsValue] = undefined;
@@ -174,11 +148,8 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
this[payloadsValue] = response.payloads;
}
- /**
- * @param {Event} e
- */
- [mediaTypeSelectHandler](e) {
- const group = /** @type AnypointRadioGroupElement */ (e.target);
+ [mediaTypeSelectHandler](e: Event): void {
+ const group = e.target as AnypointRadioGroupElement;
const { selectedItem } = group;
if (!selectedItem) {
return;
@@ -187,12 +158,11 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
this.mimeType = mime;
}
- render() {
+ render(): TemplateResult {
if (!this[responseValue]) {
return html``;
}
return html`
-
${this[customDomainPropertiesTemplate](this[responseValue].customDomainProperties)}
${this[descriptionTemplate](this[responseValue].description)}
${this[headersTemplate]()}
@@ -202,21 +172,21 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
}
/**
- * @returns {TemplateResult|string} The template for the headers
+ * @returns The template for the headers
*/
- [headersTemplate]() {
- if (!this.hasHeaders) {
+ [headersTemplate](): TemplateResult | string {
+ const { response } = this;
+ if (!this.hasHeaders || !response) {
return '';
}
- const { response } = this;
const content = response.headers.map((id) => this[schemaItemTemplate](id));
return this[paramsSectionTemplate]('Headers', 'headersOpened', content);
}
/**
- * @returns {TemplateResult|string} The template for the payload section
+ * @returns The template for the payload section
*/
- [payloadTemplate]() {
+ [payloadTemplate](): TemplateResult | string {
const payload = this[payloadValue];
if (!payload) {
return '';
@@ -229,14 +199,14 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
}
/**
- * @returns {TemplateResult|string} The template for the payload media type selector.
+ * @returns The template for the payload media type selector.
*/
- [payloadSelectorTemplate]() {
+ [payloadSelectorTemplate](): TemplateResult | string {
const payloads = this[payloadsValue];
if (!Array.isArray(payloads) || payloads.length < 2) {
return '';
}
- const mime = /** @type string[] */ ([]);
+ const mime: string[] = [];
payloads.forEach((item) => {
if (item.mediaType) {
mime.push(item.mediaType);
@@ -262,9 +232,9 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
}
/**
- * @returns {TemplateResult|string} The template for the response links
+ * @returns The template for the response links
*/
- [linksTemplate]() {
+ [linksTemplate](): TemplateResult | string {
const { response } = this;
if (!response) {
return '';
@@ -280,10 +250,9 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiTemplatedLink} link
- * @returns {TemplateResult} A template for the link
+ * @returns A template for the link
*/
- [linkTemplate](link) {
+ [linkTemplate](link: ApiDefinitions.IApiTemplatedLink): TemplateResult {
const { name, mapping, operationId, } = link;
return html`
diff --git a/src/elements/ApiResponseViewElement.d.ts b/src/elements/ApiResponseViewElement.d.ts
deleted file mode 100644
index 0ddcf7d..0000000
--- a/src/elements/ApiResponseViewElement.d.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { TemplateResult } from 'lit-element';
-import { ResponseViewElement } from '@advanced-rest-client/base/api.js';
-import { ArcExportFilesystemEvent } from '@advanced-rest-client/events';
-
-export declare const saveFileHandler: unique symbol;
-
-export declare class ApiResponseViewElement extends ResponseViewElement {
- /**
- * Whether the response details view is opened.
- * @attribute
- */
- details: boolean;
- /**
- * Whether the source ("raw") view is opened.
- * @attribute
- */
- source: boolean;
- /**
- * Enables Anypoint platform styles.
- * @attribute
- */
- anypoint: boolean;
-
- constructor();
-
- connectedCallback(): void;
-
- disconnectedCallback(): void;
-
- [saveFileHandler](e: ArcExportFilesystemEvent): void;
-
- /**
- * @param data The exported data
- * @param mime The data content type
- * @param file The export file name
- */
- downloadFile(data: BlobPart, mime: string, file: string): void;
-
- render(): TemplateResult;
-}
diff --git a/src/elements/ApiResponseViewElement.js b/src/elements/ApiResponseViewElement.ts
similarity index 66%
rename from src/elements/ApiResponseViewElement.js
rename to src/elements/ApiResponseViewElement.ts
index 4262dd5..0b5cea9 100644
--- a/src/elements/ApiResponseViewElement.js
+++ b/src/elements/ApiResponseViewElement.ts
@@ -1,69 +1,56 @@
/* eslint-disable class-methods-use-this */
-import { html } from 'lit-element';
-import { ResponseViewElement } from '@advanced-rest-client/base/api.js';
-import {
- HttpInternals,
-} from '@advanced-rest-client/base/api.js';
+import { html, TemplateResult, CSSResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Response } from '@api-client/core/build/legacy.js';
+import { ResponseViewElement, HttpInternals } from '@advanced-rest-client/base/api.js';
import { EventTypes } from '@advanced-rest-client/events';
-import { dataValue, providerOptionsValue } from '@advanced-rest-client/events/src/dataexport/Events.js';
-import '@anypoint-web-components/awc/anypoint-icon-item.js';
+import { ArcExportFilesystemEvent, dataValue, providerOptionsValue } from '@advanced-rest-client/events/src/dataexport/Events.js';
+import '@anypoint-web-components/awc/dist/define/anypoint-icon-item.js';
import '@advanced-rest-client/icons/arc-icon.js';
import '@advanced-rest-client/base/define/headers-list.js';
import elementStyles from './styles/Response.styles.js';
-/** @typedef {import('@advanced-rest-client/events').ArcExportFilesystemEvent} ArcExportFilesystemEvent */
/** @typedef {import('@advanced-rest-client/events').ArcResponse.Response} Response */
/** @typedef {import('lit-element').TemplateResult} TemplateResult */
export const saveFileHandler = Symbol('saveFileHandler');
export class ApiResponseViewElement extends ResponseViewElement {
- // @ts-ignore
- get styles() {
- return [elementStyles, super.styles];
+ static get styles(): CSSResult[] {
+ return [elementStyles];
}
- static get properties() {
- return {
- /**
- * Whether the response details view is opened.
- */
- details: { type: Boolean },
- /**
- * Whether the source ("raw") view is opened.
- */
- source: { type: Boolean },
- /**
- * Enables Anypoint platform styles.
- */
- anypoint: { type: Boolean, reflect: true },
- };
- }
+ /**
+ * Whether the response details view is opened.
+ * @attribute
+ */
+ @property({ type: Boolean, reflect: true }) details?: boolean;
+
+ /**
+ * Whether the source ("raw") view is opened.
+ * @attribute
+ */
+ @property({ type: Boolean, reflect: true }) source?: boolean;
constructor() {
super();
- this.details = false;
- this.source = false;
- /** @type boolean */
- this.anypoint = undefined;
this[saveFileHandler] = this[saveFileHandler].bind(this);
}
- connectedCallback() {
+ connectedCallback(): void {
super.connectedCallback();
- this.addEventListener(EventTypes.DataExport.fileSave, this[saveFileHandler]);
+ this.addEventListener(EventTypes.DataExport.fileSave, this[saveFileHandler] as EventListener);
}
- disconnectedCallback() {
+ disconnectedCallback(): void {
super.disconnectedCallback();
- this.removeEventListener(EventTypes.DataExport.fileSave, this[saveFileHandler]);
+ this.removeEventListener(EventTypes.DataExport.fileSave, this[saveFileHandler] as EventListener);
}
/**
* A handler for the content action drop down item selection
- * @param {CustomEvent} e
*/
- async [HttpInternals.contentActionHandler](e) {
+ async [HttpInternals.contentActionHandler](e: CustomEvent): Promise {
const id = e.detail.selected;
if (id === 'toggle-details') {
this.details = !this.details;
@@ -79,10 +66,7 @@ export class ApiResponseViewElement extends ResponseViewElement {
return super[HttpInternals.contentActionHandler](e);
}
- /**
- * @param {ArcExportFilesystemEvent} e
- */
- [saveFileHandler](e) {
+ [saveFileHandler](e: ArcExportFilesystemEvent): void {
const data = e[dataValue];
const providerOptions = e[providerOptionsValue];
const { file, contentType='text/plain' } = providerOptions;
@@ -90,11 +74,11 @@ export class ApiResponseViewElement extends ResponseViewElement {
}
/**
- * @param {BlobPart} data The exported data
- * @param {string} mime The data content type
- * @param {string} file The export file name
+ * @param data The exported data
+ * @param mime The data content type
+ * @param file The export file name
*/
- downloadFile(data, mime, file) {
+ downloadFile(data: BlobPart, mime: string, file: string): void {
const a = document.createElement('a');
const blob = new Blob([data], { type: mime });
const url = window.URL.createObjectURL(blob);
@@ -108,13 +92,12 @@ export class ApiResponseViewElement extends ResponseViewElement {
}, 0);
}
- render() {
+ render(): TemplateResult {
if (!this.hasResponse) {
return html``;
}
const { source } = this;
return html`
-
${source ? this[HttpInternals.rawTemplate]('raw', true) : this[HttpInternals.responseTemplate]('response', true)}
`;
}
@@ -122,7 +105,7 @@ export class ApiResponseViewElement extends ResponseViewElement {
/**
* @returns {TemplateResult} The template for the response meta drop down options
*/
- [HttpInternals.responseOptionsItemsTemplate]() {
+ [HttpInternals.responseOptionsItemsTemplate](): TemplateResult {
const { details, source } = this;
const icon = details ? 'toggleOn' : 'toggleOff';
const sourceLabel = source ? 'Formatted view' : 'Source view';
@@ -141,14 +124,14 @@ export class ApiResponseViewElement extends ResponseViewElement {
}
/**
- * @returns {TemplateResult|string} The template for the response details, when rendered
+ * @returns The template for the response details, when rendered
*/
- [HttpInternals.responsePrefixTemplate]() {
+ [HttpInternals.responsePrefixTemplate](): TemplateResult | string {
const { details } = this;
if (!details) {
return '';
}
- const info = /** @type Response */ (this.response);
+ const info = this.response as Response;
const headers = info && info.headers;
return html`
${name}
@@ -295,10 +264,9 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {string} operationId
- * @returns {TemplateResult|string} The template for the link's operation
+ * @returns The template for the link's operation
*/
- [linkOperationTemplate](operationId) {
+ [linkOperationTemplate](operationId?: string): TemplateResult | string {
if (!operationId) {
return '';
}
@@ -311,10 +279,9 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiIriTemplateMapping[]} mappings
- * @returns {TemplateResult|string} The template for the link's operation
+ * @returns The template for the link's operation
*/
- [linkMappingsTemplate](mappings) {
+ [linkMappingsTemplate](mappings?: ApiDefinitions.IApiIriTemplateMapping[]): TemplateResult | string {
if (!mappings) {
return '';
}
@@ -330,10 +297,9 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiIriTemplateMapping} mapping
- * @returns {TemplateResult} The template for the link's operation
+ * @returns The template for the link's operation
*/
- [linkMappingTemplate](mapping) {
+ [linkMappingTemplate](mapping: ApiDefinitions.IApiIriTemplateMapping): TemplateResult {
const { linkExpression, templateVariable } = mapping;
return html`
diff --git a/src/elements/ApiSchemaDocumentElement.d.ts b/src/elements/ApiSchemaDocumentElement.d.ts
deleted file mode 100644
index ffb2eaa..0000000
--- a/src/elements/ApiSchemaDocumentElement.d.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-import { TemplateResult } from 'lit-element';
-import { ApiDocumentationBase } from './ApiDocumentationBase.js';
-import { Shape } from '../helpers/amf';
-import { ApiShape, ApiShapeUnion, ApiScalarShape, ApiNodeShape, ApiUnionShape, ApiFileShape, ApiSchemaShape, ApiAnyShape, ApiArrayShape, ApiTupleShape, ApiPropertyShape } from '../helpers/api';
-
-export const mimeTypeValue: unique symbol;
-export const querySchema: unique symbol;
-export const schemaValue: unique symbol;
-export const expandedValue: unique symbol;
-export const selectedUnionsValue: unique symbol;
-export const processSchema: unique symbol;
-export const titleTemplate: unique symbol;
-export const expandHandler: unique symbol;
-export const expandKeydownHandler: unique symbol;
-export const anyOfSelectedHandler: unique symbol;
-export const schemaContentTemplate: unique symbol;
-export const scalarShapeTemplate: unique symbol;
-export const nodeShapeTemplate: unique symbol;
-export const unionShapeTemplate: unique symbol;
-export const fileShapeTemplate: unique symbol;
-export const schemaShapeTemplate: unique symbol;
-export const arrayShapeTemplate: unique symbol;
-export const tupleShapeTemplate: unique symbol;
-export const anyShapeTemplate: unique symbol;
-export const shapePropertyTemplate: unique symbol;
-export const shapePropertyWithoutRangeTemplate: unique symbol;
-export const anyOfUnionTemplate: unique symbol;
-export const anyOfOptionsTemplate: unique symbol;
-export const propertyDescriptionTemplate: unique symbol;
-export const propertyDescriptionEditor: unique symbol;
-export const checkSchemaPropertyUpdate: unique symbol;
-export const propertyDecoratorTemplate: unique symbol;
-export const toggleExpandedProperty: unique symbol;
-export const andUnionItemTemplate: unique symbol;
-export const orderUnion: unique symbol;
-export const inheritanceNameTemplate: unique symbol;
-export const nilShapeTemplate: unique symbol;
-
-export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
- [mimeTypeValue]: string;
- /**
- * The mime type to use to render the examples.
- */
- get mimeType(): string;
- /**
- * @attribute
- */
- set mimeType(value: string);
- [schemaValue]: ApiShapeUnion;
- get schema(): ApiShapeUnion;
- set schema(value: ApiShapeUnion);
- /**
- * Generates examples from the schema properties for the given mime type
- * when examples are not defined in the schema.
- * @attribute
- */
- forceExamples: boolean;
- /**
- * When set it allows to manipulate the properties.
- * This is to be used with a combination with the `edit` property.
- * @attribute
- */
- editProperties: boolean;
- /**
- * When set it renders the title with lower emphasis and adding `schema` prefix.
- * @attribute
- */
- schemaTitle: boolean;
- /**
- * When set it does not render read only items.
- * Read only property is a feature of OAS.
- * @attribute
- */
- noReadOnly: boolean;
-
- [expandedValue]: string[];
- [selectedUnionsValue]: Record;
- [propertyDescriptionEditor]: string;
-
- constructor();
-
- processGraph(): Promise;
-
- /**
- * The logic to perform after schema is ready.
- * This processes examples for the schema.
- */
- [processSchema](): void;
-
- /**
- * Checks the current schema whether it contains a property with the given id
- * and if so it updates its value.
- */
- [checkSchemaPropertyUpdate](schema: ApiShapeUnion, id: string, updated: any): void;
- [expandHandler](e: Event): void;
- [expandKeydownHandler](e: KeyboardEvent): void;
-
- /**
- * Toggles an "expanded" state for a property children.
- * @param id Parent property id that has children to toggle visibility of.
- */
- [toggleExpandedProperty](id: string): void;
-
- [anyOfSelectedHandler](e: Event): void;
-
- /**
- * Orders union items so the first is the one that has properties defined inline.
- */
- [orderUnion](shapes: ApiShapeUnion[]): ApiShapeUnion[];
-
- render(): TemplateResult;
-
- /**
- * @returns The template for the schema title.
- */
- [titleTemplate](): TemplateResult|string;
-
- /**
- * @param schema The shape to render.
- * @returns The template for the schema properties depending on the type
- */
- [schemaContentTemplate](schema: ApiShapeUnion): TemplateResult|string;
-
- /**
- * @returns The template for the scalar shape.
- */
- [scalarShapeTemplate](schema: ApiScalarShape): TemplateResult|string;
- /**
- * @returns The template for the node shape.
- */
- [nodeShapeTemplate](schema: ApiNodeShape): TemplateResult|string;
-
- // [inheritedTemplate](parents: ApiShapeUnion[]): TemplateResult|string;
-
- /**
- * @returns The template for the union shape.
- */
- [unionShapeTemplate](schema: ApiUnionShape): TemplateResult|string;
- [andUnionItemTemplate](shape: ApiShapeUnion): TemplateResult|string;
- /**
- * @returns The template for the "and" union item's title, if inherited from another type.
- */
- [inheritanceNameTemplate](shape: ApiShapeUnion): TemplateResult|string;
-
- /**
- * @returns The template for the `any of` union.
- */
- [anyOfUnionTemplate](schemaId: string, items: ApiShapeUnion[]): TemplateResult|string;
-
- /**
- * @param schemaId The parent schema id value
- * @param options The options to render.
- * @returns The template for the union any of selector.
- */
- [anyOfOptionsTemplate](schemaId: string, options: any[], selected: string): TemplateResult|string;
-
- /**
- * @returns The template for the file shape.
- */
- [fileShapeTemplate](schema: ApiFileShape): TemplateResult|string;
-
- /**
- * @returns The template for the schema shape.
- */
- [schemaShapeTemplate](schema: ApiSchemaShape): TemplateResult|string;
-
- /**
- * @returns The template for the array shape.
- */
- [arrayShapeTemplate](schema: ApiArrayShape): TemplateResult|string;
-
- /**
- * @returns The template for the tuple shape.
- */
- [tupleShapeTemplate](schema: ApiTupleShape): TemplateResult|string;
-
- /**
- * @returns The template for the Any shape.
- */
- [anyShapeTemplate](schema: ApiAnyShape): TemplateResult|string;
-
- /**
- * @returns The template for the Any shape.
- */
- [nilShapeTemplate](schema: ApiShape): TemplateResult|string;
-
- /**
- * @returns The template for the schema property item.
- */
- [shapePropertyTemplate](schema: ApiPropertyShape): TemplateResult|string;
-
- /**
- * @returns THe template for the line decorator in front of the property name.
- */
- [propertyDecoratorTemplate](isComplex: boolean, expanded: boolean, schemaId: string): TemplateResult|string;
-
- /**
- * @returns The template for the schema property item that has no range information.
- */
- [shapePropertyWithoutRangeTemplate](schema: ApiPropertyShape): TemplateResult|string;
- [propertyDescriptionTemplate](schema: ApiPropertyShape): TemplateResult|string;
-}
diff --git a/src/elements/ApiSchemaDocumentElement.js b/src/elements/ApiSchemaDocumentElement.ts
similarity index 60%
rename from src/elements/ApiSchemaDocumentElement.js
rename to src/elements/ApiSchemaDocumentElement.ts
index 3c4fe03..61c58a4 100644
--- a/src/elements/ApiSchemaDocumentElement.js
+++ b/src/elements/ApiSchemaDocumentElement.ts
@@ -1,14 +1,15 @@
/* eslint-disable no-plusplus */
/* eslint-disable class-methods-use-this */
-import { html } from 'lit-element';
-import { classMap } from "lit-html/directives/class-map";
+import { html, TemplateResult, CSSResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { AmfNamespace, ApiSchemaGenerator, AmfShapes } from '@api-client/core/build/browser.js';
+import { AnypointRadioGroupElement } from '@anypoint-web-components/awc';
+import { classMap } from "lit/directives/class-map";
import { MarkdownStyles } from '@advanced-rest-client/highlight';
import '@advanced-rest-client/highlight/arc-marked.js';
-import '@anypoint-web-components/awc/anypoint-radio-button.js';
-import '@anypoint-web-components/awc/anypoint-radio-group.js';
+import '@anypoint-web-components/awc/dist/define/anypoint-radio-button.js';
+import '@anypoint-web-components/awc/dist/define/anypoint-radio-group.js';
import { chevronRight } from '@advanced-rest-client/icons';
-import { ApiSchemaGenerator } from '../schema/ApiSchemaGenerator.js';
-import { ns } from '../helpers/Namespace.js';
import commonStyles from './styles/Common.js';
import elementStyles from './styles/ApiSchema.js';
import schemaStyles from './styles/SchemaCommon.js';
@@ -31,21 +32,7 @@ import {
examplesValue,
} from './ApiDocumentationBase.js';
import { Events } from '../events/Events.js';
-
-/** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('../helpers/api').ApiShape} ApiShape */
-/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('../helpers/api').ApiExample} ApiExample */
-/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
-/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
-/** @typedef {import('../helpers/api').ApiUnionShape} ApiUnionShape */
-/** @typedef {import('../helpers/api').ApiFileShape} ApiFileShape */
-/** @typedef {import('../helpers/api').ApiSchemaShape} ApiSchemaShape */
-/** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
-/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
-/** @typedef {import('../helpers/api').ApiTupleShape} ApiTupleShape */
-/** @typedef {import('../helpers/api').ApiPropertyShape} ApiPropertyShape */
-/** @typedef {import('../types').SchemaExample} SchemaExample */
+import { SchemaExample } from '../types.js';
export const mimeTypeValue = Symbol('mimeTypeValue');
export const querySchema = Symbol('querySchema');
@@ -72,7 +59,7 @@ export const anyOfUnionTemplate = Symbol('anyOfUnionTemplate');
export const anyOfOptionsTemplate = Symbol('anyOfOptionsTemplate');
export const propertyDescriptionTemplate = Symbol('propertyDescriptionTemplate');
export const propertyDescriptionEditor = Symbol('propertyDescriptionEditor');
-export const checkSchemaPropertyUpdate = Symbol('checkSchemaPropertyUpdate');
+// export const checkSchemaPropertyUpdate = Symbol('checkSchemaPropertyUpdate');
export const propertyDecoratorTemplate = Symbol('propertyDecoratorTemplate');
export const toggleExpandedProperty = Symbol('toggleExpandedProperty');
export const andUnionItemTemplate = Symbol('andUnionItemTemplate');
@@ -81,23 +68,30 @@ export const inheritanceNameTemplate = Symbol('inheritanceNameTemplate');
export const nilShapeTemplate = Symbol('nilShapeTemplate');
const complexTypes = [
- ns.w3.shacl.NodeShape,
- ns.aml.vocabularies.shapes.UnionShape,
- ns.aml.vocabularies.shapes.ArrayShape,
- ns.aml.vocabularies.shapes.TupleShape,
- ns.aml.vocabularies.shapes.AnyShape,
+ AmfNamespace.w3.shacl.NodeShape,
+ AmfNamespace.aml.vocabularies.shapes.UnionShape,
+ AmfNamespace.aml.vocabularies.shapes.ArrayShape,
+ AmfNamespace.aml.vocabularies.shapes.TupleShape,
+ AmfNamespace.aml.vocabularies.shapes.AnyShape,
];
export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
- get styles() {
+ static get styles(): CSSResult[] {
return [commonStyles, schemaStyles, elementStyles, MarkdownStyles];
}
- get mimeType() {
+ [mimeTypeValue]?: string;
+
+ /**
+ * The mime type to use to render the examples.
+ * @attribute
+ */
+ @property({ type: String, reflect: true })
+ get mimeType(): string | undefined {
return this[mimeTypeValue];
}
- set mimeType(value) {
+ set mimeType(value: string | undefined) {
const old = this[mimeTypeValue];
if (old === value) {
return;
@@ -110,17 +104,13 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
});
}
- /**
- * @returns {ApiShapeUnion}
- */
- get schema() {
+ [schemaValue]?: AmfShapes.IShapeUnion;
+
+ get schema(): AmfShapes.IShapeUnion | undefined {
return this[schemaValue];
}
- /**
- * @param {ApiShapeUnion} value
- */
- set schema(value) {
+ set schema(value: AmfShapes.IShapeUnion | undefined) {
const old = this[schemaValue];
if (old === value) {
return;
@@ -129,82 +119,58 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
this.processGraph();
}
- static get properties() {
- return {
- /**
- * The mime type to use to render the examples.
- */
- mimeType: { type: String, reflect: true },
- /**
- * Generates examples from the schema properties for the given mime type
- * when examples are not defined in the schema.
- */
- forceExamples: { type: Boolean, reflect: true },
- /**
- * When set it allows to manipulate the properties.
- * This is to be used with a combination with the `edit` property.
- */
- editProperties: { type: Boolean, reflect: true },
- /**
- * When set it renders the title with lower emphasis and adding `schema` prefix.
- */
- schemaTitle: { type: Boolean, reflect: true },
- /**
- * When set it does not render read only items.
- * Read only property is a feature of OAS.
- */
- noReadOnly: { type: Boolean },
- };
- }
+ /**
+ * Generates examples from the schema properties for the given mime type
+ * when examples are not defined in the schema.
+ * @attribute
+ */
+ @property({ type: Boolean, reflect: true }) forceExamples?: boolean;
+
+ /**
+ * When set it allows to manipulate the properties.
+ * This is to be used with a combination with the `edit` property.
+ * @attribute
+ */
+ @property({ type: Boolean, reflect: true }) editProperties?: boolean;
+
+ /**
+ * When set it renders the title with lower emphasis and adding `schema` prefix.
+ * @attribute
+ */
+ @property({ type: Boolean, reflect: true }) schemaTitle?: boolean;
+
+ /**
+ * When set it does not render read only items.
+ * Read only property is a feature of OAS.
+ * @attribute
+ */
+ @property({ type: Boolean, reflect: true }) noReadOnly?: boolean;
+
+ [expandedValue]: string[];
+
+ [selectedUnionsValue]: Record;
+
+ [propertyDescriptionEditor]?: string;
constructor() {
super();
- /**
- * @type {ApiShapeUnion}
- */
- this[schemaValue] = undefined;
- /**
- * @type {string[]}
- */
- this[expandedValue] = undefined;
- /**
- * @type {Record}
- */
- this[selectedUnionsValue] = undefined;
- /**
- * @type {string}
- */
- this[propertyDescriptionEditor] = undefined;
- /**
- * @type {string}
- */
- this.mimeType = undefined;
- /** @type boolean */
- this.forceExamples = undefined;
- /** @type boolean */
- this.editProperties = undefined;
- /** @type boolean */
- this.schemaTitle = undefined;
- /** @type boolean */
- this.noReadOnly = undefined;
+ this[expandedValue] = [];
+ this[selectedUnionsValue] = {};
}
- /**
- * @returns {Promise}
- */
- async processGraph() {
+ async processGraph(): Promise {
this[expandedValue] = [];
this[selectedUnionsValue] = {};
await this[querySchema]();
this[processSchema]();
- await this.requestUpdate();
+ this.requestUpdate();
+ await this.updateComplete;
}
/**
* Queries the store for the schema data, when needed.
- * @returns {Promise}
*/
- async [querySchema]() {
+ async [querySchema](): Promise {
const { domainId } = this;
if (!domainId) {
// this[schemaValue] = undefined;
@@ -218,8 +184,9 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
const info = await Events.Type.get(this, domainId);
this[schemaValue] = info;
} catch (e) {
- Events.Telemetry.exception(this, e.message, false);
- Events.Reporting.error(this, e, `Unable to query for API schema data: ${e.message}`, this.localName);
+ const ex = e as Error;
+ Events.Telemetry.exception(this, ex.message, false);
+ Events.Reporting.error(this, ex, `Unable to query for API schema data: ${ex.message}`, this.localName);
}
}
@@ -227,8 +194,8 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
* The logic to perform after schema is ready.
* This processes examples for the schema.
*/
- [processSchema]() {
- const type = /** @type ApiShapeUnion */ (this[schemaValue]);
+ [processSchema](): void {
+ const type = this[schemaValue];
if (!type) {
this[examplesValue] = undefined;
return;
@@ -238,12 +205,12 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
this[examplesValue] = undefined;
return;
}
- const anyShape = /** @type ApiAnyShape */ (type);
+ const anyShape = type as AmfShapes.IApiAnyShape;
const { examples=[] } = anyShape;
let examplesCopy = [...examples];
if (Array.isArray(type.inherits) && type.inherits.length) {
type.inherits.forEach((item) => {
- const anyParent = /** @type ApiAnyShape */ (item);
+ const anyParent = item as AmfShapes.IApiAnyShape;
if (Array.isArray(anyParent.examples) && anyParent.examples.length) {
examplesCopy = examplesCopy.concat([...anyParent.examples]);
}
@@ -259,7 +226,7 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
const { mimeType, forceExamples } = this;
this[examplesValue] = undefined;
if (mimeType && forceExamples) {
- const selectedUnions = [];
+ const selectedUnions: string[] = [];
const all = this[selectedUnionsValue];
Object.keys(all).forEach((id) => {
if (!selectedUnions.includes(all[id])) {
@@ -272,91 +239,85 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
renderOptional: true,
});
if (result) {
- this[examplesValue] = [result];
+ this[examplesValue] = [result as SchemaExample];
}
}
}
}
- /**
- * Checks the current schema whether it contains a property with the given id
- * and if so it updates its value.
- * @param {ApiShapeUnion} schema
- * @param {string} id
- * @param {any} updated
- */
- [checkSchemaPropertyUpdate](schema, id, updated) {
- if (!schema) {
- return;
- }
- const { types } = schema;
- if (types.includes(ns.w3.shacl.NodeShape)) {
- const type = /** @type ApiNodeShape */ (schema);
- const { properties } = type;
- for (let i = 0, len = properties.length; i < len; i++) {
- const property = properties[i];
- if (property.id === id) {
- properties[i] = updated;
- this.requestUpdate();
- return;
- }
- if (property.range && property.range.id === id) {
- property.range = updated;
- this.requestUpdate();
- return;
- }
- }
- return;
- }
- if (types.includes(ns.aml.vocabularies.shapes.UnionShape)) {
- const type = /** @type ApiUnionShape */ (schema);
- const { anyOf, or, and } = type;
- if (Array.isArray(anyOf) && anyOf.length) {
- anyOf.forEach((item) => this[checkSchemaPropertyUpdate](item, id, updated));
- }
- if (Array.isArray(or) && or.length) {
- or.forEach((item) => this[checkSchemaPropertyUpdate](item, id, updated));
- }
- if (Array.isArray(and) && and.length) {
- and.forEach((item) => this[checkSchemaPropertyUpdate](item, id, updated));
- }
- return;
- }
- if (types.includes(ns.aml.vocabularies.shapes.ArrayShape) || types.includes(ns.aml.vocabularies.shapes.MatrixShape)) {
- const type = /** @type ApiArrayShape */ (schema);
- if (type.items) {
- this[checkSchemaPropertyUpdate](type.items, id, updated)
- }
- }
- }
+ // /**
+ // * Checks the current schema whether it contains a property with the given id
+ // * and if so it updates its value.
+ // * @param {ApiShapeUnion} schema
+ // * @param {string} id
+ // * @param {any} updated
+ // */
+ // [checkSchemaPropertyUpdate](schema: AmfShapes.IShapeUnion, id: string, updated): void {
+ // if (!schema) {
+ // return;
+ // }
+ // const { types } = schema;
+ // if (types.includes(AmfNamespace.w3.shacl.NodeShape)) {
+ // const type = /** @type ApiNodeShape */ (schema);
+ // const { properties } = type;
+ // for (let i = 0, len = properties.length; i < len; i++) {
+ // const property = properties[i];
+ // if (property.id === id) {
+ // properties[i] = updated;
+ // this.requestUpdate();
+ // return;
+ // }
+ // if (property.range && property.range.id === id) {
+ // property.range = updated;
+ // this.requestUpdate();
+ // return;
+ // }
+ // }
+ // return;
+ // }
+ // if (types.includes(AmfNamespace.aml.vocabularies.shapes.UnionShape)) {
+ // const type = /** @type ApiUnionShape */ (schema);
+ // const { anyOf, or, and } = type;
+ // if (Array.isArray(anyOf) && anyOf.length) {
+ // anyOf.forEach((item) => this[checkSchemaPropertyUpdate](item, id, updated));
+ // }
+ // if (Array.isArray(or) && or.length) {
+ // or.forEach((item) => this[checkSchemaPropertyUpdate](item, id, updated));
+ // }
+ // if (Array.isArray(and) && and.length) {
+ // and.forEach((item) => this[checkSchemaPropertyUpdate](item, id, updated));
+ // }
+ // return;
+ // }
+ // if (types.includes(AmfNamespace.aml.vocabularies.shapes.ArrayShape) || types.includes(ns.aml.vocabularies.shapes.MatrixShape)) {
+ // const type = /** @type ApiArrayShape */ (schema);
+ // if (type.items) {
+ // this[checkSchemaPropertyUpdate](type.items, id, updated)
+ // }
+ // }
+ // }
- /**
- * @param {Event} e
- */
- [expandHandler](e) {
- const button = /** @type HTMLElement */ (e.currentTarget);
+ [expandHandler](e: Event): void {
+ const button = e.currentTarget as HTMLElement;
const { id } = button.dataset;
- this[toggleExpandedProperty](id);
+ this[toggleExpandedProperty](id as string);
}
- /**
- * @param {KeyboardEvent} e
- */
- [expandKeydownHandler](e) {
+ [expandKeydownHandler](e: KeyboardEvent): void {
if (e.code !== 'Space') {
return;
}
e.preventDefault();
- const button = /** @type HTMLElement */ (e.currentTarget);
+ const button = e.currentTarget as HTMLElement;
const { id } = button.dataset;
- this[toggleExpandedProperty](id);
+ this[toggleExpandedProperty](id as string);
}
/**
* Toggles an "expanded" state for a property children.
- * @param {string} id Parent property id that has children to toggle visibility of.
+ * @param id Parent property id that has children to toggle visibility of.
*/
- [toggleExpandedProperty](id) {
+ [toggleExpandedProperty](id: string): void {
const list = this[expandedValue];
const index = list.indexOf(id);
if (index === -1) {
@@ -367,23 +328,22 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
this.requestUpdate();
}
- [anyOfSelectedHandler](e) {
- const { selected, dataset } = e.target
+ [anyOfSelectedHandler](e: Event): void {
+ const node = e.target as AnypointRadioGroupElement;
+ const { selected, dataset } = node;
const { schema } = dataset;
if (!schema) {
return;
}
- this[selectedUnionsValue][schema] = selected;
+ this[selectedUnionsValue][schema] = selected as string;
this[processSchema]();
this.requestUpdate();
}
/**
* Orders union items so the first is the one that has properties defined inline.
- * @param {ApiShapeUnion[]} shapes
- * @return {ApiShapeUnion[]}
*/
- [orderUnion](shapes) {
+ [orderUnion](shapes: AmfShapes.IShapeUnion[]): AmfShapes.IShapeUnion[] {
return [...shapes].sort((a, b) => {
const aHasName = !!a.name && !a.name.startsWith('item');
const bHasName = !!b.name && !b.name.startsWith('item');
@@ -394,14 +354,13 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
});
}
- render() {
+ render(): TemplateResult {
const schema = this[schemaValue];
if (!schema) {
return html``;
}
return html`
-
- ${this[titleTemplate]()}
+ ${this[titleTemplate](schema)}
${this[descriptionTemplate](schema.description)}
${this[customDomainPropertiesTemplate](schema.customDomainProperties)}
${this[examplesTemplate]()}
@@ -410,12 +369,11 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
}
/**
- * @returns {TemplateResult|string} The template for the schema title.
+ * @returns The template for the schema title.
*/
- [titleTemplate]() {
- const schema = this[schemaValue];
+ [titleTemplate](schema: AmfShapes.IShapeUnion): TemplateResult | string {
const { name, displayName } = schema;
- const label = displayName || name;
+ const label = displayName || name || '';
if (['schema', 'default'].includes(label)) {
return '';
}
@@ -437,47 +395,46 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiShapeUnion} schema The shape to render.
- * @returns {TemplateResult|string} The template for the schema properties depending on the type
+ * @param schema The shape to render.
+ * @returns The template for the schema properties depending on the type
*/
- [schemaContentTemplate](schema) {
+ [schemaContentTemplate](schema: AmfShapes.IShapeUnion): TemplateResult | string {
const { noReadOnly } = this;
if (schema.readOnly && noReadOnly) {
return '';
}
const { types } = schema;
- if (types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
- return this[scalarShapeTemplate](/** @type ApiScalarShape */ (schema));
+ if (types.includes(AmfNamespace.aml.vocabularies.shapes.ScalarShape)) {
+ return this[scalarShapeTemplate](schema as AmfShapes.IApiScalarShape);
}
- if (types.includes(ns.w3.shacl.NodeShape)) {
- return this[nodeShapeTemplate](/** @type ApiNodeShape */ (schema));
+ if (types.includes(AmfNamespace.w3.shacl.NodeShape)) {
+ return this[nodeShapeTemplate](schema as AmfShapes.IApiNodeShape);
}
- if (types.includes(ns.aml.vocabularies.shapes.UnionShape)) {
- return this[unionShapeTemplate](/** @type ApiUnionShape */ (schema));
+ if (types.includes(AmfNamespace.aml.vocabularies.shapes.UnionShape)) {
+ return this[unionShapeTemplate](schema as AmfShapes.IApiUnionShape);
}
- if (types.includes(ns.aml.vocabularies.shapes.FileShape)) {
- return this[fileShapeTemplate](/** @type ApiFileShape */ (schema));
+ if (types.includes(AmfNamespace.aml.vocabularies.shapes.FileShape)) {
+ return this[fileShapeTemplate](schema as AmfShapes.IApiFileShape);
}
- if (types.includes(ns.aml.vocabularies.shapes.SchemaShape)) {
- return this[schemaShapeTemplate](/** @type ApiSchemaShape */ (schema));
+ if (types.includes(AmfNamespace.aml.vocabularies.shapes.SchemaShape)) {
+ return this[schemaShapeTemplate](schema as AmfShapes.IApiSchemaShape);
}
- if (types.includes(ns.aml.vocabularies.shapes.TupleShape)) {
- return this[tupleShapeTemplate](/** @type ApiTupleShape */ (schema));
+ if (types.includes(AmfNamespace.aml.vocabularies.shapes.TupleShape)) {
+ return this[tupleShapeTemplate](schema as AmfShapes.IApiTupleShape);
}
- if (types.includes(ns.aml.vocabularies.shapes.ArrayShape) || types.includes(ns.aml.vocabularies.shapes.MatrixShape)) {
- return this[arrayShapeTemplate](/** @type ApiArrayShape */ (schema));
+ if (types.includes(AmfNamespace.aml.vocabularies.shapes.ArrayShape) || types.includes(AmfNamespace.aml.vocabularies.shapes.MatrixShape)) {
+ return this[arrayShapeTemplate](schema as AmfShapes.IApiArrayShape);
}
- if (types.includes(ns.aml.vocabularies.shapes.NilShape)) {
- return this[nilShapeTemplate](/** @type ApiShape */ (schema));
+ if (types.includes(AmfNamespace.aml.vocabularies.shapes.NilShape)) {
+ return this[nilShapeTemplate](schema as AmfShapes.IApiShape);
}
- return this[anyShapeTemplate](/** @type ApiAnyShape */ (schema));
+ return this[anyShapeTemplate](schema as AmfShapes.IApiAnyShape);
}
/**
- * @param {ApiScalarShape} schema
- * @returns {TemplateResult|string} The template for the scalar shape.
+ * @returns The template for the scalar shape.
*/
- [scalarShapeTemplate](schema) {
+ [scalarShapeTemplate](schema: AmfShapes.IApiScalarShape): TemplateResult | string {
if (schema.readOnly && this.noReadOnly) {
return '';
}
@@ -492,10 +449,9 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiNodeShape} schema
- * @returns {TemplateResult|string} The template for the node shape.
+ * @returns The template for the node shape.
*/
- [nodeShapeTemplate](schema) {
+ [nodeShapeTemplate](schema: AmfShapes.IApiNodeShape): TemplateResult | string {
const { properties, inherits, readOnly } = schema;
if (readOnly && this.noReadOnly) {
return '';
@@ -503,8 +459,8 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
let items = [...(properties || [])];
if (Array.isArray(inherits) && inherits.length) {
inherits.forEach((item) => {
- if (item.types.includes(ns.w3.shacl.NodeShape)) {
- const typed = /** @type ApiNodeShape */ (item);
+ if (item.types.includes(AmfNamespace.w3.shacl.NodeShape)) {
+ const typed = item as AmfShapes.IApiNodeShape;
items = items.concat([...(typed.properties || [])]);
}
});
@@ -522,7 +478,7 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
}
// /**
- // * @param {ApiShapeUnion[]} parents
+ // * @param {AmfShapes.IShapeUnion[]} parents
// * @returns {TemplateResult[]|undefined}
// */
// [inheritedTemplate](parents) {
@@ -543,10 +499,9 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
// }
/**
- * @param {ApiUnionShape} schema
- * @returns {TemplateResult|string} The template for the union shape.
+ * @returns The template for the union shape.
*/
- [unionShapeTemplate](schema) {
+ [unionShapeTemplate](schema: AmfShapes.IApiUnionShape): TemplateResult | string {
const unionTemplate = unionDetailsTemplate(schema);
const allScalar = isScalarUnion(schema);
if (allScalar) {
@@ -585,10 +540,7 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
return unionTemplate;
}
- /**
- * @param {ApiShapeUnion} shape
- */
- [andUnionItemTemplate](shape) {
+ [andUnionItemTemplate](shape: AmfShapes.IShapeUnion): TemplateResult {
return html`
${this[inheritanceNameTemplate](shape)}
@@ -598,10 +550,9 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiShapeUnion} shape
- * @returns {TemplateResult|string} The template for the "and" union item's title, if inherited from another type.
+ * @returns The template for the "and" union item's title, if inherited from another type.
*/
- [inheritanceNameTemplate](shape) {
+ [inheritanceNameTemplate](shape: AmfShapes.IShapeUnion): TemplateResult | string {
const { name='' } = shape;
const hasName = !!name && !name.startsWith('item');
if (hasName) {
@@ -612,22 +563,23 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {string} schemaId
- * @param {ApiShapeUnion[]} items
- * @returns {TemplateResult} The template for the `any of` union.
+ * @returns The template for the `any of` union.
*/
- [anyOfUnionTemplate](schemaId, items) {
+ [anyOfUnionTemplate](schemaId: string, items: AmfShapes.IShapeUnion[]): TemplateResult | string {
const allSelected = this[selectedUnionsValue];
let selected = allSelected[schemaId];
- let renderedItem = /** @type ApiShapeUnion */ (null);
+ let renderedItem: AmfShapes.IShapeUnion | undefined;
if (selected) {
renderedItem = items.find((item) => item.id === selected);
} else {
[renderedItem] = items;
selected = renderedItem.id;
}
+ if (!renderedItem) {
+ return '';
+ }
const options = items.map((item) => {
- const label = readPropertyTypeLabel(item);
+ const label = readPropertyTypeLabel(item) as string;
// let label = item.name || item.displayName;
// if (!label && item.types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
// const { dataType } = /** @type ApiScalarShape */ (item);
@@ -650,12 +602,11 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {string} schemaId The parent schema id value
- * @param {any[]} options The options to render.
- * @param {string} selected
- * @returns {TemplateResult} The template for the union any of selector.
+ * @param schemaId The parent schema id value
+ * @param options The options to render.
+ * @returns The template for the union any of selector.
*/
- [anyOfOptionsTemplate](schemaId, options, selected) {
+ [anyOfOptionsTemplate](schemaId: string, options: ({ id: string, label: string })[], selected: string): TemplateResult {
return html`
`;
}
- if (items.types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+ if (items.types.includes(AmfNamespace.aml.vocabularies.shapes.ScalarShape)) {
return this[scalarShapeTemplate](schema);
}
return html`
@@ -741,10 +689,9 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiTupleShape} schema
- * @returns {TemplateResult|string} The template for the tuple shape.
+ * @returns The template for the tuple shape.
*/
- [tupleShapeTemplate](schema) {
+ [tupleShapeTemplate](schema: AmfShapes.IApiTupleShape): TemplateResult | string {
const { items, readOnly } = schema;
if (readOnly && this.noReadOnly) {
return '';
@@ -760,25 +707,23 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiAnyShape} schema
- * @returns {TemplateResult|string} The template for the Any shape.
+ * @returns The template for the Any shape.
*/
- [anyShapeTemplate](schema) {
+ [anyShapeTemplate](schema: AmfShapes.IApiAnyShape): TemplateResult | string {
const { and=[], or=[], readOnly, xone=[] } = schema;
if (readOnly && this.noReadOnly) {
return '';
}
if (and.length || or.length || xone.length) {
- return this[unionShapeTemplate](/** @type ApiUnionShape */ (schema));
+ return this[unionShapeTemplate](schema as AmfShapes.IApiUnionShape);
}
return html`
Any schema is accepted as the value here.
`; } /** - * @param {ApiShape} schema - * @returns {TemplateResult|string} The template for the Any shape. + * @returns The template for the Any shape. */ - [nilShapeTemplate](schema) { + [nilShapeTemplate](schema: AmfShapes.IApiShape): TemplateResult | string { if (schema.readOnly && this.noReadOnly) { return ''; } @@ -786,11 +731,10 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase { } /** - * @param {ApiPropertyShape} schema - * @returns {TemplateResult|string} The template for the schema property item. + * @returns The template for the schema property item. */ - [shapePropertyTemplate](schema) { - const { range, minCount, readOnly } = schema; + [shapePropertyTemplate](schema: AmfShapes.IApiPropertyShape): TemplateResult | string { + const { range, minCount=0, readOnly } = schema; if (readOnly && this.noReadOnly) { return ''; } @@ -808,14 +752,16 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase { const [domainType] = range.types; let isComplex = complexTypes.includes(domainType); if (isComplex) { - if (range.types.includes(ns.aml.vocabularies.shapes.TupleShape)) { - const { items=[] } = /** @type ApiTupleShape */ (range); + if (range.types.includes(AmfNamespace.aml.vocabularies.shapes.TupleShape)) { + const { items=[] } = range as AmfShapes.IApiTupleShape; isComplex = complexTypes.includes(items[0].types[0]); - } else if (range.types.includes(ns.aml.vocabularies.shapes.ArrayShape)) { - const { items } = /** @type ApiArrayShape */ (range); - isComplex = complexTypes.includes(items.types[0]); - } else if (range.types.includes(ns.aml.vocabularies.shapes.UnionShape)) { - isComplex = !isScalarUnion(/** @type ApiUnionShape */ (range)); + } else if (range.types.includes(AmfNamespace.aml.vocabularies.shapes.ArrayShape)) { + const { items } = range as AmfShapes.IApiArrayShape; + if (items) { + isComplex = complexTypes.includes(items.types[0]); + } + } else if (range.types.includes(AmfNamespace.aml.vocabularies.shapes.UnionShape)) { + isComplex = !isScalarUnion(range as AmfShapes.IApiUnionShape); } } const allExpanded = this[expandedValue]; @@ -826,7 +772,7 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase { expanded, }; return html` -
+
-
+
${expanded ? html`
@@ -843,7 +789,7 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
${detailsTemplate(range)}
@@ -854,12 +800,9 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {boolean} isComplex
- * @param {boolean} expanded
- * @param {string} schemaId
- * @returns {TemplateResult} THe template for the line decorator in front of the property name.
+ * @returns THe template for the line decorator in front of the property name.
*/
- [propertyDecoratorTemplate](isComplex, expanded, schemaId) {
+ [propertyDecoratorTemplate](isComplex: boolean, expanded: boolean, schemaId: string): TemplateResult {
const toggleIcon = isComplex ? html`
` : '';
@@ -883,11 +826,10 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiPropertyShape} schema
- * @returns {TemplateResult} The template for the schema property item that has no range information.
+ * @returns The template for the schema property item that has no range information.
*/
- [shapePropertyWithoutRangeTemplate](schema) {
- const { minCount, name, displayName, deprecated } = schema;
+ [shapePropertyWithoutRangeTemplate](schema: AmfShapes.IApiPropertyShape): TemplateResult {
+ const { minCount = 0, name, displayName, deprecated } = schema;
const label = name || displayName || 'Unnamed property';
const required = minCount > 0;
return html`
@@ -905,10 +847,7 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
`;
}
- /**
- * @param {ApiPropertyShape} schema
- */
- [propertyDescriptionTemplate](schema) {
+ [propertyDescriptionTemplate](schema: AmfShapes.IApiPropertyShape): TemplateResult | string {
const { range, description } = schema;
if (!range || description) {
return this[descriptionTemplate](description);
diff --git a/src/elements/ApiSecurityDocumentElement.d.ts b/src/elements/ApiSecurityDocumentElement.d.ts
deleted file mode 100644
index 11ffd4d..0000000
--- a/src/elements/ApiSecurityDocumentElement.d.ts
+++ /dev/null
@@ -1,237 +0,0 @@
-import { TemplateResult } from 'lit-element';
-import { ApiDocumentationBase } from './ApiDocumentationBase.js';
-import { ApiSecurityScope, ApiSecurityOAuth2Flow, ApiSecurityOAuth1Settings, ApiSecurityOAuth2Settings, ApiSecurityScheme, ApiSecurityApiKeySettings, ApiSecurityOpenIdConnectSettings, ApiResponse } from '../helpers/api';
-
-export const querySecurity: unique symbol;
-export const processSecurity: unique symbol;
-export const securityValue: unique symbol;
-export const titleTemplate: unique symbol;
-export const queryParamsTemplate: unique symbol;
-export const headersTemplate: unique symbol;
-export const responsesValue: unique symbol;
-export const preselectResponse: unique symbol;
-export const responseContentTemplate: unique symbol;
-export const responseTabsTemplate: unique symbol;
-export const responseTemplate: unique symbol;
-export const statusCodeHandler: unique symbol;
-export const settingsTemplate: unique symbol;
-export const apiKeySettingsTemplate: unique symbol;
-export const openIdConnectSettingsTemplate: unique symbol;
-export const oAuth2SettingsTemplate: unique symbol;
-export const apiKeyHeaderExample: unique symbol;
-export const apiKeyCookieExample: unique symbol;
-export const apiKeyQueryExample: unique symbol;
-export const exampleTemplate: unique symbol;
-export const oAuth2FlowsTemplate: unique symbol;
-export const oAuth2GrantsTemplate: unique symbol;
-export const oAuth2FlowTemplate: unique symbol;
-export const getLabelForGrant: unique symbol;
-export const accessTokenUriTemplate: unique symbol;
-export const authorizationUriTemplate: unique symbol;
-export const refreshUriTemplate: unique symbol;
-export const scopesTemplate: unique symbol;
-export const scopeTemplate: unique symbol;
-export const grantTitleTemplate: unique symbol;
-export const oAuth1SettingsTemplate: unique symbol;
-export const tokenCredentialsUriTemplate: unique symbol;
-export const signaturesTemplate: unique symbol;
-
-/**
- * A web component that renders the documentation page for an API response object.
- */
-export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
-
- /**
- * When set it opens the parameters section
- * @attribute
- */
- parametersOpened: boolean;
- /**
- * When set it opens the headers section
- * @attribute
- */
- headersOpened: boolean;
- /**
- * When set it opens the response section
- * @attribute
- */
- responsesOpened: boolean;
- /**
- * When set it opens the settings section
- * @attribute
- */
- settingsOpened: boolean;
- /**
- * The selected status code in the responses section.
- * @attribute
- */
- selectedStatus: string;
- get securityScheme(): ApiSecurityScheme|undefined;
- set securityScheme(value: ApiSecurityScheme);
- [securityValue]: ApiSecurityScheme;
- [responsesValue]: ApiResponse[];
- constructor();
- processGraph(): Promise;
- /**
- * Queries for the security requirements object.
- */
- [querySecurity](): Promise;
-
- [processSecurity](): Promise;
- /**
- * Updates the `selectedStatus` if not selected or the current selection doesn't
- * exists in the current list of responses.
- */
- [preselectResponse](): void;
-
- /**
- * A handler for the status code tab selection.
- */
- [statusCodeHandler](e: Event): void;
-
- /**
- * @param grant The oauth2 grant (flow) name
- * @returns Friendly name for the grant.
- */
- [getLabelForGrant](grant: string): string;
-
- render(): TemplateResult;
-
- [titleTemplate](): TemplateResult|string;
-
- /**
- * @return The template for the query parameters
- */
- [queryParamsTemplate](): TemplateResult|string;
-
- /**
- * @return The template for the headers
- */
- [headersTemplate](): TemplateResult|string;
-
- [responseTemplate](): TemplateResult|string;
-
- /**
- * @param responses The responses to render.
- * @returns The template for the responses selector.
- */
- [responseTabsTemplate](responses: ApiResponse[]): TemplateResult|string;
-
- /**
- * @param responses The responses to render.
- * @returns The template for the currently selected response.
- */
- [responseContentTemplate](responses: ApiResponse[]): TemplateResult|string;
-
- /**
- * @returns The template for the security settings, when required.
- */
- [settingsTemplate](): TemplateResult|string;
-
- /**
- * @returns The template for API Key security definition.
- */
- [apiKeySettingsTemplate](settings: ApiSecurityApiKeySettings): TemplateResult|string;
-
- /**
- * @param name The name of the API Key parameter
- * @returns The template for API Key header example
- */
- [apiKeyHeaderExample](name: string): TemplateResult|string;
-
- /**
- * @param name The name of the API Key parameter
- * @returns The template for API Key cookie example
- */
- [apiKeyCookieExample](name: string): TemplateResult|string;
-
- /**
- * @param name The name of the API Key parameter
- * @returns The template for API Key query parameter example
- */
- [apiKeyQueryExample](name: string): TemplateResult|string;
-
- /**
- * @returns The template for a single example
- */
- [exampleTemplate](value: string): TemplateResult|string;
-
- /**
- * @returns The template for API Key security definition.
- */
- [openIdConnectSettingsTemplate](settings: ApiSecurityOpenIdConnectSettings): TemplateResult|string;
-
- /**
- * @param {ApiSecurityOAuth2Settings} settings
- * @returns The template for OAuth 2 security definition.
- */
- [oAuth2SettingsTemplate](settings: ApiSecurityOAuth2Settings): TemplateResult|string;
-
- /**
- * @returns The template for OAuth 2 flows list.
- */
- [oAuth2GrantsTemplate](grants: string[]): TemplateResult|string;
-
- /**
- * @returns The template for OAuth 2 flows list.
- */
- [oAuth2FlowsTemplate](flows: ApiSecurityOAuth2Flow[]): TemplateResult|string;
-
- /**
- * @returns The template for an OAuth 2 flow.
- */
- [oAuth2FlowTemplate](flow: ApiSecurityOAuth2Flow): TemplateResult|string;
-
- /**
- * @param grant The grant name
- * @returns The template for OAuth 2 grant title.
- */
- [grantTitleTemplate](grant: string): TemplateResult|string;
-
- /**
- * @param uri The access token URI
- * @returns The template for the access token URI
- */
- [accessTokenUriTemplate](uri: string): TemplateResult|string;
-
- /**
- * @param uri The access token URI
- * @returns The template for the authorization endpoint URI
- */
- [authorizationUriTemplate](uri: string): TemplateResult|string;
-
- /**
- * @param uri The access token URI
- * @returns The template for the refresh token endpoint URI
- */
- [refreshUriTemplate](uri: string): TemplateResult|string;
-
- /**
- * @param scopes The oauth scopes
- * @returns The template for the scopes list
- */
- [scopesTemplate](scopes: ApiSecurityScope[]): TemplateResult|string;
-
- /**
- * @param scope The scope definition.
- * @returns The template for an oauth scope
- */
- [scopeTemplate](scope: ApiSecurityScope): TemplateResult|string;
-
- /**
- * @returns The template for OAuth 1 security definition.
- */
- [oAuth1SettingsTemplate](settings: ApiSecurityOAuth1Settings): TemplateResult|string;
-
- /**
- * @param uri The token credentials URI
- * @returns The template for the token credentials URI
- */
- [tokenCredentialsUriTemplate](uri: string): TemplateResult|string;
-
- /**
- * @param signatures The OAuth1 signatures.
- * @returns The template for the OAuth1 signatures.
- */
- [signaturesTemplate](signatures: string[]): TemplateResult|string;
-}
diff --git a/src/elements/ApiSecurityDocumentElement.js b/src/elements/ApiSecurityDocumentElement.ts
similarity index 62%
rename from src/elements/ApiSecurityDocumentElement.js
rename to src/elements/ApiSecurityDocumentElement.ts
index 83d1fcd..96c94bf 100644
--- a/src/elements/ApiSecurityDocumentElement.js
+++ b/src/elements/ApiSecurityDocumentElement.ts
@@ -1,12 +1,13 @@
-/* eslint-disable no-param-reassign */
/* eslint-disable class-methods-use-this */
-import { html } from 'lit-element';
+import { html, TemplateResult, CSSResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ApiDefinitions, AmfNamespace, AmfShapes } from '@api-client/core/build/browser.js';
import { MarkdownStyles } from '@advanced-rest-client/highlight';
import '@advanced-rest-client/highlight/arc-marked.js';
-import '@anypoint-web-components/awc/anypoint-tab.js';
-import '@anypoint-web-components/awc/anypoint-tabs.js';
+import '@anypoint-web-components/awc/dist/define/anypoint-tab.js';
+import '@anypoint-web-components/awc/dist/define/anypoint-tabs.js';
+import { AnypointTabsElement } from '@anypoint-web-components/awc';
import { QueryParameterProcessor } from '../lib/QueryParameterProcessor.js';
-import { ns } from '../helpers/Namespace.js';
import {
ApiDocumentationBase,
paramsSectionTemplate,
@@ -20,22 +21,6 @@ import schemaStyles from './styles/SchemaCommon.js';
import '../../define/api-parameter-document.js';
import '../../define/api-response-document.js'
-/** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('../helpers/api').ApiSecurityScheme} ApiSecurityScheme */
-/** @typedef {import('../helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
-/** @typedef {import('../helpers/api').ApiSecurityApiKeySettings} ApiSecurityApiKeySettings */
-/** @typedef {import('../helpers/api').ApiSecurityOpenIdConnectSettings} ApiSecurityOpenIdConnectSettings */
-/** @typedef {import('../helpers/api').ApiSecurityOAuth2Settings} ApiSecurityOAuth2Settings */
-/** @typedef {import('../helpers/api').ApiSecurityOAuth1Settings} ApiSecurityOAuth1Settings */
-/** @typedef {import('../helpers/api').ApiSecurityOAuth2Flow} ApiSecurityOAuth2Flow */
-/** @typedef {import('../helpers/api').ApiSecurityScope} ApiSecurityScope */
-/** @typedef {import('../helpers/api').ApiResponse} ApiResponse */
-/** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
-/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
-/** @typedef {import('../helpers/amf').DomainElement} DomainElement */
-/** @typedef {import('../helpers/amf').SecurityRequirement} SecurityRequirement */
-/** @typedef {import('@anypoint-web-components/awc').AnypointTabsElement} AnypointTabs */
-
export const querySecurity = Symbol('querySecurity');
export const processSecurity = Symbol('processSecurity');
export const securityValue = Symbol('securityValue');
@@ -76,46 +61,51 @@ export const signaturesTemplate = Symbol('signaturesTemplate');
* A web component that renders the documentation page for an API response object.
*/
export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
- get styles() {
+ static get styles(): CSSResult[] {
return [commonStyles, elementStyles, MarkdownStyles, schemaStyles];
}
- static get properties() {
- return {
- /**
- * When set it opens the parameters section
- */
- parametersOpened: { type: Boolean, reflect: true },
- /**
- * When set it opens the headers section
- */
- headersOpened: { type: Boolean, reflect: true },
- /**
- * When set it opens the response section
- */
- responsesOpened: { type: Boolean, reflect: true },
- /**
- * When set it opens the settings section
- */
- settingsOpened: { type: Boolean, reflect: true },
- /**
- * The selected status code in the responses section.
- */
- selectedStatus: { type: String },
- };
- }
+ /**
+ * When set it opens the parameters section
+ * @attribute
+ */
+ @property({ type: Boolean, reflect: true }) parametersOpened?: boolean;
/**
- * @returns {ApiSecurityScheme|undefined}
+ * When set it opens the headers section
+ * @attribute
*/
- get securityScheme() {
- return this[securityValue];
- }
+ @property({ type: Boolean, reflect: true }) headersOpened?: boolean;
+
+ /**
+ * When set it opens the response section
+ * @attribute
+ */
+ @property({ type: Boolean, reflect: true }) responsesOpened?: boolean;
+
+ /**
+ * When set it opens the settings section
+ * @attribute
+ */
+ @property({ type: Boolean, reflect: true }) settingsOpened?: boolean;
/**
- * @param {ApiSecurityScheme} value
+ * The selected status code in the responses section.
+ * @attribute
*/
- set securityScheme(value) {
+ @property({ type: String, reflect: true }) selectedStatus?: string;
+
+
+ [securityValue]?: ApiDefinitions.IApiSecurityScheme;
+
+ [queryParametersValue]?: ApiDefinitions.IApiParameter[];
+
+ @property({ type: Object })
+ get securityScheme(): ApiDefinitions.IApiSecurityScheme|undefined {
+ return this[securityValue];
+ }
+
+ set securityScheme(value: ApiDefinitions.IApiSecurityScheme|undefined) {
const old = this[securityValue];
if (old === value) {
return;
@@ -126,40 +116,27 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
this.requestUpdate();
}
+ [responsesValue]?: ApiDefinitions.IApiResponse[];
+
constructor() {
super();
- /**
- * @type {ApiSecurityScheme}
- */
- this[securityValue] = undefined;
- /**
- * @type {ApiResponse[]}
- */
- this[responsesValue] = undefined;
- /**
- * @type {string}
- */
- this.selectedStatus = undefined;
-
this.headersOpened = false;
this.parametersOpened = false;
this.settingsOpened = false;
}
- /**
- * @returns {Promise}
- */
- async processGraph() {
+ async processGraph(): Promise {
await this[querySecurity]();
await this[processQueryParameters]();
this.dispatchEvent(new Event('graphload'));
- await this.requestUpdate();
+ this.requestUpdate();
+ await this.updateComplete;
}
/**
* Queries for the security requirements object.
*/
- async [querySecurity]() {
+ async [querySecurity](): Promise {
const { domainId } = this;
if (!domainId) {
// this[securityValue] = undefined;
@@ -174,13 +151,14 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
this[securityValue] = info;
} catch (e) {
this[securityValue] = undefined;
- Events.Telemetry.exception(this, e.message, false);
- Events.Reporting.error(this, e, `Unable to query for API operation data: ${e.message}`, this.localName);
+ const ex = e as Error;
+ Events.Telemetry.exception(this, ex.message, false);
+ Events.Reporting.error(this, ex, `Unable to query for API operation data: ${ex.message}`, this.localName);
}
}
- async [processSecurity]() {
- const scheme = /** @type ApiSecurityScheme */ (this[securityValue]);
+ async [processSecurity](): Promise {
+ const scheme = this[securityValue];
if (!scheme) {
this[responsesValue] = undefined;
return;
@@ -193,9 +171,9 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
/**
* Creates a parameter
*/
- async [processQueryParameters]() {
+ async [processQueryParameters](): Promise {
this[queryParametersValue] = undefined;
- const scheme = /** @type ApiSecurityScheme */ (this[securityValue]);
+ const scheme = this[securityValue];
if (!scheme) {
return;
}
@@ -203,12 +181,12 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
this[queryParametersValue] = scheme.queryParameters;
return;
}
- const nodeShape = /** @type ApiNodeShape */ (scheme.queryString);
+ const nodeShape = scheme.queryString as AmfShapes.IApiNodeShape;
if (!nodeShape) {
return;
}
const factory = new QueryParameterProcessor();
- const params = factory.collectOperationParameters(scheme.queryString, 'query');
+ const params = factory.collectOperationParameters(scheme.queryString as AmfShapes.IShapeUnion, 'query');
this[queryParametersValue] = params.map(p => p.parameter);
}
@@ -216,7 +194,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
* Updates the `selectedStatus` if not selected or the current selection doesn't
* exists in the current list of responses.
*/
- [preselectResponse]() {
+ [preselectResponse](): void {
const responses = this[responsesValue];
if (!Array.isArray(responses) || !responses.length) {
return;
@@ -235,18 +213,17 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
/**
* A handler for the status code tab selection.
- * @param {Event} e
*/
- [statusCodeHandler](e) {
- const tabs = /** @type AnypointTabs */ (e.target);
+ [statusCodeHandler](e: Event): void {
+ const tabs = e.target as AnypointTabsElement;
this.selectedStatus = String(tabs.selected);
}
/**
- * @param {string} grant The oauth2 grant (flow) name
- * @returns {string} Friendly name for the grant.
+ * @param grant The oauth2 grant (flow) name
+ * @returns Friendly name for the grant.
*/
- [getLabelForGrant](grant) {
+ [getLabelForGrant](grant: string): string {
switch (grant) {
case "implicit":
return "Implicit";
@@ -263,24 +240,22 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
}
- render() {
- const scheme = /** @type ApiSecurityScheme */ (this[securityValue]);
+ render(): TemplateResult {
+ const scheme = this[securityValue];
if (!scheme) {
return html``;
}
return html`
-
- ${this[titleTemplate]()}
+ ${this[titleTemplate](scheme)}
${this[descriptionTemplate](scheme.description)}
${this[queryParamsTemplate]()}
- ${this[headersTemplate]()}
+ ${this[headersTemplate](scheme)}
${this[responseTemplate]()}
- ${this[settingsTemplate]()}
+ ${this[settingsTemplate](scheme)}
`;
}
- [titleTemplate]() {
- const scheme = /** @type ApiSecurityScheme */ (this[securityValue]);
+ [titleTemplate](scheme: ApiDefinitions.IApiSecurityScheme): TemplateResult {
const { name, type, displayName } = scheme;
const title = displayName || name;
return html`
@@ -294,10 +269,10 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @return {TemplateResult|string} The template for the query parameters
+ * @returns The template for the query parameters
*/
- [queryParamsTemplate]() {
- const params = /** @type ApiParameter[] */ (this[queryParametersValue]);
+ [queryParamsTemplate](): TemplateResult | string {
+ const params = this[queryParametersValue];
if (!Array.isArray(params) || !params.length) {
return '';
}
@@ -306,10 +281,9 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @return {TemplateResult|string} The template for the headers
+ * @returns The template for the headers
*/
- [headersTemplate]() {
- const scheme = /** @type ApiSecurityScheme */ (this[securityValue]);
+ [headersTemplate](scheme: ApiDefinitions.IApiSecurityScheme): TemplateResult | string {
if (!Array.isArray(scheme.headers) || !scheme.headers.length) {
return '';
}
@@ -317,7 +291,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
return this[paramsSectionTemplate]('Headers', 'headersOpened', content);
}
- [responseTemplate]() {
+ [responseTemplate](): TemplateResult | string {
const responses = this[responsesValue];
if (!Array.isArray(responses) || !responses.length) {
return '';
@@ -330,10 +304,10 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiResponse[]} responses The responses to render.
- * @returns {TemplateResult} The template for the responses selector.
+ * @param responses The responses to render.
+ * @returns The template for the responses selector.
*/
- [responseTabsTemplate](responses) {
+ [responseTabsTemplate](responses: ApiDefinitions.IApiResponse[]): TemplateResult {
const { selectedStatus, anypoint } = this;
const filtered = responses.filter((item) => !!item.statusCode);
return html`
@@ -345,7 +319,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
@selected="${this[statusCodeHandler]}"
?anypoint="${anypoint}"
>
- ${filtered.map((item) => html`${item.statusCode} `)}
+ ${filtered.map((item) => html`${item.statusCode} `)}
@@ -353,10 +327,10 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiResponse[]} responses The responses to render.
- * @returns {TemplateResult} The template for the currently selected response.
+ * @param responses The responses to render.
+ * @returns The template for the currently selected response.
*/
- [responseContentTemplate](responses) {
+ [responseContentTemplate](responses: ApiDefinitions.IApiResponse[]): TemplateResult {
const { selectedStatus } = this;
const response = responses.find((item) => item.statusCode === selectedStatus);
if (!response) {
@@ -368,35 +342,33 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @returns {TemplateResult|string} The template for the security settings, when required.
+ * @returns The template for the security settings, when required.
*/
- [settingsTemplate]() {
- const scheme = /** @type ApiSecurityScheme */ (this[securityValue]);
+ [settingsTemplate](scheme: ApiDefinitions.IApiSecurityScheme): TemplateResult | string {
const { settings } = scheme;
if (!settings) {
return '';
}
const { types } = settings;
- if (types.includes(ns.aml.vocabularies.security.ApiKeySettings)) {
+ if (types.includes(AmfNamespace.aml.vocabularies.security.ApiKeySettings)) {
return this[apiKeySettingsTemplate](settings);
}
- if (types.includes(ns.aml.vocabularies.security.OpenIdConnectSettings)) {
+ if (types.includes(AmfNamespace.aml.vocabularies.security.OpenIdConnectSettings)) {
return this[openIdConnectSettingsTemplate](settings);
}
- if (types.includes(ns.aml.vocabularies.security.OAuth2Settings)) {
- return this[oAuth2SettingsTemplate](/** @type ApiSecurityOAuth2Settings */ (settings));
+ if (types.includes(AmfNamespace.aml.vocabularies.security.OAuth2Settings)) {
+ return this[oAuth2SettingsTemplate]((settings as ApiDefinitions.IApiSecurityOAuth2Settings));
}
- if (types.includes(ns.aml.vocabularies.security.OAuth1Settings)) {
- return this[oAuth1SettingsTemplate](/** @type ApiSecurityOAuth1Settings */ (settings));
+ if (types.includes(AmfNamespace.aml.vocabularies.security.OAuth1Settings)) {
+ return this[oAuth1SettingsTemplate]((settings as ApiDefinitions.IApiSecurityOAuth1Settings));
}
return '';
}
/**
- * @param {ApiSecurityApiKeySettings} settings
- * @returns {TemplateResult} The template for API Key security definition.
+ * @returns The template for API Key security definition.
*/
- [apiKeySettingsTemplate](settings) {
+ [apiKeySettingsTemplate](settings: ApiDefinitions.IApiSecurityApiKeySettings): TemplateResult {
const { in: paramLocation='Unknown', name } = settings;
const content = html`
@@ -411,37 +383,36 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {string} name The name of the API Key parameter
- * @returns {TemplateResult} The template for API Key header example
+ * @param name The name of the API Key parameter
+ * @returns The template for API Key header example
*/
- [apiKeyHeaderExample](name) {
+ [apiKeyHeaderExample](name = ''): TemplateResult {
const value = `${name}: abcdef12345`;
return this[exampleTemplate](value);
}
/**
- * @param {string} name The name of the API Key parameter
- * @returns {TemplateResult} The template for API Key cookie example
+ * @param name The name of the API Key parameter
+ * @returns The template for API Key cookie example
*/
- [apiKeyCookieExample](name) {
+ [apiKeyCookieExample](name = ''): TemplateResult {
const value = `Cookie: ${name}=abcdef12345`;
return this[exampleTemplate](value);
}
/**
- * @param {string} name The name of the API Key parameter
- * @returns {TemplateResult} The template for API Key query parameter example
+ * @param name The name of the API Key parameter
+ * @returns The template for API Key query parameter example
*/
- [apiKeyQueryExample](name) {
+ [apiKeyQueryExample](name = ''): TemplateResult {
const value = `GET /api?${name}=abcdef12345`;
return this[exampleTemplate](value);
}
/**
- * @param {string} value
- * @returns {TemplateResult} The template for a single example
+ * @returns The template for a single example
*/
- [exampleTemplate](value) {
+ [exampleTemplate](value = ''): TemplateResult {
return html`
Example
@@ -453,10 +424,9 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase { } /** - * @param {ApiSecurityOpenIdConnectSettings} settings - * @returns {TemplateResult|string} The template for API Key security definition. + * @returns The template for API Key security definition. */ - [openIdConnectSettingsTemplate](settings) { + [openIdConnectSettingsTemplate](settings: ApiDefinitions.IApiSecurityOpenIdConnectSettings): TemplateResult | string { const { url } = settings; if (!url) { return ''; @@ -473,31 +443,29 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase { } /** - * @param {ApiSecurityOAuth2Settings} settings - * @returns {TemplateResult|string} The template for OAuth 2 security definition. + * @returns The template for OAuth 2 security definition. */ - [oAuth2SettingsTemplate](settings) { + [oAuth2SettingsTemplate](settings: ApiDefinitions.IApiSecurityOAuth2Settings): TemplateResult | string { const { authorizationGrants=[], flows=[] } = settings; if (!authorizationGrants.length && !flows.length) { return ''; } - const content = []; + const content: (TemplateResult|string)[] = []; const grants = this[oAuth2GrantsTemplate](authorizationGrants); const flowsContent = this[oAuth2FlowsTemplate](flows); if (grants) { - content.push(/** @type TemplateResult */(grants)); + content.push(grants); } if (flowsContent) { - content.push(/** @type TemplateResult */(flowsContent)); + content.push(flowsContent); } return this[paramsSectionTemplate]('Settings', 'settingsOpened', content); } /** - * @param {string[]} grants - * @returns {TemplateResult|string} The template for OAuth 2 flows list. + * @returns The template for OAuth 2 flows list. */ - [oAuth2GrantsTemplate](grants) { + [oAuth2GrantsTemplate](grants: string[]): TemplateResult | string { if (!grants.length) { return ''; } @@ -510,10 +478,9 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase { } /** - * @param {ApiSecurityOAuth2Flow[]} flows - * @returns {TemplateResult|string} The template for OAuth 2 flows list. + * @returns The template for OAuth 2 flows list. */ - [oAuth2FlowsTemplate](flows) { + [oAuth2FlowsTemplate](flows: ApiDefinitions.IApiSecurityOAuth2Flow[]): TemplateResult | string { if (!flows.length) { return ''; } @@ -523,10 +490,9 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase { } /** - * @param {ApiSecurityOAuth2Flow} flow - * @returns {TemplateResult} The template for an OAuth 2 flow. + * @returns The template for an OAuth 2 flow. */ - [oAuth2FlowTemplate](flow) { + [oAuth2FlowTemplate](flow: ApiDefinitions.IApiSecurityOAuth2Flow): TemplateResult { const { scopes, accessTokenUri, authorizationUri, refreshUri, flow: grant } = flow; return html`
@@ -540,10 +506,10 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {string} grant The grant name
- * @returns {TemplateResult|string} The template for OAuth 2 grant title.
+ * @param grant The grant name
+ * @returns The template for OAuth 2 grant title.
*/
- [grantTitleTemplate](grant) {
+ [grantTitleTemplate](grant?: string): TemplateResult | string {
if (!grant) {
return '';
}
@@ -554,10 +520,10 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {string} uri The access token URI
- * @returns {TemplateResult|string} The template for the access token URI
+ * @param uri The access token URI
+ * @returns The template for the access token URI
*/
- [accessTokenUriTemplate](uri) {
+ [accessTokenUriTemplate](uri?: string): TemplateResult | string {
if (!uri) {
return '';
}
@@ -571,10 +537,10 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {string} uri The access token URI
- * @returns {TemplateResult|string} The template for the authorization endpoint URI
+ * @param uri The access token URI
+ * @returns The template for the authorization endpoint URI
*/
- [authorizationUriTemplate](uri) {
+ [authorizationUriTemplate](uri?: string): TemplateResult | string {
if (!uri) {
return '';
}
@@ -588,10 +554,10 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {string} uri The access token URI
- * @returns {TemplateResult|string} The template for the refresh token endpoint URI
+ * @param uri The access token URI
+ * @returns The template for the refresh token endpoint URI
*/
- [refreshUriTemplate](uri) {
+ [refreshUriTemplate](uri?: string): TemplateResult | string {
if (!uri) {
return '';
}
@@ -605,10 +571,10 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiSecurityScope[]} scopes The oauth scopes
- * @returns {TemplateResult|string} The template for the scopes list
+ * @param scopes The oauth scopes
+ * @returns The template for the scopes list
*/
- [scopesTemplate](scopes) {
+ [scopesTemplate](scopes?: ApiDefinitions.IApiSecurityScope[]): TemplateResult | string {
if (!Array.isArray(scopes) || !scopes.length) {
return '';
}
@@ -622,10 +588,10 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiSecurityScope} scope The access token URI
- * @returns {TemplateResult} The template for an oauth scope
+ * @param scope The access token URI
+ * @returns The template for an oauth scope
*/
- [scopeTemplate](scope) {
+ [scopeTemplate](scope: ApiDefinitions.IApiSecurityScope): TemplateResult {
const { name, description } = scope;
return html`
@@ -636,20 +602,19 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {ApiSecurityOAuth1Settings} settings
- * @returns {TemplateResult|string} The template for OAuth 1 security definition.
+ * @returns The template for OAuth 1 security definition.
*/
- [oAuth1SettingsTemplate](settings) {
+ [oAuth1SettingsTemplate](settings: ApiDefinitions.IApiSecurityOAuth1Settings) : TemplateResult {
const { signatures=[], authorizationUri, requestTokenUri, tokenCredentialsUri } = settings;
- const content = /** @type TemplateResult[] */ ([]);
+ const content: (TemplateResult | string)[] = [];
if (authorizationUri) {
- content.push(/** @type TemplateResult */ (this[authorizationUriTemplate](authorizationUri)));
+ content.push(this[authorizationUriTemplate](authorizationUri));
}
if (requestTokenUri) {
- content.push(/** @type TemplateResult */ (this[accessTokenUriTemplate](requestTokenUri)));
+ content.push(this[accessTokenUriTemplate](requestTokenUri));
}
if (tokenCredentialsUri) {
- content.push(/** @type TemplateResult */ (this[tokenCredentialsUriTemplate](tokenCredentialsUri)));
+ content.push(this[tokenCredentialsUriTemplate](tokenCredentialsUri));
}
if (signatures.length) {
content.push(this[signaturesTemplate](signatures));
@@ -658,10 +623,10 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {string} uri The token credentials URI
- * @returns {TemplateResult|string} The template for the token credentials URI
+ * @param uri The token credentials URI
+ * @returns The template for the token credentials URI
*/
- [tokenCredentialsUriTemplate](uri) {
+ [tokenCredentialsUriTemplate](uri?: string): TemplateResult | string {
if (!uri) {
return '';
}
@@ -675,10 +640,10 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
}
/**
- * @param {string[]} signatures The OAuth1 signatures.
- * @returns {TemplateResult} The template for the OAuth1 signatures.
+ * @param signatures The OAuth1 signatures.
+ * @returns The template for the OAuth1 signatures.
*/
- [signaturesTemplate](signatures) {
+ [signaturesTemplate](signatures: string[]): TemplateResult {
return html`
;
-
- render(): TemplateResult;
-}
diff --git a/src/elements/ApiSecurityRequirementDocumentElement.js b/src/elements/ApiSecurityRequirementDocumentElement.ts
similarity index 69%
rename from src/elements/ApiSecurityRequirementDocumentElement.js
rename to src/elements/ApiSecurityRequirementDocumentElement.ts
index 6cf64f6..779649c 100644
--- a/src/elements/ApiSecurityRequirementDocumentElement.js
+++ b/src/elements/ApiSecurityRequirementDocumentElement.ts
@@ -1,8 +1,8 @@
/* eslint-disable class-methods-use-this */
-import { html } from 'lit-element';
-import {
- ApiDocumentationBase,
-} from './ApiDocumentationBase.js';
+import { html, TemplateResult, CSSResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ApiDefinitions } from '@api-client/core/build/browser.js';
+import { ApiDocumentationBase, } from './ApiDocumentationBase.js';
import { Events } from '../events/Events.js';
import elementStyles from './styles/ApiSecurityRequirement.js';
import '../../define/api-parametrized-security-scheme.js';
@@ -14,27 +14,18 @@ export const securityRequirementValue = Symbol('securityRequirementValue');
export const querySecurity = Symbol('querySecurity');
export default class ApiSecurityRequirementDocumentElement extends ApiDocumentationBase {
- get styles() {
+ static get styles(): CSSResult[] {
return [elementStyles];
}
- constructor() {
- super();
- /** @type {ApiSecurityRequirement} */
- this[securityRequirementValue] = undefined;
- }
+ [securityRequirementValue]?: ApiDefinitions.IApiSecurityRequirement;
- /**
- * @returns {ApiSecurityRequirement}
- */
- get securityRequirement() {
+ @property({ type: Object })
+ get securityRequirement(): ApiDefinitions.IApiSecurityRequirement | undefined {
return this[securityRequirementValue];
}
- /**
- * @param {ApiSecurityRequirement} value
- */
- set securityRequirement(value) {
+ set securityRequirement(value: ApiDefinitions.IApiSecurityRequirement | undefined) {
const old = this[securityRequirementValue];
if (old === value) {
return;
@@ -43,10 +34,7 @@ export default class ApiSecurityRequirementDocumentElement extends ApiDocumentat
this.processGraph();
}
- /**
- * @returns {Promise}
- */
- async processGraph() {
+ async processGraph(): Promise {
await this[querySecurity]();
this.requestUpdate();
}
@@ -54,7 +42,7 @@ export default class ApiSecurityRequirementDocumentElement extends ApiDocumentat
/**
* Queries for the security requirements object.
*/
- async [querySecurity]() {
+ async [querySecurity](): Promise {
const { domainId } = this;
if (!domainId) {
// this[securityValue] = undefined;
@@ -68,19 +56,19 @@ export default class ApiSecurityRequirementDocumentElement extends ApiDocumentat
const info = await Events.Security.getRequirement(this, domainId);
this[securityRequirementValue] = info;
} catch (e) {
+ const ex = e as Error;
this[securityRequirementValue] = undefined;
- Events.Telemetry.exception(this, e.message, false);
- Events.Reporting.error(this, e, `Unable to query for API operation data: ${e.message}`, this.localName);
+ Events.Telemetry.exception(this, ex.message, false);
+ Events.Reporting.error(this, ex, `Unable to query for API operation data: ${ex.message}`, this.localName);
}
}
- render() {
+ render(): TemplateResult {
const scheme = this[securityRequirementValue];
if (!scheme || !scheme.schemes || !scheme.schemes.length) {
return html``;
}
return html`
-
Supported signatures
diff --git a/src/elements/ApiSecurityRequirementDocumentElement.d.ts b/src/elements/ApiSecurityRequirementDocumentElement.d.ts deleted file mode 100644 index 7eaf339..0000000 --- a/src/elements/ApiSecurityRequirementDocumentElement.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { TemplateResult } from 'lit-element'; -import { ApiDocumentationBase } from './ApiDocumentationBase.js'; -import { ApiSecurityRequirement } from '../helpers/api'; - -export const securityRequirementValue: unique symbol; - -export default class ApiSecurityRequirementDocumentElement extends ApiDocumentationBase { - [securityRequirementValue]: ApiSecurityRequirement; - constructor(); - get securityRequirement(): ApiSecurityRequirement; - set securityRequirement(value: ApiSecurityRequirement); - processGraph(): Promise
${scheme.schemes.map((item) => html`
;
- // /**
- // * Receives shape id and shape type, and looks for endpointId
- // * if the type is 'endpoint'
- // * @param id AMF shape id
- // * @param type AMF shape type
- // */
- // [processShapeChange](id: string, type: ServerType): void;
-
- // /**
- // * Computes the endpoint id based on a given method id
- // * Returns undefined is endpoint is not found
- // * @param methodId The AMF id of the method
- // */
- // [getEndpointIdForMethod](methodId: string): string|undefined;
-
- // /**
- // * Dispatches the `servers-count-changed` event with the current number of rendered servers.
- // */
- // [notifyServersCount](): void;
-
- // /**
- // * A handler called when slotted number of children change.
- // * It sets the `[customNodesCount]` property with the number of properties
- // * and notifies the change.
- // */
- // [childrenHandler](): void;
-
- /**
- * Queries for the current API server data from the store.
- */
- processGraph(): Promise;
-
- /**
- * Executes auto selection logic.
- *
- * @param preferred The value that should be selected when possible.
- */
- selectIfNeeded(preferred?: string): void;
-
- // /**
- // * Collects information about selection from the current value.
- // * @param value Current value for the server URI.
- // * @returns A selection info object
- // */
- // [getSelectionInfo](value?: string): SelectionInfo;
-
- // /**
- // * Takes care of recognizing whether a server selection should be cleared.
- // * This happens when list of servers change and with the new list of server
- // * current selection does not exist.
- // * This ignores the selection when current type is not a `server`.
- // *
- // * @param servers List of new servers
- // */
- // [updateServerSelection](servers: ApiServer[]): void;
-
- // /**
- // * @param servers List of current servers
- // * @param value The value to look for
- // * @returns The index of found server or -1 if none found.
- // */
- // [getServerIndexByUri](servers: ApiServer[], value: string): number;
-
- // /**
- // * Handler for the listbox's change event
- // */
- // [selectionChangeHandler](e: CustomEvent): void;
-
- // /**
- // * Retrieves custom base uris elements assigned to the
- // * custom-base-uri slot
- // *
- // * @returns Elements assigned to custom-base-uri slot
- // */
- // [getExtraServers](): Element[];
-
- // /**
- // * Handler for the input field change.
- // */
- // [customUriChangeHandler](e: Event): void;
-
- // /**
- // * Resets current selection to a default value.
- // */
- // [resetSelection](): void;
-
- // /**
- // * Handler for the drop down's `opened-changed` event. It sets local value
- // * for the opened flag.
- // */
- // [dropDownOpenedHandler](e: CustomEvent): void;
-
- // /**
- // * Updates list of custom items rendered in the selector.
- // */
- // [listboxItemsHandler](e: CustomEvent): void;
-
- render(): TemplateResult;
-
- // /**
- // * @returns Template result for the custom input.
- // */
- // [customUriInputTemplate](): TemplateResult;
-
- // /**
- // * @returns Template result for the drop down element.
- // */
- // [selectorTemplate](): TemplateResult;
-
- // /**
- // * Call the render functions for
- // * - Server options (from AMF Model)
- // * - Custom URI option
- // * - Extra slot
- // * @returns The combination of all options
- // */
- // [selectorListTemplate](): TemplateResult;
-
- // /**
- // * @returns The template for the custom URI list item.
- // */
- // [customUriTemplate](): TemplateResult|string;
-
- // /**
- // * @returns Template result for the drop down list options for current servers
- // */
- // [serverListTemplate](): TemplateResult[]|string;
-
- // /**
- // * @param server The server definition
- // * @returns The template for a server list item.
- // */
- // [serverListItemTemplate](server: ApiServer): TemplateResult;
-
- // /**
- // * @returns Template result for the `slot` element
- // */
- // [slotTemplate](): TemplateResult;
-}
diff --git a/src/elements/ApiServerSelectorElement.js b/src/elements/ApiServerSelectorElement.ts
similarity index 67%
rename from src/elements/ApiServerSelectorElement.js
rename to src/elements/ApiServerSelectorElement.ts
index 7a49220..17fe9d3 100644
--- a/src/elements/ApiServerSelectorElement.js
+++ b/src/elements/ApiServerSelectorElement.ts
@@ -1,25 +1,21 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable arrow-body-style */
/* eslint-disable no-plusplus */
/* eslint-disable class-methods-use-this */
-import { html, LitElement } from 'lit-element';
-import { EventsTargetMixin } from '@anypoint-web-components/awc';
-import '@anypoint-web-components/awc/anypoint-input.js';
-import '@anypoint-web-components/awc/anypoint-dropdown-menu.js';
-import '@anypoint-web-components/awc/anypoint-listbox.js';
-import '@anypoint-web-components/awc/anypoint-item.js';
-import '@anypoint-web-components/awc/anypoint-icon-button.js';
+import { html, LitElement, TemplateResult, CSSResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ApiDefinitions } from '@api-client/core/build/browser.js';
+import { AnypointDropdownElement, AnypointListboxElement, EventsTargetMixin } from '@anypoint-web-components/awc';
+import '@anypoint-web-components/awc/dist/define/anypoint-input.js';
+import '@anypoint-web-components/awc/dist/define/anypoint-dropdown-menu.js';
+import '@anypoint-web-components/awc/dist/define/anypoint-listbox.js';
+import '@anypoint-web-components/awc/dist/define/anypoint-item.js';
+import '@anypoint-web-components/awc/dist/define/anypoint-icon-button.js';
import { close } from '@advanced-rest-client/icons/ArcIcons.js';
import elementStyles from './styles/ServerSelector.js';
import { Events } from '../events/Events.js';
import { EventTypes } from '../events/EventTypes.js';
-
-/** @typedef {import('lit-html').TemplateResult} TemplateResult */
-/** @typedef {import('@anypoint-web-components/awc').AnypointListboxElement} AnypointListboxElement */
-/** @typedef {import('@anypoint-web-components/awc').AnypointDropdownElement} AnypointDropdownElement */
-/** @typedef {import('../helpers/api').ApiServer} ApiServer */
-/** @typedef {import('../types').SelectionInfo} SelectionInfo */
-/** @typedef {import('../types').UpdateServersOptions} UpdateServersOptions */
-/** @typedef {import('../types').SelectionType} SelectionType */
+import { SelectionInfo, ServerType } from '../types.js';
export const domainIdValue = Symbol('domainIdValue');
export const domainTypeValue = Symbol('domainTypeValue');
@@ -78,81 +74,62 @@ export const queryServers = Symbol('queryServers');
* The items rendered in this slot should be `anypoint-item` components, and have a
* `value` attribute. This is the value that will be dispatched in the `api-server-changed`
* event.
+ *
+ * @fires apiserverchanged - The event dispatched when a server selection change.
+ * @fires serverscountchanged - The event dispatched when a server count change.
+ * @fires query - Dispatched when the element asks the context store for servers info.
*/
export default class ApiServerSelectorElement extends EventsTargetMixin(LitElement) {
- static get properties() {
- return {
- /**
- * The baseUri to override any server definition
- */
- baseUri: { type: String },
-
- /**
- * When set the `Custom base URI` is rendered in the dropdown
- */
- allowCustom: { type: Boolean, reflect: true },
-
- /**
- * The current list of servers to render
- */
- servers: { type: Array },
-
- /**
- * Currently selected type of the input.
- * `server` | `extra` | `custom`
- */
- type: { type: String },
-
- /**
- * Current value of the server
- */
- value: { type: String },
-
- /**
- * Enables outlined material theme
- */
- outlined: { type: Boolean },
-
- /**
- * Enables Anypoint platform styles.
- */
- anypoint: { type: Boolean },
-
- /**
- * When set it automatically selected the first server from the list
- * of servers when selection is missing.
- */
- autoSelect: { type: Boolean },
-
- /**
- * A programmatic access to the opened state of the drop down.
- * Note, this does nothing when custom element is rendered.
- */
- opened: { type: Boolean },
-
- /**
- * The graph domain id of the selected domain object.
- */
- domainId: { type: String },
- /**
- * The selected domain type.
- * This is an abstract name from the api navigation.
- */
- domainType: { type: String },
- };
+ get styles(): CSSResult[] {
+ return [elementStyles];
}
-
+
/**
- * @returns {string} The domain id (AMF id) of the rendered operation.
+ * Currently selected type of the input.
+ * `server` | `extra` | `custom`
+ * @attribute
*/
- get domainId() {
- return this[domainIdValue];
- }
+ @property({ type: String }) type?: string;
+
+ /**
+ * Enables outlined material theme
+ * @attribute
+ */
+ @property({ type: Boolean }) outlined?: boolean;
+
+ /**
+ * Enables Anypoint platform styles.
+ * @attribute
+ */
+ @property({ type: Boolean }) anypoint?: boolean;
+
+ /**
+ * When set it automatically selected the first server from the list
+ * of servers when selection is missing.
+ * @attribute
+ */
+ @property({ type: Boolean }) autoSelect?: boolean;
/**
- * @param {string} value The domain id (AMF id) of the rendered operation.
+ * A programmatic access to the opened state of the drop down.
+ * Note, this does nothing when custom element is rendered.
+ * @attribute
*/
- set domainId(value) {
+ @property({ type: Boolean }) opened?: boolean;
+
+ [domainIdValue]?: string;
+
+ [domainTypeValue]?: string;
+
+ /**
+ * The graph domain id of the selected domain object.
+ * @attribute
+ */
+ @property({ type: String }) get domainId(): string | undefined {
+ return this[domainIdValue];
+ }
+
+ set domainId(value: string | undefined) {
const old = this[domainIdValue];
/* istanbul ignore if */
if (old === value) {
@@ -164,16 +141,15 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
}
/**
- * @returns {SelectionType|undefined} The domain id of the object to render.
+ * The selected domain type.
+ * This is an abstract name from the api navigation.
+ * @attribute
*/
- get domainType() {
+ @property({ type: String }) get domainType(): string | undefined {
return this[domainTypeValue];
}
- /**
- * @returns {SelectionType|undefined} The domain id of the object to render.
- */
- set domainType(value) {
+ set domainType(value: string | undefined) {
const old = this[domainTypeValue];
if (old === value) {
return;
@@ -185,23 +161,25 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
}
}
- get styles() {
- return elementStyles;
- }
-
/**
- * @return {string[]} Computed list of all URI values from both the servers
+ * Computed list of all URI values from both the servers
* and the list of rendered custom items.
*/
- get serverValues() {
+ get serverValues(): string[] {
const result = (this.servers || []).map(item => item.url);
return result.concat(this[customItems] || []);
}
+ [serversValue]?: ApiDefinitions.IApiServer[];
+
/**
- * @param {ApiServer[]} value List of servers to set
+ * The current list of servers to render
*/
- set servers(value) {
+ @property({ type: Array }) get servers(): ApiDefinitions.IApiServer[] | undefined {
+ return this[serversValue] || [];
+ }
+
+ set servers(value: ApiDefinitions.IApiServer[] | undefined) {
const old = this[serversValue];
/* istanbul ignore if */
if (old === value) {
@@ -213,24 +191,17 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
this[notifyServersCount]();
}
- /**
- * @returns {ApiServer[]}
- */
- get servers() {
- return this[serversValue] || [];
- }
+ [allowCustomValue]?: boolean;
/**
- * @returns {boolean}
+ * When set the `Custom base URI` is rendered in the dropdown
+ * @attr
*/
- get allowCustom() {
+ @property({ type: Boolean, reflect: true }) get allowCustom(): boolean | undefined {
return this[allowCustomValue];
}
- /**
- * @param {boolean} value
- */
- set allowCustom(value) {
+ set allowCustom(value: boolean | undefined) {
const old = this.allowCustom;
/* istanbul ignore if */
if (old === value) {
@@ -245,11 +216,17 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
}
}
- get baseUri() {
+ [baseUriValue]?: string;
+
+ /**
+ * The baseUri to override any server definition
+ * @attr
+ */
+ @property({ type: String }) get baseUri(): string | undefined {
return this[baseUriValue];
}
- set baseUri(value) {
+ set baseUri(value: string | undefined) {
const old = this[baseUriValue];
/* istanbul ignore if */
if (old === value) {
@@ -261,11 +238,13 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
this.requestUpdate('baseUri', old);
}
+ [valueValue]?: string;
+
/**
- * @return {String} Current base URI value from either (in order) the baseUri,
- * current value, or just empty string.
+ * The current base URI value from either (in order) the baseUri, current value, or just empty string.
+ * @attr
*/
- get value() {
+ @property({ type: String }) get value(): string | undefined {
return this.baseUri || this[valueValue] || '';
}
@@ -275,9 +254,9 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
*
* This can be used to programmatically set a value of the control.
*
- * @param {String} value The value to render.
+ * @param value The value to render.
*/
- set value(value) {
+ set value(value: string | undefined) {
if (this.baseUri) {
return;
}
@@ -292,18 +271,17 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
}
/**
- * @return {Boolean} True if selected type is "custom" type.
+ * True if selected type is "custom" type.
*/
- get isCustom() {
+ get isCustom(): boolean {
return this.type === 'custom';
}
/**
* Checks whether the current value is a custom value related to current list of servers.
- * @return {Boolean} True if the value is not one of the server values or custom
- * servers.
+ * @returns True if the value is not one of the server values or custom servers.
*/
- get isValueCustom() {
+ get isValueCustom(): boolean {
const { value } = this;
if (!value) {
return false;
@@ -311,19 +289,19 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
return !this.serverValues.includes(value);
}
+ [onApiServerChange]: EventListener | null = null;
+
/**
- * @return {EventListener|null} Previously registered callback function for
- * the `api-server-changed` event.
+ * @returns Previously registered callback function for the `api-server-changed` event.
*/
- get onapiserverchange() {
+ get onapiserverchange(): EventListener | null {
return this[onApiServerChange];
}
/**
- * @param {EventListener} value A callback function to be called
- * when `api-server-changed` event is dispatched.
+ * @param value A callback function to be called when `api-server-changed` event is dispatched.
*/
- set onapiserverchange(value) {
+ set onapiserverchange(value: EventListener | null) {
const old = this[onApiServerChange];
if (old) {
this.removeEventListener(EventTypes.Server.serverChange, old);
@@ -337,19 +315,19 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
}
}
+ [onServersCountChangeValue]: EventListener | null = null;
+
/**
- * @return {EventListener|null} Previously registered callback function for
- * the `servers-count-changed` event.
+ * @returns Previously registered callback function for the `servers-count-changed` event.
*/
- get onserverscountchange() {
+ get onserverscountchange(): EventListener | null {
return this[onServersCountChangeValue] || null;
}
/**
- * @param {EventListener} value A callback function to be called
- * when `servers-count-changed` event is dispatched.
+ * @param value A callback function to be called when `servers-count-changed` event is dispatched.
*/
- set onserverscountchange(value) {
+ set onserverscountchange(value: EventListener | null) {
const old = this[onServersCountChangeValue];
if (old) {
this.removeEventListener(EventTypes.Server.serverCountChange, old);
@@ -364,50 +342,54 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
}
/**
- * @return {Number} Total number of list items being rendered.
+ * @returns Total number of list items being rendered.
*/
- get serversCount() {
- const { allowCustom, servers } = this;
+ get serversCount(): number {
+ const { allowCustom, servers = [] } = this;
const offset = allowCustom ? 1 : 0;
const serversCount = servers.length + this[customNodesCount] + offset;
return serversCount;
}
+ /**
+ * Holds the size of rendered custom servers.
+ */
+ [customNodesCount]: number;
+
+ /**
+ * The timeout after which the `queryGraph()` function is called
+ * in the debouncer.
+ */
+ queryDebouncerTimeout: number;
+
+ /**
+ * A list of custom items rendered in the slot.
+ * This property is received from the list box that mixes in `AnypointSelectableMixin`
+ * that dispatches `items-changed` event when rendered items change.
+ */
+ [customItems]: string[];
+
+ [debounceValue]?: any;
+
constructor() {
super();
- /**
- * Holds the size of rendered custom servers.
- * @type number
- */
this[customNodesCount] = 0;
- /**
- * The timeout after which the `queryGraph()` function is called
- * in the debouncer.
- */
this.queryDebouncerTimeout = 1;
this.opened = false;
this.autoSelect = false;
this.anypoint = false;
this.outlined = false;
- /**
- * A list of custom items rendered in the slot.
- * This property is received from the list box that mixes in `AnypointSelectableMixin`
- * that dispatches `items-changed` event when rendered items change.
- * @type {string[]}
- */
this[customItems] = [];
- /** @type EventListener */
- this[onServersCountChangeValue] = undefined;
this[graphChangeHandler] = this[graphChangeHandler].bind(this);
}
- connectedCallback() {
+ connectedCallback(): void {
super.connectedCallback();
this[processDebounce]();
}
- disconnectedCallback() {
+ disconnectedCallback(): void {
super.disconnectedCallback();
if (this[debounceValue]) {
clearTimeout(this[debounceValue]);
@@ -415,18 +397,12 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
}
}
- /**
- * @param {EventTarget} node
- */
- _attachListeners(node) {
+ _attachListeners(node: EventTarget): void {
node.addEventListener(EventTypes.Store.graphChange, this[graphChangeHandler]);
super._attachListeners(node);
}
- /**
- * @param {EventTarget} node
- */
- _detachListeners(node) {
+ _detachListeners(node: EventTarget): void {
node.removeEventListener(EventTypes.Store.graphChange, this[graphChangeHandler]);
super._detachListeners(node);
}
@@ -434,14 +410,14 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
/**
* Handler for the event dispatched by the store when the graph model change.
*/
- [graphChangeHandler]() {
+ [graphChangeHandler](): void {
this[processDebounce]()
}
/**
* Calls the `queryGraph()` function in a debouncer.
*/
- [processDebounce]() {
+ [processDebounce](): void {
if (this[debounceValue]) {
clearTimeout(this[debounceValue]);
}
@@ -451,17 +427,18 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
}, this.queryDebouncerTimeout);
}
- firstUpdated() {
+ firstUpdated(): void {
this[notifyServersCount]();
}
/**
* Queries for the current API server data from the store.
*/
- async processGraph() {
+ async processGraph(): Promise {
const oldValue = this.value;
await this[queryServers]();
- // await this.requestUpdate();
+ // this.requestUpdate();
+ // await this.updateComplete;
this.value = '';
this.selectIfNeeded(oldValue);
this[notifyServersCount]();
@@ -470,7 +447,7 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
/**
* Queries for the current servers value.
*/
- async [queryServers]() {
+ async [queryServers](): Promise {
const { domainId, domainType } = this;
let endpointId;
let methodId;
@@ -486,19 +463,17 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
});
this[serversValue] = info;
} catch (e) {
+ const ex = e as Error;
this[serversValue] = undefined;
- Events.Telemetry.exception(this, e.message, false);
- Events.Reporting.error(this, e, `Unable to query for API servers: ${e.message}`, this.localName);
+ Events.Telemetry.exception(this, ex.message, false);
+ Events.Reporting.error(this, ex, `Unable to query for API servers: ${ex.message}`, this.localName);
}
}
/**
* Async function to set value after component has finished updating
- * @param {String} value
- * @return {Promise}
- * @private
*/
- async [setValue](value) {
+ async [setValue](value?: string): Promise {
await this.updateComplete;
const { type, value: effectiveValue } = this[getSelectionInfo](value);
if (type === 'custom' && !this.allowCustom) {
@@ -507,13 +482,13 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
if (this.type !== type) {
this.type = type;
}
- Events.Server.serverChange(this, effectiveValue, this.type);
+ Events.Server.serverChange(this, effectiveValue, this.type as ServerType);
}
/**
* Dispatches the `servers-count-changed` event with the current number of rendered servers.
*/
- [notifyServersCount]() {
+ [notifyServersCount](): void {
Events.Server.serverCountChange(this, this.serversCount);
}
@@ -522,7 +497,7 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
* It sets the `[customNodesCount]` property with the number of properties
* and notifies the change.
*/
- [childrenHandler]() {
+ [childrenHandler](): void {
const nodes = this[getExtraServers]();
this[customNodesCount] = nodes.length;
this[notifyServersCount]();
@@ -531,9 +506,9 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
/**
* Executes auto selection logic.
*
- * @param {string=} preferred The value that should be selected when possible.
+ * @param preferred The value that should be selected when possible.
*/
- selectIfNeeded(preferred) {
+ selectIfNeeded(preferred?: string): void {
if (!this.autoSelect) {
if (preferred) {
this.value = preferred;
@@ -554,24 +529,25 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
this.value = preferred;
return;
}
- const [first] = this.servers;
+ const { servers = [] } = this;
+ const [first] = servers;
if (first) {
this.value = first.url;
} else {
const [extra] = this[getExtraServers]();
if (extra) {
this.type = 'extra';
- this.value = extra.getAttribute('data-value') || extra.getAttribute('value');
+ this.value = extra.getAttribute('data-value') || extra.getAttribute('value') || undefined;
}
}
}
/**
* Collects information about selection from the current value.
- * @param {string} value Current value for the server URI.
- * @return {SelectionInfo} A selection info object
+ * @param value Current value for the server URI.
+ * @returns A selection info object
*/
- [getSelectionInfo](value = '') {
+ [getSelectionInfo](value = ''): SelectionInfo {
const { isCustom } = this;
// Default values.
const result = {
@@ -613,9 +589,9 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
* current selection does not exist.
* This ignores the selection when current type is not a `server`.
*
- * @param {ApiServer[]} servers List of new servers
+ * @param servers List of new servers
*/
- [updateServerSelection](servers) {
+ [updateServerSelection](servers?: ApiDefinitions.IApiServer[]): void {
if (!servers) {
this[resetSelection]();
}
@@ -629,20 +605,19 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
}
/**
- * @param {ApiServer[]} servers List of current servers
- * @param {string} value The value to look for
- * @return {number} The index of found server or -1 if none found.
+ * @param servers List of current servers
+ * @param value The value to look for
+ * @returns The index of found server or -1 if none found.
*/
- [getServerIndexByUri](servers, value) {
+ [getServerIndexByUri](servers: ApiDefinitions.IApiServer[], value?: string): number {
return servers.findIndex(s => s.url === value);
}
/**
* Handler for the listbox's change event
- * @param {CustomEvent} e
*/
- [selectionChangeHandler](e) {
- const { selectedItem } = /** @type {any} */ (e.target);
+ [selectionChangeHandler](e: CustomEvent): void {
+ const { selectedItem } = (e.target as any);
if (!selectedItem) {
return;
}
@@ -658,27 +633,26 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
* Retrieves custom base uris elements assigned to the
* custom-base-uri slot
*
- * @return {Array} Elements assigned to custom-base-uri slot
+ * @returns Elements assigned to custom-base-uri slot
*/
- [getExtraServers]() {
- const slot = this.shadowRoot.querySelector('slot');
- const items = slot ? ( /** @type HTMLSlotElement */ (slot)).assignedElements({ flatten: true }) : [];
+ [getExtraServers](): Element[] {
+ const slot = (this.shadowRoot as ShadowRoot).querySelector('slot');
+ const items = slot ? slot.assignedElements({ flatten: true }) : [];
return items.filter((elm) => elm.hasAttribute('value') || elm.hasAttribute('data-value'));
}
/**
* Handler for the input field change.
- * @param {Event} e
*/
- [customUriChangeHandler](e) {
- const { value } = /** @type HTMLInputElement */ (e.target);
+ [customUriChangeHandler](e: Event): void {
+ const { value } = e.target as HTMLInputElement;
this.value = value;
}
/**
* Resets current selection to a default value.
*/
- [resetSelection]() {
+ [resetSelection](): void {
this.value = '';
this.type = 'server';
this.selectIfNeeded();
@@ -687,23 +661,21 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
/**
* Handler for the drop down's `opened-changed` event. It sets local value
* for the opened flag.
- * @param {Event} e
*/
- [dropDownOpenedHandler](e) {
- this.opened = /** @type AnypointDropdownElement */ (e.target).opened;
+ [dropDownOpenedHandler](e: Event): void {
+ this.opened = (e.target as AnypointDropdownElement).opened;
}
/**
* Updates list of custom items rendered in the selector.
- * @param {Event} e
*/
- [listboxItemsHandler](e) {
- const value = /** @type AnypointListboxElement */ (e.target).items;
+ [listboxItemsHandler](e: Event): void {
+ const value = (e.target as AnypointListboxElement).items;
if (!Array.isArray(value) || !value.length) {
this[customItems] = [];
return;
}
- const result = [];
+ const result: string[] = [];
value.forEach((node) => {
const slot = node.getAttribute('slot');
if (slot !== 'custom-base-uri') {
@@ -718,7 +690,7 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
this[customItems] = result;
}
- render() {
+ render(): TemplateResult {
const { styles, isCustom } = this;
return html`
@@ -727,9 +699,9 @@ export default class ApiServerSelectorElement extends EventsTargetMixin(LitEleme
}
/**
- * @return {TemplateResult} Template result for the custom input.
+ * @returns Template result for the custom input.
*/
- [customUriInputTemplate]() {
+ [customUriInputTemplate](): TemplateResult {
const { anypoint, outlined, value } = this;
return html`
-
;
- /**
- * Queries the API store for the API summary object.
- */
- [querySummary](): Promise;
-
- /**
- * Queries the API store for the API summary object.
- */
- [queryServers](): Promise;
-
- /**
- * Logic executed after the summary is requested from the store.
- */
- [processSummary](): Promise;
-
- /**
- * Queries the API endpoints and methods.
- */
- [queryEndpoints](): Promise;
- [navigateHandler](e: Event): void;
- render(): TemplateResult;
- [titleTemplate](): TemplateResult|string;
- [versionTemplate](): TemplateResult|string;
-
- /**
- * @return A template for a server, servers, or no servers
- * whether it's defined in the main API definition or not.
- */
- [serversTemplate](): TemplateResult|string;
-
- /**
- * @param server Server definition
- * @return A template for a single server in the main API definition
- */
- [baseUriTemplate](server: ApiServer): TemplateResult;
-
- /**
- * @param server Server definition
- * @return Template for a server list items when there is more than one server.
- */
- [serverTemplate](server: ApiServer): TemplateResult;
-
- [protocolsTemplate](): TemplateResult|string;
- [contactInfoTemplate](): TemplateResult|string;
- [licenseTemplate](): TemplateResult|string;
- [termsOfServiceTemplate](): TemplateResult|string;
- [endpointsTemplate](): TemplateResult|string;
- [endpointTemplate](item: ApiEndPointWithOperationsListItem): TemplateResult;
- [endpointPathTemplate](item: ApiEndPointWithOperationsListItem): TemplateResult;
- [endpointNameTemplate](item: ApiEndPointWithOperationsListItem): TemplateResult|string;
- [methodTemplate](item: ApiOperationListItem, endpoint: ApiEndPointWithOperationsListItem): TemplateResult;
-}
diff --git a/src/elements/ApiSummaryElement.js b/src/elements/ApiSummaryElement.ts
similarity index 67%
rename from src/elements/ApiSummaryElement.js
rename to src/elements/ApiSummaryElement.ts
index 08067b1..82e1f27 100644
--- a/src/elements/ApiSummaryElement.js
+++ b/src/elements/ApiSummaryElement.ts
@@ -1,8 +1,13 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable class-methods-use-this */
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { html, TemplateResult, CSSResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
import { MarkdownStyles } from '@advanced-rest-client/highlight';
import '@advanced-rest-client/highlight/arc-marked.js';
+import { AmfNamespace, ApiDefinitions } from '@api-client/core/build/browser.js';
import { HttpStyles } from '@advanced-rest-client/base';
import elementStyles from './styles/ApiSummary.js';
import commonStyles from './styles/Common.js';
@@ -10,7 +15,6 @@ import {
ApiDocumentationBase,
descriptionTemplate,
processDebounce,
- // serializerValue,
} from './ApiDocumentationBase.js';
import { sanitizeHTML } from '../lib/Utils.js';
import * as UrlLib from '../lib/UrlUtils.js';
@@ -20,19 +24,7 @@ import { ReportingEvents } from '../events/ReportingEvents.js';
import { TelemetryEvents } from '../events/TelemetryEvents.js';
import { ServerEvents } from '../events/ServerEvents.js';
import { EndpointEvents } from '../events/EndpointEvents.js';
-import { ns } from '../helpers/Namespace.js';
-
-/** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('../helpers/api').ApiDocumentation} ApiDocumentation */
-/** @typedef {import('../helpers/amf').CreativeWork} CreativeWork */
-/** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
-/** @typedef {import('../helpers/api').ApiServer} ApiServer */
-/** @typedef {import('../helpers/amf').AsyncApi} AsyncApi */
-/** @typedef {import('../helpers/amf').WebApi} WebApi */
-/** @typedef {import('../helpers/amf').EndPoint} EndPoint */
-/** @typedef {import('../types').SelectionType} SelectionType */
-/** @typedef {import('../types').ApiEndPointWithOperationsListItem} ApiEndPointWithOperationsListItem */
-/** @typedef {import('../types').ApiOperationListItem} ApiOperationListItem */
+import { SelectionType } from '../types.js';
export const summaryValue = Symbol('summaryValue');
export const serversValue = Symbol('serversValue');
@@ -64,78 +56,66 @@ export const methodTemplate = Symbol('methodTemplate');
* the AMF graph model.
*/
export default class ApiSummaryElement extends ApiDocumentationBase {
- get styles() {
+ static get styles(): CSSResult[] {
return [elementStyles, commonStyles, HttpStyles.default, MarkdownStyles];
}
- /**
- * @returns {ApiSummary}
- * @readonly
- */
- get summary() {
+ [summaryValue]?: ApiDefinitions.IApiSummary;
+
+ get summary(): ApiDefinitions.IApiSummary | undefined {
return this[summaryValue];
}
- /**
- * @returns {ApiServer[]}
- * @readonly
- */
- get servers() {
+ [serversValue]?: ApiDefinitions.IApiServer[];
+
+ get servers(): ApiDefinitions.IApiServer[] | undefined {
return this[serversValue];
}
- static get properties() {
- return {
- /**
- * A property to set to override AMF's model base URI information.
- * When this property is set, the `endpointUri` property is recalculated.
- */
- baseUri: { type: String },
- /**
- * API title header level in value range from 1 to 6.
- * This is made for accessibility. It the component is used in a context
- * where headers order matters then this property is to be set to
- * arrange headers in the right order.
- *
- * @default 2
- */
- titleLevel: { type: Number },
- /**
- * A property to hide the table of contents list of endpoints.
- */
- hideToc: { type: Boolean },
- };
- }
+ /**
+ * A property to set to override AMF's model base URI information.
+ * When this property is set, the `endpointUri` property is recalculated.
+ * @attribute
+ */
+ @property({ type: String }) baseUri?: string;
+
+ /**
+ * API title header level in value range from 1 to 6.
+ * This is made for accessibility. It the component is used in a context
+ * where headers order matters then this property is to be set to
+ * arrange headers in the right order.
+ *
+ * @default 2
+ * @attribute
+ */
+ @property({ type: Number }) titleLevel?: number;
+
+ /**
+ * A property to hide the table of contents list of endpoints.
+ * @attribute
+ */
+ @property({ type: Boolean }) hideToc?: boolean;
+
+ @state() protocols?: string[];
+
+ [endpointsValue]?: ApiDefinitions.IApiEndPointWithOperationsListItem[];
+
+ [isAsyncValue]?: boolean;
constructor() {
super();
this.titleLevel = 2;
- /** @type {string[]} */
- this.protocols = undefined;
- /** @type {boolean} */
- this.hideToc = undefined;
- /** @type {string} */
- this.baseUri = undefined;
- /** @type {ApiSummary} */
- this[summaryValue] = undefined;
- /** @type {ApiServer[]} */
- this[serversValue] = undefined;
- /** @type {ApiEndPointWithOperationsListItem[]} */
- this[endpointsValue] = undefined;
- /** @type {boolean} */
- this[isAsyncValue] = undefined;
}
- connectedCallback() {
+ connectedCallback(): void {
super.connectedCallback();
this[processDebounce]();
}
/**
* Queries the graph store for the API data.
- * @returns {Promise}
*/
- async processGraph() {
+ async processGraph(): Promise {
await this[querySummary]();
await this[queryServers]();
await this[queryEndpoints]();
@@ -146,77 +126,76 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
/**
* Queries the API store for the API summary object.
*/
- async [querySummary]() {
+ async [querySummary](): Promise {
this[summaryValue] = undefined;
try {
const info = await ApiEvents.summary(this);
this[summaryValue] = info;
} catch (e) {
- TelemetryEvents.exception(this, e.message, false);
- ReportingEvents.error(this, e, `Unable to query for API summary data: ${e.message}`, this.localName);
+ const ex = e as Error;
+ TelemetryEvents.exception(this, ex.message, false);
+ ReportingEvents.error(this, ex, `Unable to query for API summary data: ${ex.message}`, this.localName);
}
}
/**
* Queries the API store for the API summary object.
*/
- async [queryServers]() {
+ async [queryServers](): Promise {
this[serversValue] = undefined;
try {
const info = await ServerEvents.query(this);
this[serversValue] = info;
} catch (e) {
- TelemetryEvents.exception(this, e.message, false);
- ReportingEvents.error(this, e, `Unable to query for API servers: ${e.message}`, this.localName);
+ const ex = e as Error;
+ TelemetryEvents.exception(this, ex.message, false);
+ ReportingEvents.error(this, ex, `Unable to query for API servers: ${ex.message}`, this.localName);
}
}
/**
* Logic executed after the summary is requested from the store.
*/
- async [processSummary]() {
+ async [processSummary](): Promise {
this[isAsyncValue] = undefined;
const { summary } = this;
if (!summary) {
return;
}
- this[isAsyncValue] = summary.types.includes(ns.aml.vocabularies.apiContract.AsyncAPI);
+ this[isAsyncValue] = summary.types.includes(AmfNamespace.aml.vocabularies.apiContract.AsyncAPI);
}
/**
* Queries the API endpoints and methods.
*/
- async [queryEndpoints]() {
+ async [queryEndpoints](): Promise {
this[endpointsValue] = undefined;
try {
const info = await EndpointEvents.list(this);
this[endpointsValue] = info;
} catch (e) {
- TelemetryEvents.exception(this, e.message, false);
- ReportingEvents.error(this, e, `Unable to query for API endpoints: ${e.message}`, this.localName);
+ const ex = e as Error;
+ TelemetryEvents.exception(this, ex.message, false);
+ ReportingEvents.error(this, ex, `Unable to query for API endpoints: ${ex.message}`, this.localName);
}
}
- /**
- * @param {Event} e
- */
- [navigateHandler](e) {
+ [navigateHandler](e: Event): void {
e.preventDefault();
- const target = /** @type HTMLElement */ (e.composedPath()[0]);
+ const target = e.composedPath()[0] as HTMLElement;
const data = target.dataset;
if (!data.id || !data.shapeType) {
return;
}
- NavigationEvents.apiNavigate(this, data.id, /** @type SelectionType */ (data.shapeType), data.parent);
+ NavigationEvents.apiNavigate(this, data.id, (data.shapeType as SelectionType), data.parent);
}
- render() {
+ render(): TemplateResult {
const { summary } = this;
if (!summary) {
return html``;
}
return html`
-
${this[titleTemplate]()}
${this[versionTemplate]()}
${this[descriptionTemplate](summary.description)}
@@ -229,25 +208,19 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
`;
}
- /**
- * @returns {TemplateResult|string}
- */
- [titleTemplate]() {
+ [titleTemplate](): TemplateResult|string {
const { summary, titleLevel } = this;
if (!summary || !summary.name) {
return '';
}
return html`
- = {
'param-pill': true,
'pill': true,
// 'text-selectable': true,
};
- css.forEach((item) => { classes[item] = true });
+ css.forEach((item) => {
+ classes[item] = true
+ });
return html`
${label}
@@ -35,10 +27,9 @@ export function pillTemplate(label, title, css=[]) {
}
/**
- * @param {TemplateResult[]} pills The pills to render
- * @returns {TemplateResult|string}
+ * @param pills The pills to render
*/
-function pillsLine(pills) {
+function pillsLine(pills: TemplateResult[]): TemplateResult | string {
if (!pills.length) {
return '';
}
@@ -50,41 +41,36 @@ function pillsLine(pills) {
}
/**
- * @param {TemplateResult[]} pills The pills to render
- * @param {TemplateResult[]} items The table properties to render.
- * @returns {TemplateResult}
+ * @param pills The pills to render
+ * @param items The table properties to render.
*/
-function pillsAndTable(pills, items) {
+function pillsAndTable(pills: TemplateResult[], items: TemplateResult[]): TemplateResult {
return html`
${pillsLine(pills)}
${items.length ? html`
`;
}
/**
- * @param {string} name The name of the parameter
- * @param {boolean=} required Whether the parameter is required
- * @param {boolean=} deprecated Whether the parameter is deprecated
- * @param {string=} paramName When set it renders the parameter name. Should be used when `name` is a `display name`.
- * @return {TemplateResult} The template for the property name value.
+ * @param name The name of the parameter
+ * @param required Whether the parameter is required
+ * @param deprecated Whether the parameter is deprecated
+ * @param paramName When set it renders the parameter name. Should be used when `name` is a `display name`.
+ * @returns The template for the property name value.
*/
-export function paramNameTemplate(name, required=false, deprecated=false, paramName) {
- const label = String(name||'');
+export function paramNameTemplate(name?: string, required = false, deprecated = false, paramName?: string): TemplateResult {
+ const label = String(name || '');
const classes = {
'param-name': true,
required,
@@ -99,10 +85,10 @@ export function paramNameTemplate(name, required=false, deprecated=false, paramN
}
/**
- * @param {string} type The parameter type label to render.
- * @return {TemplateResult|string} The template for the parameter data type.
+ * @param type The parameter type label to render.
+ * @returns The template for the parameter data type.
*/
-export function typeValueTemplate(type) {
+export function typeValueTemplate(type?: string): TemplateResult | string {
if (!type) {
return '';
}
@@ -112,10 +98,10 @@ export function typeValueTemplate(type) {
}
/**
- * @param {string} description The description to render.
- * @return {TemplateResult|string} The template for the markdown description
+ * @param description The description to render.
+ * @return The template for the markdown description
*/
-export function descriptionValueTemplate(description) {
+export function descriptionValueTemplate(description: string): TemplateResult | string {
if (!description) {
return '';
}
@@ -129,12 +115,11 @@ export function descriptionValueTemplate(description) {
}
/**
- * @param {string} label The label to render
- * @param {string} value The value to render
- * @param {string=} name Optional data-name attribute value.
- * @return {TemplateResult}
+ * @param label The label to render
+ * @param value The value to render
+ * @param name Optional data-name attribute value.
*/
-export function tablePropertyTemplate(label, value, name) {
+export function tablePropertyTemplate(label: string, value: string, name?: string): TemplateResult {
return html`
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
-*/
-import { LitElement } from 'lit-element';
-import { EventsTargetMixin } from '@anypoint-web-components/awc';
-import { ApiConsoleRequest, ApiConsoleResponse, XHRQueueItem } from '../types';
-import { default as XhrSimpleRequestTransportElement } from './XhrSimpleRequestTransportElement';
-
-/**
- * `xhr-simple-request`
- * A XHR request that works with API components.
- *
- * It handles `api-request` and `abort-api-request` custom events that control
- * request flow in API components ecosystem.
- *
- * This makes a request by using `XMLHttpRequest` object.
- *
- * ## ARC request data model
- *
- * The `api-request` custom event has to contain ARC (Advanced REST client)
- * request data model. It expects the following properties:
- * - url (`String`) - Request URL
- * - method (`String`) - Request HTTP method.
- * - headers (`String|undefined`) - HTTP headers string
- * - payload (`String|FormData|File|ArrayBuffer|undefined`) Request body
- * - id (`String`) **required**, request id. It can be any string, it must be unique.
- *
- * Note, this library does not validates the values and use them as is.
- * Any error related to validation has to be handled by the application.
- *
- * ## api-response data model
- *
- * When response is ready the element dispatches `api-response` custom event
- * with following properties in the detail object.
- * - id (`String`) - Request incoming ID
- * - request (`Object`) - Original request object from `api-request` event
- * - loadingTime (`Number`) - High precise timing used by the performance API
- * - isError (`Boolean`) - Indicates if the request is error
- * - error (`Error|undefined`) - Error object
- * - response (`Object`) - The response data:
- * - status (`Number`) - Response status code
- * - statusText (`String`) - Response status text. Can be empty string.
- * - payload (`String|Document|ArrayBuffer|Blob`) - Response body
- * - headers (`String|undefined`) - Response headers
- *
- * Please note that aborting the request always sends `api-response` event
- * with `isError` set to true.
- *
- * @fires api-response
- */
-export default class XhrSimpleRequestElement extends EventsTargetMixin(LitElement) {
- /**
- * Map of active request objects.
- * Keys in the map is the request ID and value is instance of the
- * `XhrSimpleRequestTransport`
- */
- activeRequests: Map;
- /**
- * True while loading latest started requests.
- */
- _loading: boolean;
- /**
- * Appends headers to each request handled by this component.
- *
- * Example
- *
- * ```html
- * ;
-
- /**
- * Handler for `abort-api-request` event. Aborts the request and reports
- * error response.
- * It expects the event to have `id` property set on the detail object.
- * @param {CustomEvent} e
- */
- _abortHandler(e: CustomEvent): void;
-
- /**
- * Creates a detail object for `api-response` custom event
- *
- * @param {XHRQueueItem} info Request object
- * @param {string} id Request original ID
- * @return {ApiConsoleResponse} The value of the `detail` property.
- */
- _createDetail(info: XHRQueueItem, id: string): ApiConsoleResponse;
-
- /**
- * Handles response from the transport.
- *
- * @param {string} id Request ID
- */
- _responseHandler(id: string): void;
-
- /**
- * Handles transport error
- *
- * @param err Transport error object.
- * @param id Request ID
- */
- _errorHandler(err: Error, id: string): void;
-
- /**
- * Dispatches `api-response` custom event.
- *
- * @param detail Request and response data.
- */
- _notifyResponse(detail: ApiConsoleResponse): void;
-
- /**
- * Removes request from active requests.
- *
- * @param id Request ID.
- */
- _discardRequest(id: string): void;
-}
diff --git a/src/elements/XhrSimpleRequestElement.js b/src/elements/XhrSimpleRequestElement.ts
similarity index 64%
rename from src/elements/XhrSimpleRequestElement.js
rename to src/elements/XhrSimpleRequestElement.ts
index f0a2dcc..2c2ea87 100644
--- a/src/elements/XhrSimpleRequestElement.js
+++ b/src/elements/XhrSimpleRequestElement.ts
@@ -12,17 +12,15 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
*/
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
import { EventsTargetMixin } from '@anypoint-web-components/awc';
+import { property } from 'lit/decorators.js';
import { EventTypes } from '../events/EventTypes.js';
import { RequestEvents } from '../events/RequestEvents.js';
+import { ApiConsoleHTTPResponse, ApiConsoleRequest, ApiConsoleResponse, XHRQueueItem } from '../types.js';
+import XhrSimpleRequestTransportElement from './XhrSimpleRequestTransportElement.js';
import '../../define/xhr-simple-request-transport.js';
-/** @typedef {import('./XhrSimpleRequestTransportElement').default} XhrSimpleRequestTransportElement */
-/** @typedef {import('../types').ApiConsoleRequest} ApiConsoleRequest */
-/** @typedef {import('../types').XHRQueueItem} XHRQueueItem */
-/** @typedef {import('../types').ApiConsoleResponse} ApiConsoleResponse */
-
/**
* `xhr-simple-request`
* A XHR request that works with API components.
@@ -64,69 +62,72 @@ import '../../define/xhr-simple-request-transport.js';
* with `isError` set to true.
*/
export default class XhrSimpleRequestElement extends EventsTargetMixin(LitElement) {
- static get properties() {
- return {
- /**
- * Map of active request objects.
- * Keys in the map is the request ID and value is instance of the
- * `XhrSimpleRequestTransport`
- */
- activeRequests: { type: Object },
- /**
- * True while loading latest started requests.
- */
- _loading: { type: Boolean },
- /**
- * Appends headers to each request handled by this component.
- *
- * Example
- *
- * ```html
- * ;
/**
- * True while loading latest started requests.
+ * Appends headers to each request handled by this component.
+ *
+ * Example
+ *
+ * ```html
+ * }
- */
this.activeRequests = new Map();
- /**
- * @type {string}
- */
- this.appendHeaders = undefined;
- /**
- * @type {string}
- */
- this.proxy = undefined;
- /**
- * @type {boolean}
- */
- this.proxyEncodeUrl = undefined;
}
- connectedCallback() {
+ connectedCallback(): void {
super.connectedCallback();
this.setAttribute('aria-hidden', 'true');
}
- /**
- * @param {EventTarget} node
- */
- _attachListeners(node) {
- node.addEventListener(EventTypes.Request.apiRequest, this._requestHandler);
- node.addEventListener(EventTypes.Request.abortApiRequest, this._abortHandler);
+ _attachListeners(node: EventTarget): void {
+ node.addEventListener(EventTypes.Request.apiRequest, this._requestHandler as EventListener);
+ node.addEventListener(EventTypes.Request.abortApiRequest, this._abortHandler as EventListener);
}
- /**
- * @param {EventTarget} node
- */
- _detachListeners(node) {
- node.removeEventListener(EventTypes.Request.apiRequest, this._requestHandler);
- node.removeEventListener(EventTypes.Request.abortApiRequest, this._abortHandler);
+ _detachListeners(node: EventTarget): void {
+ node.removeEventListener(EventTypes.Request.apiRequest, this._requestHandler as EventListener);
+ node.removeEventListener(EventTypes.Request.abortApiRequest, this._abortHandler as EventListener);
}
/**
* Creates instance of transport object with current configuration.
- * @return {XhrSimpleRequestTransportElement}
*/
- _createRequest() {
+ _createRequest(): XhrSimpleRequestTransportElement {
const request = document.createElement('xhr-simple-request-transport');
request.appendHeaders = this.appendHeaders;
request.proxy = this.proxy;
@@ -192,29 +170,27 @@ export default class XhrSimpleRequestElement extends EventsTargetMixin(LitElemen
/**
* Handles for the `api-request` custom event. Transports the request.
- *
- * @param {CustomEvent} e
*/
- _requestHandler(e) {
+ _requestHandler(e: CustomEvent): void {
if (e.defaultPrevented) {
return;
}
e.preventDefault();
- const opts = /** @type ApiConsoleRequest */ (e.detail);
+ const opts = e.detail as ApiConsoleRequest;
this.execute(opts);
}
- /**
- * @param {ApiConsoleRequest} request
- */
- async execute(request) {
+ async execute(request: ApiConsoleRequest): Promise {
const { id } = request;
+ if (!id) {
+ throw new Error(`The id does not exist on the request object.`);
+ }
const xhr = this._createRequest();
- const item = /** @type XHRQueueItem */ ({
+ const item: XHRQueueItem = {
startTime: new Date().getTime(),
request,
xhr,
- });
+ };
this.activeRequests.set(id, item);
this._loading = true;
try {
@@ -230,9 +206,8 @@ export default class XhrSimpleRequestElement extends EventsTargetMixin(LitElemen
* Handler for `abort-api-request` event. Aborts the request and reports
* error response.
* It expects the event to have `id` property set on the detail object.
- * @param {CustomEvent} e
*/
- _abortHandler(e) {
+ _abortHandler(e: CustomEvent): void {
if (e.defaultPrevented) {
return;
}
@@ -249,23 +224,23 @@ export default class XhrSimpleRequestElement extends EventsTargetMixin(LitElemen
/**
* Creates a detail object for `api-response` custom event
*
- * @param {XHRQueueItem} info Request object
- * @param {string} id Request original ID
- * @return {ApiConsoleResponse} The value of the `detail` property.
+ * @param info Request object
+ * @param id Request original ID
+ * @return The value of the `detail` property.
*/
- _createDetail(info, id) {
+ _createDetail(info: XHRQueueItem, id: string): ApiConsoleResponse {
const { startTime, request, xhr } = info;
const loadingTime = new Date().getTime() - startTime;
- const result = {
+ const result: ApiConsoleResponse = {
id,
request,
isError: false,
response: {
- status: xhr.status,
+ status: xhr.status || 0,
statusText: xhr.statusText,
payload: xhr.response,
headers: xhr.headers,
- },
+ } as ApiConsoleHTTPResponse,
loadingTime,
};
return result;
@@ -274,11 +249,14 @@ export default class XhrSimpleRequestElement extends EventsTargetMixin(LitElemen
/**
* Handles response from the transport.
*
- * @param {string} id Request ID
+ * @param id Request ID
*/
- _responseHandler(id) {
+ _responseHandler(id: string): void {
this._loading = false;
const info = this.activeRequests.get(id);
+ if (!info) {
+ return;
+ }
const result = this._createDetail(info, id);
RequestEvents.apiResponse(this, result);
}
@@ -286,16 +264,19 @@ export default class XhrSimpleRequestElement extends EventsTargetMixin(LitElemen
/**
* Handles transport error
*
- * @param {Object} err Transport error object.
- * @param {string} id Request ID
+ * @param err Transport error object.
+ * @param id Request ID
*/
- _errorHandler(err, id) {
+ _errorHandler(err: any, id: string): void {
this._loading = false;
let { error } = err;
if (error instanceof ProgressEvent) {
error = new Error('Unable to connect');
}
const request = this.activeRequests.get(id);
+ if (!request) {
+ return;
+ }
const result = this._createDetail(request, id);
result.isError = true;
result.error = error;
@@ -305,9 +286,9 @@ export default class XhrSimpleRequestElement extends EventsTargetMixin(LitElemen
/**
* Removes request from active requests.
*
- * @param {String} id Request ID.
+ * @param id Request ID.
*/
- _discardRequest(id) {
+ _discardRequest(id: string): void {
this.activeRequests.delete(id);
}
}
diff --git a/src/elements/XhrSimpleRequestTransportElement.d.ts b/src/elements/XhrSimpleRequestTransportElement.d.ts
deleted file mode 100644
index 0d89d38..0000000
--- a/src/elements/XhrSimpleRequestTransportElement.d.ts
+++ /dev/null
@@ -1,267 +0,0 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable class-methods-use-this */
-/**
-@license
-Copyright 2018 The Advanced REST client authors
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
-*/
-import { LitElement } from 'lit-element';
-import { FormItem } from '@advanced-rest-client/events/src/forms/FormTypes';
-import { ApiConsoleRequest } from '../types';
-
-/**
- * `xhr-simple-request`
- * A XHR request that works with API components.
- *
- * This is a copy of `iron-request` element from PolymerElements library but
- * adjusted to work with `API request` object (or ARC request object).
- *
- * It also handles custom events related to request flow.
- */
-export default class XhrSimpleRequestTransportElement extends LitElement {
- /**
- * A reference to the XMLHttpRequest instance used to generate the
- * network request.
- */
- _xhr: XMLHttpRequest;
-
- /**
- * A reference to the parsed response body, if the `xhr` has completely
- * resolved.
- */
- _response: any;
-
- /**
- * A reference to response headers, if the `xhr` has completely
- * resolved.
- */
- _headers: string
-
- /**
- * A reference to the status code, if the `xhr` has completely resolved.
- */
- _status: number;
-
- /**
- * A reference to the status text, if the `xhr` has completely resolved.
- */
- _statusText: string;
- /**
- * A promise that resolves when the `xhr` response comes back, or rejects
- * if there is an error before the `xhr` completes.
- * The resolve callback is called with the original request as an argument.
- * By default, the reject callback is called with an `Error` as an argument.
- * If `rejectWithRequest` is true, the reject callback is called with an
- * object with two keys: `request`, the original request, and `error`, the
- * error object.
- */
- _completes: Promise;
-
- /**
- * Aborted will be true if an abort of the request is attempted.
- */
- _aborted: boolean;
-
- /**
- * It is true when the browser fired an error event from the
- * XHR object (mainly network errors).
- */
- _error: boolean;
-
- /**
- * TimedOut will be true if the XHR threw a timeout event.
- */
- _timedOut: boolean;
- /**
- * Appends headers to each request handled by this component.
- *
- * Example
- *
- * ```html
- * ;
-
-
- /**
- * Aborted will be true if an abort of the request is attempted.
- */
- get aborted(): boolean;
-
- /**
- * Error will be true if the browser fired an error event from the
- * XHR object (mainly network errors).
- */
- get error(): boolean;
-
- /**
- * Aborted will be true if an abort of the request is attempted.
- */
- get timedOut(): boolean;
-
- resolveCompletes: Function;
- rejectCompletes: Function;
-
- constructor();
-
- connectedCallback(): void;
-
- /**
- * Succeeded is true if the request succeeded. The request succeeded if it
- * loaded without error, wasn't aborted, and the status code is ≥ 200, and
- * < 300, or if the status code is 0.
- *
- * The status code 0 is accepted as a success because some schemes - e.g.
- * file:// - don't provide status codes.
- */
- get succeeded(): boolean;
-
- /**
- * Sends a request.
- *
- * @param {ApiConsoleRequest} options API request object
- * @return {Promise}
- */
- send(options: ApiConsoleRequest): Promise;
-
- /**
- * Applies headers to the XHR object.
- *
- * @param {XMLHttpRequest} xhr
- * @param {string=} headers HTTP headers string
- * @param {boolean=} isFormData Prevents setting content-type header for
- * Multipart requests.
- */
- _applyHeaders(xhr: XMLHttpRequest, headers?: string, isFormData?: boolean): void;
-
- /**
- * Handler for XHR `error` event.
- *
- * @param {ProgressEvent} error https://xhr.spec.whatwg.org/#event-xhr-error
- */
- _errorHandler(error): void;
-
- /**
- * Handler for XHR `timeout` event.
- *
- * @param {ProgressEvent} error https://xhr.spec.whatwg.org/#event-xhr-timeout
- */
- _timeoutHandler(error): void;
-
- /**
- * Handler for XHR `abort` event.
- */
- _abortHandler(): void;
-
- /**
- * Handler for XHR `loadend` event.
- */
- _loadEndHandler(): void;
-
- /**
- * Aborts the request.
- */
- abort(): void;
-
- /**
- * Updates the status code and status text.
- */
- _updateStatus(): void;
-
- /**
- * Attempts to parse the response body of the XHR. If parsing succeeds,
- * the value returned will be deserialized based on the `responseType`
- * set on the XHR.
- *
- * TODO: The `responseType` will always be empty string because
- * send function does not sets the response type.
- * API request object does not support this property. However in the future
- * it may actually send this information extracted from the AMF model.
- * This function will be ready to handle this case.
- *
- * @return The parsed response, or undefined if there was an empty response or parsing failed.
- */
- parseResponse(): any;
-
- /**
- * Collects response headers string from the XHR object.
- *
- * @return {string|undefined}
- */
- collectHeaders(): string|undefined;
-
- /**
- * Computes value for `_addHeaders` property.
- * A list of headers to add to each request.
- * @param headers Headers string
- */
- _computeAddHeaders(headers: string): FormItem[]|undefined;
-
- /**
- * Sets the proxy URL if the `proxy` property is set.
- * @param {string} url Request URL to alter if needed.
- * @return {string} The URL to use with request.
- */
- _appendProxy(url: string): string;
-}
diff --git a/src/elements/XhrSimpleRequestTransportElement.js b/src/elements/XhrSimpleRequestTransportElement.ts
similarity index 57%
rename from src/elements/XhrSimpleRequestTransportElement.js
rename to src/elements/XhrSimpleRequestTransportElement.ts
index 6ee93d1..9c9e72f 100644
--- a/src/elements/XhrSimpleRequestTransportElement.js
+++ b/src/elements/XhrSimpleRequestTransportElement.ts
@@ -13,11 +13,10 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
*/
-import { LitElement } from 'lit-element';
-import { HeadersParser } from '@advanced-rest-client/base/api.js';
-
-/** @typedef {import('@advanced-rest-client/events').FormTypes.FormItem} FormItem */
-/** @typedef {import('../types').ApiConsoleRequest} ApiConsoleRequest */
+import { LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { Headers } from '@api-client/core/build/browser.js';
+import { ApiConsoleRequest } from '../types.js';
/**
* `xhr-simple-request`
@@ -29,99 +28,100 @@ import { HeadersParser } from '@advanced-rest-client/base/api.js';
* It also handles custom events related to request flow.
*/
export default class XhrSimpleRequestTransportElement extends LitElement {
- static get properties() {
- return {
- /**
- * A reference to the XMLHttpRequest instance used to generate the
- * network request.
- */
- _xhr: { type: Object },
-
- /**
- * A reference to the parsed response body, if the `xhr` has completely
- * resolved.
- */
- _response: { type: Object },
-
- /**
- * A reference to response headers, if the `xhr` has completely
- * resolved.
- * @default undefined
- */
- _headers: { type: Object },
-
- /**
- * A reference to the status code, if the `xhr` has completely resolved.
- */
- _status: { type: Number },
-
- /**
- * A reference to the status text, if the `xhr` has completely resolved.
- */
- _statusText: { type: String },
- /**
- * A promise that resolves when the `xhr` response comes back, or rejects
- * if there is an error before the `xhr` completes.
- * The resolve callback is called with the original request as an argument.
- * By default, the reject callback is called with an `Error` as an argument.
- * If `rejectWithRequest` is true, the reject callback is called with an
- * object with two keys: `request`, the original request, and `error`, the
- * error object.
- */
- _completes: { type: Object },
-
- /**
- * Aborted will be true if an abort of the request is attempted.
- */
- _aborted: { type: Boolean },
-
- /**
- * It is true when the browser fired an error event from the
- * XHR object (mainly network errors).
- */
- _error: { type: Boolean },
-
- /**
- * TimedOut will be true if the XHR threw a timeout event.
- */
- _timedOut: { type: Boolean },
- /**
- * Appends headers to each request handled by this component.
- *
- * Example
- *
- * ```html
- * ;
- /**
- * Reads the current API's protocols.
- * @param target The node on which to dispatch the event
- */
- protocols(target: EventTarget): Promise;
- /**
- * Reads the current API's version.
- * @param target The node on which to dispatch the event
- */
- version(target: EventTarget): Promise;
- /**
- * Reads the meta information about the currently loaded document from the store.
- * @param target The node on which to dispatch the event
- */
- documentMeta(target: EventTarget): Promise;
-}
-
-export declare const ApiEvents: Readonly;
diff --git a/src/events/ApiEvents.js b/src/events/ApiEvents.js
deleted file mode 100644
index c225e24..0000000
--- a/src/events/ApiEvents.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { EventTypes } from './EventTypes.js';
-import { ApiStoreContextEvent } from './BaseEvents.js';
-
-/** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
-/** @typedef {import('../types').DocumentMeta} DocumentMeta */
-
-export const ApiEvents = {
- /**
- * Reads basic info about the API.
- * @param {EventTarget} target The node on which to dispatch the event
- * @returns {Promise}
- */
- summary: async (target) => {
- const e = new ApiStoreContextEvent(EventTypes.Api.summary);
- target.dispatchEvent(e);
- return e.detail.result;
- },
-
- /**
- * Reads the current API's protocols.
- * @param {EventTarget} target The node on which to dispatch the event
- * @returns {Promise}
- */
- protocols: async (target) => {
- const e = new ApiStoreContextEvent(EventTypes.Api.protocols);
- target.dispatchEvent(e);
- return e.detail.result;
- },
-
- /**
- * Reads the current API's version.
- * @param {EventTarget} target The node on which to dispatch the event
- * @returns {Promise}
- */
- version: async (target) => {
- const e = new ApiStoreContextEvent(EventTypes.Api.version);
- target.dispatchEvent(e);
- return e.detail.result;
- },
-
- /**
- * Reads the meta information about the currently loaded document from the store.
- * @param {EventTarget} target The node on which to dispatch the event
- * @returns {Promise}
- */
- documentMeta: async (target) => {
- const e = new ApiStoreContextEvent(EventTypes.Api.documentMeta);
- target.dispatchEvent(e);
- return e.detail.result;
- },
-}
-Object.freeze(ApiEvents);
diff --git a/src/events/ApiEvents.ts b/src/events/ApiEvents.ts
new file mode 100644
index 0000000..accbf1d
--- /dev/null
+++ b/src/events/ApiEvents.ts
@@ -0,0 +1,47 @@
+import { ApiDefinitions } from '@api-client/core/build/browser.js';
+import { EventTypes } from './EventTypes.js';
+import { ApiStoreContextEvent } from './BaseEvents.js';
+import { DocumentMeta } from '../types.js';
+
+export const ApiEvents = {
+ /**
+ * Reads basic info about the API.
+ * @param target The node on which to dispatch the event
+ */
+ summary: async (target: EventTarget): Promise => {
+ const e = new ApiStoreContextEvent(EventTypes.Api.summary);
+ target.dispatchEvent(e);
+ return e.detail.result as Promise;
+ },
+
+ /**
+ * Reads the current API's protocols.
+ * @param target The node on which to dispatch the event
+ */
+ protocols: async (target: EventTarget): Promise => {
+ const e = new ApiStoreContextEvent(EventTypes.Api.protocols);
+ target.dispatchEvent(e);
+ return e.detail.result as Promise;
+ },
+
+ /**
+ * Reads the current API's version.
+ * @param target The node on which to dispatch the event
+ */
+ version: async (target: EventTarget): Promise => {
+ const e = new ApiStoreContextEvent(EventTypes.Api.version);
+ target.dispatchEvent(e);
+ return e.detail.result as Promise;
+ },
+
+ /**
+ * Reads the meta information about the currently loaded document from the store.
+ * @param target The node on which to dispatch the event
+ */
+ documentMeta: async (target: EventTarget): Promise => {
+ const e = new ApiStoreContextEvent(EventTypes.Api.documentMeta);
+ target.dispatchEvent(e);
+ return e.detail.result as Promise;
+ },
+}
+Object.freeze(ApiEvents);
diff --git a/src/events/BaseEvents.js b/src/events/BaseEvents.js
deleted file mode 100644
index 37bb446..0000000
--- a/src/events/BaseEvents.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/* eslint-disable max-classes-per-file */
-
-/**
- * A base class to use with store events that do not expect a result.
- */
-export class ApiStoreContextVoidEvent extends CustomEvent {
- /**
- * @param {string} type The event type
- * @param {any=} detail The optional detail object. It adds object's properties to the `detail` with the `result` property.
- */
- constructor(type, detail={}) {
- super(type, {
- bubbles: true,
- composed: true,
- cancelable: true,
- detail,
- });
- }
-}
-
-
-/**
- * A base class to use with store events.
- */
-export class ApiStoreContextEvent extends CustomEvent {
- /**
- * @param {string} type The event type
- * @param {any=} detail The optional detail object. It adds object's properties to the `detail` with the `result` property.
- */
- constructor(type, detail={}) {
- super(type, {
- bubbles: true,
- composed: true,
- cancelable: true,
- detail: {
- result: undefined,
- ...detail,
- }
- });
- }
-}
-
-/**
- * An event to be used to read an object from the API store.
- */
-export class ApiStoreReadEvent extends ApiStoreContextEvent {
- /**
- * @param {string} type The type of the event
- * @param {string} id The domain id of the object to read
- * @param {string=} parent The domain id of the parent object (like endpoint for an operation).
- */
- constructor(type, id, parent) {
- super(type, { id, parent });
- }
-}
-
-/**
- * An event to be used to read a list of object from the API store.
- */
-export class ApiStoreReadBulkEvent extends ApiStoreContextEvent {
- /**
- * @param {string} type The type of the event
- * @param {string[]} ids The list of domain ids to read. These must be of the same domain type.
- */
- constructor(type, ids) {
- super(type, { ids });
- }
-}
diff --git a/src/events/BaseEvents.d.ts b/src/events/BaseEvents.ts
similarity index 61%
rename from src/events/BaseEvents.d.ts
rename to src/events/BaseEvents.ts
index 620c653..1368d2b 100644
--- a/src/events/BaseEvents.d.ts
+++ b/src/events/BaseEvents.ts
@@ -1,53 +1,28 @@
-/**
- * A base class to use with store events that do not expect a result.
- */
-export declare class ApiStoreContextVoidEvent extends CustomEvent {
- /**
- * @param type The event type
- * @param detail The optional detail object. It adds object's properties to the `detail` with the `result` property.
- */
- constructor(type: string, detail?: any);
-}
+/* eslint-disable max-classes-per-file */
/**
- * A base class to use with store events.
+ * A base class to use with store events that do not expect a result.
*/
-export declare class ApiStoreContextEvent extends CustomEvent> {
+export class ApiStoreContextVoidEvent extends CustomEvent {
/**
* @param type The event type
* @param detail The optional detail object. It adds object's properties to the `detail` with the `result` property.
*/
- constructor(type: string, detail?: any);
-}
-
-/**
- * An event to be used to read an object from the API store.
- */
-export class ApiStoreReadEvent extends CustomEvent> {
- /**
- * @param type The type of the event
- * @param id The domain id of the object to read
- * @param parent The domain id of the parent object (like endpoint for an operation).
- */
- constructor(type: string, id: string, parent?: string);
-}
-
-/**
- * An event to be used to read a list of object from the API store.
- */
-export class ApiStoreReadBulkEvent extends CustomEvent> {
- /**
- * @param type The type of the event
- * @param ids The list of domain ids to read. These must be of the same domain type.
- */
- constructor(type: string, ids: string[]);
+ constructor(type: string, detail?: T) {
+ super(type, {
+ bubbles: true,
+ composed: true,
+ cancelable: true,
+ detail,
+ });
+ }
}
/**
* Base event detail definition for the events that returns a `result`
* property on the `detail` object
*/
-export declare interface StoreEventDetailWithResult {
+export interface StoreEventDetailWithResult {
/**
* This property is set by the store, a promise resolved when the operation finish
* with the corresponding result.
@@ -55,10 +30,27 @@ export declare interface StoreEventDetailWithResult {
result?: Promise | null;
}
+
/**
- * A detail for an event that returns a void result.
+ * A base class to use with store events.
*/
-export declare interface StoreEventDetailVoid extends StoreEventDetailWithResult {
+export class ApiStoreContextEvent extends CustomEvent> {
+ /**
+ * @param type The event type
+ * @param detail The optional detail object. It adds object's properties to the `detail` with the `result` property.
+ */
+ constructor(type: string, detail?: T) {
+ const d = detail || {};
+ super(type, {
+ bubbles: true,
+ composed: true,
+ cancelable: true,
+ detail: {
+ result: undefined,
+ ...d,
+ }
+ });
+ }
}
export declare interface ApiStoreReadEventDetail extends StoreEventDetailWithResult {
@@ -72,9 +64,36 @@ export declare interface ApiStoreReadEventDetail extends StoreEventDetailWith
parent?: string;
}
+/**
+ * An event to be used to read an object from the API store.
+ */
+export class ApiStoreReadEvent extends ApiStoreContextEvent> {
+ /**
+ * @param type The type of the event
+ * @param id The domain id of the object to read
+ * @param parent The domain id of the parent object (like endpoint for an operation).
+ */
+ constructor(type: string, id: string, parent?: string) {
+ super(type, { id, parent });
+ }
+}
+
export declare interface ApiStoreReadBulkEventDetail extends StoreEventDetailWithResult {
/**
* The list of domain ids to read.
*/
- ids: string;
+ ids: string[];
+}
+
+/**
+ * An event to be used to read a list of object from the API store.
+ */
+export class ApiStoreReadBulkEvent extends ApiStoreContextEvent> {
+ /**
+ * @param type The type of the event
+ * @param ids The list of domain ids to read. These must be of the same domain type.
+ */
+ constructor(type: string, ids: string[]) {
+ super(type, { ids });
+ }
}
diff --git a/src/events/DocumentationEvents.d.ts b/src/events/DocumentationEvents.d.ts
deleted file mode 100644
index f19eef3..0000000
--- a/src/events/DocumentationEvents.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ApiDocumentation } from '../helpers/api';
-
-declare interface IDocumentationEvents {
- /**
- * Lists the documentation definitions for the API.
- * @param target The node on which to dispatch the event
- * @returns The list of documentations.
- */
- list(target: EventTarget): Promise;
- /**
- * Reads RAML's/OAS's documentation page.
- * @param target The node on which to dispatch the event
- * @param id The domain id of the documentation.
- */
- get(target: EventTarget, id: string): Promise;
-}
-
-export declare const DocumentationEvents: Readonly;
diff --git a/src/events/DocumentationEvents.js b/src/events/DocumentationEvents.js
deleted file mode 100644
index ac5fac6..0000000
--- a/src/events/DocumentationEvents.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { EventTypes } from './EventTypes.js';
-import { ApiStoreReadEvent, ApiStoreContextEvent } from './BaseEvents.js';
-
-/** @typedef {import('../helpers/api').ApiDocumentation} ApiDocumentation */
-
-export const DocumentationEvents = {
- /**
- * Reads RAML's/OAS's documentation page.
- * @param {EventTarget} target The node on which to dispatch the event
- * @param {string} id The domain id of the documentation.
- * @returns {Promise}
- */
- get: async (target, id) => {
- const e = new ApiStoreReadEvent(EventTypes.Documentation.get, id);
- target.dispatchEvent(e);
- return e.detail.result;
- },
- /**
- * Lists the documentation definitions for the API.
- * @param {EventTarget} target The node on which to dispatch the event
- * @returns {Promise} The list of documentations.
- */
- list: async (target) => {
- const e = new ApiStoreContextEvent(EventTypes.Documentation.list);
- target.dispatchEvent(e);
- return e.detail.result;
- },
-}
-Object.freeze(DocumentationEvents);
diff --git a/src/events/DocumentationEvents.ts b/src/events/DocumentationEvents.ts
new file mode 100644
index 0000000..9a580c7
--- /dev/null
+++ b/src/events/DocumentationEvents.ts
@@ -0,0 +1,29 @@
+import { ApiDefinitions } from '@api-client/core/build/browser.js';
+import { EventTypes } from './EventTypes.js';
+import { ApiStoreReadEvent, ApiStoreContextEvent } from './BaseEvents.js';
+
+/** @typedef {import('../helpers/api').ApiDocumentation} ApiDocumentation */
+
+export const DocumentationEvents = {
+ /**
+ * Reads RAML's/OAS's documentation page.
+ * @param target The node on which to dispatch the event
+ * @param id The domain id of the documentation.
+ */
+ get: async (target: EventTarget, id: string): Promise => {
+ const e = new ApiStoreReadEvent(EventTypes.Documentation.get, id);
+ target.dispatchEvent(e);
+ return e.detail.result as Promise;
+ },
+ /**
+ * Lists the documentation definitions for the API.
+ * @param target The node on which to dispatch the event
+ * @returns The list of documentations.
+ */
+ list: async (target: EventTarget): Promise => {
+ const e = new ApiStoreContextEvent(EventTypes.Documentation.list);
+ target.dispatchEvent(e);
+ return e.detail.result as Promise;
+ },
+}
+Object.freeze(DocumentationEvents);
diff --git a/src/events/EndpointEvents.d.ts b/src/events/EndpointEvents.d.ts
deleted file mode 100644
index ae0466d..0000000
--- a/src/events/EndpointEvents.d.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ApiEndPointWithOperationsListItem } from '../types';
-import { ApiEndPoint } from '../helpers/api';
-
-declare interface IEndpointEvents {
- /**
- * Reads the endpoint model from the store.
- * @param target The node on which to dispatch the event
- * @param id The domain id of the endpoint.
- */
- get(target: EventTarget, id: string): Promise;
- /**
- * Reads the endpoint model from the store by the path value.
- * @param target The node on which to dispatch the event
- * @param path The path of the endpoint.
- */
- byPath(target: EventTarget, path: string): Promise;
- /**
- * List all endpoints in the API.
- * @param target The node on which to dispatch the event
- */
- list(target: EventTarget): Promise;
-}
-
-export declare const EndpointEvents: Readonly;
diff --git a/src/events/EndpointEvents.js b/src/events/EndpointEvents.ts
similarity index 50%
rename from src/events/EndpointEvents.js
rename to src/events/EndpointEvents.ts
index 65ed75a..5fa1e94 100644
--- a/src/events/EndpointEvents.js
+++ b/src/events/EndpointEvents.ts
@@ -1,3 +1,4 @@
+import { ApiDefinitions } from '@api-client/core/build/browser.js';
import { EventTypes } from './EventTypes.js';
import { ApiStoreContextEvent, ApiStoreReadEvent } from './BaseEvents.js';
@@ -7,35 +8,32 @@ import { ApiStoreContextEvent, ApiStoreReadEvent } from './BaseEvents.js';
export const EndpointEvents = {
/**
* Reads the endpoint model from the store.
- * @param {EventTarget} target The node on which to dispatch the event
- * @param {string} id The domain id of the endpoint.
- * @returns {Promise}
+ * @param target The node on which to dispatch the event
+ * @param id The domain id of the endpoint.
*/
- get: async (target, id) => {
+ get: async (target: EventTarget, id: string): Promise => {
const e = new ApiStoreReadEvent(EventTypes.Endpoint.get, id);
target.dispatchEvent(e);
- return e.detail.result;
+ return e.detail.result as Promise;
},
/**
* Reads the endpoint model from the store by the path value.
- * @param {EventTarget} target The node on which to dispatch the event
- * @param {string} path The path of the endpoint.
- * @returns {Promise}
+ * @param target The node on which to dispatch the event
+ * @param path The path of the endpoint.
*/
- byPath: async (target, path) => {
+ byPath: async (target: EventTarget, path: string): Promise => {
const e = new ApiStoreReadEvent(EventTypes.Endpoint.byPath, path);
target.dispatchEvent(e);
- return e.detail.result;
+ return e.detail.result as Promise;
},
/**
* Lists all endpoints with operations included into the result.
- * @param {EventTarget} target The node on which to dispatch the event
- * @returns {Promise}
+ * @param target The node on which to dispatch the event
*/
- list: async (target) => {
+ list: async (target: EventTarget): Promise => {
const e = new ApiStoreContextEvent(EventTypes.Endpoint.list);
target.dispatchEvent(e);
- return e.detail.result;
+ return e.detail.result as Promise;
},
};
diff --git a/src/events/EventTypes.d.ts b/src/events/EventTypes.d.ts
deleted file mode 100644
index ffbcc68..0000000
--- a/src/events/EventTypes.d.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-interface Security {
- settingsChanged: string;
- get: string;
- getRequirement: string;
- list: string;
-}
-interface Request {
- apiRequest: string;
- apiRequestLegacy: string;
- abortApiRequest: string;
- abortApiRequestLegacy: string;
- apiResponse: string;
- apiResponseLegacy: string;
- redirectUriChange: string;
- redirectUriChangeLegacy: string;
- populateAnnotatedFields: string;
- populateAnnotatedFieldsLegacy: string;
- get: string;
-}
-
-interface Response {
- get: string;
-}
-
-interface Server {
- serverChange: string;
- serverCountChange: string;
- query: string;
-}
-
-declare interface ApiEvents {
- summary: string;
- protocols: string;
- version: string;
- documentMeta: string;
-}
-declare interface Navigation {
- apiNavigate: string;
- navigateExternal: string;
-}
-
-declare interface EndpointEvents {
- get: string;
- byPath: string;
- list: string;
-}
-
-declare interface OperationEvents {
- get: string;
- getParent: string;
-}
-
-declare interface ReportingEvents {
- error: string;
-}
-
-declare interface TelemetryEvents {
- view: string;
- event: string;
- exception: string;
- social: string;
- timing: string;
-}
-
-declare interface StoreEvents {
- graphChange: string;
-}
-
-declare interface DocumentationEvents {
- get: string;
- list: string;
-}
-
-declare interface PayloadEvents {
- get: string;
-}
-
-declare interface TypeEvents {
- get: string;
- list: string;
-}
-
-interface IEventTypes {
- Security: Readonly;
- Request: Readonly;
- Response: Readonly;
- Payload: Readonly;
- Server: Readonly;
- Api: Readonly;
- Navigation: Readonly;
- Endpoint: Readonly;
- Operation: Readonly;
- Reporting: Readonly
+
`;
}
- /**
- * @param {ApiEndPointWithOperationsListItem} item
- * @returns {TemplateResult}
- */
- [endpointPathTemplate](item) {
+ [endpointPathTemplate](item: ApiDefinitions.IApiEndPointWithOperationsListItem): TemplateResult {
return html`
${item.path}
`;
}
- /**
- * @param {ApiEndPointWithOperationsListItem} item
- * @returns {TemplateResult|string}
- */
- [endpointNameTemplate](item) {
+ [endpointNameTemplate](item: ApiDefinitions.IApiEndPointWithOperationsListItem): TemplateResult|string {
if (!item.name) {
return '';
}
@@ -445,19 +402,14 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
${item.name}
${summary.name}
`;
}
- /**
- * @returns {TemplateResult|string}
- */
- [versionTemplate]() {
+ [versionTemplate](): TemplateResult|string {
const { summary } = this;
if (!summary || !summary.version) {
return '';
@@ -260,10 +233,10 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
}
/**
- * @return {TemplateResult|String} A template for a server, servers, or no servers
+ * @returns A template for a server, servers, or no servers
* whether it's defined in the main API definition or not.
*/
- [serversTemplate]() {
+ [serversTemplate](): TemplateResult|string {
const { servers, baseUri } = this;
if (baseUri) {
return this[baseUriTemplate](undefined);
@@ -284,10 +257,10 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
}
/**
- * @param {ApiServer} server Server definition
- * @return {TemplateResult} A template for a single server in the main API definition
+ * @param server Server definition
+ * @returns A template for a single server in the main API definition
*/
- [baseUriTemplate](server) {
+ [baseUriTemplate](server?: ApiDefinitions.IApiServer): TemplateResult {
const { baseUri, protocols } = this;
const uri = UrlLib.computeApiBaseUri({ baseUri, server, protocols, });
return html`
@@ -298,11 +271,10 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
}
/**
- * @param {ApiServer} server Server definition
- * @return {TemplateResult} Template for a server list items when there is more
- * than one server.
+ * @param server Server definition
+ * @returns Template for a server list items when there is more than one server.
*/
- [serverTemplate](server) {
+ [serverTemplate](server: ApiDefinitions.IApiServer): TemplateResult {
const { baseUri, protocols } = this;
const uri = UrlLib.computeApiBaseUri({ baseUri, server, protocols, });
const { description } = server;
@@ -313,10 +285,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
`;
}
- /**
- * @return {TemplateResult|String}
- */
- [protocolsTemplate]() {
+ [protocolsTemplate](): TemplateResult|string {
const { summary } = this;
if (!summary || !summary.schemes || !summary.schemes.length) {
return '';
@@ -328,7 +297,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
${result}
`;
}
- [contactInfoTemplate]() {
+ [contactInfoTemplate](): TemplateResult|string {
const { summary } = this;
if (!summary || !summary.provider || !summary.provider.name) {
return '';
@@ -348,7 +317,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
`;
}
- [licenseTemplate]() {
+ [licenseTemplate](): TemplateResult|string {
const { summary } = this;
if (!summary || !summary.license) {
return '';
@@ -369,7 +338,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
`;
}
- [termsOfServiceTemplate]() {
+ [termsOfServiceTemplate](): TemplateResult|string {
const { summary } = this;
if (!summary || !summary.termsOfService || !summary.termsOfService.length) {
return '';
@@ -383,11 +352,11 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
`;
}
- [endpointsTemplate]() {
+ [endpointsTemplate](): TemplateResult|string {
if (this.hideToc) {
return '';
}
- const endpoints = /** @type {ApiEndPointWithOperationsListItem[]} */ (this[endpointsValue]);
+ const endpoints = this[endpointsValue] as ApiDefinitions.IApiEndPointWithOperationsListItem[];
if (!endpoints || !endpoints.length) {
return '';
}
@@ -402,11 +371,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
`;
}
- /**
- * @param {ApiEndPointWithOperationsListItem} item
- * @returns {TemplateResult}
- */
- [endpointTemplate](item) {
+ [endpointTemplate](item: ApiDefinitions.IApiEndPointWithOperationsListItem): TemplateResult {
const { operations=[] } = item;
const ops = operations.length ? operations.map((op) => this[methodTemplate](op, item)) : '';
return html`
@@ -418,26 +383,18 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
${item.path}
`; } - /** - * @param {ApiOperationListItem} item - * @param {ApiEndPointWithOperationsListItem} endpoint - * @returns {TemplateResult} - */ - [methodTemplate](item, endpoint) { + [methodTemplate](item: ApiDefinitions.IApiOperationListItem, endpoint: ApiDefinitions.IApiEndPointWithOperationsListItem): TemplateResult { return html` ${item.method} `; } diff --git a/src/elements/SchemaCommonTemplates.d.ts b/src/elements/SchemaCommonTemplates.d.ts deleted file mode 100644 index 461622e..0000000 --- a/src/elements/SchemaCommonTemplates.d.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { TemplateResult } from "lit-element"; -import { ApiShapeUnion, ApiScalarShape, ApiUnionShape, ApiFileShape } from '../helpers/api'; -/** - * @param label The label to render. - * @param title The value of the title attribute - * @param [css=[]] The list of class names to add - * @return The template for a pill visualization object - */ -export function pillTemplate(label: string, title: string, css?: string[]): TemplateResult; - -/** - * @param name The name of the parameter - * @param required Whether the parameter is required - * @param deprecated Whether the parameter is deprecated - * @param paramName When set it renders the parameter name. Should be used when `name` is a `display name`. - * @return The template for the property name value. - */ -export function paramNameTemplate(name: string, required?: boolean, deprecated?: boolean, paramName?: string): TemplateResult; - -/** - * @param type The parameter type label to render. - * @return The template for the parameter data type. - */ -export function typeValueTemplate(type: string): TemplateResult; - -/** - * @param description The description to render. - * @return The template for the markdown description - */ -export function descriptionValueTemplate(description: string): TemplateResult; - -/** - * @param label The label to render - * @param value The value to render - * @param name Optional data-name attribute value. - */ -export function tablePropertyTemplate(label: string, value: string, name?: string): TemplateResult; - -export function detailSectionTemplate(items: TemplateResult[]): TemplateResult; - -/** - * @param noDetail When true it always render all properties, without the detail element. - * @return The template for the details of the scalar schema - */ -export function scalarDetailsTemplate(schema: ApiScalarShape, noDetail?: boolean): TemplateResult; - -/** - * @return The template for the details of the Union schema - */ -export function unionDetailsTemplate(schema: ApiUnionShape): TemplateResult; - -/** - * @param noDetail When true it always render all properties, without the detail element. - * @return The template for the details of the File schema - */ -export function fileDetailsTemplate(schema: ApiFileShape, noDetail?: boolean): TemplateResult; - -/** - * @param schema The schema definition. - * @return The template for the property details. - */ -export function detailsTemplate(schema: ApiShapeUnion): TemplateResult|string; diff --git a/src/elements/SchemaCommonTemplates.js b/src/elements/SchemaCommonTemplates.ts similarity index 70% rename from src/elements/SchemaCommonTemplates.js rename to src/elements/SchemaCommonTemplates.ts index 811b8e6..d2041c2 100644 --- a/src/elements/SchemaCommonTemplates.js +++ b/src/elements/SchemaCommonTemplates.ts @@ -1,33 +1,25 @@ -import { html } from "lit-element"; -import { classMap } from "lit-html/directives/class-map"; -import { ifDefined } from "lit-html/directives/if-defined"; -import { ns } from '../helpers/Namespace.js'; +/* eslint-disable default-param-last */ +import { html, TemplateResult } from "lit"; +import { classMap } from "lit/directives/class-map"; +import { ifDefined } from "lit/directives/if-defined"; +import { AmfShapes, AmfNamespace } from '@api-client/core/build/browser.js'; import '../../define/api-annotation-document.js'; -/** @typedef {import('lit-element').TemplateResult} TemplateResult */ -/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */ -/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */ -/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */ -/** @typedef {import('../helpers/api').ApiScalarNode} ApiScalarNode */ -/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */ -/** @typedef {import('../helpers/api').ApiUnionShape} ApiUnionShape */ -/** @typedef {import('../helpers/api').ApiFileShape} ApiFileShape */ -/** @typedef {import('../helpers/api').ApiDataNodeUnion} ApiDataNodeUnion */ -/** @typedef {import('../helpers/api').ApiRecursiveShape} ApiRecursiveShape */ - /** - * @param {string} label The label to render. - * @param {string} title The value of the title attribute - * @param {string[]=} [css=[]] The list of class names to add - * @return {TemplateResult} The template for a pill visualization object + * @param label The label to render. + * @param title The value of the title attribute + * @param css The list of class names to add + * @returns The template for a pill visualization object */ -export function pillTemplate(label, title, css=[]) { - const classes = { +export function pillTemplate(label: string, title: string, css: string[] = []): TemplateResult { + const classes: Record${items}
` : ''}
`;
}
-/**
- * @param {ApiDataNodeUnion[]} values
- * @returns {TemplateResult}
- */
-function enumValuesTemplate(values) {
+function enumValuesTemplate(values: AmfShapes.IApiDataNodeUnion[]): TemplateResult {
return html`
Enum:
-
- ${values.map((item) => html`
- ${/** @type ApiScalarNode */ (item).value} `)} + ${values.map((item) => html`
- ${(item as AmfShapes.IApiScalarNode).value} `)}
${label}:
@@ -143,7 +128,7 @@ export function tablePropertyTemplate(label, value, name) {
`;
}
-export function detailSectionTemplate(items) {
+export function detailSectionTemplate(items: TemplateResult[]): TemplateResult {
return html`