@api-client/ui 0.2.0 → 0.2.2

package/src/elements/amf/ApiOperationDocument.styles.ts

@@ -1,67 +0,0 @@
-import { css } from 'lit'
-import commonStyles from './styles/Common.js'
-import schemaStyles from './styles/SchemaCommon.js'
-import MarkdownStyles from '../highlight/MarkdownStyles.js'
-import surface from '../../styles/m3/surface.module.js'
-
-export default [
-  commonStyles,
-  MarkdownStyles,
-  schemaStyles,
-  surface,
-  css`
-    :host {
-      display: block;
-    }
-
-    .operation-header {
-      margin-bottom: 32px;
-    }
-
-    .operation-title {
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-    }
-
-    .operation-title .label {
-      font-family: var(--md-sys-typescale-headline-medium-font);
-      font-weight: var(--md-sys-typescale-headline-medium-weight);
-      font-size: var(--md-sys-typescale-headline-medium-size);
-      letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
-      line-height: var(--md-sys-typescale-headline-medium-height);
-
-      margin: 12px 0px;
-      flex: 1;
-    }
-
-    .sub-header {
-      font-family: var(--md-sys-typescale-label-large-font);
-      font-weight: var(--md-sys-typescale-label-large-weight);
-      font-size: var(--md-sys-typescale-label-large-size);
-      letter-spacing: var(--md-sys-typescale-label-large-tracking);
-      line-height: var(--md-sys-typescale-label-large-height);
-
-      margin: 0;
-    }
-
-    .summary {
-      color: var(--operation-description-color, var(--api-method-documentation-description-color, rgba(0, 0, 0, 0.74)));
-      font-size: 1.1rem;
-    }
-
-    .callback-section {
-      margin: 12px 0;
-      padding: 8px;
-      background-color: var(
-        --operation-callback-background-color,
-        var(--api-method-documentation-callback-background-color, #f7f7f7)
-      );
-    }
-
-    .extensions {
-      font-style: italic;
-      margin: 12px 0;
-    }
-  `,
-]

package/src/elements/amf/ApiParameterDocument.element.ts

@@ -1,105 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { readPropertyTypeLabel } from '../../amf/lib/Utils.js'
-import { paramNameTemplate, typeValueTemplate, detailsTemplate, pillTemplate } from './SchemaCommonTemplates.js'
-import { ApiDocumentationBase } from './ApiDocumentationBase.js'
-import type { IApiParameter } from '@api-client/core/amf/definitions/Api.js'
-import type { IShapeUnion } from '@api-client/core/amf/definitions/Shapes.js'
-
-/**
- * A web component that renders the documentation for a single request / response parameter.
- */
-export default class ApiParameterDocument extends ApiDocumentationBase {
-  protected parameterValue?: IApiParameter
-
-  protected schemaValue?: IShapeUnion
-
-  protected typeLabelValue?: string
-
-  get parameter(): IApiParameter | undefined {
-    return this.parameterValue
-  }
-
-  set parameter(value) {
-    const old = this.parameterValue
-    if (old === value) {
-      return
-    }
-    this.parameterValue = value
-    this.processGraph()
-  }
-
-  /**
-   * Prepares the values to be rendered.
-   */
-  override async processGraph(): Promise<void> {
-    const { parameter } = this
-    if (!parameter) {
-      return
-    }
-    await this.querySchema()
-    this.computeParamType()
-    this.requestUpdate()
-    await this.updateComplete
-  }
-
-  /**
-   * Reads the schema from the parameter.
-   */
-  async querySchema(): Promise<void> {
-    this.schemaValue = undefined
-    const param = this.parameterValue
-    if (!param || !param.schema) {
-      return
-    }
-    this.schemaValue = param.schema
-  }
-
-  /**
-   * Computes the schema type label value to render in the type view.
-   */
-  protected computeParamType(): void {
-    const schema = this.schemaValue
-    if (!schema) {
-      this.typeLabelValue = undefined
-      return
-    }
-    const label = readPropertyTypeLabel(schema)
-    this.typeLabelValue = label
-  }
-
-  override render(): TemplateResult {
-    const param = this.parameterValue
-    if (!param) {
-      return html``
-    }
-    const { name, required } = param
-    const type = this.typeLabelValue
-    const schema = this.schemaValue
-    return html`
-      <div class="property-container simple">
-        <div class="name-column">
-          ${paramNameTemplate(name, required)}
-          <span class="headline-separator"></span>
-          ${typeValueTemplate(type)} ${required ? pillTemplate('Required', 'This property is required.') : ''}
-        </div>
-        <div class="description-column">${this.descriptionTemplate()}</div>
-        <div class="details-column">${detailsTemplate(schema)}</div>
-      </div>
-    `
-  }
-
-  /**
-   * @returns The template for the parameter description.
-   */
-  protected override descriptionTemplate(): TemplateResult | string {
-    const schema = this.schemaValue
-    if (schema && schema.description) {
-      return super.descriptionTemplate(schema.description)
-    }
-    const param = this.parameterValue
-    if (param && param.description) {
-      return super.descriptionTemplate(param.description)
-    }
-    return ''
-  }
-}

