docs: convert jsdoc strings to tsdoc

src/components/action-bar/examples/action-bar-as-list-component.tsx

@@ -15,8 +15,8 @@ import { Component, h } from '@stencil/core';
  * There should be a `min-width` and `max-width` on the component in order to prevent
  * the overflow menu to cause infinite rendering loops.
  * :::
- * @link action-bar-in-list.tsx
- * @link action-bar-in-list.scss
+ * @sourceFileLink action-bar-in-list.tsx
+ * @sourceFileLink action-bar-in-list.scss
  */
 @Component({
     tag: 'limel-example-action-bar-as-primary-component',

src/components/badge/format.ts

@@ -2,8 +2,8 @@ import NumAbbr from 'number-abbreviate';
 
 /**
  * Abbreviate a number
- * @param {number} value the number to abbreviate
- * @returns {string} abbreviated number
+ * @param value - the number to abbreviate
+ * @returns abbreviated number
  */
 export function abbreviate(value: number): string {
     if (typeof value !== 'number') {

src/components/breadcrumbs/breadcrumbs.spec.tsx

@@ -163,9 +163,8 @@ describe('limel-breadcrumbs', () => {
  * Ids are randomly generated and we do not have access to them as they
  * are inside the breadcrumbs component. But we can get them this way.
  * Retrieves ids via inorder traversal
- * @param {Element} node base node
- * @param {string[]} ids id array that you wish to populate
- * @return void
+ * @param node - base node
+ * @param ids - id array that you wish to populate
  */
 function getIDs(node: Element, ids: string[]) {
     if (node.children && node.id) {

src/components/chip-set/chip-set-input-helpers.ts

@@ -16,8 +16,8 @@ import {
 /**
  * Key handler for the input field.
  * Lets the user select, activate, and remove chips with the keyboard.
- * @param {KeyboardEvent} event event
- * @returns {void}
+ * @param event - event
+
  */
 export function handleKeyboardEvent(event: KeyboardEvent) {
     if (this.textValue.length) {

src/components/chip-set/chip-set.tsx

@@ -224,7 +224,7 @@ export class ChipSet {
 
     /**
      * Used to find out whether the chip-set is in edit mode.
-     * @returns {Promise<boolean>} `true` if the chip-set is in edit mode, `false` otherwise.
+     * @returns `true` if the chip-set is in edit mode, `false` otherwise.
      */
     @Method()
     public async getEditMode(): Promise<boolean> {
@@ -233,8 +233,8 @@ export class ChipSet {
 
     /**
      * Used to set focus to the chip-set input field.
-     * @param {boolean} emptyInput if `true`, any text in the input is discarded
-     * @returns {Promise<void>} does not return anything, but methods have to be async
+     * @param emptyInput - if `true`, any text in the input is discarded
+     * @returns does not return anything, but methods have to be async
      */
     @Method()
     public async setFocus(emptyInput: boolean = false) {
@@ -254,7 +254,7 @@ export class ChipSet {
     /**
      * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the
      * consumer control when the input is emptied.
-     * @returns {Promise<void>} does not return anything, but methods have to be async
+     * @returns does not return anything, but methods have to be async
      */
     @Method()
     public async emptyInput() {
@@ -499,7 +499,7 @@ export class ChipSet {
 
     /**
      * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible
-     * @returns {void}
+
      */
     private handleTextFieldFocus() {
         if (this.disabled || this.readonly) {
@@ -517,7 +517,7 @@ export class ChipSet {
     /**
      * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any
      * additional space when the user it not typing anything
-     * @returns {void}
+
      */
     private handleInputBlur() {
         if (this.emptyInputOnBlur) {

src/components/dock/dock.types.ts

@@ -30,7 +30,7 @@ export interface DockItem {
      * item is pointing at, or
      * - the user interface is showing a page which is a sub-location of the
      * top-level location. For example, when user is at
-     * _My Account > Notification Settings_, the dock item of _My Account_
+     * _My Account ➡ Notification Settings_, the dock item of _My Account_
      * should have the `selected` state.
      */
     selected?: boolean;

src/components/dock/examples/dock-custom-component.tsx

@@ -13,7 +13,7 @@ import { DockItem } from '@limetech/lime-elements';
  * `.SCSS` file. That defines the width the popover component, which is `auto`
  * by default. But modifying it may be helpful depending on the usage.
  * :::
- * @link my-custom-menu.tsx
+ * @sourceFileLink my-custom-menu.tsx
  */
 
 @Component({

src/components/flex-container/flex-container.tsx

@@ -9,7 +9,7 @@ import { Component, h, Prop } from '@stencil/core';
  * This component is deprecated and will be removed in a future version of
  * Lime Elements. Please use CSS for your flexible container needs 🙂
  * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
- * @deprecated
+ * @deprecated - Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
  * @private
  * @slot - Container content
  */

src/components/form/adapters/base-adapter.ts

@@ -22,8 +22,8 @@ import {
  * really means "can be properly rendered to the dom by react". It just so
  * happens that react can render most primitives to the dom correctly.
  * @see https://developer.mozilla.org/en-US/docs/Glossary/Primitive
- * @param {any} value the value to check
- * @returns {boolean} Whether or not the value is primitive
+ * @param value - the value to check
+ * @returns Whether or not the value is primitive
  */
 const isPrimitive = (value) =>
     isNil(value) || isNumber(value) || isString(value) || isBoolean(value);
@@ -75,9 +75,9 @@ export class LimeElementsAdapter extends React.Component<any, any> {
     /**
      * Given a key a value set the value of property named `key` to
      * the value of `value`
-     * @param {string} key The name of the property
-     * @param {any} value The value of the property
-     * @returns {void}
+     * @param key - The name of the property
+     * @param value - The value of the property
+
      */
     setComponentProperty(key: string, value: any): void {
         const element = this.component.current;
@@ -89,8 +89,8 @@ export class LimeElementsAdapter extends React.Component<any, any> {
      *
      * Events must be bound using this function otherwise events will bubble up too far
      * since react events are different that native dom events
-     * @param {string} eventName the name of the event to get the handler for
-     * @returns {any} the handler to bind to the component for the event name
+     * @param eventName - the name of the event to get the handler for
+     * @returns the handler to bind to the component for the event name
      */
     getHandler(eventName: string) {
         const { events } = this.props;
@@ -103,8 +103,8 @@ export class LimeElementsAdapter extends React.Component<any, any> {
 
     /**
      * Set events on the web component
-     * @param {object} events Event names to handlers
-     * @returns {void}
+     * @param events - Event names to handlers
+
      */
     setEvents(events: object) {
         const element = this.component.current;
@@ -115,8 +115,8 @@ export class LimeElementsAdapter extends React.Component<any, any> {
 
     /**
      * Remove events on the web component
-     * @param {object} events Event names to handlers
-     * @returns {void}
+     * @param events - Event names to handlers
+
      */
     removeEvents(events: object) {
         const element = this.component.current;
@@ -127,9 +127,9 @@ export class LimeElementsAdapter extends React.Component<any, any> {
 
     /**
      * Get the events to remove from the component
-     * @param {object} prevEvents previous events
-     * @param {object} nextEvents new events
-     * @returns {object} the events to remove
+     * @param prevEvents - previous events
+     * @param nextEvents - new events
+     * @returns the events to remove
      */
     getEventsToRemove(prevEvents: object, nextEvents: object): object {
         return pickBy(
@@ -140,9 +140,9 @@ export class LimeElementsAdapter extends React.Component<any, any> {
 
     /**
      * Get the events to add to the component
-     * @param {object} prevEvents previous events
-     * @param {object} nextEvents new events
-     * @returns {object} the events to add
+     * @param prevEvents - previous events
+     * @param nextEvents - new events
+     * @returns the events to add
      */
     getEventsToAdd(prevEvents: object, nextEvents: object): object {
         return pickBy(
@@ -155,7 +155,7 @@ export class LimeElementsAdapter extends React.Component<any, any> {
      * Detect if event handlers have changed. If they
      * have changed, store them in the state, and remove and
      * re-add the changed event handlers
-     * @returns {void}
+
      */
     updateEvents() {
         const { prevEvents } = this.state;
@@ -185,17 +185,17 @@ export class LimeElementsAdapter extends React.Component<any, any> {
 
     /**
      * Get non primitive props. i.e. object, function, array, etc
-     * @param {object} elementProps the props to pass the webcomponet
-     * @returns {object} non primitive props
+     * @param elementProps - the props to pass the webcomponet
+     * @returns non primitive props
      */
     getNonPrimitiveProps(elementProps: object) {
         return pickBy(elementProps, negate(isPrimitive));
     }
 
     /**
      * Get primitive props. i.e. integer, boolean, etc
-     * @param {object} elementProps the props to pass the webcomponet
-     * @returns {object} primitive props
+     * @param elementProps - the props to pass the webcomponet
+     * @returns primitive props
      */
     getPrimitiveProps(elementProps: object): object {
         return pickBy(elementProps, isPrimitive);
@@ -205,9 +205,9 @@ export class LimeElementsAdapter extends React.Component<any, any> {
      * Given the previous renders props and the next renders props,
      * check if any of the property values have changed and return an
      * object with only those values
-     * @param {object} prevNonPrimitiveProps the previous renders non primitive props
-     * @param {object} nextNonPrimitiveProps the current renders non primitive props
-     * @returns {object} the changed primitive props
+     * @param prevNonPrimitiveProps - the previous renders non primitive props
+     * @param nextNonPrimitiveProps - the current renders non primitive props
+     * @returns the changed primitive props
      */
     getChangedNonPrimitiveProps(
         prevNonPrimitiveProps: object,
@@ -226,8 +226,8 @@ export class LimeElementsAdapter extends React.Component<any, any> {
      * instead of passing them as props the the React.createElement
      * function because non primitive props are not passed properly to the web
      * component via React.createElement
-     * @param {object} elementProps element props to set
-     * @returns {void}
+     * @param elementProps - element props to set
+
      */
     setNonPrimitives(elementProps: object): void {
         toPairs(elementProps).forEach(([key, value]) =>

src/components/form/examples/basic-form.tsx

@@ -4,7 +4,7 @@ import { schema } from './basic-schema';
 
 /**
  * Basic form with validation
- * @link basic-schema.ts
+ * @sourceFileLink basic-schema.ts
  */
 @Component({
     tag: 'limel-example-form',

src/components/form/examples/custom-component-form.tsx

@@ -28,8 +28,8 @@ import { schema } from './custom-component-schema';
  * While you can, in principle, use any component in a form, your custom form
  * components should implement the [FormComponent](#/type/FormComponent/)
  * interface.
- * @link custom-component-schema.ts
- * @link custom-component-picker.tsx
+ * @sourceFileLink custom-component-schema.ts
+ * @sourceFileLink custom-component-picker.tsx
  */
 @Component({
     tag: 'limel-example-custom-component-form',

src/components/form/examples/custom-component-picker.tsx

@@ -11,37 +11,37 @@ import {
 })
 export class CustomPickerExample implements FormComponent<number> {
     /**
-     * @inheritdoc
+     * {@inheritdoc}
      */
     @Prop({ reflect: true })
     public value: number;
 
     /**
-     * @inheritdoc
+     * {@inheritdoc}
      */
     @Prop({ reflect: true })
     public label: string;
 
     /**
-     * @inheritdoc
+     * {@inheritdoc}
      */
     @Prop({ reflect: true })
     public required: boolean;
 
     /**
-     * @inheritdoc
+     * {@inheritdoc}
      */
     @Prop({ reflect: true })
     public readonly: boolean;
 
     /**
-     * @inheritdoc
+     * {@inheritdoc}
      */
     @Prop({ reflect: true })
     public disabled: boolean;
 
     /**
-     * @inheritdoc
+     * {@inheritdoc}
      */
     @Prop({ reflect: true })
     public helperText?: string;

src/components/form/examples/custom-error-message-form.tsx

@@ -4,7 +4,7 @@ import { schema } from './custom-error-message-schema';
 
 /**
  * Form with custom error message
- * @link custom-error-message-schema.ts
+ * @sourceFileLink custom-error-message-schema.ts
  */
 @Component({
     tag: 'limel-example-custom-error-message',

src/components/form/examples/layout-form.tsx

@@ -47,7 +47,7 @@ import { schema } from './layout-schema';
  * In this example, each collapsible section has its own `colSpan`.
  * However, since the layout is responsive, make sure to change the browser
  * window size to see how their responsive layout changes.
- * @link layout-schema.ts
+ * @sourceFileLink layout-schema.ts
  */
 @Component({
     tag: 'limel-example-form-layout',

src/components/form/examples/list-form.tsx

@@ -3,7 +3,7 @@ import { schema } from './list-schema';
 
 /**
  * List data
- * @link list-schema.ts
+ * @sourceFileLink list-schema.ts
  */
 @Component({
     tag: 'limel-example-list-form',

src/components/form/examples/nested-form.tsx

@@ -3,7 +3,7 @@ import { schema } from './nested-schema';
 
 /**
  * Nested data
- * @link nested-schema.ts
+ * @sourceFileLink nested-schema.ts
  */
 @Component({
     tag: 'limel-example-nested-form',

src/components/form/examples/props-factory-form.tsx

@@ -3,8 +3,8 @@ import { schema } from './props-factory-schema';
 
 /**
  * Using `propsFactory`
- * @link props-factory-schema.ts
- * @link props-factory-picker.tsx
+ * @sourceFileLink props-factory-schema.ts
+ * @sourceFileLink props-factory-picker.tsx
  */
 @Component({
     tag: 'limel-example-props-factory-form',

src/components/form/examples/row-layout.tsx

@@ -3,7 +3,7 @@ import { schema } from './row-layout-schema';
 
 /**
  * Row layout
- * @link row-layout-schema.ts
+ * @sourceFileLink row-layout-schema.ts
  */
 @Component({
     tag: 'limel-example-form-row-layout',

src/components/form/examples/server-errors.tsx

@@ -4,7 +4,7 @@ import { schema } from './list-schema';
 
 /**
  * Form with server validation
- * @link list-schema.ts
+ * @sourceFileLink list-schema.ts
  */
 @Component({
     tag: 'limel-example-server-errors',

src/components/form/examples/span-fields.tsx

@@ -149,7 +149,7 @@ import { schema } from './span-fields-schema';
  * }
  * ```
  * :::
- * @link span-fields-schema.ts
+ * @sourceFileLink span-fields-schema.ts
  */
 @Component({
     tag: 'limel-example-form-span-fields',