@api-client/ui 0.0.17 → 0.1.0

package/src/elements/schema-design/SchemaNamespaceSelector.ts

@@ -1,78 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { property } from 'lit/decorators.js'
-import AppNavigation from '../navigation/internals/AppNavigationElement.js'
-import { DataNamespaceKind } from '@api-client/core/browser.js'
-import { DataNamespace } from '@api-client/core/legacy.js'
-import '../../md/icons/ui-icon.js'
-
-/**
- * An element that specializes in rendering a navigation dropdown for the schema / data namespace.
- *
- * @fires open - When the element is "open" property change internally through user interaction.
- */
-export default class SchemaNamespaceSelector extends AppNavigation {
-  /**
-   * The instance of the root DataNamespace.
-   */
-  @property({ type: Object }) accessor root: DataNamespace | undefined
-
-  /**
-   * When true, the selector renders the selection tree, not only the label.
-   * @attr
-   */
-  @property({ type: Boolean, reflect: true }) accessor renderTree: boolean | undefined
-
-  override connectedCallback(): void {
-    super.connectedCallback()
-    this.setAttribute('aria-label', 'Namespace selection')
-  }
-
-  protected _toggleNsSelector(): void {
-    this.renderTree = !this.renderTree
-    this.dispatchEvent(new Event('open'))
-  }
-
-  override render(): TemplateResult | string {
-    const { root, selected, renderTree: opened } = this
-    if (!root) {
-      return html``
-    }
-    const parent = selected ? root.findNamespace(selected) : root
-    if (!parent) {
-      // TODO: This should still render but with the invalid selection state so the user
-      // can change the selection.
-      return html``
-    }
-    return html`
-      <div class="section-title">Namespace</div>
-      <button class="selector-label" @click="${this._toggleNsSelector}">
-        <span class="label">${parent.info.name}</span>
-        <ui-icon icon="arrowDropDown" class="toggle-icon"></ui-icon>
-      </button>
-
-      ${opened ? this._namespaceTreeTemplate(root) : ''}
-    `
-  }
-
-  protected _namespaceTreeTemplate(root: DataNamespace): TemplateResult {
-    const children = root.listNamespaces()
-    const contents = children.map((item) => this._nsItemTemplate(item))
-    return this.renderOuterList(contents)
-  }
-
-  protected _nsChildrenTemplate(item: DataNamespace): TemplateResult {
-    const children = item.listNamespaces()
-    const contents = children.map((current) => this._nsItemTemplate(current))
-    return this.renderParentListItem(item.key, item.kind, item.info.name || 'Unnamed namespace', contents)
-  }
-
-  protected _nsItemTemplate(item: DataNamespace): TemplateResult {
-    const hasChildren = item.items.some((i) => i.kind === DataNamespaceKind)
-    if (hasChildren) {
-      return this._nsChildrenTemplate(item)
-    }
-    const label = item.info.name || 'Unnamed namespace'
-    const content = this.renderItemContent('schemaNamespace', label)
-    return this.renderListItem(item.key, item.kind, label, content)
-  }
-}

package/src/elements/schema-design/data-association-form.ts

@@ -1,9 +0,0 @@
-import Element from './AssociationFormElement.js'
-
-window.customElements.define('data-association-form', Element)
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'data-association-form': Element
-  }
-}

package/src/elements/schema-design/data-entity-editor.ts

@@ -1,9 +0,0 @@
-import Element from './DataEntityEditorElement.js'
-
-window.customElements.define('data-entity-editor2', Element)
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'data-entity-editor2': Element
-  }
-}

package/src/elements/schema-design/data-entity-form.ts

@@ -1,9 +0,0 @@
-import Element from './EntityFormElement.js'
-
-window.customElements.define('data-entity-form', Element)
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'data-entity-form': Element
-  }
-}

package/src/elements/schema-design/data-model-visualization.ts

@@ -1,9 +0,0 @@
-import Element from './DataModelVisualizationElement.js'
-
-window.customElements.define('data-model-visualization', Element)
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'data-model-visualization': Element
-  }
-}

package/src/elements/schema-design/data-property-form.ts

@@ -1,9 +0,0 @@
-import Element from './PropertyFormElement.js'
-
-window.customElements.define('data-property-form', Element)
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'data-property-form': Element
-  }
-}

package/src/elements/schema-design/data-schema-document.ts

@@ -1,9 +0,0 @@
-import Element from './DataSchemaDocument.js'
-
-window.customElements.define('data-schema-document', Element)
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'data-schema-document': Element
-  }
-}

package/src/elements/schema-design/schemaCommon.ts

