@api-client/ui 0.0.14 → 0.0.17

package/src/directives/if-property.ts

@@ -1,38 +1,37 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable no-param-reassign */
-import { noChange, nothing, PropertyPart, } from 'lit';
-import { directive, Directive, PartInfo, PartType } from 'lit/directive.js';
+import { noChange, nothing, type PropertyPart } from 'lit'
+import { directive, Directive, type PartInfo, PartType } from 'lit/directive.js'
 
 class IfPropertyDirective extends Directive {
   constructor(partInfo: PartInfo) {
-    super(partInfo);
+    super(partInfo)
     if (partInfo.type !== PartType.PROPERTY) {
-      throw new Error('ifProperty() can only be used in a property setter');
+      throw new Error('ifProperty() can only be used in a property setter')
     }
   }
 
-  override update(part: PropertyPart, [props]: any[]): any {
+  override update(part: PropertyPart, [props]: unknown[]): unknown {
     // const element = part.element as HTMLElement;
     if (props === undefined) {
       // (element as any)[part.name] = undefined;
-      return noChange;
+      return noChange
     }
-    return props;
+    return props
   }
 
   render(_value: unknown): typeof nothing {
     // nothing.
-    return nothing;
+    return nothing
   }
 }
 
-/** 
+/**
  * Ignores setting a property that is `undefined`.
- * 
+ *
  * This only works when setting properties.
- * 
+ *
  * @param property
  */
-export const ifProperty = directive(IfPropertyDirective);
+export const ifProperty = directive(IfPropertyDirective)
 
-export type { IfPropertyDirective };
+export type { IfPropertyDirective }

package/src/directives/live.ts

@@ -0,0 +1,79 @@
+import { noChange } from 'lit'
+import { directive } from 'lit/directive.js'
+import { AsyncDirective } from 'lit/async-directive.js'
+import { type LiveData } from '../core/LiveData.js'
+
+class LiveDataDirective extends AsyncDirective {
+  private liveData?: LiveData<object>
+  private path?: string
+  private unsubscribe?: () => void
+  private lastValue?: unknown
+
+  render(liveData: LiveData<object>, path: string, defaultVaue?: unknown) {
+    if (this.liveData !== liveData) {
+      this.liveData = liveData
+      this.path = path
+      this.unsubscribe?.()
+      this.unsubscribe = undefined
+      if (this.isConnected) {
+        this.subscribe()
+      }
+    }
+    let value = liveData.get(path)
+    if (value === undefined) {
+      value = defaultVaue
+    }
+    if (value !== this.lastValue) {
+      this.lastValue = value
+      return value
+    }
+    return noChange
+  }
+
+  subscribe(): void {
+    const { liveData, path } = this
+    if (liveData && path) {
+      this.unsubscribe = liveData.observeProperties([path], (data) => {
+        this.setValue(data.value)
+      })
+    }
+  }
+
+  protected override disconnected() {
+    this.unsubscribe?.()
+    this.unsubscribe = undefined
+  }
+
+  protected override reconnected() {
+    this.subscribe()
+  }
+}
+
+/**
+ * A Lit directive that connects a `LiveData` property to a LitElement property.
+ * When the `LiveData` property changes, the LitElement re-renders.
+ *
+ * @param liveData - The `LiveData` instance.
+ * @param path - The dot-notation path to the property to observe (e.g., "user.name").
+ * @returns The current value of the `LiveData` property.
+ *
+ * @example
+ * ```typescript
+ * import { LitElement, html } from 'lit';
+ * import { customElement } from 'lit/decorators.js';
+ * import { live, LiveData } from './LiveData.js';
+ *
+ * @customElement('my-element')
+ * export class MyElement extends LitElement {
+ *   // Create a LiveData instance
+ *   userData = new LiveData({ name: 'Initial Name' });
+ *
+ *   override render() {
+ *     return html`
+ *       <div>User Name: ${live(this.userData, 'name')}</div>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export const live = directive(LiveDataDirective)

package/src/directives/observable.ts

@@ -0,0 +1,123 @@
+import { noChange } from 'lit'
+import { directive, PartInfo } from 'lit/directive.js'
+import { AsyncDirective } from 'lit/async-directive.js'
+
+class ObservableDirective extends AsyncDirective {
+  private value?: EventTarget
+  private path?: string
+  private changeEvent?: string
+  private unsubscribe?: () => void
+  private lastValue?: unknown
+
+  constructor(_partInfo: PartInfo) {
+    super(_partInfo)
+    this.listener = this.listener.bind(this)
+  }
+
+  get(path: string): unknown | undefined {
+    if (!path) {
+      return undefined
+    }
+    const segments = path.split('.')
+    let current: unknown = this.value
+    for (const segment of segments) {
+      if (current === null || current === undefined || typeof current !== 'object') {
+        return undefined
+      }
+      if (Array.isArray(current)) {
+        const index = parseInt(segment, 10)
+        if (isNaN(index) || index < 0 || index >= current.length) {
+          return undefined
+        }
+        current = current[index]
+      } else {
+        current = (current as Record<string, unknown>)[segment]
+      }
+    }
+    return current
+  }
+
+  /**
+   * @param target The target object containing the data to render.
+   * @param path The path to the property to render.
+   * @param defaultValue The default value to use if the property is not found.
+   * @param changeEvent The event type to listen for changes (default is 'change').
+   */
+  render(target: EventTarget, path: string, defaultValue?: unknown, changeEvent?: 'string') {
+    if (this.value !== target) {
+      this.value = target
+      this.path = path
+      this.changeEvent = changeEvent
+      this.unsubscribe?.()
+      this.unsubscribe = undefined
+      if (this.isConnected) {
+        this.subscribe()
+      }
+    }
+    let value = this.get(path)
+    if (value === undefined) {
+      value = defaultValue
+    }
+    if (value !== this.lastValue) {
+      this.lastValue = value
+      return value
+    }
+    return noChange
+  }
+
+  subscribe(): void {
+    const { value, path, changeEvent = 'change' } = this
+    if (value && path) {
+      value.addEventListener(changeEvent, this.listener)
+      this.unsubscribe = () => {
+        value.removeEventListener(changeEvent, this.listener)
+      }
+    }
+  }
+
+  protected override disconnected() {
+    this.unsubscribe?.()
+    this.unsubscribe = undefined
+  }
+
+  protected override reconnected() {
+    this.subscribe()
+  }
+
+  protected listener(): void {
+    const value = this.get(this.path as string)
+    this.setValue(value)
+  }
+}
+
+/**
+ * A Lit directive that connects a `LiveData` property to a LitElement property.
+ * When the `LiveData` property changes, the LitElement re-renders.
+ *
+ * @param liveData - The `LiveData` instance.
+ * @param path - The dot-notation path to the property to observe (e.g., "user.name").
+ * @returns The current value of the `LiveData` property.
+ *
+ * @example
+ * ```typescript
+ * import { LitElement, html } from 'lit'
+ * import { customElement } from 'lit/decorators.js'
+ *
+ * class ObservableData extends EventTarget {
+ *   // ...
+ * }
+ *
+ * @customElement('my-element')
+ * export class MyElement extends LitElement {
+ *   // Create an observable instance
+ *   userData = new ObservableData({ name: 'Initial Name' });
+ *
+ *   override render() {
+ *     return html`
+ *       <div>User Name: ${observable(this.userData, 'name', 'change')}</div>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export const observable = directive(ObservableDirective)

package/src/directives/retargetHost.ts

@@ -0,0 +1,55 @@
+import { type ChildPart, type TemplateResult } from 'lit'
+import { directive, Directive, type DirectiveParameters, type PartInfo, PartType } from 'lit/directive.js'
+
+class UpdateHostDirective extends Directive {
+  constructor(partInfo: PartInfo) {
+    super(partInfo)
+    if (partInfo.type !== PartType.CHILD) {
+      throw new Error('retargetEvents() can only be used on a template result')
+    }
+  }
+
+  override render(host: EventTarget, template: TemplateResult): TemplateResult {
+    return template
+  }
+
+  override update(containerPart: ChildPart, [host, v]: DirectiveParameters<this>): TemplateResult {
+    if (containerPart.options) {
+      containerPart.options.host = host
+    }
+    return this.render(host, v)
+  }
+}
+
+/**
+ * A directive to be used to update the `host` property on the
+ * lit template. This can be used when the rendering happens outside
+ * the main template (in another class). In such case instead of
+ * calling `.listener.bind(this)` whenever using a listener you can
+ * use this directive to render entire template belonging to another host.
+ *
+ * ```typescript
+ * class NonLitHtmlContext {
+ *   handleButton(): void {
+ *     console.log(this); // -> NonLitHtmlContext
+ *   }
+ *
+ *   render(): TemplateRest {
+ *     const content = this.renderUi();
+ *     return html`${retargetHost(this, content)}`;
+ *   }
+ *
+ *   renderUi(): TemplateRest {
+ *     return html`<button \@click="${this.handleButton}"></button>`;
+ *   }
+ * }
+ *
+ * class LitElementInstance extends LitElement {
+ *   ui = new NonLitHtmlContext();
+ *   render(): TemplateResult {
+ *     return this.ui.render();
+ *   }
+ * }
+ * ```
+ */
+export const retargetHost = directive(UpdateHostDirective)

