@api-client/ui 0.2.0 → 0.2.3

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

@@ -1,150 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  .api-description marked-highlight {
-    margin: 20px 0;
-    padding: 0;
-  }
-
-  .endpoint-url {
-    background-color: var(--md-sys-color-primary-container);
-    color: var(--md-sys-color-on-primary-container);
-    border-radius: var(--md-sys-shape-corner-medium);
-    padding: 16px;
-
-    font-family: var(--md-sys-typescale-title-medium-font);
-    font-weight: var(--md-sys-typescale-title-medium-weight);
-    font-size: var(--md-sys-typescale-title-medium-size);
-    letter-spacing: var(--md-sys-typescale-title-medium-tracking);
-    line-height: var(--md-sys-typescale-title-medium-height);
-
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-  }
-
-  .endpoint-url .http-label {
-    text-transform: uppercase;
-    white-space: nowrap;
-    margin: 0;
-  }
-
-  .endpoint-url .url-value {
-    flex: 1;
-    margin-left: 12px;
-    word-break: break-all;
-  }
-
-  .property-item {
-    margin: 20px 0;
-  }
-
-  .params-section {
-    margin: 20px 0;
-    border-radius: var(--md-sys-shape-corner-medium);
-    box-shadow: var(--md-sys-elevation-1);
-    padding: 12px;
-  }
-
-  .inner-section {
-    margin: 20px 0;
-    padding: 12px;
-  }
-
-  .params-title {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-
-    cursor: default;
-    user-select: none;
-  }
-
-  .params-title .label {
-    display: block;
-
-    font-family: var(--md-sys-typescale-title-large-font);
-    font-weight: var(--md-sys-typescale-title-large-weight);
-    font-size: var(--md-sys-typescale-title-large-size);
-    letter-spacing: var(--md-sys-typescale-title-large-tracking);
-    line-height: var(--md-sys-typescale-title-large-height);
-  }
-
-  .section-toggle {
-    margin-left: auto;
-  }
-
-  .toggle-icon {
-    transition: transform 0.23s linear;
-  }
-
-  .opened .toggle-icon {
-    transform: rotate(180deg);
-  }
-
-  .media-type {
-    margin: 12px 0;
-  }
-
-  .media-type span {
-    font-weight: 500;
-  }
-
-  .amf-media-types {
-    margin: 12px 0;
-  }
-
-  .deprecated {
-    text-decoration: line-through;
-  }
-
-  .deprecated-message {
-    font-weight: bold;
-    margin: 12px 0;
-    padding: 12px 8px;
-    background-color: var(--deprecated-message-background-color, #ffc107);
-    color: var(--deprecated-message-color, #000);
-    display: flex;
-    align-items: center;
-    border-radius: 4px;
-  }
-
-  .deprecated-message .message {
-    margin-left: 12px;
-  }
-
-  .empty-info {
-    font-size: 1.1rem;
-    margin-left: 24px;
-    padding: 12px 0;
-  }
-
-  .example-description {
-    margin: 12px 0;
-  }
-
-  .text-selectable {
-    user-select: text;
-  }
-
-  .markdown-body {
-    max-width: 900px;
-  }
-
-  .array-form-item {
-    padding-left: 8px;
-    margin-bottom: 20px;
-  }
-
-  .array-title > .label {
-    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);
-  }
-
-  .array-title {
-    margin-bottom: 12px;
-  }
-`

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

@@ -1,376 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  :host {
-    --column-padding-left: 84px;
-    --property-border-width: 3px;
-    --property-border-color: var(--md-sys-color-surface-tint, #2196f3);
-    --property-container-padding: 12px;
-  }
-
-  .property-container {
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .property-container.simple {
-    flex-direction: column;
-  }
-
-  .property-border {
-    width: var(--property-border-width);
-    min-width: var(--property-border-width);
-    align-self: stretch;
-    background-color: var(--property-border-color);
-  }
-
-  .property-value {
-    padding: var(--property-container-padding) 0px;
-    flex: 1;
-
-    font-family: var(--md-sys-typescale-body-large-font);
-    font-weight: var(--md-sys-typescale-body-large-weight);
-    font-size: var(--md-sys-typescale-body-large-size);
-    letter-spacing: var(--md-sys-typescale-body-large-tracking);
-    line-height: var(--md-sys-typescale-body-large-height);
-  }
-
-  .property-container:last-of-type .property-border {
-    align-self: flex-start;
-    /* padding of the content container + title container / 2 + border size  / 2 */
-    height: calc(var(--property-container-padding) + 52px / 2 + var(--property-border-width) / 2);
-    border-bottom-left-radius: var(--property-border-width);
-  }
-
-  .and-union-member:not(:last-of-type) .property-container:last-of-type .property-border {
-    align-self: stretch;
-    height: auto;
-    border-bottom-left-radius: 0;
-  }
-
-  .inheritance-label {
-    border-left: var(--property-border-width) var(--property-border-color) dashed;
-    padding: 24px 12px;
-    margin: 0;
-  }
-
-  .shape-children .property-container:first-of-type .property-border {
-    border-top-right-radius: var(--property-border-width);
-  }
-
-  .shape-children {
-    display: flex;
-    position: relative;
-  }
-
-  .shape-children > .property-border {
-    background-color: var(--property-children-border-color, #bdbdbd);
-    margin-right: 21px;
-  }
-
-  .shape-children::before {
-    content: '';
-    width: calc(18px + var(--property-border-width) * 2);
-    height: var(--property-border-width);
-    background-color: var(--property-border-color);
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    border-bottom-left-radius: var(--property-border-width);
-  }
-
-  /* :not(.and-union-member) > :last-of-type > .property-border {
-    background-color: transparent;
-  } */
-
-  .union-options {
-    padding: 12px 0px 12px 20px;
-    border-left: var(--property-border-width) var(--property-border-color) dashed;
-    box-sizing: border-box;
-  }
-
-  .shape-children:last-of-type > .property-border {
-    margin-bottom: 60px;
-  }
-
-  .property-decorator {
-    width: var(--column-padding-left);
-    align-self: stretch;
-    display: flex;
-    align-items: center;
-    padding-right: 20px;
-    color: var(--property-border-color);
-    box-sizing: border-box;
-  }
-
-  .property-decorator hr {
-    width: 100%;
-    border-color: currentColor;
-    border-width: var(--property-border-width);
-    border-style: solid;
-    border-top: none;
-  }
-
-  .property-decorator.scalar::after {
-    content: '';
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    min-width: 16px;
-    border-radius: 50%;
-    background-color: transparent;
-    border: 3px solid currentColor;
-  }
-
-  .property-decorator.object::after {
-    content: '';
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    min-width: 16px;
-    background-color: transparent;
-    border: 3px solid currentColor;
-  }
-
-  .property-decorator.object .object-toggle-icon {
-    cursor: pointer;
-  }
-
-  .object-toggle-icon {
-    width: 24px;
-    height: 24px;
-    min-width: 24px;
-    fill: currentColor;
-    transition: transform 0.23s linear;
-  }
-
-  .object-toggle-icon.opened {
-    transform: rotate(90deg);
-  }
-
-  .property-headline,
-  .property-container.simple .name-column {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    height: 52px;
-  }
-
-  .property-container:not(.simple) .name-column {
-    width: 140px;
-    margin-right: 20px;
-  }
-
-  .property-container:not(.simple) .description-column {
-    padding-left: var(--column-padding-left);
-  }
-
-  .property-container:not(.simple) .details-column {
-    padding-left: var(--column-padding-left);
-  }
-
-  .details-column {
-    align-self: stretch;
-  }
-
-  .param-name {
-    word-break: break-all;
-  }
-
-  .param-name .param-label {
-    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);
-  }
-
-  .param-name.required::after {
-    content: '*';
-    margin-left: -4px;
-  }
-
-  .param-name.deprecated {
-    text-decoration: line-through;
-  }
-
-  .param-name-secondary {
-    margin-left: 8px;
-  }
-
-  .headline-separator {
-    display: inline-block;
-    width: 1px;
-    background-color: gray;
-    align-self: stretch;
-    margin: 12px 20px;
-  }
-
-  .param-type {
-    margin: 12px 12px 12px 0;
-  }
-
-  .schema-property-item {
-    display: flex;
-    align-items: flex-start;
-    margin: 8px 0;
-  }
-
-  .schema-property-label {
-    margin-right: 8px;
-
-    font-family: var(--md-sys-typescale-label-medium-font);
-    font-weight: var(--md-sys-typescale-label-medium-weight);
-    font-size: var(--md-sys-typescale-label-medium-size);
-    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
-    line-height: var(--md-sys-typescale-label-medium-height);
-  }
-
-  .schema-property-label.example {
-    margin-top: 8px;
-  }
-
-  .schema-property-value {
-    word-break: break-all;
-
-    font-family: var(--md-sys-typescale-body-medium-font);
-    font-weight: var(--md-sys-typescale-body-medium-weight);
-    font-size: var(--md-sys-typescale-body-medium-size);
-    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
-    line-height: var(--md-sys-typescale-body-medium-height);
-  }
-
-  .enum-items {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 0;
-  }
-
-  .enum-items li {
-    list-style: none;
-  }
-
-  .schema-example {
-    margin-bottom: 12px;
-  }
-
-  .schema-example pre {
-    white-space: pre-wrap;
-    word-break: break-all;
-    margin: 0;
-    padding: 8px 4px;
-  }
-
-  .schema-example summary {
-    font-size: 1.1rem;
-    padding: 8px 12px;
-    border-radius: 8px;
-    cursor: default;
-
-    background-color: var(--md-sys-color-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  .schema-example[open] summary {
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
-  }
-
-  .example-content {
-    background-color: var(--md-sys-color-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-
-    border-bottom-right-radius: 8px;
-    border-bottom-left-radius: 8px;
-    padding: 0 8px;
-  }
-
-  .code-value {
-    margin: 0px 4px;
-    padding: 2px 4px;
-    background-color: var(--code-background-color);
-    word-break: break-all;
-    white-space: pre-wrap;
-  }
-
-  .code-value.inline {
-    padding: 0 4px;
-  }
-
-  .code-value,
-  .code-value code {
-    font-family: var(--code-font-family);
-    user-select: text;
-  }
-
-  .property-details {
-    margin: 20px 0;
-  }
-
-  .property-details summary {
-    margin: 20px 0;
-    cursor: default;
-  }
-  .property-details summary .label {
-    margin-left: 8px;
-  }
-
-  .example-items {
-    margin: 0;
-    padding: 0;
-    flex: 1;
-
-    font-family: var(--md-sys-typescale-body-medium-font);
-    font-weight: var(--md-sys-typescale-body-medium-weight);
-    font-size: var(--md-sys-typescale-body-medium-size);
-    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
-    line-height: var(--md-sys-typescale-body-medium-height);
-  }
-
-  .example-items li {
-    display: block;
-    margin: 4px 0;
-    padding: 4px;
-    width: 100%;
-    white-space: pre-wrap;
-
-    font-family: var(--md-sys-typescale-body-medium-font);
-    font-weight: var(--md-sys-typescale-body-medium-weight);
-    font-size: var(--md-sys-typescale-body-medium-size);
-    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
-    line-height: var(--md-sys-typescale-body-medium-height);
-  }
-
-  .pill {
-    background-color: var(--pill-background-color, var(--api-type-document-trait-background-color, #e5e5e5));
-    color: var(--pill-color, var(--api-type-document-trait-color, var(--primary-text-color, #000)));
-    border-radius: var(--pill-border-radius, var(--api-type-document-trait-border-radius, 12px));
-    padding: var(--pill-padding, var(--api-type-document-trait-padding, 2px 12px));
-    margin: 4px;
-
-    font-family: var(--md-sys-typescale-label-small-font);
-    font-weight: var(--md-sys-typescale-label-small-weight);
-    font-size: var(--md-sys-typescale-label-small-size);
-    letter-spacing: var(--md-sys-typescale-label-small-tracking);
-    line-height: var(--md-sys-typescale-label-small-height);
-  }
-
-  .pill.warning {
-    background-color: var(--pill-warning-background-color, #ffc107);
-    color: var(--pill-warning-color, var(--primary-text-color, #000));
-  }
-
-  .pill:first-child {
-    margin-left: 0;
-  }
-
-  .pill:last-child {
-    margin-right: 0;
-  }
-
-  .param-pills {
-    display: flex;
-    align-items: center;
-  }
-`

package/src/events/amf/ApiEvents.ts

@@ -1,47 +0,0 @@
-import type { IApiSummary } from '@api-client/core/amf/definitions/Api.js'
-import { EventTypes } from './EventTypes.js'
-import { ApiStoreContextEvent } from './BaseEvents.js'
-import { DocumentMeta } from '../../amf/types.js'
-
-export const ApiEvents = {
-  /**
-   * Reads basic info about the API.
-   * @param target The node on which to dispatch the event
-   */
-  summary: async (target: EventTarget): Promise<IApiSummary | undefined> => {
-    const e = new ApiStoreContextEvent(EventTypes.Api.summary)
-    target.dispatchEvent(e)
-    return e.detail.result as Promise<IApiSummary | undefined>
-  },
-
-  /**
-   * Reads the current API's protocols.
-   * @param target The node on which to dispatch the event
-   */
-  protocols: async (target: EventTarget): Promise<string[] | undefined> => {
-    const e = new ApiStoreContextEvent(EventTypes.Api.protocols)
-    target.dispatchEvent(e)
-    return e.detail.result as Promise<string[] | undefined>
-  },
-
-  /**
-   * Reads the current API's version.
-   * @param target The node on which to dispatch the event
-   */
-  version: async (target: EventTarget): Promise<string | undefined> => {
-    const e = new ApiStoreContextEvent(EventTypes.Api.version)
-    target.dispatchEvent(e)
-    return e.detail.result as Promise<string | undefined>
-  },
-
-  /**
-   * Reads the meta information about the currently loaded document from the store.
-   * @param target The node on which to dispatch the event
-   */
-  documentMeta: async (target: EventTarget): Promise<DocumentMeta | undefined> => {
-    const e = new ApiStoreContextEvent(EventTypes.Api.documentMeta)
-    target.dispatchEvent(e)
-    return e.detail.result as Promise<DocumentMeta | undefined>
-  },
-}
-Object.freeze(ApiEvents)

package/src/events/amf/BaseEvents.ts

@@ -1,96 +0,0 @@
-/**
- * A base class to use with store events that do not expect a result.
- */
-export class ApiStoreContextVoidEvent<T> extends CustomEvent<T> {
-  /**
-   * @param type The event type
-   * @param detail The optional detail object. It adds object's properties to the `detail` with the `result` property.
-   */
-  constructor(type: string, detail?: T) {
-    super(type, {
-      bubbles: true,
-      composed: true,
-      cancelable: true,
-      detail,
-    })
-  }
-}
-
-/**
- * Base event detail definition for the events that returns a `result`
- * property on the `detail` object
- */
-export interface StoreEventDetailWithResult<T> {
-  /**
-   * This property is set by the store, a promise resolved when the operation finish
-   * with the corresponding result.
-   */
-  result?: Promise<T> | null
-}
-
-/**
- * A base class to use with store events.
- */
-export class ApiStoreContextEvent<T> extends CustomEvent<StoreEventDetailWithResult<T>> {
-  /**
-   * @param type The event type
-   * @param detail The optional detail object. It adds object's properties to the `detail` with the `result` property.
-   */
-  constructor(type: string, detail?: T) {
-    const d = detail || {}
-    super(type, {
-      bubbles: true,
-      composed: true,
-      cancelable: true,
-      detail: {
-        result: undefined,
-        ...d,
-      },
-    })
-  }
-}
-
-export declare interface ApiStoreReadEventDetail<T> extends StoreEventDetailWithResult<T> {
-  /**
-   * The domain id of the domain object to read.
-   */
-  id: string
-  /**
-   * The domain id of the parent object (like endpoint for an operation).
-   */
-  parent?: string
-}
-
-/**
- * An event to be used to read an object from the API store.
- */
-export class ApiStoreReadEvent<T> extends ApiStoreContextEvent<ApiStoreReadEventDetail<T>> {
-  /**
-   * @param type The type of the event
-   * @param id The domain id of the object to read
-   * @param parent The domain id of the parent object (like endpoint for an operation).
-   */
-  constructor(type: string, id: string, parent?: string) {
-    super(type, { id, parent })
-  }
-}
-
-export declare interface ApiStoreReadBulkEventDetail<T> extends StoreEventDetailWithResult<T[]> {
-  /**
-   * The list of domain ids to read.
-   */
-  ids: string[]
-}
-
-/**
- * An event to be used to read a list of object from the API store.
- */
-export class ApiStoreReadBulkEvent<T> extends ApiStoreContextEvent<ApiStoreReadBulkEventDetail<T>> {
-  /**
-   * @param type The type of the event
-   * @param ids The list of domain ids to read. These must be of the same domain type.
-   */
-  constructor(type: string, ids: string[]) {
-    super(type, { ids })
-  }
-}

package/src/events/amf/DocumentationEvents.ts

@@ -1,29 +0,0 @@
-import type { IApiDocumentation } from '@api-client/core/amf/definitions/Api.js'
-import { EventTypes } from './EventTypes.js'
-import { ApiStoreReadEvent, ApiStoreContextEvent } from './BaseEvents.js'
-
-/** @typedef {import('../helpers/api').ApiDocumentation} ApiDocumentation */
-
-export const DocumentationEvents = {
-  /**
-   * Reads RAML's/OAS's documentation page.
-   * @param target The node on which to dispatch the event
-   * @param id The domain id of the documentation.
-   */
-  get: async (target: EventTarget, id: string): Promise<IApiDocumentation> => {
-    const e = new ApiStoreReadEvent(EventTypes.Documentation.get, id)
-    target.dispatchEvent(e)
-    return e.detail.result as Promise<IApiDocumentation>
-  },
-  /**
-   * Lists the documentation definitions for the API.
-   * @param target The node on which to dispatch the event
-   * @returns The list of documentations.
-   */
-  list: async (target: EventTarget): Promise<IApiDocumentation[]> => {
-    const e = new ApiStoreContextEvent(EventTypes.Documentation.list)
-    target.dispatchEvent(e)
-    return e.detail.result as Promise<IApiDocumentation[]>
-  },
-}
-Object.freeze(DocumentationEvents)