@api-client/ui 0.0.4 → 0.0.7

package/dist/elements/amf/ApiDocumentationBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApiDocumentationBase.js","sourceRoot":"","sources":["../../../src/elements/amf/ApiDocumentationBase.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable lit-a11y/click-events-have-key-events */\n/* eslint-disable class-methods-use-this */\nimport { html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { IApiCustomDomainProperty, ApiExampleGenerator, AmfShapes, ApiDefinitions } from '@api-client/core/build/browser.js';\nimport { EventTypes } from '../../events/amf/EventTypes.js';\nimport { SchemaExample } from '../../amf/types.js';\nimport ApiElement from '../ApiElement.js';\nimport '../../define/amf/api-annotation-document.js';\nimport '../../define/highlight/marked-highlight.js';\nimport '../../define/ui/ui-icon.js';\nimport '../../define/ui/ui-button.js';\nimport '../../define/ui/ui-collapse.js';\n\n/**\n * A base class for the documentation components with common templates and functions.\n */\nexport class ApiDocumentationBase extends ApiElement {\n  protected domainIdValue?: string;\n\n  /** \n   * The domain id of the object to render.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) get domainId(): string | undefined {\n    return this.domainIdValue;\n  }\n\n  set domainId(value: string | undefined) {\n    const old = this.domainIdValue;\n    if (old === value) {\n      return;\n    }\n    this.domainIdValue = value;\n    this.requestUpdate('domainId', old);\n    if (value) {\n      this.processDebounce();\n    }\n  }\n\n  /** \n   * The timeout after which the `queryGraph()` function is called \n   * in the debouncer.\n   * @attribute\n   */\n  @property({ type: Number }) queryDebouncerTimeout?: number;\n\n  protected examplesValue?: SchemaExample[];\n\n  protected debounceValue?: any;\n\n  constructor() {\n    super();\n    this.queryDebouncerTimeout = 1;\n    this.eventsTarget.addEventListener(EventTypes.Store.graphChange, this.graphChangeHandler.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.domainId) {\n      this.processDebounce();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.debounceValue) {\n      clearTimeout(this.debounceValue);\n      this.debounceValue = undefined;\n    }\n  }\n\n  /**\n   * Handler for the event dispatched by the store when the graph model change.\n   */\n  protected graphChangeHandler(): void {\n    this.processDebounce();\n  }\n\n  /**\n   * Calls the `queryGraph()` function in a debouncer.\n   */\n  protected processDebounce(): void {\n    if (this.debounceValue) {\n      clearTimeout(this.debounceValue);\n    }\n    this.debounceValue = setTimeout(() => {\n      this.debounceValue = undefined;\n      this.processGraph();\n    }, this.queryDebouncerTimeout);\n  }\n\n  /**\n   * The main function to use to process the AMF model.\n   * To be implemented by the child classes.\n   */\n  processGraph(): void | Promise<void> {\n    // ...\n  }\n\n  /**\n   * At current state there's no way to tell where to navigate when relative\n   * link is clicked. To prevent 404 anchors this prevents any relative link click.\n   */\n  clickHandler(e: Event): void {\n    const node = (e.target as HTMLElement);\n    if (node.localName !== 'a') {\n      return;\n    }\n    // target.href is always absolute, need attribute value to test for\n    // relative links.\n    const href = node.getAttribute('href');\n    if (!href) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    const ch0 = href[0];\n    if (['.', '/'].indexOf(ch0) !== -1) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  }\n\n  /**\n   * A handler for the section toggle button click.\n   */\n  sectionToggleClickHandler(e: Event): void {\n    const button = (e.currentTarget as HTMLElement);\n    const prop = button.dataset.ctrlProperty;\n    if (!prop) {\n      return;\n    }\n    (this as any)[prop] = !(this as any)[prop];\n  }\n\n  /**\n   * @param examples The list of examples to evaluate\n   * @param mediaType The media type to use with examples processing.\n   */\n  protected evaluateExamples(examples: AmfShapes.IApiDataExample[], mediaType: string): SchemaExample[] {\n    return examples.map((example) => this.evaluateExample(example, mediaType))\n  }\n\n  /**\n   * @param example The example to evaluate\n   * @param mediaType The media type to use with examples processing.\n   */\n  protected evaluateExample(example: AmfShapes.IApiDataExample, mediaType: string): SchemaExample {\n    let value;\n    if (mediaType) {\n      const generator = new ApiExampleGenerator();\n      value = generator.read(example, mediaType);\n    } else {\n      value = example.value || '';\n    }\n    const { name, displayName } = example;\n    const label = displayName || name;\n    const result: SchemaExample = {\n      ...example,\n      renderValue: value,\n    };\n    if (label && !label.startsWith('example_')) {\n      result.label = label;\n    }\n    return result;\n  }\n\n  /**\n   * @returns The template for the section toggle button\n   */\n  protected sectionToggleTemplate(ctrlProperty: string): TemplateResult | string {\n    const label = (this as any)[ctrlProperty] ? 'Hide' : 'Show';\n    return html`\n    <ui-button class=\"section-toggle\" type=\"text\">\n      ${label} <ui-icon icon=\"arrowDropDown\" role=\"presentation\" class=\"toggle-icon\"></ui-icon>\n    </ui-button>\n    `;\n  }\n\n  /**\n   * @param label The section label.\n   * @param openedProperty The name of the element property to be toggled when interacting with the toggle button.\n   * @param content The content to render.\n   * @returns The template for a toggle section with a content.\n   */\n  protected paramsSectionTemplate(label: string, openedProperty: string, content: TemplateResult | (TemplateResult | string)[], opts: ({ innerSection?: boolean }) = {}): TemplateResult {\n    const opened = (this as any)[openedProperty];\n    const { innerSection } = opts;\n    const containerClasses = {\n      'params-section': !innerSection,\n      'surface2': !innerSection,\n      'inner-section': !!innerSection,\n    };\n    const titleClasses = {\n      'params-title': true,\n      opened,\n    };\n    return html`\n    <div class=\"${classMap(containerClasses)}\" data-controlled-by=\"${openedProperty}\">\n      <div \n        class=\"${classMap(titleClasses)}\"\n        data-ctrl-property=\"${openedProperty}\" \n        @click=\"${this.sectionToggleClickHandler}\"\n      >\n        <span class=\"label\">${label}</span>\n        ${this.sectionToggleTemplate(openedProperty)}\n      </div>\n      <ui-collapse .open=\"${opened}\">\n        ${content}\n      </ui-collapse>\n    </div>\n    `;\n  }\n\n  /**\n   * @param model The parameter to render.\n   * @param dataName Optional data-name for this parameter\n   * @returns The template for the schema item document\n   */\n  protected schemaItemTemplate(model: ApiDefinitions.IApiParameter, dataName?: string): TemplateResult {\n    return html`\n    <api-parameter-document \n      .parameter=\"${model}\" \n      class=\"property-item\"\n      data-name=\"${ifDefined(dataName)}\"\n    ></api-parameter-document>\n    `;\n  }\n\n  /**\n   * @param description The description to render.\n   * @returns The template for the markdown description.\n   */\n  protected descriptionTemplate(description?: string): TemplateResult | string {\n    if (!description) {\n      return '';\n    }\n    return html`\n    <div class=\"api-description\">\n      <marked-highlight \n        .markdown=\"${description}\" \n        sanitize\n        @click=\"${this.clickHandler}\"\n      >\n        <div slot=\"markdown-html\" class=\"markdown-body text-selectable\"></div>\n      </marked-highlight>\n    </div>`;\n  }\n\n  /**\n   * @returns The template for the custom domain properties\n   */\n  protected customDomainPropertiesTemplate(customDomainProperties: IApiCustomDomainProperty[] = []): TemplateResult | string {\n    if (!customDomainProperties.length) {\n      return '';\n    }\n    return html`\n    <api-annotation-document\n      .customProperties=\"${customDomainProperties}\"\n    ></api-annotation-document>\n    `;\n  }\n\n  /**\n   * @returns The template for the examples section.\n   */\n  protected examplesTemplate(): TemplateResult | string {\n    const examples = this.examplesValue;\n    if (!Array.isArray(examples)) {\n      return '';\n    }\n    const filtered = examples.filter((item) => !!item.renderValue);\n    if (!filtered.length) {\n      return '';\n    }\n    return html`\n    <div class=\"examples\">\n    ${filtered.map((item) => this.exampleTemplate(item))}\n    </div>\n    `;\n  }\n\n  /**\n   * @returns The template for a single example\n   */\n  protected exampleTemplate(item: SchemaExample): TemplateResult | string {\n    const { description, renderValue, label } = item;\n    return html`\n    <details class=\"schema-example\">\n      <summary>Example${label ? `: ${label}` : ''}</summary>\n      <div class=\"example-content\">\n        ${description ? html`<div class=\"example-description text-selectable\">${description}</div>` : ''}\n        <pre class=\"code-value text-selectable\"><code>${renderValue}</code></pre>\n      </div>\n    </details>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ApiDocumentationBase.js","sourceRoot":"","sources":["../../../src/elements/amf/ApiDocumentationBase.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable lit-a11y/click-events-have-key-events */\n/* eslint-disable class-methods-use-this */\nimport { html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { IApiCustomDomainProperty, ApiExampleGenerator, AmfShapes, ApiDefinitions } from '@api-client/core/build/browser.js';\nimport { EventTypes } from '../../events/amf/EventTypes.js';\nimport { SchemaExample } from '../../amf/types.js';\nimport ApiElement from '../ApiElement.js';\nimport '../../define/amf/api-annotation-document.js';\nimport '../../define/highlight/marked-highlight.js';\nimport '../../define/ui/ui-icon.js';\nimport '../../define/ui/ui-button.js';\nimport '../../define/ui/ui-collapse.js';\n\n/**\n * A base class for the documentation components with common templates and functions.\n */\nexport class ApiDocumentationBase extends ApiElement {\n  protected domainIdValue?: string;\n\n  /** \n   * The domain id of the object to render.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) get domainId(): string | undefined {\n    return this.domainIdValue;\n  }\n\n  set domainId(value: string | undefined) {\n    const old = this.domainIdValue;\n    if (old === value) {\n      return;\n    }\n    this.domainIdValue = value;\n    this.requestUpdate('domainId', old);\n    if (value) {\n      this.processDebounce();\n    }\n  }\n\n  /** \n   * The timeout after which the `queryGraph()` function is called \n   * in the debouncer.\n   * @attribute\n   */\n  @property({ type: Number }) queryDebouncerTimeout?: number;\n\n  protected examplesValue?: SchemaExample[];\n\n  protected debounceValue?: any;\n\n  constructor() {\n    super();\n    this.queryDebouncerTimeout = 1;\n    this.eventsTarget.addEventListener(EventTypes.Store.graphChange, this.graphChangeHandler.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.domainId) {\n      this.processDebounce();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.debounceValue) {\n      clearTimeout(this.debounceValue);\n      this.debounceValue = undefined;\n    }\n  }\n\n  /**\n   * Handler for the event dispatched by the store when the graph model change.\n   */\n  protected graphChangeHandler(): void {\n    this.processDebounce();\n  }\n\n  /**\n   * Calls the `queryGraph()` function in a debouncer.\n   */\n  protected processDebounce(): void {\n    if (this.debounceValue) {\n      clearTimeout(this.debounceValue);\n    }\n    this.debounceValue = setTimeout(() => {\n      this.debounceValue = undefined;\n      this.processGraph();\n    }, this.queryDebouncerTimeout);\n  }\n\n  /**\n   * The main function to use to process the AMF model.\n   * To be implemented by the child classes.\n   */\n  processGraph(): void | Promise<void> {\n    // ...\n  }\n\n  /**\n   * At current state there's no way to tell where to navigate when relative\n   * link is clicked. To prevent 404 anchors this prevents any relative link click.\n   */\n  clickHandler(e: Event): void {\n    const node = (e.target as HTMLElement);\n    if (node.localName !== 'a') {\n      return;\n    }\n    // target.href is always absolute, need attribute value to test for\n    // relative links.\n    const href = node.getAttribute('href');\n    if (!href) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    const ch0 = href[0];\n    if (['.', '/'].indexOf(ch0) !== -1) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  }\n\n  /**\n   * A handler for the section toggle button click.\n   */\n  sectionToggleClickHandler(e: Event): void {\n    const button = (e.currentTarget as HTMLElement);\n    const prop = button.dataset.ctrlProperty;\n    if (!prop) {\n      return;\n    }\n    (this as any)[prop] = !(this as any)[prop];\n  }\n\n  /**\n   * @param examples The list of examples to evaluate\n   * @param mediaType The media type to use with examples processing.\n   */\n  protected evaluateExamples(examples: AmfShapes.IApiDataExample[], mediaType: string): SchemaExample[] {\n    return examples.map((example) => this.evaluateExample(example, mediaType))\n  }\n\n  /**\n   * @param example The example to evaluate\n   * @param mediaType The media type to use with examples processing.\n   */\n  protected evaluateExample(example: AmfShapes.IApiDataExample, mediaType: string): SchemaExample {\n    let value;\n    if (mediaType) {\n      const generator = new ApiExampleGenerator();\n      value = generator.read(example, mediaType);\n    } else {\n      value = example.value || '';\n    }\n    const { name, displayName } = example;\n    const label = displayName || name;\n    const result: SchemaExample = {\n      ...example,\n      renderValue: value,\n    };\n    if (label && !label.startsWith('example_')) {\n      result.label = label;\n    }\n    return result;\n  }\n\n  /**\n   * @returns The template for the section toggle button\n   */\n  protected sectionToggleTemplate(ctrlProperty: string): TemplateResult | string {\n    const label = (this as any)[ctrlProperty] ? 'Hide' : 'Show';\n    return html`\n    <ui-button class=\"section-toggle\" type=\"text\">\n      ${label} <ui-icon icon=\"arrowDropDown\" role=\"presentation\" class=\"toggle-icon\"></ui-icon>\n    </ui-button>\n    `;\n  }\n\n  /**\n   * @param label The section label.\n   * @param openedProperty The name of the element property to be toggled when interacting with the toggle button.\n   * @param content The content to render.\n   * @returns The template for a toggle section with a content.\n   */\n  protected paramsSectionTemplate(label: string, openedProperty: string, content: TemplateResult | (TemplateResult | string)[], opts: ({ innerSection?: boolean }) = {}): TemplateResult {\n    const opened = (this as any)[openedProperty];\n    const { innerSection } = opts;\n    const containerClasses = {\n      'params-section': !innerSection,\n      'surface2': !innerSection,\n      'inner-section': !!innerSection,\n    };\n    const titleClasses = {\n      'params-title': true,\n      opened,\n    };\n    return html`\n    <div class=\"${classMap(containerClasses)}\" data-controlled-by=\"${openedProperty}\">\n      <div \n        class=\"${classMap(titleClasses)}\"\n        data-ctrl-property=\"${openedProperty}\" \n        @click=\"${this.sectionToggleClickHandler}\"\n      >\n        <span class=\"label\">${label}</span>\n        ${this.sectionToggleTemplate(openedProperty)}\n      </div>\n      <ui-collapse .open=\"${opened}\">\n        ${content}\n      </ui-collapse>\n    </div>\n    `;\n  }\n\n  /**\n   * @param model The parameter to render.\n   * @param dataName Optional data-name for this parameter\n   * @returns The template for the schema item document\n   */\n  protected schemaItemTemplate(model: ApiDefinitions.IApiParameter, dataName?: string): TemplateResult {\n    return html`\n    <api-parameter-document \n      .parameter=\"${model}\" \n      class=\"property-item\"\n      data-name=\"${ifDefined(dataName)}\"\n    ></api-parameter-document>\n    `;\n  }\n\n  /**\n   * @param description The description to render.\n   * @returns The template for the markdown description.\n   */\n  protected descriptionTemplate(description?: string): TemplateResult | string {\n    if (!description) {\n      return '';\n    }\n    return html`\n    <div class=\"api-description\">\n      <marked-highlight \n        .markdown=\"${description}\" \n        sanitize\n        @click=\"${this.clickHandler}\"\n      >\n        <div slot=\"markdown-html\" class=\"markdown-body text-selectable\"></div>\n      </marked-highlight>\n    </div>`;\n  }\n\n  /**\n   * @returns The template for the custom domain properties\n   */\n  protected customDomainPropertiesTemplate(customDomainProperties: IApiCustomDomainProperty[] = []): TemplateResult | string {\n    if (!customDomainProperties.length) {\n      return '';\n    }\n    return html`\n    <api-annotation-document\n      .customProperties=\"${customDomainProperties}\"\n    ></api-annotation-document>\n    `;\n  }\n\n  /**\n   * @returns The template for the examples section.\n   */\n  protected examplesTemplate(): TemplateResult | string {\n    const examples = this.examplesValue;\n    if (!Array.isArray(examples)) {\n      return '';\n    }\n    const filtered = examples.filter((item) => !!item.renderValue);\n    if (!filtered.length) {\n      return '';\n    }\n    return html`\n    <div class=\"examples\">\n    ${filtered.map((item) => this.exampleTemplate(item))}\n    </div>\n    `;\n  }\n\n  /**\n   * @returns The template for a single example\n   */\n  protected exampleTemplate(item: SchemaExample): TemplateResult | string {\n    const { description, renderValue, label } = item;\n    return html`\n    <details class=\"schema-example\">\n      <summary>Example${label ? `: ${label}` : ''}</summary>\n      <div class=\"example-content\">\n        ${description ? html`<div class=\"example-description text-selectable\">${description}</div>` : ''}\n        <pre class=\"code-value text-selectable\"><code>${renderValue}</code></pre>\n      </div>\n    </details>\n    `;\n  }\n}\n"]}

package/dist/elements/amf/ApiDocumentationDocument.element.js

@@ -6,7 +6,6 @@ import { Events } from '../../events/amf/Events.js';
  * the AMF graph model.
  */
 export default class ApiDocumentationDocument extends ApiDocumentationBase {
-    documentationValue;
     /**
      * The serialized to a JS object graph model
      */

package/dist/elements/amf/ApiDocumentationDocument.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApiDocumentationDocument.element.js","sourceRoot":"","sources":["../../../src/elements/amf/ApiDocumentationDocument.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAGpD;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,oBAAoB;IAC9D,kBAAkB,CAA8C;IAE1E;;OAEG;IACH,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACjC,CAAC;IAED,IAAI,aAAa,CAAC,KAAK;QACrB,MAAM,GAAG,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACpC,IAAI,GAAG,KAAK,KAAK,EAAE;YACjB,OAAO;SACR;QACD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;QAChC,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED;;OAEG;IACM,KAAK,CAAC,YAAY;QACzB,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;QAC3B,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,aAAa;QACjB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QACD,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,kBAAkB,CAAC,EAAE,KAAK,QAAQ,EAAE;YACtE,oDAAoD;YACpD,OAAO;SACR;QACD,IAAI;YACF,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;YAC5D,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;SAChC;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC;YACpC,MAAM,EAAE,GAAG,CAAU,CAAC;YACtB,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YACpD,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,+CAA+C,EAAE,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SAC/G;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACrC,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QACD,OAAO,IAAI,CAAA;MACT,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;MACxB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;KAC3C,CAAC;IACJ,CAAC;IAED;;OAEG;IACO,aAAa,CAAC,IAAsC;QAC5D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,KAAK,EAAE;YACV,OAAO,EAAE,CAAC;SACX;QACD,OAAO,IAAI,CAAA;;;8CAG+B,KAAK;;;KAG9C,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { ApiDefinitions } from '@api-client/core/build/browser.js';\nimport { ApiDocumentationBase } from './ApiDocumentationBase.js';\nimport { Events } from '../../events/amf/Events.js';\n\n\n/**\n * A web component that renders the documentation page for an API documentation (like in RAML documentations) built from \n * the AMF graph model.\n */\nexport default class ApiDocumentationDocument extends ApiDocumentationBase {\n  protected documentationValue: ApiDefinitions.IApiDocumentation | undefined\n\n  /**\n   * The serialized to a JS object graph model\n   */\n  get documentation(): ApiDefinitions.IApiDocumentation | undefined {\n    return this.documentationValue;\n  }\n\n  set documentation(value) {\n    const old = this.documentationValue;\n    if (old === value) {\n      return;\n    }\n    this.documentationValue = value;\n    this.processGraph();\n  }\n\n  /**\n   * Queries the graph store for the API Documentation data.\n   */\n  override async processGraph(): Promise<void> {\n    await this.queryDocument();\n    this.requestUpdate();\n    await this.updateComplete;\n  }\n\n  /**\n   * Queries for the documentation model.\n   */\n  async queryDocument(): Promise<void> {\n    const { domainId } = this;\n    if (!domainId) {\n      return;\n    }\n    if (this.documentationValue && this.documentationValue.id === domainId) {\n      // in case it was set by the parent via the property\n      return;\n    }\n    try {\n      const info = await Events.Documentation.get(this, domainId);\n      this.documentationValue = info;\n    } catch (e) {\n      this.documentationValue = undefined;\n      const ex = e as Error;\n      Events.Telemetry.exception(this, ex.message, false);\n      Events.Reporting.error(this, ex, `Unable to query for API documentation data: ${ex.message}`, this.localName);\n    }\n  }\n\n  override render(): TemplateResult {\n    const docs = this.documentationValue;\n    if (!docs) {\n      return html``;\n    }\n    return html`\n    ${this.titleTemplate(docs)}\n    ${this.descriptionTemplate(docs.description)}\n    `;\n  }\n\n  /**\n   * @returns The template for the Documentation title.\n   */\n  protected titleTemplate(docs: ApiDefinitions.IApiDocumentation): TemplateResult | string {\n    const { title } = docs;\n    if (!title) {\n      return '';\n    }\n    return html`\n    <div class=\"documentation-header\">\n      <div class=\"documentation-title\">\n        <span class=\"label text-selectable\">${title}</span>\n      </div>\n    </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ApiDocumentationDocument.element.js","sourceRoot":"","sources":["../../../src/elements/amf/ApiDocumentationDocument.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAGpD;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,oBAAoB;IAGxE;;OAEG;IACH,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACjC,CAAC;IAED,IAAI,aAAa,CAAC,KAAK;QACrB,MAAM,GAAG,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACpC,IAAI,GAAG,KAAK,KAAK,EAAE;YACjB,OAAO;SACR;QACD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;QAChC,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED;;OAEG;IACM,KAAK,CAAC,YAAY;QACzB,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;QAC3B,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,aAAa;QACjB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QACD,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,kBAAkB,CAAC,EAAE,KAAK,QAAQ,EAAE;YACtE,oDAAoD;YACpD,OAAO;SACR;QACD,IAAI;YACF,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;YAC5D,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;SAChC;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC;YACpC,MAAM,EAAE,GAAG,CAAU,CAAC;YACtB,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YACpD,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,+CAA+C,EAAE,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SAC/G;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACrC,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QACD,OAAO,IAAI,CAAA;MACT,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;MACxB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;KAC3C,CAAC;IACJ,CAAC;IAED;;OAEG;IACO,aAAa,CAAC,IAAsC;QAC5D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,KAAK,EAAE;YACV,OAAO,EAAE,CAAC;SACX;QACD,OAAO,IAAI,CAAA;;;8CAG+B,KAAK;;;KAG9C,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { ApiDefinitions } from '@api-client/core/build/browser.js';\nimport { ApiDocumentationBase } from './ApiDocumentationBase.js';\nimport { Events } from '../../events/amf/Events.js';\n\n\n/**\n * A web component that renders the documentation page for an API documentation (like in RAML documentations) built from \n * the AMF graph model.\n */\nexport default class ApiDocumentationDocument extends ApiDocumentationBase {\n  protected documentationValue: ApiDefinitions.IApiDocumentation | undefined\n\n  /**\n   * The serialized to a JS object graph model\n   */\n  get documentation(): ApiDefinitions.IApiDocumentation | undefined {\n    return this.documentationValue;\n  }\n\n  set documentation(value) {\n    const old = this.documentationValue;\n    if (old === value) {\n      return;\n    }\n    this.documentationValue = value;\n    this.processGraph();\n  }\n\n  /**\n   * Queries the graph store for the API Documentation data.\n   */\n  override async processGraph(): Promise<void> {\n    await this.queryDocument();\n    this.requestUpdate();\n    await this.updateComplete;\n  }\n\n  /**\n   * Queries for the documentation model.\n   */\n  async queryDocument(): Promise<void> {\n    const { domainId } = this;\n    if (!domainId) {\n      return;\n    }\n    if (this.documentationValue && this.documentationValue.id === domainId) {\n      // in case it was set by the parent via the property\n      return;\n    }\n    try {\n      const info = await Events.Documentation.get(this, domainId);\n      this.documentationValue = info;\n    } catch (e) {\n      this.documentationValue = undefined;\n      const ex = e as Error;\n      Events.Telemetry.exception(this, ex.message, false);\n      Events.Reporting.error(this, ex, `Unable to query for API documentation data: ${ex.message}`, this.localName);\n    }\n  }\n\n  override render(): TemplateResult {\n    const docs = this.documentationValue;\n    if (!docs) {\n      return html``;\n    }\n    return html`\n    ${this.titleTemplate(docs)}\n    ${this.descriptionTemplate(docs.description)}\n    `;\n  }\n\n  /**\n   * @returns The template for the Documentation title.\n   */\n  protected titleTemplate(docs: ApiDefinitions.IApiDocumentation): TemplateResult | string {\n    const { title } = docs;\n    if (!title) {\n      return '';\n    }\n    return html`\n    <div class=\"documentation-header\">\n      <div class=\"documentation-title\">\n        <span class=\"label text-selectable\">${title}</span>\n      </div>\n    </div>\n    `;\n  }\n}\n"]}

package/dist/elements/amf/ApiNavigation.element.js

@@ -23,20 +23,6 @@ const defaultPadding = 40;
  * @fires graphload - When the graph was loaded
  */
 export default class ApiNavigation extends ApiElement {
-    queryingInternal;
-    abortControllerInternal;
-    domainIdInternal;
-    domainTypeInternal;
-    selectedItemInternal;
-    focusedItemInternal;
-    /**
-     * The processed and final query term for the list items.
-     */
-    queryInternal;
-    documentMeta;
-    layoutInternal;
-    endpointsExpandedInternal;
-    endpointsInternal;
     get endpoints() {
         const { endpointsInternal } = this;
         if (!endpointsInternal) {
@@ -44,7 +30,6 @@ export default class ApiNavigation extends ApiElement {
         }
         return [...endpointsInternal];
     }
-    documentationsInternal;
     get documentations() {
         const { documentationsInternal } = this;
         if (!documentationsInternal) {
@@ -52,7 +37,6 @@ export default class ApiNavigation extends ApiElement {
         }
         return [...documentationsInternal];
     }
-    schemasInternal;
     get schemas() {
         const { schemasInternal } = this;
         if (!schemasInternal) {
@@ -60,7 +44,6 @@ export default class ApiNavigation extends ApiElement {
         }
         return [...schemasInternal];
     }
-    securityInternal;
     get security() {
         const { securityInternal } = this;
         if (!securityInternal) {
@@ -68,14 +51,6 @@ export default class ApiNavigation extends ApiElement {
         }
         return [...securityInternal];
     }
-    /**
-     * Holds a list of ids of currently opened endpoints.
-     */
-    openedEndpoints;
-    /**
-     * Cached list of all list elements
-     */
-    itemsInternal;
     get items() {
         const { itemsInternal } = this;
         if (!itemsInternal) {
@@ -83,17 +58,9 @@ export default class ApiNavigation extends ApiElement {
         }
         return [...itemsInternal];
     }
-    sourceEndpoints;
-    shiftTabPressedInternal;
     get shiftTabPressed() {
         return this.shiftTabPressedInternal || false;
     }
-    summarySelectedInternal;
-    addingSchemaTypeInternal;
-    addingSchemaInternal;
-    addingDocumentationInternal;
-    addingExternalInternal;
-    addingEndpointInternal;
     /**
      * When true then the element is currently querying for the graph data.
      */
@@ -258,70 +225,6 @@ export default class ApiNavigation extends ApiElement {
         const { isFragment, isLibrary } = documentMeta;
         return !isFragment && !isLibrary;
     }
-    /**
-     * When this property change the element queries the graph store for the data model.
-     * It can be skipped when the application calls the `queryGraph()` method imperatively.
-     * @attribute
-     */
-    apiId;
-    /**
-     * If set it renders `API summary` menu option.
-     * It will allow to set `domainId` and `domainType` to `summary`
-     * when this option is set.
-     * @attribute
-     */
-    summary;
-    /**
-     * A label for the `summary` section.
-     * @attribute
-     */
-    summaryLabel;
-    /**
-     * Determines and changes state of documentation panel.
-     * @attribute
-     */
-    documentationsOpened;
-    /**
-     * Determines and changes state of schemas (types) panel.
-     * @attribute
-     */
-    schemasOpened;
-    /**
-     * Determines and changes state of security panel.
-     * @attribute
-     */
-    securityOpened;
-    /**
-     * Determines and changes state of endpoints panel.
-     * @attribute
-     */
-    endpointsOpened;
-    /**
-     * Size of endpoint indentation for nested resources.
-     * In pixels.
-     *
-     * The attribute name for this property is `indent-size`. Note, that this
-     * will change to web consistent name `indentSize` in the future.
-     * @attribute
-     */
-    indentSize;
-    /**
-     * When set it renders an input to filter the menu items.
-     * @attribute
-     */
-    filter;
-    /**
-     * When set the element won't query the store when attached to the DOM.
-     * Instead set the `apiId` property or directly call the `queryGraph()` function.
-     * @attribute
-     */
-    manualQuery;
-    /**
-     * When set it enables graph items editing functionality.
-     * The user can double-click on a menu item and edit its name.
-     * @attribute
-     */
-    edit;
     constructor() {
         super();
         this.summaryLabel = 'Summary';