@@ -1,375 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  :host {
-    --column-padding-left: 84px;
-    --property-border-width: 3px;
-    --property-border-color: var(--primary-color, #2196f3);
-    --property-container-padding: 12px;
-  }
-
-  .property-container {
-    display: flex;
-    align-items: flex-start;
-    flex: 1;
-  }
-
-  .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;
-  }
-
-  .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,
-  .no-properties {
-    border-left: var(--property-border-width) var(--property-border-color) dashed;
-    padding: 24px 12px;
-    margin: 0;
-  }
-
-  .no-properties {
-    border-left-style: solid;
-  }
-
-  .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);
-  }
-
-  .shape-children: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-weight: var(--property-name-font-weight, var(--api-type-document-property-name-font-weight, 500));
-    color: var(--property-name-color, var(--api-type-document-property-color, inherit));
-    font-size: var(--property-name-font-size, var(--api-type-document-property-name-font-size, 1.2rem));
-  }
-
-  .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;
-  }
-
-  .param-type:first-letter {
-    text-transform: uppercase;
-  }
-
-  .schema-property-item {
-    display: flex;
-    align-items: flex-start;
-    margin: 8px 0;
-  }
-
-  .schema-property-label {
-    font-weight: var(
-      --property-schema-property-label-font-weight,
-      var(--api-type-document-property-range-attribute-label-font-weight, 500)
-    );
-    margin-right: 8px;
-  }
-
-  .schema-property-label.example {
-    margin-top: 8px;
-  }
-
-  .schema-property-value {
-    word-break: break-all;
-  }
-
-  .enum-items {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 0;
-  }
-
-  .enum-items li {
-    list-style: none;
-  }
-
-  .schema-card {
-    background-color: var(--md-sys-color-surface-variant);
-    border-radius: var(--md-sys-shape-corner-large);
-    padding: 0px 16px;
-  }
-
-  .schema-card > summary {
-    padding: 12px 0;
-  }
-
-  .example-content {
-    padding-bottom: 20px;
-  }
-
-  .example-content pre {
-    white-space: pre-wrap;
-    word-break: break-all;
-    margin: 0;
-  }
-
-  .schema-example {
-    margin: 20px 12px 20px 0;
-  }
-
-  .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;
-    background-color: var(--api-example-title-background-color, #ff9800);
-    color: var(--api-example-title-color, #000);
-    border-radius: 4px;
-    cursor: default;
-    transition: border-radius ease-in-out 0.2s;
-  }
-
-  .schema-example[open] summary {
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
-  }
-
-  .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;
-  }
-
-  .example-items li {
-    display: block;
-    margin: 4px 0;
-    padding: 4px;
-    width: 100%;
-    white-space: pre-wrap;
-    background-color: var(--operation-params-example-background-color, var(--code-background-color));
-    color: var(--operation-params-example-color, var(--code-color, inherit));
-  }
-
-  .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));
-    font-size: var(--pill-font-size, var(--api-type-document-trait-font-size, inherit));
-    padding: var(--pill-padding, var(--api-type-document-trait-padding, 2px 12px));
-    margin: 4px;
-  }
-
-  .pill.warning {
-    background-color: var(--pill-warning-background-color, #ffc107);
-    color: var(--pill-warning-color, var(--primary-text-color, #000));
-  }
-
-  .pill.primary {
-    background-color: var(--pill-primary-background-color, #1565c0);
-    color: var(--pill-primary-color, #fff);
-  }
-
-  .pill:first-child {
-    margin-left: 0;
-  }
-
-  .pill:last-child {
-    margin-right: 0;
-  }
-
-  .param-pills {
-    display: flex;
-    align-items: center;
-  }
-
-  .property-actions {
-    margin-right: 12px;
-  }
-`

package/src/exceptions/FileLoadException.ts

@@ -1,8 +0,0 @@
-import { Exception } from '@api-client/core/browser.js'
-
-export default class FileLoadException extends Exception {
-  static override code = 'E_FILE_LOAD_EXCEPTION'
-  static override status = 500
-  static override message = 'Unable to load the file.'
-  static override help = 'Make sure you are connected to the internet and are logged in.'
-}

package/src/exceptions/MisconfigurationException.ts

@@ -1,8 +0,0 @@
-import { Exception } from '@api-client/core/browser.js'
-
-export default class MisconfigurationException extends Exception {
-  static override code = 'E_MISCONFIGURATION_EXCEPTION'
-  static override status = 500
-  static override message = 'Misconfiguration error.'
-  static override help = 'Please check your configuration settings.'
-}

package/src/sdk/UiSdk.ts

@@ -1,47 +0,0 @@
-import { StoreSdk } from '@api-client/core/browser.js'
-
-/**
- * An SDK library for the UI apps.
- */
-export class UiSdk extends StoreSdk {
-  // override get token(): string | undefined {
-  //   return this.session.userToken;
-  // }
-
-  // override set token(value: string | undefined) {
-  //   // throw new Error(`Do not set tokens directly. Call sdk.session.updateUserToken()`);
-  //   if (value) {
-  //     this.session.updateUserToken(value);
-  //   }
-  // }
-
-  // override get refreshToken(): string | undefined {
-  //   return this.session.refreshToken;
-  // }
-
-  // override set refreshToken(value: string | undefined) {
-  //   throw new Error(`Do not set tokens directly. Call sdk.session.setTokens()`);
-  // }
-
-  /**
-   * The currently selected organization.
-   * Many SDK calls won't work if there's no `organizationId` set.
-   */
-  organizationId?: string
-
-  /**
-   * Must be called to setup authentication with the API.
-   */
-  async initialize(): Promise<void> {
-    // await this.session.init();
-    // await this.events.init()
-  }
-
-  ensureOrganization(): string {
-    const { organizationId } = this
-    if (!organizationId) {
-      throw new Error(`The organizationId is not set on the SDK.`)
-    }
-    return organizationId
-  }
-}