package/src/elements/ApiElement.ts

@@ -1,5 +1,5 @@
-import { LitElement } from "lit";
-import { property } from "lit/decorators.js";
+import { LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
 
 /**
  * A base element for all elements in the UI library.
@@ -9,20 +9,20 @@ export default class ApiElement extends LitElement {
   /**
    * Whenever the element wants to listen on global object
    * it uses this as a reference to it.
-   * 
+   *
    * @default window
    */
-  @property({ type: Object }) eventsTarget: EventTarget;
+  @property({ type: Object }) accessor eventsTarget: EventTarget
 
   constructor() {
-    super();
-    this.eventsTarget = window;
+    super()
+    this.eventsTarget = window
   }
 
   /**
    * A common way for an element to notify a change.
    */
   notifyChange(): void {
-    this.dispatchEvent(new Event('change'));
+    this.dispatchEvent(new Event('change'))
   }
 }

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

@@ -1,8 +1,8 @@
-import { html, TemplateResult, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { AmfNamespace, AmfShapes, IApiCustomDomainProperty, IApiDomainProperty } from '@api-client/core/build/browser.js';
-import ApiElement from '../ApiElement.js';
-import '../../define/ui/ui-icon.js';
+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 '../../md/icons/ui-icon.js'
 
 /**
  * An element to render annotations (also known as custom properties)
@@ -12,115 +12,112 @@ import '../../define/ui/ui-icon.js';
  * The element looks for annotations in model and renders them.
  */
 export default class ApiAnnotationDocument extends ApiElement {
-  protected shapeValue: IApiDomainProperty | undefined;
+  protected shapeValue: IApiDomainProperty | undefined
 
   /**
    * Serialized with `ApiSerializer` API domain model.
    * This is to be used instead of `shape`.
    */
-  @property({ type: Object })
   get domainModel(): IApiDomainProperty | undefined {
-    return this.shapeValue;
+    return this.shapeValue
   }
 
+  @property({ type: Object })
   set domainModel(value: IApiDomainProperty | undefined) {
-    const oldValue = this.shapeValue;
+    const oldValue = this.shapeValue
     if (oldValue === value) {
-      return;
+      return
     }
-    this.shapeValue = value;
-    this.processShape();
+    this.shapeValue = value
+    this.processShape()
   }
 
-  protected propertiesValue: IApiCustomDomainProperty[] | undefined;
+  protected propertiesValue: IApiCustomDomainProperty[] | undefined
 
   /**
    * @returns `true` if any custom property has been found.
    */
   get hasCustomProperties(): boolean {
-    const properties = this.propertiesValue;
-    return Array.isArray(properties) && !!properties.length;
+    const properties = this.propertiesValue
+    return Array.isArray(properties) && !!properties.length
   }
 
   /**
    * List of custom properties in the shape.
    */
-  @property({ type: Array })
   get customProperties(): IApiCustomDomainProperty[] | undefined {
-    return this.propertiesValue;
+    return this.propertiesValue
   }
 
-
+  @property({ type: Array })
   set customProperties(value: IApiCustomDomainProperty[] | undefined) {
-    const old = this.propertiesValue;
+    const old = this.propertiesValue
     if (old === value) {
-      return;
+      return
     }
-    this.propertiesValue = value;
-    this.processVisibility();
-    this.requestUpdate();
+    this.propertiesValue = value
+    this.processVisibility()
+    this.requestUpdate()
   }
 
   /**
    * Called when the shape property change.
    */
   protected processShape(): void {
-    const shape = this.shapeValue;
-    this.propertiesValue = undefined;
+    const shape = this.shapeValue
+    this.propertiesValue = undefined
     if (!shape) {
-      return;
+      return
     }
-    const result = shape.customDomainProperties;
+    const result = shape.customDomainProperties
     if (Array.isArray(result) && result.length) {
-      this.propertiesValue = result;
+      this.propertiesValue = result
     }
-    this.processVisibility();
-    this.requestUpdate();
+    this.processVisibility()
+    this.requestUpdate()
   }
 
   protected processVisibility(): void {
-    const { hasCustomProperties } = this;
+    const { hasCustomProperties } = this
     if (hasCustomProperties) {
-      this.setAttribute('aria-hidden', 'false');
-      this.removeAttribute('hidden');
+      this.setAttribute('aria-hidden', 'false')
+      this.removeAttribute('hidden')
     } else {
-      this.setAttribute('aria-hidden', 'true');
-      this.setAttribute('hidden', 'true');
+      this.setAttribute('aria-hidden', 'true')
+      this.setAttribute('hidden', 'true')
     }
   }
 
   protected scalarValue(scalar: AmfShapes.IApiScalarNode): string | number | boolean {
-    let { value = '' } = scalar;
+    let { value = '' } = scalar
     if (value === 'nil') {
-      value = '';
+      value = ''
     }
-    return value;
+    return value
   }
 
   override render(): TemplateResult | string {
-    const { hasCustomProperties, customProperties } = this;
+    const { hasCustomProperties, customProperties } = this
     if (!hasCustomProperties || !customProperties) {
-      return '';
+      return ''
     }
-    const content = customProperties.map((prop) => this.renderProperty(prop));
-    return html`
-    ${content}
-    `;
+    const content = customProperties.map((prop) => this.renderProperty(prop))
+    return html` ${content} `
   }
 
   /**
    * @returns The template for the custom property.
    */
   protected renderProperty(prop: IApiCustomDomainProperty): TemplateResult | typeof nothing {
-    const { name, extension } = prop;
-    const { types } = extension;
+    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 AmfShapes.IApiScalarNode)
     }
     if (types.includes(AmfNamespace.aml.vocabularies.data.Object)) {
-      return this.renderObject(name, extension as AmfShapes.IApiObjectNode);
+      return this.renderObject(name, extension as AmfShapes.IApiObjectNode)
     }
-    return nothing;
+    return nothing
   }
 
   /**
@@ -128,52 +125,55 @@ export default class ApiAnnotationDocument extends ApiElement {
    * @param content The content tp render.
    * @returns The template for the custom property.
    */