package/src/elements/amf/ApiParameterDocument.styles.ts

@@ -1,15 +0,0 @@
-import { css } from 'lit'
-import commonStyles from './styles/Common.js'
-import schemaStyles from './styles/SchemaCommon.js'
-import MarkdownStyles from '../highlight/MarkdownStyles.js'
-
-export default [
-  MarkdownStyles,
-  commonStyles,
-  schemaStyles,
-  css`
-    :host {
-      display: block;
-    }
-  `,
-]

package/src/elements/amf/ApiParametrizedSecurityScheme.element.ts

@@ -1,72 +0,0 @@
-import { TemplateResult } from 'lit'
-import type {
-  IApiSecurityOAuth2Settings,
-  IApiSecurityScheme,
-  IApiSecuritySettingsUnion,
-} from '@api-client/core/amf/definitions/Api.js'
-import { AmfNamespace } from '@api-client/core/amf/definitions/Namespace.js'
-import ApiSecurityDocumentElement from './ApiSecurityDocument.element.js'
-
-export default class ApiParametrizedSecurityScheme extends ApiSecurityDocumentElement {
-  protected settingsValue: IApiSecuritySettingsUnion | undefined
-
-  get settings(): IApiSecuritySettingsUnion | undefined {
-    return this.settingsValue
-  }
-
-  set settings(value) {
-    const old = this.settingsValue
-    if (old === value) {
-      return
-    }
-    this.settingsValue = value
-    this.requestUpdate()
-  }
-
-  /**
-   * @returns The template for the security settings, when required.
-   */
-  override settingsTemplate(scheme: IApiSecurityScheme): TemplateResult | string {
-    const appliedSettings = this.settingsValue
-    if (!appliedSettings) {
-      return super.settingsTemplate(scheme)
-    }
-    const { settings } = scheme
-    if (!settings) {
-      return ''
-    }
-    const { types } = settings
-    const mergedSettings = this.mergeSettings(appliedSettings, settings)
-
-    if (types.includes(AmfNamespace.aml.vocabularies.security.ApiKeySettings)) {
-      return this.apiKeySettingsTemplate(mergedSettings)
-    }
-    if (types.includes(AmfNamespace.aml.vocabularies.security.OpenIdConnectSettings)) {
-      return this.openIdConnectSettingsTemplate(mergedSettings)
-    }
-    if (types.includes(AmfNamespace.aml.vocabularies.security.OAuth2Settings)) {
-      return this.oAuth2SettingsTemplate(mergedSettings as IApiSecurityOAuth2Settings)
-    }
-    return ''
-  }
-
-  /**
-   * @param applied The settings applied to the current object
-   * @param scheme The settings defined in the scheme
-   * @returns The merged settings to render.
-   */
-  protected mergeSettings(
-    applied: IApiSecuritySettingsUnion,
-    scheme: IApiSecuritySettingsUnion
-  ): IApiSecuritySettingsUnion {
-    const result = { ...scheme } as IApiSecuritySettingsUnion
-    Object.keys(applied).forEach((key) => {
-      if (['id', 'types', 'additionalProperties'].includes(key)) {
-        return
-      }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      result[key as keyof IApiSecuritySettingsUnion] = (applied as any)[key]
-    })
-    return result
-  }
-}

package/src/elements/amf/ApiParametrizedSecurityScheme.styles.ts

