@api-client/ui 0.1.9 → 0.2.2

package/demo/amf/api-request.ts

@@ -1,259 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { AmfDemoPage } from './lib/AmfDemoPage.js'
-import { reactive } from '../../src/decorators/index.js'
-import type { ApiNavigationEvent } from '../../src/events/amf/NavigationEvents.js'
-import type { SelectionType } from '../../src/amf/types.js'
-import type { ServerChangeEvent } from '../../src/events/amf/ServerEvents.js'
-// import { WebProxyBindings } from '../../src/bindings/web/WebProxyBindings.js'
-// import env from '../env.js'
-import '../../src/define/amf/api-navigation.js'
-import '../../src/define/amf/api-request.js'
-import '../../src/md/list/ui-list-item.js'
-import '../../src/md/checkbox/ui-checkbox.js'
-
-// const AppInfo: IApplication = { code: 'demo', name: 'Demo', version: '0' }
-
-class ComponentDemo extends AmfDemoPage {
-  @reactive() accessor domainId: string | undefined
-
-  @reactive() accessor domainType: SelectionType | undefined
-
-  @reactive() accessor allowCustom: boolean
-
-  @reactive() accessor allowCustomBaseUri: boolean
-
-  @reactive() accessor allowHideOptional: boolean
-
-  @reactive() accessor allowDisableParams: boolean
-
-  @reactive() accessor urlEditor: boolean
-
-  @reactive() accessor renderCustomServer: boolean
-
-  @reactive() accessor noServerSelector: boolean
-
-  @reactive() accessor urlLabel: boolean
-
-  @reactive() accessor selectedServerValue: string | undefined
-
-  // http = new WebProxyBindings(AppInfo, `${env.proxyUri}/open`)
-
-  constructor() {
-    super()
-
-    this.componentName = 'api-request'
-    this.allowCustom = false
-    this.allowHideOptional = true
-    this.allowDisableParams = true
-    this.renderCustomServer = false
-    this.noServerSelector = false
-    this.allowCustomBaseUri = false
-    this.urlLabel = false
-    this.urlEditor = true
-
-    this.apis = []
-    ;[
-      ['google-drive-api', 'Google Drive'],
-      ['httpbin', 'httpbin.org'],
-      ['demo-api', 'Demo API'],
-      ['multi-server', 'Multiple servers'],
-      ['appian-api', 'Applian API'],
-      ['loan-microservice', 'Loan microservice (OAS)'],
-      ['array-body', 'Request body with an array (reported issue)'],
-      ['SE-12042', 'Default values issue (SE-12042)'],
-      ['SE-12224', 'Scope is not an array issues (SE-12224)'],
-      ['APIC-168', 'Custom scheme support (APIC-168)'],
-      ['async-api', 'AsyncAPI'],
-      ['APIC-289', 'OAS param names (APIC-289)'],
-      ['api-keys', 'API key'],
-      ['oas-demo', 'OAS Demo API'],
-      ['oauth-flows', 'OAS OAuth Flow'],
-      ['oas-bearer', 'OAS Bearer'],
-      ['secured-api', 'Security demo'],
-      ['21143', '21143'],
-      ['annotated-parameters', 'annotated-parameters'],
-      ['secured-unions', 'Secured unions'],
-    ].forEach(([file, label]) => {
-      this.apis.push({
-        file: `models/${file}.json`,
-        label,
-      })
-    })
-
-    this.autoLoad()
-  }
-
-  override async autoLoad(): Promise<void> {
-    // await this.http.initialize()
-    return super.autoLoad()
-  }
-
-  override _navChanged(e: ApiNavigationEvent): void {
-    this.domainId = undefined
-    this.domainType = undefined
-    const { domainId, domainType } = e.detail
-    if (domainType === 'operation') {
-      this.domainId = domainId
-      this.domainType = domainType
-    }
-  }
-
-  _addCustomServers(): TemplateResult {
-    if (!this.renderCustomServer) {
-      return html``
-    }
-    return html` <div class="other-section" slot="custom-base-uri">Other options</div>
-      <ui-list-item slot="custom-base-uri" data-value="http://mocking.com">Mocking service</ui-list-item>
-      <ui-list-item slot="custom-base-uri" data-value="http://customServer.com2">Custom instance</ui-list-item>`
-  }
-
-  _serverChangeHandler(e: ServerChangeEvent): void {
-    const { value } = e.detail
-    // The parent keeps current selection which is then passed back to the
-    // server selector. In API Console, the console holds the selected value
-    // so it can be distributed between api-documentation and api-request,
-    // even when panels are re-rendered. This way the application don't loose
-    // track of that was selected.
-    // The selector take cares of a situation when current selection is no
-    // longer available and clears the state.
-    this.selectedServerValue = value
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="./">Back</a>
-      ${this.demoTemplate()}
-    `
-  }
-
-  demoTemplate(): TemplateResult {
-    const { loaded } = this
-    return html` ${!loaded ? html`<p>Load an API model first.</p>` : this.loadedTemplate()} `
-  }
-
-  loadedTemplate(): TemplateResult {
-    const {
-      redirectUri,
-      allowCustom,
-      allowHideOptional,
-      allowDisableParams,
-      domainId,
-      noServerSelector,
-      allowCustomBaseUri,
-      urlEditor,
-      urlLabel,
-      selectedServerValue,
-    } = this
-    return html`
-      <section class="demo-section">
-        <api-request
-          .domainId="${domainId}"
-          ?allowCustom="${allowCustom}"
-          ?allowHideOptional="${allowHideOptional}"
-          ?urlEditor="${urlEditor}"
-          ?urlLabel="${urlLabel}"
-          ?noServerSelector="${noServerSelector}"
-          ?allowCustomBaseUri="${allowCustomBaseUri}"
-          .redirectUri="${redirectUri}"
-          .serverValue="${selectedServerValue}"
-          @apiserverchanged="${this._serverChangeHandler}"
-        >
-          ${this._addCustomServers()}
-        </api-request>
-      </section>
-
-      <section class="demo-section">
-        <p id="mainOptionsLabel">Options</p>
-        <label class="label-large">
-          <ui-checkbox
-            @change="${this._toggleBooleanOption}"
-            ?checked="${allowCustom}"
-            name="allowCustom"
-            aria-describedby="mainOptionsLabel"
-            aria-label="Allow custom"
-          ></ui-checkbox>
-          Allow custom
-        </label>
-
-        <label class="label-large">
-          <ui-checkbox
-            @change="${this._toggleBooleanOption}"
-            ?checked="${allowHideOptional}"
-            name="allowHideOptional"
-            aria-describedby="mainOptionsLabel"
-            aria-label="Allow hide optional"
-          ></ui-checkbox>
-          Allow hide optional
-        </label>
-
-        <label class="label-large">
-          <ui-checkbox
-            @change="${this._toggleBooleanOption}"
-            ?checked="${allowDisableParams}"
-            name="allowDisableParams"
-            aria-describedby="mainOptionsLabel"
-            aria-label="Allow disable params"
-          ></ui-checkbox>
-          Allow disable params
-        </label>
-
-        <label class="label-large">
-          <ui-checkbox
-            @change="${this._toggleBooleanOption}"
-            ?checked="${urlEditor}"
-            name="urlEditor"
-            aria-describedby="mainOptionsLabel"
-            aria-label="URL editor"
-          ></ui-checkbox>
-          URL editor
-        </label>
-
-        <label class="label-large">
-          <ui-checkbox
-            @change="${this._toggleBooleanOption}"
-            ?checked="${urlLabel}"
-            name="urlLabel"
-            aria-describedby="mainOptionsLabel"
-            aria-label="URL label"
-          ></ui-checkbox>
-          URL label
-        </label>
-
-        <label class="label-large">
-          <ui-checkbox
-            @change="${this._toggleBooleanOption}"
-            ?checked="${this.renderCustomServer}"
-            name="renderCustomServer"
-            aria-describedby="mainOptionsLabel"
-            aria-label="Add custom servers"
-          ></ui-checkbox>
-          Add custom servers
-        </label>
-
-        <label class="label-large">
-          <ui-checkbox
-            @change="${this._toggleBooleanOption}"
-            ?checked="${allowCustomBaseUri}"
-            name="allowCustomBaseUri"
-            aria-describedby="mainOptionsLabel"
-            aria-label="Allow Custom Base Uri"
-          ></ui-checkbox>
-          Allow Custom Base Uri
-        </label>
-
-        <label class="label-large">
-          <ui-checkbox
-            @change="${this._toggleBooleanOption}"
-            ?checked="${noServerSelector}"
-            name="noServerSelector"
-            aria-describedby="mainOptionsLabel"
-            aria-label="No Server Selector"
-          ></ui-checkbox>
-          No Server Selector
-        </label>
-      </section>
-    `
-  }
-}
-const instance = new ComponentDemo()
-instance.render()

package/demo/amf/api-resource.html

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>API Endpoint</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../page.css" rel="stylesheet" type="text/css" />
-  <link href="./styles/demo-grid.css" rel="stylesheet" type="text/css" />
-  <style>
-    .request-dialog {
-      --ui-dialog-max-width: 620px;
-      --ui-dialog--width: 100%;
-    }
-  </style>
-</head>
-
-<body class="demo styled">
-  <div id="app" class="layout"></div>
-  <script type="module" src="api-resource.ts"></script>
-</body>
-
-</html>

package/demo/amf/api-resource.ts

@@ -1,264 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { AmfNamespace } from '@api-client/core/amf/definitions/Namespace.js'
-import { AmfMixin } from '@api-client/core/amf/AmfMixin.js'
-import { AmfDemoPage } from './lib/AmfDemoPage.js'
-import { reactive } from '../../src/decorators/index.js'
-import type { ApiNavigationEvent } from '../../src/events/amf/NavigationEvents.js'
-import { ServerType } from '../../src/amf/types.js'
-// import { WebProxyBindings } from '../../src/bindings/web/WebProxyBindings.js'
-// import env from '../env.js'
-import '../../src/define/amf/api-resource-document.js'
-import '../../src/define/amf/api-request.js'
-import '../../src/define/amf/api-server-picker.js'
-import '../../src/md/checkbox/ui-checkbox.js'
-import '../../src/md/dialog/ui-dialog.js'
-
-// const AppInfo: IApplication = { code: 'demo', name: 'Demo', version: '0' }
-
-class AmfHelper extends AmfMixin(Object) {}
-
-class ComponentPage extends AmfDemoPage {
-  @reactive() accessor editorOpened: boolean | undefined
-
-  @reactive() accessor editorOperation: string | undefined
-
-  @reactive() accessor selectedId: string | undefined
-
-  @reactive() accessor selectedType: string | undefined
-
-  @reactive() accessor selectedOperation: string | undefined
-
-  @reactive() accessor tryItButton: boolean | undefined
-
-  @reactive() accessor tryItPanel: boolean | undefined
-
-  @reactive() accessor overrideBaseUri: boolean | undefined
-
-  @reactive() accessor serverType: string | undefined
-
-  @reactive() accessor serverValue: string | undefined
-
-  // http = new WebProxyBindings(AppInfo, `${env.proxyUri}/open`)
-
-  constructor() {
-    super()
-
-    this.componentName = 'api-endpoint-document'
-    this.tryItButton = true
-    ;[
-      ['httpbin', 'httpbin.org'],
-      ['google-drive-api', 'Google Drive'],
-      ['multi-server', 'Multiple servers'],
-      ['nexmo-sms-api', 'Nexmo SMS API'],
-      ['appian-api', 'Applian API'],
-      ['APIC-15', 'APIC-15'],
-      ['SE-10469', 'SE-10469'],
-      ['SE-11415', 'SE-11415'],
-      ['async-api', 'async-api'],
-      ['Petstore-v2', 'Petstore OAS API'],
-      ['api-keys', 'API key (OAS)'],
-      ['oauth-flows', 'OAuth 2 flows'],
-      ['oas-bearer', 'Bearer token'],
-      ['oauth-pkce', 'OAuth 2 PKCE'],
-      ['secured-unions', 'Secured unions'],
-      ['secured-api', 'Secured API'],
-      ['SE-12957', 'SE-12957: OAS query parameters documentation'],
-      ['SE-12959', 'SE-12959: OAS summary field'],
-      ['SE-12752', 'SE-12752: Query string'],
-      ['SE-12957', 'SE-12957: Path in an operation'],
-      ['oas-callbacks', 'OAS 3 callbacks'],
-      ['APIC-553', 'APIC-553'],
-      ['APIC-560', 'APIC-560'],
-      ['APIC-582', 'APIC-582'],
-      ['APIC-650', 'APIC-650'],
-    ].forEach(([file, label]) => {
-      this.apis.push({
-        file: `models/${file}.json`,
-        label,
-      })
-    })
-    this.autoLoad()
-  }
-
-  override async autoLoad(): Promise<void> {
-    // await this.http.initialize()
-    return super.autoLoad()
-  }
-
-  get baseUri(): string | undefined {
-    const { serverValue, serverType } = this
-    if (['custom', 'uri'].includes(serverType as string)) {
-      return serverValue
-    }
-    return undefined
-  }
-
-  get serverId(): string | undefined {
-    const { serverValue, serverType, selectedId } = this
-    if (!serverValue || ['custom', 'uri'].includes(serverType as string)) {
-      return undefined
-    }
-    const helper = new AmfHelper()
-    helper.amf = this.amf
-
-    const servers = helper._getServers({ endpointId: selectedId })
-    if (!Array.isArray(servers)) {
-      return undefined
-    }
-    const srv = servers.find((item) => {
-      const url = helper._getValue(item, AmfNamespace.aml.vocabularies.core.urlTemplate)
-      return url === serverValue
-    })
-    if (srv) {
-      return srv['@id']
-    }
-    return undefined
-  }
-
-  _serverHandler(e: CustomEvent): void {
-    const { value, type } = e.detail
-    this.serverType = type
-    this.serverValue = value
-  }
-
-  override _navChanged(e: ApiNavigationEvent): void {
-    const { domainId, domainType, passive, parentId } = e.detail
-    if (passive) {
-      return
-    }
-    if (domainType === 'resource') {
-      this.selectedId = domainId
-      this.selectedType = domainType
-      this.selectedOperation = undefined
-    } else if (domainType === 'operation') {
-      this.selectedId = parentId
-      this.selectedType = 'endpoint'
-      this.selectedOperation = domainId
-    } else {
-      this.selectedId = undefined
-      this.selectedType = undefined
-      this.selectedOperation = undefined
-    }
-  }
-
-  tryitHandler(e: CustomEvent): void {
-    const { id } = e.detail
-    this.editorOperation = id
-    this.editorOpened = true
-  }
-
-  editorCloseHandler(): void {
-    this.editorOperation = undefined
-    this.editorOpened = false
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="./">Back</a>
-      ${this.demoTemplate()}
-    `
-  }
-
-  demoTemplate(): TemplateResult {
-    const { loaded } = this
-    return html`
-      <section class="centered large demo-region">${this.serverSelectorTemplate()}</section>
-      ${!loaded ? html`<p>Load an API model first.</p>` : this.loadedTemplate()}
-    `
-  }
-
-  loadedTemplate(): TemplateResult {
-    return html` ${this.componentTemplate()} ${this.requestEditorDialogTemplate()} `
-  }
-
-  componentTemplate(): TemplateResult {
-    const { selectedId, selectedOperation, tryItButton, tryItPanel, overrideBaseUri, baseUri, serverId } = this
-    if (!selectedId) {
-      return html`<p>Select API operation in the navigation</p>`
-    }
-    let finalBaseUri: string | undefined
-    if (baseUri) {
-      finalBaseUri = baseUri
-    } else if (overrideBaseUri) {
-      finalBaseUri = 'https://custom.api.com'
-    }
-    return html`
-      <section class="demo-section">
-        <api-resource-document
-          .domainId="${selectedId}"
-          .operationId="${selectedOperation}"
-          .serverId="${serverId}"
-          .redirectUri="${this.redirectUri}"
-          .serverType="${this.serverType}"
-          .serverValue="${this.serverValue}"
-          ?tryItButton="${tryItButton}"
-          ?tryItPanel="${tryItPanel}"
-          .baseUri="${finalBaseUri}"
-          slot="content"
-          @tryit="${this.tryitHandler}"
-        >
-        </api-resource-document>
-      </section>
-
-      <section class="demo-section">
-        <p class="block" id="mainOptionsLabel">Options</p>
-        <label class="label-large">
-          <ui-checkbox
-            @change="${this._toggleBooleanOption}"
-            ?checked="${tryItButton}"
-            name="tryItButton"
-            aria-describedby="mainOptionsLabel"
-          ></ui-checkbox>
-          Render try it
-        </label>
-
-        <label class="label-large">
-          <ui-checkbox
-            @change="${this._toggleBooleanOption}"
-            ?checked="${tryItPanel}"
-            name="tryItPanel"
-            aria-describedby="mainOptionsLabel"
-          ></ui-checkbox>
-          Render HTTP editor
-        </label>
-
-        <label class="label-large">
-          <ui-checkbox
-            @change="${this._toggleBooleanOption}"
-            ?checked="${overrideBaseUri}"
-            name="overrideBaseUri"
-            aria-describedby="mainOptionsLabel"
-          ></ui-checkbox>
-          Custom base URI
-        </label>
-      </section>
-    `
-  }
-
-  requestEditorDialogTemplate(): TemplateResult {
-    return html`
-      <ui-dialog modal @close="${this.editorCloseHandler}" .open="${this.editorOpened || false}" class="request-dialog">
-        <span slot="title">API request</span>
-        <api-request .domainId="${this.editorOperation}" urlLabel allowHideOptional .redirectUri="${this.redirectUri}">
-        </api-request>
-        <ui-text-button slot="button" value="dismiss">Close</ui-text-button>
-      </ui-dialog>
-    `
-  }
-
-  /**
-   * @returns A template for the server selector
-   */
-  serverSelectorTemplate(): TemplateResult {
-    const { serverType, serverValue } = this
-    return html` <api-server-picker
-      .value="${serverValue}"
-      .type="${serverType as ServerType}"
-      auto
-      custom
-      @apiserverchanged="${this._serverHandler}"
-    ></api-server-picker>`
-  }
-}
-const instance = new ComponentPage()
-instance.render()

package/demo/amf/api-schema-documentation.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>AMF Schema Documentation</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../page.css" rel="stylesheet" type="text/css" />
-  <link href="./styles/demo-grid.css" rel="stylesheet" type="text/css" />
-</head>
-
-<body class="demo styled">
-  <div id="app" class="layout"></div>
-  <script type="module" src="api-schema-documentation.ts"></script>
-</body>
-
-</html>