doc: adding missing doc annotations

components/compas-loading/src/compas-loading.ts

@@ -2,7 +2,14 @@ import { html, LitElement, TemplateResult, property } from "lit-element";
 import "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 
+/**
+ * @prop {string} message - The message to display.
+ * @example <compas-loading message="Custom Loading Message..."></compas-loading>
+ * @summary Displays a loading message.
+ * @tagname compas-loading
+ */
 export class CompasLoadingElement extends LitElement {
+  /** the message to display. */
   @property({ type: String }) message?: string;
 
   render(): TemplateResult {

components/compas-open/src/compas-open.ts

@@ -23,7 +23,17 @@ export function newDocRetrievedEvent(
   });
 }
 
+/**
+ * @prop {boolean} allowLocalFile - If true, the user can select a local file to open.
+ * @slot sclTypes - The list of SCL types.
+ * @slot sclList - The list of SCL documents.
+ * @slot - The default slot.
+ * @example <compas-open></compas-open>
+ * @summary Displays a file selector to open an SCL document and/or a list of SCL documents to open.
+ * @tagname compas-open
+ */
 export class CompasOpenElement extends LitElement {
+  /** if true, the user can select a local file to open. */
   @property({ type: Boolean })
   allowLocalFile = true;
 

components/compas-scl-list/src/compas-scl-list.ts

@@ -22,18 +22,32 @@ export function newSclSelectedEvent(docId: string): SclSelectedEvent {
   });
 }
 
+/**
+ * @prop {string} type - The type of SCL to retrieve.
+ * @prop {string} nameSpace - The namespace of the SCL to retrieve.
+ * @prop {Element[]} items - The list of SCL documents.
+ * @prop {string[]} labels - The list of labels.
+ * @prop {string[]} selectedLabels - The list of selected labels.
+ * @example <compas-scl-list></compas-scl-list>
+ * @summary Displays a list of SCL documents filterable by labels.
+ * @tagname compas-scl-list
+ * @cssprop --mdc-list-side-padding - The padding of the list.
+ * 
+ */
 export class CompasSclList extends LitElement {
+  /** the type of SCL to retrieve. */
   @property({ type: String })
   type?: string;
+  /** the namespace of the SCL to retrieve. */
   @property({ type: String })
   nameSpace = "";
-
+  /** the list of SCL documents. */
   @property({ type: Array })
   private items: Element[] | undefined;
-
+  /** the list of labels. */
   @property({ type: Array })
   private labels: string[] = [];
-
+  /** the list of selected labels. */
   @property({ type: Array })
   private selectedLabels: string[] = [];
 
@@ -81,7 +95,7 @@ export class CompasSclList extends LitElement {
           id="labelsFilter"
           multi="true"
           ?disabled="${this.labels.length <= 0}"
-          .header="Select"
+          header="Select"
           labels
           to
           be

components/compas-scl-type-list/src/compas-scl-type-list.ts

@@ -16,10 +16,18 @@ export function newTypeSelectedEvent(type: string): TypeSelectedEvent {
   });
 }
 
+/**
+ * @prop {Element[]} sclTypes - The list of SCL types.
+ * @prop {string} nameSpace - The namespace of the SCL types.
+ * @example <compas-scl-type-list></compas-scl-type-list>
+ * @summary Displays a list of SCL types.
+ * @tagname compas-scl-type-list
+ */
 export class CompasSclTypeList extends LitElement {
+  /** the list of SCL types. */
   @property({ type: Array })
   sclTypes: Element[] | undefined;
-
+  /** the namespace of the SCL types. */
   @property({ type: String })
   nameSpace = "";
 

components/oscd-filter-button/src/oscd-filter-button.ts

@@ -31,13 +31,23 @@ import {
   }
 
   /**
-   * A mwc-list with mwc-textfield that filters the list items for given or separated terms
+   * @prop {string} header - The header of the dialog.
+   * @prop {string} icon - The icon of the button.
+   * @prop {boolean} disabled - If true, the button is disabled.
+   * @slot - The default slot.
+   * @example <oscd-filter-button></oscd-filter-button>
+   * @summary Displays a button that opens a dialog with a list filterable by given search terms
+   * @tagname oscd-filter-button
+   * @cssprop --mdc-theme-on-surface - The color of the icon.
    */
   export class OscdFilterButton extends OscdFilteredList {
+    /** the header of the dialog. */
     @property()
     header!: TemplateResult | string;
+    /** the icon of the button. */
     @property()
     icon!: string;
+    /** if true, the button is disabled. */
     @property({ type: Boolean })
     disabled = false;
 
@@ -71,7 +81,7 @@ import {
         </mwc-icon-button>
         <mwc-dialog
           id="filterDialog"
-          heading="${this.header ? this.header : "Filter"}
+          heading="${this.header ? this.header : "Filter"}"
           scrimClickAction=""
           @closing="${() => this.onClosing()}"
         >

packages/compas-open-plugin/src/compas-open-plugin.ts

@@ -40,22 +40,29 @@ import {
   export default class CompasOpenMenuPlugin extends LitElement {
     @query("mwc-dialog#compas-open-dlg")
     dialog!: Dialog;
+    /** if true, the user can select a local file to open */
     @property({ type: Boolean })
     allowLocalFile = true;
-
+    /** the selected SCL type */
     @property({ type: String })
     selectedType: string | undefined;
+    /** the list of SCL types */
     @property({ type: Array })
     sclTypes!: Element[];
+    /** the list of SCL documents */
     @property({ type: Array })
     items: Element[] | undefined;
+    /** the list of labels */
     @property({ type: Array })
     labels: string[] = [];
+    /** the list of selected labels */
     @property({ type: Array })
     selectedLabels: string[] = [];
+    /** the locale to use for translations */
     @property({ type: String })
     locale = "en";
 
+    /** Run method to start the plugin. */
     async run(): Promise<void> {
       this.dialog.show();
     }