@@ -1,4 +0,0 @@
-import { css } from 'lit'
-import parentStyles from './ApiSecurityDocument.styles.js'
-
-export default [...parentStyles, css``]

package/src/elements/amf/ApiPayloadDocument.element.ts

@@ -1,128 +0,0 @@
-import { html, nothing, TemplateResult } from 'lit'
-import { property } from 'lit/decorators.js'
-import { ApiDocumentationBase } from './ApiDocumentationBase.js'
-import { Events } from '../../events/amf/Events.js'
-import type { IApiPayload } from '@api-client/core/amf/definitions/Api.js'
-import '../../define/amf/api-schema-document.js'
-
-export default class ApiPayloadDocument extends ApiDocumentationBase {
-  protected payloadValue: IApiPayload | undefined
-
-  get payload(): IApiPayload | undefined {
-    return this.payloadValue
-  }
-
-  @property({ type: Object })
-  set payload(value) {
-    const old = this.payloadValue
-    if (old === value) {
-      return
-    }
-    this.payloadValue = value
-    this.processGraph()
-  }
-
-  /**
-   * Queries the graph store for the API Payload data.
-   */
-  override async processGraph(): Promise<void> {
-    await this.queryPayload()
-    await this.processPayload()
-    this.requestUpdate()
-    await this.updateComplete
-  }
-
-  /**
-   * Queries the store for the payload data, when needed.
-   */
-  async queryPayload(): Promise<void> {
-    const { domainId } = this
-    if (!domainId) {
-      // this[requestValue] = undefined;
-      return
-    }
-    if (this.payloadValue && this.payloadValue.id === domainId) {
-      // in case the request model was provided via the property setter.
-      return
-    }
-    try {
-      const info = await Events.Payload.get(this, domainId)
-      this.payloadValue = info
-    } catch (e) {
-      this.payloadValue = undefined
-      const ex = e as Error
-      Events.Telemetry.exception(this, ex.message, false)
-      Events.Reporting.error(this, ex, `Unable to query for API payload data: ${ex.message}`, this.localName)
-    }
-  }
-
-  async processPayload(): Promise<void> {
-    this.examplesValue = undefined
-    const { payload } = this
-    if (!payload) {
-      return
-    }
-    const { mediaType = '' } = payload
-    const { examples } = payload
-    if (Array.isArray(examples) && examples.length) {
-      this.examplesValue = this.evaluateExamples(examples, mediaType)
-    }
-  }
-
-  override render(): TemplateResult {
-    const { payload } = this
-    if (!payload) {
-      return html``
-    }
-    return html`
-      ${this.renderName(payload)} ${this.renderMediaType(payload)} ${this.examplesTemplate()}
-      ${this.renderSchema(payload)}
-    `
-  }
-
-  /**
-   * @returns The template for the payload mime type.
-   */
-  protected renderMediaType(payload: IApiPayload): TemplateResult | typeof nothing {
-    const { mediaType } = payload
-    if (!mediaType) {
-      return nothing
-    }
-    return html`
-      <div class="media-type">
-        <label>Media type:</label>
-        <span>${mediaType}</span>
-      </div>
-    `
-  }
-
-  /**
-   * @returns The template for the payload name
-   */
-  protected renderName(payload: IApiPayload): TemplateResult | typeof nothing {
-    const { name } = payload
-    if (!name) {
-      return nothing
-    }
-    return html` <div class="payload-name text-selectable">${name}</div> `
-  }
-
-  /**
-   * @returns The template for the payload's schema
-   */
-  protected renderSchema(payload: IApiPayload): TemplateResult {
-    const { schema, mediaType } = payload
-    if (!schema) {
-      return html`<div class="empty-info">Schema is not defined for this payload.</div>`
-    }
-    return html`
-      <api-schema-document
-        class="schema-renderer"
-        .schema="${schema}"
-        .mimeType="${mediaType}"
-        forceExamples
-        schemaTitle
-      ></api-schema-document>
-    `
-  }
-}

package/src/elements/amf/ApiPayloadDocument.styles.ts

@@ -1,15 +0,0 @@
-import { css } from 'lit'
-import commonStyles from './styles/Common.js'
-
-export default [
-  commonStyles,
-  css`
-    :host {
-      display: block;
-    }
-
-    .schema-renderer {
-      margin-top: 24px;
-    }
-  `,
-]

