@api-client/ui 0.0.17 → 0.1.0

package/src/code-snippets/CodeSnippet.ts

@@ -1,4 +1,6 @@
-import { type IHttpRequest, type Payload, Headers } from '@api-client/core/browser.js'
+import type { IHttpRequest } from '@api-client/core/models/HttpRequest.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import { Headers } from '@api-client/core/lib/headers/Headers.js'
 import { PrismHighlighter } from '../elements/highlight/PrismHighlighter.js'
 
 export declare interface CodeHeader {

package/src/code-snippets/Dart/DartSnippet.ts

@@ -1,4 +1,5 @@
-import type { Payload, Headers } from '@api-client/core/browser.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import type { Headers } from '@api-client/core/lib/headers/Headers.js'
 import CodeSnippet from '../CodeSnippet.js'
 
 export default class DartSnippet extends CodeSnippet {

package/src/code-snippets/HTTP/RawSnippet.ts

@@ -1,4 +1,5 @@
-import type { Payload, Headers } from '@api-client/core/browser.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import type { Headers } from '@api-client/core/lib/headers/Headers.js'
 import CodeSnippet from '../CodeSnippet.js'
 import 'prismjs/components/prism-http.min.js'
 

package/src/code-snippets/Java/PlatformSnippet.ts

@@ -1,4 +1,5 @@
-import type { Payload, Headers } from '@api-client/core/browser.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import type { Headers } from '@api-client/core/lib/headers/Headers.js'
 import CodeSnippet from '../CodeSnippet.js'
 import 'prismjs/components/prism-java.min.js'
 

package/src/code-snippets/Java/SpringSnippet.ts

@@ -1,4 +1,5 @@
-import type { Payload, Headers } from '@api-client/core/browser.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import type { Headers } from '@api-client/core/lib/headers/Headers.js'
 import CodeSnippet from '../CodeSnippet.js'
 import 'prismjs/components/prism-java.min.js'
 

package/src/code-snippets/JavaScript/AsyncFetchSnippet.ts

@@ -1,4 +1,5 @@
-import type { Payload, Headers } from '@api-client/core/browser.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import type { Headers } from '@api-client/core/lib/headers/Headers.js'
 import CodeSnippet from '../CodeSnippet.js'
 
 export default class AsyncFetchSnippet extends CodeSnippet {

package/src/code-snippets/JavaScript/AxiosSnippet.ts

@@ -1,4 +1,5 @@
-import type { Payload, Headers } from '@api-client/core/browser.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import type { Headers } from '@api-client/core/lib/headers/Headers.js'
 import CodeSnippet from '../CodeSnippet.js'
 
 export default class AxiosSnippet extends CodeSnippet {

package/src/code-snippets/JavaScript/FetchSnippet.ts

@@ -1,4 +1,5 @@
-import type { Payload, Headers } from '@api-client/core/browser.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import type { Headers } from '@api-client/core/lib/headers/Headers.js'
 import CodeSnippet from '../CodeSnippet.js'
 
 export default class FetchSnippet extends CodeSnippet {

package/src/code-snippets/JavaScript/NodeSnippet.ts

@@ -1,4 +1,5 @@
-import type { Payload, Headers } from '@api-client/core/browser.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import type { Headers } from '@api-client/core/lib/headers/Headers.js'
 import CodeSnippet from '../CodeSnippet.js'
 
 export default class NodeSnippet extends CodeSnippet {

package/src/code-snippets/JavaScript/XhrSnippet.ts

@@ -1,4 +1,5 @@
-import type { Payload, Headers } from '@api-client/core/browser.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import type { Headers } from '@api-client/core/lib/headers/Headers.js'
 import CodeSnippet from '../CodeSnippet.js'
 
 export default class XhrSnippet extends CodeSnippet {

package/src/code-snippets/JavaScript/jQuerySnippet.ts

@@ -1,4 +1,5 @@
-import type { Payload, Headers } from '@api-client/core/browser.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import type { Headers } from '@api-client/core/lib/headers/Headers.js'
 import CodeSnippet from '../CodeSnippet.js'
 
 export default class jQuerySnippet extends CodeSnippet {

package/src/code-snippets/Python/Python27Snippet.ts

@@ -1,4 +1,5 @@
-import type { Payload, Headers } from '@api-client/core/browser.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import type { Headers } from '@api-client/core/lib/headers/Headers.js'
 import CodeSnippet from '../CodeSnippet.js'
 import 'prismjs/components/prism-python.min.js'
 

package/src/code-snippets/Python/Python31Snippet.ts

@@ -1,4 +1,5 @@
-import type { Payload, Headers } from '@api-client/core/browser.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import type { Headers } from '@api-client/core/lib/headers/Headers.js'
 import CodeSnippet from '../CodeSnippet.js'
 import 'prismjs/components/prism-python.min.js'
 

package/src/code-snippets/Python/RequestsSnippet.ts

@@ -1,4 +1,5 @@
-import type { Payload, Headers } from '@api-client/core/browser.js'
+import type { Payload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
+import type { Headers } from '@api-client/core/lib/headers/Headers.js'
 import CodeSnippet from '../CodeSnippet.js'
 import 'prismjs/components/prism-python.min.js'
 

package/src/controllers/LiveDataController.ts

@@ -1,5 +1,5 @@
 import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit'
-import { LiveData } from '../core/LiveData.js'
+import { LiveData } from '../reactive/LiveData.js'
 
 /**
  * A LitElement controller that observes changes to specific properties of a LiveData instance

package/src/core/Activity.ts

@@ -4,6 +4,9 @@ import { ActivityState, IntentResult, type Intent } from './ActivityManager.js'
 import { FragmentManager } from './FragmentManager.js'
 import type { Fragment } from './Fragment.js'
 import type { Application, UpdateRequest } from './Application.js'
+import { bound } from '../decorators/bound.js'
+import type { ActivityDetail, ActivityWithResultDetail } from '../events/IntentEvents.js'
+import { EventTypes } from '../events/EventTypes.js'
 
 /**
  * `Activity` is a crucial component of your app. An application sends an intent
@@ -50,7 +53,7 @@ export class Activity extends EventTarget {
   /**
    * When starting an new activity for result, we add the request code here
    * so that the manager can track which activity originally called the
-   * activity forresult.
+   * activity for result.
    */
   protected pendingRequestCodes: number[] = []
 
@@ -204,6 +207,13 @@ export class Activity extends EventTarget {
     this.manager.showFragment(key, root)
   }
 
+  hideFragment(key: string): void {
+    const fragment = this.manager.findFragment(key)
+    if (fragment) {
+      this.manager.hideFragment(fragment)
+    }
+  }
+
   /**
    * Unifies Fragment and Activity interfaces.
    * @returns `this`
@@ -290,4 +300,31 @@ export class Activity extends EventTarget {
   getResult(): unknown | undefined {
     return this.resultData
   }
+
+  /**
+   * A handler for the intent event dispatched by web components hosted by this activity.
+   *
+   * **Usage example:**
+   *
+   * ```ts
+   * <custom-element @startactivity="${this.handleIntentEvent}"></custom-element>
+   * <custom-element @startactivityforresult="${this.handleIntentEvent}"></custom-element>
+   * ```
+   *
+   * @param event The event that was dispatched.
+   * @returns A promise that resolves when the intent is handled.
+   * @throws An error if the activity has no activity.
+   * @throws An error if the event type is not recognized.
+   */
+  @bound
+  async handleIntentEvent(event: CustomEvent<ActivityDetail | ActivityWithResultDetail>): Promise<void> {
+    if (event.type === EventTypes.Intent.startActivityForResult) {
+      const info = event.detail as ActivityWithResultDetail
+      await this.startActivityForResult(info.intent)
+    } else if (event.type === EventTypes.Intent.startActivity) {
+      this.startActivity(event.detail.intent)
+    } else {
+      throw new Error(`Unrecognized intent event: ${event.type}`)
+    }
+  }
 }

package/src/core/ActivityManager.ts

@@ -23,6 +23,14 @@ export enum IntentFlags {
    */
   // eslint-disable-next-line @typescript-eslint/prefer-literal-enum-member
   ForResult = 1 << 1,
+  /**
+   * When set, the intent data is passed by reference.
+   * By default the activity manager makes a copy of the intent data.
+   * This is useful when the data is large and you want to avoid copying it
+   * or when you want to share the same data between activities.
+   */
+  // eslint-disable-next-line @typescript-eslint/prefer-literal-enum-member
+  ByReference = 1 << 2,
 }
 
 export interface Intent {
@@ -168,7 +176,10 @@ export class ActivityManager {
         intent,
       })
       await info.activity.onNewIntent(intent)
+      // TODO: Check if the activity is destroyed.
       this.setupRoute(intent)
+      // this.currentActivity = info.activity
+      await this.updateCurrentActivity(info.activity, false)
       return
     }
     const activity = this.buildActivity(intent)
@@ -227,7 +238,15 @@ export class ActivityManager {
    */
   async startActivityForResult(intent: Intent, requestCode: number): Promise<void> {
     intent.requestCode = requestCode
+    const byReference = (intent.flags ?? 0) & IntentFlags.ByReference
+    const data = intent.data
+    if (byReference) {
+      delete intent.data
+    }
     const intentCopy = structuredClone(intent)
+    if (data && !byReference) {
+      intentCopy.data = data
+    }
     intent.requestCode = requestCode
     if (intent.flags) {
       intent.flags = intent.flags & IntentFlags.ForResult
@@ -329,7 +348,11 @@ export class ActivityManager {
    * @param activity The activity to bring to the foreground.
    */
   private async updateCurrentActivity(activity: Activity, isModal: boolean): Promise<void> {
-    if (this.currentActivity && this.currentActivity.state !== ActivityState.Destroyed) {
+    if (
+      this.currentActivity &&
+      this.currentActivity !== activity &&
+      this.currentActivity.state !== ActivityState.Destroyed
+    ) {
       await this.currentActivity.onPause()
       this.currentActivity.state = ActivityState.Paused
     }

package/src/core/Fragment.ts

@@ -232,6 +232,18 @@ export class Fragment extends EventTarget {
     this.requestCode = await activity.startActivityForResult(intent)
   }
 
+  /**
+   * Starts another activity.
+   * @param intent The intent to start.
+   */
+  async startActivity(intent: Intent): Promise<void> {
+    const activity = this.getActivity()
+    if (!activity) {
+      throw new Error(`The fragment has no activity. Unable to start an intent.`)
+    }
+    await activity.startActivity(intent)
+  }
+
   /**
    * The callback method that is triggered when another activity that was
    * started for result finishes.

package/src/core/FragmentManager.ts

@@ -124,7 +124,7 @@ export class FragmentManager {
     // however, with rendering logic encapsulated in Fragment, this isn't needed here
   }
 
-  private findFragment(key: string): Fragment | undefined {
+  findFragment(key: string): Fragment | undefined {
     return this.fragments.get(key)
   }
 

package/src/core/ModalActivity.ts

@@ -36,7 +36,7 @@ export abstract class ModalActivity extends Activity {
    */
   protected dialogClasses: Record<string, boolean> = {}
   /**
-   * Controls dialog visibility withouth controlling the activity state.
+   * Controls dialog visibility without controlling the activity state.
    */
   @state() accessor opened = true
 

package/src/directives/live.ts

@@ -1,7 +1,7 @@
 import { noChange } from 'lit'
 import { directive } from 'lit/directive.js'
 import { AsyncDirective } from 'lit/async-directive.js'
-import { type LiveData } from '../core/LiveData.js'
+import { type LiveData } from '../reactive/LiveData.js'
 
 class LiveDataDirective extends AsyncDirective {
   private liveData?: LiveData<object>

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

@@ -1,7 +1,9 @@
 import { html, TemplateResult, nothing } from 'lit'
 import { property } from 'lit/decorators.js'
-import { AmfNamespace, AmfShapes, IApiCustomDomainProperty, IApiDomainProperty } from '@api-client/core/browser.js'
 import ApiElement from '../ApiElement.js'
+import type { IApiCustomDomainProperty, IApiDomainProperty } from '@api-client/core/amf/definitions/Base.js'
+import type { IApiObjectNode, IApiScalarNode } from '@api-client/core/amf/definitions/Shapes.js'
+import { AmfNamespace } from '@api-client/core/amf/definitions/Namespace.js'
 import '../../md/icons/ui-icon.js'
 
 /**
@@ -88,7 +90,7 @@ export default class ApiAnnotationDocument extends ApiElement {
     }
   }
 
-  protected scalarValue(scalar: AmfShapes.IApiScalarNode): string | number | boolean {
+  protected scalarValue(scalar: IApiScalarNode): string | number | boolean {
     let { value = '' } = scalar
     if (value === 'nil') {
       value = ''
@@ -112,10 +114,10 @@ export default class ApiAnnotationDocument extends ApiElement {
     const { name, extension } = prop
     const { types } = extension
     if (types.includes(AmfNamespace.aml.vocabularies.data.Scalar)) {
-      return this.renderScalar(name, extension as AmfShapes.IApiScalarNode)
+      return this.renderScalar(name, extension as IApiScalarNode)
     }
     if (types.includes(AmfNamespace.aml.vocabularies.data.Object)) {
-      return this.renderObject(name, extension as AmfShapes.IApiObjectNode)
+      return this.renderObject(name, extension as IApiObjectNode)
     }
     return nothing
   }
@@ -143,7 +145,7 @@ export default class ApiAnnotationDocument extends ApiElement {
   /**
    * @returns The template for the custom property.
    */
-  protected renderScalar(name: string, scalar: AmfShapes.IApiScalarNode): TemplateResult {
+  protected renderScalar(name: string, scalar: IApiScalarNode): TemplateResult {
     const content = html`<span class="scalar-value text-selectable">${this.scalarValue(scalar)}</span>`
     return this.renderAnnotationWrapper(name, content)
   }
@@ -151,7 +153,7 @@ export default class ApiAnnotationDocument extends ApiElement {
   /**
    * @returns The template for the custom property.
    */
-  protected renderObject(name: string, object: AmfShapes.IApiObjectNode): TemplateResult {
+  protected renderObject(name: string, object: IApiObjectNode): TemplateResult {
     const { properties = {} } = object
     const content = Object.keys(properties).map((key) => {
       const value = properties[key]
@@ -167,7 +169,7 @@ export default class ApiAnnotationDocument extends ApiElement {
   /**
    * @returns The template for the custom property.
    */
-  protected renderObjectScalarProperty(name: string, scalar: AmfShapes.IApiScalarNode): TemplateResult {
+  protected renderObjectScalarProperty(name: string, scalar: IApiScalarNode): TemplateResult {
     const value = this.scalarValue(scalar)
     return html`
       <div class="object-property">

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

@@ -1,6 +1,11 @@
 import { html, TemplateResult } from 'lit'
 import { property, queryAll } from 'lit/decorators.js'
-import { ApiDefinitions, IRequestAuthorization } from '@api-client/core/browser.js'
+import type {
+  IApiParametrizedSecurityScheme,
+  IApiSecurityHttpSettings,
+  IApiSecurityRequirement,
+} from '@api-client/core/amf/definitions/Api.js'
+import type { IRequestAuthorization } from '@api-client/core/models/RequestAuthorization.js'
 import { Oauth2Credentials } from '../authorization/types.js'
 import ApiElement from '../ApiElement.js'
 import { Authorization } from '../authorization/ui/Authorization.js'
@@ -14,19 +19,19 @@ import '../../define/amf/authorization/amf-oidc-authorization.js'
 
 export interface SecurityMethods {
   types: string[]
-  schemes: ApiDefinitions.IApiParametrizedSecurityScheme[]
+  schemes: IApiParametrizedSecurityScheme[]
 }
 
 export default class ApiAuthorizationEditor extends ApiElement {
-  protected securityInternal: ApiDefinitions.IApiSecurityRequirement | undefined
+  protected securityInternal: IApiSecurityRequirement | undefined
 
   protected methodsInternal?: SecurityMethods
 
-  get security(): ApiDefinitions.IApiSecurityRequirement | undefined {
+  get security(): IApiSecurityRequirement | undefined {
     return this.securityInternal
   }
 
-  set security(value: ApiDefinitions.IApiSecurityRequirement | undefined) {
+  set security(value: IApiSecurityRequirement | undefined) {
     const old = this.securityInternal
     if (old === value) {
       return
@@ -96,7 +101,7 @@ export default class ApiAuthorizationEditor extends ApiElement {
    * that can be applied to the editor. In OAS an auth method may be an union
    * of methods.
    */
-  protected computeMethods(schemes: ApiDefinitions.IApiParametrizedSecurityScheme[]): SecurityMethods {
+  protected computeMethods(schemes: IApiParametrizedSecurityScheme[]): SecurityMethods {
     const result: SecurityMethods = {
       types: [],
       schemes: [],
@@ -115,7 +120,7 @@ export default class ApiAuthorizationEditor extends ApiElement {
   /**
    * Reads authorization scheme's name and type from the AMF model.
    */
-  protected listSchemeLabels(security: ApiDefinitions.IApiParametrizedSecurityScheme): string | undefined {
+  protected listSchemeLabels(security: IApiParametrizedSecurityScheme): string | undefined {
     const { name, scheme } = security
     if (name === 'null') {
       // RAML allows to define a "null" scheme. This means that the authorization
@@ -128,7 +133,7 @@ export default class ApiAuthorizationEditor extends ApiElement {
     let { type } = scheme
     if (type === 'http') {
       // HTTP type can be `basic` or `bearer`.
-      const config = scheme.settings as ApiDefinitions.IApiSecurityHttpSettings
+      const config = scheme.settings as IApiSecurityHttpSettings
       if (!config) {
         // this happens when AMF doesn't properly read graph model back to the store.
         // AMF team promised to fix this...
@@ -229,10 +234,7 @@ export default class ApiAuthorizationEditor extends ApiElement {
     `
   }
 
-  protected methodTemplate(
-    scheme: ApiDefinitions.IApiParametrizedSecurityScheme,
-    type: string
-  ): TemplateResult | string {
+  protected methodTemplate(scheme: IApiParametrizedSecurityScheme, type: string): TemplateResult | string {
     switch (type) {
       case 'Basic Authentication':
       case 'basic':
@@ -262,7 +264,7 @@ export default class ApiAuthorizationEditor extends ApiElement {
   /**
    * Renders a template for Basic authorization.
    */
-  protected basicAuthTemplate(security: ApiDefinitions.IApiParametrizedSecurityScheme): TemplateResult {
+  protected basicAuthTemplate(security: IApiParametrizedSecurityScheme): TemplateResult {
     return html` <amf-basic-authorization
       .security="${security}"
       @change="${this.changeHandler}"
@@ -280,7 +282,7 @@ export default class ApiAuthorizationEditor extends ApiElement {
   /**
    * Renders a template for Pass through authorization.
    */
-  protected passThroughAuthTemplate(security: ApiDefinitions.IApiParametrizedSecurityScheme): TemplateResult {
+  protected passThroughAuthTemplate(security: IApiParametrizedSecurityScheme): TemplateResult {
     return html` <amf-passthrough-authorization
       .security="${security}"
       @change="${this.changeHandler}"
@@ -291,7 +293,7 @@ export default class ApiAuthorizationEditor extends ApiElement {
   /**
    * Renders a template for RAML custom authorization.
    */
-  protected ramlCustomAuthTemplate(security: ApiDefinitions.IApiParametrizedSecurityScheme): TemplateResult {
+  protected ramlCustomAuthTemplate(security: IApiParametrizedSecurityScheme): TemplateResult {
     return html`<amf-ramlcustom-authorization
       .security="${security}"
       @change="${this.changeHandler}"
@@ -302,7 +304,7 @@ export default class ApiAuthorizationEditor extends ApiElement {
   /**
    * Renders a template for Bearer authorization (OAS).
    */
-  protected bearerAuthTemplate(security: ApiDefinitions.IApiParametrizedSecurityScheme): TemplateResult {
+  protected bearerAuthTemplate(security: IApiParametrizedSecurityScheme): TemplateResult {
     return html` <amf-bearer-authorization
       .security="${security}"
       @change="${this.changeHandler}"
@@ -320,7 +322,7 @@ export default class ApiAuthorizationEditor extends ApiElement {
   /**
    * Renders a template for OAuth 2 authorization.
    */
-  protected oa2AuthTemplate(security: ApiDefinitions.IApiParametrizedSecurityScheme): TemplateResult {
+  protected oa2AuthTemplate(security: IApiParametrizedSecurityScheme): TemplateResult {
     const { oauth2RedirectUri, credentialsSource, oauth2AuthorizationUri, oauth2AccessTokenUri } = this
     return html` <amf-oauth2-authorization
       .defaultRedirectUri="${oauth2RedirectUri}"
@@ -336,7 +338,7 @@ export default class ApiAuthorizationEditor extends ApiElement {
   /**
    * Renders a template for OAuth 2 authorization.
    */
-  protected openIdConnectTemplate(security: ApiDefinitions.IApiParametrizedSecurityScheme): TemplateResult {
+  protected openIdConnectTemplate(security: IApiParametrizedSecurityScheme): TemplateResult {
     const { oauth2RedirectUri, credentialsSource } = this
     return html` <amf-oidc-authorization
       .defaultRedirectUri="${oauth2RedirectUri}"
@@ -350,7 +352,7 @@ export default class ApiAuthorizationEditor extends ApiElement {
   /**
    * Renders a template for Api Keys authorization.
    */
-  protected apiKeyTemplate(security: ApiDefinitions.IApiParametrizedSecurityScheme): TemplateResult {
+  protected apiKeyTemplate(security: IApiParametrizedSecurityScheme): TemplateResult {
     return html`
       <amf-apikey-authorization
         .security="${security}"

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

@@ -1,8 +1,8 @@
 import { html, TemplateResult } from 'lit'
-import { ApiDefinitions } from '@api-client/core/browser.js'
 import ApiResourceDocumentElement from './ApiResourceDocument.element.js'
 import '../../define/amf/api-operation-document.js'
 import '../../define/amf/api-parameter-document.js'
+import { IApiEndPoint, IApiOperation } from '@api-client/core/amf/definitions/Api.js'
 
 /**
  * A web component that renders the async API Channel documentation page
@@ -70,10 +70,7 @@ export default class ApiChannelDocument extends ApiResourceDocumentElement {
    * @param operation The graph id of the operation.
    * @returns The template for the API operation.
    */
-  protected override renderOperation(
-    endpoint: ApiDefinitions.IApiEndPoint,
-    operation: ApiDefinitions.IApiOperation
-  ): TemplateResult {
+  protected override renderOperation(endpoint: IApiEndPoint, operation: IApiOperation): TemplateResult {
     const { serverId, baseUri } = this
     return html`<api-operation-document
       .domainId="${operation.id}"

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

@@ -1,6 +1,7 @@
 import { html, TemplateResult } from 'lit'
 import { property } from 'lit/decorators.js'
-import { ApiDefinitions, AmfNamespace } from '@api-client/core/browser.js'
+import type { IApiSummary } from '@api-client/core/amf/definitions/Api.js'
+import { AmfNamespace } from '@api-client/core/amf/definitions/Namespace.js'
 import { ApiDocumentationBase } from './ApiDocumentationBase.js'
 import { EventTypes } from '../../events/amf/EventTypes.js'
 import { Events } from '../../events/amf/Events.js'
@@ -8,6 +9,7 @@ import { ServerChangeEvent, ServerCountChangeEvent } from '../../events/amf/Serv
 import { ApiNavigationEvent } from '../../events/amf/NavigationEvents.js'
 import { SelectionType, DocumentMeta, ServerType } from '../../amf/types.js'
 import { Oauth2Credentials } from '../authorization/types.js'
+import RadioElement from '../../md/radio/internals/RadioElement.js'
 import '../../define/amf/api-summary.js'
 import '../../define/amf/api-operation-document.js'
 import '../../define/amf/api-resource-document.js'
@@ -16,7 +18,6 @@ import '../../define/amf/api-documentation-document.js'
 import '../../define/amf/api-schema-document.js'
 import '../../define/amf/api-server-picker.js'
 import '../../md/radio/ui-radio.js'
-import RadioElement from '../../md/radio/internals/RadioElement.js'
 /**
  * A main documentation view for an AMF model representing a sync or an async API.
  *
@@ -31,7 +32,7 @@ export default class ApiDocumentation extends ApiDocumentationBase {
 
   protected renderedViewValue: string | undefined
 
-  protected apiSummaryValue?: ApiDefinitions.IApiSummary
+  protected apiSummaryValue?: IApiSummary
 
   protected documentMetaValue?: DocumentMeta
 

package/src/elements/amf/ApiDocumentationBase.ts

@@ -3,7 +3,10 @@ import { html, nothing, TemplateResult } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import { IApiCustomDomainProperty, ApiExampleGenerator, AmfShapes, ApiDefinitions } from '@api-client/core/browser.js'
+import type { IApiDataExample } from '@api-client/core/amf/definitions/Shapes.js'
+import { ApiExampleGenerator } from '@api-client/core/amf/ApiExampleGenerator.js'
+import type { IApiCustomDomainProperty } from '@api-client/core/amf/definitions/Base.js'
+import type { IApiParameter } from '@api-client/core/amf/definitions/Api.js'
 import { EventTypes } from '../../events/amf/EventTypes.js'
 import { SchemaExample } from '../../amf/types.js'
 import ApiElement from '../ApiElement.js'
@@ -140,7 +143,7 @@ export class ApiDocumentationBase extends ApiElement {
    * @param examples The list of examples to evaluate
    * @param mediaType The media type to use with examples processing.
    */
-  protected evaluateExamples(examples: AmfShapes.IApiDataExample[], mediaType: string): SchemaExample[] {
+  protected evaluateExamples(examples: IApiDataExample[], mediaType: string): SchemaExample[] {
     return examples.map((example) => this.evaluateExample(example, mediaType))
   }
 
@@ -148,7 +151,7 @@ export class ApiDocumentationBase extends ApiElement {
    * @param example The example to evaluate
    * @param mediaType The media type to use with examples processing.
    */
-  protected evaluateExample(example: AmfShapes.IApiDataExample, mediaType: string): SchemaExample {
+  protected evaluateExample(example: IApiDataExample, mediaType: string): SchemaExample {
     let value: string | undefined
     if (mediaType) {
       const generator = new ApiExampleGenerator()
@@ -223,7 +226,7 @@ export class ApiDocumentationBase extends ApiElement {
    * @param dataName Optional data-name for this parameter
    * @returns The template for the schema item document
    */
-  protected schemaItemTemplate(model: ApiDefinitions.IApiParameter, dataName?: string): TemplateResult {
+  protected schemaItemTemplate(model: IApiParameter, dataName?: string): TemplateResult {
     return html`
       <api-parameter-document
         .parameter="${model}"

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

@@ -1,19 +1,19 @@
 import { html, TemplateResult } from 'lit'
-import { ApiDefinitions } from '@api-client/core/browser.js'
 import { ApiDocumentationBase } from './ApiDocumentationBase.js'
 import { Events } from '../../events/amf/Events.js'
+import type { IApiDocumentation } from '@api-client/core/amf/definitions/Api.js'
 
 /**
  * A web component that renders the documentation page for an API documentation (like in RAML documentations) built from
  * the AMF graph model.
  */
 export default class ApiDocumentationDocument extends ApiDocumentationBase {
-  protected documentationValue: ApiDefinitions.IApiDocumentation | undefined
+  protected documentationValue: IApiDocumentation | undefined
 
   /**
    * The serialized to a JS object graph model
    */
-  get documentation(): ApiDefinitions.IApiDocumentation | undefined {
+  get documentation(): IApiDocumentation | undefined {
     return this.documentationValue
   }
 
@@ -69,7 +69,7 @@ export default class ApiDocumentationDocument extends ApiDocumentationBase {
   /**
    * @returns The template for the Documentation title.
    */
-  protected titleTemplate(docs: ApiDefinitions.IApiDocumentation): TemplateResult | string {
+  protected titleTemplate(docs: IApiDocumentation): TemplateResult | string {
     const { title } = docs
     if (!title) {
       return ''