Bundled all original jsDoc comments in the production build

dist/animations/fade.d.ts

@@ -1,2 +1,13 @@
+/**
+ * Fade in an element
+ * @param element
+ * @param display Display property, flex by default
+ * @returns An awaitable promise
+ */
 export declare const fadeIn: (element: HTMLElement, display?: string) => Promise<void>;
+/**
+ * Fade out an element
+ * @param element
+ * @returns An awaitable promise
+ */
 export declare const fadeOut: (element: HTMLElement) => Promise<void>;

dist/animations/fade.js

@@ -1,3 +1,9 @@
+/**
+ * Fade in an element
+ * @param element
+ * @param display Display property, flex by default
+ * @returns An awaitable promise
+ */
 export const fadeIn = (element, display = 'flex') => {
     return new Promise((resolve) => {
         element.style.opacity = '0';
@@ -14,6 +20,11 @@ export const fadeIn = (element, display = 'flex') => {
         })();
     });
 };
+/**
+ * Fade out an element
+ * @param element
+ * @returns An awaitable promise
+ */
 export const fadeOut = (element) => {
     return new Promise((resolve) => {
         element.style.opacity = '1';

dist/components/CopyJSONButton.d.ts

@@ -17,11 +17,38 @@ export declare class CopyJSONButton {
         notificationDuration?: number;
         successCSSClass?: string;
     });
+    /**
+     * Inits the component.
+     */
     private init;
+    /**
+     * Creates a hidden button that will serve as the copy trigger.
+     * @returns The new button element.
+     */
     private createHiddenTrigger;
+    /**
+     * Handles click events: triggers a copy command on the element.
+     */
     private handleClick;
+    /**
+     * Handles the copy event, transfers the JSON data to the user's clipboard.
+     * @param e
+     */
     private handleCopy;
+    /**
+     * Triggers a `success`/`error` notification on the button.
+     * If the `successCSSClass` is specific, it adds/removes on the button.
+     * @param state `success` or `error`
+     */
     private triggerNotification;
+    /**
+     * Updates the JSON data to be copied.
+     * @param newCopyData
+     */
     updateCopyData(newCopyData: Record<string, unknown>): void;
+    /**
+     * Updates the button's text content.
+     * @param newText The new text to be displayed.
+     */
     updateTextContent(newText: string): void;
 }

dist/components/CopyJSONButton.js

@@ -26,11 +26,18 @@ export class CopyJSONButton {
         this.hiddenTrigger = this.createHiddenTrigger();
         this.init();
     }
+    /**
+     * Inits the component.
+     */
     init() {
         const { element, hiddenTrigger } = this;
         element.addEventListener('click', () => this.handleClick());
         hiddenTrigger.addEventListener('copy', (e) => this.handleCopy(e));
     }
+    /**
+     * Creates a hidden button that will serve as the copy trigger.
+     * @returns The new button element.
+     */
     createHiddenTrigger() {
         const { element } = this;
         const button = document.createElement('button');
@@ -48,20 +55,34 @@ export class CopyJSONButton {
         (element.parentElement || document.body).appendChild(button);
         return button;
     }
+    /**
+     * Handles click events: triggers a copy command on the element.
+     */
     handleClick() {
         this.hiddenTrigger.focus();
         document.execCommand('copy');
     }
+    /**
+     * Handles the copy event, transfers the JSON data to the user's clipboard.
+     * @param e
+     */
     handleCopy(e) {
         try {
+            // Copy starter form JSON to clipboard
             e.clipboardData?.setData('application/json', JSON.stringify(this.copyData).trim());
             e.preventDefault();
+            // Trigger notification
             this.triggerNotification('success');
         }
         catch {
             this.triggerNotification('error');
         }
     }
+    /**
+     * Triggers a `success`/`error` notification on the button.
+     * If the `successCSSClass` is specific, it adds/removes on the button.
+     * @param state `success` or `error`
+     */
     triggerNotification(state) {
         const { notificationActive, notificationDuration, originalText, element, successCSSClass, successText, errorText } = this;
         if (notificationActive)
@@ -77,9 +98,17 @@ export class CopyJSONButton {
             this.notificationActive = false;
         }, notificationDuration);
     }
+    /**
+     * Updates the JSON data to be copied.
+     * @param newCopyData
+     */
     updateCopyData(newCopyData) {
         this.copyData = newCopyData;
     }
+    /**
+     * Updates the button's text content.
+     * @param newText The new text to be displayed.
+     */
     updateTextContent(newText) {
         this.textNode.textContent = newText;
         this.originalText = newText;

dist/components/Debug.js

@@ -1,3 +1,4 @@
+// Constants
 const alertTypes = ['info', 'error'];
 export class Debug {
     static alertsActivated = false;

dist/components/DisplayController.d.ts

@@ -1,11 +1,32 @@
 import type { InteractionParams } from './Interaction';
 export interface DisplayControllerParams {
+    /**
+     * The main element. Accepts both an HTMLElement or a string selector.
+     */
     element: HTMLElement | string;
+    /**
+     * If the display must be controlled thorugh a Webflow interaction.
+     */
     interaction?: InteractionParams;
+    /**
+     * The display property of the element when displayed.
+     * Not applicable when interaction parameters ara passed to the instance, as it's assumed that the Webflow interaction will set the display property.
+     * Defaults to `block`.
+     */
     displayProperty?: typeof DisplayController['displayProperties'][number];
+    /**
+     * If set to true, the element will be straitgh showed / hidden without any transition.
+     */
     noTransition?: boolean;
+    /**
+     * If set to true, the element will be set to `display: none`.
+     */
     startsHidden?: boolean;
 }
+/**
+ * Controls showing/hiding an element.
+ * Works with Webflow interactions, built-in fade animations or no animations at all.
+ */
 export declare class DisplayController {
     private readonly interaction;
     private readonly noTransition;
@@ -14,7 +35,18 @@ export declare class DisplayController {
     readonly element: HTMLElement;
     static readonly displayProperties: readonly ["block", "flex", "grid", "inline-block", "inline"];
     constructor({ element, interaction, displayProperty, noTransition, startsHidden }: DisplayControllerParams);
+    /**
+     * @returns If the element is visible
+     */
     isVisible: () => boolean;
+    /**
+     * Displays the element
+     * @returns An awaitable promise
+     */
     show(): Promise<void>;
+    /**
+     * Hides the element
+     * @returns An awaitable promise
+     */
     hide(): Promise<void>;
 }

dist/components/DisplayController.js

@@ -3,6 +3,10 @@ import { fadeIn, fadeOut } from '../animations/fade';
 import { isVisible } from '../helpers/isVisible';
 import { queryElement } from '../helpers';
 import { Debug } from '.';
+/**
+ * Controls showing/hiding an element.
+ * Works with Webflow interactions, built-in fade animations or no animations at all.
+ */
 export class DisplayController {
     interaction;
     noTransition;
@@ -11,13 +15,15 @@ export class DisplayController {
     element;
     static displayProperties = ['block', 'flex', 'grid', 'inline-block', 'inline'];
     constructor({ element, interaction, displayProperty, noTransition, startsHidden }) {
+        // Store properties
         this.element =
             typeof element === 'string'
                 ? queryElement(element, HTMLElement) ||
                     Debug.alert(`No element with the ${element} selector was found.`, 'error')
                 : element;
         this.noTransition = noTransition;
         this.displayProperty = displayProperty || 'block';
+        // Visibility check
         if (startsHidden) {
             this.element.style.display = 'none';
             this.visible = false;
@@ -29,7 +35,14 @@ export class DisplayController {
             this.interaction = new Interaction({ element, duration });
         }
     }
+    /**
+     * @returns If the element is visible
+     */
     isVisible = () => this.visible;
+    /**
+     * Displays the element
+     * @returns An awaitable promise
+     */
     async show() {
         if (this.visible)
             return;
@@ -41,6 +54,10 @@ export class DisplayController {
             await fadeIn(this.element, this.displayProperty);
         this.visible = true;
     }
+    /**
+     * Hides the element
+     * @returns An awaitable promise
+     */
     async hide() {
         if (!this.visible)
             return;

dist/components/Interaction.d.ts

@@ -1,5 +1,13 @@
 export interface InteractionParams {
+    /**
+     * The element that has a Webflow Ix2 Click interaction binded to it.
+     */
     element: HTMLElement | string;
+    /**
+     * The duration of the interaction.
+     * If a single number is passed, it will be used for both first and second interactions.
+     * If an object is passed, you can specify the duration for each interaction.
+     */
     duration?: number | Partial<Interaction['duration']>;
 }
 export declare class Interaction {
@@ -11,9 +19,29 @@ export declare class Interaction {
         first: number;
         second: number;
     };
+    /**
+     * Acts as the controller for a Webflow Interaction.
+     * It accepts an element that will be clicked when required (firing a Mouse Click interaction).
+     * @param element Element that has the Mouse Click interaction.
+     * @param duration Optionally, the duration can be explicitly set so the trigger methods will return an awaitable Promise.
+     */
     constructor({ element, duration }: InteractionParams);
+    /**
+     * Trigger the interaction
+     * @param click Perform first or second click
+     * @returns True if the interaction was fired
+     */
     trigger(click?: 'first' | 'second'): Promise<boolean>;
+    /**
+     * @returns If the interaction is active
+     */
     isActive: () => boolean;
+    /**
+     * @returns If the interaction is running
+     */
     isRunning: () => boolean;
+    /**
+     * @returns A promise that fulfills when the current running interaction has finished
+     */
     untilFinished: () => Promise<unknown> | undefined;
 }

dist/components/Interaction.js

@@ -7,6 +7,12 @@ export class Interaction {
     running = false;
     runningPromise;
     duration;
+    /**
+     * Acts as the controller for a Webflow Interaction.
+     * It accepts an element that will be clicked when required (firing a Mouse Click interaction).
+     * @param element Element that has the Mouse Click interaction.
+     * @param duration Optionally, the duration can be explicitly set so the trigger methods will return an awaitable Promise.
+     */
     constructor({ element, duration }) {
         this.element =
             typeof element === 'string'
@@ -18,6 +24,11 @@ export class Interaction {
             second: typeof duration === 'number' ? duration : duration?.second ?? 0,
         };
     }
+    /**
+     * Trigger the interaction
+     * @param click Perform first or second click
+     * @returns True if the interaction was fired
+     */
     async trigger(click) {
         if ((click === 'first' && this.active) || (click === 'second' && !this.active))
             return false;
@@ -31,7 +42,16 @@ export class Interaction {
         this.active = click === 'first';
         return true;
     }
+    /**
+     * @returns If the interaction is active
+     */
     isActive = () => this.active;
+    /**
+     * @returns If the interaction is running
+     */
     isRunning = () => this.running;
+    /**
+     * @returns A promise that fulfills when the current running interaction has finished
+     */
     untilFinished = () => this.runningPromise;
 }

dist/components/WritableStore.d.ts

@@ -1,9 +1,31 @@
+/**
+ * Writable Store that runs callbacks every time the provided value is updated.
+ */
 export declare class WritableStore<T> {
     private value;
     private subscribeCallbacks;
+    /**
+     * @param value The initial value of the store.
+     */
     constructor(value: T);
+    /**
+     * @returns The current value
+     */
     get(): T;
+    /**
+     * Sets a new value
+     * @param newValue
+     */
     set(newValue: T): void;
+    /**
+     * Exposes the current value and accepts a new value as an update.
+     * @param callback
+     */
     update(callback: (value: T) => T): void;
+    /**
+     * Subscribes the callback to run every time the store value changes.
+     * @param callback It receives the current value.
+     * @returns An unsubscribe method.
+     */
     subscribe(callback: (value: T) => void): () => void;
 }