package/src/elements/amf/ApiRequest.element.ts

@@ -1,260 +0,0 @@
-import { html, nothing, TemplateResult } from 'lit'
-import { property, state } from 'lit/decorators.js'
-import type { IRequestLog } from '@api-client/core/models/RequestLog.js'
-import type { IRequest } from '@api-client/core/models/Request.js'
-import { EventTypes } from '../../events/amf/EventTypes.js'
-import { ApiNavigationEvent } from '../../events/amf/NavigationEvents.js'
-import { Oauth2Credentials } from '../authorization/types.js'
-import ApiElement from '../ApiElement.js'
-import '../../define/amf/api-request-editor.js'
-import '../../define/http/http-request-log.js'
-
-export default class ApiRequest extends ApiElement {
-  /**
-   * By default application hosting the element must set `domainId`
-   * property. When using `api-navigation` element
-   * by setting this property the element listens for navigation events
-   * and updates the state
-   * @attribute
-   */
-  @property({ type: Boolean, reflect: true }) accessor handleNavigationEvents: boolean | undefined
-
-  /**
-   * When set it renders the URL input above the URL parameters.
-   * @attribute
-   */
-  @property({ type: Boolean, reflect: true }) accessor urlEditor: boolean | undefined
-
-  /**
-   * When set it renders a label with the computed URL.
-   * @attribute
-   */
-  @property({ type: Boolean, reflect: true }) accessor urlLabel: boolean | undefined
-
-  /**
-   * A base URI for the API. To be set if RAML spec is missing `baseUri`
-   * declaration and this produces invalid URL input. This information
-   * is passed to the URL editor that prefixes the URL with `baseUri` value
-   * if passed URL is a relative URL.
-   * @attribute
-   */
-  @property({ type: String }) accessor baseUri: string | undefined
-
-  /**
-   * OAuth2 redirect URI.
-   * This value **must** be set in order for OAuth 1/2 to work properly.
-   * @attribute
-   */
-  @property({ type: String }) accessor redirectUri: string | undefined
-
-  /**
-   * If set it computes `hasOptional` property and shows checkbox in the
-   * form to show / hide optional properties.
-   * @attribute
-   */
-  @property({ type: Boolean, reflect: true }) accessor allowHideOptional: boolean | undefined
-
-  /**
-   * When set, renders "add custom" item button.
-   * If the element is to be used without AMF model this should always
-   * be enabled. Otherwise users won't be able to add a parameter.
-   * @attribute
-   */
-  @property({ type: Boolean, reflect: true }) accessor allowCustom: boolean | undefined
-
-  /**
-   * Holds the value of the currently selected server
-   * Data type: URI
-   * @attribute
-   */
-  @property({ type: String }) accessor serverValue: string | undefined
-
-  /**
-   * Holds the type of the currently selected server
-   * Values: `server` | `slot` | `custom`
-   * @attribute
-   */
-  @property({ type: String }) accessor serverType: string | undefined
-
-  /**
-   * Optional property to set
-   * If true, the server selector is not rendered
-   * @attribute
-   */
-  @property({ type: Boolean, reflect: true }) accessor noServerSelector: boolean | undefined
-
-  /**
-   * Optional property to set
-   * If true, the server selector custom base URI option is rendered
-   * @attribute
-   */
-  @property({ type: Boolean, reflect: true }) accessor allowCustomBaseUri: boolean | undefined
-
-  /**
-   * List of credentials source
-   */
-  @property({ type: Array }) accessor credentialsSource: Oauth2Credentials[] | undefined
-
-  protected domainIdValue?: string
-
-  /**
-   * The domain id (AMF's id) of an API operation.
-   */
-  get domainId(): string | undefined {
-    return this.domainIdValue
-  }
-
-  @property({ type: String })
-  set domainId(value: string | undefined) {
-    const old = this.domainIdValue
-    /* istanbul ignore if */
-    if (old === value) {
-      return
-    }
-    this.domainIdValue = value
-    this.requestUpdate('domainId', old)
-    this.domainIdChanged(value)
-  }
-
-  /**
-   * The latest response for the current request.
-   */
-  @state() accessor response: IRequestLog | undefined
-
-  constructor() {
-    super()
-    this.navigationHandler = this.navigationHandler.bind(this)
-    this.handleNavigationEvents = false
-    this.allowHideOptional = false
-    this.allowCustom = false
-    this.noServerSelector = false
-    this.allowCustomBaseUri = false
-  }
-
-  override connectedCallback(): void {
-    super.connectedCallback()
-    const node = this.eventsTarget
-    node.addEventListener(EventTypes.Navigation.apiNavigate, this.navigationHandler as EventListener)
-  }
-
-  override disconnectedCallback(): void {
-    super.disconnectedCallback()
-    const node = this.eventsTarget
-    node.removeEventListener(EventTypes.Navigation.apiNavigate, this.navigationHandler as EventListener)
-  }
-
-  /**
-   * Serializes the state of the request editor.
-   *
-   * Note this is the same object as the one passed to the detail of the api request event.
-   */
-  async serialize(): Promise<IRequest> {
-    const { shadowRoot } = this
-    if (!shadowRoot) {
-      throw new Error(`The component is not yet initialized.`)
-    }
-    const editor = shadowRoot.querySelector('api-request-editor')
-    if (!editor) {
-      throw new Error(`The request editor has been manually removed from the DOM.`)
-    }
-    return editor.serialize()
-  }
-
-  /**
-   * Clears response panel when the `domainId` change.
-   */
-  protected domainIdChanged(id?: string): void {
-    if (!id) {
-      return
-    }
-    this.clearResponse()
-  }
-
-  /**
-   * Clears response panel.
-   */
-  clearResponse(): void {
-    if (this.response) {
-      this.response = undefined
-    }
-  }
-
-  /**
-   * Handles navigation events and computes available servers.
-   *
-   * When `handleNavigationEvents` is set then it also manages the selection.
-   */
-  protected navigationHandler(e: ApiNavigationEvent): void {
-    if (this.handleNavigationEvents) {
-      const { domainId, domainType } = e.detail
-      this.domainId = domainType === 'operation' ? domainId : undefined
-    }
-  }
-
-  /**
-   * Retargets the change event from the editor.
-   */
-  protected changeHandler(): void {
-    this.notifyChange()
-  }
-
-  protected handleResponse(e: CustomEvent<IRequestLog>): void {
-    this.response = e.detail
-  }
-
-  override render(): TemplateResult {
-    return html`${this.requestTemplate()}${this.responseTemplate()}`
-  }
-
-  /**
-   * @returns A template for the request panel
-   */
-  protected requestTemplate(): TemplateResult {
-    const {
-      redirectUri,
-      domainId,
-      urlEditor,
-      urlLabel,
-      baseUri,
-      eventsTarget,
-      allowHideOptional,
-      allowCustom,
-      serverValue,
-      serverType,
-      noServerSelector,
-      allowCustomBaseUri,
-      credentialsSource,
-    } = this
-
-    return html` <api-request-editor
-      .redirectUri="${redirectUri}"
-      .domainId="${domainId}"
-      ?urlEditor="${urlEditor}"
-      ?urlLabel="${urlLabel}"
-      .baseUri="${baseUri}"
-      .eventsTarget="${eventsTarget}"
-      ?allowHideOptional="${allowHideOptional}"
-      ?allowCustom="${allowCustom}"
-      .serverValue="${serverValue}"
-      .serverType="${serverType}"
-      ?noServerSelector="${noServerSelector}"
-      ?allowCustomBaseUri="${allowCustomBaseUri}"
-      .credentialsSource="${credentialsSource}"
-      @change="${this.changeHandler}"
-      @response="${this.handleResponse}"
-    >
-      <slot name="custom-base-uri" slot="custom-base-uri"></slot>
-    </api-request-editor>`
-  }
-
-  /**
-   * @returns A template for the response view
-   */
-  protected responseTemplate(): TemplateResult | typeof nothing {
-    const { response } = this
-    if (!response) {
-      return nothing
-    }
-    return html`<http-request-log .httpLog="${response}"></http-request-log>`
-  }
-}

package/src/elements/amf/ApiRequest.styles.ts

@@ -1,11 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  :host {
-    display: block;
-  }
-
-  http-request-log {
-    margin-top: 20px;
-  }
-`