-  protected renderAnnotationWrapper(name: string, content: TemplateResult | (TemplateResult | string)[] | string): TemplateResult {
+  protected renderAnnotationWrapper(
+    name: string,
+    content: TemplateResult | (TemplateResult | string)[] | string
+  ): TemplateResult {
     return html`
-    <div class="custom-property">
-      <ui-icon class="info-icon" icon="info"></ui-icon>
-      <div class="info-value">
-        <span class="name text-selectable">${name}</span>
-        ${content || ''}
+      <div class="custom-property">
+        <ui-icon class="info-icon" icon="info"></ui-icon>
+        <div class="info-value">
+          <span class="name text-selectable">${name}</span>
+          ${content || ''}
+        </div>
       </div>
-    </div>
-    `;
+    `
   }
 
   /**
    * @returns The template for the custom property.
    */
   protected renderScalar(name: string, scalar: AmfShapes.IApiScalarNode): TemplateResult {
-    const content = html`<span class="scalar-value text-selectable">${this.scalarValue(scalar)}</span>`;
-    return this.renderAnnotationWrapper(name, content);
+    const content = html`<span class="scalar-value text-selectable">${this.scalarValue(scalar)}</span>`
+    return this.renderAnnotationWrapper(name, content)
   }
 
   /**
    * @returns The template for the custom property.
    */
   protected renderObject(name: string, object: AmfShapes.IApiObjectNode): TemplateResult {
-    const { properties = {} } = object;
+    const { properties = {} } = object
     const content = Object.keys(properties).map((key) => {
-      const value = properties[key];
-      const { types } = value;
+      const value = properties[key]
+      const { types } = value
       if (types.includes(AmfNamespace.aml.vocabularies.data.Scalar)) {
-        return this.renderObjectScalarProperty(key, value);
+        return this.renderObjectScalarProperty(key, value)
       }
-      return key;
-    });
-    return this.renderAnnotationWrapper(name, content);
+      return key
+    })
+    return this.renderAnnotationWrapper(name, content)
   }
 
   /**
    * @returns The template for the custom property.
    */
   protected renderObjectScalarProperty(name: string, scalar: AmfShapes.IApiScalarNode): TemplateResult {
-    const value = this.scalarValue(scalar);
+    const value = this.scalarValue(scalar)
     return html`
-    <div class="object-property">
-      <span class="object-name text-selectable">${name}</span>
-      <span class="object-value text-selectable">${value}</span>
-    </div>
-    `;
+      <div class="object-property">
+        <span class="object-name text-selectable">${name}</span>
+        <span class="object-value text-selectable">${value}</span>
+      </div>
+    `
   }
 }